/* Public pages (templates/site/): pricing, FAQ, about, guides, policies,
   unsubscribe. The tokens are the app's (templates/index.html), so a visitor
   moving from a guide to the app sees one product.
   Light mode: --sky (#14A6E6) is 2.75:1 on white, so it stays for the
   wordmark only; buttons, links and focus rings use --sky-ink and
   --sky-strong, at least 4.5:1 on every light background, and --ink-faint
   is darkened to match. Dark mode is unchanged: its --sky-ink is its --sky.
   The reasoning is in templates/index.html; the ratios are recomputed in
   tests/test_light_mode_contrast.py. */
:root{
  --sky:#14A6E6; --sky-strong:#0A6CA0; --sky-soft:#CDF0FC; --sky-pale:#E6F7FD; --sky-surface:#F3FBFE; --on-sky:#FFFFFF;
  --sky-ink:#0A6CA0;
  --gold:#B8862E; --gold-soft:#F3E7C8; --gold-ink:#5C4315;
  --ink:#132430; --ink-soft:#4C6373; --ink-faint:#55697A;
  --surface:#FFFFFF; --surface-2:#EAF4FA; --line:#D3E5EF;
  --success:#2F8F5C; --success-soft:#DEF0E5; --danger:#C1473B; --danger-soft:#FBE1DE;
  --font-display:'Sora', -apple-system, sans-serif;
  --font-body:'Source Sans 3', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --shadow:0 1px 2px rgba(19,36,48,0.06), 0 6px 18px rgba(19,36,48,0.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky:#5FC3EE; --sky-strong:#8AD4F5; --sky-soft:#123A48; --sky-pale:#0B1A20; --sky-surface:#0F222A; --on-sky:#062430;
    --sky-ink:#5FC3EE;
    --gold:#E0BB6B; --gold-soft:#3A2E14; --gold-ink:#F6E4BC;
    --ink:#EAF3F8; --ink-soft:#A9C0CC; --ink-faint:#8399A6;
    --surface:#16262F; --surface-2:#1E323D; --line:#24404C;
    --success:#6FCB94; --success-soft:#163C27; --danger:#E2897E; --danger-soft:#3B1E1B;
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 10px 22px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --sky:#5FC3EE; --sky-strong:#8AD4F5; --sky-soft:#123A48; --sky-pale:#0B1A20; --sky-surface:#0F222A; --on-sky:#062430;
  --sky-ink:#5FC3EE;
  --gold:#E0BB6B; --gold-soft:#3A2E14; --gold-ink:#F6E4BC;
  --ink:#EAF3F8; --ink-soft:#A9C0CC; --ink-faint:#8399A6;
  --surface:#16262F; --surface-2:#1E323D; --line:#24404C;
  --success:#6FCB94; --success-soft:#163C27; --danger:#E2897E; --danger-soft:#3B1E1B;
  --shadow:0 1px 2px rgba(0,0,0,0.35), 0 10px 22px rgba(0,0,0,0.4);
}
*{box-sizing:border-box;}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--sky-pale); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.2; text-wrap:balance; color:var(--ink); margin:0;}
a{color:var(--sky-strong);}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--sky-ink); outline-offset:2px;}
.skip{position:absolute; left:-999px;}
.skip:focus{left:16px; top:12px; background:var(--surface); padding:8px 12px; border-radius:6px; z-index:10;}

/* Header */
.site-head{border-bottom:1px solid var(--line); background:var(--surface);}
.site-head-in{max-width:1040px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:32px; height:32px;}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-0.01em; color:var(--ink);}
.brand-name b{color:var(--sky); font-weight:800;}
.site-nav{display:flex; align-items:center; gap:4px 18px; flex-wrap:wrap; font-size:15px;}
.site-nav a{color:var(--ink-soft); text-decoration:none;}
.site-nav a:hover, .site-nav a[aria-current="page"]{color:var(--ink);}
.btn{display:inline-block; font-family:var(--font-body); font-weight:600; font-size:15px; padding:10px 18px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; cursor:pointer;}
.btn-primary{background:var(--sky-ink); border-color:var(--sky-ink); color:var(--on-sky);}
.site-nav .btn{padding:7px 14px; font-size:14.5px;}
.site-nav .btn-primary{color:var(--on-sky);}

/* Page body */
main{flex:1; width:100%; max-width:1040px; margin:0 auto; padding:40px 16px 64px;}
.page{max-width:720px; margin:0 auto;}
.page h1{font-size:clamp(28px, 4.5vw, 38px); margin-bottom:14px;}
.page h2{font-size:22px; margin:36px 0 10px;}
.page h3{font-size:18px; margin:24px 0 8px;}
.page p, .page ul, .page ol{margin:0 0 14px;}
.page li{margin:4px 0;}
.lede{font-size:19px; color:var(--ink-soft);}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.last-checked{font-size:14px; color:var(--ink-faint);}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:24px; box-shadow:var(--shadow);}
.table-wrap{overflow-x:auto; margin:0 0 18px;}
table{border-collapse:collapse; width:100%; font-size:15.5px; font-variant-numeric:tabular-nums;}
th, td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--ink-soft);}
.note{background:var(--sky-surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; font-size:15.5px;}
.msg{padding:12px 14px; border-radius:6px; font-size:15.5px; margin:0 0 16px;}
.msg.ok{background:var(--success-soft); color:var(--success);}
.msg.err{background:var(--danger-soft); color:var(--danger);}
details{border-bottom:1px solid var(--line); padding:12px 0;}
summary{cursor:pointer; font-weight:600; font-size:17px;}
details > div{margin-top:8px; color:var(--ink-soft);}

/* Guides, FAQ, pricing, dates, policies */
.preview-bar{background:var(--gold-soft); color:var(--gold-ink); font-size:14.5px; padding:10px 16px; text-align:center;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.prose h2{scroll-margin-top:16px;}
.prose table caption{caption-side:top; text-align:left; font-weight:600; padding:0 0 8px;}
.prose .facts-table, .prose .blueprint-table{margin:0 0 18px;}
.prose .sources{font-size:15px;}
.prose .disclaimer, .prose .author-line{color:var(--ink-soft); font-size:15.5px;}
.prose hr{border:0; border-top:1px solid var(--line); margin:28px 0;}
.prose section{margin:0;}
.page-faq{margin-top:36px;}
.cta-card{margin-top:40px; background:var(--sky-surface); border:1px solid var(--line); border-radius:10px; padding:22px 24px;}
.cta-card h2{margin:0 0 8px; font-size:20px;}
.cta-card p:last-child{margin:0; display:flex; gap:10px; flex-wrap:wrap;}
.plans{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin:24px 0 10px;}
.plan h2{margin:0 0 6px; font-size:18px;}
.plan .price{font-family:var(--font-display); font-size:26px; font-weight:700; margin:0; font-variant-numeric:tabular-nums;}
.plan .per{color:var(--ink-soft); font-size:15px; margin:4px 0 0;}
tr.past{color:var(--ink-faint);}
.legal .view-head .eyebrow{display:block; margin-bottom:10px;}
.legal .view-head h1{font-size:clamp(28px, 4.5vw, 38px); margin-bottom:10px;}
.legal .dek{color:var(--ink-soft);}
.legal section.block{margin-top:28px;}
.legal section.block h2{font-size:20px; margin:0 0 8px;}
.legal section.block p{margin:0 0 12px;}

/* Footer */
.site-foot{border-top:1px solid var(--line); background:var(--surface); font-size:14.5px; color:var(--ink-soft);}
.site-foot-in{max-width:1040px; margin:0 auto; padding:28px 16px 36px; display:grid; gap:14px;}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 18px;}
.foot-links a{color:var(--ink-soft);}
.independence{max-width:72ch;}
.small{font-size:13.5px; color:var(--ink-faint);}

@media (max-width:560px){
  body{font-size:16px;}
  main{padding:28px 16px 48px;}
  .site-nav{gap:4px 14px; font-size:14.5px;}
}
