/* Shared chrome for the standalone legal pages (terms, refund, pricing).
   privacy.html predates this file and keeps its own inline copy; the values
   here are that copy verbatim, plus the pricing-table and notice additions at
   the bottom. If the palette moves, both places move. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --cloud-white: #F4F9FC;
  --accent: #0A66C2;
  --ink: #0E1E2C;
  --ink-2: #556B82;
  --separator: #E2EAF2;
  --raised: #FFFFFF;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 20px 80px;
  background: var(--cloud-white); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 680px; margin: 0 auto; padding-top: 48px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.1; margin: 0 0 8px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; margin: 40px 0 10px; }
.meta { color: var(--ink-2); font-size: 14px; margin: 0 0 8px; }
.draft {
  margin: 24px 0 0; padding: 14px 16px;
  background: #FFF8E1; border-radius: 10px;
  font-size: 14px; line-height: 1.5; color: #6b5300;
}
p, li { color: var(--ink); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--separator); vertical-align: top; }
th { color: var(--ink-2); font-weight: 600; }
a { color: var(--accent); }
.back { display: inline-block; margin-top: 40px; font-weight: 600; }
code { background: #fff; padding: 1px 5px; border-radius: 4px; font-size: 14px; }

/* --- pricing ---------------------------------------------------------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 8px; }
.plan {
  background: var(--raised); border: 1px solid var(--separator);
  border-radius: 14px; padding: 22px 20px;
}
.plan.pro { border-color: var(--accent); }
.plan h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 0 0 2px; }
.plan .price { font-size: 32px; font-weight: 600; letter-spacing: -0.5px; margin: 6px 0 2px; }
.plan .price span { font-size: 15px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.plan .who { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.plan ul { list-style: none; padding: 0; margin: 0; }
.plan li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; margin: 9px 0; }
.plan li::before { content: '✓'; color: var(--accent); font-weight: 700; line-height: 1.4; }
.plan li.no { color: var(--ink-2); }
.plan li.no::before { content: '–'; color: var(--ink-2); }
.cta {
  display: inline-block; margin-top: 18px; padding: 11px 20px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.cta.ghost { background: transparent; color: var(--accent); border: 1px solid var(--separator); }
/* One column on phones — two 1fr cards at 402px squeeze the price to two
   lines and the tick lists stop scanning as lists. */
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* --- shared footer nav ------------------------------------------------ */
.legal-nav {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--separator);
  font-size: 14px; color: var(--ink-2);
}
.legal-nav a { margin-right: 16px; display: inline-block; }

@media (prefers-color-scheme: dark) {
  :root { --cloud-white: #0E1520; --ink: #E8EEF5; --ink-2: #93A6BA; --separator: #223142; --raised: #16202D; }
  .draft { background: #2A2415; color: #E8D9A8; }
  code { background: #1a2432; }
}