/* ==========================================================================
   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). */
.warr,
[data-concept="specimen"] .warr-hero{
  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;
}
.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:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--wr-ink-soft);
}
/* the stage MEASURES (the seal renderer reads its box); the tilt LEANS
   (the renderer writes its 3D transform each frame) */
.warr-hero__seal{flex:0 0 auto;}
.warr-hero__seal .emblem-stage{
  width:clamp(360px,42vw,560px);
  aspect-ratio:1;
}
.emblem-tilt{width:100%;height:100%;will-change:transform;}
.warr-holo{
  display:block;
  opacity:0;
  animation:warr-holo-in .9s var(--ease-silk) .15s forwards;
}
@keyframes warr-holo-in{to{opacity:1;}}

/* 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));
}

/* the seal canvas is opaque: over a radial backdrop its rect would seam.
   In the two dark heroes the stage becomes a deliberate solid plate
   (hairline-framed) so the engine samples a flat color and the edge reads
   as design, not artifact. */
[data-concept="obsidian"] .warr-hero .emblem-stage,
[data-concept="specimen"] .warr-hero .emblem-stage{
  background:var(--cx-page-black,var(--slate-950));
  border:1px solid color-mix(in srgb,#fff 12%,transparent);
  border-radius:16px;
  padding:clamp(12px,2vw,24px);
}

/* 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;
}
.warr-bet .hcl__pin-sticky{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  padding:96px clamp(24px,6vw,96px);
  text-align:center;
}
.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);}

/* ---------- S2b · the pitch (sizes ported from lab-sections .warr-pitch) ---------- */
.warr-pitch{
  position:relative;
  padding:var(--space-2xl) 24px;
}
.warr-pitch__in{
  max-width:880px;margin:0 auto;
  isolation:isolate;             /* inline foil pill on "pays" */
}
.warr-pitch__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,5vw,64px);line-height:1.05;letter-spacing:-0.03em;
  color:inherit;margin:0 0 var(--space-lg);
}
.warr-pitch__p1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-0.02em;
  color:inherit;margin:0 0 var(--space-md);max-width:680px;
}
.warr-pitch__p2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-0.02em;
  color:inherit;margin:0;
}

/* ---------- 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(--wr-ink-faint);}

/* ---------- 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{
  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, uppercase micro-tracking */
.warr-cov__num{
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--wr-ink-faint);
}
.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(--wr-ink-muted);}
.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;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--wr-ink-soft);
}

/* ---------- 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{background:var(--wr-fill-1);border-radius:var(--radius-card);padding:40px 32px;display:flex;flex-direction:column;text-align: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));
}
.warr-tier--max .warr-tier__foot{color:var(--on-dark);}
.warr-tiers__meta{
  border-top:1px solid var(--wr-hairline);
  padding-top:16px;margin:0;
  font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--wr-ink-soft);
}

/* ---- 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:color-mix(in srgb, var(--page-ink) 84%, var(--page-bg));
  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(--wr-ink-muted);
  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(--wr-ink-soft);
}
.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(--wr-ink-muted);}

/* ---------- 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:0 24px;
}
.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:rgba(255,255,255,0.86);
  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-holo{animation:none;opacity: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-hero__seal .emblem-stage{width:clamp(280px,70vw,420px);}
  .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;}