:root{
  /* --sage-d is darker than the app's sageDark (#7E9C74) on purpose: white
     16px bold text on the app's tint is only ~2.7:1, well under WCAG AA. */
  --cream:#F7F1E6; --cream-d:#EDE3D2; --sage:#A8C0A0; --sage-d:#5B7852;
  --blue-l:#E2ECF1; --blue-d:#5E7B8D; --ink:#4A4238; --muted:#6F675C;
  --gold:#E3B96B; --danger:#B4544A; --surface:#fff; --radius:24px;
  /* Timer track needs contrast against --surface, not against the page. */
  --ring-track:#DCE8D6;
  /* Primary button flips its own text colour: --sage-d is dark in light
     mode and light in dark mode, so a fixed white would fail contrast. */
  --on-sage:#fff;
}

/* Night-study audience — a cream screen at 1am is the complaint we want to avoid. */
@media (prefers-color-scheme: dark){
  :root{
    --cream:#211E1A; --cream-d:#2C2823; --blue-l:#232A2E; --surface:#2A2621;
    --ink:#F0E9DD; --muted:#B5AC9E; --sage-d:#A8C0A0; --blue-d:#9FB8C8;
    --ring-track:#3B382F;
    --on-sage:#1C1A16;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; color:var(--ink); background:var(--cream);
  font:16px/1.6 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
a{color:var(--blue-d)}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--sage-d); outline-offset:3px; border-radius:6px;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:10;background:var(--surface);
  padding:10px 16px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.15)}

header{background:linear-gradient(165deg,var(--blue-l),var(--cream) 70%);padding:28px 0 72px}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.brand img{width:34px;height:34px;border-radius:9px}
.nav-links{display:flex;gap:20px;font-size:14px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:56px}
h1{font-size:clamp(34px,5vw,54px);line-height:1.08;margin:0 0 18px;letter-spacing:-.5px}
.sub{font-size:19px;color:var(--muted);margin:0 0 28px;max-width:34ch}
.pill{display:inline-block;background:var(--surface);color:var(--muted);
  font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;margin-bottom:20px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:16px;border:0;cursor:pointer;font-family:inherit;
  transition:transform .12s ease,opacity .12s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--sage-d);color:var(--on-sage)}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{background:var(--surface);color:var(--ink)}
.note{font-size:13px;color:var(--muted);margin-top:14px}

.art{background:var(--surface);border-radius:var(--radius);padding:28px;
  box-shadow:0 18px 44px rgba(74,66,56,.10);text-align:center}
.art svg{width:100%;height:auto;max-width:340px}
.ring{stroke:var(--ring-track);stroke-width:5;fill:none}
.ring-fg{stroke:var(--sage-d);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:503;stroke-dashoffset:150;transform:rotate(-90deg);transform-origin:110px 100px}
.timer-txt{font:700 38px ui-rounded,system-ui;fill:var(--ink);letter-spacing:1px}
.timer-sub{font:500 13px ui-rounded,system-ui;fill:var(--muted)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.bird-anim{animation:bob 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .bird-anim{animation:none} }

section{padding:76px 0}
h2{font-size:clamp(26px,3.4vw,34px);margin:0 0 12px;letter-spacing:-.3px}
.lede{color:var(--muted);margin:0 0 40px;max-width:58ch}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
.card{background:var(--surface);border-radius:var(--radius);padding:26px;
  box-shadow:0 8px 22px rgba(74,66,56,.07)}
.card h3{margin:12px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:15px}
.emoji{font-size:26px}

.flock{background:var(--surface);padding:76px 0}
.birds{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:32px;
  list-style:none;padding:0}
.b-cell{background:var(--cream);border-radius:18px;padding:14px 8px;text-align:center}
.b-cell svg{width:100%;height:auto}
.b-cell span{display:block;font-size:12px;color:var(--muted);margin-top:6px}

.price{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;
  list-style:none;padding:0}
.tier{background:var(--surface);border-radius:var(--radius);padding:24px;text-align:center;
  border:2px solid transparent}
.tier.best{border-color:var(--sage-d);position:relative}
.badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#3b3327;font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:999px;white-space:nowrap}
.tier .amt{font-size:26px;font-weight:700;margin:8px 0 2px}
.tier .per{font-size:13px;color:var(--muted)}

.signup{background:linear-gradient(165deg,var(--blue-l),var(--cream));
  border-radius:var(--radius);padding:44px;text-align:center}
form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
input[type=email]{padding:15px 18px;border-radius:999px;border:1px solid var(--cream-d);
  min-width:270px;font-size:16px;font-family:inherit;background:var(--surface);color:var(--ink)}
input[type=email]:disabled{opacity:.6}
.form-note{font-size:12px;color:var(--muted);margin-top:14px}
.form-err{margin-top:14px;color:var(--danger);font-size:14px;font-weight:600}

footer{padding:44px 0 60px;color:var(--muted);font-size:14px;text-align:center}
footer a{color:var(--muted);margin:0 10px}

/* --- thanks page --- */
.center-page{min-height:100vh;display:grid;place-items:center;text-align:center;padding:40px 24px}
.center-page svg{width:170px;height:auto;margin-bottom:8px}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:32px}
  .grid-3,.price{grid-template-columns:1fr}
  .birds{grid-template-columns:repeat(3,1fr)}
  .nav-links{display:none}
  .signup{padding:28px 20px}
}