/* Best Bottle landing page (R559), built from Anita's Figma frame "Mainv3" (1440 x 3701).
   Desktop: every position and size is the Figma value in px times --u, so the page is exact
   at 1440 wide and scales down proportionally to 900. Below 900 the sections stack. */

:root {
  --gold: #D4A148;
  --rose: #ECCDD2;
  --ink: #000;
  --u: min(1px, calc(100vw / 1440)); /* fallback; see @supports below */
  --shade: 110, 75, 25; /* the gold bands' corner shadows */
  color-scheme: dark;
}
/* 100vw counts a classic (Windows) scrollbar, which would make the 1440 frame 15 px wider than the
   page. body is an inline-size container, so 100cqw is the width actually available. */
@supports (width: 1cqw) {
  :root { --u: min(1px, calc(100cqw / 1440)); }
}
@supports not (width: 1cqw) {
  html { overflow-x: hidden; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: #000; }
body {
  container-type: inline-size;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.hp { display: none !important; }

.frame { position: relative; width: calc(1440 * var(--u)); height: 100%; margin: 0 auto; }

/* ---------- header ---------- */
.site-header { background: #000; height: calc(130 * var(--u)); }
.logo { position: absolute; left: calc(85 * var(--u)); top: calc(36 * var(--u)); display: block; }
.logo img { height: calc(74 * var(--u)); width: auto; }

/* ---------- hero ---------- */
.hero {
  height: calc(810 * var(--u));
  background: #000 url(/assets/hero-bg-1x.webp) center / cover no-repeat;
  background-image: image-set(url(/assets/hero-bg-1x.webp) 1x, url(/assets/hero-bg.webp) 2x);
}
.hero .frame > * { position: absolute; }
/* Margins reproduce the design's tops: eyebrow 108, h1 162, lede 322, form 482, BETA 593. */
.hero-copy { left: calc(81 * var(--u)); top: calc(108 * var(--u)); }
.eyebrow {
  font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); font-weight: 400;
  color: var(--gold);
}
.hero h1 {
  margin: calc(18 * var(--u)) 0 0 calc(-1 * var(--u));
  font-size: calc(64 * var(--u)); line-height: calc(70 * var(--u)); font-weight: 600;
  letter-spacing: 0; white-space: nowrap;
}
.lede {
  margin-top: calc(20 * var(--u));
  font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 500;
  white-space: nowrap;
}
.notify-hero { margin-top: calc(84 * var(--u)); }
.beta { margin-top: calc(30 * var(--u)); }
.hero-phones { left: calc(793 * var(--u)); top: calc(85 * var(--u)); width: calc(558 * var(--u)); }

/* ---------- email capture (hero + stats) ---------- */
.notify { width: max(340px, calc(430 * var(--u))); }
.notify-label, .beta-label {
  display: block;
  font-size: max(13px, calc(16 * var(--u))); line-height: max(16px, calc(19 * var(--u)));
  color: #fff;
}
/* Anita's notes 2026-10-07, II.2: a 2pt rose stroke round the field, the button flush inside it. */
.email-bar {
  display: flex; align-items: stretch;
  margin-top: calc(15 * var(--u));
  height: max(40px, calc(47 * var(--u)));
  border: 2px solid var(--rose);
  background: #fff; border-radius: 999px; overflow: hidden;
}
.email-bar input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 0 calc(19 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  color: #1a1a1a;
}
.email-bar input::placeholder { color: var(--gold); opacity: 1; }
/* No vertical nudge: "Notify Me" shares the placeholder's baseline (notes II.4). */
.email-bar button, .btn-gold {
  border: 0; border-radius: 999px; cursor: pointer; padding: 0;
  background: var(--gold); color: var(--ink);
  font-size: max(13px, calc(16 * var(--u))); font-weight: 500;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.email-bar button { flex: 0 0 calc(180 * var(--u)); }
.email-bar:focus-within { box-shadow: 0 0 0 3px rgba(236, 205, 210, .45); }
/* Notes II.1 and II.3: every button turns rose on hover, press and keyboard focus. The rose fill is
   the focus indicator, so there is no white ring competing with the call to action. Hover only
   where a real pointer hovers: on touch screens a tapped button would otherwise stay rose. */
.btn-gold:active, .btn-gold:focus-visible,
.email-bar button:active, .email-bar button:focus-visible,
.btn-ghost:active, .btn-ghost:focus-visible {
  background: var(--rose); border-color: var(--rose); color: var(--ink); outline: none;
}
@media (hover: hover) {
  .btn-gold:hover, .email-bar button:hover, .btn-ghost:hover {
    background: var(--rose); border-color: var(--rose); color: var(--ink);
  }
}
.btn-beta {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  margin-top: calc(14 * var(--u));
  width: max(170px, calc(230 * var(--u))); height: max(40px, calc(43 * var(--u)));
}
.form-status { min-height: 0; font-size: max(13px, calc(14 * var(--u))); line-height: 1.3; margin-top: 8px; color: #fff; }
.form-status:empty { margin: 0; }
.form-status.is-error { color: #FFB4A8; }
.notify.is-done .email-bar { display: none; }

/* ---------- bands ---------- */
.band { position: relative; height: calc(700 * var(--u)); overflow: hidden; }
.band .frame > * { position: absolute; }
.band-gold {
  background:
    radial-gradient(calc(420 * var(--u)) calc(900 * var(--u)) at 100% 0%, rgba(var(--shade), .5), rgba(var(--shade), 0)),
    radial-gradient(calc(380 * var(--u)) calc(600 * var(--u)) at 0% 100%, rgba(var(--shade), .5), rgba(var(--shade), 0)),
    var(--gold);
}
.band-rose { background: #D9C0C4 url(/assets/rose-bg.webp) center / cover no-repeat; }

/* Card text columns are 546 px wide in all three cards: the only width at which Inter Medium 16
   reproduces every line break in the design (anything from 544.4 to 547.9 works). */
.card { color: var(--ink); border: calc(2 * var(--u)) solid; }
.card h2 { font-size: calc(32 * var(--u)); line-height: calc(39 * var(--u)); font-weight: 500; }
.card p {
  margin-top: calc(4 * var(--u));
  font-size: max(13px, calc(16 * var(--u))); line-height: 1.21; font-weight: 500;
}
.card p + p { margin-top: 1.21em; }
.card-gold {
  border-color: var(--rose); /* notes III.2 */
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 calc(7 * var(--u)) rgba(236, 205, 210, .55), inset 0 0 calc(7 * var(--u)) rgba(236, 205, 210, .3);
}
.card-rose {
  border-color: var(--gold);
  background: rgba(236, 205, 210, .65);
  box-shadow: 0 0 calc(14 * var(--u)) rgba(255, 255, 255, .6);
}

/* Line art is drawn in #D9A752 inside the SVGs (Anita's bottle file uses it; the prototype's glasses
   measure the same), so it shows at full opacity. Phones on gold get the Figma outer glow: blur 25,
   black at 20% (notes III.1). */
.band-gold .phone { filter: drop-shadow(0 0 calc(25 * var(--u)) rgba(0, 0, 0, .2)); }
.art-glasses { left: calc(693 * var(--u)); top: calc(97 * var(--u)); width: calc(446 * var(--u)); }
.art-bottle { left: calc(644 * var(--u)); top: calc(-4 * var(--u)); width: calc(609 * var(--u)); }
.phone-ingest { left: calc(172 * var(--u)); top: calc(95 * var(--u)); width: calc(239 * var(--u)); }
.card-how { left: calc(622 * var(--u)); top: calc(264 * var(--u)); width: calc(584 * var(--u));
  padding: calc(28 * var(--u)) calc(7 * var(--u)) calc(35 * var(--u)) calc(27 * var(--u)); }

.card-rates { left: calc(189 * var(--u)); top: calc(241 * var(--u)); width: calc(583 * var(--u));
  padding: calc(17 * var(--u)) calc(8 * var(--u)) calc(34 * var(--u)) calc(25 * var(--u)); }
.phone-filter { left: calc(846 * var(--u)); top: calc(86 * var(--u)); width: calc(516 * var(--u)); }

.phone-results { left: calc(63 * var(--u)); top: calc(95 * var(--u)); width: calc(509 * var(--u)); }
.card-cheers { left: calc(623 * var(--u)); top: calc(265 * var(--u)); width: calc(583 * var(--u));
  padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(31 * var(--u)) calc(17 * var(--u)); }
.card-cheers p { margin-top: calc(7 * var(--u)); }

/* Notes III.4: phones float into place as they scroll into view. Only with JS (the inline script
   adds .js and main.js adds .is-in), and not at all for people who ask for reduced motion. */
.js .reveal {
  opacity: 0; translate: 0 calc(40 * var(--u));
  transition: opacity .9s ease-out, translate 1.1s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }
/* Printouts, and full-page captures that never scroll, would otherwise show holes. */
@media (prefers-reduced-motion: reduce), print {
  .js .reveal { opacity: 1; translate: none; transition: none; }
}

/* ---------- stats ---------- */
.stats { background: #000; height: calc(624 * var(--u)); }
.stats .frame > * { position: absolute; }
.stat-list { list-style: none; inset: 0; }
.stat { position: absolute; top: calc(85 * var(--u)); width: calc(400 * var(--u)); text-align: center; color: var(--gold); }
.stat-1 { left: calc(112 * var(--u)); }
.stat-2 { left: calc(520 * var(--u)); }
.stat-3 { left: calc(908 * var(--u)); }
.stat strong { display: block; font-size: calc(64 * var(--u)); line-height: calc(64 * var(--u)); font-weight: 600; }
.stat span { display: block; margin-top: calc(4 * var(--u)); font-size: calc(40 * var(--u)); line-height: calc(50 * var(--u)); font-weight: 500; }
.notify-footer { left: 50%; top: calc(331 * var(--u)); transform: translateX(calc(-50% - 5 * var(--u))); }

/* ---------- footer ---------- */
.site-footer {
  background: #000;
  padding: 0 16px calc(22 * var(--u));
  text-align: center;
  font-size: max(11px, calc(12 * var(--u))); line-height: max(14px, calc(15 * var(--u)));
  color: var(--gold);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .sep { margin: 0 .25em; }

/* ---------- beta dialog ---------- */
.beta-dialog {
  margin: auto; width: min(460px, calc(100vw - 32px));
  border: 2px solid var(--gold); border-radius: 18px;
  background: #0b0b0b; color: #fff;
  padding: 0;
}
.beta-form { padding: 28px 28px 22px; }
.beta-dialog::backdrop { background: rgba(0, 0, 0, .72); }
dialog:not([open]) { display: none; } /* browsers without <dialog> would otherwise show the form inline */
.beta-dialog h2 { font-size: 26px; line-height: 1.2; font-weight: 600; color: var(--gold); }
.beta-intro { margin-top: 10px; font-size: 15px; line-height: 1.45; color: #e8e2d6; }
.field-label { display: block; margin-top: 18px; font-size: 14px; font-weight: 500; color: #fff; }
.beta-form input[type=email] {
  display: block; width: 100%; margin-top: 6px; height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px; background: #fff; color: #1a1a1a; font-size: 16px;
}
.beta-form input[type=email]:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.device { border: 0; }
.device label { display: inline-flex; align-items: center; gap: 8px; margin: 10px 22px 0 0; font-size: 15px; cursor: pointer; }
.device input { accent-color: var(--gold); width: 18px; height: 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.dialog-actions button { height: 42px; padding: 0 22px; font-size: 15px; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; cursor: pointer; }
.beta-form .form-status { font-size: 15px; }
.fine-print { margin-top: 14px; font-size: 12px; color: #a39b8c; }
.beta-form.is-done .device, .beta-form.is-done input[type=email], .beta-form.is-done .field-label,
.beta-form.is-done .beta-intro, .beta-form.is-done [type=submit] { display: none; }

/* ---------- phones and small tablets: stack the sections ---------- */
@media (max-width: 899px) {
  :root { --u: 1px; }
  br.desk { display: none; }
  .frame { width: auto; height: auto; padding: 0 20px; }
  .hero .frame > *, .band .frame > *, .stats .frame > * { position: static; left: auto; top: auto; }

  .site-header { height: 76px; }
  .logo { left: 20px; top: 14px; }
  .logo img { height: 48px; }

  /* Anita, phone review: the sign-up and BETA calls to action sit below the app images. The copy
     column dissolves (display: contents) so its children can be ordered around the phones. */
  .hero { height: auto; padding: 36px 0 44px; }
  .hero .frame { display: flex; flex-direction: column; }
  .hero-copy { display: contents; }
  .eyebrow { order: 1; } .hero h1 { order: 2; } .lede { order: 3; }
  .hero-phones { order: 4; } .notify-hero { order: 5; } .beta { order: 6; }
  .eyebrow { font-size: 20px; line-height: 26px; }
  .hero h1 { margin: 8px 0 0; font-size: clamp(28px, 8.6vw, 44px); line-height: 1.1; white-space: normal; }
  .lede { margin-top: 14px; font-size: 20px; line-height: 1.3; white-space: normal; }
  .notify { width: 100%; max-width: 430px; }
  .notify-hero { margin-top: 36px; }
  .email-bar input { padding: 0 12px; }
  .email-bar button { flex-basis: 112px; }
  .beta { margin-top: 26px; }
  .btn-beta { width: auto; padding: 0 26px; }
  .hero-phones { width: min(100%, 460px); margin: 34px auto 0; }

  .band { height: auto; padding: 64px 0; }
  .band .frame { display: flex; flex-direction: column; align-items: center; gap: 48px; }
  .card { width: 100%; max-width: 584px; padding: 22px 20px 24px; border-width: 2px; }
  .card h2 { font-size: 26px; line-height: 1.25; }
  .card p, .card-cheers p { margin-top: 8px; font-size: 16px; line-height: 1.4; }
  .card p + p { margin-top: 14px; }
  /* Anita, phone review: the line art sits centred behind the text box and peeks out above and
     below it. Art and card share one grid cell; the phones take the next row. */
  .band-how .frame, .band-cheers .frame { display: grid; justify-items: center; align-items: center; row-gap: 56px; }
  .band .frame > .art { grid-area: 1 / 1; position: static; }
  .band .frame > .art-glasses { width: 300px; }
  .band .frame > .art-bottle { width: 250px; }
  .band .frame > .card-how, .band .frame > .card-cheers { grid-area: 1 / 1; position: relative; }
  .band .frame > .phone-ingest, .band .frame > .phone-results { grid-area: 2 / 1; position: relative; }
  .phone-ingest { width: 200px; }
  .phone-filter, .phone-results { width: min(100%, 440px); }

  .stats { height: auto; padding: 48px 0 40px; }
  .stat-list { display: grid; gap: 30px; }
  .stat { position: static; width: auto; }
  .stat strong { font-size: 48px; line-height: 1.1; }
  .stat span { font-size: 26px; line-height: 1.25; }
  .notify-footer { margin: 44px auto 0; transform: none; }
  .site-footer { padding: 14px 16px 22px; }
  .site-footer .links { display: block; margin-top: 4px; }
  .site-footer .links > .sep:first-child { display: none; }
}