/* /about, the emit page, Apple-product-page treatment (it scrolls: the one-viewport lock (ch)
   applies only to app surfaces). Standalone: tokens.css, topbar.css, wordmark.css and this file,
   never the player or sendbox CSS, whose html/body locks would stop the page scrolling. The real
   cards come in as framed pages (.ab-frame), so their CSS stays in their own documents.
   Huge type, tiny amounts of it; sections rise in on scroll (.io/.in, disabled under
   prefers-reduced-motion). Primary CTA is blue; amber stays the small-link accent.
   /download loads this file as its base too: .ab-big, .ab-round, .ab-band, .ab-label, .ab-bigH,
   .ab-bigSub, .ab-pieceVis, .ab-soonTag and .io/.float/.in are shared, so change them for both. */

*{ box-sizing:border-box; }
html,body{ margin:0; }
/* overflow-x:clip (not hidden) prevents a decorative bleed — the product-moment glow, the scaled
   card — from widening the page and shifting centred content off the right edge on narrow screens,
   WITHOUT creating a scroll container that would break the sticky top bar. */
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; }
body{ background:var(--base); color:var(--text); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

:root{ --accent:#E46F40; --ok:#30D158;     /* accent = the site's orange (small links; amber #FF9F0A until 30 Oct), ok-dot = green */
  /* ---- THE TYPE SCALE — every size on the page maps to one of these, no one-offs ----
     display   hero H1 only
     statement all three big-statement H2s, identical
     intro     section intro lines (the story intro, the closing pitch)
     sub       every statement/hero sub-line, identical
     small     captions + card body text (player caption, lineage captions, who-cards)
     eyebrow   every section label, identical small mono
     foot      the detail footnote columns */
  --t-display:clamp(33px,6vw,84px);   /* the biggest thing on the page, but not wall-filling (3 lines max) */
  --t-statement:clamp(32px,6.2vw,84px);
  --t-intro:clamp(22px,3vw,34px);
  --t-sub:clamp(16px,1.9vw,21px);
  --t-small:14.5px;
  --t-card:19px;
  --t-eyebrow:12.5px;
  --t-foot:13px;
  /* ONE side gutter everywhere — comfortable on mobile (24px min), unchanged feel on desktop */
  --gutter:clamp(24px,4.5vw,48px);
}

a{ color:inherit; }
/* bold-in-body: the key phrase in every grey line steps up to near-white semibold */
b{ font-weight:600; color:rgba(255,255,255,.92); }
.ab-link{ color:var(--accent); text-decoration:none; font-size:14px; font-weight:500; }
.ab-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* gradient phrases — dubplate gold (sampled from the groove highlight), brand blue, and the
   fade-out (last word dissolves toward the background) */
.ab-gGold{ background:linear-gradient(97deg,#c98a45 0%,#e8bc72 45%,#f7e3b0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ab-gBlue{ background:linear-gradient(97deg,#de7c57 0%,#eaa287 60%,#f5c3ae 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ab-gFade{ background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.14) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- scroll-in animation: rise + fade. --d = per-element stagger delay ---------------------- */
.io{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--d,0s),
  transform .8s cubic-bezier(.22,.61,.36,1) var(--d,0s); will-change:opacity,transform; }
.io.float{ transform:translateY(48px) scale(.97); transition-duration:1s,1s; }
.io.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .io, .io.float{ opacity:1; transform:none; transition:none; }
}

/* ---- 1 · TONAL BANDS: alternate chapters sit in lifted-charcoal rounded containers (Apple-style),
   inset from the viewport so the near-black base shows around the corners. .ab-round = same rounded
   inset geometry for full-bleed PHOTO sections (big1), without the charcoal fill. ---- */
.ab-band, .ab-round{ width:min(1220px, calc(100% - 2*clamp(12px,1.8vw,22px)));
  margin:clamp(16px,2.2vw,28px) auto; border-radius:clamp(26px,3.5vw,44px); }
.ab-band{ background:#17171a; }
.ab-round{ width:min(1400px, calc(100% - 2*clamp(12px,1.8vw,22px))); overflow:hidden;
  border-top:1px solid rgba(255,255,255,.14); }   /* hairline rim so the band top READS when it peeks into the hero viewport */
.ab-sec.ab-band{ max-width:none; padding-left:clamp(28px,5vw,64px); padding-right:clamp(28px,5vw,64px); }

/* ---- shared section shell ---------------------------------------------------------------- */
.ab-sec{ max-width:1080px; margin:0 auto; padding:clamp(48px,7vw,84px) var(--gutter); }
/* ONE eyebrow style for every section label — legible tertiary, everywhere the same */
.ab-label{ font:700 13px/1 var(--ui); letter-spacing:.06em; color:#fff;
  margin-bottom:clamp(18px,2.4vw,26px); }

/* ---- page chrome: the SHARED top-bar component (topbar.css) — identical to the homepage corner.
   Absolute (not fixed) here so it scrolls away with the hero: transparent over the hero, no band. */
.sb-topbar{ position:absolute; }
.sb-topbar::before{ display:none; }   /* the hero has its own scrim; the corner scrim greyed the headline's first word */
/* blue pill primary CTA (redesign spec) */
.ab-cta{ display:inline-flex; align-items:center; justify-content:center; background:var(--blue); color:#fff;
  font-weight:600; text-decoration:none; border-radius:999px; white-space:nowrap; transition:background .15s; }
.ab-cta:hover{ background:var(--blue-hover); }
.ab-cta:active{ background:var(--blue-pressed); }
.ab-cta.sm{ font-size:14px; padding:9px 20px; }
.ab-cta.lg{ font-size:16.5px; padding:16px 40px; }
/* mid-page conversion points: one quiet centred pill with generous air, never a banner/box */
.ab-ctaRow{ display:flex; justify-content:center; padding:clamp(40px,6vw,72px) 0 clamp(8px,1.5vw,16px); }
/* Sid's button words are verbatim, capitals included ("send your music with emit, it's FREE"), so
   nothing here may lowercase them. At 16.5px they run wider than a phone's column inside a band,
   so phones get a step down and tighter sides, and on the narrowest screens the pill may wrap,
   balanced, rather than push the page sideways or leave "FREE" alone on a line. */
.ab-cta{ text-transform:none; }
@media (max-width:480px){
  .ab-cta.lg{ white-space:normal; text-wrap:balance; text-align:center; max-width:100%;
    padding:15px 16px; font-size:15px; line-height:1.3; }
}

/* ---- ONE photographic family: every real photo on the page gets the same dark treatment so
   they sit together on the near-black base (type contrast comes from the scrims on top). ---- */
.ab-heroBg img, .ab-linImg img{ filter:brightness(.68) saturate(.85); }

/* ---- 1 · HERO: full screen over the dubplate photo; the photo READS (lit arc anchored
   right/lower-right), darkening is LOCAL behind the type, not a full-frame wash --------------- */
.ab-hero{ position:relative; min-height:calc(100svh - 92px); display:flex; align-items:center; overflow:hidden;
  padding:clamp(64px,10vh,120px) var(--gutter) 0; }   /* top pad clears the fixed wordmark with air (Sid); -72px: the next rounded band peeks into the first viewport ("there's more") */
.ab-heroBg{ position:absolute; inset:0; z-index:0; }
.ab-heroBg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:72% 60%; filter:brightness(.85) saturate(.9); }
/* local scrim: near-black only over the type block (left), fading out well before the arc;
   plus a quiet bottom fade into the next section */
.ab-heroBg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(12,12,14,.88) 0%, rgba(12,12,14,.6) 32%, rgba(12,12,14,.16) 56%, rgba(12,12,14,0) 72%),
             linear-gradient(180deg, rgba(12,12,14,.25) 0%, rgba(12,12,14,0) 22%, rgba(12,12,14,0) 76%, var(--base) 100%); }
.ab-heroIn{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; gap:clamp(20px,3vw,30px); width:100%; max-width:1180px; margin:0 auto; padding-bottom:4vh; }
.ab-heroH{ margin:0; font-weight:800; font-size:var(--t-display); line-height:1.03;
  letter-spacing:-.03em; text-wrap:balance; overflow-wrap:break-word; max-width:16ch; }
/* hero sub sits one step above the shared sub scale */
.ab-heroSub{ margin:0; font-size:clamp(17px,2.2vw,24px); line-height:1.5; color:rgba(255,255,255,.72);
  max-width:34ch; text-wrap:balance; }
/* the emotional beat — same family as the sub, a touch brighter; the last line before the CTA */
.ab-heroBeat{ color:rgba(255,255,255,.92); }
/* cold-reader explainer — one plain centred block directly under the hero */
.ab-intro{ max-width:720px; margin:0 auto; padding:clamp(40px,7vh,88px) var(--gutter); text-align:center; }
.ab-intro p{ margin:0; font-size:clamp(17px,2vw,21px); line-height:1.6; color:rgba(255,255,255,.7); text-wrap:balance; }
/* who it's for — a single lead statement (replaces the old card grid) */
.ab-whoLead{ max-width:760px; margin:6px auto 0; font-size:clamp(18px,2.1vw,23px); line-height:1.6;
  color:rgba(255,255,255,.72); text-align:center; text-wrap:balance; }
.ab-whoLead b{ color:#fff; }
/* who it's for, 2026-08-04 rebuild §7: labelled lines — label in the bold register, rest quiet.
   Same measure and centring as the lead it replaces. */
.ab-whoList{ max-width:760px; margin:6px auto 0; display:flex; flex-direction:column; gap:12px; }
.ab-whoList p{ margin:0; font-size:clamp(17px,1.9vw,21px); line-height:1.55;
  color:rgba(255,255,255,.55); text-align:center; text-wrap:balance; }
.ab-whoList b{ color:#fff; font-weight:600; }
@media (max-width:640px){
  /* mobile: the lit arc lives in the upper 2/3 of the 9:16 crop and should READ — content drops
     to the bottom, darkening local to the lower third only */
  .ab-hero{ align-items:flex-end; padding-bottom:9svh; }
  .ab-heroBg::after{ background:linear-gradient(180deg, rgba(12,12,14,.3) 0%, rgba(12,12,14,0) 26%, rgba(12,12,14,0) 52%, rgba(12,12,14,.86) 78%, var(--base) 100%); }
}

/* ---- 2 · PRODUCT MOMENT: the real card, centre stage --------------------------------------- */
/* stage + caption get the shared side gutter so a showcase never runs to the screen edge on mobile */
.ab-momentStage{ position:relative; z-index:1; max-width:100%; padding:0 var(--gutter); }
/* the control pair: expired and downloads-on, side by side at desktop, stacked at phone width */
.ab-momentPair{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,44px); justify-items:center; max-width:920px; margin:0 auto;
  padding:0 var(--gutter); }
.ab-momentPair .ab-momentStage{ padding:0; }
@media (max-width:700px){ .ab-momentPair{ grid-template-columns:1fr; gap:26px; } }
/* the live section's stage: the pieceVis frame at showcase width, empty until the 1.3.0 Sender
   face is shot (about.html says why) */
.ab-liveVis{ width:min(380px,86vw); margin:0 auto; }
.ab-glow{ position:absolute; inset:-14% -26%; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(48% 44% at 50% 34%, rgba(228,111,64,.20), transparent 68%),
             radial-gradient(40% 36% at 62% 66%, rgba(255,159,10,.10), transparent 70%); }
.ab-momentLine{ position:relative; z-index:1; margin:0; font-size:var(--t-small); line-height:1.55;
  color:rgba(255,255,255,.6); text-align:center; padding:0 var(--gutter); }

/* THE REAL CARDS, FRAMED (Sid, 28 Sept, rule 12). An .ab-frame holds the listener page itself at a
   demo name (about.html), so this file draws no card of its own. The page renders at a fixed
   viewport, --fw by --fh, scaled by --s; the frame reserves exactly the scaled box.
   The viewport stays portrait, so the rotate cover (landscape, 540 tall or less, on touch) never
   shows. 560 by 900 gives the desktop card: wider than 480, and taller than 820, below which the
   well compacts. Phones get the 390 by 844 phone form instead, because the desktop card shrunk to
   a phone column is too small to read. The ring is a shadow, not a border, so it crops nothing. */
.ab-frame{ --fw:560px; --fh:900px; --s:.78; position:relative; z-index:1; flex:none; overflow:hidden;
  width:calc(var(--fw) * var(--s)); height:calc(var(--fh) * var(--s)); border-radius:22px;
  background:#0C0C0E; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.55); }
.ab-frame iframe{ position:absolute; top:0; left:0; display:block; width:var(--fw); height:var(--fh);
  border:0; transform:scale(var(--s)); transform-origin:0 0; pointer-events:none; }
/* the pieces tile: the phone form, scaled to its tile by about.html's script; this --s is only the
   fallback, small enough for the smallest tile */
.ab-frame.phone{ --fw:390px; --fh:844px; --s:.21; border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 14px 36px rgba(0,0,0,.5); }
#big3 .ab-frame{ --s:.66; }
@media (max-width:899px){ #big2 .ab-frame{ --s:.7; } #big3 .ab-frame{ --s:.54; } }
@media (max-width:700px){ #big3 .ab-frame{ --s:.6; } }
@media (max-width:640px){
  #big2 .ab-frame, #big3 .ab-frame{ --fw:390px; --fh:844px; }
  #big2 .ab-frame{ --s:.8; }
  #big3 .ab-frame{ --s:.72; }
}
@media (max-width:380px){ #big2 .ab-frame{ --s:.68; } #big3 .ab-frame{ --s:.64; } }

/* ---- 3 · BIG STATEMENTS: one idea each, full-bleed image slots ------------------------------ */
.ab-big{ position:relative; min-height:86svh; display:flex; align-items:center; overflow:hidden; }
.ab-bigBg{ position:absolute; inset:0; z-index:0;
  /* placeholder until the supplied imagery lands (acetate disc macro / cutting lathe) */
  background:radial-gradient(90% 120% at 20% 10%, #131318 0%, var(--base) 60%),
             radial-gradient(60% 80% at 85% 90%, rgba(228,111,64,.05), transparent 70%); }
.ab-bigBg.alt{ background:radial-gradient(90% 120% at 80% 15%, #1d1c22 0%, #17171a 62%),
             radial-gradient(50% 70% at 12% 85%, rgba(255,159,10,.05), transparent 70%); }
.ab-bigBg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ab-bigBg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,12,14,.55), rgba(12,12,14,.25) 45%, rgba(12,12,14,.6)); }
/* big1: the studio console full-bleed (the photo that proves the sentence). SSL is brighter and
   busier than the disc, so it takes a deeper cut; the type sits left, so the scrim leans left and
   fades to base at both edges for the section joins */
.ab-bigBg.photo img{ filter:brightness(.55) saturate(.8); }
.ab-bigBg.photo::after{ background:linear-gradient(100deg, rgba(12,12,14,.88) 0%, rgba(12,12,14,.58) 40%, rgba(12,12,14,.2) 72%, rgba(12,12,14,.12) 100%); }
@media (max-width:640px){
  /* phones: the type band crosses the bright DAW screen — deepen the veil through the middle */
  .ab-bigBg.photo::after{ background:linear-gradient(180deg, rgba(12,12,14,.35) 0%, rgba(12,12,14,.68) 32%, rgba(12,12,14,.68) 64%, rgba(12,12,14,.35) 100%); }
}
/* big3: near-black, the disc's arc GHOSTS in across the lower-left corner, barely there */
.ab-bigBg.ghost{ background:var(--base); }
.ab-bigBg.ghost img{ inset:auto; width:150%; height:auto; left:-58%; bottom:-52%;
  opacity:.5; filter:brightness(.6) saturate(.8); }
.ab-bigBg.ghost::after{ background:radial-gradient(90% 90% at 0% 100%, rgba(12,12,14,.1) 0%, rgba(12,12,14,.72) 60%, var(--base) 100%),
  linear-gradient(180deg, var(--base) 0%, rgba(12,12,14,.2) 20%, rgba(12,12,14,.2) 80%, var(--base) 100%); }
.ab-bigIn{ position:relative; z-index:1; width:100%; max-width:1180px; margin:0 auto;
  padding:0 var(--gutter); display:flex; flex-direction:column; gap:16px; }
.ab-bigIn.left{ align-items:flex-start; text-align:left; }
.ab-bigIn.centre{ align-items:center; text-align:center; }
.ab-bigIn.right{ align-items:flex-end; text-align:right; }
.ab-bigH{ margin:0; font-weight:800; font-size:var(--t-statement); line-height:1.05;
  letter-spacing:-.03em; text-wrap:balance; max-width:16ch; overflow-wrap:break-word; }
.ab-bigSub{ margin:0; font-size:var(--t-sub); line-height:1.5; color:rgba(255,255,255,.6);
  max-width:40ch; text-wrap:balance; }
/* the statement that hosts the PLAYER: column flow — statement, card, caption */
.ab-bigPlayer{ flex-direction:column; justify-content:center; gap:clamp(30px,4.5vw,52px);
  padding-top:clamp(72px,10vw,120px); padding-bottom:clamp(72px,10vw,120px); min-height:100svh; }
@media (max-width:640px){
  .ab-bigIn.left,.ab-bigIn.right{ align-items:flex-start; text-align:left; }
}

/* ---- 6 · the story: intro line + four 4:5 panels — three photos + the product panel --------- */
.ab-lineage{ padding-top:clamp(56px,8vw,100px); padding-bottom:clamp(56px,8vw,100px); }
.ab-linIntro{ margin:0 0 clamp(24px,3.4vw,40px); font-weight:700; font-size:var(--t-intro);
  letter-spacing:-.018em; color:rgba(255,255,255,.92); text-wrap:balance; }
.ab-linGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,18px); }
@media (max-width:900px){ .ab-linGrid{ grid-template-columns:repeat(2,1fr); } }
.ab-lin{ margin:0; display:flex; flex-direction:column; gap:11px; }
/* era eyebrow above each panel — same small mono style as section labels, tertiary; "now" lands white */
.ab-linEra{ font:700 12px/1 var(--ui); letter-spacing:.06em; color:rgba(255,255,255,.92); }
.ab-linEra.now{ color:var(--blue); }
.ab-linImg{ position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden;
  background:var(--surface-1); border:1px solid rgba(255,255,255,.07); }
.ab-linImg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* quiet inner vignette keeps every panel in the dark family */
.ab-linImg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 32%, transparent 52%, rgba(12,12,14,.5) 100%); }
/* the fourth panel is the product, not a photo: near-black and the one wordmark component
   (wordmark.css), sized here by font-size like every other context that holds it */
.ab-linBrand{ display:flex; align-items:center; justify-content:center; background:#101013; }
.ab-linBrand::after{ background:none; }
.ab-linBrand .st-wordmark{ font-size:clamp(22px,2.9vw,36px); }
.ab-lin figcaption{ font-size:var(--t-small); line-height:1.55; color:rgba(255,255,255,.72); }
/* the ending Sid ruled on 28 Sept, verbatim, in the intro line's register so the two bookend the
   panels. The capital P in iPod is his, so nothing may transform case here. */
.ab-linEnd{ margin:clamp(28px,3.6vw,44px) 0 0; font-weight:700; font-size:var(--t-intro); line-height:1.25;
  letter-spacing:-.018em; color:rgba(255,255,255,.92); text-transform:none; text-wrap:balance; }

/* ---- 7 · who it's for: compact cards on plain dark (the SSL photo lives in big1 now) -------- */

.ab-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:20px; }
.ab-card{ background:radial-gradient(130% 120% at 30% 0%, #1a1a1f 0%, var(--surface-1) 60%);
  border:1px solid rgba(255,255,255,.1); border-radius:22px; }
.ab-card summary{ list-style:none; cursor:pointer; padding:28px 26px 24px; display:flex; flex-direction:column;
  gap:9px; position:relative; }
.ab-card summary::-webkit-details-marker{ display:none; }
/* small monochrome glyph leading each card */
.ab-cardIco{ width:26px; height:26px; color:rgba(255,255,255,.55); margin-bottom:3px; }
.ab-cardIco svg{ width:26px; height:26px; display:block; }
.ab-cardH{ font-weight:600; font-size:20.5px; letter-spacing:-.01em; }
.ab-cardT{ font-size:var(--t-small); line-height:1.55; color:rgba(255,255,255,.6); padding-right:22px; }
.ab-chev{ position:absolute; top:26px; right:22px; width:9px; height:9px;
  border-right:1.5px solid rgba(255,255,255,.4); border-bottom:1.5px solid rgba(255,255,255,.4);
  transform:rotate(45deg); transition:transform .25s; }
.ab-card[open] .ab-chev{ transform:rotate(225deg); }
.ab-card .ab-cardB{ padding:0 24px 24px; font-size:var(--t-small); line-height:1.65; color:rgba(255,255,255,.75); }
/* the trimmed line stands in for the body until opened */
.ab-card[open] .ab-cardT{ display:none; }

/* ---- 8 · the pieces: one tile each, showing a real component (a framed page) or nothing. Four
   tiles: four across at desktop, two by two below, so no tile is left alone on a row. */
.ab-pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,20px); }
@media (max-width:899px){ .ab-pgrid{ grid-template-columns:repeat(2,1fr); } }
/* the quiet "get the apps" line under the grid: the .ab-more register, tertiary, centred, one
   line; the pieces stay the moment, this is just the door */
.ab-piecesGet{ margin:26px 0 0; text-align:center; font-size:13px; font-weight:500; color:rgba(255,255,255,.45); text-wrap:balance; }
.ab-piecesGet a{ color:rgba(255,255,255,.6); text-decoration:none; }
.ab-piecesGet a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ab-piece{ margin:0; display:flex; flex-direction:column; gap:13px; }
.ab-pieceVis{ position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 130% at 30% 0%, #17171c 0%, #101013 62%);
  border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.ab-pieceH{ font-size:var(--t-small); font-weight:600; color:#fff; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.ab-piece figcaption p{ margin:0; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.6); }
.ab-soonTag{ font-family:var(--ui); font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:1px 8px; flex:none; }

/* ---- 9 · what emit keeps: Help's paragraph, word for word, one size up and given room ------- */
.ab-keeps{ padding-top:clamp(64px,9vw,110px); padding-bottom:clamp(64px,9vw,110px); }
.ab-keepsP{ margin:0; font-size:clamp(18px,2.2vw,24px); line-height:1.55; color:rgba(255,255,255,.72);
  max-width:46ch; text-wrap:pretty; }

/* ---- STAT ROW: the one verified zero left, Apple-stat style, a huge blue-gradient numeral,
   centred on its own ---- */
.ab-stats{ padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px); }
.ab-statGrid{ display:grid; grid-template-columns:1fr; justify-items:center; }
.ab-stat{ text-align:center; }
.ab-statN{ font-weight:800; font-size:clamp(76px,10vw,128px); line-height:.95; letter-spacing:-.04em;
  background:linear-gradient(180deg,#eaa287,#e46f40); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ab-statL{ font-weight:700; font-size:clamp(17px,2vw,21px); letter-spacing:-.01em; color:#fff; margin-top:10px; }
.ab-statC{ margin:8px auto 0; font-size:var(--t-small); line-height:1.55; color:rgba(255,255,255,.6); max-width:30ch; }

/* ---- 10 · the story: a single quote-style moment -------------------------------------------- */
.ab-quote{ max-width:820px; margin:0 auto; text-align:center;
  padding:clamp(88px,13vw,160px) var(--gutter); }
.ab-quoteMain{ margin:0; font-style:italic; font-weight:400; font-size:var(--t-intro); line-height:1.4;
  color:rgba(255,255,255,.85); text-wrap:balance; }

/* ---- 6 · closing CTA + footer --------------------------------------------------------------- */
.ab-close{ max-width:1080px; margin:0 auto; padding:clamp(88px,13vw,170px) var(--gutter) clamp(64px,9vw,110px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px; }
.ab-pitch{ font-weight:700; font-size:var(--t-intro); color:rgba(255,255,255,.92); line-height:1.25;
  letter-spacing:-.018em; max-width:22ch; text-wrap:balance; margin:0; }
.ab-closeCol{ display:flex; flex-direction:column; align-items:center; gap:16px; }
/* the closing note is a SENTENCE, not a label or a number readout, so §1's mono allowance does
   not cover it (Sid, 2026-08-04). Inter at the caption step; the positive .03em tracking went
   with the mono — that spacing exists to open up monospace, and it fights Inter. */
.ab-note{ font-family:var(--ui); font-size:var(--t-caption); font-weight:var(--t-w-reg);
  letter-spacing:var(--t-tracking); color:rgba(255,255,255,.6); }
.ab-foot{ border-top:1px solid rgba(255,255,255,.08); }
.ab-footIn{ max-width:1080px; margin:0 auto; padding:26px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ab-footL{ font-size:13px; color:rgba(255,255,255,.6); }
/* the one "made by streaky audio" line (ruling 5) stays quiet as a link */
.ab-footL a{ color:inherit; text-decoration:none; }
.ab-footL a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ab-footR{ font-family:var(--ui); font-size:12px; color:rgba(255,255,255,.3); }

/* the tertiary "what emit keeps" link under the hero CTA, to Help's words further down */
.ab-heroMore{ display:flex; flex-direction:column; align-items:flex-start; margin-top:4px; }
.ab-more{ font-size:13px; font-weight:500; color:rgba(255,255,255,.6); text-decoration:none; }
.ab-more:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }