/* Meal planner ("Simmer", a working name) coming-soon page.
   Built on the Etch page's skeleton, dressed in the app's own look: the palette is
   ui/theme/Color.kt (cream, terracotta, sage, mustard, cocoa) and the type is Nunito, the
   app's font, self-hosted. "Cozy, not a dashboard" (PHASE2.md) applies here too: rounded
   cards, warm colors, room to breathe. */

/* One variable file gives every weight, as it does in the app. */
@font-face{font-family:Nunito;src:url(assets/fonts/nunito.ttf) format('truetype');font-weight:200 1000;font-display:swap}

/* Light values are the app's LightColors, dark are DarkColors. `primary` is deep enough
   for white text at 4.5:1 in light; in dark it flips to a pale terracotta with dark text. */
:root{
  --bg:#FFF8EE;
  --surface:#FCF0E2;
  --surface-2:#F3E3D2;
  --card:#FFFFFF;
  --text:#3B2A26;
  --dim:#6E5A52;
  --line:#E6D5C5;
  --primary:#B8552F;
  --on-primary:#FFFFFF;
  --primary-soft:#FFE0CF;
  --on-primary-soft:#5A2410;
  --sage:#4F7D61;
  --sage-soft:#DDEFE2;
  --on-sage-soft:#1F3D2B;
  --mustard-soft:#FCEBC4;
  --on-mustard-soft:#4A3500;
  --bezel:#3B2A26;
  --shadow:0 1px 2px rgba(59,42,38,.06),0 10px 30px rgba(59,42,38,.09);
  --radius:22px;
}
:root[data-theme=dark]{
  --bg:#1E1816;
  --surface:#29211E;
  --surface-2:#3E3430;
  --card:#221B18;
  --text:#F3E6DC;
  --dim:#CDBBB0;
  --line:#51443E;
  --primary:#F0A07F;
  --on-primary:#4A1E0C;
  --primary-soft:#6B3420;
  --on-primary-soft:#FFDCCB;
  --sage:#A6CBB2;
  --sage-soft:#2F4A39;
  --on-sage-soft:#D6ECDC;
  --mustard-soft:#5A4410;
  --on-mustard-soft:#FCEBC4;
  --bezel:#3E3430;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Nunito,ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);font-weight:700}
h1,h2,h3{line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-weight:800;font-size:clamp(2.5rem,6vw,4.1rem)}
h2{font-weight:800;font-size:clamp(1.75rem,3.4vw,2.45rem)}
h3{font-weight:800;font-size:1.15rem}
p{margin:0 0 1rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--primary);color:var(--on-primary);padding:.6rem 1rem;border-radius:12px}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:8px}

/* ---------- header ---------- */
.site{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,3rem);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--text);text-decoration:none}
.theme{
  display:grid;place-items:center;width:42px;height:42px;padding:0;cursor:pointer;
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:50%;
}
.theme:hover{background:var(--surface-2)}
.theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ico-moon{display:none;fill:currentColor;stroke:none}
:root[data-theme=dark] .ico-sun{display:none}
:root[data-theme=dark] .ico-moon{display:block}

/* ---------- layout ---------- */
section{padding:clamp(2.4rem,5vw,4.2rem) clamp(1rem,4vw,3rem);max-width:1100px;margin:0 auto}

/* ---------- buttons ----------
   The app's primary button: a full pill in terracotta. The same shape as "Show me some
   ideas", so the page's one call to action looks like the app's. */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-align:center;
  background:var(--primary);color:var(--on-primary);text-decoration:none;
  font-weight:800;font-size:1.08rem;padding:.95rem 1.8rem;border-radius:999px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 28%,transparent);
  transition:transform .15s ease,filter .15s ease;
}
/* The envelope says "this opens your email" before anyone taps it. */
.button svg{flex:none;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.button:hover{filter:brightness(1.06);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.button{transition:none}.button:hover{transform:none}}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-top:clamp(2rem,5vw,4rem)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-mustard-soft);background:var(--mustard-soft);
  padding:.35rem .85rem;border-radius:999px;margin-bottom:1.1rem;
}
/* A small pulse: "cooking", not "loading". Still under reduced motion. */
.soon-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--primary);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.soon-dot{animation:none}}
/* The subhead says what the thing is, for a scanning reader and for search; set at lede
   weight so it reads as subordinate to the h1, as on the Etch page. */
.hero-sub{
  font-size:clamp(1.15rem,1.9vw,1.38rem);font-weight:700;letter-spacing:-.005em;
  color:var(--primary);max-width:30ch;margin:0 0 .85rem;
}
.lede{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--dim);max-width:38ch}
.cta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.2rem 1.6rem;margin:1.9rem 0 1.6rem}
.cta-mail{display:flex;flex-direction:column;gap:.5rem}
.cta-note{margin:0;font-size:.88rem;color:var(--dim)}
/* Google's official badge, unmodified. Guidelines forbid recreating or restyling it, so
   "Coming soon" is set as separate text above rather than drawn onto the artwork, and the
   badge is not a link until there is a listing to link to. Same treatment Etch had. */
.badge-wrap{display:flex;flex-direction:column;gap:.35rem}
.badge-soon{
  margin:0 0 0 .7rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);
}
.badge-img{width:186px;height:auto}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.chips li{
  font-size:.88rem;font-weight:700;padding:.38rem .9rem;border-radius:999px;
  background:var(--card);border:1.5px solid var(--line);color:var(--text);
}

/* The hero picture: the phone on a soft terracotta circle (the app's Buddy circle, grown
   up), with a few kitchen tags floating around it in the app's own words. */
.stage{position:relative;max-width:420px;margin:0 auto;padding:1.5rem 0}
.blob{
  position:absolute;inset:8% -2% 6%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--primary-soft),color-mix(in srgb,var(--primary-soft) 0%,transparent) 72%);
}
.phone{
  position:relative;margin:0 auto;max-width:290px;
  border:10px solid var(--bezel);border-radius:36px;overflow:hidden;background:var(--bezel);box-shadow:var(--shadow);
}
.phone img{width:100%;height:auto;border-radius:26px;aspect-ratio:620/1286}
.tag{
  position:absolute;z-index:1;white-space:nowrap;
  font-size:.86rem;font-weight:800;padding:.5rem .85rem;border-radius:16px;
  background:var(--card);border:1.5px solid var(--line);box-shadow:var(--shadow);
  animation:bob 6s ease-in-out infinite;
}
.tag-a{top:16%;left:-8%}
.tag-b{top:46%;right:-10%;background:var(--sage-soft);color:var(--on-sage-soft);border-color:transparent;animation-delay:-2s}
.tag-c{bottom:12%;left:-4%;background:var(--primary-soft);color:var(--on-primary-soft);border-color:transparent;animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.tag{animation:none}}

/* ---------- the moment ---------- */
.moment{text-align:center;padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.moment h2{max-width:20ch;margin-left:auto;margin-right:auto}
.moment-lede{max-width:56ch;margin:0 auto 1.8rem;color:var(--dim);font-size:1.05rem}
.rooms{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.6rem;list-style:none;padding:0;margin:0 auto;max-width:900px;text-align:left;
}
.rooms li{
  background:var(--card);border:1.5px solid var(--line);border-radius:18px;
  padding:.8rem 1.1rem;font-size:.97rem;font-weight:700;
}

/* ---------- steps ---------- */
.steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:none;padding:0;margin:0}
.steps li{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.steps .n{
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:.9rem;
  background:var(--primary);color:var(--on-primary);border-radius:50%;font-weight:800;font-size:1rem;
}
.steps p{margin:0;color:var(--dim);font-size:.97rem}

/* ---------- alternating features ---------- */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.feature.reverse .feature-text{order:2}
.feature-text p{max-width:46ch}
.feature-text .dim{color:var(--dim);font-size:.98rem}
.feature-shot picture{display:block}
/* width:100% matters: without it the lazy-loaded figure collapses to its borders until
   the image arrives, and the page jumps (measured on the Etch page, 2026-09-13). */
.feature-shot{
  margin:0;width:100%;max-width:280px;justify-self:center;
  border:9px solid var(--bezel);border-radius:32px;overflow:hidden;background:var(--bezel);box-shadow:var(--shadow);
}
.feature-shot img{width:100%;height:auto;border-radius:24px}

/* ---------- card grid ---------- */
.grid h2{margin-bottom:1.6rem}
/* 260px, not Etch's 230: six cards then sit 3 + 3 at full width rather than 4 + 2. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.cards article{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.card-ico{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:.8rem;
  font-size:1.4rem;border-radius:14px;background:var(--surface-2);
}
.cards p{margin:0;color:var(--dim);font-size:.95rem}

/* ---------- answers ---------- */
#faq{scroll-margin-top:4.5rem}
.answers dl{display:grid;gap:.7rem;margin:0}
.answers div{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:1.15rem 1.35rem}
.answers dt{font-weight:800;margin-bottom:.3rem}
.answers dd{margin:0;color:var(--dim);font-size:.97rem}
.answers strong{color:var(--text)}

/* ---------- closing call to action ---------- */
.launch-inner{
  background:var(--sage-soft);color:var(--on-sage-soft);border-radius:30px;
  padding:clamp(1.8rem,4vw,3rem);max-width:720px;margin:0 auto;text-align:center;
}
.launch-ico{display:inline-block;margin-bottom:.8rem}
.launch-ico img{border-radius:16px;box-shadow:var(--shadow)}
.launch p{max-width:52ch;margin-left:auto;margin-right:auto}
.launch-cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:1rem 1.4rem;margin:1.5rem 0 0}
.launch-cta .badge-soon{color:var(--on-sage-soft);opacity:.8}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);margin-top:2rem;
  padding:2.5rem clamp(1rem,4vw,3rem);text-align:center;color:var(--dim);
}
.wordmark{display:flex;align-items:center;justify-content:center;gap:.55rem;font-weight:800;color:var(--text)}
.wordmark img{border-radius:8px}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;margin:1rem 0}
.site-foot .small{font-size:.8rem;max-width:52ch;margin:1.2rem auto 0;opacity:.85}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero,.feature{grid-template-columns:1fr}
  .feature.reverse .feature-text{order:0}
  .steps ol{grid-template-columns:1fr}
  .lede{max-width:none}
  /* Pulled in so they stay on screen at 360px wide rather than hanging off the edge. */
  .stage{max-width:320px}
  .phone{max-width:240px}
  .tag{font-size:.78rem;padding:.4rem .7rem}
  .tag-a{top:5%;left:-2%}
  .tag-b{right:-3%}
  .tag-c{left:0}
}