/* ============================================================================
   Vanderschaaf Fitness — public landing.

   World: the coach's movement plate. A spruce-ink ground carries one figure
   drawn in chalk line, and the coaching lands on it as madder marks at the
   joints. Chalk is the drawing and the prose; madder is the correction and the
   only action colour; sage is the shape you left behind. Lettering is Big
   Shoulders Display (the plate's condensed gothic) over Inter prose, with
   JetBrains Mono reserved for anchors, states and anything measured.

   Loaded ONLY while the landing is mounted (Landing.tsx injects and removes the
   <link>), so the document-level rules below never reach /login, /fitness or
   /diet.
   ========================================================================== */

:root {
  /* Plate — spruce ink. The page is drenched in it. */
  --vf-plate: #0e1714;
  --vf-plate-2: #14211c;
  --vf-plate-3: #1b2b25;
  --vf-rule: #2b4038;
  --vf-rule-soft: #21332c;

  /* Chalk — the drawing and the reading. Secondary tones are tinted from the
     ground's own hue, never grey. */
  --vf-chalk: #eef3ef;
  --vf-chalk-2: #aec0b6;
  --vf-chalk-3: #82988c;

  /* Madder — the correction, and the one action colour. -600 takes chalk text,
     -400 is the mark that reads on the plate, -800 is the drenched close band. */
  --vf-madder-800: #7c2717;
  --vf-madder-700: #93301d;
  --vf-madder-600: #b23a26;
  --vf-madder-500: #cb4530;
  --vf-madder-400: #e2543f;

  /* Sage — the ghost of the pose before. */
  --vf-sage: #7fa287;

  --vf-maxw: 1200px;
  --vf-gutter: 22px;

  --vf-display: 'Big Shoulders Display', 'Archivo', system-ui, sans-serif;
  --vf-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vf-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --vf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vf-tag: 13px;
}

/* ── document-level: alive only while the landing is mounted ─────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vf-plate);
  color: var(--vf-chalk);
  font-family: var(--vf-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--vf-madder-600); color: var(--vf-chalk); }
html { scrollbar-color: var(--vf-rule) var(--vf-plate); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--vf-plate); }
::-webkit-scrollbar-thumb {
  background: var(--vf-rule);
  border: 3px solid var(--vf-plate);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--vf-madder-700); }

/* ── page base ───────────────────────────────────────────────────────────── */
.vf-page, .vf-page *, .vf-page *::before, .vf-page *::after { box-sizing: border-box; }
.vf-page :focus-visible {
  outline: 2px solid var(--vf-madder-400);
  outline-offset: 3px;
  border-radius: 2px;
}
.vf-page h1, .vf-page h2, .vf-page h3, .vf-page h4 {
  font-family: var(--vf-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: 0.002em;
  margin: 0;
  text-wrap: balance;
}
.vf-page p { margin: 0; }
.vf-page a { color: inherit; text-decoration: none; }
.vf-page ul, .vf-page ol { list-style: none; margin: 0; padding: 0; }
.vf-page svg { display: block; }
.vf-page img { display: block; max-width: 100%; }
.vf-page ::selection { background: var(--vf-madder-600); color: var(--vf-chalk); }

.vf-shell { width: 100%; max-width: var(--vf-maxw); margin: 0 auto; padding: 0 var(--vf-gutter); }
.vf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The plate's annotation voice — anchors, states, anything measured. */
.vf-data {
  font-family: var(--vf-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--vf-chalk-3);
}

/* ── the page's punctuation: a hairline with a madder registration tick ──── */
.vf-band { position: relative; padding: 104px 0 108px; }
.vf-band::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--vf-rule-soft);
}
.vf-band::after {
  content: ''; position: absolute; top: -2px; height: 5px; width: 34px;
  left: max(var(--vf-gutter), calc(50% - (var(--vf-maxw) / 2) + var(--vf-gutter)));
  background: var(--vf-madder-500);
}
.vf-band-2 { background: var(--vf-plate-2); }
.vf-page [id] { scroll-margin-top: 88px; }

.vf-head { max-width: 720px; }
.vf-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.vf-lede {
  margin-top: 32px;
  max-width: 620px;
  color: var(--vf-chalk-2);
  font-size: 1.0625rem;
}

/* ── actions ─────────────────────────────────────────────────────────────── */
.vf-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vf-display);
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em;
  line-height: 1; text-transform: uppercase;
  padding: 17px 26px 15px;
  border: 1.5px solid transparent;
  transition: background 0.2s var(--vf-ease), color 0.2s var(--vf-ease),
              border-color 0.2s var(--vf-ease), transform 0.2s var(--vf-ease);
}
.vf-btn svg { transition: transform 0.25s var(--vf-ease); }
.vf-btn:hover svg { transform: translateX(4px); }
.vf-page .vf-btn-fill {
  background: var(--vf-madder-600); color: var(--vf-chalk);
  border-color: var(--vf-madder-600);
}
.vf-btn-fill:hover { background: var(--vf-madder-500); border-color: var(--vf-madder-500); }
.vf-btn-fill:active { transform: translateY(1px); }
.vf-page .vf-btn-line {
  border-color: var(--vf-rule); color: var(--vf-chalk);
}
.vf-btn-line:hover { border-color: var(--vf-chalk-3); background: var(--vf-plate-3); }
.vf-page .vf-btn-chalk {
  background: var(--vf-chalk); color: var(--vf-madder-800); border-color: var(--vf-chalk);
}
.vf-btn-chalk:hover { background: color-mix(in srgb, var(--vf-chalk) 60%, white); }
/* A number is data, so it takes the data voice: the display face's condensed
   digits line their crossbars up into what reads as a strikethrough at 16px. */
.vf-btn-sm {
  font-family: var(--vf-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; padding: 12px 14px;
}

/* A quiet action: the rule under it is the affordance. */
.vf-page .vf-link {
  font-family: var(--vf-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vf-chalk-2);
  border-bottom: 1px solid var(--vf-rule);
  padding-bottom: 3px;
  transition: color 0.2s var(--vf-ease), border-color 0.2s var(--vf-ease);
}
.vf-page .vf-link:hover { color: var(--vf-chalk); border-color: var(--vf-madder-400); }

/* ── site bar ────────────────────────────────────────────────────────────── */
.vf-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: color-mix(in srgb, var(--vf-plate) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: background 0.25s var(--vf-ease), border-color 0.25s var(--vf-ease);
}
.vf-bar.is-scrolled {
  background: color-mix(in srgb, var(--vf-plate) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--vf-rule-soft);
}
.vf-bar-inner {
  display: flex; align-items: center; gap: 24px;
  height: 66px;
}
.vf-mark {
  font-family: var(--vf-display);
  font-size: 1.3rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vf-chalk);
  display: inline-flex; align-items: baseline; gap: 0.42em;
  line-height: 1;
}
.vf-mark i { font-style: normal; color: var(--vf-madder-400); font-weight: 400; }
.vf-bar-nav { display: flex; gap: 22px; margin-left: auto; }
.vf-bar-nav a {
  font-family: var(--vf-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--vf-chalk-2);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color 0.2s var(--vf-ease), border-color 0.2s var(--vf-ease);
}
.vf-bar-nav a:hover { color: var(--vf-chalk); border-bottom-color: var(--vf-madder-400); }
.vf-bar-cta { display: flex; align-items: center; gap: 16px; }
.vf-menu {
  display: none; background: none; border: 1px solid var(--vf-rule);
  color: var(--vf-chalk); padding: 8px; cursor: pointer;
}
.vf-menu:hover { border-color: var(--vf-chalk-3); }
.vf-drawer {
  display: none; flex-direction: column; gap: 2px;
  background: var(--vf-plate-2); border-top: 1px solid var(--vf-rule-soft);
  padding: 10px var(--vf-gutter) 18px;
}
.vf-drawer a {
  font-family: var(--vf-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vf-chalk-2); padding: 12px 0;
  border-bottom: 1px solid var(--vf-rule-soft);
}
.vf-drawer a:last-child { border-bottom: 0; }

/* ── hero: the plate's title block ───────────────────────────────────────── */
.vf-hero { padding: 120px 0 72px; position: relative; }
.vf-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px; align-items: center;
}
.vf-hero h1 {
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 0.9;
  max-width: 13ch;
}
/* The display face is set at 0.9 line-height, so its box ends above the
   descenders; the pad is what the lede actually clears. */
.vf-hero h1 { padding-bottom: 14px; }
.vf-hero h1 em { font-style: normal; color: var(--vf-madder-400); }
.vf-hero-lede {
  margin-top: 44px; max-width: 520px;
  color: var(--vf-chalk-2); font-size: 1.09375rem;
}
.vf-hero-actions {
  margin-top: 38px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.vf-hero-where {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--vf-rule-soft);
  display: flex; gap: 26px; flex-wrap: wrap;
}
.vf-hero-where span, .vf-hero-where a {
  font-family: var(--vf-mono); font-size: 0.6875rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--vf-chalk-3);
}
.vf-hero-where a:hover { color: var(--vf-chalk-2); }

/* The frontispiece: the same figure the story moves, at rest. */
.vf-plate {
  position: relative;
  border: 1px solid var(--vf-rule-soft);
  background:
    linear-gradient(var(--vf-plate-2), var(--vf-plate-2));
  padding: 14px;
}
.vf-plate::before, .vf-plate::after {
  content: ''; position: absolute; width: 13px; height: 13px;
  border: 1px solid var(--vf-madder-700);
}
.vf-plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.vf-plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.vf-plate-strip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--vf-rule-soft);
}
.vf-plate-strip .vf-state { color: var(--vf-madder-400); }

/* ── the figure ──────────────────────────────────────────────────────────── */
.vf-fig { width: 100%; height: auto; overflow: visible; }
.vf-fig-limb {
  fill: none; stroke: var(--vf-chalk); stroke-width: 4.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.vf-fig-limb.vf-fig-far { stroke-width: 3.2; opacity: 0.42; }
.vf-fig-loadgroup { stroke-width: 3.6; }
.vf-fig-ghost {
  fill: none; stroke: var(--vf-sage); stroke-width: 2.4; opacity: 0.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.vf-fig-ghost.vf-fig-far { opacity: 0.15; }
.vf-fig-rule { fill: none; stroke: var(--vf-rule); stroke-width: 1.2; }
.vf-fig-plumb {
  fill: none; stroke: var(--vf-chalk-3); stroke-width: 1; stroke-dasharray: 3 7; opacity: 0.75;
}
.vf-fig-arc { fill: none; stroke: var(--vf-chalk-3); stroke-width: 1.2; opacity: 0.8; }

.vf-cue { color: var(--vf-madder-400); }
.vf-cue-dot { fill: none; stroke: var(--vf-madder-400); stroke-width: 2.4; }
.vf-cue-core { fill: var(--vf-madder-400); }
.vf-cue-lead { fill: none; stroke: var(--vf-madder-500); stroke-width: 1.4; stroke-linecap: round; }
.vf-cue-tag {
  fill: var(--vf-madder-400);
  font-family: var(--vf-mono);
  font-size: var(--vf-tag);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Cues draw on with the beat rather than fading in. */
.vf-cue { opacity: 0; transition: opacity 0.42s var(--vf-ease); }
.vf-cue.is-on { opacity: 1; }
.vf-cue-lead { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 0.55s var(--vf-ease) 0.08s; }
.vf-cue.is-on .vf-cue-lead { stroke-dashoffset: 0; }

/* ── the ring: the athlete, on the plate's ground rule ───────────────────────
   The boxer this site has always carried, re-separated into this world: a
   spruce-ink body under a chalk rim — the same line the drawn figure is made of
   — with the gloves in madder, the colour every correction on this page is
   marked in. Four frames stacked at one origin; the loop in Landing.tsx flips
   .is-on, and the bag's angle is written straight onto its transform. */
.vf-ring {
  position: relative;
  /* Square, because the pair is: the boxer's reach and the bag's drop want the
     same measure, and any wider box is margin nobody asked for. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-top: 4px;
}

/* The floor: a wash the figures stand in, its rule, and the plate's registers. */
.vf-ring-floor {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 30% at 46% 92%,
    color-mix(in srgb, var(--vf-chalk) 10%, transparent), transparent 72%);
}
.vf-ring-ticks {
  position: absolute; left: 0; right: 0; top: 92%; height: 8px;
  background:
    linear-gradient(var(--vf-rule), var(--vf-rule)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--vf-rule) 0 1px, transparent 1px 40px)
      0 1px / 100% 7px no-repeat;
}

/* Contact shadows — legible only because the floor above them is lit. */
.vf-ring-boxer-shadow, .vf-ring-bag-shadow {
  position: absolute; top: 90.3%; height: 3.4%; border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--vf-plate) 72%, transparent), transparent);
  filter: blur(3px);
}
.vf-ring-boxer-shadow { left: 13%; width: 49%; }
.vf-ring-bag-shadow { left: 74%; width: 21%; opacity: 0.7; }

/* The bag, pivoting on a chain that leaves the top of the frame. */
.vf-ring-bag {
  position: absolute; left: 59.5%; top: -19.8%; height: 100%;
  transform-origin: 50% 4.6%;
  will-change: transform;
}
.vf-ring-bag img { height: 100%; width: auto; }

/* The frames. Hard cuts, as the combination was always cut — the lunge and the
   guard's breath are what carry the motion between them. */
.vf-ring-pose {
  position: absolute; left: -1%; bottom: 5.9%; height: 92%; width: auto;
  opacity: 0; visibility: hidden;
}
.vf-ring-pose.is-on { opacity: 1; visibility: visible; }
.vf-ring-pose.is-on[data-pose='guard'] { animation: vf-guard 2.6s ease-in-out infinite; }
.vf-ring-pose.is-on.is-strike { animation: vf-strike 0.34s var(--vf-ease); }
@keyframes vf-guard {
  0%, 100% { transform: none; }
  50% { transform: translateY(-0.9%); }
}
@keyframes vf-strike {
  0% { transform: translateX(-1.4%); }
  40% { transform: translateX(1.7%); }
  100% { transform: none; }
}

/* The strike, marked the way this plate marks any correction. */
.vf-ring-fx {
  position: absolute; left: 75.8%; top: 17.9%;
  width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%;
  pointer-events: none;
}
.vf-ring-flash, .vf-ring-ring { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.vf-ring-flash { background: radial-gradient(circle, var(--vf-madder-400), transparent 66%); }
.vf-ring-ring { border: 2px solid var(--vf-madder-400); }
.vf-ring-fx.is-live .vf-ring-flash { animation: vf-hit-flash 0.26s var(--vf-ease); }
.vf-ring-fx.is-live .vf-ring-ring { animation: vf-hit-ring 0.52s var(--vf-ease); }
.vf-ring-fx.is-live[data-weight='heavy'] .vf-ring-ring {
  animation-duration: 0.68s; border-width: 3px;
}
@keyframes vf-hit-flash {
  0% { opacity: 0.8; transform: scale(0.16); }
  100% { opacity: 0; transform: scale(0.74); }
}
@keyframes vf-hit-ring {
  0% { opacity: 0.9; transform: scale(0.14); }
  100% { opacity: 0; transform: scale(1); }
}
/* Motion off: the roundhouse is held, with the mark it lands. */
.vf-ring-fx.is-still .vf-ring-flash { opacity: 0.4; transform: scale(0.34); }
.vf-ring-fx.is-still .vf-ring-ring { opacity: 0.62; transform: scale(0.6); border-width: 3px; }

/* The combination, read out under the plate. */
.vf-combo { display: flex; gap: 10px; margin-top: 16px; }
.vf-combo-step { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.vf-combo-key {
  height: 5px; background: var(--vf-rule);
  transform: scaleY(0.6); transform-origin: center;
  transition: background 0.3s var(--vf-ease), transform 0.3s var(--vf-ease);
}
.vf-combo-step.is-on .vf-combo-key { background: var(--vf-madder-400); transform: none; }
.vf-combo-label {
  font-family: var(--vf-mono); font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vf-chalk-3);
  transition: color 0.3s var(--vf-ease);
}
.vf-combo-step.is-on .vf-combo-label { color: var(--vf-madder-400); }

/* ── the story: a pinned plate, five beats ───────────────────────────────── */
.vf-story-track { position: relative; height: 460vh; }
.vf-story-stage {
  position: sticky; top: 0; height: 100svh; min-height: 580px;
  display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center; gap: 0 44px;
  max-width: 1320px; margin: 0 auto; padding: 84px var(--vf-gutter) 48px;
}
.vf-story-plate {
  height: 100%; max-height: 700px; display: flex; flex-direction: column;
  justify-content: stretch;
}
.vf-story-plate .vf-fig { flex: 1; min-height: 0; width: 100%; }

.vf-rail { display: flex; flex-direction: column; gap: 2px; align-self: center; }
.vf-rail-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 9px 0;
}
.vf-rail-key {
  width: 100%; height: 6px; flex: none;
  background: var(--vf-rule);
  transform: scaleY(0.55); transform-origin: center;
  transition: background 0.3s var(--vf-ease), transform 0.3s var(--vf-ease);
}
.vf-rail-step.is-done .vf-rail-key { background: var(--vf-chalk-3); }
.vf-rail-step.is-on .vf-rail-key { background: var(--vf-madder-400); transform: none; }
.vf-rail-label {
  font-family: var(--vf-mono); font-size: 0.5625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vf-chalk-3); white-space: nowrap;
  transition: color 0.3s var(--vf-ease);
}
.vf-rail-step.is-on .vf-rail-label { color: var(--vf-madder-400); }

.vf-beats { position: relative; align-self: center; }
.vf-beat { max-width: 34rem; }
.vf-beat h2, .vf-beat h3 {
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
}
.vf-beat p {
  margin-top: 22px; color: var(--vf-chalk-2); font-size: 1.0625rem; max-width: 32rem;
}
.vf-beat-anchor { display: block; margin-top: 26px; }
.vf-beat-anchor b { color: var(--vf-madder-400); font-weight: 500; }

/* Motion on: the beats stack at one origin and cross-fade. */
.vf-story[data-motion='on'] .vf-beats { display: grid; }
.vf-story[data-motion='on'] .vf-beat {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--vf-ease), transform 0.5s var(--vf-ease);
  pointer-events: none;
}
.vf-story[data-motion='on'] .vf-beat.is-on {
  opacity: 1; transform: none; pointer-events: auto;
}

/* Motion off / no JS: the whole plate is drawn at its final state with every
   cue on it, and the five beats read straight down the page as ordered text. */
.vf-story:not([data-motion='on']) .vf-story-track { height: auto; }
.vf-story:not([data-motion='on']) .vf-story-stage {
  position: static; height: auto; min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  padding-top: 24px; padding-bottom: 24px; gap: 52px;
}
.vf-story:not([data-motion='on']) .vf-rail { display: none; }
.vf-story:not([data-motion='on']) .vf-story-plate { height: auto; max-height: none; }
.vf-story:not([data-motion='on']) .vf-beats { display: flex; flex-direction: column; gap: 56px; }
.vf-story:not([data-motion='on']) .vf-cue { opacity: 1; }
.vf-story:not([data-motion='on']) .vf-cue-lead { stroke-dashoffset: 0; }
.vf-story:not([data-motion='on']) .vf-beat { max-width: 44rem; }

/* ── register: what is trained ───────────────────────────────────────────── */
.vf-reg { margin-top: 56px; border-top: 1px solid var(--vf-rule-soft); }
.vf-reg > li {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 12px 48px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--vf-rule-soft);
  transition: background 0.24s var(--vf-ease);
}
.vf-reg > li:hover { background: var(--vf-plate-2); }
.vf-reg h3 {
  font-size: 1.5rem; letter-spacing: 0.01em;
  line-height: 1.02;
}
.vf-reg p { color: var(--vf-chalk-2); font-size: 0.96875rem; }
.vf-reg .vf-data { white-space: nowrap; }

/* ── the approach: statement + the session card ──────────────────────────── */
.vf-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 64px; align-items: start;
}
.vf-points { margin-top: 40px; }
.vf-points li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--vf-rule-soft);
}
.vf-points li:last-child { border-bottom: 1px solid var(--vf-rule-soft); }
.vf-points .vf-tick { margin-top: 5px; color: var(--vf-madder-400); }
.vf-points h3 { font-size: 1.375rem; margin-bottom: 7px; }
.vf-points p { color: var(--vf-chalk-2); font-size: 0.96875rem; }

.vf-card {
  border: 1px solid var(--vf-rule-soft); background: var(--vf-plate-2);
  padding: 24px 26px 26px; position: relative;
}
.vf-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--vf-rule-soft);
}
.vf-card-head h3 { font-size: 1.5rem; }
.vf-plan { margin-top: 6px; }
.vf-plan li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px dashed var(--vf-rule-soft);
  font-size: 0.9375rem; color: var(--vf-chalk-2);
}
.vf-plan li:last-child { border-bottom: 0; }
.vf-plan .vf-plan-k {
  font-family: var(--vf-mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vf-chalk-3); flex: none; width: 5.5rem;
}
.vf-plan .vf-plan-v { color: var(--vf-chalk); }
.vf-card-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vf-rule-soft);
  color: var(--vf-chalk-3); font-size: 0.875rem;
}

/* ── the coach: a printed legend ─────────────────────────────────────────── */
.vf-coach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 64px; }
.vf-coach-prose p { color: var(--vf-chalk-2); font-size: 1.0625rem; max-width: 36rem; }
.vf-coach-prose p + p { margin-top: 18px; }
.vf-legend { border-top: 1px solid var(--vf-rule-soft); }
.vf-legend li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--vf-rule-soft);
  font-size: 0.9375rem; color: var(--vf-chalk);
}
.vf-legend .vf-data { color: var(--vf-chalk-3); }

/* ── the arc of working together ─────────────────────────────────────────── */
.vf-arc { margin-top: 52px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vf-arc > li {
  position: relative; padding: 30px 22px 0 0;
  border-top: 1px solid var(--vf-rule-soft);
}
.vf-arc > li::before {
  content: ''; position: absolute; top: -3px; left: 0; width: 7px; height: 7px;
  background: var(--vf-rule);
  transition: background 0.24s var(--vf-ease);
}
.vf-arc > li:hover::before { background: var(--vf-madder-400); }
.vf-arc > li:last-child::before { background: var(--vf-madder-500); }
.vf-arc h3 { font-size: 1.375rem; }
.vf-arc p { margin-top: 10px; color: var(--vf-chalk-2); font-size: 0.9375rem; }

/* ── close: the page drenches ────────────────────────────────────────────── */
.vf-close { background: var(--vf-madder-800); padding: 108px 0 112px; }
.vf-close h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem); color: var(--vf-chalk); max-width: 18ch;
}
.vf-close p {
  margin-top: 26px; max-width: 42rem; font-size: 1.09375rem;
  color: color-mix(in srgb, var(--vf-chalk) 82%, var(--vf-madder-800));
}
.vf-close-actions { margin-top: 38px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vf-close .vf-link {
  color: color-mix(in srgb, var(--vf-chalk) 84%, var(--vf-madder-800));
  border-bottom-color: color-mix(in srgb, var(--vf-chalk) 40%, var(--vf-madder-800));
}
.vf-close .vf-link:hover { color: var(--vf-chalk); border-bottom-color: var(--vf-chalk); }
.vf-close-meta {
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--vf-chalk) 26%, var(--vf-madder-800));
  display: flex; gap: 44px; flex-wrap: wrap;
}
.vf-close-meta a { display: block; }
.vf-close-meta .vf-data { color: color-mix(in srgb, var(--vf-chalk) 62%, var(--vf-madder-800)); display: block; }
.vf-close-meta strong {
  font-family: var(--vf-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: 0.015em; color: var(--vf-chalk); display: block; margin-top: 4px;
}
.vf-close-meta a:hover strong { text-decoration: underline; text-underline-offset: 5px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.vf-foot { background: var(--vf-plate); padding: 68px 0 30px; }
.vf-foot-top {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 60px;
  padding-bottom: 44px; border-bottom: 1px solid var(--vf-rule-soft);
}
.vf-foot-blurb { margin-top: 18px; color: var(--vf-chalk-3); font-size: 0.9375rem; }
.vf-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.vf-foot-cols h3 {
  font-family: var(--vf-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--vf-chalk-3);
  margin-bottom: 14px;
}
.vf-foot-cols a {
  display: block; padding: 5px 0; color: var(--vf-chalk-2); font-size: 0.9375rem;
  transition: color 0.2s var(--vf-ease);
}
.vf-foot-cols a:hover { color: var(--vf-chalk); }
.vf-foot-bottom {
  padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.vf-foot-bottom a { color: var(--vf-chalk-2); border-bottom: 1px solid var(--vf-rule); }
.vf-foot-bottom a:hover { color: var(--vf-chalk); border-bottom-color: var(--vf-madder-400); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .vf-story-stage { grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr); gap: 0 30px; }
  .vf-split, .vf-coach { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .vf-arc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .vf-hero-grid { gap: 36px; }
}

@media (max-width: 860px) {
  :root { --vf-gutter: 18px; --vf-tag: 15px; }
  .vf-bar-nav, .vf-bar-only { display: none; }
  .vf-menu { display: block; }
  .vf-bar-cta { margin-left: auto; }
  .vf-drawer { display: flex; }
  .vf-hero { padding: 104px 0 68px; }
  .vf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .vf-hero h1 { max-width: 15ch; }
  .vf-band { padding: 76px 0 78px; }

  .vf-story-track { height: 480vh; }
  .vf-story-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start; gap: 16px;
    padding: 74px var(--vf-gutter) 24px;
  }
  .vf-story:not([data-motion='on']) .vf-story-stage { grid-template-columns: minmax(0, 1fr); }
  .vf-story-plate { height: auto; max-height: 46svh; }
  .vf-story-plate .vf-fig { max-height: 39svh; }
  .vf-rail { flex-direction: row; gap: 6px; justify-content: space-between; }
  .vf-rail-step { flex-direction: column; gap: 6px; align-items: flex-start; padding: 0; flex: 1; }
  .vf-rail-key { width: 100%; height: 5px; }
  .vf-rail-label { font-size: 0.5rem; letter-spacing: 0.1em; }
  .vf-beat h2, .vf-beat h3 { font-size: clamp(1.85rem, 7.2vw, 2.4rem); }
  .vf-beat p { margin-top: 14px; font-size: 0.96875rem; }
  .vf-beat-anchor { margin-top: 16px; }

  .vf-reg > li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .vf-arc { grid-template-columns: minmax(0, 1fr); }
  .vf-arc > li { padding: 22px 0 22px 0; }
  .vf-foot-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .vf-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-close { padding: 76px 0 80px; }
  .vf-close-meta { gap: 26px; }
}

@media (max-width: 460px) {
  .vf-rail-label { display: none; }
  .vf-hero-actions { gap: 16px; }
  .vf-btn { font-size: 1.125rem; padding: 15px 20px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vf-page *, .vf-page *::before, .vf-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}