/* The app's visual system, on the web: the same palette, the same two
   faces, hairlines instead of shadows, 4px corners, figures in mono. */
:root{
  --forest:#326C56; --forest-deep:#1E4638; --ink:#101F19; --slate:#4A5C55;
  --paper:#F2F4F1; --card:#FFFFFF; --line:#CFD8D3; --brick:#9C2F1B; --amber:#7A5300;
  --gold:#E8B93B; --amber-fill:#FBF6E8; --amber-line:#D9C68A; --amber-ink:#4A3C10;
  --forest-fill:#EEF6F1; --forest-line:#A9CDBB; --forest-ink:#1B4536;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.55;font-size:16px}
a{color:var(--forest-deep)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.row{display:flex;align-items:center;gap:22px}
.muted{color:var(--slate)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
.site-head{background:var(--forest);color:#fff}
.site-head .wrap{height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.3px}
.site-nav{display:flex;gap:4px;margin-left:8px;flex:1}
.site-nav a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-bottom:2px solid transparent}
.site-nav a.on,.site-nav a:hover{color:#fff;border-bottom-color:var(--gold)}
@media (max-width:760px){.site-nav{display:none}}

/* buttons */
.btn{display:inline-block;font-weight:700;font-size:15px;border-radius:4px;padding:12px 18px;text-decoration:none;border:1px solid var(--forest-deep);background:var(--forest-deep);color:#fff;min-height:44px;line-height:1.2}
.btn:hover{background:#163529}
.btn-ghost{background:#fff;color:var(--forest-deep)}
.btn-light{background:#fff;color:var(--forest-deep);border-color:#fff;padding:10px 14px;font-size:14px}
.btn-quiet{background:transparent;color:var(--forest-deep);border-color:var(--line)}

/* hero */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--line);background:#fff}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;font-weight:800;max-width:18ch}
.hero p.lead{font-size:20px;color:var(--slate);max-width:56ch;margin:0 0 28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:700;margin:0 0 10px}

/* sections */
section.band{padding:64px 0}
section.band.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;font-weight:800}
h3{font-size:20px;margin:0 0 8px;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--slate);font-size:17px;max-width:62ch;margin:0 0 32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px 22px}
.card p{margin:0;color:var(--slate);font-size:15px}
.card h3{font-size:17px}
.card .k{font-family:var(--mono);font-size:11px;color:var(--forest);font-weight:600;letter-spacing:.06em;margin:0 0 8px}

/* the notice — the app's signature card, drawn here for the hero */
.notice{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 18px 44px rgba(16,31,25,.10)}
.notice-top{padding:14px 16px 12px;border-bottom:1px dashed var(--line)}
.where{font-size:12px;font-weight:700;color:var(--forest);margin:0 0 4px;display:flex;gap:6px;align-items:center}
.where i{width:6px;height:6px;border-radius:50%;background:var(--forest)}
.what{font-size:18px;font-weight:700;margin:0}
.q4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:0}
.q4 div{background:#fff;padding:10px 16px}
.q4 dt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);font-weight:700;margin:0 0 4px}
.q4 dd{margin:0;font-size:15px;font-weight:600}
.q4 dd.money{font-family:var(--mono);font-size:18px}
.q4 dd small{display:block;font-weight:400;font-size:12px;color:var(--slate)}
.notice-act{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px}
.notice-act .btn{flex:1;text-align:center;padding:11px 12px;font-size:14px}
.soon{color:var(--amber)}

/* consequence / note boxes */
.box{border-radius:4px;padding:14px 16px;font-size:15px;margin:18px 0}
.box b{display:block;margin-bottom:4px}
.box.amber{background:var(--amber-fill);border:1px solid var(--amber-line);color:var(--amber-ink)}
.box.green{background:var(--forest-fill);border:1px solid var(--forest-line);color:var(--forest-ink)}

/* pricing tables */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:15px}
th{text-align:left;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:#F7F9F7}
td{padding:11px 14px;border-bottom:1px solid #E6EBE8;vertical-align:top}
td:first-child{white-space:nowrap}
td.num,th.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
.tag{font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border:1px solid currentColor;border-radius:2px;white-space:nowrap}
.price{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.02em;margin:6px 0 2px}
.price small{font-family:var(--body);font-size:14px;color:var(--slate);font-weight:400}

/* prose pages */
.prose{max-width:72ch;padding:48px 0 72px}
.prose h1{font-size:clamp(30px,4vw,40px);letter-spacing:-.02em;margin:0 0 6px}
.prose p.when{color:var(--slate);margin:0 0 28px;font-size:14px}
.prose h2{font-size:22px;margin:32px 0 8px}
.prose li{margin:4px 0}
.narrow{max-width:560px;margin:56px auto;padding:0 24px}

/* callback page */
.code-hint{font-family:var(--mono);font-size:28px;letter-spacing:.18em;color:var(--slate);background:#F1F5F3;border:1px dashed var(--line);border-radius:4px;padding:12px;text-align:center;margin:14px 0}
.stack .btn{display:block;text-align:center;margin-bottom:10px}

/* footer */
.site-foot{background:var(--forest-deep);color:#CFE0D8;padding:48px 0 40px;margin-top:64px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:28px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.site-foot h4{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8FB5A5}
.site-foot a{display:block;color:#E6F0EA;text-decoration:none;margin:6px 0;font-size:14px}
.site-foot a:hover{text-decoration:underline}
.site-foot .muted{color:#B9CFC5;font-size:14px;max-width:44ch}
.fine{font-size:12px;color:#9FBFB1;border-top:1px solid #3B6D5B;padding-top:18px;margin:0;max-width:80ch}