/* =========================================================
   NEHAN KHAN: nehankhan.com
   Design system: "The Audit Desk"
   Ink-navy pages · paper document artifacts · engraved
   currency linework · analyst mono data voice · gold spent
   sparingly on what matters.
   ---------------------------------------------------------
   Type:  Bricolage Grotesque (display) · Inter (body)
          JetBrains Mono (data/labels) · Instrument Serif (pen)
   ========================================================= */

:root {
  /* Ink & navy */
  --ink: #04060f;            /* page base */
  --ink-2: #070d24;          /* alternate section */
  --surface: #0c1332;        /* raised card on ink */
  --surface-2: #111a42;      /* hover / inner surface */
  --navy-brand: #020189;     /* exact brand navy */

  /* Gold: the expensive colour. CTAs, score, pen ink only. */
  --gold: #f6c513;
  --gold-deep: #d9a800;
  /* Brand gold taken down far enough to carry small text on a pale
     surface: 5.2:1 on the light footer, where --gold is 1.4:1 and
     --gold-deep only reaches 1.9:1. Both of those are fine for an icon
     or a hover state and neither is readable as a paragraph. */
  --gold-ink: #7d5f00;
  --gold-soft: rgba(246, 197, 19, 0.1);

  /* Paper: the document artifacts */
  --paper: #fcfbf7;
  --paper-shade: #f1eee4;
  --paper-ink: #12173a;
  --paper-muted: #656981;
  --paper-line: rgba(18, 23, 58, 0.12);

  /* Cream: light lifted panels */
  --cream: #f7f5ef;

  /* Status */
  --flag: #e4574f;
  --flag-soft: rgba(228, 87, 79, 0.12);

  /* Text on dark.
     The three tones are a hierarchy, not a fade: --text-low carries fine
     print: the footer disclaimer, captions, the copyright line: and is
     tuned to clear 4.5:1 on the lightest surface it ever sits on
     (--surface-2), not just on --ink. Anything quieter reads as decoration. */
  --text-hi: #f4f6ff;
  --text-mid: #a9b1d6;
  --text-low: #7d85a9;

  /* Text on light: same rule, measured against --paper-shade. */
  --lt-hi: #0b1142;
  --lt-mid: #494f75;
  --lt-low: #61688d;

  /* Lines */
  --line: rgba(233, 238, 255, 0.09);
  --line-strong: rgba(233, 238, 255, 0.18);
  --lt-line: rgba(2, 1, 137, 0.1);
  --lt-line-strong: rgba(2, 1, 137, 0.22);

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-pen: "Instrument Serif", Georgia, serif;

  /* Space (8pt) */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --s8: 6.5rem;
  --s9: 8.5rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fast: 180ms;
  --base: 320ms;
  --slow: 640ms;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink);
  color: var(--text-hi);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.06; }
p { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  /* The chip is always gold, so its ink must be a fixed dark value rather
     than var(--ink): that token flips to cream on paper, which put cream
     on gold at 1.57:1 for the one control a keyboard user meets first. */
  background: var(--gold); color: #04060f;
  padding: var(--s2) var(--s3); z-index: 999;
  border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { left: var(--s3); top: var(--s3); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Voice utilities ---------- */

/* The analyst's pen: italic serif, for emphasised words & annotations */
.accent-script,
.pen {
  font-family: var(--font-pen);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: 0.005em;
  color: var(--gold);
}
.section-light .accent-script, .section-light .pen { color: var(--navy-brand); }
.final-cta .accent-script, .final-cta .pen { color: var(--navy-brand); }

/* The analyst's data voice: mono microlabels */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
  opacity: 0.55;
  flex-shrink: 0;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
  opacity: 0.55;
  flex-shrink: 0;
}
.section-light .eyebrow { color: var(--navy-brand); }
.section-light .eyebrow::before, .section-light .eyebrow::after { background: var(--navy-brand); }

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-hi);
  text-wrap: balance;
}
.section-sub {
  margin-top: var(--s3);
  max-width: 50ch;
  color: var(--text-mid);
  font-size: 1.02rem;
}
.section-head { margin-bottom: var(--s6); }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }

section { position: relative; padding: var(--s8) 0; }

/* Discreet footnote for sample figures */
.footnote {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-low);
  text-align: center;
  margin-top: var(--s4);
}
.section-light .footnote { color: var(--lt-low); }

/* ---------- Engraved backdrop (replaces glow blobs) ---------- */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.backdrop__arcs {
  position: absolute;
  top: -30%; right: -18%;
  width: min(72vw, 980px);
  height: auto;
  opacity: 0.55;
}
.backdrop__arcs--left {
  top: auto; right: auto;
  bottom: -42%; left: -22%;
  opacity: 0.3;
}
.backdrop::after {
  /* vignette so linework fades under content */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 32% 45%, var(--ink) 20%, transparent 78%);
}

/* ---------- The monogram watermark ----------
   A band with nothing in the background is the one place this site looks
   unfinished. The mark fills that, at an opacity low enough that it reads
   as texture rather than as a logo: if a visitor notices it as a logo it
   is too strong, and the number below is the whole design.

   Painted as a mask rather than a background-image, so the gold in
   nbk-logo.svg is irrelevant and the colour comes from CSS. That is what
   lets one file serve the navy mark on paper and the gold one on ink, and
   it keeps both tied to the palette tokens rather than to a hex value
   copied into a second file.

   Nothing is bled off an edge far enough to lose the top of the mark. A
   monogram cropped until it is unreadable stops being a monogram and
   becomes a smudge; every placement below keeps the whole silhouette on
   the band, and lets the cards in front do the overlapping instead.

   Used sparingly and on purpose. Three bands site-wide; on every band it
   stops being a touch and becomes wallpaper. */
.section-mark { position: relative; overflow: hidden; }
.section-mark::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1000 / 778;
  -webkit-mask: url(../brand_assets/images/nbk-logo.svg) no-repeat center / contain;
          mask: url(../brand_assets/images/nbk-logo.svg) no-repeat center / contain;
  background-color: var(--navy-brand);
  opacity: 0.045;
  /* the default: tucked into the top right, clear of both edges */
  width: min(46vw, 560px);
  top: 5%;
  right: 3%;
}
/* Centred behind the section head, where the band opens on a centred
   heading and the mark can sit square behind it. The cards below crop it,
   which is the intended overlap: the top half reads, the bottom is held. */
.section-mark--centre::before {
  width: min(58vw, 720px);
  top: 4%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  opacity: 0.05;
}
/* Bottom left, for a second marked band on the same page: the opposite
   corner stops the two reading as a repeating tile. */
.section-mark--left::before {
  top: auto; bottom: 5%;
  right: auto; left: 3%;
}
/* Gold on ink. Navy on near-black would be invisible, and the warm ghost
   is the point on a dark band. */
.section-ink.section-mark::before {
  background-color: var(--gold);
  opacity: 0.05;
}
/* The mark sits behind the band's own content, never over it. */
.section-mark > .container { position: relative; z-index: 1; }

@media (max-width: 860px) {
  /* Narrower bands leave less clear ground, so the mark comes down in size
     rather than crowding the copy it sits behind. */
  .section-mark::before { width: min(62vw, 420px); top: 3%; right: 2%; }
  .section-mark--centre::before { width: 74vw; top: 2%; }
  .section-mark--left::before { left: 2%; bottom: 3%; }
}
/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 0.95rem 1.7rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform var(--fast) var(--ease-out),
              box-shadow var(--fast) var(--ease-out),
              background var(--fast) var(--ease-out),
              border-color var(--fast) var(--ease-out),
              color var(--fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--gold);
  color: #0a0d1f;
}
/* light sweep across the gold on hover */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(0) skewX(-18deg);
  transition: transform var(--slow) var(--ease-out);
}
.btn--primary:hover { background: var(--gold); box-shadow: 0 12px 32px -10px rgba(246,197,19,0.45); }
/* 475% of this element's own width == the old -60% -> 130% travel across
   the button, which was 190% of the button and this sits at 40% of it. */
.btn--primary:hover::after { transform: translateX(475%) skewX(-18deg); }

.btn--secondary { background: var(--navy-brand); color: #fff; }
.btn--secondary:hover { background: #0303a8; box-shadow: 0 10px 28px -8px rgba(2,1,137,0.55); }

.btn--ghost {
  background: transparent;
  color: var(--text-hi);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--small { padding: 0.55rem 1.15rem; font-size: 0.85rem; border-radius: 10px; }
.btn--large { padding: 1.15rem 2.3rem; font-size: 1.02rem; }

.section-light .btn--ghost { color: var(--lt-hi); border-color: var(--lt-line-strong); }
.section-light .btn--ghost:hover { border-color: var(--navy-brand); color: var(--navy-brand); background: rgba(2,1,137,0.05); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: transform var(--base) var(--ease-out),
              background var(--base) var(--ease-out),
              border-color var(--base) var(--ease-out);
}
.nav--hidden { transform: translateY(-105%); }
.nav.is-scrolled {
  background: rgba(4, 6, 15, 0.82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.nav__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s4);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  /* Holds everything after it against the right edge. The spacer used to
     live on .nav__community, so removing that link let the Book Now button
     slide back into the middle and collide with the centred nav links.
     Anchoring it to the logo instead means the row survives whatever is or
     is not in the cluster on its right. */
  margin-right: auto;
}
/* One lockup, two parts, sized against each other rather than against the
   bar. At 36px the mark stood roughly three and a half times the cap
   height of the name beside it, so the pair read as a logo with a caption
   bolted on. Dropping the mark and lifting the wordmark brings that to
   about 1.6x: the mark still leads, but the two now carry the same
   optical weight, which is what makes a lockup like Acquisition.com's
   read as one mark rather than two.
   These two properties are the only knobs. The footer restates them a
   size down and everything below follows from them. */
.nav__logo, .footer__brand { --lockup-mark: 21px; --lockup-word: 1.2rem; }
.nav__logo-mark { height: var(--lockup-mark); width: auto; flex-shrink: 0; }
/* Tracking eases off as the type grows: 0.08em was opening up the name at
   the smaller size, and at this one it would pull the lockup apart. */
.nav__logo-text { font-size: var(--lockup-word); letter-spacing: 0.06em; text-transform: uppercase; }
/* The name carries the weight; the TLD is only there to say it is a web
   address. Dropping it to 400 and easing the tracking lets it sit at the
   end of the wordmark without competing with it. */
.nav__logo-tld {
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

.nav__links {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: var(--s5);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav__links a {
  position: relative;
  color: var(--text-mid);
  transition: color var(--fast) var(--ease-out);
}
.nav__links a:hover { color: var(--text-hi); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -8px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* ---------- Resources dropdown ----------
   A button, not a link, because it opens a panel. Opening on hover alone
   would put the whole menu out of reach of a keyboard, and on click alone
   it loses the feel of the reference, so it does both: hover opens on a
   pointer, Enter/Space opens from the keyboard, Escape closes and hands
   focus back to the button.

   State lives on .is-open rather than the hidden attribute. Below 860px
   this panel stops floating and becomes a plain expanded group inside the
   burger drawer, and [hidden] would have to be fought with !important to
   get it back. A class is simply overridden. */
.nav__drop { position: relative; }
.nav__drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-mid);
  cursor: pointer;
  transition: color var(--fast) var(--ease-out);
}
.nav__drop-btn:hover,
.nav__drop.is-open .nav__drop-btn { color: var(--text-hi); }
.nav__drop-chev {
  width: 13px; height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--base) var(--ease-out);
}
.nav__drop.is-open .nav__drop-chev { transform: rotate(180deg); }

.nav__drop-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(92vw, 620px);
  padding: var(--s5);
  /* Solid, and deliberately not backdrop-filter. A blurred panel composites
     into its own layer, and in that layer a 0.97 background stopped being
     opaque and the hero's audit card painted straight over the menu. A menu
     has to be readable before it is atmospheric. The nav bar above keeps its
     blur; this sits on top of it. */
  background: #080c1e;
  border: 1px solid var(--line-strong);
  z-index: 1;
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--base) var(--ease-out),
              transform var(--base) var(--ease-out),
              visibility var(--base);
}
.nav__drop.is-open .nav__drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* The gap between button and panel is dead space a pointer crosses on the
   way down. Without this bridge the panel closes mid-travel. */
.nav__drop-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -20px;
  height: 20px;
}
.nav__drop-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
.nav__drop-head {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-low);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.nav__drop-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.5rem 0;
  font-size: 0.88rem;
  color: var(--text-mid);
  white-space: normal;
  line-height: 1.35;
}
.nav__drop-item svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  transition: opacity var(--fast) var(--ease-out);
}
.nav__drop-item:hover { color: var(--text-hi); }
.nav__drop-item:hover svg { opacity: 1; }
/* the shared underline sweep is wrong on a stacked list */
.nav__links .nav__drop-item::after { display: none; }

.nav__drop-foot {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}
.nav__links .nav__drop-foot a::after { display: none; }
.nav__drop-all { margin-left: auto; color: var(--gold); font-weight: 600; }
.nav__links .nav__drop-all:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .nav__drop-panel { transition: opacity 0.01ms, visibility 0.01ms; transform: translateX(-50%); }
  .nav__drop.is-open .nav__drop-panel { transform: translateX(-50%); }
  .nav__drop-chev { transition: none; }
}

/* Whop community link: right side, before the CTA; stays visible on mobile */
.nav__community {
  margin-left: auto;
  margin-right: var(--s3);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-mid);
  transition: color var(--fast) var(--ease-out);
}
.nav__community:hover { color: var(--gold); }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--text-hi);
  transition: transform var(--base) var(--ease-out), opacity var(--base) var(--ease-out);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Sized by its content, not by the window. min-height: 100svh with
   centred content meant every pixel of screen taller than the copy became
   dead space split above and below it, and it grew 1:1 with the display:
   91px of gap on a 900px-tall window, 201px at 1120, 291px at 1300. On a
   large monitor that reads as a hole rather than as air. Without it the
   hero is the same height on every screen, and the section below is now
   within one scroll instead of two.
   The bottom padding is not the gap you see: .section-light lifts the
   paper panel 48px up over whatever precedes it, so the first 48px here
   is spent on that overlap. --s8 is what leaves 56px of dark actually
   visible under the copy: where before it ranged from 24px to 390px
   depending on how tall the window was. */
.hero {
  display: flex;
  align-items: center;
  padding-top: calc(74px + var(--s6));
  padding-bottom: var(--s8);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s7);
  align-items: center;
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  margin-bottom: var(--s4);
}
.hero__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(246,197,19,0.5);
  animation: statusPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes statusPulse {
  0% { box-shadow: 0 0 0 0 rgba(246,197,19,0.45); }
  60% { box-shadow: 0 0 0 8px rgba(246,197,19,0); }
  100% { box-shadow: 0 0 0 0 rgba(246,197,19,0); }
}

.hero__title {
  font-size: clamp(2.7rem, 5.6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.hero__title .pen { font-size: 1.04em; font-weight: 400; }

.hero__subtitle {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-mid);
  max-width: 52ch;
  margin-bottom: var(--s5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-low);
}
.hero__meta li { display: flex; align-items: center; gap: 0.55em; }
.hero__meta svg { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; }

/* staged load-in */
.hero [data-stage] {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise 0.85s var(--ease-out) forwards;
}
.hero [data-stage="1"] { animation-delay: 0.05s; }
.hero [data-stage="2"] { animation-delay: 0.16s; }
.hero [data-stage="3"] { animation-delay: 0.27s; }
.hero [data-stage="4"] { animation-delay: 0.38s; }
.hero [data-stage="5"] { animation-delay: 0.49s; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- The Live Audit (signature) ---------- */
.audit {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(26px) rotate(0.8deg);
  animation: auditIn 0.9s var(--ease-out) 0.45s forwards;
}
@keyframes auditIn {
  to { opacity: 1; transform: translateY(0) rotate(0.8deg); }
}

.audit__doc {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s5) var(--s5) var(--s4);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 30px 70px -28px rgba(0, 0, 0, 0.85),
    0 8px 22px -10px rgba(0, 0, 0, 0.5);
}
/* second sheet peeking behind */
.audit__doc::before {
  content: "";
  position: absolute;
  inset: 10px -8px -10px 8px;
  background: var(--paper-shade);
  border-radius: var(--r-md);
  z-index: -1;
  transform: rotate(1.6deg);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.8);
}

.audit__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--paper-ink);
}
.audit__head-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.audit__head-ref {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--paper-muted);
}

.audit__score {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--paper-line);
}
.audit__dial { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.audit__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.audit__dial-track { stroke: var(--paper-line); }
.audit__dial-fill {
  stroke: var(--gold-deep);
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke-dashoffset 1.8s var(--ease-in-out);
}
.audit.is-run .audit__dial-fill { stroke-dashoffset: 71; } /* ≈73% of 999 */
.audit__dial-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.audit__dial-num small {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--paper-muted);
  text-transform: uppercase;
}
.audit__score-copy {
  font-size: 0.82rem;
  color: var(--paper-muted);
  line-height: 1.5;
  padding-right: 96px; /* clear space for the pressed stamp */
}
.audit__score-copy strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-ink);
  margin-bottom: 0.35em;
}
.audit__delta {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--gold-deep);
  white-space: nowrap;
}

.audit__lines { padding-top: var(--s3); }
.audit__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0.62rem 0;
  border-bottom: 1px dashed var(--paper-line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  opacity: 0.35;
  transition: opacity var(--base) var(--ease-out);
}
.audit__line:last-child { border-bottom: none; }
.audit.is-run .audit__line { opacity: 1; }
.audit__line-label { color: var(--paper-ink); }

.audit__chip {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.audit__chip--flag { background: var(--flag-soft); color: var(--flag); }
.audit__chip--fix { background: var(--gold-soft); color: var(--gold-deep); }
/* chips flip from flag to fix as the audit "runs" */
.audit__line .audit__chip--fix { display: none; }
.audit.is-fixed .audit__line[data-fixes] .audit__chip--flag { display: none; }
.audit.is-fixed .audit__line[data-fixes] .audit__chip--fix { display: inline-block; }

/* the analyst's pen note: blue ballpoint, signs off the document */
.audit__note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-pen);
  font-style: italic;
  font-size: 1.16rem;
  color: var(--navy-brand);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
}
.audit.is-fixed .audit__note { opacity: 1; transform: translateY(0); }
.audit__note svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--navy-brand);
}

/* the approval stamp: blue office ink, pressed onto the paper itself */
.audit__stamp {
  position: absolute;
  top: 5.2rem;
  right: 1.4rem;
  width: 96px; height: 96px;
  color: var(--navy-brand);
  opacity: 0;
  transform: scale(1.5) rotate(14deg);
  transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.audit.is-fixed .audit__stamp {
  opacity: 0.78;
  transform: scale(1) rotate(9deg);
  transition-delay: 350ms;
}

/* ---------- Ledger strip (proof figures) ---------- */
.ledger {
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.ledger__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ledger__cell {
  padding: var(--s5) var(--s4);
  border-left: 1px solid var(--line);
}
.ledger__cell:first-child { border-left: none; }
.ledger__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-hi);
}
.ledger__num em { font-style: normal; color: var(--gold); }
.ledger__label {
  display: block;
  margin-top: var(--s1);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-low);
}
.ledger .footnote {
  padding: 0 var(--s4) var(--s3);
  margin-top: 0;
  text-align: left;
  opacity: 0.75;
}

/* ---------- Session tiers (work with me: the ladder) ---------- */
.tiers { background: var(--ink); }
.tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  transition: transform var(--base) var(--ease-out),
              border-color var(--base) var(--ease-out),
              background var(--base) var(--ease-out);
}
.tier:hover { transform: translateY(-5px); border-color: var(--line-strong); background: var(--surface-2); }

/* ---------- Tier not open yet ----------
   Blurs the offer behind a crisp label. The content stays in the DOM and
   readable to screen readers: it is the interaction that is withdrawn,
   not the information: so the card still says what is coming. */
.tier--soon { position: relative; overflow: hidden; }
.tier--soon:hover { transform: none; border-color: var(--line); background: var(--surface); }
.tier__frosted {
  filter: blur(4.5px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.tier__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  text-align: center;
  padding: var(--s4);
  /* a touch of scrim so the badge holds against the blurred text */
  background: radial-gradient(ellipse 75% 55% at 50% 50%, rgba(4, 6, 15, 0.72), rgba(4, 6, 15, 0.28));
}
.tier__veil-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(246, 197, 19, 0.45);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: rgba(4, 6, 15, 0.55);
  backdrop-filter: blur(2px);
}
.tier__veil-note {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-mid);
}
.tier--featured { border-color: rgba(246, 197, 19, 0.38); }
.tier--featured:hover { border-color: var(--gold); }

.tier__ref {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-low);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.tier--featured .tier__ref em { font-style: normal; color: var(--gold); }
.tier h3 {
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px dashed var(--line);
}
.tier__price strong {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-hi);
}
.tier__price span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-low);
}
.tier > p { color: var(--text-mid); font-size: 0.93rem; margin-bottom: var(--s4); }
.tier__list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
  flex-grow: 1;
}
.tier__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-mid);
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
  opacity: 0.8;
}

/* Veiled toolkits: the list carries on past what you are shown.
   The blur deepens down the three so it reads as a fade into more, rather
   than three lines that failed to render. Only the text is blurred: the
   gold marker is a pseudo-element on the li, so blurring the li would take
   the markers with it and the whole row would read as broken. Keeping the
   markers crisp against soft text is what makes it read as withheld.
   Not selectable and not a tab stop: nothing here is a control. */
.tier__list .is-veiled {
  user-select: none;
  pointer-events: none;
}
.tier__list .is-veiled::before { opacity: 0.5; }
.tier__list .is-veiled .veil {
  display: block;
  transition: filter var(--base) var(--ease-out);
}
.tier__list li.is-veiled:nth-last-child(3) .veil { filter: blur(2.6px); opacity: 0.82; }
.tier__list li.is-veiled:nth-last-child(2) .veil { filter: blur(4px);   opacity: 0.66; }
.tier__list li.is-veiled:nth-last-child(1) .veil { filter: blur(5.4px); opacity: 0.5; }
/* Tier 2 focus picker */
.tier__focus-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s3);
}
.tier__focus {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s5);
  flex-grow: 1;
}
.tier__focus li {
  padding-left: var(--s3);
  border-left: 2px solid rgba(246, 197, 19, 0.35);
}
.tier__focus li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-hi);
}
.tier__focus li span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-mid);
  margin-top: 0.15em;
}
.tier__focus li span em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--gold);
}
.tier .btn { width: 100%; }
.tier__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--text-low);
  text-align: center;
  margin-top: var(--s2);
}
/* Waiting-list capture, used on the toolkits tier and anywhere else the
   thing being offered does not exist yet. Sits where a button would, so
   the card keeps its shape against the two beside it. */
.tier__notify { display: grid; gap: var(--s2); margin-top: auto; padding-top: var(--s4); }
.tier__notify input[type="email"] {
  width: 100%;
  padding: 0.78rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.tier__notify input[type="email"]::placeholder { color: var(--text-low); }
.tier__notify input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.tier__notify .btn { width: 100%; justify-content: center; }
.tier__notify .form-msg { font-size: 0.78rem; }
/* on the cream bands the field has to flip with the panel */
.section-light .tier__notify input[type="email"],
.bundle-card .tier__notify input[type="email"] {
  color: var(--lt-hi);
  background: #fff;
  border-color: var(--lt-line-strong);
}
.section-light .tier__notify input[type="email"]::placeholder { color: var(--lt-low); }
.section-light .tier__notify input[type="email"]:focus {
  border-color: var(--navy-brand);
  box-shadow: 0 0 0 3px rgba(2, 1, 137, 0.12);
}

/* the same booking on its own page: deliberately quiet, so it reads as
   an alternative route rather than a competing call to action */
.tier__alt { text-align: center; margin-top: var(--s2); font-size: 0.78rem; }
.tier__alt a {
  color: var(--text-low);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color var(--fast) var(--ease-out);
}
.tier__alt a:hover { color: var(--gold); text-decoration-color: currentColor; }

/* ---------- Risk reversal ----------
   With no testimonials yet, this line is doing the job proof normally
   does, so it sits directly above the CTA rather than down in an FAQ:
   the risk is answered in the breath before the ask, and the button and
   its meta line are left to close the card in line with its neighbours.
   The gold rule is a margin mark: the same document vocabulary as the
   audit card and the polaroid, not a badge. Gold is used for the rule
   only, never the text: --gold is 1.4:1 on the light card and unreadable
   as copy, which is what --gold-ink exists for elsewhere. */
.tier__guarantee {
  margin-bottom: var(--s4);
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 2px solid var(--gold);
  text-align: left;
}
.tier__guarantee b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: 0.35rem;
}
.tier__guarantee span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-mid);
}

/* ---------- The upgrade tier ----------
   A tear-off rather than a fourth card: the grid is three columns and a
   fourth would crowd it, and the upgrade does its selling at the moment
   of the decision anyway: beside the button, not across the page. The
   dashed rule is a perforation, which is why it is dashed. */
.tier__upgrade {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
  text-align: left;
}
.tier__upgrade-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 0.4rem;
}
.tier__upgrade-name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-hi);
}
.tier__upgrade-price {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
}
.tier__upgrade p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
}
.tier__upgrade-why {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* budget & alternative paths under the ladder */
.tiers__paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}

/* ---------- Session upsell (product pages: buy vs. included-free) ---------- */
.session-upsell {
  margin-top: var(--s4);
  max-width: 620px;
  background: var(--surface);
  border: 1px solid rgba(246, 197, 19, 0.28);
  border-radius: var(--r-md);
  padding: var(--s4);
}
.session-upsell__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s2);
}
.session-upsell p { color: var(--text-mid); font-size: 0.9rem; }
.session-upsell p strong { color: var(--text-hi); }
.session-upsell__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.session-upsell__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lifted light panel (brand pattern) ---------- */
.section-light {
  background: var(--cream);
  position: relative;
  z-index: 2;
  margin-top: -48px;
  padding-top: calc(var(--s8) + 48px);
  border-radius: 48px 48px 0 0;
  box-shadow: 0 -40px 80px -30px rgba(2, 3, 15, 0.55);
}
.section-light .section-title { color: var(--lt-hi); }
.section-light .section-sub { color: var(--lt-mid); }

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s7);
  align-items: center;
}
.about__media { position: relative; }
.about__photo {
  position: relative;
  background: var(--paper);
  padding: 12px 12px 0;
  border-radius: var(--r-md);
  box-shadow: 0 30px 60px -28px rgba(11, 17, 66, 0.45);
  transform: rotate(-1.2deg);
}
.about__photo img {
  width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.about__photo-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.about__copy p { margin-bottom: var(--s3); color: var(--lt-mid); }
.about__copy .section-title { margin-bottom: var(--s4); }

.about__creds {
  margin-top: var(--s4);
  border-top: 1px solid var(--lt-line-strong);
}
.about__creds li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--lt-line);
  font-size: 0.92rem;
  color: var(--lt-hi);
  font-weight: 500;
}
.about__creds li::before {
  content: attr(data-ref);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--navy-brand);
  flex-shrink: 0;
  min-width: 3.6em;
}
.about__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.about__langs li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lt-mid);
  border: 1px solid var(--lt-line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}
.about__more { margin-top: var(--s5); }

/* ---------- Process (the audit, step by step) ---------- */
.process { background: var(--ink); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  counter-reset: step;
  position: relative;
  z-index: 1;
}
.step {
  position: relative;
  padding-top: var(--s4);
  border-top: 1px solid var(--line-strong);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: -0.85em;
  left: 0;
  background: var(--ink);
  padding-right: 0.7em;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.step h3 { font-size: 1.22rem; font-weight: 700; margin-bottom: var(--s2); }
.step p { color: var(--text-mid); font-size: 0.93rem; }
.step__meta {
  display: inline-block;
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-low);
}
.process__cta {
  margin-top: var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.process__cta-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-low);
}
.process__cta-note a { color: var(--gold); }
.section-light .process__cta-note a { color: var(--navy-brand); }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--ink-2); }
.testimonial-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  transition: border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.testimonial-card:hover { border-color: var(--line-strong); transform: translateY(-4px); }

.testimonial-card__stars {
  display: flex;
  gap: 4px;
  color: var(--gold);
  margin-bottom: var(--s3);
}
.testimonial-card__stars svg { width: 15px; height: 15px; }
.section-light .testimonial-card__stars { color: var(--gold-deep); }

.testimonial-card__delta {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  margin-bottom: var(--s3);
}
.testimonial-card blockquote {
  margin: 0 0 var(--s4);
  color: var(--text-hi);
  font-size: 0.97rem;
  line-height: 1.65;
  flex-grow: 1;
}
.testimonial-card blockquote::before { content: "“"; color: var(--gold); }
.testimonial-card blockquote::after { content: "”"; color: var(--gold); }
.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
}
.testimonial-card__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.testimonial-card__who { display: flex; flex-direction: column; }
.testimonial-card__name { font-weight: 600; font-size: 0.9rem; color: var(--text-hi); }
.testimonial-card__meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-low);
}
.testimonials__cta { text-align: center; }

/* ---------- Free content ---------- */
.content-section { background: var(--ink); }
.content__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 90% at 8% 0%, rgba(2, 1, 137, 0.55), transparent 55%),
    var(--surface);
  padding: var(--s5);
  overflow: hidden;
  transition: border-color var(--base) var(--ease-out);
}
.content__feature:hover { border-color: var(--line-strong); }
.content__feature-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--gold);
  color: #0a0d1f;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 44px -12px rgba(246, 197, 19, 0.5);
  transition: transform var(--base) var(--ease-out);
}
.content__feature:hover .content__feature-play { transform: translate(-50%, -60%) scale(1.08); }
.content__feature-play svg { width: 26px; height: 26px; margin-left: 3px; }
.content__feature-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(4, 6, 15, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  margin-bottom: var(--s3);
  backdrop-filter: blur(6px);
}
.content__feature h3 { font-size: 1.5rem; font-weight: 700; max-width: 22ch; }
.content__feature p { color: var(--text-mid); font-size: 0.9rem; margin-top: var(--s2); max-width: 46ch; }

/* now only used by the two path cards under the pricing tiers */
.content__card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  transition: border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.content__card:hover { border-color: var(--line-strong); transform: translateX(4px); }
.content__card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold);
  flex-shrink: 0;
}
.content__card-icon svg { width: 19px; height: 19px; }
.content__card-copy strong { display: block; font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; color: var(--text-hi); }
.content__card-copy span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
}
.content__card-arrow { margin-left: auto; color: var(--text-low); flex-shrink: 0; transition: color var(--fast), transform var(--fast); }
.content__card:hover .content__card-arrow { color: var(--gold); transform: translateX(3px); }
.content__card-arrow svg { width: 16px; height: 16px; }

/* ---------- Lead magnet (paper checklist) ---------- */
.resource__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s7);
  align-items: center;
}
.paper-doc {
  position: relative;
  max-width: 400px;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: 0 34px 64px -30px rgba(11, 17, 66, 0.45);
  transform: rotate(-1.6deg);
  transition: transform var(--base) var(--ease-out);
}
.paper-doc:hover { transform: rotate(-0.4deg) translateY(-4px); }
.paper-doc::before {
  content: "";
  position: absolute;
  inset: 9px -7px -9px 7px;
  background: var(--paper-shade);
  border-radius: var(--r-md);
  z-index: -1;
  transform: rotate(1.4deg);
}
.paper-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.paper-doc__head span:last-child { color: var(--paper-muted); font-weight: 400; }
.paper-doc__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s3);
}
.paper-doc__list { display: flex; flex-direction: column; }
.paper-doc__list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.9rem;
  border-bottom: 1px dashed var(--paper-line);
  font-size: 0.85rem;
  color: var(--lt-mid);
}
.paper-doc__list li:last-child { border-bottom: none; }
.paper-doc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.78em;
  width: 13px; height: 13px;
  border: 1.5px solid var(--navy-brand);
  border-radius: 3px;
  opacity: 0.7;
}
.paper-doc__list li.is-ticked::before { background: var(--navy-brand); opacity: 1; }
.paper-doc__list li.is-ticked::after {
  content: "";
  position: absolute;
  left: 4px; top: 0.92em;
  width: 6px; height: 3px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
}
.paper-doc__foot {
  margin-top: var(--s3);
  font-family: var(--font-pen);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold-deep);
  text-align: right;
}

/* ---------- Delivery notes (thank-you instant downloads) ---------- */
.delivery { padding: 0 0 var(--s7); }
.delivery__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
}
.delivery__status {
  max-width: 560px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-mid);
}
.delivery__docs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s5);
}
.delivery__doc { width: min(400px, 100%); }
.delivery__doc:nth-child(even) { transform: rotate(1.1deg); }
.delivery__doc:nth-child(even):hover { transform: rotate(0.3deg) translateY(-4px); }
.delivery__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  color: var(--navy-brand);
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}
.delivery__link:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.delivery__arrow {
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.delivery__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--s4);
}

/* ---------- Product landing pages ---------- */
.landing-hero { position: relative; padding: calc(74px + var(--s7)) 0 var(--s7); overflow: hidden; }
.landing-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s6);
  align-items: center;
}
.landing-hero__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: var(--s4) 0;
  font-family: var(--font-mono);
}
.landing-hero__price { font-size: 2rem; font-weight: 600; color: var(--gold); }
.landing-hero__price-note { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-mid); text-transform: uppercase; }
.landing-hero__ctas { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.landing-hero__session { font-size: 0.85rem; color: var(--text-mid); }
.landing-hero__session a { color: var(--gold); font-weight: 600; }
.landing-hero__session a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Browser-framed tool mockup (pure CSS/SVG: not the real file) */
.mockup {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  box-shadow: 0 40px 80px -35px rgba(11, 17, 66, 0.55);
  overflow: hidden;
  transform: rotate(1.2deg);
}
.landing-hero .mockup { animation: mock-float 7s ease-in-out infinite; }
@keyframes mock-float {
  0%, 100% { transform: rotate(1.2deg) translateY(0); }
  50% { transform: rotate(0.6deg) translateY(-10px); }
}
.mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.55rem var(--s3);
  background: var(--paper-shade);
  border-bottom: 1px solid var(--paper-line);
}
.mockup__dots { display: flex; gap: 5px; }
.mockup__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-line); }
.mockup__dots span:first-child { background: #e08a7a; }
.mockup__url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--paper-muted);
  background: var(--paper);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup__body { padding: var(--s4); }
.mockup__title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: var(--s3);
  display: flex;
  justify-content: space-between;
}
.mockup__title b { color: var(--navy-brand); }

/* mock rows (checklist / toolkit) */
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--paper-line);
  font-size: 0.78rem;
  color: var(--lt-mid, #4a4f66);
}
.mock-row:last-child { border-bottom: none; }
.mock-row__tick {
  width: 14px; height: 14px;
  border: 1.5px solid var(--navy-brand);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  opacity: 0.75;
}
.is-visible .mock-row.is-done .mock-row__tick { background: var(--navy-brand); opacity: 1; transition: background 0.3s ease 0.5s; }
.mock-row.is-done .mock-row__tick::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg) scale(0);
}
.is-visible .mock-row.is-done .mock-row__tick::after { transform: rotate(-45deg) scale(1); transition: transform 0.25s ease 0.65s; }
.mock-row__chip {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.14rem 0.5rem;
  border-radius: 99px;
  background: rgba(2, 1, 137, 0.08);
  color: var(--navy-brand);
  white-space: nowrap;
}
.mock-row__chip--warn { background: rgba(224, 138, 122, 0.18); color: #a43737; }

/* mock bars (planner / budget) */
.mock-bar { margin: 0.75rem 0; }
.mock-bar__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--paper-muted);
  margin-bottom: 0.3rem;
}
.mock-bar__track { height: 10px; border-radius: 99px; background: var(--paper-shade); overflow: hidden; }
.mock-bar__fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--navy-brand);
  transition: width 1.1s var(--ease-out) 0.4s;
}
.mock-bar__fill--gold { background: var(--gold); }
.is-visible .mock-bar__fill { width: var(--w, 60%); }

/* mock ring (savings goals) */
.mock-rings { display: flex; gap: var(--s4); align-items: center; justify-content: space-around; padding: var(--s2) 0; }
.mock-ring { text-align: center; }
.mock-ring svg { width: 86px; height: 86px; transform: rotate(-90deg); }
.mock-ring circle { fill: none; stroke-width: 8; }
.mock-ring circle.bg { stroke: var(--paper-shade); }
.mock-ring circle.val { stroke: var(--navy-brand); stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.3s var(--ease-out) 0.4s; }
.mock-ring--gold circle.val { stroke: var(--gold-deep, #b8930d); }
.is-visible .mock-ring circle.val { stroke-dashoffset: var(--o, 66); }
.mock-ring figcaption { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--paper-muted); margin-top: 0.4rem; text-transform: uppercase; }

/* mock stat tiles (dashboard) */
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s3); }
.mock-tile { background: var(--paper-shade); border-radius: 8px; padding: 0.6rem 0.7rem; }
.mock-tile b { display: block; font-family: var(--font-mono); font-size: 0.92rem; color: var(--navy-brand); }
.mock-tile span { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); }

/* mock letter (dispute templates) */
.mock-letter { font-size: 0.72rem; line-height: 1.7; color: var(--lt-mid, #4a4f66); position: relative; }
.mock-letter p { margin-bottom: 0.6rem; }
.mock-letter .redact {
  background: rgba(2, 1, 137, 0.14);
  color: transparent;
  border-radius: 3px;
  user-select: none;
}
.mock-letter__stamp {
  position: absolute;
  right: 0; bottom: -4px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-brand);
  border: 1.5px solid var(--navy-brand);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  transform: rotate(-7deg);
  opacity: 0.85;
}

/* pain points */
.pains { padding: var(--s7) 0; }
.pains__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
.pain-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: var(--s4);
  background: rgba(255, 255, 255, 0.02);
}
.pain-card__ref {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e08a7a;
  display: block;
  margin-bottom: var(--s2);
}
.pain-card h3 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: var(--s2); }
.pain-card p { font-size: 0.88rem; color: var(--text-mid); }

/* inside / steps */
.inside { padding: var(--s7) 0; }
.inside__layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s6); align-items: start; }
.inside__list { display: flex; flex-direction: column; margin-top: var(--s4); }
.inside__list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 2rem;
  border-bottom: 1px solid rgba(4, 6, 15, 0.08);
  font-size: 0.92rem;
  color: var(--lt-mid, #4a4f66);
}
.inside__list li strong { color: var(--lt-ink, #10142e); }
.inside__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95em;
  width: 14px; height: 14px;
  border: 1.5px solid var(--navy-brand);
  border-radius: 4px;
  background: var(--navy-brand);
}
.inside__list li::after {
  content: "";
  position: absolute;
  left: 3.5px; top: calc(0.95em + 3.5px);
  width: 6px; height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.inside__steps { counter-reset: insidestep; display: flex; flex-direction: column; gap: var(--s4); }
.inside__step { counter-increment: insidestep; position: relative; padding-left: 3.2rem; }
.inside__step::before {
  content: "0" counter(insidestep);
  position: absolute;
  left: 0; top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-brand);
  border: 1px solid rgba(2, 1, 137, 0.35);
  border-radius: 8px;
  padding: 0.3rem 0.45rem;
}
.inside__step h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.3rem; color: var(--lt-ink, #10142e); }
.inside__step p { font-size: 0.88rem; color: var(--lt-mid, #4a4f66); }

/* preview band */
.preview { padding: var(--s7) 0; }
.preview__caption {
  text-align: center;
  font-family: var(--font-pen);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gold);
  margin-top: var(--s4);
}
.preview .mockup { max-width: 560px; margin: var(--s5) auto 0; transform: rotate(-0.8deg); }

@media (max-width: 1024px) {
  .landing-hero__inner { grid-template-columns: 1fr; }
  .pains__grid { grid-template-columns: 1fr; }
  .inside__layout { grid-template-columns: 1fr; }
}

/* ---------- Native free tools ---------- */
.tool { padding-bottom: var(--s8); }
.tool__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s5);
  align-items: start;
}

.calc-card {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: 0 30px 60px -30px rgba(11, 17, 66, 0.45);
}
.calc-card > h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--s4);
}
.calc-field { margin-bottom: var(--s4); }
.calc-field:last-child { margin-bottom: 0; }
.calc-field__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 0.55rem;
}
.calc-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.calc-input:focus-within { outline: 2px solid var(--navy-brand); outline-offset: 1px; }
.calc-input span {
  display: flex;
  align-items: center;
  padding: 0 0.7rem;
  background: var(--paper-shade);
  border-right: 1px solid var(--paper-line);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper-muted);
}
.calc-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--paper-ink);
  background: transparent;
}
.calc-input input:focus { outline: none; }

input[type="range"].calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin-top: 0.8rem;
  border-radius: 99px;
  background: linear-gradient(to right, var(--navy-brand) var(--fill, 40%), var(--paper-line) var(--fill, 40%));
}
input[type="range"].calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--navy-brand);
  cursor: grab;
}
input[type="range"].calc-slider::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--navy-brand);
  cursor: grab;
}
.calc-range-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--paper-muted);
  margin-top: 0.3rem;
}

.seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.seg button {
  appearance: none;
  border: 1px solid var(--paper-line);
  background: #fff;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--paper-ink);
  cursor: pointer;
}
.seg button.is-active { background: var(--navy-brand); border-color: var(--navy-brand); color: #fff; }

/* results column */
.calc-verdict {
  background: var(--navy-brand);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--s5);
  margin-bottom: var(--s4);
  box-shadow: 0 30px 60px -30px rgba(2, 1, 137, 0.55);
}
.calc-verdict__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.4rem;
}
.calc-verdict__value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.calc-verdict__value small { font-size: 0.45em; font-weight: 700; opacity: 0.85; }
.calc-verdict__band { font-family: var(--font-pen); font-style: italic; font-size: 1.25rem; color: var(--gold); margin-top: 0.5rem; }
.calc-verdict__note { font-size: 0.88rem; opacity: 0.85; margin-top: var(--s3); line-height: 1.6; }

.calc-scale { margin: var(--s4) 0; }
.calc-scale__bar {
  position: relative;
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: visible;
}
.calc-scale__seg { height: 100%; }
.calc-scale__seg:first-child { border-radius: 99px 0 0 99px; }
.calc-scale__seg:last-child { border-radius: 0 99px 99px 0; }
.calc-scale__marker {
  position: absolute;
  top: -7px;
  width: 4px; height: 26px;
  border-radius: 3px;
  background: var(--ink, #04060F);
  border: 1px solid #fff;
  transform: translateX(-50%);
  transition: left 0.35s var(--ease-out);
}
.calc-scale__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--lt-mid);
  margin-top: 0.45rem;
}
.calc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.calc-tile {
  background: var(--paper);
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  box-shadow: 0 18px 36px -24px rgba(11, 17, 66, 0.4);
}
.calc-tile b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy-brand);
}
.calc-tile span {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lt-mid);
}

/* edition tabs (rights guide) */
.edition-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: var(--s5); }
.edition-tabs button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--text-mid);
  border-radius: 99px;
  padding: 0.5rem 1.4rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out),
              border-color var(--fast) var(--ease-out),
              color var(--fast) var(--ease-out);
}
.edition-tabs button.is-active { background: var(--gold); border-color: var(--gold); color: #10142e; }
.section-light .edition-tabs button { border-color: var(--lt-line-strong); color: var(--lt-mid); }
.section-light .edition-tabs button.is-active { background: var(--navy-brand); border-color: var(--navy-brand); color: #fff; }

/* ---------- Know your rights: the statute list ----------
   Read top to bottom, one right per row, statute in the margin like a
   reference book: rather than a grid of boxes, which makes the eye
   choose a path and re-find its place after every card. */
.rights-list {
  max-width: 940px;
  margin: var(--s5) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: rights;
  border-top: 1px solid var(--lt-line);
}
/* .rights-list sets a display, which would beat the [hidden] rule the UA
   stylesheet provides: author styles win over UA styles, so the inactive
   edition has to be hidden explicitly or both render at once. */
.rights-list[hidden] { display: none; }

.rights-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--lt-line);
  counter-increment: rights;
}
.rights-item__ref { position: relative; }
.rights-item__ref::before {
  content: counter(rights, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy-brand);
  opacity: 0.22;
  margin-bottom: var(--s2);
}
.rights-item__law {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-brand);
  line-height: 1.5;
}
.rights-item__body h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lt-hi);
  margin-bottom: var(--s2);
  text-wrap: balance;
}
.rights-item__body p {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--lt-mid);
  max-width: 62ch;
}
.rights-item__body p strong { color: var(--lt-hi); font-weight: 600; }

/* =========================================================
   Zero-based budget tracker: free tool
   Three buckets (Fixed / Flexible / Future) measured against a
   chosen ratio. Bucket colours are fixed hues, not theme vars,
   so the same blue/gold/green reads in light and dark mode.
   ========================================================= */
.zbb { --zbb-fixed: #4b5dd8; --zbb-flex: #d9a800; --zbb-future: #3e9c6e; }

.zbb-setup {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s4);
  align-items: stretch;
  margin-bottom: var(--s4);
}
.zbb-ratios { display: flex; flex-direction: column; gap: 0.5rem; }
.zbb-ratios > .calc-field__label { margin-bottom: 0; }
.zbb-ratio-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.zbb-ratio {
  flex: 1 1 0;
  min-width: 128px;
  appearance: none;
  text-align: left;
  border: 1px solid var(--paper-line);
  background: #fff;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--paper-ink);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.zbb-ratio:hover { border-color: var(--navy-brand); }
.zbb-ratio b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.zbb-ratio span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--paper-muted);
}
.zbb-ratio.is-active { background: var(--navy-brand); border-color: var(--navy-brand); color: #fff; }
.zbb-ratio.is-active span { color: rgba(255, 255, 255, 0.78); }

/* the three buckets */
.zbb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.zbb-cat {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s4);
  border-top: 3px solid var(--zbb-accent, var(--navy-brand));
  box-shadow: 0 24px 48px -28px rgba(11, 17, 66, 0.4);
}
.zbb-cat--fixed  { --zbb-accent: var(--zbb-fixed); }
.zbb-cat--flex   { --zbb-accent: var(--zbb-flex); }
.zbb-cat--future { --zbb-accent: var(--zbb-future); }

.zbb-cat__head { margin-bottom: var(--s3); }
.zbb-cat__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.zbb-cat__name em { font-style: normal; color: var(--zbb-accent); }
.zbb-cat__hint { font-size: 0.78rem; line-height: 1.5; color: var(--paper-muted); }
.zbb-cat__target {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px dashed var(--paper-line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.zbb-cat__target b { font-size: 0.92rem; color: var(--zbb-accent); letter-spacing: -0.01em; }

.zbb-rows { display: flex; flex-direction: column; gap: 0.4rem; margin: var(--s3) 0; }
.zbb-row { display: grid; grid-template-columns: minmax(0, 1fr) 58px 92px 24px; gap: 0.35rem; align-items: center; }
.zbb-row__name,
.zbb-row__due,
.zbb-row__amt input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--paper-line);
  border-radius: 7px;
  padding: 0.42rem 0.55rem;
  font: inherit;
  font-size: 0.83rem;
  color: var(--paper-ink);
  background: #fff;
}
.zbb-row__name:focus,
.zbb-row__due:focus,
.zbb-row__amt input:focus { outline: 2px solid var(--navy-brand); outline-offset: 1px; }
/* the due day: a quiet field, since it never changes a total */
.zbb-row__due {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: center;
  color: var(--paper-muted);
}
.zbb-row__due:not(:placeholder-shown) { color: var(--paper-ink); font-weight: 600; }
.zbb-row__due::-webkit-outer-spin-button,
.zbb-row__due::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zbb-row__due { -moz-appearance: textfield; appearance: textfield; }
.zbb-row__amt { position: relative; display: flex; align-items: center; }
.zbb-row__amt::before {
  content: "£";
  position: absolute;
  left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--paper-muted);
  pointer-events: none;
}
.zbb-row__amt input {
  padding-left: 1.35rem;
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: right;
}
/* number inputs: drop the spinners, they crowd a 92px field */
.zbb-row__amt input::-webkit-outer-spin-button,
.zbb-row__amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zbb-row__amt input { -moz-appearance: textfield; appearance: textfield; }

.zbb-row__del {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--paper-muted);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.2rem;
  border-radius: 5px;
  cursor: pointer;
}
.zbb-row__del:hover { color: #a43737; background: rgba(164, 55, 55, 0.1); }
/* four fields on a narrow phone: give the name back what the due day and
   the amount can spare, so "What is it?" stays typeable */
@media (max-width: 480px) {
  .zbb-row { grid-template-columns: minmax(0, 1fr) 46px 78px 22px; gap: 0.25rem; }
  .zbb-row__due { font-size: 0.72rem; padding-left: 0.2rem; padding-right: 0.2rem; }
}

.zbb-add {
  appearance: none;
  align-self: flex-start;
  border: 1px dashed var(--paper-line);
  background: transparent;
  border-radius: 7px;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy-brand);
  cursor: pointer;
}
.zbb-add:hover { border-color: var(--navy-brand); background: rgba(2, 1, 137, 0.05); }

.zbb-cat__foot { margin-top: auto; padding-top: var(--s3); }
.zbb-cat__bar {
  height: 6px;
  border-radius: 99px;
  background: var(--paper-shade);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.zbb-cat__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--zbb-accent);
  transition: width 0.3s var(--ease-out);
}
.zbb-cat__fill.is-over { background: #a43737; }
.zbb-cat__sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--paper-muted);
}
.zbb-cat__sum b { font-size: 0.98rem; color: var(--paper-ink); }
.zbb-flag { font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.zbb-flag.is-over  { color: #a43737; }
.zbb-flag.is-under { color: #2f7d57; }
.zbb-flag.is-on    { color: var(--navy-brand); }

/* verdict + split bar */
.zbb-verdict__value.is-good { color: var(--gold); }
.zbb-split { margin: var(--s4) 0 0; }
.zbb-split__bar {
  display: flex;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.zbb-split__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #10142e;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.35s var(--ease-out);
}
.zbb-split__seg--fixed  { background: var(--zbb-fixed); color: #fff; }
.zbb-split__seg--flex   { background: var(--zbb-flex); }
.zbb-split__seg--future { background: var(--zbb-future); color: #fff; }
.zbb-split__seg--left   { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 6px, rgba(255,255,255,0.06) 6px 12px); color: #fff; }
.zbb-split__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.zbb-split__key li { display: flex; align-items: center; gap: 0.4rem; }
.zbb-split__dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

.zbb-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }
/* :not(.btn) so the primary "Save as PDF" button keeps its own styling */
.zbb-actions button:not(.btn) {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-mid);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.zbb-actions button:hover { color: var(--gold); border-color: var(--gold); }
.section-light .zbb-actions button { border-color: var(--lt-line-strong); color: var(--lt-mid); }
.section-light .zbb-actions button:hover { color: var(--navy-brand); border-color: var(--navy-brand); }

@media (max-width: 900px) {
  .zbb-setup { grid-template-columns: 1fr; }
  .zbb-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Snowball vs Avalanche: native explainer sections
   Method colour-coding carried over from the product template:
   snowball green #639922, avalanche navy, amber cautions.
   ========================================================= */
.sv-methods { padding: var(--s2) 0 var(--s8); }
.sv-lead {
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.7;
  color: var(--text-mid);
}
.sv-lead strong { color: var(--text-hi); }
.sv-lead .pen { font-size: 1.12em; }

.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.sv-card {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  border-top: 4px solid #639922;
  padding: var(--s5);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.sv-card:hover { transform: translateY(-4px); box-shadow: 0 38px 72px -30px rgba(0, 0, 0, 0.72); }
.sv-card--ava { border-top-color: var(--navy-brand); }
.sv-card__head { display: flex; align-items: center; gap: 12px; }
.sv-card__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.sv-card--snow .sv-card__icon { background: rgba(99, 153, 34, 0.14); color: #41691a; }
.sv-card--ava .sv-card__icon { background: rgba(2, 1, 137, 0.1); color: var(--navy-brand); }
.sv-card__head h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #0b1142; }
.sv-card__method { font-size: 0.78rem; font-weight: 600; }
.sv-card--snow .sv-card__method { color: #41691a; }
.sv-card--ava .sv-card__method { color: var(--navy-brand); }
.sv-card > p { font-size: 0.95rem; line-height: 1.65; color: #3a4360; margin-top: var(--s4); }
.sv-card > p strong { color: #0b1142; }
.sv-points { margin-top: var(--s4); display: flex; flex-direction: column; gap: 0.55rem; list-style: none; }
.sv-points li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.88rem; color: #3a4360; line-height: 1.55; }
.sv-points li strong { color: #0b1142; }
.sv-points li::before { font-weight: 800; flex: 0 0 auto; }
.sv-points li.plus::before { content: "+"; color: #41691a; }
.sv-points li.minus::before { content: "\2212"; color: #ba7517; }

/* payoff race: the same three debts, cleared in each method's order */
.sv-race-sec { padding: var(--s8) 0; }
.sv-race { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.sv-panel {
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(11, 17, 66, 0.35);
}
.sv-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 0.95rem 1.3rem;
  color: #fff;
}
.sv-panel__head b { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.sv-panel__head span {
  font-family: var(--font-mono);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.85; text-align: right;
}
.sv-panel--snow .sv-panel__head { background: #639922; }
.sv-panel--ava .sv-panel__head { background: var(--navy-brand); }
.sv-panel ol { list-style: none; }
.sv-row { padding: 1.05rem 1.3rem 1.1rem; border-bottom: 1px solid rgba(11, 17, 66, 0.07); }
.sv-row:last-child { border-bottom: none; }
.sv-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.sv-row__name {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--lt-hi);
}
.sv-row__num {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; color: #fff;
}
.sv-panel--snow .sv-row__num { background: #639922; }
.sv-panel--ava .sv-row__num { background: var(--navy-brand); }
.sv-row__meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; color: var(--lt-low); white-space: nowrap; }
.sv-row__track { margin-top: 0.6rem; height: 7px; border-radius: 99px; background: rgba(11, 17, 66, 0.08); overflow: hidden; }
.sv-row__fill { display: block; height: 100%; width: 0; border-radius: inherit; }
.sv-panel--snow .sv-row__fill { background: linear-gradient(90deg, #7ab534, #639922); }
.sv-panel--ava .sv-row__fill { background: linear-gradient(90deg, #2d2cd0, var(--navy-brand)); }
.sv-row__done {
  display: inline-block; margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateY(2px);
}
.sv-panel--snow .sv-row__done { color: #41691a; }
.sv-panel--ava .sv-row__done { color: var(--navy-brand); }
.sv-race.is-visible .sv-row__fill {
  animation: svPay 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 1.3s + 0.3s);
}
.sv-race.is-visible .sv-row__done {
  animation: svDone 0.4s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 1.3s + 1.2s);
}
@keyframes svPay { to { width: 100%; } }
@keyframes svDone { to { opacity: 1; transform: none; } }

.sv-take {
  margin-top: var(--s6);
  background: #fff;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s4) var(--s5);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--lt-mid);
  box-shadow: 0 18px 40px -26px rgba(11, 17, 66, 0.3);
}
.sv-take strong { font-family: var(--font-display); color: var(--navy-brand); }

/* how to choose + anti-shame quote */
.sv-choose { padding: var(--s8) 0 var(--s7); }
.sv-choose__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s5); align-items: stretch; margin-top: var(--s6); }
.sv-choose__panel {
  list-style: none;
  background: linear-gradient(150deg, rgba(24, 26, 156, 0.85), rgba(2, 1, 105, 0.9));
  border: 1px solid rgba(75, 93, 216, 0.35);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.sv-choose__panel li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--s3); }
.sv-choose__panel li:last-child { margin-bottom: 0; }
.sv-choose__panel li::before { content: "\2192"; color: var(--gold); font-weight: 800; flex: 0 0 auto; }
.sv-choose__panel p { font-size: 0.98rem; line-height: 1.65; color: #dfe4ff; }
.sv-choose__panel p strong { color: #fff; }
.sv-quote {
  background: var(--gold);
  border-radius: var(--r-lg);
  padding: var(--s5);
  display: flex;
  align-items: center;
}
.sv-quote p {
  font-family: var(--font-pen);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: #231a02;
}
.sv-disclaimer {
  max-width: 74ch;
  margin-top: var(--s6);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--text-low);
}

@media (prefers-reduced-motion: reduce) {
  .sv-row__fill { width: 100%; animation: none !important; }
  .sv-row__done { opacity: 1; transform: none; animation: none !important; }
  .mark { background-size: 100% 0.085em !important; }
  .page-header__rule { transform: none !important; }
}

@media (max-width: 860px) {
  .tool__grid { grid-template-columns: 1fr; }
  /* statute reference moves above the text instead of beside it */
  .rights-item { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4) 0; }
  .rights-item__ref { display: flex; align-items: baseline; gap: var(--s3); }
  .rights-item__ref::before { font-size: 1.4rem; margin-bottom: 0; }
  .sv-grid, .sv-race, .sv-choose__grid { grid-template-columns: 1fr; }
  .calc-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- Member portal & auth ---------- */
.portal-wrap { padding: 0 0 var(--s8); }
.auth-card {
  max-width: 430px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: 0 34px 64px -30px rgba(11, 17, 66, 0.45);
  position: relative;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 9px -7px -9px 7px;
  background: var(--paper-shade);
  border-radius: var(--r-md);
  z-index: -1;
  transform: rotate(1.2deg);
}
.auth-card__tabs {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--paper-line);
}
.auth-card__tab {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-card__tab.is-active { color: var(--navy-brand); border-bottom-color: var(--navy-brand); }
.auth-card form { display: flex; flex-direction: column; gap: var(--s3); }
.auth-card label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--paper-ink);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.auth-card input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  color: var(--paper-ink);
}
.auth-card input:focus { outline: 2px solid var(--navy-brand); outline-offset: 1px; }
.auth-card .btn { justify-content: center; width: 100%; }

/* Lead-capture variant (free-audit.html): wider card, selects, consents */
.auth-card--wide { max-width: 640px; }
.auth-card select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  color: var(--paper-ink);
}
.auth-card select:focus { outline: 2px solid var(--navy-brand); outline-offset: 1px; }
.auth-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.auth-card__consent {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.6rem !important;
  font-weight: 400 !important;
  font-size: 0.72rem !important;
  line-height: 1.55;
  color: var(--paper-muted) !important;
}
.auth-card__consent input {
  width: auto;
  margin-top: 0.15rem;
  accent-color: var(--navy-brand);
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .auth-card__row { grid-template-columns: 1fr; }
}
.auth-card__aux {
  font-size: 0.8rem;
  color: var(--paper-muted);
  text-align: center;
  margin-top: var(--s2);
}
.auth-card__aux a, .auth-card__aux button {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--navy-brand); font: inherit; font-weight: 600;
}
.auth-msg {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--navy-brand);
  min-height: 1.2em;
}
.auth-msg.is-error { color: #a43737; }

/* ---------- Signed-in portal: light member area ---------- */
.portal-wrap--lit { background: var(--cream); padding: var(--s6) 0 var(--s8); }
.portal-wrap--lit .page-header__rule { display: none; }

.portal-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.portal-side {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.portal-side__hello { display: flex; align-items: center; gap: 12px; min-width: 0; }
.portal-side__avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--navy-brand);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  text-transform: uppercase;
}
.portal-side__hello b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--lt-hi);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.portal-side__email {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--lt-low);
  overflow-wrap: anywhere;
}
.portal-nav { display: flex; flex-direction: column; gap: 4px; }
.portal-nav__item {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lt-mid);
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.portal-nav__item:hover { background: var(--cream); color: var(--lt-hi); }
.portal-nav__item.is-active { background: var(--navy-brand); color: #fff; }
.portal-side__signout {
  appearance: none;
  background: none;
  border: 1px solid var(--lt-line-strong);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lt-mid);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.portal-side__signout:hover { border-color: var(--navy-brand); color: var(--navy-brand); }

.portal-panel {
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: var(--r-md);
  padding: var(--s5);
  min-height: 320px;
}
.portal-panel > h2 { font-family: var(--font-display); font-size: 1.3rem; color: var(--lt-hi); margin-bottom: var(--s2); }
.portal-panel__sub { font-size: 0.88rem; color: var(--lt-mid); line-height: 1.6; margin-bottom: var(--s4); max-width: 62ch; }

.portal-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--s4); }
.portal-tool {
  background: var(--cream);
  border: 1px solid rgba(11, 17, 66, 0.07);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.portal-tool__head { display: flex; align-items: center; gap: 12px; }
.portal-tool__chip {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--navy-brand);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
}
.portal-tool h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--lt-hi); }
.portal-tool__desc { font-size: 0.82rem; color: var(--lt-mid); line-height: 1.55; }
.portal-tool__files { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.portal-tool__file {
  appearance: none;
  border: none;
  background: var(--navy-brand);
  color: #fff;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  text-align: left;
  transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.portal-tool__file:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(2, 1, 137, 0.55); }
.portal-tool__file--pdf { background: #fff; color: var(--navy-brand); border: 1px solid var(--lt-line-strong); }
.portal-tool__file--pdf:hover { box-shadow: none; border-color: var(--navy-brand); }

.portal-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.portal-table th {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-low);
  text-align: left;
  padding: 0 var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--lt-line-strong);
}
.portal-table td {
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--lt-line);
  color: var(--lt-mid);
  vertical-align: top;
}
.portal-table td:first-child { font-family: var(--font-mono); font-size: 0.76rem; white-space: nowrap; }
.portal-table a { color: var(--navy-brand); font-weight: 600; }
.portal-table a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Highlight card: used by the toolkits waiting list */
.member-card { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.member-card__status {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--lt-mid);
}
.member-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2c5a13;
  background: rgba(99, 153, 34, 0.16);
  border-radius: 99px;
  padding: 0.3rem 0.75rem;
}
.member-chip--off { color: var(--lt-mid); background: rgba(11, 17, 66, 0.08); }
.member-card__pitch { font-size: 0.92rem; line-height: 1.65; color: var(--lt-mid); max-width: 58ch; }
.member-card__qa {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--lt-hi);
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: var(--s3) var(--s4);
}
.member-card__perks { display: flex; flex-direction: column; gap: 0.45rem; }
.member-card__perks li {
  display: flex;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--lt-mid);
}
.member-card__perks li::before { content: "→"; color: var(--navy-brand); font-weight: 800; flex: 0 0 auto; }
.member-card__privacy {
  background: var(--cream);
  border: 1px solid rgba(11, 17, 66, 0.07);
  border-radius: var(--r-md);
  padding: var(--s4);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--lt-mid);
}
.member-card__privacy b { color: var(--lt-hi); }
.member-card__privacy ul { margin-top: var(--s2); display: flex; flex-direction: column; gap: 0.4rem; }
.member-card__privacy li { padding-left: 1em; position: relative; }
.member-card__privacy li::before { content: "•"; position: absolute; left: 0; color: var(--navy-brand); }
.member-card__manage {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-brand);
  cursor: pointer;
}
.member-card__manage:hover { text-decoration: underline; text-underline-offset: 3px; }
.member-card__small { font-size: 0.72rem; color: var(--lt-low); }

@media (max-width: 860px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-side { position: static; }
  .portal-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .portal-nav__item { white-space: nowrap; }
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--ink, #04060F);
  display: flex;
  flex-direction: column;
}
.viewer[hidden] { display: none; }
.viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0.6rem var(--s4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.viewer__title { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-mid); }
.viewer__close {
  appearance: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.viewer__close:hover { border-color: var(--gold); color: var(--gold); }

/* Bundle tab bar: lives in the viewer chrome so it never reloads on a
   switch (no flash, instant highlight) and looks identical for every
   tool. Styled to match the tools' own dark tab row. */
.viewer__tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #05081a;
  padding: 10px 20px 0;
  border-bottom: 2px solid var(--gold);
}
.viewer__tabs::-webkit-scrollbar { display: none; }
.viewer__tabs[hidden] { display: none; }
.viewer__tab {
  appearance: none;
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1.2;
  padding: 0.7rem 1rem;
  border-radius: 11px 11px 0 0;
  white-space: nowrap;
  background: transparent;
  color: #aab2d6;
  transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.viewer__tab:hover { color: #fff; }
.viewer__tab.is-active { background: #f7f5ef; color: var(--navy-brand); }

.viewer__stage { position: relative; flex: 1; min-height: 0; background: #05081a; }
.viewer__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05081a;
}
.viewer__frame[hidden] { display: none; }

.resource__copy .section-sub { margin-bottom: var(--s5); }

/* ---------- Forms ---------- */
.resource__form, .newsletter__form {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}
.resource__form input, .newsletter__form input {
  flex: 1 1 230px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--r-md);
  padding: 0.95rem 1.25rem;
  color: var(--lt-hi);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.resource__form input::placeholder, .newsletter__form input::placeholder { color: var(--lt-low); }
.resource__form input:focus, .newsletter__form input:focus {
  outline: none;
  border-color: var(--navy-brand);
  box-shadow: 0 0 0 3px rgba(2, 1, 137, 0.12);
}
.form-note {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--lt-low);
}

/* dark-section form variant */
.form--dark input {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text-hi);
}
.form--dark input::placeholder { color: var(--text-low); }
.form--dark input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246,197,19,0.14); }
.form--dark + .form-note, .form-note--dark { color: var(--text-low); }

/* Newsletter band */
.newsletter { padding: var(--s8) 0; }
.newsletter__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s6);
  align-items: center;
}
/* Substack's own embed, in place of a field that only ever handed the
   address over anyway. The iframe ships with width/height attributes;
   these override the width so it shrinks with the panel, and keep the
   height fixed because the embed does not report its own and would
   otherwise collapse. Nothing paints a background: the embed is loaded
   with transparent=1 so the band shows through it. */
/* Same device as the note on the hero's audit card: a drawn arrow and a
   line of pen script pointing at the thing it wants you to use. It stands
   in for a paragraph that described the newsletter a second time ,
   Substack's embed arrives carrying its own description, so the page was
   saying it twice. */
.newsletter__nudge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* pushed to the end of its column: an arrow reads as pointing at
     something when it is near the thing, and the embed is immediately
     to its right */
  width: fit-content;
  margin: var(--s4) 0 0 auto;
  font-family: var(--font-pen);
  font-style: italic;
  font-size: 1.24rem;
  color: var(--gold);
}
.newsletter__nudge svg { width: 30px; height: 30px; flex-shrink: 0; }
.newsletter__embed {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 320px;
  margin: 0 auto;
  border: 0;
  background: transparent;
  color-scheme: normal;
}
.form-success {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gold);
}
.section-light .form-success, .auth-card .form-success { color: var(--navy-brand); }
.form-msg {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-mid);
}
.form-msg.is-error { color: var(--flag); }
@media (max-width: 860px) {
  .newsletter__inner { grid-template-columns: 1fr; }
  /* one column, so the embed is below rather than beside: the arrow
     points down at it instead of across, and the line re-centres */
  .newsletter__nudge { margin-inline: auto; }
  .newsletter__nudge svg { transform: rotate(72deg); }
}

/* ---------- Shop ---------- */
.products { background: var(--ink-2); }
/* .products declares a dark bg later in the file than .section-light's
   cream: restate cream for the combined case (e.g. resources.html shop) */
.products.section-light { background: var(--cream); }
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s5);
  align-items: stretch;
}
/* A pair of cards in a three-column track leaves a hole on the right, and
   stretched across the full container each card ends up half again as
   wide as the type inside it wants to be. Two columns with a ceiling
   keeps them near the width the card was drawn at. Ranged left, not
   centred: the section head above it is left-aligned, and a centred pair
   under a left-aligned heading reads as a mistake. The narrow-viewport
   rules further down are declared later, so they still collapse this to
   one column on a phone. */
.products__grid--pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
}
/* Free tools and free guides are two lists on the same ink. Rather than
   strobe the page with a second background, the follow-on section pulls
   its top padding in and takes a hairline, so the break reads as a
   change of subject rather than a change of place. */
.products--continued {
  padding-top: var(--s7);
  border-top: 1px solid var(--line);
}
/* product card = a document you receive */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s5);
  transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.65);
}
.product-card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8);
}
.product-card__ref {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-muted);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--paper-ink);
}
.product-card__price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--navy-brand);
}
.product-card h3 {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
  color: var(--paper-ink);
}
.product-card p { color: var(--lt-mid); font-size: 0.88rem; margin-bottom: var(--s4); flex-grow: 1; }
.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-brand);
}
.product-card:hover .product-card__link { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards that show the tool ----------
   The old card described a calculator and asserted it was free twice, once
   in a chip and once as a price, directly under a heading that had already
   said so. This one leads with a picture of the thing running, which is the
   only claim on the page that cannot be written by anyone.

   Screenshots are real captures at a single 1.6:1 crop, in images/tools/.
   One ratio for all four matters more than perfect framing of each: four
   cards with four aspect ratios reads as broken before it reads as varied. */
.product-card--shot {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
/* One per row, full width. Two of these side by side leaves the capture
   about 200px wide, at which point the interface inside it is a grey
   smudge and the card is back to describing the tool rather than showing
   it. A wide row gives the screenshot roughly 480px, where the numbers
   are actually readable, which is the entire reason for having it. */
.products__grid--shots {
  grid-template-columns: 1fr;
  max-width: none;
  gap: var(--s4);
}
.product-card__shot {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
  background: var(--paper-shade);
}
.product-card__shot img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left top;
  transition: transform var(--slow) var(--ease-out);
}
.product-card--shot:hover .product-card__shot img { transform: scale(1.04); }
/* the capture is a light UI on a light card, so it needs an edge */
.product-card__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 1px solid var(--paper-line);
  pointer-events: none;
}
.product-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--s5);
}
.product-card--shot h3 { margin-bottom: var(--s2); }
.product-card--shot p { flex-grow: 1; }

@media (max-width: 720px) {
  .product-card--shot { flex-direction: column; }
  .product-card__shot { flex: none; aspect-ratio: 1.6 / 1; }
  .product-card__shot::after { border-right: 0; border-bottom: 1px solid var(--paper-line); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card--shot:hover .product-card__shot img { transform: none; }
}

/* ---------- The checklist, given the top of the page ----------
   It is the only resource with a real document behind it and the only one
   wired to the double opt-in, so it leads rather than sitting third in a
   list of guides. Cover left, the ask right. */
.magnet {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.7);
}
.magnet__cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px -18px rgba(11, 17, 66, 0.45);
  transform: rotate(-1.4deg);
  transition: transform var(--base) var(--ease-out);
}
.magnet:hover .magnet__cover { transform: rotate(0deg) translateY(-4px); }
/* The homepage version of the same cover. .paper-doc styled a drawn
   mockup; this is the real page, so it only needs a document's shadow. */
.paper-doc__cover {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r-sm);
  box-shadow: 0 26px 60px -22px rgba(11, 17, 66, 0.5);
  transform: rotate(-1.6deg);
  transition: transform var(--base) var(--ease-out);
}
.resource__mock:hover .paper-doc__cover { transform: rotate(0deg) translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .paper-doc__cover, .resource__mock:hover .paper-doc__cover { transform: none; }
}

.magnet__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s2);
}
.magnet h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.magnet > div > p { color: var(--lt-mid); font-size: 0.95rem; line-height: 1.65; margin-bottom: var(--s4); max-width: 52ch; }
.magnet .tier__notify { max-width: 460px; }
.magnet__micro { font-size: 0.78rem; color: var(--lt-low); margin-top: var(--s2); }

@media (max-width: 720px) {
  .magnet { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s4); }
  .magnet__cover { max-width: 220px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .magnet__cover, .magnet:hover .magnet__cover { transform: none; }
}

/* Bundle band */
.bundle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--surface), rgba(2, 1, 137, 0.5) 150%);
  border: 1px solid rgba(246, 197, 19, 0.3);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s5);
}
.bundle-card__copy h3 { font-size: 1.35rem; margin: var(--s2) 0 var(--s1); color: var(--text-hi); }
.bundle-card__copy p { color: var(--text-mid); font-size: 0.92rem; max-width: 48ch; }
.bundle-card__save {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.bundle-card .btn { flex-shrink: 0; }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  margin-bottom: var(--s3);
}
.section-light .tag { background: rgba(2, 1, 137, 0.08); color: var(--navy-brand); }

/* ---------- Trust badges ---------- */
.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
}
.trust-badges li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-mid);
}
.trust-badges li svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
.section-light .trust-badges li { color: var(--lt-mid); }
.section-light .trust-badges li svg { color: var(--navy-brand); }

/* ---------- FAQ ---------- */
.faq__list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line-strong);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-hi);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) 0;
  transition: color var(--fast) var(--ease-out);
}
.faq__item summary:hover { color: var(--gold); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 0 var(--s4); color: var(--text-mid); font-size: 0.95rem; max-width: 62ch; }

.section-light .faq__list { border-top-color: var(--lt-line-strong); }
.section-light .faq__item { border-bottom-color: var(--lt-line); }
.section-light .faq__item summary { color: var(--lt-hi); }
.section-light .faq__item summary:hover { color: var(--navy-brand); }
.section-light .faq__item summary::after { color: var(--navy-brand); }
.section-light .faq__item p { color: var(--lt-mid); }

/* ---------- Newsletter ---------- */
.newsletter__inner { text-align: center; }
.newsletter__form { justify-content: center; max-width: 480px; margin: 0 auto; }
.newsletter__perks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}
.newsletter__perks li {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--lt-mid);
}
.newsletter__perks li svg { width: 15px; height: 15px; color: var(--navy-brand); flex-shrink: 0; }

/* ---------- Final CTA ---------- */
/* Pinned dark in both themes, on the same terms as .section-ink: tokens
   re-declared locally and colour set, so nothing inherits a computed
   light-mode colour onto the dark band. Replaces a light-mode rule that
   forced the background dark and left the text navy. */
.final-cta {
  padding: var(--s8) 0;
  --ink: #04060f;
  --ink-2: #070d24;
  --surface: #0c1332;
  --surface-2: #111a42;
  --text-hi: #f4f6ff;
  --text-mid: #a9b1d6;
  --text-low: #7d85a9;
  --line: rgba(233, 238, 255, 0.09);
  --line-strong: rgba(233, 238, 255, 0.18);
  --gold-soft: rgba(246, 197, 19, 0.1);
  background: var(--ink);
  color: var(--text-hi);
}
.final-cta__inner {
  position: relative;
  background: linear-gradient(120deg, var(--gold), #ffdf6b);
  border-radius: var(--r-lg);
  padding: var(--s8) var(--s5);
  text-align: center;
  color: #0a0d1f;
  overflow: hidden;
}
/* The quieter sibling of .final-cta__inner, used at the foot of the tool
   pages. A full gold panel there would compete with the tool itself, so
   this is a raised surface on the same dark band rather than a shout.
   It was referenced by five pages and defined by none, which is why it
   rendered as loose text on a black field. */
.final-cta__card {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s6) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
}
.final-cta__card .eyebrow { justify-content: center; }
.final-cta__card .eyebrow::after {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
  opacity: 0.55;
  flex-shrink: 0;
}
.final-cta__card h2 {
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.14;
  color: var(--text-hi);
  margin-bottom: var(--s3);
}
.final-cta__card > p { max-width: 58ch; margin-inline: auto; color: var(--text-mid); }
.final-cta__card .btn { margin-top: var(--s5); }

.final-cta__arcs {
  position: absolute;
  right: -12%; top: -55%;
  width: 620px;
  opacity: 0.35;
  pointer-events: none;
}
.final-cta__content { position: relative; z-index: 1; }
.final-cta__title {
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.final-cta__sub {
  font-size: 1.06rem;
  margin-bottom: var(--s5);
  opacity: 0.85;
  max-width: 44ch;
  margin-inline: auto;
}
.final-cta .btn--primary { background: #0a0d1f; color: var(--gold); }
.final-cta .btn--primary::after { background: linear-gradient(100deg, transparent, rgba(246,197,19,0.35), transparent); }
.final-cta .btn--primary:hover { background: #000; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.45); }
.final-cta__micro {
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding: var(--s5) 0 var(--s4);
}
/* The tagline used to sit under the lockup with the icon row opposite it,
   which left a wide gap across the middle and a footer taller than the
   little it carries. The icons take the tagline's place, so the top of
   the footer is one short stack and the whole thing sits about 110px
   shorter without losing anything. */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding-bottom: var(--s4);
}
.footer__brand { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 700; }
.footer__brand { --lockup-mark: 19px; --lockup-word: 1.06rem; }
.footer__links { display: flex; gap: var(--s4); font-size: 0.88rem; color: var(--text-mid); flex-wrap: wrap; }
.footer__links a { transition: color var(--fast); }
.footer__links a:hover { color: var(--gold); }
.footer__socials { display: flex; gap: var(--s2); }
.footer__socials a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--text-mid);
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.footer__socials a svg { width: 16px; height: 16px; }
.footer__socials a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.footer__compliance {
  padding-bottom: var(--s3);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-low);
  text-align: center;
}
/* Gold on the lead sentence only. Six lines of it drowned the footer and
   flattened the emphasis: if all of it shouts, none of it does. The one
   line that has to land is the one saying these results are not typical,
   and that is the only <strong> in the block on every page. */
.footer__compliance strong { color: var(--gold); }
/* centred text wants a shorter measure than ranged-left: at 88ch the eye
   loses the start of the next line on every return */
.footer__compliance p { max-width: 74ch; margin-inline: auto; }
.footer__compliance p + p { margin-top: var(--s3); }
.footer__compliance a {
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--fast) var(--ease-out);
}
.footer__compliance a:hover { color: var(--gold); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-low);
}
/* Affiliate Disclosure / Privacy / Cookies. Inherits the mono type of
   the bottom bar, so it reads as fine print rather than navigation. */
.footer__legal { display: flex; gap: var(--s3); flex-wrap: wrap; }
.footer__legal a { transition: color var(--fast) var(--ease-out); }
.footer__legal a:hover { color: var(--gold); }

/* ---------- Legal pages (privacy / cookies / affiliate) ----------
   Long-form prose rather than marketing blocks: one column, measured to
   a comfortable line length, with enough air between sections that
   someone can actually find the bit they came for.

   Colours come from the --lt-* family, not --text-*: this sits on a
   .section-light cream panel, which does not re-declare the dark
   tokens. Using --text-hi here rendered near-white text on cream in
   dark mode: invisible, and only in that one combination. */
.legal {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--lt-mid);
}
.legal__lead {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--lt-hi);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--lt-line);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--lt-hi);
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}
.legal p + p { margin-top: var(--s3); }
.legal ul {
  list-style: none;
  margin-top: var(--s3);
  display: grid;
  gap: var(--s3);
}
.legal li { position: relative; padding-left: var(--s4); }
.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.legal strong { color: var(--lt-hi); }
.legal a {
  color: var(--lt-hi);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--fast) var(--ease-out);
}
.legal a:hover { color: var(--gold); }
.legal code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--lt-line);
  border-radius: 5px;
}
.legal__updated {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--lt-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--lt-low);
}

/* ---------- "Why 50/30/20 isn't a formula" (budget tracker) ----------
   The markup for this section shipped referencing .rights-card, which was
   never defined anywhere, so it rendered as raw text. Rebuilt here.

   The section opens with the comparison rather than burying it: two bars
   showing the split the rule assumes against the split a lot of UK
   households actually live on. It is the entire argument in one image,
   and it is drawn with the same three bucket colours as the tracker's own
   split bar above it, so it reads as the same object rather than an
   illustration of one. The housing segment turns red on the second row ,
   that segment is the whole problem.

   The four cards below are an argument, not a checklist: where the rule
   came from, where it breaks, what that costs you, what to do instead.
   Their labels already carry that structure, so there are no step
   numbers: the reader isn't performing steps, they're following a case. */
.why-compare { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
.why-compare__row { display: grid; gap: var(--s2); }
.why-compare__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-low);
}
.why-compare__label b { font-weight: 500; color: var(--text-hi); }
.why-compare__bar {
  display: flex;
  height: 34px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--line);
}
.why-compare__seg {
  display: grid;
  place-items: center;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}
.why-compare__seg--fixed  { background: #4b5dd8; }
.why-compare__seg--flex   { background: #d9a800; color: #1a1400; }
.why-compare__seg--future { background: #3e9c6e; }
.why-compare__row--strain .why-compare__seg--fixed { background: var(--flag); }
.why-compare__note { font-size: 0.84rem; line-height: 1.7; color: var(--text-low); max-width: 68ch; }

.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.why-card {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.why-card__role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.why-card h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.25;
  color: var(--text-hi);
}
.why-card p { font-size: 0.92rem; line-height: 1.72; color: var(--text-mid); }
.why-card strong { color: var(--text-hi); font-weight: 600; }
.why-card em { font-style: italic; color: var(--text-hi); }

/* The card goes white on paper, and gold on white is unreadable at this
   size: the site's convention for a label on a pale panel is navy ink,
   the same swap .section-light makes for .eyebrow. */
[data-theme="light"] .why-card__role { color: var(--navy-brand); }

@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card { padding: var(--s4); }
  .why-compare__seg { font-size: 0.62rem; }
}

/* ---------- Contact page ----------
   Colours come from the --lt-* family: this sits on a .section-light cream
   panel, which does not re-declare the dark tokens. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s6);
  align-items: start;
}
.contact__form { display: grid; gap: var(--s4); }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.contact__field { display: grid; gap: 0.45rem; }
.contact__field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lt-mid);
}
.contact__field label span { text-transform: none; letter-spacing: 0; color: var(--lt-low); font-weight: 400; }
.contact__field input,
.contact__field select,
.contact__field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  font: inherit;
  font-size: 0.93rem;
  color: var(--lt-hi);
  background: #fff;
  border: 1px solid var(--lt-line-strong);
  border-radius: 10px;
}
.contact__field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--navy-brand);
  box-shadow: 0 0 0 3px rgba(2, 1, 137, 0.12);
}
/* the hint only appears once a purpose is chosen, so the form does not open
   with an instruction for a question nobody has answered yet */
.contact__hint {
  max-height: 0;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--lt-mid);
  transition: max-height 220ms var(--ease-out), padding-top 220ms var(--ease-out);
}
.contact__hint.is-shown { max-height: 5rem; padding-top: 0.15rem; }
.contact__small { font-size: 0.8rem; line-height: 1.65; color: var(--lt-low); }
.contact__small a { color: var(--lt-mid); text-decoration: underline; text-underline-offset: 2px; }
.contact__small a:hover { color: var(--navy-brand); }

.contact__aside { display: grid; gap: var(--s3); align-content: start; }
.contact__card {
  padding: var(--s4);
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: var(--r-md);
}
.contact__card-tag {
  display: inline-block;
  margin-bottom: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-brand);
}
.contact__card h2 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  margin-bottom: var(--s2);
  color: var(--lt-hi);
}
.contact__card p { font-size: 0.86rem; line-height: 1.65; color: var(--lt-mid); }
/* the one Nehan actually cares about gets the gold edge, not a louder box */
.contact__card--flag { border-left: 3px solid var(--gold-deep); }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 560px) {
  .contact__row { grid-template-columns: 1fr; }
}

/* ---------- Confirmation landing (subscribed.html) ---------- */
.confirm { max-width: 62ch; margin: 0 auto; text-align: center; }
.confirm .eyebrow { justify-content: center; }
.confirm h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.14;
  margin-bottom: var(--s3);
  color: var(--lt-hi);
}
.confirm p { color: var(--lt-mid); line-height: 1.7; }
.confirm__state { font-family: var(--font-mono); font-size: 0.8rem; color: var(--lt-low); }
.confirm__cta { margin-top: var(--s5); }
.confirm__note { margin-top: var(--s4); font-size: 0.82rem; color: var(--lt-low); }
.form-success--block { text-align: center; padding: var(--s5) 0; }
.form-success--block h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: var(--s2);
}

/* ---------- Email capture dialog (free tools) ----------
   Pinned dark in both themes, on the same terms as .section-ink: tokens
   re-declared locally and colour set, so nothing inherits a computed
   light-mode colour onto the panel. */
.capture {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--s4);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}
.capture.is-open { opacity: 1; }
.capture__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 15, 0.72);
  backdrop-filter: blur(3px);
}
.capture__panel {
  --surface: #0c1332;
  --text-hi: #f4f6ff;
  --text-mid: #a9b1d6;
  --text-low: #7d85a9;
  --line: rgba(233, 238, 255, 0.09);
  --line-strong: rgba(233, 238, 255, 0.18);
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--s4));
  overflow-y: auto;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--surface);
  color: var(--text-hi);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(2, 3, 15, 0.8);
  transform: translateY(8px) scale(0.985);
  transition: transform 200ms var(--ease-out);
}
.capture.is-open .capture__panel { transform: none; }
.capture__panel .eyebrow { color: var(--gold); }
.capture__panel .eyebrow::before { background: var(--gold); }
.capture__panel h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.16;
  margin-bottom: var(--s3);
}
.capture__panel > p { color: var(--text-mid); font-size: 0.93rem; line-height: 1.65; }
.capture__close {
  position: absolute;
  top: var(--s3); right: var(--s3);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--text-low);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast);
}
.capture__close:hover { color: var(--gold); border-color: var(--gold); }
.capture__form { display: grid; gap: var(--s2); margin-top: var(--s4); }
.capture__form input[type="email"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-hi);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.capture__form input[type="email"]::placeholder { color: var(--text-low); }
.capture__form input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.capture__form .btn { width: 100%; justify-content: center; }
.capture__small {
  margin-top: var(--s3);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-low);
}
.capture__small a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }
.capture__small a:hover { color: var(--gold); }
.capture__skip {
  display: block;
  width: 100%;
  margin-top: var(--s3);
  padding: 0.4rem;
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-low);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.capture__skip:hover { color: var(--text-mid); }
/* only appears once the signup succeeds: the way out of a hard gate */
.capture__continue { width: 100%; justify-content: center; margin-top: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  .capture, .capture__panel { transition: none; }
}

/* =========================================================
   Sub-page components
   ========================================================= */

/* Page header */
.page-header {
  overflow: hidden;
  padding-top: calc(74px + var(--s7));
  padding-bottom: var(--s7);
}
.page-header__inner { position: relative; z-index: 1; max-width: 820px; }
.page-header__title {
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--text-hi);
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.page-header__subtitle {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-mid);
  max-width: 56ch;
}
.page-header__inner--center { max-width: 660px; margin-inline: auto; text-align: center; }
.page-header__inner--center .page-header__subtitle { margin-inline: auto; }
.page-header__inner--center .eyebrow { justify-content: center; }
.page-header__inner--center .eyebrow::after {
  content: ""; width: 22px; height: 1px; background: var(--gold); opacity: 0.55; flex-shrink: 0;
}

/* Interior header voice: subordinate to the home hero: left-set, lighter
   weight, a gold underline sweep (.mark) in place of the pen italic, and a
   ledger rule that draws in under the standfirst */
.page-header--interior { padding-top: calc(74px + var(--s6)); padding-bottom: var(--s6); }
.page-header--interior .page-header__title,
.landing-hero .page-header__title {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.mark {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 0% 0.085em;
  padding-bottom: 0.05em;
  transition: background-size 0.9s var(--ease-out) 0.55s;
}
.is-visible .mark { background-size: 100% 0.085em; }
.page-header__rule {
  height: 1px;
  margin-top: var(--s5);
  background: linear-gradient(90deg, var(--gold) 0 52px, rgba(252, 251, 247, 0.16) 52px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) 0.55s;
}
.is-visible .page-header__rule { transform: scaleX(1); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: var(--s5);
  transition: color var(--fast) var(--ease-out);
}
.back-link:hover { color: var(--gold); }

/* Product sales pages */
.product-header__buy {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s5);
}
.product-header__price {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold);
}
.product-header__price span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-low);
}
.product-header__note {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-low);
}

.pain-points__list {
  max-width: 680px;
  margin: 0 auto;
  border-top: 1px solid var(--lt-line-strong);
}
.pain-points__list li {
  position: relative;
  padding: var(--s3) 0 var(--s3) 2rem;
  border-bottom: 1px solid var(--lt-line);
  font-size: 1rem;
  color: var(--lt-mid);
}
.pain-points__list li::before {
  content: "×";
  position: absolute;
  left: 0.2rem; top: 50%;
  transform: translateY(-52%);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--flag);
}

.solution__body {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  color: var(--text-mid);
  font-size: 1.05rem;
}

.included__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s7);
  align-items: start;
}
.section-light .testimonial-card {
  background: #fff;
  border-color: var(--lt-line);
  box-shadow: 0 20px 44px -24px rgba(11, 17, 66, 0.25);
}
.section-light .testimonial-card blockquote { color: var(--lt-hi); }
.section-light .testimonial-card blockquote::before,
.section-light .testimonial-card blockquote::after { color: var(--navy-brand); }
.section-light .testimonial-card figcaption { border-top-color: var(--lt-line); }
.section-light .testimonial-card__avatar { background: rgba(2, 1, 137, 0.08); color: var(--navy-brand); }
.section-light .testimonial-card__name { color: var(--lt-hi); }
.section-light .testimonial-card__meta { color: var(--lt-low); }
.section-light .testimonial-card__delta { background: rgba(2,1,137,0.08); color: var(--navy-brand); }

/* checklists inside sales pages */
.work__list { display: flex; flex-direction: column; gap: var(--s2); }
.work__list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--lt-hi);
  font-size: 0.95rem;
}
.work__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 12px; height: 12px;
  border: 1.5px solid var(--navy-brand);
  border-radius: 3px;
}
.work__list li::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 0.52em;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--navy-brand);
  border-bottom: 1.5px solid var(--navy-brand);
  transform: rotate(-45deg);
}
/* dark-section variant */
.work__list--dark li { color: var(--text-hi); }
.work__list--dark li::before { border-color: var(--gold); }
.work__list--dark li::after { border-color: var(--gold); }

.pricing-band__inner { text-align: center; }
.pricing-band__inner h2 {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: var(--s5);
}
.pricing-band__inner h2 span {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-low);
}
.pricing-band__inner .trust-badges { margin-top: var(--s5); }

/* ---------- My Story ---------- */
.story-section__body {
  max-width: 660px;
  font-size: 1.05rem;
  color: var(--text-mid);
}
.section-light .story-section__body { color: var(--lt-mid); }
/* The story sections were built around a single paragraph each. Now that
   they carry a real multi-paragraph story, consecutive paragraphs need
   separating: scoped to the adjacent pair so a lone paragraph keeps the
   section's existing rhythm. */
.story-section__body + .story-section__body { margin-top: var(--s3); }

.story-prompt { font-style: italic; color: var(--text-low); }
.section-light .story-prompt { color: var(--lt-low); }

.story-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.story-gallery__item {
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--lt-line-strong);
  border-radius: var(--r-md);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  color: var(--lt-low);
  text-align: center;
  padding: var(--s3);
}
.story-gallery__item svg { width: 26px; height: 26px; }
.story-gallery__item span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; }
.story-gallery__item--wide { grid-column: span 2; aspect-ratio: 8 / 3; }

.story-video {
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--text-low);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}
.story-video__play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.story-video__play svg { width: 24px; height: 24px; margin-left: 2px; }
.story-video--embed { border: none; background: transparent; padding: 0; overflow: hidden; }
.story-video--embed iframe { width: 100%; height: 100%; border: 0; }

/* ---------- My Story: the hero ------------------------------------------
   A full-bleed portrait carrying the headline, in place of the arcs backdrop
   the other interior pages use. Scoped to .story-page: .page-header--interior
   is shared with fourteen other pages and is untouched. */
.story-page .story-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88vh, 880px);
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--s8) calc(var(--s8) + var(--s4));
}
.story-page .story-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.34);
  transform-origin: 50% 32%;
}
/* Three stops, not one: the base anchors the headline, the middle keeps the
   subject readable, and the top carries the fixed nav. */
.story-page .story-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      var(--ink) 2%,
      rgba(4, 6, 15, 0.82) 26%,
      rgba(4, 6, 15, 0.38) 62%,
      rgba(4, 6, 15, 0.62) 100%);
}
.story-page .story-hero__inner { position: relative; }
.story-page .story-hero .back-link {
  display: inline-block;
  margin-bottom: var(--s5);
  color: var(--text-hi);
  opacity: 0.72;
}
.story-page .story-hero .back-link:hover { opacity: 1; }
.story-page .story-hero .eyebrow { margin-bottom: var(--s3); }

.story-page .story-hero__title {
  font-family: var(--font-display);
  /* Sized to hold "Nehan's story" on one line at every width. */
  white-space: nowrap;
  font-size: clamp(2.1rem, 7.6vw, 6.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 76;
  text-transform: uppercase;
  letter-spacing: -0.022em;
  line-height: 0.88;
  color: var(--gold);
  text-shadow: 0 10px 44px rgba(0, 0, 0, 0.55);
}
.story-page .story-hero__sub {
  margin-top: var(--s4);
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-hi);
}

.story-page .story-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-hi);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.story-page .story-hero__scroll svg { width: 18px; height: 18px; }
.story-page .story-hero__scroll:hover,
.story-page .story-hero__scroll:focus-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .story-page .story-hero__scroll svg { animation: story-hero-nudge 2.4s var(--ease-in-out) infinite; }
}
@keyframes story-hero-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* He asked for the headers to carry the same weight as the timeline, so the
   section titles on this page pick up the condensed uppercase treatment.
   .section-title itself is shared with five other pages and stays as it is. */
.story-page .section-title {
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.98;
}

@media (max-width: 860px) {
  .story-page .story-hero { min-height: min(80vh, 680px); padding-block: var(--s7) calc(var(--s7) + var(--s4)); }
  .story-page .story-hero__bg { object-position: center 30%; transform: scale(1.5); }
}

/* ---------- My Story: the record ----------------------------------------
   The page's spine is Nehan's credit file: a rail of numbers that climbs
   2012 → 17 → 18 → NO FILE → 600 → 950. The numbers ARE the story, so they
   get the rail slot Bartlett's page gives to years.

   Everything is scoped under .story-page. .eyebrow, .section-title and
   .page-header--interior are shared with 14 other pages and must not move. */

.story-page .rec { padding-block: var(--s7) var(--s8); }

/* The grammar break: prose ends, the record begins. */
.story-page .rec__open {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--s7);
}
.story-page .rec__open h2 {
  font-size: clamp(2.1rem, 5.6vw, 3.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 78;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.95;
  color: var(--text-hi);
}
.story-page .rec__open p {
  margin-top: var(--s4);
  color: var(--text-mid);
  font-size: 1.02rem;
  line-height: 1.7;
}

.story-page .rec__list { list-style: none; margin: 0; padding: 0; }

/* Desktop: card | rail | media, alternating. The rail is drawn per beat and
   the numeral paints over it, so the line reads as interrupted, not gapped. */
.story-page .rec__beat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(120px, 14vw, 190px) 1fr;
  align-items: center;
  column-gap: clamp(var(--s4), 3vw, var(--s6));
  padding-block: clamp(var(--s5), 4.2vw, var(--s7));
}
.story-page .rec__beat::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--line-strong);
  transform: translateX(-50%);
}
.story-page .rec__beat:first-child::before { top: 50%; }
.story-page .rec__beat:last-child::before  { bottom: 50%; }

.story-page .rec__mark {
  grid-column: 2;
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--ink);
  padding-block: var(--s2);
}
.story-page .rec__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 8vw, 7rem);
  font-weight: 800;
  font-variation-settings: "wdth" 76;
  letter-spacing: -0.035em;
  line-height: 0.82;
  color: var(--gold);
}
/* A nil file and twelve months of history are both real file states, so the
   rail stays numeric the whole way down rather than dropping to a caption. */
.story-page .rec__unit {
  font-size: 0.42em;
  letter-spacing: 0.02em;
  margin-left: 0.06em;
  vertical-align: 0.55em;
}

.story-page .rec__card { grid-column: 1; }
.story-page .rec__media { grid-column: 3; }
.story-page .rec__beat:nth-child(even) .rec__card  { grid-column: 3; }
.story-page .rec__beat:nth-child(even) .rec__media { grid-column: 1; }

/* A beat with no photograph is not a broken beat: it keeps its side of the
   rail and the opposite column stays empty on purpose. When a photo arrives
   it drops into that column and nothing else moves. */
.story-page .rec__beat--solo .rec__media { display: none; }

.story-page .rec__title {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.3vw, 1.85rem);
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  line-height: 1.06;
  color: var(--text-hi);
}
/* The metadata slot. Bartlett puts a location here; this page puts the state
   of the file, which is what the story is actually tracking. */
.story-page .rec__state {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.story-page .rec__state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.story-page .rec__state--none { color: var(--text-low); }
.story-page .rec__body {
  margin-top: var(--s3);
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text-mid);
}
.story-page .rec__beat:nth-child(even) .rec__body { margin-left: auto; }

.story-page .rec__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* The peak. One moment, engineered: the score the whole page is climbing to.
   Everything else stays quiet so this is the thing that is remembered. */
.story-page .rec__beat--peak { padding-block: clamp(var(--s7), 8vw, 8rem); }
.story-page .rec__beat--peak .rec__mark { padding-block: var(--s5); }
.story-page .rec__beat--peak .rec__num {
  font-size: clamp(4.6rem, 15vw, 11rem);
  line-height: 0.78;
  text-shadow: 0 0 60px rgba(246, 197, 19, 0.28);
}
.story-page .rec__beat--peak {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
/* Doubled class so these outrank .rec__beat:nth-child(even) .rec__card, which
   is one specificity step higher and otherwise throws the peak off-centre
   whenever the beat count makes it an even child. */
.story-page .rec__beat--peak.rec__beat--peak .rec__mark,
.story-page .rec__beat--peak.rec__beat--peak .rec__card { grid-column: 1; }
.story-page .rec__beat--peak.rec__beat--peak .rec__body {
  max-width: 38ch;
  margin-inline: auto;
}

/* A month + year marker carries more characters than a bare year, so it steps
   down rather than overflowing the rail column. */
.story-page .rec__num--date {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Photographs sit flat on the ink with a hairline, no card chrome. Screenshots
   are documents: they keep their own white and are simply placed. */
.story-page .rec__media {
  margin: 0;
  position: relative;
  z-index: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
}
.story-page .rec__media img { display: block; width: 100%; height: auto; }

.story-page .story-figure {
  margin: var(--s6) 0 0;
  max-width: 560px;
}
.story-page .story-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.story-page .story-figure figcaption {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* What the record is for now. */
.story-page .story-now {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(var(--s4), 4vw, var(--s6));
  align-items: start;
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.story-page .story-now__portrait { margin: 0; }
.story-page .story-now__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.story-page .story-now__text .rec__title { margin-bottom: var(--s3); }
.story-page .story-disclaimer {
  margin-top: var(--s4);
  padding-left: var(--s3);
  border-left: 2px solid var(--gold);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-low);
}
@media (max-width: 860px) {
  .story-page .story-now { grid-template-columns: 1fr; }
  .story-page .story-now__portrait { max-width: 220px; }
  .story-page .story-figure { margin-inline: auto; }
}

/* The mission section keeps its light ground, so the "now" block has to swap
   to the light text scale: .rec__title carries --text-hi, which is invisible
   on cream. */
.story-page .section-light .story-now { border-top-color: var(--lt-line); }
.story-page .section-light .story-now__text .rec__title { color: var(--lt-hi); }
.story-page .section-light .story-disclaimer { color: var(--lt-low); }
.story-page .section-light .story-figure figcaption { color: var(--lt-low); }

/* Scroll-linked parallax. Transform only, and the JS never runs under
   prefers-reduced-motion, so the images simply sit still. */
.story-page [data-parallax] { will-change: transform; }

/* At the peak the evidence is the point: the real gauge, centred and capped
   so it reads as a document rather than a hero image. */
.story-page .rec__beat--peak.rec__beat--peak .rec__media {
  grid-column: 1;
  max-width: 340px;
  margin-top: var(--s5);
}

/* The line the record closes on. */
.story-page .rec__close {
  max-width: 34ch;
  margin: var(--s7) auto 0;
  text-align: center;
  font-family: var(--font-pen);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--text-hi);
}

/* Mobile: the rail collapses. The numeral keeps its scale and trails a
   hairline to the right, so the spine survives the loss of the column. */
@media (max-width: 860px) {
  .story-page .rec__beat {
    grid-template-columns: 1fr;
    row-gap: var(--s4);
    padding-block: var(--s7);
    text-align: center;
  }
  .story-page .rec__beat::before { display: none; }
  .story-page .rec__card,
  .story-page .rec__media,
  .story-page .rec__beat:nth-child(even) .rec__card,
  .story-page .rec__beat:nth-child(even) .rec__media,
  .story-page .rec__beat--solo .rec__card { grid-column: 1; }
  .story-page .rec__media { order: -1; }
  .story-page .rec__mark {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-block: 0;
    text-align: left;
  }
  .story-page .rec__mark::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-strong);
  }
  .story-page .rec__body,
  .story-page .rec__beat:nth-child(even) .rec__body {
    margin-inline: auto;
    max-width: 52ch;
  }
  .story-page .rec__beat--peak .rec__mark { justify-content: center; }
  .story-page .rec__beat--peak .rec__mark::after { display: none; }
}

/* ---------- Proof wall (results page) ---------- */
.proof-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.proof-filter {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--fast) var(--ease-out),
              color var(--fast) var(--ease-out),
              border-color var(--fast) var(--ease-out);
}
.proof-filter:hover { border-color: var(--gold); color: var(--text-hi); }
.proof-filter.is-active { background: var(--gold); color: #0a0d1f; border-color: var(--gold); }

.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.proof-card {
  margin: 0;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--r-md);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  box-shadow: 0 16px 36px -20px rgba(0,0,0,0.6);
  transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out);
}
.proof-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.75); }
.proof-card__shot {
  aspect-ratio: 9 / 14;
  border: 1.5px dashed var(--paper-line);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  color: var(--paper-muted);
  background: var(--paper-shade);
}
.proof-card__shot svg { width: 26px; height: 26px; }
.proof-card__shot span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; }
.proof-card__caption { font-size: 0.84rem; color: var(--lt-mid); flex-grow: 1; }
.proof-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  background: rgba(2, 1, 137, 0.08);
  color: var(--navy-brand);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ---------- Work card (thank-you cross-sell) ---------- */
.work__layout--single { max-width: 620px; margin: 0 auto; text-align: center; }
.work__card {
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: 0 24px 50px -28px rgba(11, 17, 66, 0.3);
}
.work__card h3 { font-size: 1.5rem; margin-bottom: var(--s3); color: var(--lt-hi); }
.work__desc { color: var(--lt-mid); margin-bottom: var(--s4); }

/* =========================================================
   Scroll-reveal
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { --reveal-delay: 1; }
[data-reveal-delay="2"] { --reveal-delay: 2; }
[data-reveal-delay="3"] { --reveal-delay: 3; }
[data-reveal-delay="4"] { --reveal-delay: 4; }
[data-reveal-delay="5"] { --reveal-delay: 5; }
[data-reveal-delay="6"] { --reveal-delay: 6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero [data-stage] { opacity: 1; transform: none; animation: none; }
  .audit { opacity: 1; transform: rotate(0.8deg); animation: none; }
  .audit__dial-fill { transition: none; }
  .audit .audit__line { opacity: 1; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s6); }
  .audit { max-width: 460px; margin: 0 auto; }
  .ledger__grid { grid-template-columns: repeat(2, 1fr); }
  .ledger__cell:nth-child(odd) { border-left: none; }
  .ledger__cell { border-top: 1px solid var(--line); }
  .ledger__cell:nth-child(-n+2) { border-top: none; }
  .tiers__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .tiers__paths { grid-template-columns: 1fr; max-width: 560px; margin: var(--s5) auto 0; }
  .about__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .about__media { max-width: 380px; margin: 0 auto; }
  .process__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .content__feature { min-height: 320px; }
  .resource__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .paper-doc { margin: 0 auto; }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
  .included__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .story-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .story-gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav { background: rgba(4, 6, 15, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    transform: none;
    flex-direction: column;
    gap: 0;
    /* Solid, for the same reason the desktop dropdown is: a blurred surface
       composites into its own layer, and in that layer a 0.96 background
       stopped being opaque. The hero headline and the audit card read
       straight through the open menu. The nav bar above keeps its blur. */
    background: #080c1e;
    border-bottom: 1px solid var(--line);
    padding: var(--s2) var(--s4) var(--s4);
  }
  .nav__links.is-open a { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .nav__links.is-open a:last-child { border-bottom: none; }
  .nav__links.is-open a::after { display: none; }
  .nav__links.is-open .nav__links-cta { display: block; color: var(--gold); font-weight: 600; }

  /* In the drawer the dropdown stops floating. A hover panel inside a
     panel has nowhere to go, and tapping to expand a group inside a menu
     you already tapped open is a second step for nothing. So it is always
     open here, the button becomes a plain heading, and the whole thing
     reads as one list. */
  .nav__links.is-open .nav__drop { width: 100%; border-bottom: 1px solid var(--line); }
  .nav__links.is-open .nav__drop-btn {
    width: 100%;
    justify-content: space-between;
    padding: var(--s3) 0;
    cursor: default;
    color: var(--text-hi);
  }
  .nav__links.is-open .nav__drop-chev { display: none; }
  .nav__links.is-open .nav__drop-panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: auto;
    padding: 0 0 var(--s3);
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__links.is-open .nav__drop-panel::before { display: none; }
  .nav__links.is-open .nav__drop-cols { grid-template-columns: 1fr; gap: var(--s3); }
  .nav__links.is-open .nav__drop-item { padding: 0.45rem 0; border-bottom: 0; }
  .nav__links.is-open .nav__drop-foot { gap: var(--s3); font-size: 0.82rem; }
  .nav__links.is-open .nav__drop-foot a { padding: 0.3rem 0; border-bottom: 0; }
  .nav__links.is-open .nav__drop-all { margin-left: 0; }
}

@media (max-width: 640px) {
  section { padding: var(--s7) 0; }
  /* .newsletter and .final-cta set their padding on a class, so this
     element selector never reached them and the two of them kept 104px
     top and bottom while every other section dropped to 72. Where they
     meet: and they meet on both the homepage and the resources page ,
     that is 208px of empty band on a phone, which is what reads as a
     hole under the Substack embed. */
  .newsletter, .final-cta { padding: var(--s7) 0; }
  /* And less than that where the two of them meet. The Substack embed
     brings its own internal padding, so a full section's worth after it
     double-counts the whitespace: and because both bands are dark with
     no rule between them, the result reads as one empty stretch rather
     than as a break. */
  .newsletter { padding-bottom: var(--s6); }
  .final-cta { padding-top: var(--s6); }
  .hero { padding-top: calc(74px + var(--s5)); min-height: auto; }
  .hero__actions .btn { width: 100%; }
  .audit__note { font-size: 1.02rem; }
  .audit__stamp { top: 4.6rem; right: 0.9rem; width: 76px; height: 76px; }
  .audit__score-copy { padding-right: 70px; }
  .audit__doc { padding: var(--s4) var(--s4) var(--s3); }
  .audit__score { flex-direction: row; }
  .ledger__grid { grid-template-columns: 1fr 1fr; }
  .products__grid { grid-template-columns: 1fr; }
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .story-gallery__grid { grid-template-columns: 1fr; }
  .story-gallery__item--wide { grid-column: span 1; aspect-ratio: 4/3; }
  .bundle-card { flex-direction: column; align-items: flex-start; text-align: left; padding: var(--s5); }
  .bundle-card .btn { width: 100%; justify-content: center; }
  .footer__bottom { flex-direction: column; }
  .final-cta__inner { padding: var(--s7) var(--s4); }

  .section-light {
    margin-top: -24px;
    padding-top: calc(var(--s7) + 24px);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -24px 50px -20px rgba(2, 3, 15, 0.5);
  }
}

/* =========================================================
   Section tones
   ---------------------------------------------------------
   The page alternates bands rather than running dark top to
   bottom. Three classes do it:

   .section-light   cream lifted panel (the original)
   .section-paper   the same panel in pure white: used where the
                    content carries itself (pricing, quotes, FAQ)
                    and white is what makes the navy and gold pop
   .section-ink     pinned dark. Re-declares the dark tokens
                    locally, so the band stays navy-black in BOTH
                    themes and light mode keeps its dark anchors
                    instead of going flat white end to end.

   Declared here, below every section's own background rule, so
   plain source order settles it: no specificity games.
   ========================================================= */
.section-paper { background: #ffffff; }

/* Two light panels in a row: the second must not lift over the
   first. A -48px overlap plus a drop shadow between two pale
   surfaces reads as a rendering fault, not a seam. Flatten it and
   mark the join with a hairline instead. */
.section-light + .section-light {
  margin-top: 0;
  padding-top: var(--s8);
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--lt-line);
}

.section-ink {
  --ink: #04060f;
  --ink-2: #070d24;
  --surface: #0c1332;
  --surface-2: #111a42;
  --text-hi: #f4f6ff;
  --text-mid: #a9b1d6;
  --text-low: #7d85a9;
  --line: rgba(233, 238, 255, 0.09);
  --line-strong: rgba(233, 238, 255, 0.18);
  --gold-soft: rgba(246, 197, 19, 0.1);
  background: var(--ink);
  /* Re-declaring the tokens is not enough on its own. `body` resolves
     `color: var(--text-hi)` once, against whichever palette is active, and
     anything without its own colour rule inherits that computed value ,
     so in light mode a heading like .step h3 arrived here already navy
     and sat invisible on the dark band. Setting colour here re-resolves
     it against the tokens above. Identical in dark mode; the fix is only
     ever visible in light. */
  color: var(--text-hi);
}
/* keeps the community band a shade off the one above it */
.products.section-ink { background: var(--ink-2); }

/* The pricing cards keep their navy fill on the white band: that
   contrast is the point of putting them there. The .section-light
   overrides are written for content sitting directly on the panel, so
   they have to stop at the edge of a card that is still dark. In light
   mode the cards go white and those overrides are exactly right, which
   is what the :not() leaves alone. */
:root:not([data-theme="light"]) .section-light .tier .btn--ghost {
  color: var(--text-hi);
  border-color: var(--line-strong);
}
:root:not([data-theme="light"]) .section-light .tier .btn--ghost:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: transparent;
}
:root:not([data-theme="light"]) .section-light .tier .tag {
  background: var(--gold-soft);
  color: var(--gold);
}

/* ---------- Client notes: continuous loop ---------- */
.testimonials__marquee {
  overflow: hidden;
  /* room for the cards' lift-on-hover and drop shadow, which the
     overflow clip would otherwise shave off */
  padding-block: var(--s3);
  margin-bottom: calc(var(--s5) - var(--s3));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.testimonials__track { display: flex; gap: var(--s4); width: max-content; }
.testimonials__set { display: flex; gap: var(--s4); }
.testimonials__set > .testimonial-card { width: min(360px, 78vw); flex-shrink: 0; }

/* Only animates once main.js has appended the duplicate set ,
   otherwise the row would scroll away into empty space. */
.testimonials__track.is-looping { animation: testimonials-scroll 48s linear infinite; }
.testimonials__marquee:hover .testimonials__track.is-looping,
.testimonials__marquee:focus-within .testimonials__track.is-looping { animation-play-state: paused; }

/* One set plus the gap that follows it: that lands copy 2 exactly
   where copy 1 started, so the seam is invisible. */
@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--s4) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials__track.is-looping { animation: none; }
  .testimonials__marquee { overflow-x: auto; }
}

/* ---------- Short-form video row ----------
   Three 9:16 cards under the landscape one. Capped and centred rather
   than run to full container width: at 1180px a third-width column makes
   each card ~640px tall, which swamps the section it belongs to. */
.reels {
  display: grid;
  /* capped per card and centred, rather than stretched to the container:
     at full width a 9:16 card runs ~640px tall and swamps the landscape
     one above it */
  grid-template-columns: repeat(3, minmax(0, 292px));
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s5);
}
.reel {
  position: relative;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* the panel behind an Instagram card that has no poster image ,
     Instagram gives no public thumbnail without an API token */
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(2, 1, 137, 0.5), transparent 60%),
    var(--surface);
  cursor: pointer;
  transition: border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.reel:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.reel__thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  transition: opacity var(--base) var(--ease-out);
}
.reel:hover .reel__thumb { opacity: 0.5; }
.reel > *:not(.reel__thumb) { position: relative; z-index: 1; }
.reel__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 54px; height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: #0a0d1f;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 14px 32px -10px rgba(246, 197, 19, 0.5);
  transition: transform var(--base) var(--ease-out);
}
.reel:hover .reel__play { transform: translate(-50%, -60%) scale(1.08); }
.reel__play svg { width: 20px; height: 20px; margin-left: 2px; }
/* A platform with no post URL in config yet: the card links out to the
   profile instead of playing anything (asFollowCard in main.js). The
   arrow that replaces the play triangle is already optically centred, so
   it doesn't want the nudge a triangle needs. */
.facade--follow .reel__play svg { margin-left: 0; }
.reel__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(4, 6, 15, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  margin-bottom: var(--s2);
  backdrop-filter: blur(6px);
}
.reel__badge svg { width: 13px; height: 13px; }
.reel__title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-hi);
  /* captions come back from the platform and can run long */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel.is-playing { padding: 0; border-color: var(--line-strong); background: #000; }

/* the player that replaces any facade, landscape or vertical */
.facade__frame { width: 100%; height: 100%; border: 0; display: block; }
.content__feature.is-playing .facade__frame { aspect-ratio: 16 / 9; height: auto; }

/* ---------- Latest video facade ---------- */
.content__feature-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* held well back so the headline stays the thing you read first;
     the card lifts it slightly on hover to signal it is playable */
  opacity: 0.28;
  transition: opacity var(--base) var(--ease-out);
}
.content__feature:hover .content__feature-thumb { opacity: 0.42; }
.content__feature > *:not(.content__feature-thumb) { position: relative; z-index: 1; }
.content__feature-play { border: 0; cursor: pointer; padding: 0; z-index: 2; }
.content__feature.is-playing { padding: 0; border: 0; background: #000; }

/* ---------- Booking calendar (/book) ----------
   Calendly injects an iframe as the only child once it mounts, so the
   height lives here rather than on anything Calendly controls. */
.booking-embed {
  /* Calendly builds its iframe with height="100%". A percentage height only
     resolves against a parent with a DEFINITE height: with min-height alone
     the parent stays height:auto, the percentage computes to auto, and the
     iframe collapses to the CSS default of 150px: a sliver of calendar above
     570px of empty paper. So the height is explicit here. Calendly's own
     embed snippet hard-codes one for the same reason. Keep the two values in
     step, including in the mobile override below. */
  height: 720px;
  min-height: 720px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 24px 60px -32px rgba(11, 17, 66, 0.45);
}
/* Stated in CSS rather than left to Calendly's width/height attributes, so
   the embed keeps its size even if those attributes change. */
.booking-embed iframe { display: block; border: 0; width: 100%; height: 100%; }
/* the pre-mount state: a centred note plus a link that already works */
.booking-embed__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 720px;
  padding: var(--s5);
  text-align: center;
}
.booking-embed__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--paper-muted);
}
@media (max-width: 640px) {
  .booking-embed, .booking-embed__fallback { min-height: 900px; }
  .booking-embed { height: 900px; }
}

/* ---------- The plan chooser (/book) ----------
   Calendly collects one fixed amount per Event Type and has no add-on of
   its own, so the upgrade cannot be a tick box inside the booking. It is
   a second Event Type, and this is the switch between the two.

   Real radios inside real labels, so it is a keyboard control and a
   screen reader announces it as the choice it is; the cards only paint
   the state. :has() does the painting so the selected card is correct
   before any script runs, and main.js mirrors it onto .is-selected for
   anything that lacks :has().

   It lives on --lt-* rather than --text-*: the chooser only ever sits
   inside .section-light, which is paper in both themes. */
.plan-chooser {
  border: 0;
  padding: 0;
  margin: 0 auto var(--s5);
  max-width: 860px;
}
.plan-chooser__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lt-low);
}
.plan-chooser__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
.plan-option {
  position: relative;
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  background: #ffffff;
  border: 1px solid var(--lt-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out),
              transform var(--base) var(--ease-out);
}
.plan-option:hover { border-color: var(--lt-line-strong); transform: translateY(-2px); }
/* the radio itself is the accessible control; the ring below is its face */
.plan-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.plan-option__mark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--lt-line-strong);
  border-radius: 50%;
  transition: border-color var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out);
}
.plan-option__body { display: block; }
.plan-option__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: 0.3rem;
}
.plan-option__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lt-hi);
}
.plan-option__price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lt-hi);
  white-space: nowrap;
}
.plan-option__desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--lt-mid);
}
.plan-option__flag {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.plan-option:has(input:checked),
.plan-option.is-selected {
  border-color: var(--navy-brand);
  box-shadow: 0 0 0 1px var(--navy-brand), 0 18px 40px -26px rgba(11, 17, 66, 0.4);
}
.plan-option:has(input:checked) .plan-option__mark,
.plan-option.is-selected .plan-option__mark {
  border-color: var(--navy-brand);
  box-shadow: inset 0 0 0 4px var(--navy-brand);
}
/* the label is the hit area, so the focus ring has to be drawn on it */
.plan-option:has(input:focus-visible) {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .plan-chooser__grid { grid-template-columns: 1fr; }
}

/* ---------- The booking band, in brand navy ----------
   Paired with .section-light rather than replacing it: the lifted panel
   geometry, the 48px radius and the --lt-* context the white cards are
   built on all still apply. This only repaints the band underneath them.

   That is the whole trick. The plan cards and the calendar stay white
   objects sitting ON the brand colour, the same way cards sit on ink
   elsewhere, so nothing inside them has to be re-proved for contrast.
   Only the legend sits directly on the navy, so it is the only text that
   needs a new value. */
.section-brand { background: var(--navy-brand); }
.section-brand .plan-chooser__legend { color: rgba(255, 255, 255, 0.74); }

/* The selected card was ringed in --navy-brand, which is now the colour of
   the band behind it: an invisible ring on the one control that has to
   show its state. Gold reads against both. The radio dot inside stays
   navy, because it sits on white, where gold is 1.4:1 and unreadable. */
.section-brand .plan-option:has(input:checked),
.section-brand .plan-option.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 18px 40px -24px rgba(0, 0, 0, 0.55);
}
.section-brand .plan-option:has(input:focus-visible) { outline-color: var(--gold); }

/* Calendly's iframe is transparent: its html and body both compute to
   rgba(0,0,0,0), so what reads as a border of cream around their white
   card is this element showing through. Painting it the brand colour is
   what removes the last pale layer, and it leaves the band and the embed
   as one continuous navy field with a single white card floating on it.

   The shadow goes with it. A shadow on a navy box standing on a navy band
   has nothing to cast against and only shows up as a dark smear at the
   edges. */
.section-brand .booking-embed {
  background: var(--navy-brand);
  box-shadow: none;
}
.section-brand .plan-option { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.5); }

/* The pre-mount state now sits on navy rather than paper: the note was
   --paper-muted and the button was navy-on-navy, so before the calendar
   arrived there was a grey line and an invisible button. */
.section-brand .booking-embed__note { color: rgba(255, 255, 255, 0.7); }
.section-brand .booking-embed__fallback .btn {
  background: var(--gold);
  color: var(--ink);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .plan-option:hover { transform: none; }
}

/* ---------- What you leave with: the ledger (/book) ----------
   Two groups, not one list: what every session includes, then what the
   follow-through adds. Keeping them apart is the whole argument, so the
   second group gets the gold rule and the first does not. */
.ledger-stack {
  max-width: 860px;
  margin: 0 auto;
}
.ledger-group + .ledger-group { margin-top: var(--s5); }
.ledger-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--lt-line-strong);
  margin-bottom: var(--s4);
}
.ledger-group__name {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lt-low);
}
.ledger-group__price {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lt-hi);
}
.ledger-group--add .ledger-group__head { border-bottom-color: var(--gold-deep); }
.ledger-group--add .ledger-group__name { color: var(--gold-ink); }
.ledger-group__line {
  margin: calc(var(--s4) * -1) 0 var(--s4);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lt-mid);
  padding-top: var(--s3);
}
.ledger-group__line em { font-style: normal; color: var(--lt-hi); font-weight: 600; }

.ledger-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4) var(--s5);
}
.ledger-list li {
  position: relative;
  padding-left: 1.6rem;
}
.ledger-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--navy-brand);
  border-radius: 2px;
}
.ledger-group--add .ledger-list li::before { border-color: var(--gold-deep); }
.ledger-list strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lt-hi);
  margin-bottom: 0.2rem;
}
.ledger-list span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--lt-mid);
}

/* The price reveal, after the stack rather than before it: the figure and
   the arithmetic that justifies it sit on one line, so the £60 is read as
   an answer to the £149 rather than as a separate claim further down. */
.ledger-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px dashed var(--lt-line-strong);
}
.ledger-total__figure {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--lt-hi);
}
.ledger-total__note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--lt-mid);
}
@media (max-width: 720px) {
  .ledger-total { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ledger-list { grid-template-columns: 1fr; }
}

/* ---------- The named guarantee (/book) ----------
   The homepage carries this as one line beside the button. Here it gets
   the room to say why it is safe to offer, which is the part that makes
   it believable rather than a slogan. */
.guarantee-panel {
  max-width: 860px;
  margin: var(--s6) auto 0;
  padding: var(--s5);
  background: #ffffff;
  border-radius: var(--r-md);
  border-left: 3px solid var(--gold-deep);
  box-shadow: 0 18px 40px -30px rgba(11, 17, 66, 0.35);
}
.guarantee-panel__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: var(--s2);
}
.guarantee-panel__promise {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--lt-hi);
  margin-bottom: var(--s3);
}
.guarantee-panel p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--lt-mid);
  max-width: 62ch;
}
/* The panel carries the claim mechanism, the reason it can be offered, and
   the extra promise on the £149. Three paragraphs run together read as one
   block of small print, which is the opposite of what a guarantee is for. */
.guarantee-panel p + p { margin-top: var(--s3); }
.guarantee-panel p b { color: var(--lt-hi); }
@media (max-width: 640px) {
  .guarantee-panel { padding: var(--s4); }
  .guarantee-panel__promise { font-size: 1.05rem; }
}

/* ---------- The post-booking upgrade (/thank-you) ----------
   Sits on a dark band, so it uses the standard tokens rather than --lt-*. */
.bump {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid rgba(246, 197, 19, 0.38);
  border-radius: var(--r-lg);
  text-align: center;
}
.bump__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s2);
}
.bump h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}
.bump > p { color: var(--text-mid); font-size: 0.95rem; max-width: 54ch; margin: 0 auto var(--s4); }
.bump__list {
  display: grid;
  gap: var(--s2);
  text-align: left;
  max-width: 46ch;
  margin: 0 auto var(--s5);
}
.bump__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-mid);
}
.bump__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 9px; height: 9px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
}
.bump__micro {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-low);
}
@media (max-width: 640px) {
  .bump { padding: var(--s4); }
}

/* ---------- Nav: single booking CTA ---------- */
/* The gold Book Now button is the only booking ask on desktop. It is
   hidden below 860px, so this in-menu link takes over there. */
.nav__links-cta { display: none; }

/* ---------- Mobile overrides for the blocks above ----------
   These have to live below their base rules, not up in the earlier
   max-width:640px block: a media query adds no specificity, so a later
   plain rule beats an earlier one inside a query and the override would
   silently never apply. */
@media (max-width: 640px) {
  /* a flattened panel keeps the mobile section rhythm */
  .section-light + .section-light { padding-top: var(--s7); }

  /* Three 9:16 cards across a phone would be ~100px wide. Swipe instead,
     which is how these read on the platforms they came from. */
  .reels {
    grid-template-columns: repeat(3, 62vw);
    /* centring the track would fight the scroll: start it at the edge */
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--s2);
    -webkit-overflow-scrolling: touch;
  }
  .reel { scroll-snap-align: center; }
}

/* =========================================================
   The link hub (/links)
   The bio-link page. One thumb-wide column, no nav, and gold
   spent exactly once: on the booking card. Every other row is
   a quiet ledger line, so the one thing worth paying for is
   the only thing on the page that is not grey. That restraint
   is the hierarchy — nothing else is doing that work.
   ========================================================= */
/* The hub is pinned dark in both themes, the way .section-ink is. There is no
   theme toggle on this page (it has no nav), the design is a photograph fading
   into black, and a paper version of it would be a different page rather than
   a lighter one. Declaring the tokens here means every descendant resolves
   dark without a single [data-theme] override further down. */
.linkhub-page {
  --ink: #05070f;
  --surface: #0f1631;
  --surface-2: #151d42;
  --text-hi: #f4f6ff;
  --text-mid: #a9b1d6;
  --text-low: #7d85a9;
  --line: rgba(233, 238, 255, 0.10);
  --line-strong: rgba(233, 238, 255, 0.2);
  --gold-soft: rgba(246, 197, 19, 0.1);

  position: relative;
  overflow: hidden;
  /* The grey has to reach the bottom of the window, not just the bottom of the
     content: /recommends is short, and without this the body's ink shows as a
     band under the footer on a tall screen. */
  min-height: 100vh;
  padding: var(--s5) 0 var(--s6);
  /* The grey the card sits on. Not the page ink: the card is nearly black, and
     it needs a ground a step lighter to read as a card at all. */
  background: #23262f;
  color: var(--text-hi);
}
/* Far narrower than --container, and that is the point: the format is a
   phone. Letting it stretch on a desktop would read as a page that failed
   to fill rather than one shaped on purpose. */
.linkhub-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 var(--s3);
}

/* The card. One continuous dark surface: the photograph sits at the top and
   the black it fades into IS the card's own background, so the gradient runs
   out of the picture and straight into the page rather than stopping at a
   panel edge. overflow:hidden is what clips the photo to the rounded corner. */
.linkhub-shell {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: 26px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}

/* ---------- The cover ----------
   The portrait runs the full width of the card and falls away into ink, with
   the name, role, socials and tabs sitting in the dark half. It carries the
   dark palette locally, because everything on it is white-on-photo while the
   panel below it is ink-on-paper — two grounds inside one card, each with the
   tokens its own contents need. */
.linkhub-cover {
  --line-strong: rgba(233, 238, 255, 0.3);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Sized by aspect, not by the viewport. Giving it a viewport width and a
     capped height inverts the box's proportions on a desktop screen: the
     portrait scales to fill 1440px and object-fit crops everything below the
     hairline. Held near the photograph's own ratio, the crop stays vertical
     and predictable at every width. */
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--ink);
  color: var(--text-hi);
  text-align: center;
}
.linkhub-cover__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Framed on the face rather than the centre of the frame: a straight cover
     crop of a head-and-shoulders portrait puts the chin in the middle and the
     forehead against the top edge. */
  object-position: 50% 6%;
}
/* The fade. Stops well short of the top so the face is never veiled, then
   goes to solid ink so the text below sits on flat colour rather than on a
   busy corner of the photograph. */
.linkhub-cover__veil {
  position: absolute;
  inset: 0;
  /* Vertical only. The sides stay sharp against the card edge, as in the
     reference — an earlier pass feathered them too, which softened the whole
     picture into a vignette instead of leaving a clean photograph. */
  background: linear-gradient(to bottom,
              rgba(5, 7, 15, 0) 42%,
              rgba(5, 7, 15, 0.45) 58%,
              rgba(5, 7, 15, 0.9) 72%,
              var(--ink) 84%);
}
.linkhub-cover__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 var(--s4) var(--s5);
}

/* ---------- The body ---------- */
/* No background of its own: it is the same card, continuing below the photo. */
.linkhub-body {
  position: relative;
  padding: var(--s2) var(--s4) var(--s6);
}
/* The watermark moved down here when the cover took the top of the card. It
   has to sit fully inside the panel: an earlier pass ran it to 118% width and
   let the panel crop it, which showed three disconnected diagonals and read as
   a rendering artefact rather than a mark. Masked, not an <img>, so it takes a
   brand colour and cannot be dragged off the page. */
.linkhub-body::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1000 / 778;
  width: min(72%, 300px);
  top: var(--s5);
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask: url(../brand_assets/images/nbk-logo.svg) no-repeat center / contain;
          mask: url(../brand_assets/images/nbk-logo.svg) no-repeat center / contain;
  background-color: var(--gold);
  opacity: 0.05;
}
.linkhub-body > * { position: relative; z-index: 1; }
/* On /recommends the body holds nothing but the empty-state box, so the mark
   anchored to the top of the body floats above it and gets clipped by the
   viewport rather than framed by anything. There, the box takes the mark
   instead and centres it on itself. */
.linkhub-body--soon::before { display: none; }

/* Only one panel is on screen at a time once the tab script runs. Without it
   both stay visible and stacked, each under its own heading, which is a
   perfectly usable page — so the markup ships them both open. */
.linkhub-panel[hidden] { display: none; }

/* Gold is 1.4:1 on paper. Every place the dark page used it as text has to
   flip to navy inside the panel, exactly as the light theme does globally. */
/* Nothing to re-tint: the body is dark again, so .eyebrow, the badges and the
   row marks all keep the gold the dark palette gives them. */

/* ---------- Identity ---------- */
.linkhub-id { text-align: center; margin-bottom: var(--s4); }
/* The only round thing on the site. A portrait reads as a person rather
   than a brand, which is what someone tapping a link in a bio expects. */
.linkhub-id__photo {
  display: block;
  width: 112px; height: 112px;
  margin: 0 auto var(--s3);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--lt-line-strong),
              0 0 0 5px rgba(2, 1, 137, 0.07),
              0 18px 40px -22px rgba(11, 17, 66, 0.5);
}
.linkhub-id__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-hi);
}
.linkhub-id__role {
  margin-top: var(--s1);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.linkhub-id__bio {
  margin: var(--s2) auto 0;
  max-width: 30ch;
  font-size: 0.9rem;
  color: var(--text-mid);
}

/* ---------- Groups ---------- */
/* .linkhub__group is a <section>, and the global `section` rule gives it
   var(--s8) of padding top and bottom. On a full-width band that is the
   right rhythm; between two link rows it is a 200px hole. Reset it. */
.linkhub__group { padding: 0; margin-top: var(--s6); }
.linkhub__heading { margin-bottom: var(--s3); }
.linkhub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

/* ---------- The row ---------- */
.linkrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--base) var(--ease-out),
              background var(--base) var(--ease-out),
              transform var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out);
}
.linkrow:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
}
.linkrow:active { transform: translateY(0); }
/* The global :focus-visible sets border-radius:4px, which snaps this card's
   corners square while it is focused. Keep the row's own radius so the ring
   traces the shape it is actually ringing. */
.linkrow:focus-visible { border-radius: var(--r-lg); }

.linkrow__mark {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold);
  overflow: hidden;
}
.linkrow__mark svg { width: 20px; height: 20px; }
/* Every logo here is an app icon: square, and already carrying its own
   background (Klarna pink, Lloyds green, Monzo near-black). So they fill the
   chip edge to edge and the 12px radius hands back the icon you'd see on a
   phone home screen. Padding them onto a white tile instead put a white
   border around each coloured square, which read as a rendering fault.

   The white floor stays, because it costs nothing and it is what a logo
   that is a bare transparent PNG would otherwise fall through to. Likewise
   object-fit: contain rather than cover, so a logo that arrives non-square
   is letterboxed onto that floor instead of being cropped into it. */
.linkrow__mark--logo { background: #fff; }
.linkrow__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* min-width:0 is load-bearing. Without it a long label refuses to wrap and
   shoves the badge and arrow off the right edge of a 390px phone. */
.linkrow__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linkrow__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--text-hi);
}
.linkrow__sub {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-mid);
}
/* Small, but never hidden: a referral row has to say so on the row itself,
   not only in the disclosure above it. */

/* ---------- Offer expiry ----------
   Sits beside the affiliate pill rather than in the badge slot on the right:
   a date is three or four times the width of a price, and on a 390px row that
   width has to come out of the title. As secondary metadata it belongs with
   the other secondary metadata.

   The date ships as a plain string plus a machine-readable data-expires, and
   js/linkhub.js decides at page load whether it is near or past. That matters
   because this page is synced by hand: computing the state at sync time would
   freeze it, and an offer would still read "ends in 3 days" a month later. */
.linkrow__expiry {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  margin-left: 0.3em;
  vertical-align: 1px;
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
}
.linkrow__expiry svg { width: 9px; height: 9px; flex-shrink: 0; }
/* Inside a fortnight it earns the gold. Past its date it turns to the flag
   colour and the whole row dims, so a stale offer is obvious to a visitor and
   to whoever needs to go and unpublish it. */
.linkrow__expiry.is-soon { color: var(--gold); border-color: rgba(246, 197, 19, 0.45); }
.linkrow__expiry.is-expired { color: var(--flag); border-color: rgba(228, 87, 79, 0.5); }
.linkrow.is-expired { opacity: 0.55; }
.linkrow.is-expired:hover { opacity: 0.8; }

.linkrow__badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
}

.linkrow__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-low);
  transition: color var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.linkrow__arrow svg { width: 16px; height: 16px; }
.linkrow:hover .linkrow__arrow { color: var(--gold); transform: translateX(3px); }

/* ---------- Pinned: the one paid thing ---------- */
.linkrow--pinned {
  background: var(--gold);
  border-color: var(--gold);
  padding: var(--s3);
  box-shadow: 0 14px 34px -14px rgba(246, 197, 19, 0.45);
}
.linkrow--pinned:hover {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 18px 40px -14px rgba(246, 197, 19, 0.55);
}
.linkrow--pinned .linkrow__mark { background: rgba(4, 6, 15, 0.12); color: #0a0d1f; }
.linkrow--pinned .linkrow__label { color: #0a0d1f; font-size: 1.02rem; }
.linkrow--pinned .linkrow__sub { color: rgba(10, 13, 31, 0.72); }
.linkrow--pinned .linkrow__badge { color: var(--gold); background: #0a0d1f; }
.linkrow--pinned .linkrow__arrow { color: rgba(10, 13, 31, 0.55); }
.linkrow--pinned:hover .linkrow__arrow { color: #0a0d1f; }

/* ---------- Socials & foot ---------- */
/* The social row now sits under the role line rather than at the foot: on a
   bio page these are a statement of where you are, not an afterthought. It
   reuses .footer__socials verbatim so js/main.js keeps resolving the hrefs
   from config, and only the colours are re-pointed for paper. */
.linkhub-social { display: flex; justify-content: center; margin-top: var(--s3); }
.linkhub-social .footer__socials { gap: var(--s1); }
.linkhub-cover .footer__socials a {
  width: 38px; height: 38px;
  border-color: var(--line-strong);
  color: var(--text-hi);
}
.linkhub-cover .footer__socials a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(246, 197, 19, 0.12);
}

/* ---------- The section tabs ----------
   Linktree's segmented Links / Shop pill, in brand rather than their grey on
   black. Two real <a>s, not a JS toggle: the two sections are two pages, so
   the tab is navigation and should behave like it — right-click, middle-click
   and share all work, and each has its own URL to put in a bio.

   The active tab is marked with aria-current="page" and styled off that, so
   there is one source of truth for which one is lit rather than a class that
   can drift out of step with the href. */
.linkhub-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 300px;
  margin: var(--s4) auto 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
}
.linkhub-tabs__tab {
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color var(--fast) var(--ease-out),
              background var(--fast) var(--ease-out),
              box-shadow var(--fast) var(--ease-out);
}
.linkhub-tabs__tab[aria-current="page"] {
  background: #fff;
  color: var(--navy-brand);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.linkhub-tabs__tab:not([aria-current="page"]):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- The "view all" card ----------
   The Recommends tab's one card. Sized like the YouTube card rather than a
   link row, because at this point it is the only thing in its section and a
   single 72px row in an empty panel reads as a page that failed to load. */
.viewall {
  display: block;
  padding: var(--s5) var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  transition: border-color var(--base) var(--ease-out),
              transform var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out);
}
.viewall:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.7);
}
.viewall:active { transform: translateY(0); }
.viewall:focus-visible { border-radius: var(--r-lg); }
.viewall__mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto var(--s3);
  border-radius: 15px;
  background: var(--gold-soft);
  color: var(--gold);
}
.viewall__mark svg { width: 23px; height: 23px; }
.viewall__label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}
.viewall__sub {
  display: block;
  margin: var(--s2) auto 0;
  max-width: 32ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.viewall__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.viewall__cta svg { width: 14px; height: 14px; transition: transform var(--fast) var(--ease-out); }
.viewall:hover .viewall__cta svg { transform: translateX(3px); }

/* ---------- Coming soon (empty /recommends) ---------- */
.linkhub-soon {
  position: relative;
  overflow: hidden;
  margin-top: var(--s5);
  padding: var(--s7) var(--s4);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
}
/* Centred on the box, both axes, and clipped by it — so the monogram reads as
   the backing of this panel rather than as something drifting behind it. */
.linkhub-soon::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1000 / 778;
  width: min(78%, 300px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask: url(../brand_assets/images/nbk-logo.svg) no-repeat center / contain;
          mask: url(../brand_assets/images/nbk-logo.svg) no-repeat center / contain;
  background-color: var(--gold);
  opacity: 0.05;
}
.linkhub-soon > * { position: relative; z-index: 1; }
.linkhub-soon__mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto var(--s3);
  border-radius: 15px;
  background: var(--gold-soft);
  color: var(--gold);
}
.linkhub-soon__mark svg { width: 23px; height: 23px; }
.linkhub-soon__title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}
.linkhub-soon__body {
  margin: var(--s2) auto 0;
  max-width: 34ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.linkhub-soon .btn { margin-top: var(--s4); }

/* ---------- The YouTube card ----------
   Second in the hierarchy and styled to say so. Gold is the paid thing and
   stays unique to it; this is the best free thing, so it takes brand navy —
   the only other saturated surface on the page. The white rows below then
   read as the quiet tier, which is what they are. */
.ytcard {
  display: block;
  margin-top: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 120% 140% at 88% 0%, rgba(246, 197, 19, 0.16), transparent 60%),
    var(--navy-brand);
  color: #fff;
  transition: transform var(--base) var(--ease-out),
              box-shadow var(--base) var(--ease-out);
  box-shadow: 0 18px 40px -22px rgba(2, 1, 137, 0.9);
}
.ytcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 52px -22px rgba(2, 1, 137, 0.95);
}
.ytcard:active { transform: translateY(0); }
.ytcard:focus-visible { border-radius: var(--r-lg); }

.ytcard__top { display: flex; align-items: center; gap: var(--s2); }
.ytcard__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 28px;
  border-radius: 7px;
  background: #ff0033;
  color: #fff;
}
.ytcard__mark svg { width: 17px; height: 17px; }
.ytcard__label {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ytcard__arrow { margin-left: auto; color: rgba(255, 255, 255, 0.55); flex-shrink: 0; transition: color var(--fast), transform var(--fast); }
.ytcard__arrow svg { width: 16px; height: 16px; }
.ytcard:hover .ytcard__arrow { color: #fff; transform: translateX(3px); }

.ytcard__body {
  margin: var(--s2) 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
/* The ask. A dated goal is the whole reason this card exists, so it gets a
   rule above it and the gold that nothing else at this level is allowed. */
.ytcard__goal {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.ytcard__goal svg { width: 14px; height: 14px; flex-shrink: 0; }

.linkhub-foot {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  text-align: center;
}
.linkhub-foot__home {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-mid);
  transition: color var(--fast) var(--ease-out);
}
.linkhub-foot__home:hover { color: var(--gold); }
.linkhub-foot__tld { color: var(--gold); }
.linkhub-foot__legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}
.linkhub-foot__legal a { color: var(--text-low); transition: color var(--fast) var(--ease-out); }
.linkhub-foot__legal a:hover { color: var(--gold); }
.linkhub-foot__note {
  margin-top: var(--s3);
  max-width: 40ch;
  margin-inline: auto;
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--text-low);
}
.linkhub-foot__copy {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-low);
}

@media (max-width: 640px) {
  .linkhub-page { padding: 0 0 var(--s5); }
  .linkhub-wrap { padding: 0 var(--s2); }
  /* Squarer corners and less inset on a phone: at this width the panel is
     nearly the whole screen, and a 28px radius on a full-bleed card reads as
     a mistake rather than a card. */
  .linkhub-shell { border-radius: 22px; }
  .linkhub-body { padding: var(--s2) var(--s3) var(--s5); }
  .linkhub-cover__inner { padding: 0 var(--s3) var(--s4); }
  .linkhub-id__photo { width: 96px; height: 96px; }
  .linkhub-id__name { font-size: 1.35rem; }
  .linkrow { gap: var(--s2); }
  .linkrow__mark { width: 40px; height: 40px; border-radius: 11px; }
  .ytcard { padding: var(--s3); }
}

/* The panel is a paper card on ink. In light mode the ground is already
   paper, so without a ring the card's edge disappears and the watermark
   looks like it is loose on the page. */

/* =========================================================
   Light theme: <html data-theme="light"> via the nav bulb.
   Dark is the default and is untouched; everything below only
   remaps tokens and patches literals that assume a dark page.
   ========================================================= */
[data-theme="light"] {
  --ink: #fcfbf7;
  --ink-2: #f1eee4;
  --surface: #ffffff;
  --surface-2: #f7f5ef;
  --text-hi: #0b1142;
  --text-mid: #494f75;
  --text-low: #61688d;
  --line: rgba(2, 1, 137, 0.10);
  --line-strong: rgba(2, 1, 137, 0.22);
  --gold-soft: rgba(217, 168, 0, 0.14);
}

/* --- nav glass + mobile menu --- */
[data-theme="light"] .nav.is-scrolled { background: rgba(252, 251, 247, 0.85); }
[data-theme="light"] .nav__drop-panel {
  background: #ffffff;
  border-color: var(--lt-line-strong);
  box-shadow: 0 30px 70px -34px rgba(11, 17, 66, 0.35);
}
[data-theme="light"] .nav__drop-head { color: var(--lt-low); border-bottom-color: var(--lt-line); }
[data-theme="light"] .nav__drop-item { color: var(--lt-mid); }
[data-theme="light"] .nav__drop-item:hover { color: var(--lt-hi); }
[data-theme="light"] .nav__drop-item svg { stroke: var(--navy-brand); }
[data-theme="light"] .nav__drop-foot { border-top-color: var(--lt-line); }
[data-theme="light"] .nav__drop-all { color: var(--navy-brand); }
@media (max-width: 860px) {
  [data-theme="light"] .nav { background: rgba(252, 251, 247, 0.85); }
  [data-theme="light"] .nav__links.is-open { background: rgba(252, 251, 247, 0.97); }
}

/* --- engraved backdrop arcs: navy linework on paper (strokes are
       hardcoded attributes in every page's SVG; CSS wins over them) --- */
[data-theme="light"] .backdrop__arcs g { stroke: var(--navy-brand); stroke-opacity: 0.05; }

/* --- gold used as TEXT on the page background flips to navy;
       decorative gold icons deepen so they hold on paper --- */
[data-theme="light"] .eyebrow { color: var(--navy-brand); }
[data-theme="light"] .eyebrow::before, [data-theme="light"] .eyebrow::after { background: var(--navy-brand); }
[data-theme="light"] .pen,
[data-theme="light"] .accent-script,
[data-theme="light"] .ledger__num em,
[data-theme="light"] .tier--featured .tier__ref em,
[data-theme="light"] .tier__focus-label,
[data-theme="light"] .tier__focus li span em,
[data-theme="light"] .session-upsell__label,
[data-theme="light"] .session-upsell__link,
[data-theme="light"] .step::before,
[data-theme="light"] .content__card-icon,
[data-theme="light"] .preview__caption,
[data-theme="light"] .landing-hero__price,
[data-theme="light"] .landing-hero__session a,
[data-theme="light"] .product-header__price,
[data-theme="light"] .bundle-card__save,
[data-theme="light"] .tag,
[data-theme="light"] .form-success,
[data-theme="light"] .faq__item summary::after,
[data-theme="light"] .story-video__play { color: var(--navy-brand); }
[data-theme="light"] .hero__meta svg,
[data-theme="light"] .trust-badges li svg,
[data-theme="light"] .testimonial-card__stars,
[data-theme="light"] .testimonial-card__delta,
[data-theme="light"] .testimonial-card__avatar,
[data-theme="light"] .testimonial-card blockquote::before,
[data-theme="light"] .testimonial-card blockquote::after { color: var(--gold-deep); }
[data-theme="light"] .work__list--dark li::before,
[data-theme="light"] .work__list--dark li::after { border-color: var(--navy-brand); }

/* gold hover states read weak on paper: deepen */
[data-theme="light"] .btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
[data-theme="light"] .nav__community:hover,
[data-theme="light"] .faq__item summary:hover,
[data-theme="light"] .back-link:hover,
[data-theme="light"] .footer__links a:hover,
[data-theme="light"] .footer__compliance a:hover,
[data-theme="light"] .content__card:hover .content__card-arrow { color: var(--gold-deep); }
[data-theme="light"] .footer__socials a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
/* The lead sentence is brand gold on the dark footer at 11.8:1. The same
   value is 1.4:1 on paper, so light mode gets the deepened one: same
   colour, still readable. A logo may sit at 1.4:1; a disclaimer may not. */
[data-theme="light"] .footer__compliance strong { color: var(--gold-ink); }
[data-theme="light"] .form--dark input:focus { border-color: var(--navy-brand); box-shadow: 0 0 0 3px rgba(2, 1, 137, 0.12); }

/* --- white-alpha hairlines vanish on paper --- */
[data-theme="light"] .pain-card { border-color: var(--lt-line); background: rgba(2, 1, 137, 0.03); }
[data-theme="light"] .edition-tabs button { border-color: var(--lt-line-strong); }
[data-theme="light"] .viewer__bar { border-bottom-color: var(--lt-line-strong); }
[data-theme="light"] .viewer__close { border-color: var(--lt-line-strong); color: var(--lt-hi); }
[data-theme="light"] .viewer__close:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* --- paper/white cards need a ring + softer shadow on a paper page --- */
[data-theme="light"] .audit__doc,
[data-theme="light"] .paper-doc,
[data-theme="light"] .calc-card,
[data-theme="light"] .product-card,
[data-theme="light"] .proof-card,
[data-theme="light"] .auth-card,
[data-theme="light"] .mockup,
[data-theme="light"] .calc-tile,
[data-theme="light"] .sv-card,
[data-theme="light"] .sv-panel,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .tier,
[data-theme="light"] .bundle-card,
[data-theme="light"] .content__feature {
  box-shadow: 0 0 0 1px var(--paper-line), 0 18px 40px -24px rgba(11, 17, 66, 0.2);
}
[data-theme="light"] .btn--secondary { box-shadow: 0 0 0 1px var(--lt-line-strong); }
[data-theme="light"] .section-light { box-shadow: 0 -24px 50px -30px rgba(11, 17, 66, 0.12); }

/* navy glow gradients tuned down on light surfaces */
[data-theme="light"] .content__feature { background: linear-gradient(145deg, #ffffff, rgba(2, 1, 137, 0.06)); }
[data-theme="light"] .bundle-card { background: linear-gradient(120deg, #ffffff, rgba(2, 1, 137, 0.07) 150%); }

/* --- pinned-dark bands ------------------------------------
   .section-ink already re-declares the dark tokens, so anything
   driven by var() follows on its own. What needs undoing here is
   the handful of rules above that hardcode a light-page value ,
   navy ink and white card fills: which would land on navy-black.
   ---------------------------------------------------------- */
[data-theme="light"] .section-ink .eyebrow { color: var(--gold); }
[data-theme="light"] .section-ink .eyebrow::before,
[data-theme="light"] .section-ink .eyebrow::after { background: var(--gold); }
[data-theme="light"] .section-ink .pen,
[data-theme="light"] .section-ink .accent-script,
[data-theme="light"] .section-ink .step::before,
[data-theme="light"] .section-ink .content__card-icon,
[data-theme="light"] .section-ink .bundle-card__save,
[data-theme="light"] .section-ink .form-success,
[data-theme="light"] .section-ink .trust-badges li svg { color: var(--gold); }
[data-theme="light"] .section-ink .content__feature,
[data-theme="light"] .section-ink .product-card,
[data-theme="light"] .section-ink .bundle-card { box-shadow: none; }
[data-theme="light"] .section-ink .content__feature {
  background:
    radial-gradient(ellipse 90% 90% at 8% 0%, rgba(2, 1, 137, 0.55), transparent 55%),
    var(--surface);
}
[data-theme="light"] .section-ink .bundle-card { background: linear-gradient(120deg, var(--surface), rgba(2, 1, 137, 0.5) 150%); }
[data-theme="light"] .section-ink .form--dark input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* .final-cta pins dark on the same terms as .section-ink now, so it needs
   the same light-mode exemptions. Without these the navy-ink values above
   land on a navy-black card: the eyebrow and the inline links were
   measuring 1.18:1 against it on all five tool pages. */
[data-theme="light"] .final-cta .eyebrow { color: var(--gold); }
[data-theme="light"] .final-cta .eyebrow::before,
[data-theme="light"] .final-cta .eyebrow::after { background: var(--gold); }
[data-theme="light"] .final-cta .pen,
[data-theme="light"] .final-cta .accent-script,
[data-theme="light"] .final-cta .landing-hero__session a,
[data-theme="light"] .final-cta .trust-badges li svg { color: var(--gold); }
/* the gold panel variant paints its own dark-on-gold text, so it opts out */
[data-theme="light"] .final-cta__inner .eyebrow { color: inherit; }

/* The tier cards go white in light mode, so the coming-soon scrim has to
   flip with them: a dark veil over pale blurred text reads as mud. */
[data-theme="light"] .tier--soon .tier__veil {
  background: radial-gradient(ellipse 75% 55% at 50% 50%, rgba(252, 251, 247, 0.86), rgba(252, 251, 247, 0.5));
}
[data-theme="light"] .tier__veil-badge {
  color: var(--navy-brand);
  border-color: rgba(2, 1, 137, 0.35);
  background: rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .tier__veil-note { color: var(--lt-mid); }

/* --- light bands -------------------------------------------
   Quote cards sit on a light panel in both themes, so the light
   theme's gold-on-paper treatment has to yield to the navy one
   .section-light already specifies (same specificity, later in
   the file, so it would otherwise win). --- */
[data-theme="light"] .section-light .testimonial-card__delta,
[data-theme="light"] .section-light .testimonial-card__avatar,
[data-theme="light"] .section-light .testimonial-card blockquote::before,
[data-theme="light"] .section-light .testimonial-card blockquote::after { color: var(--navy-brand); }
/* a flattened second panel must stay flat here too */
[data-theme="light"] .section-light + .section-light { box-shadow: none; }

/* --- link hub (/links) ---------------------------------------------
   The rows ride --surface/--line and flip on their own. Only the gold
   needs help: brand gold is 1.4:1 on paper, so text and icons deepen.
   The pinned card is exempt throughout — it is a gold panel with ink on
   it in both themes, and re-tinting its contents would break the one
   element the page is built around. Hence the :not() on every rule. */
/* .linkhub-id__role is deliberately NOT re-tinted here any more. It used to
   sit on the paper panel, where gold is 1.4:1 and had to flip to navy. It now
   sits on the cover photo, which is dark in BOTH themes — so flipping it made
   it navy-on-black in light mode, which is close to invisible. Anything that
   lives on the cover keeps its dark-page colours. */
/* The hovers take --gold-deep, matching .footer__links a:hover. The .com is
   not a hover though — it is persistent small text, and --gold-deep is 1.9:1
   on paper. That is what --gold-ink is for. */
/* A white row on paper has no hairline to speak of, so it gets the ring
   and shadow the other pale cards get. */
  box-shadow: 0 0 0 1px var(--paper-line), 0 10px 24px -20px rgba(11, 17, 66, 0.35);
}

/* --- nav bulb --- */
.nav__theme {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text-mid);
  cursor: pointer;
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.nav__theme:hover { color: var(--gold); border-color: var(--gold); }
.nav__theme svg { width: 19px; height: 19px; }
[data-theme="light"] .nav__theme { color: var(--gold-deep); }
[data-theme="light"] .nav__theme:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* =========================================================
   "Save as PDF": printable budget report
   The tracker keeps a #budgetReport block in sync with the live
   numbers. It is hidden on screen; in print everything else is
   hidden and it becomes the page. Colours here are hard-coded
   rather than themed, so the sheet prints identically whether
   the visitor is in light or dark mode.
   ========================================================= */
.bp { display: none; }

@media print {
  @page { size: A4 portrait; margin: 13mm 14mm 11mm; }

  html, body { background: #fff !important; }
  body > * { display: none !important; }
  body > .bp { display: block !important; }

  .bp {
    --bp-ink: #12173a;
    --bp-muted: #6b7089;
    --bp-navy: #020189;
    --bp-line: rgba(18, 23, 58, 0.15);
    --bp-rule: rgba(18, 23, 58, 0.45);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-family: var(--font-body);
    font-size: 9.6pt;
    line-height: 1.45;
    color: var(--bp-ink);
  }

  /* masthead */
  .bp__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6mm;
    padding-bottom: 3mm;
    border-bottom: 1.2pt solid var(--bp-rule);
    margin-bottom: 5mm;
  }
  .bp__brand { display: flex; align-items: center; gap: 2.6mm; }
  .bp__brand img { width: 32px; height: auto; }
  .bp__wordmark {
    font-family: var(--font-display);
    font-size: 11.5pt;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }
  .bp__brandsub {
    display: block;
    margin-top: 0.7mm;
    font-family: var(--font-mono);
    font-size: 6.4pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bp-muted);
  }
  .bp__meta { text-align: right; }
  .bp__title {
    display: block;
    font-family: var(--font-display);
    font-size: 13pt;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .bp__date {
    font-family: var(--font-mono);
    font-size: 6.8pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-muted);
  }

  /* headline figures */
  .bp__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1pt solid var(--bp-line);
    border-radius: 2mm;
    overflow: hidden;
    margin-bottom: 5mm;
  }
  .bp__stat { padding: 2.6mm 3mm; border-right: 1pt solid var(--bp-line); }
  .bp__stat:last-child { border-right: 0; }
  .bp__stat span {
    display: block;
    margin-bottom: 1mm;
    font-family: var(--font-mono);
    font-size: 6.2pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-muted);
  }
  .bp__stat b {
    font-family: var(--font-mono);
    font-size: 11.5pt;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bp-navy);
  }
  .bp__stat--good b { color: #2f7d57; }
  .bp__stat--over b { color: #a43737; }

  /* split bar */
  .bp__split { margin-bottom: 5.5mm; }
  .bp__splitbar {
    display: flex;
    height: 6.5mm;
    border: 1pt solid var(--bp-line);
    border-radius: 1.4mm;
    overflow: hidden;
  }
  .bp__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 6.8pt;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
  }
  .bp__seg--flex { color: #3a2f00; }
  .bp__seg--left { color: var(--bp-muted); }
  .bp__key {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5mm 5mm;
    margin-top: 2mm;
    font-family: var(--font-mono);
    font-size: 6.8pt;
    color: var(--bp-muted);
  }
  .bp__key li { display: flex; align-items: center; gap: 1.4mm; }
  .bp__key b { color: var(--bp-ink); }
  .bp__dot { width: 2.4mm; height: 2.4mm; border-radius: 0.6mm; flex-shrink: 0; }

  /* one block per bucket: never split across a page */
  .bp__cat { break-inside: avoid; page-break-inside: avoid; margin-bottom: 5mm; }
  .bp__cat--fixed  { --bp-accent: #4b5dd8; }
  .bp__cat--flex   { --bp-accent: #b8860b; }
  .bp__cat--future { --bp-accent: #3e9c6e; }
  .bp__cat-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4mm;
    padding-bottom: 1.5mm;
    border-bottom: 1.2pt solid var(--bp-accent);
    margin-bottom: 1.2mm;
  }
  .bp__cat-name { font-family: var(--font-display); font-size: 10pt; font-weight: 700; }
  .bp__cat-name em { font-style: normal; font-weight: 600; color: var(--bp-accent); }
  .bp__cat-target {
    font-family: var(--font-mono);
    font-size: 6.8pt;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bp-muted);
    white-space: nowrap;
  }
  .bp__tbl { width: 100%; border-collapse: collapse; }
  .bp__tbl td { padding: 1.15mm 0; vertical-align: baseline; }
  /* was td + td, which now also caught the due column: the money column
     is addressed by class instead so the two can differ */
  .bp__tbl .bp__amt {
    width: 27mm;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
  }
  /* only rendered for buckets that actually have due days set */
  .bp__tbl .bp__due {
    width: 14mm;
    text-align: right;
    padding-right: 3mm;
    font-family: var(--font-mono);
    font-weight: 500;
    white-space: nowrap;
    color: var(--bp-muted);
  }
  .bp__tbl thead th {
    padding-bottom: 1mm;
    border-bottom: 0.5pt solid var(--bp-line);
    font-family: var(--font-mono);
    font-size: 5.9pt;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: var(--bp-muted);
  }
  .bp__tbl thead th.bp__due,
  .bp__tbl thead th.bp__amt { text-align: right; }
  .bp__tbl tbody tr + tr td { border-top: 0.5pt dotted var(--bp-line); }
  .bp__tbl tbody .bp__zero td { color: var(--bp-muted); }
  .bp__tbl tfoot td {
    padding-top: 1.7mm;
    border-top: 1pt solid var(--bp-rule);
    font-family: var(--font-mono);
    font-size: 6.8pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bp-muted);
  }
  .bp__tbl tfoot td + td {
    font-size: 10.5pt;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--bp-accent);
  }
  .bp__cat-foot {
    display: flex;
    justify-content: space-between;
    gap: 4mm;
    margin-top: 1.2mm;
    font-family: var(--font-mono);
    font-size: 6.8pt;
    color: var(--bp-muted);
  }
  .bp__cat-foot .is-over  { color: #a43737; font-weight: 600; }
  .bp__cat-foot .is-under { color: #2f7d57; font-weight: 600; }
  .bp__cat-foot .is-on    { color: var(--bp-navy); font-weight: 600; }

  /* adaptive read + small print */
  .bp__note {
    break-inside: avoid;
    margin: 0;
    padding: 2mm 0 2mm 3.4mm;
    border-left: 2.2pt solid #b8860b;
    font-size: 9pt;
  }
  .bp__note b {
    display: block;
    margin-bottom: 1mm;
    font-family: var(--font-mono);
    font-size: 6.4pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bp-muted);
  }
  .bp__foot {
    display: flex;
    justify-content: space-between;
    gap: 5mm;
    margin-top: 6mm;
    padding-top: 2.4mm;
    border-top: 1pt solid var(--bp-line);
    font-family: var(--font-mono);
    font-size: 6.4pt;
    letter-spacing: 0.05em;
    color: var(--bp-muted);
  }
  .bp__foot span:last-child { text-align: right; }
}