:root {
  --bg: #fafaf8;
  --ink: #111;
  --muted: #666;
  --faint: #737373;
  --faint-dark: #999;
  --rule: #e3e3de;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, 'Segoe UI', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }

h1, h2, .price, .step-num, .wordmark { font-family: var(--serif); font-weight: 400; }
.wordmark { font-size: 18px; letter-spacing: 3px; }
.label { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 3px; color: var(--faint); margin-bottom: 32px; }
/* .label is used on h2 elements in #how/#pricing/#faq (a11y heading structure) — it must override the serif h2 rule */

.nav { display: flex; justify-content: space-between; align-items: center; padding: 28px 6vw; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { color: var(--ink) !important; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

.hero { display: flex; gap: 6vw; padding: 9vh 6vw 12vh; align-items: center; }
.hero-copy { flex: 1.2; }
.hero h1 { font-size: clamp(34px, 4.5vw, 52px); line-height: 1.18; }
.hero h1 strong { font-weight: 700; }
.hero-sub { color: var(--muted); max-width: 46ch; margin-top: 24px; font-size: 15px; }
.kicker { font-size: 12px; letter-spacing: 3px; color: var(--faint); margin-top: 20px; }

.form-card { flex: 0.8; background: #fff; border: 1px solid var(--rule); padding: 36px; min-width: 320px; }
.form-card h2 { font-size: 20px; margin-bottom: 20px; }
.form-card input { width: 100%; border: 1px solid var(--rule); background: var(--bg); padding: 12px 14px; margin-bottom: 12px; font: inherit; font-size: 14px; }
.form-card input:focus { outline: none; border-color: var(--ink); }
.form-card button { width: 100%; background: var(--ink); color: #fff; border: 0; padding: 14px; font-size: 13px; letter-spacing: 1.5px; cursor: pointer; font-family: var(--sans); }
.form-card button:hover { background: #000; }
.form-card button:disabled { opacity: 0.6; cursor: wait; }
.reassure { text-align: center; color: var(--faint); font-size: 12px; margin-top: 12px; }
.form-note { font-size: 13px; margin-top: 10px; color: #8a2b2b; }
.form-success p { color: var(--muted); font-size: 14px; margin-top: 12px; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }

.band { padding: 88px 6vw; }
.band-white { background: #fff; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-dark { background: var(--ink); color: #fff; text-align: center; }
.band-dark h2 { font-size: 30px; }
.band-dark p { color: var(--faint-dark); font-size: 14px; margin-top: 10px; }
.button-light { display: inline-block; background: #fff; color: var(--ink); padding: 14px 32px; font-size: 13px; letter-spacing: 1.5px; text-decoration: none; margin-top: 28px; }

.steps { display: flex; gap: 40px; }
.step { flex: 1; }
.step-num { font-size: 26px; }
.step h3 { font-size: 16px; margin: 10px 0 8px; }
.step p { color: var(--muted); font-size: 14px; }

.tiers { display: flex; gap: 24px; }
.tier { flex: 1; background: #fff; border: 1px solid var(--rule); padding: 34px; }
.tier h3 { font-size: 15px; }
.tier .price { font-size: 38px; margin: 14px 0 6px; }
.tier .price span { font-size: 15px; color: var(--faint); }
.tier ul { list-style: none; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 2; }
.tier-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.tier-dark ul { color: #bbb; }
.tier-dark .price span { color: #888; }

.founding { max-width: 560px; }
.founding h2 { font-size: 26px; line-height: 1.4; }
.founding p { color: var(--muted); font-size: 15px; margin-top: 16px; }
.text-link { display: inline-block; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; font-size: 14px; margin-top: 18px; }

.faq-list { max-width: 620px; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { padding: 16px 0; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.faq-list summary::after { content: '+'; color: var(--faint); }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list details p { color: var(--muted); font-size: 14px; padding: 0 0 18px; max-width: 56ch; }

.footer { display: flex; justify-content: space-between; align-items: center; padding: 30px 6vw; border-top: 1px solid var(--rule); }
.footer-mail { color: var(--faint); font-size: 13px; text-decoration: none; }
.footer-mail:hover { color: var(--ink); }

@media (max-width: 820px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .hero { flex-direction: column; padding-top: 6vh; }
  .form-card { width: 100%; min-width: 0; }
  .steps, .tiers { flex-direction: column; }
  .band { padding: 64px 6vw; }
}