/* =========================================================
   Nivesh Baithak — Design System v2
   ========================================================= */

/* ── Tokens ── */
:root {
  color-scheme: light;

  /* Brand */
  --indigo:      #23315f;
  --indigo-deep: #172144;
  --teal:        #0b7a75;
  --marigold:    #f2b330;
  --rose:        #c23a5b;
  --leaf:        #2f6f43;
  --sky:         #2f7ebd;
  --terracotta:  #b85032;
  --brick:       #8f321f;

  /* Surface */
  --paper:   #fff8ed;
  --surface: #fffcf5;
  --cream:   #f5e8ce;
  --mist:    #eef7f5;
  --ink:     #181c29;
  --muted:   #5a5d50;

  /* UI primitives */
  --line:    rgba(0,0,0,0.08);
  --line-md: rgba(0,0,0,0.12);

  /* M3 Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.1);
  --shadow-sm: 0 1px 3px 1px rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-gold: 0 8px 28px rgba(242,179,48,0.2);

  /* M3 Radii */
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container: 1140px;

  /* Financial Dawn palette */
  --deep-horizon-blue: #1A365D;
  --morning-sky:       #4A90E2;
  --golden-sunrise:    #F5A623;
  --coral-dawn:        #FF7E67;
  --first-light:       #F8FAFC;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2.5px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Layout ── */
.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.section {
  padding: 72px 0;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--marigold);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.section-heading h2 {
  margin-top: 0;
}

/* ── Typography ── */
h1, h2, h3 {
  margin-top: 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

p {
  margin-top: 0;
}

h1 {
  margin-bottom: 16px;
  font-family: serif;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem);
  max-width: 760px;
}

h2 {
  margin-bottom: 16px;
  font-family: serif;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
}

h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 800;
}

/* ── Scroll reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-delay="5"] { transition-delay: 0.40s; }
[data-reveal][data-delay="6"] { transition-delay: 0.48s; }

/* ── Site Header ── */
.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  padding: 10px 16px;
  color: #fffdf8;
  transition: background 300ms var(--ease-in-out), box-shadow 300ms var(--ease-in-out), backdrop-filter 300ms;
}

.site-header.is-scrolled {
  background: rgba(23,33,68,0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(16,23,47,0.28);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.brand-logo {
  display: grid;
  width: clamp(90px, 28vw, 136px);
  min-height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,253,248,0.38);
  border-radius: var(--r);
  background: rgba(255,253,248,0.96);
  box-shadow: 0 6px 18px rgba(16,23,47,0.18);
  padding: 6px 10px;
  transition: box-shadow 200ms;
}

.brand-logo img {
  width: 100%;
  height: auto;
}

.brand-text {
  display: none;
  min-width: 0;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: serif;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.brand small {
  color: rgba(255,253,248,0.75);
  font-size: 0.73rem;
  letter-spacing: 0.01em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,253,248,0.88);
  font-size: 0.82rem;
  font-weight: 800;
}

.header-nav a {
  display: none;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  transition: color 150ms, background 150ms;
}

.header-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* "All Events" cross-site link — a distinct highlight among the plain nav
   links (blinking accent dot + uppercase label + right divider), linking
   out to the shared timeslanguages.in events hub. Deliberately doesn't set
   `display` so it still follows .header-nav a's own responsive show/hide
   (hidden below 720px, inline-flex above it) rather than forcing visibility. */
.header-nav .nav-all-events {
  align-items: center;
  gap: 6px;
  color: var(--marigold) !important;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 2px;
  padding-right: 14px;
  border-right: 1px solid rgba(255,253,248,0.25);
}

.header-nav .nav-all-events::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 0 3px rgba(242,179,48,0.22);
  flex-shrink: 0;
  animation: navAllEventsBlink 1.4s steps(2, end) infinite;
}

.header-nav .nav-all-events:hover {
  color: var(--marigold) !important;
  background: transparent !important;
}

@keyframes navAllEventsBlink {
  50% { opacity: 0.35; }
}

/* Surat-only EN / Gujarati content switcher (see i18n-surat.js). A plain
   pill toggle. The header copy only has room once the nav links come back
   at 720px (see below) — below that, .hero-lang-toggle (in the hero) is
   the one visitors actually see; .header-nav .lang-toggle stays hidden
   until then so it doesn't overlap the brand logo / CTA buttons. */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,253,248,0.25);
}

.header-nav .lang-toggle {
  display: none;
}

.hero-lang-toggle {
  display: inline-flex;
  margin: 0 0 14px;
}

@media (min-width: 720px) {
  .hero-lang-toggle {
    display: none;
  }
}

.lang-toggle-btn {
  border: 0;
  background: transparent;
  color: rgba(255,253,248,0.75);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 150ms, background 150ms;
}

.lang-toggle-btn:hover {
  color: #fff;
}

.lang-toggle-btn.is-active {
  background: var(--marigold);
  color: #23315f;
}

@media (prefers-reduced-motion: reduce) {
  .header-nav .nav-all-events::before {
    animation: none;
  }
}

.nav-cta {
  border: 1.5px solid rgba(255,253,248,0.5);
  border-radius: var(--r-pill);
  background: rgba(255,253,248,0.1);
  color: #fffdf8;
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 900;
  /* line-height: 1; */
  transition: background 150ms, border-color 150ms;
}

.nav-cta:hover {
  background: rgba(255,253,248,0.18);
}

.nav-cta-primary {
  border-color: var(--marigold);
  background: var(--marigold);
  color: #241a08;
}

.nav-cta-primary:hover {
  background: #ffd060;
  border-color: #ffd060;
}

/* ── Hero ── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 700px;
  overflow: hidden;
  background: var(--indigo-deep);
  color: #fffdf8;
}

/* Slider */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-in-out);
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide--market,
.hero-slide--bharat {
  background: linear-gradient(135deg, #0b1830 0%, #061b1a 100%);
}

.hero-slide--venue {
  background: var(--indigo-deep);
}

.hero-slide--venue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.market-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 74% 38%, rgba(242,179,48,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 70% 72%, rgba(194,58,91,0.13) 0%, transparent 44%),
    linear-gradient(105deg, rgba(15,22,50,0.94) 0%, rgba(15,22,50,0.72) 46%, rgba(15,22,50,0.18) 100%),
    linear-gradient(180deg, rgba(15,22,50,0.1) 0%, rgba(15,22,50,0.72) 100%);
}

.hero-slider-dots {
  position: absolute;
  z-index: 10;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 6px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(255,253,248,0.5);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  transition: background 220ms, border-color 220ms, width 220ms var(--ease-out);
}

.slider-dot.is-active {
  background: var(--marigold);
  border-color: var(--marigold);
  width: 24px;
  border-radius: var(--r-pill);
}

/* Hero scroll hint */
.hero-scroll-hint {
  position: absolute;
  z-index: 10;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,253,248,0.45);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scrollHint 2.4s var(--ease-in-out) infinite;
}

@keyframes scrollHint {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.75; transform: translateX(-50%) translateY(5px); }
}

.hero-scroll-hint svg .scroll-dot {
  animation: scrollDot 2.4s ease infinite;
}

@keyframes scrollDot {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(8px); }
  61%  { opacity: 0; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Hero inner */
.hero-inner {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 700px;
  padding: 110px 0 80px;
}

.hero-inner.hero-has-experts {
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}

.hero-main {
  min-width: 0;
}

/* Initiative logos */
.initiative-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: 780px;
  margin-bottom: 20px;
  color: rgba(255,253,248,0.8);
  font-size: 0.85rem;
  font-weight: 800;
}

.initiative-line > span:first-child {
  color: rgba(255,253,248,0.55);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.initiative-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.initiative-logos img {
  width: auto;
  max-height: 38px;
  border: 1px solid rgba(255,253,248,0.32);
  border-radius: var(--r);
  background: rgba(255,253,248,0.97);
  box-shadow: 0 8px 22px rgba(16,23,47,0.22);
  padding: 5px 8px;
}

.initiative-logos img:first-child {
  max-height: 48px;
}

/* Hero text */
.hero-tagline {
  max-width: 680px;
  margin-bottom: 14px;
  color: rgba(255,243,211,0.95);
  font-family: serif;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hero-copy {
  max-width: 640px;
  margin-bottom: 28px;
  color: rgba(255,253,248,0.78);
  font-size: 1rem;
  line-height: 1.7;
}

.hero-brand-row {
  display: block;
  max-width: 640px;
  margin: 0 0 28px;
}

.hero-sponsors {
  min-width: 0;
}

.hero-sponsors-label {
  display: block;
  margin-bottom: 13px;
  color: rgba(255,253,248,0.8);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-sponsors .sponsor-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  align-items: start;
  justify-content: start;
  gap: 16px 24px;
  margin: 0;
  max-width: none;
}

.hero-sponsors .sponsor-strip-card {
  display: flex;
  min-width: 0;
  min-height: 94px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-sponsors .sponsor-strip-card:hover {
  transform: none;
  box-shadow: none;
}

.hero-sponsors .sponsor-strip-logo {
  display: block;
  width: 220px;
  height: 72px;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  object-position: center;
}

.hero-sponsors .sponsor-strip-name,
.hero-sponsors .sponsor-strip-role {
  width: 100%;
  margin: 0;
  color: rgba(255,253,248,0.58);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

/* Event facts */
.event-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  max-width: 720px;
}

.event-facts div {
  padding: 11px 14px;
  border: 1px solid rgba(255,253,248,0.18);
  border-radius: var(--r);
  background: rgba(10,16,36,0.52);
  backdrop-filter: blur(8px);
}

.event-facts dt {
  margin-bottom: 3px;
  color: var(--marigold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-facts dd {
  margin: 0;
  color: #fffdf8;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
}

/* ── Hero experts carousel ──
   Mobile-first: compact by default (stacked under the hero content on
   small screens), scaled up once it becomes the side rail at 960px+. */
.hero-experts {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

.hero-experts-card {
  padding: 14px 14px 16px;
  border: 1px solid rgba(242,179,48,0.35);
  border-radius: var(--r-lg);
  background: rgba(10,16,36,0.62);
  backdrop-filter: blur(12px) saturate(1.2);
}

.hero-experts-eyebrow {
  margin: 0 0 14px;
  color: var(--marigold);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* Fixed-height stage: reserves layout space up front so populating the
   carousel after the async speakers fetch never shifts the page (CLS). */
.hero-experts-stage {
  position: relative;
  height: 200px;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255,253,248,0.06);
}

.hero-experts-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.13) 37%, rgba(255,255,255,0.05) 63%);
  background-size: 400% 100%;
  animation: heroExpertsShimmer 1.6s ease infinite;
}

@keyframes heroExpertsShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.hero-experts-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 16px 14px 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-in-out);
}

.hero-experts-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-experts-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(10,16,36,0) 38%, rgba(6,10,26,0.94) 100%);
}

.hero-experts-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-experts-avatar-fallback {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fffdf8;
  font-size: 1.25rem;
  font-weight: 900;
}

.hero-experts-name {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fffdf8;
  font-family: serif;
  font-size: 1rem;
  line-height: 1.25;
}

.hero-experts-role {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: rgba(255,253,248,0.78);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
}

.hero-experts-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.hero-experts-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 1.5px solid rgba(255,253,248,0.4);
  border-radius: 50%;
  background: transparent;
  transition: background 220ms, border-color 220ms, width 220ms var(--ease-out);
}

.hero-experts-dot.is-active {
  width: 18px;
  border-radius: var(--r-pill);
  background: var(--marigold);
  border-color: var(--marigold);
}

@media (prefers-reduced-motion: reduce) {
  .hero-experts-skeleton {
    animation: none;
  }

  .hero-experts-slide {
    transition: none;
  }
}

/* ── Buttons ── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  border: 0;
  border-radius: var(--r);
  padding: 0 20px;
  font-weight: 900;
  font-size: 0.9rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 160ms;
}

.button[hidden] {
  display: none;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

/* Closed event actions stay visibly inert instead of retaining their active
   colour, hover lift, or conversion-focused shadow. */
button.registration-closed:disabled,
button.partner-closed:disabled {
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  filter: grayscale(1);
  background: #6d7280;
  border-color: #858b98;
  color: rgba(255,253,248,0.8);
  box-shadow: none;
  pointer-events: none;
}

.button-primary {
  background: var(--marigold);
  color: #241a08;
  box-shadow: var(--shadow-gold);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #ffd060;
  box-shadow: 0 12px 36px rgba(242,179,48,0.36);
}

.button-secondary {
  border: 1.5px solid rgba(255,253,248,0.52);
  background: rgba(255,253,248,0.1);
  color: #fffdf8;
  backdrop-filter: blur(8px);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(255,253,248,0.2);
  border-color: rgba(255,253,248,0.7);
}

/* ── Benefits Strip ── */
.benefits-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #13265c 0%, #0f2255 50%, #0a3868 100%);
  border-bottom: 2px solid rgba(242,179,48,0.5);
}

.benefits-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #13265c 0%, transparent 8%, transparent 92%, #13265c 100%);
  z-index: 1;
  pointer-events: none;
}

.benefits-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: benefitsScroll 40s linear infinite;
  padding: 0;
}

.benefits-track:hover {
  animation-play-state: paused;
}

.benefits-track span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  color: rgba(255,253,248,0.9);
  font-size: 0.84rem;
  font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
  transition: color 150ms;
}

.benefits-track span:hover {
  color: var(--marigold);
}

@keyframes benefitsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Trust Strip ── */
.trust-strip {
  background: linear-gradient(100deg, var(--indigo) 0%, #162558 54%, #0d5856 100%);
  color: #fffdf8;
}

.trust-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.trust-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  color: rgba(255,253,248,0.82);
  font-size: 0.88rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.trust-list span:last-child {
  border-bottom: none;
}

.trust-list span::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 0 3px rgba(242,179,48,0.2);
}

/* ── Why Section ── */
.why-section {
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.two-column {
  display: grid;
  gap: 32px;
}

.text-stack p {
  color: var(--muted);
  line-height: 1.75;
  font-size: 1rem;
}

.text-stack p:last-child {
  margin-bottom: 0;
}

/* ── Belief Band ── */
.belief-band {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 64px 0;
}

.belief-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(35,49,95,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.belief-inner {
  position: relative;
  max-width: 860px;
}

.belief-inner h2 {
  margin-bottom: 14px;
  line-height: 1.12;
}

.belief-inner p {
  color: var(--muted);
  font-size: 1.02rem;
  margin-bottom: 0;
  line-height: 1.7;
}

/* ── Learning Grid ── */
.learning-grid,
.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.learning-grid article,
.audience-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  padding: 32px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.learning-grid article:hover,
.audience-grid article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.learning-grid article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--teal);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.learning-grid article:nth-child(3n+1)::before { background: var(--marigold); }
.learning-grid article:nth-child(3n+2)::before { background: var(--rose); }

.audience-grid article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--teal);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.audience-grid article:nth-child(3n+1)::before { background: var(--marigold); }
.audience-grid article:nth-child(3n+2)::before { background: var(--rose); }

.learning-grid article {
  padding: 24px 22px 22px;
}

.learning-grid article span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(11,122,117,0.1);
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.learning-icon,
.audience-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.learning-grid article:nth-child(3n+1) span {
  background: rgba(242,179,48,0.14);
  color: #7b5000;
}

.learning-grid article:nth-child(3n+2) span {
  background: rgba(194,58,91,0.1);
  color: var(--rose);
}

.learning-grid h3,
.audience-grid h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

.learning-grid p,
.audience-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Audience section */
.audience-section {
  background:
    radial-gradient(ellipse at 16% 12%, rgba(242,179,48,0.1) 0%, transparent 44%),
    url('https://static.langimg.com/photo/132278267.cms'),
    var(--mist);
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: overlay;
}

.audience-grid article {
  padding: 22px;
}

/* ── Speakers Section ── */
.speakers-section {
  background:
    radial-gradient(ellipse at 90% 18%, rgba(47,126,189,0.08) 0%, transparent 44%),
    radial-gradient(ellipse at 8% 82%, rgba(242,179,48,0.08) 0%, transparent 38%),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.speakers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.speakers-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.speakers-featured-grid[hidden] {
  display: none;
}

.speakers-status {
  margin: -18px 0 24px;
  color: var(--muted);
  font-size: 0.9rem;
}

.speaker-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  padding: 28px 28px 24px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.speaker-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Featured speakers — the two cards the custom-list API marks
   `custom_fields.type = "featured"`. Deep-navy + gold so they read as the
   headline act against the section's warm gradient, with the portrait and
   an eyebrow label set side by side. */
.speaker-card--featured {
  justify-content: center;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(242,179,48,0.55);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(242,179,48,0.16) 0%, transparent 58%),
    linear-gradient(140deg, #16213f 0%, #0d1730 100%);
  box-shadow:
    0 0 0 1px rgba(242,179,48,0.16),
    0 18px 40px -22px rgba(9,15,35,0.85);
}

.speaker-card--featured:hover {
  box-shadow:
    0 0 0 1px rgba(242,179,48,0.3),
    0 22px 48px -22px rgba(9,15,35,0.9);
}

.speaker-card--featured .speaker-header {
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}

.speaker-card--featured .speaker-avatar-img,
.speaker-card--featured .speaker-avatar {
  /* Always reads larger than the 120px portrait on a standard speaker card. */
  --featured-avatar: clamp(132px, 13vw, 172px);
  flex: 0 0 var(--featured-avatar);
  width: var(--featured-avatar);
  height: var(--featured-avatar);
  border-radius: 18px;
  border: 2px solid var(--marigold);
  padding: 3px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 22px -6px rgba(242,179,48,0.5);
}

.speaker-kicker {
  margin: 0 0 6px;
  color: var(--marigold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.speaker-card--featured .speaker-name {
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  line-height: 1.18;
  margin-bottom: 6px;
  color: #fffdf8;
}

.speaker-card--featured .speaker-designation,
.speaker-card--featured .speaker-company {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255,253,248,0.78);
}

.speaker-avatar {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--avatar-bg, var(--indigo));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.speaker-avatar-img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 0;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.speaker-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.speaker-expertise-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(11,122,117,0.08);
  border: 1px solid rgba(11,122,117,0.16);
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 4px;
}

.speaker-name {
  margin: 0 0 2px;
  font-family: serif;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--indigo);
  letter-spacing: -0.01em;
}

.speaker-designation {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.35;
}

.speaker-company {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.speaker-bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.speaker-bio em {
  color: var(--indigo);
  font-style: italic;
}

/* ── Pricing Section ── */
.pricing-section {
  padding: 72px 0 80px;
  background:
    radial-gradient(ellipse at 4% 18%, rgba(242,179,48,0.12) 0%, transparent 38%),
    radial-gradient(ellipse at 96% 80%, rgba(47,126,189,0.1) 0%, transparent 34%),
    linear-gradient(175deg, #0e1e4a 0%, #091838 55%, #060f2a 100%);
  color: #fffdf8;
}

.pricing-heading {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 36px;
}

.pricing-heading .section-kicker {
  color: var(--marigold);
  justify-content: center;
}

.pricing-heading .section-kicker::before {
  background: var(--marigold);
}

.pricing-heading h2 {
  color: #fffdf8;
  letter-spacing: -0.025em;
}

.pricing-subhead {
  color: rgba(255,253,248,0.65);
  font-size: 1rem;
  margin-bottom: 0;
  line-height: 1.65;
  max-width: 560px;
  margin-inline: auto;
}

/* Early Bird Banner */
.early-bird-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 32px;
  padding: 16px 22px;
  border: 1.5px solid rgba(242,179,48,0.4);
  border-radius: var(--r-lg);
  background: rgba(242,179,48,0.08);
  backdrop-filter: blur(8px);
}

.early-bird-flame {
  font-size: 1.8rem;
  flex-shrink: 0;
  animation: flamePulse 2s ease-in-out infinite;
}

@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1) rotate(3deg); }
}

.early-bird-copy {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.early-bird-copy strong {
  color: var(--marigold);
  font-size: 1rem;
  font-weight: 900;
}

.early-bird-copy span {
  color: rgba(255,253,248,0.72);
  font-size: 0.87rem;
  line-height: 1.5;
}

.early-bird-countdown-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border: 1px solid rgba(242,179,48,0.35);
  border-radius: var(--r);
  background: rgba(242,179,48,0.07);
}

.early-bird-label {
  color: rgba(255,253,248,0.5);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.early-bird-timer {
  color: var(--marigold);
  font-family: serif;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,253,248,0.12);
  border-radius: var(--r-xl);
  background: rgba(255,253,248,0.05);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 64px rgba(0,0,0,0.35);
}

.pricing-card[data-sold-out] {
  opacity: 0.68;
  filter: saturate(0.2);
}

.pricing-card[data-sold-out]:hover {
  transform: none;
  box-shadow: none;
}

.pricing-card[data-sold-out] .tier-cta:disabled {
  opacity: 1;
}

.pricing-card--featured {
  border-color: rgba(242,179,48,0.5);
  background: rgba(242,179,48,0.07);
  box-shadow: 0 22px 60px rgba(242,179,48,0.18);
}

.pricing-card--early-bird {
  border-color: rgba(242,179,48,0.5);
  background: rgba(242,179,48,0.07);
  box-shadow: 0 22px 60px rgba(242,179,48,0.18);
}

.featured-badge {
  background: var(--marigold);
  color: #241a08;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 0;
}

.pricing-card-header {
  padding: 24px 24px 0;
}

.tier-label {
  margin: 0 0 8px;
  color: rgba(255,253,248,0.45);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pricing-card--featured .tier-label {
  color: var(--marigold);
}

.pricing-card--early-bird .tier-label,
.pricing-card--early-bird .tier-amount {
  color: var(--marigold);
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  margin-bottom: 8px;
}

.tier-currency {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fffdf8;
  align-self: flex-start;
  padding-top: 6px;
}

.tier-amount {
  font-family: serif;
  font-size: 3.4rem;
  font-weight: 900;
  color: #fffdf8;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-card--featured .tier-amount {
  color: var(--marigold);
}

/* Anchor ("was") price, inline beside the sale price: red and struck, so the
   cut reads instantly, but still clearly secondary to the amount being
   charged. .tier-price already aligns on the baseline, so the two sit on one
   optical line. */
.tier-strike {
  margin-left: 12px;
  color: #ff6b6b;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration-line: line-through;
  text-decoration-thickness: 2.5px;
  text-decoration-color: currentColor;
}

.tier-strike[hidden] {
  display: none !important;
}

/* The separate "Early Bird: x → y" line is gone, so the price block carries
   the spacing to the benefits list itself. Scoped to the ticket grid: the
   awards page still uses .tier-orig-price under its own layout. */
.pricing-grid .tier-price {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

@media (max-width: 480px) {
  .tier-strike {
    margin-left: 10px;
    font-size: 1.3rem;
  }
}

.tier-orig-price {
  margin: 0 0 10px;
  color: rgba(255,253,248,0.45);
  font-size: 0.8rem;
  line-height: 1.4;
}

.tier-orig-price strong {
  color: #6ee7b7;
  font-weight: 800;
}

.tier-tagline {
  margin: 0 0 18px;
  color: rgba(255,253,248,0.68);
  font-size: 0.87rem;
  line-height: 1.5;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,253,248,0.1);
}

.tier-benefits {
  flex: 1;
  margin: 0;
  padding: 18px 24px;
  list-style: none;
  display: grid;
  gap: 10px;
}

.tier-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,253,248,0.85);
  font-size: 0.89rem;
  line-height: 1.45;
}

.check {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(110,231,183,0.15);
  color: #6ee7b7;
  font-size: 0.7rem;
  font-weight: 900;
  margin-top: 1px;
}

.pricing-card--featured .check {
  background: rgba(242,179,48,0.18);
  color: var(--marigold);
}

/* Deliverable dropdown */
.tier-details {
  margin: 0 24px 18px;
  border: 1px solid rgba(255,253,248,0.1);
  border-radius: var(--r);
  overflow: hidden;
}

.tier-details summary {
  padding: 10px 14px;
  color: rgba(255,253,248,0.55);
  font-size: 0.81rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 150ms, color 150ms;
  user-select: none;
}

.tier-details summary::-webkit-details-marker { display: none; }

.tier-details summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,253,248,0.2);
  color: var(--marigold);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 250ms var(--ease-out), background 150ms;
}

.tier-details[open] summary::after {
  content: "−";
  transform: rotate(0deg);
  background: rgba(242,179,48,0.15);
}

.tier-details summary:hover {
  background: rgba(255,253,248,0.05);
  color: rgba(255,253,248,0.85);
}

.tier-details-list {
  margin: 0;
  padding: 6px 14px 14px 30px;
  border-top: 1px solid rgba(255,253,248,0.08);
  display: grid;
  gap: 6px;
  list-style: disc;
}

.tier-details-list li {
  color: rgba(255,253,248,0.58);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* CTA buttons */
.tier-cta {
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  margin-top: auto;
  min-height: 50px;
  font-size: 0.92rem;
}

.tier-cta--base {
  border: 1.5px solid rgba(255,253,248,0.25);
  background: rgba(255,253,248,0.08);
  color: #fffdf8;
}

.tier-cta--base:hover {
  background: rgba(255,253,248,0.18);
  border-color: rgba(255,253,248,0.45);
}

.tier-cta:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tier-cta:disabled:hover {
  background: rgba(255,253,248,0.08);
  border-color: rgba(255,253,248,0.25);
  box-shadow: none;
}

.tier-cta--featured {
  background: var(--marigold);
  color: #241a08;
  box-shadow: 0 10px 30px rgba(242,179,48,0.32);
}

.tier-cta--featured:hover {
  background: #ffd060;
  box-shadow: 0 14px 40px rgba(242,179,48,0.42);
}

.pricing-note {
  margin: 28px 0 0;
  color: rgba(255,253,248,0.38);
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.6;
}

.payment-status {
  margin: 0 0 22px;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255,253,248,0.16);
  background: rgba(255,253,248,0.08);
  color: #fffdf8;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.payment-status.hidden {
  display: none;
}

.payment-status h3 {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.payment-status p {
  margin: 0;
  color: rgba(255,253,248,0.76);
  font-size: 0.9rem;
}

.payment-status.success {
  border-color: rgba(110,231,183,0.38);
  background: rgba(47,111,67,0.18);
}

.payment-status.failure {
  border-color: rgba(255,126,103,0.42);
  background: rgba(184,80,50,0.18);
}

.payment-status.pending {
  border-color: rgba(242,179,48,0.42);
  background: rgba(242,179,48,0.14);
}

.payment-status-modal-backdrop {
  z-index: 120;
}

.payment-status-modal {
  width: min(100%, 460px);
  text-align: center;
}

.payment-status-modal-body {
  padding: 42px 32px 34px;
}

.payment-status-modal-body h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
}

.payment-status-modal-body > p:not(.section-kicker) {
  margin: 0 auto 24px;
  max-width: 34ch;
  color: var(--muted);
}

.payment-status-modal-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid var(--line-md);
  border-radius: 50%;
  background: rgba(12,18,40,0.06);
  color: var(--indigo);
  font-size: 1.8rem;
  font-weight: 700;
}

.payment-status-modal.success .payment-status-modal-icon {
  border-color: rgba(47,111,67,0.3);
  background: rgba(47,111,67,0.12);
  color: var(--leaf);
}

.payment-status-modal.failure .payment-status-modal-icon {
  border-color: rgba(184,80,50,0.3);
  background: rgba(184,80,50,0.12);
  color: var(--rose);
}

.payment-status-modal.pending .payment-status-modal-icon {
  border-color: rgba(168,120,39,0.3);
  background: rgba(242,179,48,0.15);
  color: var(--marigold);
}

/* ── Agenda Section ── */
.agenda-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.agenda-list-v2 {
  display: grid;
  gap: 10px;
}

.agenda-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 160ms;
}

.agenda-item:hover {
  box-shadow: var(--shadow-sm);
}

.agenda-item[open] {
  box-shadow: var(--shadow-md);
}

.agenda-item-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 64px;
  padding: 14px 20px;
  list-style: none;
  user-select: none;
  transition: background 140ms;
}

details.agenda-item .agenda-item-summary {
  cursor: pointer;
}

.agenda-item-summary::-webkit-details-marker { display: none; }

details.agenda-item .agenda-item-summary:hover {
  background: rgba(35,49,95,0.03);
}

details.agenda-item[open] .agenda-item-summary {
  border-bottom: 1px solid var(--line);
  background: rgba(35,49,95,0.03);
}

.agenda-time {
  flex-shrink: 0;
  color: var(--brick);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  min-width: 150px;
}

.agenda-format-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(11,122,117,0.1);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agenda-name {
  flex: 1;
  min-width: 200px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.4;
}

details.agenda-item .agenda-item-summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--line-md);
  background: var(--surface);
  color: var(--teal);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  margin-left: auto;
  transition: background 160ms, border-color 160ms, color 160ms;
}

details.agenda-item[open] .agenda-item-summary::after {
  content: "−";
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.agenda-item-body {
  padding: 4px 20px 20px 20px;
}

.agenda-item-body ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  list-style: disc;
}

.agenda-item-body li {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.agenda-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}

/* ── Register Band ── */
.register-band {
  padding: 56px 0;
  background:
    linear-gradient(135deg, rgba(11,122,117,0.14) 0%, transparent 40%),
    var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.register-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.register-inner > div {
  max-width: 680px;
}

.register-inner h2 {
  line-height: 1.15;
}

.register-inner p {
  color: var(--muted);
  margin-bottom: 0;
}

/* ── FAQ Section ── */
.faq-section {
  background:
    radial-gradient(ellipse at 94% 8%, rgba(47,126,189,0.06) 0%, transparent 36%),
    radial-gradient(ellipse at 4% 92%, rgba(242,179,48,0.06) 0%, transparent 32%),
    var(--surface);
}

.faq-header {
  display: grid;
  gap: 24px;
  margin-bottom: 40px;
}

.faq-intro {
  color: var(--muted);
  font-size: 1rem;
  max-width: 640px;
  margin-bottom: 0;
  line-height: 1.7;
}

/* Tabs */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.faq-tab {
  border: 1.5px solid var(--line-md);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.faq-tab:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(11,122,117,0.05);
}

.faq-tab.is-active {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fffdf8;
  box-shadow: var(--shadow-sm);
}

/* FAQ Groups */
.faq-group {
  margin-bottom: 40px;
}

.faq-group:last-child {
  margin-bottom: 0;
}

.faq-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
  color: var(--indigo);
  font-family: serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.faq-group-icon {
  font-size: 1.2rem;
}

.faq-group.is-hidden {
  display: none;
}

/* FAQ Items */
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 160ms;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.faq-item[open] {
  box-shadow: var(--shadow-md);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 20px;
  color: var(--indigo);
  font-size: 0.95rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
  line-height: 1.4;
  transition: background 140ms;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover {
  background: rgba(35,49,95,0.03);
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--line);
  background: rgba(35,49,95,0.03);
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line-md);
  background: var(--surface);
  color: var(--teal);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  transition: background 160ms, border-color 160ms, color 160ms;
}

.faq-item[open] summary::after {
  content: "−";
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.faq-answer {
  padding: 20px 20px 22px;
}

.faq-answer p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.7;
  max-width: 820px;
}

.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--indigo); }

/* FAQ CTA Strip */
.faq-cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 52px;
  padding: 24px 28px;
  border: 1px solid var(--line-md);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(11,122,117,0.05) 0%, transparent 50%),
    rgba(255,253,248,0.9);
}

.faq-cta-strip p {
  margin: 0;
  color: var(--indigo);
  font-weight: 800;
  font-size: 1rem;
}

.button-outline-dark {
  border: 1.5px solid var(--indigo);
  background: transparent;
  color: var(--indigo);
  min-height: 44px;
  padding-inline: 22px;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: var(--r);
  transition: background 150ms, color 150ms;
}

.button-outline-dark:hover {
  background: var(--indigo);
  color: #fffdf8;
}

/* ── Final CTA ── */
.final-cta {
  background:
    radial-gradient(ellipse at 82% 30%, rgba(242,179,48,0.24) 0%, transparent 44%),
    linear-gradient(135deg, rgba(194,58,91,0.18) 0%, transparent 40%),
    linear-gradient(180deg, #0c8a82 0%, #0b7a75 100%);
  color: #fffdf8;
  padding: 68px 0;
}

.final-inner {
  display: grid;
  gap: 28px;
}

.final-copy {
  max-width: 880px;
}

.final-inner .section-kicker {
  color: rgba(255,253,248,0.7);
}

.final-inner .section-kicker::before {
  background: rgba(255,253,248,0.5);
}

.final-copy h2 {
  margin-bottom: 14px;
  color: #fffdf8;
  line-height: 1.1;
}

.final-copy p:last-child {
  max-width: 580px;
  margin-bottom: 0;
  font-size: 1.02rem;
  color: rgba(255,253,248,0.8);
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.final-actions .button {
  min-width: 180px;
}

/* ── Sponsors Section ── */
.sponsors-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sponsor-tier {
  margin-bottom: 44px;
}

.sponsor-tier:last-of-type {
  margin-bottom: 0;
}

.sponsor-tier-label {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sponsor-tier-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-md);
}

.sponsor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

.sponsor-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--line-md);
  border-radius: var(--r-lg);
  background: rgba(255,253,248,0.7);
  transition: border-color 180ms, background 180ms, transform 180ms var(--ease-out);
  cursor: default;
}

.sponsor-slot:hover {
  border-color: rgba(242,179,48,0.45);
  background: rgba(242,179,48,0.04);
  transform: translateY(-2px);
}

.sponsor-slot--title {
  width: 100%;
  height: 120px;
  border-color: rgba(242,179,48,0.4);
  background: linear-gradient(135deg, rgba(242,179,48,0.05), rgba(255,253,248,0.6));
}

.sponsor-slot--title .sponsor-placeholder-label {
  font-size: 1rem;
  color: rgba(242,179,48,0.8);
}

.sponsor-slot--title .sponsor-placeholder-hint {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

.sponsor-slot--gold {
  flex: 1 1 180px;
  height: 88px;
  max-width: 300px;
}

.sponsor-slot--silver {
  flex: 1 1 140px;
  height: 72px;
  max-width: 240px;
}

.sponsor-slot--media {
  flex: 1 1 118px;
  height: 62px;
  max-width: 200px;
}

.sponsor-slot--community {
  flex: 1 1 96px;
  height: 52px;
  max-width: 160px;
}

.sponsor-placeholder-label {
  color: rgba(35,49,95,0.3);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

.sponsor-cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 48px;
  padding: 24px 28px;
  border: 1px solid var(--line-md);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(35,49,95,0.04) 0%, transparent 50%),
    rgba(255,253,248,0.95);
}

.sponsor-cta-strip div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sponsor-cta-strip strong {
  color: var(--indigo);
  font-size: 1rem;
  font-weight: 900;
}

.sponsor-cta-strip span {
  color: var(--muted);
  font-size: 0.87rem;
}

/* ── Event Sponsors strip (above "What You Will Learn") ──
   All logos shown at equal size/weight — no title/gold/silver
   hierarchy, unlike the tiered .sponsor-slot system above. ── */
.sponsor-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.sponsor-strip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  padding: 28px 24px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.sponsor-strip-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.sponsor-strip-logo {
  max-width: 180px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sponsor-strip-name {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.sponsor-strip-role {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Disclaimer Section ── */
.disclaimer-section {
  background: linear-gradient(175deg, #0a1525 0%, #06101e 100%);
  color: rgba(255,253,248,0.78);
  padding: 72px 0 60px;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(242,179,48,0.2);
}

.disclaimer-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(242,179,48,0.35);
  background: rgba(242,179,48,0.07);
}

.disclaimer-header h2 {
  margin: 0;
  color: var(--marigold);
  font-family: serif;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.disclaimer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.disclaimer-block {
  padding: 20px 22px;
  border: 1px solid rgba(255,253,248,0.06);
  border-left: 3px solid rgba(242,179,48,0.3);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: rgba(255,253,248,0.03);
  transition: border-left-color 200ms;
}

.disclaimer-block:hover {
  border-left-color: rgba(242,179,48,0.55);
}

.disclaimer-block h3 {
  margin: 0 0 10px;
  color: rgba(255,253,248,0.9);
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.disclaimer-block p {
  margin: 0 0 10px;
  color: rgba(255,253,248,0.55);
  font-size: 0.85rem;
  line-height: 1.75;
}

.disclaimer-block p:last-child { margin-bottom: 0; }

.disclaimer-block strong {
  color: rgba(255,253,248,0.8);
}

.disclaimer-footer-row {
  padding-top: 28px;
  border-top: 1px solid rgba(255,253,248,0.08);
}

.disclaimer-footer-row p {
  margin: 0 0 8px;
  color: rgba(255,253,248,0.38);
  font-size: 0.81rem;
  line-height: 1.7;
  max-width: 900px;
}

.disclaimer-version {
  color: rgba(255,253,248,0.24) !important;
  font-size: 0.74rem !important;
}

/* ── Site Footer ── */
.site-footer {
  background: #030710;
  color: rgba(255,253,248,0.45);
  padding: 22px 0;
  font-size: 0.83rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.footer-brand img {
  filter: brightness(0) invert(1);
  opacity: 0.4;
  height: 28px;
  width: auto;
}

.footer-brand span {
  color: rgba(255,253,248,0.35);
  font-size: 0.79rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}

.footer-links a,
.footer-link-btn {
  color: rgba(255,253,248,0.4);
  font-size: 0.81rem;
  font-weight: 700;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  transition: color 150ms;
}

.footer-links a:hover,
.footer-link-btn:hover {
  color: rgba(255,253,248,0.82);
}

/* ── Modals ── */
.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 16px;
  background: rgba(12,18,40,0.76);
  backdrop-filter: blur(4px);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: min(100%, 780px);
  max-height: calc(100svh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  border: 1px solid rgba(168,120,39,0.28);
  background: #f7f7f5;
  box-shadow: 0 24px 72px rgba(12,18,40,0.28);
}

.modal::before {
  display: block;
  height: 5px;
  grid-column: 1 / -1;
  background: linear-gradient(90deg, var(--marigold) 0%, var(--teal) 34%, var(--rose) 68%, var(--indigo) 100%);
  content: "";
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line-md);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 150ms, color 150ms;
}

.modal-close:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.interstitial-backdrop {
  z-index: 130;
}

.interstitial-modal {
  width: min(100%, 720px);
  max-height: min(90vh, 760px);
  overflow-y: auto;
}

.interstitial-copy {
  padding: 34px 32px 28px;
}

.interstitial-eyebrow {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.interstitial-modal h2 {
  margin: 0 36px 20px 0;
  color: var(--indigo);
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.2;
}

.interstitial-body {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.65;
}

.interstitial-body p {
  margin: 0 0 14px;
}

.interstitial-body p:last-child {
  margin-bottom: 0;
}

.interstitial-venue {
  display: inline-block;
  color: var(--indigo);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modal-copy,
.registration-form {
  padding-inline: 18px;
}

.modal-copy {
  padding-top: 18px;
  padding-bottom: 12px;
  background: #f7f7f5;
  border-bottom: 1px solid rgba(168,120,39,0.22);
}

.modal-copy .section-kicker {
  color: #a87827;
}

.modal-copy h2 {
  padding-right: 48px;
  color: #221a16;
  font-family: inherit;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  font-weight: 500;
  line-height: 1.16;
}

.modal-copy p:last-child {
  margin-bottom: 0;
  color: rgba(34,26,22,0.68);
  font-size: 0.8rem;
  line-height: 1.42;
}

.registration-form {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 20px;
  overflow-y: auto;
}

.form-grid {
  display: grid;
  gap: 8px;
}

[data-otp-step],
[data-form-step] {
  display: grid;
  gap: 9px;
}

[data-otp-step][hidden],
[data-form-step][hidden] {
  display: none;
}

.phone-otp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, max-content);
  gap: 12px;
  align-items: end;
}

.phone-otp-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.phone-otp-row button {
  justify-self: stretch;
  min-height: 46px;
  border: 1px solid #221a16;
  border-radius: 4px;
  background: transparent;
  color: #221a16;
  box-shadow: none;
  padding-inline: 16px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.phone-otp-row button:hover,
.phone-otp-row button:focus-visible {
  background: #221a16;
  color: #fffdf8;
  box-shadow: none;
}

#reg-verify-otp-btn,
#partner-verify-otp-btn {
  background: #221a16;
  color: #fffdf8;
}

#reg-verify-otp-btn:hover,
#reg-verify-otp-btn:focus-visible,
#partner-verify-otp-btn:hover,
#partner-verify-otp-btn:focus-visible {
  background: #3a2c25;
}

.phone-otp-row input:disabled {
  border-style: dashed;
  background: rgba(35,49,95,0.04);
  color: var(--muted);
  font-weight: 700;
  opacity: 1;
}

.phone-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: end;
  justify-self: start;
  min-height: 46px;
  margin-top: 0;
  color: #008f43;
  font-size: 0.78rem;
  font-weight: 800;
}

.phone-verified-badge[hidden] {
  display: none;
}

@media (max-width: 599px) {
  .hero-sponsors .sponsor-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }

  .hero-sponsors .sponsor-strip-logo {
    width: 180px;
    height: 44px;
    max-height: 44px;
  }

  .hero-sponsors .sponsor-strip-card {
    min-height: 66px;
  }
}

@media (max-width: 380px) {
  .phone-otp-row {
    grid-template-columns: 1fr;
  }

  .phone-otp-row button {
    width: 100%;
  }
}

.registration-form label {
  display: grid;
  gap: 9px;
  color: #221a16;
  font-weight: 700;
}

.registration-form label span {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.registration-form input,
.registration-form select,
.registration-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(168,120,39,0.28);
  border-radius: 12px;
  background: #fffdfb;
  color: #221a16;
  padding: 12px 16px;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}

.registration-form input:focus,
.registration-form select:focus,
.registration-form textarea:focus {
  outline: none;
  border-color: #a87827;
  box-shadow: 0 0 0 3px rgba(168,120,39,0.14);
}

.registration-form textarea {
  min-height: 88px;
  resize: vertical;
}

.registration-form input:invalid:not(:focus):not(:placeholder-shown),
.registration-form select:invalid:not(:focus),
.registration-form textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--terracotta);
}

.consent {
  grid-template-columns: 22px 1fr;
  align-items: start;
  margin: 2px 0 0;
  gap: 9px;
  padding: 4px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: #a87827;
}

.consent span {
  color: #221a16;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
}

.form-error,
.form-success {
  border-radius: 14px;
  margin: 0;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 0.9rem;
}

.form-error {
  background: rgba(184,80,50,0.1);
  color: var(--brick);
  border: 1px solid rgba(184,80,50,0.2);
}

.form-success {
  background: rgba(47,111,67,0.1);
  color: var(--leaf);
  border: 1px solid rgba(47,111,67,0.2);
}

.form-submit {
  width: 100%;
  margin-top: 2px;
  min-height: 46px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ── OTP login views ── */
.otp-view {
  display: none;
}

.otp-view.is-active {
  display: grid;
  gap: 10px;
}

.otp-panel {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.otp-view[data-otp-view="success"].is-active {
  place-items: center;
}

.success-panel {
  width: min(100%, 460px);
  justify-items: center;
  padding: 26px 18px;
  text-align: center;
}

.success-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(47,111,67,0.08);
}

.success-copy {
  display: grid;
  gap: 8px;
}

.checkout-card {
  display: grid;
  gap: 18px 22px;
}

.otp-view[data-otp-view="details"] .checkout-card {
  grid-template-columns: minmax(0,1fr);
}

.otp-view[data-otp-view="details"] .checkout-header {
  display: none;
}

.checkout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(35,49,95,0.08);
}

.checkout-header h3 {
  margin: 0;
  color: var(--indigo);
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.2;
}

.checkout-verified {
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  background: rgba(47,111,67,0.1);
  color: var(--leaf);
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.checkout-fields {
  display: grid;
  gap: 9px;
}

.checkout-ticket,
.checkout-summary {
  display: grid;
  gap: 9px;
  border-radius: 6px;
  border: 1px solid rgba(168,120,39,0.24);
  background: #fffdfb;
  padding: 12px 14px;
}

.checkout-ticket {
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}

.checkout-price-breakdown {
  display: grid;
  gap: 6px;
  margin-top: -2px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(168, 120, 39, 0.06);
}

.checkout-price-breakdown[hidden] {
  display: none;
}

.checkout-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.checkout-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#checkout-unit-price,
#checkout-total {
  color: var(--indigo);
  font-size: 1.2rem;
  line-height: 1.2;
}

.checkout-qty {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: var(--teal);
  box-shadow: 0 8px 18px rgba(11,122,117,0.2);
}

.checkout-qty button,
.checkout-qty span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
}

.checkout-qty button {
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
}

.checkout-qty button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout-qty span {
  color: #fff;
  font-weight: 900;
}

.checkout-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-weight: 800;
}

.success-copy h3 {
  margin: 0;
  color: var(--indigo);
  font-family: serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

.success-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.success-actions .button {
  min-width: 160px;
}

.otp-status {
  min-height: 0;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.78rem;
}

.otp-status:empty {
  display: none;
}

.otp-status.is-error {
  color: #b85032;
}

.otp-status.is-success {
  color: #008f43;
}

.otp-status.is-info {
  color: var(--muted);
}

.otp-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.otp-actions-row .button {
  flex: 0 1 auto;
  min-height: 38px;
  border: 1px solid #221a16;
  border-radius: 4px;
  background: transparent;
  color: #221a16;
  box-shadow: none;
  padding-inline: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.change-phone-btn {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: -2px;
  background: none;
  border: none;
  padding: 0;
  color: #008f43;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  /* The <=380px rule stretches .phone-otp-row button to 100%; this is a link. */
  width: auto;
  flex: none;
}

.readonly-phone {
  border-style: dashed !important;
  background: rgba(35,49,95,0.04) !important;
  color: var(--muted);
  font-weight: 700;
}

.modal .efr-fields {
  display: grid;
  gap: 18px 22px;
}

.efr-loading-text {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  padding: 4px 0;
}

.modal .efr-field {
  gap: 9px;
}

.modal .efr-label {
  color: #221a16;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.modal .efr-control {
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid rgba(168,120,39,0.28);
  border-radius: 12px;
  background: #fffdfb;
  color: #221a16;
}

.modal textarea.efr-control {
  min-height: 46px;
}

.modal .efr-control:focus {
  outline: none;
  border-color: #a87827;
  box-shadow: 0 0 0 3px rgba(168,120,39,0.14);
}

/* ── Breakpoints ── */

/* 380px and below */
@media (max-width: 380px) {
  .container {
    width: min(100% - 24px, var(--container));
  }

  .site-header {
    padding-inline: 12px;
  }

  .brand-logo {
    width: 88px;
    min-height: 36px;
    padding-inline: 8px;
  }

  .header-nav {
    gap: 4px;
  }

  .nav-cta {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0.76rem;
  }

  .hero,
  .hero-inner {
    min-height: 580px;
  }

  .hero-inner {
    padding-top: 90px;
    padding-bottom: 70px;
  }

  .hero-copy {
    font-size: 0.93rem;
  }

  .hero-actions .button {
    flex: 1 1 100%;
  }

}

@media (max-width: 559px) {
  .modal-backdrop {
    padding: 10px;
  }

  .modal {
    max-height: calc(100svh - 20px);
  }

  .modal-copy,
  .registration-form {
    padding-inline: 14px;
  }

  .modal-copy {
    padding-top: 18px;
    padding-bottom: 12px;
  }

  .registration-form {
    padding-top: 14px;
  }

  .otp-panel {
    padding: 0;
  }

  .success-panel {
    padding: 22px 14px;
  }

  .otp-actions-row {
    flex-direction: column;
  }

  .otp-actions-row .button {
    width: 100%;
    flex-basis: auto;
  }

  .change-phone-btn {
    margin-top: 0;
  }
}

/* 560px */
@media (min-width: 560px) {
  .container {
    width: min(100% - 48px, var(--container));
  }

  .brand-text {
    display: block;
  }

  .nav-cta {
    padding-inline: 16px;
  }

  .initiative-logos img { max-height: 44px; }
  .initiative-logos img:first-child { max-height: 56px; }

  .event-facts {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .trust-list {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .trust-list span {
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    padding: 18px 0;
  }

  .trust-list span:nth-child(even) {
    border-right: none;
    padding-left: 16px;
  }

  .learning-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .audience-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .form-wide {
    grid-column: 1 / -1;
  }

  .button {
    padding-inline: 22px;
  }
}

@media (min-width: 768px) {
  .modal {
    width: min(100% - 40px, 780px);
  }

  .modal-copy {
    border-bottom: 1px solid rgba(35,49,95,0.08);
    padding: 18px 32px 12px;
  }

  .modal-copy h2 {
    padding-right: 0;
  }

  .registration-form {
    padding: 28px 32px 30px;
  }

  .otp-view[data-otp-view="details"] .checkout-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px 22px;
  }

  .otp-view[data-otp-view="details"] .checkout-card > .form-grid {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: start;
  }

  .otp-view[data-otp-view="details"] .checkout-card > .form-grid label {
    grid-column: 1;
  }

  .otp-view[data-otp-view="details"] .checkout-card > [data-otp-step] {
    grid-column: 2;
    grid-row: 2;
  }

  .otp-view[data-otp-view="details"] .checkout-card > [data-otp-step][hidden] {
    display: none;
  }

  .otp-view[data-otp-view="details"] .checkout-card > [data-form-step] {
    display: contents;
  }

  .otp-view[data-otp-view="details"] .checkout-card .efr-fields {
    display: contents;
  }

  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="full_name"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="name"] {
    grid-column: 1;
    grid-row: 1;
  }

  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="email"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="business_email"] {
    grid-column: 1;
    grid-row: 2;
  }

  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="designation"] {
    grid-column: 2;
    grid-row: 2;
  }

  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="company"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="company_name"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="organisation_name"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="organization_name"] {
    grid-column: 1;
    grid-row: 3;
  }

  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="investor_profile"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="profile"],
  #registration-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="investor_type"] {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="email"],
  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="business_email"] {
    grid-row: 3;
  }

  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="designation"] {
    grid-row: 3;
  }

  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="company"],
  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="company_name"],
  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="organisation_name"],
  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="organization_name"] {
    grid-row: 4;
  }

  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="investor_profile"],
  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="profile"],
  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="investor_type"] {
    grid-row: 5;
  }

  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="organisation_name"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="organization_name"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="company"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="company_name"] {
    grid-column: 1;
    grid-row: 1;
  }

  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="contact_name"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="full_name"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="name"] {
    grid-column: 1;
    grid-row: 2;
  }

  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="email"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="business_email"] {
    grid-column: 2;
    grid-row: 2;
  }

  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="partnership_interest"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="interest"] {
    grid-column: 1;
    grid-row: 3;
  }

  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="message"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="comments"],
  #partner-form .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="query"] {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="contact_name"],
  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="full_name"],
  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="name"] {
    grid-row: 3;
  }

  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="partnership_interest"],
  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="interest"] {
    grid-row: 4;
  }

  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="email"],
  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="business_email"] {
    grid-row: 3;
  }

  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="message"],
  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="comments"],
  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-card .efr-field[data-field-id="query"] {
    grid-row: 5;
  }

  .otp-view[data-otp-view="details"] .checkout-fields,
  .otp-view[data-otp-view="details"] .consent,
  .otp-view[data-otp-view="details"] .form-error,
  .otp-view[data-otp-view="details"] .form-submit {
    grid-column: 1 / -1;
  }

  #registration-form .otp-view[data-otp-view="details"] .form-submit {
    grid-row: 6;
  }

  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .form-submit {
    grid-row: 7;
  }

  .otp-view[data-otp-view="details"] .checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px 22px;
  }

  #registration-form .otp-view[data-otp-view="details"] .checkout-fields {
    display: block;
    grid-column: 1 / -1;
    grid-row: 5;
  }

  #registration-form.is-entering-otp .otp-view[data-otp-view="details"] .checkout-fields {
    grid-row: 6;
  }

  #partner-form .otp-view[data-otp-view="details"] .consent {
    grid-row: 5;
  }

  #partner-form.is-entering-otp .otp-view[data-otp-view="details"] .consent {
    grid-row: 6;
  }

  #partner-form .otp-view[data-otp-view="details"] .form-submit,
  #partner-form .otp-view[data-otp-view="details"] .form-error {
    grid-column: 1 / -1;
  }

  /* #nominate-form's field set doesn't match register/partner's hand-placed
     grid above, so it opts out of the checkout-card 2-col/display:contents
     scheme entirely and falls back to the same single-column layout used
     below 768px, letting .efr-fields run its own generic 2-col grid. */
  #nominate-form .otp-view[data-otp-view="details"] .checkout-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #nominate-form .otp-view[data-otp-view="details"] .checkout-card > .form-grid,
  #nominate-form .otp-view[data-otp-view="details"] .checkout-card > [data-otp-step] {
    grid-column: auto;
    grid-row: auto;
  }

  #nominate-form .otp-view[data-otp-view="details"] .checkout-card > [data-form-step] {
    display: grid;
  }

  #nominate-form .otp-view[data-otp-view="details"] .checkout-card .efr-fields {
    display: grid;
  }
}

/* 720px */
@media (min-width: 720px) {
  .header-nav {
    gap: 12px;
    font-size: 0.88rem;
  }

  .header-nav a {
    display: inline-flex;
  }

  .header-nav .lang-toggle {
    display: flex;
  }
}

/* 820px */
@media (min-width: 820px) {
  .site-header {
    padding: 12px 32px;
  }

  .brand-logo {
    width: 144px;
  }

  .hero,
  .hero-inner {
    min-height: 740px;
  }

  .hero-inner {
    padding-top: 110px;
    padding-bottom: 90px;
  }

  .section {
    padding: 88px 0;
  }

  .two-column {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 56px;
  }

  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: stretch;
    gap: 16px;
  }

  .pricing-card--featured {
    transform: translateY(-8px);
  }

  .pricing-card--featured:hover {
    transform: translateY(-13px);
  }

  .learning-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .audience-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .speakers-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .speakers-featured-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .final-inner {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 48px;
  }

  .final-actions {
    flex-direction: column;
    gap: 10px;
  }

  .final-actions .button {
    min-width: 200px;
  }

  .disclaimer-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
    align-items: start;
  }

  .modal-copy,
  .registration-form {
    padding-inline: 24px;
  }

  .modal-copy {
    padding-top: 20px;
  }

  .trust-list {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 0;
  }

  .trust-list span {
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 20px 16px;
  }

  .trust-list span:last-child {
    border-right: none;
  }
}

/* 960px */
@media (min-width: 960px) {
  .hero-inner.hero-has-experts {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    align-items: center;
    gap: 32px;
  }

  .hero-experts {
    max-width: 400px;
    justify-self: center;
  }

  .hero-experts-card {
    padding: 18px 18px 20px;
  }

  .hero-experts-stage {
    height: 300px;
  }

  .hero-experts-avatar-fallback {
    width: 84px;
    height: 84px;
    margin-bottom: 14px;
    font-size: 1.6rem;
  }

  .hero-experts-name {
    font-size: 1.15rem;
  }

  .hero-experts-role {
    font-size: 0.82rem;
  }
}

/* 1080px */
@media (min-width: 1080px) {
  .event-facts {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .speakers-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .section {
    padding: 100px 0;
  }

  /* Align the fixed header's content with the centred page container
     so the brand sits at the container's left edge and the Register
     CTA at its right edge — no more nav glued to the viewport edge. */
  .site-header {
    padding-inline: max(32px, calc((100vw - var(--container)) / 2));
  }
}

/* Wide desktop: use the available viewport width for the hero instead of
   leaving oversized gutters on either side of the content. */
@media (min-width: 1200px) {
  :root {
    --container: 1400px;
  }

  .hero-inner.hero-has-experts {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    gap: 64px;
  }

  .hero-experts {
    max-width: 460px;
  }

  .hero-experts-card {
    padding: 20px 20px 22px;
    box-shadow: 0 22px 56px rgba(6, 10, 26, 0.3);
  }

  .hero-experts-eyebrow {
    margin-bottom: 16px;
    font-size: 0.74rem;
  }

  .hero-experts-stage {
    height: 340px;
    border: 1px solid rgba(255, 253, 248, 0.12);
    box-shadow: inset 0 0 0 1px rgba(6, 10, 26, 0.14);
  }

  .hero-experts-slide {
    padding: 20px 18px 18px;
  }

  .hero-experts-name {
    font-size: 1.25rem;
  }

  .hero-experts-role {
    font-size: 0.86rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Mobile Scroll Snapping & Swipe Hint */
.mobile-swipe-hint {
  display: none;
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 12px;
  text-align: right;
  opacity: 0.8;
}

@media (max-width: 819px) {
  .mobile-swipe-hint {
    display: block;
  }
  
  .learning-grid,
  .audience-grid,
  .speakers-grid,
  .pricing-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 24px;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .speakers-featured-grid {
    grid-template-columns: 1fr;
  }

  .speakers-featured-grid .speaker-card {
    width: 100%;
  }
  
  .learning-grid::-webkit-scrollbar,
  .audience-grid::-webkit-scrollbar,
  .speakers-grid::-webkit-scrollbar,
  .pricing-grid::-webkit-scrollbar {
    display: none;
  }

  .learning-grid article,
  .audience-grid article,
  .speakers-grid .speaker-card,
  .pricing-grid .pricing-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* =========================================================
   Financial Dawn — Thematic Section Backgrounds
   ========================================================= */

@keyframes gradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* .section-intro — dark night-sky to morning gradient; light text */
.section-intro:not(.hero) {
  background: linear-gradient(135deg, var(--deep-horizon-blue), #2a4a7f, var(--morning-sky));
  background-size: 200% 200%;
  animation: gradientDrift 14s ease infinite;
  color: var(--first-light);
}
.section-intro:not(.hero) .section-kicker {
  color: var(--golden-sunrise);
}
.section-intro:not(.hero) h2,
.section-intro:not(.hero) p,
.section-intro:not(.hero) span {
  color: var(--first-light);
}
.section-intro:not(.hero) .text-highlight {
  color: var(--golden-sunrise);
}

/* .section-educational — open dawn, light bg, dark text */
.section-educational {
  background: linear-gradient(135deg, var(--first-light), #ddeeff, var(--morning-sky));
  background-size: 200% 200%;
  animation: gradientDrift 18s ease infinite;
  color: var(--deep-horizon-blue);
}
.section-educational .section-kicker {
  color: var(--morning-sky);
}
.section-educational h2 {
  color: var(--deep-horizon-blue);
}
.section-educational .text-highlight {
  color: var(--coral-dawn);
}
.section-educational article {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(74,144,226,0.15);
}

/* .section-growth — energetic sunrise multi-color */
.section-growth {
  background: linear-gradient(135deg, var(--morning-sky), var(--golden-sunrise), var(--coral-dawn));
  background-size: 200% 200%;
  animation: gradientDrift 12s ease infinite;
  color: var(--first-light);
}
.section-growth .section-kicker {
  color: #fff3e0;
}
.section-growth h2 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(26,54,93,0.25);
}
.section-growth p {
  color: rgba(255,255,255,0.92);
}
.section-growth .text-highlight {
  color: var(--deep-horizon-blue);
}
.section-growth article {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.28);
}
.section-growth article h3,
.section-growth article p {
  color: #fff;
}

/* ── CTA & heading vibrancy ── */
.button-primary {
  background: var(--coral-dawn);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,126,103,0.38);
}
.button-primary:hover,
.button-primary:focus-visible {
  background: #ff6350;
  box-shadow: 0 12px 36px rgba(255,126,103,0.52);
}

.nav-cta-primary {
  border-color: var(--coral-dawn);
  background: var(--coral-dawn);
  color: #fff;
}
.nav-cta-primary:hover {
  background: #ff6350;
  border-color: #ff6350;
}

/* ── Missing base classes ── */

/* Hero background carousel */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-carousel-slide {
  position: absolute;
  inset: -1%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1200ms ease-in-out, transform 6500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.hero-carousel-slide.is-active {
  opacity: 1;
  transform: scale(1.05);
}

.hero-carousel-slide:nth-child(1) { background-color: var(--indigo-deep); }
.hero-carousel-slide:nth-child(2) { background-color: #1b2a4a; }
.hero-carousel-slide:nth-child(3) { background-color: #0f1632; }

/* Highlighted spans inside headings */
.text-highlight {
  color: var(--marigold);
}

/* Speaker card inner layout */
.speaker-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.speaker-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.speaker-divider {
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}

/* Belief band inherits section-growth nicely; ensure kicker stays readable */
.belief-band.section-growth .section-kicker {
  color: #fff3e0;
  opacity: 0.9;
}

/* Section growth / educational — article cards: use transparent bg so gradient shows,
   but keep enough contrast for text. Override the base #fff background. */
.section-growth .learning-grid article,
.section-growth .audience-grid article,
.section-growth .speaker-card {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}

.section-growth .learning-grid article h3,
.section-growth .learning-grid article p,
.section-growth .audience-grid article h3,
.section-growth .audience-grid article p,
.section-growth .speaker-card .speaker-name,
.section-growth .speaker-card .speaker-company,
.section-growth .speaker-card .speaker-bio {
  color: #fff;
}

.section-growth .speaker-card .speaker-designation {
  color: var(--deep-horizon-blue);
}

/* Featured cards keep their own deep-navy treatment instead of the
   translucent-white card the growth sections apply to every speaker. */
.section-growth .speaker-card--featured {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(242,179,48,0.16) 0%, transparent 58%),
    linear-gradient(140deg, #16213f 0%, #0d1730 100%);
  border-color: rgba(242,179,48,0.55);
  backdrop-filter: none;
}

.section-growth .speaker-card--featured .speaker-designation,
.section-growth .speaker-card--featured .speaker-company {
  color: rgba(255,253,248,0.78);
}

.section-educational .learning-grid article,
.section-educational .audience-grid article {
  background: rgba(255,255,255,0.82);
  border-color: rgba(74,144,226,0.18);
  backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────────────
   Section-specific overrides — readability corrections
   Must come after Financial Dawn block to win by cascade.
   ───────────────────────────────────────────────────────────── */

/* ── Benefits Strip ──────────────────────────────────────────
   The ::before mask fades to the original dark-indigo bg color.
   Applying an animated gradient breaks the edge fade — the mask
   and the gradient cycle out of sync, creating visible hard edges.
   Restore the standalone dark bg; strip the animation. */
.benefits-strip.section-intro {
  background: linear-gradient(100deg, #13265c 0%, #0f2255 50%, #0a3868 100%);
  animation: none;
}

/* ── Trust Strip ─────────────────────────────────────────────
   Small strip — animated gradient is distracting. Tone it down
   to the original teal-indigo blend. */
.trust-strip.section-intro {
  background: linear-gradient(100deg, var(--indigo) 0%, #162558 54%, #0d5856 100%);
  animation: none;
}

/* ── Pricing Section ─────────────────────────────────────────
   Designed for a dark-navy background: card borders, tier-label
   opacity, tier-amount and benefits list colours all assume near-
   black behind them. The warm section-growth gradient is far
   lighter and breaks all those opacity choices.
   Restore the original dark navy; turn off animation. */
.pricing-section.section-growth {
  background:
    radial-gradient(ellipse at 4% 18%, rgba(242,179,48,0.12) 0%, transparent 38%),
    radial-gradient(ellipse at 96% 80%, rgba(47,126,189,0.1) 0%, transparent 34%),
    linear-gradient(175deg, #0e1e4a 0%, #091838 55%, #060f2a 100%);
  color: #fffdf8;
  animation: none;
}

/* ── Disclaimer Section ──────────────────────────────────────
   Every text element inside disclaimer is hardcoded white /
   near-white (rgba(255,253,248,0.xx)). The section-educational
   animated light gradient makes ALL of that invisible.
   Restore the original dark-slate bg; turn off animation. */
.disclaimer-section.section-educational {
  background: linear-gradient(175deg, #0a1525 0%, #06101e 100%);
  color: rgba(255,253,248,0.78);
  animation: none;
}

/* ── Speaker Expertise Tags on section-growth ────────────────
   Original styling: teal text on teal-tinted bg. On the warm
   sunrise gradient (orange → coral) that teal becomes muddy and
   low-contrast. Replace with a white glass treatment. */
.section-growth .speaker-expertise-tag {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}

/* ── Mobile Swipe Hint on section-growth ─────────────────────
   Teal hint text on orange/coral gradient = unreadable. */
.section-growth .mobile-swipe-hint {
  color: rgba(255,255,255,0.8);
}

/* ── FAQ cards on section-educational ───────────────────────
   Boost card opacity slightly so they read cleanly against the
   animated gradient at all positions of its 18-second cycle. */
.section-educational .faq-item {
  background: rgba(255,255,255,0.9);
  border-color: rgba(74,144,226,0.14);
}

/* ── FAQ cta strip and group labels on section-educational ── */
.section-educational .faq-cta-strip {
  background: rgba(255,255,255,0.88);
}

.section-educational .faq-group-label {
  color: var(--deep-horizon-blue);
  border-bottom-color: rgba(26,54,93,0.14);
}

/* ── Agenda list borders on section-educational ─────────────
   Default `var(--line)` = rgba(0,0,0,0.08). On the animated
   light-blue gradient it nearly disappears. Use a more visible
   indigo-tinted border. */
.section-educational .agenda-item {
  border-color: rgba(26,54,93,0.14);
}

.section-educational details.agenda-item[open] .agenda-item-summary {
  border-bottom-color: rgba(26,54,93,0.12);
}

/* ── Sponsor tier divider lines on section-growth ───────────
   var(--line-md) = rgba(0,0,0,0.12) — barely visible on warm
   gradient. Use a white-alpha line instead. */
.section-growth .sponsor-tier-label::after {
  background: rgba(255,255,255,0.22);
}

/* ── Sponsor slot borders on section-growth ─────────────────
   Dashed dark border is invisible on warm bg. Use white-alpha. */
.section-growth .sponsor-slot {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.14);
}

.section-growth .sponsor-slot:hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.22);
}

.section-growth .sponsor-placeholder-label {
  color: rgba(255,255,255,0.6);
}

.section-growth .sponsor-placeholder-hint {
  color: rgba(255,255,255,0.4);
}

/* ── Sponsor cta strip on section-growth ────────────────────
   Restore legibility: near-white panel with dark text. */
.section-growth .sponsor-cta-strip {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.3);
}

.section-growth .sponsor-cta-strip strong {
  color: var(--indigo);
}

.section-growth .sponsor-cta-strip span {
  color: var(--muted);
}

/* ── Register band on section-growth ────────────────────────
   The register-inner p was set to var(--muted) originally.
   section-growth p overrides to white which is fine on warm bg —
   no fix needed. But the h2 Hindi text needs adequate weight. */
.register-band .section-kicker::before {
  background: rgba(255,255,255,0.55);
}

/* ── Disclaimer h2 colour fix ────────────────────────────────
   .section-educational h2 (0,1,1) overrides .disclaimer-header h2
   (0,1,1) because it comes later in the file and both have equal
   specificity. That makes the heading dark on a dark background.
   A compound selector wins cleanly. */
.disclaimer-section h2 {
  color: var(--marigold);
}

/* =========================================================
   Section reorder support · sticky CTA · exit-intent
   visual rhythm · responsiveness (all breakpoints)
   ========================================================= */

/* ── Anchor offset for the fixed header ──────────────────────
   Nav links (#learn #speakers #agenda #pricing #faq #partners)
   jump to sections; without this the fixed header hides the
   heading. */
:where(#learn, #speakers, #agenda, #pricing, #faq, #partners, #top) {
  scroll-margin-top: 84px;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Visual rhythm — break up consecutive same-theme sections ─
   After the reorder the growth-themed sections sit in pairs
   (Audience+Speakers, Sponsors+Final). Flip the gradient axis and
   reorder the stops so each neighbour reads distinctly instead of
   one long identical wash. */
.speakers-section.section-growth {
  background: linear-gradient(315deg, var(--coral-dawn), var(--golden-sunrise), var(--morning-sky));
  background-size: 200% 200%;
}
.final-cta.section-growth {
  background: linear-gradient(160deg, #ff6f5a, var(--golden-sunrise), var(--morning-sky));
  background-size: 220% 220%;
}
/* Soft seam between stacked sections so edges don't smear together. */
.section-growth + .section-growth,
.section-educational + .section-educational {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

/* ── Sticky CTA bar — premium, all breakpoints ───────────────
   Persistent conversion driver. Mobile-first: full-width split
   buttons. From 560px the event line shows. From 1080px it becomes
   a centred, detached "floating pill" so it reads as a deliberate
   premium element, not a browser chrome bar. Hidden until the
   visitor scrolls past the hero, auto-hides over the footer (JS),
   and fades out whenever a modal is open. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(242,179,48,0.10) 0%, transparent 46%),
    linear-gradient(180deg, #141f3f 0%, #0d1530 100%);
  background-color: #0e1733;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 -10px 40px rgba(6,11,28,0.55);
  transform: translateY(125%);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  pointer-events: none;
  opacity: 1;
}
/* Gold hairline along the top edge — the premium accent. */
.sticky-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(242,179,48,0.85) 50%, transparent 100%);
}
.sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
body.modal-open .sticky-cta {
  opacity: 0;
  pointer-events: none;
}

.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(100%, var(--container));
  margin-inline: auto;
}

.sticky-cta-text {
  display: none;
  min-width: 0;
  line-height: 1.25;
}
.sticky-cta-text strong {
  display: block;
  color: #fffdf8;
  font-family: serif;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta-text strong span {
  color: rgba(255,253,248,0.55);
  font-weight: 600;
}
.sticky-cta-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: rgba(255,253,248,0.72);
  font-size: 0.78rem;
  white-space: nowrap;
}
.sticky-cta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 0 3px rgba(242,179,48,0.2);
  flex: 0 0 auto;
}
.sticky-cta-urgency {
  display: none;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(242,179,48,0.14);
  border: 1px solid rgba(242,179,48,0.32);
  color: var(--marigold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sticky-cta-actions {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
}
.sticky-cta-actions .button {
  flex: 1 1 0;
  min-height: 48px;
  padding-inline: 14px;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* ── Exit-intent / drop-off modal ────────────────────────────
   Reuses the existing modal backdrop system; only the inner
   layout is bespoke. */
.intent-modal {
  max-width: 460px;
  text-align: center;
}
.intent-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 26px 28px;
}
.intent-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(242,179,48,0.16);
  border: 1px solid rgba(242,179,48,0.4);
  color: var(--marigold);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.intent-modal h2 {
  margin: 0;
  color: var(--indigo);
  font-family: serif;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  line-height: 1.2;
}
.intent-modal p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.intent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.intent-actions .button {
  width: 100%;
  min-height: 50px;
}
.intent-dismiss {
  margin-top: 2px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  /* The <=380px rule stretches .phone-otp-row button to 100%; this is a link. */
  width: auto;
  flex: none;
}
.intent-dismiss:hover {
  color: var(--ink);
}

/* ── Responsive: 380px — keep bar buttons tappable on tiny phones */
@media (max-width: 380px) {
  .sticky-cta {
    padding-inline: 10px;
  }
  .sticky-cta-actions {
    gap: 8px;
  }
  .sticky-cta-actions .button {
    font-size: 0.84rem;
    min-height: 46px;
    padding-inline: 8px;
  }
}

/* ── Responsive: 560px — reveal the event line, buttons shrink-wrap */
@media (min-width: 560px) {
  .sticky-cta-text {
    display: block;
  }
  .sticky-cta-actions {
    flex: 0 0 auto;
  }
  .sticky-cta-actions .button {
    flex: 0 0 auto;
    padding-inline: 24px;
  }
  .intent-actions {
    flex-direction: row;
  }
}

/* ── Responsive: 820px — larger event line, comfortable gutters */
@media (min-width: 820px) {
  .sticky-cta {
    padding-block: 13px;
  }
  .sticky-cta-text strong { font-size: 1.08rem; }
  .sticky-cta-meta { font-size: 0.82rem; }
  .sticky-cta-urgency { display: inline-block; }
}

/* ── Responsive: 1080px — detached, centred "floating pill" so the
   bar reads as a premium element rather than browser chrome. */
@media (min-width: 1080px) {
  .sticky-cta {
    left: 50%;
    right: auto;
    bottom: 24px;
    width: min(100% - 48px, 1080px);
    padding: 14px 16px 14px 28px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-xl);
    box-shadow:
      0 20px 50px rgba(6,11,28,0.55),
      0 2px 0 rgba(255,255,255,0.04) inset;
    transform: translate(-50%, 175%);
  }
  .sticky-cta::before {
    left: 28px;
    right: 28px;
    top: -1px;
  }
  .sticky-cta.is-visible {
    transform: translate(-50%, 0);
  }
  .sticky-cta-inner {
    width: 100%;
  }
  .sticky-cta-actions .button {
    min-height: 50px;
    padding-inline: 28px;
    font-size: 0.95rem;
  }
}

/* Reduced-motion: no slide, just fade. */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: opacity 200ms ease;
    transform: none;
  }
  .sticky-cta:not(.is-visible) {
    opacity: 0;
    pointer-events: none;
  }
  .sticky-cta.is-visible {
    transform: none;
  }
  @media (min-width: 1080px) {
    .sticky-cta,
    .sticky-cta.is-visible {
      transform: translateX(-50%);
    }
  }
}

/* ── Contact Us ──
   Enquiry contacts, ported from the VK Real Estate Awards page and
   restyled in this design system. Cards are <article> elements, so the
   band rules (.section-educational article / .section-growth article)
   supply their surface; the rules below only add the card's own
   layout and typography. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Columns are stepped explicitly rather than auto-fit: an address has to
   stay on one line, so a column may only narrow to a width that still
   fits the longest one at .contact-card-link--email's size. */
@media (min-width: 600px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1120px) {
  .contact-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.contact-card-role {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Two-line slot so the names line up across a row when one role wraps. */
@media (min-width: 600px) {
  .contact-card-role {
    min-height: 2.8em;
  }
}

.contact-card-name {
  margin: 0 0 14px;
  color: var(--indigo);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.contact-card-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  /* Addresses never break mid-word; ellipsis is only a spill guard. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sized so the longest address fits a 4-up column on one line. */
.contact-card-link--email {
  font-size: 0.74rem;
  letter-spacing: -0.005em;
}

@media (max-width: 1119px) {
  .contact-card-link--email {
    font-size: 0.85rem;
  }
}

/* Roomier tap targets on touch-sized screens. */
@media (max-width: 599px) {
  .contact-card {
    padding: 22px 18px;
  }
  .contact-card-link {
    padding: 9px 0;
  }
}

.contact-card-link svg {
  flex: 0 0 auto;
  color: var(--teal);
}

.contact-card-link:hover,
.contact-card-link:focus-visible {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: none) {
  .contact-card:hover {
    transform: none;
  }
}

.change-phone-btn[hidden] {
  display: none;
}

/* Verified state of the phone field.

   The badge is positioned absolutely rather than placed on the grid: an
   explicit grid-row/column would claim a cell and push the auto-placed input
   into the next row, which is what made this group float above the field.
   Absolute keeps it out of flow entirely, so it reads as a trailing adornment
   inside the input - the same box, height and baseline as every other field. */
.phone-otp-row {
  position: relative;
}

/* Send/Verify are hidden once verified, so the input takes the whole row. */
.phone-otp-row:has(.phone-verified-badge:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}

.phone-otp-row .phone-verified-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  gap: 8px;
  min-height: 0;
  margin: 0;
  color: #00763a;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phone-otp-row .phone-verified-badge[hidden] {
  display: none;
}

.phone-verified-badge .phone-verified-sep {
  width: 1px;
  height: 14px;
  background: rgba(34, 26, 22, 0.22);
}

.phone-otp-row .phone-verified-badge .phone-change-link {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--indigo);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  /* The <=380px rule stretches .phone-otp-row button to 100%; this is a link. */
  width: auto;
  flex: none;
}

.phone-otp-row .phone-verified-badge .phone-change-link:hover,
.phone-otp-row .phone-verified-badge .phone-change-link:focus-visible {
  background: none;
  color: var(--indigo-deep);
}

/* Verified number reads as a settled value, not a greyed-out dead field, and
   keeps clear of the adornment. */
.phone-otp-row:has(.phone-verified-badge:not([hidden])) input:disabled {
  border-style: solid;
  padding-right: 152px;
  color: var(--ink);
  font-weight: 700;
}

/* Checkout ticket picker: three selectable cards in place of a <select>. The
   native radio stays in the DOM for keyboard and form semantics but is visually
   replaced by the card next to it, which carries the selected state.

   Every rule is scoped to .registration-form on purpose. Two inherited rules
   would otherwise win on specificity and crush these cards:
     .registration-form label span  (0,1,1) - uppercases and wide-tracks EVERY
       span inside the label, so names and notes rendered as shouty 3-line
       blocks;
     .registration-form label       (0,1,1) - display:grid + gap:9px, which beat
       a bare .ticket-option (0,1,0) and added a row gap inside each card. */
.registration-form .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.registration-form .ticket-picker {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.registration-form .ticket-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.registration-form .ticket-option {
  position: relative;
  display: block;
  gap: 0;
  min-width: 0;
  cursor: pointer;
}

.registration-form .ticket-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.registration-form .ticket-option-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  padding: 16px 16px 17px;
  border: 1.5px solid rgba(34, 26, 22, 0.14);
  border-radius: 14px;
  background: #fff;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.registration-form .ticket-option:hover .ticket-option-card {
  border-color: rgba(35, 49, 95, 0.4);
}

.registration-form .ticket-option input:focus-visible + .ticket-option-card {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.registration-form .ticket-option input:checked + .ticket-option-card {
  border-color: var(--indigo);
  background: rgba(35, 49, 95, 0.04);
  box-shadow: inset 0 0 0 1px var(--indigo);
}

.registration-form .ticket-option-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
}

/* Reset the inherited uppercase/tracking for every line in the card. */
.registration-form .ticket-option-name,
.registration-form .ticket-option-price,
.registration-form .ticket-option-original,
.registration-form .ticket-option-note {
  letter-spacing: normal;
  text-transform: none;
}

.registration-form .ticket-option-name {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}

.registration-form .ticket-option-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(242, 179, 48, 0.9);
  color: var(--indigo-deep);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Selected tick sits at the end of the title row, so it never overlaps copy. */
.registration-form .ticket-option-check {
  display: flex;
  margin-left: auto;
  color: var(--indigo);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.registration-form .ticket-option input:checked + .ticket-option-card .ticket-option-check {
  opacity: 1;
}

.registration-form .ticket-option-prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.registration-form .ticket-option-price {
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.1;
}

.registration-form .ticket-option-original {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.registration-form .ticket-option-original[hidden] {
  display: none;
}

.registration-form .ticket-option-note {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Below this the three columns get too narrow to read, so each tier becomes a
   full-width row: title and price on one line, the note underneath. */
@media (max-width: 560px) {
  .registration-form .ticket-picker-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .registration-form .ticket-option-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 14px 16px;
  }

  .registration-form .ticket-option-prices {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .registration-form .ticket-option-note {
    grid-column: 1 / -1;
  }
}