/* ==========================================================================
   home.css — HOME page of the HoloHDR site.
   Composes the frozen foil vocabulary (assets/holo/holo-fallback.css) with the
   Elevate tokens. This file only sizes/positions foil boxes — it never
   restyles the foil itself. LEDGER is the single site language: no concept
   gating remains; what used to sit behind [data-concept="ledger"] is now the
   unprefixed base. The page shell stays token-driven (--page-bg / --page-ink)
   so section copy leans on currentColor and survives the dark bands.
   ========================================================================== */

/* ---------- page shell ---------- */
.home{
  background:var(--page-bg,var(--canvas));
  color:var(--page-ink,var(--ink));
}
/* every section hosts foil pills (z-index:-1 fallback) → own stacking context */
.home>section{position:relative;isolation:isolate;}
.home{position:relative;}

/* ---------- shared vocabulary ---------- */
.home-h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-0.02em;
  margin:0;
}
.home-sub{
  font-size:clamp(18px,2vw,22px);font-weight:500;
  color:color-mix(in srgb,currentColor 66%,transparent);
  margin:8px 0 0;
}
.home-lead{
  font-size:17px;line-height:1.55;max-width:52ch;
  color:color-mix(in srgb,currentColor 78%,transparent);
  margin:var(--space-sm) 0 0;
}
.home-link{
  font-weight:600;color:inherit;
  padding-bottom:2px;
  border-bottom:1px solid color-mix(in srgb,currentColor 32%,transparent);
  transition:border-color var(--dur) ease;
}
.home-link:hover{border-color:currentColor;}
.home-link--lg{font-size:17px;}

/* ---------- silky reveals (armed by home.js; without JS everything shows) ---------- */
body.rv-armed .rv{
  opacity:0;transform:translateY(var(--reveal-rise));
  transition:opacity var(--dur-reveal) var(--ease-silk),transform var(--dur-reveal) var(--ease-silk);
}
body.rv-armed .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  body.rv-armed .rv{opacity:1;transform:none;transition:none;}
}

/* ---------- 1 · hero ---------- */
/* the hero is a 170vh runway; the sticky 100vh viewport inside holds BOTH the
   copy and the ribbon, so the copy stays put while the page scrolls. home.js
   fades the copy over ~55vh (and keeps the ribbon's ~120vh fade); the copy is
   gone well before the FIRE section arrives at the 170vh mark. The flex
   centering replicates what the dropped .deck-full used to provide. */
.home-hero{height:170vh;}
.home-hero__sticky{
  position:sticky;top:0;height:100vh;
  overflow:clip;                     /* the ribbon rides the very edge */
  display:flex;flex-direction:column;justify-content:center;
  padding-top:120px;                 /* tolerate the transparent nav */
  padding-bottom:var(--space-lg);
}
/* reduced motion: no sticky choreography — the hero reverts to normal flow
   at its old single-viewport height (home.js skips both fades) */
@media(prefers-reduced-motion:reduce){
  .home-hero{height:auto;}
  .home-hero__sticky{position:static;height:auto;min-height:100vh;}
}
/* z-index:1 makes the copy block a stacking context: inline foil pills keep
   their z-index:-1 fallback INSIDE it, above the ribbon behind */
.home-hero__in{position:relative;z-index:1;}
.home-hero__copy{max-width:min(640px,56vw);}
.home-hero__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-0.03em;
  margin:0;
}
.home-hero__lead{
  font-size:clamp(18px,2.2vw,22px);line-height:1.5;
  color:color-mix(in srgb,currentColor 80%,transparent);
  margin:var(--space-sm) 0 0;max-width:44ch;
}
.home-hero__cta{
  display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
  margin-top:var(--space-md);
}
/* THE hero object: the guilloché security ribbon fills the right half of the
   100vh hero (top:0 → bottom:0; it passes under the transparent nav). The
   WRAPPER owns the bottom fade — masks compose, so the ribbon's own guilloché
   mask stays on the .hl and the linear fade lives here. home.js drives the
   wrapper's opacity 1→0 across ~120vh of scroll (static under reduced motion). */
.home-hero__ribbonwrap{
  position:absolute;top:0;right:0;bottom:0;
  width:min(46vw,780px);
  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--ribbon so this geometry wins over the contract's
   .hl.hl--ribbon.hl-gl pair in both fallback and engine states (equal
   specificity; this file loads after holo-fallback.css) */
.home-hero .hl.hl--ribbon{
  position:absolute;inset:0;
  width:100%;height:100%;
}

/* ---------- 2 · the FIRE list ---------- */
.home-fires{padding:var(--space-2xl) 0;}
.home-fires__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);
  margin-top:var(--space-lg);
}
.home-stat{
  position:relative;                 /* hosts the seal-stripe */
  isolation:isolate;                 /* keep foil above the card fill */
  background:color-mix(in srgb,currentColor 5%,transparent);
  border-radius:var(--radius-card);
  padding:var(--space-sm);
}
/* the trust rule: the seal-stripe marks the "real incident data" card */
.home-stat--seal{
  overflow:clip;
  padding-left:calc(var(--space-sm) + clamp(20px,2.5vw,36px));
}
.home-stat__ic{display:block;width:26px;height:26px;color:color-mix(in srgb,currentColor 62%,transparent);}
.home-stat__num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(46px,5.4vw,72px);line-height:1.1;letter-spacing:-0.02em;
  margin-top:var(--space-xs);
}
.home-stat__label{
  font-size:17px;font-weight:600;margin:6px 0 0;
}
.home-stat__foot{
  font-size:14.5px;line-height:1.5;
  color:color-mix(in srgb,currentColor 66%,transparent);
  margin:var(--space-xs) 0 0;
}

/* ---------- 3 · product teasers (shared) ---------- */
.home-teaser{padding:var(--space-2xl) 0;}
.home-teaser__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,4.4vw,52px);line-height:1.06;letter-spacing:-0.02em;
  margin:0;max-width:24ch;
}
.home-teaser__p{
  font-size:clamp(17px,1.9vw,20px);line-height:1.55;max-width:52ch;
  color:color-mix(in srgb,currentColor 78%,transparent);
  margin:var(--space-sm) 0 0;
}
.home-teaser__cta{margin:var(--space-md) 0 0;}

/* 3a — Surface: the dark beat; the silver steel line is the voice */
.home-surface{
  background:var(--cx-dark-bg,var(--slate-950));
  color:var(--cx-dark-ink,var(--on-dark));
  min-height:78vh;
  display:flex;flex-direction:column;justify-content:center;
}
.home-steel{margin:var(--space-sm) 0 0;overflow:clip;}
.home-steel .hl--steel{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(19px,6.4vw,92px);line-height:1.08;letter-spacing:-0.02em;
}
.home-surface .home-teaser__p{margin-top:var(--space-md);}

/* 3b — Scan: copy left, the Financial Risk Retired counter card right */
.home-scan__grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-xl);
  align-items:center;
}
.home-scan__copy{max-width:56ch;}
/* the counter card: white, hairline slate border, NO shadow. isolation keeps
   the foil pill's z-index:-1 fallback above the card's own fill. */
.home-frr{
  isolation:isolate;
  background:var(--canvas,#fff);
  border:1px solid var(--slate-200);
  border-radius:var(--radius-card);
  padding:var(--space-md);
}
.home-frr__title{
  font-size:22px;font-weight:600;color:var(--ink);
  margin:0;
}
.home-frr__fig{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(56px,6vw,72px);line-height:1.1;letter-spacing:-0.02em;
  margin:var(--space-xs) 0 0;
}
/* the $ sits OUTSIDE the pill, smaller and quiet (mirrors the mock) */
.home-frr__cur{
  font-size:0.55em;color:var(--slate-400);
  margin-right:0.08em;
}
/* the counting steel: the glyphs themselves are the foil mask (dark steel base
   reads right on the white card). home.js re-rasters the mask on each tick via
   EVD_HOLO.refresh. The inner span carries a min-width in ch so "1.4M" →
   "62.1M" never changes the box's width (no card wiggle, no canvas resize). */
.home-frr__num>span{
  display:inline-block;
  min-width:5.2ch;
}
/* pure-CSS skeleton bars (slate-100 rounded rects) */
.home-frr__bar{
  display:block;height:12px;
  border-radius:var(--radius-pill);
  background:var(--slate-100);
}
.home-frr__bar--a{margin-top:var(--space-sm);width:100%;}
.home-frr__bar--b{margin-top:10px;width:72%;}
.home-frr__bar--c{
  display:inline-block;width:64px;height:10px;
  vertical-align:middle;
}
.home-frr__foot{
  font-size:14px;color:var(--slate-500);
  margin:var(--space-sm) 0 0;
}
.home-frr__foot strong{color:var(--ink);font-weight:600;}

/* 3c — Reporting: copy left, the holo-framed board-slide mock right
   (ported from products/reporting/reporting.css, home-scoped) */
.home-report__grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-xl);
  align-items:center;
}
.home-slide{background:var(--fill-1);border-radius:var(--radius-card);overflow:hidden;}
.home-slide__bar{
  display:flex;justify-content:space-between;gap:var(--space-xs);
  padding:14px 28px;background:var(--fill-2);
  font-size:13px;font-weight:var(--w-medium);color:var(--slate-500);
}
.home-slide__body{padding:var(--space-md) 28px var(--space-sm);}
.home-slide__label{font-size:14px;font-weight:var(--w-medium);color:var(--slate-500);margin:0 0 8px;}
.home-slide__fig{
  font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:clamp(48px,5.4vw,76px);letter-spacing:-0.02em;line-height:1;
  color:var(--ink);margin:0;
}
.home-slide__delta{font-size:15px;font-weight:var(--w-medium);color:var(--slate-500);margin:12px 0 0;}
.home-slide__spark{display:block;width:100%;height:auto;margin-top:var(--space-sm);}
.home-slide__spark polyline{fill:none;stroke:var(--slate-400);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.home-slide__spark circle{fill:var(--slate-950);stroke:#fff;stroke-width:2;}

/* 3d — Warranty: the star teaser, quiet slate band (the emerald lives in the
   foil only). The holo-frame ring turns the body into a framed card. */
.home-warranty{background:var(--slate-100);color:var(--ink);}
.home-warranty__frame{isolation:isolate;}
/* the framed card needs its own fill so the ring reads as a frame */
.home-warranty__in{
  background:var(--canvas);
  padding:var(--space-lg);
}

/* ---------- 4 · three messages — stacking cards ---------- */
.home-stack{padding:var(--space-xl) 0;}
.home-stack__list>*+*{margin-top:var(--space-md);}
.home-scard{
  position:sticky;
  min-height:82vh;
  border-radius:var(--radius-card);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--space-lg);
}
.home-scard:nth-child(1){top:clamp(12px,3vh,24px);}
.home-scard:nth-child(2){top:calc(clamp(12px,3vh,24px) + 14px);}
.home-scard:nth-child(3){top:calc(clamp(12px,3vh,24px) + 28px);}
.home-scard__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,4.8vw,60px);line-height:1.08;letter-spacing:-0.02em;
  margin:0;max-width:20ch;
}
/* the monochrome trio: two paper steps, then ink */
.home-scard--light{background:var(--slate-100);color:var(--slate-950);}
.home-scard--mid{background:var(--slate-200);color:var(--slate-950);}
.home-scard--dark{background:var(--slate-950);color:#fff;}
/* light card: the warranty emblem seal (untilted) beside the headline.
   stage MEASURES, tilt LEANS (data-holo-lean="0" = no lean; engine renders).
   The stage's background matches the card fill EXACTLY so the seal canvas
   melts into the card (home.js mirrors this colour into the engine's field —
   the engine samples the section chain, which is white here); the radius +
   clip soften any residual edge. */
.home-scard--light{gap:var(--space-lg);}
.home-scard__seal{flex:0 0 auto;}
.home-scard__seal .emblem-stage{
  width:min(440px,76vw);aspect-ratio:1;
  background:var(--slate-100);
  border-radius:var(--radius-card);
  overflow:clip;
}
.home-scard__seal .emblem-tilt{width:100%;height:100%;}
.home-scard__seal .warr-holo{display:block;}
/* mid card: guilloché seal-stripe on the left edge, 3x the contract width
   (clearance padding tracks the stripe) */
.home-scard--mid{
  overflow:clip;
  padding-left:calc(var(--space-lg) + clamp(60px,7.5vw,108px));
}
.home-scard--mid .hl.hl--seal{width:clamp(60px,7.5vw,108px);}
/* dark card: hosts the "in dollars" foil pill — its own stacking context so
   the pill's z-index:-1 fallback paints above the ink card fill */
.home-scard--dark{isolation:isolate;}

/* ---------- 5 · who needs Evidence ---------- */
.home-who{padding:var(--space-2xl) 0;}
.home-who__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);
  margin-top:var(--space-lg);
}
.home-whoc{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);
  background:color-mix(in srgb,currentColor 5%,transparent);
  border-radius:var(--radius-card);
  padding:var(--space-sm);
  transition:background .35s var(--ease-silk),border-color .35s var(--ease-silk),transform .35s var(--ease-silk);
}
.home-whoc:hover{background:var(--slate-100);transform:translateY(-2px);}
@media(prefers-reduced-motion:reduce){
  .home-whoc{transition:none;}
  .home-whoc:hover{transform:none;}
}
/* glowy foil icons, out of any boxes (the contract's 28px default, sized up;
   the compound selector outranks .hl.hl--icon's base size in all states) */
.home-whoc .hl.hl--icon{width:32px;height:32px;}
.home-whoc__h{
  font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.01em;
  margin:4px 0 0;
}
.home-whoc__p{
  font-size:15px;line-height:1.55;flex:1;
  color:color-mix(in srgb,currentColor 72%,transparent);
  margin:0;
}

/* ---------- 6 · closer ---------- */
.home-closer{padding:var(--space-lg) 0 0;}
.home-closer__panel{
  background:var(--cx-dark-bg,var(--slate-950));
  color:var(--cx-dark-ink,var(--on-dark));
  border-radius:var(--radius-card);
  padding:var(--space-xl) var(--space-md);
  text-align:center;
}
.home-closer__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 auto;max-width:20ch;
}
.home-closer__p{
  font-size:clamp(17px,1.9vw,20px);line-height:1.55;max-width:48ch;
  color:color-mix(in srgb,currentColor 80%,transparent);
  margin:var(--space-sm) auto 0;
}
.home-closer__btn{margin-top:var(--space-md);}
/* the page-ender pattern: the glowy CTA at 2x scale. Sizing lives on the
   inner pill (the .btn--holo wrapper drops its own fill/padding); 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;
}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .home-hero__ribbonwrap{width:42vw;}
  .home-hero__copy{max-width:none;padding-right:64px;}
  .home-fires__grid,.home-who__grid{grid-template-columns:1fr;}
  .home-scan__grid,.home-report__grid{grid-template-columns:1fr;gap:var(--space-lg);}
  .home-warranty__in{padding:var(--space-md);}
  .home-frr{padding:var(--space-sm);}
  .home-scard{min-height:70vh;}
  .home-scard--light{flex-direction:column;gap:var(--space-sm);}
  .home-scard--mid{padding-left:calc(var(--space-md) + clamp(60px,7.5vw,108px));}
}
@media(max-width:560px){
  .home-hero__sticky{padding-top:104px;}
  .home-hero__copy{padding-right:40px;}
  .home-closer__panel{padding:var(--space-lg) var(--space-sm);}
  .btn--holo-xl .hl.hl--btn{font-size:19px;padding:18px 34px;}
}