/* ===========================================================================
   Ask the Kitchen — marketing site layout
   Page-specific only. Colour, type, buttons, cards and chips all come from
   ../shared/brand.css, which the portal loads too. If you find yourself
   redefining a colour in here, it belongs in brand.css instead.
   =========================================================================== */

html{ scroll-behavior:smooth }
.center{ text-align:center }
.section--tight{ padding-top:0 }

/* --- dev banner ------------------------------------------------------------ */
.devbar{
  background:var(--tomato); color:#fff; text-align:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  padding:.45rem 1rem; border-bottom:var(--edge);
}
.devbar code{ background:rgba(0,0,0,.25); padding:.1rem .35rem; border-radius:4px }

/* --- nav ------------------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:60; background:var(--milk); border-bottom:var(--edge) }
.nav__in{ display:flex; align-items:center; gap:1.25rem; padding:.7rem 0 }
.nav__links{ display:flex; gap:1.4rem; align-items:center }
.nav .lnk{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.nav .lnk:hover{ border-bottom-color:var(--tomato) }

/* Below 860px the full nav does not fit alongside the CTA button. Rather than a
   hamburger for a one-page site, keep the two links that matter — Pricing and
   Log in — and drop the section anchors, which a scroll reaches anyway. Log in
   being unreachable on a phone was the actual bug: a returning user had no way
   to sign in from the homepage. */
@media(max-width:860px){
  .nav__in{ gap:.9rem }
  .nav__links{ gap:1rem }
  .nav__links .lnk--anchor{ display:none }
  .nav .lnk{ font-size:.72rem }
}
@media(max-width:420px){
  /* Very narrow: the mark's wordmark can go, the icon still links home. */
  .mark__words{ display:none }
}

.mark{
  font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 100;
  font-size:1.02rem; line-height:.92; letter-spacing:-.03em;
  text-transform:lowercase; text-decoration:none; margin-right:auto;
  display:flex; align-items:center; gap:.6rem;
}
.mark__words b{ display:block }
.mark__icon{ width:36px; height:36px; flex:none; display:block }

/* --- hero ------------------------------------------------------------------ */
.hero{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,206,40,.55), transparent 42%),
    radial-gradient(circle at 88% 8%,  rgba(155,217,242,.5), transparent 38%),
    var(--milk);
  border-bottom:var(--edge);
  padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem);
  overflow:hidden;
}
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center }
@media(max-width:900px){ .hero__grid{ grid-template-columns:1fr } }
.hero h1 span{ color:var(--tomato); display:block }
.hero__sub{ font-size:clamp(1.05rem,2vw,1.28rem); max-width:34ch; margin-top:1.4rem }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; align-items:center }
.hero__note{ margin-top:1rem }

/* --- the stalemate --------------------------------------------------------- */
.stalemate{ position:relative; display:flex; flex-direction:column; gap:.7rem }
.bub{
  align-self:flex-start; max-width:82%;
  background:#fff; border:var(--edge); border-radius:20px 20px 20px 5px;
  padding:.7rem 1.05rem; box-shadow:var(--pop-sm);
  font-size:1.02rem; font-weight:500;
}
.bub--me{ align-self:flex-end; border-radius:20px 20px 5px 20px; background:var(--frost) }
.bub--hot{ background:var(--tomato); color:#fff; font-weight:700 }
.bub small{
  display:block; font-family:var(--mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.6; margin-bottom:.15rem;
}

.answer{
  border:var(--edge); border-radius:var(--r); background:var(--custard);
  box-shadow:var(--pop); padding:1.15rem 1.25rem; margin-top:.4rem;
}
.answer .tag{ margin-bottom:.7rem }
.answer h3{ margin-bottom:.5rem }
.replay{
  margin-top:.9rem; background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:4px;
}

/* Entrance choreography: one message at a time, then the answer lands. */
.stalemate > *{ opacity:0; transform:translateY(10px) scale(.97) }
.stalemate.go > *{ animation:atk-pop .42s cubic-bezier(.2,1.3,.4,1) forwards }
.stalemate.go > *:nth-child(1){ animation-delay:.15s }
.stalemate.go > *:nth-child(2){ animation-delay:.75s }
.stalemate.go > *:nth-child(3){ animation-delay:1.35s }
.stalemate.go > *:nth-child(4){ animation-delay:1.95s }
.stalemate.go > *:nth-child(5){ animation-delay:2.55s }
.stalemate.go > *:nth-child(6){ animation-delay:3.25s }
@keyframes atk-pop{ to{ opacity:1; transform:none } }

@media(prefers-reduced-motion:reduce){
  .stalemate > *{ opacity:1; transform:none }
}

/* --- ticker ---------------------------------------------------------------- */
.ticker{ background:var(--ink); color:var(--milk); border-bottom:var(--edge); overflow:hidden; padding:.75rem 0 }
.ticker__track{ display:flex; gap:2.5rem; width:max-content; animation:atk-slide 34s linear infinite }
.ticker span{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap }
.ticker span::after{ content:'●'; margin-left:2.5rem; color:var(--custard) }
@keyframes atk-slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* --- steps ----------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem }
@media(max-width:860px){ .steps{ grid-template-columns:1fr } }
.step{ border:var(--edge); border-radius:var(--r); padding:1.5rem; background:#fff; box-shadow:var(--pop) }
.step--1{ background:var(--custard) }
.step--2{ background:var(--mint); color:#fff }
.step--2 .step__n{ background:#fff; color:var(--ink) }
.step--3{ background:var(--frost) }
.step__n{
  width:38px; height:38px; margin-bottom:1rem;
  border:var(--edge); border-radius:12px; background:var(--ink); color:var(--custard);
  display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:1.1rem;
}
.step h3{ margin-bottom:.55rem }
.step p{ margin:0; font-size:.98rem }

/* --- demo ------------------------------------------------------------------ */
.demo{ background:var(--plum); color:var(--milk); border-block:var(--edge) }
.demo h2{ color:#fff }
.demo .eyebrow{ color:rgba(255,255,255,.6) }
.demo__lead{ max-width:52ch; margin-top:1rem }
.demo__grid{ display:grid; grid-template-columns:1.25fr .95fr; gap:2rem; margin-top:2.4rem; align-items:start }
@media(max-width:960px){ .demo__grid{ grid-template-columns:1fr } }

.drawer{
  border:var(--edge); border-radius:var(--r); background:var(--milk); color:var(--ink);
  padding:1.05rem 1.15rem; margin-bottom:1rem; box-shadow:var(--pop);
}
.drawer__hd{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem }
.drawer__hd b{ font-family:var(--display); font-weight:900; font-size:1.05rem; font-variation-settings:'wdth' 112 }
.dot{ width:16px; height:16px; border:var(--edge-2); border-radius:5px; flex:none }
.drawer--cupboard .dot{ background:var(--loc-cupboard) }
.drawer--fridge   .dot{ background:var(--loc-fridge) }
.drawer--freezer  .dot{ background:var(--loc-freezer) }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem }

.result{
  border:var(--edge); border-radius:var(--r); background:var(--custard); color:var(--ink);
  padding:1.4rem; box-shadow:var(--pop); position:sticky; top:90px;
}
.result__hd{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.8rem }
.result h3{ margin-bottom:.6rem }
.result ul{ margin:.8rem 0 0; padding-left:1.1rem; font-size:.92rem }
.result li.missing{ opacity:.65; font-style:italic }
.near{ margin-top:1.1rem; padding-top:1.1rem; border-top:2px dashed var(--ink); font-size:.92rem }
.near b{ font-family:var(--display); font-weight:900 }
.count{ margin-top:1rem }

/* --- split + media slots --------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center }
@media(max-width:900px){ .split{ grid-template-columns:1fr } }
.ticks{ list-style:none; padding:0; margin:1.4rem 0 0 }
.ticks li{ display:flex; gap:.75rem; margin-bottom:.85rem; font-size:1.02rem }
.ticks i{
  flex:none; width:26px; height:26px; font-style:normal; font-size:.85rem; font-weight:700;
  border:var(--edge-2); border-radius:8px; background:var(--mint); color:#fff;
  display:grid; place-items:center;
}

/* Placeholder frames. Delete these rules once real media is in — if the
   diagonal stripes are still on the site at launch, something went wrong. */
.media{
  border:var(--edge); border-radius:var(--r); box-shadow:var(--pop);
  background:repeating-linear-gradient(45deg,#fff,#fff 12px,#FFF2D6 12px,#FFF2D6 24px);
  aspect-ratio:4/3; display:grid; place-items:center; text-align:center; padding:1.5rem;
}
.media--wide{ aspect-ratio:16/9 }
.media__label{ color:var(--smoke); max-width:30ch }

/* A plain photograph, wearing the same edge and shadow as everything else. */
.shot{ margin:0 }
.shot img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:var(--edge); border-radius:var(--r); box-shadow:var(--pop);
}
.shot--wide img{ aspect-ratio:16/9 }

/* --- showcase (the slideshow section) -------------------------------------- */
.showcase--dark{ background:var(--ink); color:var(--milk); border-block:var(--edge) }
.showcase--dark h2{ color:#fff }
.showcase--dark .eyebrow{ color:rgba(255,249,238,.6) }
.showcase__lead{ max-width:54ch; margin-top:1rem; color:rgba(255,249,238,.82) }

/* --- pricing --------------------------------------------------------------- */
.pricing{ background:var(--frost); border-block:var(--edge); text-align:center }
.pricing__lead{ max-width:46ch; margin:1rem auto 0 }

/* The shared-features strip. Sits above the cards so the tiers read as "how
   much choice", not "how much app". */
.shared{
  border:var(--edge); border-radius:var(--r); background:var(--ink); color:var(--milk);
  box-shadow:var(--pop); padding:1.2rem 1.4rem; margin-top:2.2rem; text-align:left;
}
.shared__hd{
  color:var(--custard); text-transform:uppercase; letter-spacing:.14em;
  font-size:.68rem; margin:0 0 .5rem;
}
.shared__body{ margin:0; font-size:.95rem; line-height:1.7; color:rgba(255,249,238,.88) }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.4rem; text-align:left }
@media(max-width:980px){ .plans{ grid-template-columns:1fr } }
.plan{
  border:var(--edge); border-radius:var(--r); padding:1.6rem; background:#fff;
  box-shadow:var(--pop); display:flex; flex-direction:column;
}
/* Home is the middle tier and the one most kitchens want; colour is enough to
   say so without inventing a "most popular" badge nobody has measured. */
.plan--mid{ background:var(--custard) }
.plan__name{ font-family:var(--display); font-weight:900; font-size:1.6rem; font-variation-settings:'wdth' 115 }
.plan__price{ font-family:var(--display); font-weight:900; font-size:2.8rem; line-height:1; margin:.6rem 0 .2rem }
.plan__price sup{ font-size:1.1rem; vertical-align:super; font-weight:800 }
.plan__per{ font-family:var(--mono); font-size:.72rem; color:var(--smoke); text-transform:uppercase; letter-spacing:.1em }
.plan__line{ font-size:.95rem; margin:1rem 0 0; font-weight:500 }
.plan ul{ list-style:none; padding:0; margin:1.1rem 0 1.8rem }
.plan li{ padding:.4rem 0; font-size:.97rem; border-bottom:1px dashed var(--hairline) }
.plan li:last-child{ border-bottom:0 }
.plan .btn{ width:100%; justify-content:center; margin-top:auto }

.plans__note{
  border:var(--edge); border-radius:var(--r); background:var(--milk);
  box-shadow:var(--pop-sm); padding:1.2rem 1.4rem; margin-top:1.6rem; text-align:left;
}
.plans__note p{ margin:0 0 .7rem; font-size:.95rem }
.plans__note p:last-child{ margin-bottom:0 }
.tbd{ margin-top:1rem }

/* --- faq ------------------------------------------------------------------- */
.faq{ max-width:760px; margin:2.4rem auto 0 }
.faq details{
  border:var(--edge); border-radius:14px; background:#fff;
  padding:1rem 1.2rem; margin-bottom:.8rem; box-shadow:var(--pop-sm);
}
.faq summary{
  font-family:var(--display); font-weight:800; font-size:1.05rem; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:1.4rem; line-height:1 }
.faq details[open] summary::after{ content:'–' }
.faq details p{ margin:.9rem 0 0; font-size:.97rem }

/* --- legal / prose pages --------------------------------------------------- */
.legal__wrap{ max-width:74ch }
.legal__h1{ font-size:clamp(2.2rem,5.5vw,3.4rem) }
.legal__intro{ font-size:1.1rem; margin-top:1rem }
.legal h2{
  font-size:clamp(1.2rem,2.6vw,1.5rem);
  margin:2.6rem 0 .8rem;
  padding-top:1.4rem;
  border-top:var(--edge-2);
}
.legal p, .legal li{ font-size:1rem }
.legal ul{ padding-left:1.2rem; margin:0 0 1rem }
.legal li{ margin-bottom:.5rem }
.legal a{ text-decoration:underline; text-underline-offset:3px }

/* Dev-only reminder that the legal facts are not filled in yet. Loud on
   purpose: a policy with placeholders reads as compliance without being it. */
.legal__gaps{
  border:var(--edge); border-radius:var(--r); background:var(--tomato); color:#fff;
  box-shadow:var(--pop); padding:1.1rem 1.3rem; margin-bottom:2.4rem;
}
.legal__gaps b{ font-family:var(--display); font-size:1.05rem }
.legal__gaps ul{ margin:.7rem 0; padding-left:1.2rem; columns:2 }
.legal__gaps li{ font-family:var(--mono); font-size:.78rem; margin:0 }
.legal__gaps p{ margin:0; font-size:.86rem }
.legal__gaps code{ background:rgba(0,0,0,.25); padding:.1rem .3rem; border-radius:4px }
@media(max-width:600px){ .legal__gaps ul{ columns:1 } }

/* --- cookie consent -------------------------------------------------------- */
/* Only ever rendered when analytics is switched on. Sits above everything but
   does not block the page — nothing here is worth a modal. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ink); color:var(--milk);
  border-top:var(--edge);
}
.consent__in{
  width:min(1180px, 100% - 2.5rem); margin-inline:auto;
  padding:1rem 0; display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap;
}
.consent__text{ margin:0; flex:1 1 22rem; font-size:.92rem; line-height:1.55 }
.consent__text a{ color:var(--custard) }
.consent__btns{ display:flex; gap:.6rem; flex-wrap:wrap }
.consent__btns .btn{ font-size:.92rem; padding:.6rem 1.2rem }

/* --- blog ------------------------------------------------------------------ */
.post__wrap{ max-width:70ch }
.post__h1{ font-size:clamp(2rem,5vw,3rem); margin:.6rem 0 1.4rem }
.post__date{ font-family:var(--mono); font-size:.8rem; color:var(--smoke); margin:-1rem 0 1.6rem }

/* Hero image on BabyLoveGrowth posts (our own posts have none). Kept from their
   CDN, so it wears the same edge and shadow as every other image on the site. */
.post__hero{ margin:0 0 1.8rem }
.post__hero img{
  width:100%; max-height:440px; object-fit:cover;
  border:var(--edge); border-radius:var(--r); box-shadow:var(--pop);
}

.post__body{ font-size:1.05rem; line-height:1.7 }
.post__body h2{ font-size:clamp(1.3rem,2.8vw,1.7rem); margin:2.2rem 0 .7rem }
.post__body h3{ font-size:1.15rem; margin:1.6rem 0 .5rem }
.post__body p{ margin:0 0 1.1rem }
.post__body ul, .post__body ol{ margin:0 0 1.1rem; padding-left:1.3rem }
.post__body li{ margin-bottom:.5rem }
.post__body a{ color:var(--tomato); text-decoration:underline; text-underline-offset:3px }
.post__body blockquote{
  margin:1.4rem 0; padding:.6rem 1.2rem; border-left:4px solid var(--custard);
  background:var(--milk-2, #fff5e0); font-style:italic;
}
.post__body table{ border-collapse:collapse; width:100%; margin:1.2rem 0 }
.post__body th, .post__body td{ border:2px solid var(--ink); padding:.5rem .7rem; text-align:left }

/* Inline images inside third-party article bodies. Constrained so a large CDN
   image cannot break the measure; same edge treatment as the hero. */
.post__body img{
  max-width:100%; height:auto; display:block; margin:1.4rem 0;
  border:var(--edge-2); border-radius:12px;
}
.post__body figure{ margin:1.4rem 0 }
.post__body figcaption{ font-size:.85rem; color:var(--smoke); margin-top:.4rem; text-align:center }
.post__body h4{ font-size:1.05rem; margin:1.3rem 0 .4rem }
.post__body pre{
  background:var(--ink); color:var(--milk); padding:1rem 1.2rem; border-radius:12px;
  overflow-x:auto; font-size:.88rem; margin:1.2rem 0;
}
.post__body code{ font-family:var(--mono); font-size:.9em }
.post__body hr{ border:0; border-top:var(--edge-2); margin:2rem 0 }

/* FAQ block at the foot of a post. Visible on the page AND emitted as FAQPage
   schema in the head — Google requires the two to match, so this must render
   whenever the schema does. */
.post__faq{ margin:2.4rem 0 1rem }
.post__faq h2{ font-size:clamp(1.3rem,2.8vw,1.7rem); margin:0 0 1rem }
.post__faq details{
  border:var(--edge-2); border-radius:12px; padding:.2rem 1rem; margin-bottom:.7rem;
  background:var(--milk);
}
.post__faq summary{
  font-family:var(--display); font-weight:800; cursor:pointer;
  padding:.7rem 0; list-style:none;
}
.post__faq summary::-webkit-details-marker{ display:none }
.post__faq summary::after{ content:'+'; float:right; font-size:1.3rem; line-height:1 }
.post__faq details[open] summary::after{ content:'\2013' }
.post__faq details p{ margin:0 0 .8rem }

/* The CTA at the foot of every post. The conversion job, so it wears the full
   sticker treatment rather than blending in. */
.post__cta{
  margin:2.6rem 0 1rem; padding:1.6rem 1.8rem;
  border:var(--edge); border-radius:var(--r); box-shadow:var(--pop);
  background:var(--custard);
}
.post__cta h2{ margin:0 0 .6rem; font-size:1.4rem }
.post__cta p{ margin:0 0 1.1rem }

.post-list{ list-style:none; padding:0; margin:1.6rem 0 0 }
.post-list li{ padding:1.1rem 0; border-top:var(--edge-2) }
.post-list li:last-child{ border-bottom:var(--edge-2) }
.post-list a{
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  color:var(--ink); text-decoration:none;
}
.post-list a:hover{ color:var(--tomato) }
.post-list p{ margin:.35rem 0 0; color:var(--smoke); font-size:.95rem }
.post-list__date{ font-family:var(--mono); font-size:.78rem; color:var(--smoke); margin:.25rem 0 0 !important }

/* --- footer ---------------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--milk); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem }
.foot h2{ color:#fff; max-width:16ch }
.foot__lead{ margin-top:1rem; max-width:44ch; color:rgba(255,249,238,.82) }
.foot__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem }
.foot__cta .btn--plain{ color:var(--milk); border-color:var(--milk) }
.foot__cta .btn--plain:hover{ box-shadow:5px 5px 0 var(--milk) }
.foot__base{
  display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between;
  border-top:2px solid rgba(255,255,255,.2); margin-top:3rem; padding-top:1.4rem;
  font-family:var(--mono); font-size:.74rem; color:rgba(255,249,238,.6);
}
.foot__base a{ text-decoration:none }
.foot__base a:hover{ color:var(--custard) }