/* ==========================================================================
   Evidence Warranty page - Full Elevate brand.
   Tokens from brand/elevate-tokens.css · shared chrome in site.css
   ========================================================================== */
:root{
  --dur:.18s;
  /* Warranty page button scheme - light monochrome. Default is the ink variant.
     Lime alternative (swap this one line): --warr-btn-bg:var(--lime);--warr-btn-ink:var(--forest); */
  --warr-btn-bg:var(--ink);
  --warr-btn-ink:#fff;
  /* the page's light cool tint - the hero and the holo field blend into this */
  --warr-tint:var(--slate-50);
}
body{overflow-x:hidden;}

/* Prepared opt-in dark variant - defined here but currently applied NOWHERE.
   Add class "warr-invert" to a section later to flip it to a dark slate surface. */
.warr-invert{background:var(--slate-900);color:var(--on-dark);}
.warr-invert h1,.warr-invert h2,.warr-invert h3,.warr-invert h4,.warr-invert p{color:var(--on-dark);}


/* ---- reveal primitives (future below-fold sections) ---- */
.r{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-silk),transform .6s var(--ease-silk);}
.r.in{opacity:1;transform:none;}
.rf{opacity:0;transition:opacity .55s var(--ease-silk);}
.rf.in{opacity:1;}
@media(prefers-reduced-motion:reduce){.r,.rf{opacity:1;transform:none;transition:none;}}

/* ========================================================================
   SECTION 1 - WARRANTY HERO
   Stage 1  : shield SVG scales from centre → fills viewport
   Stage 1.5: photorealistic ripple rings (canvas RAF, shield-shaped)
   Stage 2  : typewriter P1 → wave-emerge P2 → typewriter P3 → body → CTAs
   ======================================================================== */

/* On this page the nav leaves the flow and floats fully transparent over the hero
   (its bar has no background of its own), so the hologram runs edge to edge under it. */
#site-nav.nav{position:fixed;top:0;left:0;right:0;}

.warr-hero{
  background:var(--warr-tint);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 24px 120px;
}

/* ---- Stage 1: expanding shield SVG ---- */
.warr-shield{
  position:absolute;
  left:50%;top:50%;
  width:128px;height:128px;
  overflow:visible;
  transform:translate(-50%,-50%) scale(0.01);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  z-index:1;
  pointer-events:none;
  will-change:transform;
}
.warr-shield path{fill:var(--ink);}
.warr-hero.burst-show    .warr-shield{transform:translate(-50%,-50%) scale(1);}
.warr-hero.burst-explode .warr-shield{transform:translate(-50%,-50%) scale(40);transition-duration:.6s;}

/* ---- Stage 1.5: holographic sticker background (WebGL, warranty-holo.js) ----
   The cursor is an invisible light source; the foil answers with iridescence.
   Fades in once the shield burst has filled the screen. */
.warr-holo{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity 1.1s var(--ease-silk);
}
.warr-holo--on{opacity:1;}
/* after the burst fills the screen, the ink shield bows out on its own (delayed
   opacity ride on the same class) while the light holo field fades in over it -
   otherwise the dark shield would bleed through and veil the light hero */
.warr-hero.burst-explode .warr-shield{opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .9s var(--ease-silk) .55s;}

/* ---- Stage 2: text content ---- */
.warr-hero__in{
  position:relative;
  z-index:3;
  max-width:1100px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.warr-hero__h{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(48px,7.5vw,96px);
  letter-spacing:-0.036em;
  margin:0;
  line-height:1.06;
}
.warr-line{display:inline;}

#wh-p1{color:var(--ink);display:inline-block;opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease-silk),transform .65s var(--ease-silk);}
#wh-p2{color:var(--ink);display:inline-block;opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease-silk),transform .65s var(--ease-silk);}
#wh-p3{color:var(--ink);display:inline-block;opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease-silk),transform .65s var(--ease-silk);}
#wh-p1.visible,#wh-p2.visible,#wh-p3.visible{opacity:1;transform:none;}

.warr-hero__body{
  font-size:24px;
  line-height:1.62;
  color:var(--ink);
  max-width:540px;
  margin:32px auto 0;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease-silk),transform .6s var(--ease-silk);
}
.warr-hero__body.visible{opacity:1;transform:none;}

.warr-hero__cta{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:44px;
}
.warr-hero__cta .btn{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s var(--ease-silk),transform .35s var(--ease-silk);
}
.warr-hero__cta .btn.visible{opacity:1;transform:none;}

/* every button on the page runs off the --warr-btn-* pair defined at the top */
.btn--lime,.warr-cta .btn--primary{background:var(--warr-btn-bg);color:var(--warr-btn-ink);}
.btn--lime:hover,.warr-cta .btn--primary:hover{background:color-mix(in srgb,var(--warr-btn-bg) 84%,#fff);}
.btn--tertiary-dark{background:transparent;color:var(--ink);}
.btn--tertiary-dark:hover{background:var(--fill-2);}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  .warr-shield{transition:none;transform:translate(-50%,-50%) scale(40)!important;opacity:0!important;}
  .warr-holo{transition:none;}
  #wh-p1,#wh-p2,#wh-p3{opacity:1!important;transform:none!important;transition:none!important;}
  .warr-hero__body{opacity:1!important;transform:none!important;transition:none!important;}
  .warr-hero__cta .btn{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---- stacked screens: copy on top, the holo sticker gets its own band
   below it (the bottom padding reserves the band; the JS layout centres the
   sticker inside it), so the content never sits over the artwork ---- */
@media(max-width:899px){
  .warr-hero{
    align-items:flex-start;
    padding:96px 24px min(115vw,60vh);
  }
  /* the headline phrases are unbreakable inline-blocks: size them to the
     viewport so no phrase runs off the screen */
  .warr-hero__h{font-size:clamp(30px,9vw,48px);}
}
@media(max-width:640px){
  .warr-hero{padding:96px 20px min(115vw,60vh);}
  .warr-hero__body{font-size:18px;}
}

/* ---- wide screens: copy left, holo sticker right (the artwork's composition).
   The copy runs wide (over the hologram if it must) so it never spills below the fold. ---- */
@media(min-width:900px){
  /* the sticker runs at 80% size (right-anchored, JS layout), so the whole
     composition fits within one screen again - the hero is a plain 100vh */
  .warr-hero{justify-content:flex-start;min-height:100vh;}
  .warr-hero__in{
    max-width:1240px;
    margin:0 auto;
    text-align:left;
    align-items:flex-start;
  }
  .warr-hero__h{
    font-size:clamp(48px,5vw,72px);
    max-width:720px;
  }
  .warr-hero__body{margin:32px 0 0;max-width:600px;}
  .warr-hero__cta{justify-content:flex-start;}
}

/* ──────── Bridge ──────── */
.warr-bridge{min-height:200vh;background:var(--warr-tint);position:relative;}
.warr-bridge__inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 48px;}
.warr-bridge__text{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.5vw,48px);line-height:1.45;letter-spacing:-0.03em;
  color:var(--ink);text-align:center;max-width:28ch;margin:0;opacity:0;isolation:isolate;
}
.warr-bridge__body{
  font-size:20px;line-height:1.6;
  color:var(--ink);text-align:center;max-width:52ch;margin:0;opacity:0;
}

/* ========================================================================
   SECTION 2 - PITCH
   ======================================================================== */

.warr-pitch{
  background:var(--canvas);
  padding:var(--space-2xl) 24px;
}
.warr-pitch__in{
  max-width:880px;
  margin:0 auto;
}

.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:var(--ink);
  margin:0 0 var(--space-lg);
  opacity:0;
  transform:scale(1.07);
  transform-origin:left center;
  transition:opacity .65s var(--ease-silk),transform .65s var(--ease-silk);
}
/* settle to transform:none, not scale(1): an identity transform still
   forces a compositor layer, which tone-maps the HDR pill inside to SDR */
.warr-pitch__h.visible{opacity:1;transform:none;}

.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;
  margin:0 0 var(--space-md);
  max-width:680px;
  opacity:0;
  transition:opacity .15s ease;
}
.warr-pitch__p1.active{opacity:1;}

.warr-word{
  color:var(--ink);
  display:inline;
}
.warr-scot-phrase{
  border-radius:3px;
  transition:background .35s ease, color .35s ease;
  display:inline;
}
.warr-scot-phrase.flash{
  background:var(--slate-200);
  padding:0.08em 0.2em;
  margin:0 -1px;
}
.warr-scot-phrase.flash .warr-word--scot{
  color:var(--ink);
}

.warr-pitch__row{
  display:flex;
  justify-content:center;
}
.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:var(--ink);
  margin:0 0 var(--space-xl);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s var(--ease-silk),transform .5s var(--ease-silk);
}
.warr-pitch__p2.visible{opacity:1;transform:none;}

.warr-stack-wrap{
  position:relative;
  width:min(420px,90vw);
  height:260px;
}
.warr-stack{
  position:absolute;
  inset:0;
  will-change:transform;
  opacity:0;
  transition:opacity .5s var(--ease-silk);
}
.warr-stack.visible{opacity:1;}

.warr-card{
  position:absolute;
  left:0;right:0;
  border-radius:var(--radius-card);
}
.warr-card--back{
  background:var(--slate-200);
  height:200px;
  top:36px;
  transform:rotate(2.5deg) translateX(6px);
  transform-origin:bottom center;
}
.warr-card--mid{
  background:var(--slate-100);
  height:210px;
  top:16px;
  transform:rotate(-1.5deg) translateX(-3px);
  transform-origin:bottom center;
}
.warr-card--front{
  background:var(--fill-1);
  top:0;
  padding:24px;
  z-index:2;
  overflow:hidden;
}

.warr-widget__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.warr-chip{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--fill-2);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.warr-widget__label{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.warr-widget__stat{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(36px,5vw,52px);
  line-height:1;
  color:var(--ink);
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  margin-bottom:16px;
  display:flex;
  align-items:baseline;
  gap:4px;
}
.warr-widget__sub{
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
}

.warr-laser{
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--slate-400) 35%,var(--slate-300) 50%,var(--slate-400) 65%,transparent 100%);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}

@media(max-width:680px){
  .warr-stack-wrap{height:240px;}
}
@media(prefers-reduced-motion:reduce){
  .warr-pitch__h{opacity:1!important;transform:none!important;transition:none!important;}
  .warr-pitch__p1{opacity:1!important;transition:none!important;}
  .warr-word{color:var(--ink)!important;transition:none!important;}
  .warr-word--scot.settled{background:transparent!important;color:var(--ink)!important;}
  .warr-pitch__p2,.warr-stack{opacity:1!important;transform:none!important;transition:none!important;}
  .warr-laser{display:none;}
}

/* ========================================================================
   SECTIONS 3-9
   ======================================================================== */

/* ---- chip svg sizing ---- */
.warr-chip svg{width:40px;height:40px;}
.warr-chip--grapefruit{background:var(--fill-2);color:var(--ink);}

/* ---- shared section padding ---- */
.warr-cov,.warr-excl,.warr-faq,.warr-cta{
  padding:var(--space-2xl) 24px;
}

/* ──────── S3: Mythos vs Evidence scroll takeover ──────── */
.warr-comp{position:relative;min-height:500vh;background:var(--canvas);}
.warr-comp__take{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;}
.warr-comp__box{
  position:absolute;left:50%;top:50%;
  width:min(900px,88vw);height:420px;
  background:var(--slate-100);border-radius:28px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
  will-change:transform,background;
}
.warr-comp__canvas{position:absolute;inset:0;display:block;z-index:1;pointer-events:none;}
.warr-comp__s1{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:3;width:min(820px,86vw);
  display:grid;place-items:center;
}
.warr-comp__beat{
  grid-area:1/1;   /* both beats share one centred cell and cross-fade in place (never top + bottom) */
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.5vw,56px);line-height:1.1;letter-spacing:-0.03em;
  color:var(--ink);margin:0;text-align:center;opacity:0;
}
.warr-comp__s2{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:3;width:min(820px,86vw);text-align:center;opacity:0;
}
.warr-comp__s2::before{
  content:'';position:absolute;inset:-60px -80px;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--slate-200) 96%,transparent) 35%,transparent 75%);
  z-index:-1;pointer-events:none;
}
.warr-comp__s2h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.5vw,56px);line-height:1.1;letter-spacing:-0.03em;
  color:var(--ink);margin:0 0 24px;
}
.warr-comp__s2b{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.25;letter-spacing:-0.02em;color:var(--ink);margin:0;}
.warr-comp__hl{
  font-weight:700;font-size:inherit;line-height:1;
  border-radius:0.16em;padding:0.05em 0.18em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* stage 2b: the warranty payoff, its own big statement */
.warr-comp__s2--warranty{width:min(960px,90vw);}
.warr-comp__warranty-lead{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2vw,24px);line-height:1.2;letter-spacing:-0.01em;color:var(--ink);margin:0 0 16px;}
.warr-comp__warranty-line{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,64px);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);margin:0;}
.warr-comp__amt{border-radius:0.14em;padding:0.04em 0.16em;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
/* ──────── highlight pill - holographic foil ────────
   Pale silver foil at rest with a whisper of the active palette mode's tint;
   a cursor-following iridescent sheen (the light hitting the foil) lives in a
   radial background layer so it clones across wrapped lines. The colour stops
   (--hl-c1..4 pastel rest tint, --hl-s1/--hl-s2 sheen hues) and the light
   position/strength (--hl-lx/--hl-ly/--hl-sheen) are written by warranty.js
   from the same MODES hue paths as the hero sticker; the slate fallbacks keep
   the pill a quiet monochrome chip until the script runs. */
/* defaults live on :root (NOT on .hl) so the inline values warranty.js writes
   to the html element can override them - a declaration on .hl itself would
   always shadow the inherited ones */
:root{
  --hl-c1:var(--slate-200);--hl-c2:var(--slate-200);
  --hl-c3:var(--slate-200);--hl-c4:var(--slate-200);
  --hl-s1:var(--slate-200);--hl-s2:var(--slate-200);
}
.hl,.warr-comp__hl,.warr-comp__amt{
  position:relative;z-index:-1;color:var(--ink);font-weight:700;font-size:inherit;
  border-radius:0.12em;padding:0.03em 0.18em 0.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  --hl-lx:50%;--hl-ly:36%;--hl-sheen:0;
  background:
    /* sheen: white core rolling through the mode hues, fading within ~140px */
    radial-gradient(circle 140px at var(--hl-lx) var(--hl-ly),
      color-mix(in srgb, white calc(var(--hl-sheen) * 85%), transparent) 0%,
      color-mix(in srgb, var(--hl-s1) calc(var(--hl-sheen) * 65%), transparent) 36%,
      color-mix(in srgb, var(--hl-s2) calc(var(--hl-sheen) * 35%), transparent) 62%,
      transparent 84%),
    /* rest tint: faint iridescent drift across the pill */
    linear-gradient(105deg, var(--hl-c1) 0%, var(--hl-c2) 34%, var(--hl-c3) 66%, var(--hl-c4) 100%),
    /* pale silver base */
    linear-gradient(color-mix(in srgb, white 40%, var(--slate-200)),
                    color-mix(in srgb, white 40%, var(--slate-200)));
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--slate-400) 20%, transparent);
}

/* ──────── S4: Coverage ──────── */
.warr-cov{background:var(--canvas);}
.warr-cov__in{max-width:1100px;margin:0 auto;}
.warr-cov__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.5vw,56px);line-height:1.06;letter-spacing:-0.03em;
  color:var(--ink);margin:0 0 16px;isolation:isolate;
}
.warr-cov__lead{
  font-size:20px;line-height:30px;color:var(--ink);
  margin:0 0 var(--space-lg);
}
.warr-cov__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:var(--space-sm);
}
.warr-cov__card{
  background:var(--fill-1);border-radius:var(--radius-card);padding:24px;
  display:flex;gap:16px;align-items:flex-start;
}
.warr-cov__card .warr-chip{flex-shrink:0;}
.warr-cov__card-body{min-width:0;}
.warr-cov__card h3{
  font-family:var(--font-display);font-weight:700;font-size:22px;
  color:var(--ink);margin:0 0 8px;letter-spacing:-0.02em;
}
.warr-cov__card p{font-size:16px;line-height:1.5;color:var(--ink);margin:0;}
.warr-cov__meta{display:flex;gap:12px;flex-wrap:wrap;}
.warr-badge{
  font-family:var(--font-body);font-size:14px;font-weight:600;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--fill-2);color:var(--ink);
}
@media(max-width:680px){.warr-cov__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:420px){.warr-cov__grid{grid-template-columns:1fr;}}

/* ──────── Tier shields ──────── */
.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"):
   primary strokes are ink, secondary strokes a mid slate */
.tier-shield{color:var(--ink);}
.tier-shield--std .ts-shield-inner{color:var(--slate-400);}
.tier-shield--max{color:var(--on-dark);}                 /* sits on the dark ink tier card */
.tier-shield--max .ts-shield-inner{color:var(--slate-400);}

/* initial hidden states */
.ts-shield{stroke-dasharray:600;stroke-dashoffset:600;}
.ts-shield-inner{opacity:0;}
.ts-flame{stroke-dasharray:300;stroke-dashoffset:300;}
.ts-flame,.ts-flame-sm{transform-box:fill-box;transform-origin:center 80%;}
.ts-flame-sm{opacity:0;}
.ts-crown{stroke-dasharray:500;stroke-dashoffset:500;}
.ts-line{stroke-dasharray:50;stroke-dashoffset:50;}

/* keyframes */
@keyframes ts-draw{to{stroke-dashoffset:0;}}
@keyframes ts-fade-in{to{opacity:1;}}
@keyframes ts-spin{from{stroke-dashoffset:0;}to{stroke-dashoffset:-19;}}
@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;}
}
@keyframes ts-glow{
  0%,100%{filter:drop-shadow(0 0 3px var(--slate-300));}
  50%{filter:drop-shadow(0 0 10px var(--slate-300));}
}

/* Foundation reveal */
.tier-shield--fdn.in .ts-shield{animation:ts-draw .6s var(--ease-silk) .1s forwards;}
.tier-shield--fdn.in .ts-flame{animation:ts-draw .5s var(--ease-silk) .55s forwards,ts-flicker-fdn 1.5s ease-in-out 1.05s infinite;}

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

/* Maximum reveal */
.tier-shield--max.in .ts-shield{animation:ts-draw .7s var(--ease-silk) .1s forwards;}
.tier-shield--max.in .ts-shield-inner{animation:ts-fade-in .4s ease .6s forwards;}
.tier-shield--max.in .ts-flame-sm{animation:ts-fade-in .3s ease .95s forwards,ts-flicker-max 1.5s ease-in-out 1.25s infinite;}
.tier-shield--max.in .ts-crown{animation:ts-draw .6s var(--ease-silk) 1.1s forwards,ts-crown-pulse 3s ease-in-out 1.7s infinite;}
/* .tier-shield--max.in{animation:ts-glow 3.5s ease-in-out 1.5s infinite;} */
.tier-shield--max.in .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;}
}

/* ──────── S5: Tiers ──────── */
.warr-tiers{background:var(--canvas);min-height:200vh;position:relative;}
.warr-tiers__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:0 24px;}
.warr-tiers__in{max-width:1100px;margin:0 auto;width:100%;opacity:0;}
.warr-tiers__h{
  font-family:var(--font-display);font-weight:700;
  font-size:64px;line-height:1.06;letter-spacing:-0.03em;
  color: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);
}
.warr-tier{background:var(--fill-1);border-radius:var(--radius-card);padding:40px 32px;display:flex;flex-direction:column;text-align:center;}
.warr-tier--std{background:var(--fill-2);}
.warr-tier--max{background:var(--ink);}
.warr-tier__label{
  font-family:var(--font-body);font-size:14px;font-weight:600;
  color: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(--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(--ink);font-variant-numeric:tabular-nums;
}
.warr-tier--max .warr-tier__amt{color:#fff;}
/* the Maximum amount is a foil pill on the ink card: isolate so the
   CSS-foil fallback (z-index:-1) stays above the card's dark fill */
.warr-tier__amt{isolation:isolate;}
.warr-tier__postamt{font-size:14px;font-weight:500;color: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(--ink);
}
.warr-tier--max .warr-tier__foot{color:var(--on-dark);}@media(max-width:580px){
  .warr-tiers__grid{grid-template-columns:1fr;gap:12px;}
  .warr-tier{padding:28px 24px;}
}

/* ──────── S6: Exclusions ──────── */
.warr-excl{background:var(--canvas);}
.warr-excl__in{max-width:880px;margin:0 auto;}
.warr-excl__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.5vw,56px);line-height:1.06;letter-spacing:-0.03em;
  color:var(--ink);margin:0 0 16px;
}
.warr-excl__lead{
  font-size:20px;line-height:30px;color:var(--ink);
  margin:0 0 var(--space-lg);max-width:600px;
}
.warr-excl__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.warr-excl__item{display:flex;gap:16px;align-items:flex-start;}
.warr-excl__content h4{
  font-family:var(--font-display);font-weight:700;font-size:24px;
  color:var(--ink);margin:0 0 12px;letter-spacing:-0.02em;
}
.warr-excl__content p{font-size:17px;line-height:1.55;color:var(--ink);margin:0;}
@media(max-width:580px){.warr-excl__grid{grid-template-columns:1fr;}}

/* ──────── S7: Backer / underwriter ──────── */
/* ──────── S8: FAQ ──────── */
.warr-faq{background:var(--canvas);}
/* big heading on the left, a collapsible accordion on the right (one answer open at a time) */
.warr-faq__in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:0.7fr 1.3fr;gap:64px;align-items:start;}
@media(max-width:880px){.warr-faq__in{grid-template-columns:1fr;gap:32px;}}
.warr-faq__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(48px,7vw,96px);line-height:0.95;letter-spacing:-0.04em;
  color:var(--ink);margin:0;position:sticky;top:96px;
}
@media(max-width:880px){.warr-faq__h{position:static;}}
.warr-faq__list{display:flex;flex-direction:column;gap:12px;}
.warr-faq__item{background:var(--fill-1);border-radius:var(--radius-card);overflow:hidden;transition:background .25s var(--ease-silk),box-shadow .25s var(--ease-silk);}
.warr-faq__item--open{background:#fff;box-shadow:0 16px 36px -16px color-mix(in srgb,var(--ink) 24%,transparent);}
.warr-faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:24px 28px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.5vw,22px);
  letter-spacing:-0.01em;color:var(--ink);
}
.warr-faq__icon{position:relative;flex:none;width:24px;height:24px;transition:transform .25s var(--ease-silk);}
.warr-faq__icon::before,.warr-faq__icon::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%);}
.warr-faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.warr-faq__item--open .warr-faq__icon{transform:rotate(45deg);}   /* the plus becomes a close (x) */
.warr-faq__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-silk);}
.warr-faq__a p{margin:0;padding:0 28px 28px;font-size:16px;line-height:26px;color:var(--ink);}

/* ──────── S9: CTA ──────── */
.warr-cta{background:var(--canvas);padding:var(--space-lg) 0 var(--space-2xl);}
.warr-cta__wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.warr-cta__panel{background:var(--fill-2);color:var(--ink);border-radius:var(--radius-card);padding:80px 56px;text-align:center;}
@media(max-width:880px){.warr-cta__panel{padding:48px 24px;}}
.warr-cta__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,5vw,64px);line-height:1.05;letter-spacing:-0.03em;
  color:var(--ink);margin:0 0 20px;isolation:isolate;
}
/* the CTA pill keeps the shared foil look; it only needs a raised z-index so
   it does not sink behind the panel fill */
.warr-cta .hl{z-index:0;line-height:1;padding:0 0.2em;}
.warr-cta__body{
  font-size:20px;line-height:30px;color:var(--ink);
  margin:0 auto var(--space-md);max-width:520px;
}