/* /about — the Acetate company page, Apple-product-page treatment (scrolls; ci exemption — the
   one-viewport lock (ch) applies only to app surfaces). Deliberately standalone: loads ONLY tokens.css
   + this file, so it never inherits the homepage/player locks and never touches app-surface CSS.
   Huge type, tiny amounts of it; sections rise in on scroll (.io/.in via IntersectionObserver in the
   page, disabled under prefers-reduced-motion). Primary CTA = BLUE per the redesign spec (supersedes
   the (cj) amber-CTA line for this page; amber stays the small-link accent). */

*{ 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:#FF9F0A; --ok:#30D158;     /* accent = amber (small links), 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,#4a7df0 0%,#7fa4f7 60%,#a9c2ff 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); }

/* ---- 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; }
/* trust line under the closing CTA (the only other place it renders on /about besides the hero) */
.ab-closeTrust{ margin-top:14px; text-align:center; }
@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 showcase cards never run to the screen edge on mobile */
.ab-momentStage{ position:relative; z-index:1; max-width:100%; padding:0 var(--gutter); }
.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(59,116,240,.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 recipient card, replicated 1:1 from the app's sendbox.css/player.css values (static showcase;
   this page must not load app CSS). Scaled up a touch on desktop — it IS the hero image. */
.abp-card{ position:relative; z-index:1; width:412px; max-width:100%; background:#1C1C1E; border:1px solid #000;
  border-radius:20px; padding:26px 24px 22px; box-shadow:0 30px 80px rgba(0,0,0,.55); text-transform:lowercase; }
@media (min-width:900px){ .abp-card{ transform:scale(1.12); margin:26px 0; } }
.abp-wordmark{ font-weight:200; font-size:31px; line-height:22.5px; letter-spacing:.34em; padding-left:.34em;
  text-transform:uppercase; color:#fff; text-align:center; white-space:nowrap; }
.abp-well{ position:relative; height:150px; border-radius:14px; margin-top:16px; overflow:hidden;
  background:rgba(0,0,0,.5); }
.abp-well canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.abp-tL,.abp-tR{ position:absolute; bottom:9px; font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.78); background:rgba(0,0,0,.62); padding:2px 7px; border-radius:6px; }
.abp-tL{ left:13px; } .abp-tR{ right:13px; }
.abp-playRow{ position:relative; display:flex; justify-content:center; margin-top:22px; }
.abp-hero{ width:88px; height:88px; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(59,116,240,.35); }
/* download button (down arrow, play's visual family) — shown on a download-enabled link;
   absolute right so the hero stays perfectly centred. Mirrors the real player's .vp-dl. */
.abp-dl{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:44px; height:44px;
  border-radius:50%; background:var(--blue); box-shadow:0 8px 18px rgba(59,116,240,.3);
  display:flex; align-items:center; justify-content:center; }
.abp-name{ text-align:center; font-weight:600; font-size:20px; letter-spacing:-.3px; color:#fff; margin-top:16px; }
.abp-fmt{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:-.2px;
  color:rgba(255,255,255,.6); margin-top:6px; }
.abp-status{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px;
  font-size:14px; color:rgba(255,255,255,.6); }
.abp-status .x{ font-weight:600; color:var(--red); }
.abp-div{ height:.5px; background:rgba(255,255,255,.1); margin-top:16px; }
.abp-by{ text-align:center; font-size:13px; color:rgba(255,255,255,.5); margin-top:13px; padding-top:0; }

/* the (cm) EXPIRED state, showcased — values mirror the live player's dead card (player.css):
   flat line in the well, state title/sub, blue pill. Only the CTA target differs (sign-in). */
.abp-well.dead{ display:flex; align-items:center; justify-content:center; }
.abp-flatline{ width:82%; height:2px; border-radius:1px; background:rgba(255,255,255,.30); }
.abp-stTitle{ text-align:center; font-weight:800; font-size:23px; letter-spacing:-.5px; color:#fff; margin-top:22px; }
.abp-stSub{ text-align:center; font-size:13.5px; color:rgba(255,255,255,.65); margin-top:9px; line-height:1.5;
  max-width:290px; margin-left:auto; margin-right:auto; }
.abp-ctaRow{ text-align:center; margin-top:22px; }
.abp-cta{ display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-size:14px; font-weight:500; letter-spacing:.01em; padding:11px 20px; border-radius:999px; }
.abp-cta:hover{ filter:brightness(1.08); }

/* ---- 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(59,116,240,.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; }
/* big3 (expired showcase): centred column like the player section above (statement, card, caption),
   card kept a touch smaller than the live-player showcase. */
#big3 .abp-card{ width:340px; }
@media (min-width:900px){ #big3 .abp-card{ transform:none; margin:0; } }
@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 + the wordmark */
.ab-linBrand{ display:flex; align-items:center; justify-content:center; background:#101013; }
.ab-linBrand::after{ background:none; }
.ab-linWm{ font-weight:200; font-size:clamp(15px,1.7vw,21px); letter-spacing:.34em; padding-left:.34em;
  text-transform:uppercase; color:#fff; white-space:nowrap; }
.ab-lin figcaption{ font-size:var(--t-small); line-height:1.55; color:rgba(255,255,255,.72); }

/* ---- 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: a VISUAL strip — each tile shows the REAL component as a static showcase
   (the same markup/values as the app + the .abp-card showcase, one-component rule), scaled to fit
   via a transform wrapper. Uniform tile heights; soon-tags carry the available/coming-soon split. */
.ab-pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(14px,1.8vw,20px); }
.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(--mono); 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; }

/* the scale wrapper: real full-size components rendered, then scaled to tile size. flex:none keeps
   the unscaled box centred in the tile; the tile's overflow:hidden crops nothing at these ratios. */
.ab-scale{ flex:none; transform:scale(var(--s,.35)); transform-origin:center; }
/* the showcase player picks up the generic .abp-card desktop scale — neutralise it inside tiles
   (the wrapper's --s is the only scale here) */
.ab-pieceVis .abp-card{ transform:none !important; margin:0 !important; }

/* the REAL homepage/studio send card — values 1:1 from sendbox.css (this page stays standalone).
   The frosted well is a static gradient stand-in for the wallpaper glass (same as the player
   showcase's black well: the chrome is real, the see-through needs the live wallpaper). */
.abs-card{ width:412px; background:#1C1C1E; border:1px solid #000; border-radius:20px;
  padding:22px 24px; box-shadow:0 30px 80px rgba(0,0,0,.55); text-transform:lowercase; }
.abs-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.abs-h{ font:500 21px/1.2 var(--ui); letter-spacing:-.01em; color:#fff; }
.abs-signin{ font:500 12.5px var(--ui); color:rgba(255,255,255,.7); }
.abs-sub{ margin-top:5px; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.5); }
.abs-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:150px; border-radius:13px; padding:22px 20px; margin-top:18px;
  background:linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.05) 55%, rgba(255,255,255,.09)); }
.abs-dropIco{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; color:#7fa0e8; }
.abs-dropTitle{ font-weight:600; font-size:15.5px; margin-top:12px; color:#fff; }
.abs-dropHint{ font-size:12.5px; color:rgba(255,255,255,.5); margin-top:4px; }
.abs-foot{ text-align:center; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
  font-size:11px; color:rgba(255,255,255,.45); font-weight:500; }

/* the REAL Sender plugin — an actual UI screenshot filling the tile */
.ab-pieceShot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* phone outline hosting the REAL player component (scaled) */
.ab-phoneShell{ position:relative; width:54%; aspect-ratio:9/18; border-radius:16px;
  border:1.5px solid rgba(255,255,255,.35); background:#0b0b0d; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.ab-phNotch{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:26%; height:4px;
  border-radius:999px; background:rgba(255,255,255,.25); z-index:1; }

/* mini MAC: menu strip with the acetate disc lit, + the result toast */
.ab-miniMac{ width:82%; display:flex; flex-direction:column; gap:12px; align-items:center; }
.ab-miniMenu{ width:100%; display:flex; align-items:center; justify-content:flex-end; gap:9px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.10); border-radius:6px; padding:5px 9px; }
.ab-miniMenuIco{ width:9px; height:9px; flex:none; }
.ab-miniMenuIco.dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); }
.ab-miniMenuIco.disc{ position:relative; border-radius:50%; border:1.6px solid rgba(255,255,255,.85); }
.ab-miniMenuIco.disc::after{ content:""; position:absolute; inset:2.4px; border-radius:50%; background:rgba(255,255,255,.85); }
.ab-miniMenuIco.disc.on{ border-color:#7fa0e8; box-shadow:0 0 8px rgba(59,116,240,.9); }
.ab-miniMenuIco.disc.on::after{ background:#7fa0e8; }
.ab-miniTime{ font-family:var(--mono); font-size:8px; color:rgba(255,255,255,.7); }
.ab-miniToast{ display:inline-flex; align-items:center; gap:6px; background:#1C1C1E;
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:5px 11px;
  font-size:9.5px; color:rgba(255,255,255,.85); box-shadow:0 10px 26px rgba(0,0,0,.5); }

/* ---- 9 · security & quality: a confident spec panel — two columns desktop / one mobile, each
   claim led by a simple line icon, lead line larger, support tertiary ------------------------- */
.ab-secSec{ padding-top:clamp(64px,9vw,110px); padding-bottom:clamp(64px,9vw,110px); }
.ab-secList{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4.5vw,52px) clamp(32px,5vw,64px); }
@media (min-width:760px){ .ab-secList{ grid-template-columns:1fr 1fr; } }
.ab-secIco{ display:inline-flex; width:24px; height:24px; color:rgba(255,255,255,.6); margin-bottom:12px; }
.ab-secIco svg{ width:24px; height:24px; display:block; }
.ab-secLineH{ font-size:clamp(20px,2.2vw,23px); font-weight:700; letter-spacing:-.012em; color:#fff; margin-bottom:8px; }
.ab-secLine p{ margin:0; font-size:var(--t-small); line-height:1.6; color:rgba(255,255,255,.6); max-width:46ch; }

/* ---- STAT ROW: three verified zeros, Apple-stat style — huge blue-gradient numerals ---------- */
.ab-stats{ padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(56px,8vw,96px); }
.ab-statGrid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,48px) clamp(28px,4vw,56px); }
@media (min-width:760px){ .ab-statGrid{ grid-template-columns:repeat(3,1fr); } }
.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,#7fa4f7,#3b74f0); -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; }
.ab-quoteSub{ margin:18px 0 0; font-size:var(--t-sub); color:rgba(255,255,255,.5); }

/* ---- 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; }
.ab-note{ font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; 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); }
.ab-footR{ font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.3); }

/* hero trust line + "how we protect your track →" anchor (under the CTA); notice.js styles the trust text */
.ab-heroTrust{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-top:4px; }
.ab-protect{ font-size:13px; font-weight:500; color:rgba(255,255,255,.6); text-decoration:none; }
.ab-protect:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }