/* ============================================================
   TAXFUNDERS FINANCIAL GROUP — Premium Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

/* ---- Design Tokens ---- */
:root {
  --navy-900: #070e1d;
  --navy-800: #0a1628;
  --navy-700: #0d1f3c;
  --navy-600: #112650;
  --navy-500: #1a3568;
  --blue-600: #0a2dc2;
  --blue-500: #1a3fd4;
  --sky-400: #02c1ff;
  --sky-300: #38cfff;
  --green-600: #57ab28;
  --green-500: #57ab28;
  --lime-400: #afdd2c;
  --teal-500: #44b59c;
  --indigo-700: #293382;
  --white: #ffffff;
  --gray-100: #f0f4ff;
  --gray-200: #d4ddf0;
  --text-muted: #7a93c0;
  --border: #1e3060;
  --border-light: #2a4080;

  --surface: #0c1526;
  --surface-raised: #101b30;

  /* Bold-direction palette: navy/sky/green stay the primary brand colors,
     used deliberately across headlines, icons, and hover glow — not restrained. */
  --gradient-green: linear-gradient(135deg, #4a9420 0%, #57ab28 100%);
  --gradient-hero: radial-gradient(ellipse at 60% 40%, #0d1f3c 0%, #070e1d 65%);

  --shadow-card: 0 2px 24px rgba(0,0,0,0.45);
  --shadow-nav: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.5);

  --font: 'Inter', sans-serif;
  --font-serif: 'Cormorant', Georgia, serif;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-xxl: 20px;

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --section-py: clamp(64px, 8vw, 112px);
  --container: 1200px;
  --container-sm: 800px;

  /* ---- Extended tokens (homepage rebuild, propagating site-wide during rollout) ----
     Spacing ladder: single 8px-based scale. New component CSS should reference these
     instead of hand-typed px values. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;

  /* Motion: interactive feedback vs. entrance/reveal are deliberately different
     families — fast+confident for hover/press, slow+expo for scroll-reveal. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.9s;

  /* Previously-ungoverned colors, now tokenized */
  --color-star: #f59e0b;
  --color-destructive: #ef4444;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--navy-900);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font-family: var(--font); }

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

/* ---- Typography ---- */
.display-1 { font-family: var(--font-serif); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; }
.display-2 { font-family: var(--font-serif); font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.heading-1 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.heading-2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.3; }
.heading-3 { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; line-height: 1.4; }
.body-lg { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; }
.body-sm { font-size: 0.875rem; line-height: 1.6; }
.label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.text-muted { color: var(--text-muted); }
.text-green { color: var(--green-600); }
.text-sky { color: var(--sky-400); }
.text-white { color: var(--white); }

.gradient-text {
  color: var(--sky-400);
}
.gradient-text-green {
  color: var(--green-500);
}
.display-1 .gradient-text, .display-2 .gradient-text, .heading-1 .gradient-text,
.display-1 .gradient-text-green, .display-2 .gradient-text-green, .heading-1 .gradient-text-green {
  font-style: italic;
  font-weight: 500;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.container-sm {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.section { padding: var(--section-py) 0; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }

/* ---- Section Labels ---- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-400);
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--sky-400);
  border-radius: 2px;
  flex-shrink: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.section-label::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--sky-400);
  border-radius: 2px;
  flex-shrink: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.reveal.revealed .section-label::before, .section-label.revealed::before,
.reveal.revealed .section-label::after, .section-label.revealed::after {
  transform: scaleX(1);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.3s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.3s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); position: relative; z-index: 1; }
.btn:hover svg { transform: translateX(4px); }

/* Fill-wipe hover: a directional sweep instead of an instant color swap. */
.btn-primary, .btn-sky {
  isolation: isolate;
}
.btn-primary::before, .btn-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn-primary:hover::before, .btn-sky:hover::before { transform: scaleX(1); }

.btn-primary {
  background: var(--green-600);
  color: var(--navy-900);
  border: 1px solid var(--green-600);
  box-shadow: var(--shadow-card);
}
.btn-primary::before { background: var(--green-500); }
.btn-primary:hover {
  transform: translateY(-1px);
  border-color: var(--green-500);
  box-shadow: var(--shadow-card);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border-light);
}
.btn-secondary:hover {
  background: rgba(2,193,255,0.06);
  border-color: var(--sky-400);
  color: var(--sky-400);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(2,193,255,0.35);
}

.btn-sky {
  background: var(--blue-600);
  color: var(--white);
  border: 1px solid var(--blue-600);
  box-shadow: var(--shadow-card);
}
.btn-sky::before { background: var(--blue-500); }
.btn-sky:hover {
  transform: translateY(-1px);
  border-color: var(--blue-500);
}

.btn-lg { padding: 19px 34px; font-size: 0.875rem; }
.btn-sm { padding: 11px 18px; font-size: 0.75rem; letter-spacing: 0.08em; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  transition: var(--transition);
}
.card:hover {
  border-color: var(--border-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.card-glow:hover {
  box-shadow: var(--shadow-card);
  border-color: rgba(87,171,40,0.3);
}

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition);
}
.nav.scrolled {
  background: rgba(7,14,29,0.97);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-nav);
}
/* On phones the bar sits directly over large white body and heading text, and
   the 3% transparency above was enough for that text to ghost through while
   scrolling. Same navy, fully opaque — solid, not lighter. Logo, toggle,
   height, padding, border and behaviour are untouched. */
@media (max-width: 768px) {
  .nav.scrolled { background: #070e1d; }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo img {
  width: 210px;
  height: auto;
  object-fit: contain;
}
/* The horizontal wordmark (1520x314, ~4.84:1) is sized by width at each
   tier rather than by a fixed height, so it shrinks gracefully without
   ever distorting or forcing the header taller than it needs to be. */
@media (max-width: 1440px) { .nav-logo img { width: 200px; } }
@media (max-width: 1024px) { .nav-logo img { width: 185px; } }
@media (max-width: 768px)  { .nav-logo img { width: 175px; } }
@media (max-width: 390px)  { .nav-logo img { width: 160px; } }
@media (max-width: 360px)  { .nav-logo img { width: 150px; } }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-200);
  border-radius: 8px;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--sky-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}
.nav-links a.active { color: var(--sky-400); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}
/* The fixed nav bar (z-index 1000) sits above the mobile-menu overlay
   (999) so the logo stays visible while the menu is open. This used to
   hide the hamburger at that point, because the overlay carried its own
   close (X) button at nearly the same coordinates and two controls were
   stacking.

   The approved mobile design has one control for both states: the same
   rounded square holds the three lines and then the X. The overlay's
   separate .mobile-close is gone, so the button stays visible and
   morphs instead — see the mobile navigation block at the end of this
   file for the transform, and main.js for the focus handling that
   follows from it. */

/* ---- Mobile Nav ---- */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--navy-900);
  flex-direction: column;
  padding: 100px 32px 48px;
  gap: 8px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1.25rem;
  font-weight: 500;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--gray-200);
  transition: var(--transition);
}
.mobile-menu a:hover { color: var(--sky-400); }
.mobile-menu .btn { margin-top: 24px; width: 100%; justify-content: center; }
/* .mobile-menu a (0,1,1) otherwise beats .btn-primary's own color (0,1,0),
   leaving the green CTA's text in the pale link gray instead of the dark
   navy the button needs for contrast. Scoped here rather than changing
   .btn-primary globally, since every other use of it is already correct. */
.mobile-menu .btn-primary { color: var(--navy-900); }

/* ---- Hero ---- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 0;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(2,193,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 50%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(87,171,40,0.035) 0%, transparent 70%);
  pointer-events: none;
}
/* Full-bleed hero photo — bleeds off the right/top edges and dissolves into
   the navy background on its left and bottom so it reads as one scene, not a boxed image. */
.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 32%;
}
/* Colour + readability scrims layered over the photo: unify the photo's neutral
   black with the navy palette, darken the left where text sits, and fade the
   bottom into the section below. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--navy-900) 0%, var(--navy-900) 26%, rgba(7,14,29,0.55) 44%, transparent 62%),
    linear-gradient(to bottom, transparent 55%, rgba(7,14,29,0.85) 90%, var(--navy-900) 100%),
    linear-gradient(rgba(7,14,29,0.12), rgba(7,14,29,0.12));
}
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 2;
  max-width: 560px;
}
/* Hidden by default (mobile keeps its own natural wrap); shown only at
   desktop widths for an intentional two-line break instead of the
   headline wrapping into four uneven lines there. */
.hero-break-desktop { display: none; }
/* Mobile-only intentional break, separate from the desktop one above (that
   one is also reused at mobile widths via .hero-break-mobile on the same
   element) — keeps mobile's line break independent of any desktop tuning. */
.hero-break-mobile-2 { display: none; }
@media (max-width: 767px) {
  .hero-break-mobile { display: inline; }
  /* "Your Financial Future" doesn't fit on one line at the default 48px
     mobile size (needs ~419px, only ~335px available at 375px wide) — a
     small, mobile-only reduction is what actually makes the intentional
     two-line break land cleanly instead of also wrapping mid-phrase. */
  .hero-content .display-1 { font-size: 2.375rem; }
}
@media (min-width: 1024px) {
  .hero-break-desktop { display: inline; }
  /* Match the same heading scale every other page's hero uses (display-2's
     clamp) instead of the full display-1 size — a previous attempt at this
     shrank it well below that shared scale (50px vs. the 72px used
     everywhere else), which is what made the whole hero read smaller than
     the rest of the site. */
  .hero-content .display-1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }

  /* Desktop-only rebuild: text gets a reserved column width so it never
     overlaps the photo, while the photo itself goes back to a full-bleed
     treatment (edge-to-edge on top/right/bottom) instead of sitting in a
     bordered card — a boxed photo was the thing that read as "stuck next
     to the text" rather than integrated. The soft edge blend below is what
     keeps it from being a hard seam instead. DOM order is untouched so
     mobile (which uses its own display:block stacking below 768px) is
     completely unaffected. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 860px) 1fr;
    align-items: center;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .hero-bg { grid-column: 1 / -1; grid-row: 1 / -1; }
  .hero-scrim { display: none; }
  .hero > .container {
    grid-column: 1;
    max-width: none;
    margin: 0;
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: 0;
    z-index: 2;
  }
  .hero-content { max-width: 800px; }
  /* Photo ignores the grid track and bleeds to the section's real edges;
     the grid column above exists purely to reserve the text's width. */
  .hero-photo {
    /* Deliberately NOT a grid item — an absolutely positioned element that's
       also placed in a grid track uses that track as its containing block,
       which would confine the "full-bleed" sizing below to the track
       instead of the whole section. Position it against .hero itself. */
    position: absolute;
    inset: 0;
    left: auto;
    width: 54%;
    height: auto;
    z-index: 0;
    border-radius: 0;
    box-shadow: none;
    /* Straight horizontal fade — deliberately NOT angled. An angled
       gradient's transparent/opaque boundary is a slanted line across a
       box this tall, so it lands at a different horizontal position at
       different heights: it was clearing "FUNDERS" while still fading
       "TAX" on the same text line, since those two words sit at the same
       height but different x-positions. A horizontal (to right) gradient
       fades identically at every vertical position, so the entire logo
       line clears (or doesn't) together. White (not black) is deliberate:
       some browsers mask gradients by luminance rather than alpha, and
       black reads as "hidden" under luminance masking. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 14%, white 20%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 14%, white 20%);
  }
  /* object-fit: cover was the actual root cause of the logo damage: this
     photo is a near-square image (1200x1200) inside a box that's much
     taller than it is wide, so cover has to blow the image up and crop
     away most of its width to fill that shape — and the full-width
     "TaxFunders Financial Group" text has no crop position that survives
     that math without either landing in the fade zone or being sliced off
     past the edge entirely. object-fit: contain guarantees the whole image
     — logo included — is always shown at its full width with zero
     cropping, full stop. The trade-off is the image reads smaller within
     its column (letterboxed against the dark backdrop above/below) rather
     than filling it edge to edge. */
  .hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
  /* Very light brand color grade tying the photo into the site palette —
     subtle enough to keep the founder's face and the neon logo clearly
     visible, not a heavy tint. */
  .hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(7,14,29,0.22) 0%, rgba(87,171,40,0.08) 45%, rgba(2,193,255,0.09) 100%);
    mix-blend-mode: multiply;
  }
}
/* The two-column hero above assumes a wide bench: the 54%-wide photo and an
   800px-capable text column both fit only once the viewport is roughly
   ≥1600px. Measured live: from 1024px up through ~1550px the CTA row (and
   at the lower end, the headline's forced single-line desktop break) run
   under the photo's actual left edge — verified by comparing real button/
   photo rects, not just container boxes. Rather than stack the whole hero
   here (the stacked layout is tuned for phone aspect ratios and reads oddly
   at laptop widths) or shrink type, this narrows the text column and photo
   just in this band and lets the headline wrap on its own — the wide single
   -line break is what needed the ~900px line the column can't offer here. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .hero-break-desktop { display: none; }
  .hero-photo { width: 42%; }
  .hero-content { max-width: clamp(420px, 46vw, 620px); }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-left: 2px solid var(--green-600);
  padding: 2px 0 2px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-500);
  width: fit-content;
}
.hero-badge-dot { display: none; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.hero-avatars {
  display: flex;
}
.hero-avatars span {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--navy-900);
  background: var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-left: -8px;
}
.hero-avatars span:first-child { margin-left: 0; }

/* ---- Stats / Trust Bar ---- */
.trust-bar {
  position: relative;
  z-index: 2;
  margin-top: clamp(-56px, -5vw, -40px);
  padding: 0 0 clamp(24px, 3vw, 40px);
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 4vw, 56px);
}
.stat-item { text-align: center; }
.stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-serif);
  color: var(--green-500);
}
.stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

/* ---- Service Cards ---- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(44px, 5.5vw, 64px);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.35s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
/* Icon and heading read well centered (short content); body copy and the
   feature list stay left-aligned so long lines don't get ragged edges. */
.service-card > div:first-child { display: flex; flex-direction: column; align-items: center; width: 100%; }
.service-card > div:first-child h3 { text-align: center; }
.service-card > div:first-child p { text-align: left; width: 100%; }
/* Pin the CTA to the bottom of the card regardless of how much copy sits
   above it, so both cards' buttons align on the same row even when one
   card's content block is taller than the other's. */
.service-card > .btn { margin-top: auto; }
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.service-card.revealed::before { transform: scaleX(1); }
.service-card.green::before { background: var(--green-600); }
.service-card.blue::before { background: var(--sky-400); }
.service-card.indigo::before { background: var(--blue-600); }
.service-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-card);
}
.service-card.green:hover { border-color: rgba(87,171,40,0.35); box-shadow: var(--shadow-card), 0 0 40px rgba(87,171,40,0.15); }
.service-card.blue:hover { border-color: rgba(2,193,255,0.3); box-shadow: var(--shadow-card), 0 0 40px rgba(2,193,255,0.14); }
.service-card.indigo:hover { border-color: rgba(10,45,194,0.4); box-shadow: var(--shadow-card), 0 0 40px rgba(10,45,194,0.18); }
.service-icon {
  width: 80px; height: 80px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s, opacity 0.5s ease 0.25s, background 0.3s ease;
}
.service-card.revealed .service-icon { opacity: 1; transform: scale(1); }
.service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
.service-icon.green { background: rgba(87,171,40,0.15); box-shadow: inset 0 0 0 1px rgba(87,171,40,0.25); }
.service-icon.blue { background: rgba(2,193,255,0.12); box-shadow: inset 0 0 0 1px rgba(2,193,255,0.25); }
.service-icon.indigo { background: rgba(10,45,194,0.16); box-shadow: inset 0 0 0 1px rgba(10,45,194,0.3); }
.service-icon svg { width: 40px; height: 40px; }
.service-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  margin-top: 8px;
}
.service-feature {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--gray-200);
}

/* ---- Feature Grid ---- */
/* Fixed 3 columns (not auto-fit) so all current uses — each with exactly
   6 cards — form two even rows instead of leaving an orphaned, left-aligned
   pair in a 4-column layout. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  transition: var(--transition);
}
.feature-card:hover {
  border-color: var(--border-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(87,171,40,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature-icon.blue { background: rgba(2,193,255,0.1); }
.feature-icon svg { width: 24px; height: 24px; }
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }

/* ---- Process Steps ---- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  position: relative;
}
/* Very faint dashed line threading behind the step circles — a horizontal
   thread on desktop's side-by-side row, a vertical thread on mobile's
   stacked column. Both are decorative and sit behind the opaque circles. */
.process-steps::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 26px;
  top: 26px;
  bottom: 26px;
  width: 0;
  border-left: 1px dashed rgba(2,193,255,0.22);
}
@media (min-width: 768px) {
  .process-steps::before {
    left: 6%;
    right: 6%;
    top: 26px;
    bottom: auto;
    width: auto;
    height: 0;
    border-left: none;
    border-top: 1px dashed rgba(2,193,255,0.22);
  }
}
.process-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.step-number {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 500;
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--navy-900);
  flex-shrink: 0;
}
.step-number.blue { background: var(--blue-600); color: var(--white); }

/* ---- CTA Banner ---- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--indigo-700) 50%, var(--navy-700) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xxl);
  padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(87,171,40,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
/* Reference-matched treatment: symmetric tracked eyebrow, larger serif heading,
   wide-tracked outline buttons — the one moment on each page that borrows the
   Cascade & Coal mood directly. */
.cta-banner .section-label {
  justify-content: center;
  gap: 16px;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--green-500);
}
.cta-banner .section-label::before {
  background: var(--green-600);
  width: 32px;
}
.cta-banner .section-label::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--green-600);
  border-radius: 2px;
}
.cta-banner .heading-1 {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 400;
}
.cta-banner .btn {
  border-radius: var(--radius-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 500;
}
.cta-banner .btn-secondary {
  background: transparent;
}

/* ---- Blueprint Section ---- */
.blueprint-section {
  background: linear-gradient(135deg, rgba(87,171,40,0.06) 0%, rgba(2,193,255,0.04) 100%);
  border: 1px solid rgba(87,171,40,0.15);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.blueprint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.blueprint-visual {
  background: rgba(87,171,40,0.05);
  border-left: 1px solid rgba(87,171,40,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.blueprint-mockup {
  width: 100%;
  max-width: 280px;
  background: var(--navy-700);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.blueprint-mockup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.bm-dot { width: 10px; height: 10px; border-radius: 50%; }
.blueprint-mockup-line {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.08);
}
.blueprint-mockup-line.w80 { width: 80%; }
.blueprint-mockup-line.w60 { width: 60%; }
.blueprint-mockup-line.w90 { width: 90%; }
.blueprint-mockup-line.accent { background: rgba(87,171,40,0.3); width: 40%; }

/* ---- Testimonials ---- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
/* Used specifically where a grid holds exactly 4 cards, so it forms two
   even rows of 2 instead of leaving a lone orphaned card in row 2. */
.testimonials-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: var(--transition);
}
.testimonial-card:hover {
  border-color: var(--border-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.stars { display: flex; gap: 4px; }
.star {
  width: 16px; height: 16px;
  fill: var(--color-star);
  color: var(--color-star);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.revealed .star { opacity: 1; transform: scale(1); }
.stars .star:nth-child(1) { transition-delay: 0.05s; }
.stars .star:nth-child(2) { transition-delay: 0.12s; }
.stars .star:nth-child(3) { transition-delay: 0.19s; }
.stars .star:nth-child(4) { transition-delay: 0.26s; }
.stars .star:nth-child(5) { transition-delay: 0.33s; }
.testimonial-quote {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--gray-200);
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.author-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--green-500);
  flex-shrink: 0;
}
.author-name { font-weight: 600; font-size: 0.9375rem; }
.author-meta { font-size: 0.8125rem; color: var(--text-muted); }

/* ---- Meet Steven ---- */
.steven-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.steven-image-wrap { position: relative; }
.steven-image {
  border-radius: var(--radius-lg);
  width: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}
.steven-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--green-600);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.steven-badge-num { font-size: 2rem; font-weight: 700; color: var(--navy-900); line-height: 1; }
.steven-badge-label { font-size: 0.75rem; font-weight: 600; color: var(--navy-900); opacity: 0.7; }
.steven-content { display: flex; flex-direction: column; gap: 20px; }
.steven-values { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.steven-value-tag {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-200);
}

/* ---- FAQ Accordion ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.faq-item.open { border-color: rgba(87,171,40,0.3); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
}
.faq-question:hover { color: var(--sky-400); }
.faq-chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
  color: var(--text-muted);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--green-500); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq-answer-inner {
  padding: 0 24px 20px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-muted);
}

/* ---- Contact Form ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(87,171,40,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon svg { width: 20px; height: 20px; color: var(--green-500); }
.contact-label { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 4px; }
.contact-value { font-weight: 600; }
.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 4vw, 48px);
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-label { font-size: 0.875rem; font-weight: 500; color: var(--gray-200); }
.form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.9375rem;
  color: var(--white);
  transition: var(--transition);
  width: 100%;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
  outline: none;
  border-color: var(--sky-400);
  background: rgba(2,193,255,0.04);
  box-shadow: 0 0 0 3px rgba(2,193,255,0.1);
}
select.form-input { cursor: pointer; }
select.form-input option { background: var(--navy-700); }
textarea.form-input { resize: vertical; min-height: 120px; }
.form-submit { width: 100%; justify-content: center; margin-top: 8px; }

/* Netlify honeypot: kept in the tab/DOM flow for bots to fill, but never
   visible or reachable for real (including keyboard/screen-reader) users. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5;
}
.form-status--success { background: rgba(87,171,40,0.1); border: 1px solid rgba(87,171,40,0.3); color: var(--green-600); }
.form-status--error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }

/* ---- Resource Cards ---- */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.resource-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: var(--transition);
}
.resource-card:hover {
  border-color: var(--border-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.resource-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(87,171,40,0.1);
  border: 1px solid rgba(87,171,40,0.2);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lime-400);
  width: fit-content;
}
.resource-tag.blue {
  background: rgba(2,193,255,0.08);
  border-color: rgba(2,193,255,0.2);
  color: var(--sky-400);
}

/* ---- Page Hero (inner pages) ---- */
.page-hero {
  padding: clamp(120px, 12vw, 160px) 0 clamp(60px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
/* The hero already supplies its own bottom spacing above, so the section
   directly beneath it must not add a second top-padding on top of that or
   the gap doubles. (The homepage's full-bleed .hero has no bottom padding
   of its own, so it isn't included here — removing the next section's top
   padding there would collapse the gap to zero instead of fixing it.) */
.page-hero + section {
  padding-top: 0;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(10,45,194,0.3) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(87,171,40,0.08) 0%, transparent 50%);
}
.page-hero-content { position: relative; z-index: 1; max-width: 700px; }
.page-hero-content .section-label { margin-bottom: 20px; }

/* ---- Timeline ---- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 24px;
  padding-bottom: 40px;
  position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-left { display: flex; flex-direction: column; align-items: center; }
.timeline-dot {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 2px solid var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--green-500);
  flex-shrink: 0;
  z-index: 1;
}
.timeline-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, var(--green-600), transparent);
  margin-top: 8px;
}
.timeline-item:last-child .timeline-line { display: none; }
.timeline-content { padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

/* ---- Footer ---- */
.footer {
  background: var(--navy-800);
  border-top: 1px solid var(--border);
  padding: clamp(48px, 7vw, 80px) 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo img { height: 48px; }
.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--gray-200);
  line-height: 1.4;
  max-width: 280px;
}
.footer-col h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-200);
  margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--sky-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.footer-links a:hover { color: var(--sky-400); }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-social { display: flex; gap: 10px; margin-top: 8px; }
.social-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-muted);
}
.social-btn:hover {
  background: rgba(87,171,40,0.12);
  border-color: rgba(87,171,40,0.3);
  color: var(--green-500);
}
.social-btn svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 0.8125rem; color: var(--text-muted); }
.footer-bottom a { color: var(--sky-400); }

/* ---- Inline Text Link ---- */
.text-link {
  position: relative;
  color: var(--sky-400);
  background-image: linear-gradient(var(--sky-400), var(--sky-400));
  background-repeat: no-repeat;
  background-position: left bottom -2px;
  background-size: 100% 1px;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.text-link:hover { background-position: right bottom -2px; }

/* ---- Scroll Reveal Animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* Headlines: slower, heavier settle than body copy — motion carries hierarchy */
.reveal.display-1, .reveal.display-2, .reveal.heading-1 {
  transform: translateY(28px);
  filter: blur(10px);
  transition: opacity 1.1s cubic-bezier(0.19, 1, 0.22, 1), transform 1.1s cubic-bezier(0.19, 1, 0.22, 1), filter 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.reveal.display-1.revealed, .reveal.display-2.revealed, .reveal.heading-1.revealed {
  transform: translateY(0);
  filter: blur(0);
}

/* Imagery: gentle scale-settle instead of slide */
.reveal.hero-image-wrap, .reveal.steven-image-wrap {
  opacity: 0;
  transform: scale(1.04);
  filter: none;
  transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.reveal.hero-image-wrap.revealed, .reveal.steven-image-wrap.revealed {
  opacity: 1;
  transform: scale(1);
}


/* ---- Decorative ---- */
.section-divider {
  width: 64px; height: 3px;
  background: var(--gradient-green);
  border-radius: 3px;
  margin: 16px 0;
}
.section-divider.center { margin: 16px auto; }
.section-header { text-align: center; max-width: 680px; margin: 0 auto 72px; }
.section-header.left { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }

/* ---- Split grids (responsive) ---- */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.split-2-nested { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) {
  .split-2 { grid-template-columns: 1fr; }
}

/* .blueprint-checklist is shared with the Financial Reset and Tax
   Preparation pages — kept in full (including its desktop media query
   below) even though the homepage's own Blueprint showcase section that
   originally sat here has been removed. */
.blueprint-checklist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto 28px;
  width: fit-content;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.blueprint-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--gray-200);
  text-align: left;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.blueprint-checklist li svg { flex-shrink: 0; }
.blueprint-checklist.revealed li { opacity: 1; transform: translateX(0); }
.blueprint-checklist.revealed li:nth-child(1) { transition-delay: 0s; }
.blueprint-checklist.revealed li:nth-child(2) { transition-delay: 0.1s; }
.blueprint-checklist.revealed li:nth-child(3) { transition-delay: 0.2s; }
.blueprint-checklist.revealed li:nth-child(4) { transition-delay: 0.3s; }

/* Desktop only: side-by-side layout (image left, content right) with a
   left-aligned checklist so lines share one start edge instead of the
   centered/staggered look mobile uses. Mobile keeps its stacked, centered
   treatment untouched below this breakpoint. */
@media (min-width: 1024px) {
  .blueprint-layout {
    display: flex;
    align-items: center;
    gap: 64px;
    text-align: left;
  }
  .blueprint-image-wrap {
    margin: 0;
    flex-shrink: 0;
  }
  .blueprint-image {
    max-width: 260px;
  }
  .blueprint-content {
    flex: 1;
    text-align: left;
  }
  .blueprint-content .blueprint-headline,
  .blueprint-content p,
  .blueprint-content .btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .blueprint-content .blueprint-headline {
    margin-top: 0 !important;
    white-space: nowrap;
  }
  .blueprint-checklist {
    align-items: flex-start;
    margin: 0 0 28px;
  }
  .blueprint-checklist li { text-align: left; }
}

/* ---- Who We Are ---- */
.who-we-are { position: relative; overflow: hidden; }
.who-we-are-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(2,193,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(87,171,40,0.06) 0%, transparent 55%);
}
.who-we-are-trendline {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 120%;
  max-width: 900px;
  height: auto;
  transform: translateX(-50%);
  opacity: 0.08;
}
.who-we-are-trendline polyline {
  fill: none;
  stroke: var(--green-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.who-we-are-accent { position: relative; display: inline-block; }
.who-we-are-accent::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 72px;
  height: 2px;
  background: var(--sky-400);
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}
.who-we-are-accent.revealed::after { transform: translateX(-50%) scaleX(1); }
.who-we-are-founder {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto 8px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  text-align: left;
}
.who-we-are-founder-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(87,171,40,0.12);
  color: var(--green-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.who-we-are-founder-icon svg { width: 16px; height: 16px; }

/* ---- Full-Bleed Pull Quote ---- */
/* Deliberately breaks the label -> heading -> paragraph -> grid rhythm used
   everywhere else: no card, no grid, no icon — just scale, whitespace, and a
   single held idea. */
.pull-quote-section {
  background: var(--navy-800);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(80px, 12vw, 140px) 0;
  text-align: center;
}
.pull-quote-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--green-600);
  margin-bottom: 8px;
}
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.3;
  color: var(--white);
  max-width: 780px;
  margin: 0 auto 28px;
}
.pull-quote .accent { color: var(--sky-400); }
.pull-quote-attribution {
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.pull-quote-attribution strong { color: var(--gray-200); font-weight: 600; }

/* ---- Utilities ---- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.d-flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .steven-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .blueprint-grid { grid-template-columns: 1fr; }
  .blueprint-visual { border-left: none; border-top: 1px solid rgba(87,171,40,0.15); }
  .contact-grid { grid-template-columns: 1fr; }
}
/* This tier (the base flex hero, used between the ≤768px stacked mobile
   layout and the ≥1024px two-column grid, so effectively ~769-1023px)
   gets its own photo-width/scrim tweak — bounded to max-width:1023px
   specifically, NOT 1024px, so it can never tie with the ≥1024px collision
   fix below for the pixel they'd otherwise share. Deepen the left scrim so
   the headline keeps a clean dark bed as the viewport narrows. The photo
   width and content column below were re-measured and reduced from an
   earlier 66%/560px: at this tier's own narrow end (~769-900px) that
   combination put the headline and paragraph directly under the photo —
   same class of bug as the ≥1024px fix above, different layout tier. */
@media (max-width: 1023px) {
  .hero-photo { width: 45%; }
  .hero-content { max-width: 360px; }
  .hero-scrim {
    background:
      linear-gradient(to right, var(--navy-900) 0%, var(--navy-900) 32%, rgba(7,14,29,0.6) 50%, transparent 70%),
      linear-gradient(to bottom, transparent 55%, rgba(7,14,29,0.85) 90%, var(--navy-900) 100%);
  }
}

/* The full-length nav CTA copy ("Get Free Credit Blueprint" / "Start My
   Financial Strategy Plan Today") needs ~1515px alongside the logo and 8 nav
   links, which the site's standard 1200px container never provides — so the
   nav gets its own wider container, and the hamburger menu takes over below
   the width where that no longer fits. Those full labels only ever render
   inline once there's genuinely room, otherwise they live in the mobile
   slide-out menu. */
.nav .container { max-width: 1680px; }
@media (max-width: 1600px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
  /* The full CTA copy ("Get My Free Credit Blueprint" / "Start My Credit
     Strategy Plan") wraps to two lines at the default button size on narrow
     phones. Tighten font-size/letter-spacing/padding so both fit on one
     line down to the narrowest supported width (375px). */
  .mobile-menu .btn {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 16px 14px;
    min-height: 44px;
  }

  /* Mobile-specific hero: the photo sits as a top banner (neon sign + Steven visible)
     and its bottom edge dissolves into the navy where the headline and CTAs flow
     directly below, centered. One continuous scene — designed for phone, not the desktop shrunk. */
  .hero {
    display: block;
    min-height: 0;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 0;
  }
  .hero-photo {
    position: relative;
    width: 100%;
    height: 44svh;
    min-height: 300px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  }
  .hero-photo img { object-position: center 26%; }
  .hero-scrim { display: none; }
  .hero-content {
    max-width: 100%;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 48px;
  }
  .hero-badge { align-self: center; }
  .hero-ctas { justify-content: center; }
  .hero-trust { justify-content: center; flex-wrap: wrap; }
  .trust-bar-inner { gap: 32px; }
  .trust-bar { margin-top: 24px; padding: 0; }
  .stat-divider { display: none; }
  .steven-badge { right: 0; bottom: -16px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  /* The bottom copyright bar was already centered on mobile above; the main
     footer content (logo, tagline, social icons, link columns) wasn't, which
     made the footer look like two mismatched halves. Center it all to match. */
  .footer-brand { align-items: center; text-align: center; }
  .footer-col { text-align: center; }
  .footer-links { align-items: center; }

  /* Shared rule: every card/column grid stacks to a single full-width column
     below 768px. Side-by-side layouts are tablet/desktop only. Apply new
     grids to this selector rather than patching each section individually. */
  .services-grid, .testimonials-grid, .features-grid, .resources-grid,
  .split-2-nested {
    grid-template-columns: 1fr !important;
  }

  /* Plain page-hero (label + h1 + optional paragraph/CTAs), used by most
     inner pages. Centers the scannable elements (label, heading, CTAs);
     the paragraph stays left-aligned since centered multi-line prose is
     harder to read. Pages with a genuinely different hero structure (e.g.
     a split-2 image+text hero) opt out via .no-mobile-center. */
  .page-hero-content:not(.no-mobile-center) { text-align: center; }
  .page-hero-content:not(.no-mobile-center) .body-lg { text-align: left; }
  .page-hero-content .hero-trust-badges { justify-content: center; }

  /* Feature-card grids (e.g. "Who This Is For" / "Why Choose Us" style
     sections): short, scannable card content reads fine centered even on
     mobile, unlike full-length paragraphs elsewhere on the page. */
  .features-grid .feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .btn-lg { padding: 15px 20px; font-size: 0.75rem; letter-spacing: 0.06em; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .cta-banner-ctas { flex-direction: column; align-items: center; }
  .cta-banner-ctas .btn { width: 100%; justify-content: center; }
  /* The two standardized CTA labels ("Start My Credit Strategy Plan" /
     "Get My Free Credit Blueprint") are long enough to wrap inside a
     full-width stacked button at this width — tighten further so they
     read on one line instead. */
  .hero-ctas .btn-lg,
  .cta-banner-ctas .btn-lg {
    padding: 14px 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
  }
  /* Safety net: long uppercase-tracked labels wrap instead of overflowing
     the viewport on the narrowest phones. */
  .btn { white-space: normal; text-align: center; }
}

/* ============================================================
   FINANCIAL RESET PROGRAM — 00 · FOUNDATION
   Namespace: .fr-*  (only financial-reset.html carries body.fr-page)
   ------------------------------------------------------------
   THIS FILE IS THE CONTRACT. It declares the tokens, the one type scale,
   the constant section padding, the portfolio material, the section
   marker, the CTA family and the motion budget. Every other file consumes
   what is here; none of them invents a parallel system.

   WHAT WAS DELETED, and why — the whole point of this pass:
     · the flow-lane primitives (--fr-rb-*, .fr-ribbon, @keyframes frFlow)
       — the glowing-rail direction. `.fr-ribbon` was never in the markup.
     · the ledger instrument at all three scales (--fr-tick-min,
       --fr-tick-maj, --fr-rail-base, --fr-rail-node) and every rule that
       hung a measured scale off an eyebrow, a headline or a seam — the
       rulers-and-rails direction.
     · the junction mark: a lit node straddling every section boundary on
       a 332px phase-aligned tick scale, plus its 266px phone variant.
     · the ledger bracket eyebrow (lit spine, two arms, lamp node) and the
       three-section 7b override that had been layered over it.
     · the "one surface" panel rule, the per-section --fr-eb hue ladder,
       --fr-h2--xl as a second headline size, and the animated gradient
       border on the CTA ("excessive glowing borders", forbidden by name).

   INTEGRATION PASS — four dead selectors removed and one measure pinned,
   each checked against the markup rather than assumed:
     · `.fr-paper` — zero elements carry the class; the markup is final.
     · `.fr-h1 em .fr-tm` — zero matches; every ™ sets outside its em.
     · `.fr-h2 + .fr-lede` — zero matches; a lede only follows the hero.
     · the body/small leading is now also stated literally, because the
       `font` shorthand let two sibling files drop 31px to `normal` on
       four sections by re-declaring --fr-body / --fr-small without it.

   ELEVATION PASS — the structure was approved and is untouched. What
   changed is material and height, nothing else:
     · THE DEPTH LADDER NOW READS AS MATERIAL. Every level gained a tight
       contact shadow under its cast shadow. A single soft blur is what
       made the page look like flat rectangles printed on a dark field; an
       object that touches the ground and then throws a shadow past it is
       what makes it look like a page lying on a desk. The four levels
       keep their meaning and their order — only the recipe got real.
     · SECTION 6 AND SECTION 7 NOW CONSUME THE LADDER instead of mixing
       their own `0 0 0 1px + --fr-lift` pair. The portfolio material and
       the divider tab were the two places the page's own contract file
       wrote a bespoke shadow, which is the one thing the ladder exists to
       stop. A raised page is --fr-d2 everywhere, including here.
     · THE DIVIDER TAB gained a back page. It is the portfolio's smallest
       object and it was a single flat chip; now it is a front page with a
       second sheet behind it, the index colour bleeding a little way into
       the stock off the bound edge, and a reveal in which the back sheet
       settles after the front one.
     · THE CTA FAMILY gained a bottom edge with thickness, so the press
       state is the face travelling down INTO that edge rather than a
       translate with nothing underneath it, plus one hover pass of the
       existing sheen and a restrained idle edge light on touch screens,
       which never get :hover at all.
     · THE FLAGSHIP TIER RULE MOVED into section 8 with the rest of the
       type scale. It was sitting after the reduced-motion block, which
       read as an afterthought bolted to the end of the contract. It is
       the same rule at the same specificity, so nothing renders
       differently — the three tiers now simply live in one place.

   MOTION BUDGET — five @keyframes declared HERE, and that is all this
   file spends. The old wording said "page-wide, and that is all", which
   was measured false in the built cascade: the nine files together
   currently declare 38 `fr*` keyframes, 33 of them in siblings. This
   file cannot make a page-wide promise on their behalf and has stopped
   pretending to — it states its own spend and the rule the whole page is
   supposed to be held to, which is the paragraph under the list:
     frRise    a headline line arrives and settles
     frTab     the divider tab's front page steps forward, once, on reveal
     frTab the back sheet settles behind it once the face has landed
               — page-stack depth, which is why the tab reads as an object
               and not a chip
     frSheen   one slow restrained pass of light across a CTA face, reused
               at speed for a single pass on hover: activation, not decor
     frAir     the environmental light drifts, so a section is not a flat fill
   Nothing travels along a line, nothing pulses, nothing scans, nothing
   bounces. The page is finished in a still screenshot.

   frIdle WAS A SIXTH AND IS DELETED. It breathed the primary CTA's green
   illumination on a nine-second loop inside @media (hover: none), which
   contradicted the line directly above it — a glow rising and falling on
   a loop is a pulse — and ran constantly on every phone. :active already
   gives touch the press state, which is real material travel. The
   reasoning is written out in full at the end of section 11.
   ============================================================ */


/* ---- 1 · TOKENS — these are the contract. Add none. ---------------- */
.fr-page {
  /* rhythm. --fr-pad is CONSTANT: every section, top and bottom. */
  --fr-pad: 137px;
  --fr-shell: min(1208px, 100% - 64px);
  --fr-measure: 540px;
  --fr-gap: clamp(26px, 2.6vw, 40px);

  /* the one type scale. --fr-h1 is the hero and nothing else;
     --fr-h2 is EVERY section headline. --fr-body / --fr-small carry their
     line-height with them and are consumed through the `font` shorthand,
     which is what keeps 19/31 from drifting one file at a time. */
  /* THREE TIERS, AND ONLY THREE. The last rebuild put every section
     headline on one size, which fixed the ten-size sprawl but flattened
     the hierarchy with it: the signature methodology read at the same
     weight as the FAQ. These are the only levels on the page.
       hero       80.64px at 1440 / 44px at 390  (5.25rem = 84px is the
                  ceiling, reached at 1500; the 5.6vw term governs at 1440)
       flagship   66px / 40px   — the four sections the brief names:
                  Four Pillars, Action Plan, Relationship, Investment
       standard   56px / 36px   — every other section
     Each floor is the mobile target, so narrow screens land on the
     intended size rather than on whatever the viewport term gives, and
     each ceiling is the desktop target, so a wide monitor does not keep
     growing the hero. Measured at 1440 the vw terms give 80.64 / 66.24 /
     56.16, so flagship and standard are already sitting on their
     ceilings there and the hero is 3px under its own.

     THE TIER IS ASSIGNED CENTRALLY, in section 8 and nowhere else. No
     sibling file sets a headline font-size, and none may. */
  /* THREE TIERS, AND THE CLAMP FLOOR IS ALWAYS THE PHONE TARGET so a
     headline never has to be undone lower down.
       h1       hero            48px @390  ->  86px @1440   (target 48-54 / 82-90)
       h2-flag  flagship        44px @390  ->  73px @1440   (target 44-50 / 70-78)
       h2       standard        40px @390  ->  63px @1440   (target 40-46 / 60-68) */
  --fr-h1: clamp(3rem, 6vw, 5.5rem);
  --fr-h2-flag: clamp(2.75rem, 5.1vw, 4.75rem);
  --fr-h2: clamp(2.5rem, 4.4vw, 4rem);
  --fr-h3: clamp(1.25rem, 1.5vw, 1.6rem);
  --fr-body: 1.1875rem/1.65;
  --fr-small: 0.9375rem/1.6;

  /* THE DEPTH LADDER. One elevation scale for the whole page, so a
     raised page in the hero and a raised page in the Investment spread
     sit at the same height. Sections pick a level; they do not invent
     a shadow. L0 is the ground and needs no token.
       d1  a flat planning sheet lying on the ground
       d2  a raised portfolio page
       d3  the active tab or the section's primary object
       d4  hover or scroll emphasis, the only level that moves

     EVERY LEVEL IS BUILT THE SAME WAY, and this is the elevation pass's
     central change. A level is four parts in a fixed order:
       1 a lit top edge      the light in the room catching the cut edge
       2 a hairline          where the stock ends
       3 a CONTACT shadow    tight, dark, barely offset: the object is
                             touching something
       4 a CAST shadow       wide and soft, thrown past the object
     Parts 3 and 4 together are the whole trick. The page read as flat
     dark-blue rectangles because every object had part 4 alone, and one
     soft blur under a fill is a drop-shadow, not a thing lying on a
     desk. Adding the contact layer is what separates the page from the
     ground it sits on, at every level, for free, with no new tokens, no
     perspective and no 3D transform.

     The levels keep their meaning and their order. d1 barely leaves the
     ground; d2 is the page you can see under; d3 is the object the
     section is about; d4 is the only level that is allowed to move, and
     it moves with --fr-raise-1 or --fr-raise-2 and nothing else. */
  /* d1 was three parts, not four: it had the hairline, the contact and the
     cast but no lit edge, which is why a flat sheet read as a hole in the
     ground rather than as stock lying on it. The lit edge is carried at
     0.05 here — a third of d2's — because this level barely leaves the
     ground and a bright cut edge on it would out-light the pages above. */
  --fr-d1:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px var(--fr-edge),
    0 1px 2px rgba(2, 8, 20, 0.5),
    0 6px 14px -10px rgba(2, 8, 20, 0.75);
  --fr-d2:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px var(--fr-edge),
    0 2px 5px -3px rgba(2, 8, 20, 0.72),
    0 18px 38px -22px rgba(2, 8, 20, 0.95);
  --fr-d3:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(150, 190, 235, 0.2),
    0 3px 8px -4px rgba(2, 8, 20, 0.78),
    0 28px 56px -26px rgba(2, 8, 20, 1);
  --fr-d4:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(150, 190, 235, 0.3),
    0 4px 10px -4px rgba(2, 8, 20, 0.82),
    0 38px 72px -28px rgba(2, 8, 20, 1);
  --fr-raise-1: translate3d(0, -3px, 0);
  --fr-raise-2: translate3d(0, -6px, 0);

  /* ink, ground and the portfolio's page stock */
  --fr-ink: #eaf2ff;
  --fr-ink-2: rgba(214, 231, 252, 0.78);
  --fr-ground: #070e1d;
  --fr-raise: #0e1a30;
  --fr-paper: #16243f;
  --fr-paper-2: #1d3052;
  --fr-edge: rgba(150, 190, 235, 0.14);
  --fr-lift: 0 18px 40px -22px rgba(2, 8, 20, 0.9);
  --fr-lime: #afdd2c;

  /* Motion plumbing, not a scale and not a colour: two curves, shared by
     every file so one page-wide easing holds. */
  --fr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fr-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* THE TWO ADDITIONS, STATED PLAINLY. The contract's token list says add
     none; the curves above and the --fr-wash / --fr-wash-2 / --fr-wash-x
     trio in section 5 are beyond it. Neither is a type scale, a spacing
     system or a colour set: the curves are easing, and the wash slots
     only ever hold one of the four accent triples. Nothing else in this
     file or any sibling adds a token, and no file may. */
}

/* ACCENT PLUMBING. Four accents, assigned ONLY here, consumed everywhere
   as rgba(var(--acc-rgb), …) with a fallback so an element without
   data-accent still renders. The markup also carries two older names:
   they are aliased onto the four rather than given values of their own,
   so the page cannot quietly grow a fifth and sixth accent. */
.fr-page [data-accent="cyan"] { --acc: #38cfff; --acc-rgb: 56, 207, 255; }
.fr-page [data-accent="indigo"],
.fr-page [data-accent="royal"] { --acc: #6f7ee0; --acc-rgb: 111, 126, 224; }
.fr-page [data-accent="teal"] { --acc: #44b59c; --acc-rgb: 68, 181, 156; }
.fr-page [data-accent="lime"],
.fr-page [data-accent="green"] { --acc: #afdd2c; --acc-rgb: 175, 221, 44; }


/* ---- 2 · THE PAGE GROUND -------------------------------------------
   One continuous ground. No section has a fill of its own and no section
   has a border; neighbours are joined by light and by spacing. */
body.fr-page {
  background-color: var(--fr-ground);
  color: var(--fr-ink);
}
.fr-page main { font-variant-numeric: lining-nums; }


/* ---- 3 · UTILITIES -------------------------------------------------- */
.fr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fr-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fr-nowrap { white-space: nowrap; }
.fr-line { display: block; text-wrap: balance; }
.fr-tm {
  font-family: var(--font);
  font-size: 0.34em;
  font-weight: 600;
  font-style: normal;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.06em;
  letter-spacing: 0;
}


/* ---- 4 · THE SHELL AND THE CONSTANT SECTION PADDING ---------------- */
.fr-shell {
  position: relative;
  z-index: 1;
  width: var(--fr-shell);
  margin-inline: auto;
}
.fr-shell--narrow { width: min(880px, 100% - 64px); }

.fr-page .fr-sec,
.fr-page .fr-close {
  position: relative;
  overflow: clip;
  padding: var(--fr-pad) 0;
  border: 0;
  background: none;
}
/* A disclosure is not a section with a statement in it, so it takes a
   fraction of the same padding rather than a padding of its own. */
.fr-page .fr-sec--legal { padding: calc(var(--fr-pad) * 0.45) 0 calc(var(--fr-pad) * 0.6); }
.fr-page .fr-sec[id],
.fr-page .fr-close[id] { scroll-margin-top: 20px; }


/* ---- 5 · SECTION TRANSITIONS — gradients, light, spacing -----------
   NO rail down the page, NO repeating horizontal rule, NO tick scale at a
   seam. A section contributes a soft key light that reaches past its own
   edges, and two vertical gradients that let the light continue across the
   boundary. Neighbours overlap in light; nothing is ever drawn ACROSS the
   junction. The hues are the four accents and nothing else, stepping cool
   at the top to green by the close, so the ground quietly reports where
   the reader is. */
.fr-page .fr-sec::before {
  content: '';
  position: absolute;
  inset: -14% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 46% at var(--fr-wash-x, 26%) 30%,
      rgba(var(--fr-wash, 56, 207, 255), 0.1) 0%, transparent 72%),
    radial-gradient(50% 44% at calc(100% - var(--fr-wash-x, 26%)) 86%,
      rgba(var(--fr-wash-2, 68, 181, 156), 0.085) 0%, transparent 74%);
}
.fr-page .fr-sec::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* THE WASH MUST NOT PEAK ON THE SECTION'S OWN EDGE.
     Both of these used to start at full alpha at 0%, so where two
     sections meet, one section's bottom wash and the next one's top
     wash collided at full strength in a single pixel row. Where the
     two tokens are different hues the junction became a visible hard
     line: at the define -> picture boundary the indigo bottom wash
     (111,126,224 at 0.07) met the cyan top wash (56,207,255 at 0.085)
     for a measured step of dG +12 in clean background, which is 46%
     of that section's entire tonal range delivered in one row. It is
     why the Complete Picture read as a trimmed panel even though
     nothing in it is clipped or overflowing.

     `.fr-sec::before` was supposed to soften exactly this — it is
     drawn at inset: -14% -10% so neighbours overlap in light — but
     `overflow: clip` on the section cuts it off at the padding box,
     so that bridge never paints. Rather than unclip every section
     (which several compositions now rely on), the ramp starts at
     zero ON the boundary and reaches full a little inside it. The
     wash is unchanged everywhere it is actually visible; only the
     seam goes. */
  background-image:
    linear-gradient(180deg,
      rgba(var(--fr-wash, 56, 207, 255), 0) 0%,
      rgba(var(--fr-wash, 56, 207, 255), 0.085) 36px,
      transparent 190px),
    linear-gradient(0deg,
      rgba(var(--fr-wash-2, 68, 181, 156), 0) 0%,
      rgba(var(--fr-wash-2, 68, 181, 156), 0.07) 38px,
      transparent 210px);
}
.fr-page .fr-sec--problem { --fr-wash: 111, 126, 224; --fr-wash-2: 56, 207, 255; --fr-wash-x: 22%; }
.fr-page .fr-sec--define { --fr-wash: 56, 207, 255; --fr-wash-2: 111, 126, 224; --fr-wash-x: 72%; }

.fr-page .fr-sec--method { --fr-wash: 68, 181, 156; --fr-wash-2: 175, 221, 44; --fr-wash-x: 50%; }
.fr-page .fr-sec--build { --fr-wash: 68, 181, 156; --fr-wash-2: 56, 207, 255; --fr-wash-x: 74%; }
.fr-page .fr-sec--plan { --fr-wash: 68, 181, 156; --fr-wash-2: 175, 221, 44; --fr-wash-x: 26%; }
.fr-page .fr-sec--relate { --fr-wash: 56, 207, 255; --fr-wash-2: 68, 181, 156; --fr-wash-x: 70%; }
.fr-page .fr-sec--forward { --fr-wash: 175, 221, 44; --fr-wash-2: 68, 181, 156; --fr-wash-x: 32%; }
.fr-page .fr-sec--fit { --fr-wash: 68, 181, 156; --fr-wash-2: 175, 221, 44; --fr-wash-x: 68%; }
.fr-page .fr-sec--progress { --fr-wash: 111, 126, 224; --fr-wash-2: 56, 207, 255; --fr-wash-x: 34%; }
.fr-page .fr-sec--decide { --fr-wash: 175, 221, 44; --fr-wash-2: 68, 181, 156; --fr-wash-x: 50%; }
.fr-page .fr-sec--faq { --fr-wash: 68, 181, 156; --fr-wash-2: 56, 207, 255; --fr-wash-x: 70%; }
.fr-page .fr-sec--legal { --fr-wash: 111, 126, 224; --fr-wash-2: 111, 126, 224; --fr-wash-x: 50%; }

/* the environmental light: one quiet, drifting key light per section */
.fr-atmos { position: absolute; inset: 0; pointer-events: none; }
.fr-page .fr-atmos {
  z-index: 0;
  opacity: 0.62;
  animation: frAir 52s var(--fr-ease-soft) infinite;
}
.fr-atmos--problem { background: radial-gradient(46% 56% at 86% 14%, rgba(111,126,224,0.17) 0%, transparent 70%), radial-gradient(50% 60% at 7% 90%, rgba(56,207,255,0.15) 0%, transparent 72%); }

.fr-atmos--method { background: radial-gradient(60% 50% at 50% 0%, rgba(68,181,156,0.19) 0%, transparent 70%), radial-gradient(42% 42% at 92% 68%, rgba(175,221,44,0.12) 0%, transparent 72%); }
.fr-atmos--plan { background: radial-gradient(46% 56% at 26% 40%, rgba(68,181,156,0.19) 0%, transparent 70%), radial-gradient(40% 50% at 90% 88%, rgba(111,126,224,0.2) 0%, transparent 72%); }
.fr-atmos--forward { background: linear-gradient(100deg, rgba(56,207,255,0.13) 0%, transparent 46%, rgba(175,221,44,0.15) 100%); }
.fr-atmos--blue { background: radial-gradient(65% 60% at 50% 30%, rgba(111,126,224,0.22) 0%, transparent 72%); }
.fr-atmos--decide { background: radial-gradient(50% 40% at 50% 0%, rgba(175,221,44,0.15) 0%, transparent 70%), radial-gradient(46% 46% at 90% 60%, rgba(111,126,224,0.21) 0%, transparent 72%); }
.fr-atmos--close { background: radial-gradient(56% 80% at 20% 40%, rgba(68,181,156,0.18) 0%, transparent 70%), radial-gradient(50% 70% at 88% 70%, rgba(111,126,224,0.22) 0%, transparent 72%); }

@keyframes frAir {
  0%, 100% { opacity: 0.54; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.7; transform: translate3d(0, -1.2%, 0) scale(1.035); }
}


/* ============================================================
   6 · THE PORTFOLIO MATERIAL — declared once, reused everywhere
   ------------------------------------------------------------
   A page is three things and no more: --fr-paper stock, the cut-shoulder
   radius that says which edge is bound, and ONE LEVEL OF THE DEPTH
   LADDER. It used to be four, the fourth being a hand-mixed
   `0 0 0 1px var(--fr-edge), var(--fr-lift)` pair — which is exactly the
   bespoke shadow the ladder exists to prevent, written in the file that
   declares the ladder. A raised portfolio page is --fr-d2. The hairline
   and the lit top edge did not go away; they are parts 1 and 2 of d2,
   and now they are identical to the hairline and lit edge on every other
   raised object on the page instead of merely similar to them.

   The stock gradient stays in `background-image` because it is colour,
   not elevation: 168deg across the sheet, dark at the bound edge and
   opening toward the outer corner, so the light has one direction on
   every page in the portfolio. That is the whole recipe, declared once
   here and attached to four elements by name.

   TWO OF THE FOUR HAND IT BACK, measured in the built cascade, and this
   is recorded here rather than quietly corrected because both decisions
   belong to the sibling that made them:
     · `.fr-scope` — 50-build.css:385 sets `box-shadow: none` and its own
       radial background. The 60px slab became a spread that uses the
       shell, so it is no longer a page; it is a layout wrapper.
     · `.fr-gain` — 70-progress.css:259 sets `box-shadow: none` and
       `background-image: none`. A gain there is one line written across
       both pages, not six sheets stacked inside two.
   So the live paper elements are `.fr-quote` and `.fr-invest` (which
   80-invest promotes to d3 as its section's primary object). The two
   names stay in this rule on purpose: a sibling that drops its hand-back
   should land back on the shared material, not on nothing. If both
   sections settle, delete the two names HERE and the hand-back rules
   THERE in the same pass — one of those edits alone is a flat box.
   The
   markup is final and carries no `.fr-paper` class, so there is no
   `.fr-paper` selector either — a hook that matches nothing is the same
   dead weight as a rule from a rejected direction. A section file that
   needs this material names its element in this rule rather than mixing
   its own stock. The radius says which edge is bound: square where the
   page meets the column, a small cut shoulder on the outer side.
   ============================================================ */
.fr-page .fr-quote,
.fr-page .fr-scope,
.fr-page .fr-gain,
.fr-page .fr-invest {
  border: 0;
  border-radius: 2px 6px 6px 2px;
  background-image:
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  box-shadow: var(--fr-d2);
}


/* ============================================================
   7 · THE SECTION MARKER — A PORTFOLIO DIVIDER TAB
   ------------------------------------------------------------
   One marker, ALL section eyebrows, no scoped subset. It is the portfolio
   material at its smallest: a compact tab of page stock with an accent
   edge on its bound side — the colour you see in the index when the folio
   is closed — and a quiet printed label. Tax Preparation gets this far
   with a dot and an uppercase label; this is one twist past that and no
   further.

   WHAT THE ELEVATION PASS ADDED, and why each one earns its place. The
   tab was already the right idea and the wrong weight: a flat chip the
   same height as the ground it sat on, which on some sections looked
   less like a divider tab than like a stray button.
     · IT SITS ON THE LADDER. --fr-d2, the same raised-page height as the
       four paper elements in section 6, so the marker and the pages it
       introduces belong to one object. No hand-mixed shadow.
     · IT HAS THICKNESS. One hard 2px shadow layer under the face is the
       cut edge of the stock seen from slightly above. Not a bevel, not a
       perspective transform: real stock is 2px thick and that is all.
     · IT HAS A BACK SHEET. A 4px sliver of darker stock poking past the
       OUTER edge, which is where a stack shows when the bound edge is on
       the left. This is the front/back page depth the brief asks for, and
       it is a 4px sliver rather than a fanned pile — at tab scale that is
       the difference between a portfolio and a card game.
     · THE INDEX COLOUR BLEEDS. A short gradient carries the accent a few
       pixels off the bound edge into the stock, so the colour looks
       printed into the page rather than stuck on it. It travels one
       direction, inward from the bound edge, and dies well before the
       label.
     · IT REVEALS IN TWO PARTS. The front page steps forward, then the
       back sheet settles behind it. The order is the whole point: one
       object with depth, arriving once.

   No ruler ticks. No measurement rail. No bracket. No lamp node, no halo,
   no travelling light, no glow behind the hue. The label is printed ink
   rather than a lit filament, and the tab is still 0.72rem on three lines
   of shadow — compact was a requirement, not a starting point.
   ============================================================ */
.fr-eyebrow { margin: 0; text-transform: uppercase; }
.fr-page .fr-eyebrow {
  position: relative;
  display: inline-block;
  /* the long methodology label sets as two lines inside the tab rather
     than stretching it across the column */
  max-width: min(100%, 34ch);
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  /* deeper on the bound side: the accent edge lives there and the label
     may not run under it */
  padding: 9px 16px 10px 18px;
  border: 0;
  border-radius: 1px 5px 5px 1px;
  /* THE INDEX COLOUR, PRINTED IN. Layer 1 carries the accent 34px inward
     from the bound edge and stops — direction, not decoration, and it is
     gone long before the label. Layer 2 is the shared stock gradient at
     the shared 168deg, so the tab is lit from the same side as every
     page in the portfolio. */
  background-image:
    linear-gradient(90deg, rgba(var(--acc-rgb, 56, 207, 255), 0.12) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0) 34px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  /* the stock's own thickness, 2px, seen from slightly above, carried on
     one hard layer in front of the ladder level */
  box-shadow:
    0 3px 0 -1px rgba(5, 12, 26, 0.92),
    var(--fr-d2);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.17em;
  text-align: left;
  text-transform: uppercase;
  color: rgba(234, 242, 255, 0.92);
  text-shadow: 0 1px 0 rgba(4, 10, 22, 0.5);
}
/* The accent edge, inlaid rather than lit: a hairline shade where the
   colour meets the stock, and no halo — a glowing bar is the software
   tell, a colour-coded index edge is the document one.

   MEASURED, not assumed: no eyebrow in the markup sits inside a
   [data-accent] element — every data-accent is on a card or a list item
   deeper in the page — so --acc-rgb here always resolves to the
   fallback. Thirteen of the fifteen markers therefore wear ONE index
   colour and the two `--accent` ones wear lime. That is left exactly as
   it is: re-tinting the marker per section is the --fr-eb hue ladder this
   rebuild deleted, and one page-wide index edge is the calmer reading. */
.fr-page .fr-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 1px 0 0 1px;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.95) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.58) 100%);
  /* THE EDGE HIGHLIGHT. Three insets and no glow: the room light catches
     the top of the cut edge, the bottom of it falls into shade, and a
     hairline of the stock's own dark sits where the colour meets the
     page. A lit bar with a halo around it is the software tell; this is
     a printed index edge with light falling on it. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(3, 10, 22, 0.3),
    inset -1px 0 0 rgba(3, 10, 22, 0.42);
}
.fr-page .fr-eyebrow--accent::before {
  background-image: linear-gradient(180deg, rgba(175, 221, 44, 0.95) 0%, rgba(175, 221, 44, 0.58) 100%);
}
/* and the bleed follows its own edge, so the two lime markers are one
   object in lime rather than a lime edge on a cyan-tinted page.
   Measured at 3x: lime over the blue stock turns olive about twice as
   fast as cyan does, and at matched alpha it read as a smudge rather
   than as ink, so this one is carried at roughly half. */
.fr-page .fr-eyebrow--accent {
  background-image:
    linear-gradient(90deg, rgba(175, 221, 44, 0.07) 0%, rgba(175, 221, 44, 0) 34px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
}

/* THE BACK SHEET. A 4px sliver of darker stock showing past the OUTER
   edge — the unbound side, which is where a stack shows.

   IT RUNS UNDER THE FACE, and that detail is the whole difference. The
   first attempt put it wholly outside the face at `left: 100%` to avoid
   any z-index work; measured at 3x it read as a separate floating pill,
   because the face's 5px outer radius curves away from a square sliver
   and leaves a lit gap between them. So it is 10px wide, starts 6px
   INSIDE the face, and goes behind it.

   `z-index: -1` is safe here precisely because `.fr-eyebrow` is
   `position: relative` with `z-index: auto` and therefore does NOT form a
   stacking context: the sliver paints into the nearest ancestor context,
   which is `.fr-shell`, below the eyebrow's own background.

   AND THAT IS WHY THE BACK SHEET REVEALS LAST. frTab animates the
   eyebrow's own opacity and transform, and for the 0.74s it runs the
   eyebrow DOES form a stacking context — during which a negative-z child
   paints above the face's background instead of below it, which is a dark
   bar laid across the right end of the tab. Caught at 3x. The fix is not
   a second mechanism: frTab starts at 0.76s, after frTab has finished
   and the eyebrow has stopped being a stacking context, and `backwards`
   holds the sliver at opacity 0 until then. There is no frame in which
   the sheet is both visible and in front. A sibling file that gave an
   eyebrow a PERMANENT stacking context would bring the artifact back,
   which is why the sheet is also the LAST thing drawn and nothing
   structural depends on it.

   Any ::after a rejected direction left here — a tick rail, a divider, a
   sweep — is replaced by this rather than overdrawn. */
.fr-page .fr-eyebrow::after {
  content: '';
  position: absolute;
  left: calc(100% - 6px);
  top: 3px;
  bottom: -3px;
  width: 10px;
  z-index: -1;
  border-radius: 0 5px 5px 0;
  background-image: linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-raise) 100%);
  box-shadow: var(--fr-d1);
  pointer-events: none;
}

/* THE REVEAL, IN TWO PARTS. The front page steps forward out of the
   bound edge; once it has landed, the back sheet settles in behind it.
   The order is the point and so is the gap: the sheet waits for the face
   to finish rather than arriving with it. Both are
   declared as a `from` frame only, so the resting state is whatever the
   rules above draw — the marker is complete before it starts, the instant
   it ends, and in a browser where the scroll script never runs. */
@keyframes frTab {
  from { opacity: 0; transform: translate3d(-6px, 0, 0); }
}
.fr-page .reveal.revealed .fr-eyebrow,
.fr-page .fr-eyebrow.reveal.revealed {
  animation: frTab 0.62s var(--fr-ease) 0.12s backwards;
}
.fr-page .reveal.revealed .fr-eyebrow::after,
.fr-page .fr-eyebrow.reveal.revealed::after {
  animation: frTab 0.52s var(--fr-ease) 0.76s backwards;
}


/* ============================================================
   8 · THE TYPE SCALE — THE THREE TIERS, ASSIGNED HERE AND ONLY HERE
   ------------------------------------------------------------
   The measured gap against the approved Tax Preparation page was that it
   sets seven of thirteen section headlines at ONE size while this page ran
   ten. The fix was not to flatten all ten onto one size — that traded a
   sprawl for a monotone, and the signature methodology ended up reading
   at the same weight as the FAQ. The fix is three levels, and every
   section headline in the markup is named here:
     --fr-h1        the hero, once on the page
     --fr-h2        the standard tier, the default every headline gets
     --fr-h2-flag   the flagship tier, promoted by section at the bottom
                    of this block: Four Pillars, Action Plan, Relationship
                    and Investment, which are the four the brief names
   The tier assignment lives in this block, together, so the hierarchy can
   be read in one place instead of inferred from nine files.

   `.fr-h2--xl` IS NOT NAMED HERE. All four of its elements carry
   `class="fr-h2 fr-h2--xl"`, so `.fr-h2` already reaches them and listing
   the modifier added specificity to nothing. More to the point, the
   retired second size should not appear in the contract file as though it
   were a size this page supports, and keying the flagship tier off it
   would promote the wrong two sections — it sits on "Sound Familiar" and
   "What It Is", neither of which is flagship. Measured at 1440 the one
   section still setting a size of its own — `.fr-sec--define` via
   30-picture.css:88 — renders 56.16px against 41.76px everywhere else;
   that is a rule to DELETE in that file, not to out-specify from here.
   ============================================================ */
.fr-page .fr-h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fr-h1);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.021em;
  color: var(--white);
  text-wrap: balance;
  font-kerning: normal;
}
.fr-page .fr-h2,
.fr-page .fr-method-title,
.fr-page .fr-plan-title,
.fr-page .fr-proof-title,
.fr-page .fr-next-title,
.fr-page .fr-close-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fr-h2);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
  font-kerning: normal;
}
/* THE FLAGSHIP TIER. Scoped by section, not by a modifier, for the reason
   given above. Specificity 0,3,0 against the standard tier's 0,2,0, so
   the promotion holds wherever this rule sits in the file — it lives here,
   with the two sizes it chooses between, rather than after the
   reduced-motion block at the end where it read as an afterthought. */
.fr-page .fr-sec--method .fr-method-title,
.fr-page .fr-sec--plan .fr-plan-title,
.fr-page .fr-sec--relate .fr-h2,
.fr-page .fr-sec--decide .fr-h2 {
  font-size: var(--fr-h2-flag);
}
.fr-page .fr-h1 .fr-line + .fr-line,
.fr-page .fr-h2 .fr-line + .fr-line { margin-top: 0.09em; }
.fr-page main h3 {
  font-family: var(--font);
  font-size: var(--fr-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.004em;
  color: var(--fr-ink);
}

/* The accent word. Flat lime italic at the SAME size as the roman, which
   is the Tax Preparation treatment: one colour, no pool of light, no
   gradient per section. */
.fr-page .fr-h2 em,
.fr-page .fr-method-title em,
.fr-page .fr-plan-title em,
.fr-page .fr-proof-title em,
.fr-page .fr-next-title em,
.fr-page .fr-close-title em,
.fr-page .fr-statement em,
.fr-page .fr-method-creed em {
  font-style: italic;
  font-size: 1em;
  font-weight: 500;
  color: var(--fr-lime);
}
/* The hero carries the page's ONE gradient word — lime through the two
   cool accents. THE DESCENDER LAW: background-clip: text paints only
   inside the box, so the compensation travels with the rule. */
.fr-page .fr-h1 em {
  font-style: italic;
  font-size: 1em;
  font-weight: 500;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(96deg, var(--fr-lime) 0%, #44b59c 62%, #38cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
/* No ™-inside-the-gradient-word rule: the hero's only <em> is
   "direction", and every .fr-tm in the markup sets OUTSIDE its em
   (`<em>Money</em><sup class="fr-tm">`), where it inherits the headline's
   own colour. The rule that used to guard that case matched nothing. */


/* ---- 9 · READING TYPE AND THE INTRO RHYTHM -------------------------
   19px on 31px, measured at 540px. One body size, one small size.

   THE LEADING IS PINNED, NOT INFERRED. --fr-body carries its line-height
   and is consumed through the `font` shorthand, but `font` RESETS
   line-height: a file that re-declares `--fr-body: 1.1875rem` without the
   /1.65 does not fail — it silently drops the measure to `normal` (~23px)
   for every section it scopes. That had already happened (80-invest.css:53
   on .fr-sec--decide / --faq / .fr-close / .fr-sec--legal, and
   40-pillars.css:61 for --fr-small), which is a second reading scale on
   four sections arriving through a token rather than a font-size. So the
   line-height is also stated literally, after the shorthand, where no
   custom property can reach it. 31px is 31px on every section. */
.fr-page .fr-body {
  margin: 0;
  max-width: var(--fr-measure);
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-lede {
  margin: 0;
  max-width: var(--fr-measure);
  font-family: var(--font);
  font-size: var(--fr-h3);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-note,
.fr-page .fr-hero-setup,
.fr-page .fr-next-setup,
.fr-page .fr-close-setup {
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-note { max-width: 64ch; margin: var(--fr-gap) auto 0; text-align: center; }
.fr-page .fr-hero-setup,
.fr-page .fr-next-setup,
.fr-page .fr-close-setup { margin: 18px 0 0; }
.fr-page .fr-hero-setup a,
.fr-page .fr-next-setup a,
.fr-page .fr-close-setup a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--fr-ink);
  border-bottom: 1px solid rgba(var(--acc-rgb, 56, 207, 255), 0.45);
  padding-bottom: 1px;
  transition: color 0.2s var(--fr-ease), border-color 0.2s var(--fr-ease);
}
.fr-page .fr-hero-setup a:hover,
.fr-page .fr-next-setup a:hover,
.fr-page .fr-close-setup a:hover { color: var(--fr-lime); border-bottom-color: var(--fr-lime); }
.fr-page .fr-hero-setup a:focus-visible,
.fr-page .fr-next-setup a:focus-visible,
.fr-page .fr-close-setup a:focus-visible {
  outline: 2px solid var(--fr-lime);
  outline-offset: 3px;
  border-radius: 3px;
}

.fr-page .fr-intro { margin-bottom: calc(var(--fr-gap) * 1.5); }
.fr-page .fr-intro--center { max-width: 980px; margin-inline: auto; text-align: center; }
.fr-page .fr-intro--center .fr-body,
.fr-page .fr-intro--center .fr-lede { margin-inline: auto; }
/* `.fr-h2 + .fr-lede` is not in the markup — a lede only ever follows the
   hero headline — so it is not in the selector. */
.fr-page .fr-h1 + .fr-lede,
.fr-page .fr-h2 + .fr-body { margin-top: clamp(16px, 1.6vw, 22px); }
.fr-page .fr-body + .fr-body { margin-top: 16px; }


/* ---- 10 · REVEAL ---------------------------------------------------
   Entrances settle; they do not fly. The scroll hook adds "revealed" at
   10% visibility, and nothing here changes a size, a flow position or a
   line count between the two states. */
.fr-page .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: none;
  transition: opacity 0.7s var(--fr-ease), transform 0.7s var(--fr-ease);
}
.fr-page .reveal.revealed { opacity: 1; transform: none; }
.fr-page .reveal-delay-1 { transition-delay: 0.08s; }
.fr-page .reveal-delay-2 { transition-delay: 0.16s; }
.fr-page .reveal-delay-3 { transition-delay: 0.24s; }

/* each statement arrives and settles, line by line */
@keyframes frRise {
  from { opacity: 0; transform: translate3d(0, 0.34em, 0); }
}
.fr-page .fr-h1.reveal.revealed > .fr-line,
.fr-page .reveal.revealed .fr-h2 > .fr-line {
  animation: frRise 0.78s var(--fr-ease) 0.05s backwards;
}
.fr-page .fr-h1.reveal.revealed > .fr-line:nth-child(2),
.fr-page .reveal.revealed .fr-h2 > .fr-line:nth-child(2) { animation-delay: 0.17s; }
.fr-page .fr-h1.reveal.revealed > .fr-line:nth-child(3),
.fr-page .reveal.revealed .fr-h2 > .fr-line:nth-child(3) { animation-delay: 0.29s; }


/* ============================================================
   11 · THE IN-PAGE CTA FAMILY
   ------------------------------------------------------------
   TWO GUARDS ON EVERY RULE, both required. `.fr-page main` keeps this off
   the global header, the mobile menu and the footer — they are site
   chrome and their geometry belongs to every other page. `:not(.btn-sm)`
   keeps it off the small chrome buttons that do appear in those regions.

   Premium and dimensional: real depth in the face, a lit upper edge, a
   bottom edge with actual thickness, soft green illumination under the
   primary so it sits in light rather than on a flat ground, one
   restrained sheen, arrow movement, a hover lift, a press response and a
   strong focus ring. No animated gradient border: "excessive glowing
   borders" is forbidden by name, and a 1px edge does the same job quietly.

   THE BOTTOM EDGE IS THE ELEVATION PASS'S ONE STRUCTURAL ADDITION, and
   everything else here follows from it. The button used to be a face with
   an inset shade along the bottom and nothing underneath, so the press
   state was a 1px translate against empty air — the motion said "pressed"
   and the material said nothing. Now there are 3px of edge below the
   face, in a darker cut of the same colour. Hover lifts the face away
   from that edge with --fr-raise-1, the shared transform. Press drops the
   face INTO it and takes the edge down to 1px, which is a key bottoming
   out: the travel is visible in the material, not only in the position.

   THE EXCEPTION IS THE PRIMARY ONLY, and it is now one face rather than
   two. The ladder's levels carry a cool rgba(150,190,235) hairline and a
   neutral cast, which is right for paper and wrong on a green face: a
   green control is lit by its own colour, so the primary keeps --fr-lift
   plus its coloured illumination and borrows only --fr-raise-1, so its
   lift matches every other lift on the page.
   THE SECONDARY HAS NO SUCH ARGUMENT. Its face is --fr-raise lifting to
   --fr-paper — the portfolio's own stock, under the portfolio's own cool
   light — and it was carrying a hand-mixed `0 0 0 1px var(--fr-edge)`
   ring plus --fr-lift, which is the same bespoke pair section 6 stopped
   writing, and which has no contact layer at all. It is on the ladder
   now: d2 at rest, d4 on hover, d1 pressed. One exception, one reason,
   and the reason is the colour of the light rather than the fact that it
   is a button.
   ============================================================ */
.fr-page main .btn:not(.btn-sm) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 60px;
  padding: 19px 28px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  text-shadow: 0 1px 1px rgba(2, 10, 22, 0.38);
  transition: transform 0.28s var(--fr-ease), box-shadow 0.28s var(--fr-ease);
}
/* THE BOTTOM EDGE is one hard `0 4px 0 -1px` layer per face: offset 4px
   down, pulled in 1px, so 3px of it shows below the face and the sides
   stay clean. It is a darker cut of that face's own colour. It is written out in each face's
   box-shadow rather than hoisted into a custom property: the contract
   says this file adds no tokens, and a 3px literal in two places is a
   cheaper promise to keep than a fifth name in the system. */
/* The green face is the brand green lifting to lime, with the page ground
   laid over both ends so the illumination pools in the middle rather than
   flattening into a lime slab — two existing colours, no third. The label
   and the arrow sit on the darkened thirds, which is what keeps white
   legible across the whole face. */
.fr-page main .btn-primary:not(.btn-sm) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(104deg, rgba(7, 14, 29, 0.34) 0%, rgba(7, 14, 29, 0.08) 44%, rgba(7, 14, 29, 0.44) 100%),
    linear-gradient(140deg, #57ab28 0%, #57ab28 46%, var(--fr-lime) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(2, 8, 20, 0.3),
    /* 3px of edge below the face, in a darker cut of the same green */
    0 4px 0 -1px #2f6a16,
    /* the soft green illumination the face stands in */
    0 16px 34px -16px rgba(87, 171, 40, 0.6),
    var(--fr-lift);
}
/* THE SECONDARY IS PAGE STOCK, so it sits on the ladder like page stock.
   Its face is --fr-raise lifting to --fr-paper — the portfolio's own two
   colours — and it was nonetheless carrying a hand-mixed
   `0 0 0 1px var(--fr-edge)` ring plus --fr-lift, which is the exact pair
   section 6 stopped writing. That pair has no contact layer, so the one
   button on the page made of paper was also the one raised object on the
   page with nothing under it. It is --fr-d2 at rest, the same height as a
   raised portfolio page; the 3px bottom edge and the inset bottom shade
   are a control's own material and stay in front of the level. */
.fr-page main .btn-secondary:not(.btn-sm) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(140deg, var(--fr-raise) 0%, var(--fr-paper) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(2, 8, 20, 0.3),
    /* the same 3px of edge, in the ground the face is cut from */
    0 4px 0 -1px #050b18,
    var(--fr-d2);
}
/* THE RESTRAINED SHEEN. Narrow, faint and long-period: frSheen travels
   during a quarter of its cycle and parks entirely off both ends, so a
   still screenshot almost never contains the band — and at this alpha,
   when it does, nothing is spoiled. */
.fr-page main .btn:not(.btn-sm)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(104deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 26% 100%;
  background-position: -60% 0;
  animation: frSheen 22s var(--fr-ease-soft) 3s infinite;
}
/* on a dark face the same pass reads twice as strong, so it is halved */
.fr-page main .btn-secondary:not(.btn-sm)::before {
  background-image: linear-gradient(104deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 100%);
}
@keyframes frSheen {
  0%, 66% { background-position: -60% 0; }
  92%, 100% { background-position: 160% 0; }
}
/* the arrow is a control, and it moves */
.fr-page main .btn:not(.btn-sm) > svg,
.fr-page main .btn:not(.btn-sm) > .fr-ico {
  order: 2;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  stroke-width: 2.3;
  transition: transform 0.28s var(--fr-ease);
}
.fr-page main .btn:not(.btn-sm):hover > svg,
.fr-page main .btn:not(.btn-sm):hover > .fr-ico { transform: translateX(4px); }
/* HOVER: the face lifts off its own edge with the shared transform, the
   edge grows to 5px of visible thickness to fill the gap it left, and the illumination spreads
   because the face is now further from the ground. */
.fr-page main .btn-primary:not(.btn-sm):hover {
  transform: var(--fr-raise-1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(2, 8, 20, 0.3),
    0 6px 0 -1px #2f6a16,
    /* pulled back from 42px/0.72: the lift already reports the hover, and
       at 0.72 the pool stopped being light under a face and started being
       a glow around a button */
    0 20px 38px -16px rgba(87, 171, 40, 0.66),
    var(--fr-lift);
}
/* and on hover it goes to --fr-d4, which is the ladder's own hover level
   and the only one allowed to move — the same height the pillars, the
   diagnosis cards and the picture spread reach on hover, rather than a
   brighter ring hand-mixed here. */
.fr-page main .btn-secondary:not(.btn-sm):hover {
  transform: var(--fr-raise-1);
  box-shadow:
    inset 0 -1px 0 rgba(2, 8, 20, 0.3),
    0 6px 0 -1px #050b18,
    var(--fr-d4);
}
/* ONE PASS OF SHEEN ON HOVER. The same keyframe at 1/14th the period and
   a single iteration: the idle pass is ambient light crossing a face, and
   this is the same light answering the pointer. No second mechanism, no
   second gradient, nothing added to the still page. */
.fr-page main .btn:not(.btn-sm):hover::before {
  animation: frSheen 1.6s var(--fr-ease-soft) 1 both;
}
/* PRESS: the face travels down into its edge and the edge bottoms out at
   1px. The lift is given back first, so a press from hover and a press
   from rest arrive at the same place. */
.fr-page main .btn:not(.btn-sm):active { transform: translate3d(0, 2px, 0); }
.fr-page main .btn-primary:not(.btn-sm):active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 2px 6px rgba(2, 8, 20, 0.34),
    0 2px 0 -1px #2f6a16,
    0 8px 18px -12px rgba(87, 171, 40, 0.5);
}
/* pressed, it drops to --fr-d1 — bottomed out, barely off the ground, no
   cast worth the name — with the inner shade the press puts in the face. */
.fr-page main .btn-secondary:not(.btn-sm):active {
  box-shadow:
    inset 0 2px 6px rgba(2, 8, 20, 0.4),
    0 2px 0 -1px #050b18,
    var(--fr-d1);
}
.fr-page main .btn:not(.btn-sm):focus-visible {
  outline: 3px solid var(--fr-lime);
  outline-offset: 3px;
}

/* THE TOUCH SCREEN GETS NO IDLE ANIMATION, and that is a deletion from
   the elevation pass rather than a gap in it.
   What was here: frIdle, a nine-second infinite breath of the green
   illumination under the primary CTA inside @media (hover: none) — the
   reasoning being that a phone never gets :hover, so the primary has no
   way to say it is live. Three things were wrong with it.
     · THE MOTION BUDGET AT THE TOP OF THIS FILE SAYS "nothing pulses."
       A glow rising and falling under a button on a loop is a pulse. The
       file was carrying a rule and a prohibition on the same mechanism,
       and on touch screens — most of the traffic — the prohibition lost.
     · IT IS THE GAMING TELL. A green button quietly breathing on a dark
       page is the single most recognisable "app" signature there is, and
       it ran constantly, on every phone, with no pointer and no scroll
       to stop it. In a still screenshot it is invisible; in the hand it
       is the loudest thing on the page.
     · A PHONE IS NOT ACTUALLY MUTE. :active fires on tap, and the press
       state below is a real one — the face travels into its edge and the
       edge bottoms out at 1px. That is the touch feedback, it is already
       built, and it says "live" at the moment the reader asks.
   What goes with it: the `:active { animation: none }` guard, which only
   existed because a running animation would have outranked the press
   shadow. Deleting the animation deletes the problem instead of guarding
   it. The motion budget is now five keyframes and no mechanism in this
   file runs forever on a phone except the 52s environmental light. */
@media (hover: none) {
  /* the sheen is the only light crossing the face here, so it keeps its
     slow 22s period rather than borrowing the hover pass — a tap on a
     phone fires :hover in some browsers and would otherwise strobe the
     band at 1.6s on every touch */
  .fr-page main .btn:not(.btn-sm):hover::before { animation: frSheen 22s var(--fr-ease-soft) 3s infinite; }
}


/* ---- 12 · THE CLOSING BAND ----------------------------------------- */
.fr-page .fr-close-inner { text-align: center; }
.fr-page .fr-close-title {
  max-width: 22ch;
  margin: 0 auto var(--fr-gap);
}
.fr-page .fr-close-title .fr-line + .fr-line { margin-top: 0.09em; }
/* The disclosure sits inside .fr-sec--legal, which a sibling file scopes
   a bare --fr-small onto; same pin as section 9. */
.fr-page .fr-legal {
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-legal p + p { margin-top: 14px; }

/* ============================================================
   THE SECTION MARKER — hero, Complete Picture, Four Pillars
   The filled tab this replaces was 36px tall with a gradient
   fill, a radius and a drop shadow: three section eyebrows that
   each photographed as one more dark rectangle in a page the
   client has twice called too rectangular. Measured against the
   approved pages, a section marker there carries NO fill, NO
   padding and NO radius — Tax Preparation sets them as plain
   coloured type (Inter 12px/2.4px tracking, or Cormorant italic
   23px) and lets a hairline do the rest. So this is type and one
   lit rule, and the rectangle is gone. Frozen sections keep the
   current pill until their own phase.
   ============================================================ */
.fr-page .fr-hero .fr-eyebrow,
.fr-page .fr-sec--method .fr-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  /* the label and its rule are one mark: wrapping the words would put the
     hairline beside a two-line block and read as a mistake */
  white-space: nowrap;
  color: rgba(var(--acc-rgb, 2, 193, 255), 0.96);
  text-shadow: 0 0 20px rgba(var(--acc-rgb, 2, 193, 255), 0.28);
}
/* the one illuminated edge: a hairline running out of the label,
   bright where it leaves the type and gone by its far end. */
.fr-page .fr-hero .fr-eyebrow::after,
.fr-page .fr-sec--method .fr-eyebrow::after {
  content: '';
  position: static;
  inset: auto;
  margin: 0;
  flex: none;
  width: clamp(32px, 4.6vw, 70px);
  height: 1px;
  transform-origin: left center;
  background-image: linear-gradient(90deg,
    rgba(var(--acc-rgb, 2, 193, 255), 0.85) 0%,
    rgba(var(--acc-rgb, 2, 193, 255), 0.2) 56%,
    rgba(var(--acc-rgb, 2, 193, 255), 0) 100%);
}
/* and the lit tick it starts from — 3px of the accent standing on
   the baseline, the smallest mark that still reads as deliberate */
.fr-page .fr-hero .fr-eyebrow::before,
.fr-page .fr-sec--method .fr-eyebrow::before {
  content: '';
  position: static;
  inset: auto;
  margin: 0;
  flex: none;
  width: 3px;
  height: 11px;
  border-radius: 0;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 2, 193, 255), 0.95) 0%,
    rgba(var(--acc-rgb, 2, 193, 255), 0.35) 100%);
  box-shadow: 0 0 12px -2px rgba(var(--acc-rgb, 2, 193, 255), 0.6);
}
/* THE CENTRED CASE. The methodology label sits over a centred
   headline, so its marks mirror: a hairline each side and no
   tick, which is the `— label —` figure the approved pages use
   when the composition itself is centred. */
.fr-page .fr-sec--method .fr-method-head .fr-eyebrow {
  margin-inline: auto;
}
.fr-page .fr-sec--method .fr-method-head .fr-eyebrow::before {
  width: clamp(32px, 4.6vw, 70px);
  height: 1px;
  box-shadow: none;
  background-image: linear-gradient(270deg,
    rgba(var(--acc-rgb, 2, 193, 255), 0.85) 0%,
    rgba(var(--acc-rgb, 2, 193, 255), 0.2) 56%,
    rgba(var(--acc-rgb, 2, 193, 255), 0) 100%);
}
/* the rule draws out once as the section arrives, then stays */
.fr-page .fr-hero .revealed .fr-eyebrow::after,
.fr-page .fr-sec--method .revealed .fr-eyebrow::after,
.fr-page .fr-sec--method .revealed .fr-eyebrow::before {
  animation: frMarkRule 0.72s var(--fr-ease, cubic-bezier(.2,.7,.2,1)) 0.1s backwards;
}
@keyframes frMarkRule {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
/* FR-MOTION-BLOCK:START */
/* ============================================================
   ONE MOTION LANGUAGE
   This page had grown roughly twenty-eight bespoke keyframes, one
   per section, which is the thing that makes motion read as
   decoration rather than as a system. Everything added or changed
   from here on composes these four primitives instead:

     1 SHEEN     a directional light crosses signature text, once
     2 TRACE     a cyan -> teal -> lime edge draws along an object, once
     3 LIFT      a 2-5px rise and settle on reveal
     4 TAB LIGHT the active tab's edge light, once per selection

   Every one of them runs ONCE and stops. Nothing here loops.
   The whole set is switched off under prefers-reduced-motion at the
   foot of this block, and each effect is written so that with the
   animation removed the element is already in its finished state —
   so the page is complete, not merely static, when motion is off.
   ============================================================ */

/* scoped to .fr-page: a token on :root would leak the name to every
   other page in the shared stylesheet */
.fr-page {
  --fr-trace: linear-gradient(90deg,
    rgba(56, 207, 255, 0) 0%, rgba(56, 207, 255, 0.95) 18%,
    rgba(68, 181, 156, 0.95) 56%, rgba(175, 221, 44, 0.95) 86%,
    rgba(175, 221, 44, 0) 100%);
}

/* ---- 1. SHEEN ------------------------------------------------
   Signature text is painted with a brand gradient and a light band
   travels through the glyphs once. `background-clip: text` means a
   browser that cannot do it keeps ordinary ink, so the fallback is
   a readable heading rather than an invisible one. */
.fr-page .fr-gtext {
  color: var(--fr-ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fr-page .fr-gtext {
    --g-sheen: rgba(255, 255, 255, 0);
    background-image:
      linear-gradient(100deg,
        var(--g-sheen) 0%, rgba(255, 255, 255, 0.85) 8%, var(--g-sheen) 16%),
      linear-gradient(100deg, var(--g1, #38cfff), var(--g2, #44b59c), var(--g3, #afdd2c));
    background-size: 240% 100%, 100% 100%;
    background-position: 180% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .fr-page .fr-gtext.revealed,
  .fr-page .revealed .fr-gtext,
  .fr-page .revealed.fr-gtext {
    animation: frTextSheen 1.5s var(--fr-ease-soft) 0.25s 1 both;
  }
}
/* NOT `frSheen`: 00-foundation already defines that name for the 22s
   button-hover sheen, and a second definition later in the same file
   silently replaces the first — which would have broken every button
   on the page. Gradient TEXT gets its own name. */
@keyframes frTextSheen {
  from { background-position: 180% 0, 0 0; }
  to   { background-position: -90% 0, 0 0; }
}

/* ---- 2. TRACE ------------------------------------------------
   A hairline in the brand progression draws along an edge once. It
   is a scale transform on a pseudo, so it costs no layout and it
   ends at its full length — which is the state a reduced-motion
   reader sees immediately. */
.fr-page .fr-trace {
  position: relative;
}
.fr-page .fr-trace::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  border-radius: 1px;
  background-image: var(--fr-trace);
  transform-origin: left center;
  pointer-events: none;
}
.fr-page .fr-trace.revealed::after,
.fr-page .revealed .fr-trace::after {
  animation: frTraceX 0.95s var(--fr-ease) 0.2s 1 both;
}
@keyframes frTraceX {
  from { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---- 3. LIFT -------------------------------------------------- */
@keyframes frLift {
  from { opacity: 0; transform: translateY(var(--fr-lift-d, 4px)); }
  to   { opacity: 1; transform: none; }
}

/* ---- 4. TAB LIGHT ---------------------------------------------
   One light runs around the selected tab and stops; the tab stays
   raised and lit afterwards because that state is carried by the
   tab's own rules, not by the animation. */
@keyframes frTabLight {
  from { opacity: 0; transform: translateX(-100%); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(100%); }
}
/* FR-MOTION-BLOCK:END */

/* =========================================================
   10 · HERO — STEVEN, AND THE FINANCIAL STRATEGY ORGANIZER
   ---------------------------------------------------------
   THE FAILURE THIS PASS FIXES. Every previous pass built the organizer
   out of DARK NAVY STOCK with the lettering and the entries lit on top of
   it. That is why it still read as "a small interface panel": a dark
   rectangle carrying glowing cyan and lime type IS a software panel, and
   no amount of hinge detail, arris light or contact shadow changes what
   the MATERIAL says. The client's own rule — "if the visitor only sees a
   large dark rectangle full of text, the section fails" — applied to the
   hero's own object.

   SO THE MATERIAL IS INVERTED. The organizer is PAPER: warm bone stock,
   printed in dark ink, lying in the dark room and lit from the upper left
   by the same lamp that is burning in Steven's photograph. A lit document
   on a dark desk is the most physical object this page can own, and it is
   also literally what he is doing in the picture — writing out a plan on
   paper. Dark board stays where dark board belongs: the COVER, which is
   now what gives the object its silhouette against the room.

   This is the only `.fr-folio` on the site — 30-picture, 50-build and
   60-forward build nothing from these classes, and 40-pillars' `.fr-folio4`
   is a different object — so the stock change is contained to this file.

   THE ANATOMY
     cover board            .fr-folio::before   dark board, 3px thickness
     contact shadow         .fr-folio::after    painted on the desk
     3 sheets in the stack  .fr-folio-leaf--1/2/3, lit cut rims
     inner paper shadow     .fr-folio-body::before
     cut block of sheets    .fr-folio-body::after, three lit arrises
     six divider tabs       .fr-folio-tab — bone card stock, the
                            category's own colour on the index edge, the
                            name PRINTED in dark ink
     front strategy sheet   .fr-folio-page + .fr-folio-ptitle
     what is written on it  .fr-folio-rows / -rk / -rv, one panel per tab
     signed off             .fr-folio-line — the educational note, and
                            an inked approval tick
     folded corner          .fr-folio-corner

   SIX CATEGORIES, SIX FUNCTIONAL COLOURS — not one green ramp. The old
   run (cyan → turquoise → teal → green → yellow-green → lime) left four
   of the six tabs indistinguishable, which is decoration, not meaning.
   The contract's own families are used instead: cash/operating cyan,
   bills/scheduled indigo, debt deep teal-blue, savings protection teal,
   credit green, goals lime. Six tabs you can tell apart is the whole
   reason an organizer has coloured dividers.

   DEPTH comes from the shared ladder (d1 the sheets in the stack and a
   resting tab, d2 the raised front sheet, d3 the cover and the active
   tab, d4 hover) plus zero-blur thickness steps, overlap, a contact
   shadow and one small perspective turn held in --fr-fo-tilt. No bespoke
   blurred shadow is written in this file.

   MOTION — five one-shot systems, nothing loops:
     frFolioOpen    the organizer settles onto the desk          0.00s
     frFolioSettle  the loose sheets settle into the stack       0.30s
     frHeroTab      the six dividers come out, one per category  0.46s
     frHeroFolioInk the entries are written, in reading order    0.90s
     frFolioEdge    one light crosses the cut block of sheets    1.30s
   Every keyframe is `from`-only or parks off the surface, so the object
   is complete in a still frame and under reduced motion.

   MOBILE IS A DIFFERENT OBJECT, not the desktop one stacked. Desktop is
   a right-bound portfolio seen at a slight turn with its dividers reaching
   LEFT across the gutter into the copy column. A phone has no gutter and
   no portrait beside it, so the phone shows a TOP-TAB organizer instead:
   square to the reader, centred, six dividers in two ranks across the
   HEAD of the sheet, the loose sheets fanning DOWN below it rather than
   left, the spine gone, and the strategy sheet rewritten as a ruled
   ledger page — one entry per line — instead of the printed two-column
   summary block desktop prints. Nothing stands proud sideways, so
   nothing can overflow or clip at 430/400/390/360.

   TYPE is the foundation's. THIS FILE SETS NO SECTION-HEADLINE SIZE; the
   only type it sizes is the lettering printed on the organizer itself.
   Steven's photograph carries no filter, tint, blur or grade.

   LAYER ORDER  0 ::before · 0 atmos · 0 ::after · 1 .fr-hero-media ·
                3 .fr-shell (organizer at 2; inside it: 0 cover ·
                0 sheets · 1 body · within the body 0 tabs / 2 page)
   ========================================================= */

/* ---- 1 · THE ROOM AND THE DESK -------------------------------------- */
.fr-page .fr-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden; overflow: clip;
  /* no fill of its own: the hero is a window onto the page's one ground,
     which is what lets it hand off into section 1 with no seam */
  background: none;
  min-height: min(100svh, 920px);
}
/* two soft washes, plus a deeper pool of the page's own ground behind the
   plate's corner so the right half of the room has depth rather than flat
   navy. Indigo and teal are contract accents; 7,14,29 is --fr-ground. */
.fr-page .fr-hero::before {
  content: '';
  position: absolute;
  inset: -12% -10% -18%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 22% 28%, rgba(111, 126, 224, 0.17) 0%, transparent 72%),
    radial-gradient(46% 42% at 80% 88%, rgba(68, 181, 156, 0.11) 0%, transparent 74%),
    radial-gradient(64% 58% at 88% 34%, rgba(7, 14, 29, 0.58) 0%, transparent 76%);
}
/* THE DESK. A grid is a diagram of a surface; this is a surface. The lit
   lip is struck at 58% across, brightest under the folio and dying out
   toward the copy — an asymmetric pool, which stops it reading as a rule
   drawn across the hero. At z-index 0, behind the plate at 1: this light
   reaches the room Steven is in, never him. */
.fr-page .fr-hero::after {
  content: '';
  position: absolute;
  left: -10%; right: -10%; bottom: -8%; height: 46%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 11% at 58% 16%, rgba(234, 242, 255, 0.19) 0%, transparent 76%),
    linear-gradient(180deg, rgba(14, 26, 48, 0) 0%, rgba(14, 26, 48, 0.34) 20%,
      rgba(7, 14, 29, 0.5) 58%, rgba(2, 8, 20, 0.74) 100%),
    radial-gradient(64% 56% at 50% 100%, rgba(2, 8, 20, 0.66) 0%, transparent 74%);
}
/* the key light, on the page's shared breath and opacity band, so the
   hero breathes at the page's rate and introduces no new motion
   vocabulary. */
.fr-page .fr-hero-atmos {
  position: absolute;
  inset: 0;
  z-index: 0; pointer-events: none;
  opacity: 0.54;
  background:
    radial-gradient(58% 62% at 10% 16%, rgba(111, 126, 224, 0.34) 0%, transparent 70%),
    radial-gradient(40% 48% at 72% 46%, rgba(2, 193, 255, 0.1) 0%, transparent 74%);
  animation: frAir 46s var(--fr-ease-soft) infinite;
}

/* ---- 2 · THE COMPOSITION -------------------------------------------
   KEPT, as the brief requires: headline and copy left, Steven right, the
   folio near him, the CTA below the copy. Two columns, not two panels —
   the folio's PAGE BODY sits in the right column while its divider tabs
   stand proud of the page's outer edge and cross the gutter into the copy
   column's dead space, at the height where the copy has already ended.
   One object lying across the seam. The shell is stretched to the hero's
   full height on purpose: that is what makes "bottom" mean the DESK rather
   than the end of the copy, and it keeps the folio's top edge below
   Steven's chin at any height. */
.fr-page .fr-hero > .fr-shell {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(332px, 26vw, 392px);
  column-gap: clamp(18px, 1.9vw, 32px);
  align-items: center;
}

/* ---- 3 · THE STATEMENT — type, spacing, and nothing else ----------- */
.fr-page .fr-hero-copy {
  position: relative;
  max-width: min(680px, 100%);
  padding: var(--fr-hc-top, clamp(96px, 11vh, 136px)) 0 var(--fr-hc-bot, clamp(48px, 6vh, 80px));
}
.fr-page .fr-hero .fr-lede { max-width: min(100%, 48ch); margin: clamp(24px, 2.5vw, 32px) 0 0; }
.fr-page .fr-hero-actions {
  display: flex;
  flex-wrap: wrap; gap: 16px;
  margin: clamp(32px, 3.4vw, 42px) 0 0;
  /* the uppercase label runs longer than the reading measure at narrow
     desktop widths; let it pass the column rather than clip. The bound is
     the shell's widest gutter, written literally — the foundation declares
     no --fr-gutter, so consuming one computed to `none`, i.e. no bound. */
  width: max-content;
  max-width: calc(100vw - 64px);
}
.fr-page .fr-hero-actions .btn-primary:not(.btn-sm) { letter-spacing: 0.105em; }
/* spacing only: the foundation already gives .fr-hero-setup --fr-small and
   --fr-ink-2 by name. */
.fr-page .fr-hero-setup {
  margin: clamp(18px, 1.9vw, 24px) 0 0;
}
.fr-page .fr-hero-setup a .fr-ico { width: 16px; height: 16px; transition: transform 0.3s var(--fr-ease); }
.fr-page .fr-hero-setup a:hover .fr-ico { transform: translateX(3px); }
.fr-page .fr-hero-setup a:focus-visible { outline: 2px solid var(--fr-ink); outline-offset: 3px; border-radius: 3px; }

/* ---- 4 · THE PLATE --------------------------------------------------
   Untouched, and untouchable: the photograph is never recoloured, blurred,
   regenerated or reframed through his face. Not a picture in the lower
   right but a full-height plate bleeding off the top, right and bottom,
   cut on its inner side so it has no edge facing the copy. Three mask
   layers, intersected: a long diagonal that finishes by 52% across, well
   left of his sleeve; a wide ellipse offset to him, which is what removes
   the CORNERS (a diagonal alone tilts down the box, so at the bottom-left
   it has already gone opaque and prints a hard vertical cut); and a
   vertical ramp starting above his hair and ending below his hands. The
   <img> carries no filter, blur, tint or grade. */
.fr-page .fr-hero-media {
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0; right: -5%;
  width: clamp(760px, 68vw, 1120px);
  margin: 0;
}
.fr-page .fr-hero-media picture { display: contents; }
.fr-page .fr-hero-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  -webkit-mask-image:
    linear-gradient(101deg, transparent 0%, rgba(0, 0, 0, 0.3) 30%, #000 52%, #000 100%),
    radial-gradient(76% 94% at 66% 50%, #000 56%, rgba(0, 0, 0, 0.42) 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(101deg, transparent 0%, rgba(0, 0, 0, 0.3) 30%, #000 52%, #000 100%),
    radial-gradient(76% 94% at 66% 50%, #000 56%, rgba(0, 0, 0, 0.42) 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 86%, transparent 100%);
  mask-composite: intersect;
}


/* ---- THE COVER BOARD AND THE SPINE ----------------------------------
   A COVER, NOT A BEZEL, and the difference is where it is allowed to
   show: flush at the head, 9px at the open edge, 10px at the foot where
   the board stands on the desk, 9px wrapping the spine. The second
   gradient layer is the hinge read from the bound edge inward — a lit
   lip, a dark fold core, a lit return, then shade under the page. Now
   that the pages are bone, the dark board is what gives the object a
   silhouette against the room instead of dissolving into it. */

/* the darkening the desk itself takes under the object — a pool spreading
   away from the foot. The ladder's d3 already carries the object's own
   cast, so this stays low: doubling a cast shadow is what turns a standing
   object into a smear. */


/* ---- the loose sheets under the front page --------------------------
   Inset to the PAGE box, never the organizer box, because a sheet is the
   size of a page and the organizer box also holds the proud divider band.
   Each is bone stock a shade down in the front sheet's shade, with LIT
   CUT RIMS on its exposed left and bottom edges — that rim is paper
   thickness, and it is what stops three offset rectangles reading as
   three shadows. They sit at d1, the ladder's flat sheet. */


/* loose sheets settling into one stack — the keyframe's only frame is
   `from`, so the resting frame is the transform declared above. */


/* what the raised front sheet throws onto the sheets it is lying on: a
   painted band outside its open edge and foot, gone within 14px. This is
   the detail that makes the front sheet a separate piece of paper rather
   than the top face of one slab. */

/* THE CUT BLOCK OF SHEETS at the foot — three arrises, each a lit top and
   a dark core, stepping back as they go down: four sheets seen edge-on,
   which agrees with the three loose sheets behind the page. It is also
   where the ONE controlled highlight travels; it parks at 150%, entirely
   off the open end, so no still frame can hold a streak on the edge. */


/* ---- the six divider tabs -------------------------------------------
   CARD STOCK WITH A COLOURED INDEX EDGE AND A PRINTED NAME — which is
   what a labelled divider actually is. Every earlier attempt made the tab
   itself the coloured thing (a saturated tile with a bold label, six of
   them stacked: a navigation rail) or made it navy-on-navy with the
   colour confined to a sliver. Bone stock with the category's own ink on
   the outer edge and the name printed in dark ink solves both: the stack
   reads light against the dark room, the colour is unmistakable, and
   nothing about it is clickable.

   They hang off the front sheet's OUTER edge and sit BEHIND it, so their
   inner ends are covered the way a real divider's is. Width is
   max-content with the proud band as a floor, so the set is sized to its
   longest name and no name can be cut off in any font fallback. */


/* THE INDEX EDGE — the category's colour on the cut edge of the divider,
   with a hairline of light on its top arris and shade where it meets the
   stock. No halo: a lit bar with a glow around it is the software tell; a
   printed index edge with light falling on it is the document one. */

/* ---- SIX CATEGORIES, SIX COLOURS, DECLARED ONCE AND READ TWICE -------
   Divider n and written entry n carry the same ink, so a reader who takes
   in the dividers and then drops onto the sheet sees the SAME SIX THINGS
   in the same order.fr-page .fr-hero .fr-folio-tab{
  --fr-fo-hi: color-mix(in srgb, rgb(var(--fr-fo-hue)) 82%, #141f2c);
  --fr-fo-h2: color-mix(in srgb, rgb(var(--fr-fo-hue)) 56%, #5d5544);
}
.fr-page .fr-hero .fr-folio-tab:nth-child(1){ --fr-fo-hue: 2, 193, 255; }
.fr-page .fr-hero .fr-folio-tab:nth-child(2){ --fr-fo-hue: 58, 76, 196; }
.fr-page .fr-hero .fr-folio-tab:nth-child(3){ --fr-fo-hue: 20, 124, 152; }
.fr-page .fr-hero .fr-folio-tab:nth-child(4){ --fr-fo-hue: 68, 181, 156; }
.fr-page .fr-hero .fr-folio-tab:nth-child(5){ --fr-fo-hue: 87, 171, 40; }
.fr-page .fr-hero .fr-folio-tab:nth-child(6){ --fr-fo-hue: 175, 221, 44; }
/* one printed notation per index edge, so the sixth category — Credit,
   whose divider is closed in this state — still has a cue of its own */


/* THE OPEN DIVIDER. The sheet on show is the Strategy Overview, which
   opens on cash flow, so that divider stands further proud, takes the
   front sheet's own lit stock and the ladder's d3. One divider forward
   out of six is hierarchy; six identical ones was the flat read. */


/* NO ICON ON A DIVIDER: an icon beside a bold label, six in a column with
   a leading coloured band, is the one cue that makes the stack a rail. */

/* they come out in sequence, each from under the sheet's outer edge */


/* ---- the front strategy sheet ---------------------------------------
   Warm bone stock, the lamp falling on it from the upper left, the gutter
   shade running up the bound edge, and a very low paper tooth so the
   surface is a material rather than a fill. Two zero-blur steps give it a
   thickness you can measure before any soft shadow, then the ladder's d2.
   The warm inset hairline is listed BEFORE d2 so the sheet's own cut edge
   is paper-coloured rather than the ladder's cool --fr-edge. */

/* THE BINDING GROOVE, the inner half of the spine: a dark fold core, the
   paper's own lit lip where it comes back up, and shade running inward.
   It is why the right corners are square and the left are not. */

/* the top cut edge of the stock, lit where the room reaches it at the
   open side and dying out as it runs into the binding. Static, and it is
   what reads at rest. */


/* THE LETTERHEAD. Small printed caps for the programme, the sheet's own
   name in the italic serif the page uses as its second voice, and a
   printed rule struck in the first category's ink for its first sixth. No
   badge, no chip: a title printed on a document. */


/* THE FOLDED CORNER, bottom left because the sheet is bound on the right.
   Three things keep it a curl rather than a cut-out: the shadow the lift
   throws back onto the sheet below, an underside that is the same stock
   seen from behind — brighter where it catches the lamp, falling away as
   it turns — and a soft fold line rather than a stripe. */


/* THE DIMENSIONAL HOVER, desktop only: a small lift, the dividers extend,
   the edge light strengthens. Nothing is explained by any of it, so a
   phone loses nothing. */
@media (hover: hover) and (min-width: 981px) {
  
  
  
  
  /* four sheets answering one movement at four rates is what reads as
     depth rather than as a picture tilting. It travels under 4px. */
  
  
  
  
  
  
  
}
/* A SHORT, WIDE WINDOW: the copy column is taller than the hero, so the
   grid row grows past the bottom and eats the clearance under the object.
   Hand it back from the copy's bottom padding. */
@media (min-width: 981px) and (max-height: 820px) {
  .fr-page .fr-hero-copy {
    --fr-hc-top: clamp(80px, 9vh, 112px);
    --fr-hc-bot: clamp(24px, 3vh, 44px);
  }
  
}

/* ---- 10 · THE KEYFRAMES ---------------------------------------------
   Seven, every one of them running ONCE, and none of them a name another
   file owns: frAir, frRise, frTab and frSheen belong to the foundation,
   frFolioPage/frFolioTab to 80-invest, frFolioInk to 40-pillars — which is
   why the ink keyframe here is prefixed frHero*.

   Two of them read a TOKEN rather than a literal, because the phone
   composition turns the movement through ninety degrees: a divider comes
   out sideways on a desktop and rises from behind the sheet on a phone,
   and the organizer settles from a swing on a desktop and from a small
   lean on a phone. One keyframe, two compositions, no second name.

   Every one is `from`-only or parks entirely off the surface, so the
   resting state is always the element's own declared value: the object
   photographs correctly at any instant, and once the reveal is finished
   nothing in this file is moving. */


@keyframes frHeroTab { from { opacity: 0; transform: var(--fr-fo-tabfrom); } }
@keyframes frHeroFolioInk { from { opacity: 0.1; } }
@keyframes frHeroWrite { from { clip-path: inset(0 100% 0 0); } }
@keyframes frHeroStamp { from { opacity: 0; transform: rotate(45deg) scale(0.3); } }

@media (min-width: 981px) {
  
  
  /* on the bound edge the open divider grows SIDEWAYS instead of up */
  
  
  /* THE CUE STAYS RIGHT-ANCHORED. Setting `left: 0` here without
     clearing the base rule's `right` left BOTH offsets in force, so the
     pill was stretched to a 22px box whose content spilled out across
     Steven's jaw. Anchored on its right edge near the head of the
     divider column, it runs LEFT into open ground instead. */
  
}


/* the toned gradient had no base under it, so every closed divider showed
   the same washed tint. Tone now sits over the folder's own dark board,
   which is what makes the six read as six different index cards. */


/* and the old index edge carried a second, always-cyan colour system on
   top of the new one: the card itself is the colour now */

/* FR-FOLIO-BLOCK:START */
/* =========================================================
   5 · THE FINANCIAL STRATEGY ORGANIZER
   ---------------------------------------------------------
   Rebuilt once, from the Tax Preparation binder's construction
   principle, replacing four passes of overrides.

   WHAT THAT COMPONENT ACTUALLY DOES, AND WHAT THIS NOW DOES TOO:
     1 ONE HORIZONTAL RAIL. Dividers sit along the top edge of the
       sheet and overlap it, so the tab and the page are visibly the
       same object. A 3x2 grid of chips is a menu, not a file.
     2 THE OPEN DIVIDER IS A DIFFERENT OBJECT. It is taller, it is
       saturated, it loses its bottom edge into the sheet, and the
       sheet's top rule takes its colour. Colour alone never says
       "this one is open".
     3 THE STOCK IS LIGHT AND COOL. Tax Prep's sheet is crisp
       off-white with a cool fall. The warm bone paper this object
       used before (#f2ebda) is what made it read as a vintage file
       rather than a document printed this morning.
     4 THE OBJECT NEVER CHANGES SIZE. See THE FIXED PAGE below.

   The organizer is deep navy satin with a cyan edge light; the sheet
   inside it is near-white. Depth comes from layering and soft shadow,
   not from bevels, texture or a heavy perspective turn.
   ========================================================= */

.fr-page .fr-hero .fr-folio {
  position: relative;
  z-index: 2;
  align-self: end;

  /* ---- PROPORTIONS ---- */
  --fo-pad: clamp(13px, 1.1vw, 17px);     /* shell around the sheet      */
  --fo-rail: 4px;                          /* gap between dividers        */
  --fo-tab: 40px;                          /* a closed divider            */
  --fo-tab-open: 46px;                     /* the open one: +6px          */
  --fo-sheet-pad: clamp(17px, 1.5vw, 23px);
  --fo-r: 17px;                            /* the shell's corner          */
  --fo-sheet-r: 13px;                      /* the sheet's corner          */

  /* ---- THE STOCK: crisp, cool, printed today ---- */
  --fo-p1: #fcfdff;
  --fo-p2: #edf2f9;
  --fo-p3: #dbe4ef;
  --fo-leaf: #d7e0ec;
  --fo-leaf2: #bccadb;
  /* ---- THE INK ---- */
  --fo-t1: #0f1a2b;
  --fo-t2: #5d6e86;
  --fo-rule: rgba(15, 26, 43, 0.1);
  --fo-rule2: rgba(15, 26, 43, 0.065);

  /* the open divider's tone, handed down from the markup so the sheet
     edge can carry it. `data-active` is set by the driver and shipped
     in the HTML, so the connection holds with no JS. */
  --act: 2, 193, 255;

  padding: var(--fo-pad);
  border-radius: var(--fo-r);

  /* THE ORGANIZER ITSELF: deep navy satin, one cool edge light along the
     top, a hairline ring, and a single soft cast. No bevel. */
  background-image:
    linear-gradient(90deg,
      rgba(2, 193, 255, 0) 4%, rgba(2, 193, 255, 0.5) 26%,
      rgba(68, 181, 156, 0.45) 62%, rgba(175, 221, 44, 0) 94%),
    linear-gradient(168deg, #1a2740 0%, #111c2f 54%, #0b1424 100%);
  background-size: 100% 1.5px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(146, 194, 255, 0.11),
    inset 0 1px 0 rgba(214, 238, 255, 0.14),
    0 38px 70px -34px rgba(2, 8, 20, 0.92),
    0 10px 26px -18px rgba(2, 8, 20, 0.8);

  /* one restrained turn, enough to be an object in space and not enough
     to skew the type on the dividers */
  --fo-tilt: perspective(2000px) rotateY(2.6deg) rotate(-0.35deg);
  transform: var(--fo-tilt);
  transform-origin: 78% 60%;
}

/* ---- THE SHEETS FILED BEHIND IT ----------------------------------
   Three clean offsets stepping down and right, so the organizer holds
   more than the page you are looking at. Straight, not fanned: a fan
   is the scrapbook move. */
.fr-page .fr-hero .fr-folio-leaf {
  position: absolute;
  left: 10px; right: 10px;
  top: 18px; bottom: 0;
  z-index: -1;
  border-radius: calc(var(--fo-r) - 3px);
  background-image: linear-gradient(168deg, var(--fo-leaf), var(--fo-leaf2));
  box-shadow: 0 10px 22px -16px rgba(2, 8, 20, 0.9);
}
.fr-page .fr-hero .fr-folio-leaf--1 { transform: translate(5px, 7px);  opacity: 0.5; }
.fr-page .fr-hero .fr-folio-leaf--2 { transform: translate(10px, 13px); opacity: 0.3; }
.fr-page .fr-hero .fr-folio-leaf--3 { transform: translate(15px, 19px); opacity: 0.16; }

.fr-page .fr-hero .fr-folio-body {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   THE CUE
   Centred over the rail and aligned to the organizer, because it
   belongs to the organizer. Previously it was absolutely positioned
   off the folio's left edge, which put it across Steven's jaw.
   ============================================================ */
.fr-page .fr-hero .fr-folio-cue {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  padding: 5px 15px 5px 5px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  color: #e4f7ae;
  background-image: linear-gradient(90deg,
    rgba(175, 221, 44, 0.22), rgba(175, 221, 44, 0.06));
  box-shadow: inset 0 0 0 1.5px rgba(175, 221, 44, 0.46);
}
.fr-page .fr-hero .fr-folio-cue-hand {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 27px; height: 27px;
  border-radius: 50%;
  background-image: linear-gradient(145deg, #e2fb86, #aedb2f);
  color: #16290a;
}
.fr-page .fr-hero .fr-folio-cue-hand .fr-ico {
  width: 15px; height: 15px;
  stroke-width: 2.2;
}
/* breathes until a divider has been opened, then stops for good */
.fr-page .fr-hero .fr-folio-cue-hand::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(175, 221, 44, 0.58);
  animation: frTapPulse 1.9s var(--fr-ease-soft, ease-out) 3 both;
}
.fr-page .fr-hero .fr-folio.is-explored .fr-folio-cue-hand::after {
  animation: none;
  opacity: 0;
}
@keyframes frTapPulse {
  0%   { transform: scale(0.84); opacity: 0.95; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
/* one label for fingers, one for a cursor */
.fr-page .fr-hero .fr-cue-point { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fr-page .fr-hero .fr-cue-touch { display: none; }
  .fr-page .fr-hero .fr-cue-point { display: inline; }
}

/* ============================================================
   THE RAIL — ONE ROW OF PHYSICAL DIVIDERS
   ============================================================ */
.fr-page .fr-hero .fr-folio-tabs {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: var(--fo-rail);
  /* FLUSH, NOT OVERLAPPED. The reference never overlaps the rail onto the
     paper: every divider's bottom edge lands exactly on the sheet's top
     edge, the bottom corners are square, and the seam is made INVISIBLE
     rather than hidden under something. */
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fr-page .fr-hero .fr-folio-tab {
  /* the dividers share the rail in proportion to their own labels, so
     "Cash flow" is not clipped to "Cash fl..." while "Debt" sits in space */
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--fo-tab);
  margin: 0 0 0;
  padding: 6px 5px 8px;
  border: 0;
  border-radius: 10px 10px 0 0;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.004em;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  color: #c3d6ee;

  /* CLOSED: recessed, cool, sitting behind the open one. The tone is
     present but held down, so the row reads as six coloured dividers
     rather than six identical chips. */
  background-image:
    linear-gradient(180deg, rgba(var(--tn-rgb), 0.3), rgba(var(--tn-rgb), 0.1)),
    linear-gradient(180deg, #1b2a44 0%, #14213a 100%);
  box-shadow:
    inset 0 1px 0 rgba(214, 238, 255, 0.14),
    inset 0 0 0 1px rgba(var(--tn-rgb), 0.2);
  transition:
    min-height 0.3s var(--fr-ease), padding 0.3s var(--fr-ease),
    background-image 0.3s var(--fr-ease), box-shadow 0.3s var(--fr-ease),
    color 0.3s var(--fr-ease);
}
.fr-page .fr-hero .fr-folio-tab .fr-ico {
  width: 14px; height: 14px;
  stroke-width: 2;
  opacity: 0.85;
}
.fr-page .fr-hero .fr-folio-tab > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-page .fr-hero .fr-folio-tab:hover[aria-selected="false"] {
  color: #eaf4ff;
  background-image:
    linear-gradient(180deg, rgba(var(--tn-rgb), 0.44), rgba(var(--tn-rgb), 0.16)),
    linear-gradient(180deg, #1f3050 0%, #16243f 100%);
}
.fr-page .fr-hero .fr-folio-tab:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  z-index: 5;
}

/* OPEN: taller by 6px, saturated, lit from above, and with its bottom
   edge carried into the sheet so the two are one piece of card. */
.fr-page .fr-hero .fr-folio-tab[aria-selected="true"] {
  z-index: 4;
  min-height: var(--fo-tab-open);
  padding-top: 9px;
  padding-bottom: 13px;
  color: #06111f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 62%),
    linear-gradient(165deg, rgb(var(--tn-rgb)), rgba(var(--tn-rgb), 0.74));
  box-shadow:
    0 -9px 22px -11px rgba(var(--tn-rgb), 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.fr-page .fr-hero .fr-folio-tab[aria-selected="true"] .fr-ico { opacity: 1; }

/* the six divider tones */
.fr-page .fr-hero [data-tone="cyan"]   { --tn-rgb: 2, 193, 255; }
.fr-page .fr-hero [data-tone="royal"]  { --tn-rgb: 70, 108, 226; }
.fr-page .fr-hero [data-tone="indigo"] { --tn-rgb: 111, 126, 224; }
.fr-page .fr-hero [data-tone="teal"]   { --tn-rgb: 68, 181, 156; }
.fr-page .fr-hero [data-tone="green"]  { --tn-rgb: 87, 171, 40; }
.fr-page .fr-hero [data-tone="lime"]   { --tn-rgb: 175, 221, 44; }

/* the open divider's tone, handed to the whole folio for the sheet edge */
.fr-page .fr-hero .fr-folio[data-active="cyan"]   { --act: 2, 193, 255; }
.fr-page .fr-hero .fr-folio[data-active="royal"]  { --act: 70, 108, 226; }
.fr-page .fr-hero .fr-folio[data-active="indigo"] { --act: 111, 126, 224; }
.fr-page .fr-hero .fr-folio[data-active="teal"]   { --act: 68, 181, 156; }
.fr-page .fr-hero .fr-folio[data-active="green"]  { --act: 87, 171, 40; }
.fr-page .fr-hero .fr-folio[data-active="lime"]   { --act: 175, 221, 44; }

/* ============================================================
   THE SHEET, AND THE FIXED PAGE
   The organizer is a physical object, so it cannot resize when you
   open a different divider. Toggling `hidden` took a panel out of
   flow and the folio followed it: 162px of jump between Bills and
   Credit at 390px. Once the driver is running every panel is placed
   in the SAME grid cell, so the cell is always as tall as the
   tallest panel and nothing moves; switching is visibility, not
   layout. No measuring, nothing to recompute on font load or resize.
   Without JS the markup's own `hidden` still shows one panel.
   ============================================================ */
.fr-page .fr-hero .fr-folio-page {
  position: relative;
  z-index: 1;
  padding: var(--fo-sheet-pad);
  border-radius: var(--fo-sheet-rt) var(--fo-sheet-rt) var(--fo-sheet-r) var(--fo-sheet-r);
  background-image:
    /* THE JOIN. The open divider's colour continues as a solid bar the full
       width of the paper, so the tab reads as the visible edge of a coloured
       sheet whose body is the page. Nearly square top corners keep the bar
       from being rounded off before it reaches them. */
    linear-gradient(90deg, rgba(var(--act), 0.95), rgba(var(--act), 0.95)),
    /* and the colour bleeds down out of the join instead of stopping dead */
    linear-gradient(180deg, rgba(var(--act), 0.13) 0%, rgba(var(--act), 0) 32%),
    /* the light falling from the upper left across crisp stock */
    radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(163deg, var(--fo-p1) 0%, var(--fo-p2) 62%, var(--fo-p3) 100%);
  background-size: 100% 3.5px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(15, 26, 43, 0.07),
    0 2px 0 rgba(255, 255, 255, 0.5),
    0 16px 28px -20px rgba(2, 8, 20, 0.6);
  /* the divider moves first and the paper catches up 50ms later, so the
     tab reads as having moved the sheet rather than both changing at once */
  transition: background-image 0.35s var(--fr-ease) 0.05s;
}

/* the stacked page: every panel in one cell */
.fr-page .fr-hero .fr-folio-page.is-stacked { display: grid; }
.fr-page .fr-hero .fr-folio-page.is-stacked .fr-folio-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.26s var(--fr-ease), transform 0.3s var(--fr-ease),
    visibility 0s linear 0.26s;
}
.fr-page .fr-hero .fr-folio-page.is-stacked .fr-folio-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.26s var(--fr-ease) 0.02s,
    transform 0.34s var(--fr-ease) 0.02s, visibility 0s;
}
/* FR panels carry their own display value, so the UA `[hidden]` rule does
   not win on its own the way it does on the reference. Without JS this is
   what keeps five of the six panels off the sheet. */
.fr-page .fr-hero .fr-folio-panel[hidden] { display: none; }
.fr-page .fr-hero .fr-folio-panel:focus-visible {
  outline: 2px solid rgba(2, 193, 255, 0.9);
  outline-offset: 3px;
}

/* the disclaimer is a micro-label on the stock, never a banner */
.fr-page .fr-hero .fr-folio-stamp {
  position: absolute;
  top: 13px; right: 15px;
  z-index: 2;
  margin: 0;
  font-family: var(--font);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(15, 26, 43, 0.3);
}

/* ---- PRINTED ON THE SHEET ---------------------------------------- */
.fr-page .fr-hero .fr-folio-ptitle {
  margin: 0 0 3px;
  padding-right: 92px;          /* clear of the micro-label */
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(var(--act), 1);
  filter: saturate(1.25) brightness(0.62);
}
.fr-page .fr-hero .fr-folio-ptitle span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fo-t1);
  filter: none;
}
.fr-page .fr-hero .fr-folio-intro {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--fo-rule);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1.5;
  color: var(--fo-t2);
  text-wrap: pretty;
}
.fr-page .fr-hero .fr-folio-rows {
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.fr-page .fr-hero .fr-folio-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0 5px 9px;
  border-top: 1px solid var(--fo-rule2);
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.fr-page .fr-hero .fr-folio-row:first-child { border-top: 0; }
/* the accent tick that files a row under one of the four pillars */
.fr-page .fr-hero .fr-folio-row[data-acc]::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 13px;
  margin-top: -6.5px;
  border-radius: 2px;
  background: rgb(var(--acc-rgb, 2, 193, 255));
}
.fr-page .fr-hero .fr-folio-row[data-acc="bills"]    { --acc-rgb: 70, 108, 226; }
.fr-page .fr-hero .fr-folio-row[data-acc="moves"]    { --acc-rgb: 2, 193, 255; }
.fr-page .fr-hero .fr-folio-row[data-acc="protects"] { --acc-rgb: 68, 181, 156; }
.fr-page .fr-hero .fr-folio-row[data-acc="grows"]    { --acc-rgb: 125, 168, 24; }
.fr-page .fr-hero .fr-folio-rk {
  min-width: 0;
  font-weight: 500;
  color: var(--fo-t1);
}
/* INLINE, NOT STACKED. A due date set on its own line made every Bills row
   two lines tall and the pinned object 150px taller than it had any need to
   be. Set beside the name after a thin separator it reads the same and costs
   nothing. */
.fr-page .fr-hero .fr-folio-rk i {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(15, 26, 43, 0.36);
}
.fr-page .fr-hero .fr-folio-rk i::before {
  content: '';
  display: inline-block;
  width: 1px; height: 8px;
  margin: 0 6px -1px 7px;
  background: rgba(15, 26, 43, 0.18);
}
.fr-page .fr-hero .fr-folio-rv {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fo-t1);
}
/* the month's anchor figure */
.fr-page .fr-hero .fr-folio-row--sum {
  margin-top: 2px;
  border-top: 1.5px solid rgba(15, 26, 43, 0.18);
}
.fr-page .fr-hero .fr-folio-row--sum .fr-folio-rk { font-weight: 700; }
.fr-page .fr-hero .fr-folio-row--sum .fr-folio-rv { font-size: 0.9375rem; }

/* ---- THE RESERVE METER ---- */
.fr-page .fr-hero .fr-folio-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 12px;
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--fo-rule);
}
.fr-page .fr-hero .fr-folio-mk {
  font-family: var(--font);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fo-t2);
}
.fr-page .fr-hero .fr-folio-mv {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fo-t1);
}
.fr-page .fr-hero .fr-folio-mtrack {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(15, 26, 43, 0.1);
  overflow: hidden;
}
.fr-page .fr-hero .fr-folio-mtrack i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--fr-pct, 0) * 1%);
  border-radius: 3px;
  background-image: linear-gradient(90deg, #2bb897, #57c9a6);
}

/* ============================================================
   ARRIVAL — ONCE
   The dividers rise 3px in sequence and settle. Nothing on this
   object animates after that.
   ============================================================ */
.fr-page .fr-hero .fr-folio.revealed .fr-folio-tab {
  animation: frFolioTab 0.5s var(--fr-ease) both;
}
.fr-page .fr-hero .fr-folio.revealed .fr-folio-tab:nth-child(2) { animation-delay: 0.06s; }
.fr-page .fr-hero .fr-folio.revealed .fr-folio-tab:nth-child(3) { animation-delay: 0.12s; }
.fr-page .fr-hero .fr-folio.revealed .fr-folio-tab:nth-child(4) { animation-delay: 0.18s; }
.fr-page .fr-hero .fr-folio.revealed .fr-folio-tab:nth-child(5) { animation-delay: 0.24s; }
.fr-page .fr-hero .fr-folio.revealed .fr-folio-tab:nth-child(6) { animation-delay: 0.30s; }
@keyframes frFolioTab {
  from { transform: translateY(3px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* the page turning when a divider is opened */
.fr-page .fr-hero .fr-folio-panel.is-turning .fr-folio-rows,
.fr-page .fr-hero .fr-folio-panel.is-turning .fr-folio-meter {
  animation: frFolioTurn 0.42s var(--fr-ease) both;
}
@keyframes frFolioTurn {
  from { transform: translateY(5px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ============================================================
   DESKTOP PLACEMENT
   The object was too dominant and sat across Steven. It is smaller,
   lower and further right, and the cue now travels with it instead
   of floating off its left edge into his jaw.
   ============================================================ */
@media (min-width: 981px) {
  .fr-page .fr-hero .fr-folio {
    /* OUT OF HIS FACE. The object is bottom-anchored, so its height is what
       decides how far up it reaches: pinning the page to the tallest panel
       pushed its top edge to y=283 at 1440, across his eyes and jaw. It is
       now tighter on every axis and pushed right, off his head and torso and
       onto the desk, which is where the brief puts it. */
    margin-left: 0;
    margin-right: clamp(-64px, -4.2vw, -26px);
    /* it sits ON the desk: there is no reason to float it above the
       section's floor when every pixel of height costs clearance at his jaw */
    margin-bottom: clamp(6px, 1vh, 14px);
    --fo-pad: 11px;
    --fo-sheet-pad: 14px;
    --fo-tab: 35px;
    --fo-tab-open: 41px;
  }
  /* the cue is part of the object, so it stays inside the shell — but it is
     the top edge of the whole thing, so it is the piece that has to be small */
  .fr-page .fr-hero .fr-folio-cue {
    margin-bottom: 7px;
    padding: 3px 12px 3px 3px;
    font-size: 0.65625rem;
  }
  .fr-page .fr-hero .fr-folio-cue-hand { width: 22px; height: 22px; }
  .fr-page .fr-hero .fr-folio-cue-hand .fr-ico { width: 13px; height: 13px; }
  .fr-page .fr-hero .fr-folio-ptitle { font-size: 0.5625rem; }
  .fr-page .fr-hero .fr-folio-ptitle span { font-size: 1.0625rem; margin-top: 2px; }
  .fr-page .fr-hero .fr-folio-intro {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 0.6875rem;
    line-height: 1.4;
  }
  .fr-page .fr-hero .fr-folio-rows { margin-top: 6px; }
  .fr-page .fr-hero .fr-folio-row { padding: 4px 0 4px 9px; font-size: 0.75rem; }
  .fr-page .fr-hero .fr-folio-row--sum .fr-folio-rv { font-size: 0.875rem; }
  .fr-page .fr-hero .fr-folio-meter { margin-top: 10px; padding-top: 9px; }
}
@media (hover: hover) and (min-width: 981px) {
  .fr-page .fr-hero .fr-folio {
    transition: transform 0.6s var(--fr-ease-soft, ease-out),
      box-shadow 0.6s var(--fr-ease-soft, ease-out);
  }
  .fr-page .fr-hero .fr-folio:hover {
    transform: perspective(2000px) rotateY(1.4deg) rotate(-0.2deg) translateY(-3px);
    box-shadow:
      inset 0 0 0 1px rgba(146, 194, 255, 0.16),
      inset 0 1px 0 rgba(214, 238, 255, 0.2),
      0 46px 82px -34px rgba(2, 8, 20, 0.95),
      0 12px 30px -18px rgba(2, 8, 20, 0.85);
  }
}
/* ============================================================
   HERO MICRO-POLISH
   Not a rebuild. The size lock, the rail construction, the sheet
   and the placement are all untouched; all six tab states keep an
   identical height.
   ============================================================ */

/* ---- A. THE ACTIVE TAB ANNOUNCES ITSELF, ONCE ----
   One light runs across the selected divider when it is selected
   and then stops. The raised, saturated state that follows is
   carried by the tab's own rules, not by the animation, so the tab
   still reads as open after the light has gone — and with motion
   disabled it is simply open from the start. The rule keys off
   [aria-selected], so the animation restarts on each new
   selection without any JS. */
.fr-page .fr-hero .fr-folio-tab { overflow: hidden; }
.fr-page .fr-hero .fr-folio-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 62%);
  animation: frTabLight 0.72s var(--fr-ease-soft) 1 both;
}

@media (min-width: 981px) {
  /* ---- B. THE CUE READS AS AN INSTRUCTION, NOT A WATERMARK ----
     Darker backing, stronger type, and one light around its edge so
     it is legible as a control. It is already centred on the rail
     from the rebuild, so nothing moves. */
  .fr-page .fr-hero .fr-folio-cue {
    position: relative;
    overflow: hidden;
    color: #eaffc2;
    background-image:
      linear-gradient(90deg, rgba(175, 221, 44, 0.16), rgba(175, 221, 44, 0.05)),
      linear-gradient(180deg, rgba(8, 15, 28, 0.92), rgba(6, 12, 24, 0.92));
    box-shadow:
      inset 0 0 0 1.5px rgba(175, 221, 44, 0.5),
      inset 0 1px 0 rgba(226, 255, 170, 0.14),
      0 8px 18px -12px rgba(2, 8, 20, 0.95);
  }
  .fr-page .fr-hero .fr-folio.revealed .fr-folio-cue::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(100deg,
      rgba(226, 251, 134, 0) 38%,
      rgba(226, 251, 134, 0.3) 50%,
      rgba(226, 251, 134, 0) 62%);
    animation: frTabLight 1.1s var(--fr-ease-soft) 0.8s 1 both;
  }

  /* ---- C. MORE DIMENSION, SAME SIZE ----
     The leaves are absolutely positioned at z-index -1, so making
     them read more strongly cannot affect the organizer's height —
     which the six-state size lock depends on. */
  .fr-page .fr-hero .fr-folio-leaf--1 { transform: translate(6px, 8px);  opacity: 0.62; }
  .fr-page .fr-hero .fr-folio-leaf--2 { transform: translate(12px, 15px); opacity: 0.4; }
  .fr-page .fr-hero .fr-folio-leaf--3 { transform: translate(18px, 22px); opacity: 0.22; }
  .fr-page .fr-hero .fr-folio {
    box-shadow:
      inset 0 0 0 1px rgba(146, 194, 255, 0.13),
      inset 0 1px 0 rgba(214, 238, 255, 0.16),
      /* the stock's own thickness down the open edge */
      inset -2px 0 0 rgba(2, 8, 20, 0.5),
      0 46px 84px -36px rgba(2, 8, 20, 0.95),
      0 12px 30px -18px rgba(2, 8, 20, 0.85);
  }
}
/* FR-FOLIO-BLOCK:END */

/* =========================================================
   1 · SOUND FAMILIAR — FOUR PROBLEM SLIPS, EACH WITH THE
       MISSING PIECE DRAWN OUT FROM UNDERNEATH IT
   ---------------------------------------------------------
   WHAT WAS DELETED THIS PASS, AND WHY

   The previous file drew ONE rounded rectangle per situation with a
   second rounded rectangle inlaid across its foot. Rendered at 1440 the
   four feet abutted into a continuous four-colour strip across the whole
   shell — the status-bar tell the file's own comments had already warned
   about and failed to escape by removing the tint. On a phone the same
   object stacked into four near-identical dark blue cards. Two zones
   inside one box is not a contrast; it is a card with a footer.

   Deleted outright, not overridden: the single-box insert, the inlaid
   foot band and its full-bleed negative margins, the four page-margin
   tokens it needed to stay aligned, the zone-A shade written on the
   article, the height floor on the article, the 1180 two-row fold, the
   keyframes frDxSet and frDxAnswer, and every rule that referenced any
   of them. Nothing below is a patch on any of it.

   WHAT THE SECTION IS NOW

   Two PHYSICALLY SEPARATE sheets per situation, which is the contrast
   made out of material rather than out of a divider line:

     THE SLIP — the problem.  A printed planner slip lying in shade,
       light falling off toward its head, carrying the sentence in the
       serif and nothing else. It is the sheet on top.
     THE INSERT — what is missing.  A second, lighter sheet whose head
       is TUCKED UNDER the slip's foot and whose bound edge is PULLED
       OUT past the slip's left side, carrying its accent index edge,
       its icon, WHAT'S MISSING and the answer in white. It is the sheet
       underneath, drawn out far enough to read.

   So the silhouette of every situation is stepped, never rectangular:
   the slip's shadow falls across the insert, the insert's bound edge
   stands out beyond the slip, and the two overlap the way two documents
   on a desk overlap. A visitor who reads nothing sees a sheet with
   something pulled out from under it, four times, in four colours.

   BOX AUDIT. Two rectangles per situation, both real objects and both
   named above, and they are never concentric — one lies on the other.
   Nothing else in the section is a box: the divider tab is a tab, the
   index edge is an edge, the light under the insert is light, and the
   sentence, the label and the answer are type on paper.

   ONE STRUCTURE, FOUR ACCENTS. Every rule is written once and reads
   --acc-rgb from the data-accent already in the markup. The colour
   appears on the divider tab (now a genuinely tinted index tab, so the
   four read apart at a glance), on the insert's 3px bound edge, on the
   icon, on the label, and in the light pooled under the insert's bound
   corner. Never as a fill across a face.

   DEPTH IS THE SHARED LADDER. --fr-d2 for a sheet at rest, --fr-d3 for
   the insert once the section is reached, --fr-d4 plus --fr-raise-1 on
   hover. The only literal shadows are zero-blur paper layers: the next
   sheet showing past a slip's shoulder, and a tab's 2px stock thickness.
   ========================================================= */


/* ---- THE FIGURES THE OBJECT NEEDS ---------------------------------
   Not a scale and not a colour. How tall the divider tab is, how far
   consecutive slips lap, how far the insert's head tucks under the
   slip's foot, and how far its bound edge is pulled out past the slip's
   left. Everything else — rhythm, measure, type, ink, paper, edge,
   elevation, easing — comes from the contract in 00-foundation. */
.fr-page .fr-sec--problem {
  --fr-dx-tab: 22px;
  --fr-dx-lap: clamp(10px, 1.2vw, 18px);
  --fr-dx-tuck: clamp(13px, 1.3vw, 17px);
  --fr-dx-jut: clamp(10px, 1vw, 14px);
  --fr-dx-cut: clamp(14px, 1.6vw, 23px);
  --fr-dx-px: clamp(21px, 2.3vw, 30px);
  --fr-dx-py: clamp(20px, 2vw, 27px);
}


/* ---- THE STATEMENT, SET AS AN OPENER -------------------------------
   The headline used to hold a 20ch column on the left of a 1208px shell
   with nothing at all to its right, so the section opened on a third of
   a page of air. Headline and lede now share one row and bottom out
   together: statement left, the line that reframes it right. No size is
   set here — the headline keeps --fr-h2 like every standard section. */
@media (min-width: 761px) {
  .fr-page .fr-sec--problem .fr-intro--wide {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: end;
  }
  .fr-page .fr-sec--problem .fr-intro--wide .fr-eyebrow {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .fr-page .fr-sec--problem .fr-intro--wide .fr-h2 {
    grid-column: 1;
    margin: 0;
  }
  .fr-page .fr-sec--problem .fr-intro--wide .fr-body {
    grid-column: 2;
    max-width: 42ch;
    margin: 0 0 0.45em;
  }
}


/* ---- THE SET -------------------------------------------------------
   Four slips dealt across the desk, each laid a little over the one
   before it. Flex rather than grid so flex: 1 1 0 divides the space left
   AFTER the lap and all four come out the same width. align-items:
   flex-start is what lets each situation sit at its own height — the
   deal is the rhythm, and a stretched row would flatten it back into
   four equal columns. */
.fr-page .fr-diagnosis {
  display: flex;
  align-items: flex-start;
  padding-left: var(--fr-dx-jut);
  counter-reset: fr-dx-n;
}
.fr-page .fr-diagnosis .fr-dx + .fr-dx { margin-left: calc(-1 * var(--fr-dx-lap)); }


/* ---- THE SITUATION — A CARRIER, NOT A PANEL ------------------------
   The article paints nothing. It holds two sheets, the angle they rest
   at, and the stacking context that keeps the slip above its insert. If
   this element had a background the whole composition would collapse
   back into the box-with-a-footer it replaced. */
.fr-page .fr-diagnosis .fr-dx {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  counter-increment: fr-dx-n;
  padding-top: var(--fr-dx-tab);
  transform: rotate(var(--fr-rot, 0deg));
  transform-origin: 22% 0;
  transition: transform 0.45s var(--fr-ease);
}


/* ---- THE DIVIDER TAB -----------------------------------------------
   A real coloured index tab standing above the slip's bound shoulder:
   accent across its top cut, accent tint through its stock, accent in
   the index number. The four tabs are the fastest read in the section —
   four dividers, four colours, one organizer — and they are the reason
   the pages themselves need no colour at all.

   The tint is kept low because lime over this blue stock goes olive
   about twice as fast as cyan does; at 0.14 the four stay recognisably
   their own colours and none of them reads as a filled chip. */
.fr-page .fr-diagnosis .fr-dx::before {
  content: counter(fr-dx-n, decimal-leading-zero);
  position: absolute;
  left: var(--fr-dx-tabx, 0);
  top: 0;
  height: var(--fr-dx-tab);
  display: flex;
  align-items: center;
  padding: 0 12px 1px 12px;
  border-radius: 2px 5px 0 0;
  background-image:
    linear-gradient(180deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.92) 0 3px,
      rgba(3, 10, 22, 0.45) 3px 4px,
      rgba(255, 255, 255, 0) 4px),
    linear-gradient(168deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.14) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.05) 100%),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  box-shadow:
    0 2px 0 -1px rgba(5, 12, 26, 0.92),
    var(--fr-d2);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.92);
  text-shadow: 0 1px 0 rgba(4, 10, 22, 0.55);
}


/* ---- THE SLIP · THE PROBLEM ----------------------------------------
   One sheet of stock with one sentence printed on it. Three things make
   it the UNLIT half of the contrast without tinting it a different
   colour: the shade poured from its head and gone by its foot, ink a
   step back off white, and no object of its own anywhere on it. The two
   zero-blur layers are the next sheet of the set showing past its
   shoulder — material, not elevation — and the 1px lit line along the
   bottom is the cut edge of the stock where the insert goes under it,
   which is the seam that tells you there are two sheets and not one. */
.fr-page .fr-dx-symptom {
  position: relative;
  z-index: 2;
  margin: 0;
  min-height: clamp(146px, 11.4vw, 176px);
  padding: var(--fr-dx-py) var(--fr-dx-px);
  border-radius: 2px 4px 4px 2px;
  background-image:
    linear-gradient(0deg, rgba(255, 255, 255, 0.075) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(180deg,
      rgba(4, 10, 22, 0.54) 0%,
      rgba(4, 10, 22, 0.26) 46%,
      rgba(4, 10, 22, 0) 86%),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  box-shadow:
    7px -7px 0 -3px var(--fr-paper),
    7px -7px 0 -2px var(--fr-edge),
    var(--fr-d2);
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: rgba(221, 234, 252, 0.84);
  text-shadow: 0 1px 0 rgba(3, 9, 20, 0.45);
  text-wrap: pretty;
  transition: box-shadow 0.45s var(--fr-ease);
}


/* ---- THE INSERT · WHAT IS MISSING ----------------------------------
   The second sheet. Its head is tucked under the slip by --fr-dx-tuck,
   so the slip's cast shadow falls across it and it can only have come
   from underneath; its bound edge is pulled out past the slip's left by
   --fr-dx-jut, so the accent index edge stands in the open where it
   reads first. It is a step lighter stock than the slip — the same
   two-stop paper, reversed, under a thin white film — and carries no
   tinted fill, because four tinted feet in a row is what turned the
   previous version into a status strip.

   The top padding carries the tuck so the type still sets clear of the
   slip above it, and the left padding carries the jut so WHAT'S MISSING
   sets inside the sheet rather than under its own bound edge. */
.fr-page .fr-dx-missing {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  margin: calc(-1 * var(--fr-dx-tuck)) var(--fr-dx-cut) 0 calc(-1 * var(--fr-dx-jut));
  padding:
    calc(var(--fr-dx-tuck) + clamp(14px, 1.4vw, 19px))
    clamp(18px, 1.9vw, 24px)
    clamp(14px, 1.4vw, 19px)
    calc(var(--fr-dx-jut) + clamp(18px, 1.9vw, 24px));
  border-radius: 1px 4px 4px 1px;
  background-image:
    /* 1 · THE LIT CUT EDGE OF THE EXPOSED HEAD. Painted across the jut
       only -- the one strip of this sheet that is NOT under the slip --
       so the part standing in the open reads as cut stock catching the
       room light. */
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 1px, rgba(255, 255, 255, 0) 1px),
    /* 2 · THE SLIP'S SHADOW, LYING ON THIS SHEET. As deep as the tuck,
       and it starts exactly where the slip's left edge is, so the hard
       vertical boundary is the shadow's own edge. It is the single layer
       that makes the insert come from UNDER rather than read as the
       lower half of one card. */
    linear-gradient(180deg,
      rgba(2, 7, 17, 0.6) 0%,
      rgba(2, 7, 17, 0.22) calc(var(--fr-dx-tuck) * 0.72),
      rgba(2, 7, 17, 0) calc(var(--fr-dx-tuck) + 9px)),
    /* 3 · the white film that lifts this stock a clear step above the slip */
    linear-gradient(180deg, rgba(255, 255, 255, 0.115) 0%, rgba(255, 255, 255, 0.03) 100%),
    /* 4 · the stock */
    linear-gradient(168deg, var(--fr-paper-2) 0%, var(--fr-paper) 100%);
  background-position: 0 0, var(--fr-dx-jut) 0, 0 0, 0 0;
  background-size:
    var(--fr-dx-jut) 100%,
    calc(100% - var(--fr-dx-jut)) 100%,
    100% 100%,
    100% 100%;
  background-repeat: no-repeat;
  box-shadow: var(--fr-d2);
  transform: rotate(var(--fr-ins, 0deg));
  transform-origin: 0 0;
  transition: box-shadow 0.55s var(--fr-ease);
}
/* THE ACTIVATION — one step up the shared ladder once the section is
   reached. The answer comes forward out of the problem; that step is the
   whole section in one property. */
.fr-page .fr-diagnosis .fr-dx.revealed .fr-dx-missing { box-shadow: var(--fr-d3); }

/* the accent light pooled under the bound corner. Negative z-index
   inside the insert's own stacking context paints it over the stock and
   under the type, so it is light on a surface, never a second surface. */
.fr-page .fr-dx-missing::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(74% 150% at 8% 120%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.24) 0%, transparent 70%);
}

/* the bound edge, inlaid. Three insets and no halo: the room light on
   the top of the cut edge, the bottom of it falling into shade, and the
   stock's own dark where the colour meets the paper. A colour-coded
   index edge is the document tell; a glowing bar is the software one. */
.fr-page .fr-dx-missing::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 1px 0 0 1px;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.95) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.55) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(3, 10, 22, 0.3),
    inset -1px 0 0 rgba(3, 10, 22, 0.42);
}

/* the icon, the label and the answer. The label is the only coloured
   type in the section and the answer is the only white: that pairing is
   what makes the insert the forward sheet at a glance, on a phone, with
   the page still. */
.fr-page .fr-dx-missing .fr-ico {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.95);
}
.fr-page .fr-dx-text {
  display: block;
  min-width: 0;
  font: var(--fr-small) var(--font);
  line-height: 1.55;
  font-weight: 700;
  color: var(--fr-ink);
  text-wrap: pretty;
}
.fr-page .fr-dx-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.92);
}


/* ---- MOTION --------------------------------------------------------
   Two mechanisms, each one the thing the object itself would do, and
   both written as from-frames only — so the resting state is whatever
   the rules above draw, the set is complete the instant they end, and a
   browser where the scroll hook never runs shows the finished section.

     frDxLay   the slip arrives flat and settles into its rest angle —
               a sheet being laid onto the set
     frDxDraw  the insert slides DOWN AND OUT from under the slip it was
               hidden beneath — the missing piece being drawn out

   frDxDraw is the section's argument in one move: the answer was always
   underneath the problem, and someone had to pull it out. It travels
   11px, it settles, and it never repeats. The insert's step from --fr-d2
   to --fr-d3 is not a keyframe at all but a transition between two rungs
   of the shared ladder, fired by the same revealed class the rest of the
   page uses. Nothing pulses, loops, spins, scans or glows. */
@keyframes frDxLay {
  from { opacity: 0; transform: translate3d(0, 15px, 0) rotate(0deg); }
}
@keyframes frDxDraw {
  from { opacity: 0; transform: translate3d(0, -11px, 0) rotate(0deg); }
}
.fr-page .fr-diagnosis .fr-dx.revealed {
  animation: frDxLay 0.8s var(--fr-ease) var(--fr-dly, 0s) backwards;
}
.fr-page .fr-diagnosis .fr-dx.revealed .fr-dx-missing {
  animation: frDxDraw 0.95s var(--fr-ease) calc(var(--fr-dly, 0s) + 0.3s) backwards;
}


/* the deal: rest angle of each sheet, the angle of the insert under it,
   how far down the desk it was dealt, which sheet lies over which, and
   when it lands. Ascending z-index is what lets each insert's bound edge
   lie ON the slip to its left rather than under it. */
.fr-page .fr-diagnosis .fr-dx:nth-child(1) { --fr-rot: -0.9deg; --fr-ins: 0.5deg;   --fr-dly: 0s;    margin-top: 0;    z-index: 1; }
.fr-page .fr-diagnosis .fr-dx:nth-child(2) { --fr-rot: 0.7deg;  --fr-ins: -0.45deg; --fr-dly: 0.09s; margin-top: 36px; z-index: 2; }
.fr-page .fr-diagnosis .fr-dx:nth-child(3) { --fr-rot: -0.5deg; --fr-ins: 0.4deg;   --fr-dly: 0.18s; margin-top: 13px; z-index: 3; }
.fr-page .fr-diagnosis .fr-dx:nth-child(4) { --fr-rot: 1deg;    --fr-ins: -0.55deg; --fr-dly: 0.27s; margin-top: 49px; z-index: 4; }

.fr-page .fr-diagnosis .fr-dx:hover {
  z-index: 6;
  transform: rotate(var(--fr-rot, 0deg)) var(--fr-raise-1);
}
.fr-page .fr-diagnosis .fr-dx:hover .fr-dx-symptom {
  box-shadow:
    7px -7px 0 -3px var(--fr-paper),
    7px -7px 0 -2px var(--fr-edge),
    var(--fr-d4);
}
.fr-page .fr-diagnosis .fr-dx:hover .fr-dx-missing { box-shadow: var(--fr-d4); }

/* FR-CLUSTER1-BLOCK:START */
/* Cluster 1 polish: SOUND FAMILIAR.
   Lives in this file, not in an appendix elsewhere, because the build
   concatenates the part files in order and these rules must come after
   the equal-specificity rules they replace. */
/* ------------------------------------------------------------
   1. SOUND FAMILIAR — THE INDEX MARKERS CARRY THE SEQUENCE
   01/02/03/04 were 11.5px numerals in a 22px divider tab, which
   is below the threshold where a reader registers them as an
   order at all. They are now the fastest read in the section.

   The enlargement is SAFE BY CONSTRUCTION: the tab's height and
   the slip's own `padding-top` are the same token, so growing
   --fr-dx-tab grows the space reserved for it. The numeral
   cannot move onto the copy, at any width, because the copy
   starts below that reserved band. The mobile stagger reads the
   same token, so the cascade stays in step.
   ------------------------------------------------------------ */
.fr-page .fr-diagnosis { --fr-dx-tab: 38px; }

.fr-page .fr-diagnosis .fr-dx::before {
  padding: 0 15px 2px 14px;
  border-radius: 3px 8px 0 0;
  font-size: 1.3125rem;
  font-weight: 300;
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--acc-rgb, 56, 207, 255));
  text-shadow:
    0 1px 0 rgba(4, 10, 22, 0.6),
    0 0 20px rgba(var(--acc-rgb, 56, 207, 255), 0.45);
  background-image:
    linear-gradient(180deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.95) 0 3px,
      rgba(3, 10, 22, 0.45) 3px 4px,
      rgba(255, 255, 255, 0) 4px),
    linear-gradient(168deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.2) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.06) 100%),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  box-shadow:
    0 2px 0 -1px rgba(5, 12, 26, 0.92),
    0 -6px 18px -10px rgba(var(--acc-rgb, 56, 207, 255), 0.5),
    var(--fr-d2);
}
/* the thin rule that runs out of the tab along the slip's shoulder,
   so the marker reads as an index entry and not as a badge */
.fr-page .fr-diagnosis .fr-dx::after {
  content: '';
  position: absolute;
  left: calc(var(--fr-dx-tabx, 0px) + 62px);
  right: 0;
  top: calc(var(--fr-dx-tab) - 1.5px);
  height: 1.5px;
  border-radius: 1px;
  background-image: linear-gradient(90deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.75) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0) 100%);
  transform-origin: left center;
  pointer-events: none;
}
/* TRACE, the shared primitive: the marker lights, then the rule draws */
.fr-page .fr-diagnosis .fr-dx.revealed::after {
  animation: frTraceX 0.9s var(--fr-ease) 0.3s 1 both;
}
/* FR-CLUSTER1-BLOCK:END */

/* =========================================================
   30 — "WHAT IT IS"  +  "THE COMPLETE PICTURE"
   =========================================================
   A. WHAT IT IS       THE BREATHER. No object, no panel, no plate.
                       Typography, measure and air only — and the
                       eyebrow's filled pill is gone, because a
                       rectangle round two words represents nothing.

   B. THE COMPLETE PICTURE
                       THE ASSEMBLY. The headline is "your financial
                       life doesn't move in separate pieces", so the
                       object has to SHOW separate pieces becoming one.
                       The old build drew the finished spread only: one
                       large sheet with six areas written on it, which
                       says "six categories in a box" and nothing about
                       assembly.
                       Now the object is caught mid-assembly and reads
                       left to right:
                         LEFT   three loose financial pages lying on the
                                desk, scattered, each at its own angle,
                                tabs pointing nowhere in particular.
                         RIGHT  the organizer — one cover, its lit cut
                                edge carrying the page's cyan→teal→lime
                                progression — with three pages already
                                filed in it: square, aligned, their
                                colour tabs stacked in one clean column
                                at the opening.
                       Scattered tabs on the left, one aligned column of
                       tabs on the right. That contrast is the whole
                       argument and it needs no body copy to land.

   C. THE PHONE        NOT THE DESKTOP STACKED. A phone gets a vertical
                       narrative instead: separate pages at the top
                       (daylight between them, each tilted its own way),
                       pages progressively overlapping as you scroll,
                       then the organizer cover rising behind the last
                       three, which lie flush and square inside it, and
                       the caption under the closed object.

   RECTANGLES. Desktop: 1 before (the spread) → 7 after, and every one
   of them is a physical thing — six financial pages and the organizer
   that holds them. Phone: 1 before (a list in a panel) → 7 after, same
   inventory. No rectangle in this file exists because text needed a
   container.

   DEPTH is material: page stock at one angle, a key light upper-left,
   corner occlusion where paper lies down, 2px of cut edge with a lit
   underside at each foot, tabs standing d1 proud, the organizer one
   ladder level deeper than the pages it holds. No bespoke box-shadow.

   MOTION says one thing: the loose pages travel and settle. Pages that
   belong in the organizer slide in from the pile and square up; nothing
   loops; every animation is `backwards`-filled onto the resting state,
   so reduced motion is the finished, fully assembled frame.
   ========================================================= */

/* =========================================================
   A. "WHAT IT IS" — THE SECTION THAT GETS NO OBJECT
   "It's not that you need a budget. / You need a strategy."
   The brief for this pass is explicit: quieter and more open than it
   was. So three things happen and nothing is added — the eyebrow loses
   its filled pill, the explanation loses a little measure and gains a
   line of air above it so it reads as a note set against the claim
   rather than a second column of equal weight, and the gutter opens.
   No edge, no panel, no lamp, no rule, no gradient of its own.
   ========================================================= */
.fr-page .fr-define {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: clamp(48px, 6vw, 104px);
  row-gap: clamp(30px, 3.2vw, 46px);
  align-items: start;
}
.fr-page .fr-define-head { grid-column: 1; grid-row: 1; }

/* THE MARKER, NOT A PILL. The foundation's default eyebrow is a filled
   plate with a radius; the hero, the complete picture and the
   methodology already wear the rebuilt figure — coloured type, a 3px
   lit tick, one hairline running out of it — and the foundation's own
   note says the pill survives only in sections that have not had their
   phase yet. This section is having it. Same figure, so the two
   sections in this file agree with each other and with the hero. */
.fr-page .fr-sec--define .fr-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--acc-rgb, 2, 193, 255), 0.96);
  text-shadow: 0 0 20px rgba(var(--acc-rgb, 2, 193, 255), 0.28);
}
.fr-page .fr-sec--define .fr-eyebrow::before {
  content: '';
  position: static;
  inset: auto;
  margin: 0;
  flex: none;
  width: 3px;
  height: 11px;
  border-radius: 0;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 2, 193, 255), 0.95) 0%,
    rgba(var(--acc-rgb, 2, 193, 255), 0.35) 100%);
  box-shadow: 0 0 12px -2px rgba(var(--acc-rgb, 2, 193, 255), 0.6);
}
.fr-page .fr-sec--define .fr-eyebrow::after {
  content: '';
  position: static;
  inset: auto;
  margin: 0;
  flex: none;
  width: clamp(32px, 4.6vw, 70px);
  height: 1px;
  transform-origin: left center;
  background-image: linear-gradient(90deg,
    rgba(var(--acc-rgb, 2, 193, 255), 0.85) 0%,
    rgba(var(--acc-rgb, 2, 193, 255), 0.2) 56%,
    rgba(var(--acc-rgb, 2, 193, 255), 0) 100%);
}

/* NO HEADLINE SIZE IS SET HERE. The markup carries `.fr-h2--xl`, the
   foundation deliberately gives that modifier nothing, and `.fr-h2` —
   the one standard section size — already reaches it. The two lines
   differ in COLOUR and in LIGHT, not in size: the dismissal is quieter
   ink, set back from the reader; the claim is full white with a wide,
   very faint halo so it separates from the ground the way lit paper
   does. That is the hierarchy, and it costs nothing drawn. */
.fr-page .fr-sec--define .fr-h2 .fr-line:first-child {
  color: rgba(214, 231, 252, 0.6);
}
.fr-page .fr-sec--define .fr-h2 .fr-line + .fr-line {
  text-shadow: 0 0 44px rgba(196, 228, 255, 0.13);
}
/* The explanation is a note set against the claim, not a second column
   of equal weight: it starts a line of leading below the headline's
   first baseline and keeps a 40ch measure, so the eye reads the
   headline first and comes down to the prose. The paragraph that says
   what the program IS carries the brighter ink; the one that qualifies
   it stays quiet. One reading size throughout. */
.fr-page .fr-define-body {
  grid-column: 2; grid-row: 1;
  align-self: start;
  max-width: 42ch;
  padding: clamp(22px, 5vw, 72px) 0 0;
}
.fr-page .fr-define-body .fr-body:first-child {
  font-weight: 500;
  color: rgba(234, 242, 255, 0.95);
}
.fr-page .fr-define-body .fr-body + .fr-body { margin-top: clamp(16px, 1.7vw, 22px); }

/* =========================================================
   B. "THE COMPLETE PICTURE"
   Two bands: the statement, then the assembly with its caption.
   The statement uses the whole width — the headline holds the left,
   the lead sits bottom-right against its last line. Air above a
   paragraph is composition; air beside a headline was an accident.
   ========================================================= */


/* ---- B1. THE ASSEMBLY ----------------------------------------------
   Row 1 is the object, row 2 the caption. Three columns: the loose
   pages, the organizer's cut edge, the organizer. The left column is
   the smaller of the two on purpose — the finished picture should be
   the bigger half of the composition.
   There is no perspective and no 3D. Paper lies on a desk; it does not
   hinge, tilt into the screen or float. */


/* THE ROOM THE OBJECT LIES IN. No geometry of its own: the light is
   masked to nothing on an ellipse before it reaches its own bounds, so
   there is no second edge anywhere near the paper. The contact dark
   pools under the organizer, which is the heaviest thing on the desk. */


/* ---- THE ORGANIZER -------------------------------------------------
   One cover, deeper into the ladder than the pages it holds, bigger
   than them on every side the way a cover is, and reaching left past
   its own column so the last loose page can come to rest ON it. This
   element used to be the whole spread; it is the DESTINATION now. */

/* THE ONE COLOURED EDGE IN THE OBJECT. The organizer's lit cut edge,
   carrying the page's own progression — cyan into teal into lime —
   unbroken from corner to corner. Everything that is already filed sits
   under one edge; that is what makes it one picture rather than three
   more pages. It draws once, left to right, and stays. */

/* THE FOOT: the cover's own 2px of board with the lit underside beneath
   it, then one more board showing under that, then the contact on the
   desk. Hard-edged material drawn in a background — not a second
   blurred shadow competing with the ladder. */


/* THE OPENING. What used to be a crease down the middle of one sheet is
   the organizer's own left cut edge now: three millimetres of board
   seen from slightly in front, dark with one lit shoulder, fading out
   at the head and the foot. It is the line the filed pages went in
   through, and the only thing standing between the loose half and the
   finished half. */


/* THE TWO HALVES. Neither draws anything: they place pages. The left is
   the desk, where pages lie where they were put; the right is the
   inside of the organizer, where they lie where they belong. */


/* ---- A FINANCIAL PAGE ----------------------------------------------
   One sheet of the organizer's stock: lit from the upper left, darker
   at the foot the way a real sheet under one light is, occluded at both
   bottom corners where it lies down, and carrying 2px of its own cut
   edge underneath. Six of them, and the four numbers that make no two
   alike are its WIDTH, its OFFSET across the desk, its ANGLE and how
   deep it sits in the shadow ladder. */

/* the page's own 2px of stock, with the lit underside beneath it */


/* THE LOOSE HALF. Three pages put down at three angles, drifting right
   as they get closer to the organizer, the last one already lying on
   its cover. Their tabs point three different ways — the scattered
   column of tabs is half the argument. */


/* THE FILED HALF. Three pages square to the cover, left edges on one
   line, tabs in one column at the opening, each tucked a few pixels
   under the one above it. Nothing is rotated and nothing is offset,
   which after the left half is the loudest thing in the picture. */


/* AN INDEX TAB, BONDED INTO THE PAGE'S FORE-EDGE. Cut from darker stock
   than the page, carrying 3px of coloured mylar on its outer edge and
   standing d1 proud — the only object on a page that is not ink. It
   juts past the cut edge, so the colour is the outermost thing on every
   page and the silhouette is broken where the tab is. */

/* the tab's own 3px of thickness, seen from slightly above */


/* THE WRITTEN ENTRIES. Two per page, one under the other, each a label
   with a short leader and the figure written at the end of it — which
   is what a planning page is. The leaders are faint: with no rules
   anywhere on the paper they were the next thing that could read as
   ruling. */


/* the quiet written figure the other row carries: two matte strokes, no
   track, no bevel, nothing with a LEVEL in it to read */

/* THE MARGIN NOTE each page carries under its entries: a change bar in
   that page's ink and two short written lines. Short and ragged,
   because a note written in a margin is; a long hairline is a loading
   skeleton. A pseudo on the entries' own grid, so it needs no element
   and draws no box. */


/* ---- THE SIX CUES — ONE PER PAGE, AND NO TWO ALIKE ---------------
   Six variants of one mark is one object repeated six times, and six
   progress bars is the failure the brief names. So each page gets
   exactly ONE cue, on ONE of its two rows, and the other row keeps the
   quiet written figure. Six marks, six different KINDS of mark, each
   the kind a planner would actually make for that page:
     income    an amount entered on a ruled pay line
     spending  the month split into its categories
     debt      a balance with the payoff priority marked beside it
     savings   a reserve target, still an empty ruled field
     credit    a utilization note with the payment timing ticked under it
     goals     a milestone
   None is a bar on a track; none is a copy of another. Each is drawn in
   its own page's ink, flat and matte, with no glow and no halo. */

/* INCOME — a pay entry: the amount written at the end of a ruled pay
   line, with the small stub the currency column leaves at its head. */

/* SPENDING — the month split into three categories: abutting segments of
   different widths and weights with paper showing between them, and one
   category marked above. No track behind them, so there is no remainder
   to read. */

/* DEBT — a balance with its payoff priority marked: three entries
   shortening down the list, the first inked because it is the one being
   paid first, and the priority mark set in the margin beside it. */

/* SAVINGS — the reserve target: a field ruled off and left empty,
   because a target is a figure not written yet. It is NOT an enclosed
   box — a small light rectangle with nothing in it is a text input,
   the single most software-looking mark available. A ruled field on
   paper is a baseline with a delimiter tick at each end, plus the
   accent on the bound edge and one tick where the figure will go. */

/* CREDIT — a utilization note in the margin: a change bar, two short
   lines of writing, and the payment timing ticked off under them. A
   note, not a reading. */

/* GOALS — a milestone, set at the end of the leader the way a milestone
   is set on a plan. Flat, matte, no glow and no halo. */


/* THE CAPTION. Type, not a plate: no fill, no padding, no radius,
   accent-coloured, with a lit hairline each side. It sits under the
   ORGANIZER rather than under the whole object, because it names the
   finished thing and not the desk. */


/* ONE PASS OF ROOM LIGHT, AND IT SETTLES. It begins at opacity 0 and
   ends at opacity 0, so a still screenshot can only ever catch the
   object with no band on it. Last beat of the sequence; no repeat. */


/* =========================================================
   C. THE PHONE — A DIFFERENT COMPOSITION, NOT A STACKED ONE
   The desktop object is a left-to-right transformation and a phone
   cannot carry that sideways, so the phone gets the SAME story told
   DOWNWARDS, and it is built out of the six-part panel rather than a
   squeezed copy of the desktop spread:

     top      two pages lying apart with daylight between them, each
              tilted its own way, each tab pointing somewhere different
     middle   the pages start to overlap and straighten
     bottom   the organizer cover rises behind the last three, which lie
              flush, square, full width, tabs in one column
     under it the caption, which is why the panel's own label moves from
              the head of the object to its foot: at the top it was a
              title on a box, at the foot it is the name of a finished
              thing.

   WHAT WAS HERE WAS ONE LARGE PANEL WITH SIX ROWS IN IT, which is the
   failure the brief names by name: it communicated SIX CATEGORIES and
   said nothing about them becoming one picture. The panel's stock, its
   radius, its single head edge and its row rhythm are all deleted.
   ========================================================= */


/* THE ORGANIZER, RISING BEHIND THE LOWER HALF OF THE STACK. Its top
   edge is the moment the pages stop being loose: everything above it is
   on the desk, everything below it is filed. One ladder level deeper
   than the pages, one lit cut edge along its head, bigger than them on
   both sides the way a cover is. */

/* the cover's foot: its own cut, the lit underside, one more board
   under it and the contact on the ground */

/* A PAGE. The same stock and the same light as the desktop pages, in
   portrait: the icon in that page's ink, the name, the figure written
   at the end of the name, the note under it.
   `--fr-pm` IS THIS FILE'S OWN INK, read instead of `--acc-rgb` for one
   reason: the markup's six `data-accent` values are green · cyan ·
   indigo · teal · royal · lime, which is six labels, and the colour on
   this page is a SEQUENCE. The contract reserves `--acc-rgb` for
   `[data-accent]` and this file does not assign it; it declares its own
   six steps, the same journey the desktop pages walk. */

/* THE DIVIDER TAB, on the page's left fore-edge. Scattered at the top
   of the stack, in one column at the foot — the clearest two-second
   read in the whole section. */

/* the figure written at the end of each name: one short matte stroke on
   its own baseline, a different length every time, so the six read as
   written entries rather than as a list of labels */


/* THE CAPTION AT THE FOOT. Same figure as the desktop caption, one size
   down: accent type between two hairlines, no plate. */


/* =========================================================
   MOTION — FOUR ONE-SHOTS, NO LOOP.
     frPicInk   a thing is on the page, or it is not
     frPicDraw  the organizer's lit cut edge draws across it, once
     frPicSeat  A PAGE TRAVELS AND SETTLES. It arrives from further out
                and at a greater angle than it ends at, so the loose
                pages are seen being put down and the filed pages are
                seen sliding in from the pile and squaring up. The
                implicit `to` is the element's own resting transform,
                which is why the finished picture is the resting state
                and not a frame of an animation.
     frPicLight one soft pass of room light, which settles to nothing
   Every one is `backwards`-filled onto the resting state, so there is
   no pre-arrival rule anywhere in this file.
   ========================================================= */
@keyframes frPicInk { from { opacity: 0; } }
@keyframes frPicDraw { from { opacity: 0; transform: scaleX(0); } }
@keyframes frPicSeat {
  from {
    opacity: 0;
    transform: translate3d(var(--fr-fx, -24px), var(--fr-fy, 20px), 0) rotate(var(--fr-fr, -6deg));
  }
}
@keyframes frPicLight {
  0% { opacity: 0; background-position: -60% 0; }
  22%, 70% { opacity: 1; }
  100% { opacity: 0; background-position: 150% 0; }
}

/* FR-CLUSTER2-BLOCK:START */
/* ============================================================
   COMPLETE PICTURE — THE DESKTOP REPAIR
   MEASURED FIRST. Nothing here is clipped and nothing overflows:
   at 1440 the section runs to y=3744 and the artifact finishes at
   y=3513, 231px INSIDE it, and no ancestor has a clip, a mask or a
   scrolling overflow. So this was never a clipping bug, and
   nothing needed a height, an overflow or a wrapper.

   WHAT IS ACTUALLY WRONG is occlusion on the loose half. The three
   drifting sheets step right by --fr-drift (302px at 1440) and up
   by --fr-step (-44px, -40px), and a sheet's own figures live in
   its right-hand column — so the NEXT sheet lands exactly on top of
   the figures of the one before it. Measured: Income's detail ends
   at y=3154 while Spending starts at y=3136 and covers it from
   x=344 across. Income's numbers were behind Spending. That is why
   the left half reads as cut off while the filed half reads as
   finished: the filed half tucks the same way but is square, so it
   only ever hides empty stock.

   THE FIX IS CLEARANCE, NOT A REBUILD. Each sheet now clears the
   next one's top edge, so all six are wholly legible. The drift,
   the rotations and the loose-to-filed contrast — the whole point
   of the composition — are untouched, and the extra height is paid
   for out of the 231px the section already had spare.
   ============================================================ */
@media (min-width: 901px) {
  
  
  /* the filed half tucks under itself and hides only blank stock, so
     it needs far less — just enough that its rules never touch */
  
  
}
/* FR-CLUSTER2-BLOCK:END */

/* =========================================================
   4. THE FOUR PILLARS OF MONEY™ — the signature methodology
   ---------------------------------------------------------
   ONE ORGANIZER. FOUR DIVIDER SECTIONS. FOUR DIFFERENT SHEETS.

   WHAT THIS PASS DELETED. The rail. The previous build ran a 2px
   hairline down the left with four numbered discs threaded on it and
   the four figures floating unsupported in the right column. It was
   clean, and it was a timeline — a rail with chart fragments beside
   it — and a rail is the one structure the brief rules out. The
   discs are gone (.fr-pillar-num > b is no longer a circle), the
   centred hairline is gone, the ground-coloured halo that punched
   the station label through it is gone, and the four unsupported
   figures are gone. The frPilSeat keyframe that seated the discs is
   deleted with them.

   WHAT REPLACED IT, and it is ONE object rather than four.
     THE BOARD. The bound edge of a physical organizer runs the full
     height of the block at the left: page stock, a lit cut edge, the
     binding gutter darkening on its inner side, and a 3px index edge
     whose colour walks cyan -> indigo -> teal -> lime down its
     length. Closed, that index edge is the only thing you would see,
     and it is what carries "one system, four jobs".
     THE DIVIDER TABS. .fr-pillar-num is now a raised tab of the same
     page stock, square where it is bound into the board and cut at
     the outer shoulder, with its accent on the bound side. Same
     material as the eyebrow marker in 00-foundation, one size up.
     THE SHEETS. Each figure is now PRINTED ON A PAGE filed behind
     its tab — paper stock, 168deg so the light runs the same way as
     on every other page in the portfolio, --fr-d2, and a second
     sheet peeking out below and to the right so the chapter reads as
     a folder with more in it. The page is bound at the left: its
     left edge runs under the board and the board paints over it.
     Nothing but the printed figure is ever inside a sheet. No
     headline, no statement, no paragraph. Those stay on the ground.

   AND THE FOUR SHEETS ARE FOUR DIFFERENT SHEETS. Same three rows of
   markup, four unrelated behaviours:
     01 MOVES    take-home runs the full width, then the same length
                 is DIVIDED below it — Everyday from the left,
                 Remaining picking up exactly where it ends. One
                 sweep left to right, and it settles.
     02 WAITS    one vertical due-line crosses the whole sheet. Every
                 amount is already held and stops short of it, the
                 distance left drawn as a dotted wait. Money prepared
                 TODAY, standing ready before a date you already know.
     03 PROTECTS a coverage boundary stands at the right edge. The
                 target is dashed out to it; the reserve beneath is
                 solid and built in visible increments; the tick sits
                 at the boundary. BUILD / PROTECT / REBUILD is
                 bracketed with both ends turned up, so it closes on
                 itself instead of listing.
     04 GROWS    three treads and two risers: one continuous lime
                 stair climbing into a solid goal mark. No series, no
                 projection, nothing that reads as a market.

   MOBILE IS A DIFFERENT COMPOSITION, not this one stacked. Written
   out in full above its own media query at the foot of the file.

   THE CLOSING IS NOT A CARD. A centred coda: lead large, body quiet,
   and the signature couplet as the payoff — the second line the
   largest, brightest thing in the section after the headline.
   ========================================================= */

.fr-sec--method {
  --fr-small: 0.9375rem;

  /* THE ORGANIZER'S GEOMETRY. --fr-rail is the bound-edge column:
     the board sits at its left and the divider tab is bound into it,
     so nothing in this section is positioned by hand. */
  --fr-rail: clamp(78px, 6.8vw, 98px);
  --fr-board: clamp(10px, 0.88vw, 13px);
  --fr-tab-h: clamp(52px, 4.4vw, 60px);
  --fr-colgap: clamp(28px, 3.6vw, 56px);
  --fr-fig: clamp(248px, 28.6vw, 418px);
  --fr-stop: clamp(68px, 6.2vw, 94px);
  --fr-figrow: clamp(13px, 1.4vw, 19px);

  /* THE PAGE THE FIGURE IS PRINTED ON. The first four are how far
     the paper runs past the printed area; --fr-sheet-in holds the
     figure off the column edge so the sheet underneath has somewhere
     to peek out to without ever leaving the shell. */
  --fr-sheet-t: clamp(19px, 1.8vw, 25px);
  --fr-sheet-b: clamp(20px, 1.9vw, 27px);
  --fr-sheet-x: clamp(18px, 1.7vw, 24px);
  --fr-sheet-l: var(--fr-sheet-x);
  --fr-sheet-in: 34px;

  /* 04's stair is the one figure whose geometry has to be exact: the
     riser has to land on the tread below it, so the row height and
     the row gap are tokens and the riser is derived from both. */
  --fr-p4-h: 26px;
  --fr-p4-gap: 21px;
}

/* ---------------------------------------------------------
   THE HEAD
   --------------------------------------------------------- */
.fr-method-head {
  position: relative; z-index: 1;
  max-width: min(60rem, 100%);
  margin: 0 auto clamp(62px, 6vw, 96px);
  text-align: center;
}
/* spacing only — the marker itself is built in 00-foundation.css */
.fr-page .fr-sec--method .fr-eyebrow { max-width: none; white-space: nowrap; }
.fr-page .fr-sec--method .fr-method-head .fr-eyebrow {
  margin: 0 auto clamp(22px, 2.4vw, 32px);
}
/* THE FLAGSHIP HEADLINE. The central flagship tier renders 73px at
   1440; this is the page's signature section and the one headline
   allowed above it. 74px at 1440, held on ONE LINE from 1024 up, and
   the floor of the clamp IS the phone target — 46px — so the size
   never has to be undone lower down. */
.fr-page .fr-sec--method .fr-method-title {
  font-size: clamp(2.875rem, 5.14vw, 4.625rem);
  line-height: 1.04;
}
.fr-page .fr-sec--method .fr-method-title em {
  font-style: italic;
  font-size: 1em;
  font-weight: 500;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(96deg, var(--fr-lime) 0%, #44b59c 58%, #38cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
.fr-method-title .fr-tm {
  position: relative; top: -0.46em; display: inline-block; vertical-align: baseline;
  font-family: var(--font); font-size: 0.26em; font-weight: 600; font-style: normal; line-height: 0;
  letter-spacing: 0.02em; color: var(--fr-lime);
}
/* THE CREED. Raised and tightened: it is the thesis of the section,
   not a caption under the headline. One lit rule above it. */
.fr-method-creed {
  position: relative; max-width: min(40rem, 100%); margin: clamp(30px, 3vw, 44px) auto 0;
  padding-top: clamp(30px, 3vw, 44px);
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.05vw, 1.9375rem); font-weight: 500;
  line-height: 1.3; letter-spacing: -0.012em; color: var(--gray-200); text-wrap: balance;
}
.fr-method-creed::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 152px; height: 3px; margin-left: -76px;
  background-image:
    linear-gradient(90deg, rgba(175, 221, 44, 0) 0%, rgba(175, 221, 44, 0.9) 36%, rgba(175, 221, 44, 0.9) 64%, rgba(175, 221, 44, 0) 100%),
    linear-gradient(90deg, rgba(2, 8, 20, 0) 0%, rgba(2, 8, 20, 0.8) 50%, rgba(2, 8, 20, 0) 100%);
  background-repeat: no-repeat; background-size: 100% 2px, 100% 1px; background-position: 0 0, 0 2px;
  transform-origin: 50% 50%;
}
.fr-method-head.revealed .fr-method-creed::before {
  animation: frPilRule 1s var(--fr-ease) 0.18s backwards;
}
.fr-method-creed .fr-line { display: block; }
.fr-method-creed .fr-line + .fr-line { margin-top: 0.12em; color: var(--white); }
.fr-method-head .fr-body {
  max-width: 54ch; margin: clamp(28px, 2.8vw, 40px) auto 0; color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   THE ORGANIZER — one board, four chapters bound into it
   --------------------------------------------------------- */
.fr-pillars {
  position: relative; z-index: 1; isolation: isolate;
  display: block; padding: 0; border: 0; background: none;
}
/* the air around the object — two soft pools, no edges */
.fr-pillars::after {
  content: ''; position: absolute; z-index: -2; inset: 0 -8% 0 -11%; pointer-events: none;
  background-image:
    radial-gradient(36% 19% at 8% 20%, rgba(56, 207, 255, 0.095) 0%, transparent 72%),
    radial-gradient(38% 21% at 10% 79%, rgba(175, 221, 44, 0.08) 0%, transparent 74%);
}
/* THE BOARD. The bound edge of the organizer, running the full
   height of the block: a lit cut edge on the outside, page stock
   across the face, the binding gutter darkening on the inner side
   where the pages seat into it, and the 3px index edge walking the
   four accents from cyan at 01 to lime at 04. It paints ABOVE the
   sheets, which is what makes a page look bound into it rather than
   laid beside it. */
.fr-folio4 .fr-folio4-spine {
  position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0; left: 0; width: var(--fr-board);
  border-radius: 2px 0 0 2px;
  background-image:
    linear-gradient(90deg, rgba(2, 8, 20, 0) 0%, rgba(2, 8, 20, 0.86) 100%),
    linear-gradient(180deg,
      #02c1ff 0%, #38cfff 7%, #6f7ee0 34%, #44b59c 64%, #8ccb33 88%, #afdd2c 100%),
    linear-gradient(168deg, var(--fr-paper-2) 0%, var(--fr-paper) 100%);
  background-repeat: no-repeat;
  background-size: 6px 100%, 4px 100%, 100% 100%;
  background-position: 100% 0, 0 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(226, 240, 255, 0.26),
    inset -1px 0 0 rgba(2, 8, 20, 0.7),
    3px 0 11px -5px rgba(2, 8, 20, 1);
}
/* and the board does not stop dead under 04 — it runs on past the
   last chapter and dissolves, which is the hand-off to the close. */
.fr-folio4 .fr-folio4-edge {
  position: absolute; z-index: 0; pointer-events: none;
  top: 100%; left: 0; width: var(--fr-board);
  height: clamp(52px, 5.4vw, 92px);
  border-radius: 0 0 2px 2px;
  background-image:
    linear-gradient(180deg, rgba(175, 221, 44, 0.95) 0%, rgba(175, 221, 44, 0) 100%),
    linear-gradient(180deg, var(--fr-paper) 0%, rgba(22, 36, 63, 0) 100%);
  background-repeat: no-repeat;
  background-size: 4px 100%, 100% 100%;
  background-position: 0 0, 0 0;
}

/* ---------------------------------------------------------
   A CHAPTER
   --------------------------------------------------------- */
.fr-pillars .fr-pillar {
  position: relative;
  display: grid;
  grid-template-columns: var(--fr-rail) minmax(0, 1fr) var(--fr-fig);
  /* the five rows are DECLARED, not implied: the sheet spans 1 / -1,
     and -1 only reaches the far side of the chapter when the explicit
     grid actually has those tracks in it. */
  grid-template-rows: auto auto auto auto auto;
  column-gap: var(--fr-colgap);
  margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.fr-pillars .fr-pillar + .fr-pillar { margin-top: var(--fr-stop); }
/* the chapter's own light — a pool behind the type, gone before it
   reaches any edge, and kept below the paper so it never washes it */
.fr-pillars .fr-pillar::after {
  content: ''; position: absolute; z-index: -2; inset: 0 -6% 0 -12%; pointer-events: none;
  background-image: radial-gradient(34% 44% at 9% 50%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.095) 0%, transparent 72%);
}

/* THE DIVIDER TAB. Page stock, square at the bound edge, cut at the
   outer shoulder, raised off the board, its accent on the side that
   is bound in — the colour you would see in the index with the
   organizer closed. */
.fr-pillars .fr-pillar-num {
  grid-column: 1; grid-row: 1; align-self: start; justify-self: start;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 0.4vw, 6px);
  width: calc(100% + clamp(8px, 0.9vw, 14px));
  min-height: var(--fr-tab-h);
  margin: 0; padding: clamp(8px, 0.8vw, 11px) clamp(8px, 0.8vw, 12px);
  border: 0; border-radius: 0 7px 7px 0;
  background-image: linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-raise) 100%);
  box-shadow:
    inset 3px 0 0 rgba(var(--acc-rgb, 56, 207, 255), 0.9),
    var(--fr-d2);
}
.fr-pillars .fr-pillar-num > b {
  display: block; width: auto; height: auto;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--font); font-size: clamp(1.3125rem, 1.6vw, 1.625rem);
  font-weight: 800; line-height: 1; letter-spacing: 0.008em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, rgb(var(--acc-rgb, 56, 207, 255)) 62%, white);
}
.fr-pillars .fr-pillar-num > span {
  display: block; margin: 0; padding: 0; text-align: center;
  background: none; box-shadow: none;
  font-family: var(--font); font-size: 0.5625rem; font-weight: 800; line-height: 1.1;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.9);
}

/* the emblem, centred on the tab it belongs to */
.fr-pillars .fr-pillar-icon {
  grid-column: 2; grid-row: 1; justify-self: start; align-self: start;
  display: block; width: auto; height: auto;
  margin: calc(var(--fr-tab-h) / 2 - 15px) 0 clamp(11px, 1.1vw, 15px);
  border: 0; background: none; box-shadow: none;
}
.fr-pillars .fr-pillar-icon .fr-ico {
  display: block; width: clamp(24px, 2vw, 29px); height: clamp(24px, 2vw, 29px);
  stroke-width: 1.5;
  color: color-mix(in srgb, var(--acc, #38cfff) 74%, white);
}

/* the name — the biggest thing in the chapter */
.fr-pillars .fr-pillar-name {
  grid-column: 2; grid-row: 2; margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.6875rem, 2.5vw, 2.25rem);
  font-weight: 500; line-height: 1.1; letter-spacing: -0.014em;
  color: var(--white); text-wrap: balance;
}
.fr-pillars .fr-pillar-name .fr-tm {
  position: relative; top: -0.6em; font-size: 0.34em; line-height: 0; vertical-align: baseline;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.9);
}
/* the statement, in the chapter's own accent */
.fr-pillars .fr-pillar-def {
  grid-column: 2; grid-row: 3; max-width: min(30rem, 100%);
  margin: clamp(12px, 1.3vw, 18px) 0 0; padding: 0; border: 0;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.0625rem, 1.26vw, 1.25rem); font-weight: 500; line-height: 1.4;
  color: color-mix(in srgb, rgb(var(--acc-rgb, 56, 207, 255)) 46%, var(--fr-ink));
  text-wrap: pretty;
}
.fr-pillars .fr-pillar-detail {
  grid-column: 2; grid-row: 4; max-width: var(--fr-measure);
  margin: clamp(14px, 1.5vw, 20px) 0 0; padding: 0; border: 0; background: none;
  font-size: var(--fr-small); line-height: 1.66; color: var(--fr-ink-2); text-wrap: pretty;
}

/* BUILD. PROTECT. REBUILD. — bracketed with both ends turned up, so
   the three words close on themselves instead of listing. */
.fr-pillars .fr-pillar-cycle {
  grid-column: 2; grid-row: 5; position: relative;
  display: flex; flex-wrap: wrap; align-items: center;
  width: max-content; max-width: 100%;
  gap: 4px clamp(15px, 1.6vw, 23px);
  margin: clamp(18px, 1.9vw, 26px) 0 0; padding: 0 2px 11px;
  font-family: var(--font); font-size: 0.625rem; font-weight: 800; line-height: 1.2;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(var(--acc-rgb, 68, 181, 156), 0.92);
}
.fr-pillars .fr-pillar-cycle::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(0deg, rgba(var(--acc-rgb, 68, 181, 156), 0.5) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--acc-rgb, 68, 181, 156), 0.78) 0 8px, transparent 8px),
    linear-gradient(0deg, rgba(var(--acc-rgb, 68, 181, 156), 0.78) 0 8px, transparent 8px);
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 8px, 1px 8px;
  background-position: 0 100%, 0 100%, 100% 100%;
}

/* ---------------------------------------------------------
   ARRIVAL — the tab comes out of the board, the page files in
   behind it, then the figure runs its own behaviour once
   --------------------------------------------------------- */
.fr-pillars .fr-pillar.revealed .fr-pillar-num {
  animation: frPilTab 0.68s var(--fr-ease) 0.04s backwards;
}
.fr-pillars .fr-pillar:nth-of-type(3).revealed .fr-pillar-cycle::after {
  animation: frPilRule 0.8s var(--fr-ease) 0.5s backwards;
}

/* ---------------------------------------------------------
   THE CLOSE — a coda, not a card
   --------------------------------------------------------- */
.fr-method-close {
  position: relative; z-index: 1; display: block;
  max-width: min(62rem, 100%);
  margin: clamp(104px, 9.6vw, 168px) auto 0;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  text-align: center;
}
.fr-method-close-lead {
  max-width: 26ch; margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.72vw, 2.4375rem);
  font-weight: 500; line-height: 1.22; letter-spacing: -0.016em;
  color: var(--white); text-wrap: balance;
}
.fr-method-close-lead em { font-style: italic; color: var(--fr-lime); }
.fr-method-close .fr-body {
  max-width: 52ch; margin: clamp(24px, 2.4vw, 34px) auto 0;
  color: var(--fr-ink-2); text-wrap: pretty;
}
/* THE PAYOFF. Two lines, deliberately unequal: the first is the
   setup and sits back, the second is the line the whole section has
   been walking toward and is the largest, brightest thing in it. */
.fr-method-signature {
  position: relative; max-width: min(46rem, 100%);
  margin: clamp(58px, 5.8vw, 96px) auto 0;
  padding-top: clamp(32px, 3.2vw, 46px);
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 3vw, 2.75rem); font-weight: 500;
  line-height: 1.2; letter-spacing: -0.018em; color: var(--white);
  text-wrap: balance;
}
.fr-method-signature::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 170px; height: 3px; margin-left: -85px;
  background-image:
    linear-gradient(90deg, rgba(175, 221, 44, 0) 0%, rgba(175, 221, 44, 0.95) 34%, rgba(175, 221, 44, 0.95) 66%, rgba(175, 221, 44, 0) 100%),
    linear-gradient(90deg, rgba(2, 8, 20, 0) 0%, rgba(2, 8, 20, 0.85) 50%, rgba(2, 8, 20, 0) 100%);
  background-repeat: no-repeat; background-size: 100% 2px, 100% 1px; background-position: 0 0, 0 2px;
  transform-origin: 50% 50%;
}
.fr-method-close.revealed .fr-method-signature::before {
  animation: frPilRule 1.05s var(--fr-ease) 0.22s backwards;
}
.fr-method-signature .fr-line { display: block; }
.fr-method-signature .fr-line:first-child {
  font-size: 0.72em; line-height: 1.3; letter-spacing: -0.012em;
  color: rgba(214, 231, 252, 0.72);
}
.fr-method-signature .fr-line + .fr-line { margin-top: 0.2em; color: var(--white); }
.fr-method-signature em { font-style: italic; color: var(--fr-lime); }
.fr-method-close.revealed .fr-method-signature .fr-line { animation: frRise 0.8s var(--fr-ease) 0.28s backwards; }
.fr-method-close.revealed .fr-method-signature .fr-line + .fr-line { animation-delay: 0.46s; }

/* ---------------------------------------------------------
   KEYFRAMES — every one settles on the element's base style
   --------------------------------------------------------- */
@keyframes frPilRule { from { opacity: 0.2; transform: scaleX(0.06); } }
@keyframes frPilTab { from { opacity: 0; transform: translate3d(-15px, 0, 0); } }
@keyframes frPilFile { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes frPilInk { from { opacity: 0; transform: translate3d(0, 7px, 0); } }
@keyframes frPilDraw { from { opacity: 0.35; transform: scaleX(0); } }
@keyframes frPilHold { from { opacity: 0; } }
@keyframes frPilDrop {
  from { opacity: 0; transform: translate3d(0, -9px, 0); }
  64% { opacity: 1; transform: translate3d(0, 1px, 0); }
}
@keyframes frPilMark { from { opacity: 0; transform: scale(0.7); } }

/* ============================================================
   WHAT EACH PILLAR ACTUALLY HOLDS
   The four figures used to be abstract bars, which meant a reader
   could look at one and not know what it claimed. They are now the
   locked sample month, printed as label/figure rows on the pillar
   sheet: MOVES 1,500 + WAITS 2,600 + PROTECTS 600 + GROWS 500 =
   5,200, the same take-home the hero organizer shows.
   ============================================================ */
.fr-pillars .fr-pillar-page {
  /* the figure column, spanning the whole station so it never dictates
     the height of any single type row */
  grid-column: 3;
  grid-row: 1 / -1;
  position: relative;
  display: block;
  align-self: start;
  margin: 0;
  /* THE BOX IS GONE. The fill, the corner radius, the lit top edge and
     --fr-d2 (whose `inset 0 0 0 1px var(--fr-edge)` was the perceived
     border) all made this an enclosed card, and four enclosed cards read
     as four products rather than one system. Everything that gives the
     figures their shape now lives in the ledger block at the foot of this
     file: a luminous rail, hairline rules, and a wash of the pillar's own
     colour. Only the placement is still decided here. */
}
/* the rail the ledger hangs from; the paint is in the ledger block */
.fr-pillars .fr-pillar-page::before {
  content: '';
  position: absolute;
  left: 0;
}
.fr-pillars .fr-pillar-page i {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(4px, 0.5vw, 7px) 0;
  border-top: 1px solid rgba(150, 190, 235, 0.11);
  font-style: normal;
  font-size: clamp(0.75rem, 0.84vw, 0.8125rem);
  line-height: 1.32;
}
.fr-pillars .fr-pillar-page i:first-child { border-top: 0; }
.fr-pillars .fr-pillar-page i b {
  font-weight: 560;
  color: var(--fr-ink-2);
}
/* a due date, or the note that a line is planned rather than billed */
.fr-pillars .fr-pillar-page i b em {
  display: inline-block;
  margin-left: 7px;
  font-style: normal;
  font-size: 0.75em;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.78);
}
.fr-pillars .fr-pillar-page i s {
  flex: none;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--fr-ink);
}
/* the figure the whole pillar hangs on */
.fr-pillars .fr-pillar-page i[data-row="sum"] {
  border-top-color: rgba(150, 190, 235, 0.3);
}
.fr-pillars .fr-pillar-page i[data-row="sum"] b {
  font-weight: 680;
  color: var(--fr-ink);
}
.fr-pillars .fr-pillar-page i[data-row="sum"] s {
  font-size: 1.16em;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.98);
}
/* 1800/6000 and 2750/8000, drawn to the fraction they state */
.fr-pillars .fr-pillar-page i[data-row="meter"] {
  position: relative;
  flex-wrap: wrap;
  padding-bottom: clamp(10px, 1.1vw, 14px);
}
.fr-pillars .fr-pillar-page i[data-row="meter"]::after {
  content: '';
  flex: 1 0 100%;
  height: 4px;
  margin-top: 7px;
  border-radius: 1px;
  background-image:
    linear-gradient(90deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.95) 0 calc(var(--fr-pct, 0) * 1%),
      rgba(0, 0, 0, 0) calc(var(--fr-pct, 0) * 1%)),
    linear-gradient(rgba(150, 190, 235, 0.16), rgba(150, 190, 235, 0.16));
}

/* one quiet provenance label under the section intro */
.fr-page .fr-sec--method .fr-method-stamp {
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(214, 231, 252, 0.46);
}

/* the one line that keeps an investing example from reading as advice */
.fr-pillars .fr-pillar-page i[data-row="note"] {
  display: block;
  margin-top: 4px;
  padding-bottom: 0;
  border-top-color: rgba(150, 190, 235, 0.22);
}
.fr-pillars .fr-pillar-page i[data-row="note"] b {
  font-size: 0.8125em;
  font-style: italic;
  font-weight: 500;
  color: rgba(214, 231, 252, 0.6);
}
.fr-pillars .fr-pillar-page i[data-row="note"] s { display: none; }

/* ============================================================
   GROWS: AN AMOUNT, THEN OPPORTUNITIES — NOT AN ALLOCATION
   A workplace 401(k) is normally withheld before take-home pay, so
   splitting the $500 into $300 / $200 implied a cash-flow that does
   not happen and read as a recommendation. The pillar keeps its
   $500 so the month still reconciles, and the accounts below it are
   listed as things we may educate you on, with no figures attached.
   ============================================================ */
.fr-pillars .fr-pillar-page i[data-row="head"] {
  margin-top: clamp(5px, 0.6vw, 8px);
  padding-bottom: 2px;
  border-top-color: rgba(150, 190, 235, 0.22);
}
.fr-pillars .fr-pillar-page i[data-row="head"] b {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 231, 252, 0.55);
}
.fr-pillars .fr-pillar-page i[data-row="head"] s,
.fr-pillars .fr-pillar-page i[data-row="opt"] s { display: none; }
/* an opportunity is a named account, not a line item with a figure */
.fr-pillars .fr-pillar-page i[data-row="opt"] {
  padding: clamp(3px, 0.4vw, 5px) 0;
  border-top: 0;
}
.fr-pillars .fr-pillar-page i[data-row="opt"] b {
  position: relative;
  padding-left: 15px;
  font-weight: 600;
  color: var(--fr-ink);
}
.fr-pillars .fr-pillar-page i[data-row="opt"] b::before {
  content: '';
  position: absolute;
  left: 0; top: 0.52em;
  width: 7px; height: 1px;
  background: rgba(var(--acc-rgb, 175, 221, 44), 0.85);
}
/* FR-PILLARS-BLOCK:START */
/* ============================================================
   THE FOUR PILLARS — ONE SYSTEM, NOT FOUR CARDS
   The content was right and the container was wrong. Each example
   sat in a filled navy rectangle with a 1px ring and a drop
   shadow, so the signature methodology read as

       TEXT  CARD   TEXT  CARD   TEXT  CARD   TEXT  CARD

   Four boxes say "four products". The pillars are one system.

   WHAT WENT: the fill (`--fr-paper-2 -> --fr-paper`), the corner
   radius, the lit top edge, and `--fr-d2` — whose
   `inset 0 0 0 1px var(--fr-edge)` was the perceived border and
   the real culprit. Removing the radius alone would have left a
   hard-edged rectangle with a ring, which is worse.

   WHAT REPLACED IT: an OPEN LEDGER inlaid into the page. No fill
   and no edges — the figures are held by a luminous accent rail on
   the bound side, hairline rules between entries, and a low wash
   of the pillar's own colour bleeding out of that rail. The
   numbers sit in the environment rather than in a container, and
   the one figure that matters each month is lit.

   Each ledger is then the thing its pillar actually is: an
   allocation bar for what Moves, a dated schedule for what Waits,
   a protection meter for what Protects, an opportunity index for
   what Grows.
   ============================================================ */

/* ---- THE BOX COMES OFF ------------------------------------- */
.fr-page .fr-pillars .fr-pillar-page {
  padding: 2px 0 2px clamp(15px, 1.4vw, 21px);
  border-radius: 0;
  /* a low wash of the pillar's colour, bleeding out of the rail and
     gone by two thirds — light in the environment, not a surface */
  background-image:
    radial-gradient(118% 76% at 0% 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.085) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 66%);
  box-shadow: none;
}

/* ---- THE RAIL: the only structural mark the ledger gets ----- */
.fr-page .fr-pillars .fr-pillar-page::before {
  top: 1px;
  bottom: 1px;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.95) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.55) 46%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.14) 100%);
  box-shadow: 0 0 12px -1px rgba(var(--acc-rgb, 56, 207, 255), 0.45);
}

/* ---- THE ENTRIES ------------------------------------------- */
.fr-page .fr-pillars .fr-pillar-page i {
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(7px, 0.7vw, 9px) 0;
  border-top: 1px solid rgba(150, 190, 235, 0.09);
}
.fr-page .fr-pillars .fr-pillar-page i:first-child { border-top: 0; }
.fr-page .fr-pillars .fr-pillar-page b {
  font-weight: 500;
  color: var(--fr-ink);
}
.fr-page .fr-pillars .fr-pillar-page s {
  text-decoration: none;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--fr-ink);
}

/* THE MONTH'S ANCHOR FIGURE. One number per pillar is the one that
   reconciles against the other three; it is the only thing here
   that is allowed to glow. */
.fr-page .fr-pillars .fr-pillar-page i[data-row="sum"] {
  border-top-color: rgba(var(--acc-rgb, 56, 207, 255), 0.34);
  padding-bottom: clamp(9px, 0.9vw, 12px);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="sum"] b {
  font-weight: 700;
  color: #ffffff;
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="sum"] s {
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgb(var(--acc-rgb, 56, 207, 255));
  text-shadow: 0 0 22px rgba(var(--acc-rgb, 56, 207, 255), 0.42);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="sum"] em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--fr-ink-3, rgba(214, 231, 252, 0.52));
}

/* ============================================================
   01 MOVES — THE ALLOCATION LINE
   The four supporting figures are 650 / 300 / 250 / 300 against
   1,500, and the stops are computed from exactly those numbers in
   the markup, so the bar is the arithmetic rather than a picture
   of it.
   ============================================================ */
.fr-page .fr-pillars .fr-pillar-page i[data-row="alloc"] {
  display: block;
  height: 6px;
  margin-top: clamp(11px, 1.1vw, 15px);
  padding: 0;
  border-top: 0;
  border-radius: 3px;
  background-image: linear-gradient(90deg,
    rgba(var(--acc-rgb), 0.92) 0 calc(var(--s1) * 1%),
    rgba(2, 8, 20, 0)          calc(var(--s1) * 1%) calc(var(--s1) * 1% + 2px),
    rgba(var(--acc-rgb), 0.62) calc(var(--s1) * 1% + 2px) calc(var(--s2) * 1%),
    rgba(2, 8, 20, 0)          calc(var(--s2) * 1%) calc(var(--s2) * 1% + 2px),
    rgba(var(--acc-rgb), 0.42) calc(var(--s2) * 1% + 2px) calc(var(--s3) * 1%),
    rgba(2, 8, 20, 0)          calc(var(--s3) * 1%) calc(var(--s3) * 1% + 2px),
    rgba(var(--acc-rgb), 0.26) calc(var(--s3) * 1% + 2px) 100%);
  box-shadow: 0 0 16px -4px rgba(var(--acc-rgb), 0.5);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="alloc"] b,
.fr-page .fr-pillars .fr-pillar-page i[data-row="alloc"] s { display: none; }

/* ============================================================
   02 WAITS — A DATED SCHEDULE
   An obligation you already know about has a date attached, so the
   date leads the line the way it would on a real schedule.
   ============================================================ */
.fr-page .fr-pillars .fr-pillar-page i:not([data-row]) b {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 11px;
  min-width: 0;
}
.fr-page .fr-pillars .fr-pillar-page i:not([data-row]) b em {
  order: -1;
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  color: rgba(214, 231, 252, 0.42);
}

/* ============================================================
   03 PROTECTS — THE METER
   Not a card and not a row: a reserve that is 30% of the way to a
   target, with the target marked at the end of the run.
   ============================================================ */
.fr-page .fr-pillars .fr-pillar-page i[data-row="meter"] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px clamp(12px, 1.2vw, 18px);
  margin-top: clamp(4px, 0.5vw, 7px);
  border-top: 0;
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="meter"] b {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="meter"] s {
  font-size: 0.9375rem;
  color: #46c6a8;
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="meter"]::after {
  content: '';
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 4px;
  background-image:
    /* the target, marked where the run ends */
    linear-gradient(90deg, rgba(226, 245, 240, 0.72), rgba(226, 245, 240, 0.72)),
    /* what is protected so far */
    linear-gradient(90deg,
      #2bb897 0 calc(var(--fr-pct, 0) * 1%),
      rgba(150, 190, 235, 0.13) calc(var(--fr-pct, 0) * 1%) 100%);
  background-size: 2px 7px, 100% 100%;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 9px rgba(43, 184, 151, 0.45),
    0 0 18px -6px rgba(43, 184, 151, 0.55);
}

/* ============================================================
   04 GROWS — AN OPPORTUNITY INDEX
   Named account types only. No amounts against them, no ordering
   that could read as a recommendation, and the trajectory behind
   the ledger is a single faint rising line with no axis and no
   scale, so it cannot be read as a return.
   ============================================================ */
.fr-page .fr-pillars .fr-pillar-page i[data-row="head"] {
  margin-top: clamp(5px, 0.6vw, 8px);
  padding-bottom: 2px;
  border-top-color: rgba(150, 190, 235, 0.18);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="head"] b {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="opt"] {
  padding: clamp(5px, 0.55vw, 7px) 0;
  border-top: 0;
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="opt"] b {
  position: relative;
  padding-left: 17px;
  font-weight: 500;
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="opt"] b::before {
  content: '';
  position: absolute;
  left: 0; top: 0.52em;
  width: 9px; height: 1.5px;
  border-radius: 1px;
  background: rgba(var(--acc-rgb, 175, 221, 44), 0.8);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="note"] {
  margin-top: clamp(7px, 0.8vw, 10px);
  border-top-color: rgba(150, 190, 235, 0.14);
}
.fr-page .fr-pillars .fr-pillar-page i[data-row="note"] b {
  font-size: 0.6875rem;
  font-style: italic;
  font-weight: 400;
  color: var(--fr-ink-3, rgba(214, 231, 252, 0.52));
}
/* the rising line, behind the index, with nothing to read off it */
.fr-page .fr-pillars [data-accent="grows"] .fr-pillar-page {
  background-image:
    linear-gradient(74deg,
      rgba(0, 0, 0, 0) 54%,
      rgba(var(--acc-rgb, 175, 221, 44), 0.14) 54.6%,
      rgba(var(--acc-rgb, 175, 221, 44), 0.14) 55.2%,
      rgba(0, 0, 0, 0) 55.8%),
    radial-gradient(118% 76% at 0% 0%,
      rgba(var(--acc-rgb, 175, 221, 44), 0.085) 0%,
      rgba(var(--acc-rgb, 175, 221, 44), 0) 66%);
}

/* the spine carries the whole system, so it is allowed to glow */
.fr-page .fr-folio4 .fr-folio4-spine {
  box-shadow:
    inset 0 1px 0 rgba(226, 240, 255, 0.26),
    inset -1px 0 0 rgba(2, 8, 20, 0.7),
    3px 0 11px -5px rgba(2, 8, 20, 1),
    -1px 0 22px -6px rgba(90, 190, 230, 0.4);
}

/* ============================================================
   THE SPINE RUNS ONCE, ON ARRIVAL
   One light travels the length of the system and stops. The spine
   itself is unchanged; this only adds the pass, drawn on a pseudo
   so the index edge's own colour walk is untouched.
   ============================================================ */
.fr-page .fr-folio4 .fr-folio4-spine::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px;
  height: 22%;
  border-radius: 2px;
  opacity: 0;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(236, 252, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
}
.fr-page .fr-folio4:has(.fr-pillar.revealed) .fr-folio4-spine::after {
  animation: frSpinePass 2.1s var(--fr-ease-soft, ease-out) 0.35s 1 both;
}
@keyframes frSpinePass {
  0%   { transform: translateY(-24%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(455%); opacity: 0; }
}
/* FR-PILLARS-BLOCK:END */

/* FR-CLUSTER1-BLOCK:START */
/* Cluster 1 polish: FOUR PILLARS TITLES.
   Lives in this file, not in an appendix elsewhere, because the build
   concatenates the part files in order and these rules must come after
   the equal-specificity rules they replace. */
/* ------------------------------------------------------------
   2. FOUR PILLARS — THE NAMES CARRY THEIR OWN AUTHORITY
   These are the signature concepts, and at 36px against 15px body
   they were only 2.4x the paragraph beneath them — present, but not
   dominant. Each name is now ~16% larger and each carries its own
   gradient across the whole line rather than only on the last word,
   so no two pillars read the same and none of them reads as the
   spine beside it.

   Every family is a LIGHT tint on deep navy, so raising the colour
   does not cost legibility: the lightest stop in each is well above
   the body ink it has to beat. Family, weight, wording, placement
   and the section around them are untouched.
   ------------------------------------------------------------ */
/* 01 MOVES — cyan into bright teal into soft azure. Deliberately
   started lighter than the #38cfff spine beside it so the title is
   not mistaken for the rail. */
.fr-page .fr-pillars [data-accent="cyan"]   .fr-pillar-name { --g1: #7fe0ff; --g2: #46d5c4; --g3: #9ec8ff; }
/* 02 WAITS — indigo into periwinkle into cool cyan */
.fr-page .fr-pillars [data-accent="indigo"] .fr-pillar-name,
.fr-page .fr-pillars [data-accent="royal"]  .fr-pillar-name { --g1: #9aa4ff; --g2: #bcc5ff; --g3: #6fd8ff; }
/* 03 PROTECTS — teal into emerald into soft aqua; the emerald is what
   separates it from the teal rail and from Moves */
.fr-page .fr-pillars [data-accent="teal"]   .fr-pillar-name { --g1: #4fd3b0; --g2: #63dd8c; --g3: #a6ecde; }
/* 04 GROWS — royal blue into cyan, with lime only as the finish */
.fr-page .fr-pillars [data-accent="lime"]   .fr-pillar-name { --g1: #7aa7ff; --g2: #5fd6ff; --g3: #cdee5a; }

/* +16%: 36px -> 41.8px at 1440, 25.7px -> 30.0px at 390 */
.fr-page .fr-pillars .fr-pillar-name {
  font-size: clamp(1.9375rem, 2.9vw, 2.625rem);
}
/* data-accent sits on the <article>, so the pillar must be the
   element that carries `revealed` for the sheen to fire — it is */
.fr-page .fr-pillars .fr-pillar-name {
  background-position: 180% 0, 0 0;
}
/* the trademark stays solid ink: clipped into the gradient it lands on
   the lightest stop and effectively disappears */
.fr-page .fr-pillars .fr-pillar-name .fr-tm {
  -webkit-text-fill-color: rgba(214, 231, 252, 0.5);
  color: rgba(214, 231, 252, 0.5);
}
/* the index illuminates with its own pillar */
.fr-page .fr-pillars .fr-pillar-num b {
  color: rgb(var(--acc-rgb, 56, 207, 255));
  text-shadow: 0 0 18px rgba(var(--acc-rgb, 56, 207, 255), 0.5);
}
/* FR-CLUSTER1-BLOCK:END */


/* ============================================================
   WHAT IT IS -> FOUR PILLARS
   With Complete Picture gone these two sections meet directly, and
   the page's standard 137 + 137 rhythm left ~274px of empty ground
   between two short blocks — read as a hole where something had
   been removed rather than as breathing room. Closed to ~212px for
   this one junction only; every other section keeps --fr-pad.
   ============================================================ */
@media (min-width: 901px) {
  .fr-page .fr-sec--define { padding-bottom: clamp(74px, 7vw, 100px); }
  .fr-page .fr-sec--method { padding-top: clamp(86px, 8vw, 112px); }
}

/* ============================================================
   FINANCIAL RESET — 50 · BUILT AROUND YOU · WHAT YOUR STRATEGY CAN
   COVER · THE ACTION PLAN · WHY IT'S DIFFERENT
   ------------------------------------------------------------
   ELEVATION PASS. The structure, order and copy are unchanged. What
   changed is depth, hierarchy, material and three pieces of motion that
   mean something. Both shared systems in 00-foundation.css are consumed
   rather than re-cut: the THREE HEADLINE TIERS (this file sets no
   headline size other than passing --fr-h2 to the one section heading the
   foundation cannot reach, `.fr-scope-title`) and THE DEPTH LADDER
   (--fr-d1 … --fr-d4, --fr-raise-1). There is not one bespoke elevation
   box-shadow in this file; every raised object names a rung, so a raised
   page here sits at exactly the height of a raised page anywhere else.

   THE BOX REDUCTION AUDIT, applied here and acted on:
     · `.fr-scope` WAS a 60px-padded slab of page stock wrapped around six
       more rectangles — a box around a group of boxes. The slab is gone.
       What remains is one soft key light over the spread, so the dominant
       page and its inserts stand on the page ground at their own heights.
     · `.fr-work-then` WAS a full-width filled strip. "Then we stay with
       you" is a continuation, not an object: the fill, the ring and the
       contact shadow are gone and a lime-to-cyan continuation edge
       carries it.
     · `.fr-proof-lead` WAS a saturated header band bolted to the top of
       the inputs page, which is why the old file needed three rules to
       hide the seam between them. It is now a printed label standing
       above the slips.
     · `.fr-proof-inputs` WAS one large raised sheet holding six ruled
       rows — the single longest unbroken rectangle in either section on
       a phone, and a rectangle standing in for six separate things. The
       sheet is deleted. The six inputs are six SLIPS, tucked under the
       foot edge of a strategy page; on a phone they wrap into one run
       of filed tabs.
     · FIVE OF THE SIX SPREAD CARDS stop being cards below 760: only
       Cash flow & budget stays a page, and the rest become labelled
       divider tabs with no fill at all.
     · `.fr-plan-list` was six rows of loose text; it is now ONE object —
       the plan's contents page — rather than six cards. Six boxes would
       have been the wrong answer to "more dimensional".
   Net: three rectangles removed, one real object gained.

   WHAT STAYED DELETED from the four rejected directions — rails, nodes,
   measures, the routed flight, the allocation board, the ledger
   argument, the strategy-marker eyebrow, the money-flow ribbon, the
   per-section headline size, the plate behind every icon, the 3D
   parallax on the artifact. None of it returns here.

   MOTION — FIVE keyframes, each with a job, plus two state transitions:
     frBuildSheet  a strategy page is added into the portfolio. Used for
                   the four overlapping pages, reused for the spread's
                   inserts rather than re-cut.
     frBuildInk    the completion rule inks across each page a beat after
                   that page is filed: the sheet is being worked through.
     frBuildMark   the continuation marker activates once, after the
                   strategy is built — section B's whole argument.
     frBuildAlloc  the paycheck is divided along the allocation line on
                   the cash-flow page, left to right, once.
     frPlanStep    01 to 06 activate in sequence inside the plan, and the
                   six real input slips print under the page edge.
     + the artifact rises one rung (d3 -> d4) as the section is reached
     + the three tabbed sheets settle out from under the cover
   Nothing travels along a line, nothing pulses, nothing scans, and every
   one of them is `from`-only or parks on its finished frame. The page is
   finished in a still screenshot.
   ============================================================ */

/* ---- THE PAGE, ON THE ELEMENTS THE MARKUP GIVES NO CLASS -----------
   The foundation's recipe, unchanged: --fr-paper stock, a lit top edge at
   rgba(255,255,255,.08) and the 1px --fr-edge hairline. It is restated
   here only because these elements cannot carry `.fr-paper` without
   touching the markup. The CONTACT SHADOW IS NOT IN THIS RULE ANY MORE:
   elevation is the depth ladder's job, and every one of these elements
   names its own rung below. That is the whole point of a shared ladder —
   the material is one recipe, the height is one scale. */
.fr-page .fr-work li,
.fr-page .fr-scope-grid li,
.fr-page .fr-doc-sheet,
.fr-page .fr-plan-list {
  border: 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
}

/* ---- THE INDEX EDGE -----------------------------------------------
   The same 3px inlaid edge the foundation gives the divider tab, at page
   scale: the accent on the bound side, a hairline shade where the colour
   meets the stock, and no halo. The accent is read from the markup's
   data-accent; a page the markup leaves unaccented takes the programme's
   lime. `.fr-work-then::before` and `.fr-proof-lead::before` have left
   this rule — neither is a page any more, and each now carries a
   gradient that says something, which is in its own rule below. */
.fr-page .fr-work li::after,
.fr-page .fr-scope-grid li::after,
.fr-page .fr-plan-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  border-radius: 1px 0 0 1px;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 175, 221, 44), 0.95) 0%,
    rgba(var(--acc-rgb, 175, 221, 44), 0.58) 100%);
  box-shadow: inset -1px 0 0 rgba(3, 10, 22, 0.42);
}

/* ============================================================
   A · BUILT AROUND YOU
   "We don't hand you a worksheet. / We build your strategy."
   The statement takes the wide column and the paragraph sits on its
   baseline — the same two-column head the dominant page in section B
   uses, so the section has one idea about headlines rather than two.
   ============================================================ */
.fr-page .fr-build-intro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(48px, 5vw, 78px);
}
.fr-page .fr-build-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: calc(var(--fr-gap) * 1.6);
  align-items: end;
}
.fr-page .fr-build-head > .fr-eyebrow { grid-column: 1; grid-row: 1; }
.fr-page .fr-build-head > .fr-h2 { grid-column: 1; grid-row: 2; }
.fr-page .fr-build-head > .fr-body {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  padding-bottom: 0.4em;
}

/* ---- FOUR OVERLAPPING STRATEGY PAGES ------------------------------
   NOT four equal rectangles in a row with a gap, which is what this was
   and why the section read boxy. These are four pages being added into
   the portfolio, left to right: 01 Review lies furthest back and
   lowest, 02 Organize overlaps it, 03 Priorities overlaps that, and 04
   Build Your Strategy sits forward — highest on the stair, highest
   z-index, the only one with a page corner, the only one with a sheet
   filed under it, and the only one on the section's primary rung.

   The overlap is a NEGATIVE RIGHT MARGIN, not a transform: each page's
   right strip extends into the next column and the next page is drawn
   over it. The grid's own width never changes, so the composition
   cannot overflow the shell. `--fr-ovl-pad` adds the same distance back
   onto the overlapped page's right padding, so no line of type ever
   runs under the page on top of it.

   The stair is MARGIN, and the four margin pairs each total three
   steps, so all four pages are EXACTLY the same height while sitting at
   four different heights on the row. Four pages of one stock. */
.fr-page .fr-work { position: relative; z-index: 1; }
.fr-page .fr-work ol {
  --fr-ovl: clamp(20px, 2.4vw, 36px);
  --fr-stair: clamp(9px, 1vw, 15px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fr-moment;
}
.fr-page .fr-work li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(12px, 1.2vw, 16px);
  row-gap: clamp(16px, 1.7vw, 22px);
  margin: 0;
  padding:
    clamp(26px, 2.4vw, 34px)
    calc(clamp(24px, 2.2vw, 32px) + var(--fr-ovl-pad, 0px))
    clamp(28px, 2.6vw, 36px)
    clamp(22px, 2vw, 28px);
  border-radius: 2px 6px 6px 2px;
  list-style: none;
  counter-increment: fr-moment;
  transition: transform 0.34s var(--fr-ease), box-shadow 0.34s var(--fr-ease);
}
/* the overlap and the right-padding compensation, together */
.fr-page .fr-work li:nth-child(-n+3) {
  --fr-ovl-pad: var(--fr-ovl);
  margin-right: calc(var(--fr-ovl) * -1);
}
/* THE STAIR AND THE LADDER. One rung per page, named — 01 is a flat
   planning sheet on the ground, 02 and 03 are raised portfolio pages,
   04 is the section's primary object. No page here writes a shadow. */
.fr-page .fr-work li:nth-child(1) {
  z-index: 1;
  --fr-done: 25%;
  margin-top: calc(var(--fr-stair) * 3);
  box-shadow: var(--fr-d1);
}
.fr-page .fr-work li:nth-child(2) {
  z-index: 2;
  --fr-done: 50%;
  margin-top: calc(var(--fr-stair) * 2);
  margin-bottom: var(--fr-stair);
  box-shadow: var(--fr-d2);
}
.fr-page .fr-work li:nth-child(3) {
  z-index: 3;
  --fr-done: 75%;
  margin-top: var(--fr-stair);
  margin-bottom: calc(var(--fr-stair) * 2);
  box-shadow: var(--fr-d2);
}
/* 04 sits forward. The sheet filed under it is PAPER, not a shadow —
   one fill at -1px spread and one hairline at 0, the foundation's own
   thickness device — and it is offset straight down with no x, so the
   last page in the row cannot push anything past the shell edge. */
.fr-page .fr-work li:nth-child(4) {
  z-index: 4;
  --fr-done: 100%;
  margin-bottom: calc(var(--fr-stair) * 3);
  box-shadow:
    0 8px 0 -1px var(--fr-paper-2),
    0 8px 0 0 var(--fr-edge),
    var(--fr-d3);
}
/* THE PAGE CORNER. A lifted fold on the forward page only: a lit
   triangle, one dark crease, 20px, top right — the one corner in the row
   that is not tucked under another page. Paper, at the scale paper is. */
.fr-page .fr-work li:nth-child(4) {
  background-image:
    linear-gradient(225deg,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.05) 46%,
      rgba(2, 8, 20, 0.5) 47% 50%,
      transparent 51%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  background-repeat: no-repeat;
  background-size: 20px 20px, 100% 100%, 100% 100%;
  background-position: 100% 0, 0 0, 0 0;
}
/* hover is the ladder's fourth rung and the only level that moves */
.fr-page .fr-work li:hover {
  z-index: 5;
  box-shadow: var(--fr-d4);
  transform: var(--fr-raise-1);
}
.fr-page .fr-work li:nth-child(4):hover {
  box-shadow:
    0 8px 0 -1px var(--fr-paper-2),
    0 8px 0 0 var(--fr-edge),
    var(--fr-d4);
}
/* THE PRINTED FOLIO NUMBER, moved out of the top-right corner, which is
   now under the next page, and set where a planner prints a page index:
   top left, inside the bound edge, with the moment's glyph beside it.
   The number and the glyph are one printed line; the heading and the
   paragraph are the page's body. */
.fr-page .fr-work li::before {
  content: counter(fr-moment, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font: var(--fr-small) var(--font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  /* BOTH KEYWORDS, because `font` above is a shorthand and resets
     font-variant — which is where `.fr-page main`'s page-wide
     `lining-nums` goes. Declaring `tabular-nums` alone silently dropped
     it, so the two printed numeral runs in this file were the only
     figures on the page not guaranteed lining. Same pin as the
     foundation's literal line-height after the same shorthand. */
  font-variant-numeric: lining-nums tabular-nums;
  color: rgba(var(--acc-rgb, 56, 207, 255), 0.95);
}
.fr-page .fr-work-icon {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  justify-self: start;
  align-self: center;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgb(var(--acc-rgb, 56, 207, 255));
}
.fr-page .fr-work-icon .fr-ico { width: 24px; height: 24px; }
.fr-page .fr-work li > div {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
}
.fr-page .fr-work li h3 { margin: 0; }
.fr-page .fr-work li p {
  /* the heading and the paragraph are inside one div, so the li's own
     row-gap never reaches between them — measured flush, set here */
  margin: clamp(6px, 0.6vw, 9px) 0 clamp(22px, 2.2vw, 30px);
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* ---- THE COMPLETION RULE -----------------------------------------
   THE THING THAT WAS MISSING. Four pages of identical density do not
   read as a progression; they read as four cards. A strategy sheet is
   printed in four sections, and this is how much of it is inked at each
   stage: one section on 01, two on 02, three on 03, the whole sheet on
   04. It is one background cut by a four-segment mask, so the device is
   four ruled marks on paper and not a meter: nothing is rounded into a
   capsule, nothing is lit, and the ink is the page's own index accent,
   so the run also travels cyan -> teal -> indigo -> lime as it fills.

   `margin-top: auto` inside the page's body column pins it to the foot,
   and because the four pages are one grid row of equal height the four
   rules land on ONE baseline across the row. That is the alignment that
   makes the progression legible before a word is read. */
.fr-page .fr-work li > div::after {
  content: '';
  flex: none;
  margin-top: auto;
  height: 3px;
  transform-origin: left center;
  background-image: linear-gradient(90deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.92) 0 var(--fr-done, 25%),
    rgba(255, 255, 255, 0.085) var(--fr-done, 25%) 100%);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(25% - 7px), rgba(0, 0, 0, 0) calc(25% - 7px) 25%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(25% - 7px), rgba(0, 0, 0, 0) calc(25% - 7px) 25%);
}

/* ---- B · THEN WE STAY WITH YOU ------------------------------------
   It keeps its place directly below the four pages, and it is NOT
   another giant box. The strategy has been built; what continues is the
   relationship, so the treatment is a continuation edge rather than a
   container: one 3px marker running lime at the top, through teal, into
   cyan at the bottom — a gradient that reports direction, which is the
   only thing a gradient is allowed to do here. No fill, no ring, no
   contact shadow, nothing to make a second rectangle under the row. */
.fr-page .fr-work-then {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 18px);
  margin: clamp(52px, 5.2vw, 76px) 0 0;
  padding: clamp(4px, 0.5vw, 7px) 0 clamp(4px, 0.5vw, 7px) clamp(20px, 2vw, 28px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.fr-page .fr-work-then::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  border-radius: 1px;
  transform-origin: top center;
  background-image: linear-gradient(180deg,
    rgba(175, 221, 44, 0.95) 0%,
    rgba(68, 181, 156, 0.82) 54%,
    rgba(56, 207, 255, 0.34) 100%);
  box-shadow: inset -1px 0 0 rgba(3, 10, 22, 0.42);
}
.fr-page .fr-work-then > .fr-ico {
  width: 22px;
  height: 22px;
  margin-top: 5px;
  color: var(--fr-lime);
}
.fr-page .fr-work-then > span {
  max-width: 76ch;
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-work-then strong { font-weight: 700; color: var(--fr-ink); }

/* KEYFRAME 1 — frBuildSheet. One job: a strategy page is added into the
   portfolio, arriving from the bound side so the four read as a stack
   being built rather than as a row that was always finished. `from`-only,
   so the resting frame is the page itself and a browser that never runs
   the scroll hook shows the completed composition. */
@keyframes frBuildSheet {
  from { opacity: 0; transform: translate3d(-24px, 12px, 0); }
}
.fr-page .fr-work.revealed li {
  animation: frBuildSheet 0.78s var(--fr-ease) backwards;
}
.fr-page .fr-work.revealed li:nth-child(1) { animation-delay: 0.06s; }
.fr-page .fr-work.revealed li:nth-child(2) { animation-delay: 0.18s; }
.fr-page .fr-work.revealed li:nth-child(3) { animation-delay: 0.30s; }
.fr-page .fr-work.revealed li:nth-child(4) { animation-delay: 0.42s; }

/* KEYFRAME 2 — frBuildInk. The sheet is printed: the completion rule
   inks across each page a beat after that page is filed, so the four
   together read as one document being worked through rather than four
   cards appearing. Draws from the bound side, `from`-only, settles. */
@keyframes frBuildInk {
  from { opacity: 0; transform: scaleX(0.03); }
}
.fr-page .fr-work.revealed li > div::after {
  animation: frBuildInk 0.62s var(--fr-ease) backwards;
}
.fr-page .fr-work.revealed li:nth-child(1) > div::after { animation-delay: 0.30s; }
.fr-page .fr-work.revealed li:nth-child(2) > div::after { animation-delay: 0.42s; }
.fr-page .fr-work.revealed li:nth-child(3) > div::after { animation-delay: 0.54s; }
.fr-page .fr-work.revealed li:nth-child(4) > div::after { animation-delay: 0.66s; }

/* KEYFRAME 3 — frBuildMark. The continuation marker activates, once,
   AFTER the fourth page has landed: the strategy is built, then the
   relationship starts. It draws down from the top, which is the whole
   sentence. `from`-only; the marker's resting frame is its full length. */
@keyframes frBuildMark {
  from { opacity: 0; transform: scaleY(0); }
}
.fr-page .fr-work.revealed .fr-work-then::before {
  animation: frBuildMark 0.72s var(--fr-ease) 0.62s backwards;
}

/* ============================================================
   B · WHAT YOUR STRATEGY CAN COVER — AN OPEN STRATEGY SPREAD
   ------------------------------------------------------------
   THE HEAVY OUTER CONTAINER IS GONE. This was a 60px-padded slab of page
   stock — a box, with a ring and a contact shadow, wrapped around six
   more boxes. Nothing in it was an object; it was a group of text with a
   fill behind it, and it is the single biggest reason the section read
   box-heavy. What replaces it is LIGHT: one soft key light over the
   spread, so the pages sit in it rather than inside a drawn rectangle.

   AND THEN FOUR OF THE SIX CARDS WENT WITH IT. Varying the widths of
   six filled rectangles of one stock does not stop them reading as a
   services grid; hierarchy has to be in MATERIAL as well as scale. The
   spread now carries TWO pieces of paper — Cash flow & budget as the
   dominant open page (--fr-d3, the lighter face of the stock, four of
   six columns, with the paycheck printed in an allocation line across
   its foot) and Debt payoff filed beside it (--fr-d1, flat) — and the
   remaining four are PRINTED INDEX ENTRIES on the spread itself: a
   ruled line, a short accent marker on the rule, a 17px title, one line
   of description. No fill, no ring, nothing raised.
   Below 980 Debt payoff joins the index, so a phone sees ONE page and a
   five-entry index. Each entry keeps its own accent. Six objects at the
   start of this pass, two at the end of it.
   ============================================================ */
.fr-page .fr-scope {
  position: relative;
  z-index: 1;
  /* the one major break inside a section: the contract's own constant,
     which also steps 137 -> 88 -> 64 without a second clamp here */
  margin-top: var(--fr-pad);
  /* the slab's padding went with the slab: the spread uses the shell */
  padding: 0;
  border: 0;
  border-radius: 0;
  background-image: radial-gradient(74% 56% at 50% 4%,
    rgba(68, 181, 156, 0.09) 0%, transparent 70%);
  box-shadow: none;
}
.fr-page .fr-scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fr-gap);
  margin-bottom: clamp(36px, 3.8vw, 54px);
}
/* THE ONE font-size ON A SECTION HEADLINE IN THIS FILE, AND IT IS A
   CONTRACT VIOLATION THAT CANNOT BE FIXED FROM HERE. The three tiers are
   assigned in 00-foundation.css section 8 and nowhere else. This heading
   is a `span` in the markup — not an `h2`, and not one of the five named
   titles — so none of that block's six selectors reaches it, and leaving
   it unset drops a 56px section heading to inherited 19px body.
   It consumes the STANDARD TIER TOKEN rather than inventing a value, and
   it is measured identical to .fr-h2 and .fr-proof-title at every audited
   width: 56 / 56.16 / 49.92 / 46.02 / 39.936 / 36.
   THE CENTRAL FIX, for whoever owns the foundation: add
   `.fr-page .fr-scope-title` to the standard-tier group at
   00-foundation.css:624 and DELETE the `font-size` line below. The rest of
   this rule (serif family, 500, 1.07, -0.015em, balance) duplicates that
   group's values and should go with it. One edit there, one deletion here,
   same pass — either one alone changes how the page renders. */
.fr-page .fr-scope-title {
  display: block;
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fr-h2);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}
/* at this size the headline carries itself; the decorative glyph beside
   it was the last trace of a UI label */
.fr-page .fr-scope-title > .fr-ico { display: none; }
/* a printed note, not a second tab — the section already has one */
.fr-page .fr-scope-tag {
  display: block;
  padding-bottom: 0.45em;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}

.fr-page .fr-scope-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* THE SHARED PAGE RECIPE, which after this pass only TWO entries keep
   (and only one of them below 980): stock, a hairline, an index edge and
   the ladder's ground rung — a sheet lying flat on the spread. The four
   index entries below override every line of it.

   The leading `0 2px 0 -1px` is NOT an elevation — it is the foundation's
   own stock-thickness device, the same 2px the divider tab wears, which
   is what stops a sheet at the ground rung from reading as a flat fill.
   The height still comes from the ladder and nothing else. */
.fr-page .fr-scope-grid li {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 14px);
  margin: 0;
  padding: clamp(22px, 2vw, 28px) clamp(20px, 1.8vw, 26px) clamp(24px, 2.2vw, 30px);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 2px 0 -1px rgba(5, 12, 26, 0.92), var(--fr-d1);
  transition: transform 0.34s var(--fr-ease), box-shadow 0.34s var(--fr-ease);
}
.fr-page .fr-scope-grid li:hover {
  z-index: 2;
  box-shadow: 0 2px 0 -1px rgba(5, 12, 26, 0.92), var(--fr-d2);
  transform: var(--fr-raise-1);
}
.fr-page .fr-scope-grid li h3 {
  margin: 0;
  font: var(--fr-body) var(--font);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fr-ink);
}
.fr-page .fr-scope-grid li p {
  margin: 0;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-scope-icon {
  display: inline-flex;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgb(var(--acc-rgb, 56, 207, 255));
}
.fr-page .fr-scope-icon .fr-ico { width: 22px; height: 22px; }

/* ---- THE SUPPORTING ENTRIES ARE AN INDEX, NOT FOUR MORE CARDS -----
   SIX FILLED RECTANGLES OF THE SAME STOCK IS A SERVICES GRID, and
   varying their widths did not stop them reading as one. Hierarchy has
   to be in MATERIAL as well as scale, so the spread now carries exactly
   TWO pieces of paper — Cash flow & budget, the open page, and Debt
   payoff beside it — and the remaining four are printed index entries
   lying on the spread itself: a ruled line, a short accent marker on
   that rule, the title, the line of description. No fill, no ring, no
   contact shadow, nothing raised. Four rectangles leave the section at
   every width, the colour coding survives intact, and the eye now gets
   a clear read: two pages, then the index of what else the plan covers.
   The entries also set FLUSH LEFT, on the same edge as the headline and
   the open page, so the whole spread shares one left margin. */
.fr-page .fr-scope-grid li:nth-child(n+3) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(11px, 1.1vw, 14px);
  row-gap: clamp(5px, 0.6vw, 8px);
  align-items: start;
  align-content: start;
  padding: clamp(17px, 1.7vw, 22px) 0 0;
  border-top: 1px solid var(--fr-edge);
  border-radius: 0;
  background-image: none;
  box-shadow: none;
}
/* the index edge turns through ninety degrees: a short printed marker
   ON the rule, which is how a page index marks its own entries */
.fr-page .fr-scope-grid li:nth-child(n+3)::after {
  top: -1px;
  bottom: auto;
  width: clamp(26px, 2.6vw, 34px);
  height: 3px;
  border-radius: 0 0 2px 2px;
  background-image: linear-gradient(90deg,
    rgba(var(--acc-rgb, 175, 221, 44), 0.95) 0%,
    rgba(var(--acc-rgb, 175, 221, 44), 0.5) 100%);
  box-shadow: inset 0 -1px 0 rgba(3, 10, 22, 0.42);
}
.fr-page .fr-scope-grid li:nth-child(n+3) .fr-scope-icon { grid-column: 1; grid-row: 1; }
.fr-page .fr-scope-grid li:nth-child(n+3) .fr-ico { width: 19px; height: 19px; }
.fr-page .fr-scope-grid li:nth-child(n+3) h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.fr-page .fr-scope-grid li:nth-child(n+3) p { grid-column: 2; grid-row: 2; }
/* nothing lifts: these are printed on the spread, not lying on it */
.fr-page .fr-scope-grid li:nth-child(n+3):hover {
  box-shadow: none;
  transform: none;
}

/* THE SECOND PAGE, FILED BESIDE THE OPEN ONE. The dominant page is
   deliberately NOT spanned over two rows: that made it 440px tall around
   200px of content, and a tall even fill with nothing in the lower half
   is exactly the flat dark-blue box this pass exists to remove. It
   dominates by width, stock, rung and printed content instead. */
.fr-page .fr-scope-grid li:nth-child(2) { grid-column: 5 / span 2; grid-row: 1; }

/* THE CLOSING ENTRY. Full width at the foot of the spread and set as
   ONE line — glyph, label, note — against the three two-line entries
   above it, so the index closes on a different measure instead of on a
   fourth identical row. It is an index entry like the others: the rule,
   the marker, no fill. */
.fr-page .fr-scope-grid li:nth-child(6) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(16px, 1.6vw, 24px);
  padding: clamp(17px, 1.7vw, 22px) 0 clamp(4px, 0.4vw, 6px);
}
.fr-page .fr-scope-grid li:nth-child(6) h3 { white-space: nowrap; grid-column: 2; grid-row: 1; }
.fr-page .fr-scope-grid li:nth-child(6) p { grid-column: 3; grid-row: 1; }

/* THE DOMINANT OPEN PAGE — cash flow & budget. Four of six columns, the
   lighter face of the same stock, and the section's primary rung. It
   reads as an open page with a heading and a paragraph set down it,
   which is the relationship of a section rather than of a card: at this
   size a second internal column was fighting itself. */
.fr-page .fr-scope-grid li:nth-child(1) {
  grid-column: 1 / span 4;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 0;
  padding: clamp(32px, 3vw, 42px) clamp(30px, 2.8vw, 42px) clamp(34px, 3.2vw, 44px);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper-2) 0%, var(--fr-paper) 100%);
  box-shadow: var(--fr-d3);
}
.fr-page .fr-scope-grid li:nth-child(1):hover {
  box-shadow: var(--fr-d4);
  transform: var(--fr-raise-1);
}
.fr-page .fr-scope-grid li:nth-child(1) .fr-scope-icon { grid-row: 1; }
.fr-page .fr-scope-grid li:nth-child(1) .fr-scope-icon .fr-ico { width: 26px; height: 26px; }
.fr-page .fr-scope-grid li:nth-child(1) h3 {
  grid-row: 2;
  max-width: 24ch;
  margin-top: clamp(16px, 1.6vw, 22px);
  font-size: var(--fr-h3);
  line-height: 1.3;
}
.fr-page .fr-scope-grid li:nth-child(1) p {
  grid-row: 3;
  max-width: var(--fr-measure);
  margin-top: clamp(14px, 1.4vw, 18px);
  font: var(--fr-body) var(--font);
  line-height: 1.65;
}
/* THE ALLOCATION LINE, PRINTED ACROSS THE FOOT OF THE PAGE. The measure
   holds the paragraph to about two thirds of the page, which left the
   lower right of the largest object on the spread empty — a wide dark
   area with nothing in it, which is the failure this whole pass exists
   to remove. What fills it is the page's own printed content: one ruled
   line with a paycheck divided along it, cash/operating cyan, then the
   protected share in teal, then what is left for goals in lime. The
   colours are the contract's and they carry the meaning; the faint
   track underneath is the unruled remainder of the line.
   It is 7px of printed rule on paper. It is not a dial, it does not
   read a value back, and nothing is lit. */
.fr-page .fr-scope-grid li:nth-child(1)::before {
  content: '';
  grid-row: 4;
  align-self: end;
  margin-top: clamp(28px, 2.8vw, 40px);
  height: 7px;
  border-radius: 1px;
  transform-origin: left center;
  background-image:
    linear-gradient(90deg,
      rgba(2, 193, 255, 0.88) 0 36%,
      rgba(0, 0, 0, 0) 36% 38.5%,
      rgba(68, 181, 156, 0.88) 38.5% 66%,
      rgba(0, 0, 0, 0) 66% 68.5%,
      rgba(175, 221, 44, 0.88) 68.5% 88%,
      rgba(0, 0, 0, 0) 88% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0 100%);
  box-shadow: inset 0 -1px 0 rgba(3, 10, 22, 0.45);
}

/* KEYFRAME 4 — frBuildAlloc. The paycheck is divided along the line,
   once, after the page has been laid onto the spread. Left to right,
   because that is the order the money is committed in. Settles. */
@keyframes frBuildAlloc {
  from { opacity: 0.1; transform: scaleX(0.02); }
}
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(1)::before {
  animation: frBuildAlloc 0.86s var(--fr-ease) 0.42s backwards;
}

/* frBuildSheet, REUSED rather than re-cut: the pages are laid onto the
   spread in reading order, dominant page first. */
.fr-page .fr-scope.revealed .fr-scope-grid li {
  animation: frBuildSheet 0.78s var(--fr-ease) backwards;
}
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(1) { animation-delay: 0.06s; }
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(2) { animation-delay: 0.15s; }
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(3) { animation-delay: 0.21s; }
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(4) { animation-delay: 0.27s; }
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(5) { animation-delay: 0.33s; }
.fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(6) { animation-delay: 0.39s; }

/* ============================================================
   C · THE ACTION PLAN — ELEVATED, NOT OVERHAULED
   ------------------------------------------------------------
   This section was already one of the strongest and it keeps its
   composition, its flagship headline tier (assigned centrally, in the
   foundation, not here) and its fixed mobile order. Four things changed
   and nothing else: the artifact now names the ladder and RISES ONE RUNG
   as the section is reached; the three tabbed sheets are raised pages
   with real tab thickness; the intro paragraph is set brighter and more
   openly; and "Inside your plan" became ONE dimensional object — the
   plan's contents page, with 01 to 06 activating in sequence — instead
   of six loose rows. Six boxes would have been the wrong answer.
   ============================================================ */
.fr-page .fr-plan {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: clamp(48px, 5vw, 84px);
  align-items: center;
}
.fr-page .fr-plan-visual {
  position: relative;
  /* the three sheets step out to the right; this is their room */
  padding-right: clamp(18px, 2.2vw, 36px);
}
.fr-page .fr-doc {
  position: relative;
  width: min(100%, 580px);
  margin-inline: auto;
}
/* two quiet key lights behind the paper — environment, not a glow on the
   object. They give the artifact a warm side and a cool side so it reads
   as a solid thing in a room, and they do not move. */
.fr-page .fr-doc-glow {
  position: absolute;
  z-index: 0;
  inset: -16% -20%;
  pointer-events: none;
  background:
    radial-gradient(50% 46% at 54% 54%, rgba(175, 221, 44, 0.11) 0%, transparent 74%),
    radial-gradient(40% 38% at 24% 22%, rgba(56, 207, 255, 0.085) 0%, transparent 72%);
}
/* THE ARTIFACT. It is the page's largest object, so it names the
   section's primary rung at rest and the emphasis rung once the reader
   reaches it — the ladder's d4 is defined as hover OR scroll emphasis,
   and this is the scroll case. One rung, 3px, over 0.9s: the plan
   activates. No perspective, no parallax, no eleven-edge paper block. */
.fr-page .fr-doc img {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 2px 6px 6px 2px;
  box-shadow: var(--fr-d3);
  transition: box-shadow 0.9s var(--fr-ease) 0.22s, transform 0.9s var(--fr-ease) 0.22s;
}
.fr-page .fr-plan-visual.revealed .fr-doc img {
  box-shadow: var(--fr-d4);
  transform: var(--fr-raise-1);
}
/* THE THREE SHEETS, each with its divider tab showing past the cover,
   each a raised portfolio page on the ladder. The tab hues are the
   contract's accents (teal, lime, cyan) carried on a local property, so
   nothing here assigns --acc or --acc-rgb. */
.fr-page .fr-doc-sheet {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 2px 6px 6px 2px;
  box-shadow: var(--fr-d2);
  transition: transform 0.9s var(--fr-ease) 0.18s;
}
.fr-page .fr-doc-sheet--1 { z-index: 3; --fr-tab-rgb: 68, 181, 156; --fr-sheet-x: 10px; --fr-sheet-y: 9px; }
.fr-page .fr-doc-sheet--2 { z-index: 2; --fr-tab-rgb: 175, 221, 44; --fr-sheet-x: 20px; --fr-sheet-y: 18px; }
.fr-page .fr-doc-sheet--3 { z-index: 1; --fr-tab-rgb: 56, 207, 255; --fr-sheet-x: 30px; --fr-sheet-y: 27px; }
/* the tab has thickness, the same 2px device the foundation's divider
   tab uses — seen from slightly above, so the tab stands off the sheet */
.fr-page .fr-doc-sheet::before {
  content: '';
  position: absolute;
  right: -9px;
  width: 9px;
  height: clamp(54px, 5vw, 72px);
  border-radius: 0 3px 3px 0;
  /* THE CATCH, SHORTENED. This was 0.3 white fading over the top 36% —
     on a 54px tab that is a 19px wash down a saturated lime chip, which
     photographs as gloss on a plastic pill rather than as light on a cut
     edge. The foundation's own device is ONE pixel at 0.4; this is the
     same reading at tab scale: brighter, and over the top 13% only, so
     the tab is a printed index edge catching the room light and nothing
     is bevelled. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 13%),
    linear-gradient(180deg,
      rgba(var(--fr-tab-rgb), 0.95) 0%,
      rgba(var(--fr-tab-rgb), 0.6) 100%);
  box-shadow:
    inset 1px 0 0 rgba(3, 10, 22, 0.42),
    0 2px 0 -1px rgba(5, 12, 26, 0.9);
}
.fr-page .fr-doc-sheet--1::before { top: 12%; }
.fr-page .fr-doc-sheet--2::before { top: 34%; }
.fr-page .fr-doc-sheet--3::before { top: 56%; }
/* the sheets settle out from under the cover, once, on reveal. A
   transition, so there is no keyframe to spend. */
.fr-page .fr-plan-visual.revealed .fr-doc-sheet { transform: translate3d(var(--fr-sheet-x), var(--fr-sheet-y), 0); }
.fr-page .fr-doc-caption {
  margin: clamp(26px, 2.6vw, 36px) auto 0;
  max-width: 50ch;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-align: center;
  text-wrap: pretty;
}

/* ---- THE INTRO TYPOGRAPHY -----------------------------------------
   No new size — the page has one body size and this is it. What changed
   is the setting: the paragraph is given the section's own ink rather
   than the quieter secondary, a slightly tighter measure so it sets as a
   block under the flagship headline, and more air above it. */
.fr-page .fr-plan-copy { position: relative; }
.fr-page .fr-plan-copy > .fr-body {
  max-width: 54ch;
  margin-top: clamp(20px, 2vw, 28px);
  color: rgba(226, 238, 255, 0.9);
}
.fr-page .fr-plan-list-title {
  margin: clamp(40px, 4vw, 56px) 0 clamp(14px, 1.4vw, 20px);
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}

/* ---- INSIDE YOUR PLAN — ONE CONTENTS PAGE, SIX RULED ENTRIES ------
   The artifact beside it is the cover; this is the page behind it. ONE
   object on the ladder's raised-page rung, with the plan's lime on its
   bound edge and the six entries ruled across it — not six cards, which
   is what "more dimensional" must not mean, and not six loose rows on
   the ground, which is what it was.

   The dimension in the progression is in the numerals: 01 to 06 are one
   gradient sampled at six points, cyan through teal into lime, so the
   sequence is legible as a progression before a word is read. */
.fr-page .fr-plan-list {
  position: relative;
  margin: 0;
  padding: clamp(6px, 0.8vw, 10px) clamp(24px, 2.3vw, 32px) clamp(16px, 1.6vw, 22px);
  border-radius: 2px 6px 6px 2px;
  /* MORE PAPER, which is what this section was asked for. Three things,
     all of them material: an inner shadow down the bound side so the
     page reads as held in the portfolio rather than floating; one more
     sheet filed under it, drawn with the foundation's own thickness
     device; and the ladder rung it already had. */
  box-shadow:
    inset 11px 0 18px -15px rgba(2, 8, 20, 0.8),
    0 9px 0 -2px var(--fr-paper-2),
    0 9px 0 -1px var(--fr-edge),
    var(--fr-d2);
  list-style: none;
}
/* THE CONTENTS PAGE'S OWN DIVIDER TAB. The cover beside it carries
   three; this is the fourth, so the two objects read as pages of ONE
   organizer rather than as a photograph next to a list. Lime, because
   this is the plan itself. It stands in the shell's gutter, never past
   the viewport, and steps down with the gutter on a phone. */
.fr-page .fr-plan-list::after {
  content: '';
  position: absolute;
  right: -8px;
  top: clamp(28px, 3vw, 46px);
  width: 8px;
  height: clamp(46px, 4.4vw, 64px);
  border-radius: 0 3px 3px 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 13%),
    linear-gradient(180deg, rgba(175, 221, 44, 0.95) 0%, rgba(175, 221, 44, 0.6) 100%);
  box-shadow:
    inset 1px 0 0 rgba(3, 10, 22, 0.42),
    0 2px 0 -1px rgba(5, 12, 26, 0.9);
}
/* the bound edge: the plan's own lime, inlaid, no halo. The shared index
   rule draws it; the markup gives this element no data-accent, so it
   resolves to the programme's lime by the rule's own fallback. */
.fr-page .fr-plan-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  column-gap: clamp(13px, 1.3vw, 18px);
  align-items: start;
  margin: 0;
  padding: clamp(15px, 1.5vw, 19px) 0;
  list-style: none;
}
/* a printed rule between entries — the page's only drawn line */
.fr-page .fr-plan-list li + li { border-top: 1px solid var(--fr-edge); }
.fr-page .fr-plan-list li::before {
  content: attr(data-step);
  padding-top: 0.3em;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* same pin as the folio number: `font` resets font-variant */
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fr-lime);
}
/* THE PROGRESSION. Six samples of one cyan-to-lime run: the step
   numbers report where in the plan you are, which is what a gradient is
   for. Nothing is lit, nothing glows; these are printed numerals. */
.fr-page .fr-plan-list li:nth-child(1)::before { color: rgb(56, 207, 255); }
.fr-page .fr-plan-list li:nth-child(2)::before { color: rgb(62, 199, 209); }
.fr-page .fr-plan-list li:nth-child(3)::before { color: rgb(68, 181, 156); }
.fr-page .fr-plan-list li:nth-child(4)::before { color: rgb(110, 194, 120); }
.fr-page .fr-plan-list li:nth-child(5)::before { color: rgb(145, 211, 82); }
.fr-page .fr-plan-list li:nth-child(6)::before { color: rgb(175, 221, 44); }
.fr-page .fr-plan-node {
  display: inline-flex;
  padding-top: 0.34em;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--fr-ink-2);
}
.fr-page .fr-plan-node .fr-ico { width: 20px; height: 20px; }
.fr-page .fr-plan-list li > div > strong {
  display: block;
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  font-weight: 700;
  color: var(--fr-ink);
}
.fr-page .fr-plan-list li > div > span {
  display: block;
  margin-top: 5px;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
/* the plan and proof headlines are not `.fr-h2` in the markup, so the
   foundation's line reveal is pointed at them here rather than re-cut */
.fr-page .fr-plan-copy.revealed .fr-plan-title > .fr-line,
.fr-page .fr-proof.revealed .fr-proof-title > .fr-line {
  animation: frRise 0.78s var(--fr-ease) 0.05s backwards;
}
.fr-page .fr-plan-copy.revealed .fr-plan-title > .fr-line:nth-child(2),
.fr-page .fr-proof.revealed .fr-proof-title > .fr-line:nth-child(2) { animation-delay: 0.17s; }

/* KEYFRAME 5 — frPlanStep. 01 to 06 activate in sequence down the
   contents page, and the same mechanism prints the six real inputs onto
   the personalized page in section D, where it is the comparison
   activating. `from`-only: every entry's resting frame is set, so a
   browser that never runs the scroll hook shows the whole list. */
@keyframes frPlanStep {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
}
.fr-page .fr-plan-copy.revealed .fr-plan-list li,
.fr-page .fr-plan-copy.revealed .fr-plan-list li:nth-child(1),
.fr-page .fr-proof.revealed .fr-proof-inputs li:nth-child(1) { animation-delay: 0.14s; }
.fr-page .fr-plan-copy.revealed .fr-plan-list li:nth-child(2),
.fr-page .fr-proof.revealed .fr-proof-inputs li:nth-child(2) { animation-delay: 0.22s; }
.fr-page .fr-plan-copy.revealed .fr-plan-list li:nth-child(3),
.fr-page .fr-proof.revealed .fr-proof-inputs li:nth-child(3) { animation-delay: 0.30s; }
.fr-page .fr-plan-copy.revealed .fr-plan-list li:nth-child(4),
.fr-page .fr-proof.revealed .fr-proof-inputs li:nth-child(4) { animation-delay: 0.38s; }
.fr-page .fr-plan-copy.revealed .fr-plan-list li:nth-child(5),
.fr-page .fr-proof.revealed .fr-proof-inputs li:nth-child(5) { animation-delay: 0.46s; }
.fr-page .fr-plan-copy.revealed .fr-plan-list li:nth-child(6),
.fr-page .fr-proof.revealed .fr-proof-inputs li:nth-child(6) { animation-delay: 0.54s; }

/* ============================================================
   D · WHY IT'S DIFFERENT
   "Built from your real numbers. / Not someone else's template."
   THE CONTRAST MUST BE OBVIOUS BEFORE A WORD IS READ. On the left, a
   generic blank planning template: the same stock but unprinted and
   fading into the ground, a title stub and a subtitle stub nobody filled
   in, a field of ruled lines nobody wrote on, lying flat on the ground
   rung, held back to 80% and set down a fraction of a degree off square
   — a sheet somebody handed over and nobody used. On the right, the
   personalized page: lighter stock, the section's primary rung, lime on
   its bound edge, six real inputs printed in sequence. Two pieces of
   paper. No charts, no dashboards, nothing to read off a graph.
   ============================================================ */
/* ONE COLUMN. The second column existed only to stand the blank
   template beside the personalized page; with the template deleted
   there is no contrast to lay out, so the real page simply takes the
   measure and the space the template was holding. */
.fr-page .fr-proof {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  align-items: start;
  margin-top: var(--fr-pad);
}
.fr-page .fr-proof > .fr-eyebrow { grid-column: 1 / -1; grid-row: 1; }
.fr-page .fr-proof-title { grid-column: 1 / -1; grid-row: 2; }
.fr-page .fr-proof-body {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  max-width: var(--fr-measure);
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* SIX INPUT SLIPS, TUCKED UNDER A STRATEGY PAGE EDGE
   ------------------------------------------------------------
   DELETED: the one large sheet. Six ruled rows inside a single raised
   rectangle is the exact object this page cannot afford another of —
   it was a 420px slab of dark stock holding six short labels, and at
   390 it was the longest unbroken rectangle in the section. What the
   copy actually describes is six things a client HANDS OVER, so they
   are six things: small paper slips, each with its own stock,
   thickness and lime index notch, in two compact rows of three.

   The page they feed into is real and visible: `::before` is the foot
   edge of a strategy page lying across the top of them — stock, a lit
   top edge, the plan's lime on its bound corner, and a tight shadow
   cast DOWN onto the slips. The slips' top row starts 7px above the
   content box, so their top edges pass under it. Nothing is drawn
   around the group; the group is held by the page edge. */
.fr-page .fr-proof-inputs::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fr-edge-h);
  pointer-events: none;
  border-radius: 3px 3px 0 0;
  /* lit on its top face, falling away into the cut edge, with the plan's
     lime inlaid on the bound corner. The slips are the other way up
     (dark top, light foot), so the two materials separate rather than
     merging into one block, and the hard shadow under this edge lands
     on the row of slips whose tops have gone under it. */
  background-image:
    linear-gradient(90deg, rgba(175, 221, 44, 0.95) 0 3px, rgba(175, 221, 44, 0) 3px),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.2) 0 1px,
      rgba(255, 255, 255, 0.06) 1px 5px,
      rgba(255, 255, 255, 0) 5px),
    linear-gradient(180deg, var(--fr-paper-2) 0%, #0e1a30 100%);
  box-shadow:
    inset 0 -1px 0 rgba(2, 8, 20, 0.9),
    0 9px 15px -7px rgba(2, 8, 20, 1);
}
/* the slip's index notch — the same inlaid 3px every page in this file
   carries, at slip scale */
.fr-page .fr-proof-inputs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  border-radius: 1px 0 0 1px;
  background-image: linear-gradient(180deg,
    rgba(175, 221, 44, 0.92) 0%, rgba(175, 221, 44, 0.52) 100%);
  box-shadow: inset -1px 0 0 rgba(3, 10, 22, 0.42);
}
.fr-page .fr-proof-inputs .fr-ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--fr-lime);
}

/* ============================================================
   THE DIFFERENCE, SHOWN AS A TRANSFORMATION
   Six slips listed what goes in but never what it replaces, so the
   section stated a claim the visual did not make. Both sides are
   here now: what most budgets start from, set back and struck
   through, and what this starts from, lit and specific.
   ============================================================ */
.fr-page .fr-sec--plan .fr-proof-swap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  column-gap: clamp(26px, 3vw, 56px);
  row-gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(26px, 2.8vw, 38px);
}
.fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] { grid-column: 1; grid-row: 1 / span 2; }
.fr-page .fr-sec--plan .fr-proof-side[data-side="real"]    { grid-column: 2; grid-row: 2; }
.fr-page .fr-sec--plan .fr-proof-sk {
  margin: 0 0 clamp(11px, 1.2vw, 15px);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(214, 231, 252, 0.5);
}
.fr-page .fr-sec--plan .fr-proof-side[data-side="real"] .fr-proof-sk {
  color: rgba(175, 221, 44, 0.95);
}
.fr-page .fr-sec--plan .fr-proof-generic,
.fr-page .fr-sec--plan .fr-proof-inputs {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* what it is NOT built from: set back, and ruled through once */
.fr-page .fr-sec--plan .fr-proof-generic li {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: clamp(5px, 0.6vw, 8px) 0;
  font: var(--fr-body) var(--font);
  line-height: 1.5;
  color: rgba(214, 231, 252, 0.4);
}
.fr-page .fr-sec--plan .fr-proof-generic li::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(214, 231, 252, 0.3);
}
/* the turn between the two columns */
.fr-page .fr-sec--plan .fr-proof-turn {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: var(--fr-ink);
}
.fr-page .fr-sec--plan .fr-proof-turn::before {
  content: '';
  flex: none;
  width: clamp(26px, 3vw, 54px);
  height: 1px;
  background-image: linear-gradient(90deg,
    rgba(175, 221, 44, 0) 0%, rgba(175, 221, 44, 0.9) 100%);
}
/* what it IS built from: each one a filed line on the strategy page */
.fr-page .fr-sec--plan .fr-proof-inputs li {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 14px);
  padding: clamp(8px, 0.9vw, 11px) 0;
  border-top: 1px solid var(--fr-edge);
  font: var(--fr-body) var(--font);
  line-height: 1.45;
  color: var(--fr-ink);
}
.fr-page .fr-sec--plan .fr-proof-inputs li:first-child { border-top: 0; }
.fr-page .fr-sec--plan .fr-proof-inputs li .fr-ico {
  flex: none;
  width: 18px; height: 18px;
  color: var(--fr-lime);
}

/* ============================================================
   WHY IT'S DIFFERENT — GIVING BOTH SIDES SOMETHING TO BE
   The claim was right and the design under it was bare: three
   struck sentences floating on the background, a thin rule, then
   six more sentences floating on the background. Nothing on the
   page was an object, so nothing could be set against anything.

   Now the contrast is between two pieces of paper:
     · what most budgets start from is a GENERIC HANDOUT — flat,
       desaturated, ruled, dog-eared, lying there with its lines
       crossed out. Printed for anyone.
     · what this starts from is YOUR STRATEGY PAGE — raised stock,
       bound on a cyan-to-lime edge, every line a filed entry with
       its own marker. Printed for one person.
   Same two lists, same words. The page now makes the argument the
   paragraph above it is making.
   ============================================================ */

/* ---- THE GENERIC HANDOUT ---- */
.fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] {
  position: relative;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px)
           clamp(20px, 2.2vw, 28px);
  border-radius: 2px;
  background-image:
    /* the ruled stock of something run off a printer */
    repeating-linear-gradient(180deg,
      rgba(214, 231, 252, 0.06) 0 1px, rgba(0, 0, 0, 0) 1px 12px),
    linear-gradient(168deg, rgba(36, 44, 62, 0.72), rgba(25, 31, 46, 0.72));
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(214, 231, 252, 0.07);
}
/* the dog-eared corner: handled, kept, never used */
.fr-page .fr-sec--plan .fr-proof-side[data-side="generic"]::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 17px; height: 17px;
  background-image:
    linear-gradient(225deg,
      rgba(11, 18, 32, 0.96) 49%, rgba(0, 0, 0, 0) 50%),
    linear-gradient(225deg,
      rgba(0, 0, 0, 0) 48%, rgba(214, 231, 252, 0.14) 49%, rgba(0, 0, 0, 0) 51%);
}
/* `display: table` shrinks each line to its own words, so the rule at
   left: 0 / right: 0 strikes the text and stops — it does not run the
   width of the sheet */
.fr-page .fr-sec--plan .fr-proof-generic li {
  display: table;
  width: auto;
  color: rgba(214, 231, 252, 0.38);
}

/* ---- THE TURN ---- */
.fr-page .fr-sec--plan .fr-proof-turn::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-image: linear-gradient(90deg,
    rgba(175, 221, 44, 0.45) 0%, rgba(175, 221, 44, 0) 100%);
}

/* ---- YOUR STRATEGY PAGE ---- */
.fr-page .fr-sec--plan .fr-proof-side[data-side="real"] {
  position: relative;
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 28px)
           clamp(10px, 1.2vw, 14px) clamp(24px, 2.6vw, 32px);
  border-radius: 3px 12px 12px 3px;
  background-image:
    /* the bound edge, running cyan into lime down the page */
    linear-gradient(180deg,
      rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 55%,
      rgba(175, 221, 44, 0.95) 100%),
    linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 140px),
    linear-gradient(110deg, rgba(175, 221, 44, 0.06), rgba(175, 221, 44, 0) 60%),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  background-size: 4px 100%, 1px 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 4px 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: var(--fr-d3);
}
/* every input is a filed entry with its own marker, not a bullet */
.fr-page .fr-sec--plan .fr-proof-inputs li .fr-ico {
  width: 15px; height: 15px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 8px;
  color: var(--fr-lime);
  background-image: linear-gradient(160deg,
    rgba(175, 221, 44, 0.17), rgba(175, 221, 44, 0.05));
  box-shadow: inset 0 0 0 1px rgba(175, 221, 44, 0.28);
}
.fr-page .fr-sec--plan .fr-proof-inputs li {
  padding: clamp(9px, 1vw, 12px) 0;
  border-top-color: rgba(214, 231, 252, 0.09);
}

/* the handout spans both rows beside a much taller page, so at the top
   of that span it left a dead quarter of the section. Centred, the two
   objects weigh against each other instead. */
@media (min-width: 861px) {
  .fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] { align-self: center; }
}

/* FR-CLUSTER1-BLOCK:START */
/* Cluster 1 polish: BUILT AROUND YOU.
   Lives in this file, not in an appendix elsewhere, because the build
   concatenates the part files in order and these rules must come after
   the equal-specificity rules they replace. */
/* ------------------------------------------------------------
   3. BUILT AROUND YOU — PHYSICAL DEPTH, SAME CONTENT
   The four stages keep their copy and their order. What changes
   is construction: a filed sheet behind each one, a lit cut edge,
   a stronger index, and one trace along the foot on reveal.
   ------------------------------------------------------------ */
.fr-page .fr-sec--build .fr-work li {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(214, 238, 255, 0.1),
    inset 0 0 0 1px rgba(150, 190, 235, 0.11),
    0 3px 0 -1px rgba(10, 19, 34, 0.9),
    0 22px 40px -28px rgba(2, 8, 20, 0.95);
}
/* the sheet filed behind the stage */
.fr-page .fr-sec--build .fr-work li::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 7px; right: -7px;
  top: 8px; bottom: -8px;
  border-radius: inherit;
  background-image: linear-gradient(158deg,
    rgba(32, 48, 76, 0.42) 0%, rgba(16, 26, 44, 0.42) 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 190, 235, 0.08);
}
/* the lit cut edge along the foot, drawn once */
.fr-page .fr-sec--build .fr-work li::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  border-radius: 0 0 2px 2px;
  background-image: var(--fr-trace);
  transform-origin: left center;
  pointer-events: none;
}
.fr-page .fr-sec--build .fr-work.revealed li::after,
.fr-page .fr-sec--build .revealed .fr-work li::after {
  animation: frTraceX 0.9s var(--fr-ease) 1 both;
}
.fr-page .fr-sec--build .fr-work li:nth-child(1)::after { animation-delay: 0.15s; }
.fr-page .fr-sec--build .fr-work li:nth-child(2)::after { animation-delay: 0.30s; }
.fr-page .fr-sec--build .fr-work li:nth-child(3)::after { animation-delay: 0.45s; }
.fr-page .fr-sec--build .fr-work li:nth-child(4)::after { animation-delay: 0.60s; }
/* FR-CLUSTER1-BLOCK:END */

/* FR-CLUSTER2-BLOCK:START */
/* ============================================================
   WHAT IT IS — A DESKTOP BREATHER THAT IS NO LONGER EMPTY
   DESKTOP ONLY (>= 900px). The mobile composition is untouched.

   The typography was already right, so nothing here is a card and
   nothing is a container. Three marks only: a strategy line down
   the left that gives the column a spine, a low light that carries
   across the gutter so the statement and its answer belong to one
   another, and a gradient rule under the word the section turns on.
   ============================================================ */
@media (min-width: 900px) {
  .fr-page .fr-sec--define .fr-define {
    position: relative;
  }
  /* the strategy line: down the left of the statement, fading out
     rather than stopping, so it reads as a margin rule and not as
     the edge of a box */
  .fr-page .fr-sec--define .fr-define-head {
    position: relative;
    padding-left: clamp(26px, 2.6vw, 40px);
  }
  .fr-page .fr-sec--define .fr-define-head::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 2px;
    height: calc(100% + clamp(40px, 6vw, 96px));
    border-radius: 2px;
    background-image: linear-gradient(180deg,
      rgba(56, 207, 255, 0.85) 0%,
      rgba(68, 181, 156, 0.5) 42%,
      rgba(175, 221, 44, 0.18) 72%,
      rgba(175, 221, 44, 0) 100%);
    transform-origin: top center;
  }
  .fr-page .fr-sec--define .fr-define.revealed .fr-define-head::before {
    animation: frTraceY 1.1s var(--fr-ease) 0.2s 1 both;
  }
  /* the low light that carries the statement across to its answer */
  .fr-page .fr-sec--define .fr-define::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -4%; right: -4%;
    top: 4%; bottom: -14%;
    pointer-events: none;
    background-image:
      radial-gradient(52% 40% at 22% 34%, rgba(56, 207, 255, 0.055) 0%, rgba(56, 207, 255, 0) 70%),
      radial-gradient(44% 38% at 74% 44%, rgba(175, 221, 44, 0.04) 0%, rgba(175, 221, 44, 0) 70%);
  }
  /* the answer the section turns on, underlined once */
  .fr-page .fr-sec--define .fr-define-head em {
    position: relative;
  }
  .fr-page .fr-sec--define .fr-define-head em::after {
    content: '';
    position: absolute;
    left: 0.04em; right: 0.08em;
    bottom: -0.1em;
    height: 2px;
    border-radius: 2px;
    background-image: linear-gradient(90deg,
      rgba(175, 221, 44, 0) 0%, rgba(175, 221, 44, 0.9) 22%,
      rgba(68, 181, 156, 0.8) 72%, rgba(56, 207, 255, 0) 100%);
    transform-origin: left center;
  }
  .fr-page .fr-sec--define .fr-define.revealed .fr-define-head em::after {
    animation: frTraceX 0.9s var(--fr-ease) 0.55s 1 both;
  }
  /* the explanation settles against the statement instead of floating */
  .fr-page .fr-sec--define .fr-define-body {
    align-self: start;
    padding-top: clamp(10px, 1.4vw, 22px);
  }
}
@keyframes frTraceY {
  from { transform: scaleY(0); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   ACTION PLAN — THE DESKTOP STICKY COMPOSITION
   MEASURED: .fr-plan is a two-column grid with `align-items:
   center`, the artifact is 859px tall and the copy column 1372px,
   so centring left exactly (1372-859)/2 = 257px of dead air above
   the artifact. That is the gap, and `align-items` is the cause —
   not a margin and not the artifact.

   Starting the artifact at the top of the row fixes the alignment;
   making it sticky then uses the 513px the copy column has over
   it. The nav is `position: fixed` at 81px, so the offset clears
   it with room to spare. The section is `overflow: clip`, which
   does not create a scroll container but DOES bound the sticky
   element — which is exactly the release behaviour wanted: the
   artifact is let go as the section ends.
   ============================================================ */
@media (min-width: 1024px) {
  .fr-page .fr-sec--plan .fr-plan {
    align-items: start;
  }
  .fr-page .fr-sec--plan .fr-plan-visual {
    position: sticky;
    top: clamp(104px, 10vh, 132px);
    align-self: start;
  }
}
/* FR-CLUSTER2-BLOCK:END */

/* FR-CLUSTER3-BLOCK:START */
/* ============================================================
   WHY IT'S DIFFERENT — THE CONTRAST HAS TO BE AUDIBLE
   MEASURED FIRST, both widths:

     "Most budgets start from"        11px / 700 / #788497  4.24:1
     "Your Financial Reset starts from" 22px / serif italic / --fr-ink
     Averages, Generic rules…, …template  19px / rgba(…,0.38)  3.04:1

   So the question was whispered at 11px and the answer spoken at
   22px, and the three things being rejected were set at 3.04:1 —
   below AA, and below the point where a reader bothers to read
   them at all. The section was arguing with itself.

   Now: the two LEAD-INS are the same object in two colours, and
   the rejected items are properly legible and then visibly struck
   out. You cannot dismiss something the reader never read.
   ============================================================ */

/* ---- THE TWO LEAD-INS, ONE TREATMENT ---- */
.fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] .fr-proof-sk {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(13px, 1.4vw, 18px);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  /* readable, and clearly the rejected side: a muted warm grey-red
     rather than a neutral at half alpha */
  color: #d6a79e;
}
/* the rule that runs out of it, matching the turn's on the other side */
.fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] .fr-proof-sk::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-image: linear-gradient(90deg,
    rgba(214, 167, 158, 0.5) 0%, rgba(214, 167, 158, 0) 100%);
}
.fr-page .fr-sec--plan .fr-proof-turn {
  font-weight: 500;
  color: #eaf2ff;
}

/* ---- THE REJECTED ITEMS ARE READ, THEN STRUCK ---- */
.fr-page .fr-sec--plan .fr-proof-generic li {
  font-weight: 450;
  color: rgba(235, 242, 252, 0.9);
}
/* the strike: a controlled deep coral, drawn once, left to right.
   `.fr-proof-generic li` is display:table, so it is exactly as wide
   as its own words and the rule stops where the sentence stops. */
.fr-page .fr-sec--plan .fr-proof-generic li::after {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    rgba(201, 84, 71, 0.95) 0%, rgba(214, 105, 92, 0.95) 100%);
  transform-origin: left center;
  /* THE RESTING STATE IS STRUCK. Written the other way round — base
     scaleX(0), drawn in by the reveal — the strike simply never appears
     for anyone whose reveal does not fire: no JS, an observer that
     misses on a fast scroll, or a reduced-motion reader. The default
     has to be the finished state; the animation only replays it. */
  transform: scaleX(1);
}
.fr-page .fr-sec--plan .fr-proof.revealed .fr-proof-generic li::after {
  animation: frTraceX 0.52s var(--fr-ease) 1 both;
}
.fr-page .fr-sec--plan .fr-proof.revealed .fr-proof-generic li:nth-child(1)::after { animation-delay: 0.45s; }
.fr-page .fr-sec--plan .fr-proof.revealed .fr-proof-generic li:nth-child(2)::after { animation-delay: 0.62s; }
.fr-page .fr-sec--plan .fr-proof.revealed .fr-proof-generic li:nth-child(3)::after { animation-delay: 0.79s; }

/* the handout stays the quieter object; only its WORDS come up */
.fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] {
  background-image:
    repeating-linear-gradient(180deg,
      rgba(214, 231, 252, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 12px),
    linear-gradient(168deg, rgba(42, 44, 58, 0.66), rgba(28, 30, 42, 0.66));
}

/* ---- AND THE ANSWER CLOSES IT ---- */
.fr-page .fr-sec--plan .fr-proof-side[data-side="real"] .fr-proof-sk {
  color: #c7ee62;
}
.fr-page .fr-sec--plan .fr-proof-inputs li {
  color: #eaf2ff;
}
/* FR-CLUSTER3-BLOCK:END */

/* =========================================================
   60 · FORWARD — THE RELATIONSHIP · REVIEW & ADJUST · WHO IT'S FOR
   ---------------------------------------------------------
   MOBILE-FIRST REBUILD. The copy, the section order and the Financial
   Strategy Organizer identity are approved and unchanged. What changed
   is the COMPOSITION of all four jobs, because the previous pass left
   three of them reading as stacked rectangles on a phone.

   WHAT WAS WRONG, MEASURED ON THE BEFORE CAPTURES
     A  Steven sat in one frame and his words sat in a SECOND rectangle
        floating beside it, with the printed quotation mark orphaned in
        the dark between them. The brief asks for the quote to be
        CONNECTED to him. Two objects cannot be connected by a gap.
     B  The three "on your own" sheets were stretched to the height of
        the rows opposite, so they read as three tall empty boxes rather
        than as loose slips, and on a phone the whole comparison was
        three boxes above one box with no pivot between them.
     C  Four equal pages in a row on desktop, five full-width rectangles
        in a column on a phone. Box box box box box — the exact failure.
     D  Editorially right and 1900px tall: a zigzag with a 500px void
        beside every entry on desktop, and a flat uniform list of six
        identical units on a phone.

   WHAT THESE FOUR JOBS ARE NOW
     A · ONE PROFILE INSERT. Not a frame plus a card: a single premium
         insert of organizer stock — portrait inlaid at the left behind
         a cut edge, name and title printed under it, a vertical FOLD
         down the middle of the page, his words printed on the other
         half of the SAME sheet, a teal→cyan bound spine, a fore-edge
         light and one backing sheet showing past the outer corner. The
         photograph itself is never touched: no filter, tint, grade,
         mask, crop or overlay reaches it, and the only thing added to
         the image is a 1px cut line where it is inlaid into the page.
         On a phone the insert recomposes into a PROFILE HEADER: square
         portrait and name side by side in a band across the top, a
         fold under it, the quote printed below. Same object, different
         arrangement — not the desktop one stacked.
     B · FRAGMENTED → VERSUS → ORGANIZED. Left: three loose slips, each
         a different width, each at its own angle and offset, hugging
         its own content, faded out at the foot — scraps, not a set.
         Right: ONE organizer page carrying all three benefits inside
         it, spine stepping cyan → teal → lime. On a phone the slips
         become an overlapping PILE, a printed "vs" rule is the pivot,
         and the organizer page follows it whole.
     C · EDITIONS OF ONE PLAN. The four stages are not four cards. On
         desktop they are a bound set that CLIMBS: each page starts
         higher than the last on a common foot, and each carries more
         page-thickness below it than the one before — the plan
         accumulates as it advances. The monthly review is the NEXT
         edition: it slides down over the set and settles, and the three
         things every review covers are three divider tabs standing on
         its top edge. On a phone the set becomes a fanned stack —
         four pages stepping right, spines cyan → indigo → teal → lime
         reading down the left, folio numbers set inline — and the
         review page comes back to full width ON TOP of the fan.
     D · NO OBJECT, BY INSTRUCTION. Who It's For draws nothing. It is
         the breather between two heavy sections. Desktop: a staggered
         two-column editorial index, serif entry titles, small accent
         folio numbers, half the height it was. Phone: one column with
         the folio numbers pulled out into a left rail beside the
         titles — open type, no surface, a different rhythm from the
         page stack above it and the cards below.

   THE TWO SHARED SYSTEMS, CONSUMED NOT COPIED
     · THE THREE HEADLINE TIERS. This file sets NO headline font-size at
       any width. --fr-h2-flag reaches `.fr-sec--relate .fr-h2` from
       foundation; --fr-h2 reaches --forward and --fit. The one size
       this file does set outside the tokens is the Who It's For entry
       title, because that brief asks for large typography by name and
       an h3 is not a headline tier.
     · THE DEPTH LADDER. Every elevation is --fr-d1 / d2 / d3 / d4 and
       every object that moves uses --fr-raise-1 or --fr-raise-2. Extra
       shadow layers only ever draw a PAGE — a sheet showing past an
       edge — and the layer COUNT is held equal between a resting state
       and the state it transitions to, because a browser cannot
       interpolate between two different layer counts and the step
       cuts instead of easing.

   TOKENS. Two local custom properties, both plumbing: --fr-key holds
   one of the contract's four accent triplets per page, --fr-lap is how
   deep one page laps the next. --acc / --acc-rgb are never set here.
   Two markup-authored properties are READ rather than redeclared: --row
   keeps the comparison columns in register and scatters the slips, and
   --lift orders the review editions.

   MOTION — FOUR SYSTEMS, EACH SAYING SOMETHING
     frRelNote    his words settle onto the page beside him
     frShiftOn    the organizer's edge light and completion cue arrive
                  as the comparison activates
     frFwTabIn    each edition's folio tab arrives in sequence
     frFwInsert   the monthly review slides down OVER the set of
                  editions and settles — the next revised page being
                  inserted, which is the one thing this section's copy
                  asks the motion to say
     frFitMark    a folio marker and its accent light arrive
   plus frTab, borrowed from the page-wide budget for the editions.
   Every one-shot is a `from` frame only, so each object is complete
   before it starts, the instant it ends, and in a browser where the
   scroll script never runs. Nothing pulses, nothing floats, nothing
   spins and no border animates.

   DELETED IN THIS PASS, AND NOT COMING BACK
     · the separate portrait FRAME and the separate quote CARD, and the
       orphaned quotation mark that floated in the gap between them;
     · the figure's local environment glow — the section's own wash
       already lights this ground, and a second radial under an opaque
       page is a layer nobody can see;
     · the mat deboss ring and the frame's fore-edge light, replaced by
       one fore-edge light on the insert itself;
     · the equal-height left column of the comparison;
     · the four-equal-boxes reading of the review stages and the
       margin-note version of the review tags;
     · the full-width zigzag of Who It's For.
   Still deleted from earlier passes and still not revived: every rail,
   node, connector, travelling light, halo, lit disc, glowing ring and
   rotateY plate in all three sections.
   ========================================================= */

/* =========================================================
   A · THE RELATIONSHIP — FLAGSHIP TIER
   ========================================================= */

/* ---- THE BRAND LINE -------------------------------------------------
   "Your Finances. Your Goals. Our Strategy." is a secondary line under
   the statement — three beats separated by layout, because the markup's
   spans carry no whitespace, with the accent on the last. It is the
   breath between the statement and the portrait, so it gains air and
   nothing else. */
.fr-page .fr-sec--relate .fr-relate-signature {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5em;
  row-gap: 0.08em;
  margin: clamp(26px, 2.8vw, 40px) auto 0;
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.006em;
  text-align: center;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--relate .fr-relate-signature em {
  font-style: italic;
  color: var(--fr-lime);
}

/* ---- THE PROFILE INSERT — ONE OBJECT, NOT TWO ----------------------
   The figure IS the page. It takes foundation's `.fr-quote` stock and
   adds what makes it an insert from this organizer: a teal → cyan bound
   spine, a lit top edge, the ladder's d3 because it is this section's
   primary object, and one backing sheet showing past the outer corner.
   The portrait is inlaid in the left half, his words are printed on the
   right half, and a FOLD runs the full height of the page between them.
   That fold is the connection the brief asks for: the quote is not near
   Steven, it is on the same sheet as Steven.

   `align-items: stretch` is load-bearing. Both halves span the page's
   full inner height, which is what lets the fold reach from the top
   shoulder to the bottom one; each half then centres its own content
   inside itself. With `center` on the grid the fold could only be as
   tall as the shorter column, which is a rule floating in the middle of
   a page rather than a fold through it. */
.fr-page .fr-sec--relate .fr-quote--guide {
  position: relative;
  display: grid;
  grid-template-columns: clamp(146px, 14vw, 182px) minmax(0, 1fr);
  align-items: stretch;
  column-gap: clamp(28px, 3.2vw, 46px);
  row-gap: 0;
  width: min(840px, 100%);
  margin: clamp(48px, 5vw, 76px) auto 0;
  padding: clamp(26px, 2.8vw, 38px) clamp(28px, 3.2vw, 44px);
  border: 0;
  border-radius: 3px 12px 12px 3px;
  background-image:
    /* the bound edge: 3px of index colour, teal lifting to cyan */
    linear-gradient(180deg, rgba(68, 181, 156, 0.95) 0%, rgba(56, 207, 255, 0.88) 100%),
    /* the hairline of shade where colour meets stock — inlaid, not lit */
    linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
    /* the index colour bleeding a few pixels into the stock */
    linear-gradient(94deg, rgba(56, 207, 255, 0.075) 0%, rgba(56, 207, 255, 0) 48%),
    /* the lit top edge of the stock */
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(255, 255, 255, 0) 1px),
    /* the stock, lit from above */
    linear-gradient(166deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  background-size: 3px 100%, 1px 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 3px 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  /* elevation from the ladder; the two spread layers after it are ONE
     backing sheet showing past the outer corner, not a second shadow */
  box-shadow:
    var(--fr-d3),
    14px 16px 0 -4px var(--fr-paper),
    14px 16px 0 -3px var(--fr-edge);
}
/* THE FORE-EDGE LIGHT. Teal through cyan down the insert's outer edge —
   the two hues the section's wash already carries. Static: a saturated
   band breathing on an accent edge is the pulse foundation's motion
   budget forbids by name. It never reaches the photograph. */
.fr-page .fr-sec--relate .fr-quote--guide::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 14%;
  bottom: 14%;
  right: -1px;
  width: 2px;
  pointer-events: none;
  border-radius: 2px;
  background-image: linear-gradient(180deg,
    rgba(68, 181, 156, 0) 0%,
    rgba(68, 181, 156, 0.8) 28%,
    rgba(56, 207, 255, 0.78) 64%,
    rgba(56, 207, 255, 0) 100%);
  opacity: 0.62;
}

/* THE LEFT HALF — the portrait inlaid, the name printed under it. The
   figcaption draws no surface of its own: it is part of the page. */
.fr-page .fr-sec--relate .fr-quote--guide figcaption {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* THE FOLD. One hairline from the page's top shoulder to its bottom
   one, sitting in the middle of the column gap. This is the whole
   mechanism that makes the quote belong to him: a fold joins two halves
   of one sheet, where a gap separates two objects. */
.fr-page .fr-sec--relate .fr-quote--guide figcaption::after {
  content: '';
  position: absolute;
  top: calc(-1 * clamp(26px, 2.8vw, 38px));
  bottom: calc(-1 * clamp(26px, 2.8vw, 38px));
  right: calc(-1 * clamp(14px, 1.6vw, 23px));
  width: 1px;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(150, 190, 235, 0) 0%,
    rgba(150, 190, 235, 0.2) 16%,
    rgba(150, 190, 235, 0.2) 84%,
    rgba(150, 190, 235, 0) 100%);
}

/* THE PHOTOGRAPH IS NEVER ALTERED. No filter, no tint, no grade, no
   mask, no crop and no overlay — the properties that carried the
   rejected treatment are stood down BY NAME so nothing can reach it
   from an earlier pass. The only thing added to the image is a 1px cut
   line and a short contact shadow where it is inlaid into the page:
   a frame edge, not a grade. The source is 240×240, so every width this
   file renders it at stays at or under native and the image is sharp. */
.fr-page .fr-sec--relate .fr-quote--guide figcaption img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(14px, 1.4vw, 18px);
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    0 0 0 1px rgba(3, 10, 22, 0.62),
    0 12px 24px -16px rgba(2, 8, 20, 0.95);
  filter: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: fill;
}
.fr-page .fr-sec--relate .fr-quote--guide figcaption span {
  position: relative;
  z-index: 1;
  display: block;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-sec--relate .fr-quote--guide figcaption strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.006em;
  color: var(--fr-ink);
}

/* THE RIGHT HALF — his words, printed on the page. No surface, no
   border, no elevation: it is already on one. */
.fr-page .fr-sec--relate .fr-quote--guide blockquote {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.fr-page .fr-sec--relate .fr-quote--guide blockquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 1.72vw, 1.875rem);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: -0.008em;
  color: var(--fr-ink);
  text-wrap: pretty;
}
/* ONE PRINTED EDITORIAL QUOTATION MARK, set against the fold at the
   head of his words. Ink on stock at the opacity of a watermark: no
   glow, no disc, no lit filament and no rail running back to him. The
   markup's own `.fr-quote-mark` is `aria-hidden` ornament and is a GRID
   ITEM of the figure, so placed there it anchors to the row rather than
   to the sentence it marks; it is simply not printed, and nothing is
   said twice. */
.fr-page .fr-sec--relate .fr-quote--guide .fr-quote-mark { display: none; }
.fr-page .fr-sec--relate .fr-quote--guide blockquote p { position: relative; }
.fr-page .fr-sec--relate .fr-quote--guide blockquote p::before {
  content: '\201C';
  position: absolute;
  top: -0.56em;
  left: -0.1em;
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 5.4vw, 5.5rem);
  font-weight: 500;
  line-height: 0.76;
  letter-spacing: 0;
  color: rgba(234, 242, 255, 0.1);
  pointer-events: none;
}
/* his words settle onto the page beside him, once, on reveal. `from`
   only, so the resting state is whatever the rules above draw. */
@keyframes frRelNote {
  from { opacity: 0; transform: translate3d(-12px, 5px, 0); }
}
.fr-page .fr-sec--relate .fr-quote--guide.reveal.revealed blockquote {
  animation: frRelNote 0.8s var(--fr-ease) 0.16s backwards;
}

/* =========================================================
   C · ON YOUR OWN vs WITH FINANCIAL RESET
   ---------------------------------------------------------
   The most important comparison on the page. The copy is unchanged; the
   PRESENTATION is material rather than typographic.

   LEFT — three loose slips. Each resource is a real standalone object,
   so each gets its own slip, but they are deliberately lesser: the
   ladder's lowest level, a duller stock, no bound edge, no lit top
   edge, a different width, a different offset and a different angle
   each, and the foot of every slip faded out. They HUG THEIR OWN
   CONTENT — `align-self: start` — which is the single change that stops
   them reading as three tall empty boxes stretched to the rows
   opposite. The fade is masked on the SLIP, never on the type.

   RIGHT — one page. `.fr-shift-panel` is in the markup; it is the
   organizer page itself, with the three benefits set INSIDE it
   separated by folds rather than gaps, and a bound edge stepping
   cyan → teal → lime so the colour reports progress. Nothing is drawn
   BETWEEN the two sides: the contrast is material, not diagram.
   ========================================================= */
.fr-page .fr-sec--relate .fr-shift {
  display: grid;
  /* the right side carries more weight, because it is the answer */
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  column-gap: clamp(30px, 3.8vw, 68px);
  /* zero, because the right column is one continuous page: each row's
     air is its own padding, which is what keeps the folds tight */
  row-gap: 0;
  width: min(1020px, 100%);
  margin: clamp(60px, 6.4vw, 104px) auto 0;
}
/* `.fr-shift-tag` repeats the column head inside every outcome so the
   two columns still pair up for a screen reader reading them in source
   order. It is a label for assistive technology and was never meant to
   print: clipped rather than `display: none`, or it leaves the ear with
   three unattributed sentences. */
.fr-page .fr-sec--relate .fr-shift-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fr-page .fr-sec--relate .fr-shift-head--from { grid-column: 1; grid-row: 1; }
.fr-page .fr-sec--relate .fr-shift-head--to { grid-column: 2; grid-row: 1; }
.fr-page .fr-sec--relate .fr-shift-from { grid-column: 1; grid-row: var(--row, auto); }
.fr-page .fr-sec--relate .fr-shift-to { grid-column: 2; grid-row: var(--row, auto); }

/* ---- THE ORGANIZER PAGE --------------------------------------------
   One object spanning the whole right column — the head and all three
   benefits together. `span 4` rather than a line index, so it needs no
   grid-template-rows and cannot drift. */
.fr-page .fr-sec--relate .fr-shift-panel {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: relative;
  z-index: 0;
  display: block;
  pointer-events: none;
  border: 0;
  border-radius: 3px 12px 12px 3px;
  background-image:
    /* THE BOUND EDGE AS PROGRESS: cyan at the head, teal through the
       middle, lime where the strategy resolves. A gradient with a
       direction and a meaning, not a decoration. */
    linear-gradient(180deg,
      rgba(56, 207, 255, 0.95) 0%,
      rgba(68, 181, 156, 0.92) 54%,
      rgba(175, 221, 44, 0.95) 100%),
    linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
    /* the brighter head of the page — the tab region, printed not lit */
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 168px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  background-size: 3px 100%, 1px 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 3px 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  /* resting depth d2, scroll takes it to d3. If the scroll script never
     runs the page simply stays at d2, which is still a raised organizer
     page standing against three loose slips: the comparison reads
     either way. Four layers against four, so the step eases. */
  box-shadow: var(--fr-d2);
  transition: box-shadow 0.85s var(--fr-ease);
}
/* one slow ambient gradient inside the page, so the active side is a
   lit environment rather than a flat fill. No travel, no loop. */
.fr-page .fr-sec--relate .fr-shift-panel::before {
  content: '';
  position: absolute;
  inset: 1px 1px 1px 4px;
  pointer-events: none;
  border-radius: 2px 11px 11px 2px;
  background-image:
    radial-gradient(52% 44% at 18% 14%, rgba(56, 207, 255, 0.1) 0%, transparent 72%),
    radial-gradient(56% 50% at 84% 88%, rgba(175, 221, 44, 0.085) 0%, transparent 74%);
  opacity: 0.74;
  transition: opacity 0.6s var(--fr-ease);
}
/* the edge light off the bound spine, and the completion cue pooled at
   the foot where that spine resolves to lime. One pass on reveal,
   `from` only, so it parks lit and complete. */
.fr-page .fr-sec--relate .fr-shift-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(92deg, rgba(56, 207, 255, 0.11) 0%, rgba(56, 207, 255, 0) 34%),
    radial-gradient(42% 34% at 2% 100%, rgba(175, 221, 44, 0.14) 0%, transparent 70%);
}
.fr-page .fr-sec--relate .fr-shift.revealed .fr-shift-panel::after {
  animation: frShiftOn 1.15s var(--fr-ease) 0.18s backwards;
}
@keyframes frShiftOn {
  from { opacity: 0; }
}
.fr-page .fr-sec--relate .fr-shift.revealed .fr-shift-panel {
  box-shadow: var(--fr-d3);
}

/* ---- THE LEFT HEAD — PRINTED TYPE, NO SURFACE ---------------------- */
.fr-page .fr-sec--relate .fr-shift-head--from {
  padding: clamp(26px, 2.6vw, 34px) 0 0;
  opacity: 0.88;
}
.fr-page .fr-sec--relate .fr-shift-head--from .fr-shift-sub {
  padding-bottom: clamp(18px, 1.8vw, 24px);
  border-bottom: 1px solid var(--fr-edge);
}

/* ---- THE PAGE'S HEAD — THE BRIGHTER TAB ---------------------------- */
.fr-page .fr-sec--relate .fr-shift-head--to {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 2.6vw, 34px) clamp(26px, 2.6vw, 38px) clamp(4px, 0.6vw, 8px);
}
/* the fold under the page's head: a touch stronger than --fr-edge,
   because inside lit stock a hairline at 0.14 disappears */
.fr-page .fr-sec--relate .fr-shift-head--to .fr-shift-sub {
  padding-bottom: clamp(18px, 1.8vw, 24px);
  border-bottom: 1px solid rgba(150, 190, 235, 0.22);
}

.fr-page .fr-sec--relate .fr-shift-kicker {
  display: block;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}
/* the completion cue, part one: a printed check in accent ink. An icon
   in accent ink is a printed mark; the lit disc it used to sit in was a
   node, and the node is what the rejected direction was. */
.fr-page .fr-sec--relate .fr-shift-head--to .fr-shift-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--fr-lime);
}
.fr-page .fr-sec--relate .fr-shift-head--to .fr-shift-kicker .fr-ico {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.fr-page .fr-sec--relate .fr-shift-sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.008em;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-sec--relate .fr-shift-head--to .fr-shift-sub { color: var(--fr-ink); }

/* ---- LEFT: THREE LOOSE SLIPS ---------------------------------------
   `align-self: start` is the change that makes this side read. A grid
   item defaults to `stretch`, so each slip was being pulled to the
   height of the organizer row opposite — three tall boxes with a line
   of type at the top and a field of empty fill under it, which is the
   opposite of "loose scrap". Hugging its content, each one is the size
   of what is written on it.

   Then they are scattered, because three identical rectangles in a
   column are a SET and the point of this side is that there isn't one:
   each reads the markup's own --row for its angle, its offset and its
   width, so no two land the same way. The angles are small — under two
   degrees — which is a dropped slip, not a tilted card. */
.fr-page .fr-sec--relate .fr-shift-from {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: clamp(16px, 1.8vw, 24px);
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px);
  /* offsets only: the scatter is carried by the three objects being
     different things in different places, never by rotation */
  transform: none;
  /* muted as a GROUP, so slip and type recede together and the ratio
     between them never breaks. 0.88 keeps --fr-ink-2 comfortably above
     the contrast floor against the page ground. */
  opacity: 0.88;
}
/* the slip itself. --fr-d1 is "a flat planning sheet lying on the
   ground", which is exactly what a template, an app and a course are
   here. No bound edge and no lit top edge: those belong to the
   organizer. A duller stock than --fr-paper, so the two sides are
   different MATERIALS and not the same material at two brightnesses. */
.fr-page .fr-sec--relate .fr-shift-from::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  right: calc((var(--row, 3) - 2) * 11px);
  border-radius: 2px 4px 4px 2px;
  background-image: linear-gradient(168deg, rgba(32, 50, 82, 0.95) 0%, rgba(20, 34, 59, 0.86) 100%);
  box-shadow: var(--fr-d1);
  /* incomplete: the slip runs out at the foot. Masked on the SLIP,
     never on the type. `mask-repeat: no-repeat` is load-bearing — a
     mask's positioning area is the border box and the property defaults
     to `repeat`, so without it d1's cast landed in the second tile of
     the gradient at undimmed strength and drew a dark hairline under an
     edge that is no longer there. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.02) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.02) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.fr-page .fr-sec--relate .fr-shift-from strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--relate .fr-shift-from span {
  display: block;
  margin-top: 5px;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* ---- RIGHT: THREE BENEFITS, CONNECTED INSIDE THE ONE PAGE ---------- */
.fr-page .fr-sec--relate .fr-shift-to {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.2vw, 16px);
  padding: clamp(20px, 2vw, 26px) clamp(26px, 2.6vw, 38px);
}
/* the fold between benefits, not a gap between cards. `.is-first` is in
   the markup, and the three outcomes are not DOM siblings, so this is
   the selector that reaches rows two and three. */
.fr-page .fr-sec--relate .fr-shift-to:not(.is-first) {
  border-top: 1px solid var(--fr-edge);
}
.fr-page .fr-sec--relate .fr-shift-to:last-child {
  padding-bottom: clamp(26px, 2.6vw, 34px);
}
/* the completion cue, part two */
.fr-page .fr-sec--relate .fr-shift-to > .fr-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  stroke-width: 2.3;
  color: var(--fr-lime);
}
.fr-page .fr-sec--relate .fr-shift-to p {
  margin: 0;
  min-width: 0;
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink);
  text-wrap: pretty;
}

/* HOVER AND KEYBOARD EMPHASIS, DESKTOP ONLY — d4 is the ladder's named
   level for "hover or scroll emphasis". THE LEFT IS NOT TOUCHED: it
   stays exactly as muted as it was, which is the whole instruction. */
@media (hover: hover) and (min-width: 761px) {
  .fr-page .fr-sec--relate .fr-shift:hover .fr-shift-panel,
  .fr-page .fr-sec--relate .fr-shift:focus-within .fr-shift-panel {
    box-shadow: var(--fr-d4);
  }
  .fr-page .fr-sec--relate .fr-shift:hover .fr-shift-panel::before,
  .fr-page .fr-sec--relate .fr-shift:focus-within .fr-shift-panel::before {
    opacity: 0.95;
  }
}

/* =========================================================
   D · REVIEW & ADJUST — FOUR EDITIONS, THEN THE NEXT ONE
   ---------------------------------------------------------
   "Your strategy doesn't stay still. It moves with you." The four
   stages stay and so does their order: Clarity, Alignment,
   Strengthening, Forward Strategy. What was flat was that four equal
   pages at one elevation read as four cards in a row.

   THEY ARE NOW A SET THAT CLIMBS. Every page starts HIGHER than the one
   before it on a common foot, so the set grows left to right as the
   strategy advances; every page carries more PAGE-THICKNESS under its
   bottom edge than the one before, so a later edition visibly has more
   behind it; the lap holds the five together as one bound object; and
   the ladder steps the fourth page forward because that is where the
   strategy has arrived. Elevation, height and thickness all report the
   same thing, which is what makes it progression rather than decoration.
   ========================================================= */
.fr-page .fr-sec--forward .fr-route {
  display: grid;
  gap: clamp(46px, 4.6vw, 70px);
  margin-top: clamp(52px, 5.2vw, 78px);
}

/* ---- THE PAGE, FOR ALL FIVE OBJECTS IN THIS SECTION ----------------
   Declared once for the four editions and the monthly review, so the
   five are one object rather than two lookalikes. The bound accent edge
   is a 3px BACKGROUND layer — which is what leaves the box-shadow free
   to be nothing but a ladder token plus page-thickness, and what lets a
   page step d2 → d4 on hover without two mismatched shadow lists
   jumping. `--fr-key` is the index colour. */
.fr-page .fr-sec--forward .fr-route-stages li,
.fr-page .fr-sec--forward .fr-review {
  position: relative;
  border: 0;
  border-radius: 3px 10px 10px 3px;
  background-image:
    linear-gradient(180deg,
      rgba(var(--fr-key, 56, 207, 255), 0.95) 0%,
      rgba(var(--fr-key, 56, 207, 255), 0.56) 100%),
    linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
    linear-gradient(92deg,
      rgba(var(--fr-key, 56, 207, 255), 0.095) 0%,
      rgba(var(--fr-key, 56, 207, 255), 0.02) 34%,
      rgba(var(--fr-key, 56, 207, 255), 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  background-size: 3px 100%, 1px 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 3px 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}

/* ---- THE FOUR EDITIONS ---------------------------------------------
   Flex rather than grid — `flex: 1 1 0` divides the space that remains
   AFTER the laps, so all four come out identical however deep the lap
   is — and the right padding reserves the lap, or a page would sit over
   its neighbour's last word. */
.fr-page .fr-sec--forward .fr-route-stages {
  --fr-lap: clamp(18px, 2.2vw, 30px);
  counter-reset: fr-rv-n;
  display: flex;
  align-items: stretch;
  /* the tabs stand above the top edge; that space is reserved here, so
     a tab is never clipped and never crowds the headline above it */
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.fr-page .fr-sec--forward .fr-route-stages li {
  counter-increment: fr-rv-n;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: clamp(158px, 12.8vw, 196px);
  /* THE CLIMB. Each page starts higher than the one before it and they
     all finish on the same foot, so the set grows as the strategy
     advances. Expressed as margin rather than transform, because
     transform is reserved for the raise tokens and a resting translate
     would have to be re-composed into every hover state. */
  margin-top: calc((3 - var(--lift, 0)) * 10px);
  padding: clamp(24px, 2.4vw, 32px) calc(clamp(20px, 2vw, 26px) + var(--fr-lap)) clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px);
  /* THE THICKNESS. Four ladder layers, then two that draw the editions
     stacked UNDER this one: nothing at stage one, three sheets' worth
     by stage four. The count is six here and six on hover, so the step
     interpolates instead of cutting. */
  box-shadow:
    var(--fr-d2),
    0 calc(var(--lift, 0) * 4px) 0 -3px var(--fr-paper),
    0 calc(var(--lift, 0) * 4px) 0 -2px var(--fr-edge);
  transition: box-shadow 0.3s var(--fr-ease), transform 0.3s var(--fr-ease);
}
.fr-page .fr-sec--forward .fr-route-stages li + li { margin-left: calc(-1 * var(--fr-lap)); }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(1) { z-index: 1; }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(2) { z-index: 2; }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(3) { z-index: 3; }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(4) {
  z-index: 4;
  box-shadow:
    var(--fr-d3),
    0 12px 0 -3px var(--fr-paper),
    0 12px 0 -2px var(--fr-edge);
  transform: var(--fr-raise-1);
}
/* THE FOLIO TAB. The index printed on a compact tab of the page's own
   stock standing above the top edge, so the set reads as tabbed
   dividers rather than as four rectangles. d1 is the elevation — a tab
   is the thinnest thing in the ladder. No ruler ticks, no lamp, no
   halo: the hue lives in the ink and in the 3px spine below it. */
.fr-page .fr-sec--forward .fr-route-stages li::before {
  content: counter(fr-rv-n, decimal-leading-zero);
  position: absolute;
  z-index: 1;
  left: clamp(20px, 2vw, 26px);
  top: -17px;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 11px;
  border-radius: 4px 4px 0 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
  box-shadow: var(--fr-d1);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--fr-key, 56, 207, 255), 0.95);
}
/* cyan · indigo · teal · lime — the contract's four accents, in the
   contract's order, as the folio's index colours */
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(1) { --fr-key: 56, 207, 255; }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(2) { --fr-key: 111, 126, 224; }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(3) { --fr-key: 68, 181, 156; }
.fr-page .fr-sec--forward .fr-route-stages li:nth-child(4) { --fr-key: 175, 221, 44; }

/* the stage label and the note under it. Nothing is drawn beside, under
   or through either of them. The size comes from --fr-h3; only the
   leading is this file's. */
.fr-page .fr-sec--forward .fr-route-stages h3 {
  margin: 0;
  line-height: 1.22;
}
.fr-page .fr-sec--forward .fr-route-stages p {
  margin: 0;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* A PAGE LIFTS OUT OF THE SET when it is pointed at — d4 is the
   ladder's named level for exactly this, and the raise tokens are the
   only transforms that move it. Six layers against six. */
@media (hover: hover) and (min-width: 761px) {
  .fr-page .fr-sec--forward .fr-route-stages li:hover {
    z-index: 5;
    box-shadow:
      var(--fr-d4),
      0 calc(var(--lift, 0) * 4px) 0 -3px var(--fr-paper),
      0 calc(var(--lift, 0) * 4px) 0 -2px var(--fr-edge);
    transform: var(--fr-raise-1);
  }
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(4):hover {
    box-shadow:
      var(--fr-d4),
      0 12px 0 -3px var(--fr-paper),
      0 12px 0 -2px var(--fr-edge);
    transform: var(--fr-raise-2);
  }
}

/* SEQUENTIAL ACTIVATION, in two parts and in the markup's own order:
   frTab steps each page forward from behind its neighbour, borrowed
   from the page-wide budget, and frFwTabIn brings each folio tab up
   after it. Both are `from` frames only, so the set is complete before
   it starts, the instant it ends, and if the scroll script never runs. */
.fr-page .fr-sec--forward .fr-route.revealed .fr-route-stages li {
  animation: frTab 0.62s var(--fr-ease) calc(0.1s + var(--lift, 0) * 0.09s) backwards;
}
.fr-page .fr-sec--forward .fr-route.revealed .fr-route-stages li::before {
  animation: frFwTabIn 0.5s var(--fr-ease) calc(0.26s + var(--lift, 0) * 0.09s) backwards;
}
@keyframes frFwTabIn {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
}

/* ---- THE MONTHLY REVIEW — THE NEXT EDITION, INSERTED ---------------
   "Your plan isn't built once and filed away." So it is drawn as the
   next page in the same system rather than as a panel under a strip:
   the same page recipe, on the same spine, at d3 because it is the
   object this section ends on, with one more sheet showing past its
   outer corner — a page that recurs has pages behind it. It takes lime,
   the resolved hue at this point in the journey.

   AND THE THREE THINGS EVERY REVIEW COVERS ARE THREE DIVIDER TABS on
   its top edge. That is the whole reason this page cannot be mistaken
   for a sixth rectangle: the four editions above each carry ONE small
   numeric tab, and this one carries three labelled ones. Same material,
   different role, read in half a second. */
.fr-page .fr-sec--forward .fr-review {
  --fr-key: 175, 221, 44;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  width: fit-content;
  max-width: 100%;
  margin-inline: 0;
  column-gap: clamp(16px, 1.8vw, 24px);
  row-gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(30px, 3.2vw, 44px) clamp(28px, 3.2vw, 46px) clamp(28px, 3vw, 42px);
  box-shadow:
    var(--fr-d3),
    12px 14px 0 -4px var(--fr-paper),
    12px 14px 0 -3px var(--fr-edge);
}
/* THE INSERTION. The review page comes down OVER the set of editions
   and settles — the next revised page being filed in. One pass, `from`
   only, so the page is complete the instant it lands and in a browser
   where the scroll script never runs. */
@keyframes frFwInsert {
  from { opacity: 0; transform: translate3d(0, -20px, 0); }
}
.fr-page .fr-sec--forward .fr-route.revealed .fr-review {
  animation: frFwInsert 0.9s var(--fr-ease) 0.52s backwards;
}
.fr-page .fr-sec--forward .fr-review-icon {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--fr-lime);
}
.fr-page .fr-sec--forward .fr-review-icon .fr-ico {
  width: 24px;
  height: 24px;
  animation: none;
}
.fr-page .fr-sec--forward .fr-review-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.fr-page .fr-sec--forward .fr-review-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.008em;
  color: var(--fr-ink);
  text-wrap: pretty;
}
.fr-page .fr-sec--forward .fr-review-text {
  margin: 12px 0 0;
  max-width: var(--fr-measure);
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* =========================================================
   E · WHO IT'S FOR — NO OBJECT, AND DELIBERATELY NOT ELEVATED
   ---------------------------------------------------------
   This section draws NOTHING, and that is the most important
   instruction in its brief: it is the visual breather between the
   edition stack above and the heavier proof below. It gets large
   editorial type, a staggered arrangement, small coloured folio numbers
   and one soft accent light each — and not one box.

   WHAT CHANGED. It was right in spirit and 1900px tall: six entries
   alternating across a 1040px column, which left a 500px void beside
   every one of them and made a breather into a long scroll. It is a
   STAGGERED TWO-COLUMN INDEX now — the same alternation, folded so the
   eye reads it as a composition instead of a zigzag — at a little over
   half the height, and the entry titles carry the section.

   THE ONE FONT-SIZE THIS FILE SETS OUTSIDE THE TOKENS is the entry
   title. The brief asks for large typography here by name, and an entry
   title is an h3, not one of the three headline tiers: --fr-h1,
   --fr-h2-flag and --fr-h2 are untouched at every width in this file.
   ========================================================= */
.fr-page .fr-sec--fit .fr-fit-head {
  width: min(760px, 100%);
  margin-inline: auto;
  text-align: center;
}
.fr-page .fr-sec--fit .fr-fit-callout {
  position: relative;
  width: min(var(--fr-measure), 100%);
  margin: clamp(28px, 2.8vw, 40px) auto 0;
  padding-top: clamp(24px, 2.4vw, 32px);
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.008em;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
/* one short printed rule between the statement and the callout — a
   hairline is not a box, and it is the only line in the section */
.fr-page .fr-sec--fit .fr-fit-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 56px;
  height: 1px;
  margin-left: -28px;
  background-image: linear-gradient(90deg,
    rgba(68, 181, 156, 0) 0%,
    rgba(68, 181, 156, 0.6) 50%,
    rgba(175, 221, 44, 0) 100%);
}

.fr-page .fr-sec--fit .fr-fit-list {
  counter-reset: fr-fit-n;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(44px, 5.6vw, 92px);
  row-gap: clamp(40px, 3.6vw, 54px);
  width: min(1100px, 100%);
  margin: clamp(58px, 6vw, 94px) auto 0;
  padding: 0;
  list-style: none;
}
/* the check node is out of the drawing, and its glyph with it: these
   are notes, and a note is not ticked off */
.fr-page .fr-sec--fit .fr-fit-tick { display: none; }

.fr-page .fr-sec--fit .fr-fit-list li {
  counter-increment: fr-fit-n;
  position: relative;
  isolation: isolate;
  align-self: start;
  width: 100%;
  max-width: 430px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
/* THE STAGGER. The right column drops half a beat, so the two columns
   read as one woven index rather than as a grid of six. This is a
   padding, not a transform, so the row owns the height it needs and
   nothing can ever overlap the entry below it. */
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(even) {
  justify-self: end;
  padding-top: clamp(38px, 4vw, 64px);
}
/* THE FOLIO MARKER: the number in accent ink over a short hairline, the
   width of a marker and nothing more. */
.fr-page .fr-sec--fit .fr-fit-list li::before {
  content: counter(fr-fit-n, decimal-leading-zero);
  display: inline-block;
  width: 54px;
  margin-bottom: clamp(12px, 1.2vw, 16px);
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--fr-key, 68, 181, 156), 0.42);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgba(var(--fr-key, 68, 181, 156), 0.92);
}
/* THE SUBTLE ACCENT LIGHT — light, not a drawn object: a soft pool
   behind the folio marker, stepping cyan through teal to lime down the
   list, so the colour reports progress without anything being drawn
   between the entries. It stays BEHIND THE MARKER on both the odd and
   the even entries: pushed to the outer side of the even ones it
   detached from the number it belongs to and read as a stray circle
   floating in the gutter. */
.fr-page .fr-sec--fit .fr-fit-list li::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -50px;
  left: -62px;
  width: 210px;
  height: 162px;
  pointer-events: none;
  background-image: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--fr-key, 68, 181, 156), 0.14) 0%, transparent 72%);
}
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(even)::after { top: calc(clamp(38px, 4vw, 64px) - 50px); }
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(1) { --fr-key: 56, 207, 255; }
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(2) { --fr-key: 111, 126, 224; }
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(3) { --fr-key: 68, 181, 156; }
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(4) { --fr-key: 68, 181, 156; }
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(5) { --fr-key: 175, 221, 44; }
.fr-page .fr-sec--fit .fr-fit-list li:nth-child(6) { --fr-key: 175, 221, 44; }

.fr-page .fr-sec--fit .fr-fit-list li > div { min-width: 0; }
/* the entry title, in the serif the section's statement is set in, at
   an editorial size. See the note at the head of this block. */
.fr-page .fr-sec--fit .fr-fit-list h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.85vw, 1.875rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--fr-ink);
  text-wrap: pretty;
}
.fr-page .fr-sec--fit .fr-fit-list p {
  margin: 11px 0 0;
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
/* the marker and its light arrive with the entry. Each li already
   carries `reveal` in the markup, so this rides the hook that is there. */
@keyframes frFitMark {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
}
.fr-page .fr-sec--fit .fr-fit-list li.reveal.revealed::before,
.fr-page .fr-sec--fit .fr-fit-list li.reveal.revealed::after {
  animation: frFitMark 0.66s var(--fr-ease) 0.14s backwards;
}

/* ============================================================
   THREE DISCONNECTED RESOURCES, NOT THREE BROKEN CARDS
   A template, an app and a course are things someone collected
   separately. The rotation alone read as a layout fault, so each
   slip now carries the edge of real stock: light on the top
   arris, a dark cut edge beneath it, and its own contact shadow.
   The rotations are reduced and made uneven on purpose — paper
   dropped on a desk does not fan at a constant angle — and the
   left margins stay anchored so the group still reads as a set.
   ============================================================ */
.fr-page .fr-sec--relate .fr-shift-from {
  box-shadow:
    inset 0 1px 0 rgba(226, 240, 255, 0.1),
    inset 0 -1px 0 rgba(3, 9, 20, 0.46),
    0 1px 0 0 rgba(3, 9, 20, 0.66),
    0 2px 0 -1px rgba(150, 190, 235, 0.1),
    var(--fr-d1);
}
/* uneven, small, and each one different — a controlled scatter */
/* the nearest slip is the one on top, so the pile has an order */
.fr-page .fr-sec--relate .fr-shift-from[data-kind="template"] { z-index: 3; }
.fr-page .fr-sec--relate .fr-shift-from[data-kind="app"] { z-index: 2; }
.fr-page .fr-sec--relate .fr-shift-from[data-kind="course"] { z-index: 1; }

/* ============================================================
   THE MONTHLY REVIEW IS A FOLDER WITH THREE DIVIDERS
   The three headings used to be decorative chips. They are real
   tabs now, over three panels, using the same divider language as
   the hero organizer so the page keeps one physical vocabulary.
   ============================================================ */
.fr-page .fr-sec--forward .fr-review-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: clamp(18px, 2vw, 24px) 0 0;
}
.fr-page .fr-sec--forward .fr-review-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-height: 38px;
  margin: 0;
  padding: 9px clamp(13px, 1.4vw, 18px);
  border: 0;
  border-radius: 4px 4px 0 0;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  color: var(--fr-ink-2);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-raise) 0%, var(--fr-ground) 100%);
  box-shadow: var(--fr-d1);
  transition: transform 0.26s var(--fr-ease), box-shadow 0.26s var(--fr-ease),
    color 0.26s var(--fr-ease);
}
.fr-page .fr-sec--forward .fr-review-tab:hover { transform: var(--fr-raise-1); }
.fr-page .fr-sec--forward .fr-review-tab:focus-visible {
  outline: 2px solid rgba(175, 221, 44, 0.95);
  outline-offset: 2px;
  z-index: 2;
}
/* the divider the reader is on stands proud and carries the accent */
.fr-page .fr-sec--forward .fr-review-tab[aria-selected="true"] {
  transform: var(--fr-raise-1);
  color: var(--fr-ink);
  background-image:
    linear-gradient(180deg, rgba(175, 221, 44, 0.9) 0 2px, rgba(175, 221, 44, 0) 2px),
    linear-gradient(168deg, var(--fr-paper-2) 0%, var(--fr-paper) 100%);
  box-shadow: var(--fr-d3);
}
.fr-page .fr-sec--forward .fr-review-panels {
  grid-column: 1 / -1;
  margin-top: -1px;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 22px);
  border-radius: 0 5px 5px 5px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(168deg, var(--fr-paper-2) 0%, var(--fr-paper) 100%);
  box-shadow: var(--fr-d2);
}
.fr-page .fr-sec--forward .fr-review-panel[hidden] { display: none; }
.fr-page .fr-sec--forward .fr-review-panel { outline: none; }
.fr-page .fr-sec--forward .fr-review-panel:focus-visible {
  outline: 2px solid rgba(175, 221, 44, 0.9);
  outline-offset: 4px;
}
.fr-page .fr-sec--forward .fr-review-panel.is-turning {
  animation: frRevTurn 0.4s var(--fr-ease) 1;
}
@keyframes frRevTurn {
  from { opacity: 0; transform: translate3d(7px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.fr-page .fr-sec--forward .fr-review-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.1vw, 14px) clamp(20px, 2.4vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fr-page .fr-sec--forward .fr-review-panel li {
  position: relative;
  padding-left: 17px;
  font: var(--fr-small) var(--font);
  line-height: 1.55;
  color: var(--fr-ink-2);
}
/* a ruled mark, not a bullet: this is a review sheet */
.fr-page .fr-sec--forward .fr-review-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: rgba(175, 221, 44, 0.75);
}

/* ============================================================
   THE CONTRAST, STATED ON BOTH SIDES
   The left column needed to say why three useful tools still are
   not a system; the right needed to land what replaces them. Two
   closing lines do that, each set in its own column's voice: the
   left quiet and unlit, the right carried on the accent.
   ============================================================ */
.fr-page .fr-sec--relate .fr-shift-caveat {
  grid-column: 1;
  grid-row: var(--row, 5);
  align-self: start;
  max-width: 34ch;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font: var(--fr-small) var(--font);
  font-style: italic;
  line-height: 1.6;
  color: rgba(214, 231, 252, 0.46);
  text-wrap: pretty;
}
.fr-page .fr-sec--relate .fr-shift-land {
  grid-column: 2;
  grid-row: var(--row, 5);
  align-self: start;
  position: relative;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  padding-left: clamp(15px, 1.6vw, 21px);
  font: var(--fr-body) var(--font);
  line-height: 1.55;
  font-weight: 560;
  color: var(--fr-ink);
  text-wrap: pretty;
}
/* the accent edge continues down from the three answers above it, so the
   right-hand column reads as one bound object rather than a list */
.fr-page .fr-sec--relate .fr-shift-land::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background-image: linear-gradient(180deg,
    rgba(175, 221, 44, 0.9) 0%, rgba(175, 221, 44, 0.25) 100%);
}

/* ============================================================
   ON YOUR OWN  vs  WITH FINANCIAL RESET — FINISHING THE SECTION
   Three faults were doing the damage, and none of them was colour:

   1 THE LEFT COLUMN WAS RAGGED, NOT SCATTERED. The three objects
     were offset from --row, so they landed on three different left
     edges (20 / 40 / 29) AND three different right edges
     (345 / 341 / 370). Nothing lined up with anything, which reads
     as a layout that broke rather than as a pile of oddments. They
     are now flush in one column at every width. The difference
     between a template, an app and a course is carried entirely by
     MATERIAL, which is where the difference actually lives — and
     the material is drawn at every width, not only on phones.

   2 THE PAGE NEVER CLOSED. `.fr-shift-to:last-child` matched
     nothing — the group's last child is the closing line, a <p> —
     so the rounded foot and the lime end of the spine were never
     drawn. The third outcome stopped mid-page and the closing line
     sat on bare background. `.is-last` is now in the markup.

   3 THE RIGHT SIDE DID NOT WIN. It was a slightly lighter navy with
     a thin edge. It now sits on raised stock with a lime wash,
     filled check badges and a sealed foot, so the answer plainly
     outweighs the three things it answers.
   ============================================================ */

/* ---- 2. the page closes, at every width ---- */
.fr-page .fr-sec--relate .fr-shift-to.is-last {
  padding-bottom: clamp(26px, 2.6vw, 34px);
}

/* ---- 3a. filled check badges instead of bare ticks ---- */
.fr-page .fr-sec--relate .fr-shift-to > .fr-ico {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 50%;
  stroke-width: 2.8;
  color: #16290a;
  background-image: linear-gradient(145deg, #e2fb86, #aedb2f);
  box-shadow: 0 2px 8px -3px rgba(175, 221, 44, 0.75);
}

/* ============================================================
   1. THE THREE DIY OBJECTS — ALIGNED, AND MADE OF DIFFERENT
   THINGS. One left edge, one right edge, one rhythm. A worksheet,
   a device and a booklet are not the same object, so they are no
   longer drawn as one with the corners nudged. Each keeps the low
   contrast of the side it belongs to: this column is meant to
   recede, just not to look broken.
   ============================================================ */
.fr-page .fr-sec--relate .fr-shift-from {
  transform: none;
  opacity: 0.87;
}

/* A BUDGET TEMPLATE — a printed worksheet. Square corners, a
   punched margin down the left, ruled category rows and empty tick
   boxes: everything still waiting for you to fill it in. */
.fr-page .fr-sec--relate .fr-shift-from[data-kind="template"] {
  --pl: clamp(30px, 3vw, 38px);
  padding: clamp(16px, 1.7vw, 21px) clamp(18px, 1.9vw, 24px)
           clamp(34px, 3.2vw, 40px) var(--pl);
  border-radius: 2px;
  background-image:
    /* the two punch holes in the margin */
    radial-gradient(circle, rgba(8, 15, 28, 0.9) 60%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(circle, rgba(8, 15, 28, 0.9) 60%, rgba(0, 0, 0, 0) 62%),
    /* three empty tick boxes */
    linear-gradient(rgba(214, 231, 252, 0.3), rgba(214, 231, 252, 0.3)),
    linear-gradient(rgba(214, 231, 252, 0.3), rgba(214, 231, 252, 0.3)),
    linear-gradient(rgba(214, 231, 252, 0.3), rgba(214, 231, 252, 0.3)),
    /* the ruled category rows beside them */
    repeating-linear-gradient(180deg,
      rgba(214, 231, 252, 0.15) 0 1px, rgba(0, 0, 0, 0) 1px 11px),
    /* the margin rule */
    linear-gradient(rgba(214, 231, 252, 0.16), rgba(214, 231, 252, 0.16)),
    linear-gradient(168deg, rgba(44, 54, 75, 0.92), rgba(31, 39, 57, 0.92));
  background-repeat: no-repeat;
  background-size:
    5px 5px, 5px 5px,
    7px 7px, 7px 7px, 7px 7px,
    52% 33px,
    1px 100%,
    100% 100%;
  background-position:
    11px 22px, 11px 42px,
    var(--pl) calc(100% - 28px), var(--pl) calc(100% - 17px), var(--pl) calc(100% - 6px),
    calc(var(--pl) + 14px) calc(100% - 30px),
    calc(var(--pl) - 9px) 0,
    0 0;
}

/* A BUDGETING APP — a screen, not a sheet. Device corners, a status
   pill at the head, and a row of uneven history bars at the foot:
   it reports what already happened. */
.fr-page .fr-sec--relate .fr-shift-from[data-kind="app"] {
  --pl: clamp(18px, 1.9vw, 24px);
  padding: clamp(24px, 2.4vw, 30px) var(--pl) clamp(32px, 3vw, 38px);
  border-radius: 17px;
  background-image:
    /* the pill at the top of the screen */
    linear-gradient(rgba(214, 231, 252, 0.34), rgba(214, 231, 252, 0.34)),
    /* four bars of history, uneven, already spent */
    linear-gradient(rgba(214, 231, 252, 0.26), rgba(214, 231, 252, 0.26)),
    linear-gradient(rgba(214, 231, 252, 0.26), rgba(214, 231, 252, 0.26)),
    linear-gradient(rgba(214, 231, 252, 0.26), rgba(214, 231, 252, 0.26)),
    linear-gradient(rgba(214, 231, 252, 0.26), rgba(214, 231, 252, 0.26)),
    /* the baseline they stand on */
    linear-gradient(rgba(214, 231, 252, 0.13), rgba(214, 231, 252, 0.13)),
    linear-gradient(168deg, rgba(22, 29, 46, 0.95), rgba(15, 20, 33, 0.95));
  background-repeat: no-repeat;
  background-size:
    38px 3px,
    6px 9px, 6px 15px, 6px 7px, 6px 18px,
    132px 1px,
    100% 100%;
  background-position:
    50% 10px,
    var(--pl) calc(100% - 15px), calc(var(--pl) + 12px) calc(100% - 15px),
    calc(var(--pl) + 24px) calc(100% - 15px), calc(var(--pl) + 36px) calc(100% - 15px),
    var(--pl) calc(100% - 14px),
    0 0;
  box-shadow:
    inset 0 0 0 1px rgba(214, 231, 252, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--fr-d1);
}

/* AN ONLINE COURSE — a lesson booklet. A module strip across the
   head, a stitched spine, and a shortening contents list inside:
   general material you work through, not your situation. */
.fr-page .fr-sec--relate .fr-shift-from[data-kind="course"] {
  --pl: clamp(26px, 2.6vw, 33px);
  padding: clamp(26px, 2.5vw, 32px) clamp(18px, 1.9vw, 24px)
           clamp(30px, 2.9vw, 36px) var(--pl);
  border-radius: 2px 9px 9px 2px;
  background-image:
    /* three lesson rules, shortening — a contents list */
    linear-gradient(rgba(214, 231, 252, 0.2), rgba(214, 231, 252, 0.2)),
    linear-gradient(rgba(214, 231, 252, 0.2), rgba(214, 231, 252, 0.2)),
    linear-gradient(rgba(214, 231, 252, 0.2), rgba(214, 231, 252, 0.2)),
    /* the module strip at the head of the booklet */
    linear-gradient(90deg,
      rgba(214, 231, 252, 0.22) 0 24%, rgba(214, 231, 252, 0.09) 24% 26%,
      rgba(214, 231, 252, 0.22) 26% 55%, rgba(214, 231, 252, 0.09) 55% 57%,
      rgba(214, 231, 252, 0.22) 57% 100%),
    linear-gradient(168deg, rgba(50, 46, 68, 0.9), rgba(34, 32, 50, 0.9));
  background-repeat: no-repeat;
  background-size:
    38% 2px, 29% 2px, 21% 2px,
    100% 4px,
    100% 100%;
  background-position:
    var(--pl) calc(100% - 26px), var(--pl) calc(100% - 17px), var(--pl) calc(100% - 8px),
    0 0,
    0 0;
}
/* the booklet's stitched spine */
.fr-page .fr-sec--relate .fr-shift-from[data-kind="course"]::after {
  content: '';
  position: absolute;
  left: 12px; top: 20px; bottom: 14px;
  width: 1px;
  background-image: repeating-linear-gradient(180deg,
    rgba(214, 231, 252, 0.34) 0 4px, rgba(0, 0, 0, 0) 4px 9px);
}

/* ============================================================
   THE MONTHLY REVIEW FOLDER — MADE TO LOOK LIKE IT OPENS
   The three headings were already a real tablist, but nothing said
   so. `flex-wrap: wrap` turned them into three full-width bars on a
   phone, which reads as a list of labels; the selected one was
   marked with a 2px line most readers would never notice.

   Three changes, the same ones that fixed the hero folder:
     1 A LIT CUE with the tap badge, so the object announces itself.
     2 ONE ROW THAT SCROLLS instead of three stacked bars — a tab
       strip is a shape people already know how to use, and the
       clipped third tab is what says there is more along.
     3 THE SELECTED TAB IS FILLED AND TALLER and sits on the panel
       it opens, so the pair reads as one folder.
   ============================================================ */

/* ---- 1. THE CUE ---- */
.fr-page .fr-sec--forward .fr-review-cue {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(18px, 2vw, 24px) 0 0;
  padding: 6px 15px 6px 6px;
  border-radius: 999px;
  background-image: linear-gradient(90deg,
    rgba(175, 221, 44, 0.2), rgba(175, 221, 44, 0.05));
  box-shadow: inset 0 0 0 1.5px rgba(175, 221, 44, 0.5);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #dff5a6;
}
.fr-page .fr-sec--forward .fr-review-cue-hand {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 29px; height: 29px;
  border-radius: 50%;
  background-image: linear-gradient(145deg, #e2fb86, #aedb2f);
  color: #16290a;
}
.fr-page .fr-sec--forward .fr-review-cue-hand .fr-ico {
  width: 16px; height: 16px;
  stroke-width: 2.2;
}
.fr-page .fr-sec--forward .fr-review-cue-hand::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(175, 221, 44, 0.62);
  animation: frTapPulse 1.9s var(--fr-ease-soft, ease-out) 3 both;
}
.fr-page .fr-sec--forward .fr-review.is-explored .fr-review-cue-hand::after {
  animation: none;
  opacity: 0;
}
.fr-page .fr-sec--forward .fr-review-cue .fr-cue-point { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fr-page .fr-sec--forward .fr-review-cue .fr-cue-touch { display: none; }
  .fr-page .fr-sec--forward .fr-review-cue .fr-cue-point { display: inline; }
}

/* ---- 2. ONE ROW, NOT THREE BARS ---- */
.fr-page .fr-sec--forward .fr-review-tabs {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 5px;
  margin-top: clamp(11px, 1.3vw, 15px);
  padding: 0 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fr-page .fr-sec--forward .fr-review-tabs::-webkit-scrollbar { display: none; }
.fr-page .fr-sec--forward .fr-review-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 40px;
  margin-top: 8px;
  border-radius: 11px 11px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(150, 190, 235, 0.16),
    0 6px 14px -10px rgba(2, 8, 20, 0.9);
  transition: min-height 0.26s var(--fr-ease), margin 0.26s var(--fr-ease),
    background-image 0.26s var(--fr-ease), box-shadow 0.26s var(--fr-ease),
    color 0.26s var(--fr-ease);
}
/* the hover lift fought the height change; the tab grows instead */
.fr-page .fr-sec--forward .fr-review-tab:hover { transform: none; }
.fr-page .fr-sec--forward .fr-review-tab:hover[aria-selected="false"] {
  margin-top: 4px;
  color: var(--fr-ink);
}

/* ---- 3. THE OPEN TAB IS FILLED, TALLER, AND ON THE PANEL ---- */
.fr-page .fr-sec--forward .fr-review-tab[aria-selected="true"] {
  z-index: 3;
  transform: none;
  min-height: 52px;
  margin-top: 0;
  margin-bottom: -2px;
  padding-bottom: 13px;
  color: #06111f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #c6e85a, #a6d327);
  box-shadow:
    0 -10px 24px -10px rgba(175, 221, 44, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.fr-page .fr-sec--forward .fr-review-panels {
  margin-top: 0;
  border-radius: 0 10px 10px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--fr-d3);
}

/* the folder's own row-gap was opening a 20px gap between the tab and
   the sheet it opens, which breaks the one thing the shape is for. The
   panel closes back onto the row by exactly that gap. */
.fr-page .fr-sec--forward .fr-review-panels {
  margin-top: calc(-1 * clamp(14px, 1.6vw, 20px));
}

/* FR-CLUSTER1-BLOCK:START */
/* Cluster 1 polish: RELATIONSHIP + COMPARISON.
   Lives in this file, not in an appendix elsewhere, because the build
   concatenates the part files in order and these rules must come after
   the equal-specificity rules they replace. */
/* ------------------------------------------------------------
   4. RELATIONSHIP — THE SIGNATURE PHRASE, AND STEVEN'S CARD
   The phrase is a TaxFunders signature line and was set at body
   scale. It now sits between the intro and the card at a size
   that registers, with the brand progression running through it
   and one sheen on arrival. It is not promoted to a headline.
   ------------------------------------------------------------ */
.fr-page .fr-sec--relate .fr-relate-signature {
  --g1: #7fe3ff;
  --g2: #eaf4ff;
  --g3: #bfe65a;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.42em;
  margin: clamp(26px, 3vw, 40px) auto clamp(28px, 3.2vw, 44px);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.9vw, 2.375rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-align: center;
}
.fr-page .fr-sec--relate .fr-relate-signature em {
  font-style: italic;
  font-weight: 500;
}

/* Steven's card: depth, and one trace around its head. The image
   itself is untouched. */
.fr-page .fr-sec--relate .fr-quote--guide {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(214, 238, 255, 0.11),
    inset 0 0 0 1px rgba(150, 190, 235, 0.16),
    0 4px 0 -2px rgba(10, 19, 34, 0.85),
    0 34px 62px -32px rgba(2, 8, 20, 0.95);
}
.fr-page .fr-sec--relate .fr-quote--guide::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
  background-image: var(--fr-trace);
  transform-origin: left center;
  pointer-events: none;
}
.fr-page .fr-sec--relate .fr-quote--guide.revealed::after {
  animation: frTraceX 1s var(--fr-ease) 0.25s 1 both;
}

/* ------------------------------------------------------------
   5. THE COMPARISON LEAD-INS CARRY EQUAL WEIGHT
   "On your own" was set two steps quieter than the side it is
   being compared against, so the page answered a question it had
   not visibly asked. The two kickers are now the same size and
   the same weight; only their COLOUR says which side is which —
   a muted slate-red against the lime.
   ------------------------------------------------------------ */
.fr-page .fr-sec--relate .fr-shift-kicker {
  font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fr-page .fr-sec--relate .fr-shift-head--from .fr-shift-kicker {
  color: #e0a79c;
}
.fr-page .fr-sec--relate .fr-shift-head--to .fr-shift-kicker {
  color: #c7ee62;
}
.fr-page .fr-sec--relate .fr-shift-sub {
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  line-height: 1.45;
}
.fr-page .fr-sec--relate .fr-shift-head--from .fr-shift-sub {
  color: rgba(226, 206, 201, 0.72);
}
.fr-page .fr-sec--relate .fr-shift-head--to .fr-shift-sub {
  color: var(--fr-ink);
}
/* FR-CLUSTER1-BLOCK:END */

/* FR-REVIEWLABEL-BLOCK:START */
/* ============================================================
   THE MONTHLY REVIEW — SHORT CONTROLS, FULL QUESTION
   The three labels totalled ~430px against a 350px rail at 390, so
   the third control lived behind the scroll fade. The controls are
   now one word each and the question they answer is restated at the
   head of the panel, where there is room for it. Each control keeps
   its full wording as its accessible name.
   ============================================================ */
.fr-page .fr-sec--forward .fr-review-q {
  margin: 0 0 clamp(11px, 1.2vw, 15px);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff;
}
/* FR-REVIEWLABEL-BLOCK:END */

/* =========================================================
   8 · PROGRESS — "Progress looks different for everyone.
                   Direction shouldn't."

   STRUCTURE UNCHANGED. The six categories, the FROM / TOWARD pairing,
   the section order and every word of the copy are exactly as approved.
   What changed is that this section is no longer TWO LARGE RECTANGLES
   with the same list written twice inside them.

   WHAT WAS DELETED, and why
     · THE TWO PLANNING SHEETS. `.fr-gains::before` and `::after` drew a
       540px x 630px muted rectangle and a 540px x 630px lit rectangle
       side by side — the exact failure the client named. The comparison
       they carried (unresolved stock vs organised stock) is kept; it has
       simply come down to the scale of ONE LINE, where it belongs.
     · THE GUTTER BLOOM between the two sheets, which only existed to
       light the desk showing between two objects that are now gone.
     · THE EVEN RULES down the organised sheet, and @keyframes
       frGainSheet with them. A rule separates entries on one page. Six
       pages do not need ruling off from each other.
     · The hover rung (d3 -> d4) and the 760px branch that rebuilt the
       whole left sheet as a full-width one — both belonged to the sheets.

   WHAT IS HERE — A TRANSFORMATION SEQUENCE, NOT AN OBJECT
   Each category is one revision, and the two states sit at two different
   heights, on two different materials:

     FROM     written on the bare desk. No paper under it, no edge, no
              shadow: nothing is holding this. Dim, cool, small, and
              indented by a different amount on every line, so the six
              of them visibly do not line up with anything.
     TOWARD   written on that category's own strategy page. The page is
              bound on its left edge with the category's index colour,
              catches the room light along that bound shoulder, holds a
              lit cut at the top, and then DISSOLVES to nothing before it
              reaches its outer side.

   THE DISSOLVE IS THE WHOLE BOX ARGUMENT. Paper that fades out has a top
   edge, a bottom edge and a bound edge, and no fourth side — so it reads
   as a sheet lit near its binding and running out of the light, not as a
   container drawn around some text. Six of them are six pages in a
   folio, not six cards in a grid.

   THE BOX AUDIT, run on this file: rectangles drawn BEFORE this pass, 2
   full ones. AFTER, 0 closed rectangles — six pages, each open on one
   side. `.fr-gain` hands the foundation's portfolio material back, as it
   always has, because a gain here is a revision and not a card.

   MOBILE IS A DIFFERENT COMPOSITION, not this one stacked. Desktop runs
   the transformation ACROSS: quiet left, resolved right, with the light
   pooling in the handoff. The phone runs it DOWN, as six separate
   scenes: the category is promoted from a quiet grey label to the
   scene's heading, inked in the colour its page is indexed with; the old
   wording sits under it, indented and unheld; then the page's index edge
   reaches UP out of the dark in the gap between the two states and the
   resolved line arrives on lit paper, flush to the axis the loose line
   missed. Nothing is centred into a column and nothing is a table.

   MOTION — two mechanisms, both meaning something, both `from`-only, so
   every page is complete before they start, the instant they end, and in
   a browser where the scroll hook never runs:
     frPgStep  the revision is placed: the resolved line arrives from
               slightly below and slightly left — from the binding — one
               category after another down the list, on the same --fr-step
               stagger the old file used
     frPgEdge  the index edge is drawn down the page from its top corner,
               a beat after the line lands. On a phone it starts 18px
               above the paper, so what the visitor watches is the edge
               rising out of the gap between the two states.
   Nothing travels along a line, nothing pulses, nothing loops.
   ========================================================= */


/* ---- 8.1 · THE SEQUENCE -------------------------------------------- */
/* Not a container: a list of six revisions with air between them. No
   background, no border, no shadow, nothing drawn around the set. */
.fr-page .fr-gains {
  --fr-gut: var(--fr-gap);               /* desk between the two states */
  --fr-page-x: 24px;                     /* the written margin on the page */
  --fr-slip: 14px;                       /* how far the unheld state sits low */

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(var(--fr-gap) * 0.95);
  max-width: calc(var(--fr-measure) * 2);
  margin: calc(var(--fr-gap) * 1.2) auto calc(var(--fr-gap) * 0.5);
}
/* The sheets used to bleed --fr-sheet-y past this element, which forced a
   large offset that `.fr-sec { overflow: clip }` then ate at seven of the
   ten audited widths. Nothing bleeds now, so the ring sits close and is
   whole at every width, including the 16px gutter at 360. */
.fr-page .fr-gains:focus-visible {
  outline: 2px solid var(--fr-lime);
  outline-offset: 10px;
  border-radius: 2px;
}


/* ---- 8.2 · ONE REVISION, TWO HEIGHTS -------------------------------- */
/* The foundation gives `.fr-gain` the portfolio material, which is right
   wherever a gain is its own card. Here it is a revision, so the row
   hands the material back and draws NOTHING of its own — no fill, no
   edge, no shadow, and no tinted wash behind the type. A soft accent
   bloom was tried across the handoff and deleted after measuring it: at
   any alpha strong enough to see, a 300px-wide radial sitting behind
   small dim type photographs as a smudge on the desk, not as light.
   What carries the eye across the gutter is the two states themselves —
   right-aligned and dim on one side, flush and lit on the other.

   THE QUIET SIDE FACES THE SPINE. The category and the old wording are
   set right-aligned against the gutter, so the six loose lines end on a
   wavering edge, each one short of the spine by a different amount,
   while every resolved page begins exactly on it. One disordered edge
   facing one hard edge, across a strip of bare desk: that is the whole
   claim of the section, and it is visible before a word is read. */
.fr-page .fr-gain {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  column-gap: var(--fr-gut);
  border-radius: 0;
  background-image: none;
  box-shadow: none;
}

/* THE CATEGORY. Named once, on the quiet side, flush to the spine — the
   index is the one ordered thing on this half — and deliberately the
   dimmest ink in the row, because this side is the starting point and
   not the statement. 0.82 keeps it at 5.9:1 on bare ground, a better
   figure than it measured on the old muted sheet. */
.fr-page .fr-gain-area {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: 2px 0 0;
  /* the unheld state sits low, and each line drifts by its own amount */
  transform: translate3d(0, calc(var(--fr-slip) + var(--fr-drift, 0px)), 0);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
  opacity: 0.82;
}
.fr-page .fr-gain-area .fr-ico {
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
}

/* THE OLD WORDING. Bare desk: no stock, no edge, no shadow. Indented by
   a different amount on every line and written in a different weight of
   ink, because an unresolved list not lining up is the one thing this
   half has to say without being read. The faint floor is 0.78 and not
   lower: at 0.72 the cool "From" label measured 4.63:1 on the ground,
   and a label may not be the one thing on the page that fails. */
.fr-page .fr-gain-was {
  grid-column: 1;
  grid-row: 2;
  margin: 0 var(--fr-loose, 0px) 0 0;
  padding: 7px 0 0;
  transform: translate3d(0, calc(var(--fr-slip) + var(--fr-drift, 0px)), 0);
  font: var(--fr-small) var(--font);
  line-height: 1.7;
  text-align: right;
  color: var(--fr-ink-2);
  opacity: var(--fr-fade, 0.9);
  text-wrap: pretty;
}
/* cooler than the ink around it — the state the visitor is leaving is
   the cool end of the section's own indigo-to-cyan light. Measured at
   the faintest row: 5.58:1. */
.fr-page .fr-gain-was > span {
  margin-right: 0.72em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fr-ink-2) 82%, #6f7ee0);
}

/* THE REVISION, ON ITS OWN STRATEGY PAGE.
   Three layers, in paint order, and every one of them is light or stock:
     1  the catch of light just inside the bound edge, 26px and gone
     2  the bottom cut, taking shade, fading out well before the page does
     3  THE STOCK, and it is a RADIAL FROM THE BINDING, not a left-to-
        right ramp. Measured: a linear fade still photographed as a bar,
        because a gradient that only varies in x leaves a hard top and a
        hard bottom running the full width, and two long parallel edges
        is a bar however soft the right-hand end is. Thrown from the top
        corner of the binding the light falls off in BOTH axes at once,
        so what is left is a lit quarter of paper dying into the desk —
        a sheet caught near its binding, with one printed edge, one lit
        cut, and no fourth side anywhere.
   The literal rgba values are --fr-paper-2 (29,48,82) and --fr-paper
   (22,36,63); they are written out only because a gradient needs the
   same hue at zero alpha to fade without greying through
   transparent-black. */
.fr-page .fr-gain-now {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* THE SHEET IS CUT TO WHAT IS WRITTEN ON IT. Stretched to the column
     all six came out the same width, and six equal slabs of light
     stacked at an equal pitch is a table however softly each one ends.
     Sized to its own line they measure 410-500px at 1440: they all
     start on the same spine and end wherever the sentence does. */
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 15px var(--fr-page-x) 16px;
  border-radius: 0;
  background-image:
    linear-gradient(90deg, rgba(150, 190, 235, 0.07) 0px, rgba(150, 190, 235, 0) 26px),
    linear-gradient(90deg, rgba(3, 10, 22, 0.42) 0%, rgba(3, 10, 22, 0) 34%),
    radial-gradient(122% 108% at 0% 0%,
      rgba(29, 48, 82, 0.95) 0%,
      rgba(24, 40, 70, 0.6) 32%,
      rgba(22, 36, 63, 0) 74%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 1px, 100% 100%;
  background-position: 0 0, 0 100%, 0 0;
  font: var(--fr-body) var(--font);
  line-height: 1.62;
  font-weight: 500;
  color: var(--fr-ink);
  text-wrap: pretty;
  transition: color 0.34s var(--fr-ease);
}
/* THE BOUND INDEX EDGE — the colour this page is filed under in the
   folio, printed into its binding. It tapers down the sheet the way the
   foundation's divider tab does, 0.9 to 0.52, and carries no halo: a
   glowing bar is the software tell. It is two pixels over about ninety,
   which is an index colour; the rejected version of this section ran one
   unbroken edge down 700px of sheet, and length is exactly what turns an
   index colour into a rail. */
.fr-page .fr-gain-now::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  transform-origin: 0 0;
  background-image: linear-gradient(180deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.92) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.34) 100%);
}
/* the lit cut along the top of the stock, dying out with the page */
.fr-page .fr-gain-now::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  height: 1px;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
}
.fr-page .fr-gain-now > span {
  display: block;
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, rgb(var(--acc-rgb, 56, 207, 255)) 62%, var(--fr-ink));
  transition: color 0.34s var(--fr-ease);
}
/* The hovered revision brightens. The old wording is never dimmed to
   make the point — that ink is already at its measured floor, and a
   hover state may not spend contrast. The label is mixed toward WHITE
   rather than further toward the accent: two of the four accents are
   darker than --fr-ink, and at 84% accent the indigo and royal rows
   measured 4.47:1 on this stock. 72% on white is more saturated than the
   rest state and measures 5.42:1 at that same worst case. */
.fr-page .fr-gain:hover .fr-gain-now { color: var(--white); }
.fr-page .fr-gain:hover .fr-gain-now > span {
  color: color-mix(in srgb, rgb(var(--acc-rgb, 56, 207, 255)) 72%, var(--white));
}


/* ---- 8.3 · NOTHING ON THE OLD SIDE LINES UP ------------------------- */
/* Six insets, six drifts, six weights of ink. --fr-step staggers the
   arrival of the resolved line from the same list, so the revisions land
   in the order they are read. */
.fr-page .fr-gains > .fr-gain:nth-child(1) { --fr-loose: 0px;  --fr-fade: 0.94; --fr-drift: 0px;  }
.fr-page .fr-gains > .fr-gain:nth-child(2) { --fr-loose: 15px; --fr-fade: 0.86; --fr-drift: -3px; --fr-step: 0.07s; }
.fr-page .fr-gains > .fr-gain:nth-child(3) { --fr-loose: 5px;  --fr-fade: 0.9;  --fr-drift: 2px;  --fr-step: 0.14s; }
.fr-page .fr-gains > .fr-gain:nth-child(4) { --fr-loose: 19px; --fr-fade: 0.82; --fr-drift: -4px; --fr-step: 0.21s; }
.fr-page .fr-gains > .fr-gain:nth-child(5) { --fr-loose: 8px;  --fr-fade: 0.88; --fr-drift: 3px;  --fr-step: 0.28s; }
.fr-page .fr-gains > .fr-gain:nth-child(6) { --fr-loose: 22px; --fr-fade: 0.78; --fr-drift: -2px; --fr-step: 0.35s; }


/* ---- 8.4 · ARRIVAL -------------------------------------------------- */
/* MECHANISM 1 — the revision is placed. It comes in from below and from
   the binding side, which is the direction a page is laid down from, and
   it settles. One category after another. */
@keyframes frPgStep {
  from { opacity: 0; transform: translate3d(-12px, 10px, 0); }
}
/* MECHANISM 2 — the index edge is drawn down the page from its top
   corner, a beat behind the line it indexes. */
@keyframes frPgEdge {
  from { opacity: 0; transform: scaleY(0.08); }
}
.fr-page .fr-gains.revealed > .fr-gain > .fr-gain-now {
  animation: frPgStep 0.78s var(--fr-ease) backwards;
  animation-delay: var(--fr-step, 0s);
}
.fr-page .fr-gains.revealed > .fr-gain > .fr-gain-now::before {
  animation: frPgEdge 0.62s var(--fr-ease) backwards;
  animation-delay: calc(var(--fr-step, 0s) + 0.1s);
}

/* =========================================================
   9 + 10.  INVESTMENT  ·  STATEMENT  ·  CONSULTATION  ·  FAQ  ·  LEGAL
   ---------------------------------------------------------
   THE INVESTMENT WAS REBUILT, NOT ELEVATED. The previous pass drew a
   folio containing TWO PAGES side by side, one per price. However well
   that was made, it said the wrong thing: a $199 page beside a $149
   page is two products on a shelf. Financial Reset is ONE program, one
   agreement, one continuous engagement that starts with a build and
   keeps running. The composition now says that.

   THE OBJECT: ONE PROGRAM SHEET. A single piece of program stock with
   the agreement's head at the top, then STAGE ONE, then a real FOLD
   across the full width of the sheet, then STAGE TWO on the same sheet
   below the fold. A fold is the one mark that can only be made by a
   single piece of paper, which is exactly the argument. Running down
   the sheet's left margin, from a solid cyan start tick, through the
   fold where it widens into a stage marker and turns lime, and fading
   out past the last line of stage two, is the CONTINUATION EDGE: one
   unbroken line that begins at $199 and does not end. Two further
   sheets of the program show as edges at the foot.

   WHAT WAS DELETED IN THIS REBUILD, NOT OVERRIDDEN
     · the two page pseudo-elements (.fr-invest::before / ::after as
       left page and right page) — these WERE the two cards
     · the spine shade down the centre of a two-page spread, and the
       980 query that switched it off
     · the seven-stop gradient border around the whole folio: the
       direction it stated is now stated by the continuation edge,
       which is attached to the content it sequences
     · the symmetric 1fr / 1fr grid, which made the two prices equals
     · the folio's own fill, border and elevation: .fr-invest is now
       pure layout and draws nothing. The sheet is one pseudo-element
       that stops ABOVE the two actions, so "Talk first" and "Ready to
       start" sit BENEATH the program on the section ground instead of
       inside the object as its footer
     · the top hairline over .fr-invest-paths, which tied the actions
       back into the box they had just left
     · frFolioPage / frFolioTab / frPriceSet — replaced by a motion set
       whose first move is the continuation edge DRAWING downward

   THE BOX REDUCTION AUDIT, re-run after the rebuild.
     · .fr-invest-part, .fr-invest-col — were pages, are now bands of
       type on the one sheet. No fill, no border, no shadow.
     · .fr-invest::before — THE SHEET. One real object, and now the
       only surface in the section.
     · .fr-invest::after — THE FOLD. Not a box: 1px of crease, 1px of
       lit return, the stage marker and two soft leaf shades.
     · .fr-next-num — divider tabs. Real markers.
     · .fr-next-num--photo — Steven, the destination. Real.
     · .fr-choice, .fr-statement, .fr-next-steps, .faq-item, .fr-legal —
       all fill-less, carried by hairline, tab, typography and air.
   Visible rectangles in the Investment went from seven to four: the
   sheet, its back-sheet edges counted as one, and the two buttons.

   MOBILE IS A DIFFERENT COMPOSITION, not the desktop stacked.
     Desktop  a ledger: narrow amount column, wide inclusions column,
              two stage bands divided by the fold.
     Mobile   one continuous vertical program strip. The amount and its
              inclusions share one column, each stage opens with a
              chapter rule carrying its tab, and the continuation edge
              runs the WHOLE height of the sheet — four content rows and
              the fold — as a single unbroken line. The two actions
              leave the sheet and centre on the section's mobile axis.
     Consultation  desktop keeps four quiet columns; mobile is rebuilt
              as a numbered progression — tab and title on ONE line per
              step, hairline between, then a chevron on the margin and
              Steven as a wider destination row with the largest type
              and the only photograph.

   KEYFRAMES — one family, prefixed frInv, colliding with nothing:
     frInvEdge   the continuation edge draws from the start tick down
     frInvTab    a divider tab shifts out of the sheet's margin
     frInvSet    a figure sets into the stock
   All run once, on reveal, from a `from` frame, so every element's
   resting style IS its finished style and reduced motion shows the
   whole composition resolved. Nothing pulses, scans, travels or loops.
   ========================================================= */

/* ---------------------------------------------------------
   0 · NO TOKEN BLOCK, AND NO SECOND TYPE SCALE
   This file declares NO custom properties. 00-foundation.css states
   --fr-pad, --fr-shell, --fr-measure, the three headline tiers, the
   depth ladder and the ink and stock colours on .fr-page, and restating
   any of them here pinned this chapter's gutters and leading away from
   the rest of the page the last time it was tried.

   NO HEADLINE SIZE IS SET IN THIS FILE. The Investment sits on the
   flagship tier by name in 00-foundation.css. The two places below that
   read --fr-h2 are the price figure and the pull quote: neither is a
   section headline, and both consume the shared scale rather than
   declaring one. The price deliberately stays one tier UNDER the
   section headline — 63px against 73px at 1440, 40px against 44px at
   390 — so the headline stays dominant on a phone.

   Two literals repeat through the Investment instead of becoming
   tokens, and they are the sheet's geometry:
     sheet inset   clamp(28px, 2.8vw, 40px)   type's margin on the stock
     edge offset   clamp(14px, 1.5vw, 22px)  where the continuation
                                              edge runs, in that margin
   Every element that must line up on the edge uses the second literal
   verbatim, which is what keeps the line unbroken across four grid rows
   and the fold at every width.

   DEPTH COMES FROM THE LADDER. The sheet is the section's primary
   object at --fr-d3, the tabs on it are raised pages at --fr-d2,
   Steven is --fr-d2, the consultation numbers are --fr-d1. No bespoke
   elevation shadow is written here; where a ladder token appears inside
   a longer list the other entries are MATERIAL — back-sheet edges, an
   inlaid stripe, a lit return.
   --------------------------------------------------------- */

/* =========================================================
   1 · THE PROGRAM SHEET
   .fr-invest draws nothing at all. It is a five-row grid:
     1  the agreement head
     2  STAGE ONE   amount | what it covers
     3  THE FOLD    full width
     4  STAGE TWO   amount | what it covers
     5  the two actions, off the sheet, on the ground
   ::before is the sheet and spans rows 1-4. ::after is the fold.
   The wrappers the markup puts around the prices and the inclusions
   (.fr-invest-equation, .fr-invest-value) stay display: contents so the
   four content blocks land on this grid directly and can be interleaved
   amount / inclusions / amount / inclusions out of DOM order build,
   active, covers-1, covers-2.

   The columns are deliberately UNEQUAL — 0.84 against 1.6. Two equal
   columns is what made the old spread read as two products; an amount
   column narrower than its description column is what a statement, an
   invoice and an agreement all look like.

   NOTE: .fr-invest-equation carries role="group" with an aria-label
   naming both fees. Current engines keep the semantics of a
   display: contents element; where one does not, both fees remain
   present and individually labelled by their own Part tab and name.
   ========================================================= */
/* THE SHARED PAPER IS HANDED BACK, exactly the way 50-build.css does it
   for .fr-scope and 70-progress.css for .fr-gain, and for the reason
   00-foundation.css section 6 anticipates: .fr-invest is named in the
   shared paper rule, which gives it a page's stock, radius and --fr-d2.
   It is no longer a page. It is the LAYOUT the program sheet is printed
   on, and it has to reach past the sheet's foot to carry the two
   actions on the section ground. Leaving foundation's surface on it
   drew a second, taller rectangle around everything — the object AND
   its buttons in one box, which is the box this rebuild exists to
   remove. If this file ever stops drawing its own sheet, delete the
   hand-back here and the name THERE in the same pass. */


/* ---- row 1 · the agreement head ---- */


/* =========================================================
   2 · THE CONTINUATION EDGE
   One line, drawn in pieces that share a single left offset so they
   read as one: the build stage, the fold, the active stage, and — on a
   phone only, where the inclusions take their own rows — the two
   inclusion bands. It starts on a solid cyan tick under the head, runs
   teal through stage one, widens and turns lime at the fold, and FADES
   OUT before the foot of the sheet, because the second fee does not
   stop.

   This is the section's whole argument in one mark, and it is the
   reason the two prices can never be read as two products: they are
   physically joined, on one sheet, by one line.
   ========================================================= */


/* THE DIVIDER TAB — ONE CONSTRUCTION, THREE SETTINGS
   Page stock, an inlaid accent stripe on the bound edge, a hairline
   shade where that stripe meets the stock, a bound-edge radius.fr-page .fr-next-num{
  display: inline-flex;
  align-items: center;
  border: 0;
  background-image: linear-gradient(174deg, var(--fr-paper-2) 0%, var(--fr-paper) 100%);
  font: var(--fr-small) var(--font);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fr-ink);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(4, 10, 22, 0.45);
}
.fr-page .fr-next-num {
  padding: 7px 14px 7px 15px;
  border-radius: 0 6px 6px 0;
  letter-spacing: 0.14em;
  box-shadow:
    inset 2px 0 0 rgba(175, 221, 44, 0.82),
    inset 3px 0 0 rgba(3, 10, 22, 0.42),
    var(--fr-d1);
}

/* The figure. Serif, at the shared section size, solid fill — the price
   never depends on background-clip, a gradient or a glow. The 1px
   letterpress shade is how a figure printed on stock sits IN it. */


/* =========================================================
   3 · THE TWO ACTIONS, BENEATH THE PROGRAM
   Row 5 is BELOW the sheet: the object ends, the ground shows, then two
   actions. They are not a footer of the agreement and they are not two
   cards — a wider primary column, a narrower secondary one, one rule
   between them, and the hierarchy carried by width, by type size and by
   the weight of the control.

   A pool of illumination behind the primary column was tried in an
   earlier pass and cut: a radial fade inside a bounded box terminates
   at that box's edges, so the column read as a faint green CARD. The
   depth in this block lives in the two buttons, where it belongs.
   ========================================================= */
.fr-page .fr-sec--decide .fr-invest-paths {
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px);
  /* the gap is measured from the BACK-SHEET edges, which stand 22px
     below the front sheet, not from the sheet itself */
  align-items: start;
  margin-top: clamp(48px, 5.4vw, 80px);
}
.fr-page .fr-sec--decide .fr-choice { min-width: 0; }
.fr-page .fr-sec--decide .fr-choice:nth-child(2) {
  padding-left: clamp(28px, 3vw, 48px);
  box-shadow: inset 1px 0 0 var(--fr-edge);
}
.fr-page .fr-sec--decide .fr-choice-kicker {
  margin: 0 0 10px;
  font: var(--fr-small) var(--font);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fr-lime);
}
.fr-page .fr-sec--decide .fr-choice-kicker--ready { color: var(--fr-ink-2); }
.fr-page .fr-sec--decide .fr-choice-label {
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  max-width: 30ch;
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fr-ink);
  text-wrap: balance;
}
.fr-page .fr-sec--decide .fr-choice:nth-child(2) .fr-choice-label {
  font: var(--fr-body) var(--font-serif);
  font-weight: 500;
  line-height: 1.35;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--decide .fr-choice-note {
  margin: 14px 0 0;
  max-width: 34ch;
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-sec--decide .fr-choice-note a {
  color: var(--fr-lime);
  border-bottom: 1px solid rgba(175, 221, 44, 0.35);
  padding-bottom: 1px;
}
.fr-page .fr-sec--decide .fr-choice-note a:hover { border-bottom-color: var(--fr-lime); }
.fr-page .fr-sec--decide .fr-choice-note a:focus-visible {
  outline: 2px solid var(--fr-lime);
  outline-offset: 3px;
  border-radius: 3px;
}
/* white-space is reset because the site-wide .btn is nowrap with
   overflow: hidden, which silently CLIPS "Schedule My Financial Reset
   Consultation" at every width from 520 up. It wraps and centres. */
.fr-page .fr-sec--decide .fr-choice .btn:not(.btn-sm) {
  width: 100%;
  white-space: normal;
  text-align: center;
}
.fr-page .fr-sec--decide .fr-choice:nth-child(2) .btn:not(.btn-sm) {
  min-height: 54px;
  padding: 16px 22px 16px 26px;
}
/* The consultation button is left entirely to the shared CTA family:
   every CTA on this page moves the same distance. What the enrolment
   face gets is real depth AT REST, where the two controls are compared
   — --fr-d2, rising one step to --fr-d3 on hover and settling to
   --fr-d1 pressed. Foundation's press rule is (0,4,1) and these are
   (0,5,0) and (0,6,0), so the press has to be restated here or the
   face travels 2px down while the material says nothing. */
.fr-page .fr-sec--decide .fr-choice .btn-secondary:not(.btn-sm) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(2, 8, 20, 0.4),
    var(--fr-d2);
}
.fr-page .fr-sec--decide .fr-choice .btn-secondary:not(.btn-sm):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(2, 8, 20, 0.4),
    var(--fr-d3);
}
.fr-page .fr-sec--decide .fr-choice .btn-secondary:not(.btn-sm):active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 2px 6px rgba(2, 8, 20, 0.4),
    var(--fr-d1);
}

/* =========================================================
   4 · THE STATEMENT  —  TYPOGRAPHY ONLY
   One quotation mark, one sentence at the shared section size, one
   attribution. No rule, no rail, no node. After the sheet this is the
   page's quiet beat, and it earns its weight from the serif and from
   the air around it.
   ========================================================= */
.fr-page .fr-statement {
  margin: calc(var(--fr-pad) * 0.72) 0 0;
  padding: clamp(36px, 3.6vw, 56px) 0 0;
  box-shadow: inset 0 1px 0 var(--fr-edge);
}
.fr-page .fr-statement-mark {
  display: block;
  margin: 0 0 -0.26em;
  font-family: var(--font-serif);
  font-size: var(--fr-h2);
  font-weight: 600;
  line-height: 0.8;
  color: var(--fr-ink-2);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.fr-page .fr-statement-mark::before { content: '\201C'; }
.fr-page .fr-statement blockquote { margin: 0; }
.fr-page .fr-statement p {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fr-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: var(--fr-ink);
  text-wrap: balance;
}
.fr-page .fr-statement figcaption {
  margin: clamp(26px, 2.6vw, 38px) 0 0;
  padding: 0;
  font: var(--fr-small) var(--font);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}

/* =========================================================
   5 · THE CONSULTATION  —  A SEQUENCE, NOT A MACHINE
   Operational, and deliberately the calmest construction in the
   chapter. Desktop keeps four quiet columns with a numbered tab at the
   head of each, a serif name, one line of plain text, and the
   photograph of Steven as the last and largest marker — the
   destination. No rail, no station, no connector, no node. A subgrid
   gives all four markers one row so the names align.
   ========================================================= */
.fr-page .fr-next { margin-top: calc(var(--fr-pad) * 0.72); }
.fr-page .fr-next .fr-eyebrow { margin-inline: 0; }


/* the marker row is as tall as the photograph, so the four tabs hang
   from its foot and each sits directly above its own heading */

/* Steven, unaltered: the one photograph on the path, larger than the
   four tabs and at the page's raised elevation, because he is the end
   of the sequence and not an image under it. */

/* Two of --fr-d2's four parts are INSET and an inset shadow paints
   under content, so the photograph covered the lit edge and the
   hairline. This returns both above the image and adds no elevation. */


.fr-page .fr-next-foot { margin-top: clamp(38px, 3.8vw, 56px); }
.fr-page .fr-next-reassure {
  margin: 12px 0 0;
  max-width: var(--fr-measure);
  font: var(--fr-small) var(--font);
  line-height: 1.6;
  /* --fr-ink-2, not --text-muted: the global muted blue measured
     rgb(122,147,192) here against every other note in this chapter */
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* =========================================================
   6 · FAQ  —  PLAIN ROWS, NOT DESIGNED
   The contract names this section as one that must not be illustrated,
   and the rebuild added NOTHING here: no fill, no shadow, no gradient,
   no ladder level, no object, no motion. It is the quietest rhythm on
   the page by design, it follows the loudest object on the page, and
   the only thing it needed was air. Head left, rows right, hairline
   between, serif question, chevron, answer.
   ========================================================= */
.fr-page .fr-faq {
  display: grid;
  gap: clamp(38px, 5vw, 60px);
  align-items: start;
}
.fr-page .fr-faq-head {
  max-width: var(--fr-measure);
  margin: 0;
}
.fr-page .fr-sec--faq .faq-list {
  display: block;
  gap: 0;
  box-shadow: inset 0 1px 0 var(--fr-edge);
}
.fr-page .fr-sec--faq .faq-item {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 -1px 0 var(--fr-edge);
  scroll-margin-top: 96px;
}
.fr-page .fr-sec--faq .faq-item.open {
  background: none;
  box-shadow: inset 2px 0 0 var(--fr-lime), inset 0 -1px 0 var(--fr-edge);
}
.fr-page .fr-sec--faq .faq-question {
  align-items: baseline;
  gap: 20px;
  padding: clamp(21px, 2.1vw, 27px) 4px clamp(21px, 2.1vw, 27px) 16px;
  font-family: var(--font-serif);
  font-size: var(--fr-h3);
  font-weight: 500;
  line-height: 1.28;
  color: var(--fr-ink);
  text-wrap: balance;
}
.fr-page .fr-sec--faq .faq-question:hover { color: var(--fr-lime); }
.fr-page .fr-sec--faq .faq-question:focus-visible {
  outline: 2px solid var(--fr-lime);
  outline-offset: -2px;
}
.fr-page .fr-sec--faq .faq-chevron {
  align-self: center;
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--faq .faq-item.open .faq-chevron { color: var(--fr-lime); }
.fr-page .fr-sec--faq .faq-answer-inner {
  max-width: 68ch;
  padding: 0 4px clamp(23px, 2.3vw, 30px) 16px;
  font: var(--fr-body) var(--font);
  line-height: 1.65;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-sec--faq .faq-answer-inner a {
  color: var(--fr-lime);
  border-bottom: 1px solid rgba(175, 221, 44, 0.35);
  padding-bottom: 1px;
}
.fr-page .fr-sec--faq .faq-answer-inner a:hover { border-bottom-color: var(--fr-lime); }
.fr-page .fr-sec--faq .faq-answer-inner a:focus-visible {
  outline: 2px solid var(--fr-lime);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =========================================================
   7 · THE CLOSING BAND
   One headline at the section size, one button, one line of
   reassurance. The arrival stem, the accent bar and the travelling
   gradient border are long gone; the button keeps the standing edge
   every other in-page CTA has, straight from the shared family.
   ========================================================= */
.fr-page .fr-close {
  border-top: 0;
  padding: var(--fr-pad) 0;
  background: none;
}
.fr-page .fr-close-inner { max-width: 820px; margin: 0 auto; }
.fr-page .fr-close .btn:not(.btn-sm) { min-width: min(100%, 420px); }

/* =========================================================
   8 · LEGAL  —  QUIET AND READABLE
   No fill, no border, no shadow: a disclosure is not an object.
   ========================================================= */
.fr-page .fr-legal {
  position: relative;
  padding: clamp(26px, 2.6vw, 38px) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 1px 0 var(--fr-edge);
}
.fr-page .fr-legal p {
  margin: 0;
  font: var(--fr-small) var(--font);
  line-height: 1.8;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-legal p + p { margin-top: 16px; }

/* =========================================================
   9 · MOTION  —  THE OBJECT MOVES, NOTHING ELSE
     frInvEdge  the continuation edge DRAWS, from the start tick down
                through stage one, the fold and stage two. This is the
                one move in the section that carries the argument: the
                engagement begins at $199 and keeps going.
     frInvTab   a divider tab shifts out of the sheet's left margin,
                the way an index tab is pulled from a closed folder
     frInvSet   a figure sets into the stock — a short rise, no scale
                and no count-up, so a locked price is never mid-render
   All three run once, on reveal, from a `from` frame, so the resting
   style is the finished style. Nothing loops, pulses, scans or travels
   across a face, and the section is complete standing still.
   ========================================================= */
@keyframes frInvEdge {
  from { transform: scaleY(0); }
}
@keyframes frInvTab {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
}
@keyframes frInvSet {
  from { opacity: 0; transform: translate3d(0, 0.26em, 0); }
}


/* the figure sets one stage after the other, in the order the program
   runs in — they still stand on one object, they simply arrive in turn */


/* =========================================================
   10 · RESPONSIVE
   The builder hoists these widest-first. Audited at 1440 / 1280 / 1180 /
   1024 / 900 / 768 and 430 / 400 / 390 / 360. Section padding steps
   137 -> 88 -> 64 centrally; nothing here changes headline scale. No
   horizontal overflow at any width: the sheet is a grid item of a
   width: 100% grid, and the back-sheet edges under it are drawn with
   NEGATIVE spread so they are always inside the sheet's own sides.
   ========================================================= */
@media (min-width: 981px) {
  .fr-page .fr-faq { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .fr-page .fr-legal {
    columns: 2;
    column-gap: clamp(36px, 3.6vw, 56px);
    column-fill: balance;
  }
  
}

/* ============================================================
   ONE CARD, ONE PRICE LINE, ONE LIST
   Two stage blocks each with their own coverage list is what made
   this read as two products. The amounts now sit on a single line
   joined by "then", a sentence states how they work together, and
   the two lists are merged into one set of inclusions.
   ============================================================ */


/* the hinge between the two amounts: one quiet word, so the eye reads a
   sequence inside one program rather than two priced things */


/* the continuation mark between the two amounts, on the one sheet */


/* the amounts read left to right on one line: fee, then monthly */


/* ============================================================
   THE ACTIONS ARE NOT PART OF THE PRICE
   The two paths used to live inside the program sheet, which made
   the sheet grow tall enough to swallow them and read as one slab
   of navy. They are a sibling block now, with real space above
   them and their own lead-in, so the page reads:
   PROGRAM / INVESTMENT -> space -> CHOOSE HOW TO PROCEED.
   ============================================================ */
.fr-page .fr-sec--decide .fr-invest-choose {
  margin-top: clamp(34px, 4.4vw, 62px);
}
.fr-page .fr-sec--decide .fr-invest-choose-k {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(214, 231, 252, 0.52);
}
/* the paths sit on open ground now, divided by a hairline rather than
   sharing the sheet's fill */
.fr-page .fr-sec--decide .fr-invest-choose .fr-invest-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.4vw, 60px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.fr-page .fr-sec--decide .fr-invest-choose .fr-choice + .fr-choice {
  padding-left: clamp(28px, 3.4vw, 60px);
  border-left: 1px solid var(--fr-edge);
}
/* FR-INVEST-BLOCK:START */
/* ============================================================
   THE PROGRAM DOSSIER
   What was here was one navy rounded rectangle: a 168deg ramp over
   ~700px of card, which at that scale is a flat fill; a uniform
   14-20px radius that threw away the bound-document cue every other
   surface on this page has; and --fr-d3, whose inset 1px ring drew
   the hard outline on all four sides. Inside it, almost nothing —
   one hairline, and a second layer of padding on the children that
   pushed the first line of type ~82px off the left edge, so most of
   the object was empty navy.

   It is now a dossier: bound on its left edge, built from layers
   that are actually offset from one another, with a raised header
   strip, one dominant investment lockup, and an open ledger of what
   the program includes. One sheen crosses it when it arrives, once.

   THE FIGURES ARE UNCHANGED: $199 initial, $149/mo ongoing, and the
   eight includes lines are exactly as they were.
   ============================================================ */

.fr-page .fr-sec--decide .fr-invest {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  column-gap: clamp(26px, 3vw, 54px);
  row-gap: 0;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 0;
  /* BOUND ON THE LEFT, like every other document here */
  border-radius: 4px 20px 20px 4px;
  background-image:
    /* the bound edge, cyan into lime down the spine */
    linear-gradient(180deg,
      rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 52%,
      rgba(175, 221, 44, 0.95) 100%),
    /* the light falling across the head of the sheet */
    radial-gradient(88% 64% at 4% -8%,
      rgba(132, 196, 255, 0.11) 0%, rgba(132, 196, 255, 0) 58%),
    /* and a low lime ambience in the far corner */
    radial-gradient(72% 58% at 100% 104%,
      rgba(175, 221, 44, 0.07) 0%, rgba(175, 221, 44, 0) 62%),
    linear-gradient(158deg, #17253d 0%, #0f1a2c 56%, #0a1322 100%);
  background-size: 4px 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(214, 238, 255, 0.1),
    0 3px 9px -5px rgba(2, 8, 20, 0.8),
    0 42px 78px -34px rgba(2, 8, 20, 1);
}

/* THE SHEET FILED UNDER IT. A real offset layer, not the 9px sliver the
   old ::before showed: the dossier is one document in a file, and the one
   behind it is what says so. It sits at z-index -1 on a parent that is
   z-index 1, so it paints behind this object's own background but stays
   in front of the section — the same arrangement the Tax Prep sheet uses
   for its slabs. Nothing here may be given `overflow: hidden`, a filter
   or an opacity below 1, or the layer disappears. */
.fr-page .fr-sec--decide .fr-invest::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 11px; right: -11px;
  top: 14px; bottom: -14px;
  border-radius: 4px 20px 20px 4px;
  background-image: linear-gradient(158deg,
    rgba(34, 51, 80, 0.62) 0%, rgba(16, 26, 44, 0.62) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(150, 190, 235, 0.1),
    0 26px 50px -30px rgba(2, 8, 20, 1);
}

/* ---- ONE SHEEN, ON ARRIVAL ---- */
.fr-page .fr-sec--decide .fr-invest::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background-image: linear-gradient(104deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(206, 240, 255, 0.11) 48%,
    rgba(255, 255, 255, 0) 58%);
  background-size: 260% 100%;
}
.fr-page .fr-sec--decide .fr-invest.revealed::after {
  animation: frDossierSheen 1.65s var(--fr-ease-soft, ease-out) 0.3s 1 both;
}
@keyframes frDossierSheen {
  0%   { background-position: 150% 0; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { background-position: -70% 0; opacity: 0; }
}

/* ============================================================
   THE RAISED HEADER STRIP
   ============================================================ */
.fr-page .fr-sec--decide .fr-invest-head {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin: 0;
  padding: clamp(16px, 1.7vw, 23px) clamp(22px, 2.4vw, 38px);
  border-radius: 4px 20px 0 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(158deg, rgba(38, 56, 86, 0.6) 0%, rgba(22, 35, 58, 0.6) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(150, 190, 235, 0.16),
    0 10px 22px -18px rgba(2, 8, 20, 0.9);
}
.fr-page .fr-sec--decide .fr-invest-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
  font-weight: 500;
  letter-spacing: 0.004em;
  color: #ffffff;
}
.fr-page .fr-sec--decide .fr-invest-kicker {
  margin: 0;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(175, 221, 44, 0.92);
}

/* ============================================================
   THE LOCKUP — ONE EQUATION, NOT TWO PRODUCTS
   ============================================================ */
.fr-page .fr-sec--decide .fr-invest-equation {
  grid-column: 1;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: clamp(24px, 2.8vw, 40px) clamp(14px, 1.4vw, 22px)
           clamp(24px, 2.8vw, 40px) clamp(22px, 2.4vw, 38px);
}
.fr-page .fr-sec--decide .fr-invest-part {
  min-width: 0;
  margin: 0;
}
.fr-page .fr-sec--decide .fr-price {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin: 0;
  font-family: var(--font);
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
}
.fr-page .fr-sec--decide .fr-price-num {
  font-size: clamp(2.375rem, 3.5vw, 3.25rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
}
.fr-page .fr-sec--decide .fr-price-per {
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--decide .fr-price-label {
  margin: clamp(7px, 0.8vw, 10px) 0 0;
  font-family: var(--font);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fr-ink-3, rgba(214, 231, 252, 0.56));
}
/* THE CONNECTOR. A luminous join between the two figures, so the pair
   reads as one sum and not as a menu of two things to buy. */
.fr-page .fr-sec--decide .fr-invest-join {
  flex: none;
  align-self: center;
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  font-family: var(--font);
  font-size: clamp(1.625rem, 2.1vw, 2rem);
  font-weight: 250;
  line-height: 1;
  color: rgba(186, 230, 60, 0.98);
  text-shadow: 0 0 26px rgba(175, 221, 44, 0.6);
}

/* ============================================================
   WHAT THE TWO FIGURES COVER
   ============================================================ */
.fr-page .fr-sec--decide .fr-invest-howto {
  grid-column: 2;
  position: relative;
  z-index: 2;
  align-self: center;
  margin: 0;
  padding: clamp(22px, 2.6vw, 38px) clamp(22px, 2.4vw, 38px)
           clamp(22px, 2.6vw, 38px) clamp(20px, 2.2vw, 32px);
  font: var(--fr-body) var(--font);
  line-height: 1.62;
  color: var(--fr-ink-2);
  text-wrap: pretty;
  /* a hairline gutter between the figures and their explanation */
  box-shadow: inset 1px 0 0 rgba(150, 190, 235, 0.1);
}
.fr-page .fr-sec--decide .fr-invest-howto strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 650;
  color: #ffffff;
}

/* ============================================================
   WHAT THE PROGRAM INCLUDES — AN OPEN LEDGER, NOT A BULLET LIST
   ============================================================ */
.fr-page .fr-sec--decide .fr-invest-value {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 38px)
           clamp(22px, 2.5vw, 34px);
  border-radius: 0 0 20px 4px;
  box-shadow: inset 0 1px 0 rgba(150, 190, 235, 0.13);
  background-image: linear-gradient(180deg,
    rgba(2, 8, 20, 0.22) 0%, rgba(2, 8, 20, 0.06) 100%);
}
.fr-page .fr-sec--decide .fr-invest-covers {
  margin: 0 0 clamp(10px, 1.1vw, 15px);
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--decide .fr-invest-value ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(26px, 3vw, 54px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fr-page .fr-sec--decide .fr-invest-value li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: clamp(7px, 0.75vw, 10px) 0;
  border-top: 1px solid rgba(150, 190, 235, 0.09);
  font: var(--fr-body-sm, 0.875rem/1.5) var(--font);
  color: var(--fr-ink);
  text-wrap: pretty;
}
/* the first row of EACH column opens the ledger, so neither column
   starts with a stray rule above it */
.fr-page .fr-sec--decide .fr-invest-value li:nth-child(1),
.fr-page .fr-sec--decide .fr-invest-value li:nth-child(2) { border-top: 0; }
.fr-page .fr-sec--decide .fr-invest-value li .fr-ico {
  flex: none;
  width: 13px; height: 13px;
  margin-top: 4px;
  stroke-width: 3;
  color: #bfe74f;
  filter: drop-shadow(0 0 7px rgba(175, 221, 44, 0.55));
}

/* ============================================================
   THE CTA AREA STAYS OUTSIDE THE OBJECT
   It belongs to the section, not to the dossier; it only needs to
   read as the next thing, with air between.
   ============================================================ */
.fr-page .fr-sec--decide .fr-invest-choose {
  margin-top: clamp(36px, 4.4vw, 62px);
}
/* FR-INVEST-BLOCK:END */

/* FR-CONSULT-BLOCK:START */
/* ============================================================
   THE CONSULTATION JOURNEY
   What was here was four columns of text under four small numbers,
   with no connective tissue and Steven arriving as an unnumbered
   fourth thing. It read as a list of chores, not as a route you
   can see the end of — which is the one job this section has.

   It is now ONE ROUTE with three stations. A cyan -> teal -> lime
   rail runs through the three nodes and is drawn once, left to
   right, as the section arrives. The nodes are dimensional and
   large enough to be the thing you read first; Steven is station
   03 and sits ON the rail, so the route visibly ends at a person.

   The stations are open editorial blocks, not three equal cards.
   ============================================================ */

.fr-page .fr-next .fr-journey {
  --node: clamp(58px, 5.2vw, 74px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(26px, 3vw, 54px);
  margin: clamp(38px, 3.8vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}

/* ---- THE ROUTE ----
   It runs between the FIRST and LAST node centres, not the full
   width, so it starts and ends on a station instead of trailing
   off into the margin. One sixth in from each side is exactly the
   centre of an outer column in a three-track grid. */
.fr-page .fr-next .fr-journey::before {
  content: '';
  position: absolute;
  z-index: 0;
  /* the nodes sit at the START of their columns, not centred in them,
     so the route runs between the first and last node CENTRES: half a
     node in from the left, and a third of the track minus half a node
     in from the right. At 16.666% it started in open space short of
     station 01. */
  left: calc(var(--node) / 2);
  right: calc(33.3333% - var(--node) / 2);
  top: calc(var(--node) / 2 - 1px);
  height: 2px;
  border-radius: 2px;
  background-image: var(--fr-trace);
  transform-origin: left center;
  pointer-events: none;
}
.fr-page .fr-next.revealed .fr-journey::before {
  animation: frTraceX 1.35s var(--fr-ease) 0.25s 1 both;
}

.fr-page .fr-next .fr-journey-stage {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
}

/* ---- A STATION ---- */
.fr-page .fr-next .fr-journey-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  margin: 0 0 clamp(18px, 1.9vw, 26px);
  border-radius: 50%;
  font-family: var(--font);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(162deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.26) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.08) 100%),
    linear-gradient(162deg, #1b2a44 0%, #111c30 100%);
  box-shadow:
    inset 0 1px 0 rgba(226, 240, 255, 0.22),
    inset 0 0 0 1.5px rgba(var(--acc-rgb, 56, 207, 255), 0.55),
    0 0 0 7px rgba(10, 18, 32, 0.95),
    0 14px 26px -14px rgba(2, 8, 20, 0.95),
    0 0 26px -6px rgba(var(--acc-rgb, 56, 207, 255), 0.4);
}
.fr-page .fr-next .fr-journey-node b {
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgb(var(--acc-rgb, 56, 207, 255));
  text-shadow: 0 0 18px rgba(var(--acc-rgb, 56, 207, 255), 0.5);
}
/* the route ends at a person, so the last station is his face */
.fr-page .fr-next .fr-journey-node--photo {
  overflow: hidden;
  background-image: none;
}
/* the photo paints over the node's inset ring, so station 03 gets its
   ring back on top of the image — otherwise the last station is the
   only one not visibly ON the route */
.fr-page .fr-next .fr-journey-node--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(var(--acc-rgb, 175, 221, 44), 0.8),
    inset 0 0 14px -4px rgba(2, 8, 20, 0.7);
}
.fr-page .fr-next .fr-journey-node--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---- WHAT HAPPENS THERE ---- */
.fr-page .fr-next .fr-journey-card {
  min-width: 0;
  padding-top: clamp(14px, 1.4vw, 19px);
  border-top: 1px solid rgba(150, 190, 235, 0.14);
}
.fr-page .fr-next .fr-journey-card h3 {
  margin: 0 0 clamp(8px, 0.9vw, 11px);
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;
  text-wrap: balance;
}
.fr-page .fr-next .fr-journey-card p {
  margin: 0 0 clamp(8px, 0.9vw, 11px);
  font: var(--fr-small) var(--font);
  line-height: 1.62;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}
.fr-page .fr-next .fr-journey-card p:last-child { margin-bottom: 0; }

.fr-page .fr-next .fr-journey-list {
  margin: 0 0 clamp(10px, 1.1vw, 14px);
  padding: 0;
  list-style: none;
}
.fr-page .fr-next .fr-journey-list li {
  position: relative;
  padding: clamp(5px, 0.6vw, 7px) 0 clamp(5px, 0.6vw, 7px) 19px;
  font: var(--fr-small) var(--font);
  line-height: 1.55;
  color: var(--fr-ink);
  text-wrap: pretty;
}
.fr-page .fr-next .fr-journey-list li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(0.78em + 2px);
  width: 9px; height: 1.5px;
  border-radius: 1px;
  background: rgba(var(--acc-rgb, 68, 181, 156), 0.85);
}
/* the boundary this stage exists to make clear */
.fr-page .fr-next .fr-journey-flag {
  margin-top: clamp(10px, 1.1vw, 14px);
  padding: clamp(9px, 1vw, 12px) clamp(11px, 1.2vw, 15px);
  border-radius: 2px 7px 7px 2px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fr-ink);
  background-image:
    linear-gradient(90deg, rgba(var(--acc-rgb, 68, 181, 156), 0.9) 0 2px, rgba(0, 0, 0, 0) 2px),
    linear-gradient(110deg, rgba(var(--acc-rgb, 68, 181, 156), 0.1), rgba(var(--acc-rgb, 68, 181, 156), 0.03));
}
.fr-page .fr-next .fr-journey-flag strong { color: #ffffff; font-weight: 700; }

/* ---- UNDER THE ROUTE ---- */
.fr-page .fr-next .fr-next-foot {
  margin-top: clamp(32px, 3.4vw, 52px);
  padding-top: clamp(18px, 1.9vw, 26px);
  box-shadow: inset 0 1px 0 rgba(150, 190, 235, 0.12);
}
.fr-page .fr-next .fr-next-reassure {
  margin: 0 0 clamp(9px, 1vw, 13px);
  font: var(--fr-small) var(--font);
  line-height: 1.55;
  color: var(--fr-ink-2);
}
/* readable, and plainly secondary */
.fr-page .fr-next .fr-journey-note {
  max-width: 92ch;
  margin: 0;
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--fr-ink-3, rgba(214, 231, 252, 0.52));
  text-wrap: pretty;
}
/* FR-CONSULT-BLOCK:END */

/* FR-CLUSTER5-BLOCK:START */
/* ============================================================
   AUTHORSHIP, THEN COMPLIANCE
   These were one block of grey fine print, so the signature
   methodology and its author read as a disclaimer. They are two
   different things with two different jobs and now look like it:
   a branded authorship plate, then the service-boundary text
   beneath it in plainly lower hierarchy.
   ============================================================ */
.fr-page .fr-sec--legal .fr-authorship {
  position: relative;
  margin: 0 0 clamp(34px, 3.6vw, 54px);
  padding: clamp(26px, 2.8vw, 40px) clamp(24px, 2.6vw, 38px)
           clamp(24px, 2.6vw, 36px);
  border-radius: 3px 16px 16px 3px;
  text-align: center;
  background-image:
    /* bound on the brand progression, like every other document here */
    linear-gradient(180deg,
      rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 52%,
      rgba(175, 221, 44, 0.95) 100%),
    radial-gradient(86% 70% at 50% 0%,
      rgba(132, 196, 255, 0.07) 0%, rgba(132, 196, 255, 0) 62%),
    linear-gradient(168deg, #16233a 0%, #0e1829 62%, #0a1322 100%);
  background-size: 3px 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(214, 238, 255, 0.1),
    0 26px 52px -32px rgba(2, 8, 20, 0.95);
}
.fr-page .fr-sec--legal .fr-authorship-eyebrow {
  margin: 0 0 clamp(11px, 1.2vw, 15px);
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fr-ink-2);
}
/* the signature line takes the brand gradient and one sheen, the same
   primitive the pillar titles and the relationship phrase use */
.fr-page .fr-sec--legal .fr-authorship-title {
  --g1: #7fd0ff;
  --g2: #4fc6c0;
  --g3: #c6e95a;
  margin: 0 0 clamp(15px, 1.6vw, 21px);
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 3.1vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.fr-page .fr-sec--legal .fr-authorship-title .fr-tm {
  -webkit-text-fill-color: rgba(214, 231, 252, 0.45);
  color: rgba(214, 231, 252, 0.45);
  font-size: 0.4em;
  vertical-align: super;
}
.fr-page .fr-sec--legal .fr-authorship-by {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 clamp(14px, 1.5vw, 19px);
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fr-ink-2);
}
.fr-page .fr-sec--legal .fr-authorship-by strong {
  font-weight: 700;
  color: #ffffff;
}
.fr-page .fr-sec--legal .fr-authorship-note {
  max-width: 62ch;
  margin: 0 auto;
  padding-top: clamp(13px, 1.4vw, 18px);
  border-top: 1px solid rgba(150, 190, 235, 0.13);
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.62;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* the compliance text: readable, and plainly the quieter of the two */
.fr-page .fr-sec--legal .fr-legal p {
  font-size: 0.75rem;
  line-height: 1.62;
  color: var(--fr-ink-3, rgba(214, 231, 252, 0.5));
}
/* FR-CLUSTER5-BLOCK:END */




/* ============================================================
   13 · RESPONSIVE — recomposed, never shrunk
   The builder hoists these widest-first. --fr-pad is the only spacing
   that steps, and it steps exactly where the contract says: 137 · 88 at
   980 · 64 at 560. Audited at 1440/1280/1180/1024/900/768 and
   430/400/390/360.
   ============================================================ */
@media (max-width: 1180px) {
  .fr-page { --fr-shell: min(1208px, 100% - 56px); }
}


/* ---- 6 · NARROW DESKTOP (1180) — the object gives up padding, proud
   width and entry length rather than type -------------------------- */
@media (max-width: 1180px) {
  .fr-page .fr-hero { min-height: min(100svh, 870px); }
  .fr-page .fr-hero > .fr-shell {
    grid-template-columns: minmax(0, 1fr) clamp(324px, 31vw, 372px);
    column-gap: clamp(14px, 1.6vw, 24px);
  }
  .fr-page .fr-hero-copy { max-width: min(600px, 100%); }
  .fr-page .fr-hero .fr-lede { max-width: min(100%, 40ch); }
  
  
  
  .fr-page .fr-hero-media { width: 78vw; right: -12%; }
}
@media (max-width: 1180px) and (min-width: 981px) {
  .fr-page .fr-hero .fr-folio {
    --fo-tab: 40px;
    --fo-tab-open: 46px;
    --fo-sheet-pad: 16px;
  }
  .fr-page .fr-hero .fr-folio-tab { font-size: 0.625rem; }
}


/* REDUCED MOTION IS THE FINISHED PICTURE. Nothing here is hidden,
   half-drawn, at a different angle, a different offset or a different
   opacity from the animated end state: the organizer is there, its cut
   edge is full width, all six pages are at rest where they belong,
   every entry is written and both captions are set. frPicLight needs no
   parking rule — its resting opacity is 0 and both ends of its cycle
   are 0, so with the animation off no band ever crosses the object. */


/* =========================================================
   BREAKPOINTS — audited at 1440 / 1280 / 1180 / 1100 / 1024 / 980 /
   900 / 768 and 600 / 430 / 400 / 390 / 360. The desktop assembly hands
   over to the phone narrative at 980. Nothing reaches past the object's
   own width except a 10–15px index tab, and the object is inside the
   shell at every width it is shown at.
   ========================================================= */
@media (max-width: 1180px) {
  .fr-page .fr-define { column-gap: clamp(36px, 4.4vw, 66px); }
  
  
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .fr-sec--method { --fr-colgap: clamp(24px, 3.2vw, 44px); --fr-stop: clamp(62px, 5.8vw, 82px); }
}


/* ============================================================
   RESPONSIVE — recomposed, never shrunk. The builder hoists these
   widest-first. Audited at 1440/1280/1180/1024/900/768 and
   430/400/390/360. Type never comes down to solve a layout: the
   headline tiers hold their own floors and every step below is spacing
   or composition. Every overlap, stair and span set above is CLEARED
   before a narrower one is set, so no span or negative margin survives
   into a layout that does not want it.
   ============================================================ */
@media (max-width: 1180px) {
  /* four pages become two overlapping pairs: the left page of each pair
     is overlapped by the right one and sits a stair lower, so the
     gesture survives the recomposition instead of flattening to a grid */
  .fr-page .fr-work ol {
    --fr-ovl: clamp(16px, 2vw, 28px);
    --fr-stair: clamp(8px, 0.9vw, 12px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 3.2vw, 42px);
  }
  .fr-page .fr-work li:nth-child(1),
  .fr-page .fr-work li:nth-child(2),
  .fr-page .fr-work li:nth-child(3),
  .fr-page .fr-work li:nth-child(4) {
    --fr-ovl-pad: 0px;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .fr-page .fr-work li:nth-child(odd) {
    --fr-ovl-pad: var(--fr-ovl);
    margin-right: calc(var(--fr-ovl) * -1);
    margin-top: calc(var(--fr-stair) * 2);
  }
  .fr-page .fr-work li:nth-child(even) { margin-bottom: calc(var(--fr-stair) * 2); }
  .fr-page .fr-plan { column-gap: clamp(40px, 4.4vw, 64px); }
}


/* =========================================================
   BREAKPOINTS
   Audited at 1440 / 1280 / 1180 / 1024 / 900 / 768 and
   430 / 400 / 390 / 360. Each section is RECOMPOSED rather than
   squeezed, no headline is shrunk to solve a layout, and nothing with
   depth is ever clipped: every tab, every peeking sheet and every light
   is checked against the shell gutter at each step, and the gutter is
   the number that steps (64 · 56 · 40 · 32).
   ========================================================= */

/* ---- 1180 ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .fr-page .fr-sec--relate .fr-shift { column-gap: clamp(26px, 3.4vw, 54px); }
  .fr-page .fr-sec--fit .fr-fit-list li::after { left: -44px; width: 182px; }
}



/* =========================================================
   BREAKPOINTS — recomposed, never shrunk
   Three arrangements: a dealt row of four, a loose quartet, and a leafed
   pile. Audited at 1440 / 1280 / 1180 / 1024 / 900 / 768 and
   430 / 400 / 390 / 360. The two sheets never merge into one.
   ========================================================= */

/* ---- 1024 AND DOWN: the quartet ------------------------------------
   Two rows of two. The lap stays on the second slip of each row so a row
   is still one sheet laid over another, and the two rows are dealt at
   different heights. The slips lose their height floor here: at this
   width the sentences fill them and a floor only opens a void. */
@media (max-width: 1024px) {
  .fr-page .fr-diagnosis { flex-wrap: wrap; }
  .fr-page .fr-diagnosis .fr-dx { flex: 1 1 42%; }
  .fr-page .fr-dx-symptom { min-height: 0; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(1) { margin-top: 0; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(2) { margin-top: 26px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(3) { margin-top: calc(var(--fr-gap) + var(--fr-dx-tab) + 10px); margin-left: 0; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(4) { margin-top: calc(var(--fr-gap) + var(--fr-dx-tab) + 34px); }
}
@media (max-width: 1024px) {
  .fr-sec--method {
    --fr-rail: clamp(70px, 7.4vw, 84px);
    --fr-tab-h: clamp(48px, 5vw, 54px);
    --fr-sheet-in: 28px;
  }
  .fr-method-head { max-width: min(48rem, 100%); }
  .fr-pillars .fr-pillar-detail { max-width: 46ch; }
}


/* ---- 1024: the edition set folds into two pairs ---------------------
   Four 215px pages would set their labels three lines deep. Two rows of
   two keeps the label on one or two lines and the note readable, and
   the lap stays on the second page of each row — so each row is still
   two bound pages rather than a pair of cards. The climb is released
   here: on two rows an uneven top edge is a misalignment, not a
   progression, and depth plus thickness still carry it. */
@media (max-width: 1024px) {
  .fr-page .fr-sec--forward .fr-route-stages { flex-wrap: wrap; }
  .fr-page .fr-sec--forward .fr-route-stages li {
    flex: 1 1 44%;
    min-height: 0;
    margin-top: 0;
  }
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(3) {
    margin-left: 0;
    margin-top: clamp(32px, 3.6vw, 40px);
  }
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(4) { margin-top: clamp(32px, 3.6vw, 40px); }
}



/* ---- 8.5 · NARROWER ------------------------------------------------- */
/* MEASURED, not guessed: at 768 the 0.72fr quiet column left the sheet
   exactly as wide as the sentence written on it, so the stock had no
   room left to dissolve in and the page went back to being a slab
   jammed against the shell. The quiet side holds a label and a short
   phrase and can give the room back — at 0.52fr the sheet keeps 100px
   or more of falloff all the way down to 901, which is where the
   composition changes instead. */
@media (max-width: 1024px) {
  .fr-page .fr-gains {
    --fr-gut: calc(var(--fr-gap) * 0.8);
    --fr-page-x: 20px;
    --fr-slip: 11px;
  }
  .fr-page .fr-gain { grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr); }
  .fr-page .fr-gain-area { gap: 8px; letter-spacing: 0.15em; }
  .fr-page .fr-gain-was > span,
  .fr-page .fr-gain-now > span { letter-spacing: 0.15em; }
}
@media (max-width: 1024px) {
  /* the amount column cannot take $149/month on one line much below
     this, so the ledger squares up before it breaks */
  
}
@media (max-width: 980px) {
  .fr-page { --fr-pad: 88px; }
}


/* ---- 7 · TABLET AND PHONE (980) — THE FACE SAFE ZONE ----------------
   The plate becomes a full-bleed block at the top of the reading order,
   its lower third dissolving to nothing; then, in clear air, the marker,
   the statement, the paragraph, the CTA, the setup link and the organizer.
   The arithmetic below is the approved arithmetic and this pass did not
   move it: `--fr-hm` is the plate's height, the photograph's mask is fully
   transparent from 80% of it, the copy is pulled up by 14% of it —

     width   --fr-hm   photo gone by   copy starts at   clear air
     430     361px     289px           311px            22px
     400     336px     269px           289px            20px
     390     328px     262px           282px            20px
     360     302px     242px           260px            18px

   — so the marker can never sit inside the picture and nothing crowds his
   head at any phone width. */
@media (max-width: 980px) {
  .fr-page .fr-hero {
    min-height: 0;
    justify-content: flex-start;
    padding: 84px 0 clamp(30px, 6vw, 38px);
    --fr-hm: clamp(300px, 84vw, 392px);
  }
  .fr-page .fr-hero::after {
    left: -12%; right: -12%; bottom: -10%; height: 42%;
    background:
      radial-gradient(44% 11% at 50% 14%, rgba(234, 242, 255, 0.15) 0%, transparent 76%),
      linear-gradient(180deg, rgba(14, 26, 48, 0) 0%, rgba(14, 26, 48, 0.3) 22%,
        rgba(7, 14, 29, 0.48) 60%, rgba(2, 8, 20, 0.72) 100%),
      radial-gradient(68% 56% at 50% 100%, rgba(2, 8, 20, 0.66) 0%, transparent 76%);
  }
  .fr-page .fr-hero-atmos { opacity: 0.5; }
  .fr-page .fr-hero-media { position: relative; inset: auto; width: 100%; height: var(--fr-hm); margin: 0; }
  /* the photograph is taken out by its OWN MASK — a dissolve can never end
     opaque, or it prints a hard horizontal line at the figure's box. No
     filter, no tint, no blur, no reframing through his face. */
  .fr-page .fr-hero-media img {
    object-position: 58% 50%;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 2%, #000 5%,
        #000 58%, rgba(0, 0, 0, 0.34) 72%, transparent 80%),
      linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 2%, #000 5%,
        #000 58%, rgba(0, 0, 0, 0.34) 72%, transparent 80%),
      linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-composite: intersect;
  }
  /* the environmental fade: up from nothing and back to nothing, so it
     adds no edge of its own */
  .fr-page .fr-hero-media::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 56%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 14, 29, 0) 0%, rgba(7, 14, 29, 0.4) 40%,
      rgba(7, 14, 29, 0.62) 66%, rgba(7, 14, 29, 0.34) 88%, rgba(7, 14, 29, 0) 100%);
  }
  .fr-page .fr-hero > .fr-shell { display: block; flex: 0 0 auto; margin-top: calc(var(--fr-hm) * -0.14); }
  .fr-page .fr-hero-copy {
    max-width: 620px;
    margin-inline: auto;
    --fr-hc-top: 0px; --fr-hc-bot: 0px;
    text-align: center;
  }
  .fr-page .fr-hero .fr-lede { margin: 18px auto 0; }
  .fr-page .fr-hero-actions { margin: 24px auto 0; justify-content: center; width: 100%; max-width: 460px; }
  .fr-page .fr-hero-actions .btn-primary:not(.btn-sm) {
    width: 100%;
    min-height: 62px;
    padding: 15px 18px;
    line-height: 1.34;
    white-space: normal; text-wrap: balance;
  }
  .fr-page .fr-hero-setup { margin-top: 14px; text-align: center; }

  /* ================================================================
     THE ORGANIZER ON A PHONE — A DIFFERENT OBJECT, NOT A STACKED ONE
     ----------------------------------------------------------------
     Desktop draws a right-bound portfolio seen at a turn, with its
     dividers standing proud SIDEWAYS across the gutter into the copy
     column. On a phone there is no gutter to reach into and no portrait
     to stand beside, and that sideways band is exactly what used to push
     the object off both edges of a 390 screen.

     So the phone draws a TOP-TAB organizer instead. Six dividers in two
     ranks across the HEAD of the sheet, centred; the loose sheets fan
     DOWN below the front page instead of left, which is the one place a
     phone has room and the clearest possible statement of "there is a
     stack of these"; no spine, because a top-tab organizer has none; and
     the sheet itself rewritten as a RULED LEDGER PAGE — one entry per
     line, label then the written cue, a rule under each — instead of the
     printed two-column summary block desktop sets. Square to the reader,
     because the turn in space was a function of standing beside a
     portrait.

     NOTHING STANDS PROUD SIDEWAYS, so nothing can overflow or clip at
     430/400/390/360: the object is centred inside the shell with the
     shell's own margins either side of it.
     ================================================================ */
  
  /* the cover is the organizer's back board: it shows at the foot and a
     little either side, and the ranks of tabs break its head */
  
  
  /* TWO RANKS OF THREE ACROSS THE HEAD. The basis is a third of the row
     minus the gaps, so it is exactly three per rank at every phone width
     and no name has to wrap or shrink to make the arithmetic work. */
  
  
  /* the index edge runs across the TOP of a top tab, which is where the
     colour is on the only kind of divider that has tabs up there */
  
  
  
  /* the index notations are drawn down a side edge; across a top edge they
     would be six different stripes running the wrong way, so the phone
     carries the plain edge and the colour alone */
  
  /* no spine on a top-tab organizer */
  
  
  
  
  
  
  
  
  
  
}


/* ============================================================
   THE ORGANIZER IS NOW INTERACTIVE
   Six real button[role=tab] over six panels. The markup ships with
   Cash flow open and the rest `hidden`, so with no JS the sheet still
   reads as a finished strategy overview. Everything below is
   printed-on-paper: dark ink on bone stock, ruled rows, a right-hand
   figure column. No control chrome, no dashboard.
   ============================================================ */


/* THE CUE. One short line with an arrow turned toward the dividers —
   enough to say these open, without a banner telling you to click. */


/* the printed provenance stamp, so no figure reads as a real client */


/* the qualifier under a line: a due date, or a note that a figure has
   already been counted inside the bills reserve, so nothing reads twice */


/* the four purposes keep the tabs colour, darkened to printing ink so
   they stay legible on bone stock */


/* progress drawn to the real fraction: 1800/6000 and 2750/8000 */


/* the one-shot attention cue: light crosses the dividers once, in order */
@media (max-width: 980px) {
  /* tablets are touch too: a divider is a tap target before it is a label */
  
}



/* THE FRAMING LINE. A panel that opens with figures makes the reader work
   out what they are looking at. Each divider now states what this part of
   the picture is for, then shows the sample. */


/* ============================================================
   THE HERO FOLDER, BUILT LIKE THE TAX PREPARATION BINDER
   Three things make that component read as a real tabbed file,
   and none of them were here:
     1 THE CUE IS A CONTROL. A lit pill with a tap-hand badge that
       pulses until the reader opens a divider, not a line of small
       uppercase type floating above the object.
     2 THE OPEN DIVIDER IS TALLER. It grows and rises out of the
       row; the closed ones sit lower and further back. Colour
       alone never says "this one is open".
     3 EVERY DIVIDER CARRIES ITS OWN TONE, so the row reads as a
       set of coloured index cards instead of six identical chips.
   ============================================================ */


/* ---- 1. THE CUE ---- */


/* the ring breathes until a divider has been opened, then stops for good */


/* one label for fingers, one for a cursor */


/* ---- 2 + 3. THE DIVIDERS ---- */
@media (max-width: 980px) {
  
  /* closed: shorter, pushed down, sitting behind the open one */
  
  /* open: taller, flush to the top of the row, saturated, lit from above */
  
}


/* ============================================================
   THE PHONE — A RAIL THAT SCROLLS
   Six dividers cannot sit across a 350px sheet without becoming
   illegible, and wrapping them into a 3x2 block turns the object
   into a menu. The rail scrolls instead: about three and a half
   dividers are in view, the next one is visibly cut by the edge, and
   the driver scrolls a tab into view when the keyboard reaches it.
   The scroll is inside the rail, so the page itself never overflows.
   ============================================================ */
@media (max-width: 980px) {
  .fr-page .fr-hero .fr-folio {
    align-self: auto;
    width: 100%;
    margin: clamp(30px, 8vw, 44px) 0 0;
    transform: none;
    --fo-pad: 11px;
    --fo-sheet-pad: 17px;
    --fo-tab: 44px;
    --fo-tab-open: 50px;
    --fo-r: 16px;
    --fo-sheet-r: 12px;
  }
  .fr-page .fr-hero .fr-folio-leaf { display: none; }

  .fr-page .fr-hero .fr-folio-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* the cut edge reads as "the rail carries on", not as a clipped box */
    -webkit-mask-image: linear-gradient(90deg,
      #000 0, #000 calc(100% - 26px), rgba(0, 0, 0, 0.12) 100%);
    mask-image: linear-gradient(90deg,
      #000 0, #000 calc(100% - 26px), rgba(0, 0, 0, 0.12) 100%);
  }
  .fr-page .fr-hero .fr-folio-tabs::-webkit-scrollbar { display: none; }
  .fr-page .fr-hero .fr-folio-tab {
    flex: 0 0 auto;
    width: 92px;
    scroll-snap-align: start;
    font-size: 0.6875rem;
  }
  /* the open divider never hides behind the fade */
  .fr-page .fr-hero .fr-folio-tab[aria-selected="true"] { scroll-snap-align: center; }
}


/* The pages are at their narrowest just above the handover, so the page
   margins and the tab come down a notch and the loose pages give back
   some of their drift. The jut does NOT close up: the colour on the
   fore-edge is the outermost mark in the picture. */


/* The header goes one column before the measure on either side gets
   short enough to hyphenate. */


/* Tablet and down: the desk-and-organizer composition hands over to the
   vertical narrative. */
@media (max-width: 980px) {
  .fr-page .fr-define { grid-template-columns: minmax(0, 1fr); row-gap: clamp(24px, 3vw, 32px); }
  .fr-page .fr-define-head { grid-column: 1; grid-row: 1; }
  .fr-page .fr-define-body { grid-column: 1; grid-row: 2; max-width: 62ch; padding: 0; }
  
  
  
  
  
  /* THE LABEL MOVES TO THE FOOT. At the head of the object it was a
     title on a box; at the foot it is the name of the finished thing,
     which is the sentence this section has to land. */
  
}
@media (max-width: 980px) {
  .fr-page .fr-build-head { grid-template-columns: minmax(0, 1fr); }
  .fr-page .fr-build-head > .fr-h2 { grid-column: 1; grid-row: 2; }
  .fr-page .fr-build-head > .fr-body {
    grid-column: 1;
    grid-row: 3;
    margin-top: clamp(16px, 1.6vw, 22px);
    padding-bottom: 0;
  }
  /* THE SPREAD CLOSES TO ONE COLUMN HERE, not to two. Two pages side by
     side need the six-column spread; below it they are two pages read
     one after the other, and the four index entries run continuously
     under them as one index. The grid gap goes to zero so the entries'
     own rules butt together, and the two pages carry their own spacing. */
  .fr-page .fr-scope-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fr-page .fr-scope-grid li,
  .fr-page .fr-scope-grid li:nth-child(1),
  .fr-page .fr-scope-grid li:nth-child(2),
  .fr-page .fr-scope-grid li:nth-child(3),
  .fr-page .fr-scope-grid li:nth-child(6) { grid-column: 1; grid-row: auto; }
  .fr-page .fr-scope-grid li:nth-child(1) { margin-bottom: clamp(26px, 3.4vw, 36px); }
  /* AND DEBT PAYOFF JOINS THE INDEX. Two pages side by side need the
     six-column spread to be read as two pages; stacked one above the
     other in a single column they are two dark blocks and the hierarchy
     is gone. From here down the spread holds exactly ONE page and a
     five-entry index under it. */
  .fr-page .fr-scope-grid li:nth-child(2) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(11px, 1.1vw, 14px);
    row-gap: clamp(5px, 0.6vw, 8px);
    align-items: start;
    align-content: start;
    padding: clamp(17px, 1.7vw, 22px) 0 clamp(15px, 1.6vw, 20px);
    border-top: 1px solid var(--fr-edge);
    border-radius: 0;
    background-image: none;
    box-shadow: none;
  }
  .fr-page .fr-scope-grid li:nth-child(2)::after {
    top: -1px;
    bottom: auto;
    width: clamp(26px, 2.6vw, 34px);
    height: 3px;
    border-radius: 0 0 2px 2px;
    background-image: linear-gradient(90deg,
      rgba(var(--acc-rgb, 175, 221, 44), 0.95) 0%,
      rgba(var(--acc-rgb, 175, 221, 44), 0.5) 100%);
    box-shadow: inset 0 -1px 0 rgba(3, 10, 22, 0.42);
  }
  .fr-page .fr-scope-grid li:nth-child(2) .fr-scope-icon { grid-column: 1; grid-row: 1; }
  .fr-page .fr-scope-grid li:nth-child(2) .fr-ico { width: 19px; height: 19px; }
  .fr-page .fr-scope-grid li:nth-child(2) h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.0625rem;
    line-height: 1.35;
  }
  .fr-page .fr-scope-grid li:nth-child(2) p { grid-column: 2; grid-row: 2; }
  .fr-page .fr-scope-grid li:nth-child(2):hover { box-shadow: none; transform: none; }
  /* with no grid gap left, each index entry carries the space under its
     own description, so the next entry's rule never sits on the text */
  .fr-page .fr-scope-grid li:nth-child(n+3) { padding-bottom: clamp(15px, 1.6vw, 20px); }
  /* the closing entry stops setting on one line here: its label and its
     note would each break anyway, and a wrapped one-liner reads as a
     mistake rather than as the close of an index */
  .fr-page .fr-scope-grid li:nth-child(6) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: clamp(5px, 0.6vw, 8px);
    padding: clamp(17px, 1.7vw, 22px) 0 0;
  }
  .fr-page .fr-scope-grid li:nth-child(6) h3 { white-space: normal; grid-column: 2; grid-row: 1; }
  .fr-page .fr-scope-grid li:nth-child(6) p { grid-column: 2; grid-row: 2; }

  /* THE ACTION PLAN ORDER, OFF THE DESKTOP SPLIT, AND IT IS FIXED:
       1 eyebrow · 2 headline · 3 paragraph · 4 the artifact · 5 the list
     The document must never appear before the reader knows what it is.
     .fr-plan-copy becomes display: contents, so its children become
     ordered items of .fr-plan alongside the visual. display: contents
     generates no box, so the reveal transform on .fr-plan-copy no longer
     applies; the copy is therefore pinned visible here. Nothing is
     hidden. These six order declarations are carried forward unchanged. */
  .fr-page .fr-plan {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .fr-page .fr-plan-copy {
    display: contents;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fr-page .fr-plan-copy > .fr-eyebrow { order: 1; margin-bottom: clamp(16px, 1.8vw, 22px); }
  .fr-page .fr-plan-title { order: 2; }
  .fr-page .fr-plan-copy > .fr-body { order: 3; max-width: var(--fr-measure); }
  .fr-page .fr-plan-visual { order: 4; margin: clamp(38px, 5vw, 56px) 0 clamp(34px, 4.4vw, 50px); }
  .fr-page .fr-plan-list-title { order: 5; margin-top: 0; }
  .fr-page .fr-plan-list { order: 6; }
  .fr-page .fr-doc { width: min(100%, 440px); }
}


/* ---------------------------------------------------------
   THE PHONE COMPOSITION. Below 980 the ledger is abandoned, not
   folded: the sheet becomes ONE vertical column — head, stage one's
   amount, stage one's inclusions, the fold, stage two's amount, stage
   two's inclusions — and the continuation edge is extended through the
   two inclusion bands so it runs the WHOLE height of the sheet as a
   single unbroken line. On desktop that line is a margin mark; here it
   is the spine of the scroll and the section's main device.
   --------------------------------------------------------- */
@media (max-width: 980px) {
  
  
  .fr-page .fr-sec--decide .fr-invest-paths { grid-row: 7; }

  /* the amount band stops before its inclusions, so its own padding
     closes and the edge carries the join instead of a gap */
  
  

  
  
  

  /* the two actions stack: side by side they leave the consultation
     button a 388px column for a 440px label */
  /* the two back-sheet edges stand 22px below the front sheet, so the
     gap to the first action is measured from THEM, not from the sheet */
  .fr-page .fr-sec--decide .fr-invest-paths {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 3.6vw, 36px);
    margin-top: clamp(54px, 7vw, 68px);
  }
  .fr-page .fr-sec--decide .fr-choice:nth-child(2) {
    padding-left: 0;
    padding-top: clamp(26px, 3.6vw, 36px);
    box-shadow: inset 0 1px 0 var(--fr-edge);
  }

  
  
  
}
@media (max-width: 980px) {
  .fr-page .fr-sec--decide .fr-invest {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 3px 16px 16px 3px;
  }
  .fr-page .fr-sec--decide .fr-invest-equation,
  .fr-page .fr-sec--decide .fr-invest-howto { grid-column: 1; }
  .fr-page .fr-sec--decide .fr-invest-howto {
    padding-top: 0;
    padding-left: clamp(22px, 5.6vw, 32px);
    box-shadow: none;
  }
  .fr-page .fr-sec--decide .fr-invest-equation {
    padding-bottom: clamp(16px, 4vw, 22px);
  }
  .fr-page .fr-sec--decide .fr-invest::before {
    left: 8px; right: -8px; top: 11px; bottom: -11px;
  }
  .fr-page .fr-sec--decide .fr-invest-head { border-radius: 3px 16px 0 0; }
  .fr-page .fr-sec--decide .fr-invest-value { border-radius: 0 0 16px 3px; }
}
@media (max-width: 900px) {
  .fr-page .fr-diagnosis { --fr-dx-tab: 34px; }
  .fr-page .fr-diagnosis .fr-dx::before { font-size: 1.1875rem; padding: 0 13px 2px 12px; }
  .fr-page .fr-diagnosis .fr-dx::after { left: calc(var(--fr-dx-tabx, 0px) + 56px); }
}


/* Below this the sheet can no longer hold a legible figure AND a
   legible measure beside it, so the page is filed UNDER the chapter's
   paragraph instead of beside it. The board keeps its column and the
   chapter stays one object rather than becoming two. */
@media (max-width: 900px) {
  /* filed under the paragraph, the page's bound edge still has to run
     back to the board, or it reads as a card dropped in the column */
  .fr-sec--method { --fr-sheet-l: calc(var(--fr-rail) + var(--fr-colgap)); }
  .fr-pillars .fr-pillar { grid-template-columns: var(--fr-rail) minmax(0, 1fr); }
  
  .fr-pillars .fr-pillar-def { max-width: 34ch; }
  .fr-method-close-lead { max-width: 24ch; }
}
@media (max-width: 900px) {
  .fr-page .fr-pillars .fr-pillar-page {
    padding-left: clamp(13px, 3.4vw, 17px);
  }
  .fr-page .fr-pillars .fr-pillar-page i[data-row="sum"] s {
    font-size: clamp(1.0625rem, 4.6vw, 1.25rem);
  }
}
@media (max-width: 900px) {
  .fr-page .fr-pillars .fr-pillar-name {
    font-size: clamp(1.75rem, 7.7vw, 2.0625rem);
  }
}


/* ---- 900: the insert narrows, the index goes to one column ----------
   The portrait column comes in, and Who It's For unfolds back into a
   single staggered column: at this width two 300px columns would set
   the entry titles four lines deep, which is the one thing the brief
   for that section forbids. */
@media (max-width: 900px) {
  .fr-page .fr-sec--relate .fr-quote--guide {
    grid-template-columns: clamp(142px, 17vw, 174px) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 38px);
  }
  .fr-page .fr-sec--relate .fr-quote--guide figcaption::after {
    right: calc(-1 * clamp(12px, 1.5vw, 19px));
  }

  .fr-page .fr-sec--fit .fr-fit-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(40px, 4.6vw, 56px);
    width: min(840px, 100%);
  }
  .fr-page .fr-sec--fit .fr-fit-list li {
    max-width: min(var(--fr-measure), 100%);
    justify-self: start;
  }
  .fr-page .fr-sec--fit .fr-fit-list li:nth-child(even) {
    justify-self: end;
    padding-top: 0;
  }
  .fr-page .fr-sec--fit .fr-fit-list li:nth-child(even)::after { top: -50px; }
}



/* ---- 8.6 · THE PHONE AND THE TABLET — SIX SCENES, RUN DOWNWARD ------ */
/* THE BREAK IS AT 900, NOT 768, and that is a measurement. Below 901 the
   two columns cannot both hold a readable line: the sheet loses its
   falloff first and the quiet lines break to three lines second, and
   the result is two cramped columns rather than one composition. The
   single-column sequence below is better at 900 and at 768 than a
   squeezed desk is, so it starts there.

   The desktop composition runs the transformation across the desk. None
   of that survives here, because a horizontal relationship stacked is
   just two paragraphs. What a phone gets instead is a sequence of six
   scenes, each one CATEGORY -> old wording -> the edge rising -> the
   revision on lit paper, with real air between scenes so one item is one
   thing to look at.

   THREE THINGS ARE DIFFERENT, not one:
     · the category is PROMOTED. On the desk it is the dimmest ink in the
       row; here it is the scene's heading, inked in the colour its own
       page is bound with, with a larger icon. The visitor gets "Cash
       flow", in cyan, before they read a word.
     · the handoff light is DELETED. It lit a desk gap between two
       columns and there are no columns.
     · THE INDEX EDGE REACHES UP. The page's bound edge starts 18px above
       the paper and rises out of nothing into full colour exactly where
       the stock begins, so the gap between the two states is where the
       visitor watches the transformation happen. It is the same single
       edge, extended — no arrow, no connector, no second object.
   The loose lines keep their six different indents and the page is flush
   to the axis they all miss, so "unresolved -> squared up" is visible
   before any of it is read. */
@media (max-width: 900px) {
  .fr-page .fr-gains {
    --fr-slip: 0px;
    --fr-page-x: 17px;
    max-width: var(--fr-measure);
    row-gap: 40px;
    margin: calc(var(--fr-gap) * 1.1) auto calc(var(--fr-gap) * 0.4);
  }
  .fr-page .fr-gain { grid-template-columns: minmax(0, 1fr); }
  /* there is no spine to face, so the quiet side turns back to the left
     and the raggedness moves with it: on the desk the loose lines fall
     SHORT of the page's edge, on a phone they are pushed OFF it */
  .fr-page .fr-gain-area {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    transform: none;
    font-size: 0.73rem;
    letter-spacing: 0.19em;
    color: color-mix(in srgb, rgb(var(--acc-rgb, 56, 207, 255)) 76%, var(--fr-ink));
    opacity: 1;
  }
  .fr-page .fr-gain-area .fr-ico { width: 17px; height: 17px; }
  .fr-page .fr-gain-was {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 0 var(--fr-loose, 0px);
    padding-top: 8px;
    transform: none;
    text-align: left;
  }
  .fr-page .fr-gain-now {
    grid-column: 1;
    grid-row: 3;
    margin-top: 30px;
    padding: 16px var(--fr-page-x) 17px;
  }
  /* the edge rises out of the gap and is at full strength the moment the
     paper starts */
  .fr-page .fr-gain-now::before {
    top: -22px;
    width: 3px;
    background-image: linear-gradient(180deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.9) 22px,
      rgba(var(--acc-rgb, 56, 207, 255), 0.34) 100%);
  }
  .fr-page .fr-gain-now::after { width: 64%; }
}
@media (max-width: 860px) {
  .fr-page .fr-sec--plan .fr-proof-swap {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(16px, 3.4vw, 22px);
  }
  .fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] { grid-column: 1; grid-row: 1; }
  .fr-page .fr-sec--plan .fr-proof-turn { grid-column: 1; grid-row: 2; }
  .fr-page .fr-sec--plan .fr-proof-side[data-side="real"] { grid-column: 1; grid-row: 3; }
  .fr-page .fr-sec--plan .fr-proof-turn {
    font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
  }
}
@media (max-width: 860px) {
  /* inside a panel the centred setting fights the rows: both sides
     read left, which is how a filled-in sheet reads */
  .fr-page .fr-sec--plan .fr-proof-side { text-align: left; }
  .fr-page .fr-sec--plan .fr-proof-turn {
    justify-content: flex-start;
    margin: clamp(4px, 1.4vw, 8px) 0;
  }
  .fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] {
    padding: clamp(17px, 4.4vw, 22px) clamp(18px, 4.6vw, 23px)
             clamp(19px, 4.8vw, 24px);
  }
  .fr-page .fr-sec--plan .fr-proof-side[data-side="real"] {
    padding: clamp(19px, 4.8vw, 24px) clamp(18px, 4.6vw, 23px)
             clamp(9px, 2.4vw, 12px) clamp(21px, 5.4vw, 27px);
  }
}

/* the two sides share a left edge when they stack */
@media (max-width: 860px) {
  .fr-page .fr-sec--plan .fr-proof-side[data-side="generic"],
  .fr-page .fr-sec--plan .fr-proof-side[data-side="real"] {
    padding-left: clamp(21px, 5.4vw, 27px);
  }
  .fr-page .fr-sec--plan .fr-proof-side[data-side="generic"] .fr-proof-sk {
    font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
  }
}


/* a tab clipped dead on the container edge looks like a layout fault;
   faded, it reads as "the row carries on", which is what it does. The
   fade is only drawn where the row actually overflows. */
@media (max-width: 860px) {
  .fr-page .fr-sec--forward .fr-review-tabs {
    padding-right: 10px;
    -webkit-mask-image: linear-gradient(90deg,
      #000 0, #000 calc(100% - 34px), rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(90deg,
      #000 0, #000 calc(100% - 34px), rgba(0, 0, 0, 0.15) 100%);
  }
}
@media (max-width: 860px) {
  /* with one-word controls all three fit, so the rail no longer
     scrolls and the fade has nothing left to hide */
  .fr-page .fr-sec--forward .fr-review-tabs {
    -webkit-mask-image: none;
    mask-image: none;
    padding-right: 0;
  }
  .fr-page .fr-sec--forward .fr-review-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }
}


/* ============================================================
   THE PHONE — THE SAME ROUTE, TURNED
   ============================================================ */
@media (max-width: 860px) {
  .fr-page .fr-next .fr-journey {
    --node: clamp(50px, 14vw, 60px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(26px, 6vw, 36px);
    margin-top: clamp(30px, 7vw, 40px);
  }
  /* THE ROUTE RUNS DOWN, AND STOPS AT THE LAST STATION.
     Drawn on the container it would have to end `node/2` up from the
     JOURNEY's bottom — but the last stage is the tallest, so the line
     ran a card's length past Steven and off into nothing. Each stage
     except the last now draws its own segment, from its node down to
     the next node, so the route ends exactly where the journey does. */
  .fr-page .fr-next .fr-journey::before { display: none; }
  .fr-page .fr-next .fr-journey-stage:not(:last-child)::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(var(--node) / 2 - 1px);
    top: var(--node);
    bottom: calc(-1 * clamp(26px, 6vw, 36px));
    width: 2px;
    border-radius: 2px;
    background-image: var(--fr-trace);
    transform-origin: center top;
    pointer-events: none;
  }
  .fr-page .fr-next.revealed .fr-journey-stage:not(:last-child)::before {
    animation: frTraceY 0.8s var(--fr-ease) 1 both;
  }
  .fr-page .fr-next.revealed .fr-journey-stage:nth-child(1)::before { animation-delay: 0.25s; }
  .fr-page .fr-next.revealed .fr-journey-stage:nth-child(2)::before { animation-delay: 0.75s; }
  .fr-page .fr-next .fr-journey-stage {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: clamp(15px, 4vw, 20px);
    align-items: start;
  }
  .fr-page .fr-next .fr-journey-node { margin-bottom: 0; }
  .fr-page .fr-next .fr-journey-card {
    padding-top: clamp(7px, 1.8vw, 10px);
    border-top: 0;
  }
  .fr-page .fr-next .fr-journey-card h3 {
    font-size: clamp(1.1875rem, 5.4vw, 1.4375rem);
  }
}


/* =========================================================
   MOBILE — A DIFFERENT COMPOSITION, NOT THIS ONE STACKED
   ---------------------------------------------------------
   Desktop is a three-column spread: tab | type | sheet. A phone gets
   something else entirely — you move THROUGH the organizer instead
   of looking at it. The board narrows to a 7px bound edge pinned to
   the left of the shell and runs unbroken behind all four chapters.
   The tab turns on its side and becomes a full horizontal divider
   bound into that edge, with its emblem set at the far end of the
   same line, so the first thing on screen is always 01 MOVES and its
   mark, not a paragraph. The chapter's type then opens below it on
   bare ground. The sheet is filed full width with its own bound edge
   running UNDER the board, and the second sheet beneath it reaches
   far enough down that the next chapter's tab lands on its corner —
   so the chapters physically overlap and the visitor is turning
   pages in one organizer, not scrolling past four cards.
   ========================================================= */
@media (max-width: 768px) {
  .fr-sec--method {
    --fr-rail: 30px;
    --fr-board: 7px;
    --fr-colgap: 12px;
    --fr-stop: clamp(34px, 8.6vw, 46px);
    --fr-figrow: clamp(13px, 3.4vw, 17px);
    --fr-sheet-t: 17px;
    --fr-sheet-b: 19px;
    --fr-sheet-x: 15px;
    --fr-sheet-l: var(--fr-rail);
    --fr-sheet-in: 40px;
    --fr-p4-h: 25px;
    --fr-p4-gap: 19px;
  }
  .fr-method-head { max-width: 100%; margin-bottom: clamp(44px, 9vw, 60px); }
  .fr-method-creed {
    max-width: min(26rem, 100%); margin: clamp(26px, 5.6vw, 34px) auto 0;
    padding-top: clamp(26px, 5.6vw, 34px);
    font-size: clamp(1.125rem, 4.9vw, 1.4375rem); line-height: 1.32;
  }
  .fr-method-creed::before { width: 126px; margin-left: -63px; }
  .fr-method-head .fr-body { max-width: 42ch; margin-top: clamp(22px, 4.8vw, 30px); font-size: 1rem; }

  /* the chapter: one column of type, indented off the bound edge.
     Column 1 shrinks to the divider tab and column 2 takes the rest
     of the line, so the emblem can be thrown to the far edge and the
     two ends joined — one divider across the chapter, not a chip. */
  .fr-pillars .fr-pillar {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--fr-colgap);
    padding-left: var(--fr-rail);
  }
  .fr-pillars .fr-pillar::after { inset: 0 -5% 0 -16%; }

  /* THE DIVIDER, turned on its side and bound into the board */
  .fr-pillars .fr-pillar-num {
    grid-column: 1; grid-row: 1; align-self: center; justify-self: start;
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 11px;
    width: auto; min-height: 0;
    margin-left: calc(-1 * var(--fr-rail));
    padding: 10px 18px 10px 15px;
  }
  .fr-pillars .fr-pillar-num > b { font-size: 1.0625rem; }
  .fr-pillars .fr-pillar-num > span { font-size: 0.5625rem; letter-spacing: 0.16em; }

  /* the emblem is thrown to the far end of the divider's own line and
     the gap between is closed with a rule that fades out of the tab's
     shoulder — so the eye reads ONE labelled divider running the full
     width of the chapter, with its mark at the end. */
  .fr-pillars .fr-pillar-icon {
    grid-column: 2; grid-row: 1; justify-self: stretch; align-self: center;
    display: flex; align-items: center; justify-content: flex-end;
    margin: 0;
    background-image: linear-gradient(90deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.4) 100%);
    background-repeat: no-repeat;
    background-size: calc(100% - 42px) 1px;
    background-position: 0 50%;
  }
  .fr-pillars .fr-pillar-icon .fr-ico { width: 27px; height: 27px; }

  /* and the type opens underneath, across the full chapter */
  .fr-pillars .fr-pillar-name {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: clamp(19px, 5vw, 25px);
    font-size: clamp(1.5rem, 6.6vw, 1.75rem); line-height: 1.12;
  }
  .fr-pillars .fr-pillar-def {
    grid-column: 1 / -1; grid-row: 3;
    max-width: 30ch; margin-top: clamp(11px, 3vw, 15px);
    font-size: clamp(1.0625rem, 4.5vw, 1.1875rem); line-height: 1.38;
  }
  .fr-pillars .fr-pillar-detail {
    grid-column: 1 / -1; grid-row: 4;
    margin-top: clamp(13px, 3.4vw, 17px); line-height: 1.62;
  }
  .fr-pillars .fr-pillar-cycle {
    grid-column: 1 / -1; grid-row: 5;
    margin-top: clamp(16px, 4vw, 20px); gap: 4px 15px; padding-bottom: 12px;
  }
  /* and the sheet becomes the last thing in the chapter, full width */
  .fr-pillars .fr-pillar-page {
    grid-column: 1 / -1; grid-row: 6;
    margin-top: clamp(17px, 4.4vw, 23px);
  }

  
  
  .fr-folio4 .fr-folio4-edge { height: clamp(44px, 11vw, 62px); }

  .fr-method-close { margin-top: clamp(86px, 19vw, 118px); }
  .fr-method-close-lead { max-width: 20ch; font-size: clamp(1.4375rem, 6.4vw, 1.75rem); }
  .fr-method-close .fr-body { max-width: 40ch; font-size: 1rem; }
  .fr-method-signature {
    max-width: 17ch; margin-top: clamp(46px, 11vw, 64px);
    padding-top: clamp(26px, 6.4vw, 34px);
    font-size: clamp(1.5rem, 7.2vw, 1.9375rem);
  }
  .fr-method-signature .fr-line:first-child { font-size: 0.7em; }
  .fr-method-signature::before { width: 140px; margin-left: -70px; }
}
@media (max-width: 760px) {
  /* Section intros centre on a phone; reading copy keeps its measure. The
     headline does NOT come down to solve layout — --fr-h2's own floor is
     2.25rem (36px) and that is where it stays, as --fr-h2-flag stays on
     2.5rem (40px) and the hero on 2.75rem (44px). The three tiers are
     still three tiers at 390. */
  .fr-page .fr-intro,
  .fr-page .fr-intro--center,
  .fr-page .fr-intro--wide { text-align: center; }
  .fr-page .fr-intro .fr-body,
  .fr-page .fr-intro .fr-lede { margin-inline: auto; max-width: none; }
  .fr-page .fr-eyebrow {
    padding: 8px 15px 9px 17px;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }
  /* the tab is smaller here, so the stack behind it is smaller too — a
     4px sliver on a 0.7rem tab starts to look like a second object */
  .fr-page .fr-eyebrow::after { left: calc(100% - 6px); width: 9px; top: 2px; bottom: -2px; }
  .fr-page main .btn:not(.btn-sm) {
    width: 100%;
    /* the long labels wrap to two lines here, so the face grows rather
       than crushing the type */
    min-height: 66px;
    padding: 17px 18px;
  }
}


/* phones centre all three markers, because all three compositions
   centre there */
@media (max-width: 760px) {
  .fr-page .fr-hero .fr-eyebrow,
.fr-page .fr-sec--method .fr-eyebrow {
    gap: 11px;
    margin-inline: auto;
    font-size: 0.6875rem;
    letter-spacing: 0.17em;
  }
  .fr-page .fr-hero .fr-eyebrow::before {
    width: clamp(22px, 7vw, 40px);
    height: 1px;
    box-shadow: none;
    background-image: linear-gradient(270deg,
      rgba(var(--acc-rgb, 2, 193, 255), 0.85) 0%,
      rgba(var(--acc-rgb, 2, 193, 255), 0.2) 56%,
      rgba(var(--acc-rgb, 2, 193, 255), 0) 100%);
  }
  .fr-page .fr-hero .fr-eyebrow::after,
.fr-page .fr-sec--method .fr-eyebrow::after,
.fr-page .fr-sec--method .fr-eyebrow::before {
    width: clamp(22px, 7vw, 40px);
  }
  /* THE METHODOLOGY LABEL IS 51 CHARACTERS. At 390 it cannot hold one line,
     and a wrapped label between two flanking rules strands them at the
     corners of a two-line block. So on phones it centres as a block and
     keeps ONE rule, underneath, where a centred composition can carry it. */
  .fr-page .fr-sec--method .fr-method-head .fr-eyebrow {
    display: block;
    white-space: normal;
    text-align: center;
    line-height: 1.55;
  }
  .fr-page .fr-sec--method .fr-method-head .fr-eyebrow::before {
    display: none;
  }
  .fr-page .fr-sec--method .fr-method-head .fr-eyebrow::after {
    display: block;
    width: 44px;
    margin: 10px auto 0;
  }
}


/* ---- 8 · PHONE (760) — the statement keeps the foundation's phone step;
   nothing here touches type size ---------------------------------- */
@media (max-width: 760px) {
  .fr-page .fr-hero-actions .btn-primary:not(.btn-sm) { max-width: none; }
  .fr-page .fr-hero-setup { margin-top: 16px; }
}


/* a larger hero headline on phones, and real air under the CTA */
@media (max-width: 760px) {
  .fr-page .fr-hero .fr-h1,
  .fr-page .fr-hero h1 {
    font-size: clamp(3.25rem, 13.2vw, 3.75rem);
  }
  
}


/* ---- 760 AND DOWN: THE LEAFED PILE ---------------------------------
   A DIFFERENT COMPOSITION, not the row turned on its side.

   1 · THE INDEX WALKS ACROSS THE SET. On the desktop every divider tab
       stands at its own slip's shoulder, because the four slips are side
       by side. Here the slips are stacked, so the tabs step across the
       width instead — 01 at the left, 04 near the right. That single
       change is what turns a column of sheets into ONE ORGANIZER being
       leafed through, and it is the first thing read on the phone.
   2 · THE SHOULDER SHEET BECOMES A TURNED CORNER. The desktop's
       next-sheet-past-the-shoulder is dropped; at this width the slip
       carries a dog-eared top corner instead, the universal mark of a
       page you have already been through. Four turned corners down a
       phone screen reads as flipping; a sliver behind each sheet does
       not.
   3 · THE PILE IS LOOSE AND TIGHT AT ONCE. The sheets step left and
       right by a few pixels, the angles flatten to about half a degree
       so a 340px slip never looks crooked, and the vertical spacing is
       cut to little more than the tab height, so the four read as one
       set rather than four items with air between them.
   4 · THE INSERT'S BOUND EDGE RUNS DOWN THE OUTSIDE. Pulled out past
       each slip's left, four accent edges step down the left of the
       screen — the cut edge of a set of documents, and the colour key
       for the four scenarios, in the same gesture.

   THE 2-SECOND READ, in order down the screen: a coloured index tab, a
   sentence about your month lying in shade, the seam where that sheet
   ends, and a brighter sheet pulled out from under it saying WHAT'S
   MISSING. None of those four is a desktop-only effect. */
@media (max-width: 760px) {
  .fr-page .fr-sec--problem {
    --fr-dx-tab: 20px;
    --fr-dx-tuck: 15px;
    --fr-dx-jut: 13px;
    --fr-dx-cut: clamp(30px, 9vw, 44px);
    --fr-dx-px: clamp(19px, 5vw, 26px);
    --fr-dx-py: clamp(19px, 4.8vw, 25px);
  }

  .fr-page .fr-diagnosis { display: block; padding-left: 0; }
  .fr-page .fr-diagnosis .fr-dx { transform-origin: 50% 0; }
  .fr-page .fr-diagnosis .fr-dx + .fr-dx { margin-left: 0; }
  /* the shoulder sheet goes with the turned corner below: one page tell
     per slip, and at this width it is the corner */
  .fr-page .fr-dx-symptom {
    line-height: 1.32;
    box-shadow: var(--fr-d2);
  }

  /* the turned corner, top right: a wedge of dark where the corner has
     been lifted away, a lit crease, and the back of the flap lying on
     the sheet. 225deg runs the stops out of the top-right corner, so
     everything past the crease is transparent and the slip's own stock
     shows through untouched. */
  .fr-page .fr-dx-symptom::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 0 4px 0 0;
    background-image: linear-gradient(225deg,
      rgba(5, 11, 24, 0.96) 0%,
      rgba(5, 11, 24, 0.96) 37%,
      rgba(255, 255, 255, 0.17) 37%,
      rgba(255, 255, 255, 0.17) 38.4%,
      rgba(49, 73, 115, 0.98) 38.4%,
      rgba(31, 49, 82, 0.94) 57%,
      rgba(22, 36, 63, 0) 57%);
  }

  .fr-page .fr-diagnosis .fr-dx:nth-child(1) { --fr-rot: -0.5deg; --fr-ins: 0.3deg;   --fr-dx-tabx: 0;   margin: 0 14px 0 18px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(2) { --fr-rot: 0.4deg;  --fr-ins: -0.25deg; --fr-dx-tabx: 26%; margin: -7px 8px 0 24px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(3) { --fr-rot: -0.3deg; --fr-ins: 0.25deg;  --fr-dx-tabx: 49%; margin: -7px 17px 0 19px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(4) { --fr-rot: 0.45deg; --fr-ins: -0.3deg;  --fr-dx-tabx: 71%; margin: -7px 10px 0 25px; }

  .fr-page .fr-dx-missing { column-gap: 11px; }
}
@media (max-width: 760px) {
  .fr-page .fr-define { row-gap: 28px; }
  .fr-page .fr-define-body { max-width: none; }
  .fr-page .fr-define-body .fr-body + .fr-body { margin-top: 20px; }
  /* THE MARKER CENTRES WITH ITS HEADLINE in the complete picture, whose
     composition is centred on a phone. "What it is" stays flush left:
     it is the editorial breather between two centred sections and the
     change of alignment is the change of rhythm. */
  
  
  /* on a phone the claim is already the only bright thing on the band,
     so the halo comes off rather than sitting over a narrow measure */
  .fr-page .fr-sec--define .fr-h2 .fr-line + .fr-line { text-shadow: none; }
}


/* The phone proper: the loose pages pull in a little so the widest tab
   still has clear ground beside it, and the organizer takes over
   slightly earlier up the stack. */


/* THE NARROWEST PAGE closes its margins and shortens the written
   figure, so the name beside it keeps its line. No type gets smaller: a
   phone-only size under --fr-small is a second reading scale arriving
   at the one width where it is hardest to see it happen. */


/* ============================================================
   LOOSE SHEETS MUST LOOK LOOSE ON PURPOSE
   The offsets read as broken CSS when the only thing saying
   "paper" is the offset itself. What makes a slip read as a real
   worksheet is its EDGE: a lit top arris, a dark cut edge under
   it, and a contact shadow that says which sheet is above which.
   With those three, the same offsets read as gathered documents.
   ============================================================ */


/* ============================================================
   ONE SHEET, SIX PARTS — the phone composition
   The six slips were offset, rotated and individually shadowed to
   say "loose pages gathering". Read on a phone it just looked like
   rectangles that had slipped. The story the headline tells is that
   these are NOT separate pieces, so the resolved state is the one
   worth drawing: one bound sheet, six entries ruled onto it, each
   keeping its own colour so the parts stay legible inside the whole.
   ============================================================ */
@media (max-width: 760px) {
  
  /* the bound edge the six entries are filed against */
  
  
  /* entries, not slips: no offset, no rotation, no separate shadow */
  
  
  /* each part keeps its own colour on the entry's own short rule */
  
}


/* ============================================================
   THE PHONE ARTIFACT IS A LABELLED PORTFOLIO
   The sheet carried the six parts but its name floated underneath
   it as a caption, so the object looked unlabelled and the words
   looked orphaned. The cover is the panel itself now: the name is
   printed at its head, the six parts are divider entries inside
   it, and each one shows the tab it is filed behind.
   ============================================================ */
@media (max-width: 760px) {
  
  /* the bound edge of the portfolio, carrying the six parts' colours */
  
  /* the name is printed ON the cover, not captioned under it */
  
  /* the inner pages: no second sheet, no second shadow */
  
  
  /* each part shows the divider tab it is filed behind */
  
  /* the caption underneath is now redundant: the cover says it */
  
  /* and the clarification gets real air after the object */
  
}
@media (max-width: 760px) {
  .fr-pillars .fr-pillar-page i { font-size: 0.8125rem; }
}
@media (max-width: 760px) {
  /* ==============================================================
     THE PHONE COMPOSITION. Three of this file's four jobs are
     recomposed here, not reflowed: the build sequence changes what
     carries the progression, the spread stops being cards and becomes
     an index, and the proof becomes a run of tabs. Nothing in this
     block is `grid-template-columns: 1fr` standing in for a design.
     ============================================================== */

  /* ---- A · A VERTICAL BUILD SEQUENCE ---------------------------
     Side by side, the four pages read off the stair. In one column
     that gesture does not survive, so the progression is carried by
     two things a phone shows well: the sheet gets WIDER as it is
     completed — 01 is a short loose sheet, 04 reaches the full
     measure — and it gets THICKER: 01 lies alone, 02 has one page
     filed under it, 03 two, 04 three. With the completion rule inking
     25 → 50 → 75 → 100 down the column, scrolling these four is
     watching one document being built. The left edges stay locked, so
     the growth reads as deliberate rather than ragged. */
  .fr-page .fr-work ol { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 4.8vw, 28px); }
  .fr-page .fr-work li:nth-child(1),
  .fr-page .fr-work li:nth-child(2),
  .fr-page .fr-work li:nth-child(3),
  .fr-page .fr-work li:nth-child(4),
  .fr-page .fr-work li:nth-child(odd),
  .fr-page .fr-work li:nth-child(even) {
    --fr-ovl-pad: 0px;
    margin-top: 0;
  }
  /* the stack is named once per page and READ BY THE HOVER RULE TOO, so
     a sticky :hover on a touch screen cannot strip the filed sheets off
     a page and drop it half a centimetre */
  .fr-page .fr-work li:nth-child(1) {
    --fr-stack: 0 2px 0 -1px rgba(5, 12, 26, 0.92), var(--fr-d1);
    margin-right: clamp(26px, 8vw, 38px);
    margin-bottom: 0;
    box-shadow: var(--fr-stack);
  }
  .fr-page .fr-work li:nth-child(2) {
    --fr-stack:
      0 8px 0 -1px var(--fr-paper-2),
      0 8px 0 0 var(--fr-edge),
      var(--fr-d1);
    margin-right: clamp(17px, 5.3vw, 25px);
    margin-bottom: 8px;
    box-shadow: var(--fr-stack);
  }
  .fr-page .fr-work li:nth-child(3) {
    --fr-stack:
      0 8px 0 -1px var(--fr-paper-2),
      0 8px 0 0 var(--fr-edge),
      0 16px 0 -4px var(--fr-paper-2),
      0 16px 0 -3px var(--fr-edge),
      var(--fr-d2);
    margin-right: clamp(9px, 2.7vw, 13px);
    margin-bottom: 16px;
    box-shadow: var(--fr-stack);
  }
  .fr-page .fr-work li:nth-child(4) {
    --fr-stack:
      0 8px 0 -1px var(--fr-paper-2),
      0 8px 0 0 var(--fr-edge),
      0 16px 0 -4px var(--fr-paper-2),
      0 16px 0 -3px var(--fr-edge),
      0 24px 0 -7px var(--fr-paper-2),
      0 24px 0 -6px var(--fr-edge),
      var(--fr-d3);
    margin-right: 0;
    margin-bottom: 24px;
    box-shadow: var(--fr-stack);
  }
  .fr-page .fr-work li:hover,
  .fr-page .fr-work li:nth-child(4):hover {
    box-shadow: var(--fr-stack);
    transform: none;
  }
  /* the folio is how the sequence is read on a phone, so it is set at
     index size rather than at caption size */
  .fr-page .fr-work li::before { font-size: 1.6rem; }
  .fr-page .fr-work li { row-gap: clamp(12px, 3.2vw, 17px); }
  .fr-page .fr-work-then { flex-direction: column; gap: 12px; }
  .fr-page .fr-work-then > .fr-ico { margin-top: 0; }

  /* ---- B · ONE PAGE AND FIVE INDEX TABS ------------------------
     THE RECTANGLES ARE GONE. Six filled cards in one column was the
     worst moment in this file on a phone: six dark blue blocks of the
     same size, weight and shape, one after another. Only Cash flow &
     budget is a page here. The other five become what they are on a
     real organizer — labelled divider tabs down the edge of the
     spread: a raised accent tab, a title, a line of description, a
     printed rule between them, and NO fill at all. The spread also
     changes alignment: its heading centres, so the block opens as a
     chapter rather than continuing section A's left-hand column. */
  .fr-page .fr-scope-bar {
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.6vw, 15px);
    margin-bottom: clamp(26px, 6vw, 36px);
    text-align: center;
  }
  .fr-page .fr-scope-title { max-width: 17ch; }
  .fr-page .fr-scope-tag { padding-bottom: 0; }
  /* the index is already set at 980, where Debt payoff joined it; what
     the phone changes is the rhythm of the entries, nothing structural */
  .fr-page .fr-scope-grid li:nth-child(n+2) {
    padding-top: clamp(16px, 4.2vw, 20px);
    padding-bottom: clamp(15px, 4vw, 19px);
  }
  .fr-page .fr-scope-grid li:nth-child(1) { margin-bottom: clamp(26px, 6.4vw, 34px); }
  .fr-page .fr-scope-grid li:nth-child(n+2):hover,
  .fr-page .fr-scope-grid li:hover,
  .fr-page .fr-scope-grid li:nth-child(1):hover { transform: none; }
  .fr-page .fr-scope-grid li:nth-child(n+2):hover { box-shadow: none; }
  /* the one page on the spread keeps every bit of its material */
  .fr-page .fr-scope-grid li:nth-child(1) { padding: clamp(26px, 6.4vw, 34px) clamp(22px, 5.4vw, 28px) clamp(26px, 6.4vw, 34px); }

  /* ---- D · A CENTRED CLOSE -------------------------------------
     The section ends on a statement, so it is set as one: the label,
     the headline, the sentence and the slips all centre. That is the
     fourth distinct rhythm across these two sections and the clearest
     break available from the left-hand column above it. */
  .fr-page .fr-proof { justify-items: center; text-align: center; }
  .fr-page .fr-proof > .fr-eyebrow { justify-self: center; }
  .fr-page .fr-proof-body { margin-inline: auto; max-width: 34ch; }
}


/* ---- 760: four recompositions ---------------------------------------
   · THE INSERT becomes a PROFILE HEADER. Portrait and name sit side by
     side in a band across the top of the page, a fold runs under them,
     and his words are printed below it. One object still, arranged for
     a phone instead of stacked from a desktop: the portrait is no
     longer a column, the name is no longer under the photograph, the
     fold turned ninety degrees, and the quotation mark moved from the
     side of the first line to the fold above it.
   · THE COMPARISON becomes FRAGMENTED → VERSUS → ORGANIZED. The three
     slips overlap into a pile at three different widths and angles, a
     printed "vs" rule is the pivot, and the organizer page is BUILT
     from its own four parts because a page cannot span a flex column.
   · WHO IT'S FOR pulls the folio numbers out into a left rail beside
     the titles, so the column reads as an index rather than as six
     identical units in a list.
   · and the shift's grid becomes an ordered flex column. */
@media (max-width: 760px) {
  .fr-page .fr-sec--relate .fr-quote--guide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    width: 100%;
    padding: clamp(20px, 5vw, 26px) clamp(20px, 5vw, 26px) clamp(24px, 5.6vw, 30px);
    box-shadow:
      var(--fr-d3),
      9px 11px 0 -4px var(--fr-paper),
      9px 11px 0 -3px var(--fr-edge);
  }
  .fr-page .fr-sec--relate .fr-quote--guide figcaption {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    gap: clamp(15px, 4.2vw, 20px);
    padding-bottom: clamp(17px, 4.4vw, 22px);
    border-bottom: 1px solid rgba(150, 190, 235, 0.2);
  }
  /* the fold is horizontal here and is drawn by the band's own border,
     so the vertical rule stands down rather than crossing it */
  .fr-page .fr-sec--relate .fr-quote--guide figcaption::after { content: none; }
  .fr-page .fr-sec--relate .fr-quote--guide figcaption img {
    flex: 0 0 auto;
    width: clamp(94px, 27vw, 118px);
    margin: 0;
  }
  .fr-page .fr-sec--relate .fr-quote--guide blockquote {
    grid-column: 1;
    grid-row: 2;
    padding-top: clamp(22px, 5.4vw, 28px);
  }
  /* printed on the fold, straddling it, where it marks the sentence
     that starts under it */
  .fr-page .fr-sec--relate .fr-quote--guide blockquote p::before {
    top: -0.52em;
    left: -0.06em;
    font-size: clamp(2.9rem, 11vw, 3.8rem);
  }

  .fr-page .fr-sec--relate .fr-shift {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  /* the spanning page stands down; the group composes it instead */
  .fr-page .fr-sec--relate .fr-shift-panel { display: none; }
  .fr-page .fr-sec--relate .fr-shift-head--from { order: 1; padding-top: 0; }
  .fr-page .fr-sec--relate .fr-shift-from { order: 2; }
  .fr-page .fr-sec--relate .fr-shift-head--to { order: 4; }
  .fr-page .fr-sec--relate .fr-shift-to { order: 5; }

  /* THE PIVOT. On a phone the two sides cannot sit beside each other,
     so the comparison has to be told in time instead of in space: a
     pile of scraps, then the turn, then the organizer. Without the turn
     the reader scrolls past three faded slips into a page of ticks and
     never registers that the second thing answers the first. The rule
     is drawn in the element's own padding, so it is one mark and not a
     container. */
  .fr-page .fr-sec--relate .fr-shift::before {
    content: 'vs';
    order: 3;
    align-self: center;
    margin: clamp(30px, 7.4vw, 40px) 0 clamp(26px, 6.4vw, 34px);
    padding: 0 clamp(54px, 15vw, 72px);
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(214, 231, 252, 0.6);
    background-image:
      linear-gradient(90deg, rgba(150, 190, 235, 0) 0%, rgba(150, 190, 235, 0.32) 100%),
      linear-gradient(90deg, rgba(150, 190, 235, 0.32) 0%, rgba(150, 190, 235, 0) 100%);
    background-size: clamp(42px, 12vw, 58px) 1px, clamp(42px, 12vw, 58px) 1px;
    background-position: left center, right center;
    background-repeat: no-repeat;
  }

  /* THE PILE. Three slips at three widths, three offsets and three
     angles, overlapping each other — scraps dropped on a desk, not
     three full-width boxes in a column. The offsets are read from the
     markup's own --row so no two land the same way, and the overlap is
     what makes them one pile rather than a list. */
  .fr-page .fr-sec--relate .fr-shift-from {
    align-self: stretch;
    margin-top: calc(-1 * clamp(8px, 2.4vw, 12px));
    margin-left: calc((var(--row, 3) - 2) * clamp(9px, 2.8vw, 13px));
    margin-right: calc((4 - var(--row, 3)) * clamp(10px, 3.2vw, 15px));
    padding: clamp(15px, 4vw, 19px) clamp(17px, 4.4vw, 21px) clamp(17px, 4.4vw, 21px);
    /* no rotation: the three objects differ in material, not angle */
    transform: none;
  }
  .fr-page .fr-sec--relate .fr-shift-from.is-first { margin-top: clamp(18px, 4.6vw, 24px); }
  .fr-page .fr-sec--relate .fr-shift-from::before { right: 0; }
  .fr-page .fr-sec--relate .fr-shift-from:nth-child(6) { z-index: 2; }
  .fr-page .fr-sec--relate .fr-shift-from:nth-child(8) { z-index: 3; }

  .fr-page .fr-sec--relate .fr-shift-head--to,
  .fr-page .fr-sec--relate .fr-shift-to {
    padding-left: clamp(20px, 5vw, 26px);
    padding-right: clamp(20px, 5vw, 26px);
    /* THE SPINE IS HANDED ROUND THE FOUR PARTS, NOT REPEATED ON EACH.
       A page composed from four elements cannot give each element the
       whole cyan → teal → lime gradient: every part restarts it and the
       spine stripes. Each part carries the stretch of the progression
       that belongs to its own height — cyan at the head, cyan into teal
       across the first benefit, teal through the second, teal into lime
       at the foot — so the colour still runs once, top to bottom, down
       one page. */
    background-image:
      linear-gradient(180deg, rgba(68, 181, 156, 0.95) 0%, rgba(68, 181, 156, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
    background-size: 3px 100%, 1px 100%, 100% 100%;
    background-position: 0 0, 3px 0, 0 0;
    background-repeat: no-repeat;
    /* ONE PAGE, NOT FOUR STACKED SHADOWS: d2's cast is 0 18px 38px -22px
       and its contact is 0 2px 5px -3px, so neither reaches sideways and
       each part's downward cast falls only onto the part below it —
       which is opaque stock and paints later in the flex order, so it
       covers it. The one cast that stays visible is the last part's, at
       the foot of the page, which is where a page's shadow belongs. The
       insets give each part its own hairline and lit edge, and where two
       parts touch that pair reads as the fold. */
    box-shadow: var(--fr-d2);
  }
  .fr-page .fr-sec--relate .fr-shift-to.is-first {
    background-image:
      linear-gradient(180deg, rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
    background-size: 3px 100%, 1px 100%, 100% 100%;
    background-position: 0 0, 3px 0, 0 0;
  }
  /* the folds come from the touching hairlines at this width, so the
     explicit rule stands down rather than doubling them */
  .fr-page .fr-sec--relate .fr-shift-to:not(.is-first) { border-top: 0; }
  .fr-page .fr-sec--relate .fr-shift-head--to {
    margin-top: 0;
    padding-top: clamp(24px, 5.6vw, 30px);
    padding-bottom: 2px;
    border-radius: 3px 10px 0 0;
    background-image:
      linear-gradient(180deg, rgba(56, 207, 255, 0.95) 0%, rgba(56, 207, 255, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 150px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(255, 255, 255, 0) 1px),
      linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
    background-size: 3px 100%, 1px 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 3px 0, 0 0, 0 0, 0 0;
  }
  .fr-page .fr-sec--relate .fr-shift-to:last-child {
    border-radius: 0 0 10px 3px;
    padding-bottom: clamp(24px, 5.6vw, 30px);
    background-image:
      linear-gradient(180deg, rgba(68, 181, 156, 0.95) 0%, rgba(175, 221, 44, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(168deg, var(--fr-paper) 0%, var(--fr-paper-2) 100%);
    background-size: 3px 100%, 1px 100%, 100% 100%;
    background-position: 0 0, 3px 0, 0 0;
  }

  /* WHO IT'S FOR — the folio numbers come out of the stack and stand in
     a rail beside the titles. Six accent numerals reading down the left
     margin is a different rhythm from the six stacked number-over-title
     units it was, and from the page stack in the section above. */
  .fr-page .fr-sec--fit .fr-fit-list {
    gap: clamp(34px, 7.4vw, 44px);
    margin-top: clamp(42px, 9.4vw, 58px);
    width: 100%;
  }
  .fr-page .fr-sec--fit .fr-fit-list li,
  .fr-page .fr-sec--fit .fr-fit-list li:nth-child(even) {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: clamp(11px, 3vw, 14px);
    width: 100%;
    max-width: none;
    justify-self: start;
    padding-top: 0;
  }
  .fr-page .fr-sec--fit .fr-fit-list li::before {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 34px;
    margin: 0;
    padding-bottom: 7px;
    font-size: 0.8125rem;
  }
  .fr-page .fr-sec--fit .fr-fit-list li > div {
    grid-column: 2;
    grid-row: 1;
  }
  .fr-page .fr-sec--fit .fr-fit-list li::after,
  .fr-page .fr-sec--fit .fr-fit-list li:nth-child(even)::after {
    top: -40px;
    left: -30px;
    width: 156px;
    height: 134px;
  }
  .fr-page .fr-sec--fit .fr-fit-callout { width: 100%; }
}


/* ============================================================
   REVIEW + ADJUST ON A PHONE: ONE PLAN, FOUR VERSIONS
   Four separate cards in a column said "four things". The set is
   four editions of the SAME strategy, so on a phone each version
   now lies ON the one above it — a small negative overlap, the
   index tab of the next version sitting just clear of the last
   line of the previous one, and the thickness under each page
   growing as the plan accumulates. The reader is turning through
   one document, not scrolling past four.
   ============================================================ */
@media (max-width: 760px) {
  .fr-page .fr-sec--forward .fr-route-stages {
    --fr-lap: 0px;
    display: block;
    margin-top: clamp(26px, 6vw, 34px);
  }
  .fr-page .fr-sec--forward .fr-route-stages li {
    display: block;
    margin: 0;
    padding: clamp(26px, 6vw, 32px) clamp(19px, 4.6vw, 24px) clamp(21px, 5vw, 26px);
  }
  /* every later version lies over the foot of the one before it */
  .fr-page .fr-sec--forward .fr-route-stages li + li {
    margin-top: clamp(-14px, -3vw, -9px);
  }
  /* and is inset a little further, so the stack's left edge shows the
     order the versions were written in */
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(2) { margin-left: clamp(7px, 1.8vw, 10px); }
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(3) { margin-left: clamp(14px, 3.6vw, 20px); }
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(4) { margin-left: clamp(21px, 5.4vw, 30px); }
  /* the index tab moves to the page's own top-left corner and clears
     the sheet above it */
  .fr-page .fr-sec--forward .fr-route-stages li::before {
    left: clamp(19px, 4.6vw, 24px);
    top: -10px;
    height: 20px;
  }
  /* the review that follows is the NEXT version being written, so it
     continues the same inset rather than starting a new object */
  .fr-page .fr-sec--forward .fr-review {
    margin-left: clamp(21px, 5.4vw, 30px);
    margin-top: clamp(18px, 4.4vw, 24px);
  }
}
@media (max-width: 760px) {
  /* on a phone the scatter tightens: enough to read as loose, never
     enough to look like a layout fault */
}
@media (max-width: 760px) {
  .fr-page .fr-sec--forward .fr-review-tabs { gap: 5px; }
  .fr-page .fr-sec--forward .fr-review-tab {
    flex: 1 1 100%;
    min-height: 44px;
    border-radius: 4px;
  }
  .fr-page .fr-sec--forward .fr-review-panels { border-radius: 5px; margin-top: 6px; }
  .fr-page .fr-sec--forward .fr-review-panel ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* in one column the explicit row 5 landed these ABOVE the comparison;
     each closer belongs at the foot of the side it closes */
  /* the column is a flex order, not a grid here: the from-group is 2 and
     the to-group is 5, so each closer sits directly after its own side */
  .fr-page .fr-sec--relate .fr-shift-caveat {
    order: 3; max-width: none;
    margin-top: clamp(10px, 2.6vw, 14px);
  }
  .fr-page .fr-sec--relate .fr-shift-land {
    order: 6; max-width: none;
    margin-top: clamp(16px, 4vw, 22px);
  }
}
@media (max-width: 760px) {
  /* in one column the --row offsets were the whole problem: flush */
  .fr-page .fr-sec--relate .fr-shift-from {
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
    margin-top: clamp(10px, 2.6vw, 14px);
  }
  .fr-page .fr-sec--relate .fr-shift-from.is-first { margin-top: clamp(16px, 4vw, 22px); }

  /* ---- 3b. THE ANSWER OUTWEIGHS THE THREE THINGS IT ANSWERS ----
     Raised stock with a lime wash through it, so the page reads as
     the finished object on the desk and the three above it read as
     the material it replaces. */
  .fr-page .fr-sec--relate .fr-shift-head--to,
  .fr-page .fr-sec--relate .fr-shift-to {
    padding-left: clamp(22px, 5.6vw, 28px);
    padding-right: clamp(20px, 5vw, 26px);
    background-image:
      linear-gradient(180deg, rgba(68, 181, 156, 0.95) 0%, rgba(68, 181, 156, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(110deg, rgba(175, 221, 44, 0.07), rgba(175, 221, 44, 0) 62%),
      linear-gradient(168deg, #1b2740 0%, #141d31 100%);
    background-size: 4px 100%, 1px 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 4px 0, 0 0, 0 0;
    box-shadow: var(--fr-d3);
  }
  .fr-page .fr-sec--relate .fr-shift-to.is-first {
    background-image:
      linear-gradient(180deg, rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(110deg, rgba(175, 221, 44, 0.07), rgba(175, 221, 44, 0) 62%),
      linear-gradient(168deg, #1b2740 0%, #141d31 100%);
    background-size: 4px 100%, 1px 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 4px 0, 0 0, 0 0;
  }
  .fr-page .fr-sec--relate .fr-shift-head--to {
    padding-top: clamp(26px, 6vw, 32px);
    border-radius: 4px 12px 0 0;
    background-image:
      linear-gradient(180deg, rgba(56, 207, 255, 0.95) 0%, rgba(56, 207, 255, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 150px),
      linear-gradient(110deg, rgba(175, 221, 44, 0.1), rgba(175, 221, 44, 0) 62%),
      linear-gradient(168deg, #1b2740 0%, #141d31 100%);
    background-size: 4px 100%, 1px 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 4px 0, 0 0, 0 0, 0 0;
  }
  /* the foot of the page: the spine runs out into lime and the
     corner turns, so the object is finished rather than cut off */
  .fr-page .fr-sec--relate .fr-shift-to.is-last {
    border-radius: 0 0 12px 4px;
    padding-bottom: clamp(26px, 6vw, 32px);
    background-image:
      linear-gradient(180deg, rgba(68, 181, 156, 0.95) 0%, rgba(175, 221, 44, 0.95) 100%),
      linear-gradient(rgba(8, 18, 34, 0.55), rgba(8, 18, 34, 0.55)),
      linear-gradient(110deg, rgba(175, 221, 44, 0.07), rgba(175, 221, 44, 0) 62%),
      linear-gradient(168deg, #1b2740 0%, #141d31 100%);
    background-size: 4px 100%, 1px 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 4px 0, 0 0, 0 0;
  }

  /* THE CLOSING LINE IS THE SEAL ON THE PAGE, not a stray sentence
     on the background. It is attached to the foot, printed dark on
     lime, and it is the last thing in the section. */
  .fr-page .fr-sec--relate .fr-shift-land {
    margin-top: clamp(12px, 3vw, 16px);
    padding: clamp(15px, 3.8vw, 19px) clamp(18px, 4.6vw, 22px)
             clamp(15px, 3.8vw, 19px) clamp(20px, 5vw, 26px);
    border-radius: 4px 12px 12px 4px;
    font-weight: 620;
    color: #0d1708;
    background-image:
      linear-gradient(180deg, rgba(120, 163, 20, 0.95), rgba(120, 163, 20, 0.95)),
      linear-gradient(110deg, #cfee74 0%, #aedb2f 100%);
    background-size: 4px 100%, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
    box-shadow: var(--fr-d2);
  }
  .fr-page .fr-sec--relate .fr-shift-land::before { display: none; }
}
@media (max-width: 760px) {
  .fr-page .fr-sec--forward .fr-review-cue {
    font-size: 0.6875rem;
    padding-right: 13px;
  }
  .fr-page .fr-sec--forward .fr-review-tab {
    font-size: 0.6875rem;
    padding: 9px 13px;
  }
  .fr-page .fr-sec--forward .fr-review-tab[aria-selected="true"] {
    min-height: 48px;
    padding-bottom: 12px;
  }
}
@media (max-width: 760px) {
  /* THE ACTIONS CENTRE. The sheet above them is a document and stays
     left-ranged; the moment it ends the axis changes to the section's
     own centred mobile axis, and the visitor is being asked to choose.
     That change of alignment is the signal, and it costs no object. */
  .fr-page .fr-sec--decide .fr-invest-paths { text-align: center; }
  .fr-page .fr-sec--decide .fr-choice-label,
  .fr-page .fr-sec--decide .fr-choice-note { margin-inline: auto; }
  .fr-page .fr-sec--decide .fr-choice-label { max-width: 26ch; }
  /* the note has to clear "Free consultation. See what happens next" on
     one or two even lines, so it takes the shell rather than a measure */
  .fr-page .fr-sec--decide .fr-choice-note { max-width: none; margin-top: 14px; }

  /* THE CONSULTATION, REBUILT FOR THE PHONE. 01 / 02 / 03 are compact
     progression rows — the tab and the step's name on ONE line, the
     sentence indented under the name, a hairline between — and then
     Steven is a wider destination row: the chevron on the margin says
     the progression arrives, his photograph is the only image in the
     sequence, and his name is the largest type in it. Four big cards is
     exactly what this must not become; three tight rows and one arrival
     is the opposite shape. */
  
  /* SUBGRID HAS TO BE RELEASED EXPLICITLY, not just unset on the list.
     The desktop step is `grid-template-rows: subgrid` against a parent
     that gives it three rows; once the parent's rows go, the step
     inherits ONE row from its own auto placement and the title, the
     tab and the sentence all land on top of each other. Two rows of
     its own is the phone composition's actual shape: a title line and
     a sentence under it. */
  
  
  
  
  

  /* the destination */
  
  /* THE ARRIVAL. The sequence's only mark, in the number gutter: a
     short line descending out of step 03 and an arrowhead at its foot,
     pointing into Steven. Line progression, which is what the
     consultation is allowed — not a rail, not a station, not a node. */
  
  
  
  
  

  .fr-page .fr-statement p,
  .fr-page .fr-statement-mark { max-width: none; }
}
@media (max-width: 760px) {
  .fr-page .fr-sec--decide .fr-invest-choose .fr-invest-paths {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(26px, 6vw, 34px);
  }
  .fr-page .fr-sec--decide .fr-invest-choose .fr-choice + .fr-choice {
    padding-left: 0;
    padding-top: clamp(24px, 5.6vw, 32px);
    border-left: 0;
    border-top: 1px solid var(--fr-edge);
  }
}
@media (max-width: 760px) {
  /* AT 390 THE PRICE HAS TO BE IN THE FIRST GLANCE. The old card spent
     most of a screen on padding before the reader reached a figure. */
  .fr-page .fr-sec--decide .fr-invest-head {
    padding: clamp(14px, 3.6vw, 18px) clamp(18px, 4.6vw, 24px);
  }
  .fr-page .fr-sec--decide .fr-invest-equation {
    gap: clamp(12px, 3.4vw, 18px);
    padding: clamp(18px, 4.8vw, 26px) clamp(16px, 4vw, 22px)
             clamp(14px, 3.6vw, 20px) clamp(18px, 4.6vw, 24px);
  }
  .fr-page .fr-sec--decide .fr-price-num { font-size: clamp(2.125rem, 10.4vw, 2.75rem); }
  .fr-page .fr-sec--decide .fr-invest-howto {
    padding: 0 clamp(18px, 4.6vw, 24px) clamp(18px, 4.8vw, 26px);
    font-size: 0.875rem;
    line-height: 1.58;
  }
  .fr-page .fr-sec--decide .fr-invest-value {
    padding: clamp(16px, 4.2vw, 22px) clamp(18px, 4.6vw, 24px) clamp(18px, 4.8vw, 26px);
  }
  .fr-page .fr-sec--decide .fr-invest-value ul { grid-template-columns: minmax(0, 1fr); }
  /* in one column only the very first row opens the ledger */
  .fr-page .fr-sec--decide .fr-invest-value li:nth-child(2) {
    border-top: 1px solid rgba(150, 190, 235, 0.09);
  }
}
@media (max-width: 760px) {
  .fr-page .fr-sec--legal .fr-authorship {
    padding: clamp(22px, 5.6vw, 28px) clamp(18px, 4.6vw, 24px);
    border-radius: 3px 13px 13px 3px;
  }
  .fr-page .fr-sec--legal .fr-authorship-title {
    font-size: clamp(1.5rem, 7.4vw, 1.875rem);
  }
}
@media (max-width: 560px) {
  .fr-page { --fr-pad: 64px; --fr-shell: min(1208px, 100% - 40px); }
}
@media (max-width: 560px) {
  .fr-page .fr-sec--method .fr-method-head .fr-eyebrow {
    white-space: normal; max-width: min(100%, 320px); line-height: 1.5;
  }
}
@media (max-width: 560px) {
  .fr-page .fr-build-intro { gap: clamp(36px, 8vw, 48px); }
  /* three columns of list is a lot on a 390px measure: the step number
     keeps the progression reading and the glyph steps out */
  .fr-page .fr-plan-list { padding: clamp(4px, 1vw, 8px) clamp(18px, 4.6vw, 24px) clamp(12px, 3vw, 18px); }
  .fr-page .fr-plan-list li { grid-template-columns: auto minmax(0, 1fr); }
  .fr-page .fr-plan-node { display: none; }
  /* the contents page's tab steps down with the gutter */
  .fr-page .fr-plan-list::after { right: -6px; width: 6px; height: 42px; top: 24px; }
  /* the stack still steps out to the right, so the room for it comes
     out of the column rather than off the edge of the page */
  .fr-page .fr-plan-visual { padding-right: 30px; }
  /* AND THE STACK COMES IN WITH IT. These three offsets used to start at
     430, which left the band 431–560 holding the DESKTOP offsets (30px of
     x on sheet 3) inside this room. The narrow offsets belong wherever
     `.fr-doc` is narrow, which is here: 21 + the tab's 9px = 30. */
  .fr-page .fr-doc-sheet--1 { --fr-sheet-x: 7px; --fr-sheet-y: 7px; }
  .fr-page .fr-doc-sheet--2 { --fr-sheet-x: 14px; --fr-sheet-y: 14px; }
  .fr-page .fr-doc-sheet--3 { --fr-sheet-x: 21px; --fr-sheet-y: 21px; }
  /* THE ARTIFACT IS THE HERO ON A PHONE, so it takes the whole column it
     is given instead of stopping short of it */
  .fr-page .fr-doc { width: 100%; }
  /* the key light keeps inside the column on a phone */
  .fr-page .fr-doc-glow { inset: -10% -6%; }
  .fr-page .fr-doc-caption { max-width: none; }

  /* D ON A PHONE — A TABBED SEQUENCE. Two tidy columns of slips is a
     grid again; what the six inputs are at this width is a short run of
     filed tabs under the page edge. They wrap, each is as wide as its
     own label, and the first row still passes under the page above. */
  .fr-page .fr-proof-inputs .fr-ico { width: 16px; height: 16px; }
}


/* ---- 560: the editions fan out into a vertical stack ----------------
   A 44% page is 130px wide here, which is a card and not a page. The
   four unbind and fan: each one steps RIGHT of the one above it and
   they all finish on the same right edge, so the four bound spines read
   as a diagonal of cyan → indigo → teal → lime down the left of the
   stack and the set is plainly ONE object seen from the side. The folio
   number comes off the tab and sets inline beside the label, which is
   what lets each page be the height of its own sentence rather than a
   box. The monthly review then comes back to FULL WIDTH on top of the
   fan — the new edition laid over the ones it revises. */
@media (max-width: 560px) {
  .fr-page .fr-sec--forward .fr-route { gap: clamp(44px, 11vw, 56px); }
  .fr-page .fr-sec--forward .fr-route-stages { display: block; --fr-lap: 0px; margin-top: 0; }
  .fr-page .fr-sec--forward .fr-route-stages li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(12px, 3.4vw, 15px);
    align-items: baseline;
    min-height: 0;
    padding: clamp(17px, 4.4vw, 21px) clamp(18px, 4.6vw, 22px) clamp(19px, 4.8vw, 23px);
    transform: none;
  }
  /* MEASURED, AND THE RESETS ABOVE WERE BEING OUT-SPECIFIED.
     `li:nth-child(4)` is 0,4,1 against the plain `li` rule's 0,3,1, so
     the fourth page kept --fr-raise-1 and its own six-layer shadow at
     this width; and the 1024 block's nth-child(3)/(4) margin-top beat
     `li + li`'s 0,3,2 shorthand, so the one-column stack came out
     uneven. All of them are named at the same specificity here. */
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(4) { transform: none; }
  /* THE FAN, AND WHY IT WAS NOT FANNING. Each page steps right of the one
     above it and all four finish on the same edge, so the four bound spines
     read as a diagonal down the left of ONE stack. Measured at 390: pages
     two and three were not stepping at all, because `li + li` is 0,3,2 and
     the base rule zeroes its margin-left for the lap, while
     `li:nth-child(4)` is 0,4,1 and out-specified it — so only the fourth
     page moved. Every selector that can set a horizontal margin on a page
     at this width is named here, in one shorthand, so the four cannot drift
     apart again. */
  .fr-page .fr-sec--forward .fr-route-stages li,
  .fr-page .fr-sec--forward .fr-route-stages li + li,
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(3),
  .fr-page .fr-sec--forward .fr-route-stages li:nth-child(4) {
    margin: clamp(10px, 2.6vw, 13px) 0 0 calc(var(--lift, 0) * clamp(11px, 3.2vw, 14px));
  }
  .fr-page .fr-sec--forward .fr-route-stages li:first-child { margin-top: 0; }
  .fr-page .fr-sec--forward .fr-route-stages li::before {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    height: auto;
    padding: 0;
    border-radius: 0;
    background-image: none;
    box-shadow: none;
    font-size: 0.8125rem;
  }
  .fr-page .fr-sec--forward .fr-route-stages h3 { grid-column: 2; grid-row: 1; }
  .fr-page .fr-sec--forward .fr-route-stages p { grid-column: 2; grid-row: 2; margin-top: 7px; }

  .fr-page .fr-sec--forward .fr-review {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(13px, 3.4vw, 18px);
    padding: clamp(28px, 6.6vw, 34px) clamp(20px, 5.2vw, 26px) clamp(24px, 6vw, 30px);
    box-shadow:
      var(--fr-d3),
      8px 10px 0 -4px var(--fr-paper),
      8px 10px 0 -3px var(--fr-edge);
  }
  .fr-page .fr-sec--forward .fr-review-icon {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  .fr-page .fr-sec--forward .fr-review-copy {
    grid-column: 1;
    grid-row: 2;
  }

  .fr-page .fr-sec--relate .fr-relate-signature { column-gap: 0.42em; }
}
@media (max-width: 560px) {
  /* --fr-pad steps to 64 on .fr-page in 00-foundation.css. */
  
  .fr-page .fr-sec--decide .fr-choice-label { max-width: 24ch; }
  .fr-page .fr-sec--faq .faq-answer-inner { font: var(--fr-small) var(--font); line-height: 1.65; }
}


/* ============================================================
   THE PROGRAM SHEET SHOULD NOT LOOK PLAIN
   A flat navy panel with a price on it reads as a placeholder.
   What makes a pricing sheet feel considered is the same thing
   that makes the rest of this page work: it is a physical
   document. So the card gets a lit top cut edge, a ruled head,
   the two amounts set on one baseline with a real + between
   them, and the inclusion list filed under its own rule.
   ============================================================ */

/* the sheets filed behind this one */


/* the amounts belong to one statement: a real plus sign, not a gap */


/* the price itself reads as the figure on a document */


/* ============================================================
   "PAID IN TWO PARTS" HAS TO LOOK LIKE TWO PARTS OF ONE THING
   Wrapping the equation put the + badge beside $199 with the
   monthly figure dropped underneath, so the badge read as a note
   on the first price rather than the join between both. Stacked
   deliberately, the badge sits on the rule BETWEEN the two parts
   and the sentence above it is literally what the object shows.
   ============================================================ */
@media (max-width: 520px) {
  
  
  /* the circle moves to a pseudo so the rule can run out of it */
  
  
}
@media (max-width: 430px) {
  .fr-page .fr-eyebrow { font-size: 0.675rem; letter-spacing: 0.13em; }
  .fr-page main .btn:not(.btn-sm) { gap: 11px; padding: 16px 14px; letter-spacing: 0.06em; }
  .fr-page main .btn:not(.btn-sm) > svg,
  .fr-page main .btn:not(.btn-sm) > .fr-ico { width: 20px; height: 20px; }
}
@media (max-width: 430px) {
  .fr-page .fr-sec--problem { --fr-dx-jut: 11px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(1) { margin: 0 10px 0 14px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(2) { margin: -6px 5px 0 19px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(3) { margin: -6px 13px 0 15px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(4) { margin: -6px 7px 0 20px; }
}
@media (max-width: 430px) {
  .fr-sec--method { --fr-sheet-x: 13px; --fr-sheet-in: 22px; }
}
@media (max-width: 430px) {
  /* only the tab's own size steps here — the stack offsets came in at 560
     with the column, so they are not restated */
  .fr-page .fr-doc-sheet::before { height: 48px; width: 7px; right: -7px; }
  .fr-page .fr-work li::before { font-size: 1.45rem; }
  /* MEASURED, NOT ASSUMED. At 360 the gutter is 16px a side and the key
     light's -6% is 17.9px, so its left edge crossed the viewport by two
     pixels. It never produced a scrollbar — a left overhang does not —
     but the rule is no overflow at all, and a radial that fades to
     nothing loses nothing by stopping inside the gutter. */
  .fr-page .fr-doc-glow { inset: -10% -3%; }
}


/* ---- 430 and 360: the phone column ----------------------------------
   No type override here beyond the two label tracks at 360. Measured at
   360: the longest stage label still sets on two lines inside its page,
   the three review tabs still sit inside the 32px shell gutter, and
   every slip, sheet and light stays inside it too. */
@media (max-width: 430px) {
  .fr-page .fr-sec--fit .fr-fit-list li::after,
  .fr-page .fr-sec--fit .fr-fit-list li:nth-child(even)::after {
    left: -22px;
    width: 136px;
    height: 118px;
  }
}
@media (max-width: 430px) {
  .fr-page .fr-gains { --fr-page-x: 15px; row-gap: 32px; }
}
@media (max-width: 430px) {
  /* the sheet's margin closes up so the measure inside it stays
     readable on a 350px shell, and the edge comes in with it */
  
  
}
@media (max-width: 430px) {
  .fr-page .fr-sec--decide .fr-invest-join {
    font-size: 1.375rem;
    margin-bottom: clamp(14px, 3.8vw, 18px);
  }
}


/* ---- 9 · SMALL PHONES (520 / 400 / 360) ----------------------------
   Verified at 430, 400, 390 and 360. The organizer is centred and stands
   proud of nothing, so the only thing these blocks spend is internal
   padding and the divider rank's own height. */
@media (max-width: 400px) {
  .fr-page .fr-hero { padding-top: 88px; }
  .fr-page .fr-hero-actions .btn-primary:not(.btn-sm) {
    min-height: 60px;
    padding: 14px 15px;
    font-size: 0.78125rem; letter-spacing: 0.075em;
  }
  
}
@media (max-width: 400px) {
  .fr-page .fr-hero .fr-folio {
    --fo-pad: 9px;
    --fo-sheet-pad: 15px;
  }
  .fr-page .fr-hero .fr-folio-tab { width: 86px; }
  .fr-page .fr-hero .fr-folio-cue { font-size: 0.6875rem; padding-right: 13px; }
}
@media (max-width: 400px) {
  .fr-page .fr-diagnosis { --fr-dx-tab: 31px; }
  .fr-page .fr-diagnosis .fr-dx::before { font-size: 1.0625rem; padding: 0 11px 2px 11px; }
  .fr-page .fr-diagnosis .fr-dx::after { left: calc(var(--fr-dx-tabx, 0px) + 50px); }
}
@media (max-width: 390px) {
  .fr-sec--method { --fr-rail: 27px; --fr-colgap: 10px; }
  .fr-pillars .fr-pillar-num { padding: 9px 15px 9px 13px; gap: 9px; }
  .fr-pillars .fr-pillar-num > span { font-size: 0.5313rem; letter-spacing: 0.13em; }
  .fr-pillars .fr-pillar-cycle { font-size: 0.5938rem; letter-spacing: 0.17em; gap: 4px 11px; }
}
@media (max-width: 360px) {
  .fr-page { --fr-shell: min(1208px, 100% - 32px); }
  .fr-page .fr-eyebrow { padding: 8px 13px 9px 15px; font-size: 0.65rem; letter-spacing: 0.12em; }
  /* THE BACK SHEET IS DROPPED AT THE NARROWEST WIDTH. The gutter here is
     16px a side and the long methodology label sets to two or three
     lines, so a tab can run the full width of the shell; a sliver hanging
     into a 16px gutter is not depth, it is a mistake. The tab keeps its
     thickness, its edge highlight and its ladder level — it loses only
     the second sheet, which is the part that needs room. */
  .fr-page .fr-eyebrow::after { content: none; }
}
@media (max-width: 360px) {
  .fr-page .fr-hero-actions .btn-primary:not(.btn-sm) { letter-spacing: 0.06em; }
  
  
  
}
@media (max-width: 360px) {
  .fr-page .fr-sec--problem { --fr-dx-tab: 19px; --fr-dx-jut: 9px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(1) { margin: 0 7px 0 11px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(2) { margin: -5px 3px 0 15px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(3) { margin: -5px 10px 0 12px; }
  .fr-page .fr-diagnosis .fr-dx:nth-child(4) { margin: -5px 5px 0 16px; }
  .fr-page .fr-dx-symptom::after { width: 22px; height: 22px; }
  .fr-page .fr-dx-label { letter-spacing: 0.12em; }
}
@media (max-width: 360px) {
  .fr-page .fr-work li { padding: 24px 20px 26px 20px; }
  .fr-page .fr-work li:nth-child(1) { margin-right: 22px; }
  .fr-page .fr-work li:nth-child(2) { margin-right: 15px; }
  .fr-page .fr-work li:nth-child(3) { margin-right: 8px; }
  .fr-page .fr-scope-grid li:nth-child(1) { padding: 24px 20px 26px; }
}
@media (max-width: 360px) {
  .fr-page .fr-sec--relate .fr-shift-kicker,
.fr-page .fr-sec--fit .fr-fit-list li::before{ letter-spacing: 0.1em; }
  .fr-page .fr-sec--relate .fr-quote--guide figcaption img { width: 88px; }
}
@media (max-width: 360px) {
  .fr-page .fr-gains { --fr-page-x: 13px; }
  .fr-page .fr-gain-area,
  .fr-page .fr-gain-was > span,
  .fr-page .fr-gain-now > span { letter-spacing: 0.13em; }
}



/* ============================================================
   14 · REDUCED MOTION
   Every mechanism this file declares parks on a frame that still reads.
   All five keyframes are `from`-only, park off the surface, or hold a lit
   frame, so stopping them leaves the object complete: nothing is hidden,
   nothing is half-drawn, and nothing changes size, flow position or line
   count. frTab is `from`-only like frTab, so the back sheet is simply
   already in place. There is no longer a rule for frIdle because there is
   no longer a frIdle: a mechanism that has to be switched off here, on a
   phone, and again on :active was answering a question the press state
   had already answered.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fr-page .reveal,
  .fr-page .reveal.revealed { opacity: 1; transform: none; transition: none; }
  .fr-page .fr-h1.reveal.revealed > .fr-line,
  .fr-page .reveal.revealed .fr-h2 > .fr-line { animation: none; }
  /* frTab: the tab is already fully forward in its resting frame */
  .fr-page .reveal.revealed .fr-eyebrow,
  .fr-page .fr-eyebrow.reveal.revealed { animation: none; opacity: 1; transform: none; }
  /* frTab: likewise the back sheet, which is drawn in place */
  .fr-page .reveal.revealed .fr-eyebrow::after,
  .fr-page .fr-eyebrow.reveal.revealed::after { animation: none; opacity: 1; transform: none; }
  /* frAir: the key light holds a lit frame rather than going dark */
  .fr-page .fr-atmos { animation: none; opacity: 0.62; transform: none; }
  /* frSheen: the band stops off the end of its travel, so the face keeps
     its depth and never holds a stripe across the middle */
  .fr-page main .btn:not(.btn-sm)::before,
  .fr-page main .btn:not(.btn-sm):hover::before { animation: none; background-position: 160% 0; }
  .fr-page main .btn:not(.btn-sm),
  .fr-page main .btn:not(.btn-sm) > svg,
  .fr-page main .btn:not(.btn-sm) > .fr-ico { transition: none; }
  .fr-page main .btn:not(.btn-sm):hover,
  .fr-page main .btn:not(.btn-sm):active { transform: none; }
  .fr-page main .btn:not(.btn-sm):hover > svg,
  .fr-page main .btn:not(.btn-sm):hover > .fr-ico { transform: none; }
  .fr-page .fr-hero-setup a,
  .fr-page .fr-next-setup a,
  .fr-page .fr-close-setup a { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-gtext.revealed,
  .fr-page .revealed .fr-gtext,
  .fr-page .revealed.fr-gtext,
  .fr-page .fr-trace.revealed::after,
  .fr-page .revealed .fr-trace::after {
    animation: none;
  }
  /* finished, not merely stopped: the light has already passed */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .fr-page .fr-gtext { background-position: -90% 0, 0 0; }
  }
  .fr-page .fr-trace::after { transform: none; opacity: 1; }
}



/* ---- 11 · REDUCED MOTION --------------------------------------------
   Every object parks COMPLETED and identical to the settled animated
   render: the room holds a lit frame, the organizer stands open with its
   loose sheets settled into the stack, all six dividers out and readable
   with the open one still forward, all six entries at full ink, and the
   travelling highlight sitting off the end of its run with the static lit
   arrises still reading.

   The builder appends this block AFTER every hoisted max-width block, so
   a literal here beats a phone rule at equal specificity — which is why
   the turn in space, the stack offsets and the open divider's offset are
   all restated FROM THEIR TOKENS, never from a value. */
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-hero-atmos { animation: none; }
  .fr-page .fr-hero-setup a .fr-ico { transition: none; }
  .fr-page .fr-hero-setup a:hover .fr-ico { transform: none; }
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-hero .fr-folio,
  .fr-page .fr-hero .fr-folio:hover { transform: none; transition: none; }
  .fr-page .fr-hero .fr-folio-cue-hand::after { animation: none; }
  .fr-page .fr-hero .fr-folio.revealed .fr-folio-tab { animation: none; }
  .fr-page .fr-hero .fr-folio-panel.is-turning .fr-folio-rows,
  .fr-page .fr-hero .fr-folio-panel.is-turning .fr-folio-meter { animation: none; }
  .fr-page .fr-hero .fr-folio-page.is-stacked .fr-folio-panel { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-hero .fr-folio-tab[aria-selected="true"]::after,
  .fr-page .fr-hero .fr-folio.revealed .fr-folio-cue::after { animation: none; opacity: 0; }
}



/* =========================================================
   REDUCED MOTION
   Both mechanisms park on their completed frame, which is also their
   resting state: four slips at their rest angles, four inserts fully
   drawn out from under them, already lit and already at --fr-d3 —
   because parking the insert at --fr-d2 would park the section on the
   half of its idea it exists to resolve.

   The angles are restated at the four item classes because foundation's
   own park sets transform: none on every .reveal, and the builder hoists
   reduced-motion blocks to the end of the sheet in file order; a reader
   who stops motion must not be handed four aligned rectangles in place
   of a loose pile. The revealed class is named on every rule that parks
   something revealed starts, so the park outranks what it parks rather
   than tying with it on source order alone.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-sec--problem .fr-diagnosis .fr-dx,
  .fr-page .fr-sec--problem .fr-diagnosis .fr-dx.revealed,
  .fr-page .fr-sec--problem .fr-diagnosis .fr-dx:hover {
    animation: none;
    transition: none;
    opacity: 1;
    transform: rotate(var(--fr-rot, 0deg));
  }
  .fr-page .fr-sec--problem .fr-diagnosis .fr-dx .fr-dx-missing,
  .fr-page .fr-sec--problem .fr-diagnosis .fr-dx.revealed .fr-dx-missing {
    animation: none;
    transition: none;
    opacity: 1;
    transform: rotate(var(--fr-ins, 0deg));
    box-shadow: var(--fr-d3);
  }
  .fr-page .fr-sec--problem .fr-diagnosis .fr-dx .fr-dx-symptom {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-diagnosis .fr-dx.revealed::after,
  .fr-page .fr-sec--build .fr-work.revealed li::after,
  .fr-page .fr-sec--build .revealed .fr-work li::after,
  .fr-page .fr-sec--relate .fr-quote--guide.revealed::after {
    animation: none;
    transform: none;
    opacity: 1;
  }
}


/* Nothing here depends on motion to be legible: every keyframe above
   animates FROM a start state TO the element's own base style, so
   switching the animations off renders exactly the settled frame. */
@media (prefers-reduced-motion: reduce) {
  .fr-method-head.revealed .fr-method-creed::before,
.fr-method-close.revealed .fr-method-signature::before,
.fr-method-close.revealed .fr-method-signature .fr-line,
.fr-method-close.revealed .fr-method-signature .fr-line + .fr-line,
.fr-pillars .fr-pillar.revealed .fr-pillar-num,
.fr-pillars .fr-pillar:nth-of-type(3).revealed .fr-pillar-cycle::after{
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-folio4:has(.fr-pillar.revealed) .fr-folio4-spine::after {
    animation: none;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-diagnosis .fr-dx.revealed::after,
  .fr-page .fr-sec--build .fr-work.revealed li::after,
  .fr-page .fr-sec--build .revealed .fr-work li::after,
  .fr-page .fr-sec--relate .fr-quote--guide.revealed::after {
    animation: none;
    transform: none;
    opacity: 1;
  }
}


/* ============================================================
   REDUCED MOTION
   Every mechanism here parks on its COMPLETED frame: the four pages are
   in place and in their stair, the continuation marker is at full
   length, the artifact is on the emphasis rung with no offset, the
   sheets are out from under the cover, all six plan entries and all six
   printed inputs are legible, and nothing hovers. Nothing is hidden,
   nothing is half-drawn, and no object changes size, flow position or
   line count between the two states.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-work.revealed li,
  .fr-page .fr-scope.revealed .fr-scope-grid li {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* the completion rule parks fully inked to its own step, and the
     allocation line parks fully divided: both are `from`-only and both
     rest at scaleX(1), so parking is literally removing the animation */
  .fr-page .fr-work.revealed li > div::after,
  .fr-page .fr-scope.revealed .fr-scope-grid li:nth-child(1)::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* the continuation marker holds its full length rather than collapsing */
  .fr-page .fr-work.revealed .fr-work-then::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .fr-page .fr-plan-copy.revealed .fr-plan-list li,
  .fr-page .fr-plan-copy.revealed .fr-plan-title > .fr-line,
  .fr-page .fr-proof.revealed .fr-proof-title > .fr-line { animation: none; }
  /* the artifact parks ON the emphasis rung, so the object keeps the
     depth the section was designed around, and parks with NO offset, so
     reduced motion cannot leave it sitting 3px off its own caption */
  .fr-page .fr-plan-visual.reveal .fr-doc img {
    transition: none;
    box-shadow: var(--fr-d4);
    transform: none;
  }
  /* the sheets hold the settled offsets rather than hiding under the
     cover. They read the same two properties the reveal does, so the
     narrow offsets set at <=430 are what park here too — literal copies
     re-widened the stack on a phone whenever motion was reduced. */
  .fr-page .fr-plan-visual.reveal .fr-doc-sheet {
    transition: none;
    transform: translate3d(var(--fr-sheet-x), var(--fr-sheet-y), 0);
  }
  /* no hover emphasis travels: the rung still changes, the object does not */
  .fr-page .fr-work li,
  .fr-page .fr-scope-grid li { transition: none; }
  .fr-page .fr-work li:hover,
  .fr-page .fr-scope-grid li:hover,
  .fr-page .fr-scope-grid li:nth-child(1):hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-diagnosis .fr-dx.revealed::after,
  .fr-page .fr-sec--build .fr-work.revealed li::after,
  .fr-page .fr-sec--build .revealed .fr-work li::after,
  .fr-page .fr-sec--relate .fr-quote--guide.revealed::after {
    animation: none;
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* struck, not mid-strike */
  .fr-page .fr-sec--plan .fr-proof-generic li::after,
  .fr-page .fr-sec--plan .fr-proof.revealed .fr-proof-generic li::after {
    animation: none;
    transform: scaleX(1);
  }
}


/* =========================================================
   REDUCED MOTION
   Five mechanisms run in these three sections and every one of them
   parks on a frame that still reads, because every one-shot is a `from`
   frame and the one ambient is lit at rest. The insert keeps its stock,
   its spine, its fold, its fore-edge light and its backing sheet; the
   organizer keeps its depth, its bound edge, its ambient light and its
   completion cue; the editions keep their tabs, their indices, their
   climb and their thickness; the monthly review is simply already
   filed, at the depth and position the insertion would have left it;
   the fit markers keep their numbers and their lights. Nothing is
   hidden, nothing is half-drawn, and no size, flow position or line
   count differs between the two states. The comparison is also taken
   straight to its activated depth here, so a reader who never sees the
   step still gets the hierarchy that step was carrying.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* A — his words are already printed on the page beside him */
  .fr-page .fr-sec--relate .fr-quote--guide.reveal.revealed blockquote {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* C — the organizer sits at its activated depth, its ambient holds a
     lit frame, and the completion cue is simply present */
  .fr-page .fr-sec--relate .fr-shift-panel {
    box-shadow: var(--fr-d3);
    transition: none;
  }
  .fr-page .fr-sec--relate .fr-shift-panel::before {
    animation: none;
    opacity: 0.74;
    transform: none;
    transition: none;
  }
  .fr-page .fr-sec--relate .fr-shift.revealed .fr-shift-panel::after {
    animation: none;
    opacity: 1;
  }
  /* D — the editions, their tabs and the review page they are revised
     into are all complete in their resting frame */
  .fr-page .fr-sec--forward .fr-route-stages li { transition: none; }
  .fr-page .fr-sec--forward .fr-route.revealed .fr-route-stages li,
  .fr-page .fr-sec--forward .fr-route.revealed .fr-route-stages li::before,
  .fr-page .fr-sec--forward .fr-route.revealed .fr-review {
    animation: none;
    opacity: 1;
  }
  .fr-page .fr-sec--forward .fr-route.revealed .fr-route-stages li::before,
  .fr-page .fr-sec--forward .fr-route.revealed .fr-review { transform: none; }
  /* E — the markers and their lights are present */
  .fr-page .fr-sec--fit .fr-fit-list li.reveal.revealed::before,
  .fr-page .fr-sec--fit .fr-fit-list li.reveal.revealed::after {
    animation: none;
    opacity: 1;
  }
  .fr-page .fr-sec--fit .fr-fit-list li.reveal.revealed::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-sec--forward .fr-review-panel.is-turning { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-sec--forward .fr-review-cue-hand::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-diagnosis .fr-dx.revealed::after,
  .fr-page .fr-sec--build .fr-work.revealed li::after,
  .fr-page .fr-sec--build .revealed .fr-work li::after,
  .fr-page .fr-sec--relate .fr-quote--guide.revealed::after {
    animation: none;
    transform: none;
    opacity: 1;
  }
}



/* ---- 8.7 · REDUCED MOTION ------------------------------------------- */
/* Both mechanisms are `from` frames only, so stopping them leaves every
   page lying on the desk with its edge drawn full length and its line
   written. Verified against the settled animated render: identical. */
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-gains.revealed > .fr-gain > .fr-gain-now,
  .fr-page .fr-gains.revealed > .fr-gain > .fr-gain-now::before {
    animation: none;
    animation-delay: 0s;
  }
  .fr-page .fr-gain-now,
  .fr-page .fr-gain-now > span { transition: none; }
}



/* =========================================================
   11 · REDUCED MOTION
   Every completed state is shown, and the test is literal: the settled
   animated render and the reduced-motion render are the same image. The
   continuation edge is the only element whose animation changes
   geometry, so it is parked at scaleY(1) explicitly rather than left to
   a fill mode.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  
  /* NO BUTTON TRANSFORM IS PARKED HERE: this file sets none. The CTA
     lift is foundation's and foundation already stops it. */
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-sec--decide .fr-invest.revealed::after { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-page .fr-next.revealed .fr-journey::before,
  .fr-page .fr-next.revealed .fr-journey-stage:not(:last-child)::before {
    animation: none;
    transform: none;
  }
}
/* ============================================================
   CREDIT & FINANCIAL STRATEGY — editorial page system
   Namespace: .cs-*  (only credit-strategy.html carries body.cs-page)
   A sibling of the Financial Reset system: same palette, type pairing and
   spacing rhythm, its own devices. The page's signature visuals: a
   strategy snapshot laid against the portrait, a method that changes
   character between a built phase and a looping phase, a personalized
   action plan drawn as the product it is, a comparison carrying the
   TaxFunders shield, and the thesis set as three beats.
   Radii stay restrained (6-22px): editorial rather than app-like.
   Isolated on purpose: nothing here can change the Financial Reset page.
   ============================================================ */

.cs-page {
  --cs-green: #57ab28;
  --cs-lime: #afdd2c;
  --cs-cyan: #02c1ff;
  --cs-sky: #38cfff;
  --cs-teal: #44b59c;
  --cs-royal: #5d8bff;
  --cs-indigo: #6f7ee0;
  --cs-amber: #f2b64c;
  --cs-ink: #070e1d;
  --cs-gutter: clamp(20px, 5vw, 56px);
  background: var(--navy-900);
}
.cs-page [data-accent="green"]  { --acc: var(--cs-green);  --acc-rgb: 87, 171, 40; }
.cs-page [data-accent="lime"]   { --acc: var(--cs-lime);   --acc-rgb: 175, 221, 44; }
.cs-page [data-accent="cyan"]   { --acc: var(--cs-sky);    --acc-rgb: 56, 207, 255; }
.cs-page [data-accent="teal"]   { --acc: var(--cs-teal);   --acc-rgb: 68, 181, 156; }
.cs-page [data-accent="royal"]  { --acc: var(--cs-royal);  --acc-rgb: 93, 139, 255; }
.cs-page [data-accent="indigo"] { --acc: var(--cs-indigo); --acc-rgb: 111, 126, 224; }
.cs-page [data-accent="amber"]  { --acc: var(--cs-amber);  --acc-rgb: 242, 182, 76; }

.cs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cs-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cs-nowrap { white-space: nowrap; }
.cs-line { display: block; text-wrap: balance; }
.cs-move-num, .cs-step-num, .cs-learn-n, .cs-ap-v, .cs-pin, .cs-meet-num { font-variant-numeric: lining-nums; }

/* Reveal tuned for this page: short and blur-free. */
.cs-page .reveal {
  transform: translateY(12px);
  filter: none;
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.cs-page .reveal.revealed { opacity: 1; transform: none; }

/* Numbered pin shared by the action plan and its legend. */
.cs-pin {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cs-lime), var(--cs-green));
  box-shadow: 0 0 0 4px rgba(175,221,44,0.13);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cs-ink);
}

/* ---- Shell & rhythm ---- */
.cs-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--cs-gutter);
}
.cs-sec {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(72px, 8vw, 120px) 0;
}
.cs-atmos { position: absolute; inset: 0; pointer-events: none; }
.cs-atmos--method {
  background:
    radial-gradient(55% 40% at 78% 6%, rgba(56,207,255,0.10) 0%, transparent 70%),
    radial-gradient(40% 45% at 6% 80%, rgba(175,221,44,0.07) 0%, transparent 70%);
}
.cs-atmos--receive {
  background:
    radial-gradient(45% 40% at 80% 18%, rgba(175,221,44,0.10) 0%, transparent 70%),
    radial-gradient(40% 40% at 6% 70%, rgba(10,45,194,0.18) 0%, transparent 70%);
}
.cs-atmos--program {
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(56,207,255,0.10) 0%, transparent 70%),
    radial-gradient(40% 45% at 8% 70%, rgba(175,221,44,0.06) 0%, transparent 70%);
}
.cs-atmos--voices {
  background:
    radial-gradient(45% 55% at 10% 26%, rgba(56,207,255,0.09) 0%, transparent 70%),
    radial-gradient(45% 45% at 92% 58%, rgba(175,221,44,0.06) 0%, transparent 70%);
}
.cs-atmos--invest {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  background:
    radial-gradient(55% 40% at 50% 22%, rgba(87,171,40,0.13) 0%, transparent 70%),
    radial-gradient(45% 45% at 92% 70%, rgba(10,45,194,0.18) 0%, transparent 72%);
}
.cs-atmos--close {
  background:
    radial-gradient(55% 80% at 18% 40%, rgba(56,207,255,0.12) 0%, transparent 70%),
    radial-gradient(50% 70% at 86% 70%, rgba(87,171,40,0.16) 0%, transparent 72%);
}

/* Section tones alternate so no two neighbours sit at the same depth. */
.cs-sec--fit       { background: linear-gradient(180deg, #050b17 0%, #091324 100%); }
.cs-sec--program   { background: var(--navy-900); border-top: 1px solid rgba(255,255,255,0.05); }
.cs-sec--method    { background: linear-gradient(180deg, #060c19 0%, var(--navy-900) 100%); border-top: 1px solid rgba(255,255,255,0.05); }
.cs-sec--receive   { background: var(--surface-raised); }
.cs-sec--next      { background: var(--navy-800); border-top: 1px solid rgba(255,255,255,0.05); }
.cs-sec--learn     { background: linear-gradient(180deg, var(--navy-900) 0%, #081329 100%); border-top: 1px solid rgba(255,255,255,0.05); }
.cs-sec--compare   { background: var(--navy-800); }
.cs-sec--voices    { background: linear-gradient(180deg, var(--navy-900) 0%, #081329 100%); }
.cs-sec--invest    { background: linear-gradient(180deg, #081329 0%, var(--navy-900) 100%); }
.cs-sec--faq       { background: var(--surface); border-top: 1px solid rgba(255,255,255,0.05); }
.cs-sec--legal     { background: var(--navy-900); padding: clamp(44px, 5vw, 72px) 0 clamp(56px, 6vw, 84px); }

/* ---- Eyebrow ---- */
.cs-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 0 22px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-sky);
}
.cs-eyebrow::before,
.cs-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, currentColor);
}
.cs-eyebrow::after { display: none; background: linear-gradient(90deg, currentColor, transparent); }
.cs-eyebrow--accent { color: var(--cs-lime); }
.cs-intro--center .cs-eyebrow,
.cs-diff-head .cs-eyebrow,
.cs-close .cs-eyebrow { margin-inline: auto; }
.cs-intro--center .cs-eyebrow::after,
.cs-diff-head .cs-eyebrow::after,
.cs-close .cs-eyebrow::after { display: block; }

/* ---- Display type ---- */
.cs-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 4.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--white);
}
.cs-h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3.1vw, 3.125rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
}
.cs-h2--xl { font-size: clamp(2.5rem, 3.8vw, 3.75rem); line-height: 1.06; }
.cs-h1 em, .cs-h2 em, .cs-close-title em, .cs-home h3 em, .cs-bp-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--cs-lime);
}
.cs-body {
  font-size: clamp(1.0625rem, 0.45vw + 0.92rem, 1.1875rem);
  line-height: 1.68;
  color: var(--gray-200);
  text-wrap: pretty;
  max-width: 62ch;
}
.cs-h2 + .cs-body { margin-top: 24px; }

.cs-intro { margin-bottom: clamp(44px, 5vw, 64px); }
.cs-intro--center { max-width: 1000px; margin-inline: auto; text-align: center; }
.cs-intro--center .cs-body { margin-inline: auto; }

/* =========================================================
   HERO
   The portrait is an editorial rectangle dissolving into the page on its
   left and lower edges, traced by one lime-to-cyan rule on the two hard
   edges. The strategy snapshot shares the portrait's grid cell and is
   pushed down by a width-based margin, so it always starts below Steven's
   face and the block grows to fit it at every width.
   ========================================================= */
.cs-hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(124px, 14vh, 164px) 0 clamp(84px, 9vw, 132px);
  background: var(--navy-900);
}
.cs-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,207,255,0.28) 30%, rgba(175,221,44,0.28) 70%, transparent);
}
.cs-hero-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 74% 40%, rgba(56,207,255,0.13) 0%, transparent 70%),
    radial-gradient(32% 38% at 60% 88%, rgba(175,221,44,0.09) 0%, transparent 72%),
    radial-gradient(55% 60% at 4% 10%, rgba(41,51,130,0.32) 0%, transparent 70%);
}
.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-areas: "copy visual";
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
.cs-hero-copy { grid-area: copy; max-width: 620px; }
.cs-hero-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.cs-hero-visual::before {
  content: '';
  position: absolute;
  inset: 10% -4% 6% 12%;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 58% 40%, rgba(56,207,255,0.2) 0%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}

.cs-portrait {
  grid-area: 1 / 1;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  margin: 0;
  aspect-ratio: 5 / 6;
}
.cs-portrait picture { display: contents; }
.cs-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 4%;
  border-radius: 6px 6px 0 0;
  -webkit-mask-image:
    linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.55) 12%, #000 30%),
    linear-gradient(to bottom, #000 54%, transparent 99%);
  mask-image:
    linear-gradient(100deg, transparent 0%, rgba(0,0,0,0.55) 12%, #000 30%),
    linear-gradient(to bottom, #000 54%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.cs-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(175,221,44,0.6);
  border-right: 1px solid rgba(56,207,255,0.45);
  border-radius: 6px 6px 0 0;
  -webkit-mask-image: linear-gradient(216deg, #000 26%, transparent 76%);
  mask-image: linear-gradient(216deg, #000 26%, transparent 76%);
  pointer-events: none;
}

/* Strategy snapshot: a path, not a dashboard. */
.cs-snap {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  position: relative;
  z-index: 3;
  width: min(330px, 66%);
  margin: 50% 0 0 -9%;
  padding: 15px 18px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.13);
  background: linear-gradient(162deg, rgba(18,33,62,0.95) 0%, rgba(8,17,33,0.97) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 34px 74px -30px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.07);
}
.cs-snap::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cs-lime), var(--cs-sky), transparent);
}
.cs-snap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cs-snap-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.cs-snap-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-lime);
  box-shadow: 0 0 10px var(--cs-lime);
}
.cs-snap-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b7c4de;
}
.cs-snap-path li {
  --node: var(--cs-sky);
  position: relative;
  padding: 0 0 11px 22px;
}
.cs-snap-path li[data-step="goal"]     { --node: var(--cs-lime); }
.cs-snap-path li[data-step="block"]    { --node: var(--cs-amber); }
.cs-snap-path li[data-step="review"]   { --node: var(--cs-sky); }
.cs-snap-path li[data-step="priority"] { --node: var(--cs-green); }
.cs-snap-path li[data-step="next"]     { --node: var(--cs-teal); padding-bottom: 2px; }
.cs-snap-path li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--node);
  background: #0b1629;
}
.cs-snap-path li[data-step="goal"]::before { background: var(--node); box-shadow: 0 0 10px rgba(175,221,44,0.7); }
.cs-snap-path li[data-step="next"]::before { border-style: dashed; }
.cs-snap-path li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, var(--node), rgba(255,255,255,0.1));
}
.cs-snap-k {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--node);
}
.cs-snap-v {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}
.cs-snap-path li[data-step="priority"] .cs-snap-v { color: #e6f6c4; }
.cs-snap-v { text-wrap: balance; }
.cs-snap-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(255,255,255,0.13);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.cs-lede {
  margin-top: clamp(22px, 2.4vw, 30px);
  max-width: 54ch;
  font-size: clamp(1.0625rem, 0.4vw + 0.94rem, 1.1875rem);
  line-height: 1.68;
  color: var(--gray-200);
  text-wrap: pretty;
}
.cs-lede-lead { color: var(--white); font-weight: 500; }
.cs-lede-kicker { display: none; }
.cs-hero-sub, .cs-bridge { display: none; }
.cs-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: clamp(30px, 3.4vw, 40px);
}
.cs-hero-alt,
.cs-close-alt {
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.cs-hero-alt a,
.cs-close-alt a,
.cs-plan-talk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--cs-sky);
  border-bottom: 1px solid rgba(56,207,255,0.35);
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.cs-hero-alt a .cs-ico,
.cs-plan-talk .cs-ico { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.cs-hero-alt a:hover,
.cs-close-alt a:hover,
.cs-plan-talk:hover { color: var(--cs-cyan); border-bottom-color: var(--cs-cyan); }
.cs-hero-alt a:hover .cs-ico,
.cs-plan-talk:hover .cs-ico { transform: translateX(3px); }

/* =========================================================
   1. WHERE YOU'RE HEADED — the message holds, the scenarios scroll
   The home-readiness card leads the right column; the other five
   scenarios share one ruled panel, each with its own accent and a mark
   drawn for that situation.
   ========================================================= */
.cs-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.cs-fit-lead { position: sticky; top: 120px; }
.cs-fit-lead .cs-body { max-width: 46ch; }

.cs-home {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 20px;
  border: 1px solid rgba(175,221,44,0.42);
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(87,171,40,0.24) 0%, transparent 62%),
    radial-gradient(50% 60% at 100% 100%, rgba(2,193,255,0.11) 0%, transparent 68%),
    #0b1629;
  box-shadow: 0 50px 110px -60px rgba(87,171,40,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
}
.cs-home::before {
  content: '';
  position: absolute;
  top: -1px; left: clamp(26px, 3vw, 40px);
  width: 96px;
  height: 2px;
  background: linear-gradient(90deg, var(--cs-lime), transparent);
}
.cs-home-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(175,221,44,0.45);
  background: rgba(175,221,44,0.1);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-lime);
  white-space: nowrap;
}
.cs-home-flag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-lime);
  box-shadow: 0 0 10px var(--cs-lime);
}
.cs-home-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 20px;
}
.cs-home-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  color: var(--cs-lime);
  background: linear-gradient(145deg, rgba(175,221,44,0.28), rgba(175,221,44,0.05));
  border: 1px solid rgba(175,221,44,0.45);
}
.cs-home-icon .cs-ico { width: 26px; height: 26px; }
.cs-home h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.1vw, 2.0625rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
}
.cs-home > p { margin-top: 18px; font-size: 1rem; line-height: 1.66; color: var(--gray-200); text-wrap: pretty; }
.cs-home > .cs-home-note {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(7,14,29,0.45);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.cs-scenes {
  position: relative;
  margin-top: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)), #0a1527;
  box-shadow: 0 40px 90px -60px rgba(0,0,0,0.9);
  overflow: hidden;
}
.cs-scenes::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,207,255,0.6), transparent);
}
.cs-scenes li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 22px clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(255,255,255,0.07);
  transition: background 0.35s var(--ease-out);
}
.cs-scenes li:first-child { border-top: 0; }
.cs-scenes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 3px;
  height: 44px;
  border-radius: 0 3px 3px 0;
  background: var(--acc);
  box-shadow: 0 0 14px rgba(var(--acc-rgb), 0.7);
}
.cs-scenes li:hover { background: rgba(var(--acc-rgb), 0.05); }
.cs-scene-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: var(--acc);
  background: linear-gradient(145deg, rgba(var(--acc-rgb), 0.24), rgba(var(--acc-rgb), 0.05));
  border: 1px solid rgba(var(--acc-rgb), 0.4);
}
.cs-scene-icon .cs-ico { width: 23px; height: 23px; }
.cs-scenes h3 { font-size: 1.0938rem; font-weight: 600; line-height: 1.35; color: var(--white); text-wrap: pretty; }
.cs-scenes p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

/* =========================================================
   2. THE STRATEGY — a method that changes character
   Phase one is built once: filled nodes on a solid rail. The rail runs
   through the phase-two gate into a looping phase: ring nodes, a lime
   rail, and a return track on the left that carries an arrow back into
   04. The question panel beside it says what the reading is for.
   ========================================================= */
.cs-method {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: clamp(36px, 4vw, 76px);
  align-items: start;
}
.cs-moves { --track: 46px; --node: 56px; }
.cs-phase { position: relative; }
.cs-phase--build { padding-left: var(--track); }
.cs-phase-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px calc(var(--track) * -1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-sky);
}
.cs-phase-label .cs-ico { width: 15px; height: 15px; }
.cs-phase-n {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
}
.cs-phase--loop {
  margin-top: 14px;
  padding: 46px clamp(18px, 2.2vw, 26px) 16px var(--track);
  border-radius: 22px;
  border: 1px solid rgba(175,221,44,0.3);
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(175,221,44,0.09) 0%, transparent 70%),
    linear-gradient(180deg, rgba(68,181,156,0.05), rgba(68,181,156,0));
}
.cs-phase--loop::before {
  content: '';
  position: absolute;
  top: -1px; left: 22px; right: 22px;
  height: 2px;
  background: linear-gradient(90deg, rgba(56,207,255,0.8), var(--cs-lime) 45%, rgba(175,221,44,0));
}
.cs-phase--loop .cs-phase-label {
  position: absolute;
  top: 0;
  left: 18px;
  z-index: 2;
  margin: 0;
  padding: 7px 15px 7px 7px;
  border-radius: 999px;
  border: 1px solid rgba(175,221,44,0.5);
  background: #08111f;
  color: var(--cs-lime);
  transform: translateY(-50%);
}
.cs-move-set { display: grid; }
.cs-move {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: 20px;
  padding-bottom: 28px;
}
.cs-phase--loop .cs-move:last-child { padding-bottom: 6px; }
/* Each step draws the rail down to the next one. */
.cs-move::before {
  content: '';
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) + 2px);
  bottom: -2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.7), rgba(var(--acc-rgb), 0.18));
}
/* 03 carries the rail through the gate into 04. */
.cs-phase--build .cs-move:last-child::before {
  bottom: calc(-14px - 46px);
  background: linear-gradient(180deg, rgba(111,126,224,0.75), rgba(175,221,44,0.85));
}
.cs-phase--loop .cs-move:last-child::before { display: none; }
.cs-move-num {
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  border: 1px solid rgba(var(--acc-rgb), 0.6);
  background:
    radial-gradient(circle at 34% 28%, rgba(var(--acc-rgb), 0.45) 0%, rgba(var(--acc-rgb), 0.12) 72%),
    #0a1527;
  box-shadow: 0 0 0 6px rgba(var(--acc-rgb), 0.06), 0 10px 24px -10px rgba(var(--acc-rgb), 0.6);
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1;
  color: var(--white);
}
.cs-phase--loop .cs-move-num {
  border: 1.5px solid rgba(var(--acc-rgb), 0.75);
  background: #09131f;
  box-shadow: 0 0 0 5px rgba(var(--acc-rgb), 0.07), inset 0 0 14px rgba(var(--acc-rgb), 0.2);
  color: var(--acc);
}
/* Return track: 06 back up to 04, drawn in three pieces so it follows
   whatever height the steps take. */
.cs-phase--loop .cs-move::after {
  content: '';
  position: absolute;
  left: -26px;
  top: 0;
  bottom: 0;
  width: 26px;
  border-left: 2px solid rgba(175,221,44,0.55);
  pointer-events: none;
}
.cs-phase--loop .cs-move:first-child::after {
  top: calc(var(--node) / 2 - 1px);
  border-top: 2px solid rgba(175,221,44,0.55);
  border-top-left-radius: 16px;
}
.cs-phase--loop .cs-move:last-child::after {
  bottom: auto;
  height: calc(var(--node) / 2 + 1px);
  border-bottom: 2px solid rgba(175,221,44,0.55);
  border-bottom-left-radius: 16px;
}
.cs-phase--loop .cs-move:first-child .cs-move-num::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--cs-lime);
  border-right: 2px solid var(--cs-lime);
  transform: translateY(-50%) rotate(45deg);
}
.cs-move h3 {
  align-self: center;
  min-height: var(--node);
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
}
.cs-move p {
  margin-top: 4px;
  max-width: 56ch;
  font-size: 0.9688rem;
  line-height: 1.66;
  color: var(--gray-200);
  text-wrap: pretty;
}

.cs-method-side { position: sticky; top: 116px; }
.cs-scan {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(56,207,255,0.12) 0%, transparent 65%),
    #0a1527;
  box-shadow: 0 50px 110px -60px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.cs-scan-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, rgba(56,207,255,0.14), transparent 70%);
}
.cs-scan-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; color: var(--white); }
.cs-scan-sub { margin-top: 5px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.cs-scan-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-scan-bureaus { display: flex; gap: 10px; }
.cs-scan-bureaus span { width: 24px; text-align: center; letter-spacing: 0.04em; }
.cs-scan-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border-top: 1px solid rgba(255,255,255,0.055);
}
.cs-scan-rows li:first-child { border-top: 0; }
.cs-scan-q { font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
.cs-scan-q b {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
}
.cs-scan-q b::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin: 0.55em 10px 0 0;
  border-radius: 2px;
  background: var(--acc);
  transform: rotate(45deg);
}
.cs-dots { display: flex; gap: 10px; font-style: normal; }
.cs-dots b { display: grid; place-items: center; width: 24px; }
.cs-dots b::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px rgba(var(--acc-rgb), 0.75);
}
/* Where the reports disagree: one bureau reads differently. */
.cs-dots--split b:last-child::before {
  background: transparent;
  border: 1.5px solid var(--cs-amber);
  box-shadow: 0 0 8px rgba(242,182,76,0.6);
}
.cs-scan-foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 22px 17px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(175,221,44,0.05);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-200);
}
.cs-scan-foot strong { color: var(--cs-lime); font-weight: 600; white-space: nowrap; }
.cs-scan-foot .cs-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--cs-lime); }

/* =========================================================
   3. WHAT YOU RECEIVE — the action plan as a product
   ========================================================= */
.cs-product { max-width: 1180px; margin: 0 auto; }
.cs-ap {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 36%),
    #0a1527;
  box-shadow: 0 70px 140px -60px rgba(0,0,0,0.95), 0 0 0 1px rgba(56,207,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.cs-ap::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-lime), var(--cs-sky), transparent);
}
.cs-ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(24px, 2.8vw, 34px) clamp(22px, 3vw, 40px) clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(90deg, rgba(87,171,40,0.2) 0%, rgba(2,193,255,0.06) 58%, transparent 100%);
}
.cs-ap-id { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); }
.cs-ap-mark { width: clamp(44px, 4vw, 56px); height: auto; flex-shrink: 0; filter: drop-shadow(0 0 16px rgba(56,207,255,0.35)); }
.cs-ap-kicker {
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs-lime);
}
.cs-ap-title { font-family: var(--font-serif); font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--white); white-space: nowrap; }
.cs-ap-tag {
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b7c4de;
}
.cs-ap-goal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 14px clamp(22px, 3vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(90deg, rgba(175,221,44,0.1), transparent 70%);
}
.cs-ap-goal .cs-ico { width: 18px; height: 18px; color: var(--cs-lime); }
.cs-ap-goal span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-lime); }
.cs-ap-goal strong { font-size: 1rem; font-weight: 600; color: var(--white); }
.cs-ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; border-bottom: 1px solid rgba(255,255,255,0.07); }
.cs-ap-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; padding: 16px clamp(16px, 2.2vw, 26px) 18px; border-left: 1px solid rgba(255,255,255,0.07); }
.cs-ap-stat:first-child { border-left: 0; padding-left: clamp(22px, 3vw, 40px); }
.cs-ap-k { display: block; align-self: end; font-size: 0.5938rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.cs-ap-v {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--white);
}
.cs-ap-v small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.cs-ap-v small .cs-ico { width: 13px; height: 13px; color: var(--cs-lime); stroke-width: 2.2; }
.cs-ap-meter {
  position: relative;
  display: block;
  height: 5px;
  margin-top: 12px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
}
.cs-ap-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--at);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--cs-sky), var(--cs-lime));
}
/* Where the balance was last review: a tick on the track. */
.cs-ap-meter::after {
  content: '';
  position: absolute;
  top: -3px;
  left: var(--was);
  width: 2px;
  height: 11px;
  border-radius: 2px;
  background: rgba(255,255,255,0.5);
}
/* Three numbered parts across one document. */
.cs-ap-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 0.95fr); }
@media (min-width: 1181px) {
  .cs-ap-stats { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 0.95fr); }
  .cs-ap-stat, .cs-ap-stat:first-child { padding-inline: clamp(20px, 2.2vw, 30px); }
}
.cs-ap-block { padding: clamp(24px, 2.4vw, 30px) clamp(20px, 2.2vw, 30px) clamp(26px, 2.6vw, 32px); }
.cs-ap-block + .cs-ap-block { border-left: 1px solid rgba(255,255,255,0.08); }
/* Section-level subheads: numbered, bright, ruled. */
.cs-ap-h {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.cs-ap-h::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 72px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cs-lime), rgba(56,207,255,0.45));
}
.cs-ap-h .cs-pin { width: 30px; height: 30px; font-size: 0.8125rem; box-shadow: 0 0 0 5px rgba(175,221,44,0.14); }
.cs-ap-h--note { color: var(--cs-lime); }
.cs-ap-changes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,0.055);
}
.cs-ap-changes li:first-child { border-top: 0; padding-top: 2px; }
.cs-ap-changes .cs-ico { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
.cs-ap-changes [data-tone="good"] .cs-ico { color: var(--cs-lime); background: rgba(175,221,44,0.13); }
.cs-ap-changes [data-tone="info"] .cs-ico { color: var(--cs-sky); background: rgba(56,207,255,0.13); }
.cs-ap-changes li > span { font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }
.cs-ap-changes b { display: block; margin-top: 1px; font-size: 0.9375rem; font-weight: 600; color: var(--white); text-wrap: pretty; }

.cs-ap-moves li {
  --st: var(--cs-sky);
  --st-rgb: 56, 207, 255;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.055);
}
.cs-ap-moves li:first-child { border-top: 0; padding-top: 2px; }
.cs-ap-moves li[data-state="done"]     { --st: var(--cs-lime);  --st-rgb: 175, 221, 44; }
.cs-ap-moves li[data-state="progress"] { --st: var(--cs-sky);   --st-rgb: 56, 207, 255; }
.cs-ap-moves li[data-state="next"]     { --st: #dfe7f7;         --st-rgb: 223, 231, 247; }
.cs-ap-moves li[data-state="ongoing"]  { --st: var(--cs-teal);  --st-rgb: 68, 181, 156; }
.cs-mv-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  color: var(--st);
  border: 1.5px solid rgba(var(--st-rgb), 0.7);
}
.cs-mv-icon .cs-ico { width: 14px; height: 14px; stroke-width: 2.4; }
li[data-state="done"] .cs-mv-icon { color: var(--cs-ink); background: linear-gradient(145deg, var(--cs-lime), var(--cs-green)); border-color: transparent; }
.cs-mv-text { font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
.cs-mv-text b { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--white); text-wrap: balance; }
li[data-state="done"] .cs-mv-text b { color: #b9c6de; }
.cs-mv-state {
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--st-rgb), 0.45);
  background: rgba(var(--st-rgb), 0.08);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--st);
}
.cs-mv-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.cs-mv-bar i {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.cs-mv-bar i::before {
  content: '';
  position: absolute;
  inset: 0 46% 0 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--cs-sky), var(--cs-lime));
}
.cs-mv-bar em { font-style: normal; font-size: 0.6875rem; font-weight: 600; color: var(--cs-sky); white-space: nowrap; }

/* Steven's note: its own lit column with his portrait and name. */
.cs-ap-note {
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(2,193,255,0.13) 0%, transparent 70%),
    rgba(2,193,255,0.035);
}
.cs-ap-by { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cs-ap-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(175,221,44,0.75);
  box-shadow: 0 0 0 5px rgba(175,221,44,0.09);
}
.cs-ap-by span { font-size: 0.8125rem; line-height: 1.35; color: var(--text-muted); }
.cs-ap-by b { display: block; font-size: 0.9688rem; font-weight: 700; color: var(--white); }
.cs-ap-note-text { font-size: 0.9375rem; line-height: 1.66; color: var(--gray-200); text-wrap: pretty; }
.cs-ap-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 11px;
  padding: 16px clamp(22px, 3vw, 40px) 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, rgba(87,171,40,0.16), transparent 75%);
}
.cs-ap-foot .cs-ico { width: 18px; height: 18px; color: var(--cs-lime); }
.cs-ap-foot span:not(.cs-pin) { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-lime); }
.cs-ap-foot strong { font-size: 0.9375rem; font-weight: 600; color: var(--white); }


/* Everything in the program: its own section; varied modules, not a checklist. */
.cs-program-rule {
  display: block;
  width: 132px;
  height: 2px;
  margin: 24px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-sky), var(--cs-lime), transparent);
}
.cs-program-rule + .cs-body { margin-top: 22px; }
.cs-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-dl-item {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: 18px;
  border: 1px solid rgba(var(--acc-rgb), 0.22);
  background:
    radial-gradient(85% 70% at 0% 0%, rgba(var(--acc-rgb), 0.1) 0%, transparent 62%),
    #0a1527;
}
/* Corner bracket in the item's accent. */
.cs-dl-item::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 26px;
  height: 26px;
  border-top: 2px solid var(--acc);
  border-left: 2px solid var(--acc);
  border-top-left-radius: 18px;
  pointer-events: none;
}
.cs-dl-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  color: var(--acc);
  background: linear-gradient(145deg, rgba(var(--acc-rgb), 0.26), rgba(var(--acc-rgb), 0.05));
  border: 1px solid rgba(var(--acc-rgb), 0.42);
}
.cs-dl-icon .cs-ico { width: 22px; height: 22px; }
.cs-dl-item h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--white); text-wrap: balance; }
.cs-dl-item p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.62; color: var(--text-muted); text-wrap: pretty; }
.cs-dl-item--feature {
  grid-column: span 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
  padding: clamp(26px, 3vw, 38px);
  border-color: rgba(175,221,44,0.45);
  background:
    radial-gradient(55% 90% at 0% 0%, rgba(87,171,40,0.25) 0%, transparent 65%),
    radial-gradient(50% 80% at 100% 100%, rgba(2,193,255,0.12) 0%, transparent 70%),
    #0b1629;
  box-shadow: 0 50px 110px -60px rgba(87,171,40,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
.cs-dl-item--feature h3 { font-family: var(--font-serif); font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 500; line-height: 1.08; }
.cs-dl-item--feature p { font-size: 1rem; color: var(--gray-200); }
.cs-dl-item--feature .cs-dl-sig { margin-top: 16px; text-transform: uppercase; }
.cs-dl-sig-name { display: block; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.16em; color: var(--cs-lime); }
.cs-dl-sig-title { display: block; margin-top: 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; color: #b7c4de; text-wrap: balance; }
.cs-dl-portrait {
  display: block;
  width: 116px;
  height: 116px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--cs-lime) 0%, var(--cs-green) 45%, var(--cs-sky) 100%);
  box-shadow: 0 18px 44px -14px rgba(175,221,44,0.55);
}
.cs-dl-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cs-dl-item--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 22px;
  align-items: center;
}
.cs-dl-item--wide .cs-dl-icon { margin: 0; }
.cs-dl-item--progress {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, rgba(2,193,255,0.13) 0%, rgba(68,181,156,0.09) 52%, rgba(175,221,44,0.08) 100%) padding-box,
    linear-gradient(#0a1527, #0a1527) padding-box,
    linear-gradient(100deg, rgba(56,207,255,0.65), rgba(68,181,156,0.45) 50%, rgba(175,221,44,0.6)) border-box;
  box-shadow: 0 40px 90px -60px rgba(2,193,255,0.55);
}
.cs-dl-item--progress::before { border-color: var(--cs-sky); }
.cs-dl-item--progress .cs-dl-icon { color: var(--cs-ink); border: 0; background: linear-gradient(145deg, var(--cs-sky), var(--cs-lime)); }
.cs-dl-item--wide p { margin-top: 4px; }
.cs-dl-chips { display: grid; grid-template-columns: repeat(3, max-content); justify-content: end; gap: 8px 10px; }
.cs-dl-chips::before {
  content: 'Reviewed each time';
  grid-column: 1 / -1;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-dl-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.045);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d4e6ee;
  cursor: default;
}
.cs-dl-chips li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-sky);
  box-shadow: 0 0 8px rgba(56,207,255,0.75);
}

/* =========================================================
   4. WHAT HAPPENS NEXT — role-coded steps, then the session
   You-steps are cyan, the we-step is lime, and the session card carries
   both. This block depends only on the .cs-page tokens so a future
   post-booking page can reuse it as-is.
   ========================================================= */
.cs-next-title { font-size: clamp(3rem, 6vw, 5.25rem); }
.cs-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); }
.cs-step {
  --role: var(--cs-sky);
  --role-rgb: 56, 207, 255;
  --role-title: #c4f0ff;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  padding: 24px 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(var(--role-rgb), 0.26);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(var(--role-rgb), 0.13) 0%, transparent 65%),
    #0a1527;
}
.cs-step::before {
  content: '';
  position: absolute;
  top: -1px; left: 22px;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--role), transparent);
}
.cs-step[data-role="us"] {
  --role: var(--cs-lime);
  --role-rgb: 175, 221, 44;
  --role-title: #e4f6b2;
  border-color: rgba(175,221,44,0.42);
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(87,171,40,0.22) 0%, transparent 65%),
    #0b1629;
  box-shadow: 0 34px 76px -44px rgba(87,171,40,0.6);
}
.cs-step--key {
  border-color: rgba(56,207,255,0.5);
  box-shadow: 0 0 0 1px rgba(56,207,255,0.1), 0 34px 76px -44px rgba(56,207,255,0.55);
}
/* Chevron connector between cards. */
.cs-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(clamp(16px, 2vw, 26px) / -2 - 5px);
  z-index: 2;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--cs-lime);
  border-right: 2px solid var(--cs-lime);
  transform: translateY(-50%) rotate(45deg);
}
.cs-step-num { font-family: var(--font-serif); font-size: 1.875rem; line-height: 1; color: var(--role); }
/* YOU and WE read at a glance: a filled badge in the card's own role
   colour, so each whole card codes who acts (YOU cyan, WE lime). */
.cs-step-role {
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink);
}
.cs-step[data-role="you"] .cs-step-role {
  background: linear-gradient(145deg, #8fe6ff, var(--cs-cyan));
  box-shadow: 0 6px 18px -8px rgba(2,193,255,0.95);
}
.cs-step[data-role="us"] .cs-step-role {
  background: linear-gradient(145deg, var(--cs-lime), var(--cs-green));
  box-shadow: 0 6px 18px -8px rgba(175,221,44,0.85);
}
.cs-step-role .cs-ico { width: 14px; height: 14px; stroke-width: 2.4; }
.cs-role-mark { width: 18px; height: 18px; padding: 2px; border-radius: 50%; object-fit: contain; background: var(--cs-ink); }
.cs-step-icon {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 20px 0 16px;
  border-radius: 13px;
  color: var(--role);
  background: linear-gradient(145deg, rgba(var(--role-rgb), 0.26), rgba(var(--role-rgb), 0.05));
  border: 1px solid rgba(var(--role-rgb), 0.42);
}
.cs-step-icon .cs-ico { width: 22px; height: 22px; }
/* Hierarchy: number/owner, then a bright title, then quieter body. */
.cs-step h3 {
  grid-column: 1 / -1;
  font-size: clamp(1.125rem, 1.25vw, 1.25rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--role-title);
  text-shadow: 0 0 24px rgba(var(--role-rgb), 0.28);
  text-wrap: balance;
}
.cs-step p { grid-column: 1 / -1; margin-top: 9px; font-size: 0.9063rem; line-height: 1.6; color: #9fb2d4; text-wrap: pretty; }
.cs-step .cs-step-key {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(56,207,255,0.38);
  background: #0c1b2e;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #d6f4ff;
}
.cs-step-key b { font-weight: 700; color: var(--cs-sky); }
.cs-step-key .cs-ico { width: 16px; height: 16px; margin-top: 1px; color: var(--cs-sky); }
@media (min-width: 761px) {
  .cs-steps { margin-bottom: 104px; }
  .cs-step .cs-step-key {
    position: absolute;
    left: -1px; right: -1px;
    top: calc(100% + 12px);
    margin: 0;
  }
  .cs-step .cs-step-key::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 28px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(56,207,255,0.38);
    border-left: 1px solid rgba(56,207,255,0.38);
    background: #0c1b2e;
    transform: rotate(45deg);
  }
  .cs-sec--next .cs-meet::after { left: 88.4%; }
}
@media (min-width: 1181px) {
  /* Four across: titles share a two-line row so every body starts level. */
  .cs-step h3 { min-height: 2.56em; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .cs-sec--next .cs-meet::after { left: 75%; }
}


.cs-meet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(22px, 2.4vw, 30px);
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: 22px;
  border: 1px solid rgba(175,221,44,0.42);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(87,171,40,0.26) 0%, transparent 65%),
    radial-gradient(50% 80% at 100% 100%, rgba(2,193,255,0.14) 0%, transparent 70%),
    #0b1629;
  box-shadow: 0 60px 130px -60px rgba(87,171,40,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cs-meet::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-lime), var(--cs-sky), transparent);
}
.cs-meet::after {
  content: '';
  position: absolute;
  top: -19px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cs-lime);
  border-bottom: 2px solid var(--cs-lime);
  transform: translateX(-50%) rotate(45deg);
}
.cs-meet-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: start; }
.cs-meet-portrait {
  display: block;
  width: 112px;
  height: 112px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--cs-lime) 0%, var(--cs-green) 45%, var(--cs-sky) 100%);
  box-shadow: 0 16px 44px -14px rgba(175,221,44,0.55);
}
.cs-meet-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cs-meet-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cs-meet-num {
  font-family: var(--font-serif);
  font-size: clamp(2.375rem, 3vw, 2.875rem);
  line-height: 0.9;
  background: linear-gradient(135deg, var(--cs-lime), var(--cs-sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-meet-stage {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(175,221,44,0.45);
  background: linear-gradient(90deg, rgba(175,221,44,0.16), rgba(56,207,255,0.12));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.cs-meet-title { margin-top: 5px; font-family: var(--font-serif); font-size: clamp(2.25rem, 3.4vw, 3.125rem); font-weight: 500; line-height: 1.02; color: var(--white); }
.cs-meet-lede { margin-top: 13px; font-size: 1rem; line-height: 1.65; color: var(--gray-200); text-wrap: pretty; }
.cs-meet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-meet-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(7,14,29,0.45);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}
.cs-meet-list .cs-ico { width: 20px; height: 20px; color: var(--cs-lime); }
.cs-meet-list li, .cs-plan-includes li, .cs-compare-from, .cs-compare-to, .cs-ap-note p { text-wrap: pretty; }
.cs-plan-foot { text-wrap: balance; }
.cs-meet-list .cs-meet-first {
  grid-column: 1 / -1;
  border-color: rgba(175,221,44,0.4);
  background: linear-gradient(90deg, rgba(175,221,44,0.14), rgba(7,14,29,0.45) 70%);
}
.cs-next-action { margin-top: clamp(44px, 5vw, 60px); text-align: center; }
.cs-next-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  max-width: 70ch;
  margin: 18px auto 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}
.cs-next-note .cs-ico { width: 16px; height: 16px; margin-top: 2px; color: var(--cs-sky); }

/* =========================================================
   5. THE PART THAT STAYS WITH YOU — education first
   ========================================================= */
.cs-learn {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: clamp(36px, 4.5vw, 84px);
  align-items: center;
}
@media (min-width: 761px) {
  .cs-learn-copy .cs-h2 { font-size: clamp(2.125rem, 2.8vw, 2.625rem); }
}
.cs-learn-copy .cs-body { max-width: 48ch; }
.cs-learn-chip {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: fit-content;
  max-width: 48ch;
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(175,221,44,0.32);
  background: rgba(175,221,44,0.07);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--white);
  text-wrap: pretty;
}
.cs-learn-chip .cs-ico { width: 19px; height: 19px; margin-top: 2px; color: var(--cs-lime); }
.cs-learn-panel {
  position: relative;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 36px) clamp(12px, 1.4vw, 18px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(2,193,255,0.12) 0%, transparent 65%),
    #0b1528;
  box-shadow: 0 60px 120px -60px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cs-learn-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cs-sky), transparent);
}
.cs-learn-title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
}
.cs-learn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
.cs-learn-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
  padding: 17px 0 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cs-learn-n {
  grid-row: 1 / span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--cs-lime);
}
.cs-learn-list b { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--white); text-wrap: balance; }
.cs-learn-list li > span:last-child { margin-top: 4px; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }

/* =========================================================
   6. THE DIFFERENCE
   The headline lands in two beats. The comparison keeps its lit
   TaxFunders column; that column now carries the real TaxFunders shield
   as its mark, and each row's category is a navigational heading.
   ========================================================= */
.cs-diff-head { max-width: 980px; margin: 0 auto clamp(48px, 5.4vw, 72px); text-align: center; }
.cs-diff-title { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; }
.cs-diff-a {
  display: block;
  font-size: clamp(2.375rem, 3.9vw, 3.625rem);
  line-height: 1.06;
  color: var(--white);
  text-wrap: balance;
}
.cs-diff-a::after {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  margin: 0.55em auto 0.4em;
  background: linear-gradient(90deg, transparent, var(--cs-lime), transparent);
}
.cs-diff-b {
  display: block;
  font-size: clamp(2.75rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  text-wrap: balance;
}
.cs-diff-b em { font-style: italic; color: var(--cs-lime); text-shadow: 0 0 44px rgba(175,221,44,0.28); }
.cs-diff-head .cs-body { max-width: 60ch; margin: 26px auto 0; }

.cs-compare {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1fr) minmax(0, 1.15fr);
  max-width: 1160px;
  margin: 0 auto;
}
.cs-compare-head,
.cs-compare-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.cs-compare-glow {
  grid-column: 3;
  grid-row: 1 / span 6;
  z-index: 0;
  border-radius: 18px;
  border: 1px solid rgba(175,221,44,0.36);
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(87,171,40,0.26) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10,45,194,0.1), rgba(2,193,255,0.035)),
    #0b1629;
  box-shadow: 0 60px 120px -60px rgba(87,171,40,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
}
.cs-compare-glow::before {
  content: '';
  position: absolute;
  top: -1px; left: 14%; right: 14%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cs-lime), transparent);
}
.cs-compare-head { grid-row: 1; }
/* Explicit rows: the lit panel occupies column 3 across all six rows, so
   auto-placement would otherwise push the full-width rows below it. */
.cs-compare > .cs-compare-row:nth-child(3) { grid-row: 2; }
.cs-compare > .cs-compare-row:nth-child(4) { grid-row: 3; }
.cs-compare > .cs-compare-row:nth-child(5) { grid-row: 4; }
.cs-compare > .cs-compare-row:nth-child(6) { grid-row: 5; }
.cs-compare > .cs-compare-row:nth-child(7) { grid-row: 6; }
.cs-compare-col { display: inline-flex; align-items: center; gap: 12px; padding: 22px 24px 20px; }
.cs-compare-col b { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.cs-compare-col small { display: block; margin-top: 3px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); }
.cs-compare-col--from { color: #b3c1dc; }
.cs-compare-col--from .cs-ico { width: 30px; height: 30px; padding: 5px; border-radius: 50%; color: #8fa1c4; border: 1px solid rgba(255,255,255,0.2); }
.cs-compare-col--to { color: var(--cs-lime); }
.cs-shield { width: 38px; height: auto; flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(56,207,255,0.35)); }
.cs-compare-row > span { padding: 22px 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.cs-compare-area {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 0 !important;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
}
.cs-compare-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--cs-ink);
  border: 0;
  background: linear-gradient(145deg, var(--acc), rgba(var(--acc-rgb), 0.62));
  box-shadow: 0 8px 20px -10px rgba(var(--acc-rgb), 0.8);
}
.cs-compare-mark .cs-ico { width: 20px; height: 20px; stroke-width: 2; }
@media (min-width: 981px) {
  .cs-compare-area { align-items: flex-start; }
  .cs-compare-mark { margin-top: -7px; }
}
.cs-compare-from {
  position: relative;
  padding-left: 48px !important;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Neutral mark for the common approach: a quiet dash, not a verdict. */
.cs-compare-from::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 26px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.24);
  background: linear-gradient(rgba(143,161,196,0.9), rgba(143,161,196,0.9)) center / 7px 1.5px no-repeat;
}
.cs-compare-to {
  position: relative;
  padding-left: 58px !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
}
.cs-compare-to::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 22px;
  width: 24px;
  height: 21px;
  background: url("../img/credit-strategy/tf-shield-96.png") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(56,207,255,0.35));
}
.cs-compare-tag { display: none; }

/* =========================================================
   THESIS — the brand statement as three beats
   Each sentence steps in and grows, its label lit in sequence
   (score, report, strategy) along one rail. The real TaxFunders shield
   sits behind it as a watermark.
   ========================================================= */
.cs-thesis-band {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(96px, 11vw, 164px) 0;
  background: #050b17;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-thesis-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 75% at 18% 50%, rgba(10,45,194,0.26) 0%, transparent 70%),
    radial-gradient(45% 65% at 86% 56%, rgba(87,171,40,0.17) 0%, transparent 70%);
}
.cs-thesis-atmos::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(60% 70% at 50% 50%, #000 0%, transparent 78%);
}
.cs-thesis-watermark {
  position: absolute;
  right: 3%;
  top: 50%;
  width: min(460px, 38vw);
  height: auto;
  opacity: 0.07;
  transform: translateY(-50%);
  pointer-events: none;
}
.cs-thesis { position: relative; max-width: 1080px; margin: 0 auto; }
.cs-beats { position: relative; margin: 0; }
.cs-beats::before {
  content: '';
  position: absolute;
  left: 119px;
  top: 0.9em;
  bottom: 1.6em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(122,147,192,0.5), rgba(56,207,255,0.7) 45%, rgba(175,221,44,0.95));
}
.cs-beat {
  --k: #7a93c0;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  column-gap: 40px;
  align-items: baseline;
  margin: 0;
}
.cs-beat + .cs-beat { margin-top: clamp(16px, 2.2vw, 30px); }
.cs-beat--2 { --k: var(--cs-sky); }
.cs-beat--3 { --k: var(--cs-lime); }
.cs-beat-k {
  position: relative;
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k);
}
.cs-beat-k::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #050b17;
  border: 2px solid var(--k);
  box-shadow: 0 0 14px var(--k);
  transform: translate(50%, -50%);
}
.cs-beat--3 .cs-beat-k::after { background: var(--k); }
.cs-beat-t {
  font-family: var(--font-serif);
  font-weight: 500;
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.012em;
}
.cs-beat--1 .cs-beat-t { font-size: clamp(1.75rem, 2.7vw, 2.5rem); color: #9aabcb; }
.cs-beat--2 .cs-beat-t { font-size: clamp(2rem, 3.3vw, 3.125rem); color: #d6e0f2; padding-left: 0.8em; }
.cs-beat--3 .cs-beat-t { font-size: clamp(2.5rem, 4.8vw, 4.625rem); color: var(--white); padding-left: 1.4em; }
.cs-beat--3 em { font-style: italic; color: var(--cs-lime); text-shadow: 0 0 50px rgba(175,221,44,0.3); }
/* The signature the three beats resolve into. */
.cs-thesis figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(44px, 4.8vw, 64px);
  padding-left: 140px;
}
.cs-sig-rule {
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(56,207,255,0), var(--cs-sky), var(--cs-lime));
}
.cs-sig-shield { width: 44px; height: auto; filter: drop-shadow(0 0 14px rgba(56,207,255,0.45)); }
.cs-sig-text {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #8fe6ff 0%, var(--cs-sky) 40%, var(--cs-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(56,207,255,0.25));
}

/* =========================================================
   7. SOUND FAMILIAR — the question, then the strategic answer
   The quote is the pain on the card's own surface; the answer is a lit
   panel with an accent bar and heavier type, joined by a marker on the
   seam, so the expertise outweighs the complaint.
   ========================================================= */
.cs-voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}
.cs-voice:nth-child(even) { margin-top: 52px; }
.cs-voice {
  position: relative;
  display: grid;
  grid-template-rows: auto 0 auto;
  margin: 0;
  border-radius: 18px 18px 18px 4px;
  border: 1px solid rgba(var(--acc-rgb), 0.28);
  background:
    radial-gradient(85% 60% at 0% 0%, rgba(var(--acc-rgb), 0.1) 0%, transparent 62%),
    #0a1527;
  box-shadow: 0 30px 70px -44px rgba(0,0,0,0.9);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.cs-voice:nth-child(even) { border-radius: 18px 18px 4px 18px; }
.cs-voice blockquote { margin: 0; padding: 28px 28px 24px; }
.cs-voice blockquote p {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.8vw, 1.6875rem);
  font-weight: 500;
  line-height: 1.26;
  color: #dbe3f3;
  text-wrap: balance;
}
.cs-voice blockquote p::before {
  content: '\201C';
  position: absolute;
  left: -4px;
  top: -0.16em;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--acc);
  opacity: 0.85;
}
.cs-voice-link {
  grid-row: 2;
  justify-self: start;
  align-self: center;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 26px;
  border-radius: 50%;
  border: 1px solid rgba(var(--acc-rgb), 0.55);
  background: #0a1527;
}
.cs-voice-link::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid var(--acc);
  border-bottom: 2px solid var(--acc);
  transform: rotate(45deg);
}
.cs-voice figcaption {
  grid-row: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 15px;
  row-gap: 6px;
  padding: 24px 26px 26px;
  border-top: 1px solid rgba(var(--acc-rgb), 0.32);
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.15) 0%, rgba(var(--acc-rgb), 0.035) 100%);
  box-shadow: inset 3px 0 0 var(--acc);
}
.cs-voice-label {
  grid-column: 2;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc);
}
.cs-voice-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--acc);
  background: rgba(var(--acc-rgb), 0.15);
  border: 1px solid rgba(var(--acc-rgb), 0.38);
}
.cs-voice-icon .cs-ico { width: 21px; height: 21px; }
.cs-voice-text {
  grid-column: 2;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white);
  text-wrap: pretty;
}
.cs-voice:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb), 0.5); }

/* =========================================================
   8. INVESTMENT — one program, two ways to enrol
   A single card. The toggle swaps individual and couples pricing in
   place (radio inputs, no script); Individual is checked in the markup.
   ========================================================= */
.cs-plan {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(45% 50% at 20% 0%, rgba(87,171,40,0.15) 0%, transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 55%, rgba(10,45,194,0.06) 100%),
    #0a1527;
  box-shadow: 0 50px 110px -60px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.cs-plan::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175,221,44,0.85), transparent);
}
.cs-plan-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cs-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  padding: clamp(26px, 2.8vw, 34px) clamp(22px, 3vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, rgba(87,171,40,0.22) 0%, rgba(2,193,255,0.07) 58%, transparent 100%);
}
.cs-plan-name {
  position: relative;
  padding-bottom: 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 2.5vw, 2.375rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--white);
  white-space: nowrap;
}
.cs-plan-name::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 84px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cs-lime), rgba(56,207,255,0.25));
}
.cs-plan-choose { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }
.cs-plan-cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 14px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(175,221,44,0.9);
}
.cs-plan-cue .cs-ico { width: 13px; height: 13px; stroke-width: 2.2; transform: rotate(90deg); }
.cs-plan-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(5,11,24,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.cs-plan-switch label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-200);
  cursor: pointer;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.cs-plan-switch label .cs-ico { width: 17px; height: 17px; }
.cs-plan-pair { display: inline-flex; }
.cs-plan-pair .cs-ico + .cs-ico { margin-left: -8px; }
.cs-plan-switch label:hover { color: var(--white); background: rgba(255,255,255,0.05); }
#cs-plan-individual:checked ~ .cs-plan-head label[for="cs-plan-individual"],
#cs-plan-couples:checked ~ .cs-plan-head label[for="cs-plan-couples"] {
  color: var(--cs-ink);
  background: linear-gradient(145deg, var(--cs-lime), var(--cs-green));
  box-shadow: 0 10px 24px -12px rgba(175,221,44,0.9);
}
#cs-plan-individual:focus-visible ~ .cs-plan-head label[for="cs-plan-individual"],
#cs-plan-couples:focus-visible ~ .cs-plan-head label[for="cs-plan-couples"] {
  outline: 2px solid var(--cs-sky);
  outline-offset: 3px;
}
/* Discoverability: the selected option breathes three times once the
   card is on screen, then rests. Never a constant pulse. */
@keyframes cs-breathe {
  0%, 100% { box-shadow: 0 10px 24px -12px rgba(175,221,44,0.9), 0 0 0 0 rgba(175,221,44,0); }
  50%      { box-shadow: 0 12px 30px -10px rgba(175,221,44,1), 0 0 0 6px rgba(175,221,44,0.14); }
}
.cs-plan.revealed #cs-plan-individual:checked ~ .cs-plan-head label[for="cs-plan-individual"],
.cs-plan.revealed #cs-plan-couples:checked ~ .cs-plan-head label[for="cs-plan-couples"] {
  animation: cs-breathe 3.2s ease-in-out 0.5s 3;
}

.cs-plan-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.cs-plan-pricing { padding: clamp(30px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px); border-right: 1px solid rgba(255,255,255,0.08); }
.cs-plan-option--couples { display: none; }
#cs-plan-couples:checked ~ .cs-plan-body .cs-plan-option--individual { display: none; }
#cs-plan-couples:checked ~ .cs-plan-body .cs-plan-option--couples { display: block; }
.cs-plan-option { animation: cs-fade 0.4s var(--ease-out); }
@keyframes cs-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cs-plan-for { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-sky); }
.cs-plan-equation { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin: 18px 0 20px; }
.cs-plan-fee { display: flex; flex-direction: column; }
.cs-plan-num {
  font-family: var(--font-serif);
  font-size: clamp(3.75rem, 5.4vw, 5.25rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--white);
}
.cs-plan-num small { margin-left: 4px; font-family: var(--font); font-size: 0.24em; font-weight: 500; letter-spacing: 0; color: var(--gray-200); }
.cs-plan-label { margin-top: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-lime); }
.cs-plan-plus {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(175,221,44,0.55);
  background: #0e1a30;
  box-shadow: 0 0 0 7px rgba(175,221,44,0.06);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--cs-lime);
}
.cs-plan-scope { max-width: 46ch; font-size: 0.9375rem; line-height: 1.6; color: var(--gray-200); text-wrap: pretty; }
.cs-plan-cta { margin-top: 26px; }
.cs-plan-cta .cs-ico { width: 16px; height: 16px; stroke-width: 2.2; }
@keyframes cs-cta-breathe {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 0 0 rgba(87,171,40,0); }
  50%      { box-shadow: var(--shadow-card), 0 0 0 5px rgba(87,171,40,0.18), 0 14px 34px -12px rgba(87,171,40,0.75); }
}
.cs-plan.revealed .cs-plan-cta { animation: cs-cta-breathe 3.4s ease-in-out 1.6s 3; }
.cs-plan-secure { margin-top: 12px; font-size: 0.8125rem; color: var(--text-muted); }
.cs-plan-includes { padding: clamp(30px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px); background: rgba(255,255,255,0.018); }
.cs-plan-includes-title { margin-bottom: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.cs-plan-includes li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--white);
}
.cs-plan-includes li:first-child { border-top: 0; }
.cs-plan-includes .cs-ico {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  stroke-width: 2.6;
  color: var(--cs-ink);
  background: linear-gradient(145deg, var(--cs-lime), var(--cs-green));
}
.cs-plan-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 20px clamp(22px, 3vw, 40px);
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,11,24,0.45);
  text-align: center;
}
.cs-plan-foot-q { font-size: 1rem; font-weight: 600; color: var(--white); }
.cs-plan-foot-note { width: 100%; font-size: 0.8125rem; color: var(--text-muted); }
.cs-plan-term-note { max-width: 74ch; margin: 22px auto 0; text-align: center; font-size: 0.8125rem; line-height: 1.7; color: var(--text-muted); text-wrap: pretty; }

/* =========================================================
   NOT READY YET — The Credit Blueprint
   The cover is already a dimensional render, so the depth is built
   around it: a spotlight, two frame arcs, a floor shadow and a slow
   float. No reflection, no fake perspective.
   ========================================================= */
.cs-sec--blueprint {
  padding: clamp(84px, 9vw, 136px) 0;
  background: var(--navy-900);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cs-bp-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(2,193,255,0.11) 0%, rgba(10,45,194,0.07) 28%, transparent 52%),
    radial-gradient(38% 60% at 82% 60%, rgba(87,171,40,0.09) 0%, transparent 70%);
}
.cs-bp {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.cs-bp-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 40vw, 540px);
}
.cs-bp-stage > *,
.cs-bp-stage .cs-bp-book { grid-area: 1 / 1; }
/* Behind the book: a drafting grid (it is a blueprint), one diagonal
   shaft of light, and two registration marks framing the cover. Square
   geometry only, no halo. */
.cs-bp-grid {
  align-self: stretch;
  justify-self: stretch;
  background-image:
    linear-gradient(rgba(56,207,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,207,255,0.1) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center;
  -webkit-mask-image: radial-gradient(58% 56% at 50% 48%, #000 18%, transparent 74%);
  mask-image: radial-gradient(58% 56% at 50% 48%, #000 18%, transparent 74%);
}
.cs-bp-beam {
  align-self: stretch;
  justify-self: stretch;
  background: linear-gradient(115deg, transparent 34%, rgba(56,207,255,0.11) 48%, rgba(175,221,44,0.05) 56%, transparent 66%);
  /* Feathered like the grid, so the shaft never meets the stage's edges. */
  -webkit-mask-image: radial-gradient(56% 54% at 50% 50%, #000 26%, transparent 76%);
  mask-image: radial-gradient(56% 54% at 50% 50%, #000 26%, transparent 76%);
}
.cs-bp-mark { width: 46px; height: 46px; border: 0 solid rgba(175,221,44,0.6); }
.cs-bp-mark--tl { align-self: start; justify-self: start; margin: 7% 0 0 14%; border-top-width: 2px; border-left-width: 2px; }
.cs-bp-mark--br { align-self: end; justify-self: end; margin: 0 14% 9% 0; border-bottom-width: 2px; border-right-width: 2px; border-color: rgba(56,207,255,0.6); }
.cs-bp-stage picture { display: contents; }
.cs-bp-book {
  position: relative;
  z-index: 2;
  width: min(290px, 64%);
  height: auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 44px 50px rgba(0,0,0,0.7)) drop-shadow(0 0 60px rgba(56,207,255,0.2));
  animation: cs-float 7s ease-in-out infinite;
}
@keyframes cs-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
.cs-bp-floor {
  align-self: end;
  width: 54%;
  height: 26px;
  margin-bottom: 4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 70%);
  filter: blur(6px);
}
.cs-bp-eyebrow { margin-bottom: 22px; }
.cs-bp-eyebrow span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(175,221,44,0.5);
  background: rgba(175,221,44,0.1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs-lime);
}
.cs-bp-eyebrow span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-lime);
  box-shadow: 0 0 10px var(--cs-lime);
}
.cs-bp-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--white);
}
.cs-bp-title .cs-line:first-child { font-size: 0.72em; color: #d3dcef; }
.cs-bp-title + .cs-body { margin-top: 20px; max-width: 48ch; }
.cs-bp-cta {
  margin-top: 30px;
  color: var(--white);
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, #0c1a33, #0a1427) padding-box,
    linear-gradient(120deg, var(--cs-cyan), #0a2dc2 48%, var(--cs-lime)) border-box;
  box-shadow: 0 18px 44px -20px rgba(2,193,255,0.75), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cs-bp-cta:hover {
  color: var(--white);
  transform: translateY(-2px);
  background:
    linear-gradient(120deg, rgba(2,193,255,0.22), rgba(10,45,194,0.2) 50%, rgba(87,171,40,0.22)) padding-box,
    linear-gradient(120deg, var(--cs-cyan), #0a2dc2 48%, var(--cs-lime)) border-box;
  box-shadow: 0 24px 54px -18px rgba(2,193,255,0.85), 0 0 0 4px rgba(2,193,255,0.08);
}
.cs-bp-cta:focus-visible { outline: 2px solid var(--cs-sky); outline-offset: 3px; }
.cs-bp-cta svg { color: var(--cs-lime); }
.cs-bp-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.cs-bp-note .cs-ico { width: 16px; height: 16px; stroke-width: 2.4; color: var(--cs-lime); }

/* =========================================================
   FAQ / CLOSE / LEGAL
   ========================================================= */
.cs-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 5.5vw, 88px);
  align-items: start;
}
@media (min-width: 981px) {
  .cs-faq-head { position: sticky; top: 132px; }
}
.cs-faq-head .cs-body { max-width: 34ch; }
.cs-page .cs-sec--faq .faq-list {
  position: relative;
  counter-reset: faq;
  gap: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)), #0a1527;
  box-shadow: 0 40px 90px -60px rgba(0,0,0,0.9);
  overflow: hidden;
}
.cs-page .cs-sec--faq .faq-list::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,207,255,0.6), transparent);
}
.cs-page .cs-sec--faq .faq-item {
  counter-increment: faq;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0;
  background: transparent;
}
.cs-page .cs-sec--faq .faq-item:first-child { border-top: 0; }
.cs-page .cs-sec--faq .faq-item.open {
  background: radial-gradient(120% 100% at 0 0, rgba(175,221,44,0.07), transparent 60%);
  box-shadow: inset 2px 0 0 var(--cs-lime);
}
.cs-page .cs-sec--faq .faq-question {
  justify-content: flex-start;
  align-items: baseline;
  gap: 16px;
  padding: 22px 24px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  text-wrap: balance;
}
.cs-page .cs-sec--faq .faq-question::before {
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0;
  width: 24px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cs-lime);
  font-variant-numeric: lining-nums tabular-nums;
}
.cs-page .cs-sec--faq .faq-chevron { align-self: center; margin-left: auto; }
.cs-page .cs-sec--faq .faq-question:hover { color: var(--cs-sky); }
.cs-page .cs-sec--faq .faq-question:focus-visible { outline: 2px solid var(--cs-sky); outline-offset: -2px; }
.cs-page .cs-sec--faq .faq-answer-inner { padding: 0 24px 22px 64px; color: var(--gray-200); }

.cs-close {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(80px, 9vw, 136px) 0;
  background: var(--navy-800);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cs-close::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(7,14,29,0), var(--navy-900));
  pointer-events: none;
}
.cs-close-inner { text-align: center; }
.cs-close-title {
  max-width: 30ch;
  margin: 0 auto clamp(32px, 3.6vw, 44px);
  font-family: var(--font-serif);
  font-size: clamp(2.375rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
}
.cs-close-alt { margin-top: 18px; }

/* Important information: a quiet, structured disclosure module. */
.cs-legal {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 3vw, 38px) clamp(24px, 2.8vw, 34px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.01));
}
.cs-legal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-200);
}
.cs-legal-title .cs-ico { width: 18px; height: 18px; color: var(--cs-sky); }
.cs-legal-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px clamp(24px, 3.4vw, 48px); }
.cs-legal-item--main { grid-row: span 2; }
.cs-legal-k { margin-bottom: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b7c4de; }
.cs-legal-item p:not(.cs-legal-k) { font-size: 0.8438rem; line-height: 1.72; color: var(--text-muted); text-wrap: pretty; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1240px) {
  .cs-method { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@media (max-width: 1199px) {
  /* The program name takes two deliberate lines below this width. */
  .cs-plan-name { white-space: normal; }
  .cs-plan-name-a, .cs-plan-name-b { display: block; }
}

@media (max-width: 1180px) {
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .cs-portrait { width: 100%; }
  .cs-snap { margin: 52% 0 0 -4%; width: min(310px, 72%); }
  .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-step:nth-child(2)::after { display: none; }
  .cs-compare { grid-template-columns: minmax(198px, 0.58fr) minmax(0, 1fr) minmax(0, 1.12fr); }
  .cs-compare-col { gap: 10px; padding: 20px 18px 18px; }
  .cs-compare-col b { font-size: 0.75rem; letter-spacing: 0.1em; }
  .cs-compare-area { gap: 12px; font-size: 1.3125rem; }
  .cs-compare-mark { width: 36px; height: 36px; border-radius: 10px; }
  .cs-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-dl-item--feature { grid-column: 1 / -1; }
  .cs-dl-item--wide { grid-template-columns: auto minmax(0, 1fr); }
  .cs-dl-chips { grid-column: 1 / -1; justify-content: start; grid-template-columns: repeat(6, max-content); }
  .cs-dl-item--wide .cs-dl-icon { align-self: start; }
  /* Plan: changes and moves side by side; Steven's note becomes a full row. */
  .cs-ap-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .cs-ap-note {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 24px;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .cs-ap-note .cs-ap-h { grid-column: 1 / -1; }
  .cs-ap-by { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; max-width: 150px; }
}

@media (max-width: 1080px) {
  /* Method: the question panel moves under the spine. */
  .cs-method { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cs-method-side { position: static; }
  .cs-move p { max-width: none; }
}

@media (max-width: 980px) {
  /* Hero: headline, then the photograph and snapshot, then the
     proposition and actions. .cs-hero-copy dissolves into the grid so
     its children can be ordered around the visual. */
  .cs-hero { padding-top: 104px; }
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 0; }
  .cs-hero-copy { display: contents; }
  /* A named area that no longer exists would create implicit tracks. */
  .cs-hero-grid > *, .cs-hero-copy > * { grid-area: auto; grid-column: 1; }
  .cs-hero-eyebrow { order: 1; }
  .cs-hero-grid .cs-h1 { order: 2; }
  .cs-hero-visual { order: 3; width: 100%; max-width: 560px; margin: clamp(26px, 5vw, 38px) 0 0; }
  .cs-lede {
    order: 4;
    position: relative;
    margin-top: clamp(30px, 5vw, 40px);
    padding: 20px 18px 6px 22px;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg, rgba(56,207,255,0.075) 0%, rgba(56,207,255,0) 80%);
  }
  .cs-lede::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--cs-sky), var(--cs-lime));
  }
  .cs-lede-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cs-lime);
  }
  .cs-lede-kicker::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-lime);
    box-shadow: 0 0 10px var(--cs-lime);
  }
  .cs-lede-lead {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-serif);
    font-size: clamp(1.375rem, 4.6vw, 1.625rem);
    font-weight: 500;
    line-height: 1.24;
    color: var(--white);
    text-wrap: pretty;
  }
  .cs-hero-actions { order: 5; }
  /* The photo runs tall beside the snapshot; the snapshot starts at 44%
     of the block's width, which is always below Steven's chin (~37% of
     the photo's height at this ratio). */
  .cs-portrait { width: 70%; aspect-ratio: 1 / 1.3; }
  .cs-portrait img { object-position: 52% 0%; }
  .cs-snap { margin: 44% 0 0 0; width: min(72%, 330px); }
  .cs-hero-visual::before { inset: 4% -6% 20% 24%; }

  /* Where you're headed: the message, then the specialization, then
     the scenarios. */
  .cs-fit { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cs-fit-lead { position: static; }
  .cs-fit-lead .cs-body { max-width: 62ch; }

  .cs-learn,
  .cs-faq,
  .cs-plan-body { grid-template-columns: minmax(0, 1fr); }
  .cs-learn { gap: 32px; }
  .cs-learn-copy .cs-body, .cs-learn-chip { max-width: 62ch; }
  .cs-plan-pricing { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; }
  .cs-plan-equation { justify-content: center; }
  .cs-plan-scope { margin-inline: auto; }
  .cs-meet { grid-template-columns: minmax(0, 1fr); }

  /* Blueprint: stage above the copy. */
  .cs-bp { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: center; }
  .cs-bp-stage { min-height: 380px; }
  .cs-bp-eyebrow { display: flex; justify-content: center; }
  .cs-bp-title + .cs-body { margin-inline: auto; }
  .cs-bp-note { justify-content: center; }

  /* Thesis: labels above their lines, rail on the left edge. */
  .cs-beats { padding-left: 30px; }
  .cs-beats::before { left: 5px; top: 0.35em; bottom: 1.2em; }
  .cs-beat { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .cs-beat-k { text-align: left; }
  .cs-beat-k::after { right: auto; left: -25px; transform: translate(-50%, -50%); }
  .cs-beat--2 .cs-beat-t, .cs-beat--3 .cs-beat-t { padding-left: 0; }
  .cs-thesis figcaption { padding-left: 30px; }
  .cs-thesis-watermark { right: -18%; width: min(420px, 70vw); opacity: 0.06; }

  /* Comparison: one card per row, the common approach above ours. */
  .cs-compare { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cs-compare-head, .cs-compare-glow { display: none; }
  .cs-compare > .cs-compare-row:nth-child(n) { grid-row: auto; }
  .cs-compare-row {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(var(--acc-rgb), 0.42);
    background: #0a1527;
    box-shadow: 0 26px 54px -34px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .cs-compare-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: 2;
    width: 3px;
    background: linear-gradient(180deg, var(--acc), rgba(var(--acc-rgb), 0.15));
  }
  .cs-compare-row + .cs-compare-row { margin-top: 4px; }
  .cs-compare-row > span { border-top: 0; }
  .cs-compare-area { padding: 20px 20px 16px 22px !important; font-size: 1.6875rem; color: var(--white); border-bottom: 1px solid rgba(var(--acc-rgb), 0.28); background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.15), transparent 72%); }
  .cs-compare-mark { width: 44px; height: 44px; border-radius: 12px; }
  .cs-compare-mark .cs-ico { width: 22px; height: 22px; }
  .cs-compare-from { padding: 16px 20px 18px !important; }
  .cs-compare-to {
    padding: 18px 20px 20px !important;
    border-top: 1px solid rgba(175,221,44,0.3) !important;
    background: radial-gradient(90% 120% at 0% 0%, rgba(87,171,40,0.22) 0%, transparent 70%), #0b1629;
  }
  .cs-compare-from::before, .cs-compare-to::before { display: none; }
  .cs-compare-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-bottom: 9px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .cs-compare-tag::before { content: ''; flex-shrink: 0; }
  .cs-compare-from .cs-compare-tag {
    color: #c2cde3;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.05);
  }
  .cs-compare-from .cs-compare-tag::before {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: linear-gradient(rgba(194,205,227,0.9), rgba(194,205,227,0.9)) center / 6px 1.5px no-repeat;
  }
  .cs-compare-to .cs-compare-tag {
    color: var(--cs-lime);
    border: 1px solid rgba(175,221,44,0.5);
    background: rgba(175,221,44,0.1);
  }
  .cs-compare-to .cs-compare-tag::before {
    width: 17px;
    height: 15px;
    background: url("../img/credit-strategy/tf-shield-96.png") center / contain no-repeat;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .cs-faq-head { text-align: center; }
  .cs-faq-head .cs-eyebrow { margin-inline: auto; }
  .cs-faq-head .cs-eyebrow::after { display: block; }
  .cs-faq-head .cs-h2 .cs-line { display: inline; }
  .cs-faq-head .cs-h2 .cs-line + .cs-line::before { content: ' '; }
  .cs-faq-head .cs-body { max-width: 56ch; margin-inline: auto; }
  /* Tablet hero: the visual uses the full measure, photo to the right edge. */
  .cs-hero-visual { max-width: none; }
  .cs-portrait { width: 62%; aspect-ratio: 1 / 1.15; }
  /* Education headline: the first sentence runs as one line again. */
  .cs-learn-copy .cs-h2 .cs-line:nth-child(-n+2) { display: inline; }
  .cs-learn-copy .cs-h2 .cs-line:first-child::after { content: ' '; }
  .cs-learn-copy .cs-h2 .cs-line:nth-child(3) { display: block; }
  .cs-dl-chips { grid-template-columns: repeat(3, max-content); }
  /* Tablet comparison: each card puts the two answers side by side. */
  .cs-compare-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .cs-compare-area { grid-column: 1 / -1; }
  .cs-compare-to { border-top: 0 !important; border-left: 1px solid rgba(175,221,44,0.3); }
}

@media (max-width: 860px) {
  /* Tablet: two columns get too tight for the conversation cards. */
  .cs-voices { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs-voice:nth-child(even) { margin-top: 0; margin-left: 56px; }
  .cs-voice:nth-child(odd) { margin-right: 56px; }
  .cs-ap-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-ap-block + .cs-ap-block { border-left: 0; border-top: 1px solid rgba(255,255,255,0.07); }
  .cs-learn-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .cs-sec { padding: clamp(60px, 14vw, 80px) 0; }
  .cs-voice:nth-child(even) { margin-left: 18px; }
  .cs-voice:nth-child(odd) { margin-right: 18px; }
  /* Phones: tighter glows on the two feature cards; the very large soft
     shadows rendered with a visible edge in the gutters. */
  .cs-home { box-shadow: 0 26px 52px -30px rgba(87,171,40,0.5), inset 0 1px 0 rgba(255,255,255,0.07); }
  .cs-meet { box-shadow: 0 26px 52px -30px rgba(87,171,40,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
  .cs-dl-item--feature, .cs-ap, .cs-learn-panel, .cs-plan { box-shadow: 0 26px 52px -32px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.07); }
  /* Action plan: the status pill moves under its move, so titles get the width. */
  .cs-ap-moves li { grid-template-columns: auto minmax(0, 1fr); }
  .cs-mv-state { grid-column: 2; justify-self: start; margin-top: 6px; }
  /* Secondary link wraps as text, with its arrow following the words. */
  .cs-plan-talk { display: inline; }
  .cs-plan-talk .cs-ico { display: inline-block; vertical-align: -3px; margin-left: 4px; }

  /* Centred section intros; explanatory copy stays left-aligned. */
  .cs-intro,
  .cs-fit-lead,
  .cs-learn-copy,
  .cs-faq-head { text-align: center; }
  .cs-page .cs-sec--faq .faq-question { padding: 19px 18px; font-size: 1.125rem; gap: 12px; }
  .cs-page .cs-sec--faq .faq-answer-inner { padding: 0 18px 20px 54px; }
  .cs-intro .cs-eyebrow,
  .cs-fit-lead .cs-eyebrow,
  .cs-learn-copy .cs-eyebrow,
  .cs-faq-head .cs-eyebrow { margin-inline: auto; }
  .cs-intro .cs-eyebrow::after,
  .cs-fit-lead .cs-eyebrow::after,
  .cs-learn-copy .cs-eyebrow::after,
  .cs-faq-head .cs-eyebrow::after { display: block; }
  .cs-intro .cs-body,
  .cs-fit-lead .cs-body,
  .cs-learn-copy .cs-body,
  .cs-faq-head .cs-body,
  .cs-diff-head .cs-body { text-align: left; margin-inline: 0; max-width: none; }
  .cs-learn-chip { margin-inline: auto; text-align: left; }
  .cs-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--cs-cyan); margin-bottom: 18px; }
  .cs-eyebrow--accent { color: var(--cs-lime); }
  .cs-h1 { font-size: clamp(2.5rem, 10.6vw, 3.125rem); line-height: 1.03; }
  .cs-h2 { font-size: clamp(2rem, 8.2vw, 2.4375rem); }
  .cs-h2--xl { font-size: clamp(2.125rem, 8.8vw, 2.625rem); }
  .cs-h2 + .cs-body { margin-top: 18px; }
  .cs-intro { margin-bottom: 36px; }

  /* ---- Phone hero: one composition ----
     eyebrow -> the statement -> why it matters -> a drawn line that
     carries the goal into the strategy snapshot -> the next step. */
  .cs-hero { padding-top: 90px; padding-bottom: 60px; }
  .cs-hero-eyebrow { margin-inline: auto; letter-spacing: 0.22em; color: var(--cs-cyan); }
  .cs-hero-eyebrow::before, .cs-hero-eyebrow::after { display: block; width: 34px; }
  .cs-hero-eyebrow::before { background: linear-gradient(90deg, transparent, var(--cs-cyan)); }
  .cs-hero-eyebrow::after { background: linear-gradient(90deg, var(--cs-cyan), transparent); }

  /* The statement: a parallel pair. "your score" is set down, "your goal"
     is lit, and a cyan-to-lime rule turns one into the other. */
  .cs-hero-title { position: relative; margin-top: 4px; text-align: center; }
  .cs-hero-title::before {
    content: '';
    position: absolute;
    inset: -12% -12% -10%;
    z-index: -1;
    background:
      radial-gradient(60% 46% at 50% 76%, rgba(175,221,44,0.14) 0%, transparent 72%),
      radial-gradient(72% 50% at 50% 20%, rgba(56,207,255,0.10) 0%, transparent 72%);
    pointer-events: none;
  }
  .cs-hero-title::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 64%;
    aspect-ratio: 180 / 155;
    background: url("../img/credit-strategy/tf-shield-180.png") center / contain no-repeat;
    opacity: 0.05;
    transform: translate(-50%, -48%);
    pointer-events: none;
  }
  .cs-hero-title .cs-hl-seg { display: block; }
  .cs-hero-title .cs-line + .cs-line { margin-top: 0; }
  .cs-hero-title .cs-hl-1,
  .cs-hero-title .cs-hl-2 { font-size: clamp(2.25rem, 10.2vw, 2.75rem); line-height: 1.04; color: var(--white); }
  .cs-hero-title .cs-hl-score { font-style: italic; color: #8ea2c6; }
  .cs-hero-title .cs-hl-2::before {
    content: '';
    display: block;
    width: 76px;
    height: 2px;
    margin: 0.46em auto 0.4em;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(56,207,255,0), var(--cs-sky), var(--cs-lime), rgba(175,221,44,0));
  }
  .cs-hero-title .cs-hl-goal { margin-top: 0.02em; font-size: 1.3em; line-height: 1; }
  .cs-hero-title .cs-hl-goal em {
    padding-bottom: 0.05em;
    text-shadow: 0 0 38px rgba(175,221,44,0.4);
    background: linear-gradient(90deg, transparent, rgba(175,221,44,0.62), transparent) bottom / 100% 2px no-repeat;
  }

  /* Why it matters: short, centred, straight under the statement. */
  .cs-lede { display: none; }
  .cs-hero-sub {
    display: block;
    order: 3;
    max-width: 37ch;
    margin: 24px auto 0;
    font-size: 1.0625rem;
    line-height: 1.64;
    color: var(--gray-200);
    text-align: center;
    text-wrap: pretty;
  }
  .cs-hero-sub-lead { color: var(--white); font-weight: 600; }
  @media (max-width: 420px) { .cs-hero-sub { font-size: 1rem; line-height: 1.62; } }

  /* The visual, led in by the drawn line. */
  .cs-hero-visual { order: 4; max-width: none; margin: 30px 0 0; padding-top: 30px; }
  .cs-bridge { display: block; position: absolute; inset: 0 0 auto 0; z-index: 4; pointer-events: none; }
  .cs-bridge-label {
    position: absolute;
    top: 4px; left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    height: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c9e98a;
  }
  .cs-bridge-label::before,
  .cs-bridge-label::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cs-sky);
    box-shadow: 0 0 8px rgba(56,207,255,0.8);
  }
  .cs-bridge-label::after { background: var(--cs-lime); box-shadow: 0 0 8px rgba(175,221,44,0.8); }
  .cs-bridge-path {
    position: absolute;
    top: 30px;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 52;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(56,207,255,0.45));
  }
  .cs-portrait { margin-top: 8%; }
  .cs-snap { margin: 52% 0 0 0; padding-left: 4.4%; }
  .cs-hero-visual::before { inset: 10% -6% 16% 20%; }
  .cs-hero-actions { order: 5; margin-top: 34px; }
  .cs-hero-alt { text-align: center; }
  .cs-hero-actions .btn-lg { display: block; width: 100%; text-align: center; line-height: 1.35; padding-inline: 20px; text-wrap: balance; }
  .cs-hero-actions .btn-lg svg { display: inline-block; vertical-align: -3px; margin-right: 8px; }
  .cs-snap { padding: 14px 15px 12px; }
  .cs-snap-title { letter-spacing: 0.11em; }
  .cs-snap-path li { padding-bottom: 9px; }

  /* Where you're headed */
  .cs-home { padding: 24px 20px 22px; }
  .cs-home-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cs-home-icon { width: 50px; height: 50px; }
  .cs-home h3 { font-size: clamp(1.625rem, 7vw, 1.9375rem); }
  .cs-home h3 .cs-line { text-wrap: pretty; }
  .cs-scenes li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 18px 20px 20px; }
  .cs-scene-icon { width: 44px; height: 44px; border-radius: 12px; }
  .cs-scenes li::before { top: 22px; height: 40px; }
  .cs-scenes li:hover { background: none; }

  /* Method */
  .cs-moves { --track: 34px; --node: 46px; }
  .cs-move { column-gap: 15px; padding-bottom: 24px; }
  .cs-phase--loop { padding: 42px 16px 12px var(--track); border-radius: 18px; }
  .cs-phase--loop .cs-phase-label { left: 12px; font-size: 0.625rem; letter-spacing: 0.12em; padding: 7px 14px 7px 11px; }
  .cs-phase-n { display: none; }
  .cs-phase--loop .cs-move::after { left: -20px; width: 20px; }
  .cs-phase--loop .cs-move:first-child .cs-move-num::before { left: -8px; }
  .cs-move-num { font-size: 1.125rem; }
  .cs-move h3 { font-size: 1.5rem; }
  .cs-move p { margin-top: 8px; font-size: 0.9375rem; }
  .cs-scan-head { padding: 18px 18px 14px; }
  .cs-scan-title { font-size: 1.375rem; }
  .cs-scan-cols { padding: 9px 18px; }
  .cs-scan-rows li { padding: 13px 18px; gap: 12px; }
  .cs-scan-bureaus, .cs-dots { gap: 6px; }
  .cs-scan-bureaus span, .cs-dots b { width: 20px; }
  .cs-scan-foot { padding: 14px 18px 16px; }

  /* Action plan */
  .cs-ap-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; row-gap: 14px; padding: 20px 18px 18px; }
  .cs-ap-id { display: contents; }
  .cs-ap-mark { grid-column: 1; grid-row: 1; width: 38px; }
  .cs-ap-tag { grid-column: 3; grid-row: 1; justify-self: end; }
  .cs-ap-id > div { grid-column: 1 / -1; grid-row: 2; }
  .cs-ap-kicker { letter-spacing: 0.12em; }
  .cs-ap-title { font-size: clamp(2.125rem, 9.2vw, 2.625rem); }
  .cs-ap-goal { padding: 12px 18px; }
  .cs-ap-stat { padding: 14px 12px 16px; }
  .cs-ap-stat:first-child { padding-left: 18px; }
  .cs-ap-k { font-size: 0.625rem; letter-spacing: 0.1em; }
  .cs-ap-v { font-size: 1.75rem; }
  .cs-ap-v small { flex-basis: 100%; }
  .cs-ap-block { padding: 18px 18px 20px; }
  .cs-ap-h { font-size: 0.875rem; }
  /* Phones: the note stacks; portrait and name sit side by side above it. */
  .cs-ap-note { display: block; }
  .cs-ap-by { flex-direction: row; align-items: center; gap: 14px; max-width: none; margin-bottom: 14px; }
  .cs-ap-kicker > span { display: block; }
  .cs-ap-kicker-sep { display: none !important; }
  .cs-ap-kicker > span + .cs-nowrap { margin-top: 3px; color: #c9e98a; }
  .cs-ap-foot { padding: 14px 18px 16px; }

  /* Everything in the program: the four standard deliverables become
     one ruled list between the two feature modules. */
  .cs-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cs-dl-item--feature { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 28px 20px 26px; margin-bottom: 14px; }
  .cs-dl-portrait { width: 100px; height: 100px; }
  .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 15px;
    padding: 20px 4px;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    background: none;
  }
  .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide)::before { display: none; }
  .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) .cs-dl-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) p { margin-top: 5px; }
  .cs-dl-item--wide { grid-template-columns: 44px minmax(0, 1fr); column-gap: 15px; margin-top: 14px; padding: 22px 18px 20px; }
  .cs-dl-item--wide .cs-dl-icon { width: 44px; height: 44px; }
  .cs-dl-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .cs-dl-chips li { padding: 6px 10px 6px 9px; font-size: 0.75rem; }

  /* Next steps: vertical sequence, the session card below */
  .cs-next-title { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .cs-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cs-step { padding: 20px 18px; grid-template-columns: auto 1fr; }
  .cs-step::before { left: 18px; }
  .cs-step-icon { grid-column: 1; grid-row: 2 / span 2; margin: 14px 14px 0 0; width: 44px; height: 44px; }
  .cs-step h3 { grid-column: 2; margin-top: 14px; font-size: 1.1875rem; }
  .cs-step p { grid-column: 2; margin-top: 5px; }
  .cs-step .cs-step-key { grid-column: 1 / -1; }
  .cs-step:not(:last-child)::after,
  .cs-step:nth-child(2)::after {
    display: block;
    top: auto;
    right: auto;
    left: 50%;
    bottom: -17px;
    transform: translateX(-50%) rotate(135deg);
  }
  .cs-meet { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; border-radius: 18px; }
  .cs-meet-intro { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .cs-meet-portrait { margin-bottom: 16px; width: 104px; height: 104px; }
  .cs-meet-lede { text-align: left; }
  .cs-meet-list { grid-template-columns: minmax(0, 1fr); }
  .cs-next-action .btn-lg,
  .cs-close .btn-lg { display: block; width: 100%; text-align: center; line-height: 1.35; padding-inline: 20px; text-wrap: balance; }
  .cs-next-action .btn-lg svg,
  .cs-close .btn-lg svg { display: inline-block; vertical-align: -3px; margin-right: 8px; }

  /* Learn */
  .cs-learn-panel { padding: 26px 20px 8px; }
  .cs-learn-title { text-align: center; }

  /* Difference */
  .cs-diff-head { margin-bottom: 40px; }
  .cs-diff-a { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .cs-diff-b { font-size: clamp(2.25rem, 9.8vw, 2.75rem); }

  /* Thesis */
  .cs-thesis-band { padding: 80px 0 84px; }
  .cs-sig-rule { display: none; }
  .cs-sig-text { font-size: 0.875rem; letter-spacing: 0.18em; }
  .cs-sig-shield { width: 38px; }
  .cs-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-legal-item--main { grid-row: auto; }
  .cs-meet-step { justify-content: center; }
  .cs-beat + .cs-beat { margin-top: 26px; }
  .cs-beat--1 .cs-beat-t { font-size: clamp(1.5rem, 6.4vw, 1.875rem); }
  .cs-beat--2 .cs-beat-t { font-size: clamp(1.75rem, 7.6vw, 2.25rem); }
  .cs-beat--3 .cs-beat-t { font-size: clamp(2.125rem, 9.4vw, 2.75rem); }

  /* Voices */
  .cs-voice blockquote { padding: 26px 22px 22px; }
  .cs-voice blockquote p { font-size: 1.375rem; padding-left: 26px; }
  .cs-voice figcaption { padding: 22px 20px 24px; column-gap: 13px; }
  .cs-voice-text { font-size: 0.9688rem; }
  .cs-voice-link { margin-left: 20px; }
  .cs-voice:hover { transform: none; }

  /* Investment */
  .cs-plan { border-radius: 18px; }
  .cs-plan-head { flex-direction: column; align-items: stretch; text-align: center; padding: 28px 14px 20px; gap: 18px; }
  /* Two deliberate lines, as large as the card allows, never a third. */
  .cs-plan-name { font-size: clamp(1.75rem, 8vw, 2.375rem); }
  .cs-plan-name-a, .cs-plan-name-b { white-space: nowrap; }
  .cs-plan-name::after { left: 50%; transform: translateX(-50%); }
  .cs-plan-choose { align-items: stretch; }
  .cs-plan-cue { justify-content: center; padding-right: 0; }
  .cs-plan-switch { display: grid; width: 100%; }
  .cs-plan-switch label { padding: 12px 10px; }
  .cs-plan-pricing { padding: 28px 20px; text-align: center; }
  .cs-plan-equation { justify-content: center; gap: 12px 16px; }
  .cs-plan-num { font-size: clamp(3.25rem, 15vw, 4rem); }
  .cs-plan-plus { width: 40px; height: 40px; font-size: 1.5rem; }
  .cs-plan-scope { margin-inline: auto; }
  .cs-plan-cta { display: block; width: 100%; text-align: center; line-height: 1.35; }
  .cs-plan-cta .cs-ico { display: inline-block; vertical-align: -2px; margin-right: 6px; }
  .cs-plan-includes { padding: 24px 20px; }
  .cs-plan-foot { display: block; padding: 20px 18px; }
  .cs-plan-foot-q { margin-bottom: 6px; }
  .cs-plan-foot-note { margin-top: 8px; }

  /* Blueprint */
  .cs-sec--blueprint { padding: 64px 0 72px; }
  .cs-bp-stage { min-height: 320px; }
  .cs-bp-book { width: min(210px, 58%); }
  .cs-bp-title { font-size: clamp(2.375rem, 10vw, 2.875rem); }
  .cs-bp .cs-body { text-align: left; }
  .cs-bp-cta { display: block; width: 100%; text-align: center; line-height: 1.35; }
  .cs-bp-cta svg { display: inline-block; vertical-align: -3px; margin-left: 8px; }

  .cs-close-title { font-size: clamp(2.125rem, 9vw, 2.625rem); }
}

@media (max-width: 400px) {
  .cs-h2 { font-size: 1.9375rem; }
  .cs-h2--xl { font-size: 2.0625rem; }
  .cs-h1 { font-size: 2.375rem; }
  /* Narrow phones: keep the small caps labels on one line each. */
  .cs-eyebrow { letter-spacing: 0.14em; gap: 8px; }
  .cs-eyebrow::before, .cs-eyebrow::after { width: 18px; }
  .cs-home-flag { font-size: 0.5625rem; letter-spacing: 0.1em; padding: 6px 11px 6px 9px; }
  .cs-portrait { width: 72%; }
  .cs-snap { width: 80%; margin-top: 52%; padding: 12px 13px 11px 4.4%; }
  .cs-bridge-label { letter-spacing: 0.18em; }
  .cs-snap-title { letter-spacing: 0.1em; }
  .cs-snap-v { font-size: 0.75rem; }
  .cs-snap-foot { font-size: 0.625rem; }
  .cs-voice:nth-child(even), .cs-voice:nth-child(odd) { margin-inline: 0; }
  .cs-voice blockquote p { font-size: 1.3125rem; }
  .cs-phase--loop .cs-phase-label { letter-spacing: 0.08em; padding-right: 12px; }
  .cs-move h3 { font-size: 1.375rem; }
  .cs-scan-title { font-size: 1.25rem; }
  .cs-sig-text { font-size: 0.8125rem; letter-spacing: 0.14em; }
  .cs-lede { font-size: 1rem; }
  .cs-page .cs-sec--faq .faq-answer-inner { padding-left: 18px; }
  .cs-scan-q b { font-size: 0.875rem; }
  .cs-ap-stat { padding-inline: 10px; }
  .cs-ap-stat:first-child { padding-left: 14px; }
  .cs-ap-v { font-size: 1.5rem; }
  .cs-plan-equation { flex-direction: column; gap: 12px; }
  .cs-plan-fee { align-items: center; }
  .cs-plan-num { font-size: 3.5rem; }
  .cs-plan-cue { letter-spacing: 0.14em; }
  .cs-bp-cta { font-size: 0.6875rem; letter-spacing: 0.05em; padding-inline: 14px; }
  .cs-bp-cta svg { width: 16px; height: 16px; margin-left: 6px; }
  .cs-diff-a { font-size: 1.9375rem; }
  .cs-diff-b { font-size: 2.125rem; }
  .cs-beat--3 .cs-beat-t { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-page .reveal { opacity: 1; transform: none; }
  .cs-plan-option { animation: none; }
  .cs-plan.revealed #cs-plan-individual:checked ~ .cs-plan-head label[for="cs-plan-individual"],
  .cs-plan.revealed #cs-plan-couples:checked ~ .cs-plan-head label[for="cs-plan-couples"],
  .cs-plan.revealed .cs-plan-cta,
  .cs-bp-book { animation: none; }
  .cs-voice:hover { transform: none; }
  .cs-bp-cta:hover { transform: none; }
  .cs-hero-alt a:hover .cs-ico,
  .cs-plan-talk:hover .cs-ico { transform: none; }
}

/* ============================================================
   TAX PREPARATION — editorial page system
   Namespace: .tp-*  (only tax-preparation.html carries body.tp-page)
   Same TaxFunders universe as the other flagship pages (navy, serif +
   sans, restrained light) with its own art direction: the tax file.
   Paper with real edges, dossier folders, an open binder, a portal at the
   centre of the process and a roster for the team. Every section owns a
   composition, an intro motif and a colour personality; green and lime
   mean "done", never decoration.
   Isolated on purpose: nothing here reaches Credit Strategy or
   Financial Reset.
   ============================================================ */

.tp-page {
  --tp-cyan: #02c1ff;
  --tp-sky: #38cfff;
  --tp-royal: #0a2dc2;
  --tp-royal-lt: #5d8bff;
  --tp-green: #57ab28;
  --tp-lime: #afdd2c;
  --tp-ok: #7fd14a;
  --tp-teal: #44b59c;
  --tp-indigo: #293382;
  --tp-ink: #070e1d;
  --tp-paper: #eef3fa;
  --tp-paper-2: #dce5f1;
  --tp-paper-ink: #0e1d38;
  --tp-paper-muted: #4c5e7c;
  --tp-gutter: clamp(20px, 5vw, 56px);
  background: var(--navy-900);
}
.tp-page [data-tone="cyan"]  { --tn: var(--tp-sky);      --tn-rgb: 56, 207, 255;  --tn-deep: #0a86dd; --tn-text: #7fe0ff; --tn-ink: #055a96; }
.tp-page [data-tone="royal"] { --tn: var(--tp-royal-lt); --tn-rgb: 93, 139, 255;  --tn-deep: #4a78f5; --tn-text: #a8bfff; --tn-ink: #1d3fbf; }
.tp-page [data-tone="teal"]  { --tn: var(--tp-teal);     --tn-rgb: 68, 181, 156;  --tn-deep: #2c9784; --tn-text: #7ad8c1; --tn-ink: #17665c; }
.tp-page [data-tone="green"] { --tn: var(--tp-ok);       --tn-rgb: 127, 209, 74;  --tn-deep: #57ab28; --tn-text: #a3e374; --tn-ink: #2f6e14; }
.tp-page [data-tone="lime"]  { --tn: var(--tp-lime);     --tn-rgb: 175, 221, 44;  --tn-deep: #8cbf1e; --tn-text: #cdef6a; --tn-ink: #3f6608; }
.tp-page [data-tone="slate"] { --tn: #9fb3d9;            --tn-rgb: 159, 179, 217; --tn-deep: #7d92bd; --tn-text: #c4d1ea; --tn-ink: #3e5076; }

.tp-page main { font-variant-numeric: lining-nums; }
.tp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tp-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tp-nowrap { white-space: nowrap; }
.tp-line { display: block; }
/* Art-directed line breaks: .tp-bm on phones only, .tp-bd everywhere else. */
.tp-bm { display: none; }
@media (max-width: 760px) { .tp-bd { display: none; } }

.tp-page .reveal {
  transform: translateY(14px);
  filter: none;
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: var(--ease-out);
}
.tp-page .reveal.revealed { opacity: 1; transform: none; }

/* ---- Shell & rhythm ---- */
.tp-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--tp-gutter);
}
.tp-sec {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(92px, 9.5vw, 144px) 0;
}
.tp-sec[id], .tp-close[id] { scroll-margin-top: 20px; }
.tp-atmos { position: absolute; inset: 0; pointer-events: none; }

/* ---- Display type ---- */
.tp-h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3.1vw, 3.125rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
}
.tp-h2--xl { font-size: clamp(2.5rem, 3.9vw, 3.875rem); line-height: 1.04; }
.tp-h2--xxl { font-size: clamp(2.75rem, 4.7vw, 4.625rem); line-height: 1.02; letter-spacing: -0.015em; }
.tp-h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--tp-sky);
}
.tp-body {
  font-size: clamp(1.0625rem, 0.45vw + 0.92rem, 1.1875rem);
  line-height: 1.68;
  color: var(--gray-200);
  text-wrap: pretty;
  max-width: 62ch;
}
.tp-h2 + .tp-body { margin-top: 24px; }
.tp-intro { margin-bottom: clamp(52px, 5.4vw, 76px); }
.tp-intro--center { max-width: 1000px; margin-inline: auto; text-align: center; }
.tp-intro--center .tp-body { margin-inline: auto; }

/* ---- Section intro motifs: each section enters with its own mark ---- */
/* Folder tab (Who we prepare for) */
.tp-foldertab {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0 26px;
  padding: 9px 18px 8px;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 70%), var(--tn);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tp-ink);
}
.tp-foldertab::after {
  content: '';
  position: absolute;
  left: -40px;
  right: -40px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tn) 22%, var(--tn) 78%, transparent);
}
/* Portal status */
.tp-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d6e3ff;
}
.tp-status-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tp-ok);
  box-shadow: 0 0 0 4px rgba(127,209,74,0.18), 0 0 12px rgba(127,209,74,0.9);
}
/* Serif kicker (Why) */
.tp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  color: var(--tp-teal);
}
.tp-kicker::before, .tp-kicker::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.tp-kicker::after { background: linear-gradient(90deg, currentColor, transparent); }
/* Team marker */
/* Signature line (Review) */
/* Binder ring tab (Gather) */
/* Binder spine mark (Gather): two punched rings on a rule. */
/* Ink stamp (Self-employed) */
.tp-inkstamp {
  display: inline-block;
  margin: 0 0 26px;
  padding: 7px 14px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(68,181,156,0.9), inset 0 0 0 4px rgba(4,18,15,1), inset 0 0 0 5px rgba(68,181,156,0.55);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8fe0cb;
  transform: rotate(-3deg);
}
/* Ticket stub (Next step) */
/* Margin note: an aside in the editorial margin, set like a hand note. */
.tp-marginnote {
  position: relative;
  max-width: 700px;
  margin: clamp(40px, 4vw, 56px) auto 0;
  padding: 0 0 0 26px;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-style: italic;
  line-height: 1.5;
  color: #cfe0f6;
  text-wrap: pretty;
}
.tp-marginnote::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--tp-sky), rgba(56,207,255,0.05));
}
.tp-marginnote-k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-sky);
}
/* Answer count (FAQ) */
.tp-count { margin: 0 0 18px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #a9bddf; }
.tp-count b { margin-right: 6px; font-family: var(--font-serif); font-size: 2rem; font-weight: 500; letter-spacing: 0; vertical-align: -0.12em; color: var(--tp-sky); }

/* ---- Buttons and links: one TaxFunders CTA DNA ----
   A lit royal plate with a gradient edge and a lime "key" that carries the
   action icon. Primary, block and light variants share the anatomy
   (label + key) but not the finish, so the page never repeats one button. */
.tp-page .tp-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 8px 8px 8px 26px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--white);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(122,224,255,0.34), transparent 56%) padding-box,
    linear-gradient(118deg, #0c63d4 0%, #0a3fcf 50%, #0a2dc2 100%) padding-box,
    linear-gradient(118deg, rgba(140,230,255,0.95), rgba(93,139,255,0.45) 46%, rgba(175,221,44,0.9)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -18px 30px rgba(3,10,34,0.34),
    0 2px 6px rgba(0,0,0,0.3),
    0 20px 44px -20px rgba(2,193,255,0.9);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
/* One slow sheen crosses the plate on hover. */
.tp-page .tp-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,0.2) 44%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-out);
}
.tp-cta-t { position: relative; }
.tp-cta-t > span { display: inline; }
.tp-cta-key {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: #0c1f06;
  background: linear-gradient(150deg, #e2fb86 0%, #bfe83f 46%, #95c81d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -6px 10px rgba(63,102,8,0.28), 0 8px 18px -8px rgba(175,221,44,0.95);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.tp-cta-key .tp-ico { width: 19px; height: 19px; stroke-width: 2.3; transition: transform 0.35s var(--ease-out); }
.tp-page .tp-cta:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -18px 30px rgba(3,10,34,0.3),
    0 2px 6px rgba(0,0,0,0.3),
    0 28px 54px -20px rgba(2,193,255,1);
}
.tp-page .tp-cta:hover::before { transform: translateX(130%); }
.tp-page .tp-cta:hover .tp-cta-key .tp-ico { transform: translateX(3px); }
/* Touch and click: the plate presses in and the key dims its glow. */
.tp-page .tp-cta:active { transform: translateY(0) scale(0.985); transition-duration: 0.12s; }
.tp-page .tp-cta:active .tp-cta-key { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -4px 8px rgba(63,102,8,0.3), 0 3px 8px -4px rgba(175,221,44,0.8); }
.tp-page .tp-cta:focus-visible { outline: 2px solid #9be8ff; outline-offset: 4px; }
/* Size and layout variants */
.tp-page .tp-cta--xl { min-height: 68px; padding-left: 30px; gap: 22px; border-radius: 18px; }
.tp-page .tp-cta--xl .tp-cta-key { width: 52px; height: 52px; border-radius: 13px; }
.tp-page .tp-cta--block { display: flex; width: 100%; }
/* Light: the helpful, conversational variant (What to gather). */
.tp-page .tp-cta--light {
  color: var(--tp-paper-ink);
  background:
    linear-gradient(180deg, #ffffff 0%, #eaf1fb 100%) padding-box,
    linear-gradient(118deg, rgba(56,207,255,0.9), rgba(93,139,255,0.35) 50%, rgba(175,221,44,0.9)) border-box;
  box-shadow: inset 0 -10px 18px rgba(14,29,56,0.06), 0 2px 6px rgba(0,0,0,0.25), 0 22px 44px -22px rgba(56,207,255,0.8);
}
.tp-page .tp-cta--light::before { background: linear-gradient(112deg, transparent 24%, rgba(56,207,255,0.16) 44%, transparent 62%); }
.tp-page .tp-cta--light:hover { color: var(--tp-paper-ink); box-shadow: inset 0 -10px 18px rgba(14,29,56,0.06), 0 2px 6px rgba(0,0,0,0.25), 0 30px 54px -22px rgba(56,207,255,1); }
.tp-page .tp-cta--light .tp-cta-key { color: #fff; background: linear-gradient(150deg, #3f8cff, #0a2dc2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px -8px rgba(10,45,194,0.9); }

/* Secondary action: a quiet glass control with its own key ring. */
.tp-page .tp-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 8px 8px 8px 24px;
  border-radius: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #dbe8ff;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(139,177,255,0.1), rgba(139,177,255,0.03));
  box-shadow: inset 0 0 0 1.5px rgba(139,177,255,0.36), inset 0 1px 0 rgba(255,255,255,0.08);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.tp-ghost-key {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--tp-sky);
  box-shadow: inset 0 0 0 1.5px rgba(56,207,255,0.45);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.tp-ghost-key .tp-ico { width: 17px; height: 17px; stroke-width: 2.2; transition: transform 0.3s var(--ease-out); }
.tp-page .tp-ghost:hover {
  color: var(--white);
  background: linear-gradient(180deg, rgba(56,207,255,0.16), rgba(56,207,255,0.05));
  box-shadow: inset 0 0 0 1.5px rgba(56,207,255,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.tp-page .tp-ghost:hover .tp-ghost-key { background: var(--tp-sky); color: var(--tp-ink); box-shadow: none; }
.tp-page .tp-ghost:hover .tp-ghost-key .tp-ico { transform: translateY(2px); }
.tp-page .tp-ghost--fwd:hover .tp-ghost-key .tp-ico { transform: translateX(3px); }
.tp-page .tp-ghost:active { transform: translateY(0) scale(0.985); transition-duration: 0.12s; }
.tp-page .tp-ghost:focus-visible { outline: 2px solid #9be8ff; outline-offset: 4px; }
/* A compact ghost for asides. */
.tp-page .tp-ghost--sm { min-height: 52px; padding: 6px 6px 6px 20px; border-radius: 14px; }
.tp-page .tp-ghost--sm .tp-ghost-key { width: 38px; height: 38px; border-radius: 10px; }

/* A micro call to action that plainly reads as a link: text, underline, arrow disc. */
.tp-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tn-text);
  text-decoration: underline;
  text-decoration-color: rgba(var(--tn-rgb), 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.25s var(--ease-out);
}
.tp-go-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--tn), var(--tn-deep));
  color: var(--tp-ink);
  box-shadow: 0 8px 18px -8px rgba(var(--tn-rgb), 0.9);
  transition: transform 0.3s var(--ease-out);
}
.tp-go-arrow .tp-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.tp-go:hover { color: var(--white); text-decoration-color: var(--tn); }
.tp-go:hover .tp-go-arrow { transform: translateX(4px); }
.tp-go:focus-visible { outline: 2px solid var(--tn); outline-offset: 4px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .tp-page .tp-cta, .tp-page .tp-ghost, .tp-cta-key .tp-ico, .tp-ghost-key .tp-ico { transition: none; }
  .tp-page .tp-cta::before { display: none; }
  .tp-page .tp-cta:hover, .tp-page .tp-ghost:hover { transform: none; }
}

/* ---- CTA motion & depth (pass 7) ----
   The plate gains thickness (a lit lower edge it presses into), a slow
   light sweep that crosses it every few seconds, and a key that breathes.
   Secondary controls get the same thickness and a lit rim on hover, but no
   idle motion, so the primary action is always the one that moves. */
.tp-page .tp-cta {
  --tp-edge: #04164d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -18px 30px rgba(3,10,34,0.34),
    0 4px 0 -1px var(--tp-edge),
    0 5px 0 -1px rgba(56,207,255,0.35),
    0 10px 16px -6px rgba(0,0,0,0.55),
    0 24px 48px -20px rgba(2,193,255,0.95);
}
/* The idle sweep: a narrow band of light, once every six seconds. */
.tp-page .tp-cta::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 54%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0.42) 27%, rgba(255,255,255,0) 42%, rgba(255,255,255,0.18) 56%, rgba(255,255,255,0) 72%, transparent 100%);
  transform: translateX(-160%) skewX(-16deg);
  animation: tpSweep 4.6s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}
/* Each kind of button keeps its own rhythm, so no two pulse together. */
.tp-page .tp-cta--xl::after { animation-duration: 4.2s; animation-delay: 0.6s; }
.tp-page .tp-cta--light::after { animation-duration: 5.6s; animation-delay: 2s; }
.tp-page .tp-cta--sm::after { animation-duration: 6.2s; animation-delay: 3s; }
.tp-page .tp-cta--block::after { animation-duration: 5.2s; animation-delay: 1.6s; }
.tp-page .tp-cta--light::after { background: linear-gradient(100deg, transparent 0%, rgba(56,207,255,0) 10%, rgba(56,207,255,0.28) 27%, rgba(56,207,255,0) 42%, rgba(56,207,255,0.13) 56%, rgba(56,207,255,0) 72%, transparent 100%); }
.tp-page .tp-cta > * { position: relative; z-index: 1; }
@keyframes tpSweep {
  0%, 62% { transform: translateX(-160%) skewX(-16deg); }
  86%, 100% { transform: translateX(300%) skewX(-16deg); }
}
/* The key breathes: a slow glow, never a bounce. */
.tp-page .tp-cta .tp-cta-key { animation: tpKey 3.6s ease-in-out infinite; }
.tp-page .tp-cta .tp-cta-key::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(175,221,44,0.75);
  opacity: 0;
  pointer-events: none;
  animation: tpKeyRing 4.6s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s infinite;
}
.tp-page .tp-cta--xl .tp-cta-key::after { animation-duration: 4.2s; animation-delay: 0.6s; }
.tp-page .tp-cta--light .tp-cta-key::after { border-color: rgba(96,180,255,0.75); animation-duration: 5.6s; animation-delay: 2s; }
.tp-page .tp-cta--sm .tp-cta-key::after { animation-duration: 6.2s; animation-delay: 3s; }
.tp-page .tp-cta--block .tp-cta-key::after { animation-duration: 5.2s; animation-delay: 1.6s; }
@keyframes tpKeyRing {
  0%, 74% { transform: scale(1); opacity: 0; }
  80% { opacity: 0.75; }
  100% { transform: scale(1.55); opacity: 0; }
}
.tp-page .tp-cta--xl .tp-cta-key { animation-duration: 3.1s; }
.tp-page .tp-cta--light .tp-cta-key { animation-duration: 4.4s; }
.tp-page .tp-cta--sm .tp-cta-key { animation-duration: 5s; }
/* The arrow steps forward once the sweep has passed. */
.tp-page .tp-cta .tp-cta-key .tp-ico { animation: tpArrowStep 6s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite; }
.tp-page .tp-cta--xl .tp-cta-key .tp-ico { animation-duration: 5.4s; animation-delay: 0.6s; }
.tp-page .tp-cta--light .tp-cta-key .tp-ico { animation-name: tpKeyBeat; animation-duration: 7.4s; animation-delay: 2s; }
.tp-page .tp-cta--sm .tp-cta-key .tp-ico { animation-name: tpKeyBeat; animation-duration: 8.2s; animation-delay: 3s; }
.tp-page .tp-cta--block .tp-cta-key .tp-ico { animation-duration: 6.8s; animation-delay: 1.6s; }
@keyframes tpArrowStep {
  0%, 78%, 100% { transform: translateX(0); }
  83% { transform: translateX(6px); }
  88% { transform: translateX(1px); }
  92% { transform: translateX(4px); }
  97% { transform: translateX(0); }
}
@keyframes tpKeyBeat {
  0%, 84%, 100% { transform: scale(1); }
  90% { transform: scale(1.12); }
}
@keyframes tpKey {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -6px 10px rgba(63,102,8,0.28), 0 8px 18px -8px rgba(175,221,44,0.9), 0 0 0 0 rgba(175,221,44,0); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -6px 10px rgba(63,102,8,0.28), 0 8px 22px -6px rgba(175,221,44,1), 0 0 0 5px rgba(175,221,44,0.14); }
}
.tp-page .tp-cta--light .tp-cta-key { animation-name: tpKeyBlue; }
@keyframes tpKeyBlue {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 18px -8px rgba(10,45,194,0.9), 0 0 0 0 rgba(56,207,255,0); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 22px -6px rgba(10,45,194,1), 0 0 0 5px rgba(56,207,255,0.16); }
}
.tp-page .tp-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -18px 30px rgba(3,10,34,0.3),
    0 7px 0 -1px var(--tp-edge),
    0 8px 0 -1px rgba(56,207,255,0.45),
    0 16px 22px -8px rgba(0,0,0,0.55),
    0 34px 60px -20px rgba(2,193,255,1);
}
.tp-page .tp-cta:hover .tp-cta-key { transform: scale(1.08); animation-duration: 1.6s; }
.tp-page .tp-cta:hover::after { animation-duration: 1.5s; animation-delay: 0s; }
.tp-page .tp-cta:hover .tp-cta-key .tp-ico { animation: tpArrowWalk 1.1s ease-in-out infinite; }
.tp-page .tp-cta--light:hover .tp-cta-key .tp-ico, .tp-page .tp-cta--sm:hover .tp-cta-key .tp-ico { animation: tpKeyWake 1.4s ease-in-out infinite; }
.tp-page .tp-cta:hover .tp-cta-key::after { animation-duration: 1.5s; animation-delay: 0s; }
@keyframes tpArrowWalk {
  0%, 100% { transform: translateX(1px); }
  50% { transform: translateX(5px); }
}
@keyframes tpKeyWake {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
/* Pressed: the plate sinks onto its edge. */
.tp-page .tp-cta:active {
  transform: translateY(3px) scale(0.99);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -12px 22px rgba(3,10,34,0.4),
    0 1px 0 -1px var(--tp-edge),
    0 2px 0 -1px rgba(56,207,255,0.3),
    0 6px 12px -6px rgba(0,0,0,0.6),
    0 14px 30px -18px rgba(2,193,255,0.8);
  transition-duration: 0.08s;
}
.tp-page .tp-cta--light { --tp-edge: #8fa4c6; }
.tp-page .tp-cta--light {
  box-shadow:
    inset 0 -10px 18px rgba(14,29,56,0.06),
    0 4px 0 -1px var(--tp-edge),
    0 10px 16px -6px rgba(0,0,0,0.45),
    0 24px 48px -22px rgba(56,207,255,0.9);
}
.tp-page .tp-cta--light:hover {
  box-shadow:
    inset 0 -10px 18px rgba(14,29,56,0.06),
    0 7px 0 -1px var(--tp-edge),
    0 16px 22px -8px rgba(0,0,0,0.45),
    0 34px 60px -22px rgba(56,207,255,1);
}
.tp-page .tp-cta--light:active { box-shadow: inset 0 -8px 14px rgba(14,29,56,0.08), 0 1px 0 -1px var(--tp-edge), 0 8px 14px -8px rgba(0,0,0,0.5); }
/* A compact primary, for asides. */
.tp-page .tp-cta--sm { min-height: 54px; padding: 6px 6px 6px 20px; gap: 14px; border-radius: 14px; font-size: 0.75rem; }
.tp-page .tp-cta--sm .tp-cta-key { width: 40px; height: 40px; border-radius: 11px; }

/* Secondary: thickness, and a rim of light that switches on under the cursor. */
.tp-page .tp-ghost {
  box-shadow:
    inset 0 0 0 1.5px rgba(139,177,255,0.38),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 0 -1px rgba(6,16,44,0.95),
    0 5px 0 -1px rgba(139,177,255,0.22),
    0 14px 26px -16px rgba(0,0,0,0.8);
}
.tp-page .tp-ghost { position: relative; overflow: hidden; }
.tp-page .tp-ghost::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 36%;
  background: linear-gradient(100deg, transparent, rgba(140,230,255,0.28), transparent);
  transform: translateX(-180%) skewX(-16deg);
  pointer-events: none;
}
.tp-page .tp-ghost:hover::after { animation: tpSweep 1.6s cubic-bezier(0.45, 0, 0.2, 1); }
.tp-page .tp-ghost:hover .tp-ghost-key { transform: scale(1.08); }
.tp-page .tp-ghost .tp-ghost-key .tp-ico { animation: tpGhostBeat 9s ease-in-out 2.4s infinite; }
.tp-page .tp-ghost:hover .tp-ghost-key .tp-ico { animation: none; }
@keyframes tpGhostBeat {
  0%, 88%, 100% { transform: translateY(0); }
  93% { transform: translateY(2.5px); }
}
.tp-page .tp-ghost--fwd .tp-ghost-key .tp-ico { animation-name: tpGhostBeatFwd; }
@keyframes tpGhostBeatFwd {
  0%, 88%, 100% { transform: translateX(0); }
  93% { transform: translateX(3px); }
}
.tp-page .tp-ghost:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1.5px rgba(56,207,255,0.8),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 7px 0 -1px rgba(6,16,44,0.95),
    0 8px 0 -1px rgba(56,207,255,0.4),
    0 20px 34px -14px rgba(2,193,255,0.55);
}
.tp-page .tp-ghost:active {
  transform: translateY(3px) scale(0.99);
  box-shadow: inset 0 0 0 1.5px rgba(56,207,255,0.7), 0 1px 0 -1px rgba(6,16,44,0.95), 0 6px 12px -8px rgba(0,0,0,0.7);
  transition-duration: 0.08s;
}
/* Touch screens get the pressed state, never a stuck hover. */
@media (hover: none) {
  .tp-page .tp-cta:hover, .tp-page .tp-ghost:hover { transform: none; }
  .tp-page .tp-cta:active { transform: translateY(4px) scale(0.985); }
  .tp-page .tp-ghost:active { transform: translateY(4px) scale(0.985); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-page .tp-cta::after, .tp-page .tp-ghost::after { animation: none; display: none; }
  .tp-page .tp-cta .tp-cta-key, .tp-page .tp-cta .tp-cta-key .tp-ico,
  .tp-page .tp-cta .tp-cta-key::after, .tp-page .tp-ghost .tp-ghost-key .tp-ico { animation: none; }
  .tp-page .tp-cta .tp-cta-key::after { display: none; }
}

@media (max-width: 980px) {
  .tp-hero .tp-bm { display: inline; }
}
@media (max-width: 760px) {
  .tp-bm { display: inline; }
  .tp-page .tp-cta { gap: 14px; padding-left: 20px; }
  /* An intentional two-line label where one line can't fit. */
  .tp-page .tp-cta--stack { white-space: normal; text-align: left; }
  .tp-page .tp-cta--stack .tp-cta-t > span { display: block; }
  .tp-sec { padding: clamp(72px, 16vw, 96px) 0; }
  .tp-sec[id], .tp-close[id] { scroll-margin-top: 36px; }
  .tp-intro, .tp-intro--center { text-align: center; }
  .tp-intro .tp-body { text-align: left; margin-inline: 0; max-width: none; }
  .tp-h2 { font-size: clamp(2rem, 8.2vw, 2.4375rem); }
  .tp-h2--xl { font-size: clamp(2.125rem, 8.8vw, 2.625rem); }
  .tp-h2--xxl { font-size: clamp(2.25rem, 9.6vw, 2.875rem); }
  .tp-h2 + .tp-body { margin-top: 18px; }
  .tp-intro { margin-bottom: 44px; }
  .tp-kicker { font-size: 1.1875rem; }
  .tp-sec--portal .tp-portal-title { font-size: min(2.625rem, calc((100vw - 2 * var(--tp-gutter)) / 11.4)); letter-spacing: -0.012em; }
  .tp-portal-title .tp-line { white-space: nowrap; }
}
/* Small phones: labels that can't hold one line become an intentional
   pair (small first line, strong second line) and never push the key out. */
@media (max-width: 480px) {
  .tp-page .tp-cta { white-space: normal; }
  .tp-page .tp-cta .tp-cta-t > span { display: block; }
  .tp-page .tp-cta .tp-cta-t > span:first-child:not(:only-child) { font-size: 0.75rem; letter-spacing: 0.16em; opacity: 0.9; }
  .tp-page .tp-cta .tp-cta-t > span:last-child:not(:only-child) { margin-top: 3px; font-size: 1.0625rem; letter-spacing: 0.06em; }
  .tp-page .tp-cta--light .tp-cta-t { line-height: 1.3; }
}
@media (max-width: 400px) {
  .tp-page .tp-cta { gap: 10px; padding-left: 16px; }
  .tp-page .tp-cta .tp-cta-t > span:last-child:not(:only-child) { white-space: nowrap; font-size: 0.9688rem; letter-spacing: 0.035em; }
  .tp-page .tp-cta .tp-cta-t > span:only-child { white-space: nowrap; font-size: 0.75rem; letter-spacing: 0.06em; }
  .tp-page .tp-cta .tp-cta-key, .tp-page .tp-cta--xl .tp-cta-key { width: 44px; height: 44px; }
}
@media (max-width: 400px) {
  .tp-h2 { font-size: 1.9375rem; }
  .tp-h2--xl { font-size: 2.0625rem; }
  .tp-h2--xxl { font-size: 2.1875rem; }
}

/* =========================================================
   1. HERO — "Before we touch a single line, we learn your year."
   Type carries the statement; the figure is the year itself. A Jan-Dec
   rail with the things that happened hanging from it (one of them still a
   question) drawn down into a single return. Crisp SVG and HTML only.
   Phones get their own composition: centred marker and headline, a small
   year rail as the one ornament, full-width actions.
   ========================================================= */
.tp-hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(112px, 10vw, 156px) 0 clamp(88px, 8vw, 124px);
  background:
    radial-gradient(60% 70% at 78% 44%, rgba(2,193,255,0.14) 0%, transparent 66%),
    radial-gradient(64% 80% at 6% 88%, rgba(10,45,194,0.34) 0%, transparent 66%),
    radial-gradient(50% 60% at 94% 4%, rgba(41,51,130,0.6) 0%, transparent 70%),
    linear-gradient(180deg, #060c1e 0%, #071026 56%, #060b18 100%);
}
.tp-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,207,255,0.5) 28%, rgba(175,221,44,0.45) 74%, transparent);
}
/* A ledger ruling, kept to a whisper. */
.tp-hero-field {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(139,177,255,0.045) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(90% 70% at 30% 46%, #000 0%, rgba(0,0,0,0.4) 54%, transparent 82%);
  mask-image: radial-gradient(90% 70% at 30% 46%, #000 0%, rgba(0,0,0,0.4) 54%, transparent 82%);
  pointer-events: none;
}
.tp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.tp-hero-copy { max-width: 740px; }

/* Service marker */
.tp-hero-k {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(26px, 2.4vw, 34px);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56,207,255,0.14), rgba(56,207,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(56,207,255,0.28);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #bfe4ff;
}
.tp-hero-k::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tp-sky), var(--tp-lime));
}
.tp-hero-k i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--tp-lime);
  transform: rotate(45deg);
}

.tp-h1 {
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 5.6vw, 5.5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--white);
}
.tp-h1 em {
  font-style: italic;
  background: linear-gradient(96deg, #9be8ff 0%, var(--tp-sky) 32%, var(--tp-teal) 66%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.tp-hbr { display: none; }
.tp-lede {
  margin-top: clamp(26px, 2.4vw, 34px);
  max-width: 54ch;
  font-size: clamp(1.0625rem, 0.5vw + 0.94rem, 1.1875rem);
  line-height: 1.64;
  color: #c3d2ea;
  text-wrap: pretty;
}
/* The signature statement: the belief, set apart from the explanation. */
.tp-sigline {
  margin-top: 16px;
  font-size: clamp(1.0625rem, 0.5vw + 0.94rem, 1.1875rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}
.tp-sigline em { font-style: normal; color: #cdef6a; }

/* The locked line, on its own rule of light. */
.tp-promise {
  position: relative;
  margin-top: clamp(28px, 2.6vw, 36px);
  padding-left: 22px;
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  line-height: 1.24;
}
.tp-promise::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tp-sky), var(--tp-teal) 55%, var(--tp-lime));
}
.tp-promise span { display: block; color: var(--white); }
.tp-promise em { display: block; font-style: italic; color: #b9f0a9; }

.tp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  margin-top: clamp(32px, 3vw, 44px);
}

/* ---- The year ----
   A stage tilted slightly toward the reader, standing on a floor of light.
   Layers sit at different depths: the ruler, then the life events, then the
   return nearest to you. Light travels down each line into the return. */
.tp-hero-figure { position: relative; perspective: 1800px; perspective-origin: 30% 40%; }
.tp-yr {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  aspect-ratio: 520 / 560;
  transform: rotateY(-11deg) rotateX(6deg);
  transform-style: preserve-3d;
}
.tp-yr::before {
  content: '';
  position: absolute;
  inset: 12% -8% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2,193,255,0.16), transparent);
  pointer-events: none;
  transform: translateZ(-40px);
}
/* The floor: a receding grid of light the whole year stands on. */
.tp-yr-floor {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -4%;
  height: 58%;
  background:
    repeating-linear-gradient(90deg, rgba(120,200,255,0.16) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(120,200,255,0.12) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 72%);
  transform: translateZ(-60px) rotateX(74deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}
/* "Your year": the figure's own title. */
.tp-yr-k {
  position: absolute;
  left: 2.5%;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  transform: translateZ(28px);
}
.tp-yr-k-t {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(95deg, #ffffff 0%, #9be8ff 45%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.tp-yr-k-s {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(56,207,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(56,207,255,0.35);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #bfe4ff;
}
/* The month ruler: a glass bar; the months that mattered are lit. */
.tp-yr-ruler {
  position: absolute;
  left: 2.6%;
  right: 2.6%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,66,120,0.55), rgba(14,28,60,0.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(139,177,255,0.22), 0 14px 26px -16px rgba(0,0,0,0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateZ(20px);
}
.tp-yr-ruler span { display: grid; place-items: center; }
.tp-yr-ruler abbr {
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7f95bd;
}
.tp-yr-ruler .on abbr {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #06121c;
  background: linear-gradient(150deg, var(--tn), var(--tn-deep));
  box-shadow: 0 0 14px -2px rgba(var(--tn-rgb), 0.9), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tp-yr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tp-yr-lines .yr-rail { fill: none; stroke: url(#yr-rail); stroke-width: 2; stroke-linecap: round; }
.tp-yr-lines .yr-tick { fill: none; stroke: rgba(191,216,255,0.35); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tp-yr-lines .yr-tick--on { stroke: rgba(191,216,255,0.8); stroke-width: 1.6; }
.tp-yr-lines .yr-lead { fill: none; stroke: rgba(var(--tn-rgb), 0.8); stroke-width: 1.3; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.tp-yr-lines .yr-flow { fill: none; stroke: rgba(var(--tn-rgb), 0.45); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Light travelling from each event into the return. */
.tp-yr-lines .yr-pulse {
  fill: none;
  stroke: rgb(var(--tn-rgb));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 200;
  stroke-dashoffset: 9;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(var(--tn-rgb), 0.95));
  animation: tpFlow 3.6s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes tpFlow { 0% { stroke-dashoffset: 9; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
/* Nodes on the rail: small lit spheres. */
.tp-yr-node {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, rgb(var(--tn-rgb)) 38%, var(--tn-deep) 100%);
  box-shadow: 0 0 0 4px rgba(var(--tn-rgb), 0.16), 0 0 16px rgba(var(--tn-rgb), 0.95);
  transform: translateZ(22px);
}
.tp-yr-node::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(var(--tn-rgb), 0.7);
  animation: tpPulse 2.8s var(--ease-out) infinite;
}
.tp-yr-node:nth-of-type(2)::after { animation-delay: 0.7s; }
.tp-yr-node:nth-of-type(3)::after { animation-delay: 1.4s; }
.tp-yr-node:nth-of-type(4)::after { animation-delay: 2.1s; }
/* The events: glass tiles with a lit edge, standing forward of the rail. */
.tp-yr-chip {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px 0 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(30,52,98,0.96), rgba(12,24,52,0.96)) padding-box,
    linear-gradient(160deg, rgba(var(--tn-rgb), 0.95), rgba(var(--tn-rgb), 0.2) 60%, rgba(255,255,255,0.18)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 3px 0 -1px rgba(4,12,32,0.95), 0 20px 32px -18px rgba(0,0,0,0.95), 0 0 30px -12px rgba(var(--tn-rgb), 0.85);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: #eef4ff;
  transform: translate3d(-12px, 0, 46px);
  animation: tpFloat 7s ease-in-out infinite;
}
.tp-yr-chip--l { flex-direction: row-reverse; padding: 0 12px 0 16px; transform: translate3d(12px, 0, 46px); animation-name: tpFloatL; }
.tp-yr-chip:nth-of-type(2) { animation-delay: -1.8s; }
.tp-yr-chip:nth-of-type(3) { animation-delay: -3.6s; }
.tp-yr-chip:nth-of-type(4) { animation-delay: -5.4s; }
@keyframes tpFloat { 0%, 100% { transform: translate3d(-12px, 0, 46px); } 50% { transform: translate3d(-12px, -3px, 46px); } }
@keyframes tpFloatL { 0%, 100% { transform: translate3d(12px, 0, 46px); } 50% { transform: translate3d(12px, -3px, 46px); } }
.tp-yr-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, rgb(var(--tn-rgb)) 45%, var(--tn-deep) 100%);
  box-shadow: 0 0 10px rgba(var(--tn-rgb), 0.95);
}
/* The detail you may not know is worth mentioning. */
.tp-yr-q { position: absolute; left: calc(100% + 12px); top: 50%; display: inline-flex; align-items: center; gap: 8px; transform: translateY(-50%); }
.tp-yr-q b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3ffc4 0%, var(--tp-lime) 50%, #8cbf1e 100%);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: #16290a;
  box-shadow: 0 0 0 5px rgba(175,221,44,0.16), 0 0 20px rgba(175,221,44,0.75);
}
.tp-yr-q i { font-family: var(--font-serif); font-size: 1.0625rem; font-style: italic; color: #d9f59a; }
/* Everything above, drawn into one return: the nearest layer, with two
   sheets stacked behind it and a shadow on the floor. */
.tp-yr-stack {
  position: absolute;
  left: 50%;
  width: 62%;
  height: 84px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30,52,100,0.8), rgba(12,24,52,0.8));
  box-shadow: inset 0 0 0 1px rgba(139,177,255,0.22);
}
.tp-yr-stack--1 { transform: translate3d(-50%, 12px, 50px) scale(0.95); opacity: 0.8; }
.tp-yr-stack--2 { transform: translate3d(-50%, 23px, 40px) scale(0.9); opacity: 0.5; }
.tp-yr-return {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 62%;
  min-height: 84px;
  padding: 18px 22px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  transform: translate3d(-50%, 0, 64px);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(56,207,255,0.2), transparent 60%) padding-box,
    linear-gradient(180deg, #16305f, #0c1a3c) padding-box,
    linear-gradient(120deg, rgba(140,230,255,0.95), rgba(93,139,255,0.4) 46%, rgba(175,221,44,0.95)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 0 -1px rgba(4,12,32,0.95), 0 40px 60px -30px rgba(0,0,0,0.95), 0 0 80px -24px rgba(56,207,255,0.7);
}
.tp-yr-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #0c1f06;
  background: linear-gradient(150deg, #e2fb86, #aedb2f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 20px -10px rgba(175,221,44,0.9);
}
.tp-yr-check .tp-ico { width: 20px; height: 20px; stroke-width: 2.4; }
.tp-yr-return b { display: block; font-family: var(--font-serif); font-size: 1.4375rem; font-weight: 600; line-height: 1.1; color: var(--white); }
.tp-yr-return i { display: block; margin-top: 4px; font-style: normal; font-size: 0.8125rem; color: #b3c6e6; }

/* When the two actions stack, they stack as an even pair. */
@media (min-width: 981px) and (max-width: 1240px) {
  .tp-hero-actions { display: inline-grid; grid-template-columns: minmax(0, max-content); }
  .tp-hero-actions .tp-cta, .tp-hero-actions .tp-ghost { width: 100%; }
}
@media (max-width: 1180px) {
  .tp-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; }
  .tp-yr-k-t { font-size: 1.75rem; }
  .tp-yr-chip { height: 34px; font-size: 0.8125rem; padding: 0 12px 0 10px; }
  .tp-yr-chip--l { padding: 0 10px 0 12px; }
  .tp-yr-q i { font-size: 0.9375rem; }
  .tp-yr-return, .tp-yr-stack { width: 74%; }
  .tp-yr-return { padding: 14px 16px; }
  .tp-yr-return b { font-size: 1.1875rem; }
}
/* Tablets and phones: the year joins the reading order (lede, the year,
   then the signature) as a flat, crisp stage of its own. */
@media (max-width: 980px) {
  .tp-hero { padding-top: 116px; }
  .tp-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .tp-hero-copy { display: contents; }
  .tp-hero-k { order: 1; align-self: flex-start; }
  .tp-h1 { order: 2; }
  .tp-lede { order: 3; max-width: 60ch; }
  .tp-hero-figure { order: 4; width: 100%; max-width: 560px; margin: 44px 0 8px; perspective: none; }
  .tp-sigline { order: 5; }
  .tp-promise { order: 6; align-self: flex-start; }
  .tp-hero-actions { order: 7; align-self: flex-start; }
  .tp-yr { margin: 0; transform: none; aspect-ratio: 520 / 520; }
  .tp-yr-floor { bottom: -2%; height: 40%; transform: none; opacity: 0.55; }
  .tp-yr-chip, .tp-yr-chip--l, .tp-yr-node, .tp-yr-ruler, .tp-yr-k { transform: none; }
  .tp-yr-chip { transform: translateX(-12px); animation-name: tpFloat2; }
  .tp-yr-chip--l { transform: translateX(12px); animation-name: tpFloat2L; }
  .tp-yr-stack--1 { transform: translate(-50%, 10px) scale(0.95); }
  .tp-yr-stack--2 { transform: translate(-50%, 19px) scale(0.9); }
  .tp-yr-return { transform: translateX(-50%); }
}
@keyframes tpFloat2 { 0%, 100% { transform: translate(-12px, 0); } 50% { transform: translate(-12px, -2px); } }
@keyframes tpFloat2L { 0%, 100% { transform: translate(12px, 0); } 50% { transform: translate(12px, -2px); } }
/* Phones: one composed, centred statement, with the year as its picture. */
@media (max-width: 760px) {
  .tp-hero { padding-top: 92px; padding-bottom: 80px; }
  .tp-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 120px;
    width: 520px;
    height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(2,193,255,0.2), rgba(10,45,194,0.12) 55%, transparent);
    pointer-events: none;
  }
  .tp-hero-copy { text-align: center; }
  .tp-hero-k { align-self: center; margin-bottom: 26px; padding: 7px 13px 7px 10px; gap: 9px; font-size: 0.625rem; letter-spacing: 0.16em; }
  .tp-hero-k::before { width: 12px; }
  .tp-h1 { font-size: clamp(3rem, 13.4vw, 4.25rem); line-height: 0.98; letter-spacing: -0.03em; }
  .tp-hbr { display: inline; }
  .tp-lede { max-width: 36ch; margin: 30px auto 0; font-size: 1.0625rem; }
  /* The year, as a lit card on phones. */
  .tp-hero-figure {
    align-self: center;
    margin: 36px 0 4px;
    padding: 18px 14px 20px;
    border: 1px solid transparent;
    border-radius: 24px;
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(56,207,255,0.14), transparent 70%) padding-box,
      linear-gradient(180deg, rgba(16,32,68,0.92), rgba(8,17,40,0.92)) padding-box,
      linear-gradient(160deg, rgba(140,230,255,0.6), rgba(93,139,255,0.2) 45%, rgba(175,221,44,0.55)) border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 0 -1px rgba(4,12,32,0.95), 0 40px 70px -40px rgba(0,0,0,0.95), 0 0 70px -30px rgba(56,207,255,0.6);
  }
  .tp-yr { aspect-ratio: 520 / 540; }
  .tp-yr-k { left: 1%; gap: 10px; }
  .tp-yr-k-t { font-size: 1.5rem; }
  .tp-yr-k-s { padding: 4px 8px; font-size: 0.5625rem; }
  .tp-yr-ruler { left: 0; right: 0; height: 30px; border-radius: 10px; }
  .tp-yr-ruler abbr { font-size: 0.6875rem; }
  .tp-yr-ruler .on abbr { width: 20px; height: 20px; border-radius: 6px; }
  .tp-yr-node { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
  .tp-yr-chip { height: 30px; gap: 7px; padding: 0 11px 0 9px; border-radius: 10px; font-size: 0.75rem; }
  .tp-yr-chip--l { padding: 0 9px 0 11px; }
  .tp-yr-dot { width: 8px; height: 8px; }
  /* On a phone the question sits in the open space to the left of its event. */
  .tp-yr-q { left: auto; right: calc(100% + 8px); flex-direction: row-reverse; gap: 6px; }
  .tp-yr-q b { width: 20px; height: 20px; font-size: 0.8125rem; box-shadow: 0 0 0 3px rgba(175,221,44,0.16), 0 0 14px rgba(175,221,44,0.7); }
  .tp-yr-q i { font-size: 0.875rem; }
  .tp-yr-return, .tp-yr-stack { width: 86%; }
  .tp-yr-stack { height: 64px; }
  .tp-yr-return { gap: 11px; min-height: 64px; padding: 11px 14px; border-radius: 15px; text-align: left; }
  .tp-yr-check { width: 38px; height: 38px; border-radius: 11px; }
  .tp-yr-check .tp-ico { width: 17px; height: 17px; }
  .tp-yr-return b { font-size: 1.125rem; }
  .tp-yr-return i { font-size: 0.6875rem; }
  .tp-sigline { max-width: 32ch; margin: 26px auto 0; font-size: 1.0625rem; text-wrap: balance; }
  /* The locked line: centred, its rule of light set above it. */
  .tp-promise { align-self: center; margin-top: 30px; padding: 18px 0 0; font-size: 1.25rem; text-align: center; }
  .tp-promise::before { left: 50%; top: 0; bottom: auto; width: 64px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, var(--tp-sky), var(--tp-teal) 55%, var(--tp-lime)); }
  .tp-hero-actions { align-self: stretch; width: 100%; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 30px; }
  .tp-hero-actions .tp-cta, .tp-hero-actions .tp-ghost { width: 100%; }
}
@media (max-width: 420px) {
  .tp-hero-k { gap: 7px; padding: 6px 11px; font-size: 0.5625rem; letter-spacing: 0.12em; white-space: nowrap; }
  .tp-hero-k::before { display: none; }
  .tp-hero-figure { padding: 16px 10px 18px; }
  .tp-yr-chip { font-size: 0.6875rem; padding: 0 9px 0 8px; gap: 6px; }
  .tp-yr-chip--l { padding: 0 8px 0 9px; }
  .tp-yr-q i { font-size: 0.8125rem; }
}
@media (max-width: 400px) {
  .tp-h1 { font-size: 2.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-yr-chip, .tp-yr-chip--l, .tp-yr-node::after { animation: none; }
  .tp-yr-lines .yr-pulse { display: none; }
}

/* =========================================================
   2. WHY TAX SEASON FEELS HEAVY — three doubts across one fold
   Personality: cyan → teal → green. Each doubt is set in muted serif on
   one side of a paper fold; its resolution is lit on the other side and
   joined to the fold by a line of light. The fold warms as doubts resolve.
   ========================================================= */
.tp-sec--why {
  padding-bottom: clamp(104px, 10vw, 160px);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(2,193,255,0.2) 0%, transparent 72%),
    radial-gradient(40% 34% at 88% 54%, rgba(68,181,156,0.16) 0%, transparent 70%),
    radial-gradient(38% 30% at 8% 92%, rgba(127,209,74,0.1) 0%, transparent 70%),
    linear-gradient(180deg, #071426 0%, #08182a 46%, #06121f 100%);
}
.tp-why-glyph { display: none; }
.tp-why-glyph--old {
  position: absolute;
  z-index: 0;
  right: -2vw;
  top: -4vw;
  font-family: var(--font-serif);
  font-size: clamp(24rem, 44vw, 48rem);
  font-style: italic;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(56,207,255,0.08);
  pointer-events: none;
  user-select: none;
}
.tp-why-intro { max-width: 880px; margin: 0 auto; text-align: center; }
.tp-why-intro .tp-body { margin-inline: auto; }
.tp-why-intro .tp-h2 + .tp-body { margin-top: 26px; }

/* More air between the three concerns, and a different indent for each. */
.tp-beat:nth-child(1) { --beat-shift: 0px; }
.tp-beat:nth-child(2) { --beat-shift: clamp(12px, 2vw, 40px); }
.tp-beat:nth-child(3) { --beat-shift: clamp(4px, 1vw, 18px); }
.tp-beat { padding-inline: var(--beat-shift); }
.tp-fold {
  position: relative;
  display: grid;
  gap: clamp(64px, 7vw, 104px);
  max-width: 1180px;
  margin: clamp(72px, 8vw, 112px) auto 0;
  padding: 18px 0;
}
.tp-fold::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(150,165,198,0) 0%, rgba(150,165,198,0.4) 8%, var(--tp-sky) 36%, var(--tp-teal) 66%, var(--tp-ok) 92%, rgba(127,209,74,0) 100%);
}
.tp-fold::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 220px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03) 48%, rgba(0,0,0,0.16) 52%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  pointer-events: none;
}
.tp-beat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(84px, 10vw, 150px);
  align-items: center;
}
/* A tone glow behind each resolution. */
.tp-beat::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 52%;
  top: 50%;
  width: 46%;
  height: 180%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(var(--tn-rgb), 0.12), transparent);
  pointer-events: none;
}
.tp-beat:nth-child(2)::before { left: 2%; }
.tp-beat-n {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #14294c, #081326);
  box-shadow: 0 0 0 2px rgba(var(--tn-rgb), 0.95), 0 0 0 9px rgba(var(--tn-rgb), 0.1), 0 0 34px rgba(var(--tn-rgb), 0.5);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--tn-text);
}
.tp-beat-ask {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}
.tp-beat-pain {
  margin-top: 16px;
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
  color: #8fa6c8;
  text-wrap: pretty;
}
.tp-beat-q {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: clamp(2.375rem, 3.7vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.012em;
  color: #a8bcd9;
}
.tp-beat-q em {
  font-style: italic;
  background: linear-gradient(96deg, #ffffff 0%, #eaf4ff 58%, rgba(var(--tn-rgb), 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.05em;
}
.tp-beat-q { text-wrap: balance; }
.tp-beat-a {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  max-width: 450px;
}
/* A line of light from the fold to the resolution. */
.tp-beat-a::before {
  content: '';
  position: absolute;
  top: 17px;
  right: calc(100% + 16px);
  width: clamp(28px, 4.4vw, 60px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.15), var(--tn));
  box-shadow: 0 0 12px rgba(var(--tn-rgb), 0.7);
}
.tp-beat-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.1vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  color: var(--tn-text);
}
.tp-beat-a p:not(.tp-beat-lead) { margin-top: 10px; font-size: 1.0625rem; line-height: 1.64; color: var(--gray-200); text-wrap: pretty; }
/* The middle beat crosses the fold the other way. */
.tp-beat:nth-child(2) .tp-beat-ask { grid-column: 2; text-align: left; }
.tp-beat:nth-child(2) .tp-beat-a { grid-column: 1; justify-self: end; text-align: right; }
.tp-beat:nth-child(2) .tp-beat-a::before { right: auto; left: calc(100% + 16px); background: linear-gradient(270deg, rgba(var(--tn-rgb), 0.15), var(--tn)); }

@media (max-width: 1080px) {
  .tp-beat { column-gap: 96px; }
  .tp-beat-a::before { width: 26px; }
}

/* Narrow screens: no fold. The three concerns become one editorial path:
   a line of light runs down the left of each concern and steps sideways
   into the next, changing colour as it goes (cyan, teal, green). Each
   concern: a small chapter mark, the question, the worry in italics, then
   the answer in the concern's colour. */
@media (max-width: 860px) {
  .tp-why-glyph { display: none; }
  .tp-fold { --gap: 64px; gap: var(--gap); padding: 0; max-width: 620px; }
  .tp-fold::before, .tp-fold::after { display: none; }
  .tp-beat,
  .tp-beat:nth-child(2) {
    display: block;
    margin-left: var(--x);
    padding: 0 0 0 26px;
  }
  .tp-beat::before, .tp-beat:nth-child(2)::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: calc(var(--gap) / -2 - 1px);
    left: min(0px, calc(var(--px) - var(--x)));
    width: calc(max(var(--x), var(--px)) - min(var(--x), var(--px)) + 2px);
    height: 2px;
    transform: none;
    border-radius: 2px;
    background: rgba(var(--tn-rgb), 0.7);
  }
  .tp-beat:first-child::before { display: none; }
  /* The thread */
  .tp-beat::after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--gap) / -2);
    bottom: calc(var(--gap) / -2);
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(var(--tn-rgb), 0.7), var(--tn) 30%, rgba(var(--tn-rgb), 0.75));
    box-shadow: 0 0 14px rgba(var(--tn-rgb), 0.45);
  }
  .tp-beat:first-child::after { top: 6px; background: linear-gradient(180deg, rgba(var(--tn-rgb), 0), var(--tn) 16%, rgba(var(--tn-rgb), 0.75)); }
  .tp-beat:last-child::after { bottom: 0; background: linear-gradient(180deg, rgba(var(--tn-rgb), 0.75), var(--tn) 40%, rgba(var(--tn-rgb), 0)); }
  .tp-beat-n {
    position: relative;
    left: auto;
    top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    margin-bottom: 14px;
    transform: none;
    background: none;
    box-shadow: none;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tn-text);
  }
  .tp-beat-n::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.8), transparent); }
  .tp-beat-n::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #071426;
    box-shadow: inset 0 0 0 2.5px var(--tn), 0 0 12px rgba(var(--tn-rgb), 0.8);
  }
  .tp-beat-ask,
  .tp-beat:nth-child(2) .tp-beat-ask { text-align: left; }
  .tp-beat-q,
  .tp-beat:nth-child(2) .tp-beat-q { font-size: clamp(2rem, 7.4vw, 2.625rem); line-height: 1.02; text-align: left; }
  .tp-beat-pain { margin-top: 12px; font-size: 1rem; }
  .tp-beat-a,
  .tp-beat:nth-child(2) .tp-beat-a { max-width: none; margin-top: 20px; padding: 0; text-align: left; justify-self: stretch; }
  .tp-beat-a::before,
  .tp-beat:nth-child(2) .tp-beat-a::before { display: none; }
  .tp-beat-lead { font-size: 1.5rem; }
}
@media (max-width: 760px) {
  .tp-why-intro .tp-body { text-align: left; }
  .tp-fold { margin-top: 56px; --gap: 60px; }
  .tp-beat-a p:not(.tp-beat-lead) { font-size: 1rem; }
}
@media (max-width: 400px) {
  .tp-beat-q, .tp-beat:nth-child(2) .tp-beat-q { font-size: 1.875rem; }
  .tp-beat, .tp-beat:nth-child(2) { padding-left: 22px; }
  .tp-beat-n::before { left: -27px; }
}

/* =========================================================
   3. WHO WE PREPARE RETURNS FOR — three dossiers
   Personality: cyan / royal / teal. Each situation is a folder: a lit,
   coloured back with its tab, paper standing inside, a dark pocket front
   with a thumb cut, and the form that defines it clipped to the front.
   ========================================================= */
.tp-sec--who {
  background:
    linear-gradient(180deg, rgba(56,207,255,0.06) 0%, transparent 18%),
    linear-gradient(180deg, #0b1d44 0%, #0a1839 60%, #081330 100%);
  box-shadow: inset 0 1px 0 rgba(56,207,255,0.28);
}
/* Desktop: the header reads as a file label, not another centred intro. */
@media (min-width: 981px) {
  .tp-sec--who .tp-intro--center {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
    grid-template-areas: "tab tab" "h2 body";
    column-gap: clamp(32px, 5vw, 80px);
    align-items: end;
    max-width: none;
    text-align: left;
  }
  .tp-sec--who .tp-foldertab { grid-area: tab; justify-self: start; }
  .tp-sec--who .tp-foldertab::after { left: 0; right: -60px; background: linear-gradient(90deg, var(--tn) 0%, var(--tn) 60%, transparent); }
  .tp-sec--who .tp-intro--center .tp-h2 { grid-area: h2; }
  .tp-sec--who .tp-intro--center .tp-body { grid-area: body; margin: 0 0 8px; max-width: 46ch; }
}
.tp-atmos--who {
  background:
    radial-gradient(46% 34% at 50% 0%, rgba(2,193,255,0.13) 0%, transparent 72%),
    radial-gradient(40% 45% at 94% 70%, rgba(68,181,156,0.11) 0%, transparent 70%),
    radial-gradient(40% 45% at 4% 72%, rgba(10,45,194,0.2) 0%, transparent 70%);
}
.tp-drawer { position: relative; }
.tp-dossiers { position: relative; }
.tp-dossiers:focus-visible { outline: 2px solid var(--tp-sky); outline-offset: 8px; border-radius: 20px; }
.tp-dossier-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 38px);
  padding-top: 38px;
}
.tp-dossier { position: relative; display: flex; flex-direction: column; }
.tp-dossier::before {
  content: '';
  position: absolute;
  inset: 0 0 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 24%),
    linear-gradient(155deg, var(--tn) 0%, var(--tn-deep) 62%, rgba(7,14,29,0.92) 100%);
  box-shadow: 0 60px 100px -54px rgba(var(--tn-rgb), 0.6), 0 30px 50px -30px rgba(0,0,0,0.9);
}
.tp-dossier-tab {
  position: absolute;
  z-index: 1;
  top: -32px;
  height: 33px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 40px);
  padding: 0 18px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 64%), var(--tn);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tp-ink);
}
.tp-dossier:nth-child(1) .tp-dossier-tab { left: 22px; }
@media (min-width: 861px) and (max-width: 1080px), (max-width: 380px) {
  .tp-dossier-tab-more { display: none; }
}
.tp-dossier:nth-child(2) .tp-dossier-tab { left: 50%; transform: translateX(-50%); }
.tp-dossier:nth-child(3) .tp-dossier-tab { right: 22px; }
.tp-dossier-paper {
  position: absolute;
  z-index: 1;
  left: 9%;
  right: 12%;
  top: 16px;
  height: 70px;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(14,29,56,0.13) 9px 10px) 12% 20px / 60% 34px no-repeat,
    linear-gradient(180deg, #f7fafd, #dde5f1);
  transform: rotate(-1.6deg);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
}
.tp-dossier-paper { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.tp-dossier-paper--back {
  left: 26%;
  right: 5%;
  top: 24px;
  background: linear-gradient(180deg, #e9eff8, #cfd9e8);
  transform: rotate(3deg);
}
.tp-dossier-front::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 64px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 0 0 40px 40px;
  background: radial-gradient(60% 120% at 50% 0%, rgba(0,0,0,0.5), transparent 72%);
  pointer-events: none;
}
.tp-dossier-front {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 56px;
  padding: clamp(34px, 3.2vw, 42px) clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 28px);
  border-radius: 16px 16px 22px 22px;
  background:
    radial-gradient(90% 55% at 0% 0%, rgba(var(--tn-rgb), 0.16) 0%, transparent 65%),
    linear-gradient(180deg, #102142 0%, #0a1528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 40px 70px -40px rgba(0,0,0,0.95);
  -webkit-mask: radial-gradient(circle 26px at 50% 0, transparent 25px, #000 26px);
  mask: radial-gradient(circle 26px at 50% 0, transparent 25px, #000 26px);
}
/* The defining form, clipped to the folder front. */
.tp-dossier-chip {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 13px 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, var(--tp-paper-2));
  box-shadow: 0 10px 18px -10px rgba(0,0,0,0.9), inset 0 -2px 0 rgba(var(--tn-rgb), 0.9);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--tn-ink);
  transform: rotate(-2deg);
}
.tp-dossier h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.06;
  color: var(--white);
}
.tp-dossier-front > p { margin-top: 12px; font-size: 0.9688rem; line-height: 1.6; color: var(--gray-200); text-wrap: pretty; }
.tp-dossier-items { margin: 20px 0 26px; }
.tp-dossier-items li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #d8e1f2;
  text-wrap: pretty;
}
.tp-dossier-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(145deg, var(--tn), var(--tn-deep));
  box-shadow: 0 0 10px rgba(var(--tn-rgb), 0.45);
}
.tp-dossier .tp-go { margin-top: auto; align-self: flex-start; white-space: nowrap; }
.tp-swipe { display: none; }

/* Editorial conclusion: one centred line, not a second intro. */
.tp-who-close {
  position: relative;
  max-width: 940px;
  margin: clamp(88px, 9vw, 132px) auto 0;
  text-align: center;
}
/* The three folders, filed: their tabs side by side, the drawer closed. */
.tp-who-close-mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 30px;
  padding-bottom: 0;
  box-shadow: 0 2px 0 rgba(191,216,255,0.35);
}
.tp-who-close-mark i { display: block; width: 46px; height: 16px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 70%), var(--tn); box-shadow: 0 0 18px -4px rgba(var(--tn-rgb), 0.8); }
.tp-who-close-mark i:nth-child(2) { height: 20px; }
.tp-who-close-title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 3.6vw, 3.375rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
}
.tp-who-close-title em {
  font-style: italic;
  background: linear-gradient(95deg, #7fe0ff 0%, var(--tp-sky) 40%, var(--tp-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.tp-who-close-body {
  max-width: 54ch;
  margin: 20px auto 0;
  font-size: 1.0625rem;
  line-height: 1.64;
  color: #b9c8e2;
  text-wrap: pretty;
}

@media (max-width: 1180px) {
  .tp-dossier h3 { font-size: clamp(1.5rem, 2.3vw, 1.75rem); }
  .tp-dossier-chip { font-size: 1rem; }
  .tp-dossier-tab { font-size: 0.625rem; letter-spacing: 0.1em; padding: 0 14px; }
}

/* Narrow screens: the folders become a drawer you swipe through. */
@media (max-width: 860px) {
  .tp-dossiers {
    margin: 0 calc(var(--tp-gutter) * -1);
    padding: 0 var(--tp-gutter) 56px;
    margin-bottom: -56px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--tp-gutter);
    scrollbar-width: none;
  }
  .tp-dossiers::-webkit-scrollbar { display: none; }
  .tp-dossier-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 420px);
    gap: 16px;
  }
  .tp-dossier-list { align-items: start; }
  .tp-dossier { scroll-snap-align: start; }
  /* Inside a horizontal drawer the observer never sees the far cards. */
  .tp-page .tp-dossier.reveal { opacity: 1; transform: none; }
  .tp-dossier-list::after { content: ''; width: 1px; height: 1px; }
  .tp-dossier:last-child { scroll-snap-align: end; }
  .tp-dossier-tab { font-size: 0.625rem; }
  .tp-drawer { display: flex; flex-direction: column; }
  .tp-swipe {
    order: -1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 12px 8px 12px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(175,221,44,0.16), rgba(56,207,255,0.12) 55%, rgba(10,45,194,0.12));
    box-shadow: inset 0 0 0 1.5px rgba(175,221,44,0.5), 0 12px 30px -16px rgba(175,221,44,0.6);
  }
  .tp-swipe-pulse {
    position: relative;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tp-lime);
    box-shadow: 0 0 12px rgba(175,221,44,0.9);
  }
  .tp-swipe-pulse::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(175,221,44,0.7);
    animation: tpPulse 1.8s var(--ease-out) infinite;
  }
  .tp-swipe.is-swiped .tp-swipe-pulse::after { animation: none; opacity: 0; }
  .tp-swipe-cue {
    flex: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #dff5ff;
  }
  .tp-swipe-chevs { display: inline-flex; gap: 1px; animation: tpSwipeHand 2.6s var(--ease-out) infinite; }
  .tp-swipe-chevs { margin-left: 4px; }
  .tp-swipe-chevs i { width: 11px; height: 11px; border-top: 3px solid var(--tp-lime); border-right: 3px solid var(--tp-lime); transform: rotate(45deg); animation: tpChev 1.4s ease-in-out infinite; }
  .tp-swipe-chevs i:nth-child(2) { animation-delay: 0.18s; }
  .tp-swipe-chevs i:nth-child(3) { animation-delay: 0.36s; }
  .tp-swipe.is-swiped .tp-swipe-chevs, .tp-swipe.is-swiped .tp-swipe-chevs i { animation: none; }
  .tp-swipe-count { flex-shrink: 0; white-space: nowrap; font-size: 0.8125rem; font-weight: 700; color: #a9c3e6; font-variant-numeric: tabular-nums; }
  .tp-swipe-count b { color: var(--white); }
  .tp-dossier-dots { display: inline-flex; }
  .tp-dossier-dots button {
    box-sizing: content-box;
    width: 9px;
    height: 9px;
    padding: 9px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
    background-clip: content-box;
    transition: width 0.3s var(--ease-out), background 0.3s var(--ease-out);
  }
  .tp-dossier-dots button.is-on { width: 30px; background: linear-gradient(90deg, var(--tp-lime), var(--tp-sky)); background-clip: content-box; box-shadow: none; }
  .tp-dossier-dots button:focus-visible { outline: 2px solid var(--tp-sky); outline-offset: -2px; }
}
@keyframes tpSwipeHand { 0%, 55%, 100% { transform: translateX(0); } 25% { transform: translateX(8px); } }
@keyframes tpChev { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes tpPulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tp-swipe-pulse::after, .tp-swipe-chevs, .tp-swipe-chevs i { animation: none !important; }
  .tp-swipe-chevs i { opacity: 1; }
}

@media (max-width: 760px) {
  .tp-foldertab::after { left: -24px; right: -24px; }
  .tp-dossier h3 { font-size: 1.6875rem; }
  .tp-dossier-front { padding: 34px 22px 20px; }
  .tp-who-close { margin-top: 76px; }
  .tp-who-close-mark { margin-bottom: 24px; }
  .tp-who-close-mark i { width: 34px; height: 12px; }
  .tp-who-close-mark i:nth-child(2) { height: 15px; }
  .tp-who-close-title { font-size: min(2.375rem, calc((100vw - 2 * var(--tp-gutter)) / 12.3)); letter-spacing: -0.012em; }
  .tp-who-close-title .tp-line { white-space: nowrap; }
  .tp-who-close-body { font-size: 1rem; text-align: left; }
}
@media (max-width: 400px) {
  .tp-swipe-chevs { display: none; }
  .tp-swipe-cue { font-size: 0.75rem; letter-spacing: 0.08em; gap: 8px; white-space: nowrap; }
  .tp-swipe { gap: 8px; padding-left: 12px; }
  .tp-dossier-list { grid-auto-columns: 84%; }
}

/* ---- Worth knowing: a note set apart from the drawer ---- */
.tp-knowing {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 820px;
  margin: clamp(76px, 7vw, 104px) auto 0;
  padding: clamp(26px, 2.6vw, 34px) clamp(26px, 3vw, 40px);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(56,207,255,0.14), transparent 60%) padding-box,
    linear-gradient(180deg, rgba(18,36,74,0.9), rgba(10,22,48,0.9)) padding-box,
    linear-gradient(120deg, rgba(56,207,255,0.7), rgba(93,139,255,0.2) 50%, rgba(175,221,44,0.45)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 0 -1px rgba(4,12,32,0.95), 0 36px 60px -36px rgba(0,0,0,0.9);
}
/* A hairline above the note closes the drawer before the note begins. */
.tp-knowing::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(clamp(76px, 7vw, 104px) / -2);
  width: min(560px, 80vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(139,177,255,0.35), transparent);
}
/* The form itself, in miniature. */
.tp-knowing-form {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  width: 74px;
  height: 92px;
  padding: 12px 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff, #dfe7f2);
  box-shadow: 0 2px 0 #b9c7dc, 0 20px 30px -16px rgba(0,0,0,0.9);
  transform: rotate(-4deg);
}
.tp-knowing-form b { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; color: #1d3fbf; padding-bottom: 4px; border-bottom: 2px solid #1d3fbf; }
.tp-knowing-form i { display: block; height: 5px; border-radius: 3px; background: rgba(14,29,56,0.18); }
.tp-knowing-form i:nth-of-type(2) { width: 76%; }
.tp-knowing-form i:nth-of-type(3) { width: 58%; }
.tp-knowing-k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tp-sky); }
.tp-knowing-k::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--tp-sky); }
.tp-knowing-t { font-family: var(--font-serif); font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 500; line-height: 1.16; color: var(--white); text-wrap: balance; }
.tp-knowing-t em { font-style: italic; color: #9be8ff; }
.tp-knowing-b { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: #b9c8e2; text-wrap: pretty; }
@media (max-width: 760px) {
  .tp-knowing { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 18px; margin-top: 72px; padding: 24px 20px 24px; }
  .tp-knowing::before { top: -36px; }
  .tp-knowing-form { width: 58px; height: 72px; padding: 9px 8px; gap: 5px; }
  .tp-knowing-form b { font-size: 0.8125rem; }
  .tp-knowing-t { font-size: 1.5rem; }
  .tp-knowing-b { font-size: 0.9688rem; }
}

/* ---- The swipe cue, brighter: a slow glow and a sweep of light ---- */
@media (max-width: 860px) {
  .tp-swipe { overflow: hidden; isolation: isolate; animation: tpSwipeGlow 2.8s ease-in-out infinite; }
  .tp-swipe::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(205,239,106,0.22), transparent);
    transform: translateX(-120%) skewX(-18deg);
    animation: tpSwipeSweep 3.2s cubic-bezier(0.45, 0, 0.2, 1) 0.6s infinite;
    pointer-events: none;
  }
  .tp-swipe-cue { font-size: 0.875rem; color: #f2fbd9; text-shadow: 0 0 14px rgba(175,221,44,0.45); }
  .tp-swipe.is-swiped { animation: none; }
  .tp-swipe.is-swiped::after { animation: none; opacity: 0; }
}
@keyframes tpSwipeGlow {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(175,221,44,0.55), 0 12px 30px -16px rgba(175,221,44,0.6); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(175,221,44,0.9), 0 0 26px -2px rgba(175,221,44,0.45), 0 12px 30px -12px rgba(175,221,44,0.8); }
}
@keyframes tpSwipeSweep { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 90%, 100% { transform: translateX(320%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) {
  .tp-swipe, .tp-swipe::after { animation: none !important; }
}

/* =========================================================
   4. HOW IT WORKS — the TaxFunders client portal
   Personality: royal and cyan, with green for completed states. The
   portal is the command centre; what you can do in it stands around it
   as an ecosystem, not a grid of cards. The journey below is an indexed
   tax file; the convenience of "later" is a document moment of its own.
   Nothing here is clickable, so nothing is drawn as a button.
   ========================================================= */
.tp-sec--portal {
  background: linear-gradient(180deg, #0a1d5a 0%, #0a1a4a 30%, #081638 70%, #07112b 100%);
  box-shadow: inset 0 2px 0 rgba(56,207,255,0.55);
}
.tp-sec--portal::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 220px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(56,207,255,0.2), transparent 70%);
  pointer-events: none;
}
.tp-atmos--portal {
  background:
    radial-gradient(40% 36% at 50% 48%, rgba(2,193,255,0.14) 0%, transparent 72%),
    radial-gradient(46% 40% at 8% 20%, rgba(10,45,194,0.38) 0%, transparent 72%),
    radial-gradient(40% 40% at 94% 34%, rgba(41,51,130,0.45) 0%, transparent 72%),
    radial-gradient(30% 24% at 50% 100%, rgba(127,209,74,0.08) 0%, transparent 70%);
}

/* ---- Ecosystem: capabilities | portal | capabilities ---- */
.tp-eco {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1.52fr) minmax(0, 0.56fr);
  grid-template-areas: "l pm r";
  gap: clamp(24px, 2.6vw, 40px);
  align-items: center;
}
.tp-eco-list--l { grid-area: l; }
.tp-eco-list--r { grid-area: r; }
.tp-pm { grid-area: pm; }
.tp-eco-list { display: grid; gap: clamp(26px, 3vw, 40px); }
.tp-eco-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
.tp-eco-list b { grid-column: 2; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--white); }
.tp-eco-list li > span:not(.tp-eco-ico) { grid-column: 2; margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: #aebfdd; text-wrap: pretty; }
.tp-eco-ico {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--tn), var(--tn-deep));
  box-shadow: 0 0 0 6px rgba(var(--tn-rgb), 0.12), 0 14px 26px -12px rgba(var(--tn-rgb), 0.9);
  color: var(--tp-ink);
}
.tp-eco-ico .tp-ico { width: 20px; height: 20px; stroke-width: 2; }
/* Left column mirrors: text right-aligned, the icon faces the portal. */
.tp-eco-list--l li { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.tp-eco-list--l .tp-eco-ico { grid-column: 2; grid-row: 1 / span 2; }
.tp-eco-list--l b, .tp-eco-list--l li > span:not(.tp-eco-ico) { grid-column: 1; }
/* Light connectors into the portal. */
.tp-eco-list li::after {
  content: '';
  position: absolute;
  top: 22px;
  width: clamp(16px, 2.2vw, 32px);
  height: 2px;
  border-radius: 2px;
}
.tp-eco-list--l li::after { left: calc(100% + 6px); background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.9), rgba(var(--tn-rgb), 0)); }
.tp-eco-list--r li::after { right: calc(100% + 6px); background: linear-gradient(270deg, rgba(var(--tn-rgb), 0.9), rgba(var(--tn-rgb), 0)); }

/* ---- The portal (illustration) ---- */
.tp-pm { position: relative; margin: 0; }
.tp-pm::before {
  content: '';
  position: absolute;
  inset: 8% 6% -4%;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(2,193,255,0.28), transparent);
  filter: blur(30px);
  pointer-events: none;
}
/* A secure app window, not a phone: a glass bezel around the screen, a
   second window resting behind it, and a title bar with real presence. */
.tp-pm-layer {
  position: absolute;
  left: 7%;
  right: 7%;
  top: -22px;
  height: 60%;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(93,139,255,0.22), rgba(10,45,194,0.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(139,177,255,0.16);
  pointer-events: none;
}
.tp-pm-frame {
  position: relative;
  border: 1.5px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(180deg, #11264c, #0a162d) padding-box,
    linear-gradient(140deg, rgba(56,207,255,0.95), rgba(93,139,255,0.4) 36%, rgba(68,181,156,0.35) 66%, rgba(175,221,44,0.85)) border-box;
  box-shadow:
    0 0 0 9px rgba(16,34,74,0.78),
    0 0 0 10px rgba(139,177,255,0.28),
    0 12px 0 0 rgba(7,16,40,0.9),
    0 13px 0 0 rgba(139,177,255,0.16),
    0 90px 150px -60px rgba(0,0,0,0.95),
    0 0 120px -40px rgba(2,193,255,0.5);
  overflow: hidden;
}
.tp-pm-frame::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  pointer-events: none;
}
.tp-pm::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -46px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56,207,255,0.28), transparent);
  filter: blur(8px);
  pointer-events: none;
}
.tp-eco-bridge { display: none; }
.tp-pm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 16px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
    linear-gradient(90deg, rgba(10,45,194,0.62), rgba(10,45,194,0.2) 60%, rgba(56,207,255,0.14));
  box-shadow: inset 0 -1px 0 rgba(139,177,255,0.18);
}
.tp-pm-shield { width: 38px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.tp-pm-brand { flex: 1; display: flex; flex-direction: column; line-height: 1; }
.tp-pm-brand b { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--white); }
.tp-pm-brand span { margin-top: 5px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tp-sky); }
.tp-pm-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: rgba(127,209,74,0.12);
  box-shadow: inset 0 0 0 1px rgba(127,209,74,0.4);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c6ef9f;
}
.tp-pm-secure .tp-ico { width: 13px; height: 13px; stroke-width: 2.2; }
.tp-pm-user { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; color: var(--white); }
.tp-pm-nav { display: flex; gap: 22px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(5,11,26,0.4); }
.tp-pm-nav span { padding: 12px 0 11px; font-size: 0.8125rem; font-weight: 600; color: #8da2c8; }
.tp-pm-nav .is-on { color: var(--white); box-shadow: inset 0 -2px 0 var(--tp-sky); }
.tp-pm-body {
  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas: "wip side" "todo side";
  gap: 18px 20px;
  padding: 22px;
}
.tp-pm-wip, .tp-pm-todo {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: 16px;
}
/* Status: a cyan-lit panel. */
.tp-pm-wip {
  grid-area: wip;
  background: linear-gradient(135deg, rgba(56,207,255,0.16), rgba(10,45,194,0.16) 60%, rgba(10,45,194,0.06));
  box-shadow: inset 0 0 0 1px rgba(56,207,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* What I need to do: a lime-edged panel. */
.tp-pm-todo {
  grid-area: todo;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px rgba(175,221,44,0.26), inset 3px 0 0 var(--tp-lime);
}
.tp-pm-sechead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-pm-kdot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--tp-sky); box-shadow: 0 0 10px rgba(56,207,255,0.9); vertical-align: 1px; }
.tp-pm-todo .tp-pm-kdot { background: var(--tp-lime); box-shadow: 0 0 10px rgba(175,221,44,0.9); }
.tp-pm-chip { padding: 5px 10px; border-radius: 999px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-ink); background: var(--tp-sky); }
.tp-pm-chip--todo { background: var(--tp-lime); }
.tp-pm-todo li { position: relative; }
.tp-pm-todo .tp-pm-k { position: relative; }
.tp-pm-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; }
.tp-pm-k { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #f2f7ff; }
.tp-pm-title { margin-top: 10px; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; color: var(--white); }
.tp-pm-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}
.tp-pm-track::before, .tp-pm-track::after { content: ''; position: absolute; top: 7px; left: 12.5%; height: 2px; border-radius: 2px; }
.tp-pm-track::before { right: 12.5%; background: rgba(255,255,255,0.14); }
.tp-pm-track::after { width: 50%; background: linear-gradient(90deg, var(--tp-ok), var(--tp-sky)); }
.tp-pm-track li {
  position: relative;
  white-space: nowrap;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #8397bd;
}
.tp-pm-track li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #0a162d; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); }
.tp-pm-track .is-done { color: #b9e79a; }
.tp-pm-track .is-done::before { background: var(--tp-ok); box-shadow: none; }
.tp-pm-track .is-now { color: var(--white); }
.tp-pm-track .is-now::before { background: #0a162d; box-shadow: inset 0 0 0 3px var(--tp-sky), 0 0 0 5px rgba(56,207,255,0.2), 0 0 16px rgba(56,207,255,0.8); }
.tp-pm-todo ul { margin-top: 8px; }
.tp-pm-todo li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.875rem;
  color: #e1e9f7;
}
.tp-pm-todo li:first-child { border-top: 0; }
.tp-pm-state { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tp-sky); }
.tp-pm-todo .is-done .tp-pm-state { background: var(--tp-ok); box-shadow: none; color: var(--tp-ink); }
.tp-pm-todo .is-done .tp-pm-task { color: #8fa3c6; }
.tp-pm-state .tp-ico { width: 12px; height: 12px; stroke-width: 3; }
.tp-pm-tag { padding: 3px 9px; border-radius: 999px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.tp-pm-tag--ready { color: var(--tp-ink); background: var(--tp-sky); }
.tp-pm-tag--sign { color: #e8f8c4; box-shadow: inset 0 0 0 1.5px var(--tp-lime); }
.tp-pm-tag--done { color: #b9e79a; }
.tp-pm-tag--ask { color: #d6e3ff; box-shadow: inset 0 0 0 1.5px rgba(139,177,255,0.7); }
.tp-pm-msg { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.tp-pm-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, var(--tp-sky), var(--tp-royal)); font-size: 0.625rem; font-weight: 800; color: var(--white); }
.tp-pm-msg p { padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: rgba(56,207,255,0.1); font-size: 0.8125rem; line-height: 1.5; color: #d6e0f2; }
.tp-pm-msg b { display: block; margin-bottom: 3px; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--tp-sky); }
.tp-pm-tiles { position: relative; display: grid; gap: 10px; }
.tp-pm-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  font-size: 0.75rem;
  color: #a9bbdb;
}
.tp-pm-tile .tp-ico { width: 18px; height: 18px; color: var(--tp-sky); }
.tp-pm-tile b { display: block; font-size: 0.8125rem; color: var(--white); }
.tp-pm-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(175,221,44,0.16), rgba(175,221,44,0.04));
  box-shadow: inset 0 0 0 1px rgba(175,221,44,0.35);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #eef8d6;
}
.tp-pm-tiles .tp-pm-next { grid-column: 1 / -1; }
.tp-pm-next-k { padding: 3px 8px; border-radius: 999px; background: var(--tp-lime); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #16290a; }
.tp-pm-note { margin-top: 16px; text-align: center; font-size: 0.75rem; color: #8397bd; }

/* ---- Responsive ---- */
/* Below 1240px the six capabilities leave the portal's flanks and sit
   beneath it: a bridge line drops from the window to a label, then six
   glass tiles in two columns, getting your file in on the left and what
   comes back to you on the right. */
@media (max-width: 1240px) {
  .tp-eco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto repeat(3, auto);
    grid-template-areas: "pm pm" "bridge bridge" "l r" "l r" "l r";
    row-gap: 14px;
    column-gap: 14px;
    align-items: stretch;
  }
  .tp-pm { max-width: 820px; width: 100%; justify-self: center; margin-bottom: 0; }
  .tp-eco-bridge {
    grid-area: bridge;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 96px 0 18px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #d6e5ff;
  }
  /* The line of light from the window down to the label. */
  .tp-eco-bridge::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 34px;
    width: 2px;
    height: 44px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(56,207,255,0), var(--tp-sky) 60%, var(--tp-lime));
    box-shadow: 0 0 12px rgba(56,207,255,0.6);
  }
  .tp-eco-bridge span {
    position: relative;
    padding: 9px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56,207,255,0.16), rgba(175,221,44,0.1));
    box-shadow: inset 0 0 0 1px rgba(140,230,255,0.4), 0 0 24px -10px rgba(56,207,255,0.8);
  }
  .tp-eco-bridge::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 38px;
    height: 1px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(139,177,255,0.3) 25%, rgba(139,177,255,0.3) 75%, transparent);
  }
  .tp-eco-list { grid-row: 3 / span 3; display: grid; grid-template-rows: subgrid; gap: 0; position: relative; }
  .tp-eco-list li,
  .tp-eco-list--l li {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.6vw, 30px);
    border-radius: 20px;
    overflow: hidden;
    text-align: left;
    background:
      radial-gradient(90% 80% at 0% 0%, rgba(var(--tn-rgb), 0.2), transparent 62%),
      linear-gradient(180deg, rgba(22,40,84,0.72), rgba(10,22,50,0.72));
    box-shadow:
      inset 0 0 0 1px rgba(139,177,255,0.18),
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 3px 0 -1px rgba(4,12,32,0.9),
      0 24px 40px -28px rgba(0,0,0,0.9);
  }
  /* A lit tone edge along the top of each tile. */
  .tp-eco-list li::after,
  .tp-eco-list li + li::after,
  .tp-eco-list li:first-child::after {
    content: '';
    display: block;
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    width: auto;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--tn), rgba(var(--tn-rgb), 0));
  }
  .tp-eco-ico, .tp-eco-list--l .tp-eco-ico {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    box-shadow: 0 0 0 6px rgba(var(--tn-rgb), 0.1), 0 14px 26px -12px rgba(var(--tn-rgb), 0.9), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .tp-eco-list b { font-size: 1rem; }
  .tp-eco-list li > span:not(.tp-eco-ico) { margin-top: 6px; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .tp-pm-track li { font-size: 0.625rem; }
}
@media (max-width: 760px) {
  .tp-pm { max-width: min(100%, 400px); margin-inline: auto; margin-bottom: 0; }
  .tp-pm-layer { top: -14px; left: 9%; right: 9%; border-radius: 22px; }
  .tp-pm-frame { border-radius: 22px; box-shadow: 0 0 0 6px rgba(16,34,74,0.72), 0 0 0 7px rgba(139,177,255,0.22), 0 60px 110px -50px rgba(0,0,0,0.95), 0 0 90px -40px rgba(2,193,255,0.5); }
  .tp-pm-head { padding: 13px 14px; gap: 10px; }
  .tp-pm-shield { width: 32px; }
  .tp-pm-brand b { font-size: 1.3125rem; }
  .tp-pm-brand span { font-size: 0.5625rem; letter-spacing: 0.2em; }
  .tp-pm-secure { padding: 5px 8px 5px 7px; font-size: 0.625rem; }
  .tp-pm-user { width: 30px; height: 30px; font-size: 0.625rem; }
  .tp-pm-nav { gap: 14px; padding: 0 16px; }
  .tp-pm-nav span { padding: 10px 0 9px; font-size: 0.6875rem; }
  .tp-pm-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wip" "todo" "side"; gap: 12px; padding: 14px 12px 16px; }
  .tp-pm-wip, .tp-pm-todo { padding: 14px 14px 14px; border-radius: 14px; }
  .tp-pm-k { font-size: 0.6875rem; letter-spacing: 0.14em; }
  .tp-pm-title { font-size: 1.1875rem; margin-top: 8px; }
  .tp-pm-track { gap: 0; }
  .tp-pm-track li { font-size: 0.6875rem; }
  .tp-pm-track li:nth-child(2) { display: none; }
  .tp-pm-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-pm-track::before { left: 16.6%; right: 16.6%; }
  .tp-pm-track::after { left: 16.6%; width: 33.4%; }
  .tp-pm-todo li { font-size: 0.8125rem; gap: 7px; padding: 8px 0; }
  .tp-pm-tag { padding: 3px 8px; font-size: 0.625rem; letter-spacing: 0.04em; }
  .tp-pm-msg p { font-size: 0.75rem; }
  .tp-pm-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .tp-pm-tile { padding: 10px; font-size: 0.6875rem; }
  .tp-pm-note { margin-top: 18px; font-size: 0.6875rem; }

  .tp-eco { row-gap: 10px; column-gap: 10px; }
  .tp-eco-bridge { padding: 64px 0 12px; font-size: 0.6875rem; letter-spacing: 0.18em; }
  .tp-eco-bridge::before { top: 12px; height: 38px; }
  .tp-eco-bridge::after { bottom: 33px; }
  .tp-eco-list li, .tp-eco-list--l li, .tp-eco-list--r li { padding: 18px 14px 20px; border-radius: 17px; }
  .tp-eco-ico, .tp-eco-list--l .tp-eco-ico { width: 42px; height: 42px; margin-bottom: 13px; border-radius: 13px; }
  .tp-eco-ico .tp-ico { width: 19px; height: 19px; }
  .tp-eco-list b { font-size: 0.9375rem; line-height: 1.3; }
  .tp-eco-list li > span:not(.tp-eco-ico) { font-size: 0.8438rem; line-height: 1.5; }
}
@media (max-width: 400px) {
  .tp-pm-nav span:nth-child(4) { display: none; }
  .tp-pm-secure { display: none; }
}
/* The narrowest phones: one column of tiles, the icon beside its words. */
@media (max-width: 380px) {
  .tp-eco { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "pm" "bridge" "l" "r"; }
  .tp-eco-list { grid-row: auto; display: grid; gap: 10px; }
  .tp-eco-list li, .tp-eco-list--l li, .tp-eco-list--r li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px 14px;
  }
  .tp-eco-ico, .tp-eco-list--l .tp-eco-ico { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .tp-eco-list b, .tp-eco-list li > span:not(.tp-eco-ico) { grid-column: 2; }
}

/* =========================================================
   5. HOW YOUR RETURN MOVES FORWARD
   One file, seven states. The portal above is lit by interface; this
   section drops to ink and follows a single tax file along one rail, from
   a dashed outline (not started) to sealed and settled. Desktop reads it
   as a horizon with the stages alternating above and below; tablets and
   phones read it as a descent, the file on the left, the story on the right.
   ========================================================= */
.tp-sec--flow {
  background: linear-gradient(180deg, #040a18 0%, #050d20 50%, #040915 100%);
  box-shadow: inset 0 1px 0 rgba(139,177,255,0.14);
}
.tp-atmos--flow {
  background:
    radial-gradient(46% 34% at 12% 0%, rgba(10,45,194,0.3) 0%, transparent 72%),
    radial-gradient(60% 26% at 50% 56%, rgba(2,193,255,0.08) 0%, transparent 72%),
    radial-gradient(34% 30% at 94% 90%, rgba(175,221,44,0.07) 0%, transparent 70%);
}
/* The seam from the portal: the portal's light ends in a soft fall-off,
   and this section opens on a track line that runs to the page edge. */
.tp-sec--flow::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(8,22,56,0.9), transparent);
  pointer-events: none;
}
.tp-flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(64px, 7vw, 104px);
}
.tp-flowmark {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9fc9ee;
}
.tp-flowmark::after {
  content: '';
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, rgba(56,207,255,0.8), rgba(175,221,44,0.5) 70%, transparent);
}
.tp-flow-head .tp-h2 { text-align: left; }
.tp-flow-head .tp-body { max-width: 48ch; color: #bccbe6; }

/* ---- The journey ---- */
.tp-journey {
  --station: 112px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto var(--station) auto;
  counter-reset: stage;
}
.tp-stage {
  position: relative;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
}
/* The station: the file glyph on the rail. The rail is drawn per column so
   its colour moves from stage to stage without a seam. */
.tp-stage-station {
  grid-row: 2;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
.tp-stage-station::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.35), rgba(var(--tn-rgb), 0.85) 50%, rgba(var(--tn-rgb), 0.35));
}
.tp-stage:first-child .tp-stage-station::before { left: 50%; background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.85), rgba(var(--tn-rgb), 0.35)); }
.tp-stage:last-child .tp-stage-station::before { right: 50%; background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.35), rgba(var(--tn-rgb), 0.85)); }
.tp-stage-station::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tn-rgb), 0.22), transparent);
  pointer-events: none;
}
.tp-gf {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 88px;
  overflow: visible;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.55));
}
/* Glyph parts */
.tp-gf .gf-sheet { fill: #0f1f40; stroke: rgba(var(--tn-rgb), 0.9); stroke-width: 1.6; stroke-linejoin: round; }
.tp-gf .gf-back { fill: #0b1731; stroke: rgba(var(--tn-rgb), 0.45); }
.tp-gf .gf-fold { fill: none; stroke: rgba(var(--tn-rgb), 0.9); stroke-width: 1.6; stroke-linejoin: round; }
.tp-gf .gf-new { fill: #0c1934; stroke: rgba(var(--tn-rgb), 0.75); }
.tp-gf .gf-line { fill: none; stroke: rgba(220,232,255,0.55); stroke-width: 2.4; stroke-linecap: round; }
.tp-gf .gf-line--dim { stroke: rgba(220,232,255,0.28); }
.tp-gf .gf-rule { fill: none; stroke: rgba(var(--tn-rgb), 0.5); stroke-width: 1.2; stroke-dasharray: 2 2.4; }
.tp-gf .gf-acc { fill: var(--tn); }
.tp-gf .gf-acc-s { fill: none; stroke: var(--tn); stroke-width: 2.4; stroke-linecap: round; }
.tp-gf .gf-thick { stroke-width: 3; }
.tp-gf .gf-ink { fill: #081226; }
.tp-gf .gf-ink-s { fill: none; stroke: #081226; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-gf .gf-soft { fill: rgba(var(--tn-rgb), 0.2); }
.tp-gf .gf-box { fill: none; stroke: rgba(220,232,255,0.5); stroke-width: 1.5; }
.tp-gf .gf-box--on { fill: var(--tn); stroke: var(--tn); }
.tp-gf .gf-tick { fill: none; stroke: #081226; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tp-gf .gf-lens { fill: rgba(8,18,38,0.85); stroke: var(--tn); stroke-width: 2.4; }
.tp-gf .gf-sig { fill: none; stroke: var(--tn); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-gf .gf-base { fill: none; stroke: rgba(220,232,255,0.4); stroke-width: 1.3; stroke-dasharray: 2.4 2.4; }
.tp-gf .gf-slip { fill: #e9f1fb; stroke: rgba(var(--tn-rgb), 0.9); stroke-width: 1.4; stroke-linejoin: round; }
.tp-gf .gf-slip-l { fill: none; stroke: rgba(14,29,56,0.4); stroke-width: 2; stroke-linecap: round; }

/* The words: alternating above and below the rail on desktop. */
.tp-stage-copy {
  position: relative;
  width: 188%;
  max-width: 300px;
  text-align: center;
}
.tp-stage:nth-child(odd) .tp-stage-copy { grid-row: 1; align-self: end; padding-bottom: 26px; }
.tp-stage:nth-child(even) .tp-stage-copy { grid-row: 3; align-self: start; padding-top: 26px; }
/* A tick joins the words to their station. */
.tp-stage-copy::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1.5px;
  height: 18px;
  background: linear-gradient(180deg, rgba(var(--tn-rgb), 0), rgba(var(--tn-rgb), 0.9));
}
.tp-stage:nth-child(odd) .tp-stage-copy::after { bottom: 0; }
.tp-stage:first-child .tp-stage-copy { width: 150%; justify-self: start; text-align: left; }
.tp-stage:last-child .tp-stage-copy { width: 150%; justify-self: end; text-align: right; }
.tp-stage:first-child .tp-stage-copy::after { left: calc(100% / 3); }
.tp-stage:last-child .tp-stage-copy::after { left: auto; right: calc(100% / 3); }
.tp-stage:nth-child(even) .tp-stage-copy::after { top: 0; transform: rotate(180deg); }
.tp-stage-no {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--tn-text);
}
.tp-stage-name {
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 1.6vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
}
.tp-stage-what {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #d3def2;
  text-wrap: pretty;
}
.tp-stage-why {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--tn-text);
  text-wrap: pretty;
}
.tp-journey-note {
  max-width: 64ch;
  margin: clamp(48px, 5vw, 64px) auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8ea3c7;
}

@media (max-width: 1240px) {
  .tp-journey { --station: 100px; }
  .tp-stage-copy { width: 196%; }
  .tp-stage-what { font-size: 0.875rem; }
  .tp-stage-why { font-size: 1rem; }
}
/* Tablets and phones: the rail turns vertical. The file sits on the left,
   the story on the right; the rail runs between files, never through them. */
@media (max-width: 1023px) {
  .tp-flow-head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .tp-journey {
    display: block;
    max-width: 640px;
    margin-inline: auto;
  }
  .tp-stage {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 22px;
    justify-items: stretch;
    padding-bottom: 40px;
  }
  .tp-stage:last-child { padding-bottom: 0; }
  .tp-stage-station {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    width: 72px;
    height: 90px;
  }
  .tp-stage-station::before,
  .tp-stage:first-child .tp-stage-station::before,
  .tp-stage:last-child .tp-stage-station::before { display: none; }
  .tp-stage-station::after { width: 84px; height: 84px; }
  /* The rail: from under this file to the top of the next. */
  .tp-stage:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 35px;
    top: 96px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(var(--tn-rgb), 0.8), rgba(var(--tn-rgb), 0.18));
  }
  .tp-stage-copy,
  .tp-stage:nth-child(odd) .tp-stage-copy,
  .tp-stage:nth-child(even) .tp-stage-copy {
    grid-row: 1;
    grid-column: 2;
    width: auto;
    max-width: none;
    padding: 4px 0 0;
    text-align: left;
    align-self: start;
  }
  .tp-stage:first-child .tp-stage-copy,
  .tp-stage:last-child .tp-stage-copy { width: auto; justify-self: stretch; text-align: left; }
  .tp-stage-copy::after { display: none; }
  .tp-stage-no { margin-bottom: 4px; }
  .tp-stage-name { font-size: 1.5rem; }
  .tp-stage-what { font-size: 1rem; }
  .tp-stage-why { font-size: 1.0625rem; }
  .tp-journey-note { text-align: left; max-width: 640px; }
}
@media (max-width: 760px) {
  .tp-flow-head { margin-bottom: 52px; }
  .tp-flow-head .tp-h2 { text-align: left; }
  .tp-flowmark::after { max-width: none; }
  .tp-stage { grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; padding-bottom: 34px; }
  .tp-stage-station { width: 58px; height: 74px; }
  .tp-gf { width: 52px; height: 66px; }
  .tp-stage:not(:last-child)::after { left: 28px; top: 80px; }
  .tp-stage-name { font-size: 1.375rem; }
  .tp-stage-what { margin-top: 8px; font-size: 0.9688rem; }
  .tp-stage-why { font-size: 1rem; }
}

/* =========================================================
   NEED A COPY LATER — access, shown as the thing itself
   The portal's Documents view with the return pulled forward, crisp and
   substantial, a PDF badge and a download that has finished. No blank
   pages behind it.
   ========================================================= */
.tp-later {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  margin-top: clamp(96px, 10vw, 150px);
  padding: clamp(40px, 4.6vw, 68px);
  border-radius: 30px;
  background:
    radial-gradient(60% 90% at 0% 100%, rgba(10,45,194,0.5) 0%, transparent 70%),
    radial-gradient(50% 70% at 100% 0%, rgba(175,221,44,0.08) 0%, transparent 70%),
    linear-gradient(135deg, #0c1a3e 0%, #0a1531 60%, #081026 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(139,177,255,0.12), 0 60px 110px -60px rgba(0,0,0,0.9);
}
.tp-later-art { position: relative; min-height: 420px; }
/* The Documents view */
.tp-vault {
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
  border-radius: 18px;
  background: linear-gradient(180deg, #13284f, #0d1c3b);
  box-shadow: 0 0 0 1px rgba(139,177,255,0.2), 0 40px 70px -40px rgba(0,0,0,0.9);
  overflow: hidden;
}
.tp-vault-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(10,45,194,0.55), rgba(10,45,194,0.15));
  box-shadow: inset 0 -1px 0 rgba(139,177,255,0.16);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
}
.tp-vault-head .tp-ico { width: 18px; height: 18px; color: var(--tp-sky); }
.tp-vault-head em { margin-left: auto; font-style: normal; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #9fb6dc; }
.tp-vault-rows { padding: 6px 10px 12px; }
.tp-vault-rows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  border-radius: 10px;
  font-size: 0.8125rem;
  color: #c9d6ee;
}
.tp-vault-rows li + li { box-shadow: inset 0 1px 0 rgba(139,177,255,0.1); }
.tp-vault-rows li.is-on { background: rgba(175,221,44,0.1); box-shadow: inset 0 0 0 1px rgba(175,221,44,0.35); }
.tp-vault-rows b { display: block; font-weight: 700; color: var(--white); }
.tp-vault-rows i { display: block; margin-top: 2px; font-style: normal; font-size: 0.6875rem; color: #8ea3c7; }
.tp-vault-file { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 5px; background: #e9f0fa; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.06em; color: #b3261e; box-shadow: inset 0 -3px 0 rgba(179,38,30,0.8); }
/* The return, pulled forward */
.tp-rsheet {
  position: absolute;
  right: 0;
  top: 58px;
  width: 58%;
  padding: 22px 22px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 70%, #e8eff9 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,0.8) inset, 0 50px 80px -34px rgba(0,0,0,0.95), 0 18px 30px -18px rgba(0,0,0,0.6);
  color: var(--tp-paper-ink);
}
.tp-rsheet::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, var(--tp-royal), var(--tp-sky) 60%, var(--tp-lime));
}
.tp-rsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-rsheet-k { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tp-royal); }
.tp-rsheet-pdf { padding: 3px 7px; border-radius: 5px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; color: #ffffff; background: #c0342b; }
.tp-rsheet-t { margin-top: 12px; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.tp-rsheet-sub { margin-top: 3px; font-size: 0.6875rem; color: var(--tp-paper-muted); }
.tp-rsheet-rows { margin-top: 16px; }
.tp-rsheet-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  box-shadow: inset 0 -1px 0 rgba(14,29,56,0.1);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--tp-paper-muted);
}
.tp-rsheet-rows b { height: 7px; border-radius: 4px; background: rgba(14,29,56,0.16); width: var(--w, 80%); }
.tp-rsheet-rows li:last-child b { background: linear-gradient(90deg, var(--tp-teal), var(--tp-lime)); }
.tp-rsheet-foot { display: flex; justify-content: space-between; margin-top: 14px; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a98b3; }
/* The download, finished */
.tp-dl {
  position: absolute;
  right: 18px;
  bottom: -22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 9px;
  border-radius: 999px;
  background: linear-gradient(150deg, #e2fb86, #aedb2f);
  box-shadow: 0 16px 34px -12px rgba(175,221,44,0.8), inset 0 1px 0 rgba(255,255,255,0.7);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #16290a;
}
.tp-dl-key { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #16290a; color: var(--tp-lime); }
.tp-dl-key .tp-ico { width: 16px; height: 16px; stroke-width: 2.3; }

.tp-later-k { margin-bottom: 16px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tp-lime); }
.tp-later-title { font-family: var(--font-serif); font-size: clamp(2.5rem, 4vw, 3.75rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; color: var(--white); }
.tp-later-title em { font-style: italic; color: #cdef6a; }
.tp-later-body { margin-top: 22px; font-size: clamp(1.0313rem, 0.4vw + 0.92rem, 1.125rem); line-height: 1.66; color: #d3def2; text-wrap: pretty; }
.tp-later-fine { margin-top: 14px; font-size: 0.875rem; color: #9fb2d4; }

@media (max-width: 1080px) {
  .tp-later { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tp-later-art { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 760px) {
  .tp-later { margin-top: 84px; padding: 30px 20px 34px; border-radius: 24px; gap: 34px; }
  .tp-later-art { min-height: 520px; }
  .tp-vault { width: 88%; }
  .tp-vault-head { padding: 12px 14px; font-size: 0.8125rem; }
  .tp-vault-rows li { padding: 9px 6px; font-size: 0.75rem; gap: 10px; }
  .tp-vault-file { width: 28px; height: 34px; }
  .tp-rsheet { top: 196px; width: 78%; padding: 18px 16px 30px; }
  .tp-rsheet-t { font-size: 1.125rem; }
  .tp-rsheet-rows li { padding: 7px 0; font-size: 0.625rem; }
  .tp-dl { right: 12px; bottom: -20px; padding: 7px 13px 7px 7px; font-size: 0.6875rem; }
  .tp-dl-key { width: 26px; height: 26px; }
  .tp-later-title { font-size: clamp(2.375rem, 11vw, 2.875rem); }
}
@media (max-width: 400px) {
  .tp-later-art { min-height: 540px; }
  .tp-rsheet { width: 84%; }
  .tp-rsheet-t { font-size: 1rem; }
  .tp-vault-head em { display: none; }
}

/* =========================================================
   Pass 7: the journey, segmented and given depth
   ========================================================= */
/* The support statement: a numeral and a line, set as one piece. */
.tp-flow-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 460px;
  padding-left: 26px;
  box-shadow: inset 2px 0 0 rgba(56,207,255,0.5);
}
.tp-flow-num {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 6vw, 6rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.8;
  background: linear-gradient(160deg, #ffffff 0%, #9be8ff 40%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
}
.tp-flow-note p { font-family: var(--font-serif); font-size: clamp(1.375rem, 1.8vw, 1.75rem); font-weight: 500; line-height: 1.22; color: #eef4ff; text-wrap: balance; }
.tp-flow-note em { display: block; font-style: italic; color: #9be8ff; }

/* Each stage: its own glass panel, joined to its station. */
.tp-stage-copy {
  padding: 20px 20px 18px;
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--tn-rgb), 0.14), transparent 70%),
    linear-gradient(180deg, rgba(20,36,74,0.7), rgba(9,18,40,0.7));
  box-shadow:
    inset 0 0 0 1px rgba(139,177,255,0.16),
    inset 0 2px 0 -0.5px rgba(var(--tn-rgb), 0.7),
    0 3px 0 -1px rgba(3,9,24,0.9),
    0 26px 40px -28px rgba(0,0,0,0.95);
}
/* Panels on the same side of the rail share one height. */
@media (min-width: 1024px) {
  .tp-stage:nth-child(odd) .tp-stage-copy, .tp-stage:nth-child(even) .tp-stage-copy { align-self: stretch; display: flex; flex-direction: column; }
  .tp-stage:nth-child(odd) .tp-stage-copy { justify-content: flex-end; }
  .tp-stage-copy > .tp-stage-no { align-self: center; }
  .tp-stage:first-child .tp-stage-copy > .tp-stage-no { align-self: flex-start; }
  .tp-stage:last-child .tp-stage-copy > .tp-stage-no { align-self: flex-end; }
}
.tp-stage:nth-child(odd) .tp-stage-copy { margin-bottom: 26px; padding-bottom: 18px; }
.tp-stage:nth-child(even) .tp-stage-copy { margin-top: 26px; padding-top: 20px; }
.tp-stage:nth-child(odd) .tp-stage-copy::after { bottom: -26px; height: 26px; }
.tp-stage:nth-child(even) .tp-stage-copy::after { top: -26px; height: 26px; }
.tp-stage-no {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  margin-bottom: 10px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #06121c;
  background: linear-gradient(150deg, var(--tn), var(--tn-deep));
  box-shadow: 0 0 14px -4px rgba(var(--tn-rgb), 0.9);
}
.tp-stage-name { font-size: clamp(1.375rem, 1.6vw, 1.625rem); }
.tp-stage-why { margin-top: 10px; padding-top: 10px; box-shadow: inset 0 1px 0 rgba(139,177,255,0.14); }
/* The station: the file standing on a raised glass disc. */
.tp-stage-station::after {
  width: 92px;
  height: 92px;
  background: radial-gradient(circle at 50% 40%, rgba(var(--tn-rgb), 0.24), rgba(10,22,48,0.9) 62%, rgba(10,22,48,0) 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--tn-rgb), 0.35), 0 16px 26px -14px rgba(0,0,0,0.9);
}

@media (max-width: 1240px) {
  .tp-stage-copy { padding: 16px 14px 15px; }
  .tp-flow-note p { font-size: 1.375rem; }
}
/* Tablets and phones: a centred header; each stage a panel beside its file. */
@media (max-width: 1023px) {
  .tp-flow-head { justify-items: center; text-align: center; }
  .tp-flow-head .tp-h2 { text-align: center; }
  .tp-flowmark { justify-content: center; }
  .tp-flowmark::before { content: ''; flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(56,207,255,0.8)); }
  .tp-flowmark::after { max-width: 80px; }
  .tp-flow-note { margin-top: 10px; max-width: 520px; padding: 0; box-shadow: none; text-align: left; }
  .tp-stage-copy,
  .tp-stage:nth-child(odd) .tp-stage-copy,
  .tp-stage:nth-child(even) .tp-stage-copy { margin: 0; padding: 18px 18px 16px; }
  .tp-stage-station::after { width: 80px; height: 80px; }
}
@media (max-width: 760px) {
  .tp-flow-head { margin-bottom: 56px; }
  .tp-sec--flow .tp-flow-head .tp-h2 { font-size: clamp(2.5rem, 11.4vw, 3.125rem); line-height: 1; }
  .tp-flowmark { gap: 12px; font-size: 0.6875rem; letter-spacing: 0.18em; }
  .tp-flowmark::before, .tp-flowmark::after { max-width: 34px; }
  .tp-flow-note { grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin-top: 18px; }
  .tp-flow-num { font-size: 4.25rem; }
  .tp-flow-note p { font-size: 1.25rem; }
  .tp-stage { column-gap: 14px; padding-bottom: 22px; }
  .tp-stage-copy,
  .tp-stage:nth-child(odd) .tp-stage-copy,
  .tp-stage:nth-child(even) .tp-stage-copy { padding: 16px 16px 15px; border-radius: 16px; }
  .tp-stage-no { height: 22px; min-width: 30px; margin-bottom: 8px; font-size: 0.625rem; }
  .tp-stage:not(:last-child)::after { top: 82px; bottom: -4px; }
  .tp-stage-station::after { width: 66px; height: 66px; }
}

/* Need a copy later: desktop keeps the documents left and the message
   right; on phones the message leads. */
.tp-later { grid-template-areas: "art copy" "art fine"; align-items: center; row-gap: 0; }
.tp-later-art { grid-area: art; }
.tp-later-copy { grid-area: copy; align-self: end; }
.tp-later > .tp-later-fine { grid-area: fine; align-self: start; margin-top: 14px; }
@media (max-width: 1080px) {
  .tp-later { grid-template-areas: "copy" "art" "fine"; row-gap: 0; }
  .tp-later-copy { align-self: start; }
  .tp-later-art { margin-top: 36px; }
  .tp-later > .tp-later-fine { margin-top: 40px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(139,177,255,0.16); }
}

/* =========================================================
   6. THE TAXFUNDERS TAX TEAM
   A masthead (seal + name + rule of light), a headline and paragraph
   joined to the row below by a line of light, then three professional
   files standing on a lit stage: a toned folder behind with its own
   role tab, the photograph in front as the document, and a nameplate
   attached across the bottom edge. The lead file is larger and first.
   Light moves; nothing is laid over a face.
   ========================================================= */
.tp-sec--team {
  background: linear-gradient(180deg, #06121c 0%, #071a26 52%, #05111b 100%);
  box-shadow: inset 0 1px 0 rgba(68,181,156,0.35);
}
.tp-atmos--team {
  background:
    radial-gradient(42% 44% at 18% 62%, rgba(56,207,255,0.16) 0%, transparent 72%),
    radial-gradient(34% 40% at 52% 74%, rgba(68,181,156,0.14) 0%, transparent 72%),
    radial-gradient(34% 40% at 86% 70%, rgba(93,139,255,0.16) 0%, transparent 72%);
}

/* ---- The masthead ---- */
.tp-team-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-areas:
    "mark mark"
    "rule rule"
    "h2   body"
    "drop body";
  column-gap: clamp(32px, 5vw, 96px);
  align-items: start;
  margin-bottom: clamp(30px, 3vw, 48px);
}
.tp-teammark {
  grid-area: mark;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.7vw, 28px);
  margin: 0 0 clamp(20px, 2vw, 30px);
  width: fit-content;
}
/* The shield stands on its own: a field of light behind it, and a pass of
   light that rides its own silhouette. No plate, no ring. */
.tp-teammark-seal {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(74px, 7.2vw, 106px);
  height: auto;
  aspect-ratio: 180 / 156;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.tp-teammark-seal::before {
  content: '';
  position: absolute;
  inset: -48%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56,207,255,0.3) 0%, rgba(68,181,156,0.12) 40%, transparent 70%);
  animation: tpSealBreathe 6.4s ease-in-out infinite;
  pointer-events: none;
}
.tp-teammark-seal::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,0.58) 50%, transparent 70%);
  background-size: 300% 100%;
  background-position: 140% 0;
  -webkit-mask: url(../img/tax-preparation/tf-shield-180.png) center / contain no-repeat;
  mask: url(../img/tax-preparation/tf-shield-180.png) center / contain no-repeat;
  animation: tpSealSweep 7.5s cubic-bezier(0.45, 0, 0.2, 1) 1.6s infinite;
  pointer-events: none;
}
.tp-teammark-seal img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.68)) saturate(1.08) brightness(1.06);
  animation: tpSealLift 5.5s ease-in-out infinite;
}
@keyframes tpSealBreathe { 0%, 100% { opacity: 0.45; transform: scale(0.94); } 50% { opacity: 0.95; transform: scale(1.05); } }
@keyframes tpSealSweep { 0%, 58% { background-position: 140% 0; } 86%, 100% { background-position: -40% 0; } }
@keyframes tpSealLift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
/* The name: a small brand kicker over the team line. */
.tp-teammark-t { display: grid; gap: clamp(4px, 0.5vw, 9px); }
.tp-teammark-k {
  font-size: clamp(0.75rem, 1vw, 0.9375rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  line-height: 1;
  color: #9bdcff;
}
.tp-teammark-n {
  position: relative;
  font-size: clamp(1.75rem, 3.55vw, 3.375rem);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 0.95;
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.96) 50%, transparent 64%),
    linear-gradient(176deg, #cfeaff 0%, #6fd9d1 48%, #c6ec5f 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tpMarkPass 7s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}
@keyframes tpMarkPass {
  0%, 56% { background-position: 120% 0, 0 0; }
  88%, 100% { background-position: -20% 0, 0 0; }
}
/* The rule of light beneath, with a pass of brand light travelling it. */
.tp-teamrule {
  grid-area: rule;
  position: relative;
  display: block;
  height: 1px;
  margin: 0 0 clamp(28px, 3vw, 46px);
  background: linear-gradient(90deg, rgba(138,211,189,0.6) 0%, rgba(138,211,189,0.22) 58%, rgba(138,211,189,0.04) 100%);
  overflow: hidden;
}
.tp-teamrule i {
  position: absolute;
  top: -1px;
  left: 0;
  width: 12%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--tp-sky) 42%, var(--tp-lime) 72%, transparent);
  box-shadow: 0 0 16px 1px rgba(56,207,255,0.7);
  animation: tpRuleRun 9s cubic-bezier(0.5, 0, 0.3, 1) 0.6s infinite;
}
@keyframes tpRuleRun {
  0% { transform: translateX(-110%); opacity: 0; }
  10% { opacity: 1; }
  66% { transform: translateX(840%); opacity: 1; }
  74%, 100% { transform: translateX(880%); opacity: 0; }
}
.tp-sec--team .tp-h2 { grid-area: h2; color: #f2fbf8; }
.tp-sec--team .tp-h2 em {
  font-style: italic;
  background: linear-gradient(95deg, #b9f5e2 0%, #7ad8c1 45%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.tp-team-head .tp-body { grid-area: body; margin: 6px 0 0; max-width: 52ch; color: #c9ddd8; }
/* The line that carries the eye from the headline down into the files. */
.tp-team-drop {
  grid-area: drop;
  position: relative;
  display: block;
  min-height: clamp(76px, 7.6vw, 140px);
  margin-top: clamp(18px, 2vw, 28px);
}
.tp-team-drop::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, rgba(56,207,255,0.75), rgba(138,211,189,0.5) 45%, rgba(138,211,189,0.08));
  box-shadow: 0 0 14px 1px rgba(68,181,156,0.35);
}
.tp-team-drop::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, rgba(138,211,189,0.7), transparent);
  box-shadow: 0 0 12px 1px rgba(68,181,156,0.3);
}
/* Two index ticks, as on the edge of a file drawer. */
.tp-team-drop i::before, .tp-team-drop i::after {
  content: '';
  position: absolute;
  left: 4px;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(138,211,189,0.5), transparent);
}
.tp-team-drop i::before { top: 34px; }
.tp-team-drop i::after { top: 68px; }
.tp-team-drop i {
  position: absolute;
  left: -1px;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tp-sky);
  box-shadow: 0 0 16px 3px rgba(56,207,255,0.6);
  animation: tpDropRun 6s cubic-bezier(0.5, 0, 0.3, 1) 1s infinite;
}
@keyframes tpDropRun {
  0% { top: 0; opacity: 0; }
  14% { opacity: 1; }
  64% { top: calc(100% - 22px); opacity: 1; }
  80%, 100% { top: calc(100% - 16px); opacity: 0; }
}

/* ---- The row of files ---- */
.tp-team {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(22px, 2.6vw, 42px);
  align-items: end;
}
/* The lit stage they stand on. */
.tp-team-stage {
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -26px;
  height: 54%;
  background: radial-gradient(64% 100% at 50% 100%, rgba(68,181,156,0.17) 0%, rgba(56,207,255,0.07) 46%, transparent 74%);
  pointer-events: none;
}
/* The floor they share. */
.tp-team::after {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138,211,189,0.55) 16%, rgba(138,211,189,0.55) 84%, transparent);
  box-shadow: 0 0 26px 3px rgba(68,181,156,0.32);
  pointer-events: none;
}
.tp-member {
  position: relative;
  isolation: isolate;
  margin: 0;
  transform-origin: 50% 100%;
  transition: transform 0.65s var(--ease-out);
  --fb-pad: clamp(13px, 1.15vw, 19px);
  --fb-leaf: clamp(10px, 0.95vw, 15px);
  padding: var(--fb-pad) calc(var(--fb-pad) + var(--fb-leaf)) 0 var(--fb-pad);
}
/* The board: one surface, a cut edge along the bottom, a fold near the spine. */
.tp-member-folder {
  position: absolute;
  z-index: -1;
  inset: 0 var(--fb-leaf) 0 0;
  border-radius: 10px 16px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.05) 13%, transparent 38%),
    linear-gradient(158deg, rgba(var(--tn-rgb), 0.88) 0%, var(--tn-deep) 52%, rgba(6,18,36,0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset calc(var(--fb-pad) * 0.62) 0 0 calc(var(--fb-pad) * -0.62 + 1px) rgba(255,255,255,0.16),
    inset 0 -3px 0 rgba(3,10,24,0.42),
    inset 0 0 44px -16px rgba(3,10,24,0.6),
    0 34px 54px -34px rgba(var(--tn-rgb), 0.7),
    0 54px 84px -48px rgba(0,0,0,0.95);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
/* The leaf standing behind the board. */
.tp-member-folder::before {
  content: '';
  position: absolute;
  left: calc(var(--fb-pad) + 6px);
  right: calc(var(--fb-leaf) * -1);
  top: -9px;
  bottom: 38%;
  border-radius: 8px 12px 0 0;
  background: linear-gradient(162deg, rgba(var(--tn-rgb), 0.92) 0%, rgba(var(--tn-rgb), 0.42) 56%, rgba(6,18,36,0.92) 100%);
  box-shadow: 0 -8px 20px -12px rgba(0,0,0,0.9);
  transition: transform 0.6s var(--ease-out);
}
/* The documents inside: a few millimetres of their edge, nothing more. */
.tp-member-folder::after {
  content: '';
  position: absolute;
  left: 68%;
  right: calc(var(--fb-pad) * 0.55);
  top: -4px;
  height: 11px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #e4ebf4 0%, #cfd9e6 58%, #aeb9c9 100%);
  box-shadow: 0 -4px 10px -7px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Light crossing the board. */
.tp-member-sweep {
  position: absolute;
  inset: 0 var(--fb-leaf) 0 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.tp-member-sweep::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(-140%) skewX(-16deg);
  animation: tpFileSweep 8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.tp-member--a .tp-member-sweep::after { animation-delay: 1.4s; }
.tp-member--d .tp-member-sweep::after { animation-delay: 2.8s; }
@keyframes tpFileSweep { 0%, 72% { transform: translateX(-140%) skewX(-16deg); } 92%, 100% { transform: translateX(300%) skewX(-16deg); } }
/* The tab, die-cut from the top edge of the board. */
.tp-member-tab {
  position: absolute;
  left: clamp(14px, 1.6vw, 26px);
  bottom: 100%;
  margin: 0 0 -2px;
  padding: 9px 18px 12px 15px;
  border-radius: 9px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.08) 78%),
    linear-gradient(152deg, var(--tn) 0%, var(--tn-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), -10px -6px 22px -14px rgba(0,0,0,0.9);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  color: #06121c;
  transition: transform 0.6s var(--ease-out);
}
.tp-member-tab span { display: flex; align-items: center; gap: 9px; }
.tp-member-tab span::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #06121c;
  opacity: 0.68;
}
.tp-member--lead .tp-member-tab {
  padding: 11px 22px 14px 17px;
  font-size: 0.75rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.1) 78%),
    linear-gradient(96deg, var(--tp-sky), var(--tp-lime));
}
/* The photograph, seated in the folder. */
.tp-member-frame {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 2px 0 rgba(255,255,255,0.07),
    0 3px 6px -2px rgba(3,10,24,0.55),
    0 26px 42px -26px rgba(0,0,0,0.95);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.tp-member--lead .tp-member-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 2px 0 rgba(255,255,255,0.09),
    0 4px 8px -2px rgba(3,10,24,0.6),
    0 34px 54px -28px rgba(0,0,0,0.95);
}
/* Light travelling along the top edge of the print. */
.tp-member-edge {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 20%, rgba(255,255,255,0) 40%) 0 0 / 250% 100% no-repeat;
  animation: tpEdgeTravel 6.5s ease-in-out infinite;
  pointer-events: none;
}
.tp-member--a .tp-member-edge { animation-delay: 1.2s; }
.tp-member--d .tp-member-edge { animation-delay: 2.4s; }
@keyframes tpEdgeTravel { 0%, 100% { background-position: -60% 0; } 50% { background-position: 160% 0; } }
.tp-member-frame picture { display: contents; }
.tp-member-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ease-out);
}
/* The nameplate is the board's front panel. */
.tp-member-plate {
  position: relative;
  z-index: 2;
  display: block;
  margin: calc(var(--fb-pad) * -1.05) calc(var(--fb-pad) * -1) 0;
  padding: clamp(18px, 1.5vw, 26px) clamp(17px, 1.5vw, 24px) clamp(17px, 1.4vw, 24px);
  border-radius: 0 0 15px 15px;
  background:
    linear-gradient(180deg, rgba(var(--tn-rgb), 0.3) 0%, rgba(var(--tn-rgb), 0.1) 34%, rgba(var(--tn-rgb), 0.04) 68%, transparent 100%),
    linear-gradient(180deg, rgba(12,26,48,0.95) 0%, rgba(7,16,32,0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 -16px 28px -20px rgba(0,0,0,0.95);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
/* The cut lip where the panel meets the print. */
.tp-member-plate::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tn) 16%, rgba(var(--tn-rgb), 0.5) 64%, transparent);
  box-shadow: 0 0 18px rgba(var(--tn-rgb), 0.75);
  animation: tpPlateLip 5.6s ease-in-out infinite;
}
.tp-member--a .tp-member-plate::before { animation-delay: 1.2s; }
.tp-member--d .tp-member-plate::before { animation-delay: 2.4s; }
.tp-member--lead .tp-member-plate::before { background: linear-gradient(90deg, transparent, var(--tp-sky) 16%, var(--tp-lime) 62%, transparent); }
.tp-member-name {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.4375rem, 1.92vw, 2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: #ffffff;
}
.tp-member--lead .tp-member-name { font-size: clamp(1.75rem, 2.42vw, 2.4375rem); }
.tp-member-role {
  position: relative;
  display: block;
  margin-top: clamp(12px, 1vw, 16px);
  padding-top: clamp(10px, 0.9vw, 14px);
  font-size: clamp(0.6875rem, 0.82vw, 0.8125rem);
  font-weight: 800;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--tn-text);
}
.tp-member-role::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tn), rgba(var(--tn-rgb), 0));
  box-shadow: 0 0 12px rgba(var(--tn-rgb), 0.8);
}
.tp-member-role b { font-weight: 800; white-space: nowrap; }
.tp-member-role em { font-style: normal; }
.tp-member--lead .tp-member-role { color: #e2f8ff; }
.tp-member--lead .tp-member-role::before { background: linear-gradient(90deg, var(--tp-sky), rgba(56,207,255,0)); }
@keyframes tpPlateLip {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
/* Pointer: the file lifts, the leaf opens, the print breathes. */
@media (hover: hover) and (pointer: fine) {
  .tp-member:hover { transform: perspective(1200px) rotateX(2.4deg) translateY(-7px); }
  .tp-member:hover .tp-member-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 2px 0 rgba(255,255,255,0.1), 0 4px 9px -2px rgba(3,10,24,0.6), 0 44px 64px -28px rgba(0,0,0,0.95); }
  .tp-member:hover .tp-member-frame img { transform: scale(1.028); }
  .tp-member:hover .tp-member-plate { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 -16px 28px -20px rgba(0,0,0,0.95), 0 26px 44px -30px rgba(var(--tn-rgb), 0.8); }
  .tp-member:hover .tp-member-folder {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset calc(var(--fb-pad) * 0.62) 0 0 calc(var(--fb-pad) * -0.62 + 1px) rgba(255,255,255,0.22),
      inset 0 -3px 0 rgba(3,10,24,0.42),
      inset 0 0 44px -16px rgba(3,10,24,0.55),
      0 44px 64px -34px rgba(var(--tn-rgb), 0.85),
      0 62px 92px -48px rgba(0,0,0,0.95);
  }
  .tp-member:hover .tp-member-folder::before { transform: translate(5px, -6px); }
  .tp-member:hover .tp-member-tab { transform: translateY(-3px); }
}

@media (max-width: 1080px) {
  .tp-team-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "rule" "h2" "body" "drop";
  }
  .tp-team-head .tp-body { margin-top: 20px; max-width: none; }
  .tp-team-drop { min-height: 52px; margin-top: 22px; }
  .tp-team-drop i::before, .tp-team-drop i::after { display: none; }
  .tp-team { column-gap: 18px; }
  .tp-member { --fb-pad: 12px; --fb-leaf: 10px; }
  .tp-member-tab { padding: 8px 14px 11px 12px; font-size: 0.625rem; letter-spacing: 0.1em; }
  .tp-member--lead .tp-member-tab { padding: 9px 16px 12px 13px; font-size: 0.6875rem; }
  .tp-member-tab span { gap: 7px; }
  .tp-member-tab span::before { width: 6px; height: 6px; }
  .tp-member-plate { padding: 16px 14px 15px; }
  .tp-member-name { font-size: 1.375rem; }
  .tp-member--lead .tp-member-name { font-size: 1.625rem; }
  .tp-member-role { font-size: 0.6563rem; letter-spacing: 0.12em; margin-top: 11px; padding-top: 9px; }
  .tp-member-role::before { width: 32px; }
  /* Two deliberate lines, so "Tax Professional" is never broken. */
  .tp-member--lead .tp-member-role em { display: block; }
}
/* Phones: the same dossier, at phone sizes. */
@media (max-width: 760px) {
  /* ---- Masthead ---- */
  .tp-team-head { text-align: center; margin-bottom: clamp(34px, 9vw, 46px); }
  .tp-teammark {
    display: grid;
    justify-items: center;
    gap: clamp(14px, 4vw, 20px);
    margin: 0 auto clamp(18px, 5vw, 26px);
  }
  .tp-teammark-seal { width: clamp(88px, 24vw, 112px); }
  .tp-teammark-seal::before { inset: -54%; animation-duration: 6s; }
  .tp-teammark-seal img { filter: drop-shadow(0 12px 22px rgba(0,0,0,0.72)) saturate(1.08) brightness(1.06); }
  .tp-teammark-t { text-align: center; gap: clamp(7px, 2vw, 11px); }
  .tp-teammark-k { font-size: clamp(0.6875rem, 2.9vw, 0.8125rem); letter-spacing: 0.4em; text-indent: 0.4em; }
  .tp-teammark-n {
    font-size: clamp(2.375rem, 11.2vw, 3rem);
    letter-spacing: 0.012em;
    line-height: 0.94;
    animation-duration: 6.5s;
    animation-delay: 1s;
  }
  .tp-teamrule {
    width: min(74%, 300px);
    margin: 0 auto clamp(24px, 6vw, 32px);
    background: linear-gradient(90deg, transparent, rgba(138,211,189,0.55) 22%, rgba(138,211,189,0.55) 78%, transparent);
  }
  .tp-teamrule i { width: 26%; height: 2px; animation: tpRuleRunM 8.5s cubic-bezier(0.5, 0, 0.3, 1) 0.8s infinite; }
  .tp-sec--team .tp-h2 { font-size: clamp(2.0625rem, 8.4vw, 2.5rem); text-wrap: balance; }
  .tp-team-head .tp-body {
    text-align: center;
    max-width: 40ch;
    margin: 16px auto 0;
    font-size: 1rem;
    text-wrap: pretty;
  }
  .tp-team-drop { display: none; }

  /* ---- Three files ---- */
  .tp-team { grid-template-columns: minmax(0, 1fr); row-gap: clamp(60px, 16vw, 74px); }
  .tp-team-stage { height: 34%; bottom: -18px; }
  .tp-team::after { bottom: -18px; }
  .tp-member { --fb-pad: 13px; --fb-leaf: 11px; margin-top: 0; }
  .tp-member--lead { margin-top: 42px; }
  .tp-member-folder { border-radius: 10px 15px 15px 15px; }
  .tp-member-folder::after { left: 70%; top: -3px; height: 10px; }
  .tp-member-tab { left: 15px; padding: 9px 16px 12px 13px; font-size: 0.6875rem; letter-spacing: 0.13em; }
  .tp-member--lead .tp-member-tab { padding: 10px 18px 13px 14px; font-size: 0.75rem; letter-spacing: 0.12em; }
  .tp-member-frame { border-radius: 8px; }
  .tp-member-edge { left: 5px; right: 5px; }
  .tp-member-plate {
    margin: -14px calc(var(--fb-pad) * -1) 0;
    padding: clamp(18px, 5vw, 24px) clamp(15px, 4.4vw, 20px) clamp(17px, 4.6vw, 22px);
    border-radius: 0 0 14px 14px;
  }
  .tp-member-name { font-size: clamp(1.4375rem, 6.2vw, 1.6875rem); }
  .tp-member--lead .tp-member-name { font-size: clamp(1.75rem, 8vw, 2.1875rem); }
  .tp-member-role {
    margin-top: clamp(12px, 3.4vw, 16px);
    padding-top: clamp(10px, 2.8vw, 13px);
    font-size: clamp(0.6875rem, 2.9vw, 0.75rem);
    letter-spacing: 0.15em;
  }
  .tp-member-role::before { width: 40px; }
  .tp-member--lead .tp-member-role em { display: inline; }

  /* Angel and David: the print set into one side of the board, mirrored. */
  .tp-member--a, .tp-member--d { display: grid; grid-template-columns: 84% 16%; align-items: start; }
  .tp-member--d { grid-template-columns: 16% 84%; padding: var(--fb-pad) var(--fb-pad) 0 calc(var(--fb-pad) + var(--fb-leaf)); }
  .tp-member--a .tp-member-frame { grid-column: 1; grid-row: 1; }
  .tp-member--d .tp-member-frame { grid-column: 2; grid-row: 1; }
  .tp-member--a .tp-member-plate, .tp-member--d .tp-member-plate { grid-column: 1 / -1; grid-row: 2; }
  .tp-member--d .tp-member-folder { inset: 0 0 0 var(--fb-leaf); border-radius: 15px 10px 15px 15px; }
  .tp-member--d .tp-member-sweep { inset: 0 0 0 var(--fb-leaf); }
  .tp-member--d .tp-member-folder::before { left: calc(var(--fb-leaf) * -1); right: calc(var(--fb-pad) + 6px); border-radius: 12px 8px 0 0; }
  .tp-member--d .tp-member-folder::after { left: calc(var(--fb-pad) * 0.55); right: 70%; }
  .tp-member--d .tp-member-tab { left: auto; right: 15px; }
  .tp-member--d .tp-member-plate { text-align: right; }
  .tp-member--d .tp-member-role::before { left: auto; right: 0; background: linear-gradient(270deg, var(--tn), rgba(var(--tn-rgb), 0)); }
  .tp-member--d .tp-member-plate::before { background: linear-gradient(270deg, transparent, var(--tn) 16%, rgba(var(--tn-rgb), 0.5) 64%, transparent); }

  /* A tap presses the file into the page. */
  .tp-member:active .tp-member-frame { transform: translateY(2px) scale(0.995); }
}
@media (max-width: 400px) {
  .tp-member { --fb-pad: 11px; --fb-leaf: 9px; }
  .tp-member-tab, .tp-member--d .tp-member-tab { font-size: 0.625rem; letter-spacing: 0.1em; padding: 8px 13px 11px 11px; }
  .tp-member--lead .tp-member-tab { font-size: 0.6875rem; letter-spacing: 0.1em; padding: 9px 14px 12px 12px; }
  .tp-member--lead .tp-member-role em { display: block; }
  .tp-member--a, .tp-member--d { grid-template-columns: 86% 14%; }
  .tp-member--d { grid-template-columns: 14% 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-teammark-seal::before, .tp-teammark-seal::after, .tp-teammark-seal img,
  .tp-teammark-n, .tp-teamrule i, .tp-team-drop i,
  .tp-member-sweep::after, .tp-member-edge, .tp-member-plate::before { animation: none; }
  .tp-teamrule i, .tp-team-drop i, .tp-member-sweep::after { display: none; }
  .tp-member, .tp-member-frame, .tp-member-folder, .tp-member-folder::before, .tp-member-tab, .tp-member-plate, .tp-member-frame img { transition: none; }
}

/* =========================================================
   6. QUESTIONS & REVIEW — before you sign
   Personality: the progressive brand spectrum. A route of editorial verbs
   (Ask → File) whose light turns green toward signing; the return summary
   as a document with weight; and a full-width signature pledge.
   ========================================================= */
.tp-sec--review {
  background: linear-gradient(180deg, #12153d 0%, #0f1236 45%, #0a0c26 100%);
  box-shadow: inset 0 1px 0 rgba(93,139,255,0.4);
}
.tp-atmos--review {
  background:
    radial-gradient(42% 52% at 78% 40%, rgba(2,193,255,0.14) 0%, transparent 70%),
    radial-gradient(40% 50% at 4% 90%, rgba(10,45,194,0.22) 0%, transparent 70%),
    radial-gradient(40% 26% at 50% 100%, rgba(175,221,44,0.08) 0%, transparent 70%);
}
.tp-review {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 5vw, 92px);
  align-items: center;
}
.tp-review-copy .tp-body { max-width: 48ch; margin-top: 26px; }
.tp-qmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b9c8ff;
}
.tp-qmark span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(56,207,255,0.35), rgba(10,45,194,0.55));
  box-shadow: inset 0 0 0 1px rgba(139,177,255,0.45);
  color: #cfe0ff;
}
.tp-qmark .tp-ico { width: 15px; height: 15px; stroke-width: 2.2; }
.tp-sec--review .tp-h2 em { background: linear-gradient(95deg, #7fe0ff, var(--tp-teal) 60%, var(--tp-lime)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.tp-review-note {
  margin-top: 22px;
  max-width: 48ch;
  padding-left: 16px;
  box-shadow: inset 2px 0 0 rgba(175,221,44,0.6);
  font-size: 0.9375rem;
  line-height: 1.62;
  color: #b9c8e3;
  text-wrap: pretty;
}

.tp-summary { margin: 0; }
.tp-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: clamp(18px, 1.8vw, 24px) clamp(18px, 2.4vw, 30px) clamp(16px, 1.6vw, 20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(56,207,255,0.07), transparent);
  border-radius: 20px 20px 0 0;
}
.tp-route::before, .tp-route::after {
  content: '';
  position: absolute;
  top: calc(clamp(18px, 1.8vw, 24px) + 6px);
  left: 16%;
  height: 2px;
  border-radius: 2px;
}
.tp-route::before { right: 16%; background: rgba(255,255,255,0.16); }
.tp-route::after {
  width: 42%;
  background: linear-gradient(90deg, var(--tp-sky), var(--tp-royal-lt) 50%, var(--tp-teal));
  box-shadow: 0 0 12px rgba(56,207,255,0.6);
}
.tp-route li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tp-route-dot {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0d1a35;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28);
}
.tp-route .is-done .tp-route-dot { background: linear-gradient(145deg, var(--tn), var(--tn-deep)); box-shadow: none; }
.tp-route .is-now .tp-route-dot {
  width: 16px;
  height: 16px;
  background: #0d1a35;
  box-shadow: inset 0 0 0 3px var(--tn), 0 0 0 4px rgba(var(--tn-rgb), 0.18), 0 0 18px rgba(var(--tn-rgb), 0.7);
}
.tp-route-label {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.1;
  color: #8ea2c6;
}
.tp-route .is-done .tp-route-label { color: var(--tn-text); }
.tp-route .is-now .tp-route-label { color: var(--white); font-weight: 600; }

.tp-summary-doc { position: relative; }
.tp-summary-sheet { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(180deg, #14244a, #0b1629); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; }
.tp-summary-sheet--1 { transform: translate(14px, 14px) rotate(1.2deg); opacity: 0.85; }
.tp-summary-sheet--2 { transform: translate(28px, 26px) rotate(2.4deg); opacity: 0.5; }
.tp-summary-paper {
  position: relative;
  border: 2px solid transparent;
  border-radius: 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(56,207,255,0.035) 31px 32px) padding-box,
    linear-gradient(180deg, #102142, #0a1527) padding-box,
    linear-gradient(145deg, var(--tp-sky), rgba(93,139,255,0.55) 32%, rgba(68,181,156,0.55) 64%, var(--tp-lime)) border-box;
  box-shadow: 0 80px 150px -60px rgba(0,0,0,0.95), 0 0 110px -46px rgba(2,193,255,0.45);
}
.tp-summary-tag {
  position: absolute;
  z-index: 1;
  top: -30px;
  right: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #ffffff, var(--tp-paper-2));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-paper-ink);
  box-shadow: 0 -6px 16px -8px rgba(0,0,0,0.6);
}
.tp-summary-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(145deg, var(--tp-sky), var(--tp-royal)); }
.tp-summary-note { margin-top: 10px; font-size: 0.8125rem; line-height: 1.45; color: #9db3d6; }
.tp-summary-head {
  padding: 22px clamp(22px, 2.8vw, 34px) 20px;
  border-bottom: 1px solid rgba(56,207,255,0.18);
  background: linear-gradient(90deg, rgba(2,193,255,0.16), transparent 72%);
}
.tp-summary-k { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tp-sky); }
.tp-summary-title { margin-top: 6px; font-family: var(--font-serif); font-size: clamp(1.875rem, 2.5vw, 2.375rem); font-weight: 500; line-height: 1.02; color: var(--white); }
.tp-summary-lines { padding: 8px clamp(22px, 2.8vw, 34px) 10px; }
.tp-summary-lines > div {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.tp-summary-lines > div:first-child { border-top: 0; }
.tp-summary-lines dt { display: flex; align-items: center; gap: 12px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #c3cee4; }
.tp-summary-lines dt span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--tn), var(--tn-deep));
  box-shadow: 0 8px 18px -8px rgba(var(--tn-rgb), 0.9);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--tp-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.tp-summary-lines dd { margin: 0; font-size: 0.9688rem; font-weight: 500; line-height: 1.45; color: var(--white); text-wrap: pretty; }
.tp-summary-lines .tp-summary-result {
  margin: 4px calc(clamp(22px, 2.8vw, 34px) * -1) 0;
  padding: 15px clamp(22px, 2.8vw, 34px);
  border-top: 1px solid rgba(175,221,44,0.3);
  background: linear-gradient(90deg, rgba(175,221,44,0.13), transparent 80%);
}
.tp-summary-result dt { color: var(--tp-lime); }
.tp-summary-notes {
  margin: 0 clamp(22px, 2.8vw, 34px) 20px;
  padding: 15px 18px 15px 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(56,207,255,0.12), rgba(56,207,255,0.03));
  box-shadow: inset 3px 0 0 var(--tp-sky);
}
.tp-summary-notes-k { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tp-sky); }
.tp-summary-notes-k .tp-ico { width: 16px; height: 16px; }
.tp-summary-notes li { padding: 3px 0; font-family: var(--font-serif); font-size: 1.0625rem; font-style: italic; line-height: 1.4; color: #d6e0f2; }
.tp-summary-sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 17px clamp(22px, 2.8vw, 34px) 19px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 20px 20px;
  background: rgba(5,11,24,0.5);
}
.tp-summary-sign-line {
  flex: 1;
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(175,221,44,0.45);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  color: #c3cee4;
}
.tp-summary-sign-line .tp-ico { width: 17px; height: 17px; color: var(--tp-lime); }
.tp-summary-sign-state { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-sky); }

/* The thesis, directly under the headline: understand, prepare, review. */
.tp-pledge {
  position: relative;
  margin-top: 18px;
  padding-left: 20px;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.tp-pledge::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tp-sky), var(--tp-teal) 55%, var(--tp-lime));
}
.tp-pledge span { display: block; color: #dfe8f8; }
.tp-pledge span:last-child {
  font-style: italic;
  background: linear-gradient(95deg, #7fe0ff 0%, var(--tp-teal) 55%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}

/* Where each line came from. */
.tp-summary-src { display: block; margin-top: 3px; font-size: 0.75rem; font-weight: 500; font-style: italic; letter-spacing: 0.01em; color: #8fa8cf; }
.tp-summary-result .tp-summary-src { color: #c3e38a; }

/* The route: one line, stops that mean something. Done stops are filled
   and checked; the current stop is lit and haloed; the rest are open. */
.tp-route::after { width: 50%; }
.tp-route-dot { width: 22px; height: 22px; color: #06121c; }
.tp-route-dot .tp-ico { width: 12px; height: 12px; stroke-width: 3; }
.tp-route .is-done .tp-route-dot { box-shadow: 0 0 0 3px rgba(var(--tn-rgb), 0.16), 0 6px 14px -6px rgba(var(--tn-rgb), 0.9); }
.tp-route .is-now .tp-route-dot {
  width: 26px;
  height: 26px;
  margin-top: -2px;
  background: radial-gradient(circle, var(--tn) 0 4px, #0d1a35 5px);
  box-shadow: inset 0 0 0 3px var(--tn), 0 0 0 6px rgba(var(--tn-rgb), 0.16), 0 0 22px rgba(var(--tn-rgb), 0.8);
}
.tp-route li:not(.is-done):not(.is-now) .tp-route-dot { background: #0d1a35; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); }
.tp-route-label { font-size: 0.9375rem; }

/* A little more depth under the document. */
.tp-summary-sheet--1 { transform: translate(16px, 16px) rotate(1.4deg); opacity: 0.9; }
.tp-summary-sheet--2 { transform: translate(32px, 30px) rotate(2.8deg); opacity: 0.55; }
@media (min-width: 981px) {
  .tp-summary-doc { transform: perspective(1800px) rotateY(-5deg) rotateX(1.5deg); transform-origin: 30% 50%; }
}

@media (max-width: 1180px) {
  .tp-review { gap: 48px; }
}
@media (max-width: 980px) {
  .tp-review { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .tp-review-copy .tp-body, .tp-review-note { max-width: 62ch; }
  .tp-summary { max-width: 720px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .tp-review-copy { text-align: center; }
  .tp-review-copy .tp-qmark { margin-inline: auto; }
  .tp-review-copy .tp-body, .tp-review-note { text-align: left; margin-inline: 0; }
  .tp-route { padding: 18px 16px 14px; }
  .tp-route::before, .tp-route::after { top: 29px; }
  .tp-route::before { left: 8.33%; right: 8.33%; }
  .tp-route::after { left: 8.33%; width: 50%; }
  .tp-route-label { font-size: 0.75rem; }
  .tp-route-label { font-size: 0.9375rem; }
  .tp-route-dot { width: 22px; height: 22px; }
  .tp-route .is-now .tp-route-dot { width: 26px; height: 26px; }
  .tp-summary-src { font-size: 0.75rem; }
  .tp-route::before, .tp-route::after { top: 29px; }
  .tp-summary-sheet--1 { transform: translate(8px, 10px) rotate(1deg); }
  .tp-summary-sheet--2 { transform: translate(16px, 18px) rotate(2deg); }
  .tp-summary-tag { right: 18px; }
  .tp-summary-head { padding: 22px 18px 16px; }
  .tp-summary-lines { padding: 4px 18px 8px; }
  .tp-summary-lines > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; }
  .tp-summary-lines dd { padding-left: 42px; }
  .tp-summary-lines .tp-summary-result { margin: 4px -18px 0; padding: 14px 18px; }
  .tp-summary-notes { margin: 0 18px 16px; }
  .tp-summary-sign { padding: 16px 18px; }
  .tp-pledge { margin: 20px auto 0; display: inline-block; text-align: left; font-size: clamp(1.5rem, 6.4vw, 1.875rem); }
}
@media (max-width: 430px) {
  .tp-qmark { gap: 9px; font-size: 0.6875rem; letter-spacing: 0.1em; }
}
@media (max-width: 400px) {
  .tp-qmark { font-size: 0.625rem; letter-spacing: 0.07em; }
  .tp-route-label { font-size: 0.8125rem; }
  .tp-pledge { font-size: 1.4375rem; }
}

/* =========================================================
   8. WHAT TO GATHER — a modern folder system
   One file with four dividers. The selected divider is pulled forward and
   its colour carries into the sheet (cyan income, royal household, teal
   business, slate other). The sheet is crisp paper, not a notebook: a
   printed header and a gathering checklist with empty boxes, because these
   are things you may need, not things you've done. Without JavaScript the
   four sections are simply printed one after another.
   ========================================================= */
.tp-sec--gather {
  background:
    radial-gradient(50% 30% at 50% 0%, rgba(238,243,250,0.06) 0%, transparent 72%),
    radial-gradient(40% 40% at 50% 62%, rgba(56,207,255,0.08) 0%, transparent 72%),
    linear-gradient(180deg, #04070e 0%, #060b16 100%);
}
.tp-sec--gather .tp-h2--paper em { color: #a8bfff; }

/* Entry mark: a folder front with its four dividers rising behind it. */
.tp-divtab {
  position: relative;
  display: inline-flex;
  margin: 0 0 30px;
  padding-top: 12px;
}
.tp-divtab-edges { position: absolute; left: 14px; right: 14px; top: 0; display: flex; gap: 4px; }
.tp-divtab-edges i { flex: 1; height: 20px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 70%), var(--tn); }
.tp-divtab-edges i:nth-child(2) { margin-top: 3px; }
.tp-divtab-edges i:nth-child(3) { margin-top: -2px; }
.tp-divtab-edges i:nth-child(4) { margin-top: 5px; }
.tp-divtab-l {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px 11px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #16294f, #0d1a36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 26px -14px rgba(0,0,0,0.9);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #eaf2ff;
}
.tp-divtab-l .tp-ico { width: 17px; height: 17px; color: var(--tp-sky); }

/* ---- The folder ---- */
.tp-binder { position: relative; max-width: 1080px; margin: 0 auto; }
.tp-binder-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* The cue: compact, lit, impossible to miss. */
.tp-binder-cue { display: none; }
.tp-binder.is-tabbed .tp-binder-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 7px 14px 7px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(175,221,44,0.2), rgba(175,221,44,0.06));
  box-shadow: inset 0 0 0 1.5px rgba(175,221,44,0.55);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eaf8c8;
}
.tp-binder-cue-hand {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #e2fb86, #aedb2f);
  color: #16290a;
}
.tp-binder-cue-hand::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(175,221,44,0.7);
  animation: tpPulse 1.8s var(--ease-out) infinite;
}
.tp-binder.is-explored .tp-binder-cue-hand::after { animation: none; opacity: 0; }
.tp-binder-cue-hand .tp-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.tp-cue-point { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tp-cue-touch { display: none; }
  .tp-cue-point { display: inline; }
}

/* Dividers */
.tp-binder-tabs { display: none; }
.tp-binder.is-tabbed .tp-binder-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 0 18px;
}
.tp-binder-tabs [role="tab"] {
  position: relative;
  flex: 0 1 200px;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 16px 12px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(var(--tn-rgb), 0.34), rgba(var(--tn-rgb), 0.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(var(--tn-rgb), 0.3);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eef4ff;
  cursor: pointer;
  transition: margin 0.3s var(--ease-out), min-height 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.tp-binder-tabs [role="tab"]:hover { background: linear-gradient(180deg, rgba(var(--tn-rgb), 0.5), rgba(var(--tn-rgb), 0.22)); }
/* The selected divider, pulled forward. */
.tp-binder-tabs [role="tab"][aria-selected="true"] {
  margin-top: 0;
  min-height: 60px;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 58%), linear-gradient(150deg, var(--tn), var(--tn-deep));
  box-shadow: 0 -10px 26px -10px rgba(var(--tn-rgb), 0.9), inset 0 1px 0 rgba(255,255,255,0.4);
  color: var(--tp-ink);
}
.tp-binder-tabs [role="tab"]:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* The file body: two sheets behind, the selected sheet in front. */
.tp-binder-sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(28px, 4vw, 64px);
  padding: clamp(34px, 3.6vw, 48px) clamp(26px, 3.6vw, 52px) clamp(34px, 3.4vw, 46px);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--tp-paper) 55%, var(--tp-paper-2) 100%);
  color: var(--tp-paper-ink);
  box-shadow:
    0 2px 0 #cfd9e8,
    0 60px 100px -50px rgba(0,0,0,0.95),
    0 0 0 1px rgba(255,255,255,0.4);
}
.tp-binder-sheet::before,
.tp-binder-sheet::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 16px;
  right: 16px;
  bottom: -10px;
  height: 40px;
  border-radius: 0 0 18px 18px;
  background: #b9c7dc;
}
.tp-binder-sheet::after { left: 34px; right: 34px; bottom: -20px; background: #8fa1bf; }
.tp-binder-rings { display: none; }
.tp-bpanel { position: relative; }
/* Tabbed: the divider's letter, printed large and faint in the sheet's corner. */
.tp-binder.is-tabbed .tp-bpanel::after {
  content: attr(data-letter);
  position: absolute;
  right: -6px;
  top: -30px;
  font-family: var(--font-serif);
  font-size: clamp(7rem, 12vw, 10rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  color: rgba(var(--tn-rgb), 0.16);
  pointer-events: none;
}
.tp-bpanel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  box-shadow: inset 0 -2px 0 var(--tn);
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tp-paper-ink);
}
.tp-bpanel-no {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--tn), var(--tn-deep));
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--tp-ink);
}
.tp-bpanel-hint { display: none; }
/* A gathering checklist: empty boxes, crisp rows. */
.tp-bpanel-list li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid rgba(14,29,56,0.09);
  font-size: 0.9688rem;
  line-height: 1.5;
  color: var(--tp-paper-ink);
  text-wrap: pretty;
}
.tp-bpanel-list li:last-child { border-bottom: 0; }
.tp-bpanel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px var(--tn-ink), 0 2px 4px -2px rgba(14,29,56,0.4);
}

/* Tabbed: one sheet at a time, tinted by the selected divider. */
.tp-binder.is-tabbed .tp-binder-sheet {
  grid-template-columns: minmax(0, 1fr);
  border-radius: 6px 20px 20px 20px;
  background:
    linear-gradient(180deg, rgba(var(--tn-rgb), 0.16) 0%, rgba(var(--tn-rgb), 0) 34%),
    linear-gradient(180deg, #ffffff 0%, var(--tp-paper) 55%, var(--tp-paper-2) 100%);
  box-shadow:
    inset 0 4px 0 var(--tn),
    0 2px 0 #cfd9e8,
    0 60px 100px -50px rgba(0,0,0,0.95),
    0 0 90px -40px rgba(var(--tn-rgb), 0.7);
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.tp-binder.is-tabbed .tp-bpanel-title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); box-shadow: none; padding-bottom: 0; margin-bottom: 6px; }
.tp-binder.is-tabbed .tp-bpanel-hint { display: block; margin-bottom: 18px; font-size: 0.875rem; font-style: italic; color: var(--tp-paper-muted); }
.tp-binder.is-tabbed .tp-bpanel-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); }
.tp-bpanel:focus-visible { outline: 2px solid var(--tp-royal); outline-offset: 6px; border-radius: 6px; }

/* ---- Not sure what applies? The questions, then the answer ----
   Three questions rise out of the file above, run down three lines of
   light, meet at a single lit point, and that point opens the panel
   where a free consultation answers them. ---- */
.tp-ask {
  position: relative;
  max-width: 1080px;
  margin: clamp(96px, 9vw, 136px) auto 0;
  text-align: center;
}
.tp-ask::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  height: 170%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(2,193,255,0.1) 0%, transparent 72%);
  pointer-events: none;
  z-index: -1;
}
/* The thread up into the file the questions came from. */
.tp-ask-stem {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: clamp(34px, 4vw, 58px);
  background: repeating-linear-gradient(180deg, rgba(138,211,189,0.55) 0 5px, transparent 5px 13px);
}
/* The questions people bring, as the conversation's first lines. */
.tp-ask-bubbles::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -8% -6% -14%;
  background-image: radial-gradient(rgba(126,206,226,0.22) 1.1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 62% at 50% 50%, #000 0%, transparent 78%);
  pointer-events: none;
}
.tp-ask-bubbles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 26px);
  align-items: start;
  justify-items: center;
}
.tp-ask-bubbles li {
  position: relative;
  max-width: 330px;
  padding: 15px 22px 16px;
  border-radius: 20px 20px 20px 6px;
  background: linear-gradient(180deg, rgba(22,40,80,0.95), rgba(13,26,56,0.95));
  box-shadow: inset 0 0 0 1px rgba(var(--tn-rgb), 0.45), 0 20px 36px -22px rgba(0,0,0,0.9), 0 0 40px -22px rgba(var(--tn-rgb), 0.8);
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-style: italic;
  line-height: 1.25;
  text-align: left;
  color: #eef4ff;
  animation: tpAskFloat 7s ease-in-out infinite;
}
.tp-ask-bubbles li:nth-child(2) { margin-top: clamp(14px, 2vw, 32px); border-radius: 20px 20px 6px 20px; animation-delay: 1.2s; }
.tp-ask-bubbles li:nth-child(3) { margin-top: clamp(5px, 0.9vw, 14px); animation-delay: 2.4s; }
.tp-ask-bubbles li::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--tn); box-shadow: 0 0 10px rgba(var(--tn-rgb), 0.9); vertical-align: 2px; }
@keyframes tpAskFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Three lines of light, running down to one answer. */
.tp-ask-join {
  position: relative;
  display: block;
  /* The routing keeps its designed curvature: the box scales with the span. */
  aspect-ratio: 1000 / 118;
  height: auto;
  margin-top: clamp(10px, 1.4vw, 18px);
}
.tp-ask-join svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The phone-only connectors stay out of the desktop flow entirely. */
.tp-ask-bubbles .tp-ask-link, .tp-ask-join .tp-ask-mjoin { display: none; }
/* The conductor: always present, faint at the question, lit at the answer. */
.tp-ask-cond {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.tp-ask-djoin .tp-ask-cond { stroke: url(#tpRouteD); }
.tp-ask-mjoin .tp-ask-cond { stroke: url(#tpRouteM); }
.tp-ask-link--a .tp-ask-cond { stroke: url(#tpRouteA); }
.tp-ask-link--b .tp-ask-cond { stroke: url(#tpRouteB); }
/* The signal: a soft tail with a bright head, travelling together. */
.tp-ask-tail {
  fill: none;
  stroke: rgba(143,231,255,0.5);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 20 80;
  filter: blur(1.5px) drop-shadow(0 0 8px rgba(88,213,255,0.5));
  animation: tpRouteTail 5.4s cubic-bezier(0.38, 0, 0.28, 1) infinite;
}
.tp-ask-head {
  fill: none;
  stroke: #ecfdff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  filter: drop-shadow(0 0 7px rgba(170,242,255,0.95));
  animation: tpRouteHead 5.4s cubic-bezier(0.38, 0, 0.28, 1) infinite;
}
/* Desktop: the three questions fire almost together and converge. */
.tp-ask-l2.tp-ask-tail, .tp-ask-l2.tp-ask-head { animation-delay: 0.16s; }
.tp-ask-l3.tp-ask-tail, .tp-ask-l3.tp-ask-head { animation-delay: 0.32s; }
.tp-ask-mjoin .tp-ask-tail { stroke: rgba(196,240,150,0.5); filter: blur(1.5px) drop-shadow(0 0 8px rgba(175,221,44,0.5)); }
.tp-ask-mjoin .tp-ask-head { stroke: #f4ffd8; filter: drop-shadow(0 0 7px rgba(205,239,106,0.95)); }
@keyframes tpRouteTail {
  0% { stroke-dashoffset: 20; opacity: 0; }
  4% { opacity: 1; }
  26% { opacity: 1; }
  32%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes tpRouteHead {
  0% { stroke-dashoffset: 7; opacity: 0; }
  4% { opacity: 1; }
  26% { opacity: 1; }
  32%, 100% { stroke-dashoffset: -113; opacity: 0; }
}
/* The destination node, which acknowledges every arrival. */
.tp-ask-node {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f1ffb4 0%, var(--tp-lime) 60%, #78a412 100%);
  box-shadow: 0 0 24px 5px rgba(175,221,44,0.45);
  animation: tpNodeFlash 5.4s ease-out 0.1s infinite;
}
.tp-ask-node::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(175,221,44,0.55);
  animation: tpNodeArrive 5.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s infinite;
}
@keyframes tpNodeArrive {
  0%, 24% { transform: scale(0.5); opacity: 0; }
  31% { transform: scale(1); opacity: 0.95; }
  52%, 100% { transform: scale(2.2); opacity: 0; }
}
@keyframes tpNodeFlash {
  0%, 24% { box-shadow: 0 0 20px 3px rgba(175,221,44,0.35); }
  31% { box-shadow: 0 0 34px 9px rgba(175,221,44,0.85); }
  60%, 100% { box-shadow: 0 0 20px 3px rgba(175,221,44,0.35); }
}
/* The answer. */
.tp-ask-solve {
  position: relative;
  max-width: 790px;
  margin: 0 auto;
  padding: clamp(30px, 3.2vw, 48px) clamp(24px, 3vw, 52px) clamp(30px, 3vw, 46px);
  border-radius: 26px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(175,221,44,0.1), transparent 62%),
    linear-gradient(180deg, rgba(16,34,66,0.94), rgba(9,20,42,0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 44px 74px -44px rgba(0,0,0,0.95),
    0 0 110px -54px rgba(175,221,44,0.75);
}
/* The lit lip where the three lines land. */
.tp-ask-solve::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(62%, 420px);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--tp-lime), transparent);
  box-shadow: 0 0 16px rgba(175,221,44,0.7);
}
.tp-ask-k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tp-lime); }
.tp-ask-k::before, .tp-ask-k::after { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--tp-lime); }
.tp-ask-q {
  font-family: var(--font-serif);
  font-size: clamp(2.375rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
}
.tp-ask-q em { font-style: italic; color: var(--tp-sky); }
.tp-ask-a { margin: 18px auto 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.62; color: #c3d2ea; text-wrap: pretty; }
.tp-ask .tp-cta { margin-top: 30px; }

@media (max-width: 980px) {
  .tp-ask { max-width: 660px; }
  /* One column, stepped left and right, so the questions travel. */
  .tp-ask-bubbles { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 11vw, 52px); justify-items: stretch; }
  .tp-ask-bubbles li { max-width: 84%; margin-top: 0; }
  .tp-ask-bubbles li:nth-child(1) { justify-self: start; border-radius: 20px 20px 6px 20px; }
  .tp-ask-bubbles li:nth-child(2) { justify-self: end; margin-top: 0; border-radius: 20px 20px 20px 6px; }
  .tp-ask-bubbles li:nth-child(3) { justify-self: start; margin-top: 0; margin-left: 5%; border-radius: 20px 20px 20px 6px; }
  .tp-ask-stem { transform: translateX(-50%); }
  /* The signal relays question to question to the answer. */
  .tp-ask-bubbles .tp-ask-link {
    display: block;
    position: absolute;
    top: calc(100% - 4px);
    height: clamp(40px, 11vw, 52px);
    pointer-events: none;
  }
  .tp-ask-link--a { left: 61%; right: -166%; }
  .tp-ask-link--b { left: -207%; right: 64%; }
  .tp-ask-link svg, .tp-ask-join .tp-ask-mjoin { display: block; width: 100%; height: 100%; overflow: visible; }
  .tp-ask-link--b .tp-ask-tail, .tp-ask-link--b .tp-ask-head { animation-delay: 1.15s; }
  .tp-ask-mjoin .tp-ask-tail, .tp-ask-mjoin .tp-ask-head { animation-delay: 2.3s; }
  .tp-ask-tail { stroke-width: 3; }
  .tp-ask-head { stroke-width: 1.9; }
  /* The node each leg lands on. */
  .tp-ask-link i {
    position: absolute;
    bottom: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tn);
    animation: tpLinkFlash 5.4s ease-out infinite;
  }
  .tp-ask-link--a i { left: calc(77% - 4px); }
  .tp-ask-link--b i { left: calc(23% - 4px); animation-delay: 1.15s; }
  .tp-ask-link i::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(var(--tn-rgb), 0.55);
    animation: tpNodeArrive 5.4s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }
  .tp-ask-link--b i::after { animation-delay: 1.15s; }
  .tp-ask-join { height: clamp(62px, 17vw, 78px); aspect-ratio: auto; margin-top: 0; z-index: 3; }
  .tp-ask-join .tp-ask-djoin { display: none; }
  .tp-ask-node { width: 16px; height: 16px; bottom: -8px; animation-delay: 2.4s; }
  .tp-ask-node::after { animation-delay: 2.4s; }
  .tp-ask-node::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    margin: 4px 0 0 -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid rgba(190,232,74,0.95);
    filter: drop-shadow(0 2px 6px rgba(175,221,44,0.7));
    animation: tpAskArrow 2.6s ease-in-out infinite;
  }
  /* The panel is the destination. */
  .tp-ask-solve { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 0 44px 74px -44px rgba(0,0,0,0.95), 0 0 120px -46px rgba(175,221,44,0.85); }
  .tp-ask-solve::before { width: min(72%, 420px); animation: tpAskLip 5s ease-in-out infinite; }
}
@keyframes tpAskBead {
  0% { stroke-dashoffset: 8; opacity: 0; }
  12% { opacity: 1; }
  70% { stroke-dashoffset: -92; opacity: 1; }
  82%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes tpAskArrow {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(3px); opacity: 1; }
}
@keyframes tpAskLip {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
/* Phones */
@media (max-width: 760px) {
  .tp-divtab-l { padding: 10px 18px 10px 14px; font-size: 0.6875rem; }
  .tp-binder-top { display: block; text-align: center; }
  .tp-binder.is-tabbed .tp-binder-cue { margin-bottom: 14px; }
  .tp-binder.is-tabbed .tp-binder-tabs { gap: 4px; padding: 0 6px; }
  .tp-binder-tabs [role="tab"] { flex: 1 1 auto; min-height: 46px; padding: 9px 6px 10px; font-size: 0.6875rem; letter-spacing: 0.04em; border-radius: 12px 12px 0 0; }
  .tp-binder-tabs [role="tab"][aria-selected="true"] { min-height: 58px; }
  .tp-binder-sheet { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 28px 20px 26px; }
  .tp-binder.is-tabbed .tp-binder-sheet { border-radius: 6px 6px 18px 18px; min-height: 360px; }
  .tp-binder.is-tabbed .tp-bpanel-list { grid-template-columns: minmax(0, 1fr); }
  .tp-bpanel-title { font-size: 1.5rem; }
  .tp-binder.is-tabbed .tp-bpanel-title { font-size: 1.75rem; }
  .tp-bpanel-list li { padding-left: 32px; font-size: 0.9375rem; }
  /* Phones: the questions sit closer, so the connector boxes tighten. */
  .tp-ask-link--a { left: 34%; right: -22%; }
  .tp-ask-link--b { left: -22%; right: 34%; }
  .tp-ask { margin-top: 84px; }
  .tp-ask-q { font-size: clamp(1.875rem, 9vw, 2.4375rem); }
  .tp-ask .tp-cta { width: 100%; animation: tpAskCtaGlow 4.4s ease-in-out infinite; }
  .tp-ask .tp-cta::after { animation-duration: 4.2s; }
  .tp-ask-bubbles li { font-size: clamp(1.0625rem, 4.6vw, 1.1875rem); padding: 15px 19px 16px; }
  .tp-ask-stem { height: clamp(30px, 8vw, 46px); }
  .tp-ask-solve { padding: 32px 16px 34px; border-radius: 22px; }
  .tp-ask-k { margin-bottom: 14px; letter-spacing: 0.16em; }
  .tp-ask-k::before, .tp-ask-k::after { width: 16px; }
  .tp-ask-a { margin-top: 16px; }
}
@media (max-width: 400px) {
  .tp-binder-tabs [role="tab"] { padding-inline: 4px; letter-spacing: 0.02em; font-size: 0.625rem; }
  /* The eyebrow holds one line between its two rules. */
  .tp-ask-k { font-size: 0.6875rem; letter-spacing: 0.11em; gap: 8px; }
  .tp-ask-k::before, .tp-ask-k::after { width: 14px; }
  .tp-ask-solve { padding: 30px 13px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-binder-cue-hand::after, .tp-ask-bubbles li, .tp-ask-node, .tp-ask-node::after,
  .tp-ask-tail, .tp-ask-head, .tp-ask-link i, .tp-ask-link i::after, .tp-ask-node::before,
  .tp-ask-solve::before, .tp-ask .tp-cta { animation: none; }
  .tp-ask-tail, .tp-ask-head { display: none; }
  .tp-binder-tabs [role="tab"], .tp-binder.is-tabbed .tp-binder-sheet { transition: none; }
}
@keyframes tpAskCtaGlow {
  0%, 100% { filter: drop-shadow(0 10px 20px rgba(56,207,255,0.26)); }
  50% { filter: drop-shadow(0 14px 30px rgba(56,207,255,0.52)); }
}
@keyframes tpLinkFlash {
  0%, 24% { box-shadow: 0 0 12px 1px rgba(var(--tn-rgb), 0.5); }
  31% { box-shadow: 0 0 22px 6px rgba(var(--tn-rgb), 0.95); }
  60%, 100% { box-shadow: 0 0 12px 1px rgba(var(--tn-rgb), 0.5); }
}

/* =========================================================
   8. SELF-EMPLOYED — records into a return
   Personality: teal / green / lime on a dark green ground. The pain is a
   ruled sheet of the questions self-employed people ask; the answer is
   four physical documents on one light path; the brand moment is an
   integrity signature.
   ========================================================= */
.tp-sec--self { padding-bottom: 0; }
.tp-sec--self {
  background:
    radial-gradient(50% 40% at 88% 16%, rgba(68,181,156,0.12) 0%, transparent 72%),
    radial-gradient(46% 36% at 10% 70%, rgba(56,207,255,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #04131c 0%, #062029 55%, #04111a 100%);
  box-shadow: inset 0 1px 0 rgba(68,181,156,0.28);
}
.tp-sec--self .tp-h2 em { color: #86dcd0; }
.tp-self-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5.6vw, 96px);
  align-items: center;
}
.tp-self-problem {
  margin-top: 28px;
  max-width: 50ch;
  font-size: clamp(1.125rem, 0.5vw + 0.95rem, 1.3125rem);
  line-height: 1.55;
  color: #e3ecf6;
  text-wrap: pretty;
}
.tp-self-problem em { display: block; margin-top: 10px; font-style: normal; color: #9fe3cf; }

/* The pain: a ruled sheet of the questions self-employed people ask. */
.tp-qledger {
  position: relative;
  margin: 0;
  padding: 30px 30px 30px 60px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 44px, rgba(214,69,69,0.35) 44px, rgba(214,69,69,0.35) 45.5px, transparent 45.5px),
    linear-gradient(180deg, #ffffff 0%, var(--tp-paper) 30%, var(--tp-paper-2) 100%);
  box-shadow: 0 60px 100px -50px rgba(0,0,0,0.95), 12px 12px 0 -4px rgba(220,229,241,0.18);
  transform: rotate(1.4deg);
}
.tp-qledger-clip {
  position: absolute;
  left: 34px;
  top: -20px;
  width: 26px;
  height: 62px;
  border-radius: 13px;
  box-shadow: inset 0 0 0 3.5px #9fb0cb, 0 8px 14px -8px rgba(0,0,0,0.7);
}
.tp-qledger-clip::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  top: 10px;
  bottom: 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #76879f;
}
.tp-qledger-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, transparent 50%, #c9d5e6 50%, #aebdd3 100%);
  box-shadow: -4px -4px 10px -6px rgba(0,0,0,0.35);
}
.tp-qledger-k { padding-left: 26px; text-wrap: balance; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #17665c; }
.tp-qledger ul { margin-top: 12px; }
.tp-qledger li {
  position: relative;
  padding: 16px 0 9px;
  border-bottom: 1px solid rgba(29,63,191,0.16);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  color: var(--tp-paper-ink);
}
.tp-qledger li em { font-style: italic; font-weight: 700; color: #17665c; }
.tp-qledger li:last-child { padding-right: 44px; }
.tp-qledger li::before {
  content: '?';
  content: '?' / '';
  position: absolute;
  left: -42px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(68,181,156,0.16);
  box-shadow: inset 0 0 0 1.5px rgba(23,102,92,0.6);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 800;
  color: #17665c;
}

.tp-page .tp-qledger.reveal { transform: translateY(14px) rotate(1.4deg); }
.tp-page .tp-qledger.reveal.revealed { transform: rotate(1.4deg); }

/* The records behind the business: a centred editorial hinge. The line of
   light drops out of it and becomes the ledger the four stages stand on. */
.tp-records {
  position: relative;
  max-width: 780px;
  margin: clamp(96px, 9vw, 136px) auto 0;
  text-align: center;
}
.tp-records-k {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  color: #bdeedd;
  text-wrap: balance;
}
.tp-records-k::before, .tp-records-k::after { content: ''; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, rgba(122,216,193,0.8)); }
.tp-records-k::after { background: linear-gradient(90deg, rgba(122,216,193,0.8), transparent); }
.tp-records-body { max-width: 58ch; margin: 18px auto 0; font-size: clamp(1.0625rem, 0.4vw + 0.94rem, 1.1875rem); line-height: 1.66; color: #c9dad4; text-wrap: pretty; }
.tp-records::after {
  content: '';
  display: block;
  width: 2px;
  height: clamp(44px, 4.4vw, 64px);
  margin: 30px auto 0;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(68,181,156,0), var(--tp-teal));
  box-shadow: 0 0 14px rgba(68,181,156,0.6);
}

/* ---- Four stages on one ledger ---- */
.tp-ledgerflow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: 0;
  padding-top: 34px;
  counter-reset: lf;
}
/* The ledger: one line across the top of the four stages. */
.tp-ledgerflow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(68,181,156,0.2), var(--tp-teal) 12%, var(--tp-ok) 62%, var(--tp-lime) 92%, rgba(175,221,44,0.2));
  box-shadow: 0 0 16px rgba(68,181,156,0.55);
}
.tp-lf { position: relative; display: flex; flex-direction: column; counter-increment: lf; }
/* Each stage hangs from the ledger by its node. */
.tp-lf::before {
  content: '';
  position: absolute;
  left: 0;
  top: -40px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #061c26;
  box-shadow: inset 0 0 0 3px var(--tn), 0 0 14px rgba(var(--tn-rgb), 0.9);
}
.tp-lf-verb {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--font-serif);
  font-size: clamp(2.375rem, 3.2vw, 3.25rem);
  font-style: italic;
  line-height: 1;
  color: var(--tn-text);
}
.tp-lf-verb::before {
  content: counter(lf, decimal-leading-zero);
  font-family: var(--font);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(var(--tn-rgb), 0.85);
  transform: translateY(-0.6em);
}
/* The scene: objects standing on a pool of light, not in a box. */
.tp-lf-art { position: relative; z-index: 1; aspect-ratio: 4 / 3.3; max-width: 420px; }
.tp-lf-art::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 4%;
  bottom: -14%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tn-rgb), 0.3), transparent);
  filter: blur(6px);
}
/* Paper: a real edge, a contact shadow and an ambient one. */
.tp-lf-sheet, .tp-lf-stmt, .tp-lf-log, .tp-lf-1040, .tp-lf-schc, .tp-lf-receipt {
  position: absolute;
  --r: 0deg;
  transform: rotate(var(--r)) translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  padding: 14px 14px 12px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #f4f7fb 0%, #e3eaf4 100%);
  color: var(--tp-paper-ink);
  box-shadow:
    inset 0 0 0 1px rgba(14,29,56,0.06),
    inset 0 -2px 0 rgba(14,29,56,0.05),
    0 1px 2px rgba(0,0,0,0.35),
    0 26px 44px -22px rgba(0,0,0,0.9);
}
.tp-lf-sheet { inset: 0; overflow: hidden; }
.tp-lf-k, .tp-lf-stmt > i, .tp-lf-log > i, .tp-lf-1040 > i, .tp-lf-schc > i, .tp-lf-receipt > i {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--tn-ink);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tn-ink);
}
.tp-lf-k em { font-style: normal; font-weight: 700; letter-spacing: 0.06em; color: var(--tp-paper-muted); }

/* Organize: a profit & loss summary */
.tp-lf-art--pl .tp-lf-sheet { display: flex; flex-direction: column; justify-content: space-between; --r: -1.6deg; }
.tp-lf-art--pl .tp-lf-k { margin-bottom: 4px; }
.tp-lf-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 3.5px 0; }
.tp-lf-row i { font-size: 0.6875rem; font-style: normal; font-weight: 600; color: var(--tp-paper-muted); }
.tp-lf-row b { display: block; width: var(--w); height: 8px; border-radius: 4px; background: #a6b5cf; }
.tp-lf-row--in b { background: linear-gradient(90deg, var(--tp-teal), #2d9a86); }
.tp-lf-row--net { margin-top: 7px; padding-top: 8px; border-top: 3px double rgba(14,29,56,0.35); }
.tp-lf-row--net i { color: var(--tp-paper-ink); font-weight: 800; }
.tp-lf-row--net b { background: linear-gradient(90deg, var(--tp-ok), var(--tp-green)); }

/* Document: a statement, a receipt and a mileage log */
.tp-lf-stmt { left: 38%; right: 0; top: 0; height: 68%; --r: 3.5deg; }
.tp-lf-stmt > i { border-bottom-width: 0; margin-bottom: 8px; padding: 6px 8px; border-radius: 3px; background: #17665c; color: #ffffff; }
.tp-lf-tbl { display: grid; gap: 6px; }
.tp-lf-tbl b { display: grid; grid-template-columns: 1fr 34%; gap: 8px; height: 5px; }
.tp-lf-tbl b::before, .tp-lf-tbl b::after { content: ''; border-radius: 2px; background: rgba(14,29,56,0.16); }
.tp-lf-tbl b::after { background: rgba(14,29,56,0.28); }
.tp-lf-receipt {
  z-index: 2;
  left: 2%;
  top: 8%;
  width: 40%;
  height: 76%;
  padding: 12px 11px 16px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff, #eef2f7);
  --r: -5deg;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
}
.tp-lf-receipt > i { justify-content: center; border-bottom: 1.5px dashed rgba(14,29,56,0.4); }
.tp-lf-rl { display: grid; gap: 7px; }
.tp-lf-rl b { height: 4px; border-radius: 2px; background: rgba(14,29,56,0.18); }
.tp-lf-rl b:nth-child(2) { width: 80%; }
.tp-lf-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 7px; border-top: 1.5px dashed rgba(14,29,56,0.4); }
.tp-lf-total u { text-decoration: none; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tp-lf-total b { width: 36%; height: 6px; border-radius: 3px; background: rgba(14,29,56,0.4); }
.tp-lf-log {
  z-index: 3;
  right: 2%;
  bottom: 0;
  width: 60%;
  height: 44%;
  padding: 10px 12px;
  --r: -1.5deg;
}
.tp-lf-log > i { margin-bottom: 6px; }
.tp-lf-cols { display: grid; grid-template-columns: 0.8fr 0.7fr 1.5fr; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-paper-muted); }
.tp-lf-cols u { text-decoration: none; }
.tp-lf-grid { display: block; height: 34%; margin-top: 5px; background: repeating-linear-gradient(180deg, rgba(14,29,56,0.14) 0 1px, transparent 1px 9px), linear-gradient(90deg, transparent 26%, rgba(14,29,56,0.14) 26%, rgba(14,29,56,0.14) calc(26% + 1px), transparent calc(26% + 1px), transparent 49%, rgba(14,29,56,0.14) 49%, rgba(14,29,56,0.14) calc(49% + 1px), transparent calc(49% + 1px)); }

/* Prepare: Schedule C clipped to the Form 1040 */
.tp-lf-1040 { left: 0; top: 0; width: 70%; height: 80%; --r: -2.5deg; }
.tp-lf-schc { z-index: 2; right: 0; bottom: 0; width: 68%; height: 76%; --r: 2deg; }
.tp-lf-1040 > i { --tn-ink: #1d3fbf; font-size: 0.8125rem; letter-spacing: 0.06em; }
.tp-lf-schc > i { font-size: 0.8125rem; letter-spacing: 0.06em; }
.tp-lf-1040 small, .tp-lf-schc small { display: block; margin: -4px 0 10px; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tp-paper-muted); }
.tp-lf-lines { display: grid; gap: 8px; margin-top: 4px; }
.tp-lf-lines b { display: block; height: 6px; border-radius: 3px; background: rgba(14,29,56,0.15); }
.tp-lf-lines b:nth-child(2) { width: 76%; }
.tp-lf-lines b:nth-child(3) { width: 88%; }
.tp-lf-lines b:nth-child(4) { width: 58%; }
.tp-lf-pclip {
  position: absolute;
  z-index: 3;
  left: -2%;
  top: 34%;
  width: 16px;
  height: 46px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2.5px #7d8aa3, 1px 2px 3px rgba(0,0,0,0.3);
  transform: rotate(-12deg);
}
.tp-lf-pclip::after { content: ''; position: absolute; left: 4px; right: 4px; top: 6px; bottom: 10px; border-radius: 5px; box-shadow: inset 0 0 0 2px #7d8aa3; }

/* Understand: ready for your review, questions welcome */
.tp-lf-art--review .tp-lf-sheet { --r: 1.4deg; }
.tp-lf-art--review .tp-lf-row { grid-template-columns: 78px minmax(0, 1fr); padding: 6px 0; }
.tp-lf-art--review .tp-lf-row b { background: #b6c3d9; }
.tp-lf-art--review .tp-lf-row--net b { background: linear-gradient(90deg, var(--tp-ok), var(--tp-lime)); }
.tp-lf-art--review .tp-lf-ask { top: -16px; right: 14px; bottom: auto; }
.tp-lf-signhere {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 8px 0 6px;
  border-bottom: 1.5px dashed #3f6608;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3f6608;
}
.tp-lf-ask {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 34%;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(145deg, #5ccab0, #2c9784);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 600;
  color: #04120f;
  box-shadow: 0 14px 26px -12px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tp-lf-text { margin-top: 36px; }
.tp-lf h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--white); text-wrap: balance; }
.tp-lf p { margin-top: 8px; font-size: 0.9688rem; line-height: 1.6; color: #b9cdc7; text-wrap: pretty; }

/* ---- Records Matter: the TaxFunders integrity principle ---- */
.tp-integrity {
  position: relative;
  margin-top: clamp(104px, 10vw, 150px);
  padding: clamp(96px, 9vw, 140px) 0 clamp(88px, 8vw, 124px);
  overflow: hidden;
  background:
    radial-gradient(46% 70% at 50% 0%, rgba(175,221,44,0.11) 0%, transparent 70%),
    radial-gradient(60% 90% at 50% 100%, rgba(68,181,156,0.15) 0%, transparent 72%),
    linear-gradient(180deg, #062831 0%, #04151d 100%);
  box-shadow: inset 0 1px 0 rgba(175,221,44,0.42), inset 0 -1px 0 rgba(68,181,156,0.3);
}
/* A beam of light from above, onto the principle. */
.tp-integrity::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(900px, 90%);
  height: 70%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 150deg, rgba(205,239,106,0.06) 172deg, rgba(205,239,106,0.09) 180deg, rgba(205,239,106,0.06) 188deg, transparent 210deg);
  pointer-events: none;
}
.tp-integrity-in { position: relative; text-align: center; }
.tp-integrity-k {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d9f59a;
}
.tp-integrity-k::before, .tp-integrity-k::after { content: ''; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--tp-lime)); }
.tp-integrity-k::after { background: linear-gradient(90deg, var(--tp-lime), transparent); }
.tp-integrity-title {
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 7.4vw, 7rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--white);
}
.tp-integrity-title .tp-line + .tp-line { padding-top: 4px; }
.tp-integrity-title em {
  font-style: italic;
  background: linear-gradient(95deg, #9be8c9, #cdef6a 60%, var(--tp-lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
/* The sign-off: the TaxFunders mark between two rules. */
.tp-integrity-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: clamp(36px, 3.6vw, 52px) auto 0;
}
.tp-integrity-seal::before, .tp-integrity-seal::after { content: ''; width: clamp(60px, 10vw, 140px); height: 1px; background: linear-gradient(90deg, transparent, rgba(205,239,106,0.7)); }
.tp-integrity-seal::after { background: linear-gradient(90deg, rgba(205,239,106,0.7), transparent); }
.tp-integrity-seal img { width: 40px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); }
.tp-integrity-body {
  max-width: 60ch;
  margin: clamp(26px, 2.6vw, 34px) auto 0;
  font-size: clamp(1.0625rem, 0.4vw + 0.94rem, 1.1875rem);
  line-height: 1.7;
  color: #cfe2da;
  text-wrap: pretty;
}

@media (max-width: 1180px) {
  .tp-lf-row--x { display: none; }
  .tp-lf-verb { font-size: clamp(2rem, 3vw, 2.5rem); }
  .tp-lf-k, .tp-lf-stmt > i, .tp-lf-log > i, .tp-lf-receipt > i { font-size: 0.625rem; letter-spacing: 0.06em; }
  .tp-lf-cols { font-size: 0.5rem; }
}
/* Tablets and phones: composed on their own. One ledger runs down the
   left; each stage hangs from it with the same anatomy: node, verb,
   the scene at full width, then the words. */
@media (max-width: 980px) {
  .tp-self-top { grid-template-columns: minmax(0, 1fr); }
  .tp-qledger { max-width: 620px; }
  .tp-ledgerflow {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
    max-width: 620px;
    margin-inline: auto;
    padding: 0 0 0 34px;
  }
  .tp-records::after { margin-bottom: 26px; }
  .tp-ledgerflow::before {
    left: 6px;
    right: auto;
    top: 0;
    bottom: 24px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--tp-teal), var(--tp-ok) 60%, var(--tp-lime) 90%, rgba(175,221,44,0));
  }
  .tp-lf::before { left: -34px; top: 0.9rem; }
  .tp-lf-verb { font-size: clamp(2.5rem, 7vw, 3rem); margin-bottom: 20px; }
  .tp-lf-art { width: 100%; max-width: 440px; aspect-ratio: 4 / 3; }
  .tp-lf-row--x { display: grid; }
  .tp-lf-text { margin-top: 34px; }
  .tp-integrity-title { font-size: clamp(3rem, 11vw, 4.5rem); }
}
@media (max-width: 760px) {
  .tp-self-copy { text-align: center; }
  .tp-self-problem { text-align: left; font-size: 1.125rem; }
  .tp-qledger-clip { left: 16px; width: 22px; height: 52px; }
  .tp-qledger { padding: 24px 18px 24px 50px; background:
      linear-gradient(90deg, transparent 36px, rgba(214,69,69,0.35) 36px, rgba(214,69,69,0.35) 37.5px, transparent 37.5px),
      linear-gradient(180deg, #ffffff 0%, var(--tp-paper) 30%, var(--tp-paper-2) 100%); transform: rotate(0.8deg); }
  .tp-qledger li { padding-top: 13px; font-size: 1.1875rem; }
  .tp-qledger li::before { left: -40px; width: 22px; height: 22px; }
  .tp-records { margin-top: 84px; }
  .tp-records-k { gap: 12px; font-size: 1.875rem; }
  .tp-records-k::before, .tp-records-k::after { width: 22px; }
  .tp-records-body { text-align: left; }
  .tp-ledgerflow { padding-left: 30px; row-gap: 58px; }
  .tp-ledgerflow::before { left: 5px; }
  .tp-lf::before { left: -31px; }
  .tp-lf-verb { font-size: 2.625rem; margin-bottom: 18px; }
  .tp-lf-k, .tp-lf-stmt > i, .tp-lf-log > i, .tp-lf-receipt > i { font-size: 0.625rem; letter-spacing: 0.06em; }
  .tp-lf-1040 > i, .tp-lf-schc > i { font-size: 0.75rem; }
  .tp-lf-text { margin-top: 30px; }
  .tp-lf h3 { font-size: 1.0625rem; }
  .tp-lf p { font-size: 0.9375rem; }
  .tp-integrity { margin-top: 84px; padding: 76px 0 72px; }
  .tp-integrity-k { gap: 12px; margin-bottom: 24px; font-size: 0.75rem; letter-spacing: 0.22em; }
  .tp-integrity-k::before, .tp-integrity-k::after { width: 28px; }
  .tp-integrity-title { font-size: clamp(3rem, 13.4vw, 3.75rem); }
  .tp-integrity-body { text-align: left; font-size: 1rem; }
}
@media (max-width: 400px) {
  .tp-lf-art { aspect-ratio: 4 / 3.2; }
  .tp-integrity-title { font-size: 2.75rem; }
  .tp-lf-cols { font-size: 0.4688rem; }
}

/* =========================================================
   Pass 7: Schedule C, grouped and given depth
   ========================================================= */
/* The four stages stand on one desk: a single surface groups them. */
.tp-desk {
  position: relative;
  margin-top: 0;
  padding: clamp(56px, 5vw, 72px) clamp(24px, 3vw, 44px) clamp(36px, 3.4vw, 48px);
  border: 1px solid transparent;
  border-radius: 28px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(68,181,156,0.1), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(10,33,43,0.74), rgba(5,19,25,0.74)) padding-box,
    linear-gradient(160deg, rgba(122,216,193,0.42), rgba(68,181,156,0.1) 45%, rgba(175,221,44,0.26)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 0 -1px rgba(2,10,8,0.95), 0 60px 100px -60px rgba(0,0,0,0.95);
}
.tp-desk .tp-ledgerflow { padding-top: 34px; }
/* Stages are divided on the desk by fine rules. */
.tp-desk .tp-lf + .tp-lf::after {
  content: '';
  position: absolute;
  left: calc(clamp(24px, 3vw, 48px) / -2);
  top: 20px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(122,216,193,0.3), rgba(122,216,193,0));
}
/* Stage headings: a numbered tab and the verb, underlined in its colour. */
.tp-lf-verb {
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  color: #ffffff;
  background: none;
  box-shadow: inset 0 -1px 0 rgba(122,216,193,0.18);
}
.tp-lf-verb::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tn), rgba(var(--tn-rgb), 0));
  box-shadow: 0 0 10px rgba(var(--tn-rgb), 0.7);
}
.tp-lf-verb::before {
  display: inline-grid;
  place-items: center;
  align-self: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #04120f;
  background: linear-gradient(150deg, var(--tn), var(--tn-deep));
  box-shadow: 0 0 14px -4px rgba(var(--tn-rgb), 0.9);
  transform: none;
}
/* Papers laid on the desk: a slight lean away from the reader. */
.tp-lf-art {
  --lf-persp: 900px;
  --lf-tilt: 9deg;
  --lf-y: 0px;
  transform: perspective(var(--lf-persp)) rotateX(var(--lf-tilt)) translateY(var(--lf-y));
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease-out);
}
.tp-lf-sheet, .tp-lf-stmt, .tp-lf-log, .tp-lf-1040, .tp-lf-schc, .tp-lf-receipt {
  box-shadow:
    inset 0 0 0 1px rgba(14,29,56,0.06),
    inset 0 -2px 0 rgba(14,29,56,0.06),
    0 1px 0 #c9d4e4,
    0 2px 0 #aebdd3,
    0 1px 3px rgba(0,0,0,0.4),
    0 30px 46px -22px rgba(0,0,0,0.95);
}
/* The records hinge gets air on both sides. */
.tp-records { margin-bottom: 44px; }
/* Records Matter: the principle carries the section's full weight. */
.tp-integrity-title { font-size: clamp(3.5rem, 8vw, 7.75rem); text-shadow: 0 0 60px rgba(175,221,44,0.12); }

@media (max-width: 980px) {
  .tp-desk { padding: 44px 22px 36px; }
  .tp-desk .tp-ledgerflow { padding: 0 0 0 34px; }
  .tp-desk .tp-lf + .tp-lf::after { left: 0; right: 0; top: -32px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(122,216,193,0.3), rgba(122,216,193,0)); }
}
/* Phones: the section's mark and headline at full presence. */
@media (max-width: 760px) {
  .tp-sec--self .tp-inkstamp { padding: 10px 18px; font-size: 0.875rem; letter-spacing: 0.2em; margin-bottom: 30px; }
  .tp-sec--self .tp-self-copy .tp-h2 { font-size: clamp(2.625rem, 11.2vw, 3.25rem); line-height: 1.02; }
  .tp-desk { margin-inline: calc(var(--tp-gutter) * -0.4); padding: 40px 16px 30px; border-radius: 22px; }
  .tp-desk .tp-ledgerflow { padding-left: 28px; }
  .tp-lf-verb { margin-bottom: 22px; }
  .tp-lf-art { --lf-persp: 700px; --lf-tilt: 7deg; }
}
@media (max-width: 400px) {
  .tp-sec--self .tp-self-copy .tp-h2 { font-size: 2.5rem; }
}

/* ---- The desk, alive ----
   A slow pass of light crosses each scene, the pool of light under it
   breathes, and pointing at (or tapping) a stage spreads its records
   apart and lifts them off the desk. ---- */
.tp-lf-art::before {
  content: '';
  position: absolute;
  z-index: 4;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 36%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.1) 48%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  transform: translateX(-70%) skewX(-14deg);
  animation: tpDeskGlare 9s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.tp-lf:nth-child(2) .tp-lf-art::before { animation-delay: 1.6s; }
.tp-lf:nth-child(3) .tp-lf-art::before { animation-delay: 3.2s; }
.tp-lf:nth-child(4) .tp-lf-art::before { animation-delay: 4.8s; }
@keyframes tpDeskGlare {
  0%, 66% { transform: translateX(-70%) skewX(-14deg); }
  92%, 100% { transform: translateX(290%) skewX(-14deg); }
}
.tp-lf-art::after { animation: tpDeskPool 7s ease-in-out infinite; }
.tp-lf:nth-child(2) .tp-lf-art::after { animation-delay: 1.2s; }
.tp-lf:nth-child(3) .tp-lf-art::after { animation-delay: 2.4s; }
.tp-lf:nth-child(4) .tp-lf-art::after { animation-delay: 3.6s; }
@keyframes tpDeskPool {
  0%, 100% { opacity: 0.75; transform: scaleX(0.97); }
  50% { opacity: 1; transform: scaleX(1.03); }
}
.tp-lf-ask, .tp-lf-pclip { transition: transform 0.55s var(--ease-out); }
/* Pointed at, or pressed: the stage comes up off the desk. */
.tp-lf:hover .tp-lf-art, .tp-lf:active .tp-lf-art { --lf-tilt: 4.5deg; --lf-y: -8px; }
.tp-lf:hover .tp-lf-sheet, .tp-lf:active .tp-lf-sheet,
.tp-lf:hover .tp-lf-stmt, .tp-lf:active .tp-lf-stmt,
.tp-lf:hover .tp-lf-log, .tp-lf:active .tp-lf-log,
.tp-lf:hover .tp-lf-1040, .tp-lf:active .tp-lf-1040,
.tp-lf:hover .tp-lf-schc, .tp-lf:active .tp-lf-schc,
.tp-lf:hover .tp-lf-receipt, .tp-lf:active .tp-lf-receipt {
  box-shadow:
    inset 0 0 0 1px rgba(14,29,56,0.06),
    inset 0 -2px 0 rgba(14,29,56,0.06),
    0 1px 0 #c9d4e4,
    0 2px 0 #aebdd3,
    0 2px 5px rgba(0,0,0,0.45),
    0 44px 60px -24px rgba(0,0,0,0.95);
}
.tp-lf:hover .tp-lf-art--pl .tp-lf-sheet, .tp-lf:active .tp-lf-art--pl .tp-lf-sheet { --r: -0.6deg; --ty: -7px; }
.tp-lf:hover .tp-lf-stmt, .tp-lf:active .tp-lf-stmt { --r: 4.8deg; --tx: 6px; --ty: -9px; }
.tp-lf:hover .tp-lf-receipt, .tp-lf:active .tp-lf-receipt { --r: -7.5deg; --tx: -8px; --ty: -4px; }
.tp-lf:hover .tp-lf-log, .tp-lf:active .tp-lf-log { --r: -0.2deg; --tx: 5px; --ty: 7px; }
.tp-lf:hover .tp-lf-1040, .tp-lf:active .tp-lf-1040 { --r: -3.6deg; --tx: -7px; --ty: -6px; }
.tp-lf:hover .tp-lf-schc, .tp-lf:active .tp-lf-schc { --r: 3.2deg; --tx: 8px; --ty: 6px; }
.tp-lf:hover .tp-lf-pclip, .tp-lf:active .tp-lf-pclip { transform: rotate(-16deg) translate(-3px, -5px); }
.tp-lf:hover .tp-lf-art--review .tp-lf-sheet, .tp-lf:active .tp-lf-art--review .tp-lf-sheet { --r: 0.5deg; --ty: -7px; }
.tp-lf:hover .tp-lf-ask, .tp-lf:active .tp-lf-ask { transform: rotate(-3deg) scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .tp-lf-art::before { animation: none; display: none; }
  .tp-lf-art::after { animation: none; }
  .tp-lf-art, .tp-lf-sheet, .tp-lf-stmt, .tp-lf-log, .tp-lf-1040, .tp-lf-schc, .tp-lf-receipt,
  .tp-lf-ask, .tp-lf-pclip { transition: none; }
}

/* =========================================================
   10. YOUR NEXT STEP — the consultation
   The page's conclusion before the questions. A two-way headline, and a
   consultation panel built to be clicked: a lit gradient edge, the
   TaxFunders shield capping its corner, the team's three circular
   portraits standing on its top edge, one headline, four benefits and the
   strongest button on the page.
   ========================================================= */
.tp-close {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(112px, 10.5vw, 164px) 0;
  background: linear-gradient(180deg, #0b1a3c 0%, #0a1733 50%, #081229 100%);
  box-shadow: inset 0 1px 0 rgba(175,221,44,0.3);
}
.tp-atmos--close {
  background:
    radial-gradient(46% 70% at 14% 42%, rgba(2,193,255,0.15) 0%, transparent 70%),
    radial-gradient(46% 70% at 84% 60%, rgba(10,45,194,0.34) 0%, transparent 72%),
    radial-gradient(30% 40% at 76% 100%, rgba(175,221,44,0.12) 0%, transparent 70%),
    radial-gradient(30% 36% at 96% 8%, rgba(68,181,156,0.12) 0%, transparent 70%);
}
.tp-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(44px, 6vw, 104px);
  align-items: center;
}
.tp-close-k {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #cdef6a;
}
.tp-close-k::before { content: ''; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tp-lime), rgba(175,221,44,0.2)); }
.tp-close-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 4.4vw, 4.375rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--white);
}
/* Two lines: the invitation in white, the answer in the brand gradient. */
.tp-close-title .tp-line { white-space: nowrap; }
.tp-close-title em { font-style: italic; background: linear-gradient(95deg, #9be8ff, var(--tp-sky) 40%, var(--tp-teal) 75%, var(--tp-lime)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.tp-close-copy .tp-body { margin-top: 28px; max-width: 46ch; font-size: clamp(1.125rem, 0.4vw + 1rem, 1.25rem); color: #d3def2; }

/* ---- The consultation panel ---- */
.tp-invite-wrap { position: relative; padding-top: 42px; }
/* A second pane of glass behind the panel. */
.tp-invite-layer {
  position: absolute;
  left: 18px;
  right: -14px;
  top: 64px;
  bottom: -16px;
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(56,207,255,0.14), rgba(10,45,194,0.1) 60%, rgba(175,221,44,0.08));
  box-shadow: inset 0 0 0 1px rgba(139,177,255,0.16);
}
.tp-invite {
  position: relative;
  isolation: isolate;
  padding: 58px clamp(26px, 3vw, 40px) clamp(26px, 2.8vw, 34px);
  border: 2px solid transparent;
  border-radius: 30px 30px 30px 30px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(56,207,255,0.18) 0%, transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(175,221,44,0.1) 0%, transparent 60%),
    linear-gradient(165deg, #14295a, #0b1734 72%) padding-box,
    conic-gradient(from 200deg at 70% 30%, var(--tp-sky), rgba(93,139,255,0.5), rgba(68,181,156,0.6), var(--tp-lime), rgba(93,139,255,0.5), var(--tp-sky)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 6px 0 -1px rgba(4,12,32,0.95),
    0 7px 0 -1px rgba(140,230,255,0.25),
    0 90px 150px -60px rgba(0,0,0,0.95),
    0 0 130px -46px rgba(2,193,255,0.7);
}
/* The corner cap: the TaxFunders shield, set into the edge. */
.tp-invite-cap {
  position: absolute;
  right: 26px;
  top: -30px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(160deg, #173163, #0b1734);
  box-shadow: 0 0 0 2px rgba(140,230,255,0.55), 0 14px 26px -12px rgba(0,0,0,0.9), 0 0 30px -8px rgba(56,207,255,0.6);
}
.tp-invite-cap img { width: 36px; height: auto; }
/* The team, standing on the panel's top edge. */
.tp-invite-faces { position: absolute; left: clamp(22px, 2.6vw, 36px); top: -42px; display: flex; }
.tp-invite-faces picture { display: contents; }
.tp-invite-faces img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #10214a, 0 14px 24px -10px rgba(0,0,0,0.85);
}
.tp-invite-faces picture + picture img { margin-left: -16px; }
.tp-invite-faces picture:nth-child(1) img { position: relative; z-index: 3; box-shadow: 0 0 0 4px #10214a, 0 0 0 6px var(--tp-sky), 0 14px 24px -10px rgba(0,0,0,0.85); }
.tp-invite-faces picture:nth-child(2) img { position: relative; z-index: 2; box-shadow: 0 0 0 4px #10214a, 0 0 0 6px var(--tp-teal), 0 14px 24px -10px rgba(0,0,0,0.85); }
.tp-invite-faces picture:nth-child(3) img { position: relative; z-index: 1; box-shadow: 0 0 0 4px #10214a, 0 0 0 6px var(--tp-royal-lt), 0 14px 24px -10px rgba(0,0,0,0.85); }
/* One headline, one thought. */
.tp-invite-title { font-family: var(--font-serif); line-height: 1.02; color: var(--white); }
.tp-invite-kicker { display: block; font-size: clamp(2.25rem, 3.2vw, 3rem); font-weight: 500; letter-spacing: -0.012em; }
/* The branded line: "with the" set small, the TaxFunders Tax Team large. */
.tp-invite-with { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 16px; box-shadow: inset 0 1px 0 rgba(139,177,255,0.18); }
.tp-invite-with small { font-family: var(--font); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #9fb6dc; }
.tp-invite-with em {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.05;
  background: linear-gradient(95deg, #ffffff 0%, #9be8ff 45%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
/* The benefits sit on an inset surface inside the panel. */
.tp-invite-inset {
  margin: 24px 0 26px;
  padding: 6px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5,12,32,0.55), rgba(5,12,32,0.35));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(139,177,255,0.12);
}
.tp-invite-inset .tp-invite-steps { margin: 0; }
.tp-invite-inset .tp-invite-steps li:first-child { border-top: 0; }
.tp-invite-steps { margin: 26px 0 28px; }
.tp-invite-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #eaf0fb;
}
.tp-invite-tick {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #06121c;
  background: linear-gradient(145deg, var(--tn), var(--tn-deep));
  box-shadow: 0 0 0 4px rgba(var(--tn-rgb), 0.14), 0 0 14px rgba(var(--tn-rgb), 0.5);
}
.tp-invite-tick .tp-ico { width: 14px; height: 14px; stroke-width: 3; }
.tp-invite-fine { margin-top: 14px; text-align: center; font-size: 0.8125rem; color: #9fb2d4; }

@media (max-width: 1080px) {
  .tp-close-grid { gap: 48px; }
}
@media (max-width: 980px) {
  .tp-close-grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .tp-invite-wrap { max-width: 600px; width: 100%; justify-self: start; }
}
@media (max-width: 760px) {
  .tp-close { padding: 88px 0 100px; }
  .tp-close-copy { text-align: center; }
  .tp-close-copy .tp-close-k { margin-inline: auto; }
  .tp-close-title { font-size: min(3.25rem, calc((100vw - 2 * var(--tp-gutter)) / 8.6)); }
  .tp-close-title .tp-line { white-space: nowrap; }
  .tp-invite-with em { font-size: 1.75rem; }
  .tp-invite-inset { margin: 20px 0 22px; padding: 4px 14px; }
  .tp-close-copy .tp-body { text-align: left; margin-inline: 0; font-size: 1.0625rem; }
  .tp-invite-wrap { padding-top: 38px; }
  .tp-invite-layer { left: 10px; right: -6px; top: 56px; bottom: -10px; border-radius: 24px; }
  .tp-invite { padding: 54px 20px 22px; border-radius: 24px; }
  .tp-invite-cap { right: 18px; top: -24px; width: 50px; height: 50px; border-radius: 15px; }
  .tp-invite-cap img { width: 30px; }
  .tp-invite-faces { left: 18px; top: -38px; }
  .tp-invite-faces img { width: 70px; height: 70px; }
  .tp-invite-kicker { font-size: clamp(2rem, 8.8vw, 2.375rem); }
  .tp-invite-with { font-size: 1.3125rem; }
  .tp-invite-steps li { font-size: 1rem; gap: 12px; }
}

/* =========================================================
   10. FAQ — "Before you get started"
   A sticky heading beside an open numbered ledger (page-scoped).
   ========================================================= */
.tp-sec--faq { background: linear-gradient(180deg, #0e1116 0%, #0c0f14 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.tp-faq { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(44px, 6vw, 100px); align-items: start; }
.tp-faq-head { position: sticky; top: 124px; }
.tp-faq-title {
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 6vw, 5.75rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--white);
}
.tp-faq-title em { position: relative; font-style: italic; color: var(--white); }
.tp-faq-title em::after {
  content: '';
  position: absolute;
  left: 0.04em;
  right: 0.02em;
  bottom: -0.1em;
  height: 2px;
  background: linear-gradient(90deg, var(--tp-sky), rgba(56,207,255,0.35));
}
/* One heading: "12 answers / before you / get started." */
.tp-faq-count { display: flex !important; align-items: baseline; gap: 0.18em; }
.tp-faq-count b {
  font-weight: 500;
  font-style: italic;
  font-size: 1.12em;
  background: linear-gradient(160deg, #ffffff 0%, #9be8ff 45%, var(--tp-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.04em;
}
.tp-faq-head .tp-body { margin-top: 26px; max-width: 36ch; }
.tp-faq-cta { margin-top: 30px; }
.tp-page .tp-sec--faq .faq-list {
  position: relative;
  counter-reset: tpfaq;
  gap: 0;
  border-top: 1px solid rgba(56,207,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tp-page .tp-sec--faq .faq-list::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 60px;
  width: 1px;
  background: linear-gradient(180deg, rgba(56,207,255,0.45), rgba(56,207,255,0.12));
  pointer-events: none;
}
.tp-page .tp-sec--faq .faq-item { counter-increment: tpfaq; border: 0; border-top: 1px solid rgba(255,255,255,0.07); border-radius: 0; background: transparent; scroll-margin-top: 96px; }
.tp-page .tp-sec--faq .faq-item:first-child { border-top: 0; }
.tp-page .tp-sec--faq .faq-item.open { background: radial-gradient(120% 100% at 0 0, rgba(56,207,255,0.08), transparent 60%); box-shadow: inset 3px 0 0 var(--tp-sky); }
.tp-page .tp-sec--faq .faq-question {
  justify-content: flex-start;
  align-items: baseline;
  gap: 22px;
  padding: 24px 28px 24px 0;
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.tp-page .tp-sec--faq .faq-question::before {
  content: counter(tpfaq, decimal-leading-zero);
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tp-sky);
  font-variant-numeric: lining-nums tabular-nums;
}
.tp-page .tp-sec--faq .faq-chevron { align-self: center; margin-left: auto; }
.tp-page .tp-sec--faq .faq-item.open .faq-chevron { color: var(--tp-sky); }
.tp-page .tp-sec--faq .faq-question:hover { color: var(--tp-sky); }
.tp-page .tp-sec--faq .faq-question:focus-visible { outline: 2px solid var(--tp-sky); outline-offset: -2px; }
.tp-page .tp-sec--faq .faq-answer-inner { padding: 0 28px 24px 82px; color: var(--gray-200); }
.tp-page .tp-sec--faq .faq-answer { visibility: hidden; transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.5s; }
.tp-page .tp-sec--faq .faq-item.open .faq-answer { visibility: visible; transition-delay: 0s; }

@media (max-width: 1080px) {
  .tp-faq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tp-faq-head { position: static; max-width: 900px; margin: 0 auto clamp(44px, 5vw, 60px); text-align: center; }
  .tp-faq-head .tp-body { margin-inline: auto; max-width: 56ch; }
}
@media (max-width: 760px) {
  .tp-faq-title { font-size: clamp(3rem, 14vw, 4rem); }
  .tp-faq-count { justify-content: center; }
  .tp-faq-head .tp-body { text-align: left; }
  .tp-page .tp-sec--faq .faq-list::after { left: 44px; }
  .tp-page .tp-sec--faq .faq-question { padding: 19px 18px 19px 0; font-size: 1.125rem; gap: 14px; }
  .tp-page .tp-sec--faq .faq-question::before { width: 44px; }
  .tp-page .tp-sec--faq .faq-answer-inner { padding: 0 18px 20px 58px; }
}
@media (max-width: 400px) { .tp-faq-title { font-size: 2.75rem; } }

/* =========================================================
   11. OFFICIAL IRS RESOURCES — "the source itself"
   Personality: royal and indigo, high contrast. A royal band with three
   official destinations; every card says where it goes and that it leaves
   this site.
   ========================================================= */
.tp-sec--irs {
  background:
    radial-gradient(60% 90% at 8% 0%, rgba(56,207,255,0.2) 0%, transparent 70%),
    radial-gradient(50% 80% at 100% 100%, rgba(41,51,130,0.9) 0%, transparent 72%),
    linear-gradient(125deg, #0a1850 0%, #0c2474 55%, #1b2a86 100%);
  padding: clamp(96px, 9vw, 136px) 0;
}
.tp-irs-head { max-width: 980px; margin: 0 auto clamp(52px, 5.4vw, 72px); text-align: center; }
.tp-irs-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffffff;
}
.tp-irs-label::before, .tp-irs-label::after { content: ''; width: 40px; height: 1px; background: rgba(255,255,255,0.5); }
.tp-irs-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.4vw, 5.25rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--white);
}
.tp-irs-title em { font-style: italic; color: #9fe6ff; }
.tp-irs-note { max-width: 58ch; margin: 24px auto 0; font-size: 1.0625rem; line-height: 1.62; color: #dbe6ff; text-wrap: pretty; }

.tp-irs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
/* Three official notice slips on the royal band: paper, a stamp, a tear-off
   action. Nothing here is a dark card with a hairline. */
.tp-irs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(26px, 2.4vw, 32px) clamp(22px, 2.2vw, 28px) 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(43,68,112,0.05) 29px 30px),
    linear-gradient(180deg, #ffffff 0%, var(--tp-paper) 62%, var(--tp-paper-2) 100%);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,0.85), 0 2px 0 rgba(255,255,255,0.5) inset;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.tp-irs-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--tn-ink), var(--tn));
}
.tp-irs-card:hover { transform: translateY(-5px); box-shadow: 0 54px 84px -40px rgba(0,0,0,0.9); }
.tp-irs-card:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
/* The government-form stamp, inked at an angle. */
.tp-irs-ico {
  position: absolute;
  right: clamp(18px, 1.8vw, 24px);
  top: clamp(22px, 2vw, 28px);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(var(--tn-rgb), 0.55);
  color: var(--tn-ink);
  transform: rotate(-8deg);
  opacity: 0.85;
}
.tp-irs-ico .tp-ico { width: 22px; height: 22px; stroke-width: 1.9; }
.tp-irs-name {
  max-width: 76%;
  min-height: 2.12em;
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.1vw, 2rem);
  font-weight: 600;
  line-height: 1.06;
  color: var(--tp-paper-ink);
  text-wrap: balance;
}
.tp-irs-desc { margin: 12px 0 auto; font-size: 0.9688rem; line-height: 1.55; color: var(--tp-paper-muted); text-wrap: pretty; }
.tp-irs-path {
  order: 1;
  margin-top: 18px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--tn-ink);
}
/* The tear-off stub: the action, on a perforation. It reads as a control:
   a strong label on an underline track, and an arrow key that leaves the
   page (up and to the right) when the card is hovered or focused. */
.tp-irs-act {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px calc(clamp(22px, 2.2vw, 28px) * -1) 0;
  padding: 14px clamp(16px, 1.6vw, 20px) 14px clamp(22px, 2.2vw, 28px);
  border-top: 1.5px dashed rgba(43,68,112,0.35);
  background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.24), rgba(var(--tn-rgb), 0.08));
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tn-ink);
  transition: background 0.3s var(--ease-out);
}
.tp-irs-act-t {
  padding-bottom: 5px;
  background:
    linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat,
    linear-gradient(rgba(var(--tn-rgb), 0.55), rgba(var(--tn-rgb), 0.55)) left bottom / 100% 2px no-repeat;
  transition: background-size 0.45s var(--ease-out);
}
.tp-irs-act-key {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, var(--tn-deep), var(--tn-ink));
  box-shadow: 0 8px 16px -8px rgba(var(--tn-rgb), 0.95), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.tp-irs-act-key .tp-ico { width: 16px; height: 16px; stroke-width: 2.3; transition: transform 0.35s var(--ease-out); }
.tp-irs-card:hover .tp-irs-act,
.tp-irs-card:focus-visible .tp-irs-act { background: linear-gradient(90deg, rgba(var(--tn-rgb), 0.42), rgba(var(--tn-rgb), 0.16)); }
.tp-irs-card:hover .tp-irs-act-t,
.tp-irs-card:focus-visible .tp-irs-act-t { background-size: 100% 2px, 100% 2px; }
.tp-irs-card:hover .tp-irs-act-key,
.tp-irs-card:focus-visible .tp-irs-act-key { transform: scale(1.08); box-shadow: 0 12px 22px -8px rgba(var(--tn-rgb), 1), inset 0 1px 0 rgba(255,255,255,0.3); }
.tp-irs-card:hover .tp-irs-act-key .tp-ico,
.tp-irs-card:focus-visible .tp-irs-act-key .tp-ico { transform: translate(2px, -2px); }
.tp-irs-card:active { transform: translateY(-2px) scale(0.99); }


@media (max-width: 980px) {
  .tp-irs-list { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; gap: 18px; }
  .tp-irs-name { max-width: 72%; font-size: 1.625rem; }
  .tp-irs-ico { width: 42px; height: 42px; }
}
@media (max-width: 760px) {
  .tp-sec--irs { padding: 80px 0 88px; }
  .tp-irs-title { font-size: clamp(2.25rem, 9.6vw, 2.75rem); }
  .tp-irs-note { text-align: left; font-size: 1rem; }
  .tp-irs-card { padding: 24px 20px 0; }
  .tp-irs-ico { width: 38px; height: 38px; right: 16px; top: 20px; }
  .tp-irs-ico .tp-ico { width: 19px; height: 19px; }
  .tp-irs-name { font-size: 1.5rem; }
  .tp-irs-desc { font-size: 0.9375rem; }
  .tp-irs-act { margin-inline: -20px; padding: 13px 14px 13px 20px; }
}
@media (max-width: 400px) { .tp-irs-title { font-size: 2.125rem; } .tp-irs-label::before, .tp-irs-label::after { width: 20px; } .tp-irs-label { gap: 10px; letter-spacing: 0.16em; } }

/* =========================================================
   12. IMPORTANT INFORMATION — a document footer
   ========================================================= */
.tp-sec--legal { background: var(--navy-900); padding: clamp(56px, 5.6vw, 84px) 0 clamp(64px, 6vw, 92px); }
.tp-legal { margin: 0 auto; }
.tp-legal-item p:not(.tp-legal-k) { max-width: 75ch; }
.tp-legal-head { margin-bottom: clamp(30px, 3vw, 44px); }
.tp-legal-sub { margin-top: 10px; font-size: 0.9375rem; color: #7f90b0; }
.tp-legal-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-200);
}
.tp-legal-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(56,207,255,0.45), rgba(255,255,255,0.06)); }
.tp-legal-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 1fr); gap: 24px clamp(24px, 3.4vw, 52px); }
.tp-legal-k { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b7c4de; }
.tp-legal-k span { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; letter-spacing: 0; color: var(--tp-sky); }
.tp-legal-item p:not(.tp-legal-k) { font-size: 0.875rem; line-height: 1.72; color: #93a6c8; text-wrap: pretty; }
@media (max-width: 1180px) {
  .tp-legal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-legal-item:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tp-sec--legal { padding: 48px 0 60px; }
  .tp-legal-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .tp-page .reveal { opacity: 1; transform: none; }
  .tp-page .tp-cta:hover { transform: none; }
  .tp-irs-card, .tp-irs-card:hover { transform: none; transition: none; }
  .tp-swipe-chevs, .tp-swipe-chevs i, .tp-swipe-rail i, .tp-binder-cue-hand { animation: none; }
  .tp-swipe-rail i { left: 0; }
  .tp-dossier-dots button, .tp-binder-tabs [role="tab"] { transition: none; }
  .tp-page .tp-cta::before, .tp-page .tp-cta:hover::before { transition: none; transform: translateX(-130%); }
  .tp-ghost:hover { transform: none; }
  .tp-page .tp-qledger.reveal, .tp-page .tp-qledger.reveal.revealed { transform: rotate(1.4deg); }
  .tp-irs-card, .tp-irs-card:hover { transform: none; }
  .tp-ghost:hover .tp-ico, .tp-go:hover .tp-go-arrow, .tp-irs-card:hover .tp-irs-act-key .tp-ico, .tp-irs-card:hover .tp-irs-act-key, .tp-cta:hover .tp-cta-arrow { transform: none; }
  .tp-person-plate img { transition: none; }
}

/* ============================================================
   Tax Client Portal components
   The Tax Client Login button (.btn-portal) in the global nav, plus a
   few shared one-off rules. The Tax Preparation page's own styles are
   the .tp-* block above.
   ============================================================ */

/* Soft-edged section tint — replaces the hard border-top/border-bottom
   hairline pattern with a gradual fade so alternating-background sections
   blend into the page instead of showing a visible seam. */
.section-tinted {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.015) 10%,
    rgba(255,255,255,0.015) 90%,
    transparent 100%
  );
}

/* About hero — the standard 1200px .container reads as an undersized island
   on very wide desktop screens (the two-column split-2 text+photo has far
   less inherent visual weight than Home's full-bleed hero, so capping it at
   the same width every card grid uses made it look small rather than
   intentional). Grows past 1200px only on wider viewports; below that this
   is identical to the sitewide .container. Ceiling of 1680px matches the
   nav's own already-established wide container, so About's widest state
   still reads as "this site's canvas," not an arbitrary new number. */
.about-hero-container { max-width: clamp(1200px, 68vw + 364px, 1680px); }

/* About page — three one-off sections without a shared component.
   ".section-header.left" is a deliberate desktop-only editorial choice
   (left-aligned label+heading); on mobile it should still center like
   every other label/heading pair on the site. The differentiator list in
   "Why We're Different" stays left-aligned (icon+text rows don't read well
   centered next to a fixed-position icon). */
@media (max-width: 768px) {
  .about-hero-text { text-align: center; }
  .about-hero-text .body-lg { text-align: left; }
  .section-header.left { text-align: center; }
  .about-why-different { text-align: center; }
  .about-why-different-list { text-align: left; }
}

/* Legal/policy pages — scoped to privacy-policy.html & terms-conditions.html */
.legal-content { padding: 8px 0 40px; }
.legal-content .legal-updated { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 40px; }
.legal-content h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  color: var(--white);
  margin: 44px 0 16px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { font-size: 0.9375rem; line-height: 1.75; color: var(--gray-200); margin-bottom: 16px; }
.legal-content ul { margin: 8px 0 20px; }
.legal-content li { position: relative; padding-left: 22px; font-size: 0.9375rem; line-height: 1.75; color: var(--gray-200); margin-bottom: 8px; }
.legal-content li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--sky-400); }
.legal-content strong { color: var(--white); }
.legal-content .legal-contact { margin-top: 8px; padding: 24px clamp(20px,4vw,28px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.legal-content .legal-contact p { margin-bottom: 6px; }
.legal-content .legal-contact p:last-child { margin-bottom: 0; }

/* Compact nav variant of the portal login button */
.nav-cta .btn-portal { padding: 10px 16px; font-size: 0.75rem; gap: 6px; }
.nav-cta .btn-portal svg { width: 14px; height: 14px; }
.nav-cta .btn-sm { padding: 9px 14px; }

/* Distinct "returning client" CTA — pill/outline, apart from lead-gen buttons */
.btn-portal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--sky-400);
  border: 1px solid var(--sky-400);
  text-decoration: none;
  transition: var(--transition);
}
.btn-portal svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-portal:hover {
  background: rgba(2,193,255,0.1);
  transform: translateY(-1px);
}

/* ============================================================
   Global premium components — editorial service rows.
   Used on the homepage in place of a third identical card grid.
   ============================================================ */
.service-editorial-list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
}
.service-editorial-row {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}
.service-editorial-row:nth-child(even) { direction: rtl; }
.service-editorial-row:nth-child(even) > * { direction: ltr; }

/* Floating icon stage: no visible container (no circle, ring, border, or
   number) — the custom artwork itself is the focal point. A soft ambient
   glow (per-category color, positioned behind the icon via ::before) is the
   only visual cue separating the artwork from the dark background; it fades
   to full transparency well inside the stage bounds so it never reads as a
   shape of its own. The stage keeps its previous grid footprint (via the
   row's grid-template-columns below) purely to preserve layout alignment —
   see `.service-editorial-row`. */
.service-editorial-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-editorial-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88%;
  height: 88%;
  background: radial-gradient(ellipse at center, rgba(87,171,40,0.24) 0%, rgba(2,193,255,0.09) 40%, transparent 70%);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  z-index: 0;
}
.service-editorial-row.svc-sky .service-editorial-visual::before {
  background: radial-gradient(ellipse at center, rgba(2,193,255,0.24) 0%, rgba(26,63,212,0.1) 42%, transparent 70%);
}
.service-editorial-row.svc-white .service-editorial-visual::before {
  background: radial-gradient(ellipse at center, rgba(87,171,40,0.16) 0%, rgba(68,181,156,0.16) 38%, rgba(26,63,212,0.1) 60%, transparent 76%);
}
/* Custom TaxFunders artwork (replaces the generic stroke icons that used to
   sit inside the circle). object-fit: contain plus a per-icon container
   size equalises PERCEIVED weight — each source PNG has a different amount
   of transparent padding baked around its own artwork (measured: Credit's
   bounding box fills ~84% of its canvas, Reset's ~82%, Tax's only ~70%,
   since the document+checkmark composition sits with more breathing room),
   so the same container size does not produce the same felt size. Colour is
   never touched here — no filter/hue-rotate/mask — the source files already
   carry the approved palette. */
.service-editorial-visual .service-editorial-icon {
  position: relative;
  z-index: 1;
  width: clamp(222px, 17vw, 248px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms var(--ease-out);
}
/* Tax's artwork has the most internal padding of the three (see above), so
   its stage size runs larger to land at the same felt size as Credit and
   Reset rather than reading as the smallest of the three. */
.service-editorial-visual .service-editorial-icon--tax { width: clamp(240px, 19vw, 265px); }
.service-editorial-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Nudge the icon stage slightly toward its content column so the artwork
   and copy read as one composition, without changing the alternating
   layout or the text column width. Desktop only — the mobile layout stacks
   icon above content, where a horizontal nudge would just look off-center. */
@media (min-width: 861px) {
  .service-editorial-row.svc-green .service-editorial-visual,
  .service-editorial-row.svc-white .service-editorial-visual { transform: translateX(4%); }
  .service-editorial-row.svc-sky .service-editorial-visual { transform: translateX(-4%); }
}

/* Premium, restrained hover: a small lift + scale on the artwork and a
   slightly stronger glow behind it. No rotation, no bounce, no neon flash. */
@media (hover: hover) and (pointer: fine) {
  .service-editorial-row:hover .service-editorial-icon { transform: translateY(-3px) scale(1.02); }
  .service-editorial-row:hover .service-editorial-visual::before { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .service-editorial-visual::before,
  .service-editorial-icon { transition: none; }
  .service-editorial-row:hover .service-editorial-icon { transform: none; }
}

.service-editorial-content h3 { margin-bottom: 16px; }
.service-editorial-content p { font-size: 0.9375rem; line-height: 1.75; color: var(--text-muted); max-width: 560px; margin-bottom: 24px; }

@media (max-width: 860px) {
  .service-editorial-row, .service-editorial-row:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
    text-align: center;
    gap: 12px;
  }
  .service-editorial-visual { max-width: 260px; margin: 0 auto; }
  .service-editorial-visual .service-editorial-icon { width: clamp(130px, 34vw, 155px); }
  .service-editorial-visual .service-editorial-icon--tax { width: clamp(150px, 38vw, 165px); }
  /* The stage box is a full square (matching its own width) so the icon can
     be centered in it, but that leaves generous empty space below the
     (much smaller) artwork before the heading starts. Pull the content
     block up to close that gap without touching the icon's own size. */
  .service-editorial-content { margin-top: -30px; }
  .service-editorial-content p { margin-left: auto; margin-right: auto; }
}

/* Services section intro: a little more separation from the section above,
   and a stronger "OUR SERVICES" eyebrow — scoped to #services only so the
   shared .section-label used elsewhere on the page is unaffected. */
#services .section-header { padding-top: 26px; }
#services .section-label { font-size: 1.05rem; letter-spacing: 0.16em; }

/* "Why Choose Us" — split intro + compact list, replacing a second card grid */
.why-split { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.why-split-intro { position: sticky; top: 120px; }
.why-split-stat { margin-top: 28px; padding: clamp(20px, 2.5vw, 24px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.why-split-stat .stat-number { font-size: clamp(2.25rem, 4vw, 3rem); }
.why-list { display: flex; flex-direction: column; }
.why-list-row {
  display: flex;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.why-list-row:first-child { padding-top: 0; }
.why-list-row:last-child { border-bottom: none; }
.why-list-row:hover { padding-left: 8px; }
.why-list-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(87,171,40,0.1);
  transition: var(--transition);
}
.why-list-icon.blue { background: rgba(2,193,255,0.1); }
.why-list-row:hover .why-list-icon { transform: scale(1.1); }
.why-list-body h3 { margin-bottom: 6px; }
.why-list-body p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; max-width: 520px; }

@media (max-width: 900px) {
  .why-split { grid-template-columns: 1fr; }
  .why-split-intro { position: static; }
}

/* ============================================================
   HOMEPAGE REBUILD — bold-direction components
   New, additive components for index.html. Nothing existing below
   this point is modified; other pages are unaffected. Every new
   transition/duration references the tokens above (--duration-*,
   --ease-out, --space-*) rather than hand-typed values.
   ============================================================ */

/* ---- Tilt (hero photo / service icons / blueprint / Steven photo) ---- */
[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(800px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition: transform var(--duration-base) var(--ease-out);
  will-change: transform;
}

/* ---- Hero: ambient drift on the background glow blobs ---- */
.hero-bg::before, .hero-bg::after { animation: heroDrift 22s ease-in-out infinite alternate; }
.hero-bg::after { animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes heroDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 4%) scale(1.08); }
}
.hero-photo { transition: transform 0.1s linear; }

/* ---- Who We Are: trendline draws itself in on scroll (JS sets dasharray) ---- */
.who-we-are-trendline polyline { transition: stroke-dashoffset 1.8s var(--ease-out); }

/* ---- The TaxFunders Approach: open editorial layout (no bordered cards) ---- */
.approach-pullline {
  max-width: 680px;
  margin: -8px auto 56px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--gray-200);
  line-height: 1.6;
}
.approach-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.approach-step {
  border-left: 1px solid var(--border);
  padding-left: var(--space-4);
}
.approach-step:first-child { border-left: none; padding-left: 0; }
.approach-step-num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.75rem;
  margin-bottom: 12px;
}
.approach-step:nth-child(odd) .approach-step-num { color: var(--sky-400); }
.approach-step:nth-child(even) .approach-step-num { color: var(--green-500); }
.approach-step-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--white);
  margin-bottom: 10px;
}
.approach-step-body {
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.7;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .approach-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .approach-step:nth-child(odd) { border-left: none; padding-left: 0; }
  .approach-step:nth-child(even) { border-left: 1px solid var(--border); padding-left: var(--space-4); }
}

/* Mobile: an open vertical progression — small numbered markers on a subtle
   line — instead of stacking four bordered cards. */
@media (max-width: 768px) {
  .approach-steps { display: block; }
  .approach-step,
  .approach-step:first-child {
    position: relative;
    border-left: none;
    padding-left: 44px;
    padding-bottom: 32px;
  }
  .approach-step:last-child { padding-bottom: 0; }
  .approach-step::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: -2px;
    width: 2px;
    background: var(--border);
  }
  .approach-step:last-child::before { display: none; }
  .approach-step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    margin-bottom: 0;
  }
}

/* ---- Testimonial marquee (replaces the static 3-card grid) ---- */
.testimonial-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: marqueeScroll 42s linear infinite;
}
.testimonial-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .testimonial-card { flex: 0 0 380px; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .marquee-track .testimonial-card { flex-basis: 300px; } }

/* ---- Final CTA: slow ambient glow orbs ---- */
.cta-banner { overflow: hidden; }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner::before, .cta-banner::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 46%; height: 70%; border-radius: 50%; filter: blur(10px);
}
.cta-banner::before { top: -20%; left: -8%; background: radial-gradient(circle, rgba(2,193,255,0.16) 0%, transparent 70%); animation: heroDrift 20s ease-in-out infinite alternate; }
.cta-banner::after { bottom: -25%; right: -10%; background: radial-gradient(circle, rgba(87,171,40,0.14) 0%, transparent 70%); animation: heroDrift 24s ease-in-out infinite alternate-reverse; }

/* ============================================================
   FREE LEARNING CENTER — landing-page components (.lc-*)
   Colour discipline for this page:
     navy      = foundation / authority
     cyan-blue = learning, navigation, category cues, rules
     green     = action / progress / CTA only
   No new palette values are introduced; every colour below is an
   existing token or an alpha of one.
   ============================================================ */

/* ---- Hero ----
   ONE integrated two-column composition: the Learning Center message on the
   left, the Credit Blueprint feature on the right. They used to be a message
   at the top followed by a large empty gap and a disconnected panel below —
   two unrelated sections rather than one hero. */
.lc-hero-grid {
  display: grid;
  /* 7:5 ~= 58/42, inside the approved 55-62/38-45 band. Falls back to one
     column below 980px — see the breakpoint further down. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* Top-aligned, not centred: centring left the card's own vertical middle
     matched against the paragraph's, which is what read as "a text block
     with a card set beside it" rather than one composition — nothing in the
     two columns shared a real edge. Aligning both to the top and nudging the
     card down to meet the HEADLINE (not the eyebrow above it) gives the pair
     a deliberate shared start line instead of an accidental shared middle. */
  align-items: start;
  gap: clamp(40px, 5vw, 72px);
}
/* Inside the grid the column itself sets the width; the old flat 880px cap
   would have let the copy overflow into the Blueprint card's gutter at
   in-between widths. */
.lc-hero-grid .lc-hero-content { max-width: none; }
/* The Learning Center identifier, strengthened for the page it opens: a
   step up in size, weight and tracking from the shared .section-label used
   everywhere else, and a mirrored gradient across BOTH flanking rules
   (green-to-cyan on the left, cyan-to-green on the right) rather than the
   plain-left/gradient-right mismatch this used to carry — the two rules now
   read as one pair converging on the label, not two different treatments
   sitting side by side. */
.lc-hero-content .section-label {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  gap: 18px;
}
.lc-hero-content .section-label::before {
  width: 36px;
  background: linear-gradient(90deg, var(--green-600) 0%, var(--sky-400) 100%);
}
.lc-hero-content .section-label::after {
  width: 36px;
  background: linear-gradient(90deg, var(--sky-400) 0%, var(--green-600) 100%);
}
/* Narrower measure than the old 46ch and a real gap above it (the headline
   and paragraph previously sat flush with zero space between them, which
   read as cramped and also left the column shorter than it needed to be
   next to the Blueprint card). Both are real typographic fixes, not padding
   added to consume space: a ~40ch line is closer to the classic 45-75
   character comfortable measure, and 22px is the same step the hero already
   uses between its other elements. */
.lc-hero-body { margin-top: clamp(18px, 2vw, 22px); max-width: 40ch; color: var(--gray-200); }
/* Closing brand thought of the hero paragraph. Cyan (not green) because
   it's an educational cue, not an action — and inline, not a second slogan. */
/* Sized up because Cormorant sets optically smaller than Inter at the same
   px: at 1em it read as a footnote rather than the sentence's destination.
   1.18em lands it at roughly the same apparent size as the body text. */
.lc-tm {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.18em;
  letter-spacing: 0.005em;
  color: var(--sky-300);
  /* Held together so the paragraph lands on the whole phrase rather than
     breaking it as "Make Money Make / Sense™". */
  white-space: nowrap;
}
/* The headline is narrower here than a full-width hero affords, so it takes
   a smaller ceiling than the shared .display-2 clamp: at ~640px of column
   width the 4.5rem cap wrapped to four lines, which read as compressed
   rather than editorial. This keeps it to a clean two lines at every desktop
   width the grid runs at. */
.lc-hero-grid .display-2 {
  font-size: clamp(2.25rem, 3.1vw + 1.1rem, 3.25rem);
  text-wrap: balance;
}

/* ---- Credit Blueprint — the hero's feature card ----
   A compact vertical card rather than the wide horizontal strip this used to
   be: at hero-column width a side-by-side thumbnail-and-copy layout left the
   book too small to read as a real object. Book on top, copy below, one
   column throughout — which also means the same markup and the same rules
   serve the stacked mobile hero without a second breakpoint rewrite. */
.lc-featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 400px;
  margin: 0 auto;
  /* Nudges the card down to meet the eyebrow+headline block on its left,
     rather than the eyebrow alone — the two-column grid above is
     align-items:start, so without this the card's TOP would line up with
     the small eyebrow line instead of the headline it visually belongs
     beside. ~1 eyebrow line + its own margin. */
  margin-top: clamp(30px, 3.4vw, 44px);
  padding: clamp(24px, 2.4vw, 32px) clamp(24px, 2.6vw, 32px) clamp(26px, 2.6vw, 34px);
  /* Same navy family as the page underneath it, not a lighter "card" tone —
     the point is that this reads as part of the hero surface with a border
     around it, not as a separate panel dropped on top of the hero. */
  background: linear-gradient(150deg, rgba(16,27,48,0.72) 0%, rgba(7,14,29,0.86) 100%);
  border: 1px solid rgba(2,193,255,0.20);
  border-radius: var(--radius-lg);
  /* Softer than --shadow-card's default: enough lift to read as a card, not
     enough to look like it is floating above the hero rather than in it. */
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  position: relative;
  overflow: hidden;
}
/* Single restrained cyan bloom — the only decoration this card gets. */
.lc-featured::before {
  content: '';
  position: absolute;
  top: -55%; left: -20%;
  width: 90%; height: 180%;
  background: radial-gradient(ellipse, rgba(2,193,255,0.12) 0%, transparent 68%);
  pointer-events: none;
}
.lc-featured > * { position: relative; z-index: 1; }
.lc-featured-copy { display: contents; }
.lc-featured-art { display: flex; justify-content: center; order: 2; }
/* The mockup is a 2:3 portrait, so height is what actually governs its size
   here — max-width alone never binds. */
.lc-featured-art img {
  width: 100%;
  max-width: 150px;
  max-height: 200px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.5));
}
/* Flanked on both sides, same structure as the hero's own eyebrow
   (.lc-hero-content .section-label) — it previously carried a rule on the
   left only, which was the actual source of the two eyebrows reading as two
   different treatments side by side rather than one consistent device. */
.lc-featured-label {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-400);
}
.lc-featured-label::before,
.lc-featured-label::after {
  content: '';
  width: 18px; height: 2px;
  background: var(--sky-400);
  border-radius: 2px;
  flex-shrink: 0;
}
.lc-featured-title {
  order: 3;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
}
.lc-featured-hook {
  order: 4;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--gray-200);
  max-width: 40ch;
  margin: 0 auto;
}
.lc-featured-support {
  order: 5;
  font-size: 0.8125rem;
  line-height: 1.6;
  /* Was --text-muted (#7A93C0): fine on the old full-width strip, too faint
     once the card compacted and this became the last thing a reader's eye
     passes before the CTA. gray-200 keeps it a clear third tier under the
     hook without going bright white. */
  color: var(--gray-200);
  max-width: 42ch;
  margin: 0 auto;
}
.lc-featured-cta { order: 6; width: 100%; margin-top: 6px; }
.lc-featured-cta .btn { width: 100%; justify-content: center; }

/* ---- Hero background ----
   The base .page-hero-bg gives every inner page a restrained blue/green
   radial pair; the Learning Center hero earns a second, wider layer on top of
   it so the two-column composition reads as one lit surface rather than a
   plain dark rectangle behind two unrelated halves.

   The two colour events (cyan over the message, green over the Blueprint)
   are deliberately oversized and pulled toward the CENTRE rather than parked
   in their own corners, so they overlap in the middle instead of leaving a
   visible seam between a "blue half" and a "green half". Indigo sits under
   both as a wide low layer that spans the full width and is what actually
   does the blending. CSS gradients only — no new artwork. */
.lc-hero.page-hero .page-hero-bg {
  background:
    radial-gradient(ellipse 78% 85% at 26% 12%, rgba(2,193,255,0.13) 0%, transparent 68%),
    radial-gradient(ellipse 72% 80% at 78% 30%, rgba(87,171,40,0.11) 0%, transparent 66%),
    radial-gradient(ellipse 130% 90% at 50% 92%, rgba(41,51,130,0.26) 0%, transparent 70%);
}

/* Below 980px the two columns get too narrow to hold both a two-line
   headline and a legible Blueprint card, so the hero drops to one column:
   message first, Blueprint feature second — which is also DOM order, so
   nothing needs reordering. */
@media (max-width: 980px) {
  .lc-hero-grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .lc-hero-grid .display-2 { font-size: clamp(2.25rem, 4vw + 0.9rem, 3.25rem); }
}



/* ---- Learning Center hero, phone sizes ----
   COPY IS UNCHANGED — this is typography and rhythm only. At 390 the shared
   .display-2 clamp bottoms out at 40px, which on a 350px measure broke the
   headline into short ragged lines and pushed the paragraph below the fold as a
   wall of 16px/1.7 text. Smaller headline, tighter leading, a slightly shorter
   body measure and real space between the three elements: the same words, read
   as an editorial opening instead of a block. */
@media (max-width: 640px) {
  /* Pushed further down again — 10B2H's clamp(104px,25vw,128px) still read
     as the identifier opening right under the fixed nav rather than the
     flagship page beginning its own space. This clears the 84px nav bar with
     real margin at both 390 and 360. */
  .lc-hero { padding-top: clamp(126px, 30vw, 152px); padding-bottom: clamp(22px, 5.5vw, 32px); }
  /* A second, tighter glow pair for the narrow phone canvas, pulled toward
     the centre the same way the desktop version is, so the eyebrow-and-card
     seam doesn't read as a blue half meeting a green half. */
  .lc-hero.page-hero .page-hero-bg {
    background:
      radial-gradient(ellipse 120% 30% at 30% 0%, rgba(2,193,255,0.17) 0%, transparent 64%),
      radial-gradient(ellipse 120% 40% at 70% 55%, rgba(87,171,40,0.13) 0%, transparent 64%),
      radial-gradient(ellipse 140% 30% at 50% 100%, rgba(41,51,130,0.22) 0%, transparent 68%);
  }
  /* Eyebrow and headline centre on the phone canvas — the same split the
     site already uses on every other inner-page hero
     (.page-hero-content:not(.no-mobile-center)), just applied locally since
     this hero opts out of that shared rule for its two-column desktop
     layout. The paragraph stays left-aligned: centred multi-line prose is
     harder to read, and a centred headline over a left paragraph is the
     established pattern elsewhere on the site, not a one-off. */
  .lc-hero-content { text-align: center; }
  /* Reads as a real page identifier rather than a throwaway label — a
     further step up from 10B2H's 0.8125rem, with the flanking rules held at
     12px (down from the base 36px) so the larger text still clears a 360px
     measure; shrinking the rules rather than the text is what makes the
     larger size fit. */
  .lc-hero-content .section-label {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    gap: 8px;
    justify-content: center;
  }
  .lc-hero-content .section-label::before,
  .lc-hero-content .section-label::after { width: 12px; }
  .lc-hero-content .display-2 {
    margin-top: 18px;
    font-size: clamp(2rem, 8.6vw, 2.375rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .lc-hero-body {
    text-align: left;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9375rem;
    line-height: 1.68;
    max-width: 34ch;
  }
  /* The trademark phrase is the sentence's destination and must not be the one
     thing that overflows: on a narrow measure it may wrap. */
  .lc-tm { white-space: normal; }
  /* The Blueprint feature stays visually PART of the hero rather than a card
     that happens to sit below it: the hero's gradient continues underneath
     it, and the gap above it is the smallest rhythm step on the page, not a
     section break. Card trimmed for real height savings — smaller book,
     tighter internal gap and padding — while staying comfortably legible.
     Widened from 22px so the card reads as its own deliberate stop rather
     than crowding the paragraph above it. */
  .lc-hero-grid { gap: 30px; }
  .lc-featured { max-width: 100%; gap: 11px; margin-top: 0; padding: 24px 20px 22px; }
  .lc-featured-art img { max-width: 130px; max-height: 174px; }
  .lc-featured-hook { font-size: 0.875rem; }
  .lc-featured-support { font-size: 0.75rem; }
  .lc-featured-cta { margin-top: 3px; }
  .lc-featured-cta .btn { min-height: 52px; }
}
/* At 360-375 the 0.875rem/0.1em pairing above (measured to fit 390 with room
   to spare) runs about 24px past the available width once the container's
   own padding is subtracted, wrapping the label to two lines with its rules
   stranded either side of the break — the exact failure already fixed once
   on this eyebrow. A small further step down (measured, not guessed) keeps
   it on one line through the narrowest supported width. */
@media (max-width: 375px) {
  .lc-hero-content .section-label { font-size: 0.8125rem; letter-spacing: 0.08em; }
}

/* ---- Learning Center section heads, phone sizes ----
   On a phone the eyebrow, the H2 and the intro were arriving at nearly the same
   weight, so a new category read as another paragraph rather than a new
   section. More air above, a larger H2, and a rule under the head so the cards
   below clearly belong to it. */
@media (max-width: 640px) {
  .lc-sec { padding: clamp(44px, 11vw, 62px) 0; }
  /* Eyebrow and title centre, matching the same split used in the main hero
     above and every other inner-page hero on the site; the intro paragraph
     stays left so multi-line prose stays easy to read. Centring reads as a
     real featured section opening rather than a left-run paragraph block. */
  .lc-sec-head { margin-bottom: 24px; padding-bottom: 20px; text-align: center; }
  .lc-sec-desc {
    justify-content: center;
    gap: 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
  }
  /* Flanked on both sides once centred — a rule only on the left reads fine
     against a left-aligned line, but centred it left the text pulled toward
     one side. Same device as the hero eyebrows above, so the whole page uses
     one eyebrow language rather than several. */
  .lc-sec-desc::after {
    content: '';
    width: 26px; height: 2px;
    background: var(--sky-400);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .lc-sec-title { font-size: clamp(1.875rem, 8vw, 2.25rem); line-height: 1.08; }
  .lc-sec-intro {
    text-align: left;
    margin-top: 14px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9375rem;
    line-height: 1.65;
    max-width: 38ch;
  }
  /* Shares the intro's own centred box and left edge (max-width + auto
     margins) rather than spanning the full centred head — so the two read
     as one left-aligned reading column sitting under a centred opening,
     not two independently-positioned pieces. */
  /* text-align: left explicitly — without it this inherits the centred
     text-align from .lc-sec-head above, which read as awkward on a
     left-bordered marker built to sit flush against its own rule. */
  .lc-series-note { margin-top: 18px; max-width: 38ch; margin-left: auto; margin-right: auto; text-align: left; }
  .lc-series-line { font-size: 0.8125rem; }
}

/* ---- Section rhythm & heads ---- */
.lc-sec { padding: clamp(56px, 7vw, 92px) 0; }
.lc-sec[hidden] { display: none !important; }
.lc-sec-head {
  margin-bottom: clamp(28px, 3.4vw, 44px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.lc-sec-desc {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky-400);
  margin-bottom: 14px;
}
.lc-sec-desc::before {
  content: '';
  width: 26px; height: 2px;
  background: var(--sky-400);
  border-radius: 2px;
  flex-shrink: 0;
}
.lc-sec-title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
}
/* Authored lead-in under each section title, so a category opens with a
   written thought rather than dropping straight into a card grid. */
.lc-sec-intro {
  margin-top: 16px;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-200);
}

/* ---- Explore the Learning Center — a full-width navigation SHELF ----
   A table of contents, not a destination. These scroll DOWN THIS PAGE to the
   four category sections; leaving for a category page is what the VIEW ALL
   button at the end of each section does, and the two must not look alike.

   TWO EARLIER ATTEMPTS, two different failures: a bordered card floating
   between sections read as "a random box dropped into the page"; removing
   the box entirely and using a plain section-head pattern instead solved
   that but left Explore sitting in the same uninterrupted dark canvas as
   the hero above AND the content below, with no surface of its own — so it
   read as glued to whichever section sat closer at a given viewport.

   THE FIX is section OWNERSHIP, not another container: the outer <section>
   itself — full width, edge to edge — carries a faint elevated tint and a
   hairline top/bottom boundary, so Explore gets its own visible surface
   without a card around its content. The four destinations and the header
   still sit in the page's normal centred .container; only the SECTION
   grows a background, not the content inside it. */
.lc-jump-sec {
  position: relative;
  padding: clamp(28px, 3.2vw, 40px) 0;
  /* A restrained lift off the base navy — two low-alpha colour events (cyan
     upper-left, green lower-right) over a slightly bluer tonal wash, never
     bright enough to read as a panel. The same restraint the hero's own
     background uses, at roughly a third of the strength, since this section
     has to feel like a step UP from the page, not a competing light source. */
  background:
    radial-gradient(ellipse 60% 130% at 10% 0%, rgba(2,193,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 130% at 90% 100%, rgba(87,171,40,0.045) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,31,68,0.5) 0%, rgba(7,14,29,0.92) 100%);
  /* Top and bottom hairlines give the shelf real edges — where Explore
     begins and ends is now something the page shows, not something a reader
     has to infer from spacing alone. Top leans indigo (echoing the hero's
     own depth colour just above it); bottom leans the faintest cyan, easing
     toward the plain page surface the next section sits on. */
  border-top: 1px solid rgba(41,51,130,0.42);
  border-bottom: 1px solid rgba(2,193,255,0.16);
}
/* The global `.page-hero + section { padding-top: 0 }` rule (written for
   inner pages that flow straight from hero into body copy) was winning over
   .lc-jump-sec's own top padding on specificity, leaving Explore with
   effectively none of its own. This pair gets its own override, specific to
   the Learning Center hero — sized for a much shorter hop than before: the
   shelf's own surface and hairline now do the work of separating Explore
   from the hero, so the GAP itself no longer has to be large to read as
   intentional. */
.page-hero.lc-hero + .lc-jump-sec {
  padding-top: clamp(36px, 4.2vw, 52px);
}
/* Explore's own bottom padding plus Money's usual top padding used to stack
   to nearly 200px of open canvas — the single biggest reason Explore read
   as floating rather than owned. Scoped to the section immediately after
   Explore (Money), not .lc-sec generally, so no other category's rhythm
   changes — and to tablet/desktop widths only: this selector's specificity
   would otherwise outrank the dedicated mobile .lc-sec padding rule below
   and shrink Money's approved mobile top spacing as a side effect. */
@media (min-width: 641px) {
  .lc-jump-sec + .lc-sec {
    padding-top: clamp(20px, 2.2vw, 28px);
  }
}
.lc-jump-head {
  margin-bottom: clamp(28px, 3.2vw, 40px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
/* MOBILE HIERARCHY (approved, unchanged below 641px): the label is the
   section's real title and reads as one — larger and bolder than a category
   eyebrow. The cue sits on its own line beneath, smaller and unbolded,
   clearly subordinate. */
.lc-jump-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-500);
  line-height: 1.2;
}
.lc-jump-label::before {
  content: '';
  width: 30px; height: 2px;
  background: var(--green-600);
  border-radius: 2px;
  flex-shrink: 0;
}
/* Says what the arrows mean, so nobody has to click one to find out these
   stay on the page — sized and coloured to sit clearly beneath the label
   above it now, not beside it at competing weight. */
.lc-jump-cue {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}
/* DESKTOP/TABLET HIERARCHY — the mobile pairing above works at phone widths,
   but at 641px and up it left "Explore the Learning Center" and "Start
   Where You Need Clarity" reading as two utility labels rather than a real
   section opening. Inverted here: the label becomes a small tracked KICKER
   (the same role .lc-sec-desc plays on every category below it), and the
   cue becomes the section's actual editorial heading — Cormorant, sized
   like a real heading, off-white rather than green so it doesn't compete
   with the kicker's accent colour. Centred, which is the deliberate visual
   difference from the left-aligned category sections below: navigation
   reads as one thing, content as another. */
@media (min-width: 641px) {
  .lc-jump-head {
    text-align: center;
    padding-bottom: 0;
    border-bottom: none;
  }
  .lc-jump-label {
    justify-content: center;
    gap: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
  }
  .lc-jump-label::before { width: 22px; }
  .lc-jump-label::after {
    content: '';
    width: 22px; height: 2px;
    background: var(--green-600);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .lc-jump-cue {
    margin-top: 12px;
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 1.6vw + 1.35rem, 2.25rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--white);
  }
  /* The one purposeful accent this pass adds: closes the header and leads
     the eye down into the four destinations, in the same cyan-to-green
     pairing the hero eyebrow's flanking rules use. Removed with the rest of
     this block if it ever reads as decorative rather than structural. */
  .lc-jump-head::after {
    content: '';
    display: block;
    margin: 20px auto 0;
    width: 52px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sky-400) 0%, var(--green-600) 100%);
  }
}
.lc-jump-set {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

/* Registered so the browser can interpolate it directly — without this, a
   custom property swapped inside an rgba() just snaps between two computed
   gradient strings instead of easing the alpha between them. */
@property --jump-edge-alpha {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.4;
}
/* A TOPIC GATEWAY, not a CTA button: one step up from the shelf's own
   tinted surface, related to the article cards' premium green-into-cyan
   language without matching their strength — the article cards remain the
   stronger visual objects, these are navigation.

   THE EDGE is a two-layer background rather than a plain `border`: one
   linear-gradient painted into the padding-box carries the (unchanged) dark
   interior fill, a second painted into the border-box carries the green-
   through-cyan gradient and shows only in the 1px ring between the two
   boxes. This keeps the rounded corners clean, needs no extra element (so
   nothing sits over the anchor to intercept a click), and the gradient's
   own alpha is what "hover strengthens the border" animates — no separate
   border-color property is competing with it. `--jump-edge-alpha` is the
   one thing hover changes on this layer. */
/* 10B2L: the interior fill (was rgba(7,14,29,0.55) — only 55% opaque) let
   the border-box edge gradient underneath it show through across the WHOLE
   card, not just the 1px ring outside padding-box: the two layers overlap
   everywhere padding-box exists, so a translucent top layer always reveals
   a slice of whatever sits behind it. That read as a green/teal panel, not
   an edge. Fixed with three layers instead of two — a near-opaque navy fill
   (padding-box) now masks the gradient everywhere except the true border
   ring, with only a whisper of green at the card's own top edge (capped at
   0.05 alpha, faded out by 40% down) for the "extremely subtle tint" the
   brief allows without it reading as a fill. */
.lc-jump-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 17px 14px 15px;
  --jump-edge-alpha: 0.4;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(87,171,40,0.05) 0%, transparent 40%) padding-box,
    linear-gradient(180deg, rgba(12,22,44,0.97) 0%, rgba(7,14,29,0.99) 100%) padding-box,
    linear-gradient(135deg,
      rgba(87,171,40,var(--jump-edge-alpha)) 0%,
      rgba(68,181,156,var(--jump-edge-alpha)) 45%,
      rgba(2,193,255,var(--jump-edge-alpha)) 100%) border-box;
  border-radius: calc(var(--radius) - 3px);
  text-align: center;
  overflow: hidden;
  transition: --jump-edge-alpha 0.18s var(--ease-out),
              background 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              box-shadow 0.18s var(--ease-out);
}
/* Tight tracking (not the buttons' old 0.1em) is what actually lets "MAKE
   YOUR MONEY MAKE SENSE" hold one line inside a quarter of the 1200px
   container — widening the grid or shrinking the font both cost more than
   this does. */
/* min-height reserves the full 2-line title zone even when a shorter title
   ("Know Your Credit") only needs one — so every card's description starts
   at the same Y position instead of floating up to meet a shorter title.
   flex + centering lets the shorter title sit centred in that reserved
   space rather than stranded at its top. */
.lc-jump-btn-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* Subordinate to the title on every axis available: smaller, regular
   weight, muted, sentence case. Two-line cap is enforced with a clamp, not a
   fixed height, so it never grows a third line even if a future edit makes
   one description a little longer — min-height reserves the same 2-line
   zone as the title above it, for the same reason: a 1-line description
   ("Age-based money lessons...") stays vertically centred in the space a
   2-line one would use, so all four arrows land on one shared baseline
   rather than each card's arrow following its own content length up or
   down. color lightened from --text-muted for readability — still clearly
   secondary to the title, not the same tier. */
.lc-jump-btn-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  min-height: 2.8em;
  max-width: 24ch;
  overflow: hidden;
  color: var(--gray-200);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.lc-jump-arrow { margin-top: 2px; }
/* Each option carries a hairline of its own category's colour — the same
   restrained identity the article cards use, at a fraction of the strength,
   so the rail hints at the four destinations without turning into four
   bright buttons. Brightens under a pointer; the shell's green stays what
   ties the four options together as one control. Opacity trimmed slightly
   (was 0.32/0.9) now that the gradient edge also carries colour, so the two
   don't compete for the same attention at rest. */
.lc-jump-btn::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--jump-accent, var(--green-600));
  opacity: 0.26;
  transition: opacity 0.18s var(--ease-out);
}
.lc-jump-btn[data-category='make-your-money-make-sense'] { --jump-accent: var(--teal-500); }
.lc-jump-btn[data-category='know-your-credit']            { --jump-accent: var(--sky-400); }
.lc-jump-btn[data-category='make-taxes-make-sense']       { --jump-accent: var(--blue-600); }
.lc-jump-btn[data-category='money-starts-early']          { --jump-accent: var(--lime-400); }
/* Premium, restrained motion: a 1px lift (not the 5px+ jump a CTA button
   might use), the gradient edge strengthening (--jump-edge-alpha up), the
   bottom accent brightening, a very soft cyan-green glow, and — because
   every one of these links scrolls DOWN the page — the arrow moves down
   with it rather than up. A hover that nudged the whole card upward while
   its own arrow pointed down would be arguing with itself. */
@media (hover: hover) {
  .lc-jump-btn:hover {
    --jump-edge-alpha: 0.7;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(0,0,0,0.5), 0 0 20px -12px rgba(2,193,255,0.35);
  }
  .lc-jump-btn:hover::after { opacity: 0.85; }
  .lc-jump-btn:hover .lc-jump-arrow { color: var(--jump-accent, var(--green-500)); transform: translateY(2px); }
}
.lc-jump-btn:focus-visible { outline: 2px solid var(--jump-accent, var(--green-500)); outline-offset: 2px; }
.lc-jump-arrow {
  width: 13px; height: 13px;
  flex-shrink: 0;
  color: var(--green-500);
  transition: transform 0.18s var(--ease-out),
              color 0.18s var(--ease-out);
}

/* Between the fold and full desktop width, a single-row-of-4 column is too
   narrow for "MAKE YOUR MONEY MAKE SENSE" at the base tracking — a small,
   controlled reduction (not a blanket shrink of every title) is enough to
   hold it on one line through this range. */
@media (min-width: 900px) and (max-width: 1180px) {
  .lc-jump-btn-title { font-size: 0.6875rem; letter-spacing: 0; }
  .lc-jump-btn { padding-left: 8px; padding-right: 8px; }
}
/* The four destinations fold to a 2x2 grid once a row of four gets tight —
   the header above stays exactly the same shape at every width down to here. */
@media (max-width: 899px) {
  .lc-jump-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a phone the header centres — the same split every other section head on
   this page uses on mobile (.lc-sec-head) — and picks up a matching rule on
   BOTH sides rather than the single left rule that reads fine against a
   left-aligned line but pulls to one side once centred. Each destination
   gets a shared min-height so two rows of different copy length still land
   at the same height — the grid alone only equalises within a single row. */
@media (max-width: 640px) {
  .lc-jump-sec { padding: clamp(40px, 10vw, 52px) 0; }
  .page-hero.lc-hero + .lc-jump-sec { padding-top: clamp(44px, 11vw, 60px); }
  .lc-jump-head {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 18px;
  }
  /* Centred, so the single left-side rule (correct beside a left-aligned
     line, same as .lc-sec-desc) needs a mirrored right-side rule or it reads
     lopsided pulling the text toward one side. Matching rule added below;
     dropped altogether at 375px if the measure gets too tight for both. */
  .lc-jump-label { justify-content: center; font-size: 0.8125rem; letter-spacing: 0.12em; }
  .lc-jump-label::after {
    content: '';
    width: 30px; height: 2px;
    background: var(--green-600);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .lc-jump-cue { margin-top: 6px; font-size: 0.75rem; }
  .lc-jump-set { gap: 10px; }
  .lc-jump-btn {
    min-height: 128px;
    padding: 18px 10px 16px;
  }
  .lc-jump-btn-title { font-size: 0.75rem; letter-spacing: 0.02em; }
  /* max-width: none — the desktop 24ch cap (sized for a wider single-row
     column) was capping mobile descriptions to LESS than their own already-
     narrow 2-column width. Font-size stepped down one notch further too:
     at 0.6875rem the longest approved line ("Understand your credit and
     strengthen your profile.") still needed a third line inside a ~130px
     column, which is exactly the ellipsis-truncation the copy is short
     enough to avoid if the type fits the column it actually has. */
  /* Bumped one notch from 0.625rem for readability — re-tested against the
     longest approved line at this column width with the max-width already
     removed (that comment's "still needs a third line" finding predates the
     10B2I fix), and it holds 2 lines cleanly with no truncation. */
  .lc-jump-btn-desc { font-size: 0.6875rem; line-height: 1.35; max-width: none; }
}
/* At 360-375 the label's two flanking rules plus its own larger text were
   tight enough to risk crowding — rather than leave one rule and not the
   other (the exact plain-left/gradient-right mismatch already fixed on the
   hero eyebrow), this width drops BOTH and leans on colour and weight alone. */
@media (max-width: 375px) {
  .lc-jump-label::before,
  .lc-jump-label::after { display: none; }
  .lc-jump-label { gap: 0; }
  /* The 0.6875rem readability bump above holds at 390 but wraps three of
     the four descriptions to a 3rd (truncated) line once the column drops
     to 360's ~131px — measured, not assumed. Stepped back down for this
     width only; still a readability gain over the original 0.625rem
     everywhere else that fits it. */
  .lc-jump-btn-desc { font-size: 0.625rem; }
}

/* A jump target has to land BELOW the fixed header, or the heading it scrolled
   to is the one thing hidden. Measured, not guessed: .nav renders 84px tall and
   does not compact on scroll, so 108px puts the section eyebrow ~24px clear. */
.lc-sec, .lc-featured-wrap, .lc-jump-sec { scroll-margin-top: 108px; }

/* ---- Home Readiness series note ----
   Flags a named TaxFunders speciality running inside the broader Know Your
   Credit intro, without making the section read as though it is ONLY about
   Home Readiness. Previously a pill badge floating beside a loose line of
   text — a chip, which read exactly as "dropped in" rather than designed.
   Restyled as a left-bordered marker using the same rule-plus-caps eyebrow
   language as every other label in the Learning Center (.lc-sec-desc,
   .lc-hero-content .section-label), just in the shell's green rather than
   cyan: a featured focus flagged inside the section, not a badge stapled to
   the end of a sentence. */
.lc-series-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--green-600);
}
.lc-series-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-500);
}
.lc-series-badge::before {
  content: '';
  width: 16px; height: 2px;
  background: var(--green-600);
  border-radius: 2px;
  flex-shrink: 0;
}
.lc-series-line { font-size: 0.875rem; line-height: 1.45; color: var(--gray-200); }

/* ---- Home category slice ----
   Four cards on desktop and tablet, the first two of the same four on a phone.
   The tail is removed with display:none rather than duplicated into a second
   markup block: a hidden card leaves the accessibility tree and the tab order
   together, so nothing is announced twice and nothing is focusable while
   invisible. This grid is the HOME's and stays 2x2 — the category galleries
   size themselves by safe card width instead. */
.lc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
@media (max-width: 719px) {
  .lc-cards { grid-template-columns: 1fr; }
  .lc-cards-item[data-beyond-mobile] { display: none; }
}

/* Navigation, not a hero: smaller heading and less air than a content
   section head. ~34-38px across desktop widths. */
#explore.lc-sec { padding: clamp(38px, 4.4vw, 58px) 0; }
#explore .lc-sec-head { margin-bottom: clamp(20px, 2.2vw, 28px); padding-bottom: 14px; }
#explore .lc-sec-title { font-size: clamp(2.125rem, 2.6vw, 2.375rem); }

/* ---- "See more" category expansion control ----
   Cyan, never green: this expands education, it doesn't convert. */
.lc-more-wrap { display: flex; justify-content: center; margin-top: clamp(22px, 2.6vw, 32px); }
.lc-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  background: linear-gradient(150deg, var(--surface-raised) 0%, var(--navy-700) 100%);
  border: 1px solid rgba(2,193,255,0.35);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
/* On hover the accent eases from cyan toward the brand's green rather than
   just brightening the same cyan — a subtle shift in hue, not a colour swap
   to a neon fill. Still a restrained glow at low alpha, not a button that
   turns green. */
.lc-more-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(87,171,40,0.55);
  background: linear-gradient(150deg, #16241c 0%, var(--navy-600) 100%);
  box-shadow: var(--shadow-card), 0 0 30px rgba(87,171,40,0.14);
}
.lc-more-btn:hover .lc-more-icon { color: var(--green-500); }
.lc-more-btn:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 3px; }
.lc-more-icon { width: 15px; height: 15px; color: var(--sky-400); flex-shrink: 0; transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.lc-more-btn.is-expanded .lc-more-icon { transform: rotate(180deg); }
/* .lc-card sets display:flex at the same specificity as the UA's [hidden]
   rule and would win on order, so hidden cards need this to actually hide. */
.lc-card[hidden] { display: none !important; }

/* ---- Article grids ---- */
.lc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
.lc-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .lc-grid, .lc-grid--two { grid-template-columns: 1fr; } }

/* ---- Article card (one reusable component for every category) ---- */
.lc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.lc-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
}
/* Whole-card target via a stretched link on the title: the accessible name
   is the article title (not a wall of identical "Read Article" links), and
   the tap area is the entire card rather than one small line of text. */
.lc-card-title a { color: inherit; text-decoration: none; }
.lc-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lc-card-title a:focus-visible { outline: none; }
.lc-card:focus-within {
  outline: 2px solid var(--sky-400);
  outline-offset: 3px;
  border-color: var(--border-light);
}
.lc-card:focus-within .lc-card-cta,
.lc-card:hover .lc-card-cta { color: var(--lime-400); }
.lc-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 22px 24px 24px;
}
.lc-card-cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-400);
}
.lc-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
}
/* Reserved slot: verified read times get dropped in here later. */
.lc-card-meta { font-size: 0.75rem; color: var(--text-muted); }
.lc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-500);
}
.lc-card-cta svg { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); }
.lc-card:hover .lc-card-cta svg { transform: translateX(4px); }

/* Lead card — full-bleed row, horizontal on desktop. Opens a category. */
.lc-card--lead { grid-column: 1 / -1; }
@media (min-width: 900px) {
  /* Min-height keeps the lead genuinely leading: without it the horizontal
     layout collapses to roughly half the height of the standard cards
     sitting under it, which reads as smaller, not more important. */
  .lc-card--lead { flex-direction: row; align-items: stretch; min-height: 300px; }
  .lc-card--lead .lc-card-art {
    flex: 0 0 42%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .lc-card--lead .lc-card-body { justify-content: center; padding: clamp(28px, 3.2vw, 44px); gap: 14px; }
  .lc-card--lead .lc-card-title { font-size: clamp(1.5rem, 2.3vw, 2.125rem); }
  /* The body is centred here, so the standard margin-top:auto would strand
     the CTA at the bottom of a tall card, away from its own headline. */
  .lc-card--lead .lc-card-cta { margin-top: 6px; }
}
/* Wide card — two tracks, taller art. Deliberately a different beat from
   the lead card so no two category sections read the same way. */
.lc-card--wide { grid-column: span 2; }
@media (min-width: 900px) {
  /* A wide card is ~2x the width of its neighbour, so a normal 16/9 crop
     would make it far taller and strand the single-track card beside it
     with a large void. This ratio lands both at roughly the same height,
     giving the row a deliberate cinematic-banner beat instead. */
  .lc-card--wide .lc-card-art { aspect-ratio: 3.4 / 1; }
  .lc-card--wide .lc-card-title { font-size: clamp(1.375rem, 1.9vw, 1.75rem); }
}
@media (max-width: 640px) { .lc-card--wide { grid-column: auto; } }

/* ---- TEMPORARY category artwork (CSS only) ----
   Placeholders for the seven master visual systems still to be supplied.
   Deliberately pattern-based, never text-baked, so the real artwork can
   replace `.lc-card-art`'s background without touching any markup. */
.lc-card-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-700);
  border-bottom: 1px solid var(--border);
}
.lc-card-art::before { content: ''; position: absolute; inset: 0; }
.lc-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 16%, rgba(255,255,255,0.07) 0%, transparent 58%);
  pointer-events: none;
}

/* 1 — Money: concentric ripples radiating from the corner. */
.lc-art--money { background: linear-gradient(140deg, var(--navy-700) 0%, #10305c 55%, #123f72 100%); }
.lc-art--money::before {
  background: repeating-radial-gradient(circle at 20% 120%, transparent 0 26px, rgba(2,193,255,0.15) 26px 27px);
}
/* 2 — Credit: ascending diagonal rule work. */
.lc-art--credit { background: linear-gradient(140deg, var(--navy-700) 0%, #16255e 60%, #1d2f75 100%); }
.lc-art--credit::before {
  background: repeating-linear-gradient(58deg, transparent 0 18px, rgba(2,193,255,0.13) 18px 19px);
  -webkit-mask-image: linear-gradient(to top right, #000 8%, transparent 88%);
  mask-image: linear-gradient(to top right, #000 8%, transparent 88%);
}
/* 3 — Taxes: ledger grid, fading down the frame. */
.lc-art--taxes { background: linear-gradient(140deg, var(--navy-700) 0%, #0f2f4e 60%, #123a5f 100%); }
.lc-art--taxes::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(2,193,255,0.11) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(2,193,255,0.07) 34px 35px);
  -webkit-mask-image: linear-gradient(to bottom, #000 18%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 18%, transparent 94%);
}
/* 4/5/6 — Kids: one family, progressively more mature. Large open dots at
   6–8, tighter dots at 9–12, precise linework at 13–17. */
.lc-art--kids-a { background: linear-gradient(140deg, #10395f 0%, #14527f 100%); }
.lc-art--kids-a::before {
  background-image: radial-gradient(circle, rgba(56,207,255,0.34) 4.5px, transparent 5px);
  background-size: 34px 34px;
}
.lc-art--kids-b { background: linear-gradient(140deg, #0e3055 0%, #123f6e 100%); }
.lc-art--kids-b::before {
  background-image: radial-gradient(circle, rgba(2,193,255,0.26) 3px, transparent 3.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(115deg, #000 22%, transparent 96%);
  mask-image: linear-gradient(115deg, #000 22%, transparent 96%);
}
.lc-art--kids-c { background: linear-gradient(140deg, var(--navy-700) 0%, #14264f 100%); }
.lc-art--kids-c::before {
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(2,193,255,0.13) 15px 16px);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 86%);
  mask-image: linear-gradient(to top, #000 10%, transparent 86%);
}
/* 7 — Tools & Guides: ready for when real resources exist. */
.lc-art--tools { background: linear-gradient(140deg, var(--navy-700) 0%, #17324f 100%); }
.lc-art--tools::before {
  background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(2,193,255,0.10) 14px 15px);
}

/* ---- MONEY STARTS EARLY — age pathways ----
   One visual family across all three, but radius, rule weight and accent
   step from open/bright (6–8) to tight/restrained (13–17). */
.lc-paths { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.lc-path {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
}
.lc-path::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(24px, 3vw, 36px);
  right: clamp(24px, 3vw, 36px);
  border-radius: 2px;
}
.lc-path--a { border-radius: var(--radius-xxl); border-color: rgba(56,207,255,0.26); }
.lc-path--a::before { height: 3px; background: linear-gradient(90deg, var(--sky-300), transparent 72%); }
.lc-path--b { border-radius: var(--radius-xl); border-color: rgba(2,193,255,0.20); }
.lc-path--b::before { height: 2px; background: linear-gradient(90deg, var(--sky-400), transparent 60%); }
.lc-path--c { border-radius: var(--radius-lg); border-color: rgba(41,51,130,0.55); }
.lc-path--c::before { height: 1px; background: linear-gradient(90deg, #5468c9, transparent 48%); }

.lc-path-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.lc-path-name {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}
.lc-path-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lc-path--a .lc-path-badge { background: rgba(56,207,255,0.14); color: var(--sky-300); border: 1px solid rgba(56,207,255,0.32); }
.lc-path--b .lc-path-badge { background: rgba(2,193,255,0.10); color: var(--sky-400); border: 1px solid rgba(2,193,255,0.26); }
.lc-path--c .lc-path-badge { background: rgba(84,104,201,0.12); color: #93a6ee; border: 1px solid rgba(84,104,201,0.34); }

/* ---- Education → personalised strategy bridge ----
   Replaces the old indigo CTA banner. Navy panel, cyan hairline for the
   handoff out of education, green reserved for the primary action. */
.lc-bridge {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 64px);
  background: linear-gradient(160deg, var(--surface-raised) 0%, var(--navy-800) 100%);
  border: 1px solid var(--border);
  border-top: 2px solid var(--sky-400);
  border-radius: var(--radius-xl);
  text-align: center;
}
.lc-bridge::before {
  content: '';
  position: absolute;
  top: -55%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 150%;
  background: radial-gradient(ellipse, rgba(2,193,255,0.09) 0%, transparent 66%);
  pointer-events: none;
}
.lc-bridge > * { position: relative; z-index: 1; }
.lc-bridge-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  font-weight: 500;
  line-height: 1.14;
  color: var(--white);
  margin: 14px 0 18px;
}
.lc-bridge-body {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray-200);
}
.lc-bridge-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* ============================================================
   Learning Center — responsive system
   One stepped scale for the whole page rather than shrinking individual
   elements until they happen to fit. Checkpoints: 360 / 390 / 430 phones,
   768 / 1024 tablet, 1280+ desktop.
   ============================================================ */

/* Tablet — the lead and wide cards go full-bleed in a 2-track grid, where a
   16/9 crop would become an enormous banner. Widen the ratio instead. */
@media (max-width: 900px) {
  .lc-card--lead .lc-card-art,
  .lc-card--wide .lc-card-art { aspect-ratio: 2.4 / 1; }
  .lc-paths { gap: 28px; }
  /* Four segments get cramped below ~900px, so the panel becomes four
     separate tiles in 2x2 — same information, no squeezing. */
  .lc-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .lc-nav-card {
    border: 1px solid rgba(2,193,255,0.22);
    border-radius: var(--radius);
    background: linear-gradient(150deg, var(--surface-raised) 0%, var(--navy-700) 100%);
  }
  .lc-nav-card:hover { box-shadow: none; border-color: rgba(2,193,255,0.55); }
  .lc-nav-card:focus-visible { outline-offset: 3px; }
}

/* Phones: bridge CTA (the rest of this legacy block targeted classes the
   Learning Center rebuild removed — .lc-nav, .lc-card, .lc-paths — or
   duplicated live rules defined once, correctly, in the dedicated Learning
   Center mobile sections above. Keeping both silently let this later block
   win the cascade and undo the improved values up there. */
@media (max-width: 640px) {
  .lc-bridge { padding: 38px 22px 40px; border-radius: var(--radius-lg); }
  .lc-bridge-title { font-size: clamp(1.5rem, 7vw, 1.9375rem); margin: 12px 0 14px; }
  .lc-bridge-body { font-size: 0.9375rem; }
  .lc-bridge-ctas { flex-direction: column; margin-top: 24px; gap: 10px; }
  .lc-bridge-ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 17px 16px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
}


/* ---- Scrollbar ----
   NOTHING here previously hid the scrollbar — there is no scrollbar-width:none,
   no -ms-overflow-style and no ::-webkit-scrollbar rule anywhere in the site,
   and the document is the scroll root. What follows is not a fix for a bug; it
   is a native styling opt-in.

   It matters for one reason beyond colour: on a machine set to auto-hide scroll
   bars, Chromium and Firefox both use an overlay scrollbar that fades out —
   which is what "the scrollbar isn't visible" looks like. Declaring
   scrollbar-color opts the page out of that and back onto a real, always-drawn,
   draggable bar.

   Standard properties only. `::-webkit-scrollbar` was tried first and is the
   wrong tool here: setting scrollbar-color makes Chromium ignore the WebKit
   pseudo-elements entirely, so the two cannot be combined on one element, and
   the standard pair is the half that also works in Firefox.

   Pointer devices only, so a phone is never given a desktop scrollbar. */
@media (pointer: fine) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #293382 var(--navy-900);
  }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; clip-path: none; }
  html { scroll-behavior: auto; }
}

/* ====================================================================
   CREDIT BLUEPRINT LANDING PAGE (/credit-blueprint/, /credit-blueprint/thank-you/)
   Dedicated conversion page — new namespace (.cbp-*) so nothing here can
   collide with or alter any existing page's rules. Uses the shared
   .page-hero for top padding/fixed-nav clearance only; all inner layout
   is scoped locally. ==================================================== */
.cbp-hero { position: relative; overflow: hidden; }
.cbp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(2,193,255,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(87,171,40,0.08) 0%, transparent 55%);
  pointer-events: none;
}
.cbp-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: start;
}
@media (min-width: 1025px) {
  .cbp-grid {
    /* Wider form column for a stronger desktop presence, and top-aligned
       (not centered) so the panel's top edge relates to the eyebrow/H1
       block instead of dropping to the vertical middle of the taller
       content column. */
    grid-template-columns: minmax(0, 1fr) minmax(380px, 500px);
    gap: clamp(48px, 5vw, 88px);
    align-items: start;
  }
}

.cbp-content { max-width: 620px; text-align: left; }
/* Own restrained size instead of the sitewide .display-1 — that scale (up to
   5.5rem) overpowered the two-column composition and pushed to 4+ lines.
   Still Cormorant/editorial, just controlled: ~3 lines at 1440 via the
   explicit <br> breaks in the markup (used unconditionally here, desktop and
   mobile share the same preferred 3-line shape). Headline stays
   predominantly white — only "With Clarity." picks up the green accent. */
.cbp-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.875rem, 2.7vw, 2.875rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--white);
  text-align: left;
  margin: 10px 0 20px;
}
.cbp-h1 .gradient-text-green { font-style: italic; }
.cbp-copy { margin-bottom: 32px; }

.cbp-image-wrap {
  max-width: 260px;
  margin: 0 0 32px;
}
.cbp-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

.cbp-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cbp-benefit { display: flex; gap: 16px; align-items: flex-start; }
.cbp-benefit-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.cbp-benefit-icon svg { width: 18px; height: 18px; }
.cbp-benefit h2 {
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--white);
  line-height: 1.3;
}
.cbp-benefit p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

.cbp-form-panel {
  background: var(--white);
  color: var(--navy-900);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 3.2vw, 44px);
  box-shadow: var(--shadow-card);
}
.cbp-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-600);
  background: rgba(87,171,40,0.1);
  border: 1px solid rgba(87,171,40,0.25);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.cbp-form-panel h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  color: var(--navy-900);
  margin: 0 0 10px;
  line-height: 1.15;
}
.cbp-form-panel > p.cbp-form-intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #445064;
  margin: 0 0 24px;
}
/* No fixed height, no overflow:hidden — form_embed.js resizes the iframe's
   own inline height to match its content, and the wrapper must never clip
   or trap scroll while that happens. */
.cbp-embed-wrap { width: 100%; overflow: visible; }
.cbp-embed-wrap iframe { display: block; width: 100%; }

/* Subtle navy tonal shift (one step lighter than the page background) plus
   generous top padding so the section reads as an intentional, separate
   "next step" rather than the hero's content trailing off. */
.cbp-continuation {
  border-top: 1px solid var(--border);
  background: var(--navy-800);
}
/* The sitewide ".page-hero + section { padding-top: 0 }" rule (used so other
   inner pages flow straight from hero into body copy) has higher specificity
   than a plain ".cbp-continuation" selector and was silently winning here,
   collapsing this section's top padding to 0 regardless of what was set
   above. Beat it on specificity via the two-class chain instead of touching
   the shared sitewide rule. */
.page-hero + .cbp-continuation {
  padding-top: clamp(56px, 7vw, 88px);
}
/* Thank-you page only: this section's hero is a plain .page-hero (not
   .cbp-hero), so it needs its own extra mobile breathing room above "What
   Happens Next" without touching the /credit-blueprint/ landing page's
   identical-looking continuation section. */
@media (max-width: 600px) {
  .page-hero + .cbp-ty-continuation { padding-top: 56px; }
}
.cbp-continuation-inner { text-align: center; max-width: 600px; margin: 0 auto; }
.cbp-continuation .section-label { margin-bottom: 20px; }
.cbp-continuation h2 {
  font-size: clamp(2.125rem, 4.2vw, 3.375rem);
  margin: 0 0 16px;
}
.cbp-continuation-inner > p { max-width: 480px; margin-left: auto; margin-right: auto; }
.cbp-continuation .btn { margin-top: 12px; }
@media (max-width: 480px) {
  .cbp-continuation .btn { width: 100%; justify-content: center; }
}
/* Thank-you page only: "What Happens Next" stays purely informational, so it
   gets a shorter bottom padding than the sitewide .section default — the
   featured Learning Center band right after it supplies its own top padding
   and a real background shift, so the two together read as one clear,
   controlled gap rather than doubled-up dead space. */
.cbp-ty-continuation { padding-bottom: clamp(40px, 5vw, 56px); }

/* ---- Thank-you page: featured Learning Center band ----
   A real section-level destination (richer tonal background + restrained
   glow + optional border), not just a thin divider, so it reads as its own
   moment distinct from the plain-navy "What Happens Next" above and the
   compact secondary consultation panel below. */
.cbp-ty-feature {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(41,51,130,0.4) 0%, transparent 62%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.cbp-ty-feature-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 15%, rgba(2,193,255,0.08) 0%, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(87,171,40,0.07) 0%, transparent 45%);
}
.cbp-ty-feature-inner { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; }
.cbp-ty-feature .section-label { justify-content: center; margin-bottom: 20px; }
.cbp-ty-feature h2 { font-size: clamp(2.125rem, 4.2vw, 3.375rem); margin: 0 0 16px; }
.cbp-ty-feature p { max-width: 480px; margin: 0 auto 32px; }
.cbp-ty-feature .btn { margin-top: 0; }
@media (max-width: 480px) {
  .cbp-ty-feature .btn { width: 100%; justify-content: center; }
}
/* Mobile-only: the shared .section-label's left/right flanking rules read as
   a squeezed desktop layout once the eyebrow text wraps at phone widths.
   Drop the side rules for a single small accent line above instead, and
   tighten size/tracking just enough for "The Blueprint Is Just the Start"
   to sit on one intentional line. Desktop framing lines are untouched. */
@media (max-width: 480px) {
  .cbp-ty-feature .section-label {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
  .cbp-ty-feature .section-label::before {
    width: 32px;
    transform-origin: center;
  }
  .cbp-ty-feature .section-label::after { display: none; }
}

/* ---- Thank-you page: secondary consultation panel ----
   A compact bounded card back on the plain page background — deliberately
   the opposite treatment of the feature band above, so it reads as a
   distinct, optional, lower-weight destination rather than a second
   primary CTA. */
.cbp-ty-consult-section { padding-top: clamp(48px, 5vw, 64px); padding-bottom: clamp(48px, 5vw, 64px); }
.cbp-ty-consult {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(28px, 3.5vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.cbp-ty-consult-label { font-size: 0.9375rem; color: var(--text-muted); margin: 0 0 16px; }
.cbp-ty-consult .btn { margin-top: 0; }
@media (max-width: 480px) {
  .cbp-ty-consult .btn { width: 100%; justify-content: center; }
}

@media (max-width: 1024px) {
  .cbp-content { max-width: 100%; }
  .cbp-image-wrap { max-width: 220px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  .cbp-image-wrap { max-width: 200px; margin-bottom: 24px; }
}
/* Narrow the hero's own side gutters (scoped to this section only — the
   sitewide .container padding is untouched everywhere else) so the form
   panel and its iframe get meaningfully more usable width on phones,
   while keeping a safe ~16px page edge. */
@media (max-width: 600px) {
  .cbp-hero .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 430px) {
  .cbp-form-panel { padding: 24px 18px; }
}
@media (max-width: 360px) {
  .cbp-form-panel { padding: 20px 14px; }
}

/* ---- Thank-you page ---- */
.cbp-ty-hero-content { max-width: 620px; margin: 0 auto; text-align: center; }
.cbp-ty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(87,171,40,0.12);
  border: 1px solid rgba(87,171,40,0.3);
  color: var(--green-500);
}
.cbp-ty-icon svg { width: 28px; height: 28px; }
.cbp-ty-hero-content .section-label { justify-content: center; }

/* ---- Thank-you page: email delivery callout ----
   Elevated dark card (not a warning box) so the inbox guidance is clearly
   noticeable without alarming colors or a giant gradient. */
.cbp-ty-callout {
  max-width: 640px;
  margin: 40px auto 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 40px);
  text-align: left;
}
.cbp-ty-callout-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,193,255,0.1);
  border: 1px solid rgba(2,193,255,0.25);
  color: var(--sky-400);
  margin-bottom: 16px;
}
.cbp-ty-callout-badge svg { width: 20px; height: 20px; }
.cbp-ty-callout-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 10px;
}
.cbp-ty-callout-title {
  font-family: var(--font);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  margin: 0 0 14px;
}
.cbp-ty-callout-copy { font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 16px; }
.cbp-ty-callout-emphasis { font-size: 0.9375rem; font-weight: 600; color: var(--sky-300); margin: 0 0 24px; }

.cbp-ty-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 600px) {
  .cbp-ty-actions { grid-template-columns: 1fr; }
}
.cbp-ty-action { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; color: var(--gray-200); line-height: 1.4; }
.cbp-ty-action-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--green-500);
}
.cbp-ty-action-icon svg { width: 16px; height: 16px; }

/* ===== HOMEPAGE VISUAL SYSTEM (start) ===== */
/* =========================================================
   HOMEPAGE — FOUNDATION
   The material system every other block draws on: one surface, one edge,
   one glow, one shadow ladder, one motion scale. Scoped to body.home so
   nothing here can reach another page.
   ========================================================= */
body.home {
  /* Surfaces */
  --hm-surface: linear-gradient(168deg, rgba(20,38,72,0.92) 0%, rgba(11,22,44,0.94) 52%, rgba(7,14,29,0.96) 100%);
  --hm-surface-lift: linear-gradient(168deg, rgba(27,50,92,0.94) 0%, rgba(13,26,50,0.95) 54%, rgba(8,16,32,0.97) 100%);
  --hm-glass: linear-gradient(168deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 46%, rgba(255,255,255,0) 100%);
  /* Edges */
  --hm-edge-top: inset 0 1px 0 rgba(255,255,255,0.16);
  --hm-edge-hair: inset 0 0 0 1px rgba(120,164,255,0.16);
  --hm-edge-cut: inset 0 -3px 0 rgba(3,10,24,0.5);
  /* Depth */
  --hm-lift-1: 0 18px 34px -22px rgba(0,0,0,0.9);
  --hm-lift-2: 0 34px 60px -32px rgba(0,0,0,0.95);
  --hm-lift-3: 0 56px 92px -46px rgba(0,0,0,0.96);
  /* Brand light */
  --hm-sky: 2,193,255;
  --hm-green: 87,171,40;
  --hm-lime: 175,221,44;
  --hm-ease: cubic-bezier(0.22, 0.61, 0.28, 1);
  --hm-ease-out: cubic-bezier(0.16, 0.84, 0.36, 1);
}

/* ---- A tone per service family, used by cards, plinths and the spine ---- */
body.home [data-hm-tone="green"] { --hm-r3-end: #2f5cf0; --hm-tn: #4f8dff; --hm-tn-rgb: 79,141,255; --hm-tn-deep: #0a2dc2; }
body.home [data-hm-tone="sky"] { --hm-r3-end: #3f8a16; --hm-tn: #8fd63a; --hm-tn-rgb: 143,214,58; --hm-tn-deep: #2f6a13; }
body.home [data-hm-tone="ice"] { --hm-tn: #52d9a2; --hm-tn-rgb: 82,217,162; --hm-tn-deep: #12694c; --hm-r3-end: #2fae7e; }

/* ---- The dimensional plate: the page's one card material ---- */
body.home .hm-plate {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  background: var(--hm-glass), var(--hm-surface);
  box-shadow: var(--hm-edge-top), var(--hm-edge-hair), var(--hm-lift-2);
}

/* ---- Section seams: light and shape carry across the boundary ---- */
body.home .section { position: relative; overflow-x: clip; }
body.home .hero { overflow-x: clip; }
body.home .hm-seam {
  position: absolute;
  left: 50%;
  z-index: 0;
  width: min(1180px, 100%);
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
}
body.home .hm-seam--top { top: -110px; }
body.home .hm-seam--bottom { bottom: -110px; }
body.home .hero .hm-seam--bottom { bottom: -74px; }
/* A wide, soft bloom that belongs to both sections at once. */
body.home .hm-seam::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 11% at 50% 50%, rgba(var(--hm-sky), 0.26) 0%, rgba(var(--hm-sky), 0.08) 54%, transparent 76%),
    radial-gradient(58% 50% at 50% 50%, rgba(var(--hm-sky), 0.13) 0%, rgba(var(--hm-green), 0.07) 42%, transparent 72%);
}
/* A sculpted light-guide that carries the eye through the seam: a thick
   gradient bar with real thickness, not a hairline. */
body.home .hm-seam::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(720px, 82%);
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 54%),
    linear-gradient(90deg, transparent, rgba(var(--hm-sky), 0.72) 20%, rgba(var(--hm-lime), 0.8) 52%, rgba(var(--hm-sky), 0.72) 80%, transparent);
  box-shadow: 0 0 40px 4px rgba(var(--hm-sky), 0.6), 0 6px 18px -6px rgba(3,10,24,0.9), inset 0 -1px 0 rgba(3,10,24,0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
body.home .hm-seam i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 6px;
  margin: -3px 0 0 -60px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #eafcff, transparent);
  box-shadow: 0 0 22px 4px rgba(var(--hm-sky), 0.7);
  animation: hmSeamRun 9s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes hmSeamRun {
  0% { transform: translateX(-320%); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateX(320%); opacity: 1; }
  74%, 100% { transform: translateX(360%); opacity: 0; }
}

/* ---- Eyebrows: a lit capsule, not two hairlines ---- */
body.home .section-label {
  position: relative;
  align-self: flex-start;
  gap: 12px;
  padding: 9px 18px 9px 15px;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: #cdefff;
  background: linear-gradient(180deg, rgba(56,207,255,0.16), rgba(56,207,255,0.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 0 1px rgba(56,207,255,0.34),
    0 10px 22px -14px rgba(2,193,255,0.9);
}
body.home .section-label::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d8fbff, var(--sky-400) 62%, #0a6b9c);
  box-shadow: 0 0 12px 2px rgba(var(--hm-sky), 0.8);
  transform: none;
  transition: none;
  animation: hmLabelPulse 4.2s ease-in-out infinite;
}
body.home .section-label::after {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--hm-sky), 0.85), rgba(var(--hm-lime), 0.6));
  box-shadow: 0 0 10px rgba(var(--hm-sky), 0.6);
  transform: none;
  transition: none;
}
body.home .reveal.revealed .section-label::before,
body.home .section-label.revealed::before,
body.home .reveal.revealed .section-label::after,
body.home .section-label.revealed::after { transform: none; }
@keyframes hmLabelPulse {
  0%, 100% { box-shadow: 0 0 10px 1px rgba(var(--hm-sky), 0.6); }
  50% { box-shadow: 0 0 16px 4px rgba(var(--hm-sky), 0.95); }
}

/* ---- Rhythm: each section's eyebrow carries its own light ---- */
body.home #services .section-label,
body.home .approach-section .section-label {
  color: #e8ffc0;
  background: linear-gradient(180deg, rgba(175,221,44,0.18), rgba(175,221,44,0.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 0 0 1px rgba(175,221,44,0.36),
    0 10px 22px -14px rgba(175,221,44,0.9);
}
body.home #services .section-label::before,
body.home .approach-section .section-label::before {
  background: radial-gradient(circle at 34% 30%, #f6ffd6, var(--lime-400) 62%, #5c8f0c);
  box-shadow: 0 0 12px 2px rgba(175,221,44,0.85);
}
body.home #services .section-label::after,
body.home .approach-section .section-label::after {
  background: linear-gradient(90deg, rgba(175,221,44,0.9), rgba(2,193,255,0.6));
  box-shadow: 0 0 10px rgba(175,221,44,0.6);
}
/* The closing panel's eyebrow reads as the brightest of the set. */
body.home .cta-banner .section-label {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(2,193,255,0.26), rgba(175,221,44,0.1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 0 0 1px rgba(120,220,255,0.5),
    0 14px 26px -14px rgba(2,193,255,1);
}

/* ---- Headlines: the gradient words carry a slow pass of light ---- */
body.home .gradient-text {
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.9) 50%, transparent 62%),
    linear-gradient(176deg, #b8e6ff 0%, #38cfff 54%, #12a9ea 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 1.4s infinite;
}
@keyframes hmHeadPass {
  0%, 62% { background-position: 130% 0, 0 0; }
  90%, 100% { background-position: -30% 0, 0 0; }
}

/* ---- Section headers get a little more air and a centred rhythm ---- */
body.home .section-header { position: relative; z-index: 1; }
body.home .section-header .heading-1 { letter-spacing: -0.015em; }

@media (max-width: 760px) {
  body.home .hm-seam { height: 160px; width: 100%; }
  body.home .hm-seam--top { top: -80px; }
  body.home .hm-seam--bottom { bottom: -80px; }
  body.home .hm-seam::after { width: 78%; height: 3px; }
  body.home .section-label { font-size: 0.6875rem; letter-spacing: 0.18em; padding: 8px 15px 8px 13px; gap: 10px; }
  body.home .section-label::after { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing on this page may depend on a scroll animation to become
     visible: with motion reduced, every revealed element renders at once. */
  body.home .reveal,
  body.home .reveal-delay-1,
  body.home .reveal-delay-2,
  body.home .reveal-delay-3,
  body.home .reveal-delay-4,
  body.home .reveal-delay-5,
  body.home .steven-image-wrap { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.home .hm-seam i,
  body.home .section-label::before,
  body.home .gradient-text { animation: none; }
  body.home .hm-seam i { display: none; }
}

/* ---- The desktop header: the same scale, packed to fit ----
   This was a body.home-scoped copy of the desktop packing block, with
   values identical to the unscoped copy that follows it at line ~40415 —
   as the comment there records, it existed so the homepage kept its own
   higher-specificity version and nothing changed for it.

   It has been removed. The shared header rules at the end of this file
   set the row's grid, logo width and label size for every page, and at
   (0,2,1) this block outranked them: the homepage alone kept a 180px
   logo against 196px, 13.5px labels against 15px, and a 77.6px bar
   against 80.5px, so it was the one page whose header still did not
   match. Deleting it changes nothing about the behaviour the comment
   describes, because the unscoped copy is still in place. */

/* =========================================================
   HOMEPAGE — THE TAXFUNDERS CTA FAMILY
   Every call to action is a small milled billet of brand material, lit from
   the upper left, standing proud of the page on a tapering side wall with a
   contact shadow, a floor shadow and its own colour bouncing back off the
   floor. One construction, written once, driven entirely by custom properties.
   What differs between members is the face material, the light mechanism and
   the rhythm — deliberately non-harmonic periods so the page never flashes
   in unison. Structure and motion live on separate layers, so reduced motion
   costs nothing but the movement.
   ========================================================= */
body.home {
  --cta-r: 5px;
  --cta-r-lg: 6px;
  --cta-press: 4px;
  --cta-ease-lift: cubic-bezier(0.16, 0.84, 0.36, 1);
  --cta-ease-press: cubic-bezier(0.4, 0, 0.6, 1);
  --cta-ease-light: cubic-bezier(0.42, 0, 0.14, 1);
  --cta-ease-metro: cubic-bezier(0.32, 0, 0.24, 1);
  --cta-ease-edge: cubic-bezier(0.34, 0.02, 0.66, 0.98);
}

/* ---- The shared billet: one 14 layer stack, three states ---- */
body.home .btn {
  position: relative;
  isolation: isolate;
  border: 0;
  overflow: hidden;
  border-radius: var(--cta-r);
  min-height: 50px;
  gap: clamp(9px, 0.8vw, 11px);
  padding: clamp(14px, 1.1vw, 16px) clamp(22px, 2vw, 28px);
  font-size: clamp(0.78125rem, 0.72rem + 0.18vw, 0.8125rem);

  --cta-riser: 7px;
  --cta-floor: 1;
  --cta-wall-1: #16305a;
  --cta-wall-2: #0e2140;
  --cta-wall-3: #081428;
  --cta-wall-4: #030a16;
  --cta-glow: 2,193,255;
  --cta-glow-a: 0.34;
  --cta-chip: 2,193,255;
  --cta-chip-a: 0.9;
  --cta-rim: 120,170,255;
  --cta-rim-a: 0.34;
  --cta-a-top: 0.3;
  --cta-a-left: 0.14;
  --cta-a-right: 0.36;
  --cta-a-bot: 0.54;
  --cta-a-crown: 0.28;
  --cta-a-cove: 0.44;
  --cta-contact: 0.9;

  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,var(--cta-a-top)),
    inset 1px 0 0 0 rgba(255,255,255,var(--cta-a-left)),
    inset -1px 0 0 0 rgba(3,8,18,var(--cta-a-right)),
    inset 0 -1px 0 0 rgba(3,8,18,var(--cta-a-bot)),
    inset 0 14px 18px -14px rgba(255,255,255,var(--cta-a-crown)),
    inset 0 -12px 18px -12px rgba(3,8,18,var(--cta-a-cove)),
    0 2px 0 -1px var(--cta-wall-1),
    0 calc(var(--cta-riser) * 0.45) 0 -1px var(--cta-wall-2),
    0 calc(var(--cta-riser) * 0.72) 0 -2px var(--cta-wall-3),
    0 var(--cta-riser) 0 -4px var(--cta-wall-4),
    0 calc(var(--cta-riser) + 3px) 9px -6px rgba(2,5,12,var(--cta-contact)),
    0 calc(18px * var(--cta-floor)) calc(26px * var(--cta-floor)) -14px rgba(0,0,0,0.68),
    0 calc(34px * var(--cta-floor)) calc(54px * var(--cta-floor)) -26px rgba(0,0,0,0.52),
    0 calc(22px * var(--cta-floor)) calc(44px * var(--cta-floor)) -20px rgba(var(--cta-glow), var(--cta-glow-a));

  transition:
    transform 0.34s var(--cta-ease-lift),
    box-shadow 0.34s var(--cta-ease-lift),
    background-position 0.55s var(--cta-ease-lift),
    color 0.28s var(--cta-ease-lift);
}
body.home .btn-lg {
  border-radius: var(--cta-r-lg);
  min-height: 58px;
  padding: clamp(17px, 1.4vw, 20px) clamp(28px, 2.6vw, 38px);
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);
  --cta-riser: 9px;
}

@media (hover: hover) and (pointer: fine) {
  /* The billet lifts and more of its wall comes into view. */
  body.home .btn:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 0 rgba(255,255,255,calc(var(--cta-a-top) + 0.1)),
      inset 1px 0 0 0 rgba(255,255,255,calc(var(--cta-a-left) + 0.06)),
      inset -1px 0 0 0 rgba(3,8,18,var(--cta-a-right)),
      inset 0 -1px 0 0 rgba(3,8,18,calc(var(--cta-a-bot) - 0.06)),
      inset 0 16px 22px -14px rgba(255,255,255,calc(var(--cta-a-crown) + 0.08)),
      inset 0 -12px 18px -12px rgba(3,8,18,calc(var(--cta-a-cove) - 0.06)),
      0 2px 0 -1px var(--cta-wall-1),
      0 calc(var(--cta-riser) * 0.72) 0 -1px var(--cta-wall-2),
      0 calc(var(--cta-riser) * 1.18) 0 -2px var(--cta-wall-3),
      0 calc(var(--cta-riser) * 1.7) 0 -4px var(--cta-wall-4),
      0 calc(var(--cta-riser) * 1.7 + 4px) 12px -7px rgba(2,5,12,var(--cta-contact)),
      0 calc(26px * var(--cta-floor)) calc(34px * var(--cta-floor)) -14px rgba(0,0,0,0.72),
      0 calc(48px * var(--cta-floor)) calc(72px * var(--cta-floor)) -26px rgba(0,0,0,0.58),
      0 calc(34px * var(--cta-floor)) calc(64px * var(--cta-floor)) -20px rgba(var(--cta-glow), calc(var(--cta-glow-a) + 0.34));
  }
}
/* Pressed: the block sinks into its own riser. */
body.home .btn:active {
  transform: translateY(var(--cta-press)) scale(0.996);
  transition-duration: 0.08s;
  transition-timing-function: var(--cta-ease-press);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,calc(var(--cta-a-top) - 0.14)),
    inset 1px 0 0 0 rgba(255,255,255,calc(var(--cta-a-left) - 0.06)),
    inset -1px 0 0 0 rgba(3,8,18,calc(var(--cta-a-right) + 0.1)),
    inset 0 -1px 0 0 rgba(3,8,18,calc(var(--cta-a-bot) + 0.1)),
    inset 0 8px 14px -12px rgba(255,255,255,calc(var(--cta-a-crown) - 0.14)),
    inset 0 -14px 20px -10px rgba(3,8,18,calc(var(--cta-a-cove) + 0.14)),
    0 1px 0 -1px var(--cta-wall-1),
    0 calc(var(--cta-riser) * 0.18) 0 -1px var(--cta-wall-2),
    0 calc(var(--cta-riser) * 0.26) 0 -2px var(--cta-wall-3),
    0 calc(var(--cta-riser) * 0.3) 0 -4px var(--cta-wall-4),
    0 calc(var(--cta-riser) * 0.3 + 1px) 5px -4px rgba(2,5,12,calc(var(--cta-contact) + 0.06)),
    0 calc(7px * var(--cta-floor)) calc(11px * var(--cta-floor)) -8px rgba(0,0,0,0.74),
    0 calc(13px * var(--cta-floor)) calc(20px * var(--cta-floor)) -14px rgba(0,0,0,0.5),
    0 calc(9px * var(--cta-floor)) calc(20px * var(--cta-floor)) -12px rgba(var(--cta-glow), calc(var(--cta-glow-a) + 0.12));
}

/* L1 — structure: the leading identity chip and the trailing rim. Never animated. */
body.home .btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transform: none;
  background:
    linear-gradient(180deg,
      rgba(var(--cta-chip), 0.12) 0%,
      rgba(var(--cta-chip), var(--cta-chip-a)) 24%,
      rgba(var(--cta-chip), var(--cta-chip-a)) 74%,
      rgba(var(--cta-chip), 0.12) 100%) left / 3px 100% no-repeat,
    linear-gradient(180deg,
      rgba(var(--cta-rim), 0) 0%,
      rgba(var(--cta-rim), var(--cta-rim-a)) 42%,
      rgba(var(--cta-rim), 0) 100%) right / 1px 100% no-repeat;
  transition: opacity 0.3s var(--cta-ease-lift);
}
/* L2 — the member's primary light event. */
body.home .btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
/* L3 — the member's secondary material or light detail. */
body.home .hm-cta-spec {
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.4s var(--cta-ease-lift), transform 0.4s var(--cta-ease-lift);
}
body.home .btn > svg,
body.home .btn > .hm-cta-arrow { position: relative; z-index: 2; }

/* A drawn arrow for the two plates that carry no glyph. */
body.home .hm-cta-arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 17px;
  height: 10px;
  margin-left: 2px;
}
body.home .hm-cta-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0.72);
}
body.home .hm-cta-arrow::after {
  content: '';
  position: absolute;
  right: 1px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---- A — hero primary: anodized lime, internal light travel, 7.2s ---- */
body.home .hero-ctas .btn-primary {
  color: #071604;
  text-shadow: 0 1px 0 rgba(255,255,255,0.42), 0 -1px 0 rgba(10,32,4,0.34);
  --cta-riser: 10px;
  --cta-wall-1: #3e7f18; --cta-wall-2: #2b5e10;
  --cta-wall-3: #1b400a; --cta-wall-4: #0c2104;
  --cta-glow: 150,219,62; --cta-glow-a: 0.62;
  --cta-chip: 18,58,6; --cta-chip-a: 0.85;
  --cta-rim: 120,240,255; --cta-rim-a: 0.6;
  --cta-a-top: 0.56; --cta-a-left: 0.24; --cta-a-right: 0.3; --cta-a-bot: 0.46;
  --cta-a-crown: 0.34; --cta-a-cove: 0.4; --cta-contact: 0.92;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 34%, rgba(255,255,255,0) 52%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, rgba(0,0,0,0.045) 1px 2px),
    linear-gradient(97deg, #2f6a13 0%, #4d9a1e 14%, #79c62b 40%, #c6f24e 64%, #8ad84f 82%, #3fc9b4 100%);
  background-size: 100% 22px, 2px 100%, 190% 100%;
  background-position: 0 0, 0 0, 30% 0;
  background-repeat: no-repeat, repeat, no-repeat;
  border-color: transparent;
}
body.home .hero-ctas .btn-primary .hm-cta-spec {
  background:
    radial-gradient(120% 150% at 104% 116%, rgba(2,193,255,0.34) 0%, rgba(2,193,255,0.06) 42%, transparent 66%),
    radial-gradient(130% 130% at 44% 132%, rgba(20,54,4,0.52) 0%, rgba(20,54,4,0.14) 44%, transparent 68%);
}
body.home .hero-ctas .btn-primary::after {
  inset: auto;
  top: -30%;
  bottom: -30%;
  left: 0;
  right: auto;
  width: 34%;
  border-radius: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0% 38%,
    rgba(255,255,255,0.2) 42%,
    rgba(255,255,255,0.78) 47%,
    rgba(255,255,255,0.86) 50%,
    rgba(255,255,255,0.22) 55%,
    rgba(255,255,255,0.06) 62%,
    rgba(255,255,255,0) 72% 100%);
  transform: translateX(-140%) skewX(-14deg);
  opacity: 0;
  animation: ctaTravel 7.2s var(--cta-ease-light) 1.1s infinite;
}
@keyframes ctaTravel {
  0%, 58% { transform: translateX(-140%) skewX(-14deg); opacity: 0; }
  60% { transform: translateX(-130%) skewX(-14deg); opacity: 1; }
  72% { transform: translateX(120%) skewX(-14deg); opacity: 1; }
  74%, 100% { transform: translateX(150%) skewX(-14deg); opacity: 0; }
}
body.home .hero-ctas .btn-primary svg { animation: ctaStepLead 7.2s var(--cta-ease-light) 1.1s infinite; }
@keyframes ctaStepLead {
  0%, 56%, 100% { transform: translateX(0); }
  62% { transform: translateX(-3px); }
  70% { transform: translateX(7px); }
  78% { transform: translateX(2px); }
  84% { transform: translateX(4px); }
  90% { transform: translateX(0); }
}
@keyframes ctaTravelFast {
  0% { transform: translateX(-140%) skewX(-14deg); opacity: 1; }
  100% { transform: translateX(150%) skewX(-14deg); opacity: 1; }
}
@keyframes ctaStepFast {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(6px); }
  62% { transform: translateX(2px); }
  80% { transform: translateX(4px); }
}

/* ---- B — hero secondary: graphite vault, edge illumination, 9s ---- */
body.home .hero-ctas .btn-secondary {
  color: #e8f5ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.66), 0 0 18px rgba(2,193,255,0.2);
  --cta-riser: 10px;
  --cta-wall-1: #1a3054; --cta-wall-2: #10203c;
  --cta-wall-3: #091426; --cta-wall-4: #040a14;
  --cta-glow: 2,193,255; --cta-glow-a: 0.46;
  --cta-chip: 2,193,255; --cta-chip-a: 1;
  --cta-rim: 120,170,255; --cta-rim-a: 0.5;
  --cta-a-top: 0.22; --cta-a-left: 0.1; --cta-a-right: 0.42; --cta-a-bot: 0.62;
  --cta-a-crown: 0.16; --cta-a-cove: 0.3;
  background:
    linear-gradient(180deg, rgba(190,224,255,0.16) 0%, rgba(190,224,255,0.04) 32%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, rgba(0,0,0,0.05) 1px 3px),
    radial-gradient(130% 170% at 96% -20%, rgba(26,74,208,0.44) 0%, rgba(26,74,208,0.1) 42%, transparent 66%),
    linear-gradient(168deg, #16294b 0%, #0d1b35 46%, #070f21 100%);
  background-size: 100% 20px, 100% 3px, 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  border-color: transparent;
}
body.home .hero-ctas .btn-secondary .hm-cta-spec {
  background: radial-gradient(118% 155% at 14% 120%, rgba(2,193,255,0.34) 0%, rgba(2,193,255,0.07) 42%, transparent 68%);
  animation: ctaCoveBreathe 9s var(--cta-ease-edge) 4.5s infinite;
}
@keyframes ctaCoveBreathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
body.home .hero-ctas .btn-secondary::after {
  inset: 1px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(120,232,255,0.95) 46%, rgba(2,193,255,0.55) 62%, transparent 100%) top / 60% 1px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(120,232,255,0.85) 52%, transparent 100%) right / 1px 54% no-repeat;
  animation: ctaRake 9s var(--cta-ease-edge) infinite;
}

/* Light rakes the top edge, hands over to the trailing edge, and dies.
   It never closes a loop, so it can never read as a spinner. */
@keyframes ctaRake {
  0%, 10% { background-position: -70% 0, right 100%; opacity: 0; }
  18% { opacity: 1; }
  54% { background-position: 150% 0, right 0%; opacity: 1; }
  72%, 100% { background-position: 150% 0, right -60%; opacity: 0; }
}
body.home .hero-ctas .btn-secondary .hm-cta-arrow { animation: ctaArrowLift 9s var(--cta-ease-edge) infinite; }
body.home .hero-ctas .btn-secondary .hm-cta-arrow::before { animation: ctaShaft 9s var(--cta-ease-edge) infinite; }
@keyframes ctaArrowLift {
  0%, 52%, 100% { transform: translate(0, 0); }
  60% { transform: translate(1px, -2px); }
  70% { transform: translate(5px, 0); }
  80% { transform: translate(2px, 0); }
  88% { transform: translate(0, 0); }
}
@keyframes ctaShaft {
  0%, 54%, 100% { transform: scaleX(0.72); }
  66%, 78% { transform: scaleX(1); }
}

/* ---- C — credit strategy: satin green, shifting gradient, 11s ---- */
body.home .svc-green .btn-primary {
  color: #f3fbff;
  text-shadow: 0 1px 0 rgba(3,14,52,0.7), 0 0 20px rgba(56,207,255,0.22);
  --cta-riser: 8px;
  --cta-wall-1: #1b4fbe; --cta-wall-2: #123787;
  --cta-wall-3: #0a2355; --cta-wall-4: #041028;
  --cta-glow: 56,150,255; --cta-glow-a: 0.5;
  --cta-chip: 175,221,44; --cta-chip-a: 0.92;
  --cta-rim: 160,225,255; --cta-rim-a: 0.55;
  --cta-a-top: 0.42; --cta-a-left: 0.18; --cta-a-right: 0.34; --cta-a-bot: 0.52;
  --cta-a-crown: 0.26; --cta-a-cove: 0.36;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.07) 40%, transparent 62%),
    radial-gradient(120% 160% at 4% 120%, rgba(175,221,44,0.18) 0%, transparent 54%),
    linear-gradient(94deg, #10318f 0%, #1a53cc 22%, #2c84ee 52%, #3fb4f2 76%, #1c5fd6 100%);
  background-size: 100% 20px, 100% 100%, 230% 100%;
  background-position: 0 0, 0 0, 14% 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-color: transparent;
  animation: ctaDrift 11.6s ease-in-out infinite;
}
@keyframes ctaDrift {
  0%, 100% { background-position: 0 0, 0 0, 14% 0; }
  50% { background-position: 0 0, 0 0, 72% 0; }
}
body.home .svc-green .btn-primary .hm-cta-spec {
  background: linear-gradient(276deg, rgba(120,240,255,0.32) 0%, rgba(120,240,255,0) 44%, rgba(8,26,74,0.34) 100%);
  background-size: 200% 100%;
  mix-blend-mode: soft-light;
  animation: ctaDriftBack 11.6s ease-in-out infinite;
}
@keyframes ctaDriftBack {
  0%, 100% { background-position: 88% 0; }
  50% { background-position: 8% 0; }
}
body.home .svc-green .btn-primary::after {
  inset: 1px 1px auto 1px;
  height: 38%;
  border-radius: calc(var(--cta-r) - 1px) calc(var(--cta-r) - 1px) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02));
  box-shadow: 0 1px 0 rgba(255,255,255,0.14);
}
body.home .svc-green .btn-primary svg {
  transform-origin: 0% 50%;
  animation: ctaGlide 11.6s ease-in-out infinite;
}
@keyframes ctaGlide {
  0%, 100% { transform: translateX(0) scaleX(1); }
  28% { transform: translateX(3px) scaleX(1.08); }
  50% { transform: translateX(5px) scaleX(1); }
  72% { transform: translateX(2px) scaleX(1.04); }
}
@keyframes ctaGlideFast {
  0%, 100% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(5px) scaleX(1.1); }
  70% { transform: translateX(2px) scaleX(1); }
}

/* ---- D — tax preparation: stratified royal to cyan, a climbing cove, 8.4s ---- */
body.home .svc-sky .btn-sky {
  color: #07190a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 -1px 0 rgba(7,25,10,0.32);
  --cta-riser: 8px;
  --cta-wall-1: #3f8a16; --cta-wall-2: #2c6410;
  --cta-wall-3: #1b4409; --cta-wall-4: #0a2104;
  --cta-glow: 143,214,58; --cta-glow-a: 0.56;
  --cta-chip: 2,193,255; --cta-chip-a: 0.9;
  --cta-rim: 255,255,255; --cta-rim-a: 0.4;
  --cta-a-top: 0.5; --cta-a-left: 0.2; --cta-a-right: 0.3; --cta-a-bot: 0.48;
  --cta-a-crown: 0.3; --cta-a-cove: 0.38;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.09) 40%, transparent 70%),
    linear-gradient(180deg,
      #8fd63a 0%, #8fd63a 37.5%,
      rgba(255,255,255,0.22) 37.5%, rgba(255,255,255,0.22) 38.4%,
      #6fbd27 38.4%, #6fbd27 69.5%,
      rgba(12,40,6,0.42) 69.5%, rgba(12,40,6,0.42) 70.4%,
      #57ab28 70.4%, #57ab28 100%),
    linear-gradient(90deg, #47941c 0%, #6bbb25 38%, #a2dd45 74%, #57d0b0 100%);
  background-size: 100% 20px, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, overlay, normal;
  border-color: transparent;
}
body.home .svc-sky .btn-sky .hm-cta-spec {
  background: radial-gradient(120% 80% at 50% 114%, rgba(2,193,255,0.62) 0%, rgba(2,193,255,0.2) 38%, transparent 66%);
  animation: ctaRise 8.4s var(--cta-ease-metro) infinite;
}
@keyframes ctaRise {
  0%, 22% { transform: translateY(14%); opacity: 0.3; }
  50% { transform: translateY(-26%); opacity: 1; }
  78%, 100% { transform: translateY(14%); opacity: 0.3; }
}
body.home .svc-sky .btn-sky::after {
  inset: 1px 1px auto 1px;
  height: 36%;
  border-radius: calc(var(--cta-r) - 1px) calc(var(--cta-r) - 1px) 0 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,0.46) 46%, rgba(255,255,255,0) 66%);
  animation: ctaTopGloss 8.4s var(--cta-ease-metro) 0.5s infinite;
}
@keyframes ctaTopGloss {
  0%, 44% { transform: translateX(-70%); }
  66%, 100% { transform: translateX(70%); }
}
body.home .svc-sky .btn-sky svg { animation: ctaNudge 8.4s var(--cta-ease-metro) infinite; }
@keyframes ctaNudge {
  0%, 46% { transform: translateX(0); }
  58%, 84% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* ---- E — financial reset: blue glass, cyan then lime counter-sweep, 10.6s ---- */
body.home .svc-white .btn-secondary {
  color: #f0fff6;
  text-shadow: 0 1px 0 rgba(0,18,10,0.66), 0 0 18px rgba(82,217,162,0.22);
  --cta-riser: 8px;
  --cta-wall-1: #1c6a4c; --cta-wall-2: #124a35;
  --cta-wall-3: #0a2e21; --cta-wall-4: #041610;
  --cta-glow: 82,217,162; --cta-glow-a: 0.52;
  --cta-chip: 143,230,90; --cta-chip-a: 0.95;
  --cta-rim: 2,193,255; --cta-rim-a: 0.7;
  --cta-a-top: 0.3; --cta-a-left: 0.14; --cta-a-right: 0.38; --cta-a-bot: 0.56;
  --cta-a-crown: 0.22; --cta-a-cove: 0.32;
  background:
    linear-gradient(180deg, rgba(220,255,238,0.24) 0%, rgba(220,255,238,0.05) 40%, transparent 68%),
    radial-gradient(130% 170% at 6% -10%, rgba(82,217,162,0.36) 0%, rgba(82,217,162,0.08) 42%, transparent 64%),
    radial-gradient(110% 150% at 104% 122%, rgba(175,221,44,0.2) 0%, transparent 58%),
    radial-gradient(120% 150% at 96% -20%, rgba(2,193,255,0.18) 0%, transparent 56%),
    linear-gradient(168deg, #17573f 0%, #0d3327 52%, #061c15 100%);
  background-size: 100% 20px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border-color: transparent;
}
body.home .svc-white .btn-secondary::after {
  background: linear-gradient(104deg,
    rgba(2,193,255,0) 30%,
    rgba(2,193,255,0.22) 42%,
    rgba(180,240,255,0.55) 49%,
    rgba(2,193,255,0.16) 57%,
    rgba(2,193,255,0) 70%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  animation: ctaCounterA 10.6s cubic-bezier(0.38, 0, 0.2, 1) infinite;
}
@keyframes ctaCounterA {
  0%, 16% { background-position: -180% 0; opacity: 0; }
  22% { background-position: -150% 0; opacity: 1; }
  44% { background-position: 180% 0; opacity: 1; }
  50%, 100% { background-position: 180% 0; opacity: 0; }
}
body.home .svc-white .btn-secondary .hm-cta-spec {
  background: linear-gradient(270deg, rgba(175,221,44,0.42) 0%, rgba(175,221,44,0.08) 22%, transparent 42%);
  opacity: 0;
  animation: ctaCounterB 10.6s cubic-bezier(0.38, 0, 0.2, 1) infinite;
}
@keyframes ctaCounterB {
  0%, 52% { opacity: 0; transform: translateX(10%); }
  62% { opacity: 1; transform: translateX(0); }
  80% { opacity: 0.7; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(10%); }
}
body.home .svc-white .btn-secondary svg { animation: ctaPendulum 10.6s cubic-bezier(0.38, 0, 0.2, 1) infinite; }
@keyframes ctaPendulum {
  0%, 30% { transform: translateX(0); }
  38% { transform: translateX(8px); }
  46% { transform: translateX(-1px); }
  54% { transform: translateX(4px); }
  62% { transform: translateX(1px); }
  70% { transform: translateX(2px); }
  80%, 100% { transform: translateX(0); }
}

/* ---- F — Our Story: indigo to teal, cross hatched, corner bloom, 12s ---- */
body.home .hm-btn-story {
  color: #f0f7ff;
  text-shadow: 0 1px 0 rgba(4,10,28,0.7), 0 0 22px rgba(70,207,187,0.22);
  --cta-riser: 8px;
  --cta-wall-1: #303c86; --cta-wall-2: #212a5e;
  --cta-wall-3: #141a3c; --cta-wall-4: #070c1e;
  --cta-glow: 62,205,215; --cta-glow-a: 0.62;
  --cta-chip: 82,235,210; --cta-chip-a: 1;
  --cta-rim: 150,185,255; --cta-rim-a: 0.7;
  --cta-a-top: 0.3; --cta-a-left: 0.14; --cta-a-right: 0.4; --cta-a-bot: 0.58;
  --cta-a-crown: 0.22; --cta-a-cove: 0.36;
  background:
    linear-gradient(180deg, rgba(228,240,255,0.22) 0%, rgba(228,240,255,0.05) 40%, transparent 70%),
    radial-gradient(150% 200% at -6% -30%, rgba(2,193,255,0.34) 0%, rgba(41,51,130,0.4) 34%, transparent 66%),
    radial-gradient(120% 160% at 108% 130%, rgba(70,207,187,0.34) 0%, rgba(70,207,187,0.06) 44%, transparent 68%),
    linear-gradient(152deg, #3648ab 0%, #24327c 32%, #17325f 62%, #0b1a38 100%);
  background-size: 100% 20px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border-color: transparent;
}
body.home .hm-btn-story::after {
  opacity: 0.55;
  background:
    linear-gradient(90deg, transparent 0%, rgba(150,255,240,0.9) 46%, rgba(120,170,255,0.5) 64%, transparent 100%) top / 62% 1px no-repeat,
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px);
  animation: ctaStoryEdge 12s cubic-bezier(0.3, 0, 0.2, 1) 1.6s infinite;
}
/* The edge light crosses once per cycle, offset from the corner bloom. */
@keyframes ctaStoryEdge {
  0%, 20% { background-position: -80% 0, 0 0, 0 0; }
  62%, 100% { background-position: 180% 0, 0 0, 0 0; }
}
body.home .hm-btn-story .hm-cta-spec {
  background: radial-gradient(60% 200% at 2% 0%,
    rgba(255,255,255,0.45) 0%, rgba(2,193,255,0.34) 22%, rgba(70,207,187,0.12) 46%, transparent 70%);
  transform-origin: 0% 0%;
  animation: ctaBloom 12s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
@keyframes ctaBloom {
  0%, 12% { transform: scale(0.72); opacity: 0.3; }
  40% { transform: scale(1.18); opacity: 1; }
  64% { transform: scale(1.02); opacity: 0.62; }
  88%, 100% { transform: scale(0.72); opacity: 0.3; }
}
body.home .hm-btn-story svg {
  transform-origin: 0% 50%;
  animation: ctaDraw 12s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
@keyframes ctaDraw {
  0%, 20% { transform: translateX(0) scaleX(1); }
  42% { transform: translateX(4px) scaleX(1.16); }
  62% { transform: translateX(6px) scaleX(1); }
  84%, 100% { transform: translateX(0) scaleX(1); }
}

/* ---- G — Meet Steven: lime from below left, cyan from above right, 14s ---- */
body.home .hm-btn-founder {
  color: #f3fde4;
  text-shadow: 0 1px 0 rgba(3,10,4,0.7), 0 0 20px rgba(175,221,44,0.2);
  --cta-riser: 8px;
  --cta-wall-1: #1b3a3a; --cta-wall-2: #122a2a;
  --cta-wall-3: #0a1a1c; --cta-wall-4: #040c10;
  --cta-glow: 120,215,140; --cta-glow-a: 0.42;
  --cta-chip: 175,221,44; --cta-chip-a: 0.95;
  --cta-rim: 2,193,255; --cta-rim-a: 0.65;
  --cta-a-top: 0.28; --cta-a-left: 0.13; --cta-a-right: 0.4; --cta-a-bot: 0.58;
  --cta-a-crown: 0.2; --cta-a-cove: 0.34;
  background:
    linear-gradient(180deg, rgba(240,255,225,0.2) 0%, rgba(240,255,225,0.04) 40%, transparent 68%),
    radial-gradient(120% 170% at -4% 126%, rgba(175,221,44,0.38) 0%, rgba(140,195,40,0.1) 40%, transparent 64%),
    radial-gradient(120% 170% at 104% -24%, rgba(2,193,255,0.36) 0%, rgba(2,193,255,0.08) 42%, transparent 66%),
    linear-gradient(112deg, rgba(175,221,44,0.1) 0%, rgba(175,221,44,0) 44%, rgba(2,193,255,0) 56%, rgba(2,193,255,0.1) 100%),
    linear-gradient(168deg, #10203c 0%, #0a1730 48%, #050c1c 100%);
  background-size: 100% 20px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border-color: transparent;
}
body.home .hm-btn-founder::after {
  inset: -55% -20%;
  border-radius: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(175,221,44,0) 0deg,
    rgba(205,239,106,0.3) 26deg,
    rgba(255,255,255,0.22) 42deg,
    rgba(2,193,255,0.26) 62deg,
    rgba(2,193,255,0) 96deg,
    rgba(175,221,44,0) 360deg);
  animation: ctaSeal 15.5s linear infinite;
}
@keyframes ctaSeal { to { transform: rotate(1turn); } }
body.home .hm-btn-founder .hm-cta-spec {
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 44%);
  mix-blend-mode: soft-light;
  animation: ctaSealPulse 15.5s linear 7.75s infinite;
}
@keyframes ctaSealPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
body.home .hm-btn-founder svg {
  stroke: #cdef6a;
  animation: ctaAdvance 15.5s cubic-bezier(0.26, 0, 0.2, 1) infinite;
}
@keyframes ctaAdvance {
  0%, 52% { transform: translateX(0); }
  62%, 76% { transform: translateX(6px); }
  86%, 100% { transform: translateX(0); }
}

/* ---- H — the closing pair: one clock, H2 answering 1.4s later ---- */
body.home .cta-banner-ctas .btn-primary {
  color: #061403;
  text-shadow: 0 1px 0 rgba(255,255,255,0.44), 0 -1px 0 rgba(8,28,3,0.36);
  --cta-riser: 12px;
  --cta-wall-1: #46901c; --cta-wall-2: #2f660f;
  --cta-wall-3: #1d4409; --cta-wall-4: #0b2004;
  --cta-glow: 175,221,44; --cta-glow-a: 0.62;
  --cta-chip: 14,48,4; --cta-chip-a: 0.88;
  --cta-rim: 255,255,255; --cta-rim-a: 0.38;
  --cta-a-top: 0.6; --cta-a-left: 0.26; --cta-a-right: 0.3; --cta-a-bot: 0.46;
  --cta-a-crown: 0.36; --cta-a-cove: 0.42; --cta-contact: 0.94;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.1) 34%, rgba(255,255,255,0) 52%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, rgba(0,0,0,0.05) 1px 2px),
    linear-gradient(92deg, #27590f 0%, #438c19 18%, #6fbd27 46%, #afdd2c 72%, #6bb524 100%);
  background-size: 100% 24px, 2px 100%, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
  border-color: transparent;
}
body.home .cta-banner-ctas .btn-primary .hm-cta-spec {
  background: radial-gradient(130% 130% at 50% 132%, rgba(16,46,3,0.52) 0%, rgba(16,46,3,0.14) 44%, transparent 68%);
}
body.home .cta-banner-ctas .btn-primary::after {
  inset: auto;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 30%;
  border-radius: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0% 38%, rgba(255,255,255,0.22) 42%, rgba(255,255,255,0.8) 47%,
    rgba(255,255,255,0.88) 50%, rgba(255,255,255,0.24) 55%, rgba(255,255,255,0.06) 62%,
    rgba(255,255,255,0) 72% 100%);
  transform: translateX(-140%) skewX(-14deg);
  opacity: 0;
  animation: ctaTravel 8s var(--cta-ease-light) 0.6s infinite;
}
body.home .cta-banner-ctas .btn-primary svg { animation: ctaStepLead 8s var(--cta-ease-light) 0.6s infinite; }

body.home .cta-banner-ctas .btn-secondary {
  color: #ecf8ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.66), 0 0 18px rgba(2,193,255,0.18);
  --cta-riser: 12px;
  --cta-wall-1: #1a3054; --cta-wall-2: #10203c;
  --cta-wall-3: #091426; --cta-wall-4: #040a14;
  --cta-glow: 2,193,255; --cta-glow-a: 0.36;
  --cta-chip: 56,207,255; --cta-chip-a: 0.92;
  --cta-rim: 135,205,60; --cta-rim-a: 0.6;
  --cta-a-top: 0.24; --cta-a-left: 0.11; --cta-a-right: 0.42; --cta-a-bot: 0.62;
  --cta-a-crown: 0.17; --cta-a-cove: 0.3;
  background:
    linear-gradient(180deg, rgba(200,230,255,0.17) 0%, rgba(200,230,255,0.04) 34%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.026) 0 1px, rgba(0,0,0,0.05) 1px 3px),
    radial-gradient(110% 150% at 90% 122%, rgba(135,205,60,0.14) 0%, transparent 58%),
    linear-gradient(168deg, #15294a 0%, #0c1a34 46%, #060e20 100%);
  background-size: 100% 24px, 100% 3px, 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  border-color: transparent;
}
body.home .cta-banner-ctas .btn-secondary .hm-cta-spec {
  background: radial-gradient(118% 155% at 16% 120%, rgba(2,193,255,0.32) 0%, rgba(2,193,255,0.06) 42%, transparent 68%);
  animation: ctaCoveBreathe 8s var(--cta-ease-edge) 5.4s infinite;
}
body.home .cta-banner-ctas .btn-secondary::after {
  inset: 1px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(2,193,255,0.95) 46%, rgba(135,205,60,0.55) 62%, transparent 100%) top / 60% 1px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(2,193,255,0.85) 52%, transparent 100%) right / 1px 54% no-repeat;
  animation: ctaRake 8s var(--cta-ease-edge) 1.4s infinite;
}

body.home .cta-banner-ctas .btn-secondary .hm-cta-arrow { animation: ctaArrowLift 8s var(--cta-ease-edge) 1.4s infinite; }
body.home .cta-banner-ctas .btn-secondary .hm-cta-arrow::before { animation: ctaShaft 8s var(--cta-ease-edge) 1.4s infinite; }

/* ---- Pointer refinements ---- */
@media (hover: hover) and (pointer: fine) {
  body.home .hero-ctas .btn-primary:hover { background-position: 0 0, 0 0, 64% 0; }
  body.home .hero-ctas .btn-primary:hover::after { animation: ctaTravelFast 1.15s var(--cta-ease-light) infinite; }
  body.home .hero-ctas .btn-primary:hover svg { animation: ctaStepFast 0.9s ease-in-out infinite; }
  body.home .hero-ctas .btn-secondary:hover { --cta-glow-a: 0.72; --cta-chip-a: 1; color: #ffffff; }
  body.home .hero-ctas .btn-secondary:hover::after { animation-duration: 2.2s; animation-timing-function: linear; }
  body.home .hero-ctas .btn-secondary:hover .hm-cta-spec { opacity: 1; animation: none; }
  body.home .hero-ctas .btn-secondary:hover .hm-cta-arrow { animation-duration: 1.1s; animation-timing-function: ease-in-out; }
  body.home .svc-green .btn-primary:hover { animation: none; background-position: 0 0, 0 0, 78% 0; --cta-glow-a: 0.85; --cta-rim-a: 0.9; }
  body.home .svc-green .btn-primary:hover .hm-cta-spec { animation: none; background-position: 4% 0; opacity: 0.8; }
  body.home .svc-green .btn-primary:hover svg { animation: ctaGlideFast 1.3s ease-in-out infinite; }
  body.home .svc-sky .btn-sky:hover { --cta-glow-a: 0.92; --cta-rim-a: 0.85; }
  body.home .svc-sky .btn-sky:hover .hm-cta-spec { animation-duration: 2.1s; }
  body.home .svc-sky .btn-sky:hover::after { animation-duration: 2.1s; }
  body.home .svc-sky .btn-sky:hover svg { animation: ctaNudge 2.1s var(--cta-ease-metro) infinite; }
  body.home .svc-white .btn-secondary:hover { --cta-glow-a: 0.76; --cta-rim-a: 1; color: #ffffff; }
  body.home .svc-white .btn-secondary:hover::after { animation-duration: 1.5s; }
  body.home .svc-white .btn-secondary:hover .hm-cta-spec { animation: none; opacity: 0.9; transform: none; }
  body.home .svc-white .btn-secondary:hover svg { animation: ctaPendulum 1.9s cubic-bezier(0.38, 0, 0.2, 1) infinite; }
  body.home .hm-btn-story:hover { --cta-glow-a: 0.8; --cta-chip-a: 1; }
  body.home .hm-btn-story:hover::after { opacity: 0.72; }
  body.home .hm-btn-story:hover .hm-cta-spec { animation: none; transform: scale(1.22); opacity: 1; }
  body.home .hm-btn-story:hover svg { animation: ctaDraw 2.4s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
  body.home .hm-btn-founder:hover { --cta-glow-a: 0.76; --cta-chip-a: 1; --cta-rim-a: 0.95; }
  body.home .hm-btn-founder:hover::after { animation-duration: 3.4s; }
  body.home .hm-btn-founder:hover .hm-cta-spec { animation: none; opacity: 1; }
  body.home .hm-btn-founder:hover svg { animation: ctaAdvance 2.6s cubic-bezier(0.26, 0, 0.2, 1) infinite; }
  body.home .cta-banner-ctas .btn-primary:hover::after { animation: ctaTravelFast 1.05s var(--cta-ease-light) infinite; }
  body.home .cta-banner-ctas .btn-primary:hover svg { animation: ctaStepFast 0.85s ease-in-out infinite; }
  body.home .cta-banner-ctas .btn-secondary:hover { --cta-glow-a: 0.7; --cta-rim-a: 0.95; }
  body.home .cta-banner-ctas .btn-secondary:hover::after { animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; }
  body.home .cta-banner-ctas .btn-secondary:hover .hm-cta-arrow { animation-duration: 1.05s; animation-delay: 0s; }
}

/* ---- Touch: the idle cycle is the whole story, and the tap is the reward ---- */
@media (hover: none) {
  body.home .btn:hover { transform: none; }
  body.home .btn { --cta-chip-a: 1; --cta-rim-a: 0.8; --cta-glow-a: 0.5; }
  body.home .hero-ctas .btn::after,
  body.home .hero-ctas .btn .hm-cta-spec,
  body.home .hero-ctas .btn svg,
  body.home .hero-ctas .btn .hm-cta-arrow { animation-duration: 6.2s; }
  body.home .svc-green .btn-primary,
  body.home .svc-green .btn-primary .hm-cta-spec,
  body.home .svc-green .btn-primary svg { animation-duration: 9.4s; }
  body.home .svc-sky .btn-sky::after,
  body.home .svc-sky .btn-sky .hm-cta-spec,
  body.home .svc-sky .btn-sky svg { animation-duration: 7.2s; }
  body.home .svc-white .btn-secondary::after,
  body.home .svc-white .btn-secondary .hm-cta-spec,
  body.home .svc-white .btn-secondary svg { animation-duration: 9s; }
  body.home .hm-btn-story .hm-cta-spec,
  body.home .hm-btn-story svg { animation-duration: 10.2s; }
  body.home .hm-btn-founder::after,
  body.home .hm-btn-founder .hm-cta-spec,
  body.home .hm-btn-founder svg { animation-duration: 12s; }

  body.home .hero-ctas .btn-primary:active::after,
  body.home .cta-banner-ctas .btn-primary:active::after,
  body.home .svc-white .btn-secondary:active::after { animation: ctaTapFlash 0.36s var(--cta-ease-light) 1; }
  body.home .hero-ctas .btn-secondary:active::after,
  body.home .cta-banner-ctas .btn-secondary:active::after { animation: ctaRake 0.72s var(--cta-ease-light) 1; }
  body.home .svc-sky .btn-sky:active .hm-cta-spec { animation: ctaTapRise 0.4s var(--cta-ease-metro) 1; }
  body.home .svc-green .btn-primary:active { animation: none; background-position: 0 0, 0 0, 82% 0; }
  body.home .hm-btn-story:active .hm-cta-spec { animation: ctaTapBloom 0.44s var(--cta-ease-lift) 1; }
  body.home .hm-btn-founder:active::after { animation: ctaSeal 1.6s linear 1; }
}
@keyframes ctaTapFlash {
  0% { transform: translateX(-140%) skewX(-14deg); opacity: 1; }
  100% { transform: translateX(150%) skewX(-14deg); opacity: 0; }
}
@keyframes ctaTapRise {
  0% { transform: translateY(16%); opacity: 0.4; }
  55% { transform: translateY(-28%); opacity: 1; }
  100% { transform: translateY(14%); opacity: 0.3; }
}
@keyframes ctaTapBloom {
  0% { transform: scale(0.72); opacity: 0.3; }
  55% { transform: scale(1.26); opacity: 1; }
  100% { transform: scale(0.72); opacity: 0.3; }
}

@media (max-width: 900px) {
  body.home .btn { --cta-riser: 5px; --cta-floor: 0.72; min-height: 52px; }
  body.home .btn-lg { --cta-riser: 6px; min-height: 56px; padding: 17px 24px; }
  body.home .hero-ctas .btn-primary,
  body.home .hero-ctas .btn-secondary,
  body.home .cta-banner-ctas .btn-primary,
  body.home .cta-banner-ctas .btn-secondary { --cta-riser: 7px; }
  body.home .hero-ctas .btn-primary::after { width: 26%; animation-duration: 8.4s; }
  body.home .cta-banner-ctas .btn-primary::after { width: 24%; animation-duration: 9.2s; }
  body.home .hero-ctas .btn-primary svg { animation-duration: 8.4s; }
  body.home .cta-banner-ctas .btn-primary svg { animation-duration: 9.2s; }
  body.home .hero-ctas .btn-secondary::after,
  body.home .hero-ctas .btn-secondary .hm-cta-spec,
  body.home .hero-ctas .btn-secondary .hm-cta-arrow,
  body.home .hero-ctas .btn-secondary .hm-cta-arrow::before { animation-duration: 10.4s; }
  body.home .cta-banner-ctas .btn-secondary::after,
  body.home .cta-banner-ctas .btn-secondary .hm-cta-spec,
  body.home .cta-banner-ctas .btn-secondary .hm-cta-arrow,
  body.home .cta-banner-ctas .btn-secondary .hm-cta-arrow::before { animation-duration: 9.2s; }
  body.home .svc-green .btn-primary,
  body.home .svc-green .btn-primary .hm-cta-spec,
  body.home .svc-green .btn-primary svg { animation-duration: 12.6s; }
  body.home .svc-sky .btn-sky::after,
  body.home .svc-sky .btn-sky .hm-cta-spec,
  body.home .svc-sky .btn-sky svg { animation-duration: 9.6s; }
  body.home .svc-white .btn-secondary::after,
  body.home .svc-white .btn-secondary .hm-cta-spec,
  body.home .svc-white .btn-secondary svg { animation-duration: 12s; }
  body.home .hm-btn-story .hm-cta-spec,
  body.home .hm-btn-story svg { animation-duration: 13.5s; }
  body.home .hm-btn-founder::after,
  body.home .hm-btn-founder .hm-cta-spec,
  body.home .hm-btn-founder svg { animation-duration: 16s; }
  body.home .hero-ctas .btn-primary,
  body.home .cta-banner-ctas .btn-primary { background-size: 100% 20px, 3px 100%, 190% 100%; }
  body.home .hero-ctas .btn-secondary { background-size: 100% 20px, 100% 4px, 100% 100%, 100% 100%; }
  body.home .cta-banner-ctas .btn-secondary { background-size: 100% 20px, 100% 4px, 100% 100%, 100% 100%; }
}

@media (max-width: 430px) {
  body.home .btn {
    --cta-riser: 4px;
    --cta-floor: 0.56;
    min-height: 56px;
    padding: 15px 18px;
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    line-height: 1.32;
    white-space: normal;
    text-align: center;
  }
  body.home .btn-lg { --cta-riser: 5px; min-height: 62px; padding: 17px 20px; font-size: 0.78125rem; }
  /* The crown is a physical chamfer, so it stays pinned in pixels on a two line plate. */
  body.home .hero-ctas .btn-primary,
  body.home .cta-banner-ctas .btn-primary { background-size: 100% 18px, 3px 100%, 190% 100%; }
  body.home .hero-ctas .btn-secondary { background-size: 100% 18px, 100% 4px, 100% 100%, 100% 100%; }
  body.home .cta-banner-ctas .btn-secondary { background-size: 100% 18px, 100% 4px, 100% 100%, 100% 100%; }
  body.home .svc-green .btn-primary { background-size: 100% 18px, 100% 100%, 230% 100%; }
  body.home .svc-sky .btn-sky { background-size: 100% 18px, 100% 100%, 100% 100%; }
  body.home .svc-white .btn-secondary { background-size: 100% 18px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
  body.home .hm-btn-story { background-size: 100% 18px, 100% 100%, 100% 100%, 100% 100%; }
  body.home .hm-btn-founder { background-size: 100% 18px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
  body.home .svc-sky .btn-sky::after { height: 30%; }
  body.home .hero-ctas .btn-primary::after { width: 22%; animation-duration: 9.2s; }
  body.home .cta-banner-ctas .btn-primary::after { width: 20%; animation-duration: 10s; }
  body.home .hm-btn-story .hm-cta-spec {
    background: radial-gradient(90% 200% at 50% -12%,
      rgba(255,255,255,0.4) 0%, rgba(2,193,255,0.3) 24%, rgba(70,207,187,0.1) 50%, transparent 74%);
    transform-origin: 50% 0%;
  }
  /* A 1px rim across a full width plate reads as a border, so only the chip survives. */
  body.home .btn::before { background-size: 3px 100%, 0 0; }
  body.home .hm-cta-arrow { width: 15px; }
  body.home .btn svg { width: 15px; height: 15px; }
}

/* ---- The chrome keeps the plain site buttons ---- */
body.home .nav .btn,
body.home .nav-cta .btn,
body.home .mobile-menu .btn,
body.home .footer .btn,
body.home .btn-sm {
  animation: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  min-height: 0;
  box-shadow: var(--shadow-card);
  text-shadow: none;
  overflow: visible;
  padding: 9px 11px;
  gap: 7px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
body.home .nav .btn::before,
body.home .nav .btn::after,
body.home .nav-cta .btn::before,
body.home .nav-cta .btn::after,
body.home .mobile-menu .btn::before,
body.home .mobile-menu .btn::after,
body.home .footer .btn::before,
body.home .footer .btn::after,
body.home .btn-sm::before,
body.home .btn-sm::after,
body.home .nav .hm-cta-spec,
body.home .mobile-menu .hm-cta-spec,
body.home .btn-sm .hm-cta-spec { display: none; }
body.home .nav .btn svg,
body.home .mobile-menu .btn svg,
body.home .footer .btn svg,
body.home .btn-sm svg { animation: none; }
body.home .nav .btn-primary,
body.home .mobile-menu .btn-primary { background: var(--green-600); color: var(--navy-900); border-color: var(--green-600); }
body.home .nav .btn-primary:hover,
body.home .mobile-menu .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); border-color: var(--green-500); }
body.home .nav .btn-sky,
body.home .mobile-menu .btn-sky { background: var(--blue-600); border-color: var(--blue-600); }
body.home .nav .btn-secondary,
body.home .mobile-menu .btn-secondary { background: transparent; border-color: var(--border-light); box-shadow: none; }
body.home .btn:hover,
body.home .btn:focus-visible { border-color: transparent; }
body.home .btn:focus-visible { outline: 2px solid #9be8ff; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  body.home .btn,
  body.home .btn::before,
  body.home .btn::after,
  body.home .btn svg,
  body.home .hm-cta-spec,
  body.home .hm-cta-arrow,
  body.home .hm-cta-arrow::before { animation: none !important; }
  /* Each mechanism freezes at its best frame rather than going dark. */
  body.home .hero-ctas .btn-primary::after,
  body.home .cta-banner-ctas .btn-primary::after { transform: translateX(-6%) skewX(-14deg); opacity: 1; }
  body.home .hero-ctas .btn-secondary::after,
  body.home .cta-banner-ctas .btn-secondary::after { background-position: 44% 0, right 26%; opacity: 1; }
  body.home .hero-ctas .btn-secondary .hm-cta-spec { opacity: 0.85; }
  body.home .svc-green .btn-primary { background-position: 0 0, 0 0, 58% 0; }
  body.home .svc-green .btn-primary .hm-cta-spec { background-position: 24% 0; opacity: 0.8; }
  body.home .svc-sky .btn-sky .hm-cta-spec { transform: translateY(-14%); opacity: 0.85; }
  body.home .svc-sky .btn-sky::after { transform: translateX(0); }
  body.home .svc-white .btn-secondary::after { background-position: 44% 0; opacity: 1; }
  body.home .svc-white .btn-secondary .hm-cta-spec { opacity: 0.55; transform: none; }
  body.home .hm-btn-story .hm-cta-spec { transform: scale(1.06); opacity: 0.8; }
  body.home .hm-btn-founder::after { transform: rotate(-28deg); }
  body.home .hm-btn-founder .hm-cta-spec { opacity: 0.8; }
  body.home .btn svg,
  body.home .btn:hover svg,
  body.home .hm-cta-arrow { transform: none; }
  body.home .hm-cta-arrow::before { transform: scaleX(1); }
  body.home .btn { transition: box-shadow 0.2s linear, color 0.2s linear; }
  body.home .btn:hover { transform: none; }
  body.home .btn:active { transform: none; }
}

/* =========================================================
   HOMEPAGE — THE HERO
   No frame, no box. The photograph is large and dominant, dissolving into
   the field at its outer edges while the sign and the founder stay at full
   strength; the neon inside it spills onto the page behind it; the headline
   sits on its own bed of light.
   ========================================================= */
body.home .hero { isolation: isolate; overflow-x: clip; overflow-y: visible; }

/* ---- The field the hero stands in ---- */
body.home .hm-hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body.home .hm-hero-aurora {
  position: absolute;
  top: -26%;
  left: -12%;
  width: 66%;
  height: 92%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2,193,255,0.12) 0%, rgba(2,193,255,0.04) 46%, transparent 72%);
  filter: blur(6px);
  animation: hmAuroraDrift 26s ease-in-out infinite alternate;
}
body.home .hm-hero-aurora--2 {
  top: auto;
  bottom: -34%;
  left: 38%;
  width: 56%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(87,171,40,0.1) 0%, rgba(175,221,44,0.03) 48%, transparent 72%);
  animation-duration: 32s;
  animation-delay: -8s;
}
@keyframes hmAuroraDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6%, -4%, 0) scale(1.1); }
}
/* A floor of light in perspective: depth without a single flat line. */
body.home .hm-hero-floor {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 150%;
  height: 52%;
  transform: translateX(-50%) perspective(620px) rotateX(74deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(122,180,255,0.15) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(122,180,255,0.12) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(64% 80% at 50% 100%, #000 0%, rgba(0,0,0,0.5) 50%, transparent 80%);
  mask-image: radial-gradient(64% 80% at 50% 100%, #000 0%, rgba(0,0,0,0.5) 50%, transparent 80%);
  opacity: 0.85;
}
/* The horizon the floor runs to. */
body.home .hm-hero-field::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: min(880px, 78%);
  height: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(2,193,255,0.36) 26%, rgba(175,221,44,0.3) 70%, transparent);
  box-shadow: 0 0 28px 3px rgba(2,193,255,0.26);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* ---- The photograph: dissolved into the field, never framed ---- */
body.home .hero-photo {
  border-radius: 0;
  overflow: visible;
  transition: transform 1.2s var(--hm-ease-out);
}
body.home .hero-photo img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  object-position: center center;
}
/* The neon inside the photograph spills onto the page behind it. */
body.home .hero-photo::before {
  content: '';
  position: absolute;
  inset: -16% -14% -10%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(42% 38% at 52% 34%, rgba(87,171,40,0.3) 0%, transparent 72%),
    radial-gradient(56% 52% at 50% 46%, rgba(2,193,255,0.26) 0%, rgba(26,63,212,0.12) 52%, transparent 78%);
  filter: blur(14px);
  animation: hmPanelBreathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hmPanelBreathe {
  0%, 100% { opacity: 0.72; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.04); }
}
/* No frame: the edges are dissolved by a mask, set per breakpoint below. */
body.home .hero-photo::after { display: none; }

/* ---- Desktop: the photograph dominates the right, the copy sits in light ---- */
@media (min-width: 1024px) {
  body.home .hero { padding-top: 92px; grid-template-columns: minmax(0, 1020px) 1fr; }
  body.home .hero-photo {
    position: absolute;
    top: 50%;
    right: clamp(-56px, -2vw, -8px);
    bottom: auto;
    left: auto;
    width: min(66%, 1000px);
    height: auto;
    aspect-ratio: 1;
    transform: translateY(-50%);
    -webkit-mask-image: radial-gradient(88% 84% at 58% 48%, #000 44%, rgba(0,0,0,0.95) 62%, rgba(0,0,0,0.45) 80%, transparent 97%);
    mask-image: radial-gradient(88% 84% at 58% 48%, #000 44%, rgba(0,0,0,0.95) 62%, rgba(0,0,0,0.45) 80%, transparent 97%);
    animation: hmPhotoFloat 14s ease-in-out infinite;
  }
  body.home .hero-scrim {
    display: block;
    background:
      linear-gradient(to right, rgba(7,14,29,0.96) 0%, rgba(7,14,29,0.8) 22%, rgba(7,14,29,0.34) 42%, rgba(7,14,29,0.08) 56%, transparent 66%),
      linear-gradient(to bottom, transparent 66%, rgba(7,14,29,0.45) 88%, rgba(7,14,29,0.9) 100%);
  }
  body.home .hero-content { max-width: 920px; gap: 30px; padding-left: clamp(0px, 2.6vw, 46px); }
  body.home .hero-ctas { gap: 18px; margin-top: 6px; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  body.home .hero-photo { width: min(62%, 820px); right: clamp(-48px, -2vw, -10px); }
  body.home .hero-content { max-width: clamp(430px, 58vw, 840px); padding-left: clamp(0px, 2.2vw, 40px); }
}
@keyframes hmPhotoFloat {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(calc(-50% - 12px)) scale(1.012); }
}

/* ---- The headline sits on its own bed of light ---- */
body.home .hm-hero-l1, body.home .hm-hero-l2 { display: block; }
body.home .hm-hero-l2 { margin-top: 0.06em; }
/* Three deliberate lines: the statement, the verb, the promise. */
body.home .hm-hero-accent {
  display: block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.98) 50%, transparent 62%),
    linear-gradient(168deg, #dff3ff 0%, #2f6bff 20%, #02c1ff 46%, #46cfbb 72%, #afdd2c 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 14px 38px rgba(2,193,255,0.4));
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 1.6s infinite;
  padding-bottom: 0.24em;
  margin-bottom: -0.18em;
}
body.home .hm-hero-accent { display: block; }
body.home .hero-content .display-1 {
  position: relative;
  font-size: clamp(3.125rem, 5.05vw, 4.5rem);
  letter-spacing: -0.022em;
  line-height: 0.94;
  text-shadow: 0 20px 52px rgba(0,0,0,0.72);
}
body.home .hero-content .display-1::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18% -26% -22% -14%;
  background: radial-gradient(58% 60% at 34% 50%, rgba(7,16,34,0.82) 0%, rgba(7,16,34,0.42) 52%, transparent 78%);
  pointer-events: none;
}
/* The accent phrase carries the brand gradient and a slow pass of light. */
body.home .hero-content .gradient-text {
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.95) 50%, transparent 66%),
    linear-gradient(174deg, #eaf9ff 0%, #57d8ff 42%, #35b8e8 72%, #9fe27a 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 128% 0, 0 0;
  animation: hmHeadPass 8s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
  filter: drop-shadow(0 8px 34px rgba(2,193,255,0.45)) drop-shadow(0 0 60px rgba(87,171,40,0.2));
}
body.home .hero-content .body-lg { color: #b8c9e6; }
/* The paragraph reaches toward the picture instead of stopping short of it. */
@media (min-width: 1024px) {
  body.home .hero-content .body-lg { max-width: min(620px, 100%); }
}
@media (min-width: 769px) and (max-width: 1023px) {
  body.home .hero-content .body-lg { max-width: min(560px, 100%); }
  /* The copy column is narrow in this band: the headline holds three lines
     rather than breaking into four. */
  body.home .hero-content .display-1 { font-size: min(4.35vw, 3rem); }
  body.home .hm-hero-l1,
  body.home .hm-hero-l2,
  body.home .hm-hero-accent { white-space: nowrap; }
}
@media (max-width: 768px) {
  body.home .hero-content .body-lg { max-width: 34ch; margin-left: auto; margin-right: auto; }
}

/* ---- Tablet ---- */
@media (min-width: 769px) and (max-width: 1023px) {
  body.home .hero-photo {
    top: 50%;
    right: -6%;
    bottom: auto;
    width: min(60%, 520px);
    height: auto;
    aspect-ratio: 1;
    transform: translateY(-50%);
    -webkit-mask-image: radial-gradient(74% 76% at 58% 48%, #000 44%, rgba(0,0,0,0.9) 62%, rgba(0,0,0,0.3) 80%, transparent 94%);
    mask-image: radial-gradient(74% 76% at 58% 48%, #000 44%, rgba(0,0,0,0.9) 62%, rgba(0,0,0,0.3) 80%, transparent 94%);
  }
  body.home .hero-scrim {
    background:
      linear-gradient(to right, rgba(7,14,29,0.95) 0%, rgba(7,14,29,0.76) 32%, rgba(7,14,29,0.2) 54%, transparent 68%),
      linear-gradient(to bottom, transparent 64%, rgba(7,14,29,0.5) 88%, rgba(7,14,29,0.9) 100%);
  }
}

/* ---- Phone: the photograph is a full-bleed scene, feathered, not a card ---- */
@media (max-width: 768px) {
  body.home .hero { padding-top: 70px; }
  body.home .hero-photo {
    position: relative;
    width: 116%;
    max-width: none;
    margin: 0 -8%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.92;
    border-radius: 0;
    -webkit-mask-image:
      radial-gradient(80% 76% at 50% 42%, #000 40%, rgba(0,0,0,0.9) 58%, rgba(0,0,0,0.3) 80%, transparent 96%),
      linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.5) 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(80% 76% at 50% 42%, #000 40%, rgba(0,0,0,0.9) 58%, rgba(0,0,0,0.3) 80%, transparent 96%),
      linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0.5) 84%, transparent 100%);
    mask-composite: intersect;
  }
  body.home .hero-photo img { object-fit: cover; object-position: center 30%; }
  body.home .hero-photo::before { inset: -12% -6% -8%; filter: blur(18px); }
  body.home .hm-hero-floor { height: 34%; bottom: -4%; }
  body.home .hero-content { padding-top: 10px; gap: 22px; }
  body.home .hero-content .display-1 {
    /* The headline gets the full width of the phone, not the text measure,
       so three lines can stay commanding instead of shrinking to fit. */
    margin-left: -8.2vw;
    margin-right: -8.2vw;
    font-size: min(10.7vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -0.018em;
    text-wrap: nowrap;
  }
  body.home .hm-hero-l1, body.home .hm-hero-l2, body.home .hm-hero-accent { white-space: nowrap; }
  /* Descenders of the italic accent need room under the line box. */
  body.home .hm-hero-accent { padding-bottom: 0.24em; margin-bottom: -0.18em; }
  body.home .hm-hero-l2 { margin-top: 0.08em; }
  body.home .hero-content .display-1::before { inset: -14% -10% -16%; }
  body.home .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  body.home .hero-ctas .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hm-hero-aurora,
  body.home .hero-photo,
  body.home .hero-photo::before,
  body.home .hero-content .gradient-text { animation: none; }
  body.home .hero-photo { transition: none; }
}

/* =========================================================
   HOMEPAGE — WHO WE ARE
   The trendline becomes a sculpted light-guide with a signal running it,
   and the founder note becomes a lit glass plate rather than a paragraph
   with an icon beside it.
   ========================================================= */
body.home .who-we-are-bg { opacity: 1; }
body.home .who-we-are-trendline {
  opacity: 1;
  width: min(1120px, 118%);
  bottom: 4%;
  overflow: visible;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.7));
}
body.home .who-we-are-trendline polyline {
  stroke: url(#hmTrendGrad);
  stroke-width: 7;
  opacity: 0.42;
  filter: drop-shadow(0 0 14px rgba(87,171,40,0.35));
  vector-effect: non-scaling-stroke;
}
/* A specular highlight along the top of the guide. */
body.home .who-we-are-trendline .hm-trend-core {
  fill: none;
  stroke: rgba(255,255,255,0.34);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body.home .who-we-are-trendline .hm-trend-run {
  fill: none;
  stroke: #eafff4;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  filter: drop-shadow(0 0 10px rgba(175,221,44,0.95));
  vector-effect: non-scaling-stroke;
  animation: hmTrendRun 11s cubic-bezier(0.42, 0, 0.3, 1) infinite;
}
@keyframes hmTrendRun {
  0% { stroke-dashoffset: 10; opacity: 0; }
  8% { opacity: 1; }
  52% { opacity: 1; }
  60%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* ---- The founder note: a lit plate ---- */
body.home .who-we-are-founder {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px);
  border-radius: 20px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(175,221,44,0.12) 0%, transparent 60%),
    var(--hm-glass),
    var(--hm-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(175,221,44,0.2),
    var(--hm-lift-2);
}
body.home .who-we-are-founder::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, rgba(175,221,44,0.85) 26%, rgba(2,193,255,0.6) 74%, transparent);
  box-shadow: 0 0 18px rgba(175,221,44,0.6);
}
body.home .who-we-are-founder-icon {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(168deg, rgba(175,221,44,0.26), rgba(10,20,40,0.6));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 0 0 1px rgba(175,221,44,0.34),
    0 18px 28px -18px rgba(0,0,0,0.9),
    0 0 40px -18px rgba(175,221,44,0.9);
  color: #eaffc4;
  animation: hmStarPulse 5.6s ease-in-out infinite;
}
@keyframes hmStarPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), inset 0 0 0 1px rgba(175,221,44,0.3), 0 18px 28px -18px rgba(0,0,0,0.9), 0 0 30px -20px rgba(175,221,44,0.8); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(175,221,44,0.45), 0 18px 28px -18px rgba(0,0,0,0.9), 0 0 52px -14px rgba(175,221,44,1); }
}
body.home .who-we-are-accent::after {
  height: 4px;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(2,193,255,0.75), inset 0 1px 0 rgba(255,255,255,0.4);
}

@media (max-width: 768px) {
  body.home .who-we-are-founder { padding: 20px 18px; border-radius: 18px; }
  body.home .who-we-are-trendline { width: 150%; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .who-we-are-trendline .hm-trend-run { animation: none; display: none; }
  body.home .who-we-are-founder-icon { animation: none; }
}

/* =========================================================
   HOMEPAGE — THE TWO SIGNATURE STATEMENTS
   The Who We Are headline and the founder's creed are the page's convictions,
   so they get a treatment nothing else on the page uses: a quiet first line,
   then a payoff line carrying the full brand gradient and a pass of light.
   ========================================================= */

/* ---- "A Strategy Built Around Your Goals. / Not Just Your Numbers." ---- */
body.home .hm-who-head {
  display: grid;
  gap: clamp(4px, 0.7vw, 12px);
  justify-items: center;
}
body.home .hm-who-l1 {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: #eef4ff;
  text-wrap: balance;
}
/* The personal half of the statement. */
body.home .hm-who-goals {
  font-style: italic;
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.9) 50%, transparent 64%),
    linear-gradient(170deg, #cfeaff 0%, #5ad6e0 52%, #9fe27a 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}
/* The payoff, deliberately the biggest line in the section. */
body.home .hm-who-l2 {
  display: block;
  font-size: clamp(2.375rem, 4.6vw, 4.125rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.98) 50%, transparent 62%),
    linear-gradient(172deg, #dff3ff 0%, #38cfff 34%, #3fd0c0 64%, #b6e64a 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 132% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 34px rgba(2,193,255,0.4));
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 2.4s infinite;
  text-wrap: balance;
}
/* A blade of light under the payoff, not a rule. */
body.home .hm-who-head::after {
  content: '';
  width: clamp(180px, 26vw, 360px);
  height: 5px;
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  border-radius: 5px;
  background: linear-gradient(90deg, transparent, rgba(2,193,255,0.9) 26%, rgba(175,221,44,0.85) 72%, transparent);
  box-shadow: 0 0 26px rgba(2,193,255,0.6);
}
body.home .who-we-are-accent::after { display: none; }

/* ---- "We don't just fix numbers. / We change lives." ---- */
/* The mark hangs beside the note; the creed runs the full width beneath it. */
body.home .who-we-are-founder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  text-align: left;
}
body.home .who-we-are-founder-icon { grid-column: 1; grid-row: 1; margin: 3px 0 0; }
body.home .who-we-are-founder > p { grid-column: 2; grid-row: 1; }
body.home .who-we-are-founder > p.hm-creed { grid-column: 1 / -1; grid-row: 2; }
body.home .hm-creed {
  position: relative;
  display: grid;
  gap: clamp(2px, 0.5vw, 8px);
  clear: both;
  margin: clamp(20px, 2.4vw, 30px) 0 2px;
  padding: clamp(20px, 2.2vw, 28px) 0 0;
  font-family: var(--font-serif);
  text-align: left;
}
/* The line that sets the statement apart from the paragraph above it. */
body.home .hm-creed::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(120px, 22%, 200px);
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(2,193,255,0.95), rgba(175,221,44,0.7) 70%, transparent);
  box-shadow: 0 0 20px rgba(2,193,255,0.6);
}
/* The light it rises out of. */
body.home .hm-creed::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  top: 50%;
  width: 116%;
  height: 180%;
  transform: translateY(-50%);
  background: radial-gradient(52% 54% at 50% 50%, rgba(2,193,255,0.18) 0%, rgba(175,221,44,0.07) 46%, transparent 74%);
  animation: hmPanelBreathe 9s ease-in-out infinite;
  pointer-events: none;
}
body.home .hm-creed-a {
  display: block;
  font-size: clamp(1.375rem, 2.3vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  color: #ffffff;
}
body.home .hm-creed-b {
  display: block;
  font-size: clamp(2.25rem, 4.2vw, 3.625rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.98) 50%, transparent 62%),
    linear-gradient(170deg, #eafaff 0%, #38cfff 40%, #49cfb4 70%, #b6e64a 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 10px 30px rgba(2,193,255,0.4));
  animation: hmHeadPass 8s cubic-bezier(0.45, 0, 0.2, 1) 1.6s infinite;
  padding-bottom: 0.24em;
  margin-bottom: -0.2em;
}

/* ---- The closing statement: three deliberate lines ---- */
body.home .hm-close-head {
  display: grid;
  gap: clamp(2px, 0.4vw, 8px);
  justify-items: center;
}
body.home .hm-close-l1,
body.home .hm-close-l2,
body.home .hm-close-l3 { display: block; line-height: 1.04; letter-spacing: -0.015em; }
body.home .hm-close-l1 { font-size: clamp(2.75rem, 4.9vw, 4.5rem); color: #f2f8ff; }
body.home .hm-close-l2 {
  font-size: clamp(3rem, 5.5vw, 5rem);
  color: transparent;
  background-image: linear-gradient(168deg, #ffffff 0%, #8fe3ff 72%, #38cfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.home .hm-close-l3 {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.98) 50%, transparent 62%),
    linear-gradient(172deg, #dff3ff 0%, #38cfff 36%, #46cfbb 66%, #b6e64a 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 132% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 32px rgba(2,193,255,0.42));
  animation: hmHeadPass 11s cubic-bezier(0.45, 0, 0.2, 1) 2s infinite;
}

@media (max-width: 768px) {
  body.home .hm-who-l1 { font-size: clamp(1.4375rem, 6.4vw, 1.875rem); }
  body.home .hm-who-l2 { font-size: clamp(2rem, 9.4vw, 2.75rem); }
  body.home .hm-who-head::after { width: clamp(140px, 44vw, 220px); height: 4px; }
  body.home .who-we-are-founder { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  body.home .who-we-are-founder-icon { grid-column: 1; grid-row: 1; }
  body.home .who-we-are-founder > p { grid-column: 1; grid-row: 2; }
  body.home .who-we-are-founder > p.hm-creed { grid-column: 1; grid-row: 3; }
  body.home .hm-creed { margin-top: 22px; text-align: center; }
  body.home .hm-creed::after { left: 50%; transform: translateX(-50%); }
  body.home .who-we-are-founder-icon { float: none; margin: 0 auto 12px; }
  body.home .hm-creed-a { font-size: min(5.9vw, 1.5rem); }
  body.home .hm-creed-b { font-size: min(10.6vw, 2.875rem); white-space: nowrap; padding-bottom: 0.26em; margin-bottom: -0.22em; }
  body.home .hm-close-l1 { font-size: min(11.8vw, 3.25rem); }
  body.home .hm-close-l2 { font-size: min(13.2vw, 3.625rem); }
  body.home .hm-close-l3 { font-size: min(15vw, 4.25rem); }
  body.home .hm-close-l1, body.home .hm-close-l2, body.home .hm-close-l3 { white-space: nowrap; }
  body.home .hm-close-l3 { padding-bottom: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hm-who-goals,
  body.home .hm-who-l2,
  body.home .hm-creed::before,
  body.home .hm-creed-b,
  body.home .hm-close-l3 { animation: none; }
}

/* ---- The Four Pillars of Money: the signature methodology ----
   Blue, cyan and green only. No white leads any of them, and the light
   travels through the ramp rather than sitting still. */
body.home .hm-pillar {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(214,248,255,0.85) 50%, transparent 62%),
    var(--hm-pr, linear-gradient(100deg, #3f7bff 0%, #02c1ff 52%, #8fd63a 100%));
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hmHeadPass 11s cubic-bezier(0.45, 0, 0.2, 1) var(--hm-pd, 2s) infinite;
}
/* The framework name reads as the signature it is. */
body.home .hm-pillar--head {
  font-size: 1.1em;
  letter-spacing: 0.014em;
  --hm-pr: linear-gradient(100deg, #2f6bff 0%, #0aa6ff 32%, #38cfff 56%, #6fd97a 80%, #a2e63c 100%);
  --hm-pd: 1.4s;
  filter: drop-shadow(0 4px 20px rgba(2,193,255,0.5));
}
/* The four of them, related but never identical. */
body.home .hm-pillar--1,
body.home .hm-pillar--2,
body.home .hm-pillar--3,
body.home .hm-pillar--4 {
  position: relative;
  display: inline-block;
  margin: 8px 0 0 22px;
  font-size: 1.2em;
  line-height: 1.5;
  filter: drop-shadow(0 4px 16px rgba(var(--hm-plg, 2,193,255), 0.4));
}
/* Each one stands on its own chip of the same light. */
body.home .hm-pillar--1::before,
body.home .hm-pillar--2::before,
body.home .hm-pillar--3::before,
body.home .hm-pillar--4::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 0.44em;
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(150deg, var(--hm-pc1), var(--hm-pc2));
  filter: drop-shadow(0 0 6px rgba(var(--hm-plg, 2,193,255), 0.45));
}
body.home .hm-pillar--1 {
  --hm-pr: linear-gradient(100deg, #38cfff 0%, #4fd9c8 48%, #8fd63a 100%);
  --hm-pc1: #38cfff; --hm-pc2: #8fd63a; --hm-plg: 79,214,190; --hm-pd: 2.4s;
}
body.home .hm-pillar--2 {
  --hm-pr: linear-gradient(100deg, #3f7bff 0%, #1f9dff 52%, #02c1ff 100%);
  --hm-pc1: #6d9bff; --hm-pc2: #02c1ff; --hm-plg: 63,123,255; --hm-pd: 3.6s;
}
body.home .hm-pillar--3 {
  --hm-pr: linear-gradient(100deg, #8fd63a 0%, #4fd4a6 50%, #38cfff 100%);
  --hm-pc1: #a2e63c; --hm-pc2: #38cfff; --hm-plg: 120,214,120; --hm-pd: 4.8s;
}
body.home .hm-pillar--4 {
  --hm-pr: linear-gradient(100deg, #3f7bff 0%, #02c1ff 42%, #6fd97a 74%, #b6e845 100%);
  --hm-pc1: #3f7bff; --hm-pc2: #b6e845; --hm-plg: 140,214,90; --hm-pd: 6s;
}

@media (prefers-reduced-motion: reduce) {
  /* The pillars keep their colour; only the travelling light stops. */
  body.home .hm-pillar { animation: none; background-size: 100% 100%, 100% 100%; background-position: 0 0, 0 0; }
}

/* =========================================================
   HOMEPAGE — THE SERVICES ECOSYSTEM
   Architectural, not card-like: an angled light plane behind each service
   whose edges dissolve, a leading edge of brand light, artwork at hero
   scale floating over its own projected light, and between services the
   brand energy itself transitions — a field of light with motes crossing
   it, never a cable between two boxes.
   ========================================================= */
body.home .service-editorial-list { gap: clamp(26px, 3vw, 44px); }
body.home .service-editorial-row { direction: ltr; }
body.home .service-editorial-row > * { direction: ltr; }
body.home .service-editorial-row:nth-of-type(even) { direction: rtl; }
body.home .service-editorial-row:nth-of-type(even) > * { direction: ltr; }

/* ---- The surface: an angled plane, dissolved, with a lit leading edge ---- */
body.home .service-editorial-row {
  position: relative;
  z-index: 2;
  isolation: isolate;
  padding: clamp(34px, 3.6vw, 60px) clamp(28px, 3.6vw, 64px);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--hm-ease-out);
}
body.home .service-editorial-row::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -4% -3% -4% 0;
  border-radius: 0;
  background:
    radial-gradient(70% 130% at 6% 0%, rgba(var(--hm-tn-rgb), 0.34) 0%, rgba(var(--hm-tn-rgb), 0.08) 40%, transparent 68%),
    radial-gradient(100% 150% at 96% 104%, rgba(var(--hm-tn-rgb), 0.12) 0%, transparent 58%),
    linear-gradient(162deg, rgba(20,38,74,0.86) 0%, rgba(10,21,42,0.6) 56%, rgba(7,14,29,0.14) 100%);
  -webkit-mask-image:
    linear-gradient(118deg, #000 30%, rgba(0,0,0,0.68) 58%, rgba(0,0,0,0.14) 82%, transparent 98%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(118deg, #000 30%, rgba(0,0,0,0.68) 58%, rgba(0,0,0,0.14) 82%, transparent 98%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-composite: intersect;
  transition: opacity 0.7s var(--hm-ease-out);
  pointer-events: none;
}
/* The leading edge: a sculpted bar of the service's own light. */
body.home .service-editorial-row::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 6px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(var(--hm-tn-rgb), 0.15), var(--hm-tn) 26%, rgba(var(--hm-tn-rgb), 0.6) 74%, rgba(var(--hm-tn-rgb), 0.1));
  box-shadow: 0 0 26px 2px rgba(var(--hm-tn-rgb), 0.6), inset 0 -1px 0 rgba(3,10,24,0.5);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  animation: hmEdgeBreathe 7s ease-in-out infinite;
}
body.home .service-editorial-row:nth-of-type(even)::before { left: auto; right: 0; }
body.home .service-editorial-row:nth-of-type(even)::after {
  inset: -4% 0 -4% -3%;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(242deg, #000 30%, rgba(0,0,0,0.68) 58%, rgba(0,0,0,0.14) 82%, transparent 98%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(242deg, #000 30%, rgba(0,0,0,0.68) 58%, rgba(0,0,0,0.14) 82%, transparent 98%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
}
body.home .service-editorial-row.svc-sky::before { animation-delay: 1.6s; }
body.home .service-editorial-row.svc-white::before { animation-delay: 3.2s; }

/* ---- The artwork at hero scale, over its own projected light ---- */
body.home .service-editorial-visual { z-index: 1; overflow: visible; }
body.home .service-editorial-visual::before { display: none; }
body.home .service-editorial-visual .service-editorial-icon,
body.home .service-editorial-visual .service-editorial-icon--tax {
  position: relative;
  z-index: 2;
  width: clamp(300px, 27.5vw, 440px);
  filter: drop-shadow(0 34px 34px rgba(0,0,0,0.62)) drop-shadow(0 0 42px rgba(var(--hm-tn-rgb), 0.4));
  animation: hmIconFloat 13s ease-in-out infinite;
}
body.home .service-editorial-row.svc-sky .service-editorial-icon { animation-delay: 1.8s; }
body.home .service-editorial-row.svc-white .service-editorial-icon { animation-delay: 3.6s; }
@keyframes hmIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-0.6deg); }
}
/* The light it stands in, and the shadow it casts. */
body.home .hm-plinth {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(116%, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--hm-tn-rgb), 0.3) 0%, rgba(var(--hm-tn-rgb), 0.12) 38%, rgba(var(--hm-tn-rgb), 0.04) 62%, transparent 80%);
  box-shadow: none;
  animation: hmPoolBreathe 9s ease-in-out infinite;
  pointer-events: none;
}
body.home .service-editorial-row.svc-sky .hm-plinth { animation-delay: 1.8s; }
body.home .service-editorial-row.svc-white .hm-plinth { animation-delay: 3.6s; }
@keyframes hmPoolBreathe {
  0%, 100% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
body.home .hm-plinth::after {
  content: '';
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 16%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3,8,20,0.82), transparent 78%);
  filter: blur(3px);
  animation: hmContact 13s ease-in-out infinite;
}
/* As the object lifts, its shadow draws in and darkens. */
@keyframes hmContact {
  0%, 100% { transform: scaleX(1); opacity: 0.72; }
  50% { transform: scaleX(0.84); opacity: 1; }
}

/* ---- The programme name leads the section ---- */
body.home .service-editorial-content h3 {
  position: relative;
  max-width: none;
  /* The programme name owns the row: it reaches past the text column so it can
     stay on one line at a size the body copy cannot compete with. */
  width: calc(100% + clamp(26px, 6.6vw, 130px));
  font-size: clamp(2.625rem, 4.25vw, 4rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: -0.022em;
  white-space: nowrap;
  margin-top: clamp(6px, 0.9vw, 16px);
  margin-bottom: 26px;
  padding-bottom: 20px;
  text-wrap: balance;
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.95) 50%, transparent 64%),
    var(--hm-tt-ramp, linear-gradient(168deg, #ffffff 0%, var(--hm-tn) 58%, var(--hm-r3-end, #1f6ae0) 100%));
  background-size: 280% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(3,10,24,0.55)) drop-shadow(0 14px 34px rgba(var(--hm-tt-rgb, var(--hm-tn-rgb)), 0.45));
  animation: hmHeadPass 10s cubic-bezier(0.45, 0, 0.2, 1) 1.6s infinite;
}
body.home .service-editorial-row:nth-of-type(even) .service-editorial-content h3 { margin-left: 0; text-align: left; }
body.home .svc-green .hm-svc-name {
  --hm-tt: #8fd63a;
  --hm-tt-rgb: 143, 214, 58;
  --hm-tt-ramp: linear-gradient(168deg, #eaffc9 0%, #b6e845 24%, #8fd63a 54%, #57ab28 86%, #3fc9b4 100%);
  animation-delay: 1.6s;
}
body.home .svc-sky .hm-svc-name {
  --hm-tt: #38cfff;
  --hm-tt-rgb: 56, 207, 255;
  --hm-tt-ramp: linear-gradient(168deg, #dcf8ff 0%, #6fe0ff 22%, #02c1ff 56%, #1f6ae0 100%);
  animation-delay: 2.8s;
  animation-duration: 11s;
}
body.home .svc-white .hm-svc-name {
  --hm-tt: #4f8dff;
  --hm-tt-rgb: 79, 141, 255;
  --hm-tt-ramp: linear-gradient(168deg, #d4e3ff 0%, #6d9bff 22%, #2f5cf0 60%, #38cfff 100%);
  animation-delay: 4.1s;
  animation-duration: 12s;
}
body.home .service-editorial-content h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(110px, 14vw, 190px);
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--hm-tt, var(--hm-tn)), rgba(var(--hm-tt-rgb, var(--hm-tn-rgb)), 0.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 26px rgba(var(--hm-tt-rgb, var(--hm-tn-rgb)), 0.7);
}
body.home .service-editorial-row:nth-of-type(even) .service-editorial-content h3::after { left: 0; right: auto; }
body.home .service-editorial-content p { color: #a9bedd; font-size: 0.9375rem; }
body.home .service-editorial-content p:first-of-type {
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  color: #e6eeff;
  margin-bottom: 20px;
}
body.home .hm-em {
  font-weight: 600;
  color: transparent;
  background-image: linear-gradient(104deg, #ffffff 0%, var(--hm-tn) 88%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.home .service-editorial-content .btn { margin-top: 12px; }
/* The line that lands the argument, right before the call to action. */
body.home .hm-takeaway {
  position: relative;
  margin: 28px 0 30px;
  padding: 0 0 0 clamp(16px, 1.4vw, 24px);
  font-size: clamp(1.1875rem, 1.6vw, 1.5625rem) !important;
  line-height: 1.42;
  font-weight: 600;
  color: transparent !important;
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.92) 48%, transparent 62%),
    linear-gradient(150deg, #ffffff 0%, #eaf9ff 22%, #6fdcff 50%, #3a86ff 78%, #b6e845 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  animation: hmHeadPass 10.4s cubic-bezier(0.45, 0, 0.2, 1) 3s infinite;
  -webkit-background-clip: text;
  background-clip: text;
  text-wrap: pretty;
}
body.home .hm-takeaway::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #a6e9ff 0%, rgba(58,134,255,0.5) 58%, rgba(182,232,69,0.45) 100%);
  box-shadow: 0 0 14px rgba(2,193,255,0.34), inset -1px 0 0 rgba(3,9,22,0.8), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* ---- The hand-off: the light shelf steps down to the next service ----
   Each row is lit along one side, and the sides alternate down the page. The
   shelf carries that light across the gap: it leaves the outgoing service on
   its lit side, descends, and arrives on the lit side of the next one, changing
   tone on the way. Asymmetric and directional - the eye is handed downward. */
body.home .hm-flow {
  position: relative;
  z-index: 0;
  display: block;
  height: 0;
  --hm-rx: clamp(96px, 24vw, 330px);
  --hm-ry: clamp(5px, 1.2vw, 17px);
  pointer-events: none;
}
/* The shelf itself: one plane, lit along its leading edge. */
body.home .hm-flow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(97%, 1240px);
  height: clamp(72px, 7vw, 104px);
  transform: translate(-50%, -50%) skewY(2.8deg);
  background:
    linear-gradient(to top,
      transparent 0%,
      rgba(255,255,255,0.05) 62%,
      rgba(255,255,255,0.3) 94%,
      rgba(255,255,255,0.85) 100%),
    linear-gradient(100deg,
      rgba(var(--hm-fa-rgb), 0.34) 0%,
      rgba(var(--hm-fa-rgb), 0.13) 36%,
      rgba(var(--hm-fb-rgb), 0.16) 64%,
      rgba(var(--hm-fb-rgb), 0.36) 100%),
    linear-gradient(to top, rgba(5,12,26,0.72) 0%, rgba(5,12,26,0) 76%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.22) 12%, rgba(0,0,0,0.8) 26%, #000 40%, #000 62%, rgba(0,0,0,0.78) 76%, rgba(0,0,0,0.2) 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.22) 12%, rgba(0,0,0,0.8) 26%, #000 40%, #000 62%, rgba(0,0,0,0.78) 76%, rgba(0,0,0,0.2) 90%, transparent 100%);
}
/* A second, deeper plane set behind and offset, so the shelf has thickness. */
body.home .hm-flow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(72%, 860px);
  height: clamp(54px, 5.2vw, 78px);
  margin-top: clamp(16px, 1.8vw, 26px);
  transform: translate(-54%, -50%) skewY(2.8deg);
  background: linear-gradient(to top, rgba(4,10,22,0) 0%, rgba(var(--hm-fb-rgb), 0.1) 86%, rgba(var(--hm-fb-rgb), 0.2) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  filter: blur(1px);
}
/* The second hand-off runs the other way, because the lit sides alternate. */
body.home .hm-flow--b::before { transform: translate(-50%, -50%) skewY(-2.8deg); }
body.home .hm-flow--b::after { transform: translate(-46%, -50%) skewY(-2.8deg); }
body.home .hm-flow--a { --hm-fa-rgb: 79, 141, 255; --hm-fb-rgb: 143, 214, 58; }
body.home .hm-flow--b { --hm-fa-rgb: 143, 214, 58; --hm-fb-rgb: 82, 217, 162; }

/* Light running along the shelf, stretched by its own speed. */
body.home .hm-mote {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(90px, 12vw, 170px);
  height: 3px;
  margin-top: clamp(-53px, -3.6vw, -30px);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.95) 52%, transparent 100%);
  box-shadow: 0 0 16px rgba(255,255,255,0.5);
  opacity: 0;
  animation: hmShelfRun 7.4s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}
body.home .hm-mote:nth-child(2) { height: 2px; animation-delay: 2.5s; opacity: 0; }
body.home .hm-mote:nth-child(3) { height: 4px; animation-delay: 4.9s; }
body.home .hm-mote:nth-child(4) { display: none; }
body.home .hm-flow--b .hm-mote { animation-name: hmShelfRunBack; }
@keyframes hmShelfRun {
  0% { transform: translate(calc(-1 * var(--hm-rx)), calc(-1 * var(--hm-ry))) scaleX(0.35); opacity: 0; }
  18% { opacity: 0.9; }
  76% { opacity: 0.9; }
  100% { transform: translate(var(--hm-rx), var(--hm-ry)) scaleX(1.25); opacity: 0; }
}
@keyframes hmShelfRunBack {
  0% { transform: translate(var(--hm-rx), calc(-1 * var(--hm-ry))) scaleX(0.35); opacity: 0; }
  18% { opacity: 0.9; }
  76% { opacity: 0.9; }
  100% { transform: translate(calc(-1 * var(--hm-rx)), var(--hm-ry)) scaleX(1.25); opacity: 0; }
}

/* ---- Pointer ---- */
@media (hover: hover) and (pointer: fine) {
  body.home .service-editorial-row:hover { transform: perspective(1600px) rotateX(1deg) translateY(-6px); }
  body.home .service-editorial-row:hover .hm-plinth { animation-duration: 3.6s; }
  body.home .service-editorial-row:hover .service-editorial-icon { animation-duration: 6s; }
}

@media (max-width: 900px) {
  body.home .service-editorial-row { padding: clamp(26px, 4vw, 38px) clamp(20px, 4vw, 30px) clamp(30px, 4vw, 40px); }
  body.home .service-editorial-row::after,
  body.home .service-editorial-row:nth-of-type(even)::after {
    inset: -3% -3%;
    border-radius: 0;
    -webkit-mask-image:
      linear-gradient(168deg, #000 36%, rgba(0,0,0,0.62) 68%, transparent 96%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(168deg, #000 36%, rgba(0,0,0,0.62) 68%, transparent 96%),
      linear-gradient(180deg, transparent 0%, #000 10%, #000 82%, transparent 100%);
    mask-composite: intersect;
  }
  body.home .service-editorial-row::before,
  body.home .service-editorial-row:nth-of-type(even)::before { left: 0; right: auto; top: 6%; bottom: 6%; width: 5px; }
  body.home .service-editorial-visual .service-editorial-icon,
  body.home .service-editorial-visual .service-editorial-icon--tax { width: clamp(232px, 60vw, 320px); }
  body.home .hm-plinth { width: min(120%, 350px); }
  body.home .service-editorial-content h3,
  body.home .service-editorial-row:nth-of-type(even) .service-editorial-content h3 {
    max-width: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* Each programme name holds one line, as large as that allows. */
    width: auto;
    margin-inline: clamp(-34px, -6vw, -14px);
    font-size: min(8.3vw, 2.875rem);
    letter-spacing: -0.028em;
    white-space: nowrap;
    padding-bottom: 16px;
    margin-top: clamp(18px, 4.4vw, 30px);
    margin-bottom: 22px;
  }
  body.home .service-editorial-row.svc-sky .service-editorial-content h3 { font-size: min(9.1vw, 3.125rem); }
  body.home .service-editorial-content h3::after,
  body.home .service-editorial-row:nth-of-type(even) .service-editorial-content h3::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 96px;
    height: 5px;
    background: linear-gradient(90deg, rgba(var(--hm-tt-rgb, var(--hm-tn-rgb)), 0.15), var(--hm-tt, var(--hm-tn)), rgba(var(--hm-tt-rgb, var(--hm-tn-rgb)), 0.15));
  }
  body.home .hm-flow { --hm-rx: clamp(90px, 30vw, 150px); --hm-ry: clamp(8px, 2.6vw, 14px); }
  body.home .hm-flow::before { width: 92%; height: clamp(54px, 14vw, 72px); transform: translate(-50%, -50%) skewY(5.2deg); }
  body.home .hm-flow--b::before { transform: translate(-50%, -50%) skewY(-5.2deg); }
  body.home .hm-flow::after { width: 74%; height: clamp(38px, 10vw, 52px); margin-top: 14px; transform: translate(-54%, -50%) skewY(5.2deg); }
  body.home .hm-flow--b::after { transform: translate(-46%, -50%) skewY(-5.2deg); }
  body.home .hm-mote { width: clamp(64px, 22vw, 110px); }
  body.home .hm-mote:nth-child(3) { display: none; }
  body.home .hm-takeaway {
    margin: 22px auto 26px;
    padding: 14px 0 0;
    text-align: center;
    font-size: 1.125rem !important;
  }
  body.home .hm-takeaway::before {
    left: 50%;
    top: 0;
    bottom: auto;
    width: 84px;
    height: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(var(--hm-tn-rgb), 0.15), var(--hm-tn), rgba(var(--hm-tn-rgb), 0.15));
  }
}
@media (prefers-reduced-motion: reduce) {
  body.home .service-editorial-row::before,
  body.home .hm-plinth,
  body.home .service-editorial-icon,
  body.home .service-editorial-content h3,
  body.home .hm-takeaway,
  body.home .hm-plinth::after,
  body.home .hm-mote { animation: none; }
  body.home .hm-mote { display: none; }
  /* The statements hold their colour; only the travelling highlight stops. */
  body.home .service-editorial-content h3,
  body.home .hm-takeaway { background-position: 0 0, 0 0; background-size: 100% 100%, 100% 100%; }
  body.home .service-editorial-row { transition: none; }
}

/* =========================================================
   HOMEPAGE — THE APPROACH
   Four dissolved surfaces hanging from one sculpted rail, each carrying a
   large ghost numeral and a node of light. No borders, no boxes.
   ========================================================= */
body.home .approach-steps {
  position: relative;
  gap: clamp(18px, 1.8vw, 30px);
  padding-top: 54px;
}
/* The rail: a sculpted bar with a lit core. */
body.home .approach-steps::before {
  content: '';
  position: absolute;
  left: 1%;
  right: 1%;
  top: 16px;
  height: 8px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(90deg, rgba(56,207,255,0.2), rgba(56,207,255,0.62) 18%, rgba(175,221,44,0.6) 74%, rgba(87,171,40,0.22));
  box-shadow:
    inset 0 -2px 0 rgba(3,10,24,0.45),
    0 12px 26px -14px rgba(2,193,255,0.9),
    0 0 34px -6px rgba(2,193,255,0.45);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent);
}
/* The signal that runs it. */
body.home .approach-steps::after {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 110px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, #f2feff 45%, rgba(190,246,255,0.5) 70%, transparent);
  box-shadow: 0 0 28px 6px rgba(2,193,255,0.85);
  animation: hmRailRun 8.5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes hmRailRun {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  66% { left: calc(98% - 110px); opacity: 1; }
  78%, 100% { left: calc(100% - 110px); opacity: 0; }
}
body.home .approach-step {
  position: relative;
  isolation: isolate;
  border-left: none;
  padding: clamp(26px, 2.2vw, 36px) clamp(20px, 1.9vw, 28px) clamp(24px, 2vw, 32px);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: transform 0.6s var(--hm-ease-out);
}
/* The surface, dissolved at its edges. */
body.home .approach-step::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -4% -3%;
  border-radius: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(84% 120% at 16% 0%, rgba(56,207,255,0.2) 0%, transparent 56%),
    linear-gradient(168deg, rgba(19,36,70,0.8) 0%, rgba(10,21,42,0.66) 58%, rgba(7,14,29,0.3) 100%);
  -webkit-mask-image: radial-gradient(118% 124% at 50% 40%, #000 44%, rgba(0,0,0,0.76) 68%, rgba(0,0,0,0.24) 88%, transparent 100%);
  mask-image: radial-gradient(118% 124% at 50% 40%, #000 44%, rgba(0,0,0,0.76) 68%, rgba(0,0,0,0.24) 88%, transparent 100%);
  transition: opacity 0.6s var(--hm-ease-out);
  pointer-events: none;
}
body.home .approach-step:nth-child(even)::after {
  background:
    radial-gradient(84% 120% at 16% 0%, rgba(175,221,44,0.18) 0%, transparent 56%),
    linear-gradient(168deg, rgba(19,36,70,0.8) 0%, rgba(10,21,42,0.66) 58%, rgba(7,14,29,0.3) 100%);
}
/* Each step hangs from the rail by its own node. */
body.home .approach-step::before {
  content: '';
  position: absolute;
  left: clamp(20px, 1.9vw, 28px);
  top: -44px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #eafcff 0%, var(--sky-400) 56%, #07527a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 0 0 5px rgba(2,193,255,0.14),
    0 0 22px 4px rgba(2,193,255,0.75);
  animation: hmNodePulse 5.4s ease-in-out infinite;
}
body.home .approach-step:nth-child(even)::before {
  background: radial-gradient(circle at 34% 30%, #f6ffd6 0%, var(--lime-400) 56%, #47760a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 0 0 5px rgba(175,221,44,0.14),
    0 0 22px 4px rgba(175,221,44,0.75);
}
body.home .approach-step:nth-child(2)::before { animation-delay: 0.7s; }
body.home .approach-step:nth-child(3)::before { animation-delay: 1.4s; }
body.home .approach-step:nth-child(4)::before { animation-delay: 2.1s; }
@keyframes hmNodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
/* The number becomes a large ghost numeral behind the title. */
body.home .approach-step-num {
  position: absolute;
  right: clamp(12px, 1.2vw, 18px);
  top: clamp(6px, 0.8vw, 12px);
  z-index: -1;
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(2.625rem, 3.6vw, 3.75rem);
  line-height: 0.8;
  color: transparent;
  background-image: linear-gradient(170deg, rgba(120,200,255,0.42) 0%, rgba(120,200,255,0.06) 72%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.home .approach-step:nth-child(even) .approach-step-num {
  background-image: linear-gradient(170deg, rgba(190,235,90,0.4) 0%, rgba(190,235,90,0.05) 72%);
}
body.home .approach-step-title {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  margin-bottom: 12px;
  padding-right: clamp(46px, 4.4vw, 74px);
  color: #ffffff;
}
body.home .approach-step-body { color: #b3c6e4; }
body.home .approach-pullline { position: relative; z-index: 1; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); }

@media (hover: hover) and (pointer: fine) {
  body.home .approach-step:hover { transform: translateY(-7px); }
  body.home .approach-step:hover::after { opacity: 1; }
}

@media (max-width: 1024px) and (min-width: 769px) {
  body.home .approach-step:nth-child(odd),
  body.home .approach-step:nth-child(even) { border-left: none; padding-left: clamp(20px, 1.9vw, 28px); }
  body.home .approach-steps::before, body.home .approach-steps::after { left: 2%; right: 2%; }
  body.home .approach-step:nth-child(n+3)::before { display: none; }
}

/* Phones: the rail stands up and the steps hang off it. */
@media (max-width: 768px) {
  body.home .approach-steps { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 38px; gap: 20px; }
  body.home .approach-step, body.home .approach-step:first-child { padding: 24px 20px 26px; }
  body.home .approach-steps::before {
    left: 10px;
    right: auto;
    top: 12px;
    bottom: 12px;
    width: 8px;
    height: auto;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 52%),
      linear-gradient(180deg, rgba(56,207,255,0.24), rgba(56,207,255,0.6) 16%, rgba(175,221,44,0.6) 78%, rgba(87,171,40,0.24));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 92%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 6%, #000 92%, transparent);
  }
  body.home .approach-steps::after {
    left: 10px;
    top: 0;
    width: 8px;
    height: 96px;
    background: linear-gradient(180deg, transparent, #f2feff 45%, rgba(190,246,255,0.5) 72%, transparent);
    animation: hmRailRunV 8.5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  }
  body.home .approach-step::before { left: -34px; top: 30px; width: 15px; height: 15px; display: block; }
  body.home .approach-step:last-child::before { display: block; }
  body.home .approach-step-num {
    position: static;
    display: block;
    font-size: 2.75rem;
    margin-bottom: 4px;
  }
  body.home .approach-step-title { padding-right: 0; }
}
@keyframes hmRailRunV {
  0% { top: 0px; opacity: 0; }
  10% { opacity: 1; }
  66% { top: calc(100% - 106px); opacity: 1; }
  78%, 100% { top: calc(100% - 96px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .approach-steps::after { animation: none; display: none; }
  body.home .approach-step::before { animation: none; }
  body.home .approach-step { transition: none; }
}

/* =========================================================
   HOMEPAGE — CLIENT EXPERIENCES, THE FOUNDER, AND THE CLOSING PANEL
   ========================================================= */

/* ---- Reviews: plates of light on a running belt ---- */
body.home .testimonial-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
body.home .testimonial-card {
  position: relative;
  border-radius: 26px 26px 26px 8px;
  background:
    radial-gradient(80% 110% at 12% 0%, rgba(56,207,255,0.14) 0%, transparent 58%),
    var(--hm-glass),
    var(--hm-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(120,164,255,0.14),
    var(--hm-lift-2);
}
body.home .testimonial-card::before {
  content: '';
  position: absolute;
  left: 26px;
  right: 40%;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, rgba(2,193,255,0.95), rgba(175,221,44,0.4) 70%, transparent);
  box-shadow: 0 0 18px rgba(2,193,255,0.6);
}
body.home .testimonial-card .star { filter: drop-shadow(0 0 7px rgba(175,221,44,0.55)); }
body.home .author-avatar {
  background: linear-gradient(160deg, rgba(56,207,255,0.32), rgba(10,45,194,0.5));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(120,190,255,0.4),
    0 14px 24px -14px rgba(0,0,0,0.9),
    0 0 26px -12px rgba(2,193,255,0.8);
}

/* The founder presentation now lives in 75-founder.css. */
body.home .hm-founder-top { margin-bottom: clamp(64px, 5.4vw, 80px); }

/* ---- The founder headline ---- */
body.home .steven-content .heading-1 {
  font-size: clamp(2.5rem, 4.1vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.016em;
  margin-bottom: 4px;
  color: #ffffff;
}
body.home .steven-content .heading-1 .gradient-text {
  display: block;
  margin-top: 2px;
  background-image:
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,0.95) 50%, transparent 66%),
    linear-gradient(172deg, #ffffff 0%, #8fe3ff 46%, #46c8e8 74%, #9fe27a 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 128% 0, 0 0;
  filter: drop-shadow(0 8px 28px rgba(2,193,255,0.3));
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 1.8s infinite;
}
body.home .steven-content .body-lg { color: #b3c6e4; }

/* ---- The values: marks of character, not buttons ---- */
body.home .steven-values {
  position: relative;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 20px 0 22px;
  margin: 4px 0 10px;
}
/* The field of light the values float in. */
body.home .steven-values::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -4%;
  right: -4%;
  top: 50%;
  height: 150%;
  transform: translateY(-50%);
  background: radial-gradient(46% 52% at 30% 50%, rgba(2,193,255,0.16) 0%, transparent 72%),
    radial-gradient(40% 50% at 78% 50%, rgba(175,221,44,0.12) 0%, transparent 72%);
  pointer-events: none;
}
body.home .steven-values { align-items: center; row-gap: 14px; }
body.home .steven-value-tag {
  position: relative;
  padding: 0 0 0 16px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #cfe2ff;
  transition: color 0.45s var(--hm-ease-out);
}
body.home .steven-value-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #eafcff, var(--sky-400) 62%, #0a5c86);
  box-shadow: 0 0 12px 2px rgba(2,193,255,0.8);
  animation: hmValuePulse 18s ease-in-out infinite;
}
body.home .steven-value-tag:nth-child(even)::before {
  background: radial-gradient(circle at 34% 30%, #f6ffd6, var(--lime-400) 62%, #5c8f0c);
  box-shadow: 0 0 12px 2px rgba(175,221,44,0.8);
}
body.home .steven-value-tag:nth-child(2)::before { animation-delay: 0.6s; }
body.home .steven-value-tag:nth-child(3)::before { animation-delay: 1.2s; }
body.home .steven-value-tag:nth-child(4)::before { animation-delay: 1.8s; }
body.home .steven-value-tag:nth-child(5)::before { animation-delay: 2.4s; }
@keyframes hmValuePulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.22); opacity: 1; }
}
body.home .steven-content .btn { align-self: flex-start; width: auto; }

@media (hover: hover) and (pointer: fine) {
  body.home .steven-value-tag:hover { color: #ffffff; }
}

/* ---- The closing panel ---- */
body.home .cta-banner {
  position: relative;
  padding-inline: clamp(14px, 3.4vw, 64px);
  overflow-x: clip;
  border: none;
  border-radius: 6px 30px 6px 30px;
  background:
    radial-gradient(70% 100% at 50% -6%, rgba(2,193,255,0.3) 0%, transparent 56%),
    radial-gradient(64% 100% at 50% 106%, rgba(87,171,40,0.24) 0%, transparent 58%),
    radial-gradient(120% 90% at 50% 50%, rgba(18,36,70,0.9) 0%, rgba(9,18,36,0.6) 58%, transparent 96%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -3px 0 rgba(3,10,24,0.5),
    var(--hm-lift-3);
  -webkit-mask-image: radial-gradient(104% 116% at 50% 40%, #000 30%, rgba(0,0,0,0.78) 58%, rgba(0,0,0,0.26) 82%, transparent 100%);
  mask-image: radial-gradient(104% 116% at 50% 40%, #000 30%, rgba(0,0,0,0.78) 58%, rgba(0,0,0,0.26) 82%, transparent 100%);
  overflow: visible;
}
body.home .cta-banner::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, rgba(2,193,255,0.95) 28%, rgba(175,221,44,0.85) 72%, transparent);
  box-shadow: 0 0 28px rgba(2,193,255,0.8);
  opacity: 1;
  transform: none;
  animation: hmEdgeBreathe 6.5s ease-in-out infinite;
}
/* Light raking down across the closing panel. */
body.home .hm-close-rays {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
body.home .hm-close-rays::before,
body.home .hm-close-rays::after {
  content: '';
  position: absolute;
  top: -30%;
  height: 160%;
  width: clamp(40px, 5vw, 80px);
  background: linear-gradient(180deg, rgba(2,193,255,0.24) 0%, rgba(2,193,255,0.06) 52%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  filter: blur(1px);
}
body.home .hm-close-rays::before {
  left: 12%;
  transform: skewX(-16deg);
  animation: hmRayBreathe 15s ease-in-out infinite;
}
body.home .hm-close-rays::after {
  right: 16%;
  transform: skewX(14deg);
  background: linear-gradient(180deg, rgba(175,221,44,0.2) 0%, rgba(175,221,44,0.05) 52%, transparent 88%);
  animation: hmRayBreatheB 15s ease-in-out 2.6s infinite;
}
@keyframes hmRayBreathe {
  0%, 100% { opacity: 0.5; transform: skewX(-16deg) translateX(-14px); }
  50% { opacity: 1; transform: skewX(-16deg) translateX(14px); }
}
@keyframes hmRayBreatheB {
  0%, 100% { opacity: 0.45; transform: skewX(14deg) translateX(12px); }
  50% { opacity: 0.95; transform: skewX(14deg) translateX(-12px); }
}
body.home .cta-banner-ctas { gap: 18px; position: relative; z-index: 2; }
/* The floor the closing statement stands on. */
body.home .cta-banner .section-label { position: relative; z-index: 2; }
body.home .cta-banner .hm-close-head, body.home .cta-banner .body-lg { position: relative; z-index: 2; }

@media (max-width: 768px) {
  body.home .hm-founder-top { display: flex; justify-content: center; }
  /* Mobile headlines centre across the page. */
  body.home .steven-content { text-align: center; }
  body.home .steven-content .section-label { align-self: center; }
  body.home .steven-content .heading-1 { text-align: center; }
  body.home .steven-values { justify-content: center; }
  body.home .steven-content .heading-1 { font-size: clamp(2.125rem, 9vw, 2.75rem); }
  body.home .steven-values { justify-content: center; gap: 12px 18px; }
  body.home .steven-content .btn { align-self: center; }
  body.home .cta-banner { border-radius: 26px; }
  body.home .cta-banner-ctas { flex-direction: column; align-items: stretch; }
  body.home .cta-banner-ctas .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .steven-badge,
  body.home .steven-value-tag::before,
  body.home .steven-content .heading-1 .gradient-text,
  body.home .cta-banner::before,
  body.home .hm-close-rays::before,
  body.home .hm-close-rays::after,
  body.home .cta-banner::after { animation: none; }
  body.home .cta-banner::after { display: none; }
}

/* =========================================================
   HOMEPAGE — SECTION HIERARCHY
   The eyebrows step back to being supporting marks and the section
   statements take the scale. Every line break in a section statement
   is a decision here, not a wrap the browser happened to make.
   Nothing in this file is a capsule, a card or a border.
   ========================================================= */

/* ---- The eyebrow: a lit marker, small caps, a bar of light ---- */
body.home .section-label,
body.home #services .section-label,
body.home .approach-section .section-label,
body.home .cta-banner .section-label {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 14px);
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(0.6875rem, 0.76vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8fb4dc;
  text-shadow: none;
}
/* The marker: a small faceted chip of brand light. */
body.home .section-label::before,
body.home #services .section-label::before,
body.home .approach-section .section-label::before,
body.home .cta-banner .section-label::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(150deg, #ffffff 0%, var(--hm-eb, #38cfff) 56%, rgba(10,45,194,0.9) 100%);
  box-shadow: none;
  filter: drop-shadow(0 0 6px rgba(var(--hm-eb-rgb, 56,207,255), 0.55));
  opacity: 0.7;
}
/* The bar: a short run of light that trails the words. */
body.home .section-label::after,
body.home #services .section-label::after,
body.home .approach-section .section-label::after,
body.home .cta-banner .section-label::after {
  content: '';
  display: block;
  width: clamp(28px, 3.4vw, 54px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--hm-eb-rgb, 56,207,255), 0.9), transparent);
  box-shadow: none;
}
body.home #services .section-label,
body.home .approach-section .section-label { --hm-eb: #b6e64a; --hm-eb-rgb: 175,221,44; color: #a8c48c; }
body.home .cta-banner .section-label { --hm-eb: #8fe3ff; --hm-eb-rgb: 2,193,255; color: #a9cbe8; }

/* ---- The section statement ---- */
body.home .hm-sec-head {
  display: grid;
  gap: clamp(1px, 0.3vw, 6px);
  margin-top: clamp(14px, 1.6vw, 22px) !important;
}
body.home .section-header .hm-sec-head { justify-items: center; }
body.home .hm-sec-l1,
body.home .hm-sec-l2 {
  display: block;
  line-height: 1.0;
  letter-spacing: -0.016em;
  /* Every break in a section statement is a decision, never a wrap. */
  white-space: nowrap;
}
/* The founder line is the longest of them, so it takes its own scale. */
body.home .hm-fdr-head .hm-sec-l2 { font-size: clamp(2.375rem, 4.1vw, 3.75rem); }
body.home .hm-sec-l1 {
  font-size: clamp(2.125rem, 3.85vw, 3.5rem);
  color: #f0f6ff;
}
/* The payoff line carries the brand gradient and a slow pass of light. */
body.home .hm-sec-l2 {
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.98) 50%, transparent 62%),
    linear-gradient(168deg, #dff3ff 0%, #2f6bff 22%, #02c1ff 48%, #46cfbb 74%, #b6e64a 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 132% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 14px 36px rgba(2,193,255,0.36));
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 2s infinite;
}
body.home .hm-rev-head .hm-sec-l2 { animation-delay: 3.2s; }
body.home .hm-fdr-head .hm-sec-l2 { animation-delay: 1.4s; }

/* The founder statement sits in a column of text, so it aligns with it. */
body.home .hm-fdr-head { justify-items: start; margin-bottom: 10px; }

/* ---- Meet the Founder: a section introduction, not a label ----
   Headline-level type in brand light, a faceted gem on one side and a
   sculpted energy accent on the other. No capsule, no box, no flat rule. */
body.home .hm-intro {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 22px);
  margin: 0;
  font-family: var(--font-sans);
  font-size: min(4.4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}
body.home .hm-intro-text {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(100deg, transparent 36%, rgba(255,255,255,0.95) 50%, transparent 64%),
    linear-gradient(100deg, #2f6bff 0%, #0aa6ff 30%, #38cfff 54%, #6fd97a 82%, #a2e63c 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 6px 22px rgba(2,193,255,0.42));
  animation: hmHeadPass 9s cubic-bezier(0.45, 0, 0.2, 1) 1.2s infinite;
}
/* A faceted gem that catches the light as it turns. */
body.home .hm-intro-mark {
  position: relative;
  flex: none;
  width: clamp(26px, 3.1vw, 46px);
  height: clamp(30px, 3.5vw, 52px);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  background:
    linear-gradient(152deg, rgba(255,255,255,0.95) 0%, rgba(2,193,255,0.95) 34%, rgba(16,60,190,0.98) 72%, rgba(8,26,80,1) 100%);
  box-shadow: 0 14px 26px -12px rgba(0,0,0,0.95);
  filter: drop-shadow(0 0 18px rgba(2,193,255,0.55));
  animation: hmGemTurn 11s ease-in-out infinite;
}
/* The inner table of the gem, in the second brand colour. */
body.home .hm-intro-mark::before {
  content: '';
  position: absolute;
  inset: 22% 18%;
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
  background: linear-gradient(152deg, rgba(255,255,255,0.98) 0%, rgba(162,230,60,0.95) 52%, rgba(63,138,22,0.95) 100%);
}
/* The specular that slides across its facets. */
body.home .hm-intro-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,0.9) 47%, rgba(255,255,255,0) 60%);
  animation: hmGemGlint 11s ease-in-out infinite;
}
@keyframes hmGemTurn {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-3px); }
}
@keyframes hmGemGlint {
  0%, 62% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}
/* A sculpted accent: three blades stepping away from the words. */
body.home .hm-intro-rule {
  position: relative;
  flex: none;
  width: clamp(44px, 7.4vw, 124px);
  height: clamp(7px, 0.62vw, 10px);
  transform: skewX(-24deg);
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(2,193,255,0.95) 0%, rgba(2,193,255,0.18) 72%, transparent 100%);
  box-shadow: 0 0 16px rgba(2,193,255,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  animation: hmAccentBreathe 13s ease-in-out infinite;
}
body.home .hm-intro-rule::before,
body.home .hm-intro-rule::after {
  content: '';
  position: absolute;
  left: 8%;
  height: 100%;
  border-radius: 1px;
}
body.home .hm-intro-rule::before {
  top: calc(100% + clamp(3px, 0.34vw, 6px));
  width: 72%;
  background: linear-gradient(90deg, rgba(79,141,255,0.85) 0%, rgba(79,141,255,0.12) 76%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
body.home .hm-intro-rule::after {
  top: calc(200% + clamp(6px, 0.68vw, 12px));
  width: 46%;
  background: linear-gradient(90deg, rgba(162,230,60,0.85) 0%, rgba(162,230,60,0.1) 78%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
@keyframes hmAccentBreathe {
  0%, 100% { opacity: 0.68; transform: skewX(-24deg) translateX(-4px); }
  50% { opacity: 1; transform: skewX(-24deg) translateX(4px); }
}

@media (max-width: 900px) {
  body.home .hm-sec-l1 { font-size: min(8.2vw, 2.5rem); }
  body.home .hm-sec-l2 { font-size: min(9.2vw, 3rem); }
  body.home .hm-sec-l1,
  body.home .hm-sec-l2 { white-space: nowrap; }
  body.home .hm-sec-l2 { animation: none; background-position: 0 0, 0 0; }
  body.home .hm-sec-l2 { padding-bottom: 0.06em; }
  /* Major statements centre on a phone. */
  body.home .steven-grid { grid-template-columns: minmax(0, 1fr); }
  body.home .hm-fdr-head { justify-items: center; text-align: center; }
  /* Its payoff line is the longest on the page, so it sets its own size. */
  body.home .hm-fdr-head .hm-sec-l2 { font-size: min(8.4vw, 2.875rem); }
  /* Centred, large and designed for the phone rather than shrunk to it. */
  body.home .hm-intro {
    justify-content: center;
    gap: clamp(10px, 3vw, 16px);
    font-size: min(5.3vw, 1.75rem);
    letter-spacing: 0.1em;
  }
  body.home .hm-intro-mark { width: clamp(22px, 6vw, 30px); height: clamp(26px, 7vw, 34px); }
  body.home .hm-intro-rule { width: clamp(30px, 9vw, 48px); height: clamp(5px, 1.5vw, 7px); }
  body.home .section-label { letter-spacing: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hm-sec-l2,
  body.home .hm-intro-text,
  body.home .hm-intro-mark,
  body.home .hm-intro-mark::after,
  body.home .hm-intro-rule { animation: none; }
  /* The intro keeps its colour and its light; only the movement stops. */
  body.home .hm-intro-text { background-size: 100% 100%, 100% 100%; background-position: 0 0, 0 0; }
  body.home .hm-intro-mark::after { transform: translateX(28%); }
  body.home .hm-intro-rule { opacity: 0.9; transform: skewX(-24deg); }
}

/* =========================================================
   HOMEPAGE — THE FOUNDER: A LIT PRINT ON A STANDOFF PLATE
   The photograph is never touched: no mask, no filter, no transform and
   nothing painted over it. The depth comes from the room built around it —
   a lit wall, structural fins, a recessed rear plane standing the plate off
   that wall, a weighted base, machined corner straps and a struck medal.
   One lighting law: cyan key from upper left, lime kick from lower right,
   neutral spill out of the print itself. Shadows fall down and right.
   ========================================================= */
body.home .steven-grid {
  grid-template-columns: minmax(280px, 0.86fr) 1.34fr;
  gap: clamp(44px, 5.4vw, 84px);
  align-items: center;
  position: relative;
  isolation: isolate;
}
body.home .steven-grid::before,
body.home .steven-grid::after { content: none; }

body.home .steven-image-wrap {
  --fp-mat: clamp(10px, 1.05vw, 14px);
  --fp-band: clamp(76px, 7.8vw, 98px);
  --fp-cham: calc(var(--fp-mat) * 1.35);
  --fp-standoff: clamp(12px, 1.5vw, 18px);
  --fp-strap: clamp(6px, 0.8vw, 9px);
  --fp-seal: clamp(104px, 9.4vw, 136px);
  --md-rim: calc(var(--fp-seal) * 0.075);
  --md-bev: calc(var(--fp-seal) * 0.045);
  --fp-key: 2, 193, 255;
  --fp-kick: 175, 221, 44;
  --fp-print: 186, 206, 236;
  --fp-ease: cubic-bezier(0.16, 0.84, 0.24, 1);

  position: relative;
  isolation: isolate;
  width: min(100%, 440px);
  margin-inline: auto;
  padding: 0;
  perspective: 1500px;
  perspective-origin: 64% 38%;
  transform-style: preserve-3d;
  z-index: 1;
}
body.home .steven-image-wrap::before,
body.home .steven-image-wrap::after { content: none; }
/* Revealing the section must never scale the photograph. */
body.home .reveal.steven-image-wrap { transform: none; transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); }
body.home .reveal.steven-image-wrap.revealed { transform: none; }

/* ---- The lit wall the plate stands off ---- */
body.home .hm-fp-wall {
  position: absolute;
  z-index: -5;
  pointer-events: none;
  left: -17%;
  right: -17%;
  top: -8%;
  bottom: -3%;
  transform: translateZ(-170px) scale(1.07);
  background:
    linear-gradient(178deg,
      rgba(11,27,58,0) 0%, rgba(12,29,62,0.55) 20%, rgba(8,19,42,0.8) 58%,
      rgba(5,12,28,0.92) 86%, rgba(4,10,24,0) 100%),
    radial-gradient(118% 58% at 16% 4%, rgba(var(--fp-key),0.2) 0%, rgba(var(--fp-key),0.06) 32%, transparent 66%),
    radial-gradient(92% 48% at 94% 86%, rgba(var(--fp-kick),0.12) 0%, transparent 62%),
    radial-gradient(70% 44% at 50% 46%, rgba(var(--fp-print),0.07) 0%, transparent 70%);
  box-shadow: inset 0 1px 0 rgba(var(--fp-key),0.28);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
  opacity: 0.92;
}

/* ---- Structural fins standing at three depths ---- */
body.home .hm-fp-fin {
  position: absolute;
  z-index: -4;
  top: 50%;
  pointer-events: none;
  width: var(--fin-w);
  height: var(--fin-h);
  transform-origin: 50% 50%;
  background: linear-gradient(180deg,
    transparent 0%, rgba(var(--fp-key),0.1) 11%,
    rgba(17,39,86,0.88) 28%, rgba(10,24,54,0.94) 68%,
    rgba(7,16,36,0.35) 88%, transparent 100%);
  box-shadow:
    inset 1.5px 0 0 rgba(var(--fp-key),0.55),
    inset -1px 0 0 rgba(3,9,22,0.9),
    0 26px 48px -24px rgba(0,0,0,0.92);
  transition: transform 1.1s var(--fp-ease);
}
body.home .hm-fp-fin--a {
  --fin-w: clamp(16px, 2.2vw, 26px);
  --fin-h: 98%;
  left: -14%;
  transform: translateY(-50%) translateZ(-138px) rotateY(24deg);
}
body.home .hm-fp-fin--b {
  --fin-w: clamp(9px, 1.15vw, 13px);
  --fin-h: 78%;
  left: -5%;
  transform: translateY(-50%) translateZ(-62px) rotateY(15deg);
  box-shadow: inset 1.5px 0 0 rgba(var(--fp-kick),0.46), inset -1px 0 0 rgba(3,9,22,0.9), 0 20px 36px -20px rgba(0,0,0,0.9);
}
body.home .hm-fp-fin--c {
  --fin-w: clamp(12px, 1.6vw, 19px);
  --fin-h: 64%;
  right: -10%;
  top: 58%;
  transform: translateY(-50%) translateZ(-93px) rotateY(-20deg);
}

/* ---- The mounted assembly ---- */
body.home .hm-fp-rig {
  position: relative;
  z-index: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--fp-ease);
}
/* The rear plane: offset left and down, chamfered on the opposite corners. */
body.home .hm-fp-reveal {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  left: calc(var(--fp-standoff) * -1);
  right: var(--fp-standoff);
  top: var(--fp-standoff);
  bottom: calc(var(--fp-standoff) * -1.55);
  background: linear-gradient(158deg, rgba(15,34,72,0.96) 0%, rgba(8,18,40,0.98) 46%, rgba(5,12,28,1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(var(--fp-key),0.42),
    inset -1px 0 0 rgba(var(--fp-kick),0.18),
    inset 0 -1px 0 rgba(var(--fp-kick),0.24),
    0 44px 74px -34px rgba(0,0,0,0.95);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition: top 0.9s var(--fp-ease), right 0.9s var(--fp-ease), bottom 0.9s var(--fp-ease), left 0.9s var(--fp-ease);
}
/* Light escaping the standoff gap. */
body.home .hm-fp-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg, rgba(var(--fp-key),0.58) 0%, rgba(var(--fp-key),0) calc(var(--fp-standoff) * 2.3)),
    linear-gradient(0deg, rgba(var(--fp-kick),0.4) 0%, rgba(var(--fp-kick),0) calc(var(--fp-standoff) * 2.7));
  animation: fpRevealBreath 14s ease-in-out infinite;
}
@keyframes fpRevealBreath { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }

/* A clip-path cuts an element's own shadow, so the shadow gets its own caster. */
body.home .hm-fp-cast {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 7px 5px calc(var(--fp-band) * 0.22) 5px;
  background: #050c1c;
  box-shadow:
    0 30px 50px -24px rgba(0,0,0,0.92),
    0 82px 92px -58px rgba(0,0,0,0.9),
    0 0 62px -12px rgba(var(--fp-print),0.28),
    0 0 76px -30px rgba(var(--fp-key),0.38);
  transition: box-shadow 0.9s var(--fp-ease);
}

/* The plate: thin at the top and sides, weighted at the base. */
body.home .hm-fp-plate {
  position: relative;
  z-index: 0;
  padding: var(--fp-mat) var(--fp-mat) var(--fp-band);
  background:
    linear-gradient(148deg,
      rgba(42,70,120,0.95) 0%, rgba(18,36,74,0.98) 25%,
      rgba(10,21,46,1) 60%, rgba(14,29,60,1) 88%, rgba(9,19,42,1) 100%),
    radial-gradient(120% 60% at 12% -8%, rgba(var(--fp-key),0.16) 0%, transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(202,230,255,0.55),
    inset 1px 0 0 rgba(150,205,255,0.24),
    inset -1px 0 0 rgba(3,9,22,0.88),
    inset 0 -1px 0 rgba(var(--fp-kick),0.32),
    inset 0 -34px 44px -32px rgba(var(--fp-kick),0.2),
    inset 0 2px 0 rgba(255,255,255,0.07);
  clip-path: polygon(
    var(--fp-cham) 0, 100% 0,
    100% calc(100% - var(--fp-cham)), calc(100% - var(--fp-cham)) 100%,
    0 100%, 0 var(--fp-cham));
  animation: fpPlateSettle 19s ease-in-out infinite;
}
@keyframes fpPlateSettle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* The aperture holds the print. Nothing is painted inside it. */
body.home .hm-fp-aperture {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #9c9c9e;
  box-shadow:
    1px 1px 0 0 rgba(3,9,22,0.95),
    -1px -1px 0 0 rgba(190,215,250,0.2),
    0 0 14px 1px rgba(var(--fp-print),0.12);
}
body.home .steven-image {
  position: absolute;
  display: block;
  width: 138.9%;
  height: auto;
  max-width: none;
  left: -19.44%;
  top: -5%;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  animation: none !important;
  mix-blend-mode: normal;
}

/* ---- Machined corner straps on the two square corners ---- */
body.home .hm-fp-corner {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: clamp(34px, 4vw, 52px);
  height: clamp(34px, 4vw, 52px);
  background: linear-gradient(140deg,
    rgba(216,240,255,0.92) 0%, rgba(120,176,238,0.62) 18%,
    rgba(44,80,142,0.92) 42%, rgba(15,32,68,1) 72%, rgba(8,18,40,1) 100%);
  clip-path: polygon(0 0, 100% 0, 100% var(--fp-strap), var(--fp-strap) var(--fp-strap), var(--fp-strap) 100%, 0 100%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.78));
  transition: transform 0.9s var(--fp-ease);
}
body.home .hm-fp-corner--tr { top: -5px; right: -5px; transform: scaleX(-1); }
body.home .hm-fp-corner--bl {
  bottom: -5px;
  left: -5px;
  transform: scaleY(-1);
  background: linear-gradient(140deg,
    rgba(236,255,198,0.85) 0%, rgba(150,200,80,0.5) 20%,
    rgba(36,66,120,0.92) 46%, rgba(9,20,44,1) 100%);
}

/* ---- One specular bead walking the plate's flats ---- */
body.home .hm-fp-track {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  inset: 0;
}
body.home .hm-fp-bead {
  position: absolute;
  left: 0;
  top: -2px;
  width: clamp(38px, 5vw, 62px);
  height: 4px;
  offset-path: border-box;
  offset-distance: 27%;
  offset-rotate: auto;
  background: linear-gradient(90deg,
    transparent 0%, rgba(214,240,255,0.55) 26%, rgba(255,255,255,0.95) 50%,
    rgba(var(--fp-key),0.85) 66%, transparent 100%);
  filter: blur(0.4px);
  animation: fpBeadWalk 21s linear infinite;
}
@keyframes fpBeadWalk {
  0% { offset-distance: 0%; opacity: 0; }
  7% { opacity: 0.85; }
  43% { opacity: 0.85; }
  50% { opacity: 0; }
  57% { opacity: 0.85; }
  93% { opacity: 0.85; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---- The floor it stands on, and the light the print throws down ---- */
body.home .hm-fp-plinth {
  position: absolute;
  z-index: -3;
  pointer-events: none;
  left: -8%;
  right: -8%;
  bottom: -24px;
  height: 36px;
  transform: translateZ(-44px) rotateX(58deg);
  transform-origin: 50% 0;
  background: linear-gradient(180deg,
    rgba(158,204,255,0.3) 0%, rgba(22,46,92,0.86) 13%,
    rgba(7,16,34,0.95) 66%, transparent 100%);
  box-shadow: 0 -1px 0 rgba(var(--fp-key),0.38);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
body.home .hm-fp-plinth::before {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  top: -7px;
  height: 24px;
  background: radial-gradient(58% 100% at 50% 0%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.52) 44%, transparent 78%);
  filter: blur(5px);
  transition: opacity 0.9s var(--fp-ease), transform 0.9s var(--fp-ease);
}
body.home .hm-fp-plinth::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(46% 150% at 50% 0%, rgba(var(--fp-print),0.2) 0%, transparent 64%),
    radial-gradient(52% 150% at 22% 0%, rgba(var(--fp-key),0.24) 0%, transparent 60%),
    radial-gradient(58% 140% at 76% 0%, rgba(var(--fp-kick),0.22) 0%, transparent 62%);
  opacity: 0.86;
}

/* ---- The hardware on the base ---- */
body.home .hm-fp-rail {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  left: var(--fp-mat);
  right: calc(var(--fp-seal) * 0.62);
  bottom: calc(var(--fp-band) * 0.44);
  height: 3px;
  background: linear-gradient(90deg, rgba(3,9,22,0.95), rgba(3,9,22,0.55));
  box-shadow: 0 1px 0 rgba(160,200,255,0.22), inset 0 1px 2px rgba(0,0,0,0.92);
}
body.home .hm-fp-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--fp-key),0.9) 42%, rgba(var(--fp-kick),0.75) 58%, transparent 100%);
  background-size: 46% 100%;
  background-repeat: no-repeat;
  animation: fpRailRun 11s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@keyframes fpRailRun {
  0%, 14% { background-position: -60% 0; opacity: 0; }
  22% { opacity: 1; }
  70% { opacity: 1; }
  86%, 100% { background-position: 172% 0; opacity: 0; }
}
body.home .hm-fp-studs {
  position: absolute;
  z-index: 2;
  left: var(--fp-mat);
  bottom: calc(var(--fp-band) * 0.16);
  width: 34px;
  height: 10px;
}
body.home .hm-fp-studs::before,
body.home .hm-fp-studs::after {
  content: '';
  position: absolute;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, rgba(214,238,255,0.85) 0%, rgba(46,78,136,0.9) 46%, rgba(6,14,32,1) 100%);
  box-shadow: inset 0 -1px 1px rgba(200,232,255,0.3), inset 0 1px 2px rgba(0,0,0,0.9), 0 1px 0 rgba(180,214,255,0.16);
}
body.home .hm-fp-studs::before { left: 0; }
body.home .hm-fp-studs::after { left: 22px; }

/* ---- The award medal: struck, two metals, recessed field ---- */
body.home .steven-badge {
  position: absolute;
  z-index: 3;
  isolation: isolate;
  right: calc(var(--fp-seal) * -0.26);
  bottom: calc(var(--fp-seal) * -0.3);
  width: var(--fp-seal);
  height: var(--fp-seal);
  padding: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: calc(var(--fp-seal) * 0.045);
  text-align: center;
  background:
    radial-gradient(circle at 34% 20%, rgba(232,246,255,0.24) 0%, transparent 46%),
    conic-gradient(from 212deg, #2b4a80 0deg, #0d1c3c 58deg, #14294f 120deg, #0a1730 186deg, #2f5288 250deg, #101f42 310deg, #2b4a80 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(3,8,20,0.92),
    inset 0 2px 1px rgba(226,242,255,0.4),
    inset 0 -2px 2px rgba(var(--fp-kick),0.26),
    0 3px 0 rgba(3,8,20,0.92),
    0 10px 16px -6px rgba(0,0,0,0.9),
    0 30px 46px -18px rgba(0,0,0,0.95),
    0 0 62px -20px rgba(var(--fp-kick),0.55);
  transform: rotate(-1.4deg);
  transition: transform 0.8s var(--fp-ease);
}
/* Milled rim. */
body.home .steven-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.26) 0deg 1.5deg, rgba(4,10,22,0.58) 1.5deg 3deg);
  mix-blend-mode: overlay;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--md-rim)), #000 calc(50% - var(--md-rim) + 0.6px), #000 100%);
  mask: radial-gradient(circle, transparent calc(50% - var(--md-rim)), #000 calc(50% - var(--md-rim) + 0.6px), #000 100%);
}
/* One specular arc turning on the rim. */
body.home .steven-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 38deg,
    rgba(214,244,255,0.8) 64deg, rgba(255,255,255,0.95) 73deg,
    rgba(var(--fp-kick),0.62) 88deg, rgba(255,255,255,0) 118deg,
    rgba(255,255,255,0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--md-rim) - var(--md-bev)), #000 calc(50% - var(--md-rim) - var(--md-bev) + 0.6px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - var(--md-rim) - var(--md-bev)), #000 calc(50% - var(--md-rim) - var(--md-bev) + 0.6px), #000 calc(50% - 1px), transparent 50%);
  animation: fpMedalRim 17s linear infinite;
}
body.home .hm-fp-medal-face {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  inset: calc(var(--md-rim) + var(--md-bev));
  background:
    radial-gradient(circle at 50% 118%, rgba(var(--fp-kick),0.2) 0%, transparent 58%),
    linear-gradient(162deg, rgba(16,34,70,0.98) 0%, rgba(7,16,36,1) 54%, rgba(11,24,50,1) 100%);
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,0.95),
    inset 0 -3px 4px rgba(174,214,255,0.16),
    inset 0 0 0 1px rgba(3,9,22,0.9),
    0 1px 0 rgba(214,238,255,0.26);
}
body.home .hm-fp-medal-glass {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(126deg, transparent 37%, rgba(255,255,255,0.15) 43%, transparent 49%),
    radial-gradient(48% 34% at 72% 92%, rgba(var(--fp-kick),0.12) 0%, transparent 70%);
  mix-blend-mode: screen;
}
body.home .steven-badge-num {
  position: relative;
  z-index: 1;
  width: calc(var(--fp-seal) * 0.295);
  height: calc(var(--fp-seal) * 0.295);
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 122%, rgba(var(--fp-kick),0.3) 0%, rgba(6,16,34,0.96) 62%);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.92),
    inset 0 -2px 2px rgba(190,230,255,0.22),
    0 1px 0 rgba(206,234,255,0.18);
}
/* The star is struck in a second metal. */
body.home .steven-badge-num::before {
  content: '';
  position: absolute;
  inset: 19%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(146deg,
    #f7ffd9 0%, #d6f279 15%, #9ccd3c 36%, #6f9f24 50%,
    #cdef6a 68%, #8fc23a 86%, #eaffbb 100%);
  filter:
    drop-shadow(-0.5px -0.5px 0 rgba(247,255,214,0.72))
    drop-shadow(0.5px 1px 0 rgba(28,50,12,0.85))
    drop-shadow(0 3px 4px rgba(0,0,0,0.75));
}
body.home .steven-badge-label {
  position: relative;
  z-index: 1;
  font-size: clamp(0.5rem, 0.62vw, 0.5625rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.28;
  color: #dbf1b0;
  opacity: 0.96;
  text-shadow: 0 1px 0 rgba(236,255,198,0.16), 0 -1px 1px rgba(0,0,0,0.92);
}
@keyframes fpMedalRim { to { transform: rotate(1turn); } }

@media (hover: hover) and (pointer: fine) {
  body.home .steven-image-wrap:hover .hm-fp-rig { transform: translateY(-8px); }
  body.home .steven-image-wrap:hover .hm-fp-reveal {
    left: calc(var(--fp-standoff) * -1.45);
    bottom: calc(var(--fp-standoff) * -2.1);
    top: calc(var(--fp-standoff) * 1.35);
  }
  body.home .steven-image-wrap:hover .hm-fp-cast {
    box-shadow:
      0 44px 66px -26px rgba(0,0,0,0.95),
      0 104px 110px -58px rgba(0,0,0,0.92),
      0 0 78px -8px rgba(var(--fp-print),0.34),
      0 0 92px -24px rgba(var(--fp-key),0.48);
  }
  body.home .steven-image-wrap:hover .hm-fp-fin--a { transform: translateY(-50%) translateZ(-152px) rotateY(31deg); }
  body.home .steven-image-wrap:hover .hm-fp-fin--b { transform: translateY(-50%) translateZ(-46px) rotateY(11deg); }
  body.home .steven-image-wrap:hover .hm-fp-fin--c { transform: translateY(-50%) translateZ(-104px) rotateY(-27deg); }
  body.home .steven-image-wrap:hover .hm-fp-corner--tr { transform: scaleX(-1) translate(3px, -3px); }
  body.home .steven-image-wrap:hover .hm-fp-corner--bl { transform: scaleY(-1) translate(-3px, -3px); }
  body.home .steven-image-wrap:hover .hm-fp-plinth::before { opacity: 0.78; transform: scaleX(1.05); }
  body.home .steven-image-wrap:hover .steven-badge { transform: translateY(-4px) rotate(-3deg); }
}

@media (max-width: 900px) {
  body.home .steven-grid { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
  body.home .steven-image-wrap {
    width: min(86vw, 420px);
    margin-inline: auto;
    --fp-band: clamp(76px, 13vw, 92px);
    --fp-standoff: clamp(11px, 3.2vw, 15px);
    --fp-seal: clamp(100px, 26vw, 124px);
    perspective: 1100px;
    perspective-origin: 50% 40%;
  }
  body.home .hm-fp-fin--b { display: none; }
  body.home .hm-fp-fin--a {
    --fin-w: clamp(13px, 3.4vw, 20px);
    --fin-h: 92%;
    left: -11%;
    transform: translateY(-50%) translateZ(-86px) rotateY(19deg);
  }
  body.home .hm-fp-fin--c {
    --fin-w: clamp(10px, 2.6vw, 15px);
    --fin-h: 62%;
    right: -9%;
    top: 57%;
    transform: translateY(-50%) translateZ(-62px) rotateY(-16deg);
  }
  body.home .hm-fp-wall { left: -13%; right: -13%; top: -6%; transform: translateZ(-120px) scale(1.05); }
  body.home .hm-fp-plinth { left: -13%; right: -13%; height: 30px; bottom: -20px; transform: translateZ(-34px) rotateX(62deg); }
  body.home .hm-fp-corner { width: clamp(28px, 8vw, 38px); height: clamp(28px, 8vw, 38px); --fp-strap: 7px; }
  body.home .hm-fp-bead { width: clamp(30px, 9vw, 44px); animation-duration: 26s; }
  body.home .hm-fp-rail { right: calc(var(--fp-seal) * 0.66); }
  body.home .steven-badge { right: calc(var(--fp-seal) * -0.2); bottom: calc(var(--fp-seal) * -0.28); }
  body.home .steven-image { -webkit-mask-image: none !important; mask-image: none !important; }
}

@media (max-width: 430px) {
  body.home .steven-image-wrap {
    width: min(90vw, 360px);
    --fp-mat: 10px;
    --fp-band: 70px;
    --fp-seal: 96px;
    --fp-standoff: 11px;
    --fp-strap: 6px;
    perspective: 900px;
  }
  body.home .hm-fp-corner { width: 26px; height: 26px; }
  body.home .hm-fp-studs { width: 26px; }
  body.home .hm-fp-studs::after { left: 18px; }
  body.home .hm-fp-plinth { height: 26px; bottom: -17px; }
  body.home .steven-badge-label { font-size: 0.5rem; letter-spacing: 0.11em; }
  body.home .steven-badge-num { width: 27px; height: 27px; }
  body.home .hm-fp-rail { height: 2px; right: calc(var(--fp-seal) * 0.72); }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hm-fp-fin,
  body.home .hm-fp-reveal::before,
  body.home .hm-fp-plate,
  body.home .hm-fp-rail::after,
  body.home .hm-fp-bead,
  body.home .steven-badge,
  body.home .steven-badge::after { animation: none !important; }
  body.home .hm-fp-rig,
  body.home .hm-fp-reveal,
  body.home .hm-fp-cast,
  body.home .hm-fp-fin,
  body.home .hm-fp-corner,
  body.home .hm-fp-plinth::before,
  body.home .steven-badge { transition: none !important; }
  body.home .hm-fp-plate { transform: translateY(-3px); }
  body.home .hm-fp-reveal::before { opacity: 0.82; }
  body.home .hm-fp-rail::after { background-position: 24% 0; opacity: 0.85; }
  body.home .hm-fp-bead { offset-distance: 27%; opacity: 0.72; }
  body.home .steven-badge::after { transform: rotate(-28deg); }
}
/* ===== HOMEPAGE VISUAL SYSTEM (end) ===== */

/* ===== CREDIT STRATEGY REFINEMENT (start) ===== */
/* ============================================================
   CREDIT & FINANCIAL STRATEGY — THE READING ROOM
   The environment layer: the page's air, its surfaces, its reveal system
   and the light that carries one section into the next.

   Credit's identity is LAYERED REPORTS RESOLVING INTO ONE PLAN. Where Tax
   Prep is organised and document-driven, this page is ANALYTICAL and
   GOAL-DRIVEN: it moves from a profile to a strategy. The room is built in
   three depth planes so scrolling feels like travelling through space
   rather than sliding over paper:

     FAR   a fixed, barely-there ambient field behind everything. It does
           not scroll, so content parallaxes against it.
     MID   each section's own coloured air (.cs-sec::before) plus, where
           the markup provides one, a slow-drifting cloud (.cs-atmos).
     NEAR  a seam layer (.cs-sec::after): a pool of light straddling every
           section boundary, plus a soft side vignette.

   Two consecutive sections SHARE a seam colour and a seam x-position, so
   the light at a boundary reads as ONE source lighting the end of one
   section and the start of the next. That is the continuation — no rules,
   no dividers, no hard stops. Boundary positions alternate left/right down
   the page, which gives the scroll a direction.

   Hue travels the journey ramp: sky at the profile end, lime at the plan
   end. Seams, sheet tint and the secondary air all move along it. It is
   meant to be felt, not seen.
   ============================================================ */

/* ---- 1 · THE ONE THING STILL SUPPRESSED -----------------------------
   This file used to open with a blanket
     body.cs-page .cs-sec::before, ::after { content: none !important; }
   which existed to unwind the old cut-stone override stack. That stack is
   gone: the base style.css defines no .cs-sec::before/::after rule at all
   (its only .cs-sec pseudo is the descendant .cs-sec--next .cs-meet::after),
   and no other part file references either pseudo. The reset's only
   remaining effect was to block this file, so it is narrowed to the single
   place that must stay a plain dark strip: the legal footnote. The !important
   that used to be here was only compensating for source order — this rule is
   declared before §4's seam layer and they were specificity-tied. Markup is
   <section class="cs-sec cs-sec--legal">, so doubling the class raises this
   to (0,3,2) and it wins on specificity instead. */
body.cs-page .cs-sec.cs-sec--legal::after { content: none; }

/* ---- 2 · TOKENS ---- */
body.cs-page {
  /* the air */
  --rr-void: #050a16;
  --rr-deep: #081226;
  --rr-mid: #0d1b33;
  --rr-lift: #132444;

  /* sheets: translucent, never opaque blocks */
  --rr-sheet: rgba(23, 41, 74, 0.58);
  --rr-sheet-2: rgba(17, 32, 58, 0.47);
  --rr-sheet-3: rgba(12, 23, 44, 0.38);
  --rr-edge: rgba(150, 196, 240, 0.16);
  --rr-edge-lit: rgba(178, 221, 255, 0.34);

  /* the journey ramp: profile -> strategy */
  --rr-profile: #4fb8f5;
  --rr-analysis: #38cfff;
  --rr-bridge: #5fd3c4;
  --rr-priority: #8fd96a;
  --rr-plan: #b4e03a;

  --rr-ink: #eaf3ff;
  --rr-body: #a8bed8;
  --rr-quiet: #7e93b0;

  /* light */
  --rr-glow-sky: rgba(56, 207, 255, 0.34);
  --rr-glow-lime: rgba(175, 221, 44, 0.3);
  /* a real object on a dark floor: tight contact, wide falloff */
  --rr-halo:
    0 0 0 1px var(--rr-edge),
    0 2px 4px -2px rgba(2, 8, 22, 0.55),
    0 22px 46px -26px rgba(2, 8, 22, 0.9),
    0 48px 90px -56px rgba(2, 8, 22, 0.85);
  --rr-halo-lit:
    0 0 0 1px var(--rr-edge-lit),
    0 2px 5px -2px rgba(2, 8, 22, 0.6),
    0 26px 56px -26px rgba(2, 8, 22, 0.94),
    0 58px 108px -62px rgba(2, 8, 22, 0.9),
    0 0 54px -22px var(--rr-glow-sky);

  /* geometry: soft, never chamfered */
  --rr-r: 16px;
  --rr-r-sm: 11px;
  --rr-r-lg: 24px;
  --rr-r-pill: 999px;

  /* easing */
  --rr-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --rr-slow: cubic-bezier(0.44, 0, 0.28, 1);
  /* the settle: fast away, long quiet landing. The page's entrance curve. */
  --rr-settle: cubic-bezier(0.16, 0.86, 0.14, 1);

  /* environment defaults — every section overrides these in §4 */
  --rr-air: 26, 78, 168;        /* primary wash (deep blue) */
  --rr-air-2: 14, 70, 96;       /* secondary wash — travels sky -> olive */
  --rr-air-x: 18%;
  --rr-air-x2: 82%;
  --rr-air-o: 0.42;
  --rr-seam-a: 56, 207, 255;    /* light shared with the section ABOVE */
  --rr-seam-b: 56, 207, 255;    /* light shared with the section BELOW */
  --rr-seam-x: 34%;
  --rr-seam-xb: 66%;
  --rr-vig: 0.4;                /* how deep this section sits */
  --rr-sheet-tint: 56, 207, 255;

  background-color: var(--rr-void);
}

/* ---- 3 · THE FAR FIELD ------------------------------------------------
   One fixed, viewport-locked wash behind the whole document. Because it
   never scrolls, every section slides across it and the page gains real
   parallax depth for the cost of a single composited layer. Its drift is
   74 seconds long and about one percent wide: the room breathes, nothing
   pulses. */
body.cs-page::before {
  content: '';
  position: fixed;
  inset: -12vmax;
  /* -1, not 0: the site footer is an unpositioned in-flow block, so a
     z-index:0 fixed layer would wash straight over it. At -1 the field sits
     between the page canvas and everything on it, which is where a far
     plane belongs. */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 32% at 16% 12%, rgba(36, 88, 194, 0.30) 0%, transparent 70%),
    radial-gradient(36% 30% at 86% 28%, rgba(18, 94, 152, 0.19) 0%, transparent 72%),
    radial-gradient(44% 36% at 66% 76%, rgba(44, 88, 58, 0.15) 0%, transparent 74%),
    radial-gradient(62% 44% at 26% 98%, rgba(24, 62, 126, 0.20) 0%, transparent 74%);
  animation: rrFieldDrift 74s linear infinite;
}
@keyframes rrFieldDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  27%  { transform: translate3d(0.9%, -0.7%, 0) scale(1.018); }
  53%  { transform: translate3d(-0.5%, 0.9%, 0) scale(1.03); }
  79%  { transform: translate3d(-1%, -0.4%, 0) scale(1.014); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- 4 · THE SECTION ENVIRONMENT -------------------------------------
   Sections carry no background of their own any more — they are windows
   onto the far field, tinted by their own air. That alone removes the
   wash / gap / wash / gap stutter the page had. */
body.cs-page .cs-sec,
body.cs-page .cs-hero,
body.cs-page .cs-close,
body.cs-page .cs-thesis-band {
  position: relative;
  border: 0;
  background: none;
}
body.cs-page .cs-sec > .cs-shell,
body.cs-page .cs-hero > .cs-shell,
body.cs-page .cs-close > .cs-shell,
body.cs-page .cs-thesis-band > .cs-shell { position: relative; z-index: 2; }

/* MID — the section's own coloured air. No opaque base layer, so the far
   field reads straight through and neighbours never hard-stop. */
body.cs-page .cs-sec::before,
body.cs-page .cs-thesis-band::before,
body.cs-page .cs-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 58% at var(--rr-air-x) 14%,
      rgba(var(--rr-air), var(--rr-air-o)) 0%, transparent 70%),
    radial-gradient(54% 52% at var(--rr-air-x2) 86%,
      rgba(var(--rr-air-2), 0.30) 0%, transparent 72%);
}

/* NEAR — the seam layer. Two pools of light sit ON the section's top and
   bottom edges; the neighbouring section carries the matching half, so
   each boundary is lit by one shared source. Underneath them, a soft side
   vignette closes the room in. */
body.cs-page .cs-sec::after,
body.cs-page .cs-hero::after,
body.cs-page .cs-close::after,
body.cs-page .cs-thesis-band::after {
  content: '';
  position: absolute;
  inset: 0;
  /* the base sheet gives .cs-hero::after height:1px (a hairline divider) and
     .cs-close::after height:180px; both are re-inherited here as full-bleed
     seam layers, so the explicit sizes have to be released */
  width: auto;
  height: auto;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 190px at var(--rr-seam-x) 0%,
      rgba(var(--rr-seam-a), 0.15) 0%, transparent 72%),
    radial-gradient(62% 210px at var(--rr-seam-xb) 100%,
      rgba(var(--rr-seam-b), 0.15) 0%, transparent 72%),
    radial-gradient(118% 118% at 50% 50%,
      transparent 50%, rgba(3, 8, 20, var(--rr-vig)) 100%);
}

/* the boundary ladder — hue climbs the ramp, position alternates so the
   light walks down the page instead of stacking in a column */
body.cs-page .cs-hero {
  --rr-seam-b: 79, 184, 245;   --rr-seam-xb: 30%;
  --rr-sheet-tint: 79, 184, 245;
}
body.cs-page .cs-sec--method {
  --rr-air: 30, 86, 176; --rr-air-2: 12, 74, 108; --rr-air-x: 14%; --rr-air-x2: 86%;
  --rr-seam-a: 79, 184, 245;  --rr-seam-x: 30%;
  --rr-seam-b: 56, 207, 255;  --rr-seam-xb: 72%;
  --rr-sheet-tint: 79, 184, 245; --rr-vig: 0.34;
}
body.cs-page .cs-sec--receive {
  --rr-air: 26, 82, 172; --rr-air-2: 12, 76, 106; --rr-air-x: 84%; --rr-air-x2: 16%;
  --rr-air-o: 0.46;
  --rr-seam-a: 56, 207, 255;  --rr-seam-x: 72%;
  --rr-seam-b: 56, 207, 255;  --rr-seam-xb: 24%;
  --rr-sheet-tint: 56, 207, 255; --rr-vig: 0.3;
}
body.cs-page .cs-sec--next {
  --rr-air: 24, 84, 162; --rr-air-2: 14, 78, 104; --rr-air-x: 20%; --rr-air-x2: 80%;
  --rr-seam-a: 56, 207, 255;  --rr-seam-x: 24%;
  --rr-seam-b: 72, 210, 226;  --rr-seam-xb: 76%;
  --rr-sheet-tint: 72, 210, 226; --rr-vig: 0.42;
}
body.cs-page .cs-sec--program {
  --rr-air: 22, 82, 154; --rr-air-2: 16, 80, 98; --rr-air-x: 78%; --rr-air-x2: 22%;
  --rr-seam-a: 72, 210, 226;  --rr-seam-x: 76%;
  --rr-seam-b: 95, 211, 196;  --rr-seam-xb: 28%;
  --rr-sheet-tint: 95, 211, 196; --rr-vig: 0.36;
}
body.cs-page .cs-sec--compare {
  --rr-air: 24, 80, 148; --rr-air-2: 20, 82, 90; --rr-air-x: 14%; --rr-air-x2: 86%;
  --rr-seam-a: 95, 211, 196;  --rr-seam-x: 28%;
  --rr-seam-b: 95, 211, 196;  --rr-seam-xb: 70%;
  --rr-sheet-tint: 95, 211, 196; --rr-vig: 0.44;
}
body.cs-page .cs-thesis-band {
  --rr-air: 20, 70, 142; --rr-air-2: 26, 84, 76; --rr-air-x: 24%; --rr-air-x2: 78%;
  --rr-air-o: 0.34;
  --rr-seam-a: 95, 211, 196;  --rr-seam-x: 70%;
  --rr-seam-b: 110, 214, 160; --rr-seam-xb: 26%;
  --rr-vig: 0.52;
}
body.cs-page .cs-sec--fit {
  --rr-air: 26, 78, 144; --rr-air-2: 30, 86, 72; --rr-air-x: 86%; --rr-air-x2: 18%;
  --rr-seam-a: 110, 214, 160; --rr-seam-x: 26%;
  --rr-seam-b: 125, 216, 130; --rr-seam-xb: 74%;
  --rr-sheet-tint: 110, 214, 160; --rr-vig: 0.38;
}
body.cs-page .cs-sec--learn {
  --rr-air: 28, 82, 138; --rr-air-2: 38, 90, 64; --rr-air-x: 18%; --rr-air-x2: 82%;
  --rr-seam-a: 125, 216, 130; --rr-seam-x: 74%;
  --rr-seam-b: 143, 217, 106; --rr-seam-xb: 50%;
  --rr-sheet-tint: 125, 216, 130; --rr-vig: 0.34;
}
body.cs-page .cs-sec--invest {
  --rr-air: 34, 90, 128; --rr-air-2: 48, 96, 54; --rr-air-x: 50%; --rr-air-x2: 50%;
  --rr-air-o: 0.48;
  --rr-seam-a: 143, 217, 106; --rr-seam-x: 50%;
  --rr-seam-b: 162, 221, 80;  --rr-seam-xb: 50%;
  --rr-sheet-tint: 143, 217, 106; --rr-vig: 0.28;
}
body.cs-page .cs-sec--voices {
  --rr-air: 32, 86, 132; --rr-air-2: 46, 94, 56; --rr-air-x: 82%; --rr-air-x2: 16%;
  --rr-seam-a: 162, 221, 80;  --rr-seam-x: 50%;
  --rr-seam-b: 180, 224, 58;  --rr-seam-xb: 30%;
  --rr-sheet-tint: 162, 221, 80; --rr-vig: 0.42;
}
body.cs-page .cs-sec--blueprint {
  --rr-air: 30, 84, 138; --rr-air-2: 44, 92, 58; --rr-air-x: 24%; --rr-air-x2: 76%;
  --rr-seam-a: 180, 224, 58;  --rr-seam-x: 30%;
  --rr-seam-b: 180, 224, 58;  --rr-seam-xb: 72%;
  --rr-sheet-tint: 180, 224, 58; --rr-vig: 0.46;
}
body.cs-page .cs-sec--faq {
  --rr-air: 24, 70, 132; --rr-air-2: 36, 84, 62; --rr-air-x: 76%; --rr-air-x2: 24%;
  --rr-air-o: 0.32;
  --rr-seam-a: 180, 224, 58;  --rr-seam-x: 72%;
  --rr-seam-b: 162, 221, 80;  --rr-seam-xb: 40%;
  --rr-sheet-tint: 162, 221, 80; --rr-vig: 0.5;
}
/* the close is the warmest, most open air on the page — it is the goal end
   of the ramp, and it should feel like arriving somewhere */
body.cs-page .cs-close {
  --rr-air: 34, 92, 124; --rr-air-2: 54, 100, 48; --rr-air-x: 20%; --rr-air-x2: 84%;
  --rr-air-o: 0.44;
  --rr-seam-a: 162, 221, 80;  --rr-seam-x: 40%;
  --rr-seam-b: 180, 224, 58;  --rr-seam-xb: 60%;
  --rr-sheet-tint: 180, 224, 58; --rr-vig: 0.3;
  padding: clamp(96px, 10vw, 180px) 0;
}
/* the close hands down to the legal strip, so its lower seam also carries
   the fade that used to be a flat 180px block of navy */
body.cs-page .cs-close::after {
  background:
    radial-gradient(58% 190px at var(--rr-seam-x) 0%,
      rgba(var(--rr-seam-a), 0.15) 0%, transparent 72%),
    radial-gradient(70% 260px at var(--rr-seam-xb) 100%,
      rgba(var(--rr-seam-b), 0.12) 0%, transparent 74%),
    linear-gradient(to bottom, transparent 62%, rgba(4, 9, 20, 0.7) 100%),
    radial-gradient(118% 118% at 50% 50%,
      transparent 50%, rgba(3, 8, 20, var(--rr-vig)) 100%);
}
/* the legal footnote is the quietest air on the page: it closes the room */
body.cs-page .cs-sec--legal {
  --rr-sheet-tint: 180, 224, 58;
  --rr-vig: 0.16;
  padding: clamp(48px, 5vw, 78px) 0 clamp(64px, 6.5vw, 100px);
}
body.cs-page .cs-sec--legal::before {
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(20, 54, 104, 0.34) 0%, transparent 72%),
    linear-gradient(180deg, rgba(4, 9, 20, 0.5), #040914 82%);
}

/* ---- 5 · THE DRIFTING CLOUD ------------------------------------------
   Six sections carry a .cs-atmos element in the markup. Where it exists it
   becomes the one moving thing in that room: a wide, soft, low-contrast
   cloud on a 46-64 second closed loop. The durations are deliberately
   coprime-ish so no two sections ever fall into step, and the motion is a
   loop rather than a swing — it never reads as a pulse. */
body.cs-page .cs-atmos {
  position: absolute;
  inset: -14% -8%;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
  background:
    radial-gradient(38% 42% at 28% 34%, rgba(var(--rr-sheet-tint), 0.12) 0%, transparent 70%),
    radial-gradient(34% 38% at 74% 68%, rgba(var(--rr-air-2), 0.34) 0%, transparent 72%);
  animation: rrAirTide 56s var(--rr-slow) infinite;
}
@keyframes rrAirTide {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
  24%  { transform: translate3d(1.6%, -1%, 0) scale(1.05); opacity: 0.92; }
  51%  { transform: translate3d(-0.8%, 1.3%, 0) scale(1.09); opacity: 1; }
  77%  { transform: translate3d(-1.7%, -0.6%, 0) scale(1.04); opacity: 0.84; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.72; }
}
body.cs-page .cs-atmos--method {
  animation-duration: 58s;
  background:
    radial-gradient(40% 40% at 76% 10%, rgba(56, 207, 255, 0.13) 0%, transparent 70%),
    radial-gradient(36% 44% at 8% 78%, rgba(79, 184, 245, 0.10) 0%, transparent 72%);
}
body.cs-page .cs-atmos--receive {
  animation-duration: 47s;
  animation-delay: -12s;
  background:
    radial-gradient(42% 40% at 80% 18%, rgba(56, 207, 255, 0.14) 0%, transparent 70%),
    radial-gradient(38% 42% at 6% 70%, rgba(18, 62, 190, 0.26) 0%, transparent 72%);
}
body.cs-page .cs-atmos--program {
  animation-duration: 63s;
  animation-delay: -28s;
  background:
    radial-gradient(46% 36% at 50% 2%, rgba(95, 211, 196, 0.13) 0%, transparent 70%),
    radial-gradient(36% 44% at 10% 72%, rgba(56, 207, 255, 0.09) 0%, transparent 72%);
}
body.cs-page .cs-atmos--invest {
  animation-duration: 52s;
  animation-delay: -34s;
  background:
    radial-gradient(50% 42% at 50% 24%, rgba(143, 217, 106, 0.15) 0%, transparent 70%),
    radial-gradient(40% 44% at 90% 72%, rgba(24, 66, 176, 0.24) 0%, transparent 74%);
}
body.cs-page .cs-atmos--voices {
  animation-duration: 61s;
  animation-delay: -19s;
  background:
    radial-gradient(42% 50% at 10% 26%, rgba(162, 221, 80, 0.11) 0%, transparent 70%),
    radial-gradient(40% 44% at 92% 62%, rgba(56, 207, 255, 0.08) 0%, transparent 72%);
}
body.cs-page .cs-atmos--close {
  animation-duration: 49s;
  animation-delay: -6s;
  background:
    radial-gradient(52% 74% at 20% 42%, rgba(56, 207, 255, 0.12) 0%, transparent 70%),
    radial-gradient(48% 66% at 86% 68%, rgba(180, 224, 58, 0.13) 0%, transparent 72%);
}

/* ---- 6 · THE SHEET — the one surface this page owns -------------------
   A translucent report sheet lit from above. Four things make it read as a
   real lit surface rather than a box:
     · a bright rim on the very top edge, which the rounded corners carry
       a little way down the sides and then let go;
     · an internal ambient gradient falling away from that rim;
     · a whisper of the section's own journey hue arriving from above;
     · a tight contact shadow with a wide, soft falloff beneath it.
   It stays translucent — the air behind it is always slightly visible. */
body.cs-page .cs-scan,
body.cs-page .cs-ap,
body.cs-page .cs-meet,
body.cs-page .cs-home,
body.cs-page .cs-learn-panel,
body.cs-page .cs-plan,
body.cs-page .cs-voice,
body.cs-page .cs-dl-item,
body.cs-page .cs-step,
body.cs-page .cs-snap,
body.cs-page .cs-bp-stage,
body.cs-page .cs-compare,
body.cs-page .cs-legal {
  border: 0;
  border-radius: var(--rr-r);
  background:
    linear-gradient(180deg,
      rgba(214, 240, 255, 0.34) 0px,
      rgba(214, 240, 255, 0.07) 1px,
      rgba(214, 240, 255, 0) 1.6px),
    linear-gradient(180deg,
      rgba(190, 226, 255, 0.09) 0%,
      rgba(190, 226, 255, 0.022) 28%,
      rgba(190, 226, 255, 0) 64%),
    radial-gradient(130% 88% at 50% -14%,
      rgba(var(--rr-sheet-tint), 0.06) 0%, transparent 66%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(150, 196, 240, 0.085),
    inset 0 26px 46px -34px rgba(var(--rr-sheet-tint), 0.34),
    inset 0 -20px 34px -32px rgba(2, 8, 22, 0.8),
    0 2px 4px -2px rgba(2, 8, 22, 0.55),
    0 22px 46px -26px rgba(2, 8, 22, 0.9),
    0 50px 94px -58px rgba(2, 8, 22, 0.86);
  backdrop-filter: blur(7px) saturate(1.16);
  -webkit-backdrop-filter: blur(7px) saturate(1.16);
}

/* ---- 7 · SECTION RHYTHM ----------------------------------------------
   More air than before. The page earns its scale from whitespace, not from
   boxes, and the extra room is what lets the seams read. */
body.cs-page .cs-sec { padding: clamp(88px, 9.4vw, 172px) 0; }
body.cs-page .cs-shell { position: relative; }

/* ---- 8 · BODY COPY ---- */
body.cs-page .cs-body,
body.cs-page .cs-sec p { color: var(--rr-body); }
body.cs-page .cs-intro,
body.cs-page .cs-fit-lead,
body.cs-page .cs-diff-head,
body.cs-page .cs-faq-head { margin-bottom: clamp(44px, 5vw, 76px); }

/* ---- 9 · THE REVEAL SYSTEM -------------------------------------------
   The observer is the page's only scroll hook, and it may never fire for
   someone who lands mid-page — so nothing here hides content. Every
   .reveal element is fully opaque and fully laid out at rest; the entrance
   is a SETTLE, a short travel and a hair of depth landing on a long quiet
   curve. That is calmer and more considered than a fade, and it survives
   an observer that never runs.

   Section files steer it per element by setting these on the element:
     --rr-rv-y   rise distance          (default 26px)
     --rr-rv-x   lateral drift          (default 0)
     --rr-rv-s   depth, as a scale      (default 0.994 — reads as distance)
     --rr-rv-r   tilt                   (default 0deg)
     --rr-rv-t   duration               (default 1.05s)
     --rr-rv-d   delay                  (default 0s; the delay classes set it)
   Nothing needs a new class in the markup, which we cannot touch. */
body.cs-page .reveal {
  opacity: 1;
  filter: none;
  transform:
    translate3d(var(--rr-rv-x, 0px), var(--rr-rv-y, 26px), 0)
    scale(var(--rr-rv-s, 0.994))
    rotate(var(--rr-rv-r, 0deg));
  transform-origin: 50% 0%;
  transition-property: transform;
  transition-duration: var(--rr-rv-t, 1.05s);
  transition-timing-function: var(--rr-settle);
  transition-delay: var(--rr-rv-d, 0s);
}
/* landed state is `none`, not an identity matrix: the element gives up its
   compositing layer and stops being a containing block once it has arrived */
body.cs-page .reveal.revealed { transform: none; }

/* the base delay classes set transition-delay directly, which this file's
   longhand outranks — so they are re-expressed as the delay variable */
body.cs-page .reveal-delay-1 { --rr-rv-d: 0.09s; }
body.cs-page .reveal-delay-2 { --rr-rv-d: 0.18s; }
body.cs-page .reveal-delay-3 { --rr-rv-d: 0.27s; }
body.cs-page .reveal-delay-4 { --rr-rv-d: 0.36s; }
body.cs-page .reveal-delay-5 { --rr-rv-d: 0.45s; }

/* WEIGHT. The big lit sheets are heavy objects: they travel further, land
   later and come from slightly deeper, so arrival carries hierarchy
   instead of everything moving at one speed. */
body.cs-page .reveal.cs-ap,
body.cs-page .reveal.cs-plan,
body.cs-page .reveal.cs-compare,
body.cs-page .reveal.cs-bp-stage,
body.cs-page .reveal.cs-home,
body.cs-page .reveal.cs-learn-panel,
body.cs-page .reveal.cs-meet,
body.cs-page .reveal.cs-scan,
body.cs-page .reveal.cs-hero-visual {
  --rr-rv-y: 38px;
  --rr-rv-s: 0.986;
  --rr-rv-t: 1.35s;
}
/* copy blocks are light: they lift, they do not travel */
body.cs-page .reveal.cs-intro,
body.cs-page .reveal.cs-fit-lead,
body.cs-page .reveal.cs-diff-head,
body.cs-page .reveal.cs-faq-head,
body.cs-page .reveal.cs-learn-copy,
body.cs-page .reveal.cs-bp-copy,
body.cs-page .reveal.cs-close-inner {
  --rr-rv-y: 18px;
  --rr-rv-s: 1;
  --rr-rv-t: 0.92s;
}
/* sequences arrive along the journey's direction of travel: left to right,
   the same direction every ramp on this page runs */
body.cs-page .reveal.cs-voice,
body.cs-page .reveal.cs-dl-item {
  --rr-rv-x: -14px;
  --rr-rv-y: 22px;
  --rr-rv-t: 1.15s;
}
body.cs-page .reveal.cs-method-side,
body.cs-page .reveal.cs-scenes {
  --rr-rv-x: 16px;
  --rr-rv-y: 20px;
  --rr-rv-s: 1;
}

/* ============================================================
   BREAKPOINTS — mobile is composed, not shrunk
   ============================================================ */
@media (max-width: 1080px) {
  body.cs-page .cs-sec { padding: clamp(76px, 9vw, 132px) 0; }
  body.cs-page .cs-sec::after,
  body.cs-page .cs-hero::after,
  body.cs-page .cs-close::after,
  body.cs-page .cs-thesis-band::after { --rr-vig: 0.3; }
}

@media (max-width: 760px) {
  body.cs-page {
    --rr-r: 14px;
    --rr-r-sm: 10px;
    --rr-r-lg: 18px;
    /* on a narrow column the air has to be gentler or it becomes a stripe */
    --rr-air-o: 0.36;
    --rr-vig: 0.24;
  }
  body.cs-page .cs-sec { padding: clamp(64px, 14vw, 104px) 0; }
  body.cs-page .cs-close { padding: clamp(74px, 16vw, 116px) 0; }
  body.cs-page .cs-intro,
  body.cs-page .cs-fit-lead,
  body.cs-page .cs-diff-head,
  body.cs-page .cs-faq-head { margin-bottom: clamp(32px, 8vw, 48px); }

  /* the seams get shallower and closer to centre: a phone viewport is too
     narrow for a 30/70 zig-zag to read as travel */
  body.cs-page .cs-sec::after,
  body.cs-page .cs-hero::after,
  body.cs-page .cs-close::after,
  body.cs-page .cs-thesis-band::after {
    background:
      radial-gradient(90% 130px at var(--rr-seam-x) 0%,
        rgba(var(--rr-seam-a), 0.17) 0%, transparent 74%),
      radial-gradient(94% 150px at var(--rr-seam-xb) 100%,
        rgba(var(--rr-seam-b), 0.17) 0%, transparent 74%),
      linear-gradient(180deg, transparent 72%, rgba(3, 8, 20, 0.3) 100%);
  }
  body.cs-page .cs-close::after {
    background:
      radial-gradient(90% 130px at var(--rr-seam-x) 0%,
        rgba(var(--rr-seam-a), 0.17) 0%, transparent 74%),
      radial-gradient(100% 190px at var(--rr-seam-xb) 100%,
        rgba(var(--rr-seam-b), 0.14) 0%, transparent 76%),
      linear-gradient(to bottom, transparent 60%, rgba(4, 9, 20, 0.72) 100%);
  }

  /* backdrop blur is the single most expensive thing on a phone and the
     cheapest to lose — the sheet keeps its rim, its gradient and its
     shadow, which is where it reads from anyway */
  body.cs-page .cs-scan,
  body.cs-page .cs-ap,
  body.cs-page .cs-meet,
  body.cs-page .cs-home,
  body.cs-page .cs-learn-panel,
  body.cs-page .cs-plan,
  body.cs-page .cs-voice,
  body.cs-page .cs-dl-item,
  body.cs-page .cs-step,
  body.cs-page .cs-snap,
  body.cs-page .cs-bp-stage,
  body.cs-page .cs-compare,
  body.cs-page .cs-legal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      linear-gradient(180deg,
        rgba(214, 240, 255, 0.32) 0px,
        rgba(214, 240, 255, 0.07) 1px,
        rgba(214, 240, 255, 0) 1.6px),
      linear-gradient(180deg,
        rgba(190, 226, 255, 0.085) 0%,
        rgba(190, 226, 255, 0.02) 30%,
        rgba(190, 226, 255, 0) 66%),
      linear-gradient(168deg, rgba(23, 41, 74, 0.86) 0%, rgba(15, 29, 54, 0.9) 60%, rgba(11, 21, 41, 0.92) 100%);
  }

  /* the settle shortens on a phone: less screen to travel across */
  body.cs-page .reveal { --rr-rv-y: 18px; --rr-rv-x: 0px; --rr-rv-t: 0.85s; }
  body.cs-page .reveal.cs-ap,
  body.cs-page .reveal.cs-plan,
  body.cs-page .reveal.cs-compare,
  body.cs-page .reveal.cs-bp-stage,
  body.cs-page .reveal.cs-home,
  body.cs-page .reveal.cs-learn-panel,
  body.cs-page .reveal.cs-meet,
  body.cs-page .reveal.cs-scan,
  body.cs-page .reveal.cs-hero-visual { --rr-rv-y: 24px; --rr-rv-s: 0.992; --rr-rv-t: 1.05s; }
  body.cs-page .reveal.cs-voice,
  body.cs-page .reveal.cs-dl-item,
  body.cs-page .reveal.cs-method-side,
  body.cs-page .reveal.cs-scenes { --rr-rv-x: 0px; }
}

@media (max-width: 400px) {
  body.cs-page .cs-sec { padding: clamp(56px, 15vw, 80px) 0; }
  body.cs-page { --rr-air-o: 0.32; }
}

/* ============================================================
   TYPE — editorial, confident, one voice
   One eyebrow, one headline treatment, one accent: roman for the premise,
   gradient italic for the payoff, at the SAME SIZE.

   THE SCALE. Three tiers with real air between them, so a reader never has
   to work out which statement is the important one:

        DISPLAY   .cs-h1 / .cs-next-title      ~76 / 92px @1440
        MAJOR     .cs-h2--xl .cs-close-title   ~68 / 72px @1440
        SUB       .cs-h2 .cs-bp-title          ~51 / 56px @1440

   Section files may retune a heading for their own column width; this file
   sets the system, the measure, the accent and the alignment law.
   ============================================================ */

/* ---- 1 · THE EYEBROW — a capsule, a drawn lead rule, a lit terminal -----
   The page's most repeated element, so it earns real craft: the lead rule
   tapers IN and lands on a lit dot against the first letter, the capsule
   carries a wash of its own section's ramp colour, and in centred contexts
   a mirrored rule leaves on the other side so the mark reads as symmetrical
   around the words rather than hanging off one end.
   NOTE: --acc / --acc-rgb are assigned by .cs-page [data-accent] — only ever
   consumed here, never set. */
body.cs-page .cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(22px, 2.4vw, 32px);
  /* the right pad is short by one letter-space: uppercase tracking adds a
     trailing gap after the last letter that would otherwise read off-centre */
  padding: 8px calc(18px - 0.19em) 8px 13px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(90deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.15) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.05) 58%,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 100%),
    rgba(18, 38, 70, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.26),
    0 0 30px -14px rgba(var(--acc-rgb, 56, 207, 255), 0.55),
    0 12px 28px -20px rgba(2, 8, 22, 0.95);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  /* the dark green accent needs lifting off navy; the bright ones barely move */
  color: rgba(var(--acc-rgb, 56, 207, 255), 1);
  color: color-mix(in srgb, rgba(var(--acc-rgb, 56, 207, 255), 1) 76%, var(--rr-ink));
}
/* the base ships a ::before rule AND we ship .cs-eb — that doubled dash is
   the single worst piece of craft on the page today. One mark only. */
body.cs-page .cs-eyebrow::before { content: none; display: none; }
body.cs-page .cs-eyebrow::after { content: none; display: none; }

body.cs-page .cs-eyebrow .cs-eb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.85) 100%);
  transform-origin: left center;
}
body.cs-page .cs-eyebrow .cs-eb::before { content: none; }
/* the terminal: the rule arrives somewhere */
body.cs-page .cs-eyebrow .cs-eb::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(var(--acc-rgb, 56, 207, 255), 1);
  box-shadow: 0 0 9px -1px rgba(var(--acc-rgb, 56, 207, 255), 0.95);
}

/* ---- 2 · HEADLINES ---- */
body.cs-page .cs-h1,
body.cs-page .cs-h2,
body.cs-page .cs-diff-title,
body.cs-page .cs-close-title,
body.cs-page .cs-bp-title {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.014em;
  color: var(--rr-ink);
  text-wrap: balance;
  font-kerning: normal;
  font-optical-sizing: auto;
}

/* DISPLAY */
body.cs-page .cs-h1 {
  font-size: clamp(3rem, 5.1vw, 4.75rem);
  line-height: 1.045;
  letter-spacing: -0.019em;
}
body.cs-page .cs-h2.cs-h2--xl.cs-next-title {
  font-size: clamp(3rem, 6.4vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

/* MAJOR SECTION — compounded with .cs-h2 so the SUB rule below, which has
   the same specificity and comes later, cannot quietly flatten it */
body.cs-page .cs-h2.cs-h2--xl,
body.cs-page .cs-diff-title {
  font-size: clamp(2.5rem, 4.7vw, 4.25rem);
  line-height: 1.055;
  letter-spacing: -0.018em;
}
body.cs-page .cs-close-title {
  font-size: clamp(2.625rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.019em;
}

/* SUB-SECTION */
body.cs-page .cs-h2 {
  font-size: clamp(2.25rem, 3.55vw, 3.375rem);
  line-height: 1.09;
  letter-spacing: -0.015em;
}
body.cs-page .cs-bp-title {
  font-size: clamp(2.25rem, 3.9vw, 3.625rem);
  line-height: 1.06;
  letter-spacing: -0.016em;
}
/* the Learning Center headline lives in a narrow column beside its panel;
   at the full sub-section size its third line breaks across the accent */
body.cs-page .cs-learn-copy .cs-h2 { font-size: clamp(2.125rem, 3.25vw, 3rem); }

body.cs-page .cs-line { display: block; text-wrap: balance; }
body.cs-page .cs-nowrap { white-space: nowrap; }

/* THE ACCENT: gradient italic, at the same size as the roman around it.
   Roman states the premise, the italic resolves it — one treatment, used
   everywhere an idea lands. The ramp runs profile -> plan, the direction
   every sequence on this page runs. A soft bloom sits under the letterforms
   and one slow band of light crosses them every eleven seconds. */
body.cs-page .cs-h1 em,
body.cs-page .cs-h2 em,
body.cs-page .cs-diff-b em,
body.cs-page .cs-close-title em,
body.cs-page .cs-bp-title em,
body.cs-page .cs-beat--3 em {
  font-style: italic;
  font-weight: 500;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image:
    linear-gradient(104deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.62) 46%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(96deg,
      var(--rr-profile) 0%,
      var(--rr-analysis) 20%,
      var(--rr-bridge) 47%,
      var(--rr-priority) 73%,
      var(--rr-plan) 100%);
  background-size: 56% 140%, 100% 100%;
  background-position: -150% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* background-clip paints inside the box only: descenders need the room,
     and the compensation below is exactly that padding and nothing more */
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
/* the bloom is kept off .cs-h1 em: the hero runs its own light on that
   element and an animated filter there would cancel this one */
body.cs-page .cs-h2 em,
body.cs-page .cs-diff-b em,
body.cs-page .cs-close-title em,
body.cs-page .cs-bp-title em,
body.cs-page .cs-beat--3 em {
  filter: drop-shadow(0 0 20px rgba(95, 211, 196, 0.32));
  animation: rrAccentTravel 11s var(--rr-slow) 1.6s infinite;
}
@keyframes rrAccentTravel {
  0%, 22%   { background-position: -150% 0, 0 0; }
  60%, 100% { background-position: 250% 0, 0 0; }
}

/* ---- 3 · MEASURE, LEADING, ALIGNMENT --------------------------------
   The base measure of 62ch was delivering ~80 characters a line on this
   serif/sans pairing. Long-form copy now runs at a comfortable ~70, and
   centred lede copy tighter still. Section files stay free to widen. */
body.cs-page .cs-body {
  max-width: 56ch;
  line-height: 1.66;
  text-wrap: pretty;
}
body.cs-page .cs-body,
body.cs-page .cs-sec p,
body.cs-page .cs-close p { text-wrap: pretty; }

/* Centred editorial heads. .cs-fit-lead and .cs-faq-head are LEFT columns
   in two-column sections at desktop — centring them there floated their
   eyebrow and copy away from the panel beside them. They centre only once
   the layout actually stacks. */
body.cs-page .cs-intro--center { max-width: 1140px; margin-inline: auto; text-align: center; }
body.cs-page .cs-fit-lead,
body.cs-page .cs-faq-head { text-align: left; }
body.cs-page .cs-intro--center .cs-eyebrow,
body.cs-page .cs-diff-head .cs-eyebrow { margin-inline: auto; }

/* the lede under a major head: a real lede, not caption-sized */
body.cs-page .cs-intro .cs-body,
body.cs-page .cs-diff-head .cs-body {
  max-width: 52ch;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.64;
}
body.cs-page .cs-faq-head .cs-body {
  max-width: 36ch;
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  line-height: 1.66;
}
body.cs-page .cs-h2 + .cs-body,
body.cs-page .cs-diff-title + .cs-body { margin-top: clamp(20px, 2vw, 30px); }

/* ---- 4 · THE SIGNATURE RULE — a short lit bar under a lead statement ---- */
body.cs-page .cs-program-rule {
  display: block;
  width: 104px;
  height: 3px;
  margin: clamp(22px, 2.4vw, 30px) auto;
  border-radius: 3px;
  transform-origin: center;
  background: linear-gradient(90deg,
    var(--rr-analysis) 0%, var(--rr-bridge) 46%, var(--rr-plan) 100%);
  box-shadow: 0 0 22px -4px var(--rr-glow-sky), 0 0 34px -10px var(--rr-glow-lime);
}

/* ---- 5 · ENTRANCE CHOREOGRAPHY --------------------------------------
   Hung entirely off .reveal.revealed. Every resting state below is the
   finished state, so a reader who lands mid-page — or whose observer never
   fires — sees correct, fully visible type. */
@keyframes rrEyebrowIn {
  0%   { opacity: 0.5; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes rrEbDraw {
  0%   { opacity: 0.35; transform: scaleX(0.16); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes rrLineIn {
  0%   { opacity: 0.3; transform: translateY(0.36em); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes rrRuleDraw {
  0%   { opacity: 0.4; transform: scaleX(0.1); }
  100% { opacity: 1; transform: scaleX(1); }
}

body.cs-page .reveal.revealed .cs-eyebrow,
body.cs-page .cs-eyebrow.reveal.revealed { animation: rrEyebrowIn 0.62s var(--rr-ease) both; }
body.cs-page .reveal.revealed .cs-eyebrow .cs-eb,
body.cs-page .cs-eyebrow.reveal.revealed .cs-eb { animation: rrEbDraw 0.74s var(--rr-ease) 0.14s both; }

body.cs-page .reveal.revealed .cs-h2 > .cs-line,
body.cs-page .reveal.revealed .cs-close-title > .cs-line,
body.cs-page .reveal.revealed .cs-bp-title > .cs-line,
body.cs-page .cs-h1.reveal.revealed .cs-line {
  animation: rrLineIn 0.8s var(--rr-slow) both;
}
body.cs-page .reveal.revealed .cs-h2 > .cs-line:nth-child(2),
body.cs-page .reveal.revealed .cs-close-title > .cs-line:nth-child(2),
body.cs-page .reveal.revealed .cs-bp-title > .cs-line:nth-child(2),
body.cs-page .cs-h1.reveal.revealed .cs-line:nth-child(2) { animation-delay: 0.11s; }
body.cs-page .reveal.revealed .cs-h2 > .cs-line:nth-child(3),
body.cs-page .reveal.revealed .cs-close-title > .cs-line:nth-child(3),
body.cs-page .reveal.revealed .cs-bp-title > .cs-line:nth-child(3) { animation-delay: 0.22s; }

body.cs-page .cs-intro.reveal.revealed .cs-body,
body.cs-page .cs-diff-head.reveal.revealed .cs-body {
  animation: rrLineIn 0.82s var(--rr-slow) 0.3s both;
}
body.cs-page .reveal.revealed .cs-program-rule { animation: rrRuleDraw 0.8s var(--rr-slow) 0.2s both; }

/* ---- 6 · SCREEN-READER ONLY ---- */
body.cs-page .cs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PHONES — designed, not shrunk. 430 / 400 / 390 / 360.
   Editorial heads and their eyebrows centre; reading copy stays left.
   Nothing here makes a headline smaller to make it fit — the lines break
   instead, and the type stays large.
   ============================================================ */
@media (max-width: 980px) {
  body.cs-page .cs-faq-head { text-align: center; }
  body.cs-page .cs-faq-head .cs-eyebrow { margin-inline: auto; }
  body.cs-page .cs-faq-head .cs-body { max-width: 56ch; margin-inline: auto; text-align: left; }
}

@media (max-width: 760px) {
  body.cs-page .cs-h1 { font-size: clamp(2.375rem, 10.6vw, 3.25rem); line-height: 1.03; }
  body.cs-page .cs-h2 { font-size: clamp(2rem, 8.6vw, 2.75rem); line-height: 1.08; }
  body.cs-page .cs-learn-copy .cs-h2 { font-size: clamp(2rem, 8.6vw, 2.75rem); }
  body.cs-page .cs-h2.cs-h2--xl,
  body.cs-page .cs-diff-title { font-size: clamp(2.125rem, 9.4vw, 3.125rem); line-height: 1.055; }
  body.cs-page .cs-h2.cs-h2--xl.cs-next-title { font-size: clamp(2.625rem, 11.6vw, 4.25rem); line-height: 1.02; }
  body.cs-page .cs-close-title { font-size: clamp(2.25rem, 9.8vw, 3.25rem); line-height: 1.05; }
  body.cs-page .cs-bp-title { font-size: clamp(2rem, 8.6vw, 2.75rem); line-height: 1.06; }

  body.cs-page .cs-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    gap: 9px;
    padding: 8px calc(15px - 0.16em) 8px 12px;
    margin-bottom: 20px;
  }
  body.cs-page .cs-eyebrow .cs-eb { width: 22px; }

  /* the heads centre; the reading copy does not */
  body.cs-page .cs-intro,
  body.cs-page .cs-fit-lead,
  body.cs-page .cs-learn-copy,
  body.cs-page .cs-diff-head,
  body.cs-page .cs-faq-head { text-align: center; }
  body.cs-page .cs-intro .cs-eyebrow,
  body.cs-page .cs-fit-lead .cs-eyebrow,
  body.cs-page .cs-learn-copy .cs-eyebrow,
  body.cs-page .cs-diff-head .cs-eyebrow,
  body.cs-page .cs-faq-head .cs-eyebrow { margin-inline: auto; }
  body.cs-page .cs-intro .cs-body,
  body.cs-page .cs-fit-lead .cs-body,
  body.cs-page .cs-learn-copy .cs-body,
  body.cs-page .cs-faq-head .cs-body,
  body.cs-page .cs-diff-head .cs-body {
    text-align: left;
    margin-inline: 0;
    max-width: none;
    font-size: clamp(1.0625rem, 1.1vw + 0.9rem, 1.1875rem);
    line-height: 1.66;
  }
}

/* The mirrored departing rule. Only in contexts that are genuinely centred,
   so the mark reads as balanced around the words instead of hanging off the
   left. It is a rule with no terminal: the lead mark arrives, this one leaves. */
body.cs-page .cs-intro--center .cs-eyebrow::after,
body.cs-page .cs-diff-head .cs-eyebrow::after,
body.cs-page .cs-close .cs-eyebrow::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.6) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0) 100%);
}
body.cs-page .cs-intro--center .cs-eyebrow,
body.cs-page .cs-diff-head .cs-eyebrow,
body.cs-page .cs-close .cs-eyebrow { padding-inline: 15px calc(15px - 0.19em); }

@media (max-width: 980px) {
  body.cs-page .cs-faq-head .cs-eyebrow::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.6) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 100%);
  }
  body.cs-page .cs-faq-head .cs-eyebrow { padding-inline: 15px calc(15px - 0.19em); }
}

@media (max-width: 760px) {
  body.cs-page .cs-hero-eyebrow::after,
  body.cs-page .cs-fit-lead .cs-eyebrow::after,
  body.cs-page .cs-learn-copy .cs-eyebrow::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.6) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 100%);
  }
  body.cs-page .cs-intro--center .cs-eyebrow::after,
  body.cs-page .cs-diff-head .cs-eyebrow::after,
  body.cs-page .cs-faq-head .cs-eyebrow::after,
  body.cs-page .cs-close .cs-eyebrow::after { width: 22px; }
  body.cs-page .cs-hero-eyebrow,
  body.cs-page .cs-fit-lead .cs-eyebrow,
  body.cs-page .cs-learn-copy .cs-eyebrow,
  body.cs-page .cs-intro--center .cs-eyebrow,
  body.cs-page .cs-diff-head .cs-eyebrow,
  body.cs-page .cs-faq-head .cs-eyebrow,
  body.cs-page .cs-close .cs-eyebrow { padding-inline: 13px calc(13px - 0.16em); }
}

/* ============================================================
   THE CTA FAMILY — four materials, one construction
   A CTA is a soft luminous capsule: a real gradient body that is lit along
   its top edge and grounded along its base, a hairline that brightens on
   approach, a believable contact shadow under the plate, and the arrow
   living in its own bright chip. The chip is the family signature and the
   thing that advances. Nothing here is chamfered, milled or struck.

   Layer stack inside one button (isolation: isolate keeps it local):
     -4  ::before   idle halo   (primary consultation family only)
     -3  ::after    contact shadow on the floor (all plates, not the seam)
     -2  .cb-face   the body: gradient + lit rim + grounded base
     -1  .cb-light  the travelling sheen
      1  the chip
   ============================================================ */
body.cs-page .cs-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 60px;
  padding: 0 15px 0 28px;
  border: 0;
  border-radius: var(--rr-cta-r, 12px);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  font-size: 0.84375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.4s var(--rr-ease),
    box-shadow 0.4s var(--rr-ease),
    color 0.3s var(--rr-ease);
}
body.cs-page .cs-cta.btn-lg {
  --rr-cta-r: 13px;
  min-height: 64px;
  padding: 0 17px 0 32px;
  font-size: 0.875rem;
}
/* ::before is the idle halo and is switched on only for the primary family */
body.cs-page .cs-cta::before { content: none; display: none; }

/* the contact shadow — the plate sits ON something, it does not float */
body.cs-page .cs-cta:not(.cs-cta--seam)::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -3;
  left: 9px;
  right: 9px;
  bottom: -8px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(64% 100% at 50% 38%,
    rgba(2, 7, 20, 0.7) 0%,
    rgba(2, 7, 20, 0.34) 46%,
    rgba(2, 7, 20, 0) 74%);
  filter: blur(5px);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.4s var(--rr-ease), bottom 0.4s var(--rr-ease),
              left 0.4s var(--rr-ease), right 0.4s var(--rr-ease);
}

/* the two legacy layers stay retired */
body.cs-page .cs-cta > .cb-floor,
body.cs-page .cs-cta > .cb-wall { display: none; }
body.cs-page .cs-cta > i { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }

/* ---- THE BODY --------------------------------------------------------
   Gradient body, a sheet of light down the top third, a lit top rim, a
   dark grounded bottom rim and an inner shadow pooling at the base. The
   outer light is a short, tight family glow rather than a gaming halo. */
body.cs-page .cs-cta > .cb-face {
  z-index: -2;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.045) 34%,
      rgba(255, 255, 255, 0) 56%,
      rgba(0, 0, 0, 0.14) 100%),
    var(--rr-cta-body);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    inset 0 -14px 20px -14px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--rr-cta-edge),
    0 1px 1px rgba(2, 7, 20, 0.5),
    0 7px 14px -8px rgba(2, 7, 20, 0.7),
    0 20px 38px -20px rgba(2, 7, 20, 0.92),
    0 0 30px -20px var(--rr-cta-glow);
  transition: box-shadow 0.4s var(--rr-ease), background 0.4s var(--rr-ease);
}

/* ---- THE SHEEN -------------------------------------------------------
   Light passing across a surface: wide, soft-shouldered, slow, and it
   rests off the left edge for most of its cycle. Each family runs its own
   period and its own offset so no two plates on screen ever sweep
   together. */
body.cs-page .cs-cta > .cb-light {
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0 26%,
    rgba(255, 255, 255, calc(var(--rr-cta-sheen, 0.16) * 0.36)) 40%,
    rgba(255, 255, 255, var(--rr-cta-sheen, 0.16)) 50%,
    rgba(255, 255, 255, calc(var(--rr-cta-sheen, 0.16) * 0.36)) 60%,
    rgba(255, 255, 255, 0) 74% 100%) no-repeat;
  background-size: 62% 100%;
  background-position: -85% 0;
  animation: rrCtaSheen var(--rr-cta-period, 16s) var(--rr-slow) var(--rr-cta-delay, 1.6s) infinite;
}
@keyframes rrCtaSheen {
  0%, 72% { background-position: -85% 0; }
  100% { background-position: 195% 0; }
}

/* ---- THE IDLE — primary consultation only ----------------------------
   One very slow breath of light on the floor beneath the single most
   important plate on the page. Nothing else on the page idles. */
body.cs-page .cs-cta--commit::before,
body.cs-page .cs-cta--return::before,
body.cs-page .cs-cta--invite::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -4;
  inset: -16px -12px -20px -12px;
  border-radius: 26px;
  transform: none;
  background: radial-gradient(58% 72% at 50% 54%,
    rgba(150, 214, 66, 0.3) 0%,
    rgba(120, 190, 60, 0.12) 52%,
    rgba(120, 190, 60, 0) 76%);
  opacity: 0.6;
  pointer-events: none;
  animation: rrCtaIdle 8.4s var(--rr-slow) 2.2s infinite;
}
@keyframes rrCtaIdle {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.94; }
}

/* ---- THE CHIP — the family signature ---------------------------------
   Its own body, its own top light, its own hairline and its own micro
   shadow, so it reads as a physical tile set into the plate rather than a
   painted square. It stays in proportion: never a second button. */
body.cs-page .cs-cta > svg,
body.cs-page .cs-cta > .cs-ico,
body.cs-page .cs-cta > svg.cs-ico {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 9px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 10px;
  color: var(--rr-chip-ink);
  background: var(--rr-chip);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 3px -1px rgba(2, 7, 20, 0.45),
    0 8px 14px -7px rgba(2, 7, 20, 0.85);
  transition:
    transform 0.4s var(--rr-ease),
    box-shadow 0.4s var(--rr-ease),
    background 0.4s var(--rr-ease);
}
body.cs-page .cs-cta--commit > svg,
body.cs-page .cs-cta--return > svg,
body.cs-page .cs-cta--invite > svg,
body.cs-page .cs-cta--analysis > svg { order: 2; }

/* the chip arrives with the plate: one confident advance, then it releases
   so hover owns the transform again */
body.cs-page .reveal.revealed .cs-cta > svg,
body.cs-page .reveal.revealed .cs-cta > .cs-ico {
  animation: rrChipArrive 0.86s var(--rr-ease) 0.3s 1 backwards;
}
@keyframes rrChipArrive {
  0% { transform: translateX(-11px); }
  100% { transform: translateX(0); }
}

/* ---- HOVER / FOCUS / PRESS ------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  body.cs-page .cs-cta:hover {
    transform: translateY(-3px);
    background: transparent;
    box-shadow: none;
  }
  body.cs-page .cs-cta:hover > .cb-face {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.07) 34%,
        rgba(255, 255, 255, 0) 56%,
        rgba(0, 0, 0, 0.12) 100%),
      var(--rr-cta-body);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
      inset 0 -14px 20px -14px rgba(0, 0, 0, 0.45),
      0 0 0 1px var(--rr-cta-edge-lit),
      0 1px 1px rgba(2, 7, 20, 0.45),
      0 10px 20px -10px rgba(2, 7, 20, 0.7),
      0 30px 52px -22px rgba(2, 7, 20, 0.95),
      0 0 44px -20px var(--rr-cta-glow);
  }
  body.cs-page .cs-cta:not(.cs-cta--seam):hover::after {
    left: 14px;
    right: 14px;
    bottom: -12px;
    opacity: 0.72;
  }
  body.cs-page .cs-cta:hover > svg,
  body.cs-page .cs-cta:hover > .cs-ico {
    transform: translateX(4px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.68),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.18),
      0 3px 5px -1px rgba(2, 7, 20, 0.45),
      0 12px 20px -8px rgba(2, 7, 20, 0.9);
  }
  /* hover releases the arrival animation so the advance is not fought */
  body.cs-page .reveal.revealed .cs-cta:hover > svg,
  body.cs-page .reveal.revealed .cs-cta:hover > .cs-ico { animation: none; }
}

/* the press: the plate settles, the light under it tightens, the chip
   compresses. No stray rectangle anywhere. */
body.cs-page .cs-cta:active {
  transform: translateY(1px) scale(0.995);
  transition-duration: 0.1s;
}
body.cs-page .cs-cta:active > .cb-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 10px 18px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--rr-cta-edge-lit),
    0 1px 1px rgba(2, 7, 20, 0.5),
    0 4px 8px -5px rgba(2, 7, 20, 0.7),
    0 0 26px -18px var(--rr-cta-glow);
  transition-duration: 0.1s;
}
body.cs-page .cs-cta:not(.cs-cta--seam):active::after {
  left: 7px;
  right: 7px;
  bottom: -5px;
  opacity: 0.98;
  transition-duration: 0.1s;
}
body.cs-page .cs-cta:active > svg,
body.cs-page .cs-cta:active > .cs-ico {
  transform: translateX(1px) scale(0.955);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 1px 2px -1px rgba(2, 7, 20, 0.6);
  transition-duration: 0.1s;
}

/* the focus ring: one bright cyan band on every family, clear of the
   plate's own light so it reads on green, on royal and on navy alike */
body.cs-page .cs-cta:focus-visible {
  outline: 2px solid #8fe3ff;
  outline-offset: 5px;
}
body.cs-page .cs-cta:focus-visible > .cb-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--rr-cta-edge-lit),
    0 0 0 6px rgba(56, 207, 255, 0.14),
    0 20px 38px -20px rgba(2, 7, 20, 0.92),
    0 0 40px -20px var(--rr-cta-glow);
}
body.cs-page .cs-cta:focus:not(:focus-visible) { outline: none; }

/* ---- A · PRIMARY CONSULTATION — green into lime, a lime chip ---- */
body.cs-page .cs-cta--commit,
body.cs-page .cs-cta--return,
body.cs-page .cs-cta--invite {
  color: #ffffff;
  --rr-cta-body: linear-gradient(126deg, #17602f 0%, #2a8a3e 36%, #47a63d 68%, #6cbc31 100%);
  --rr-cta-edge: rgba(178, 224, 54, 0.4);
  --rr-cta-edge-lit: rgba(206, 246, 88, 0.82);
  --rr-cta-glow: rgba(126, 204, 62, 0.62);
  --rr-cta-sheen: 0.22;
  --rr-cta-period: 15.2s;
  --rr-chip: linear-gradient(150deg, #e2ff7c 0%, #b4e03a 52%, #86bd1d 100%);
  --rr-chip-ink: #0d2407;
  text-shadow: 0 1px 2px rgba(4, 26, 8, 0.5);
}
body.cs-page .cs-cta--commit { --rr-cta-delay: 1.6s; }
body.cs-page .cs-cta--return { --rr-cta-delay: 4.8s; --rr-cta-period: 17.4s; }
body.cs-page .cs-cta--invite { --rr-cta-delay: 0.9s; --rr-cta-period: 14.2s; --rr-cta-glow: rgba(150, 220, 70, 0.72); }

/* ---- B · SECONDARY BLUEPRINT — navy into royal, a cyan chip ---- */
body.cs-page .cs-cta--consider,
body.cs-page .cs-cta--analysis {
  color: #e2f0ff;
  --rr-cta-body: linear-gradient(126deg, rgba(14, 30, 58, 0.92) 0%, rgba(21, 46, 90, 0.94) 52%, rgba(27, 61, 116, 0.92) 100%);
  --rr-cta-edge: rgba(56, 207, 255, 0.32);
  --rr-cta-edge-lit: rgba(134, 231, 255, 0.72);
  --rr-cta-glow: rgba(42, 126, 226, 0.46);
  --rr-cta-sheen: 0.13;
  --rr-cta-period: 19.6s;
  --rr-chip: linear-gradient(150deg, #9beaff 0%, #38cfff 52%, #189bdd 100%);
  --rr-chip-ink: #04202f;
  border-bottom: 0;
}
body.cs-page .cs-cta--consider { --rr-cta-delay: 6.4s; }
body.cs-page .cs-cta--analysis { --rr-cta-delay: 3.1s; --rr-cta-period: 18.2s; }

/* ---- C · CHECKOUT — the conversion plate, royal with a lime lock ----
   The tallest plate on the page and the only one whose chip is a lock. It
   carries more weight in every direction: taller, wider optical padding,
   a larger label and a deeper floor. */
body.cs-page .cs-cta.cs-cta--structure {
  --rr-cta-r: 14px;
  min-height: 70px;
  padding: 0 20px;
  gap: 17px;
  font-size: 0.9375rem;
  letter-spacing: 0.085em;
  color: #ffffff;
  --rr-cta-body: linear-gradient(126deg, #17379c 0%, #2154c9 44%, #2e6fe6 100%);
  --rr-cta-edge: rgba(130, 200, 255, 0.44);
  --rr-cta-edge-lit: rgba(184, 228, 255, 0.86);
  --rr-cta-glow: rgba(48, 122, 242, 0.66);
  --rr-cta-sheen: 0.2;
  --rr-cta-period: 13.4s;
  --rr-cta-delay: 2.4s;
  --rr-chip: linear-gradient(150deg, #e2ff7c 0%, #b4e03a 52%, #86bd1d 100%);
  --rr-chip-ink: #0d2407;
  text-shadow: 0 1px 2px rgba(4, 14, 44, 0.55);
}
body.cs-page .cs-cta--structure > svg,
body.cs-page .cs-cta--structure > .cs-ico {
  width: 38px;
  height: 38px;
  padding: 10px;
  border-radius: 11px;
}
body.cs-page .cs-cta.cs-cta--structure::after {
  left: 12px;
  right: 12px;
  bottom: -10px;
  height: 24px;
}
/* the legacy breathe on the checkout plate stays retired */
body.cs-page .cs-plan.revealed .cs-plan-cta { animation: none; }

/* ---- D · SEAM — the quiet inline link, a capsule with no sheen ---- */
body.cs-page .cs-cta--seam {
  --rr-cta-r: 11px;
  min-height: 46px;
  padding: 0 13px 0 19px;
  gap: 11px;
  font-size: 0.71875rem;
  letter-spacing: 0.105em;
  color: #cfe6ff;
  --rr-cta-body: linear-gradient(126deg, rgba(17, 33, 60, 0.62) 0%, rgba(20, 40, 72, 0.5) 100%);
  --rr-cta-edge: rgba(126, 176, 226, 0.22);
  --rr-cta-edge-lit: rgba(134, 231, 255, 0.56);
  --rr-cta-glow: rgba(30, 90, 170, 0.22);
  --rr-cta-sheen: 0;
  --rr-chip: rgba(56, 207, 255, 0.14);
  --rr-chip-ink: #8fe3ff;
  border-bottom: 0;
}
/* no sheen band, no cast: the seam sits flat in the page */
body.cs-page .cs-cta--seam > .cb-light { animation: none; background-position: 40% 0; }
body.cs-page .cs-cta--seam > .cb-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.26),
    0 0 0 1px var(--rr-cta-edge),
    0 6px 14px -10px rgba(2, 7, 20, 0.8);
}
body.cs-page .cs-cta--seam > svg,
body.cs-page .cs-cta--seam > .cs-ico {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(56, 207, 255, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  body.cs-page .cs-cta--seam:hover,
  body.cs-page .cs-cta--consider:hover { color: #ffffff; }
  body.cs-page .cs-cta--seam:hover { transform: translateY(-2px); }
  body.cs-page .cs-cta--seam:hover > .cb-face {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 -1px 0 rgba(0, 0, 0, 0.24),
      0 0 0 1px var(--rr-cta-edge-lit),
      0 10px 22px -12px rgba(2, 7, 20, 0.85);
  }
  body.cs-page .cs-cta--seam:hover > svg,
  body.cs-page .cs-cta--seam:hover > .cs-ico {
    background: rgba(56, 207, 255, 0.26);
    box-shadow: inset 0 0 0 1px rgba(56, 207, 255, 0.46);
  }
}

/* ---- TOUCH — no hover exists, so the press carries the feedback ---- */
@media (hover: none) {
  body.cs-page .cs-cta:active > .cb-face {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5),
      inset 0 12px 20px -12px rgba(0, 0, 0, 0.55),
      0 0 0 1.5px var(--rr-cta-edge-lit),
      0 3px 7px -4px rgba(2, 7, 20, 0.75),
      0 0 34px -16px var(--rr-cta-glow);
  }
  body.cs-page .cs-cta:active > svg,
  body.cs-page .cs-cta:active > .cs-ico {
    transform: scale(0.93);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 1px 2px -1px rgba(2, 7, 20, 0.6);
  }
}

/* ---- SPACING AROUND THE PLATES ---- */
body.cs-page .cs-hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin: 0;
  padding: 0;
  text-align: left;
}
/* the wrapper dissolves so both plates are siblings on one row */
body.cs-page .cs-hero-alt { display: contents; font-size: 0; }
body.cs-page .cs-close-alt { margin-top: 24px; }
body.cs-page .cs-next-note { margin-top: 28px; }
body.cs-page .cs-plan-cta { margin-top: 28px; }
body.cs-page .cs-plan-secure { margin-top: 18px; }
body.cs-page .cs-bp-note { margin-top: 22px; }

/* ---- MOBILE — designed, not shrunk -----------------------------------
   Full-width plates, a centred label that is allowed to breathe over two
   lines, and the chip riding the right edge as a constant terminal.
   Enough height to feel substantial under a thumb, never a slab. */
@media (max-width: 760px) {
  body.cs-page .cs-cta {
    width: 100%;
    min-height: 58px;
    padding: 14px 16px;
    gap: 13px;
    line-height: 1.32;
    letter-spacing: 0.085em;
    text-align: center;
  }
  body.cs-page .cs-cta.btn-lg {
    min-height: 62px;
    padding: 14px 16px;
    font-size: 0.84375rem;
  }
  body.cs-page .cs-cta.cs-cta--structure {
    min-height: 66px;
    padding: 14px 16px;
    gap: 15px;
    font-size: 0.875rem;
  }
  body.cs-page .cs-cta--seam {
    width: auto;
    min-height: 46px;
    padding: 11px 15px 11px 18px;
    font-size: 0.6875rem;
  }
  body.cs-page .cs-hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  body.cs-page .cs-cta > svg,
  body.cs-page .cs-cta > .cs-ico { width: 32px; height: 32px; padding: 8px; border-radius: 9px; }
  body.cs-page .cs-cta--structure > svg,
  body.cs-page .cs-cta--structure > .cs-ico { width: 34px; height: 34px; padding: 9px; border-radius: 10px; }
  body.cs-page .cs-cta--seam > svg,
  body.cs-page .cs-cta--seam > .cs-ico { width: 26px; height: 26px; padding: 6px; border-radius: 8px; }
  /* the floor shadow tucks in so full-width plates do not smear */
  body.cs-page .cs-cta:not(.cs-cta--seam)::after { left: 16px; right: 16px; bottom: -7px; height: 17px; }
  body.cs-page .cs-cta.cs-cta--structure::after { left: 18px; right: 18px; height: 19px; }
  body.cs-page .cs-cta--commit::before,
  body.cs-page .cs-cta--return::before,
  body.cs-page .cs-cta--invite::before { inset: -12px -8px -16px -8px; border-radius: 22px; }
}

@media (max-width: 400px) {
  body.cs-page .cs-cta {
    min-height: 56px;
    padding: 13px;
    gap: 11px;
    font-size: 0.78125rem;
    letter-spacing: 0.07em;
  }
  body.cs-page .cs-cta.btn-lg { min-height: 60px; padding: 13px; font-size: 0.8125rem; }
  body.cs-page .cs-cta.cs-cta--structure {
    min-height: 64px;
    padding: 13px;
    font-size: 0.84375rem;
    letter-spacing: 0.06em;
  }
  body.cs-page .cs-cta--seam {
    min-height: 44px;
    padding: 10px 12px 10px 15px;
    font-size: 0.65625rem;
    letter-spacing: 0.08em;
  }
  body.cs-page .cs-cta > svg,
  body.cs-page .cs-cta > .cs-ico { width: 30px; height: 30px; padding: 8px; }
  body.cs-page .cs-cta--structure > svg,
  body.cs-page .cs-cta--structure > .cs-ico { width: 32px; height: 32px; padding: 8px; }
  body.cs-page .cs-cta--seam > svg,
  body.cs-page .cs-cta--seam > .cs-ico { width: 26px; height: 26px; padding: 6px; border-radius: 8px; }
  body.cs-page .cs-cta:not(.cs-cta--seam)::after { left: 14px; right: 14px; }
}

/* ============================================================
   THE HERO — "we are looking beyond the score"
   Three translucent bureau sheets stack and fan up behind Steven, an
   analysis light passes forward through them, and a reading path runs
   from the goal to the next move in the panel below his shoulder.
   "From goal to strategy" crowns the composition and drops a ramp line
   straight into that reading path, so the sentence that names the page
   is physically attached to the thing it names.

   The headline is ONE statement at ONE size. Every inner span is
   font-size: 1em off the single container clamp; "your goal." is carried
   by colour and light only, never by being bigger.
   ============================================================ */
body.cs-page .cs-hero {
  position: relative;
  overflow: clip;
  padding: clamp(140px, 15vh, 196px) 0 clamp(92px, 8.5vw, 136px);
  background: var(--rr-void);
}
body.cs-page .cs-hero-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 56% at 18% 22%, rgba(26, 64, 138, 0.56) 0%, transparent 70%),
    radial-gradient(44% 50% at 82% 30%, rgba(14, 82, 116, 0.38) 0%, transparent 72%),
    radial-gradient(56% 46% at 30% 96%, rgba(70, 128, 44, 0.16) 0%, transparent 72%),
    linear-gradient(180deg, #040914 0%, #071226 52%, #050b18 100%);
}
body.cs-page .cs-hero-atmos .cs-key,
body.cs-page .cs-hero-atmos .cs-pool { display: none; }
/* a slow drift in the air, so the room is alive before anything is hovered */
body.cs-page .cs-hero-atmos::after {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(32% 38% at 28% 36%, rgba(56, 207, 255, 0.13) 0%, transparent 68%),
    radial-gradient(28% 34% at 74% 70%, rgba(175, 221, 44, 0.10) 0%, transparent 70%);
  animation: rrHeroDrift 28s var(--rr-slow) infinite;
}
@keyframes rrHeroDrift {
  0%, 100% { transform: translate3d(-1.6%, 0.9%, 0) scale(1); opacity: 0.78; }
  50% { transform: translate3d(1.9%, -1.3%, 0) scale(1.06); opacity: 1; }
}

/* ---- THE COLUMNS ---- */
body.cs-page .cs-hero-grid {
  align-items: center;
  gap: clamp(44px, 5vw, 78px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}
/* the measure is held short so the snapshot can reach back under the
   headline without ever touching a line of type */
body.cs-page .cs-hero-copy { max-width: 560px; }
body.cs-page .cs-hero-eyebrow { margin-bottom: clamp(20px, 2vw, 26px); }

/* ---- THE STATEMENT ---- */
body.cs-page .cs-hero-title {
  position: relative;
  margin: 0 0 clamp(28px, 2.8vw, 38px);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rr-ink);
}
body.cs-page .cs-hero-title::before,
body.cs-page .cs-hero-title::after { content: none; display: none; }
body.cs-page .cs-hero-title .cs-hl-1,
body.cs-page .cs-hero-title .cs-hl-2 { display: block; font-size: 1em; line-height: 1.05; }
body.cs-page .cs-hero-title .cs-hl-2 { margin-top: 0.36em; }
body.cs-page .cs-hero-title .cs-hl-seg { display: block; font-size: 1em; }
body.cs-page .cs-hero-title .cs-hl-1 .cs-hl-seg:first-child,
body.cs-page .cs-hero-title .cs-hl-2 .cs-hl-seg:first-child { font-size: 1em; color: #c2d4ed; }
body.cs-page .cs-hero-title .cs-hl-score { font-style: italic; color: #8ba1c1; }
body.cs-page .cs-hero-title .cs-hl-2 .cs-hl-seg:first-child { color: #ffffff; }
/* background-clip:text — the box carries a descender allowance and the
   allowance is cancelled here, never by a later plain margin-bottom */
body.cs-page .cs-hero-title .cs-hl-goal {
  font-size: 1em;
  line-height: 1.05;
  margin: 0;
  padding: 0 0 0.24em;
  margin-bottom: calc(0px - 0.24em);
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(96deg, var(--rr-analysis) 0%, var(--rr-bridge) 30%, var(--rr-priority) 58%, var(--rr-plan) 84%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
body.cs-page .cs-hero-title .cs-hl-goal::before,
body.cs-page .cs-hero-title .cs-hl-goal::after { content: none; display: none; }
body.cs-page .cs-hero-title .cs-hl-goal em {
  font-style: italic;
  font-size: 1em;
  background: none;
  text-shadow: none;
  animation: rrGoalLight 14.2s var(--rr-slow) 2.2s infinite;
}
@keyframes rrGoalLight {
  0%, 46% { filter: brightness(1) saturate(1); }
  62% { filter: brightness(1.24) saturate(1.12); }
  80%, 100% { filter: brightness(1) saturate(1); }
}
/* the statement arrives one clause at a time, then holds */
body.cs-page .cs-hero-title.revealed .cs-hl-seg {
  animation: rrClauseIn 0.74s var(--rr-ease) backwards;
}
body.cs-page .cs-hero-title.revealed .cs-hl-1 .cs-hl-seg:nth-child(1) { animation-delay: 0.04s; }
body.cs-page .cs-hero-title.revealed .cs-hl-1 .cs-hl-seg:nth-child(2) { animation-delay: 0.15s; }
body.cs-page .cs-hero-title.revealed .cs-hl-2 .cs-hl-seg:nth-child(1) { animation-delay: 0.28s; }
body.cs-page .cs-hero-title.revealed .cs-hl-2 .cs-hl-seg:nth-child(2) { animation-delay: 0.41s; }
@keyframes rrClauseIn {
  from { opacity: 0.02; transform: translate3d(0, 0.22em, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* the base hides .cs-hero-sub on desktop and shows .cs-lede instead; this
   page now leads with the short version at every width */
body.cs-page .cs-hero-sub {
  display: block;
  max-width: 44ch;
  margin: 0 0 clamp(34px, 3.6vw, 48px);
  font-size: clamp(1.0625rem, 0.42vw + 0.94rem, 1.25rem);
  line-height: 1.66;
  color: var(--rr-body);
  text-wrap: pretty;
}
body.cs-page .cs-hero-sub-lead { color: #ffffff; font-weight: 600; }
body.cs-page .cs-lede { display: none; }

/* ---- THE VISUAL: the report stack, Steven, the reading path ----
   padding-top reserves the band the sheet stack rises into, so the fan
   is real space in the composition rather than something escaping it. */
body.cs-page .cs-hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(58px, 6.2vw, 92px) 0 0;
}
/* the strategy end of the ramp: a low lime pool under the reading path */
body.cs-page .cs-hero-visual::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -22%;
  right: 34%;
  bottom: -14%;
  height: 58%;
  border-radius: 48% 52% 46% 54%;
  background:
    radial-gradient(56% 56% at 44% 62%, rgba(143, 217, 106, 0.18) 0%, transparent 72%),
    radial-gradient(60% 50% at 62% 34%, rgba(56, 207, 255, 0.14) 0%, transparent 74%);
  filter: blur(36px);
  pointer-events: none;
}
/* the old single fake stack is retired; the three sheets below are real */
body.cs-page .cs-hero-visual::after { content: none; display: none; }

/* ---- STEVEN — the image itself is untouched; only the light around it ---- */
body.cs-page .cs-portrait {
  grid-area: 1 / 1;
  justify-self: end;
  /* the reading path now runs past the foot of the photograph, so the row is
     taller than the photograph — without this the stretch default would
     override the aspect ratio and re-crop the image */
  align-self: start;
  position: relative;
  z-index: 2;
  width: min(100%, 452px);
  margin: 0;
  aspect-ratio: 5 / 6.2;
  overflow: visible;
  border-radius: var(--rr-r-lg);
  box-shadow: none;
}
body.cs-page .cs-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 2%;
  border-radius: var(--rr-r-lg);
  box-shadow:
    0 0 0 1px rgba(150, 196, 240, 0.22),
    0 48px 100px -46px rgba(2, 8, 22, 0.98),
    0 0 84px -38px var(--rr-glow-sky);
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
}
/* the halo the whole stack sits in */
body.cs-page .cs-portrait::before {
  content: '';
  position: absolute;
  z-index: -4;
  inset: -26% -18% -6% 6%;
  border-radius: 44% 50% 42% 48%;
  background: radial-gradient(54% 54% at 62% 40%, rgba(56, 207, 255, 0.22) 0%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}
/* a lit edge on the frame, brightest where the sheets meet the photograph.
   Edge light only — nothing lies across the photograph itself. */
body.cs-page .cs-portrait::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  /* the base draws a masked lime/cyan corner rule here — unwound, not layered */
  border: 0;
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: var(--rr-r-lg);
  background: none;
  box-shadow:
    inset 0 1.5px 0 rgba(214, 242, 255, 0.36),
    inset -1.5px 0 0 rgba(160, 220, 255, 0.2),
    inset 0 -1px 0 rgba(150, 196, 240, 0.1);
  pointer-events: none;
}

/* ---- THE REPORT STACK — the signature motif ----
   Three genuinely separated sheets: each one steps further up and right,
   turns a little further, sits a little softer, and drifts at its own
   rate. An analysis light crosses them back-to-front on a long cycle. */
body.cs-page .cs-por-cut,
body.cs-page .cs-por-sill,
body.cs-page .cs-por-cast {
  display: block;
  position: absolute;
  border-radius: var(--rr-r-lg);
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(150, 220, 255, 0) 40%,
      rgba(150, 220, 255, 0.20) 46.5%,
      rgba(216, 246, 255, 0.40) 50%,
      rgba(150, 220, 255, 0.18) 53.5%,
      rgba(150, 220, 255, 0) 60%),
    repeating-linear-gradient(180deg, rgba(150, 196, 240, 0.11) 0 1px, rgba(150, 196, 240, 0) 1px 16px),
    linear-gradient(164deg, rgba(38, 74, 126, 0.58) 0%, rgba(20, 40, 74, 0.40) 52%, rgba(14, 28, 54, 0.26) 100%);
  background-size: 300% 100%, auto, auto;
  background-position: 100% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  transform: rotate(var(--rr-tilt));
  animation:
    rrSheetDrift var(--rr-sheet-dur, 24s) var(--rr-slow) infinite,
    rrSheetScan 17s var(--rr-slow) var(--rr-scan-wait, 9s) infinite;
}
body.cs-page .cs-por-cut {
  z-index: -1;
  left: 34%;
  right: -6%;
  top: -9%;
  height: 56%;
  --rr-tilt: -1.4deg;
  --rr-dx: -4px;
  --rr-dy: -5px;
  --rr-sheet-dur: 21s;
  --rr-scan-wait: 10.6s;
  box-shadow:
    0 0 0 1px rgba(162, 206, 248, 0.26),
    inset 0 1px 0 rgba(206, 238, 255, 0.20),
    0 26px 52px -28px rgba(2, 8, 22, 0.92);
}
body.cs-page .cs-por-sill {
  z-index: -2;
  left: 40%;
  right: -12%;
  top: -14.5%;
  height: 54%;
  opacity: 0.8;
  filter: blur(0.7px);
  --rr-tilt: -3.2deg;
  --rr-dx: -7px;
  --rr-dy: -9px;
  --rr-sheet-dur: 26.5s;
  --rr-scan-wait: 9.7s;
  box-shadow:
    0 0 0 1px rgba(150, 196, 240, 0.17),
    inset 0 1px 0 rgba(198, 232, 255, 0.13),
    0 24px 48px -30px rgba(2, 8, 22, 0.9);
}
body.cs-page .cs-por-cast {
  z-index: -3;
  left: 46%;
  right: -18%;
  top: -20%;
  height: 52%;
  opacity: 0.58;
  filter: blur(1.7px);
  --rr-tilt: -5deg;
  --rr-dx: -11px;
  --rr-dy: -14px;
  --rr-sheet-dur: 31s;
  --rr-scan-wait: 8.8s;
  box-shadow:
    0 0 0 1px rgba(150, 196, 240, 0.12),
    0 22px 44px -32px rgba(2, 8, 22, 0.88);
}
/* one quiet data highlight, on the front sheet only, on a long cycle */
body.cs-page .cs-por-cut::after {
  content: '';
  position: absolute;
  left: 56%;
  right: 7%;
  top: 11%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(180, 224, 58, 0) 0%, rgba(180, 224, 58, 0.72) 38%, rgba(180, 224, 58, 0) 100%);
  opacity: 0;
  animation: rrDataFlag 23s var(--rr-slow) 6.4s infinite;
}
@keyframes rrSheetDrift {
  0%, 100% { transform: rotate(var(--rr-tilt)) translate3d(0, 0, 0); }
  50% { transform: rotate(calc(var(--rr-tilt) * 1.22)) translate3d(var(--rr-dx, -6px), var(--rr-dy, -8px), 0); }
}
@keyframes rrSheetScan {
  0%, 32% { background-position: 100% 0, 0 0, 0 0; }
  68%, 100% { background-position: 0% 0, 0 0, 0 0; }
}
@keyframes rrDataFlag {
  0%, 4% { opacity: 0; }
  9% { opacity: 1; }
  15% { opacity: 0.85; }
  22%, 100% { opacity: 0; }
}
/* on reveal the analysis light runs back-to-front through the stack once,
   immediately, instead of waiting out its resting cycle */
body.cs-page .cs-hero-visual.revealed .cs-por-cast { animation-delay: 0s, 0.4s; }
body.cs-page .cs-hero-visual.revealed .cs-por-sill { animation-delay: 0s, 1s; }
body.cs-page .cs-hero-visual.revealed .cs-por-cut { animation-delay: 0s, 1.6s; }

/* ---- "FROM GOAL TO STRATEGY" — the sentence that names the page ----
   It crowns the composition on the snapshot's own left edge, and a ramp
   line drops from it straight into the reading path below. Unboxed,
   serif, italic, in the journey gradient. */
body.cs-page .cs-bridge {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  position: relative;
  z-index: 4;
  display: block;
  width: auto;
  height: auto;
  margin: -58px 0 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  --rr-run: clamp(100px, 14.5vw, 208px);
}
body.cs-page .cs-bridge .cs-bridge-path { display: none; }
body.cs-page .cs-bridge-label {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 calc(0px - 0.24em);
  padding: 0 0 0.24em;
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 1.85vw, 1.9375rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.18;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(96deg, var(--rr-analysis) 0%, var(--rr-bridge) 46%, var(--rr-plan) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
body.cs-page .cs-bridge-label::before,
body.cs-page .cs-bridge-label::after { content: none; }
/* the ramp line, landing exactly on the reading path's rail
   (.cs-snap padding-left 22px + rail left 8px = 30px, and .cs-bridge shares
   the snapshot's left edge, so the two are the same vertical) */
body.cs-page .cs-bridge::after {
  content: '';
  position: absolute;
  left: 30px;
  top: calc(100% + 14px);
  width: 2px;
  height: clamp(120px, 17vw, 240px);
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(56, 207, 255, 0.7) 0%,
    rgba(95, 211, 196, 0.5) 46%,
    rgba(180, 224, 58, 0.24) 78%,
    rgba(180, 224, 58, 0) 100%);
  pointer-events: none;
}
/* and one light that walks it, so the phrase visibly enters the path */
body.cs-page .cs-bridge::before {
  content: '';
  position: absolute;
  left: 26px;
  top: calc(100% + 16px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #dff7ff 0%, var(--rr-analysis) 42%, rgba(56, 207, 255, 0) 72%);
  opacity: 0;
  animation: rrBridgeRun 11.4s var(--rr-slow) 3.4s infinite;
  pointer-events: none;
}
@keyframes rrBridgeRun {
  0%, 6% { opacity: 0; transform: translate3d(0, 0, 0); }
  14% { opacity: 1; }
  46% { opacity: 0.9; }
  58%, 100% { opacity: 0; transform: translate3d(0, var(--rr-run), 0); }
}
body.cs-page .cs-hero-visual.revealed .cs-bridge::before { animation-delay: 1.9s; }

/* ---- THE STRATEGY SNAPSHOT — a reading path, never a dashboard ---- */
/* Placed by a top offset measured in the column's own width, so the panel
   always starts well BELOW Steven's chin no matter how the column resizes,
   and hangs past the foot of the photograph instead of lying across it. */
body.cs-page .cs-snap {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  position: relative;
  z-index: 3;
  width: min(352px, 68%);
  margin: 44% 0 0 0;
  padding: 20px 22px 18px;
  border-radius: var(--rr-r);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(166deg, rgba(14, 29, 55, 0.95) 0%, rgba(9, 19, 38, 0.97) 100%);
  box-shadow:
    0 0 0 1px rgba(150, 196, 240, 0.22),
    0 42px 86px -36px rgba(2, 8, 22, 0.97),
    0 0 72px -30px var(--rr-glow-sky);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.6s var(--rr-ease), box-shadow 0.6s var(--rr-ease);
}
body.cs-page .cs-snap:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(178, 221, 255, 0.34),
    0 52px 96px -36px rgba(2, 8, 22, 0.97),
    0 0 84px -26px var(--rr-glow-sky);
}
/* the ramp, stated once across the top edge: sky in, lime out */
body.cs-page .cs-snap::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(79, 184, 245, 0) 0%,
    var(--rr-analysis) 26%,
    var(--rr-bridge) 58%,
    var(--rr-plan) 86%,
    rgba(180, 224, 58, 0) 100%);
  pointer-events: none;
}
/* the strategy end resolves into light at the foot of the panel */
body.cs-page .cs-snap::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  border-radius: 0 0 var(--rr-r) var(--rr-r);
  background: radial-gradient(70% 90% at 26% 100%, rgba(180, 224, 58, 0.11) 0%, transparent 74%);
  pointer-events: none;
}
body.cs-page .cs-snap > * { position: relative; z-index: 1; }

body.cs-page .cs-snap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body.cs-page .cs-snap-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #a9dfff;
}
body.cs-page .cs-snap-tag {
  padding: 5px 11px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(var(--acc-rgb, 56, 207, 255), 0.13);
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.34);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #9fe4ff;
}

body.cs-page .cs-snap-path {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the path itself: one continuous ramp, fading out at the plan end so the
   last node is the terminus rather than a hard stop */
body.cs-page .cs-snap-path::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--rr-profile) 0%,
    var(--rr-analysis) 22%,
    var(--rr-bridge) 50%,
    var(--rr-priority) 72%,
    var(--rr-plan) 88%,
    rgba(180, 224, 58, 0) 100%);
  opacity: 0.55;
}
/* the strategy light, running the ramp sky -> lime on a long cycle */
body.cs-page .cs-snap-path::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  width: 6px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(180deg,
    rgba(56, 207, 255, 0) 0%,
    var(--rr-analysis) 26%,
    #e4faff 50%,
    var(--rr-priority) 74%,
    rgba(180, 224, 58, 0) 100%);
  filter: blur(2px);
  opacity: 0;
  animation: rrPathRun 13.6s var(--rr-slow) 2.6s infinite;
  pointer-events: none;
}
@keyframes rrPathRun {
  0%, 3% { top: -6%; opacity: 0; }
  11% { opacity: 1; }
  44% { opacity: 0.92; }
  56%, 100% { top: 92%; opacity: 0; }
}

body.cs-page .cs-snap-path li {
  position: relative;
  padding: 9px 2px 9px 30px;
  border: 0;
  box-shadow: none;
}
/* the node — each stage has its own state, and the stages gain presence
   as the reading moves from an open question to a decided move */
body.cs-page .cs-snap-path li::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  left: 4px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--rr-node, var(--rr-analysis));
  box-shadow: 0 0 0 3px rgba(5, 11, 24, 0.92), 0 0 16px -2px var(--rr-node, var(--rr-analysis));
}
body.cs-page .cs-snap-path li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  bottom: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rr-node, var(--rr-analysis)) 0%, transparent 70%);
  opacity: 0;
  animation: rrPathStep 18.6s var(--rr-slow) infinite;
}
@keyframes rrPathStep {
  0%, 2% { opacity: 0; transform: scale(0.6); }
  6% { opacity: 1; transform: scale(1.15); }
  16% { opacity: 0.4; transform: scale(1); }
  26%, 100% { opacity: 0; transform: scale(0.6); }
}
body.cs-page .cs-snap-path li[data-step="goal"] { --rr-node: var(--rr-plan); }
body.cs-page .cs-snap-path li[data-step="block"] { --rr-node: #e8b04a; }
body.cs-page .cs-snap-path li[data-step="review"] { --rr-node: var(--rr-analysis); }
body.cs-page .cs-snap-path li[data-step="priority"] { --rr-node: var(--rr-priority); }
body.cs-page .cs-snap-path li[data-step="next"] { --rr-node: var(--rr-plan); }
/* the goal is the destination: a filled node inside its own ring */
body.cs-page .cs-snap-path li[data-step="goal"]::before {
  box-shadow:
    0 0 0 3px rgba(5, 11, 24, 0.92),
    0 0 0 4.5px rgba(180, 224, 58, 0.42),
    0 0 20px -2px var(--rr-node);
}
/* what is standing in the way, and what the bureaus say, are still open */
body.cs-page .cs-snap-path li[data-step="block"]::before,
body.cs-page .cs-snap-path li[data-step="review"]::before {
  background: #0a1526;
  border: 2px solid var(--rr-node);
  box-shadow: 0 0 0 3px rgba(5, 11, 24, 0.92), 0 0 14px -3px var(--rr-node);
}
body.cs-page .cs-snap-path li[data-step="review"]::before { border-style: dashed; }
/* and the analysis resolves: the last stage steps forward onto its own
   quiet lit ground, with the only weighted node on the path */
body.cs-page .cs-snap-path li[data-step="next"] {
  margin: 6px -12px -2px -12px;
  padding: 12px 14px 12px 42px;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(100deg, rgba(180, 224, 58, 0.11) 0%, rgba(95, 211, 196, 0.05) 56%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 0 0 1px rgba(180, 224, 58, 0.18), 0 14px 30px -22px rgba(2, 8, 22, 0.9);
}
body.cs-page .cs-snap-path li[data-step="next"]::before {
  left: 16px;
  top: 18px;
  width: 13px;
  height: 13px;
  box-shadow:
    0 0 0 3px rgba(5, 11, 24, 0.92),
    0 0 0 5px rgba(180, 224, 58, 0.34),
    0 0 26px -1px var(--rr-node);
}
body.cs-page .cs-snap-path li[data-step="next"]::after { left: 12px; top: 14px; width: 21px; height: 21px; }
body.cs-page .cs-snap-path li:nth-child(1)::after { animation-delay: 0.4s; }
body.cs-page .cs-snap-path li:nth-child(2)::after { animation-delay: 1.9s; }
body.cs-page .cs-snap-path li:nth-child(3)::after { animation-delay: 3.4s; }
body.cs-page .cs-snap-path li:nth-child(4)::after { animation-delay: 4.9s; }
body.cs-page .cs-snap-path li:nth-child(5)::after { animation-delay: 6.4s; }
/* the stages arrive in reading order when the visual reveals */
body.cs-page .cs-hero-visual.revealed .cs-snap-path li {
  animation: rrStageIn 0.62s var(--rr-ease) backwards;
}
body.cs-page .cs-hero-visual.revealed .cs-snap-path li:nth-child(1) { animation-delay: 0.36s; }
body.cs-page .cs-hero-visual.revealed .cs-snap-path li:nth-child(2) { animation-delay: 0.47s; }
body.cs-page .cs-hero-visual.revealed .cs-snap-path li:nth-child(3) { animation-delay: 0.58s; }
body.cs-page .cs-hero-visual.revealed .cs-snap-path li:nth-child(4) { animation-delay: 0.69s; }
body.cs-page .cs-hero-visual.revealed .cs-snap-path li:nth-child(5) { animation-delay: 0.82s; }
@keyframes rrStageIn {
  from { opacity: 0.05; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

body.cs-page .cs-snap-k {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rr-node, var(--rr-analysis));
}
body.cs-page .cs-snap-v {
  display: block;
  margin-top: 3px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.38;
  color: #e6f1ff;
}
body.cs-page .cs-snap-path li[data-step="next"] .cs-snap-v {
  color: #ffffff;
  text-shadow: 0 0 26px rgba(180, 224, 58, 0.32);
}
body.cs-page .cs-snap-foot {
  margin-top: 14px;
  padding-top: 12px;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(150, 196, 240, 0.14);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--rr-quiet);
}

/* ---- narrower desktop: the fan tightens, the label shortens its run ---- */
@media (max-width: 1180px) {
  body.cs-page .cs-hero-title { font-size: clamp(2.375rem, 5.1vw, 3.75rem); }
  body.cs-page .cs-portrait { width: min(100%, 412px); }
  body.cs-page .cs-snap { width: min(322px, 72%); margin-top: 46%; }
  body.cs-page .cs-bridge { margin-top: -52px; --rr-run: clamp(92px, 12vw, 150px); }
  body.cs-page .cs-bridge::after { height: clamp(110px, 14.5vw, 182px); }
  body.cs-page .cs-bridge-label { font-size: clamp(1.1875rem, 2.05vw, 1.5rem); }
}
@media (max-width: 1080px) {
  /* the column is narrow enough here that the label and the fan would meet */
  body.cs-page .cs-portrait { width: min(100%, 364px); }
  body.cs-page .cs-snap { width: min(300px, 76%); margin-top: 48%; }
  body.cs-page .cs-bridge-label { font-size: clamp(1.0625rem, 1.95vw, 1.375rem); }
  body.cs-page .cs-snap-v { font-size: 0.8125rem; }
  body.cs-page .cs-snap-title { font-size: 0.6875rem; letter-spacing: 0.14em; }
}

/* ---- tablet: one wide stage — the path beside the photograph, the fan
        still climbing up and to the right behind it ---- */
@media (min-width: 761px) and (max-width: 980px) {
  body.cs-page .cs-hero-sub { max-width: 54ch; }
  body.cs-page .cs-hero-visual {
    max-width: none;
    margin-top: clamp(30px, 5vw, 44px);
    padding-top: clamp(54px, 7.4vw, 80px);
  }
  body.cs-page .cs-portrait { width: min(56%, 452px); }
  body.cs-page .cs-snap { width: min(58%, 372px); margin: 9% 0 0 0; }
  body.cs-page .cs-bridge { margin: -50px 0 0 0; --rr-run: clamp(48px, 6.4vw, 62px); }
  body.cs-page .cs-bridge::after { height: clamp(56px, 7.4vw, 74px); }
  body.cs-page .cs-snap-v { font-size: 0.875rem; }
  body.cs-page .cs-snap-title { font-size: 0.75rem; letter-spacing: 0.17em; }
}
@media (max-width: 980px) {
  /* THE COLLAPSE. The base stacks the hero into one column at exactly this
     width, using both a single track AND grid-template-areas: none. The
     unconditional two-column rule at the top of this file outranks it on
     specificity, so the stack has to be restated here — and the named areas
     have to go with it, or "visual" lands in an implicit second column and
     squeezes the copy track to zero. */
  body.cs-page .cs-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: clamp(30px, 5vw, 52px);
  }
  body.cs-page .cs-hero-grid > *,
  body.cs-page .cs-hero-copy > * { grid-area: auto; grid-column: 1; }
  body.cs-page .cs-hero-copy { max-width: none; }
  /* the base gives .cs-lede an order but not .cs-hero-sub, which this page
     leads with — without this the proposition jumps above the eyebrow */
  body.cs-page .cs-hero-sub { order: 3; }
}

/* ============================================================
   PHONE — composed for the phone, not compressed from the desktop.
   Centred: the statement, then the sentence that names the page, then
   the report stack, Steven, and the reading path as one connected
   object, then the two actions.
   ============================================================ */
@media (max-width: 760px) {
  body.cs-page .cs-hero { padding: 124px 0 clamp(64px, 13vw, 88px); }
  /* nothing on a phone reads below 12px */
  body.cs-page .cs-snap-foot { font-size: 0.75rem; line-height: 1.55; }
  body.cs-page .cs-hero-copy { max-width: none; text-align: center; }
  body.cs-page .cs-hero-eyebrow { margin-bottom: clamp(18px, 5vw, 24px); }

  body.cs-page .cs-hero-title {
    font-size: clamp(2.25rem, 10.6vw, 2.9375rem);
    line-height: 1.04;
    text-align: center;
    margin-bottom: clamp(24px, 6.5vw, 32px);
  }
  body.cs-page .cs-hero-title::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    inset: -14% -10% -12%;
    background:
      radial-gradient(58% 42% at 50% 78%, rgba(175, 221, 44, 0.13) 0%, transparent 72%),
      radial-gradient(70% 48% at 50% 22%, rgba(56, 207, 255, 0.11) 0%, transparent 72%);
    pointer-events: none;
  }
  body.cs-page .cs-hero-title .cs-hl-1,
  body.cs-page .cs-hero-title .cs-hl-2 { line-height: 1.04; }
  body.cs-page .cs-hero-title .cs-hl-2 { margin-top: 0; }
  /* the turn from score to goal, stated as a ramp rule */
  body.cs-page .cs-hero-title .cs-hl-2::before {
    content: '';
    display: block;
    width: 96px;
    height: 2px;
    margin: 0.42em auto 0.38em;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(56, 207, 255, 0), var(--rr-analysis), var(--rr-plan), rgba(180, 224, 58, 0));
  }
  body.cs-page .cs-hero-sub {
    order: 3;
    max-width: 36ch;
    margin: 0 auto clamp(30px, 8vw, 40px);
    font-size: 1.0625rem;
    line-height: 1.62;
    text-align: center;
  }

  /* the visual becomes one vertical object: label -> stack -> photograph
     -> reading path, with the ramp line leading into it */
  body.cs-page .cs-hero-visual {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    padding-top: 0;
    margin: 0 0 clamp(34px, 9vw, 46px);
  }
  body.cs-page .cs-hero-visual::before {
    left: -10%;
    right: -10%;
    bottom: -8%;
    height: 46%;
  }
  body.cs-page .cs-bridge {
    order: 0;
    grid-area: auto;
    align-self: auto;
    justify-self: center;
    /* this gap IS the band the report stack rises into — it is sized to clear
       the tallest sheet at 430 / 400 / 390 / 360 */
    margin: 0 0 clamp(66px, 17.5vw, 86px);
    text-align: center;
    --rr-run: clamp(28px, 7vw, 38px);
  }
  body.cs-page .cs-bridge-label {
    text-align: center;
    font-size: clamp(1.1875rem, 5.6vw, 1.5rem);
    letter-spacing: 0.01em;
  }
  body.cs-page .cs-bridge::after {
    left: calc(50% - 1px);
    top: calc(100% + 13px);
    height: clamp(32px, 8.5vw, 44px);
  }
  body.cs-page .cs-bridge::before { left: calc(50% - 5px); top: calc(100% + 15px); }

  body.cs-page .cs-portrait {
    order: 1;
    grid-area: auto;
    justify-self: center;
    width: min(92%, 372px);
    aspect-ratio: 1 / 1.16;
    margin: 0;
  }
  body.cs-page .cs-portrait img { object-position: 54% 2%; }
  body.cs-page .cs-portrait::before { inset: -20% -10% -4% -10%; }
  /* the fan reads across the top of the photograph, wide but quiet */
  body.cs-page .cs-por-cut { left: 5%; right: 5%; top: -8%; height: 40%; --rr-tilt: -1.1deg; --rr-dx: -3px; --rr-dy: -4px; }
  body.cs-page .cs-por-sill { left: 9%; right: 1%; top: -12.5%; height: 38%; --rr-tilt: -2.6deg; --rr-dx: -5px; --rr-dy: -7px; }
  body.cs-page .cs-por-cast { left: 13%; right: -3%; top: -17%; height: 36%; --rr-tilt: -4.2deg; --rr-dx: -8px; --rr-dy: -10px; }
  body.cs-page .cs-por-cut::after { left: 52%; right: 8%; top: 13%; }

  /* the reading path comes forward: wider than the photograph, lifted off it */
  body.cs-page .cs-snap {
    order: 2;
    grid-area: auto;
    position: relative;
    align-self: auto;
    justify-self: stretch;
    width: 100%;
    margin: clamp(-46px, -11vw, -34px) 0 0;
    padding: 20px 20px 18px;
    z-index: 5;
    box-shadow:
      0 0 0 1px rgba(150, 196, 240, 0.24),
      0 34px 64px -28px rgba(2, 8, 22, 0.97),
      0 0 60px -26px var(--rr-glow-sky);
  }
  body.cs-page .cs-snap:hover { transform: none; }
  body.cs-page .cs-snap-title { font-size: 0.6875rem; letter-spacing: 0.14em; }
  body.cs-page .cs-snap-path li { padding: 9px 2px 9px 30px; }
  body.cs-page .cs-snap-v { font-size: 0.9375rem; }
  body.cs-page .cs-snap-foot { font-size: 0.6875rem; }
}

@media (max-width: 400px) {
  body.cs-page .cs-hero { padding-top: 116px; }
  body.cs-page .cs-hero-title { font-size: clamp(2.125rem, 10.8vw, 2.625rem); }
  body.cs-page .cs-hero-title .cs-hl-2::before { width: 80px; }
  body.cs-page .cs-hero-sub { max-width: 33ch; font-size: 1rem; }
  body.cs-page .cs-bridge-label { font-size: clamp(1.0625rem, 5.8vw, 1.25rem); }
  body.cs-page .cs-portrait { width: min(94%, 320px); aspect-ratio: 1 / 1.14; }
  body.cs-page .cs-snap { padding: 18px 16px 16px; margin-top: -32px; }
  body.cs-page .cs-snap-path li { padding-left: 28px; }
  body.cs-page .cs-snap-path li[data-step="next"] { padding: 11px 12px 11px 38px; margin-inline: -10px; }
  body.cs-page .cs-snap-path li[data-step="next"]::before { left: 14px; }
  body.cs-page .cs-snap-path li[data-step="next"]::after { left: 10px; }
  body.cs-page .cs-snap-v { font-size: 0.875rem; }
  body.cs-page .cs-snap-foot { font-size: 0.625rem; }
}

/* ============================================================
   THE METHOD — a journey that resolves, 01 to 06
   Not six boxes. One lit channel runs down the sequence carrying the page's
   ramp (profile blue at 01, plan lime at 06). Each stage hangs off that
   channel: a dimensional disc seated ON the rail, a coloured title that
   could never be mistaken for body copy, and quiet supporting text.

   Three mechanisms make it cinematic rather than decorative:
     · the RAIL is three layers — an unlit trough, a per-phase CHARGE that
       fills downward as the reader arrives, and one travelling signal.
     · CONNECTORS carry a glint down the segment between each pair of discs,
       staggered 01→05, so the eye is always being pulled downward.
     · each stage ARRIVES with its own motion. Six meanings, six motions:
       anchoring settles, auditing scans, ordering sequences, pressure eases,
       foundation builds, course corrects.
   Depth alternates near/far across the six, while LIGHT grows monotonically
   from 01 to 06 (--rr-adv) so the run has rhythm and progression at once.
   ============================================================ */

/* ---- THE CHANNEL: one set of numbers everything else is derived from ---- */
body.cs-page .cs-moves {
  position: relative;
  /* the channel has to be wide enough that the largest disc never hangs off
     the left edge of .cs-moves: --rr-rail-x >= (disc / 2) - (rail-w / 2) */
  --rr-gutter: clamp(72px, 6.2vw, 100px); /* the left channel */
  --rr-rail-x: clamp(29px, 2.7vw, 38px);  /* rail's left edge inside it */
  --rr-rail-w: 3px;
  --rr-sig-w: 13px;
  --rr-disc-base: 56px;
  --rr-stage-gap: clamp(38px, 3.8vw, 62px);
  --rr-phase-gap: clamp(54px, 5.6vw, 92px);
  /* the per-stage pool of light, kept in variables so the loop phase's
     overrides and the phone layout stay in step */
  --rr-pool-l: -40px;
  --rr-pool-r: 10%;
  --rr-pool-t: -26px;
  --rr-pool-b: -18px;
  padding-left: var(--rr-gutter);
}

/* the trough — the path before it is lit. Fades in and out at the ends so
   the channel resolves rather than being chopped. */
body.cs-page .cs-moves::before {
  content: '';
  position: absolute;
  left: var(--rr-rail-x);
  top: 4px;
  bottom: 20px;
  width: var(--rr-rail-w);
  border-radius: var(--rr-r-pill);
  background: linear-gradient(180deg,
    rgba(79,184,245,0) 0%, var(--rr-profile) 4%, var(--rr-analysis) 24%,
    var(--rr-bridge) 50%, var(--rr-priority) 76%, var(--rr-plan) 95%,
    rgba(180,224,58,0) 100%);
  opacity: 0.3;
  box-shadow: inset 0 0 0 1px rgba(3, 10, 24, 0.55);
  pointer-events: none;
}

/* the travelling signal — one slow pass, then a beat of rest. Driven by
   background-position so the travel is a share of the real rail height and
   never stops two-thirds of the way down. */
body.cs-page .cs-moves::after {
  content: '';
  position: absolute;
  left: calc(var(--rr-rail-x) + var(--rr-rail-w) / 2 - var(--rr-sig-w) / 2);
  top: 4px;
  bottom: 20px;
  width: var(--rr-sig-w);
  /* the base sets height: 130px on this same pseudo-element; without an
     explicit reset that caps the signal and `bottom` is ignored, so the pass
     would again be a fixed distance instead of the whole rail */
  height: auto;
  border-radius: var(--rr-r-pill);
  background-image: linear-gradient(180deg,
    rgba(150, 228, 255, 0) 0%,
    rgba(150, 228, 255, 0.22) 24%,
    rgba(232, 251, 255, 0.95) 50%,
    rgba(178, 236, 196, 0.24) 76%,
    rgba(178, 236, 196, 0) 100%);
  background-size: 100% 220px;
  background-repeat: no-repeat;
  background-position: 0 -260px;
  filter: blur(4px);
  opacity: 0.92;
  animation: rrMethodRun 16.5s var(--rr-slow) 1.4s infinite;
  pointer-events: none;
}
@keyframes rrMethodRun {
  0%, 5% { background-position: 0 -260px; }
  86%, 100% { background-position: 0 calc(100% + 260px); }
}

/* ---- THE PHASE: a major introduction, and the charge on its rail ------- */
body.cs-page .cs-phase {
  position: relative;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}
body.cs-page .cs-phase + .cs-phase { margin-top: var(--rr-phase-gap); }

/* the CHARGE — the lit fill of the channel for this phase. It rests as a lit
   head at the top of the phase and fills downward on arrival. Negative side
   insets let the bloom survive the clip. */
body.cs-page .cs-phase::before {
  content: '';
  /* the base switches both phase pseudos off with display: none at the same
     specificity, so re-enabling display is not optional here */
  display: block;
  position: absolute;
  left: calc(var(--rr-rail-x) - var(--rr-gutter));
  right: auto;
  top: 4px;
  bottom: 0;
  width: var(--rr-rail-w);
  height: auto;
  border-radius: var(--rr-r-pill);
  background: linear-gradient(180deg,
    rgb(var(--rr-phase-a)) 0%, rgb(var(--rr-phase-b)) 100%);
  box-shadow:
    0 0 14px -1px rgba(var(--rr-phase-a), 0.55),
    0 0 40px -6px rgba(var(--rr-phase-b), 0.45);
  clip-path: inset(0 -34px 87% -34px);
  transition: clip-path 2.4s var(--rr-slow) var(--rr-charge-delay, 0.15s);
  pointer-events: none;
}
body.cs-page .cs-moves.revealed .cs-phase::before { clip-path: inset(0 -34px 0 -34px); }

body.cs-page .cs-phase--build {
  --rr-phase-a: 79, 184, 245;
  --rr-phase-b: 70, 220, 210;
  --rr-pill-rgb: 56, 207, 255;
  --rr-charge-delay: 0.15s;
  padding-left: 0;
}
body.cs-page .cs-phase--build::before { bottom: calc(var(--rr-phase-gap) / -2); }

body.cs-page .cs-phase--loop {
  --rr-phase-a: 106, 217, 168;
  --rr-phase-b: 194, 230, 60;
  --rr-pill-rgb: 175, 221, 44;
  --rr-charge-delay: 1.2s;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
body.cs-page .cs-phase--loop::before {
  top: calc(var(--rr-phase-gap) / -2);
  bottom: 16px;
}

/* the lead-in: a hairline that hands the rail across to the phase pill, so
   the heading belongs to the channel instead of floating beside it. */
body.cs-page .cs-phase::after {
  content: '';
  display: block;
  position: absolute;
  left: calc(var(--rr-rail-x) - var(--rr-gutter) + 6px);
  top: 11px;
  right: auto;
  bottom: auto;
  width: calc(var(--rr-gutter) - var(--rr-rail-x) - 14px);
  height: 1px;
  border: 0;
  background-image: linear-gradient(90deg,
    rgba(var(--rr-pill-rgb), 0.9) 0%, rgba(var(--rr-pill-rgb), 0.08) 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}
/* phase two repeats, so its lead-in is doubled — a quiet echo, no ring, no
   spin. Two hairlines saying the same thing twice. */
body.cs-page .cs-phase--loop::after {
  top: 9px;
  height: 5px;
  background-image:
    linear-gradient(90deg, rgba(var(--rr-pill-rgb), 0.9) 0%, rgba(var(--rr-pill-rgb), 0.08) 100%),
    linear-gradient(90deg, rgba(var(--rr-pill-rgb), 0.4) 0%, rgba(var(--rr-pill-rgb), 0.03) 100%);
  background-size: 100% 1px, 78% 1px;
  background-position: 0 0, 0 4px;
}

/* ---- THE PHASE HEADING ------------------------------------------------- */
/* The base floats the loop phase's label absolutely against a boxed panel.
   There is no panel any more, so the heading returns to the flow — and it is
   given real scale, with the pill stacked above it as a tier marker. */
body.cs-page .cs-phase-label {
  position: static;
  inset: auto;
  z-index: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(13px, 1.3vw, 18px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 2.95vw, 2.9375rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.014em;
  text-transform: none;
  text-wrap: balance;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(96deg,
    rgb(var(--rr-head-a)) 0%, rgb(var(--rr-head-b)) 52%, rgb(var(--rr-head-c)) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  /* DESCENDER LAW: the clip is the box, so the box grows for the descenders
     and the space below is repaid out of the margin. */
  text-shadow: none;
  padding-bottom: 0.24em;
  margin: 0 0 calc(clamp(30px, 3.2vw, 46px) - 0.24em);
}
body.cs-page .cs-phase--build { --rr-head-a: 140, 201, 255; --rr-head-b: 56, 207, 255; --rr-head-c: 80, 219, 205; }
body.cs-page .cs-phase--loop  { --rr-head-a: 96, 217, 198; --rr-head-b: 155, 220, 94; --rr-head-c: 203, 234, 68; }
body.cs-page .cs-phase-label .cs-ico { display: none; }

/* the tier pill. It sits INSIDE the clipped heading, so it opts out of the
   clip and repaints its own fill. */
body.cs-page .cs-phase-label .cs-phase-n {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--rr-r-pill);
  font-family: var(--font-sans, inherit);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1;
  background-color: rgba(var(--rr-pill-rgb), 0.14);
  background-image: none;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(var(--rr-pill-rgb), 0.36),
    0 0 22px -10px rgba(var(--rr-pill-rgb), 0.8);
  color: rgb(var(--rr-head-b));
  -webkit-text-fill-color: rgb(var(--rr-head-b));
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: 0 0 18px rgba(var(--rr-pill-rgb), 0.4);
}
/* the loop echo: a soft light crosses the phase-two pill, then starts over.
   The restart is the whole idea. */
body.cs-page .cs-phase--loop .cs-phase-label .cs-phase-n {
  background-image: linear-gradient(100deg,
    rgba(222, 245, 160, 0) 38%, rgba(222, 245, 160, 0.38) 50%, rgba(222, 245, 160, 0) 62%);
  background-size: 220% 100%;
  background-position: 210% 0;
  animation: rrLoopEcho 9s var(--rr-slow) 2.4s infinite;
}
/* the image is wider than the pill, so LARGER percentages push it left —
   the sweep runs left to right by counting DOWN. */
@keyframes rrLoopEcho {
  0%, 18% { background-position: 210% 0; }
  58%, 100% { background-position: -110% 0; }
}

/* the base's springer and return track belonged to the old boxed loop */
body.cs-page .cs-springer,
body.cs-page .cs-return { display: none; }

/* ---- THE STAGE --------------------------------------------------------- */
body.cs-page .cs-move-set {
  display: grid;
  gap: var(--rr-stage-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.cs-page .cs-move {
  position: relative;
  display: block;
  padding: 0 0 0 var(--rr-in-x, clamp(18px, 2vw, 30px));
  border: 0;
  background: none;
  box-shadow: none;
  --rr-disc: calc(var(--rr-disc-base) * var(--rr-prox, 0.87));
}

/* the connector: the rail segment from this disc down to the next one, with
   a glint that runs it. Staggered 01→05 so the run reads as one cascade. */
body.cs-page .cs-move::before {
  content: '';
  display: block;
  position: absolute;
  left: calc(var(--rr-rail-x) + var(--rr-rail-w) / 2 - 3.5px - var(--rr-gutter));
  top: calc(var(--rr-disc) + 7px);
  bottom: calc(var(--rr-stage-gap) * -1 - 6px);
  width: 7px;
  height: auto;
  border-radius: var(--rr-r-pill);
  background-color: transparent;
  background-image: linear-gradient(180deg,
    rgba(var(--rr-stage-rgb), 0) 0%,
    rgba(var(--rr-stage-rgb), 0.9) 50%,
    rgba(var(--rr-stage-rgb), 0) 100%);
  background-size: 100% 54px;
  background-repeat: no-repeat;
  background-position: 0 -58px;
  filter: blur(2.5px);
  opacity: 0;
  animation: rrLink 7.6s var(--rr-slow) var(--rr-link-delay, 0s) infinite;
  pointer-events: none;
}
@keyframes rrLink {
  0% { background-position: 0 -58px; opacity: 0; }
  4% { opacity: 0.9; }
  20% { opacity: 0.9; }
  28%, 100% { background-position: 0 calc(100% + 58px); opacity: 0; }
}
/* 03 carries the channel through the threshold into 04 */
body.cs-page .cs-phase--build .cs-move:last-child::before {
  bottom: calc(var(--rr-phase-gap) * -1 - 6px);
}
/* 06 resolves. Nothing runs past it. */
body.cs-page .cs-phase--loop .cs-move:last-child::before { display: none; }

/* The base draws a boxed return track and a rotated arrow around the loop
   phase at (0,3,1) — higher than the plain ::after and ::before overrides.
   These are the rules that actually beat it. No return box, no arrowhead:
   phase two's repetition is carried by the doubled lead-in instead. */
body.cs-page .cs-phase--loop .cs-move:first-child::after,
body.cs-page .cs-phase--loop .cs-move:last-child::after {
  top: var(--rr-pool-t);
  bottom: var(--rr-pool-b);
  height: auto;
  border: 0;
  border-radius: var(--rr-r-lg);
}
body.cs-page .cs-phase--loop .cs-move:first-child .cs-move-num::before,
body.cs-page .cs-phase--loop .cs-move:first-child .cs-move-num::after {
  content: none;
  display: none;
}

/* the stage's own pool of light — this is the depth, not a box. Near stages
   sit forward in brighter air; far stages sit back. */
body.cs-page .cs-move::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  left: calc(var(--rr-rail-x) - var(--rr-gutter) + var(--rr-pool-l));
  right: var(--rr-pool-r);
  top: var(--rr-pool-t);
  bottom: var(--rr-pool-b);
  width: auto;
  height: auto;
  border: 0;
  border-radius: var(--rr-r-lg);
  background: radial-gradient(56% 84% at 9% 30%,
    rgba(var(--rr-stage-rgb), calc(0.075 + 0.055 * var(--rr-adv))) 0%,
    rgba(var(--rr-stage-rgb), 0) 72%);
  opacity: var(--rr-depth, 0.55);
  pointer-events: none;
}

/* the disc, seated on the rail. One derivation, so odd and even can never
   drift off the channel again. */
body.cs-page .cs-move-num {
  position: absolute;
  left: calc(var(--rr-rail-x) + var(--rr-rail-w) / 2 - var(--rr-disc) / 2 - var(--rr-gutter));
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--rr-disc);
  height: var(--rr-disc);
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(84% 74% at 32% 24%, rgba(var(--rr-stage-rgb), 0.17) 0%, rgba(var(--rr-stage-rgb), 0) 70%),
    linear-gradient(168deg, rgba(22, 43, 79, 0.97) 0%, rgba(10, 21, 41, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px -9px rgba(var(--rr-stage-rgb), 0.7),
    0 0 0 1px rgba(var(--rr-stage-rgb), 0.4),
    0 0 20px -9px rgba(var(--rr-stage-rgb), 0.5),
    0 14px 28px -18px rgba(2, 8, 22, 0.95);
  font-family: var(--font-serif);
  font-size: calc(var(--rr-disc) * 0.355);
  font-weight: 500;
  line-height: 1;
  color: rgb(var(--rr-stage-rgb));
  text-shadow: 0 0 16px rgba(var(--rr-stage-rgb), 0.5);
  transform: scale(0.94);
  opacity: 0.86;
  transition:
    transform 1.05s var(--rr-ease) var(--rr-disc-delay, 0s),
    box-shadow 1.3s ease var(--rr-disc-delay, 0s),
    opacity 0.8s ease var(--rr-disc-delay, 0s);
}
body.cs-page .cs-move-num::before,
body.cs-page .cs-move-num::after { content: none; display: none; }
/* arrival: the disc lights */
body.cs-page .cs-moves.revealed .cs-move-num {
  transform: none;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 22px -8px rgba(var(--rr-stage-rgb), calc(0.6 + 0.3 * var(--rr-adv))),
    0 0 0 1px rgba(var(--rr-stage-rgb), calc(0.5 + 0.2 * var(--rr-adv))),
    0 0 calc(30px + 22px * var(--rr-adv)) calc(-12px + 2px * var(--rr-adv)) rgba(var(--rr-stage-rgb), calc(0.55 + 0.25 * var(--rr-adv))),
    0 16px 34px -18px rgba(2, 8, 22, 0.95);
}

/* The base positions and sizes the even stages' discs with the old formula at
   (0,4,1) and indents the even stages at (0,3,1) — both beat the rules above,
   which is why the discs drifted off the rail and the near/far alternation
   broke at 02 and 05. Matched specificity, derived from the same geometry. */
body.cs-page .cs-move:nth-child(even) {
  padding-left: var(--rr-in-x, clamp(18px, 2vw, 30px));
}
body.cs-page .cs-move:nth-child(even) .cs-move-num {
  left: calc(var(--rr-rail-x) + var(--rr-rail-w) / 2 - var(--rr-disc) / 2 - var(--rr-gutter));
  width: var(--rr-disc);
  height: var(--rr-disc);
  font-size: calc(var(--rr-disc) * 0.355);
}

/* ---- TYPE -------------------------------------------------------------- */
body.cs-page .cs-move h3 {
  display: flex;
  align-items: center;
  align-self: auto;
  min-height: var(--rr-disc);
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.35vw, 2.375rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  /* the ramp colour at full strength sits darker than the description under it,
     which inverts the hierarchy — the stage title keeps its hue but is lifted
     toward white so it always reads as the heading of its own paragraph */
  color: rgb(var(--rr-stage-rgb));
  color: color-mix(in srgb, rgb(var(--rr-stage-rgb)) 56%, #ffffff);
  text-shadow: 0 0 calc(22px + 16px * var(--rr-adv)) rgba(var(--rr-stage-rgb), calc(0.26 + 0.16 * var(--rr-adv)));
  text-wrap: balance;
  position: relative;
}
body.cs-page .cs-move p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(0.9688rem, 1.02vw, 1.0625rem);
  line-height: 1.7;
  color: var(--rr-body);
  text-wrap: pretty;
}

/* ---- SIX ARRIVALS, SIX DIFFERENT MOTIONS ------------------------------- */
/* The reveal class sits on .cs-moves, so the six are driven off one
   .revealed state with per-stage transforms, easings, durations and delays.
   Resting states are subtle offsets at near-full opacity: a reader who lands
   mid-page and never fires the observer sees a correctly laid out run. */
body.cs-page .cs-move > h3 {
  transform: var(--rr-in, none);
  opacity: 0.9;
  transition:
    transform var(--rr-in-dur, 1.1s) var(--rr-in-ease, var(--rr-ease)) var(--rr-in-delay, 0s),
    opacity 0.85s ease var(--rr-in-delay, 0s);
}
body.cs-page .cs-move > p {
  transform: var(--rr-in-p, var(--rr-in, none));
  opacity: 0.9;
  transition:
    transform var(--rr-in-dur, 1.1s) var(--rr-in-ease, var(--rr-ease)) var(--rr-in-delay-p, var(--rr-in-delay, 0s)),
    opacity 0.85s ease var(--rr-in-delay-p, var(--rr-in-delay, 0s));
}
body.cs-page .cs-moves.revealed .cs-move > h3,
body.cs-page .cs-moves.revealed .cs-move > p {
  transform: none;
  opacity: 1;
}

/* 01 ANCHOR — it settles. Held slightly high, comes down and stays down. */
body.cs-page .cs-move-set:first-of-type .cs-move:nth-child(1) {
  --rr-stage-rgb: 98, 176, 251;
  --rr-adv: 0;
  --rr-prox: 1;
  --rr-depth: 1;
  --rr-in-x: clamp(18px, 2vw, 30px);
  --rr-in: translateY(-14px) scale(1.012);
  --rr-in-dur: 1.15s;
  --rr-in-ease: cubic-bezier(0.18, 0.86, 0.26, 1);
  --rr-in-delay: 0.06s;
  --rr-disc-delay: 0.02s;
  --rr-link-delay: 0s;
}
/* 02 AUDIT — it scans. Enters sideways, and a reading light crosses behind
   the title once, left to right. */
body.cs-page .cs-move-set:first-of-type .cs-move:nth-child(2) {
  --rr-stage-rgb: 56, 207, 255;
  --rr-adv: 0.2;
  --rr-prox: 0.87;
  --rr-depth: 0.5;
  --rr-in-x: clamp(48px, 5vw, 84px);
  --rr-in: translateX(-20px);
  --rr-in-dur: 1.05s;
  --rr-in-ease: cubic-bezier(0.3, 0, 0.18, 1);
  --rr-in-delay: 0.26s;
  --rr-disc-delay: 0.3s;
  --rr-link-delay: 1.15s;
}
body.cs-page .cs-move-set:first-of-type .cs-move:nth-child(2) > h3::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -10px -16px;
  border-radius: var(--rr-r);
  background-image: linear-gradient(100deg,
    rgba(150, 230, 255, 0) 40%, rgba(150, 230, 255, 0.5) 50%, rgba(150, 230, 255, 0) 60%);
  background-size: 260% 100%;
  background-position: 180% 0;
  background-repeat: no-repeat;
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
}
body.cs-page .cs-moves.revealed .cs-move-set:first-of-type .cs-move:nth-child(2) > h3::after {
  animation: rrAudit 2.2s var(--rr-slow) 0.55s 1 both;
}
@keyframes rrAudit {
  0% { background-position: 180% 0; opacity: 0; }
  18% { opacity: 1; }
  74% { opacity: 1; }
  100% { background-position: -70% 0; opacity: 0; }
}
/* 03 ORDER — it sequences. Title lands, then the paragraph, then the disc:
   the stage itself arrives in a deliberate order. */
body.cs-page .cs-move-set:first-of-type .cs-move:nth-child(3) {
  --rr-stage-rgb: 70, 220, 210;
  --rr-adv: 0.4;
  --rr-prox: 1;
  --rr-depth: 1;
  --rr-in-x: clamp(18px, 2vw, 30px);
  --rr-in: translateY(12px);
  --rr-in-dur: 0.95s;
  --rr-in-ease: cubic-bezier(0.24, 0.8, 0.22, 1);
  --rr-in-delay: 0.44s;
  --rr-in-delay-p: 0.68s;
  --rr-disc-delay: 0.9s;
  --rr-link-delay: 2.3s;
}
/* 04 PRESSURE — it eases. The longest, gentlest release of the six. */
body.cs-page .cs-move-set[start="4"] .cs-move:nth-child(1) {
  --rr-stage-rgb: 106, 217, 168;
  --rr-adv: 0.6;
  --rr-prox: 0.87;
  --rr-depth: 0.5;
  --rr-in-x: clamp(48px, 5vw, 84px);
  --rr-in: translateX(16px);
  --rr-in-dur: 1.5s;
  --rr-in-ease: cubic-bezier(0.14, 0.72, 0.14, 1);
  --rr-in-delay: 0.58s;
  --rr-disc-delay: 0.62s;
  --rr-link-delay: 3.45s;
}
/* 05 FOUNDATION — it builds. The furthest travel, and it rises. */
body.cs-page .cs-move-set[start="4"] .cs-move:nth-child(2) {
  --rr-stage-rgb: 155, 220, 94;
  --rr-adv: 0.8;
  --rr-prox: 1;
  --rr-depth: 1;
  --rr-in-x: clamp(18px, 2vw, 30px);
  --rr-in: translateY(24px);
  --rr-in-dur: 1.3s;
  --rr-in-ease: cubic-bezier(0.26, 0.78, 0.18, 1);
  --rr-in-delay: 0.72s;
  --rr-disc-delay: 0.78s;
  --rr-link-delay: 4.6s;
}
/* 06 COURSE — it corrects. Comes in off-square and squares itself up. */
body.cs-page .cs-move-set[start="4"] .cs-move:nth-child(3) {
  --rr-stage-rgb: 194, 230, 60;
  --rr-adv: 1;
  --rr-prox: 0.87;
  --rr-depth: 0.5;
  --rr-in-x: clamp(48px, 5vw, 84px);
  --rr-in: translate(-13px, 8px) rotate(-0.5deg);
  --rr-in-p: translate(-8px, 8px);
  --rr-in-dur: 1.25s;
  --rr-in-ease: cubic-bezier(0.36, 0.04, 0.16, 1);
  --rr-in-delay: 0.88s;
  --rr-disc-delay: 0.94s;
}

/* ---- MOBILE: designed, not shrunk -------------------------------------- */
@media (max-width: 760px) {
  body.cs-page .cs-moves {
    --rr-gutter: 60px;
    --rr-rail-x: 22px;
    --rr-rail-w: 3px;
    --rr-sig-w: 11px;
    --rr-disc-base: 44px;
    --rr-stage-gap: 34px;
    --rr-phase-gap: 46px;
    --rr-pool-l: -26px;
    --rr-pool-r: -6px;
    --rr-pool-t: -16px;
    --rr-pool-b: -12px;
  }
  /* the alternating indent has no room to read on a phone, so depth is
     carried entirely by disc scale, title weight and the light pool */
  body.cs-page .cs-move,
  body.cs-page .cs-move:nth-child(even) { padding: 0; }
  body.cs-page .cs-move h3 {
    display: block;
    min-height: 0;
    padding-top: 7px;
    margin-bottom: 9px;
    font-size: 1.5rem;
    line-height: 1.18;
  }
  body.cs-page .cs-move p { font-size: 0.9688rem; line-height: 1.7; }
  body.cs-page .cs-phase-label {
    gap: 12px;
    font-size: 1.8125rem;
    margin-bottom: calc(26px - 0.24em);
  }
  /* the base drops the phase pill on phones; here it is wayfinding, so it
     stays — just tighter */
  body.cs-page .cs-phase-label .cs-phase-n {
    display: inline-block;
    padding: 5px 11px;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
  }
  body.cs-page .cs-phase::after { top: 9px; width: calc(var(--rr-gutter) - var(--rr-rail-x) - 12px); }
  body.cs-page .cs-phase--loop::after { top: 7px; }
}

@media (max-width: 400px) {
  body.cs-page .cs-moves {
    --rr-gutter: 54px;
    --rr-rail-x: 20px;
    --rr-disc-base: 41px;
    --rr-stage-gap: 30px;
    --rr-phase-gap: 40px;
  }
  body.cs-page .cs-move h3 { font-size: 1.4375rem; padding-top: 6px; }
  body.cs-page .cs-move p { font-size: 0.9375rem; }
  body.cs-page .cs-phase-label { font-size: 1.625rem; }
}

/* ============================================================
   SIX QUESTIONS, THREE REPORTS — the profile review, made visible
   The concept: we ask one question, then read the answer across three
   reports. So the section is a register — a question column, three named
   report columns, six question rows — and an ANALYSIS PASS moves down it:
   a row comes into focus, the light arrives at Experian, then Equifax,
   then TransUnion, the column head echoes each arrival, and the row
   releases. No enclosing card inside the panel, no dots, no grid.

   Bureau identity is carried by POSITION and LIGHT, never by extra copy:
   each report column owns one step of the journey ramp (profile -> analysis
   -> bridge), running left to right, and that hue appears in three places
   only — the column head, the hairline column guide that descends behind
   the cells, and the light that arrives in that column's cell.
   ============================================================ */

body.cs-page .cs-scan {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px);
  border-radius: var(--rr-r);

  /* register geometry — the head, the guides and the cells all read from
     these, so the three columns can never drift out of alignment */
  --rr-reg-w: 166px;
  --rr-reg-gap: 9px;
  --rr-track: calc((var(--rr-reg-w) - 2 * var(--rr-reg-gap)) / 3);
  --rr-wash-bleed: 16px;

  /* the three reports, on the journey ramp, left to right */
  --rr-bur1-rgb: 79, 184, 245;   /* --rr-profile  · Experian */
  --rr-bur2-rgb: 56, 207, 255;   /* --rr-analysis · Equifax  */
  --rr-bur3-rgb: 95, 211, 196;   /* --rr-bridge   · TransUnion */
}
/* the panel's own light ramps the way the page does: sky where the
   questions are asked, lime where the goal decides */
body.cs-page .cs-scan::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -16%;
  right: -12%;
  width: 72%;
  height: 56%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(56, 207, 255, 0.2), rgba(56, 207, 255, 0) 100%);
}
body.cs-page .cs-scan::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -18%;
  left: -12%;
  width: 80%;
  height: 48%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(175, 221, 44, 0.17), rgba(175, 221, 44, 0) 100%);
}

/* the register travels with the six stages instead of leaving a hole beside
   the bottom of the run. (The base stylesheet sticks .cs-method-side at
   116px; this is the same mechanism, tuned to the new header offset.) */
@media (min-width: 1081px) {
  body.cs-page .cs-method > .cs-method-side { position: sticky; top: clamp(90px, 9vh, 120px); }
}

/* ---- the section head: this is a heading, not a caption ---- */
body.cs-page .cs-scan-head {
  padding: 0 0 clamp(20px, 2.2vw, 28px);
  border: 0;
  background: none;
  box-shadow: none;
}
body.cs-page .cs-scan-title {
  max-width: 16ch;
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 0.95vw + 1.06rem, 2.125rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--rr-ink);
  text-wrap: balance;
}
body.cs-page .cs-scan-sub {
  max-width: 36ch;
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rr-body);
  text-wrap: pretty;
}

/* ---- the register head: three named reports ---- */
body.cs-page .cs-scan-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rr-reg-w);
  align-items: end;
  gap: 16px;
  padding: 0 0 10px;
  border: 0;
  background: none;
  box-shadow: inset 0 -1px 0 rgba(150, 196, 240, 0.16);
}
body.cs-page .cs-scan-cols > span:first-child {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8ba5c6;
}
body.cs-page .cs-scan-cols .cs-scan-bureaus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rr-reg-gap);
}
/* the heads are tabs, each with a lit base cap in its own report's hue —
   that cap is the top of the column guide running down behind the cells */
body.cs-page .cs-scan-cols .cs-scan-bureaus span {
  position: relative;
  display: grid;
  place-items: center;
  width: auto;
  padding: 8px 0 9px;
  border: 0;
  border-radius: var(--rr-r-sm) var(--rr-r-sm) 3px 3px;
  background: linear-gradient(180deg, rgba(var(--rr-bur-rgb), 0.16) 0%, rgba(var(--rr-bur-rgb), 0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(var(--rr-bur-rgb), 0.3),
    0 10px 20px -14px rgba(2, 8, 22, 0.95);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgb(var(--rr-bur-rgb));
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--rr-ease) 0.18s, transform 0.7s var(--rr-ease) 0.18s;
}
body.cs-page .cs-scan-cols .cs-scan-bureaus span:nth-child(1) { --rr-bur-rgb: var(--rr-bur1-rgb); }
body.cs-page .cs-scan-cols .cs-scan-bureaus span:nth-child(2) { --rr-bur-rgb: var(--rr-bur2-rgb); --rr-cell: 1; }
body.cs-page .cs-scan-cols .cs-scan-bureaus span:nth-child(3) { --rr-bur-rgb: var(--rr-bur3-rgb); --rr-cell: 2; }
/* the base cap */
body.cs-page .cs-scan-cols .cs-scan-bureaus span::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 3px;
  background: rgb(var(--rr-bur-rgb));
  opacity: 0.72;
  box-shadow: 0 0 12px -1px rgba(var(--rr-bur-rgb), 0.7);
}
/* the echo: this head lights each time the pass reaches its column */
body.cs-page .cs-scan-cols .cs-scan-bureaus span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 130% at 50% 118%, rgba(var(--rr-bur-rgb), 0.55) 0%, rgba(var(--rr-bur-rgb), 0) 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--rr-bur-rgb), 0.55);
  opacity: 0.5;
  animation: rrHeadEcho 18s linear infinite;
  animation-delay: calc(var(--rr-cell, 0) * 0.42s);
}

/* ---- the question rows ---- */
body.cs-page .cs-scan-rows {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the three column guides: hairlines in each report's hue, descending from
   the head caps and fading out at both ends. This is what makes the three
   reports readable as columns without one extra word or one extra box. */
body.cs-page .cs-scan-rows::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--rr-reg-w);
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(var(--rr-bur1-rgb), 0.34) 0%, rgba(var(--rr-bur1-rgb), 0.12) 62%, rgba(var(--rr-bur1-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--rr-bur2-rgb), 0.34) 0%, rgba(var(--rr-bur2-rgb), 0.12) 62%, rgba(var(--rr-bur2-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--rr-bur3-rgb), 0.34) 0%, rgba(var(--rr-bur3-rgb), 0.12) 62%, rgba(var(--rr-bur3-rgb), 0) 100%);
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position:
    calc(var(--rr-track) / 2) 0,
    calc(var(--rr-track) * 1.5 + var(--rr-reg-gap)) 0,
    calc(var(--rr-track) * 2.5 + var(--rr-reg-gap) * 2) 0;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 1.1s var(--rr-ease) 0.42s;
}
body.cs-page .cs-scan-rows li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rr-reg-w);
  align-items: center;
  gap: 16px;
  padding: clamp(15px, 1.6vw, 20px) 0;
  border: 0;
  background: none;
  box-shadow: inset 0 -1px 0 rgba(150, 196, 240, 0.1);
  animation: rrRowLift 18s var(--rr-ease) infinite;
  animation-delay: calc(var(--rr-row, 0) * 1.9s);
}
body.cs-page .cs-scan-rows li:last-child { box-shadow: none; }
body.cs-page .cs-scan-rows li:nth-child(1) { --rr-row: 0; }
body.cs-page .cs-scan-rows li:nth-child(2) { --rr-row: 1; }
body.cs-page .cs-scan-rows li:nth-child(3) { --rr-row: 2; }
body.cs-page .cs-scan-rows li:nth-child(4) { --rr-row: 3; }
body.cs-page .cs-scan-rows li:nth-child(5) { --rr-row: 4; }
body.cs-page .cs-scan-rows li:nth-child(6) { --rr-row: 5; }

/* the row-focus wash: a soft band of this row's own accent that bleeds past
   the text edges so it lifts the row without drawing a box around it */
body.cs-page .cs-scan-rows li::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 3px calc(-1 * var(--rr-wash-bleed)) 4px calc(-1 * var(--rr-wash-bleed));
  border-radius: var(--rr-r-sm);
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 0%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.11) 26%,
      rgba(var(--acc-rgb, 56, 207, 255), 0.05) 72%,
      rgba(var(--acc-rgb, 56, 207, 255), 0) 100%);
  opacity: 0.5;
  animation: rrRowWash 18s var(--rr-ease) infinite;
  animation-delay: calc(var(--rr-row, 0) * 1.9s);
}
body.cs-page .cs-scan-rows li > .cs-scan-q,
body.cs-page .cs-scan-rows li > .cs-dots { position: relative; z-index: 1; }

/* ---- the question ---- */
body.cs-page .cs-scan-q {
  position: relative;
  display: block;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rr-quiet);
  text-wrap: pretty;
}
body.cs-page .cs-scan-q b {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(1.0625rem, 0.42vw + 0.95rem, 1.1875rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--rr-ink);
  text-shadow: none;
  animation: rrAskFocus 18s var(--rr-ease) infinite;
  animation-delay: calc(var(--rr-row, 0) * 1.9s);
}
/* the register mark: a rounded index bar in the row's accent, running the
   full height of the entry. Replaces the inline 45-degree diamond, which
   also left the second line of every question hanging off the grid. */
body.cs-page .cs-scan-q b::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0.32em;
  bottom: 0.24em;
  width: 3px;
  height: auto;
  margin: 0;
  border-radius: var(--rr-r-pill);
  transform: none;
  background: linear-gradient(180deg,
    var(--acc, #38cfff) 0%,
    rgba(var(--acc-rgb, 56, 207, 255), 0.16) 100%);
  opacity: 1;
  box-shadow: 0 0 14px -1px rgba(var(--acc-rgb, 56, 207, 255), 0.55);
  animation: rrMarkFocus 18s var(--rr-ease) infinite;
  animation-delay: calc(var(--rr-row, 0) * 1.9s);
}

/* ---- the three report cells ---- */
body.cs-page .cs-scan-rows .cs-dots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rr-reg-gap);
  width: var(--rr-reg-w);
  height: auto;
}
/* the old full-row sweep is gone: the light now arrives cell by cell */
body.cs-page .cs-scan-rows .cs-dots::after { content: none; }

body.cs-page .cs-scan-rows .cs-dots > b {
  position: relative;
  display: block;
  width: auto;
  min-width: 0;
  height: 40px;
  border-radius: var(--rr-r-sm);
  /* a small translucent report page: three short ruled lines, a lit top
     edge, a whisper of the row's accent rising from the foot, and a soft
     drop so it sits above the register rather than inside it */
  background:
    linear-gradient(90deg, rgba(200, 230, 255, 0.34), rgba(200, 230, 255, 0.34)),
    linear-gradient(90deg, rgba(200, 230, 255, 0.22), rgba(200, 230, 255, 0.22)),
    linear-gradient(90deg, rgba(200, 230, 255, 0.14), rgba(200, 230, 255, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(130% 92% at 50% 120%, rgba(var(--acc-rgb, 56, 207, 255), 0.22) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0) 72%),
    linear-gradient(168deg, rgba(27, 49, 88, 0.86) 0%, rgba(14, 28, 54, 0.6) 100%);
  background-size: 62% 1px, 46% 1px, 34% 1px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 9px 13px, 9px 21px, 9px 29px, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 0 0 1px rgba(var(--rr-bur-rgb, 56, 207, 255), 0.24),
    0 9px 18px -12px rgba(2, 8, 22, 0.95);
  opacity: 1;
  transform: none;
  transition:
    opacity 0.72s var(--rr-ease) calc(0.24s + var(--rr-row, 0) * 0.07s + var(--rr-cell, 0) * 0.05s),
    transform 0.72s var(--rr-ease) calc(0.24s + var(--rr-row, 0) * 0.07s + var(--rr-cell, 0) * 0.05s);
}
body.cs-page .cs-scan-rows .cs-dots > b:nth-child(1) { --rr-bur-rgb: var(--rr-bur1-rgb); }
body.cs-page .cs-scan-rows .cs-dots > b:nth-child(2) { --rr-bur-rgb: var(--rr-bur2-rgb); --rr-cell: 1; }
body.cs-page .cs-scan-rows .cs-dots > b:nth-child(3) { --rr-bur-rgb: var(--rr-bur3-rgb); --rr-cell: 2; }
/* the base stylesheet's centred accent dot is retired: the cell itself is
   now the mark. The pseudo is reused on phones to name the report. */
body.cs-page .cs-scan-rows .cs-dots > b::before { content: none; }

/* THE ANALYSIS PASS — the light arrives at this report, reads it, moves on.
   It carries the report's own hue, so the eye learns the three columns. */
body.cs-page .cs-scan-rows .cs-dots > b::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--rr-bur-rgb), 0.95) 0 2px, rgba(var(--rr-bur-rgb), 0) 2px),
    linear-gradient(100deg,
      rgba(214, 240, 255, 0) 0%,
      rgba(214, 240, 255, 0.34) 48%,
      rgba(214, 240, 255, 0) 100%),
    radial-gradient(120% 120% at 50% 50%, rgba(var(--rr-bur-rgb), 0.3) 0%, rgba(var(--rr-bur-rgb), 0) 74%);
  background-size: 100% 100%, 72% 100%, 100% 100%;
  background-position: 0 0, 42% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 22px -6px rgba(var(--rr-bur-rgb), 0.75);
  opacity: 0.3;
  animation: rrCellArrive 18s var(--rr-slow) infinite;
  animation-delay: calc(var(--rr-row, 0) * 1.9s + var(--rr-cell, 0) * 0.42s);
}

/* Where the reports disagree: TransUnion's page does not read like the
   other two — its rules sit out of register and its edge runs amber. */
body.cs-page .cs-scan-rows .cs-dots--split > b:nth-child(3) {
  background-position: 13px 15px, 7px 23px, 15px 31px, 0 0, 0 0, 0 0;
  background-size: 44% 1px, 56% 1px, 26% 1px, 100% 100%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 0 0 1px rgba(242, 182, 76, 0.5),
    0 9px 18px -12px rgba(2, 8, 22, 0.95);
}
body.cs-page .cs-scan-rows .cs-dots--split > b:nth-child(3)::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 7px;
  width: 5px;
  height: 5px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  transform: none;
  background: var(--cs-amber, #f2b64c);
  box-shadow: 0 0 10px rgba(242, 182, 76, 0.85);
}

/* ---- entrance: the reports arrive, the columns draw in ---- */
body.cs-page .cs-method-side.reveal:not(.revealed) .cs-scan-rows .cs-dots > b {
  opacity: 0.6;
  transform: translateY(6px);
}
body.cs-page .cs-method-side.reveal:not(.revealed) .cs-scan-cols .cs-scan-bureaus span {
  opacity: 0.55;
  transform: translateY(-4px);
}
body.cs-page .cs-method-side.reveal:not(.revealed) .cs-scan-rows::before { opacity: 0.25; }

/* ---- the punchline ---- */
body.cs-page .cs-scan-foot {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: clamp(22px, 2.4vw, 32px);
  padding: clamp(16px, 1.5vw, 20px) clamp(16px, 1.6vw, 22px);
  border: 0;
  border-radius: var(--rr-r);
  background: linear-gradient(180deg, rgba(175, 221, 44, 0.14) 0%, rgba(175, 221, 44, 0.04) 100%);
  box-shadow:
    inset 0 1px 0 rgba(212, 244, 132, 0.34),
    inset 0 0 0 1px rgba(175, 221, 44, 0.2),
    0 -16px 44px -30px rgba(175, 221, 44, 0.75),
    0 16px 34px -22px rgba(2, 8, 22, 0.9);
  font-size: clamp(0.9375rem, 0.3vw + 0.87rem, 1.0625rem);
  line-height: 1.5;
  color: #dcecc2;
  text-wrap: pretty;
}
body.cs-page .cs-scan-foot strong {
  color: var(--rr-plan);
  text-shadow: 0 0 20px rgba(175, 221, 44, 0.5);
}
body.cs-page .cs-scan-foot .cs-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--rr-plan);
  filter: drop-shadow(0 0 10px rgba(175, 221, 44, 0.55));
}

/* ============================================================
   MOTION
   ============================================================ */
/* the row comes forward while it is being read */
@keyframes rrRowLift {
  0%, 2% { transform: translateY(0); }
  6%, 13% { transform: translateY(-2px); }
  19%, 100% { transform: translateY(0); }
}
/* and its accent wash brightens under it */
@keyframes rrRowWash {
  0%, 2% { opacity: 0.16; }
  6%, 13% { opacity: 1; }
  20%, 100% { opacity: 0.16; }
}
/* the question is the thing being asked, so it is the thing that brightens */
@keyframes rrAskFocus {
  0%, 2% { color: #c4d6ee; text-shadow: none; }
  6%, 13% { color: #ffffff; text-shadow: 0 0 22px rgba(var(--acc-rgb, 56, 207, 255), 0.45); }
  20%, 100% { color: #c4d6ee; text-shadow: none; }
}
@keyframes rrMarkFocus {
  0%, 2% { opacity: 0.45; box-shadow: none; }
  6%, 13% { opacity: 1; box-shadow: 0 0 18px -1px rgba(var(--acc-rgb, 56, 207, 255), 0.7); }
  20%, 100% { opacity: 0.45; box-shadow: none; }
}
/* the light arrives at one report, reads it, and leaves */
@keyframes rrCellArrive {
  0%, 1.4% { opacity: 0; background-position: 0 0, -78% 0, 0 0; }
  3.2% { opacity: 1; }
  4.6% { opacity: 1; }
  6.4% { opacity: 0; background-position: 0 0, 178% 0, 0 0; }
  100% { opacity: 0; background-position: 0 0, 178% 0, 0 0; }
}
/* the column head answers each time the pass reaches its report */
@keyframes rrHeadEcho {
  0% { opacity: 0.16; }
  1.6% { opacity: 1; }
  4.4% { opacity: 0.16; }
  10.5% { opacity: 0.16; }
  12.1% { opacity: 1; }
  14.9% { opacity: 0.16; }
  21.1% { opacity: 0.16; }
  22.7% { opacity: 1; }
  25.5% { opacity: 0.16; }
  31.6% { opacity: 0.16; }
  33.2% { opacity: 1; }
  36% { opacity: 0.16; }
  42.2% { opacity: 0.16; }
  43.8% { opacity: 1; }
  46.6% { opacity: 0.16; }
  52.7% { opacity: 0.16; }
  54.3% { opacity: 1; }
  57.1% { opacity: 0.16; }
  100% { opacity: 0.16; }
}

/* ============================================================
   THE REGISTER BELOW THE SPLIT
   ============================================================ */
@media (max-width: 1080px) {
  /* full width now, so the reports get more page and sit less marooned */
  body.cs-page .cs-scan { --rr-reg-w: 214px; --rr-reg-gap: 11px; }
  body.cs-page .cs-scan-title { max-width: none; }
  body.cs-page .cs-scan-sub { max-width: 52ch; }
}

@media (max-width: 760px) {
  /* on a phone the three reports move under the question, full width, and
     each one names itself. The analysis pass is unchanged: the light still
     arrives at Experian, then Equifax, then TransUnion, one at a time. */
  body.cs-page .cs-scan {
    padding: clamp(22px, 5.6vw, 28px) clamp(18px, 4.6vw, 24px) clamp(20px, 5vw, 26px);
    --rr-wash-bleed: 12px;
  }
  body.cs-page .cs-scan-cols { display: none; }
  body.cs-page .cs-scan-rows::before { content: none; }
  body.cs-page .cs-scan-rows li {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: clamp(16px, 4.2vw, 20px) 0;
  }
  body.cs-page .cs-scan-q { padding-left: 18px; font-size: 0.875rem; }
  body.cs-page .cs-scan-q b {
    margin-bottom: 6px;
    font-size: clamp(1.0625rem, 4vw, 1.1875rem);
    line-height: 1.26;
  }
  body.cs-page .cs-scan-rows .cs-dots { width: 100%; grid-template-columns: repeat(3, 1fr); }
  body.cs-page .cs-scan-rows .cs-dots > b {
    height: 54px;
    background-size: 44% 1px, 32% 1px, 24% 1px, 100% 100%, 100% 100%, 100% 100%;
    background-position: 12px 28px, 12px 36px, 12px 44px, 0 0, 0 0, 0 0;
  }
  /* the report names itself where the column head used to.
     The extra .cs-scan lifts this to (0,4,2) so it also resets the
     desktop amber mark on the split row's third cell, which is (0,4,2). */
  body.cs-page .cs-scan .cs-scan-rows .cs-dots > b::before {
    content: 'EX';
    position: absolute;
    left: 12px;
    top: 10px;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    transform: none;
    background: none;
    box-shadow: none;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    color: rgb(var(--rr-bur-rgb));
  }
  body.cs-page .cs-scan-rows .cs-dots > b:nth-child(2)::before { content: 'EQ'; }
  body.cs-page .cs-scan-rows .cs-dots > b:nth-child(3)::before { content: 'TU'; }
  /* and it keeps its hue cap, so the three reports stay distinguishable.
     ::after is the arrival light only — the base sheet's phone rules
     (body.cs-page .cs-scan-rows .cs-dots b:nth-child(n)::after, (0,4,2))
     put 'EX'/'EQ'/'TU' text in here, so this must match that weight and
     restate the empty content, or the label renders twice. */
  body.cs-page .cs-scan .cs-scan-rows .cs-dots > b::after {
    content: '';
    display: block;
    background-size: 100% 100%, 54% 100%, 100% 100%;
  }
  /* the disagreement still reads: amber edge, amber mark, rules out of line */
  body.cs-page .cs-scan-rows .cs-dots--split > b:nth-child(3) {
    background-position: 18px 30px, 12px 38px, 24px 46px, 0 0, 0 0, 0 0;
    background-size: 34% 1px, 40% 1px, 20% 1px, 100% 100%, 100% 100%, 100% 100%;
  }
  body.cs-page .cs-scan-rows .cs-dots--split > b:nth-child(3)::before {
    color: var(--cs-amber, #f2b64c);
    text-shadow: 0 0 12px rgba(242, 182, 76, 0.7);
  }
}

@media (max-width: 400px) {
  body.cs-page .cs-scan { padding-inline: 16px; --rr-reg-gap: 8px; }
  body.cs-page .cs-scan-title { font-size: 1.5rem; }
  body.cs-page .cs-scan-sub { font-size: 0.875rem; }
  body.cs-page .cs-scan-q { padding-left: 16px; }
  body.cs-page .cs-scan-q b { font-size: 1.0625rem; }
  body.cs-page .cs-scan-rows .cs-dots > b {
    height: 50px;
    background-position: 10px 26px, 10px 34px, 10px 42px, 0 0, 0 0, 0 0;
  }
  body.cs-page .cs-scan .cs-scan-rows .cs-dots > b::before { left: 10px; top: 9px; letter-spacing: 0.1em; }
  body.cs-page .cs-scan-rows .cs-dots--split > b:nth-child(3) {
    background-position: 16px 28px, 10px 36px, 20px 44px, 0 0, 0 0, 0 0;
  }
  body.cs-page .cs-scan-foot { gap: 11px; padding: 15px 15px 16px; }
  body.cs-page .cs-scan-foot .cs-ico { width: 20px; height: 20px; }
}

/* ============================================================
   THE DELIVERABLE — the Action Plan, the handoff, the inclusions
   Three sections that answer "what do I actually get": the plan document
   itself, the four steps plus the session that produce it, and the editorial
   spread that anchors the whole program to that document.
   ============================================================ */

/* ============================================================
   THE ACTION PLAN — a strategy document, not a dashboard
   One lit sheet with five regions reading top to bottom: a masthead, the
   current profile (goal + three metrics), a narrow ledger of what changed
   against a dominant column of next moves, a warm strategist note, and a
   checkpoint. Regions are separated by folds — a light line over a dark
   one — never by borders. Each region owns one point on the journey ramp,
   and each status owns one quiet behaviour of its own.
   ============================================================ */

/* ---- the paper stack -------------------------------------------------
   Two under-sheets peek above the document so it reads as the top sheet of
   a real deliverable rather than a single pane of glass. */
body.cs-page .cs-product { position: relative; }
body.cs-page .cs-product::before,
body.cs-page .cs-product::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 2.6%;
  right: 2.6%;
  top: -13px;
  height: 64px;
  pointer-events: none;
  border-radius: var(--rr-r-lg) var(--rr-r-lg) 0 0;
  background: linear-gradient(180deg, rgba(25,46,84,0.74) 0%, rgba(11,22,42,0.16) 100%);
  box-shadow: 0 0 0 1px rgba(150,196,240,0.14), 0 -14px 34px -22px rgba(2,8,22,0.95);
}
body.cs-page .cs-product::after {
  left: 5.6%;
  right: 5.6%;
  top: -25px;
  opacity: 0.58;
}

body.cs-page .cs-ap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 0;
  border-radius: var(--rr-r-lg);
  /* an internal reading light: bright across the masthead, settling toward
     the checkpoint, with a warm lift where Steven's note sits */
  background:
    radial-gradient(130% 48% at 50% -8%, rgba(96,176,255,0.17) 0%, transparent 64%),
    radial-gradient(76% 34% at 8% 84%, rgba(175,221,44,0.075) 0%, transparent 72%),
    linear-gradient(180deg, rgba(28,51,89,0.68) 0%, rgba(18,34,61,0.6) 36%, rgba(10,20,39,0.74) 100%);
  box-shadow:
    0 0 0 1px var(--rr-edge-lit),
    0 46px 104px -46px rgba(2,8,22,0.96),
    0 0 96px -42px var(--rr-glow-sky),
    inset 0 1px 0 rgba(255,255,255,0.09);
}
/* the lit head rule of the sheet */
body.cs-page .cs-ap::before {
  left: 5%;
  right: 5%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(94deg, rgba(79,184,245,0) 0%, var(--rr-profile) 16%, var(--rr-analysis) 40%, var(--rr-bridge) 64%, var(--rr-plan) 88%, rgba(180,224,58,0) 100%);
  opacity: 0.9;
}

/* ---- REGION 0 · the masthead ---- */
body.cs-page .cs-ap-head {
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(28px, 3vw, 46px) clamp(24px, 2.6vw, 42px) clamp(24px, 2.6vw, 34px);
  border: 0;
  background:
    radial-gradient(64% 190% at 3% 0%, rgba(175,221,44,0.14) 0%, transparent 62%),
    linear-gradient(102deg, rgba(56,207,255,0.17) 0%, rgba(175,221,44,0.075) 48%, transparent 84%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 210% 100%;
  background-position: 0 0, 0 0;
  box-shadow: inset 0 -1px 0 rgba(150,196,240,0.18), inset 0 -2px 0 rgba(3,9,20,0.5);
  animation: rrPlanHead 26s var(--rr-slow) 1.4s infinite;
}
@keyframes rrPlanHead {
  0%, 100% { background-position: 0 0, 0 0; }
  50% { background-position: 0 0, 100% 0; }
}
body.cs-page .cs-ap-id { align-items: center; gap: clamp(16px, 1.8vw, 24px); }
body.cs-page .cs-ap-mark {
  width: clamp(48px, 4.4vw, 64px);
  filter: drop-shadow(0 0 20px rgba(56,207,255,0.45)) drop-shadow(0 6px 14px rgba(2,8,22,0.8));
}
body.cs-page .cs-ap-kicker {
  margin-bottom: 9px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rr-plan);
}
body.cs-page .cs-ap-title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--rr-ink);
  text-shadow: 0 0 44px rgba(126,193,255,0.3);
}
body.cs-page .cs-ap-tag {
  align-self: center;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(7,16,33,0.6);
  box-shadow: inset 0 0 0 1px rgba(178,221,255,0.36), 0 0 26px -14px rgba(56,207,255,0.9);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #cfe0f6;
}

/* ---- REGION 1 · CURRENT PROFILE — the goal band ---- */
body.cs-page .cs-ap-goal {
  gap: 8px 16px;
  padding: clamp(16px, 1.7vw, 24px) clamp(24px, 2.6vw, 42px);
  border: 0;
  background: linear-gradient(94deg, rgba(175,221,44,0.12) 0%, rgba(56,207,255,0.045) 46%, transparent 84%);
  box-shadow: inset 0 -1px 0 rgba(150,196,240,0.14), inset 0 -2px 0 rgba(3,9,20,0.46);
}
body.cs-page .cs-ap-goal .cs-ico { width: 19px; height: 19px; color: var(--rr-plan); }
body.cs-page .cs-ap-goal > span {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rr-plan);
}
body.cs-page .cs-ap-goal strong {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-weight: 600;
  color: #ffffff;
}

/* ---- REGION 1 · CURRENT PROFILE — the three metrics -------------------
   A measured band: three cells divided by folds, each with its own floor on
   the same baseline. The utilization cell carries the real meter; the other
   two carry a short accent rule so the band has one continuous footing
   instead of one bar and two holes. */
body.cs-page .cs-ap-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
  box-shadow: inset 0 -1px 0 rgba(150,196,240,0.15), inset 0 -2px 0 rgba(3,9,20,0.5);
}
body.cs-page .cs-ap-stat {
  border: 0;
  padding: clamp(20px, 2.1vw, 30px) clamp(18px, 2vw, 32px) clamp(20px, 2.2vw, 30px);
  box-shadow: inset 1px 0 0 rgba(150,196,240,0.12), inset 2px 0 0 rgba(3,9,20,0.4);
}
body.cs-page .cs-ap-stat::before { content: none; }
body.cs-page .cs-ap-stat:first-child {
  box-shadow: none;
  padding-left: clamp(24px, 2.6vw, 42px);
}
body.cs-page .cs-ap-stat:last-child { padding-right: clamp(24px, 2.6vw, 42px); }
body.cs-page .cs-ap-k {
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-quiet);
}
body.cs-page .cs-ap-v {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 2.8vw, 2.875rem);
  font-weight: 500;
  line-height: 0.96;
  color: var(--rr-ink);
}
body.cs-page .cs-ap-v small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rr-body);
}
body.cs-page .cs-ap-v small .cs-ico { width: 14px; height: 14px; color: var(--rr-plan); }
body.cs-page .cs-ap-meter {
  height: 7px;
  margin-top: clamp(15px, 1.5vw, 21px);
  border-radius: var(--rr-r-pill);
  background: rgba(150,196,240,0.13);
  box-shadow: inset 0 0 0 1px rgba(150,196,240,0.11);
}
body.cs-page .cs-ap-meter i {
  border-radius: var(--rr-r-pill);
  background: linear-gradient(90deg, var(--rr-profile) 0%, var(--rr-analysis) 44%, var(--rr-plan) 100%);
  box-shadow: 0 0 20px -4px rgba(56,207,255,0.9);
}
body.cs-page .cs-ap-meter::after {
  top: -4px;
  width: 2px;
  height: 15px;
  border-radius: 2px;
  background: rgba(226,240,255,0.72);
  box-shadow: 0 0 10px -1px rgba(226,240,255,0.9);
}
/* the two cells without a meter get the band's shared footing */
body.cs-page .cs-ap-stat:nth-child(2)::after,
body.cs-page .cs-ap-stat:nth-child(3)::after {
  content: '';
  grid-row: 3;
  align-self: start;
  justify-self: start;
  width: 46px;
  height: 2px;
  margin-top: calc(clamp(15px, 1.5vw, 21px) + 3px);
  border-radius: 2px;
}
body.cs-page .cs-ap-stat:nth-child(2)::after { background: linear-gradient(90deg, var(--rr-bridge), rgba(95,211,196,0)); }
body.cs-page .cs-ap-stat:nth-child(3)::after { background: linear-gradient(90deg, var(--rr-priority), rgba(143,217,106,0)); }

/* ---- REGIONS 2 + 3 · the working columns ------------------------------
   A narrow recessed ledger of what already happened, against a dominant lit
   column of what happens next. Two columns, full width, no dead third. */
body.cs-page .cs-ap-grid {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.6fr);
  gap: 0;
}
body.cs-page .cs-ap-block {
  border: 0;
  box-shadow: none;
  padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.4vw, 36px) clamp(28px, 2.8vw, 40px);
}
/* WHAT CHANGED — recessed stock, settled */
body.cs-page .cs-ap-grid > .cs-ap-block:first-child {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(4,10,22,0.52) 0%, rgba(4,10,22,0.26) 100%);
  box-shadow: inset -1px 0 0 rgba(150,196,240,0.13), inset -2px 0 0 rgba(3,9,20,0.46);
}
/* YOUR NEXT MOVES — the lit working surface */
body.cs-page .cs-ap-grid > .cs-ap-block:nth-child(2) {
  background:
    radial-gradient(84% 66% at 4% 0%, rgba(56,207,255,0.085) 0%, transparent 62%),
    rgba(23,44,79,0.2);
}

/* the numbered region spine */
body.cs-page .cs-ap-h {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 1.9vw, 26px);
  padding-bottom: 14px;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(150,196,240,0.14);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--rr-mark, 56,207,255));
}
body.cs-page .cs-ap-h::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 86px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--rr-mark, 56,207,255)), rgba(var(--rr-mark, 56,207,255), 0));
}
body.cs-page .cs-pin {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(74% 74% at 50% 22%, rgba(var(--rr-mark, 56,207,255), 0.34) 0%, rgba(6,14,28,0.95) 74%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--rr-mark, 56,207,255), 0.62),
    0 0 0 5px rgba(var(--rr-mark, 56,207,255), 0.09),
    0 0 20px -6px rgba(var(--rr-mark, 56,207,255), 0.7);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(var(--rr-mark, 56,207,255));
  text-shadow: none;
}
/* the ramp runs down the document: profile -> analysis -> priority -> plan */
body.cs-page .cs-ap-grid > .cs-ap-block:first-child .cs-ap-h { --rr-mark: 79,184,245; }
body.cs-page .cs-ap-grid > .cs-ap-block:nth-child(2) .cs-ap-h { --rr-mark: 56,207,255; }
body.cs-page .cs-ap-h--note { --rr-mark: 143,217,106; color: #cfe89a; }

/* WHAT CHANGED — a ledger that reaches its own floor.
   The list absorbs the leftover height and distributes its three entries,
   so the rail ends level with the moves column instead of stopping short. */
body.cs-page .cs-ap-changes {
  flex: 1 1 auto;
  display: grid;
  align-content: space-between;
}
body.cs-page .cs-ap-changes li {
  border: 0;
  gap: 15px;
  padding: 15px 0 16px;
  box-shadow: none;
}
body.cs-page .cs-ap-changes li:first-child { padding-top: 2px; }
body.cs-page .cs-ap-changes li:last-child { padding-bottom: 2px; }
body.cs-page .cs-ap-changes li:not(:last-child) { box-shadow: inset 0 -1px 0 rgba(150,196,240,0.13); }
body.cs-page .cs-ap-changes li > span {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--rr-quiet);
}
body.cs-page .cs-ap-changes b {
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}
body.cs-page .cs-ap-changes .cs-ico {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
}
body.cs-page .cs-ap-changes li[data-tone="good"] .cs-ico {
  color: #cdea70;
  background: rgba(175,221,44,0.12);
  box-shadow: inset 0 0 0 1px rgba(175,221,44,0.32);
}
body.cs-page .cs-ap-changes li[data-tone="info"] .cs-ico {
  color: #8fdcff;
  background: rgba(56,207,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(56,207,255,0.34);
}

/* YOUR NEXT MOVES — the states, retuned onto the journey ramp */
body.cs-page .cs-ap-moves li {
  border: 0;
  gap: 16px;
  padding: 15px 0 16px;
  box-shadow: none;
}
body.cs-page .cs-ap-moves li:first-child { padding-top: 2px; }
body.cs-page .cs-ap-moves li + li { box-shadow: inset 0 1px 0 rgba(150,196,240,0.12); }
body.cs-page .cs-ap-moves li[data-state="next"] { --st: #7cc6f8; --st-rgb: 79,184,245; }
body.cs-page .cs-ap-moves li[data-state="ongoing"] { --st: #77dccd; --st-rgb: 95,211,196; }
body.cs-page .cs-mv-text {
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--rr-quiet);
}
body.cs-page .cs-mv-text b {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.38;
  color: #ffffff;
}
body.cs-page .cs-ap-moves li[data-state="done"] .cs-mv-text b { color: #a9bcd6; }
body.cs-page .cs-mv-icon {
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border: 0;
  border-radius: 50%;
  color: var(--st, #38cfff);
  background: rgba(var(--st-rgb, 56,207,255), 0.09);
  box-shadow: inset 0 0 0 1px rgba(var(--st-rgb, 56,207,255), 0.5);
}
body.cs-page .cs-ap-moves li[data-state="done"] .cs-mv-icon {
  color: #10280a;
  background: linear-gradient(150deg, var(--rr-plan), var(--rr-priority));
  box-shadow: 0 0 0 1px rgba(175,221,44,0.32), 0 7px 18px -9px rgba(175,221,44,0.85);
}
body.cs-page .cs-mv-state {
  margin-top: 3px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(var(--st-rgb, 56,207,255), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--st-rgb, 56,207,255), 0.46);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--st, #9fe4ff);
}
body.cs-page .cs-ap-moves li[data-state="done"] .cs-mv-state {
  background: linear-gradient(140deg, rgba(175,221,44,0.95), rgba(143,217,106,0.92));
  box-shadow: 0 7px 18px -10px rgba(175,221,44,0.95);
  color: #10280a;
}
body.cs-page .cs-mv-bar { margin-top: 12px; gap: 12px; }
body.cs-page .cs-mv-bar i {
  height: 7px;
  border-radius: var(--rr-r-pill);
  background: rgba(150,196,240,0.13);
  box-shadow: inset 0 0 0 1px rgba(150,196,240,0.11);
}
body.cs-page .cs-mv-bar em { font-size: 0.75rem; font-weight: 700; color: #9fe4ff; }

/* ---- REGION 4 · the note — the human moment --------------------------
   Warm light, a byline rail, and a comfortable measure. Everything above
   this is analytical; this reads as a person writing to you. */
body.cs-page .cs-ap-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  column-gap: clamp(28px, 3.2vw, 54px);
  align-items: start;
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 2.6vw, 42px) clamp(34px, 3.6vw, 54px);
  border: 0;
  background:
    radial-gradient(60% 130% at 10% 0%, rgba(214,247,126,0.1) 0%, transparent 62%),
    radial-gradient(54% 118% at 95% 100%, rgba(214,160,86,0.075) 0%, transparent 70%),
    linear-gradient(170deg, rgba(35,52,76,0.72) 0%, rgba(21,35,58,0.66) 100%);
  box-shadow: inset 0 1px 0 rgba(236,255,190,0.2), inset 0 2px 0 rgba(3,9,20,0.4);
}
body.cs-page .cs-ap-note .cs-ap-h { grid-column: 1 / -1; }
body.cs-page .cs-ap-by {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  max-width: none;
}
body.cs-page .cs-ap-seat {
  display: block;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rr-plan) 0%, var(--rr-priority) 44%, var(--rr-analysis) 100%);
  box-shadow:
    0 0 0 1px rgba(232,255,182,0.26),
    0 0 0 9px rgba(175,221,44,0.06),
    0 22px 46px -18px rgba(175,221,44,0.55),
    0 0 70px -28px rgba(175,221,44,0.8);
  animation: rrNoteBreath 21.4s var(--rr-slow) 2s infinite;
}
body.cs-page .cs-ap-seat::before,
body.cs-page .cs-ap-seat::after { content: none; display: none; }
@keyframes rrNoteBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
body.cs-page .cs-ap-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none;
}
body.cs-page .cs-ap-by span {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rr-plan);
}
body.cs-page .cs-ap-by b {
  display: block;
  margin-bottom: 9px;
  padding-bottom: 9px;
  box-shadow: inset 0 -1px 0 rgba(232,255,182,0.28);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.16;
  color: #ffffff;
}
body.cs-page .cs-ap-note-text {
  max-width: 76ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.78;
  color: #e2ecfa;
}

/* ---- REGION 5 · the checkpoint ---- */
body.cs-page .cs-ap-foot {
  --rr-mark: 180,224,58;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: clamp(20px, 2vw, 28px) clamp(24px, 2.6vw, 42px);
  border: 0;
  background: linear-gradient(96deg, rgba(175,221,44,0.14) 0%, rgba(56,207,255,0.04) 50%, transparent 86%);
  box-shadow: inset 0 1px 0 rgba(232,255,182,0.2), inset 0 2px 0 rgba(3,9,20,0.46);
}
body.cs-page .cs-ap-foot > span:not(.cs-pin) {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfe89a;
}
body.cs-page .cs-ap-foot strong {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 700;
  color: #ffffff;
  background: none;
  box-shadow: none;
  padding: 0;
}
body.cs-page .cs-ap-disc {
  display: block;
  width: 100%;
  margin-top: 9px;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--rr-quiet);
}

/* ---- PER-STATUS BEHAVIOUR -------------------------------------------
   One behaviour per meaning. They run at different rates and never in the
   same place twice, so the document is alive without pulsing everywhere. */

/* WHAT CHANGED — settled: each entry lowers into place once, then rests */
body.cs-page .cs-ap.revealed .cs-ap-changes li { animation: rrChangeSettle 0.62s var(--rr-ease) both; }
body.cs-page .cs-ap.revealed .cs-ap-changes li:nth-child(1) { animation-delay: 0.20s; }
body.cs-page .cs-ap.revealed .cs-ap-changes li:nth-child(2) { animation-delay: 0.31s; }
body.cs-page .cs-ap.revealed .cs-ap-changes li:nth-child(3) { animation-delay: 0.42s; }
@keyframes rrChangeSettle {
  0% { transform: translateY(7px); opacity: 0.25; }
  100% { transform: translateY(0); opacity: 1; }
}

/* NEXT MOVES — active and directional: entries arrive from the left, and
   the region's rule carries a light that keeps travelling forward */
body.cs-page .cs-ap.revealed .cs-ap-moves li { animation: rrMoveArrive 0.6s var(--rr-ease) both; }
body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(1) { animation-delay: 0.34s; }
body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(2) { animation-delay: 0.45s; }
body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(3) { animation-delay: 0.56s; }
body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(4) { animation-delay: 0.67s; }
@keyframes rrMoveArrive {
  0% { transform: translateX(-9px); opacity: 0.22; }
  100% { transform: translateX(0); opacity: 1; }
}
body.cs-page .cs-ap-grid > .cs-ap-block:nth-child(2) .cs-ap-h::after {
  width: 132px;
  background:
    linear-gradient(90deg, rgba(159,228,255,0) 0%, rgba(159,228,255,0.95) 50%, rgba(159,228,255,0) 100%),
    linear-gradient(90deg, rgb(56,207,255), rgba(56,207,255,0));
  background-repeat: no-repeat, no-repeat;
  background-size: 34% 100%, 100% 100%;
  background-position: -40% 0, 0 0;
  animation: rrMovesTravel 9.2s var(--rr-slow) 1.2s infinite;
}
@keyframes rrMovesTravel {
  0%, 14% { background-position: -40% 0, 0 0; }
  68%, 100% { background-position: 140% 0, 0 0; }
}

/* DONE — a completed state: the mark seals once on arrival */
body.cs-page .cs-ap.revealed .cs-ap-moves li[data-state="done"] .cs-mv-icon {
  animation: rrDoneSeal 0.9s var(--rr-ease) 0.6s both;
}
@keyframes rrDoneSeal {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(175,221,44,0.6); }
  60% { transform: scale(1); box-shadow: 0 0 0 10px rgba(175,221,44,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(175,221,44,0.32), 0 7px 18px -9px rgba(175,221,44,0.85); }
}

/* IN PROGRESS — the paydown keeps working: a slow sheen inside the fill */
body.cs-page .cs-mv-bar i::before {
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, var(--rr-analysis), var(--rr-plan));
  background-repeat: no-repeat, no-repeat;
  background-size: 46% 100%, 100% 100%;
  background-position: -60% 0, 0 0;
  animation: rrPaydown 5.8s var(--rr-slow) infinite;
}
@keyframes rrPaydown {
  0%, 12% { background-position: -60% 0, 0 0; }
  74%, 100% { background-position: 150% 0, 0 0; }
}

/* NEXT — a directional cue: the arrow leans forward and settles back */
body.cs-page .cs-ap-moves li[data-state="next"] .cs-mv-icon .cs-ico {
  animation: rrNextCue 6.4s var(--rr-slow) infinite;
}
@keyframes rrNextCue {
  0%, 60%, 100% { transform: translateX(0); }
  74% { transform: translateX(2.5px); }
  88% { transform: translateX(0); }
}

/* ONGOING — steady maintenance: one slow, continuous turn */
body.cs-page .cs-ap-moves li[data-state="ongoing"] .cs-mv-icon .cs-ico {
  animation: rrOngoingTurn 34s linear infinite;
}
@keyframes rrOngoingTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* NEXT REVIEW — a checkpoint that arms itself on a long cycle */
body.cs-page .cs-ap-foot .cs-pin { animation: rrCheckpoint 7.6s var(--rr-slow) infinite; }
@keyframes rrCheckpoint {
  0%, 62%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(180,224,58,0.62),
      0 0 0 5px rgba(180,224,58,0.09),
      0 0 20px -6px rgba(180,224,58,0.7);
  }
  80% {
    box-shadow:
      inset 0 0 0 1px rgba(180,224,58,0.95),
      0 0 0 13px rgba(180,224,58,0),
      0 0 28px -3px rgba(180,224,58,1);
  }
}

/* ============================================================
   GETTING STARTED — a handoff, not four cards
   The three YOU steps and the WE step descend as a staircase, with the
   journey light growing brighter and longer along it. Ownership stays
   legible in the role badge (YOU sky, WE lime) while the step's own light
   travels profile -> analysis -> bridge -> plan.
   ============================================================ */
body.cs-page .cs-steps {
  position: relative;
  align-items: start;
  gap: clamp(18px, 2vw, 28px);
  padding: 0;
  isolation: auto;
}
body.cs-page .cs-steps::before,
body.cs-page .cs-steps::after { content: none; display: none; }

body.cs-page .cs-step {
  --rr-own: 79,184,245;
  --rr-role: 56,207,255;
  --rr-seam: 30%;
  --rr-seam-o: 0.55;
  position: relative;
  padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 30px) clamp(26px, 2.6vw, 34px);
  border: 0;
  border-radius: var(--rr-r);
  background:
    radial-gradient(96% 62% at 0% 0%, rgba(var(--rr-own), 0.11) 0%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow:
    0 0 0 1px rgba(var(--rr-own), 0.22),
    0 24px 56px -30px rgba(2,8,22,0.92),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transform: none;
}
/* the seam: the journey light, longer and brighter at every step down */
body.cs-page .cs-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(22px, 2.2vw, 30px);
  width: var(--rr-seam);
  height: 2px;
  border: 0;
  border-radius: 2px;
  transform-origin: left center;
  opacity: var(--rr-seam-o);
  background: linear-gradient(90deg, rgb(var(--rr-own)) 0%, rgba(var(--rr-own), 0) 100%);
  box-shadow: 0 0 18px -2px rgba(var(--rr-own), 0.6);
}
body.cs-page .cs-step::after { content: none; display: none; }

body.cs-page .cs-sec--next .cs-step:nth-child(1) { margin-top: 0; --rr-own: 79,184,245; --rr-seam: 30%; --rr-seam-o: 0.5; }
body.cs-page .cs-sec--next .cs-step:nth-child(2) { margin-top: 26px; --rr-own: 56,207,255; --rr-seam: 46%; --rr-seam-o: 0.68; }
body.cs-page .cs-sec--next .cs-step:nth-child(3) { margin-top: 52px; --rr-own: 95,211,196; --rr-seam: 62%; --rr-seam-o: 0.84; }
body.cs-page .cs-sec--next .cs-step:nth-child(4) { margin-top: 78px; --rr-own: 175,221,44; --rr-role: 175,221,44; --rr-seam: 78%; --rr-seam-o: 1; }

/* the WE step: the light crosses over and the card warms with it */
body.cs-page .cs-step[data-role="us"] {
  background:
    radial-gradient(96% 66% at 0% 0%, rgba(175,221,44,0.16) 0%, transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(168deg, rgba(27,44,58,0.6) 0%, rgba(18,32,50,0.5) 58%, rgba(13,24,42,0.42) 100%);
  box-shadow:
    0 0 0 1px rgba(175,221,44,0.34),
    0 26px 62px -30px rgba(2,8,22,0.92),
    0 0 70px -34px rgba(175,221,44,0.7),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
body.cs-page .cs-step--key {
  box-shadow:
    0 0 0 1px rgba(95,211,196,0.36),
    0 26px 62px -30px rgba(2,8,22,0.92),
    0 0 70px -36px rgba(95,211,196,0.7),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

body.cs-page .cs-step-num {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 2.8vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: rgba(var(--rr-own), 0.5);
  -webkit-text-fill-color: rgba(var(--rr-own), 0.5);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  padding: 0;
  margin: 0;
}
body.cs-page .cs-step-role {
  padding: 6px 13px 6px 10px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(var(--rr-role), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--rr-role), 0.5), 0 0 24px -12px rgba(var(--rr-role), 0.95);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgb(var(--rr-role));
  animation: none;
}
/* the base paints these as bright solid chips at (0,3,0); the new language
   wants a quiet tinted capsule, so the override has to match that weight. */
body.cs-page .cs-step[data-role="you"] .cs-step-role,
body.cs-page .cs-step[data-role="us"] .cs-step-role {
  background: rgba(var(--rr-role), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--rr-role), 0.5), 0 0 24px -12px rgba(var(--rr-role), 0.95);
  color: rgb(var(--rr-role));
  -webkit-text-fill-color: rgb(var(--rr-role));
}
body.cs-page .cs-step[data-role="us"] .cs-step-role {
  color: #d6f77e;
  -webkit-text-fill-color: #d6f77e;
}
body.cs-page .cs-role-mark {
  width: 21px;
  height: 21px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(175,221,44,0.9)) drop-shadow(0 2px 4px rgba(2,8,22,0.9));
}
body.cs-page .cs-step-icon {
  width: 48px;
  height: 48px;
  margin: 22px 0 16px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(160deg, rgba(var(--rr-own), 0.2) 0%, rgba(var(--rr-own), 0.05) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--rr-own), 0.36),
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 12px 26px -16px rgba(var(--rr-own), 0.8);
  color: rgb(var(--rr-own));
}
body.cs-page .cs-step h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.22;
  /* lifted toward white for the same reason as the stage titles: the ownership
     colour at full strength reads darker than the copy it heads */
  color: rgb(var(--rr-own));
  color: color-mix(in srgb, rgb(var(--rr-own)) 54%, #ffffff);
  -webkit-text-fill-color: rgb(var(--rr-own));
  -webkit-text-fill-color: color-mix(in srgb, rgb(var(--rr-own)) 54%, #ffffff);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: 0 0 28px rgba(var(--rr-own), 0.38);
  padding: 0;
  margin: 0 0 8px;
}
body.cs-page .cs-step p {
  font-size: 0.9375rem;
  line-height: 1.64;
  color: var(--rr-quiet);
}
body.cs-page .cs-step-key {
  padding: 13px 15px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(150deg, rgba(95,211,196,0.13), rgba(13,26,46,0.9));
  box-shadow: inset 0 0 0 1px rgba(95,211,196,0.34), 0 16px 34px -22px rgba(2,8,22,0.95);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #d3f3ec;
}
body.cs-page .cs-step-key b { color: #8fe8d8; }
body.cs-page .cs-step-key .cs-ico { color: #8fe8d8; }
body.cs-page .cs-step-key::before {
  border-top-color: rgba(95,211,196,0.34);
  border-left-color: rgba(95,211,196,0.34);
  background: #10233c;
}

/* the light arrives along the staircase when the row reveals */
body.cs-page .cs-steps.revealed .cs-step::before {
  animation: rrSeamLight 0.86s var(--rr-ease) both;
}
body.cs-page .cs-steps.revealed .cs-step:nth-child(1)::before { animation-delay: 0.18s; }
body.cs-page .cs-steps.revealed .cs-step:nth-child(2)::before { animation-delay: 0.32s; }
body.cs-page .cs-steps.revealed .cs-step:nth-child(3)::before { animation-delay: 0.46s; }
body.cs-page .cs-steps.revealed .cs-step:nth-child(4)::before { animation-delay: 0.60s; }
@keyframes rrSeamLight {
  0% { opacity: 0; transform: scaleX(0.12); }
  100% { opacity: var(--rr-seam-o, 0.7); transform: scaleX(1); }
}

/* ---- the session: where the handoff lands --------------------------- */
body.cs-page .cs-meet {
  padding: clamp(30px, 3.2vw, 50px);
  border: 0;
  border-radius: var(--rr-r-lg);
  background:
    radial-gradient(56% 92% at 2% 0%, rgba(175,221,44,0.15) 0%, transparent 64%),
    radial-gradient(52% 84% at 100% 100%, rgba(56,207,255,0.12) 0%, transparent 70%),
    linear-gradient(168deg, rgba(26,46,76,0.66) 0%, rgba(16,30,55,0.56) 58%, rgba(11,22,42,0.5) 100%);
  box-shadow:
    0 0 0 1px rgba(178,221,255,0.28),
    0 44px 100px -52px rgba(2,8,22,0.95),
    0 0 90px -44px rgba(175,221,44,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
/* the seam that closes the staircase, with the journey light running into it */
body.cs-page .cs-meet::before {
  left: 4%;
  right: 4%;
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(96deg, rgba(79,184,245,0) 0%, var(--rr-profile) 14%, var(--rr-analysis) 38%, var(--rr-bridge) 62%, var(--rr-plan) 86%, rgba(180,224,58,0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 20% 100%, 100% 100%;
  background-position: -25% 0, 0 0;
  opacity: 0.88;
  animation: rrSeamTravel 11.2s var(--rr-slow) 1s infinite;
}
@keyframes rrSeamTravel {
  0%, 14% { background-position: -25% 0, 0 0; }
  70%, 100% { background-position: 125% 0, 0 0; }
}
/* the handoff node: the moment step 04 becomes step 05 */
body.cs-page .cs-meet::after {
  top: -15px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 26%, rgba(46,78,36,0.95) 0%, rgba(12,24,46,0.99) 74%);
  box-shadow:
    0 0 0 1px rgba(180,224,58,0.55),
    0 0 0 0 rgba(180,224,58,0.26),
    0 0 26px -8px rgba(180,224,58,0.85);
  transform: none;
  animation: rrHandoff 8.4s var(--rr-slow) 1.6s infinite;
}
@keyframes rrHandoff {
  0%, 58%, 100% {
    box-shadow:
      0 0 0 1px rgba(180,224,58,0.55),
      0 0 0 0 rgba(180,224,58,0.26),
      0 0 26px -8px rgba(180,224,58,0.85);
  }
  78% {
    box-shadow:
      0 0 0 1px rgba(180,224,58,0.95),
      0 0 0 15px rgba(180,224,58,0),
      0 0 36px -4px rgba(180,224,58,1);
  }
}
body.cs-page .cs-meet-portrait {
  width: 116px;
  height: 116px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rr-plan) 0%, var(--rr-priority) 46%, var(--rr-analysis) 100%);
  box-shadow:
    0 0 0 1px rgba(232,255,182,0.24),
    0 0 0 9px rgba(175,221,44,0.06),
    0 20px 46px -18px rgba(175,221,44,0.6);
}
body.cs-page .cs-meet-portrait::before,
body.cs-page .cs-meet-portrait::after { content: none; display: none; }
body.cs-page .cs-meet-portrait img { border-radius: 50%; }
body.cs-page .cs-meet-num {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 3.2vw, 3.125rem);
  line-height: 0.9;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--rr-priority);
  -webkit-text-fill-color: var(--rr-priority);
}
body.cs-page .cs-meet-stage {
  padding: 6px 13px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(175,221,44,0.14);
  box-shadow: inset 0 0 0 1px rgba(175,221,44,0.4);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #d6f77e;
}
body.cs-page .cs-meet-title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 3vw, 2.875rem);
  font-weight: 500;
  line-height: 1.04;
  color: var(--rr-ink);
  text-shadow: 0 0 44px rgba(126,193,255,0.26);
}
body.cs-page .cs-meet-lede {
  margin-top: 15px;
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.68;
  color: var(--rr-body);
}
body.cs-page .cs-meet-list { gap: 10px; }
body.cs-page .cs-meet-list li {
  padding: 13px 16px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: rgba(6,14,29,0.44);
  box-shadow: inset 0 0 0 1px rgba(150,196,240,0.13);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--rr-ink);
}
body.cs-page .cs-meet-list .cs-ico { color: var(--rr-plan); }
body.cs-page .cs-meet-list .cs-meet-first {
  grid-column: 1 / -1;
  background: linear-gradient(94deg, rgba(175,221,44,0.17) 0%, rgba(6,14,29,0.44) 64%);
  box-shadow: inset 0 0 0 1px rgba(175,221,44,0.34);
}

/* ============================================================
   WHAT'S INCLUDED — an editorial spread
   A flagship feature row, four accented deliverables, and a full-width
   progress band. Every item carries its own accent seam so the value is
   scannable in one pass.
   ============================================================ */
body.cs-page .cs-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  padding: 0;
}
body.cs-page .cs-dl::before { display: none; }
body.cs-page .cs-dl-item {
  position: relative;
  padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.5vw, 34px) clamp(28px, 2.9vw, 40px);
  border: 0;
  border-radius: var(--rr-r);
  background:
    radial-gradient(92% 62% at 0% 0%, rgba(var(--acc-rgb, 56,207,255), 0.1) 0%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow:
    0 0 0 1px rgba(var(--acc-rgb, 56,207,255), 0.2),
    0 24px 56px -30px rgba(2,8,22,0.92),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
/* the accent seam — the only mark each item needs */
body.cs-page .cs-dl-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(24px, 2.5vw, 34px);
  width: 62px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--acc-rgb, 56,207,255)), rgba(var(--acc-rgb, 56,207,255), 0));
  box-shadow: 0 0 16px -2px rgba(var(--acc-rgb, 56,207,255), 0.75);
}
body.cs-page .cs-dl-item::after { content: none; display: none; }

/* ---- THE FOUR INCLUSIONS, UNBOXED ------------------------------------
   Four equal cards in a 2x2 grid is the most template-like moment on the
   page, and it repeats a shape the steps, the conversations and the fit
   cards already use. From tablet up the four shed their card entirely and
   become an editorial spread: the icon hangs in its own column, the title
   and the copy run beside it, a hairline divides the two columns and each
   row from the next. The feature band and the progress band keep their
   surfaces, so the section reads BAND · SPREAD · BAND rather than
   BOX BOX BOX BOX. */
@media (min-width: 861px) {
  body.cs-page .cs-dl { column-gap: clamp(40px, 4.4vw, 76px); row-gap: 0; }
  body.cs-page .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(18px, 1.8vw, 24px);
    padding: clamp(30px, 3vw, 40px) 0 clamp(30px, 3vw, 40px);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* the hairline between the two columns, and under each row */
  body.cs-page .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide)::before {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-radius: 0;
    background: linear-gradient(90deg,
      rgba(var(--acc-rgb, 56,207,255), 0.42) 0%,
      rgba(150, 196, 240, 0.14) 34%,
      rgba(150, 196, 240, 0.06) 100%);
    box-shadow: none;
  }
  body.cs-page .cs-dl-item:nth-last-child(2)::before,
  body.cs-page .cs-dl-item:nth-last-child(3)::before { opacity: 0.55; }
  body.cs-page .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) .cs-dl-icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    width: 50px;
    height: 50px;
  }
  body.cs-page .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) h3 {
    grid-column: 2;
    margin-top: 2px;
    margin-bottom: 8px;
  }
  body.cs-page .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) p {
    grid-column: 2;
    max-width: 44ch;
  }
  /* the vertical rule that separates the two reading columns */
  body.cs-page .cs-dl-item:nth-child(even):not(.cs-dl-item--feature):not(.cs-dl-item--wide) {
    padding-left: clamp(30px, 3.2vw, 54px);
    box-shadow: inset 1px 0 0 rgba(150, 196, 240, 0.12);
  }
  body.cs-page .cs-dl-item--feature { margin-bottom: clamp(14px, 1.6vw, 22px); }
  body.cs-page .cs-dl-item--wide { margin-top: clamp(30px, 3.2vw, 46px); }
}
body.cs-page .cs-dl-item--feature,
body.cs-page .cs-dl-item--wide { grid-column: 1 / -1; }
body.cs-page .cs-dl-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(160deg, rgba(var(--acc-rgb, 56,207,255), 0.22) 0%, rgba(var(--acc-rgb, 56,207,255), 0.05) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acc-rgb, 56,207,255), 0.38),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 14px 30px -18px rgba(var(--acc-rgb, 56,207,255), 0.85);
  color: rgb(var(--acc-rgb, 56,207,255));
}
body.cs-page .cs-dl-icon::before { content: none; display: none; }
body.cs-page .cs-dl-icon .cs-ico { width: 23px; height: 23px; }
body.cs-page .cs-dl-item h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.24;
  /* the accent at full strength sits DARKER than the body copy under it, which
     inverts the hierarchy — the title is lifted toward white but keeps its hue */
  color: rgb(var(--acc-rgb, 56,207,255));
  color: color-mix(in srgb, rgb(var(--acc-rgb, 56,207,255)) 52%, #ffffff);
  -webkit-text-fill-color: rgb(var(--acc-rgb, 56,207,255));
  -webkit-text-fill-color: color-mix(in srgb, rgb(var(--acc-rgb, 56,207,255)) 52%, #ffffff);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: 0 0 28px rgba(var(--acc-rgb, 56,207,255), 0.34);
  padding: 0;
  margin: 0 0 10px;
}
body.cs-page .cs-dl-item p {
  font-size: 0.96875rem;
  line-height: 1.66;
  color: var(--rr-body);
}

/* the flagship: Steven's own review */
body.cs-page .cs-dl-item--feature {
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(32px, 3.4vw, 50px) clamp(28px, 3vw, 46px);
  background:
    radial-gradient(56% 100% at 2% 0%, rgba(175,221,44,0.15) 0%, transparent 64%),
    radial-gradient(52% 88% at 100% 100%, rgba(56,207,255,0.1) 0%, transparent 70%),
    linear-gradient(168deg, rgba(28,48,74,0.68) 0%, rgba(17,32,56,0.58) 58%, rgba(11,22,42,0.5) 100%);
  box-shadow:
    0 0 0 1px rgba(175,221,44,0.32),
    0 40px 92px -50px rgba(2,8,22,0.95),
    0 0 86px -44px rgba(175,221,44,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
body.cs-page .cs-dl-item--feature h3 {
  font-size: clamp(1.875rem, 2.6vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 12px;
}
body.cs-page .cs-dl-item--feature p {
  font-size: clamp(1rem, 1.3vw, 1.0938rem);
  line-height: 1.7;
  color: #dde8f8;
}
body.cs-page .cs-dl-item--feature .cs-dl-sig {
  margin-top: 22px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 rgba(232,255,182,0.24);
}
body.cs-page .cs-dl-sig-name {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--rr-plan);
}
body.cs-page .cs-dl-sig-title {
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--rr-quiet);
}
body.cs-page .cs-dl-portrait {
  width: 128px;
  height: 128px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rr-plan) 0%, var(--rr-priority) 46%, var(--rr-analysis) 100%);
  box-shadow:
    0 0 0 1px rgba(232,255,182,0.24),
    0 0 0 9px rgba(175,221,44,0.06),
    0 20px 48px -18px rgba(175,221,44,0.6);
}
body.cs-page .cs-dl-portrait::before,
body.cs-page .cs-dl-portrait::after { content: none; display: none; }

/* the progress band that closes the spread */
body.cs-page .cs-dl-item--progress {
  background:
    linear-gradient(100deg, rgba(56,207,255,0.12) 0%, rgba(95,211,196,0.08) 52%, rgba(175,221,44,0.08) 100%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow:
    0 0 0 1px rgba(95,211,196,0.3),
    0 28px 66px -34px rgba(2,8,22,0.92),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
body.cs-page .cs-dl-item--progress .cs-dl-icon {
  color: #10280a;
  background: linear-gradient(150deg, var(--rr-analysis), var(--rr-plan));
  box-shadow: 0 0 0 1px rgba(175,221,44,0.3), 0 16px 34px -18px rgba(56,207,255,0.9);
}
body.cs-page .cs-dl-chips::before {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--rr-quiet);
}
body.cs-page .cs-dl-chips li {
  padding: 7px 14px 7px 11px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(150,196,240,0.07);
  box-shadow: inset 0 0 0 1px rgba(150,196,240,0.2);
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--rr-ink);
}
body.cs-page .cs-dl-chips li::before {
  background: var(--rr-analysis);
  box-shadow: 0 0 10px rgba(56,207,255,0.85);
}

/* the deliverable marks arrive with their cards */
body.cs-page .cs-dl-item.revealed .cs-dl-icon {
  animation: rrDlLift 0.7s var(--rr-ease) 0.16s both;
}
@keyframes rrDlLift {
  0% { transform: translateY(7px) scale(0.92); opacity: 0.35; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ============================================================
   RESPONSIVE — designed at each width, not shrunk
   ============================================================ */

/* The profile band reads as a ledger: three cells, each measuring from its own
   left edge. Distributing the three across the band (left / centre / right) was
   tried first and read as three different alignments rather than as a row --
   these are three distinct facts, not three numeric columns. */
@media (min-width: 861px) {
  body.cs-page .cs-ap-stat { text-align: left; }
  body.cs-page .cs-ap-stat .cs-ap-v { justify-content: flex-start; }
  body.cs-page .cs-ap-stat::after { justify-self: start; }
  body.cs-page .cs-ap-stat:nth-child(2),
  body.cs-page .cs-ap-stat:nth-child(3) { padding-left: clamp(24px, 2.6vw, 42px); }
  /* the three underlines share one length so the row scans as a row */
  body.cs-page .cs-ap-stat:nth-child(2)::after,
  body.cs-page .cs-ap-stat:nth-child(3)::after { width: 62px; }
}

/* two-up steps: the staircase halves rather than disappearing */
@media (max-width: 1180px) {
  body.cs-page .cs-sec--next .cs-step:nth-child(1),
  body.cs-page .cs-sec--next .cs-step:nth-child(3) { margin-top: 0; }
  body.cs-page .cs-sec--next .cs-step:nth-child(2),
  body.cs-page .cs-sec--next .cs-step:nth-child(4) { margin-top: 28px; }
  body.cs-page .cs-ap-note { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}

@media (max-width: 980px) {
  body.cs-page .cs-dl { grid-template-columns: minmax(0, 1fr); }
}

/* the document stacks: the two working regions become two stacked bands */
@media (max-width: 860px) {
  body.cs-page .cs-ap-grid { grid-template-columns: minmax(0, 1fr); }
  body.cs-page .cs-ap-grid > .cs-ap-block:first-child {
    box-shadow: inset 0 -1px 0 rgba(150,196,240,0.13), inset 0 -2px 0 rgba(3,9,20,0.46);
  }
  body.cs-page .cs-ap-changes { display: block; }
  body.cs-page .cs-ap-note {
    display: block;
    grid-template-columns: none;
  }
  body.cs-page .cs-ap-by {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
  }
  body.cs-page .cs-ap-by b { box-shadow: none; padding-bottom: 0; margin-bottom: 5px; }
  body.cs-page .cs-ap-note-text { max-width: none; }
}

@media (max-width: 760px) {
  /* the sheets behind the document tuck in at phone width */
  body.cs-page .cs-product::before { left: 4%; right: 4%; top: -10px; height: 46px; }
  body.cs-page .cs-product::after { left: 8.5%; right: 8.5%; top: -19px; }
  body.cs-page .cs-ap {
    box-shadow:
      0 0 0 1px var(--rr-edge-lit),
      0 28px 58px -32px rgba(2,8,22,0.95),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  body.cs-page .cs-ap-head { align-items: center; padding: 22px 18px 20px; }
  body.cs-page .cs-ap-mark { width: 42px; }
  body.cs-page .cs-ap-kicker { margin-bottom: 7px; letter-spacing: 0.14em; }
  body.cs-page .cs-ap-goal { padding: 15px 18px; }
  body.cs-page .cs-ap-stat { padding: 16px 12px 18px; }
  body.cs-page .cs-ap-stat:first-child { padding-left: 18px; }
  body.cs-page .cs-ap-stat:last-child { padding-right: 18px; }
  body.cs-page .cs-ap-k { font-size: 0.5938rem; letter-spacing: 0.1em; }
  body.cs-page .cs-ap-v { margin-top: 8px; font-size: 1.75rem; }
  body.cs-page .cs-ap-meter { margin-top: 13px; }
  body.cs-page .cs-ap-stat:nth-child(2)::after,
  body.cs-page .cs-ap-stat:nth-child(3)::after { width: 32px; margin-top: 16px; }
  body.cs-page .cs-ap-block { padding: 24px 18px 26px; }
  body.cs-page .cs-ap-h {
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 13px;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
  body.cs-page .cs-ap-h::after { width: 64px; }
  body.cs-page .cs-ap-grid > .cs-ap-block:nth-child(2) .cs-ap-h::after { width: 96px; }
  body.cs-page .cs-ap-changes li,
  body.cs-page .cs-ap-moves li { padding: 14px 0 15px; }
  body.cs-page .cs-ap-changes b,
  body.cs-page .cs-mv-text b { font-size: 0.9688rem; }
  body.cs-page .cs-mv-state {
    margin-top: 10px;
    padding: 6px 13px;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }
  body.cs-page .cs-ap-note { padding: 26px 18px 30px; }
  body.cs-page .cs-ap-seat { width: 72px; height: 72px; }
  body.cs-page .cs-ap-by b { font-size: 1.1875rem; letter-spacing: 0.05em; }
  body.cs-page .cs-ap-note-text { font-size: 1.0625rem; line-height: 1.72; }
  body.cs-page .cs-ap-foot { padding: 18px 18px 20px; }
  /* a compliance note never drops below comfortable reading size */
  body.cs-page .cs-ap-disc { margin-top: 10px; font-size: 0.75rem; line-height: 1.55; }

  /* the staircase becomes one column: the light still runs down it */
  body.cs-page .cs-steps { gap: 16px; }
  body.cs-page .cs-sec--next .cs-step:nth-child(1),
  body.cs-page .cs-sec--next .cs-step:nth-child(2),
  body.cs-page .cs-sec--next .cs-step:nth-child(3),
  body.cs-page .cs-sec--next .cs-step:nth-child(4) { margin-top: 0; }
  body.cs-page .cs-step { padding: 22px 18px 24px; }
  body.cs-page .cs-step::before { left: 18px; }
  body.cs-page .cs-step-num { font-size: 2rem; }
  body.cs-page .cs-step-icon { width: 44px; height: 44px; margin: 14px 14px 0 0; }
  body.cs-page .cs-step h3 { font-size: 1.1875rem; margin: 14px 0 0; }
  body.cs-page .cs-step p { margin-top: 6px; }
  body.cs-page .cs-step-key { margin-top: 16px; padding: 12px 14px; }
  body.cs-page .cs-meet { padding: 26px 20px 28px; border-radius: var(--rr-r-lg); }
  body.cs-page .cs-meet::after { top: -14px; width: 28px; height: 28px; margin-left: -14px; }
  body.cs-page .cs-meet-portrait { width: 104px; height: 104px; }
  body.cs-page .cs-meet-title { font-size: clamp(1.875rem, 8vw, 2.25rem); }
  body.cs-page .cs-meet-lede { font-size: 1rem; }

  /* the spread becomes a ruled list; the two feature panels keep their box */
  body.cs-page .cs-dl-item:not(.cs-dl-item--feature):not(.cs-dl-item--wide) {
    box-shadow: none;
  }
  body.cs-page .cs-dl-item--feature { padding: 30px 20px 28px; }
  body.cs-page .cs-dl-item--feature h3 { font-size: clamp(1.625rem, 7vw, 2rem); }
  body.cs-page .cs-dl-item--feature .cs-dl-sig { margin-top: 18px; padding-top: 14px; }
  body.cs-page .cs-dl-item--wide { padding: 24px 18px 22px; }
  body.cs-page .cs-dl-item h3 { font-size: 1.125rem; margin-bottom: 6px; }
  body.cs-page .cs-dl-item p { font-size: 0.9375rem; }
  body.cs-page .cs-dl-chips li { padding: 7px 12px 7px 10px; font-size: 0.75rem; }
}

@media (max-width: 400px) {
  body.cs-page .cs-ap-stat { padding-inline: 9px; }
  body.cs-page .cs-ap-stat:first-child { padding-left: 15px; }
  body.cs-page .cs-ap-stat:last-child { padding-right: 15px; }
  body.cs-page .cs-ap-k { font-size: 0.5625rem; letter-spacing: 0.07em; }
  body.cs-page .cs-ap-v { font-size: 1.5rem; }
  body.cs-page .cs-ap-v small { font-size: 0.6875rem; }
  body.cs-page .cs-ap-stat:nth-child(2)::after,
  body.cs-page .cs-ap-stat:nth-child(3)::after { width: 24px; }
  body.cs-page .cs-ap-head,
  body.cs-page .cs-ap-goal,
  body.cs-page .cs-ap-block,
  body.cs-page .cs-ap-note,
  body.cs-page .cs-ap-foot { padding-inline: 15px; }
  body.cs-page .cs-ap-by { gap: 13px; }
  body.cs-page .cs-ap-seat { width: 64px; height: 64px; }
  body.cs-page .cs-ap-by b { font-size: 1.0625rem; }
  body.cs-page .cs-ap-note-text { font-size: 1rem; }
  body.cs-page .cs-mv-state { font-size: 0.5938rem; padding: 6px 11px; }
}

/* ============================================================
   THE ARGUMENT — difference, thesis, destination, curriculum, questions
   The sections that carry the page's reasoning rather than its deliverable.
   Each is composed differently on purpose so the scroll never repeats.

   One idea runs through all of them: the page is always comparing a
   profile as it is today against where it is going. So the quiet side is
   genuinely quiet -- shallower, desaturated, unlit -- and the strategy
   side is a lit volume with air and light inside it. The reader should
   read the difference before reading a word.
   ============================================================ */

/* ============================================================
   1 · THE DIFFERENCE — a flat column beside a lit one
   ============================================================ */
/* the first half of the headline is the common approach: it is stated,
   not celebrated. The second half carries the gradient italic. */
body.cs-page .cs-diff-a { color: #a9bed9; }
body.cs-page .cs-diff-a::after {
  width: clamp(120px, 14vw, 196px);
  height: 2px;
  margin: 0.6em auto 0.44em;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--rr-analysis) 30%, var(--rr-priority) 62%, var(--rr-plan) 82%, transparent 100%);
}

/* the table itself: one grid, three unequal columns. The lit column is a
   real volume behind the cells, not a tint on each cell. */
body.cs-page .cs-compare {
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 0.78fr) minmax(0, 1.62fr);
  max-width: 1180px;
  border-radius: var(--rr-r-lg);
  overflow: hidden;
}
body.cs-page .cs-compare-head,
body.cs-page .cs-compare-row { grid-template-columns: subgrid; }

/* THE STRATEGY VOLUME — the third column, lit from top and bottom, with a
   slow analysis light travelling down it. This is the only ambient motion
   in the section, and it belongs to the column it is arguing for. */
body.cs-page .cs-compare-glow {
  display: block;
  position: relative;
  grid-column: 3;
  grid-row: 1 / span 6;
  z-index: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(130% 40% at 50% 0%, rgba(56, 207, 255, 0.20) 0%, transparent 70%),
    radial-gradient(124% 44% at 50% 100%, rgba(175, 221, 44, 0.17) 0%, transparent 72%),
    linear-gradient(180deg, rgba(25, 49, 89, 0.76) 0%, rgba(15, 31, 59, 0.6) 100%);
  box-shadow:
    inset 1px 0 0 rgba(178, 221, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    -30px 0 64px -42px rgba(56, 207, 255, 0.9);
}
body.cs-page .cs-compare-glow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 26%;
  bottom: auto;
  width: auto;
  height: 42%;
  border-radius: 0;
  opacity: 0.6;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, rgba(126, 226, 255, 0.11) 44%, rgba(180, 224, 58, 0.08) 74%, transparent 100%);
  animation: rrCompareSweep 15s var(--rr-slow) infinite;
}

/* the head: the common column steps back, the TaxFunders column steps up */
body.cs-page .cs-compare-head { padding: 0; border: 0; box-shadow: inset 0 -1px 0 rgba(150, 196, 240, 0.16); }
body.cs-page .cs-compare-col { padding: 22px 22px 18px; border: 0; }
body.cs-page .cs-compare-col--from { color: #6f8199; filter: saturate(0.22); }
body.cs-page .cs-compare-col--from b { font-size: 0.75rem; letter-spacing: 0.15em; color: #7d90ac; }
body.cs-page .cs-compare-col--from small { color: #61748c; }
body.cs-page .cs-compare-col--from .cs-ico {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(150, 196, 240, 0.18);
  color: #5d7089;
}
body.cs-page .cs-compare-col--to { padding: 22px 28px 18px; color: var(--rr-ink); }
body.cs-page .cs-compare-col--to b { font-size: 0.875rem; letter-spacing: 0.14em; color: #f4f9ff; }
body.cs-page .cs-compare-col--to small { font-weight: 600; letter-spacing: 0.05em; color: var(--rr-plan); }
body.cs-page .cs-compare-col--to .cs-shield {
  width: 44px;
  filter: drop-shadow(0 0 16px rgba(56, 207, 255, 0.5)) drop-shadow(0 0 34px rgba(175, 221, 44, 0.24));
}

body.cs-page .cs-compare-row { border: 0; box-shadow: inset 0 -1px 0 rgba(150, 196, 240, 0.1); }
body.cs-page .cs-compare > .cs-compare-row:last-child { box-shadow: none; }

body.cs-page .cs-compare-area {
  gap: 16px;
  padding: 23px 22px 23px 0;
  border: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.45vw, 1.4375rem);
  line-height: 1.16;
  color: var(--rr-ink);
}
body.cs-page .cs-compare-mark {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(160deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.26) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.06) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.38),
    0 12px 26px -18px rgba(var(--acc-rgb, 56, 207, 255), 0.95);
  color: rgb(var(--acc-rgb, 56, 207, 255));
}

/* the common approach: shallower, smaller, desaturated, unlit */
body.cs-page .cs-compare-from {
  padding: 23px 22px 23px 48px;
  border: 0;
  font-size: 0.875rem;
  line-height: 1.62;
  color: #75899f;
  background: rgba(4, 10, 22, 0.46);
  box-shadow: inset 0 0 0 1px rgba(150, 196, 240, 0.045);
  filter: saturate(0.25);
}
body.cs-page .cs-compare-from::before {
  left: 20px;
  top: 30px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(150, 196, 240, 0.22);
  background: linear-gradient(rgba(126, 147, 176, 0.7), rgba(126, 147, 176, 0.7)) center / 6px 1px no-repeat;
}

/* the TaxFunders approach: larger, brighter, sitting inside the lit volume */
body.cs-page .cs-compare-to {
  padding: 23px 28px 23px 58px;
  border: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.56;
  color: #f4f9ff;
  background: none;
  text-shadow: 0 1px 16px rgba(3, 10, 24, 0.65);
  transition: background 0.42s var(--rr-ease);
}
body.cs-page .cs-compare-to::before {
  left: 22px;
  top: 25px;
  width: 26px;
  height: 23px;
  filter: drop-shadow(0 0 10px rgba(56, 207, 255, 0.55));
}
body.cs-page .cs-compare-row:hover .cs-compare-to {
  background: linear-gradient(90deg, rgba(56, 207, 255, 0.09) 0%, rgba(175, 221, 44, 0.05) 68%, transparent 100%);
}
body.cs-page .cs-compare-tag { display: none; }

/* the rows arrive left to right, the direction the argument runs */
body.cs-page .cs-compare.revealed .cs-compare-row { animation: rrRowIn 0.72s var(--rr-ease) backwards; }
body.cs-page .cs-compare.revealed > .cs-compare-row:nth-child(3) { animation-delay: 0.1s; }
body.cs-page .cs-compare.revealed > .cs-compare-row:nth-child(4) { animation-delay: 0.18s; }
body.cs-page .cs-compare.revealed > .cs-compare-row:nth-child(5) { animation-delay: 0.26s; }
body.cs-page .cs-compare.revealed > .cs-compare-row:nth-child(6) { animation-delay: 0.34s; }
body.cs-page .cs-compare.revealed > .cs-compare-row:nth-child(7) { animation-delay: 0.42s; }

/* ============================================================
   2 · THE UNIFIED QUOTE — the page's held breath
   One statement, one size, one signature. The shield is centred and
   almost invisible behind the words; a slow light drifts across them.
   ============================================================ */
body.cs-page .cs-thesis-band { padding: clamp(100px, 10.4vw, 176px) 0; background: none; border: 0; }
body.cs-page .cs-thesis-atmos {
  background:
    radial-gradient(62% 84% at 50% 50%, rgba(22, 58, 126, 0.5) 0%, transparent 74%),
    radial-gradient(40% 54% at 16% 26%, rgba(10, 62, 132, 0.34) 0%, transparent 76%),
    radial-gradient(38% 52% at 86% 76%, rgba(74, 132, 40, 0.2) 0%, transparent 76%),
    linear-gradient(180deg, var(--rr-void) 0%, #071223 48%, var(--rr-void) 100%);
}
/* the band's two edges pick the journey ramp up from the section above
   and hand it down to the next one */
body.cs-page .cs-thesis-atmos::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 10%, rgba(56, 207, 255, 0.26) 36%, rgba(175, 221, 44, 0.3) 68%, transparent 92%),
    linear-gradient(90deg, transparent 14%, rgba(56, 207, 255, 0.14) 40%, rgba(175, 221, 44, 0.17) 70%, transparent 88%);
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
}
/* the shield was pinned to the right edge and read as a crop. It is now
   centred behind the words at a whisper. */
body.cs-page .cs-thesis-watermark {
  left: 50%;
  right: auto;
  top: 50%;
  width: min(680px, 58vw);
  opacity: 0.042;
  filter: saturate(0.45);
  transform: translate(-50%, -50%);
}

body.cs-page .cs-thesis { position: relative; max-width: 1060px; text-align: center; }
/* the light that moves across the statement */
body.cs-page .cs-thesis::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(1060px, 94%);
  height: 136%;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(52% 58% at 34% 44%, rgba(56, 207, 255, 0.17) 0%, transparent 70%),
    radial-gradient(46% 54% at 72% 60%, rgba(175, 221, 44, 0.11) 0%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: rrThesisLight 22s ease-in-out infinite alternate;
}
body.cs-page .cs-sig,
body.cs-page .cs-beats { position: relative; z-index: 1; }

body.cs-page .cs-sig {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin: 0 auto clamp(30px, 3.4vw, 48px);
  padding: 0;
  filter: none;
}
body.cs-page .cs-sig-rule { display: none; }
body.cs-page .cs-sig-shield {
  width: 40px;
  filter: drop-shadow(0 0 16px rgba(56, 207, 255, 0.5)) drop-shadow(0 0 36px rgba(175, 221, 44, 0.22));
}
body.cs-page .cs-sig-text {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background-image: linear-gradient(96deg, var(--rr-analysis) 0%, var(--rr-bridge) 46%, var(--rr-plan) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* background-clip paints inside the box: give the box the descender room
     back, and take the same amount off the bottom so nothing shifts */
  padding-bottom: 0.24em;
  margin-bottom: calc(0px - 0.24em);
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(56, 207, 255, 0.26));
  animation: none;
}

/* the quote: three sentences, one size, one voice growing in certainty.
   em here resolves against .cs-beats' own 16px, not the quote type. */
body.cs-page .cs-beats { display: block; max-width: min(100%, 1000px); margin: 0 auto; }
body.cs-page .cs-beats::before,
body.cs-page .cs-beats::after { content: none; display: none; }
body.cs-page .cs-beat-k { display: none; }
body.cs-page .cs-beat {
  display: block;
  grid-template-columns: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
body.cs-page .cs-beat + .cs-beat { margin-top: clamp(4px, 0.55vw, 11px); }
body.cs-page .cs-beat::before,
body.cs-page .cs-beat::after { content: none; display: none; }
body.cs-page .cs-beat .cs-beat-t {
  display: block;
  padding: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.8vw, 3.375rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
body.cs-page .cs-beat--1 .cs-beat-t { color: #8496b5; }
body.cs-page .cs-beat--2 .cs-beat-t { color: #bfd4f0; }
body.cs-page .cs-beat--3 .cs-beat-t { color: #ffffff; text-shadow: 0 0 64px rgba(130, 205, 255, 0.2); }
body.cs-page .cs-beat--3 .cs-beat-t .cs-line { display: inline; }
body.cs-page .cs-beat--3 .cs-beat-t .cs-line:first-child::after { content: ' '; }

body.cs-page .cs-thesis.revealed .cs-beat { animation: rrBeatIn 0.9s var(--rr-ease) backwards; }
body.cs-page .cs-thesis.revealed .cs-beat--1 { animation-delay: 0.06s; }
body.cs-page .cs-thesis.revealed .cs-beat--2 { animation-delay: 0.24s; }
body.cs-page .cs-thesis.revealed .cs-beat--3 { animation-delay: 0.42s; }

/* ============================================================
   3 · WHERE YOU'RE HEADED — a profile today, a destination tomorrow
   ============================================================ */
/* the lead column ends on the journey ramp itself, so the message is
   literally pointed at the destination beside it */
body.cs-page .cs-fit-lead::after {
  content: '';
  display: block;
  width: min(300px, 74%);
  height: 3px;
  margin: clamp(30px, 3.4vw, 46px) auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(79, 184, 245, 0) 0%, var(--rr-profile) 14%, var(--rr-analysis) 36%,
    var(--rr-bridge) 54%, var(--rr-priority) 74%, var(--rr-plan) 90%, rgba(180, 224, 58, 0) 100%);
  background-size: 220% 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  box-shadow: 0 0 30px -6px var(--rr-glow-lime);
}
body.cs-page .cs-fit-lead.revealed::after { animation: rrFitRun 14s ease-in-out infinite alternate; }

body.cs-page .cs-fit-main { display: grid; gap: clamp(12px, 1.4vw, 18px); }

/* the destination panel: lit from the top-left corner, with a horizon of
   light along its bottom edge -- the thing the profile is heading for */
body.cs-page .cs-home {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3vw, 46px);
  border-radius: var(--rr-r-lg);
  background:
    radial-gradient(64% 56% at 6% 0%, rgba(175, 221, 44, 0.13) 0%, transparent 62%),
    radial-gradient(96% 44% at 50% 120%, rgba(56, 207, 255, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow:
    0 0 0 1px rgba(178, 221, 255, 0.2),
    0 34px 78px -38px rgba(2, 8, 22, 0.96),
    0 0 74px -34px var(--rr-glow-lime);
}
body.cs-page .cs-home::before {
  content: '';
  position: absolute;
  top: auto;
  bottom: 0;
  left: 8%;
  right: 8%;
  width: auto;
  height: 2px;
  border-radius: 2px;
  opacity: 0.72;
  background: linear-gradient(90deg, transparent 0%, var(--rr-analysis) 34%, var(--rr-plan) 74%, transparent 100%);
}
body.cs-page .cs-home-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background: rgba(175, 221, 44, 0.14);
  box-shadow: inset 0 0 0 1px rgba(175, 221, 44, 0.36);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #daf986;
}
body.cs-page .cs-home-top { margin-top: clamp(20px, 2.2vw, 28px); gap: 20px; }
/* the lime tile is hard-set, never by assigning --acc on a .cs-* element */
body.cs-page .cs-home-icon {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(160deg, rgba(175, 221, 44, 0.28) 0%, rgba(175, 221, 44, 0.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(175, 221, 44, 0.42), 0 14px 30px -18px rgba(175, 221, 44, 0.95);
  color: #cfef67;
}
body.cs-page .cs-scene-icon,
body.cs-page .cs-voice-icon {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(160deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.24) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.36);
  color: rgb(var(--acc-rgb, 56, 207, 255));
}
body.cs-page .cs-home-icon::before,
body.cs-page .cs-scene-icon::before,
body.cs-page .cs-voice-icon::before { content: none; display: none; }
body.cs-page .cs-home h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4vw, 2.4375rem);
  line-height: 1.1;
  color: var(--rr-ink);
}
body.cs-page .cs-home > p {
  margin-top: clamp(18px, 1.9vw, 24px);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--rr-body);
}
body.cs-page .cs-home > .cs-home-note {
  margin-top: clamp(18px, 1.9vw, 24px);
  padding: 15px 17px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: rgba(150, 196, 240, 0.06);
  box-shadow: inset 0 0 0 1px rgba(150, 196, 240, 0.16);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rr-body);
}

/* the five scenarios: one box around them was one box too many, and five
   identical cards read as one card five times. Two surface weights
   alternate, and the accent edge only lands on the lit ones. */
body.cs-page .cs-scenes {
  display: grid;
  gap: clamp(9px, 1vw, 13px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  list-style: none;
}
body.cs-page .cs-scenes::before { content: none; display: none; }
body.cs-page .cs-scenes li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  margin: 0;
  padding: clamp(18px, 2vw, 25px) clamp(18px, 2vw, 27px);
  border: 0;
  border-radius: var(--rr-r);
  transition: transform 0.42s var(--rr-ease), box-shadow 0.42s var(--rr-ease);
}
body.cs-page .cs-scenes li::before,
body.cs-page .cs-scenes li::after { content: none; display: none; }
body.cs-page .cs-scenes li:nth-child(odd) {
  background: linear-gradient(104deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.1) 0%, rgba(16, 31, 58, 0.46) 58%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.22),
    inset 3px 0 0 rgba(var(--acc-rgb, 56, 207, 255), 0.72),
    0 18px 42px -30px rgba(2, 8, 22, 0.96);
}
body.cs-page .cs-scenes li:nth-child(even) {
  background: linear-gradient(256deg,
    rgba(var(--acc-rgb, 56, 207, 255), 0.055) 0%, rgba(8, 17, 34, 0.5) 62%);
  box-shadow: inset 0 0 0 1px rgba(150, 196, 240, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.cs-page .cs-scenes li:nth-child(even) .cs-scene-icon {
  background: none;
  border-radius: var(--rr-r-pill);
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.45);
}
body.cs-page .cs-scenes li:hover {
  transform: translateX(5px);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.44),
    inset 3px 0 0 rgba(var(--acc-rgb, 56, 207, 255), 0.9),
    0 24px 48px -28px rgba(2, 8, 22, 0.98),
    0 0 44px -26px rgba(var(--acc-rgb, 56, 207, 255), 0.85);
}
body.cs-page .cs-scenes h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.32; color: var(--rr-ink); }
body.cs-page .cs-scenes p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.62; color: var(--rr-body); }
body.cs-page .cs-scenes.revealed li { animation: rrSceneIn 0.7s var(--rr-ease) backwards; }
body.cs-page .cs-scenes.revealed li:nth-child(1) { animation-delay: 0.06s; }
body.cs-page .cs-scenes.revealed li:nth-child(2) { animation-delay: 0.14s; }
body.cs-page .cs-scenes.revealed li:nth-child(3) { animation-delay: 0.22s; }
body.cs-page .cs-scenes.revealed li:nth-child(4) { animation-delay: 0.3s; }
body.cs-page .cs-scenes.revealed li:nth-child(5) { animation-delay: 0.38s; }

/* ============================================================
   4 · THE PART THAT STAYS WITH YOU — educational, not another service block
   The left column earns its height with larger type rather than padding.
   ============================================================ */
body.cs-page .cs-learn { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.06fr); gap: clamp(36px, 4.6vw, 80px); }
body.cs-page .cs-learn-copy .cs-h2 { font-size: clamp(2.25rem, 3.2vw, 3.125rem); }
body.cs-page .cs-learn-copy .cs-body {
  max-width: 46ch;
  font-size: clamp(1rem, 1.08vw, 1.125rem);
  line-height: 1.74;
}
body.cs-page .cs-learn-chip {
  max-width: 46ch;
  margin-top: clamp(26px, 2.8vw, 36px);
  padding: 17px 21px;
  gap: 13px;
  border: 0;
  border-radius: var(--rr-r);
  background: linear-gradient(104deg, rgba(175, 221, 44, 0.14) 0%, rgba(16, 31, 58, 0.4) 72%);
  box-shadow: inset 0 0 0 1px rgba(175, 221, 44, 0.3), 0 0 48px -28px var(--rr-glow-lime);
  font-size: 1rem;
  line-height: 1.55;
  color: #e6f3cc;
}

body.cs-page .cs-learn-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3.2vw, 48px) clamp(26px, 2.8vw, 42px) clamp(18px, 2vw, 30px);
  border-radius: var(--rr-r-lg);
  background:
    radial-gradient(78% 48% at 100% 0%, rgba(56, 207, 255, 0.14) 0%, transparent 66%),
    radial-gradient(72% 46% at 0% 100%, rgba(175, 221, 44, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow: 0 0 0 1px rgba(178, 221, 255, 0.18), 0 38px 84px -40px rgba(2, 8, 22, 0.96);
}
body.cs-page .cs-learn-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  opacity: 0.85;
  background: linear-gradient(90deg, transparent 0%, var(--rr-analysis) 34%, var(--rr-plan) 74%, transparent 100%);
}
body.cs-page .cs-learn-panel::after { content: none; display: none; }
body.cs-page .cs-learn-title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 2.9vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(96deg, #ffffff 0%, var(--rr-analysis) 50%, var(--rr-plan) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  box-shadow: none;
  /* the clip shears descenders, so the box keeps 0.24em and the margin
     below it is written net of exactly that much */
  padding-bottom: 0.24em;
  margin: 0 0 calc(clamp(22px, 2.4vw, 34px) - 0.24em);
}
body.cs-page .cs-learn-title::before,
body.cs-page .cs-learn-title::after { content: none; display: none; }

body.cs-page .cs-learn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 58px); }
body.cs-page .cs-learn-list li {
  column-gap: 17px;
  padding: clamp(18px, 1.9vw, 25px) 0;
  border: 0;
  box-shadow: none;
}
body.cs-page .cs-learn-list li:nth-child(n + 3) { box-shadow: inset 0 1px 0 rgba(150, 196, 240, 0.11); }
/* the six numbers run the journey ramp, profile end to plan end */
body.cs-page .cs-learn-n {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 0.08em;
  color: var(--rr-analysis);
}
body.cs-page .cs-learn-list li:nth-child(1) .cs-learn-n { color: var(--rr-profile); }
body.cs-page .cs-learn-list li:nth-child(2) .cs-learn-n { color: var(--rr-analysis); }
body.cs-page .cs-learn-list li:nth-child(3) .cs-learn-n { color: var(--rr-bridge); }
body.cs-page .cs-learn-list li:nth-child(4) .cs-learn-n { color: var(--rr-priority); }
body.cs-page .cs-learn-list li:nth-child(5) .cs-learn-n { color: #a4dd4f; }
body.cs-page .cs-learn-list li:nth-child(6) .cs-learn-n { color: var(--rr-plan); }
body.cs-page .cs-learn-list b { font-size: 1.0625rem; font-weight: 600; line-height: 1.34; color: var(--rr-ink); }
body.cs-page .cs-learn-list li > span:last-child {
  margin-top: 7px;
  font-size: 0.9062rem;
  line-height: 1.62;
  color: var(--rr-body);
}
body.cs-page .cs-learn-panel.revealed .cs-learn-list li { animation: rrLessonIn 0.62s var(--rr-ease) backwards; }
body.cs-page .cs-learn-panel.revealed .cs-learn-list li:nth-child(1) { animation-delay: 0.08s; }
body.cs-page .cs-learn-panel.revealed .cs-learn-list li:nth-child(2) { animation-delay: 0.14s; }
body.cs-page .cs-learn-panel.revealed .cs-learn-list li:nth-child(3) { animation-delay: 0.2s; }
body.cs-page .cs-learn-panel.revealed .cs-learn-list li:nth-child(4) { animation-delay: 0.26s; }
body.cs-page .cs-learn-panel.revealed .cs-learn-list li:nth-child(5) { animation-delay: 0.32s; }
body.cs-page .cs-learn-panel.revealed .cs-learn-list li:nth-child(6) { animation-delay: 0.38s; }

/* ============================================================
   5 · SOUND FAMILIAR — four sentences people actually say
   The card is a spoken turn: the question on the open surface, a lit
   seam, then the answer. Odd and even cards mirror, so the column reads
   as a conversation rather than four clones.
   ============================================================ */
body.cs-page .cs-voices { gap: clamp(26px, 3vw, 42px); max-width: 1160px; }
body.cs-page .cs-voice {
  padding: 0;
  border: 0;
  border-radius: var(--rr-r-lg) var(--rr-r-lg) var(--rr-r-lg) var(--rr-r-sm);
  overflow: hidden;
  background:
    radial-gradient(88% 58% at 0% 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.13) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow:
    0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.22),
    0 30px 70px -38px rgba(2, 8, 22, 0.96);
  transition: transform 0.42s var(--rr-ease), box-shadow 0.42s var(--rr-ease);
}
body.cs-page .cs-voice::before,
body.cs-page .cs-voice::after { content: none; display: none; }
body.cs-page .cs-voice:nth-child(even) {
  margin-top: clamp(42px, 5vw, 76px);
  border-radius: var(--rr-r-lg) var(--rr-r-lg) var(--rr-r-sm) var(--rr-r-lg);
  background:
    radial-gradient(88% 58% at 100% 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.13) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
}
body.cs-page .cs-voice:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.42),
    0 38px 84px -36px rgba(2, 8, 22, 0.98),
    0 0 62px -34px rgba(var(--acc-rgb, 56, 207, 255), 0.85);
}
body.cs-page .cs-voice blockquote { padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px); }
body.cs-page .cs-voice blockquote p {
  padding-left: 34px;
  font-family: var(--font-serif);
  font-size: clamp(1.4375rem, 2.05vw, 1.9375rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: #e9f1ff;
}
body.cs-page .cs-voice blockquote p::before {
  left: -6px;
  top: -0.14em;
  font-size: 3.75rem;
  opacity: 0.5;
  color: rgb(var(--acc-rgb, 56, 207, 255));
}
/* the connector sits on a seam that lights in the row's own accent and
   fades away across the card */
body.cs-page .cs-voice-link {
  width: 34px;
  height: 34px;
  margin-left: clamp(24px, 2.6vw, 34px);
  border: 0;
  border-radius: var(--rr-r-pill);
  background: linear-gradient(160deg, rgba(var(--acc-rgb, 56, 207, 255), 0.3) 0%, rgba(9, 18, 36, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--acc-rgb, 56, 207, 255), 0.55),
    0 0 28px -10px rgba(var(--acc-rgb, 56, 207, 255), 0.95);
  color: rgb(var(--acc-rgb, 56, 207, 255));
}
body.cs-page .cs-voice-link::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
body.cs-page .cs-voice:nth-child(even) .cs-voice-link {
  justify-self: end;
  margin-left: 0;
  margin-right: clamp(24px, 2.6vw, 34px);
}
body.cs-page .cs-voice figcaption {
  padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px) clamp(26px, 2.8vw, 38px);
  border: 0;
  background-image:
    linear-gradient(90deg, rgba(var(--acc-rgb, 56, 207, 255), 0.7) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.14) 58%, transparent 100%),
    linear-gradient(104deg, rgba(var(--acc-rgb, 56, 207, 255), 0.11) 0%, rgba(6, 14, 30, 0.42) 72%);
  background-size: 100% 1px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 3px 0 0 rgba(var(--acc-rgb, 56, 207, 255), 0.55);
}
body.cs-page .cs-voice:nth-child(even) figcaption {
  background-image:
    linear-gradient(270deg, rgba(var(--acc-rgb, 56, 207, 255), 0.7) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.14) 58%, transparent 100%),
    linear-gradient(256deg, rgba(var(--acc-rgb, 56, 207, 255), 0.11) 0%, rgba(6, 14, 30, 0.42) 72%);
  box-shadow: inset -3px 0 0 rgba(var(--acc-rgb, 56, 207, 255), 0.55);
}
body.cs-page .cs-voice-label { font-size: 0.6875rem; letter-spacing: 0.18em; color: rgb(var(--acc-rgb, 56, 207, 255)); }
body.cs-page .cs-voice-text { font-size: 1.0312rem; font-weight: 500; line-height: 1.62; color: #dbe7f8; }
body.cs-page .cs-voice.revealed .cs-voice-link { animation: rrVoiceDrop 0.8s var(--rr-ease) 0.22s backwards; }

/* ============================================================
   6 · FAQ · THE CLOSE · THE LEGAL PANEL
   ============================================================ */
/* one continuous sheet, not eight boxes stacked inside a ninth */
body.cs-page .cs-sec--faq .faq-list {
  border: 0;
  border-radius: var(--rr-r-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
  box-shadow: var(--rr-halo);
}
body.cs-page .cs-sec--faq .faq-list::before {
  left: 10%;
  right: 10%;
  background: linear-gradient(90deg, transparent 0%, var(--rr-analysis) 34%, var(--rr-plan) 74%, transparent 100%);
}
body.cs-page .cs-sec--faq .faq-item {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(150, 196, 240, 0.1);
  transition: background 0.4s var(--rr-ease);
}
body.cs-page .cs-sec--faq .faq-item:first-child { box-shadow: none; }
body.cs-page .cs-sec--faq .faq-item.open {
  background: linear-gradient(104deg, rgba(175, 221, 44, 0.09) 0%, transparent 62%);
  box-shadow: inset 0 1px 0 rgba(150, 196, 240, 0.1), inset 3px 0 0 var(--rr-plan);
}
body.cs-page .cs-sec--faq .faq-question {
  padding: clamp(20px, 2.1vw, 27px) clamp(20px, 2.2vw, 28px);
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.4vw, 1.375rem);
  line-height: 1.3;
  color: var(--rr-ink);
}
body.cs-page .cs-sec--faq .faq-question::before { width: 26px; color: var(--rr-priority); }
body.cs-page .cs-sec--faq .faq-question:hover { color: #ffffff; }
body.cs-page .cs-sec--faq .faq-answer-inner {
  padding: 0 clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 30px) clamp(46px, 4.6vw, 68px);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--rr-body);
}

/* the last word: one focal halo, one statement, one action */
body.cs-page .cs-close { padding: clamp(92px, 10vw, 168px) 0; }
body.cs-page .cs-close-inner { position: relative; text-align: center; }
body.cs-page .cs-close-inner::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: min(1120px, 98vw);
  height: min(640px, 98vw);
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(44% 46% at 42% 40%, rgba(56, 207, 255, 0.17) 0%, transparent 70%),
    radial-gradient(40% 44% at 64% 64%, rgba(175, 221, 44, 0.16) 0%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: rrCloseHalo 20s ease-in-out infinite alternate;
}
body.cs-page .cs-close-inner > * { position: relative; z-index: 1; }
body.cs-page .cs-close .cs-close-title {
  max-width: min(100%, 1080px);
  margin: 0 auto clamp(34px, 3.8vw, 50px);
  font-size: clamp(2.5rem, 4.1vw, 3.875rem);
  line-height: 1.05;
}
body.cs-page .cs-close .cs-close-alt { margin-top: clamp(20px, 2.2vw, 28px); font-size: 0.9375rem; }

/* the compliance disclosure: legible first, quiet second. It is set
   LARGER and BRIGHTER than the base, never dimmed. */
body.cs-page .cs-legal {
  max-width: 1120px;
  padding: clamp(26px, 2.8vw, 40px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 42px);
  border-radius: var(--rr-r-lg);
}
body.cs-page .cs-legal .cs-legal-title {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(150, 196, 240, 0.18);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: var(--rr-ink);
}
body.cs-page .cs-legal .cs-legal-title .cs-ico { color: var(--rr-analysis); }
body.cs-page .cs-legal-grid { gap: 22px clamp(28px, 3.6vw, 56px); }
body.cs-page .cs-legal .cs-legal-item p { font-size: 0.9375rem; line-height: 1.74; color: var(--rr-body); }
body.cs-page .cs-legal .cs-legal-item .cs-legal-k {
  margin-bottom: 7px;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: #d0e0f5;
}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes rrCompareSweep {
  0%   { transform: translateY(-130%); opacity: 0; }
  14%  { opacity: 0.75; }
  82%  { opacity: 0.6; }
  100% { transform: translateY(190%); opacity: 0; }
}
@keyframes rrRowIn {
  from { opacity: 0.18; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rrThesisLight {
  from { transform: translate(-54%, -50%) scale(0.98); opacity: 0.66; }
  to   { transform: translate(-46%, -50%) scale(1.04); opacity: 1; }
}
@keyframes rrBeatIn {
  from { opacity: 0.14; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rrFitRun {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@keyframes rrSceneIn {
  from { opacity: 0.2; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rrLessonIn {
  from { opacity: 0.15; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rrVoiceDrop {
  from { opacity: 0.2; transform: translateY(-10px) scale(0.82); }
  to   { opacity: 1; transform: none; }
}
@keyframes rrCloseHalo {
  from { transform: translate(-52%, -50%) scale(0.96); opacity: 0.72; }
  to   { transform: translate(-48%, -50%) scale(1.05); opacity: 1; }
}

/* ============================================================
   RESPONSIVE — composed for the phone, not shrunk to it
   ============================================================ */
@media (max-width: 1080px) {
  body.cs-page .cs-compare { grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.8fr) minmax(0, 1.5fr); }
  body.cs-page .cs-compare-area { font-size: 1.125rem; }
  body.cs-page .cs-compare-to { font-size: 1rem; }
}

@media (max-width: 980px) {
  /* the comparison becomes five self-contained cards; the container stops
     being a box so the cards are not boxes inside a box */
  body.cs-page .cs-compare {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    overflow: visible;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.cs-page .cs-compare-glow,
  body.cs-page .cs-compare-head { display: none; }
  body.cs-page .cs-compare-row {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: var(--rr-r);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 34%),
      linear-gradient(168deg, var(--rr-sheet) 0%, var(--rr-sheet-2) 58%, var(--rr-sheet-3) 100%);
    box-shadow: var(--rr-halo);
  }
  body.cs-page .cs-compare-row::before {
    width: 3px;
    border-radius: 0;
    background: linear-gradient(180deg,
      rgba(var(--acc-rgb, 56, 207, 255), 0.9) 0%, rgba(var(--acc-rgb, 56, 207, 255), 0.12) 100%);
  }
  body.cs-page .cs-compare-area {
    font-size: clamp(1.375rem, 6vw, 1.625rem);
    line-height: 1.15;
    border-bottom: 0;
    background: linear-gradient(90deg, rgba(var(--acc-rgb, 56, 207, 255), 0.14) 0%, transparent 72%);
    box-shadow: inset 0 -1px 0 rgba(var(--acc-rgb, 56, 207, 255), 0.26);
  }
  body.cs-page .cs-compare-mark { width: 44px; height: 44px; }
  body.cs-page .cs-compare-from {
    font-size: 0.875rem;
    color: #77899f;
    background: rgba(4, 10, 22, 0.3);
    box-shadow: none;
    filter: saturate(0.28);
  }
  body.cs-page .cs-compare-to {
    font-size: 1rem;
    color: #f4f9ff;
    background: linear-gradient(180deg, rgba(56, 207, 255, 0.1) 0%, rgba(175, 221, 44, 0.07) 100%);
    text-shadow: none;
  }
  /* the column heads are gone on a phone, so each cell names itself */
  body.cs-page .cs-compare-tag {
    display: block;
    width: auto;
    margin-bottom: 7px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  body.cs-page .cs-compare-from .cs-compare-tag { color: #64778f; }
  body.cs-page .cs-compare-to .cs-compare-tag { color: var(--rr-plan); }
  body.cs-page .cs-compare-from .cs-compare-tag::before,
  body.cs-page .cs-compare-from .cs-compare-tag::after,
  body.cs-page .cs-compare-to .cs-compare-tag::before,
  body.cs-page .cs-compare-to .cs-compare-tag::after { content: none; display: none; }

  /* the lead column stops holding and the panels stack */
  body.cs-page .cs-fit-lead::after { margin-top: clamp(26px, 4vw, 34px); }
  body.cs-page .cs-learn { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  body.cs-page .cs-learn-copy .cs-body,
  body.cs-page .cs-learn-chip { max-width: 62ch; }
}

/* tablet keeps the two-column reading of each row: the common line beside
   the strategy line, with the category above both */
@media (min-width: 761px) and (max-width: 980px) {
  body.cs-page .cs-compare-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  body.cs-page .cs-compare-area { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body.cs-page .cs-learn-list { grid-template-columns: minmax(0, 1fr); }
  body.cs-page .cs-learn-list li:nth-child(n + 3) { box-shadow: none; }
  body.cs-page .cs-learn-list li:nth-child(n + 2) { box-shadow: inset 0 1px 0 rgba(150, 196, 240, 0.11); }
  body.cs-page .cs-voice:nth-child(even) { margin-top: 0; }
}

@media (max-width: 760px) {
  /* the quote keeps one size and stays the loudest thing on the screen */
  body.cs-page .cs-thesis-band { padding: clamp(74px, 17vw, 108px) 0; }
  body.cs-page .cs-thesis-watermark { width: min(440px, 88vw); opacity: 0.05; }
  body.cs-page .cs-beats { max-width: none; }
  body.cs-page .cs-beat + .cs-beat { margin-top: 8px; }
  body.cs-page .cs-beat .cs-beat-t { font-size: clamp(1.625rem, 7.2vw, 2.25rem); line-height: 1.18; }
  body.cs-page .cs-sig { gap: 11px; margin-bottom: clamp(22px, 5vw, 30px); }
  body.cs-page .cs-sig-shield { width: 34px; }
  body.cs-page .cs-sig-text { font-size: 0.75rem; letter-spacing: 0.2em; }

  body.cs-page .cs-fit-lead::after { width: min(220px, 62%); }
  body.cs-page .cs-home {
    padding: 26px 22px 28px;
    box-shadow: 0 0 0 1px rgba(178, 221, 255, 0.18), 0 22px 46px -28px rgba(2, 8, 22, 0.95), 0 0 50px -30px var(--rr-glow-lime);
  }
  body.cs-page .cs-home-top { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
  body.cs-page .cs-home-icon { width: 50px; height: 50px; }
  body.cs-page .cs-home h3 { font-size: clamp(1.625rem, 7.2vw, 2rem); }
  body.cs-page .cs-home > p { font-size: 1rem; }
  body.cs-page .cs-scenes li { grid-template-columns: 44px minmax(0, 1fr); gap: 15px; padding: 20px 18px 21px; }
  body.cs-page .cs-scene-icon { width: 44px; height: 44px; }
  body.cs-page .cs-scenes li:hover { transform: none; }
  body.cs-page .cs-scenes h3 { font-size: 1.0625rem; }

  body.cs-page .cs-learn-panel {
    padding: 28px 20px 14px;
    box-shadow: 0 0 0 1px rgba(178, 221, 255, 0.16), 0 24px 48px -30px rgba(2, 8, 22, 0.95);
  }
  body.cs-page .cs-learn-title { text-align: center; font-size: clamp(1.75rem, 7.6vw, 2.125rem); }
  body.cs-page .cs-learn-list li { padding: 18px 0 20px; }
  body.cs-page .cs-learn-chip { margin-inline: auto; text-align: left; }

  body.cs-page .cs-voice blockquote { padding: 26px 22px 22px; }
  body.cs-page .cs-voice blockquote p { font-size: clamp(1.3125rem, 5.8vw, 1.5rem); padding-left: 28px; }
  body.cs-page .cs-voice blockquote p::before { font-size: 3rem; }
  body.cs-page .cs-voice figcaption { padding: 22px 20px 26px; }
  body.cs-page .cs-voice-text { font-size: 0.9688rem; }
  body.cs-page .cs-voice-link { width: 30px; height: 30px; margin-left: 20px; }
  body.cs-page .cs-voice:nth-child(even) .cs-voice-link { margin-right: 20px; }
  body.cs-page .cs-voice:hover { transform: none; }

  body.cs-page .cs-sec--faq .faq-question { padding: 19px 18px; font-size: 1.125rem; }
  body.cs-page .cs-sec--faq .faq-answer-inner { padding: 0 18px 22px 44px; font-size: 0.9688rem; }

  body.cs-page .cs-close { padding: clamp(74px, 17vw, 108px) 0; }
  body.cs-page .cs-close .cs-close-title { font-size: clamp(2.125rem, 9vw, 2.75rem); margin-bottom: clamp(28px, 6vw, 36px); }

  body.cs-page .cs-legal { padding: 24px 20px 26px; }
  body.cs-page .cs-legal-grid { gap: 20px; }
  body.cs-page .cs-legal .cs-legal-item p { font-size: 0.9375rem; line-height: 1.7; }
}

@media (max-width: 400px) {
  body.cs-page .cs-compare-area { font-size: 1.375rem; }
  body.cs-page .cs-beat .cs-beat-t { font-size: 1.75rem; }
  body.cs-page .cs-voice blockquote p { font-size: 1.3125rem; }
  body.cs-page .cs-voice:nth-child(even),
  body.cs-page .cs-voice:nth-child(odd) { margin-inline: 0; }
}


/* ---- the two lead columns that outrun their content ----
   "Where you're headed" and the FAQ both put a short editorial column beside a
   long list. Left alone the column states its case in the first 600px and then
   leaves a thousand pixels of nothing beside the scroll. It travels instead,
   the same way the three-bureau register travels beside the six stages. */
@media (min-width: 981px) {
  body.cs-page .cs-fit > .cs-fit-lead,
  body.cs-page .cs-faq > .cs-faq-head {
    position: sticky;
    top: clamp(96px, 11vh, 140px);
    align-self: start;
  }
}

/* on a phone the four conversations stack in one column, so the accent rail
   belongs on the reading edge for every one of them, not alternating sides */
@media (max-width: 980px) {
  body.cs-page .cs-voice:nth-child(even) figcaption,
  body.cs-page .cs-voice:nth-child(even) .cs-voice-text,
  body.cs-page .cs-voice:nth-child(even) blockquote {
    border-right: 0;
    box-shadow: none;
  }
  body.cs-page .cs-voice figcaption {
    border-left: 2px solid rgba(var(--acc-rgb, 56,207,255), 0.55);
    border-right: 0;
    border-radius: 0 var(--rr-r-sm) var(--rr-r-sm) 0;
  }
  body.cs-page .cs-voice:nth-child(even) .cs-voice-link { left: 22px; right: auto; }
}

/* ============================================================
   INVESTMENT · INCLUDED IN BOTH · BLUEPRINT

   Two rooms, deliberately lit differently.

   THE INVESTMENT is the decision room: one panel, a control deck across
   the top, a considered price on the left and value accumulating on the
   right. The price is the focal point of the whole section -- large
   serif numerals on a shared baseline, with the "+" reading as part of
   the sentence rather than a button. The selector is a real segmented
   control: a recessed well, a lit key that SLIDES between the two
   options, and a glow tight enough to belong to the key.

   THE BLUEPRINT is the quiet room. No panel, no chrome, no commerce --
   a book standing in a pool of light with air around it, lit at the
   SKY end of the journey ramp so it reads as the beginning of the story
   rather than a cheaper version of the end of it.
   ============================================================ */

/* ---- THE PANEL --------------------------------------------------- */
body.cs-page .cs-plan {
  position: relative;
  border-radius: var(--rr-r-lg);
  overflow: hidden;
  box-shadow: var(--rr-halo-lit);
}
/* one lit seam across the top edge -- the panel catches the room light */
body.cs-page .cs-plan::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56,207,255,0.45) 24%,
    rgba(216,255,106,0.8) 58%,
    rgba(180,224,58,0.3) 78%,
    transparent 100%);
}
body.cs-page .cs-plan::after { content: none; display: none; }

/* ---- THE CONTROL DECK -------------------------------------------- */
body.cs-page .cs-plan-head {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 44px);
  border: 0;
  background:
    radial-gradient(64% 150% at 88% 46%, rgba(56,207,255,0.12) 0%, transparent 68%),
    radial-gradient(52% 130% at 4% 10%, rgba(175,221,44,0.09) 0%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(104deg, rgba(20,44,84,0.5) 0%, rgba(12,28,56,0.34) 62%, transparent 100%);
  box-shadow: inset 0 -1px 0 rgba(150,196,240,0.16);
}
body.cs-page .cs-plan-name {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 2.3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--rr-ink);
  padding-bottom: 0;
}
body.cs-page .cs-plan-name::after { content: none; }
body.cs-page .cs-plan-choose {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
}
body.cs-page .cs-plan-choose::after { content: none; display: none; }

/* "CHOOSE YOUR PLAN" is an instruction, not a footnote */
body.cs-page .cs-plan-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d3ef7a;
  text-shadow: 0 0 22px rgba(175,221,44,0.4);
}
body.cs-page .cs-plan-cue .cs-ico {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
  color: var(--rr-plan);
  transform: rotate(90deg);
}
/* three unhurried nudges once the panel arrives, then it rests */
body.cs-page .cs-plan.revealed .cs-plan-cue .cs-ico {
  animation: rrCueNudge 2.4s var(--rr-ease) 0.9s 3;
}
@keyframes rrCueNudge {
  0%, 62%, 100% { transform: rotate(90deg) translateX(0); opacity: 1; }
  78%           { transform: rotate(90deg) translateX(5px); opacity: 0.72; }
}

/* ---- THE SEGMENTED CONTROL --------------------------------------
   A recessed well holding two keys. The lit key is a single element
   that slides; the labels only carry type. */
body.cs-page .cs-plan-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 0;
  border-radius: calc(var(--rr-r) + 4px);
  background:
    linear-gradient(180deg, rgba(2,7,18,0.72) 0%, rgba(8,18,38,0.6) 100%);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(150,196,240,0.18),
    0 1px 0 rgba(255,255,255,0.05);
}
body.cs-page .cs-plan-switch::before {
  /* the base partial kills this pseudo with `content: none !important;
     display: none` -- !important can only be outranked by !important,
     so these two declarations have to carry it. */
  content: '' !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 9px);
  border-radius: var(--rr-r-sm);
  background: linear-gradient(150deg, #e2ff7d 0%, #b4e03a 52%, #8cc422 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(20,52,4,0.3),
    0 0 0 1px rgba(216,255,106,0.34),
    0 5px 12px -7px rgba(140,196,34,0.85);
  transition: transform 0.48s var(--rr-ease);
}
body.cs-page .cs-plan-switch::after { content: none; display: none; }
body.cs-page #cs-plan-couples:checked ~ .cs-plan-head .cs-plan-switch::before {
  transform: translateX(calc(100% + 6px));
}
/* the key wakes three times when the panel arrives -- contained, no bleed */
body.cs-page .cs-plan.revealed .cs-plan-switch::before {
  animation: rrKeyWake 2.9s var(--rr-ease) 0.6s 3;
}
@keyframes rrKeyWake {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(20,52,4,0.3),
      0 0 0 1px rgba(216,255,106,0.34),
      0 5px 12px -7px rgba(140,196,34,0.85);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.75),
      inset 0 -1px 0 rgba(20,52,4,0.3),
      0 0 0 3px rgba(216,255,106,0.2),
      0 6px 14px -7px rgba(140,196,34,1);
  }
}

body.cs-page .cs-plan-switch label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--rr-r-sm);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 62%);
  box-shadow: none;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--rr-body);
  cursor: pointer;
  transition:
    color 0.34s var(--rr-ease),
    background 0.34s var(--rr-ease),
    box-shadow 0.34s var(--rr-ease);
}
body.cs-page .cs-plan-switch label .cs-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
}
/* hover lights only the key that is NOT already selected */
body.cs-page #cs-plan-individual:checked ~ .cs-plan-head .cs-plan-switch label[for="cs-plan-couples"]:hover,
body.cs-page #cs-plan-couples:checked ~ .cs-plan-head .cs-plan-switch label[for="cs-plan-individual"]:hover {
  color: var(--rr-ink);
  background: linear-gradient(180deg, rgba(178,221,255,0.13) 0%, rgba(178,221,255,0.03) 70%);
  box-shadow: inset 0 0 0 1px rgba(178,221,255,0.28);
}
/* the selected key: ink on the lit slider, no fill of its own */
body.cs-page #cs-plan-individual:checked ~ .cs-plan-head .cs-plan-switch label[for="cs-plan-individual"],
body.cs-page #cs-plan-couples:checked ~ .cs-plan-head .cs-plan-switch label[for="cs-plan-couples"] {
  background: none;
  box-shadow: none;
  color: #122c06;
  font-weight: 800;
  transform: none;
}
/* the old soft bleed under the key is retired -- the slider carries the light */
body.cs-page .cs-plan.revealed #cs-plan-individual:checked ~ .cs-plan-head .cs-plan-switch label[for="cs-plan-individual"],
body.cs-page .cs-plan.revealed #cs-plan-couples:checked ~ .cs-plan-head .cs-plan-switch label[for="cs-plan-couples"] {
  animation: none;
}
body.cs-page .cs-plan-pair { display: inline-flex; }
body.cs-page .cs-plan-pair .cs-ico + .cs-ico { margin-left: -7px; }

/* ---- THE PRICE — the thing you see first -------------------------- */
body.cs-page .cs-plan-body { border: 0; align-items: stretch; }
body.cs-page .cs-plan-pricing {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 2.8vw, 46px);
  border: 0;
  box-shadow: none;
}
/* a lit seam between the two planes rather than a flat rule */
body.cs-page .cs-plan-pricing::after {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(56,207,255,0.34) 22%,
    rgba(150,196,240,0.2) 58%,
    rgba(180,224,58,0.24) 84%,
    transparent 100%);
}
body.cs-page .cs-plan-option { animation: rrPlanSwap 0.32s var(--rr-ease) both; }
@keyframes rrPlanSwap {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

body.cs-page .cs-plan-for {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #8fe0ff;
}
body.cs-page .cs-plan-for::before {
  content: '';
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rr-profile), var(--rr-analysis));
  box-shadow: 0 0 14px rgba(56,207,255,0.5);
}

/* the price sentence: two amounts on one baseline, joined by a "+",
   with their labels sharing a second baseline underneath */
body.cs-page .cs-plan-equation {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  justify-items: start;
  align-items: baseline;
  column-gap: clamp(16px, 1.7vw, 26px);
  row-gap: 12px;
  margin: clamp(20px, 2.2vw, 30px) 0 clamp(24px, 2.6vw, 34px);
}
body.cs-page .cs-plan-equation::after {
  content: '';
  grid-row: 3;
  grid-column: 1 / -1;
  justify-self: stretch;
  height: 1px;
  margin-top: 6px;
  background: linear-gradient(90deg,
    rgba(56,207,255,0.5) 0%,
    rgba(95,211,196,0.34) 42%,
    rgba(180,224,58,0.3) 74%,
    transparent 100%);
}
body.cs-page .cs-plan-fee { display: contents; }
body.cs-page .cs-plan-num {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.026em;
  color: var(--rr-ink);
  white-space: nowrap;
  text-shadow: 0 2px 30px rgba(120,190,255,0.22);
}
body.cs-page .cs-plan-num small {
  margin-left: 6px;
  font-family: var(--font);
  font-size: 0.24em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rr-quiet);
}
body.cs-page .cs-plan-fee:first-child .cs-plan-num {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
}
body.cs-page .cs-plan-fee:first-child .cs-plan-label { grid-column: 1; grid-row: 2; }
body.cs-page .cs-plan-fee:last-child .cs-plan-num {
  grid-column: 3;
  grid-row: 1;
  font-size: clamp(3.25rem, 4.9vw, 4.5rem);
}
body.cs-page .cs-plan-fee:last-child .cs-plan-label { grid-column: 3; grid-row: 2; }
body.cs-page .cs-plan-label {
  display: block;
  margin-top: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rr-quiet);
}
body.cs-page .cs-plan-fee:last-child .cs-plan-label {
  color: #c9e858;
}
/* the "+" is a word in the sentence, not a button */
body.cs-page .cs-plan-plus {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: auto;
  height: auto;
  padding: 0 0.06em;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 2.9vw, 2.625rem);
  font-weight: 400;
  line-height: 0.92;
  color: var(--rr-bridge);
  text-shadow: 0 0 26px rgba(95,211,196,0.55);
}
body.cs-page .cs-plan-scope {
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--rr-body);
}
body.cs-page .cs-plan-cta { margin-top: clamp(26px, 2.6vw, 34px); }
body.cs-page .cs-plan-secure {
  margin-top: 16px;
  font-size: 0.78125rem;
  letter-spacing: 0.01em;
  color: var(--rr-quiet);
}

/* The price stages itself in when the panel arrives, and again on every switch
   (the hidden option's animations restart the moment it is displayed). The
   whole sequence is held under half a second on purpose: switching a plan is a
   deliberate act, and a price that takes a beat to assemble reads as a control
   that did not respond. */
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-for,
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-num,
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-plus,
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-label,
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-scope {
  animation: rrPriceRise 0.34s var(--rr-ease) both;
}
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-for { animation-delay: 0.03s; }
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-fee:first-child .cs-plan-num { animation-delay: 0.06s; }
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-fee:first-child .cs-plan-label { animation-delay: 0.09s; }
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-plus { animation-delay: 0.1s; }
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-fee:last-child .cs-plan-num { animation-delay: 0.13s; }
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-fee:last-child .cs-plan-label { animation-delay: 0.15s; }
body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-scope { animation-delay: 0.18s; }
@keyframes rrPriceRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- INCLUDED IN BOTH — value accumulating ------------------------ */
body.cs-page .cs-plan-includes {
  padding: clamp(32px, 3.4vw, 52px) clamp(24px, 2.8vw, 46px);
  border: 0;
  background:
    linear-gradient(196deg,
      rgba(56,207,255,0.05) 0%,
      rgba(95,211,196,0.028) 46%,
      rgba(180,224,58,0.038) 86%,
      transparent 100%);
}
body.cs-page .cs-plan-includes::before,
body.cs-page .cs-plan-includes::after { content: none; display: none; }
body.cs-page .cs-plan-includes-title {
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rr-ink);
}
body.cs-page .cs-plan-includes-title::after {
  content: '';
  display: block;
  width: 88px;
  height: 3px;
  margin-top: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rr-profile), var(--rr-analysis) 30%, var(--rr-bridge) 58%, var(--rr-plan) 100%);
  box-shadow: 0 0 18px -4px rgba(56,207,255,0.6);
}
body.cs-page .cs-plan-includes ul {
  display: grid;
  gap: 0;
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}
body.cs-page .cs-plan-includes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: clamp(13px, 1.3vw, 17px) 0;
  border: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.46;
  color: var(--rr-ink);
  box-shadow: none;
  background:
    linear-gradient(90deg, rgba(150,196,240,0.2) 0%, rgba(150,196,240,0.05) 62%, transparent 100%)
    bottom left / 100% 1px no-repeat;
}
body.cs-page .cs-plan-includes li:last-child { background-image: none; }
/* the markers step along the journey ramp: profile at the top,
   plan at the bottom -- the same direction as every other sequence */
body.cs-page .cs-plan-includes li .cs-ico {
  width: 28px;
  height: 28px;
  padding: 6px;
  margin-top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  stroke-width: 2.8;
  color: #04182b;
  background: linear-gradient(150deg, #8fdcff, var(--rr-profile));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 1px rgba(255,255,255,0.1),
    0 5px 13px -6px rgba(79,184,245,0.85);
}
body.cs-page .cs-plan-includes li:nth-child(2) .cs-ico {
  background: linear-gradient(150deg, #8ce6ff, var(--rr-analysis));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.1), 0 5px 13px -6px rgba(56,207,255,0.85);
}
body.cs-page .cs-plan-includes li:nth-child(3) .cs-ico {
  background: linear-gradient(150deg, #95eae6, #4ad4e2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.1), 0 5px 13px -6px rgba(74,212,226,0.85);
}
body.cs-page .cs-plan-includes li:nth-child(4) .cs-ico {
  background: linear-gradient(150deg, #a6ecdf, var(--rr-bridge));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.1), 0 5px 13px -6px rgba(95,211,196,0.85);
}
body.cs-page .cs-plan-includes li:nth-child(5) .cs-ico {
  color: #10280a;
  background: linear-gradient(150deg, #c2ee9a, var(--rr-priority));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.1), 0 5px 13px -6px rgba(143,217,106,0.85);
}
body.cs-page .cs-plan-includes li:nth-child(6) .cs-ico {
  color: #10280a;
  background: linear-gradient(150deg, #e2ff7d, var(--rr-plan));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(255,255,255,0.12), 0 5px 14px -6px rgba(180,224,58,0.9);
}
/* the ledger fills in line by line, and each marker lands with it */
body.cs-page .cs-plan.revealed .cs-plan-includes li { animation: rrValue 0.6s var(--rr-ease) both; }
body.cs-page .cs-plan.revealed .cs-plan-includes li .cs-ico { animation: rrLedgerMark 0.52s var(--rr-ease) both; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(1) { animation-delay: 0.28s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(2) { animation-delay: 0.39s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(3) { animation-delay: 0.50s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(4) { animation-delay: 0.61s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(5) { animation-delay: 0.72s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(6) { animation-delay: 0.83s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(1) .cs-ico { animation-delay: 0.36s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(2) .cs-ico { animation-delay: 0.47s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(3) .cs-ico { animation-delay: 0.58s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(4) .cs-ico { animation-delay: 0.69s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(5) .cs-ico { animation-delay: 0.80s; }
body.cs-page .cs-plan.revealed .cs-plan-includes li:nth-child(6) .cs-ico { animation-delay: 0.91s; }
@keyframes rrValue {
  from { opacity: 0.45; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rrLedgerMark {
  0%   { transform: scale(0.72); }
  62%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ---- THE FOOT ----------------------------------------------------- */
body.cs-page .cs-plan-foot {
  padding: clamp(22px, 2.4vw, 32px) clamp(24px, 2.6vw, 44px);
  border: 0;
  background: linear-gradient(180deg, rgba(4,10,24,0.34) 0%, rgba(4,10,24,0.56) 100%);
  box-shadow: inset 0 1px 0 rgba(150,196,240,0.14);
}
body.cs-page .cs-plan-foot-q { color: var(--rr-ink); font-weight: 600; }
body.cs-page .cs-plan-foot-note { font-size: 0.8125rem; color: var(--rr-quiet); opacity: 1; }
/* compliance: the six-month service-term disclosure, fully legible */
body.cs-page .cs-plan-term-note {
  max-width: 70ch;
  margin: clamp(26px, 2.6vw, 34px) auto 0;
  font-size: 0.8125rem;
  line-height: 1.72;
  color: var(--rr-body);
  opacity: 1;
}

/* ============================================================
   THE BLUEPRINT — the quiet room
   A free resource, so it is lit at the SKY end of the ramp and given
   air instead of chrome. Nothing here is a panel.
   ============================================================ */
body.cs-page .cs-sec--blueprint { padding: clamp(96px, 10vw, 168px) 0; }
body.cs-page .cs-bp-atmos {
  background:
    radial-gradient(54% 62% at 27% 48%, rgba(22,60,124,0.42) 0%, transparent 72%),
    radial-gradient(44% 40% at 76% 78%, rgba(30,88,110,0.16) 0%, transparent 76%),
    linear-gradient(180deg, var(--rr-void) 0%, #071328 50%, var(--rr-void) 100%);
}
body.cs-page .cs-bp {
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(36px, 4.6vw, 80px);
  align-items: center;
}
body.cs-page .cs-bp-stage {
  position: relative;
  min-height: clamp(400px, 35vw, 520px);
  border-radius: var(--rr-r-lg);
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* the room light the book stands in */
body.cs-page .cs-bp-stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 4% 2% 2%;
  border-radius: 50%;
  background:
    radial-gradient(52% 54% at 50% 42%, rgba(46,110,190,0.4) 0%, rgba(24,60,116,0.18) 44%, transparent 76%);
  filter: blur(14px);
  animation: rrBpRoom 26s var(--rr-slow) infinite;
}
@keyframes rrBpRoom {
  0%, 100% { opacity: 0.78; transform: scale(0.98); }
  50%      { opacity: 1; transform: scale(1.03); }
}
/* the contact shadow the book actually sits on */
body.cs-page .cs-bp-stage::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 27%;
  right: 27%;
  bottom: 13%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(2,6,16,0.82) 0%, rgba(2,6,16,0.34) 52%, transparent 78%);
  filter: blur(9px);
}
body.cs-page .cs-bp-grid,
body.cs-page .cs-bp-mark,
body.cs-page .cs-bp-beam { display: none; }
/* the pool of light under the cover */
body.cs-page .cs-bp-floor {
  display: block;
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 10%;
  width: auto;
  height: 42px;
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(38% 100% at 50% 50%, rgba(140,232,255,0.34) 0%, transparent 72%),
    radial-gradient(62% 100% at 50% 50%, rgba(56,207,255,0.2) 0%, rgba(56,207,255,0.05) 46%, transparent 78%);
  filter: blur(10px);
  animation: rrBookPool 11.6s var(--rr-slow) 0.9s infinite;
}
@keyframes rrBookPool {
  0%, 100% { opacity: 0.66; transform: scaleX(0.94); }
  50%      { opacity: 1; transform: scaleX(1.06); }
}
/* the book: larger, tilted, with a tight contact drop and a long soft
   one, plus a faint sky rim. A slow invitation, never a bounce. */
body.cs-page .cs-bp-book {
  position: relative;
  z-index: 2;
  width: min(330px, 70%);
  filter:
    drop-shadow(0 14px 18px rgba(2,8,22,0.62))
    drop-shadow(0 42px 56px rgba(2,8,22,0.7))
    drop-shadow(0 0 46px rgba(56,207,255,0.16));
  animation: rrBookFloat 11.6s var(--rr-slow) infinite;
}
@keyframes rrBookFloat {
  0%, 100% { transform: translateY(2px) rotate(-3.2deg); }
  50%      { transform: translateY(-11px) rotate(-2.3deg); }
}

/* the lead-in is sky, not lime -- this is the beginning of the story */
body.cs-page .cs-bp-eyebrow { margin-bottom: clamp(20px, 2.2vw, 28px); }
body.cs-page .cs-bp-eyebrow span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 0;
  border-radius: var(--rr-r-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 60%),
    rgba(56,207,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(120,206,255,0.3);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #a8e6ff;
}
body.cs-page .cs-bp-eyebrow span::before {
  width: 7px;
  height: 7px;
  background: var(--rr-analysis);
  box-shadow: 0 0 12px rgba(56,207,255,0.9);
}
body.cs-page .cs-sec--blueprint .cs-bp-title {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  line-height: 1.06;
}
body.cs-page .cs-sec--blueprint .cs-bp-title .cs-line:first-child {
  font-size: 0.56em;
  letter-spacing: 0.005em;
  color: var(--rr-body);
}
body.cs-page .cs-bp-title + .cs-body {
  margin-top: clamp(18px, 1.8vw, 26px);
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.72;
}
body.cs-page .cs-bp-copy .cs-body { color: var(--rr-body); }
body.cs-page .cs-bp-note {
  margin-top: 20px;
  font-size: 0.84375rem;
  color: var(--rr-quiet);
}
body.cs-page .cs-bp-note .cs-ico { color: var(--rr-analysis); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  /* the price sentence keeps its scale as the column narrows */
  body.cs-page .cs-plan-fee:first-child .cs-plan-num { font-size: clamp(2.5rem, 5vw, 3.25rem); }
  body.cs-page .cs-plan-fee:last-child .cs-plan-num { font-size: clamp(3rem, 6vw, 3.875rem); }
  body.cs-page .cs-plan-plus { font-size: clamp(1.875rem, 3.6vw, 2.375rem); }
}

@media (max-width: 980px) {
  /* the panel stacks: the price plane, then the ledger plane */
  body.cs-page .cs-plan-pricing { text-align: center; }
  body.cs-page .cs-plan-pricing::after {
    top: auto;
    bottom: 0;
    left: 8%;
    right: 8%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(56,207,255,0.3) 22%,
      rgba(180,224,58,0.26) 74%,
      transparent 100%);
  }
  body.cs-page .cs-plan-for { justify-content: center; }
  body.cs-page .cs-plan-equation { justify-content: center; justify-items: center; }
  body.cs-page .cs-plan-scope { margin-inline: auto; }

  /* the blueprint's mobile order: lead-in, book, copy, CTA */
  body.cs-page .cs-bp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.cs-page .cs-bp-copy { display: contents; }
  body.cs-page .cs-bp-eyebrow { order: 1; margin: 0 0 16px; }
  body.cs-page .cs-bp-title { order: 2; margin: 0; }
  body.cs-page .cs-bp-stage { order: 3; margin: 14px 0 18px; min-height: clamp(320px, 62vw, 420px); }
  body.cs-page .cs-bp .cs-body { order: 4; margin: 0 auto; max-width: 56ch; }
  body.cs-page .cs-bp .cs-bp-cta { order: 5; margin: 28px auto 0; }
  body.cs-page .cs-bp-note { order: 6; margin-top: 16px; }
  body.cs-page .cs-bp-book { width: min(300px, 66%); }
}

@media (max-width: 760px) {
  /* the head becomes a stacked control deck, keys sized for thumbs */
  body.cs-page .cs-plan-head { padding: clamp(26px, 6vw, 34px) clamp(16px, 4.6vw, 26px) clamp(22px, 5vw, 28px); }
  body.cs-page .cs-plan-name { font-size: clamp(1.625rem, 7.2vw, 2.125rem); }
  body.cs-page .cs-plan-choose { align-items: stretch; width: 100%; gap: 12px; }
  body.cs-page .cs-plan-cue { justify-content: center; padding: 0; font-size: 0.8125rem; letter-spacing: 0.18em; }
  body.cs-page .cs-plan-switch { width: 100%; }
  body.cs-page .cs-plan-switch label {
    min-height: 60px;
    padding: 14px 8px;
    font-size: 0.9375rem;
    gap: 8px;
  }

  body.cs-page .cs-plan-pricing { padding: clamp(28px, 7vw, 36px) clamp(18px, 5vw, 26px); box-shadow: none; }
  body.cs-page .cs-plan-for { font-size: 0.75rem; letter-spacing: 0.16em; gap: 9px; }
  body.cs-page .cs-plan-for::before { width: 18px; }
  body.cs-page .cs-plan-equation {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    justify-items: center;
    column-gap: clamp(10px, 3vw, 16px);
    row-gap: 10px;
    margin: 20px 0 24px;
  }
  body.cs-page .cs-plan-fee:first-child .cs-plan-num { font-size: clamp(2.25rem, 10.5vw, 2.875rem); }
  body.cs-page .cs-plan-fee:last-child .cs-plan-num { font-size: clamp(2.5rem, 11.6vw, 3.25rem); }
  body.cs-page .cs-plan-num small { margin-left: 3px; font-size: 0.25em; }
  body.cs-page .cs-plan-plus { width: auto; height: auto; font-size: clamp(1.625rem, 7vw, 2rem); padding: 0; }
  body.cs-page .cs-plan-label { font-size: 0.625rem; letter-spacing: 0.13em; }
  body.cs-page .cs-plan-scope { font-size: 0.96875rem; }

  body.cs-page .cs-plan-includes { padding: clamp(28px, 7vw, 36px) clamp(18px, 5vw, 26px); }
  body.cs-page .cs-plan-includes-title { font-size: 1.0625rem; letter-spacing: 0.14em; }
  body.cs-page .cs-plan-includes-title::after { width: 72px; margin-top: 13px; }
  body.cs-page .cs-plan-includes li { gap: 13px; padding: 14px 0; font-size: 0.96875rem; }
  body.cs-page .cs-plan-includes li .cs-ico { width: 26px; height: 26px; padding: 6px; }

  body.cs-page .cs-plan-foot { padding: clamp(22px, 5.6vw, 28px) clamp(18px, 5vw, 26px); }
  body.cs-page .cs-plan-term-note { font-size: 0.8125rem; line-height: 1.7; }

  body.cs-page .cs-sec--blueprint { padding: clamp(66px, 15vw, 96px) 0; }
  body.cs-page .cs-bp-stage { min-height: clamp(300px, 72vw, 380px); }
  body.cs-page .cs-bp-book { width: min(238px, 64%); }
  body.cs-page .cs-bp-stage::after { left: 24%; right: 24%; bottom: 12%; height: 14px; }
  body.cs-page .cs-bp-floor { left: 8%; right: 8%; bottom: 9%; height: 32px; }
  body.cs-page .cs-bp-title + .cs-body { font-size: 1rem; line-height: 1.68; }
}

@media (max-width: 430px) {
  /* narrow phones: the price stays one line and stays the focal point */
  body.cs-page .cs-plan-equation { column-gap: 9px; }
  body.cs-page .cs-plan-fee:first-child .cs-plan-num { font-size: clamp(2.125rem, 10.2vw, 2.625rem); }
  body.cs-page .cs-plan-fee:last-child .cs-plan-num { font-size: clamp(2.375rem, 11.4vw, 3rem); }
  body.cs-page .cs-plan-plus { font-size: clamp(1.5rem, 6.6vw, 1.875rem); }
  body.cs-page .cs-plan-switch label { padding: 14px 6px; font-size: 0.90625rem; gap: 7px; }
  body.cs-page .cs-plan-switch label .cs-ico { width: 17px; height: 17px; }
}

@media (max-width: 400px) {
  body.cs-page .cs-plan-equation {
    display: grid;
    grid-template-columns: auto auto auto;
    flex-direction: row;
    column-gap: 8px;
    row-gap: 9px;
  }
  body.cs-page .cs-plan-fee { display: contents; }
  body.cs-page .cs-plan-fee:first-child .cs-plan-num { font-size: 2.3125rem; }
  body.cs-page .cs-plan-fee:last-child .cs-plan-num { font-size: 2.5625rem; }
  body.cs-page .cs-plan-plus { font-size: 1.5rem; }
  body.cs-page .cs-plan-label { font-size: 0.5938rem; letter-spacing: 0.11em; }
  body.cs-page .cs-plan-cue { font-size: 0.78125rem; letter-spacing: 0.15em; gap: 8px; }
  body.cs-page .cs-plan-switch label { font-size: 0.875rem; padding: 14px 4px; }
  body.cs-page .cs-plan-for { font-size: 0.6875rem; letter-spacing: 0.14em; }
  body.cs-page .cs-bp-book { width: min(224px, 68%); }
}

/* ============================================================
   REDUCED MOTION — the motion stops, the composition does not move
   One block, assembled from the parking frame each part file declared for
   every mechanism it owns. The rule everywhere is the same: nothing that
   carries content may park at opacity 0, and no rule here may change a
   size, a position in flow, or a line count. What the reader loses is the
   movement; what they keep is the finished frame.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* ================= from 00-foundation.css ================= */
  /* ---- 00-foundation: park the environment ---------------------------
     Two animations live in this file (rrFieldDrift on the far field,
     rrAirTide on the drifting cloud) plus the .reveal settle transition.
     All three are parked on a frame that still reads: the air is still
     there, the clouds are still lit, and every .reveal sits exactly where
     it belongs in the flow. No opacity 0, no size change, no reflow. */

  /* FAR field — stop the drift, keep the wash. Parked at the 0%/100%
     waypoint, which is the loop's own resting frame: identity transform,
     so the fixed ambient layer stays exactly viewport-locked. */
  body.cs-page::before {
    animation: none;
    transform: none;
  }

  /* MID cloud — stop the tide, keep the cloud lit. Parked between the
     loop's 0.72 and 1.0 so it reads at its normal brightness rather than
     at either extreme, and at identity scale so nothing resizes. */
  body.cs-page .cs-atmos,
  body.cs-page .cs-atmos--method,
  body.cs-page .cs-atmos--receive,
  body.cs-page .cs-atmos--program,
  body.cs-page .cs-atmos--invest,
  body.cs-page .cs-atmos--voices,
  body.cs-page .cs-atmos--close {
    animation: none;
    transform: none;
    opacity: 0.86;
  }

  /* The settle — land every .reveal immediately and permanently, whether
     or not the observer ever fires. Resting transform is dropped to none
     (not just un-transitioned), so nothing is left sitting 18-38px low or
     14-16px sideways, and the scale offset is released so text renders at
     its true size. The steering variables are zeroed too, so any section
     file that sets them cannot re-introduce travel here. */
  body.cs-page .reveal,
  body.cs-page .reveal.revealed {
    --rr-rv-y: 0px;
    --rr-rv-x: 0px;
    --rr-rv-s: 1;
    --rr-rv-r: 0deg;
    --rr-rv-d: 0s;
    transform: none;
    transition: none;
  }
  body.cs-page .reveal-delay-1,
  body.cs-page .reveal-delay-2,
  body.cs-page .reveal-delay-3,
  body.cs-page .reveal-delay-4,
  body.cs-page .reveal-delay-5 { --rr-rv-d: 0s; }

  /* ================= from 10-type.css ================= */
  /* the type system — the accent sheen parks fully off the glyphs (end frame) */
    body.cs-page .cs-h2 em,
    body.cs-page .cs-diff-b em,
    body.cs-page .cs-close-title em,
    body.cs-page .cs-bp-title em,
    body.cs-page .cs-beat--3 em { animation: none; background-position: 250% 0, 0 0; }

    /* the eyebrow capsule and its drawn lead rule */
    body.cs-page .reveal.revealed .cs-eyebrow,
    body.cs-page .cs-eyebrow.reveal.revealed { animation: none; opacity: 1; transform: none; }
    body.cs-page .reveal.revealed .cs-eyebrow .cs-eb,
    body.cs-page .cs-eyebrow.reveal.revealed .cs-eb { animation: none; opacity: 1; transform: none; }

    /* headline lines — parked at the finished frame, so no line count or flow shift */
    body.cs-page .reveal.revealed .cs-h2 > .cs-line,
    body.cs-page .reveal.revealed .cs-close-title > .cs-line,
    body.cs-page .reveal.revealed .cs-bp-title > .cs-line,
    body.cs-page .cs-h1.reveal.revealed .cs-line { animation: none; opacity: 1; transform: none; }
    body.cs-page .reveal.revealed .cs-h2 > .cs-line:nth-child(2),
    body.cs-page .reveal.revealed .cs-close-title > .cs-line:nth-child(2),
    body.cs-page .reveal.revealed .cs-bp-title > .cs-line:nth-child(2),
    body.cs-page .cs-h1.reveal.revealed .cs-line:nth-child(2),
    body.cs-page .reveal.revealed .cs-h2 > .cs-line:nth-child(3),
    body.cs-page .reveal.revealed .cs-close-title > .cs-line:nth-child(3),
    body.cs-page .reveal.revealed .cs-bp-title > .cs-line:nth-child(3) { animation: none; animation-delay: 0s; }

    /* the lede that follows a head */
    body.cs-page .cs-intro.reveal.revealed .cs-body,
    body.cs-page .cs-diff-head.reveal.revealed .cs-body { animation: none; opacity: 1; transform: none; }

    /* the signature rule — parks open at full width, never scaled */
    body.cs-page .reveal.revealed .cs-program-rule { animation: none; opacity: 1; transform: none; }

  /* ================= from 20-cta.css ================= */
  /* ---- 20-cta.css ---- */
    /* the sheen: park it OFF the left edge, not mid-plate. The band is now 62%
       wide at alpha 0.22, so a mid-plate park reads as a bright static
       rectangle. This must come AFTER the existing 42% rule to replace it. */
    body.cs-page .cs-cta > .cb-light {
      animation: none !important;
      background-position: -85% 0;
    }

    /* the idle halo (rrCtaIdle) parks lit, mid-breath */
    body.cs-page .cs-cta--commit::before,
    body.cs-page .cs-cta--return::before,
    body.cs-page .cs-cta--invite::before {
      animation: none;
      transition: none;
      opacity: 0.62;
    }

    /* the contact shadow holds its resting pool: no transition, and hover /
       press are pinned to the resting geometry so nothing slides */
    body.cs-page .cs-cta:not(.cs-cta--seam)::after {
      transition: none;
      opacity: 0.9;
    }
    body.cs-page .cs-cta:not(.cs-cta--seam):hover::after,
    body.cs-page .cs-cta:not(.cs-cta--seam):active::after {
      left: 9px;
      right: 9px;
      bottom: -8px;
      opacity: 0.9;
    }
    body.cs-page .cs-cta.cs-cta--structure::after,
    body.cs-page .cs-cta.cs-cta--structure:hover::after,
    body.cs-page .cs-cta.cs-cta--structure:active::after {
      left: 12px;
      right: 12px;
      bottom: -10px;
      opacity: 0.9;
    }

    /* the chip arrival (rrChipArrive) and the press / hover transforms.
       The existing `.cs-cta > svg, > .cs-ico` !important pair already kills
       these animations; this keeps the chip at its resting offset of 0 even
       when the reveal class is absent, so a mid-page reader never sees it
       parked 11px left. */
    body.cs-page .reveal.revealed .cs-cta > svg,
    body.cs-page .reveal.revealed .cs-cta > .cs-ico {
      animation: none;
      transform: none;
    }
    body.cs-page .cs-cta:active,
    body.cs-page .cs-cta:active > svg,
    body.cs-page .cs-cta:active > .cs-ico {
      transform: none;
    }

    /* the mobile floor-shadow insets must also hold under the pinned states */
    @media (max-width: 760px) {
      body.cs-page .cs-cta:not(.cs-cta--seam)::after,
      body.cs-page .cs-cta:not(.cs-cta--seam):hover::after,
      body.cs-page .cs-cta:not(.cs-cta--seam):active::after {
        left: 16px;
        right: 16px;
        bottom: -7px;
      }
      body.cs-page .cs-cta.cs-cta--structure::after,
      body.cs-page .cs-cta.cs-cta--structure:hover::after,
      body.cs-page .cs-cta.cs-cta--structure:active::after {
        left: 18px;
        right: 18px;
        bottom: -10px;
      }
    }

  /* ================= from 30-hero.css ================= */
  /* ---- 30-hero: parked ---- */
  /* the air stops drifting but stays lit */
  body.cs-page .cs-hero-atmos::after {
    animation: none;
    transform: none;
    opacity: 0.9;
  }
  /* "your goal" keeps its ramp gradient, loses the brightness cycle */
  body.cs-page .cs-hero-title .cs-hl-goal em {
    animation: none;
    filter: none;
  }
  /* the statement is simply present — no clause-by-clause entrance */
  body.cs-page .cs-hero-title.revealed .cs-hl-seg {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* the three sheets hold their fan and keep their lit edge mid-sheet;
     the rotate is preserved so the stack keeps its shape and footprint */
  body.cs-page .cs-por-cut,
  body.cs-page .cs-por-sill,
  body.cs-page .cs-por-cast {
    animation: none;
    transform: rotate(var(--rr-tilt));
    background-position: 50% 0, 0 0, 0 0;
  }
  body.cs-page .cs-hero-visual.revealed .cs-por-cast,
  body.cs-page .cs-hero-visual.revealed .cs-por-sill,
  body.cs-page .cs-hero-visual.revealed .cs-por-cut {
    animation: none;
  }
  /* the one data highlight rests visible on the front sheet */
  body.cs-page .cs-por-cut::after {
    animation: none;
    opacity: 0.7;
  }
  /* the bridge light rests at the head of the ramp line */
  body.cs-page .cs-bridge::before {
    animation: none;
    opacity: 0.85;
    transform: none;
  }
  body.cs-page .cs-hero-visual.revealed .cs-bridge::before {
    animation: none;
  }
  /* the strategy light rests at the top of the reading path */
  body.cs-page .cs-snap-path::after {
    animation: none;
    opacity: 0.5;
    top: 0;
  }
  /* every node keeps a quiet halo instead of pulsing in turn */
  body.cs-page .cs-snap-path li::after {
    animation: none;
    opacity: 0.3;
    transform: scale(1);
  }
  body.cs-page .cs-snap-path li:nth-child(1)::after,
  body.cs-page .cs-snap-path li:nth-child(2)::after,
  body.cs-page .cs-snap-path li:nth-child(3)::after,
  body.cs-page .cs-snap-path li:nth-child(4)::after,
  body.cs-page .cs-snap-path li:nth-child(5)::after {
    animation: none;
  }
  /* the stages are all simply there */
  body.cs-page .cs-hero-visual.revealed .cs-snap-path li {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* the panel no longer lifts on hover */
  body.cs-page .cs-snap { transition: none; }
  body.cs-page .cs-snap:hover { transform: none; }

  /* ================= from 40-journey.css ================= */
  /* ---- THE METHOD: parked, still legible ------------------------------- */

    /* the travelling signal: parked mid-rail instead of running it */
    body.cs-page .cs-moves::after {
      animation: none;
      background-position: 0 42%;
      opacity: 0.5;
      transform: none;
    }

    /* the per-phase charge: parked fully charged, so the channel reads as lit
       for a reader who never fires the observer */
    body.cs-page .cs-phase::before,
    body.cs-page .cs-moves.revealed .cs-phase::before {
      transition: none;
      clip-path: inset(0 -34px 0 -34px);
    }

    /* phase two's pill echo: parked with the light resting across the pill */
    body.cs-page .cs-phase--loop .cs-phase-label .cs-phase-n {
      animation: none;
      background-position: 50% 0;
    }

    /* the connectors: parked as a faint standing glint on each segment,
       never invisible */
    body.cs-page .cs-move::before {
      animation: none;
      background-position: 0 44%;
      opacity: 0.45;
    }

    /* 02's reading light: parked resting behind the title */
    body.cs-page .cs-move-set:first-of-type .cs-move:nth-child(2) > h3::after,
    body.cs-page .cs-moves.revealed .cs-move-set:first-of-type .cs-move:nth-child(2) > h3::after {
      animation: none;
      background-position: 50% 0;
      opacity: 0.4;
    }

    /* the six arrivals: parked at their arrived state — full opacity, no
       offset, no rotation. Size, flow position and line count are untouched. */
    body.cs-page .cs-move > h3,
    body.cs-page .cs-move > p,
    body.cs-page .cs-moves.revealed .cs-move > h3,
    body.cs-page .cs-moves.revealed .cs-move > p {
      transition: none;
      transform: none;
      opacity: 1;
    }

    /* the discs: parked lit and at full scale */
    body.cs-page .cs-move-num,
    body.cs-page .cs-moves.revealed .cs-move-num {
      transition: none;
      transform: none;
      opacity: 1;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 22px -8px rgba(var(--rr-stage-rgb), calc(0.6 + 0.3 * var(--rr-adv))),
        0 0 0 1px rgba(var(--rr-stage-rgb), calc(0.5 + 0.2 * var(--rr-adv))),
        0 0 calc(30px + 22px * var(--rr-adv)) calc(-12px + 2px * var(--rr-adv)) rgba(var(--rr-stage-rgb), calc(0.55 + 0.25 * var(--rr-adv))),
        0 16px 34px -18px rgba(2, 8, 22, 0.95);
    }

  /* ================= from 50-bureaus.css ================= */
  /* the three reports — the analysis pass parks mid-read.
       Replaces the old single line:
       body.cs-page .cs-scan-rows .cs-dots::after { animation: none; opacity: 0; } */

    /* the row rests down, its accent wash rests at its quiet level */
    body.cs-page .cs-scan-rows li { animation: none; transform: none; }
    body.cs-page .cs-scan-rows li::before { animation: none; opacity: 0.5; }

    /* the question rests legible, not mid-glow */
    body.cs-page .cs-scan-q b { animation: none; color: var(--rr-ink); text-shadow: none; }
    body.cs-page .cs-scan-q b::before {
      animation: none;
      opacity: 1;
      box-shadow: 0 0 14px -1px rgba(var(--acc-rgb, 56, 207, 255), 0.55);
    }

    /* the arrival light rests ACROSS each page rather than off its edge, so
       every cell still shows its lit top edge in its own bureau hue */
    body.cs-page .cs-scan-rows .cs-dots > b::after {
      animation: none;
      opacity: 0.34;
      background-position: 0 0, 42% 0, 0 0;
    }

    /* the column heads rest lit, all three equally */
    body.cs-page .cs-scan-cols .cs-scan-bureaus span::after { animation: none; opacity: 0.5; }

    /* the retired base sweep stays retired (it is content:none already) */
    body.cs-page .cs-scan-rows .cs-dots::after { animation: none; }

    /* the entrance parks fully arrived — a reader who lands mid-page and never
       fires the observer must not be left with dimmed cells or drawn-back
       guides. Selectors mirror the entrance rules exactly (0,6,2) and sit
       later in the cascade, so they win without !important. */
    body.cs-page .cs-method-side.reveal:not(.revealed) .cs-scan-rows .cs-dots > b {
      opacity: 1;
      transform: none;
      transition: none;
    }
    body.cs-page .cs-method-side.reveal:not(.revealed) .cs-scan-cols .cs-scan-bureaus span {
      opacity: 1;
      transform: none;
      transition: none;
    }
    body.cs-page .cs-method-side.reveal:not(.revealed) .cs-scan-rows::before {
      opacity: 1;
      transition: none;
    }

  /* ================= from 60-plan.css ================= */
  /* ---- 60-plan.css · parked ------------------------------------------ */

  /* the masthead sweep stops, lit, at its start position */
  body.cs-page .cs-ap-head {
    animation: none;
    background-position: 0 0, 0 0;
  }

  /* the note portrait stops breathing, seated */
  body.cs-page .cs-ap-seat {
    animation: none;
    transform: none;
  }

  /* WHAT CHANGED / NEXT MOVES entries land at their resting state */
  body.cs-page .cs-ap.revealed .cs-ap-changes li,
  body.cs-page .cs-ap.revealed .cs-ap-changes li:nth-child(1),
  body.cs-page .cs-ap.revealed .cs-ap-changes li:nth-child(2),
  body.cs-page .cs-ap.revealed .cs-ap-changes li:nth-child(3),
  body.cs-page .cs-ap.revealed .cs-ap-moves li,
  body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(1),
  body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(2),
  body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(3),
  body.cs-page .cs-ap.revealed .cs-ap-moves li:nth-child(4) {
    animation: none;
    animation-delay: 0s;
    transform: none;
    opacity: 1;
  }

  /* the moves rule keeps its travelling light, parked mid-rule */
  body.cs-page .cs-ap-grid > .cs-ap-block:nth-child(2) .cs-ap-h::after {
    animation: none;
    background-position: 50% 0, 0 0;
  }

  /* DONE keeps its sealed mark, no seal pulse */
  body.cs-page .cs-ap.revealed .cs-ap-moves li[data-state="done"] .cs-mv-icon {
    animation: none;
    transform: none;
    box-shadow: 0 0 0 1px rgba(175,221,44,0.32), 0 7px 18px -9px rgba(175,221,44,0.85);
  }

  /* the paydown sheen rests inside the fill */
  body.cs-page .cs-mv-bar i::before {
    animation: none;
    background-position: 50% 0, 0 0;
  }

  /* NEXT arrow and ONGOING turn hold still */
  body.cs-page .cs-ap-moves li[data-state="next"] .cs-mv-icon .cs-ico,
  body.cs-page .cs-ap-moves li[data-state="ongoing"] .cs-mv-icon .cs-ico {
    animation: none;
    transform: none;
  }

  /* the checkpoint seal stays armed but quiet */
  body.cs-page .cs-ap-foot .cs-pin {
    animation: none;
    box-shadow:
      inset 0 0 0 1px rgba(180,224,58,0.62),
      0 0 0 5px rgba(180,224,58,0.09),
      0 0 20px -6px rgba(180,224,58,0.7);
  }

  /* the staircase seams are already lit and full length — never scaled to 0 */
  body.cs-page .cs-steps.revealed .cs-step::before,
  body.cs-page .cs-steps.revealed .cs-step:nth-child(1)::before,
  body.cs-page .cs-steps.revealed .cs-step:nth-child(2)::before,
  body.cs-page .cs-steps.revealed .cs-step:nth-child(3)::before,
  body.cs-page .cs-steps.revealed .cs-step:nth-child(4)::before {
    animation: none;
    animation-delay: 0s;
    transform: none;
    opacity: var(--rr-seam-o, 0.7);
  }

  /* the handoff seam keeps its white light, parked at the centre */
  body.cs-page .cs-meet::before {
    animation: none;
    background-position: 50% 0, 0 0;
    opacity: 0.88;
  }

  /* the handoff node sits seated, not pulsing */
  body.cs-page .cs-meet::after {
    animation: none;
    transform: none;
    box-shadow:
      0 0 0 1px rgba(180,224,58,0.55),
      0 0 0 0 rgba(180,224,58,0.26),
      0 0 26px -8px rgba(180,224,58,0.85);
  }

  /* the deliverable marks are simply present */
  body.cs-page .cs-dl-item.revealed .cs-dl-icon {
    animation: none;
    transform: none;
    opacity: 1;
  }

  /* ================= from 65-story.css ================= */
  /* ---- 65 · THE ARGUMENT ---- */

  /* 1 · the difference — the analysis light rests as a soft band mid-column */
  body.cs-page .cs-compare-glow::before {
    animation: none;
    opacity: 0.45;
    transform: none;
  }
  /* the rows arrive already arrived */
  body.cs-page .cs-compare.revealed .cs-compare-row {
    animation: none;
    opacity: 1;
    transform: none;
  }
  body.cs-page .cs-compare-to { transition: none; }

  /* 2 · the unified quote — the drifting light parks centred and lit */
  body.cs-page .cs-thesis::before {
    animation: none;
    opacity: 0.85;
    transform: translate(-50%, -50%);
  }
  body.cs-page .cs-thesis.revealed .cs-beat {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 3 · where you're headed — the journey rail parks with its full ramp showing */
  body.cs-page .cs-fit-lead.revealed::after {
    animation: none;
    background-position: 50% 0;
  }
  body.cs-page .cs-scenes li { transition: none; }
  body.cs-page .cs-scenes li:hover { transform: none; }
  body.cs-page .cs-scenes.revealed li {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 4 · the part that stays with you */
  body.cs-page .cs-learn-panel.revealed .cs-learn-list li {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 5 · sound familiar — the connector sits on its seam, no drop */
  body.cs-page .cs-voice { transition: none; }
  body.cs-page .cs-voice:hover { transform: none; }
  body.cs-page .cs-voice.revealed .cs-voice-link {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 6 · faq and the close — the halo parks bright and centred */
  body.cs-page .cs-sec--faq .faq-item { transition: none; }
  body.cs-page .cs-close-inner::before {
    animation: none;
    opacity: 0.9;
    transform: translate(-50%, -50%);
  }

  /* ================= from 70-invest.css ================= */
  /* ---- 70-invest: motion parks, the composition does not move ---- */

  /* the arrow rests pointing down, at full strength */
  body.cs-page .cs-plan.revealed .cs-plan-cue .cs-ico {
    animation: none;
    opacity: 1;
    transform: rotate(90deg);
  }

  /* the lit key stays exactly where the checked state puts it -- it just
     stops sliding and stops pulsing */
  body.cs-page .cs-plan-switch::before,
  body.cs-page .cs-plan.revealed .cs-plan-switch::before {
    animation: none;
    transition: none;
  }
  body.cs-page .cs-plan-switch label { transition: none; }

  /* the price sentence is simply there, on its baselines */
  body.cs-page .cs-plan-option,
  body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-for,
  body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-num,
  body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-plus,
  body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-label,
  body.cs-page .cs-plan.revealed .cs-plan-option .cs-plan-scope {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* the ledger is fully written, markers at full size */
  body.cs-page .cs-plan.revealed .cs-plan-includes li {
    animation: none;
    opacity: 1;
    transform: none;
  }
  body.cs-page .cs-plan.revealed .cs-plan-includes li .cs-ico {
    animation: none;
    transform: none;
  }

  /* the blueprint room light rests lit */
  body.cs-page .cs-bp-stage::before {
    animation: none;
    opacity: 0.92;
    transform: none;
  }

  /* the pool of light rests at its widest reading, book still sitting on it */
  body.cs-page .cs-bp-floor {
    animation: none;
    opacity: 0.88;
    transform: none;
  }

  /* the book stops floating but keeps its tilt -- never flattens to 0deg */
  body.cs-page .cs-bp-book {
    animation: none;
    transform: rotate(-2.8deg);
  }
}
/* ===== CREDIT STRATEGY REFINEMENT (end) ===== */
/* ===== ABOUT PAGE REGION (start) ===== */
/* ============================================================
   ABOUT — FOUNDATION
   Everything on this page is scoped under `.ab-page`, which is on
   <body>. The old About had a bare <body> and 94 inline styles, so
   nothing on it could be restyled without reaching every other
   page; that is the defect this namespace exists to fix. The build
   refuses to write any rule whose first compound is not `.ab-`.

   The page borrows the house tokens (navy ramp, Cormorant display,
   Inter text, the accent four) and declares its own scale on top,
   so About reads as the same brand without being a copy of any
   service page.
   ============================================================ */

.ab-page {
  /* type */
  /* 5rem put "Built on experience." over two lines in a 587px column;
     4.5rem against the widened copy column below holds it on one */
  --ab-h1: clamp(2.625rem, 4.9vw, 4.5rem);
  --ab-h2: clamp(2.125rem, 3.9vw, 3.5rem);
  --ab-h2-flag: clamp(2.375rem, 4.4vw, 4rem);
  --ab-h3: clamp(1.1875rem, 1.6vw, 1.5rem);
  --ab-body: clamp(1rem, 1.05vw, 1.125rem);
  --ab-small: 0.9375rem;

  /* ink */
  --ab-ink: #e9f0fb;
  --ab-ink-2: #aebdd8;
  --ab-ink-3: rgba(174, 189, 216, 0.62);

  /* accents */
  --ab-cyan: #38cfff;
  --ab-indigo: #7f8ce6;
  --ab-teal: #44b59c;
  --ab-lime: #afdd2c;

  /* surface + rhythm */
  --ab-edge: rgba(150, 190, 235, 0.14);
  --ab-rule: rgba(150, 190, 235, 0.1);
  --ab-pad: clamp(72px, 9vw, 132px);
  --ab-shell: min(1180px, 100% - clamp(32px, 7vw, 96px));
  --ab-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ab-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* depth */
  --ab-d1: 0 2px 6px -3px rgba(2, 8, 20, 0.7), 0 14px 28px -20px rgba(2, 8, 20, 0.85);
  --ab-d2: 0 3px 9px -5px rgba(2, 8, 20, 0.8), 0 26px 52px -30px rgba(2, 8, 20, 0.95);
  --ab-d3: 0 4px 12px -6px rgba(2, 8, 20, 0.85), 0 42px 78px -34px rgba(2, 8, 20, 1);

  background: var(--navy-900);
}

.ab-page .ab-main { position: relative; }

.ab-page .ab-sec {
  position: relative;
  overflow: clip;
  padding: var(--ab-pad) 0;
}
.ab-page .ab-sec--hero { padding-top: clamp(104px, 11vw, 150px); }

/* the ambient field. One per section, tinted by the section's own
   accent, drawn past its own edges so neighbours overlap in light
   rather than meeting on a hard line. */
.ab-page .ab-atmos {
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at var(--ab-wash-x, 24%) 28%,
      rgba(var(--ab-wash, 56, 207, 255), 0.09) 0%, transparent 72%),
    radial-gradient(46% 40% at calc(100% - var(--ab-wash-x, 24%)) 84%,
      rgba(var(--ab-wash-2, 68, 181, 156), 0.075) 0%, transparent 74%);
}
.ab-page .ab-sec--hero      { --ab-wash: 56, 207, 255;  --ab-wash-2: 111, 126, 224; --ab-wash-x: 68%; }
.ab-page .ab-sec--why       { --ab-wash: 111, 126, 224; --ab-wash-2: 56, 207, 255;  --ab-wash-x: 26%; }
.ab-page .ab-sec--lesson    { --ab-wash: 56, 207, 255;  --ab-wash-2: 68, 181, 156;  --ab-wash-x: 50%; }
.ab-page .ab-sec--education { --ab-wash: 175, 221, 44;  --ab-wash-2: 56, 207, 255;  --ab-wash-x: 50%; }
.ab-page .ab-sec--goal      { --ab-wash: 68, 181, 156;  --ab-wash-2: 175, 221, 44;  --ab-wash-x: 30%; }
.ab-page .ab-sec--method    { --ab-wash: 56, 207, 255;  --ab-wash-2: 175, 221, 44;  --ab-wash-x: 50%; }
.ab-page .ab-sec--founder   { --ab-wash: 111, 126, 224; --ab-wash-2: 68, 181, 156;  --ab-wash-x: 72%; }
.ab-page .ab-sec--stand     { --ab-wash: 68, 181, 156;  --ab-wash-2: 56, 207, 255;  --ab-wash-x: 24%; }
.ab-page .ab-sec--begin     { --ab-wash: 175, 221, 44;  --ab-wash-2: 56, 207, 255;  --ab-wash-x: 50%; }

.ab-page .ab-shell {
  position: relative;
  z-index: 1;
  width: var(--ab-shell);
  margin-inline: auto;
}
.ab-page .ab-shell--narrow { width: min(840px, 100% - clamp(32px, 7vw, 96px)); }

/* ---- TYPE ---------------------------------------------------- */
.ab-page .ab-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgb(var(--ab-wash, 56, 207, 255));
}
.ab-page .ab-eyebrow::before {
  content: '';
  flex: none;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: rgb(var(--ab-wash, 56, 207, 255));
}

.ab-page .ab-h1,
.ab-page .ab-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.016em;
  color: var(--white);
  text-wrap: balance;
}
.ab-page .ab-h1 { font-size: var(--ab-h1); }
.ab-page .ab-h2 { font-size: var(--ab-h2); line-height: 1.08; }
.ab-page .ab-h2--flag { font-size: var(--ab-h2-flag); }
.ab-page .ab-line { display: block; }
.ab-page .ab-h1 em,
.ab-page .ab-h2 em {
  font-style: italic;
  color: var(--ab-cyan);
}
.ab-page .ab-sec--goal .ab-h2 em,
.ab-page .ab-sec--stand .ab-h2 em { color: var(--ab-teal); }
.ab-page .ab-sec--begin .ab-h2 em,
.ab-page .ab-sec--lesson .ab-h2 em { color: var(--ab-lime); }

.ab-page .ab-body {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 62ch;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.68;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}
.ab-page .ab-body + .ab-body { margin-top: clamp(13px, 1.4vw, 18px); }

.ab-page .ab-intro { position: relative; }
.ab-page .ab-intro--center {
  text-align: center;
  max-width: 50rem;
  margin-inline: auto;
}
.ab-page .ab-intro--center .ab-eyebrow { justify-content: center; }
.ab-page .ab-intro--center .ab-eyebrow::after {
  content: '';
  flex: none;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: rgb(var(--ab-wash, 56, 207, 255));
}
.ab-page .ab-intro--center .ab-body { margin-inline: auto; }

.ab-page .ab-tm {
  font-size: 0.4em;
  vertical-align: super;
  -webkit-text-fill-color: var(--ab-ink-3);
  color: var(--ab-ink-3);
}

/* ---- GRADIENT TEXT, the one signature treatment --------------- */
.ab-page .ab-gtext { color: var(--white); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-gtext {
    background-image:
      linear-gradient(100deg, rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 8%, rgba(255, 255, 255, 0) 16%),
      linear-gradient(100deg, var(--ab-g1, #7fe0ff), var(--ab-g2, #46d5c4), var(--ab-g3, #c6e95a));
    background-size: 240% 100%, 100% 100%;
    background-position: 180% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .ab-page .ab-gtext.revealed,
  .ab-page .revealed .ab-gtext {
    animation: abSheen 1.5s var(--ab-ease-soft) 0.25s 1 both;
  }
}
@keyframes abSheen {
  from { background-position: 180% 0, 0 0; }
  to   { background-position: -90% 0, 0 0; }
}

/* ---- THE ONE EDGE TRACE --------------------------------------- */
@keyframes abTraceX {
  from { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes abTraceY {
  from { transform: scaleY(0); opacity: 0; }
  12%  { opacity: 1; }
  to   { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-gtext.revealed,
  .ab-page .revealed .ab-gtext { animation: none; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ab-page .ab-gtext { background-position: -90% 0, 0 0; }
  }
}

@media (max-width: 760px) {
  .ab-page { --ab-pad: clamp(56px, 13vw, 76px); }
  .ab-page .ab-sec--hero { padding-top: clamp(84px, 20vw, 104px); }
  .ab-page .ab-body { max-width: none; }
}
/* ============================================================
   1 · HERO
   Founder-led, editorial, one CTA. Not a service funnel.
   ============================================================ */
.ab-page .ab-hero {
  display: grid;
  /* the statement needs the room: at 1.06/0.94 the first clause broke
     across two lines, which reads as a mistake rather than a line break */
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
  align-items: center;
  column-gap: clamp(40px, 5vw, 86px);
}
.ab-page .ab-hero-copy { min-width: 0; }
.ab-page .ab-hero .ab-lede {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  max-width: 54ch;
  font-family: var(--font);
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.66;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}

/* ---- THE ONE CTA ---- */
.ab-page .ab-hero-actions { margin: clamp(26px, 2.8vw, 36px) 0 0; }
.ab-page .ab-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 24px 15px 26px;
  border-radius: 3px 11px 11px 3px;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #06140a;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 58%),
    linear-gradient(104deg, #a7d93a 0%, #57ab28 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 -1px rgba(6, 20, 10, 0.6),
    0 18px 32px -18px rgba(87, 171, 40, 0.8);
  transition: transform 0.26s var(--ab-ease), box-shadow 0.26s var(--ab-ease);
}
.ab-page .ab-cta .ab-ico { width: 15px; height: 15px; }
.ab-page .ab-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 4px 0 -1px rgba(6, 20, 10, 0.6),
    0 24px 40px -18px rgba(87, 171, 40, 0.9);
}
.ab-page .ab-cta:focus-visible { outline: 2px solid var(--ab-lime); outline-offset: 3px; }

.ab-page .ab-hero-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: clamp(26px, 2.8vw, 38px) 0 0;
  padding-left: 15px;
  border-left: 2px solid rgba(56, 207, 255, 0.5);
  font-family: var(--font);
}
.ab-page .ab-hero-by-name { font-size: 0.9375rem; font-weight: 700; color: var(--white); }
.ab-page .ab-hero-by-role { font-size: 0.8125rem; color: var(--ab-ink-3); }

/* ============================================================
   THE PORTRAIT TREATMENT
   The photographs are real and stay real: no recolour, no blur,
   no filter on Steven. What changes is the ENVIRONMENT around
   them. The studio backdrop is a flat light grey that fought the
   navy page, so the plate behind gives it a reason to be there,
   the frame gives it an edge, and a mask dissolves only the outer
   margin of the plate into the page — the subject sits well inside
   the untouched area.
   ============================================================ */
.ab-page .ab-portrait {
  position: relative;
  margin: 0;
  min-width: 0;
}
/* the backing plate: the photo is filed on something */
.ab-page .ab-portrait-plate {
  position: absolute;
  z-index: 0;
  inset: 6% -5% -6% 7%;
  border-radius: 4px 20px 20px 4px;
  background-image: linear-gradient(158deg,
    rgba(34, 51, 80, 0.72) 0%, rgba(14, 24, 41, 0.72) 100%);
  box-shadow: inset 0 0 0 1px var(--ab-edge), var(--ab-d2);
}
/* the lit edge down the bound side */
.ab-page .ab-portrait-frame {
  position: absolute;
  z-index: 2;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.9) 54%, rgba(175, 221, 44, 0.9) 100%);
  transform-origin: top center;
}
.ab-page .ab-portrait.revealed .ab-portrait-frame,
.ab-page .revealed .ab-portrait-frame {
  animation: abTraceY 1s var(--ab-ease) 0.25s 1 both;
}
.ab-page .ab-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px 16px 16px 3px;
  box-shadow: var(--ab-d3);
  /* only the outer margin dissolves; the subject is untouched */
  -webkit-mask-image: radial-gradient(104% 92% at 44% 40%,
    #000 0%, #000 52%, rgba(0, 0, 0, 0.9) 72%, rgba(0, 0, 0, 0.45) 88%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(104% 92% at 44% 40%,
    #000 0%, #000 52%, rgba(0, 0, 0, 0.9) 72%, rgba(0, 0, 0, 0.45) 88%, rgba(0, 0, 0, 0) 100%);
}
/* THE BACKDROP RECEDES, THE SUBJECT DOES NOT.
   These are real studio photographs on a flat light-grey sweep, which
   fought a #070e1d page. The vignette is a radial that is fully
   TRANSPARENT across the middle where Steven is and only deepens in the
   outer corners, so the grey is pushed toward the page colour and
   nothing is laid over him: no tint, no filter, no recolour. */
.ab-page .ab-portrait::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-radius: 3px 16px 16px 3px;
  background:
    radial-gradient(86% 76% at 46% 40%,
      rgba(7, 14, 29, 0) 0%, rgba(7, 14, 29, 0) 54%,
      rgba(7, 14, 29, 0.42) 80%, rgba(7, 14, 29, 0.82) 100%),
    linear-gradient(180deg, rgba(7, 14, 29, 0.3) 0%, rgba(7, 14, 29, 0) 22%);
}

.ab-page .ab-portrait--founder img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 12%;
}

/* ============================================================
   2 · WHY TAXFUNDERS WAS BUILT
   The story was eight uninterrupted paragraphs. It is now four
   narrative beats beside the artifact the story turns on.
   ============================================================ */
.ab-page .ab-story {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: start;
  column-gap: clamp(40px, 4.6vw, 80px);
  margin-top: clamp(40px, 4.4vw, 68px);
}

.ab-page .ab-beats {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ab-beat;
}
.ab-page .ab-beat {
  position: relative;
  padding: 0 0 clamp(26px, 2.8vw, 38px) clamp(46px, 4.4vw, 62px);
}
.ab-page .ab-beat:last-child { padding-bottom: 0; }
/* the index, and the thread running between the beats */
.ab-page .ab-beat::before {
  content: attr(data-beat);
  position: absolute;
  left: 0; top: 1px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ab-cyan);
  background-image: linear-gradient(162deg, rgba(56, 207, 255, 0.2), rgba(56, 207, 255, 0.05));
  box-shadow: inset 0 0 0 1.5px rgba(56, 207, 255, 0.4);
}
.ab-page .ab-beat:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 14.5px; top: 38px; bottom: 10px;
  width: 1.5px;
  border-radius: 1px;
  background-image: linear-gradient(180deg,
    rgba(56, 207, 255, 0.42), rgba(56, 207, 255, 0.07));
}
.ab-page .ab-beat-h {
  margin: 0 0 9px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ab-ink-3);
}
.ab-page .ab-beat p {
  margin: 0;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.68;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}
.ab-page .ab-beat p + p { margin-top: 11px; }

/* ---- THE DECISION SHEET ----
   A branded editorial artifact. Cool stock, layered backing, one
   figure that carries the whole story, and the turn underneath it.
   Deliberately not a facsimile of any lender's paperwork. */


/* ---- THE PHONE ---- */
@media (max-width: 900px) {
  .ab-page .ab-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(30px, 7vw, 42px);
  }
  
  /* THE BACKDROP RECEDES, THE SUBJECT DOES NOT.
   These are real studio photographs on a flat light-grey sweep, which
   fought a #070e1d page. The vignette is a radial that is fully
   TRANSPARENT across the middle where Steven is and only deepens in the
   outer corners, so the grey is pushed toward the page colour and
   nothing is laid over him: no tint, no filter, no recolour. */
.ab-page .ab-portrait::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-radius: 3px 16px 16px 3px;
  background:
    radial-gradient(86% 76% at 46% 40%,
      rgba(7, 14, 29, 0) 0%, rgba(7, 14, 29, 0) 54%,
      rgba(7, 14, 29, 0.42) 80%, rgba(7, 14, 29, 0.82) 100%),
    linear-gradient(180deg, rgba(7, 14, 29, 0.3) 0%, rgba(7, 14, 29, 0) 22%);
}

  .ab-page .ab-portrait-plate { inset: 5% -4% -5% 6%; }

  .ab-page .ab-story {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(32px, 8vw, 44px);
  }
}

@media (max-width: 760px) {
  .ab-page .ab-cta { width: 100%; justify-content: center; }
  .ab-page .ab-beat { padding-left: 42px; }
  .ab-page .ab-beat::before { width: 27px; height: 27px; }
  .ab-page .ab-beat:not(:last-child)::after { left: 13px; top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-portrait.revealed .ab-portrait-frame,
  .ab-page .revealed .ab-portrait-frame { animation: none; transform: none; }
  .ab-page .ab-cta { transition: none; }
}
/* ============================================================
   3 · THE LESSON BECAME THE APPROACH
   Six things people usually look at one at a time, resolving onto
   one rail. Not six cards — six labels on a single line, which is
   the whole argument the section is making.
   ============================================================ */
.ab-page .ab-picture {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  column-gap: clamp(10px, 1.2vw, 20px);
  margin: clamp(44px, 5vw, 76px) auto 0;
  padding-bottom: clamp(52px, 5.4vw, 76px);
  max-width: 62rem;
}
.ab-page .ab-picture-piece {
  position: relative;
  display: block;
  padding-bottom: clamp(26px, 2.8vw, 38px);
  text-align: center;
}
.ab-page .ab-picture-piece b {
  display: block;
  font-family: var(--font);
  font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-ink-2);
}
/* each piece drops a thread onto the rail */
.ab-page .ab-picture-piece::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 1.5px;
  height: clamp(18px, 2vw, 26px);
  border-radius: 1px;
  background-image: linear-gradient(180deg,
    rgba(var(--ab-pc, 56, 207, 255), 0.6), rgba(var(--ab-pc, 56, 207, 255), 0.15));
}
.ab-page .ab-picture-piece::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: rgb(var(--ab-pc, 56, 207, 255));
  box-shadow: 0 0 12px -1px rgba(var(--ab-pc, 56, 207, 255), 0.75);
}
.ab-page .ab-picture-piece[data-piece="credit"]  { --ab-pc: 56, 207, 255; }
.ab-page .ab-picture-piece[data-piece="cash"]    { --ab-pc: 90, 170, 240; }
.ab-page .ab-picture-piece[data-piece="debt"]    { --ab-pc: 127, 140, 230; }
.ab-page .ab-picture-piece[data-piece="savings"] { --ab-pc: 68, 181, 156; }
.ab-page .ab-picture-piece[data-piece="taxes"]   { --ab-pc: 110, 200, 120; }
.ab-page .ab-picture-piece[data-piece="goals"]   { --ab-pc: 175, 221, 44; }

/* the rail they all land on */
.ab-page .ab-picture-rail {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(44px, 4.6vw, 64px);
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg,
    rgba(56, 207, 255, 0) 0%, rgba(56, 207, 255, 0.9) 10%,
    rgba(127, 140, 230, 0.9) 42%, rgba(68, 181, 156, 0.9) 68%,
    rgba(175, 221, 44, 0.9) 92%, rgba(175, 221, 44, 0) 100%);
  transform-origin: left center;
}
.ab-page .ab-picture.revealed .ab-picture-rail,
.ab-page .revealed .ab-picture-rail {
  animation: abTraceX 1.2s var(--ab-ease) 0.25s 1 both;
}
.ab-page .ab-picture-sum {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  padding: 7px 17px 8px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eaf7c9;
  background-image: linear-gradient(90deg,
    rgba(175, 221, 44, 0.18), rgba(68, 181, 156, 0.14));
  box-shadow: inset 0 0 0 1.5px rgba(175, 221, 44, 0.42);
}
.ab-page .ab-picture-note {
  margin: clamp(26px, 2.8vw, 38px) auto 0;
  max-width: 60ch;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.68;
  text-align: center;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}

/* ============================================================
   4 · EDUCATION FIRST
   An editorial pause. One quote, one light spine, one name.
   ============================================================ */
.ab-page .ab-creed {
  position: relative;
  padding-left: clamp(26px, 3.4vw, 46px);
  text-align: left;
}
/* the spine */
.ab-page .ab-creed::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg,
    rgba(175, 221, 44, 0.9) 0%, rgba(68, 181, 156, 0.6) 46%,
    rgba(56, 207, 255, 0.18) 100%);
  transform-origin: top center;
}
.ab-page .ab-creed.revealed::before,
.ab-page .revealed .ab-creed::before {
  animation: abTraceY 1.1s var(--ab-ease) 0.2s 1 both;
}
.ab-page .ab-creed-h {
  --ab-g1: #c6e95a;
  --ab-g2: #7fe0ff;
  --ab-g3: #46d5c4;
  margin: 0 0 clamp(24px, 2.6vw, 34px);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}
.ab-page .ab-quote { margin: 0; }
.ab-page .ab-quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.3vw, 2rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.38;
  letter-spacing: -0.008em;
  color: var(--white);
  text-wrap: pretty;
}
.ab-page .ab-quote-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  font-family: var(--font);
}
.ab-page .ab-quote-name { font-size: 0.9375rem; font-weight: 700; color: var(--white); }
.ab-page .ab-quote-role { font-size: 0.8125rem; color: var(--ab-ink-3); }
.ab-page .ab-creed-note {
  margin: clamp(26px, 2.8vw, 36px) 0 0;
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--ab-rule);
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.68;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}

/* ============================================================
   5 · GOAL -> UNDERSTAND -> STRATEGIZE -> ACT -> REVIEW
   One route, five stops. The rail is drawn once on arrival and
   then stops; with motion off it is simply already drawn.
   ============================================================ */
.ab-page .ab-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(14px, 1.6vw, 26px);
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
/* the route itself, between the first and last stop markers */
.ab-page .ab-route::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 10%; right: 10%;
  top: 15px;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg,
    rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 52%, rgba(175, 221, 44, 0.95) 100%);
  transform-origin: left center;
}
.ab-page .ab-route.revealed::before,
.ab-page .revealed .ab-route::before {
  animation: abTraceX 1.35s var(--ab-ease) 0.3s 1 both;
}
.ab-page .ab-route-stop {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: clamp(44px, 4.4vw, 58px);
  text-align: center;
}
.ab-page .ab-route-stop::before {
  content: attr(data-stop);
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  color: rgb(var(--ab-sc, 56, 207, 255));
  background-image:
    linear-gradient(162deg, rgba(var(--ab-sc, 56, 207, 255), 0.24), rgba(var(--ab-sc, 56, 207, 255), 0.07)),
    linear-gradient(162deg, #16233a, #0d1728);
  box-shadow:
    inset 0 0 0 1.5px rgba(var(--ab-sc, 56, 207, 255), 0.55),
    0 0 0 6px var(--navy-900),
    0 0 20px -5px rgba(var(--ab-sc, 56, 207, 255), 0.6);
}
.ab-page .ab-route-stop:nth-child(1) { --ab-sc: 56, 207, 255; }
.ab-page .ab-route-stop:nth-child(2) { --ab-sc: 95, 172, 236; }
.ab-page .ab-route-stop:nth-child(3) { --ab-sc: 68, 181, 156; }
.ab-page .ab-route-stop:nth-child(4) { --ab-sc: 120, 198, 110; }
.ab-page .ab-route-stop:nth-child(5) { --ab-sc: 175, 221, 44; }
.ab-page .ab-route-h {
  margin: 0 0 7px;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}
.ab-page .ab-route-stop p {
  margin: 0;
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ab-ink-3);
  text-wrap: pretty;
}
.ab-page .ab-route-note {
  margin: clamp(34px, 3.6vw, 50px) 0 0;
  max-width: 64ch;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.68;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}

/* ---- THE PHONE ---- */
@media (max-width: 860px) {
  /* six labels across a phone is six columns of one word each; the
     rail turns and the pieces become a short read instead */
  .ab-page .ab-picture {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(20px, 5vw, 28px);
    padding-bottom: clamp(60px, 15vw, 76px);
  }
  .ab-page .ab-picture-rail { bottom: clamp(50px, 12vw, 62px); }
  .ab-page .ab-picture-piece { padding-bottom: 0; }
  .ab-page .ab-picture-piece::before,
  .ab-page .ab-picture-piece::after { display: none; }
  .ab-page .ab-picture-piece b {
    padding: 9px 4px 10px;
    border-radius: 3px 8px 8px 3px;
    background-image: linear-gradient(110deg,
      rgba(var(--ab-pc), 0.16), rgba(var(--ab-pc), 0.05));
    box-shadow: inset 2px 0 0 rgba(var(--ab-pc), 0.85);
  }

  /* the route runs down the side, stops left, text right */
  .ab-page .ab-route {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(22px, 5.4vw, 30px);
  }
  .ab-page .ab-route::before {
    left: 15px; right: auto;
    top: 16px; bottom: 16px;
    width: 2px; height: auto;
    background-image: linear-gradient(180deg,
      rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.95) 52%, rgba(175, 221, 44, 0.95) 100%);
    transform-origin: center top;
  }
  .ab-page .ab-route.revealed::before,
  .ab-page .revealed .ab-route::before {
    animation: abTraceY 1.35s var(--ab-ease) 0.3s 1 both;
  }
  .ab-page .ab-route-stop {
    padding: 0 0 0 clamp(48px, 12vw, 58px);
    text-align: left;
    min-height: 32px;
  }
  .ab-page .ab-route-stop::before { left: 0; transform: none; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-picture.revealed .ab-picture-rail,
  .ab-page .revealed .ab-picture-rail,
  .ab-page .ab-creed.revealed::before,
  .ab-page .revealed .ab-creed::before,
  .ab-page .ab-route.revealed::before,
  .ab-page .revealed .ab-route::before {
    animation: none;
    transform: none;
    opacity: 1;
  }
}
/* ============================================================
   6 · THE SIGNATURE METHODOLOGY — AT ABOUT LEVEL
   Four connected concepts on one bound edge, not four cards and
   not a second copy of the Financial Reset section. One line of
   philosophy each; the ledgers, the figures and the worked month
   stay where they belong, on Financial Reset.
   ============================================================ */


/* one edge runs the whole set: four pillars, one methodology */


/* a hairline between concepts, not a box around each */

.ab-page .ab-pillar-no {
  display: block;
  margin-bottom: clamp(12px, 1.3vw, 17px);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgb(var(--ab-pt, 56, 207, 255));
}


.ab-page .ab-pillar-h {
  margin: 0 0 clamp(9px, 1vw, 13px);
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.55vw, 1.5rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}


/* ============================================================
   7 · MEET STEVEN
   An editorial profile, not a bio card with a pill rack. The five
   service pills the old page carried under the bio said nothing
   the rest of the page had not already said better.
   ============================================================ */
.ab-page .ab-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  column-gap: clamp(38px, 4.6vw, 80px);
}
.ab-page .ab-founder-copy { min-width: 0; }
.ab-page .ab-founder-name {
  margin: 0;
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
}
.ab-page .ab-founder-role {
  margin: clamp(9px, 1vw, 13px) 0 0;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ab-cyan);
}
.ab-page .ab-founder-copy .ab-body:first-of-type { margin-top: clamp(20px, 2.2vw, 28px); }
.ab-page .ab-founder-creed {
  margin: clamp(24px, 2.6vw, 34px) 0 0;
  padding: clamp(17px, 1.9vw, 23px) clamp(19px, 2vw, 26px);
  border-radius: 3px 12px 12px 3px;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.66;
  color: var(--ab-ink-2);
  background-image:
    linear-gradient(90deg, rgba(56, 207, 255, 0.9) 0 2px, rgba(0, 0, 0, 0) 2px),
    linear-gradient(110deg, rgba(56, 207, 255, 0.09), rgba(56, 207, 255, 0.025));
  text-wrap: pretty;
}
.ab-page .ab-founder-creed strong { color: var(--white); font-weight: 650; }

/* ---- THE PHONE ---- */
@media (max-width: 900px) {
  .ab-page .ab-founder {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 6.4vw, 38px);
  }
  .ab-page .ab-portrait--founder { max-width: 360px; }
  .ab-page .ab-portrait--founder img { aspect-ratio: 1 / 1; object-position: center 10%; }
}

@media (max-width: 860px) {
  /* four columns of one-line philosophy becomes four unreadable
     slivers; the set turns and keeps its single bound edge */
  
  
  
  
  
  
  
}
/* ============================================================
   8 · WHAT WE STAND FOR
   The old page said this three times: a Mission/Vision/Commitment
   card row, a five-card emoji values grid, and a four-item
   "Difference" list. One list now, as a definition list, because
   that is literally what it is — a term and what the term means.
   Staggered rules, no boxes, no icons, no emoji.
   ============================================================ */
.ab-page .ab-stand {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4.4vw, 80px);
  margin: clamp(40px, 4.4vw, 64px) 0 0;
}
.ab-page .ab-stand-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(18px, 2vw, 25px) 0;
  border-top: 1px solid var(--ab-rule);
}
/* the first row of EACH column opens the list */
.ab-page .ab-stand-row:nth-child(1),
.ab-page .ab-stand-row:nth-child(2) { border-top: 0; padding-top: 0; }
.ab-page .ab-stand-t {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}
/* a short accent tick, the only mark each term gets */
.ab-page .ab-stand-t::after {
  content: '';
  display: block;
  width: 22px; height: 2px;
  margin-top: 9px;
  border-radius: 1px;
  background: rgb(var(--ab-st, 68, 181, 156));
}
.ab-page .ab-stand-row:nth-child(1) { --ab-st: 56, 207, 255; }
.ab-page .ab-stand-row:nth-child(2) { --ab-st: 95, 172, 236; }
.ab-page .ab-stand-row:nth-child(3) { --ab-st: 127, 140, 230; }
.ab-page .ab-stand-row:nth-child(4) { --ab-st: 68, 181, 156; }
.ab-page .ab-stand-row:nth-child(5) { --ab-st: 120, 198, 110; }
.ab-page .ab-stand-row:nth-child(6) { --ab-st: 175, 221, 44; }
.ab-page .ab-stand dd {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.64;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}
.ab-page .ab-stand-note {
  margin: clamp(32px, 3.4vw, 46px) 0 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--ab-rule);
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.66;
  color: var(--ab-ink-2);
}

/* ============================================================
   9 · WHERE DO YOU WANT TO BEGIN
   Three paths on one rail — the same construction as the route
   above, so the page closes in the language it has been speaking.
   Not three outlined cards.
   ============================================================ */


/* ---- THE PHONE ---- */
@media (max-width: 900px) {
  .ab-page .ab-stand { grid-template-columns: minmax(0, 1fr); }
  .ab-page .ab-stand-row:nth-child(2) { border-top: 1px solid var(--ab-rule); padding-top: clamp(18px, 2vw, 25px); }
}
@media (max-width: 620px) {
  /* term above definition: a 0.42fr column at 390 is two words a line */
  .ab-page .ab-stand-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .ab-page .ab-stand-t::after { margin-top: 8px; }
}
/* ============================================================
   STORY / POSITIONING CORRECTION
   Four things this adds, after the Four Pillars section, the
   three-service closing and the hero portrait were deleted:
     1 a hero that is premium WITHOUT a photograph
     2 the transition that broadens the story past credit
     3 the brand closing
     4 Steven's identity attached to his photograph
   Plus a mobile hierarchy that actually announces each section.
   ============================================================ */

/* ------------------------------------------------------------
   1 · THE HERO, WITHOUT A PHOTOGRAPH
   One column, generous measure, and depth carried by light and a
   single piece of brand geometry rather than an image. The hero
   now opens on the company, not on a person.
   ------------------------------------------------------------ */
.ab-page .ab-sec--hero { padding-bottom: clamp(84px, 10vw, 148px); }
.ab-page .ab-hero {
  display: block;
  max-width: 54rem;
}
.ab-page .ab-hero .ab-lede { max-width: 58ch; }

/* the geometry: three quiet arcs of the brand progression, large,
   off the right edge, doing the job the photograph used to do */
.ab-page .ab-hero-mark {
  position: absolute;
  z-index: 0;
  right: -14vw;
  top: 50%;
  width: min(68vw, 880px);
  aspect-ratio: 1;
  transform: translateY(-46%);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.55;
  background:
    radial-gradient(closest-side,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 61%,
      rgba(56, 207, 255, 0.22) 61.4%, rgba(56, 207, 255, 0) 62.6%),
    radial-gradient(closest-side,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 76%,
      rgba(68, 181, 156, 0.18) 76.4%, rgba(68, 181, 156, 0) 77.8%),
    radial-gradient(closest-side,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 91%,
      rgba(175, 221, 44, 0.14) 91.4%, rgba(175, 221, 44, 0) 92.8%),
    radial-gradient(closest-side,
      rgba(56, 207, 255, 0.07) 0%, rgba(56, 207, 255, 0) 70%);
}
/* and one rule under the statement, drawn once */
.ab-page .ab-hero-rule {
  display: block;
  width: min(100%, 30rem);
  height: 2px;
  margin-top: clamp(34px, 3.6vw, 50px);
  border-radius: 2px;
  background-image: linear-gradient(90deg,
    rgba(56, 207, 255, 0.95) 0%, rgba(68, 181, 156, 0.8) 46%, rgba(175, 221, 44, 0) 100%);
  transform-origin: left center;
}
.ab-page .ab-hero.revealed .ab-hero-rule,
.ab-page .revealed .ab-hero-rule {
  animation: abTraceX 1.1s var(--ab-ease) 0.35s 1 both;
}

/* ------------------------------------------------------------
   2 · THE TURN — the story stops being about one car loan
   ------------------------------------------------------------ */
.ab-page .ab-lesson-turn {
  margin: clamp(40px, 4.4vw, 60px) auto clamp(18px, 2vw, 26px);
  max-width: 44rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-align: center;
  color: var(--white);
}
.ab-page .ab-lesson-turn em { font-style: italic; color: var(--ab-lime); }
.ab-page .ab-lesson-body {
  margin: 0 auto;
  max-width: 62ch;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.68;
  text-align: center;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   3 · STEVEN'S IDENTITY BELONGS TO HIS PHOTOGRAPH
   The name and title used to sit in the copy column, past the
   headline; a reader scanning the image had to go looking for who
   it was. It is now part of the frame.
   ------------------------------------------------------------ */
.ab-page .ab-portrait-cap {
  position: absolute;
  z-index: 3;
  left: 3px; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(34px, 4vw, 52px) clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 20px);
  border-radius: 0 0 16px 3px;
  background-image: linear-gradient(180deg,
    rgba(7, 14, 29, 0) 0%, rgba(7, 14, 29, 0.72) 46%, rgba(7, 14, 29, 0.94) 100%);
}
.ab-page .ab-portrait-name {
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
}
.ab-page .ab-portrait-role {
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ab-cyan);
}
/* the founder copy opens on the name, so the heading does not
   repeat what the caption already said */
.ab-page .ab-founder-copy .ab-body:first-of-type { margin-top: clamp(18px, 2vw, 26px); }

/* ------------------------------------------------------------
   4 · THE BRAND CLOSING
   About ends on the company, not on a menu.
   ------------------------------------------------------------ */
.ab-page .ab-close { text-align: center; }
.ab-page .ab-close .ab-eyebrow { justify-content: center; }
.ab-page .ab-close .ab-eyebrow::after {
  content: '';
  flex: none;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: rgb(var(--ab-wash, 175, 221, 44));
}
.ab-page .ab-triad {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vw, 6px);
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 4.6vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.ab-page .ab-triad-l { display: block; }
.ab-page .ab-triad-l[data-tone="cyan"] { color: #9fe6ff; }
.ab-page .ab-triad-l[data-tone="teal"] { color: #eaf2ff; }
.ab-page .ab-triad-l[data-tone="lime"] em { font-style: italic; color: var(--ab-lime); }
.ab-page .ab-close-rule {
  display: block;
  width: clamp(120px, 16vw, 200px);
  height: 2px;
  margin: clamp(30px, 3.2vw, 44px) auto 0;
  border-radius: 2px;
  background-image: linear-gradient(90deg,
    rgba(56, 207, 255, 0) 0%, rgba(56, 207, 255, 0.9) 24%,
    rgba(68, 181, 156, 0.9) 58%, rgba(175, 221, 44, 0.9) 84%, rgba(175, 221, 44, 0) 100%);
  transform-origin: center;
}
.ab-page .ab-close-body {
  margin: clamp(26px, 2.8vw, 36px) auto 0;
  max-width: 58ch;
  font-family: var(--font);
  font-size: var(--ab-body);
  line-height: 1.7;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}
.ab-page .ab-close-actions { margin: clamp(30px, 3.2vw, 42px) 0 0; }
/* understated: this is a company page, not a conversion page */
.ab-page .ab-cta--quiet {
  color: var(--ab-ink);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
    linear-gradient(110deg, rgba(56, 207, 255, 0.1), rgba(175, 221, 44, 0.07));
  box-shadow:
    inset 0 0 0 1.5px rgba(150, 190, 235, 0.3),
    inset 0 1px 0 rgba(226, 240, 255, 0.14),
    0 16px 30px -22px rgba(2, 8, 20, 0.9);
}
.ab-page .ab-cta--quiet:hover {
  color: var(--white);
  box-shadow:
    inset 0 0 0 1.5px rgba(175, 221, 44, 0.55),
    inset 0 1px 0 rgba(226, 240, 255, 0.2),
    0 22px 38px -22px rgba(2, 8, 20, 0.95);
}

/* ============================================================
   5 · MOBILE HIERARCHY
   The eyebrows and headlines were set for desktop and merely
   reflowed, so on a phone every section opened at roughly the
   same weight as its own body copy. Each section now OPENS with
   a centred, materially larger composition — and then the body
   goes back to left-aligned, because centred paragraphs are
   harder to read, not more premium.
   ============================================================ */
@media (max-width: 760px) {
  .ab-page {
    --ab-h1: clamp(2.625rem, 11.4vw, 3.25rem);
    --ab-h2: clamp(2.125rem, 9.2vw, 2.625rem);
    --ab-h2-flag: clamp(2.25rem, 9.8vw, 2.75rem);
  }

  /* every section intro is centred and announces itself */
  .ab-page .ab-intro,
  .ab-page .ab-founder-copy,
  .ab-page .ab-hero { text-align: center; }
  .ab-page .ab-eyebrow {
    justify-content: center;
    font-size: 0.75rem;
    letter-spacing: 0.19em;
    color: rgb(var(--ab-wash, 56, 207, 255));
  }
  .ab-page .ab-eyebrow::after {
    content: '';
    flex: none;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: rgb(var(--ab-wash, 56, 207, 255));
  }
  .ab-page .ab-eyebrow::before { width: 22px; }
  .ab-page .ab-eyebrow--hero { font-size: 0.8125rem; }
  /* this one is long enough to wrap at phone width, and flanking rules on
     line 1 of a two-line label just read as a wrap artifact */
  .ab-page .ab-eyebrow--hero::before,
  .ab-page .ab-eyebrow--hero::after { display: none; }

  /* ...and then the reading goes back to the left */
  .ab-page .ab-hero .ab-lede,
  .ab-page .ab-intro .ab-body,
  .ab-page .ab-lesson-body,
  .ab-page .ab-picture-note,
  .ab-page .ab-route-note,
  .ab-page .ab-stand-note,
  .ab-page .ab-close-body,
  .ab-page .ab-founder-copy .ab-body,
  .ab-page .ab-founder-creed {
    text-align: left;
  }
  .ab-page .ab-hero-actions,
  .ab-page .ab-close-actions { text-align: center; }
  .ab-page .ab-hero-rule { margin-inline: auto; }

  /* the hero geometry sits behind the statement rather than beside it */
  .ab-page .ab-hero-mark {
    right: -36vw;
    top: 38%;
    width: 150vw;
    opacity: 0.4;
  }

  .ab-page .ab-lesson-turn { font-size: clamp(1.5rem, 7.4vw, 1.875rem); }
  .ab-page .ab-triad { font-size: clamp(2rem, 10.4vw, 2.75rem); }

  /* the founder caption stays legible at phone width */
  .ab-page .ab-portrait-cap { padding: 40px 16px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-hero.revealed .ab-hero-rule,
  .ab-page .revealed .ab-hero-rule {
    animation: none;
    transform: none;
    opacity: 1;
  }
}
/* ============================================================
   PASS 2 — BROADENING THE STORY PAST CREDIT
   Hero (room to breathe + the CRC Expo photograph), the founder
   story artifacts, the connected-picture rail, and the founder
   section's hierarchy.
   ============================================================ */

/* ------------------------------------------------------------
   A · HERO
   The nav is position:fixed and 81px tall, and the hero eyebrow
   was starting at 150px — 69px of clearance, which is what made
   the hero feel pinned to the header. The photograph sits AFTER
   the copy in the DOM so the phone reads copy-then-image with no
   `order` trickery; desktop puts it back on the right.
   ------------------------------------------------------------ */
.ab-page .ab-sec--hero { padding-top: clamp(150px, 14.5vw, 236px); }

.ab-page .ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr);
  align-items: center;
  column-gap: clamp(44px, 5.4vw, 86px);
  max-width: none;
}
.ab-page .ab-hero-copy { min-width: 0; }
/* the company message stays dominant: the copy keeps a full
   editorial measure even though it now shares the row */
.ab-page .ab-hero .ab-lede { max-width: 48ch; }

/* ---- the photograph ---- */
.ab-page .ab-hero-fig {
  position: relative;
  z-index: 1;
  margin: 0;
  justify-self: end;
  width: min(100%, 23.5rem);
}
/* a soft halo rather than an offset panel: the earlier version put a
   second empty rectangle beside the photograph, which read as a mistake */
.ab-page .ab-hero-fig-plate {
  position: absolute;
  z-index: 0;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  background-image: radial-gradient(closest-side,
    rgba(56, 207, 255, 0.11) 0%, rgba(111, 126, 224, 0.06) 54%, rgba(56, 207, 255, 0) 78%);
}
/* the bound edge, in the brand progression */
.ab-page .ab-hero-fig-edge {
  position: absolute;
  z-index: 3;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(180deg, #38cfff 0%, #44b59c 54%, #afdd2c 100%);
}
.ab-page .ab-hero-fig-win {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 3px 14px 0 0;
  /* 1:1 against a 3:4 source crops exactly the top 25% — which is
     where the stage branding sits. The note-taking stays. */
  aspect-ratio: 1 / 1;
  box-shadow:
    inset 0 0 0 1px rgba(150, 190, 235, 0.2),
    0 30px 60px -40px rgba(2, 8, 20, 0.95);
}
.ab-page .ab-hero-fig-win img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
/* light shaping at the edges only — the photograph itself is not
   recoloured, filtered or retouched */
.ab-page .ab-hero-fig-win::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(5, 11, 24, 0.5) 0%, rgba(5, 11, 24, 0) 26%),
    linear-gradient(0deg, rgba(5, 11, 24, 0.44) 0%, rgba(5, 11, 24, 0) 30%);
}
.ab-page .ab-hero-fig-cap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(14px, 1.5vw, 19px) clamp(16px, 1.7vw, 22px) clamp(16px, 1.7vw, 21px);
  border-radius: 0 0 16px 3px;
  background-image:
    linear-gradient(180deg, rgba(12, 22, 44, 0.96), rgba(8, 15, 32, 0.96));
  box-shadow: inset 0 0 0 1px rgba(150, 190, 235, 0.16);
}
.ab-page .ab-hero-fig-k {
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ab-lime);
}
.ab-page .ab-hero-fig-t {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--white);
}
.ab-page .ab-hero-fig-d {
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ab-ink-2);
}

/* ---- the hero geometry steps back behind the picture ---- */
.ab-page .ab-sec--hero .ab-hero-mark {
  right: -22vw;
  width: min(56vw, 760px);
  opacity: 0.4;
}

/* ------------------------------------------------------------
   A4 · THE CTA, WITH A LITTLE MORE LIFE
   One sheen that crosses on hover, a lift, and the arrow nudging
   toward what it points at. No looping idle animation — a button
   that moves while nobody is touching it reads as a banner ad.
   ------------------------------------------------------------ */
.ab-page .ab-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
.ab-page .ab-cta > * { position: relative; z-index: 1; }
.ab-page .ab-cta-sheen {
  position: absolute;
  z-index: 0;
  top: -60%;
  left: -40%;
  width: 36%;
  height: 220%;
  pointer-events: none;
  transform: translateX(-120%) rotate(14deg);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
.ab-page .ab-cta:hover,
.ab-page .ab-cta:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 5px 0 -1px rgba(6, 20, 10, 0.6),
    0 20px 34px -18px rgba(120, 190, 40, 0.5);
}
.ab-page .ab-cta:hover .ab-cta-sheen,
.ab-page .ab-cta:focus-visible .ab-cta-sheen {
  animation: abCtaSheen 0.9s cubic-bezier(0.3, 0.8, 0.4, 1) 1 both;
}
.ab-page .ab-cta:active { transform: translateY(0); }
.ab-page .ab-cta .ab-ico {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-page .ab-cta:hover .ab-ico,
.ab-page .ab-cta:focus-visible .ab-ico { transform: translateY(3px); }
/* the quiet closing CTA gets the same behaviour, in its own key */
.ab-page .ab-cta--quiet:hover,
.ab-page .ab-cta--quiet:focus-visible { filter: none; }
.ab-page .ab-cta--quiet:hover .ab-ico,
.ab-page .ab-cta--quiet:focus-visible .ab-ico { transform: translateX(3px); }

@keyframes abCtaSheen {
  from { transform: translateX(-120%) rotate(14deg); }
  to   { transform: translateX(420%) rotate(14deg); }
}

/* ------------------------------------------------------------
   HERO — THE PHONE
   Copy first, image second, and the opening set materially
   larger and centred.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .ab-page .ab-hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(30px, 6.6vw, 44px);
  }
  .ab-page .ab-hero-fig {
    justify-self: stretch;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
  }
  .ab-page .ab-hero .ab-lede { max-width: none; }
}
@media (max-width: 760px) {
  .ab-page .ab-sec--hero { padding-top: clamp(118px, 26vw, 150px); }
  /* 4/3 here cropped 44% off the top and took his head with it; 1:1
     crops the same 25% as desktop, so the note-taking still reads */
  .ab-page .ab-hero-fig-win { aspect-ratio: 1 / 1; }
  .ab-page .ab-hero-fig-cap { text-align: left; }

  /* B/F · the opening set carries the page on a phone */
  /* h1 stays at 11.4vw: "Built on experience." is 20 characters and at
     390 the line is already at its maximum. Pushing it to 12.6vw broke
     the phrase across two lines, which costs more than the size gains.
     The increase goes to the section headings, whose lines are short
     enough to carry it. */
  .ab-page {
    --ab-h2: clamp(2.3125rem, 10.2vw, 2.875rem);
    --ab-h2-flag: clamp(2.25rem, 9.9vw, 2.75rem);
  }
  .ab-page .ab-eyebrow { font-size: 0.8125rem; }
  .ab-page .ab-eyebrow--hero { font-size: 0.875rem; }

  /* the label wrapped to two lines and left the arrow floating */
  .ab-page .ab-cta {
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-cta,
  .ab-page .ab-cta .ab-ico { transition: none; }
  .ab-page .ab-cta:hover,
  .ab-page .ab-cta:focus-visible { transform: none; }
  .ab-page .ab-cta:hover .ab-ico,
  .ab-page .ab-cta:focus-visible .ab-ico { transform: none; }
  .ab-page .ab-cta:hover .ab-cta-sheen,
  .ab-page .ab-cta:focus-visible .ab-cta-sheen { animation: none; }
}

/* ============================================================
   D · THE CONNECTED PICTURE, WITH A PULSE
   Six labels on a rail made the argument but sat completely
   still. A light now travels the rail on a slow loop and each
   node answers as it passes, so the six read as one circuit
   rather than six captions. One cycle every nine seconds —
   slow enough to notice and ignore, which is the difference
   between premium and a banner ad.
   ============================================================ */

/* ---- entrance: the pieces arrive in sequence ---- */
@keyframes abPieceIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.ab-page .ab-picture-piece {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
/* `backwards`, not `both`: a forwards-filled animation would pin the
   final transform and swallow the hover lift below */
.ab-page .ab-picture.revealed .ab-picture-piece {
  animation: abPieceIn 0.62s var(--ab-ease) backwards;
}
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(1) { animation-delay: 0.26s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(2) { animation-delay: 0.35s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(3) { animation-delay: 0.44s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(4) { animation-delay: 0.53s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(5) { animation-delay: 0.62s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(6) { animation-delay: 0.71s; }

/* ---- the travelling light ---- */
.ab-page .ab-picture-rail { overflow: visible; }
.ab-page .ab-picture-rail::after {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 19%;
  height: 7px;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(90deg,
    rgba(226, 244, 255, 0) 0%, rgba(226, 244, 255, 0.5) 42%,
    rgba(255, 255, 255, 0.92) 62%, rgba(226, 244, 255, 0) 100%);
  filter: blur(1.5px);
}
.ab-page .ab-picture.revealed .ab-picture-rail::after {
  animation: abRailSweep 9s cubic-bezier(0.5, 0, 0.5, 1) 1.5s infinite;
}
@keyframes abRailSweep {
  0%   { transform: translateX(-24%); opacity: 0; }
  4%   { opacity: 0.95; }
  34%  { opacity: 0.95; }
  40%  { transform: translateX(545%); opacity: 0; }
  100% { transform: translateX(545%); opacity: 0; }
}

/* ---- each node answers as the light reaches it ---- */
@keyframes abNodeLight {
  0%   { transform: scale(1); filter: brightness(1); }
  2.6% { transform: scale(1.55); filter: brightness(1.85); }
  8%   { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1); filter: brightness(1); }
}
.ab-page .ab-picture.revealed .ab-picture-piece::before {
  animation: abNodeLight 9s ease-out infinite;
}
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(1)::before { animation-delay: 1.78s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(2)::before { animation-delay: 2.32s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(3)::before { animation-delay: 2.86s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(4)::before { animation-delay: 3.40s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(5)::before { animation-delay: 3.94s; }
.ab-page .ab-picture.revealed .ab-picture-piece:nth-child(6)::before { animation-delay: 4.48s; }

/* ---- and the sum acknowledges the circuit completing ---- */
@keyframes abSumGlow {
  0%   { box-shadow: 0 0 0 0 rgba(175, 221, 44, 0); }
  3%   { box-shadow: 0 0 26px -4px rgba(175, 221, 44, 0.55); }
  14%  { box-shadow: 0 0 0 0 rgba(175, 221, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(175, 221, 44, 0); }
}
.ab-page .ab-picture.revealed .ab-picture-sum {
  animation: abSumGlow 9s ease-out 4.9s infinite;
}

/* ---- and they answer the pointer too ---- */
.ab-page .ab-picture-piece:hover { transform: translateY(-4px); filter: brightness(1.18); }
.ab-page .ab-picture-piece b { transition: color 0.4s ease; }
.ab-page .ab-picture-piece:hover b { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-picture.revealed .ab-picture-piece,
  .ab-page .ab-picture.revealed .ab-picture-piece::before,
  .ab-page .ab-picture.revealed .ab-picture-rail::after,
  .ab-page .ab-picture.revealed .ab-picture-sum { animation: none; }
  .ab-page .ab-picture-piece { transition: none; }
  .ab-page .ab-picture-piece:hover { transform: none; }
}

/* ============================================================
   E · MEET THE FOUNDER
   Desktop: the opening was the quietest thing in the section —
   a small eyebrow and a plain headline beside a large photo.
   It now carries the page's one gradient treatment and its own
   rule, so the section opens instead of just starting.
   Phone: head, then picture, then copy. Grid areas place the
   picture back alongside on desktop, so the reading order and
   the tab order never disagree with what is on screen.
   ============================================================ */
.ab-page .ab-founder {
  grid-template-areas:
    'fig head'
    'fig copy';
  align-items: start;
  row-gap: clamp(16px, 1.8vw, 24px);
}
.ab-page .ab-founder-head { grid-area: head; align-self: end; }
.ab-page .ab-portrait--founder { grid-area: fig; align-self: center; }
.ab-page .ab-founder-copy { grid-area: copy; }

.ab-page .ab-eyebrow--founder {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: #a8ecff;
}
.ab-page .ab-eyebrow--founder::before {
  width: 42px;
  height: 2.5px;
  background: none;
  background-image: linear-gradient(90deg, #38cfff 0%, #6f7ee0 100%);
}
.ab-page .ab-founder-name {
  --ab-g1: #9fe6ff;
  --ab-g2: #9aa4ff;
  --ab-g3: #8ee8c4;
  font-size: clamp(2.4375rem, 3.85vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.ab-page .ab-founder-rule {
  display: block;
  width: min(100%, 15rem);
  height: 2px;
  margin-top: clamp(18px, 1.9vw, 24px);
  border-radius: 2px;
  background-image: linear-gradient(90deg,
    rgba(56, 207, 255, 0.95) 0%, rgba(111, 126, 224, 0.8) 52%, rgba(68, 181, 156, 0) 100%);
  transform-origin: left center;
}
.ab-page .ab-founder-head.revealed .ab-founder-rule,
.ab-page .revealed .ab-founder-rule {
  animation: abTraceX 1s var(--ab-ease) 0.4s 1 both;
}
/* the copy no longer opens the column, so it does not need the
   top margin that separated it from the headline */
.ab-page .ab-founder-copy .ab-body:first-of-type { margin-top: 0; }

@media (max-width: 900px) {
  .ab-page .ab-founder {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'fig'
      'copy';
    row-gap: clamp(24px, 5.4vw, 34px);
  }
  .ab-page .ab-portrait--founder { justify-self: center; }
}
@media (max-width: 760px) {
  /* the section intro centres; the reading does not */
  .ab-page .ab-founder-head { text-align: center; }
  .ab-page .ab-founder-head .ab-eyebrow { justify-content: center; }
  .ab-page .ab-founder-rule { margin-inline: auto; }
  .ab-page .ab-founder-copy { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-founder-head.revealed .ab-founder-rule,
  .ab-page .revealed .ab-founder-rule { animation: none; transform: none; opacity: 1; }
}

/* ------------------------------------------------------------
   F · THE ONE HEADING THAT DISAGREED
   Every section heading on a phone resolved to ~39px and centred.
   Education First came out at 32px and left-aligned, under a
   centred eyebrow — which read as a mistake rather than as a
   different treatment. It now matches its neighbours.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .ab-page .ab-creed-h {
    font-size: var(--ab-h2);
    line-height: 1.08;
    text-align: center;
  }
}
/* ============================================================
   PASS 3 — THE FOUNDER STORY: SEQUENCE, HIERARCHY, ARTIFACTS
   ============================================================ */

/* ------------------------------------------------------------
   A1 · THE LAYOUT, AND THE OVERLAP FIX
   The two documents used to sit in one aside that was sticky at
   EVERY width: the sticky declaration carried no media query and
   was written in a later partial than the `position: static`
   override, so at equal specificity source order won and the
   phone rule was dead. The aside stuck under the nav while the
   beats scrolled through it.
   There is no aside and no sticky now. Each document is a flat
   sibling placed inside the narrative at the point it belongs
   to, so it contributes its real height to the flow on every
   width. Desktop pairs each document with its own chapter using
   grid placement, not source order.
   ------------------------------------------------------------ */
.ab-page .ab-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(30px, 6vw, 46px);
  margin-top: clamp(34px, 4vw, 60px);
}
@media (min-width: 901px) {
  .ab-page .ab-story {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: clamp(38px, 4.4vw, 72px);
    row-gap: clamp(52px, 5.2vw, 82px);
    align-items: start;
  }
  /* rows are assigned explicitly. Column-only placement left this
     broken: sparse auto-placement never moves the cursor backwards,
     so the credit beats landed in row 2 instead of beside their own
     document and the grid opened a hole at top-left. */
  .ab-page .ab-beats--credit { grid-column: 1; grid-row: 1; }
  .ab-page .ab-doc--note     { grid-column: 2; grid-row: 1; }
  .ab-page .ab-beats--tax    { grid-column: 1; grid-row: 2; }
  .ab-page .ab-doc--tax      { grid-column: 2; grid-row: 2; }
  /* the closing beat concludes both chapters, so it runs the full
     measure rather than sitting in one column */
  .ab-page .ab-beats--close {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: 48rem;
  }
}

/* ------------------------------------------------------------
   A2 · THE BEAT TITLES BECOME STORY ANCHORS
   They were 11px uppercase in the muted body colour, lighter
   than the paragraphs beneath them. They are now the second
   largest type in the section.
   ------------------------------------------------------------ */
.ab-page .ab-beat-h {
  margin: 0 0 clamp(9px, 1vw, 12px);
  font-family: var(--font-serif);
  font-size: clamp(1.3125rem, 1.72vw, 1.6875rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.014em;
  text-transform: none;
  color: var(--white);
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-beat-h {
    background-image: linear-gradient(98deg, var(--bh1, #7fe0ff), var(--bh2, #46d5c4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ab-page .ab-beat-h[data-tone='cyan']  { --bh1: #8ae6ff; --bh2: #4ec3ea; }
.ab-page .ab-beat-h[data-tone='blue']  { --bh1: #a6d8ff; --bh2: #8795ff; }
.ab-page .ab-beat-h[data-tone='teal']  { --bh1: #74e4d2; --bh2: #44c9a6; }
.ab-page .ab-beat-h[data-tone='green'] { --bh1: #86e4ab; --bh2: #b6e85e; }
.ab-page .ab-beat-h[data-tone='lime']  { --bh1: #d3f066; --bh2: #74e4d2; }

/* the marker grows with the titles it now sits beside */
.ab-page .ab-beat::before {
  width: 34px;
  height: 34px;
  top: 0;
  font-size: 0.75rem;
}
.ab-page .ab-beat { padding-left: 50px; }
.ab-page .ab-beat:not(:last-child)::after { left: 16.5px; top: 42px; }
.ab-page .ab-beat + .ab-beat { margin-top: clamp(26px, 2.8vw, 38px); }

/* ------------------------------------------------------------
   A3 · THE DOCUMENTS — MODERN, NOT VINTAGE
   Cool white stock, charcoal type, sans-serif form labels, crisp
   rules and a cool shadow. No cream paper, no typewriter faces,
   no rotation, no highlighter. Both documents get identical
   paper, scale and depth so neither chapter outranks the other.
   ------------------------------------------------------------ */
.ab-page .ab-doc { margin: 0; }
.ab-page .ab-doc-paper {
  position: relative;
  padding: clamp(17px, 1.8vw, 23px) clamp(17px, 1.8vw, 23px) clamp(14px, 1.5vw, 19px);
  border-radius: 10px;
  color: #131c2b;
  background-color: #fbfdff;
  background-image: linear-gradient(177deg, #ffffff 0%, #eef3fa 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(12, 24, 45, 0.28),
    0 34px 56px -34px rgba(4, 12, 30, 0.92);
}
.ab-page .ab-doc-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(19, 28, 43, 0.13);
}

.ab-page .ab-doc-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid #131c2b;
}
.ab-page .ab-doc-title {
  font-family: var(--font);
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  font-weight: 800;
  letter-spacing: -0.006em;
  color: #0f1726;
}
.ab-page .ab-doc-tag {
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5d6c86;
}

/* shared field pattern */
.ab-page .ab-doc-k {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7a92;
}
.ab-page .ab-doc-v {
  display: block;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: #121b29;
  font-variant-numeric: tabular-nums;
}
.ab-page .ab-doc-v--mask { color: #8894a8; letter-spacing: 0.04em; }
.ab-page .ab-doc-v--ok { color: #0c7d49; }
.ab-page .ab-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 13px;
}

/* ---- the rate, the one supported figure ---- */
.ab-page .ab-apr {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 11px 14px 12px 16px;
  border-radius: 7px;
  background-image: linear-gradient(100deg, rgba(11, 126, 184, 0.12), rgba(11, 126, 184, 0.04));
  box-shadow: inset 0 0 0 1px rgba(11, 126, 184, 0.24);
}
.ab-page .ab-apr::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background-image: linear-gradient(180deg, #16a7dd 0%, #0b6ea8 100%);
}
.ab-page .ab-apr-k {
  display: block;
  font-family: var(--font);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2d4055;
}
.ab-page .ab-apr-n {
  display: block;
  margin: 1px 0 1px -2px;
  font-family: var(--font);
  font-size: clamp(2.375rem, 4.1vw, 3.125rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #0d1726;
  font-variant-numeric: tabular-nums;
}
.ab-page .ab-apr-n i { font-style: normal; font-size: 0.46em; font-weight: 700; }
.ab-page .ab-apr-d {
  display: block;
  font-family: var(--font);
  font-size: 0.625rem;
  line-height: 1.35;
  color: #55657e;
}

.ab-page .ab-tila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 11px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(19, 28, 43, 0.16);
}
.ab-page .ab-tila-cell {
  padding: 8px 9px 10px;
  box-shadow: inset -1px 0 0 rgba(19, 28, 43, 0.11);
}
.ab-page .ab-tila-cell:last-child { box-shadow: none; }
.ab-page .ab-tila-k {
  display: block;
  font-family: var(--font);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #5d6c86;
}
.ab-page .ab-redact {
  display: block;
  margin-top: 6px;
  height: 10px;
  border-radius: 3px;
  background-image: repeating-linear-gradient(135deg,
    rgba(19, 28, 43, 0.26) 0 5px, rgba(19, 28, 43, 0.13) 5px 10px);
}
.ab-page .ab-doc-fine {
  margin: 10px 0 0;
  font-family: var(--font);
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
  color: #74819a;
}
.ab-page .ab-doc-disc {
  margin: 7px 0 0;
  font-family: var(--font);
  font-size: 0.5rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #8e9aad;
}

/* ---- the return ---- */
.ab-page .ab-1040-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 2px solid #131c2b;
}
.ab-page .ab-1040-f {
  display: block;
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5d6c86;
}
.ab-page .ab-1040-f b {
  display: block;
  margin-top: -3px;
  font-size: 2.35em;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0f1726;
}
.ab-page .ab-1040-dept {
  display: block;
  margin-top: 1px;
  font-family: var(--font);
  font-size: 0.4375rem;
  letter-spacing: 0.01em;
  color: #76839a;
}
.ab-page .ab-1040-name {
  font-family: var(--font);
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
  font-weight: 700;
  line-height: 1.2;
  color: #1a2434;
}
.ab-page .ab-1040-yr {
  padding: 2px 9px 3px;
  border: 1.5px solid #131c2b;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f1726;
  font-variant-numeric: tabular-nums;
}
.ab-page .ab-1040-status {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(19, 28, 43, 0.14);
}
.ab-page .ab-1040-status .ab-doc-k { margin-bottom: 0; }
.ab-page .ab-1040-opts {
  display: flex;
  align-items: center;
  gap: 5px 13px;
  flex-wrap: wrap;
  font-family: var(--font);
  font-size: 0.625rem;
  color: #3e4b62;
}
.ab-page .ab-1040-box {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: -7px;
  border: 1.2px solid #56637c;
  border-radius: 2px;
}
.ab-page .ab-1040-id {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
  overflow: hidden;
  margin: 11px 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(19, 28, 43, 0.16);
}
.ab-page .ab-1040-id .ab-doc-f {
  display: block;
  padding: 7px 9px 8px;
  box-shadow: inset -1px 0 0 rgba(19, 28, 43, 0.11);
}
.ab-page .ab-1040-id .ab-doc-f:last-child { box-shadow: none; }
.ab-page .ab-1040-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-page .ab-1040-lines li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 9px;
  padding: 6px 3px 7px 4px;
  border-bottom: 1px solid rgba(19, 28, 43, 0.13);
}
.ab-page .ab-1040-lines li:last-child { border-bottom: 0; }
.ab-page .ab-1040-no {
  font-family: var(--font);
  font-size: 0.625rem;
  font-weight: 800;
  color: #1a2434;
  font-variant-numeric: tabular-nums;
}
.ab-page .ab-1040-l {
  font-family: var(--font);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #36435a;
}
.ab-page .ab-1040-lines .ab-redact { margin-top: 0; }

.ab-page .ab-doc-cap {
  margin-top: clamp(12px, 1.3vw, 16px);
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ab-ink-2);
  text-wrap: pretty;
}
.ab-page .ab-doc-cap b { color: var(--white); font-weight: 700; }

/* ---- phone ---- */
@media (max-width: 560px) {
  /* the masthead's three columns squeezed the return title into a
     four-line sliver; mark and year share a row, title sits under */
  .ab-page .ab-1040-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 7px;
  }
  .ab-page .ab-1040-name { grid-column: 1 / -1; order: 3; }
  .ab-page .ab-tila { grid-template-columns: minmax(0, 1fr); }
  .ab-page .ab-tila-cell { box-shadow: inset 0 -1px 0 rgba(19, 28, 43, 0.11); }
  .ab-page .ab-tila-cell:last-child { box-shadow: none; }
  .ab-page .ab-1040-id { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-page .ab-1040-id .ab-doc-f:nth-child(2) { box-shadow: none; }
  .ab-page .ab-1040-id .ab-doc-f:last-child {
    grid-column: 1 / -1;
    box-shadow: inset 0 1px 0 rgba(19, 28, 43, 0.11);
  }
  .ab-page .ab-1040-lines li { grid-template-columns: 24px minmax(0, 1fr) 62px; }
  .ab-page .ab-beat { padding-left: 44px; }
  .ab-page .ab-beat::before { width: 30px; height: 30px; }
  .ab-page .ab-beat:not(:last-child)::after { left: 14.5px; top: 38px; }
}

/* ============================================================
   B · HERO — WITHOUT THE EYEBROW
   The label is gone and nothing replaces it: the visitor already
   clicked About. Removing it reclaimed ~38px, so the top padding
   grows by the same amount rather than letting the headline
   drift up toward the fixed nav, and the headline-to-lede gap
   opens slightly so the composition reads as rebalanced instead
   of merely shortened.
   ============================================================ */
.ab-page .ab-sec--hero { padding-top: clamp(160px, 15vw, 226px); }
/* the columns are top-aligned now. Centred, the taller picture pushed
   the headline 48px below the top of the photograph, so the two things
   that open the page started at different heights for no reason. */
.ab-page .ab-hero { align-items: start; }
.ab-page .ab-hero-copy .ab-h1 { margin-top: 0; }
.ab-page .ab-hero .ab-lede { margin-top: clamp(26px, 2.5vw, 36px); }

/* ---- the caption now carries the argument ---- */
.ab-page .ab-hero-fig-cap { gap: 7px; }
.ab-page .ab-hero-fig-k {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #a8ecff;
}
.ab-page .ab-hero-fig-t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 1.45vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.ab-page .ab-hero-fig-t b { font-weight: 500; }
.ab-page .ab-hero-fig-t b[data-tone='cyan'] { color: #8ae6ff; }
.ab-page .ab-hero-fig-t b[data-tone='teal'] { color: #74e4d2; }
.ab-page .ab-hero-fig-t b[data-tone='lime'] { color: #cdee5a; }
.ab-page .ab-hero-fig-d {
  margin-top: 3px;
  font-size: 0.75rem;
  line-height: 1.52;
  color: var(--ab-ink-3);
}

@media (max-width: 760px) {
  .ab-page .ab-sec--hero { padding-top: clamp(146px, 30vw, 182px); }
}

/* ============================================================
   C · THE CONNECTED PICTURE + THE PHILOSOPHY STEPS
   ============================================================ */

/* ---- the six areas read as labels, not captions ---- */
.ab-page .ab-picture-piece b {
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  font-weight: 800;
  letter-spacing: 0.085em;
  color: rgb(var(--ab-pc, 56, 207, 255));
}
.ab-page .ab-picture-piece::before {
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  bottom: -5px;
}
.ab-page .ab-picture-piece:hover b { color: var(--white); }

/* the resolution reads as the conclusion of the circuit */
.ab-page .ab-picture-sum {
  font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  font-weight: 800;
  letter-spacing: 0.13em;
}

/* ---- the five steps: titles must dominate their descriptions ---- */
.ab-page .ab-route-h {
  margin: 0 0 9px;
  font-size: clamp(1.375rem, 1.85vw, 1.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--white);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-route-h {
    background-image: linear-gradient(98deg, var(--rh1, #8ae6ff), var(--rh2, #46d5c4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ab-page .ab-route-h[data-tone='cyan']  { --rh1: #8ae6ff; --rh2: #4ec3ea; }
.ab-page .ab-route-h[data-tone='teal']  { --rh1: #74e4d2; --rh2: #44c9a6; }
.ab-page .ab-route-h[data-tone='lime']  { --rh1: #d3f066; --rh2: #93dd72; }
.ab-page .ab-route-h[data-tone='blue']  { --rh1: #a6d8ff; --rh2: #8795ff; }
.ab-page .ab-route-h[data-tone='green'] { --rh1: #86e4ab; --rh2: #cdee5a; }
.ab-page .ab-route-stop p { color: var(--ab-ink-3); }

/* the turn broke mid-clause ("They're pieces of / the same one"); the
   two sentences are now two deliberate lines */
.ab-page .ab-lesson-turn span,
.ab-page .ab-lesson-turn em { display: block; }

/* ============================================================
   D · EDUCATION FIRST, AND THE FOUNDER
   ============================================================ */

/* ---- the headline becomes one of the loudest on the page ---- */
.ab-page .ab-creed-h {
  --ab-g1: #d3f066;
  --ab-g2: #5fdcc0;
  --ab-g3: #8ae6ff;
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}

/* ---- the quote is punctuated as a quote ---- */
.ab-page .ab-q {
  color: var(--ab-lime);
  font-size: 1.1em;
  line-height: 0;
}
.ab-page .ab-quote-name {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--white);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-quote-name {
    background-image: linear-gradient(98deg, #8ae6ff 0%, #74e4d2 54%, #d3f066 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ab-page .ab-quote-role {
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--ab-ink-3);
}

/* ---- the belief statement, named and anchored ---- */
.ab-page .ab-means {
  position: relative;
  margin-top: clamp(30px, 3.2vw, 44px);
  padding: clamp(16px, 1.8vw, 22px) 0 clamp(14px, 1.5vw, 18px) clamp(20px, 2.2vw, 28px);
  background-image: linear-gradient(100deg,
    rgba(175, 221, 44, 0.055), rgba(56, 207, 255, 0.02) 58%, rgba(0, 0, 0, 0) 90%);
}
/* a thin illuminated rail, not a card */
.ab-page .ab-means::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, #d3f066 0%, #5fdcc0 52%, rgba(56, 207, 255, 0) 100%);
  transform-origin: top center;
}
.ab-page .ab-creed.revealed .ab-means::before,
.ab-page .revealed .ab-means::before {
  animation: abTraceY 1s var(--ab-ease) 0.5s 1 both;
}
.ab-page .ab-means-k {
  margin: 0 0 9px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-lime);
}
.ab-page .ab-means .ab-creed-note { margin: 0; }

/* ---- Meet the Founder: brighter, bigger ---- */
.ab-page .ab-eyebrow--founder { font-size: 0.875rem; letter-spacing: 0.21em; }
.ab-page .ab-founder-name {
  --ab-g1: #8ae6ff;
  --ab-g2: #5fb8ff;
  --ab-g3: #9ae86e;
  font-size: clamp(2.625rem, 4.2vw, 3.875rem);
  letter-spacing: -0.026em;
}

/* ---- the founder callout as a bound principle ---- */
.ab-page .ab-founder-creed {
  position: relative;
  isolation: isolate;
  border-radius: 3px 14px 14px 3px;
  background-image:
    linear-gradient(90deg, rgba(56, 207, 255, 0) 0 3px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(108deg, rgba(56, 207, 255, 0.1), rgba(68, 181, 156, 0.05) 58%, rgba(175, 221, 44, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(226, 240, 255, 0.07),
    0 24px 44px -30px rgba(2, 8, 20, 0.95);
}
/* the bound edge */
.ab-page .ab-founder-creed::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(180deg, #38cfff 0%, #44b59c 56%, #afdd2c 100%);
}
/* a layered backing sheet, offset, for depth without a second card */
.ab-page .ab-founder-creed::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 9px -9px -9px 11px;
  border-radius: 3px 14px 14px 3px;
  background-image: linear-gradient(108deg, rgba(56, 207, 255, 0.05), rgba(175, 221, 44, 0.03));
  box-shadow: inset 0 0 0 1px rgba(150, 190, 235, 0.1);
}
/* one border trace, once, on reveal */
.ab-page .ab-creed-trace {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
  border-radius: 2px;
  background-image: linear-gradient(90deg,
    rgba(56, 207, 255, 0.85) 0%, rgba(175, 221, 44, 0.5) 62%, rgba(175, 221, 44, 0) 100%);
  transform-origin: left center;
}
.ab-page .ab-founder-copy.revealed .ab-creed-trace,
.ab-page .revealed .ab-creed-trace {
  animation: abTraceX 1.1s var(--ab-ease) 0.55s 1 both;
}
.ab-page .ab-brandword {
  font-weight: 700;
  color: var(--white);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-brandword {
    background-image: linear-gradient(98deg, #8ae6ff 0%, #5fdcc0 50%, #d3f066 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-page .ab-creed.revealed .ab-means::before,
  .ab-page .revealed .ab-means::before,
  .ab-page .ab-founder-copy.revealed .ab-creed-trace,
  .ab-page .revealed .ab-creed-trace {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* ============================================================
   E · WHAT WE STAND FOR, AND THE CLOSING
   ============================================================ */

/* ---- the six standards: titles must outrank their definitions ---- */
.ab-page .ab-stand-t {
  font-size: clamp(1.375rem, 1.8vw, 1.6875rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--white);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-stand-t {
    background-image: linear-gradient(98deg, var(--sh1, #8ae6ff), var(--sh2, #44c9a6));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ab-page .ab-stand-t[data-tone='edu'] { --sh1: #8ae6ff; --sh2: #52d6bb; }
.ab-page .ab-stand-t[data-tone='int'] { --sh1: #a6d8ff; --sh2: #5fc9f0; }
.ab-page .ab-stand-t[data-tone='cla'] { --sh1: #74e4d2; --sh2: #9ff0e4; }
.ab-page .ab-stand-t[data-tone='str'] { --sh1: #9aa4ff; --sh2: #6fd8ff; }
.ab-page .ab-stand-t[data-tone='acc'] { --sh1: #86e4ab; --sh2: #d3f066; }
.ab-page .ab-stand-t[data-tone='com'] { --sh1: #8ae6ff; --sh2: #d3f066; }
/* the accent tick keeps the term's own colour */
.ab-page .ab-stand-t::after { width: 34px; margin-top: 11px; }
.ab-page .ab-stand dd { color: var(--ab-ink-3); }

/* ---- the divider becomes a reveal, drawn once ---- */
.ab-page .ab-stand-row { border-top: 0; }
.ab-page .ab-stand-row::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  transform-origin: left center;
  background-image: linear-gradient(90deg,
    rgba(var(--ab-st, 68, 181, 156), 0.6) 0%, rgba(150, 190, 235, 0.16) 34%, rgba(150, 190, 235, 0.16) 100%);
}
/* the first row of each column opens the list and has no divider */
.ab-page .ab-stand-row:nth-child(1)::before,
.ab-page .ab-stand-row:nth-child(2)::before { content: none; }
.ab-page .ab-stand.revealed .ab-stand-row::before {
  animation: abTraceX 0.85s var(--ab-ease) both;
}
.ab-page .ab-stand.revealed .ab-stand-row:nth-child(3)::before { animation-delay: 0.20s; }
.ab-page .ab-stand.revealed .ab-stand-row:nth-child(4)::before { animation-delay: 0.30s; }
.ab-page .ab-stand.revealed .ab-stand-row:nth-child(5)::before { animation-delay: 0.40s; }
.ab-page .ab-stand.revealed .ab-stand-row:nth-child(6)::before { animation-delay: 0.50s; }
.ab-page .ab-stand-row { transition: filter 0.4s ease; }
.ab-page .ab-stand-row:hover { filter: brightness(1.12); }

@media (max-width: 900px) {
  /* stacked, so row two does get a divider again */
  .ab-page .ab-stand-row:nth-child(2)::before {
    content: '';
    animation: abTraceX 0.85s var(--ab-ease) 0.14s both;
  }
}

/* ---- the closing signature ---- */
.ab-page .ab-close .ab-eyebrow { font-size: 0.875rem; letter-spacing: 0.21em; }
.ab-page .ab-triad {
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  gap: clamp(3px, 0.5vw, 8px);
}
.ab-page .ab-triad-l { color: var(--white); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ab-page .ab-triad-l {
    background-image:
      linear-gradient(100deg, rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 8%, rgba(255, 255, 255, 0) 16%),
      linear-gradient(100deg, var(--tr1), var(--tr2));
    background-size: 240% 100%, 100% 100%;
    background-position: 180% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* one sweep, stepped across the three lines so it reads as a single
     gesture rather than three separate animations */
  .ab-page .ab-close.revealed .ab-triad-l {
    animation: abSheen 1.5s var(--ab-ease-soft) 1 both;
  }
  .ab-page .ab-close.revealed .ab-triad-l:nth-child(1) { animation-delay: 0.30s; }
  .ab-page .ab-close.revealed .ab-triad-l:nth-child(2) { animation-delay: 0.42s; }
  .ab-page .ab-close.revealed .ab-triad-l:nth-child(3) { animation-delay: 0.54s; }
}
.ab-page .ab-triad-l[data-tone='cyan'] { --tr1: #8ae6ff; --tr2: #5fdcc0; }
.ab-page .ab-triad-l[data-tone='teal'] { --tr1: #ffffff; --tr2: #bcd8ff; }
.ab-page .ab-triad-l[data-tone='lime'] { --tr1: #b9ec5e; --tr2: #6fe0a6; }

/* ---- the final action ---- */
.ab-page .ab-cta--quiet {
  padding: 17px 27px 17px 29px;
  color: var(--white);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 56%),
    linear-gradient(108deg, rgba(56, 207, 255, 0.2) 0%, rgba(68, 181, 156, 0.14) 52%, rgba(175, 221, 44, 0.13) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(120, 200, 240, 0.4),
    inset 0 1px 0 rgba(226, 240, 255, 0.22),
    0 20px 38px -24px rgba(2, 8, 20, 0.95);
}
.ab-page .ab-cta--quiet:hover,
.ab-page .ab-cta--quiet:focus-visible {
  box-shadow:
    inset 0 0 0 1.5px rgba(175, 221, 44, 0.66),
    inset 0 1px 0 rgba(226, 240, 255, 0.3),
    0 26px 46px -24px rgba(2, 8, 20, 0.98),
    0 0 22px -8px rgba(120, 200, 240, 0.4);
}
.ab-page .ab-cta--quiet .ab-cta-sheen {
  background-image: linear-gradient(90deg,
    rgba(200, 240, 255, 0) 0%, rgba(200, 240, 255, 0.34) 50%, rgba(200, 240, 255, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* the completed state: every divider fully drawn, no sweep */
  .ab-page .ab-stand.revealed .ab-stand-row::before,
  .ab-page .ab-stand.revealed .ab-stand-row:nth-child(2)::before,
  .ab-page .ab-close.revealed .ab-triad-l {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .ab-page .ab-stand-row { transition: none; }
  .ab-page .ab-stand-row:hover { filter: none; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ab-page .ab-triad-l { background-position: -90% 0, 0 0; }
  }
}
/* ===== ABOUT PAGE REGION (end) ===== */


/* ============================================================
   CS-PORTAL - THE APPROVED FUNNEL CLIENT PORTAL + MONTHLY CREDIT ACTION PLAN
   ============================================================
   An EXACT transfer of the approved Credit & Financial Strategy funnel's
   "Inside the Program" demonstration into the static main site, replacing the
   former static .cs-ap action-plan illustration inside #what-you-receive.

   Source (read-only reference, unmodified):
     funnels/credit-strategy/src/components/sections/parts/ProgramPortalIllustration.astro
     funnels/credit-strategy/src/components/sections/parts/ProgramPlanSheet.astro
     funnels/credit-strategy/src/config/portal-demo.ts
     funnels/credit-strategy/src/components/sections/parts/ProgramIcons.ts

   The funnel authors these as Astro-SCOPED <style> blocks, so at build time
   Astro appends [data-astro-cid-*] to every selector. We port the SOURCE, so
   those attributes never existed and are simply absent. Four categories of
   change, and nothing else:
     1. no Astro scope attributes;
     2. :global(.motion) rules deleted - they were pre-reveal hidden states
        that only applied once the funnel's motion runtime set html.motion.
        This site has no such runtime, so deleting them is fail-safe: the
        component renders in its final visible state, which is exactly what
        the funnel itself does under reduced motion;
     3. :lang(es) rules dropped - this page is lang="en" with no i18n layer,
        so they could never match;
     4. @keyframes renamed with a cs- prefix, because keyframe names are
        global and this stylesheet is shared by ten pages.

   Everything else - every grid, overlap track, z-index, container query,
   breakpoint, shadow, gradient, border, type size and spacing value - is the
   funnel's, unchanged. The externally-consumed design tokens are re-declared
   scoped to the component root with their exact funnel values, so nothing
   on this site is touched and the subtree resolves identically.

   CASCADE NOTE: style.css carries a later high-specificity "CREDIT STRATEGY
   REFINEMENT" layer authored at body.cs-page weight. It targets .cs-* only.
   This block is .pg-* / .cs-portal, which that layer never names, so there is
   no competition - but for that reason nothing here may be renamed to .cs-*.
   ============================================================ */

/* ---- INTEGRATION ------------------------------------------------------
   The only rule here that is not the funnel's. The funnel renders its stage
   at a measured 1104px from 1280px up (and viewport-minus-gutter below), so
   the wrapper is capped at 1104px to reproduce that geometry inside
   .cs-product (which is 1180px). Every other width already matches the
   funnel within 6px, which crosses no container-query threshold.
   ---------------------------------------------------------------------- */
body.cs-page .cs-portal{
  max-width: 1104px;
  margin-inline: auto;
}

/* Measured from the funnel's own built output, the approved stage is
   min(1104px, 100vw - 96px) from 960px up, and 90vw below that. The main
   site's .cs-product already matches at 940px and below, but carries wider
   gutters in the 960-1250px band (up to 16px narrower), which is enough to
   re-wrap the dashboard and make the window ~19px taller than the approved
   render. Reproducing the funnel's own width in that band only, and centring
   it with symmetric margins that go negative when it is wider than
   .cs-product, restores the approved composition. The largest bleed is 8px a
   side at 1120px, against a 56px shell gutter, so nothing can overflow. */
@media (min-width: 960px) {
  body.cs-page .cs-portal{
    --pg-w: min(1104px, calc(100vw - 96px));
    width: var(--pg-w);
    max-width: none;
    margin-inline: calc((100% - var(--pg-w)) / 2);
  }
}

/* Same correction for the band below the tablet breakpoint. Measured, the
   approved stage is 100vw - 40px from 400px to 767px, where this site uses
   90vw - a divergence of up to 30px that re-resolves the sheet container and
   moves the composition by as much as 42px vertically. At 400px and below the
   two formulas coincide exactly (360px), and 768px already matches, so this
   rule is confined to the band that actually differs. Largest bleed is 18px a
   side at 760px, against a 38px shell gutter. */
@media (min-width: 400px) and (max-width: 767.98px) {
  body.cs-page .cs-portal{
    --pg-w: calc(100vw - 40px);
    width: var(--pg-w);
    max-width: none;
    margin-inline: calc((100% - var(--pg-w)) / 2);
  }
}

/* ---- BORROWED BASE TYPOGRAPHY ---------------------------------------
   The component also inherits a rule from the funnel base stylesheet
   (global.css:123) that belongs to neither scoped <style> block, so the
   extraction did not carry it. Without it the ported subtree line-breaks
   differently from the approved render - measured as a mismatch on
   .pg-score, .pg-score__value, .pg-score__delta, .pg-count__value,
   .pg-bal__amt, .pg-score__tick, .pg-count svg and .pg-bureaus i.
   :where() pins it to the funnel own (0,0,1) specificity, so every component
   rule still overrides it exactly as it does there, and confines it to the
   ported subtree. overflow-wrap matches the funnel body rule (global.css:111). */
:where(body.cs-page .cs-portal) p,
:where(body.cs-page .cs-portal) li,
:where(body.cs-page .cs-portal) dd,
:where(body.cs-page .cs-portal) dt,
:where(body.cs-page .cs-portal) summary,
:where(body.cs-page .cs-portal) figcaption { text-wrap: pretty; }

body.cs-page .cs-portal { overflow-wrap: break-word; }

/* ============================================================
   PORTED: ProgramPortalIllustration.astro  <style> (source lines 256-1121)
   Static-CSS transfer of the approved funnel component. Flat, browser-valid
   CSS. Only four categories of change vs. the source:
     1. Astro scope attributes ([data-astro-cid-*]) are not emitted - this is
        the SOURCE, so they never existed here.
     2. :global(.motion) rules deleted (see note at the MOTION section).
     3. :lang(es) rules dropped (destination page is lang="en").
     4. @keyframes prefixed 'cs-' (the destination stylesheet is shared).
   Rule order, indentation and comments are otherwise byte-identical to the
   source so an implementer can diff the two.
   ============================================================ */

/* ------------------------------------------------------------
   EXTERNALLY-CONSUMED TOKENS
   These custom properties are defined in the funnel's
   src/styles/tokens.css (:root) and do not exist on the main site.
   Re-declared here with their EXACT funnel values, scoped to the component
   root (.pg-stage is the <figure> that wraps everything), so the whole
   subtree resolves identically and no main-site token is touched.
   Resolved from tokens.css:
     --font-sans    (line 40)   --ease-out  (line 78)
     --color-ink    (line 83)   --color-sky (line 84)
     --ink-on-tone  (line 127)  --ease-in-out (line 160)
     --dur-1        (line 162)
   None of these chain to a second-tier token - every value is literal.
   Tokens the component defines itself (--inset, --protrude, --pg-up,
   --under, --peek-x, --peek-y, --dpanel-r, --paper-r, --r) and tokens set
   inline from the markup (--v, --util, --target, --w) are deliberately
   NOT re-declared here.
   ------------------------------------------------------------ */
body.cs-page .cs-portal .pg-stage{
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.18s;
  --color-ink: #eaf3ff;
  --color-sky: #38cfff;
  --ink-on-tone: #06121c;
}

  /* ============================================================
     STAGE GRID (phones first)
     Columns: inset | sheet | inset. Rows: header | dashboard | sheet inside
     the window (1fr: sized by the sheet) | sheet pulled past the window.
     The sheet sits a clear 24px inside both window walls, under the
     dashboard (never over its text), and leaves the window through its
     bottom edge.
     ============================================================ */
  body.cs-page .cs-portal .pg-stage{
    --inset: 24px;
    --protrude: 112px;
    /* The monthly change's green (on the dark tiles). */
    --pg-up: #4fdc87;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: var(--inset) minmax(0, 1fr) var(--inset);
    grid-template-rows: max-content max-content 1fr var(--protrude);
    margin: 0;
    font-family: var(--font-sans);
    /* Lets the header keep its text clear of the sheet (cqi = stage width). */
    container-type: inline-size;
  }
  /* One focal light behind the workspace (soft, no edges). */
  body.cs-page .cs-portal .pg-stage::before{
    content: '';
    position: absolute;
    z-index: -2;
    inset: 12% -10% -4%;
    background: radial-gradient(closest-side, rgba(56, 120, 255, 0.2), rgba(2, 193, 255, 0.06) 60%, transparent);
    pointer-events: none;
  }

  body.cs-page .cs-portal .pg-back{ display: none; }

  /* ---------- The portal window ---------- */
  body.cs-page .cs-portal .pg-frame{
    --dpanel-r: 18px;
    grid-column: 1 / -1;
    grid-row: 1 / 4;
    z-index: 1;
    /* Slightly deeper face than the shared panel so the royal cap and the
       paper read as separate value planes. The single perimeter is lit from
       above and fades out along the bottom, so no bright segment shows
       beside the sheet where it leaves the window. */
    background:
      radial-gradient(90% 60% at 0% 0%, rgba(56, 207, 255, 0.1), transparent 62%) padding-box,
      linear-gradient(180deg, #102347 0%, #0a1830 100%) padding-box,
      linear-gradient(165deg, rgba(140, 230, 255, 0.9) 0%, rgba(93, 139, 255, 0.45) 34%, rgba(93, 139, 255, 0.16) 72%, rgba(93, 139, 255, 0.08) 100%) border-box;
  }

  body.cs-page .cs-portal .pg-head{
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 2;
    display: grid;
    /* Inside the frame's 1.5px perimeter. */
    margin: 1.5px 1.5px 0;
  }

  /* Header cap: saturated royal stock with a top gloss (the colour cap). */
  body.cs-page .cs-portal .pg-cap{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 16.5px 16.5px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%),
      linear-gradient(90deg, #1840d6 0%, #1232a8 55%, #10307c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(4, 12, 40, 0.35);
  }
  /* The TaxFunders shield on a small tile of bright paper (it needs a light
     ground: its green and blue would sink into the royal cap). */
  body.cs-page .cs-portal .pg-cap__mark{
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #e9f0fa 100%);
    box-shadow: 0 1px 0 #9fb3d9, 0 4px 10px -4px rgba(0, 0, 0, 0.6);
  }
  body.cs-page .cs-portal .pg-cap__mark img{ display: block; width: 22px; height: 22px; }
  body.cs-page .cs-portal .pg-cap__title{
    min-width: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.005em;
    text-shadow: 0 0 14px rgba(150, 210, 255, 0.35);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* The illustration note (approved copy): crisp, flat, never covered. */
  body.cs-page .cs-portal .pg-note{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(56, 207, 255, 0.1);
    box-shadow: inset 0 -1px 0 rgba(56, 207, 255, 0.22);
    color: var(--color-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  body.cs-page .cs-portal .pg-note span{ text-wrap: balance; }
  body.cs-page .cs-portal .pg-note__icon{
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 1.5px;
    color: var(--color-sky);
  }

  /* ============================================================
     THE DASHBOARD (inside the window)
     Value steps on the dark face (no rims): tiles are a lighter step with
     a top highlight. Its own size container (pgdash).
     ============================================================ */
  body.cs-page .cs-portal .pg-body{
    grid-column: 1 / -1;
    grid-row: 2;
    z-index: 2;
    margin-inline: 1.5px;
    padding: 14px 12px 0;
  }
  body.cs-page .cs-portal .pg-views{
    container: pgdash / inline-size;
    display: grid;
  }
  body.cs-page .cs-portal .pg-dash{
    display: grid;
    /* minmax(0, 1fr): no card's content may widen the dashboard. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Client header: name over the update line; the goal beside them
     (stacked below them in narrow windows). */
  body.cs-page .cs-portal .pg-client{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'name' 'update' 'goal';
    align-items: center;
    column-gap: 12px;
  }
  body.cs-page .cs-portal .pg-client__name{
    grid-area: name;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.25;
  }
  body.cs-page .cs-portal .pg-client__update{
    grid-area: update;
    margin-top: 2px;
    color: var(--color-sky);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
  }
  body.cs-page .cs-portal .pg-client__goal{
    grid-area: goal;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #a9bbdb;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  /* The goal chip: lime stock with dark ink (a label, not a control). */
  body.cs-page .cs-portal .pg-goal{
    padding: 4px 10px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%),
      #afdd2c;
    box-shadow: inset 0 -1px 0 rgba(63, 102, 8, 0.3);
    color: var(--ink-on-tone);
    font-size: 11.5px;
    font-weight: 700;
  }
  @container pgdash (min-width: 300px) {
    body.cs-page .cs-portal .pg-client{
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: 'name goal' 'update goal';
    }
    body.cs-page .cs-portal .pg-client__goal{
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
      margin-top: 0;
    }
  }

  /* Score cards: the 3 bureau cards in a row, + Utilization and
     Debt-to-income on a second row where the window allows (dashboards of
     300px and more: not on phones, nor at 768px, where the window is
     narrow and the plan sheet must stay the taller object). */
  body.cs-page .cs-portal .pg-scores{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  body.cs-page .cs-portal .pg-score{
    grid-column: span 2;
    display: grid;
    gap: 3px;
    padding: 8px 9px 9px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  body.cs-page .cs-portal .pg-score--ratio{ grid-column: span 3; }
  /* Phones: the compact row keeps the three bureau scores. */
  @media (max-width: 767.98px) {
    body.cs-page .cs-portal .pg-score--ratio{ display: none; }
  }
  @container pgdash (max-width: 299.98px) {
    body.cs-page .cs-portal .pg-score--ratio{ display: none; }
  }
  body.cs-page .cs-portal .pg-score__label{
    color: #a9bbdb;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
  }
  body.cs-page .cs-portal .pg-score__row{
    display: flex;
    align-items: center;
    gap: 6px;
  }
  body.cs-page .cs-portal .pg-score__value{
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  /* The up-trend tick beside a score (the change's green). */
  body.cs-page .cs-portal .pg-score__tick{
    flex-shrink: 0;
    width: 20px;
    height: 10px;
    color: var(--pg-up);
  }
  /* This month's change: green ink (>= 7:1 on the tile), the number bold.
     "this month" drops under the number in narrow cards. */
  body.cs-page .cs-portal .pg-score__delta{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    margin-top: 1px;
    color: var(--pg-up);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
  }
  body.cs-page .cs-portal .pg-score__delta b{ font-size: 12px; font-weight: 800; }
  body.cs-page .cs-portal .pg-score__delta span{ white-space: nowrap; }
  /* Ratio cards: a slim gauge of the value (no change line). */
  body.cs-page .cs-portal .pg-score__gauge{
    align-self: end;
    position: relative;
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background: rgba(159, 179, 217, 0.2);
  }
  body.cs-page .cs-portal .pg-score__gauge i{
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v);
    border-radius: inherit;
    background: linear-gradient(90deg, #5d8bff, #38cfff);
  }
  @container pgdash (min-width: 420px) {
    body.cs-page .cs-portal .pg-score{ gap: 4px; padding: 11px 12px 12px; }
    body.cs-page .cs-portal .pg-score__label{ font-size: 11.5px; }
    body.cs-page .cs-portal .pg-score__value{ font-size: 23px; }
    body.cs-page .cs-portal .pg-score__tick{ width: 22px; height: 11px; }
    /* The monthly change is the card's proof point: a step larger here. */
    body.cs-page .cs-portal .pg-score__delta{ margin-top: 2px; font-size: 12px; }
    body.cs-page .cs-portal .pg-score__delta b{ font-size: 14px; }
  }
  @container pgdash (min-width: 420px) {
    body.cs-page .cs-portal .pg-scores{ gap: 8px; }
  }
  /* The two ratio cards read as the row's secondary metrics: label and
     value on one line, the gauge under them (a shorter card). */
  body.cs-page .cs-portal .pg-score--ratio{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'label value' 'gauge gauge';
    align-items: center;
    column-gap: 10px;
  }
  body.cs-page .cs-portal .pg-score--ratio .pg-score__label{ grid-area: label; }
  body.cs-page .cs-portal .pg-score--ratio .pg-score__row{ grid-area: value; }
  body.cs-page .cs-portal .pg-score--ratio .pg-score__value{ font-size: 19px; }
  body.cs-page .cs-portal .pg-score--ratio .pg-score__gauge{ grid-area: gauge; margin-top: 7px; }

  /* Current Action Plan: a value-step panel with four count tiles. */
  body.cs-page .cs-portal .pg-plan{
    display: grid;
    gap: 9px;
    padding: 11px 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  body.cs-page .cs-portal .pg-plan__title{
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
  }
  body.cs-page .cs-portal .pg-counts{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  body.cs-page .cs-portal .pg-count{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    row-gap: 1px;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
  }
  body.cs-page .cs-portal .pg-count svg{ width: 13px; height: 13px; color: #9fb3d9; }
  body.cs-page .cs-portal .pg-count--active svg{ color: var(--color-sky); }
  body.cs-page .cs-portal .pg-count__value{
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
  }
  body.cs-page .cs-portal .pg-count__label{
    grid-column: 1 / -1;
    color: #a9bbdb;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
  }
  /* The in-progress tile takes the window's accent tint. */
  body.cs-page .cs-portal .pg-count--active{ background: rgba(56, 207, 255, 0.12); }
  @container pgdash (min-width: 300px) {
    body.cs-page .cs-portal .pg-counts{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    body.cs-page .cs-portal .pg-count{ padding: 7px 6px; }
  }
  @container pgdash (min-width: 420px) {
    body.cs-page .cs-portal .pg-plan{ padding: 13px 13px 14px; gap: 11px; }
    body.cs-page .cs-portal .pg-plan__title{ font-size: 13px; }
    body.cs-page .cs-portal .pg-counts{ gap: 6px; }
    body.cs-page .cs-portal .pg-count{ padding: 9px 10px; row-gap: 2px; }
    body.cs-page .cs-portal .pg-count svg{ width: 14px; height: 14px; }
    body.cs-page .cs-portal .pg-count__value{ font-size: 18px; }
    body.cs-page .cs-portal .pg-count__label{ font-size: 11.5px; }
    body.cs-page .cs-portal .pg-segs i{ height: 6px; }
  }

  /* Segmented share of the plan's completed actions (none yet). */
  body.cs-page .cs-portal .pg-segs{ display: flex; gap: 3px; }
  body.cs-page .cs-portal .pg-segs i{ flex: 1; height: 5px; border-radius: 2px; background: rgba(159, 179, 217, 0.2); }
  body.cs-page .cs-portal .pg-segs i.is-on{ background: linear-gradient(90deg, #38cfff, #5d8bff); }

  /* The strategist's note: the same value-step panel as the plan summary;
     the title row, the sender (photo, name, title), then the
     message in a sky-tinted bubble whose squared corner points at the
     avatar. */
  body.cs-page .cs-portal .pg-advisor{
    display: grid;
    gap: 9px;
    padding: 11px 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  /* The note's title: its own full-width row at the top, centred, one line
     (owner, 2026-10-13). On the narrowest dashboards (320px phones) the
     tracking tightens and the glyph steps aside so it still holds one line;
     it can only wrap (balanced) below that, never past the panel. */
  body.cs-page .cs-portal .pg-advisor__title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--color-sky);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
  }
  body.cs-page .cs-portal .pg-advisor__title svg{ width: 12px; height: 12px; flex-shrink: 0; }
  @container pgdash (max-width: 289.98px) {
    body.cs-page .cs-portal .pg-advisor__title{ letter-spacing: 0.035em; }
    body.cs-page .cs-portal .pg-advisor__title svg{ display: none; }
    /* DROPPED (rule 7): source line 677 - .pg-advisor__title:lang(es) { letter-spacing: 0.01em; } - destination page is lang="en". */
  }
  /* DROPPED (rule 7): source lines 679-680 - the Spanish comment and .pg-advisor__role:lang(es) { text-wrap: balance; }. */
  /* Sender block under the title: the photo beside the name and, under it,
     his formal title. */
  body.cs-page .cs-portal .pg-advisor__who{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  /* Steven's photo in the same 32/36px circle: a crop of the approved
     founder photo (nothing retouched) with a fine sky ring. */
  body.cs-page .cs-portal .pg-advisor__avatar{
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #c9ced6;
    box-shadow: 0 0 0 2px rgba(56, 207, 255, 0.45), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
  }
  body.cs-page .cs-portal .pg-advisor__avatar img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.cs-page .cs-portal .pg-advisor__id{ display: grid; gap: 2px; min-width: 0; }
  body.cs-page .cs-portal .pg-advisor__name{
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
  }
  body.cs-page .cs-portal .pg-advisor__role{
    color: #a9bbdb;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
  }
  body.cs-page .cs-portal .pg-advisor__msg{
    padding: 9px 11px 10px;
    border-radius: 4px 12px 12px 12px;
    background: rgba(56, 207, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(56, 207, 255, 0.16);
    color: #e3ecfa;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    text-wrap: pretty;
  }
  body.cs-page .cs-portal .pg-nobr{ white-space: nowrap; }
  @container pgdash (min-width: 420px) {
    body.cs-page .cs-portal .pg-advisor{ padding: 13px 13px 14px; gap: 10px; }
    body.cs-page .cs-portal .pg-advisor__avatar{ width: 36px; height: 36px; }
    body.cs-page .cs-portal .pg-advisor__role{ font-size: 11.5px; }
    body.cs-page .cs-portal .pg-advisor__name{ font-size: 13.5px; }
    body.cs-page .cs-portal .pg-advisor__msg{ padding: 10px 13px 11px; font-size: 13px; }
  }

  /* ---------- The sheet slot ----------
     The top margin leaves room for the sheet's EXAMPLE tab (26px) plus a
     clear gap under the dashboard. */
  body.cs-page .cs-portal .pg-sheet-slot{
    position: relative;
    grid-column: 2;
    grid-row: 3 / 5;
    z-index: 3;
    display: grid;
    /* The sheet keeps its own height (never stretched into blank paper). */
    align-content: start;
    margin-top: 40px;
  }
  body.cs-page .cs-portal .pg-pool{
    left: 2%;
    right: 2%;
    bottom: -34px;
    height: 84px;
    opacity: 0.9;
  }

  /* Phones from 345px stage width (390px screens and up): the cap has room
     for the top-bar labels beside the portal name. */
  /* Narrowest phones: a slimmer inset gives the sheet room. */
  @media (max-width: 359.98px) {
    body.cs-page .cs-portal .pg-stage{ --inset: 14px; }
    body.cs-page .cs-portal .pg-cap{ gap: 9px; padding-inline: 12px; }
    body.cs-page .cs-portal .pg-note{ padding-inline: 12px; }
  }

  /* ============================================================
     >= 768px: report top-left, window centre-left, sheet front-right.
     Columns: report peek | window only | window under sheet | sheet only.
     Rows: report/sheet above window | header | dashboard (1fr) | sheet below.
     ============================================================ */
  @media (min-width: 768px) {
    body.cs-page .cs-portal .pg-stage{
      --peek-x: 34px;
      --peek-y: 44px;
      --protrude: 40px;
      --under: 12cqi;
      grid-template-columns: var(--peek-x) minmax(0, 1fr) 12% 40%;
      /* The window takes its content's height; the sheet's extra height
         goes below it (at least --protrude), so no empty band ever opens
         at the bottom of the window. */
      grid-template-rows: var(--peek-y) max-content max-content minmax(var(--protrude), 1fr);
      padding-bottom: 8px;
    }
    body.cs-page .cs-portal .pg-stage::before{ inset: 4% 4% -6% 0; }

    /* Back: credit report paper, behind the window, peeking top and left. */
    body.cs-page .cs-portal .pg-back{
      display: block;
      grid-column: 1 / 3;
      grid-row: 1 / 4;
      z-index: 0;
      /* Rotation lifts the top-left corner outward: start inside the column. */
      margin-left: 10px;
      width: 70%;
      height: 80%;
    }
    body.cs-page .cs-portal .pg-back__sheet{
      --paper-r: 7px;
      --r: -1.6deg;
      height: 100%;
      padding: 12px 14px 0 12px;
      transform-origin: 100% 100%;
      overflow: hidden;
    }
    /* Back sheet: a value step dimmer than the plan in front. */
    body.cs-page .cs-portal .pg-back__sheet::after{
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(7, 14, 29, 0.14), rgba(7, 14, 29, 0.3));
      pointer-events: none;
    }
    body.cs-page .cs-portal .pg-back__head{
      display: flex;
      align-items: center;
      gap: 10px;
    }
    body.cs-page .cs-portal .pg-back__seal{
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 6px;
      background: #38cfff;
      color: var(--ink-on-tone);
    }
    body.cs-page .cs-portal .pg-back__seal svg{ width: 13px; height: 13px; }
    body.cs-page .cs-portal .pg-back__title{ flex: 1; gap: 6px; }
    body.cs-page .cs-portal .pg-back__body{ display: grid; gap: 12px; padding-top: 22px; }
    body.cs-page .cs-portal .pg-back__body .paper-lines{ gap: 8px; }
    body.cs-page .cs-portal .pg-back__body .paper-lines > i{ height: 5px; }
    /* Lines the plan responds to: a text line run over with a translucent
       cyan highlighter (no rail or edge, so the ends that show beside the
       window read as marked lines, not as tabs). */
    body.cs-page .cs-portal .pg-back__mark{ display: block; }
    body.cs-page .cs-portal .pg-back__mark > i{
      display: block;
      width: 86%;
      height: 12px;
      border-radius: 2px;
      background:
        linear-gradient(rgba(14, 29, 56, 0.3), rgba(14, 29, 56, 0.3)) 5px 50% / calc(100% - 24px) 5px no-repeat,
        rgba(56, 207, 255, 0.34);
    }

    body.cs-page .cs-portal .pg-frame{ grid-column: 2 / 4; grid-row: 2 / 4; }
    body.cs-page .cs-portal .pg-head{ grid-column: 2 / 4; grid-row: 2; }

    /* The window's right part (its 3rd column) lies under the sheet: keep
       the header and the illustration note clear of it. */
    body.cs-page .cs-portal .pg-cap,

    body.cs-page .cs-portal .pg-note{ padding-right: calc(var(--under) + 16px); }

    /* The dashboard fills the part of the window the sheet leaves visible,
       its right padding keeping every card clear of the sheet's edge. */
    body.cs-page .cs-portal .pg-body{
      grid-column: 2 / 3;
      grid-row: 3;
      margin-inline: 1.5px 0;
      padding: 16px 20px 18px 14px;
    }

    body.cs-page .cs-portal .pg-sheet-slot{
      grid-column: 3 / 5;
      grid-row: 1 / 5;
      margin-top: 14px;
    }
  }

  /* ---------- >= 1024px: wider window, the top-bar labels in the cap ---------- */
  @media (min-width: 1024px) {
    body.cs-page .cs-portal .pg-stage{
      --peek-x: 48px;
      --peek-y: 60px;
      --under: 12cqi;
      grid-template-columns: var(--peek-x) minmax(0, 1fr) 12% 35%;
    }
    body.cs-page .cs-portal .pg-body{ padding: 18px 24px 20px 18px; }
    body.cs-page .cs-portal .pg-dash{ gap: 13px; }
    body.cs-page .cs-portal .pg-client__name{ font-size: 19px; }
    body.cs-page .cs-portal .pg-client__update{ font-size: 13.5px; }
  }
  @media (min-width: 1280px) {
    body.cs-page .cs-portal .pg-cap{ min-height: 56px; padding-left: 18px; }
    body.cs-page .cs-portal .pg-note{ padding-inline: 18px; }
    body.cs-page .cs-portal .pg-body{ padding-left: 20px; }
  }

  /* ============================================================
     ONE-TIME MOTION: report settles, sheet slides out of the portal.
     ============================================================ */
  /* REMOVED (rule 3): source lines 898-911 - two @media (prefers-reduced-motion: no-preference)
     blocks whose every rule was qualified by :global(.motion) (6 occurrences, at source lines 899,
     900, 905, 908, 909, 910). :global() is not valid CSS, and the destination has no .motion
     runtime, so these could never match. Deleting is fail-safe: .pg-back and .pg-sheet-slot render
     in their final visible state - exactly what the funnel shows under reduced motion. */

  @media (forced-colors: active) {
    body.cs-page .cs-portal .pg-frame{ border: 1px solid CanvasText; }
    body.cs-page .cs-portal .pg-score,

    body.cs-page .cs-portal .pg-plan,

    body.cs-page .cs-portal .pg-advisor,

    body.cs-page .cs-portal .pg-advisor__msg{ border: 1px solid CanvasText; }
  }

  /* Spanish: "En progreso", "Sin empezar" and "Completadas" need wider tiles
     than the 4-up tally gives below a 350px dashboard (375-414px phones);
     there the tally keeps the 2x2 layout the narrowest phones use. */
  /* DROPPED (rule 7): source lines 924-927 - @container pgdash (min-width: 300px) and
     (max-width: 349.98px) containing only .pg-counts:lang(es) and .pg-count:lang(es)
     (source lines 925-926). The comment above is kept as authored. */

  /* ============================================================
     PORTAL TABS (owner 2026-10-12): Dashboard / My Progress switch the
     window between two views of the same fictional data. A recessed well
     on the royal cap; the selected tab is a lit paper key with dark ink,
     the other a quiet label. Phones and tablets: their own row under the
     portal name (44px touch height); 1024px and up: in the cap's right.
     ============================================================ */
  /* Owner 2026-10-13: more room between the portal name and the tabs, and
     tabs that read as clickable: the other view is a visible chip (edge,
     fill, bright label); the selected view is the lit key with a cyan glow
     that breathes while the portal is on screen. */
  body.cs-page .cs-portal .pg-cap{ flex-wrap: wrap; row-gap: 16px; }
  body.cs-page .cs-portal .pg-tabs{
    display: flex;
    flex-basis: 100%;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(4, 12, 40, 0.42);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  body.cs-page .cs-portal .pg-tab{
    position: relative;
    isolation: isolate;
    flex: 1 1 0;
    min-height: 38px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #c9d6ee;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.cs-page .cs-portal .pg-tab[aria-selected='false']{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 0 1px rgba(150, 210, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #eef4ff;
  }
  body.cs-page .cs-portal .pg-tab[aria-selected='true']{
    background: linear-gradient(180deg, #ffffff 0%, #e3ecfa 100%);
    color: #0e1d38;
    font-weight: 700;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 0 0 1px rgba(56, 207, 255, 0.75),
      0 1px 0 #9fb3d9,
      0 4px 10px -4px rgba(0, 0, 0, 0.65);
  }
  /* The selected tab's glow (outer light only; the layer is empty). */
  body.cs-page .cs-portal .pg-tab[aria-selected='true']::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 12px 2px rgba(2, 193, 255, 0.55), 0 0 22px 4px rgba(10, 45, 194, 0.4);
    opacity: 0.65;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    body.cs-page .cs-portal .pg-tabs.is-active .pg-tab[aria-selected='true']::after{ animation: cs-pg-tab-breathe 3.2s var(--ease-in-out) infinite alternate; }
  }
  @keyframes cs-pg-tab-breathe { from { opacity: 0.35; } to { opacity: 1; } }
  body.cs-page .cs-portal .pg-tab:focus-visible{ outline: 2px solid var(--color-sky); outline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) {
    body.cs-page .cs-portal .pg-tab[aria-selected='false']:hover{
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.09));
      box-shadow: inset 0 0 0 1px rgba(150, 210, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
      color: #ffffff;
    }
  }
  /* 1024px and up: the tabs sit in the cap's right, beside the portal name
     (they wrap under it only if the cap is ever too narrow). */
  @media (min-width: 1024px) {
    body.cs-page .cs-portal .pg-tabs{ flex-basis: auto; margin-left: auto; margin-right: 6px; }
    body.cs-page .cs-portal .pg-cap__title{ font-size: 18px; }
    body.cs-page .cs-portal .pg-tab{ flex: none; min-height: 32px; padding: 6px 14px; }
  }

  /* The two views share one grid cell, so the window keeps the dashboard's
     height and nothing moves when the view changes; the hidden view is out
     of reach (visibility). */
  body.cs-page .cs-portal .pg-view{ grid-area: 1 / 1; min-width: 0; }
  body.cs-page .cs-portal .pg-view:not(.is-active){ visibility: hidden; opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    body.cs-page .cs-portal .pg-view{ transition: opacity 0.24s var(--ease-out), visibility 0s linear 0.24s; }
    body.cs-page .cs-portal .pg-view.is-active{ transition: opacity 0.24s var(--ease-out), visibility 0s; }
    body.cs-page .cs-portal .pg-tab{ transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  }

  /* My Progress: the bureau scores with this month's change, the plan's
     completion, and each card's balance against its target. */
  body.cs-page .cs-portal .pg-prog{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
  }
  body.cs-page .cs-portal .pg-moves{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  body.cs-page .cs-portal .pg-move{
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  body.cs-page .cs-portal .pg-move__label{ color: #a9bbdb; font-size: 11px; font-weight: 600; line-height: 1.25; }
  body.cs-page .cs-portal .pg-move__value{ color: #ffffff; font-size: 18px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
  body.cs-page .cs-portal .pg-move__delta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    color: var(--pg-up);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
  }
  body.cs-page .cs-portal .pg-move__delta svg{ width: 16px; height: 8px; flex-shrink: 0; }
  body.cs-page .cs-portal .pg-move__delta span{ color: #a9bbdb; font-weight: 500; }
  @container pgdash (max-width: 299.98px) {
    body.cs-page .cs-portal .pg-moves{ grid-template-columns: minmax(0, 1fr); }
    body.cs-page .cs-portal .pg-move{ grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
    body.cs-page .cs-portal .pg-move__value{ grid-row: 1 / 3; grid-column: 2; align-self: center; }
  }
  body.cs-page .cs-portal .pg-bals{
    display: grid;
    gap: 11px;
    padding: 11px 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  body.cs-page .cs-portal .pg-bals__list{ list-style: none; display: grid; gap: 12px; }
  body.cs-page .cs-portal .pg-balrow{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 6px 10px;
  }
  body.cs-page .cs-portal .pg-balrow__acct{ min-width: 0; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1.3; }
  body.cs-page .cs-portal .pg-balrow__num{ color: #9fb3d9; font-weight: 600; white-space: nowrap; }
  body.cs-page .cs-portal .pg-balrow__track{
    position: relative;
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 3px;
    background: rgba(159, 179, 217, 0.22);
  }
  body.cs-page .cs-portal .pg-balrow__fill{
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--util);
    border-radius: 3px;
    background: linear-gradient(90deg, #f6c454, #ee9a3a);
  }
  body.cs-page .cs-portal .pg-balrow--over .pg-balrow__fill{ background: linear-gradient(90deg, #ff9b7a, #ff6b6b); }
  /* The target line: where this month's payment works toward. */
  body.cs-page .cs-portal .pg-balrow__mark{
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--target);
    width: 2px;
    border-radius: 1px;
    background: var(--pg-up);
    box-shadow: 0 0 0 2px rgba(10, 24, 48, 0.9);
  }
  body.cs-page .cs-portal .pg-balrow__figs{ color: #c9d6ee; font-size: 11.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
  body.cs-page .cs-portal .pg-balrow__figs b{ color: #ffffff; }
  body.cs-page .cs-portal .pg-balrow__util{ color: #f6c454; white-space: nowrap; }
  body.cs-page .cs-portal .pg-balrow--over .pg-balrow__util{ color: #ff9b7a; }
  body.cs-page .cs-portal .pg-balrow__target{ justify-self: end; color: var(--pg-up); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  body.cs-page .cs-portal .pg-balrow__target b{ color: #ffffff; }
  @container pgdash (min-width: 420px) {
    body.cs-page .cs-portal .pg-moves{ gap: 8px; }
    body.cs-page .cs-portal .pg-move{ padding: 11px 12px; }
    body.cs-page .cs-portal .pg-move__value{ font-size: 20px; }
    body.cs-page .cs-portal .pg-bals{ padding: 13px 13px 14px; }
    body.cs-page .cs-portal .pg-balrow__acct{ font-size: 12.5px; }
  }

/* ============================================================
   CREDIT STRATEGY PORTAL - PLAN SHEET (static port)
   ------------------------------------------------------------
   PART 1  Borrowed global utilities
           src/styles/global.css lines 988-1024, 1061-1083
   PART 2  The plan sheet's own CSS
           src/components/sections/parts/ProgramPlanSheet.astro
           <style> lines 112-643

   Port rules applied (and ONLY these categories of change):
     - Astro scope attributes ([data-astro-cid-*]) omitted: the SOURCE is
       being ported, so those build-time attributes do not exist.
     - :global(...) rules deleted (invalid CSS; pre-reveal hidden states that
       depend on an html.motion runtime the destination does not have).
       Each removal is marked with a comment and the original line numbers.
     - :lang(es) rules dropped (destination page is lang="en", no i18n layer).
       Each removal is marked with a comment and the original line numbers.
     - Externally defined custom properties re-declared ONCE, scoped to the
       component root (block below), values copied verbatim from
       src/styles/tokens.css. No main-site token is remapped or touched.
     - Borrowed global utilities qualified with the component root so the main
       site gains no bare global .paper / .pool / .dpanel rules. The class
       names themselves are unchanged, so the markup still matches.

   Verified in the sources: zero nesting syntax, zero "&", zero :is(,
   zero :where(, zero @layer, zero @keyframes, zero @supports.
   Nothing was reordered, reformatted or renamed.
   ============================================================ */


/* ------------------------------------------------------------
   EXTERNALLY CONSUMED TOKENS, re-declared at the component root.
   Values copied EXACTLY from src/styles/tokens.css. Scoped, so the main
   site is unaffected. Tokens the component defines itself (--paper-r,
   --lvl-ink, --lvl-a, --lvl-b, --lvl-dot), tokens set inline from markup
   (--util, --target, --r, --tx, --ty, --w) and tokens supplied by the
   ported [data-tone] block (--tone, --tone-rgb, --tone-deep, --tone-ink)
   are deliberately NOT here.
   ------------------------------------------------------------ */
body.cs-page .cs-portal .pg-stage,

body.cs-page .cs-portal .pg-doc,

body.cs-page .cs-portal .pg-sheet{
  /* Typography (tokens.css 999-1000) */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;

  /* Paper stock (tokens.css 1082-1085) */
  --paper-1: #ffffff;
  --paper-2: #f4f7fb;
  --paper-3: #e3eaf4;
  --paper-4: #dce5f1;

  /* Inks (tokens.css 1086-1089) */
  --ink-paper: #0e1d38;          /* text on light paper (15:1) */
  --ink-paper-muted: #4c5e7c;    /* secondary text on light paper (6.4:1) */
  --ink-paper-faint: rgba(14, 29, 56, 0.14); /* skeleton bars, rules */
  --ink-on-tone: #06121c;        /* text on saturated folder/tab stock */

  /* Paper face: a top sheen over cool white stock. (tokens.css 1091-1095)
     These chain to --paper-1 .. --paper-4 declared above. */
  --paper-face:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 22%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
  --paper-face-bright: linear-gradient(180deg, var(--paper-1) 0%, #eef3fa 55%, var(--paper-4) 100%);

  /* Paper body: hairline inner edge, 1px + 2px underside thickness edges,
     a contact shadow and a long downward cast shadow. (tokens.css 1098-1112) */
  --paper-shadow:
    inset 0 0 0 1px rgba(14, 29, 56, 0.06),
    inset 0 -2px 0 rgba(14, 29, 56, 0.06),
    0 1px 0 #c9d4e4,
    0 2px 0 #aebdd3,
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 30px 46px -22px rgba(0, 0, 0, 0.95);
  --paper-shadow-lift:
    inset 0 0 0 1px rgba(14, 29, 56, 0.06),
    inset 0 -2px 0 rgba(14, 29, 56, 0.06),
    0 1px 0 #c9d4e4,
    0 2px 0 #aebdd3,
    0 2px 5px rgba(0, 0, 0, 0.45),
    0 44px 60px -24px rgba(0, 0, 0, 0.95);

  /* Dark copy panel (tokens.css 1116-1123) */
  --panel-face: linear-gradient(180deg, #13284f 0%, #0b1a36 100%);
  --panel-rim: linear-gradient(135deg, rgba(140, 230, 255, 0.9), rgba(93, 139, 255, 0.35) 46%, rgba(175, 221, 44, 0.85));
  --panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 0 -1px rgba(4, 12, 32, 0.95),
    0 40px 70px -40px rgba(0, 0, 0, 0.95),
    0 0 80px -30px rgba(56, 207, 255, 0.45);
}


/* ============================================================
   PART 1 - BORROWED GLOBAL UTILITIES
   Copied from src/styles/global.css in source order, with every selector
   qualified by the component root (.pg-stage / .pg-doc) so nothing leaks
   into the main site. Class names are untouched.
   ============================================================ */

/* ============================================================
   PHYSICAL DOCUMENT SYSTEM (correction pass)
   Build every illustration from these. Rules: light opaque paper on dark;
   saturated folder/tab stock with a gloss and dark ink; thickness from
   DARK underside edges (never a light 1px rim all round); a contact shadow
   plus a long downward cast shadow landing on a tone light pool; stacked
   sheets opaque, offset 12-32px and rotated 1-3deg in ONE direction; one
   static lean per section at most (desktop), flattened on phones.
   Skeleton bars only on illustrative paper: never scores, figures, names.
   ============================================================ */

/* Tones: set data-tone on any element to colour folders/tabs/pools. */
:where(body.cs-page .cs-portal .pg-stage) [data-tone='cyan'],

:where(body.cs-page .cs-portal .pg-doc) [data-tone='cyan']{ --tone: #38cfff; --tone-rgb: 56, 207, 255;  --tone-deep: #0a86dd; --tone-ink: #055a96; }
:where(body.cs-page .cs-portal .pg-stage) [data-tone='royal'],

:where(body.cs-page .cs-portal .pg-doc) [data-tone='royal']{ --tone: #5d8bff; --tone-rgb: 93, 139, 255;  --tone-deep: #3d64e0; --tone-ink: #1d3fbf; }
:where(body.cs-page .cs-portal .pg-stage) [data-tone='teal'],

:where(body.cs-page .cs-portal .pg-doc) [data-tone='teal']{ --tone: #44b59c; --tone-rgb: 68, 181, 156;  --tone-deep: #2c9784; --tone-ink: #17665c; }
:where(body.cs-page .cs-portal .pg-stage) [data-tone='green'],

:where(body.cs-page .cs-portal .pg-doc) [data-tone='green']{ --tone: #7fd14a; --tone-rgb: 127, 209, 74;  --tone-deep: #57ab28; --tone-ink: #2f6e14; }
:where(body.cs-page .cs-portal .pg-stage) [data-tone='lime'],

:where(body.cs-page .cs-portal .pg-doc) [data-tone='lime']{ --tone: #afdd2c; --tone-rgb: 175, 221, 44;  --tone-deep: #8cbf1e; --tone-ink: #3f6608; }
:where(body.cs-page .cs-portal .pg-stage) [data-tone='slate'],

:where(body.cs-page .cs-portal .pg-doc) [data-tone='slate']{ --tone: #9fb3d9; --tone-rgb: 159, 179, 217; --tone-deep: #7d92bd; --tone-ink: #3e5076; }

/* A sheet of paper. --r rotates it; --paper-r sets its corner radius. */
:where(body.cs-page .cs-portal .pg-stage) .paper,

:where(body.cs-page .cs-portal .pg-doc) .paper{
  position: relative;
  border-radius: var(--paper-r, 6px);
  background: var(--paper-face);
  color: var(--ink-paper);
  box-shadow: var(--paper-shadow);
  transform: rotate(var(--r, 0deg)) translate(var(--tx, 0px), var(--ty, 0px));
}
:where(body.cs-page .cs-portal .pg-stage) .paper--bright,

:where(body.cs-page .cs-portal .pg-doc) .paper--bright{ background: var(--paper-face-bright); }
/* Ruled report paper. */
:where(body.cs-page .cs-portal .pg-stage) .paper--ruled,

:where(body.cs-page .cs-portal .pg-doc) .paper--ruled{
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(14, 29, 56, 0.07) 21px 22px),
    var(--paper-face);
}
/* Skeleton text on light paper (stand-ins only). */
:where(body.cs-page .cs-portal .pg-stage) .paper-lines,

:where(body.cs-page .cs-portal .pg-doc) .paper-lines{ display: grid; gap: 7px; }
:where(body.cs-page .cs-portal .pg-stage) .paper-lines > i,

:where(body.cs-page .cs-portal .pg-doc) .paper-lines > i{
  display: block;
  width: var(--w, 100%);
  height: 6px;
  border-radius: 3px;
  background: var(--ink-paper-faint);
}
:where(body.cs-page .cs-portal .pg-stage) .paper-lines > i.is-accent,

:where(body.cs-page .cs-portal .pg-doc) .paper-lines > i.is-accent{ background: rgba(var(--tone-rgb, 56, 207, 255), 0.75); }
:where(body.cs-page .cs-portal .pg-stage) .paper-lines > i.is-strong,

:where(body.cs-page .cs-portal .pg-doc) .paper-lines > i.is-strong{ background: rgba(14, 29, 56, 0.32); }
/* A heading rule printed on paper. */
:where(body.cs-page .cs-portal .pg-stage) .paper-rule,

:where(body.cs-page .cs-portal .pg-doc) .paper-rule{ height: 2px; border-radius: 1px; background: var(--tone-ink, #055a96); }

/* Dark copy panel: ONE gradient perimeter, underside plate, cast shadow,
   tone bloom. Use for text-bearing surfaces that must stay dark. */
:where(body.cs-page .cs-portal .pg-stage) .dpanel,

:where(body.cs-page .cs-portal .pg-doc) .dpanel{
  position: relative;
  border: 1.5px solid transparent;
  border-radius: var(--dpanel-r, 20px);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(56, 207, 255, 0.12), transparent 62%) padding-box,
    var(--panel-face) padding-box,
    var(--panel-rim) border-box;
  box-shadow: var(--panel-shadow);
}
/* Light pool on the "desk" under an object (place as a child, z-index -1). */
:where(body.cs-page .cs-portal .pg-stage) .pool,

:where(body.cs-page .cs-portal .pg-doc) .pool{
  position: absolute;
  z-index: -1;
  left: 6%;
  right: 6%;
  bottom: -12%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tone-rgb, 56, 207, 255), 0.32), transparent);
  filter: blur(6px);
  pointer-events: none;
}


/* ============================================================
   PART 2 - PLAN SHEET (ProgramPlanSheet.astro <style> lines 112-643)
   Original indentation and order preserved for diffing.
   ============================================================ */

  /* ---------- The document: EXAMPLE tab + sheet ---------- */
  body.cs-page .cs-portal .pg-doc{
    position: relative;
    display: grid;
  }

  /* The EXAMPLE index tab: lime stock with a gloss and dark ink, standing
     on the sheet's top edge at the right (where the sheet's printed cap ends
     in lime), so it reads as part of the paper, not as a control. */
  body.cs-page .cs-portal .pg-badge{
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    height: 26px;
    /* The trailing letter-space is taken off the right padding so the word
       sits optically centred. */
    padding: 1px calc(12px - 0.16em) 0 12px;
    border-radius: 8px 8px 0 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 72%),
      var(--tone);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 0 rgba(63, 102, 8, 0.25);
    color: var(--ink-on-tone);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    white-space: nowrap;
  }

  /* Desktop: the sheet is larger, so the tab grows with it. */
  @media (min-width: 1024px) {
    body.cs-page .cs-portal .pg-badge{
      right: 18px;
      height: 30px;
      padding-inline: 15px calc(15px - 0.16em);
      border-radius: 9px 9px 0 0;
      font-size: 12.5px;
    }
  }

  /* ---------- The sheet ---------- */
  body.cs-page .cs-portal .pg-sheet{
    --paper-r: 10px;
    container-type: inline-size;
    overflow: hidden;
    font-family: var(--font-sans);
    color: var(--ink-paper);
    /* Lifted paper: thickness edges + contact + long cast shadow. */
    box-shadow: var(--paper-shadow-lift);
  }
  /* Coloured cap printed along the top edge (royal -> sky -> lime). */
  body.cs-page .cs-portal .pg-sheet::before{
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #0a2dc2 0%, #38cfff 58%, #afdd2c 100%);
  }

  body.cs-page .cs-portal .pg-sheet__body{
    display: grid;
    padding: 20px 12px 12px;
  }

  /* ---------- Group header ---------- */
  body.cs-page .cs-portal .pg-sheet__head{
    display: flex;
    align-items: center;
    gap: 11px;
    padding-inline: 2px;
  }
  /* Seal cut from saturated cyan stock (gloss + dark ink), like a tab. */
  body.cs-page .cs-portal .pg-sheet__seal{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 62%),
      var(--tone);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 -2px 0 rgba(5, 90, 150, 0.35),
      0 6px 12px -6px rgba(5, 90, 150, 0.7);
    color: var(--ink-on-tone);
  }
  body.cs-page .cs-portal .pg-sheet__seal svg{ width: 19px; height: 19px; }

  body.cs-page .cs-portal .pg-sheet__titles{ min-width: 0; }
  body.cs-page .cs-portal .pg-sheet__kicker{
    color: #1d3fbf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  body.cs-page .cs-portal .pg-sheet__title{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 9px;
    margin-top: 2px;
    color: var(--ink-paper);
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.08;
  }
  /* Item count: a small royal-tinted token beside the group name. */
  body.cs-page .cs-portal .pg-sheet__count{
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e3eafc;
    color: #1d3fbf;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }
  body.cs-page .cs-portal .pg-sheet__note{
    margin-top: 10px;
    padding: 0 2px 12px;
    box-shadow: inset 0 -1px 0 rgba(14, 29, 56, 0.12);
    color: var(--ink-paper-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    text-wrap: pretty;
  }

  /* ---------- Account items ---------- */
  body.cs-page .cs-portal .pg-items{
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }
  /* An item: a white card printed on the sheet (hairline edge, a 1px
     underside, no shadow halo). Narrow layout: name / chips + status /
     instruction / date / balance. */
  body.cs-page .cs-portal .pg-item{
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'acct acct'
      'bureaus chip'
      'action action'
      'date date'
      'bal bal';
    align-items: center;
    gap: 8px;
    padding: 11px 11px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow:
      inset 0 0 0 1px rgba(14, 29, 56, 0.1),
      0 1px 0 rgba(14, 29, 56, 0.08);
  }
  /* The item in progress: a highlighter band inside the card with a cyan
     rail on its left edge. */
  body.cs-page .cs-portal .pg-item.is-current::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(56, 207, 255, 0.16), rgba(56, 207, 255, 0.03) 70%);
    box-shadow: inset 3px 0 0 #0a86dd;
    transform-origin: 0 50%;
  }
  /* Collapsed items: one header line (name, status). */
  body.cs-page .cs-portal .pg-item.is-collapsed{ grid-template-areas: 'acct chip'; padding-block: 10px; }
  body.cs-page .cs-portal .pg-item.is-collapsed .pg-bureaus{ display: none; }

  /* Phones: the first item shows in full; the others are drawn collapsed
     (header only: name and status), as the plan is read one item at a
     time on a small screen. The group description stays at every width:
     it says why these accounts are in the group. */
  @media (max-width: 767.98px) {
    body.cs-page .cs-portal .pg-item.is-folded-sm{ grid-template-areas: 'acct chip'; padding-block: 10px; }
    body.cs-page .cs-portal .pg-item.is-folded-sm .pg-item__action,

    body.cs-page .cs-portal .pg-item.is-folded-sm .pg-paydate,

    body.cs-page .cs-portal .pg-item.is-folded-sm .pg-bal,

    body.cs-page .cs-portal .pg-item.is-folded-sm .pg-bureaus{ display: none; }
    body.cs-page .cs-portal .pg-item.is-folded-sm .chip{ align-self: center; }
  }

  /* Narrow sheets: the name and the chips join the item's grid directly
     (name on its own line, chips beside the status). */
  body.cs-page .cs-portal .pg-item__id{ display: contents; }
  body.cs-page .cs-portal .pg-item__acct{
    grid-area: acct;
    color: var(--ink-paper);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
  }
  /* The masked number never breaks away from itself. */
  body.cs-page .cs-portal .pg-item__num{
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* Bureau chips: filled where the account reports, outlined where it does
     not (both in readable ink: the difference is the fill, not faint text). */
  body.cs-page .cs-portal .pg-bureaus{ grid-area: bureaus; display: flex; gap: 4px; }
  body.cs-page .cs-portal .pg-bureaus i{
    padding: 3px 5px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(14, 29, 56, 0.16);
    color: #56647e;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  body.cs-page .cs-portal .pg-bureaus i.is-on{
    background: #e2e9f5;
    box-shadow: none;
    color: #16243f;
    font-weight: 800;
  }

  /* Status chips: printed pills (labels, not selects). */
  :where(body.cs-page .cs-portal .pg-sheet) .chip{
    grid-area: chip;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: end;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }
  :where(body.cs-page .cs-portal .pg-sheet) .chip svg{ width: 11px; height: 11px; flex-shrink: 0; }
  :where(body.cs-page .cs-portal .pg-sheet) .chip--active{
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%),
      #38cfff;
    box-shadow: inset 0 -1px 0 rgba(5, 90, 150, 0.35);
    color: #06121c;
  }
  :where(body.cs-page .cs-portal .pg-sheet) .chip--open{
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(14, 29, 56, 0.22);
    color: #2b3b58;
  }

  /* The instruction: the amount to pay and the target balance in bold. */
  body.cs-page .cs-portal .pg-item__action{
    grid-area: action;
    color: #24344f;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    text-wrap: pretty;
  }
  body.cs-page .cs-portal .pg-item__action b{
    color: var(--ink-paper);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  /* The posting reminder: its own line, quieter than the instruction. */
  body.cs-page .cs-portal .pg-item__post{
    display: block;
    margin-top: 3px;
    color: #4c5e7c;
    font-size: 0.92em;
    font-weight: 500;
  }

  /* Statement closing date: a printed sky-tinted pill (a label, not a control). */
  body.cs-page .cs-portal .pg-paydate{
    grid-area: date;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: #e1f0fd;
    color: #0b4f8c;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }
  body.cs-page .cs-portal .pg-paydate svg{ width: 12px; height: 12px; flex-shrink: 0; }
  body.cs-page .cs-portal .pg-paydate b{ font-weight: 800; }

  /* Balance progress: a light panel inside the card (label; balance / limit
     with the utilization; the bar with the balance's point and the target
     marked on it; the target balance under its mark). The utilization ink
     and the bar follow the item's level: amber above the 20% line, red
     far above it (text inks >= 5:1 on the panel). */
  body.cs-page .cs-portal .pg-item--high{ --lvl-ink: #9a4705; --lvl-a: #f2a516; --lvl-b: #f7c04a; --lvl-dot: #d98a06; }
  body.cs-page .cs-portal .pg-item--over{ --lvl-ink: #b42121; --lvl-a: #e5484d; --lvl-b: #f27a7e; --lvl-dot: #d63a3f; }
  body.cs-page .cs-portal .pg-bal{
    grid-area: bal;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'label label' 'amt util' 'track track' 'target target';
    align-items: baseline;
    padding: 9px 10px 8px;
    border-radius: 8px;
    background: #f1f5fb;
    box-shadow: inset 0 0 0 1px rgba(14, 29, 56, 0.07);
  }
  body.cs-page .cs-portal .pg-bal__label{
    grid-area: label;
    color: var(--ink-paper-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }
  body.cs-page .cs-portal .pg-bal__amt{
    grid-area: amt;
    margin-top: 3px;
    color: var(--ink-paper);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  body.cs-page .cs-portal .pg-bal__amt span{ color: #4c5e7c; font-weight: 700; }
  body.cs-page .cs-portal .pg-bal__util{
    grid-area: util;
    color: var(--lvl-ink);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  body.cs-page .cs-portal .pg-bal__track{
    grid-area: track;
    position: relative;
    height: 6px;
    margin-top: 9px;
    border-radius: 3px;
    background: #dbe3ef;
  }
  body.cs-page .cs-portal .pg-bal__fill{
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--util);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lvl-a), var(--lvl-b));
  }
  /* The balance's current point: a solid printed dot in the level colour,
     cut out of the panel by a thin ring of its stock (a marker, not a
     slider thumb: no white face, no lift). */
  body.cs-page .cs-portal .pg-bal__fill::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lvl-dot);
    box-shadow: 0 0 0 2px #f1f5fb;
    transform: translateY(-50%);
  }
  /* The target balance: an upright mark on the bar (dark ink, ringed in
     the panel's stock so it reads over the fill). */
  body.cs-page .cs-portal .pg-bal__mark{
    position: absolute;
    left: var(--target);
    top: -4px;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--ink-paper);
    box-shadow: 0 0 0 1.5px #f1f5fb;
  }
  /* "Target: $600", centred under its mark. */
  body.cs-page .cs-portal .pg-bal__target{
    grid-area: target;
    justify-self: start;
    margin-top: 7px;
    margin-left: var(--target);
    transform: translateX(-50%);
    color: var(--ink-paper-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  body.cs-page .cs-portal .pg-bal__target b{ color: var(--ink-paper); font-weight: 800; }

  /* ---------- Roomy sheets (430px phones, tablets) ---------- */
  @container (min-width: 330px) {
    body.cs-page .cs-portal .pg-sheet__body{ padding: 22px 16px 16px; }
    body.cs-page .cs-portal .pg-sheet__title{ font-size: 25px; }
    body.cs-page .cs-portal .pg-item{ padding: 12px 13px 13px; }
    body.cs-page .cs-portal .pg-bal__amt{ font-size: 16px; }
  }

  /* ---------- Narrow sheets (320-374px phones) ----------
     The seal steps aside so the kicker and the group name with its count
     each keep one line. */
  @container (max-width: 284.98px) {
    body.cs-page .cs-portal .pg-sheet__seal{ display: none; }
    body.cs-page .cs-portal .pg-sheet__kicker{ letter-spacing: 0.08em; }
    body.cs-page .cs-portal .pg-sheet__title{ font-size: 22px; }
  }
  /* ---------- Narrow sheets (320-385px phones) ----------
     Collapsed rows: the status keeps its word and drops the glyph, so the
     account name keeps whole words on at most two lines beside it. */
  @container (max-width: 299.98px) {
    body.cs-page .cs-portal .pg-item.is-collapsed .chip,

    body.cs-page .cs-portal .pg-item.is-folded-sm .chip{ padding-inline: 8px; }
    body.cs-page .cs-portal .pg-item.is-collapsed .chip svg,

    body.cs-page .cs-portal .pg-item.is-folded-sm .chip svg{ display: none; }
  }
  /* ---------- Narrowest sheets (320-335px phones) ---------- */
  @container (max-width: 265.98px) {
    body.cs-page .cs-portal .pg-sheet__body{ padding-inline: 10px; }
    body.cs-page .cs-portal .pg-item{ padding-inline: 10px; column-gap: 6px; }
    /* Status chips keep their word and drop the glyph. */
    :where(body.cs-page .cs-portal .pg-sheet) .chip{ padding-inline: 8px; }
    :where(body.cs-page .cs-portal .pg-sheet) .chip svg{ display: none; }
    /* PORT: dropped per rule 7 - the :lang(es) rule at source lines 563-564
       (.pg-item.is-collapsed .chip:lang(es), .pg-item.is-folded-sm
       .chip:lang(es) { padding-inline: 6px; font-size: 10.5px; }), with its
       Spanish comment at source lines 561-562. The destination page is
       lang="en" with no i18n layer, so it could never match. */
  }
  /* PORT: dropped per rule 7 - the Spanish comment at source lines 566-568
     and the three :lang(es) rules at source lines 570-572 that were the
     ENTIRE body of the @container (max-width: 299.98px) block at source
     lines 569-573 (.pg-paydate:lang(es) two-line label, its svg offset and
     its b). The @container wrapper and its threshold are kept verbatim per
     rule 6; the block is intentionally empty. */
  @container (max-width: 299.98px) {
  }

  /* ---------- Wide sheets (tablet and desktop) ----------
     Name and chips on one line; the instruction beside its status, as in
     the real portal. */
  @container (min-width: 400px) {
    body.cs-page .cs-portal .pg-item{
      grid-template-areas:
        'acct acct'
        'action chip'
        'date date'
        'bal bal';
      column-gap: 14px;
      row-gap: 9px;
    }
    body.cs-page .cs-portal .pg-item.is-collapsed{ grid-template-areas: 'acct chip'; }
    /* Every header-only row shows its chips here (the folded phone rows
       too), so the collapsed rows read alike. */
    body.cs-page .cs-portal .pg-item.is-collapsed .pg-bureaus,

    body.cs-page .cs-portal .pg-item.is-folded-sm .pg-bureaus{ display: flex; }
    /* The chips follow the name on its line. */
    body.cs-page .cs-portal .pg-item__id{
      grid-area: acct;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px 10px;
      min-width: 0;
    }
    :where(body.cs-page .cs-portal .pg-sheet) .chip{ align-self: start; }
    body.cs-page .cs-portal .pg-item.is-collapsed .chip{ align-self: center; }
  }
  @container (min-width: 470px) {
    body.cs-page .cs-portal .pg-sheet__body{ padding: 26px 22px 20px; }
    body.cs-page .cs-portal .pg-sheet__seal{ width: 42px; height: 42px; border-radius: 11px; }
    body.cs-page .cs-portal .pg-sheet__seal svg{ width: 22px; height: 22px; }
    body.cs-page .cs-portal .pg-sheet__head{ gap: 13px; }
    body.cs-page .cs-portal .pg-sheet__title{ font-size: 28px; }
    body.cs-page .cs-portal .pg-sheet__count{ min-width: 24px; height: 24px; font-size: 12.5px; }
    body.cs-page .cs-portal .pg-sheet__note{ margin-top: 12px; padding-bottom: 14px; font-size: 13px; }
    body.cs-page .cs-portal .pg-items{ gap: 10px; margin-top: 14px; }
    body.cs-page .cs-portal .pg-item{ padding: 14px 16px 15px; row-gap: 10px; }
    body.cs-page .cs-portal .pg-item.is-collapsed{ padding-block: 12px; }
    body.cs-page .cs-portal .pg-item__action{ font-size: 13px; }
    body.cs-page .cs-portal .pg-bal{ padding: 10px 14px 9px; }
    body.cs-page .cs-portal .pg-bal__label{ font-size: 11.5px; }
    body.cs-page .cs-portal .pg-bal__util{ font-size: 12px; }
    body.cs-page .cs-portal .pg-bal__amt{ font-size: 17px; }
    body.cs-page .cs-portal .pg-bal__track{ height: 7px; }
  }
  /* Account names in capitals, as in the real portal, once the longest fits
     on one line with its three chips. */
  @container (min-width: 480px) {
    body.cs-page .cs-portal .pg-item__acct{ font-size: 13px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; }
  }

  /* Once the sheet has slid out of the portal (its slot .is-in), the item in
     progress is highlighted with one sweep from its rail. */
  @media (prefers-reduced-motion: no-preference) {
    /* PORT: deleted per rule 3 - the two :global() rules at source lines
       632-633, which were the ENTIRE body of this block:
         :global(.motion) .pg-item.is-current::before
           { transition: transform 0.7s var(--ease-out) 1.05s; }
         :global(.motion .pg-sheet-slot:not(.is-in)) .pg-item.is-current::before
           { transform: scaleX(0); }
       :global() is not valid CSS, and both rules are pre-reveal states that
       require the funnel's html.motion runtime, which the destination does
       not have. Deleting is fail-safe: .pg-item.is-current::before renders
       in its final visible state (no scaleX(0)), exactly as the funnel
       itself renders it under reduced motion. The @media wrapper and its
       feature query are kept verbatim per rule 6; it is intentionally empty.
       --ease-out was consumed ONLY here, so it is not in the token block. */
  }

  @media (forced-colors: active) {
    body.cs-page .cs-portal .pg-badge{ border: 1px solid CanvasText; border-bottom: 0; }
    body.cs-page .cs-portal .pg-sheet{ border: 1px solid CanvasText; }
    body.cs-page .cs-portal .pg-item,

    :where(body.cs-page .cs-portal .pg-sheet) .chip,

    body.cs-page .cs-portal .pg-paydate,

    body.cs-page .cs-portal .pg-bal__track{ border: 1px solid CanvasText; }
  }

/* ---- CONSULTATION CARD HEADING ---------------------------------------
   "Meet with Our Credit Strategy Team" (owner-approved wording). The card's
   title column is minmax(0,1fr), so extra lines cannot crowd the portrait or
   overflow sideways - they push the lede down and the card grows downward.
   Two deliberate lines at every width from 360px up: the team's full name is
   kept whole so the break falls after "Our", which is the funnel's own
   technique (FreeConsultation.astro titleRuns/span.nobr-360). Below 360px the
   keep is released - ~240px of measure cannot hold the phrase at 30px - and
   text-wrap:balance evens the three lines out instead of leaving them ragged.
   Authored at body.cs-page weight so the later refinement layer (style.css
   ~27703+) cannot silently defeat it. Additive: no existing rule is changed.
   ---------------------------------------------------------------------- */
body.cs-page .cs-meet-title { text-wrap: balance; }

@media (min-width: 360px) {
  body.cs-page .cs-meet-keep { white-space: nowrap; }
}

/* ============================================================
   INSIDE THE PROGRAM - REFINEMENT PASS
   ============================================================
   Additive only. No existing rule is edited, and nothing inside the
   transferred Client Portal / Monthly Credit Action Plan is touched.
   ------------------------------------------------------------ */

/* ---- 1 - THE OUTER FOLDER ARTEFACTS, REMOVED ------------------------
   .cs-product::before and ::after drew two stacked rounded plates above
   the card - each with a 1px rgba(150,196,240,0.14) rim and a navy
   gradient - so the old static action-plan card read as the top sheet of
   a paper stack. Against the transferred portal, which brings its own
   back report, window frame and overlapping plan sheet, they read as a
   second, emptier frame behind the composition: the faint outlined
   rectangles above the portal.

   `content: none` removes the pseudo-elements outright rather than hiding
   them, so nothing is left to paint or to inherit geometry from the two
   responsive overrides at the 760px breakpoint (which set only left /
   right / top / height, never content, so they cannot resurrect these).
   .cs-product itself appears exactly once in the whole site - this page,
   this section - so nothing else can be affected.

   Deliberately NOT touched: .cs-atmos--receive, the section's ambient
   radial wash. It carries no line or edge, and removing it is what would
   actually flatten the composition. */
body.cs-page .cs-product::before,
body.cs-page .cs-product::after { content: none; }

/* ---- 2 - THE SECTION HEADLINE ---------------------------------------
   New wording, following the approved funnel structure: line one in the
   primary white treatment, line two in the page's accent treatment (the
   <em> gradient, which is this page's equivalent of the funnel's
   .line.accent). Sizing is measured against the funnel's own render,
   which holds ONE line per sentence on desktop and TWO on mobile at every
   width down to 320px.

   DESKTOP: the page scale is kept exactly as it was (4.7vw) and only the
   ceiling moves, 4.25rem -> 4.125rem. The new first sentence needs about
   16.9px of width per 1px of type, so at the 1140px measure it fits on one
   line up to 67.4px; the old ceiling resolved to 67.68px at 1440 and broke
   it onto two lines. 66px renders it at 1117px, inside the measure, and
   every width below 1440 is unchanged because the clamp was never at its
   ceiling there.

   MOBILE: larger than before at every width - 430 40.4 -> 43, 390 36.7 ->
   39, 360 34 -> 36 - and bigger than the funnel's own treatment at the same
   widths (39.2 / 36.3 / 32.9). The one reduction is 320px, 34 -> 32, which
   is what buys back the second sentence's clean two-line break there; at 34
   the first sentence was spilling to three lines.

   text-wrap: balance on the lines so the two halves split evenly instead of
   leaving a short last line, matching .headline .line in the funnel. */
@media (min-width: 761px) {
  body.cs-page .cs-h2.cs-h2--xl.cs-receive-title {
    font-size: clamp(2.5rem, 4.7vw, 4.125rem);
  }
}

@media (max-width: 760px) {
  /* Sized from the measured widest run. "Shows Where You Stand." renders at
     9.38px of width per 1px of type, and with nowrap it has to fit the measure
     on its own, so the ceiling is derived rather than chosen: at 390 the
     measure is 350px, giving a 37.3px limit. 9.3vw lands at 36.3px there,
     about a 1px margin, and holds the same margin from 430 down to 360. */
  body.cs-page .cs-h2.cs-h2--xl.cs-receive-title {
    font-size: clamp(1.75rem, 9.3vw, 2.75rem);
  }
}

/* The narrowest phones carry a proportionally wider gutter (the measure is
   87.5% of the viewport at 320px against 90% at 430px), so the same
   coefficient would put the widest run 0.1px from the edge. A slightly
   gentler ramp below 350px restores a real margin. */
@media (max-width: 349.98px) {
  body.cs-page .cs-h2.cs-h2--xl.cs-receive-title { font-size: 8.9vw; }
}

body.cs-page .cs-receive-title .cs-line { text-wrap: balance; }

/* ---- 3 - MOBILE HEADLINE: EXACTLY FOUR LINES ------------------------
   The headline is authored as four runs so the phone break points are
   deterministic rather than whatever the measure happens to allow:
     Your Credit Report / Shows Where You Stand. /
     Your Action Plan Shows / What to Do Next.
   On mobile each run is held together with white-space: nowrap, so the
   break can only fall between runs. The wording, the white serif first
   sentence and the accented second sentence are untouched.

   DESKTOP IS UNAFFECTED: .cs-seg carries no rule outside this query, so
   the runs stay inline and each sentence still sets on a single line.

   The size is bounded by the longest run. "Shows Where You Stand." is the
   widest of the four, and it has to fit the measure on its own or nowrap
   would push it out of the viewport - so the ceiling here is set from the
   measured run width, not chosen. See the sizing rule below. */
@media (max-width: 760px) {
  body.cs-page .cs-receive-title .cs-seg { white-space: nowrap; }
}

/* ---- FINANCIAL RESET: THE SINGLE CONSULTATION INVITATION -------------
   The decide section's .fr-invest-paths is a fixed two-column grid, built
   when this block offered a "Talk first" / "Ready to start" fork. That fork
   now resolves to one consultation, so the block carries a single .fr-choice
   and it was landing in column one only - 580px of a 1208px container at
   1440, with the right half empty.

   :only-child scopes this to exactly that case: when a second path exists the
   rule cannot match, so the original two-column behaviour is untouched. No new
   class, no new design system - it lets the existing grid hold one child.
   Mobile already collapses to a single column and centres via the existing
   max-width:760px rules, so nothing changes there. */
.fr-page .fr-sec--decide .fr-invest-choose .fr-choice:only-child {
  grid-column: 1 / -1;
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}
/* the measures were set for a 574px column; with one centred path the block
   itself is the measure, so they simply follow it */
.fr-page .fr-sec--decide .fr-invest-choose .fr-choice:only-child .fr-choice-note {
  max-width: none;
  margin-inline: auto;
}

/* ============================================================
   FINANCIAL RESET - THE CLOSING CONSULTATION INVITATION
   ============================================================
   Scoped entirely to .fr-choice--cta inside the decide section, so nothing
   else on this page or any other can be reached. Everything below reuses the
   page's own tokens (--fr-ink, --fr-ink-2, --fr-lime, --fr-edge, --fr-ease)
   and its established accent ramp; no new colour or type scale is introduced.

   Hierarchy, in the order the eye should take it:
     1 headline   .fr-cta-title   (.fr-h2, with the page's <em> gradient)
     2 hook       .fr-cta-hook    (brighter and heavier than body, below the headline)
     3 paragraph  .fr-choice-note (the page's existing supporting-text class)
     4 button     .fr-cta-btn
     5 disclosure .fr-cta-fine
   ------------------------------------------------------------ */

/* The block carries more than a single line now, so it needs a wider measure
   than the 38rem set for the one-line version. */
.fr-page .fr-sec--decide .fr-invest-choose .fr-choice--cta:only-child {
  max-width: 44rem;
}

.fr-page .fr-sec--decide .fr-cta-title {
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  /* .fr-h2 keeps scaling past 1280 and reaches 73px at 1440, which pushes
     "Your Financial Reset Starts" onto a third line inside the 44rem measure.
     Holding the ceiling at 66px - the size 1280 already resolves to - keeps
     the intended two lines from 1280 up while staying far larger than the
     26px line this block carried before. */
  font-size: clamp(2.75rem, 5.1vw, 4.125rem);
}

/* THE ACCENT. Note for the record: .fr-h2 em elsewhere on this page is SOLID
   lime, and the comment above .fr-h1 em states the hero carries "the page's
   ONE gradient word". The brief asks for a gradient accent here, so this is a
   deliberate second one - same three brand stops, same technique as the hero,
   read cyan -> teal -> lime as requested.

   Two things the hero rule teaches and this one repeats:
     - background-clip: text paints only inside the box, so the descender of
       "Conversation" needs the padding/negative-margin pair or it is cut;
     - the solid colour is declared FIRST and the transparent fill only inside
       @supports, so a browser without background-clip: text shows lime type
       rather than an invisible headline. */
.fr-page .fr-sec--decide .fr-cta-title em {
  color: var(--fr-lime);
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fr-page .fr-sec--decide .fr-cta-title em {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(96deg, #38cfff 0%, #44b59c 48%, var(--fr-lime) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
  }
}

/* The hook sits between the headline and the paragraph: brighter ink and more
   weight than body text, but sans and well under the serif headline, so it
   reads as a second voice rather than a second headline. */
.fr-page .fr-sec--decide .fr-cta-hook {
  margin: 0 0 clamp(12px, 1.3vw, 16px);
  font-family: var(--font);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fr-ink);
  text-wrap: balance;
}

/* THE SPACING THE BRIEF ASKS FOR: the paragraph used to sit ~14px off the
   button. The gap below is measured from the paragraph, not added to the
   button, so the button keeps its own hit area and the rhythm stays with
   the type. */
.fr-page .fr-sec--decide .fr-choice--cta .fr-choice-note {
  margin: 0 auto clamp(30px, 3.6vw, 48px);
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

/* The button keeps its green fill and white label. The emphasis is a soft
   brand-ramp edge drawn OUTSIDE the button by a pseudo-element, so the fill,
   the label contrast and the hit area are all untouched. */
.fr-page .fr-sec--decide .fr-choice .fr-cta-btn:not(.btn-sm) {
  position: relative;
  width: auto;
  min-width: min(100%, 22rem);
  margin-inline: auto;
}
.fr-page .fr-sec--decide .fr-cta-btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(96deg, var(--fr-lime) 0%, #44b59c 52%, #38cfff 100%);
  opacity: 0.34;
  filter: blur(7px);
  transition: opacity 0.35s var(--fr-ease);
}
.fr-page .fr-sec--decide .fr-cta-btn:hover::after { opacity: 0.5; }

/* One slow, shallow breath - no pulse, no movement, no colour cycling. Gated
   positively on no-preference, so reduced motion simply gets the static
   edge above and nothing animates at all. */
@media (prefers-reduced-motion: no-preference) {
  .fr-page .fr-sec--decide .fr-cta-btn::after {
    animation: frCtaEdge 7s var(--fr-ease-soft) 1.2s infinite;
  }
}
@keyframes frCtaEdge {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.44; }
}

/* Focus must beat the glow, so it is drawn on the button itself. */
.fr-page .fr-sec--decide .fr-cta-btn:focus-visible {
  outline: 3px solid var(--fr-lime);
  outline-offset: 4px;
}

/* The disclosure: small but at an accessible size and contrast, in the flow,
   no box, no tooltip, no hover-only reveal. */
.fr-page .fr-sec--decide .fr-cta-fine {
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  max-width: 40rem;
  font-family: var(--font);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--fr-ink-2);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .fr-page .fr-sec--decide .fr-choice .fr-cta-btn:not(.btn-sm) { min-width: 100%; width: 100%; }
  .fr-page .fr-sec--decide .fr-cta-fine { font-size: 0.78125rem; }
}

/* ===================================================================
   CREDIT BLUEPRINT — SHARED REFINEMENT
   ===================================================================
   One treatment serving both Blueprint pages, so the thank-you page and
   the landing page read as the same family and sit alongside Credit
   Strategy and Financial Reset rather than apart from them.

   Nothing decorative is introduced: no new icon, illustration, ring,
   wave, particle, pedestal or pattern. The work is type, contrast,
   gradient accent, spacing and light.
   =================================================================== */

/* ---- The gradient accent ----
   Same technique as the approved .fr-page .fr-h1 em: a solid colour is
   declared FIRST so a browser without background-clip:text shows brand
   type rather than nothing, and the transparent fill only applies inside
   @supports. background-clip:text paints only inside the box, so the
   padding/negative-margin pair keeps descenders from being cut. */
.cbp-grad {
  color: var(--sky-300);
  font-style: normal;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cbp-grad {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(96deg, #38cfff 0%, #44b59c 52%, var(--lime-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    padding-bottom: 0.24em;
    margin-bottom: -0.24em;
  }
  /* The brighter pairing, for the two lower CTA headings where the accent
     has to carry the section on its own. */
  .cbp-grad--bright {
    background-image: linear-gradient(96deg, #5ad8ff 0%, var(--lime-400) 100%);
  }
}

/* ---- Premium CTA buttons, shared by both Blueprint pages ----
   Three base-rule resets are needed before the edge can paint at all, and
   each was proved by measurement rather than assumed:

     overflow: visible  - `.btn` sets overflow: hidden, which clipped the
       inset:-3px pseudo to the button's own border box, so nothing ever
       escaped around the edge. `.btn-primary::before` (the fill-wipe) is
       inset: 0, so it stays inside and does not spill when the clip goes.

     isolation: auto    - `.btn-primary` and `.btn-sky` set
       isolation: isolate, making the button its own stacking context and
       trapping the z-index:-1 glow ABOVE its own background instead of
       behind it. The declaration lives on .btn-primary, so it has to be
       reset here rather than merely left out.

     --edge-o           - the glow opacity lives in a custom property so
       :hover can change it. Animations sit in a higher cascade origin
       than normal author rules, so a running animation on `opacity`
       silently beat every :hover rule. Hover also stops the animation,
       which lets the author value apply and transition. */
.cbp-ty-btn {
  position: relative;
  overflow: visible;
  isolation: auto;
  --edge-o: 0.34;
}

/* The primary keeps the approved green identity and gains depth: a lime
   to green sweep instead of a flat fill. .btn-primary::before still wipes
   solid green across it on hover, which now reads as the gradient
   resolving rather than a colour swap. */
.cbp-ty-btn.btn-primary {
  background-image: linear-gradient(100deg, var(--lime-400) 0%, var(--green-600) 68%);
  box-shadow: 0 10px 26px -14px rgba(175, 221, 44, 0.55);
}

/* The secondary gets a true gradient border - two backgrounds, one
   clipped to the padding box and one to the border box - over an opaque
   navy fill. Opaque matters: `.btn-secondary` is `background: transparent`,
   so the blurred edge behind it used to show straight THROUGH the face
   and fill it a muddy olive instead of ringing it. */
.cbp-ty-btn.btn-secondary {
  --edge-o: 0.22;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--navy-900), var(--navy-900)) padding-box,
    linear-gradient(96deg, #38cfff 0%, #44b59c 55%, var(--lime-400) 100%) border-box;
  color: var(--white);
}

.cbp-ty-btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(96deg, var(--lime-400) 0%, var(--teal-500) 52%, var(--sky-300) 100%);
  opacity: var(--edge-o);
  filter: blur(7px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover stops the breath so the author value can win the cascade, then
   transitions to it. Without `animation: none` the running keyframes
   override every hover opacity and nothing visibly changes. */
.cbp-ty-btn:hover { --edge-o: 0.52; }
.cbp-ty-btn.btn-secondary:hover {
  --edge-o: 0.4;
  background:
    linear-gradient(#0a1a2d, #0a1a2d) padding-box,
    linear-gradient(96deg, #5ad8ff 0%, var(--teal-500) 55%, var(--lime-400) 100%) border-box;
  color: var(--white);
}
.cbp-ty-btn:hover::after { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .cbp-ty-btn::after {
    animation: cbpTyEdge 7s cubic-bezier(0.4, 0, 0.2, 1) 1.2s infinite;
  }
}
/* Relative to --edge-o, so the primary and the quieter secondary each
   breathe around their own resting value instead of a shared constant. */
@keyframes cbpTyEdge {
  0%, 100% { opacity: calc(var(--edge-o) - 0.04); }
  50%      { opacity: calc(var(--edge-o) + 0.1); }
}

/* Focus must beat the glow, so it is drawn on the button itself. */
.cbp-ty-btn:focus-visible {
  outline: 3px solid var(--lime-400);
  outline-offset: 4px;
}

/* ===================================================================
   THANK-YOU PAGE
   =================================================================== */

/* ---- Upper: confirmation ---- */
/* `.page-hero-bg` is position:absolute with z-index auto, so it paints in
   the positioned-descendants layer ABOVE in-flow text. Sitewide it is
   `.page-hero-content` (line 1276) that carries position:relative;
   z-index:1 and lifts hero text clear of it. This hero uses its own
   wrapper, which never got that lift, so the decorative radial was
   veiling the whole confirmation area: the white headline words measured
   rgb(196,204,241), the cyan eyebrow rgb(51,183,241) and the lime check
   rgb(153,199,63) - every one of them duller than the value the
   refinement sets. Lifting the wrapper restores all three. */
.cbp-ty-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.cbp-ty-hero { padding-bottom: clamp(48px, 6vw, 72px); }

/* The success mark: the existing circle, given the brand's own gradient
   as a true border and a brighter check. Lit, not haloed - a tight inner
   ring and one soft cast, no large glowing disc. */
.cbp-ty-icon {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--navy-800), var(--navy-800)) padding-box,
    linear-gradient(140deg, #38cfff 0%, #44b59c 48%, var(--lime-400) 100%) border-box;
  color: var(--lime-400);
  box-shadow:
    inset 0 0 18px -6px rgba(56, 207, 255, 0.35),
    0 10px 30px -14px rgba(68, 181, 156, 0.55);
}
.cbp-ty-icon svg { stroke-width: 3; }

/* A single entrance, never a loop. The rule above IS the final state, so
   the mark is correct with JavaScript disabled and under reduced motion;
   `backwards` only borrows the start frame during the delay. */
@media (prefers-reduced-motion: no-preference) {
  .cbp-ty-icon { animation: cbpTyMark 700ms cubic-bezier(0.22, 1, 0.36, 1) 100ms backwards; }
}
@keyframes cbpTyMark {
  from { opacity: 0; transform: scale(0.82); }
}

/* The eyebrow reads brighter here than the sitewide muted treatment. */
.cbp-ty-hero-content .section-label { color: var(--sky-300); }
.cbp-ty-hero-content .section-label::before,
.cbp-ty-hero-content .section-label::after {
  background: linear-gradient(90deg, rgba(56, 207, 255, 0) 0%, var(--sky-400) 100%);
  opacity: 0.9;
}

.cbp-ty-headline {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* The two confirmation statements, deliberately unequal: the first is the
   answer the visitor came for, the second is the bridge onward. */
.cbp-ty-lede {
  max-width: 46ch;
  margin: 22px auto 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--gray-100, #f0f4ff);
}
.cbp-ty-sub {
  max-width: 50ch;
  margin: 10px auto 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  color: #9fb3d4;
}

/* ---- Lower: discovery ---- */
/* `.page-hero + section { padding-top: 0 }` strips the top padding from
   whatever follows a hero, which is right when the hero owns the gap.
   Here the band needs its own breathing room, so this beats it on
   specificity: two classes (0,2,0) against a class and a type (0,1,1). */
.page-hero + .cbp-ty-next {
  padding-top: clamp(52px, 6.5vw, 80px);
  padding-bottom: clamp(64px, 8vw, 96px);
}
.cbp-ty-next {
  position: relative;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(2, 193, 255, 0.055) 0%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0) 60%);
}
/* The restrained transition between the two areas: one hairline of brand
   light along the seam, fading out to each side. No shape, no motion. */
.cbp-ty-next::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(56, 207, 255, 0.4) 30%,
    rgba(175, 221, 44, 0.4) 70%, transparent 100%);
}
.cbp-ty-next-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.cbp-ty-next-title {
  margin: 0;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* The supporting line read as faded against the accented heading above
   it. Lifted clear of --text-muted while staying plainly subordinate. */
.cbp-ty-next-lede {
  max-width: 54ch;
  margin: 18px auto 0;
  color: #a8bcd9;
}
.cbp-ty-ctas { margin-top: clamp(28px, 3.5vw, 40px); }

/* ---- Narrow widths ---- */
/* Measured: the two buttons are 406px and 445px with a 12px gap, so the
   row needs 863px. Inside the 900px inner measure that is reached at a
   960px viewport, so below 960 the pair stacks and both headlines take
   the full measure rather than staying in a capped column. */
@media (max-width: 958px) {
  .cbp-ty-headline,
  .cbp-ty-next-title { max-width: none; }
}

@media (max-width: 480px) {
  .cbp-ty-ctas .btn {
    font-size: 0.75rem;
    /* Between roughly 334px and 361px the longer label wraps to two lines
       while the shorter one does not, leaving the stacked pair 8px apart
       in height. Reserving the wrapped height keeps them identical at
       every width without touching the approved labels. */
    min-height: 54px;
  }
}

@media (max-width: 376px) {
  /* The eyebrow's natural width is 335.97px and a 375px viewport leaves
     exactly 335px of content width, so it wrapped at 375 too - the cutoff
     is 376. Tightening the tracking fits it onto one line. */
  .cbp-ty-hero-content .section-label {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}

/* ===================================================================
   BLUEPRINT LANDING PAGE
   =================================================================== */

/* The approved headline gained a third sentence, so the ceiling comes
   DOWN a step from the original clamp(1.875rem, 2.7vw, 2.875rem) rather
   than up: at 46px the new wording set four lines and crowded the form
   beside it. 42px holds it to a tighter stack in the same column.
   The accent keeps the italic it has always carried on this headline. */
.cbp-h1 { font-size: clamp(1.75rem, 2.5vw, 2.625rem); }
/* One phrase, never broken: at 1700 and at 390/375/360 "With Clarity."
   was splitting across two lines, which cut the gradient in half. */
.cbp-h1 .cbp-grad { font-style: italic; white-space: nowrap; }

/* ---- The book ----
   Centred in its own column and lit from behind. The light is a soft
   ellipse under and around the cover, not a ring, a disc or a stage. */
/* `.cbp-image-wrap` is `max-width: 260px; margin: 0 0 32px`, so the book
   sat hard against the left edge of a 620px column. Centring the BOX (not
   just the image inside it) is what the owner asked for, and a slightly
   larger measure gives it the emphasis it was missing. */
.cbp-book {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}
/* The larger measure is desktop only. The approved mobile sizes live in
   @media blocks EARLIER in the file at the same specificity, so an
   unscoped max-width here would win on source order and make the book
   grow on phones instead of shrink. */
@media (min-width: 1025px) {
  .cbp-book { max-width: 300px; margin: 10px auto 36px; }
}
/* The light has to fall OUTSIDE the cover to be seen: the book is opaque
   across almost its whole area, so an ellipse inset within it was clipped
   to a 20-30px rim and blur(26px) flattened what was left (measured: a
   maximum channel delta of 6/255 over 1.2% of the area - a compositing
   layer for nothing). Negative insets push the ellipse past the cover on
   every side and the stops carry enough alpha to register, while staying
   a soft pool rather than a ring, disc or stage. */
.cbp-book::before {
  content: '';
  position: absolute;
  inset: -14% -22%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 54%,
    rgba(2, 193, 255, 0.30) 0%,
    rgba(68, 181, 156, 0.20) 36%,
    rgba(175, 221, 44, 0.09) 56%,
    transparent 74%);
  filter: blur(30px);
}
.cbp-book img {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
/* A slow, shallow drift - 10px over seven seconds, no rotation. The base
   state is untransformed, so the book sits correctly with JavaScript
   disabled and under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cbp-book img { animation: cbpBookDrift 7s ease-in-out 1.2s infinite; }
}
@keyframes cbpBookDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- Lower education CTA ----
   Matched to the thank-you page's discovery band so the two read as one
   system. Content and architecture are unchanged. */
.cbp-continuation .section-label { color: var(--sky-300); }
.cbp-continuation .section-label::before,
.cbp-continuation .section-label::after {
  background: linear-gradient(90deg, rgba(56, 207, 255, 0) 0%, var(--sky-400) 100%);
  opacity: 0.9;
}
.cbp-cont-title {
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cbp-cont-lede {
  max-width: 54ch;
  margin: 18px auto 0;
  color: #a8bcd9;
}
.cbp-continuation-inner .btn { margin-top: clamp(26px, 3.2vw, 36px); }

/* ===================================================================
   MOBILE FOOTER — COMPACT TWO-COLUMN NAVIGATION
   ===================================================================
   Below 768px every group became a full-width vertical block, which made
   the footer several screens tall on a phone. The brand keeps the full
   width at the top; Services and Company share a row; Get Started spans
   again because its CTA is a full-width button.

   This block sits after the existing <=768 rules, so it wins on source
   order at equal specificity. Font sizes and tap targets are unchanged
   or larger - the height comes out of gaps and padding, not legibility.
   =================================================================== */
@media (max-width: 768px) {
  .footer { padding: clamp(36px, 6vw, 52px) 0 24px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
    margin-bottom: 28px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    gap: 12px;
  }
  /* Get Started is always the last column and carries the button. */
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }

  /* The two navigation columns read better left-aligned side by side; the
     brand block above them stays centred as before. */
  .footer-grid > .footer-col:not(:last-child) { text-align: left; }
  .footer-grid > .footer-col:not(:last-child) .footer-links { align-items: flex-start; }

  .footer-col h2 { margin-bottom: 12px; }
  /* 12px gap on a 0.875rem link gives a ~38px row: comfortable to tap
     without the 10px desktop rhythm making the column feel cramped. */
  .footer-links { gap: 12px; }
  .footer-tagline { font-size: 1.0625rem; max-width: 32ch; }
  .footer-social { margin-top: 4px; }
  .footer-bottom { padding-top: 20px; gap: 6px; }
}

/* ===================================================================
   404 PAGE
   ===================================================================
   Reuses the approved hero treatment. Additive only.
   =================================================================== */
.nf-content { max-width: 760px; margin: 0 auto; text-align: center; }
.nf-content .section-label { justify-content: center; margin-bottom: 20px; }
.nf-title {
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.nf-lede { max-width: 52ch; margin: 20px auto 0; }
.nf-hero .cta-banner-ctas { margin-top: clamp(32px, 4vw, 44px); }
.nf-alt {
  margin: 28px 0 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.nf-alt a { color: var(--sky-400); }
@media (max-width: 760px) {
  .nf-title { max-width: none; }
}

/* ===================================================================
   FOOTER LOGO — INTRINSIC WIDTH CORRECTION
   ===================================================================
   Logo-F5.png was given width="1181" height="820" so the footer reserves
   space before it loads. But the width attribute is a presentational hint
   and `.footer-logo img` (line 1328) sets only height, so the declared
   1181px won the cascade and the logo rendered 296x48 — stretched 4.3x —
   on every page carrying it.

   `width: auto` restores the intrinsic ratio (69x48) while keeping the
   attributes, so the aspect-ratio hint still prevents layout shift.
   Appended rather than editing line 1328: same specificity, later in the
   file, so it wins without modifying an approved rule.
   =================================================================== */
.footer-logo img { width: auto; }

/* ===================================================================
   SECTION LABEL DECORATION WITHOUT JAVASCRIPT
   ===================================================================
   .section-label::before and ::after (lines 165 and 177) ship at
   transform: scaleX(0) and are only restored to scaleX(1) by selectors
   that require the .revealed class, which main.js adds on scroll.

   That is correct for the animated pages. But the Credit Blueprint
   thank-you hero and the 404 page deliberately carry no .reveal class --
   both must render fully without JavaScript -- so on those two the
   decorative rules beside the eyebrow were painting at zero width and the
   approved ornament never appeared at all.

   Restoring scaleX(1) only inside those two containers leaves every
   animated .section-label elsewhere on the site untouched.
   =================================================================== */
.cbp-ty-hero-content .section-label::before,
.cbp-ty-hero-content .section-label::after,
.nf-content .section-label::before,
.nf-content .section-label::after {
  transform: scaleX(1);
}

/* ===================================================================
   CONSULTATION CTA LABELS AT THE NARROWEST WIDTH
   ===================================================================
   The approved labels are longer than the ones they replaced. Across
   26 pages x 6 widths exactly one button reached three text lines:
   contact.html's sidebar CTA at 320px, which broke as
   "BOOK YOUR FREE / CREDIT / CONSULTATION" and orphaned "CREDIT" on a
   short middle line. Nothing clipped or overflowed - the button grew
   56px -> 69px to fit - so this is legibility, not breakage.

   A small step down in tracking and size at 320 restores the clean
   two-line break without touching the approved label text. Scoped to
   the consultation CTAs so no other button is affected.
   =================================================================== */
@media (max-width: 340px) {
  .btn[href*="calendly.com"] {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}

/* ===================================================================
   FOOTER COLUMN HEADINGS — SEMANTIC LEVEL CORRECTION
   ===================================================================
   The three footer column headings were <h4> following a body <h2>,
   which skipped a level on 49 of the 54 pages. They are top-level
   landmarks inside <footer> with no intervening <h3> context, so <h2> is
   the correct level. The existing `.footer-col h4` rule (line 1338) is
   tag-coupled, so it is reproduced here for h2 rather than modified —
   the declarations are identical and the footer is visually unchanged.

   The explicit `color` matters twice over: it restores the approved
   --gray-200 AND stops the heading inheriting `--fr-ink` from the
   `body.fr-page` rule, which was tinting the Financial Reset footer's
   headings a different colour from every other page.
   =================================================================== */
.footer-col h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-200);
  margin-bottom: 18px;
}

/* ===================================================================
   DESKTOP HEADER ABOVE 1600px — APPLY THE PACKING TO EVERY PAGE
   ===================================================================
   The @media (min-width: 1601px) block at line ~24399 exists, in its own
   words, because "the logo, eight links and two calls to action need more
   room than the container gives them" — but every rule in it is scoped to
   `body.home`, so only the homepage ever got the reduction. On the other
   pages carrying the same header the CTA row runs 97px past a 1700px
   viewport and `body { overflow-x: hidden }` clips it, leaving the second
   button sliced mid-word and unreachable (measured on /about.html,
   /faqs.html, /404.html and both Blueprint pages; 28px on the two legal
   pages).

   These are the same declarations, unscoped. The homepage keeps its own
   higher-specificity copy with identical values, so nothing changes
   there; every other page simply gets the fix the comment describes.
   =================================================================== */
@media (min-width: 1601px) {
  .nav .container { padding-left: 26px; padding-right: 26px; }
  .nav-inner { gap: 18px; }
  .nav-logo img { width: 180px; height: auto; }
  .nav-links { gap: 2px; }
  .nav-links a { padding-left: 8px; padding-right: 8px; font-size: 0.84375rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { white-space: nowrap; }
}

/* ===================================================================
   MOBILE FOOTER — TOUCH TARGETS AND TYPE
   ===================================================================
   The compact two-column layout kept the 14px link size but left the
   anchor boxes 22.4px tall against a 34.4px row pitch, the footer-bottom
   links 13px/16px, and the CTA button label at 12px — the smallest type
   in the footer, on its primary conversion control.

   Padding grows each anchor into the pitch it already occupies and the
   flex gap shrinks by the same amount, so the targets get bigger without
   the footer getting taller.
   =================================================================== */
@media (max-width: 768px) {
  /* The padding below grows each anchor into the row pitch it already had,
     so the gap goes to zero rather than stacking on top of it. */
  .footer-links { gap: 0; }
  .footer-links a {
    padding-block: 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  /* .footer-links a::after is the hover underline, positioned against the
     anchor box; the padding would push it away from the text, so it is
     pinned back to the text's own baseline area. */
  .footer-links a::after { bottom: 6px; }

  /* The bottom bar is three centred paragraphs of inline links, so its
     anchors take a smaller lift than the stacked navigation columns -
     enough to clear a finger without making each paragraph a block. */
  .footer-bottom p { font-size: 0.875rem; }
  .footer-bottom a {
    display: inline-block;
    padding-block: 4px;
    min-height: 28px;
  }

  /* The footer CTA label is deliberately LEFT at the approved .btn-sm
     scale (12px uppercase). It is the same scale every small button on
     the site uses, including the two in the header, and its tap target
     measures 36px at 390 and 52px at 320 - comfortable on its own terms.
     Raising it only here would make the footer button disagree with the
     nav buttons for no gain. */
}

/* ===================================================================
   CREDIT BLUEPRINT — FINAL REFINEMENT PASS
   ===================================================================
   Appended rather than editing the earlier Blueprint block, so nothing
   already approved is destroyed; later source order carries these at
   equal specificity. No icon, illustration, pattern or decorative object
   is added anywhere in this block — the work is type, gradient, light,
   spacing and one slow edge.
   =================================================================== */

/* ---- 1A · THE MOBILE HEADLINE IS EXACTLY TWO LINES ----
   "Your Credit Blueprint" / "Is on Its Way!". The wrappers are inline on
   desktop so the headline keeps its natural flow, and block below 760
   where the two-line requirement applies. The size is set so the longer
   of the two lines fits a 320px viewport without hyphenation. */
@media (max-width: 760px) {
  .cbp-ty-line { display: block; }
  .cbp-ty-headline {
    font-size: clamp(1.625rem, 7.6vw, 2.375rem);
    line-height: 1.1;
    max-width: none;
  }
  /* The accent is one phrase on its own line and must never break. */
  .cbp-ty-headline .cbp-grad { white-space: nowrap; }
}

/* ---- 1B · THE SUCCESS MARK ----
   The same circle, better lit: a brighter brand ring, a crisper check,
   and one soft pool of light beneath it instead of a halo around it. */
.cbp-ty-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 26px;
  border-width: 2px;
  background:
    linear-gradient(var(--navy-800), var(--navy-800)) padding-box,
    linear-gradient(140deg, #5ad8ff 0%, #44b59c 46%, var(--lime-400) 100%) border-box;
  box-shadow:
    inset 0 0 22px -6px rgba(90, 216, 255, 0.45),
    0 14px 38px -16px rgba(68, 181, 156, 0.75);
}
.cbp-ty-icon svg { width: 32px; height: 32px; stroke-width: 3; }

/* ---- 1B · THE EYEBROW ----
   Brand gradient rather than flat cyan, with the rules lit to match.
   Solid colour first; the transparent fill only inside @supports. */
.cbp-ty-hero-content .section-label,
.cbp-continuation .section-label {
  color: var(--sky-300);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cbp-ty-hero-content .section-label,
  .cbp-continuation .section-label {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(96deg, #5ad8ff 0%, var(--lime-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.cbp-ty-hero-content .section-label::before,
.cbp-ty-hero-content .section-label::after,
.cbp-continuation .section-label::before,
.cbp-continuation .section-label::after {
  opacity: 1;
  height: 2px;
}

/* ---- 1B · THE HEADLINE ACCENT, BRIGHTER ---- */
.cbp-ty-headline .cbp-grad,
.cbp-ty-next-title .cbp-grad {
  background-image: linear-gradient(96deg, #6fdeff 0%, #4fc5a8 46%, #c3e64a 100%);
}

/* ---- 1C · THE TWO CONFIRMATION LINES ----
   Each gets its own measure so they stack as two deliberate statements
   rather than one block that happens to wrap. */
.cbp-ty-lede {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  font-weight: 600;
  color: var(--white);
}
.cbp-ty-sub {
  max-width: 44ch;
  margin-top: 12px;
  color: #a9bcd9;
}

/* ---- 1D · HERO ATMOSPHERE ----
   One wide pool of brand light behind the mark and headline. It sits in
   the existing .page-hero-bg layer, so no element is added. */
.cbp-ty-hero .page-hero-bg {
  background:
    radial-gradient(760px 420px at 50% 16%, rgba(2, 193, 255, 0.16) 0%, transparent 68%),
    radial-gradient(900px 500px at 50% 0%, rgba(68, 181, 156, 0.10) 0%, transparent 72%),
    radial-gradient(ellipse at 30% 50%, rgba(10, 45, 194, 0.26) 0%, transparent 62%);
}

/* ---- 1D · SEPARATION FROM THE NEXT SECTION ----
   The seam reads as a lit edge, with the band below lifting slightly out
   of the hero rather than butting against it. */
.cbp-ty-next {
  background:
    radial-gradient(1000px 360px at 50% 0%, rgba(2, 193, 255, 0.085) 0%, transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 56%);
}
.cbp-ty-next::before {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(90, 216, 255, 0.55) 28%,
    rgba(175, 221, 44, 0.55) 72%, transparent 100%);
}

/* ---- 1E · THE SECOND SECTION, WITH MORE PUNCH ---- */
.cbp-ty-next-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.12;
}
.cbp-ty-next-lede {
  color: #bcccE4;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}

/* ---- 1F / 2E · THE PREMIUM BUTTON EDGE ----
   The resting edge is stronger and the primary's fill is a richer sweep.
   The breathing animation is unchanged and still gated on no-preference;
   nothing here pulses, moves or shifts a background position. */
.cbp-ty-btn { --edge-o: 0.44; }
.cbp-ty-btn.btn-secondary { --edge-o: 0.3; }
.cbp-ty-btn:hover { --edge-o: 0.62; }
.cbp-ty-btn.btn-secondary:hover { --edge-o: 0.48; }
.cbp-ty-btn.btn-primary {
  background-image: linear-gradient(100deg, #c3e64a 0%, var(--lime-400) 32%, var(--green-600) 86%);
  box-shadow: 0 12px 30px -14px rgba(175, 221, 44, 0.7);
}
.cbp-ty-btn::after { filter: blur(9px); }

/* ===================================================================
   BLUEPRINT LANDING PAGE
   =================================================================== */

/* ---- 2A · THE NEW HEADLINE ----
   Two sentences instead of three, so it can hold a larger size without
   pushing the form down. */
.cbp-h1 {
  font-size: clamp(1.875rem, 2.9vw, 3rem);
  line-height: 1.14;
}

/* ---- 2B · MOBILE: CENTRED EYEBROW AND HEADLINE ---- */
.cbp-eyebrow {
  color: var(--sky-300);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cbp-eyebrow {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(96deg, #5ad8ff 0%, var(--lime-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.cbp-eyebrow::before,
.cbp-eyebrow::after { opacity: 1; height: 2px; }

@media (max-width: 1024px) {
  .cbp-content { text-align: center; }
  .cbp-h1 { text-align: center; }
  .cbp-eyebrow { justify-content: center; }
  /* The supporting paragraph stays left-aligned: centred multi-line prose
     is measurably harder to read, and the sitewide hero rule makes the
     same exception. */
  .cbp-copy { text-align: left; margin-inline: auto; max-width: 46ch; }
}

/* ---- 2C · THE BOOK ----
   Centred, with the light pooled under and behind the cover. */
.cbp-book::before {
  inset: -16% -24%;
  background: radial-gradient(ellipse at 50% 54%,
    rgba(2, 193, 255, 0.34) 0%,
    rgba(68, 181, 156, 0.22) 36%,
    rgba(175, 221, 44, 0.10) 56%,
    transparent 74%);
  filter: blur(32px);
}
.cbp-book img { filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.6)); }

/* ---- 2D · THE BENEFITS, PRESENTED AS A VALUE BLOCK ----
   Each row becomes a surface with its own edge instead of a loose line of
   text, which is what made the group read as an afterthought. No icon is
   added, removed or changed — the existing ones simply get a lit tile. */
.cbp-benefits--lift { gap: 12px; }
.cbp-benefits--lift .cbp-benefit {
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
  .cbp-benefits--lift .cbp-benefit:hover {
    border-color: rgba(2, 193, 255, 0.4);
    transform: translateY(-2px);
  }
}
.cbp-benefits--lift .cbp-benefit-icon {
  width: 44px;
  height: 44px;
  background: rgba(2, 193, 255, 0.07);
  border-color: rgba(2, 193, 255, 0.22);
}
.cbp-benefits--lift .cbp-benefit h2 {
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  margin-bottom: 5px;
}
.cbp-benefits--lift .cbp-benefit p { color: #a9bcd9; }

@media (max-width: 1024px) {
  /* The rows stay left-read even where the column above them centres:
     a heading and its sentence are easier to scan against a shared edge. */
  .cbp-benefits--lift { text-align: left; max-width: 46ch; margin-inline: auto; }
}

/* ---- 2E · THE FORM CARD ----
   A brand edge around the card and a stronger heading. The panel's own
   padding, the embed wrapper and the iframe are all untouched. */
.cbp-form-panel {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(150deg, #5ad8ff 0%, #44b59c 48%, var(--lime-400) 100%) border-box;
  box-shadow: var(--shadow-card), 0 0 48px -20px rgba(2, 193, 255, 0.5);
}
.cbp-form-title {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  letter-spacing: -0.01em;
}

/* ===================================================================
   3 · EDUCATION FIRST, ALWAYS
   =================================================================== */
/* The eyebrow must hold one line down to 320. Its decorative rules are
   what push it over, so they shorten before the type does. */
.cbp-continuation .section-label { white-space: nowrap; }
.cbp-cont-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.12;
}
.cbp-cont-title .cbp-grad {
  background-image: linear-gradient(96deg, #6fdeff 0%, #c3e64a 100%);
}
.cbp-cont-lede {
  color: #bcccE4;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}
@media (max-width: 480px) {
  .cbp-continuation .section-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
  .cbp-continuation .section-label::before,
  .cbp-continuation .section-label::after { width: 18px; }
}

/* ===================================================================
   4 · MOBILE FOOTER — GROUPING AND PRESENCE
   ===================================================================
   The brand line is the footer's voice and was reading as small print;
   the Get Started column sat apart from the two navigation columns with
   its button stranded at the very bottom. This groups Get Started with
   the columns it belongs to and lifts the brand line, without changing
   a single link.
   =================================================================== */
@media (max-width: 768px) {
  .footer-grid {
    gap: 22px 20px;
    margin-bottom: 24px;
  }

  /* The brand line carries the footer: larger, tighter, and given room
     rather than left to float between the logo and the social row. */
  .footer-tagline {
    font-size: 1.1875rem;
    line-height: 1.45;
    max-width: 30ch;
    color: var(--white);
  }
  .footer-brand { gap: 14px; }

  /* Get Started sits with the other two columns instead of below them,
     so the button lands inside the navigation block rather than at the
     bottom of the page. The three columns read: Services | Company on
     one row, Get Started spanning under them with its CTA attached. */
  .footer-grid > .footer-col:last-child {
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }
  .footer-grid > .footer-col:last-child .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 22px;
  }
  /* The CTA is part of the group above it, not a trailing afterthought. */
  .footer-grid > .footer-col:last-child > div[style] { margin-top: 14px !important; }
  .footer-col h2 { margin-bottom: 10px; }
  .footer-bottom { padding-top: 18px; }
}

/* ===================================================================
   CREDIT BLUEPRINT — FINAL PASS
   ===================================================================
   Appended, so every earlier block survives intact and these carry on
   source order at equal specificity.

   MOTION POLICY FOR THIS WHOLE BLOCK: every animation is an opacity or
   transform breath on a decorative pseudo-element, gated on
   prefers-reduced-motion: no-preference, with the rule's own value as
   the resting state. Nothing animates background-position, nothing
   animates a property on live text, and no text can disappear.
   =================================================================== */

/* ---- 1A · THE HOOK ----
   Two controlled lines. The accent lands on the payoff phrase and is
   held to one piece so it can never split. */
.cbp-h1-line { display: block; }
.cbp-h1 {
  /* Ceiling measured against the real column, not the viewport: the
     content column is 519px at 1700 and 532px at 1440, so 46px is the
     largest size that still holds "Understand Your Credit" on one line
     there. The floor is set the same way, against the 288px the column
     has at 320. */
  font-size: clamp(1.5rem, 3.2vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.cbp-h1 .cbp-grad {
  white-space: nowrap;
  background-image: linear-gradient(96deg, #6fdeff 0%, #58cfae 48%, #c3e64a 100%);
}

/* ---- 1B · THE EYEBROW ---- */
.cbp-eyebrow {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}
.cbp-eyebrow::before,
.cbp-eyebrow::after { height: 2px; opacity: 1; }

/* ---- 1C · THE BOOK ----
   Two layers of light, both behind the cover: a wide aura that breathes
   and a tighter edge light that does not. No ring, stage or pedestal. */
.cbp-book::before {
  inset: -18% -26%;
  background: radial-gradient(ellipse at 50% 52%,
    rgba(90, 216, 255, 0.40) 0%,
    rgba(68, 181, 156, 0.26) 34%,
    rgba(175, 221, 44, 0.12) 54%,
    transparent 74%);
  filter: blur(34px);
}
.cbp-book::after {
  content: '';
  position: absolute;
  inset: 2% 10%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(2, 193, 255, 0.22) 0%, transparent 68%);
  filter: blur(18px);
}
@media (prefers-reduced-motion: no-preference) {
  .cbp-book::before { animation: cbpAura 9s ease-in-out 0.6s infinite; }
}
@keyframes cbpAura {
  0%, 100% { opacity: 0.82; transform: scale(0.985); }
  50%      { opacity: 1;    transform: scale(1.015); }
}
.cbp-book img { filter: drop-shadow(0 30px 52px rgba(0, 0, 0, 0.66)); }

/* ---- 1D · MOBILE CONVERSION FLOW ----
   Below the two-column breakpoint the form sat beneath the whole left
   column, so a phone visitor scrolled past the book AND all three
   benefit cards before reaching it.

   `display: contents` promotes the content column's children into the
   grid itself, which lets the form be ordered between the book and the
   cards without duplicating markup or moving a single element in the
   HTML. The reading order becomes: eyebrow, headline, paragraph, book,
   FORM, then the three cards as supporting evidence underneath.
   `.cbp-content` is a plain presentational div with no semantics of its
   own, so promoting it costs nothing in the accessibility tree. */
@media (max-width: 1024px) {
  .cbp-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cbp-content { display: contents; }

  .cbp-eyebrow        { order: 1; }
  .cbp-h1             { order: 2; }
  .cbp-copy           { order: 3; margin-bottom: 26px; }
  .cbp-book           { order: 4; margin-bottom: 30px; }
  .cbp-form-panel     { order: 5; margin-bottom: 34px; }
  .cbp-benefits--lift { order: 6; }
}

/* ---- 1E · THE BENEFIT CARDS ----
   Dimensional surfaces rather than rows of text: a lit top edge, a
   deeper ground, and an icon tile with its own gradient rim. */
.cbp-benefits--lift { gap: 14px; }
.cbp-benefits--lift .cbp-benefit {
  position: relative;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(2, 193, 255, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(90, 216, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 46%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 30px -22px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
/* A single lit hairline along the top edge, fading out to both sides. */
.cbp-benefits--lift .cbp-benefit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(90, 216, 255, 0.5) 32%, rgba(175, 221, 44, 0.45) 68%, transparent 100%);
}
@media (hover: hover) {
  .cbp-benefits--lift .cbp-benefit:hover {
    border-color: rgba(90, 216, 255, 0.42);
    transform: translateY(-2px);
  }
}

/* The icon tile: a dimensional chip, not a flat outline. The icon inside
   it is the existing one, untouched. */
.cbp-benefits--lift .cbp-benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid transparent;
  background:
    linear-gradient(170deg, #0e2036 0%, #0a1728 100%) padding-box,
    linear-gradient(150deg, rgba(90, 216, 255, 0.85) 0%, rgba(68, 181, 156, 0.5) 52%, rgba(175, 221, 44, 0.75) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -6px 14px -8px rgba(2, 193, 255, 0.5),
    0 6px 16px -10px rgba(2, 193, 255, 0.7);
}
.cbp-benefits--lift .cbp-benefit-icon svg { width: 20px; height: 20px; }

/* One line per heading, with the gradient clipping to the words. The
   solid colour is declared first so a browser without background-clip
   still shows white type. */
.cbp-benefit-title {
  white-space: nowrap;
  font-size: clamp(0.9375rem, 1.25vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--white);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cbp-benefit-title {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(94deg, #ffffff 0%, #d8ecff 46%, #a9e6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    padding-bottom: 0.12em;
    margin-bottom: calc(5px - 0.12em);
  }
}
.cbp-benefits--lift .cbp-benefit p {
  color: #a4b8d6;
  font-size: 0.9375rem;
}

/* Below this the row cannot hold an icon beside a one-line heading, so
   the tile moves above the text and the heading takes the card's full
   width. That is what keeps every heading on one line down to 320. */
@media (max-width: 440px) {
  .cbp-benefits--lift .cbp-benefit {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 18px;
  }
  .cbp-benefit-title { font-size: clamp(0.875rem, 4.1vw, 1.0625rem); }
}

/* ---- 1F · THE FORM CARD ----
   A stronger brand rim, plus a breathing edge light behind the card.
   The panel's padding, the embed wrapper and the iframe are untouched. */
.cbp-form-panel {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(150deg, #5ad8ff 0%, #44b59c 46%, var(--lime-400) 100%) border-box;
  box-shadow: var(--shadow-card);
}
/* THE EDGE LIGHT IS A BOX-SHADOW, NOT A PSEUDO-ELEMENT.
   A blurred ::before at z-index:-1 painted straight OVER the card's white
   background here: the panel carries .reveal, and the reveal machinery
   gives it a stacking context, which traps a negative-z-index child above
   the parent's own background instead of behind it. Proved by A/B -
   disabling the pseudo restored the white card.

   A box-shadow is drawn outside the border box by definition, so it can
   never cover the card no matter what the stacking context does. Three
   layers give the same depth the pseudo was reaching for. */
.cbp-form-panel {
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(90, 216, 255, 0.18),
    0 0 34px -6px rgba(68, 181, 156, 0.5),
    0 0 72px -10px rgba(2, 193, 255, 0.34);
}
@media (prefers-reduced-motion: no-preference) {
  .cbp-form-panel { animation: cbpCardEdge 8s ease-in-out 0.8s infinite; }
}
@keyframes cbpCardEdge {
  0%, 100% {
    box-shadow:
      var(--shadow-card),
      0 0 0 1px rgba(90, 216, 255, 0.14),
      0 0 28px -8px rgba(68, 181, 156, 0.4),
      0 0 60px -12px rgba(2, 193, 255, 0.26);
  }
  50% {
    box-shadow:
      var(--shadow-card),
      0 0 0 1px rgba(90, 216, 255, 0.26),
      0 0 40px -4px rgba(68, 181, 156, 0.62),
      0 0 86px -8px rgba(2, 193, 255, 0.44);
  }
}
.cbp-form-title {
  font-size: clamp(1.75rem, 2.9vw, 2.375rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.cbp-form-badge { margin-bottom: 16px; }

/* ---- 1G · EDUCATION FIRST, ALWAYS ---- */
.cbp-cont-title {
  font-size: clamp(2.375rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.cbp-cont-title .cbp-grad {
  background-image: linear-gradient(96deg, #6fdeff 0%, #9fe06a 55%, #c3e64a 100%);
}
.cbp-cont-lede {
  color: #c4d4ea;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

/* ===================================================================
   2 · THANK-YOU PAGE
   =================================================================== */

/* ---- 2C · THE SUCCESS EMBLEM ----
   An elevated ring rather than a flat circle: a gradient rim, a lit
   inner bevel, a cast shadow beneath, and one soft pool of light that
   breathes behind it. */
.cbp-ty-icon {
  width: 86px;
  height: 86px;
  margin-bottom: 30px;
  border-width: 2px;
  position: relative;
  background:
    linear-gradient(168deg, #11263f 0%, #0a1628 62%) padding-box,
    linear-gradient(140deg, #7ce4ff 0%, #44b59c 44%, var(--lime-400) 100%) border-box;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -14px 26px -14px rgba(90, 216, 255, 0.65),
    0 18px 42px -18px rgba(68, 181, 156, 0.85);
}
.cbp-ty-icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 3;
  filter: drop-shadow(0 2px 8px rgba(175, 221, 44, 0.55));
}
.cbp-ty-icon::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -16px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(90, 216, 255, 0.28) 0%, transparent 68%);
  filter: blur(14px);
}
@media (prefers-reduced-motion: no-preference) {
  .cbp-ty-icon::after { animation: cbpMarkHalo 7s ease-in-out 1s infinite; }
}
@keyframes cbpMarkHalo {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---- 2A · HERO PRESENCE ---- */
.cbp-ty-headline { letter-spacing: -0.015em; }
.cbp-ty-hero .page-hero-bg {
  background:
    radial-gradient(640px 360px at 50% 12%, rgba(90, 216, 255, 0.20) 0%, transparent 66%),
    radial-gradient(1000px 540px at 50% 0%, rgba(68, 181, 156, 0.12) 0%, transparent 72%),
    radial-gradient(ellipse at 30% 52%, rgba(10, 45, 194, 0.3) 0%, transparent 62%);
}

/* ---- 2B · THE TWO SUPPORT LINES, ONE LINE EACH ----
   The longer line is 60 characters. Held on one line it scales with the
   viewport; below the width where that would drop under a readable size
   it wraps to a balanced two lines instead. The breakpoint is measured,
   not guessed: see the report. */
.cbp-ty-lede,
.cbp-ty-sub {
  max-width: none;
  white-space: nowrap;
}
.cbp-ty-lede {
  font-size: clamp(1.0625rem, 2.55vw, 1.4375rem);
  font-weight: 600;
  color: var(--white);
}
.cbp-ty-sub {
  margin-top: 10px;
  font-size: clamp(0.9375rem, 1.95vw, 1.125rem);
  color: #b4c6e0;
}
@media (max-width: 559.98px) {
  /* Measured, not guessed: the 60-character line needs roughly 440px of
     text width to sit on one line at a readable 15px. Held past that it
     overflowed its own box and was clipped. Below 560 it wraps on a
     balanced break instead of shrinking out of comfort. */
  .cbp-ty-lede,
  .cbp-ty-sub {
    white-space: normal;
    text-wrap: balance;
    max-width: 30ch;
    margin-inline: auto;
  }
  .cbp-ty-sub { max-width: 34ch; }
}

/* ---- 2D · THE NEXT-STEP SECTION ---- */
.cbp-ty-next-title {
  font-size: clamp(2.375rem, 4.4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.cbp-ty-next-lede {
  color: #c4d4ea;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

/* ===================================================================
   3 · THE CTA FAMILY ON BOTH PAGES
   =================================================================== */
.cbp-ty-btn {
  --edge-o: 0.5;
  font-weight: 800;
}
.cbp-ty-btn.btn-secondary { --edge-o: 0.36; }
.cbp-ty-btn:hover { --edge-o: 0.72; }
.cbp-ty-btn.btn-secondary:hover { --edge-o: 0.56; }
.cbp-ty-btn::after { inset: -4px; filter: blur(11px); }
.cbp-ty-btn.btn-primary {
  background-image: linear-gradient(100deg, #d2ef5c 0%, var(--lime-400) 34%, var(--green-600) 88%);
  box-shadow: 0 14px 34px -14px rgba(175, 221, 44, 0.8);
}

/* ===================================================================
   4 · MOBILE FOOTER
   =================================================================== */
@media (max-width: 768px) {
  /* The mark was reading as a thumbnail. */
  .footer-logo img { height: 62px; }

  /* The brand line is the footer's voice: larger, tighter, and held to
     roughly two lines by its measure rather than left to run to four. */
  .footer-tagline {
    font-size: 1.375rem;
    line-height: 1.35;
    max-width: 22ch;
    color: var(--white);
    margin-inline: auto;
  }

  /* The follow buttons read as real controls: a gradient rim over a
     deeper ground, with the icon lifted off muted grey. */
  .footer-social { gap: 12px; margin-top: 10px; }
  .footer-social .social-btn {
    width: 46px;
    height: 46px;
    border: 1px solid transparent;
    border-radius: 13px;
    background:
      linear-gradient(170deg, #0e2036 0%, #0a1728 100%) padding-box,
      linear-gradient(150deg, rgba(90, 216, 255, 0.8) 0%, rgba(68, 181, 156, 0.45) 52%, rgba(175, 221, 44, 0.7) 100%) border-box;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 8px 18px -12px rgba(2, 193, 255, 0.8);
    color: var(--white);
  }
  .footer-social .social-btn svg { width: 19px; height: 19px; }

  .footer-brand { gap: 16px; }
  .footer-grid { gap: 24px 20px; }
}

/* ===================================================================
   REVEALED ELEMENTS MUST STOP BEING STACKING CONTEXTS
   ===================================================================
   The scroll-reveal machinery animates `filter` from blur(6px) to
   blur(0px). `blur(0px)` is NOT `none`: it still makes the element a
   stacking context, which traps a z-index:-1 pseudo-element ABOVE the
   element's own background instead of behind it. On the Blueprint
   landing page that put the CTA's gradient edge light over the button's
   own face, exactly as it had on the form card.

   Clearing the filter once the reveal has finished costs nothing
   visually (blur(0px) and none render identically) and restores normal
   painting order. Scoped to the Blueprint CTAs so no other revealed
   element on the site changes behaviour.
   =================================================================== */
/* BOTH properties have to go. The reveal animates transform from
   translateY(14px) to translateY(0), which computes to
   matrix(1,0,0,1,0,0) - not `none` - and a transform creates a stacking
   context just as a filter does. Clearing the pair after the reveal has
   landed is visually identical and restores normal painting. */
.cbp-ty-btn.revealed {
  filter: none;
  transform: none;
}

/* ===================================================================
   BLUEPRINT HERO — HEADLINE PROMINENCE AND MEASURE
   ===================================================================
   The previous implementation sized the headline against the column it
   was given rather than fixing the column, and the column was cramped:

     viewport 1700 -> container 1200 -> grid 1104 -> content track 519px
     viewport 1440 -> container 1200 -> grid 1104 -> content track 532px

   The 500px form track plus an 88px gap consumed the rest, so a 46px
   ceiling was the largest that held "Understand Your Credit" on one
   line. That is a section subheading, not a lead-magnet hero.

   On mobile it was worse. `.cbp-grid` carries `align-items: start`,
   which in the mobile flex column makes every child shrink to its own
   content width AND pack to the left: the headline rendered 220px wide
   inside a 358px container, pinned at its 24px floor and visibly
   off-centre. That is the inherited left offset.

   The fix is layout, not type: give the hero a wider container, let the
   headline use the track it is in, stretch the mobile children to the
   full measure, and only then raise the size.
   =================================================================== */

/* ---- Desktop: a wider hero container ----
   1340px instead of the sitewide 1200. The form column keeps its full
   500px; the extra width goes to the content track, which grows from
   519/532px to roughly 650px. The headline never crosses into the form
   column: the grid track boundary is unchanged. */
@media (min-width: 1025px) {
  .cbp-hero .container { max-width: 1340px; }
  .cbp-hero .cbp-content { max-width: 100%; }
  /* The paragraph keeps a readable measure in the wider track rather
     than running the full width. */
  .cbp-hero .cbp-copy { max-width: 48ch; }
}

/* ---- Mobile: stretch, centre, and only then size ----
   `align-items: start` is what both shrank and left-aligned the hero
   children. Stretching them gives the headline the whole container and
   lets text-align: center actually centre it. */
@media (max-width: 1024px) {
  .cbp-grid { align-items: stretch; }
  .cbp-eyebrow,
  .cbp-h1,
  .cbp-copy {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
  .cbp-copy { max-width: 46ch; margin-inline: auto; }
}

/* ---- The size, measured against the width the headline now has ----
   "Understand Your Credit" measures 421px at 46px, so it scales at
   about 9.15px of width per px of font. Ceilings below are the largest
   that still clear the track at each step, confirmed by measurement:

     1700/1440  track ~650px  ->  64px needs 586px   fits
     1280       track ~596px  ->  60px needs 549px   fits
     1024       container 1024, single column, full width available
     430        398px         ->  40px needs 366px   fits
     390        358px         ->  36px needs 330px   fits
     360        328px         ->  34px needs 311px   fits
     320        288px         ->  30px needs 275px   fits                */
.cbp-h1 {
  font-size: clamp(1.875rem, 9.2vw, 2.5rem);
  line-height: 1.07;
  letter-spacing: -0.015em;
}
@media (min-width: 768px) {
  .cbp-h1 { font-size: clamp(2.5rem, 4.4vw, 3rem); }
}
@media (min-width: 1025px) {
  /* 4.1vw puts 1280 at 52.5px, the bottom of the target band, while the
     4rem ceiling still holds 1700 at 64px. Checked against the track at
     both ends: 52.5px needs 481px of a 620px track, 64px needs 586px of
     659px. */
  .cbp-h1 { font-size: clamp(3rem, 4.1vw, 4rem); }
}

/* ===================================================================
   PROGRAM CTA SECTION  +  BLUEPRINT HEADLINE HIERARCHY
   ===================================================================
   Appended, so every earlier block survives. Motion policy unchanged:
   opacity/transform breaths on decorative pseudo-elements only, gated
   on prefers-reduced-motion, resting state is the rule's own value,
   nothing animates on live text.
   =================================================================== */

/* ---- 1 · THE HERO HEADLINE MUST LEAD ON MOBILE ----
   Measured before changing anything: at 390 the thank-you hero headline
   rendered 29.64px while the section headline below it rendered 38px.
   The hero was literally smaller than the band it is supposed to
   dominate, which is what made it feel like it was competing.

   The old size came from forcing the two-line break ("Your Credit
   Blueprint" / "Is on Its Way!"). That break is kept; the size is
   raised to the largest that still holds it, which now clears the
   section headline below at every width. */
@media (max-width: 760px) {
  .cbp-ty-headline {
    font-size: clamp(2rem, 10.2vw, 2.75rem);
    line-height: 1.06;
  }
}
/* The eyebrow stays a quiet label so it cannot compete with the above. */
.cbp-ty-hero-content .section-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  opacity: 0.95;
}

/* ---- 2 · THE PROGRAM CTA SECTION ----
   A contained, bordered surface, deliberately unlike the full-bleed
   Learning Center band beneath it: same family, clearly a different
   offer. `.page-hero + section { padding-top: 0 }` strips the top
   padding from whatever follows a hero, so this beats it on
   specificity, two classes against a class and a type. */
.page-hero + .cbp-prog,
.cbp-prog {
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0;
  overflow: hidden;
}
.cbp-prog-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(2, 193, 255, 0.08) 0%, transparent 70%),
    radial-gradient(700px 380px at 82% 100%, rgba(175, 221, 44, 0.05) 0%, transparent 68%);
}
/* The lit seam the rest of the page system uses. */
.cbp-prog::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(90, 216, 255, 0.45) 30%,
    rgba(175, 221, 44, 0.45) 70%, transparent 100%);
}

.cbp-prog-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 52px) clamp(24px, 3.4vw, 56px);
  text-align: center;
  border: 1px solid rgba(2, 193, 255, 0.18);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(90, 216, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 48%, rgba(0, 0, 0, 0.16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 26px 60px -34px rgba(0, 0, 0, 0.95);
}

.cbp-prog-eyebrow {
  justify-content: center;
  margin-bottom: 18px;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--sky-300);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cbp-prog-eyebrow {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(96deg, #5ad8ff 0%, var(--lime-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.cbp-prog-eyebrow::before,
.cbp-prog-eyebrow::after { opacity: 1; height: 2px; transform: scaleX(1); }

.cbp-prog-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.9vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}
.cbp-prog-title .cbp-grad {
  background-image: linear-gradient(96deg, #6fdeff 0%, #58cfae 48%, #c3e64a 100%);
}
.cbp-prog-lede {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  color: #c4d4ea;
}
.cbp-prog-btn { margin-top: clamp(28px, 3.4vw, 38px); }

@media (max-width: 480px) {
  .cbp-prog-btn { width: 100%; justify-content: center; }
}

/* ===================================================================
   BLUEPRINT HEADLINE LADDER
   ===================================================================
   The hero must lead its page at EVERY width. Raising the hero alone
   could not achieve that at 320/360, because the hero is capped by the
   two-line break it has to hold. So the sections beneath it come down
   instead, which is the correct fix anyway: a section heading should
   never rival the page's own headline.

   Intended order on both pages, at every width:
       hero headline  >  program CTA headline  >  Learning Center
       section headline  >  body copy

   The two pages need separate ladders because their heroes differ: the
   thank-you hero reaches 88px at 1440 while the landing hero, sharing
   its row with the form, reaches 59px.
   =================================================================== */

/* ---- Program CTA headline: second in the ladder ---- */
.cbp-prog-title { font-size: clamp(1.875rem, 3.6vw, 3.125rem); }
@media (max-width: 760px) {
  .cbp-prog-title { font-size: clamp(1.625rem, 6.8vw, 2.25rem); }
}

/* ---- Thank-you: Learning Center band sits under the program CTA ---- */
.cbp-ty-next-title { font-size: clamp(1.875rem, 3.3vw, 2.875rem); }
@media (max-width: 760px) {
  .cbp-ty-next-title { font-size: clamp(1.5rem, 6.1vw, 2rem); }
}

/* ---- Landing: the hero is smaller here, so the ladder is lower ----
   Two classes, because `.cbp-continuation h2` is (0,1,1) and outranks a
   single-class rule no matter how late it appears. That rule is what was
   holding this headline at 54px against a 59px hero. */
.cbp-continuation .cbp-cont-title { font-size: clamp(1.75rem, 2.9vw, 2.625rem); }
@media (max-width: 760px) {
  .cbp-continuation .cbp-cont-title { font-size: clamp(1.5rem, 5.8vw, 1.875rem); }
}

/* ---- The program eyebrow holds one line ----
   "READY FOR THE NEXT STEP" is longer than the other eyebrows on these
   pages, so at phone widths it wrapped and left its two decorative
   rules stranded on the first line. Same remedy used for the hero
   eyebrow: the tracking tightens before the type does, and the rules
   shorten at the narrowest widths rather than pushing the words over. */
@media (max-width: 560px) {
  .cbp-prog-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .cbp-prog-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }
  .cbp-prog-eyebrow::before,
  .cbp-prog-eyebrow::after { width: 16px; }
}

/* ---- Two corrections found by measurement ----

   1. The hero eyebrow's narrow-width treatment was silently killed. The
      unconditional rule added above sits AFTER the @media (max-width:
      376px) rule at line 40152 at equal specificity, and a media query
      adds no specificity, so the later rule won and the eyebrow kept
      12px / 2.4px tracking at 320. "YOU'RE ONE STEP CLOSER" then broke
      after "STEP", stranding "CLOSER" on a second line with both
      decorative rules left beside the first. Restated here, after the
      rule that was overriding it.

   2. The program CTA accent was the only gradient phrase on either page
      that fragmented: 2 pieces at seven widths and 3 at 320, against 1
      everywhere for every other accent. Both hero accents already carry
      nowrap; this one did not. Measured: the phrase is 192px inside a
      230px measure at 320, so holding it whole fits.                    */
@media (max-width: 376px) {
  .cbp-ty-hero-content .section-label {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}
.cbp-prog-title .cbp-grad { white-space: nowrap; }

/* ---- The program headline stacks as two controlled lines ----
   The long wording could not keep its accent whole: allowed to wrap it
   fragmented at eight of ten widths, and held with nowrap it clipped at
   375 and below, where the panel gives the accent about 240px against
   the 348px a 29-character phrase needs at 26px. The brief's cleaner
   wording is used instead, and the break is controlled rather than left
   to chance, so the accent is always one whole piece on its own line. */
.cbp-prog-line { display: block; }

/* ===================================================================
   ONE SHARED CONTINUATION AREA  ·  BOTH BLUEPRINT PAGES
   ===================================================================
   Replaces the two stacked full-width bands (the program CTA and the
   Learning Center CTA) with a single section holding two cards: the
   paid program on the left, the free Learning Center on the right.

   Appended, so every earlier block survives byte-for-byte. The rules
   for .cbp-prog, .cbp-ty-next and .cbp-continuation are left in place
   above; those classes no longer appear in any page, so they match
   nothing and contribute no spacing.

   Motion policy unchanged: opacity breathing on a decorative
   pseudo-element only, gated on prefers-reduced-motion, resting state
   is the rule's own value, nothing animates on live text. No .reveal
   classes here, so every word is present with JavaScript disabled.
   =================================================================== */

/* ---- Section shell ----
   `.page-hero + section { padding-top: 0 }` (line 1267) is (0,1,1) and
   would strip the top padding on both pages, where this section follows
   the hero directly. Two classes beat it. The generous top padding is
   the brief's "breathing room above the shared continuation area". */
.page-hero + .cbp-next,
.cbp-next {
  position: relative;
  padding: clamp(64px, 7.4vw, 108px) 0 clamp(76px, 8.2vw, 124px);
  overflow: hidden;
}
.cbp-next-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 440px at 26% 0%, rgba(2, 193, 255, 0.075) 0%, transparent 70%),
    radial-gradient(900px 420px at 80% 100%, rgba(175, 221, 44, 0.055) 0%, transparent 68%);
}
/* The lit seam the rest of the page system uses to open a section. */
.cbp-next::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(90, 216, 255, 0.45) 30%,
    rgba(175, 221, 44, 0.45) 70%, transparent 100%);
}
.cbp-next > .container { position: relative; z-index: 1; }

/* Measured: at the 1200px site container each card gets a 448px text
   measure, which caps the program headline near 34px. Widening the
   container only on screens that have the room lifts that to 516px and
   lets the headline reach 40px without crowding either card. */
@media (min-width: 1400px) {
  .cbp-next > .container { max-width: 1340px; }
}

/* ---- The two cards ----
   Stacked below 1024, side by side above it. Measured at 1024: each
   card still gets a 397px measure, enough for the full program name at
   30px, so 1024 keeps two columns rather than dropping to one. */
.cbp-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 5vw, 34px);
}
@media (min-width: 1024px) {
  .cbp-next-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(26px, 2.8vw, 40px);
    align-items: stretch;
  }
}

/* Each card is a navy interior inside a two-ring edge: its own 1px
   gradient border plus the animated ring below at inset -1px. Two
   concentric rings read as a dimensional edge rather than a flat line.
   The outer glow is a box-shadow, which is painted outside the border
   box by definition and so cannot be clipped by a stacking context,
   the failure that cost two passes on the form card. */
.cbp-next-card {
  --rim-o: 0.46;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(30px, 2.8vw, 46px) clamp(22px, 2.4vw, 42px) clamp(32px, 3vw, 48px);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(168deg, #102444 0%, #0a1830 54%, #070f20 100%) padding-box,
    linear-gradient(150deg, var(--rim-a) 0%, rgba(68, 181, 156, 0.38) 52%, var(--rim-b) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 30px 70px -42px rgba(0, 0, 0, 0.95),
    0 0 44px -14px var(--wash);
}
/* Same system, slightly different emphasis: the program leans cyan,
   the free Learning Center leans lime. */
.cbp-next-card--program {
  --rim-a: rgba(90, 216, 255, 0.85);
  --rim-b: rgba(175, 221, 44, 0.55);
  --wash: rgba(2, 193, 255, 0.3);
}
.cbp-next-card--learn {
  --rim-a: rgba(175, 221, 44, 0.78);
  --rim-b: rgba(90, 216, 255, 0.6);
  --wash: rgba(175, 221, 44, 0.26);
}

/* The animated ring. Its padding box is transparent, so it paints only
   on its own 1px band just outside the card edge and never over the
   copy, whatever the stacking order. */
.cbp-next-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-xl) + 1px);
  pointer-events: none;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(140deg, var(--rim-a) 0%, var(--rim-b) 100%) border-box;
  opacity: var(--rim-o);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .cbp-next-card::after {
    animation: cbpNextRim 9s cubic-bezier(0.4, 0, 0.2, 1) 1s infinite;
  }
}
/* Relative to --rim-o, so each card breathes around its own resting
   value instead of a shared constant. */
@keyframes cbpNextRim {
  0%, 100% { opacity: calc(var(--rim-o) - 0.12); }
  50%      { opacity: calc(var(--rim-o) + 0.1); }
}
/* Hover stops the breath so the author value can win the cascade:
   animations sit in a higher cascade origin than normal author rules. */
.cbp-next-card:hover { --rim-o: 0.72; }
.cbp-next-card:hover::after { animation: none; }

/* ---- Eyebrows ----
   Two labels of equal weight, so the cards read as a matched pair.
   .section-label::before / ::after ship at scaleX(0) and are restored
   only by .revealed, which main.js adds on scroll; this section carries
   no .reveal, so the ornament is restored here instead. */
.cbp-next-eyebrow {
  justify-content: center;
  margin-bottom: 16px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--sky-300);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cbp-next-eyebrow {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(96deg, #5ad8ff 0%, var(--lime-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.cbp-next-eyebrow::before,
.cbp-next-eyebrow::after {
  width: 26px;
  height: 2px;
  opacity: 1;
  transform: scaleX(1);
}

/* ---- Headlines ----
   Sized against the measured card width, not guessed. The desktop
   figure holds "Financial Strategy Program" on one line inside the
   narrower 1024-1399 card; the mobile figure holds the longest line of
   the three-line stack inside a 320px phone. Both stay below the hero
   headline on each page at every width, so neither card competes with
   the page's own headline. */
.cbp-next-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.625rem, 4.6vw, 2.375rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .cbp-next-title { font-size: clamp(1.875rem, 2.6vw, 2.5rem); }
}
/* The accent wraps freely. The brief is explicit that a long gradient
   span must not be forced onto one unbreakable line, and with the
   default box-decoration-break: slice each fragment shows its own slice
   of one continuous gradient rather than restarting it. */
.cbp-next-title .cbp-grad { white-space: normal; }
.cbp-next-card--program .cbp-next-accent {
  background-image: linear-gradient(96deg, #6fdeff 0%, #58cfae 46%, #c3e64a 100%);
}

/* The preferred desktop composition is two balanced lines:
       Explore Our Credit and
       Financial Strategy Program
   A forced break makes that deterministic instead of leaving it to the
   balancer. Below 1024 the break is dropped and the headline finds its
   own balanced three-line stack on a phone. */
@media (max-width: 1023px) {
  .cbp-next-brk { display: none; }
}

/* ---- Supporting copy: concise and clearly under the headline ---- */
.cbp-next-lede {
  max-width: 44ch;
  margin: 16px auto clamp(26px, 2.6vw, 36px);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.62;
  color: #c4d4ea;
}

/* ---- One CTA per card, pinned to the card foot ----
   margin-top: auto with stretched grid items puts both buttons on the
   same baseline however the two headlines wrap. */
.cbp-next-btn { margin-top: auto; }
@media (max-width: 1023px) {
  .cbp-next-btn {
    width: 100%;
    max-width: 430px;
    justify-content: center;
  }
}

/* ---- Narrow phones ----
   "READY FOR THE NEXT STEP" is the longest eyebrow on either page, so
   the tracking tightens before the type does and the ornament shortens
   rather than pushing the words onto a second line. The CTA labels step
   down with it so each stays on one line instead of the card growing. */
@media (max-width: 560px) {
  .cbp-next-eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .cbp-next-eyebrow::before,
  .cbp-next-eyebrow::after { width: 20px; }
}
@media (max-width: 400px) {
  .cbp-next-card { padding-left: 18px; padding-right: 18px; }
  .cbp-next-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.07em;
  }
  .cbp-next-eyebrow::before,
  .cbp-next-eyebrow::after { width: 14px; }
  .cbp-next-btn { font-size: 0.8125rem; letter-spacing: 0.01em; }
}

/* ===================================================================
   MOBILE FOOTER  ·  THE BRAND STATEMENT NEEDS A WIDER MEASURE
   ===================================================================
   Measured before changing anything: the 22ch measure set at line 41171
   broke the statement into four lines on every phone width. The wording
   is 87 characters, so three balanced lines need roughly 29 characters
   each; a 34ch measure gives the line that room while the container
   padding still keeps the text clear of the screen edge.

   The type is not reduced: 1.375rem / 22px from the block above stands.
   text-wrap: balance evens the three lines out, and where it is not
   supported the measure alone still produces three. At 320px the screen
   itself is the limit rather than the measure, so a fourth line there is
   expected and legible, which the brief allows.
   =================================================================== */
@media (max-width: 768px) {
  .footer-tagline {
    max-width: min(34ch, 100%);
    text-wrap: balance;
  }
}

/* ===================================================================
   SHARED CONTINUATION AREA  ·  THREE CORRECTIONS FOUND BY MEASUREMENT
   =================================================================== */

/* ---- 1 · The two tracks were not equal at 1024 ----
   Measured: 472.81px against 457.70px, and the pair overflowed the
   container's 928px content box by 31px, hidden only because the
   section carries overflow: hidden.

   Cause: `.btn` is `white-space: nowrap`, so each button's min-content
   is its whole label, and `1fr` is `minmax(auto, 1fr)` - a track never
   shrinks below its item's min-content. The two labels differ by 15px,
   so the tracks did too, and both were wider than their share.

   Fixed at the root: minmax(0, 1fr) lets a track take its share even
   when an item would prefer more, and the labels are allowed to wrap
   so their min-content stops driving the layout at all. */
@media (min-width: 1024px) {
  .cbp-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* With equal tracks a 1024px screen gives each card a 400px text
   measure, and the full-size label needs 422px. A step down in size and
   tracking keeps both labels on one line there rather than growing the
   cards or wrapping the text. Measured after the step: 374px.
   Above 1200 the cards have 478px and the labels stay full size. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .cbp-next-btn {
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* A safety net, not the fix: if a future label or font makes a button
   wider than its card, it wraps centred instead of spilling out. */
@media (min-width: 1024px) {
  .cbp-next-btn { white-space: normal; text-align: center; line-height: 1.2; }
}

/* ---- 2 · The headlines were leaving a third of the card unused ----
   Measured available text width against the real natural width of the
   longest line, "Financial Strategy Program":

       1700   520px measure   412px at 40px     room for 50px
       1440   533px measure   386px at 37.4px   room for 51px
       1280   473px measure   343px at 33.3px   room for 46px
       1024   400px measure   309px at 30px     room for 39px

   So the first pass was sized well under what the cards can hold. The
   figures below take about 90% of the measure at every desktop width,
   which keeps a margin for a font fallback instead of sitting on the
   limit.

   The ceiling is set by the 26-character second line, and 22/26 is the
   most even two-line split of the full name, so this is the largest the
   full program name can be in a half-width card. It is smaller than the
   50px the short name reached across a full-width band; that is the
   cost of the side-by-side layout and the full name together, and it is
   the brief's own stated preference.

   The tablet tier exists because the landing hero is only 40px at
   768px: without it a 768px card headline would overtake the hero of
   the page it sits on. */
.cbp-next-title { font-size: clamp(1.625rem, 6.6vw, 2rem); }
@media (min-width: 768px) {
  .cbp-next-title { font-size: clamp(2rem, 4.4vw, 2.125rem); }
}
@media (min-width: 1024px) {
  .cbp-next-title { font-size: clamp(1.875rem, 3.05vw, 2.875rem); }
}

/* ---- 3 · The footer measure overshot ----
   34ch produced two lines of 43 characters at 375 to 430, which runs
   almost to the screen edge. The brief asks for three balanced lines,
   so the measure comes back to 26ch: 87 characters over roughly 29 per
   line. The type is untouched. */
@media (max-width: 768px) {
  .footer-tagline { max-width: min(26ch, 100%); }
}

/* ===================================================================
   SHARED CONTINUATION AREA  ·  CTA LABELS ON PHONES
   ===================================================================
   The sitewide `.btn` is nowrap, but line 1803 relaxes that to
   `white-space: normal` on small screens, so these 32-character labels
   were wrapping. Measured at 390: the label needs 337px and the card
   gives it 312px, and it broke as "See How Our Credit Program" with
   "Works" orphaned on a second line.

   The brief asks for a responsive type adjustment rather than a smaller
   card, so the geometry tightens instead. Measured after the change:
   the label needs 276px, which holds one line from 356px upward.

   Below 356px one line is not reachable without type too small to read:
   at 320 the card offers a 182px text box against the 214px the label
   needs even at 12px. So the narrowest phones keep the larger 13px type
   and take a deliberate two-line break, which measures as
   "See How Our Credit / Program Works" and "Explore Our Free /
   Learning Center" - two balanced pairs, no orphaned word.
   =================================================================== */
@media (max-width: 1023px) {
  .cbp-next-btn { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 356px) and (max-width: 430px) {
  .cbp-next-btn {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
}

/* ===================================================================
   SHARED CONTINUATION AREA  ·  CTA LABELS, CORRECTED BY MEASUREMENT
   ===================================================================
   The 12px step above was not enough, and nothing reasonable would be.
   Measured natural label width against the real text box inside the
   button, per width:

       430   text box 277   label 260   one line needs 12.8px
       390   text box 248   label 260   one line needs 11.4px
       375   text box 233   label 260   one line needs 10.8px
       360   text box 218   label 260   one line needs 10.1px

   Below about 400px one line is only reachable at 10 to 11px, smaller
   than any button on the site, so these labels take two lines on a
   phone. What was wrong was the break, not the line count: left to the
   wrapper it filled line one and orphaned "Works" and "Center" alone on
   line two. A placed break splits each label evenly instead:

       See How Our Credit / Program Works
       Explore Our Free / Learning Center

   The type goes back up to 13px, the size the site already uses for
   .btn-sm, and the line box opens so the two lines do not touch. Above
   430px the break is suppressed and the label is one line at full size.
   =================================================================== */
@media (min-width: 431px) {
  .cbp-next-btn-brk { display: none; }
}
@media (max-width: 430px) {
  .cbp-next-btn {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    line-height: 1.32;
  }
}

/* ===================================================================
   CARD RIM  ·  THE RING WAS WASHING THE WHOLE CARD
   ===================================================================
   Found in the first review screenshot: both card interiors rendered a
   green and teal wash instead of deep navy, and the tint lay over the
   copy as well.

   My mistake, and it is worth recording. The ring used the two-layer
   trick
       background: linear-gradient(transparent,transparent) padding-box,
                   linear-gradient(...) border-box;
   That only produces a ring when the TOP layer is opaque: clipping a
   layer to the padding box limits where that layer paints, it does not
   mask the layer beneath it. With a transparent top layer the border-box
   gradient simply painted across the entire card at 0.46 opacity, and
   the lime-led variant read as olive.

   The ring is now made the same way the approved button glow is made:
   a full gradient rectangle one pixel larger than the card, sent behind
   the card with z-index: -1. The card's own background is opaque, so
   only the 1px halo around it shows. No mask, no clip, nothing that can
   paint over the copy.

   z-index: -1 works here for the same reason it works on the buttons:
   .cbp-next-card is position: relative with z-index auto and carries no
   filter, transform or isolation, so it is not a stacking context, and
   the pseudo-element falls behind the card's background rather than
   being trapped above it.
   =================================================================== */
.cbp-next-card::after {
  z-index: -1;
  padding: 0;
  background: linear-gradient(140deg, var(--rim-a) 0%, var(--rim-b) 100%);
}

/* ===================================================================
   SPANISH CREDIT BLUEPRINT  ·  /es/credit-blueprint/
   ===================================================================
   The two Spanish pages reuse the approved English components without
   changing a single English rule. Everything here is either a new class
   that exists only on those pages, or a rule scoped to body.es-page.

   Spanish runs roughly 20 to 30 per cent longer than English, so the
   work is line structure, not type size: the strings get deliberate
   breaks and the approved sizes are kept.
   =================================================================== */

/* ---- Line breaks ----
   Two polarities, because the Spanish strings need breaks where the
   English ones do not:

     .es-brk       always breaks. Used where Spanish is long enough that
                   one line never fits at any width (the confirmation
                   headline, both CTA labels).
     .es-brk-wide  breaks everywhere except the narrowest phones, where
                   the segments themselves stop fitting and the balancer
                   does a better job than a fixed break.

   The English .cbp-next-brk has the opposite polarity (it breaks only
   from 1024px up), so it cannot be reused here. */
@media (max-width: 340px) {
  .es-brk-wide { display: none; }
}

/* ---- The confirmation headline is three lines at every width ----
   Measured: "Tu Blueprint del Crédito Está en Camino!" is 40 characters
   against the English headline's 36, and the product name alone is 21.
   Held to two lines it would need 30px type at 390 against the 26px of
   the cards below it, which is the hierarchy failure the English pass
   fixed. Broken into three, the longest line is 15 characters, which
   holds the approved English size at every width: 88px at 1440 down to
   32.64px at 320.

   .cbp-ty-line is only display:block below 760px in the English rules,
   so above that the structure has to be restated here. */
.es-page .cbp-ty-line { display: block; }
.es-page .cbp-ty-headline .cbp-grad { white-space: nowrap; }

/* ---- CTA labels ----
   "EXPLORA NUESTRO CENTRO DE APRENDIZAJE GRATUITO" is 45 characters
   against the English 32, and needs 446px of text box where the widest
   card offers 439px, so it never holds one line. Both labels therefore
   carry a placed break at every width, and the line box has to open or
   the two lines touch: the sitewide .btn is line-height: 1. */
.es-page .cbp-next-btn { line-height: 1.26; }

/* ---- The English-resources disclosure ----
   Sits between the paragraph and the button rather than after it:
   .cbp-next-btn is pinned to the card foot with margin-top: auto, so a
   note below it would lift that card's button and break the CTA
   alignment the two cards are built to keep. */
.cbp-next-note {
  margin: 0 auto clamp(18px, 1.8vw, 24px);
  max-width: 34ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #8fa6c8;
}
/* The lede's own bottom margin would double up with the note's. */
.cbp-next-note + .cbp-next-btn { margin-top: auto; }
.cbp-next-card--learn .cbp-next-lede { margin-bottom: clamp(14px, 1.4vw, 18px); }

/* ---- Language switch ----
   One restrained control, in the navigation row and again in the mobile
   menu, pointing at the matching English page rather than at the home
   page: landing to landing, thank-you to thank-you. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid rgba(90, 216, 255, 0.35);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky-300);
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.lang-switch:hover {
  color: var(--white);
  border-color: var(--sky-400);
  background-color: rgba(2, 193, 255, 0.12);
}
.lang-switch:focus-visible {
  outline: 3px solid var(--lime-400);
  outline-offset: 3px;
}
.mobile-menu .lang-switch {
  align-self: center;
  margin-inline: auto;
  width: max-content;
}

/* ---- Footer note ----
   The site's other pages are English. Saying so once, quietly, is the
   same treatment the Spanish funnel gives its English-only documents. */
.footer-lang-note {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.footer-lang-note a { color: var(--sky-300); }
.footer-lang-note a:hover { color: var(--white); }

/* ===================================================================
   SPANISH PAGES  ·  THREE OVERFLOWS FOUND BY MEASUREMENT
   =================================================================== */

/* ---- 1 · The eyebrow was making the card wider than the page ----
   At 320 the cards measured 294.2px inside a 280px container: a 14px
   overflow, invisible only because .cbp-next carries overflow: hidden.

   Cause: "LISTO PARA DAR EL PRÓXIMO PASO" is 30 characters against the
   English eyebrow's 23, and the English rules hold eyebrows nowrap
   below 560px. Measured at 320: the text is 196px and the two
   decorative rules with their gaps add 60 more, for 256px against the
   244px the card can give. A grid track never shrinks below an item's
   min-content, so the card grew instead.

   Dropping the ornament below 341px returns 60px and leaves the text
   48px of room. The alternative, letting the eyebrow wrap, is the
   defect the English pass fixed: the two rules strand on line one. */
@media (max-width: 340px) {
  .es-page .cbp-next-eyebrow::before,
  .es-page .cbp-next-eyebrow::after { display: none; }
  .es-page .cbp-next-eyebrow { gap: 0; }
}

/* ---- 2 · The Learning Center label broke into four lines at 320 ----
   Measured: each half of the placed break needs about 200px and the
   button's text box offers 194px, so both halves wrapped again. A step
   down in size and padding gives the text box 190px against 180px of
   type, which holds the intended two lines. */
@media (max-width: 340px) {
  .es-page .cbp-next-btn {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---- 3 · The Spanish brand statement is longer ----
   97 characters against the English 87, so the 26ch measure that gives
   English three lines gives Spanish four. 30ch restores three, and the
   min() keeps it inside the screen at 320 where the viewport, not the
   measure, is the limit. Type unchanged at 22px. */
@media (max-width: 768px) {
  .es-page .footer-tagline { max-width: min(30ch, 100%); }
}

/* ===================================================================
   REGRESSION I CAUSED ON THE ENGLISH PAGES, AND THE FIX
   ===================================================================
   The Spanish block above tightened the Learning Center paragraph's
   bottom margin to make room for the English-resources note:

       .cbp-next-card--learn .cbp-next-lede { margin-bottom: ... }

   That selector is not scoped, so it hit the English pages too. I
   reasoned it was harmless because .cbp-next-btn carries margin-top:
   auto and would absorb the change. That is true only while the card
   is STRETCHED taller than its content, which is the side-by-side
   grid. Stacked, each card is exactly as tall as its content, the auto
   margin resolves to zero, and the change is real.

   Measured, English pages, before and after the Spanish work:

       width   card height delta      CTA bottom
       768     36.5 -> 48.5           340.58 -> 328.58
       430     24.3 -> 36.3           362.07 -> 350.07
       390      0   -> 12             379.66 -> 367.66
       320     52.38 -> 64.38         403.95 -> 391.95

   Twelve pixels off the approved English card at every stacked width;
   1700 through 1024 were untouched, which is why it did not show in
   the desktop rows. Restored below, and the tightening is now scoped
   to the Spanish pages, which are the only ones carrying the note. */
.cbp-next-card--learn .cbp-next-lede { margin-bottom: clamp(26px, 2.6vw, 36px); }
.es-page .cbp-next-card--learn .cbp-next-lede { margin-bottom: clamp(14px, 1.4vw, 18px); }

/* ===================================================================
   SPANISH REFINEMENT  ·  HEADER AND LINE STRUCTURE
   ===================================================================
   The two Spanish pages no longer carry a site navigation: the rest of
   the site is English, and a Spanish menu pointing at English pages
   implies a Spanish site that does not exist. What is left is the mark
   and one language control.

   The header keeps the .nav class deliberately. main.js does
       const nav = document.querySelector('.nav');
       window.addEventListener('scroll', () => nav.classList.add(...))
   with no null guard, so dropping the class would throw on every scroll
   event. The mobile-menu block beneath it IS guarded, so that markup
   could go. Nothing in the English pages changes: .nav-links, .nav-cta
   and .nav-toggle simply do not exist here.
   =================================================================== */
.es-header .nav-inner { gap: 16px; }
.es-header-lang { flex-shrink: 0; }

/* ---- One string, two compositions ----
   Spanish is long enough that the composition the brief asks for at
   desktop cannot hold at phone widths without type too small to read.
   Rather than duplicate the markup, the breaks switch over: the same
   sentence reads as two lines where there is room and three where there
   is not. Thresholds are set from the measurements below. */
@media (min-width: 470px) { .es-h-narrow { display: none; } }
@media (max-width: 469px) { .es-h-wide { display: none; } }
@media (min-width: 768px) { .es-h-ty { display: none; } }

/* ===================================================================
   SPANISH REFINEMENT  ·  HEADLINE SIZES, SET FROM MEASUREMENT
   ===================================================================
   Every figure below is the measured ceiling times about 0.93, so each
   headline sits near the edge of its measure with room for a font
   fallback instead of on the limit.

   Measured ceilings for the longest line of each composition (the
   number is the largest font size that still holds it on one line):

     landing hero, "Descubre Tus Próximos Pasos"
       1700 59.4   1440 60.6   1280 55.9   1024 83.7   768 62.3
        600 51.2    470 39.5    430 35.9    390 32.3   320 26.0

     thank-you hero, "Tu Blueprint del Crédito", with the content box
     widened from 760px (see below)
       1440 117.5  1024 99.2   768 73.9    600 57.7    470 45.2

     card headline, "Crédito y Estrategia Financiera"
       1700 43.7   1440 44.8   1280 39.7   1024 33.6   768 54.4
        600 41.7    470 31.8

   Two of those are why the sizes below are not simply "bigger
   everywhere": the new, longer hero line and the two-line card
   composition both cost measure.

   The landing hero at 1700 was ALREADY over its ceiling at 64px once
   the new line 2 landed (it needs 59.4), and so was the thank-you hero
   at 88px against its 81.2px ceiling. Both would have wrapped into a
   third line with the accent stranded. Those are corrections, not
   preferences.
   =================================================================== */

/* ---- The composition switches at 470px ----
   One threshold for all three headlines, so the page changes shape once
   rather than three times. Above it every headline reads as the two
   lines the brief specifies. Below it the two-line form would need
   24-30px type on the card headline and 26-32px on the heroes, which is
   body-copy size for a headline, so the same sentences take three lines
   and get LARGER type instead. */
@media (min-width: 470px) { .es-h-ty { display: none; } }

/* ---- Landing hero ---- */
@media (min-width: 1025px) {
  .es-page .cbp-h1 { font-size: clamp(3rem, 3.9vw, 3.5rem); }
}
@media (min-width: 470px) and (max-width: 1024px) {
  .es-page .cbp-h1 { font-size: clamp(2.25rem, 7.3vw, 3.5rem); }
}
@media (max-width: 469px) {
  .es-page .cbp-h1 { font-size: clamp(2rem, 10.8vw, 2.875rem); }
}

/* ---- Thank-you hero ----
   The 760px content box is what held this headline to 88px. The
   confirmation is a full-width centred hero with nothing beside it, so
   the box can open up; the measure, not the box, then sets the size. */
.es-page .cbp-ty-hero-content { max-width: 1100px; }
.es-page .cbp-ty-headline { max-width: none; }
@media (min-width: 1025px) {
  .es-page .cbp-ty-headline { font-size: clamp(4rem, 7.2vw, 6.5rem); }
}
@media (min-width: 470px) and (max-width: 1024px) {
  .es-page .cbp-ty-headline { font-size: clamp(2.625rem, 8.6vw, 4.125rem); }
}
@media (max-width: 469px) {
  .es-page .cbp-ty-headline { font-size: clamp(2.375rem, 12.3vw, 3.25rem); }
}

/* ---- Continuation card headlines ----
   The grid turns two-column at 1024, which is why the stacked tier ends
   at 1023 rather than at the usual 1024: a 1024px screen gives each
   card a 400px measure, a 1023px screen gives it 927px. */
@media (min-width: 1400px) {
  .es-page .cbp-next-title { font-size: clamp(2.25rem, 2.9vw, 2.625rem); }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .es-page .cbp-next-title { font-size: clamp(1.875rem, 2.9vw, 2.5rem); }
}
@media (min-width: 470px) and (max-width: 1023px) {
  .es-page .cbp-next-title { font-size: clamp(1.875rem, 6.3vw, 2.75rem); }
}
@media (max-width: 469px) {
  .es-page .cbp-next-title { font-size: clamp(1.625rem, 8vw, 2.125rem); }
}

/* ---- Form panel heading on one line ----
   Measured: the heading needs 443.8px and the two-column panel gives it
   412px at 30px type, so it was wrapping. 26px holds one line with 7%
   to spare. Below 1025 the panel is full width and already had room. */
@media (min-width: 1025px) {
  .es-page .cbp-form-title { font-size: clamp(1.5rem, 2.1vw, 1.625rem); }
}

/* ---- The gap before the form fields ----
   Traced, not guessed. Everything this repo controls, measured at 1440
   with the embed fully resized:

       .cbp-form-intro margin-bottom   24px   <- ours
       .cbp-embed-wrap margin/padding   0px
       wrap top to iframe top           0px
       iframe top to the first label  ~80px   <- inside the iframe

   So of the roughly 104px between the paragraph and "Primer Nombre",
   about 24 are ours and about 80 are the form's own top padding inside
   a cross-origin iframe, which no CSS in this repo can reach. Ours
   comes down to 14px; the rest is a CRC form setting. */
.es-page .cbp-form-panel > p.cbp-form-intro { margin-bottom: 14px; }

/* ===================================================================
   BILINGUAL EN / ES TOGGLE  ·  ALL FOUR BLUEPRINT PAGES
   ===================================================================
   A segmented control, not a text link: navy interior, gradient rim,
   an animated edge light, and the current language filled in the
   approved lime-to-green. The active segment is a <span> carrying
   aria-current="page", so clicking it does nothing and reloads nothing;
   the other language is a real link.
   =================================================================== */
.lang-toggle {
  --rim-o: 0.42;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(170deg, #0e2036 0%, #0a1728 100%) padding-box,
    linear-gradient(140deg, rgba(90, 216, 255, 0.85) 0%, rgba(68, 181, 156, 0.5) 52%, rgba(175, 221, 44, 0.8) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 16px -10px rgba(0, 0, 0, 0.9);
}
/* The edge light, built the way the card rim and the button glow are:
   a gradient rectangle one pixel larger, sent behind the control. The
   control is positioned but is not a stacking context, so z-index: -1
   lands it behind its own opaque background and above the header's. */
.lang-toggle::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(90, 216, 255, 0.9) 0%, rgba(175, 221, 44, 0.85) 100%);
  opacity: var(--rim-o);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .lang-toggle::after { animation: cbpNextRim 9s cubic-bezier(0.4, 0, 0.2, 1) 1s infinite; }
}
.lang-toggle:hover { --rim-o: 0.66; }
.lang-toggle:hover::after { animation: none; }

.lang-opt {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease;
}
a.lang-opt:hover { color: var(--white); background-color: rgba(2, 193, 255, 0.14); }
.lang-opt.is-active {
  color: var(--navy-900);
  background-image: linear-gradient(100deg, var(--lime-400) 0%, var(--green-600) 72%);
  box-shadow: 0 2px 10px -5px rgba(175, 221, 44, 0.8);
}
.lang-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 1px;
  background: rgba(212, 221, 240, 0.22);
}
.lang-opt:focus-visible { outline: 3px solid var(--lime-400); outline-offset: 3px; }

/* The English pages keep their navigation; the toggle sits at the far
   right of the row, and beside the hamburger once the links collapse. */
.nav-inner > .lang-toggle { margin-left: auto; }
.nav-links + .lang-toggle,
.nav-cta + .lang-toggle { margin-left: 0; }

/* ===================================================================
   SPANISH MOBILE  ·  COMPOSITION CORRECTED FROM THE SCREENSHOTS
   ===================================================================
   What the phones were actually showing, at every width from 430 down:

     landing hero    "Entiende Tu Crédito" / "Descubre" / "Tus Próximos
                     Pasos"                      <- "Descubre" orphaned
     thank-you hero  "Tu Blueprint" / "del Crédito" / "Está en Camino"
                                                 <- product name split
     program card    three uneven lines
     education card  "...Tus Conocimientos" / "Financieros"  <- orphan
     form heading    "...del Crédito" / "Gratis"             <- orphan

   Every one of those came from a conditional break I had added, or from
   side padding eating the measure. Both are gone.

   Measured at 390: the hero container gave 350px and the card 314px.
   Tightening the Spanish side padding to 12px and the card to 14px
   takes those to 366px and 338px, which lifts the two-line ceilings
   from 37.4 / 26.9 to 39.1 / 28.9. The requested compositions then hold
   at a dominant size, so this is width, not smaller type. */

/* ---- The card break is now unconditional ----
   It was suppressed below 469px, which is what produced the three-line
   stack. Restated here so it applies at every width. */
.es-h-wide { display: inline; }

/* ---- The form heading: one line where it fits, a balanced pair below ----
   Measured: one line needs 355px and a 390px phone's panel gives 314px,
   so it was wrapping and orphaning "Gratis". Below 430 it now breaks
   deliberately into "Recibe Tu Blueprint" / "del Crédito Gratis". */
@media (min-width: 431px) { .es-h-form { display: none; } }

/* ---- More of the phone's width, where it is safe ---- */
@media (max-width: 469px) {
  .es-page .cbp-hero > .container,
  .es-page .cbp-ty-hero > .container { padding-left: 12px; padding-right: 12px; }
  .es-page .cbp-next > .container { padding-left: 12px; padding-right: 12px; }
  .es-page .cbp-next-card { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 340px) {
  .es-page .cbp-hero > .container,
  .es-page .cbp-ty-hero > .container,
  .es-page .cbp-next > .container { padding-left: 14px; padding-right: 14px; }
}

/* ---- Sizes, from the ceilings those measures create ----
   thank-you hero  430 43.4   390 39.1   375 37.5   360 35.9   320 31.2
   card headline   430 31.8   390 28.4   375 27.1   360 25.9   320 22.2
   Each clamp sits at about 92% of its ceiling. */
@media (max-width: 469px) {
  .es-page .cbp-ty-headline { font-size: clamp(1.8125rem, 9.2vw, 2.5rem); }
  .es-page .cbp-next-title { font-size: clamp(1.3rem, 6.8vw, 1.875rem); }
}

/* ---- The landing hero on phones ----
   "Tu Crédito Tiene una Historia." is a 30-character line where the
   confirmation hero's is 24, and that extra length is decisive. Held to
   two lines it needs 34.7px at 430 and 23px at 320 - against card
   headlines of 29.2px and 20.8px, so the hero would stop outranking the
   cards beneath it, which is the hierarchy the whole pass is for.

   So below 768 the sentence takes three deliberate lines instead:

       Tu Crédito
       Tiene una Historia.
       Aprende a Entenderla.

   Two words, three words, three words: no isolated word, and the type
   stays at 33-46px rather than 23-32px. Two lines from 768 up, where
   the measure is wide enough to hold them at 54px and above. */
@media (min-width: 768px) { .es-h-hero { display: none; } }

@media (min-width: 1025px) {
  .es-page .cbp-h1 { font-size: clamp(3rem, 3.6vw, 3.25rem); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .es-page .cbp-h1 { font-size: clamp(2.75rem, 7vw, 3.25rem); }
}
@media (max-width: 767px) {
  .es-page .cbp-h1 { font-size: clamp(2rem, 10.2vw, 3.125rem); }
}

/* ---- Room for the toggle in the English navigation ----
   Measured at 1700: the English nav row needed exactly 1628 of 1628
   before the toggle, so there was no slack at all, and the control put
   it 34px over. Two small reclaims, applied only to the row that
   carries a toggle, at the only width where the links are inline:

       nav-inner gap      18px -> 14px   (3 gaps)   12px
       nav link padding    8px ->  6px   (8 links)  32px

   44px recovered against 34px needed. Nothing else about the English
   header changes, and below 1601 the links are already collapsed. */
@media (min-width: 1601px) {
  .nav-inner--lang { gap: 14px; }
  .nav-inner--lang .nav-links a { padding-left: 6px; padding-right: 6px; }
}

/* ---- The toggle must not push the menu button off the screen ----
   Measured on the English Blueprint pages after the toggle was added:

       vw    row needs / has     where the menu button ended up
       430      376 / 387        inside
       390      361 / 350        11px past the right edge
       375      361 / 335        26px past
       360      351 / 320        31px past
       320      351 / 280        71px past

   The English nav row had no slack on phones either (the home page
   measures exactly 280/280 at 320), so a 97px control plus a 32px gap
   had to come from somewhere, and it came out of the hamburger. It was
   invisible in the overflow numbers because an ancestor clips, which is
   exactly the kind of defect the brief says not to hide.

   Two reclaims, both only on phone widths: the row gap closes up, and
   the control itself gets compact. The logo is untouched. */
@media (max-width: 430px) {
  .nav-inner--lang { gap: 10px; }
  .lang-toggle { padding: 2px; }
  .lang-opt {
    padding: 5px 8px;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }
}

/* ===================================================================
   FORM PANEL ON PHONES  ·  GIVING THE EMBED ITS WIDTH BACK
   ===================================================================
   The Cloudflare Turnstile widget inside both CRC forms is clipped on
   phones. Measured by loading each form read-only at the exact width
   our embed gives it, and reading its own .captcha-container:

       page   iframe        EN container      ES container
       430    358 / 366     -                 284
       390    318 / 326     300               244
       375    311           -                 229
       360    304           -                 222
       320    256 / 260     238               178

   A normal Turnstile widget is a fixed 300px. So English was fitting
   with exactly zero margin at 390 and clipped below it, and Spanish was
   clipped at every phone width.

   The Spanish form loses far more to its own internals: its fields are
   inset 41px from each side where the English form's are inset 9px, so
   82px of the Spanish embed is the form's own padding. That belongs to
   CRC, not here.

   What this repo controls is the panel's own padding, so that comes
   down. It does not touch the page gutter, so the card still sits clear
   of the screen edges, and it changes no field, no validation and no
   CAPTCHA setting. */
@media (max-width: 430px) {
  .cbp-form-panel { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 340px) {
  .cbp-form-panel { padding-left: 8px; padding-right: 8px; }
}

/* ===================================================================
   THANK-YOU CONFIRMATION  ·  SUPPORTING TEXT, BOTH LANGUAGES
   ===================================================================
   The two statements were reading as one block because they were
   10px apart and both held on a single line by `white-space: nowrap`.
   Measured before: headline to first statement 22px, first to second
   10px, first statement 23px / 600.

   Now the hierarchy is explicit: a clear step down from the headline,
   a bright and heavier first statement, a deliberate gap, then a
   softer second. The nowrap goes, so each statement takes a balanced
   measure instead of being squeezed onto one line - which is what the
   Spanish copy needed anyway, being 73 characters against English's 47.
   =================================================================== */
.cbp-ty-lede,
.cbp-ty-sub {
  white-space: normal;
  text-wrap: balance;
  margin-inline: auto;
}
.cbp-ty-lede {
  max-width: 44ch;
  margin-top: clamp(26px, 2.8vw, 38px);
  font-size: clamp(1.1875rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--white);
}
.cbp-ty-sub {
  max-width: 50ch;
  margin-top: clamp(16px, 1.9vw, 26px);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: #b9c9e3;
}
/* Spanish runs about half as long again, so it gets its own measure
   rather than being forced into the English one. */
.es-page .cbp-ty-lede { max-width: 30ch; }
.es-page .cbp-ty-sub { max-width: 34ch; }
@media (max-width: 559.98px) {
  .cbp-ty-lede { max-width: 26ch; }
  .cbp-ty-sub { max-width: 30ch; }
  .es-page .cbp-ty-lede { max-width: 24ch; }
  .es-page .cbp-ty-sub { max-width: 28ch; }
}

/* ===================================================================
   THE CONFIRMATION MARK  ·  DIMENSIONAL
   ===================================================================
   Deep navy interior inside the existing cyan-teal-lime ring, with an
   inner top highlight and a soft floor shadow for depth, a halo behind
   the circle, and a slow light travelling around the rim.

   Both added layers sit at z-index -1, behind the mark's own opaque
   interior, so nothing ever paints over the checkmark: the same
   technique as the card rim and the button glow. The checkmark itself
   never moves - only the light around it. The resting state is the
   rule's own value, so the mark is complete and correct with
   JavaScript off and under reduced motion.
   =================================================================== */
.cbp-ty-icon {
  position: relative;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -10px 18px -12px rgba(0, 0, 0, 0.95),
    0 18px 44px -18px rgba(68, 181, 156, 0.8),
    0 0 38px -14px rgba(90, 216, 255, 0.55);
}
/* Halo */
.cbp-ty-icon::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -34%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(90, 216, 255, 0.3) 0%,
    rgba(68, 181, 156, 0.16) 42%,
    rgba(175, 221, 44, 0.07) 62%,
    transparent 72%);
  opacity: 0.9;
}
/* The travelling rim light: a conic sweep just outside the ring. */
.cbp-ty-icon::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(175, 221, 44, 0) 0deg,
    rgba(175, 221, 44, 0.85) 32deg,
    rgba(90, 216, 255, 0.9) 74deg,
    rgba(68, 181, 156, 0) 126deg,
    rgba(68, 181, 156, 0) 360deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cbp-ty-icon::after { animation: cbpTyRim 11s linear infinite; }
  .cbp-ty-icon::before { animation: cbpTyHalo 7s ease-in-out 0.6s infinite; }
}
@keyframes cbpTyRim {
  to { transform: rotate(360deg); }
}
@keyframes cbpTyHalo {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
/* The check reads as the brightest thing in the mark. */
.cbp-ty-icon svg {
  filter: drop-shadow(0 0 9px rgba(175, 221, 44, 0.55));
}

/* ===================================================================
   HEADER LOGO  ·  MODEST SIZE INCREASE ON PHONES
   ===================================================================
   Investigated first. The asset is public/img/branding/taxfunders-
   header-logo.png, 1520x314 with alpha, the only logo in the project.
   No opacity and no filter is applied to it anywhere, and at a 150px
   display width it is a 10x downscale of the source, so resolution is
   not the limitation.

   The limitation is geometric: the lockup is 4.84:1, so at 150px wide
   the whole thing is 31px tall and the "FINANCIAL GROUP" subtitle
   inside it renders about 2px tall. No CSS makes 2px type legible.

   What is available is a modest size increase, and the room for it was
   measured against the other header controls rather than assumed. The
   English row at 320 has 280px for a 150px logo, a 70px toggle, a 40px
   menu button and two 10px gaps - exactly full - so 320 keeps its
   current size. Every wider phone has room. */
@media (max-width: 768px) { .nav-logo img { width: 195px; } }
@media (max-width: 430px) { .nav-logo img { width: 188px; } }
@media (max-width: 390px) { .nav-logo img { width: 185px; } }
@media (max-width: 360px) { .nav-logo img { width: 172px; } }
@media (max-width: 340px) { .nav-logo img { width: 150px; } }

/* ===================================================================
   DESKTOP HEADER ABOVE 1600px  ·  LOGO | LINKS + EXPLORE MORE | 2 CTAs
   ===================================================================
   Replaces the margin-right:auto parking rule that used to sit here.
   That rule stopped the drift by shoving the link row up against the
   logo, but it could not centre anything: .nav-inner was still
   justify-content: space-between over three children whose third was a
   different width on every page - 722.7px of spread, from 289px on
   /about to 1011.7px on /contact, which carried no .nav-cta at all.

   Two changes remove the cause instead of compensating for it.

   1. Every page now carries the same two consultation CTAs, so the
      right-hand column is the same width everywhere. About, FAQs and
      Contact moved into the Explore More dropdown, and the two
      returning-client portal pills moved there with them - which also
      retires the 41.2px-versus-32px height difference that made
      /credit-strategy and /tax-preparation 3.6px taller than the rest.

   2. .nav-inner becomes an explicit three-column grid:

          1fr    logo       justify-self: start
          auto   link row   centre column
          1fr    CTA pair   justify-self: end

      Equal fr tracks hold the centre column at the container's centre
      independently of what the outer columns contain, so the link row
      is anchored to the container rather than to its neighbours. If a
      page is ever given a different CTA again, the links still will
      not move. .nav-toggle is display:none up here and claims no cell.

      The outer tracks are auto, not fr. An earlier version made them
      equal fr tracks, which centred the links on the container - but
      the logo is far narrower than the CTA pair, so the equal tracks
      spent the difference as dead space on the left: 266px between the
      logo and Home against 29.4px between Explore More and the first
      button, measured at 1680px. Balanced on paper, lopsided on screen.

      auto outer tracks size to the logo and the CTA pair, and the link
      row centres inside whatever is left, so the two visible gaps come
      out equal instead: 106.7px either side at 1680px, 67.2px at
      1601px. The 24px column gap is the floor underneath that.

      Consistency no longer depends on the track maths. Every page now
      carries byte-identical header markup - same logo, same five links
      and trigger, same two CTAs - so all three zones resolve to the
      same widths everywhere, which the measurements confirm at every
      width tested. auto tracks also cannot be squeezed below their own
      content, so the CTA pair can never overhang the trigger the way
      minmax(0,1fr) allowed before.

   The :has(> .nav-links) guard keeps the grid off the Spanish
   Blueprint header, which holds only a logo and a language toggle and
   would otherwise put the toggle in the centre column. On a browser
   without :has() the whole rule drops and the row falls back to the
   old flex space-between - which, now that every page's CTA pair is
   identical, still lands the links in the same place on every page.

   Sizes: the logo goes 180 -> 196px and the labels 13.5 -> 15px, both
   as asked. Label separation is padding 12 + gap 4 = 28px, up from
   22px. These values supersede the unscoped block at line 40415,
   which is left intact for the 1601px packing it documents.
   =================================================================== */
@media (min-width: 1601px) {
  .nav-inner:not(.nav-inner--lang):has(> .nav-links) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 24px;
  }
  .nav-inner:not(.nav-inner--lang):has(> .nav-links) > .nav-logo  { justify-self: start; }
  .nav-inner:not(.nav-inner--lang):has(> .nav-links) > .nav-links { justify-self: center; }
  .nav-inner:not(.nav-inner--lang):has(> .nav-links) > .nav-cta   { justify-self: end; }

  /* 230px. The source is 1520x314, so this is still a ~6.6x downscale -
     the mark is nowhere near resolution-limited, and no sharper copy of
     this lockup exists in the project (Logo-F8.png is byte-identical to
     it; Logo-F5 and Logo-F11 are different, taller compositions, not the
     horizontal wordmark). How clearly "FINANCIAL GROUP" reads is set by
     the artwork's own thin letterspaced type, so display size is the
     only lever there is, and this is the largest that still leaves the
     row comfortable at 1601px. It puts the bar at 87.5px. */
  .nav-logo img { width: 230px; height: auto; }

  .nav-links { gap: 4px; }
  .nav-links > a { padding: 8px 12px; font-size: 1.03125rem; }
  .nav-links > a::after { left: 12px; right: 12px; }

  .nav-cta { gap: 10px; }

  /* body.home is named here on purpose. The homepage CTA family sets
     body.home .nav-cta .btn { padding: 9px 11px; letter-spacing: 0.08em }
     at (0,3,1), which outranks a plain .nav-cta .btn-sm: the homepage
     pair measured 5.1px narrower than every other page's, and because
     the CTA width is what sets the right-hand track's minimum, that
     pushed the homepage link row 5.2px out of line between 1601 and
     1668px. Matching the selector's weight and coming later settles it
     without touching the homepage's own colour, radius or shadow. */
  .nav-cta .btn-sm,
  body.home .nav-cta .btn-sm { padding: 10px 15px; letter-spacing: 0.06em; }
}

/* ===================================================================
   EXPLORE MORE  ·  THE DROPDOWN TRIGGER
   ===================================================================
   .nav-more lives inside .nav-links, so it inherits that row's flex
   layout and gap, and it disappears with the links at 1600px and
   below without needing a rule of its own - the flat list in
   .mobile-menu already carries About, FAQs and Contact there.

   It is deliberately not a .btn: a disclosure control that looks like
   the two consultation buttons would read as a third CTA. It is a
   pill with a 1px gradient ring instead.
   =================================================================== */
.nav-more {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Deliberately deeper than a nav link's 8px/12px so the control reads as
     its own thing, and still short of .btn-sm's weight so it cannot be
     mistaken for a third call to action. */
  padding: 10px 19px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 100%);
  font-family: inherit;
  font-size: 1.03125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gray-100);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}

/* The ring is a masked pseudo-element rather than a border, so the fill
   behind it stays the button's own navy instead of a blended edge.

   One continuous blue-to-green band, laid out so the first and last
   stops are the same blue: the gradient is 240% of the button's width
   and its background-position travels one full span, which makes the
   colours circulate without a visible seam at the wrap. Every stop is
   opaque enough to see, so the outline is present at all times and the
   animation moves the hue along it rather than switching it on and off
   - visible, but nothing blinks. Only a background position changes,
   so the sweep can never nudge the row's geometry. 6.5s linear reads
   as circulation rather than a chase. */
.nav-more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(100deg,
    rgba(26,63,212,0.95)  0%,
    rgba(2,193,255,1)    20%,
    rgba(68,181,156,1)   38%,
    rgba(87,171,40,1)    56%,
    rgba(175,221,44,1)   72%,
    rgba(2,193,255,1)    88%,
    rgba(26,63,212,0.95) 100%);
  background-size: 240% 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: navMoreRing 6.5s linear infinite;
  pointer-events: none;
}
@keyframes navMoreRing {
  from { background-position: 0 0; }
  to   { background-position: -240% 0; }
}

/* A soft halo just outside the ring, so the control carries a little
   depth against the bar without becoming a filled button. One blurred
   shadow rather than two stacked ones - the second was not visible
   against the first and this sits in the animating ring's repaint
   region. */
.nav-more-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(2,193,255,0.17);
  pointer-events: none;
}

/* A light that travels across the chevron rather than a pulse: the
   drop-shadow's x offset runs left to right while its colour hands
   over from the ring's blue to the ring's green, so the two animations
   read as one idea. It fades in and out at the ends, which is what
   keeps it from looking like a blink, and a 1px drift rides along to
   make the downward affordance unmistakable.

   On cost, measured rather than assumed: the header animations hold a
   locked 60fps on a GPU-composited page - 16.69ms average frame
   interval with them running, 2 frames of 179 over 20ms, against
   16.65ms with them switched off. An earlier reading suggested they
   were expensive, but that was click-to-open transition latency, which
   in a headless software rasteriser is dominated by scheduling in the
   measuring loop, not by paint. Steady-state frame interval is the
   honest number and it is clean. */
.nav-more-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sky-300);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  animation: navMoreArrow 4.2s ease-in-out infinite;
}
@keyframes navMoreArrow {
  0%   { opacity: 0.72; transform: translateY(0);    filter: drop-shadow(-4px 0 3px rgba(2,193,255,0)); }
  25%  { opacity: 1;    transform: translateY(1px);  filter: drop-shadow(-2px 0 4px rgba(2,193,255,0.75)); }
  50%  { opacity: 1;    transform: translateY(1.5px);filter: drop-shadow(0 0 5px rgba(175,221,44,0.8)); }
  75%  { opacity: 1;    transform: translateY(1px);  filter: drop-shadow(2px 0 4px rgba(87,171,40,0.75)); }
  100% { opacity: 0.72; transform: translateY(0);    filter: drop-shadow(4px 0 3px rgba(87,171,40,0)); }
}

.nav-more-btn:hover,
.nav-more-btn.is-active,
.nav-more-btn[aria-expanded="true"] {
  background: linear-gradient(180deg, var(--navy-600) 0%, var(--navy-700) 100%);
}
.nav-more-btn:hover::after,
.nav-more-btn[aria-expanded="true"]::after {
  box-shadow: 0 0 18px rgba(2,193,255,0.3);
}
/* When the current page is one of the three inside the panel, the trigger
   carries the same sky the active link row uses, so the header marks the
   current page in one language wherever that page happens to live. Hover
   and open come after, so they still win while the pointer is on it. */
.nav-more-btn.is-active { color: var(--sky-400); }
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"] { color: var(--white); }
.nav-more-btn:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 3px; }

/* Open: the arrow points at the panel and stops breathing, so the
   resting animation never fights the rotation. */
.nav-more:hover .nav-more-arrow,
.nav-more:focus-within .nav-more-arrow,
.nav-more.is-open .nav-more-arrow {
  transform: rotate(180deg);
  animation: none;
  opacity: 1;
}

/* The panel hangs from a transparent wrapper whose 12px of top padding
   keeps the pointer path from button to panel contiguous; with a plain
   top offset the menu closed as the cursor crossed the gap. */
.nav-more-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility is switched with a zero duration and a delay, never eased.
     Measured: with `visibility 0.18s` the computed value stays `hidden` for
     the whole run, and a hidden element cannot take focus — so ArrowDown
     opened the panel and then had nowhere to send the caret. Opening flips
     it at once (see the open rules below); closing holds it until the fade
     has finished, so the panel does not vanish mid-fade. */
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.nav-more-panel {
  min-width: 222px;
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateY(-6px);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Three ways in, so the control works with the pointer, from the
   keyboard with no JavaScript at all (:focus-within), and under the
   click/Escape handling main.js adds (.is-open). */
.nav-more:hover > .nav-more-menu,
.nav-more:focus-within > .nav-more-menu,
.nav-more.is-open > .nav-more-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s;
}
.nav-more:hover > .nav-more-menu > .nav-more-panel,
.nav-more:focus-within > .nav-more-menu > .nav-more-panel,
.nav-more.is-open > .nav-more-menu > .nav-more-panel { transform: translateY(0); }

/* main.js adds .nav-more--js, and from then on an explicit close outranks
   :focus-within. Without this, Escape did nothing you could see: it removed
   .is-open and handed focus back to the trigger, which is inside .nav-more,
   so :focus-within re-opened the panel on the same frame. The negations make
   the suppressor stand down whenever the panel should genuinely be open -
   .is-open from a click, or :hover from the pointer - and the extra class
   gives it the weight to beat the three open rules above.

   :focus-within stays the no-JavaScript path. With the script running, the
   trigger behaves as a disclosure button should: Enter, Space or ArrowDown
   open it, Tab alone does not. */
.nav-more--js:not(.is-open):not(:hover) > .nav-more-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.nav-more--js:not(.is-open):not(:hover) > .nav-more-menu > .nav-more-panel { transform: translateY(-6px); }
/* Closed again, so the chevron goes back to pointing down and resumes
   its drift; the open rules above had set animation: none to stop the
   drift fighting the 180deg flip. */
.nav-more--js:not(.is-open):not(:hover) .nav-more-arrow {
  transform: none;
  animation: navMoreArrow 3.4s ease-in-out infinite;
}

/* .nav-links a is a descendant selector, so the panel's links would
   otherwise inherit the row's padding and its scaleX underline. */
.nav-more-panel a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-200);
  white-space: nowrap;
  background: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-more-panel a::after { content: none; }
.nav-more-panel a:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.nav-more-panel a.active { color: var(--sky-400); background: rgba(2,193,255,0.09); }
.nav-more-sep {
  display: block;
  height: 1px;
  margin: 7px 11px;
  background: var(--border);
}
.nav-more-portal { font-size: 0.8125rem; color: var(--text-muted); }
.nav-more-portal svg { width: 13px; height: 13px; flex-shrink: 0; }
.nav-more-portal:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  /* The ring stays - it is the control's outline, not decoration - it
     simply stops circulating. The chevron keeps a static glow so the
     affordance survives without motion. */
  .nav-more-btn::before { animation: none; background-position: 30% 0; }
  .nav-more-arrow {
    animation: none;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(2,193,255,0.45));
    transition: none;
  }
  /* The open rules carry their own transition at (0,3,0), so the plain
     .nav-more-menu reset below would not reach them. */
  .nav-more-menu,
  .nav-more:hover > .nav-more-menu,
  .nav-more:focus-within > .nav-more-menu,
  .nav-more.is-open > .nav-more-menu,
  .nav-more--js:not(.is-open):not(:hover) > .nav-more-menu,
  .nav-more-panel { transition: none; }
}

/* ===================================================================
   BLUEPRINT PAGES  ·  WHY THESE TWO KEEP THE FLEX ROW
   ===================================================================
   /credit-blueprint and its thank-you page carry a ~96px EN/ES toggle
   the other pages do not, and .nav .container is capped at 1680px, so
   the row has 1628px to work with however wide the monitor is.

   Matching the centred link position of the other pages would need
   logo 196 + centre offset 467 + links + CTAs + toggle, which runs
   past 1628px at every width - the same cap that defeated the
   previous attempt. Position parity is not reachable here, so these
   two keep justify-content: space-between: all five links, Explore
   More, both CTAs and the toggle inline on one row, anchored after
   the logo instead of centred.

   What did change is the collapse threshold. The old rule hid the
   links and CTAs at 1660px and below because the row needed 1635px of
   1628px. Shorter CTA labels gave back about 150px: measured with
   this page's own tighter label packing the row now needs ~1401px, so
   it fits from 1601px up and the early collapse is gone. These pages
   show inline navigation across exactly the same range as the rest of
   the site.

   The Spanish pages are unaffected either way - their header holds
   only the logo and the toggle, with no .nav-links or .nav-cta to
   place, and it never overflowed at any width. */
@media (min-width: 1601px) {
  .nav-inner--lang { gap: 18px; }
  .nav-inner--lang .nav-links > a::after { left: 6px; right: 6px; }
}

/* ===================================================================
   MOBILE NAVIGATION  ·  THE APPROVED CARD DESIGN
   ===================================================================
   Everything here is below 1601px only: .nav-links / .nav-cta are
   display:none from 1600px down and .nav-toggle takes over, so none of
   it can reach the approved desktop header.

   The panel's old flat list of underlined links becomes eight cards,
   each an icon, a label and a chevron, then the two consultation
   buttons, then the two client-portal links. The markup is generated
   identically on all thirteen pages that carry a panel, so there is one
   implementation rather than per-page variants.
   =================================================================== */

/* ---- The menu button: one control that carries both states ----
   The reference shows the same rounded square holding the three lines
   and then the X, so the button no longer hides itself when open and
   the panel's separate .mobile-close is gone. .nav sits at z-index 1000
   over the panel's 999, so the control stays on top and tappable, and
   main.js already keeps it out of the inert set. */
.nav-toggle {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(170deg, var(--navy-700) 0%, var(--navy-900) 100%);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  width: 22px;
  transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.18s ease;
}

/* Same masked-ring technique as the desktop Explore More control: a
   gradient painted into a 1.5px frame, circulating by background
   position so nothing scales or reflows. */
.nav-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(115deg,
    rgba(26,63,212,0.95)  0%,
    rgba(2,193,255,1)    22%,
    rgba(68,181,156,1)   42%,
    rgba(87,171,40,1)    62%,
    rgba(175,221,44,1)   80%,
    rgba(2,193,255,1)    92%,
    rgba(26,63,212,0.95) 100%);
  background-size: 240% 100%;
  background-repeat: repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: navMoreRing 6.5s linear infinite;
  pointer-events: none;
}
.nav-toggle::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(2,193,255,0.22), 0 0 10px rgba(87,171,40,0.14);
  pointer-events: none;
}
.nav-toggle:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 4px; }

/* Three lines to an X. The bars sit 7px apart (2px tall, 5px gap), so
   that is exactly how far the outer two travel to meet in the middle. */
.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; transform: scaleX(0.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"]::after {
  box-shadow: 0 0 20px rgba(2,193,255,0.32), 0 0 12px rgba(87,171,40,0.2);
}

/* ---- The panel ---- */
.mobile-menu {
  padding: 104px 20px 56px;
  gap: 0;
  background: linear-gradient(180deg, #071226 0%, var(--navy-900) 46%, #061020 100%);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* The reference is a phone. On a tablet, or on a laptop below 1601px
   where this panel is still what the header opens, a full-bleed column
   of cards would be absurdly wide, so the content keeps a readable
   measure and centres. */
.mm-nav,
.mm-cta,
.mm-portals {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.mm-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- A navigation card ---- */
.mobile-menu .mm-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 14px 17px;
  border: 0;
  border-bottom: 0;
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(14,33,63,0.9) 0%, rgba(9,20,38,0.9) 100%);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease;
}
/* A 1px luminous frame, brighter at the top-left so the cards read as
   lit from the same direction as the rest of the brand's surfaces. */
.mobile-menu .mm-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(2,193,255,0.75) 0%,
    rgba(26,63,212,0.5)  45%,
    rgba(2,193,255,0.3)  70%,
    rgba(42,64,128,0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.mobile-menu .mm-card .mm-ico {
  display: flex;
  width: 30px;
  color: var(--sky-300);
}
.mobile-menu .mm-card .mm-ico svg { width: 26px; height: 26px; }
.mm-label { min-width: 0; }
.mobile-menu .mm-go {
  width: 20px;
  height: 20px;
  color: var(--sky-400);
  opacity: 0.85;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu .mm-card:hover,
.mobile-menu .mm-card:focus-visible {
  color: var(--white);
  background: linear-gradient(170deg, rgba(20,45,84,0.95) 0%, rgba(12,27,50,0.95) 100%);
}
.mobile-menu .mm-card:hover .mm-go,
.mobile-menu .mm-card:focus-visible .mm-go { transform: translateX(4px); }
.mobile-menu .mm-card:active { transform: scale(0.985); }
.mobile-menu .mm-card:focus-visible { outline: 2px solid var(--sky-400); outline-offset: 3px; }

/* The current page, which the reference shows in the brand's greens. */
.mobile-menu .mm-card.active::before {
  background: linear-gradient(150deg,
    rgba(175,221,44,0.95) 0%,
    rgba(87,171,40,0.9)  45%,
    rgba(68,181,156,0.6) 78%,
    rgba(2,193,255,0.45) 100%);
}
.mobile-menu .mm-card.active {
  background: linear-gradient(170deg, rgba(18,42,40,0.92) 0%, rgba(9,22,34,0.92) 100%);
  box-shadow: 0 0 18px rgba(87,171,40,0.16);
}
.mobile-menu .mm-card.active .mm-ico { color: var(--lime-400); }
.mobile-menu .mm-card.active .mm-go { color: var(--lime-400); opacity: 1; }

/* ---- The two consultation buttons ---- */
.mm-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
/* body.home is named here for the same reason as on the desktop row:
   body.home .mobile-menu .btn sets its own padding, radius and shadow at
   (0,3,1) and would otherwise flatten these two on the homepage alone. */
.mobile-menu .mm-btn,
body.home .mobile-menu .mm-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 0;
  padding: 15px 17px;
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
  overflow: visible;
}
.mobile-menu .mm-btn .mm-label,
body.home .mobile-menu .mm-btn .mm-label { justify-self: center; text-align: center; }
.mobile-menu .mm-btn .mm-ico { display: flex; }
.mobile-menu .mm-btn .mm-ico svg { width: 24px; height: 24px; }
.mobile-menu .mm-btn .mm-go { width: 20px; height: 20px; color: currentColor; opacity: 0.9; }
.mobile-menu .mm-btn:hover .mm-go { transform: translateX(4px); }
.mobile-menu .mm-btn::before,
.mobile-menu .mm-btn::after { content: none; }

.mobile-menu .mm-btn.btn-primary,
body.home .mobile-menu .mm-btn.btn-primary {
  background: linear-gradient(135deg, #b6e835 0%, #74c92c 48%, #3f9b1e 100%);
  color: #06260a;
  box-shadow: 0 0 20px rgba(135,205,45,0.34), inset 0 1px 0 rgba(255,255,255,0.35);
}
.mobile-menu .mm-btn.btn-sky,
body.home .mobile-menu .mm-btn.btn-sky {
  background: linear-gradient(135deg, #22a9ff 0%, #1361e8 48%, #0a2dc2 100%);
  color: var(--white);
  box-shadow: 0 0 20px rgba(26,110,232,0.36), inset 0 1px 0 rgba(255,255,255,0.22);
}
.mobile-menu .mm-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.mobile-menu .mm-btn:active { transform: scale(0.99); }

/* ---- Client portals ----
   Two compact buttons side by side under the consultation buttons, so
   returning clients reach their portal from a phone. Each is dark navy
   with a luminous 1.25px frame - blue/cyan for credit, green/lime for
   tax - with a slow highlight travelling round it (the menu button's
   masked-ring technique and keyframes), a lock on the left and a
   chevron on the right. Deliberately quieter than the two CTAs above:
   shorter, no colour fill, smaller sentence-case type.
   Only the mobile panel's pair is styled here; the desktop Explore More
   panel keeps its own links. */
.mm-portals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.mobile-menu .mm-portals .mm-portal {
  --mm-portal-ink: var(--sky-300);
  --mm-portal-glow: rgba(2,193,255,0.13);
  --mm-portal-glow-hi: rgba(2,193,255,0.24);
  --mm-portal-ring: linear-gradient(115deg,
    rgba(26,63,212,0.75)  0%,
    rgba(2,193,255,0.9)  20%,
    rgba(150,228,255,1)  28%,
    rgba(2,193,255,0.9)  36%,
    rgba(26,63,212,0.75) 56%,
    rgba(2,193,255,0.55) 78%,
    rgba(26,63,212,0.75) 100%);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(170deg, rgba(13,30,58,0.96) 0%, rgba(8,18,35,0.96) 100%);
  box-shadow: 0 0 14px var(--mm-portal-glow);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: #e2eaf7;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.mobile-menu .mm-portals .mm-portal--tax {
  --mm-portal-ink: var(--lime-400);
  --mm-portal-glow: rgba(135,205,45,0.12);
  --mm-portal-glow-hi: rgba(135,205,45,0.22);
  --mm-portal-ring: linear-gradient(115deg,
    rgba(63,155,30,0.8)   0%,
    rgba(135,205,45,0.92) 20%,
    rgba(222,246,140,1)   28%,
    rgba(175,221,44,0.92) 36%,
    rgba(63,155,30,0.8)   56%,
    rgba(68,181,156,0.55) 78%,
    rgba(63,155,30,0.8)   100%);
}
.mobile-menu .mm-portals .mm-portal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: var(--mm-portal-ring);
  background-size: 240% 100%;
  background-repeat: repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: navMoreRing 8s linear infinite;
  pointer-events: none;
}
/* Offset by half a cycle so the two highlights never travel in step. */
.mobile-menu .mm-portals .mm-portal--tax::before { animation-delay: -4s; }
.mobile-menu .mm-portals .mm-portal svg { display: block; flex-shrink: 0; }
.mobile-menu .mm-portals .mm-portal-lock { width: 16px; height: 16px; color: var(--mm-portal-ink); }
.mobile-menu .mm-portals .mm-portal-go {
  width: 14px;
  height: 14px;
  color: var(--mm-portal-ink);
  opacity: 0.85;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.mm-portal-label { min-width: 0; }
/* "Client Portal" never splits; if a label has to wrap, it wraps before
   it, so the two buttons always break the same way. */
.mm-portal-tail { white-space: nowrap; }
.mobile-menu .mm-portals .mm-portal:hover,
.mobile-menu .mm-portals .mm-portal:focus-visible {
  color: var(--white);
  background: linear-gradient(170deg, rgba(19,42,79,0.98) 0%, rgba(11,24,46,0.98) 100%);
  box-shadow: 0 0 18px var(--mm-portal-glow-hi);
}
.mobile-menu .mm-portals .mm-portal:hover .mm-portal-go,
.mobile-menu .mm-portals .mm-portal:focus-visible .mm-portal-go { transform: translateX(3px); opacity: 1; }
.mobile-menu .mm-portals .mm-portal:active { transform: scale(0.98); }
.mobile-menu .mm-portals .mm-portal:focus-visible { outline: 2px solid var(--mm-portal-ink); outline-offset: 3px; }

/* ---- Opening ----
   Cards rise in sequence. transform and opacity only, `backwards` so
   each card is already at its start pose during its delay, and the
   whole thing is done inside half a second - it runs on open, never
   continuously. */
@keyframes mmIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.mobile-menu.open .mm-card,
.mobile-menu.open .mm-btn,
.mobile-menu.open .mm-portals {
  animation: mmIn 0.36s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.mobile-menu.open .mm-card:nth-child(1) { animation-delay: 0.03s; }
.mobile-menu.open .mm-card:nth-child(2) { animation-delay: 0.06s; }
.mobile-menu.open .mm-card:nth-child(3) { animation-delay: 0.09s; }
.mobile-menu.open .mm-card:nth-child(4) { animation-delay: 0.12s; }
.mobile-menu.open .mm-card:nth-child(5) { animation-delay: 0.15s; }
.mobile-menu.open .mm-card:nth-child(6) { animation-delay: 0.18s; }
.mobile-menu.open .mm-card:nth-child(7) { animation-delay: 0.21s; }
.mobile-menu.open .mm-card:nth-child(8) { animation-delay: 0.24s; }
.mobile-menu.open .mm-btn:nth-child(1) { animation-delay: 0.28s; }
.mobile-menu.open .mm-btn:nth-child(2) { animation-delay: 0.31s; }
.mobile-menu.open .mm-portals { animation-delay: 0.34s; }

/* ---- Phones: the CTA labels on one line ----
   "BOOK YOUR FREE CREDIT CONSULTATION" is 34 uppercase characters and
   the reference sets it on a single line. At the default 13px it needs
   about 316px against the 248px a 390px-wide panel leaves once the
   icon, chevron, gaps and padding are taken out, so it wrapped. Rather
   than shrink the type until it fits, the furniture gives the room
   back: the icon and chevron come down, the gaps and padding tighten,
   and the label only then takes a step. That holds one line to 375px.
   Below that it is allowed to wrap - see the next block. */
@media (max-width: 430px) {
  .mobile-menu .mm-btn,
  body.home .mobile-menu .mm-btn {
    gap: 9px;
    padding: 14px 13px;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
  }
  .mobile-menu .mm-btn .mm-ico svg { width: 20px; height: 20px; }
  .mobile-menu .mm-btn .mm-go { width: 16px; height: 16px; }
}

/* ---- Narrow phones ----
   320px is the floor the rest of the site is built to. The card type and
   padding come down a step so eight cards plus two buttons still fit the
   measure. The CTA labels wrap to two lines here: at 320px the panel
   leaves roughly 212px for a label that needs 258px, and the type would
   have to drop near 9px to hold one line, which is not a trade worth
   making on the page's primary conversion control. */
@media (max-width: 374px) {
  .mobile-menu { padding: 96px 14px 48px; }
  .mobile-menu .mm-card { padding: 12px 13px; gap: 11px; font-size: 1.3125rem; }
  .mobile-menu .mm-card .mm-ico { width: 26px; }
  .mobile-menu .mm-card .mm-ico svg { width: 23px; height: 23px; }
  .mobile-menu .mm-btn,
  body.home .mobile-menu .mm-btn { padding: 14px 12px; gap: 9px; font-size: 0.6875rem; letter-spacing: 0.04em; }
  .mobile-menu .mm-btn .mm-ico svg { width: 21px; height: 21px; }
  .mobile-menu .mm-go { width: 17px; height: 17px; }
  .nav-toggle { width: 46px; height: 46px; border-radius: 13px; }
  .nav-toggle span { width: 20px; }
}

/* ---- Client portals on phones ----
   "Credit Client Portal" measures 109px at 12px Inter semibold. From
   390px the lighter furniture below (smaller lock and chevron, tighter
   gaps and padding) leaves about 113px, so both labels hold one line.
   Under 390px there is not room for that at a readable size, so both
   labels go to two lines - "Credit" / "Client Portal" and "Tax" /
   "Client Portal" - and the pair stays symmetrical. */
@media (max-width: 479px) {
  .mm-portals { gap: 8px; }
  .mobile-menu .mm-portals .mm-portal {
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.75rem;
  }
  .mobile-menu .mm-portals .mm-portal-lock { width: 14px; height: 14px; }
  .mobile-menu .mm-portals .mm-portal-go { width: 12px; height: 12px; }
}
@media (max-width: 389px) {
  .mm-portal-tail { display: block; }
}

/* ---- The header stays clear while the panel is open ----
   The bar is transparent at the top of a page (it turns solid only after
   40px of page scroll), and the panel used to fill the whole screen and
   scroll as one piece beneath it, so scrolling down to the portals
   carried the Home card up through the logo. Now, while the panel is
   open, main.js marks the bar .nav--menu-open and measures its height
   into --mm-top: the bar turns solid in the panel's own top colour (no
   seam, and no fade-in, so nothing shows through as it opens) and the
   panel starts at the bar's bottom edge, so the menu scrolls in its own
   region beneath the header and is clipped there. Once the content has
   moved under the bar, a hairline and a soft shadow mark the edge.
   The padding keeps the first card exactly where it sat before: 104px
   from the top of the screen (96px under 375px). */
.nav.nav--menu-open,
.nav.nav--menu-open.scrolled {
  background: #071226;
  border-bottom: 0;
  box-shadow: none;
  transition: none;
}
.nav.nav--menu-open.nav--menu-scrolled {
  box-shadow: 0 1px 0 rgba(56,207,255,0.12), 0 12px 22px -16px rgba(0,0,0,0.85);
}
.mobile-menu {
  top: var(--mm-top, 0px);
  padding-top: max(10px, calc(104px - var(--mm-top, 0px)));
  /* Keyboard focus scrolls an entry fully into view with room for its
     focus ring, rather than flush against the header or the screen edge. */
  scroll-padding-block: 12px;
}
@media (max-width: 374px) {
  .mobile-menu { padding-top: max(10px, calc(96px - var(--mm-top, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle::before { animation: none; background-position: 28% 0; }
  .nav-toggle span { transition: none; }
  .mobile-menu.open .mm-card,
  .mobile-menu.open .mm-btn,
  .mobile-menu.open .mm-portals { animation: none; }
  .mobile-menu .mm-card,
  .mobile-menu .mm-go,
  .mobile-menu .mm-btn { transition: none; }
  .mobile-menu .mm-portals .mm-portal::before { animation: none; background-position: 28% 0; }
  .mobile-menu .mm-portals .mm-portal,
  .mobile-menu .mm-portals .mm-portal-go { transition: none; }
}