/* ==========================================================================
   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);}
.sf-sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--sf-muted);max-width:62ch;margin:0 0 var(--space-lg);}
.sf-p{font-size:17px;line-height:1.55;color:var(--sf-muted);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;}

/* ---------- 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
   ========================================================================== */
.sfhero{position:relative;isolation:isolate;}
.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(--sf-muted);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:700;font-size:clamp(24px,3vw,42px);line-height:1.12;letter-spacing:-0.02em;margin:0 0 var(--space-md);}

/* ==========================================================================
   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(--sf-muted);}
@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)
   ========================================================================== */
.sfmiss{isolation:isolate;}
.sfbars{display:flex;flex-direction:column;gap:var(--space-sm);max-width:880px;}
.sfbars__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:15px;margin-bottom:10px;}
.sfbars__name{font-weight:600;}
.sfbars__val{color:var(--sf-muted);text-align:right;}
/* what legacy tools find: a static slate bar with subtle fine hatching */
.sfbars__legacy{
  width:60%;height:48px;border-radius:var(--radius-input);
  border:1px solid var(--sf-line);
  background:
    repeating-linear-gradient(115deg,color-mix(in srgb,var(--pi) 8%,transparent) 0 1px,transparent 1px 8px),
    var(--slate-800);
}
/* the full footprint: a glowing logo-tile foil rule spanning the track.
   The pattern class masks center/cover, which blows the tile up to the bar's
   full width — re-size to the seal-stripe scale instead: a small repeating
   logo texture (the longhands override holo-fallback's mask shorthand;
   this file loads later at equal specificity). */
.sfbar__evidence{
  width:100%;height:48px;
  -webkit-mask-size:auto 720px;mask-size:auto 720px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:left center;mask-position:left center;
}
.sfbars__notes{display:grid;grid-template-columns:3fr 2fr;gap:var(--space-sm);max-width:880px;margin-top:var(--space-sm);}
.sfbars__notes p{margin:0;font-size:14px;line-height:1.5;color:var(--sf-faint);}
@media(max-width:680px){
  .sfbars__meta{flex-direction:column;gap:2px;align-items:flex-start;}
  .sfbars__val{text-align:left;}
  .sfbars__notes{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(--sf-muted);}
@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(--sf-muted);}
.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(--sf-muted);}
.sfdemo__result strong{color:var(--pi);font-weight:700;font-variant-numeric:tabular-nums;}
.sfdemo__hint{margin:0;font-size:13px;color:var(--sf-faint);}
/* 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(--sf-muted);}
.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: the foil shield silhouette (tier-card treatment)
   with the ink check glyph overlaid as a static, NON-foil layer */
.sffeeds__shield{position:relative;width:64px;height:64px;}
.sffeeds__glyph{
  position:absolute;inset:0;margin:auto;
  width:24px;height:24px;
  translate:0 -2px;
  background:var(--slate-950);
  -webkit-mask:url('../../assets/holo/svg/icon-check.svg') center/contain no-repeat;
  mask:url('../../assets/holo/svg/icon-check.svg') center/contain no-repeat;
  pointer-events:none;
}
@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:color-mix(in srgb,currentColor 72%,transparent);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;}
}