/* =============================================================
   Oat-EH! — Design System
   Warm & playful Canadian (approved Mockup A), professionalized:
   no emojis — consistent stroke SVG icons throughout.
   Cream base, maple amber primary, syrup-brown ink, packaging red
   for the marquee banner. Baloo 2 display + Nunito body.
   ============================================================= */

:root {
  --cream:    #FFF4E4;
  --cream-2:  #FFFBF2;
  --oat:      #F0DFC0;
  --oat-deep: #E2C99D;
  --maple:    #D97B29;
  --maple-deep:#B25E17;
  --syrup:    #5B3317;
  --syrup-deep:#3F2410;
  --ink:      #3A2413;
  --ink-soft: #6E4E30;
  --red:      #C8102E;
  --gold:     #FFC97F;

  --disp: "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;

  --step-0: clamp(1rem, .96rem + .2vw, 1.13rem);
  --step-1: clamp(1.22rem, 1.12rem + .5vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.3rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
  --step-4: clamp(2.5rem, 1.9rem + 3vw, 4.4rem);
  --step-5: clamp(3rem, 2rem + 4.6vw, 5.6rem);

  --sp: clamp(4rem, 2.8rem + 5vw, 9.5rem);
  --gutter: clamp(1.2rem, .7rem + 2.5vw, 4.5rem);
  /* Fluid content width. A fixed 1180px cap left the page marooned in the middle
     of wide/zoomed-out screens (only 46% of a 2560px viewport). 82vw is exactly
     1180px at 1440px, so normal laptops look unchanged, and past that the
     container keeps growing with the screen instead of stranding it. Individual
     text blocks stay readable via their own ch-based max-widths. */
  --maxw: clamp(1180px, 82vw, 2800px);
  --r: 22px; --r-lg: 30px;
  --shadow: 0 10px 28px rgba(91,51,23,.12), 0 30px 60px rgba(91,51,23,.10);
  --ease: cubic-bezier(.16,1,.3,1);
  --tickerH: 52px;
}

*,*::before,*::after{box-sizing:border-box} *{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* Anchor jumps (#muffins, #buy, #nutrition…) would otherwise land flush against the
   top of the viewport, tucked under the sticky header. Drop the target roughly a
   sixth of the way down the screen so the card reads as "arrived at", not "cut off". */
[id]{scroll-margin-top:clamp(6rem,16vh,11rem)}
/* #buy is the storefront: land with "Choose your bag" right under the sticky
   ticker so the two option tiles are immediately in view (JS refines this —
   on tall screens it centres the tiles instead). */
#buy{scroll-margin-top:calc(var(--tickerH) + 14px)}
body{font-family:var(--body);font-size:var(--step-0);line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.04;letter-spacing:-.015em;color:var(--syrup);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--gold);color:var(--syrup-deep)}
:focus-visible{outline:3px solid var(--maple);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* Sections built from two columns or a couple of big tiles (order tiles,
   nutrition panel, directions box) look stretched past ~1500px. Cap the WHOLE
   section — heading included — so the headline and the content below it keep
   sharing the same left and right edges. Capping only the inner grid left the
   heading running 455px wider than the panel beneath it on a 2560px screen. */
.wrap--tight{max-width:min(var(--maxw), 1500px)}
/* One-line promo banner: the sentence needs ~1150px and the leaf icon plus its
   gap take ~58px more, which the standard container can't give at 1440px. This
   is a single centred line rather than body copy, so it can run wider. */
.wrap--banner{max-width:min(94vw, 1900px)}
.section{padding-block:var(--sp);position:relative}
.section--tight{padding-block:clamp(2.6rem, 1.8rem + 3.5vw, 4.5rem)}
.bg-paper{background:var(--cream-2)}
.bg-syrup{background:var(--syrup);color:#F6E2C8}
.bg-syrup h2,.bg-syrup h3{color:#fff}

.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--maple-deep)}
.eyebrow svg{width:1.2em;height:1.2em;flex:none}
.bg-syrup .eyebrow{color:var(--gold)}
.section-head h2{font-size:var(--step-3);margin-top:.5rem}
.section-head p{margin-top:.9rem;color:var(--ink-soft);font-size:var(--step-1);max-width:56ch;font-weight:600}
/* Full-width intro: paragraph lines up with the cards/tiles below it instead of
   being capped at 56ch. Sentences sit on their own lines and stay unbroken when
   the viewport allows. */
.section-head--wide p{max-width:none;text-wrap:wrap}
.section-head--wide p + p{margin-top:.35rem}
.bg-syrup .section-head p{color:#E8CFAF}

/* ---------- Icons ----------
   Every inline icon is a <svg><use href="#i-…"></svg>. Give them all the
   stroke treatment; symbols that need a fill (maple leaf) set it on their
   own path, which wins over inheritance. */
svg:has(> use){stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico{width:1em;height:1em;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--disp);font-weight:700;font-size:1.05rem;padding:.9em 1.7em;border-radius:999px;background:var(--maple);color:#fff;box-shadow:0 6px 0 var(--maple-deep);transition:transform .15s ease, box-shadow .15s ease, background .2s ease;line-height:1.1}
.btn svg{width:1.1em;height:1.1em}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--maple-deep)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--maple-deep)}
.btn--big{font-size:1.22rem;padding:1em 2em}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2.5px #fff}
.btn--ghost:hover{box-shadow:inset 0 0 0 2.5px #fff;background:rgba(255,255,255,.12)}
.btn--syrup{background:var(--syrup);box-shadow:0 6px 0 var(--syrup-deep)}
.btn--syrup:hover{box-shadow:0 4px 0 var(--syrup-deep)}
.btn--light{background:#fff;color:var(--syrup);box-shadow:0 6px 0 var(--oat-deep)}
.btn--light:hover{box-shadow:0 4px 0 var(--oat-deep)}

/* ---------- Header (scrolls away; ticker owns the top) ---------- */
.header{position:absolute;inset:0 0 auto;z-index:60;padding-block:1.1rem}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:#fff}
.brand svg.leafmark{width:46px;height:46px}
.brand__name{font-family:var(--disp);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.35);line-height:1}
.brand__name small{display:block;font-family:var(--body);font-weight:800;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{color:#fff;font-weight:800;font-size:1rem;text-shadow:0 1px 8px rgba(0,0,0,.3);position:relative;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:3px;background:var(--gold);transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
.header .btn{padding:.7em 1.4em;font-size:1rem}
.nav-toggle{display:none;width:46px;height:46px;border-radius:12px;position:relative;color:#fff}
.nav-toggle span{position:absolute;left:11px;right:11px;height:3px;background:currentColor;border-radius:3px;transition:transform .35s var(--ease),opacity .25s}
.nav-toggle span:nth-child(1){top:15px}.nav-toggle span:nth-child(2){top:22px}.nav-toggle span:nth-child(3){top:29px}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);z-index:400;background:var(--syrup);flex-direction:column;align-items:stretch;padding:5.5rem 2rem 2rem;gap:0;transform:translateX(105%);transition:transform .5s var(--ease);box-shadow:var(--shadow)}
  body.menu-open .nav{transform:translateX(0)}
  .nav a{font-family:var(--disp);font-size:1.35rem;padding:.9rem 0;border-bottom:1.5px solid rgba(255,255,255,.14);text-shadow:none}
  .nav .btn{margin-top:1.4rem}
  .menu-backdrop{position:fixed;inset:0;background:rgba(43,22,7,.55);backdrop-filter:blur(3px);z-index:300;opacity:0;visibility:hidden;transition:.35s}
  body.menu-open .menu-backdrop{opacity:1;visibility:visible}
}
@media (min-width:821px){ .menu-backdrop{display:none} }

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92svh;display:flex;align-items:center;background:var(--syrup-deep);overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(43,22,7,.85) 22%,rgba(43,22,7,.3) 58%,rgba(43,22,7,.5));}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:8rem 6rem}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:700;background:var(--red);color:#fff;border-radius:999px;padding:.4em 1.1em;font-size:.95rem}
.kicker svg{width:1.05em;height:1.05em}
.hero h1{font-size:var(--step-5);color:#fff;max-width:13ch;margin-top:1.2rem}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__sub{color:#F6E2C8;font-size:var(--step-1);max-width:44ch;margin-top:1.3rem;font-weight:600}
.hero__ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.hero__foot{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:3rem;padding-top:1.5rem;border-top:1.5px solid rgba(255,255,255,.22)}
.hero__trust{display:inline-flex;align-items:center;gap:.6rem;color:#F6E2C8;font-weight:700;font-size:.95rem}
.hero__trust svg{width:1.4em;height:1.4em;color:var(--gold)}
.badge{position:absolute;right:clamp(1rem,6vw,7rem);bottom:12%;z-index:3;background:#fff;border-radius:50%;width:152px;height:152px;display:grid;place-content:center;text-align:center;font-family:var(--disp);font-weight:800;color:var(--syrup);transform:rotate(8deg);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.badge b{font-size:2.1rem;color:var(--maple);display:block;line-height:1}
.badge span{font-size:.8rem;line-height:1.25;display:block;padding-inline:.9rem}
@media (prefers-reduced-motion: no-preference){ .badge{animation:bob 4.5s ease-in-out infinite} }
@keyframes bob{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-10px)}}
@media (max-width:700px){.badge{display:none}}

/* ---------- Sticky red marquee ---------- */
.ticker{position:sticky;top:0;z-index:200;background:var(--red);color:#fff;overflow:hidden;height:var(--tickerH);display:flex;align-items:center;box-shadow:0 4px 16px rgba(122,8,28,.35)}
.ticker__track{display:flex;width:max-content;gap:0}
/* 90s: the track now holds 6 copies, so the -50% loop travels 3 copies — 3x the
   old distance — and needs 3x the old 30s to keep the same visual speed. */
@media (prefers-reduced-motion: no-preference){ .ticker__track{animation:marquee 90s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} }
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker__item{display:inline-flex;align-items:center;gap:2.2rem;font-family:var(--disp);font-weight:700;font-size:1.02rem;white-space:nowrap;padding-right:2.2rem}
.ticker__item svg{width:1.1em;height:1.1em;color:var(--gold)}

/* ---------- Ingredient cards ---------- */
.ingr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr));gap:1rem;margin-top:2.4rem}
.icard{background:var(--cream-2);border:2.5px solid var(--oat);border-radius:var(--r);padding:1.5rem 1.1rem;text-align:center;transition:transform .25s var(--ease),border-color .25s}
.icard:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--maple)}
.icard svg{width:2.4rem;height:2.4rem;margin-inline:auto;color:var(--maple-deep)}
.icard h3{font-size:1.15rem;margin-top:.7rem}
.icard p{font-size:.88rem;color:var(--ink-soft);font-weight:600;margin-top:.25rem}

/* ---------- Benefits split ---------- */
.benefits{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.5rem);align-items:center;margin-top:3rem}
@media (max-width:820px){.benefits{grid-template-columns:1fr}}
.benefits img{border-radius:var(--r-lg);box-shadow:var(--shadow);aspect-ratio:4/3.4;object-fit:cover}
.blist{display:flex;flex-direction:column;gap:1.1rem}
.bitem{display:flex;gap:1rem;align-items:flex-start}
.bitem .bico{flex:none;width:52px;height:52px;border-radius:16px;background:var(--oat);display:grid;place-items:center;color:var(--syrup)}
.bitem .bico svg{width:1.6rem;height:1.6rem}
.bitem h3{font-size:1.2rem}
.bitem p{color:var(--ink-soft);font-weight:600;font-size:.97rem;margin-top:.15rem}

/* ---------- Griddle steps ---------- */
.griddle{margin-top:3.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem);position:relative}
@media (max-width:760px){.griddle{grid-template-columns:1fr;max-width:26rem}}
.pstep{position:relative;text-align:center;padding:0 .5rem}
.pcake{width:130px;height:130px;margin-inline:auto;border-radius:50%;background:radial-gradient(circle at 38% 32%, #F3C079, #DE9A44 62%, #C97F2C);box-shadow:inset 0 -7px 0 rgba(122,62,20,.35), 0 12px 26px rgba(91,51,23,.28);display:grid;place-content:center;position:relative;color:#fff}
.pcake svg{width:3rem;height:3rem;filter:drop-shadow(0 2px 3px rgba(91,51,23,.4))}
.pcake .num{position:absolute;top:-10px;right:-6px;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;font-size:1.3rem;display:grid;place-items:center;box-shadow:0 5px 14px rgba(122,8,28,.4);transform:rotate(8deg)}
.pstep h3{font-size:1.3rem;margin-top:1.2rem}
.pstep p{color:var(--ink-soft);font-weight:600;font-size:.98rem;margin-top:.4rem;max-width:30ch;margin-inline:auto}
.pstep::after{content:"";position:absolute;top:63px;left:calc(50% + 78px);width:calc(100% - 156px);border-top:3.5px dashed var(--oat-deep)}
.pstep:last-child::after{display:none}
@media (max-width:760px){.pstep::after{display:none}}
.cheftip{margin-top:2.6rem;background:var(--cream-2);border:2.5px dashed var(--maple);border-radius:var(--r);padding:1.3rem 1.6rem;display:flex;gap:1rem;align-items:center;max-width:44rem}
.cheftip svg{flex:none;width:2.2rem;height:2.2rem;color:var(--maple-deep)}
.cheftip p{font-weight:700;color:var(--ink)}
.cheftip p b{color:var(--maple-deep)}

/* ---------- Order / products ---------- */
/* Two pricing tiles: let them breathe on a wide screen but stop short of the
   full fluid container, or each card becomes an unreadable slab. */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2.4rem);margin-top:2.6rem;align-items:stretch}
@media (max-width:800px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border-radius:var(--r-lg);padding:2rem 1.8rem;color:var(--ink);position:relative;box-shadow:var(--shadow);display:flex;flex-direction:column;border:3px solid transparent}
.plan--star{border-color:var(--gold)}
.plan__flag{position:absolute;top:-16px;left:1.6rem;background:var(--gold);color:var(--syrup-deep);font-family:var(--disp);font-weight:800;font-size:.9rem;border-radius:999px;padding:.35em 1em;box-shadow:0 5px 14px rgba(91,51,23,.25)}
.plan h3{font-size:1.5rem;display:flex;align-items:center;gap:.6rem}
.plan h3 svg{width:1.3em;height:1.3em;color:var(--maple)}
.plan .size{color:var(--ink-soft);font-weight:700;font-size:.95rem}
.plan .pprice{font-family:var(--disp);font-weight:800;font-size:2.6rem;color:var(--syrup);margin-top:.8rem;line-height:1}
.plan .pprice small{font-size:1rem;color:var(--ink-soft);font-family:var(--body);font-weight:700}
.plan ul{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:flex;flex-direction:column;gap:.55rem}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-weight:600;font-size:.97rem;color:var(--ink-soft)}
.plan li svg{flex:none;width:1.25em;height:1.25em;color:var(--maple);margin-top:.15em}
.plan li b{color:var(--ink)}
.plan .btn{margin-top:auto;width:100%}
.promo{margin-top:2.4rem;background:var(--red);color:#fff;border-radius:var(--r-lg);padding:1.8rem 2rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;box-shadow:0 16px 40px rgba(122,8,28,.35)}
@media (max-width:760px){.promo{grid-template-columns:1fr;text-align:center;justify-items:center}}
.promo svg{width:3.4rem;height:3.4rem;color:var(--gold)}
.promo h3{color:#fff;font-size:1.5rem}
.promo p{color:#FFD9DF;font-weight:600;margin-top:.25rem}
.promo .btn{white-space:nowrap}
.finePrint{margin-top:1.4rem;font-size:.85rem;color:var(--ink-soft);font-weight:600}

/* ---------- Story ---------- */
.story{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media (max-width:820px){.story{grid-template-columns:1fr}}
.story img{border-radius:var(--r-lg);box-shadow:var(--shadow);aspect-ratio:4/4.6;object-fit:cover;transform:rotate(-2deg)}
.story blockquote{font-family:var(--disp);font-weight:600;font-size:var(--step-2);line-height:1.3;color:#fff}
.story blockquote em{font-style:normal;color:var(--gold)}
.story .who{margin-top:1.4rem;color:#E8CFAF;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.9rem}
.chip svg{width:1.1em;height:1.1em;color:var(--gold)}

/* ---------- Idea cards (Get Creative) ---------- */
.ideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.2rem;margin-top:2.6rem}
.idea{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.idea:hover{transform:translateY(-6px)}
.idea img{aspect-ratio:4/3;object-fit:cover;width:100%}
.idea__body{padding:1.3rem 1.3rem 1.5rem}
.idea h3{font-size:1.25rem;display:flex;gap:.5rem;align-items:center}
.idea h3 svg{width:1.2em;height:1.2em;color:var(--maple);flex:none}
.idea p{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin-top:.4rem}
.recipe{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1.6rem,3vw,2.6rem);margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem)}
@media (max-width:760px){.recipe{grid-template-columns:1fr}}
.recipe h3{font-size:var(--step-2);display:flex;gap:.6rem;align-items:center}
.recipe h3 svg{width:1.1em;height:1.1em;color:var(--maple);flex:none}
.recipe .meta{color:var(--ink-soft);font-weight:700;font-size:.9rem;margin-top:.3rem}
.recipe ol,.recipe ul{padding-left:1.2rem;margin-top:.8rem;display:flex;flex-direction:column;gap:.45rem;color:var(--ink-soft);font-weight:600}
.recipe ol li::marker{font-family:var(--disp);font-weight:800;color:var(--maple)}
.recipe h4{font-family:var(--disp);font-size:1.05rem;color:var(--syrup);margin-top:1rem}

/* ---------- "Back of the box" directions panel ---------- */
.dirbox{background:#fff;border:3px solid var(--syrup);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1.4rem,3vw,2.4rem);margin-top:2.4rem}
.dirbox__head{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:.08em;border-bottom:6px solid var(--syrup);padding-bottom:.5rem;color:var(--syrup)}
.dirlead{margin-top:1.1rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.55rem}
.dirlead svg{width:1.35em;height:1.35em;flex:none;color:var(--maple-deep)}

/* Stripe checkout picker (opens when a payment link is configured) */
.paypick{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:1.2rem}
.paypick__backdrop{position:absolute;inset:0;background:rgba(58,31,10,.55);backdrop-filter:blur(3px)}
.paypick__card{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:2rem;max-width:430px;width:100%;text-align:center}
.paypick__card h3{font-size:1.5rem;color:var(--syrup)}
.paypick__hint{margin-top:.4rem;color:var(--ink-soft);font-weight:600;font-size:.95rem}
.paypick__list{display:grid;gap:.7rem;margin-top:1.3rem}
.paypick__list .btn{width:100%;justify-content:center}
.paypick__close{position:absolute;top:.6rem;right:.9rem;font-size:1.8rem;line-height:1;color:var(--ink-soft)}

/* Phone hero headlines that hold a phrase on one line (.hero--nowrap, used where
   an unbreakable span like "Knock yourself Oat!" must not split). At the normal
   size that phrase needs ~8.76px of width per 1px of font, which overflows below
   roughly 430px. Scale the type to the space instead of breaking the phrase:
   calc keeps it just inside the gutters at every width (≈31px at 320, ≈37px at
   375), and meets the normal size at the breakpoint so there is no visible jump. */
@media (max-width:430px){
  /* .hero.hero--nowrap beats the later `.subhero h1` rule on specificity, and
     the 16ch cap has to lift too — the phrase is 19 characters wide. */
  .hero.hero--nowrap h1{font-size:calc(10.6vw - 2.6px);max-width:100%}
}

/* Embedded Instagram posts on Get Creative */
.iggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;margin-top:2rem;justify-items:center;align-items:start}
.iggrid .instagram-media{max-width:360px !important;min-width:0 !important;width:100% !important;border-radius:var(--r) !important;box-shadow:var(--shadow) !important;margin:0 !important}
.dirs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.8rem);margin-top:1.8rem}
@media (max-width:900px){.dirs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.dirs{grid-template-columns:1fr}}
.dstep{text-align:center;padding:1.2rem .9rem 1.1rem;border-radius:var(--r);background:var(--cream-2);position:relative}
.dstep .dnum{position:absolute;top:-0.85rem;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--syrup);color:#fff;font-family:var(--disp);font-weight:800;display:grid;place-items:center;font-size:1.05rem}
.dstep .art{height:112px;display:grid;place-items:center;margin-top:.6rem}
.dstep .art svg{height:104px;width:auto}
.dstep h3{font-size:1.15rem;margin-top:.5rem}
.dstep p{margin-top:.35rem;font-size:.88rem;color:var(--ink-soft);font-weight:600;line-height:1.5}
/* z-index lifts the whole card (and its overhanging flag) above the next card,
   which would otherwise paint over the flag's tip. */
.dstep--key{background:#fff;border:3px solid var(--red);z-index:1}
.dstep--key .dnum{background:var(--red)}
/* The flag starts just right of the step-number badge and angles DOWN to the
   right, crossing the card's top corner — pivoting on its LEFT end, so however
   it rotates it can never swing back over the "3". */
.dstep--key .keyflag{position:absolute;top:-0.75rem;left:calc(50% + 1.45rem);transform:rotate(16deg);transform-origin:left center;background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;font-size:.7rem;letter-spacing:.05em;padding:.28rem .7rem;border-radius:999px;white-space:nowrap}
.dstep--key p b{color:var(--red)}
.dirbox__foot{margin-top:1.6rem;border-top:1.5px solid var(--oat);padding-top:1rem;font-size:.88rem;color:var(--ink-soft);font-weight:600;display:flex;gap:.6rem;align-items:flex-start}
.dirbox__foot svg{width:1.3rem;height:1.3rem;flex:none;color:var(--maple-deep)}

/* ---------- Even 3-per-row idea grid ---------- */
.ideas--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.ideas--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.ideas--3{grid-template-columns:1fr}}

/* ---------- Key timing step (the 50-second rule) ---------- */
.pstep--key{position:relative;background:#fff;border:3px solid var(--red);border-radius:var(--r);padding:1.4rem 1.2rem 1.2rem;box-shadow:var(--shadow)}
.pstep--key .keyflag{position:absolute;top:-0.9rem;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;font-size:.8rem;letter-spacing:.06em;padding:.3rem .9rem;border-radius:999px;white-space:nowrap}
.pstep--key .pcake{background:var(--red)}
.pstep--key p b{color:var(--red)}

/* ---------- Big clickable recipe boxes ---------- */
.rboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.4rem;margin-top:2.4rem}
.rbox{position:relative;display:block;background:#fff;border:3.5px dashed var(--maple);border-radius:var(--r-lg);padding:2.2rem 1.8rem 1.8rem;text-align:center;box-shadow:var(--shadow);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;cursor:pointer}
.rbox:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--red);box-shadow:0 20px 44px rgba(43,22,7,.22)}
.rbox__ico{width:92px;height:92px;border-radius:50%;background:var(--oat);color:var(--syrup);display:grid;place-items:center;margin:0 auto 1.1rem;transition:background .3s,color .3s}
.rbox:hover .rbox__ico{background:var(--maple);color:#fff}
.rbox__ico svg{width:3rem;height:3rem}
.rbox h3{font-size:1.5rem}
.rbox p{margin-top:.5rem;color:var(--ink-soft);font-weight:600;font-size:.95rem}
.rbox__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;background:var(--red);color:#fff;font-family:var(--disp);font-weight:800;padding:.7rem 1.5rem;border-radius:999px;box-shadow:0 5px 0 #8f0b21;transition:transform .15s}
.rbox:hover .rbox__cta{transform:translateY(2px);box-shadow:0 3px 0 #8f0b21}
.rbox__cta svg{width:1.1em;height:1.1em}

/* ---------- Product page ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem;margin-top:2.4rem}
.shots img{border-radius:var(--r);aspect-ratio:1/1;object-fit:cover;box-shadow:var(--shadow);width:100%}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.5rem);align-items:start;margin-top:2.6rem}
@media (max-width:820px){.pdp{grid-template-columns:1fr}}
.nutri{background:#fff;border:2.5px solid var(--syrup);border-radius:var(--r);padding:1.4rem 1.5rem;font-size:.95rem}
.nutri h3{font-size:1.5rem;border-bottom:8px solid var(--syrup);padding-bottom:.4rem}
.nutri .serv{font-weight:700;color:var(--ink-soft);padding:.4rem 0;border-bottom:4px solid var(--syrup)}
.nutri table{width:100%;border-collapse:collapse}
.nutri td{padding:.42rem 0;border-bottom:1.5px solid var(--oat);font-weight:600;color:var(--ink)}
.nutri td:last-child{text-align:right;font-weight:800}
.nutri .cal td{font-family:var(--disp);font-weight:800;font-size:1.25rem;border-bottom:4px solid var(--syrup)}
.nutri .ind td:first-child{padding-left:1.1rem;color:var(--ink-soft)}
.nutri .foot{font-size:.8rem;color:var(--ink-soft);font-weight:600;padding-top:.6rem}
.ingline{margin-top:1.4rem;background:var(--cream-2);border:2.5px dashed var(--oat-deep);border-radius:var(--r);padding:1.1rem 1.4rem;font-weight:700}
.ingline b{color:var(--maple-deep)}

/* ---------- Recipe cards (hub) ---------- */
.rcard{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1.6rem,3vw,2.4rem);margin-top:2rem}
.rcard__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;align-items:baseline}
.rcard h3{font-size:var(--step-2);display:flex;gap:.6rem;align-items:center}
.rcard h3 svg{width:1.1em;height:1.1em;color:var(--maple);flex:none}
.rcard .meta{color:var(--ink-soft);font-weight:700;font-size:.9rem}
.rcard__cols{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.2rem}
@media (max-width:760px){.rcard__cols{grid-template-columns:1fr}}
.rcard h4{font-family:var(--disp);font-size:1.05rem;color:var(--syrup)}
.rcard ul,.rcard ol{padding-left:1.2rem;margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem;color:var(--ink-soft);font-weight:600}
.rcard ol li::marker{font-family:var(--disp);font-weight:800;color:var(--maple)}
.rcard .to-shop{margin-top:1.2rem}

/* ---------- FAQ ---------- */
.faq{max-width:56rem;margin-top:2.2rem}
.faq details{border-bottom:2px solid var(--oat)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 0;font-family:var(--disp);font-weight:700;font-size:var(--step-1);color:var(--syrup)}
.faq summary::-webkit-details-marker{display:none}
.faq .fico{position:relative;width:20px;height:20px;flex:none}
.faq .fico::before,.faq .fico::after{content:"";position:absolute;top:9px;left:2px;right:2px;height:3px;background:var(--maple);border-radius:3px;transition:transform .3s var(--ease)}
.faq .fico::after{transform:rotate(90deg)}
.faq details[open] .fico::after{transform:rotate(0)}
.faq .fa{padding-bottom:1.2rem;color:var(--ink-soft);font-weight:600;max-width:66ch}

/* ---------- Sub-hero (interior pages) ---------- */
.subhero{position:relative;min-height:56vh;display:flex;align-items:flex-end;background:var(--syrup-deep);overflow:hidden}
.subhero .hero__inner{padding-block:7.5rem 3.5rem}
.subhero h1{font-size:var(--step-4);color:#fff;max-width:16ch;margin-top:1rem}
.subhero h1 em{font-style:normal;color:var(--gold)}

/* ---------- Footer ---------- */
footer{background:var(--syrup-deep);color:#D9BC9B;padding:3.5rem 0 2.2rem}
.f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1.5px solid rgba(255,255,255,.14)}
@media (max-width:700px){.f-top{grid-template-columns:1fr}}
footer .brand__name{text-shadow:none}
.f-blurb{margin-top:1rem;font-weight:600;font-size:.95rem;max-width:30ch}
footer h4{color:#fff;font-family:var(--disp);font-size:1.05rem;margin-bottom:.9rem}
footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem;font-weight:600}
footer a:hover{color:var(--gold)}
.f-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;font-size:.88rem;font-weight:600}

/* ---------- Email capture popup (injected by main.js) ---------- */
.popup-backdrop{position:fixed;inset:0;background:rgba(43,22,7,.55);backdrop-filter:blur(3px);z-index:900;opacity:0;visibility:hidden;transition:.35s}
.popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:901;width:min(92vw,430px);background:var(--cream-2);border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(43,22,7,.45);padding:2.2rem 2rem 2rem;text-align:center;opacity:0;visibility:hidden;transition:.35s var(--ease)}
body.popup-open .popup-backdrop,body.popup-open .popup{opacity:1;visibility:visible}
body.popup-open .popup{transform:translate(-50%,-50%) scale(1)}
.popup__close{position:absolute;top:.9rem;right:.9rem;width:38px;height:38px;border-radius:50%;background:var(--oat);color:var(--syrup);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:1.1rem;line-height:1}
.popup__close:hover{background:var(--maple);color:#fff}
.popup__badge{width:64px;height:64px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;margin:0 auto 1rem}
.popup__badge svg{width:2rem;height:2rem}
.popup h3{font-size:1.6rem}
.popup p{margin-top:.5rem;color:var(--ink-soft);font-weight:600;font-size:.95rem}
.popup form{margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.popup input{width:100%;padding:.9rem 1rem;border-radius:14px;border:2.5px solid var(--oat);background:#fff;font-weight:600}
.popup input:focus{outline:none;border-color:var(--maple)}
.popup .fine{font-size:.78rem;color:var(--ink-soft);font-weight:600;margin-top:.6rem}
.popup .done{display:none;font-family:var(--disp);font-weight:700;color:var(--maple-deep);font-size:1.1rem;margin-top:1rem}
.popup.is-done form,.popup.is-done .fine{display:none}
.popup.is-done .done{display:block}

/* ---------- Signup band ---------- */
.signup{background:var(--maple);color:#fff;padding-block:clamp(3.4rem, 2.8rem + 3vw, 5rem)}
.signup .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
@media (max-width:760px){.signup .wrap{grid-template-columns:1fr}}
.signup h2{color:#fff;font-size:var(--step-2)}
.signup p{color:#FFE3C4;font-weight:600;margin-top:.4rem}
.signup form{display:flex;gap:.7rem;flex-wrap:wrap}
.signup input{flex:1;min-width:220px;padding:1rem 1.2rem;border-radius:999px;border:none;font-weight:600}
.signup input:focus{outline:3px solid var(--syrup)}
.signup .btn{background:var(--syrup);box-shadow:0 6px 0 var(--syrup-deep)}
.signup .done{display:none;font-family:var(--disp);font-weight:700;font-size:1.15rem}
.signup.is-done form{display:none}
.signup.is-done .done{display:block}

/* ---------- Reveals (main.js contract) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .reveal.in-view{opacity:1;transform:none}
  .js .reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .reveal-stagger.in-view>*{opacity:1;transform:none}
  .js .reveal-stagger.in-view>*:nth-child(1){transition-delay:.05s}
  .js .reveal-stagger.in-view>*:nth-child(2){transition-delay:.13s}
  .js .reveal-stagger.in-view>*:nth-child(3){transition-delay:.21s}
  .js .reveal-stagger.in-view>*:nth-child(4){transition-delay:.29s}
  .js .reveal-stagger.in-view>*:nth-child(5){transition-delay:.37s}
  .js .reveal-stagger.in-view>*:nth-child(6){transition-delay:.45s}
}