/* ============================================================
   Pura Mama — homepage design system (v9)
   Full-width colour bands, Fraunces display serif, photography.
   The four service pages still run on pm.css until they migrate.
   ============================================================ */

:root{
  --orange:#ee773f;--orange-text:#983f12;--olive:#4b6b2c;--forest:#3a7242;
  --pink:#edd6dc;--rose:#e3a9b5;--cream:#f2eae2;
  --peach:#fad7bf;--sage:#cfdcbb;
  --paper:#faf4ec;--ink:#1c1a17;--ink-60:#514a43;
  --line:rgba(28,26,23,.14);
  --serif:"Fraunces",Georgia,serif;
  --r:24px;
}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Montserrat",system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit}p{margin:0}/* ---------- bands ---------- */
.band{padding:clamp(2.6rem,4.4vw,4.2rem) 0}.band--cream{background:var(--paper)}.band--warm{background:var(--cream)}.band--pink{background:var(--pink)}.band--black{background:var(--ink);color:var(--on-dark)}.band--sage{background:var(--sage)}.band--peach{background:var(--peach)}.inner{max-width:1240px;margin:0 auto;padding:0 28px}/* ---------- type ---------- */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;letter-spacing:-.02em;line-height:1.06}h2{font-size:clamp(2rem,3.8vw,3rem);max-width:20ch}h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.02em}h2 em,h1 em{
  font-style:normal;font-family:var(--serif);font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1;letter-spacing:-.02em;
}.eyebrow{display:block;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);margin-bottom:1.1rem}.band--forest .eyebrow,.band--black .eyebrow{color:var(--on-dark-soft)}.lede{color:var(--ink-60);max-width:44ch;font-size:1rem}.band--forest .lede,.band--black .lede{color:var(--on-dark-muted)}.tiny{font-size:.8rem;color:var(--ink-60)}/* ---------- photo placeholders ---------- */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:var(--cream);display:flex;align-items:flex-end;padding:1rem;min-height:200px}.band--forest .ph,.band--black .ph{background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px),rgba(255,255,255,.05);border-color:rgba(255,255,255,.3)}.ph b{
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);
  background:rgba(255,255,255,.72);border-radius:999px;padding:.4em .9em;
}.band--forest .ph b,.band--black .ph b{background:rgba(0,0,0,.3);color:var(--on-dark-muted)}.ph--img{border:none;background-size:cover;background-position:center}.ph--img b{display:none}.ph--arch{border-radius:180px 180px var(--r) var(--r)}/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--paper);padding:16px 0;border-bottom:1px solid var(--line)}.bar{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:1.6rem}.bar nav{margin-left:auto;display:flex;gap:.3rem;align-items:center}.bar nav a{
  text-decoration:none;font-size:.79rem;font-weight:500;color:var(--ink);
  padding:.55rem 1rem;border-radius:999px;transition:background .15s;
}.bar nav a:hover{background:var(--cream)}.bar nav a.cta{background:var(--ink);color:#fff;font-weight:600}.bar nav a.cta:hover{background:#000}.bar .brand{display:block;flex:none}.bar .brand img{height:46px;width:auto;display:block}/* ---------- hero ---------- */
.hero{padding:clamp(2.6rem,5vw,4.4rem) 0 0;text-align:center;position:relative}.hero h1{
  font-family:var(--serif);font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;
  max-width:15em;margin:0 auto;text-wrap:balance;
}.hero p.sub{margin:1.3rem auto 0;max-width:46ch;color:var(--ink-60);font-size:1.02rem}.hero-cta{display:flex;gap:.6rem;justify-content:center;margin-top:1.9rem;flex-wrap:wrap}.hero-photo .ph{min-height:min(60vh,520px);border-radius:0;justify-content:center}/* seal */
.seal{position:absolute;right:max(clamp(8px,3vw,48px),calc(50% - 620px + 28px));top:-40px;z-index:3;
  width:clamp(130px,15vw,180px);aspect-ratio:1;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,2vw,22px);
  box-shadow:0 10px 30px rgba(28,26,23,.12)}.seal img{width:100%;height:auto}.mission-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.statlet{background:rgba(255,255,255,.5);border-radius:var(--r);padding:1.5rem}.statlet b{display:block;font-family:var(--serif);font-weight:600;font-size:1.75rem;letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1}.statlet span{display:block;font-size:.85rem;color:var(--ink-60);margin-top:.35rem}@media (max-width:900px){.mission-stats{grid-template-columns:1fr 1fr}}@media (max-width:560px){.mission-stats{grid-template-columns:1fr}}/* ---------- stage tracker ---------- */
/* The supporting paragraph always sits under its heading, never beside it:
   two columns of text made the reader choose where to start. */
.head-3{display:block;margin-bottom:1.8rem}.head-3 .lede{margin-top:.9rem;max-width:58ch}.stage-head{margin-bottom:2rem;max-width:62ch}.stage-head .lede{margin-top:1.1rem;max-width:58ch}.rail{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:24px}.stage{border-radius:999px;border:none;background:rgba(255,255,255,.7);padding:.72rem 1.2rem;cursor:pointer;text-align:left;font-family:inherit;font-size:.84rem;font-weight:500;color:var(--ink);transition:background .15s,border-color .15s,color .15s}.stage small{display:block;font-size:.7rem;font-weight:400;color:var(--ink-60)}.stage:hover{border-color:var(--orange)}.stage[aria-selected="true"]{background:var(--ink);color:#fff}.stage[aria-selected="true"] small{color:var(--on-dark-soft)}.stage:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.panel{display:grid;grid-template-columns:1.05fr .95fr .95fr;gap:24px;align-items:stretch}.card{border-radius:var(--r);padding:1.8rem;display:flex;flex-direction:column;position:relative;overflow:hidden}.card--plain{background:#fffcf6}.card--pinkcard{background:var(--pink)}.card--white{background:#fff}.card--sagecard{background:var(--sage)}.card-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}.rows{list-style:none;margin:0;padding:0;flex:1}.rows li{padding:.85rem 0;border-top:1px solid rgba(28,26,23,.14)}.rows li:first-child{border-top:none;padding-top:0}.rows b{display:block;font-weight:600;font-size:.94rem}.rows span{display:block;font-size:.88rem;font-weight:400;color:var(--ink-60);line-height:1.5}.rows em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text)}.statement{font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.25;letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1;margin-bottom:1.2rem}.link{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;font-size:.82rem;font-weight:600;border-bottom:1px solid rgba(28,26,23,.35);padding-bottom:3px;align-self:flex-start}.link:hover{color:var(--orange);border-color:var(--orange)}/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2rem}.tier{background:#fffcf6;border-radius:var(--r);padding:clamp(1.8rem,2.6vw,2.3rem);display:flex;flex-direction:column}.tier .desc{margin-bottom:1.6rem}.tier .btn{margin-top:auto;align-self:flex-start}.tier h3{margin-bottom:.9rem}.tag{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin-bottom:1.4rem}.tier--dark .tag{color:var(--peach)}.note{font-size:.85rem;color:var(--ink-60)}.tier--dark .note{color:var(--on-dark-soft)}.desc{font-size:.95rem;font-weight:400;margin-top:1.4rem;color:var(--ink-60)}.tier--dark .desc{color:var(--on-dark-muted)}.tier .ph{border-radius:0!important}.tier--dark{background:var(--ink);color:var(--on-dark)}.tier .ph{border-radius:0;border:none;min-height:170px}.price{font-family:var(--serif);font-weight:600;font-size:1.9rem;letter-spacing:-.03em;line-height:1;margin-bottom:.5rem;font-variation-settings:"SOFT" 40,"WONK" 1}.price small{display:block;font-family:"Montserrat";font-size:.78rem;font-weight:300;color:var(--ink-60);margin-top:.4rem}.tier--dark .price small{color:var(--on-dark-soft)}.checks{list-style:none;margin:1.2rem 0 1.6rem;padding:0;flex:1}.checks li{position:relative;padding:.42rem 0 .42rem 1.3rem;font-size:.88rem}.checks li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px;border-radius:50%;background:var(--orange)}/* ---------- cook day ---------- */

.touches{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:2rem}.touch .ph{min-height:250px;margin-bottom:1.2rem}.touch p{margin-top:.5rem}/* ---------- app ---------- */
.band--black .lede,.band--black .tiny{color:var(--on-dark-soft)}.band--black .feats li{border-top-color:rgba(244,240,232,.18)}.band--black .feats svg{stroke:var(--orange);stroke-width:1.6}.band--black .ph{background:rgba(255,255,255,.07)}.band--black .ph b{background:rgba(0,0,0,.35);color:var(--on-dark-muted)}.app-right{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:330px;margin:0 auto;width:100%}.app-layout{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}.app-left{display:flex;flex-direction:column;align-items:flex-start}.app-intro .lede{margin-top:1.1rem;max-width:52ch}.app-left .feats{width:100%;margin-top:clamp(1.8rem,3vw,2.6rem)}.app-right .tiny{margin-top:1.2rem}@media (max-width:1000px){.app-layout{grid-template-columns:1fr;gap:2rem}}.feats{list-style:none;margin:0;padding:0}.feats li{display:flex;align-items:center;gap:1.1rem;padding:1.05rem 0;border-top:1px solid var(--line);font-size:.98rem}.feats li:first-child{border-top:none}.feats svg{flex:none;width:22px;height:22px;stroke:var(--peach);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}@media (max-width:700px){}/* ---------- standard ---------- */
.std-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}.std-grid .ph{min-height:400px;height:100%}@media (max-width:900px){.std-grid{grid-template-columns:1fr}.std-grid .ph{min-height:280px}}.pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;padding:0;list-style:none}.pills li{background:#fff;border-radius:999px;padding:.85rem 1.5rem;font-size:.95rem;font-weight:500}/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;margin-top:1.1rem}.qleft{display:grid;gap:24px;grid-template-rows:auto 1fr}.statcard{background:rgba(255,255,255,.55);border-radius:var(--r);padding:1.5rem 1.6rem 1.6rem}.statcard b{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:600;letter-spacing:-.04em;line-height:.92;font-variation-settings:"SOFT" 40,"WONK" 1}.qright{display:grid;gap:0;align-content:start}.qright .ph{min-height:320px}.quotecard{
  position:static;width:auto;margin-top:24px;
  background:#fffcf6;border-radius:var(--r);padding:1.6rem 1.7rem;
}.quotecard .mark{font-family:var(--serif);font-size:2rem;line-height:.6;color:var(--rose);display:block;margin-bottom:.6rem}.quotecard p{font-size:.95rem;line-height:1.5}.quotecard cite{display:block;font-style:normal;margin-top:.9rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center}.split .ph{min-height:440px}/* ---------- closing ---------- */
.closing{position:relative;min-height:min(64vh,520px);display:flex;align-items:center;
  background:repeating-linear-gradient(45deg,rgba(28,26,23,.05) 0 14px,transparent 14px 28px),linear-gradient(160deg,#f0dccb,#dcb695 60%,#c19f78)}.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(28,26,23,.34),rgba(28,26,23,.52) 55%,rgba(28,26,23,.42))}.closing .inner{position:relative;z-index:2;text-align:center;color:#fff}.closing .lede,.closing p{color:var(--on-dark)}.closing h2{margin:0 auto;color:#fff;max-width:18ch}/* the heading was capped but the copy under it was not, so it ran the
   full 1240px inner while the heading sat at 18ch */
.closing .inner > p{max-width:54ch;margin-left:auto;margin-right:auto}.closing .inner > p.tiny{max-width:46ch}/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--on-dark);padding:clamp(3rem,5vw,4.5rem) 0 2rem}.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem}footer h5{font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-faint);margin:0 0 1rem}footer .tiny{color:var(--on-dark-soft)}footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:.55rem;font-size:.89rem}footer a{text-decoration:none}footer a:hover{color:var(--orange)}.crisis{background:rgba(255,255,255,.07);border-radius:var(--r);padding:1rem 1.3rem;font-size:.85rem;color:var(--on-dark-muted);margin:2.4rem 0 1.4rem}.crisis b{color:#fff;font-weight:600}.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(244,240,232,.18);padding-top:1.2rem;font-size:.75rem;color:var(--on-dark-faint)}@media (max-width:1000px){.panel,.tiers,.touches,.quotes,.split,.foot-grid{grid-template-columns:1fr}.bar nav{display:none}.quotecard{position:static;width:100%;margin-top:16px;box-shadow:none;border:1px solid var(--line)}
  }@media (max-width:560px){.touches,.ph--img{border:none;background-size:cover;background-position:center}.ph--img b{display:none}.ph--arch{border-radius:120px 120px var(--r) var(--r)}
}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}/* ---------- accessibility additions ---------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:.9rem 1.3rem;text-decoration:none;font-size:.82rem;font-weight:600}.skip:focus{left:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}/* ---------- language toggle (kept from the trilingual site) ---------- */
.lang-toggle{display:inline-flex;gap:.15rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.25rem;margin-right:.2rem}.lang-toggle a{text-decoration:none;font-size:.72rem;font-weight:600;padding:.4rem .7rem;border-radius:999px;color:var(--ink)}.lang-toggle a.active{background:var(--ink);color:var(--paper)}/* ---------- newsletter signup ---------- */
.signup-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem;max-width:520px}.signup-row input{flex:1;min-width:210px;border:1px solid var(--line);border-radius:999px;padding:.95rem 1.3rem;font:inherit;font-size:.92rem;background:#fff;color:var(--ink)}.form-note{margin-top:.9rem;font-size:.8rem;color:var(--ink-60);line-height:1.5;max-width:60ch}.form-note a{color:inherit}.form-note.is-ok{color:var(--olive);font-weight:600}.form-note.is-err{color:var(--error);font-weight:600}.hidden{display:none}/* ---------- header: mobile menu (v9 hid the nav with nothing to replace it) ---------- */
.bar{position:relative}.bar-end{margin-left:auto;display:flex;align-items:center;gap:.5rem}.menu-btn{display:none;width:42px;height:42px;border-radius:0;background:transparent;border:0;
  align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--ink);padding:0}@media (max-width:1000px){.menu-btn{display:inline-flex}.bar nav.open{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;top:70px;left:0;right:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.7rem;gap:.1rem;z-index:70;
    box-shadow:0 18px 40px rgba(28,26,23,.14)
  }.bar nav.open a{padding:.8rem 1rem;font-size:.95rem}
}@media (max-width:560px){.lang-toggle{display:none}}/* ============================================================
   Service-page components (v9 language)
   ============================================================ */

/* ---------- page hero ---------- */
.phero{padding:clamp(1.8rem,3.2vw,2.8rem) 0 clamp(1.4rem,2.4vw,2rem)}.phero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,5vw,4rem);line-height:1.02;
  letter-spacing:-.035em;font-variation-settings:"SOFT" 40,"WONK" 1;max-width:16em;text-wrap:balance}.phero h1 em{font-style:normal;color:var(--orange)}.phero .sub{margin-top:1.2rem;max-width:52ch;color:var(--ink-60);font-size:1.05rem;line-height:1.6}.phero .hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem;justify-content:flex-start}/* the heading starts level with the top of the photo; bottom-aligning pushed
   short copy far down the column and left the top of the page empty */
.phero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}@media (max-width:900px){.phero-split{grid-template-columns:1fr}}/* ---------- breadcrumb ---------- */
.crumb{font-size:.75rem;font-weight:500;color:var(--ink-60);margin-bottom:1.3rem}.crumb a{text-decoration:none;color:inherit}.crumb a:hover{color:var(--orange)}.crumb span{margin:0 .45em;opacity:.5}/* ---------- numbered steps ---------- */
.steps{list-style:none;margin:1.6rem 0 0;padding:0;counter-reset:step}.steps li{counter-increment:step;display:flex;gap:1.1rem;align-items:flex-start;padding:1.15rem 0;border-top:1px solid var(--line)}.steps li:first-child{border-top:none;padding-top:0}.steps li::before{content:counter(step);flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);
  color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600}.steps b{display:block;font-weight:600;font-size:1rem;letter-spacing:-.01em;margin-bottom:.15rem}.steps span{display:block;font-size:.88rem;color:var(--ink-60);line-height:1.55}.band--black .steps li{border-color:rgba(244,240,232,.22)}.band--black .steps li::before{background:var(--paper);color:var(--ink)}.band--black .steps span{color:var(--on-dark-muted)}.band--black .compare th,.band--black .compare td{border-color:rgba(244,240,232,.22)}.band--black .compare thead th{color:var(--on-dark-soft)}/* ---------- faq ---------- */
.faq{margin-top:1.8rem}.faq details{background:#fffcf6;border-radius:var(--r);padding:1.15rem 1.5rem;margin-bottom:.7rem}.faq summary{font-weight:600;font-size:1rem;cursor:pointer;letter-spacing:-.01em;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:flex-start}.faq summary::-webkit-details-marker{display:none}.faq details p{margin-top:.8rem;font-size:.92rem;color:var(--ink-60);line-height:1.65}.faq details p a{color:var(--orange-text);font-weight:600;text-decoration:none}/* ---------- enquiry form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.6rem}.form-grid .row-full{grid-column:1/-1}.form-grid label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:.45rem}.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);border-radius:14px;
  padding:.9rem 1rem;font:inherit;font-size:.92rem;background:#fff;color:var(--ink)}.form-grid textarea{min-height:120px;resize:vertical}@media (max-width:560px){.form-grid{grid-template-columns:1fr}}@media (max-width:900px){}/* ============================================================
   Navigation: grouped menus reaching every page
   ============================================================ */
.navitem{position:relative;display:flex}.navtop{
  background:none;border:none;cursor:pointer;font:inherit;color:var(--ink);
  padding:.62rem .95rem;border-radius:999px;font-size:.86rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.4em;white-space:nowrap
}.navtop:hover,.navitem.open .navtop{background:var(--cream)}.navtop .caret{width:8px;height:8px;border:solid currentColor;border-width:0 1.4px 1.4px 0;
  transform:rotate(45deg) translate(-1px,-2px);opacity:.55;transition:transform .15s}.navitem.open .navtop .caret{transform:rotate(-135deg) translate(-2px,-2px)}.megamenu{
  display:none;position:absolute;top:calc(100% + 12px);left:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 26px 64px rgba(28,26,23,.18);
  padding:1.5rem;z-index:90
}.navitem.open .megamenu{display:block}/* wide panels anchor to the bar, not the button, so they stay on screen */
.navitem--wide{position:static}.megamenu--wide{left:50%;transform:translateX(-50%);max-width:min(94vw,1010px)}@media (max-width:1000px){.navitem--wide{position:relative}.megamenu--wide{left:auto;transform:none;max-width:none}}.megacols{display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(var(--cols,1),minmax(190px,1fr))}.megacol h6{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);
  margin:0 0 .6rem;font-weight:600}.megacol a{display:block;padding:.42rem .55rem;border-radius:12px;text-decoration:none;
  font-size:.87rem;font-weight:500;color:var(--ink);line-height:1.3}.megacol a span{display:block;font-size:.73rem;color:var(--ink-60);font-weight:400;margin-top:.12rem;line-height:1.35}.megacol a:hover{background:var(--cream)}.megacol a[aria-current="page"]{background:var(--cream);color:var(--orange-text)}@media (max-width:1000px){.bar nav.open{max-height:78vh;overflow-y:auto}.navitem{width:100%;display:block}.navtop{width:100%;justify-content:space-between;padding:.8rem 1rem;font-size:.95rem}.megamenu{position:static;display:none;border:none;box-shadow:none;padding:.1rem .4rem .9rem;border-radius:0}.navitem.open .megamenu{display:block}.megacols{--cols:1!important;gap:1.1rem}.megacol a{padding:.5rem .6rem}
}/* ---------- language, inside the mobile menu (the toggle hides on phones) ---------- */
.navlang{display:none}@media (max-width:1000px){.navlang{display:block;border-top:1px solid var(--line);margin-top:.5rem;padding:.9rem 1rem .4rem}.navlang h6{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin:0 0 .5rem;font-weight:600}.navlang a{display:inline-block;padding:.45rem .9rem;margin:0 .3rem .3rem 0;border-radius:999px;
    background:var(--cream);text-decoration:none;font-size:.85rem;font-weight:500;color:var(--ink)}.navlang a[aria-current]{background:var(--ink);color:var(--paper)}
}/* ============================================================
   Interior pages (guides, city pages, policy pages)
   Their markup is unchanged; these rules restyle it into v9.
   ============================================================ */
.inner--read{max-width:1240px}.inner--read > *{max-width:840px}.band--paper{background:var(--paper)}.band--quiet{padding-top:0}.band--quiet .prose{font-size:.9rem}.phero .inner--read{padding-top:.4rem}.prose > *:first-child{margin-top:0}.prose > *:last-child{margin-bottom:0}.prose > p,.prose li{color:var(--ink-60);line-height:1.7}.prose > p{margin:0 0 1.05rem;font-size:1.02rem}.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem}.prose li{margin-bottom:.5rem}.prose a{color:var(--orange-text);text-decoration:none;font-weight:500}.prose a:hover{text-decoration:underline}.prose h1,.phero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.04;
  letter-spacing:-.035em;font-variation-settings:"SOFT" 40,"WONK" 1;margin:0 0 1.1rem;text-wrap:balance}.prose h1 em,.phero h1 em{font-style:normal;color:var(--orange)}.prose h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.1;
  letter-spacing:-.03em;font-variation-settings:"SOFT" 40,"WONK" 1;margin:2.6rem 0 .9rem;color:var(--ink)}.prose h2 em{font-style:normal;color:var(--orange)}.prose h3{font-size:1.08rem;font-weight:600;letter-spacing:-.01em;margin:1.8rem 0 .5rem}.prose strong{font-weight:600;color:var(--ink)}.cards .card{background:#fffcf6;border:none;border-radius:var(--r);padding:1.4rem 1.5rem}.cards .card h3{margin:0 0 .5rem;font-size:1.02rem;font-weight:600}.cards .card h3 a{color:var(--ink);text-decoration:none;font-weight:600}.cards .card h3 a:hover{color:var(--orange)}.cards .card p{margin:0;color:var(--ink-60);font-size:.92rem;line-height:1.6}.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:1.8rem 0}/* feature grids break the reading measure so 3 or 4 items sit on one line */
.prose > .pillars,.prose > .cards,.prose > .mp-week{max-width:none}.pillar{background:var(--cream);border:none;border-radius:18px;padding:1.3rem 1.4rem}.pillar b{display:block;font-weight:600;color:var(--ink);margin-bottom:.25rem;font-size:.98rem}.pillar span,.pillar p{font-size:.88rem;color:var(--ink-60);line-height:1.55}.answer{background:transparent;border:none;border-left:3px solid var(--orange);border-radius:0;
  padding:.1rem 0 .1rem 1.5rem;margin:.4rem 0 2.4rem}.answer p{font-size:1.2rem;line-height:1.55;color:var(--ink);letter-spacing:-.011em}.answer p:last-child{margin-bottom:0}.answer strong{font-weight:600;color:var(--ink)}@media (max-width:560px){.answer{padding-left:1.1rem}.answer p{font-size:1.08rem}
}.answer p{color:var(--ink);margin-bottom:.6rem}.answer p:last-child{margin-bottom:0}.answer strong{color:var(--ink)}.badge{display:inline-flex;align-items:center;background:var(--cream);color:var(--ink);border-radius:999px;
  padding:.45em 1em;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.byline{color:var(--ink-60);font-size:.85rem;margin-bottom:.3rem}.disclaimer{color:var(--ink-60);font-size:.85rem;margin-bottom:1.6rem}.sources{font-size:.85rem;color:var(--ink-60);border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1.2rem}.sources a{color:var(--orange-text);word-break:break-word}.appshow{display:grid;grid-template-columns:270px 1fr;gap:2.6rem;align-items:center;
  background:var(--ink);color:var(--on-dark);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);margin:2.2rem 0}.prose > .appshow{max-width:none}.appshow img{width:100%;height:auto;aspect-ratio:520/1127;object-fit:cover;object-position:top;
  border-radius:26px;border:6px solid #000;box-shadow:0 22px 50px rgba(0,0,0,.45)}.appshow h2{margin:.9rem 0 .7rem!important;color:#fff}.appshow p{color:var(--on-dark-muted)}.appshow ul{list-style:none;padding:0;margin:1.2rem 0 0}.appshow li{padding:.5rem 0 .5rem 1.7rem;position:relative;color:var(--on-dark-muted);line-height:1.6}.appshow li strong,.appshow li b{color:#fff;font-weight:600}.appshow li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--orange)}.appshow .badge{background:rgba(244,240,232,.14);color:var(--on-dark);margin-bottom:.3rem}.appshow a:not(.btn):not(.btn-primary){color:var(--peach)}@media (max-width:760px){.appshow{grid-template-columns:1fr}}.care{background:var(--pink);border:none;border-radius:18px;padding:1.3rem 1.5rem;margin:1.8rem 0}.local-list,.mp-meal{background:var(--cream);border:none;border-radius:18px;padding:1.3rem 1.5rem;margin:1.8rem 0}.cost-src,.pm-where{background:transparent;padding:0;margin:1rem 0;font-size:.88rem;color:var(--ink-60)}.care p,.local-list p,.mp-meal p{color:var(--ink)}.care ul,.local-list ul{margin-bottom:.3rem}.cost-src,.pm-where{background:var(--cream);font-size:.88rem}.cta{margin:2rem 0}/* ---------- aliases for variables used inline in older page markup ---------- */
:root{
  /* Text on dark grounds. Mirrors the --ink / --ink-60 pair that already
     governs text on light grounds. Before this there were 15 one-off
     rgba values doing this job, tuned band by band. */
  --on-dark:#f4f0e8;
  --on-dark-muted:rgba(244,240,232,.78);
  --on-dark-soft:rgba(244,240,232,.65);
  --on-dark-faint:rgba(244,240,232,.55);
  --error:#c0491b;
  --ink-soft:var(--ink-60);
  --orange-deep:#d65f2a;
  --olive-deep:#3a5420;
  --white:#fff;
  --cream-light:var(--paper);
  --display:var(--serif);
  --body:var(--sans);
}/* ============================================================
   Spanish / French homepages
   These keep their existing translated content structure; these
   rules render it in the v9 language until they are rebuilt as bands.
   ============================================================ */
.hero{padding:clamp(2.6rem,5vw,4.4rem) 0 0}.hero .wrap,.signup .wrap{max-width:1240px;margin:0 auto;padding:0 28px}@media (max-width:900px){}.eyebrow{display:inline-block;font-size:.64rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:1rem}.hero h1,#more-features h2,#faq h2{
  font-family:var(--serif);font-weight:500;letter-spacing:-.035em;line-height:1.05;
  font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--ink)}.hero h1{font-size:clamp(2.3rem,5vw,4rem);margin-bottom:1.2rem;text-wrap:balance}section.signup{padding:clamp(3rem,5.5vw,5rem) 0}section.signup{background:var(--peach)}@media (max-width:900px){}#more-features h2,#faq h2{font-size:clamp(1.7rem,3vw,2.3rem);text-align:left;margin-bottom:1.6rem}/* ---------- ES/FR homepage sections once they sit inside bands ---------- */
.band .features,.band .howitworks,.band .market,.band .community,.band .philosophy,.band .practitioners,.band .signup,.band .problem{padding:0;background:transparent}section.signup{padding:0;background:transparent}.band--black h2,.band--black h3,.band--black p,.band--black li,.band--black .section-intro,.band--black .feature-card h3,.band--black .feature-card p{color:var(--paper)}.band--black .feature-card{background:rgba(250,244,236,.07)}.band--black .section-eyebrow,.band--black .eyebrow{color:var(--on-dark-soft)}.band--sage .market-stat,.band--peach .problem-item{background:rgba(255,255,255,.55)}.band--pink .community-box{max-width:56ch}.band .inner{max-width:1240px;margin:0 auto;padding:0 28px}.band--cream .signup-box,.band .community-box,.band .cta-box{margin:0 auto}.appshow img{height:auto}/* ---------- data tables inside prose (cost comparisons) ---------- */
.cost-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0;
  border-radius:18px;background:#fffcf6;padding:.4rem}.cost-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.prose table,.cost-scroll table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}.prose table th,.prose table td,.cost-scroll th,.cost-scroll td{
  text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}.prose table thead th,.cost-scroll thead th{font-size:.63rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60)}.prose table tr:last-child td,.cost-scroll tr:last-child td{border-bottom:none}.prose table caption,.cost-scroll caption{caption-side:top;text-align:left;font-size:.8rem;
  color:var(--ink-60);padding:.7rem .9rem 1rem;line-height:1.55}/* ---------- typography inside feature bands (outside .prose) ---------- */
.band .appshow h2,.band .care h2,.band .local-list h2,.band .mp-meal h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2.5vw,1.95rem);line-height:1.1;
  letter-spacing:-.03em;font-variation-settings:"SOFT" 40,"WONK" 1;margin:1.6rem 0 .7rem;color:var(--ink)}.band .appshow h2:first-of-type{margin-top:.9rem}.band .appshow p,.band .care p,.band .local-list p,.band .mp-meal p{
  margin:0 0 1rem;color:var(--ink-60);line-height:1.7}.band .appshow .badge{margin-bottom:.4rem}.band .care ul,.band .local-list ul,.band .mp-meal ul{margin:0 0 1rem 1.3rem}.band .care li,.band .local-list li,.band .mp-meal li{margin-bottom:.5rem;color:var(--ink-60);line-height:1.65}.band .care h3,.band .local-list h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;
  line-height:1.2;letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1;margin:1.2rem 0 .6rem}.band .care > h3:first-child,.band .local-list > h3:first-child{margin-top:0}.band .appshow a:not(.btn):not(.btn-primary),.band .care a:not(.btn):not(.btn-primary),.band .local-list a:not(.btn):not(.btn-primary){color:var(--orange-text);font-weight:500;text-decoration:none}.band .appshow a:not(.btn):not(.btn-primary):hover,.band .care a:not(.btn):not(.btn-primary):hover,.band .local-list a:not(.btn):not(.btn-primary):hover{text-decoration:underline}/* ---------- guides hub cards ---------- */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;margin-top:1.8rem}.gcards--2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));max-width:840px}.gcard{display:flex;flex-direction:column;background:#fffcf6;border-radius:var(--r);padding:1.5rem 1.6rem;
  text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}.gcard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(28,26,23,.10)}.gcard h3{font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.2;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40,"WONK" 1;margin:0 0 .5rem;color:var(--ink)}.gcard p{margin:0 0 1.1rem;font-size:.9rem;color:var(--ink-60);line-height:1.6;flex:1}.gcard-go{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-text)}.band--sage .gcard,.band--warm .gcard{background:rgba(255,255,255,.62)}.band--paper .gcard{background:var(--cream)}.band .gcards + *{margin-top:1.6rem}/* ---------- guide card meta row ---------- */
.gcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin:0 0 .9rem}.gcard-meta span{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}.gcard-meta .tag{background:var(--peach);color:var(--ink);border-radius:999px;padding:.3em .8em;letter-spacing:.08em}.gcard-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line);padding-top:.85rem;margin-top:auto}.band--sage .gcard-foot,.band--warm .gcard-foot{border-color:rgba(28,26,23,.12)}/* ---------- FAQ accordions inside prose ---------- */
.prose details{background:#fffcf6;border-radius:18px;padding:1.05rem 1.4rem;margin:0 0 .7rem}.prose details + details{margin-top:0}.prose summary{font-weight:600;font-size:1rem;cursor:pointer;letter-spacing:-.01em;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;color:var(--ink)}.prose summary::-webkit-details-marker{display:none}.prose details p{margin:.7rem 0 0;font-size:.93rem;color:var(--ink-60);line-height:1.65}.prose details p a{color:var(--orange-text);font-weight:500;text-decoration:none}.prose h2 + details{margin-top:1.4rem}/* ============================================================
   Page-specific components the migration left unstyled
   ============================================================ */

/* ---------- how-it-works: numbered steps with a screenshot ---------- */

/* ---------- meal plan: the week ---------- */
.mp-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:1.8rem 0}.mp-day{background:#fffcf6;border-radius:var(--r);padding:1.2rem 1.3rem}.mp-day h3{margin:0 0 .8rem;font-size:.98rem;font-weight:600;letter-spacing:-.01em}.mp-meal{display:flex;gap:.7rem;align-items:center;padding:.5rem 0;border-top:1px solid var(--line)}.mp-day .mp-meal:first-of-type{border-top:none;padding-top:0}.mp-meal img{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none}.mp-meal span{display:block;font-size:.88rem;line-height:1.35}.mp-meal small{display:block;font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:.15rem}.mp-grocery{background:var(--sage);border-radius:18px;padding:1.2rem 1.4rem;margin:1.8rem 0;
  font-size:.92rem;line-height:1.7;color:var(--ink)}.mp-grocery strong{font-weight:600}/* ---------- privacy: the measurement opt-out ---------- */
.measure-box{background:var(--cream);border-radius:18px;padding:1.3rem 1.5rem;margin:1.8rem 0;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}.measure-box p{margin:0;font-size:.92rem;color:var(--ink-60)}/* ---------- cross-links under an article ---------- */
.related{font-size:.9rem;color:var(--ink-60);margin:1.6rem 0 0}.related a{color:var(--orange-text);font-weight:500;text-decoration:none}.related a:hover{text-decoration:underline}/* buttons keep their own label colour even inside prose, where links are orange.
   Variants come after the base rule so light and outline pills stay dark. */

@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}@media (max-width:520px){.pillars{grid-template-columns:1fr}}/* ---------- body copy weight: 400 Montserrat reads too light at these sizes ---------- */
body{font-weight:450}.prose > p,.prose li,.prose details p,.faq details p,.lede,.sub,.tiny,.gcard p,.card p,.cards .card p,.tier .desc,.tier li,.rows span,.steps span,.pillar span,.pillar p,.statlet span,.form-note,.byline,.disclaimer,.sources,.crumb,.related,.appshow li,.band .appshow p,.band .care p,.band .local-list p{font-weight:500}.prose strong,.prose b,.answer strong{font-weight:600}/* ---------- about page: Daniela beside her introduction ---------- */
.about-daniela{display:grid;grid-template-columns:340px 1fr;gap:clamp(1.6rem,3.4vw,3rem);
  align-items:start;margin:2rem 0 2.4rem}.prose > .about-daniela{max-width:none}.about-daniela .ph{min-height:470px}.about-daniela h2{margin-top:0}.about-daniela > div > *:last-child{margin-bottom:0}@media (max-width:700px){.about-daniela{grid-template-columns:1fr}.about-daniela .ph{min-height:320px;max-width:300px}
}/* ---------- inline call-to-action block ---------- */
.cta{margin:2.6rem 0}.cta h2{margin-top:0!important;margin-bottom:.6rem!important}.cta p{margin-bottom:1.6rem}/* ---------- comparison pillars: larger headings, a tint each ---------- */
.pillar b,.pillar h3{display:block;font-family:var(--serif);font-weight:500;font-size:1.22rem;line-height:1.2;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1;margin:0 0 .55rem;color:var(--ink)}.pillars .pillar:nth-child(3n+1){background:var(--peach)}.pillars .pillar:nth-child(3n+2){background:var(--sage)}.pillars .pillar:nth-child(3n+3){background:var(--pink)}.pillars .pillar:nth-child(3n+4){background:var(--cream)}.pillar span,.pillar p{color:var(--ink)}/* the app showcase is a dark card wherever it sits, including inside a band */
.band .appshow h2,.prose .appshow h2{color:#fff}.band .appshow p,.prose .appshow p{color:var(--on-dark-muted)}.band .appshow li,.prose .appshow li{color:var(--on-dark-muted)}.band .appshow a:not(.btn):not(.btn-primary),.prose .appshow a:not(.btn):not(.btn-primary){color:var(--peach)}.band .appshow strong,.prose .appshow strong{color:#fff}.pillar p{margin:0;line-height:1.6}.pillar p + p{margin-top:.6rem}/* a page whose first band carries the h1 needs the hero's breathing room */
main > .crumb + .band{padding-top:clamp(.6rem,1.4vw,1.2rem)}.band h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.05;
  letter-spacing:-.035em;font-variation-settings:"SOFT" 40,"WONK" 1;margin:0}.band h1 em{font-style:normal;color:var(--orange)}/* ---------- header: contact button + tighter nav so five items fit ---------- */

@media (max-width:1180px){
  .navtop,.bar nav > a{padding:.5rem .62rem;font-size:.8rem}
  .lang-toggle a{padding:.35rem .55rem}
}@media (max-width:1000px){/* it lives in the open menu instead */
  .bar nav.open > a{padding:.8rem 1rem;font-size:.95rem}
}@media (max-width:1000px){}.allergen-note .eyebrow{margin-bottom:.5rem;color:var(--ink-60)}/* the allergen band reads on off-white; its cards take a warm fill so they still separate */
#allergens{background:var(--paper)}#recipes .statcard,#recipes .quotecard{background:rgba(255,255,255,.62)}/* the signup band sits on green; its field needs to stay legible there */
#join .signup-row input{background:#fff;border-color:rgba(28,26,23,.18)}#join .form-note{color:var(--ink)}#join .form-note a{color:var(--ink)}/* The hero photograph is 1316x924. At full bleed, cover fits its width exactly,
   so the pale right edge of the shot lands on the page edge. Scale past cover on
   wide screens to gain horizontal slack, then pull the framing left off that edge. */
.hero-photo .ph{background-repeat:no-repeat}@media (min-width:1000px){.hero-photo .ph{background-size:122% auto;background-position:38% 54%}
}@media (min-width:1700px){.hero-photo .ph{background-size:128% auto;background-position:36% 54%}
}/* ============================================================
   BUTTONS — three roles, one base. Nothing else.
     .btn              primary   solid orange   the conversion action
     .btn.btn--dark    secondary solid ink      supporting action
     .btn.btn--out     quiet     outline        tertiary / dismissive
   Modifiers: .btn--sm (compact)  .btn--block (full width)
   On dark surfaces the secondary and quiet roles invert automatically —
   never add a variant for that.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border:1px solid transparent;border-radius:999px;cursor:pointer;text-decoration:none;
  padding:.95rem 1.6rem;font:inherit;font-size:.82rem;font-weight:600;letter-spacing:.01em;
  line-height:1;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
  background:var(--orange);color:var(--ink);
}/* Hover is a quiet shift, not a lift. The old treatment stacked three
   attention-grabbing things at once: a 1px rise, a coloured drop shadow, and
   on the outline button a jump to pure white, a surface used nowhere else on
   a paper page. */
.btn:hover{background:#f4885a;color:var(--ink);text-decoration:none}.btn--dark{background:var(--ink);color:var(--paper);border-color:transparent}/* Neither lighter nor darker: the ink button shifts hue into the brand's own
   deep forest on hover. A lightness change was rejected in both directions,
   and green keeps it away from the orange-on-black pairing entirely. */
.btn--dark:hover{background:#2f5c36;color:var(--paper)}.btn--out{background:transparent;color:var(--ink);border-color:var(--line)}/* the outline button gains definition rather than a fill: no surface change,
   so it cannot pop off the page */
.btn--out:hover{background:transparent;color:var(--ink);border-color:rgba(28,26,23,.42)}.btn--sm{padding:.72rem 1.15rem;font-size:.78rem}/* dark surfaces: secondary becomes light, quiet gets a light hairline */
.band--black .btn--dark,.tier--dark .btn--dark,.closing .btn--dark,.appshow .btn--dark,footer .btn--dark{background:var(--paper);color:var(--ink)}.band--black .btn--dark:hover,.tier--dark .btn--dark:hover,.closing .btn--dark:hover,.appshow .btn--dark:hover,footer .btn--dark:hover{background:#dfe8d3;color:var(--ink)}.band--black .btn--out,.tier--dark .btn--out,.closing .btn--out,.appshow .btn--out,footer .btn--out{color:var(--on-dark);border-color:rgba(244,240,232,.42)}.band--black .btn--out:hover,.tier--dark .btn--out:hover,.closing .btn--out:hover,.appshow .btn--out:hover,footer .btn--out:hover{background:rgba(244,240,232,.12);color:#fff}/* buttons keep their own label colour inside prose, where links are orange */
.prose a.btn,.band a.btn,article a.btn{color:var(--ink)}.prose a.btn--dark,.band a.btn--dark{color:var(--paper)}.prose a.btn--out,.band a.btn--out{color:var(--ink)}.band--black a.btn--dark,.tier--dark a.btn--dark,.closing a.btn--dark,.appshow a.btn--dark{color:var(--ink)}.band--black a.btn--out,.tier--dark a.btn--out,.closing a.btn--out,.appshow a.btn--out{color:var(--on-dark)}.prose a.btn:hover,.band a.btn:hover{text-decoration:none}.cta{margin:2.6rem 0}/* actions sit at the foot of their card, so they align across a row */
.card{display:flex;flex-direction:column}.card .btn,.card .link,.stack-card .btn{margin-top:auto}.card .link{align-self:flex-start}.card .rows{flex:0 0 auto}/* header on small screens: the bar keeps the logo, the app button and the menu.
   Contact rides inside the open menu, so it is dropped from the bar rather than
   pushing the row past the viewport. */
@media (max-width:760px){
  .bar{padding:0 18px;gap:.7rem}
  .bar-end{gap:.4rem;min-width:0}
  .btn--contact{display:none}
  .bar-end .btn--dark{padding:.72rem 1rem;font-size:.78rem}
}@media (max-width:400px){.bar .brand img{height:38px}.bar-end .btn--dark{padding:.66rem .8rem;font-size:.74rem}
}/* ---------- MOBILE SPACING PASS ----------
   Band rhythm used to come from inline clamps on five homepage sections whose
   minimums differed (3.2 / 3.4 / 3.6rem), so at 390px the page stepped through
   42, 51, 54, 58 and 64px of band padding. Desktop values are preserved here;
   mobile collapses to a single figure. */
#recipes,#about,#standard{padding:clamp(2.6rem,6vw,5.6rem) 0}#join{padding:clamp(2.6rem,5vw,4.6rem) 0}#tiers{padding-bottom:clamp(2.6rem,7vw,6.5rem)}@media (max-width:700px){/* one rhythm for every band, whatever it carries */
  .band{padding-top:3rem;padding-bottom:3rem}#recipes,#about,#standard,#join,#tiers{padding-top:3rem;padding-bottom:3rem}/* stage pills wrapped into ragged rows of unequal width; auto-fit gives
     them one width and a shared left edge at any size (2 up at 375, 4 at 700) */
  .rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:8px;align-items:stretch}.rail > *{width:auto;justify-content:flex-start;text-align:left}/* header actions were 35 and 38px tall, under the 44px touch minimum */
  header .btn,.lang-toggle,.menu-btn,.bar .brand{min-height:44px}.bar .brand{display:flex;align-items:center}.menu-btn{min-width:44px}.lang-toggle{align-items:center}
}/* The two hero buttons measure 201 and 117px. Below ~430px they no longer fit
   on one line and wrapped centred and ragged, so stack them at one width.
   Above that they sit side by side as designed. */
@media (max-width:430px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:.75rem;margin-top:1.6rem}
  .hero-cta .btn{width:100%}
}/* ---------- stacked library section: alternate text and photo ----------
   Stacked, .qleft and .qright put both photos back to back and both text
   blocks at the ends. display:contents lifts the four blocks into one column
   so they can alternate: stat, stew, quote, mothers. The 24px grid gap
   replaces the quote card's own top margin. */
@media (max-width:1000px){
  .quotes{gap:24px}
  .qleft,.qright{display:contents}
  .qleft .statcard{order:1}
  .qleft .ph{order:2}
  .qright .quotecard{order:3;margin-top:0}
  .qright .ph{order:4}
}/* ---------- MOBILE NAV DRAWER ----------
   The drawer mixed two row types: plain <a> links at 15px/50px tall starting
   at x=28, and dropdown <button>s at 13px/36px starting at x=22. Same menu,
   three different measurements. One rule now governs every top-level row, and
   the panel meets the header instead of floating 26px below it. */
@media (max-width:1000px){
  .bar nav.open{
    top:100%;left:0;right:0;padding:.5rem .5rem .7rem;gap:2px;
    border-radius:0 0 var(--r) var(--r);border-top:none;
    box-shadow:0 18px 40px rgba(28,26,23,.14)
  }

  /* every top-level row: one font, one height, one left edge */
  .bar nav.open > a,
  .bar nav.open .navtop{
    display:flex;align-items:center;width:100%;box-sizing:border-box;
    min-height:48px;padding:.5rem 1rem;
    font-size:.95rem;font-weight:500;line-height:1.2;
    border-radius:12px;text-align:left;color:var(--ink)
  }
  .bar nav.open > a{justify-content:flex-start}
  .bar nav.open .navtop{justify-content:space-between}

  /* submenu links sit one step in from the parent that opened them */
  .bar nav.open .megamenu{padding:.1rem 0 .5rem}
  .bar nav.open .megacol h6{padding-left:1rem;margin-bottom:.25rem}
  .bar nav.open .megacol a{
    display:flex;align-items:center;min-height:44px;
    padding:.45rem 1rem .45rem 1.75rem;border-radius:12px
  }
  .bar nav.open .megacol a span{margin-top:0}

  /* the language block shares the same left edge */
  .navlang{padding:.9rem 1rem .3rem;margin-top:.4rem}
  .navlang a{min-height:40px;display:inline-flex;align-items:center}
}/* the app band's CTA sat flush against the last feature row (margin-top:0),
   while the list itself got 37px of air above it */
.app-left .feats + .btn{margin-top:2rem}/* ---------- corner doodles on the app band ----------
   Solid shapes, not line art: a tone barely lifted off the band so they read
   as texture rather than illustration. Cropped by the band's own corners. */
/* .has-doodles is the reusable hook; #app kept so the homepage needs no edit */
#app,.has-doodles{position:relative;overflow:hidden}#app > .inner,.has-doodles > .inner{position:relative;z-index:1}.doodle{position:absolute;width:clamp(150px,17vw,260px);height:auto;
  fill:rgba(255,255,255,.05);stroke:none;pointer-events:none;z-index:0}.doodle--tr{top:-6%;right:-3%}.doodle--bl{bottom:-9%;left:-6%;width:clamp(210px,25vw,380px)}@media (max-width:860px){.doodle{width:130px}.doodle--tr{top:-3%;right:-8%}.doodle--bl{bottom:-5%;left:-10%;width:190px}}/* the dark tier card carries the same corner shape as the app band.
   Done as a pseudo-element so all six cards that use .tier--dark stay in
   sync without repeating markup. Absolutely positioned, so it stays out of
   the card's flex flow. */
.tier--dark{position:relative;overflow:hidden}.tier--dark > *{position:relative;z-index:1}.tier--dark::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:200px;height:200px;right:-48px;bottom:-52px;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 0c9 58 42 91 100 100-58 9-91 42-100 100-9-58-42-91-100-100C58 91 91 58 100 0z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
}@media (max-width:860px){.tier--dark::after{width:150px;height:150px;right:-38px;bottom:-40px}}/* the app pitch's CTA now lives inside the dark card rather than in its own
   section below it, so it needs its own separation from the feature list */
.appshow .appshow-cta{margin-top:1.7rem;align-self:flex-start}.appshow ul + .appshow-cta{display:inline-flex}/* ---------- the app pitch card carries the homepage band's corner shapes ----------
   CSS rather than markup, so all 63 pages with an .appshow get them and stay in
   sync. Absolutely positioned so they stay out of the card's grid flow. */
.appshow{position:relative;overflow:hidden}.appshow > *{position:relative;z-index:1}.appshow::before,.appshow::after{content:"";position:absolute;z-index:0;pointer-events:none;
  opacity:.05;background-repeat:no-repeat;background-position:center;background-size:contain}.appshow::after{width:clamp(120px,15vw,230px);aspect-ratio:1;top:-7%;right:-3%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 0c9 58 42 91 100 100-58 9-91 42-100 100-9-58-42-91-100-100C58 91 91 58 100 0z' fill='%23ffffff'/%3E%3C/svg%3E")}.appshow::before{width:clamp(150px,20vw,300px);aspect-ratio:1;bottom:-10%;left:-6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 2 L118.2 62.2 L170.4 43.9 L145.8 89.5 L193.6 121.4 L131.3 124.9 L137.3 177.5 L100 145 L57 189.2 L66.4 126.8 L14.2 119.6 L55.2 89.8 L27.3 42 L82.2 63.1 Z' fill='%23ffffff'/%3E%3C/svg%3E")}@media (max-width:760px){.appshow::after{width:110px;top:-4%;right:-7%}.appshow::before{width:140px;bottom:-5%;left:-9%}
}/* ---------- guide header to first paragraph ----------
   .phero's bottom padding and the following band's top padding were stacking
   into 121px of dead space between the byline and the opening line, against
   18px from h1 to byline. Only collapse it where the band shares the phero's
   paper background; a coloured band needs its own breathing room. */
.phero + .band--paper{padding-top:0}/* One meaning per component: the pill is always a stage. Read time is not a
   category, it is a cost of clicking, so it sits beside the link. */
.gcard-time{font-size:.72rem;font-weight:500;letter-spacing:.02em;color:var(--ink-60);
  text-transform:none;white-space:nowrap;order:2}.gcard-go{order:1}/* ---------- FAQ panels open with motion ----------
   Animating ::details-content height was tried and reverted: the [open] rule
   would not apply in Chrome here, which left panels permanently collapsed.
   Animating the revealed content instead cannot break the control's state. */
.faq details[open] > :not(summary),.prose details[open] > :not(summary){
  animation:faqReveal .34s cubic-bezier(.22,.61,.36,1) both;
}@keyframes faqReveal{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}@media (prefers-reduced-motion:reduce){.faq details[open] > :not(summary),.prose details[open] > :not(summary){animation:none}
}/* the marker morphs from + to - instead of swapping glyphs, which cannot animate */
/* The marker swaps glyph rather than morphing a drawn shape. A background-size
   morph is the nicer effect, but Chrome here does not re-style a pseudo-element
   when the details' open attribute changes -- the rule only lands if the element
   is re-inserted. A content swap does invalidate, so it is what actually works.
   U+2212 is the real minus sign, not a hyphen. */
.faq summary::after,.prose summary::after{
  content:'+';flex:none;color:var(--ink);
  font-size:1.5rem;line-height:.9;font-weight:400;
  display:inline-block;transform:rotate(0deg);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}/* the content swap forces the pseudo-element to re-style, so the transform in
   this same rule lands too -- which is why the roll works here and the earlier
   background-size version did not */
.faq details[open] summary::after,.prose details[open] summary::after{
  content:'\2212';transform:rotate(180deg);
}@media (prefers-reduced-motion:reduce){.faq summary::after,.prose summary::after{transition:none}
}.faq summary,.prose summary{transition:color .2s}@media (prefers-reduced-motion:reduce){.faq summary::after,.prose summary::after{transition:none}
}/* Real-element marker (injected by pm.js). Because it is a real element its
   styles re-resolve when [open] flips, so it can both morph and roll. */
.faq summary.has-mark::after,.prose summary.has-mark::after{display:none}.faq-mark{
  flex:none;width:20px;height:20px;align-self:center;
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:20px 2.2px,2.2px 20px;
  transform:rotate(0deg);
  transition:background-size .34s cubic-bezier(.22,.61,.36,1),
             transform .34s cubic-bezier(.22,.61,.36,1);
}.faq-mark.is-open{
  background-size:20px 2.2px,2.2px 0;
  transform:rotate(180deg);
}@media (prefers-reduced-motion:reduce){.faq-mark{transition:none}}/* The peach band under the hero is retired. Two consequences to absorb:
   a paper band following another paper band would double its seam padding,
   and the translucent statlet card, which read as peach on peach, needs a
   real surface to stay visible on paper. */
.band--paper + .band--paper{padding-top:0}.band--paper .statlet{background:#fffcf6}/* Three steps across the full width, once the photo beside them was cut.
   Each column carries its own rule, rather than the stacked list's single
   divider between consecutive rows. */
.steps--row{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(1.6rem,3vw,2.8rem);
  margin-top:1.8rem;max-width:none}.steps--row li{border-top:1px solid var(--line);padding:1.3rem 0 0;align-items:flex-start}.steps--row li:first-child{border-top:1px solid var(--line);padding-top:1.3rem}@media (max-width:820px){.steps--row{grid-template-columns:1fr;gap:0}.steps--row li{padding:1.15rem 0}.steps--row li:first-child{border-top:none;padding-top:0}
}/* ---------- app page: product screenshots in a phone ----------
   A real device frame: bezel, Dynamic Island, side buttons. The screen carries
   a status-bar strip in the app's own background colour so the island has
   somewhere to sit without covering the first line of the capture. */
.app-phone{margin:0;display:flex;justify-content:center;width:100%}/* iPhone frame, built to the supplied SVG's proportions (1239x2616).
   Percentages are derived from it directly, so it scales exactly.
   Padding % resolves against width on all four sides, which is what
   gives the even 18-unit bezel. */
.app-phone-body{position:relative;width:100%;max-width:300px;
  aspect-ratio:1239/2616;background:#3C3A38;
  border-radius:15.98% / 7.569%;
  padding:1.4528%;
  box-shadow:0 30px 70px rgba(28,26,23,.30)}.app-phone-screen{position:relative;width:100%;height:100%;background:#fff;
  border-radius:15.46% / 7.209%;overflow:hidden}/* Full-height captures (900x1951, the frame's own aspect) fill the screen.
   This is the default because it is what a real screenshot looks like. */
.app-phone-screen img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;display:block}/* app-recipe-card was cropped from a taller capture, so it is short and wide.
   It alone needs a faked status area for the island to sit in. */
.app-phone-screen--inset::before{content:"";position:absolute;inset:0 0 auto 0;
  height:7.75%;background:#dfeadc;z-index:1}.app-phone-screen--inset img{top:7.75%;bottom:auto;height:auto;object-fit:contain}/* The onboarding capture starts its content at 3.1%, inside the island zone.
   Nudge it clear; it has 5% of empty tail at the bottom to give back. */
.app-phone-screen--pad{background:#faf5ef}.app-phone-screen--pad img{top:4%;height:96%}/* home indicator, so the safe area below the content reads as a phone */
.app-phone-screen::after{content:"";position:absolute;z-index:2;
  left:50%;transform:translateX(-50%);bottom:1.1%;
  width:32%;height:.5%;min-height:3px;border-radius:99px;background:rgba(0,0,0,.26)}/* dynamic island: 366x102 at (438,90) */
.app-phone-island{position:absolute;z-index:2;
  left:34.9127%;top:2.7907%;width:30.4239%;aspect-ratio:366/102;
  background:#000;border-radius:999px}/* camera: r27 at (753,141), i.e. inside the island */
.app-phone-cam{position:absolute;left:78.69%;top:50%;transform:translateY(-50%);
  width:14.75%;aspect-ratio:1;border-radius:50%;background:#3C3A38}.band--black .app-phone-body{box-shadow:0 30px 70px rgba(0,0,0,.5)}/* the coach's suggested questions, as they appear in the app */
.pills--dark li{background:rgba(244,240,232,.12);color:var(--on-dark);border-color:transparent}@media (max-width:900px){/* the phone leads in source order on the coach band; put the words first */
  .band--black .inner.split{display:flex;flex-direction:column}.band--black .inner.split .app-phone{order:2}.band--black .inner.split > div{order:1}
}/* ---------- app page hero on a food photograph ----------
   The photo carries the right-hand side behind the phone; a paper wash runs
   left to right so the heading and body sit on near-solid ground rather than
   on the image. Text colour is unchanged, so contrast is the paper figure. */
.phero--photo{position:relative;isolation:isolate;overflow:hidden}.phero--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(100deg,var(--paper) 0%,var(--paper) 30%,
      rgba(250,244,236,.90) 48%,rgba(250,244,236,.55) 68%,rgba(250,244,236,.30) 100%),
    url(/images/photo-hero-spread.jpg?v=11da0304f7);
  background-size:auto,cover;
  background-position:center,center 58%;
  background-repeat:no-repeat,no-repeat;
}@media (max-width:900px){/* stacked, the photo would sit under the copy: keep the wash almost solid */
  .phero--photo::before{
    background-image:linear-gradient(180deg,var(--paper) 0%,rgba(250,244,236,.94) 55%,
        rgba(250,244,236,.72) 100%),url(/images/photo-hero-spread.jpg?v=11da0304f7);
    background-position:center,center 70%;
  }
}/* ---------- app page: the two sections that used to be twins ----------
   Both were heading + lede + rows of white pills, one after the other. Now the
   first is an icon grid echoing the app's own six circles, and the second is
   quiet running type with a pulled quote, so they read as different things. */
.dimgrid{list-style:none;margin:1.9rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}.dimgrid li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}.dimdot{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center}.dimdot svg{width:29px;height:29px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}.dimgrid b{font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.25}.dimfoot{margin:2rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink);max-width:60ch}@media (max-width:820px){.dimgrid{grid-template-columns:repeat(3,1fr);gap:1.4rem}}@media (max-width:420px){.dimgrid{grid-template-columns:repeat(2,1fr)}}/* #faq used to carry its own 28px gutter from a layout it no longer lives in.
   Every #faq is now a band with an .inner, so that padding doubled the gutter
   and made the FAQ narrower than everything above it. The band handles it. */

/* The FAQ list is rows, not prose, so the 840px reading measure from
   .inner--read made it stop short of the page on desktop. The rows run the
   full column; the answers keep a readable measure once open. */
#faq .faq{max-width:none}#faq > .inner > h2{max-width:none}.faq details p{max-width:78ch}/* Guide and city pages carry their FAQ as bare <details> inside .prose, so the
   840px reading measure applied to them too and the rows stopped short of the
   page. Same treatment: rows run the column, answers keep a measure.
   The Sources rule above the citations is a border on .sources, so it stopped
   at 840px for the same reason; the divider runs the column, the links keep a
   measure. */
.inner--read > .sources{max-width:none}.sources > ul{max-width:78ch}.inner--read > .prose > details,.prose > details{max-width:none}.prose > h2:has(+ details){max-width:none}.prose > details > p{max-width:78ch}/* Coaching hero: the offer on the left, the person on the right. Her name and
   credential belonged with her photograph, not in a separate band below with
   an empty column beside it. */
.phero-aside{display:flex;flex-direction:column;gap:1.1rem}.phero-aside .ph{margin:0}.bio b{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;
  line-height:1.2;letter-spacing:-.02em;margin-bottom:.4rem}.bio p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-60)}@media (max-width:900px){.phero-aside{gap:.9rem}}/* The tier eyebrow carries the whole comparison (we cook / a kitchen cooks /
   you cook). At 9.9px, uppercase and letterspaced, it was the smallest text on
   the site and the hardest to read one-handed. */
@media (max-width:700px){
  .tag{font-size:.75rem;letter-spacing:.08em}
}/* the app-card badge sits on a dark band on 63 pages; 10.6px uppercase is
   below the site's floor for readable text */
@media (max-width:700px){
  .badge{font-size:.75rem;letter-spacing:.06em}
}/* iOS Safari zooms the page whenever a focused field is under 16px, which
   leaves the reader zoomed in and scrolling sideways. Both conversion points
   (the guide signup and the contact form) were below it. */
@media (max-width:820px){
  .signup-row input,
  .form-grid input,.form-grid select,.form-grid textarea{font-size:16px}
}/* The header is sticky, so an in-page jump used to scroll the target to y=0
   and leave the header sitting on top of its heading. Every anchor target now
   stops clear of it. */
:target,section[id],[id^="join"],[id^="tiers"],[id^="faq"]{scroll-margin-top:96px}@media (max-width:700px){:target,section[id]{scroll-margin-top:84px}}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}/* ---------- founder story on the about page ---------- */
.story p{margin:0 0 1.15rem;font-size:1.02rem;line-height:1.72;color:var(--ink)}.story{margin-top:1.15rem}.story p:first-child{font-size:1.02rem;line-height:1.72}.story p:last-child{margin-bottom:0}@media (max-width:820px){
}/* ---------- mission block: text beside a photo ---------- */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}.mission-eyebrow{margin:0 0 .55rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-text)}.mission-h,.cert-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.35rem);
  line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:0 0 1.15rem;
  font-variation-settings:"SOFT" 40,"WONK" 1}.mission p:not(.mission-eyebrow){margin:0 0 1rem;font-size:.98rem;line-height:1.7;color:var(--ink-60)}.mission p:last-child{margin-bottom:0}.mission-photo{min-height:380px;border-radius:var(--r)}@media (max-width:900px){.mission{grid-template-columns:1fr;gap:1.8rem}.mission-photo{min-height:260px;order:-1}
}/* ---------- full-bleed photo hero (about) ----------
   Same construction as .closing: image, scrim, centred type. */
.phero-photo{position:relative;min-height:min(52vh,420px);display:flex;align-items:center;
  background-size:cover;background-position:center 58%;background-repeat:no-repeat}.phero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(28,26,23,.56),rgba(28,26,23,.68) 55%,rgba(28,26,23,.60))}.phero-photo .inner{position:relative;z-index:2;text-align:center;color:#fff}.phero-photo h1{margin:0 auto;color:#fff;max-width:16ch;
  font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,3.5rem);
  line-height:1.04;letter-spacing:-.035em;font-variation-settings:"SOFT" 40,"WONK" 1}/* the brand orange cannot clear 3:1 over a light photo without a scrim so
   dark the image is pointless; this apricot is the deepest tone that does */
.phero-photo h1 em{font-style:normal;color:#f9b48c}@media (max-width:700px){.phero-photo{min-height:min(44vh,320px)}}/* ---------- certification block ----------
   The facts sit in a definition list rather than a paragraph, so the
   certificate's own fields (title, programme, issuer, date) stay checkable. */
.cert{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}.cert-shot{width:100%;height:auto;display:block;object-fit:contain;align-self:start;
  border-radius:var(--r);border:1px solid var(--line);background:#fff}.cert-body{display:flex;flex-direction:column;justify-content:center}.cert-lede{margin:0;font-size:.98rem;line-height:1.7;color:var(--ink-60)}@media (max-width:900px){.cert{grid-template-columns:1fr;gap:1.5rem}.cert-shot{order:-1}}/* ---- Community / Mama Morning Club --------------------------------- */
.mmc-hero{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem)}.mmc-hero h1{margin:0}/* .inner--read caps children at 840px without auto margins, which
   left-aligns them inside the 1240px inner. Centre them here. */
.mmc-hero .inner--read > *{margin-left:auto;margin-right:auto}/* the lockup's own background is #edd6dc, the same as band--pink,
   so its edges disappear into the band */
.mmc-lockup{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}.mmc-intro{text-align:center;max-width:58ch;margin:1.5rem auto 0}.mmc-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem}.mmc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}.mmc-poster{width:100%;max-width:100%;height:auto;display:block;margin:0;
  border-radius:var(--r);box-shadow:0 30px 70px rgba(28,26,23,.20)}.mmc-body{min-width:0}.mmc-facts{display:grid;margin:0 0 1.5rem;border-top:1px solid var(--line)}.mmc-facts div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:baseline;
  padding:.78rem 0;border-bottom:1px solid var(--line)}.mmc-facts b{font-weight:600;font-size:.62rem;letter-spacing:.14em;line-height:2.4;
  text-transform:uppercase;color:var(--ink-60)}.mmc-facts span{font-family:var(--serif);font-weight:600;font-size:1.16rem;letter-spacing:-.02em;
  color:var(--ink);font-variation-settings:"SOFT" 40,"WONK" 1}.mmc-onday{margin:0 0 1.8rem;max-width:46ch}/* Mama Morning Club has its own colour: the green from the wordmark.
   White on #32653a is 6.87:1. */
.mmc-hero a.btn,.mmc a.btn{background:#32653a;color:#fff}.mmc-hero a.btn:hover,.mmc a.btn:hover{background:#244a2a;color:#fff}@media (max-width:900px){.mmc{grid-template-columns:1fr;gap:2rem}.mmc-poster{max-width:420px;margin:0 auto}.mmc-onday{max-width:none}
}/* six top-level nav items: keep labels on one line */
#navLinks > a,#navLinks .navtop{white-space:nowrap}@media (max-width:820px){}/* homepage hero h1: one colour, forest green, no italic */
.hero h1,.hero h1 em{color:var(--forest)}.hero h1 em{font-style:normal}/* ---- full-bleed photo hero (homepage) -------------------------------- */
.hero--photo{position:relative;display:flex;align-items:center;
  min-height:min(78vh,640px);padding:clamp(3rem,7vw,5rem) 0}.hero--photo .hero-bg{position:absolute;inset:0;overflow:hidden;background-size:cover;
  background-position:center 60%;background-repeat:no-repeat}.hero--photo .hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(24,22,19,.36),rgba(24,22,19,.44) 55%,rgba(24,22,19,.38))}/* a soft pool of shade behind the copy only, so the dishes stay bright at the edges */
.hero--photo .hero-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 62% 58% at 50% 46%,
    rgba(24,22,19,.52) 0%,rgba(24,22,19,.34) 52%,rgba(24,22,19,0) 78%)}.hero--photo > .inner{position:relative;z-index:2;text-align:center}.hero--photo h1,.hero--photo h1 em{color:#fff}.hero--photo h1 em{font-style:normal;color:#f6c9a4}.hero--photo p.sub{color:var(--on-dark);margin:1.3rem auto 0;max-width:50ch;font-size:1.06rem;line-height:1.62}.hero--photo .hero-cta{justify-content:center}.hero--photo .seal--hero{position:absolute;z-index:4;top:auto;
  bottom:clamp(-34px,-3vw,-28px);
  right:max(clamp(8px,3vw,48px),calc(50% - 620px + 28px));
  width:clamp(112px,13vw,158px);height:clamp(112px,13vw,158px);aspect-ratio:auto;
  flex:0 0 auto;align-self:flex-end}@media (max-width:700px){.hero--photo .seal--hero{width:92px;height:92px;bottom:-26px;right:16px}
}.hero--photo .btn--out{border-color:rgba(255,255,255,.72);color:#fff;background:transparent}.hero--photo .btn--out:hover{background:#fff;color:var(--ink);border-color:#fff}@media (max-width:700px){.hero--photo{min-height:min(72vh,520px)}}/* Nothing on this site should ever scroll sideways. `clip` rather than
   `hidden` because `hidden` would make this a scroll container and break
   the sticky header. */
html,body{overflow-x:clip}/* the guide download revealed after a successful signup */
.form-download{display:inline-block;margin-top:.7rem}/* Focus stays visible, it just stops shouting in orange. Ink reads on every
   light band; the dark bands need the light counterpart. */
.band--black :focus-visible,.closing :focus-visible,.hero--photo :focus-visible,.appshow :focus-visible,.tier--dark :focus-visible{outline-color:#f4f0e8}/* ---- app page: the depletion section --------------------------------
   Heading holds the left column, the reading copy the right. Same device
   as the About page, so the band fills without inventing a new pattern. */
.dep{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,6vw,5rem);align-items:start}.dep h2{margin:0}.dep p{margin:0 0 1rem;color:var(--ink-60);line-height:1.65}.dep p:last-child{margin-bottom:0}/* short sentences that each deserve their own line */
.say{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.45;color:var(--ink);
  margin:1.4rem 0;font-variation-settings:"SOFT" 40,"WONK" 1}.say span{display:block}.dep .note{font-size:.92rem;color:var(--ink-60);border-top:1px solid var(--line);
  padding-top:1rem;margin-top:1.7rem}@media (max-width:860px){.dep{grid-template-columns:1fr;gap:1.4rem}
}