/* Brand tokens — keep in step with app/src/config/brand.ts. */
:root { --cream:#FAF5EA; --ink:#22301F; --green:#33582B; --deep:#264420; --soft:#CBE3B8; --mut:#6E6A5C; }
* { box-sizing:border-box; margin:0; }
body { font-family:'Montserrat',-apple-system,sans-serif; background:var(--cream); color:var(--ink); line-height:1.6; }
a { color:var(--green); }
.wrap { max-width:960px; margin:0 auto; padding:0 24px; }
header.site { padding:22px 0; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; }
.logo { display:block; line-height:0; }
.logo img { height:40px; width:auto; display:block; }
@media (max-width:720px){ .logo img { height:32px; } }
nav a { margin-left:22px; font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink); }
.hero { padding:56px 0 40px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
@media (max-width:720px){ .hero { grid-template-columns:1fr; } .hero img.mascot { max-width:220px; margin:0 auto; } }
.hero h1 { font-size:clamp(30px,5vw,44px); line-height:1.12; letter-spacing:-0.02em; font-weight:800; text-wrap:balance; }
.hero p.sub { margin-top:16px; font-size:18px; color:var(--mut); max-width:46ch; }
.hero img.mascot { width:100%; max-width:320px; display:block; margin-left:auto; }
.badges { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.badge { display:block; line-height:0; }
.badge img { display:block; height:48px; width:auto; }
a.badge:hover { opacity:.85; }
@media (max-width:420px){ .badges { gap:10px; } .badge img { height:42px; } }
.note { margin-top:10px; font-size:13px; color:var(--mut); }
.strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:10px 0 30px; }
.strip img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; box-shadow:0 8px 22px rgba(58,42,24,.12); }
@media (max-width:720px){ .strip { grid-template-columns:repeat(3,1fr); gap:8px; } }
.feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:26px 0 56px; }
.feat { background:#fff; border-radius:18px; padding:22px; box-shadow:0 6px 18px rgba(58,42,24,.07); }
.feat h3 { font-size:16.5px; font-weight:700; margin-bottom:6px; }
.feat p { font-size:14.5px; color:var(--mut); }
footer.site { background:var(--deep); color:var(--soft); padding:34px 0; margin-top:20px; font-size:13.5px; }
footer.site a { color:var(--soft); }
footer.site .wrap { display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; }
main.doc { background:#fff; border-radius:20px; padding:40px; margin:30px auto 60px; max-width:820px; box-shadow:0 6px 18px rgba(58,42,24,.07); }
main.doc h1 { font-size:28px; letter-spacing:-0.02em; margin-bottom:6px; }
main.doc .updated { color:var(--mut); font-size:13.5px; margin-bottom:26px; }
main.doc h2 { font-size:19px; margin:28px 0 8px; }
main.doc p, main.doc li { font-size:15px; color:#3A3A30; }
main.doc ul { padding-left:22px; margin:8px 0; }
main.doc li { margin-bottom:6px; }