/* styles.css — responsive, accessible, theme-aware. Uses rem for 200% zoom friendliness. */
:root {
  --bg: #f7f7f5; --surface: #ffffff; --ink: #1c1d1f; --muted: #565a5e;
  --line: #e2e2dd; --accent: #2f7d6e; --accent-ink: #ffffff; --amber: #9a6a00;
  --radius: 14px; --maxw: 60rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#161719; --surface:#202225; --ink:#f2f2ef; --muted:#a9adb2;
    --line:#33363a; --accent:#5bb7a6; --accent-ink:#0c1211; --amber:#e0b25a; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
a { color:var(--accent); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline:3px solid var(--accent); outline-offset:2px; }

.devbanner { background:var(--amber); color:#000; text-align:center;
  padding:.55rem 1rem; font-size:.95rem; }
.devbanner strong { text-transform:uppercase; letter-spacing:.02em; }

.site-header { border-bottom:1px solid var(--line); background:var(--surface); }
.header-inner { display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; padding-block:.85rem; }
.logo { font-weight:700; letter-spacing:.02em; }
nav { display:flex; gap:1rem; flex-wrap:wrap; }
.ctl { display:flex; flex-direction:column; font-size:.75rem; color:var(--muted); gap:.2rem; }
.ctl select { font-size:1rem; padding:.35rem .5rem; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink); }

.hero { padding-block:2.5rem 1.5rem; }
h1 { font-size:clamp(1.7rem, 4vw, 2.6rem); line-height:1.15; margin:0 0 .75rem; }
.sub { font-size:clamp(1rem,2.2vw,1.2rem); color:var(--muted); max-width:44rem; }
.bullets { list-style:none; padding:0; margin:1.25rem 0; display:grid;
  grid-template-columns:1fr; gap:.5rem; max-width:40rem; }
.bullets li { padding-left:1.6rem; position:relative; }
.bullets li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
@media (min-width:40rem){ .bullets{ grid-template-columns:1fr 1fr; } }

.cta-card { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.25rem; margin-top:1.5rem; max-width:34rem; }
.price-line { margin:0 0 .5rem; font-size:1.15rem; }
.price-regular { color:var(--muted); font-size:1rem; margin-left:.35rem; }
.price-note { color:var(--muted); font-size:.9rem; }
.progress-note { color:var(--muted); font-size:.85rem; margin:0 0 1rem; }
label[for=email]{ display:block; font-weight:600; margin-bottom:.35rem; }
input[type=email]{ width:100%; padding:.7rem .8rem; font-size:1rem;
  border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); }
button { margin-top:.8rem; width:100%; padding:.8rem 1rem; font-size:1rem; font-weight:600;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:9px; cursor:pointer; }
button:hover { filter:brightness(1.05); }
.err { color:#b3261e; font-size:.9rem; display:block; margin-top:.4rem; }
@media (prefers-color-scheme: dark){ .err{ color:#f2b8b5; } }
.finenote, .tiny { font-size:.8rem; color:var(--muted); }
.finenote { margin:.6rem 0 0; }
.confirm { margin-top:.8rem; padding:.7rem .8rem; border-radius:9px;
  background:rgba(47,125,110,.12); color:var(--ink); font-weight:600; }

.render { margin:2rem 0 0; }
.render-box { display:grid; place-items:center; height:11rem; font-size:3rem;
  background:linear-gradient(160deg,var(--surface),var(--bg)); border:1px dashed var(--line);
  border-radius:var(--radius); color:var(--muted); }
figcaption { font-size:.8rem; color:var(--muted); margin-top:.5rem; text-align:center; }

.honesty { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:12px; padding:1rem 1.15rem; margin:1.5rem 0; color:var(--muted); }

.faq { padding-block:1rem 3rem; }
.faq h2 { font-size:1.4rem; }
#faq-list dt { font-weight:600; margin-top:1rem; }
#faq-list dd { margin:.25rem 0 0; color:var(--muted); }

.site-footer { border-top:1px solid var(--line); background:var(--surface);
  padding-block:1.5rem; color:var(--muted); font-size:.9rem; }
.site-footer a { color:var(--accent); }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }