/* The app's own palette (lib/theme.ts), so the site and the product read as
   one thing rather than two: navy #0D2B63, orange #F2701E, cream #FFF9F2.
   Anton is the app's display face — the wordmark on the home screen is set in
   it, so the site inherits the same voice rather than inventing one.

   Deliberately one theme, with no dark variant. The app is cream at every
   hour of the day, so a site that turns dark for half its visitors advertises
   a product they will not recognise when they open it. Food also simply reads
   better on warm paper than on near-black, which is why cookbooks are printed
   the way they are. Every colour is stated rather than inherited, so the page
   holds whatever the browser would otherwise impose. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root {
  color-scheme: light;   /* stop the browser tinting form controls dark */
  --ground:#FFFBF5; --surface:#fff; --sunk:#F8F3EA;
  --ink:#16213B; --muted:#6B6459; --navy:#0D2B63;
  /* Three oranges, because one cannot do three jobs.
     --brand is the app's own #F2701E, kept for large display type and for
     decoration where contrast is not the question.
     --accent is the same hue darkened until small text on cream clears 4.5:1
     — nav links and eyebrows are 11–14px, and the brand orange manages 2.86.
     --accent-fill is darker still, so white on the button clears it too: white
     on #F2701E is 2.95, which is a button nobody with tired eyes can read. */
  --brand:#F2701E; --accent:#B84B08; --accent-fill:#B84B08;
  --green:#3C8D40; --line:#EDE4D6;
  --display:'Anton', Impact, 'Haettenschweiler', sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/1.65 var(--body); -webkit-font-smoothing:antialiased; }
.wrap { max-width:1000px; margin:0 auto; padding:0 22px; }
.narrow { max-width:720px; }

/* ── chrome ─────────────────────────────────────────────── */
header.site { display:flex; align-items:center; justify-content:space-between; padding:26px 0; flex-wrap:wrap; gap:14px; }
.mark { font-family:var(--display); font-size:24px; letter-spacing:.06em; color:var(--navy); text-decoration:none; }
.mark span { color:var(--brand); }
nav a { color:var(--muted); text-decoration:none; font-size:14px; margin-left:20px; }
nav a:hover, nav a:focus-visible { color:var(--accent); }

/* ── hero ───────────────────────────────────────────────── */
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; padding:40px 0 76px; }
@media (max-width:820px){ .hero{ grid-template-columns:1fr; gap:40px; padding-bottom:52px; } }
h1 { font-family:var(--display); font-size:clamp(44px,7vw,78px); line-height:.98; letter-spacing:.005em;
     margin:0 0 20px; color:var(--navy); text-transform:uppercase; text-wrap:balance; }
h1 em { font-style:normal; color:var(--brand); }  /* 78px display type — large enough that the brand orange carries it */
.lede { font-size:19px; line-height:1.55; color:var(--muted); margin:0 0 30px; max-width:46ch; }
.cta { display:inline-flex; align-items:center; gap:9px; background:var(--accent-fill); color:#fff;
       text-decoration:none; font-weight:700; font-size:16px; padding:16px 26px; border-radius:14px; }
.cta:hover { filter:brightness(1.06); }
.cta-note { font-size:13.5px; color:var(--muted); margin-top:14px; }

/* ── the phone, built from the app's own parts ──────────── */
.phone { background:var(--surface); border:1px solid var(--line); border-radius:30px; padding:16px;
         box-shadow:0 30px 60px -30px rgba(22,33,59,.35); }
.shot { border-radius:20px; overflow:hidden; background:var(--sunk); }
.shot-photo { height:190px; background:
   radial-gradient(120% 90% at 25% 20%, #E8853E 0%, #C1481D 55%, #7E2B12 100%);
   position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:13px; }
.badges { display:flex; justify-content:space-between; gap:8px; }
.badge { font-size:11px; font-weight:700; padding:5px 9px; border-radius:13px; white-space:nowrap; }
.badge.match { background:var(--green); color:#fff; }
.badge.time { background:rgba(255,255,255,.94); color:#0D2B63; }
.shot-title { font-family:var(--display); font-size:23px; color:#fff; letter-spacing:.01em; }
.shot-sub { font-size:12px; color:rgba(255,255,255,.9); margin-top:5px; }
.shot-need { font-size:11.5px; color:rgba(255,255,255,.92); margin-top:5px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.chip { font-size:10.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.22);
        border:1px solid rgba(255,255,255,.34); padding:4px 9px; border-radius:11px; }
.shot-body { padding:14px 4px 4px; }
.strip { background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:12px; }
.strip-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.strip-head b { font-size:13px; color:var(--navy); }
.est { font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
       color:#8A4B1E; background:#FFF3E9; padding:3px 7px; border-radius:8px; }
.macros { display:flex; }
.macro { flex:1; text-align:center; }
.macro b { display:block; font-size:16px; color:var(--navy); }
.macro span { font-size:10.5px; color:var(--muted); }

/* ── sections ───────────────────────────────────────────── */
section { padding:66px 0; border-top:1px solid var(--line); }
.eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
h2 { font-family:var(--display); font-size:clamp(28px,4vw,40px); line-height:1.06; letter-spacing:.01em;
     color:var(--navy); margin:0 0 16px; text-transform:uppercase; text-wrap:balance; }
h3 { font-size:18px; margin:0 0 7px; color:var(--navy); }
.sub { font-size:17px; color:var(--muted); max-width:56ch; margin:0 0 36px; }

.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.feature { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; }
.feature .ic { font-size:26px; display:block; margin-bottom:12px; }
.feature p { margin:0; font-size:14.7px; color:var(--muted); line-height:1.6; }

.fridge { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.f { display:inline-flex; align-items:center; gap:6px; background:var(--sunk); border:1px solid var(--line);
     border-radius:20px; padding:6px 12px; font-size:13px; }

/* ── price ──────────────────────────────────────────────── */
.plans { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.plan { flex:1 1 210px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px;
        padding:22px; position:relative; }
.plan.best { border-color:var(--brand); }
.plan .save { position:absolute; top:-11px; left:22px; background:var(--green); color:#fff;
              font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:11px; }
.plan .term { font-size:13px; font-weight:700; color:var(--muted); }
.plan .amt { font-family:var(--display); font-size:38px; color:var(--navy); line-height:1.1; margin:6px 0 2px; }
.plan .per { font-size:13px; color:var(--muted); }
.founding { display:inline-block; background:#FFF3E9; color:#8A4B1E; border:1px solid #F5D9C2;
            border-radius:12px; padding:9px 15px; font-size:13.5px; font-weight:600; margin-bottom:22px; }
.fine { font-size:13px; color:var(--muted); margin-top:18px; }

footer.site { padding:34px 0 60px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
footer.site a { color:var(--muted); margin-right:18px; }
a { color:var(--accent); }
a:focus-visible,.mark:focus-visible,.cta:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }