:root{
  --bg:#f6f1e7; --card:#fffdf8; --ink:#1f2a24; --muted:#5b665f; --line:#e2dccf;
  --accent:#0f3d24; --accent-ink:#ffffff; --focus:#c97b2a; --error:#a33a2b;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121714;--card:#19201c;--ink:#eef0ea;--muted:#a3aba5;--line:#2c3530;
        --accent:#8fc9a3;--accent-ink:#0d1a12;--focus:#e0a25c;--error:#e08a7c}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;line-height:1.5}
.sans{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{padding:22px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.logo span{font-family:ui-monospace,Menlo,monospace;color:var(--accent);font-weight:400;margin-right:6px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;padding:40px 0 64px}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:32px;padding-top:16px}}
.eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.18em;
  color:var(--accent);text-transform:uppercase;margin:0 0 14px}
h1{font-size:clamp(36px,6vw,58px);line-height:1.05;margin:0 0 18px;letter-spacing:-.01em}
.lede{font-size:20px;color:var(--muted);margin:0 0 28px;max-width:34em}
ul.points{list-style:none;padding:0;margin:0}
ul.points li{padding:12px 0 12px 34px;border-top:1px solid var(--line);position:relative;font-size:17px}
ul.points li:last-child{border-bottom:1px solid var(--line)}
ul.points li::before{content:"";position:absolute;left:4px;top:20px;width:12px;height:12px;
  border:2px solid var(--accent);border-radius:50%}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.card h2{font-size:24px;margin:0 0 4px}
.card .sub{color:var(--muted);margin:0 0 20px;font-size:15px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
.hint{font-weight:400;color:var(--muted)}
input,select{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink)}
input:focus,select:focus,button:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.areacode{display:flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace}
.areacode span{font-size:28px;color:var(--muted)}
.areacode input{font-family:inherit;font-size:28px;letter-spacing:.3em;text-align:center;width:150px;padding:8px 10px}
button{width:100%;margin-top:22px;padding:14px 18px;border:0;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-size:17px;font-weight:600;cursor:pointer}
button[disabled]{opacity:.6;cursor:wait}
.fine{font-size:13px;color:var(--muted);margin:14px 0 0}
.fine a{color:inherit}
.error{color:var(--error);font-size:14px;margin:10px 0 0;min-height:1em}
.done{text-align:center;padding:20px 0}
.done .big{font-family:ui-monospace,Menlo,monospace;font-size:40px;color:var(--accent);margin:0 0 8px}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
footer a{color:inherit}
.prose{max-width:680px;padding:24px 0 64px}
.prose h1{font-size:40px}
.prose h2{font-size:22px;margin-top:32px}
.jump{display:none}
@media (max-width:820px){
  .jump{display:block;text-align:center;margin:0 0 24px;padding:14px 18px;border-radius:999px;
    background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}
}