/* ============================================================
   MARNI LIA BELLEZITO — WEBINAR FUNNEL
   Brand system: cream / charcoal / brushed gold / burgundy accent
   Type: Bodoni Moda (display) · Manrope (body) · letterspaced caps (eyebrow)
   Rule: no em dashes · Australian English · "community" not "list"
   ============================================================ */

/* Manrope (body) from Google. Bodoni Moda (display) is self-hosted below
   using the exact font files Marni uses on the webinar slides.
   Nunito Sans (pull-quotes) loaded here too; self-host later when Google
   Fonts domains are allowed, to drop the external dependency. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Nunito+Sans:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* Bodoni Moda — self-hosted variable font, weight axis 400–900.
   Same source as the webinar deck, so titles now match exactly. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/BodoniModa-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/BodoniModa-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Avenir Next Ultra Light (Wide) — brand "quotes" face.
   Files staged in /fonts. Internal name is "Avenir Next Cyr Ultra Light";
   declared here under a clean family name so references stay self-contained. */
@font-face {
  font-family: 'Avenir Next Ultra';
  src: url('/fonts/avenir-next-ultra-light.woff2') format('woff2'),
       url('/fonts/avenir-next-ultra-light.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream:    #F3F2EE;
  --stone:    #E7E5DF;
  --taupe:    #DDD7CE;
  --warm-taupe:#C4BDB3;
  --charcoal: #0C080C;
  --black:    #121417;
  --gold:     #B89A6A;
  --gold-soft:#C9B084;
  --burgundy: #3B0F19;

  --ink:      #1A1714;          /* body text on light */
  --ink-soft: #5A534B;          /* muted text on light */
  --cream-soft: rgba(243,242,238,0.66); /* muted text on dark */

  --display: 'Bodoni Moda', Georgia, serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --quote: 'Avenir Next Ultra', 'Bodoni Moda', Georgia, serif;

  /* warm light-panel glow — the "lit arch" behind the wordmark */
  --panel-glow: radial-gradient(60% 80% at 50% 42%, rgba(255,251,244,0.95) 0%, rgba(247,242,233,0.7) 34%, rgba(243,242,238,0) 72%);
  --gold-deep: #A6884F;   /* gold text that holds contrast on light */

  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- type primitives ---------- */
.eyebrow {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.display {
  font-family: var(--display);
  font-weight: 600;
  /* Pin optical size to the sturdy "text" cut (opsz 11) so Bodoni's hairline
     strokes stay legible at large sizes instead of thinning to the fragile
     display cut. This is Marni's legibility fix. Weight stays per-element.
     font-optical-sizing alone is unreliable on iOS Safari, so opsz is also
     pinned explicitly via font-variation-settings, which Safari honours. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11, "wght" 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.display em { font-style: italic; }

/* The three feature headers in deep burgundy accent. */
.head-burgundy,
.band-ink .display.head-burgundy,
.band-gradient-down .head-burgundy,
.band-gradient-up .grad-head .display.head-burgundy,
.band-gradient-up .head-burgundy { color: var(--burgundy); }

/* Titles bumped to 600 per Marni: the 400/500 weights read too thin at a
   glance and risk conversions. Bodoni Moda at 600 holds legibility on light. */
h1.display { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 600; }
h2.display { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3.display { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

p { max-width: 62ch; }

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

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 120px); }
.center { text-align: center; }
.center p { margin-inline: auto; }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: 0;
  width: 120px;
  margin: 28px auto;
  opacity: 0.8;
}
.hairline.left { margin-inline: 0; }

/* ============================================================
   BAND SYSTEM — Saint Haven light aesthetic
   Cream/ivory is the dominant canvas. Dark is a small accent only.
   The light-to-dark gradient is kept as an ACCENT, not the default.
   ============================================================ */

/* Light hero: warm ivory wash with a soft lit-arch glow behind the wordmark.
   Named .band-dark for markup compatibility, but it now renders light. */
.band-dark {
  position: relative;
  background:
    radial-gradient(80% 70% at 50% 8%, rgba(184,154,106,0.07), transparent 60%),
    linear-gradient(180deg, #F3F2EE 0%, var(--cream) 55%, var(--stone) 100%);
  color: var(--ink);
}
.band-dark .display { color: var(--ink); }
.band-dark p { color: var(--ink-soft); }
.band-dark .eyebrow { color: var(--gold-deep); }

/* The lit-arch light panel sits behind the centred hero content */
.band-dark .hero-centered {
  position: relative;
  z-index: 1;
}
.band-dark .hero-centered::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6%;
  width: min(760px, 92%);
  height: 150%;
  transform: translateX(-50%);
  background: var(--panel-glow);
  z-index: -1;
  pointer-events: none;
}

/* The valley floor — warm taupe, the deepest brand tone we descend to.
   Not dark: the page never leaves the cream-to-taupe range. Contrast is
   carried by gold and burgundy accents, not by going black. */
.band-ink {
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(184,154,106,0.14), transparent 60%),
    var(--warm-taupe);
  color: var(--charcoal);
}
.band-ink .display { color: var(--charcoal); }
.band-ink p { color: var(--ink); }
.band-ink .eyebrow { color: var(--gold-deep); }

/* Gradient accent bands — the signature light travel, all brand values.
   Descends only to warm taupe #C4BDB3; never goes truly dark. */
.band-gradient-down {
  background: linear-gradient(180deg, #F3F2EE 0%, var(--cream) 34%, var(--stone) 66%, var(--warm-taupe) 100%);
  color: var(--ink);
}
.band-gradient-down .grad-foot .display { color: var(--charcoal); }
.band-gradient-down .grad-foot p { color: var(--ink); }
.band-gradient-down .grad-foot .eyebrow { color: var(--gold-deep); }
.band-gradient-down .grad-foot .hairline { opacity: 1; }

.band-gradient-up {
  background: linear-gradient(180deg, var(--warm-taupe) 0%, var(--stone) 34%, var(--cream) 66%, #F3F2EE 100%);
  color: var(--ink);
}
.band-gradient-up .grad-head .display { color: var(--charcoal); }
.band-gradient-up .grad-head p { color: var(--ink); }
.band-gradient-up .eyebrow,
.band-gradient-up .eyebrow.ink {
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.34em;
}
.band-gradient-up .hairline { opacity: 1; }

.eyebrow.gold { color: var(--gold); }
.eyebrow.ink  { color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1.15em 2.4em;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease);
  line-height: 1;
}
/* Primary per brief: black button with gold text.
   (.btn-gold kept as the class name used across markup, restyled to the
   brief's primary treatment so no HTML changes are needed.) */
.btn-gold {
  background: var(--charcoal);
  color: var(--gold-soft);
  border-color: var(--charcoal);
}
.btn-gold:hover {
  background: var(--black);
  color: #E4CE9E;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -16px rgba(12,8,12,0.55);
}
/* Gold-fill secondary, per brief's alternate (gold button, white bold text) */
.btn-goldfill {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
  color: #fff;
  font-weight: 700;
}
.btn-goldfill:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(184,154,106,0.6); }
.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(26,23,20,0.28);
}
.btn-outline:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
/* on a dark band, the outline needs light strokes */
.band-ink .btn-outline { color: var(--cream); border-color: rgba(243,242,238,0.4); }
.band-ink .btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-dark {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(26,23,20,0.28);
}
.btn-outline-dark:hover { border-color: var(--gold-deep); color: var(--burgundy); }
.btn-block { width: 100%; }

/* ---------- top date strip ---------- */
.topstrip {
  background: var(--burgundy);
  color: var(--cream);
  text-align: center;
  padding: 11px 16px;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
.topstrip .dot { color: var(--gold); margin-inline: 0.7em; }

/* ---------- bullets (gold bird-dot accent) ---------- */
.learn-list { list-style: none; display: grid; gap: 22px; max-width: 640px; }
.learn-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.learn-list .mark {
  width: 9px; height: 9px;
  margin-top: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.learn-list .lt {
  font-family: var(--display);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11, "wght" 600;
  font-size: 1.18rem;
  line-height: 1.4;
  color: inherit;
}
.learn-list .ld { font-size: 0.95rem; color: var(--ink-soft); margin-top: 4px; }
.band-ink .learn-list .ld { color: var(--ink); }

/* ---------- form card ---------- */
.form-card {
  background: var(--cream);
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 40px 90px -50px rgba(12,8,12,0.55);
}
.form-card .form-head { text-align: center; margin-bottom: 26px; }
.form-card .form-head .eyebrow { color: var(--gold); }
.form-card .form-head h3 { margin-top: 10px; color: var(--charcoal); }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
  font-weight: 600;
}
.field input {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.95em 1.1em;
  background: #fff;
  border: 1px solid var(--warm-taupe);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,154,106,0.18);
}
.field input::placeholder { color: var(--warm-taupe); }
.form-note { font-size: 0.74rem; color: var(--ink-soft); text-align: center; margin-top: 14px; }
.form-error {
  display: none;
  background: rgba(59,15,25,0.08);
  border: 1px solid rgba(59,15,25,0.3);
  color: var(--burgundy);
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.form-error.show { display: block; }

/* ---------- countdown ---------- */
.countdown { display: flex; gap: clamp(14px, 3vw, 30px); justify-content: center; margin: 8px 0; }
.cd-unit { text-align: center; min-width: 56px; }
.cd-num {
  font-family: var(--display);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11, "wght" 600;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.cd-lab {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 9px;
}
.band-ink .cd-num { color: var(--gold); }
.band-ink .cd-lab { color: var(--cream-soft); }

/* ---------- video placeholder ---------- */
/* Wrapper for the live Vidalytics embeds — gives the player the same rounded
   frame and border as the old placeholder had. */
.video-embed {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--warm-taupe);
  box-shadow: 0 24px 60px -32px rgba(12,8,12,0.4);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 24%, rgba(255,251,244,0.9), transparent 62%),
    linear-gradient(160deg, var(--stone) 0%, var(--taupe) 100%);
  border: 1px solid var(--warm-taupe);
  display: grid;
  place-content: center;
  text-align: center;
}
/* on a dark band, restore the dark frame */
.band-ink .video-frame {
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(184,154,106,0.16), transparent 55%),
    linear-gradient(160deg, #1d1a1f 0%, #0c080c 100%);
  border-color: rgba(184,154,106,0.28);
}
.video-frame .play {
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  display: grid; place-content: center;
  margin: 0 auto 18px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.video-frame .play::after {
  content: '';
  width: 0; height: 0;
  border-left: 16px solid var(--gold-deep);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}
.video-frame:hover .play { transform: scale(1.06); background: rgba(166,136,79,0.1); }
.video-frame .vlabel { color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; }
.band-ink .video-frame .play { border-color: var(--gold); }
.band-ink .video-frame .play::after { border-left-color: var(--gold); }
.band-ink .video-frame .vlabel { color: var(--cream-soft); }
.video-frame .vplaceholder-tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); border: 1px dashed rgba(184,154,106,0.5);
  padding: 5px 9px; border-radius: 2px;
}

/* ---------- testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.quote {
  border-top: 1px solid var(--gold);
  padding-top: 22px;
}
.quote .qt {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.5;
  color: inherit;
}
.band-ink .quote .qt { color: var(--cream); }
.quote .qa {
  margin-top: 18px;
  margin-bottom: 4px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: block;
}
.quote .qr {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 6px;
  font-weight: 500;
}
.band-ink .quote .qr { color: var(--cream-soft); }

/* ---------- hybrid proof: pull quotes ---------- */
.pullquotes { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: 940px; margin: 0 auto 60px; }
.pullquote { text-align: center; }
.pullquote .pq {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.3vw, 1.82rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--charcoal);
}
.pullquote .pq em { font-style: italic; color: var(--burgundy); }
.pullquote .pa {
  margin-top: 18px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
@media (max-width: 720px) { .pullquotes { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- proof gallery: framed receipts ---------- */
.receipts {
  columns: 2;
  column-gap: 26px;
  max-width: 980px;
  margin: 0 auto;
}
.receipt {
  background: #fff;
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 30px 70px -45px rgba(12,8,12,0.4);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  break-inside: avoid;
  margin-bottom: 26px;
}
.receipt:hover { transform: translateY(-3px); box-shadow: 0 40px 80px -45px rgba(12,8,12,0.5); }
.receipt img { width: 100%; height: auto; display: block; border-radius: 2px; }
.receipt.raw { padding: 14px; }
.receipt.raw img { border-radius: 6px; }
.receipt .rcap {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 0 4px 4px;
}
.receipt .rcap .rdot { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.receipt .rcap .rtext { font-size: 0.74rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.receipt .rtag {
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 2px 4px 12px; display: inline-block;
}
@media (max-width: 760px) { .receipts { columns: 1; } }

.proof-disclaimer {
  max-width: 720px; margin: 40px auto 0; text-align: center;
  font-size: 0.74rem; color: var(--ink-soft); line-height: 1.6; letter-spacing: 0.02em;
}

/* ---------- confirmation: hero video ---------- */
.hero-video {
  max-width: 760px;
  margin: 0 auto;
}
.hero-video .video-frame { aspect-ratio: 16 / 9; }

/* ---------- embedded tool (iframe, isolated like a Typeform) ---------- */
.tool-embed-wrap {
  max-width: 880px;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid var(--taupe);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 50px 110px -55px rgba(12,8,12,0.6);
}
.tool-embed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--stone);
  border-bottom: 1px solid var(--taupe);
}
.tool-embed-bar .dot3 { display: flex; gap: 6px; }
.tool-embed-bar .dot3 span { width: 9px; height: 9px; border-radius: 50%; background: var(--warm-taupe); }
.tool-embed-bar .dot3 span:first-child { background: var(--burgundy); opacity: 0.6; }
.tool-embed-bar .tlabel {
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.tool-embed-wrap iframe {
  width: 100%;
  height: 740px;
  border: 0;
  display: block;
  background: var(--cream);
}
@media (max-width: 600px) { .tool-embed-wrap iframe { height: 640px; } }

/* ---------- confirmation: steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.step-card {
  background: var(--cream);
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
}
.step-card .snum {
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 16px;
}
.step-card h4 { font-family: var(--display); font-weight: 600; font-optical-sizing: none; font-variation-settings: "opsz" 11, "wght" 600; font-size: 1.15rem; margin-bottom: 10px; color: var(--charcoal); }
.step-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* mock inbox */
.inbox {
  margin-top: 16px;
  border: 1px solid var(--warm-taupe);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.8rem;
}
.inbox .ibar { background: var(--stone); padding: 8px 12px; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--warm-taupe); }
.inbox .irow { display: flex; gap: 10px; padding: 11px 12px; align-items: center; }
.inbox .iav { width: 30px; height: 30px; border-radius: 50%; background: var(--burgundy); color: var(--cream); display: grid; place-content: center; font-family: var(--display); font-size: 0.95rem; flex: none; }
.inbox .ifrom { font-weight: 600; color: var(--ink); }
.inbox .isub { color: var(--ink-soft); font-size: 0.74rem; }

/* calendar buttons */
.cal-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- legal page body ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { margin-bottom: 8px; color: var(--charcoal); }
.legal h2 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin: 34px 0 10px; color: var(--charcoal); }
.legal p, .legal li { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 12px; }
.legal ul { padding-left: 20px; }
.legal .updated { font-size: 0.78rem; color: var(--warm-taupe); letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--cream-soft);
  padding-block: 56px;
  font-size: 0.82rem;
}
.site-footer .wrap { display: grid; gap: 26px; }
.footer-brand { font-family: var(--display); font-weight: 600; font-optical-sizing: none; font-variation-settings: "opsz" 11, "wght" 600; font-size: 1.3rem; color: var(--cream); letter-spacing: 0.04em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--cream-soft); font-size: 0.78rem; letter-spacing: 0.06em; transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--gold); }
.footer-disclaimer { font-size: 0.72rem; line-height: 1.7; color: rgba(243,242,238,0.72); font-weight: 500; max-width: 80ch; }
.footer-rule { height: 1px; background: rgba(243,242,238,0.12); }
.footer-copy { font-size: 0.72rem; color: rgba(243,242,238,0.72); font-weight: 500; letter-spacing: 0.06em; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
.reg-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) {
  .reg-grid { grid-template-columns: 1fr; }
  .reg-form-col { position: static !important; }
}
.sticky-form { position: sticky; top: 28px; }

/* ---------- centered hero (screenshot layout) ---------- */
.hero-centered { text-align: center; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-centered .eyebrow { color: var(--gold); text-align: center; }
.hero-centered h1, .hero-centered .hero-sub { width: 100%; }
/* Registration hero: smaller headline + tighter spacing so the video pulls up
   into view on load (her face visible, not just the top of her head). */
.hero-centered h1 { margin: 12px auto 0; font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.hero-centered .hero-sub { margin: 20px auto 0; font-size: 1rem; color: var(--ink-soft); max-width: 56ch; }
.band-ink .hero-centered .hero-sub { color: var(--cream-soft); }
.hero-video-big { max-width: 760px; margin: clamp(18px,2.5vw,28px) auto 0; }
.hero-video-big .video-frame { aspect-ratio: 16 / 9; }

/* two-up row below the video: bullets | form */
.hero-twoup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
  max-width: 1040px;
  margin: clamp(40px,6vw,64px) auto 0;
}
.hero-twoup .learn-list { margin: 0; max-width: none; gap: clamp(26px, 3.5vw, 40px); }
.hero-twoup .learn-list .lt { font-size: 1.28rem; }
.hero-twoup .learn-list .ld { font-size: 1rem; margin-top: 7px; }
@media (max-width: 860px) {
  .hero-twoup { grid-template-columns: 1fr; }
}