/* ============================================================
   SMaRT Summit 2026 — Heritage-Modern Design System
   Palette: #193480 · #11259a · #e1ad55 · #ffffff · #fbf7ee
   Type: Montserrat throughout
   Band rhythm: cream → navy → cream → navy …
   ============================================================ */

:root {
  --navy: #193480;
  --navy-deep: #11259a;
  --navy-ink: #0c1a52;
  --navy-950: #08123c;
  --gold: #e1ad55;
  --gold-soft: #efd9a7;
  --gold-deep: #b98a2f;
  --white: #ffffff;
  --cream: #fbf7ee;
  --ink: #1c2440;
  --muted: #5a6486;

  --line-light: rgba(25, 52, 128, 0.14);
  --line-dark: rgba(255, 255, 255, 0.16);

  --font-display: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-gold: 0 18px 45px -18px rgba(225, 173, 85, 0.55);
  --shadow-navy: 0 24px 60px -24px rgba(8, 18, 60, 0.45);

  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
[hidden] { display: none !important; }

/* ---------- Utilities ---------- */
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--gold-deep);
}
.eyebrow::before { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow.centered::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.eyebrow.on-dark { color: var(--gold); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800; line-height: 1.16; letter-spacing: -0.02em;
  color: var(--navy-ink);
}
.section-title .gold { color: var(--gold-deep); }
.section-title.light { color: var(--white); }
.section-title.light .gold { color: var(--gold); }

/* "to be confirmed" / draft marker */
.tbc {
  display: inline-block; vertical-align: middle;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-right: 8px;
  border: 1px dashed rgba(185, 138, 47, 0.7); color: var(--gold-deep);
  background: rgba(225, 173, 85, 0.08);
  white-space: nowrap;
}
.who .tbc, .venue .tbc, .pillars .tbc {
  border-color: rgba(225, 173, 85, 0.6); color: var(--gold-soft);
  background: rgba(225, 173, 85, 0.1);
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAVIGATION — light cream bar, sticky, stays light on scroll
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 14px 0;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
}
.nav.scrolled {
  background: rgba(251, 247, 238, 0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(185, 138, 47, 0.28);
  box-shadow: 0 10px 30px -18px rgba(12, 26, 82, 0.35);
  padding: 8px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* the logo is a transparent PNG, so it sits straight on the cream — no white card */
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { height: 40px; width: auto; transition: height 0.35s ease; }
.nav.scrolled .brand-mark { height: 34px; }
.brand-tag {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; white-space: nowrap;
  border-left: 1px solid rgba(185, 138, 47, 0.45);
  padding-left: 13px; line-height: 1.55;
}

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy-ink);
  position: relative; padding: 4px 0; white-space: nowrap;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--gold-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-links a:hover { color: var(--gold-deep); }
.nav-links a:hover::after { transform: scaleX(1); }
/* Agenda dropdown — Day 1 / 2 / 3 */
.nav-group { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 13px; color: var(--navy-ink);
  transition: transform 0.25s ease, color 0.25s ease;
}
.nav-group:hover .sub-toggle, .nav-group.open .sub-toggle { color: var(--gold-deep); }
.nav-group.open .sub-toggle { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  min-width: 232px; padding: 8px;
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid rgba(185, 138, 47, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px -22px rgba(12, 26, 82, 0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-group:hover .submenu,
.nav-group:focus-within .submenu,
.nav-group.open .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.submenu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 9px;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  transition: background 0.2s ease;
}
.submenu a::after { display: none; }
.submenu a b {
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-ink);
}
.submenu a i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.submenu a:hover { background: rgba(225, 173, 85, 0.16); }
.submenu a:hover b { color: var(--gold-deep); }

.nav-links a.btn { padding: 12px 28px; letter-spacing: 0.1em; font-size: 12px; }
.nav-links a.btn::after { display: none; }
.nav-links a.btn:hover { color: var(--navy-950); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 17px 44px; border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, #f0c778, var(--gold) 55%, #c99638);
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -16px rgba(225, 173, 85, 0.7); }
.btn-outline { border: 1.5px solid rgba(255, 255, 255, 0.35); color: var(--white); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-soft); transform: translateY(-3px); }
.btn-nav { padding: 12px 32px; font-size: 12px; }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-cta-mobile { display: none; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; border-radius: 10px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--navy-ink); margin-inline: auto;
  transition: transform 0.3s ease, opacity 0.25s ease, background 0.3s ease;
}

/* ============================================================
   SECTION 1 — LOGO LOCKUP (cream / gold, premium)
   ============================================================ */
.logoband {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 380px at 50% -20%, rgba(225, 173, 85, 0.22), transparent 62%),
    linear-gradient(180deg, #fdfaf3 0%, var(--cream) 52%, #f6efe0 100%);
  padding: 132px 0 78px;
  text-align: center;
}
.logoband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(185, 138, 47, 0.22) 1.2px, transparent 1.3px);
  background-size: 30px 30px;
  mask-image: radial-gradient(640px 420px at 6% 8%, #000 0%, transparent 66%),
              radial-gradient(640px 420px at 94% 92%, #000 0%, transparent 66%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.logoband-arcs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.logoband-arcs svg { width: 100%; height: 100%; }
/* no z-index here: a stacking context would isolate the logo's multiply blend */
.logoband-inner { position: relative; }

.logoband-presenter {
  font-size: 12px; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.logoband-presenter::before, .logoband-presenter::after {
  content: ""; width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.presenter-mark { height: 34px; width: auto; flex: none; }
.logoband-presenter::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }

.logoband-mark { margin: 30px auto 0; width: min(430px, 74vw); }
/* the supplied logo PNG has an opaque white background — multiply drops it into the cream */
.logoband-mark img { width: 100%; height: auto; mix-blend-mode: multiply; }

.logoband-tagline {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--navy-ink);
}
.logoband-tagline em {
  font-style: normal;
  background: linear-gradient(120deg, #d8a53f 10%, var(--gold-deep) 55%, #a97b28 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.logoband-rule {
  width: 110px; height: 1px; margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.logoband-when {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy);
}
.lb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }
.logoband-edition {
  margin-top: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--muted);
}

/* ============================================================
   HERO (navy)
   ============================================================ */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1000px 500px at 88% -12%, rgba(225, 173, 85, 0.12), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-ink) 46%, var(--navy-deep) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(225, 173, 85, 0.2) 1.3px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(700px 460px at 10% 6%, #000 0%, transparent 68%),
              radial-gradient(640px 460px at 97% 96%, #000 0%, transparent 68%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  opacity: 0.75;
}
.hero-arcs { position: absolute; inset: 0; pointer-events: none; }
.hero-arcs svg { width: 100%; height: 100%; }

.hero-body {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center;
  padding: 118px 0 96px;
}
.hero-copy { max-width: 840px; margin-inline: auto; text-align: center; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.08; font-weight: 800; letter-spacing: -0.025em;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(120deg, #f3d489 10%, var(--gold) 55%, #c08c2e 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tagline {
  margin-top: 18px;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(239, 217, 167, 0.85);
}
.hero-desc {
  margin: 22px auto 0; max-width: 660px;
  color: rgba(255, 255, 255, 0.72); font-size: 16px; font-weight: 400;
}
.hero-ctas { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }

.hero-meta {
  margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.78);
}
.meta-item { display: inline-flex; align-items: center; gap: 9px; }
.meta-item svg { width: 16px; height: 16px; stroke: var(--gold); flex: none; }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(225, 173, 85, 0.55); }

/* ============================================================
   SECTION 6 — STATS (cream band, sits under the agenda)
   ============================================================ */
.stats {
  position: relative; background: var(--cream);
  padding: 74px 0 70px; overflow: hidden;
  border-top: 1px solid rgba(185, 138, 47, 0.3);
  border-bottom: 1px solid rgba(185, 138, 47, 0.3);
}
.stats::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(185, 138, 47, 0.2) 1.2px, transparent 1.3px);
  background-size: 30px 30px;
  mask-image: radial-gradient(700px 260px at 50% 50%, #000 0%, transparent 72%);
}
.stats .container { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { text-align: center; padding: 6px 10px; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 46px; width: 1px; background: rgba(185, 138, 47, 0.4);
}
.stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px); color: var(--gold-deep);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat-cap {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-top: 6px;
}

/* ============================================================
   SPLIT SECTION HEAD (shared)
   ============================================================ */
.s-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 56px; margin-bottom: 58px;
}
.s-head .section-title { margin-top: 16px; max-width: 560px; }
.s-lede { max-width: 400px; font-size: 15.5px; color: var(--muted); padding-bottom: 6px; }
.s-lede strong { color: var(--navy); }
.who .s-lede, .venue .s-lede, .speakers .s-lede, .pillars .s-lede { color: rgba(255, 255, 255, 0.68); }
.who .s-lede strong, .venue .s-lede strong { color: var(--gold-soft); }

.scroll-hint {
  display: none; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: rgba(25, 52, 128, 0.45);
}
.scroll-hint span { width: 26px; height: 1px; background: var(--gold); }
.speakers .scroll-hint { color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   SECTION 3 — WHO WILL BE IN THE ROOM (cream)
   ============================================================ */
.room {
  position: relative; background: var(--cream);
  padding: 118px 0 108px; overflow: hidden;
}
.room::before, .agenda::before, .stats::before, .info::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(25, 52, 128, 0.10) 1.2px, transparent 1.3px);
  background-size: 30px 30px;
  mask-image: radial-gradient(600px 420px at 97% 5%, #000 0%, transparent 64%),
              radial-gradient(560px 400px at 2% 98%, #000 0%, transparent 62%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.room::after, .info::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M-120 760 Q 720 460 1560 700' fill='none' stroke='%23193480' stroke-opacity='0.04' stroke-width='1.5'/%3E%3Cpath d='M-120 830 Q 720 540 1560 780' fill='none' stroke='%23193480' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -180px bottom -160px;
  background-size: 1000px 620px;
}
.room .container, .agenda .container, .info .container { position: relative; z-index: 1; }

.room-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(25, 52, 128, 0.28);
  font-size: 13.5px; font-weight: 600; color: var(--navy-ink);
  background: rgba(255, 255, 255, 0.45); cursor: default;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.chip:hover {
  background: var(--navy-ink); color: var(--gold-soft);
  border-color: var(--navy-ink); transform: translateY(-2px);
}
.chip-hero {
  border-color: var(--gold-deep); color: var(--navy-950); font-weight: 800;
  background: linear-gradient(135deg, #f5dda9, #efd9a7);
  box-shadow: 0 10px 26px -14px rgba(185, 138, 47, 0.9);
}
.chip-hero:hover { background: var(--gold); color: var(--navy-950); border-color: var(--gold); }

/* Four-format strip */
.expect-strip {
  display: flex; margin-top: 66px;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.expect-item {
  flex: 1; min-width: 0;
  padding: 36px 28px 34px;
  border-left: 1px solid var(--line-light);
  transition: background 0.35s ease;
}
.expect-item:first-child { border-left: none; }
.expect-icon { font-size: 30px; color: var(--gold-deep); transition: color 0.35s ease; }
.expect-item h3 {
  margin-top: 16px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--navy-ink); transition: color 0.35s ease;
}
.expect-item p { margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--muted); transition: color 0.35s ease; }
.expect-item:hover { background: var(--navy-ink); }
.expect-item:hover h3 { color: var(--white); }
.expect-item:hover p { color: rgba(255, 255, 255, 0.72); }
.expect-item:hover .expect-icon { color: var(--gold); }

/* ============================================================
   SECTION 4 — WHO ARE WE (navy)
   ============================================================ */
.who {
  position: relative; color: var(--white); overflow: hidden;
  padding: 118px 0 108px;
  background:
    radial-gradient(900px 480px at 6% -8%, rgba(225, 173, 85, 0.10), transparent 60%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-ink) 58%, var(--navy) 132%);
}
.who::before, .venue::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(225, 173, 85, 0.16) 1.2px, transparent 1.3px);
  background-size: 32px 32px;
  mask-image: radial-gradient(620px 420px at 98% 6%, #000 0%, transparent 64%),
              radial-gradient(560px 400px at 0% 96%, #000 0%, transparent 62%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.who .container, .venue .container { position: relative; z-index: 1; }

/* the positioning line and the link out sit side by side, filling the width the
   three-card strip used to hold */
.who-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: end; gap: 56px;
  padding-bottom: 44px; border-bottom: 1px solid var(--line-dark);
}
.who-lede {
  max-width: 760px; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}
.who-more {
  padding-left: 26px; border-left: 1px solid rgba(225, 173, 85, 0.35);
  font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.6);
}
.who-more a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  color: var(--gold); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(225, 173, 85, 0.4);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.who-more a svg { width: 14px; height: 14px; stroke: currentColor; flex: none; }
.who-more a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

.who-strip {
  display: flex;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.who-item {
  flex: 1; min-width: 0;
  padding: 34px 28px 32px;
  border-left: 1px solid var(--line-dark);
  transition: background 0.35s ease;
}
.who-item:first-child { border-left: none; }
.who-item:hover { background: rgba(225, 173, 85, 0.07); }
.who-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 46px; }
.who-num { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: rgba(239, 217, 167, 0.45); }
.who-icon { font-size: 28px; color: var(--gold); }
.who-item h3 { font-size: 16.5px; font-weight: 800; color: var(--white); margin-bottom: 9px; letter-spacing: -0.01em; }
.who-item p { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); }

/* --- Creator network visual --- */
.network { margin-top: 74px; }
.network-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line-dark);
}
.network-head h3 {
  margin-top: 14px; font-size: clamp(19px, 2.3vw, 26px); font-weight: 800;
  color: var(--white); letter-spacing: -0.015em; line-height: 1.25;
}
.network-note { max-width: 320px; font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.55); }

.network-graphic { margin-top: 8px; }
.network-graphic svg { width: 100%; height: auto; display: block; overflow: visible; }
.net-core-t1 { fill: var(--gold); font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: 0.02em; }
.net-core-t2 { fill: rgba(255, 255, 255, 0.6); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.net-node circle { fill: var(--navy-950); stroke: var(--gold); stroke-opacity: 0.55; stroke-width: 1.2; transition: fill 0.3s ease, stroke-opacity 0.3s ease; }
.net-node text { fill: rgba(255, 255, 255, 0.82); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.net-node .net-count { fill: rgba(239, 217, 167, 0.55); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; }
.net-node:hover circle { fill: var(--gold); stroke-opacity: 1; }

.network-legend {
  margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line-dark);
  display: flex; align-items: flex-start; gap: 34px; flex-wrap: wrap;
}
.legend-label {
  flex: none; padding-top: 6px; max-width: 220px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
}
.legend-langs { display: flex; flex-wrap: wrap; gap: 9px; }
/* the chips are the no-JS fallback; once the graphic renders they would duplicate it */
.network.graphic-ready .legend-langs { display: none; }
.network-reach { display: none; font-size: 13.5px; color: rgba(255, 255, 255, 0.68); padding-top: 5px; }
.network.graphic-ready .network-reach { display: block; }
.legend-langs span {
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.78);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.legend-langs span:hover { border-color: var(--gold); color: var(--gold-soft); }

/* ============================================================
   SECTION 7 — THE FOUR PILLARS (navy)
   ============================================================ */
.pillars {
  position: relative; color: var(--white); overflow: hidden;
  padding: 118px 0 108px;
  background:
    radial-gradient(900px 480px at 92% -8%, rgba(225, 173, 85, 0.10), transparent 60%),
    linear-gradient(170deg, var(--navy-950) 0%, var(--navy-ink) 55%, var(--navy) 130%);
}
.pillars::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(225, 173, 85, 0.16) 1.2px, transparent 1.3px);
  background-size: 32px 32px;
  mask-image: radial-gradient(620px 420px at 3% 4%, #000 0%, transparent 64%),
              radial-gradient(560px 400px at 98% 97%, #000 0%, transparent 62%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.pillars .container { position: relative; z-index: 1; }
.pillars .s-lede { color: rgba(255, 255, 255, 0.68); }

.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pillar-card {
  display: flex; flex-direction: column;
  padding: 32px 32px 30px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.pillar-card:hover {
  border-color: rgba(225, 173, 85, 0.45);
  background: rgba(225, 173, 85, 0.05);
  transform: translateY(-3px);
}
.pillar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pillar-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; color: var(--white);
  white-space: nowrap; flex: none;
}
.tag-1 { background: #8a5a1f; }
.tag-2 { background: #1f5f3a; }
.tag-3 { background: #6d1f28; }
.tag-4 { background: var(--navy); }
.pillar-day {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(239, 217, 167, 0.65); white-space: nowrap;
}
.pillar-icon { font-size: 34px; color: var(--gold); margin-bottom: 16px; }
.pillar-card h3 {
  font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--white);
}
.pillar-sub {
  margin-top: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.55;
  color: rgba(239, 217, 167, 0.8);
}
.pillar-body { margin-top: 16px; font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, 0.7); }

/* Collapsed by default so every card keeps the same shape. JS measures against this
   clamp and adds .no-clamp to the cards whose copy already fits. */
.pillar-copy { position: relative; overflow: hidden; max-height: 200px; transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.pillar-copy::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 78px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 26, 82, 0), rgba(12, 26, 82, 0.94));
  opacity: 1; transition: opacity 0.35s ease;
}
.pillar-card.expanded .pillar-copy { max-height: 1600px; }
.pillar-card.expanded .pillar-copy::after { opacity: 0; }
.pillar-card.no-clamp .pillar-copy { max-height: none; }
.pillar-card.no-clamp .pillar-copy::after { display: none; }

.read-more {
  align-self: flex-start; margin-top: 14px; padding: 8px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(225, 173, 85, 0.5); border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.read-more::after { content: "\002B"; font-size: 13px; line-height: 1; }
.pillar-card.expanded .read-more::after { content: "\2212"; }
.read-more:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.pillar-pull {
  margin-top: 20px;
  font-size: clamp(15px, 1.7vw, 17.5px); font-weight: 800; line-height: 1.4;
  letter-spacing: -0.01em; color: var(--gold);
}
.pillar-pull sup { font-size: 0.6em; }

/* the five domains of warfare — Pillar 4 */
.domains {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
  padding: 16px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
}
.domains li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
}
.domains li iconify-icon { font-size: 15px; }
.domains li.on { color: var(--navy-950); background: var(--gold); border-color: var(--gold); }

.voices { margin-top: auto; padding-top: 22px; }
.voices-label {
  display: inline-block; margin-bottom: 14px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--navy-950); background: var(--gold); padding: 5px 14px; border-radius: 999px;
}
.voices ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.voices li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.72);
}
.voices li iconify-icon { font-size: 17px; color: var(--gold); flex: none; }

/* carousel controls — only shown once the grid becomes a swipe track */
.pillar-nav { display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.pillar-arrow {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.3); color: var(--white); font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.pillar-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.pillar-arrow:disabled { opacity: 0.3; pointer-events: none; }
.pillar-dots { display: flex; align-items: center; gap: 9px; }
.pillar-dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.3s ease, width 0.3s ease;
}
.pillar-dots button.on { background: var(--gold); width: 24px; border-radius: 999px; }

/* ============================================================
   COUNTDOWN BAND (cream)
   ============================================================ */
.cdband {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, #fdfaf3 0%, var(--cream) 55%, #f6efe0 100%);
  border-top: 1px solid rgba(185, 138, 47, 0.3);
  border-bottom: 1px solid rgba(185, 138, 47, 0.3);
}
.cdband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(185, 138, 47, 0.22) 1.2px, transparent 1.3px);
  background-size: 30px 30px;
  mask-image: radial-gradient(700px 300px at 18% 50%, #000 0%, transparent 70%);
}
.cdband-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  padding: 44px 0;
}
.cdband-left h3 {
  margin-top: 14px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800;
  letter-spacing: -0.015em; color: var(--navy-ink); line-height: 1.25;
}
.countdown { display: flex; align-items: baseline; gap: 20px; flex: none; }
.cd-unit { display: flex; align-items: baseline; gap: 8px; }
.cd-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1;
  color: var(--gold-deep); font-variant-numeric: tabular-nums;
  min-width: 2ch; display: inline-block;
}
.cd-cap {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.cd-sep { width: 1px; height: 26px; background: rgba(185, 138, 47, 0.45); align-self: center; }

/* ============================================================
   SECTION 5 — AGENDA (cream): Day → Pillar → Session → Speakers
   ============================================================ */
.agenda { position: relative; background: var(--cream); padding: 118px 0 108px; overflow: hidden; }

.day-tabs {
  display: flex;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.day-tab {
  flex: 1; min-width: 0; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 24px 26px;
  border-left: 1px solid var(--line-light);
  text-align: left; position: relative;
  transition: background 0.3s ease;
}
.day-tab:first-child { border-left: none; }
.day-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--gold-deep);
  transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.day-tab .d-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(25, 52, 128, 0.4); transition: color 0.3s ease;
}
.day-tab .d-date {
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 800; letter-spacing: -0.015em;
  color: var(--navy-ink); line-height: 1.2;
}
.day-tab .d-pillar {
  font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.4;
}
.day-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -3px; }
.day-tab:hover { background: rgba(255, 255, 255, 0.6); }
.day-tab.active { background: rgba(225, 173, 85, 0.1); }
.day-tab.active .d-num { color: var(--gold-deep); }
.day-tab.active::after { transform: scaleX(1); }

.day-panel { padding-top: 8px; }
.day-panel.switching { opacity: 0; transform: translateY(10px); }
.day-panel { transition: opacity 0.3s ease, transform 0.3s ease; }

.day-anchor {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; margin-top: 22px;
  border: 1px solid rgba(185, 138, 47, 0.4);
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, rgba(225, 173, 85, 0.14), rgba(225, 173, 85, 0.04));
}
.day-anchor-icon { font-size: 28px; color: var(--gold-deep); flex: none; }
.day-anchor-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-deep);
}
.day-anchor-name { font-size: 15.5px; font-weight: 800; color: var(--navy-ink); margin-top: 2px; }
.day-anchor-name span { font-weight: 500; color: var(--muted); }
.day-count {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

.ses-list { margin-top: 8px; border-top: 1px solid var(--line-light); }
.ses {
  display: grid; grid-template-columns: 168px 1fr; gap: 28px;
  padding: 28px 16px 28px 4px;
  border-bottom: 1px solid var(--line-light);
  position: relative;
  transition: background 0.3s ease;
}
.ses:hover { background: rgba(255, 255, 255, 0.65); }
.ses::before {
  content: ""; position: absolute; left: -4px; top: 0; bottom: 0; width: 2px;
  background: var(--gold); transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ses:hover::before { transform: scaleY(1); }

.ses-when { padding-top: 3px; }
.ses-t {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--navy-ink); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ses-t.tbc-time { color: var(--gold-deep); letter-spacing: 0.1em; }
.ses-t2 {
  display: block; margin-top: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(90, 100, 134, 0.8);
}

.ses-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 8px;
}
.ses-body h3 {
  font-size: 17.5px; font-weight: 800; line-height: 1.35;
  color: var(--navy-ink); letter-spacing: -0.012em;
}
.ses-sub { margin-top: 5px; font-size: 13.5px; font-style: italic; color: var(--muted); }

.ses-type {
  display: inline-block; margin-top: 12px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.ses-type.keynote { color: var(--gold-deep); border: 1px solid rgba(185, 138, 47, 0.55); }
.ses-type.panel   { color: var(--navy); border: 1px solid rgba(25, 52, 128, 0.35); }
.ses-type.perf    { color: #7a5aa8; border: 1px solid rgba(122, 90, 168, 0.4); }
.ses-type.address { color: #2f7a63; border: 1px solid rgba(47, 122, 99, 0.4); }
.ses-type.launch  { color: #a85a3c; border: 1px solid rgba(168, 90, 60, 0.4); }

.ses-people {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px 26px;
}
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  flex: none; position: relative; overflow: hidden;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(185, 138, 47, 0.6);
  background: rgba(225, 173, 85, 0.1);
  color: var(--gold-deep); font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-ph { border-style: dashed; font-size: 18px; }
.person.is-tbc .avatar { border-style: dashed; opacity: 0.75; }
.person-txt { min-width: 0; display: flex; flex-direction: column; }
.p-name { font-size: 14px; font-weight: 700; color: var(--navy-ink); line-height: 1.35; }
.p-role { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 1px; }
.person.is-tbc .p-name { color: var(--muted); }

.ses-note {
  margin-top: 16px; font-size: 12px; line-height: 1.6;
  color: rgba(90, 100, 134, 0.9);
}

/* ============================================================
   SPEAKERS (navy)
   ============================================================ */
.speakers {
  position: relative; color: var(--white); overflow: hidden;
  padding: 118px 0 100px;
  background:
    radial-gradient(900px 480px at 4% -8%, rgba(225, 173, 85, 0.09), transparent 60%),
    linear-gradient(165deg, var(--navy-950) 0%, var(--navy-ink) 60%, var(--navy) 135%);
}
.speakers::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(225, 173, 85, 0.16) 1.2px, transparent 1.3px);
  background-size: 32px 32px;
  mask-image: radial-gradient(600px 420px at 98% 4%, #000 0%, transparent 64%);
}
.speakers .container, .speakers-wrap { position: relative; z-index: 1; }

.speakers-track {
  display: flex; position: relative;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px max(24px, calc((100vw - var(--container)) / 2)) 14px;
  cursor: grab;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.speakers-track::-webkit-scrollbar { display: none; }
.speakers-track.dragging { cursor: grabbing; scroll-snap-type: none; }

.speaker {
  flex: 0 0 206px; scroll-snap-align: start;
  text-align: center;
  padding: 36px 16px 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.35s ease;
}
.speaker:first-child { border-left: none; }
.speaker:hover { background: rgba(225, 173, 85, 0.06); }

.speaker-medal {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 94px; height: 94px; border-radius: 50%;
  border: 1.5px solid rgba(225, 173, 85, 0.65);
  color: var(--gold); font-size: 26px; font-weight: 800; letter-spacing: 0.04em;
  margin-bottom: 18px;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}
.speaker-medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.speaker:hover .speaker-medal {
  border-color: var(--gold); transform: translateY(-4px);
  background: var(--gold); color: var(--navy-950);
}
.speaker:hover .speaker-medal:has(img) { background: transparent; }
.speaker.is-tbc .speaker-medal { border-style: dashed; opacity: 0.8; }

.speaker h3 { font-size: 14.5px; font-weight: 700; color: var(--white); line-height: 1.35; }
.spk-role { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }
.spk-group {
  margin-top: 8px; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(239, 217, 167, 0.55);
}
.spk-tbc {
  display: inline-block; margin-top: 9px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(239, 217, 167, 0.65);
  border: 1px dashed rgba(225, 173, 85, 0.45); border-radius: 999px; padding: 3px 9px;
}

.speakers-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.speakers-foot .scroll-hint { display: flex; margin-top: 0; }
.sessions-nav { display: flex; gap: 12px; }
.session-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white); font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.session-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); transform: translateY(-2px); }
.session-arrow:disabled { opacity: 0.3; pointer-events: none; }

/* ============================================================
   SECTION 2 — VENUE (cream)
   ============================================================ */
.venue {
  position: relative; color: var(--white); overflow: hidden;
  padding: 118px 0 108px;
  background:
    radial-gradient(900px 480px at 96% -6%, rgba(225, 173, 85, 0.10), transparent 60%),
    linear-gradient(165deg, var(--navy-950) 0%, var(--navy-ink) 60%, var(--navy) 135%);
}

.venue-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: stretch; }
.venue-facts { border-top: 1px solid var(--line-dark); }
.venue-fact {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line-dark);
  transition: padding-left 0.3s ease;
}
.venue-fact:hover { padding-left: 14px; }
.venue-icon { font-size: 24px; color: var(--gold); flex: none; }
.venue-fact h3 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(239, 217, 167, 0.65); margin-bottom: 4px;
}
.venue-fact p { font-size: 15.5px; font-weight: 600; color: var(--white); }

.venue-map {
  border: 1px solid rgba(225, 173, 85, 0.4);
  border-radius: var(--radius-lg);
  overflow: hidden; min-height: 400px;
  box-shadow: var(--shadow-navy);
}
.venue-map iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; filter: grayscale(0.25) contrast(1.02); }

/* ============================================================
   SECTION 8 — LOGISTICS, FAQs (cream)
   ============================================================ */
.info { position: relative; background: var(--cream); padding: 118px 0 110px; overflow: hidden; }

.logistics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.log-card {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: 28px 28px 26px;
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.log-card:hover { border-color: rgba(185, 138, 47, 0.55); background: rgba(255, 255, 255, 0.9); transform: translateY(-3px); }
.log-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.log-icon { font-size: 28px; color: var(--gold-deep); }
.log-card h3 { font-size: 17px; font-weight: 800; color: var(--navy-ink); letter-spacing: -0.01em; margin-bottom: 10px; }
.log-card p { font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.log-card strong { color: var(--navy); font-weight: 800; }

.faq-list { margin-top: 58px; border-top: 1px solid var(--line-light); }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 4px; text-align: left;
  font-size: 16px; font-weight: 700; color: var(--navy-ink); letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.faq-q:hover { color: var(--gold-deep); }
.faq-q iconify-icon {
  flex: none; font-size: 19px; color: var(--gold-deep);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-q iconify-icon { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-a > p {
  overflow: hidden; min-height: 0;
  font-size: 14.5px; line-height: 1.75; color: var(--muted);
  padding-right: 60px;
}
.faq-a a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq-item.open .faq-a { grid-template-rows: 1fr; padding-bottom: 24px; }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.cta {
  position: relative;
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(225, 173, 85, 0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-ink) 50%, var(--navy-deep) 100%);
  color: var(--white);
  overflow: hidden;
  border-top: 1px solid rgba(225, 173, 85, 0.18);
}
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(225, 173, 85, 0.18) 1.2px, transparent 1.3px);
  background-size: 32px 32px;
  mask-image: radial-gradient(700px 420px at 50% 0%, #000 0%, transparent 66%);
}
.cta-inner { position: relative; z-index: 1; text-align: center; padding: 120px 0 104px; }
.cta-inner .eyebrow { justify-content: center; }
.cta-inner h2 {
  margin-top: 22px;
  font-size: clamp(32px, 4.8vw, 58px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
}
.cta-inner h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #f3d489 10%, var(--gold) 55%, #c08c2e 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-sub { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, 0.65); }
.cta-actions { margin-top: 38px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.footer { position: relative; z-index: 1; border-top: 1px solid rgba(225, 173, 85, 0.22); }
.footer-inner {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px;
  padding: 56px 0 44px;
}
/* The footer carries the white lockup, so it sits straight on the navy —
   the cream plate and its shadow existed only to give the colour logo a
   light surface to stand on. Restore them if the colour logo ever returns. */
.footer-brand .brand-badge {
  display: inline-flex; align-items: center;
  background: none; border-radius: 0; padding: 0; box-shadow: none;
}
.footer-brand .brand-badge img { height: 62px; width: auto; }
.footer-brand p { margin-top: 10px; max-width: 380px; font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, 0.6); }
.footer-col h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.footer-col a {
  display: block; padding: 5px 0; font-size: 14px; color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s ease;
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-social { display: flex; align-items: center; gap: 12px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 18px; color: var(--white); padding: 0;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-950); }
.footer-handles { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.footer-handles a {
  display: inline-block; width: fit-content; padding: 0;
  font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 700;
  transition: color 0.25s ease;
}
.footer-handles a:hover { color: var(--gold-soft); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px; color: rgba(255, 255, 255, 0.5);
}
.footer-bar a { font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.footer-bar a:hover { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ============================================================
   FEEDBACK ROUND 2 — Sept 2026
   Hero de-duplication · trimmed Room label · speakers grid ·
   go-live placeholders · India map stage
   ============================================================ */

/* ---------- Siddhanta mark, enlarged (anniversary line removed) ---------- */
.logoband-presenter { gap: 20px; font-size: 12.5px; }
.presenter-mark { height: 62px; width: auto; flex: none; }
.logoband-mark { margin-top: 26px; }

/* ---------- Room: one short bold label, chips do the talking ---------- */
.room { padding: 92px 0 88px; }
.room-label {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800; letter-spacing: -0.015em;
  color: var(--navy-ink);
  text-align: center;
}
.room-label::after {
  content: ""; display: block; width: 54px; height: 2px; margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}


/* ---------- Separate the two back-to-back navy bands ---------- */
.speakers { border-top: 1px solid rgba(225, 173, 85, 0.28); }

/* ---------- Speakers: grid, not carousel ---------- */
.speakers-wrap { margin-top: 54px; }
.speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.speakers-grid .speaker {
  flex: none; scroll-snap-align: none;
  border-left: none;
  background: var(--navy-ink);
  padding: 34px 14px 28px;
}
.speakers-grid .speaker:first-child { border-left: none; }

/* ---------- Go-live placeholders (speakers + agenda) ---------- */
.reveal-panel {
  position: relative; z-index: 1;
  margin-top: 54px; padding: 58px 40px 52px;
  text-align: center;
  border: 1px dashed rgba(225, 173, 85, 0.5);
  border-radius: var(--radius-lg);
  background: rgba(225, 173, 85, 0.05);
}
.agenda .reveal-panel {
  border-color: rgba(185, 138, 47, 0.5);
  background: rgba(185, 138, 47, 0.05);
}
.reveal-panel-icon { font-size: 40px; color: var(--gold); }
.agenda .reveal-panel-icon { color: var(--gold-deep); }
.reveal-panel h3 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.18;
  color: var(--white);
}
.agenda .reveal-panel h3 { color: var(--navy-ink); }
.reveal-panel p {
  margin: 16px auto 0; max-width: 560px;
  font-size: 14.5px; line-height: 1.72; color: rgba(255, 255, 255, 0.68);
}
.agenda .reveal-panel p { color: var(--muted); }
.reveal-panel p a { color: var(--gold); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(225, 173, 85, 0.4); }
.agenda .reveal-panel p a { color: var(--gold-deep); }
.reveal-panel-cta { margin-top: 28px; }

/* ---------- Three-day preview strip (stands in for the day tabs) ---------- */
.day-preview {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 26px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md); overflow: hidden;
}
.day-prev {
  display: flex; flex-direction: column; gap: 7px;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 0.6);
}
.dp-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
}
.dp-date { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy-ink); }
.dp-pillar { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- India map stage — background art + overlaid figures ---------- */





.mf-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--gold);
}
.mf-num em { font-style: normal; font-size: 0.62em; margin-left: 2px; }
.mf-cap {
  display: block; margin-top: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.55; color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   FEEDBACK ROUND 3 — Sept 2026
   Minimal section 1 · marquee room · two-column India map
   ============================================================ */

/* ---------- Section 1: centred Siddhanta mark over a plain "— Presents —" ---------- */
.logoband-presenter {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  letter-spacing: normal;
}
.logoband-presenter::before, .logoband-presenter::after { content: none; }
.presenter-mark { height: 104px; width: auto; flex: none; }
.presenter-word {
  display: flex; align-items: center; gap: 16px;
  font-size: 11.5px; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700;
}
.presenter-word::before, .presenter-word::after {
  content: ""; width: 48px; height: 1px; background: var(--gold-deep); opacity: 0.55;
}
.logoband-mark { margin-top: 34px; }
.logoband-tagline { margin-bottom: 8px; }

/* ---------- Section 4: two marquee rows, opposite directions ---------- */
.marquee {
  position: relative; z-index: 1;
  margin-top: 44px;
  width: 100vw; margin-left: calc(50% - 50vw);
  display: flex; flex-direction: column; gap: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.mq-row { overflow: hidden; }
.mq-track { display: flex; width: max-content; will-change: transform; }
.mq-group { display: flex; gap: 14px; padding-right: 14px; }
.mq-track .chip { white-space: nowrap; flex: none; }

@keyframes mq-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-25%,0,0); } }
.mq-ltr { animation: mq-slide 58s linear infinite; }
.mq-rtl { animation: mq-slide 66s linear infinite reverse; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .mq-group[aria-hidden="true"] { display: none; }
  .mq-group { flex-wrap: wrap; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; width: auto; margin-left: 0; }
}

/* ---------- Section 6: India map beside the figures ---------- */
.map-stage {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center; gap: 44px;
  margin-top: 30px;
}
/* map-2026.png is exported trimmed to its own bounds, so no negative-margin
   crop is needed — unlike the previous asset, which carried ~11% transparent
   margin at the top and ~6% at the bottom. Re-instate the crop only if a
   future export brings that dead space back. */
.map-art {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(66% 52% at 50% 48%, rgba(225, 173, 85, 0.14), transparent 72%);
}
.map-art img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 40px rgba(8, 18, 60, 0.6));
}

.map-side { display: flex; flex-direction: column; gap: 30px; }
.map-figures { display: grid; gap: 22px; }
.map-fig {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 18px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line-dark);
}
.map-fig:last-child { border-bottom: none; padding-bottom: 0; }
.mf-num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 56px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 0.95;
  color: var(--gold);
}
.mf-num em { font-style: normal; font-size: 0.55em; margin-left: 2px; vertical-align: super; }
.mf-cap {
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  line-height: 1.6; color: rgba(255, 255, 255, 0.74);
}
.map-langs { display: flex; flex-direction: column; gap: 12px; }


/* ============================================================
   FEEDBACK ROUND 5 — Sept 2026
   Sections 1 + 2 merged into one cream hero. The SMaRT logo is
   composited with mix-blend-mode: multiply, so this block must
   stay on a light background — see .logoband-mark img.
   ============================================================ */

.logoband { padding: 128px 0 92px; }

/* divider between the identity lockup and the event block */
.lb-split {
  width: 64px; height: 1px; margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

/* date · venue · free entry, on cream */
.hero-meta {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 18px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--ink);
}
.meta-item { display: inline-flex; align-items: center; gap: 9px; }
.meta-item svg { width: 17px; height: 17px; stroke: var(--gold-deep); flex: none; }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(185, 138, 47, 0.65); flex: none; }

.hero-ctas {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center;
}
/* outline button needs a dark-on-light variant now that it sits on cream */
.btn-outline-light { border-color: rgba(25, 52, 128, 0.35); color: var(--navy-ink); }
.btn-outline-light:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* Countdown flips to navy: the hero above it is now cream, and cream-on-cream
   would flatten the two bands into one. */
.cdband {
  background:
    radial-gradient(800px 340px at 18% 50%, rgba(225, 173, 85, 0.12), transparent 62%),
    linear-gradient(100deg, var(--navy-950) 0%, var(--navy-ink) 60%, var(--navy) 130%);
  border-top: none;
  border-bottom: 1px solid rgba(225, 173, 85, 0.25);
}
.cdband::before {
  background-image: radial-gradient(rgba(225, 173, 85, 0.16) 1.2px, transparent 1.3px);
}
.cdband .eyebrow { color: var(--gold); }
.cdband-left h3 { color: var(--white); }
.cdband .cd-num { color: var(--gold); }
.cdband .cd-cap { color: rgba(255, 255, 255, 0.6); }
.cdband .cd-sep { background: rgba(225, 173, 85, 0.35); }

/* Centred section heads (Speakers, Agenda) once their ledes are removed */
.s-head-centered {
  display: block; text-align: center;
  margin-bottom: 46px;
}
.s-head-centered .s-head-left { max-width: none; }
.s-head-centered .eyebrow { justify-content: center; }
.s-head-centered .section-title { max-width: none; margin-inline: auto; }

@media (max-width: 1240px) {
  .brand-tag { display: none; }
}
@media (max-width: 1120px) {
  .nav-links { gap: 17px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.06em; }
  .nav-links a.btn { padding: 11px 22px; }
}

@media (max-width: 1020px) {
  .s-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 44px; }
  .s-lede { max-width: 620px; padding-bottom: 0; }

  /* stacked, the four cards run very long — swipe through them instead */
  .pillar-grid {
    display: flex; gap: 16px; align-items: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: -24px; padding: 4px 24px 6px;
    scroll-padding-left: 24px;
  }
  .pillar-grid::-webkit-scrollbar { display: none; }
  .pillar-card { flex: 0 0 min(88%, 520px); scroll-snap-align: start; }
  .pillar-nav { display: flex; }

  .logistics { grid-template-columns: 1fr; }
  .venue-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }

  .cdband-inner { flex-direction: column; align-items: flex-start; gap: 26px; }

  .network-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .network-note { max-width: 620px; }
}

@media (max-width: 900px) {
  .stats .container { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .stat:nth-child(4)::before { display: none; }
  .stats { padding: 60px 0 56px; }

  .ses { grid-template-columns: 1fr; gap: 14px; }
  .ses-when { display: flex; align-items: baseline; gap: 10px; padding-top: 0; }
  .ses-t { font-size: 17px; }
  .ses-t2 { margin-top: 0; }

  .day-tabs { flex-direction: column; }
  .day-tab { border-left: none; border-top: 1px solid var(--line-light); padding: 18px 20px; }
  .day-tab:first-child { border-top: none; }
  .day-tab::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: scaleY(0); }
  .day-tab.active::after { transform: scaleY(1); }
}

@media (max-width: 860px) {
  /* backdrop-filter would trap the fixed menu inside the header — use solid bg on mobile */
  .nav.scrolled { backdrop-filter: none; background: var(--cream); }
  .nav-cta-mobile { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 24px; padding: 90px 40px;
    background: linear-gradient(200deg, #fdfaf3, var(--cream) 60%, #f4ecdb);
    border-left: 1px solid rgba(185, 138, 47, 0.35);
    transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -20px 0 60px rgba(12, 26, 82, 0.28);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 15px; }

  /* the dropdown becomes an inline accordion inside the drawer */
  /* DOM order (link, toggle, submenu) is already right — the toggle is pulled out
     of flow, so no `order` juggling; an order rule here put the days above Agenda. */
  .nav-group { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .sub-toggle {
    position: absolute; top: 0; right: 0; width: 34px; height: 26px; font-size: 16px;
  }
  .submenu {
    position: static; transform: none; min-width: 0; width: 100%;
    padding: 0; margin: 0; border: none; box-shadow: none; background: none;
    display: flex; flex-direction: column;
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0; overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .submenu::before { display: none; }
  .nav-group:hover .submenu, .nav-group:focus-within .submenu { transform: none; max-height: 0; }
  .nav-group.open .submenu,
  .nav-group.open:hover .submenu,
  .nav-group.open:focus-within .submenu { max-height: 260px; transform: none; }
  .submenu > a:first-child { margin-top: 14px; }
  .nav-group .submenu a { padding: 9px 0 9px 14px; border-left: 1px solid rgba(185, 138, 47, 0.4); border-radius: 0; }
  .nav-group .submenu a b { font-size: 12.5px; }
  .nav-links .btn { margin-top: 8px; }
  .nav-toggle { display: flex; z-index: 110; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .scroll-hint { display: flex; }

  .expect-strip, .who-strip {
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: -24px; padding-inline: 24px;
  }
  .expect-strip::-webkit-scrollbar, .who-strip::-webkit-scrollbar { display: none; }
  .expect-item { flex: 0 0 230px; scroll-snap-align: start; }
  .who-item { flex: 0 0 262px; scroll-snap-align: start; }
  .who-top { margin-bottom: 32px; }

  .speaker { flex-basis: 176px; padding: 30px 12px 26px; }
  .speaker-medal { width: 80px; height: 80px; font-size: 22px; }

  .day-anchor { flex-wrap: wrap; gap: 14px; }
  .day-count { margin-left: 0; width: 100%; }

  .ses-people { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  .stat::before { display: none !important; }
  .stat:nth-child(odd)::after {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    height: 40px; width: 1px; background: rgba(225, 173, 85, 0.25);
  }
  .stat:last-child { grid-column: 1 / -1; }
  .stat:last-child::after { display: none; }
}

@media (max-width: 620px) {
  .container { width: calc(100% - 36px); }
  .logoband { padding: 122px 0 62px; }
  .logoband-presenter { font-size: 10.5px; letter-spacing: 0.32em; gap: 10px; }
  .logoband-presenter::before, .logoband-presenter::after { width: 28px; }
  .logoband-when { gap: 10px; font-size: 11px; letter-spacing: 0.16em; }
  .hero-body { padding: 84px 0 72px; }

  .room, .who, .agenda, .speakers, .pillars, .venue, .info { padding: 82px 0 74px; }
  .cta-inner { padding: 92px 0 80px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .cta-actions .btn { width: 100%; max-width: 320px; }
  .faq-a > p { padding-right: 8px; }

  .expect-strip { margin-top: 46px; }
  .network { margin-top: 54px; }
  .log-card { padding: 24px 22px; }
  .day-anchor { padding: 18px 18px; }
  .ses { padding: 24px 8px 24px 4px; }
}

@media (max-width: 620px) {
  /* four inline units overflow a phone — stack the caption under each number */
  .cdband-inner { padding: 34px 0; }
  .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
  .cd-sep { display: none; }
  .cd-unit { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cd-num { font-size: 30px; min-width: 0; }
  .cd-cap { font-size: 9px; letter-spacing: 0.16em; }
}

@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; max-width: 320px; }
  .hero-meta { gap: 12px; }
  .meta-dot { display: none; }
  .legend-langs span { font-size: 11.5px; padding: 6px 13px; }
}


/* ---------- Feedback round 2 — responsive ---------- */
@media (max-width: 1020px) {
  .map-stage { min-height: 400px; }
  .speakers-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 860px) {
  .presenter-mark { height: 50px; }
  .day-preview { grid-template-columns: 1fr; }
  .reveal-panel { padding: 46px 26px 42px; }
  .speakers-grid .speaker { padding: 30px 12px 26px; }
}
@media (max-width: 620px) {
  .presenter-mark { height: 42px; }
  .logoband-presenter { gap: 14px; font-size: 11px; letter-spacing: 0.3em; }
  .map-stage { min-height: 320px; }
  .map-figures { grid-template-columns: 1fr; }
  .map-fig { padding: 20px 20px 18px; }
  .speakers-grid { grid-template-columns: repeat(2, 1fr); }
  .room-label::after { margin-top: 14px; }
}
@media (max-width: 420px) {
  .speakers-grid { grid-template-columns: 1fr; }
}

/* ---------- Nav mark takes the space the anniversary tag left ---------- */
.brand-mark { height: 52px; }
.nav.scrolled .brand-mark { height: 42px; }
@media (max-width: 860px) { .brand-mark { height: 44px; } .nav.scrolled .brand-mark { height: 38px; } }
@media (max-width: 620px) { .brand-mark { height: 38px; } .nav.scrolled .brand-mark { height: 34px; } }

/* ---------- Logo-band date/venue stacks cleanly on small screens ---------- */
@media (max-width: 620px) {
  .logoband-when { flex-direction: column; gap: 8px; }
  .lb-dot { display: none; }
}

/* ---------- Feedback round 3 — responsive ---------- */
@media (max-width: 1020px) {
  .map-stage { gap: 34px; }
  .presenter-mark { height: 92px; }
}
@media (max-width: 860px) {
  .map-stage { grid-template-columns: 1fr; gap: 30px; }
  .map-art { max-width: 420px; margin-inline: auto; }
  .map-fig { gap: 14px; padding-bottom: 16px; }
  .presenter-mark { height: 80px; }
  .marquee { margin-top: 34px; gap: 12px; }
  .mq-ltr { animation-duration: 40s; }
  .mq-rtl { animation-duration: 46s; }
}
@media (max-width: 620px) {
  .presenter-mark { height: 68px; }
  .presenter-word { font-size: 10.5px; letter-spacing: 0.34em; gap: 12px; }
  .presenter-word::before, .presenter-word::after { width: 32px; }
  .logoband-mark { margin-top: 26px; }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                     mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .mq-track .chip { font-size: 12.5px; padding: 9px 16px; }
  .mq-ltr { animation-duration: 30s; }
  .mq-rtl { animation-duration: 35s; }
  .map-art { max-width: 300px; }
  .mf-num { font-size: 40px; }
}

/* ---------- Hero meta line: stack on small screens, separators off ---------- */
@media (max-width: 720px) {
  .hero-meta { gap: 12px; font-size: 13px; }
}
@media (max-width: 560px) {
  /* stacked: left-align the three items to each other, centre the block as a whole
     so the icons form a clean column instead of each row centring on its own */
  .hero-meta {
    flex-direction: column; align-items: flex-start;
    width: max-content; max-width: 100%; margin: 28px auto 0;
    gap: 12px;
  }
  .hero-meta .meta-dot { display: none; }
  .hero-ctas { margin-top: 26px; }
}

/* ---------- Round 5 — responsive ---------- */
@media (max-width: 860px) {
  .logoband { padding: 118px 0 74px; }
  .hero-meta { gap: 10px 16px; font-size: 13px; }
}
@media (max-width: 560px) {
  .logoband { padding: 112px 0 62px; }
  .lb-split { margin-top: 24px; }
  /* stacked: left-align the three items to each other, centre the block as a whole */
  .hero-meta {
    flex-direction: column; align-items: flex-start;
    width: max-content; max-width: 100%; margin: 26px auto 0;
    gap: 12px;
  }
  .hero-meta .meta-dot { display: none; }
  .hero-ctas { margin-top: 26px; flex-direction: column; align-items: stretch; }
  .s-head-centered { margin-bottom: 34px; }
}

/* ---------- Round 7 — Who We Are intro, responsive ---------- */
@media (max-width: 860px) {
  .who-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 34px; }
  .who-more { padding-left: 0; padding-top: 20px; border-left: none; border-top: 1px solid rgba(225, 173, 85, 0.3); }
}

/* ============================================================
   REGISTRATION MODAL (Fluent Forms, form id 3)
   Overlay #register holds .rm-panel. Every "Register Now" link on
   the page points at #register, so the :target rule below still
   opens it if the script fails to load.
   ============================================================ */
body.smart-summit-lp .register-modal {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  padding: 28px 20px;
  align-items: center; justify-content: center;
  background: rgba(6, 12, 40, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto; overscroll-behavior: contain;
}
body.smart-summit-lp .register-modal.is-open,
body.smart-summit-lp .register-modal:target { display: flex; }

/* fade/scale in, unless the visitor asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  body.smart-summit-lp .register-modal { animation: rmFade 0.22s ease both; }
  body.smart-summit-lp .register-modal .rm-panel { animation: rmRise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmRise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

/* the panel */
body.smart-summit-lp .register-modal .rm-panel {
  position: relative;
  /* nowrap matters: Elementor sets --flex-wrap:wrap on containers at its
     mobile breakpoint, which would wrap the form into a second column
     beside the heading once the panel hits its max-height */
  display: flex; flex-direction: column; flex-wrap: nowrap;
  width: min(760px, 100%);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  margin: auto;
  /* the form scrolls, not the panel, so the heading and the close button
     stay put however long the form gets */
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf8 0%, var(--cream) 100%);
  border: 1px solid rgba(185, 138, 47, 0.4);
  border-radius: var(--radius-lg);
  padding: 44px 46px 40px;
  box-shadow: 0 50px 110px -40px rgba(2, 6, 28, 0.85);
}
body.smart-summit-lp .register-modal .rm-panel:focus { outline: none; }
body.smart-summit-lp .register-modal .rm-panel > .elementor-widget-html { flex: 0 0 auto; }
body.smart-summit-lp .register-modal .rm-form {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* a hairline marks where the pinned heading ends and the scroll starts,
     so a half-scrolled field reads as scrolled rather than clipped */
  border-top: 1px solid rgba(185, 138, 47, 0.28);
  padding: 22px 8px 0 0; margin-right: -8px;
}

/* close button */
body.smart-summit-lp .register-modal .rm-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(25, 52, 128, 0.16); border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); color: var(--navy-ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body.smart-summit-lp .register-modal .rm-close svg { width: 17px; height: 17px; display: block; }
body.smart-summit-lp .register-modal .rm-close:hover {
  background: var(--gold); border-color: var(--gold-deep);
  color: var(--navy-950); transform: rotate(90deg);
}
body.smart-summit-lp .register-modal .rm-close:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* panel heading */
body.smart-summit-lp .register-modal .rm-head { text-align: center; margin-bottom: 22px; padding-right: 28px; padding-left: 28px; }
body.smart-summit-lp .register-modal .rm-head .eyebrow { justify-content: center; }
body.smart-summit-lp .register-modal .rm-head .section-title { margin-top: 12px; font-size: clamp(26px, 3.4vw, 36px); }
body.smart-summit-lp .register-modal .rm-lede {
  margin: 14px auto 0; max-width: 460px;
  font-size: 14px; line-height: 1.7; color: var(--muted);
}

/* page behind the modal must not scroll while it is open */
body.smart-summit-lp.register-modal-open {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}

/* ---------- Fluent Forms, dressed in the Summit palette ---------- */
body.smart-summit-lp .register-modal .fluentform {
  --fluentform-primary: #b98a2f;
  --fluentform-secondary: #1c2440;
  --fluentform-danger: #b3271a;
  --fluentform-border-color: rgba(25, 52, 128, 0.18);
  --fluentform-border-radius: 12px;
  --fluentform-input-select-height: auto;
}

body.smart-summit-lp .register-modal .fluentform { font-family: var(--font-body); }
body.smart-summit-lp .register-modal .fluentform form { margin: 0; }
body.smart-summit-lp .register-modal .ff-el-group { margin-bottom: 22px; }
body.smart-summit-lp .register-modal .ff-el-group:last-of-type { margin-bottom: 0; }
body.smart-summit-lp .register-modal .ff-t-container { display: flex; gap: 20px; margin: 0; }
body.smart-summit-lp .register-modal .ff-t-cell { flex: 1 1 0; min-width: 0; padding: 0; }
body.smart-summit-lp .register-modal .ff-t-cell .ff-el-group { margin-bottom: 22px; }

body.smart-summit-lp .register-modal .ff-el-input--label { margin-bottom: 8px; }
body.smart-summit-lp .register-modal .ff-el-input--label label {
  display: inline-block; margin: 0; line-height: 1.5;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy-ink);
}
body.smart-summit-lp .register-modal .ff-el-is-required label:after { color: var(--gold-deep); font-weight: 800; }

body.smart-summit-lp .register-modal .ff-el-form-control {
  display: block; width: 100%; height: auto; min-height: 0;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500; line-height: 1.45;
  color: var(--navy-ink); background-color: #fff;
  border: 1px solid rgba(25, 52, 128, 0.18); border-radius: 12px;
  padding: 14px 16px; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.smart-summit-lp .register-modal select.ff-el-form-control {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 17px;
}
body.smart-summit-lp .register-modal .ff-el-form-control::placeholder { color: rgba(90, 100, 134, 0.6); font-weight: 400; }
body.smart-summit-lp .register-modal .ff-el-form-control:hover { border-color: rgba(25, 52, 128, 0.3); }
body.smart-summit-lp .register-modal .ff-el-form-control:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(225, 173, 85, 0.22);
}

/* radios rendered as selectable pills */
body.smart-summit-lp .register-modal .ff_list_inline .ff-el-input--content {
  display: flex; flex-wrap: wrap; gap: 10px;
}
body.smart-summit-lp .register-modal .ff-el-form-check { display: inline-flex; align-items: stretch; margin: 0; padding: 0; }
body.smart-summit-lp .register-modal .ff-el-form-check label.ff-el-form-check-label {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px;
  flex: 1 1 auto; margin: 0; cursor: pointer;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(25, 52, 128, 0.2); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.smart-summit-lp .register-modal .ff-el-form-check label.ff-el-form-check-label:hover { border-color: var(--gold); }
body.smart-summit-lp .register-modal .ff-el-form-check-input {
  position: static; top: auto;
  width: 16px; height: 16px; margin: 0; flex: none;
  accent-color: var(--gold-deep);
}
body.smart-summit-lp .register-modal .ff-el-form-check label.ff-el-form-check-label:has(input:checked) {
  border-color: var(--gold-deep); background: rgba(225, 173, 85, 0.18);
  color: var(--navy-ink); font-weight: 700;
  box-shadow: 0 0 0 3px rgba(225, 173, 85, 0.15);
}
body.smart-summit-lp .register-modal .ff-el-form-check-input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* help text, validation */
body.smart-summit-lp .register-modal .ff-el-help-message {
  margin-top: 7px; font-size: 12px; line-height: 1.6; color: var(--muted);
}
body.smart-summit-lp .register-modal .error,
body.smart-summit-lp .register-modal .text-danger {
  color: #b3271a; font-size: 12.5px; font-weight: 600; margin-top: 6px;
}
body.smart-summit-lp .register-modal .ff-el-is-error .ff-el-form-control { border-color: #b3271a; }
body.smart-summit-lp .register-modal .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 4px rgba(179, 39, 26, 0.16); }

/* submit */
body.smart-summit-lp .register-modal .ff_submit_btn_wrapper { margin-top: 32px; text-align: center; }
body.smart-summit-lp .register-modal .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 17px 52px; border-radius: 999px;
  background: linear-gradient(135deg, #f0c778, var(--gold) 55%, #c99638);
  color: var(--navy-950);
  box-shadow: var(--shadow-gold);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.smart-summit-lp .register-modal .ff-btn-submit:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -16px rgba(225, 173, 85, 0.7); }
body.smart-summit-lp .register-modal .ff-btn-submit:focus-visible { outline: 2px solid var(--navy-ink); outline-offset: 3px; }

/* confirmation + error summary */
body.smart-summit-lp .register-modal .ff-message-success,
body.smart-summit-lp .register-modal .ff_form_success {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(185, 138, 47, 0.42); border-radius: var(--radius-md);
  padding: 24px 26px; color: var(--navy-ink);
  font-size: 15px; line-height: 1.75; text-align: center;
}
body.smart-summit-lp .register-modal .ff-errors-in-stack .error {
  background: rgba(179, 39, 26, 0.08); border-radius: 10px; padding: 10px 14px; margin-top: 10px;
}

@media (max-height: 700px) {
  body.smart-summit-lp .register-modal .rm-panel { padding-top: 30px; padding-bottom: 26px; }
  body.smart-summit-lp .register-modal .rm-head { margin-bottom: 16px; }
  body.smart-summit-lp .register-modal .rm-lede { display: none; }
}
@media (max-width: 900px) {
  body.smart-summit-lp .register-modal .rm-panel { padding: 38px 34px 34px; }
}
@media (max-width: 720px) {
  body.smart-summit-lp .register-modal { padding: 14px 12px; }
  body.smart-summit-lp .register-modal .rm-panel {
    width: 100%; max-height: calc(100dvh - 28px);
    padding: 30px 20px 26px; border-radius: var(--radius-md);
  }
  body.smart-summit-lp .register-modal .rm-head { margin-bottom: 18px; padding-inline: 22px; }
  body.smart-summit-lp .register-modal .rm-lede { font-size: 13.5px; }
  body.smart-summit-lp .register-modal .rm-close { top: 12px; right: 12px; }
  body.smart-summit-lp .register-modal .ff-t-container { flex-direction: column; gap: 0; }
  body.smart-summit-lp .register-modal .ff-t-cell { flex-basis: auto !important; width: 100% !important; }
  body.smart-summit-lp .register-modal .ff-el-form-control { font-size: 16px; padding: 13px 15px; }  /* 16px stops iOS zoom-on-focus */
  body.smart-summit-lp .register-modal .ff-el-form-check { flex: 1 1 calc(50% - 5px); }
  body.smart-summit-lp .register-modal .ff-el-form-check label.ff-el-form-check-label { width: 100%; justify-content: center; }
  body.smart-summit-lp .register-modal .ff-btn-submit { width: 100%; padding: 17px 24px; }
}

/* ============================================================
   ELEMENTOR + THEME INTEGRATION
   Appended for the WordPress build. This file is enqueued only on
   the SMaRT Summit landing page, so nothing below affects the rest
   of the site. It strips Elementor's container chrome so the design's
   own section rules above stay in charge of layout and spacing.
   ============================================================ */

/* --- Elementor container reset: no default padding, gap or max-width --- */
body.smart-summit-lp .e-con,
body.smart-summit-lp .e-con-inner {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --width: 100%;
  --content-width: 100%;
  --min-height: 0px;
  max-width: 100%;
  align-items: stretch;
}

/* Widgets are plain blocks inside our sections — no Elementor spacing */
body.smart-summit-lp .elementor-widget,
body.smart-summit-lp .elementor-widget:not(:last-child) { margin-bottom: 0; }
body.smart-summit-lp .elementor-widget-html,
body.smart-summit-lp .elementor-widget-html > .elementor-widget-container { width: 100%; }

/* --- Theme chrome ---------------------------------------------------
   The design ships its own fixed navbar and its own footer. Twenty
   Twenty-Three's header would sit underneath the fixed bar and its
   footer would stack below ours, so both are hidden on this page only.
   Delete this block to bring the theme header/footer back.
   -------------------------------------------------------------------- */
body.smart-summit-lp > header,
body.smart-summit-lp > footer,
body.smart-summit-lp .wp-site-blocks > header,
body.smart-summit-lp .wp-site-blocks > footer,
body.smart-summit-lp header.wp-block-template-part,
body.smart-summit-lp footer.wp-block-template-part,
body.smart-summit-lp #page > #header,
body.smart-summit-lp #page > #footer,
body.smart-summit-lp #page > hr { display: none !important; }

body.smart-summit-lp #page { max-width: none; width: 100%; margin: 0; padding: 0; }

/* Block-theme wrappers must not constrain or pad our full-bleed sections */
body.smart-summit-lp .wp-site-blocks,
body.smart-summit-lp .wp-site-blocks > main,
body.smart-summit-lp .is-layout-constrained,
body.smart-summit-lp .entry-content,
body.smart-summit-lp .site-content,
body.smart-summit-lp #content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.smart-summit-lp .wp-site-blocks > * { margin-block-start: 0 !important; }

/* WordPress admin bar: keep the fixed navbar clear of it */
body.smart-summit-lp.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  body.smart-summit-lp.admin-bar .nav { top: 46px; }
}

/* --- Icons ----------------------------------------------------------
   The <iconify-icon> web component has been replaced with real inline SVG
   at build time, so the icons render instantly, need no JavaScript and make
   no call to a remote icon API. These rules mirror the iconify-icon rules
   above so every existing size/colour declaration still applies.
   -------------------------------------------------------------------- */
.ss-icon {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -0.125em; fill: currentColor; flex: none;
}
.domains li .ss-icon { font-size: 15px; }
.voices li .ss-icon { font-size: 17px; color: var(--gold); flex: none; }
.faq-q .ss-icon {
  flex: none; font-size: 19px; color: var(--gold-deep);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-q .ss-icon { transform: rotate(45deg); }

/* Belt-and-braces: never let a wide child scroll the whole page sideways */
body.smart-summit-lp { overflow-x: hidden; }
body.smart-summit-lp .e-con > .elementor-element { max-width: 100%; }

/* ============================================================
   FIX — desktop header height / hero logo overlap
   ------------------------------------------------------------
   Elementor's frontend stylesheet carries `.elementor img { height: auto }`
   at specificity (0,1,1), which outranks this file's single-class image
   rules `.brand-mark` and `.presenter-mark` at (0,1,0). Both logos therefore
   dropped their fixed heights and were sized by whatever flex width was left
   over instead: the navbar grew to ~155px tall and, being position:fixed,
   covered the top of the Siddhanta lockup in the hero.

   Restating the design's own desktop values at a higher specificity is the
   whole fix. Scoped to Elementor's Desktop breakpoint (>1024px) so the
   tablet and mobile rendering stays exactly as it is.
   ============================================================ */
@media (min-width: 1025px) {
  body.smart-summit-lp .nav .brand-mark { height: 52px; width: auto; }
  body.smart-summit-lp .nav.scrolled .brand-mark { height: 42px; }
  body.smart-summit-lp .logoband .presenter-mark { height: 104px; width: auto; }
}


/* ============================================================
   FIX — hero presenter mark — mobile only
   ------------------------------------------------------------
   Below 1025px the design's `.presenter-mark` (0,1,0) still loses to
   Elementor's `.elementor img { height: auto }` (0,1,1), so the Siddhanta
   lockup renders at its intrinsic 188px — roughly half the width of a
   phone screen. Restate a smaller height at a specificity that wins,
   scoped to Elementor's Mobile breakpoint (<=767px) so Desktop (the
   min-width:1025px block above) and Tablet are untouched.
   ============================================================ */
@media (max-width: 767px) {
  body.smart-summit-lp .logoband .presenter-mark { height: 150px; width: auto; }
}


/* ============================================================
   FIX — mobile layout, round 2 (<=767px = Elementor's Mobile breakpoint)
   ------------------------------------------------------------
   Reported from an iPhone, but every one of these reproduces in a
   Chromium mobile viewport as well: they are Elementor-vs-design cascade
   collisions and flex-alignment defaults, not WebKit bugs. Applied to all
   mobile browsers so phones agree with each other. Desktop (>1024px) and
   Tablet (768-1024px) are deliberately untouched.
   ============================================================ */
@media (max-width: 767px) {

  /* 1 — Hero presenter mark, one step smaller again (was 130px). */
  body.smart-summit-lp .logoband .presenter-mark { height: 110px; width: auto; }

  /* 2 — Hero CTAs. The column carries align-items:stretch while each button
         has max-width:320px, so both buttons parked against the left edge and
         the leftover width collected on the right. */
  body.smart-summit-lp .hero-ctas { align-items: center; }

  /* 3 — Countdown band. Centre the copy and each of the four units so the row
         sits with equal air on both sides instead of hugging the left rail. */
  body.smart-summit-lp .cdband-inner { align-items: center; text-align: center; }
  body.smart-summit-lp .cdband-left { width: 100%; }
  body.smart-summit-lp .cdband-left .eyebrow { justify-content: center; }
  body.smart-summit-lp .cd-unit { align-items: center; }

  /* 4 — Map artwork. `.map-art { margin-inline: auto }` loses to Elementor's
         `.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }`
         at (0,4,1), so the map sat hard left in its single 1fr track. Centre it
         with `justify-self` instead of out-escalating that selector — the grid
         alignment property is one Elementor's reset never touches. */
  body.smart-summit-lp .map-stage .map-art { justify-self: center; }

  /* 5 — Final CTA event line: date, venue and city each on their own row.
         The eyebrow is an inline-flex, so switching it to a column puts every
         span on its own line and turns the two gold rules into a top and
         bottom rule. The separators are dropped. */
  body.smart-summit-lp .cta-inner .eyebrow { flex-direction: column; gap: 10px; line-height: 1.5; }
  body.smart-summit-lp .cta-inner .eyebrow .ev-sep { display: none; }
}