/* ==========================================================================
   OH MOMMY! — Component layer
   Consumes tokens.css only. Ordered: reset → primitives → layout →
   components → sections → utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Fixed header must not cover anchor targets. */
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection { background: var(--c-orange); color: var(--c-ink); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-overlay);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Type primitives
   -------------------------------------------------------------------------- */

.t-display,
.t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}

.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.t-h1 { font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); text-transform: uppercase; }
.t-h2 { font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); text-transform: uppercase; }
.t-h3 { font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }

.t-h4 {
  font-family: var(--font-text);
  font-size: var(--t-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}

.t-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  max-width: var(--measure-tight);
  text-wrap: pretty;
}

.t-body { max-width: var(--measure); text-wrap: pretty; }
.t-small { font-size: var(--t-small); }

.t-eyebrow {
  font-family: var(--font-text);
  font-size: var(--t-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-orange-deep);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.t-eyebrow::before {
  content: "";
  width: var(--sp-6);
  height: 2px;
  background: currentColor;
  border-radius: var(--r-pill);
  flex: none;
}

/* Handwritten-feeling accent, borrowed from "The Umami Sauce" on-pack. */
.t-accent {
  font-family: var(--font-text);
  font-style: italic;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.t-muted { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.u-stack > * + * { margin-top: var(--flow, var(--sp-4)); }

.u-section { padding-block: var(--section-y); }
.u-section--tight { padding-block: var(--section-y-tight); }

/* Section colour themes. Each rebinds the semantic tokens so every child
   component recolours automatically — no per-section overrides. */
.theme-cream  { background: var(--c-cream); }
.theme-paper  { background: var(--c-cream-light); }
.theme-sky    { background: var(--c-sky); }

.theme-ink {
  background: var(--c-ink);
  --text: var(--c-cream);
  --text-muted: color-mix(in srgb, var(--c-cream) 68%, transparent);
  --border: color-mix(in srgb, var(--c-cream) 20%, transparent);
  --surface-raised: color-mix(in srgb, var(--c-cream) 7%, transparent);
  --focus-ring: 0 0 0 3px var(--c-ink), 0 0 0 6px var(--c-almond);
  color: var(--text);
}
.theme-ink .t-eyebrow { color: var(--c-almond); }
.theme-ink { --accordion-icon: var(--c-almond); }

.theme-orange {
  background: var(--c-orange);
  --text: var(--c-ink);
  --text-muted: color-mix(in srgb, var(--c-ink) 94%, transparent);
  --border: color-mix(in srgb, var(--c-ink) 34%, transparent);
  --border-strong: var(--c-ink);
  --surface-raised: color-mix(in srgb, var(--c-cream-light) 88%, var(--c-orange));
  --focus-ring: 0 0 0 3px var(--c-orange), 0 0 0 6px var(--c-ink);
  color: var(--text);
}
.theme-orange .t-eyebrow { color: var(--c-ink); }
.theme-orange { --accordion-icon: var(--c-ink); }

/* Opaque themed sections sit above the fixed mascot and mask it. */
.theme-cream, .theme-paper, .theme-sky, .theme-ink, .theme-orange {
  position: relative;
  z-index: var(--z-base);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-orange);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-back),
    background-color var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-cream); --btn-bd: var(--c-ink); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
}
.btn--secondary:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-cream); --btn-bd: var(--c-ink); }

.theme-ink .btn--secondary { --btn-bd: currentColor; }
.theme-ink .btn--secondary:hover { --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); --btn-bd: var(--c-cream); }
.theme-ink .btn--primary:hover { --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); --btn-bd: var(--c-cream); }

/* On the orange ground the primary flips to ink so it still reads as the
   loudest thing in the section. */
.theme-orange .btn--primary { --btn-bg: var(--c-ink); --btn-fg: var(--c-cream); --btn-bd: var(--c-ink); }
.theme-orange .btn--primary:hover { --btn-bg: var(--c-cream-light); --btn-fg: var(--c-ink); --btn-bd: var(--c-cream-light); }
.theme-orange .btn--secondary:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-cream); --btn-bd: var(--c-ink); }

.btn--lg { min-height: 3.5rem; padding-inline: var(--sp-7); font-size: var(--t-body); }
.btn--sm { min-height: 2.5rem; padding-inline: var(--sp-5); font-size: var(--t-micro); }

.btn__note {
  font-weight: var(--fw-medium);
  opacity: 0.72;
  font-size: 0.8em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   5. Pills, tags, badges
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1;
}
.pill--solid { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.pill--accent { background: var(--c-orange); color: var(--c-ink); border-color: var(--c-orange); }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   6. Header — fixed, single-page anchor nav
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--c-cream) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft);
}

.site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--c-cream) 94%, transparent);
  border-bottom-color: var(--border);
  box-shadow: var(--sh-1);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--c-orange);
  text-decoration: none;
}

/* The wordmark and mascot are CSS masks rather than <img>, so they inherit
   colour from context and stay a single cached request. */
.mark {
  display: block;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mark--wordmark {
  -webkit-mask-image: url("../assets/brand/wordmark.svg");
  mask-image: url("../assets/brand/wordmark.svg");
  aspect-ratio: 6.367;
  width: 100%;
}

.mark--mascot {
  -webkit-mask-image: url("../assets/brand/almond-man.svg");
  mask-image: url("../assets/brand/almond-man.svg");
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  aspect-ratio: 0.702;
  width: 100%;
}

.brand .mark--wordmark { width: clamp(7.5rem, 14vw, 10.5rem); }

.nav { justify-self: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  padding: var(--sp-1);
  margin: 0;
  border-radius: var(--r-pill);
}

.nav__link {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--text-muted);
  transition:
    color var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft);
}
.nav__link:hover { color: var(--c-ink); background: var(--c-cream-deep); }

/* Scroll-spy state, set by site.js.
   The pill shape and colour carry the state on their own — changing the
   font weight here would reflow the row and nudge the sibling links
   sideways every time the active section changes. */
.nav__link[aria-current="true"] {
  color: var(--c-cream-light);
  background: var(--c-ink);
}

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

.nav-toggle { display: none; }

@media (max-width: 60rem) {
  .site-header__inner { grid-template-columns: auto 1fr; }
  .header__actions { justify-self: end; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    justify-self: stretch;
    background: var(--c-cream-light);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-3);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .nav[data-open="true"] { transform: none; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .nav__link { padding: var(--sp-4); font-size: var(--t-h4); font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem; height: 2.75rem;
    padding: 0 0.6rem;
    background: none;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-pill);
    cursor: pointer;
  }
  .nav-toggle span {
    display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   7. Media — the low-resolution mitigation lives here
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--lqip-colour, var(--c-cream-deep));
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  aspect-ratio: var(--ratio, 4 / 5);
  isolation: isolate;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.media img.is-loaded,
.no-js .media img { opacity: 1; }

/* Grain plate. The supplied photography is ~1MP, so a fine, static grain
   gives the eye high-frequency detail to lock onto and reads as an
   editorial choice rather than a soft file. Kept under 6% opacity. */
.media::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Warm bloom in the corner keeps flat-lay shots from looking like stock. */
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 0%,
    color-mix(in srgb, var(--c-almond) 12%, transparent) 0%,
    transparent 62%
  );
}

.media--square { --ratio: 1 / 1; }
.media--wide   { --ratio: 16 / 9; }
.media--tall   { --ratio: 4 / 5; }
.media--flush  { border-radius: 0; }

.media--zoom img { transition: opacity var(--dur-slow), transform var(--dur-slow) var(--ease-out); }
a:hover .media--zoom img,
.card:hover .media--zoom img { transform: scale(1.035); }

figcaption {
  margin-top: var(--sp-3);
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--section-y-tight);
}

.hero__inner {
  display: grid;
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.hero__wordmark {
  color: var(--c-orange);
  width: min(100%, 34rem);
  margin-bottom: var(--sp-5);
}

.hero__copy { max-width: 34rem; }

/* Carousel — the client's mockup calls for one in the hero slot. */
.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-xl);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: center; }
.carousel__slide .media { border-radius: var(--r-xl); }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.carousel__dots { display: flex; gap: var(--sp-2); }

.carousel__dot {
  width: 0.5rem; height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-cream-deep);
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
.carousel__dot[aria-current="true"] { width: 1.75rem; background: var(--c-orange); }

.carousel__arrows { display: flex; gap: var(--sp-2); }

.carousel__arrow {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.carousel__arrow:hover { background: var(--c-ink); color: var(--c-cream); }

/* --------------------------------------------------------------------------
   9. Marquee ticker — "Dip it · Dunk it · Dish it"
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  padding-block: var(--sp-4);
  border-block: 2px solid currentColor;
  user-select: none;
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: var(--sp-6);
  animation: ticker 38s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  white-space: nowrap;
}
.ticker__item::after { content: "\25CF"; font-size: 0.35em; opacity: 0.7; }

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-raised);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.card__body { flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

.card__price { font-family: var(--font-display); font-size: var(--t-h4); font-weight: var(--fw-bold); }

/* Heat meter — a small, concrete detail that helps people choose. */
.heat { display: inline-flex; gap: 3px; align-items: center; }
.heat span {
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: 0.22;
}
.heat span.is-on { opacity: 1; color: var(--c-chilli); }

/* --------------------------------------------------------------------------
   11. Editorial split & step list
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse > :first-child { order: 2; }
}
.split--top { align-items: start; }

.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-h4);
  color: var(--c-orange);
}

/* --------------------------------------------------------------------------
   12. Proof: stats, quotes, logos
   -------------------------------------------------------------------------- */

.stats { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat__value { font-family: var(--font-display); font-size: var(--t-h2); font-weight: var(--fw-bold); line-height: 1; }
.stat__label { margin-top: var(--sp-2); font-size: var(--t-small); color: var(--text-muted); }

.quote { display: grid; gap: var(--sp-4); }
.quote blockquote { font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-normal); }
.quote cite { font-style: normal; font-size: var(--t-small); color: var(--text-muted); }

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5) var(--sp-8);
  opacity: 0.68;
}
.logo-strip span {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* --------------------------------------------------------------------------
   13. Accordion (FAQ — objection handling)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 1.5em;
  line-height: 1;
  color: var(--accordion-icon, var(--c-orange-deep));
  transition: transform var(--dur-base) var(--ease-back);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > *:not(summary) { padding-bottom: var(--sp-5); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--t-small); font-weight: var(--fw-bold); }

.field input {
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-cream-light);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-fast);
}
.field input:hover { border-color: var(--border-strong); }
.field input::placeholder { color: var(--c-ink-faint); }

.signup { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.signup .field { flex: 1 1 16rem; }

/* --------------------------------------------------------------------------
   15. The almond man — fixed at the foot of the page
   -------------------------------------------------------------------------- */

/* Sits behind every opaque section and is uncovered only when the
   transparent footer scrolls over him. Same trick as the reference site,
   but he also nudges on scroll so he feels alive rather than pasted on. */
.mascot {
  position: fixed;
  z-index: var(--z-mascot);
  right: clamp(1rem, 5vw, 5rem);
  bottom: 0;
  width: clamp(9rem, 17vw, 17rem);
  color: var(--c-orange);
  pointer-events: none;
  transform: translateY(var(--mascot-lift, 8%));
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (max-width: 48rem) {
  .mascot { right: -1rem; width: clamp(8rem, 34vw, 12rem); }
}

/* The footer is deliberately transparent so the mascot reads through it.
   The tail padding reserves his height so no content ever sits under him. */
.site-footer {
  position: relative;
  z-index: var(--z-base);
  background: transparent;
  padding-block: var(--section-y-tight) clamp(11rem, 40vw, 15rem);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* Keep the footer content clear of the mascot's column. */
@media (min-width: 48rem) {
  /* Trailing empty track reserves the space the almond man occupies. */
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr clamp(8rem, 15vw, 15rem); }
  .footer__legal { justify-content: flex-start; gap: var(--sp-4) var(--sp-8); padding-inline-end: clamp(9rem, 17vw, 17rem); }
}

.link-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.link-list a { text-decoration: none; color: var(--text-muted); transition: color var(--dur-fast); }
.link-list a:hover { color: var(--text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Sticky mobile buy bar (conversion safety net)
   -------------------------------------------------------------------------- */

.buybar {
  position: fixed;
  z-index: var(--z-sticky);
  inset-inline: var(--sp-4);
  bottom: var(--sp-4);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-4);
  transform: translateY(150%);
  transition: transform var(--dur-base) var(--ease-out);
}
.buybar[data-visible="true"] { transform: none; }

@media (max-width: 48rem) {
  .buybar { display: flex; }
}

/* --------------------------------------------------------------------------
   17. Reveal on scroll
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.u-col-full { grid-column: 1 / -1; }
.u-center { text-align: center; margin-inline: auto; }
.u-center .t-lead { margin-inline: auto; }
.u-flow-lg { --flow: var(--sp-5); }
.u-flow-xl { --flow: var(--sp-6); }

.u-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Section header: title left, supporting line right on wide screens. */
.u-between { display: grid; gap: var(--sp-5); align-items: end; }
@media (min-width: 56rem) {
  .u-between { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-8); }
  .u-between > :last-child { justify-self: end; }
}

.u-cards-3 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.u-cards-2 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }