/* Puts the pages that keep their old layout into the current design. The old CSS is built on the
   tokens below, so swapping them changes every page at once; the rules after them are the few things
   tokens can't reach. This file loads last and isn't in a layer, so it wins. */
:root {
  --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #F0EDE5; --surface-warm: #F0EDE5;
  --fg: #191919; --fg-2: #191919; --muted: #66645F; --meta: #66645F;
  --border: #DEDBD4; --border-soft: #EBE8E1;
  --accent: #FFC83D; --accent-on: #191919; --accent-hover: #EBB22A; --accent-active: #EBB22A;
  --success: #1D7A4B; --success-bg: #E2F1E8; --warn-text: #8A5A00;
  --font-tt-display: "Barlow Condensed"; --font-tt-body: "Source Sans 3"; --font-mono: "Barlow Condensed", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --radius-sm: 2px; --radius: 4px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 8px; --radius-2xl: 8px; --radius-3xl: 8px;
  --color-background: var(--bg); --color-foreground: var(--fg); --color-card: var(--surface); --color-card-foreground: var(--fg);
  --color-muted: var(--surface-2); --color-muted-foreground: var(--muted); --color-border: var(--border); --color-secondary: var(--surface-2);
  --color-primary: var(--accent); --color-primary-foreground: #191919; --color-mint: var(--fg);
  /* Only the checklist page used these, and only for its green form. */
  --color-emerald-50: var(--surface-2); --color-emerald-100: var(--surface-2); --color-emerald-200: var(--border); --color-emerald-300: var(--border);
  --color-emerald-500: var(--accent); --color-emerald-600: var(--accent); --color-emerald-700: var(--accent); --color-emerald-800: var(--accent-hover);
  --color-emerald-900: var(--fg); --color-emerald-950: var(--fg);
  --color-slate-950: var(--fg); --color-slate-900: var(--fg); --color-slate-800: var(--fg); --color-slate-700: var(--fg);
  --color-slate-600: var(--muted); --color-slate-500: var(--muted); --color-slate-400: #8C887E; --color-slate-300: var(--border); --color-slate-200: var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111315; --surface: #1A1D20; --surface-2: #202327; --surface-warm: #202327;
    --fg: #ECEDEE; --fg-2: #ECEDEE; --muted: #B9BDC2; --meta: #B9BDC2;
    --border: #2E3236; --border-soft: #25292D; --accent-hover: #F2B500; --accent-active: #F2B500;
    --success: #5BC48E; --success-bg: #173325; --warn-text: #E8B24D;
  }
}
:root[data-theme="dark"] {
  --bg: #111315; --surface: #1A1D20; --surface-2: #202327; --surface-warm: #202327;
  --fg: #ECEDEE; --fg-2: #ECEDEE; --muted: #B9BDC2; --meta: #B9BDC2;
  --border: #2E3236; --border-soft: #25292D; --accent-hover: #F2B500; --accent-active: #F2B500;
  --success: #5BC48E; --success-bg: #173325; --warn-text: #E8B24D;
}

body.site { background: var(--bg); color: var(--fg); font-family: var(--font-body); }

/* The old header was fixed over the page, so content started far down. The new one takes up its own space. */
.marketing-page > main { padding-top: 48px; }

/* Type */
.marketing-page { font-size: 1.06rem; }
.editorial-display, .font-heading { font-family: var(--display); letter-spacing: -.005em; color: var(--fg); }
h1.editorial-display { font-size: clamp(2.7rem, 6.2vw, 4.4rem); font-weight: 800; line-height: 1; }
h2.editorial-display { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.05; }
h3.editorial-display { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.font-heading.text-lg { font-size: 1.45rem; line-height: 1.15; }
.marketing-page h2:not(.editorial-display), .marketing-page h3:not(.editorial-display) { font-family: var(--display); font-weight: 700; letter-spacing: 0; }
.marketing-page h3.text-lg, .marketing-page h3.text-base, .marketing-page h2.text-lg, .marketing-page h2.text-base { font-size: 1.4rem; line-height: 1.15; }

/* Labels: the old green pills become the site's plain uppercase eyebrow. */
.marketing-page .font-mono.uppercase, .marketing-page .eyebrow, .marketing-page .uppercase.rounded-full.bg-primary\/15 {
  display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted);
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
}

/* Cards stand out in white on the off-white page, as on the homepage. */
.marketing-page .bg-card { background: var(--surface); }

/* Shapes */
.marketing-page .rounded-full { border-radius: var(--radius-sm); }
.marketing-page .bg-muted-foreground\/50 { border-radius: 50%; }
.marketing-page [class*="shadow-[0_12px"], .marketing-page .shadow-sm, .marketing-page .shadow-md, .marketing-page .shadow-xl { box-shadow: none; }

/* Buttons and links */
.marketing-page .bg-primary, .marketing-page .btn-primary-gradient { background: var(--accent); color: #191919; }
.marketing-page a.bg-primary:hover, .marketing-page .btn-primary-gradient:hover { background: var(--accent-hover); }
.marketing-page .text-primary-foreground { color: #191919; }
.marketing-page .text-primary { color: var(--fg) !important; } /* the old CSS sets this with !important */
.marketing-page a.text-primary, .marketing-page a.text-mint, .marketing-page .prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.marketing-page a.text-primary:hover, .marketing-page a.text-mint:hover, .marketing-page .prose a:hover { text-decoration-color: var(--fg); }
.marketing-page .border-white\/20 { border-color: var(--border); }
.marketing-page .hover\:border-white\/40:hover { border-color: var(--fg); }
.marketing-page .hover\:scale-\[1\.03\]:hover { transform: none; }
.marketing-page details > summary { cursor: pointer; }

/* Forms and the checklist page */
.marketing-page input[type="checkbox"] { accent-color: var(--accent); }
.marketing-page input:focus-visible, .marketing-page button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.marketing-page .bg-emerald-700, .marketing-page .bg-emerald-800 { color: #191919; }
.marketing-page .text-emerald-700, .marketing-page .text-emerald-800 { color: var(--fg); }
.marketing-page .bg-white { background: var(--surface); }
.marketing-page .bg-\[\#f7faf7\] { background: var(--bg); }
.marketing-page .text-\[\#102218\] { color: var(--fg); }
.marketing-page button.disabled\:bg-slate-400:disabled { background: var(--border); color: var(--muted); }
.marketing-page .prose { color: var(--fg); }
.marketing-page .text-warning { color: var(--warn-text) !important; }
.marketing-page .text-muted-foreground\/70 { color: var(--muted); }

/* The few hard-coded dark sections: the checklist's closing band and the pricing plan card. They use the
   site's dark surface, so text and accents read as light on them, in either colour mode. */
.marketing-page .bg-\[\#102218\], .marketing-page [class*="bg-[oklch(0.22"] { background: var(--dark, #191919); color: #F7F5F0; box-shadow: none; }
.marketing-page .bg-\[\#102218\] h2 { color: inherit; }
.marketing-page .bg-\[\#102218\] .text-slate-300 { color: #C9C7C0; }
.marketing-page .bg-\[\#102218\] .text-emerald-300 { color: #C9C7C0; }
.marketing-page a.bg-\[\#78e08f\] { background: var(--accent); color: #191919; }
.marketing-page a.bg-\[\#78e08f\]:hover { background: var(--accent-hover); }
.marketing-page [class*="bg-[oklch(0.22"] .text-primary { color: var(--accent) !important; }
.marketing-page [class*="bg-[oklch(0.22"] .bg-primary\/25 { background: rgba(255, 200, 61, .18); }
.marketing-page [class*="bg-[oklch(0.22"] p:not(.text-primary), .marketing-page [class*="bg-[oklch(0.22"] li, .marketing-page [class*="bg-[oklch(0.22"] span:not(.text-primary) { color: inherit; }
.marketing-page [class*="bg-[oklch(0.22"] .text-muted-foreground, .marketing-page [class*="bg-[oklch(0.22"] [class*="text-primary-foreground/"] { color: #C9C7C0; }
.marketing-page [class*="bg-[oklch(0.22"] .bg-primary, .marketing-page [class*="bg-[oklch(0.22"] a.bg-primary, .marketing-page [class*="bg-[oklch(0.22"] .bg-primary span { color: #191919; }
.marketing-page [class*="bg-[oklch(0.22"] svg { color: var(--accent); }
.marketing-page [class*="bg-[oklch(0.22"] .bg-primary svg { color: #191919; }