/* Page layout: header, hero, the shelf courses, download, footer, and the
   /get and 404 pages. */

.page {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

.lead {
  font-size: var(--lead);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ---------- Header ---------- */
.header {
  background: var(--mint);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

/* ---------- Courses (full-bleed bands) ---------- */
.course {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.course--mint {
  background: var(--mint);
}

.course--bg {
  background: var(--bg);
}

.course--surface {
  background: var(--surface);
}

.course--bin {
  background: var(--bin);
  color: var(--on-bin);
  --shelf-top: #64748b;
  --shelf-edge: #475569;
  --shelf-edge-dark: #334155;
  --shelf-shadow: rgba(0, 0, 0, 0.55);
  --ticket-rail: #2dd4bf;
}

.course--bin .lead {
  color: var(--on-bin-muted);
}

.course--teal {
  background: linear-gradient(180deg, var(--teal-400), var(--teal-strong));
  color: var(--on-teal);
  --shelf-top: #ffffff;
  --shelf-edge: #ccfbf1;
  --shelf-edge-dark: #5eead4;
  --shelf-shadow: rgba(4, 32, 29, 0.45);
  --ticket-rail: #0f766e;
}

.course--teal .lead {
  color: var(--on-teal);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero__title {
  font-size: var(--display);
  max-width: 11ch;
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--teal-text);
}

.hero__lead {
  margin-top: var(--space-6);
}

.hero__badges {
  margin-top: var(--space-8);
}

.hero__shelf {
  --item-gap: clamp(0.75rem, 2vw, 1.5rem);
  /* The hero shelf runs off the right edge of the viewport. */
  --bleed: max(var(--gutter), (100vw - var(--page)) / 2);
}

.hero__shelf .shelf__board::before,
.hero__shelf .shelf__board::after {
  right: calc(-1 * var(--bleed));
}

.hero__shelf .shelf__board::before {
  border-radius: 4px 0 0 0;
}

.hero__shelf .shelf__board::after {
  border-radius: 0 0 0 4px;
}

.hero__shelf .device {
  --w: clamp(220px, 22vw, 300px);
}

.hero__shelf .mascot {
  --mascot-w: clamp(120px, 13vw, 180px);
}

/* ---------- Stations ---------- */
.station {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.station--flip .station__shelf {
  order: -1;
}

.station__copy,
.station__shelf {
  min-width: 0;
}

.station__copy .lead {
  margin-top: var(--space-6);
}

.station__shelf {
  --item-gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* A full-width course: copy above, one long shelf below. */
.station--wide {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

.station--wide .station__copy {
  max-width: 42rem;
}

.station__shelf .device {
  --w: clamp(220px, 22vw, 280px);
}

.station__shelf .mascot {
  --mascot-w: clamp(110px, 11vw, 150px);
}

.station__caption {
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-3);
}

.course--bin .station__caption {
  color: var(--on-bin-muted);
}

/* The "use first" shelf: the mascot and five products stand in a row. The row
   is centred where it fits and scrolls sideways where it doesn't. */
.shelf--products .shelf__items {
  justify-content: center;
  min-width: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-top: 6.5rem; /* room for the speech bubble */
  padding-bottom: 2px;
}

.shelf--products .shelf__items::-webkit-scrollbar {
  display: none;
}

.shelf--products .product {
  scroll-snap-align: start;
}

.shelf--products .mascot {
  --mascot-w: clamp(110px, 11vw, 150px);
  scroll-snap-align: start;
}

.shelf--products .bubble {
  left: 12%;
  transform: none;
  max-width: 15rem;
}

.shelf--products .bubble::after {
  left: 28px;
}

@media (max-width: 600px) {
  /* A narrow bubble that stays on the mascot's head and clears the first card
     sideways: it starts at the viewport edge and ends before the card begins. */
  .shelf--products .shelf__items {
    padding-top: 7.5rem;
  }

  .shelf--products .bubble {
    left: -14px;
    bottom: calc(100% + 8px);
    max-width: 8.5rem;
    font-size: 0.875rem;
    padding: var(--space-2) var(--space-3);
  }

  .shelf--products .bubble::after {
    left: 58px;
  }
}

@media (max-width: 1100px) {
  /* Below the wide layout the shelf runs edge to edge and the products scroll
     along it, so a cut-off card is still standing on the board. */
  .shelf--products {
    --bleed: var(--gutter);
  }

  .shelf--products .shelf__items {
    justify-content: flex-start;
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    scroll-padding-inline: var(--bleed);
  }

  .shelf--products .shelf__board::before,
  .shelf--products .shelf__board::after {
    left: calc(-1 * var(--bleed));
    right: calc(-1 * var(--bleed));
    border-radius: 0;
  }

  .shelf--products .shelf__items > :last-child {
    margin-right: var(--space-4);
  }
}

/* ---------- Download course ---------- */
.download {
  text-align: center;
}

.download__title {
  font-size: var(--sign);
}

.download__lead {
  margin: var(--space-4) auto 0;
}

.download .badges {
  justify-content: center;
  margin-top: var(--space-8);
}

.download .badges__note {
  color: var(--on-teal);
}

.download__plus {
  max-width: 38rem;
  margin: var(--space-5) auto 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--on-teal);
}

.download__shelf {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  --item-gap: clamp(1rem, 4vw, 3rem);
}

.download__shelf .device {
  --w: clamp(190px, 20vw, 260px);
}

.download__shelf .mascot {
  --mascot-w: clamp(120px, 14vw, 200px);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: var(--space-12) var(--space-10);
  font-size: 0.9375rem;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.footer .wordmark {
  color: var(--footer-ink-strong);
}

.footer .wordmark__f {
  color: var(--teal-400);
}

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

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--footer-ink-strong);
  font-weight: 700;
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--teal-400);
  text-decoration: underline;
}

.footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(203, 213, 225, 0.18);
  display: grid;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--footer-ink);
}

/* ---------- /get and 404 ---------- */
.page--get,
.page--404 {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--mint);
}

.get,
.lost {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--gutter);
  text-align: center;
}

.get__title,
.lost__title {
  font-size: var(--sign);
}

.get .badges,
.lost .badges {
  justify-content: center;
  margin-top: var(--space-4);
}

.lost .mascot {
  --mascot-w: 180px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

/* An empty shelf under the mascot: nothing on it. */
.lost__shelf {
  --overhang: 0px;
  width: min(100%, 22rem);
  margin-top: calc(-1 * var(--space-6));
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__inner,
  .station {
    grid-template-columns: minmax(0, 1fr);
  }

  .station--flip .station__shelf {
    order: 0;
  }

  /* Phone-first hero: headline, then the app and Fridgey on their shelf in the
     first screen, then the badges, then the lead. The copy wrapper dissolves
     so its children can take their own places in the single column. */
  .hero__inner {
    gap: var(--space-5);
  }

  .hero__copy {
    display: contents;
  }

  .hero__title {
    order: 1;
    max-width: none;
  }

  .hero__shelf {
    order: 2;
    margin-top: var(--space-2);
  }

  .hero__badges {
    order: 3;
    margin-top: var(--space-3);
  }

  .hero__note {
    order: 4;
    margin-top: 0;
  }

  .hero__lead {
    order: 5;
    margin-top: var(--space-2);
  }

  .station__shelf {
    margin-top: var(--space-6);
  }

  .hero__shelf .device,
  .station__shelf .device {
    --w: clamp(200px, 46vw, 260px);
  }

  .hero__shelf .mascot,
  .station__shelf .mascot {
    --mascot-w: clamp(100px, 24vw, 150px);
  }

  .shelf--right .shelf__tickets {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .shelf {
    --edge-h: 28px;
    --overhang: 56px;
  }

  .shelf__tickets {
    left: var(--space-3);
    right: var(--space-3);
  }

  .ticket {
    min-width: 0;
    padding-inline: var(--space-3);
  }

  .ticket--stickered {
    padding-right: 3.25rem;
  }

  .ticket__big {
    font-size: 1.0625rem;
  }

  .ticket__small {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }

  .sticker {
    width: 54px;
    height: 54px;
    top: -14px;
    right: -10px;
  }

  /* One phone at this width: the Android device and its ticket step out together. */
  .download__shelf .device--android,
  .download__shelf .shelf__tickets--spread li:last-child {
    display: none;
  }

  .download__shelf .shelf__tickets--spread {
    justify-content: flex-start;
  }

  .station__shelf .device {
    --w: 196px;
  }

  .station__shelf .mascot {
    --mascot-w: 104px;
  }

  /* The hero fits a phone's first screen: a two-line headline and a smaller
     phone with Fridgey beside it, tickets still slotted on the shelf edge. */
  .hero {
    padding-top: var(--space-3);
    --display: 2.3rem;
  }

  .hero__title {
    line-height: 1.02;
  }

  .hero__shelf .device {
    --w: 158px;
  }

  .hero__shelf .mascot {
    --mascot-w: 92px;
  }

  .hero__shelf .shelf {
    --overhang: 52px;
  }
}

/* ---------- Motion: everything is put on the shelf as it arrives ----------
   Only under html.motion (added before first paint unless the visitor prefers
   reduced motion). A shelf with [data-enter] starts with its things lifted;
   .is-in (js/motion.js, when the shelf scrolls into view) sets them down:
   the phone lands, the tickets slot into the rail, the sticker slaps on,
   products line up soonest first, Fridgey hops, and the savings count up. */
html.motion [data-enter] .device {
  transform: translateY(34px);
  transition: transform 0.9s var(--ease-out);
}

/* Stagger index per sibling (no inline styles: the CSP forbids them). The
   products shelf's first child is the mascot, so its products start at 2. */
.shelf__tickets > :nth-child(1) {
  --i: 0;
}

.shelf__tickets > :nth-child(2) {
  --i: 1;
}

.shelf--products .product:nth-child(2) {
  --i: 0;
}

.shelf--products .product:nth-child(3) {
  --i: 1;
}

.shelf--products .product:nth-child(4) {
  --i: 2;
}

.shelf--products .product:nth-child(5) {
  --i: 3;
}

.shelf--products .product:nth-child(6) {
  --i: 4;
}

html.motion [data-enter] .ticket {
  transform: translateY(-26px) scale(0.94);
  transition: transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 380ms);
}

html.motion [data-enter] .product {
  transform: translateY(44px) rotate(-2deg);
  transition: transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}

html.motion [data-enter] .bubble {
  transform: scale(0.4);
  transform-origin: 24px 100%;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 900ms;
}

html.motion .shelf--products .bubble {
  transform-origin: 24px 100%;
}

html.motion [data-enter] .sticker {
  transform: rotate(-16deg) scale(1.9) translate(6px, -10px);
}

html.motion [data-enter].is-in .device,
html.motion [data-enter].is-in .ticket,
html.motion [data-enter].is-in .product {
  transform: none;
}

html.motion [data-enter].is-in .bubble {
  transform: scale(1);
}

html.motion [data-enter].is-in .sticker {
  animation: slap var(--dur) var(--ease-out) 760ms both;
}

html.motion [data-enter].is-in .mascot--hops svg {
  animation: hop 0.9s cubic-bezier(0.22, 1, 0.36, 1) 820ms both;
}

html.motion [data-enter].is-in .device--scan::after {
  animation: scan 1.4s cubic-bezier(0.45, 0, 0.2, 1) 900ms forwards;
}

@keyframes scan {
  from {
    transform: translateY(-120%);
  }

  to {
    transform: translateY(560%);
  }
}

/* Mobile: the bubble grows from its tail, which sits further left there. */
@media (max-width: 600px) {
  html.motion .shelf--products .bubble {
    transform-origin: 58px 100%;
  }
}

/* ---------- Fridgey's flourish (hero only) ----------
   After the hop: the freezer door swings open, an orange flies in and is
   gulped, the door shuts, a proud "^ ^" smile with a shine, then back to the
   happy face. One 2.6s sequence on the parts, starting 1.7s after the shelf
   arrives; the idle blink begins once it is over. */
html.motion [data-enter].is-in .mascot--flourish {
  --blink-delay: 4.8s;
}

html.motion [data-enter].is-in .mascot--flourish .m-door {
  animation: m-door 2.6s var(--ease-out) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-orange {
  animation: m-orange 2.6s cubic-bezier(0.45, 0, 0.2, 1) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-body {
  animation: m-gulp 2.6s var(--ease-out) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-mouth-open {
  animation: m-mouth-open 2.6s steps(1, end) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-mouth-o {
  animation: m-mouth-o 2.6s steps(1, end) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-mouth-smile {
  animation: m-mouth-smile 2.6s steps(1, end) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-eyes-open {
  animation:
    m-eyes-open 2.6s steps(1, end) 1.7s both,
    blink 6.5s steps(1, end) var(--blink-delay) infinite;
}

html.motion [data-enter].is-in .mascot--flourish .m-eyes-closed {
  animation: m-eyes-closed 2.6s steps(1, end) 1.7s both;
}

html.motion [data-enter].is-in .mascot--flourish .m-shine {
  animation: m-shine 2.6s var(--ease-out) 1.7s both;
}

@keyframes m-door {
  0% {
    transform: scaleX(1);
  }

  8%,
  42% {
    transform: scaleX(0.08);
  }

  52%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes m-orange {
  0%,
  9% {
    opacity: 0;
    transform: translate(176px, 2px) scale(1);
  }

  11% {
    opacity: 1;
  }

  25% {
    transform: translate(152px, -16px) scale(1);
  }

  40% {
    opacity: 1;
    transform: translate(120px, 62px) scale(1);
  }

  44%,
  100% {
    opacity: 0;
    transform: translate(120px, 66px) scale(0.2);
  }
}

@keyframes m-gulp {
  0%,
  38% {
    transform: none;
  }

  44% {
    transform: scale(1.06, 0.93);
  }

  52%,
  100% {
    transform: none;
  }
}

@keyframes m-mouth-open {
  0%,
  5% {
    opacity: 1;
  }

  6%,
  91% {
    opacity: 0;
  }

  92%,
  100% {
    opacity: 1;
  }
}

@keyframes m-mouth-o {
  0%,
  5% {
    opacity: 0;
  }

  6%,
  52% {
    opacity: 1;
  }

  53%,
  100% {
    opacity: 0;
  }
}

@keyframes m-mouth-smile {
  0%,
  53% {
    opacity: 0;
  }

  54%,
  91% {
    opacity: 1;
  }

  92%,
  100% {
    opacity: 0;
  }
}

@keyframes m-eyes-open {
  0%,
  53% {
    opacity: 1;
  }

  54%,
  91% {
    opacity: 0;
  }

  92%,
  100% {
    opacity: 1;
  }
}

@keyframes m-eyes-closed {
  0%,
  53% {
    opacity: 0;
  }

  54%,
  91% {
    opacity: 1;
  }

  92%,
  100% {
    opacity: 0;
  }
}

@keyframes m-shine {
  0%,
  54% {
    opacity: 0;
    transform: scale(0.7);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }

  70% {
    transform: scale(1);
  }

  86% {
    opacity: 1;
  }

  92%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}