:root{
  --bg:#faf7f2; --raised:#fffdfa; --sunk:#f3eee5;
  --ink:#1c1917; --ink-2:#4a423c; --muted:#857a70;
  --line:#e6dfd4; --line-2:#d6cdbe;
  --accent:#4c5a3c; --accent-soft:#e8ebe2; --on-accent:#fdfcf8;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --r:9px; --maxw:66rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#17150f; --raised:#1e1b15; --sunk:#14120d;
    --ink:#f2ece2; --ink-2:#cdc4b6; --muted:#9a9082;
    --line:#2b2720; --line-2:#3a352b;
    --accent:#a7bd8e; --accent-soft:#1f241a; --on-accent:#141a10;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:4rem; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}
a{color:inherit; text-decoration:none}
p{margin:0 0 .8rem; color:var(--ink-2)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:99; background:var(--ink); color:var(--bg); padding:.5rem .8rem; border-radius:6px}

header{position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; height:3.6rem; gap:2rem}
.brand{font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em; font-weight:600}
.brand i{color:var(--accent); font-style:normal}
nav{margin-left:auto; display:flex; align-items:center; gap:1.6rem}
nav a{font-size:.95rem; color:var(--muted); border-bottom:1.5px solid transparent; padding:.2rem 0}
nav a:hover{color:var(--ink)}
nav a[aria-current="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; background:var(--accent);
  color:var(--on-accent); font-weight:560; font-size:.95rem; padding:.62rem 1.15rem; border-radius:7px;
  border:1px solid transparent; white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.quiet{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.quiet:hover{background:var(--sunk); filter:none}
nav .btn{border-bottom:1px solid transparent; padding:.45rem .95rem}
@media (max-width:720px){nav a:not(.btn){display:none} .bar{gap:1rem}}

section{padding:3.25rem 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.label{font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .7rem}
h1{font-family:var(--serif); font-size:clamp(2.1rem,4.6vw,3rem); line-height:1.05;
  letter-spacing:-.02em; font-weight:600; margin:0 0 .8rem}
h2{font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.65rem); line-height:1.2;
  letter-spacing:-.012em; font-weight:600; margin:0 0 .5rem}
h3{font-size:1.02rem; font-weight:620; margin:0 0 .2rem; color:var(--ink)}
.lede{font-size:1.15rem; line-height:1.5; color:var(--ink-2); max-width:44ch}
.intro{color:var(--muted); max-width:50ch; margin-bottom:2rem; font-size:1.02rem; line-height:1.55}

/* hero */
.hero{padding:3.5rem 0 3rem}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr; gap:2rem} .hero{padding:2.5rem 0}}
.cta{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem}
.fine{margin:.9rem 0 0; font-size:.85rem; color:var(--muted)}

.mail{background:var(--raised); border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden;
  background:var(--raised)}
.mail-head{padding:.6rem 1rem; border-bottom:1px solid var(--line); font-size:.76rem;
  color:var(--muted); display:flex; justify-content:space-between; gap:1rem}
.mail-body{padding:1.05rem 1rem}
.subject{font-family:var(--serif); font-size:1.02rem; font-weight:600; color:var(--ink); margin:0 0 .85rem}
.rows{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.3rem; font-size:.89rem; margin:0}
.rows dt{color:var(--muted)}
.rows dd{margin:0; color:var(--ink); font-variant-numeric:tabular-nums}
.gone{color:var(--muted); text-decoration:line-through}

/* compact columns */
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.cols-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
@media (max-width:820px){.cols{grid-template-columns:1fr; gap:1.4rem} .cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cols-4{grid-template-columns:1fr}}
.item p{margin:0; color:var(--muted); font-size:.97rem; line-height:1.55}
.n{font-family:var(--serif); font-size:1.1rem; color:var(--accent); margin-bottom:.15rem}
.tick{border-top:2px solid var(--accent-soft); padding-top:.75rem}

/* pricing */
.price{display:grid; grid-template-columns:19rem 1fr; gap:3rem; align-items:start}
@media (max-width:880px){.price{grid-template-columns:1fr; gap:2rem}}
.plan{border:1px solid var(--line-2); border-radius:var(--r); padding:1.4rem; background:var(--raised)}
.amount{display:flex; align-items:baseline; gap:.4rem; margin:0 0 .15rem}
.amount b{font-family:var(--serif); font-size:2.5rem; font-weight:600; letter-spacing:-.025em; line-height:1}
.amount span{color:var(--muted); font-size:.9rem}
.plan ul{list-style:none; margin:1rem 0 1.2rem; padding:0; font-size:.89rem}
.plan li{padding:.3rem 0 .3rem 1.1rem; position:relative; color:var(--ink-2)}
.plan li::before{content:""; position:absolute; left:0; top:.82rem; width:.35rem; height:.35rem;
  border-radius:50%; background:var(--accent)}
.terms{display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2rem; margin:0}
@media (max-width:640px){.terms{grid-template-columns:1fr}}
.terms dt{font-weight:620; font-size:.89rem; margin-top:.85rem; color:var(--ink)}
.terms dd{margin:.1rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.5}

/* faq */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer; padding:.85rem 2rem .85rem 0; font-weight:580; list-style:none;
  position:relative; color:var(--ink); font-size:.94rem}
summary::-webkit-details-marker{display:none}
summary::after{content:""; position:absolute; right:.3rem; top:1.1rem; width:.5rem; height:.5rem;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg)}
details[open] summary::after{transform:rotate(-135deg); top:1.3rem}
details p{margin:0 0 1rem; padding-right:2rem; color:var(--muted); font-size:.89rem; max-width:64ch}

footer{border-top:1px solid var(--line); padding:2rem 0; background:var(--sunk)}
.foot{display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between;
  font-size:.83rem; color:var(--muted)}
.foot b{display:block; color:var(--ink); font-weight:620; margin-bottom:.2rem; font-size:.75rem;
  letter-spacing:.06em; text-transform:uppercase}
.foot a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}

/* ---- multi-page additions ---- */
/* Pages are short by design: one job each, no scroll-spy, no JS at all. */
.page{padding:3.25rem 0 4rem}
.page h1{font-size:clamp(1.8rem,3.6vw,2.3rem); margin-bottom:.6rem}
.page .intro{margin-bottom:2rem}
.back{display:inline-block; margin-top:2.5rem; font-size:.9rem; color:var(--muted)}
.back:hover{color:var(--ink)}
.next{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:2.5rem;
  padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted)}
.next .btn{margin-left:auto}
@media (max-width:520px){.next .btn{margin-left:0; width:100%}}

/* ---- tiers ---- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.5rem}
@media (max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{border:1px solid var(--line-2); border-radius:var(--r); padding:1.4rem; background:var(--raised);
  display:flex; flex-direction:column}
.tier.pick{border-color:var(--accent); border-width:2px; padding:calc(1.4rem - 1px)}
.tier .flag{font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.5rem; height:1rem}
.tier h3{font-family:var(--serif); font-size:1.15rem; margin:0 0 .3rem}
.tier .amt{font-family:var(--serif); font-size:2.1rem; font-weight:600; letter-spacing:-.02em; line-height:1}
.tier .per{color:var(--muted); font-size:.85rem; margin:.25rem 0 0}
.tier ul{list-style:none; margin:1.1rem 0 1.3rem; padding:0; font-size:.94rem; flex:1}
.tier li{padding:.28rem 0 .28rem 1.1rem; position:relative; color:var(--ink-2)}
.tier li::before{content:""; position:absolute; left:0; top:.78rem; width:.34rem; height:.34rem;
  border-radius:50%; background:var(--accent)}

/* ---- form ---- */
form{margin-top:1.5rem}
.field{margin-bottom:1rem}
label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.35rem; color:var(--ink)}
input,textarea,select{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink); background:var(--raised);
  border:1px solid var(--line-2); border-radius:7px; padding:.6rem .75rem;
}
input:focus,textarea,select:focus{outline:none}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--accent)}
textarea{min-height:5rem; resize:vertical}
.hint{font-size:.83rem; color:var(--muted); margin:.3rem 0 0}
.hp{position:absolute; left:-9999px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}