/* ==========================================================================
   Evidence Surface — page styles (HoloHDR site, Ledger — the single site
   language). The "Apple Pro dark" page: a slate-900 shell (concepts.css
   sets it) with ONE white mid-band, the inverted demo plate. Every section
   color derives from --page-bg / --page-ink; the local fallbacks target
   the dark shell so the page stands alone. Foil surfaces (.hl*) are only
   sized and positioned here — their styling is frozen in holo-fallback.css.
   The page's signature beat is the GROWING GLOBE: a fixed full-viewport
   layer behind the content whose full-bleed .hl--globe box the holo engine
   (holo-globe.js) drives entirely — the page declares the beat with
   data-globe-* attributes in the markup and animates nothing itself.
   ========================================================================== */

body{background:var(--page-bg,var(--slate-900));color:var(--page-ink,var(--on-dark));}

/* the page's derived neutrals: always mixed off the shell ink, never
   hardcoded. Re-declared on the white demo plate (.sfdemo) — custom
   properties resolve var() where they are SPECIFIED, so the band re-runs
   the mixes against its locally re-pointed --page-ink to flip its own
   neutrals. Audited against the slate-900 shell (#0F172A): the 62/42/14/6
   mixes hold their contrast there. */
.surf,
.surf .sfdemo{
  --pi:var(--page-ink,var(--on-dark));
  --sf-muted:color-mix(in srgb,var(--pi) 62%,transparent);
  --sf-faint:color-mix(in srgb,var(--pi) 42%,transparent);
  --sf-line:color-mix(in srgb,var(--pi) 14%,transparent);
  --sf-fill:color-mix(in srgb,var(--pi) 6%,transparent);
  --sf-fill-2:color-mix(in srgb,var(--pi) 11%,transparent);
}
.surf{position:relative;}

/* nav-tone sentinel: an invisible layer spanning the dark shell */
.surf-navtint{position:absolute;inset:0;pointer-events:none;}

/* ---------- shared section rhythm + type ---------- */
.surf section{padding:var(--space-2xl) 0;}
.surf section.deck-full{padding:var(--space-xl) 0;}
.sf-h{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 var(--space-sm);}
/* copy prints at full page ink (was --sf-muted; grey copy retired 2026-07-21,
   Aaron - white on the dark shell, ink on the white band) */
.sf-sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--pi);max-width:62ch;margin:0 0 var(--space-lg);}
.sf-p{font-size:17px;line-height:1.55;color:var(--pi);max-width:62ch;margin:0 0 var(--space-lg);}

/* the page CTA: inverted ink, derived from the LOCAL surface so it reads on
   both shells AND inside .cx-dark-band */
.sf-btn{background:var(--page-ink,var(--on-dark));color:var(--page-bg,var(--slate-900));}
.sf-btn:hover{background:color-mix(in srgb,var(--page-ink,var(--on-dark)) 84%,var(--page-bg,var(--slate-900)));}

/* bare foil icon (the chipless card glyph — sized up from the 28px engine
   default; the compound keeps specificity level with holo-fallback) */
.hl--icon.sf-uicon{width:36px;height:36px;}
/* page icon masks (same contain-fit contract as icon-radar/flame/chart) */
.hl--icon-spreadsheet{-webkit-mask:url('../../assets/holo/svg/icon-spreadsheet.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-spreadsheet.svg') center/contain no-repeat;}
.hl--icon-badge{-webkit-mask:url('../../assets/holo/svg/icon-badge-check.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-badge-check.svg') center/contain no-repeat;}
.hl--icon-refresh{-webkit-mask:url('../../assets/holo/svg/icon-refresh.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-refresh.svg') center/contain no-repeat;}
.hl--icon-flag{-webkit-mask:url('../../assets/holo/svg/icon-flag.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-flag.svg') center/contain no-repeat;}
.hl--icon-shieldcheck{-webkit-mask:url('../../assets/holo/svg/icon-shield-check.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-shield-check.svg') center/contain no-repeat;}
.hl--icon-building{-webkit-mask:url('../../assets/holo/svg/icon-building.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-building.svg') center/contain no-repeat;}
.hl--icon-earth{-webkit-mask:url('../../assets/holo/svg/icon-earth.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-earth.svg') center/contain no-repeat;}
.hl--icon-zap{-webkit-mask:url('../../assets/holo/svg/icon-zap.svg') center/contain no-repeat;mask:url('../../assets/holo/svg/icon-zap.svg') center/contain no-repeat;}

/* ---------- silky reveals (armed by surface.js; off for reduced motion / no JS) ---------- */
.sf-anim .r{opacity:0;transform:translateY(var(--reveal-rise));transition:opacity var(--dur-reveal) var(--ease-silk),transform var(--dur-reveal) var(--ease-silk);transition-delay:var(--rd,0ms);}
.sf-anim .r.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.sf-anim .r{opacity:1;transform:none;transition:none;}}

/* ==========================================================================
   The growing globe — fixed full-viewport layer behind every section.
   The holo engine (holo-globe.js) owns ALL choreography: it redraws the
   dot-sphere mask each frame at a scroll-driven radius inside this
   full-bleed box (the data-globe-* attributes on the .hl--globe element
   name the sections that drive growth and fade, and the engine gates its
   own RAF and provides the reduced-motion static frame). The page supplies
   ONLY the layer: no width animation, no clipping anywhere in the ancestry
   (html/body/main/.surf carry no overflow rules), and each section keeps
   isolation:isolate so content stacks above the globe.
   ========================================================================== */
.sf-globe-layer{position:fixed;inset:0;z-index:0;pointer-events:none;}
/* full-bleed globe box — the three-class compound outranks holo-fallback's
   .hl.hl--globe.hl-gl{position:relative} in both engine states (equal
   specificity; this file loads after holo-fallback.css) */
.sf-globe-layer .hl.sf-globe{position:absolute;inset:0;}

/* ==========================================================================
   1 · Hero — massive display type; the globe (fixed layer) sits to the
   right of the headline at this scroll position
   ========================================================================== */
/* the copy centers on the true VIEWPORT middle: the sticky nav is in flow,
   so the negative margin pulls the 100vh slide up to the page top (the nav
   overlays it) and deck-full's flex centering lands on 50vh exactly */
.sfhero{position:relative;isolation:isolate;margin-top:-76px;}
.sfhero__in{position:relative;z-index:1;}
.sfhero__copy{max-width:820px;}
.sfhero__h{font-family:var(--font-display);font-weight:700;font-size:clamp(48px,7.4vw,104px);line-height:1.02;letter-spacing:-0.03em;margin:0;}
.sfhero__lead{font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:var(--pi);max-width:44ch;margin:var(--space-sm) 0 4px;}
/* the second lead sentence, promoted to display type */
.sfhero__already{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3vw,42px);line-height:1.12;letter-spacing:-0.02em;margin:40px 0 var(--space-md);}   /* Medium + 40px top air (Aaron 2026-07-23) */

/* ==========================================================================
   2 · Evidence Graph stats wall
   ========================================================================== */
.sfgraph{position:relative;isolation:isolate;}
.sfgraph__in{position:relative;z-index:1;}
.sfstats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md) var(--space-sm);}
.sfstat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.sfstat__l{margin-top:8px;font-size:15px;color:var(--pi);}
@media(max-width:1023px){.sfstats{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   3 · The 40% — two labeled bars: plain slate (legacy) vs logo-tile foil
   (the full footprint)
   ========================================================================== */
/* The 40% slide (reworked 2026-07-24, Aaron): the number IS the slide.
   Giant steel foil "40%" with the customer-testing line hung beside its
   baseline (Swiss asymmetric pair), the page's logo-tile foil rule as the
   one decorative accent, three gap-source cards on the existing ucard
   pattern, and the seed-list kicker in display type. */
.sfmiss{isolation:isolate;}
.sfmiss__lead{display:flex;align-items:baseline;gap:clamp(24px,4vw,64px);flex-wrap:wrap;}
.sfmiss__num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(120px,19vw,264px);line-height:0.88;letter-spacing:-0.04em;}
.sfmiss__of{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.2vw,44px);line-height:1.15;letter-spacing:-0.02em;max-width:52ch;margin:0;}
/* sentence-case display heading - NO eyebrows/all-caps labels, ever
   (standing rule, Aaron 2026-07-24) */
.sfmiss__q{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,32px);letter-spacing:-0.02em;margin:var(--space-lg) 0 var(--space-sm);}
.sfmiss__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);}
@media(max-width:880px){
  .sfmiss__lead{gap:var(--space-sm);}
  .sfmiss__grid{grid-template-columns:1fr;}
}

/* the answer slide's paragraph rides the returned globe: the who-cards'
   glass recipe keeps it readable without hiding the spin (Aaron) */
.sfgraph--everything .sf-sub{
  background:color-mix(in srgb,var(--slate-900) 82%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:var(--radius-card);
  padding:20px 26px;
  width:fit-content;
}

/* ==========================================================================
   3d · The story stack — the warranty story-stack treatment in dark: six
   sticky cards climb over each other while the globe rolls behind; each
   card pairs copy with a product-screen well (placeholder until the real
   shots land). Cards are OPAQUE slates - translucent fills over the live
   globe killed legibility on the warranty page (same lesson, 2026-07-22).
   ========================================================================== */
.sfstory{position:relative;padding:var(--space-lg) 24px;isolation:isolate;}
.sfstory__list{
  max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;gap:120px;
}
.sfstory__list::after{content:"";height:30vh;}   /* hold the last card a beat longer */
.sfstory__card{
  position:sticky;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(440px,62vh,620px);
  border-radius:32px;overflow:hidden;isolation:isolate;
  padding:48px clamp(24px,4vw,56px);
  padding-right:calc(clamp(24px,4vw,56px) + clamp(20px,2.5vw,36px));   /* clear the stripe */
}
.sfstory__card:nth-child(odd){background:var(--slate-900);}
.sfstory__card:nth-child(even){background:color-mix(in srgb,var(--slate-900) 72%,var(--slate-800));}
.sfstory__card:nth-child(1){top:96px;z-index:4;background:var(--slate-800);}   /* #1E293B (Aaron) */
.sfstory__card:nth-child(2){top:120px;z-index:5;}
.sfstory__card:nth-child(3){top:144px;z-index:6;}
.sfstory__card:nth-child(4){top:168px;z-index:7;}
.sfstory__card:nth-child(5){top:192px;z-index:8;}
.sfstory__card:nth-child(6){top:216px;z-index:9;}
/* the logo-tile stripe rides the right edge at the standard seal width
   (thinned from 2x, Aaron 2026-07-24; outweighs holo-fallback for side) */
.hl.hl--seal.sfstory__stripe,
.hl.hl--seal.sfstory__stripe.hl-gl{left:auto;right:0;}
/* the screen carries the card: the copy takes the slim column and the
   shot takes the wide one (big product screens, Aaron 2026-07-24) */
.sfstory__in{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(24px,3vw,48px);align-items:center;
  width:100%;
}
.sfstory__copy h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-0.025em;margin:0;
}
.sfstory__copy p{font-size:clamp(17px,1.6vw,20px);line-height:1.55;margin:20px 0 0;max-width:40ch;}
/* the screen well: an inset the coming product shots will fill edge to edge */
.sfstory__shot{
  aspect-ratio:16/10;width:100%;
  background:var(--slate-950);
  border:1px solid var(--sf-line);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.sfstory__shot span{font-size:13px;color:var(--sf-faint);}
@media(max-width:880px){
  .sfstory__in{grid-template-columns:1fr;}
  .sfstory__card{min-height:0;padding:36px 24px;padding-right:calc(24px + 20px);}
}

/* ==========================================================================
   3e · The founders — two opaque slates over the rolling globe; the reveal
   cascade deals them in side by side (90ms sibling stagger from surface.js)
   with an amplified rise and a slower settle than the page default.
   ========================================================================== */
.sffound{isolation:isolate;}
.sffound__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:var(--space-md);}
.sffound__card{background:var(--slate-800);border-radius:var(--radius-card);padding:clamp(24px,3vw,40px);}   /* one step lighter than the shell so the cards read as cards (Aaron) */
.sf-anim .sffound__card.r{--reveal-rise:72px;--dur-reveal:.9s;}
.sffound__photo{width:min(224px,100%);aspect-ratio:1;object-fit:cover;border-radius:var(--radius-input);display:block;}
.sffound__name{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-0.02em;margin:24px 0 0;}
.sffound__role{display:block;margin:6px 0 0;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--sf-muted);letter-spacing:0;}
.sffound__card p{font-size:clamp(16px,1.5vw,19px);line-height:1.55;margin:14px 0 0;max-width:52ch;}
@media(max-width:880px){.sffound__grid{grid-template-columns:1fr;}}

/* ==========================================================================
   3f/3g · Home patterns on the dark page (home.css is linked for these two
   sections only; these overrides adapt them to the Surface ground).
   ========================================================================== */
/* dark-mode bento (Aaron 2026-07-24): the cards sit one slate step above
   the shell; every light-tuned inner element gets its dark twin here */
.sfxsell .home-bento__card{background:var(--slate-800);color:var(--on-dark,#fff);}
.sfxsell .home-scanbar{background:color-mix(in srgb,#fff 16%,transparent);}
.sfxsell .home-scanbar__fill{background:var(--slate-50);}
.sfxsell .home-bento__scancap{color:var(--on-dark,#fff);}
.sfxsell .home-frr__pill{background:color-mix(in srgb,#fff 18%,transparent);}
.sfxsell .home-bento__sparkink{background:var(--slate-50);}
.sfxsell .home-bento__spark circle{fill:var(--slate-800);stroke:#fff;}
/* the warranty card's silver-locked laminate reads as DARK GREY shimmer on
   the dark card: the silver foil stays, the wrapper just whispers */
.sfxsell .home-bento__lam{opacity:0.22;}
/* Warranty is the row-wide rectangle; Scan + Reporting stay square */
.sfxsell .home-bento__card--warranty{grid-column:1/-1;min-height:320px;background:var(--slate-800);}
/* who-cards: the shared glass recipe (home.css) with a dark tint here */
.sfwho .home-whoc{background:color-mix(in srgb,var(--slate-800) 88%,transparent);}
.sfwho .home-whoc:hover{background:color-mix(in srgb,var(--slate-700,#334155) 88%,transparent);}
.sfwho .home-who__grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1023px){.sfwho .home-who__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.sfwho .home-who__grid{grid-template-columns:1fr;}}

/* ==========================================================================
   4 · What makes it unique — 4 cards with bare foil icons; the key card
   wears the page's ONE seal-stripe (logo tile)
   ========================================================================== */
.sfuniq{isolation:isolate;}
.sfuniq__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);}
.ucard{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--sf-fill);padding:var(--space-md);display:flex;flex-direction:column;gap:12px;}
.ucard--sealed{padding-left:calc(clamp(20px,2.5vw,36px) + var(--space-sm));}
.ucard h3{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.01em;margin:0;}
.ucard p{margin:0;font-size:15px;line-height:1.55;color:var(--pi);}
@media(max-width:880px){.sfuniq__grid{grid-template-columns:1fr;}}

/* ==========================================================================
   5 · Demo teaser — the ONE white mid-band (the inverted plate); the card
   wears the foil ring frame (no lean) and runs the fake scan
   ========================================================================== */
.sfdemo{
  position:relative;
  isolation:isolate;
  --page-bg:var(--canvas);
  --page-ink:var(--ink);
  background:var(--canvas);
  color:var(--ink);
}
.sfdemo__navtint{position:absolute;inset:0;pointer-events:none;}
.sfdemo__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-lg);align-items:center;}
.sfdemo__p{margin-bottom:0;}
.sfdemo__frame{max-width:460px;justify-self:end;width:100%;}
/* opaque DARK body fill: the demo card face is a near-black panel that
   gives the card weight against the white plate (and keeps the ring
   reading as a ring instead of glowing through). The card re-points --pi
   and re-runs the neutral mixes locally (custom properties resolve var()
   where they are SPECIFIED), so every inner rule below — labels, result,
   hint — flips to on-dark without further overrides. */
.sfdemo__card{
  --pi:var(--on-dark);
  --sf-muted:color-mix(in srgb,var(--pi) 72%,transparent);
  --sf-faint:var(--slate-400);
  --sf-line:var(--slate-700);
  --sf-fill-2:color-mix(in srgb,var(--pi) 8%,transparent);
  background:var(--slate-950);
  color:var(--on-dark);
  padding:var(--space-md);display:flex;flex-direction:column;gap:16px;width:100%;
}
/* (inputs need no extra rule: .sfdemo__field input reads the re-pointed
   tokens — 8% white fill, slate-700 hairline, white text, slate-400
   placeholder — all resolved against the dark panel) */
/* the submit inverts on the dark panel: white on ink */
.sfdemo__card .sf-btn{background:#fff;color:var(--slate-950);}
.sfdemo__card .sf-btn:hover{background:var(--slate-200);}
.sfdemo__ch{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0;}
.sfdemo__field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--pi);}
.sfdemo__field input{font-family:var(--font-body);font-size:15px;color:var(--pi);background:var(--sf-fill-2);border:1px solid var(--sf-line);border-radius:var(--radius-input);padding:12px 14px;outline:none;}
.sfdemo__field input::placeholder{color:var(--sf-faint);}
.sfdemo__field input:focus-visible{outline:2px solid color-mix(in srgb,var(--pi) 55%,transparent);outline-offset:-1px;}
.sfdemo__go{align-self:flex-start;}
.sfdemo__result{margin:0;min-height:1.5em;font-size:15px;line-height:1.5;color:var(--pi);}
.sfdemo__result strong{color:var(--pi);font-weight:700;font-variant-numeric:tabular-nums;}
.sfdemo__hint{margin:0;font-size:13px;color:var(--pi);}
/* the gentle "nothing to scan" shake (motion-safe only) */
@media(prefers-reduced-motion:no-preference){
  .sfdemo__card--shake{animation:sfdemo-shake .4s var(--ease-silk);}
}
@keyframes sfdemo-shake{
  0%,100%{translate:0;}
  20%{translate:-6px 0;}
  40%{translate:5px 0;}
  60%{translate:-3px 0;}
  80%{translate:2px 0;}
}
@media(max-width:880px){
  .sfdemo__grid{grid-template-columns:1fr;}
  .sfdemo__frame{justify-self:start;}
}

/* ==========================================================================
   6 · Surface feeds everything else — cross-link cards with bare foil
   icons; the Warranty card's glowing shield container
   ========================================================================== */
.sffeeds{isolation:isolate;}
.sffeeds__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);}
.sfcard{display:flex;flex-direction:column;gap:12px;border-radius:var(--radius-card);background:var(--sf-fill);padding:var(--space-md);transition:background var(--dur) ease;}
.sfcard:hover{background:var(--sf-fill-2);}
.sfcard h3{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.01em;margin:0;}
.sfcard p{margin:0;font-size:15px;line-height:1.55;color:var(--pi);}
.sfcard__go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-size:15px;font-weight:600;}
.sfcard__go svg{width:16px;height:16px;transition:transform var(--dur) ease;}
.sfcard:hover .sfcard__go svg{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){.sfcard:hover .sfcard__go svg{transform:none;}}
/* (the Warranty shield is a glowy foil icon like its neighbors —
   hl--icon-shieldcheck, registered above with the other page masks) */
@media(max-width:880px){.sffeeds__grid{grid-template-columns:1fr;}}

/* ==========================================================================
   7 · Closer — the always-dark peak band (cx-dark-band supplies the concept
   surface; the :where() fallback keeps it dark standalone). The CTA is the
   home closer's glowy foil pill at 2x scale: sizing lives on the inner
   .hl--btn (the .btn--holo wrapper drops its own fill/padding, so the foil
   face IS the button); values copied verbatim from home.css.
   ========================================================================== */
.sffinal{isolation:isolate;}
:where(.sffinal__panel){background:var(--slate-950);color:var(--on-dark);}
.sffinal__panel{border-radius:var(--radius-card);padding:var(--space-xl) var(--space-md);text-align:center;}
.sffinal__h{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.02em;margin:0 0 var(--space-xs);}
.sffinal__p{font-size:17px;line-height:1.5;color:var(--on-dark);margin:0 0 var(--space-sm);}
.sffinal__cta{margin-top:var(--space-xs);}
/* the page-ender pattern: the glowy CTA at 2x scale (identical to home's
   .btn--holo-xl; the three-class compound outranks holo-fallback's
   .hl.hl--btn in all states) */
.btn--holo-xl .hl.hl--btn{
  font-size:23px;
  padding:22px 44px;
}
@media(max-width:560px){
  .btn--holo-xl .hl.hl--btn{font-size:19px;padding:18px 34px;}
}