/* =====================================================================
   Stepikin Studio — CASE MODULES (cm-*) · the shared template for every case page
   =====================================================================
   HYBRID RULE
   Shared (identical on every case, never overridden per case): Figtree type, the
   two-tone bold headline, grid/spacing/type scale, kit nav/footer, buttons,
   related-cases + booking CTA, every cm-* module and the Liquid Glass components.
   Per case — ONLY these knobs, set once on the page root:
     <style>:root{--case-accent:#F2D94E;--case-paper:#ece8e0;--case-dark:#050505}</style>
     --case-accent  second clause of headlines (on dark), dots, numbers, small accents.
                    A darker ink for light surfaces is derived automatically.
     --case-paper   warm/cool paper band tint      --case-dark   dark band tint
   …plus the product's own screens / photos / videos. No per-case fonts, no per-case CSS.
   A section may re-scope --case-accent (style="--case-accent:#7FD8FF" on the band) for a
   chapter colour, and set --glow/--gx/--gy on a .cm-glow band; that is module usage,
   not new styling.

   PAGE SKELETON
     <body class="cm"> kit nav markers · <main> bands … · <nav class="cm-switch cm-glass">
     · kit foot markers · kit.js + case-modules.js. Load kit.css then case-modules.css.

   BANDS (full-bleed sections, alternate them for rhythm)
     .cm-band-dark  always dark (stage moments)   .cm-band-paper (+.is-soft) always paper
     .cm-band       follows the site theme (dark ↔ light)   .cm-duo  half paper / half dark
     .cm-glow       + style="--glow:rgba(…);--gx:80%;--gy:20%"  soft corner light
     Inside: .cm-wrap (max width) · .cm-gap / .cm-gap-s vertical rhythm.

   TYPE
     .cm-eyebrow  dot + label      .cm-h  <h2 class="cm-h">White part. <em>Accent part.</em></h2>
       em = accent on dark, muted grey on paper; .cm-h.is-acc → accent ink on paper too;
       em.mute → always muted; .hl → highlighter marker; .is-wide → longer line.
     .cm-h-xl giant title (<i>.</i> = accent dot) · .cm-h3 · .cm-p (≤2 sentences!) · .cm-cap
     .cm-statement big overview sentence · .cm-kicker small caps label · .cm-q / .cm-q-sm quotes

   MODULES
     .cm-hero (+.cm-hero-grid, .cm-hero-tg, .cm-hero-strip with .cm-faces-row + .cm-stats.is-glass)
     .cm-stats > .cm-stat(.is-key) > b[data-count] + span        big-number chips
     .cm-facts (role/platform rows) · .cm-meta inline facts
     .cm-split (.is-rev .is-top .is-57 .is-75)                    text + composition
     .cm-phone style="--w:260px" > img|video                       device frame
     .cm-fan (.is-keep keeps the fan on mobile) > figure.cm-fan-i style="--tx --ty --rot --z --zi"
     .cm-row (.is-wave .is-stair)  staggered phones → horizontal scroller on mobile
     .cm-pair (.is-center)          two phones, second dropped by --off
     .cm-glance + .cm-iso > .cm-iso-plane > .cm-iso-col   tilted, flowing screen wall
     .cm-bento > .cm-card style="--c:span;--r:rows" (.is-ink .is-acc .is-warn .is-device)
       .cm-times "×" joint between formula cards · .orb colour glow · .cm-big · .cm-cn
     .cm-cols style="--n:5" > .cm-card   equal columns (em = big accent label)
     .cm-list (.is-plain .is-ink) > li > i + div{small,b,span}    numbered pipelines
     .cm-steps (.is-scroll) > .cm-step style="--h:40" (.is-ink)   step strip with rising fill
     .cm-journey style="--n:7;--ph:132px"   phones on a dotted path with nodes
     .cm-chain chips with › arrows · .cm-chips > .cm-chip (.is-on .acc) i[style=--c]
     .cm-quote / .cm-insight (portrait + glass quote) · .cm-portrait
     .cm-portraits (grid of figures) · .cm-faces (fanned portrait cards)
     .cm-looks (x / ok) · .cm-specrow · .cm-strip        exploration boards
     .cm-sw .cm-sj .cm-type .cm-tabbar .cm-lvl .cm-ring .cm-ruler   design-language spec
     .cm-browsers > .cm-browser(.bar + img) · .cm-homo · .cm-ba · .cm-au[data-au] audio
     .cm-games (coloured list) · .cm-dia (animated svg diagram, .card rects)
     video.cm-video data-src data-poster muted loop playsinline preload="none"   lazy, plays in view
     details.cm-more > summary + .cm-more-body    long prose lives here, not on the page
     .cm-next  related cases (first = next case)
     Reveal: .cm-rv (single) · .cm-stagger (children one by one)

   LIQUID GLASS (signature — use deliberately, 3–4 places per case)
     .cm-glass[data-liquid="scale edge blur"]   e.g. data-liquid="64 22 5"
     .cm-tag (floating callout: i + div{b,span}) — inside .cm-anchor or .cm-fan, place with
       style="--x/--r/--y/--b"; .float bobs; .is-desktop hides it below 1100px
     .cm-stats.is-glass chips · glass quote card (.cm-insight) · .cm-switch sticky section nav
     .is-light / .is-btn variants. Chromium gets real edge refraction (SVG displacement via
     backdrop-filter:url()); others get blur glass; prefers-reduced-transparency → solid.
   ===================================================================== */

/* local bold fallback so headlines stay bold when Google Fonts is unavailable */
@font-face{font-family:FigtreeCM;font-weight:400;font-display:swap;src:url(/assets/kit/figtree1.ttf) format("truetype")}
@font-face{font-family:FigtreeCM;font-weight:500;font-display:swap;src:url(/assets/kit/figtree2.ttf) format("truetype")}
@font-face{font-family:FigtreeCM;font-weight:600;font-display:swap;src:url(/assets/kit/figtree3.ttf) format("truetype")}
@font-face{font-family:FigtreeCM;font-weight:700 900;font-display:swap;src:url(/assets/kit/figtree4.ttf) format("truetype")}

:root{
  --case-accent:#F2D94E;--case-paper:#ece8e0;--case-dark:#050505;
  --cm-font:'Figtree',FigtreeCM,system-ui,-apple-system,'Segoe UI',sans-serif;
  --cm-pad:clamp(88px,10.5vw,164px);
  --cm-wrap:1280px;
  --cm-ease:cubic-bezier(.16,1,.3,1);
  --cm-spring:cubic-bezier(.34,1.56,.64,1);
}
.cm{font-family:var(--cm-font)}
:root,.cm,.cm-band,.cm-band-dark,.cm-band-paper,.cm-duo,.cm-card,.cm-glass{--case-accent-ink:color-mix(in srgb,var(--case-accent) 42%,#000)}
.cm main{overflow-x:clip}

/* ================= bands ================= */
.cm-band,.cm-band-dark,.cm-band-paper{position:relative;isolation:isolate;padding:var(--cm-pad) 0;background:var(--cm-bg);color:var(--cm-fg);overflow-x:clip}
.cm-band-dark,.cm-band{
  --cm-bg:var(--case-dark);--cm-fg:#efece6;--cm-body:rgba(239,236,230,.64);--cm-mute:rgba(239,236,230,.5);--cm-mute-h:rgba(239,236,230,.4);
  --cm-card:#111110;--cm-card-2:#181817;--cm-line:rgba(255,255,255,.09);--cm-line-2:rgba(255,255,255,.16);
  --cm-em:var(--case-accent);--cm-acc:var(--case-accent);--cm-chip:#1a1a19;--cm-sh:0 40px 90px -40px rgba(0,0,0,.9);
}
.cm-band-paper{
  --cm-bg:var(--case-paper);--cm-fg:#0b0b0a;--cm-body:#5a574f;--cm-mute:#77736a;--cm-mute-h:#98938a;
  --cm-card:#fff;--cm-card-2:#f7f5f0;--cm-line:rgba(0,0,0,.08);--cm-line-2:rgba(0,0,0,.16);
  --cm-em:var(--cm-mute-h);--cm-acc:var(--case-accent-ink);--cm-chip:#fff;--cm-sh:0 40px 80px -36px rgba(70,56,30,.42);
}
.cm-band-paper.is-soft{--cm-bg:color-mix(in srgb,var(--case-paper) 50%,#fff)}
html.light .cm-band{
  --cm-bg:#fbfaf7;--cm-fg:#0b0b0a;--cm-body:#5a574f;--cm-mute:#77736a;--cm-mute-h:#98938a;
  --cm-card:#fff;--cm-card-2:#f4f2ed;--cm-line:rgba(0,0,0,.08);--cm-line-2:rgba(0,0,0,.16);
  --cm-em:var(--case-accent-ink);--cm-acc:var(--case-accent-ink);--cm-chip:#fff;--cm-sh:0 40px 80px -36px rgba(70,56,30,.35);
}
/* soft colour glow in a corner of a band: style="--glow:#2a2a8a" + class */
.cm-glow::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at var(--gx,85%) var(--gy,20%),var(--glow,rgba(242,217,78,.12)),transparent 70%)}
html.light .cm-band.cm-glow::before{opacity:.35}
.cm-wrap{width:100%;max-width:var(--cm-wrap);margin:0 auto;padding:0 var(--gut,24px)}
.cm-band>.cm-wrap+.cm-wrap,.cm-band-dark>.cm-wrap+.cm-wrap,.cm-band-paper>.cm-wrap+.cm-wrap{margin-top:clamp(48px,6vw,88px)}
.cm-gap{margin-top:clamp(44px,5.5vw,80px)}
.cm-gap-s{margin-top:clamp(24px,3vw,40px)}

/* ================= type ================= */
.cm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--cm-mute);margin-bottom:22px}
.cm-eyebrow::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--case-accent);box-shadow:0 0 12px color-mix(in srgb,var(--case-accent) 60%,transparent)}
.cm-h{font-family:var(--cm-font);font-weight:700;font-size:clamp(38px,5.7vw,86px);line-height:.98;letter-spacing:-.055em;color:var(--cm-fg);max-width:17ch;text-wrap:balance}
.cm-h em{font-style:normal;color:var(--cm-em)}
.cm-h em.mute{color:var(--cm-mute-h)}
.cm-h.is-acc em:not(.mute){color:var(--cm-acc)}
.cm-h .hl,.cm-hl{color:inherit;font-style:normal;background:linear-gradient(transparent 56%,var(--case-accent) 56% 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}
.cm-h.is-wide{max-width:22ch}
.cm-h-xl{font-family:var(--cm-font);font-weight:800;font-size:clamp(96px,17vw,268px);line-height:.82;letter-spacing:-.075em;color:var(--cm-fg)}
.cm-h-xl i{font-style:normal;color:var(--case-accent)}
.cm-h3{font-family:var(--cm-font);font-weight:700;font-size:clamp(20px,1.7vw,25px);line-height:1.12;letter-spacing:-.035em;color:var(--cm-fg)}
.cm-p{margin-top:26px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--cm-body);max-width:56ch}
.cm-p b{color:var(--cm-fg);font-weight:600}
.cm-cap{margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--cm-mute);max-width:var(--w,260px)}
.cm-cap b{display:block;font-size:16px;font-weight:600;color:var(--cm-fg);letter-spacing:-.01em;margin-bottom:2px}
.cm-kicker{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent)}
.cm-band-paper .cm-kicker,html.light .cm-band .cm-kicker{color:var(--cm-mute)}
.cm-num{font-variant-numeric:tabular-nums}

/* ================= chips & buttons ================= */
.cm-chips{display:flex;flex-wrap:wrap;gap:10px}
.cm-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:var(--cm-chip);border:1px solid var(--cm-line);font-size:15px;font-weight:600;color:var(--cm-fg);white-space:nowrap}
.cm-chip i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--case-accent))}
.cm-chip.is-on{background:var(--cm-fg);color:var(--cm-bg)}
.cm-chip.is-on.acc{background:#0b0b0a;color:var(--case-accent)}
.cm-arrow{color:var(--cm-mute-h);font-size:18px;align-self:center}
.cm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}

/* ================= phone frame ================= */
.cm-phone{--w:260px;position:relative;width:var(--w);max-width:100%;aspect-ratio:1170/2532;flex:none;border-radius:calc(var(--w) * .155);padding:calc(var(--w) * .03);
  background:linear-gradient(160deg,#2a2a29,#0c0c0c 40%,#151515);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 calc(var(--w) * .012) #050505,var(--cm-sh,0 40px 90px -40px rgba(0,0,0,.9))}
.cm-phone>img,.cm-phone>video{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--w) * .125);background:#0b0b0b;display:block}
.cm-band-paper .cm-phone,html.light .cm-band .cm-phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 calc(var(--w) * .012) #050505,0 50px 70px -40px rgba(60,46,20,.5),0 12px 24px -12px rgba(60,46,20,.3)}

/* ================= hero ================= */
.cm-hero{padding:clamp(120px,13vw,170px) 0 0;min-height:min(100vh,1000px);display:flex;flex-direction:column}
.cm-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;flex:1}
.cm-hero .cm-h-xl{margin-top:4px}
.cm-hero-tg{margin-top:clamp(26px,3vw,40px);font-size:clamp(19px,1.7vw,25px);line-height:1.4;letter-spacing:-.015em;color:var(--cm-body);max-width:21em}
.cm-hero-tg b{color:var(--cm-fg);font-weight:600}
.cm-hero-sm{margin-top:18px;font-size:16px;color:var(--cm-mute)}
.cm-hero .cm-chips{margin-top:30px}
.cm-hero-fan{position:relative;height:clamp(460px,48vw,700px)}
.cm-hero-strip{position:relative;margin-top:clamp(30px,4vw,60px);padding:56px 0 64px}
.cm-hero-strip .cm-faces-row{position:absolute;inset:0;display:flex;gap:10px;justify-content:center;opacity:.42;filter:grayscale(1);
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 60%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 60%,transparent)}
.cm-faces-row img{width:clamp(90px,9vw,140px);height:100%;object-fit:cover;object-position:center 20%;border-radius:18px;flex:none}

/* ================= stats ================= */
.cm-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative}
.cm-stat{padding:22px 20px 22px;border-radius:24px;background:var(--cm-card);min-height:150px;display:flex;flex-direction:column}
.cm-stat b{display:block;font-weight:800;font-size:clamp(36px,3.6vw,54px);line-height:1;letter-spacing:-.06em;color:var(--cm-fg);white-space:nowrap}
.cm-stat span{margin-top:auto;padding-top:14px;font-size:14.5px;line-height:1.35;color:var(--cm-body)}
.cm-stat.is-key{background:#0b0b0a}.cm-stat.is-key b{color:var(--case-accent)}.cm-stat.is-key span{color:rgba(239,236,230,.62)}

/* ================= facts rows (role / platforms …) ================= */
.cm-facts{border-top:1px solid var(--cm-line)}
.cm-facts>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--cm-line);font-size:16px;line-height:1.45}
.cm-facts span:first-child{color:var(--cm-mute)}.cm-facts span:last-child{color:var(--cm-fg);font-weight:600}
.cm-statement{font-weight:600;font-size:clamp(26px,2.9vw,42px);line-height:1.16;letter-spacing:-.035em;color:var(--cm-fg)}
.cm-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:15px;color:var(--cm-mute)}
.cm-meta b{color:var(--cm-fg);font-weight:700;margin-right:6px}

/* ================= split ================= */
.cm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.cm-split.is-rev>:first-child{order:2}
.cm-split.is-top{align-items:start}
.cm-split.is-57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cm-split.is-75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

/* ================= fan (3–7 phones fanned with depth) =================
   <div class="cm-fan" style="height:620px"><figure class="cm-fan-i" style="--tx:-60%;--ty:40px;--rot:-9deg;--z:30"><div class="cm-phone">…</div></figure>…</div> */
.cm-fan{position:relative;height:var(--h,600px);perspective:1600px}
.cm-fan-i{position:absolute;left:50%;top:0;margin:0;transform:translate3d(0,calc(var(--p,0) * var(--z,0) * 1px),0);z-index:var(--zi,1);will-change:transform}
.cm-fan-i>.cm-phone{transform:translate(-50%,40px) rotate(0) scale(.92);opacity:0;transition:transform 1.3s var(--cm-ease) calc(var(--k,0) * 90ms),opacity .9s var(--cm-ease) calc(var(--k,0) * 90ms)}
.cm-fan.in .cm-fan-i>.cm-phone{transform:translate(calc(-50% + var(--tx,0%)),var(--ty,0)) rotate(var(--rot,0deg)) scale(var(--s,1));opacity:1}
.cm-fan-i .cm-cap{position:absolute;left:calc(var(--tx,0%) - var(--w,260px) / 2);top:100%;opacity:0;transition:opacity .8s .5s}
.cm-fan.in .cm-fan-i .cm-cap{opacity:1}

/* staggered row: phones in a row with alternating / descending offsets */
.cm-row{display:flex;gap:clamp(14px,2vw,26px);justify-content:center;align-items:flex-start}
.cm-row>*{flex:none;margin-top:calc(var(--o,0) * 1px)}
.cm-row.is-wave>:nth-child(even){--o:56}
.cm-row.is-stair>:nth-child(2){--o:70}.cm-row.is-stair>:nth-child(3){--o:140}
.cm-row .cm-n{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent-ink);margin-bottom:12px}
.cm-band-dark .cm-row .cm-n{color:var(--case-accent)}

/* ================= tilted, flowing screen wall ("at a glance") ================= */
.cm-iso{position:absolute;z-index:-1;top:0;bottom:0;right:-6%;width:72%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000 82%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 32%,#000 82%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.cm-iso-plane{position:absolute;left:58%;top:50%;display:flex;gap:28px;transform:translate(-50%,-50%) rotateX(50deg) rotateZ(-36deg);transform-origin:50% 50%}
.cm-iso-col{display:flex;flex-direction:column;gap:28px;animation:cm-flow var(--t,60s) linear infinite;animation-direction:var(--dir,normal)}
.cm-iso-col:nth-child(even){--dir:reverse;margin-top:-160px}
.cm-iso .cm-phone{--w:220px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),-30px 40px 60px -20px rgba(0,0,0,.8)}
@keyframes cm-flow{to{transform:translateY(-50%)}}
.cm-glance{position:relative;min-height:clamp(620px,62vw,820px);display:flex;align-items:center}
.cm-glance .cm-tag{position:absolute;right:clamp(16px,8vw,140px);bottom:clamp(90px,12vw,170px)}

/* ================= cards / bento ================= */
.cm-card{position:relative;border-radius:26px;background:var(--cm-card);border:1px solid var(--cm-line);padding:clamp(22px,2.2vw,30px);overflow:hidden;isolation:isolate}
.cm-card .cm-h3{margin-top:10px}
.cm-card p{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--cm-body)}
.cm-card.is-ink{--cm-card:#0b0b0a;--cm-fg:#efece6;--cm-body:rgba(239,236,230,.62);--cm-mute:rgba(239,236,230,.5);--cm-line:rgba(255,255,255,.08);background:#0b0b0a;color:#efece6}
.cm-card.is-acc{border-color:color-mix(in srgb,var(--case-accent) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--case-accent) 14%,var(--cm-card)),var(--cm-card) 70%)}
.cm-card.is-warn{border-color:rgba(229,138,130,.5)}.cm-card.is-warn .cm-h3{color:#E58A82}
.cm-card .cm-big{display:block;font-weight:800;font-size:clamp(32px,3vw,46px);letter-spacing:-.055em;line-height:1;color:var(--cm-fg);margin-top:12px}
.cm-card .cm-cn{font-weight:700;font-size:14px;color:var(--case-accent)}
.cm-band-paper .cm-card .cm-cn,html.light .cm-band .cm-card .cm-cn{color:var(--case-accent-ink)}
.cm-card.is-ink .cm-cn{color:var(--case-accent)}
.cm-card .orb{position:absolute;z-index:-1;right:-50px;top:-60px;width:200px;height:180px;border-radius:50%;background:var(--c,var(--case-accent));opacity:.4;filter:blur(30px)}
.cm-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.cm-bento>*{grid-column:span var(--c,4);grid-row:span var(--r,1)}
.cm-x{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch}
.cm-x>i{align-self:center;justify-self:center;font-style:normal;font-size:30px;font-weight:300;color:var(--cm-mute-h)}

/* ================= numbered list (pipelines, principles) ================= */
.cm-list{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.cm-list>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px 20px;border-radius:20px;background:var(--cm-card);border:1px solid var(--cm-line)}
.cm-list>li>i{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:18px;background:var(--case-accent);color:#0b0b0a;background-size:cover;background-position:center 22%}
.cm-list>li>i.is-dark{background-color:#000;color:var(--case-accent)}
.cm-list b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--cm-fg)}
.cm-list span{font-size:14.5px;line-height:1.45;color:var(--cm-body)}
.cm-list small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent);margin-bottom:3px}
.cm-list.is-plain>li{background:none;border:0;padding:0;align-items:start}
.cm-list.is-plain>li>i{width:46px;height:46px;font-size:15px;background:#0b0b0a;color:var(--case-accent)}

/* ================= steps strip (scrolls on mobile) ================= */
.cm-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;counter-reset:cm}
.cm-step{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;background:var(--cm-card);border:1px solid var(--cm-line);padding:22px 20px 26px;min-height:170px}
.cm-step::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:calc(var(--h,0) * 1%);background:linear-gradient(transparent,color-mix(in srgb,var(--case-accent) 55%,transparent));transform:scaleY(0);transform-origin:bottom;transition:transform 1.2s var(--cm-ease) calc(var(--k,0) * 110ms)}
.in>.cm-step::before,.cm-steps.in .cm-step::before{transform:none}
.cm-step em{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-mute)}
.cm-step b{display:block;margin:10px 0 8px;font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--cm-fg)}
.cm-step span{font-size:14.5px;line-height:1.45;color:var(--cm-body)}
.cm-step.is-ink{background:#0b0b0a;border-color:#0b0b0a}.cm-step.is-ink b{color:#efece6}.cm-step.is-ink span{color:rgba(239,236,230,.62)}.cm-step.is-ink em{color:var(--case-accent)}
.cm-chain{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ================= journey (experience map) ================= */
.cm-journey{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));position:relative}
.cm-journey::before{content:"";position:absolute;left:7%;right:7%;top:calc(var(--ph,140px) * 2.164 + 34px);border-top:2px dashed var(--cm-line-2)}
.cm-journey>div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
.cm-journey .cm-phone{--w:var(--ph,140px)}
.cm-journey .dot{width:22px;height:22px;border-radius:50%;background:var(--cm-bg);border:3px solid var(--cm-fg);margin:22px 0 16px;position:relative;z-index:1}
.cm-journey .dot.y{background:var(--case-accent)}
.cm-journey b{font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--cm-fg)}
.cm-journey span{margin-top:6px;font-size:14px;line-height:1.4;color:var(--cm-mute);max-width:150px}

/* ================= quote ================= */
.cm-quote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center}
.cm-portrait{width:clamp(180px,22vw,300px);aspect-ratio:3/4;border-radius:30px;overflow:hidden;box-shadow:0 0 0 3px var(--case-accent),0 0 80px color-mix(in srgb,var(--case-accent) 35%,transparent)}
.cm-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cm-q{font-weight:700;font-size:clamp(28px,3.6vw,54px);line-height:1.06;letter-spacing:-.045em;color:var(--cm-fg);text-wrap:balance}
.cm-q-sm{font-weight:600;font-size:clamp(19px,1.6vw,23px);line-height:1.38;letter-spacing:-.02em;color:var(--cm-fg)}
.cm-insight{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.cm-insight .cm-portrait{width:100%;max-width:440px;aspect-ratio:3/4;border-radius:36px}
.cm-insight .cm-glass{margin-left:-18%;padding:clamp(26px,3.2vw,46px)}

/* ================= portrait grid ================= */
.cm-portraits{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.cm-portraits figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#0d0d0c;border:1px solid rgba(255,255,255,.06);transition:transform .5s var(--cm-ease),box-shadow .5s}
.cm-portraits figure:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 40px -20px #000}
.cm-portraits img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.cm-portraits figure::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.92))}
.cm-portraits figcaption{position:absolute;z-index:1;left:11px;right:8px;bottom:10px;font-size:13px;font-weight:700;line-height:1.12;color:#fff;letter-spacing:-.01em}
.cm-portraits figcaption small{display:block;font-weight:500;font-size:11.5px;color:rgba(255,255,255,.6);margin-top:3px}
.cm-portraits .is-hl{box-shadow:0 0 0 2px var(--case-accent),0 0 30px color-mix(in srgb,var(--case-accent) 40%,transparent)}
.cm-faces{display:flex;justify-content:center}
.cm-faces img{width:clamp(70px,8vw,104px);height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;border-radius:20px;margin:0 -10px;box-shadow:0 0 0 3px var(--cm-bg),0 20px 30px -14px #000;transform:rotate(calc((var(--j) - 3) * 6deg)) translateY(calc(var(--a,0) * 7px));transition:transform .7s var(--cm-spring)}
.cm-faces img.is-hl{width:clamp(88px,10vw,130px);z-index:2;box-shadow:0 0 0 3px var(--case-accent),0 0 40px color-mix(in srgb,var(--case-accent) 40%,transparent)}
.cm-faces:hover img{transform:rotate(calc((var(--j) - 3) * 9deg)) translateY(calc(var(--a,0) * 12px - 6px))}

/* ================= look evolution cards ================= */
.cm-looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cm-looks figure{position:relative;margin:0;aspect-ratio:670/900;border-radius:24px;overflow:hidden}
.cm-looks img{width:100%;height:100%;object-fit:cover}
.cm-looks figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff}
.cm-looks figcaption b{display:block;font-size:19px;font-weight:700;letter-spacing:-.03em}
.cm-looks figcaption span{font-size:14px;color:rgba(255,255,255,.66)}
.cm-looks .x b::after{content:" \2715";color:#E58A82;font-size:14px}
.cm-looks .ok{box-shadow:0 0 0 3px var(--case-accent),0 0 60px color-mix(in srgb,var(--case-accent) 35%,transparent)}
.cm-looks .ok b::after{content:"  \2713 chosen";color:var(--case-accent);font-size:13px}
.cm-specrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;border-top:1px solid var(--cm-line);padding-top:22px}
.cm-specrow span{display:block;font-size:13.5px;color:var(--cm-mute);margin-bottom:6px}
.cm-specrow b{font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--cm-fg)}
.cm-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.cm-strip img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:18px}

/* ================= spec (palette / type / components) ================= */
.cm-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cm-sw div{height:118px;border-radius:18px;background:var(--c);padding:13px;display:flex;flex-direction:column;justify-content:flex-end;font-size:13px;font-weight:600;line-height:1.25;color:var(--t,#111);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cm-sw b{font-size:15px;font-weight:700}
.cm-sj{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cm-sj div{height:66px;border-radius:14px;background:#151514;position:relative;overflow:hidden;padding:9px 10px;font-size:11.5px;font-weight:600;color:#d8d3c8;display:flex;align-items:flex-end}
.cm-sj div::before{content:"";position:absolute;width:80px;height:66px;right:-26px;top:-28px;border-radius:50%;background:var(--c);opacity:.75;filter:blur(14px)}
.cm-sub{display:block;margin:0 0 18px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-mute)}
.cm-type{display:flex;gap:30px;align-items:flex-end;margin-bottom:22px}
.cm-type .a{font-weight:800;font-size:clamp(70px,8vw,112px);letter-spacing:-.06em;line-height:.9;color:var(--cm-fg)}
.cm-type .b{font-weight:800;font-size:clamp(46px,5vw,72px);letter-spacing:-.04em;line-height:.9;color:var(--case-accent)}
.cm-tabbar{display:flex;justify-content:space-around;align-items:center;height:84px;border-radius:30px;background:linear-gradient(135deg,#fff,#f8f6f0);box-shadow:inset 0 1px 0 #fff,0 14px 34px rgba(0,0,0,.12);padding:0 10px;color:#9a968d;font-size:12px;font-weight:600}
.cm-tabbar span{display:flex;flex-direction:column;align-items:center;gap:5px}.cm-tabbar span i{width:24px;height:24px;border-radius:8px;background:#c4bfb5}
.cm-tabbar span.on{background:#fff;border-radius:22px;padding:10px 16px;color:#111;box-shadow:0 4px 14px rgba(0,0,0,.08)}.cm-tabbar span.on i{background:#111}
.cm-tabbar span.c img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center 20%;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--case-accent)}
.cm-lvl{display:flex;gap:26px;align-items:center;margin-top:24px}
.cm-lvl .t{font-size:15px;font-weight:600;color:var(--cm-fg);margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline}
.cm-lvl .t span{font-size:22px;font-weight:800;letter-spacing:-.03em}.cm-lvl .t small{color:var(--cm-mute);font-size:14px;font-weight:500}
.cm-ruler{height:44px;background:repeating-linear-gradient(90deg,var(--cm-line-2) 0 2px,transparent 2px 12px);position:relative}
.cm-ruler::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,.62) * 100%);background:repeating-linear-gradient(90deg,var(--case-accent) 0 2px,transparent 2px 12px)}
.cm-ruler::after{content:"";position:absolute;left:calc(var(--v,.62) * 100%);top:-6px;bottom:-6px;width:4px;border-radius:2px;background:var(--case-accent);box-shadow:0 0 14px var(--case-accent)}
.cm-ring{position:relative;width:134px;height:134px;flex:none;background:#0b0b0a;border-radius:50%}
.cm-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--case-accent)}
.cm-ring::before,.cm-ring i{content:"";position:absolute;inset:0;border-radius:50%}
.cm-ring::before{background:repeating-conic-gradient(#3a3a37 0 1.6deg,transparent 1.6deg 6deg);-webkit-mask:radial-gradient(closest-side,transparent 76%,#000 77%);mask:radial-gradient(closest-side,transparent 76%,#000 77%)}
.cm-ring i{background:repeating-conic-gradient(var(--case-accent) 0 1.6deg,transparent 1.6deg 6deg);-webkit-mask:conic-gradient(#000 0 82%,transparent 82%);mask:conic-gradient(#000 0 82%,transparent 82%);clip-path:circle(50%)}
.cm-ring i::after{content:"";position:absolute;inset:12%;border-radius:50%;background:#0b0b0a}

/* ================= light | dark split band ================= */
.cm-duo{position:relative;padding:var(--cm-pad) 0;background:linear-gradient(90deg,var(--case-paper) 0 50%,var(--case-dark) 50%);overflow-x:clip}
.cm-duo .lb{display:flex;justify-content:space-between;margin-bottom:clamp(36px,5vw,70px)}
.cm-duo .lb .cm-eyebrow{margin:0}
.cm-duo .lb .cm-eyebrow:first-child{color:#77736a}.cm-duo .lb .cm-eyebrow:last-child{color:rgba(239,236,230,.6)}
.cm-duo .cm-row{gap:clamp(18px,3vw,44px)}
.cm-duo .cm-row>:nth-child(odd){--o:70}

/* ================= browser frame ================= */
.cm-browser{border-radius:22px;overflow:hidden;background:#0b0b0a;box-shadow:var(--cm-sh);border:1px solid var(--cm-line)}
.cm-browser .bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#e5e1d8}
.cm-browser .bar i{width:11px;height:11px;border-radius:50%;background:#c9c4b9}
.cm-browser .bar span{margin-left:12px;flex:1;max-width:420px;height:26px;border-radius:9px;background:#fbfaf7;font-size:13px;line-height:26px;color:#6e6a62;padding-left:12px}
.cm-browser img{width:100%;height:auto}
.cm-browsers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
.cm-browsers>:nth-child(2){margin-top:clamp(0px,6vw,90px)}

/* ================= homographs ================= */
.cm-homo{display:grid;gap:12px}
.cm-homo>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;padding:20px 24px;border-radius:22px;background:var(--cm-card)}
.cm-homo b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--cm-fg)}
.cm-homo b i{font-style:normal;color:#C9473D}
.cm-homo span{font-size:15.5px;line-height:1.45;color:var(--cm-body)}.cm-homo strong{color:var(--cm-fg);font-weight:700}
.cm-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.cm-ba>div{border-radius:22px;padding:18px 20px;background:var(--cm-card);font-size:16.5px;line-height:1.45;color:var(--cm-fg)}
.cm-ba small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.cm-ba .bad small{color:#C9473D}.cm-ba .good small{color:#1f8f50}
.cm-au{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:0 14px 0 12px;min-height:36px;border:1px solid var(--cm-line-2);border-radius:999px;background:transparent;color:var(--cm-fg);font:600 14px var(--cm-font);cursor:pointer}
.cm-au:hover{border-color:var(--cm-fg)}
.cm-au i{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.cm-au.on i{width:9px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}

/* ================= games list ================= */
.cm-games{display:grid;gap:14px}
.cm-games>div{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--cm-fg)}
.cm-games i{width:50px;height:50px;flex:none;border-radius:15px;background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.cm-games small{display:block;font-weight:500;color:var(--cm-mute);font-size:14.5px;margin-top:2px;letter-spacing:0}

/* ================= card-hand diagram ================= */
.cm-dia{margin-top:30px;background:var(--cm-card);border-radius:26px;padding:20px 24px}
.cm-dia svg{display:block;width:100%;height:auto;font-family:var(--cm-font);overflow:visible}
.cm-dia .g{fill:none;stroke:rgba(0,0,0,.22);stroke-dasharray:3 5}
.cm-dia .card{transform-box:view-box;transform-origin:320px 480px;transition:transform 1.4s var(--cm-spring) calc(var(--k) * 80ms)}
.cm-dia:not(.in) .card{transform:rotate(0deg)!important}
.cm-dia text{fill:#77736a;font-size:13px}

/* ================= video ================= */
.cm-video{background:#0b0b0b}
.cm-video[data-src]{background:#0b0b0b center/cover no-repeat}

/* ================= "read the full story" disclosure ================= */
.cm-more{margin-top:clamp(28px,3.4vw,44px);max-width:860px}
.cm-more>summary{list-style:none;display:inline-flex;align-items:center;gap:12px;cursor:pointer;padding:11px 14px 11px 20px;border-radius:999px;border:1px solid var(--cm-line-2);font-size:15px;font-weight:600;color:var(--cm-fg);transition:background .3s,border-color .3s;user-select:none}
.cm-more>summary::-webkit-details-marker{display:none}
.cm-more>summary::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--cm-fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .4s var(--cm-ease)}
.cm-more[open]>summary::after{transform:rotate(45deg)}
.cm-more>summary:hover{border-color:var(--cm-fg)}
.cm-more-body{padding:24px 0 4px;font-size:17px;line-height:1.7;color:var(--cm-body);columns:2 320px;column-gap:40px}
.cm-more-body>*{break-inside:avoid}
.cm-more-body p+p,.cm-more-body p+ul,.cm-more-body ul+p{margin-top:1em}
.cm-more-body b,.cm-more-body strong{color:var(--cm-fg);font-weight:600}
.cm-more-body ul{padding-left:1.1em}.cm-more-body li+li{margin-top:.35em}
.cm-more[open] .cm-more-body{animation:cm-open .5s var(--cm-ease)}
@keyframes cm-open{from{opacity:0;transform:translateY(-6px)}}

/* ================= next case ================= */
.cm-next:not(:has(.wkp-card)){display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.cm-next a:not(.wkp-card){position:relative;display:block;border-radius:26px;overflow:hidden;background:var(--cm-card);border:1px solid var(--cm-line);transition:transform .5s var(--cm-ease)}
.cm-next a:not(.wkp-card):hover{transform:translateY(-4px)}
.cm-next a:not(.wkp-card) img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.cm-next a:not(.wkp-card):first-child img{aspect-ratio:16/11}
.cm-next a:not(.wkp-card) div{padding:18px 20px 22px}
.cm-next a:not(.wkp-card) b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--cm-fg)}
.cm-next a:not(.wkp-card) span{font-size:15px;color:var(--cm-mute)}
.cm-next a:not(.wkp-card) small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-mute);margin-bottom:6px}


/* ================= generic helpers (formerly per-case) ================= */
.cm-times{position:absolute;left:-21px;top:50%;translate:0 -50%;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cm-bg);color:var(--cm-mute);font-size:18px;font-style:normal;font-weight:400}
.cm-bento>.cm-card:has(>.cm-times){overflow:visible}
.cm-card.is-device{display:flex;justify-content:center;align-items:flex-start;padding:28px 18px 0;background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--case-accent) 30%,transparent),transparent 70%),#0b0b0a;border-color:#0b0b0a}
.cm-card.is-device .cm-phone{margin-bottom:-120px}
.cm-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.cm-cols>.cm-card{min-height:200px;display:flex;flex-direction:column}
.cm-cols>.cm-card>em{font-style:normal;font-weight:800;font-size:30px;letter-spacing:-.05em;color:var(--case-accent)}
.cm-cols>.cm-card>.cm-h3{margin-top:auto}
.cm-list.is-ink>li{background:#0b0b0a;border-color:#0b0b0a}.cm-list.is-ink b{color:#efece6}.cm-list.is-ink span{color:rgba(239,236,230,.62)}
.cm-list.is-ink>li>i{width:44px;height:44px;font-size:16px}
.cm-anchor{position:relative}
.cm-anchor>.cm-tag,.cm-fan>.cm-tag{position:absolute;z-index:6;left:var(--x,auto);right:var(--r,auto);top:var(--y,auto);bottom:var(--b,auto)}
.cm-pair{display:flex;gap:26px;align-items:flex-start}
.cm-pair.is-center{justify-content:center}
.cm-pair>:nth-child(2){margin-top:var(--off,120px)}
@media(max-width:1100px){
  .cm-anchor>.cm-tag{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:18px}
  .cm-tag.is-desktop{display:none}
  .cm-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-times{display:none}
  .cm-pair{overflow-x:auto;margin:0 calc(-1 * var(--gut,24px));padding:0 var(--gut,24px) 10px;justify-content:flex-start;scrollbar-width:none}
  .cm-pair>*{flex:none}.cm-pair>:nth-child(2){margin-top:60px}
}
@media(max-width:700px){
  .cm-cols{grid-template-columns:1fr}.cm-cols>.cm-card{min-height:0}
  .cm-card.is-device .cm-phone{--w:220px!important}
}

/* ================= reveal (staggered fade-up) ================= */
.cm-rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--cm-ease) calc(var(--k,0) * 80ms),transform 1s var(--cm-ease) calc(var(--k,0) * 80ms)}
.cm-rv.in{opacity:1;transform:none}
.cm-stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--cm-ease) calc(var(--k,0) * 70ms),transform .9s var(--cm-ease) calc(var(--k,0) * 70ms)}
.cm-stagger.in>*{opacity:1;transform:none}
.cm-row.cm-stagger.in>*{transform:none}

/* =====================================================================
   LIQUID GLASS — cm-glass
   Plain glass everywhere (blur + saturate + rim + specular + tint).
   In Chromium, case-modules.js adds real edge refraction: an SVG feDisplacementMap
   built per element (strong at the rounded edge, zero in the centre) and applied
   through backdrop-filter:url(#…). html.cm-liquid marks support.
   ===================================================================== */
.cm-glass{
  --gt:rgba(14,14,16,.64);           /* tint: keeps text ≥4.5:1 even over a white backdrop */
  --gfg:#fff;--gmute:rgba(255,255,255,.86);
  --grim:rgba(255,255,255,.55);--gr:26px;
  position:relative;isolation:isolate;border-radius:var(--gr);color:var(--gfg);
  background:var(--gt);
  -webkit-backdrop-filter:blur(14px) saturate(1.5) brightness(1.06);backdrop-filter:blur(14px) saturate(1.5) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08),
    inset 1px 0 0 rgba(255,120,140,.14),inset -1px 0 0 rgba(120,190,255,.16),
    0 18px 40px -16px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.18);
  transition:transform .55s var(--cm-spring),box-shadow .4s;
}
/* rim: bright specular top-left, faint rainbow edge */
.cm-glass::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.18) 26%,rgba(255,255,255,.04) 52%,rgba(255,255,255,.12) 78%,rgba(255,255,255,.55)),
    conic-gradient(from 210deg,#ff6b8b,#ffd36b,#7dffb0,#6bc8ff,#b48bff,#ff6b8b);
  background-blend-mode:screen;opacity:.85;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* specular sheen + pointer-follow highlight */
.cm-glass::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120px 120px at var(--mx,18%) var(--my,0%),rgba(255,255,255,.26),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%);
  transition:background-position .2s}
.cm-glass>*{position:relative;z-index:3}
.cm-glass.is-light{--gt:rgba(255,255,255,.56);--gfg:#0b0b0a;--gmute:rgba(11,11,10,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 1px 0 0 rgba(255,120,140,.12),inset -1px 0 0 rgba(120,190,255,.14),0 18px 40px -18px rgba(60,46,20,.35),0 2px 6px rgba(0,0,0,.08)}
html.light .cm-band .cm-glass:not(.is-dark){--gt:rgba(255,255,255,.56);--gfg:#0b0b0a;--gmute:rgba(11,11,10,.66)}
.cm-glass.is-btn,.cm-glass a{cursor:pointer}
.cm-glass.is-btn:hover{transform:scale(1.025)}
.cm-glass.is-btn:active{transform:scale(.965);transition-duration:.18s}

/* floating annotation callout */
.cm-tag{--gr:22px;display:inline-flex;align-items:center;gap:14px;padding:13px 20px 13px 14px;max-width:320px}
.cm-tag b{display:block;font-weight:800;font-size:26px;line-height:1;letter-spacing:-.05em;color:var(--gfg)}
.cm-tag span{display:block;font-size:13.5px;line-height:1.3;font-weight:600;color:var(--gmute)}
.cm-tag i{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px;color:#0b0b0a;background:var(--case-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.cm-tag.float{animation:cm-bob 7s ease-in-out infinite}
@keyframes cm-bob{50%{translate:0 -8px}}

/* glass stat chips (hero) */
.cm-stats.is-glass .cm-stat{--gt:rgba(14,14,16,.4);background:var(--gt);--gr:26px;min-height:140px}
.cm-stats.is-glass .cm-stat b{color:var(--gfg)}
.cm-stats.is-glass .cm-stat span{color:var(--gmute)}
.cm-stats.is-glass .cm-stat.is-key b{color:var(--case-accent)}

/* sticky in-page section switcher */
.cm-switch{position:fixed;z-index:900;left:50%;bottom:18px;--gr:999px;display:flex;gap:2px;padding:5px;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
  translate:-50% 140%;opacity:0;transition:translate .7s var(--cm-spring),opacity .4s}
.cm-switch::-webkit-scrollbar{display:none}
.cm-switch.on{translate:-50% 0;opacity:1}
.cm-switch a{position:relative;z-index:3;flex:none;padding:9px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--gmute);white-space:nowrap;transition:color .3s,background .3s}
.cm-switch a:hover{color:var(--gfg)}
.cm-switch a.on{color:#0b0b0a;background:var(--case-accent)}
html.light .cm-switch{--gt:rgba(255,255,255,.6);--gfg:#0b0b0a;--gmute:rgba(11,11,10,.7)}

/* reduced transparency → solid surfaces */
@media (prefers-reduced-transparency: reduce){
  .cm-glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#161617;--gt:#161617}
  .cm-glass.is-light,html.light .cm-band .cm-glass:not(.is-dark),html.light .cm-switch{background:#fbfaf7;--gt:#fbfaf7}
  .cm-glass::before{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2))}
}

/* ================= responsive ================= */
@media (max-width:1100px){
  .cm-hero-grid{grid-template-columns:1fr}
  .cm-hero-fan{height:clamp(420px,88vw,620px);margin-top:20px}
  .cm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cm-split,.cm-split.is-57,.cm-split.is-75{grid-template-columns:1fr}
  .cm-split.is-rev>:first-child{order:0}
  .cm-x{grid-template-columns:1fr;gap:12px}.cm-x>i{display:none}
  .cm-bento>*{grid-column:span 6}
  .cm-bento>.is-full,.cm-bento>[style*="--c:12"]{grid-column:1/-1}
  .cm-portraits{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cm-looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-specrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cm-insight{grid-template-columns:1fr}
  .cm-insight .cm-portrait{max-width:300px}
  .cm-insight .cm-glass{margin:-90px 0 0 8%}
  .cm-iso{position:relative;inset:auto;width:auto;height:520px;margin:30px calc(-1 * var(--gut,24px)) 0;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent)}
  .cm-iso-plane{left:50%;top:50%}
  .cm-glance{display:block;min-height:0}
  .cm-glance .cm-tag{bottom:60px;right:var(--gut,24px)}
  /* rows and journeys become horizontal scrollers */
  .cm-row,.cm-journey,.cm-steps.is-scroll{display:flex;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-left:calc(-1 * var(--gut,24px));margin-right:calc(-1 * var(--gut,24px));padding:0 var(--gut,24px) 16px;scroll-padding:0 var(--gut,24px)}
  .cm-row::-webkit-scrollbar,.cm-journey::-webkit-scrollbar,.cm-steps::-webkit-scrollbar{display:none}
  .cm-row>*,.cm-journey>div,.cm-steps.is-scroll>*{flex:0 0 auto;scroll-snap-align:start}
  .cm-row>*{--o:0!important}
  .cm-journey>div{width:160px}.cm-journey::before{left:80px;right:auto;width:calc(160px * (var(--n,7) - 1))}
  .cm-steps{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-steps.is-scroll>*{width:240px}
  .cm-browsers>:nth-child(2){margin-top:0}
  .cm-next:not(:has(.wkp-card)){grid-template-columns:1fr 1fr}.cm-next a:not(.wkp-card):first-child{grid-column:1/-1}
  .cm-duo{background:var(--case-dark)}
  .cm-duo .lb .cm-eyebrow:first-child{color:rgba(239,236,230,.6)}
  /* generic fans → horizontal scroll row (hero fan keeps its shape) */
  .cm-fan:not(.is-keep){height:auto!important;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;perspective:none;
    margin:0 calc(-1 * var(--gut,24px));padding:10px var(--gut,24px) 18px}
  .cm-fan:not(.is-keep)::-webkit-scrollbar{display:none}
  .cm-fan:not(.is-keep) .cm-fan-i{position:relative;left:auto;transform:none;flex:none;scroll-snap-align:start}
  .cm-fan:not(.is-keep) .cm-fan-i>.cm-phone{transform:none!important;opacity:1}
  .cm-fan:not(.is-keep) .cm-fan-i .cm-cap{position:static;opacity:1}
  .cm-fan:not(.is-keep) .cm-tag{position:static;margin:0;align-self:center;flex:none}
}
@media (max-width:700px){
  .cm-band,.cm-band-dark,.cm-band-paper,.cm-duo{--cm-pad:84px}
  .cm-hero{min-height:0}
  .cm-hero-fan{height:118vw}
  .cm-hero-fan .cm-phone{--w:46vw!important}
  .cm-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cm-stat{min-height:124px;padding:18px 16px}
  .cm-facts>div{grid-template-columns:1fr;gap:2px}
  .cm-bento>*{grid-column:1/-1!important;grid-row:auto!important}
  .cm-portraits{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cm-portraits figcaption{font-size:11px;left:8px;bottom:7px}.cm-portraits figcaption small{font-size:10px}
  .cm-portraits figure:nth-child(n+19){display:none}
  .cm-looks{gap:10px}.cm-looks figcaption{padding:40px 12px 12px}.cm-looks figcaption b{font-size:15px}.cm-looks figcaption span{font-size:12px}
  .cm-strip{gap:8px}
  .cm-quote{grid-template-columns:1fr}
  .cm-homo>div{grid-template-columns:1fr;gap:4px}.cm-homo b{font-size:34px}
  .cm-ba{grid-template-columns:1fr}
  .cm-sw{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-sj{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cm-tabbar{height:70px;font-size:10px;padding:0 4px}.cm-tabbar span.on{padding:8px 10px}.cm-tabbar span.c img{width:46px;height:46px}
  .cm-lvl{flex-direction:column;align-items:stretch}.cm-ring{margin:0 auto}
  .cm-browsers{grid-template-columns:1fr}
  .cm-steps{grid-template-columns:1fr}
  .cm-next:not(:has(.wkp-card)){grid-template-columns:1fr}
  .cm-faces img{margin:0 -9px}
  .cm-faces img:nth-child(1),.cm-faces img:nth-child(7){display:none}
  .cm-iso{height:440px}.cm-iso .cm-phone{--w:160px}
  .cm-tag{max-width:260px}.cm-tag b{font-size:22px}
  .cm-insight .cm-glass{margin:-70px 0 0 0}
  .cm-switch{bottom:12px}
  .cm-more-body{font-size:16px}
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  .cm-rv,.cm-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .cm-fan-i{transform:none!important}
  .cm-fan-i>.cm-phone{transition:none!important}
  .cm-fan .cm-fan-i>.cm-phone{transform:translate(calc(-50% + var(--tx,0%)),var(--ty,0)) rotate(var(--rot,0deg)) scale(var(--s,1));opacity:1}
  .cm-iso-col,.cm-tag.float{animation:none!important}
  .cm-step::before{transform:none!important;transition:none!important}
  .cm-dia .card{transition:none}.cm-dia:not(.in) .card{transform:none}
  .cm-glass,.cm-switch,.cm-faces img{transition:none!important}
}

/* glass inside staggered / revealed groups keeps the reveal timing */
.cm-stagger>.cm-glass,.cm-glass.cm-rv{transition:opacity .9s var(--cm-ease) calc(var(--k,0) * 70ms),transform 1s var(--cm-ease) calc(var(--k,0) * 70ms),box-shadow .4s}
.cm-push{margin-top:clamp(24px,4vw,56px)!important}

/* ── Calm surfaces (owner, 05.10): no decorative gradients across cases ─────────────
   one soft light only in the hero; cards and steps are flat; no colour orbs. */
.cm-glow:not(.cm-hero)::before{display:none}
.cm-card .orb{display:none}
.cm-card.is-acc{background:color-mix(in srgb,var(--case-accent) 8%,transparent)}
.cm-card.is-device{background:var(--cm-card-bg,rgba(255,255,255,.04))}
.cm-step::before{height:2px!important;top:auto;background:var(--case-accent);opacity:calc(var(--h,0) / 100)}

/* ── merged from cm-ext-A.css ── */
/* =====================================================================
   Case modules — extension A (desktop / web products). Link AFTER case-modules.css.
   Same conventions as cm-*: no per-case colours, uses band tokens + --case-accent.

   .cm-shot (+.is-crop)        landscape screen tile (desktop app / web screen without browser chrome)
   .cm-deck.cm-rv > .cm-deck-i  layered landscape screens, fanned with depth (desktop counterpart of .cm-fan)
                                style="--ar:16/9" on the deck; per item --x --y --w --rot --zi
                                tags: .cm-deck > .cm-tag placed with --x/--r/--y/--b like .cm-anchor
   .cm-iso .cm-shot            landscape tiles inside the flowing screen wall (--sw width)
   .cm-card > .cm-shot         screen at the foot of a bento card (bleeds to the card edge)
   .cm-sw.is-5                 five swatches in one row (scales, levels)
   .cm-anchor > .cm-over.cm-glass  glass quote card laid over a screen (--r/--b/--mw); stacks under it below 1100px
   ===================================================================== */
.cm-shot{position:relative;border-radius:16px;overflow:hidden;background:#0b0b0a;border:1px solid var(--cm-line-2,rgba(255,255,255,.16));box-shadow:var(--cm-sh,0 40px 90px -40px rgba(0,0,0,.9))}
.cm-shot img{display:block;width:100%;height:auto}
.cm-shot.is-crop{aspect-ratio:16/10}
.cm-shot.is-crop img{height:100%;object-fit:cover;object-position:left top}

/* deck: layered landscape screens */
.cm-deck{position:relative;aspect-ratio:var(--ar,16/9)}
.cm-deck-i{position:absolute;left:var(--x,0%);top:var(--y,0%);width:var(--w,70%);z-index:var(--zi,1);margin:0;
  transform:translateY(46px) scale(.96);opacity:0;transition:transform 1.3s var(--cm-ease) calc(var(--k,0) * 110ms),opacity .9s var(--cm-ease) calc(var(--k,0) * 110ms)}
.cm-deck.in .cm-deck-i{transform:rotate(var(--rot,0deg));opacity:1}
.cm-deck.cm-rv{opacity:1;transform:none}
.cm-deck>.cm-tag{position:absolute;z-index:8;left:var(--x,auto);right:var(--r,auto);top:var(--y,auto);bottom:var(--b,auto)}
.cm-deck-i:nth-child(1){--k:0}.cm-deck-i:nth-child(2){--k:1}.cm-deck-i:nth-child(3){--k:2}.cm-deck-i:nth-child(4){--k:3}

/* landscape tiles in the iso wall */
.cm-iso .cm-shot{width:var(--sw,400px);flex:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),-30px 40px 60px -20px rgba(0,0,0,.8)}

/* screen at the foot of a bento card */
.cm-card>.cm-shot{margin:22px calc(-1 * clamp(22px,2.2vw,30px)) calc(-1 * clamp(22px,2.2vw,30px));border-radius:14px 14px 0 0;border-width:1px 0 0;box-shadow:none}
.cm-card>.cm-shot.is-crop{aspect-ratio:16/9}

.cm-sw.is-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cm-sw.is-5 div{height:150px}
.cm-sw.is-5 b{font-size:34px;font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:auto}

/* glass quote over a screen */
.cm-anchor>.cm-over{position:absolute;z-index:6;right:var(--r,-12px);bottom:var(--b,-40px);max-width:var(--mw,520px);padding:clamp(22px,2.6vw,36px);margin:0}
.cm-over figcaption{margin-top:12px;font-size:14px;color:var(--gmute)}

@media (max-width:1100px){
  .cm-iso .cm-shot{--sw:300px}
  .cm-anchor>.cm-over{position:relative;right:auto;bottom:auto;max-width:none;margin:-36px 12px 0}
}
@media (max-width:700px){
  .cm-deck{aspect-ratio:auto;display:grid;gap:12px}
  .cm-deck-i{position:relative;left:auto;top:auto;width:100%;transform:none!important;opacity:1}
  .cm-deck-i:nth-child(n+3){display:none}
  .cm-deck>.cm-tag{position:relative;left:auto;right:auto;top:auto;bottom:auto;justify-self:start}
  .cm-iso .cm-shot{--sw:220px}
  .cm-sw.is-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-sw.is-5 div{height:112px}
  .cm-sw.is-5 b{font-size:28px}
}
@media (prefers-reduced-motion: reduce){
  .cm-deck-i{transform:rotate(var(--rot,0deg))!important;opacity:1!important;transition:none!important}
}

/* ── merged from cm-ext-C.css ── */
/* =====================================================================
   cm-ext-C — extension modules for group C cases (Dracats, Lush, Solia, SmartNest).
   Link AFTER case-modules.css. Same cm- conventions: band tokens + --case-accent only,
   no per-case colours or fonts. Candidates to merge into case-modules.css.

   .cm-film > figure style="--c:8;--a:16/9"   image/video tiles on a 12-col grid (cinema stills,
                                               product boards, renders); figcaption overlays the foot.
                                               .is-plain figure → caption-less, no gradient.
                                               Mobile: every tile 2-up (span 6); .is-wide stays full.
   .cm-portraits.is-6                          six-up portrait grid (cast of characters), 3-up / 2-up below
   .cm-film > figure > .cm-tag                  glass callout pinned on a tile (--x/--r/--y/--b)
   ===================================================================== */
.cm-film{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.cm-film>figure{position:relative;margin:0;grid-column:span var(--c,4);aspect-ratio:var(--a,16/9);border-radius:clamp(16px,1.8vw,26px);overflow:hidden;background:#0b0b0b;isolation:isolate;box-shadow:var(--cm-sh)}
.cm-film>figure>img,.cm-film>figure>video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1.2s var(--cm-ease)}
.cm-film>figure:hover>img{transform:scale(1.03)}
.cm-film figcaption{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:48px 18px 15px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.cm-film figcaption small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent);margin-bottom:3px}
.cm-film>figure>.cm-tag{position:absolute;z-index:3;left:var(--x,auto);right:var(--r,auto);top:var(--y,auto);bottom:var(--b,auto)}
.cm-film.is-plain>figure{box-shadow:none}

.cm-portraits.is-6{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cm-portraits.is-6 figure{aspect-ratio:9/14;border-radius:22px}
.cm-portraits.is-6 figcaption{left:14px;bottom:14px;font-size:17px}
.cm-portraits.is-6 figcaption small{font-size:12.5px;color:var(--case-accent)}

@media (max-width:1100px){
  .cm-film>figure{grid-column:span 6}
  .cm-film>figure.is-wide{grid-column:1/-1}
  .cm-portraits.is-6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .cm-film figcaption{padding:30px 10px 9px;font-size:12px}
  .cm-film figcaption small{font-size:10px}
  .cm-film>figure>.cm-tag{position:absolute;left:10px;right:auto;top:auto;bottom:10px;max-width:calc(100% - 20px)}
  .cm-portraits.is-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cm-portraits.is-6 figcaption{font-size:14px;left:10px;bottom:10px}
}
@media (prefers-reduced-motion: reduce){.cm-film>figure>img{transition:none}}

/* ── merged from cm-ext-D.css ── */
/* =====================================================================
   cm-ext-D — desktop-screen modules for web-product cases (group D:
   ReloFast, Miroset, stepikin.com, Lumen). Same cm- conventions, no per-case
   colours or fonts. Load after case-modules.css. Candidates to merge.

   .cm-browser.is-s            compact browser bar (for small / fanned frames)
   .cm-fan-i > .cm-browser     browser frames inside a .cm-fan (style="--w:560px"),
                               same spread / parallax / reveal as phones
   .cm-iso .cm-browser         desktop screens in the tilted flowing wall
   .cm-shots (style="--n:4;--nt:3")  grid of desktop screens with captions (--nt = tablet cols)
                               (figure > img + figcaption{b,span}); .is-hl ring
   .cm-code                    monospace data / config block (pre), b = keys
   ===================================================================== */

/* compact browser bar */
.cm-browser.is-s{border-radius:14px}
.cm-browser.is-s .bar{height:26px;gap:5px;padding:0 10px}
.cm-browser.is-s .bar i{width:7px;height:7px}
.cm-browser.is-s .bar span{height:16px;line-height:16px;font-size:10px;border-radius:6px;margin-left:8px;padding-left:8px;max-width:220px}
.cm-browser img{display:block}

/* browsers inside a fan */
.cm-fan-i>.cm-browser{width:var(--w,560px);max-width:none;transform:translate(-50%,40px) rotate(0) scale(.94);opacity:0;
  transition:transform 1.3s var(--cm-ease) calc(var(--k,0) * 90ms),opacity .9s var(--cm-ease) calc(var(--k,0) * 90ms)}
.cm-fan.in .cm-fan-i>.cm-browser{transform:translate(calc(-50% + var(--tx,0%)),var(--ty,0)) rotate(var(--rot,0deg)) scale(var(--s,1));opacity:1}
.cm-fan-i>.cm-browser,.cm-iso .cm-browser{box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
.cm-band-paper .cm-fan-i>.cm-browser,html.light .cm-band .cm-fan-i>.cm-browser{box-shadow:0 50px 80px -40px rgba(60,46,20,.5),0 0 0 1px rgba(0,0,0,.06)}

/* desktop screens in the tilted wall */
.cm-iso .cm-browser{width:var(--w,420px);flex:none}

/* grid of desktop screens */
.cm-shots{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px}
.cm-shots figure{margin:0;min-width:0}
.cm-shots img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:14px;border:1px solid var(--cm-line);background:#0b0b0a;transition:transform .5s var(--cm-ease)}
.cm-shots figure:hover img{transform:translateY(-3px)}
.cm-shots .is-hl img{box-shadow:0 0 0 2px var(--case-accent),0 0 40px color-mix(in srgb,var(--case-accent) 35%,transparent)}
.cm-shots figcaption{margin-top:10px;font-size:13.5px;line-height:1.35;color:var(--cm-mute)}
.cm-shots figcaption b{display:block;font-size:15px;font-weight:600;color:var(--cm-fg);letter-spacing:-.01em}

/* monospace data block */
.cm-code{margin:0;font:13.5px/1.7 ui-monospace,'SF Mono',Menlo,monospace;color:var(--cm-body);white-space:pre;overflow-x:auto;scrollbar-width:thin}
.cm-code b{color:var(--case-accent);font-weight:500}
.cm-band-paper .cm-card:not(.is-ink) .cm-code b,html.light .cm-band .cm-card:not(.is-ink) .cm-code b{color:var(--case-accent-ink)}

@media (max-width:1100px){
  .cm-fan:not(.is-keep) .cm-fan-i>.cm-browser{transform:none!important;opacity:1;width:min(var(--w,560px),80vw)}
  .cm-hero-fan .cm-browser{--w:62vw!important}
  .cm-iso .cm-browser{--w:300px!important}
  .cm-shots{grid-template-columns:repeat(var(--nt,3),minmax(0,1fr))}
}
@media (max-width:700px){
  .cm-hero-fan .cm-browser{--w:78vw!important}
  .cm-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cm-shots figcaption{font-size:12.5px}.cm-shots figcaption b{font-size:13.5px}
  .cm-iso .cm-browser{--w:240px!important}
}
@media (prefers-reduced-motion: reduce){
  .cm-fan-i>.cm-browser{transition:none!important}
  .cm-fan .cm-fan-i>.cm-browser{transform:translate(calc(-50% + var(--tx,0%)),var(--ty,0)) rotate(var(--rot,0deg)) scale(var(--s,1));opacity:1}
}

/* ── Light theme fixes over always-dark bands ── */
/* nav before scroll sits on the dark case hero: keep it light-on-dark */
html.light body:has(.cm-band-dark.cm-hero) .k-nav:not(.sc){color:#fff}
html.light body:has(.cm-band-dark.cm-hero) .k-nav:not(.sc) .k-links a,html.light body:has(.cm-band-dark.cm-hero) .k-nav:not(.sc) .k-ico{color:rgba(255,255,255,.72)}
html.light body:has(.cm-band-dark.cm-hero) .k-nav:not(.sc) .k-links a:hover,html.light body:has(.cm-band-dark.cm-hero) .k-nav:not(.sc) .k-brand{color:#fff}
/* outline / dark buttons on dark bands */
html.light .cm-band-dark .k-btn-o{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
html.light .cm-band-dark .k-btn-o:hover{border-color:#fff}
html.light .cm-band-dark .k-btn-d{background:#222;color:#fff}
html.light .cm-band-dark .k-btn-w,html.light body:has(.cm-band-dark.cm-hero) .k-nav:not(.sc) .k-btn-w{background:#fff;color:#000}

/* one accent per case: chip dots always use the case accent */
.cm-chip>i{background:var(--case-accent)!important}

/* ── cm-ext-L — lore / worldbuilding modules (first used on Dracats) ─────────────────
   Same cm- conventions: band tokens + --case-accent only, flat surfaces, no gradients.
   .cm-vs > .cm-film(2 figures) + .cm-vs-mid.cm-glass   "A vs B" diptych poster with a glass joint
   .cm-swatch > span[style=--c] + b                      tiny material / palette chips (data, not decor)
   .cm-origin  > .src + svg.fan (6 paths, pathLength=1) + ol.six > li{i[--c], small, svg.egg, b, span}
               draw-on reveal when .cm-rv gets .in; 3-up below 700px (fan hidden)
   .cm-net     interactive relationship map (svg built by JS: g.n[data-id], path.e, text.el) + .cm-net-cap
   .cm-sil > .cm-sil-scroll > svg (g.f[data-id][data-sh] path + text.nm/.hw, g.sh marker) + .cm-sil-cap
               size-comparison line-up on one metre axis; --d = depth tone; .is-hl / .act accent;
               scrolls sideways below 900px at the same scale
   .cm-arc > .act(.is-next) > header + ol > li{b,span}   two-act story timeline, vertical below 900px
   ===================================================================== */
.cm-vs{position:relative}
.cm-vs .cm-film>figure{grid-column:span 6;--a:4/3}
.cm-vs-mid{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);--gr:999px;width:76px;height:76px;display:grid;place-items:center;font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--gfg,#fff)}
.cm-swatch{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:var(--cm-mute)}
.cm-swatch>span{display:inline-flex;align-items:center;gap:9px}
.cm-swatch>span::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px var(--cm-line-2)}
.cm-swatch b{color:var(--cm-fg);font-weight:600;margin-right:4px}

.cm-origin{margin-top:clamp(36px,4.5vw,64px);padding:clamp(26px,3vw,44px) clamp(14px,2vw,28px) clamp(26px,3vw,40px);border-radius:28px;background:var(--cm-card);border:1px solid var(--cm-line)}
.cm-origin .src{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.cm-origin .src svg{width:46px;height:46px;color:var(--case-accent);margin-bottom:8px}
.cm-origin .src b{font-size:clamp(19px,1.6vw,23px);font-weight:700;letter-spacing:-.03em;color:var(--cm-fg)}
.cm-origin .src span{font-size:14px;color:var(--cm-mute)}
.cm-origin .fan{display:block;width:100%;height:clamp(70px,8vw,120px);margin-top:14px;overflow:visible}
.cm-origin .fan path{fill:none;stroke:var(--cm-line-2);stroke-width:1.5;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--cm-ease) calc(var(--k,0) * 110ms)}
.cm-origin .fan path.is-dark{stroke:var(--case-accent);stroke-dasharray:.012 .012;stroke-dashoffset:0;opacity:0;transition:opacity 1s .9s}
.cm-origin.in .fan path{stroke-dashoffset:0}.cm-origin.in .fan path.is-dark{opacity:.9}
.cm-origin .six{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.cm-origin .six li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;opacity:0;transform:translateY(14px);transition:opacity .8s var(--cm-ease) calc(.5s + var(--k,0) * 110ms),transform .9s var(--cm-ease) calc(.5s + var(--k,0) * 110ms)}
.cm-origin.in .six li{opacity:1;transform:none}
.cm-origin .six i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--cm-card),0 0 0 5px var(--cm-line-2)}
.cm-origin .six small{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cm-mute)}
.cm-origin .six .egg{width:34px;height:44px;margin:16px 0 14px;color:var(--cm-mute-h)}
.cm-origin .six li.is-dark .egg{color:var(--case-accent)}
.cm-origin .six b{font-size:18px;font-weight:700;letter-spacing:-.025em;color:var(--cm-fg)}
.cm-origin .six span{margin-top:2px;font-size:13.5px;color:var(--cm-mute)}
.cm-origin .six li::after{content:"";order:-1;width:1px;height:0}

.cm-net{position:relative;margin-top:clamp(36px,4.5vw,60px)}
.cm-net svg{display:block;width:100%;height:auto;font-family:var(--cm-font);overflow:visible;-webkit-tap-highlight-color:transparent}
.cm-net .rg{fill:var(--cm-card);stroke:var(--cm-line)}
.cm-net .rl{fill:var(--cm-mute);font-size:12px;font-weight:700;letter-spacing:.14em}
.cm-net .e{fill:none;stroke:var(--cm-line-2);stroke-width:1.4;transition:stroke .3s,opacity .3s,stroke-width .3s}
.cm-net .e.is-soft{stroke-dasharray:3 5}
.cm-net .el{fill:var(--cm-mute);font-size:13px;font-weight:600;text-anchor:middle;paint-order:stroke;stroke:var(--cm-bg);stroke-width:6px;stroke-linejoin:round;transition:opacity .3s,fill .3s}
.cm-net .rg~.el,.cm-net .el.on-card{stroke:var(--cm-card)}
.cm-net .n{cursor:pointer;outline:none;transition:opacity .3s}
.cm-net .n image{filter:grayscale(1) contrast(1.05);transition:filter .35s}
.cm-net .n .ring{fill:none;stroke:var(--cm-line-2);stroke-width:1.5;transition:stroke .3s,stroke-width .3s}
.cm-net .n .nm{fill:var(--cm-fg);font-size:16px;paint-order:stroke;stroke:var(--cm-card);stroke-width:5px;stroke-linejoin:round;font-weight:700;letter-spacing:-.02em;text-anchor:middle}
.cm-net .n .rl2{fill:var(--cm-mute);font-size:12.5px;text-anchor:middle}
.cm-net .n.is-mid .ring{stroke:var(--case-accent)}
.cm-net .n:focus-visible .ring{stroke:var(--cm-fg);stroke-width:3}
.cm-net svg.is-act .e:not(.on),.cm-net svg.is-act .el:not(.on){opacity:.12}
.cm-net svg.is-act .n:not(.on):not(.act){opacity:.35}
.cm-net .e.on{stroke:var(--cm-acc);stroke-width:2.2}
.cm-net .el.on{fill:var(--cm-fg)}
.cm-net .n.act image,.cm-net .n.on image{filter:none}
.cm-net .n.act .ring{stroke:var(--cm-acc);stroke-width:3}
.cm-net-cap{margin-top:18px;min-height:3.2em;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--cm-body);max-width:70ch}
.cm-net-cap b{color:var(--cm-fg);font-weight:700;margin-right:6px}
.cm-net-cap em{font-style:normal;color:var(--cm-acc);font-weight:600}
.cm-net.is-tall .el{opacity:0}
.cm-net.is-tall .n .nm{font-size:14.5px}
.cm-net.is-tall .el{font-size:12.5px}
.cm-net.is-tall svg.is-act .el.on{opacity:1}


.cm-sil{margin-top:clamp(36px,4.5vw,60px)}
.cm-sil .f{--sil:color-mix(in srgb,var(--cm-fg) calc(13% + var(--d,0) * 6%),var(--cm-bg))}
html.light .cm-band .cm-sil .f,.cm-band-paper .cm-sil .f{--sil:color-mix(in srgb,var(--cm-fg) calc(30% + var(--d,0) * 9%),var(--cm-bg))}
.cm-sil-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cm-sil-scroll::-webkit-scrollbar{display:none}
.cm-sil svg{display:block;width:100%;height:auto;font-family:var(--cm-font);overflow:visible;-webkit-tap-highlight-color:transparent}
.cm-sil .ax line{stroke:var(--cm-line);stroke-dasharray:3 5}
.cm-sil .ax text{fill:var(--cm-mute-h);font-size:12px}
.cm-sil svg .ax text{opacity:var(--axo,1)}
.cm-sil .gl{stroke:var(--cm-line-2);stroke-width:1.5}
.cm-sil .f{cursor:pointer;outline:none}
.cm-sil .f path,.cm-sil .hu path{fill:var(--sil);stroke:var(--cm-bg);stroke-width:5px;paint-order:stroke;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .35s var(--cm-ease)}
.cm-sil .hu path{fill:var(--cm-fg)}
.cm-sil .sd{fill:var(--cm-fg);opacity:.07}
.cm-sil .nm{fill:var(--cm-fg);font-size:15px;font-weight:700;letter-spacing:-.02em;text-anchor:middle;paint-order:stroke;stroke:var(--cm-bg);stroke-width:5px;stroke-linejoin:round}
.cm-sil .hw{fill:var(--cm-mute);font-size:12.5px;text-anchor:middle;paint-order:stroke;stroke:var(--cm-bg);stroke-width:5px;stroke-linejoin:round}
.cm-sil .f.act path,.cm-sil svg:not(.is-act) .f.is-hl path{fill:var(--case-accent)}
.cm-sil .f.act .nm,.cm-sil svg:not(.is-act) .f.is-hl .nm{fill:var(--cm-acc)}
.cm-sil .f:focus-visible .nm{text-decoration:underline}
.cm-sil .sh{pointer-events:none}
.cm-sil .sh .m{stroke:var(--cm-bg);stroke-width:2;stroke-dasharray:5 4;opacity:.85}
.cm-sil .sh .t{stroke:var(--cm-acc);stroke-width:2}
.cm-sil .sh text{fill:var(--cm-acc);font-size:12px;font-weight:700;paint-order:stroke;stroke:var(--cm-bg);stroke-width:4px}
.cm-sil .sh{transition:transform .45s var(--cm-ease)}
.cm-sil-cap{margin-top:18px;min-height:3.2em;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--cm-body);max-width:70ch}
.cm-sil-cap b{color:var(--cm-fg);font-weight:700;margin-right:8px}
.cm-sil-cap em{font-style:normal;color:var(--cm-acc);font-weight:600;margin-right:8px}
@media (max-width:900px){
  .cm-sil-scroll{margin:0 calc(-1 * var(--gut,24px));padding:0 var(--gut,24px)}
  .cm-sil svg{width:980px;max-width:none}
  .cm-sil-scroll::after{content:"";display:block;width:1px}
}

.cm-arc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,2.4fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(36px,4.5vw,60px)}
.cm-arc .act{border-radius:26px;background:var(--cm-card);border:1px solid var(--cm-line);padding:clamp(22px,2.2vw,30px)}
.cm-arc header{display:flex;flex-direction:column;gap:8px}
.cm-arc header b{font-size:clamp(20px,1.7vw,25px);font-weight:700;letter-spacing:-.035em;color:var(--cm-fg)}
.cm-arc .act.is-next header b{color:var(--cm-mute)}
.cm-arc ol{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;position:relative}
.cm-arc ol::before{content:"";position:absolute;left:0;right:-40px;top:6px;height:1px;background:var(--cm-line-2)}
.cm-arc .act.is-next ol::before{left:-40px;right:0;background:none;border-top:1px dashed var(--cm-line-2)}
.cm-arc li{position:relative;padding-top:30px;font-size:14px;line-height:1.45;color:var(--cm-mute)}
.cm-arc li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--cm-card);box-shadow:inset 0 0 0 1.5px var(--cm-mute-h)}
.cm-arc li.is-key::before{background:var(--case-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--case-accent) 22%,transparent)}
.cm-arc li b{display:block;margin-bottom:6px;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--cm-fg)}
.cm-arc li small{display:block;margin-bottom:4px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-mute-h)}
.cm-arc .act:first-child{position:relative;z-index:1}
.cm-arc-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;font-size:14px;line-height:1.45;color:var(--cm-mute)}
.cm-arc-note>span:first-child{padding:4px 10px;border-radius:999px;border:1px solid var(--cm-line-2);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-fg)}

@media (max-width:1100px){
  .cm-arc{grid-template-columns:1fr}
  .cm-arc .act.is-next ol::before{left:0}
  .cm-arc ol::before{right:0}
}
@media (max-width:900px){
  .cm-arc ol{grid-auto-flow:row;gap:22px;margin-top:22px}
  .cm-arc ol::before,.cm-arc .act.is-next ol::before{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .cm-arc .act.is-next ol::before{width:0;border-top:0;border-left:1px dashed var(--cm-line-2)}
  .cm-arc li{padding:0 0 0 32px}
  .cm-arc li::before{top:2px}
}
@media (max-width:700px){
  .cm-vs .cm-film>figure{grid-column:1/-1;--a:16/10}
  .cm-vs-mid{width:58px;height:58px;font-size:18px;left:auto;right:18px;transform:translateY(-50%)}
  .cm-origin{padding:24px 12px}
  .cm-origin .fan{display:none}
  .cm-origin .src::after{content:"";width:1px;height:28px;margin-top:14px;background:var(--cm-line-2)}
  .cm-origin .six{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px;margin-top:14px}
  .cm-origin .six .egg{margin:12px 0 10px;width:28px;height:36px}
  .cm-origin .six b{font-size:16px}
  .cm-origin .six small{font-size:10.5px;letter-spacing:.08em;min-height:2.7em}
  .cm-origin .six span{font-size:12.5px}
}
@media (prefers-reduced-motion: reduce){
  .cm-origin .fan path{transition:none;stroke-dashoffset:0}.cm-origin .fan path.is-dark{opacity:.9;transition:none}
  .cm-origin .six li{opacity:1;transform:none;transition:none}
  .cm-sil .f path,.cm-sil .f text,.cm-sil .sh{transition:none!important}
  .cm-net .e,.cm-net .el,.cm-net .n,.cm-net .n image{transition:none}
}