/* CX 2026 case study: chapters, logo process stepper, bar model, stage, wheel */

/* chapter index */
.cx-toc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 clamp(48px,7vw,96px);padding:0;list-style:none;counter-reset:ch}
.cx-toc a{display:block;height:100%;text-decoration:none;border-top:2px solid var(--ink);padding:14px 0 0}
.cx-toc .n{display:block;font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums;margin-bottom:6px}
.cx-toc b{display:block;font-size:22px;letter-spacing:-.01em;line-height:1.2;margin-bottom:6px}
.cx-toc span:last-child{display:block;font-size:16px;color:var(--mute);line-height:1.4}
.cx-toc a:hover b{text-decoration:underline}

/* chapter openers */
.cx-chap{padding:clamp(56px,8vw,112px) 0 clamp(28px,4vw,48px);border-top:2px solid var(--ink);scroll-margin-top:68px}
.cx-chap .n{font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums;margin:0 0 14px}
.cx-chap h2{margin-bottom:22px;max-width:14em}
.cx-chap .lead{max-width:34em}

/* pulled line */
.cx-pull{margin:clamp(28px,4vw,48px) 0 0;padding:0;max-width:30em}
.cx-pull p{font-size:clamp(26px,3.2vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 12px;max-width:none}
.cx-pull footer{font-size:16px;color:var(--mute)}

/* logo process stepper */
.steps{margin:clamp(24px,4vw,40px) 0 clamp(40px,6vw,72px)}
.steps-rail{display:none}
.js .steps-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:0 6px;position:sticky;top:68px;z-index:5;background:#fff;padding:10px 0 0;margin-bottom:8px;box-shadow:0 1px 0 var(--line)}
.steps-rail a{position:relative;display:block;text-decoration:none;padding:13px 10px 12px 0;color:var(--mute);transition:color .25s}
.steps-rail a::before,.steps-rail a::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)}
.steps-rail a::after{background:var(--ink);transform-origin:0 0;transform:scaleX(var(--p,0))}
.steps-rail a .k{display:block;font-size:14px;font-variant-numeric:tabular-nums;margin-bottom:2px}
.steps-rail a .t{display:block;font-size:17px;font-weight:500;line-height:1.2}
.steps-rail a.on,.steps-rail a.done{color:var(--ink)}
.steps-rail a:hover .t{text-decoration:underline}
.step{display:grid;grid-template-columns:4fr 8fr;gap:24px 56px;padding:clamp(40px,6vw,72px) 0;scroll-margin-top:150px}
.step + .step{border-top:1px solid var(--line)}
.step .txt{align-self:start;position:sticky;top:170px}
.step .k{font-size:15px;color:var(--mute);margin:0 0 10px;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:16px}
.step .txt p{font-size:17px}
.step dl{margin:18px 0 0}
.step dt{font-weight:700;font-size:17px;margin-top:14px}
.step dd{margin:2px 0 0;font-size:16px;color:var(--mute);line-height:1.45}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards3 figure{margin:0}
.cards3 .gal{gap:10px}
.cards3 h4{font-size:18px;margin:12px 0 4px;letter-spacing:-.01em}
.cards3 p{font-size:15px;color:var(--mute);line-height:1.45;margin:0}
.chosen{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.02em;background:var(--ink);color:#fff;border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:2px}

/* dark feature band */
.cx-dark{background:#07080a;color:#e9ecef;margin:0 calc(var(--pad) * -1);padding:clamp(48px,7vw,96px) var(--pad);border-radius:0}
@media (min-width:1472px){.cx-dark{margin:0 calc((100vw - var(--max)) / -2 - var(--pad));padding-left:calc((100vw - var(--max)) / 2 + var(--pad));padding-right:calc((100vw - var(--max)) / 2 + var(--pad))}}
.cx-dark .mute,.cx-dark .gal figcaption,.cx-dark .note{color:#9aa3ad}
.cx-dark .gal a{background:#111}
.cx-dark .gal img{box-shadow:none}
.feat{display:grid;grid-template-columns:5fr 7fr;gap:32px 56px;align-items:center}
.feat h2{margin-bottom:18px}
.feat p{font-size:17px}
.feat .tag{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#a9b8ff;margin-bottom:14px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0 0}
.nums div{border-top:1px solid #2b3036;padding-top:12px}
.nums b{display:block;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.03em;line-height:1;margin-bottom:8px;color:#fff}
.nums span{display:block;font-size:15px;color:#9aa3ad;line-height:1.35}

/* 3D bar model */
.bar3d{position:relative;aspect-ratio:8/5;margin-bottom:30px;perspective:1300px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bar3d:active{cursor:grabbing}
.bar3d .floor{position:absolute;left:8%;right:8%;top:58%;height:34%;border-radius:50%;background:radial-gradient(closest-side,rgba(120,140,255,.18),rgba(0,0,0,0) 70%)}
.bar3d .scene{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d}
.bar3d .scene > *{position:absolute;left:0;top:0;transform-style:preserve-3d}
.bar3d .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:#000;background-repeat:no-repeat}
.bar3d .inner{backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0d0e10}
.bar3d .cap{background:#121316}
.bar3d .top{background:#2a2c31}
.bar3d .lbl{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font:600 12px/1 var(--f);color:#c8d0ff;letter-spacing:.04em;opacity:.0;transition:opacity .2s}
.bar3d .face.hi{box-shadow:inset 0 0 0 999px rgba(127,149,255,.22)}
.bar3d-hint{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:14px;color:#8a929b;margin:0;max-width:none;pointer-events:none}
.bar3d noscript img{width:100%}

/* unrolled strip + ring plan */
.unroll{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;margin-top:clamp(40px,6vw,72px)}
.unroll > div{min-width:0}
.ring svg{width:100%;height:auto;display:block}
.ring path{fill:#1b1e24;stroke:#07080a;stroke-width:1.5;transition:fill .2s;cursor:pointer}
.ring path.hi{fill:#7f95ff}
.ring text{font:600 11px var(--f);fill:#c9d0d8;pointer-events:none}
.ring text.dim{fill:#7d858e;font-weight:400}
.strip{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#3a3f46 transparent;border-radius:4px;-webkit-overflow-scrolling:touch}
.strip-in{position:relative;width:max-content}
.strip-in picture img{height:clamp(170px,22vw,260px);width:auto;max-width:none;display:block}
.strip-ticks{position:absolute;inset:0;display:flex;pointer-events:none}
.strip-ticks span{flex:63 0 0;border-left:1px dashed rgba(255,255,255,.28);position:relative}
.strip-ticks span:last-child{flex:30.25 0 0}
.strip-ticks span:first-child{border-left:0}
.strip-ticks b{position:absolute;top:8px;left:10px;font:600 13px var(--f);color:#fff;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
.strip-ticks span.hi{background:rgba(127,149,255,.14)}
.strip-cap{font-size:15px;color:#9aa3ad;margin:10px 0 0;max-width:none}

/* stage model, to scale */
.stage{margin:0}
.stage-row{display:grid;grid-template-columns:4fr 1.5fr 10fr 1.5fr 4fr;align-items:start}
.stage-row.low{grid-template-columns:4fr 13fr 4fr;margin-top:2.4%}
.scr{margin:0}
.scr video,.scr img{width:100%;height:auto;display:block;background:#000;border-radius:2px;box-shadow:0 0 0 1px #2b3036}
.scr.side video{aspect-ratio:2/3}
.scr.main video{aspect-ratio:5/3}
.scr.curved video{aspect-ratio:6.5/1}
.scr figcaption,.ext figcaption{font-size:13px;color:#9aa3ad;margin-top:8px;line-height:1.35}
.scr figcaption b,.ext figcaption b{display:block;color:#e9ecef;font-weight:600}
.ext{margin:clamp(32px,4vw,48px) 0 0}
.ext video{width:100%;aspect-ratio:1596/242;display:block;background:#000;box-shadow:0 0 0 1px #2b3036}
.specs{list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 32px}
.specs li{border-top:1px solid #2b3036;padding-top:10px;font-size:15px;color:#9aa3ad;line-height:1.4}
.specs b{display:block;color:#e9ecef;font-size:16px;margin-bottom:2px}

/* wheel of better */
.wheel-band{background:radial-gradient(120% 90% at 70% 40%,#3E1BA8 0%,#1E0F6B 40%,#0B1447 72%,#060A2A 100%)}
.wheel-band .feat .tag{color:#FFC93C}
.wheel-stage{position:relative;border-radius:6px;overflow:hidden;background:#0B1447;aspect-ratio:16/9;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.wheel-stage video,.wheel-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.wheel-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.wheel-cta .btn{border-color:#FFC93C;color:#FFC93C;background:transparent}
.wheel-cta .btn.solid{background:#FFC93C;color:#1a1300}
.wheel-cta .btn:hover{background:#FFC93C;color:#1a1300}
.slices{list-style:none;padding:0;margin:clamp(36px,5vw,56px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slices li{border-radius:10px;padding:14px 16px;background:var(--c);color:var(--i,#fff)}
.slices b{display:block;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:4px}
.slices span{display:block;font-size:15px;line-height:1.35;opacity:.92}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(36px,5vw,56px)}
.how3 div{border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
.how3 b{display:block;font-size:18px;margin-bottom:6px;color:#fff}
.how3 p{font-size:16px;color:#c9c4ef;margin:0}
.wheel-band .gal figcaption{color:#c9c4ef}

/* section after a dark band */
.cx-dark + .cs-sec{border-top:0}

@media (max-width:1100px){
  .js .steps-rail a .t{font-size:15px}
}
@media (max-width:900px){
  .cx-toc{grid-template-columns:1fr 1fr}
  .step{grid-template-columns:1fr}
  .step .txt{position:static}
  .js .steps-rail{grid-template-columns:repeat(6,minmax(0,1fr))}
  .js .steps-rail a .t{display:none}
  .js .steps-rail a{padding-right:0}
  .feat{grid-template-columns:1fr}
  .unroll{grid-template-columns:1fr}
  .ring{max-width:220px}
  .cards3{grid-template-columns:1fr}
  .slices,.how3,.specs{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cx-toc{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .slices,.how3,.specs{grid-template-columns:1fr}
  .scr figcaption{font-size:11px}
}

/* sub-blocks inside a dark band, and the product ID card row */
.feat.sub{align-items:start;margin-top:clamp(48px,7vw,88px);padding-top:clamp(32px,4vw,48px);border-top:1px solid #2b3036}
.feat.sub h3{margin-bottom:16px}
.gal.pids{grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.gal.pids figcaption{font-size:13px}
@media (max-width:900px){.gal.pids{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.gal.pids{grid-template-columns:1fr 1fr}}

/* The answer first: the four old logos beside the one that replaced them, above the story of how. */
.cx-ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr);align-items:center;gap:clamp(16px,3vw,40px);margin:clamp(24px,3vw,40px) 0 0}
.cx-ba .k{font-size:15px;color:var(--mute);margin:0 0 12px}
.cx-was ul{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.cx-was img{width:100%;border-radius:4px;border:1px solid var(--line)}
.cx-was span{display:block;font-size:14px;color:var(--mute);margin-top:4px;font-variant-numeric:tabular-nums}
.cx-arrow{font-size:clamp(28px,3vw,40px);color:var(--mute);margin:0}
.cx-now{margin:0}
.cx-now video{width:100%;display:block;border-radius:6px;background:#000;aspect-ratio:1152/720;object-fit:cover}
.cx-now figcaption{font-size:15px;margin-top:10px}
@media (max-width:900px){.cx-ba{grid-template-columns:1fr}.cx-arrow{transform:rotate(90deg);justify-self:center}}