/* =====================================================================
   claimloop.health — marketing site stylesheet
   1. @font-face (self-hosted IBM Plex, OFL)
   2. Design tokens ported VERBATIM from web/app/styles/tokens.css
      (light theme only — site is light-only per spec)
   3. Base reset + body
   4. Page components (class contract fixed in the deploy plan, Task 3)
   ===================================================================== */

/* ---- 1. Fonts ------------------------------------------------------ */

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/plex-serif-600.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/plex-serif-700.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/plex-sans-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/plex-sans-500.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/plex-sans-600.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/plex-mono-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/plex-mono-600.woff2) format("woff2");
}

/* ---- 2. Design tokens (ported from web/app/styles/tokens.css) ------ */

:root {
  /* Type families — static-site stacks (no next/font variables here) */
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale (px / line-height) */
  --t-display: 2.25rem;   --t-display-lh: 1.1;
  --t-h1: 1.75rem;        --t-h1-lh: 1.15;
  --t-h2: 1.375rem;       --t-h2-lh: 1.2;
  --t-h3: 1.0625rem;      --t-h3-lh: 1.3;
  --t-body: 0.9375rem;    --t-body-lh: 1.5;
  --t-ui: 0.875rem;       --t-ui-lh: 1.35;
  --t-label: 0.75rem;     --t-label-lh: 1.3;
  --t-micro: 0.6875rem;   --t-micro-lh: 1.25;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* numeric figures: tabular + lining everywhere money/IDs appear */
  --num-feat: "tnum" 1, "lnum" 1, "zero" 1;

  /* Spacing scale (4px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-7: 2rem;     --s-8: 2.5rem;
  --s-9: 3rem;     --s-10: 4rem;    --s-12: 6rem;

  /* Radius scale */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;
  --r-pill: 999px;

  /* Neutrals — warm greige (oklch) */
  --paper-0:   oklch(0.992 0.003 83);   /* page base */
  --paper-50:  oklch(0.979 0.004 83);
  --paper-100: oklch(0.962 0.005 82);
  --paper-150: oklch(0.945 0.006 80);
  --paper-200: oklch(0.918 0.007 78);
  --paper-300: oklch(0.872 0.008 76);

  --ink-900: oklch(0.255 0.010 70);     /* primary text */
  --ink-800: oklch(0.330 0.011 70);
  --ink-700: oklch(0.430 0.011 71);     /* secondary text */
  --ink-600: oklch(0.520 0.011 72);
  --ink-500: oklch(0.595 0.010 73);     /* tertiary / muted */
  --ink-400: oklch(0.680 0.009 74);     /* placeholder */
  --ink-300: oklch(0.770 0.008 76);     /* disabled */

  /* Semantic surfaces (light) */
  --surface-page:    var(--paper-50);
  --surface-raised:  var(--paper-0);
  --surface-sunken:  var(--paper-100);
  --surface-inset:   var(--paper-150);
  --surface-hover:   oklch(0.962 0.006 82);
  --surface-active:  oklch(0.945 0.008 82);
  --surface-overlay: oklch(0.255 0.010 70 / 0.38);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-tertiary:  var(--ink-500);
  --text-placeholder: var(--ink-400);
  --text-disabled:  var(--ink-300);
  --text-on-accent: var(--paper-0);

  --line-subtle: oklch(0.918 0.006 80);
  --line-default: oklch(0.872 0.008 78);
  --line-strong: oklch(0.790 0.010 76);
  --line-focus: var(--brand-500);

  /* Brand (deep indigo — actions, links, focus) */
  --brand-50:  oklch(0.965 0.018 258);
  --brand-100: oklch(0.925 0.040 258);
  --brand-200: oklch(0.840 0.075 258);
  --brand-400: oklch(0.600 0.130 258);
  --brand-500: oklch(0.520 0.140 258);   /* primary */
  --brand-600: oklch(0.455 0.135 258);
  --brand-700: oklch(0.390 0.115 258);

  /* APPEALABLE (worth fighting / go) — confident green */
  --go-50:  oklch(0.960 0.028 158);
  --go-100: oklch(0.915 0.055 158);
  --go-200: oklch(0.830 0.090 158);
  --go-500: oklch(0.560 0.105 158);
  --go-600: oklch(0.490 0.100 158);
  --go-700: oklch(0.420 0.090 158);

  /* MONEY / recovered */
  --money-pos: var(--go-600);
  --money-neutral: var(--ink-800);
  --money-lost: var(--ink-500);

  /* WARN / soon / low-confidence — honey amber */
  --warn-50:  oklch(0.965 0.035 80);
  --warn-100: oklch(0.925 0.070 78);
  --warn-200: oklch(0.860 0.110 76);
  --warn-500: oklch(0.760 0.135 72);
  --warn-600: oklch(0.660 0.130 64);
  --warn-700: oklch(0.520 0.110 58);

  /* URGENT / error / destructive — measured red */
  --urgent-50:  oklch(0.965 0.020 25);
  --urgent-100: oklch(0.920 0.045 25);
  --urgent-200: oklch(0.840 0.090 25);
  --urgent-500: oklch(0.580 0.175 27);
  --urgent-600: oklch(0.510 0.180 27);
  --urgent-700: oklch(0.440 0.160 27);

  /* UNCERTAINTY / no-data / verify-manually — dignified plum */
  --verify-50:  oklch(0.962 0.022 312);
  --verify-100: oklch(0.918 0.045 312);
  --verify-200: oklch(0.835 0.080 310);
  --verify-500: oklch(0.560 0.115 308);
  --verify-600: oklch(0.490 0.115 308);
  --verify-700: oklch(0.420 0.100 308);

  /* GROUNDED (cited source) — teal-blue, the "shows its work" hue */
  --ground-50:  oklch(0.962 0.025 218);
  --ground-100: oklch(0.918 0.050 218);
  --ground-200: oklch(0.830 0.085 220);
  --ground-500: oklch(0.560 0.110 224);
  --ground-600: oklch(0.485 0.105 226);
  --ground-700: oklch(0.415 0.090 228);

  /* CONTRACTUAL write-off / inert / neutral status */
  --inert-bg: var(--paper-150);
  --inert-text: var(--ink-600);
  --inert-line: var(--line-default);

  /* Deterministic "rule" voice (NCCI/deadline math) */
  --rule-surface: oklch(0.965 0.006 240);
  --rule-line: oklch(0.890 0.010 240);
  --rule-text: oklch(0.380 0.020 245);
  --rule-pass: var(--go-600);
  --rule-fail: var(--urgent-600);

  /* Elevation / shadow */
  --shadow-sm: 0 1px 2px oklch(0.30 0.02 70 / 0.06),
               0 1px 1px oklch(0.30 0.02 70 / 0.04);
  --shadow-md: 0 2px 4px oklch(0.30 0.02 70 / 0.07),
               0 4px 10px oklch(0.30 0.02 70 / 0.06);
  --shadow-lg: 0 8px 16px oklch(0.30 0.02 70 / 0.09),
               0 16px 36px oklch(0.30 0.02 70 / 0.10);
  --shadow-focus: 0 0 0 3px var(--brand-100);
  --shadow-focus-urgent: 0 0 0 3px var(--urgent-100);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid: 220ms;
  --dur-slow: 420ms;

  /* ---- Site-layer tokens (marketing-site only, not from app) ------ */
  --site-max: 1100px;
  --t-hero: clamp(2.5rem, 1.5rem + 4.5vw, 3.75rem);
  --t-section: clamp(1.625rem, 1.25rem + 1.8vw, 2.25rem);
}

/* ---- 3. Base reset + body ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: var(--fw-regular);
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
p { overflow-wrap: break-word; }
p + p { margin-top: var(--s-4); }

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--t-h1-lh);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  font-weight: var(--fw-semibold);
}

a {
  color: var(--brand-600);
  text-decoration-color: var(--brand-200);
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-700); }

::selection { background: var(--brand-100); }

:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.mono, .stat-num {
  font-family: var(--font-mono);
  font-feature-settings: var(--num-feat);
}

/* Layout container */
.wrap {
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

section { padding-block: var(--s-12); }
section[id] { scroll-margin-top: 5rem; }

/* Section headers (shared editorial rhythm) */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--s-3);
}

section > .wrap > h2, .section-title {
  font-size: var(--t-section);
  line-height: var(--t-h2-lh);
  max-width: 22em;
  margin-bottom: var(--s-4);
}

.section-lede {
  font-size: var(--t-h3);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 38em;
  margin-bottom: var(--s-8);
}

/* ---- 4. Components -------------------------------------------------- */

/* Skip link — hidden until keyboard focus ------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-3);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--brand-600);
  color: var(--text-on-accent);
  font-size: var(--t-ui);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--s-3);
  color: var(--text-on-accent);
}

/* Nav ----------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-subtle);
}

.nav .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 3.75rem;
}

.nav .wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-h2);
  color: var(--text-primary);
  text-decoration: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.nav .nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  padding: 0;
}

.nav .nav-links a {
  font-size: var(--t-ui);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
}
.nav .nav-links a:hover { color: var(--text-primary); }

.nav .btn-primary {
  padding: var(--s-2) var(--s-5);
  font-size: var(--t-ui);
}
/* Win the specificity fight against `.nav .nav-links a` (0,2,1). */
.nav .nav-links a.btn-primary { color: var(--text-on-accent); }
.nav .nav-links a.btn-primary:hover { color: var(--text-on-accent); }

/* Buttons -------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-7);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-pill);
  background: var(--brand-600);
  color: var(--text-on-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--t-body);
  line-height: var(--t-ui-lh);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--brand-700); color: var(--text-on-accent); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Hero ------------------------------------------------------------------ */
.hero {
  padding-block: var(--s-10) var(--s-12);
  text-align: center;
  background:
    radial-gradient(60rem 28rem at 50% -8rem, var(--brand-50), transparent 70%),
    var(--surface-page);
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: var(--t-display-lh);
  font-weight: var(--fw-bold);
  max-width: 17em;
  margin-inline: auto;
}

.hero .subhead {
  font-size: clamp(var(--t-h3), 1rem + 0.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 38em;
  margin: var(--s-5) auto 0;
}

.hero .shot-frame {
  margin-top: var(--s-9);
  text-align: left;
}

/* Hero form (also reused as the post-pricing CTA form) ------------------ */
.hero-form {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  max-width: 34rem;
  margin: var(--s-7) auto 0;
}

.hero-form input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line-default);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.hero-form input[type="email"]::placeholder { color: var(--text-placeholder); }
.hero-form input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}

.form-note {
  flex-basis: 100%;
  font-size: var(--t-ui);
  line-height: var(--t-ui-lh);
  color: var(--text-secondary);
  min-height: 1.2em;
  margin-top: var(--s-1);
}
.form-note a { color: var(--brand-600); }

.hero-micro {
  margin-top: var(--s-4);
  font-size: var(--t-ui);
  line-height: var(--t-ui-lh);
  color: var(--text-secondary);
}

/* Honeypot — hidden from humans, present for bots */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Screenshot frame — browser-chrome mockup ------------------------------ */
.shot-frame {
  border: 1px solid var(--line-default);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.shot-frame::before {
  content: "";
  display: block;
  height: 2.125rem;
  background-color: var(--surface-sunken);
  background-image:
    radial-gradient(circle 5px at 1.25rem 50%, var(--paper-300) 4.4px, transparent 5px),
    radial-gradient(circle 5px at 2.375rem 50%, var(--paper-300) 4.4px, transparent 5px),
    radial-gradient(circle 5px at 3.5rem 50%, var(--paper-300) 4.4px, transparent 5px);
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line-subtle);
}

.shot-frame img {
  display: block;
  width: 100%;
}

.shot-frame figcaption {
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-ui);
  color: var(--text-secondary);
  border-top: 1px solid var(--line-subtle);
}

/* Opportunity band — big mono stats ------------------------------------- */
.band-stats {
  background: var(--surface-raised);
  border-block: 1px solid var(--line-subtle);
  padding-block: var(--s-10);
}

.band-stats h2 {
  text-align: center;
  margin-inline: auto;
}

.band-stats .stats-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--s-7);
}

.band-stats .stat {
  flex: 1 1 14rem;
  text-align: center;
  padding: var(--s-4) var(--s-6);
}
.band-stats .stat + .stat { border-left: 1px solid var(--line-subtle); }

.stat-num {
  display: block;
  font-size: clamp(2.5rem, 1.75rem + 3vw, 3.5rem);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  color: var(--brand-600);
}

.stat-label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-body);
  color: var(--text-secondary);
  max-width: 18em;
  margin-inline: auto;
}

.stat-sources {
  flex-basis: 100%;
  margin-top: var(--s-7);
  text-align: center;
  font-size: var(--t-label);
  line-height: var(--t-label-lh);
  color: var(--text-secondary);
}

/* How it works — 3 steps ------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-8);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  counter-increment: step;
  padding-top: var(--s-5);
  border-top: 2px solid var(--brand-200);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-feature-settings: var(--num-feat);
  font-size: var(--t-h2);
  font-weight: var(--fw-semibold);
  color: var(--brand-600);
  margin-bottom: var(--s-3);
}

.step h3 { margin-bottom: var(--s-2); }
.step p {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--text-secondary);
}

/* Screenshot figures following the steps / trust grids */
.steps ~ .shot-frame,
.trust-grid ~ .shot-frame { margin-top: var(--s-8); }

/* Trust — capability cards ------------------------------------------------ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}

.trust-card {
  background: var(--surface-raised);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.trust-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.trust-card h3 { margin-bottom: var(--s-2); }
.trust-card p {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--text-secondary);
}
.trust-card .shot-frame { margin-top: var(--s-4); box-shadow: var(--shadow-sm); }

/* Feature grid -------------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8) var(--s-7);
  margin-top: var(--s-8);
}

.feature h3 { margin-bottom: var(--s-2); }
.feature p {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--text-secondary);
  max-width: 34em;
}
.feature .shot-frame { margin-top: var(--s-5); }

.features-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-8);
}

/* Pricing --------------------------------------------------------------------- */
.pricing-card {
  max-width: 30rem;
  margin: var(--s-8) auto 0;
  background: var(--surface-raised);
  border: 1px solid var(--line-default);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-8);
  text-align: center;
}

.pricing-card .price {
  font-family: var(--font-mono);
  font-feature-settings: var(--num-feat);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 3.5rem);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.pricing-card .price-period {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-ui);
  font-size: var(--t-ui);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  text-align: left;
}

.pricing-card li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-7);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--text-secondary);
}
.pricing-card li + li { border-top: 1px solid var(--line-subtle); }
.pricing-card li::before {
  content: "✓";
  position: absolute;
  left: var(--s-2);
  color: var(--go-600);
  font-weight: var(--fw-bold);
}

.pricing-card .btn-primary { margin-top: var(--s-6); width: 100%; }

/* Second CTA band -------------------------------------------------------------- */
.cta-band {
  text-align: center;
  background:
    radial-gradient(48rem 20rem at 50% 120%, var(--brand-50), transparent 70%),
    var(--surface-raised);
  border-block: 1px solid var(--line-subtle);
}
.cta-band h2 { margin-inline: auto; }

/* Pill tag (early access, roadmap "next", etc.) */
.pill {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Focus & roadmap ------------------------------------------------------------- */
.roadmap {
  background: var(--surface-sunken);
  border-block: 1px solid var(--line-subtle);
}

.roadmap .roadmap-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.roadmap .roadmap-item {
  background: var(--surface-raised);
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-sm);
}
.roadmap .roadmap-item h3 { margin-bottom: var(--s-2); }
.roadmap .roadmap-item p {
  font-size: var(--t-body);
  color: var(--text-secondary);
}
.roadmap .roadmap-item .pill { margin-bottom: var(--s-3); }

.roadmap .wrap > p {
  max-width: 42em;
  color: var(--text-secondary);
}

/* About / Craftloop ------------------------------------------------------------ */
.about { text-align: center; }

.about h2 { margin-inline: auto; }

.about p {
  max-width: 38em;
  margin-inline: auto;
  color: var(--text-secondary);
}

.about .about-statement {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.875rem);
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  max-width: 24em;
  margin: 0 auto var(--s-6);
}

.about .founder-note {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 36em;
  margin: var(--s-7) auto 0;
  text-align: left;
  border-left: 3px solid var(--brand-200);
  padding-left: var(--s-5);
}

/* FAQ ----------------------------------------------------------------------------- */
.faq { max-width: 44rem; margin-inline: auto; }

.faq details {
  border-bottom: 1px solid var(--line-subtle);
}
.faq details:first-of-type { border-top: 1px solid var(--line-subtle); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-1);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-h2);
  line-height: 1;
  color: var(--brand-600);
  transition: transform var(--dur-mid) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  padding: 0 var(--s-1) var(--s-5);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 40em;
}

/* Legal (privacy) and 404 pages ----------------------------------------------------- */
.legal .wrap, .notfound .wrap { max-width: 44rem; }

.legal h1, .notfound h1 {
  font-size: var(--t-section);
  line-height: var(--t-h2-lh);
  margin-bottom: var(--s-2);
}

.legal-date {
  font-size: var(--t-ui);
  color: var(--text-secondary);
  margin-bottom: var(--s-8);
}

.legal .wrap > h2 {
  font-size: var(--t-h2);
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  max-width: none;
}

.legal p { color: var(--text-secondary); }

.notfound { text-align: center; }
.notfound h1 { margin-inline: auto; margin-bottom: var(--s-4); }
.notfound p {
  max-width: 36em;
  margin-inline: auto;
  color: var(--text-secondary);
}
.notfound .btn-primary { margin-top: var(--s-7); }

/* Footer ----------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line-subtle);
  background: var(--surface-raised);
  padding-block: var(--s-8);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-ui);
  color: var(--text-secondary);
}

.footer a {
  color: var(--text-secondary);
  text-decoration: none;
}
.footer a:hover { color: var(--text-primary); text-decoration: underline; }

.footer nav { display: flex; gap: var(--s-6); }

/* Entrance animation -------------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fade-up var(--dur-slow) var(--ease-out) both;
}

/* ---- Responsive ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  section { padding-block: var(--s-10); }

  .nav .nav-links { display: none; }

  .hero { padding-block: var(--s-8) var(--s-10); }

  .hero-form { flex-direction: column; align-items: stretch; }
  /* In column direction the desktop flex-basis (16rem) would become height. */
  .hero-form input[type="email"] { flex: 0 0 auto; }
  .hero-form .btn-primary { width: 100%; }

  .band-stats .stats-row { flex-direction: column; }
  .band-stats .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--line-subtle);
  }
  .band-stats .stat { padding: var(--s-6) var(--s-2); }

  .steps,
  .features,
  .features-shots { grid-template-columns: 1fr; }

  .pricing-card { padding: var(--s-6) var(--s-5); }

  .footer .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Reduced motion ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}