/* Gotham is the can's typeface. It is used where it is installed; Montserrat,
   its closest free match, stands in everywhere else until a web license is bought. */
@font-face { font-family: "COOLR Sans"; font-weight: 800; src: local("Gotham Black"), local("Gotham Ultra"), local("Gotham Bold"); }
@font-face { font-family: "COOLR Sans"; font-weight: 700; src: local("Gotham Bold"), local("Gotham-Bold"); }
@font-face { font-family: "COOLR Sans"; font-weight: 500; src: local("Gotham Medium"), local("Gotham-Medium"); }
@font-face { font-family: "COOLR Sans"; font-weight: 400; src: local("Gotham Book"), local("Gotham-Book"); }

:root {
  --canvas: #0a0d12;
  --card: #14171d;
  --control: #23262d;
  --hair: #2a2e36;
  --ink: #f5f5f7;
  --dim: #a1a1a6;
  --pink: #f0185a;          /* the Coolr script: the filled action color */
  --pink-ink: #ff4d80;
  --strawberry: #ff4d6d;
  --lime: #62c936;
  --pineapple: #ffab2e;
  --apple: #a9d41f;
  /* set by app.js to the flavor in front */
  --accent: var(--strawberry);
  --glow: #e61743;
  --font: "COOLR Sans", Montserrat, "Helvetica Neue", system-ui, sans-serif;
  --col: 1200px;
  --gutter: max(22px, calc((100vw - var(--col)) / 2 + 22px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.47 var(--font);
       letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: var(--pink-ink); text-decoration: none; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 22px; }
section { padding: 120px 0; position: relative; }
.band { background: var(--card); }

.kicker { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
h1, h2, h3 { font-weight: 700; margin: 0; }
h1 { font-size: clamp(46px, 5.6vw, 88px); line-height: 1.0; letter-spacing: -0.04em; }
h2 { font-size: clamp(38px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.lede { font-size: 21px; line-height: 1.38; color: #d6d6db; max-width: 560px; margin: 22px 0 0; }
.lede b { color: #fff; font-weight: 700; }
.accent { color: var(--accent); transition: color .6s; }
.t-lime { color: var(--lime); } .t-pineapple { color: var(--pineapple); }

/* word-by-word reveal; app.js wraps each word */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .w > span { display: inline-block; will-change: transform; }

.btn { display: inline-block; border: 0; border-radius: 980px; padding: 14px 26px; font: 700 16px/1.2 var(--font);
       letter-spacing: -0.005em; cursor: pointer; text-decoration: none; will-change: transform; transition: background .25s, box-shadow .25s; }
.btn-buy { background: var(--pink); color: #fff; box-shadow: 0 10px 40px -10px rgba(240,24,90,.7); }
.btn-buy:hover { background: #ff2b6b; box-shadow: 0 14px 50px -8px rgba(240,24,90,.9); }
.btn-soft { background: var(--control); color: var(--ink); }
.btn-glass { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
             box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.btn-glass:hover { background: rgba(255,255,255,.2); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--canvas); display: grid; place-content: center; gap: 28px; justify-items: center; }
.loader-logo { width: min(320px, 60vw); position: relative; overflow: hidden; }
.loader-logo img { width: 100%; animation: pulse 1.6s ease-in-out infinite; }
.loader-logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
                      transform: translateX(-100%); animation: shine 1.6s ease-in-out infinite; mix-blend-mode: overlay; }
.loader-bar { width: 180px; height: 3px; border-radius: 3px; background: var(--control); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--pink); transition: width .3s; }
@keyframes shine { to { transform: translateX(100%); } }
@keyframes pulse { 50% { transform: scale(1.04); } }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--pink); transform-origin: left; transform: scaleX(0); }

/* nav: clear over the hero, glass once you scroll */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
nav.scrolled { background: rgba(10,13,18,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-color: var(--hair); }
nav .wrap { display: flex; align-items: center; gap: 30px; height: 84px; transition: height .4s; }
nav.scrolled .wrap { height: 68px; }
nav .logo { position: relative; display: block; height: 46px; width: 56px; opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .4s; }
nav.scrolled .logo { opacity: 1; transform: none; }
nav .logo img { position: absolute; inset: 0; height: 100%; width: auto; transition: opacity .4s; }
nav .logo-pink { opacity: 0; }
nav.scrolled .logo-white { opacity: 0; } nav.scrolled .logo-pink { opacity: 1; }
nav .links { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 500; }
nav .links a { color: #fff; opacity: .88; }
nav .links a:hover { opacity: 1; }
nav .btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 760px) { nav .links { display: none; } nav .btn { margin-left: auto; } nav .wrap { height: 70px; } }

/* ---------- HERO ---------- */
.hero { height: 100vh; min-height: 720px; padding: 0; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: #2a1020 url(assets/plate-beach.jpg) center/cover; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(10,13,18,.82) 0%, rgba(10,13,18,.45) 38%, rgba(10,13,18,0) 60%),
              linear-gradient(0deg, var(--canvas) 0%, rgba(10,13,18,0) 28%),
              linear-gradient(180deg, rgba(10,13,18,.55) 0%, rgba(10,13,18,0) 20%); }
.hero-glow { position: absolute; z-index: -1; right: 8%; top: 12%; width: 56vw; height: 56vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%); opacity: .55; mix-blend-mode: screen; transition: background .8s; filter: blur(20px); }
.bubbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.giant { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; z-index: -1; white-space: nowrap; overflow: hidden; }
.giant span { display: inline-block; font-weight: 800; font-size: 17vw; line-height: .8; letter-spacing: -0.05em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.22); }
.hero .giant { left: 36%; right: -6%; top: 46%; }
.hero-cans { position: absolute; top: 0; right: 0; width: 58%; height: 100%; z-index: 1; touch-action: pan-y; cursor: grab; }
.hero-cans:active { cursor: grabbing; }
.hero-copy { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-52%); width: min(560px, 42vw); z-index: 3; }
.hero-logo { width: min(250px, 19vw); margin: 0 0 18px -6px; filter: drop-shadow(0 8px 40px rgba(240,24,90,.55)); }
.hero .kicker { color: #fff; opacity: .8; }
.switcher { position: absolute; right: var(--gutter); bottom: 44px; z-index: 3; display: flex; align-items: center; gap: 18px; }
.switcher .now { display: grid; text-align: center; min-width: 230px; }
.switcher .count { font-size: 12px; letter-spacing: .2em; color: var(--dim); }
.switcher .count b { color: #fff; }
.switcher .name { font-size: 22px; font-weight: 700; color: var(--accent); transition: color .5s; }
.round { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
         cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background .25s, transform .25s; }
.round:hover { background: rgba(255,255,255,.24); transform: scale(1.08); }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.7); z-index: 3; }
.scroll-cue::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(#fff, transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* floating fruit: position and depth from inline vars; app.js adds the parallax offset */
.fruit-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fr { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
      transform: translate3d(var(--px, 0), var(--py, 0), 0); will-change: transform; }
.fr img { width: 100%; height: 100%; object-fit: contain; animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--d) * -3s);
          filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
@keyframes bob { 50% { transform: translateY(-18px) rotate(8deg); } }

@media (max-width: 900px) {
  .hero { height: auto; min-height: 0; padding: 110px 0 120px; }
  .hero-copy { position: relative; left: auto; top: auto; transform: none; width: auto; padding: 0 22px; text-align: center; }
  .hero-logo { width: 220px; margin: 0 auto 18px; }
  .hero .cta { justify-content: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-cans { position: relative; width: 100%; height: 62vh; min-height: 420px; }
  .switcher { position: relative; right: auto; bottom: auto; justify-content: center; margin-top: 8px; }
  .hero .giant { left: -20%; right: -20%; top: 58%; }
  .giant span { font-size: 26vw; }
  .hero::before { background: linear-gradient(0deg, var(--canvas) 0%, rgba(10,13,18,.35) 40%, rgba(10,13,18,.6) 100%); }
  .hero-glow { width: 120vw; height: 120vw; right: -10vw; top: 38%; }
  .scroll-cue { display: none; }
  .fr { --s: 90px !important; }
}

/* ---------- MARQUEES ---------- */
.marquees { position: relative; height: 170px; overflow: hidden; margin-top: -20px; z-index: 5; }
.marquee { position: absolute; left: -5%; right: -5%; top: 50%; padding: 16px 0; overflow: hidden; }
.m1 { background: var(--pink); transform: translateY(-50%) rotate(-3deg); z-index: 2; box-shadow: 0 20px 60px -20px rgba(240,24,90,.7); }
.m2 { background: #fff; transform: translateY(-50%) rotate(2.5deg); }
.mq { display: flex; width: max-content; animation: mq 32s linear infinite; }
.m2 .mq { animation-direction: reverse; animation-duration: 40s; }
.mq span { font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; padding: 0 28px; white-space: nowrap; }
.m1 span { color: #fff; } .m2 span { color: var(--canvas); }
.mq span::after { content: "✦"; margin-left: 56px; font-size: .8em; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- SPIN ---------- */
.spin { padding: 0; }
.spin-pin { height: 100vh; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--glow) 55%, transparent) 0%, var(--canvas) 70%); transition: background .8s; }
.spin-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .6; mix-blend-mode: screen; transition: filter .8s; }
.spin-pin::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 80% at 50% 50%, transparent 40%, var(--canvas) 100%); }
.spin-can { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.spin-giant { z-index: 0; }
.spin-giant span { -webkit-text-stroke: 2px rgba(255,255,255,.14); }
.spin-head { position: absolute; top: 110px; left: 0; right: 0; text-align: center; z-index: 2; }
.spin-head h2 { font-size: clamp(38px, 5vw, 72px); }
.callouts .co { position: absolute; left: var(--cx); top: var(--cy); width: 250px; z-index: 2; opacity: 0; }
.co .num { font-size: clamp(64px, 7vw, 110px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; color: #fff; }
.co .num small { font-size: .32em; letter-spacing: 0; margin-left: 4px; color: var(--accent); }
.co p { margin: 10px 0 0; color: #d6d6db; font-size: 16px; }
.spin-flavor { position: absolute; bottom: 44px; left: 0; right: 0; text-align: center; z-index: 2; font-weight: 700; font-size: 20px; }
.spin-flavor i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: middle; box-shadow: 0 0 16px var(--accent); }
@media (max-width: 900px) {
  .callouts .co { width: 42%; }
  .co[data-i="0"], .co[data-i="2"] { left: 5%; } .co[data-i="1"], .co[data-i="3"] { left: auto; right: 5%; text-align: right; }
  .co[data-i="0"], .co[data-i="1"] { top: 24%; } .co[data-i="2"], .co[data-i="3"] { top: 66%; }
  .co .num { font-size: 56px; } .co p { font-size: 13px; }
  .spin-head { top: 90px; }
}

/* ---------- HIGHLIGHTS ---------- */
.highlights h2 { margin-bottom: 48px; }
.track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
         padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); position: relative; list-style: none; margin: 0; }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 min(1080px, 88vw); scroll-snap-align: start; border-radius: 28px; overflow: hidden; background: var(--card);
         display: grid; grid-template-columns: 5fr 6fr; height: 620px; transition: opacity .6s; opacity: .45; }
.slide.on { opacity: 1; }
.slide .cap { padding: 48px 44px; font-size: 26px; line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; color: var(--dim); align-self: end; }
.slide .cap b { color: #fff; font-weight: 700; display: block; margin-bottom: 10px; font-size: 1.15em; }
.slide .ph { overflow: hidden; }
.slide video, .slide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: 640px; }
  .slide .ph { order: -1; }
  .slide .cap { padding: 26px 24px 30px; font-size: 19px; }
}
.controls { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }
.dots { display: flex; gap: 12px; align-items: center; background: var(--control); border-radius: 980px; padding: 0 22px; height: 56px; }
.dot { width: 8px; height: 8px; border-radius: 980px; border: 0; padding: 0; background: #6e6e73; cursor: pointer; position: relative; overflow: hidden; transition: width .4s; }
.dot.on { width: 52px; background: #4a4a50; }
.dot.on::after { content: ""; position: absolute; inset: 0; background: #fff; border-radius: inherit; transform-origin: left; animation: fill 7s linear forwards; }
.paused .dot.on::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.play { width: 56px; height: 56px; border-radius: 980px; border: 0; background: var(--control); color: var(--ink); cursor: pointer; }
.play svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- FLAVORS ---------- */
.flavors { padding: 0; }
.flavor-stage { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 65% at 62% 50%, var(--glow) 0%, color-mix(in srgb, var(--glow) 25%, var(--canvas)) 45%, var(--canvas) 85%);
  transition: background .9s; }
.flavor-stage .giant { left: 20%; right: -20%; }
.flavor-stage .giant span { -webkit-text-stroke: 0; color: rgba(255,255,255,.08); font-size: 20vw; }
.flavor-can { position: absolute; top: 0; right: 0; width: 60%; height: 100%; z-index: 1; touch-action: pan-y; cursor: grab; }
.flavor-stage .fruit-layer { left: 46%; }
.flavor-copy { position: relative; z-index: 3; padding: 140px 22px 120px var(--gutter); width: min(600px, 46vw); box-sizing: content-box; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.tabs button { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 980px; padding: 12px 18px; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; font: 500 15px var(--font); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: background .3s, transform .3s; }
.tabs button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--canvas); }
.tabs button:hover { transform: translateY(-2px); }
.blurb { font-size: 26px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; margin: 40px 0 0; max-width: 520px; min-height: 3.9em; }
.notes { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: 16px; }
@media (max-width: 900px) {
  .flavor-copy { width: auto; padding: 100px 22px 0; text-align: center; }
  .tabs { justify-content: center; }
  .blurb { margin: 28px auto 0; font-size: 20px; }
  .flavor-can { position: relative; width: 100%; height: 60vh; min-height: 420px; }
  .flavor-stage .fruit-layer { left: 0; top: 40%; }
  .flavor-stage { background: radial-gradient(90% 50% at 50% 70%, var(--glow) 0%, var(--canvas) 85%); }
}

/* ---------- CLEAN ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; perspective: 900px; }
.tile { position: relative; background: var(--canvas); border-radius: 28px; padding: 34px 28px 32px; overflow: hidden;
        transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .2s; transform-style: preserve-3d; }
.tile::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(240,24,90,.28), transparent 70%); }
.tile:hover::before { opacity: 1; }
.tile svg { position: relative; width: 44px; height: 44px; fill: var(--pink-ink); margin-bottom: 28px; filter: drop-shadow(0 0 18px rgba(255,77,128,.6)); }
.tile h3 { position: relative; margin-bottom: 10px; }
.tile p { position: relative; margin: 0; font-size: 15px; line-height: 1.5; color: var(--dim); }
.ingredients { margin-top: 44px; font-size: 14px; color: var(--dim); }
.ingredients b { color: var(--ink); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }

/* ---------- MOMENT ---------- */
.moment { overflow: hidden; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 60px 22px 0; max-width: 1400px; margin: 0 auto; }
.mosaic .col { display: grid; gap: 20px; }
.mosaic .col:nth-child(2) { margin-top: 120px; }
.mosaic img, .mosaic video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
@media (max-width: 760px) { .mosaic { grid-template-columns: 1fr 1fr; } .mosaic .col:nth-child(3) { display: none; } .mosaic .col:nth-child(2) { margin-top: 60px; } }

/* ---------- FAQ ---------- */
.faq { margin-top: 44px; border-top: 1px solid var(--hair); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 44px 26px 0; font-size: 22px; font-weight: 500; position: relative; transition: color .3s; }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 20px; font-size: 30px; color: var(--dim); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq details p { margin: -8px 0 28px; color: var(--dim); max-width: 700px; }

/* ---------- JOIN ---------- */
.join { min-height: 100vh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.join-bg { position: absolute; inset: 0; z-index: -2; background: #1a0d14 url(assets/plate-coast.jpg) center/cover; }
.join-bg video { width: 100%; height: 100%; object-fit: cover; }
.join::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--canvas) 0%, rgba(10,13,18,.25) 30%, rgba(10,13,18,.35) 70%, var(--canvas) 100%); }
.glass { max-width: 620px; padding: 56px 52px; border-radius: 32px; background: rgba(20,23,29,.5); backdrop-filter: blur(24px) saturate(160%);
         -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.join form { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.join input { flex: 1 1 240px; border: 0; background: rgba(255,255,255,.1); color: #fff; border-radius: 980px; padding: 14px 22px;
              font: 400 17px var(--font); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.join input::placeholder { color: rgba(255,255,255,.6); }
.join input:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
.thanks { display: none; margin-top: 24px; font-size: 22px; font-weight: 700; }
@media (max-width: 760px) { .glass { padding: 38px 26px; } }

footer { padding: 70px 0 90px; font-size: 12px; color: #86868b; line-height: 1.6; }
.foot-logo { width: 160px; margin-bottom: 30px; }
footer .warn { border: 1px solid var(--hair); border-radius: 10px; padding: 16px 18px; margin-bottom: 26px; color: var(--dim); }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid var(--hair); padding-top: 20px; margin-top: 20px; }
footer a { color: var(--dim); }
.pref-src { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }

.gate { position: fixed; inset: 0; z-index: 90; background: rgba(10,13,18,.7); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
        display: grid; place-items: center; padding: 22px; }
.gate[hidden] { display: none; }
.gate .box { background: var(--card); border-radius: 32px; padding: 48px 38px; max-width: 460px; text-align: center; box-shadow: inset 0 0 0 1px var(--hair); }
.gate img { width: 170px; margin: 0 auto 26px; }
.gate h2 { font-size: 34px; }
.gate p { color: var(--dim); font-size: 15px; }
.gate .cta { justify-content: center; }


/* phones: logo, then the turntable, then the pitch; the flavor heading and tabs above its can */
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; padding-top: 96px; }
  .hero-copy { display: contents; }
  .hero-copy > * { padding: 0 22px; text-align: center; }
  .hero-logo { order: 0; width: 200px; padding: 0; margin: 0 auto 4px; }
  .hero-cans { order: 1; height: 54vh; min-height: 380px; }
  .switcher { order: 2; margin: 0 0 30px; }
  .hero .kicker { order: 3; } .hero h1 { order: 4; } .hero .lede { order: 5; } .hero .cta { order: 6; }
  .hero .giant { top: 36%; }
  .flavor-stage { display: flex; flex-direction: column; }
  .flavor-copy { order: 0; padding-bottom: 10px; }
  .flavor-can { order: 1; }
  .hero .fr:nth-child(1), .hero .fr:nth-child(6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mq, .fr img, .loader-logo img, .loader-logo::after, .scroll-cue::after { animation: none; }
  .dot.on::after { animation: none; transform: none; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }