/* ============================================================
   Rehearsal Letter — design tokens + components
   Palette: oxblood / ivory / brass / ink
   ============================================================ */

:root,
[data-theme='light'] {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — ivory / parchment */
  --color-bg: #f7f2e7;
  --color-surface: #fbf8f0;
  --color-surface-2: #fffdf8;
  --color-surface-offset: #efe8d9;
  --color-surface-offset-2: #e7dfcc;
  --color-divider: #e2d9c6;
  --color-border: #d8ceb8;

  /* Text — ink */
  --color-text: #20211f;
  --color-text-muted: #67635a;
  --color-text-faint: #9c9484;
  --color-text-inverse: #fbf8f0;

  /* Primary — oxblood */
  --color-primary: #7a2226;
  --color-primary-hover: #5e181c;
  --color-primary-active: #431113;
  --color-primary-highlight: #ecd8d3;
  --color-on-primary: #fdf8ef;
  /* Section eyebrows. The container rules that mute body paragraphs
     (.section-head p, .split__body p, .contact__aside p, .endcta__inner > p)
     all carry :not(.eyebrow), because a one-class .eyebrow rule loses to a
     class+element rule on specificity and the eyebrow would silently go grey.

     Its own token rather than --color-primary because the
     two themes need different values: the light coral is the brand red, but
     that same red on a dark surface falls to 4.2:1 against the lighter
     surfaces, so dark mode lifts it. Small uppercase text needs the full
     4.5:1, not the 3:1 large-text allowance. */
  --color-eyebrow: #7a2226;

  /* Accent — brass (used sparingly: rules, marks, small emphasis) */
  --color-brass: #96691d;
  --color-brass-soft: #b98a34;
  /* #96691d lands at 3.97:1 on the tinted card surfaces — under AA for the
     small-caps labels. This darker step clears 5:1 on all of them. */
  --color-brass-ink: #7d5716;

  /* Muted support — sage */
  --color-sage: #4c5940;

  --color-error: #8c2118;
  --color-success: #3f6132;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px oklch(0.25 0.02 60 / 0.07);
  --shadow-md: 0 4px 14px oklch(0.25 0.02 60 / 0.09);
  --shadow-lg: 0 18px 44px oklch(0.25 0.02 60 / 0.14);

  --content-narrow: 660px;
  --content-default: 1020px;
  --content-wide: 1240px;

  --font-display: 'Satoshi', 'Public Sans', system-ui, sans-serif;
  --font-body: 'Public Sans', 'Helvetica Neue', system-ui, sans-serif;

  --hero-scrim: linear-gradient(
    100deg,
    oklch(0.96 0.02 85 / 0.97) 0%,
    oklch(0.96 0.02 85 / 0.9) 38%,
    oklch(0.96 0.02 85 / 0.35) 66%,
    oklch(0.96 0.02 85 / 0.1) 100%
  );
  --hero-scrim-flat: linear-gradient(
    185deg,
    oklch(0.96 0.02 85 / 0.95) 0%,
    oklch(0.96 0.02 85 / 0.92) 62%,
    oklch(0.96 0.02 85 / 0.8) 100%
  );
}

[data-theme='dark'] {
  --color-bg: #191715;
  --color-surface: #201d1a;
  --color-surface-2: #272320;
  --color-surface-offset: #232019;
  --color-surface-offset-2: #2c2823;
  --color-divider: #2c2823;
  --color-border: #3c352d;

  --color-text: #ece4d6;
  --color-text-muted: #a09788;
  --color-text-faint: #6e675b;
  --color-text-inverse: #201d1a;

  --color-primary: #d4696b;
  --color-primary-hover: #e58285;
  --color-primary-active: #ef9799;
  --color-primary-highlight: #3a2422;
  --color-on-primary: #1c1513;
  --color-eyebrow: #e58285;

  --color-brass: #d6a650;
  --color-brass-soft: #b98a34;
  --color-brass-ink: #d6a650;
  --color-sage: #93a382;

  --color-error: #e07a70;
  --color-success: #8db374;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 44px oklch(0 0 0 / 0.5);

  --hero-scrim: linear-gradient(
    100deg,
    oklch(0.19 0.008 60 / 0.97) 0%,
    oklch(0.19 0.008 60 / 0.92) 38%,
    oklch(0.19 0.008 60 / 0.5) 66%,
    oklch(0.19 0.008 60 / 0.18) 100%
  );
  --hero-scrim-flat: linear-gradient(
    185deg,
    oklch(0.19 0.008 60 / 0.95) 0%,
    oklch(0.19 0.008 60 / 0.93) 62%,
    oklch(0.19 0.008 60 / 0.84) 100%
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #191715;
    --color-surface: #201d1a;
    --color-surface-2: #272320;
    --color-surface-offset: #232019;
    --color-surface-offset-2: #2c2823;
    --color-divider: #2c2823;
    --color-border: #3c352d;
    --color-text: #ece4d6;
    --color-text-muted: #a09788;
    --color-text-faint: #6e675b;
    --color-text-inverse: #201d1a;
    --color-primary: #d4696b;
    --color-primary-hover: #e58285;
    --color-primary-highlight: #3a2422;
    --color-on-primary: #1c1513;
    --color-eyebrow: #e58285;
    --color-brass: #d6a650;
    --color-brass-ink: #d6a650;
    --color-sage: #93a382;
    --color-error: #e07a70;
    --color-success: #8db374;
  }
}

/* ---------- Layout primitives ---------- */

.wrap,
.wrap--wide,
.wrap--narrow {
  margin-inline: auto;
}
.wrap { width: min(100% - var(--space-8), var(--content-default)); }
.wrap--wide { width: min(100% - var(--space-8), var(--content-wide)); }
.wrap--narrow { width: min(100% - var(--space-8), var(--content-narrow)); }

@media (min-width: 48rem) {
  .wrap, .wrap--wide, .wrap--narrow { width: min(100% - var(--space-16), var(--content-default)); }
  .wrap--wide { width: min(100% - var(--space-16), var(--content-wide)); }
  .wrap--narrow { width: min(100% - var(--space-16), var(--content-narrow)); }
}

section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
section + section { padding-block-start: 0; }
.strip + section { padding-block-start: clamp(var(--space-16), 8vw, var(--space-32)); }

.section-tinted {
  background: var(--color-surface);
  border-block: 1px solid var(--color-divider);
  padding-block: clamp(var(--space-16), 8vw, var(--space-32)) !important;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: '';
  width: var(--space-8);
  height: 1px;
  background: currentColor;
  flex: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  /* Large type needs tighter tracking than body text to look evenly set. This
     also buys back several characters per line, so headings fill their column
     instead of spilling one or two words onto a second line. */
  letter-spacing: -0.03em;
  /* Satoshi defaults to proportional figures; lock headings to lining tabular
     so prices line up and read unambiguously. */
  font-variant-numeric: lining-nums tabular-nums;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-xl); }
/* h3 renders smaller, so it keeps the looser tracking — -0.03em would read as
   cramped at this size. */
h3 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.022em; }
h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* `.lede` carries no top margin because the hero spaces its own children.
   As a closing note after a card grid it needs the gap explicitly, or it
   butts straight into the bottom card border. */
.cards + .lede {
  margin-top: var(--space-8);
  font-size: var(--text-base);
  max-width: 64ch;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* The `ch` unit resolves against the element's OWN font-size. Capping the
   whole block at 62ch measured it in body type (~17px), then the h2 rendered
   inside at ~35px — so a box sized for 62 body characters only held about 32
   display characters, and the heading broke roughly halfway across the column.
   Each element now carries its own measure, evaluated at the size it actually
   renders at. */
.section-head { margin-bottom: clamp(var(--space-10), 4vw, var(--space-16)); }
.section-head > h2,
.section-head > h3 { max-width: 46ch; }
.section-head p:not(.eyebrow) { color: var(--color-text-muted); margin-top: var(--space-5); max-width: 68ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  max-width: 100%;
}
/* On the narrowest phones a long CTA label cannot fit on one line, and nowrap
   would push it off-screen. Let it wrap and tighten the side padding. */
@media (max-width: 24rem) {
  .btn {
    white-space: normal;
    text-align: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:active { background: var(--color-primary-active); }
.btn--ghost { color: var(--color-text); border-color: var(--color-border); background: var(--color-surface-2); }
.btn--ghost:hover { border-color: var(--color-text-muted); background: var(--color-surface-offset); }
.btn--sm { min-height: 38px; padding: var(--space-2) var(--space-4); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.header--scrolled { border-bottom-color: var(--color-divider); }
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  margin-right: auto;
}
.brand svg { color: var(--color-primary); flex: none; }
.brand__lockup { display: flex; flex-direction: column; gap: 0.16rem; }
/* Brand line under the wordmark, tied to the boxed-letter mark. */
.brand__tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-brass-ink);
  white-space: nowrap;
  line-height: 1;
  /* Optically align the tag's E with the wordmark's R. Satoshi's uppercase R at
     20.8px carries a 1.625px left side bearing; the E at 9.6px carries 0.875px,
     so the smaller line hangs 0.75px further left. Nudge it back by the delta. */
  margin-left: 0.75px;
}
/* Below the desktop nav there is no room for it beside the burger. */
@media (max-width: 47.99rem) {
  .brand__tag { display: none; }
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  /* Two-word name: never let it break across lines in the header bar. */
  white-space: nowrap;
}
/* Between the nav appearing (62rem) and roomy desktop, ease the wordmark down
   so the brand, nav and CTA always clear each other. */
@media (min-width: 62rem) and (max-width: 68rem) {
  .brand__name {
    font-size: 1.12rem;
  }
  /* Bearing scales with the wordmark, so the delta shrinks with it. */
  .brand__tag {
    margin-left: 0.625px;
  }
}
.nav { display: none; gap: var(--space-6); }
.nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding-block: var(--space-2);
}
.nav a:hover { color: var(--color-text); }
@media (min-width: 62rem) { .nav { display: flex; } }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.icon-btn:hover { color: var(--color-text); background: var(--color-surface-offset); }
/* On phones the wordmark, theme toggle, CTA and burger cannot all fit. Drop the
   header CTA — the menu panel and the hero both carry a full-width one. */
@media (max-width: 30rem) {
  .header__cta { display: none; }
  .brand__name { font-size: 1.18rem; }
}
.header__cta-long { display: none; }
/* The long CTA label only fits once the bar is genuinely wide; between 30rem and
   38rem the button reads "Walkthrough". */
@media (min-width: 38rem) {
  .header__cta-long { display: inline; }
  .header__cta-short { display: none; }
}

/* ---------- Narrow-window menu ---------- */

/* Below the desktop nav breakpoint the links are hidden, so this button is the
   only route to them. It must therefore never be hidden at the same widths. */
.burger {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-inline-start: calc(var(--space-2) * -1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  flex: none;
}
.burger:hover { background: var(--color-surface-offset); border-color: var(--color-text-muted); }
.burger__bars { display: block; width: 18px; height: 12px; position: relative; }
.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms ease, opacity 160ms ease;
}
.burger__bars span:first-child { top: 1px; }
.burger__bars span:last-child { bottom: 1px; }
/* Bars converge into a cross while the panel is open. */
.burger[aria-expanded='true'] .burger__bars span:first-child { transform: translateY(4.1px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bars span:last-child { transform: translateY(-4.1px) rotate(-45deg); }

.menu {
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.menu[hidden] { display: none; }
.menu__nav { display: grid; }
.menu__nav a {
  display: block;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.menu__nav a:last-of-type { border-bottom: none; }
.menu__nav a.is-current { color: var(--color-primary); font-weight: 700; }
.menu__cta { margin-top: var(--space-4); justify-content: center; }

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in oklab, #000 38%, transparent);
}
.menu-scrim[hidden] { display: none; }

/* The desktop bar takes over at the same width the inline nav appears. */
@media (min-width: 62rem) {
  .burger { display: none; }
  .menu, .menu-scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .burger__bars span { transition: none; }
}

/* ---------- Hero ---------- */

.hero { position: relative; padding-block: 0 !important; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: var(--hero-scrim); }
@media (max-width: 55.99rem) {
  .hero__media::after { background: var(--hero-scrim-flat); }
  .hero__media img { object-position: 70% 50%; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
  max-width: 40rem;
}
.hero h1 {
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.hero h1 em { font-style: italic; color: var(--color-primary); }
.hero .lede { max-width: 42ch; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero__price {
  font-variant-numeric: lining-nums tabular-nums;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text);
  letter-spacing: 0.01em;
  max-width: 34rem;
}
.hero__price s {
  color: var(--color-text-muted);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-brass-ink);
}

/* ---------- Trust strip ---------- */

.strip {
  background: var(--color-text);
  color: var(--color-surface-2);
  padding-block: var(--space-6) !important;
}
[data-theme='dark'] .strip { background: var(--color-surface-2); color: var(--color-text); }
.strip ul {
  list-style: none;
  display: grid;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: 1fr;
  font-size: var(--text-sm);
}
.strip li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  max-width: none;
  opacity: 0.92;
}
.strip li::before { content: '—'; color: var(--color-brass-soft); flex: none; }
@media (min-width: 45rem) { .strip ul { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Split (asymmetric two column) ---------- */

.split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--flip .split__media { order: -1; }
}
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.split__body p + p { margin-top: var(--space-5); }
.split__body h1 + p,
.split__body h2 + p { margin-top: var(--space-5); }
.split__body p:not(.eyebrow) { color: var(--color-text-muted); }
.split__body p strong { color: var(--color-text); font-weight: 600; }

.pullquote {
  margin-top: var(--space-8);
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-text);
  /* Was 34ch, which set this italic display type to a much shorter line than
     the body copy directly above it — it read as a wrapping fault rather than
     an intentional pull-quote. */
  max-width: 52ch;
}

/* ---------- Comparison table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  min-width: 34rem;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}
.compare th {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-border);
}
.compare td {
  padding: var(--space-4) var(--space-5);
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
.compare tr:last-child td { border-bottom: none; }
.compare td:first-child { color: var(--color-text-muted); width: 44%; }
.compare td:last-child { color: var(--color-text); font-weight: 500; }
.compare tbody tr:hover td { background: var(--color-surface-offset); }

/* ---------- Cards ---------- */

.cards { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.card h3 { margin-bottom: var(--space-4); }
.card > p { color: var(--color-text-muted); font-size: var(--text-sm); }
.card > p + p { margin-top: var(--space-4); }
.card ul { list-style: none; margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.card li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}
.card li svg { color: var(--color-primary); flex: none; margin-top: 0.35em; }

/* ---------- Program points ---------- */

.prog-points { list-style: none; margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.prog-points li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}
.prog-points li svg { color: var(--color-primary); flex: none; margin-top: 0.35em; }
.split__body h3 + p { margin-top: var(--space-5); }
.eyebrow .tag { margin-left: 0; }
/* Inline prose links outside the blog had no colour, so they fell back to the
   browser default blue — unreadable on the dark surfaces. */
.card p a:not(.btn),
.split__body p a:not(.btn),
.shots figcaption a:not(.btn) { color: var(--color-primary); text-underline-offset: 2px; }

/* ---------- Screens gallery ---------- */

.shots { display: grid; gap: clamp(var(--space-6), 3vw, var(--space-10)); }
@media (min-width: 58rem) {
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shots figure.span-2 { grid-column: 1 / -1; }
}
.shots figure { margin: 0; }
.frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-offset);
  box-shadow: var(--shadow-md);
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-border);
}
.frame__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-faint); opacity: 0.55; }
.frame__url {
  margin-left: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* A flex item will not shrink below its min-content width without this, so
     the ellipsis never engages and the whole frame pushes past the viewport on
     narrow phones. */
  min-width: 0;
}
/* Grid items also default to min-width:auto, which propagates the same floor. */
.shots figure { min-width: 0; }
.frame img { width: 100%; display: block; }
.shots figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.shots figcaption b { color: var(--color-text); font-weight: 600; display: block; font-size: var(--text-base); margin-bottom: var(--space-1); }

/* base.css caps p/li/figcaption at 72ch, which is right for body copy but
   wrong under a full-bleed screenshot: the caption stopped roughly two thirds
   of the way across the frame it described, so the text and the image it
   belonged to had visibly different right edges. These captions are two
   sentences, not prose, so running the frame width costs nothing. */
.shots figure.span-2 figcaption { max-width: none; }
.section-head--wide p { max-width: none; }

.tall-shot { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); align-items: center; }
@media (min-width: 58rem) { .tall-shot { grid-template-columns: 1fr 0.72fr; } }
.tall-shot .frame img {
  max-height: 34rem;
  object-fit: cover;
  object-position: top center;
}

/* ---------- Steps ---------- */

.steps { list-style: none; counter-reset: step; display: grid; gap: var(--space-1); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-divider);
  max-width: none;
}
.steps li:last-child { border-bottom: 1px solid var(--color-divider); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-brass-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.steps h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--space-2); }
.steps p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Pricing ---------- */

.pricing { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) { .pricing { grid-template-columns: 1fr 1fr; } }

.price-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
}
/* The setup card leads the pair, but it earns that with an accent edge and a
   warm tint rather than a near-black fill that fought its own text. */
.price-card--lead {
  background: var(--color-surface-offset);
  border-color: var(--color-brass);
  position: relative;
  overflow: hidden;
}
.price-card--lead::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--color-primary);
}
.price-card--lead .price-card__label { color: var(--color-brass-ink); }

.price-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}
.price-card__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  font-variant-numeric: lining-nums tabular-nums;
}
.price-card__num small { font-size: 0.32em; font-family: var(--font-body); font-weight: 500; letter-spacing: 0.04em; margin-left: 0.4em; color: var(--color-text-muted); }
/* "From" reads before the figure, not after it. */
.price-card__num small.is-lead { margin-left: 0; margin-right: 0.34em; }
.price-card__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.price-card ul { list-style: none; margin-top: var(--space-8); display: grid; gap: var(--space-3); }
.price-card li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); max-width: none; }
.price-card li svg { color: var(--color-primary); flex: none; margin-top: 0.35em; }

.price-foot {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.price-foot b { color: var(--color-text); }
.price-foot ul { margin-top: var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-2); }

/* ---------- FAQ ---------- */

.faq { display: grid; }
.faq details { border-top: 1px solid var(--color-divider); }
.faq details:last-of-type { border-bottom: 1px solid var(--color-divider); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-6) var(--space-10) var(--space-6) 0;
  position: relative;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-primary); }
.faq summary::after {
  content: '';
  position: absolute;
  right: var(--space-2);
  top: 50%;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition-interactive);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
/* The answer fills the column the question sits in. It was capped at 68ch,
   which stopped it short of the question above it and read as a ragged
   second edge down the whole list. Only the summary needs right padding,
   to clear the chevron. */
.faq details p { padding-bottom: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); max-width: none; }
.faq details p + p { margin-top: calc(var(--space-4) * -1 + var(--space-4)); }

/* ---------- Contact ---------- */

/* The single-column case needs minmax(0, 1fr) for the same reason the two
   column case does: an auto track floors at min-content, and the booker's
   scrolling day rail is 2,700px of min-content. Without this the whole
   phone layout scrolls sideways. */
.contact { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--space-10), 5vw, var(--space-16)); }
/* minmax(0, ...) rather than bare fr: a bare fr track floors at min-content,
   so the horizontally scrolling day rail inside the booker widened its own
   column past the viewport and crushed the prose column to four words a
   line. The overflow has to be allowed to be an overflow. */
@media (min-width: 58rem) { .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.contact__aside p:not(.eyebrow) { color: var(--color-text-muted); margin-top: var(--space-5); }
.contact__mail {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.contact__mail a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field label span { color: var(--color-text-muted); font-weight: 400; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2367635a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  cursor: pointer;
}
[data-theme='dark'] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a49c8d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-2);
  font-size: var(--text-sm);
}
.field select { padding-inline-end: var(--space-10); }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-text-faint); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-primary); }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: var(--color-error); }
.field__err { font-size: var(--text-xs); color: var(--color-error); min-height: 1em; }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__status { font-size: var(--text-sm); color: var(--color-text-muted); }
.form__status[data-state='error'] { color: var(--color-error); }
.form__status[data-state='ok'] { color: var(--color-success); }

.form-done {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.form-done svg { color: var(--color-primary); }
.form-done h3 { font-size: var(--text-lg); }
.form-done p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 42ch; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  padding-block: var(--space-12);
  margin-top: clamp(var(--space-16), 8vw, var(--space-32));
}
.footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.footer p { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer a { color: var(--color-text-muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--text-sm); }
.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--color-primary); }

/* ---------- Scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  transform: translateY(-200%);
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.skip:focus { transform: none; }

/* ---------- Multi-page: page-opening section ---------- */

.page-top { padding-block-start: clamp(var(--space-12), 6vw, var(--space-20)); }
.page-top.section-tinted { border-block-start: none; }
.page-top .section-head h1,
.page-top .split__body h1 { margin-top: var(--space-3); }

.nav a.is-current { color: var(--color-text); font-weight: 600; }
.nav a.is-current::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* ---------- Pricing: roster bands table ---------- */

.bands { margin-top: clamp(var(--space-12), 6vw, var(--space-16)); }
.bands__head { max-width: 46rem; margin-bottom: var(--space-6); }
.bands__head h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.bands__head p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.bands__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46rem;
}

.compare--bands { min-width: 30rem; }
.compare--bands td:first-child { width: 40%; color: var(--color-text); font-weight: 500; }
.compare--bands td:nth-child(2) { width: 26%; color: var(--color-text); font-weight: 500; }
.compare--bands td:last-child { color: var(--color-text-muted); font-weight: 400; }
.compare--bands td b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Roster ranges and per-player figures sit in adjacent columns, so they need to
   align down the table as well. */
.compare--bands td { font-variant-numeric: lining-nums tabular-nums; }
.compare--bands tr.is-typical td { background: color-mix(in oklab, var(--color-primary) 7%, transparent); }
.compare--bands tr.is-typical td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

/* ---------- Pricing: founding-ensemble panel ---------- */

/* The founding offer used to sit at the very bottom, below the roster table and
   the caveats, where nobody scrolling for a price would find it. It now follows
   the two price cards directly, and leads with the struck figure rather than
   describing the discount in prose. */
.founding {
  margin-top: var(--space-6);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border: 1px solid var(--color-brass);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-brass) 8%, var(--color-surface-2));
}
.founding__grid { display: grid; gap: clamp(var(--space-6), 3vw, var(--space-10)); }
@media (min-width: 56rem) {
  .founding__grid { grid-template-columns: minmax(0, 16rem) 1fr; align-items: start; }
  .founding__body {
    padding-inline-start: clamp(var(--space-6), 3vw, var(--space-10));
    border-inline-start: 1px solid color-mix(in oklab, var(--color-brass) 40%, transparent);
  }
}
.founding__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass-ink);
}
.founding__nums {
  margin-top: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.03em;
}
.founding__nums s {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-brass-ink);
}
.founding__now { font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--color-primary); }
.founding__caveat { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.founding h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.founding h3 + p { margin-top: var(--space-4); }
.founding__body > p { font-size: var(--text-sm); color: var(--color-text-muted); }
.founding__terms { list-style: none; margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.founding__terms li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  max-width: none;
}
.founding__terms li svg { color: var(--color-brass-ink); flex: none; margin-top: 0.35em; }
.founding__fine { margin-top: var(--space-5) !important; }
.founding__cta {
  margin-top: var(--space-6) !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Homepage variant: same box, but it stands alone inside a section that already
   supplies the vertical rhythm, so it drops the stacked-under-the-cards margin. */
.founding--slim { margin-top: 0; }

/* The founding-rate pointer on the setup card. */
.price-card__flag {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.price-card__flag b { color: var(--color-text); font-weight: 600; }
.price-card__flag .tag { margin-left: 0; margin-right: var(--space-2); }

/* ---------- Full feature list ---------- */

/* The claim "there is one version and everything is in it" is only worth
   anything if the list is long enough to be checked, so this is deliberately
   exhaustive. Column count is driven by available width rather than a fixed
   breakpoint, so a group never gets orphaned as a lone narrow column. */
/* CSS columns rather than a grid: the groups are deliberately uneven in
   length, and a grid aligns rows, so a short group beside a tall one leaves a
   band of dead space. Column flow packs them and `columns: <width>` picks the
   count from the available space with no breakpoints. */
.features {
  margin-top: var(--space-10);
  columns: 19rem;
  column-gap: var(--space-10);
}
.features__group {
  break-inside: avoid;
  padding-bottom: var(--space-8);
}
.features__group h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.features__group ul {
  list-style: none;
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.features__group li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: none;
}
.features__group li svg {
  color: var(--color-primary);
  flex: none;
  margin-top: 0.3em;
}

/* ---------- End-of-page CTA band ---------- */

.endcta {
  background: var(--color-surface);
  border-block-start: 1px solid var(--color-divider);
  /* Beats `section + section { padding-block-start: 0 }` so the closing band is
     symmetric top and bottom. */
  padding-block: clamp(var(--space-16), 8vw, var(--space-24)) !important;
}
/* The closing band and the footer share a surface color, so the footer's
   default top margin would show a stripe of page background between them. */
main:has(.endcta) + .footer { margin-top: 0; }
.endcta__inner { text-align: center; max-width: 44rem; }
.endcta__inner .eyebrow { justify-content: center; }
.endcta__inner h2 { margin-top: var(--space-3); }
.endcta__inner > p:not(.eyebrow) { margin-top: var(--space-4); color: var(--color-text-muted); }
.endcta__actions {
  margin-top: var(--space-8) !important;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Narrow screens: the derived per-player column is supplementary — drop it
   rather than let the bands table scroll and look truncated. */
@media (max-width: 34rem) {
  .compare--bands { min-width: 0; }
  .compare--bands th:last-child,
  .compare--bands td:last-child { display: none; }
  .compare--bands td:first-child { width: 58%; }
  .compare--bands td:nth-child(2) { width: 42%; }
  .tag { display: block; margin-left: 0; margin-top: var(--space-1); width: fit-content; }
}

/* ---------- Contact: what happens next ---------- */

.next-steps {
  list-style: none;
  margin-top: var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: nstep;
}
.next-steps li {
  position: relative;
  padding-left: var(--space-10);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  counter-increment: nstep;
}
.next-steps li::before {
  content: counter(nstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-brass-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.next-steps b {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* ============================================================
   NOTES (blog) — listing and article
   The listing reuses the card grid; the article needs its own
   measure and vertical rhythm because it is the only place on
   the site where long-form prose runs uninterrupted.
   ============================================================ */

.postlist { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .postlist { grid-template-columns: 1fr 1fr; }
}

.postcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.postcard:hover { border-color: var(--color-primary); transform: translateY(-2px); }
/* A card headline was set at --text-xl, which resolves to 36px on a wide
   viewport -- the same size as the page's own h1, inside a 445px card. It read
   as four competing headlines rather than a list of five articles. 22px keeps
   it clearly dominant over the 16px summary beneath it without shouting. */
.postcard h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem); line-height: 1.25; }
.postcard h3 a { color: inherit; text-decoration: none; }
.postcard h3 a:hover { color: var(--color-primary); }
.postcard p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
/* The category/date line is a <p class="postmeta">, so the rule above beat
   .postmeta on specificity and pushed it from 14px to 16px. Uppercase and
   letterspaced at 16px is loud enough to compete with the headline, which is
   the opposite of what a meta line is for. */
.postcard .postmeta { font-size: var(--text-xs); }

/* Category and reading time. Muted and small so the headline stays
   the loudest thing in the card. */
.postmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.postmeta__cat { color: var(--color-primary); font-weight: 600; }
.postmeta__dot { color: var(--color-divider); }

.post { padding-block: var(--space-16) var(--space-20); }
.post__head { margin-bottom: var(--space-10); }
/* --text-3xl resolves to 72px, which is a landing-page hero size. In a
   narrow reading column it threw a three-line title and pushed the first
   paragraph most of a screen down. 44px is an article title. */
.post__head h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); line-height: 1.15; margin-block: var(--space-4); }
/* Held below the body h2 so the standfirst does not outrank the sections. */
.post__dek { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); line-height: 1.5; color: var(--color-text-muted); max-width: 58ch; }

.post__body > * + * { margin-top: var(--space-5); }
.post__body h2 {
  /* Was 36px: a section heading the same size as a card headline elsewhere on
     the site, and only 8px off the title above it. */
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.post__body h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.post__body ul, .post__body ol { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.post__body li { max-width: 68ch; }
.post__body a { color: var(--color-primary); text-underline-offset: 2px; }

/* Quoting the regulation verbatim, set apart so a reader can tell
   our wording from the IRS's. */
.post__body blockquote {
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-brass);
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  font-size: var(--text-sm);
}
.post__body blockquote cite { display: block; margin-top: var(--space-3); font-style: normal; color: var(--color-text-faint); font-size: var(--text-xs); }

.post__note {
  margin-top: var(--space-12);
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post__sources { margin-top: var(--space-10); font-size: var(--text-sm); }
.post__sources h2 { font-size: var(--text-base); }
.post__sources ul { display: grid; gap: var(--space-2); padding-left: var(--space-5); }
.post__sources a { word-break: break-word; }

/* ==============================================================
   COMPARISON PAGE  (compare.html)
   ==============================================================
   Reached only from the pricing page — deliberately absent from
   the header nav, the narrow-window panel and the footer. A board
   that has not yet seen our two numbers has no use for a page
   that compares them to eleven other vendors.
   ============================================================== */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-5);
}
.backlink:hover { color: var(--color-primary); }
.backlink svg { flex: none; }

/* Wider matrix than the two- and three-column tables style.css was
   written for, so the column widths are set here instead. */
.compare--matrix { min-width: 46rem; }
.compare--matrix td { font-variant-numeric: lining-nums tabular-nums; }
.compare--matrix td:first-child {
  width: 26%;
  color: var(--color-text);
  font-weight: 600;
}
.compare--matrix td:nth-child(2) {
  width: 30%;
  color: var(--color-text-muted);
  font-weight: 400;
}
.compare--matrix td:nth-child(3),
.compare--matrix td:nth-child(4) {
  width: 15%;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}
.compare--matrix td:last-child {
  width: 14%;
  color: var(--color-text-muted);
  font-weight: 400;
}
.compare--matrix tr.is-us td {
  background: color-mix(in oklab, var(--color-primary) 7%, transparent);
}
.compare--matrix tr.is-us td:first-child {
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.compare--matrix tr.is-free td:first-child { color: var(--color-text-muted); }

/* Narrow screens: the description and the pricing-axis columns are
   supplementary. Dropping them keeps the two numbers a board is looking
   for on screen, rather than scrolled off the right edge. */
@media (max-width: 46rem) {
  .compare--matrix { min-width: 0; }
  .compare--matrix th:nth-child(2),
  .compare--matrix td:nth-child(2),
  .compare--matrix th:last-child,
  .compare--matrix td:last-child { display: none; }
  .compare--matrix td:first-child { width: 46%; }
  .compare--matrix td:nth-child(3),
  .compare--matrix td:nth-child(4) { width: 27%; white-space: normal; }
}

@media (max-width: 40rem) {
  .compare--years { min-width: 0; }
  .compare--years th:last-child,
  .compare--years td:last-child { display: none; }
  .compare--years td:first-child { width: 62%; }
  .compare--years td:nth-child(2) { width: 38%; }
}

.table-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 52rem;
}

.honest { margin-top: clamp(var(--space-12), 6vw, var(--space-16)); }
.honest__head { max-width: 46rem; margin-bottom: var(--space-6); }
.honest__head h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}
.honest__head p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Three-year column: the only number a board actually votes on. */
.compare--years { min-width: 34rem; }
.compare--years td { font-variant-numeric: lining-nums tabular-nums; }
.compare--years td:first-child {
  width: 40%;
  color: var(--color-text);
  font-weight: 500;
}
.compare--years td:nth-child(2) { width: 22%; color: var(--color-text-muted); }
.compare--years td:last-child { width: 38%; color: var(--color-text-muted); font-weight: 400; }
.compare--years td b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.compare--years tr.is-us td {
  background: color-mix(in oklab, var(--color-primary) 7%, transparent);
}
.compare--years tr.is-us td:first-child {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* "Buy the other one" — deliberately styled as advice, not a comparison
   win, because that is what it is. */
.elsewhere { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 52rem) {
  .elsewhere { grid-template-columns: repeat(2, 1fr); }
}
.elsewhere__item {
  border-inline-start: 3px solid var(--color-border);
  padding-inline-start: var(--space-5);
}
.elsewhere__item h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.elsewhere__item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.sources {
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.sources h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.sources p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 60ch; }
.sources ul {
  list-style: none;
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.sources li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}
.sources a { color: var(--color-primary); }

/* ---------- Pricing page: the refundable setup fee ---------- */
/* Set apart from the list above it because it is a promise rather than a
   caveat, and a board reads it that way. */

.guarantee {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
}
.guarantee p + p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* ---------- Pricing page: the one link into the comparison ---------- */

.price-foot__more {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.price-foot__more a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.price-foot__more a:hover { text-decoration: underline; }

/* ---------- Walkthrough booker (book.html) ---------- */

.booker {
  min-width: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) {
  .booker { padding: var(--space-8); }
}

.booker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-divider);
}
.booker__head h3 { font-size: var(--text-lg); }
.booker__tz { font-size: var(--text-xs); color: var(--color-text-muted); }

.booker__loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding-block: var(--space-8);
}
.booker__spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: bookspin 0.7s linear infinite;
  flex: none;
}
@keyframes bookspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .booker__spinner { animation-duration: 2.4s; }
}

.booker__empty {
  padding-block: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* The day rail. Horizontal scroll on narrow windows rather than a wrapping
   grid, so the shape of the next fortnight stays legible on a phone. */
.daystrip {
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block-end: var(--space-3);
  margin-block-end: var(--space-5);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.daychip {
  flex: none;
  display: grid;
  gap: 2px;
  min-width: 6.4rem;
  padding: var(--space-3) var(--space-4);
  text-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.daychip:hover { border-color: var(--color-text-faint); }
.daychip__day { font-size: var(--text-sm); font-weight: 600; }
.daychip__n { font-size: var(--text-xs); color: var(--color-text-muted); }
.daychip[aria-selected='true'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.daychip[aria-selected='true'] .daychip__n { color: var(--color-on-primary); opacity: 0.78; }

.slots__head {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}
.slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr));
  gap: var(--space-3);
}
.slot {
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.slot:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

.booker__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}
.booker__back:hover { color: var(--color-primary-hover); text-decoration: underline; }

.booker__chosen { display: grid; gap: 1px; text-align: end; }
.booker__chosen b { font-size: var(--text-sm); }
.booker__chosen span { font-size: var(--text-xs); color: var(--color-text-muted); }

.booker .form-done { border: 0; padding: 0; }