/* v10 audit pass: AA contrast, 44px targets, screen-reader status lines,
   one data source for meter/cards/payoff, no duplicated numbers, OG tags.
   v9 base: speedometer as the live hero instrument, noise as two counter-running
   lanes, prose rebuilt into LP devices (plates, pull-figures, principles).
   Grammar kept: red = hype/air, ink = real, noise caged by red edge,
   slug = sentence-case serif + red square, no lines, no caps tracking.
   Metrics + stories = demo chrome (BUILD SLOT). */
:root{
  --base:#ffffff;
  --ink:#1c1a17;
  --soft:#6b6456;
  /* muted was #9a917f: 3.1:1 on white, below AA. Darkened to clear 4.5:1 */
  --muted:#7a7263;
  --line:#d8cfc0;
  --plate:#faf7f1;
  --red:#862b21;
  --z1:#cdc4b2;
  --z2:#c9a25e;
  --z3:#bf7440;
  --ease:cubic-bezier(0.23,1,0.32,1);
  /* type scale: fluid between phone and desktop, never below the 14px floor */
  --t-fine:14px;                                    /* legal, captions */
  --t-cap:clamp(15px, 14.6px + 0.12vw, 16px);       /* labels, utility, micro */
  --t-body-s:clamp(16.5px, 15.8px + 0.22vw, 18px);  /* secondary body, catch */
  --t-body:clamp(17px, 16.1px + 0.3vw, 19px);       /* body */
  --t-lead:clamp(19px, 17.6px + 0.45vw, 22px);      /* lead statements */
  --t-mid:clamp(20px, 16.6px + 1.05vw, 24px);       /* marquee claims */
  --t-num:clamp(23px, 20.2px + 0.9vw, 28px);        /* counter figures */
  /* spacing: fluid cell padding */
  --p-tight:clamp(12px, 10.5px + 0.45vw, 16px);
  --p-cell:clamp(18px, 15px + 0.9vw, 24px);
  --p-hero:clamp(24px, 16px + 2.4vw, 40px);
  --p-sect:clamp(28px, 18px + 3vw, 48px);
  --p-x:clamp(18px, 12px + 1.8vw, 32px);            /* horizontal gutter */
  --keel:3px;      /* red keel on every pulled-out block */
  --r:3px;         /* one corner radius */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-gutter:stable}
body{
  background:var(--base);color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:0;
}
body.locked{overflow:hidden}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
::selection{background:var(--red);color:#fff}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fill{from{width:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- the rack ---------- */
.rack{
  max-width:2000px;margin:0 auto;
  background:var(--line);
  border:0;border-bottom:1px solid var(--line);
  display:grid;gap:1px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) minmax(240px,1fr);
}
@media(min-width:2000px){.rack{border:1px solid var(--line)}}
.cell{background:var(--base);padding:var(--p-cell) var(--p-x);min-width:0;container-type:inline-size}
.span2{grid-column:span 2}
.span3{grid-column:1 / -1}

/* ---------- the slug: sentence-case serif label + red square, no lines ---------- */
.slug{display:flex;align-items:center;gap:9px}
.slug .t{font-weight:700;font-size:var(--t-cap);color:var(--ink)}
.slug .t em{font-style:italic;color:var(--muted);font-weight:400;font-size:var(--t-cap)}
.slug .sq{width:7px;height:7px;background:var(--red);flex:none}
.slug .sq.live{animation:pulse 2.1s ease-in-out infinite}

/* ---------- identity folio ---------- */
.folio{display:flex;align-items:center;gap:14px}
.folio .fi{font-style:italic;font-size:var(--t-cap);color:var(--soft)}
.folio .fdot{color:var(--red);animation:pulse 2.1s infinite}
.folio-r{justify-content:flex-end}
.folio .up{color:var(--red);font-weight:700;font-style:normal}

/* ---------- hero left: gear logo + nameplate + statement + form ---------- */
.hero-left{padding:var(--p-hero) var(--p-x) calc(var(--p-hero) + 4px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;gap:18px}
.gearbox{width:46px;height:92px;overflow:hidden;flex:none;border-right:3px solid var(--ink)}
.gearbox svg{width:92px;height:92px;display:block}
.gear{transform-origin:50% 50%;animation:spin 18s linear infinite}
.name{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 125;font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.0;letter-spacing:-0.01em;
}
.name .hype{color:var(--red)}
/* the descriptor belongs to the nameplate: indented to the name's left edge,
   led by the brand square, sized to read as a masthead line and not as stray text */
.kick-line{
  display:flex;align-items:center;gap:10px;
  margin:14px 0 0 64px;
  font-size:var(--t-body-s);color:var(--ink);font-style:normal;
}
.kick-line .sq{width:7px;height:7px;background:var(--red);flex:none}
@media (max-width:700px){ .kick-line{margin-left:0} }
.statement{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110;font-weight:800;
  text-transform:uppercase;line-height:1.06;font-size:clamp(1.5rem,2.7vw,2.5rem);
}
.turn{font-size:var(--t-body-s);color:var(--soft);margin-top:16px;line-height:1.55;max-width:34em}

/* ---------- forms ---------- */
.hm-form .row{display:flex;gap:10px;flex-wrap:wrap}
.hm-form input{
  flex:1 1 240px;height:58px;background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  color:var(--ink);font-family:inherit;font-size:var(--t-body-s);padding:0 16px;min-width:0;
}
.hm-form input::placeholder{color:var(--muted)}
.hm-form input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(134,43,33,0.14)}
.hm-form .btn{
  height:58px;padding:0 26px;border:0;border-radius:var(--r);
  background:var(--red);color:#fff;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108;font-weight:800;font-size:var(--t-body-s);
  cursor:pointer;transition:background .18s var(--ease),transform .12s var(--ease);
}
.hm-form .btn:hover{background:#6e2118}
.hm-form .btn:active{transform:scale(0.97)}
.hm-form .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.micro{font-style:italic;font-size:var(--t-cap);color:var(--soft);margin-top:12px}
.hero-form{border-left:var(--keel) solid var(--red);padding-left:20px;margin-top:26px}

/* ---------- hero right: SPEEDOMETER ---------- */
.speedo-cell{border-top:3px solid var(--ink);padding:var(--p-cell) var(--p-x) calc(var(--p-cell) + 8px)}
.speedo-cell .story-t{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108;font-weight:800;
  text-transform:uppercase;font-size:23px;line-height:1.18;margin:14px 0 6px;
  transition:opacity .35s var(--ease);
}
.dial-wrap{max-width:560px;margin:0 auto}
#dial{width:100%;display:block}
.dial-zlbl{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:var(--t-body-s);font-weight:600;opacity:0.9}
.dial-zlbl.on{font-style:normal;font-weight:700;opacity:1}
.speedo-read{text-align:center;margin-top:2px}
.sp-num{
  font-weight:900;font-size:clamp(3.6rem,6.4vw,5.4rem);line-height:1;
  color:var(--red);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
}
.speedo-split{max-width:400px;margin:10px auto 0}
.speedo-cell .story-t.fade{opacity:0.25}
.dial-hint{font-style:italic;font-size:var(--t-cap);color:var(--muted);text-align:center;margin-top:12px}

/* ---------- shared micro instrument bits ---------- */
.mini-lbls{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.mini-lbls .l{font-style:italic;font-size:var(--t-cap);color:var(--soft)}
.mini-lbls .v{font-weight:900;font-size:var(--t-cap);color:var(--red)}
.split{display:flex;height:14px;border-radius:var(--r);overflow:hidden;background:#efe9db}
.split .real{width:30%;background:var(--ink);animation:fill 1.4s .3s var(--ease) backwards}
.split .air{flex:1;background:var(--red)}
.split-cap{display:flex;justify-content:space-between;font-style:italic;font-size:var(--t-fine);color:var(--muted);margin-top:5px}

/* ---------- noise socket: one stream, caged by the red edge ---------- */
.noise-cell{background:var(--plate);border-top:3px solid var(--red);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.noise-foot{font-style:italic;font-size:var(--t-cap);color:var(--muted);margin-top:16px}
/* two lanes running against each other: the loud claims big, the queue small */
.stream{overflow:hidden;white-space:nowrap;margin-top:18px}
.stream > div{display:inline-flex;gap:44px;animation:slide 44s linear infinite;padding-right:44px}
.claim{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110;
  text-transform:uppercase;font-size:var(--t-mid);color:var(--ink);font-weight:800;line-height:1.1;
}
.claim b{color:var(--red)}
.stream-b{overflow:hidden;white-space:nowrap;margin-top:16px}
.stream-b > div{display:inline-flex;gap:34px;animation:slide-rev 56s linear infinite;padding-right:34px}
.qitem{font-style:italic;font-size:var(--t-cap);color:var(--muted)}
.qitem b{font-style:normal;font-weight:700;color:var(--soft)}
@keyframes slide-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- counters ---------- */
.ctr-row{display:grid;gap:18px;margin-top:18px}
.ctr .cl{font-style:italic;font-size:var(--t-cap);color:var(--soft)}
.ctr b{display:block;font-weight:700;font-size:var(--t-num);line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.ctr b i{font-style:normal;color:var(--red)}

/* ---------- reading bench ---------- */
.bench{border-top:3px solid var(--ink)}
.bench-lead{font-size:var(--t-body-s);color:var(--soft);margin:12px 0 16px;line-height:1.5}
.readline{font-size:var(--t-body-s);color:var(--soft)}
.readline b{color:var(--red);font-weight:900}
.readline b.rk{color:var(--ink)}
.readline.clbl{margin-bottom:4px}
.bench-catch{font-style:italic;font-size:var(--t-body-s);line-height:1.55;min-height:3em;color:var(--ink)}
.caret{display:inline-block;width:7px;height:1em;background:var(--red);vertical-align:text-bottom;margin-left:2px;animation:pulse .9s steps(2) infinite}

/* ---------- divider ---------- */
.divider{border-top:3px solid var(--red);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:var(--p-tight) var(--p-x)}
.divider span{font-style:italic;font-size:var(--t-cap);color:var(--soft)}
.divider b{color:var(--ink);font-style:normal;font-weight:700}
.divider.inkline{border-top-color:var(--ink)}

/* ---------- plate + prose (LP scale: air, anchors, short measures) ---------- */
.plate-cell{padding:var(--p-sect) var(--p-x);background:var(--plate)}
/* section heading: its own device, not the small in-cell tag */
.sect-t{display:flex;align-items:flex-start;gap:12px}
.sect-t .t{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108;font-weight:800;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.06;
}
.sect-t .sq{width:10px;height:10px;background:var(--red);flex:none;margin-top:0.5em}
.plate-cell .sub{font-style:italic;font-size:var(--t-cap);color:var(--soft);margin-top:16px;line-height:1.5;max-width:22em}
.prose-cell{padding:var(--p-sect) clamp(var(--p-x), 2.6vw, 52px) calc(var(--p-sect) + 8px)}

.prose-cell > .p-hed{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110;font-weight:800;
  text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.06;margin-bottom:24px;
  color:var(--ink);max-width:none;
}
.prose-cell > p{color:var(--soft);max-width:31em;font-size:var(--t-body);line-height:1.65}
.prose-cell > p + p{margin-top:1.2em}
.prose-cell p b{color:var(--ink);font-weight:700}

/* pull-figures device (S2) */
.pullfacts{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-end;margin:30px 0}
.pf .pf-n{font-weight:900;font-size:clamp(2.6rem,5vw,4.2rem);line-height:0.95;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.pf.ink .pf-n{color:var(--ink)}
.pf.red .pf-n{color:var(--red)}
.pf .pf-l{font-style:italic;font-size:var(--t-cap);color:var(--soft);margin-top:6px}
.pf-cap{flex-basis:100%;font-style:italic;font-size:var(--t-body-s);color:var(--ink)}
.pf-cap b{color:var(--red)}

/* measure plates (S4) */
.mplates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:6px 0 26px}

.mplate{background:var(--plate);border-radius:var(--r);padding:28px 26px}
.mplate .mt{font-weight:900;font-size:var(--t-lead);margin-bottom:14px}
.mplate .mt.red{color:var(--red)}
.mplate p{font-size:var(--t-cap);color:var(--soft);line-height:1.6;margin-top:16px}
.mplate p b{color:var(--ink)}
.scale-chips{display:flex;gap:6px}
.scale-chips span{
  flex:1;padding:9px 0;text-align:center;border-radius:var(--r);
  font-style:italic;font-size:var(--t-cap);color:#fff;
}
.scale-chips .c1{background:var(--z1);color:#575147}
.scale-chips .c2{background:var(--z2);color:#453a26}
.scale-chips .c3{background:var(--z3)}
.scale-chips .c4{background:var(--red);font-style:normal;font-weight:700}
.prose-cell > .indep{font-style:italic;font-size:var(--t-lead);color:var(--ink);max-width:32em;line-height:1.55}
.indep b{color:var(--red)}

/* beat plates (S5) */
.beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:4px}

.beat{background:var(--plate);border-radius:var(--r);padding:26px 24px}
.beat .bt{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108;font-weight:800;
  font-size:var(--t-lead);line-height:1.2;
}
.beat .bt::after{content:"";display:inline-block;width:7px;height:7px;background:var(--red);margin-left:9px}
.beat p{font-size:var(--t-cap);color:var(--soft);margin-top:9px;line-height:1.55}

/* principles (S6): claim on top, the quiet turn underneath, red keel on the left */
.stand{margin-top:10px;max-width:34em}
.stand .pr{border-left:var(--keel) solid var(--red);padding-left:20px}
.stand .pr + .pr{margin-top:26px}
.stand .pr .claim-l{font-weight:700;font-size:var(--t-lead);line-height:1.4;color:var(--ink)}
.stand .pr .turn-l{font-style:italic;font-size:var(--t-body-s);line-height:1.5;color:var(--soft);margin-top:6px}

/* ---------- log row ---------- */
.log-cell{overflow:hidden;padding:12px 0}
.log-cell > div{display:inline-flex;white-space:nowrap;gap:52px;animation:slide 60s linear infinite;padding-right:52px}
.log-cell span{font-style:italic;font-size:var(--t-cap);color:var(--soft)}
.log-cell b{color:var(--red);font-style:normal;font-weight:700}

/* ---------- S3 · story cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:24px}

.card{
  background:#fff;border:1px solid var(--line);text-align:left;padding:20px;cursor:pointer;
  font-family:inherit;font-size:var(--t-body);color:var(--ink);display:block;width:100%;border-radius:var(--r);
  position:relative;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.card:hover{border-color:var(--red)}
.card:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.card.on{background:var(--plate);border-color:var(--red)}
/* the picked card points down at the panel it feeds */
.card.on::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:9px solid var(--red);
}
.card .ct{
  display:block;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108;font-weight:800;
  text-transform:uppercase;font-size:var(--t-lead);line-height:1.18;
}
.card .cstate{display:block;font-style:italic;font-size:var(--t-cap);color:var(--muted);margin-top:8px;transition:color .18s}
.card.on .cstate{color:var(--red)}

/* ---------- S3 · weigh panel ---------- */
/* internal spacing stays tighter than the gap between the two groups.
   the panel reads as the output of the cards above it: same block, plate ground,
   red keel on the left, no bulkhead between them */
.weigh{margin-top:14px;padding:28px 28px 30px;background:var(--plate);border-left:var(--keel) solid var(--red);border-radius:var(--r)}
.weigh .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,3vw,56px);align-items:start;
}

.weigh .wstory{font-style:italic;font-size:var(--t-cap);color:var(--soft);margin:8px 0 10px}
.weigh .num{
  font-weight:900;font-size:clamp(3.6rem,7vw,6.4rem);line-height:0.9;
  color:var(--red);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
  transition:opacity .3s;
}
.weigh .word{
  font-weight:900;font-size:clamp(1.4rem,2.4vw,2.1rem);color:var(--ink);margin-top:2px;
  opacity:0;transform:translateY(4px) scale(0.97);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.weigh .word.on{opacity:1;transform:none}
.weigh.idle .num{opacity:0.25}
.weigh .instr{max-width:440px}
.weigh .instr .mini-lbls{margin-bottom:5px}
.weigh .instr .split-cap{margin-top:4px}
.weigh .catchline{margin-top:30px;max-width:36em}
.weigh .catchline .clbl{margin-bottom:4px}
.weigh .catchline p{font-style:italic;font-size:var(--t-body-s);line-height:1.55;min-height:2.9em}

/* ---------- S7 · join port ---------- */
.join-cell{
  border-top:3px solid var(--red);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(22px,2.4vw,44px);align-items:center;
  padding:var(--p-sect) var(--p-x) calc(var(--p-sect) + 6px);
}
.join-cell > :first-child{min-width:0}
.join-cell .hm-form{min-width:0}

.join-hed{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:900;
  text-transform:uppercase;line-height:1.04;font-size:clamp(1.8rem,3.6vw,3.2rem);
}
.join-sub{font-style:italic;font-size:var(--t-body-s);color:var(--soft);margin-top:14px;max-width:30em}

/* ---------- footer · the fine print ---------- */
.fine{padding:var(--p-sect) var(--p-x) calc(var(--p-sect) + 4px);background:var(--plate)}
.fine-hed{font-weight:700;font-size:var(--t-lead);margin-bottom:14px}
.fine-hed::after{content:"";display:inline-block;width:7px;height:7px;background:var(--red);margin-left:9px}
.fine-lead{font-style:italic;font-size:var(--t-cap);color:var(--soft);max-width:38em;margin-bottom:18px}
.fine-body{columns:2;column-gap:52px;max-width:74em}

.fine-body p{font-size:var(--t-fine);line-height:1.75;color:var(--soft)}

/* ---------- modal ---------- */
.modal-wrap{
  position:fixed;inset:0;z-index:100;background:rgba(28,26,23,0.55);
  display:flex;align-items:center;justify-content:center;padding:var(--p-x);
}
.modal-wrap[hidden]{display:none}
.modal{
  background:#fff;border-top:4px solid var(--red);border-radius:var(--r);
  max-width:600px;width:100%;padding:36px 34px 32px;position:relative;
  box-shadow:0 24px 70px rgba(28,26,23,0.35);
  max-height:calc(100vh - 2 * var(--p-x));overflow-y:auto;
}
@supports (max-height: 100dvh){
  .modal{max-height:calc(100dvh - 2 * var(--p-x))}
}
/* phone: a bottom sheet is the native shape for this, and it keeps the
   thumb near the field instead of centring the box under the fold */
@media (max-width:700px){
  .modal-wrap{align-items:flex-end;padding:0}
  .modal{
    max-width:none;border-radius:12px 12px 0 0;
    padding:26px var(--p-x) calc(20px + env(safe-area-inset-bottom));
    max-height:88dvh;
    animation:sheet-up .32s var(--ease);
  }
  .modal .mx{top:6px;right:6px}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.modal .mx{
  position:absolute;top:8px;right:8px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--soft);font-family:inherit;
  width:44px;height:44px;border-radius:3px;
}
.modal .mx:hover{color:var(--ink)}
.modal .mx:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.modal-hed{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:900;
  text-transform:uppercase;line-height:1.05;font-size:clamp(1.5rem,3vw,2.2rem);
  padding-right:26px;
}
.modal-sub{font-style:italic;font-size:var(--t-cap);color:var(--soft);margin:12px 0 20px}


/* ======================= ADAPTIVE LAYER =======================
   Components answer to their own container; devices get their own
   interaction model; motion is spent only where it can be seen. */

/* --- device tiers. These sit at the end of the cascade on purpose: they must
   win over the component defaults declared above. --- */
/* mid: two sockets. The instrument, the roar and the strips take the full run;
   section titles keep their own column beside the prose. */
@media (max-width:1180px) and (min-width:701px){
  .rack{grid-template-columns:minmax(0,0.72fr) minmax(260px,1fr)}   /* 42 / 58 */
  .rack > .span2{grid-column:auto}
  .rack > .span3,.rack > .speedo-cell,.rack > .noise-cell{grid-column:1 / -1}
  .prose-cell{padding:var(--p-sect) var(--p-x) calc(var(--p-sect) + 6px)}
  .plate-cell{padding:var(--p-sect) var(--p-x) var(--p-cell)}
  .dial-wrap{max-width:520px}
  .weigh .wrap{gap:40px}
}
/* narrow: one socket per row */
@media (max-width:700px){
  .rack{grid-template-columns:1fr}
  .rack > .span2,.rack > .span3{grid-column:auto}
}

/* --- container queries: the block reflows when its socket is narrow --- */
@container (max-width: 700px){
  .fine-body{columns:1}
  .weigh .wrap{gap:24px}
}
@container (max-width: 620px){
  .pullfacts{gap:26px}
}
/* the counters socket is only a quarter of the rack, so three across always
   broke the labels. Wide enough: label left, figure right, figures sharing a
   right edge. Narrower than that: label над figure, stacked. */
@container (min-width: 300px){
  .ctr-row{gap:16px}
  .ctr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px}
  .ctr .cl{max-width:14em}
  .ctr b{text-align:right;white-space:nowrap}
}
@container (min-width: 900px){
  .beats{gap:26px 44px}
  .stand{max-width:34em}
}
/* no-container-query fallback */
@supports not (container-type: inline-size){
  @media(max-width:700px){ .fine-body{columns:1} }
}

/* --- pointer model: hover affordances only where hover exists --- */
@media (hover: hover) and (pointer: fine){
  .card:hover{border-color:var(--red)}
  .hm-form .btn:hover{background:#6e2118}
  .modal .mx:hover{color:var(--ink)}
}
@media (pointer: coarse){
  /* thumbs need room, and there is no hover to reveal state */
  .card{padding:22px 20px}
  .hm-form input,.hm-form .btn{height:56px}
  .modal .mx{width:48px;height:48px}
  .card .cstate::after{content:" ›";color:var(--red)}
}

/* --- phone: one lane of motion, snap-scrolling cards, compact instrument --- */
@media (max-width: 700px){
  /* motion budget is one lane, but the content stays: the other two stop
     running and read as static lists instead of disappearing */
  .stream > div{animation-duration:34s}
  .stream-b{overflow:visible;white-space:normal;margin-top:14px}
  .stream-b > div{display:block;animation:none;padding:0}
  .stream-b .qitem{display:block}
  .stream-b .qitem + .qitem{margin-top:6px}
  .stream-b .qitem:nth-child(n+5){display:none}   /* the loop copies are for scrolling only */
  .log-cell{overflow:visible;padding:var(--p-cell) var(--p-x)}
  .log-cell > div{display:flex;flex-wrap:wrap;gap:6px 16px;animation:none;padding:0;white-space:normal}
  .log-cell span:nth-child(n+7){display:none}
  /* three short items do not need a scroller: they stack as compact rows, so
     nothing is clipped and the caret can still point at the panel below */
  .cards{grid-template-columns:1fr;gap:8px;margin-top:18px}
  .card{padding:14px 16px}
  .card .ct{font-size:var(--t-body-s)}
  .card .cstate{margin-top:4px}
  .dial-wrap{max-width:420px}
  #dial .tick-5{display:none}                /* thinned to every 10, not removed */
  .dial-zlbl{font-size:15px}
  .noise-foot{margin-top:12px}
  .divider{flex-direction:column;gap:4px}
  .fine-body p{font-size:14px}
}
@media (max-width: 420px){
  #dial .tick-10{stroke-width:1.2}
  .dial-wrap{max-width:340px}
  .speedo-split{max-width:100%}
}

/* --- landscape phone: short viewport, keep the instrument in frame --- */
@media (max-height: 560px) and (orientation: landscape){
  .hero-left{padding:20px var(--p-x)}
  .dial-wrap{max-width:300px}
  .speedo-cell{padding:16px var(--p-x) 20px}
}

/* --- sticky CTA: the phone equivalent of a hero form that scrolled away --- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(255,255,255,0.96);backdrop-filter:blur(8px);
  border-top:var(--keel) solid var(--red);
  padding:12px var(--p-x) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s var(--ease);
}
.sticky-cta.up{transform:none}
.sticky-cta .row{display:flex;gap:10px;align-items:center}
.sticky-cta .line{flex:1 1 auto;min-width:0;font-style:italic;font-size:var(--t-cap);color:var(--soft);line-height:1.3}
.sticky-cta .btn{
  height:48px;padding:0 18px;border:0;border-radius:var(--r);background:var(--red);color:#fff;
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 108;font-weight:800;
  font-size:var(--t-cap);cursor:pointer;flex:0 0 auto;white-space:nowrap;
}
@media (max-width:380px){
  .sticky-cta .line{display:none}          /* below this the button owns the bar */
  .sticky-cta .btn{flex:1 1 auto}
}
@media (max-width: 700px){ .sticky-cta{display:block} body{padding-bottom:84px} }

/* --- motion is paused when it is off screen or the tab is hidden --- */
.paused, .paused *{animation-play-state:paused !important}

/* --- print: the page has to survive paper --- */
@media print{
  .sticky-cta,.modal-wrap,.dial-hint{display:none !important}
  /* every lane keeps its words on paper, just standing still */
  .stream,.stream-b,.log-cell{overflow:visible}
  .stream > div,.stream-b > div,.log-cell > div{display:block;animation:none;white-space:normal;padding:0}
  .claim,.qitem{display:block}
  .stream .claim:nth-child(n+5),.stream-b .qitem:nth-child(n+5),.log-cell span:nth-child(n+7){display:none}
  .rack{max-width:none;border:0;background:none;display:block}
  .cell{border:0 !important;padding:0 0 18px;background:none !important;break-inside:avoid}
  .fine-body{columns:1}
  body{font-size:11pt}
  .name,.statement,.p-hed,.join-hed{color:#000}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}