/* BPN — single stylesheet. */

/* 1. Fonts (self-hosted, relative to this file) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("assets/fonts/inter-var.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/instrument-serif-italic.woff2") format("woff2")}

/* 2. Tokens */
:root{
  --ink-rgb:17,17,17;--black:rgb(var(--ink-rgb));--charcoal:#1C1B18;--ivory:#F5F4F3;--limestone:#E7E5E2;--white:#FFFFFF;--ash:#A8A29B;--warm-gray:#6D655F;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-h1:clamp(40px,7vw,76px);--fs-h2:clamp(32px,4.8vw,56px);--fs-h3:clamp(20px,2.2vw,26px);
  --fs-lead:clamp(17px,1.4vw,20px);--fs-body:clamp(16px,1.1vw,18px);--fs-small:14px;--fs-mono:12px;
  --fs-stat:clamp(64px,9vw,96px);--fs-stat-sm:clamp(40px,6vw,64px);
  --fs-ghost:clamp(160px,30vw,520px);--fs-wordmark:clamp(96px,22vw,320px);--fs-email:clamp(32px,8vw,96px);
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;
  --section-pad:clamp(96px,14vw,192px);--gutter:clamp(20px,5vw,48px);--container:1200px;--container-narrow:760px;--gap:clamp(20px,3vw,40px);
  --white-45:rgba(255,255,255,.45);--white-30:rgba(255,255,255,.3);--white-14:rgba(255,255,255,.14);--white-07:rgba(255,255,255,.07);--white-035:rgba(255,255,255,.035);
  --black-45:rgba(var(--ink-rgb),.45);--black-16:rgba(var(--ink-rgb),.16);--black-08:rgba(var(--ink-rgb),.08);
  --grid:96px;--ease:cubic-bezier(.2,.7,.2,1);
  /* theme defaults = dark, so header, body gaps and focus rings resolve before any section class */
  --bg:var(--black);--surface:var(--charcoal);--fg:var(--white);--muted:var(--ash);--hairline:var(--white-14);--hairline-soft:var(--white-07);--bracket:var(--white-45);--btn-bg:var(--white);--btn-fg:var(--black)
}

/* 3. Reset */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--fs-body)/1.55 var(--sans);background:var(--black);color:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
strong,b{font-weight:600}
em,.serif{font-family:var(--serif);font-style:italic;font-weight:400}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;z-index:100;padding:15px 14px;background:var(--white);color:var(--black);font:500 14px/1 var(--sans);text-decoration:none}
.skip:focus{left:var(--gutter);top:var(--s-2)}

/* 4. Section theming: everything keys off these tokens */
.section--dark{--bg:var(--black);--surface:var(--charcoal);--fg:var(--white);--muted:var(--ash);--hairline:var(--white-14);--hairline-soft:var(--white-07);--bracket:var(--white-45);--btn-bg:var(--white);--btn-fg:var(--black);
  background-color:var(--bg);color:var(--fg);
  background-image:linear-gradient(var(--white-035) 1px,transparent 1px),linear-gradient(90deg,var(--white-035) 1px,transparent 1px);background-size:var(--grid) var(--grid);background-position:center top}
.section--light{--bg:var(--ivory);--surface:var(--limestone);--fg:var(--black);--muted:var(--warm-gray);--hairline:var(--black-16);--hairline-soft:var(--black-08);--bracket:var(--black-45);--btn-bg:var(--black);--btn-fg:var(--white);background-color:var(--bg);color:var(--fg)}
.section{position:relative;isolation:isolate;overflow:hidden;padding:var(--section-pad) 0}
.section>.container{position:relative;z-index:1}
.section--band{padding:var(--s-6) 0}
.section--tight{--section-pad:clamp(96px,10vw,144px)}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.container--narrow{width:min(100% - 2*var(--gutter),var(--container-narrow))}

/* 5. Type */
.h1{font:500 var(--fs-h1)/1.02 var(--sans);letter-spacing:-.03em;max-width:26ch;text-wrap:balance;overflow-wrap:anywhere}
.h2{font:500 var(--fs-h2)/1.06 var(--sans);letter-spacing:-.025em;max-width:22ch;text-wrap:balance}
.h3{font:500 var(--fs-h3)/1.25 var(--sans);letter-spacing:-.015em}
.h1 em,.h2 em{letter-spacing:0}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:62ch}
.prose{max-width:65ch}
.prose p+p{margin-top:1em}
.prose>h2{margin:var(--s-5) 0 var(--s-2)}
.prose>h2:first-child{margin-top:0}
.prose>.facts{margin-top:var(--s-3);grid-template-columns:minmax(0,1fr)}
.small{font-size:var(--fs-small)}
.muted{color:var(--muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mono,.num{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase}
.num{color:var(--muted)}
.serif-line{font:italic 400 var(--fs-h1)/1.05 var(--serif);letter-spacing:0;max-width:20ch;text-wrap:balance}
.link{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--hairline);padding-bottom:3px;transition:border-color .2s var(--ease)}
.link:hover{border-color:var(--fg)}
.aside{font-size:var(--fs-small);line-height:1.6;color:var(--muted);max-width:34ch}
.aside--end{margin-left:auto;margin-top:var(--s-6)}
.aside a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--hairline)}
.aside a:hover{border-color:var(--fg)}

/* 6. Components */
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--hairline);border-radius:999px;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.section-head{display:grid;gap:var(--s-3);justify-items:start;margin-bottom:var(--s-6)}
.section-head .lead{margin-top:var(--s-1);color:var(--muted)}
.section-head .actions{margin-top:var(--s-3)}

.rule{border:0;border-top:1px solid var(--hairline);margin:0}
.rows{border-top:1px solid var(--hairline)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-2) var(--s-4);align-items:baseline;padding:var(--s-4) 0;border-bottom:1px solid var(--hairline)}
.row p{max-width:48ch}

.brackets{--bl:18px;padding:var(--s-5) var(--s-4);background-repeat:no-repeat;
  background-image:linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket)),linear-gradient(var(--bracket),var(--bracket));
  background-size:var(--bl) 1px,1px var(--bl),var(--bl) 1px,1px var(--bl),var(--bl) 1px,1px var(--bl),var(--bl) 1px,1px var(--bl);
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5) 0 var(--s-4);border-top:1px solid var(--hairline);color:inherit;text-decoration:none;transition:border-color .25s var(--ease)}
.card__head{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-2)}
a.card .card__head{margin-bottom:var(--s-5)}
.card__arrow{margin-left:auto;color:var(--fg);transition:transform .4s var(--ease)}
.card p{color:var(--fg);max-width:40ch}
a.card:hover{border-top-color:var(--fg)}
a.card:hover .card__arrow{transform:translateX(6px)}
.card--flag{--fg:var(--black);--muted:var(--warm-gray);--hairline:var(--black-16);--bracket:var(--black-45);padding:var(--s-5) var(--s-4);border-top:0;background-color:var(--ivory);color:var(--fg)}
a.card--flag:hover{--bracket:var(--black)}
a.card--flag:focus-visible{outline-offset:-4px}
.section--light .card--flag{--fg:var(--white);--muted:var(--ash);--hairline:var(--white-14);--bracket:var(--white-45);background-color:var(--black)}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s-2);min-width:0;container-type:inline-size}
.stat__num{font:500 min(var(--fs-stat),13cqi)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat__cap{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);max-width:22ch;line-height:1.5}
.stats--sm{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats--sm .stat__num{font-size:min(var(--fs-stat-sm),13cqi)}
.stats--stagger>:nth-child(even){margin-top:clamp(0px,(100vw - 820px)*.15,64px)}
.notes{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3) var(--gap);margin-top:var(--s-5)}

.ghost{position:absolute;z-index:0;right:-.04em;bottom:-.18em;margin:0;font:600 var(--fs-ghost)/1 var(--sans);letter-spacing:-.05em;color:var(--fg);opacity:.05;white-space:nowrap;pointer-events:none;user-select:none}
.section--tight .ghost{bottom:var(--s-7)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border:1px solid transparent;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:500 15px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:opacity .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{opacity:.82}
.btn--outline{background:transparent;color:var(--fg);border-color:var(--hairline)}
.btn--outline:hover{opacity:1;border-color:var(--fg)}
.btn--sm{height:38px;padding:0 18px;font-size:13px}
.actions--after{margin-top:var(--s-6)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.actions .link{padding-top:10px}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6) var(--gap);align-items:start}
.split>.section-head{margin-bottom:0}
.split>.aside{justify-self:end;padding-top:clamp(0px,6vw,88px)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.step{display:grid;gap:var(--s-2);align-content:start;padding-top:var(--s-3);border-top:1px solid var(--hairline)}
.step .num{margin-bottom:var(--s-3)}
.step p{max-width:36ch}

.stack{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:var(--s-6) 0;padding:var(--s-4) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--fg)}
.stack__label{flex-basis:100%;margin-bottom:var(--s-1);font-size:10px;color:var(--muted)}
.stack span:not(.stack__label):not(:last-child)::after{content:"\00B7";margin-left:14px;color:var(--muted)}

.divider-line{margin:0;padding:clamp(32px,4vw,56px);border:1px dashed var(--hairline);font-family:var(--mono);font-size:clamp(22px,4.2vw,48px);line-height:1.2;letter-spacing:.02em;text-transform:uppercase;text-align:center;text-wrap:balance}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap);border-top:1px solid var(--hairline)}
.facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-2);padding:var(--s-2) 0;border-bottom:1px solid var(--hairline)}
.facts dt{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.facts a{text-decoration:none;border-bottom:1px solid var(--hairline)}

p:has(>.email-xl){container-type:inline-size}
.email-xl{display:inline-block;max-width:100%;font:500 min(var(--fs-email),11cqi)/1 var(--sans);letter-spacing:-.04em;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:.08em;overflow-wrap:anywhere;transition:border-color .2s var(--ease)}
.email-xl:hover{border-color:var(--fg)}

/* 7. Header and nav (dark, but not a .section: no grid, no overflow clip) */
.site-header{position:relative;z-index:20;background-color:var(--black);background-image:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:clamp(80px,6.5vw,92px);border-bottom:1px solid var(--hairline)}
.wordmark{font:600 19px/1 var(--sans);letter-spacing:-.05em;color:var(--fg);text-decoration:none}
.nav .wordmark{font:700 clamp(44px,3.4vw,48px)/1 var(--sans);letter-spacing:-.065em;margin-left:-.06em}
.nav__menu{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-left:auto}
.nav__tools{display:flex;align-items:center;gap:var(--s-2)}
.nav__lang{display:inline-flex;align-items:center;height:38px;padding:0 20px;border:1px solid var(--hairline);border-radius:999px;color:var(--fg);font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:border-color .2s var(--ease)}
.nav__lang:hover{border-color:var(--fg)}
.nav__menu a{font:500 14px/1 var(--sans);color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--fg)}
.nav__toggle{display:none;align-items:center;gap:8px;height:38px;padding:0 12px 0 14px;border:1px solid var(--hairline);border-radius:999px;background:transparent;color:var(--fg);font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .2s var(--ease)}
.nav__toggle[aria-expanded="true"]{border-color:var(--fg)}
.nav__toggle-glyph{position:relative;top:-2px;font:400 16px/1 var(--sans);color:var(--fg);transition:transform .5s var(--ease)}
.nav__toggle[aria-expanded="true"] .nav__toggle-glyph{transform:rotate(45deg)}

/* 8. Hero, media, waveform */
.hero{min-height:min(70svh,700px);display:flex;flex-direction:column;padding:var(--s-3) 0 calc(var(--s-6) + 120px)}
.hero:not(:has(.hero__wave)){padding-bottom:var(--s-6)}
.hero>.container{z-index:2;display:flex;flex-direction:column;flex:1 1 auto}
.hero__content{margin:auto 0;padding-top:var(--s-4)}
.hero .h1{margin:var(--s-3) 0 var(--s-4)}
.hero .lead{color:var(--muted)}
.hero .actions{margin-top:var(--s-5)}
.hero__wave{position:absolute;left:0;right:0;bottom:0;z-index:1;height:120px;opacity:.35;pointer-events:none}
.hero__wave svg{position:absolute;left:50%;bottom:0;width:max(100%,1200px);max-width:none;height:100%;transform:translateX(-50%)}
.hero.hero--video{padding-bottom:calc(var(--s-6) + 120px)}
.hero__video{position:absolute;left:0;right:0;bottom:0;z-index:0;height:min(64%,520px);pointer-events:none;mix-blend-mode:screen}
.hero__video video{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero__video--full{height:100%}
.hero__video--full video{object-position:center}
.hero__video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.35) 42%,transparent 68%);mix-blend-mode:multiply}
@media (min-width:901px){.hero--video .lead{max-width:48ch}
  .hero__video--company-layers::after{background:linear-gradient(90deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.6) 48%,rgba(0,0,0,.2) 66%,transparent 80%)}}
@media (max-width:900px){.hero__video{height:min(52%,420px)}
  .hero__video::after{background:linear-gradient(180deg,rgba(0,0,0,.9) 0,transparent 45%)}}
.ruler{position:absolute;left:0;right:0;bottom:0;height:12px;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(90deg,var(--white-30) 0 1px,transparent 1px var(--grid)),repeating-linear-gradient(90deg,var(--white-14) 0 1px,transparent 1px 16px);background-size:100% 12px,100% 6px;background-position:left bottom,left bottom;background-repeat:no-repeat}

/* 9. Audio player (voice-ai). No JS = fallback paragraph; JS + mp3 error = fallback; JS + mp3 = player */
.demo__item{border-top:1px solid var(--hairline-soft);padding-top:var(--s-4)}
.demo__item+.demo__item{margin-top:var(--s-5)}
.demo__label{margin-bottom:var(--s-3)}
.demo__caption{margin-top:var(--s-3);color:var(--muted)}
.player{display:none;align-items:center;gap:var(--s-3);background:var(--surface);padding:var(--s-4)}
html.js .player:not(.no-demo){display:flex}
html.js .player:not(.no-demo)+.player__fallback{display:none}
.player__btn{flex:none;width:56px;height:56px;border-radius:50%;border:1px solid transparent;background:var(--btn-bg);color:var(--btn-fg);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.player__track{position:relative;flex:1;height:24px;cursor:pointer}
.player__track::before{content:'';position:absolute;left:0;right:0;top:11px;height:2px;background:var(--bracket)}
.player__bar{position:absolute;left:0;right:0;top:11px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left center}
.player__time{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.player__note{margin-top:var(--s-3)}
.transcript{margin-top:var(--s-3);border-top:1px solid var(--hairline-soft);padding-top:var(--s-3)}
.transcript>summary{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--muted);cursor:pointer}
.transcript>summary:hover{color:var(--fg)}
.transcript__lines{margin-top:var(--s-3);display:grid;grid-template-columns:max-content 1fr;gap:var(--s-2) var(--s-3);color:var(--muted)}
.transcript__lines dt{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.06em;white-space:nowrap}
.transcript__lines dd{margin:0}
@media (max-width:640px){.transcript__lines{grid-template-columns:1fr;gap:0}.transcript__lines dt{margin-top:var(--s-3)}}

/* 10. Footer */
.footer{padding:var(--s-7) 0 var(--s-4)}
.footer>.container{container-type:inline-size}
.footer__wordmark{font:600 56.684cqw/.72 var(--sans);letter-spacing:-.075em;text-indent:-.074em;white-space:nowrap;overflow:hidden;margin:0 0 var(--s-3);padding:0;color:var(--fg);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.footer__cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.footer__cell{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-3);background:var(--bg)}
.footer__mail{font:500 var(--fs-h3)/1.2 var(--sans);letter-spacing:-.015em;color:var(--fg);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--hairline);overflow-wrap:anywhere;transition:text-decoration-color .2s var(--ease)}
.footer__mail:hover{text-decoration-color:var(--fg)}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px var(--s-3);font-size:var(--fs-small)}
.footer__nav a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.footer__nav a:hover{color:var(--fg)}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px var(--s-4);margin-top:var(--s-6);padding-top:var(--s-3);border-top:1px dashed var(--hairline);color:var(--muted)}

/* 11. Reveal: hidden only under html.js, which only exists when IntersectionObserver does */
html.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
:is(.grid,.stats,.steps,.rows)>.reveal:nth-child(2){transition-delay:.05s}
:is(.grid,.stats,.steps,.rows)>.reveal:nth-child(3){transition-delay:.1s}
:is(.grid,.stats,.steps,.rows)>.reveal:nth-child(4){transition-delay:.15s}

/* 12. Breakpoints: 820 (nav, columns, overlay), 640 (stats grid, ghost, footer cells) and 560 (single column) */
@media (max-width:820px){
  @supports selector(:has(*)){
  html.js .nav{gap:var(--s-2)}
  html.js .nav__toggle{display:inline-flex;align-items:center;margin-left:auto}
  html.js .nav__menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:var(--s-4) var(--gutter) var(--s-5);background:var(--black);border-bottom:1px solid var(--hairline)}
  html.js .nav__menu a{font-size:17px;padding-block:14px;margin-block:-14px}
  html.js .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu{display:flex}
  }
  .grid--3,.grid--4,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3>.card--flag{grid-column:1/-1}
  .split{grid-template-columns:minmax(0,1fr)}
  .split>.aside{justify-self:start;padding-top:0}
  .hero .lead{color:var(--fg)}
  .split>.section-head .actions{margin-top:0}
}
@media (max-width:640px){
  .ghost{font-size:clamp(88px,26vw,150px);opacity:.07}
  .stats{gap:var(--s-4);grid-template-columns:1fr}
  .stat{padding-top:var(--s-3);border-top:1px solid var(--hairline)}
  .brackets{padding:var(--s-4) var(--s-3)}
  .footer__cells{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4,.steps,.facts{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr)}
  .actions .btn{width:100%}
  .hero__content{padding-top:0}
  .hero .h1{margin-bottom:var(--s-3)}
  .hero .actions{margin-top:var(--s-4)}
  .divider-line{padding:var(--s-4) var(--s-3);font-size:clamp(28px,8.6vw,36px)}
  .divider-line .clause{display:block}
  .facts div{grid-template-columns:minmax(0,1fr)}
}

/* 13. Mobile alignment: one left edge, one vertical scale.
   Under 820px every text block starts on the container's left edge. Anything
   carrying a surface (flagship card, player, stats frame, footer cells) runs
   full-bleed so its own text lands on that same edge instead of one inset in. */
@media (max-width:820px){
  /* nothing pushes itself right or centres itself */
  .aside--end{margin-left:0}
  .notes,.footer__legal{justify-content:flex-start}
  .stack{justify-content:flex-start;text-align:left}
  /* the flagship is a list item, not a slab. On one narrow column an inverted
     full-width box reads as a new section, so it drops the ground and the
     corner ticks and keeps only the rule its siblings have; its weight comes
     from sitting first and from carrying the 01. */
  .card--flag,.section--light .card--flag{--fg:inherit;--muted:inherit;--hairline:inherit;--bracket:inherit;
    margin-inline:0;padding:var(--s-3) 0 0;background-color:transparent;background-image:none;
    border-top:1px solid var(--hairline)}
  /* corner ticks need room on both sides; at this width they land on the
     screen edge and get clipped, so the frame goes and the text keeps the rail */
  .brackets{margin-inline:0;padding-inline:0;background-image:none}
  /* the one surface that stays: it runs edge to edge and pads back to the rail */
  .player{margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .footer__cells{margin-inline:0;border-inline:0}
  .footer__cell{padding-inline:0}
  /* the index reads as columns instead of a ragged wrapped row */
  .footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  /* every link is at least a 44px finger. The padding grows the hit area and the
     matching negative margin gives the space back, so nothing moves on screen. */
  .nav__toggle,.nav__lang{min-height:44px}
  .wordmark{padding-block:6px;margin-block:-6px}
  .actions .link{padding-top:22px;margin-top:-12px}
  .footer__legal .wordmark{padding-block:13px;margin-block:-13px}
  .footer__nav a,.footer__mail{padding-block:12px;margin-block:-12px}
  /* the same 44px finger on the contact links that live inside the copy:
     inline links take padding without moving the line, blocks give it back */
  .email-xl{padding-top:9px;margin-top:-9px}
  .facts a{padding-block:13px}
  /* keep the 44px tap target, but underline the text instead of the padded
     box, or the rule floats 13px under the line and reads as a stray hairline */
  .aside a{display:inline-block;padding-block:13px;margin-block:-13px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:3px}
  .transcript>summary{padding-block:13px;margin-block:-13px}
  .player__track{height:44px}
  .player__track::before,.player__bar{top:21px}
}
@media (max-width:640px){
  /* one scale: a section breathes about three times a block, not ten times */
  .section,.section--tight{--section-pad:88px}
  :root{--gap:56px}
  /* each hairline belongs to the block beneath it: 24 under the rule, 56 over
     the next one, so a rule never floats midway between two blocks */
  .card{padding:var(--s-3) 0 0}
  /* the corner frame is gone on phones, so its inset goes with it; the
     flagship keeps the same ground as every other card */
  .brackets{padding:0}
  .card.brackets{padding:var(--s-3) 0 0}
  /* a label belongs to the title under it, not to the rule above it */
  a.card .card__head{margin-bottom:var(--s-2)}
  .step .num{margin-bottom:0}
  /* one gap between sections everywhere: the hero, the black band and the
     footer used to breathe 152 and 184 where every other seam breathes 176 */
  .hero:not(:has(.hero__wave)){padding-bottom:88px}
  .section--band{padding:88px 0}
  .footer{padding-top:88px}
  .footer__legal{margin-top:var(--s-4);gap:var(--s-3) var(--s-4)}
  .hero .actions .link:only-child{font-size:24px;line-height:1.35;letter-spacing:.04em;border-bottom:0;text-decoration:underline;text-decoration-color:var(--hairline);text-decoration-thickness:1px;text-underline-offset:6px}
  .hero .actions .link:only-child:hover{text-decoration-color:var(--fg)}
  /* the background numeral has no room here and washes over the links */
  .ghost{display:none}
  /* one column here, so the two-column 13cqi cap has no job: let the numeral
     use its own token instead of shrinking to subtitle size */
  .stat__num{font-size:var(--fs-stat)}
  .stats{gap:var(--s-3)}
  .stat{gap:var(--s-1)}
  /* same rule as the cards: 24 under the hairline, 32 over the next one */
  .row{padding:var(--s-3) 0 var(--s-4)}
}

/* 14. Reduced motion and print: nothing hidden, nothing moving */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero__video video{display:none}
  .hero__video{background:center bottom/cover no-repeat}
  .hero__video--home-flow{background-image:url("assets/media/home-flow.webp")}
  .hero__video--automation-grid{background-image:url("assets/media/automation-grid.webp")}
  .hero__video--platform-control{background-image:url("assets/media/platform-control.webp")}
  .hero__video--company-layers{background-image:url("assets/media/company-layers.webp")}
  .hero__video--voice-ai-wave{background-image:url("assets/media/voice-ai-wave.webp")}
}
@media print{
  html.js .reveal{opacity:1;transform:none;transition:none}
  .section{overflow:visible}
}