/* =====================================================
   HIGHLAND VAULT — Landing page styles
   ===================================================== */

:root {
  --navy: #0b1018;
  --navy-2: #101c2c;
  --black: #090c11;
  --ink: #14171c;
  --cream: #f4efe4;
  --cream-2: #ece6d8;
  --paper: #fbf8f1;
  --gold: #c9a24a;
  --gold-2: #e0c070;
  --gold-soft: rgba(201, 162, 74, 0.25);
  --green: #0d3b2d;
  --green-2: #124a39;
  --tp: #00b67a;
  /* Trustpilot grey for the unfilled part of a star box */
  --tp-empty: #dcdce6;
  --text: #1d2026;
  --muted: #464c58;
  --line: rgba(20, 23, 28, 0.12);
  --line-light: rgba(255, 255, 255, 0.14);

  /* Type: Playfair Display for headings, Inter for text (sturdier at small sizes). Cinzel is reserved for the logo. */
  --font-serif: "Playfair Display", "Georgia", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Cinzel", "Trajan Pro", "Georgia", serif;

  --gold-faint: rgba(201, 162, 74, 0.18);
  --gold-line: rgba(201, 162, 74, 0.5);

  /* Gold fails as text on cream (2.09:1); bronze is the accent for light sections */
  --bronze: #7a5c1c;
  --bronze-line: rgba(122, 92, 28, 0.35);
  /* status text on cream and paper (the verified badge) */
  --success-on-light: #1f6b47;
  --focus-ring-light: 0 0 0 2px var(--cream), 0 0 0 4px var(--ink);
  --gold-hover: #ecd08a;
  --gold-active: #cfae5c;
  --scrim: rgba(9, 12, 17, 0.88);

  /* Text and controls on dark surfaces (all measured against --navy) */
  --paper-muted: rgba(244, 239, 228, 0.88);
  --paper-faint: rgba(244, 239, 228, 0.76);
  --paper-line: rgba(244, 239, 228, 0.16);
  --field-bg-dark: #121a26;
  --field-border-dark: #5b6676;
  --field-border-dark-hover: #8a94a6;
  --placeholder-dark: #a7abb2;
  --danger-on-dark: #ff9b8f;
  --success-on-dark: #8fd6b4;
  --focus-ring-dark: 0 0 0 2px var(--navy), 0 0 0 4px var(--gold-2);

  /* Motion scale (tokens/motion.json) */
  --motion-fast: 100ms;
  --motion-base: 200ms;
  --motion-moderate: 300ms;
  --motion-slow: 500ms;
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);

  /* Header: fixed, so these heights are reserved at the top of the hero */
  --logo-h: 48px;
  --logo-h-compact: 36px;
  --header-h: 80px;
  --header-h-compact: 56px;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.8s;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 450;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

.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;
}

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

.section { padding-block: clamp(56px, 8vw, 104px); }

/* ---------- Typography ---------- */
.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-2);
  margin-bottom: 14px;
}
.eyebrow-gold { color: var(--gold); }

.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-title.light { color: #fff; }

.section-lead {
  margin-top: 12px;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  color: var(--muted);
  max-width: 56ch;
}
.section-lead.light { color: rgba(255, 255, 255, 0.78); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold);
  white-space: nowrap;
  transition: color 0.3s var(--ease-smooth);
}
.link-arrow span { transition: transform 0.35s var(--ease-out); }
.link-arrow:hover { color: var(--gold); }
.link-arrow:hover span { transform: translateX(5px); }
.link-arrow.light { color: #fff; border-color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background-color 0.3s;
  will-change: transform;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--ink);
  box-shadow: 0 8px 24px -10px rgba(201, 162, 74, 0.7);
}
.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(201, 162, 74, 0.85); }
.btn-gold:hover::before { transform: translateX(120%); }
.btn-gold:active { transform: translateY(0) scale(0.98); }
.btn-arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }


/* ---------- Forms ---------- */
.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
}
.waitlist-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: box-shadow 0.3s var(--ease-smooth), border-color 0.3s;
}
.waitlist-form input::placeholder { color: #8a8f99; }
.waitlist-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.waitlist-form input.is-invalid { border-color: #d9534f; box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.2); animation: shake 0.4s var(--ease-smooth); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin-top: 18px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
}
.trust-row li { display: inline-flex; align-items: center; gap: 6px; padding-right: 14px; }
.trust-row li + li { border-left: 1px solid var(--line-light); padding-left: 14px; }
.tp-star { color: var(--tp); font-size: 1rem; line-height: 1; }

/* ---------- Header ----------
   The logo, centred, nothing else (approved option A, "Signature").
   Emblem: client artwork keyed off black (assets/logo/). Name and
   tagline: live Cinzel 600, the web match for the logo's capitals.
   Fixed, so slimming on scroll never shifts the page under it.     */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: var(--black);
  box-shadow: inset 0 -1px 0 var(--gold-faint);
  transition: background-color var(--motion-moderate) var(--ease-move),
              box-shadow var(--motion-moderate) var(--ease-move);
}
.site-header.is-scrolled {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 -1px 0 var(--gold-faint), 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: var(--header-h);
  transition: block-size var(--motion-moderate) var(--ease-move);
}
.site-header.is-scrolled .header-inner { block-size: var(--header-h-compact); }

.brand {
  display: inline-flex;
  border-radius: var(--radius-sm);
  color: var(--paper);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.brand:focus-visible { box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--gold-2); }
.intro-wait .site-header .brand { visibility: hidden; }

/* Logo sizes are px on purpose: it is a brand mark and scales as a unit,
   it does not reflow with the reader's text size. */
.logo-lockup {
  --tag-size: 9px;
  --tag-track: 0.16em;
  --word-size: 16px;
  --word-size-compact: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.logo-emblem {
  position: relative;
  display: block;
  flex: none;
  block-size: var(--logo-h);
  aspect-ratio: 179 / 240;
  transition: block-size var(--motion-moderate) var(--ease-move);
}
.site-header.is-scrolled .logo-emblem { block-size: var(--logo-h-compact); }
.logo-emblem img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
}
/* A brightened copy of the art, masked to a band, is the glint. At rest the band sits off the art. */
.logo-shine {
  filter: brightness(1.8) saturate(1.1);
  -webkit-mask: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  mask: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  pointer-events: none;
}

.logo-divider {
  inline-size: 1px;
  align-self: stretch;
  margin-block: 4px;
  background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}

.logo-type {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.logo-wordmark {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: var(--word-size);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  transition: font-size var(--motion-moderate) var(--ease-move);
}
.site-header.is-scrolled .logo-wordmark { font-size: var(--word-size-compact); }
.logo-wordmark .ch { display: inline-block; }

/* "— LUXURY COMPETITIONS —": rules fill the width the name gives them */
.logo-tagline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: var(--tag-size);
  line-height: 1.2;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--gold-2);
  white-space: nowrap;
}
.logo-tagline-text { margin-inline-end: calc(-1 * var(--tag-track)); }
.logo-tagline::before,
.logo-tagline::after {
  content: "";
  flex: 1 1 0;
  min-inline-size: 8px;
  block-size: 1px;
}
.logo-tagline::before {
  background: linear-gradient(90deg, transparent, var(--gold-2));
  transform-origin: right center;
}
.logo-tagline::after {
  background: linear-gradient(270deg, transparent, var(--gold-2));
  transform-origin: left center;
}

/* Intro: starts once the typeface and emblem are ready (js/main.js adds .intro-play) */
.intro-play .site-header .logo-emblem { animation: logoIris var(--motion-slow) var(--ease-enter) backwards; }
.intro-play .site-header .logo-divider { animation: logoDivider var(--motion-moderate) var(--ease-enter) 200ms backwards; }
.intro-play .site-header .logo-wordmark .ch {
  animation: logoLetter var(--motion-slow) var(--ease-out) backwards;
  animation-delay: calc(250ms + var(--i, 0) * 24ms);
}
.intro-play .site-header .logo-tagline-text { animation: logoFade var(--motion-moderate) var(--ease-enter) 550ms backwards; }
.intro-play .site-header .logo-tagline::before,
.intro-play .site-header .logo-tagline::after { animation: logoRule var(--motion-slow) var(--ease-out) 650ms backwards; }
.intro-play .site-header .logo-shine { animation: logoGlint var(--motion-slow) var(--ease-move) 950ms backwards; }

/* After the intro the glint belongs to hover and keyboard focus */
.site-header.intro-done .logo-shine { animation: none; }
.site-header.intro-done .brand:hover .logo-shine,
.site-header.intro-done .brand:focus-visible .logo-shine {
  animation: logoGlint var(--motion-slow) var(--ease-move);
}

@keyframes logoIris {
  from { clip-path: circle(0% at 50% 56%); }
  to { clip-path: circle(80% at 50% 56%); }
}
@keyframes logoDivider { from { transform: scaleY(0); } }
@keyframes logoLetter { from { opacity: 0; transform: translateY(0.45em); filter: blur(4px); } }
@keyframes logoFade { from { opacity: 0; } }
@keyframes logoRule { from { transform: scaleX(0); } }
@keyframes logoGlint {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@media (min-width: 360px) {
  :root {
    --logo-h: 52px;
    --logo-h-compact: 38px;
    --header-h: 84px;
    --header-h-compact: 60px;
  }
  .logo-lockup { --tag-size: 10px; --tag-track: 0.22em; gap: 12px; }
}

@media (min-width: 640px) {
  :root {
    --logo-h: 68px;
    --logo-h-compact: 46px;
    --header-h: 100px;
    --header-h-compact: 68px;
  }
  .logo-lockup {
    --tag-track: 0.26em;
    --word-size: clamp(18px, 10px + 1.2vw, 24px);
    --word-size-compact: clamp(16px, 10px + 0.6vw, 19px);
    gap: 16px;
    padding: 4px 8px;
  }
}

/* ---------- Hero ----------
   Approved round-3 option C, "Card Deck". A big headline and a large
   email field on the left; on the right the watch photos are a small
   deck of cards that deals itself every 4.5 seconds (pausable, holds on
   hover and keyboard focus, never starts on its own under reduced
   motion: see js/main.js). A blurred wrist photo sits behind everything
   under a dark overlay. The fixed header sits over the top of the hero,
   so its height is reserved in the top padding.                        */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-block-size: min(100svh, 960px);
  padding-block: calc(var(--header-h) + 32px) 56px;
  color: var(--paper);
  background-color: var(--navy);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  filter: blur(8px) saturate(1.1);
  transform: scale(1.08);
}
/* the overlay: darkest behind the copy, lighter toward the photos, and
   fading to navy at the foot so the tapes below join cleanly */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 70%, var(--navy-2) 100%),
    linear-gradient(90deg, rgba(9, 12, 17, 0.94) 0%, rgba(9, 12, 17, 0.84) 50%, rgba(9, 12, 17, 0.62) 100%);
}

.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-block-end: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.hero-live {
  position: relative;
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: 0.35em;
  border-radius: 50%;
  background: currentColor;
}
/* three pulses, then still: no endless motion */
.hero-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: heroPulse 1.6s var(--ease-enter) 1.2s 3;
}
@keyframes heroPulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(2.6); opacity: 0; }
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  /* capped on the narrowest phones so "Win a Rolex" keeps to one line:
     it is about 5.3 em wide in Playfair Display at phone sizes */
  font-size: min(clamp(3.25rem, 1.4rem + 7vw, 6.75rem), calc((100vw - 2 * var(--gutter)) / 5.45));
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.hero-title em {
  font-style: italic;
  color: var(--gold-2);
  padding-inline-end: 0.06em;
}
/* each line rises from behind its own clip */
.hero-line {
  display: block;
  overflow: hidden;
  /* room for Playfair's descenders inside the clip */
  padding-block-end: 0.2em;
  margin-block-end: -0.2em;
}
.hero-line > span { display: block; }

.hero-lead {
  margin-block-start: 22px;
  max-inline-size: 40ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--paper-muted);
}
.hero .signup { margin-block-start: 30px; }
.hero-disclaimer {
  margin-block-start: 14px;
  font-size: 0.875rem;
  color: var(--paper-faint);
}

/* the larger email field used in the hero */
.signup.is-large { max-inline-size: 540px; }
.signup.is-large .signup-input,
.signup.is-large .signup-btn { block-size: 60px; font-size: 1.0625rem; }
.signup.is-large .signup-input { padding-inline: 20px; }
.signup.is-large .signup-btn { padding-inline: 26px; }

/* ---------- Slideshow parts (driven by js/main.js) ---------- */
.slides { position: relative; }
.slides-viewport { position: relative; overflow: hidden; }
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-move);
}
.slide.is-active { opacity: 1; }
.slide img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
/* the client's own photo is small, so it is shown at its own size on a
   matching navy, never stretched, with the fade landing on the photo */
.slide.is-small { background: radial-gradient(70% 60% at 50% 50%, #1b3563 0%, #0c1626 70%); }
.slide.is-small img {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 92%;
  max-block-size: 92%;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

.slides-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.slides-dots { display: flex; gap: 2px; }
.slides-dot {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.slides-dot::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: var(--paper-faint);
  transition: inline-size var(--motion-moderate) var(--ease-out), background-color var(--motion-base) var(--ease-enter);
}
.slides-dot:hover::before { background: var(--paper); }
.slides-dot:active::before { transform: scale(0.85); }
.slides-dot:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.slides-dot[aria-current="true"]::before { inline-size: 22px; background: var(--gold-2); }

.slides-toggle {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--field-border-dark);
  background: var(--black);
  color: var(--paper);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.slides-toggle svg {
  inline-size: 15px;
  block-size: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slides-toggle:hover { background: var(--field-bg-dark); border-color: var(--gold-2); }
.slides-toggle:active { transform: scale(0.94); }
.slides-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.slides-toggle:disabled { opacity: 0.5; pointer-events: none; }

.slides-count {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: var(--paper-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- The deck ----------
   The current photo sits on top and the next waits behind it, turned
   slightly; when it advances the top card slides away to the left. */
.hero-deck { justify-self: center; inline-size: min(100%, 460px); }
.hero-deck .slides-viewport { aspect-ratio: 4 / 5; overflow: visible; }
.hero-deck .slide {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 228, 0.18);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transform: translate(0, 0) rotate(0deg);
  transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.hero-deck .slide.is-small img { inline-size: 72%; block-size: auto; max-inline-size: 360px; max-block-size: none; }



.hero-deck .slide.is-active { z-index: 3; }
.hero-deck .slide.is-next { z-index: 2; opacity: 0.85; transform: translate(26px, 14px) rotate(5deg) scale(0.95); }
.hero-deck .slide.is-leaving { z-index: 4; opacity: 0; transform: translate(-60%, 6%) rotate(-10deg); }
.hero-deck .slides-controls { margin-block-start: 28px; justify-content: center; }

/* Entrance: overlaps the header intro (html.intro-play), so nothing waits on the logo */
.hero-eyebrow { --d: 200ms; }
.hero-line:nth-child(1) > span { --d: 260ms; }
.hero-line:nth-child(2) > span { --d: 340ms; }
.hero-lead { --d: 480ms; }
.hero .signup { --d: 560ms; }
.hero .trust-list { --d: 620ms; }
.hero-disclaimer { --d: 660ms; }
.hero-deck { --d: 380ms; }
.intro-play .hero-in {
  animation: heroIn var(--motion-slow) var(--ease-out) backwards;
  animation-delay: var(--d, 300ms);
}
.intro-play .hero-line > span {
  animation: heroRise var(--motion-slow) var(--ease-out) backwards;
  animation-delay: var(--d, 260ms);
}
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes heroRise { from { transform: translateY(105%); } }

@media (min-width: 640px) {
  .hero-eyebrow { letter-spacing: 0.2em; }
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
  }
}



/* ---------- Signup form ----------
   The waitlist form, all eight states: default, hover, focus, active,
   disabled, loading (spinner, button stays at full strength), error
   (border plus a message that says how to fix it) and success.
   Themed for dark surfaces; a light section overrides --signup-*.  */
.signup {
  --signup-field-bg: var(--field-bg-dark);
  --signup-field-border: var(--field-border-dark);
  --signup-field-border-hover: var(--field-border-dark-hover);
  --signup-field-text: var(--paper);
  --signup-placeholder: var(--placeholder-dark);
  --signup-btn-bg: var(--gold-2);
  --signup-btn-bg-hover: var(--gold-hover);
  --signup-btn-bg-active: var(--gold-active);
  --signup-btn-text: var(--ink);
  --signup-ring: var(--focus-ring-dark);
  --signup-accent: var(--gold-2);
  --signup-danger: var(--danger-on-dark);
  --signup-ok: var(--success-on-dark);
  --signup-text: var(--paper);
  --signup-faint: var(--paper-faint);
  --signup-line: var(--paper-line);
  inline-size: 100%;
  max-inline-size: 480px;
}
.signup-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup-input {
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 52px;
  padding-inline: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--signup-field-border);
  background: var(--signup-field-bg);
  color: var(--signup-field-text);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color var(--motion-base) var(--ease-enter), box-shadow var(--motion-base) var(--ease-enter);
}
.signup-input::placeholder { color: var(--signup-placeholder); opacity: 1; }
.signup-input:hover { border-color: var(--signup-field-border-hover); }
.signup-input:focus-visible { border-color: var(--signup-accent); box-shadow: var(--signup-ring); }
.signup-input[aria-invalid="true"] { border-color: var(--signup-danger); }
.signup-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--signup-danger); }
.signup-input:disabled { opacity: 0.5; pointer-events: none; }

.signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  block-size: 52px;
  padding-inline: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--signup-btn-bg);
  color: var(--signup-btn-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.signup-btn svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-base) var(--ease-enter);
}
.signup-btn:hover { background: var(--signup-btn-bg-hover); }
.signup-btn:hover .signup-arrow { transform: translateX(3px); }
.signup-btn:focus-visible { outline: none; box-shadow: var(--signup-ring); }
.signup-btn:active { background: var(--signup-btn-bg-active); transform: scale(0.98); }
.signup-btn:disabled { opacity: 0.5; pointer-events: none; }

.signup-spinner {
  display: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  animation: signupSpin 800ms linear infinite;
}
.signup-btn[aria-busy="true"] { cursor: progress; }
.signup-btn[aria-busy="true"] .signup-spinner { display: block; }
.signup-btn[aria-busy="true"] .signup-arrow { display: none; }
@keyframes signupSpin { to { transform: rotate(360deg); } }

.signup-hint,
.signup-error,
.signup-success {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-block-start: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.signup-hint { color: var(--signup-faint); }
.signup-error { color: var(--signup-danger); }
.signup-success {
  margin-block-start: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--signup-line);
  color: var(--signup-text);
  font-size: 0.9375rem;
}
.signup-success:focus { outline: none; }
.signup-success strong { color: var(--signup-ok); font-weight: 600; }
.signup-error svg,
.signup-success svg {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.signup-success svg { color: var(--signup-ok); }
.signup [hidden] { display: none; }

@media (min-width: 520px) {
  .signup-row { flex-direction: row; }
  .signup-input { flex: 1 1 auto; }
  .signup-btn { flex: none; }
}

/* ---------- Trust list ---------- */
.trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-block-start: 22px;
  font-size: 0.875rem;
  color: var(--paper-muted);
}
.trust-list li { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; }
.trust-list li + li::before {
  content: "";
  inline-size: 1px;
  block-size: 14px;
  margin-inline-end: 10px;
  background: var(--paper-line);
}
.trust-list .star { flex: none; inline-size: 16px; block-size: 16px; fill: var(--tp); }
.trust-list strong { color: var(--paper); font-weight: 600; }

/* ---------- Winners (approved round-2 option A, "Glide Reel") ----------
   The winners pass along a reel the full width of the screen, moving all
   the time at an easy pace and fading out at both edges ([data-reel] in
   js/main.js). Hovering holds it; the Pause button stops it. The numbers
   sit beside the heading so the reel can run uninterrupted. Accent text
   on cream is bronze (5.4:1).                                           */
.winners {
  padding-block: clamp(64px, 9vw, 112px);
  background: var(--cream);
  color: var(--ink);
  border-block-start: 1px solid var(--line);
}
.winners-top { display: grid; gap: 32px; align-items: end; }
.winners-head { max-inline-size: 42rem; }
.winners-eyebrow {
  margin-block-end: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}
.winners-title {
  font-family: var(--font-serif);
  font-weight: 600;
  /* capped so "Extraordinary", the longest word on the page, always fits its
     column: it is up to 7 em wide in the widest typeface we considered */
  font-size: min(clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), calc((100vw - 2 * var(--gutter)) / 7.1));
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.winners-title em { font-style: italic; color: var(--bronze); }
.winners-lead {
  margin-block-start: 14px;
  max-inline-size: 44ch;
  font-size: 1.0625rem;
  color: var(--muted);
}

/* Counts (they run up via .counter in js/main.js) */
.winners-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.winners-stat { display: grid; gap: 4px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.winners-stat:nth-child(2) { --d: 90ms; }
.winners-stat:nth-child(3) { --d: 180ms; }
.winners-num {
  font-family: var(--font-serif);
  font-weight: 600;
  /* three counts share one row, so they scale with the space they get */
  font-size: clamp(1.375rem, 0.6rem + 4.4vw, 2.75rem);
  line-height: 1;
  color: var(--ink);
  /* lining, even-width figures keep the counts level whatever the serif */
  font-variant-numeric: lining-nums tabular-nums;
}
.winners-label { font-size: 0.875rem; color: var(--muted); }

/* The reel */
.reel { position: relative; margin-block-start: 44px; }
.reel-viewport {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  padding-block: 10px 30px;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 7%, var(--ink) 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 7%, var(--ink) 93%, transparent);
}
.reel-track { display: flex; gap: 18px; }
.reel-card {
  flex: none;
  display: grid;
  gap: 12px;
  inline-size: clamp(176px, 46vw, 220px);
  padding: 10px 10px 16px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 24px 40px -30px rgba(9, 12, 17, 0.6), 0 1px 2px rgba(9, 12, 17, 0.08);
  transition: transform var(--motion-moderate) var(--ease-out), box-shadow var(--motion-moderate) var(--ease-out);
}
.reel-card:hover { transform: translateY(-8px); box-shadow: 0 34px 50px -30px rgba(9, 12, 17, 0.7), 0 1px 2px rgba(9, 12, 17, 0.08); }
.reel-photo { position: relative; overflow: hidden; aspect-ratio: 177 / 216; border-radius: 10px; background: var(--cream-2); }
.reel-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.reel-cap { display: grid; gap: 6px; justify-items: start; padding-inline: 4px; min-inline-size: 0; }

/* Verified winner, with a real icon */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-inline-size: 100%;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--success-on-light);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}
.verified svg {
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-block-start: 4px; }
.reel-hint { font-size: 0.875rem; color: var(--muted); }
/* no hover on touch screens, so no hint about it */
@media (hover: none) { .reel-hint { display: none; } }
.reel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 16px 18px;
  border-radius: 999px;
  border: 1px solid var(--muted);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-enter), color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.reel-toggle svg { flex: none; inline-size: 14px; block-size: 14px; fill: currentColor; }
.reel-toggle:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.reel-toggle:active { transform: scale(0.96); }
.reel-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.reel-toggle:disabled { opacity: 0.5; pointer-events: none; }

/* Arrives once on view; hidden beforehand only while the script runs */
:is(.intro-wait, .intro-play) .winners [data-reveal]:not(.is-in) .winners-rise { opacity: 0; }
.winners [data-reveal].is-in .winners-rise { animation: winnersRise var(--motion-slow) var(--ease-out) backwards; animation-delay: var(--d, 0ms); }
@keyframes winnersRise { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  :is(.intro-wait, .intro-play) .winners [data-reveal]:not(.is-in) .winners-rise { opacity: 1; }
}

@media (min-width: 900px) {
  .winners-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 56px; }
  .winners-num { font-size: clamp(2rem, 0.4rem + 2.8vw, 2.75rem); }
}

/* ---------- Reviews (approved option D, "Review Deck") ----------
   Real Trustpilot reviews dealt off a stack like the hero photos, the
   next one peeking from behind, every five seconds ([data-slides] in
   js/main.js: pause button, count, dots; it plays only while on screen).
   Beside it the heading and the Trustpilot score, linking to the real
   page. The stars are drawn boxes, each group one image named by its
   rating.                                                             */
.reviews {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
  background-color: var(--navy);
  background-image: radial-gradient(60% 70% at 85% 30%, var(--navy-2) 0%, var(--navy) 70%);
  color: var(--paper);
  /* the card peeking from behind must not widen the page */
  overflow-x: clip;
  font-variant-numeric: lining-nums;
}
.reviews-grid { display: grid; gap: 52px; align-items: center; }
.reviews-head { max-inline-size: 42rem; }
.reviews-eyebrow {
  margin-block-end: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.reviews-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--paper);
}
.reviews-title em { font-style: italic; color: var(--gold-2); }
.reviews-lead { margin-block-start: 14px; max-inline-size: 44ch; font-size: 1.0625rem; color: var(--paper-muted); }

.reviews-score {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-block-start: 32px;
  padding-block-start: 26px;
  border-block-start: 1px solid var(--paper-line);
}
.reviews-score-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.reviews-score .tp-stars { --box: 26px; }
.reviews-meta { font-size: 0.9375rem; color: var(--paper-muted); }
.reviews-meta strong { color: var(--paper); }

/* The Trustpilot mark: the green star and the name */
.tp-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.tp-mark svg { flex: none; inline-size: 24px; block-size: 24px; fill: var(--tp); }

/* Stars: Trustpilot's green boxes */
.tp-stars { display: inline-flex; gap: 3px; }
.tp-stars > span {
  display: grid;
  place-items: center;
  inline-size: var(--box, 22px);
  block-size: var(--box, 22px);
  background: var(--tp);
}
.tp-stars svg { inline-size: 74%; block-size: 74%; fill: var(--paper); }
.tp-stars > .is-half { background: linear-gradient(90deg, var(--tp) 50%, var(--tp-empty) 50%); }
.tp-stars > span:nth-child(2) { --i: 1; }
.tp-stars > span:nth-child(3) { --i: 2; }
.tp-stars > span:nth-child(4) { --i: 3; }
.tp-stars > span:nth-child(5) { --i: 4; }
/* the score's boxes pop in one after another as the section arrives */
[data-reveal].is-in .tp-stars.is-pop > span {
  animation: tpPop var(--motion-moderate) var(--ease-out) backwards;
  animation-delay: calc(200ms + var(--i, 0) * 80ms);
}
@keyframes tpPop { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } }

/* Out to the full Trustpilot page */
.reviews-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding-inline: 20px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-2);
  background: transparent;
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color var(--motion-base) var(--ease-enter), color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.reviews-link svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reviews-link:hover { background: var(--gold-2); color: var(--ink); }
.reviews-link:active { transform: scale(0.98); }
.reviews-link:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }

/* The deck (the motion is the hero's: is-next peeks, is-leaving flies off) */
.review-deck { justify-self: center; inline-size: min(100%, 420px); }
.review-deck .slides-viewport { block-size: 340px; overflow: visible; }
.review-deck .slide {
  transform: translate(0, 0) rotate(0deg);
  transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}
.review-deck .slide.is-active { z-index: 3; }
.review-deck .slide.is-next { z-index: 2; opacity: 0.85; transform: translate(22px, 16px) rotate(4deg) scale(0.95); }
.review-deck .slide.is-leaving { z-index: 4; opacity: 0; transform: translate(-60%, 6%) rotate(-10deg); }
.review-deck .slides-controls { margin-block-start: 34px; justify-content: center; }

.review-card {
  display: grid;
  /* stars, words, reviewer: the reviewer sits on the card foot */
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 28px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.review-card .tp-stars { --box: 20px; }
.review-card blockquote { display: grid; align-content: start; gap: 6px; margin: 0; }
.review-say-head { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.review-say { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.22; color: var(--ink); }
.review-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-inline-size: 0;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
}
.review-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.review-who strong { display: block; font-size: 0.9375rem; line-height: 1.25; }
.review-who small { display: block; font-size: 0.875rem; color: var(--muted); }

/* Arrives once on view; hidden beforehand only while the script runs */
:is(.intro-wait, .intro-play) .reviews [data-reveal]:not(.is-in) .reviews-rise { opacity: 0; }
.reviews [data-reveal].is-in .reviews-rise { animation: reviewsRise var(--motion-slow) var(--ease-out) 120ms backwards; }
@keyframes reviewsRise { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  :is(.intro-wait, .intro-play) .reviews [data-reveal]:not(.is-in) .reviews-rise { opacity: 1; }
}

@media (min-width: 1024px) {
  .reviews-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
}

/* ---------- Three ways to win (approved option D, "Rotating Headline") ----------
   Premium whisky, tech and cash competitions on highlandvault.com. The
   headline changes every four seconds ("Premium whisky." / "The latest
   tech." / "Cash prizes."), the photo crossfades in step and the matching
   category lights up. It runs on the card-deck engine ([data-slides] in
   js/main.js), which sets data-index for the words and the list; the
   full sentence is always there for screen readers.                    */
.ways {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
  background: var(--cream);
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.ways-grid { display: grid; gap: 44px; align-items: center; }
.ways-eyebrow {
  margin-block-end: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}
.ways-title { display: grid; gap: 10px; }
.ways-kicker { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.1; color: var(--ink); }
.ways-words { display: grid; }
.ways-word {
  grid-area: 1 / 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.75rem, 1.5rem + 4.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bronze);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-enter);
}
.ways-grid:not([data-index]) .ways-word:first-child,
.ways-grid[data-index="0"] .ways-word:nth-child(1),
.ways-grid[data-index="1"] .ways-word:nth-child(2),
.ways-grid[data-index="2"] .ways-word:nth-child(3) { opacity: 1; animation: waysWordIn var(--motion-slow) var(--ease-out); }
@keyframes waysWordIn { from { opacity: 0; transform: translateY(35%); clip-path: inset(0 0 100% 0); } }
.ways-lead { margin-block-start: 18px; max-inline-size: 46ch; font-size: 1.0625rem; color: var(--muted); }

/* The three categories, each a link to its page */
.ways-cats { display: grid; gap: 10px; margin-block-start: 26px; }
.ways-cat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-block-size: 64px;
  padding: 8px 16px 8px 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  transition: background-color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter), box-shadow var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.ways-ic {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  border: 1px solid var(--bronze-line);
  background: var(--paper);
  color: var(--bronze);
  transition: background-color var(--motion-base) var(--ease-enter), color var(--motion-base) var(--ease-enter);
}
.ways-ic svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ways-cat-txt { flex: 1; min-inline-size: 0; }
.ways-cat-txt strong { display: block; font-size: 1rem; }
.ways-cat-txt small { display: block; font-size: 0.875rem; color: var(--muted); }
.ways-cat > svg { flex: none; inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ways-cat:hover { background: var(--paper); border-color: var(--ink); }
.ways-cat:active { transform: scale(0.99); }
.ways-cat:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.ways-grid[data-index="0"] .ways-cats li:nth-child(1) .ways-cat,
.ways-grid[data-index="1"] .ways-cats li:nth-child(2) .ways-cat,
.ways-grid[data-index="2"] .ways-cats li:nth-child(3) .ways-cat { background: var(--paper); border-color: var(--bronze-line); box-shadow: 0 20px 34px -28px rgba(9, 12, 17, 0.6); }
.ways-grid[data-index="0"] .ways-cats li:nth-child(1) .ways-ic,
.ways-grid[data-index="1"] .ways-cats li:nth-child(2) .ways-ic,
.ways-grid[data-index="2"] .ways-cats li:nth-child(3) .ways-ic { background: var(--gold-2); border-color: transparent; color: var(--ink); }

/* Pause, dots and the count, on cream (the deck controls are drawn for dark) */
.ways-foot { gap: 12px 16px; margin-block-start: 22px; }
.ways .slides-toggle { inline-size: 44px; block-size: 44px; border-color: var(--muted); background: var(--paper); color: var(--ink); }
.ways .slides-toggle:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ways .slides-toggle:focus-visible { box-shadow: var(--focus-ring-light); }
.ways .slides-dot::before { background: var(--muted); }
.ways .slides-dot:hover::before { background: var(--ink); }
.ways .slides-dot:focus-visible { box-shadow: var(--focus-ring-light); }
.ways .slides-dot[aria-current="true"]::before { background: var(--bronze); }
.ways-stat { display: inline-flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.ways-stat strong { font-family: var(--font-serif); font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--ink); }
.ways-stat > span { max-inline-size: 12ch; font-size: 0.875rem; line-height: 1.3; color: var(--muted); }

/* The photo stage */
.ways-stage { aspect-ratio: 5 / 4; border-radius: 26px; background: var(--black); box-shadow: 0 50px 80px -50px rgba(9, 12, 17, 0.85); }
.ways-pic { overflow: hidden; }
.ways-pic img { display: block; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; }
.ways-pic.is-contain img { object-fit: contain; }
.ways-pic.is-active img { animation: waysZoom var(--motion-slow) var(--ease-out); }
@keyframes waysZoom { from { transform: scale(1.06); } }
.ways-pic figcaption {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Arrives once on view; hidden beforehand only while the script runs */
:is(.intro-wait, .intro-play) .ways [data-reveal]:not(.is-in) .ways-rise { opacity: 0; }
.ways [data-reveal].is-in .ways-rise { animation: waysRise var(--motion-slow) var(--ease-out) 120ms backwards; }
@keyframes waysRise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  :is(.intro-wait, .intro-play) .ways [data-reveal]:not(.is-in) .ways-rise { opacity: 1; }
}

@media (min-width: 1024px) {
  .ways-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
  .ways-stage { aspect-ratio: 1 / 1; }
}

/* ---------- Winner stories (approved option D, "Coverflow") ----------
   Winners' testimonial videos. The current story faces you, ready to
   play; on wider screens its neighbours turn away on either side. It
   never turns by itself, so a story is never cut off: the arrows, the
   dots, a swipe or a click on a side card bring the next one round, and
   a clip that turns away stops ([data-stories] in js/main.js). Nothing
   plays until asked, and only one clip plays at a time. The section
   stays hidden until a card has a clip.                                */
.stories {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
  background-color: var(--black);
  background-image: radial-gradient(70% 60% at 50% 0%, var(--navy-2) 0%, var(--black) 70%);
  color: var(--paper);
  overflow-x: clip;
}
.stories[hidden] { display: none; }
.stories-head { display: grid; justify-items: center; max-inline-size: 42rem; margin-inline: auto; text-align: center; }
.stories-eyebrow {
  margin-block-end: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.stories-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--paper);
}
.stories-title em { font-style: italic; color: var(--gold-2); }
.stories-lead { margin-block-start: 16px; max-inline-size: 44ch; font-size: 1.0625rem; color: var(--paper-muted); }

/* The stage: the cards sit on top of each other and are moved into place */
.stories-show { margin-block-start: 30px; }
.stories-stage {
  position: relative;
  display: grid;
  place-items: center;
  block-size: clamp(470px, 120vw, 540px);
  perspective: 1200px;
}
.story {
  --x: clamp(150px, 30vw, 270px);
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: clamp(230px, 64vw, 270px);
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: 20px;
  border: 1px solid var(--paper-line);
  background: var(--black);
  box-shadow: 0 40px 70px -46px rgba(0, 0, 0, 1);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--motion-slow) var(--ease-move), opacity var(--motion-moderate) var(--ease-move), visibility 0s linear var(--motion-moderate), filter var(--motion-slow) var(--ease-move);
}
/* phones: one story at a time; the turned neighbours appear from 600px */
.story[data-pos="0"] { z-index: 3; opacity: 1; visibility: visible; border-color: var(--gold-2); transition-delay: 0s; }
.story[data-pos="1"] { z-index: 2; transform: translateX(var(--x)) translateZ(-180px) rotateY(-32deg); filter: brightness(0.6); cursor: pointer; }
.story[data-pos="-1"] { z-index: 2; transform: translateX(calc(var(--x) * -1)) translateZ(-180px) rotateY(32deg); filter: brightness(0.6); cursor: pointer; }
.story[data-pos="2"] { z-index: 1; transform: translateX(calc(var(--x) * 1.7)) translateZ(-340px) rotateY(-40deg); }
.story[data-pos="-2"] { z-index: 1; transform: translateX(calc(var(--x) * -1.7)) translateZ(-340px) rotateY(40deg); }

/* the poster's own photo, blurred, fills whatever the clip does not */
.story-bg {
  position: absolute;
  inset: -12%;
  z-index: -1;
  inline-size: 124%;
  max-inline-size: none;
  block-size: 124%;
  object-fit: cover;
  filter: blur(22px) brightness(0.5) saturate(1.1);
}
.story-video { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; background: transparent; }
.story.is-started .story-video { background: var(--black); }
/* a turned card only comes round when clicked; its clip does not start */
.story:not([data-pos="0"]) .story-video { pointer-events: none; }

/* the whole card is the play button until the clip starts */
.story-play {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(9, 12, 17, 0.92) 100%);
  color: var(--paper);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.story.is-started .story-play { display: none; }
.story-btn {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--gold-2);
  color: var(--ink);
  box-shadow: 0 0 0 8px rgba(224, 192, 112, 0.18);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-enter), opacity var(--motion-base) var(--ease-enter);
}
.story-btn svg { inline-size: 22px; block-size: 22px; fill: currentColor; transform: translateX(2px); }
.story:not([data-pos="0"]) .story-btn { opacity: 0; }
.story-play:hover .story-btn { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(224, 192, 112, 0.22); background: var(--gold-hover); }
.story-play:active .story-btn { transform: scale(0.96); background: var(--gold-active); }
.story-play:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold-2); border-radius: inherit; }
.story-cap { display: grid; gap: 4px; justify-self: stretch; padding: 16px 18px 18px; background: var(--black); }
.story-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.375rem; line-height: 1.1; color: var(--paper); }
.story-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--paper-muted); }
.story-sub svg { inline-size: 14px; block-size: 14px; fill: none; stroke: var(--success-on-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* arrows beside the dots, never over a card */
.stories-foot { display: flex; justify-content: center; align-items: center; gap: 14px; margin-block-start: 14px; }
.stories-foot[hidden] { display: none; }
.stories-btn {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--field-border-dark);
  background: var(--black);
  color: var(--paper);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.stories-btn svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stories-btn:hover { background: var(--field-bg-dark); border-color: var(--gold-2); }
.stories-btn:active { transform: scale(0.94); }
.stories-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.stories-btn:disabled { opacity: 0.5; pointer-events: none; }

@media (min-width: 600px) {
  .story[data-pos="1"], .story[data-pos="-1"] { opacity: 1; visibility: visible; transition-delay: 0s; }
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  color: #fff;
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--gold);
}
.cta-bg { position: absolute; inset: 0; z-index: -1; }
.cta-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%;
  transform: scale(1.1);
  will-change: transform;
}
.cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9, 12, 17, 1) 0%, rgba(9, 12, 17, 0.96) 40%, rgba(9, 12, 17, 0.55) 62%, rgba(9, 12, 17, 0.05) 100%);
}
.cta-inner { max-width: 620px; }
.cta .waitlist-form { margin-top: 28px; }
.cta .section-lead { max-width: 50ch; }

/* ---------- Footer (approved option C, "Trust Strip") ----------
   Three reasons to trust the brand across the top (the Trustpilot score,
   free postal entry on every draw, over 18s only), then the logo, email,
   socials and three link columns, then the bottom line with Back to top.
   Every link goes somewhere real. The sticky "Join the waitlist" bar
   steps aside while the footer is on screen (js/main.js).              */
.site-footer {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px) 28px;
  background-color: var(--black);
  background-image: radial-gradient(60% 50% at 50% 0%, var(--navy-2) 0%, var(--black) 70%);
  color: var(--paper-muted);
  border-block-start: 1px solid var(--gold-line);
  font-size: 0.9375rem;
  overflow-x: clip;
}

/* The trust strip */
.footer-strip { display: grid; gap: 12px; padding-block-end: 36px; margin-block-end: 40px; border-block-end: 1px solid var(--paper-line); }
.footer-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-block-size: 76px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--paper-line);
  background: var(--navy);
  color: var(--paper);
  transition: border-color var(--motion-base) var(--ease-enter), background-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
a.footer-tile:hover { border-color: var(--gold-2); background: var(--field-bg-dark); }
a.footer-tile:active { transform: scale(0.99); }
a.footer-tile:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.footer-tile > span:not(.footer-ic) { display: grid; gap: 2px; min-inline-size: 0; }
.footer-tile strong { font-size: 1rem; color: var(--paper); }
.footer-tile small { font-size: 0.875rem; color: var(--paper-muted); }
.footer-tile .tp-stars { --box: 18px; margin-block-start: 2px; }
.footer-tile .tp-mark { font-size: 1rem; }
.footer-tile .tp-mark svg { inline-size: 18px; block-size: 18px; }
.footer-ic {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold-2);
  font-size: 0.875rem;
  font-weight: 700;
}
.footer-ic svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Logo, contact and links */
.footer-main { display: grid; gap: 36px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: start; }
.footer-logo { display: inline-flex; border-radius: 8px; }
.footer-logo .logo-lockup { --word-size: 17px; padding: 0; }
.footer-logo .logo-emblem { block-size: 56px; }
.footer-logo:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }
.footer-h { margin-block-end: 14px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); }
.footer-links { display: grid; gap: 4px; }
.footer-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  color: var(--paper-muted);
  transition: color var(--motion-base) var(--ease-enter);
}
.footer-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  block-size: 1px;
  background: var(--gold-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-moderate) var(--ease-out);
}
.footer-link:hover { color: var(--paper); }
.footer-link:hover::after { transform: scaleX(1); }
.footer-link:active { color: var(--gold-2); }
.footer-link:focus-visible { outline: none; color: var(--paper); box-shadow: var(--focus-ring-dark); border-radius: 4px; }
.footer-link svg { inline-size: 13px; block-size: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.footer-mail { overflow-wrap: anywhere; }
.footer-socials { display: flex; gap: 10px; }
.footer-social {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid var(--field-border-dark);
  color: var(--paper);
  transition: background-color var(--motion-base) var(--ease-enter), color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.footer-social svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-social:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); }
.footer-social:active { transform: scale(0.94); }
.footer-social:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }

/* The bottom line */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-block-start: 40px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--paper-line);
  font-size: 0.875rem;
  color: var(--paper-faint);
}
.footer-legal p { max-inline-size: 60ch; }
.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--field-border-dark);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.footer-top svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-base) var(--ease-out); }
.footer-top:hover { background: var(--field-bg-dark); border-color: var(--gold-2); }
.footer-top:hover svg { transform: translateY(-2px); }
.footer-top:active { transform: scale(0.97); }
.footer-top:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }

/* Arrives once on view; hidden beforehand only while the script runs */
.footer-strip .footer-tile:nth-child(2) { --d: 80ms; }
.footer-strip .footer-tile:nth-child(3) { --d: 160ms; }
.footer-main > :nth-child(2) { --d: 60ms; }
.footer-main > :nth-child(3) { --d: 120ms; }
.footer-main > :nth-child(4) { --d: 180ms; }
:is(.intro-wait, .intro-play) .site-footer [data-reveal]:not(.is-in) .footer-rise { opacity: 0; }
.site-footer [data-reveal].is-in .footer-rise { animation: footerRise var(--motion-slow) var(--ease-out) backwards; animation-delay: var(--d, 0ms); }
@keyframes footerRise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  :is(.intro-wait, .intro-play) .site-footer [data-reveal]:not(.is-in) .footer-rise { opacity: 1; }
}

@media (min-width: 900px) {
  .footer-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .footer-main { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
  .footer-brand { grid-column: auto; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 100;
  transform: translate(-50%, 20px);
  padding: 14px 22px;
  background: var(--ink); color: #fff;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.88rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth), transform 0.5s var(--ease-out);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* =====================================================
   ENHANCEMENTS
   ===================================================== */

/* Cursor spotlight (final call to action) */
.spotlight {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 60%) var(--my, 45%), rgba(201, 162, 74, 0.12), rgba(40, 90, 170, 0.08) 35%, transparent 65%);
  opacity: 0; transition: opacity 0.6s;
}
.cta:hover .spotlight { opacity: 1; }

/* Crossed tapes (approved marquee option D)
   Two tapes cross the seam between the dark hero and the cream page,
   a gold one in front and a black one behind, in the logo's Cinzel.
   They never move on their own: js/main.js slides them in opposite
   directions only as the page scrolls, so there is nothing to pause.
   Screen readers get the claims once, from the visually hidden list. */
.tape {
  position: relative;
  z-index: 2;
  block-size: 150px;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--navy-2) 0 50%, var(--cream) 50% 100%), var(--cream);
}
.tape-band {
  position: absolute;
  inset-inline-start: -10vw;
  inline-size: 120vw;
  inset-block-start: 50%;
  overflow: hidden;
  padding-block: 12px;
}
.tape-front {
  background: var(--gold-2);
  transform: translateY(calc(-50% + 16px)) rotate(-2.4deg);
  box-shadow: 0 14px 30px -18px rgba(9, 12, 17, 0.7);
}
/* offset from the gold tape so both stay visible on narrow screens */
.tape-back {
  background: var(--black);
  transform: translateY(calc(-50% - 20px)) rotate(2deg);
  border-block: 1px solid var(--gold-line);
}
.tape-run {
  display: flex;
  align-items: center;
  gap: 22px;
  inline-size: max-content;
  transform: translateX(-25%);
  will-change: transform;
}
.tape-run span {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tape-front span { color: var(--ink); }
.tape-back span { color: var(--gold-2); }
.tape-run i {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  transform: rotate(45deg);
}
.tape-front i { background: var(--ink); }
.tape-back i { background: var(--gold); }
@media (min-width: 640px) {
  .tape { block-size: 170px; }
  .tape-run span { font-size: 1.1875rem; }
}

/* How it works (approved round-3 option C, "Animated Explainer")
   How to get a free entry: join the waitlist, the draw goes live, 10 lucky
   waitlist members get a free entry. Three tabs on the left; on the right a
   dark screen acts each step out: an email typed and accepted, the draw
   going LIVE with an email arriving, ten entry tickets turning gold. It
   advances by itself only while on screen (js/main.js), with a pause
   button; picking a step, or the arrow keys, stops on it. Accent text on
   cream is bronze (5.4:1).                                               */
.how {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  padding-block: clamp(64px, 9vw, 112px);
  /* lining figures, so "10" never reads as "IO" in an old-style serif */
  font-variant-numeric: lining-nums;
}
.how-head { max-inline-size: 44rem; }
.how-eyebrow {
  margin-block-end: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
}
.how-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.how-title em { font-style: italic; color: var(--bronze); }
.how-lead {
  margin-block-start: 14px;
  max-inline-size: 46ch;
  font-size: 1.0625rem;
  color: var(--muted);
}
.how-fine { margin-block-start: 24px; font-size: 0.875rem; color: var(--muted); }

/* Icons in rings */
.ic {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
}
.ic svg {
  inline-size: 26px;
  block-size: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic.is-line { border: 1px solid var(--bronze-line); color: var(--bronze); background: var(--paper); }

/* The join button inside the explainer (scrolls to the hero form) */
.how-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 54px;
  padding-inline: 26px;
  border-radius: var(--radius-sm);
  background: var(--gold-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  transition: background-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.how-btn svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-base) var(--ease-enter);
}
.how-btn:hover { background: var(--gold-hover); }
.how-btn:hover svg { transform: translateX(3px); }
.how-btn:active { background: var(--gold-active); transform: scale(0.98); }
.how-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-dark); }

/* ---------- The tabs ---------- */
.how-explainer { display: grid; gap: 40px; margin-block-start: 44px; align-items: center; }
.how-tabs { display: grid; gap: 10px; }
.how-tab {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 16px;
  inline-size: 100%;
  padding: 16px 18px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--motion-base) var(--ease-enter), border-color var(--motion-base) var(--ease-enter);
}
.how-tab .ic { grid-row: span 2; }
.how-tab strong { font-family: var(--font-serif); font-weight: 600; font-size: 1.375rem; line-height: 1.15; align-self: end; }
.how-tab .txt { font-size: 0.9375rem; color: var(--muted); }
.how-tab:hover { background: rgba(255, 255, 255, 0.5); }
.how-tab:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.how-tab:active { background: var(--cream-2); }
.how-tab[aria-selected="true"] { background: var(--paper); border-color: rgba(20, 23, 28, 0.08); box-shadow: 0 20px 40px -32px rgba(9, 12, 17, 0.6); }
.how-tab[aria-selected="true"] .ic {
  background: linear-gradient(135deg, #f6e3a8 0%, #e0c070 35%, #c9a24a 70%, #e8cc80 100%);
  color: var(--ink);
  border-color: transparent;
}
/* the timer runs along the foot of the current tab (--p from main.js) */
.how-tab::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
}
.how-tab[aria-selected="true"]::after { transform: scaleX(var(--p, 0)); }
.how-controls { display: flex; align-items: center; gap: 12px; margin-block-start: 6px; padding-inline-start: 18px; font-size: 0.875rem; color: var(--muted); }
.stepper-toggle {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #6b7280;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-enter), transform var(--motion-fast) var(--ease-enter);
}
.stepper-toggle svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stepper-toggle:hover { background: var(--cream-2); }
.stepper-toggle:active { transform: scale(0.94); }
.stepper-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-light); }
.stepper-toggle:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- The screen and its three scenes ---------- */
.how-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 360px;
  padding: 28px;
  border-radius: 22px;
  background: radial-gradient(70% 70% at 50% 30%, #1b2d4f 0%, var(--navy) 70%);
  color: var(--paper);
  box-shadow: 0 50px 80px -50px rgba(9, 12, 17, 0.9);
  overflow: hidden;
}
.how-scene { inline-size: min(100%, 360px); display: grid; gap: 16px; justify-items: center; text-align: center; }
.how-scene[hidden] { display: none; }
.how-cap { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.375rem; color: var(--gold-2); }

/* Scene 1: an email is typed and the waitlist accepts it */
.mock-field {
  display: flex;
  align-items: center;
  inline-size: 100%;
  block-size: 52px;
  padding-inline: 16px;
  border-radius: 10px;
  border: 1px solid var(--field-border-dark);
  background: var(--field-bg-dark);
  color: var(--paper);
  text-align: start;
}
.mock-field .typed { overflow: hidden; white-space: nowrap; animation: howType var(--motion-slow) steps(16, end) 300ms backwards; }
.mock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 52px;
  border-radius: 10px;
  background: var(--gold-2);
  color: var(--ink);
  font-weight: 600;
  animation: howPress var(--motion-moderate) var(--ease-out) 950ms backwards;
}
.mock-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #1b282b;
  color: var(--success-on-dark);
  font-weight: 600;
  font-size: 0.9375rem;
  animation: howPop var(--motion-moderate) var(--ease-out) 1300ms backwards;
}
.mock-ok svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes howType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes howPress { 50% { transform: scale(0.96); } }
@keyframes howPop { from { opacity: 0; transform: translateY(8px) scale(0.95); } }

/* Scene 2: the draw goes live and the email arrives */
.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #b42318;
  color: #fff6f5;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
}
.live i { position: relative; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; animation: howPulse 1.4s var(--ease-enter) 3; }
@keyframes howPulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.notif {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 12px;
  inline-size: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  text-align: start;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
  animation: howDrop var(--motion-slow) var(--ease-out) 500ms backwards;
}
.notif img { grid-row: span 2; inline-size: 40px; block-size: 40px; object-fit: contain; border-radius: 10px; background: var(--black); padding: 4px; }
.notif b { font-size: 0.875rem; }
.notif span { font-size: 0.875rem; color: var(--muted); }
@keyframes howDrop { from { opacity: 0; transform: translateY(-30px); } }

/* Scene 3: ten entry tickets turn gold */
.tens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; inline-size: 100%; }
.tens span {
  display: grid;
  place-items: center;
  block-size: 40px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f6e3a8 0%, #e0c070 35%, #c9a24a 70%, #e8cc80 100%);
  color: var(--ink);
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 0.875rem;
  animation: howGild var(--motion-moderate) var(--ease-out) backwards;
  animation-delay: calc(200ms + var(--i) * 70ms);
}
.tens span:nth-child(1) { --i: 0; } .tens span:nth-child(2) { --i: 1; } .tens span:nth-child(3) { --i: 2; }
.tens span:nth-child(4) { --i: 3; } .tens span:nth-child(5) { --i: 4; } .tens span:nth-child(6) { --i: 5; }
.tens span:nth-child(7) { --i: 6; } .tens span:nth-child(8) { --i: 7; } .tens span:nth-child(9) { --i: 8; }
.tens span:nth-child(10) { --i: 9; }
@keyframes howGild { from { background: #2b3548; color: var(--paper-faint); transform: rotateX(90deg); } }

@media (min-width: 960px) {
  .how-explainer { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; }
  .how-screen { min-block-size: 420px; }
}

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(9, 12, 17, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--gold);
  color: #fff;
  transform: translateY(110%);
  transition: transform 0.5s var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta strong { display: block; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; }
.sticky-cta small { font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); }
/* the button keeps its width; the line beside it wraps instead */
.sticky-cta .btn { flex: none; padding: 11px 16px; font-size: 0.82rem; }
.sticky-cta > span { min-inline-size: 0; }

/* Magnetic buttons */
.btn-gold { transition: transform 0.25s var(--ease-out), box-shadow 0.4s var(--ease-out); }

/* CTA background photo */
.cta-bg img { object-position: 50% 35%; opacity: 0.9; }


/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
  .waitlist-form, .trust-row { margin-inline: auto; justify-content: center; }

  .sticky-cta { display: flex; }
}

@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .waitlist-form { flex-direction: column; }
  .waitlist-form .btn { width: 100%; }
  .trust-row li + li { border-left: 0; padding-left: 0; }
  .trust-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* a delayed entrance would otherwise keep its content hidden for the delay */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}