/* The DBY sales page (/system) in The set (ventures/dby/specs/dby-design-system.md §12; its gap picks in 12.13).
   The shared parts (tokens, header, hero, the three tiles, the trust strip, the steps, the result tile, the sequence
   tile, the price card, the footer, the 1024 to 1439 range and the phone rules) are the home page's
   (../home/home.css), copied so the two pages read as one site; the sales sections are added under them.
   Tokens are §11.1's only. Desktop is drawn on the 1440 grid; 1024 to 1439 draws the same page smaller (the
   inline script in index.html sets --k) with every text size floored at its phone size (§12.1); 1023 and below
   takes the phone rules (§12.11). No dark band anywhere (§12.9). */

@font-face{font-family:"Instrument Sans";src:url(assets/fonts/instrument-sans-wght-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{--white:#ffffff;--cream:#fff4e6;--ink:#2c2030;--ink-soft:#5b4a5a;--gold:#ffc66b;--sun-amber:#f2a54a;--coral:#ff6b5c;
  --line:rgba(44,32,48,.24);--hair:rgba(44,32,48,.12);--g:72px;--k:1}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{background:var(--white)}
body{color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;-webkit-text-size-adjust:100%}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
figure{margin:0}
.nw{white-space:nowrap}
.em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.14em;line-height:.8}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--g)}
.m-only{display:none}
br.m{display:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font:600 15px/1 "Instrument Sans";text-decoration:none}
.skip:focus{left:16px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- header (§12.4) */
.hdr{background:var(--cream)}
.top{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.brand img{height:44px;width:auto;margin-left:-5.6px}   /* the file's built-in clear space hangs outside the column */
.brand span{font:600 21px/1 "Instrument Sans";letter-spacing:-.03em;padding-top:1px}
.nav{display:flex;align-items:center;gap:36px;font:500 16px/1 "Instrument Sans"}
.nav a{text-decoration:none}
.pill{border:1.5px solid var(--ink);border-radius:999px;padding:13px 22px;font-weight:600;text-decoration:none}
.menu{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px;color:var(--ink);background:none;border:0;border-radius:10px;cursor:pointer}
.menu svg{width:26px;height:26px}
.mnav{display:none}

/* ---- type */
.kick{font:600 14px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
h1{font:600 74px/.96 "Instrument Sans";letter-spacing:-.04em;color:var(--ink)}
h1 .h1{display:block;text-wrap:balance}
/* the locked headline's second sentence, set as L4's deck inside the one h1 */
h1 .deck{display:block;font:500 26px/1.28 "Instrument Sans";letter-spacing:-.015em;color:var(--ink);margin-top:26px;text-wrap:balance}
.body{font:400 19px/1.6 "Instrument Sans";color:var(--ink-soft);margin-top:12px}
h2{font:600 44px/1.06 "Instrument Sans";letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.big{font:500 32px/1.3 "Instrument Sans";letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.big em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.005em}
.sm{font:400 19px/1.6 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.micro{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:20px;text-wrap:balance}

/* ---- buttons and links (§12.5) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:999px;
  background:var(--ink);color:var(--white);font:600 17px/1 "Instrument Sans";letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.ghost{font:600 17px/1 "Instrument Sans";color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;white-space:nowrap}
.ctas{display:flex;align-items:center;gap:32px;margin-top:36px}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
.btn:focus-visible,.pill:focus-visible{border-radius:999px}

/* ---- icons and card marks */
.ic{display:inline-flex;width:20px;height:20px;flex:none;color:var(--ink)}
.ic svg{width:100%;height:100%}
.ic-sm{width:18px;height:18px;color:var(--ink-soft)}
.tl{display:inline-flex;align-items:center;gap:10px}
.pay{display:flex;gap:16px;align-items:center}
.pm{display:flex;align-items:center;color:var(--ink-soft)}
.pm svg{display:block;fill:currentColor}

/* ---- the top band and the hero (§12.1, L4 sales) */
.band{background:var(--cream)}
.grid2{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px}
.hero{align-items:center;padding-top:32px;padding-bottom:64px}
.hero .kick{margin-bottom:26px}

/* ---- the three tiles (§12.6) */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 252px;gap:16px}
.t{position:relative;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(44,32,48,.07),0 18px 36px -26px rgba(44,32,48,.35)}
.t .lab{display:block;font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.t.comp{grid-column:1/-1;display:grid;grid-template-columns:364px minmax(0,1fr);column-gap:28px;padding:20px 22px 22px}
.t.comp .lab{grid-column:1/-1;margin-bottom:16px}
.t.comp img{width:364px;max-width:100%;border-radius:10px;box-shadow:0 0 0 1px rgba(44,32,48,.08)}
.t.comp picture{grid-column:1;grid-row:2}
/* the built page's caption, back under the picture: it says the picture is the real product (R8) */
.t.comp .cap{grid-column:1;grid-row:3;margin-top:10px;font:400 14px/1.4 "Instrument Sans";color:var(--ink-soft)}
.pages{grid-column:2;grid-row:2 / span 2;align-self:start;margin-top:25px;display:flex;flex-direction:column;gap:18px}
.pages li{display:flex;flex-direction:column;gap:4px}
.pages b{font:600 15px/1.3 "Instrument Sans";color:var(--ink)}
.pages span{font:400 14px/1.45 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.t.stg{padding:20px 22px}
.stg .big29{font:600 52px/1 "Instrument Sans";letter-spacing:-.04em}
.stg .lab29{font:500 15px/1.2 "Instrument Sans";color:var(--ink-soft);margin-top:6px}
.stg ol{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.stg li{display:grid;grid-template-columns:20px 1fr auto;align-items:baseline;gap:6px;font:500 14px/1.2 "Instrument Sans"}
.stg li .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.stg li .l2{color:var(--ink-soft);font-weight:400;font-size:13px}
.t.path{background:linear-gradient(180deg,#fff 0%,#fff9f1 100%)}
.t.path .txt{position:relative;z-index:1;padding:22px 22px 0;font:600 21px/1.22 "Instrument Sans";letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pscene{position:absolute;left:50%;bottom:21px}
.hzl{position:absolute;display:block;height:2px;background:var(--line)}
/* the sun (b_sun, the picked world's own) */
.sunbox{position:absolute;overflow:hidden;pointer-events:none}
.sunbox i{position:absolute;display:block;border-radius:50%}
.sunbox .disc::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/var(--grain) var(--grain)}
/* the 21-day arc, in plum (§12.8): walked days ink, the missed day a dashed ring, days to come white, today ink with a halo */
.arc{position:absolute;inset:0;margin:0}
.arc .a{position:absolute;border-radius:50%;background:#fff;border:1.5px solid rgba(44,32,48,.16)}
.arc .done{background:var(--ink);border-color:var(--ink)}
.arc .miss{background:#fff;border:1.5px dashed rgba(44,32,48,.45)}
.arc .today{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 5px rgba(44,32,48,.12)}

/* ---- the trust strip (§12.7): the copy's trust line, in the strip's form; the launch date joins it once set */
.strip{border-top:1px dashed var(--line);padding:26px 0 30px;align-items:center}
.seal{display:flex;align-items:center;gap:18px}
.ring{width:76px;height:76px;border-radius:50%;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;color:var(--ink)}
.ring b{font:600 28px/1 "Instrument Sans";letter-spacing:-.03em}
.ring small{font:600 9.5px/1 "Instrument Sans";letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.seal p{font:600 17px/1.35 "Instrument Sans"}
.rt{display:flex;justify-content:space-between;align-items:center;gap:24px}
.keep{font:400 15px/1.55 "Instrument Sans";color:var(--ink-soft)}
.keep b{font-weight:600;color:var(--ink)}
.keep .lp:not([hidden]){display:block}
.keep .lp::first-letter{text-transform:uppercase}   /* "launch pricing until …" starts its own line here */
.chk{display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:500 14px/1.3 "Instrument Sans";color:var(--ink-soft);flex:none}

/* ---- sections under the band (§12.9): sales maps its own sections to white and cream */
.sec{padding:112px 0 120px}
.sec.cream{background:var(--cream)}
.sec .grid2{align-items:start}
/* a section on the same ground as the one before it opens on a hair rule, inside the container */
.sec.after-white,.sec.after-cream{padding-top:0}
.sec.after-white > .wrap:first-child,.sec.after-cream > .wrap:first-child{position:relative;padding-top:112px}
.sec.after-white > .wrap:first-child::before,.sec.after-cream > .wrap:first-child::before{content:"";position:absolute;left:var(--g);right:var(--g);top:0;height:1px;background:var(--hair)}
.hd .big{margin-top:28px}
.tx .sm + .sm{margin-top:18px}
.tx .strong{font-weight:600;color:var(--ink)}

/* the lead: L4's lead section */
.lead .tx{padding-top:5px}
.ticks{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;font:500 17px/1.45 "Instrument Sans";color:var(--ink);text-wrap:pretty}
.ticks .ic{margin-top:2px}

/* the wedge, in the copy's order on two rows: the heading beside the mirror, then the pull line (in the lead
   statement's type) beside the research */
.wedge .grid2{row-gap:56px}
.wedge .mirror{padding-top:6px}
.wedge .pull{padding-top:2px}

/* how it works: the four steps (a numbered list in the stage rows' number style, §12.9) and the result tile */
.how .grid2{align-items:center}
.steps{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.steps li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:baseline}
.steps .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.steps p{font:400 17px/1.5 "Instrument Sans";color:var(--ink-soft);text-wrap:pretty}
.steps b{font-weight:600;color:var(--ink)}
.t.res{padding:22px 26px 26px}
.res .k{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tag{letter-spacing:.06em;font:600 11px/1 "Instrument Sans";text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--cream);color:var(--ink-soft)}
.res .nm{font:600 30px/1 "Instrument Sans";letter-spacing:-.03em;margin-top:18px;white-space:nowrap}
.res .nm .em{font-size:1.12em}
.res .cl{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:12px;max-width:36em}
.prof{padding-top:18px;margin-top:18px;border-top:1px solid var(--hair)}
.prof .pl{font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.prof ol{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.prof .bar{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;font:500 14px/1 "Instrument Sans";color:var(--ink)}
.prof .tr{height:8px;border-radius:4px;background:rgba(44,32,48,.08);overflow:hidden}
.prof .tr span{display:block;height:100%;border-radius:4px;background:var(--gold)}
.prof .leak .tr span{background:var(--coral)}
.prof .leak{font-weight:600}
/* the sequence, reversed: each track a line of steps in the arc's own marks (walked ink, the miss a dashed ring, the last lit) */
.seq{margin-top:64px;padding:10px 32px 26px}
.seq .lab{line-height:1.4}
.seq .row{display:grid;grid-template-columns:220px 1fr;align-items:start;gap:24px;padding:24px 0 22px}
.seq .row + .row{border-top:1px solid var(--hair)}
.seq .track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 210px}
.seq .track li{position:relative;padding:28px 16px 0 0}
.seq .track li:last-child{padding-right:0}
.seq .track li:not(:last-child)::before{content:"";position:absolute;left:6px;right:0;top:5px;border-top:2px solid var(--line)}
.seq .myth .track li:not(:last-child)::before{border-top:1.5px dashed rgba(44,32,48,.32)}
.seq .track i{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;border:1.5px solid rgba(44,32,48,.32)}
.seq .track .on i{background:var(--ink);border-color:var(--ink)}
.seq .track .miss i{border:1.5px dashed rgba(44,32,48,.45)}
.seq .track .end i{box-shadow:0 0 0 5px rgba(44,32,48,.12)}
.seq .track span{display:block;font:500 16px/1.3 "Instrument Sans";color:var(--ink)}
.seq .myth span{color:var(--ink-soft)}
.seq .myth .on span{color:var(--ink)}
.seq .track .end span{font-weight:600}
.seq figcaption{border-top:1px solid var(--hair);padding-top:22px;font:600 17px/1.35 "Instrument Sans";color:var(--ink)}

/* the shelf: one tile, a row per stage on the page grid (its name and its closer's line left, its covers right) */
.shelf h2{max-width:584px}
.t.shelf-t{margin-top:56px;padding:4px 28px}
.stages > li{display:grid;grid-template-columns:minmax(0,556fr) minmax(0,612fr);column-gap:72px;align-items:center;padding:26px 0}
.stages > li + li{border-top:1px solid var(--hair)}
.stage-name{font:600 17px/1.3 "Instrument Sans";color:var(--ink)}
.stage-name .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-right:10px;vertical-align:2px}
.stage-line{font:400 17px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:8px;max-width:30em;text-wrap:pretty}
.covers{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.covers img{width:100%;aspect-ratio:2/3;height:auto;border-radius:5px;box-shadow:0 0 0 1px rgba(44,32,48,.08),0 8px 16px -12px rgba(44,32,48,.5)}
.shelf-close{margin-top:56px;max-width:584px}

/* the offer: the guarantee left, the price card right (the price card is the home page's, with the button) */
.offer-sec .grid2{align-items:center}
.t.offer{grid-column:2;grid-row:1;padding:24px 28px 28px}
.offer .price{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.offer .price b{font:600 52px/1 "Instrument Sans";letter-spacing:-.04em}
.offer .price span{font:500 15px/1.2 "Instrument Sans";color:var(--ink-soft)}
.offer .then{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:8px}
.offer .then.tax{margin-top:2px}   /* "Tax added at checkout where it applies." under the price lines (26 Oct) */
.offer ul{margin-top:22px;display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--hair)}
.offer li{display:grid;grid-template-columns:22px 1fr;gap:12px;font:500 16px/1.45 "Instrument Sans";color:var(--ink);text-wrap:pretty}
.offer li .ic{margin-top:1px}
.offer .btn{margin-top:28px}
.offer .urgency{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft);margin-top:14px}
.guarantee{grid-column:1;grid-row:1}
.guarantee .big{margin-top:28px}
.guarantee .big strong{font-weight:500}
.guarantee .sm{margin-top:18px}

/* the questions: a row each, the question left in the sales deck type (§12.10's subheading), the answer right */
.faq .qa{padding:40px 0 42px}
.faq .qa:first-of-type{padding-top:0}
.faq .qa + .qa{border-top:1px solid var(--hair)}
.faq h3{font:500 26px/1.28 "Instrument Sans";letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
/* the closing row: the friction answer and the $67 link, in the answers' column and type */
.faq .more{row-gap:18px}
.faq .more > *{grid-column:2}
.quiet-link a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}

/* the close */
.close .grid2{align-items:center}
.close .ctas{margin-top:0;justify-self:start}

/* ---- the footer (§12.4) */
.foot{background:var(--white);padding-top:24px}
.foot .wrap > *{max-width:none}
.foot .wrap{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px;row-gap:14px;padding-top:26px;padding-bottom:30px;position:relative}
.foot .wrap::before{content:"";position:absolute;left:var(--g);right:var(--g);top:0;height:1px;background:var(--hair)}
.foot .brand img{height:38px;margin-left:-4.8px}
.foot .brand span{font-size:19px}
.foot .brand{grid-column:1;justify-self:start}
.fd{grid-column:1;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.fd a{text-underline-offset:3px;white-space:nowrap}   /* "full disclaimer" stays on one line (help judge-1, 1024) */
.fe{grid-column:1;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}   /* the short entity line (legal/entity.html, 2026-10-26): the trader's name in 600 ink, as on the legal pages (§12.4) */
.fe b{font-weight:600;color:var(--ink)}
.fe a{text-underline-offset:3px;white-space:nowrap}
.fl{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 24px;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.fl a{text-decoration:none}
.fl a[aria-current="page"]{color:var(--ink);font-weight:600}
.fr{grid-column:2;grid-row:2 / span 2;align-self:end;text-align:right;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}

/* ---- 1024 to 1439: the 1440 page, smaller; no text under its phone size (§12.1, §12.13) */
@media (min-width:1024px) and (max-width:1439px){
 .page{zoom:var(--k)}
 .page .ctas{flex-wrap:wrap;row-gap:18px}
 .page .brand span{font-size:max(21px,calc(19px / var(--k)))}
 .page .nav{font-size:max(16px,calc(16px / var(--k)))}
 .page h1{font-size:max(74px,calc(48px / var(--k)))}
 .page h1 .deck{font-size:max(26px,calc(22px / var(--k)))}
 .page .body{font-size:max(19px,calc(17px / var(--k)))}
 .page h2{font-size:max(44px,calc(32px / var(--k)))}
 .page .kick{font-size:max(14px,calc(13px / var(--k)))}
 .page .big{font-size:max(32px,calc(23px / var(--k)))}
 .page .sm{font-size:max(19px,calc(17px / var(--k)))}
 .page .micro{font-size:max(15px,calc(14px / var(--k)))}
 .page .btn,.page .ghost{font-size:max(17px,calc(17px / var(--k)))}
 .page .t .lab{font-size:max(12px,calc(10px / var(--k)))}
 .page .stg .big29,.page .offer .price b{font-size:max(52px,calc(40px / var(--k)))}
 .page .stg .lab29,.page .offer .price span{font-size:max(15px,calc(13px / var(--k)))}
 .page .stg li{font-size:max(14px,calc(13px / var(--k)))}
 .page .stg li .no,.page .steps .no,.page .stage-name .no{font-size:max(12px,calc(12px / var(--k)))}
 .page .stg li .l2{font-size:max(13px,calc(12px / var(--k)))}
 .page .t.path .txt{font-size:max(21px,calc(16px / var(--k)))}
 .page .bento{grid-template-rows:auto calc(252px / var(--k))}
 .page .seal p{font-size:max(17px,calc(16px / var(--k)))}
 .page .ring b{font-size:max(28px,calc(23px / var(--k)))}
 .page .ring small{font-size:max(9.5px,calc(9.5px / var(--k)))}
 .page .keep,.page .chk{font-size:max(15px,calc(14px / var(--k)))}
 .page .ticks li{font-size:max(17px,calc(16px / var(--k)))}
 .page .seq .track span{font-size:max(16px,calc(15px / var(--k)))}
 .page .seq figcaption{font-size:max(17px,calc(16px / var(--k)))}
 .page .steps p,.page .offer li{font-size:max(17px,calc(16px / var(--k)))}
 .page .res .nm{font-size:max(30px,calc(24px / var(--k)))}
 .page .res .cl,.page .fd,.page .fe,.page .fl,.page .fr,.page .offer .then,.page .offer .urgency{font-size:max(15px,calc(14px / var(--k)))}
 .page .res .k,.page .prof .pl{font-size:max(12px,calc(10px / var(--k)))}
 .page .tag{font-size:max(11px,calc(11px / var(--k)))}
 .page .prof .bar{font-size:max(14px,calc(13px / var(--k)))}
 .page .stage-name{font-size:max(17px,calc(16px / var(--k)))}
 .page .stage-line{font-size:max(17px,calc(15px / var(--k)))}
 .page .t.comp .cap{font-size:max(14px,calc(13px / var(--k)))}
 .page .faq h3{font-size:max(26px,calc(22px / var(--k)))}
 .page .pages b{font-size:max(15px,calc(14px / var(--k)))}
 .page .pages span{font-size:max(14px,calc(13px / var(--k)))}
 /* sizes that are not text but sit beside it: icons, the lockups, the seal keep their own size (12.4, 12.5) */
 .page .top .brand img{height:max(44px,calc(38px / var(--k)));margin-left:calc(-5.6px * max(1,calc(.8636 / var(--k))))}
 .page .foot .brand img{height:calc(38px / var(--k));margin-left:calc(-4.8px / var(--k))}
 .page .foot .brand span{font-size:calc(19px / var(--k))}
 .page .offer li,.page .ticks li{grid-template-columns:calc(22px / var(--k)) 1fr;column-gap:calc(12px / var(--k))}
 .page .offer li .ic,.page .ticks .ic{width:calc(20px / var(--k));height:calc(20px / var(--k));margin-top:calc(2px / var(--k))}
 .page .ic-sm{width:calc(18px / var(--k));height:calc(18px / var(--k))}
 .page .ring{width:max(76px,calc(64px / var(--k)));height:max(76px,calc(64px / var(--k)))}
 .page .pay{zoom:calc(1 / var(--k))}   /* the card marks keep their set heights (12.7: PAY_H) */
 /* the Companion picture never drops under its phone scale (342 px wide on a 390 phone) */
 .page .t.comp{grid-template-columns:max(364px,calc(342px / var(--k))) minmax(0,1fr)}
 .page .t.comp img{width:100%}
}
/* 1024 to 1279: the page list makes room (the phone shows none either) and the picture fills the tile's width, so
   no empty strip is left on its right (judge-1, nice 5); it never shows under its own 1:1 size here */
@media (min-width:1024px) and (max-width:1279px){
 .page .t.comp{grid-template-columns:minmax(0,1fr)}
 .page .t.comp img{width:100%}
 .page .pages{display:none}
}

/* 1024 to 1199 (the 1440 page drawn smaller): the six footer links no longer share one row since Help joined them, so
   they take two even rows of three (Help, Privacy Policy, Terms; then Refund Policy, Disclaimer, Cookie settings), never
   one link alone on a row. From about 1150 up they fit one row again. */
@media (min-width:1024px) and (max-width:1199px){
 .page .fl{row-gap:4px}
 .page .fl::before{content:"";flex-basis:100%;height:0;order:1}
 .page .fl a:nth-of-type(n+4){order:2}
}
/* ---- phones, 1023 and below (§12.11) */
@media (max-width:1023px){
 :root{--g:24px}
 .d-only{display:none!important}
 .m-only{display:block}
 br.m{display:inline}
 br.d{display:none}
 .top{height:76px}
 .brand img{height:38px;margin-left:-4.8px}
 .brand span{font-size:19px}
 .nav{display:none}
 .menu{display:inline-flex}
 .mnav:not([hidden]){display:flex;flex-direction:column;gap:6px;padding-bottom:20px;font:500 16px/1 "Instrument Sans"}
 .mnav a{text-decoration:none;padding:14px 0}
 .mnav .pill{text-align:center;padding:16px 22px;margin-top:8px}
 .grid2{grid-template-columns:minmax(0,1fr)}
 .hero{padding-top:8px;padding-bottom:36px;row-gap:32px}
 .hero .kick{margin-bottom:18px}
 h1{font-size:48px;line-height:.98}
 h1 .deck{font-size:22px;margin-top:18px}
 /* the locked subhead shows on phones too (Jay, 2026-10-26): one short supporting line, in the body text's phone size */
 .subhead{font-size:17px;line-height:1.5;margin-top:14px;text-wrap:balance}
 h2{font-size:32px}
 .kick{font-size:13px;margin-bottom:16px}
 .big{font-size:23px}
 .sm{font-size:17px}
 .ctas{flex-direction:column;align-items:stretch;gap:20px;margin-top:26px}
 .ctas .btn{width:100%}
 .ctas .ghost{align-self:center}
 .micro{font-size:14px;text-align:center;margin-top:14px}
 .bento{grid-template-rows:auto 216px;gap:10px}
 .t{border-radius:16px}
 .t .lab{font-size:10px}
 .t.comp{display:block;padding:14px 14px 6px}
 .t.comp .lab{margin-bottom:8px}
 .t.comp picture{display:block;margin:0 -14px}
 .t.comp img{width:100%;border-radius:0;box-shadow:none}
 .t.comp{padding-bottom:12px}
 .t.comp .cap{margin-top:8px;font-size:13px}
 .t.stg{padding:14px}
 .stg .big29{font-size:40px}
 .stg .lab29{font-size:13px}
 .stg ol{gap:6px;margin-top:12px}
 .stg li{grid-template-columns:16px 1fr;font-size:13px}
 .stg li .l2{display:none}
 .t.path .txt{padding:14px 14px 0;font-size:16px}
 .pscene{bottom:16px}
 .arc .today{box-shadow:0 0 0 2px rgba(44,32,48,.12)}
 .strip{padding:24px 0 28px;row-gap:18px}
 .rt{flex-direction:column;align-items:flex-start;gap:16px}
 .ring{width:64px;height:64px}
 .ring b{font-size:23px}
 .seal p{font-size:16px;text-wrap:balance}
 .keep{font-size:14px}
 .chk{align-items:flex-start}
 .pay{flex-wrap:wrap}
 .sec{padding:56px 0 64px}
 .sec.after-white > .wrap:first-child,.sec.after-cream > .wrap:first-child{padding-top:56px}
 .sec .grid2,.how .grid2,.close .grid2,.offer-sec .grid2{row-gap:32px}
 .lead .grid2{row-gap:24px}
 .lead .tx{padding-top:0}
 .hd .big{margin-top:20px}
 .tx .sm + .sm{margin-top:16px}
 .ticks li{font-size:16px}
 .wedge .grid2{row-gap:20px}
 .wedge .mirror,.wedge .pull{padding-top:0}
 .wedge .pull{margin:8px 0 4px}
 .seq{margin-top:36px;padding:4px 16px 18px}
 .seq .row{grid-template-columns:1fr;gap:14px;padding:18px 0}
 .seq .track{grid-template-columns:1fr;row-gap:12px}
 .seq .track li{padding:0 0 0 26px}
 .seq .track i{top:4px}
 .seq .track li:not(:last-child)::before{left:5px;right:auto;top:10px;bottom:-22px;width:0;border-top:0;border-left:2px solid var(--line)}
 .seq .myth .track li:not(:last-child)::before{border-top:0;border-left:1.5px dashed rgba(44,32,48,.32)}
 .seq .track span{font-size:15px}
 .seq figcaption{font-size:16px;padding-top:18px}
 .steps{margin-top:26px;gap:16px}
 .steps p{font-size:16px}
 .t.res{padding:16px 16px 18px}
 .res .k{font-size:10px}
 .res .nm{font-size:24px;margin-top:14px}
 .res .cl{font-size:14px}
 .prof .pl{font-size:10px}
 .prof .bar{grid-template-columns:84px 1fr;font-size:13px;gap:10px}
 .prof ol{gap:9px}
 .t.shelf-t{margin-top:32px;padding:2px 16px}
 .stages > li{grid-template-columns:minmax(0,1fr);row-gap:14px;padding:18px 0 20px}
 .stage-name{font-size:16px}
 .stage-line{font-size:15px;margin-top:6px}
 /* each stage's covers in one swipe row, edge to edge inside the tile, the next cover peeking */
 .covers{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 12px;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
 .covers::-webkit-scrollbar{display:none}
 .covers img{flex:none;width:84px;scroll-snap-align:start}
 .covers:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:6px}
 .shelf-close{margin-top:32px}
 .t.offer{grid-column:1;grid-row:auto;padding:18px 16px 22px}
 .guarantee{grid-column:1;grid-row:auto}
 .offer .price b{font-size:40px}
 .offer .price span{font-size:13px}
 .offer .then{font-size:14px}
 .offer li{font-size:16px}
 .offer .btn{width:100%;margin-top:24px}
 .offer .urgency{font-size:14px;text-align:center}
 .guarantee .big{margin-top:20px}
 .guarantee .sm{margin-top:14px}
 .faq .qa{grid-template-columns:minmax(0,1fr);row-gap:12px;padding:28px 0 30px}
 .faq h3{font-size:22px}
 .faq .more{row-gap:16px}
 .faq .more > *{grid-column:1}
 .close .ctas{justify-self:stretch}
 .foot .wrap{grid-template-columns:minmax(0,1fr);padding-top:24px;padding-bottom:28px;row-gap:16px}
 .fd,.fe,.fl,.fr{grid-column:1;grid-row:auto;font-size:14px}
 .fl{justify-content:flex-start;gap:8px 20px}
 .fr{text-align:left}
}
/* the smallest phones (under 360): the Companion tile goes edge to edge, so its run card shows at 0.9 of its
   source scale and the streak line still reads (5ff2 (4)); every other tile keeps the gutter */
@media (max-width:359px){
 .t.comp{margin:0 calc(-1 * var(--g));border-radius:0;padding-left:var(--g);padding-right:var(--g)}   /* the label stays on the gutter */
 .t.comp picture{margin:0 calc(-1 * var(--g))}
 .t.path .pscene{transform:scale(.76);transform-origin:50% 100%}   /* the 166 px sunrise fits the narrower tile, no dot cut */
}

/* ---- Site port: the product pictures (VANT cards 346d and 7b48, batch 2026-10-28b; scripts/port-pages.mjs) ---- */
.pp{margin:0}
.pp img{display:block;width:100%;height:auto;aspect-ratio:5/4}
.offer-sec .pp-offer{grid-column:2;grid-row:1;width:100%;max-width:480px;justify-self:center;margin-bottom:-12px}
.offer-sec .t.offer{grid-row:2}
.offer-sec .guarantee{grid-row:1 / span 2}
.shelf-end{margin-top:56px;align-items:center}
.shelf-end .shelf-close{margin-top:0}
@media (max-width:1023px){
 .offer-sec .pp-offer{grid-column:1;grid-row:auto;max-width:420px;margin-bottom:-16px}
 .offer-sec .t.offer,.offer-sec .guarantee{grid-row:auto}
 .shelf-end{margin-top:32px}
}