/* ============================================================
   PaybackGreen — design system.
   All CSS is inline so the page paints in a single request.
   ============================================================ */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(./fonts/fraunces-wonk.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(./fonts/fraunces-wonk-italic.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(./fonts/instrument-sans.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(./fonts/jetbrains-mono-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
:root{
  --ink:#0B2016; --ink-2:#10301F; --ink-3:#17402A;
  --ink-deep:#07170F; --ink-lift:#0E2A1B;
  --paper-0:#FFFEFA;
  --forest:#114029; --forest-mid:#175A31; --forest-lit:#176E3D;
  --leaf:#279B52; --leaf-soft:#9FE3B4;
  --amber:#F59E0B; --amber-deep:#D97706; --amber-lit:#FBBF24;
  --teal:#115E59; --teal-lit:#2DD4BF;
  --paper:#FBF9F3; --paper-2:#F4F0E6; --paper-3:#E8E2D2; --line:#DAD3C1;
  --text:#17241C; --text-2:#495B4F; --text-3:#5C6E62;
  --on-ink:#F2F7F1; --on-ink-2:#AEC5B4; --on-ink-3:#95B69E;

  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Type ramp. Every literal font-size on this page lands on one of these
     steps. Adding a step is a design decision, not a convenience. Values are
     rem against a fluid root, so the whole ramp scales as one system. */
  --fs-10:.625rem;   --fs-11:.6875rem; --fs-12:.75rem;  --fs-13:.8125rem;
  --fs-14:.875rem;   --fs-15:.9375rem; --fs-16:1rem;    --fs-18:1.125rem;
  --fs-20:1.25rem;   --fs-24:1.5rem;   --fs-28:1.75rem; --fs-32:2rem;
  /* Fluid display roles — the only sizes allowed to land between steps. */
  --fs-display:clamp(2.4rem,1.5rem + 3.2vw,3.9rem);
  --fs-headline:clamp(1.9rem,1.35rem + 2.1vw,2.9rem);
  --fs-title:clamp(1.25rem,1.12rem + .52vw,1.5rem);
  --fs-stat:clamp(2.9rem,1.9rem + 3.6vw,4.25rem);
  --fs-figure:clamp(1.5rem,1.24rem + 1vw,1.875rem);

  /* Line height: flat for figures, tight for display, open for prose. */
  --lh-flat:1; --lh-stat:.95; --lh-display:1.05; --lh-title:1.22;
  --lh-ui:1.5; --lh-body:1.6; --lh-prose:1.7;

  /* Tracking: the larger the type, the tighter. Uppercase mono opens up. */
  --ls-stat:-.04em; --ls-display:-.032em; --ls-headline:-.026em;
  --ls-title:-.017em; --ls-ui:-.008em; --ls-flat:0;
  --ls-eyebrow:.16em; --ls-mono:.13em;

  /* Spacing scale, 4px base. Vertical rhythm derives from the four
     composite tokens below so section cadence is set in one place. */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem;  --sp-10:2.5rem;
  --sp-12:3rem;  --sp-16:4rem;  --sp-20:5rem;  --sp-24:6rem;

  --sp-section:clamp(5.5rem,3.2rem + 6.4vw,9.5rem);      /* between sections */
  --sp-section-tight:clamp(3.75rem,2.4rem + 4vw,6.5rem);
  --sp-head:clamp(2.75rem,1.7rem + 3.2vw,4.5rem);        /* head -> content */
  --sp-block:clamp(2rem,1.3rem + 2.6vw,3.5rem);          /* block -> block */
  --sp-panel:clamp(1.4rem,1rem + 1.4vw,2rem);            /* inside panels */

  /* Motion. Three durations, two easings, no overshoot anywhere — both
     curves are monotonic to 1, so nothing bounces or springs back. */
  --dur-fast:160ms;   /* colour and border only */
  --dur:220ms;        /* hover lift, background, the default */
  --dur-slow:300ms;   /* scroll reveal and larger travel */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-emph:cubic-bezier(.16,.84,.44,1);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(11,32,22,.06),0 2px 6px rgba(11,32,22,.05);
  --shadow-md:0 2px 4px rgba(11,32,22,.05),0 12px 28px -10px rgba(11,32,22,.16);
  --shadow-lg:0 4px 8px rgba(11,32,22,.05),0 28px 60px -18px rgba(11,32,22,.28);
  --shadow-ink:0 30px 70px -24px rgba(0,0,0,.75);

  --maxw:1200px; --gutter:clamp(20px,5vw,56px); --header-h:66px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px);font-size:clamp(15.6px,.28vw + 14.9px,17px)}
body{
  margin:0;font-family:var(--font-sans);
  font-size:var(--fs-16);line-height:var(--lh-body);letter-spacing:var(--ls-ui);
  color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;overflow-x:hidden;
}
img,svg,canvas{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:600;
  margin:0;font-variation-settings:'WONK' 1;
}
h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-headline);line-height:var(--lh-display);letter-spacing:var(--ls-headline)}
h3{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
h4{font-size:var(--fs-18);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
p{margin:0}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section);position:relative}
.section--tight{padding-block:var(--sp-section-tight)}
.section--ink{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* Band changes get seamed edges — a hairline at both boundaries so tonal
   shifts read as deliberate joins rather than background swaps. */
.section--paper2{background:linear-gradient(180deg,var(--paper-3) 0,var(--paper-2) 2px);box-shadow:inset 0 -1px 0 var(--line)}

.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.3;mix-blend-mode:overlay;
}
.section--ink .grain::after{opacity:.5}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-11);font-weight:500;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--forest-lit);display:inline-flex;align-items:center;
  gap:.6em;margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--amber-deep)}
.section--ink .eyebrow,.capture .eyebrow{color:var(--amber-lit)}
.section--ink .eyebrow::before,.capture .eyebrow::before{background:var(--amber)}

.sec-head{max-width:62ch;margin-bottom:var(--sp-head);position:relative;z-index:1}
.sec-head p{margin-top:var(--sp-5);font-size:var(--fs-18);line-height:var(--lh-prose);letter-spacing:var(--ls-flat);color:var(--text-2);max-width:58ch}
.section--ink .sec-head p{color:var(--on-ink-2)}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--forest-mid);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.9em 1.6em;border-radius:999px;border:1.5px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:var(--fs-15);letter-spacing:var(--ls-ui);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
  box-shadow:0 1px 2px rgba(11,32,22,.14),0 8px 20px -8px rgba(17,64,41,.5);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(11,32,22,.14),0 16px 32px -10px rgba(17,64,41,.55)}
.btn:active{transform:translateY(0)}
.btn--amber{--btn-bg:var(--amber);--btn-fg:#3A2400;box-shadow:0 1px 2px rgba(120,70,0,.18),0 10px 24px -8px rgba(245,158,11,.6)}
.btn--amber:hover{--btn-bg:var(--amber-lit)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);border-color:var(--line);box-shadow:none}
.btn--ghost:hover{--btn-bg:var(--paper-2);border-color:var(--text-3);box-shadow:none}
.section--ink .btn--ghost,.hero .btn--ghost{--btn-fg:var(--on-ink);border-color:rgba(255,255,255,.24)}
.section--ink .btn--ghost:hover,.hero .btn--ghost:hover{--btn-bg:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.btn--sm{padding:.6em 1.1em;font-size:var(--fs-13)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:60;height:var(--header-h);display:flex;align-items:center;
  background:rgba(11,32,22,.84);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);transition:border-color var(--dur) var(--ease);
}
.header__inner{display:flex;align-items:center;gap:clamp(.9rem,3vw,2.6rem);width:100%}
.brand{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--on-ink);margin-right:auto}
.brand__mark{width:53px;height:38px;flex:none}
.gp-sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand__name{font-family:var(--font-sans);font-size:var(--fs-18);font-weight:700;letter-spacing:var(--ls-title)}
/* The em is the second half of a two-tone lockup — "Green" takes the leaf
   tone so the name ties to the mark instead of sitting beside it as flat
   white. Every .brand lives on the dark ink ground (header and footer, both
   pages), where --leaf-soft measures 11.46:1. */
.brand__name em{font-style:normal;color:var(--leaf-soft)}
.nav{display:flex;align-items:center;gap:clamp(.8rem,1.9vw,1.75rem)}
/* :not(.btn) so these link styles never clobber the CTA pill's own colour/padding */
.nav a:not(.btn){text-decoration:none;font-size:var(--fs-14);font-weight:500;color:var(--on-ink-2);padding:.35em 0;position:relative;transition:color var(--dur-fast) var(--ease)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--amber);transition:right var(--dur) var(--ease)}
.nav a:not(.btn):hover{color:var(--on-ink)}
.nav a:not(.btn):hover::after{right:0}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.45em .6em;cursor:pointer;color:var(--on-ink)}
.nav-toggle svg{width:20px;height:20px}
@media (max-width:940px){
  .nav-toggle{display:inline-flex}
  .header__cta{display:none}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid rgba(255,255,255,.12);
    padding:.5rem var(--gutter) 1.4rem;transform:translateY(-150%);
    transition:transform var(--dur-slow) var(--ease-emph);box-shadow:var(--shadow-ink);
  }
  .nav[data-open="true"]{transform:translateY(0)}
  .nav a:not(.btn){padding:.85em 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:var(--fs-16)}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:var(--sp-4)}
}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:var(--ink);padding:.8em 1.2em;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- hero ---------- */
/* Depth is built in three layers: a vertical ink gradient (darkest under the
   header, lifting toward the fold), the two blurred light sources, and a low
   amber horizon band at the bottom edge so the exit into paper reads as dawn
   rather than a background swap. */
.hero{position:relative;color:var(--on-ink);overflow:hidden;padding-block:clamp(2.9rem,6vw,5.25rem) clamp(4.1rem,8vw,7rem);
  background:linear-gradient(180deg,var(--ink-deep) 0%,var(--ink) 32%,var(--ink) 72%,var(--ink-lift) 100%);
  box-shadow:inset 0 -1px 0 rgba(251,191,36,.18)}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;z-index:0;
  background:radial-gradient(130% 100% at 50% 120%,rgba(245,158,11,.11),rgba(245,158,11,.03) 45%,transparent 68%),
             linear-gradient(0deg,rgba(39,155,82,.05),transparent 58%)}
/* Radial masks keep the blurred square's own edge from showing as a seam. */
.hero__glow{position:absolute;right:-14%;top:-38%;width:min(900px,105vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.26) 0%,rgba(245,158,11,.09) 40%,transparent 68%),
             conic-gradient(from 200deg at 50% 50%,transparent 0deg,rgba(251,191,36,.11) 22deg,transparent 44deg,transparent 90deg,rgba(39,155,82,.10) 120deg,transparent 155deg);
  mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 70%);
  filter:blur(14px);pointer-events:none}
.hero__glow2{position:absolute;left:-22%;bottom:-44%;width:min(740px,92vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(23,110,61,.34) 0%,transparent 62%);filter:blur(20px);pointer-events:none}
.hero__grid{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%)}
.hero .wrap{position:relative;z-index:2}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.25rem);align-items:center}
@media (max-width:1000px){.hero__inner{grid-template-columns:1fr}}

/* policy alert — glass chip treatment so it reads as a considered notice,
   not a utility banner: lit top hairline, icon in its own amber well. */
.alert{
  position:relative;display:flex;gap:var(--sp-4);align-items:flex-start;max-width:760px;
  background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(245,158,11,.05) 52%,rgba(245,158,11,.09));
  border:1px solid rgba(245,158,11,.32);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-12);
  font-size:var(--fs-14);line-height:var(--lh-ui);color:var(--on-ink-2);
  box-shadow:inset 0 1px 0 rgba(251,191,36,.18),0 14px 34px -22px rgba(0,0,0,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.alert svg{width:32px;height:32px;padding:var(--sp-2);flex:none;color:var(--amber-lit);margin-top:.1em;
  background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.26);border-radius:var(--r-sm)}
.alert b{color:var(--amber-lit);font-weight:600}
.alert a{color:var(--on-ink);text-underline-offset:3px}
/* .alert was built for the dark hero. Dropped onto a light paper .section its
   on-ink palette falls to ~1.6:1, so re-map every colour it sets. Keep this in
   step with the rules above. */
.section .alert{color:var(--text-2)}
.section .alert b{color:var(--forest)}
.section .alert a{color:var(--forest-mid)}
.section .alert svg{color:var(--amber-deep)}

h1 .accent{color:var(--amber-lit);font-style:italic;font-variation-settings:'WONK' 1}
h1 .line{display:block}
.hero__sub{margin-top:var(--sp-6);font-size:var(--fs-18);line-height:var(--lh-body);letter-spacing:var(--ls-flat);color:var(--on-ink-2);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero__meta{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.11);display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--sp-6) clamp(1.25rem,2.4vw,2.25rem)}
.hero__meta .n{font-family:var(--font-display);font-size:var(--fs-figure);font-weight:700;color:var(--on-ink);letter-spacing:var(--ls-headline);display:block;line-height:var(--lh-display)}
.hero__meta .n em{font-style:normal;color:var(--amber-lit)}
.hero__meta .l{font-size:var(--fs-13);line-height:var(--lh-ui);color:var(--on-ink-3);margin-top:var(--sp-1)}

.hero__panel{position:relative;border-radius:var(--r-xl);
  background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.035) 46%,rgba(255,255,255,.015) 74%,rgba(39,155,82,.045));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow-ink),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.03);
  padding:clamp(1.6rem,2.6vw,2.25rem);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.hero__panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(251,191,36,.15),transparent 44%),radial-gradient(90% 60% at 100% 100%,rgba(39,155,82,.07),transparent 60%)}
.panel__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5);position:relative}
.panel__label{font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--on-ink-3)}
.panel__val{font-family:var(--font-display);font-size:var(--fs-32);font-weight:700;letter-spacing:var(--ls-display);color:var(--amber-lit);line-height:var(--lh-flat)}
.panel__val small{font-family:var(--font-sans);font-size:var(--fs-14);font-weight:600;color:var(--on-ink-2);letter-spacing:var(--ls-flat)}
.bars{display:grid;gap:var(--sp-4);position:relative}
.bar__head{display:flex;justify-content:space-between;font-size:var(--fs-13);color:var(--on-ink-2);margin-bottom:var(--sp-2);gap:var(--sp-4)}
.bar__head b{color:var(--on-ink);font-weight:600;white-space:nowrap}
.bar__track{height:9px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.bar__fill{height:100%;border-radius:99px;transform-origin:left;transition:width var(--dur-slow) var(--ease-emph)}
.hero__panel .bar__fill{animation:grow var(--dur-slow) var(--ease-emph) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- panels / calculators ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-block);align-items:start;position:relative;z-index:1}
@media (max-width:1000px){.calc{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md),inset 0 1px 0 var(--paper-0);overflow:hidden}
.panel__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-panel);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.panel__hd h3{font-size:var(--fs-18);letter-spacing:var(--ls-title)}
.panel__bd{padding:var(--sp-panel)}
/* Dark result panels carry their own light: a faint top-down interior
   gradient plus a lit hairline along the top edge. */
.panel--dark{background:linear-gradient(180deg,var(--ink-2),var(--ink) 30%);border-color:var(--ink-3);color:var(--on-ink);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.10);position:sticky;top:calc(var(--header-h) + 18px)}
@media (max-width:1000px){.panel--dark{position:static}}
.panel--dark .panel__hd{background:linear-gradient(180deg,rgba(255,255,255,.055),transparent);border-color:rgba(255,255,255,.12)}
.panel--dark h3{color:var(--on-ink)}

/* ---------- fields ---------- */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.field{min-width:0}
.field--full{grid-column:1/-1}
.field__label{display:flex;align-items:center;gap:.4em;justify-content:space-between;font-size:var(--fs-13);font-weight:600;color:var(--text-2);margin-bottom:var(--sp-2);min-height:2.6em;align-items:flex-end}
.field__label .hint{font-family:var(--font-mono);font-size:var(--fs-10);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-3);font-weight:500}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .unit{position:absolute;right:.9rem;font-size:var(--fs-12);color:var(--text-3);pointer-events:none;font-family:var(--font-mono)}
.input-wrap .pre{position:absolute;left:.9rem;font-size:var(--fs-15);color:var(--text-3);pointer-events:none;font-weight:500}
input[type=number],input[type=email]{
  width:100%;font:inherit;font-size:var(--fs-16);font-weight:600;color:var(--text);
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:.66em .9em;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  -moz-appearance:textfield;appearance:none;
}
input.has-pre{padding-left:1.75em}
input.has-unit{padding-right:3.4em}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input:hover{border-color:var(--text-3)}
input:focus{outline:none;border-color:var(--forest-lit);background:#fff;box-shadow:0 0 0 4px rgba(23,110,61,.14)}
input[type=number]:out-of-range{border-color:#DC2626;background:#FEF2F2}
input[type=number]:out-of-range:focus{border-color:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.14)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;margin:var(--sp-2) 0 0;cursor:pointer;height:18px}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--forest-lit) var(--pct,0%),var(--paper-3) var(--pct,0%))}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--paper-3)}
input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--forest-lit)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:2.5px solid var(--forest-lit);margin-top:-6.5px;box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--forest-lit);box-shadow:var(--shadow-sm)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(23,110,61,.16)}
.fieldset-reset{border:0;padding:0;margin:0;min-width:0}
.fieldset-reset legend{padding:0}
.group-title{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-5);font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-3);width:100%}
.fieldset-reset + .fieldset-reset{margin-top:var(--sp-10)}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.group-title .ic{width:15px;height:15px;color:var(--forest-lit);flex:none}
.field-note{margin:var(--sp-4) 0 var(--sp-1);font-size:var(--fs-13);color:var(--text-3);line-height:var(--lh-ui)}
.field__adj{margin:var(--sp-2) 0 0;font-size:var(--fs-12);font-weight:600;color:#B91C1C;line-height:var(--lh-ui)}

.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-md);padding:4px}
.seg--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:430px){.seg{grid-template-columns:repeat(2,1fr)}}
.seg label{position:relative;display:block}
/* The input overlays its own label rather than being sized to zero, so it stays
   a real hit target for pointers, keyboards and assistive tech. */
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.seg span{display:block;text-align:center;padding:.55em .3em;border-radius:10px;font-size:var(--fs-13);font-weight:600;color:var(--text-2);cursor:pointer;transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);white-space:nowrap}
.seg input:checked + span{background:var(--forest-mid);color:#fff;box-shadow:var(--shadow-sm)}
.seg input:focus-visible + span{outline:2.5px solid var(--amber);outline-offset:2px}
.seg span:hover{color:var(--text)}
.seg input:checked + span:hover{color:#fff}

.check{display:flex;gap:var(--sp-3);align-items:flex-start;cursor:pointer;font-size:var(--fs-14);color:var(--text-2);line-height:var(--lh-ui)}
.check input{margin:0;flex:none;width:18px;height:18px;accent-color:var(--forest-lit);margin-top:.12em;cursor:pointer}
.check b{color:var(--text);font-weight:600}

/* ---------- results ---------- */
.headline-stat{text-align:center;padding:var(--sp-2) 0 var(--sp-8)}
.headline-stat .num{font-family:var(--font-display);font-weight:700;letter-spacing:var(--ls-stat);line-height:var(--lh-stat);font-size:var(--fs-stat);color:var(--amber-lit);display:block;font-variation-settings:'WONK' 0;text-shadow:0 2px 28px rgba(245,158,11,.28)}
.headline-stat .unit{display:block;font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--on-ink-3);margin-top:var(--sp-3)}
.headline-stat .sub{font-size:var(--fs-14);color:var(--on-ink-2);margin-top:var(--sp-3);line-height:var(--lh-body)}
.headline-stat .sub b{color:var(--on-ink)}
.chart-box{position:relative;width:100%}
/* Charts sit in a recessed well inside dark panels: a darker inset floor,
   its own hairline, and token padding so the plot never touches card chrome. */
.panel--dark .chart-box{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:inset 0 1px 4px rgba(0,0,0,.3)}
.chart-box--doughnut{height:250px}
.chart-box--line{height:330px}
@media (max-width:520px){.chart-box--line{height:290px}}
.chart-skel{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--on-ink-3);pointer-events:none;transition:opacity var(--dur) var(--ease)}
.chart-box.is-ready .chart-skel{opacity:0}
.legend{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.legend__row{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-14)}
.legend__sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend__name{color:var(--on-ink-2)}
.legend__val{margin-left:auto;font-weight:600;color:var(--on-ink)}
.legend__pct{color:var(--on-ink-3);font-size:var(--fs-13);width:3.4em;text-align:right}
.bench{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.12);display:grid;gap:var(--sp-4)}
.bench__note{font-size:var(--fs-12);color:var(--on-ink-3);line-height:var(--lh-ui);margin-top:var(--sp-1)}

.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.kpi{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.11);border-radius:var(--r-md);padding:var(--sp-5);min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.kpi--wide{grid-column:1/-1}
.kpi--hero{background:linear-gradient(150deg,rgba(245,158,11,.2),rgba(245,158,11,.05));border-color:rgba(245,158,11,.34);box-shadow:inset 0 1px 0 rgba(251,191,36,.22)}
.kpi__l{font-family:var(--font-mono);font-size:var(--fs-10);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-ink-3)}
/* -.01em pulls the first numeral back onto the label's optical left edge. */
.kpi__v{font-family:var(--font-display);font-size:var(--fs-24);font-weight:700;letter-spacing:var(--ls-headline);color:var(--on-ink);margin-top:var(--sp-2);line-height:var(--lh-display);margin-left:-.01em;font-variant-numeric:tabular-nums lining-nums}
.kpi--hero .kpi__v{font-size:var(--fs-32);letter-spacing:var(--ls-display);color:var(--amber-lit)}
.kpi__v small{font-family:var(--font-sans);font-size:var(--fs-13);font-weight:600;color:var(--on-ink-2);letter-spacing:var(--ls-flat);margin-left:.15em}
.kpi__n{font-size:var(--fs-12);color:var(--on-ink-3);margin-top:var(--sp-1);line-height:var(--lh-ui)}
.kpi--neg .kpi__v{color:#FCA5A5}

.tips{display:grid;gap:var(--sp-3)}
.tip{display:flex;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line);animation:fade-up var(--dur-slow) var(--ease-emph) both}
.tip__ic{width:30px;height:30px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--forest-mid);color:#fff}
.tip__ic svg{width:16px;height:16px}
.tip--amber .tip__ic{background:var(--amber-deep)}
.tip__b{min-width:0}
.tip__t{font-weight:600;font-size:var(--fs-15)}
.tip__d{font-size:var(--fs-14);color:var(--text-2);margin-top:var(--sp-1);line-height:var(--lh-ui)}
.tip__save{display:inline-block;margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-mono);color:var(--forest-mid);background:rgba(23,110,61,.1);border-radius:999px;padding:.24em .7em;font-weight:500}
.tip--amber .tip__save{color:var(--amber-deep);background:rgba(217,119,6,.12)}
@keyframes fade-up{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* Post-result next step. Rendered only after a payback figure exists; the
   link carries the user out — no form, no fields, nothing transmitted. */
.next-step{position:relative;overflow:hidden;margin-top:var(--sp-6);border-radius:var(--r-md);padding:var(--sp-6);
  background:linear-gradient(150deg,rgba(245,158,11,.18),rgba(245,158,11,.05) 55%,rgba(245,158,11,.10));
  border:1px solid rgba(245,158,11,.38);
  box-shadow:inset 0 1px 0 rgba(251,191,36,.26),0 20px 44px -30px rgba(245,158,11,.5)}
.next-step::before{content:"";position:absolute;right:-24%;top:-60%;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(251,191,36,.15),transparent 64%);pointer-events:none}
/* Border beam — the only animated element on the page, deliberately placed on
   the only element that earns anything. It travels light around the border
   and nothing else: no text moves, and it never touches a figure someone is
   trying to read, which is the rule every serious financial calculator keeps.
   A conic gradient masked to the 1px ring; @property is what makes the angle
   animatable. Where @property is unsupported the ring simply never paints,
   which is a silent no-op rather than a broken border. */
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}
.next-step::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--beam),transparent 0deg 296deg,rgba(251,191,36,.55) 330deg,rgba(255,247,224,.95) 350deg,rgba(251,191,36,.55) 356deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beam 7s linear infinite}
@keyframes beam{to{--beam:360deg}}
.next-step__kicker{position:relative;display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-size:var(--fs-10);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--amber-lit)}
.next-step__kicker::before{content:"";width:26px;height:1.5px;background:var(--amber)}
.next-step h4{color:var(--on-ink);margin-top:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-20);letter-spacing:var(--ls-title);line-height:var(--lh-title)}
.next-step p{font-size:var(--fs-14);color:var(--on-ink-2);line-height:var(--lh-body);margin-top:var(--sp-2)}
/* Around 320px this CTA's nowrap label is wider than the panel, and the panel
   clips (overflow:hidden) — the label lost its last characters. Let this one
   button wrap rather than be sliced. WCAG 1.4.10. */
@media (max-width:420px){
  .next-step .btn{white-space:normal;text-align:center;line-height:var(--lh-ui)}
}
.next-step .btn{margin-top:var(--sp-5)}
.next-step p.next-step__disclose{font-size:var(--fs-12);color:var(--on-ink-3);line-height:var(--lh-ui);margin-top:var(--sp-4)}
.payback-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-md);background:linear-gradient(150deg,rgba(39,155,82,.12),rgba(39,155,82,.05));border:1px solid rgba(39,155,82,.26);box-shadow:inset 0 1px 0 rgba(134,239,172,.14);font-size:var(--fs-14);color:var(--on-ink-2);line-height:var(--lh-body)}
.payback-strip b{color:var(--leaf-soft)}
.payback-strip.is-warn{background:linear-gradient(150deg,rgba(245,158,11,.12),rgba(245,158,11,.05));border-color:rgba(245,158,11,.3);box-shadow:inset 0 1px 0 rgba(251,191,36,.16)}
.payback-strip.is-warn b{color:var(--amber-lit)}

/* ---------- generic content ---------- */
.prose{max-width:70ch}
.prose p{margin-top:var(--sp-4);color:var(--text-2);line-height:var(--lh-prose)}
.prose p:first-child{margin-top:0}
.prose h3{margin-top:var(--sp-8);color:var(--text)}
.prose h3 + p{margin-top:var(--sp-3)}
.prose ul{margin:var(--sp-4) 0 0;padding-left:var(--sp-5);color:var(--text-2);line-height:var(--lh-prose)}
.prose li{margin-top:var(--sp-2)}
.prose strong{color:var(--text);font-weight:600}
.prose a{text-underline-offset:3px;color:var(--forest-mid);font-weight:500}
/* ...but a button inside .prose must keep its own foreground: the rule above
   is more specific than .btn and would otherwise tint it green on amber. */
.prose a.btn{color:var(--btn-fg)}

.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.2vw,2rem)}
.feature-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:880px){.feature-grid,.feature-grid--2{grid-template-columns:1fr}}
.feature{padding:clamp(1.6rem,2.4vw,2.25rem);border-radius:var(--r-lg);background:linear-gradient(165deg,var(--paper-0),var(--paper) 58%);border:1px solid var(--line);box-shadow:var(--shadow-sm),inset 0 1px 0 var(--paper-0);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md),inset 0 1px 0 var(--paper-0)}
.feature__ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--ink);color:var(--amber-lit);margin-bottom:var(--sp-4)}
.feature__ic svg{width:21px;height:21px}
.feature h3{font-size:var(--fs-20);margin-bottom:var(--sp-2)}
.feature p{font-size:var(--fs-15);color:var(--text-2);line-height:var(--lh-body)}
.feature p + p{margin-top:var(--sp-3)}

.table-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-14);min-width:560px}
caption{text-align:left;padding:var(--sp-4) var(--sp-5);font-size:var(--fs-13);line-height:var(--lh-ui);color:var(--text-2);border-bottom:1px solid var(--line)}
th,td{text-align:left;padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--font-mono);font-size:var(--fs-10);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--text-3);font-weight:500;background:var(--paper-2)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;font-weight:600}
td small,th small{color:var(--text-3);display:block;font-size:var(--fs-12);font-weight:400;margin-top:var(--sp-1);line-height:var(--lh-ui)}

.faq{display:grid;gap:var(--sp-3);max-width:900px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.faq details[open]{border-color:var(--forest-lit);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp-5) var(--sp-6);font-weight:600;font-size:var(--fs-16);letter-spacing:var(--ls-ui);display:flex;align-items:flex-start;gap:var(--sp-4);transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--forest-mid)}
.faq summary .chev{margin-left:auto;flex:none;width:16px;height:16px;color:var(--text-3);transition:transform var(--dur) var(--ease),color var(--dur-fast) var(--ease);margin-top:.28em}
.faq details[open] summary .chev{transform:rotate(180deg);color:var(--forest-lit)}
.faq .answer{padding:0 var(--sp-6) var(--sp-6);color:var(--text-2);font-size:var(--fs-15);line-height:var(--lh-prose)}
.faq .answer p + p{margin-top:var(--sp-3)}
.faq .answer a{color:var(--forest-mid);text-underline-offset:3px}

.glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4vw,4rem)}
@media (max-width:760px){.glossary{grid-template-columns:1fr}}
.glossary dt{font-weight:600;color:var(--text);margin-top:var(--sp-8);font-size:var(--fs-15)}
.glossary dt:first-of-type{margin-top:0}
.glossary dd{margin:var(--sp-1) 0 0;color:var(--text-2);font-size:var(--fs-14);line-height:var(--lh-body)}

.capture{position:relative;overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(180deg,var(--ink-2),var(--ink) 62%);border:1px solid var(--ink-3);color:var(--on-ink);padding:clamp(2.25rem,5vw,4.5rem);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.10)}
.capture::before{content:"";position:absolute;left:-16%;bottom:-64%;width:min(520px,80vw);aspect-ratio:1;background:radial-gradient(circle,rgba(23,110,61,.30),transparent 62%);pointer-events:none}
.capture__glow{position:absolute;right:-12%;top:-70%;width:min(660px,90vw);aspect-ratio:1;background:radial-gradient(circle,rgba(245,158,11,.3),transparent 62%);pointer-events:none}
.capture__in{position:relative;z-index:2;max-width:640px}
.capture h2{font-size:var(--fs-headline)}
.capture > .capture__in > p{margin-top:var(--sp-4);color:var(--on-ink-2);font-size:var(--fs-18);line-height:var(--lh-body);letter-spacing:var(--ls-flat)}
.signup{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap}
.signup .input-wrap{flex:1 1 260px}
.signup input[type=email]{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--on-ink);padding:.88em 1.1em;font-weight:500;box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.signup input[type=email]::placeholder{color:var(--on-ink-3)}
.signup input[type=email]:focus{background:rgba(255,255,255,.12);border-color:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.18),inset 0 1px 3px rgba(0,0,0,.28)}
.signup input[type=email][aria-invalid=true]{border-color:#F87171}
.form-note{margin-top:var(--sp-4);font-size:var(--fs-13);line-height:var(--lh-ui);color:var(--on-ink-3)}
.form-msg{margin-top:var(--sp-4);font-size:var(--fs-14);font-weight:500;min-height:1.4em}
.form-msg[data-state=ok]{color:var(--leaf-soft)}
.form-msg[data-state=err]{color:#FCA5A5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.disclaimer{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-5) var(--sp-6);border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--line);font-size:var(--fs-14);color:var(--text-2);line-height:var(--lh-body)}
.disclaimer svg{width:19px;height:19px;flex:none;color:var(--amber-deep);margin-top:.15em}
.disclaimer b{color:var(--text)}
.section--ink .disclaimer{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:var(--on-ink-2)}
.section--ink .disclaimer b{color:var(--on-ink)}

.updated{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-3);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.4em .9em}
.updated .dot{width:6px;height:6px;border-radius:50%;background:var(--leaf);flex:none}

.footer{background:linear-gradient(180deg,var(--ink),var(--ink-deep));color:var(--on-ink-2);padding-block:clamp(3rem,6vw,4.5rem) var(--sp-8);position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(2.25rem,4vw,3.75rem)}
@media (max-width:760px){.footer__top{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
.footer__brand p{margin-top:var(--sp-4);font-size:var(--fs-14);max-width:40ch;line-height:var(--lh-body)}
.footer h4{font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--on-ink-3);font-weight:500;margin:0 0 var(--sp-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.footer a{text-decoration:none;font-size:var(--fs-14);transition:color var(--dur-fast) var(--ease)}
.footer a:hover{color:var(--amber-lit)}
.footer__btm{margin-top:var(--sp-block);padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);align-items:center;font-size:var(--fs-13);line-height:var(--lh-ui);color:var(--on-ink-3)}
.footer__btm p{margin-right:auto;max-width:70ch;line-height:var(--lh-body)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-emph),transform var(--dur-slow) var(--ease-emph)}
.reveal.in{opacity:1;transform:none}

/* Hover states. Every one is a colour, border or <=2px lift — no scaling of
   text, no shadows that jump, nothing that moves the reading position. */
.brand__mark{transition:transform var(--dur) var(--ease)}
.brand:hover .brand__mark{transform:scale(1.04)}
.kpi{transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.kpi:hover{background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.06));border-color:rgba(255,255,255,.2)}
.kpi--hero:hover{background:linear-gradient(150deg,rgba(245,158,11,.26),rgba(245,158,11,.08));border-color:rgba(245,158,11,.46)}
.tip{transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.tip:hover{transform:translateY(-2px);border-color:var(--text-3);background:var(--paper)}
.legend__row{border-radius:6px;padding:var(--sp-1) var(--sp-1);margin-inline:-.35rem;transition:background-color var(--dur-fast) var(--ease)}
.legend__row:hover{background:rgba(255,255,255,.06)}
.faq summary:hover{background:var(--paper-2)}
.faq details[open] summary{background:var(--paper-2)}
tbody tr{transition:background-color var(--dur-fast) var(--ease)}
tbody tr:hover{background:var(--paper-2)}
.seg span:hover{background:rgba(23,110,61,.08)}
.seg input:checked + span:hover{background:var(--forest-lit)}
.glossary dt{transition:color var(--dur-fast) var(--ease)}
.disclaimer{transition:border-color var(--dur) var(--ease)}
.disclaimer:hover{border-color:var(--text-3)}
.section--ink .disclaimer:hover,.panel--dark .disclaimer:hover{border-color:rgba(255,255,255,.28)}
.footer a:hover{text-underline-offset:4px;text-decoration:underline}
.updated{transition:border-color var(--dur) var(--ease)}
.table-scroll{transition:box-shadow var(--dur) var(--ease)}
.table-scroll:hover{box-shadow:var(--shadow-md)}
/* Verification voice: citation and source links use the deep teal secondary. */
.table-scroll tbody a,#sources .prose a{color:var(--teal)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  /* Remove the beam outright rather than freezing it — a stopped beam leaves a
     bright arc parked on one edge, which reads as a rendering fault. */
  .next-step::after{display:none}
}
@media print{
  .header,.nav,.hero__glow,.hero__glow2,.hero__grid,.capture,.footer{display:none !important}
  body{background:#fff}
  .panel--dark{background:#fff;color:#000;box-shadow:none}
  /* On screen, .reveal content starts invisible until scrolled into view. The
     print renderer never scrolls, so without this reset everything below the
     fold printed as blank space — a visitor saving their result to PDF for a
     spouse or an installer got mostly empty pages. */
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .next-step::after{display:none !important}
}