/* AnnaChef marketing site — "Garden" design system.
   Tokens lifted 1:1 from the app's Constants.swift (see design handoff). */

:root {
  --primary: #5E8A68;
  --primary-deep: #3E6A4A;
  --primary-light: #D8E4CE;
  --accent: #C27D48;
  --bg: #F6F3EC;
  --bg-alt: #EFEADC;
  --surface: #FFFDF7;
  --text: #2A2E25;
  --text-secondary: #5E6355;
  --text-tertiary: #94988A;
  --border: #E4DECD;
  --border-soft: #EDE8D8;
  --serif: 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--text);
}

a { color: var(--primary-deep); text-decoration: none; }
a:hover { color: var(--primary); }

.shell { max-width: 1180px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }

/* ── Nav ── */
.nav { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.nav .wordmark {
  font: italic 500 26px var(--serif); letter-spacing: -0.5px; color: var(--text);
}
.nav .wordmark:hover { color: var(--primary-deep); }
.nav-links { display: flex; gap: 28px; align-items: center; font: 500 13px var(--sans); }
.nav-links a { color: var(--text-secondary); }
.nav-links a:hover { color: var(--text); }
.nav-links a.current { color: var(--text); font-weight: 600; }
.nav-links .cta {
  padding: 9px 16px; border-radius: 99px;
  background: var(--text); color: var(--bg);
  font: 600 12px var(--sans);
}
.nav-links .cta:hover { color: var(--surface); }

/* ── Type helpers ── */
.eyebrow { font: 600 11px var(--mono); letter-spacing: 2px; color: var(--text-tertiary); }
h1.display {
  font: italic 500 72px/1.0 var(--serif);
  letter-spacing: -2px; color: var(--text); margin: 18px 0 0;
}
h1.display .tint, .tint { color: var(--primary); }

/* ── Section header (serif + hairline + mono tag) ── */
.section-head { display: flex; align-items: baseline; gap: 14px; }
.section-head .title { font: italic 500 30px var(--serif); letter-spacing: -0.5px; color: var(--text); }
.section-head .rule { flex: 1; height: 1px; background: var(--border); align-self: center; }
.section-head .tag { font: 400 11px var(--mono); letter-spacing: 1.2px; color: var(--text-tertiary); }

/* ── Cards ── */
.card {
  padding: 26px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px;
}
.card h3 { font: italic 500 19px var(--serif); color: var(--text); margin: 0; }
.card p { font: 13.5px/1.5 var(--sans); color: var(--text-secondary); margin: 8px 0 0; }
.card .kicker { font: 600 10px var(--mono); letter-spacing: 1.6px; color: var(--primary-deep); margin-bottom: 10px; }

/* ── App Store badge ── */
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 16px;
  background: var(--text); color: #fff;
}
.store-badge:hover { color: #fff; }
.store-badge .small { display: block; font: 400 10px var(--sans); opacity: .8; }
.store-badge .big { display: block; font: 600 17px var(--sans); margin-top: 1px; }

.pill-link {
  display: inline-block; padding: 12px 22px;
  border: 1px solid var(--primary); border-radius: 99px;
  color: var(--primary-deep); font: 600 13px var(--sans);
}

/* ── Phone mockups (real app screenshots) ── */
.phone {
  width: 300px; background: #1a1a1a; border-radius: 46px; padding: 10px;
  box-shadow: 0 30px 60px rgba(42, 46, 37, .28);
}
.phone .screen { border-radius: 37px; overflow: hidden; background: var(--bg); }
.phone .screen img { display: block; width: 100%; height: auto; }
.phone.small { width: 230px; border-radius: 36px; padding: 8px; box-shadow: none; }
.phone.small .screen { border-radius: 29px; }

/* Camera-screen mock: real fridge photo behind the app's scan chrome.
   (The simulator can't render a live camera feed, so the viewfinder is
   composited here; the chrome matches CameraView.swift.) */
.scan-screen {
  /* Same aspect as the real 600x1304 screenshots, so this composite and
     the screenshot phones stay the same size at every breakpoint. */
  position: relative; aspect-ratio: 600 / 1304;
  background: linear-gradient(rgba(20, 22, 18, .35), rgba(20, 22, 18, .45)),
              url("img/fridge.jpg") center/cover;
}
.scan-screen .notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 18px; background: #000; border-radius: 99px;
}
/* Chrome is positioned in % of the screen so it tracks the phone size. */
.scan-frame { position: absolute; top: 17%; left: 50%; transform: translateX(-50%); width: 70%; height: 43%; }
.scan-frame i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--primary); }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2.5px; border-left-width: 2.5px; border-top-left-radius: 6px; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2.5px; border-right-width: 2.5px; border-top-right-radius: 6px; }
.scan-frame i:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px; border-bottom-right-radius: 6px; }
.scan-frame i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2.5px; border-left-width: 2.5px; border-bottom-left-radius: 6px; }
.scan-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12.5%;
  padding: 4px 9px; border-radius: 99px; background: rgba(0, 0, 0, .35);
  color: rgba(255, 255, 255, .9); font: 500 6px var(--mono); white-space: nowrap;
}
.scan-shutter {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 2.6%;
  width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--primary);
  border: 2px solid rgba(255, 255, 255, .55);
  display: flex; align-items: center; justify-content: center;
}

/* ── Ambient glows ── */
.glow { position: absolute; pointer-events: none; filter: blur(30px); }
.glow.terracotta { top: -140px; right: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(194, 125, 72, .18), transparent 60%); }
.glow.sage { bottom: -180px; left: -140px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(94, 138, 104, .18), transparent 60%); }

/* ── Prose pages (About / Help / Contact / Legal) ── */
.prose { max-width: 760px; margin: 0 auto; padding: 48px 48px 80px; }
.prose.narrow { max-width: 720px; }
.prose h1 { font: italic 500 52px/1.05 var(--serif); letter-spacing: -1.4px; color: var(--text); margin: 14px 0 0; }
.prose .date-kicker { font: 400 12px var(--mono); letter-spacing: 1px; color: var(--text-tertiary); margin-top: 16px; }
.prose .intro { font: 16px/1.55 var(--sans); color: var(--text-secondary); margin-top: 18px; }
.prose .intro a, .prose p a, .card a { text-decoration: underline; }
.legal h2 { font: italic 500 24px var(--serif); letter-spacing: -0.4px; color: var(--text); margin: 36px 0 0; }
.legal p, .legal li { font: 15px/1.65 var(--sans); color: var(--text-secondary); }
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-left: 22px; }
.legal li { margin-top: 8px; }
.legal strong { color: var(--text); }

/* ── Footer ── */
footer { border-top: 1px solid var(--border); }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; padding-bottom: 24px;
  font: 12px var(--sans); color: var(--text-tertiary);
}
.footer-inner a { color: var(--text-tertiary); }
.footer-inner a:hover { color: var(--text-secondary); }
.footer-links { display: flex; gap: 18px; }

/* ── Responsive ──
   Three tiers: tablet keeps every two-column layout and only scales the
   device down; the stack happens at 820px; 560px is the phone pass. */

/* Tablet — narrower gutters, smaller phones, layout otherwise unchanged. */
@media (max-width: 1100px) {
  .shell { padding-left: 32px; padding-right: 32px; }
  h1.display { font-size: 54px !important; letter-spacing: -1.6px; }
  .nav-links { gap: 20px; }
  .phone { width: 250px; border-radius: 38px; padding: 8px; }
  .phone .screen { border-radius: 31px; }
  .phone.small { width: 196px; border-radius: 31px; padding: 7px; }
  .phone.small .screen { border-radius: 25px; }
  .feature-row { gap: 32px !important; padding: 32px !important; }
  .row-title { font-size: 28px !important; }
}

/* Narrow tablet — hold the two-column hero by tightening gap and device. */
@media (max-width: 900px) {
  .hero { gap: 32px !important; }
  .phone { width: 220px; border-radius: 34px; }
  .phone .screen { border-radius: 27px; }
  .feature-row { gap: 28px !important; }
}

/* Large phones — stack the two-column layouts. */
@media (max-width: 700px) {
  .shell { padding-left: 24px; padding-right: 24px; }
  h1.display { font-size: 44px !important; letter-spacing: -1.2px; }
  .prose { padding-left: 24px; padding-right: 24px; }
  .prose h1 { font-size: 38px !important; }
  .hero { flex-direction: column; padding-bottom: 48px !important; }
  .hero > div:first-child { padding-top: 8px !important; }
  .hero-phone { margin-top: 12px; }
  .hero-phone .phone { margin: 0 auto; }
  .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .feature-row { flex-direction: column !important; }
  .feature-row .phone { margin: 0 auto; }
  .nav-links { gap: 14px; font-size: 12px; }
  /* Keep the three stats on one line — tighter gaps buy the ~10px needed. */
  .stat-row { flex-wrap: nowrap; gap: 16px !important; }
  .stat-label { white-space: nowrap; }
  .footer-inner { flex-direction: column; gap: 12px; }
  /* The ambient glows read as hard blobs once the hero is tall — soften. */
  .glow { opacity: .5; }
  .closing-line { font-size: 27px !important; }
}

/* Phones — drop the inline nav, tighten display type. */
@media (max-width: 560px) {
  h1.display { font-size: 37px !important; }
  .prose h1 { font-size: 31px !important; }
  .nav .wordmark { font-size: 22px; }
  .nav-links a:not(.cta) { display: none; }
  .row-title { font-size: 25px !important; }
  .section-head .title { font-size: 25px; }
  .stat-row { gap: 13px !important; }
  .stat-num { font-size: 23px !important; }
  .stat-label { font-size: 10px !important; }
}

/* Smallest phones (iPhone SE and similar) — last squeeze on the stat row. */
@media (max-width: 380px) {
  .stat-row { gap: 10px !important; }
  .stat-num { font-size: 21px !important; }
  .stat-label { font-size: 9.5px !important; }
}