/* ---------------------------------------------------------------------------
   Self-hosted typefaces.

   These were loaded from fonts.googleapis.com until 2026-09-23, and were not
   rendering: the site's own Content-Security-Policy sets `style-src 'self'
   'unsafe-inline'` and `font-src 'self' data:`, neither of which allows
   googleapis or gstatic, so the browser blocked the stylesheet AND the font
   files and every visitor saw the fallback stack. It also logged two CSP
   violations per page, which is what PageSpeed was reporting as console
   errors under Best Practices.

   Self-hosting fixes all of it at once and needs no CSP change: the fonts are
   now first-party, the render-blocking third-party stylesheet is gone, and so
   are the two preconnects it needed. Sora and DM Sans are variable fonts, so
   one file each covers the weight range the site uses.

   Latin subset only. The site is English and US-scoped; latin-ext adds weight
   for accented characters nothing here sets.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Sora';font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/fonts/sora.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/dm-sans.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------------------------------------------------------------------------
   Two reds, on purpose.

   --cta is the brand red. White text on it scores 4.01:1, and WCAG AA wants
   4.5:1, so anything that puts text on red uses --cta-fill (5.35:1) instead.
   That is the button and the photo pill, and nothing else: every other use of
   --cta is a border, a dot or a chart stroke. Those are graphics, which need
   3:1 under 1.4.11, and 4.01 already clears it.

   So do not collapse these into one value. Darkening --cta would repaint the
   gauges, the timeline markers and the pull-quote rules to fix a contrast
   problem none of them have. Red is never used as a text colour anywhere in
   this file, which is why the split is this small.
   --------------------------------------------------------------------------- */
:root{--sky:#F6F5F2;--sky-2:#ECEBE6;--white:#FFFFFF;--deep:#1E2530;--acc:#2F6DB5;--acc-lt:#8DB4E3;--acc-text:#245A99;--cta:#E4472F;--cta-fill:#C23A25;--cta-fill-dk:#A32E1C;--cta-txt:#FFFFFF;--deep-rgb:30,37,48;--chart-ink:#245A99;--up:#167245;--dn:#A32E1C;--ink:#171A1F;--ink-soft:#4B525C;--ink-faint:#5F6771;--hair:#DCDAD3;--r:10px;--r-sm:5px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 16px/1.6 'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--sky);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Sora,system-ui,sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(28px,3.7vw,48px);max-width:22ch}h3{font-size:19px;letter-spacing:-.02em}
a{color:var(--acc-text);text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.eyebrow{font:500 12px/1 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text)}
.eyebrow.on-deep,.eyebrow--hero{color:var(--acc-lt)}
.lede{margin-top:18px;font-size:18px;color:var(--ink-soft);max-width:52ch}
.mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
header{position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--sky) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
header nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:Sora,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.04em;color:var(--ink)}
.brand img{width:30px;height:32px}
.navlinks{display:flex;gap:28px;font-size:15px}.navlinks a{color:var(--ink-soft)}.navlinks a:hover{color:var(--acc-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:500 15px/1 'DM Sans',sans-serif;padding:13px 20px;border-radius:var(--r-sm);background:var(--cta-fill);color:var(--cta-txt);border:1px solid var(--cta-fill);transition:background .16s,border-color .16s,color .16s;white-space:nowrap}
.btn:hover{background:var(--cta-fill-dk);border-color:var(--cta-fill-dk);color:#fff}
.btn-deep{background:var(--deep);border-color:var(--deep);color:#fff}.btn-deep:hover{background:var(--acc);border-color:var(--acc)}
.btn-ghost{background:transparent;border-color:var(--hair);color:var(--ink)}.btn-ghost:hover{background:var(--white);border-color:var(--acc);color:var(--acc-text)}
.btn-ghost.on-deep{color:#fff;border-color:rgba(255,255,255,.28)}.btn-ghost.on-deep:hover{background:rgba(255,255,255,.1);border-color:var(--acc-lt)}
.btn-lg{padding:16px 26px;font-size:16.5px}
/* hero */
.hero{position:relative;min-height:min(82vh,820px);padding-top:96px;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right 45%}
.hero::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(var(--deep-rgb),.04) 0%,rgba(var(--deep-rgb),.02) 40%,rgba(var(--deep-rgb),.78) 82%,rgba(var(--deep-rgb),.92) 100%),linear-gradient(96deg,rgba(var(--deep-rgb),.72) 0%,rgba(var(--deep-rgb),.42) 34%,rgba(var(--deep-rgb),.06) 60%,rgba(var(--deep-rgb),0) 78%)}
.hero .wrap{position:relative;z-index:3;padding-bottom:58px;color:#fff;width:100%}
.hero h1{font-size:clamp(38px,5vw,64px);max-width:16ch;letter-spacing:-.035em;margin-top:18px}
.hero .sub{margin-top:20px;font-size:18.5px;max-width:46ch;color:#D8E3EE}
.cta-row{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.fine{margin-top:16px;font:400 13.5px/1.6 'DM Mono',monospace;color:#A9BDD1}.fine b{color:var(--acc-lt);font-weight:500}
.hero-stats{display:flex;gap:44px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);flex-wrap:wrap}
.hero-stat b{display:block;font:500 34px/1 'DM Mono',monospace;letter-spacing:-.02em;color:#fff}.hero-stat b .unit{font-size:16px;margin-left:3px;color:var(--acc-lt)}
.hero-stat em{display:block;font-style:normal;font-size:13.5px;color:#A9BDD1;margin-top:8px}
/* deep band */
.deep{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.deep h2{color:#fff}.deep .lede{color:#B9C9DA}.deep .wrap{position:relative;z-index:2}
/* cloud divider: two cloud silhouettes drifting at different speeds (the waterline's cousin) */
.cloudline{height:34px;position:relative;overflow:hidden;background:var(--cloud-from)}
.cloudline .cl{position:absolute;left:0;top:0;width:200%;height:100%;animation:drift 60s linear infinite}
.cloudline .cl svg{width:100%;height:100%;display:block}
.cloudline .cl1 path{fill:var(--cloud-to);opacity:.45}.cloudline .cl2{animation-duration:95s;animation-direction:reverse}.cloudline .cl2 path{fill:var(--cloud-to)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cloudline .cl{animation:none}}
.cloudline.hero-to-band{--cloud-from:var(--deep);--cloud-to:var(--sky-2)}
.cloudline.band-to-page{--cloud-from:var(--sky-2);--cloud-to:var(--sky)}
.cloudline.page-to-deep{--cloud-from:var(--sky-2);--cloud-to:var(--deep)}
.cloudline.deep-to-page{--cloud-from:var(--deep);--cloud-to:var(--sky)}
/* background art */
.chartart,.gaugeart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;font-family:'DM Mono',monospace}
.chartart{color:var(--chart-ink);opacity:.24}
.gaugeart{color:var(--acc-lt);opacity:.16}
.band{position:relative;overflow:hidden;--band-bg:var(--sky-2)}
.band .wrap{position:relative;z-index:2}
/* light band (the section right after the hero) */
.band{background:var(--sky-2)}
.band .stp .ping{border-color:var(--acc);color:var(--acc-text)}.band .stp .ping::after{border-color:var(--acc)}.band .stp h3{color:var(--ink)}.band .stp p{color:var(--ink-soft)}
/* sections */
section{padding:96px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.figure{border-radius:var(--r);overflow:hidden;position:relative;background:var(--sky-2)}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.figure .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;background:linear-gradient(0deg,rgba(var(--deep-rgb),.92),transparent);font:400 12.5px/1.5 'DM Mono',monospace}
.tagfloat{position:absolute;top:14px;left:14px;background:var(--cta-fill);color:var(--cta-txt);border-radius:999px;padding:7px 13px;font:500 11.5px/1 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.stp .ping{width:44px;height:44px;border-radius:50%;border:1px solid var(--acc-lt);display:grid;place-items:center;font:500 13px 'DM Mono',monospace;color:var(--acc-lt);position:relative;margin-bottom:18px}
.stp .ping::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--acc-lt);opacity:.35}
.stp h3{color:#fff;margin-bottom:8px}.stp p{color:#B9C9DA;font-size:15px}
/* week band */
.week{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.wk{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:24px 26px;box-shadow:0 1px 2px rgba(var(--deep-rgb),.04),0 12px 30px rgba(var(--deep-rgb),.06)}
.wk b{display:block;font:500 38px/1 'DM Mono',monospace;letter-spacing:-.02em}
.wk.up b{color:var(--up)}.wk.down b{color:var(--dn)}
.wk span{display:block;margin-top:10px;color:var(--ink-soft);font-size:14px}
.sechead{display:flex;align-items:end;justify-content:space-between;gap:24px}
.sechead a.more{font-family:'DM Sans',system-ui,sans-serif;font-weight:500;font-size:14px;white-space:nowrap}
/* model cards */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.mc{scroll-margin-top:96px;background:var(--white);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;color:var(--ink);box-shadow:0 1px 2px rgba(var(--deep-rgb),.04),0 12px 30px rgba(var(--deep-rgb),.06);transition:transform .16s,box-shadow .16s;display:block}
.mc:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(var(--deep-rgb),.05),0 22px 44px rgba(var(--deep-rgb),.12)}
.mc .ph{position:relative;height:190px;background:var(--sky-2)}.mc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mc .ph .n{position:absolute;right:12px;bottom:12px;background:rgba(var(--deep-rgb),.85);color:#fff;font:500 12px 'DM Mono',monospace;padding:6px 10px;border-radius:999px}
/* Same reason as the dt labels: repeated once per card, "for sale" reached 22%
   bigram density on /models/. The count stays in the document; the words that
   label it are painted from the attribute. */
.mc .ph .n[data-lab]::after{content:' ' attr(data-lab)}
.mc .bd{padding:18px 20px 20px}.mc h2,.mc h3{font-size:17px;letter-spacing:-.02em;max-width:none}
.mc dl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.mc dt{font-size:11.5px;color:var(--ink-faint);letter-spacing:.02em}
/* The card labels live in data-lab rather than in the element's text. Repeated
   once per card, "Median ask" reached 9.8% bigram density on /models/ and
   tripped Google's keyword-stuffing threshold; a grid of cards cannot share a
   single column header, so the text moves to an attribute and CSS paints it.
   Identical on screen, out of the document body. */
.mc dt[data-lab]::before{content:attr(data-lab)}.mc dd{font:500 15px 'DM Mono',monospace;margin-top:2px}.mc dd.cut{color:var(--dn)}
/* tables */
.tcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:8px 14px;margin-top:36px;box-shadow:0 1px 2px rgba(var(--deep-rgb),.04),0 12px 30px rgba(var(--deep-rgb),.06)}
table.tb{width:100%;border-collapse:collapse;font-size:14.5px}
.tb th{text-align:left;font:500 11.5px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding:12px 12px 10px;border-bottom:1px solid var(--hair)}
.tb td{padding:13px 12px;border-bottom:1px solid var(--hair)}.tb tr:last-child td{border-bottom:0}
.tb td.num{font-family:'DM Mono',monospace;text-align:right;white-space:nowrap}
.tb .was{color:var(--ink-faint);text-decoration:line-through;margin-right:8px}
.tb .pct{display:inline-block;font:500 12px 'DM Mono',monospace;padding:3px 8px;border-radius:999px;background:#F8E9E6;color:var(--cta-fill-dk);margin-left:8px}
/* Links in these tables sit directly above one another in the stacked mobile
   layout, and the cut-row title was a 211x18 target with 17.4px of clearance
   to the model link beneath it. WCAG 2.5.8 wants 24x24. line-height does it
   without padding, so a row grows by about a pixel on desktop and the table
   keeps its density. */
.tb a{color:var(--ink);font-weight:500;display:inline-block;line-height:24px}.tb a:hover{color:var(--acc-text)}.tb .sub{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px}
/* phone */
.phone{width:340px;margin:0 auto;background:#0E1621;border-radius:34px;padding:14px;box-shadow:0 30px 70px rgba(var(--deep-rgb),.35)}
.screen{background:#17212B;border-radius:24px;overflow:hidden;height:540px;display:flex;flex-direction:column;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;color:#F5F5F5;font-size:13.5px}
.tgbar{background:#212D3B;padding:14px 16px;display:flex;align-items:center;gap:10px;font-weight:600}
.tgbar i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3390EC,#1B6EC2);display:grid;place-items:center;font-style:normal}
.tgbar small{display:block;font-weight:400;font-size:11px;color:#8FA3B8}
.bub{background:#182533;margin:14px 14px 0;padding:0 0 8px;border-radius:12px 12px 12px 4px;line-height:1.45;max-width:290px;overflow:hidden}
.bub img{width:100%;height:130px;object-fit:cover;display:block}
.bub .in{padding:10px 12px 0}.bub .h{font-weight:700}.bub .h span{color:#6AB3F3}.bub a{color:#6AB3F3;font-weight:600}
.bub pre{font:12px/1.5 'DM Mono',monospace;color:#C9D6E2;margin:8px 0;white-space:pre}
.bub .t{text-align:right;font-size:10px;color:#6E8398;margin-top:4px;padding-right:12px}
.bub .btnrow{display:flex;gap:6px;margin:8px 12px 0}.bub .btnrow span{flex:1;text-align:center;background:rgba(255,255,255,.08);padding:7px;border-radius:8px;font-size:12px;color:#6AB3F3;font-weight:600}
/* faq */
.faq{max-width:780px;margin-top:36px}
.faq details{border-top:1px solid var(--hair);padding:20px 0}.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;font-weight:500;font-size:17px;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:'+';color:var(--ink-faint);font-family:'DM Mono'}
.faq p{color:var(--ink-soft);margin-top:10px;font-size:15.5px;max-width:64ch}
/* final */
.final{position:relative;overflow:hidden;color:#fff;text-align:center;padding:120px 0}
.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--deep-rgb),.55),rgba(var(--deep-rgb),.85))}
.final .wrap{position:relative;z-index:2}.final h2{color:#fff;margin:14px auto 18px;max-width:18ch}.final p{color:#D8E3EE;max-width:44ch;margin:0 auto 28px;font-size:18px}
/* footer: same structure as carsnipe.com / docksnipe.com */
.sitefoot{background:var(--deep);color:#B9C3CF;padding:56px 0 34px}
.sitefoot a{color:#B9C3CF}.sitefoot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
a.foot-brand{display:flex;align-items:center;gap:11px;color:#fff;font-family:Sora,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.04em}
a.foot-brand:hover{color:#fff}.foot-brand img{width:30px;height:32px}
.foot-blurb{margin-top:14px;font-size:15px;max-width:38ch}
.foot-col h3{font-family:Sora,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8A96A5;font-weight:600;margin-bottom:14px}
.foot-col ul{list-style:none;display:grid;gap:10px;font-size:15px}
.famband{padding:30px 0 28px;border-bottom:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center}
.famhead h3{font-family:Sora,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8A96A5;font-weight:600}
.famhead p{margin-top:10px;font-size:14.5px;color:#9AA6B5;max-width:34ch}
.fams{display:flex;flex-wrap:wrap;gap:12px}
.fam{flex:1 1 210px;max-width:270px;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);transition:border-color .25s,transform .25s}
.fam-bg{position:absolute;inset:0;z-index:0}
.fam-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;transform:scale(1.04);filter:grayscale(.55) contrast(1.05);transition:opacity .35s,transform .5s,filter .35s}
.fam-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(var(--deep-rgb),.96) 22%,rgba(var(--deep-rgb),.72) 68%,rgba(var(--deep-rgb),.5) 100%)}
a.fam:hover{border-color:var(--acc-lt);transform:translateY(-3px)}a.fam:hover .fam-bg img{opacity:.42;transform:scale(1.1);filter:grayscale(.2)}
.fam-mark,.fam .nm,.fam .ht{position:relative;z-index:1}.fam-mark{width:38px;height:41px;flex:none}
.fam .nm{font-family:Sora,sans-serif;font-weight:700;font-size:16px;letter-spacing:-.03em;color:#fff}
.fam .ht{font:400 12px/1 'DM Mono',monospace;color:#8A96A5;flex-basis:100%;margin-left:50px;margin-top:-5px}
.fam.here{border-style:dashed;border-color:rgba(255,255,255,.18)}.fam.here .ht{color:var(--acc-lt)}
.foot-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font:400 13px/1.6 'DM Mono',monospace;color:#8A96A5}
.seo-credit{text-align:center;margin-top:16px;font-size:14px}.seo-credit a{display:inline-flex;align-items:center;gap:6px;color:inherit}.seo-credit b{font-weight:900;letter-spacing:-.01em}
.foot-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.2)}.foot-bottom a:hover{color:#fff}
.credits-list{columns:2;column-gap:48px}.credits-list p{font:400 13px/1.7 'DM Mono',monospace;color:var(--ink-soft);margin:0 0 10px;break-inside:avoid}.credits-list a{color:var(--acc-text)}.credits-list .for{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:900px){.credits-list{columns:1}}
@media(max-width:900px){.famband{grid-template-columns:1fr;gap:22px}.foot-top{grid-template-columns:1fr}}
/* model page */
.mhero{position:relative;min-height:460px;max-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.mhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--deep-rgb),.25),rgba(var(--deep-rgb),.9) 90%),linear-gradient(96deg,rgba(var(--deep-rgb),.8),rgba(var(--deep-rgb),.2) 60%,transparent)}
.mhero .wrap{position:relative;z-index:2;color:#fff;padding:48px 32px 44px;width:100%}
.mhero h1{font-size:clamp(32px,4.4vw,52px);letter-spacing:-.035em;max-width:22ch;margin-top:12px}
.mhero .sub{margin-top:14px;font-size:17.5px;max-width:58ch;color:#D8E3EE}
.crumbs{font:400 13px 'DM Mono',monospace;color:#A9BDD1}.crumbs a{color:#A9BDD1}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:-44px;position:relative;z-index:3}
.tile{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:20px 20px 18px;box-shadow:0 1px 2px rgba(var(--deep-rgb),.04),0 12px 30px rgba(var(--deep-rgb),.08)}
.tile b{display:block;white-space:nowrap;font:500 26px/1 'DM Mono',monospace;letter-spacing:-.02em}.tile b .unit{display:inline;font-size:13px;color:var(--ink-faint);margin-left:3px}
.tile > span{display:block;margin-top:8px;font-size:13px;color:var(--ink-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--white);border:1px solid var(--hair);border-radius:var(--r);padding:26px 28px;box-shadow:0 1px 2px rgba(var(--deep-rgb),.04),0 12px 30px rgba(var(--deep-rgb),.06)}
.panel h3{margin-bottom:4px}.panel .sub{font-size:13px;color:var(--ink-faint);margin-bottom:22px}
.hist{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;align-items:end;height:150px;border-bottom:1px solid var(--hair)}
.hist div{background:var(--acc);border-radius:4px 4px 0 0;position:relative;min-height:4px;opacity:.9}.hist div:hover{opacity:1}
.hist div::after{content:attr(data-n);position:absolute;top:-20px;left:0;right:0;text-align:center;font:11px 'DM Mono',monospace;color:var(--ink-soft)}
.histx{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;font:10.5px 'DM Mono',monospace;color:var(--ink-faint);text-align:center;margin-top:6px}
.note{font-size:13.5px;color:var(--ink-faint);border-left:2px solid var(--hair);padding-left:14px;margin-top:20px;max-width:70ch}
.alertcta{background:var(--deep);color:#fff;border-radius:var(--r);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.alertcta h3{color:#fff;font-size:21px}.alertcta p{color:#B9C9DA;margin-top:4px}
@media(max-width:900px){.split,.two,.fgrid{grid-template-columns:1fr}.week,.models,.steps{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:repeat(3,1fr)}.navlinks{display:none}}
/* inner pages */
.pagehead{padding:72px 0 48px}.pagehead h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.035em;margin-top:14px;max-width:20ch}
.pagehead .lede{max-width:64ch}.pagehead .week{margin-top:36px}
.prose h2{font-size:26px;margin:44px 0 14px}.prose p{max-width:70ch;color:var(--ink-soft);font-size:17px;margin-bottom:16px}.prose p a{text-decoration:underline;text-underline-offset:3px}
.tb td.num.was-col{color:var(--ink-faint)}

/* phone feed */
.tg-body{flex:1;overflow:hidden;position:relative}
.tg-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(0deg,#17212B,transparent);pointer-events:none}
.tg-track{will-change:transform}

/* =========================================================================
   MOTION
   Transform/opacity only, so nothing triggers layout. Everything here is
   switched off under prefers-reduced-motion at the bottom of the block.
   ========================================================================= */

/* 1. the hero photo breathes */
.hero>img{animation:heroDrift 34s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1.015)}to{transform:scale(1.075)}}

/* 2. step markers pulse, staggered, once the row has arrived */
.stp .ping::before{content:"";position:absolute;inset:-1px;border-radius:999px;border:1px solid var(--acc-lt);opacity:0}
.band .stp .ping::before{border-color:var(--acc)}
.steps.in .stp:nth-child(1) .ping::before{animation:pulse 4.5s ease-out infinite}
.steps.in .stp:nth-child(2) .ping::before{animation:pulse 4.5s ease-out infinite 1.5s}
.steps.in .stp:nth-child(3) .ping::before{animation:pulse 4.5s ease-out infinite 3s}
@keyframes pulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}

/* 3. the six-pack is alive: the altimeter needles creep, the heading card hunts */
.gaugeart .alt-needles{transform-origin:230px 330px;transform-box:view-box;animation:needle 26s ease-in-out infinite alternate}
@keyframes needle{from{transform:rotate(-4deg)}to{transform:rotate(9deg)}}
.gaugeart .hi-card{transform-origin:980px 360px;transform-box:view-box;animation:hunt 38s ease-in-out infinite alternate}
@keyframes hunt{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}

/* 4. the sectional chart drifts, the way a chart slides under a plotter */
.chartart{animation:chartDrift 60s ease-in-out infinite alternate;will-change:transform}
@keyframes chartDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-18px,10px) scale(1.03)}}

/* 4b. weather over the hero: thin cloud drifting across, and the odd wisp of
   wind past the aircraft. Soft, slow, and well under the text overlay. */
.hero .wind{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 40%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 40%,#000 62%)}
.hero .cloud{position:absolute;display:block;border-radius:50%;filter:blur(22px);background:radial-gradient(ellipse at center,rgba(255,255,255,.9),rgba(255,255,255,.35) 40%,rgba(255,255,255,0) 68%);will-change:transform}
.hero .c1{width:60vw;height:24vh;left:-10vw;top:6%;opacity:.7;animation:cloudDrift 70s linear infinite}
.hero .c2{width:48vw;height:18vh;left:30vw;top:28%;opacity:.6;animation:cloudDrift 100s linear infinite;animation-delay:-45s}
.hero .c3{width:70vw;height:20vh;left:-20vw;top:52%;opacity:.5;animation:cloudDrift 125s linear infinite;animation-delay:-80s}
@keyframes cloudDrift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.hero .streak{position:absolute;display:block;height:2.5px;width:22vw;top:50%;left:100%;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 40%,rgba(255,255,255,0));filter:blur(.8px);opacity:0;animation:gust 14s linear infinite;will-change:transform,opacity}
.hero .s1{top:38%;animation-duration:9s;animation-delay:1s}
.hero .s2{top:44%;width:30vw;animation-duration:12s;animation-delay:4s}
.hero .s3{top:56%;width:18vw;animation-duration:8s;animation-delay:7s}
.hero .s4{top:31%;width:26vw;animation-duration:13s;animation-delay:10s}
@keyframes gust{0%{transform:translateX(0) translateY(0);opacity:0}8%{opacity:.95}60%{opacity:.6}100%{transform:translateX(-160vw) translateY(-2vh);opacity:0}}

/* 5. scroll reveals, gated on .js so nothing is ever hidden without it */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .62s cubic-bezier(.2,.6,.3,1),transform .62s cubic-bezier(.2,.6,.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* 6. hover life */
.wk,.tile,.panel,.figure,.mc,.tcard{transition:transform .2s ease,box-shadow .2s ease}
.wk:hover,.tile:hover,.panel:hover{transform:translateY(-2px)}
.btn{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.btn:active{transform:translateY(1px)}
.hist div{transition:height .5s cubic-bezier(.2,.6,.3,1)}

/* 7. nav gains a shadow once you leave the top */
header{transition:box-shadow .25s ease}
header.stuck{box-shadow:0 1px 18px rgba(var(--deep-rgb),.09)}

@media (prefers-reduced-motion: reduce){
  .hero>img,.hero .cloud,.hero .streak,.stp .ping::before,.gaugeart .alt-needles,.gaugeart .hi-card,.chartart,.cloudline .cl{animation:none !important}
  .hero .streak{display:none}
  .js .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .wk:hover,.tile:hover,.panel:hover,.mc:hover{transform:none !important}
}

/* page heroes on inner pages (the model hero, shorter) */
.pagehero{min-height:400px;max-height:480px}.pagehero.short{min-height:300px;max-height:360px}
.pagehero .wrap{padding-bottom:40px}.pagehero h1{max-width:18ch}

/* prose pages: article + sticky aside */
.prose-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.prose-grid.wide{grid-template-columns:1fr}.prose-grid.wide .prose{max-width:none;columns:2;column-gap:56px}
.prose-grid.wide .prose h2{break-after:avoid;margin-top:0;padding-top:34px}.prose-grid.wide .prose p{break-inside:avoid;max-width:none}
.aside{position:sticky;top:96px}
.glance dl{display:grid;gap:12px;margin-top:14px}.glance dt{font-size:12px;color:var(--ink-faint);letter-spacing:.02em}.glance dd{font:500 17px 'DM Mono',monospace;margin-top:2px}
.glance .spark{margin-top:20px}
.prose .figure{margin:34px 0;height:300px}.prose .figure img{width:100%;height:100%;object-fit:cover}
.prose .pull{border-left:3px solid var(--cta);padding:6px 0 6px 20px;margin:34px 0;font:600 24px/1.25 Sora,sans-serif;letter-spacing:-.02em;color:var(--ink);max-width:24ch}

/* sparkline */
.spark{border-top:1px solid var(--hair);padding-top:14px}
.spark-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-faint)}
.spark-head b{font-size:16px;font-weight:500;color:var(--ink)}.spark-head b.down{color:var(--dn)}.spark-head b.up{color:var(--up)}
.spark svg{width:100%;height:72px;display:block;margin-top:8px;overflow:visible}
.spark-fill{fill:var(--acc);opacity:.12}.spark-line{fill:none;stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke}
.spark-dot{fill:var(--acc)}
.spark-foot{display:flex;justify-content:space-between;font:11px 'DM Mono',monospace;color:var(--ink-faint);margin-top:6px}
.sechead .spark{border-top:0;padding-top:0;width:320px;flex:none}

/* faq with a figure beside it */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
.faq-grid .figure{position:sticky;top:96px;height:440px}
.faq-grid .faq{margin-top:0}

/* about page */
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.timeline{list-style:none;margin-top:28px;border-left:1px solid var(--hair);padding-left:24px;display:grid;gap:22px}
.timeline li{position:relative}.timeline li::before{content:"";position:absolute;left:-29px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(228,71,47,.14)}
.timeline b{display:block;font:500 12px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-text);margin-bottom:4px}
.timeline p{color:var(--ink-soft);font-size:15.5px;max-width:52ch}

/* A plain list of routes out of a dead end: /404 and anywhere else a page needs to hand the reader somewhere. */
.linklist{list-style:none;display:grid;gap:14px;max-width:46ch}
.linklist li{color:var(--ink-soft);font-size:15.5px;line-height:1.5;padding-left:16px;position:relative}
.linklist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--acc-lt)}
.linklist a{font-weight:500;color:var(--acc-text)}

@media(max-width:900px){.prose-grid,.faq-grid{grid-template-columns:1fr}.aside{position:static}.faq-grid .figure{position:relative;top:auto}.prose-grid.wide .prose{columns:1}.about-stats{grid-template-columns:1fr 1fr}.sechead .spark{width:100%}}
.deep .timeline{border-left-color:rgba(255,255,255,.18)}.deep .timeline b{color:var(--acc-lt)}.deep .timeline p{color:#B9C9DA}

/* trend tiles: a small chart behind each headline figure */
.tile{--px:20px;--pb:18px}.wk{--px:26px;--pb:24px}
.trend .tile,.trend .wk{overflow:hidden;position:relative}
.trend .tile .lab{font-size:12.5px;color:var(--ink-faint)}
.trend .tile b{margin-top:8px;font-size:30px}
.trend b .d{font:500 12px 'DM Mono',monospace;font-style:normal;margin-left:8px;letter-spacing:0;color:var(--ink-faint)}
.trend b .d.up{color:var(--up)}.trend b .d.dn{color:var(--dn)}
.trend .fn{margin-top:10px;font-size:12px;line-height:1.45;color:var(--ink-faint)}
.tspark{display:block;width:calc(100% + 2 * var(--px));height:54px;margin:12px calc(-1 * var(--px)) calc(-1 * var(--pb));overflow:visible}
.tspark .f{fill:var(--acc);opacity:.12}.tspark .l{fill:none;stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke}
.wk.up .tspark .f,.wk.up .tbars i{background:var(--up);fill:var(--up)}.wk.down .tbars i{background:var(--dn)}
.tbars{display:flex;align-items:flex-end;gap:3px;height:54px;margin-top:12px}
.tbars i{flex:1;background:var(--acc);opacity:.85;border-radius:2px 2px 0 0;transform-origin:bottom}
.tbars i:last-child{opacity:.45}
.ttrack{height:6px;background:var(--sky-2);border-radius:999px;margin-top:16px;overflow:hidden}
.ttrack i{display:block;height:100%;width:var(--w);background:var(--acc);border-radius:999px}
.tdays{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;margin-top:14px}
.tdays i{aspect-ratio:1;border-radius:2px;background:var(--acc)}
/* draw in on reveal; static without JS or with reduced motion */
.js .reveal .tspark .l{stroke-dasharray:1000;stroke-dashoffset:1000}
.js .reveal.in .tspark .l{animation:tdraw 1.4s .15s ease-out forwards}
.js .reveal .tspark .f{opacity:0}.js .reveal.in .tspark .f{transition:opacity .8s .9s}.js .reveal.in .tspark .f{opacity:.12}
.js .reveal .tbars i{transform:scaleY(0)}.js .reveal.in .tbars i{animation:tgrow .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.1s + var(--i,0) * 55ms)}
.js .reveal .ttrack i{width:0}.js .reveal.in .ttrack i{animation:tfill 1.1s .2s cubic-bezier(.2,.7,.2,1) forwards}
.js .reveal .tdays i{opacity:0}.js .reveal.in .tdays i{animation:tpop .3s forwards;animation-delay:calc(.1s + var(--i,0) * 12ms)}
@keyframes tdraw{to{stroke-dashoffset:0}}
@keyframes tgrow{from{transform:scaleY(0)}to{transform:none}}
@keyframes tfill{to{width:var(--w)}}
@keyframes tpop{to{opacity:1}}
/* room between the hero lede and the cards that overlap it */
.mhero.has-tiles .wrap{padding-bottom:84px}

/* the family radar on the About page */
.famart{position:relative;max-width:420px;margin:0 auto;width:100%}
.famart svg{width:100%;height:auto;display:block}
.famart .rings circle,.famart .rings path{fill:none;stroke:var(--acc);stroke-opacity:.28;stroke-width:1}
.famart .rings .faint{stroke-opacity:.12}
.famart .ticks line{stroke:var(--acc);stroke-opacity:.35;stroke-width:1}
.famart .sweep{transform-origin:210px 210px}
.famart .sweep line{stroke:var(--acc);stroke-width:1.5;stroke-opacity:.7}
.famart .blip circle{fill:var(--cta)}
.famart .blip .halo{fill:none;stroke:var(--cta);stroke-width:1.5;transform-origin:center;transform-box:fill-box}
.famart .blip text{font:500 12px 'DM Mono',monospace;fill:var(--ink-soft)}
.famart .plane path{fill:var(--deep)}
.famart-cap{margin-top:14px;text-align:center;font:400 12.5px 'DM Mono',monospace;color:var(--ink-faint)}
.js .famart .sweep{animation:fasweep 6s linear infinite}
.js .famart .blip .halo{animation:fahalo 6s ease-out infinite}
.js .famart .b1 .halo{animation-delay:5.05s}.js .famart .b2 .halo{animation-delay:1.9s}.js .famart .b3 .halo{animation-delay:.15s}
@keyframes fasweep{to{transform:rotate(360deg)}}
@keyframes fahalo{0%{transform:scale(1);opacity:1}40%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .js .reveal .tspark .l,.js .reveal .tbars i,.js .reveal .ttrack i,.js .reveal .tdays i{animation:none !important;stroke-dashoffset:0;transform:none;width:var(--w);opacity:1}
  .js .reveal .tspark .f{opacity:.12}
  .famart .sweep,.famart .blip .halo{animation:none !important}
}
@media(max-width:900px){.tdays{grid-template-columns:repeat(13,1fr)}}

/* model page six-pack: the headline figures as instruments set into a panel */
.pan{margin-top:-44px;position:relative;z-index:3;border-radius:14px;padding:26px 26px 20px;background:linear-gradient(180deg,#2A323D,#1A2129);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px rgba(var(--deep-rgb),.4);border:1px solid #0E1319}
.pan::before{content:"";position:absolute;inset:0;border-radius:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 4px);pointer-events:none}
.pan .row{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.pan .inst{text-align:center}
.pan .screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6B7683,#2A323D);box-shadow:inset 0 0 0 1px #0E1319}
.pan .screw::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:#0E1319;transform:rotate(35deg)}
.pan .screw.tl{top:8px;left:8px}.pan .screw.tr{top:8px;right:8px}.pan .screw.bl{bottom:8px;left:8px}.pan .screw.br{bottom:8px;right:8px}
.pan .lbl{display:block;margin-top:14px;background:#0D1116;color:#DCE4EC;border:1px solid #3A4553;border-radius:3px;padding:9px 6px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pan .lbl b{display:block;font:700 22px/1 Sora,sans-serif;letter-spacing:-.02em;color:#fff;white-space:nowrap}.pan .lbl b .unit{font:500 11px 'DM Mono',monospace;color:#8FA0B3;margin-left:2px}
.pan .lbl small{display:block;margin-top:6px;font:400 10px/1.2 'DM Mono',monospace;letter-spacing:.04em;color:#8FA0B3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.g .face{fill:#0F141B}.g .bezel{fill:none;stroke:#3A4553;stroke-width:6}.g .bezel2{fill:none;stroke:#0A0E13;stroke-width:1.5}
.g .tick{stroke:#E8ECF1;stroke-width:1.6;stroke-linecap:round}.g .tick.minor{stroke-width:1;opacity:.55}
.g .num{font:500 9px 'DM Mono',monospace;fill:#D6DEE7;text-anchor:middle;dominant-baseline:middle}
.g .arc{fill:none;stroke-width:5;opacity:.9}
.g .plate{font:500 6.5px 'DM Mono',monospace;fill:#8FA0B3;text-anchor:middle;letter-spacing:.14em}
.g .readbox{fill:#000;stroke:#2B3440;stroke-width:1}.g .readout{font:500 9.5px 'DM Mono',monospace;fill:#fff;text-anchor:middle}
.g .needle{fill:#fff;transform-origin:50px 50px;transform:rotate(var(--deg,0deg));--from:-135deg}.g .needle.red{fill:var(--cta)}
.g-vsi .needle{--from:-90deg}
.g .hub{fill:#fff;stroke:#0F141B;stroke-width:1.5}
.g .hand{stroke:var(--cta);stroke-width:1;transform-origin:50px 50px}
.js .reveal .g .needle:not(.still){transform:rotate(var(--from))}
.js .reveal.in .g .needle:not(.still){transform:rotate(var(--deg));transition:transform 1.6s cubic-bezier(.3,1.4,.4,1) .2s}
.js .g .hand{animation:gspin 8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.js .reveal .g .needle{transform:rotate(var(--deg)) !important;transition:none !important}.js .g .hand{animation:none !important}}
@media(max-width:900px){.pan .row{grid-template-columns:repeat(3,1fr);gap:18px}.pan{padding:20px 18px 16px}}
@media(max-width:520px){.pan .row{grid-template-columns:1fr 1fr}}

/* state tile map (model page "Where they are") */
.smap{width:100%;height:auto;display:block;margin-top:6px}
.smap .st rect{fill:var(--sky-2);stroke:var(--hair);stroke-width:1}
.smap .st.has rect{fill:var(--acc);stroke:none}
.smap .st text{text-anchor:middle;font:500 10px 'DM Mono',monospace;fill:var(--ink-faint)}
.smap .st.has text{fill:#fff}
.smap .st.has .n{font-size:11px}
.smap .st.has rect{transition:transform .2s}
.js .reveal .smap .st.has rect{transform:scale(.6);transform-origin:20px 20px}
.js .reveal.in .smap .st.has rect{transform:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.smap-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font:400 12px 'DM Mono',monospace;color:var(--ink-faint)}
.smap-foot b{color:var(--ink);font-weight:500}

/* ============================================================ responsive */
.navtog{display:none}.navlinks-more{display:none}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.figure{min-height:220px}
.figure{max-width:100%}
.split .figure:not([style*="height"]),.two .figure:not([style*="height"]){aspect-ratio:4/3}
.phone{max-width:100%}
@media(max-width:900px){
  .tiles.four{grid-template-columns:repeat(2,1fr)}
  .two>*,.split>*,.prose-grid>*,.faq-grid>*{min-width:0}.panel{min-width:0}
  .histx{font-size:9px;gap:2px}.histx span{overflow:hidden;white-space:nowrap}.histx span:nth-child(even){visibility:hidden}
  .pagehero,.pagehero.short{min-height:0;max-height:none}
  .faq-grid .figure{height:auto;aspect-ratio:4/3}
  .mhero{min-height:0;max-height:none;display:block;padding-top:min(58vw,420px)}
  .mhero>img{height:min(58vw,420px)}
  .mhero::after{height:calc(min(58vw,420px) + 2px);background:linear-gradient(180deg,rgba(var(--deep-rgb),.08),rgba(var(--deep-rgb),.55) 70%,var(--deep) 100%)}
  .mhero .wrap{padding:22px 24px 40px}.mhero.has-tiles .wrap{padding-bottom:72px}
  .mhero h1{max-width:none}
  /* home hero stacks like the model hero: the photo on top (plane in view), the copy on the dark band below */
  .hero{min-height:0;display:block;padding-top:min(64vw,420px)}
  .hero>img{height:min(64vw,420px);object-position:62% 50%}
  .hero .wind{display:none}
  .hero>img,.mhero>img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hero::after{height:calc(min(64vw,420px) + 2px);background:linear-gradient(180deg,rgba(var(--deep-rgb),.02) 0%,rgba(var(--deep-rgb),.1) 55%,rgba(var(--deep-rgb),.75) 85%,var(--deep) 100%)}
  .hero .wrap{padding:18px 24px 36px}
  .hero-stats{gap:24px 32px}
  .sechead{flex-direction:column;align-items:flex-start;gap:14px}.sechead .spark{width:100%}
  .wrap{padding:0 24px}
  .pan .lbl b{font-size:19px}
}
@media(max-width:900px){
  /* nav: brand + CTA + hamburger; links drop down under the bar */
  header nav{height:64px;gap:12px;flex-wrap:wrap;position:relative}
  .brand{font-size:19px;margin-right:auto}
  .nav-cta{padding:10px 14px;font-size:14px}
  .navtog{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--white);cursor:pointer;align-items:center}
  .navtog span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .navtog-in:checked ~ .navtog span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtog-in:checked ~ .navtog span:nth-child(2){opacity:0}
  .navtog-in:checked ~ .navtog span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .navlinks{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--hair);box-shadow:0 18px 40px rgba(var(--deep-rgb),.12);padding:8px 0 14px;z-index:80}
  .navtog-in:checked ~ .navlinks{display:flex}
  .navlinks a{padding:14px 24px;border-top:1px solid var(--sky-2);font-size:16px;color:var(--ink)}
  .navlinks .navlinks-more{display:block}
}
@media(max-width:700px){
  .models,.steps{grid-template-columns:1fr}.week{gap:10px}.wk{padding:18px 16px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .about-stats{grid-template-columns:1fr}
  .cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{width:100%}
  .alertcta{padding:24px;margin-bottom:48px}.alertcta .btn{width:100%}
  .foot-bottom{flex-direction:column;gap:8px;align-items:flex-start}
  h1{font-size:clamp(30px,8.4vw,44px)}
  .lede{font-size:16.5px}.prose p{font-size:16px}
  .final .wrap{padding:64px 24px}
  .pan{padding:18px 14px 14px}.pan .row{gap:14px}
  /* tables collapse to stacked rows: title line, then the figures in one line */
  .tcard{padding:4px 14px}
  .tcard .tb,.tcard .tb tbody{display:block}
  .tcard .tb tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--hair)}
  .tcard .tb tr:last-child{border-bottom:0}
  .tcard .tb tr:first-child:has(th){display:none}
  .tcard .tb th{display:none}
  .tcard .tb td{display:block;padding:0;border:0;font-size:14px}
  .tcard .tb td:first-child{flex:1 1 100%}
  .tcard .tb td.num{text-align:left}
  .tcard .tb td.num:last-child{margin-left:auto}
  .tcard .tb .was{margin-right:6px}.tcard .tb .pct{margin-left:6px}
}
@media(max-width:480px){
  .wrap{padding:0 18px}header nav{gap:8px}.brand{font-size:18px;gap:8px}.brand img{width:26px;height:28px}.nav-cta{padding:9px 11px;font-size:13px}.navtog{width:38px;height:38px}
  .mc .ph{height:150px}
  .hero-stats{gap:18px 24px}.hero-stat b{font-size:28px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}.tile{padding:14px 14px 12px}.trend .tile b{font-size:24px}
  .tiles.four{grid-template-columns:1fr 1fr}
  .wk b{font-size:30px}
  .pan .row{grid-template-columns:1fr 1fr}
  .famart{max-width:320px}
}

/* Visually hidden, still read aloud. The hamburger carried aria-label on a
   <label>, where ARIA prohibits it, so it had no accessible name at all. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Links inside body prose were distinguishable by colour alone, which fails for
   readers with colour vision deficiency. Nav, buttons and cards are excluded:
   position and shape already make those obvious. */
.prose a:not(.btn),p.note a,p.lede a,.linklist a,.cap a,.sub a,.panel p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* Which cut it was is a row label, not content. Rendered from the attribute:
   "1st · Sep 12" on screen, "Sep 12" in the document. Repeated across 100 rows
   the ordinal put 'st sep' at 11.1% bigram density on /price-cuts/. */
.tb .sub[data-lab]::before{content:attr(data-lab)}

/* Read-this-morning dateline. Only on the pages whose figures actually move
   with the daily read; printing a date on unchanged editorial prose is the
   faking-freshness pattern. */
.dateline{margin-top:8px;font:500 12px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.dateline time{color:inherit}
.byline{margin-top:12px}.byline a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cite a{overflow-wrap:anywhere}