/* ════════════════════════════════════════════════════════════
   SKU MAPPING · pareto tail · revenue stack · cross-industry
   Rides site.css + cpq.css + loop-visuals.css (reuses .cq-matrix).
   ════════════════════════════════════════════════════════════ */

.cq[data-loop="sku"] { --lp: #8A5A2B; }

/* quadrant label overrides (reusing .cq-matrix) */
.sk-map .cq-mq.scale { background: var(--accent-soft); }
.sk-map .cq-mq.scale .lb, .sk-map .cq-mq.scale .ct { color: var(--accent); }
.sk-map .cq-mq.promote { background: color-mix(in srgb, var(--lp) 8%, transparent); }
.sk-map .cq-mq.promote .lb, .sk-map .cq-mq.promote .ct { color: var(--lp); }
.sk-map .cq-mq.weed { background: #E8643D0D; }
.sk-map .cq-mq.weed .lb, .sk-map .cq-mq.weed .ct { color: var(--alert, #B33B1F); }

/* ── pareto / long tail ── */
.sk-tail { position: relative; }
.sk-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 190px; }
.sk-bars i { border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(0); animation: skGrow 8s var(--ease) infinite; }
@keyframes skGrow { 0% { transform: scaleY(0); } 16%, 88% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
.sk-bars i.core { background: var(--accent); }
.sk-bars i.mid { background: color-mix(in srgb, var(--lp) 55%, transparent); }
.sk-bars i.dead { background: #0E0E0C1F; }
.sk-tail-ax { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; font: 500 9px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sk-tail-ax span:nth-child(2) { text-align: center; }
.sk-tail-ax span:nth-child(3) { text-align: right; }
.sk-tail-key { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sk-tail-key div { border-left: 2px solid var(--c); padding-left: 12px; }
.sk-tail-key .v { font-size: 20px; font-weight: 500; letter-spacing: -.03em; color: var(--c); }
.sk-tail-key .l { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin-top: 6px; }

/* ── revenue stack ladder ── */
.sk-stack { display: grid; gap: 12px; }
.sk-tier { display: grid; grid-template-columns: 150px 1fr 82px; gap: 16px; align-items: center; }
.sk-tier .k { font: 500 10px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sk-tier .k b { display: block; color: var(--ink); font-size: 13px; font-family: var(--font); letter-spacing: -.01em; text-transform: none; margin-bottom: 3px; }
.sk-tr { height: 34px; border-radius: var(--r-1); background: var(--bg-2); overflow: hidden; }
.sk-tr i { display: flex; align-items: center; height: 100%; border-radius: var(--r-1); padding: 0 12px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .04em; white-space: nowrap; width: 0; animation: cqGrow 8s var(--ease) infinite; }
.sk-tier:nth-child(1) i { background: #0E0E0C1A; color: var(--ink-2); --w: 45%; animation-delay: .1s; }
.sk-tier:nth-child(2) i { background: color-mix(in srgb, var(--lp) 30%, transparent); color: var(--lp); --w: 55%; animation-delay: .35s; }
.sk-tier:nth-child(3) i { background: var(--accent); color: var(--accent-ink); --w: 66%; animation-delay: .6s; }
.sk-tier:nth-child(4) i { background: var(--ink); color: var(--bg); --w: 100%; animation-delay: .85s; }
.sk-tier .v { font: 500 14px/1 var(--font-mono); color: var(--ink); text-align: right; }
.sk-stack-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.sk-stack-note b { color: var(--ink); font-weight: 500; }

/* ── cross-industry translation ── */
.sk-xind { display: grid; gap: 0; margin-top: 36px; border: 1px solid var(--rule); border-radius: var(--r-3); overflow: hidden; background: var(--surface); }
.sk-xr { display: grid; grid-template-columns: 190px 1fr 1fr 1fr; gap: 16px; padding: 17px 22px; border-bottom: 1px solid var(--rule); align-items: start; }
.sk-xr:last-child { border-bottom: none; }
.sk-xr.hd { background: var(--bg-2); font: 500 9px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sk-xr .who { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.sk-xr .who span { display: block; font: 500 9px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: 4px; }
.sk-xr .c { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.sk-xr .c b { color: var(--ink); font-weight: 500; }
.sk-xr .c em { font-style: normal; color: var(--lp); }

/* ── vertical teaser ── */
.sk-vert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.sk-vc { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--c); border-radius: var(--r-3); padding: 26px; }
.sk-vc .st { font: 500 9px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.sk-vc h4 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; margin: 12px 0 0; color: var(--ink); }
.sk-vc p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 9px 0 0; }
.sk-vc .sp { font: 500 9px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: block; }

/* ── lifecycle ring (7 steps, closed loop) ── */
.sk-cycle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 34px; align-items: stretch; }
.sk-cy { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--c); border-radius: var(--r-2); padding: 18px 14px; text-decoration: none; color: inherit; display: grid; align-content: start; gap: 6px; transition: transform .25s var(--ease), border-color .25s var(--ease); }
.sk-cy:hover { transform: translateY(-2px); border-color: var(--c); }
.sk-cy .vb { font: 500 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.sk-cy .nm { font-size: 16px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.sk-cy .q { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.sk-loopback { margin-top: 14px; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sk-bars i, .sk-tr i { animation: none !important; }
  .sk-bars i { transform: scaleY(1); }
  .sk-tr i { width: var(--w); }
}
@media (max-width: 1080px) {
  .sk-vert, .sk-tail-key { grid-template-columns: 1fr; }
  .sk-xr { grid-template-columns: 1fr; gap: 8px; }
  .sk-xr.hd { display: none; }
  .sk-cycle { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sk-tier { grid-template-columns: 1fr auto; }
  .sk-tr { grid-column: 1 / -1; }
  .sk-cycle { grid-template-columns: 1fr; }
}