/* ==========================================================================
   Tortuga website: shared layer for the home page, In depth and Learn.
   Tokens are the design system's own (colors_and_type.css, v2). The brand
   commits to one look: stone page, charcoal ink, ink-dark bands; no theme flip.
   Layout: 1200 canvas, left-aligned, 16–24px gutters; hex is the only icon.
   ========================================================================== */
:root {
  color-scheme: light;
  --gray-100:#F1F2EE; --gray-200:#E3E4E0; --gray-300:#D5D6D2; --gray-400:#AAABA7;
  --gray-500:#81827E; --gray-600:#5A5B58; --gray-700:#4A4A48; --gray-800:#3A3A39;
  --gray-900:#292B2A; --gray-1000:#1E1F1E; --white:#FFFFFF;
  --sand:#C7B9AB; --sky-100:#DAE5EF; --sky-400:#91AFC7; --sky-1000:#274E6A;
  --surface-page:var(--gray-300); --surface-raised:var(--gray-200); --surface-card:var(--gray-100);
  --ink:var(--gray-900); --ink-2:var(--gray-600); --ink-3:var(--gray-500);
  --on-dark:var(--gray-100); --on-dark-2:var(--gray-300); --on-dark-3:var(--gray-400);
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'InterDisplay','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r-4:4px; --r-8:8px; --r-14:14px; --r-24:24px;
  --ease:cubic-bezier(.748,.065,.287,.997); --ease-out:cubic-bezier(0,0,.4,1);
  --gutter:clamp(16px,2vw,24px); --hdr:68px;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M9.985 1.176C11.23.449 12.77.449 14.015 1.176l8 4.666C23.244 6.559 24 7.875 24 9.297v9.406c0 1.422-.756 2.738-1.985 3.455l-8 4.666c-1.245.727-2.785.727-4.03 0l-8-4.666C.756 21.441 0 20.125 0 18.703V9.297c0-1.422.756-2.738 1.985-3.455z' fill='%23292B2A'/%3E%3C/svg%3E");
  --hex-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M9.985 1.176C11.23.449 12.77.449 14.015 1.176l8 4.666C23.244 6.559 24 7.875 24 9.297v9.406c0 1.422-.756 2.738-1.985 3.455l-8 4.666c-1.245.727-2.785.727-4.03 0l-8-4.666C.756 21.441 0 20.125 0 18.703V9.297c0-1.422.756-2.738 1.985-3.455z' fill='%23AAABA7'/%3E%3C/svg%3E");
  --hex-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 30'%3E%3Cpath d='M9.985 1.176C11.23.449 12.77.449 14.015 1.176l8 4.666C23.244 6.559 24 7.875 24 9.297v9.406c0 1.422-.756 2.738-1.985 3.455l-8 4.666c-1.245.727-2.785.727-4.03 0l-8-4.666C.756 21.441 0 20.125 0 18.703V9.297c0-1.422.756-2.738 1.985-3.455z' fill='none' stroke='%23292B2A' stroke-width='1.3'/%3E%3C/svg%3E");
}

*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 72px); -webkit-text-size-adjust:100% }
body { margin:0; background:var(--surface-page); color:var(--ink); font-family:var(--font-sans); font-weight:450; font-size:18px; line-height:1.4; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'ss01','cv11'; overflow-x:hidden }
img,svg { max-width:100% }
a { color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gray-400) }
a:hover { text-decoration-color:currentColor }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
.dark :focus-visible { outline-color:var(--on-dark) }
::selection { background:var(--gray-900); color:var(--gray-300) }
button { font:inherit; color:inherit; cursor:pointer }
.vh { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.num,[data-num] { font-variant-numeric:tabular-nums lining-nums }

/* ---------- layout ---------- */
.wrap { max-width:1248px; margin:0 auto; padding-inline:var(--gutter) }
.band { padding-block:clamp(64px,8vw,120px) 0 }
.dark { background:var(--gray-1000); color:var(--on-dark) }
.stack { display:flex; flex-direction:column }
.head { display:flex; flex-direction:column; gap:16px; max-width:860px }

/* ---------- type ---------- */
.display, h1, h2, h3 { font-family:var(--font-display); font-weight:400; margin:0; text-wrap:balance }
h1 { font-size:clamp(42px,5.6vw,80px); line-height:1; letter-spacing:-.045em }
h2 { font-size:clamp(32px,3.9vw,55px); line-height:1.05; letter-spacing:-.04em }
h3 { font-size:clamp(26px,2.9vw,40px); line-height:1.1; letter-spacing:-.035em }
h4 { font:500 clamp(19px,1.7vw,24px)/1.3 var(--font-sans); letter-spacing:-.02em; margin:0; text-wrap:balance }
p { margin:0; text-wrap:pretty }
.lead { font-size:clamp(18px,1.6vw,22px); line-height:1.38; letter-spacing:-.015em; color:var(--ink-2); max-width:62ch }
.dark .lead { color:var(--on-dark-2) }
.body { font-size:17px; line-height:1.5; color:var(--ink-2) }
.small { font-size:14px; line-height:1.45; color:var(--ink-2) }
.dark .body, .dark .small { color:var(--on-dark-2) }
.label { font-size:12px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--ink-2) }
.dark .label { color:var(--on-dark-3) }
.mono { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2) }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums }
.eyebrow::before { content:""; width:12px; height:14px; background:var(--hex) center/contain no-repeat; flex:none }
.dark .eyebrow { color:var(--on-dark-3) }
.dark .eyebrow::before { background-image:var(--hex-light) }
.hexlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.hexlist li { position:relative; padding-left:24px; font-size:16px; line-height:1.45; color:var(--ink-2) }
.hexlist li::before { content:""; position:absolute; left:0; top:.32em; width:11px; height:13px; background:var(--hex-light) center/contain no-repeat }
.hexlist li.strong { color:var(--ink); font-weight:500 }
.hexlist li.strong::before { background-image:var(--hex) }
.dark .hexlist li { color:var(--on-dark-2) }

/* ---------- controls ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; text-decoration:none; font:500 16px/18px var(--font-sans); letter-spacing:-.02em; border-radius:var(--r-8); padding:12px 22px; border:1px solid transparent; transition:background .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out) }
.btn.s { font-size:14px; padding:7px 12px }
.btn.ink { background:var(--gray-900); color:var(--gray-100); border-color:var(--gray-900) }
.btn.ink:hover { background:var(--gray-800); border-color:var(--gray-800) }
.btn.light { background:var(--gray-100); color:var(--gray-1000); border-color:var(--gray-100) }
.btn.light:hover { background:var(--gray-200); border-color:var(--gray-200) }
.btn.line { background:transparent; color:var(--ink); border-color:var(--gray-500) }
.btn.line:hover { border-color:var(--ink); background:rgba(41,43,42,.04) }
.dark .btn.line { color:var(--on-dark); border-color:var(--gray-500) }
.dark .btn.line:hover { border-color:var(--gray-300); background:var(--gray-900) }
.btn.ghost { background:transparent; color:var(--ink); padding-inline:10px }
.btn.ghost:hover { background:rgba(41,43,42,.06) }
.btn[aria-pressed="true"] { background:var(--gray-900); color:var(--gray-100); border-color:var(--gray-900) }
.seg { display:inline-flex; gap:4px; padding:4px; background:var(--gray-200); border-radius:var(--r-8) }
.seg .btn { padding:6px 12px; font-size:14px; border:0 }
.arrow { text-decoration:none; font-weight:500; display:inline-flex; gap:6px; align-items:center }
.arrow::after { content:"→"; transition:transform .2s var(--ease) }
.arrow:hover::after { transform:translateX(3px) }

/* status pill: form encodes state (solid dot = in place, ring = in progress, dashed = next / in design) */
.pill { display:inline-flex; align-items:center; gap:6px; padding:2px 8px 2px 7px; border-radius:var(--r-4); font:500 11.5px/1.5 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; border:1px solid var(--gray-500); color:var(--gray-1000); background:var(--gray-200) }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--gray-900) }
.pill.prog::before { background:transparent; border:1.5px solid var(--gray-700) }
.pill.next { background:transparent; border-style:dashed }
.pill.next::before { background:transparent; border:1.5px dashed var(--gray-700) }
.pill.target { background:var(--sky-100); border-color:var(--sky-400); color:var(--sky-1000) }
.pill.target::before { background:var(--sky-1000) }
.pill.plain::before { display:none }
.dark .pill { background:transparent; color:var(--on-dark-2); border-color:var(--gray-600) }
.dark .pill::before { background:var(--on-dark-2) }

/* ---------- header ---------- */
.hdr { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--gray-1000); color:var(--gray-100); border-bottom:1px solid var(--gray-800) }
.hdr .wrap { height:var(--hdr); display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--gray-100); flex:none }
.brand svg { width:28px; height:auto; display:block }
.brand span { font-size:15px; letter-spacing:.08em; font-weight:500 }
.nav { display:flex; flex-wrap:wrap; gap:6px clamp(14px,1.6vw,26px); align-items:center; justify-content:center; min-width:0 }
.nav a { font-size:15px; line-height:1; letter-spacing:-.01em; color:var(--gray-300); text-decoration:none; white-space:nowrap; padding:6px 0; border-bottom:1px solid transparent }
.nav a:hover { color:var(--gray-100) }
.nav a[aria-current="page"] { color:var(--gray-100); border-bottom-color:var(--gray-500) }
.hdr-act { display:flex; align-items:center; gap:8px; flex:none }
.hdr-act .btn.ghost { color:var(--gray-300) }
.hdr-act .btn.ghost:hover { color:var(--gray-100); background:var(--gray-900) }
.menu-btn { display:none; background:transparent; border:1px solid var(--gray-600); color:var(--gray-100); border-radius:var(--r-8); padding:7px 12px; font-size:14px }
.sheet { display:none }
@media (max-width:980px) {
  .nav, .hdr-act .btn.ghost { display:none }
  .menu-btn { display:inline-flex }
  .sheet { position:fixed; inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 auto 0; z-index:39; background:var(--gray-1000); border-bottom:1px solid var(--gray-800); padding:8px var(--gutter) 20px }
  .sheet.open { display:block }
  .sheet a, .sheet button { display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--gray-800); color:var(--gray-100); text-decoration:none; font-size:18px; padding:14px 0 }
}
@media (max-width:420px) { .hdr-act .btn.light { padding:7px 10px; font-size:14px } .brand span { display:none } }

/* ---------- hero ---------- */
.hero { padding-block:clamp(48px,6.5vw,104px) clamp(36px,4.5vw,64px) }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,4vw,64px); align-items:center }
.hero-copy { display:flex; flex-direction:column; gap:clamp(20px,2.2vw,30px) }
.hero h1 span { display:block }
.hero .lead { max-width:36ch; color:var(--on-dark-2) }
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center }
.hero-mark { width:100%; max-width:540px; margin:0 auto; aspect-ratio:4/3; border-radius:var(--r-24); background-image:radial-gradient(circle,var(--gray-700) 1px,transparent 1.3px); background-size:24px 24px; background-position:12px 12px; display:grid; place-items:center }
.hero-mark svg { width:86%; height:auto; overflow:visible }
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:clamp(36px,4.5vw,64px) }
.fact { display:flex; flex-direction:column; gap:6px; padding-top:16px; border-top:1px solid var(--gray-700) }
.fact b { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-3); font-weight:500 }
.fact span { font-size:16px; line-height:1.4; color:var(--gray-100) }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr } .hero-mark { max-width:420px } .facts { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px) { .facts { grid-template-columns:1fr } }

/* ---------- proof strip (asset partner record) ---------- */
.proof { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:stretch; padding:clamp(28px,3vw,40px) 0; border-bottom:1px solid var(--gray-900) }
.proof-rec { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 24px; align-items:start }
.proof-rec .tag { grid-column:1/-1; font:500 11px/1.5 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.stat { display:flex; flex-direction:column; gap:4px }
.stat strong { font-family:var(--font-display); font-weight:300; font-size:clamp(34px,3.4vw,48px); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums lining-nums }
.stat span { font-size:14px; line-height:1.35; color:var(--ink-2) }
.proof-mkt { display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding-left:clamp(20px,2.5vw,40px); border-left:1px solid var(--gray-400) }
.proof-note { grid-column:1/-1; font-size:13px; line-height:1.45; color:var(--ink-2) }
@media (max-width:980px) { .proof { grid-template-columns:1fr } .proof-mkt { border-left:0; padding-left:0; border-top:1px solid var(--gray-400); padding-top:20px } }
@media (max-width:720px) { .proof-rec { grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---------- the five-step flow ---------- */
.flow { position:relative }
.stations { position:sticky; top:calc(var(--hdr) + env(safe-area-inset-top,0px)); z-index:20; background:var(--surface-page); padding:10px 0 12px; border-bottom:1px solid var(--gray-400); margin-top:clamp(24px,3vw,40px) }
.stations .brk { display:grid; grid-template-columns:2fr 3fr; gap:8px; margin-bottom:6px }
.stations .brk span { font:500 10.5px/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); border-top:1px dashed var(--gray-500); padding-top:5px }
.stations ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px }
.st { min-width:0; display:flex; gap:10px; align-items:center; padding:6px 10px 6px 8px; border-radius:var(--r-14); border:1px solid var(--gray-400); background:transparent; text-align:left; width:100%; transition:background .25s var(--ease-out),border-color .25s var(--ease-out) }
.st:hover { border-color:var(--gray-900) }
.st[aria-current="step"] { background:var(--white); border-color:var(--gray-900) }
.st svg { width:28px; height:28px; flex:none }
.st .t { display:flex; flex-direction:column; gap:1px; min-width:0 }
.st .t small { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.st .t b { font-size:15px; line-height:1.2; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.flow-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(28px,4vw,72px); align-items:start }
.flow-steps { display:flex; flex-direction:column }
.fstep { min-height:clamp(420px,78vh,760px); display:flex; flex-direction:column; justify-content:center; gap:16px; padding:48px 0; opacity:.38; transition:opacity .45s var(--ease-out) }
.fstep.on { opacity:1 }
.fstep:first-child { min-height:clamp(380px,62vh,640px) }
.fstep .who { font:500 11px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.fstep h3 { max-width:18ch }
.fstep .chips { display:flex; flex-wrap:wrap; gap:6px }
.chip { display:inline-flex; align-items:center; padding:5px 10px; border-radius:var(--r-4); border:1px solid var(--gray-400); background:var(--gray-100); font-size:13.5px; line-height:1.3; color:var(--ink) }
.fstep .more { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:15px }
.flow-fig { position:sticky; top:calc(var(--hdr) + 112px); height:min(600px,calc(100vh - var(--hdr) - 136px)); min-height:420px; border-radius:var(--r-24); background:var(--gray-200); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:16px 16px; background-position:6px 6px; overflow:hidden; margin-block:24px }
.flow-fig svg { position:absolute; inset:0; width:100%; height:100% }
.flow-fig .cap { position:absolute; left:18px; bottom:14px; right:18px; display:flex; justify-content:space-between; gap:12px; font:500 11px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); pointer-events:none }
.fstep .fig-inline { display:none }
.flow-end { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 32px; align-items:center; padding:28px 0; border-top:1px solid var(--gray-900); border-bottom:1px solid var(--gray-900); margin-top:24px }
.st-now { display:none }
@media (max-width:900px) {
  /* phones: short brackets over the two groups, and the step in view named under the icons */
  .stations .brk { gap:4px; margin-bottom:5px }
  .stations .brk i { display:none }
  .st-now { display:flex; align-items:baseline; gap:8px; margin:8px 0 0; min-width:0; font-size:15px; line-height:1.3 }
  .st-now .k { flex:none; font:500 10.5px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
  .st-now b { font-weight:500; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .st-now .n { margin-left:auto; flex:none; font:500 11px/1.4 var(--font-mono); color:var(--ink-2) }
  .stations ol { gap:4px }
  .st { justify-content:center; padding:6px 4px; border-radius:var(--r-8) }
  .st .t { display:none }
  .flow-grid { grid-template-columns:1fr }
  .flow-fig { display:none }
  .fstep { min-height:0; opacity:1; padding:36px 0; border-bottom:1px solid var(--gray-400) }
  .fstep:first-child { min-height:0 }
  .fstep .fig-inline { display:block; position:relative; aspect-ratio:600/470; border-radius:var(--r-14); background:var(--gray-200); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:14px 14px; overflow:hidden }
  .fstep .fig-inline svg { position:absolute; inset:0; width:100%; height:100% }
  .flow-end { grid-template-columns:1fr }
}

/* ---------- what you hold (asset layers) ---------- */
.layers { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px); align-items:center }
.lcard { position:relative; background:var(--white); border:1px solid var(--gray-400); border-radius:var(--r-24); padding:clamp(20px,3vw,34px); display:flex; flex-direction:column; gap:16px }
.lcard .top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.lrows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.lrow { display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--gray-900); transition:opacity .6s ease,transform .6s ease }
.lrow:last-child { border-bottom:1px solid var(--gray-900) }
.lrow.pre { opacity:0; transform:translateX(14px) }
.lrow .n { width:28px; height:32px; flex:none; background:var(--hex-o) center/contain no-repeat; display:grid; place-items:center; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums }
.lrow .n.sq { background:none } .lrow .n.sq i { width:24px; height:24px; border:1px solid var(--gray-900); border-radius:6px; display:grid; place-items:center; font-style:normal }
.lrow .c { display:flex; flex-direction:column; gap:6px; min-width:0 }
.lrow h4 { font-size:clamp(19px,1.7vw,23px) }
.lrow p { font-size:16px; line-height:1.45; color:var(--ink-2) }
.lines { position:absolute; inset:0; pointer-events:none; overflow:visible }
@media (max-width:900px) { .layers { grid-template-columns:1fr } .lines { display:none } }

/* ---------- products ---------- */
.prods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch }
.prod { background:var(--gray-200); border-radius:var(--r-24); padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column; gap:18px; border:1px solid transparent }
.prod.next { background:transparent; border:1px dashed var(--gray-500) }
.prod .ph { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.prod .ph svg { width:56px; height:56px; flex:none }
.prod .idx { font:500 11px/1.4 var(--font-mono); letter-spacing:.1em; color:var(--ink-2) }
.prod h3 { font-size:clamp(28px,2.6vw,36px) }
.prod .tagline { font-size:17px; line-height:1.4; color:var(--ink); font-weight:500; min-height:2.8em }
.prod dl { margin:0; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--gray-400); border-radius:var(--r-14); overflow:hidden }
.prod.next dl { background:var(--gray-100) }
.prod dl div { padding:11px 16px; display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--gray-300) }
.prod dl div:first-child { border-top:0 }
.prod dt { font:500 10.5px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.prod dd { margin:0; font-size:15px; line-height:1.4; color:var(--ink) }
.prod .pfoot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15px }
.opens { display:flex; align-items:center; gap:12px; margin-top:18px; font-size:15px; color:var(--ink-2) }
.opens::before { content:""; flex:1; border-top:1px dashed var(--gray-500); order:2 }
.opens span { order:1 } .opens b { order:3; font-weight:500; color:var(--ink) }
.held { display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 32px; align-items:center; margin-top:24px; padding:24px; border-radius:var(--r-24); background:var(--gray-100); border:1px solid var(--gray-400) }
.held svg { width:min(320px,100%); height:auto }
@media (max-width:980px) { .prods { grid-template-columns:1fr } .prod .tagline { min-height:0 } .held { grid-template-columns:1fr } }

/* ---------- exit ---------- */
.exit { margin-top:clamp(64px,8vw,120px); padding-block:clamp(64px,8vw,120px) clamp(56px,6vw,96px) }
.exit-grid { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:16px; align-items:stretch; margin-top:clamp(28px,3vw,48px) }
.ncard { border:1px solid var(--gray-700); border-radius:var(--r-24); padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; gap:16px }
.ncard svg { width:72px; height:auto }
.ladder { background:var(--gray-300); color:var(--ink); border-radius:var(--r-24); padding:clamp(16px,2vw,24px); display:flex; flex-direction:column; gap:12px }
.ladder .top { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center }
.figbox { position:relative; width:100%; border-radius:var(--r-14); overflow:hidden; background:var(--gray-300); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:16px 16px }
.figbox svg { display:block; width:100%; height:auto }
.figbox .replay { position:absolute; right:10px; bottom:10px; background:var(--gray-100); color:var(--ink); border:1px solid var(--gray-400); border-radius:var(--r-8); padding:5px 10px; font-size:13px }
.figbox .replay:hover { border-color:var(--gray-900) }
.rules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px }
.rules > div { border-top:1px solid var(--gray-600); padding-top:14px; display:flex; flex-direction:column; gap:6px }
.rules b { font-weight:500; color:var(--on-dark); font-size:16px }
.quote { font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.4vw,34px); line-height:1.2; letter-spacing:-.03em; color:var(--on-dark); max-width:28ch; margin:clamp(40px,5vw,72px) 0 0; text-wrap:balance }
@media (max-width:900px) { .exit-grid { grid-template-columns:1fr } .rules { grid-template-columns:1fr } }

/* ---------- trust ---------- */
.parties { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.party { display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:var(--r-14); background:var(--gray-100); border:1px solid var(--gray-400) }
.party svg { width:34px; height:38px; flex:none }
.party .t { display:flex; flex-direction:column; gap:2px; min-width:0 }
.party small { font:500 10.5px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.party b { font-size:17px; font-weight:500 }
.price { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr); gap:16px; margin-top:12px }
.price > div { border-top:3px solid var(--gray-900); padding-top:10px; display:flex; flex-direction:column; gap:3px }
.price small { font:500 10.5px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.price b { font-size:17px; font-weight:500 }
.price span { font-size:14px; line-height:1.4; color:var(--ink-2) }
.price .dk { background:var(--gray-900); color:var(--gray-100); border-radius:var(--r-8); padding:14px 16px; border-top:0; font-weight:500; font-size:16px; line-height:1.35; justify-content:center }
@media (max-width:980px) { .parties { grid-template-columns:repeat(2,minmax(0,1fr)) } .price { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px) { .parties, .price { grid-template-columns:1fr } }

/* ---------- learn teaser / track cards ---------- */
.tracks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.track { position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(20px,2.4vw,28px); border-radius:var(--r-24); background:var(--gray-200); text-decoration:none; color:var(--ink); border:1px solid transparent; transition:border-color .2s var(--ease-out),background .2s var(--ease-out) }
.track:hover { border-color:var(--gray-900); background:var(--gray-100) }
.track svg { width:100%; height:auto; border-radius:var(--r-14); background:var(--gray-300); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:14px 14px }
.track .meta { display:flex; justify-content:space-between; gap:12px; font:500 11px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
.track ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--ink-2) }
.track ul li::before { content:"·  "; color:var(--gray-500) }
.track .go { margin-top:auto; font-weight:500; font-size:16px }
@media (max-width:980px) { .tracks { grid-template-columns:1fr } }

/* ---------- access ---------- */
.access { margin-top:clamp(56px,7vw,96px); background:var(--sand); color:var(--gray-900); border-radius:var(--r-24); padding:clamp(24px,3.5vw,44px); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px 48px; align-items:center }
.access p { color:var(--gray-900) }
.access .acts { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center }
.copy { display:inline-flex; align-items:center; gap:10px; font:500 15px/1.3 var(--font-mono); padding:8px 8px 8px 12px; border:1px solid rgba(41,43,42,.35); border-radius:var(--r-8); user-select:all }
.copy button { border:0; background:var(--gray-900); color:var(--gray-100); border-radius:6px; font:500 12px/1 var(--font-sans); padding:7px 9px; user-select:none }
@media (max-width:900px) { .access { grid-template-columns:1fr } }

/* ---------- footer ---------- */
.foot { padding:0 0 32px }
.foot .wrap > div:first-child { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding-top:32px; border-top:1px solid var(--gray-800) }
.foot .col { display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.45; align-items:flex-start }
.foot .col > b { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-400); font-weight:500 }
.foot a, .foot button { color:var(--gray-100); text-decoration:none; background:none; border:0; padding:0; font-size:14px; text-align:left }
.foot a:hover, .foot button:hover { text-decoration:underline }
.foot .dim { color:var(--gray-400) }
.foot .legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:28px; padding-top:16px; border-top:1px solid var(--gray-800); font-size:13px; line-height:1.5; color:var(--gray-400) }
.foot .legal span:last-child { max-width:86ch }
.foot .col span { overflow-wrap:anywhere }
@media (max-width:900px) { .foot .wrap > div:first-child { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px) { .foot .col:last-child { grid-column:1/-1 } }

/* ---------- status ledger drawer ---------- */
.ledger { position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end }
.ledger[hidden] { display:none }
.ledger .scrim { position:absolute; inset:0; background:rgba(30,31,30,.55); border:0 }
.ledger aside { position:relative; width:min(100%,500px); height:100%; background:var(--gray-100); color:var(--ink); border-left:1px solid var(--gray-900); display:flex; flex-direction:column; animation:slide .32s var(--ease) }
@keyframes slide { from { transform:translateX(24px); opacity:0 } }
.ledger header { display:flex; flex-direction:column; gap:12px; padding:calc(20px + env(safe-area-inset-top,0px)) 24px 16px; border-bottom:1px solid var(--gray-900) }
.ledger header .row { display:flex; justify-content:space-between; align-items:center; gap:12px }
.ledger h2 { font-size:26px; line-height:1.1; letter-spacing:-.03em }
.ledger .key { display:flex; flex-wrap:wrap; gap:6px 12px }
.ledger .scroll { overflow:auto; padding:0 24px 32px }
.ledger h5 { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-weight:500; padding:22px 0 8px }
.ledger .li { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--gray-300); font-size:15px; line-height:1.4 }
.ledger .li span { text-wrap:pretty }

/* ---------- figure panels (In depth, Learn) ---------- */
.panel { position:relative; border-radius:var(--r-14); background:var(--gray-300); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:16px 16px; background-position:6px 6px; border:1px solid var(--gray-400); overflow:hidden }
.panel svg { display:block; width:100%; height:auto }
.panel .replay { position:absolute; right:12px; bottom:12px; background:var(--gray-100); border:1px solid var(--gray-400); border-radius:var(--r-8); padding:5px 10px; font-size:13px }
.panel .replay:hover { border-color:var(--gray-900) }
.panel.white { background-color:var(--gray-100) }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important }
}

/* ==========================================================================
   IN DEPTH (how-it-works.html)
   ========================================================================== */
.page-hero { padding-block:clamp(40px,5vw,80px) clamp(32px,4vw,56px) }
.page-hero .head { max-width:900px }
.toc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px }
.toc-chips a { font-size:14px; text-decoration:none; color:var(--gray-200); border:1px solid var(--gray-700); border-radius:var(--r-8); padding:7px 12px }
.toc-chips a:hover { border-color:var(--gray-300); color:var(--gray-100) }
.depth { display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start }
.toc { position:sticky; top:calc(var(--hdr) + 32px); display:flex; flex-direction:column; gap:2px; padding-top:clamp(56px,7vw,96px) }
.toc b { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-weight:500; margin-bottom:10px }
.toc a { display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--ink-2); font-size:15px; padding:7px 0 7px 12px; border-left:2px solid var(--gray-400) }
.toc a span { font:500 11px/1 var(--font-mono); color:var(--ink-3) }
.toc a:hover { color:var(--ink) }
.toc a[aria-current="true"] { color:var(--ink); border-left-color:var(--ink); font-weight:500 }
.dsec { padding-top:clamp(56px,7vw,96px); display:flex; flex-direction:column; gap:24px; scroll-margin-top:calc(var(--hdr) + 16px) }
.dsec > .head h2 { font-size:clamp(30px,3.4vw,48px) }
.dsec .status { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.figcap { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:4px }
.figcap div { font-size:14.5px; line-height:1.45; color:var(--ink-2); border-top:1px solid var(--gray-900); padding-top:10px }
.figcap b { color:var(--ink); font-weight:500 }
.figcap.c3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.fold { border-top:1px solid var(--gray-900) }
.fold:last-of-type { border-bottom:1px solid var(--gray-900) }
.fold > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:clamp(18px,1.6vw,21px); font-weight:500; letter-spacing:-.015em }
.fold > summary::-webkit-details-marker { display:none }
.fold > summary .k { display:flex; gap:14px; align-items:baseline; min-width:0 }
.fold > summary .k small { font:500 11px/1 var(--font-mono); letter-spacing:.06em; color:var(--ink-3); flex:none }
.fold > summary .tog { flex:none; width:30px; height:30px; border:1px solid var(--gray-500); border-radius:var(--r-8); display:grid; place-items:center; font-size:17px; line-height:1; transition:background .2s,color .2s,border-color .2s }
.fold > summary .tog i { font-style:normal; display:block; transition:transform .3s var(--ease) }
.fold[open] > summary .tog { background:var(--gray-900); color:var(--gray-100); border-color:var(--gray-900) }
.fold[open] > summary .tog i { transform:rotate(45deg) }
.fold > summary:hover .tog { border-color:var(--ink) }
.fold .inner { padding:4px 0 28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 40px; align-items:start }
.fold .inner.one { grid-template-columns:1fr }
.fold .inner .txt { display:flex; flex-direction:column; gap:14px }
.fold[open] .inner { animation:unfold .45s var(--ease-out) }
@keyframes unfold { from { opacity:0; transform:translateY(6px) } }
.figc { border-radius:var(--r-14); background:var(--gray-100); border:1px solid var(--gray-400); padding:12px; overflow-x:auto }
.figc svg { display:block; width:100%; height:auto; min-width:440px }
.glyphs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px }
.glyphs > div { display:flex; flex-direction:column; gap:6px; text-align:center }
.glyphs svg { width:100%; height:auto; border-radius:var(--r-14); background:var(--gray-300); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:12px 12px }
.glyphs b { font-size:15px; font-weight:500 } .glyphs span { font-size:13px; color:var(--ink-2) }
.buy { display:grid; grid-template-columns:3fr 4fr 2fr; gap:16px }
.buy > div { display:flex; flex-direction:column; gap:10px }
.buy .grp { font:500 10.5px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); border-top:1px dashed var(--gray-500); padding-top:6px }
.buy ol { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px }
.buy li { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:14px; font-weight:500 }
.buy li svg { width:46px; height:52px }
.buy li small { font-size:12px; color:var(--ink-2); font-weight:450 }
.tbl { width:100%; border-collapse:collapse; font-size:15px; line-height:1.45 }
.tbl th, .tbl td { text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-top:1px solid var(--gray-400) }
.tbl th { font:500 11px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border-top:1px solid var(--gray-900) }
.tbl td:first-child { font-weight:500; width:34% }
.gloss { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 24px; margin:0 }
.gloss div { border-top:1px solid var(--gray-400); padding-top:10px }
.gloss dt { font-weight:500; font-size:16px } .gloss dd { margin:4px 0 0; font-size:14.5px; line-height:1.45; color:var(--ink-2) }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.gate-card { display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; padding:18px 20px; border-radius:var(--r-14); border:1px dashed var(--gray-500); background:var(--gray-200) }
.path { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; counter-reset:p }
.path > div { display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r-14); background:var(--gray-100); border:1px solid var(--gray-400) }
.path > div.dash { background:transparent; border-style:dashed }
.path i { font:500 11px/1 var(--font-mono); color:var(--ink-3); font-style:normal }
.path b { font-weight:500; font-size:16px; line-height:1.3 }
.team { list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.team li { display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--gray-400); font-size:15.5px; line-height:1.45 }
.team li b { font-weight:500 }
.ready { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.ready > div { border-radius:var(--r-14); padding:16px 18px; background:var(--gray-100); border:1px solid var(--gray-400); display:flex; flex-direction:column; gap:10px }
.ready > div.prog { background:transparent; border-style:dashed }
.faq details { border-top:1px solid var(--gray-400) }
.faq details:last-child { border-bottom:1px solid var(--gray-400) }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-weight:500; font-size:17px }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; font-weight:400; font-size:20px; line-height:1; color:var(--ink-2); transition:transform .25s var(--ease) }
.faq details[open] summary::after { transform:rotate(45deg) }
.faq details p { padding:0 0 18px; max-width:72ch; font-size:16px; line-height:1.5; color:var(--ink-2) }
@media (max-width:1100px) { .depth { grid-template-columns:1fr } .toc { display:none } }
@media (max-width:900px) { .fold .inner { grid-template-columns:1fr } .figcap, .figcap.c3 { grid-template-columns:1fr 1fr } .glyphs { grid-template-columns:repeat(3,minmax(0,1fr)) } .buy { grid-template-columns:1fr } .gloss { grid-template-columns:1fr 1fr } .path { grid-template-columns:1fr 1fr } .team li { grid-template-columns:1fr; gap:2px } .ready, .cols2 { grid-template-columns:1fr } }
@media (max-width:560px) { .figcap, .figcap.c3, .gloss, .path { grid-template-columns:1fr } .glyphs { grid-template-columns:repeat(2,minmax(0,1fr)) } .buy ol { grid-auto-flow:row; grid-template-columns:repeat(3,1fr) } }

/* in-depth sections: short version (key points beside the figure), then panels */
.dmain { min-width:0 }
.dfig { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:24px clamp(24px,3.5vw,48px); align-items:center }
.dfig .panel { max-width:640px; width:100%; justify-self:end }
.keys { list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.keys li { display:flex; flex-direction:column; gap:4px; padding:14px 0; border-top:1px solid var(--gray-900) }
.keys li:last-child { border-bottom:1px solid var(--gray-400) }
.keys b { font-weight:500; font-size:16px; letter-spacing:-.01em }
.keys span { font-size:15px; line-height:1.45; color:var(--ink-2) }
.fold .inner .panel { width:100% }
.fold .inner.one { gap:18px }
.fold .figc + .txt, .fold .glyphs + .txt { max-width:72ch }
.dsec .head .status { margin-top:-4px }
@media (max-width:900px) { .dfig { grid-template-columns:1fr } .dfig .panel { justify-self:stretch; max-width:none } }

/* ==========================================================================
   LEARN (learn.html): the library, then the lesson player
   ========================================================================== */
.lh-acts { display:flex; flex-wrap:wrap; gap:12px 14px; margin-top:28px }
.library { display:flex; flex-direction:column; gap:clamp(64px,8vw,112px); padding-top:clamp(48px,6vw,88px); scroll-margin-top:var(--hdr) }
.trk { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:28px clamp(28px,4vw,72px); align-items:start; scroll-margin-top:calc(var(--hdr) + 24px) }
.trk-h { position:sticky; top:calc(var(--hdr) + 32px); display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.trk-h h2 { font-size:clamp(36px,3.8vw,54px) }
.trk-meta { display:flex; flex-wrap:wrap; gap:6px 16px; font:500 11.5px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2) }
.trk-prog { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2); width:100%; max-width:320px }
.trk-prog .bar { flex:1; height:4px; background:var(--gray-400); border-radius:2px; overflow:hidden }
.trk-prog .bar i { display:block; height:100%; width:0; background:var(--ink); transition:width .5s var(--ease) }
.trk-l { min-width:0 }
.lgrp { font:500 12px/1.3 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:28px 0 10px }
.lgrp:first-child { margin-top:0 }
.lessons { list-style:none; margin:0; padding:0; border-top:1px solid var(--gray-900) }
.lessons li { border-bottom:1px solid var(--gray-400) }
.lrow-l { display:grid; grid-template-columns:96px 28px minmax(0,1fr) auto 24px; gap:18px; align-items:center; padding:12px 8px 12px 0; text-decoration:none; color:var(--ink); border-radius:var(--r-8); transition:background .2s var(--ease-out) }
.lrow-l:hover { background:var(--gray-200) }
.lthumb { width:96px; aspect-ratio:480/456; border-radius:10px; overflow:hidden; background:var(--gray-300); background-image:radial-gradient(circle,#AAABA7 .7px,transparent 1px); background-size:8px 8px; border:1px solid var(--gray-400) }
.lthumb svg { width:100%; height:100%; display:block }
.ln { font:500 12px/1 var(--font-mono); color:var(--ink-3); text-align:right }
.lt-t { display:flex; flex-direction:column; gap:3px; min-width:0 }
.lt-t b { font-weight:500; font-size:clamp(17px,1.4vw,19px); line-height:1.3; letter-spacing:-.015em }
.lt-t small { font-size:14px; line-height:1.42; color:var(--ink-2); text-wrap:pretty }
.lt-t .lk { font:500 10.5px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.lt-t .lm2 { display:none }
.lmeta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:13px; color:var(--ink-2); white-space:nowrap }
.lstat { width:20px; height:24px; color:var(--ink) }
.lessons li.done .lt-t b::after { content:" ✓"; color:var(--ink-2); font-weight:400 }
.lib-note { max-width:80ch }
.txt > .pill, .path .pill, .ready .pill, .stack > .pill, .in-card .pill { align-self:flex-start }
@media (hover:none) { .in-card .small { display:none } }

.player { padding-block:clamp(20px,3vw,40px) clamp(32px,4vw,56px) }
.pl-top { display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap }
.pl-title { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 }
.pl-title h2 { font-size:clamp(26px,2.8vw,40px) }
.pl-steps { display:flex; flex-wrap:wrap; gap:4px; margin:18px 0 14px }
.pstep { width:32px; height:36px; display:grid; place-items:center; border:0; background:none; padding:0; border-radius:var(--r-8) }
.pstep:hover { background:var(--gray-200) }
.pstep svg { width:19px; height:22px; overflow:visible }
.pstep .o { fill:none; stroke:var(--gray-600); stroke-width:1.3 }
.pstep .f { fill:var(--ink) }
.pstep[aria-current="step"] .o { stroke:var(--ink); stroke-width:2 }
.stage { position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); height:clamp(500px,44vw,620px); background:var(--gray-100); border:1px solid var(--gray-500); border-radius:var(--r-24); overflow:hidden }
.st-text { min-width:0; overflow:auto; padding:clamp(24px,3.2vw,48px); display:flex; flex-direction:column; justify-content:center; gap:18px }
.st-fig { position:relative; min-width:0; border-left:1px solid var(--gray-400); background:var(--gray-300); background-image:radial-gradient(circle,#AAABA7 .9px,transparent 1.2px); background-size:16px 16px; background-position:6px 6px }
.st-fig svg { position:absolute; inset:0; width:100%; height:100% }
.stage.full { grid-template-columns:1fr }
.stage.full .st-fig { display:none }
.stage.full .st-text { padding:clamp(28px,6vw,96px); max-width:1100px }
.rv { opacity:0; transform:translateY(4px); transition:opacity .32s var(--ease-out),transform .32s var(--ease-out) }
.rv.in { opacity:1; transform:none }
.st-h { font-size:clamp(26px,2.4vw,36px); line-height:1.08; letter-spacing:-.035em }
.st-h.big { font-size:clamp(32px,3.3vw,52px); line-height:1.02 }
.stage.full .st-h { font-size:clamp(30px,3.4vw,48px) }
.st-sub { font-size:clamp(16px,1.35vw,19px); line-height:1.45; color:var(--ink-2); max-width:46ch }
.st-sub b { font-weight:500; color:var(--ink) }
.st-foot { margin-top:auto }
.st-box { border:1px solid var(--ink); padding:clamp(18px,2vw,28px); display:flex; flex-direction:column; gap:12px; background:var(--white) }
.st-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.st-list li { position:relative; padding-left:26px; font-size:clamp(16px,1.35vw,19px); line-height:1.38 }
.st-list li::before { content:""; position:absolute; left:0; top:.28em; width:12px; height:14px; background:var(--hex) center/contain no-repeat }
.st-list li small { display:block; margin-top:3px; font-size:15px; color:var(--ink-2) }
.st-close { border-top:1px solid var(--gray-400); padding-top:14px }
.st-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.st-steps li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:start }
.st-steps .n, .st-rows .n { width:28px; height:32px; background:var(--hex-o) center/contain no-repeat; display:grid; place-items:center; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums }
.st-rows .n.sq { background:none } .st-rows .n.sq i { width:24px; height:24px; border:1px solid var(--gray-900); border-radius:6px; display:grid; place-items:center; font-style:normal }
.st-steps .c, .st-rows .c { display:flex; flex-direction:column; gap:3px; min-width:0 }
.st-steps b { font-weight:500; font-size:17px; line-height:1.3 }
.st-steps .c > span { font-size:15px; line-height:1.4; color:var(--ink-2) }
.stage.full .st-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px }
.stage.full .st-steps li { grid-template-columns:1fr; gap:12px }
.st-split { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.st-split > div { border:1px solid var(--gray-400); border-radius:var(--r-8); padding:14px; background:var(--white); display:flex; flex-direction:column; gap:6px; font-size:15px; line-height:1.4; color:var(--ink-2) }
.st-split b { font-size:17px; color:var(--ink); font-weight:500 }
.st-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.st-rows li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:13px 0; border-top:1px solid var(--gray-900) }
.st-rows li:last-child { border-bottom:1px solid var(--gray-900) }
.st-rows small { font:500 10.5px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
.st-rows b { font-weight:500; font-size:clamp(16px,1.3vw,18px); line-height:1.32 }
.xf { display:grid } .xf > span { grid-area:1/1 }
.st-intro, .st-end { position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:clamp(16px,3vw,32px); overflow:auto }
.st-intro { background:rgba(213,214,210,.82); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) }
.in-card { width:min(100%,600px); display:flex; flex-direction:column; gap:14px; background:var(--gray-100); border:1px solid var(--gray-900); border-radius:var(--r-24); padding:clamp(22px,3vw,36px) }
.in-card h3 { font-size:clamp(28px,2.8vw,40px) }
.in-card .acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }
.flagline { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--ink-2); border-top:1px dashed var(--gray-500); padding-top:12px }
.st-end { background:var(--gray-1000); color:var(--on-dark) }
.end-in { display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; max-width:680px }
.end-mark { width:clamp(84px,9vw,120px); height:auto; color:var(--gray-100) }
.end-h { font-family:var(--font-display); font-size:clamp(28px,3vw,44px); line-height:1.06; letter-spacing:-.035em; text-wrap:balance }
.end-d { color:var(--on-dark-3) }
.end-c { color:var(--on-dark-3) }
.st-end .acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.st-end .btn.line { color:var(--on-dark); border-color:var(--gray-600) }
.st-end .btn.line:hover { border-color:var(--gray-300); background:var(--gray-900) }
.pl-ctl { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-top:14px }
.pl-ctl .grp { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.pl-ctl .btn:disabled { opacity:.4; cursor:default }
.pl-ctl #b-play { min-width:96px }
.pl-pos { font-size:14px; color:var(--ink-2) }
.btn.tg[aria-pressed="false"] { color:var(--ink-3) }
.btn.pulse { background:var(--gray-900); color:var(--gray-100); border-color:var(--gray-900) }
.pl-vo { margin-top:20px; display:flex; flex-direction:column; gap:8px; max-width:80ch }
.pl-vo p { font-size:17px; line-height:1.6; color:var(--ink) }
.pl-vo p.follow span { color:var(--gray-500); transition:color .25s var(--ease-out) }
.pl-vo p.follow span.on { color:var(--ink) }
@media (max-width:980px) { .trk { grid-template-columns:1fr } .trk-h { position:static } }
@media (max-width:900px) {
  .stage { grid-template-columns:1fr; height:auto }
  .st-fig { order:-1; border-left:0; border-bottom:1px solid var(--gray-400); aspect-ratio:480/456; max-height:38vh; width:100% }
  .st-h { font-size:clamp(22px,6vw,28px) } .st-h.big { font-size:clamp(26px,7vw,34px) }
  .stage:has(.st-intro:not([hidden])) { min-height:560px }
  .stage:has(.st-end:not([hidden])) { min-height:540px }
  .st-text { justify-content:flex-start; overflow:visible }
  .stage.full { min-height:360px }
  .pl-ctl { position:sticky; bottom:0; z-index:5; background:var(--surface-page); padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px)); margin-top:0; border-top:1px solid var(--gray-400) }
  .pl-ctl .lbl { display:none }
  .pl-ctl .opt .btn { padding-inline:8px }
  .pl-pos { display:none }
  .pl-ctl .grp { gap:6px }
}
@media (max-width:640px) {
  .lrow-l { grid-template-columns:64px minmax(0,1fr) 20px; gap:12px }
  .lthumb { width:64px }
  .lrow-l .ln, .lrow-l .lmeta { display:none }
  .lt-t > small:not(.lk):not(.lm2) { display:none }
  .lt-t .lm2 { display:block; font-size:12.5px }
  .st-split { grid-template-columns:1fr }
}

/* ---------- film: click-to-play poster (gen_common.video_embed) ---------- */
.vid{margin:0;display:grid;gap:12px}
.vid-play,.vid-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-14);background:var(--gray-1000);overflow:hidden}
.vid-play{position:relative;cursor:pointer;color:var(--gray-300);font:inherit;padding:0;
  background-image:radial-gradient(circle,rgba(213,214,210,.14) 1px,transparent 1.4px);background-size:16px 16px;background-color:var(--gray-1000)}
.vid-mark{position:absolute;left:50%;top:44%;width:min(34%,280px);transform:translate(-50%,-50%);opacity:.92}
.vid-btn{position:absolute;left:50%;top:44%;width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--gray-100);color:var(--gray-1000);display:grid;place-items:center;transition:transform 180ms cubic-bezier(.2,0,0,1)}
.vid-btn svg{width:28px;height:28px;margin-left:3px}
.vid-play:hover .vid-btn{transform:translate(-50%,-50%) scale(1.06)}
.vid-play:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vid-t{position:absolute;left:24px;bottom:20px;font-family:var(--font-display);font-size:clamp(20px,2.4vw,32px);letter-spacing:-.02em;color:var(--gray-100)}
.vid figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:14px;color:var(--ink-2)}
.vid figcaption .dim{flex-basis:100%;font-size:12px}
@media (prefers-reduced-motion:reduce){.vid-btn{transition:none}}

/* footer: info packs listed under the deck */
.foot .col a.sub { padding-left:12px; position:relative }
.foot .col a.sub::before { content:""; position:absolute; left:2px; top:.25em; bottom:.25em; border-left:1px solid currentColor; opacity:.35 }