/* Fast Dev 24 — marketing site.
   No frameworks, no webfonts, no external requests. Drag the folder to
   Cloudflare Pages and it works. */

:root{
  --ink:#111318;
  --ink-2:#3d434e;
  --ink-3:#6b7280;
  --paper:#faf9f7;
  --card:#ffffff;
  --line:#e4e2dd;
  --accent:#c9401c;          /* signal — used only for actions and the clock */
  --accent-ink:#ffffff;
  --safe:#0f6b46;            /* the "you risk nothing" promise */
  --safe-bg:#e8f3ee;
  --shadow:0 1px 2px rgba(17,19,24,.05), 0 10px 30px -18px rgba(17,19,24,.35);
  --display:"Bahnschrift","Oswald","Arial Narrow",system-ui,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,"Noto Sans",Arial,sans-serif;
  --wrap:1120px;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#eceef2; --ink-2:#b4bac6; --ink-3:#858c9b;
    --paper:#0f1116; --card:#171a21; --line:#282d38;
    --accent:#ff6b3d; --accent-ink:#1a0d07;
    --safe:#5fc79a; --safe-bg:#122a20;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.wrap.narrow{max-width:760px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:4px}

a{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:3px}

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.005em; text-wrap:balance; margin:0}
h1{font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.03}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem); line-height:1.12; margin-bottom:14px}
h2.sm{font-size:clamp(1.3rem,2.4vw,1.6rem)}
h3{font-size:1.12rem; line-height:1.3; margin-bottom:6px}
p{margin:0 0 14px}
.lede{font-size:1.1rem; color:var(--ink-2); max-width:62ch}
.soft{color:var(--ink-3); font-size:.92rem}

/* ── top bar ─────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:10}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px}
.logo{font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:.04em}
.logo b{color:var(--accent)}

/* ── buttons ─────────────────────────────────────────── */
.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-family:var(--display); font-weight:700; letter-spacing:.01em;
  text-decoration:none; padding:14px 26px; border-radius:6px; font-size:1.05rem;
  box-shadow:var(--shadow); transition:transform .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:18px 34px; font-size:1.2rem}
.btn-sm{padding:9px 16px; font-size:.92rem; box-shadow:none}
.btn-ghost{background:transparent; color:var(--ink); border:2px solid var(--line); box-shadow:none}
.btn-ghost:hover{border-color:var(--ink-3); filter:none}

/* ── hero ────────────────────────────────────────────── */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; color:var(--ink-3); margin-bottom:14px}
.hl{color:var(--accent)}
.hero .lede{margin:22px 0 30px; font-size:1.18rem}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:40px}
.cta-note{color:var(--ink-3); font-size:.95rem}

.facts{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; margin:0; padding:0}
.facts li{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px}
.facts b{display:block; font-family:var(--display); font-size:1.7rem; line-height:1.1; color:var(--accent)}
.facts li:first-child b{color:var(--safe)}
.facts span{display:block; color:var(--ink-3); font-size:.9rem; margin-top:2px}

/* ── bands ───────────────────────────────────────────── */
.band{padding:64px 0; border-bottom:1px solid var(--line)}
.band.alt{background:var(--card)}
.band.quiet{padding:44px 0}
.band.quiet p{color:var(--ink-2); max-width:62ch}

/* ── steps ───────────────────────────────────────────── */
.steps{list-style:none; counter-reset:s; padding:0; margin:28px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px}
.steps li{counter-increment:s; position:relative; padding-top:44px}
.steps li::before{
  content:counter(s); position:absolute; top:0; left:0;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
}
.steps p{color:var(--ink-2); font-size:.98rem; margin:0}

/* ── reasons ─────────────────────────────────────────── */
.reasons{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin:28px 0}
.reasons p{color:var(--ink-2); font-size:.98rem; margin:0}
.callout{
  background:var(--safe-bg); border-left:4px solid var(--safe); border-radius:6px;
  padding:18px 22px; margin-top:10px; color:var(--ink); font-size:1.05rem;
}

/* ── pricing ─────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin:30px 0 22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:24px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card.featured{border-color:var(--accent); border-width:2px}
.tier{font-family:var(--display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.76rem; color:var(--ink-3); margin:0 0 6px}
.price{font-family:var(--display); font-size:2rem; font-weight:700; margin:0 0 14px; line-height:1}
.card ul{margin:0 0 14px; padding-left:20px; color:var(--ink-2); font-size:.96rem}
.card li{margin-bottom:6px}
.fit{margin:auto 0 0; font-size:.88rem; color:var(--ink-3)}
.note{color:var(--ink-2); font-size:.96rem; max-width:70ch;
  border-left:3px solid var(--line); padding-left:16px}

/* ── timeline ────────────────────────────────────────── */
.timeline{list-style:none; padding:0; margin:28px 0 0}
.timeline li{display:grid; grid-template-columns:88px 1fr; gap:18px;
  padding:16px 0; border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline .t{font-family:var(--display); font-weight:700; color:var(--accent); font-size:.98rem; padding-top:2px}
.timeline p{margin:0; color:var(--ink-2); font-size:.96rem}

/* ── faq ─────────────────────────────────────────────── */
details{border-bottom:1px solid var(--line); padding:4px 0}
details summary{
  cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:1.08rem;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--accent); line-height:1;
}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2); margin:0 0 18px; padding-right:34px; font-size:1rem}

/* ── final ───────────────────────────────────────────── */
.final{padding:72px 0; text-align:center; border-bottom:1px solid var(--line)}
.final .lede{margin:0 auto 28px}
.final .soft{margin-top:16px}

footer{padding:34px 0 48px}
footer p{margin:0 0 8px}

@media (max-width:560px){
  body{font-size:16px}
  .hero{padding:44px 0 40px}
  .band{padding:48px 0}
  .cta-row{flex-direction:column; align-items:stretch}
  .btn-lg{width:100%; text-align:center}
  .cta-note{text-align:center}
  .timeline li{grid-template-columns:70px 1fr; gap:12px}
}