:root{
  --paper:#F7F5F2; --surface:#FFFFFF; --surface-2:#EFEBE5;
  --ink:#17181C; --ink-2:#4A4E56; --ink-3:#767B84;
  --line:#DFD9D1; --line-2:#C9C2B8;
  --accent:#1F4E5F; --accent-soft:#DCEAEE;
  --brass:#8A6220;
  --measure:64ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111316; --surface:#191C20; --surface-2:#22262B;
    --ink:#EDEBE7; --ink-2:#B4B8BE; --ink-3:#82878F;
    --line:#2A2F35; --line-2:#3A4048;
    --accent:#79B6C6; --accent-soft:#122B33;
    --brass:#CFA45E;
  }
}
:root[data-theme="dark"]{
  --paper:#111316; --surface:#191C20; --surface-2:#22262B;
  --ink:#EDEBE7; --ink-2:#B4B8BE; --ink-3:#82878F;
  --line:#2A2F35; --line-2:#3A4048;
  --accent:#79B6C6; --accent-soft:#122B33;
  --brass:#CFA45E;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}
h1,h2,h3{text-wrap:balance;margin:0;font-family:"Newsreader",Georgia,serif;font-weight:500;
  letter-spacing:-.01em;line-height:1.15}
p{margin:0 0 1em}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.87em;
  background:var(--surface-2);padding:1px 5px;border-radius:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* nav */
nav{border-bottom:1px solid var(--line);background:var(--paper)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.brand{font-family:"Newsreader",serif;font-size:21px;font-weight:600;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px}
.brand span{font-family:"Public Sans",sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);font-weight:700}
nav ul{display:flex;gap:19px;list-style:none;margin:0;padding:0;font-size:14px}
nav a:not(.brand){color:var(--ink-2);text-decoration:none}
nav a:not(.brand):hover{color:var(--accent);text-decoration:underline}

/* hero */
.hero{padding:66px 0 8px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(34px,6.5vw,54px);margin-bottom:20px;max-width:16ch}
.hero .sub{font-size:19px;color:var(--ink-2);max-width:var(--measure);margin-bottom:30px}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  font-weight:700;margin-bottom:16px}
.hero-note{font-size:14px;color:var(--ink-3);padding-bottom:52px}

section{padding:52px 0;border-bottom:1px solid var(--line)}
section h2{font-size:27px;margin-bottom:16px}
section p,section li{max-width:var(--measure);color:var(--ink-2)}
section h2+p{color:var(--ink-2)}

.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);margin-top:8px}
.points > div{background:var(--surface);padding:22px}
.points h3{font-size:17px;margin-bottom:7px;font-family:"Public Sans",sans-serif;font-weight:600;
  letter-spacing:0}
.points p{font-size:14.5px;margin:0;color:var(--ink-2)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.plan{border:1px solid var(--line);background:var(--surface);padding:24px;display:flex;
  flex-direction:column;gap:5px}
.plan.feat{border-color:var(--accent);border-width:2px}
.plan .name{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.plan .price{font-family:"Newsreader",serif;font-size:35px;line-height:1;margin:5px 0 2px;
  font-variant-numeric:tabular-nums}
.plan .per{font-size:13px;color:var(--ink-3)}
.plan .save{font-size:13px;color:var(--brass);font-weight:600;margin-top:4px}

/* legal pages */
.legal{padding:46px 0 72px}
.legal h1{font-size:clamp(28px,5vw,40px);margin-bottom:10px}
.updated{font-size:13px;color:var(--ink-3);margin-bottom:34px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.legal h2{font-size:20px;margin:36px 0 11px;padding-top:4px}
.legal h3{font-size:16px;margin:22px 0 7px;font-family:"Public Sans",sans-serif;font-weight:600;
  letter-spacing:0}
.legal p,.legal li{color:var(--ink-2);max-width:var(--measure)}
.legal ul{padding-left:20px;margin:0 0 1em}
.legal li{margin-bottom:6px}
.legal li::marker{color:var(--ink-3)}
.callout{border-left:3px solid var(--accent);background:var(--surface);padding:14px 18px;
  margin:20px 0;max-width:var(--measure)}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;display:block;
  overflow-x:auto;white-space:nowrap}
th,td{text-align:left;padding:9px 13px;border:1px solid var(--line);white-space:normal}
th{background:var(--surface-2);font-weight:600;font-size:13px}
td{color:var(--ink-2);vertical-align:top}

footer{padding:38px 0 56px;font-size:14px;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer ul{display:flex;gap:17px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}
@media (max-width:520px){.hero{padding-top:44px}section{padding:38px 0}}