html {
  scroll-behavior: smooth;
}

/* Custom Themed Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent-light);
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-round);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

.landing {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.landing * {
  box-sizing: border-box;
}

.landing .btn,
.header .btn {
  transition: background-color 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
              color 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.landing .btn:hover,
.header .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in oklch, var(--color-accent) 15%, transparent);
}

.landing .btn:active,
.header .btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px color-mix(in oklch, var(--color-accent) 10%, transparent);
}

.landing .btn--primary {
  box-shadow: 0 8px 22px color-mix(in oklch, var(--color-accent) 20%, transparent);
}

.landing .btn--primary:hover,
.header .btn--primary:hover {
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-accent) 25%, transparent);
}

.landing .btn--secondary:hover,
.header .btn--secondary:hover {
  box-shadow: 0 6px 16px oklch(0 0 0 / 0.04);
}

.header {
  background: transparent;
  padding: var(--space-4) var(--space-5) 0;
}

.landing .header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header__inner {
  align-items: center;
  background: color-mix(in oklch, var(--color-surface) 75%, var(--color-bg));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklch, var(--color-border) 62%, transparent);
  border-radius: var(--radius-round);
  box-shadow: 0 18px 45px color-mix(in oklch, var(--color-inverse) 9%, transparent);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1200px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  width: min(100%, 1200px);
}

.header__logo {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.header__toggle {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 4px;
  height: var(--touch-target);
  justify-content: center;
  width: var(--touch-target);
  padding: 0;
  z-index: 101;
}

.header__toggle-line {
  background: var(--color-text);
  border-radius: 2px;
  height: 2px;
  transition: transform 250ms ease, opacity 250ms ease, background-color 250ms ease;
  width: 20px;
}

.header__nav {
  align-items: center;
  display: grid;
  gap: var(--space-1);
  grid-auto-flow: column;
  justify-content: end;
}

.header__link {
  border-radius: var(--radius-round);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  transition: background-color 200ms cubic-bezier(0.25, 0.8, 0.25, 1),
              color 200ms cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header__link:hover,
.header__link--active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.header__link:hover {
  transform: translateY(-1px);
}

.header__link:focus-visible,
.header__logo:focus-visible,
.footer__link:focus-visible {
  outline: 2px solid oklch(0.48 0.13 245);
  outline-offset: 3px;
}

/* This comment documents the mobile hero stacking order per landing page improvements R8.
 * Mobile hero stacking: headline + CTAs render above the menu mockup.
 * Achieved via grid-template-columns: 1fr at max-width: 980px,
 * since .hero__content is the first child in DOM order.
 */
.hero {
  padding: clamp(4.5rem, 8vw, 7rem) var(--space-6) clamp(4.5rem, 8vw, 6rem);
  position: relative;
  background:
    radial-gradient(56rem 38rem at 82% 10%, color-mix(in oklch, var(--color-honey-light) 60%, transparent), transparent 68%),
    radial-gradient(48rem 34rem at 4% 94%, color-mix(in oklch, var(--color-accent-light) 50%, transparent), transparent 70%);
}

/* faint squared-paper wash echoing the menu-sheet motif, fading toward the edges */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(color-mix(in oklch, var(--color-border) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--color-border) 20%, transparent) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  mask-image: radial-gradient(56rem 38rem at 72% 24%, oklch(0 0 0 / 0.5), transparent 72%);
  -webkit-mask-image: radial-gradient(56rem 38rem at 72% 24%, oklch(0 0 0 / 0.5), transparent 72%);
  pointer-events: none;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(24rem, 1fr);
  gap: clamp(var(--space-7), 7vw, var(--space-10));
  align-items: center;
}

.hero__content {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr); /* an auto track would grow to the widest no-wrap pill and push 12 px past a phone */
  min-width: 0;
}

.hero__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 4.9rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
}

/* highlight-marker stroke on the key word of the title */
.hero__title em {
  font-style: normal;
  background: linear-gradient(
    0deg,
    color-mix(in oklch, var(--color-honey-light) 88%, transparent) 34%,
    transparent 34%
  );
  border-radius: 0.15em;
  padding: 0 0.06em;
}

/* staggered entrance — guarded by prefers-reduced-motion below */
.hero__content > * {
  animation: hero-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero__content > *:nth-child(2) { animation-delay: 90ms; }
.hero__content > *:nth-child(3) { animation-delay: 170ms; }
.hero__content > *:nth-child(4) { animation-delay: 250ms; }
.hero__content > *:nth-child(5) { animation-delay: 320ms; }
.hero__content > *:nth-child(6) { animation-delay: 380ms; }

.hero__subtitle {
  color: var(--color-text-muted);
  font-size: 1.15rem;
  line-height: 1.75;
  margin: 0;
  max-width: 36rem;
}

.hero__note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
  max-width: 35rem;
}

.hero__actions {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
  max-width: 100%;
}

.hero__mockup {
  min-height: 34rem;
  position: relative;
  perspective: 80rem;
  transform-style: preserve-3d;
  animation: hero-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) 220ms backwards;
}

.menu-sheet {
  /* squared-paper grid, clipped by the sheet's own radius */
  background:
    linear-gradient(color-mix(in oklch, var(--color-border) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--color-border) 16%, transparent) 1px, transparent 1px),
    var(--color-surface);
  background-size: 2.25rem 2.25rem, 2.25rem 2.25rem, auto;
  border: 1px solid color-mix(in oklch, var(--color-border) 55%, transparent);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-4);
  margin: 0 auto;
  max-width: 27rem;
  padding: var(--space-6);
  position: relative;
  transform: rotate(0.35deg);
  transition: transform 240ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 2;
}

/* Hero depth: the sheet and QR card live in the mockup's 3D space. The tilt
   controller feeds --tilt-x/--tilt-y/--sheen-x/--sheen-y; everything else is CSS.
   Gated to hover + fine pointer, the same gate the controller uses, so phones get
   the plain sheet. Registered properties transition themselves, so the tilt tracks
   the pointer while the hover lift keeps its own spring. */
@property --tilt-x { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --tilt-y { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --sheen-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --sheen-y { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --sheet-rot { syntax: "<angle>"; inherits: true; initial-value: 0.35deg; }
@property --sheet-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --qr-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --qr-y { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --qr-z { syntax: "<length>"; inherits: true; initial-value: 12px; }
@property --qr-r { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

.hero__mockup {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --sheen-x: 50%;
  --sheen-y: 50%;
  --sheet-rot: 0.35deg;
  --sheet-y: 0px;
  --qr-x: 0px;
  --qr-y: 0px;
  --qr-z: 12px;
  --qr-r: 0deg;
}

@media (hover: hover) and (pointer: fine) {
  .hero__mockup {
    transition:
      --tilt-x 90ms linear,
      --tilt-y 90ms linear,
      --sheen-x 90ms linear,
      --sheen-y 90ms linear,
      --sheet-rot 240ms cubic-bezier(0.25, 1, 0.5, 1),
      --sheet-y 240ms cubic-bezier(0.25, 1, 0.5, 1),
      --qr-x 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
      --qr-y 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
      --qr-z 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
      --qr-r 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hero__mockup .menu-sheet {
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(var(--sheet-rot)) translateY(var(--sheet-y));
    transition: box-shadow 320ms ease-out;
    will-change: transform;
  }

  /* light catching the paper as it tilts — one composited layer moved with translate */
  .hero__mockup .menu-sheet::before {
    background: radial-gradient(42rem 32rem at 50% 50%, oklch(1 0 0 / 0.45), transparent 62%);
    border-radius: inherit;
    content: "";
    inset: -50%;
    mix-blend-mode: soft-light;
    pointer-events: none;
    position: absolute;
    translate: calc((var(--sheen-x) - 50%) * 0.5) calc((var(--sheen-y) - 50%) * 0.5);
    z-index: 0;
  }

  .hero__mockup .menu-sheet > * {
    position: relative;
    z-index: 1;
  }

  .qr-card {
    transform: translate(var(--qr-x), var(--qr-y)) translateZ(var(--qr-z)) rotate(var(--qr-r)) rotateX(calc(var(--tilt-x) * 1.3)) rotateY(calc(var(--tilt-y) * 1.3));
  }
}


.menu-sheet::after {
  background:
    radial-gradient(circle, color-mix(in oklch, var(--color-border) 72%, transparent) 0 0.12rem, transparent 0.13rem),
    radial-gradient(circle, color-mix(in oklch, var(--color-border) 72%, transparent) 0 0.12rem, transparent 0.13rem);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  content: "";
  height: 1rem;
  inset: var(--space-4) var(--space-5) auto;
  opacity: 0.6;
  position: absolute;
  pointer-events: none;
}

.hero__mockup .menu-sheet {
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.05);
}

.hero__mockup:hover {
  --sheet-rot: 0deg;
  --sheet-y: -14px;
  --qr-x: 14px;
  --qr-y: -18px;
  --qr-z: 48px;
  --qr-r: 1deg;
}

.hero__mockup:hover .menu-sheet {
  box-shadow: 0 30px 60px oklch(0 0 0 / 0.14);
}

.menu-sheet__top,
.menu-sheet__footer {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
}

.menu-sheet__top span,
.menu-sheet__date,
.menu-sheet__section span,
.menu-sheet__section small,
.menu-sheet__footer span,
.qr-card span {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-sheet__restaurant {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin: var(--space-3) 0 0;
}

.menu-sheet__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 3rem;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

.menu-sheet__date {
  margin: calc(var(--space-3) * -1) 0 var(--space-2);
}

.menu-sheet__section {
  border-top: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

.menu-sheet__section strong {
  color: var(--color-text);
  font-size: 1.05rem;
}

.menu-sheet__section small {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.menu-sheet__footer {
  background: linear-gradient(135deg, var(--color-honey-light), var(--color-surface-raised));
  border-radius: var(--radius-md);
  /* price keeps its natural width; the includes label wraps */
  grid-template-columns: max-content minmax(0, 1fr);
  margin-top: var(--space-2);
  padding: var(--space-4);
}

.menu-sheet__footer span {
  text-align: right;
}

.menu-sheet__langs {
  display: flex;
  gap: var(--space-1);
}

.menu-sheet__lang-btn {
  background: none;
  border: none;
  border-radius: var(--radius-round);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.6rem;
}

.menu-sheet__lang-btn--active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.menu-sheet__lang-btn:hover:not(.menu-sheet__lang-btn--active) {
  color: var(--color-accent);
}

.menu-sheet__footer strong {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1.8rem;
}

.qr-card {
  background: var(--color-surface);
  border: 1px solid color-mix(in oklch, var(--color-border) 70%, transparent);
  border-radius: var(--radius-md);
  position: absolute;
  z-index: 3;
  transition: box-shadow 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qr-card {
  bottom: 1.5rem;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-4);
  right: 0;
  transform: translateZ(12px);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.04);
}

.qr-card__code {
  background: var(--color-surface);
  height: 5.5rem;
  width: 5.5rem;
}

.qr-card__code svg {
  height: 100%;
  width: 100%;
}

.hero__mockup:hover .qr-card {
  box-shadow: 0 20px 40px oklch(0 0 0 / 0.08);
}

.audience {
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-mist) 26%, var(--color-bg)), var(--color-bg) 44%);
  border-top: 1px solid color-mix(in oklch, var(--color-border) 45%, transparent);
  padding: var(--space-9) var(--space-6);
}

.audience__inner {
  align-items: start;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  margin: 0 auto;
  max-width: 1200px;
}

.audience__left {
  display: grid;
  gap: var(--space-6);
}

.audience__kicker {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.audience__kicker::after {
  background: color-mix(in oklch, var(--color-border) 55%, transparent);
  content: "";
  display: block;
  height: 1px;
  margin-top: var(--space-3);
  width: 8rem;
}

/* ── Word wall — random pairs of two ──────────────────────────
   Two active lines are visible at a time, stacked as editorial
   headlines. The inactive siblings share row 1 (`grid-area: 1/1`)
   so they overlap exactly, invisible, waiting for the word-cycle
   controller to promote a random pair — first word row 1, second
   word row 2 (via .audience__pill--second). The reveal is a
   one-time slide-up + fade + blur that hands off to a continuous
   breath + sheen on the same element; the second line reveals on
   a slight stagger. No `transition` anywhere — the Chrome
   class-toggle quirk means transitions silently break the
   cascade. All motion is `animation`, which is independent of
   class toggles. */

.audience__index {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  min-height: 9.5rem;
  perspective: 40rem;
  position: relative;
  row-gap: var(--space-3);
}

.audience__pill {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--color-text);
  display: flex;
  filter: blur(4px);
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
  font-weight: 500;
  grid-area: 1 / 1;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  padding: var(--space-3) var(--space-4);
  position: relative;
  transform: translateY(60%);
}

.audience__pill--active {
  background-color: var(--color-honey-light);
  border-radius: var(--radius-md);
  color: var(--color-text);
  filter: blur(0);
  font-weight: 600;
  grid-row: 1;
  opacity: 1;
  padding-inline: var(--space-5);
  transform: translateY(0);
  /* one-time reveal hands off to continuous breath.
     The 0.65s delay on pill-life matches the reveal's end so
     there's no transform jump between them. */
  animation:
    pill-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both,
    pill-life 6s ease-in-out 0.65s infinite;
}

/* second word of the pair drops to row 2, pushed to the right and
   revealed a beat later so the pair lands as a one-two, not a slab */
.audience__pill--second {
  grid-row: 2;
  justify-self: end;
  animation:
    pill-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both,
    pill-life 6s ease-in-out 0.77s infinite;
}

/* the pair's second word dr

/* the word rides above the sheen so the passing light never veils it */
.audience__pill-label {
  position: relative;
  z-index: 1;
}

/* soft sheen sweep across the active line, beneath the word. The 6s
   cycle is mostly at rest (the sweep itself is ~1.2s), so the line
   breathes most of the time and the light feels like an occasional
   accent. */
.audience__pill::after {
  animation: pill-sheen 6s linear infinite;
  background: linear-gradient(105deg, transparent 38%, oklch(1 0 0 / 0.45) 50%, transparent 62%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-130%);
  z-index: 0;
}

@keyframes pill-reveal {
  from {
    opacity: 0;
    transform: translateY(60%);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes pill-life {
  0%, 100% { transform: translate(0, 0) rotate(0deg) rotateY(0deg) rotateX(0deg); }
  25%      { transform: translate(4px, -2px) rotate(-0.6deg) rotateY(3deg) rotateX(2deg); }
  50%      { transform: translate(6px, -1px) rotate(0deg) rotateY(-2deg) rotateX(-1deg); }
  75%      { transform: translate(-3px, -2px) rotate(-0.4deg) rotateY(-3deg) rotateX(-2deg); }
}

@keyframes pill-sheen {
  0%   { transform: translateX(-130%); }
  20%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .audience__pill,
  .audience__pill::after {
    animation: none;
  }
}
.customer-benefit {
  background: var(--color-honey-light);
  border: 1px solid color-mix(in oklch, var(--color-honey) 22%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-7);
}

.customer-benefit__inner {
  display: grid;
  gap: var(--space-8);
}

.customer-benefit__text {
  display: grid;
  gap: var(--space-4);
}

.customer-benefit__heading {
  color: var(--color-honey);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.customer-benefit__body {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  max-width: 42rem;
}

.features {
  background:
    linear-gradient(180deg, var(--color-surface-raised), color-mix(in oklch, var(--color-mist) 34%, var(--color-surface-raised)));
  border-block: 1px solid color-mix(in oklch, var(--color-border) 45%, transparent);
  padding: var(--space-10) var(--space-6);
}

.features__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-heading {
  display: grid;
  gap: var(--space-4);
  margin: 0 auto var(--space-8);
  max-width: 42rem;
  text-align: center;
}

.section-heading__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 2.35rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid color-mix(in oklch, var(--color-border) 55%, transparent);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 19rem;
  padding: var(--space-6);
  transition: border-color 250ms ease-out,
              transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 250ms ease-out;
}

.feature-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-6px);
  box-shadow: 0 12px 30px color-mix(in oklch, var(--color-accent) 6%, transparent);
}

.feature-card__icon {
  align-items: center;
  border-radius: var(--radius-md);
  display: inline-grid;
  height: 3.25rem;
  justify-content: center;
  margin-bottom: var(--space-5);
  width: 3.25rem;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.1) rotate(-3deg);
}

.feature-card__icon svg {
  height: 1.75rem;
  width: 1.75rem;
}

.feature-card__icon--accent {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.feature-card__icon--secondary {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}

.feature-card:nth-child(3) .feature-card__icon {
  background: var(--color-mist);
  color: var(--color-mist-strong);
}

.feature-card__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.feature-card__desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

.feature-card__proof {
  background: color-mix(in oklch, var(--color-honey-light) 72%, var(--color-surface-raised));
  border-radius: var(--radius-md);
  color: color-mix(in oklch, var(--color-text) 78%, var(--color-honey));
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: auto 0 0;
  padding: var(--space-4);
}

.feature-card__image {
  aspect-ratio: 1.35;
  border: 1px solid color-mix(in oklch, var(--color-border) 35%, transparent);
  border-radius: var(--radius-md);
  display: block;
  margin-top: auto;
  object-fit: cover;
  width: 100%;
}

.feature-card__image--muted {
  filter: saturate(0.65);
  transition: filter 150ms ease-out;
}

.feature-card:hover .feature-card__image--muted {
  filter: saturate(1);
}

.allergen-tags {
  align-content: end;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, max-content));
  margin-top: auto;
  padding-top: var(--space-6);
}

.allergen-tags span {
  background: color-mix(in oklch, var(--color-secondary-light) 72%, var(--color-surface));
  border: 1px solid color-mix(in oklch, var(--color-secondary) 18%, transparent);
  border-radius: var(--radius-round);
  color: var(--color-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-3);
  text-transform: uppercase;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 200ms ease,
              color 200ms ease;
  cursor: default;
}

.allergen-tags span:hover {
  transform: translateY(-2px) scale(1.05);
  background: var(--color-secondary);
  color: var(--color-surface);
}

.how-it-works {
  background: var(--color-surface-raised);
  border-block: 1px solid color-mix(in oklch, var(--color-border) 45%, transparent);
  padding: var(--space-10) var(--space-6);
}

.how-it-works__inner {
  margin: 0 auto;
  max-width: 1200px;
}

.how-it-works .eyebrow {
  margin-bottom: var(--space-8);
  text-align: center;
}

.how-it-works__steps {
  counter-reset: how-it-works;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.how-it-works__steps li {
  display: grid;
  gap: var(--space-3);
  grid-template-rows: auto 1fr;
  justify-items: center;
  text-align: center;
}

.how-it-works__number {
  color: var(--color-accent-light);
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.how-it-works__steps li div {
  display: grid;
  gap: var(--space-2);
}

.how-it-works__steps li h3 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.how-it-works__steps li p {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.mid-cta {
  align-items: center;
  background:
    radial-gradient(32rem 18rem at 85% -10%, color-mix(in oklch, var(--color-honey-light) 55%, transparent), transparent 72%),
    var(--color-surface);
  border: 1px solid color-mix(in oklch, var(--color-border) 55%, transparent);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  margin-top: var(--space-7);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}

.mid-cta__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.mid-cta__note {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.how-it-works__time-commitment {
  border: 1px solid color-mix(in oklch, var(--color-accent-light) 65%, transparent);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--space-8);
  padding: var(--space-2) var(--space-5);
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.experience {
  padding: var(--space-10) var(--space-6);
}

.experience__inner {
  margin: 0 auto;
  max-width: 46rem;
}

.experience__content {
  display: grid;
  gap: var(--space-5);
}

.experience__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
}

.experience__text {
  color: var(--color-text-muted);
  font-size: 1.08rem;
  line-height: 1.75;
  margin: 0;
}

.benefits {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.benefits li {
  color: var(--color-text);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1.35rem 1fr;
}

.benefits li::before {
  color: var(--color-accent);
  content: "✓";
  font-weight: 700;
}

/* ── Pain ── */

.pain {
  background: var(--color-honey-light);
  border-block: 1px solid color-mix(in oklch, var(--color-honey) 28%, transparent);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.pain__inner {
  display: grid;
  gap: var(--space-5);
  margin: 0 auto;
  max-width: 42rem;
}

.pain .eyebrow {
  color: color-mix(in oklch, var(--color-text) 55%, var(--color-honey));
}

.pain__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.pain__content p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0;
}

/* ── Credibility ── */

.credibility {
  background: var(--color-surface-raised);
  border-bottom: 1px solid color-mix(in oklch, var(--color-border) 45%, transparent);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.credibility__inner {
  display: grid;
  gap: var(--space-5);
  margin: 0 auto;
  max-width: 42rem;
}

.credibility__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.credibility__content p {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

/* ── FAQ ── */

.faq {
  background: var(--color-bg);
  border-bottom: 1px solid color-mix(in oklch, var(--color-border) 45%, transparent);
  padding: var(--space-10) var(--space-6);
}

.faq__inner {
  margin: 0 auto;
  max-width: 54rem;
}

.faq__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 var(--space-7);
}

.faq__list {
  display: grid;
  gap: 0;
}

.faq__item {
  border-top: 1px solid color-mix(in oklch, var(--color-border) 55%, transparent);
  transition: background-color 250ms ease, padding-inline 250ms ease;
  border-radius: var(--radius-md);
  margin-block: var(--space-1);
}

.faq__item:hover {
  background-color: color-mix(in oklch, var(--color-surface-raised) 40%, transparent);
}

.faq__item[open] {
  background-color: var(--color-surface);
  box-shadow: 0 4px 20px oklch(0 0 0 / 0.02);
  margin-block: var(--space-3);
  border-color: transparent;
}

.faq__item:last-child {
  border-bottom: 1px solid color-mix(in oklch, var(--color-border) 55%, transparent);
}
.faq__item[open]:last-child {
  border-bottom-color: transparent;
}

.faq__question {
  align-items: center;
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) 1.25rem;
  line-height: 1.3;
  list-style: none;
  padding: var(--space-4) var(--space-5);
  transition: color 200ms ease, padding-inline 200ms ease;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  color: var(--color-accent);
  content: "+";
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 400;
  justify-self: end;
  line-height: 1;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq__item[open] .faq__question {
  color: var(--color-accent);
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-5);
}

@keyframes faq-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq__item[open] .faq__answer {
  animation: faq-slide-in 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.faq__answer p {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  max-width: 46rem;
}

/* ── CTA extras ── */

.hero__identity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.badge--location,
.badge--etymology {
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--color-border) 65%, transparent);
  color: var(--color-text-muted);
  cursor: default;
  font-size: 0.68rem;
}

.cta-section {
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.cta-section__inner {
  display: grid;
  gap: var(--space-5);
  margin: 0 auto;
  max-width: 34rem;
  justify-items: center;
}

.cta-section__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0;
}

.cta-section__note {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.footer {
  background: var(--color-inverse);
  color: var(--color-inverse-text);
  padding: var(--space-8) var(--space-6);
}

.footer__inner {
  align-items: center;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 auto;
  max-width: 1200px;
}

.footer__logo {
  color: var(--color-inverse-text);
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.footer__tagline {
  font-size: 0.8125rem;
  margin: var(--space-1) 0 0;
  opacity: 0.65;
}

.footer__links {
  display: grid;
  gap: var(--space-5);
  grid-auto-flow: column;
}

.footer__right {
  align-items: flex-end;
  display: grid;
  gap: var(--space-4);
  justify-items: end;
}

.footer__samples {
  display: grid;
  gap: var(--space-3);
  justify-items: end;
}

.footer__samples h2 {
  color: var(--color-accent-light);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.footer__sample-links {
  display: grid;
  gap: var(--space-2);
  grid-auto-flow: column;
  justify-content: flex-end;
}

.footer__sample-link {
  background: color-mix(in oklch, var(--color-inverse-text) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-inverse-text) 16%, transparent);
  border-radius: var(--radius-round);
  color: var(--color-inverse-text);
  font-size: 0.8125rem;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.footer__sample-link:hover {
  background: color-mix(in oklch, var(--color-accent-light) 18%, transparent);
  border-color: color-mix(in oklch, var(--color-accent-light) 42%, transparent);
  color: var(--color-accent-light);
}

.footer__link {
  color: var(--color-inverse-text);
  font-size: 0.875rem;
  opacity: 0.72;
  text-decoration: none;
  transition: color 150ms ease-out, opacity 150ms ease-out;
}

.footer__link:hover {
  color: var(--color-accent-light);
  opacity: 1;
}

@media (max-width: 980px) {
  .hero__inner,
  .experience__inner,
  .audience__inner {
    grid-template-columns: 1fr;
  }

  .how-it-works__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    padding-top: var(--space-8);
  }

  .hero__inner {
    gap: var(--space-8);
  }

  .hero__title {
    font-size: 4.15rem;
    max-width: 10ch;
  }

  .hero__subtitle {
    font-size: 1.08rem;
  }

  .hero__mockup {
    min-height: 30rem;
    width: min(100%, 42rem);
  }

  .hero__content {
    max-width: 44rem;
  }

  .feature-card {
    min-height: auto;
  }

  .experience__content {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .header {
    padding: var(--space-4) var(--space-4) 0;
  }

  .header__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    position: relative;
  }

  .header__toggle {
    display: flex;
  }

  /* Transform to X when active */
  .header__toggle--active .header__toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    background-color: var(--color-accent);
  }
  .header__toggle--active .header__toggle-line:nth-child(2) {
    opacity: 0;
  }
  .header__toggle--active .header__toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background-color: var(--color-accent);
  }

  .header__nav {
    background: color-mix(in oklch, var(--color-surface) 96%, var(--color-bg));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in oklch, var(--color-border) 62%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px oklch(0 0 0 / 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    left: var(--space-4);
    opacity: 0;
    padding: var(--space-4);
    pointer-events: none;
    position: absolute;
    right: var(--space-4);
    top: calc(100% + var(--space-2));
    transform: translateY(-10px);
    transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
    width: auto;
    z-index: 99;
  }

  .header__nav--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .header__nav .header__link {
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
  }

  .header__nav .header__link:hover,
  .header__nav .header__link--active {
    background: var(--color-accent-light);
    color: var(--color-accent);
  }

  .header__nav .btn {
    margin-top: var(--space-2);
    min-height: 2.75rem;
    width: 100%;
    justify-content: center;
  }

  .hero,
  .features,
  .how-it-works,
  .experience,
  .cta-section {
    padding: var(--space-8) var(--space-5);
  }

  .hero {
    padding-top: var(--space-6);
  }

  .hero__inner,
  .experience__inner {
    gap: var(--space-6);
  }

  .hero__content {
    gap: var(--space-5);
  }

  .hero__title {
    font-size: 2.8rem;
    max-width: 9.5ch;
  }

  .hero__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }

  .hero__note {
    font-size: 0.85rem;
  }

  /* The location and etymology pills are longer than a phone line. */
  .hero__identity .badge {
    white-space: normal;
  }

  .eyebrow {
    letter-spacing: 0.06em;
    line-height: 1.45;
    max-width: 100%;
  }

  .audience {
    padding: var(--space-7) var(--space-5);
  }

  .audience__pill {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    padding: var(--space-2) var(--space-3);
  }

  .audience__pill--active {
    padding-inline: var(--space-4);
  }

  .hero__mockup {
    min-height: auto;
    width: 100%;
  }

  .menu-sheet {
    padding: var(--space-5);
    transform: none;
  }

  .menu-sheet__title {
    font-size: 2.35rem;
  }

  .menu-sheet__footer {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .menu-sheet__footer span {
    line-height: 1.35;
    text-align: left;
  }

  .qr-card {
    margin-top: var(--space-4);
    position: static;
    transform: none;
  }

  .qr-card {
    margin-inline: auto;
    width: min(100%, 11rem);
  }

  .hero__actions {
    grid-template-columns: 1fr;
  }

  .section-heading__title,
  .feature-card__title,
  .experience__title,
  .cta-section__title {
    font-size: 2rem;
  }

  .features__grid {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__right,
  .footer__samples {
    align-items: center;
    justify-items: center;
  }

  .footer__sample-links {
    grid-auto-flow: row;
    justify-content: center;
  }

  .customer-benefit {
    padding: var(--space-6) var(--space-5);
  }

  .customer-benefit__body {
    font-size: 1.15rem;
  }

  .how-it-works {
    padding: var(--space-8) var(--space-5);
  }

  .how-it-works__steps {
    grid-template-columns: 1fr;
  }

  .how-it-works__number {
    font-size: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card__image--muted,
  .footer__link,
  .header__link {
    transition-duration: 0ms;
  }

  .feature-card:hover {
    transform: none;
  }

  .hero__content > *,
  .hero__mockup {
    animation: none;
  }
}

.public-menu {
  background: var(--color-bg);
  color: var(--color-text);
  display: grid;
  gap: var(--space-7);
  margin: 0 auto;
  max-width: 42rem;
  min-height: 100vh;
  padding: var(--space-7) var(--space-5);
}

/* Public Menu Improvements */
.public-menu__header,
.public-menu__meta,
.public-menu__category,
.public-menu__empty,
.public-menu__disclaimer {
  display: grid;
  gap: var(--space-3);
}

.public-menu__header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-6);
}

.public-menu__header p:first-child {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.public-menu__header h1,
.public-menu__category h2,
.public-menu__empty h2 {
  font-family: var(--font-heading);
  margin: 0;
}

.public-menu__header h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.public-menu__category h2 {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.public-menu__header p,
.public-menu__category p,
.public-menu__empty p {
  margin: 0;
}

.public-menu__header nav,
.public-menu__meta {
  display: grid;
  gap: var(--space-2);
  grid-auto-flow: column;
  justify-content: start;
}

.public-menu__header nav a {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  font-size: 0.875rem;
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

.public-menu__meta {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: 0.875rem;
  justify-content: space-between;
}

.public-menu__meta-main {
  display: flex;
  gap: var(--space-4);
}

.public-menu__price {
  color: var(--color-honey);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.public-menu__item {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: var(--space-5);
}

.public-menu__item strong {
  color: var(--color-honey);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.public-menu__item + .public-menu__item {
  border-top: 1px solid var(--color-border);
}

.public-menu__item--sold-out {
  opacity: 0.6;
}

.public-menu__badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  margin-left: 0.5rem;
  vertical-align: middle;
  background: var(--color-surface-deep);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.public-menu__time-badge {
  align-items: center;
  background: var(--color-honey-light);
  border: 1px solid var(--color-honey);
  border-radius: var(--radius-round);
  color: var(--color-text);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
}

.public-menu__time-badge::before {
  content: "";
  background: currentColor;
  display: inline-block;
  height: 0.75rem;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") no-repeat center / contain;
  width: 0.75rem;
}

.public-menu__item-header {
  display: grid;
  align-items: center;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.public-menu__item-header h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.public-menu__item p {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
}

.public-menu__cultural-note {
  font-style: italic;
  font-size: 0.9rem;
  margin-top: var(--space-2);
  opacity: 0.85;
}

.public-menu__allergens,
.public-menu__disclaimer {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.public-menu__allergens {
  margin: var(--space-2) 0 0;
}

.public-menu__allergens > summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: var(--space-2);
  list-style: none;
  min-height: 44px;
  padding: 0;
}

.public-menu__allergens > summary::-webkit-details-marker {
  display: none;
}

.public-menu__allergens-codes {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.public-menu__allergens-toggle {
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  text-transform: uppercase;
}

.public-menu__allergens[open] .public-menu__allergens-toggle::before {
  content: attr(data-hide);
}

.public-menu__allergens:not([open]) .public-menu__allergens-toggle::before {
  content: attr(data-show);
}

.public-menu__allergens-full {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: var(--space-2) 0 0;
  max-width: 32rem;
}

.public-menu__disclaimer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  padding-top: var(--space-5);
}

.public-menu__preview-banner {
  background: var(--color-honey-light);
  border: 1px solid var(--color-honey);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  text-align: center;
}

.public-menu__preview-banner p {
  color: color-mix(in oklch, var(--color-text) 70%, var(--color-honey));
  font-weight: 600;
  margin: 0;
}

.public-menu__attribution {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding-top: var(--space-5);
  text-align: center;
}

.public-menu__attribution a {
  color: var(--color-accent);
}

@media (max-width: 520px) {
  .public-menu__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .public-menu__meta-main {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .public-menu__item,
  .public-menu__item-header {
    grid-template-columns: 1fr;
  }
}

.public-menu__acquisition-banner {
  background: var(--color-honey-light);
  border: 1px solid color-mix(in oklch, var(--color-honey) 28%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

.public-menu__acquisition-banner p {
  color: color-mix(in oklch, var(--color-text) 78%, var(--color-honey));
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.public-menu__acquisition-banner a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Group menus (espichas, comidas de empresa) */
.public-menu__groups-link {
  display: flex;
  justify-content: center;
}

.group-menus__grid {
  container-type: inline-size;
  display: grid;
  gap: var(--space-5);
}

.group-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.group-card h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0;
}

.group-card h2 a {
  color: inherit;
  text-decoration: none;
}

.group-card h2 a:hover,
.group-card h2 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.group-card__price {
  color: var(--color-honey);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
}

.group-card__price span,
.public-menu__price small {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
}

.group-card__meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.group-card .btn {
  justify-self: start;
}

@container (min-width: 36rem) {
  .group-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .group-card h2,
  .group-card__meta,
  .group-card p:not(.group-card__price) {
    grid-column: 1;
  }

  .group-card__price {
    grid-column: 2;
    grid-row: 1;
    text-align: end;
  }

  .group-card .btn {
    grid-column: 2;
    justify-self: end;
  }
}

.group-menu__description {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

.group-menu__booking {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.group-menu__booking h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0;
}

.group-menu__or,
.group-menu__note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

.group-menu__sent {
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.group-menu__sent p {
  margin: 0;
}

.btn--whatsapp {
  background: var(--color-accent);
  border-color: transparent;
  color: #fff;
  justify-self: stretch;
  min-height: 48px;
  text-align: center;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background: var(--color-accent-hover);
  color: #fff;
}

.booking-form {
  display: grid;
  gap: var(--space-4);
}

.booking-form__honeypot {
  position: absolute;
  left: -10000px;
  height: 1px;
  overflow: hidden;
  width: 1px;
}

/* align-content: start keeps a field from stretching to its row neighbour;
   without it the date box grows and drops when "Personas" carries a hint. */
.booking-form__field {
  align-content: start;
  display: grid;
  gap: var(--space-1);
}

.booking-form__field label {
  font-size: 0.9rem;
  font-weight: 600;
}

.booking-form__field input,
.booking-form__field textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;
  box-sizing: border-box;
  height: 48px;
  line-height: 1.5;
  padding: 0 var(--space-3);
  width: 100%;
}

/* iOS Safari gives an empty date input an intrinsic width wider than the
   field, so it pokes out of the card. */
.booking-form__field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.booking-form__field input[type="date"]::-webkit-date-and-time-value {
  text-align: start;
}

.booking-form__field textarea {
  height: auto;
  padding: var(--space-2) var(--space-3);
  min-height: 6rem;
  resize: vertical;
}

.booking-form__field input:focus-visible,
.booking-form__field textarea:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.booking-form__field input:user-invalid,
.booking-form__field input.field--invalid {
  border-color: var(--color-danger);
}

.booking-form__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.booking-form .btn--primary {
  min-height: 48px;
}

.group-menu__summary {
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.group-menu__price {
  color: var(--color-honey);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 7vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.group-menu__price span {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
}

.group-menu__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.group-menu__facts li {
  background: var(--color-surface-raised);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.9rem;
  padding: var(--space-1) var(--space-3);
}

.group-menu__summary-cta {
  justify-self: start;
  margin-top: var(--space-2);
}

.group-menu__booking {
  scroll-margin-top: var(--space-5);
}

.group-menu__price,
.group-card__price {
  color: color-mix(in oklch, var(--color-honey) 65%, var(--color-text));
}

.booking-form__error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin: 0;
}

.booking-form__hint {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.booking-form .btn--secondary {
  min-height: 48px;
}

.group-menu__sent:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.group-menus .public-menu__attribution a,
.group-menu .public-menu__attribution a {
  display: inline-block;
  padding: var(--space-3);
}

.feature-card--wide {
  grid-column: 1 / -1;
}

/* Paper grain lives on the paper: a background layer, no blended overlay. */
.landing {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px, var(--color-bg);
  background-blend-mode: multiply, normal;
}

.feature-card {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-blend-mode: multiply;
}

.hero__mockup .menu-sheet {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    linear-gradient(color-mix(in oklch, var(--color-border) 16%, transparent) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
    linear-gradient(90deg, color-mix(in oklch, var(--color-border) 16%, transparent) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
    var(--color-surface);
  background-blend-mode: multiply, normal, normal, normal;
}

/* Scroll-driven reveals: progressive enhancement, static everywhere else. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes rise-in {
      from {
        opacity: 0;
        translate: 0 28px;
        scale: 0.985;
      }
    }

    @keyframes hero-recede {
      to {
        opacity: 0.6;
        translate: 0 -24px;
      }
    }

    .feature-card,
    .how-it-works__steps li,
    .faq__item {
      animation: rise-in auto cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }

    /* section wrappers can be taller than a phone screen: use a length, not a percentage */
    .audience__inner,
    .pain__inner,
    .experience__inner,
    .credibility__inner,
    .cta-section__inner {
      animation: rise-in auto cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 220px;
    }

    .feature-card:nth-child(2) { animation-range: entry 12% entry 62%; }
    .feature-card:nth-child(4) { animation-range: entry 12% entry 62%; }

    .hero__mockup {
      animation: hero-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) 220ms backwards,
                 hero-recede auto linear forwards;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mockup {
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
  }

  .hero__mockup,
  .hero__mockup .menu-sheet,
  .qr-card {
    transition: none;
  }
}

/* Print and reader views never scroll, so view-timeline reveals must not hide content. */
@media print {
  .landing * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}

.public-menu__groups-hint {
  font-size: 0.95rem;
  margin: 0;
}

.public-menu__groups-hint a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}