/* Watchword — site styles. Tokens per brand-guidelines.md v2.0 (2026-07-15). Renamed from Hedgerow; palette/tokens unchanged. */

:root {
  --hedge-green: #1F3A2E;
  --sage: #7E9A6B;
  --berry: #A8432B;
  --berry-light: #D8795E;
  --paper: #F5F1E8;
  --paper-raised: #FCFAF4;
  --ink: #1C231D;
  --muted-ink: #6E6A5D;
  --deep-hedge: #10150F;
  --deep-hedge-raised: #1A2016;
  --cream: #ECE6D8;
  --muted-cream: #A39D8C;
  --border-light: #D9D3C4;
  --border-dark: #2C3626;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Arial, system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;

  --bg: var(--paper);
  --bg-raised: var(--paper-raised);
  --text: var(--ink);
  --text-muted: var(--muted-ink);
  --heading: var(--hedge-green);
  --link: var(--berry);
  --border: var(--border-light);
  --btn-bg: var(--hedge-green);
  --btn-text: var(--paper);
  --accent-bar: var(--berry);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--deep-hedge);
    --bg-raised: var(--deep-hedge-raised);
    --text: var(--cream);
    --text-muted: var(--muted-cream);
    --heading: var(--cream);
    --link: var(--berry-light);
    --border: var(--border-dark);
    --btn-bg: var(--sage);
    --btn-text: var(--deep-hedge);
    --accent-bar: var(--berry-light);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--heading); font-weight: 600; }
h1 { font-size: 44px; line-height: 1.1; }
h2 { font-size: 32px; line-height: 1.15; }
h3 { font-size: 24px; line-height: 1.25; font-weight: 500; }

p, li { max-width: 68ch; }
a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* Nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: 1060px; margin: 0 auto;
}
.nav .logo img { height: 44px; display: block; }
.nav .logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .nav .logo .logo-light { display: none; }
  .nav .logo .logo-dark { display: block; }
}
.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; flex-wrap: wrap; }
.nav-links a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 16px; }
.nav-links a:hover { color: var(--link); }
.nav-links a.active { color: var(--link); }
.nav-links a.btn-primary { color: var(--btn-text); }
.nav-links a.btn-primary:hover { color: var(--btn-text); }

/* Buttons */
.btn {
  display: inline-block; font-family: var(--font-body); font-size: 16px; font-weight: 600;
  letter-spacing: 0.02em; padding: 14px 28px; border-radius: var(--radius-sm);
  text-decoration: none; border: none; cursor: pointer;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.btn-berry { background: var(--berry); color: #fff; }
.btn:hover { filter: brightness(1.08); }

/* Hero */
.hero { padding: 96px 0 64px; }
.hero .lede { font-size: 20px; line-height: 1.55; margin: 24px 0 32px; max-width: 65ch; }
.hero .catch { font-size: 14px; color: var(--text-muted); margin-top: 16px; }
.hero .cta-row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* Sections */
section { padding: 48px 0; }
section.major { padding: 96px 0; }
.section-kicker {
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px;
}
section h2 { margin-bottom: 24px; }
section p + p { margin-top: 16px; }

/* Stat band */
.stat-band { background: var(--hedge-green); }
.stat-band h2, .stat-band p { color: var(--cream); }
.stat-band .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.stat-band .stat .big { font-family: var(--font-display); font-size: 48px; line-height: 1.05; color: var(--cream); }
.stat-band .stat .label { color: var(--muted-cream); font-size: 16px; margin-top: 8px; }
.stat-band .src { color: var(--muted-cream); font-size: 14px; margin-top: 32px; }
.stat-band .src a { color: var(--muted-cream); }

/* Cards */
.card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 32px;
}
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card h3 { margin-bottom: 12px; }
.card .meta { color: var(--text-muted); font-size: 14px; margin-top: 12px; }
.card.important { border-left: 4px solid var(--accent-bar); }

/* Comparison table */
table.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
table.compare th, table.compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.compare th { font-weight: 600; color: var(--heading); }
table.compare tr.us { background: var(--bg-raised); }
.table-scroll { overflow-x: auto; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price { font-family: var(--font-display); font-size: 48px; color: var(--heading); }
.price small { font-size: 18px; color: var(--text-muted); font-family: var(--font-body); }

/* FAQ */
details { border-bottom: 1px solid var(--border); padding: 16px 0; }
details summary { font-weight: 600; cursor: pointer; font-size: 18px; }
details p { margin-top: 12px; }

/* Footer */
footer { border-top: 1px solid var(--border); margin-top: 96px; padding: 48px 0 64px; }
footer p { font-size: 14px; color: var(--text-muted); max-width: 78ch; }
footer p + p { margin-top: 12px; }
footer .foot-links { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
footer .foot-links a { font-size: 15px; }

/* Guide / long-form article */
.article { max-width: 720px; margin: 0 auto; padding: 64px 24px; }
.article h1 { font-size: 40px; margin-bottom: 16px; }
.article h2 { font-size: 28px; margin: 48px 0 16px; }
.article h3 { margin: 32px 0 12px; }
.article p { margin: 16px 0; }
.article ul, .article ol { margin: 16px 0 16px 24px; }
.article li { margin: 8px 0; }
.article blockquote {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 4px solid var(--accent-bar); border-radius: var(--radius-md);
  padding: 20px 24px; margin: 24px 0; font-size: 17px;
}
.article blockquote p { margin: 8px 0; }
.article .byline { color: var(--text-muted); font-size: 15px; margin-bottom: 32px; }
.article table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 24px 0; }
.article table th, .article table td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
.article table th { color: var(--heading); }
.article .src-note { font-size: 14px; color: var(--text-muted); }
.article hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* Drill */
.drill-shell { max-width: 640px; margin: 0 auto; }
.drill-chat {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 24px; min-height: 320px; display: flex; flex-direction: column; gap: 16px;
}
.bubble { padding: 14px 18px; border-radius: var(--radius-md); max-width: 85%; font-size: 17px; }
.bubble.caller { background: var(--hedge-green); color: var(--cream); align-self: flex-start; }
.bubble.you { background: var(--bg); border: 1px solid var(--border); align-self: flex-end; }
.bubble.narrator { background: none; border: 1px dashed var(--border); color: var(--text-muted); align-self: center; font-size: 15px; max-width: 100%; }
.drill-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.drill-choices button {
  font-family: var(--font-body); font-size: 17px; text-align: left; padding: 14px 18px;
  background: var(--bg-raised); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.drill-choices button:hover { border-color: var(--sage); }
.drill-verdict { border-left: 4px solid var(--accent-bar); }
.drill-meta { text-align: center; color: var(--text-muted); font-size: 14px; margin-top: 16px; }

/* Free tag / small chip (reuses card + accent-bar tokens) */
.tag {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-muted);
}
.tag.tag-free { color: var(--heading); border-color: var(--heading); }

/* Why-free / ritual callout (reuses card + accent-bar pattern already used for .card.important and blockquote) */
.callout {
  background: var(--bg-raised); border: 1px solid var(--border); border-left: 4px solid var(--accent-bar);
  border-radius: var(--radius-md); padding: 32px;
}
.callout h3 { margin-bottom: 12px; }
.callout p + p { margin-top: 12px; }

/* Signup form (Buttondown embed). Reuses card + button tokens; no third-party CSS. */
.signup {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 4px solid var(--accent-bar); border-radius: var(--radius-md);
  padding: 32px; max-width: 640px;
}
.signup-label { display: block; font-family: var(--font-display); font-size: 22px;
  line-height: 1.3; color: var(--heading); margin-bottom: 16px; }
.signup-row { display: flex; gap: 12px; flex-wrap: wrap; }
.signup-row input[type="email"] {
  flex: 1 1 260px; font-family: var(--font-body); font-size: 17px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.signup-row input[type="email"]::placeholder { color: var(--text-muted); }
.signup-row input[type="email"]:focus-visible {
  outline: 2px solid var(--heading); outline-offset: 1px; border-color: var(--heading);
}
.signup-row button { flex: 0 0 auto; cursor: pointer; }
.signup-note { font-size: 14px; color: var(--text-muted); margin-top: 14px; max-width: 60ch; }

/* Responsive */
@media (max-width: 800px) {
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  .hero { padding: 48px 0 32px; }
  section.major { padding: 48px 0; }
  .card-grid, .card-grid-2, .price-grid, .stat-band .stat-grid { grid-template-columns: 1fr; }
  .nav { flex-direction: column; gap: 12px; }
  footer { margin-top: 48px; }
  .signup { padding: 24px; }
  .signup-row button { width: 100%; }
}