/* ==========================================================================
   Evidence Scan - HoloHDR page (LEDGER is the single site language; the
   retired concept gating is gone from this page).
   White, cold hue, fine-lines foil, SPARSE - restraint is the design
   statement. Foil moments, top to bottom:
     hero    - the "financial loss" pill + the wide fine-lines stripe riding
               the full right edge (scroll-fades like Home's ribbon)
     diff    - the FIRE tag as a small foil pill in the definition card
     criteria- three giant numbers whose foil idles invisible, hover-lit
     60s     - the framed stat card (the holo-frame ring is the foil)
     closer  - the 2x glowy CTA
   Tokens: brand/elevate-tokens.css - chrome: site.css.
   Foil styling lives ONLY in holo-fallback.css; this file just sizes/positions
   the foil boxes and lays out the page.
   ========================================================================== */

/* ---------- page shell ----------
   The shell reads the concept vars (white fallbacks) per the concepts.css
   convention. Overflow guard on BODY (on main it would create a nested
   scroll container). */
body{overflow-x:hidden;background:var(--page-bg,var(--canvas));color:var(--page-ink,var(--ink));}
.scan{background:var(--page-bg,var(--canvas));color:var(--page-ink,var(--ink));}

/* ---------- shared type (Satoshi display, editorial whitespace) ---------- */
.sn-h{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1.12;letter-spacing:-0.03em;margin:0;}
.sn-p{font-size:18px;line-height:1.6;margin:24px 0 0;max-width:56ch;}

/* ---------- silky IO reveals (scan.js gates the hidden state behind
   body.sn-anim, so content is never lost without JS; reduced-motion safe) ---------- */
body.sn-anim .r{opacity:0;transform:translateY(var(--reveal-rise,20px));transition:opacity var(--dur-reveal,500ms) var(--ease-silk),transform var(--dur-reveal,500ms) var(--ease-silk);}
body.sn-anim .r.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){body.sn-anim .r{opacity:1;transform:none;transition:none;}}

/* ---------- 1 · hero: white, lots of air, one pill, one wide stripe ----------
   isolation:isolate so the inline pill's z-index:-1 fallback paints above the
   section background (per the component contract). */
.sn-hero{position:relative;isolation:isolate;overflow:hidden;padding:96px 0;}
.sn-hero__in{position:relative;z-index:1;}
.sn-hero__h{font-family:var(--font-display);font-weight:700;font-size:clamp(42px,6.2vw,92px);line-height:1.06;letter-spacing:-0.035em;margin:0;max-width:16ch;}
/* the pill must never wrap: the engine keeps the CSS fallback for multi-rect
   pills (holo-surfaces.js), so a wrapped "financial loss" would never glow */
.sn-hero__h .hl{white-space:nowrap;}
.sn-hero__lead{font-size:clamp(19px,1.8vw,23px);line-height:1.5;margin:28px 0 0;max-width:36ch;}
.sn-hero__cta{margin-top:44px;}
/* THE hero object: the wide fine-lines stripe spans the full height of the
   100vh hero (top:0 -> bottom:0; it passes under the transparent nav). The
   WRAPPER owns the bottom fade - masks compose, so the stripe's lines tile
   stays on the .hl and the linear fade lives here. scan.js drives the
   wrapper's opacity 1 -> 0 across ~120vh of scroll (static under reduced
   motion). */
.sn-hero__stripewrap{
  position:absolute;top:0;right:0;bottom:0;
  width:clamp(170px,18vw,290px);
  overflow:hidden;
  pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 78%,transparent 100%);
  mask:linear-gradient(180deg,#000 78%,transparent 100%);
}
/* selector carries .hl.hl--stripe (0,3,0) so this geometry outranks the
   contract's .hl.hl--stripe.hl-gl pair in both fallback and engine states
   (equal specificity; this file loads after holo-fallback.css) */
.sn-hero .hl.hl--stripe{
  position:absolute;inset:0;translate:none;
  width:100%;height:100%;
}
@media(max-width:720px){.sn-hero__stripewrap{display:none;}}

/* ---------- 2 · the FIRE difference: big editorial two-column ----------
   isolation:isolate so the FIRE tag pill's z-index:-1 fallback paints above
   the section background. */
.sn-diff{padding:var(--space-2xl) 0;isolation:isolate;}
.sn-diff__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-lg);align-items:center;}
.sn-diff__h{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,4.8vw,68px);line-height:1.1;letter-spacing:-0.03em;margin:0;text-align:left;}
.sn-diff__dime{display:block;}
.sn-diff__fire{display:block;margin-top:12px;}
.sn-diff__kicker{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.9vw,24px);letter-spacing:-0.01em;margin:28px 0 0;color:var(--slate-950);}
/* the definition card: bordered; the FIRE tag is a small foil pill (no chip
   background - the foil face IS the fill; sizing only, per the contract) */
.sn-def{border:1px solid var(--hairline);border-radius:var(--radius-card);padding:clamp(28px,3.4vw,44px);}
.hl.sn-def__tag{font-weight:700;font-size:14px;letter-spacing:0.02em;line-height:1;padding:8px 16px;border-radius:var(--radius-pill);}
.sn-def__h{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2.2vw,26px);letter-spacing:-0.015em;line-height:1.25;margin:20px 0 0;}
.sn-def__p{font-size:17px;line-height:1.6;margin:12px 0 0;}

/* ---------- 3 · the three criteria: slate cards, giant hover-lit numbers ---------- */
.sn-crit{padding:var(--space-2xl) 0;isolation:isolate;}
.sn-crit__h{max-width:24ch;}
.sn-crit__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-top:var(--space-lg);}
.sn-crit__tile{background:var(--fill-1);border:1px solid var(--slate-200);border-radius:var(--radius-card);padding:clamp(28px,3.2vw,44px);}
.sn-crit__num{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4vw,64px);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.sn-crit__tile h3{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.01em;line-height:1.25;margin:20px 0 0;}
.sn-crit__tile p{font-size:16px;line-height:1.6;margin:8px 0 0;}
/* the numbers' foil idles invisible and fades in on tile hover; the pill's
   CSS fallback stays suppressed at rest so no gradient shows pre-engine
   (with no engine the hover stays plain - acceptable) */
.sn-crit__tile .hl{background:none;box-shadow:none;color:inherit;}
.sn-crit__tile .warr-hl-canvas{opacity:0;transition:opacity .35s var(--ease-silk);}
.sn-crit__tile:hover .warr-hl-canvas{opacity:1;}

/* ---------- 4 · the 60-seconds beat: white typographic band ----------
   A holo-frame stat card - the ring is the foil, the body is plain paper
   with giant ink type. */
.sn-l60{padding:var(--space-2xl) 0;}
.sn-l60__frame{max-width:880px;margin:0 auto;}
.sn-l60__body{background:var(--page-bg,var(--canvas));text-align:center;padding:clamp(44px,7vw,96px) clamp(24px,4vw,64px);}
.sn-l60__big{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(44px,9vw,150px);line-height:1;letter-spacing:-0.04em;color:var(--slate-950);}
.sn-l60__sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--slate-500);margin:22px 0 0;}

/* ---------- 5 · beyond the FIRE list: three quiet rows ---------- */
.sn-lists{padding:var(--space-2xl) 0;}
.sn-lists__rows{margin-top:var(--space-lg);}
.sn-row{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:var(--space-sm);padding:28px 0;border-top:1px solid var(--hairline);}
.sn-row:last-child{border-bottom:1px solid var(--hairline);}
.sn-row h3{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.01em;line-height:1.3;margin:0;}
.sn-row p{font-size:17px;line-height:1.6;margin:0;max-width:64ch;}

/* ---------- 6 · always watching: a text band ---------- */
.sn-watch{padding:var(--space-2xl) 0;text-align:center;}
.sn-watch__h{max-width:22ch;margin-left:auto;margin-right:auto;}
.sn-watch__p{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- 6b · FIRE Zero: one quiet slate panel, no foil ---------- */
.sn-zero{padding:0 0 var(--space-xl);}
.sn-zero__panel{background:var(--slate-100);border-radius:var(--radius-card);padding:clamp(40px,6vw,80px);}
.sn-zero__h{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.16;letter-spacing:-0.025em;margin:0;max-width:26ch;text-align:left;}
.sn-zero__p{font-size:18px;line-height:1.6;margin:20px 0 0;max-width:52ch;}

/* ---------- 7 · closer: ink band + demo CTA ---------- */
.sn-close{padding:var(--space-2xl) 0;}
:where(.sn-close){background:var(--band-bg-final,var(--slate-950));}
.sn-close__in{text-align:center;color:var(--on-dark);}
.sn-close__h{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1.12;letter-spacing:-0.03em;margin:0 auto;max-width:20ch;color:#fff;}
.sn-close__p{font-size:18px;line-height:1.6;margin:24px auto 0;max-width:46ch;color:rgba(255,255,255,0.8);}
.sn-close__btn{margin-top:40px;}
/* 2x closer CTA: sizes the foil pill face (same values on every page) */
.btn--holo-xl .hl.hl--btn{font-size:22px;padding:22px 44px;border-radius:var(--radius-pill,9999px);}

/* ---------- small screens ---------- */
@media(max-width:880px){
  .sn-diff__grid{grid-template-columns:1fr;gap:var(--space-md);}
  .sn-crit__grid{grid-template-columns:1fr;gap:var(--space-sm);}
  .sn-row{grid-template-columns:1fr;gap:8px;}
}