/* Habit Credit's own tokens (worker/src/tokens.css): paper, ink, green actions, terracotta for spending. */
:root{color-scheme:light dark;--paper:#f6f5ef;--surface:#fffef9;--ink:#21382e;--muted:#69766e;--line:#dedfd5;--panel:#e7eddf;--green:#285d45;--treat:#994936;--highlight:#edf2da;--on-green:#fffef9}
@media(prefers-color-scheme:dark){:root{--paper:#1f2923;--surface:#263329;--ink:#f2f5e9;--muted:#a9b9ad;--line:#3b4c3f;--panel:#2d3b30;--green:#9cceac;--treat:#efb292;--highlight:#3a4b33;--on-green:#1f2923}}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--green)}
a:focus-visible,.button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.top{display:flex;justify-content:space-between;align-items:center;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-decoration:none;font-size:19px}
.brand svg{color:var(--green)}
.brand path{fill:none;stroke:var(--paper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.quiet{color:var(--muted);text-decoration:none;font-size:15px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-block:48px 72px}
.kicker{margin:0 0 12px;color:var(--green);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
h1{margin:0;font-size:clamp(38px,6vw,62px);line-height:1.05;letter-spacing:-.02em}
h1 span{color:var(--treat)}
h2{margin:0 0 16px;font-size:clamp(26px,3.4vw,34px);line-height:1.15}
h3{margin:0 0 6px;font-size:19px}
.lead{max-width:34em;margin:24px 0 32px;font-size:19px;color:var(--ink)}
.button{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--green);color:var(--on-green);font-weight:700;text-decoration:none}
.ledger{margin:0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 18px 40px -28px rgba(33,56,46,.45)}
figcaption,.label{color:var(--muted);font-size:14px}
figcaption{margin-bottom:14px}
.balance strong{display:block;font-size:48px;line-height:1.1;font-variant-numeric:tabular-nums}
.balance small,.num{font-variant-numeric:tabular-nums}
.balance small{font-size:18px;color:var(--muted)}
.goal{margin:20px 0;padding:16px;border-radius:12px;background:var(--panel)}
.row{display:flex;justify-content:space-between;gap:12px}
progress{width:100%;height:10px;margin:10px 0 4px;accent-color:var(--green)}
.muted{margin:0;color:var(--muted);font-size:14px}
.entries{list-style:none;margin:0;padding:0}
.entries li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.up{color:var(--green);font-weight:700}
.down{color:var(--treat);font-weight:700}
.steps{padding-block:56px;border-top:1px solid var(--line)}
.steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 0;padding:0;list-style:none;counter-reset:step}
.steps li{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);counter-increment:step}
.steps li::before{content:counter(step);display:inline-grid;place-items:center;width:32px;height:32px;margin-bottom:14px;border-radius:50%;background:var(--highlight);color:var(--green);font-weight:700}
.steps p,.chat p,.open p{margin:0 0 12px;max-width:38em}
.chat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:56px;border-top:1px solid var(--line)}
.talk{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:var(--panel)}
.talk p{margin:0;max-width:85%;padding:10px 14px;border-radius:14px;font-size:16px}
.you{align-self:flex-end;background:var(--green);color:var(--on-green)}
.it{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.open{padding-block:56px 72px;border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-block:24px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media(max-width:820px){.hero,.chat{grid-template-columns:minmax(0,1fr);gap:36px}.steps ol{grid-template-columns:minmax(0,1fr)}.hero{padding-block:24px 56px}}