/* site.css — shared stylesheet for the SEO content pages (voice-golf-tracker,
   scorecard-scanner, arccos-alternative, strokes-gained, …). The homepage
   (index.html) is a self-contained monolith and does NOT use this file; these
   pages are their own family. Tokens + dark mode mirror index.html / Theme.swift
   exactly so the whole site reads as one brand. "Navy becomes the paper" in dark
   (brand-brief §5); system-follow only, no toggle. */

/* --- fonts: self-hosted Latin-subset woff2 (same files index.html uses) --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400 500; font-display:swap; src:url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2'); }

:root {
  --paper:#F9F5EB; --paper-inset:#F1EBDC; --ink:#16243D; --ink-secondary:#5F6B81;
  --course:#1F5C41; --course-wash:#E7EFE8; --gold:#C9A96E; --clay:#A4543F;
  --miss-gold:#977B40; --pencil:#9A948A; --rule:#E9E3D3; --night:#0B1424;
  --night-ink:#F2EDE0; --ease:cubic-bezier(0.22,1,0.36,1);
}
@media (prefers-color-scheme:dark) {
  :root {
    --paper:#0B1424; --paper-inset:#15233B; --ink:#F2EDE0; --ink-secondary:#9FA8B8;
    --course:#2E7A57; --course-wash:#122A1E; --gold:#D4B57E; --clay:#C26A52;
    --miss-gold:#977B40; --pencil:#6E7683; --rule:#223048; --night:#0B1424;
    --night-ink:#F2EDE0;
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body {
  background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection { background:rgba(201,169,110,0.35); }
.wrap { max-width:760px; margin:0 auto; padding:0 28px; }
.wrap-wide { max-width:1020px; margin:0 auto; padding:0 28px; }
.serif { font-family:'Playfair Display',Georgia,serif; }
a { color:inherit; }
img { max-width:100%; height:auto; }

.seclabel {
  font-size:11px; letter-spacing:2.5px; font-weight:600;
  text-transform:uppercase; color:var(--pencil);
}

/* --- header --- */
header { padding:26px 0; border-bottom:1px solid var(--rule); }
header .brand { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Playfair Display',serif; font-weight:600; font-size:20px;
  letter-spacing:0.2px; color:inherit; text-decoration:none;
}
.flagmark { display:block; }
.flagmark path { stroke:var(--ink); }
.nav-cta {
  font-size:13px; font-weight:600; letter-spacing:0.3px; text-decoration:none;
  color:var(--ink); border:1.5px solid var(--rule); border-radius:999px;
  padding:8px 16px; transition:border-color .15s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover { border-color:var(--pencil); }

/* --- breadcrumb --- */
.crumb { padding:22px 0 0; font-size:12.5px; color:var(--ink-secondary); }
.crumb a { color:var(--ink-secondary); text-decoration:none; }
.crumb a:hover { color:var(--ink); }
.crumb span { color:var(--pencil); margin:0 6px; }

/* --- hero --- */
.hero { padding:40px 0 56px; }
.hero .overline { display:block; margin-bottom:20px; }
.hero h1 {
  font-family:'Playfair Display',serif; font-weight:500;
  font-size:clamp(38px,6vw,60px); line-height:1.05; letter-spacing:-0.5px;
  margin-bottom:24px;
}
.hero h1 em { font-style:italic; font-weight:400; }
/* answer-first block: a self-contained definition for AI-answer extraction */
.lede {
  font-size:19px; line-height:1.55; max-width:600px; color:var(--ink);
}
.lede .muted { color:var(--ink-secondary); }

/* --- generic prose sections --- */
section { padding:48px 0; }
section + section { border-top:1px solid var(--rule); }
h2.serif {
  font-family:'Playfair Display',serif; font-weight:500;
  font-size:clamp(26px,4vw,36px); line-height:1.15; letter-spacing:-0.3px;
  margin-bottom:20px;
}
h3 { font-size:19px; font-weight:600; margin-bottom:8px; letter-spacing:-0.1px; }
p.body { font-size:16px; color:var(--ink-secondary); margin-bottom:16px; max-width:620px; }
p.body strong { color:var(--ink); font-weight:600; }
p.body em { font-style:italic; }
.lead-in { font-size:18px; color:var(--ink); margin-bottom:28px; max-width:620px; }

/* --- steps / feature list --- */
.steps { display:grid; gap:28px; margin-top:8px; }
@media (min-width:640px) { .steps.cols-3 { grid-template-columns:repeat(3,1fr); gap:32px; } }
.step .num {
  font-family:'Playfair Display',serif; font-size:30px; color:var(--gold);
  line-height:1; display:block; margin-bottom:12px;
}
.step h3 { margin-bottom:6px; }
.step p { font-size:15px; color:var(--ink-secondary); }

/* --- "when you want it" cards (the differentiator surface) --- */
.modes { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:14px; overflow:hidden; margin-top:8px; }
@media (min-width:640px) { .modes { grid-template-columns:1fr 1fr; } }
.mode { background:var(--paper); padding:24px 22px; }
.mode .seclabel { color:var(--course); margin-bottom:10px; display:block; }
.mode h3 { margin-bottom:6px; }
.mode p { font-size:15px; color:var(--ink-secondary); }

/* --- comparison table --- */
.compare-wrap { border:1px solid var(--rule); border-radius:14px; overflow-x:auto; margin-top:12px; }
table.compare { width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
table.compare th, table.compare td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--rule); }
table.compare thead th { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-secondary); font-weight:600; }
table.compare thead th.us { color:var(--course); }
table.compare tbody th { font-weight:500; color:var(--ink); }
table.compare td { color:var(--ink-secondary); text-align:center; }
table.compare td.us { background:var(--course-wash); color:var(--ink); font-weight:600; }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom:none; }
.compare-note { font-size:13px; color:var(--ink-secondary); margin-top:14px; }

/* --- FAQ --- */
.faq { margin-top:8px; }
.faq details {
  border-bottom:1px solid var(--rule); padding:18px 0;
}
.faq details:first-of-type { border-top:1px solid var(--rule); }
.faq summary {
  font-size:17px; font-weight:600; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold); font-size:22px; font-weight:400; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin-top:12px; font-size:15px; color:var(--ink-secondary); max-width:640px; }

/* --- CTA band --- */
.cta-band { padding:64px 0; text-align:center; background:var(--paper-inset);
  border-top:1px solid var(--rule); }
.cta-band h2 { margin-bottom:10px; }
.cta-band p { color:var(--ink-secondary); margin-bottom:26px; }

/* --- signup form (wired by /signup.js) --- */
.signup { max-width:480px; margin:0 auto; }
.signup form { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.signup input[type="email"] {
  flex:1 1 240px; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:12px;
  padding:13px 15px;
}
.signup input[type="email"]::placeholder { color:var(--pencil); }
.signup input[type="email"]:focus { outline:none; border-color:var(--ink); }
.signup button {
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:0.2px;
  color:#16243D; background:var(--gold); border:none; border-radius:12px;
  padding:13px 24px; cursor:pointer; transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.signup button:hover { transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(201,169,110,0.7); }
.signup button:active { transform:translateY(0); box-shadow:none; }
.signup button:disabled { opacity:0.5; cursor:default; transform:none; box-shadow:none; }
.signup .note { margin-top:12px; font-size:13.5px; color:var(--ink-secondary); min-height:16px; }
.signup .note.ok { color:var(--course); }
.signup .note.err { color:var(--clay); }
/* honeypot */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- related pages --- */
.related { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.related a {
  font-size:14px; font-weight:500; text-decoration:none; color:var(--ink);
  border:1.5px solid var(--rule); border-radius:999px; padding:9px 16px;
  transition:border-color .15s var(--ease);
}
.related a:hover { border-color:var(--pencil); }

/* --- footer: brand block + link columns by vertical --- */
footer { padding:56px 0 44px; border-top:1px solid var(--rule); margin-top:0; }
.foot-top { display:grid; gap:36px 48px; }
@media (min-width:760px){ .foot-top { grid-template-columns:minmax(180px,0.8fr) 2.8fr; } }
.foot-brand .wordmark { font-size:18px; }
.foot-brand .foot-tag { font-family:'Playfair Display',serif; font-style:italic; font-size:19px; color:var(--ink); margin:14px 0 16px; }
.foot-brand small { display:block; color:var(--ink-secondary); font-size:12.5px; }
.foot-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
@media (min-width:700px){ .foot-cols { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.foot-col { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.foot-head { font-size:11px; letter-spacing:1.8px; text-transform:uppercase; font-weight:600; color:var(--pencil); }
.foot-col a { font-size:14px; color:var(--ink-secondary); text-decoration:none; }
.foot-col a:hover { color:var(--ink); }
.foot-social { display:flex; gap:16px; margin-top:18px; }
.foot-social a { color:var(--ink-secondary); display:inline-flex; transition:color .15s var(--ease); }
.foot-social a:hover { color:var(--ink); }
.foot-social svg { width:20px; height:20px; }