/* ==========================================================================
   Special Minds — design system
   Palette, type scale and components from the homepage master prompt.
   No build step: this file is hand-authored CSS, served as-is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour — exactly as specified in the brief */
  --purple: #34206B;
  --purple-deep: #241749;
  --lime: #5A9C4E;
  --lime-light: #A6DE6F;
  --parchment: #F6F4FA;
  --ink: #221A33;
  --soft: #6B6480;
  --hairline: #E7E2F1;
  --ochre: #C2872F;
  --white: #FFFFFF;

  /* Two derived tokens, added for accessibility only — see README.
     --lime-deep carries small green text on light backgrounds (5.2:1 on white);
     --lime at 3.3:1 is reserved for graphics and display-size text. */
  --lime-deep: #3E7A34;
  --soft-on-dark: #C9C0DE;

  /* Translucent layers used on the deep purple surfaces */
  --dark-card: rgba(255, 255, 255, 0.055);
  --dark-card-hover: rgba(255, 255, 255, 0.085);
  --dark-hairline: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow: 0 10px 28px rgba(34, 26, 51, 0.10);
  --shadow-lift: 0 16px 38px rgba(34, 26, 51, 0.16);
  --shadow-dark: 0 14px 34px rgba(10, 4, 26, 0.38);

  /* Rhythm */
  --header-h: 68px;
  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 132px);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

/* Components below set display on themselves, which would otherwise beat the
   UA rule for [hidden] and leave tab panels and the mobile nav on screen. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

::selection {
  background: var(--lime-light);
  color: var(--ink);
}

/* Visible focus everywhere, keyboard or not — this site is used by tired people. */
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

.on-dark :focus-visible,
.section--deep :focus-visible,
.section--purple :focus-visible {
  outline-color: var(--lime-light);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--lime-light);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--parchment { background: var(--parchment); }
.section--white     { background: var(--white); }
.section--purple    { background: var(--purple); color: var(--white); }
.section--deep      { background: var(--purple-deep); color: var(--white); }

.section--purple h1, .section--purple h2, .section--purple h3,
.section--deep h1,  .section--deep h2,  .section--deep h3 { color: var(--white); }

.stack   { display: grid; gap: 18px; }
.stack-s { display: grid; gap: 10px; }
.stack-l { display: grid; gap: 30px; }

.measure { max-width: 62ch; }

/* --------------------------------------------------------------------------
   4. Type components
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* colour comes from --accent, set per surface below */
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.h-section {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.1vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.024em;
}

.h-card {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.16;
  letter-spacing: -0.018em;
}

.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--soft);
  /* A cap, not a width. .section-head--wide is 860px so the heading can run
     long, but a 20px lead across all of it is ~93 characters a line, well past
     the point where the eye starts losing its place returning to the margin. */
  max-width: 54ch;
}
.section--purple .lead,
.section--deep .lead,
.on-dark .lead { color: var(--soft-on-dark); }

.small     { font-size: 15px; line-height: 1.55; }
.tiny      { font-size: 13.5px; line-height: 1.5; }
.muted     { color: var(--soft); }
.on-dark .muted,
.section--purple .muted,
.section--deep .muted { color: var(--soft-on-dark); }

/* One green per surface, set once and inherited.
 *
 * The old rules listed the dark surfaces by class, and .hero and .page-hero
 * are not .section--deep — so every hero accent word fell through to the
 * light-surface green and rendered muted next to a bright lime button.
 * Declaring the accent as a variable on the surface fixes that class of bug
 * for good: a new dark surface only has to set --accent.
 *
 * Light surfaces use --lime-deep for ALL green text, eyebrows included. Plain
 * --lime is 3.3:1 on white, which clears AA for a display heading but not for
 * a 12px eyebrow, and two greens on one surface is what looked inconsistent. */
:root { --accent: var(--lime-deep); }

.section--purple,
.section--deep,
.hero,
.page-hero,
.on-dark,
.panel--order,
.site-footer { --accent: var(--lime-light); }

.accent { color: var(--accent); }
.eyebrow { color: var(--accent); }
.eyebrow--dark { color: var(--lime-light); }
.eyebrow--soft { color: var(--soft); }
.eyebrow--ochre { color: var(--ochre); }

/* House style: at most one italic accent word per heading, and only at
   display size. It is a masthead device, not general emphasis. */
.h-display .accent { font-style: italic; }

.prose p + p { margin-top: 1em; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--lime-light);
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(34, 26, 51, 0.12);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn:active { transform: translateY(0); }

.btn--lime  { --btn-bg: var(--lime-light); --btn-fg: var(--ink); }
.btn--ink   { --btn-bg: var(--purple);     --btn-fg: var(--white); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--hairline);
  box-shadow: none;
}
.btn--ghost:hover { --btn-bd: var(--purple); box-shadow: var(--shadow); }

.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--dark-hairline);
  box-shadow: none;
}
.btn--ghost-dark:hover {
  --btn-bd: var(--lime-light);
  --btn-bg: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.btn--sm { padding: 10px 20px; font-size: 14.5px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
/* The action that follows a block of content. One value, everywhere. */
.btn-row--after { margin-top: clamp(24px, 3vw, 34px); }

/* Text link with an underline that thickens rather than disappears */
.link {
  color: var(--lime-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  font-weight: 500;
  transition: text-decoration-thickness .15s ease, color .15s ease;
}
.link:hover { text-decoration-thickness: 3px; }
.on-dark .link,
.section--purple .link,
.section--deep .link { color: var(--lime-light); }

/* --------------------------------------------------------------------------
   6. Cards, chips, rules
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 34px);
  /* The card owns its internal rhythm. Nothing inside it should be setting
     its own margin — see the design-audit notes. */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card > hr { margin-block: 6px; }
.card--flat { box-shadow: none; }
.card--lift { transition: transform .2s ease, box-shadow .2s ease; }
.card--lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.card--dark {
  background: var(--dark-card);
  border-color: var(--dark-hairline);
  color: var(--white);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--white);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
}
.chip--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--dark-hairline);
  color: var(--white);
}
.chip--dark::before { background: var(--lime-light); }
.chip--plain::before { display: none; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rule {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
}
.rule--ochre { background: var(--ochre); }
.rule--dark  { background: var(--lime-light); }

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Section header block used at the top of most sections */
.section-head {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin-bottom: clamp(34px, 4.4vw, 56px);
}
.section-head--wide { max-width: 860px; }
.section-head--centre {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   7. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(36, 23, 73, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header.is-scrolled {
  background: rgba(36, 23, 73, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* Pages that don't open on a dark hero get the light treatment. */
.site-header--light {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--hairline);
}
.site-header--light.is-scrolled { background: rgba(255, 255, 255, 0.97); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.wordmark {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  white-space: nowrap;
  margin-right: auto;
}
.site-header--light .wordmark { color: var(--ink); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.site-nav > a:not(.btn) {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav > a:not(.btn):hover,
.site-nav > a:not(.btn)[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--lime-light);
}
.site-header--light .site-nav > a:not(.btn) { color: var(--soft); }
.site-header--light .site-nav > a:not(.btn):hover,
.site-header--light .site-nav > a:not(.btn)[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--lime);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--dark-hairline);
  background: transparent;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.site-header--light .nav-toggle { border-color: var(--hairline); color: var(--ink); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }

  /* Closed by default, in CSS rather than from JS, so the menu never flashes
     open between parse and script execution. Scoped to .js: without scripting
     the toggle cannot work, so the links stay visible and stacked instead. */
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 22px;
    background: var(--purple-deep);
    border-bottom: 1px solid var(--dark-hairline);
    box-shadow: var(--shadow-dark);
    /* The nav grew past a screen height once the dropdowns flattened into it.
       It hangs off a sticky header, so anything below the fold would be
       unreachable without its own scroll container. dvh accounts for mobile
       browser chrome; vh is the fallback. */
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header--light .site-nav {
    background: var(--white);
    border-bottom-color: var(--hairline);
    box-shadow: var(--shadow);
  }
  .site-nav > a:not(.btn) {
    padding: 14px 2px;
    border-bottom: 1px solid var(--dark-hairline);
  }
  .site-header--light .site-nav > a:not(.btn) { border-bottom-color: var(--hairline); }
  .site-nav .btn { margin-top: 16px; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
/* One idea, quietly: a single thread that climbs while its weight tapers away.
   No chart here — the full pathway gets its own section below. */
.hero {
  position: relative;
  background: var(--purple-deep);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(36px, 5vh, 72px);

  /* Fills the viewport below the sticky header. min-height, not height, so a
     short window or long content simply scrolls rather than being clipped.
     svh is the small viewport height: plain vh on mobile measures the window
     with the browser chrome retracted, which makes a "full height" hero
     overflow by the height of the URL bar. vh stays as the fallback. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));

  /* Content centres in the stretched space; the scroll cue sits under it. */
  display: grid;
  grid-template-rows: 1fr auto;
}
.hero > .shell { align-self: center; width: 100%; }

/* A full-viewport hero with nothing peeking below it is a dead end, so the
   foot of it names what comes next rather than showing a bare arrow. */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--soft-on-dark);
  text-decoration: none;
  transition: color .18s ease;
}
.hero__cue:hover { color: var(--white); }
.hero__cue svg {
  width: 15px;
  height: 15px;
  animation: cue-nudge 2.4s ease-in-out infinite;
}
.hero__cue:hover svg { animation-play-state: paused; }
@keyframes cue-nudge {
  0%, 62%, 100% { transform: translateY(0); }
  78%           { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue svg { animation: none; }
}

.hero__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero__top { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 48px); }
  .hero__art { justify-self: stretch; max-width: 520px; margin-inline: auto; }
}

.hero__intro {
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  max-width: 43rem;
}

.hero__lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--soft-on-dark);
  max-width: 42ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 4px;
}
.hero__link {
  font-size: 15px;
  color: var(--soft-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .15s ease, text-decoration-thickness .15s ease;
}
.hero__link:hover { color: var(--white); text-decoration-thickness: 2px; }

/* The thread, and the two words it travels between. */

/* Two washes rather than one: a cool lift under the masthead and a faint warm
   one under the chart, so the flat deep purple has somewhere to go. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 90%;
  background: radial-gradient(60% 70% at 28% 0%, rgba(52, 32, 107, 0.9), transparent 70%);
  pointer-events: none;
}
.hero > .shell { position: relative; z-index: 1; }




.hero__title {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.032em;
  /* Greedy wrapping, not balanced: line one should fill and "independence."
     should drop on its own. The explicit break below guarantees it wide. */
  text-wrap: balance;
  max-width: 15ch;
}


.hero__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  border: 1px solid var(--dark-hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--soft-on-dark);
  max-width: 54ch;
}
.hero__note strong { color: var(--white); font-weight: 600; }
.hero__note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ochre);
}

/* Compact hero for interior pages */
.page-hero {
  background: var(--purple-deep);
  color: var(--white);
  padding-block: clamp(48px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background: radial-gradient(55% 70% at 25% 0%, rgba(52, 32, 107, 0.9), transparent 70%);
  pointer-events: none;
}
.page-hero > .shell { position: relative; z-index: 1; }
.page-hero .stack-l { max-width: 820px; }
.page-hero__title {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--soft-on-dark);
  margin-bottom: 20px;
}
.breadcrumb a { color: var(--soft-on-dark); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }

/* The seven relationships a parent holds today, merging into one plan — the
   half of the story the thread at the foot of the hero does not tell. */
.hero__art { justify-self: end; width: 100%; max-width: 500px; }
.hero__weave { display: block; width: 100%; height: auto; overflow: visible; }

.hero__weave-labels text {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  fill: var(--soft-on-dark);
}
/* The unpaid coordinator is the point of the diagram, so it is the one label
   that is not muted. */
.hero__weave-labels text.is-you {
  fill: var(--white);
  font-weight: 600;
}

.hero__weave-ring { stroke: var(--lime-light); stroke-width: 1.3; stroke-opacity: 0.6; }
.hero__weave-out  { stroke: var(--lime-light); stroke-width: 3.4; stroke-linecap: round; }

.hero__weave-brand {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  fill: var(--lime-light);
}
.hero__weave-plan {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  fill: var(--lime-light);
}
.hero__weave-sub {
  font-family: var(--font-ui);
  font-size: 13.5px;
  fill: var(--soft-on-dark);
}

/* Each link draws itself in, staggered, so the consolidation is legible as a
   movement. pathLength="1" normalises every curve so one keyframe fits all. */
.hero__weave-links path {
  stroke-dasharray: 1;
  animation: weave-draw 1s cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: calc(0.3s + var(--i) * 0.06s);
}
@keyframes weave-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.hero__weave-nodes circle,
.hero__weave-labels text {
  animation: weave-fade .5s ease both;
  animation-delay: calc(0.12s + var(--i) * 0.06s);
}
@keyframes weave-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__weave-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: weave-ring .6s cubic-bezier(.2, .9, .3, 1) both 1.35s;
}
@keyframes weave-ring {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

.hero__weave-out {
  stroke-dasharray: 1;
  animation: weave-draw .5s cubic-bezier(.4, 0, .2, 1) both 1.5s;
}
.hero__weave-brand,
.hero__weave-plan,
.hero__weave-sub {
  animation: weave-fade .5s ease both 1.65s;
}

/* --------------------------------------------------------------------------
   9. The Independence Pathway (signature element)
   -------------------------------------------------------------------------- */
.pathway { margin-top: clamp(4px, 1vw, 12px); }

.pathway__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}
.pathway__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-light);
  margin: 0;
}

.pathway__legend {
  display: flex;
  gap: 20px;
  font-size: 12.5px;
  color: var(--soft-on-dark);
}
.pathway__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pathway__legend i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime-light);
  display: inline-block;
}
.pathway__legend i.is-bar {
  width: 10px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.34);
}

/* The measured area. JS reads geometry from .pathway__rail and .pathway__zone. */
.pathway__rail {
  position: relative;
  isolation: isolate;
}

.pathway__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
/* Baseline under the bars, so the chart reads as a measurement rather than an
   illustration. Drawn in the same SVG space, behind the bars. */
.pathway__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.pathway__base line {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}
.pathway__tabs { position: relative; z-index: 1; }

/* The crossover marker: the point where support falls below independence.
   Positioned by pathway.js from the same measured points as the line. */
/* The dot sits exactly on the crossing; the label hangs below-right of it.
   The independence line climbs steeply through this point, so anything placed
   level with the dot lands on top of it. Below-right is the one clear quarter. */
.pathway__crossing {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease .9s;
}
.pathway__crossing.is-in { opacity: 1; }

/* marker */
.pathway__crossing::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: 0 0 0 4px rgba(194, 135, 47, 0.2);
}
/* connector down to the label */
.pathway__crossing::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 1px;
  height: 26px;
  background: linear-gradient(rgba(194, 135, 47, 0.85), rgba(194, 135, 47, 0.25));
}
/* The label can land over a bar, where ochre on the lightened surface falls to
   3.25:1. Its own backing makes the contrast deterministic (5.7:1) wherever
   the marker happens to sit. */
.pathway__crossing span {
  position: absolute;
  left: 10px;
  top: 24px;
  display: block;
  width: max-content;
  max-width: 21ch;
  padding: 9px 13px;
  border: 1px solid rgba(194, 135, 47, 0.32);
  border-radius: 12px;
  background: rgba(28, 17, 58, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-size: 13px;
  line-height: 1.4;
  color: var(--white);
}
.pathway__crossing b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
}
@media (max-width: 900px) { .pathway__crossing { display: none; } }
.pathway__line path {
  fill: none;
  stroke: var(--lime-light);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pathway__line circle {
  fill: var(--purple-deep);
  stroke: var(--lime-light);
  stroke-width: 2.5;
}
.pathway__line.is-drawing path { transition: stroke-dashoffset 1.5s cubic-bezier(.5, .05, .3, 1); }
.pathway__line.is-drawing circle {
  opacity: 0;
  transition: opacity .35s ease;
}
.pathway__line.is-drawn circle { opacity: 1; }

.pathway__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 18px);
  align-items: end;
}

.pathway__col {
  display: grid;
  gap: 12px;
  align-content: end;
}

/* The bar zone: JS measures this element's box to place the line. */
.pathway__zone {
  height: clamp(160px, 22vw, 248px);
  display: flex;
  align-items: flex-end;
}

.pathway__bar {
  display: block;
  width: 100%;
  height: var(--h);
  min-height: 10px;
  padding: 0;
  border: 0;
  border-radius: 10px 10px 4px 4px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, transform .2s ease;
}
.pathway__bar:hover { background: rgba(255, 255, 255, 0.26); }
.pathway__bar[aria-selected="true"] {
  background: linear-gradient(180deg, var(--lime) 0%, rgba(90, 156, 78, 0.62) 100%);
}
.pathway__bar[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime-light);
}

.pathway__meta {
  display: grid;
  gap: 3px;
  text-align: left;
}
.pathway__num {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}
.pathway__name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.78);
  transition: color .2s ease;
}
.pathway__col.is-active .pathway__name { color: var(--white); }
.pathway__col.is-active .pathway__num  { color: var(--lime-light); }

.pathway__panel {
  margin-top: clamp(26px, 3vw, 38px);
  border: 1px solid var(--dark-hairline);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  padding: clamp(20px, 2.6vw, 30px);
  display: grid;
  gap: 14px;
}
.pathway__panel h3 {
  font-size: clamp(21px, 2.2vw, 26px);
  color: var(--white);
}
.pathway__panel p {
  color: var(--soft-on-dark);
  max-width: 72ch;
  font-size: 15.5px;
}
.pathway__panel-stage {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime-light);
}

/* Below 720px the chart collapses to a vertical list: number, thin accent
   bar, label. The line and legend go away; the panel stays. */
@media (max-width: 720px) {
  .pathway__legend { display: none; }
  .pathway__line   { display: none; }

  .pathway__tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .pathway__col {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "num zone" "num meta";
    align-items: center;
    align-content: center;
    gap: 0 12px;
    padding-block: 11px;
    border-bottom: 1px solid var(--dark-hairline);
  }
  .pathway__col:last-child { border-bottom: 0; }

  .pathway__num {
    grid-area: num;
    align-self: center;
    font-size: 13px;
    grid-row: span 2;
  }
  .pathway__meta {
    grid-area: meta;
    display: contents;
  }
  .pathway__name {
    grid-area: zone;
    align-self: center;
    font-size: 17px;
  }
  .pathway__zone {
    grid-area: zone;
    height: auto;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
  }
  .pathway__bar {
    pointer-events: auto;
    /* Scale the shared --h rather than capping it: a max-width would flatten
       100% and 78% to the same length and lose the rise-then-fall shape. */
    width: calc(var(--h) * 0.5);
    min-width: 28px;
    /* 28px of hit area, 8px of visible bar. Below the 720px breakpoint these
       are touch targets, and 8px would be well under the 24px minimum. */
    height: 28px;
    min-height: 28px;
    padding-block: 10px;
    background-clip: content-box;
    border-radius: var(--radius-pill);
  }
  .pathway__bar[aria-selected="true"] {
    background: var(--lime-light);
  }
  .pathway__bar[aria-selected="true"]::after { display: none; }
}

/* --------------------------------------------------------------------------
   10. The problem: scatter vs order
   -------------------------------------------------------------------------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}
@media (max-width: 860px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(22px, 2.8vw, 34px);
  /* Flex so the closing list can pin to the foot. Side-by-side panels stretch
     to match, and whichever has less to say was leaving ~70px of dead space
     under it — a ragged bottom edge on a pair that is meant to be compared. */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.panel > :last-child { margin-top: auto; }
.panel__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.panel--scatter { background: var(--white); }
.panel--order {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: var(--white);
}
.panel--order .panel__label { color: var(--lime-light); }

.scatter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding-block: 6px;
}
.scatter li {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px dashed #CFC7E3;
  background: var(--parchment);
  font-size: 14px;
  color: var(--soft);
  transition: transform .25s ease;
}
.scatter li:nth-child(1) { transform: rotate(-2.4deg); }
.scatter li:nth-child(2) { transform: rotate(1.8deg)  translateY(4px); }
.scatter li:nth-child(3) { transform: rotate(-1.2deg) translateY(-3px); }
.scatter li:nth-child(4) { transform: rotate(2.6deg); }
.scatter li:nth-child(5) { transform: rotate(-1.9deg) translateY(5px); }
.scatter li:nth-child(6) { transform: rotate(1.3deg)  translateY(-2px); }
.scatter li:last-child {
  border-style: solid;
  border-color: var(--ochre);
  color: var(--ink);
  background: var(--white);
  font-weight: 500;
  transform: rotate(-0.6deg);
}

.ordered {
  display: grid;
  gap: 2px;
}
.ordered li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--dark-hairline);
  font-size: 16.5px;
}
.ordered li:last-child { border-bottom: 0; }
.ordered b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--lime-light);
  min-width: 24px;
}

/* --------------------------------------------------------------------------
   11. Stage table
   -------------------------------------------------------------------------- */
.stages {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.stages__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--hairline);
  transition: background-color .2s ease;
}
.stages__row:last-child { border-bottom: 0; }
.stages__row:hover { background: var(--parchment); }

.stages__row--head {
  padding-block: 14px;
  background: var(--parchment);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.stages__row--head span:last-child { color: var(--ochre); }

.stages__num {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--lime);
  line-height: 1;
  padding-top: 2px;
}
.stages__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 25px);
  letter-spacing: -0.018em;
  margin-bottom: 8px;
}
.stages__what { color: var(--soft); font-size: 15.5px; }
.stages__exit {
  border-left: 2px solid var(--ochre);
  padding-left: 18px;
  font-size: 15.5px;
}
.stages__exit .eyebrow { margin-bottom: 7px; }

/* When the table carries a column header, the per-row label repeats it five
   times. Drop the repeat at desktop; below 820px the header row is gone and
   the per-row label is the only thing naming the column. */
@media (min-width: 821px) {
  .stages--headed .stages__exit .eyebrow { display: none; }
}

@media (max-width: 820px) {
  .stages__row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px 16px;
  }
  .stages__row--head { display: none; }
  .stages__num { grid-row: span 2; }
  .stages__exit { margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   12. Independence File mock card
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  /* Top-aligned by default. Centring two columns of unequal height leaves
     them a few pixels out of true, which reads as a mistake rather than as
     centring. Add .split--centre where the optical centre is wanted. */
  align-items: start;
}
.split--centre { align-items: center; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

.filecard {
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.filecard__top {
  background: var(--purple-deep);
  color: var(--white);
  padding: 20px clamp(20px, 2.4vw, 26px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.filecard__top h3 {
  font-size: 20px;
  color: var(--white);
  margin-bottom: 3px;
}
.filecard__top .tiny { color: var(--soft-on-dark); }
.filecard__badge {
  flex: none;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--lime-light);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.filecard__rows { display: grid; }
.filecard__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 15px clamp(20px, 2.4vw, 26px);
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.filecard__row:last-child { border-bottom: 0; }
.filecard__row dt { color: var(--soft); font-size: 14px; }
.filecard__row dd { margin: 0; font-weight: 500; text-align: right; }
.filecard__row dd small { display: block; font-weight: 400; color: var(--soft); font-size: 13px; }
.filecard__foot {
  padding: 16px clamp(20px, 2.4vw, 26px);
  background: var(--parchment);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--soft);
}

.meter {
  display: block;   /* it is a <span> inside <dd>; width/height need a block box */
  width: 96px;
  height: 6px;
  border-radius: 3px;
  background: var(--hairline);
  overflow: hidden;
  margin-top: 7px;
  margin-left: auto;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--lime);
}

/* --------------------------------------------------------------------------
   13. Rules grid (how we're built)
   -------------------------------------------------------------------------- */
.rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 760px) { .rules { grid-template-columns: minmax(0, 1fr); } }

.rulecard {
  border: 1px solid var(--dark-hairline);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  padding: clamp(22px, 2.6vw, 32px);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: background-color .2s ease, transform .2s ease;
}
.rulecard:hover { background: var(--dark-card-hover); transform: translateY(-2px); }
.rulecard__n {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--lime-light);
  letter-spacing: 0.06em;
}
.rulecard h3 { font-size: clamp(19px, 2vw, 23px); }
.rulecard p  { color: var(--soft-on-dark); font-size: 15.5px; }

/* --------------------------------------------------------------------------
   14. Metric cards (Independence Report)
   -------------------------------------------------------------------------- */
.metric {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(20px, 2.4vw, 28px);
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 100%;
}
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 60px);
  line-height: 1;
  color: var(--purple);
  letter-spacing: -0.03em;
}
.metric__label { font-size: 15px; font-weight: 500; }
.metric__note  { font-size: 13.5px; color: var(--soft); }

.note-bar {
  margin-top: clamp(20px, 2.4vw, 28px);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  border: 1px dashed #CFC7E3;
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14.5px;
  color: var(--soft);
}
.note-bar::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ochre);
}
.note-bar strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Ways in
   -------------------------------------------------------------------------- */
.wayin {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(22px, 2.6vw, 32px);
  /* Flex, not grid: the card needs one flexible gap so the action pins to the
     bottom. With grid + align-content:start the buttons sat at three
     different heights, each floating above a pocket of dead space. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wayin:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: #D8CFEC;
}
.wayin h3 { font-size: clamp(21px, 2.2vw, 26px); }
.wayin p  { color: var(--soft); font-size: 15.5px; }
/* Pushed to the foot of the card, and full width so a three-word-longer label
   cannot wrap where its neighbours do not. */
.wayin .btn {
  margin-top: auto;
  width: 100%;
}

/* Ring-bulleted list, used inside way-in cards and anywhere a short list of
   commitments needs more air than a plain <ul>. */
.ticklist { display: grid; gap: 9px; }
.ticklist li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--lime);
}
.ticklist--dark li::before { border-color: var(--lime-light); }
/* Things we deliberately do not do — same shape, different signal. */
.ticklist--not li::before {
  border-color: var(--ochre);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   16. Closing CTA + footer
   -------------------------------------------------------------------------- */
.cta {
  text-align: center;
  display: grid;
  gap: 22px;
  justify-items: center;
  max-width: 720px;
  margin-inline: auto;
}
.cta .btn-row { justify-content: center; }
.cta__promise {
  margin-top: 6px;
  padding: 16px 22px;
  border: 1px solid var(--dark-hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  font-size: 15px;
  color: var(--soft-on-dark);
  max-width: 58ch;
}
.cta__promise strong { color: var(--white); font-weight: 600; }

.site-footer {
  background: var(--purple-deep);
  color: var(--soft-on-dark);
  padding-block: 44px 34px;
  border-top: 1px solid var(--dark-hairline);
  font-size: 14px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
  align-items: center;
  justify-content: space-between;
}
.site-footer .wordmark { color: var(--white); margin-right: 0; }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.site-footer a { color: var(--soft-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__legal {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--dark-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(201, 192, 222, 0.72);
}

/* --------------------------------------------------------------------------
   17. Contact form
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 500; }
.field .hint { font-size: 13px; color: var(--soft); }
.field input,
.field textarea,
.field select {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(52, 32, 107, 0.12);
  outline: none;
}
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .field--row { grid-template-columns: minmax(0, 1fr); } }

.form__status {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--parchment);
  font-size: 14.5px;
}
.form__status[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */
/* Scoped to .js, which an inline script in <head> sets. If the stylesheet
   loads but site.js does not, every .reveal section would otherwise sit at
   opacity 0 forever — a content site must never need JS to show its text. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover,
  .card--lift:hover,
  .wayin:hover,
  .rulecard:hover { transform: none; }
}

/* Anything that needs JS to be useful is hidden until JS confirms it can run.
   The inline script in <head> adds `js` before first paint. */
html:not(.js) .js-only { display: none !important; }

/* ==========================================================================
   19. Dropdown navigation
   Added when the site grew past a flat six-link nav. Hover opens on pointer
   devices, click/Enter opens everywhere, Escape closes. Below 880px the whole
   thing flattens into the stacked mobile menu and the dropdowns become plain
   labelled groups — nothing to open, nothing to trap focus in.
   ========================================================================== */
.site-nav__group { position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding-block: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav__link:hover,
.site-nav__link[aria-current],
.site-nav__group[data-open] .site-nav__link {
  color: var(--white);
  border-bottom-color: var(--lime-light);
}
.site-header--light .site-nav__link { color: var(--soft); }
.site-header--light .site-nav__link:hover,
.site-header--light .site-nav__link[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--lime);
}

.site-nav__caret {
  width: 9px;
  height: 6px;
  flex: none;
  opacity: .7;
  transition: transform .18s ease;
}
.site-nav__group[data-open] .site-nav__caret { transform: rotate(180deg); }

.site-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 120;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 10px;
  min-width: 300px;
}
/* Flipped by JS when a left-anchored panel would overflow the viewport. */
.site-menu--end { left: auto; right: -18px; }

.site-menu::before {
  /* Bridges the gap so the pointer can travel from trigger to panel. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.site-menu__inner { display: flex; gap: 6px; }
.site-menu__col { min-width: 250px; }
.site-menu__col + .site-menu__col {
  border-left: 1px solid var(--hairline);
  padding-left: 10px;
  margin-left: 4px;
}
.site-menu__title {
  margin: 10px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.site-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  transition: background-color .14s ease;
}
.site-menu a span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--soft);
}
.site-menu a:hover { background: var(--parchment); }
.site-menu a[aria-current="page"] {
  background: var(--parchment);
  box-shadow: inset 3px 0 0 var(--lime);
}

.site-nav__cta { margin-left: 4px; }

@media (max-width: 880px) {
  .site-nav__group { position: static; }
  .site-nav__trigger {
    /* No disclosure behaviour on mobile — the group heading is just a label
       above its own links, so there is nothing to open or to trap focus in. */
    pointer-events: none;
    width: 100%;
    justify-content: flex-start;
    padding: 16px 2px 6px;
    border-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime-light);
  }
  .site-header--light .site-nav__trigger { color: var(--lime-deep); }
  .site-nav__caret { display: none; }

  .site-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .site-menu::before { display: none; }
  .site-menu__inner { display: block; }
  .site-menu__col + .site-menu__col {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .site-menu__title { display: none; }
  .site-menu a {
    padding: 13px 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--dark-hairline);
    color: rgba(255, 255, 255, 0.82);
  }
  .site-header--light .site-menu a {
    color: var(--soft);
    border-bottom-color: var(--hairline);
  }
  .site-menu a span { display: none; }
  .site-menu a:hover { background: none; color: var(--white); }
  .site-menu a[aria-current="page"] {
    background: none;
    box-shadow: none;
    color: var(--white);
    border-bottom-color: var(--lime-light);
  }
  .site-nav__cta { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   20. Tiles (linked cards)
   -------------------------------------------------------------------------- */
.tile {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: #D8CFEC;
}
.tile h3 { transition: color .15s ease; }
.tile:hover h3 { color: var(--purple); }

/* --------------------------------------------------------------------------
   21. Question accordions
   -------------------------------------------------------------------------- */
.qa-list {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.qa {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 2.2vw, 24px);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: -0.015em;
  line-height: 1.25;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.qa[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { background: var(--parchment); }
.qa__body {
  padding: 0 clamp(18px, 2.2vw, 24px) 20px;
  color: var(--soft);
  font-size: 15.5px;
  max-width: 68ch;
}

.qa--dark {
  background: var(--dark-card);
  border-color: var(--dark-hairline);
}
.qa--dark summary { color: var(--white); }
.qa--dark summary::after { border-color: var(--lime-light); }
.qa--dark summary:hover { background: var(--dark-card-hover); }
.qa--dark .qa__body { color: var(--soft-on-dark); }

/* --------------------------------------------------------------------------
   22. Long-form article
   -------------------------------------------------------------------------- */
.article {
  /* ~75 characters. 68ch measured at 83, which is past the comfortable range
     for continuous reading. */
  max-width: 62ch;
  margin-inline: auto;
  font-size: 17.5px;
  line-height: 1.68;
}
.article h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin-top: 2em;
  margin-bottom: .5em;
}
.article h2:first-child { margin-top: 0; }
.article h3 {
  font-size: clamp(19px, 2.1vw, 23px);
  margin-top: 1.7em;
  margin-bottom: .4em;
}
.article p { margin-bottom: 1.05em; color: var(--soft); }
.article p strong { color: var(--ink); font-weight: 600; }
.article em { font-style: italic; }
.article .ticklist { margin: 1.2em 0 1.6em; gap: 12px; }
.article .ticklist li { font-size: 16.5px; color: var(--soft); }
.article .ticklist li strong { color: var(--ink); }
.article .note-bar { margin-top: 2em; }

/* --------------------------------------------------------------------------
   23. Glossary
   -------------------------------------------------------------------------- */
.glossary__jump { margin-bottom: clamp(28px, 3.4vw, 44px); }
.glossary__jump .chip {
  min-width: 38px;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease;
}
.glossary__jump .chip:hover { border-color: var(--lime); color: var(--lime-deep); }

.glossary__group + .glossary__group { margin-top: clamp(30px, 3.6vw, 48px); }
.glossary__letter {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--lime);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 110px;
}
.glossary__list { display: grid; }
.glossary__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: clamp(14px, 2.4vw, 36px);
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.glossary__item dt {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 21px);
  letter-spacing: -0.015em;
}
.glossary__also {
  display: block;
  margin-top: 5px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--soft);
  letter-spacing: 0;
}
.glossary__item dd {
  margin: 0;
  color: var(--soft);
  font-size: 15.5px;
}
@media (max-width: 720px) {
  .glossary__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* --------------------------------------------------------------------------
   24. Expanded footer
   -------------------------------------------------------------------------- */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: 34px;
}
.site-footer__brand { display: grid; gap: 12px; align-content: start; }
.site-footer__brand .wordmark { margin-right: 0; }
.site-footer__line {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--white);
  letter-spacing: -0.015em;
}
.site-footer__contact { display: grid; gap: 4px; margin-top: 6px; }
.site-footer__contact a { color: var(--lime-light); text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.site-footer__title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}
.site-footer__col ul { display: grid; gap: 8px; }
.site-footer__legal-links { display: flex; gap: 18px; }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .site-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ==========================================================================
   25. Interaction layer
   The things that make the site feel responsive to the person using it rather
   than a document that happens to be online. All of it is scoped to .js and
   all of it collapses under prefers-reduced-motion.
   ========================================================================== */

/* -------------------------------------------------- reading progress bar -- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 150;
  pointer-events: none;
  background: transparent;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lime), var(--lime-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
  /* transform, not width — this runs on every scroll frame. */
  will-change: transform;
}

/* ------------------------------------------------------------ back to top -- */
.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 140;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  /* Hidden from pointer and keyboard while out of view. visibility is
     deliberately NOT in the transition list: transitioned visibility only
     flips when the transition completes, which strands the button if frames
     are throttled. Opacity carries the animation instead. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, border-color .15s ease;
}
.to-top.is-in {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}
.to-top:hover { border-color: var(--lime); transform: translateY(-2px); }
.to-top svg { width: 16px; height: 16px; }

/* --------------------------------------------------- staggered reveals ---- */
/* site.js gives each revealing element a delay based on its position among its
   revealing siblings, so a row of cards arrives in sequence instead of all at
   once. The delay is cleared when the transition ends so hover states, which
   share the transition property, do not inherit it. */

/* ------------------------------------------------------- section anchors -- */
/* Sticky-header-aware anchor offsets already exist via scroll-padding-top. */

/* ------------------------------------------------------------- accordions -- */
/* <details> content is display:none when closed, so height cannot be animated.
   Fading the body in on open reads as motion without fighting the element. */
.qa[open] .qa__body {
  animation: qa-open .32s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes qa-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.qa { transition: border-color .18s ease, background-color .18s ease; }
.qa[open] { border-color: #D8CFEC; }
.qa--dark[open] { border-color: rgba(255, 255, 255, 0.28); }

/* --------------------------------------------------------- stage rows ----- */
.stages__row { position: relative; }
.stages__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.stages__row:hover::before { transform: scaleY(1); }
.stages__row--head::before { display: none; }
.stages__row .stages__num { transition: color .2s ease, transform .2s ease; }
.stages__row:hover .stages__num { transform: translateX(3px); }

/* ------------------------------------------------- the problem, resolved -- */
/* Hovering the scattered panel straightens every tag. The section argues that
   we take the mess and order it; this lets the panel do that literally. */
.panel--scatter .scatter li {
  transition: transform .45s cubic-bezier(.22, .8, .3, 1), border-color .3s ease;
}
.panel--scatter:hover .scatter li,
.panel--scatter:focus-within .scatter li {
  transform: rotate(0deg) translateY(0);
  border-color: #CFC7E3;
}
.panel--scatter:hover .scatter li:last-child,
.panel--scatter:focus-within .scatter li:last-child {
  border-color: var(--ochre);
}

/* ------------------------------------------------------------ metric cards */
.metric { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: #D8CFEC;
}

/* --------------------------------------------------------------- motion --- */
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .to-top { transition: opacity .001ms; }
  .to-top:hover { transform: none; }
  .stages__row::before { transition: none; }
  .stages__row:hover .stages__num { transform: none; }
  .panel--scatter .scatter li { transition: none; }
}

/* ==========================================================================
   26. Illustrations
   Generated in src/data/marks.js. The two problem diagrams are the argument
   of that section, not decoration — they carry their own palette. The small
   marks inherit currentColor so the card they sit in sets the colour.
   ========================================================================== */

/* ------------------------------------------------ the problem, two ways --- */
.dia {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 4px 6px;
}
.dia__labels text,
.dia__hub-label,
.dia__us-label,
.dia__us-mark {
  font-family: var(--font-ui);
}
.dia__labels text { font-size: 13px; font-weight: 500; }
.dia__hub-label { font-size: 14px; font-weight: 600; }
.dia__us-mark { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; }
.dia__us-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Today: on white. Every line belongs to the parent, and the six never touch. */
.dia--today .dia__spokes line {
  stroke: var(--soft);
  stroke-opacity: 0.5;
  stroke-width: 1.2;
}
.dia--today .dia__nodes circle { fill: var(--soft); }
.dia--today .dia__labels text { fill: var(--soft); }
.dia--today .dia__hub--strain {
  fill: var(--white);
  stroke: var(--ochre);
  stroke-width: 1.8;
}
.dia--today .dia__hub-label { fill: var(--ink); }

/* With us: on deep purple. One line leaves the parent; we hold the rest. */
.dia--with-us .dia__one {
  stroke: var(--lime-light);
  stroke-width: 3;
  stroke-linecap: round;
}
.dia--with-us .dia__hub--you {
  fill: var(--purple-deep);
  stroke: var(--soft-on-dark);
  stroke-width: 1.6;
}
.dia--with-us .dia__hub--us {
  fill: rgba(166, 222, 111, 0.12);
  stroke: var(--lime-light);
  stroke-width: 2;
}
.dia--with-us .dia__hub-label { fill: var(--white); }
/* The hub says who it is, stacked, rather than an initialism nobody decodes. */
.dia--with-us .dia__us-mark { fill: var(--lime-light); font-size: 11.5px; }
.dia--with-us .dia__labels text { fill: var(--soft-on-dark); }
.dia--with-us .dia__nodes--held circle { fill: var(--soft-on-dark); fill-opacity: .75; }
.dia--with-us .dia__spokes--held line {
  stroke: var(--soft-on-dark);
  stroke-opacity: .4;
  stroke-width: 1.2;
}

/* Both diagrams draw themselves in, spoke by spoke. */
.dia__spokes line,
.dia__spokes path,
.dia__one {
  stroke-dasharray: 1;
  animation: dia-draw .8s cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.075s);
}
.dia__one { animation-delay: .1s; }
@keyframes dia-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
.dia__nodes circle,
.dia__labels text {
  animation: dia-fade .45s ease both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.075s);
}
@keyframes dia-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------ small marks - */
.mark { width: 44px; height: 44px; display: block; }

.rulecard__mark { color: var(--lime-light); display: block; margin-bottom: 2px; }
.wayin__mark { color: var(--lime-deep); display: block; margin-bottom: 4px; }

/* ------------------------------------------------ report placeholder plot - */
.plot {
  width: 120px;
  height: auto;
  color: var(--purple);
  margin-block: 2px 6px;
}

/* --------------------------------------------------- stage numbers as steps */
/* The five stages are a sequence, so the numbers read as step markers rather
   than as a column of large figures. */
.stages__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--lime-deep);
  padding-top: 0;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.stages__row:hover .stages__num {
  border-color: var(--lime);
  color: var(--lime-deep);
}
@media (max-width: 820px) {
  .stages__num { width: 38px; height: 38px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dia__spokes line,
  .dia__spokes path,
  .dia__one,
  .dia__nodes circle,
  .dia__labels text { animation: none; stroke-dasharray: none; }
}

/* A metric card reads as value-plus-trend. Both are pending, and showing the
   two together makes that one statement instead of two competing placeholders. */
.metric__figure {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.metric__figure .metric__value { line-height: .82; }
.metric__figure .plot { flex: none; margin-block: 0 4px; opacity: .8; }
@media (max-width: 620px) {
  .metric__figure .plot { display: none; }
}

/* The two problem diagrams carry six labels in a 500-unit viewBox. Below about
   760px the panel is narrow enough that those labels render under 8px, which
   is unreadable — and a diagram nobody can read is worse than no diagram. Both
   panels carry the full argument in text, so they stand alone here. */
@media (max-width: 760px) {
  .dia { display: none; }
}

/* ---------------------------------------------- the five-stage orientation */
/* Service and condition pages are entry points from search. This says where
   the page sits in the pathway before the reader has to work it out. */
.strip-band { padding-block: clamp(30px, 4vw, 48px); }
.strip__caption {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 14px;
}
.strip {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}
.strip__rail { stroke: var(--hairline); stroke-width: 2; }
.strip__run {
  stroke: var(--lime);
  stroke-width: 3;
  stroke-linecap: round;
  /* Drawn on load in the direction the pathway runs. */
  stroke-dasharray: 1;
  animation: strip-run .9s cubic-bezier(.4, 0, .2, 1) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.12s);
}
@keyframes strip-run {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
.strip__node { fill: var(--white); stroke: var(--hairline); stroke-width: 2; }
.strip__node.is-on { fill: var(--lime); stroke: var(--lime); }
.strip__label {
  font-family: var(--font-ui);
  font-size: 13px;
  fill: var(--soft);
}
.strip__label.is-on { fill: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .strip__label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .strip__run { animation: none; stroke-dasharray: none; }
}

/* --------------------------------------------------------- the fee shape - */
/* The fees page argues that the last stage costs less than the first ones.
   That is a shape, so the page shows one before it shows the table. */
.fee-wrap { margin-bottom: clamp(26px, 3.4vw, 40px); }
.fee { display: block; width: 100%; max-width: 620px; height: auto; }
.fee-wrap__note { margin-top: 10px; max-width: 620px; }

.fee__base { stroke: var(--hairline); stroke-width: 1.5; }
.fee__bar {
  fill: var(--hairline);
  transform-origin: 50% 100%;
  animation: fee-grow .7s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(0.1s + var(--i) * 0.09s);
}
/* Build is the peak and Step Back is the point being made, so those two carry
   the colour; the rest are context. */
.fee__col.is-peak .fee__bar { fill: var(--lime); }
.fee__col.is-last .fee__bar { fill: var(--lime-light); }
.fee__label {
  font-family: var(--font-ui);
  font-size: 13px;
  fill: var(--soft);
}
.fee__col.is-peak .fee__label,
.fee__col.is-last .fee__label { fill: var(--ink); font-weight: 600; }

@keyframes fee-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fee__bar { animation: none; }
}

/* Rule marks on a light surface need the readable green, not the on-dark one. */
.rulecard__mark--light { color: var(--lime-deep); }

/* A way-in page announces which of the three it is, above the eyebrow. */
.page-hero__mark {
  display: block;
  color: var(--lime-light);
  margin-bottom: 18px;
}
.page-hero__mark .mark { width: 56px; height: 56px; }

/* ==========================================================================
   27. Sub-menu, restyled
   A white slab hanging off a deep purple header read as a different site.
   The panel now belongs to the header: same family of colour, a lime rule
   tying it to the trigger above it, and one accent for the current page.
   ========================================================================== */
.site-menu {
  background: #2E1D5C;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(10, 4, 26, 0.5);
  padding: 12px;
  overflow: hidden;
}
/* A short lime rule under the trigger, so the open panel is visibly attached
   to the word that opened it. */
.site-nav__group[data-open] .site-nav__trigger { border-bottom-color: var(--lime-light); }

.site-menu__title {
  color: var(--lime-light);
  opacity: .85;
}
.site-menu__col + .site-menu__col {
  border-left-color: rgba(255, 255, 255, 0.12);
}

.site-menu a {
  color: var(--white);
  border-radius: 11px;
}
.site-menu a span { color: var(--soft-on-dark); }
.site-menu a:hover,
.site-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}
.site-menu a:hover span { color: rgba(255, 255, 255, 0.78); }

.site-menu a[aria-current="page"] {
  background: rgba(166, 222, 111, 0.12);
  box-shadow: inset 3px 0 0 var(--lime-light);
  color: var(--white);
}
.site-menu a[aria-current="page"] span { color: var(--soft-on-dark); }

/* Below 880px the panel flattens into the stacked mobile menu and must not
   carry its own surface at all. */
@media (max-width: 880px) {
  .site-menu {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }
  .site-menu a { border-radius: 0; }
  .site-menu a:hover { background: none; }
  .site-menu a[aria-current="page"] { background: none; box-shadow: none; }
}

/* A wider gutter between the two columns, where the pair needs more air. */
.split--wide { gap: clamp(20px, 3vw, 48px); }

/* A secondary note beside an exit criterion — same shape, no ochre rule. */
.stages__exit--muted { border-left-color: var(--hairline); }