:root{
  --bg:#fdf9ee;
  --surface:#ffffff;
  --surface-soft:#f2f7e9;
  --ink:#2b2417;
  --ink-soft:#6b6152;
  --ink-faint:#9c927d;
  --rule:#ece3d0;
  --rule-strong:#ddd0b0;
  --accent:#e1502f;
  --accent-ink:#b93b20;
  --accent-soft:#fbe7e0;
  --sky:#2f9be0;
  --sky-ink:#1c78b5;
  --sky-soft:#e3f3fc;
  --sun:#f6be3d;
  --sun-soft:#fdf0d2;
  --grass:#5ca85a;
  --shadow:0 1px 2px rgba(43,36,23,.05), 0 10px 26px rgba(43,36,23,.07);
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171310;
    --surface:#211c16;
    --surface-soft:#1e2318;
    --ink:#f5efe2;
    --ink-soft:#c9bfa8;
    --ink-faint:#8f8570;
    --rule:#332c20;
    --rule-strong:#463d2b;
    --accent:#ef6a48;
    --accent-ink:#ffb199;
    --accent-soft:#3a2018;
    --sky:#4db4f0;
    --sky-ink:#8fd4fa;
    --sky-soft:#15273a;
    --sun:#f8cc5e;
    --sun-soft:#332508;
    --grass:#7ecb78;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
p{margin:0 0 1em}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 14px;
}

/* nav */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:20px;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:19px; text-decoration:none; font-family:"Bricolage Grotesque",sans-serif; white-space:nowrap}
.brand svg{flex:none}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; color:var(--ink-soft); font-size:14.5px; font-weight:500}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:none}
@media (min-width:760px){.nav-cta{display:inline-flex}}
.burger{display:inline-flex; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink)}
@media (min-width:760px){.burger{display:none}}
.mnav{display:none; flex-direction:column; gap:2px; padding:0 24px 18px; border-bottom:1px solid var(--rule)}
.mnav.open{display:flex}
.mnav a{padding:10px 0; text-decoration:none; color:var(--ink-soft); font-size:15px; border-top:1px solid var(--rule)}
@media (min-width:760px){.mnav{display:none !important}}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--ink-faint)}
.btn-sm{padding:9px 16px; font-size:13.5px}

/* hero */
.hero{
  padding:60px 0 0;
  background:linear-gradient(180deg, var(--sky-soft), var(--bg) 82%);
  overflow:hidden;
}
.hero .wrap{display:grid; gap:40px; align-items:center; padding-bottom:56px}
@media (min-width:880px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(32px,5vw,52px); max-width:15ch}
.hero .lede{font-size:18px; color:var(--ink-soft); max-width:52ch}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.hero-art{display:flex; justify-content:center}
.wave{display:block; width:100%; height:auto; margin-top:-2px}

/* sections */
section{padding:76px 0}
.section-head{max-width:640px; margin:0 0 44px}
.section-head h2{font-size:clamp(26px,3.4vw,36px)}
.section-head .lede{color:var(--ink-soft); font-size:16.5px}
.alt{background:var(--surface-soft)}

/* concept cards */
.trio{display:grid; gap:20px}
@media (min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.card .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.ic-sun{background:var(--sun-soft); color:var(--accent-ink)}
.ic-sky{background:var(--sky-soft); color:var(--sky-ink)}
.ic-accent{background:var(--accent-soft); color:var(--accent-ink)}
.card h3{font-size:18px; margin-bottom:8px}
.card p{color:var(--ink-soft); font-size:14.5px; margin:0}

/* steps */
.steps{display:grid; gap:0; border-top:1px solid var(--rule)}
.step{display:grid; grid-template-columns:96px 1fr; gap:18px; padding:26px 0; border-bottom:1px solid var(--rule)}
.step .no{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--accent-ink); padding-top:2px}
.step h3{font-size:17px; margin-bottom:6px}
.step p{color:var(--ink-soft); font-size:14.5px; margin:0; max-width:60ch}

/* pricing */
.plans{display:grid; gap:20px}
@media (min-width:760px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow);
  position:relative;
}
.plan.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow)}
.plan .tag{
  position:absolute; top:-13px; left:24px; background:var(--sun); color:var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.plan h3{font-size:18px; margin-bottom:4px}
.plan .price{font-family:"Bricolage Grotesque",sans-serif; font-size:32px; font-weight:700; margin:10px 0 2px}
.plan .price span{font-size:14px; font-weight:500; color:var(--ink-faint)}
.plan .pitch{font-size:13.5px; color:var(--ink-soft); min-height:38px}
.plan ul{list-style:none; margin:16px 0 22px; padding:0; display:grid; gap:9px; flex:1}
.plan li{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink)}
.plan li svg{flex:none; margin-top:3px; color:var(--accent)}
.plan .btn{width:100%}

/* faq */
.faq{border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule); padding:20px 0}
summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary .chev{transition:transform .18s ease; flex:none; color:var(--ink-faint)}
details[open] summary .chev{transform:rotate(45deg)}
details p{margin:14px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:70ch}

/* cta band */
.cta-band{background:var(--accent); color:#fff; border-radius:24px; padding:52px 40px; text-align:center}
.cta-band h2{color:#fff; font-size:clamp(24px,3vw,32px)}
.cta-band p{color:rgba(255,255,255,.88); max-width:48ch; margin:0 auto 26px; font-size:16px}
.cta-band .btn-primary{background:#fff; color:var(--accent-ink)}
.cta-band .btn-primary:hover{background:var(--sun-soft)}

/* footer */
footer{padding:44px 0; border-top:1px solid var(--rule)}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
footer .fbrand{display:flex; align-items:center; gap:8px; font-weight:700; font-family:"Bricolage Grotesque",sans-serif; text-decoration:none; color:var(--ink)}
footer .fine{font-size:13px; color:var(--ink-faint)}
footer .flinks{display:flex; gap:20px; font-size:13.5px}
footer .flinks a{text-decoration:none; color:var(--ink-soft)}
footer .flinks a:hover{color:var(--ink)}