/* ==========================================================================
   Evidence Warranty - THE showcase: the money-note page.
   White page, EMERALD foil (the concept presets pick the hue - no foil colors
   here), shield/logo patterns as the page signature. Density maximum, but
   composed: one hero effect per scroll beat.

   Beats: hero seal / pinned bet (steel) / pitch / how-it-works stack (seal
   stripes) / coverage (shield stripe) / tiers (foil ring + shield fill) /
   dark closer (pinned steel: "$5M. In writing.") / exclusions + FAQ / CTA.

   Ported from the prime holo-card-lab (lab.css + lab-sections.css): the
   .hcl__pin beats, the .hcl__work sticky stack, and the tier layout +
   tier-shield stroke-draw reveals. Foil styling itself lives ONLY in
   assets/holo/holo-fallback.css - this file sizes and positions boxes.

   CONCEPTS: everything below derives from --page-bg/--page-ink (concepts.css)
   through the --wr-* mixes, so the page survives Obsidian's full-dark shell
   flip - and Specimen's dark hero plate re-mixes the same ramp locally - with
   no per-concept color forks. Concept-gated decoration (the mix top rule in
   ledger/obsidian/specimen, specimen's sheet frame + serial strip + drop-cap
   numerals, the sovereign guilloché rule) is display-gated in the markup;
   this file only sizes the boxes.
   ========================================================================== */

/* ---------- page shell + official-document shared bits ----------
   The selector list includes specimen's hero so the D dark plate re-mixes the
   whole --wr-* ramp against its locally re-pointed --page-bg/--page-ink pair
   (custom properties resolve per element, so the hero's tokens go on-dark
   while the rest of the page keeps the white-paper mixes). */
/* overflow guard on BODY (on main it would create a nested scroll
   container) - the deal-in card reveals and the agenda slide-in translate
   past the right edge before they land (2026-07-22: Aaron caught the
   horizontal scrollbar at the globe slide) */
body{overflow-x:hidden;overflow-x:clip;}

.warr,
[data-concept="specimen"] .warr-hero{
  isolation:isolate;   /* the bgfx layer paints at z:-1 INSIDE this context */
  background:var(--page-bg,var(--canvas));
  color:var(--page-ink,var(--ink));
  /* page-relative grays: every fill/hairline/muted tone mixes off the
     concept's --page-bg/--page-ink pair so Obsidian's black shell gets
     dark fills and light text for free (calibrated to the slate ramp on
     the white page: fill-1~slate-50, fill-2~slate-100, fill-3~slate-200,
     line~slate-300, faint~slate-400, soft~slate-500, muted~slate-600) */
  --wr-fill-1:color-mix(in srgb, var(--page-ink,var(--ink)) 4%, var(--page-bg,var(--canvas)));
  --wr-fill-2:color-mix(in srgb, var(--page-ink,var(--ink)) 7%, var(--page-bg,var(--canvas)));
  --wr-fill-3:color-mix(in srgb, var(--page-ink,var(--ink)) 12%, var(--page-bg,var(--canvas)));
  --wr-hairline:color-mix(in srgb, var(--page-ink,var(--ink)) 14%, var(--page-bg,var(--canvas)));
  --wr-line:color-mix(in srgb, var(--page-ink,var(--ink)) 26%, var(--page-bg,var(--canvas)));
  --wr-ink-faint:color-mix(in srgb, var(--page-ink,var(--ink)) 45%, var(--page-bg,var(--canvas)));
  --wr-ink-soft:color-mix(in srgb, var(--page-ink,var(--ink)) 62%, var(--page-bg,var(--canvas)));
  --wr-ink-muted:color-mix(in srgb, var(--page-ink,var(--ink)) 75%, var(--page-bg,var(--canvas)));
}
/* ---------- concept-gated foil rules (boxes only; foil = holo-fallback) ---------- */
/* A Sovereign's ONE guilloché rule, under the coverage heading */
.warr-rule--cov{
  height:12px;
  width:min(360px,100%);
  margin:0 0 18px;
}

/* ---------- concept navtint sentinels (site.js reads [data-navtheme] under
   the bar): the page-level one covers obsidian's full-dark shell; the hero
   one covers specimen's dark plate while it sits under the nav ---------- */
.warr-navtint{pointer-events:none;}
.warr-navtint--page{position:fixed;inset:0;}
.warr-navtint--hero{position:absolute;inset:0;}

/* ---------- D Specimen's sheet furniture: serial strip + drop-cap numerals
   (steel derivatives; type defaults live in holo-fallback.css - boxes only
   here). .warr-fine isolates so the numerals' z-index:-1 CSS fallback paints;
   the other numeral hosts already own stacking contexts. ---------- */
.warr-fine{isolation:isolate;}
.hl.warr-serial,.hl.warr-serial.hl-gl{display:block;margin-top:16px;}
.hl.warr-num,.hl.warr-num.hl-gl{display:block;font-size:clamp(28px,3.2vw,40px);margin-bottom:14px;}

/* ---------- S1 · hero: copy left, THE SEAL right ---------- */
.warr-hero{
  position:relative;
  isolation:isolate;             /* inline foil pill needs its own stacking context */
  padding:48px 24px;
  /* pull the hero up under the transparent nav so it fills the FIRST
     viewport exactly - the centered row (and the seal in it) then sits at
     the true vertical middle of the screen, not of a nav-offset container
     (warranty.js measures --warr-nav-h from the live header) */
  margin-top:calc(-1 * var(--warr-nav-h,79px));
}
/* mobile: the hero is taller than the viewport, so centering can't clear
   the bar - give the content explicit room below the nav instead
   (2026-07-23, Aaron: the headline loaded crammed under the logo row) */
@media(max-width:880px){
  .warr-hero{padding-top:calc(var(--warr-nav-h,72px) + 40px);}
}
.warr-hero__in{
  max-width:1240px;margin:0 auto;width:100%;
  display:flex;align-items:center;
  gap:clamp(32px,6vw,96px);
}
.warr-hero__copy{flex:1 1 auto;min-width:0;}
.warr-hero__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(44px,5.6vw,84px);line-height:1.05;letter-spacing:-0.03em;
  color:inherit;margin:0 0 24px;
}
.warr-hero__lead{
  font-size:clamp(17px,1.6vw,21px);line-height:1.55;
  max-width:34em;margin:0 0 32px;
}
.warr-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 40px;}
.warr-hero__note{
  border-top:1px solid var(--wr-hairline);
  padding-top:16px;margin:0;max-width:34em;
  font-size:12px;font-weight:400;   /* a footnote, not a label (Aaron 2026-07-22) */
  color:var(--page-ink,var(--ink));   /* was --wr-ink-soft; grey copy retired 2026-07-21 (Aaron) */
}
.warr-hero__seal{flex:0 0 auto;}

/* ---------- S2 · Say it in dollars: the centered fires-template trio ----------
   The home FIRE-list template (center-aligned header block + three uniform
   cards with glowy icons), reused per Aaron 2026-07-22. Icons by Eklip
   Studio, Noun Project (attribution comments inside each SVG). */
.warr-say{padding:var(--space-2xl) 0;}
.warr-say__h{
  font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:clamp(30px,4.2vw,52px);line-height:1.14;letter-spacing:-0.02em;
  text-align:center;margin:0 auto;max-width:24ch;
}
.warr-say__lead{
  font-size:17px;line-height:1.55;text-align:center;
  max-width:52ch;margin:var(--space-sm) auto 0;
}
.warr-say__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);
  margin-top:var(--space-lg);
}
/* the stakeholders duplicate carries FOUR cards */
.warr-stake .warr-say__grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1023px){.warr-stake .warr-say__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.warr-stake .warr-say__grid{grid-template-columns:1fr;}}
@media(max-width:880px){.warr-say__grid{grid-template-columns:1fr;}}
.warr-saycard{
  position:relative;isolation:isolate;
  background:var(--slate-50);   /* 100% fill - the transparent mix let the bgfx through (Aaron) */
  border-radius:var(--radius-card);
  padding:var(--space-sm);
}
.warr-saycard .hl.hl--icon,
.warr-saycard .hl.hl--icon.hl-gl{display:block;width:60px;height:60px;}
/* the card headings: the srow__h voice at 24px (Aaron 2026-07-22) */
.warr-saycard h3{
  font-family:var(--font-display);font-weight:700;
  font-size:24px;line-height:1.1;
  letter-spacing:-0.02em;color:var(--page-ink,var(--ink));
  margin:16px 0 12px;
}
.warr-saycard p{font-size:15.5px;line-height:1.55;margin:8px 0 0;}
.warr-saycard .warr-saycard__link{margin:14px 0 0;}
.warr-saycard__link a{font-weight:600;}

/* ---------- S3c · the map: copy left, stacked bullet cards right ----------
   The warr-saycard shell as a vertical list; icons are plain lucide ink
   (Aaron 2026-07-22: simple icons, no foil here). */
.warr-map{padding:var(--space-2xl) 24px;}
.warr-map__grid{
  width:100%;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-xl);
  align-items:center;
}
@media(max-width:880px){.warr-map__grid{grid-template-columns:1fr;}}
.warr-map__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.8vw,54px);line-height:1.08;letter-spacing:-0.03em;
  color:inherit;margin:0 0 var(--space-md);
}
.warr-map__p{
  font-size:clamp(17px,1.8vw,21px);line-height:1.55;
  color:inherit;margin:0 0 var(--space-md);max-width:48ch;
}
.warr-map__link{margin:0;}
.warr-map__link a{font-weight:600;}
.warr-map__list{display:flex;flex-direction:column;gap:var(--space-sm);}
.warr-mapcard{
  position:relative;isolation:isolate;
  background:var(--slate-50);   /* 100% fill - the transparent mix let the bgfx through (Aaron) */
  border-radius:var(--radius-card);
  padding:var(--space-sm);
  display:flex;gap:16px;align-items:flex-start;
}
.warr-mapcard__ic .hl.hl--icon{display:block;margin-top:2px;}   /* 28px foil icon, home-fires treatment */
.warr-mapcard h3{
  font-family:var(--font-display);font-weight:700;
  font-size:24px;line-height:1.1;letter-spacing:-0.02em;
  color:var(--page-ink,var(--ink));
  margin:0;
}
.warr-mapcard p{font-size:15.5px;line-height:1.55;margin:6px 0 0;}

/* ---------- S3d · the green streak: copy left, streak-tracker card right.
   The card recreates the greenstreak artwork: slate-200 sheet, a laminate
   edge on the left in the home-bento__lam style (teal/emerald hue path),
   the giant day count, live date range, and the foil award ribbon bleeding
   off the top-right corner (glowy outlines over a white interior). ---------- */
.warr-streak{padding:var(--space-2xl) 24px;isolation:isolate;}
.warr-streak__grid{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:var(--space-xl);align-items:center;}
@media(max-width:880px){.warr-streak__grid{grid-template-columns:1fr;gap:var(--space-md);}}
.warr-streak__h{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.8vw,54px);line-height:1.08;letter-spacing:-0.03em;color:inherit;margin:0 0 var(--space-md);}
.warr-streak__lead{font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:inherit;margin:0 0 var(--space-md);max-width:48ch;}
.warr-streak__rows{display:flex;flex-direction:column;gap:var(--space-sm);margin:0 0 var(--space-md);}
/* the rows wear the warr-mapcard shell (same fill/radius/padding) */
.warr-streak__row{
  position:relative;isolation:isolate;
  background:var(--slate-50);   /* 100% fill - the transparent mix let the bgfx through (Aaron) */
  border-radius:var(--radius-card);
  padding:var(--space-sm);
  display:flex;gap:16px;align-items:flex-start;
}
.warr-streak__ic .hl.hl--icon{display:block;margin-top:2px;}   /* 28px foil icon, home-fires treatment */
.warr-streak__row h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:-0.02em;color:var(--page-ink,var(--ink));margin:0;}
.warr-streak__row p{font-size:15.5px;line-height:1.55;margin:6px 0 0;max-width:44ch;}
.warr-streak__link{margin:0;}
.warr-streak__link a{font-weight:600;}
/* the tracker card: proportions match the source artwork (574x440, r24) */
.warr-streak__card{
  --streak-stripe:clamp(48px,15.3%,88px);   /* scales with the card so narrow layouts keep room for the title */
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--slate-200);border-radius:var(--radius-card);
  aspect-ratio:574/440;
}
/* laminate edge: the home-bento__lam three-sheet recipe confined to the
   left stripe (sheets re-tiled for the narrow band) */
.warr-streak__lam{position:absolute;top:0;bottom:0;left:0;width:var(--streak-stripe);z-index:0;opacity:0.6;pointer-events:none;}
.warr-streak__lam .hl.hl--rule,
.warr-streak__lam .hl.hl--rule.hl-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.warr-streak__lam .hl--pat-guilloche,
.warr-streak__lam .hl--pat-guilloche.hl-gl{
  -webkit-mask-size:120px auto;mask-size:120px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
}
.warr-streak__lam .hl--pat-logo,
.warr-streak__lam .hl--pat-logo.hl-gl{
  -webkit-mask-size:auto 480px;mask-size:auto 480px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:left center;mask-position:left center;
}
.warr-streak__body{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(24px,7%,44px);
  padding-left:calc(var(--streak-stripe) + clamp(20px,5%,40px));
  color:var(--slate-950);
}
.warr-streak__t{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.2vw,28px);letter-spacing:-0.01em;line-height:1.2;margin:0;}
.warr-streak__stat{display:flex;align-items:baseline;gap:20px;margin:auto 0;}
.warr-streak__num{font-family:var(--font-display);font-weight:700;font-size:clamp(72px,9.5vw,118px);line-height:1;letter-spacing:-0.03em;}
.warr-streak__unit{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-0.02em;}
.warr-streak__dates{font-weight:600;font-size:clamp(15px,1.6vw,19px);line-height:1.3;margin:0;}
.warr-streak__sep{font-weight:400;padding:0 4px;}
/* the award ribbon: white interior sheet under a glowy foil outline, both
   on the same custom award geometry, clipped by the card's rounded corner */
.warr-streak__award{position:absolute;top:-14%;right:-20%;width:48%;aspect-ratio:1;z-index:2;pointer-events:none;}   /* sized/placed so the rosette's outer stroke clears the title's "k" at every card width (2026-07-22, Aaron) */
.warr-streak__award-fill{position:absolute;inset:0;width:100%;height:100%;}
.warr-streak__award .hl.hl--icon,
.warr-streak__award .hl.hl--icon.hl-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* the ribbon's silver interior (2026-07-22, Aaron: the plain white fill
   blended into the card) - the board-agenda paper treatment: silver-locked
   laminate sheets at half strength over the white sheet, the WRAPPER
   clipped to the award's fill shape */
.warr-streak__award-lam{
  position:absolute;inset:0;opacity:0.45;pointer-events:none;   /* full agenda stack at 0.45: silver enough to draw the card's edge against the white page, a shade lighter than the card */
  -webkit-mask:url('../../assets/holo/svg/icon-award-fill.svg') center/contain no-repeat;
  mask:url('../../assets/holo/svg/icon-award-fill.svg') center/contain no-repeat;
}
.warr-streak__award-lam .hl.hl--rule,
.warr-streak__award-lam .hl.hl--rule.hl-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.warr-streak__award-lam .hl--pat-guilloche,
.warr-streak__award-lam .hl--pat-guilloche.hl-gl{
  -webkit-mask-size:120px auto;mask-size:120px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
}
.warr-streak__award-lam .hl--pat-logo,
.warr-streak__award-lam .hl--pat-logo.hl-gl{
  -webkit-mask-size:auto 480px;mask-size:auto 480px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:left center;mask-position:left center;
}

/* ---------- HERO STICKER (2026-07-26): six-sheet SVG laminate + globe ----------
   The sticker is a square stage; every sheet is a .hl--seal foil surface
   whose SHAPE is its own SVG alpha mask (assets/seal/seal-l*.svg, 800x800,
   shared centre). The page-scoped compound selector outranks the
   holo-fallback.css seal-stripe contract (absolute left-edge band) and
   re-shapes each sheet to fill the stage. Sheets l1/l2/l4 spin slowly;
   the CSS mask lives in element space so the foil art rotates with the
   sheet while the light stays screen-driven. */
.warr-seal{
  position:relative;
  width:min(450px,72vw);
  aspect-ratio:1;
}
.warr-seal .hl.hl--seal.warr-seal__l,
.warr-seal .hl.hl--seal.warr-seal__l.hl-gl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  -webkit-mask:var(--warr-seal-mask) center/cover no-repeat;
  mask:var(--warr-seal-mask) center/cover no-repeat;
  /* entry: soft arrival, never a TRUE 0 at boot (the engine's cssShown
     gate would park the surface; the home-gbg 0.02 floor precedent) */
  opacity:0.02;
  animation:warr-seal-in .9s var(--ease-silk) .15s forwards;
}
@keyframes warr-seal-in{to{opacity:var(--warr-seal-o,1);}}
.warr-seal__l--1,.warr-seal__l--1.hl-gl{--warr-seal-mask:url('../../assets/seal/seal-l1.svg');}
.warr-seal__l--2,.warr-seal__l--2.hl-gl{
  --warr-seal-mask:url('../../assets/seal/seal-l2.svg');
  --warr-seal-o:0.75;
}
.warr-seal__l--3,.warr-seal__l--3.hl-gl{--warr-seal-mask:url('../../assets/seal/seal-l3.svg');}   /* the disc: silver light, full strength (data-holo-silver in the markup) */
.warr-seal__l--4,.warr-seal__l--4.hl-gl{--warr-seal-mask:url('../../assets/seal/seal-l4.svg');}
.warr-seal__l--4b,.warr-seal__l--4b.hl-gl{--warr-seal-mask:url('../../assets/seal/seal-l4b.svg');}
.warr-seal__l--4c,.warr-seal__l--4c.hl-gl{--warr-seal-mask:url('../../assets/seal/seal-l4c.svg');}   /* the coin plates under the l5 badges */
/* the disc and the coin plates recede: full palette foil, pushed into the
   background by darkening the whole surface (opaque, never transparent) */
.warr-seal .hl.hl--seal.warr-seal__l--3,
.warr-seal .hl.hl--seal.warr-seal__l--3.hl-gl,
.warr-seal .hl.hl--seal.warr-seal__l--4c,
.warr-seal .hl.hl--seal.warr-seal__l--4c.hl-gl{
  filter:brightness(0.72) saturate(1.1);
}
.warr-seal__l--5,.warr-seal__l--5.hl-gl{--warr-seal-mask:url('../../assets/seal/seal-l5.svg');}
/* the small rotating dot globe between l3 and l4 (warranty-seal-globe.js):
   l3's disc is r=224 of the 800 viewBox (56% of the stage); the sphere is
   drawn at 90% of that disc. The canvas box adds a little headroom so the
   rim dots never clip (sphere R = 0.48 of the canvas). */
.warr-seal__globe{
  position:absolute;
  left:50%;top:50%;
  translate:-50% -50%;
  width:49.9%;   /* 95% of the first pass (Aaron 2026-07-26) */
  aspect-ratio:1;
  pointer-events:none;
}

/* C Obsidian's crown moment: the emerald seal on near-black gets a subtle
   monochrome slate-900 spotlight breathing behind it (a seal-anchored
   equivalent of the .cx-spotlight helper's vignette, concepts.css §4d;
   static gradient - no motion; .warr-hero's isolation keeps the z-index:-1
   pseudo on the page) */
[data-concept="obsidian"] .warr-hero__seal{position:relative;}
[data-concept="obsidian"] .warr-hero__seal::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 46%,
    var(--slate-900) 0%,
    color-mix(in srgb, var(--slate-900) 45%, transparent) 46%,
    transparent 72%);
}

/* D Specimen's dark hero plate ("the specimen plate"): the hero re-points the
   page pair to the universal dark-band values - the shared shell declaration
   at the top of this file carries this selector, so the whole --wr-* ramp
   re-mixes on-dark for free - and paints the .cx-spotlight recipe
   (concepts.css §4d) locally, since the helper class itself is ungated and
   would darken the hero in every concept. Full-bleed: the negative inline
   margins cancel specimen's sheet-frame main padding (the §4b clamp) and the
   inline padding re-issues it so the copy stays on the page grid. */
[data-concept="specimen"] .warr-hero{
  --page-bg:var(--cx-dark-bg);
  --page-ink:var(--cx-dark-ink);
  background:radial-gradient(120% 100% at 50% 32%,var(--slate-900) 0%,var(--cx-dark-bg) 68%);
  margin-inline:calc(-1 * clamp(32px, 4vw, 64px));
  padding-inline:calc(24px + clamp(32px, 4vw, 64px));
}

/* dark-shell button pairing: obsidian's full-dark page and specimen's dark
   hero plate invert the buttons (site.css .btn--primary/--tertiary are
   ink-on-white chrome and would sink into the dark) */
[data-concept="obsidian"] .warr .btn--primary,
[data-concept="specimen"] .warr-hero .btn--primary{background:#fff;color:var(--slate-950);}
[data-concept="obsidian"] .warr .btn--primary:hover,
[data-concept="specimen"] .warr-hero .btn--primary:hover{background:var(--slate-100);}
[data-concept="obsidian"] .warr .btn--tertiary,
[data-concept="specimen"] .warr-hero .btn--tertiary{color:#fff;}
[data-concept="obsidian"] .warr .btn--tertiary:hover,
[data-concept="specimen"] .warr-hero .btn--tertiary:hover{background:rgba(255,255,255,0.14);}

/* ---------- S2 · the bet: pinned steel type (ported: lab-sections .hcl__pin
   + lab.css .hlt-bet__line; holo-pin.js drives the fade) ---------- */
.hcl__pin{
  min-height:200vh;
  display:block;
  padding:0;
}
.hcl__pin-sticky{
  position:sticky;
  top:0;
  height:100vh;
  box-sizing:border-box;
  overflow:hidden;
}
/* the bet, two beats (2026-07-22, Aaron): the question pins and fades out
   mid-scroll, then the verdict fades in - warranty.js owns the crossfade
   (opacity on the phase WRAPPERS; the steel canvases inside never resize) */
.warr-bet{position:relative;min-height:280vh;padding:0;display:block;}
.warr-bet__sticky{
  position:sticky;top:0;height:100vh;box-sizing:border-box;overflow:hidden;
}
.warr-bet__phase{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  padding:96px clamp(24px,6vw,96px);
  text-align:center;
  opacity:0;                       /* warranty.js drives the crossfade */
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .warr-bet{min-height:auto;}
  .warr-bet__sticky{position:static;height:auto;}
  .warr-bet__phase{position:static;opacity:1;}
}
.hlt-bet__line{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(48px,8.4vw,96px);   /* lab's 96px, made fluid below 1200px */
  line-height:1.08;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
/* holo-fallback's generic .hl sets font-size:inherit and would shrink the
   bet lines to body size - re-assert the display size (ported from lab.css) */
.hl.hlt-bet__line{font-size:clamp(48px,8.4vw,96px);}

/* ---------- S3b2 · the story: four screen-filling stacked cards ----------
   The stack-list mechanic (see .hcl__work below): sticky cards at staggered
   tops slide up from below and pile on each other. srow-sized sheets on the
   slate ramp, centered type, no images/numbers; the shield+logo mix
   seal-stripe rides the RIGHT edge at DOUBLE the seal width. */
.warr-story{position:relative;padding:var(--space-lg) 24px;}
.warr-story__list{
  max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;gap:120px;
}
.warr-story__list::after{content:"";height:30vh;}   /* hold the last card a beat longer */
.warr-storycard{
  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(28px,7vw,96px);
  padding-right:calc(clamp(28px,7vw,96px) + clamp(40px,5vw,72px));   /* clear the 2x stripe */
  text-align:center;
}
.warr-storycard:nth-child(1){top:120px;background:var(--wr-fill-1);z-index:4;}
.warr-storycard:nth-child(2){top:152px;background:var(--wr-fill-2);z-index:5;}
.warr-storycard:nth-child(3){top:184px;background:var(--wr-fill-1);z-index:6;}
.warr-storycard:nth-child(4){top:216px;background:var(--wr-fill-2);z-index:7;}
/* the mix stripe rides the card's right edge at 2x the seal width
   (selectors outweigh holo-fallback's .hl.hl--seal[.hl-gl] base) */
.hl.hl--seal.warr-storycard__stripe,
.hl.hl--seal.warr-storycard__stripe.hl-gl{left:auto;right:0;width:clamp(40px,5vw,72px);}
.warr-storycard__in{max-width:860px;}
.warr-storycard h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.8vw,50px);line-height:1.1;letter-spacing:-0.025em;
  color:var(--page-ink,var(--ink));margin:0;
}
.warr-storycard p{
  font-size:clamp(18px,2vw,23px);line-height:1.55;
  margin:32px auto 0;max-width:44ch;   /* wider title-to-body gap (Aaron 2026-07-22) */
}

/* the coverage/exclusion cards DEAL IN from the right with a settle - the
   board-agenda drop-in scaled to card size; the reveal system's per-section
   stagger (90ms) cascades them. Reduced motion: instant (the generic
   [data-reveal] reduce rule is outweighed by these selectors, so repeat). */
.warr-js .warr-covr .warr-mapcard[data-reveal],
.warr-js .warr-notc .warr-mapcard[data-reveal]{
  opacity:0;
  transform:translateY(72px) rotate(2.2deg);   /* dealt from below (2026-07-22, Aaron) */
  transition:transform 0.9s cubic-bezier(0.16,1,0.3,1),
             opacity 0.45s ease-out;
}
.warr-js .warr-covr .warr-mapcard[data-reveal].in,
.warr-js .warr-notc .warr-mapcard[data-reveal].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .warr-js .warr-covr .warr-mapcard[data-reveal],
  .warr-js .warr-notc .warr-mapcard[data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- S5e · the globe: sfgraph-style slide on the white shell ----------
   Copy left, the live rotating globe right. warranty.js scales the WRAPPER
   1 -> 1.18 across the slide's traverse and fades it out over the last
   quarter (the globe canvas itself never resizes). ---------- */
/* pinned (hcl__pin gives the 200vh runway; overflow-hidden lives on the
   sticky, never on the pin - it would break stickiness) */
.warr-globe{padding:0;}
.warr-globe__sticky{
  display:flex;align-items:center;justify-content:center;
  padding:96px clamp(24px,5vw,72px);
}
.warr-globe__grid{width:100%;display:flex;justify-content:center;will-change:transform;}
/* the copy sits in a centered light-grey sheet over the growing globe
   (2026-07-22, Aaron: container + center alignment + bigger type) */
.warr-globe__copy{
  background:var(--wr-fill-1);border-radius:32px;
  max-width:960px;width:100%;
  padding:clamp(44px,6vw,80px) clamp(28px,7vw,96px);
  text-align:center;
}
.warr-globe__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(36px,4.6vw,64px);line-height:1.06;letter-spacing:-0.03em;
  color:inherit;margin:0 0 var(--space-sm);
}
.warr-globe__p{font-size:clamp(19px,2.2vw,26px);line-height:1.5;color:inherit;margin:0 auto;max-width:38ch;}
/* the fixed grow layer (surface recipe): page JS drives ONLY the layer's
   opacity; the engine owns the globe's size/position/dot alpha. The two
   overlapped slides raise their content above the z-0 layer. */
.warr-globe-layer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;}
.warr-globe-layer .hl.warr-globe-fixed,
.warr-globe-layer .hl.warr-globe-fixed.hl-gl{position:absolute;inset:0;}
@media(prefers-reduced-motion:reduce){.warr-globe-layer{display:none;}}
.warr-globe__grid{position:relative;z-index:1;}
.warr-stake .wrap{position:relative;z-index:1;}

/* ---------- S3b · the pitch: copy left, the board-agenda sheet right ----------
   Reworked 2026-07-22 (Aaron's sketch): established page typography - the
   display heading, regular body paragraphs, the Answer line bold. */
.warr-pitch{
  position:relative;
  padding:var(--space-2xl) 24px;
}
.warr-pitch__grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-xl);
  align-items:center;
}
@media(max-width:880px){.warr-pitch__grid{grid-template-columns:1fr;}}
.warr-pitch__in{isolation:isolate;}
.warr-pitch__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.8vw,54px);line-height:1.08;letter-spacing:-0.03em;
  color:inherit;margin:0 0 var(--space-md);
}
.warr-pitch__p1{
  font-size:clamp(17px,1.8vw,21px);line-height:1.55;
  color:inherit;margin:0 0 var(--space-sm);max-width:48ch;
}
.warr-pitch__p2{
  font-size:clamp(17px,1.8vw,21px);line-height:1.55;font-weight:700;
  color:inherit;margin:0 0 var(--space-sm);max-width:48ch;
}
/* (p3 merged into the Answer line 2026-07-22: "...they'd bet on... Until now.") */
/* the board-agenda sheet: rides the shared data-reveal IO, but with its own
   motion - slides in from the right, decelerating on a long ease-out, and
   LANDS at a slight angle, like a sheet somebody dropped on the desk */
/* the sheet is a stack: slate-50 paper + the bento Warranty card's
   silver-locked laminate (whisper strength) under the transparent agenda
   artwork - holographic security stock */
.warr-agenda{
  position:relative;max-width:520px;margin:0 auto;
  border-radius:24px;overflow:hidden;
  background:var(--slate-50);
}
.warr-agenda .warr-agenda__art{position:relative;z-index:1;display:block;width:100%;height:auto;}
.warr-agenda__lam{position:absolute;inset:0;z-index:0;opacity:0.4;pointer-events:none;}
.warr-agenda__lam .hl.hl--rule,
.warr-agenda__lam .hl.hl--rule.hl-gl{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.warr-agenda__lam .hl--pat-guilloche,
.warr-agenda__lam .hl--pat-guilloche.hl-gl{
  -webkit-mask-size:180px auto;mask-size:180px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
}
.warr-agenda__lam .hl--pat-logo,
.warr-agenda__lam .hl--pat-logo.hl-gl{
  -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;
}
.warr-js .warr-pitch__illo[data-reveal]{
  opacity:0;
  transform:translateX(58%) rotate(9deg);
  transition:transform 1.2s cubic-bezier(0.16,1,0.3,1),
             opacity 0.55s ease-out;
}
.warr-js .warr-pitch__illo[data-reveal].in{
  opacity:1;
  transform:translateX(0) rotate(-2.5deg);
}
@media(prefers-reduced-motion:reduce){
  .warr-js .warr-pitch__illo[data-reveal]{
    opacity:1;transform:rotate(-2.5deg);transition:none;
  }
}

/* ---------- S3 · how does it work: sticky-stacked cards (ported from
   lab-sections .hcl__work; shadows dropped - Elevate separates by fill).
   Cards 01 + 03 wear the shield+logo seal stripe (.hl--seal .hl--pat-mix,
   boxed by holo-fallback.css). ---------- */
.hcl__work{
  position:relative;
  padding:var(--space-md) 24px var(--space-lg);
}
.pstack__head{
  position:sticky;top:84px;z-index:3;
  max-width:920px;margin:0 auto var(--space-md);
  text-align:center;
}
.pstack__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4.6vw,56px);line-height:1.1;
  letter-spacing:-0.03em;color:inherit;margin:0;
}
.pstack__lead{
  font-size:clamp(16px,1.6vw,18px);line-height:1.6;
  color:inherit;max-width:42em;margin:12px auto 0;
}
.hcl__work .stack-list{
  max-width:1200px;margin:0 auto;
  display:flex;flex-direction:column;gap:120px;
}
.hcl__work .stack-list::after{content:"";height:30vh;}   /* hold the last card a beat longer */
.srow{
  position:sticky;
  display:flex;gap:48px;align-items:center;
  padding:36px 48px;
  padding-left:calc(48px + clamp(20px,2.5vw,36px));   /* room for the seal stripe */
  border-radius:32px;overflow:hidden;
}
/* three steps of the page-relative slate ramp; z above the pinned heading so
   the cards cover it as they slide up */
/* obsidian prints no seal stripes (C promo row) - drop the left padding that
   clears them in the other concepts */
[data-concept="obsidian"] .srow{padding-left:48px;}
.srow:nth-child(1){top:232px;background:var(--wr-fill-1);z-index:4;}
.srow:nth-child(2){top:264px;background:var(--wr-fill-2);z-index:5;}
.srow:nth-child(3){top:296px;background:var(--wr-fill-3);z-index:6;}
.srow__copy{flex:0.85;}
.srow__n{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.2vw,28px);line-height:1;
  letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
  color:var(--page-bg,var(--canvas));background:var(--page-ink,var(--ink));
  border-radius:var(--radius-pill);padding:12px 20px;
}
.srow__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,3.6vw,52px);line-height:1.04;
  letter-spacing:-0.02em;margin:16px 0 16px;color:var(--page-ink,var(--ink));
}
.srow__p{font-size:clamp(16px,1.5vw,19px);line-height:1.55;margin:0;color:var(--page-ink,var(--ink));}
.srow__p strong{font-weight:700;}
.srow__panel{
  flex:1.3;display:flex;align-items:center;justify-content:center;
  min-height:440px;
  background:color-mix(in srgb, var(--page-bg,var(--canvas)) 50%, transparent);
  border-radius:24px;padding:32px;overflow:hidden;
}
.shot{background:var(--wr-fill-1);border-radius:var(--radius-card);overflow:hidden;width:100%;}
.shot__bar{display:flex;align-items:center;gap:8px;padding:16px 20px;background:var(--wr-fill-2);}
.shot__bar span{width:12px;height:12px;border-radius:var(--radius-pill);background:var(--wr-line);}
.shot__body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:16/10;}
.shot__tag{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--page-ink,var(--ink));background:var(--wr-fill-3);border-radius:var(--radius-pill);padding:4px 12px;}
.shot__label{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,24px);color:var(--page-ink,var(--ink));}

/* ---------- S4 · coverage: five cost cards + ONE shield stripe on the
   section's right edge (the stripe box comes from holo-fallback; only its
   height is capped here so no cut tile edge shows) ---------- */
.warr-cov{
  position:relative;
  padding:var(--space-2xl) 24px;
  overflow:hidden;
  scroll-margin-top:80px;
}
.warr-cov .hl.hl--stripe,
.warr-cov .hl.hl--stripe.hl-gl{height:min(88%,720px);}
.warr-cov__in{
  width:100%;max-width:1100px;margin:0 auto;
  position:relative;z-index:1;
}
.warr-cov__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:-0.03em;
  margin:0 0 12px;
}
.warr-cov__lead{font-size:clamp(16px,1.6vw,19px);line-height:1.55;max-width:42em;margin:0;}
.warr-cov__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:var(--space-md) 0;
}
.warr-cov__card{
  position:relative;   /* anchors B Ledger's seal stripe (display-gated) */
  overflow:hidden;
  background:var(--wr-fill-1);
  border-radius:var(--radius-card);
  padding:28px;
  display:flex;flex-direction:column;gap:12px;
}
/* B Ledger only: the sealed cards clear their left-edge foil stripe */
[data-concept="ledger"] .warr-cov__card--sealed{
  padding-left:calc(28px + clamp(20px,2.5vw,36px));
}
/* banknote serials: Satoshi numerals, micro-tracking (content is alphanumeric codes) */
.warr-cov__num{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--page-ink,var(--ink));
}
.warr-chip{
  width:44px;height:44px;border-radius:12px;
  background:var(--wr-fill-3);color:var(--page-ink,var(--ink));
  display:flex;align-items:center;justify-content:center;flex:none;
}
.warr-chip svg{width:20px;height:20px;}
.warr-cov__card h3{
  font-family:var(--font-display);font-weight:700;
  font-size:20px;letter-spacing:-0.01em;margin:0;
}
.warr-cov__card p{margin:0;font-size:15px;line-height:1.5;color:var(--page-ink,var(--ink));}
.warr-cov__meta{
  display:flex;flex-wrap:wrap;gap:8px 32px;
  border-top:1px solid var(--wr-hairline);
  padding-top:16px;
  font-size:12px;font-weight:600;
  color:var(--page-ink,var(--ink));
}

/* ---------- S5 · tiers (layout ported from lab-sections: the pinned dwell,
   the grid, the three cards; the foil ring + shield-fill boxes come from
   holo-fallback) ---------- */
.warr-tiers{
  background:transparent;   /* the page shell paints through */
  min-height:170vh;
  padding:0 24px;
}
.warr-tiers__in{
  max-width:1100px;margin:0 auto;width:100%;position:sticky;top:0;z-index:1;
  min-height:100vh;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
}
.warr-tiers__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px,5.4vw,64px);line-height:1.06;letter-spacing:-0.03em;
  color:var(--page-ink,var(--ink));margin:0 0 var(--space-lg);
}
.warr-tiers__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:var(--space-md);
}
/* the two light tiers ride the page-relative fill ramp (dark fills on the
   Obsidian shell); Maximum stays the fixed ink card - a subtle lift off
   Obsidian's deeper void, the anchor card on white */
.warr-tier{position:relative;isolation:isolate;overflow:hidden;background:var(--wr-fill-1);border-radius:var(--radius-card);padding:40px 32px;display:flex;flex-direction:column;text-align:center;}
/* Foundation: the guilloche engraving as a STATIC texture - flat slate,
   no foil, no shimmer (the logo-pattern sheet was dropped 2026-07-22, Aaron:
   guilloche only) */
.warr-tier__tex{position:absolute;inset:0;z-index:-1;opacity:0.35;pointer-events:none;}
.warr-tier__tex-guill{position:absolute;inset:0;display:block;background:var(--slate-400);}
.warr-tier__tex-guill{
  -webkit-mask:url('../../assets/holo/svg/tile-guilloche.svg') center/140px auto repeat;
  mask:url('../../assets/holo/svg/tile-guilloche.svg') center/140px auto repeat;
}
/* Standard: the agenda sheet's shimmery silver-locked laminate as the ground */
.warr-tier__lam{position:absolute;inset:0;z-index:-1;opacity:0.4;pointer-events:none;}
.warr-tier__lam .hl.hl--rule,
.warr-tier__lam .hl.hl--rule.hl-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.warr-tier__lam .hl--pat-guilloche,
.warr-tier__lam .hl--pat-guilloche.hl-gl{
  -webkit-mask-size:140px auto;mask-size:140px auto;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:center;mask-position:center;
}
.warr-tier__lam .hl--pat-logo,
.warr-tier__lam .hl--pat-logo.hl-gl{
  -webkit-mask-size:auto 560px;mask-size:auto 560px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-position:left center;mask-position:left center;
}
.warr-tier--std{background:var(--wr-fill-2);}
.warr-tier--max{background:var(--ink);position:relative;z-index:1;}
/* wrap layout only - the ring's foil fallback lives in holo-fallback.css */
.warr-tier-wrap{display:flex;}
.warr-tier-wrap .warr-tier{flex:1;}
.warr-tier__label{
  font-family:var(--font-body);font-size:14px;font-weight:600;
  color:var(--page-ink,var(--ink));margin:0 0 24px;
}
.warr-tier--max .warr-tier__label{color:var(--on-dark);}
.warr-tier__preamt{font-size:14px;font-weight:500;color:var(--page-ink,var(--ink));margin-bottom:4px;}
.warr-tier--max .warr-tier__preamt{color:var(--on-dark);}
.warr-tier__amt{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(36px,5vw,52px);line-height:1;letter-spacing:-0.04em;
  color:var(--page-ink,var(--ink));font-variant-numeric:tabular-nums;
}
.warr-tier--max .warr-tier__amt{color:#fff;}
.warr-tier__postamt{font-size:14px;font-weight:500;color:var(--page-ink,var(--ink));margin-top:8px;}
.warr-tier--max .warr-tier__postamt{color:var(--on-dark);}
.warr-tier__foot{
  margin-top:auto;
  padding-top:28px;
  font-size:14px;font-weight:500;line-height:1.4;color:var(--page-ink,var(--ink));
  white-space:nowrap;   /* never break - closer to the card edges is fine (Aaron) */
  /* span the card's FULL width (cancel the 32px side padding) and center
     via flex - unlike text-align, a centered flex item overflows BOTH
     sides symmetrically, so the line never hangs off the right (Aaron) */
  margin-left:-32px;margin-right:-32px;
  display:flex;justify-content:center;
}
.warr-tier--max .warr-tier__foot{color:var(--on-dark);}
.warr-tiers__meta{
  padding-top:16px;margin:0;   /* hairline removed (Aaron 2026-07-23) */
  font-size:12px;font-weight:600;
  color:var(--page-ink,var(--ink));
}

/* ---- tier shields: stroke-draw reveals (ported from lab-sections).
   The lab ran them on load; here warranty.js adds .in to #warr-tiers-in on
   scroll-in. Initial hidden states are gated on .warr-js so a no-script
   render shows the finished artwork. ---- */
.tier-shield{display:block;width:80px;height:auto;margin:0 auto 8px;transition:transform .3s var(--ease-silk);}
.warr-tier:hover .tier-shield{transform:scale(1.05);}

/* monochrome stroke colours (the SVG paths use stroke="currentColor");
   page-relative so the strokes draw light on the Obsidian shell */
.tier-shield{color:var(--page-ink,var(--ink));}
.tier-shield--std .ts-shield-inner{color:var(--wr-ink-faint);}
/* the Maximum shield sits on the holo fill, so its artwork is forced to ink */
.tier-shield--max{color:var(--ink);}
.tier-shield--max .ts-shield-inner{color:var(--ink);}
/* the holo silhouette already draws the outer shield shape - hide the
   duplicate outer stroke on the Maximum card */
.tier-shield--max .ts-shield{display:none;}

/* initial hidden states for the stroke-draw reveals (JS-gated) */
.warr-js .ts-shield{stroke-dasharray:600;stroke-dashoffset:600;}
.warr-js .ts-shield-inner{opacity:0;}
.warr-js .ts-flame{stroke-dasharray:300;stroke-dashoffset:300;}
.ts-flame,.ts-flame-sm{transform-box:fill-box;transform-origin:center 80%;}
.warr-js .ts-flame-sm{opacity:0;}
.warr-js .ts-crown{stroke-dasharray:500;stroke-dashoffset:500;}
.warr-js .ts-line{stroke-dasharray:50;stroke-dashoffset:50;}

@keyframes ts-draw{to{stroke-dashoffset:0;}}
@keyframes ts-fade-in{to{opacity:1;}}
@keyframes ts-flicker-fdn{
  0%,100%{transform:scaleY(1);opacity:1;}
  40%{transform:scaleY(0.97) scaleX(1.015);opacity:0.55;}
  70%{transform:scaleY(1.02) scaleX(0.99);opacity:0.9;}
}
@keyframes ts-flicker-std{
  0%,100%{transform:scaleY(1);opacity:1;}
  30%{transform:scaleY(0.95) scaleX(1.03);opacity:0.6;}
  65%{transform:scaleY(1.03) scaleX(0.97);opacity:0.95;}
  80%{transform:scaleY(0.98);opacity:0.75;}
}
@keyframes ts-flicker-max{
  0%,100%{transform:scaleY(1);opacity:1;}
  20%{transform:scaleY(0.93) scaleX(1.05);opacity:0.45;}
  50%{transform:scaleY(1.05) scaleX(0.95);opacity:0.88;}
  70%{transform:scaleY(0.97) scaleX(1.02);opacity:0.6;}
  90%{transform:scaleY(1.02) scaleX(0.98);opacity:0.9;}
}
@keyframes ts-crown-pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.7;}
}

/* the draw reveals fire when warranty.js marks the tiers beat as in view */
.warr-tiers__in.in .tier-shield--fdn .ts-shield{animation:ts-draw .6s var(--ease-silk) .1s forwards;}
.warr-tiers__in.in .tier-shield--fdn .ts-flame{animation:ts-draw .5s var(--ease-silk) .55s forwards,ts-flicker-fdn 1.5s ease-in-out 1.05s infinite;}

.warr-tiers__in.in .tier-shield--std .ts-shield{animation:ts-draw .6s var(--ease-silk) .1s forwards;}
.warr-tiers__in.in .tier-shield--std .ts-shield-inner{animation:ts-fade-in .4s ease .55s forwards;}
.warr-tiers__in.in .tier-shield--std .ts-flame{animation:ts-draw .5s var(--ease-silk) .85s forwards,ts-flicker-std 1.5s ease-in-out 1.35s infinite;}

.warr-tiers__in.in .tier-shield--max .ts-shield-inner{animation:ts-fade-in .4s ease .6s forwards;}
.warr-tiers__in.in .tier-shield--max .ts-flame-sm{animation:ts-fade-in .3s ease .95s forwards,ts-flicker-max 1.5s ease-in-out 1.25s infinite;}
.warr-tiers__in.in .tier-shield--max .ts-crown{animation:ts-draw .6s var(--ease-silk) 1.1s forwards,ts-crown-pulse 3s ease-in-out 1.7s infinite;}
.warr-tiers__in.in .tier-shield--max .ts-line{animation:ts-draw .3s var(--ease-silk) 1.5s forwards;}

@media(prefers-reduced-motion:reduce){
  .ts-shield,.ts-flame,.ts-crown,.ts-line{stroke-dashoffset:0!important;animation:none!important;}
  .ts-shield-inner{opacity:1!important;stroke-dashoffset:0!important;animation:none!important;}
  .ts-flame-sm{opacity:1!important;animation:none!important;}
  .tier-shield{transform:none!important;transition:none!important;}
}

/* Maximum shield hologram: the absolutely positioned .hl--logo layer (masked
   by holo-fallback to the filled shield) under the stroke artwork */
.warr-tier__shieldwrap{
  position:relative;
  width:80px;
  height:80px;
  margin:0 auto 8px;
}
.warr-tier__shieldwrap .tier-shield{
  position:relative;
  z-index:1;
  width:80px;
  margin:0;
}

/* ---------- S6 · the closer: full-viewport dark band, typographic steel
   beat ("$5M. In writing.") in ALL concepts - the warranty never gets the
   globe. Same pin mechanics as the bet: the tall section drives a sticky
   100vh inner whose children holo-pin.js fades in and out. The dark comes
   from .cx-dark-band (concepts.css): slate-950 / white in all four
   concepts, isolation included for the inline steel foil. ---------- */
.warr-closer.hcl__pin{min-height:160vh;}
.warr-closer .hcl__pin-sticky{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  padding:96px clamp(24px,6vw,96px);
  text-align:center;
}
.warr-closer__h{margin:0;}
.warr-closer__line{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
/* holo-fallback's generic .hl sets font-size:inherit - re-assert the
   display size (same trick as .hl.hlt-bet__line above) */
.hl.warr-closer__line{font-size:clamp(48px,9vw,120px);}
.warr-closer__lead{
  font-size:clamp(17px,1.8vw,21px);line-height:1.55;
  color:var(--page-ink);   /* was an 84% mix; grey copy retired 2026-07-21 (Aaron) */
  max-width:30em;
  margin:28px 0 0;
}
.warr-closer__cta{margin:32px 0 0;}
/* a plain link, deliberately: the beat's one effect is the steel line */
.warr-closer__link{
  color:var(--page-ink);
  font-size:16px;font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.warr-closer__link:hover{text-decoration-thickness:2px;}

/* ---------- S7 · exclusions + FAQ: the small print ---------- */
.warr-fine{
  position:relative;
  padding:var(--space-2xl) 24px;
}
.warr-fine__in{
  max-width:880px;margin:0 auto;
  display:flex;flex-direction:column;gap:var(--space-xl);
}
.warr-fine__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-0.02em;
  margin:0 0 16px;
}
.warr-fine__lead{
  font-size:17px;line-height:1.55;
  color:var(--page-ink,var(--ink));
  max-width:46em;margin:0 0 24px;
}
.warr-excl__chips{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px;}
.warr-excl__chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wr-fill-2);
  border-radius:var(--radius-pill);
  padding:10px 18px;
  font-size:14px;font-weight:600;color:var(--page-ink,var(--ink));
}
.warr-excl__chip svg{width:16px;height:16px;color:var(--wr-ink-soft);}
.warr-excl__fine{
  border-top:1px solid var(--wr-hairline);
  padding-top:16px;margin:0;
  font-size:13px;line-height:1.6;
  color:var(--page-ink,var(--ink));
}
.warr-faq__list{border-bottom:1px solid var(--wr-hairline);}
.warr-faq__item{border-top:1px solid var(--wr-hairline);}
.warr-faq__q{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;
  font-size:16px;font-weight:600;color:var(--page-ink,var(--ink));
}
.warr-faq__q::-webkit-details-marker{display:none;}
.warr-faq__ic{
  flex:none;
  width:24px;height:24px;border-radius:var(--radius-pill);
  background:var(--wr-fill-2);color:var(--page-ink,var(--ink));
  display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;
  transition:transform .3s var(--ease-silk),background .2s ease;
}
details[open] .warr-faq__ic{transform:rotate(45deg);background:var(--wr-fill-3);}
.warr-faq__a{padding:0 0 20px;max-width:60ch;}
.warr-faq__a p{margin:0;font-size:15px;line-height:1.6;color:var(--page-ink,var(--ink));}

/* ---------- S8 · CTA panel (the slate-950 panel is deliberate in all four
   concepts - on Obsidian's deeper void it reads as a subtle lift) ---------- */
.warr-cta{
  position:relative;
  padding:var(--space-lg) 24px 0;   /* air above the panel - it bled into the founder band (Aaron 2026-07-23) */
}
.warr-cta__panel{
  max-width:1100px;margin:0 auto;
  background:var(--slate-950);color:var(--on-dark);
  border-radius:var(--radius-card);
  padding:clamp(48px,7vw,96px) clamp(28px,6vw,88px);
  text-align:center;
  isolation:isolate;             /* the $5M foil pill */
}
.warr-cta__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4.4vw,56px);line-height:1.1;letter-spacing:-0.03em;
  color:#fff;margin:0 0 20px;
}
.warr-cta__body{
  font-size:18px;line-height:1.55;
  color:#fff;
  max-width:46ch;margin:0 auto 32px;
}
/* 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);}

/* ---------- silky IO reveals (warranty.js adds .in; the hidden state is
   JS-gated so a no-script render shows everything) ---------- */
.warr-js [data-reveal]{
  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);
}
.warr-js [data-reveal].in{opacity:1;transform:none;}

/* ---------- reduced motion: final states, no travel ---------- */
@media(prefers-reduced-motion:reduce){
  .warr-seal .hl.hl--seal.warr-seal__l,
  .warr-seal .hl.hl--seal.warr-seal__l.hl-gl{animation:none;opacity:var(--warr-seal-o,1);}
  .warr-js [data-reveal]{opacity:1;transform:none;transition:none;}
  .warr-faq__ic{transition:none;}
}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .warr-hero__in{flex-direction:column;align-items:flex-start;}
  .warr-hero__seal{align-self:center;}
  .warr-seal{width:min(420px,78vw);}
  .warr-bet .hcl__pin-sticky{padding:96px 24px;}
  .hlt-bet__line{white-space:normal;}
  .warr-closer .hcl__pin-sticky{padding:96px 24px;}
  .warr-closer__line{white-space:normal;}
  .pstack__head{position:static;}
  /* relative (not the lab's static): the absolutely positioned seal stripe
     must keep anchoring to the card, not the section */
  .srow{position:relative;top:auto;flex-direction:column;align-items:flex-start;padding:28px;padding-left:calc(28px + clamp(20px,2.5vw,36px));gap:28px;}
  [data-concept="obsidian"] .srow{padding-left:28px;}
  .hcl__work .stack-list{gap:28px;}
  .hcl__work .stack-list::after{display:none;}   /* no stacking on mobile */
  .srow__panel{width:100%;flex:none;min-height:280px;}
  .warr-cov .hl.hl--stripe,
  .warr-cov .hl.hl--stripe.hl-gl{display:none;}
  .warr-cov__grid{grid-template-columns:1fr;}
}
@media(max-width:580px){
  .warr-tiers__grid{grid-template-columns:1fr;gap:12px;}
  .warr-tier{padding:28px 24px;}
}

/* ==========================================================================
   Emerald-900 shell try-out (Aaron, 2026-07-20): ?bg=emerald stamps
   html[data-warr-bg="emerald"] (warranty.js). The whole page re-mixes off
   the --page-bg/--page-ink pair, so one override turns the sheet deep green;
   the emerald foil rides on emerald paper. Not the default until blessed.
   ========================================================================== */
html[data-warr-bg="emerald"] body[data-holo-page="warranty"]{
  --page-bg:#064E3B;            /* Tailwind emerald-900 */
  --page-ink:#FFFFFF;
}
/* darker emerald companion for the always-dark bands (closer, CTA panel) */
html[data-warr-bg="emerald"] .cx-dark-band{
  --cx-dark-bg:#03271D;
  --cx-dark-ink:#FFFFFF;
}
/* dark-shell button pairing (mirrors the obsidian rules) */
html[data-warr-bg="emerald"] .warr .btn--primary{background:#fff;color:var(--slate-950);}
html[data-warr-bg="emerald"] .warr .btn--primary:hover{background:var(--slate-100);}
html[data-warr-bg="emerald"] .warr .btn--tertiary{color:#fff;}
html[data-warr-bg="emerald"] .warr .btn--tertiary:hover{background:rgba(255,255,255,0.14);}
/* nav retint sentinel: hidden unless the emerald shell is active */
.warr-navtint--emerald{display:none;}
html[data-warr-bg="emerald"] .warr-navtint--emerald{display:block;}

/* ---------- the /pages/archive/ head (the archive page reuses this
   stylesheet wholesale) ---------- */
.arch-head{padding:calc(var(--space-2xl) + 40px) 0 var(--space-lg);}
.arch-head__h{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5.4vw,72px);line-height:1.04;letter-spacing:-0.03em;margin:0;}
.arch-head__p{font-size:clamp(16px,1.7vw,20px);line-height:1.55;margin:16px 0 0;max-width:52ch;}

/* ---------- S6b · the founder: dramatic ink band ----------
   B&W portrait vignetted out of the dark, the lineage statement in big
   display type beside it. The band color rides the cx-dark-band token. */
.warr-founder{position:relative;isolation:isolate;padding:var(--space-2xl) 24px;}
:where(.warr-founder){background:var(--band-bg-final,var(--slate-950));}
.warr-founder__grid{
  width:100%;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--space-xl);
  align-items:center;
}
@media(max-width:880px){.warr-founder__grid{grid-template-columns:1fr;}}
.warr-founder__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4vw,58px);line-height:1.08;letter-spacing:-0.03em;
  color:#fff;margin:0 0 var(--space-sm);
}
.warr-founder__p{
  font-size:clamp(17px,1.8vw,21px);line-height:1.6;
  color:var(--on-dark,var(--slate-300));margin:0 0 var(--space-sm);max-width:52ch;
}
.warr-founder__link{margin:0;}
.warr-founder__link a{font-weight:600;color:#fff;}
.warr-founder__photo{display:flex;justify-content:center;}
.warr-founder__photo img{
  width:min(520px,100%);aspect-ratio:1;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08) brightness(0.96);
  -webkit-mask-image:radial-gradient(ellipse 74% 86% at 50% 42%, #000 52%, transparent 86%);
  mask-image:radial-gradient(ellipse 74% 86% at 50% 42%, #000 52%, transparent 86%);
}

/* ---------- the warranty background effect (experiment - one commit,
   revert to undo): sparse logo+shield silver tile + random pulse glyphs.
   Dark-band sections paint over it; the white shell shows it through. */
.warr-bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}   /* clip - fixed children at desktop grid coords must never widen a phone viewport */
/* phones skip the field entirely: two full-viewport engine sheets + the
   blob driver are real GPU strain on mobile (Aaron: laggy) */
@media(max-width:880px){.warr-bgfx{display:none;}}
.warr-bgfx .hl.hl--rule,
.warr-bgfx .hl.hl--rule.hl-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.warr-bgfx__s1,.warr-bgfx__s1.hl-gl,
.warr-bgfx__s2,.warr-bgfx__s2.hl-gl{
  opacity:0.15;   /* dimmed 25% (Aaron 2026-07-23) */
  -webkit-mask:url('../../assets/holo/svg/tile-mix-airy.svg') left top/100px 100px repeat;   /* half-scale field */
  mask:url('../../assets/holo/svg/tile-mix-airy.svg') left top/100px 100px repeat;
}
.warr-bgfx__s2,.warr-bgfx__s2.hl-gl{
  -webkit-mask-position:25px 25px;mask-position:25px 25px;   /* half-cell shimmer twin */
}
/* the pulse glyphs: scattered wrappers idle near-invisible; warranty.js
   raises one at random and lets it dim back (wrapper opacity only) */
.warr-bgfx__gw{position:absolute;opacity:0;transition:opacity 1.1s var(--ease-silk);}
.warr-bgfx__gw.on{opacity:0.85;}
.warr-bgfx__g,.warr-bgfx__g.hl-gl{position:absolute;inset:0;width:100%;height:100%;}
.warr-bgfx__g--logo,.warr-bgfx__g--logo.hl-gl{
  -webkit-mask:url('../../assets/holo/svg/glyph-logo.svg') center/contain no-repeat;
  mask:url('../../assets/holo/svg/glyph-logo.svg') center/contain no-repeat;
}
.warr-bgfx__g--shield,.warr-bgfx__g--shield.hl-gl{
  -webkit-mask:url('../../assets/holo/svg/glyph-shield-stroke.svg') center/contain no-repeat;
  mask:url('../../assets/holo/svg/glyph-shield-stroke.svg') center/contain no-repeat;
}
/* the pulse glyphs sit ON the airy-mix grid (25px pitch after the
   half-scale cut; center = cell*25+12.5), idle fully invisible and flash
   up IN COLOR - rare-CVE scarcity (order: S,L,S,L,L,S,L,S by parity) */
.warr-bgfx__gw:nth-of-type(3){left:77px;top:77px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(4){left:327px;top:102px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(5){left:527px;top:177px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(6){left:177px;top:252px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(7){left:427px;top:302px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(8){left:627px;top:77px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(9){left:252px;top:377px;width:20px;height:20px;}
.warr-bgfx__gw:nth-of-type(10){left:552px;top:352px;width:20px;height:20px;}
@media(prefers-reduced-motion:reduce){.warr-bgfx__gw{transition:none;}}

/* ---------- the security-tools bet, inverted (Aaron 2026-07-23):
   ink band, white lines - the see-beat twin stays on the white shell */
.warr-bet--ink{background:var(--slate-950);}
.warr-bet--ink .hlt-bet__line{color:#fff;}
/* EV-WARRANTY-EMBLEM-D2 */
.warr-seal--d2 .emblem-stage{width:100%;height:100%;position:relative;}
.warr-seal--d2 .emblem-tilt{width:100%;height:100%;will-change:transform;}
.warr-seal--d2 .warr-holo{display:block;
  /* art's outermost circle sits at 94.8% of the half-stage; trim the opaque corners so the
     canvas never shows as a square on non-white (concept) backgrounds */
  -webkit-mask:radial-gradient(circle closest-side,#000 95.5%,transparent 96.6%);
  mask:radial-gradient(circle closest-side,#000 95.5%,transparent 96.6%);}
.warr-seal--d2 .warr-emblem-globe{position:absolute;left:50%;top:50%;translate:-50% -50%;width:46.7%;aspect-ratio:1;pointer-events:none;}
/* EV-FOUNDER-PHOTO */
.warr-founder__photo img{filter:none;-webkit-mask-image:none;mask-image:none;border-radius:14px;}