:root{
  --ground:#14181C; --surface:#1B2026; --raised:#222831;
  --text:#E8EDE6; --dim:rgba(232,237,230,.62); --faint:rgba(232,237,230,.38);
  --accent:#C5E86C; --accent-dim:rgba(197,232,108,.20);
  --rule:rgba(232,237,230,.10);
  --serif:ui-serif,Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);color:var(--text);font-family:var(--sans);font-size:16px;
  line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem}
nav{position:sticky;top:0;z-index:10;background:rgba(20,24,28,.9);border-bottom:1px solid var(--rule);
  backdrop-filter:blur(8px)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.logo{font-family:var(--serif);font-size:1.15rem;text-decoration:none;color:var(--text)}
.logo span{color:var(--accent)}
nav a.link{color:var(--dim);text-decoration:none;font-size:.9rem;margin-left:1.5rem}
nav a.link:hover{color:var(--text)}
header.hero{padding:6rem 0 4rem;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.5vw,3.4rem);line-height:1.1;
  letter-spacing:-.015em;text-wrap:balance;margin-bottom:1.1rem}
.standfirst{color:var(--dim);font-size:1.12rem;max-width:38rem}
h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:0 0 .5rem;text-wrap:balance}
h3{font-size:1rem;font-weight:600;margin-bottom:.4rem}
p{margin-bottom:1rem}
section{padding:4rem 0;border-bottom:1px solid var(--rule)}
.sub{color:var(--faint);font-size:.9rem;margin-bottom:2rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:1.4rem}
.card p{color:var(--dim);font-size:.93rem;margin:0}
.plans{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:stretch}
/* One plan left after Observer was retired; auto-fit would stretch it full width. */
.plans.solo{grid-template-columns:minmax(15rem,22rem)}
.plan{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:1.5rem;
  display:flex;flex-direction:column}
.plan.featured{border-color:var(--accent);background:var(--raised)}
.plan .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.6rem;min-height:1em}
.plan .name{font-family:var(--serif);font-size:1.35rem;margin-bottom:.3rem}
.plan .price{font-family:var(--mono);font-size:1.6rem;font-variant-numeric:tabular-nums}
.plan .per{color:var(--faint);font-size:.8rem;margin-bottom:1rem}
.plan ul{list-style:none;margin:0 0 1.2rem}
.plan li{color:var(--dim);font-size:.9rem;padding:.3rem 0 .3rem 1.2rem;position:relative}
.plan li::before{content:"·";position:absolute;left:.3rem;color:var(--accent)}
.note{border-left:2px solid var(--accent-dim);padding-left:1.1rem;color:var(--dim);font-size:.95rem;
  margin:1.5rem 0}
.scroller{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:28rem}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--rule)}
th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
footer{padding:3rem 0;color:var(--faint);font-size:.85rem}
footer a{color:var(--dim);text-decoration:none;margin-right:1.25rem}
footer a:hover{color:var(--text)}
code{font-family:var(--mono);font-size:.88em}
main.policy{max-width:44rem;margin:0 auto;padding:5rem 1.5rem 4rem}
main.policy h2{font-size:1.4rem;margin:2.4rem 0 .7rem}
main.policy li{color:var(--dim);margin-bottom:.5rem}
main.policy ul{padding-left:1.15rem;margin-bottom:1rem}
main.policy p{color:var(--dim)}
main.policy strong{color:var(--text);font-weight:600}
main.policy a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
.updated{color:var(--faint);font-size:.85rem;margin-bottom:2.5rem}
.lede{color:var(--text);font-size:1.05rem;border-left:2px solid var(--accent-dim);
  padding-left:1.1rem;margin-bottom:2rem}
@media(prefers-color-scheme:light){
  :root{--ground:#F5F4EF;--surface:#FFF;--raised:#F0EFE8;--text:#191D16;
    --dim:rgba(25,29,22,.66);--faint:rgba(25,29,22,.42);--accent:#4E7314;
    --accent-dim:rgba(78,115,20,.16);--rule:rgba(25,29,22,.12)}
  nav{background:rgba(245,244,239,.9)}
}

/* Call-to-action buttons. Anchors are otherwise only styled inside nav, footer and
   main.policy, so a link anywhere else renders as unstyled browser default. */
.btn{display:inline-block;background:var(--accent);color:var(--ground);text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.7rem 1.3rem;
  border-radius:6px;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent-dim)}
.btn.ghost:hover{border-color:var(--accent);filter:none}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.75rem}
.cta .note{color:var(--faint);font-size:.85rem;margin:0}
.keybox{font-family:var(--mono);font-size:.95rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:6px;padding:.7rem .9rem;
  user-select:all;word-break:break-all;display:inline-block}
.plan-cta{display:block;text-align:center;margin-top:1.25rem}