/* ==========================================================================
   Sera v.1 — case study storytelling components (shared)
   Per-case rules live in cases/<prefix>.css and are enqueued only when needed.
   ========================================================================== */
.case-content{--ca:#3347FF;--ca-soft:#E8EBFF;--ca-ink:#111110}
/* reveal on case pages (class added by case.js) — .art keeps its centring transform */
.art.reveal{transform:translate(-50%,14px)}
.art.reveal.is-in{transform:translateX(-50%)}
.case-content .alignwide.reveal{transform:translate(-50%,14px)}
.case-content .alignwide.reveal.is-in{transform:translateX(-50%)}
.reveal .stat,.reveal .signals>div,.reveal .art-grid>*{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.reveal.is-in .stat,.reveal.is-in .signals>div,.reveal.is-in .art-grid>*{opacity:1;transform:none}
.art,.sera-mockup-block{content-visibility:auto;contain-intrinsic-size:auto 680px}
@media (prefers-reduced-motion:reduce){
  .art.reveal,.art.reveal.is-in,.case-content .alignwide.reveal{transform:translateX(-50%)}
  .reveal .stat,.reveal .signals>div,.reveal .art-grid>*{opacity:1;transform:none}
}
/* chapter list: sticky right rail on wide screens (built by case.js). Compact numbers until 1680 px,
   where there is room for the labels beside the 1200 px artifacts; hovering the rail reveals them. */
.case-toc{display:none;position:fixed;right:8px;top:50%;z-index:5;transform:translateY(-50%);list-style:none;margin:0;padding:6px;border-radius:14px;font:500 11.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:background .25s,box-shadow .25s}
.case-toc li+li{margin-top:2px}
.case-toc a{display:flex;align-items:center;gap:10px;min-height:28px;padding:4px 8px;border-radius:8px;color:var(--muted);transition:color .2s,background .2s}
.case-toc .n{width:22px;flex:none;text-align:center;border-left:2px solid var(--line);transition:border-color .2s}
.case-toc .t{display:none;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.case-toc a:hover{color:var(--ink);background:var(--bg-2)}
.case-toc a[aria-current="true"]{color:var(--ink)}
.case-toc a[aria-current="true"] .n{border-color:var(--ca,var(--accent))}
.case-toc:hover,.case-toc:focus-within{background:var(--surface);box-shadow:0 20px 50px -24px rgba(17,17,16,.35),0 0 0 1px var(--line)}
.case-toc:hover .t,.case-toc:focus-within .t{display:block}
@media (min-width:1280px){.case-toc{display:block}}
html.at-end .case-toc{opacity:0;pointer-events:none}
@media (min-width:1680px){.case-toc{right:clamp(16px,2vw,32px)}.case-toc .t{display:block}}
/* chapter rhythm */
.case-content .kicker{margin-top:clamp(88px,10vw,140px);display:flex;align-items:center;gap:12px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case-content .kicker::before{content:"";width:28px;height:1px;background:currentColor}
.case-content .kicker+h2,.case-content h2.chapter{margin-top:18px}
.case-content h2.chapter{font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.case-content .lead{font-size:clamp(20px,1.8vw,23px);line-height:1.55;color:var(--ink)}
.case-content p strong{color:var(--ink);font-weight:600}
.case-content .note{font-size:15px;color:var(--muted)}
/* shared artifact frame */
.art{position:relative;width:min(1200px,calc(100vw - 2 * var(--gutter)));margin:clamp(40px,5vw,64px) 0 0 50%;transform:translateX(-50%);font-size:16px;line-height:1.5;color:var(--ink-2)}
.art ul,.art ol{padding-left:0}
.art li+li{margin-top:0}
.art h3,.art h4{margin-top:0}
.art-panel{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,56px)}
.art-dark{background:var(--ca-ink);color:#E9E9E4;border-color:transparent}
.art-label{display:block;font:500 11.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.art-dark .art-label{color:rgba(255,255,255,.55)}
.art-title{display:block;margin-top:10px;font-family:var(--display);font-weight:500;font-stretch:92%;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.art-dark .art-title{color:#fff}
.art-grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.art-card{padding:26px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.art-card h4{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.art-card p{margin-top:8px;font-size:14.5px;color:var(--ink-2)}
.art-dark .art-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.art-dark .art-card h4{color:#fff}
.art-dark .art-card p{color:rgba(255,255,255,.72)}
.art-cap{margin:14px auto 0 0;max-width:720px;font-size:13px;line-height:1.5;color:var(--muted);text-align:left}
/* at a glance */
.glance{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.glance>div{padding:22px 22px 24px 0}
.glance>div+div{padding-left:22px;border-left:1px solid var(--line)}
.glance dt{font:500 11.5px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glance dd{margin-top:8px;font-size:15.5px;color:var(--ink);line-height:1.45}
.glance-did{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.glance-did ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.glance-did li{padding:6px 12px;border-radius:999px;background:var(--ca-soft);color:var(--ink);font-size:13.5px}
/* big stats */
.stat{padding:30px 26px;border-radius:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.stat b{font-family:var(--display);font-weight:500;font-stretch:90%;font-size:clamp(48px,5.4vw,80px);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.stat span{font-size:15px;color:var(--ink-2)}
.stat small{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.stat.hl{background:var(--ca);border-color:transparent}
.stat.dark{background:var(--ca-ink);border-color:transparent}
.stat.dark b{color:#fff}
.stat.dark span{color:rgba(255,255,255,.75)}
.stat.dark small{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.15)}
/* statement / insight */
.statement{padding:clamp(40px,7vw,96px) clamp(24px,5vw,72px);border-radius:32px;background:var(--ca-ink);color:#fff;overflow:hidden;position:relative}
.statement::after{content:"";position:absolute;right:-12%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--ca) 0%,transparent 65%);opacity:.28;pointer-events:none}
.statement p{position:relative;max-width:980px;font-family:var(--display);font-weight:500;font-stretch:100%;font-size:clamp(30px,4.2vw,58px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.statement p em{font-style:normal;color:var(--ca)}
.statement .art-label{position:relative;margin-bottom:22px;font-size:12.5px;color:rgba(255,255,255,.76);letter-spacing:.1em}
.statement .by{position:relative;display:block;max-width:64ch;margin-top:28px;font-size:clamp(15.5px,1.3vw,17px);line-height:1.55;color:rgba(255,255,255,.84);text-wrap:pretty}
/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.quote{position:relative;padding:34px 28px 26px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.quote::before{content:"“";position:absolute;top:6px;left:22px;font-family:var(--display);font-size:72px;line-height:1;color:var(--ca)}
.quote p{position:relative;margin-top:26px;font-family:var(--display);font-weight:400;font-stretch:94%;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.quote span{display:block;margin-top:18px;font-size:13px;color:var(--muted)}
.gap-rows{display:grid;gap:14px;margin-top:34px}
.gap-row{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--bg)}
.gap-row .who{font:500 12px "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gap-row .bar{display:flex;gap:6px;flex-wrap:wrap}
.gap-row .bar span{padding:7px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.gap-row .bar span.x{background:#FBE7E7;border-color:#F3C4C4;color:#8A1C1C}
.gap-row.new{background:var(--ca-soft)}
.gap-row.new .bar span.y{background:var(--ca);border-color:transparent;color:#fff}
/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.steps3>div{padding:28px 26px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.steps3>div::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--display);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--ca)}
.steps3 h4{margin-top:18px;font-size:19px;font-weight:600;color:var(--ink)}
.steps3 p{margin-top:8px;font-size:14.5px}
/* decisions list */
.decisions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.decisions>div{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:22px 24px 22px 0;border-bottom:1px solid var(--line)}
.decisions>div:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.decisions i{font:500 12px "Geist Mono",monospace;color:var(--muted);font-style:normal;padding-top:3px}
.decisions b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.decisions span{display:block;margin-top:4px;font-size:14.5px;color:var(--ink-2)}
/* economics */
.econ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.econ>div{padding:28px 24px;border-radius:22px;display:flex;flex-direction:column;gap:10px;min-height:260px}
.econ .win{background:#071431;color:#fff}
.econ .loss{background:var(--surface);border:2px solid var(--ca)}
.econ .zero{background:var(--bg-2)}
.econ b.big{font-family:var(--display);font-weight:500;font-size:clamp(44px,4.6vw,68px);line-height:.95;letter-spacing:-.04em}
.econ .win b.big{color:#fff}
.econ .loss b.big{color:var(--ca)}
.econ .zero b.big{color:var(--ink)}
.econ h4{font-size:16.5px;font-weight:600;line-height:1.3}
.econ .win h4{color:#fff}
.econ p{margin-top:auto;font-size:14px;opacity:.85}
.econ-rule{margin-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 24px;border-radius:18px;background:var(--ca-soft);font-size:16px;color:var(--ink)}
.econ-rule .dots{display:flex;gap:6px;align-items:center}
.econ-rule .dots i{width:22px;height:22px;border-radius:50%;background:var(--ca)}
.econ-rule .dots i.w{background:#071431;width:30px;height:30px}
.econ-rule .dots em{font-style:normal;margin:0 6px;font-weight:600}
/* orchestrator diagram */
.orch{display:grid;grid-template-columns:1fr 64px 1.05fr 64px 1fr;align-items:stretch}
.orch .node{padding:24px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.orch .node.agent{border-color:var(--ca);box-shadow:0 0 0 1px var(--ca) inset,0 20px 40px -20px rgba(255,10,140,.5)}
.orch .node small{display:block;font:500 11px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.orch .node h4{margin-top:8px;font-size:19px;font-weight:600;color:#fff}
.orch .node p{margin-top:8px;font-size:14px;color:rgba(255,255,255,.75)}
.orch .node q{display:block;margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(255,10,140,.14);font-size:13px;line-height:1.45;color:#FFD1EA;quotes:none}
.orch .arrow{display:grid;place-items:center;color:rgba(255,255,255,.4)}
.orch .arrow svg{width:28px;height:28px}
.orch .groups{display:grid;gap:10px}
.orch .grp{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.orch .grp b{display:block;font-size:15.5px;color:#fff}
.orch .grp span{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.7)}
.orch .grp.on{background:var(--ca);border-color:transparent}
.orch .grp.on span{color:#FFE3F2}
.orch-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.orch-foot>div{padding:18px 22px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:14.5px;color:rgba(255,255,255,.8)}
.orch-foot b{display:block;margin-bottom:4px;font:500 11px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.orch-foot .engine{background:#fff;color:#071431}
.orch-foot .engine b{color:#6F80A3}
/* research triangle */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.tri>div{padding:28px 24px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.tri>div.key{background:var(--ca);border-color:transparent;color:#111}
.tri .n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);font-size:14px;color:#fff}
.tri .key .n{border-color:#111;color:#111}
.tri h4{margin-top:18px;font-size:18px;font-weight:600;color:#fff}
.tri .key h4{color:#111}
.tri ul{margin-top:12px;padding-left:18px;font-size:15px;color:rgba(255,255,255,.82)}
.tri .key ul{color:#2b2b2b}
.tri li+li{margin-top:5px}
/* audit */
.audit{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.audit-ids{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.audit-ids figure{position:relative;width:min(220px,40%);margin:0}
.audit-ids svg{width:100%;height:auto;border-radius:8px;box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
.audit-ids figcaption{margin-top:10px;font:500 11.5px "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.audit-ids .plus{font-family:var(--display);font-size:40px;color:rgba(255,255,255,.4)}
.audit-ids .x{position:absolute;right:-10px;top:-10px;width:34px;height:34px;border-radius:50%;background:#E5484D;color:#fff;display:grid;place-items:center;font-weight:700}
.audit-num b{display:block;font-family:var(--display);font-weight:500;font-stretch:88%;font-size:clamp(90px,12vw,180px);line-height:.85;letter-spacing:-.05em;color:var(--ca)}
.audit-num p{margin-top:14px;max-width:420px;font-size:18px;color:#fff}
.audit-bar{display:flex;height:14px;margin-top:22px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.12)}
.audit-bar i{display:block;width:90%;background:var(--ca)}
/* release chart */
.chart-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:"Geist",sans-serif}
.chart-notes{display:grid;gap:12px}
.chart-notes>div{padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.chart-notes>div.bad{border-color:#F3C4C4;background:#FFF5F5}
.chart-notes b{display:block;font-size:15px;color:var(--ink)}
.chart-notes span{display:block;margin-top:4px;font-size:14px}
/* impact */
.impact{padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);border-radius:32px;background:var(--ca-ink);color:#fff;overflow:hidden;position:relative}
.impact::before{content:"";position:absolute;left:-10%;bottom:-60%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--ca),transparent 65%);opacity:.3}
.impact>*{position:relative}
.impact .art-label{color:var(--ca)}
.impact h3{margin-top:14px;max-width:880px;font-family:var(--display);font-weight:500;font-stretch:92%;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.034em;color:#fff;text-wrap:balance}
.impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,5vw,64px);border-top:1px solid rgba(255,255,255,.18)}
.impact-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.impact-grid>div{padding:26px 22px 0 0}
.impact-grid>div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}
.impact-grid b{display:block;font-family:var(--display);font-weight:500;font-stretch:88%;font-size:clamp(46px,5.4vw,84px);line-height:.9;letter-spacing:-.045em;color:#fff}
.impact-grid b sup{font-size:.45em;vertical-align:top;margin-left:2px;color:var(--ca)}
/* units: <b>+15<small class="u">%</small></b> */
.impact-grid b .u,.stat b .u,.metric b .u{font-size:.5em;vertical-align:baseline;letter-spacing:.02em;margin-left:.04em;color:var(--ca)}
.impact-grid b .arr{font-weight:600;font-size:.8em}
.impact-grid span{display:block;margin-top:14px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.impact-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.impact-foot span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13.5px;color:rgba(255,255,255,.85)}
/* reflection */
.reflect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.reflect>div{padding:30px 28px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.reflect ul{list-style:none;margin-top:16px}
.reflect li{position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.reflect li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:3px;background:var(--ca)}
.reflect>div.alt li::before{background:transparent;border:1.5px solid var(--ink)}
/* signals (why this is staff work) */
.signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.signals>div{padding:26px 24px;background:var(--surface)}
.signals i{display:block;font:500 11.5px "Geist Mono",monospace;font-style:normal;letter-spacing:.06em;color:var(--muted)}
.signals b{display:block;margin-top:10px;font-size:16.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.signals span{display:block;margin-top:6px;font-size:14px}
/* pains ranking */
.pains{list-style:none;counter-reset:p}
.pains li{counter-increment:p;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line);font-size:17px;color:var(--ink)}
.pains li::before{content:"0" counter(p);font:500 13px "Geist Mono",monospace;color:var(--muted)}
.pains li .bar{width:clamp(80px,22vw,280px);height:10px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.pains li .bar i{display:block;height:100%;background:#C9C6BC;border-radius:5px}
.pains li.focus{font-weight:600}
.pains li.focus .bar i{background:var(--ink)}
.pains li.focus em{white-space:nowrap;margin-left:10px;padding:3px 9px;border-radius:999px;background:var(--ca);font:500 11px "Geist Mono",monospace;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-ink);vertical-align:2px}
/* venn framework */
.venn-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.venn svg{width:100%;max-width:460px;height:auto;display:block;margin:0 auto}
.venn text{font-family:"Geist",sans-serif}
/* before / after text comparison */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ba>div{padding:30px 28px;border-radius:22px}
.ba .was{background:var(--bg-2)}
.ba .now{background:var(--ca-ink);color:#fff}
.ba h4{font:500 11.5px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ba .now h4{color:var(--ca)}
.ba .row{margin-top:18px;padding-top:18px;border-top:1px solid rgba(0,0,0,.08)}
.ba .now .row{border-color:rgba(255,255,255,.12)}
.ba .row b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.ba .now .row b{color:#fff}
.ba .row span{display:block;margin-top:6px;font-size:14.5px}
.ba .now .row span{color:rgba(255,255,255,.75)}
/* temporal control */
.temporal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.temporal>div{position:relative;padding:28px 24px 26px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.temporal>div.now{background:var(--ca);border-color:transparent}
.temporal small{font:500 11.5px "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.temporal .now small{color:#5E4B00}
.temporal h4{margin-top:10px;font-family:var(--display);font-weight:500;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.temporal p{margin-top:10px;font-size:14.5px}
@media (max-width:1000px){
  .cols-4,.impact-grid,.glance{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glance{grid-auto-flow:row}
  .glance>div:nth-child(odd){padding-left:0;border-left:none}
  .glance>div:nth-child(odd):last-child{grid-column:1/-1}
  .glance>div:nth-child(n+3){border-top:1px solid var(--line)}
  .impact-grid>div:nth-child(3){padding-left:0;border-left:none}
  .impact-grid>div:nth-child(n+3){margin-top:28px;border-top:1px solid rgba(255,255,255,.14)}
  .orch{grid-template-columns:1fr}
  .orch .arrow{padding:10px 0}
  .orch .arrow svg{transform:rotate(90deg)}
  .audit,.chart-wrap,.venn-wrap{grid-template-columns:1fr}
  .quotes,.steps3,.econ,.tri,.temporal,.signals,.cols-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cols-2,.ba,.reflect,.decisions,.orch-foot,.impact-grid,.glance,.impact-grid.cols-3{grid-template-columns:1fr}
  .decisions>div:nth-child(even){padding-left:0;border-left:none}
  .glance>div,.glance>div+div{padding:18px 0;border-left:none}
  .glance>div+div{border-top:1px solid var(--line)}
  .impact-grid>div,.impact-grid>div+div{padding:22px 0 0;border-left:none}
  .impact-grid>div+div{margin-top:22px;border-top:1px solid rgba(255,255,255,.14)}
  .gap-row{grid-template-columns:1fr;gap:10px}
  .glance-did{grid-template-columns:1fr;gap:10px}
  .pains li{grid-template-columns:36px 1fr}
  .pains li .bar{grid-column:2}
}
.ticks{list-style:none;margin-top:14px}
.ticks li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:50%;background:var(--ca)}
.art-cap a,.art p a{text-decoration:underline;text-underline-offset:3px}
.venn-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.venn-legend li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#26220F;color:#F8D63E;font-size:13px;font-weight:600}
.venn-legend i{width:6px;height:6px;border-radius:50%;background:#F8D63E}
/* v2.3: qualitative stat tiles (no internal figures) */
.stat.is-word b{font-size:clamp(30px,3.1vw,46px);line-height:1;letter-spacing:-.03em}

/* next case (page.php): the next case's accent as a left border + a small hero thumbnail */
.next-case.is-pg{--ca:#FF0A8C}.next-case.is-rh{--ca:#FF009B}.next-case.is-wu{--ca:#FFDD00}.next-case.is-wb{--ca:#F8D63E}.next-case.is-fm{--ca:#FF8A89}.next-case.is-ac{--ca:#1F4FE0}.next-case.is-nb{--ca:#FF3B00}
.next-case{border-left:4px solid var(--ca,var(--accent))}
.next-case.has-thumb{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:center}
.next-thumb{position:relative;height:160px;border-radius:16px;overflow:hidden;pointer-events:none;background:var(--bg-2);contain:layout paint}
/* v3.6.9: the thumbnail is the home card's visual (same scales the home uses), rendered at card size and shrunk as one piece */
.next-thumb .nt-card{position:absolute;left:0;top:0;display:block;width:760px;height:553px;margin:0;border:0;border-radius:0;box-shadow:none;transform:scale(.2895);transform-origin:0 0;content-visibility:visible;contain:none;overflow:hidden}
.next-thumb .nt-card .case-visual{height:100%;min-height:0}
.next-thumb .brand-chip,.next-thumb .device-cap,.next-thumb .stage-dots{display:none}
@media (max-width:640px){
  .next-case.has-thumb{grid-template-columns:1fr}
  .next-thumb{order:-1;height:180px}
  .next-thumb .nt-card{width:100%;height:100%;transform:none}
  .next-thumb .nt-card .case-visual{transform:scale(.5);transform-origin:50% 0;width:200%;height:200%;margin-left:-50%}
}
/* v3.1: phone polish (≤640 px): slightly tighter cards, smaller radii, calmer gaps */
@media (max-width:640px){
  .art{margin-top:36px}
  .art-panel{border-radius:22px;padding:22px 20px}
  .art-grid{gap:10px}
  .art-card{padding:20px 18px;border-radius:16px}
  .art-card p{margin-top:6px}
  .art-title{font-size:23px}
  .art-cap{margin-top:12px;font-size:12.5px}
  .glance>div,.glance>div+div{padding:16px 0}
  .glance dd{margin-top:6px;font-size:15px}
  .stat,.quote,.steps3>div,.reflect>div,.temporal>div,.ba>div,.econ>div{padding:22px 20px;border-radius:18px}
  .stat b{font-size:clamp(40px,12vw,56px)}
  .quote p{font-size:18px}
  .signals>div{padding:20px 18px}
  .signals{border-radius:18px}
  .statement,.impact{border-radius:24px}
  .gap-row{padding:14px 16px;border-radius:14px}
}
.case-toc{display:none!important}
/* v3.7 · next-case thumbnail = just the phone, cropped at the top like a peek; on hover it zooms in and rises */
.next-thumb .browser,.next-thumb .device~.device,.next-thumb .shots-sb{display:none!important}
.next-thumb .mockup-stage,.next-thumb .ac-hero-stage{display:flex!important;justify-content:center;align-items:flex-start;padding:70px 0 0!important;margin:0!important;width:100%!important;height:100%;gap:0;overflow:visible}
.next-thumb .ac-hero-stage{padding:0!important}
.next-thumb .device{position:relative!important;left:auto!important;top:auto!important;right:auto!important;margin:0!important;--s:.95!important;transform:none!important;flex:none;
	transition:translate .6s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1),rotate .6s cubic-bezier(.2,.8,.2,1);transform-origin:50% 0}
.next-thumb .device::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:calc(64px * var(--s,1));
	background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s cubic-bezier(.2,.8,.2,1)}
.next-case:hover .next-thumb .device{translate:0 -46px;scale:1.12;rotate:-2deg}
.next-case:hover .next-thumb .device::after{background-position:-30% 0}
.next-thumb .nt-card .case-visual{transition:filter .6s ease}
.next-case:hover .next-thumb .nt-card .case-visual{filter:saturate(1.15)}
.next-case:hover .read .arrow,.next-case:hover .next-link .ico{translate:4px 0}
@media (prefers-reduced-motion:reduce){.next-thumb .device,.next-thumb .device::after{transition:none}.next-case:hover .next-thumb .device{translate:none;scale:none;rotate:none}}