/* Tasty Crousty App - home page.
   Every page on the site uses this sheet: the home page and the document pages
   (privacy, terms, legal, support, 404).

   Display type is Quicksilver, which ships no accented glyphs: every headline
   here is deliberately written without accents. Body copy uses Open Sauce and
   is fully accented. */

@font-face {
  font-family: "Open Sauce One";
  src: url("../assets/fonts/OpenSauce/OpenSauceOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("../assets/fonts/OpenSauce/OpenSauceOne-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("../assets/fonts/OpenSauce/OpenSauceOne-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Open Sauce One";
  src: url("../assets/fonts/OpenSauce/OpenSauceOne-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Quicksilver";
  src: url("../assets/fonts/Quicksilver.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0a0709;
  --bg-lift: #120c11;
  --surface: rgba(255, 255, 255, 0.045);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --ink: #f8f3f6;
  --muted: #a2949e;
  --pink: #ff5aa2;
  --pink-soft: #ff96c4;
  --pink-deep: #c82f6d;
  --cyan: #4fd8e8;
  --shell: 78rem;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --step: clamp(4.5rem, 11vw, 10rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: "Open Sauce One", system-ui, sans-serif;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
figure,
dl,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 0.3rem;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.glyph,
.ico {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph use[href="#i-apple"],
[href="#i-apple"] {
  fill: currentColor;
  stroke: none;
}

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

.skip {
  position: fixed;
  left: 1rem;
  top: -6rem;
  z-index: 300;
  padding: 0.8rem 1.1rem;
  color: #10080d;
  border-radius: 0.4rem;
  background: var(--cyan);
  font-weight: 700;
}

.skip:focus {
  top: 1rem;
}

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

/* Film grain over the whole page. Cheap, static, and it stops the large flat
   dark areas from banding. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 400;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------- loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 1.6rem;
  background: var(--bg);
}

.js:not(.still) .loader {
  display: grid;
}

.loader img {
  width: min(15rem, 46vw);
  animation: pulse 1.4s var(--ease) infinite alternate;
}

.loader-bar {
  display: block;
  width: min(11rem, 34vw);
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}

.loader-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pink);
  transition: width 620ms var(--ease);
}

.loader.is-full .loader-bar i {
  width: 100%;
}

.loader.is-off {
  visibility: hidden;
  opacity: 0;
  transition: opacity 500ms var(--ease), visibility 0s 500ms;
}

@keyframes pulse {
  from { opacity: 0.55; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- reveal system ---------- */

.js [data-anim="fade"] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-anim="fade"].is-in {
  opacity: 1;
  transform: none;
}

.word,
.line > span {
  display: inline-block;
}

.word {
  overflow: hidden;
  vertical-align: bottom;
}

.js [data-anim="word"] > span,
.js [data-anim="lines"] .line > span {
  transform: translateY(115%);
  transition: transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-anim="word"].is-in > span,
.js [data-anim="lines"].is-in .line > span {
  transform: none;
}

/* ---------- header ---------- */

.head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  transition: padding 400ms var(--ease), background 400ms var(--ease), backdrop-filter 400ms var(--ease);
}

.head.is-stuck {
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 7, 9, 0.72);
  backdrop-filter: blur(16px);
}

.head-brand {
  flex: none;
  margin-right: auto;
}

.head-brand img {
  width: clamp(7rem, 11vw, 9.5rem);
}

.head-nav {
  display: flex;
  gap: 0.15rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.head-nav a {
  position: relative;
  display: block;
  padding: 0.55rem 0.85rem;
  color: var(--muted);
  border-radius: 999px;
  transition: color 260ms var(--ease), background 260ms var(--ease);
}

.head-nav a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.35rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--pink);
  transition: transform 320ms var(--ease);
}

.head-nav a:hover,
.head-nav a:focus-visible {
  color: var(--ink);
}

.head-nav a:hover::after {
  transform: scaleX(1);
}

.head-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  color: #14070d;
  border-radius: 999px;
  background: var(--pink);
  font-size: 0.82rem;
  font-weight: 700;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background 260ms var(--ease);
}

.head-cta:hover,
.head-cta:focus-visible {
  transform: translateY(-2px);
  background: var(--pink-soft);
  box-shadow: 0 12px 30px rgba(255, 90, 162, 0.28);
}

.head-cta .glyph {
  width: 1rem;
  height: 1rem;
}

.head-burger {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.head-burger .close,
.head-burger[aria-expanded="true"] .open {
  display: none;
}

.head-burger[aria-expanded="true"] .close {
  display: block;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-content: center;
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.glow-a {
  top: -12%;
  right: -6%;
  width: min(46rem, 70vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 40%, rgba(255, 90, 162, 0.55), transparent 62%);
  animation: drift 18s ease-in-out infinite alternate;
}

.glow-b {
  bottom: -22%;
  left: -10%;
  width: min(34rem, 62vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(79, 216, 232, 0.34), transparent 64%);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3rem, 2.5rem, 0) scale(1.12); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  color: var(--pink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tag .dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0.28rem rgba(255, 90, 162, 0.16);
  animation: blink 2.4s ease-in-out infinite;
}

.tag-cyan {
  color: var(--cyan);
}

.tag-cyan .dot {
  box-shadow: 0 0 0 0.28rem rgba(79, 216, 232, 0.16);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-title,
.title {
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.005em;
}

.hero-title {
  margin-bottom: 1.6rem;
  font-size: clamp(3.1rem, 8.4vw, 7.6rem);
}

.hero-title .line,
.title .line {
  display: block;
  overflow: hidden;
}

.hero-title .accent,
.title .accent {
  color: var(--pink);
}

.hero-lede {
  max-width: 34rem;
  margin-bottom: 2.2rem;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  position: relative;
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 300ms var(--ease), background 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}

.btn-main {
  color: #14070d;
  background: var(--pink);
  box-shadow: 0 16px 38px rgba(255, 90, 162, 0.26);
}

.btn-main:hover,
.btn-main:focus-visible {
  background: var(--pink-soft);
  box-shadow: 0 22px 48px rgba(255, 90, 162, 0.34);
}

.btn-ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.btn-ghost .glyph {
  transition: transform 300ms var(--ease);
}

.btn-ghost:hover .glyph {
  transform: translateX(0.25rem);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.8rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
}

.hero-meta li + li::before {
  content: "";
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.hero-meta .soon {
  color: var(--cyan);
}

/* hero stage */

.hero-stage {
  position: relative;
  min-height: clamp(24rem, 46vw, 38rem);
}

.hero-blob {
  position: absolute;
  inset: 8% 4% 6% 6%;
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
  background: linear-gradient(150deg, rgba(255, 90, 162, 0.22), rgba(79, 216, 232, 0.14));
  filter: blur(2px);
  animation: morph 14s ease-in-out infinite alternate;
}

@keyframes morph {
  from { border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%; transform: rotate(0deg); }
  to { border-radius: 56% 44% 58% 42% / 44% 56% 42% 58%; transform: rotate(6deg); }
}

.hero-dish {
  position: absolute;
  right: 0;
  top: 8%;
  width: 58%;
  overflow: hidden;
  border-radius: 50%;
  border: 0.45rem solid rgba(255, 90, 162, 0.5);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.hero-dish img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.hero-phone {
  position: absolute;
  left: 2%;
  bottom: 0;
  z-index: 3;
  width: 50%;
  max-width: 17rem;
}

.chip {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(18, 12, 17, 0.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.chip strong {
  font-size: 0.82rem;
}

.chip span {
  color: var(--muted);
  font-size: 0.7rem;
}

/* Both chips sit clear of the phone so they never cover the real UI. */
.chip-a {
  left: 0;
  top: 2%;
}

.chip-b {
  right: 2%;
  bottom: 8%;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 2;
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  transform: translateX(-50%);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}

.hero-scroll:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.hero-scroll .glyph {
  animation: nudge 2s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateY(-0.15rem); }
  50% { transform: translateY(0.2rem); }
}

/* ---------- phone component ---------- */

.phone {
  position: relative;
  padding: 0.35rem;
  border-radius: 2.3rem;
  background: linear-gradient(160deg, #4a3f46, #171015 42%, #0d090c);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6);
}

.phone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.7rem;
  z-index: 4;
  width: 24%;
  height: 0.42rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b070a;
}

.phone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  border-radius: 2rem;
  background: #120b10;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- ticker ---------- */

.ticker {
  overflow: hidden;
  padding: 1.1rem 0;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 90, 162, 0.1), rgba(79, 216, 232, 0.08));
}

.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 1.6rem;
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1;
  white-space: nowrap;
  animation: slide 26s linear infinite;
}

.ticker-track i {
  color: var(--pink);
  font-style: normal;
}

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- statement ---------- */

.say {
  padding-block: var(--step);
  text-align: center;
}

.say .tag {
  justify-content: center;
}

.say-text {
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1.45rem, 3.6vw, 2.85rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.say-text .w {
  display: inline-block;
  color: var(--ink);
  opacity: 0.16;
  transition: opacity 240ms linear;
}

.say-text.is-lit .w {
  opacity: clamp(0.16, calc((var(--p, 0) * var(--n, 1) - var(--i, 0)) * 0.85 + 0.16), 1);
}

.say-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.say-facts b {
  display: block;
  color: var(--pink);
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
}

.say-facts span {
  display: block;
  max-width: 14rem;
  margin: 0.6rem auto 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- section heading ---------- */

.head-block {
  max-width: 44rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.title {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
}

.head-block .lede,
.lede {
  max-width: 34rem;
  margin-top: 1.4rem;
  color: var(--muted);
}

/* ---------- steps ---------- */

.steps {
  padding-block: var(--step);
}

.steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.steps-sticky {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  align-content: center;
  justify-items: center;
}

.steps-phone {
  width: min(100%, 17rem);
}

.steps-phone .shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}

.steps-phone .shot.is-on {
  opacity: 1;
  transform: none;
}

.steps-phone .shot[data-shot="2"] {
  object-position: 50% 62%;
}

.steps-list {
  display: grid;
  gap: clamp(2rem, 8vw, 6rem);
  padding-block: 22vh;
}

.step {
  padding: 2rem 0 2.2rem;
  border-top: 1px solid var(--line);
  opacity: 0.42;
  transition: opacity 500ms var(--ease);
}

.step.is-active {
  opacity: 1;
}

.step-n {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--pink);
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}

.step h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step p {
  max-width: 28rem;
  color: var(--muted);
}

/* ---------- club ---------- */

.club {
  position: relative;
  padding-block: var(--step);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 90, 162, 0.14), transparent 58%),
    radial-gradient(90% 80% at 95% 100%, rgba(79, 216, 232, 0.12), transparent 60%),
    var(--bg-lift);
  border-block: 1px solid var(--line);
}

.club-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* Narrower column than the full-width headings, so it keeps its two lines. */
.club-copy .title {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.pills li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.84rem;
  font-weight: 500;
}

.pills .glyph {
  width: 1rem;
  height: 1rem;
  color: var(--cyan);
}

.club-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--bg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  transition: transform 400ms var(--ease);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.club-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.club-card figcaption {
  display: grid;
  gap: 0.35rem;
  padding: 1.3rem 1.5rem 1.6rem;
}

.club-card strong {
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
}

.club-card span {
  color: var(--muted);
  font-size: 0.74rem;
}

/* ---------- places ---------- */

.places {
  padding-block: var(--step);
}

.places-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.place {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
  transition: border-color 400ms var(--ease), background 400ms var(--ease), transform 400ms var(--ease);
}

.place:hover {
  transform: translateY(-4px);
  border-color: var(--pink);
  background: rgba(255, 90, 162, 0.07);
}

.place-n {
  position: absolute;
  right: 1rem;
  top: 0.2rem;
  color: rgba(255, 255, 255, 0.06);
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: 6rem;
  line-height: 1;
}

.place > .glyph {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 1.6rem;
  color: var(--pink);
}

.place-kicker {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.place h3 {
  margin: 0.5rem 0 0.9rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.place address,
.place-next p {
  color: var(--muted);
  font-size: 0.9rem;
}

.place-next {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.2rem;
  align-items: center;
  border-style: dashed;
  background: transparent;
}

.place-next > .glyph {
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--cyan);
}

.place-next h3 {
  margin: 0;
  font-size: 1.15rem;
}

.place-next:hover {
  transform: none;
  border-color: var(--cyan);
  background: rgba(79, 216, 232, 0.05);
}

/* ---------- screens rail ---------- */

.screens {
  padding-block: var(--step);
}

.rail {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  padding: 0 max(var(--pad), calc((100vw - var(--shell)) / 2)) 2rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.rail-item {
  flex: 0 0 clamp(13rem, 22vw, 17rem);
  scroll-snap-align: center;
}

.rail-item .phone {
  transition: transform 500ms var(--ease);
}

.rail-item:hover .phone {
  transform: translateY(-0.6rem);
}

.rail-item figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.rail-item figcaption span {
  color: var(--pink);
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: 1.1rem;
}

/* ---------- food marquee ---------- */

.food {
  overflow: hidden;
  padding-block: clamp(1rem, 3vw, 2rem);
  border-block: 1px solid var(--line);
}

.food-track {
  display: flex;
  width: max-content;
  gap: 1rem;
  animation: slide 42s linear infinite reverse;
}

.food-track figure {
  position: relative;
  width: clamp(11rem, 20vw, 17rem);
  overflow: hidden;
  border-radius: 1rem;
}

.food-track img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.food-track figure:hover img {
  transform: scale(1.06);
}

.food-track figcaption {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  background: rgba(10, 7, 9, 0.78);
  backdrop-filter: blur(8px);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---------- download ---------- */

.get {
  padding-block: var(--step);
}

.get-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255, 90, 162, 0.2), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(79, 216, 232, 0.14), transparent 55%),
    var(--bg-lift);
}

.get-title {
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.store {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 12rem;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(10, 7, 9, 0.6);
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

.store img {
  grid-row: 1 / span 2;
  width: 1.9rem;
  height: 1.9rem;
  object-fit: contain;
}

.store span {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.66rem;
}

.store strong {
  grid-column: 2;
  font-size: 1.05rem;
  font-weight: 700;
}

.store-live {
  border-color: rgba(255, 90, 162, 0.55);
  box-shadow: 0 14px 34px rgba(255, 90, 162, 0.16);
}

.store-live:hover,
.store-live:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pink);
  box-shadow: 0 22px 46px rgba(255, 90, 162, 0.26);
}

.store-soon {
  opacity: 0.62;
}

.store-soon em {
  position: absolute;
  top: -0.65rem;
  right: 0.8rem;
  padding: 0.2rem 0.5rem;
  color: #0b070a;
  border-radius: 0.3rem;
  background: var(--cyan);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.get-note {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.get-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--pink);
}

.get-dish {
  position: relative;
  justify-self: center;
  width: min(100%, 20rem);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 400ms var(--ease);
}

.get-dish img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 0.5rem solid var(--pink);
  border-radius: 50%;
}

.get-dish figcaption {
  position: absolute;
  right: 0;
  bottom: 12%;
  padding: 0.5rem 0.8rem;
  color: #0b070a;
  border-radius: 0.4rem;
  background: var(--cyan);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---------- footer ---------- */

.foot {
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(8rem, 0.7fr));
  gap: 2.5rem;
}

.foot-brand img {
  width: 10rem;
}

.foot-brand p {
  max-width: 20rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.foot-store {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease);
}

.foot-store:hover,
.foot-store:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pink);
  background: rgba(255, 90, 162, 0.1);
}

.foot-store .glyph {
  width: 1rem;
  height: 1rem;
}

.foot nav {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.foot nav strong {
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.foot nav a {
  color: var(--muted);
  font-size: 0.85rem;
  transition: color 260ms var(--ease);
}

.foot nav a:hover,
.foot nav a:focus-visible {
  color: var(--pink);
}

/* Full-bleed wordmark. 11.6vw is the largest size at which the 13 characters
   still fit one viewport width, so it stretches without ever clipping. */
.foot-mark {
  width: 100vw;
  margin: clamp(2.5rem, 6vw, 4.5rem) calc(50% - 50vw) 0;
  color: transparent;
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: 11.6vw;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  background-clip: text;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem 2rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
}

.foot-bottom a:hover {
  color: var(--pink);
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hero-inner,
  .club-inner,
  .get-inner {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    min-height: 24rem;
  }

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

  .steps-sticky {
    position: sticky;
    top: 4.5rem;
    height: auto;
    padding-bottom: 1.5rem;
    background: linear-gradient(180deg, var(--bg) 78%, transparent);
  }

  .steps-phone {
    width: min(50%, 11rem);
  }

  .steps-list {
    padding-block: 2rem 0;
  }

  .get-dish {
    order: -1;
    width: min(70%, 16rem);
  }
}

@media (max-width: 780px) {
  .head-nav {
    position: fixed;
    inset: 5.2rem var(--pad) auto;
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.8rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(14, 9, 12, 0.96);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s 320ms;
    font-size: 1rem;
  }

  .head-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .head-nav a {
    padding: 0.85rem 1rem;
  }

  .head-burger {
    display: grid;
  }

  .head-cta span {
    display: none;
  }

  .head-cta {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    justify-content: center;
  }

  .head-cta .glyph {
    width: 1.15rem;
    height: 1.15rem;
  }

  .say-facts {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

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

  .place-next {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .place-next > .glyph {
    grid-row: auto;
  }

  .foot-top {
    grid-template-columns: 1fr 1fr;
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .hero-cta,
  .hero-cta .btn,
  .stores,
  .store {
    width: 100%;
  }

  .hero-dish {
    width: 60%;
  }

  .hero-phone {
    width: 52%;
  }

  /* No room left for the floating chips without covering the app UI, and the
     same two claims already appear in the copy above. */
  .chip {
    display: none;
  }

  .steps-list {
    gap: 1.5rem;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .still [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }

  .still [data-anim] span {
    transform: none !important;
  }

  .still .say-text .w {
    opacity: 1;
  }

  .ticker-track,
  .food-track {
    animation: none;
  }
}

/* ==========================================================================
   Document pages - legal, terms, privacy, support, 404.
   These reuse the header, footer and reveal system above. Their headings are
   set in Open Sauce rather than Quicksilver, because titles like "Politique de
   confidentialite" need accents the display face does not carry.
   ========================================================================== */

.doc {
  width: min(100% - (var(--pad) * 2), 52rem);
  margin-inline: auto;
  padding: clamp(7rem, 13vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
}

.doc-hero {
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

.doc-hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.doc-date {
  color: var(--muted);
  font-size: 0.85rem;
}

.notice {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  font-size: 0.88rem;
}

.doc-body h2 {
  margin: 2.6rem 0 0.9rem;
  font-family: "Open Sauce One", system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.doc-body h2:first-child {
  margin-top: 0;
}

.doc-body h3 {
  margin: 1.9rem 0 0.6rem;
  color: var(--pink-soft);
  font-size: 1rem;
  font-weight: 600;
}

.doc-body p {
  margin-bottom: 1rem;
  color: var(--muted);
}

.doc-body ul {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  padding-left: 1.1rem;
  color: var(--muted);
  list-style: disc;
}

.doc-body li::marker {
  color: var(--pink);
}

.doc-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--pink);
  transition: color 220ms var(--ease);
}

.doc-body a:hover {
  color: var(--pink-soft);
}

.doc-identity {
  display: grid;
  gap: 0.35rem;
  margin: 1.2rem 0 2rem;
  padding: 1.3rem 1.5rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--surface);
  font-size: 0.9rem;
}

.doc-identity strong {
  color: var(--ink);
  font-size: 1rem;
}

.table-wrap {
  margin-bottom: 1.4rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
}

.doc-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.doc-table th,
.doc-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.doc-table th {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 600;
}

.doc-table td {
  color: var(--muted);
}

.doc-table tr:last-child td {
  border-bottom: 0;
}

/* support page */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.card {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--surface);
  transition: border-color 320ms var(--ease);
}

.card:hover {
  border-color: var(--pink);
}

.card h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.card p {
  margin: 0 0 0.7rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.card .btn {
  min-height: 2.9rem;
  padding: 0.75rem 1.1rem;
  font-size: 0.82rem;
  word-break: break-word;
}

.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.checklist article {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
}

.checklist strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--pink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.checklist p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.form {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 3rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--surface);
}

.form label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.form select,
.form input,
.form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 0.6rem;
  background: rgba(10, 7, 9, 0.6);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
}

.form textarea {
  resize: vertical;
}

.form select:focus-visible,
.form input:focus-visible,
.form textarea:focus-visible {
  border-color: var(--pink);
}

.form .btn {
  justify-self: start;
}

.form-status {
  margin: 0;
  color: var(--cyan);
  font-size: 0.82rem;
  min-height: 1.2rem;
}

/* 404 */

.err {
  display: grid;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: var(--pad);
  text-align: center;
}

/* Scoped past ".err p" below, which would otherwise win on specificity. */
.err .err-code {
  margin-bottom: 0.5rem;
  color: var(--pink);
  font-family: "Quicksilver", "Open Sauce One", system-ui, sans-serif;
  font-size: clamp(6rem, 26vw, 18rem);
  line-height: 0.85;
}

.err h1 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.err p {
  max-width: 26rem;
  margin-bottom: 2rem;
  color: var(--muted);
}

@media (max-width: 780px) {
  .cards,
  .checklist {
    grid-template-columns: 1fr;
  }
}