/* FrostFire - landing page (variant B) */

/* ---------- Fonts, self-hosted ---------- */
/* Previously two <link>s to fonts.googleapis.com, which put a third-party
   stylesheet on the critical path and only then revealed the font files on a
   second third-party origin: HTML -> googleapis -> gstatic, each needing its
   own DNS, TCP and TLS before a glyph arrived. Serving them from this origin
   collapses that chain and lets the two above-the-fold faces be preloaded.
   Montserrat and Source Serif 4 are both SIL Open Font License, so hosting
   them directly is permitted. Weight 300 is gone - it was requested but the
   stylesheet never used it. unicode-range means a visitor only downloads the
   subsets their content actually renders. */

/* Montserrat 400 - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 400 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/montserrat-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 500 - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 600 - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/montserrat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 700 - latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/montserrat-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat 700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/montserrat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 400 italic - latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/source-serif-4-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 400 italic - latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/source-serif-4-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 400 - latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/source-serif-4-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 400 - latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/source-serif-4-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Light theme. The brand navy (#252D44, sampled from the logo plate) now
     carries type and the inverted blocks instead of the page background. */
  --bg:        #FFFFFF;
  --bg-deep:   #F1F5FA;  /* light wells: image slots, product panels */
  --surface:   #1B2A4A;  /* the inverted blue block (waitlist) */
  --line:      #DDE4EE;
  --field:     #46587E;  /* input underline, sits on --surface */

  --text:      #17203A;
  --muted:     #4A5772;
  --dim:       #626F8A;
  --placeholder: #93A0BA;

  --ice:       #2B5F8F;  /* accent blue, readable on white */
  --ember:     #E3562A;
  --ember-hot: #F26A3C;
  --ember-ink: #C4451E;  /* orange as *text*; bright ember fails AA at small sizes on white */
  --on-ember:  #0F1626;  /* type on the orange CTAs */
  --on-surface: #EDF1F8; /* type on the inverted blue blocks */
  --on-surface-muted: #B7C3D8;
  --on-surface-dim: #91A0BC;

  --sans:  'Montserrat', system-ui, -apple-system, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;

  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1240px;
  --ease: cubic-bezier(.22, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  /* 400 rather than 300: 300 read too light across the page. */
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ice); text-decoration: none; }
a:hover { color: var(--ember-ink); }

input, select, button { font-family: var(--sans); }

::selection { background: var(--ember); color: var(--on-ember); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

img, svg, video { display: block; }

/* Class-level `display` would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; }

.ice { color: var(--ice); }

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

/* ---------- Section headings ---------- */

/* Every h2 shares one scale. Only layout-specific bits - margins and measure -
   stay on the individual classes further down. */
.offer__eyebrow,
.tubs__title,
.founder__title,
.waitlist__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ember);
  color: var(--on-ember);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 15px 26px;
  min-height: 48px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.btn:hover { background: var(--ember-hot); color: var(--on-ember); transform: translateY(-2px); }

.btn--lg {
  font-size: 13px;
  letter-spacing: .16em;
  line-height: 1.4;
  padding: 19px 34px;
  min-height: 56px;
}

.btn--submit {
  font-size: 13px;
  letter-spacing: .16em;
  padding: 21px 28px;
  min-height: 60px;
  margin-top: 10px;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--gutter);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid rgba(221, 228, 238, 0);
  /* Zero-value filter rather than `none`, so it can interpolate to the stuck
     state instead of snapping. Keeping it off until the bar appears avoids a
     blurred band floating over the hero with no background behind it. */
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: background .35s ease, border-color .35s ease,
              backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .72);
  border-bottom-color: rgba(221, 228, 238, 1);
  /* Lighter veil + less blur reads as clearer glass; the saturation lift keeps
     content behind from going flat under the white. */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
}
.nav.is-stuck .nav__logo { opacity: 1; transform: translateY(0); }

/* The nav CTA rides in with the logo once the hero scrolls past. `visibility`
   is delayed until the fade finishes so the button leaves the tab order while
   hidden, rather than sitting there as an invisible focus target. */
.nav .btn--nav {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s,
              background .25s ease;
}
.nav.is-stuck .btn--nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease, visibility 0s,
              background .25s ease;
}
/* Restore the hover lift, which the reveal transform above would otherwise win. */
.nav.is-stuck .btn--nav:hover { transform: translateY(-2px); }

.nav__mark { height: 30px; width: auto; }
.nav__wordmark { height: 13px; width: auto; opacity: .9; }

.nav-spacer { height: 72px; }

/* ---------- Hero ---------- */

/* Full-bleed stage; the inner wrapper keeps the content on the page grid. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 9vw, 132px) var(--gutter) clamp(32px, 5vw, 72px);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footage runs dark (median luma 70), so a white veil only ever lifts the
   ground away from the navy type. 0.72 clears AA with wide headroom even
   against the darkest frame; lower it for more video, but below ~0.55 the
   headline itself starts to fail. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .72);
  pointer-events: none;
}

/* With a video behind it the hero absorbs the nav's spacer, so the footage
   runs up under the bar instead of starting below a white strip. */
body.has-video-hero .nav-spacer { display: none; }
body.has-video-hero .hero { padding-top: calc(72px + clamp(48px, 9vw, 132px)); }
/* The lead is --muted by default, which needs an opaque veil to stay legible.
   Promoting it to full text colour buys back the video's visibility. */
body.has-video-hero .hero__lead { color: var(--text); }

.hero__logo {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
  margin: 0 0 clamp(30px, 5vw, 56px);
}
.hero__mark { height: clamp(62px, 9vw, 124px); width: auto; }
.hero__wordmark { height: clamp(20px, 3.2vw, 42px); width: auto; opacity: .92; }

.hero__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}

/* The deck carries the argument the old tension section used to make. Sized at
   24px minimum so it always counts as large text: the accent blue only clears
   AA at the 3:1 large-text bar over the video veil, not the 4.5:1 body bar. */
.hero__deck {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.28;
  letter-spacing: -.015em;
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 28ch;
  color: var(--text);
  text-wrap: balance;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(32px, 5vw, 60px);
  align-items: end;
}

.hero__lead {
  margin: 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 42ch;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* ---------- Hero film / image ---------- */

.film__frame {
  position: relative;
  height: clamp(280px, 46vw, 560px);
  overflow: hidden;
  background: var(--bg-deep);
}
.film__frame video { width: 100%; height: 100%; object-fit: cover; }
.film__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.media__frame {
  position: relative;
  height: clamp(320px, 52vw, 640px);
  overflow: hidden;
}
.media__frame .media__parallax { position: absolute; inset: -14% 0; }
.media__drift {
  position: absolute;
  inset: 0;
  animation: ff-drift 22s ease-in-out infinite alternate;
}

@keyframes ff-drift {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(0, -2.5%, 0) scale(1.1); }
}

/* ---------- Image slot ---------- */

.image-slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-deep);
  overflow: hidden;
}
.image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-slot__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--dim);
}
.image-slot.is-filled .image-slot__label { display: none; }

/* ---------- Offer / Benefits / FAQ ---------- */

/* Benefits and FAQ reuse the offer section's frame and its .row component, so
   they inherit the existing rhythm rather than introducing new layout. */
.offer,
.benefits,
.faq {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}

.offer__eyebrow { margin: 0 0 clamp(24px, 4vw, 44px); }

/* ---------- Choose your tub ---------- */

.tubs {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}


.section-lead {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
}
/* Under an eyebrow the lead needs to reclaim the eyebrow's bottom margin. */
.section-lead { margin: -12px 0 clamp(24px, 4vw, 40px); }

.tubs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(32px, 5vw, 56px);
}

.tub { margin: 0; }

.tub__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(158deg, #F5F8FC 0%, #E6EDF6 100%);
}
/* Renders are keyed to transparency, so show the whole product rather than
   cropping it to fill, and let the panel breathe around it. */
.tub__media .image-slot { background: transparent; }
.tub__media .image-slot img {
  object-fit: contain;
  padding: clamp(10px, 3%, 24px);
}

.tub__caption { margin-top: 20px; }

.tub__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}

.tub__note {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--dim);
  max-width: 42ch;
}

/* ---------- Citations ---------- */

.cite {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  margin-left: 3px;
}
.cite a {
  color: var(--ice);
  text-decoration: none;
  padding: 0 1px;
}
.cite a:hover { color: var(--ember-ink); text-decoration: underline; }

.sources {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--line);
}

/* Collapsed by default; a citation click opens it before the anchor lands. */
.sources__summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding-right: 26px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .2s ease;
}
.sources__summary::-webkit-details-marker { display: none; }
.sources__summary:hover { color: var(--ice); }

.sources__summary::before,
.sources__summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 11px;
  height: 2px;
  background: var(--ember);
  transition: transform .25s var(--ease), opacity .25s ease;
}
.sources__summary::before { transform: translateY(-50%); }
.sources__summary::after { transform: translateY(-50%) rotate(90deg); }
.sources__details[open] .sources__summary::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.sources__details[open] .sources__list { margin-top: 18px; }

/* Two columns across the full content width, so nine footnotes don't run as
   one long ladder. Markers sit inside each item with a hanging indent, which
   keeps them from landing in the column gap the way outside markers would. */
.sources__list {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  columns: 2;
  column-gap: clamp(32px, 5vw, 76px);
}

.sources__list li {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--dim);
  padding-left: 1.6em;
  text-indent: -1.6em;
  margin-bottom: 13px;
  break-inside: avoid;
  /* Clear the fixed nav when a citation link jumps here. */
  scroll-margin-top: 96px;
}
.sources__list li:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .sources__list { columns: 1; }
}

.sources__list a {
  color: var(--dim);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}
.sources__list a:hover {
  color: var(--ice);
  text-decoration-color: currentColor;
}

.sources__note { font-style: italic; }

/* Mark whichever source the reader jumped to. */
.sources__list li:target { color: var(--text); }
.sources__list li:target a { color: var(--ice); }

/* ---------- Founder offer ---------- */

.offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(30px, 4vw, 44px);
}

/* Inverted so the offers carry the most visual weight in the section. Note the
   orange has to brighten on blue: --ember-ink measures only 2.86:1 there. */
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface);
  padding: clamp(28px, 3vw, 40px);
  color: var(--on-surface);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.offer-card:hover { color: var(--on-surface); transform: translateY(-3px); }
.offer-card:hover { border-color: var(--ember); }
.offer-card:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* Pushed to the bottom so both cards' actions align regardless of copy length. */
.offer-card__action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember-hot);
}
.offer-card__action svg { transition: transform .2s ease; }
.offer-card:hover .offer-card__action svg { transform: translateX(4px); }
/* The 12-month deal is the better one, so it takes the warm edge. */
.offer-card--best { border-color: var(--ember); }

.offer-card__flag {
  position: absolute;
  top: 0;
  right: clamp(28px, 3vw, 40px);
  transform: translateY(-50%);
  background: var(--ember);
  color: var(--on-ember);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.offer-card__term {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: -.01em;
  margin: 0;
  color: var(--on-surface-muted);
}

.offer-card__bonus {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 10px 0 0;
  color: var(--ember-hot);
}

.offer-card__rate {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(19px, 1.9vw, 23px);
  letter-spacing: -.01em;
  margin: 12px 0 0;
}
.offer-card__unit {
  font-weight: 400;
  font-size: 14px;
  color: var(--on-surface-dim);
  letter-spacing: .04em;
}

.offer-card__detail {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface-muted);
}
.offer-card__detail strong { font-weight: 600; color: var(--on-surface); }

/* What comes with either term. Two across so each line has room to breathe at
   the larger size, rather than four cramped columns. */
.offer-includes {
  list-style: none;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 26px) clamp(28px, 3.5vw, 56px);
}
/* Real icons rather than a CSS tick: the rotated-border version read as a
   dropdown chevron. */
.offer-includes li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--text);
}
.offer-includes__icon {
  flex: none;
  display: flex;
  color: var(--ice);
  margin-top: 1px;
}

@media (max-width: 720px) {
  .offer-includes { grid-template-columns: 1fr; }
}

.offer-note {
  margin: clamp(24px, 3vw, 34px) 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 74ch;
}

@media (max-width: 720px) {
  .offers { grid-template-columns: 1fr; }
}

/* ---------- Chooser cards (index) ---------- */

/* These reuse .offer-card and .offers for the inverted surface, the grid and
   the mobile stack, so the two pages' cards cannot drift apart. Only the two
   text roles the rental cards don't have are defined here. */
.choose__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 10px 0 0;
  color: var(--on-surface);
}
.choose__copy {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-surface-muted);
  max-width: 34ch;
}
/* ---------- Founder story, lead treatment (index) ---------- */

/* On /rent and /buy the founder story is a supporting section near the foot.
   On the chooser it is the lead, so it runs larger: taller media, bigger
   heading, and the opening line pulled out as a quote. */
/* Scoped under .founder--lead rather than using --lead element modifiers: the
   base .founder__media / .founder__grid rules live further down this file at
   equal specificity, so a modifier class here would lose on source order. That
   silently reinstated the base fixed height, which combined with aspect-ratio
   to derive width FROM height and pushed the image past the gutter. */
.founder--lead { border-top: 0; }
.founder--lead .founder__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
/* The source photo is 16:9. The default founder media is a tall fixed height,
   which cover-crops a landscape shot into a narrow slice and cuts the subject's
   head off. An aspect ratio nearer the source keeps the frame intact; the focal
   point shifts right because the subject sits off-centre. */
.founder--lead .founder__media {
  height: auto;
  aspect-ratio: 5 / 4;
}
.founder--lead .image-slot img { object-position: 58% center; }
.founder--lead .founder__body { gap: 20px; }

.founder--lead .founder__title { font-size: clamp(30px, 4.4vw, 56px); }

.founder__quote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.45;
  color: var(--text);
  border-left: 3px solid var(--ember);
  padding-left: clamp(16px, 2vw, 24px);
}

/* Single-column below the point where two columns would squeeze the quote. */
@media (max-width: 860px) {
  .founder--lead .founder__grid { grid-template-columns: 1fr; }
}

/* A hero whose CTA is the only thing under the deck needs its own spacing;
   elsewhere the .hero__grid supplies it. */
.hero__cta--solo { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- Cross-sell link ---------- */

/* Deliberately quiet: this sits next to a primary CTA on the buy page and
   must not read as a second button. Underline rather than a filled shape,
   body-text weight, and the dim token rather than the ember accent. */
.crosslink {
  display: inline-block;
  font-family: var(--sans);
  /* Medium weight and the body-text ink rather than the dim token: this sits
     over the hero video, where only a 72% white veil separates text from
     moving footage. Still a plain underlined link, so it reads as secondary
     to the filled CTA beside it without being hard to read. */
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(23, 32, 58, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.crosslink:hover {
  color: var(--ember-ink);
  text-decoration-color: currentColor;
}

/* ---------- Benefits grid ---------- */

/* Four across on desktop, stacking icon over title over copy. The "What's
   included" section keeps the wide .row layout; only this section is carded. */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(26px, 3vw, 44px);
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
}

.benefit { margin: 0; }

.benefit__icon {
  display: block;
  color: var(--ice);
  margin-bottom: 22px;
}

.benefit__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

.benefit__copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .benefits__grid { grid-template-columns: 1fr; }
}

/* ---------- Spec tables ---------- */

.spec__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: clamp(40px, 6vw, 68px) 0 clamp(16px, 2vw, 22px);
}

.spec__aside {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--dim);
  margin-left: 10px;
}

/* Wide tables scroll inside their own container rather than pushing the page. */
.spec-scroll { overflow-x: auto; }

.spec {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}

.spec th,
.spec td {
  text-align: left;
  vertical-align: top;
  padding: 15px 20px 15px 0;
  border-top: 1px solid var(--line);
}

.spec thead th {
  border-top: 0;
  padding-top: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ice);
}

.spec tbody th {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  width: 26%;
  padding-right: 28px;
}

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

.spec--pairs tbody th { width: 32%; }

/* Chiller specs on the left, the unit itself on the right. */
.chiller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.chiller__media {
  aspect-ratio: 1;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}
.chiller__media .image-slot { background: transparent; }
.chiller__media .image-slot img { object-fit: contain; }

/* The 560px floor was set for the 3-column tub table; the 2-column chiller
   table fits a half-width column without needing to scroll. */
.spec--pairs { min-width: 400px; }

@media (max-width: 900px) {
  .chiller { grid-template-columns: 1fr; }
  .chiller__media { max-width: 380px; }
}


/* ---------- FAQ ---------- */

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 24px 48px 24px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text);
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--ice); }

/* Plus that rotates into a minus, so there's one glyph rather than two. */
.faq__q::after,
.faq__q::before {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 15px;
  height: 2px;
  background: var(--ember);
  transition: transform .25s var(--ease), opacity .25s ease;
}
.faq__q::before { transform: translateY(-50%); }
.faq__q::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__a { padding: 0 clamp(0px, 6vw, 56px) 26px 0; max-width: 68ch; }
.faq__a p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Standalone content page ---------- */

/* Prose shell for the legal pages. Styles the tags directly so pasted-in
   content picks up the page's type without needing extra classes. */
.page {
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(64px, 8vw, 112px);
}

.page__inner {
  max-width: 72ch;
  margin: 0 auto;
}

.page__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}

.page__updated {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--dim);
}

.page__body {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(26px, 3.5vw, 36px);
  border-top: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
}

.page__body > * + * { margin-top: 1.1em; }
.page__body p,
.page__body ul,
.page__body ol { margin: 0; }
/* The reset above is more specific than `> * + *` (0,1,1 beats 0,1,0), so it
   wins and consecutive paragraphs collapse into one another. Naming the
   element types restores the rhythm at matching specificity. Invisible until
   the legal pages gained real multi-paragraph content. */
.page__body > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1.1em; }

.page__body h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text);
  margin-top: 1.9em;
}

.page__body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text);
  margin-top: 1.6em;
}

.page__body ul,
.page__body ol { padding-left: 1.3em; }
.page__body li + li { margin-top: .5em; }

.page__body a {
  color: var(--ice);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page__body a:hover { color: var(--ember-ink); }

.page__body strong { font-weight: 600; color: var(--text); }

/* ---------- Closing CTA ---------- */

/* Light band rather than another inverted block: the blue is reserved for the
   form itself, so this reads as a pointer to it rather than a second form. */
.closer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding: clamp(52px, 7vw, 96px) var(--gutter);
  text-align: center;
}

.closer__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.closer__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}

.closer__lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 46ch;
}

.closer .btn { margin-top: 6px; }

/* ---------- Founder ---------- */

.founder {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}

.founder__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.founder__media {
  position: relative;
  height: clamp(300px, 38vw, 480px);
  overflow: hidden;
}
.founder__media .media__parallax { position: absolute; inset: -10% 0; }

.founder__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 52ch;
}
.founder__body p {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted);
}


/* ---------- Waitlist ---------- */

.waitlist {
  background: var(--surface);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
}

.waitlist__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}


.waitlist__lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 46ch;
}

.form { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); }
.form__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.field { display: flex; flex-direction: column; }

/* One label style for inputs and radio-group legends, so a field label and a
   question heading read as the same system. */
.field__label,
.choice-set__legend {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-surface);
  margin: 0 0 8px;
  padding: 0;
}
.choice-set__legend { margin-bottom: 12px; }

.field__req { color: var(--ember-hot); }
/* Every other field on the buy form is required, so the one optional field
   says so rather than leaving its missing asterisk to be inferred. */
.field__optional {
  font-weight: 400;
  color: var(--on-surface-dim);
}


.input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  padding: 16px 2px;
  min-height: 56px;
  outline: none;
  transition: border-color .2s ease;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus { border-color: var(--ember); }
.input:focus-visible { outline: none; border-color: var(--ember); }

.select {
  color: var(--placeholder);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.select.has-value { color: var(--text); }
.select option { background: var(--surface); color: var(--text); }

/* ---------- Chunky radio choices ---------- */

/* Fieldsets need min-width:0 or their intrinsic minimum stops the grid inside
   from shrinking on narrow screens. */
.choice-set {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}



.choice-set__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* "Not sure yet" runs the full width, below the two real choices. */
.choice--wide { grid-column: 1 / -1; }

.choice {
  display: block;
  cursor: pointer;
  height: 100%;
}

/* Visually hidden but still focusable, so keyboard and screen readers get the
   real radio behaviour and the card is only a skin. */
.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.choice__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, background .2s ease;
}
.choice:hover .choice__body { border-color: rgba(255, 255, 255, .45); }

.choice__input:checked + .choice__body {
  border-color: var(--ember);
  background: rgba(227, 86, 42, .12);
}
.choice__input:focus-visible + .choice__body {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.choice__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.choice__mark {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.choice__input:checked + .choice__body .choice__mark {
  border-color: var(--ember);
  box-shadow: inset 0 0 0 4px var(--ember);
}

.choice__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--on-surface);
}

.choice__lede {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ember-hot);
}

.choice__meta {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* The tub renders are near-black, so they need a light panel to read against
   the blue card. */
.choice__thumb {
  display: block;
  height: 96px;
  margin-bottom: 6px;
  background: linear-gradient(158deg, #F5F8FC 0%, #E6EDF6 100%);
  overflow: hidden;
}
.choice__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

@media (max-width: 520px) {
  .choice-set__grid { grid-template-columns: 1fr; }
}

/* Form hands over to the confirmation rather than snapping. */
.form {
  transition: opacity .26s ease, transform .26s ease;
}
.form.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
}

.confirm {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  border-top: 1px solid var(--field);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirm__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ice);
}
.confirm.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .form, .confirm { transition: none; }
  .form.is-leaving { opacity: 1; transform: none; }
  .confirm { opacity: 1; transform: none; }
}

.confirm__copy {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

/* The waitlist is the one inverted block on the page, so everything inside it
   flips to light-on-blue. The orange CTA is unchanged and still carries dark
   type, which reads on both grounds. */
.waitlist__title,
.waitlist .input,
.waitlist .select.has-value { color: var(--on-surface); }

.waitlist__lead,
.waitlist .confirm__copy { color: var(--on-surface-muted); }

/* Country code and number read as one control. */
.phone {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.phone__number { flex: 1 1 auto; min-width: 0; }

/* A native <select> renders the same text open and closed, so it can't show a
   short label collapsed and full country names in the list. The select stays
   for behaviour and accessibility; a compact overlay draws the closed state. */
.dial {
  position: relative;
  width: 94px;
  flex: none;
}

.dial__select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  /* Transparent so only the overlay shows; the list keeps its own colour. */
  color: transparent;
  font-family: var(--sans);
  font-size: 17px;
  padding: 16px 2px;
  min-height: 56px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .2s ease;
}
.dial__select:focus { border-color: var(--ember); }
.dial__select option {
  background: var(--surface);
  color: var(--on-surface);
  font-size: 15px;
}

.dial__display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
  /* Clicks fall through to the real select underneath. */
  pointer-events: none;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--on-surface);
}

/* Flag emoji have no glyph on Windows and fall back to the ISO letters, which
   still reads correctly next to the dial code. */
.dial__flag {
  font-size: 19px;
  line-height: 1;
}

.dial__code { font-variant-numeric: tabular-nums; }

.dial__caret {
  margin-left: auto;
  color: var(--on-surface-dim);
  flex: none;
}

/* Per-field validation message, distinct from the submit-level error. */
.field__error {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ember-hot);
}

/* Informational, not a validation failure. Deliberately not the ember of
   .field__error and not bold: selecting another Emirate is a valid answer that
   still submits, so it must not read as something the visitor has to fix. */
.field__note {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--on-surface-muted);
  max-width: 52ch;
}
.input.is-invalid { border-bottom-color: var(--ember-hot); }

/* Inline failure state, sits directly under the submit button. */
.form__error {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ember-hot);
}
.form__error a {
  color: var(--ember-hot);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__note a {
  color: var(--on-surface);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form__note a:hover { color: #fff; }

.form__note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--on-surface-dim);
}

.waitlist .input::placeholder,
.waitlist .select { color: var(--on-surface-dim); }

.waitlist .select option { background: var(--surface); color: var(--on-surface); }

.waitlist .confirm__title { color: #8FC0E8; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: clamp(28px, 4vw, 44px) var(--gutter) clamp(36px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__mark { height: 24px; width: auto; opacity: .8; }
.footer__wordmark { height: 11px; width: auto; opacity: .8; }
.footer__copy {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--dim);
}

.footer__legal {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
}
.footer__legal a {
  color: var(--muted);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color .2s ease;
}
.footer__legal a:hover { color: var(--ember-ink); }

.footer__links {
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
}
.footer__links a {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  transition: color .2s ease;
}
.footer__links a:hover { color: var(--ember-ink); }

/* ---------- Scroll reveal ---------- */

.is-animated [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.is-animated [data-reveal].is-in { opacity: 1; transform: none; }

.is-animated [data-grow] {
  transform: scaleX(0);
  transition: transform .9s var(--ease);
}
.is-animated [data-grow].is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .media__drift { animation: none; }
}