/* pirekua — pass 1: hero, ristra, section 1, signup modal
   Mobile-first. Brand tokens come from the pirekua brand book. */

:root {
  --orange: #F48500;   /* Cempasúchil Orange — core, buttons, wordmark */
  --yellow: #FFC845;   /* Warm Yellow — sweet, highlights */
  --red:    #C1272D;   /* Deep Chili Red — spicy, the "pow" shadow */
  --cream:  #FFF8EC;   /* Warm Cream — page background, never pure white */
  --card:   #FFF1DA;   /* Cream Card — panels and cards */
  --green:  #6B8E4E;   /* Leaf Green — small pops only */
  --ink:    #3A1406;   /* Mole Ink — all text */

  --script: 'Pacifico', cursive;
  --sans:   'Poppins', system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --radius-lg: clamp(24px, 3vw, 32px);
  --pow: 0.04em 0.045em 0 var(--red);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 clamp(28px, 4vw, 40px);
  border: 0;
  border-radius: 999px;
  font: 700 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1 var(--sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.btn--primary {
  background: var(--orange);
  color: var(--ink);
  box-shadow: 4px 5px 0 var(--red);
}
.btn--primary:hover { transform: translate(-1px, -2px); box-shadow: 5px 7px 0 var(--red); }
.btn--primary:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--red); }
.btn--primary:focus-visible { outline-offset: 5px; border-radius: 999px; }
.btn--block { width: 100%; }

/* ============ HERO ============ */
.hero {
  /* tuning knobs */
  --hero-peek: 0px;                     /* > 0 lifts the ristra into the first screen; < 0 pushes it further down */
  --hero-pad-top: 64px;                 /* clear of the language toggle */
  --hero-pad-bottom: 40px;
  --hero-gap-tagline: clamp(8px, 1.6vh, 18px);   /* lockup → tagline */
  --hero-gap-sub: 2px;                  /* tagline → subhead */
  --hero-gap-btn: clamp(16px, 3vh, 32px);        /* subhead → button */
  --lockup-w: min(86vw, 820px, calc(130vh - 320px));   /* sized by width and by screen height */
  --lock-half: calc(var(--lockup-w) / 2);
  --bloom-spin: 60s;                    /* one full turn of the sunrise bloom */
  --dot-lift: 0.07em;                   /* raises the chile over the i */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* fills the first screen, so the ristra starts just below the fold */
  min-height: calc(100vh - var(--hero-peek));
  padding: var(--hero-pad-top) var(--gutter) var(--hero-pad-bottom);
  isolation: isolate;
}
@supports (height: 100svh) {
  .hero {
    --hero-gap-tagline: clamp(8px, 1.6svh, 18px);
    --hero-gap-btn: clamp(16px, 3svh, 32px);
    --lockup-w: min(86vw, 820px, calc(130svh - 320px));
    min-height: calc(100svh - var(--hero-peek));
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Lockup + sunrise bloom (geometry matches brand book board 01).
   Stacking: .lockup is its own stacking context (isolation), the bloom is the
   bottom layer (z 0) and the wordmark sits on top (z 1). The bloom's window has
   an explicit height and clips with clip-path as well as overflow, and is its own
   compositing layer; on phones the wordmark gets its own layer too (phone block
   below). So WebKit/iOS never paints the spinning flower unclipped or in front of
   the letters. The tagline, subhead and button sit above (z 1). */
.lockup {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: var(--lockup-w);
  margin-top: calc(var(--lockup-w) * 0.138);   /* room for the bloom rising above the wordmark */
}
.lockup__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
.lockup__bloom {
  position: absolute;
  z-index: 0;
  left: 2.73%;
  top: 0;
  width: 94.66%;
  margin-top: -13.8%;          /* % of width: the bloom rises above the wordmark */
  /* Window = 727 × 380 of the flower: only the top shows, a sunrise.
     Explicit height (94.66% × 380/727 of the lockup width) rather than
     aspect-ratio alone: WebKit/iOS ignores aspect-ratio on this absolutely
     positioned box and grew the window to the whole flower. */
  height: calc(var(--lockup-w) * 0.494785);
  aspect-ratio: 727 / 380;
  overflow: hidden;
  clip-path: inset(0);         /* same window again; WebKit honours it on composited children */
  transform: translateZ(0);    /* the window is a layer too, so it clips the spinning layer inside it */
}
.lockup__bloom img {
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;   /* the flower's true center */
  will-change: transform;
  animation: bloom-spin var(--bloom-spin) linear infinite;
}
@keyframes bloom-spin { to { transform: rotate(360deg); } }

/* Signature tagline: one line */
.tagline {
  margin: var(--hero-gap-tagline) 0 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.75rem, min(8vw, 6.4vh), 3.6rem);
  line-height: 1.45;
  color: var(--orange);
  text-shadow: var(--pow);
  letter-spacing: 0;
  white-space: nowrap;
}
@supports (height: 100svh) { .tagline { font-size: clamp(1.75rem, min(8vw, 6.4svh), 3.6rem); } }

/* The chile replaces the dot of the i (brand book method). Offsets are measured
   from the start of "amor y risas." so they hold at every font size. */
.tagline__dotted {
  position: relative;
  display: inline-block;
  line-height: 1.45;
  white-space: nowrap;
}
.tagline__i { clip-path: inset(0.833em -0.5em -0.5em -0.5em); }
.tagline__chile {
  position: absolute;
  left: 3.7005em;
  top: calc(0.3739em - var(--dot-lift));
  width: 0.2715em;
  height: 0.4057em;
  max-width: none;
}

.tagline, .hero__sub, .hero .btn { position: relative; z-index: 1; }
.hero__sub {
  margin: var(--hero-gap-sub) 0 0;
  font-size: clamp(1rem, min(0.8rem + 0.6vw, 2.6vh), 1.375rem);
  font-weight: 500;
  line-height: 1.5;
}
@supports (height: 100svh) { .hero__sub { font-size: clamp(1rem, min(0.8rem + 0.6vw, 2.6svh), 1.375rem); } }
@media (min-width: 600px) { .hero__sub { white-space: nowrap; } }

.hero .btn { margin-top: var(--hero-gap-btn); }

/* Hero jars: a loose, hand-placed scatter of transparent cutouts.
   Per jar: --jw width, --r angle, --y center from the top (% of the hero);
   x is --left on phones and tablets, and on desktop --side (-1 left, 1 right)
   with --f (0 = at the lockup's edge, 1 = at the page edge). */
.hero__jars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.jar {
  position: absolute;
  width: calc(var(--jw) * var(--jscale, 1));
  left: var(--left, calc(50% + var(--side) * (var(--lock-half) + (50% - var(--lock-half)) * var(--f))));
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r));
}
.jar img { display: block; width: 100%; height: auto; }
/* Fallback when the cutouts are missing: the studio render with its old crop */
.jar.is-fallback {
  aspect-ratio: 518 / 702;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.jar.is-fallback img { position: absolute; left: -20.8%; top: -16.7%; width: 138.9%; max-width: none; }

/* Two small lines tucked among the jars */
.hero__aside .nobr { white-space: nowrap; }
.hero__aside {
  position: absolute;
  z-index: 2;
  left: var(--left, calc(50% + var(--side) * (var(--lock-half) + (50% - var(--lock-half)) * var(--f))));
  top: var(--y);
  margin: 0;
  max-width: var(--aside-w, 16rem);
  width: max-content;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-align: var(--align, center);
  transform: translate(-50%, -50%) rotate(var(--r));
}

/* Phones and tablets share these angles; tablets set their own sizes and
   positions below, and phones (under 640px) get their own six-jar set after that */
.jar--10, .jar--11, .jar--12 { display: none; }
.jar--1 { --jw: 44px; --r: -18deg;  --left: 22%; --y: 17%; }
.jar--2 { --jw: 36px; --r: 32deg;   --left: 57%; --y: 8%; }
.jar--3 { --jw: 50px; --r: -8deg;   --left: 66%; --y: 17%; }
.jar--4 { --jw: 32px; --r: 70deg;   --left: 88%; --y: 18%; }
.jar--5 { --jw: 46px; --r: -28deg;  --left: 12%; --y: 87%; }
.jar--6 { --jw: 38px; --r: 64deg;   --left: 27%; --y: 92%; }
.jar--7 { --jw: 46px; --r: 12deg;   --left: 41%; --y: 87%; }
.jar--8 { --jw: 34px; --r: -36deg;  --left: 88%; --y: 95%; }
.jar--9 { --jw: 30px; --r: -96deg;  --left: 58%; --y: 95%; }
.hero__aside { font-size: 0.875rem; --aside-w: 9.5rem; }
.hero__aside--tl { --r: -4deg; --left: 23%; --y: 6.5%; --align: left; }
.hero__aside--br { --r: 3deg;  --left: 76%; --y: 85%; --align: right; }

/* Phones only: 6 jars, 3 above and 3 below, 2 of each flavor.
   Above: 1 sweet, 2 smoky, 3 spicy. Below: 5 sweet, 6 spicy, 9 smoky. */
@media (max-width: 639.98px) {
  .lockup__img { transform: translateZ(0); }   /* wordmark on its own layer, above the spinning bloom */
  .jar--4, .jar--7, .jar--8 { display: none; }
  .jar--1 { --jw: 46px; --r: -18deg; --left: 19%; --y: 20%; }
  .jar--2 { --jw: 34px; --r: 34deg;  --left: 57%; --y: 11%; }
  .jar--3 { --jw: 50px; --r: -9deg;  --left: 80%; --y: 19%; }
  .jar--5 { --jw: 50px; --r: -26deg; --left: 15%; --y: 88%; }
  .jar--6 { --jw: 38px; --r: 62deg;  --left: 41%; --y: 94%; }
  .jar--9 { --jw: 32px; --r: -98deg; --left: 66%; --y: 96%; }
  .hero__aside--br { --y: 87%; }   /* a little more air under the button */
}

@media (min-width: 640px) {
  .jar--1 { --jw: 64px; --left: 20%; --y: 15%; }
  .jar--2 { --jw: 48px; --left: 47%; --y: 8%; }
  .jar--3 { --jw: 72px; --left: 62%; --y: 14%; }
  .jar--4 { --jw: 44px; --left: 84%; --y: 17%; }
  .jar--5 { --jw: 76px; --left: 10%; --y: 88%; }
  .jar--6 { --jw: 50px; --left: 25%; --y: 92%; }
  .jar--7 { --jw: 60px; --left: 40%; --y: 92%; }
  .jar--8 { --jw: 46px; --left: 92%; --y: 94%; }
  .jar--9 { --jw: 40px; --left: 55%; --y: 94%; }
  .hero__aside { font-size: 0.9375rem; --aside-w: 14rem; }
  .hero__aside--tl { --left: 21%; --y: 5%; }
  .hero__aside--br { --left: 78%; --y: 86%; }
}

/* Desktop: 12 jars in the bands either side of the lockup */
@media (min-width: 1024px) {
  .jar, .hero__aside { --left: initial; }
  .jar--10, .jar--11, .jar--12 { display: block; }
  .jar--1  { --side: -1; --f: 0.40; --y: 30%; --jw: 74px; --r: -16deg; }
  .jar--2  { --side: -1; --f: 0.76; --y: 40%; --jw: 50px; --r: 28deg; }
  .jar--3  { --side: -1; --f: 0.22; --y: 52%; --jw: 56px; --r: -34deg; }
  .jar--4  { --side: -1; --f: 0.60; --y: 62%; --jw: 84px; --r: 76deg; }
  .jar--5  { --side: -1; --f: 0.30; --y: 80%; --jw: 64px; --r: 18deg; }
  .jar--6  { --side: -1; --f: 0.78; --y: 85%; --jw: 44px; --r: -38deg; }
  .jar--7  { --side: 1;  --f: 0.30; --y: 22%; --jw: 80px; --r: 14deg; }
  .jar--8  { --side: 1;  --f: 0.68; --y: 34%; --jw: 52px; --r: -26deg; }
  .jar--9  { --side: 1;  --f: 0.34; --y: 50%; --jw: 64px; --r: 38deg; }
  .jar--10 { --side: 1;  --f: 0.74; --y: 58%; --jw: 92px; --r: -12deg; }
  .jar--11 { --side: 1;  --f: 0.24; --y: 75%; --jw: 48px; --r: -66deg; }
  .jar--12 { --side: 1;  --f: 0.84; --y: 76%; --jw: 40px; --r: 30deg; }
  .hero__aside { --aside-w: 13rem; }
  .hero__aside--tl { --side: -1; --f: 0.55; --y: 13%; }
  .hero__aside--br { --side: 1;  --f: 0.50; --y: 90%; }
}
/* Small laptops: a slightly smaller lockup and jars, so the side bands have room */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero { --lockup-w: min(56vw, 820px, calc(130vh - 320px)); --jscale: 0.78; }
  @supports (height: 100svh) { .hero { --lockup-w: min(56vw, 820px, calc(130svh - 320px)); } }
  .hero__aside { --aside-w: 11rem; font-size: 0.875rem; }
}

/* ============ RISTRA ============ */
.ristra {
  /* sizes: small, large, medium, largest, small */
  --rs-s:  clamp(36px, 5.2vw, 56px);
  --rs-l:  clamp(54px, 7.6vw, 84px);
  --rs-m:  clamp(45px, 6.2vw, 68px);
  --rs-xl: clamp(62px, 8.8vw, 98px);
  --rs-s2: clamp(33px, 4.6vw, 50px);
  --line-y: 26px;
  --ratio: 2.339;     /* icon-mark height / width */
  --hook: 0.0713;     /* where the p loop meets the line, as a share of icon height */
  position: relative;
  height: calc(var(--line-y) + var(--rs-xl) * var(--ratio) * 0.94 + 16px);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ristra__line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--line-y) - 2px);
  height: 4px;
  background: var(--ink);
  z-index: 1;
}
.ristra__chile {
  position: absolute;
  left: var(--x);
  top: calc(var(--line-y) - var(--w) * var(--ratio) * var(--hook));
  width: var(--w);
  height: calc(var(--w) * var(--ratio));
  margin-left: calc(var(--w) * -0.5);
  z-index: 2;
}
.ristra__swing {
  position: absolute;
  inset: 0;
  transform-origin: 65% 7.13%;
  will-change: transform;
}
.ristra__swing img { width: 100%; height: 100%; }
.ristra__thread {
  /* short piece of line drawn over the p loop so the line threads through it */
  position: absolute;
  left: 57.6%;
  width: 14.7%;
  top: calc(var(--w) * var(--ratio) * var(--hook) - 2px);
  height: 4px;
  background: var(--ink);
  z-index: 3;
}
.ristra__chile.is-mirrored .ristra__swing { transform-origin: 35% 7.13%; }
.ristra__chile.is-mirrored .ristra__swing img { transform: scaleX(-1); }
.ristra__chile.is-mirrored .ristra__thread { left: 27.7%; }

/* ============ 1. WHAT IS MEXICAN CHILI CRISP? ============ */
.what {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(72px, 10vw, 128px);
  align-items: center;
}
.what__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 13ch;
}
.what__body {
  margin: clamp(16px, 2vw, 24px) 0 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.6;
}

.family {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(24px, 4vw, 40px) clamp(8px, 2vw, 20px) clamp(18px, 2.6vw, 28px);
  background: var(--card);
  border-radius: var(--radius-lg);
}
.family__jars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2%;
  width: 72%;
}
.family__jars img { width: 32%; height: auto; }
.family__oil { position: relative; z-index: 1; width: 10.5%; margin-left: 3%; }
.family__oil img { width: 100%; height: auto; }
.family__leaf { position: absolute; z-index: 0; height: auto; }
.family__leaf--1 { width: clamp(58px, 8vw, 92px); top: clamp(-30px, -2.6vw, -18px); right: 9%; transform: rotate(-18deg); }
.family__leaf--2 { width: clamp(40px, 5.4vw, 60px); bottom: clamp(-22px, -1.8vw, -14px); left: 5%; transform: rotate(14deg) scaleX(-1); }

@media (min-width: 860px) {
  .what { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

/* ---------- Shared section type ---------- */
.section-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 15ch;
}
.section-body {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  max-width: 36ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.6;
}

/* ============ 2. WHAT DOES IT TASTE LIKE? ============ */
.taste { background: var(--card); }
.taste__inner {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  align-items: center;
}
.taste__second { margin-top: clamp(28px, 3.6vw, 44px); }

/* Media slot: video, GIF, photo or carousel can drop into .media-slot__frame */
.media-slot {
  position: relative;
  padding: clamp(22px, 4vw, 44px);
  border-radius: calc(var(--radius-lg) + 8px);
  background-color: var(--cream);
  background-size: 300px 300px;
  background-repeat: repeat;
}
.media-slot__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 6px 8px 0 var(--orange);
}
.media-slot__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.media-slot__chip {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.media-slot__missing {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border: 2px dashed var(--ink);
  border-radius: 8px;
  background: var(--card);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.media-slot .asset-ph { position: absolute; inset: 0; width: auto !important; aspect-ratio: auto !important; border: 0; border-radius: 0; align-items: flex-start; padding-top: 28%; }

@media (min-width: 860px) {
  .taste__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 859px) {
  .taste__media { order: 2; }
}

/* ============ 3. MEET THE LINEUP ============ */
.products {
  /* tuning knobs */
  --products-pad-top: clamp(40px, 5.5vw, 76px);
  --products-pad-bottom: clamp(44px, 6vw, 84px);
  --products-title-gap: clamp(16px, 2.2vw, 28px);   /* heading → cards */
  --pcard-pad: 12px;                                  /* card padding */
  --pcard-gap: clamp(14px, 1.6vw, 18px);             /* space between cards */
  --oil-col: 0.84fr;                                  /* Chili Oil column vs 1fr jar columns (desktop) */
  background: var(--green);
}
.products__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--products-pad-top) var(--gutter) var(--products-pad-bottom);
}
/* Large type, so cream on Leaf Green clears the large-text contrast bar */
.products__title { color: var(--cream); margin-bottom: var(--products-title-gap); }

.products__grid {
  --win-h: clamp(200px, 17vw, 236px);   /* product window height */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Each card spans two rows (window, text) through subgrid, so names line up
     across a row; the 1fr text rows make every card the same height in every layout. */
  grid-auto-rows: minmax(var(--win-h), auto) 1fr;
  gap: var(--pcard-gap);
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 0;                      /* room for the hover lift */
}
@media (min-width: 640px) {
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
@media (min-width: 1024px) {
  .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, var(--oil-col)); max-width: none; }
}

.pcard {
  --frame: var(--ink);                  /* inset border color */
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: var(--pcard-pad);
  border-radius: 24px;
  background: var(--yellow);
  color: var(--ink);
  transition: transform 200ms ease;
}
.pcard--sweet { background: var(--yellow); }
.pcard--smoky { background: var(--orange); }
.pcard--spicy { background: var(--red); color: var(--cream); --frame: var(--cream); }
.pcard--oil   { background: var(--ink);  color: var(--cream); --frame: var(--cream); }
/* Chili Oil: same height, narrower, centered when it shares a row track */
.pcard--oil { justify-self: center; width: 68%; }
@media (min-width: 640px) { .pcard--oil { width: 66%; } }
@media (min-width: 1024px) { .pcard--oil { width: 100%; } }

/* Inset "pressed-in" frame */
.pcard::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  border: 3px solid var(--frame);
  border-radius: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Product window: a cream plate so the studio render sits cleanly on any card color */
.pcard__window {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: var(--win-h);
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
}
/* Out of flow so the tall cutouts never stretch the window past --win-h */
.pcard__crop {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 94%;
}
.pcard__crop img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
/* Fallback when a cutout is missing: the studio render with its old crop */
.pcard__crop.is-fallback {
  left: 50%; right: auto;
  transform: translateX(-50%);
  aspect-ratio: 518 / 702;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.pcard__crop.is-fallback img { position: absolute; left: -20.8%; top: -16.7%; width: 138.9%; height: auto; max-width: none; }
.pcard--oil .pcard__crop.is-fallback { aspect-ratio: 345.6 / 738; }
.pcard--oil .pcard__crop.is-fallback img { left: -62.5%; top: -10.98%; width: 208.3%; }
.pcard__crop .asset-ph { position: absolute; inset: 0; width: auto !important; aspect-ratio: auto !important; }

/* Heat meter: blooms in a cream chip, tucked into the card's bottom corner */
.heat {
  position: absolute;
  z-index: 1;
  bottom: 14px;
  left: 16px;
  display: flex;
  gap: 2px;
  padding: 3px 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
}
.heat img { width: 24px; height: 24px; }
.heat .asset-ph { min-width: 22px; min-height: 22px; width: 22px !important; padding: 0; font-size: 0; border-width: 1px; }

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 6px 6px;
}
.pcard:not(.pcard--oil) .pcard__body { padding-bottom: 38px; }   /* room for the heat meter chip (34px tall, 14px up) */
.pcard--oil { padding: var(--pcard-pad) calc(var(--pcard-pad) - 2px); }
.pcard--oil .pcard__body { padding: 16px 2px 4px; }
.pcard__name {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pcard__tag {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}
.pcard__desc {
  margin: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The whole card is one real button */
.pcard__btn {
  grid-area: 2 / 1;                     /* zero-size, sits in the text cell; ::after covers the card */
  align-self: start;
  width: 0;
  height: 0;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pcard__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 24px;
}
.pcard__btn:focus-visible { outline: none; }
.pcard:has(.pcard__btn:focus-visible) { outline: 3px solid var(--cream); outline-offset: 5px; }

/* Hover and keyboard focus: lift and show the frame */
@media (hover: hover) {
  .pcard:hover { transform: scale(1.05); z-index: 4; }
  .pcard:hover::before { opacity: 1; }
}
.pcard:has(.pcard__btn:focus-visible) { transform: scale(1.05); z-index: 4; }
.pcard:has(.pcard__btn:focus-visible)::before { opacity: 1; }

/* Touch: a quieter frame at rest, full frame and a small press on tap */
@media (hover: none) {
  .pcard::before { opacity: 0.45; border-width: 2px; }
  .pcard:has(.pcard__btn:active) { transform: scale(0.97); }
  .pcard:has(.pcard__btn:active)::before { opacity: 1; border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard::before { transition: none; }
  .pcard:hover,
  .pcard:has(.pcard__btn:focus-visible),
  .pcard:has(.pcard__btn:active) { transform: none; }
}

/* ============ 4. WHAT DO I USE IT FOR? ============ */
.uses__inner {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  align-items: center;
}
.uses__btn { margin-top: clamp(22px, 3vw, 32px); }

@media (min-width: 860px) {
  .uses__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* Cookbook carousel */
.carousel { position: relative; max-width: 560px; margin: 0 auto; width: 100%; }
.carousel__viewport {
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: 6px 8px 0 var(--red);
}
.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.cb-page {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12%;
  overflow: hidden;
  background: var(--card);
  text-align: center;
}
.cb-page__label {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cb-page__chile { position: absolute; width: 13%; top: 9%; right: 10%; transform: rotate(18deg); }
.cb-page__leaf { position: absolute; width: 20%; bottom: 9%; left: 9%; transform: rotate(-12deg); }
.cb-page__rule { position: absolute; left: 9%; right: 9%; top: 7%; height: 3px; border-radius: 2px; background: var(--ink); opacity: 0.85; }
.carousel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.carousel__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}
.carousel__arrow:hover { background: var(--yellow); }
.carousel__arrow:active { transform: scale(0.94); }
.carousel__arrow:focus-visible { border-radius: 999px; }
.carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.carousel__dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carousel__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  transition: width 200ms ease, background-color 200ms ease;
}
.carousel__dot[aria-current="true"]::before { width: 26px; background: var(--orange); }
.carousel__dot:focus-visible { outline-offset: -2px; border-radius: 10px; }

/* ============ 5. HOW MUCH SHOULD I GET? (QUIZ) ============ */
.quiz {
  /* tuning knobs */
  --quiz-pad-top: clamp(40px, 5.5vw, 76px);
  --quiz-pad-bottom: clamp(64px, 9vw, 120px);
  --quiz-title-gap: clamp(16px, 2.2vw, 28px);       /* heading → questions */
  background: var(--orange);
  padding: var(--quiz-pad-top) var(--gutter) var(--quiz-pad-bottom);
}
.quiz__inner { max-width: 1200px; margin: 0 auto; }
.quiz__title {
  margin: 0 0 var(--quiz-title-gap);
  font-weight: 800;
  font-size: clamp(1.75rem, 7.4vw, 5rem);    /* one line from 375px up */
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.quiz__grid { display: grid; gap: clamp(20px, 3vw, 36px); align-items: stretch; }
@media (min-width: 960px) {
  .quiz__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.quiz__questions { display: grid; gap: clamp(16px, 2vw, 22px); }
.qcard {
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 26px);
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: 5px 6px 0 var(--red);
}
.qcard__q {
  float: left;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.3;
}
.qcard__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-size: 1rem;
  font-weight: 800;
}
.choices { clear: both; display: grid; gap: 10px; }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 440px) {
  .choices--3 { grid-template-columns: 1fr; }
  .choices--3 .choice__face { min-height: 56px; }
}
.choice { position: relative; display: block; }
.choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  height: 100%;
  padding: 10px 10px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.choice:hover .choice__face { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.choice__input:checked + .choice__face {
  background: var(--yellow);
  box-shadow: inset 0 0 0 3px var(--ink);
  transform: none;
}
.choice__input:focus-visible + .choice__face { outline: 3px solid var(--ink); outline-offset: 4px; }

.slider { clear: both; display: flex; align-items: center; gap: 16px; }
.slider__input {
  --pct: 0%;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 16px;
  margin: 14px 0;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(to right, var(--yellow) var(--pct), var(--card) var(--pct));
  cursor: pointer;
}
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 3px 4px 0 var(--red);
}
.slider__input::-moz-range-thumb {
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 3px 4px 0 var(--red);
}
.slider__input:focus-visible { outline: 3px solid var(--ink); outline-offset: 10px; }
.slider__value {
  min-width: 3.1ch;
  font-weight: 800;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Result stage */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(460px, 52vw, 600px);
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 32px;
  background: var(--card);
  box-shadow: 6px 8px 0 var(--red);
  text-align: center;
}
.stage > * { grid-area: 1 / 1; }
.stage__idle,
.stage__drum,
.stage__result { display: none; }
.stage[data-state="idle"] .stage__idle,
.stage[data-state="leaving"] .stage__idle { display: flex; }
.stage[data-state="drum"] .stage__drum { display: flex; }
.stage[data-state="result"] .stage__result { display: flex; }

.stage__idle {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: opacity 300ms ease, transform 300ms ease;
}
.stage[data-state="leaving"] .stage__idle { opacity: 0; transform: scale(0.8); }
.btn--big {
  min-height: 72px;
  padding: 0 clamp(28px, 4vw, 44px);
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 5px 0 rgba(193, 39, 45, 0.45);
}
.stage__helper { margin: 0; font-weight: 600; font-size: 0.95rem; }
.stage__idle.is-ready .stage__helper { visibility: hidden; }

.stage__drum { gap: 18px; align-items: flex-end; }
.stage__drum img { width: clamp(30px, 4vw, 42px); height: auto; animation: drum 760ms ease-in-out infinite; }
.stage__drum img:nth-child(2) { animation-delay: 140ms; }
.stage__drum img:nth-child(3) { animation-delay: 280ms; }
@keyframes drum {
  0%, 100% { transform: translateY(0) scale(0.85); }
  45% { transform: translateY(-22px) scale(1.12); }
}

.stage__result {
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.stage__number {
  margin: 0;
  font-weight: 800;
  font-size: clamp(5rem, 3rem + 9vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-shadow: var(--pow);
  font-variant-numeric: tabular-nums;
  animation: pop 420ms cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes pop { from { opacity: 0; transform: scale(0.5); } }
.stage__label {
  margin: 8px 0 0;
  max-width: 22ch;
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.3;
}
.stage__joke,
.stage__cta {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.stage__joke { margin: 10px 0 0; font-weight: 700; font-size: 1.0625rem; }
.stage__cta { margin-top: 18px; }
.stage__joke.is-in,
.stage__cta.is-in { opacity: 1; transform: none; }
.stage__cta:not(.is-in) .btn { visibility: hidden; }
.stage:focus { outline: none; }
.stage__cta:not(.is-in) ~ .stage__again { visibility: hidden; }
.stage__again {
  min-height: 44px;
  margin-top: 6px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 0.95rem var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Basket scene: 280 × 250 stage. The brand book basket is drawn twice: behind the jars,
   and in front of them clipped to the rim band and below, so jars sit inside it. */
.basket-scene {
  --bs: 1.08;                         /* scene scale */
  --basket-clip: 32%;                 /* top of the rim band, as a share of the basket image height */
  position: relative;
  width: 280px;
  height: 250px;
  margin: 10px 0 calc(250px * (var(--bs) - 1));
  flex: none;
  transform: scale(var(--bs));
  transform-origin: top center;
}
@media (min-width: 480px) { .basket-scene { --bs: 1.3; } }
.basket-scene__back,
.basket-scene__front {
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 200px;
  height: 172px;                      /* basket.png is 600 × 516 (1.16 : 1) */
  max-width: none;
}
.basket-scene__back { z-index: 1; }
.basket-scene__front { z-index: 3; clip-path: inset(var(--basket-clip) 0 0 0); }
/* Fallback while basket.png is missing: the drawn basket.svg (4 : 3) */
.basket-scene.is-fallback-basket { --basket-clip: 28.4%; }
.basket-scene.is-fallback-basket .basket-scene__back,
.basket-scene.is-fallback-basket .basket-scene__front { height: 150px; }
.basket-scene__jars { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.minijar {
  position: absolute;
  width: 26px;
  height: 35px;
  will-change: transform, opacity;
}
.minijar img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.minijar.is-tumbler { z-index: 4; }
/* Fallback while jar-*.png is missing: the studio render with its old crop */
.minijar.is-fallback {
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
.minijar.is-fallback img { position: absolute; left: -20.8%; top: -16.7%; width: 138.9%; height: auto; max-width: none; }

/* ============ 6. WHAT IS SPECIAL ABOUT PIREKUA? ============ */
.story { padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(80px, 11vw, 140px); }
.story__panel {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 88px);
  border-radius: calc(var(--radius-lg) + 8px);
  background: var(--card);
  align-items: center;
}
@media (min-width: 860px) {
  .story__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.story__text { position: relative; z-index: 1; }
.placeholder-copy {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 34ch;
  padding: 18px 20px;
  border: 2px dashed var(--ink);
  border-radius: 16px;
  background: var(--cream);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
}
.photo-slot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  margin: 0 auto;
  padding: 24px;
  border: 2px dashed var(--ink);
  border-radius: var(--radius-lg);
  background: var(--cream);
  font-weight: 600;
  text-align: center;
}
.story__leaf { position: absolute; height: auto; z-index: 0; }
.story__leaf--1 { width: clamp(48px, 6vw, 72px); top: clamp(-26px, -2.4vw, -18px); left: 7%; transform: rotate(-16deg); }
.story__leaf--2 { width: clamp(60px, 8vw, 96px); bottom: clamp(-26px, -2vw, -16px); right: 12%; transform: rotate(10deg) scaleX(-1); }

/* ============ FOOTER ============ */
.footer {
  --pw: clamp(176px, 30vw, 360px);       /* width of the tall p */
  position: relative;
  overflow: hidden;
  min-height: max(220px, calc(var(--pw) * 0.92 + 40px));
  background: var(--green);
  color: var(--cream);
}
.footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) calc(var(--pw) * 0.9 + var(--gutter)) clamp(40px, 5vw, 64px) var(--gutter);
}
.footer__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* large text (≥ 18.66px bold) so cream on Leaf Green clears the contrast bar */
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
}
.footer__link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.footer__link:focus-visible { outline-color: var(--cream); }
/* Treatment A: the tall p runs off the right edge, cropped through the chile cap */
.footer__p {
  position: absolute;
  z-index: 0;
  right: calc(var(--pw) * -0.16);
  bottom: calc(var(--pw) * -1.45);
  width: var(--pw);
  height: auto;
  max-width: none;
}
.footer .asset-ph { position: absolute; right: 16px; bottom: 16px; width: 160px !important; aspect-ratio: auto !important; }

/* ============ LANGUAGE TOGGLE ============ */
.lang-toggle {
  position: fixed;
  z-index: 60;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 3px 4px 0 var(--red);
  transition: transform 260ms ease;
}
.lang-toggle__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 0.875rem/1 var(--sans);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.lang-toggle__btn[aria-pressed="true"] { background: var(--orange); }
.lang-toggle__btn:focus-visible { outline-offset: 1px; border-radius: 999px; }
.lang-toggle__sep { padding: 0 1px; font-weight: 500; font-size: 0.875rem; }

/* Touch screens: the toggle becomes a swipeable switch. An orange thumb slides
   behind the active label; the pill looks exactly as before. JS adds .has-thumb
   once it has measured the labels, so without JS the tap toggle above stays. */
.lang-toggle__thumb { display: none; }
@media (pointer: coarse) {
  .lang-toggle.has-thumb {
    --toggle-slide: 200ms;   /* thumb slide when the language changes */
    --toggle-hit: 12px;      /* invisible extra grab area around the pill */
    touch-action: none;      /* the toggle only; the page scrolls as usual */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .lang-toggle.has-thumb::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--toggle-hit));
    border-radius: 999px;
  }
  .lang-toggle.has-thumb .lang-toggle__thumb {
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: var(--thumb-y, 3px);
    width: var(--thumb-w, 44px);
    height: var(--thumb-h, 44px);
    border-radius: 999px;
    background: var(--orange);
    transform: translateX(var(--thumb-x, 3px));
    pointer-events: none;
  }
  .lang-toggle.has-thumb.is-ready .lang-toggle__thumb { transition: transform var(--toggle-slide) ease; }
  .lang-toggle.has-thumb.is-dragging .lang-toggle__thumb { transition: none; }
  .lang-toggle.has-thumb .lang-toggle__btn,
  .lang-toggle.has-thumb .lang-toggle__sep { position: relative; z-index: 1; }
  .lang-toggle.has-thumb .lang-toggle__btn[aria-pressed="true"] { background: transparent; }
}
@media (max-width: 639px) {
  .lang-toggle.is-tucked { transform: translateY(calc(-100% - 20px)); }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============ SIGNUP MODAL ============ */
.modal {
  width: min(100% - 32px, 440px);
  max-width: none;
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.modal::backdrop { background: rgba(58, 20, 6, 0.55); }
.modal[open] { animation: modal-in 260ms cubic-bezier(.2, .9, .3, 1.2); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } }

.modal__panel {
  position: relative;
  background: var(--cream);
  border-radius: 28px;
  padding: clamp(36px, 6vw, 44px) clamp(22px, 5vw, 36px) clamp(24px, 5vw, 32px);
  box-shadow: 6px 8px 0 var(--orange);
}
.modal__leaf {
  position: absolute;
  width: 64px;
  top: -24px;
  left: 22px;
  transform: rotate(-16deg);
  pointer-events: none;
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.modal__close:hover { background: var(--card); }
.modal__close:focus-visible { outline-offset: 0; border-radius: 999px; }

.modal__title {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  padding-right: 40px;
}
.modal__title:focus { outline: none; }

.signup { display: grid; gap: 14px; }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; font-size: 0.95rem; }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: 500 1rem var(--sans);
}
.field__input:focus { outline: 3px solid var(--orange); outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: var(--red); }
.signup__hint { margin: -4px 0 0; font-size: 0.9rem; font-weight: 500; }
.signup__msg {
  margin: 0;
  min-height: 1.5em;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}
.signup__msg:empty { min-height: 0; margin-top: -14px; }
.signup .btn { margin-top: 6px; }
.signup__consent { margin: 0; font-size: 0.8125rem; font-weight: 500; line-height: 1.45; }
.signup.is-sending .btn { opacity: 0.7; pointer-events: none; }

.modal__success { text-align: center; padding: 8px 0 12px; }
.modal__success .modal__title { padding: 0; margin: 14px 0 0; }
.modal__mark { width: 56px; height: auto; margin: 0 auto; }

/* Privacy policy: a longer, scrolling document in the same modal shell */
.modal--doc { width: min(100% - 32px, 640px); }
.modal--doc .modal__panel { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.policy h3 { margin: 20px 0 4px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.policy p { margin: 0; font-size: 1rem; line-height: 1.6; }
.policy .policy__date { margin-top: -10px; font-size: 0.9rem; font-weight: 600; }

/* ---------- Chile confetti ---------- */
.party-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.party-layer img {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  will-change: transform, opacity;
}

/* ---------- Missing-asset placeholder ---------- */
.asset-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 8px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: 600 12px/1.3 var(--sans);
  text-align: center;
  word-break: break-all;
  text-shadow: none;
}

/* placeholders inside cropped frames fill the frame */
.jar .asset-ph,
.family__jars .asset-ph { flex: 0 0 32%; aspect-ratio: 480 / 694 !important; width: auto !important; }

/* ---------- Reduced motion: static states ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn--primary:hover, .btn--primary:active { transform: none; }
  .lockup__bloom img { animation: none !important; }
  .lang-toggle__thumb { transition: none !important; }   /* the thumb jumps, no slide */
}