/* Shared by the purchase background and the footer transition. */
:root {
  --purchase-orange-base: #f6611f;
  --purchase-orange-light: #ff7c2c;
  --purchase-orange-edge: #f96729;
}

/* Final chapter: portrait composition follows the supplied 341 × 738 reference. */
.purchase {
  --paper: #faedd7;
  --ink: #130f0c;
  --orange: #f15a24;
  --purchase-line: #f46325;
  --purchase-glow: #fff9e750;
  --purchase-shadow: #25170b25;
  container-type: inline-size;
  height: 100dvh;
  min-height: 640px;
  color: var(--ink);
  background: radial-gradient(ellipse at 48% 36%,var(--purchase-glow),var(--clear) 75%),var(--paper);
}
.purchase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h128v128H0z' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}
.purchase .purchase-orange { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: none; clip-path: none; }
.purchase .purchase-orange path { fill: url(#purchase-orange-fill); }
.purchase-orange-stop--base { stop-color: var(--purchase-orange-base); }
.purchase-orange-stop--light { stop-color: var(--purchase-orange-light); }
.purchase-orange-stop--edge { stop-color: var(--purchase-orange-edge); }
.purchase-orange-shape--wide { display: none; }
.purchase .purchase-title { display: contents; rotate: none; }
.purchase .purchase-heading { position: absolute; z-index: 3; rotate: -3deg; transform-origin: center; pointer-events: none; }
.purchase .purchase-heading--top { --purchase-type-size: 120px; left: 7%; top: max(10.5%,80px); width: 78%; height: 8.9%; color: var(--ink); }
.purchase .purchase-heading--bottom { --purchase-type-size: 144px; left: 3.5%; top: 18.9%; width: 90%; height: 17.8%; rotate: -4deg; color: var(--orange); }
.purchase .purchase-type { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.purchase .purchase-type text { font-family: Barlow,system-ui,sans-serif; font-size: var(--purchase-type-size); font-weight: 900; letter-spacing: -1px; }
.purchase .purchase-pouch { left: 15.1%; top: 35%; width: 73.3%; height: 40%; rotate: 0deg; z-index: 2; filter: drop-shadow(0 6px 6px var(--purchase-shadow)); }
.purchase .purchase-pouch img { object-fit: fill; transform: none; }
.purchase.is-active .purchase-pouch { animation: none; translate: none; }
.purchase .purchase-food-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.purchase .purchase-food-overlay img { width: 100%; height: 100%; object-fit: fill; }
.purchase .purchase-desktop-chip { display: none; }
.purchase .purchase-thread { inset: 0; width: 100%; height: 100%; color: var(--purchase-line); z-index: 1; }
.purchase .purchase-thread path { stroke-width: 3px; }
.purchase .macro { z-index: 6; font-weight: 600; }
.purchase .macro--protein { left: 3.8%; top: 45%; font-size: 5cqw; line-height: 1; }
.purchase .macro--protein strong { font-size: inherit; line-height: inherit; }
.purchase .macro--protein > span { display: block; }
.purchase .macro--sugar { left: auto; right: 3.5%; top: 53%; width: 16%; text-align: center; font-size: 5.278593cqw; line-height: 1; }
.purchase .macro--sugar strong { font-size: inherit; line-height: inherit; }
.purchase .macro::after { height: 3px; margin-top: 8px; width: 14.1cqw; border-radius: 50%; background: var(--purchase-line); rotate: -6deg; }
.purchase .macro--sugar::after { width: 100%; }
.purchase .purchase-action { left: 16%; right: 14.4%; bottom: max(2.44%,env(safe-area-inset-bottom)); z-index: 8; }
.purchase .purchase-action > p { position: absolute; bottom: calc(100% + 24px); left: -20px; right: -20px; margin: 0; font-size: 5.278593cqw; line-height: 1.2; font-weight: 600; white-space: nowrap; text-align: center; }
.purchase .purchase-action .button { width: 100%; min-height: 48px; height: 7.32svh; padding: 0 24px 4px; gap: 12px; font-size: 7.038123cqw; font-weight: 600; background: var(--ink); color: var(--paper); }
.purchase .purchase-action .icon { width: 7cqw; height: 7cqw; flex-basis: 7cqw; }
.purchase .next-scene { right: 0; bottom: 2.2%; color: var(--ink); }
.purchase .next-scene .icon { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .purchase.is-active .next-scene .icon { animation: hero-scroll-cue 1.6s ease-in-out infinite; }
  .page-hidden .purchase .next-scene .icon { animation-play-state: paused; }
}
@media (max-width: 599px) {
  body[data-scene="packs"] .scene-nav { top: 14.3%; }
  body[data-scene="packs"] .scene-nav a { height: 16px; }
  body[data-scene="packs"] .scene-nav span { width: 8px; height: 8px; background: var(--clear); }
  body[data-scene="packs"] .scene-nav [aria-current] span { background: var(--hero-reference-orange); }
}
@media (max-height: 740px) and (max-width: 599px) {
  .purchase .purchase-heading--top { top: 80px; height: 8%; }
  .purchase .purchase-heading--bottom { top: 20%; height: 17%; }
  .purchase .purchase-action > p { bottom: calc(100% + 20px); }
}
@media (min-width: 600px) {
  .purchase { min-height: 720px; }
  .purchase-orange-shape--mobile { display: none; }
  .purchase-orange-shape--wide { display: block; }
  .purchase .purchase-heading--top { left: 8%; top: 20%; width: 40%; height: 14%; }
  .purchase .purchase-heading--bottom { left: 5.5%; top: 33%; width: 53%; height: 28%; }
  .purchase .purchase-pouch { left: 53%; top: 22%; width: 39%; height: 61%; }
  .purchase .purchase-pouch img { object-fit: contain; }
  .purchase .purchase-food-overlay { display: none; }
  .purchase .purchase-desktop-chip { display: block; position: absolute; z-index: 5; pointer-events: none; }
  .purchase .purchase-desktop-chip--top { left: 78%; top: 18%; width: 16%; rotate: -12deg; }
  .purchase .purchase-desktop-chip--left { left: 47%; top: 62%; width: 15%; rotate: 24deg; }
  .purchase .purchase-desktop-chip--right { right: 0; top: 72%; width: 14%; rotate: -10deg; }
  .purchase .macro--protein { left: 44%; top: 58%; font-size: 22px; }
  .purchase .macro--sugar { right: 4%; top: 48%; width: 8%; font-size: 24px; }
  .purchase .macro::after { width: 48px; }
  .purchase .macro--sugar::after { width: 100%; }
  .purchase .purchase-action { left: 8%; right: auto; bottom: 8%; width: 320px; }
  .purchase .purchase-action > p { left: 0; right: auto; font-size: 22px; text-align: left; }
  .purchase .purchase-action .button { height: 64px; font-size: 28px; }
  .purchase .purchase-action .icon { width: 24px; height: 24px; flex-basis: 24px; }
  .purchase .next-scene { right: 24px; bottom: 16px; }
}