/* ============================================================
   COR — HOME (index.html) · rebuilt cinematic concept
   ------------------------------------------------------------
   Scroll journey (desktop, body.film-on — film-stage PINNED, one
   scrubbed GSAP timeline):
     ACT 0  STRATOSPHERE  hero copy left · triangle pellets right
     ACT 1  THE MOLECULES the 3 pellets fidget-spin to dead centre;
            epicatechin panel opens left, theobromine panel right
     ACT 2  CLOUDS + ONE POD  a dense cloud layer rushes in; pellets
            re-triangle, spin, and converge into a magestic central
            cocoa pod ringed by soft geometric shapes — copy on both
            sides — then merge into the pod and vanish
     ACT 3  THE CANOPY  the far jungle canopy rises; the film ends
   Then (normal flow): WAITLIST (product circle on black) · FOOTER.

   TWO MODES, one markup:
   · DEFAULT (mobile / reduced-motion / no-JS): the film reflows into
     short, static, stacked sections — no pin, no spin, no pellets.
   · body.film-on (desktop & tablet, JS + motion): the pinned film.

   ── ASSET MAP ────────────────────────────────────────────────
   stratosphere backdrop .... assets/img/LOADbackground.jpeg  (anchored TOP —
                              the high-altitude earth-curve dawn)
   dense cloud layer ........ assets/img/cloud.png  (×5 tiles)
   far jungle canopy ........ assets/img/jungle-far.png
   magestic centre pod ...... assets/img/pod-hero.png  (transparent)
   pellet trio .............. assets/img/bean-single.png
   product bag .............. assets/img/bag-hero.png
   powder bowl .............. assets/img/powder-bowl.png
   loose pellets ............ assets/img/beans-loose.png
   canopy leaves (corners) .. assets/img/canopy-left.png
   ============================================================ */

/* ---------------------------------------------------------
   PAGE SHELL
--------------------------------------------------------- */
.page-home { background: #070503; }
.page-home main.home { position: relative; z-index: 5; }

/* =========================================================================
   DEFAULT LAYOUT  (mobile / tablet-portrait / reduced-motion / no-JS)
   Static stacked acts on a dark dawn→night gradient.
   ========================================================================= */
.film { position: relative; background: linear-gradient(180deg, #0c1622 0%, #0a0c10 34%, #070503 70%); }
.film-stage { position: relative; display: flex; flex-direction: column; }

/* --- backdrop: the tall painted image. DEFAULT (mobile) shows it as a soft
   cover behind the stacked beats; film mode puts it in normal flow so its
   natural height drives the whole scroll (see FILM MODE). --- */
.sky-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  opacity: 0.5; pointer-events: none;
}
.film-scenes { position: relative; z-index: 2; }

/* --- cloud whiteouts (cloudv2): big soft clouds we fly INTO. Default (mobile)
   = a single static cloud strip used as a divider; film mode scales them into
   full-screen whiteouts that the pellets vanish behind. --- */
.cloudout {
  position: relative; display: flex; justify-content: center; align-items: center;
  height: auto; overflow: hidden; pointer-events: none;
}
.cloudout .white-core { display: none; }
.cloudbig {
  width: min(150%, 760px); height: auto; display: block;
  opacity: 0.94; filter: drop-shadow(0 22px 50px rgba(0,0,0,0.22));
}
.cloudout .cb-b { display: none; }   /* second layer only in film mode */

/* small cloud corner-pieces that frame the pod — hidden on mobile */
.pod-clouds { display: none; }

/* --- pod centrepiece on its plate, rubble floating around it --- */
.pod-stage {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  padding: 4vh 0 1vh;
}
.pod-hero {
  position: relative; z-index: 3; width: clamp(150px, 44vw, 250px); height: auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(201,169,110,0.28));
}
/* warm glow behind the pod — a dark core lifts the pod off the busy jungle,
   ringed by a gold halo */
.pod-glow {
  position: absolute; z-index: 1; width: 168%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(8,6,4,0.7) 0%, rgba(8,6,4,0.46) 30%,
    rgba(214,182,120,0.26) 52%, rgba(201,169,110,0.08) 66%, rgba(201,169,110,0) 76%);
  filter: blur(8px); pointer-events: none;
}
/* the plate / pedestal the pod sits on */
.pod-plate { position: absolute; z-index: 2; bottom: 6%; left: 50%; transform: translateX(-50%); width: clamp(150px, 40vw, 240px); pointer-events: none; }
.pod-plate .plate-top {
  position: absolute; left: 0; right: 0; top: 0; height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 120% at 50% 18%, #f0d9a4 0%, #d6b678 36%, #9c7d44 72%, #6f5630 100%);
  box-shadow: 0 0 22px rgba(201,169,110,0.4), inset 0 2px 4px rgba(255,244,214,0.5);
}
.pod-plate .plate-side {
  position: absolute; left: 8%; right: 8%; top: 12px; height: 16px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #8a6c3a 0%, #5c4526 70%, #3f2f19 100%);
  box-shadow: 0 14px 26px rgba(0,0,0,0.5);
}
/* floating rubble / debris shards */
.rubble { position: absolute; inset: -30% -20%; z-index: 1; pointer-events: none; }
.shard {
  position: absolute; display: block; width: 22px; height: 16px; --r: 0deg;
  background: linear-gradient(150deg, #b89a5e 0%, #6a5532 52%, #2e2412 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.55), 0 0 10px rgba(214,182,120,0.45), inset 0 1px 1px rgba(245,232,200,0.6);
  clip-path: polygon(12% 0%, 100% 26%, 82% 100%, 0% 70%);
  opacity: 0.95; transform: rotate(var(--r));
}
.shard.s1 { top: 14%; left: 10%; width: 26px; height: 20px; --r:  8deg; }
.shard.s2 { top: 30%; left: 84%; width: 18px; height: 14px; --r:  24deg; }
.shard.s3 { top: 58%; left: 6%;  width: 16px; height: 12px; --r: -18deg; }
.shard.s4 { top: 8%;  left: 70%; width: 14px; height: 11px; --r:  40deg; }
.shard.s5 { top: 70%; left: 80%; width: 22px; height: 15px; --r: -10deg; }
.shard.s6 { top: 46%; left: 90%; width: 12px; height: 10px; --r:  16deg; }
.shard.s7 { top: 80%; left: 30%; width: 18px; height: 13px; --r: -28deg; }

/* pellets hidden by default (desktop film switches them on) */
.pellet-field { display: none; }

/* --- beats stack in normal flow by default --- */
.beat { position: relative; z-index: 2; padding: 10vh var(--gutter) 8vh; }
.beat-hero { order: 1; min-height: 100svh; display: flex; align-items: center; }
.beat-duo  { order: 2; }
.beat-podtext { order: 3; display: flex; flex-direction: column; align-items: center; gap: 2vh; text-align: center; }

/* =========================================================================
   HERO COPY  (shared)
   ========================================================================= */
.hero-copy { position: relative; z-index: 2; max-width: 600px; }
.hero-copy::before {
  content: ""; position: absolute; inset: -12% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(78% 80% at 40% 50%, rgba(7,5,3,0.7), rgba(7,5,3,0) 76%);
}
.hero-copy .kicker {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 1.6rem;
}
.hero-copy h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 0.98; letter-spacing: -0.01em;
  color: var(--t-100); text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.hero-copy h1 em { font-style: italic; color: var(--gold-bright); }
.hero-copy .lead {
  margin: 1.8rem 0 0; max-width: 30ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem); color: var(--t-80);
  text-shadow: 0 1px 16px rgba(0,0,0,0.7);
}
.hero-copy .sub {
  margin-top: 1rem; font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--t-60);
}
.hero-copy .hero-cta { margin-top: 2.6rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

/* glowing amber primary button (hero + waitlist) */
.btn-glow {
  position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: #1a0f08;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(236,210,156,0.4), 0 14px 34px rgba(201,169,110,0.32), 0 0 50px rgba(201,169,110,0.28);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(236,210,156,0.6), 0 18px 44px rgba(201,169,110,0.5), 0 0 70px rgba(201,169,110,0.45);
}
.btn-glow .ar { transition: transform .45s var(--ease); }
.btn-glow:hover .ar { transform: translateX(4px); }

/* scene-number eyebrow */
.scene-no {
  display: inline-block; font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.scene-no i { font-style: normal; color: var(--t-40); margin-right: 0.5rem; }

/* =========================================================================
   ACT 1 — DUAL MOLECULE PANELS  (shared)
   Each panel: lewis on top · title · one paragraph.
   ========================================================================= */
.beat-duo { display: flex; flex-direction: column; gap: 3.2rem; }
/* full, structured glass card — espresso glass, gold hairline, real edges */
.duo-panel {
  position: relative; z-index: 2; width: min(460px, 100%);
  padding: 2.1rem 2.1rem 2.2rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30,21,13,0.84) 0%, rgba(13,9,5,0.9) 100%);
  border: 1px solid rgba(214,182,120,0.32);
  box-shadow: 0 26px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(245,232,200,0.10);
  -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05);
}
/* gold hairline accent across the top of the card */
.duo-panel::before {
  content: ""; position: absolute; left: 2.1rem; right: 2.1rem; top: 1.15rem; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(214,182,120,0) 0%, rgba(214,182,120,0.85) 50%, rgba(214,182,120,0) 100%);
}
.duo-panel .mol-figure { width: min(260px, 64%); margin: 0.4rem 0 0.9rem; position: relative; }
/* soft luminous disc behind the lewis diagram */
.duo-panel .mol-figure::before {
  content: ""; position: absolute; inset: -14%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(214,182,120,0.18) 0%, rgba(214,182,120,0.05) 46%, rgba(214,182,120,0) 70%);
}
.duo-panel .mol-figure svg { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; display: block; }
.duo-panel h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.0; color: var(--t-100);
}
.duo-panel .mol-text {
  color: var(--t-90); font-size: 0.98rem; line-height: 1.62; margin-top: 0.8rem; max-width: 40ch;
}

/* molecule stroke styling — premium glowing lewis diagram */
.mol-figure svg { filter: drop-shadow(0 0 15px rgba(236,210,156,0.66)) drop-shadow(0 4px 16px rgba(0,0,0,0.6)); }
.lewis .bond { stroke: #f8ecd2; stroke-width: 3.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lewis .bond.faint { stroke: rgba(248,236,210,0.6); stroke-width: 2.4; }
.lewis .ring { fill: rgba(236,210,156,0.14); stroke: rgba(236,210,156,0.30); stroke-width: 1.3; }
.lewis text { fill: #fff6e6; font-family: var(--font-body); font-weight: 600; font-size: 20px; text-anchor: middle; dominant-baseline: middle; }
.lewis text.atom-o { fill: #f3c2a4; }
.lewis text.atom-n { fill: #b9d2ee; }
.lewis text.small { font-size: 14px; fill: var(--t-80); font-weight: 500; }
.lewis circle[fill="#070503"] { fill: #1a120b; }

/* =========================================================================
   ACT 2 — POD COPY  (shared)
   ========================================================================= */
.beat-podtext { display: flex; flex-direction: column; gap: 2.4rem; }
/* heavenly card — luminous frosted glass with a pearly gold frame + soft halo */
.pod-side {
  position: relative; z-index: 2; width: min(420px, 100%);
  padding: 2rem 2.1rem 2.1rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(42,32,21,0.72) 0%, rgba(18,13,8,0.82) 100%);
  border: 1px solid rgba(236,221,180,0.45);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.5),
    0 0 60px rgba(236,221,180,0.16),
    inset 0 1px 0 rgba(255,248,228,0.16);
  -webkit-backdrop-filter: blur(9px) saturate(1.06); backdrop-filter: blur(9px) saturate(1.06);
}
/* pearly gold flourish centred at the top of the card */
.pod-side::before {
  content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: 64%; height: 2px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, rgba(236,221,180,0) 0%, rgba(247,236,206,0.95) 50%, rgba(236,221,180,0) 100%);
  box-shadow: 0 0 14px rgba(247,236,206,0.7);
}
.pod-side h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.0; color: var(--t-100);
}
.pod-side p { margin-top: 0.85rem; color: var(--t-90); font-size: 0.98rem; line-height: 1.62; max-width: 36ch; }

/* =========================================================================
   FILM MODE  (body.film-on — desktop & tablet, JS + motion)
   ------------------------------------------------------------
   THE PAGE SCROLLS LIKE A WEBSITE. The painted backdrop is ONE tall image in
   normal flow; its natural height (width × 4096/873) sets the film's height,
   so we simply scroll DOWN the whole painted journey. NOTHING is panned or
   parallaxed. The ONLY thing that moves vertically is the 3 pellets, which
   live in a FIXED viewport layer. Scenes are absolutely placed over the
   backdrop at the painted bands they belong to:
     HERO   ~8%   (first-impression sky)
     DUO    ~21%  (blue sky)         · pellet line passes the central gap
     CLOUDS ~35%  (golden band)      · pellets fly up & vanish here
     POD    ~60%  (moody sky)        · pod on a plate, rubble floating
   ========================================================================= */
body.film-on .film { position: relative; }

/* the painted backdrop — in normal flow, natural height drives the scroll */
body.film-on .sky-img {
  position: relative; inset: auto; z-index: 0;
  display: block; width: 100%; height: auto;
  object-fit: fill; opacity: 1;
}

/* the scene layer floats over the full height of the backdrop */
/* z-index:auto (cancels the default z-index:2) so this is NOT a stacking
   context — the whiteout clouds inside can then layer ABOVE the fixed
   pellet-field, which is a sibling of this element. */
body.film-on .film-scenes { position: absolute; inset: 0; z-index: auto; }

/* ---- the pellets — the ONLY vertically-animated element. FIXED to the
   viewport; revealed only while the film is on screen (.film-live). ---- */
body.film-on .pellet-field {
  display: block; position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0;
}
body.film-on.film-live .pellet-field { opacity: 1; }
body.film-on .pellet-spinner { position: absolute; top: 50%; left: 50%; width: 0; height: 0; will-change: transform; }
body.film-on .pellet {
  position: absolute; top: 0; left: 0; width: clamp(120px, 13vw, 188px); height: auto;
  will-change: transform;
}
body.film-on .pellet.p1 { transform: translate(-50%, calc(-50% - 148px)); }
body.film-on .pellet.p2 { transform: translate(calc(-50% + 126px), calc(-50% + 80px)); }
body.film-on .pellet.p3 { transform: translate(calc(-50% - 126px), calc(-50% + 80px)); }
body.film-on .pellet-img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(201,169,110,0.24));
  animation: pelletFloat 7s ease-in-out infinite;
}
body.film-on .pellet.p2 .pellet-img { animation-duration: 8.2s; animation-delay: -2s; }
body.film-on .pellet.p3 .pellet-img { animation-duration: 6.4s; animation-delay: -3.4s; }
@keyframes pelletFloat {
  0%,100% { transform: translateY(-6%) rotate(-2deg); }
  50%     { transform: translateY(6%)  rotate(2deg); }
}

/* ---- SCENES — absolutely placed at their painted bands; NEVER transformed
   by scroll. translateY(-50%) centres each scene's content on its band. ---- */
body.film-on .beat {
  position: absolute; left: 0; right: 0; transform: translateY(-50%);
  height: 100svh; display: flex; align-items: center;
  padding: 0 clamp(2rem, 7vw, 7rem);
}
/* HERO — centred high in the first screen, the clear focal "main thing". */
body.film-on .beat-hero { top: 50vh; z-index: 7; justify-content: flex-start; align-items: flex-start; padding-top: 15vh; }
body.film-on .beat-hero .hero-copy { max-width: 640px; }
body.film-on .hero-copy h1 { font-size: clamp(3.4rem, 8vw, 6.4rem); }
body.film-on .hero-copy .lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); max-width: 34ch; }

/* DUO — molecule cards at the left & right edges; the fixed pellet column
   threads the central gap. Packed just below the hero (vh offsets, so the
   layout is independent of the backdrop's total height / future crop). */
body.film-on .beat-duo {
  top: 135vh; z-index: 7; height: auto;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 0;
}
body.film-on .duo-panel { width: min(35vw, 480px); }
body.film-on .duo-panel .mol-figure { width: min(280px, 78%); }

/* WHITEOUTS — huge cloudv2 layers we fly straight INTO. Placed absolutely at
   their bands (vh offsets). They sit ABOVE the pellets (z5) so the pellets
   vanish behind them, and ABOVE the scene copy (z7) so the textboxes never
   overlap the cloud — we cleanly wash INTO the white. overflow visible → the
   clouds spill past the sides of the page. */
body.film-on .cloudout {
  position: absolute; left: 0; right: 0;
  height: 120vh; transform: translateY(-50%);
  display: block; overflow: visible; z-index: 8; pointer-events: none;
}
body.film-on .cloudout-1 { top: 220vh; }
body.film-on .cloudout-2 { top: 350vh; }
/* the soft white core that sells the whiteout (gradient is its own falloff —
   no blur filter, which is very costly at this size) */
body.film-on .cloudout .white-core {
  display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130vw; height: 78vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,253,248,0.96) 0%, rgba(255,252,246,0.6) 44%, rgba(255,252,246,0) 80%);
}
body.film-on .cloudbig {
  position: absolute; left: 50%; top: 50%; display: block;
  width: clamp(1100px, 168vw, 2900px); height: auto; opacity: 0.97;
}
body.film-on .cloudout .cb-b { display: block; }
body.film-on .cb-a { transform: translate(-50%, -50%) scale(1); }
body.film-on .cb-b { transform: translate(-46%, -56%) scale(1.2); opacity: 0.9; }
body.film-on .cloudout-2 .cb-c { transform: translate(-50%, -50%) scale(1.4); }

/* POD — copy flanks the central pod (on its plate, rubble floating). The pod
   sits BELOW the fixed pellets in z so, while the pellets vanish into the
   clouds above, this scene reads cleanly as ordinary scrolled content. */
/* POD — packed right under the first whiteout (vh offset). Copy cards flank
   the pod; small cloud corner-pieces frame the scene behind it. */
body.film-on .beat-podtext {
  top: 280vh; z-index: 7; height: auto;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem); text-align: left;
}
body.film-on .beat-podtext .pod-side { position: relative; z-index: 7; width: min(31vw, 420px); flex: 0 0 auto; }
body.film-on .beat-podtext .pod-stage { position: relative; z-index: 3; flex: 0 0 auto; padding: 0; }
body.film-on .beat-podtext .pod-hero { position: relative; z-index: 3; width: auto; height: clamp(300px, 56vh, 560px); }
body.film-on .pod-side.pod-right { text-align: right; }
body.film-on .pod-side.pod-right p { margin-left: auto; }

/* cloud corner-pieces framing the pod */
body.film-on .pod-clouds { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body.film-on .pcloud {
  position: absolute; width: clamp(360px, 42vw, 800px); height: auto; opacity: 0.9;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,0.22)) brightness(1.02);
}
body.film-on .pc-bl { left: -12vw;  bottom: -10vh; }
body.film-on .pc-br { right: -12vw; bottom: -14vh; transform: scaleX(-1); }

/* a soft floating drift for the rubble shards */
body.film-on .shard { animation: shardFloat ease-in-out infinite; }
body.film-on .shard.s1 { animation-duration: 7.5s; }
body.film-on .shard.s2 { animation-duration: 9s;   animation-delay: -2s; }
body.film-on .shard.s3 { animation-duration: 8.2s; animation-delay: -4s; }
body.film-on .shard.s4 { animation-duration: 10s;  animation-delay: -1s; }
body.film-on .shard.s5 { animation-duration: 8.8s; animation-delay: -5s; }
body.film-on .shard.s6 { animation-duration: 7s;   animation-delay: -3s; }
body.film-on .shard.s7 { animation-duration: 9.6s; animation-delay: -6s; }
@keyframes shardFloat {
  0%,100% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
  50%     { transform: translateY(8px)  rotate(var(--r, 0deg)); }
}

/* =========================================================================
   S — WAITLIST  (on black, normal flow, both modes)  — enlarged product
   ========================================================================= */
.s-wait {
  position: relative; z-index: 9;   /* ABOVE the whiteout clouds (z8) so the
                                        final cloud never bleeds into this scene */
  background: linear-gradient(180deg, rgba(7,5,3,0.55) 0%, #070503 9%, #0a0806 100%);
  padding: 10vh var(--gutter) clamp(5rem, 12vh, 9rem);
  text-align: center; overflow: hidden;
}
.leaf-corner { position: absolute; width: clamp(200px, 27vw, 420px); opacity: 0.55; pointer-events: none; z-index: 1; }
.leaf-corner img { width: 100%; height: auto; display: block; }
.leaf-corner.tr { top: -2%; right: -4%; transform: scaleX(-1); }     /* top-right: drape down-left */
.leaf-corner.bl { bottom: -3%; left: -5%; transform: scaleY(-1); }   /* bottom-left: reach up-right */

.wait-stage { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }

/* the product circle — bigger bag, bowl AND loose; loose layered ABOVE the bag */
.product-frame {
  position: relative; width: clamp(320px, 50vw, 520px); aspect-ratio: 1 / 1;
  margin: 0 auto 3.4rem; display: grid; place-items: center;
}
.product-frame .ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 60px rgba(201,169,110,0.14), 0 0 70px rgba(201,169,110,0.1);
}
.product-frame .ring.r2 { inset: -16px; border-color: var(--t-20); }
.product-frame .glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.22), transparent 65%); }
.product-frame .bag {
  position: relative; z-index: 3; width: 72%;
  filter: drop-shadow(0 34px 56px rgba(0,0,0,0.6));
}
/* loose pellets spill at the base, in front of the bag */
.product-frame .loose {
  position: absolute; z-index: 4; width: 40%; left: 34%; bottom: -2%;
  transform: translateX(-50%) rotate(-4deg);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.5));
}
/* the bowl sits ABOVE the loose pellets */
.product-frame .bowl {
  position: absolute; z-index: 5; width: 52%; left: 60%; bottom: -6%;
  transform: translateX(-50%);
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55));
}

.wait-stage h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(3rem, 9vw, 6rem); line-height: 0.96; color: var(--t-100);
}
.wait-stage h2 em { font-style: italic; color: var(--gold-bright); }
.wait-stage .wait-lead { margin: 1.4rem auto 0; max-width: 48ch; color: var(--t-80); }

.wait-form { margin: 2.6rem auto 0; max-width: 520px; display: flex; gap: 0.7rem; align-items: stretch; }
.wait-form input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 0.95rem 1.2rem;
  background: rgba(20,13,7,0.7); color: var(--t-100);
  border: 1px solid var(--t-20); border-radius: 2px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.wait-form input[type="email"]::placeholder { color: var(--t-40); }
.wait-form input[type="email"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.16); }
.wait-form .btn-glow { white-space: nowrap; }
.wait-secondary { margin-top: 1.6rem; }
.wait-secondary a {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-60);
  border-bottom: 1px solid var(--t-20); padding-bottom: 2px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.wait-secondary a:hover { color: var(--gold-bright); border-color: var(--gold); }

.page-home .footer { position: relative; z-index: 6; }

/* generic reveal targets (used in the black waitlist section) */
.motion .s-wait [data-reveal] { opacity: 0; will-change: opacity, transform; }

/* =========================================================================
   MOBILE / SMALL-SCREEN  (≤ 760px)  — the simplified, professional landing
   No pin, no spin, no pellets; each act is a clean stacked section.
   ========================================================================= */
@media (max-width: 760px) {
  .beat-hero { min-height: 92svh; padding-top: calc(var(--nav-h) + 6vh); }

  /* molecule panels: lewis to the LEFT of the name, text below — compact */
  .beat-duo { gap: 2.4rem; padding-top: 6vh; }
  .duo-panel { width: 100%; }
  .duo-panel .mol-figure { width: clamp(120px, 34vw, 180px); margin: 0 0 0.6rem; }
  .duo-panel h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }

  /* pod: image then both copy blocks stacked */
  .pod-hero { width: clamp(150px, 52vw, 240px); }
  .beat-podtext { gap: 1.8rem; padding-top: 2vh; }
  .pod-side { width: 100%; }

  .wait-form { flex-direction: column; }
  .wait-form .btn-glow { justify-content: center; }
  .product-frame { width: clamp(260px, 82vw, 380px); }
}

/* =========================================================================
   REDUCED MOTION — calm everything, reveal all
   ========================================================================= */
.no-motion .pellet-field { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pellet-img { animation: none; }
  .shape.rays { animation: none; }
}