/* ==========================================================================
   Get Tucked — shared stylesheet for / and /methodology
   Design tokens hold the same contrast intent as the app's Theme.swift
   (acid-yellow, 0px radius, mono numerals) on a different, lighter canvas —
   NOT the same hexes. Do not "fix" the site tokens to match the app's; that
   would drop several below AA on this canvas. Each ramp is tuned to its own
   background, lifted to editorial values for long-form reading.
   Fonts are self-hosted (no third-party CDN) — consistent with the
   no-analytics / on-device posture.
   ========================================================================== */

/* ---------- self-hosted fonts (latin subset) ---------- */
@font-face{
  font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/space-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/space-mono-700.woff2') format('woff2');
}
@font-face{
  font-family:'Ojuju'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/ojuju-600.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/newsreader-500.woff2') format('woff2');
}

:root{
  /* --- Site tokens (app values, editorial lift) --- */
  --bg0:#121417; --bg1:#16191D; --bg2:#1C2025; --panel:#1E222A;
  --line:#2A2E34; --line2:#2E333B;
  --fg:#E8E6E1; --fg2:#A6A29B; --fg3:#8A867F;
  --fg4:#5E5A54; /* 2.66:1 on --bg0 — placeholder text only, never real content */
  --acc:#D9F020; --amb:#E8A020;

  --mono:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --measure:66ch;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg0); color:var(--fg);
  font-family:var(--body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--acc); color:#0b0d0f}

a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:color-mix(in srgb, var(--bg0) 82%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line2);
}
.brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--head); font-weight:700; font-size:22px;
  letter-spacing:-0.4px; text-transform:uppercase; color:var(--fg);
}
.brand:hover{text-decoration:none}
.brand b{color:var(--acc)}
.top-cta{
  display:block; line-height:0;
  transition:transform .15s var(--ease-out), filter .15s var(--ease-out);
}
.top-cta .badge{display:block; height:32px; width:auto}
.top-cta:active{transform:scale(.97)}  /* press feedback (works on touch) */

/* ---------- hero (landing) ---------- */
.hero{
  padding:48px 0 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
}
.hero-copy{min-width:0}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--fg3); margin-bottom:20px;
}
.eyebrow .dot{color:var(--acc)}
h1.wordmark{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:clamp(56px, 9vw, 108px); line-height:.92;
  letter-spacing:-2.5px; margin-bottom:8px;
}
.tagline{
  font-family:var(--head); font-weight:600;
  font-size:clamp(22px,4vw,34px); letter-spacing:-.6px;
  color:var(--fg2); margin-bottom:18px;
}
.tagline em{color:var(--fg); font-style:normal}
.hero-sub{
  font-size:clamp(16px,1.5vw,19px); line-height:1.5; color:var(--fg2);
  max-width:36ch; margin-bottom:30px;
}
.hero-cta{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.hero-cta .appstore{margin-top:0}
.hero-stage{min-width:0; width:100%; max-width:440px; justify-self:end}

/* ---------- hero composite ---------- */
.stage{
  position:relative; width:100%;
  background:var(--bg1); border:1px solid var(--line);
  aspect-ratio:1125/1688; overflow:hidden;
}
.stage svg, .stage img, .pose-frame svg, .pose-frame img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
/* the photo sits back so acid reads on top of it */
.stage img, .pose-frame img{object-fit:cover; filter:brightness(.62) saturate(.7)}

/* matte: the app's single acid subject tint (Plan AG) */
.matte{
  fill:var(--acc); fill-opacity:.24;
  stroke:var(--acc); stroke-width:2; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* top -> bottom wipe: crown to ground */
#matteLayer{ clip-path:inset(0 0 100% 0); }
.reveal #matteLayer{ animation:wipe var(--sweep,.9s) var(--ease-io) forwards }
@keyframes wipe{ to{ clip-path:inset(0 0 0 0) } }

/* scan line — horizontal, travelling downward */
#scan{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--acc);
  box-shadow:0 0 12px 2px rgba(217,240,32,.65), 0 0 40px 6px rgba(217,240,32,.25);
  opacity:0;
}
.reveal #scan{ animation:scan var(--sweep,.9s) var(--ease-io) forwards }
@keyframes scan{
  0%{ top:0; opacity:0 }
  6%{ opacity:1 }
  92%{ opacity:1 }
  100%{ top:100%; opacity:0 }
}

/* bones: mirror SkeletonOverlay — measured acid, context fg2, detail fg4
   (quieter each step, so decoration never reads as measurement). Each
   --w window draws on after the last; joints pop as their bone arrives. */
.bone{
  fill:none; stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.bone.measured{stroke:var(--acc)} .bone.context{stroke:var(--fg2)}
.bone.detail{stroke:var(--fg4); stroke-width:1}
.joint{
  stroke:var(--bg0); stroke-width:1; vector-effect:non-scaling-stroke;
  opacity:0; transform-box:fill-box; transform-origin:center;
}
.joint.measured{fill:var(--acc)} .joint.context{fill:var(--fg2)} .joint.detail{fill:var(--fg4)}
:is(.reveal, .pair.in) .bone{
  animation:draw .2s var(--ease-out) forwards;
  animation-delay:calc(var(--bones-at,0s) + var(--w) * .06s);
}
:is(.reveal, .pair.in) .joint{
  animation:pop .15s var(--ease-out) forwards;
  animation-delay:calc(var(--bones-at,0s) + var(--w) * .06s + .12s);
}
.stage{--bones-at:.85s} /* after the wipe lands */
.pair{--bones-at:.35s}  /* after the figures rise in */
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* dimensions: DimensionOverlay's amber engineering lines, a follow-on beat
   after the bones. The dotted line trims via its mask; the end tick, leader
   and box pop as the line lands. */
.dim-line, .dim-tick{stroke:var(--amb); fill:none}
.dim-box{fill:var(--bg0); fill-opacity:.72; stroke:var(--amb)}
.dim-label{
  fill:var(--amb); font-family:var(--mono); font-weight:700;
  text-anchor:middle; dominant-baseline:central;
}
.dim-trim{stroke-dasharray:1; stroke-dashoffset:1}
.dim-pop{opacity:0}
:is(.reveal, .pair.in) .dim-trim{
  animation:draw .3s var(--ease-out) forwards;
  animation-delay:calc(var(--dims-at,0s) + var(--d) * .12s);
}
:is(.reveal, .pair.in) .dim-pop{
  animation:fade .15s var(--ease-out) forwards;
  animation-delay:calc(var(--dims-at,0s) + var(--d) * .12s + .22s);
}
.stage{--dims-at:1.45s}
.pair{--dims-at:.9s}
@keyframes fade{ to{ opacity:1 } }

@keyframes pop{ from{opacity:0; transform:scale(.2)} to{opacity:1; transform:scale(1)} }

.caption{
  font-family:var(--mono); font-size:13px; color:var(--fg3);
  margin-top:14px; letter-spacing:.3px;
}
.cap-row{display:flex; align-items:center; flex-wrap:wrap}

/* ---------- generic section ---------- */
section.block{padding:64px 0; border-top:1px solid var(--line2)}
.lead{
  font-size:clamp(20px,2.6vw,26px); line-height:1.55;
  max-width:var(--measure); color:var(--fg);
}
.lead .no{color:var(--fg3)}
.sec-label{
  font-family:var(--mono); font-size:12px; letter-spacing:3px;
  text-transform:uppercase; color:var(--acc); margin-bottom:22px;
}
h2{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,6vw,60px); line-height:1.02; text-wrap:balance;
  letter-spacing:-1.2px; margin-bottom:24px;
}
p.body{max-width:var(--measure); color:var(--fg2); margin-bottom:18px}
p.body strong{color:var(--fg)}
p.body em{color:var(--fg); font-style:italic}

/* ---------- noise floor readout ---------- */
.floor{
  background:var(--bg1); border:1px solid var(--line);
  max-width:640px; overflow:hidden;
}
.floor .row{
  display:grid; grid-template-columns:1fr auto;
  font-family:var(--mono); font-size:15px;
  padding:24px 22px; border-bottom:1px solid var(--line2);
  color:var(--fg2);
}
.floor .row .v{color:var(--fg); font-variant-numeric:tabular-nums}
.floor .verdict{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; background:var(--bg2);
}
.floor .verdict .label{
  font-family:var(--mono); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--fg3);
}
.floor .verdict .val{
  font-family:var(--mono); font-weight:700; font-size:20px;
  letter-spacing:1.5px; color:var(--amb);
}
.floor-cap{font-family:var(--mono); font-size:13px; color:var(--fg3); margin-top:16px}

/* ---------- so-what calculator (Plan S3) ---------- */
.sowhat{
  background:var(--bg1); border:1px solid var(--line);
  max-width:960px; padding:28px 26px;
}
.sowhat input[type=range]{
  width:100%; accent-color:var(--acc); display:block; margin-bottom:12px;
}
.sowhat-anchors{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:12px; color:var(--fg3);
  margin-bottom:22px;
}
.sowhat-anchors span{display:flex; flex-direction:column; max-width:33%}
.sowhat-anchors .a-mid{align-items:center; text-align:center}
.sowhat-anchors .a-hi{align-items:flex-end; text-align:right}
.sowhat-anchors i{font-style:normal; color:var(--fg3); margin-top:3px}
.sowhat-out{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
  padding-top:18px; border-top:1px solid var(--line2);
}
.tag-est{
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:#0b0d0f; background:var(--acc); padding:3px 6px; letter-spacing:.5px;
}
.sowhat-range{
  font-family:var(--mono); font-weight:700; font-size:26px; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.sowhat-sub{font-family:var(--mono); font-size:14px; color:var(--fg2)}
.sowhat-fine{
  font-family:var(--mono); font-size:14px; color:var(--fg3); margin-top:16px;
  line-height:1.65; max-width:52ch;
}
.sowhat-fine strong{color:var(--fg)}

/* the physics behind the slider (Plan AB6) — same term the app changes
   (aero) reads acid, the term it can't (rolling) reads dim, on both the
   landing slider and the methodology formula panel below */
.f-aero{color:var(--acc)}
.f-roll{color:var(--fg3)}
.sowhat-formula{
  font-family:var(--mono); font-weight:700; font-size:clamp(16px,1.9vw,19px);
  color:var(--fg2); margin-bottom:18px; letter-spacing:.2px;
}

/* two-column-on-wide (Plan AC1): the panel under-used the column at
   640px; wide screens spend the width on a bigger payoff readout and a
   sane track length rather than a stretched slider track */
.sowhat-body{display:flex; flex-direction:column}
.sowhat-left{min-width:0}
@media (min-width:720px){
  .sowhat-body{flex-direction:row; align-items:center; gap:44px}
  .sowhat-left{flex:1 1 auto}
  .sowhat-out{
    flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:8px;
    padding-top:0; border-top:none; border-left:1px solid var(--line2);
    padding-left:36px;
  }
  .sowhat-range{font-size:clamp(32px,3.2vw,44px)}
}

/* ---------- proof strip (what it looks like) ---------- */
.shots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  max-width:860px; margin-top:8px;
}
.shot{margin:0}
.pair{grid-template-columns:repeat(2,1fr)}
.pose-frame{position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg1); border:1px solid var(--line)}
.shot-frame{
  position:relative; aspect-ratio:600/1234; background:var(--bg1); border:1px solid var(--line); overflow:hidden;
}
.shot-frame img{width:100%; height:100%; object-fit:cover; display:block}
.shot-alt img{position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease-out)}
.shot-swap[aria-pressed="true"] .shot-alt img{opacity:1}
.shot-swap{display:block; width:100%; padding:0; cursor:pointer; font:inherit}
.shot-cap{
  font-family:var(--mono); font-size:13px; color:var(--fg2);
  margin-top:14px; line-height:1.5;
}
.shot-cap b, .fig-cap b{color:var(--acc); margin-right:8px; font-weight:700}

/* FIG/TABLE captions: a 1 px rule draws left to right when the caption's section enters (.in);
   the hero caption has no .in ancestor, so it draws after the wipe lands. */
.fig-cap::before{
  content:""; display:block; height:1px; background:var(--line); margin-bottom:10px;
  transform-origin:left;
}
.js .fig-cap::before{transform:scaleX(0)}
.js .in .fig-cap::before{transform:scaleX(1); transition:transform .42s cubic-bezier(.2,.6,.2,1) .2s}
.js .hero .fig-cap::before{animation:rule .42s cubic-bezier(.2,.6,.2,1) .9s forwards}
@keyframes rule{ to{ transform:scaleX(1) } }

/* ---------- FAQ (objections) ---------- */
.faq{
  display:grid; grid-template-columns:1fr 1fr; gap:0 52px;
  max-width:900px; margin-top:8px;
}
.qa{padding:22px 0; border-top:1px solid var(--line2)}
.qa h3{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:21px; letter-spacing:-.3px; color:var(--fg); margin-bottom:8px;
}
.qa p{color:var(--fg2); font-size:16px; line-height:1.55; max-width:46ch}
.qa p a{border-bottom:1px solid var(--acc)}
.qa p a:hover{text-decoration:none; color:var(--acc)}

/* ---------- get it (what you get + where) ---------- */
.get-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
}
.get-list{list-style:none}
.get-list li{
  font-family:var(--head); font-weight:600; text-transform:uppercase;
  font-size:clamp(22px,3vw,30px); letter-spacing:-.4px; line-height:1.15;
  color:var(--fg); padding:14px 0 14px 30px; position:relative;
  border-bottom:1px solid var(--line2);
}
.get-list li:first-child{padding-top:0}
.get-list li::before{
  content:""; position:absolute; left:0; top:calc(.62em);
  width:12px; height:12px; background:var(--acc);
}
.get-cta{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.price-line{
  font-family:var(--mono); font-size:14px; color:var(--fg3); letter-spacing:.5px;
}
.price-line .amt{color:var(--fg2); font-weight:700}
.price-foot{font-family:var(--mono); font-size:13px; color:var(--fg3); margin-top:36px}

/* ---------- CTA ---------- */
.appstore{
  display:inline-block; line-height:0; margin-top:8px;
  transition:transform .15s var(--ease-out), filter .15s var(--ease-out);
}
.appstore .badge{display:block; height:58px; width:auto}
.appstore:active{transform:scale(.97)}  /* press feedback (works on touch) */

.methlink{
  display:inline-block; margin-top:28px;
  font-family:var(--head); font-weight:600; font-size:22px;
  letter-spacing:-.3px; color:var(--fg);
  border-bottom:2px solid var(--acc); padding-bottom:3px;
}
.methlink:hover{text-decoration:none; color:var(--acc)}
.methlink .arw{color:var(--acc)}

/* ---------- footer ---------- */
/* Deep blueprint — the IAI maker's mark, borrowed from its own design system
   (tokens/colors.css --blueprint-700) rather than this page's --bg ramp. */
footer{background:#173359; border-top:1px solid #2F5687}
footer .footer-inner{
  /* Specificity must beat .wrap's own padding (incl. its @media overrides) —
     a plain .footer-inner rule loses that fight and silently gets 0 top/bottom. */
  padding-top:66px; padding-bottom:108px;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px 40px;
}
footer p{font-family:var(--mono); font-size:13px; color:#8CA5C4; line-height:1.9}
footer .dads{color:#fff}
.footer-mark{display:flex; align-items:center; gap:18px; flex:none; color:#fff}
.footer-mark .seal{width:56px; height:56px; flex:none}
.footer-mark .cal{display:flex; flex-direction:column; align-items:stretch}
.footer-mark .serif{
  display:block; font-family:'Newsreader', Georgia, serif; font-weight:500; line-height:1;
  font-size:24px; letter-spacing:-.02em; color:#fff; white-space:nowrap;
}
.footer-mark .cal-row{display:flex; align-items:center; margin-top:9px}
.footer-mark .cal-tick{width:1px; height:14px; background:currentColor; flex:none}
.footer-mark .cal-arm{flex:1; display:flex; align-items:center; min-width:10px}
.footer-mark .cal-arm svg{flex:none; width:6px; height:8px}
.footer-mark .cal-fill{flex:1; height:1px; background:currentColor}
.footer-mark .cal-label{
  font-family:'Ojuju', var(--head); font-weight:600; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; padding:0 12px; white-space:nowrap;
}
@media (max-width:768px){
  .footer-inner{flex-direction:column; align-items:flex-start}
  .footer-mark{align-self:flex-end}
}

/* ---------- scroll entrances ----------
   Initial hidden states only apply when JS is present (html.js), so the site
   is complete and static with JS disabled. Motion is fade + short rise +
   staggered cascade — eased, never linear, no bounce. */
.js .enter{opacity:0; transform:translateY(18px)}
.enter.in{opacity:1; transform:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out)}

/* stagger groups: direct children cascade in, per-child delay via --sd (JS).
   Hidden state is keyed on the containers themselves (stable in markup) so
   nothing flashes before site.js runs. */
.js :is(section.block, .doc > section, .floor, .get-list, .shots, .faq, ul.plain, .cites) > *{
  opacity:0; transform:translateY(16px)
}
:is(section.block, .doc > section, .floor, .get-list, .shots, .faq, ul.plain, .cites).in > *{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out) var(--sd,0s), transform .5s var(--ease-out) var(--sd,0s)
}

/* a persistent acid tick marks every section top — structure, not a scroll
   trick, so it's on screen on load and with JS off (no .js/.in gating) */
section.block, .doc > section, .formula-panel{position:relative}
section.block::before, .doc > section::before, .formula-panel::before{
  content:""; position:absolute; top:-2px; left:0; height:3px; width:64px;
  background:var(--acc);
}

/* ==========================================================================
   Methodology page
   ========================================================================== */
.doc{max-width:760px; margin:0 auto; padding:0 24px}
.doc-head{padding:64px 0 8px}
.doc-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--fg3); margin-bottom:20px;
}
h1.doc-title{
  font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:clamp(40px,8vw,76px); line-height:.94; letter-spacing:-1.6px;
  margin-bottom:24px;
}
.doc-intro{font-size:clamp(19px,2.4vw,22px); line-height:1.55; color:var(--fg)}

.doc section{padding:64px 0; border-top:1px solid var(--line2)}
.doc h2{
  font-size:clamp(28px,5vw,44px); letter-spacing:-.8px; margin-bottom:20px;
}
.doc .num-label{color:var(--acc); font-family:var(--mono); font-size:16px;
  letter-spacing:2px; font-weight:700; display:block; margin-bottom:10px}
.doc p{max-width:var(--measure); color:var(--fg2); margin-bottom:22px}
.doc p strong{color:var(--fg)}
.doc p em{color:var(--fg); font-style:italic}
/* lead sentence of each section opens bright, then settles to fg2 */
.doc section > p:first-of-type{color:var(--fg)}
.doc ul.plain{list-style:none; margin:8px 0 16px; max-width:var(--measure)}
.doc ul.plain li{
  padding:12px 0 12px 20px; color:var(--fg2); border-bottom:1px solid var(--line2);
  position:relative;
}
.doc ul.plain li::before{content:""; position:absolute; left:0; top:20px;
  width:8px; height:8px; background:var(--acc)}
.doc ul.plain li strong{color:var(--fg)}

/* disclosure blocks (Layer 2) */
details{
  border:1px solid var(--line); background:var(--panel);
  margin:18px 0; max-width:var(--measure);
}
details summary{
  cursor:pointer; list-style:none; padding:24px;
  font-family:var(--mono); font-size:14px; letter-spacing:.5px;
  color:var(--acc); display:flex; align-items:center; gap:10px;
  user-select:none;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸"; color:var(--acc); transition:transform .2s var(--ease-out)}
details[open] summary::before{transform:rotate(90deg)}
details summary.fun{color:var(--amb)}
details summary.fun::before{color:var(--amb)}
details .disc-body{
  padding:4px 24px 24px; border-top:1px solid var(--line2);
  color:var(--fg2); font-size:16.5px; line-height:1.6;
}
details .disc-body p{color:var(--fg2); margin-bottom:14px; max-width:none}
details .disc-body p:last-child{margin-bottom:0}
details .disc-body strong{color:var(--fg)}
details .disc-body code{
  font-family:var(--mono); font-size:.9em; background:var(--bg2);
  padding:2px 6px; color:var(--fg); white-space:nowrap;
}
details .figure-note{
  display:block; font-family:var(--mono); font-size:12px; color:var(--fg3);
  border-left:2px solid var(--line); padding:6px 0 6px 12px; margin:0 0 14px;
}
/* Slide the disclosure body in instead of snapping. Progressive enhancement:
   where ::details-content / interpolate-size aren't supported the rule is
   dropped and <details> opens instantly, as before (no regression). The
   chevron rotation above already animates in every browser. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{
    block-size:0; opacity:0; overflow:clip;
    transition:block-size .22s var(--ease-io), opacity .22s var(--ease-io),
               content-visibility .22s allow-discrete;
  }
  details[open]::details-content{block-size:auto; opacity:1}
}

/* callout (deliberately-don't) */
.dont{
  border-left:3px solid var(--amb); background:var(--panel);
  padding:16px 20px 16px 24px; margin:12px 0;
}

/* citations */
.cites{list-style:none; max-width:var(--measure)}
.cites li{
  padding:16px 0; border-bottom:1px solid var(--line2);
  color:var(--fg2); font-size:16px;
}
.cites li b{color:var(--fg)}
.cites a{
  font-family:var(--mono); font-size:13px; color:var(--acc);
  overflow-wrap:anywhere;
}
.cites a:hover{text-decoration:underline; text-underline-offset:2px}
.cites .lang{font-family:var(--mono); font-size:12px; color:var(--fg3)}

/* closing CTA on methodology */
.doc-cta{padding:56px 0; border-top:1px solid var(--line2)}
.doc-cta p{color:var(--fg2); margin-bottom:20px; font-size:19px}
.doc-cta .line{
  font-family:var(--mono); font-weight:700; font-size:18px; color:var(--fg);
  letter-spacing:.5px;
}
.doc-cta .line a{color:var(--acc)}

/* the formula, as a teaching graphic (Plan AB6) — static on this page,
   links out to the landing's live slider rather than duplicating it */
.formula-panel{
  background:var(--panel); border:1px solid var(--line);
  max-width:var(--measure); padding:40px 36px; margin:36px 0;
}
.formula-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--fg3); margin-bottom:18px;
}
.formula-bridge{
  font-family:var(--head); font-weight:600; text-transform:uppercase;
  font-size:clamp(18px,2.6vw,24px); letter-spacing:-.2px;
  color:var(--fg); margin-bottom:22px;
}
.formula-eq{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(22px,3.4vw,32px); line-height:1.5;
  letter-spacing:-.5px; margin-bottom:22px;
}
.formula-eq .f-cda{border-bottom:2px solid var(--acc)}
/* bidirectional hover-link (Plan AB, Part 2.3) — hovering (or focusing) a
   glyph in the equation or its matching row in the decoder legend below
   lifts every element sharing that data-term key to white; the resting
   aero-acid / rolling-grey split (above) stays untouched otherwise. */
.formula-eq .term, .formula-legend > div{cursor:default}
.formula-legend > div{outline:none}
.formula-legend > div:focus-visible{outline:1px solid var(--acc); outline-offset:3px}
.formula-eq .term.is-lit,
.formula-legend > div.is-lit dt,
.formula-legend > div.is-lit dd{color:var(--fg)}
.formula-callout{
  font-size:16.5px; line-height:1.55; color:var(--fg2); margin-bottom:26px;
  max-width:52ch;
}
.formula-callout .f-cda{color:var(--acc); font-family:var(--mono); font-weight:700}
.formula-legend{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px 20px; padding-top:22px; border-top:1px solid var(--line2);
  margin-bottom:0;
}
.formula-legend div{display:flex; align-items:baseline; gap:10px}
.formula-legend dt{
  font-family:var(--mono); font-weight:700; font-size:15px; color:var(--fg);
  min-width:1.6em;
}
.formula-legend dd{font-size:14.5px; color:var(--fg3)}
.formula-link{
  display:inline-block; margin-top:26px;
  font-family:var(--mono); font-size:14px; color:var(--fg);
  border-bottom:2px solid var(--acc); padding-bottom:2px;
}
.formula-link:hover{text-decoration:none; color:var(--acc)}

/* ==========================================================================
   Hover micro-interactions (eased, hard-edged; pointer devices only)
   ========================================================================== */
@media (hover:hover){
  .get-list li{transition:color .18s var(--ease-out), padding-left .18s var(--ease-out)}
  .get-list li::before{transition:transform .18s var(--ease-out), width .18s var(--ease-out)}
  .get-list li:hover{padding-left:40px}
  .get-list li:hover::before{width:22px}

  .floor .row, .floor .verdict{transition:background .18s var(--ease-out)}
  .floor .row:hover{background:var(--bg2)}

  details summary{transition:background .18s var(--ease-out), color .18s var(--ease-out)}
  details summary:hover{background:var(--bg2)}

  .methlink .arw{display:inline-block; transition:transform .18s var(--ease-out)}
  .methlink:hover .arw{transform:translateX(7px)}

  .cites li{transition:color .18s var(--ease-out)}
  .cites li:hover{color:var(--fg)}

  /* CTA hover lifts live on pointer devices only, so a tap can't leave the
     badge stuck in the hover state; :active (above) owns touch feedback.
     :hover:active re-asserts the press so it wins over the lift on desktop. */
  .appstore:hover{text-decoration:none; transform:translateY(-2px); filter:brightness(1.04)}
  .appstore:hover:active{transform:scale(.97)}
  .top-cta:hover{text-decoration:none; transform:translateY(-1px); filter:brightness(1.08)}
  .top-cta:hover:active{transform:scale(.97)}
}

/* ==========================================================================
   Responsive — desktop ≥1024 / tablet 768–1023 / mobile <768 / small <420
   ========================================================================== */
@media (max-width:1024px){
  .wrap{padding:0 22px}
  section.block{padding:56px 0}
  .hero{padding:44px 0 36px; gap:40px}
  .shots{gap:16px}
}
@media (max-width:768px){
  .topbar{padding:14px 20px}
  .wrap, .doc{padding-left:20px; padding-right:20px}
  .hero{grid-template-columns:1fr; gap:28px; padding:32px 0 30px}
  .hero-stage{max-width:420px; justify-self:start}
  .hero-sub{max-width:46ch}
  h1.wordmark{letter-spacing:-1.5px}
  section.block{padding:48px 0}
  .get-grid{grid-template-columns:1fr; gap:32px}
  .shots{grid-template-columns:1fr 1fr}
  /* tall phone screens: swipe the strip instead of stacking three */
  .shots:not(.pair){
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(200px,40%);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
  }
  .shots:not(.pair) > .shot{scroll-snap-align:start}
  .faq{grid-template-columns:1fr; gap:0}
  .doc > section{padding:48px 0}
  .doc-head{padding:48px 0 8px}
}
@media (max-width:420px){
  body{font-size:16px}
  .topbar{padding:12px 16px}
  .wrap, .doc{padding-left:16px; padding-right:16px}
  .brand{font-size:19px}
  .top-cta .badge{height:28px}
  h1.wordmark{font-size:clamp(44px,15vw,60px); letter-spacing:-1px}
  .appstore .badge{height:52px}
  .get-list li{font-size:clamp(20px,6.5vw,26px)}
  .shots{grid-template-columns:1fr; max-width:320px}
  .shots:not(.pair){grid-auto-columns:68%; max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .reveal #matteLayer{animation:none; clip-path:inset(0 0 0 0)}
  .reveal #scan{animation:none; opacity:0}
  .bone{stroke-dashoffset:0; animation:none !important}
  .joint{opacity:1; animation:none !important}
  .dim-trim{stroke-dashoffset:0; animation:none !important}
  .dim-pop{opacity:1; animation:none !important}
  .js .enter, .enter.in{opacity:1; transform:none; transition:none}
  .js :is(section.block, .doc > section, .floor, .get-list, .shots, .faq, ul.plain, .cites) > *,
  :is(section.block, .doc > section, .floor, .get-list, .shots, .faq, ul.plain, .cites).in > *{
    opacity:1; transform:none; transition:none}
  .js section.block::before, .js .doc > section::before{transform:scaleX(1); transition:none}
  details::details-content{transition:none}  /* snap open, no height slide */
  .js .fig-cap::before{transform:scaleX(1) !important; transition:none !important; animation:none !important}
}
@media print{
  details{open:true}
  details .disc-body{display:block !important}
  .topbar{display:none}
}