/* The Cook Club website — same colors as the app (light and night) */
:root{
  --bg:#FAF7F0; --card:#ffffff; --text:#1F3D2B; --muted:rgba(31,61,43,0.62);
  --line:rgba(31,61,43,0.14); --accent:#1F3D2B; --on-accent:#FAF7F0; --soft:#EFE9DA;
  --danger:#9C3B2E; --ok:#2F6B45; --logo-filter:none;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121212; --card:#1E1E1E; --text:#E3E3E3; --muted:rgba(255,255,255,0.60);
    --line:rgba(255,255,255,0.10); --accent:#2F6B45; --on-accent:#F2F2F2; --soft:#262626;
    --danger:#E57B6C; --ok:#7BC795; --logo-filter:brightness(0) invert(0.9);
  }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; }
a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.wrap{ max-width:720px; margin:0 auto; padding:0 20px; }
header.site{ border-bottom:1px solid var(--line); }
header.site .wrap{ display:flex; align-items:center; gap:10px; height:64px; }
header.site a.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:Georgia,serif; font-weight:700; font-size:20px; }
header.site img{ width:34px; height:auto; filter:var(--logo-filter); }
main{ padding:36px 0 56px; }
h1{ font-family:Georgia,serif; font-size:32px; line-height:1.2; margin:0 0 6px; }
h2{ font-family:Georgia,serif; font-size:22px; margin:34px 0 8px; }
h4{ font-size:16px; margin:26px 0 4px; }
p{ margin:0 0 12px; }
.updated{ color:var(--muted); font-size:14px; margin-bottom:24px; }
.small{ color:var(--muted); font-size:14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin:16px 0; }
.btn{ display:inline-block; background:var(--accent); color:var(--on-accent); text-decoration:none; border:0;
  border-radius:12px; padding:13px 22px; font-weight:700; font-size:16px; cursor:pointer; font-family:inherit; }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.block{ display:block; width:100%; text-align:center; }
.hero{ text-align:center; padding:28px 0 8px; }
.hero img{ width:120px; filter:var(--logo-filter); }
.hero .tag{ font-family:Georgia,serif; font-style:italic; color:var(--muted); font-size:18px; margin-bottom:22px; }
.badge{ display:inline-block; background:var(--soft); border-radius:999px; padding:8px 16px; font-weight:600; font-size:14px; }
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:30px; }
.features .card{ margin:0; }
.features b{ display:block; font-family:Georgia,serif; font-size:17px; margin-bottom:4px; }
.features span{ color:var(--muted); font-size:15px; }
details{ border-bottom:1px solid var(--line); padding:14px 0; }
details summary{ cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; }
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:"+"; color:var(--muted); font-weight:400; font-size:20px; line-height:1; }
details[open] summary::after{ content:"–"; }
details p{ margin:10px 0 0; color:var(--text); }
label{ display:block; font-weight:600; font-size:14px; margin:14px 0 6px; }
input{ width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--card);
  color:var(--text); font-size:16px; font-family:inherit; }
input:focus{ outline:none; border-color:var(--accent); }
.msg{ border-radius:12px; padding:12px 14px; margin:14px 0; font-size:15px; display:none; }
.msg.show{ display:block; }
.msg.err{ background:rgba(156,59,46,0.10); color:var(--danger); }
.msg.ok{ background:rgba(47,107,69,0.12); color:var(--ok); }
footer.site{ border-top:1px solid var(--line); padding:22px 0 40px; font-size:14px; color:var(--muted); }
footer.site nav{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:10px; }
footer.site a{ color:var(--muted); }