:root {
  --bg: #0b0b0f;
  --fg: #f3f4f6;
  --muted: #a7adbb;
  --accent: #e5b80b;
  --accent-2: #6ee7b7;
  --bronze-1: #cd7f32;
  --green-1: #35c59a;
  --scrim: 0.35;
  --brand-offset: 60px; /* legacy var */
  --brand-height: clamp(78px, 14vw, 154px); /* reduced ~30% to prevent overlap */
  /* reserved space for bottom UI (toolbar + progress) */
  --bottom-ui: calc(env(safe-area-inset-bottom, 0px) + 116px);
  /* tier accents */
  --gold-1: #e5b80b;
  --gold-2: #f6e27a;
  --gold-3: #8a6f00;
  --silver-1: #cfd8dc;
  --teal-1: #6ee7b7;
  /* global type scale reducer */
  --type-scale: 0.78;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

#deck { position: relative; width: 100vw; height: 100vh; }

/* Ultra‑wide containment: keep the visual composition from stretching endlessly.
   We cap the effective content width and add a subtle side vignette. */
@media (min-aspect-ratio: 21/9) and (min-width: 1600px) {
  #deck::before, #deck::after {
    content: '';
    position: fixed; top: 0; bottom: 0; width: max(0px, (100vw - 1600px) / 2);
    pointer-events: none; z-index: 800;
    background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  }
  #deck::before { left: 0; }
  #deck::after { right: 0; transform: scaleX(-1); }
  .slide { background-size: 1600px auto; background-position: center 44%; }
}

.slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  /* Globally center the background for a balanced desktop composition. */
  background-position: center center; background-size: cover; background-repeat: no-repeat;
  transition: background-image 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out;
}

/* Zoom background on slide 1 by ~30% */
[data-slide="s1"] { background-size: 130%; }
@media (min-width: 901px) {
  /* On larger screens, slightly favor the upper frame for most photos */
  .slide { background-position: center 44%; }
  /* Then fine-tune slide 1 further */
  [data-slide="s1"] { background-position: center 38%; }
}

.scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.58), rgba(0,0,0,0.72)); opacity: var(--scrim); }
/* Futuristic transition overlay */
.slide::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(229,184,11,0.08), transparent 40%),
              radial-gradient(120% 80% at 100% 100%, rgba(110,231,183,0.06), transparent 40%),
              linear-gradient(120deg, rgba(255,255,255,0.06), transparent 40%);
  mix-blend-mode: screen;
  opacity: 0; pointer-events: none; /* disabled by default */
  transform: translateZ(0);
}

.slide[data-entering="true"] { opacity: 0.01; transform: translateY(12px) scale(0.98); }
.slide[data-entering="true"] .content { opacity: 0; transform: translateY(10px) scale(0.985); }
.slide[data-entering="true"]::after { opacity: 0.0; }

.slide[data-active="true"] { opacity: 1; transform: translateY(0) scale(1); transition: transform 360ms cubic-bezier(.2,.65,.2,1), opacity 360ms ease-out; }
.slide[data-active="true"] .content { opacity: 1; transform: translateY(0) scale(1); transition: transform 360ms cubic-bezier(.2,.65,.2,1), opacity 360ms ease-out; }
.slide[data-active="true"]::after { opacity: 0; transition: opacity 400ms ease; }

.slide[data-leaving="true"] { opacity: 0; transform: translateY(-8px) scale(0.995); transition: transform 260ms ease-in, opacity 260ms ease-in; }
.slide[data-leaving="true"] .content { opacity: 0.2; transform: translateY(-6px) scale(0.992); transition: transform 260ms ease-in, opacity 200ms ease-in; }
.slide[data-leaving="true"]::after { opacity: 0; transition: opacity 220ms ease-in; }

.content {
  position: relative; z-index: 1;
  width: min(1200px, 88vw);
  padding: clamp(16px, 4vw, 48px);
  max-height: calc(100vh - 140px);
  overflow: auto;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.35);
  will-change: transform, opacity;
}

/* Vertical scroll affordance */
.content[data-scrollable="true"]::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55));
  pointer-events: none; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  opacity: 1; transition: opacity 200ms ease;
}
.content[data-scrollable="true"][data-at-bottom="true"]::before { opacity: 0; }
.content[data-scrollable="true"]::after {
  content: 'Scroll ↓';
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 10px; padding: 4px 8px; font-size: 12px; letter-spacing: 0.02em;
  color: var(--fg); opacity: 0.9; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
}
.content[data-scrollable="true"][data-at-bottom="true"]::after { opacity: 0; transform: translateX(-50%) translateY(6px); }
.content[data-scrollable="true"][data-scrolled="true"]::after { opacity: 0; transform: translateX(-50%) translateY(6px); }

/* Disable scroll affordance overlays globally (remove dark fade and pill) */
.content[data-scrollable="true"]::before,
.content[data-scrollable="true"]::after { display: none !important; content: none !important; }
.content::before,
.content::after { display: none !important; content: none !important; }

/* Two-step edge navigation glow: shows when armed via data-arm */
.content[data-arm="bottom"]::after,
.content[data-arm="top"]::before {
  display: block !important;
}
.content::before,
.content::after {
  pointer-events: none;
}
.content::before { /* top glow container, off by default */
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 22px; border-top-left-radius: inherit; border-top-right-radius: inherit;
  background: linear-gradient(180deg, rgba(246,226,122,0.85), rgba(229,184,11,0.0));
  box-shadow: 0 -6px 22px rgba(229,184,11,0.45);
  filter: blur(3px);
  opacity: 0; transition: opacity 220ms ease;
}
.content::after { /* bottom glow container, off by default */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  background: linear-gradient(0deg, rgba(246,226,122,0.85), rgba(229,184,11,0.0));
  box-shadow: 0 6px 22px rgba(229,184,11,0.45);
  filter: blur(3px);
  opacity: 0; transition: opacity 220ms ease;
}
.content[data-arm="top"]::before { opacity: 1; animation: edgePulse 1.2s ease-in-out infinite; }
.content[data-arm="bottom"]::after { opacity: 1; animation: edgePulse 1.2s ease-in-out infinite; }

@keyframes edgePulse { 0%, 100% { filter: blur(3px) brightness(1); } 50% { filter: blur(4px) brightness(1.15); } }

/* Minimal overlay for first slide */
[data-slide="s1"] .content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  overflow: visible;
}

/* Reserve exact space for top brand on slides 2+ so it cannot overlap */
[data-slide]:not([data-slide="s1"]) .content { margin-top: calc(var(--brand-height) + 8px); padding-top: clamp(16px, 2.4vw, 22px); }
/* Reserve only what's needed for bottom UI (toolbar + progress) */
[data-slide]:not([data-slide="s1"]) .content { padding-bottom: calc(var(--bottom-ui) + 120px); }

/* Pin eyebrows to top corners for s1 */
[data-slide="s1"] .topbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  z-index: 3;
}

/* Make right eyebrow highly visible on s1 */
[data-slide="s1"] .topbar .eyebrow--muted {
  color: #111;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-1));
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
[data-slide="s1"] .donate-badge { display: inline-flex; align-items: center; gap: 6px; }
[data-slide="s1"] .donate-badge .badge-uhn { height: 16px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

/* Lower and shrink the main title only on s1 */
[data-slide="s1"] h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(64px, 12vh, 110px);
  margin: 0;
  font-size: clamp(24px, 4.2vw, 48px);
  text-align: center;
  width: 96vw;
}
@media (min-width: 901px) {
  /* Desktop hero layout refinements */
  [data-slide="s1"] .hero-logos { top: 25vh; }
  .logo-6ixelement { width: min(140px, 10vw); }
  .logo-6ixfashion { width: min(330px, 24vw); }
  [data-slide="s1"] .s1-oval-ring { top: 46vh; width: min(760px, 70vw); height: min(680px, 62vw); }
  [data-slide="s1"] .s1-spotlight { top: 46vh; width: min(860px, 78vw); height: min(760px, 70vw); filter: blur(1px); }
  /* Keep CTAs tight and visible on desktop */
  [data-slide="s1"] .s1-ctas .cta-btn { min-width: unset; padding: 14px 22px; }
  /* Keep a small buffer at the top; content itself reserves brand height */
  [data-slide]:not([data-slide="s1"]) { padding-top: 8px; }
  /* Slightly tighter space between brand bar and content on desktop */
  [data-slide]:not([data-slide="s1"]) .content { margin-top: calc(var(--brand-height) + 2px); }
}

/* Global UHN badge overlay */
.uhn-badge { position: absolute; top: 8px; right: 8px; z-index: 1250; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #f6e27a, #e5b80b); border: 1px solid rgba(229,184,11,0.95); border-radius: 999px; padding: 6px 10px; box-shadow: 0 14px 32px rgba(229,184,11,0.35), 0 8px 22px rgba(0,0,0,0.35); }
.uhn-badge img { height: 22px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.uhn-badge .uhn-text { font-weight: 900; letter-spacing: 0.02em; font-size: 13px; color: #111; opacity: 1; }
.uhn-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); pointer-events: none; }
/* Slightly larger logo on slides 2+ */
[data-slide]:not([data-slide="s1"]) .uhn-badge img { height: 28px; }

/* On slides after s1, show only the UHN logo (no pill/text) */
[data-slide]:not([data-slide="s1"]) .uhn-badge { background: transparent; border: 0 !important; box-shadow: none !important; padding: 0; }
[data-slide]:not([data-slide="s1"]) .uhn-badge .uhn-text { display: none; }
/* Remove any residual white inset ring on slides 2+ */
[data-slide]:not([data-slide="s1"]) .uhn-badge::after { display: none !important; content: none !important; }

@media (max-width: 900px) {
  .uhn-badge { top: 6px; right: 6px; padding: 4px 6px; }
  .uhn-badge img { height: 18px; }
  /* Ensure UHN badge stays visible on mobile, even on slide 1 */
  [data-slide="s1"] .uhn-badge { display: inline-flex !important; }
  /* Bump size a touch on slides 2+ for visibility */
  [data-slide]:not([data-slide="s1"]) .uhn-badge img { height: 20px; }
}

.hero-splash { display: grid; place-items: center; margin: 10px 0; }
.hero-splash img { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 12px 36px rgba(0,0,0,0.45); object-fit: cover; }

/* Make red carpet image (slide s5) smaller and capped */
@media (min-width: 900px) {
  [data-slide="s5"] .hero-splash { margin-inline: auto; }
  [data-slide="s5"] .hero-splash img {
    width: clamp(280px, 26vw, 520px);
  }
}

/* Slide 1 hero logos - ensure they display properly */
[data-slide="s1"] .hero-logos { position: absolute; left: 50%; top: 16vh; transform: translateX(-50%); display: grid; gap: 10px; place-items: center; z-index: 2; }
[data-slide="s1"] .hero-logos { visibility: visible !important; opacity: 1 !important; }
[data-slide="s1"] .s1-hero { position: relative; }
/* Shrink logos on slide 1: approx one-third of prior size */
.logo-6ixelement { width: min(112px, 14vw); height: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.85)) drop-shadow(0 16px 38px rgba(0,0,0,0.75)); }
.logo-6ixfashion { width: min(210px, 21vw); height: auto; filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6)); opacity: 0.95; }

/* UHN support band under logos on slide 1 */
[data-slide="s1"] .support-uhn { position: static; transform: none; margin: 6px auto 0; display: inline-flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 6px 10px; z-index: 2; box-shadow: 0 8px 22px rgba(0,0,0,0.45); }
[data-slide="s1"] .support-uhn img { height: 22px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
[data-slide="s1"] .support-uhn .label { font-weight: 800; letter-spacing: 0.02em; font-size: 13px; color: var(--fg); opacity: 0.95; white-space: normal; display: block; }

/* lightweight chart styles */
.charts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 10px; }
.chart { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px; }
.chart-title { font-weight: 800; letter-spacing: 0.02em; margin-bottom: 6px; }
.chart-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.chart-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; }
.chart-note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Inline portrait components for slides */
.portrait { display: grid; place-items: center; }
.portrait-oval { width: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; border-radius: 14px; border: 0; box-shadow: 0 12px 36px rgba(0,0,0,0.45); }

/* Ensure faces are framed on specific slides */
[data-slide="s11"] .portrait-oval { object-position: 70% top; }
[data-slide="s15"] .portrait-oval { object-position: center top; }

.eyebrow {
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 800; color: var(--accent);
  font-size: clamp(13px, 2.1vw, 20px);
}
.eyebrow--muted { color: var(--muted); }

/* Slide number badge */
.eyebrow-row { display: inline-flex; align-items: baseline; gap: 8px; }
.slide-badge {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6e27a, #e5b80b);
  border: 1px solid rgba(229,184,11,0.95);
  color: #111;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(229,184,11,0.28), 0 6px 16px rgba(0,0,0,0.35);
}
.slide-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); pointer-events: none; }

.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.topbar .eyebrow { white-space: nowrap; }
[data-slide="s1"] .topbar { margin: clamp(8px, 2vw, 16px) 0; padding: 0 clamp(8px, 2.5vw, 24px); }
[data-slide="s1"] h1 { margin-top: clamp(16px, 4vw, 48px); margin-bottom: 0; }

h1, h2, h3 { font-family: 'Poppins', 'Inter', sans-serif; margin: 0; line-height: 1.05; }
h1 { font-size: calc(clamp(32px, 5.2vw, 72px) * var(--type-scale)); font-weight: 800; margin: 10px 0 8px; line-height: 1.12; }
h2 { font-size: calc(clamp(24px, 3.8vw, 48px) * var(--type-scale)); font-weight: 700; margin: 12px 0 6px; line-height: 1.16; }
h3 { font-size: calc(clamp(20px, 3.0vw, 34px) * var(--type-scale)); font-weight: 700; margin: 12px 0 6px; line-height: 1.2; }
p { margin: 8px 0 0; font-size: clamp(18px, 1.7vw, 22px); color: var(--fg); opacity: 0.95; line-height: 1.65; }

/* elevate readability over photos */
h1, h2, h3, p, li { text-shadow: 0 1px 2px rgba(0,0,0,0.65); }
.headline-xl { font-size: clamp(32px, 5.4vw, 68px); letter-spacing: -0.01em; }

.kpis { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 18px; }
.kpi { font-size: clamp(16px, 1.5vw, 18px); color: var(--fg); }

.list { margin-top: 8px; display: grid; gap: 8px; }
.list li { font-size: clamp(17px, 1.6vw, 20px); color: var(--fg); line-height: 1.65; }
.list li::marker { color: var(--accent); }

/* compact list spacing for dense sections */
.list.tight { gap: 4px; }
.list.tight li { line-height: 1.4; }

/* premium checklist bullets */
.checks { list-style: none; padding-left: 0; }
.checks li { position: relative; padding-left: 26px; }
.checks li { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; }
.checks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.checks li { list-style: none; }
.checks li::marker { content: ''; }

.note { color: var(--fg); opacity: 0.9; margin-top: 12px; font-weight: 600; font-size: clamp(16px, 1.6vw, 19px); }
.note--highlight { background: rgba(229,184,11,0.12); border: 1px solid rgba(229,184,11,0.35); padding: 10px 12px; border-radius: 12px; }
/* Polished "View all benefits" inline button */
.view-all { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 8px; border-radius: 999px; text-decoration: none; font-weight: 800; color: #111; background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 6px 14px rgba(0,0,0,0.35); }
.tiers .note .view-all { transform: scale(0.85); transform-origin: left center; display: inline-flex; }
.tier .list { margin-top: 8px; }
.tier .list li { margin: 2px 0; }
/* Make tier bullet items more compact on slide grids */
.tiers .list li, .tiers .checks li { line-height: 1.4; margin: 2px 0; }
.view-all:hover { filter: brightness(1.05); }
.view-ico { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; color: #111; background: #fff3; border-radius: 50%; padding: 0 2px; }

/* standardized badges */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: clamp(12px, 1.4vw, 14px); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.badge .icon { font-size: 1em; }
.badge--time { background: linear-gradient(90deg, rgba(110,231,183,0.22), rgba(255,255,255,0.08)); border-color: rgba(110,231,183,0.55); }
.badge--location { background: linear-gradient(90deg, rgba(229,184,11,0.22), rgba(255,255,255,0.08)); border-color: rgba(229,184,11,0.55); }
.badge--artifacts { background: linear-gradient(90deg, rgba(229,184,11,0.32), rgba(110,231,183,0.18)); border-color: rgba(229,184,11,0.75); box-shadow: 0 0 0 2px rgba(229,184,11,0.45), 0 16px 36px rgba(229,184,11,0.22); }

/* stacked badge pairs */
.badge-stack { display: grid; gap: 6px; margin-top: 8px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }

.two-col { display: grid; gap: clamp(12px, 3vw, 36px); grid-template-columns: 1.1fr 1fr; align-items: start; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: clamp(12px, 2.5vw, 24px); backdrop-filter: blur(4px); }
/* oval portrait aesthetic */
.portrait { display: grid; place-items: center; }
.portrait-oval { width: min(320px, 38vw); aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; border: 0; box-shadow: 0 12px 36px rgba(0,0,0,0.45); }

/* standardized sponsorship tiers */
.tiers { display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: repeat(2, minmax(260px, 1fr)); margin-top: clamp(10px, 1.8vw, 18px); }
.tier { position: relative; border-radius: 16px; padding: clamp(14px, 2.2vw, 24px); background: rgba(12,12,16,0.72); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 10px 28px rgba(0,0,0,0.35); backdrop-filter: blur(8px); }
.tier p, .tier li { text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.tier__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tier__name { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 800; font-size: clamp(16px, 1.9vw, 22px); letter-spacing: 0.02em; }
.tier__price { font-weight: 700; color: var(--accent); font-size: clamp(14px, 1.8vw, 20px); }
.tier__badge { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(90deg, rgba(229,184,11,0.18), rgba(110,231,183,0.10)); color: #fff; border: 1px solid rgba(229,184,11,0.45); border-radius: 999px; padding: 4px 10px; font-size: clamp(12px, 1.2vw, 14px); margin-bottom: 8px; }
.tier ul { margin: 8px 0 0; padding-left: 18px; }
.tier ul li { margin: 4px 0; }
.tier--title {
  border-color: rgba(229,184,11,0.8);
  box-shadow: 0 0 0 2px rgba(229,184,11,0.85), 0 22px 56px rgba(229,184,11,0.26), inset 0 0 48px rgba(229,184,11,0.12);
  background: linear-gradient(180deg, rgba(229,184,11,0.16), rgba(12,12,16,0.72));
}
.tier--title {
  position: relative;
  overflow: hidden;
}
/* Floating sparkle particles around the Title cards */
.tier--title .sparkles { display: none; }
.tier--title::marker { content: none; }
.tier--title .sparkle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,255,255,0) 70%); filter: drop-shadow(0 0 8px rgba(229,184,11,0.9)); opacity: 0.8; animation: twinkle 2.2s infinite ease-in-out; }
@keyframes twinkle { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
/* Animated gold sheen sweeping across Title cards */
.tier--title::before {
  content: '';
  position: absolute; inset: -2px; pointer-events: none;
  background: radial-gradient(120% 80% at -10% -10%, rgba(229,184,11,0.18), transparent 60%),
              radial-gradient(120% 80% at 110% 110%, rgba(110,231,183,0.12), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.tier--title::after {
  content: '';
  position: absolute; top: -100%; left: -20%; width: 40%; height: 300%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: rotate(18deg);
  animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen {
  0% { transform: translateX(-120%) rotate(18deg); }
  60% { transform: translateX(260%) rotate(18deg); }
  100% { transform: translateX(260%) rotate(18deg); }
}
/* Subtle glimmer on the Title heading itself */
.tier--title h3 {
  position: relative;
}
.tier--title h3::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, rgba(229,184,11,0.0), rgba(229,184,11,0.85), rgba(229,184,11,0.0));
  filter: drop-shadow(0 0 8px rgba(229,184,11,0.6));
  opacity: 0.85;
}
.tier--presenting { box-shadow: 0 0 0 2px rgba(110,231,183,0.45), 0 14px 30px rgba(110,231,183,0.14); border-color: rgba(110,231,183,0.6); }
.tier--spotlight { box-shadow: 0 0 0 1px rgba(205,127,50,0.6), 0 10px 24px rgba(205,127,50,0.22); border-color: rgba(205,127,50,0.8); }
.tier--supporting { box-shadow: 0 0 0 1px rgba(53,197,154,0.6), 0 10px 24px rgba(53,197,154,0.22); border-color: rgba(53,197,154,0.8); }

/* Hover polish for all tiers */
.tier:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.45); }
.tier { transition: transform 180ms ease, box-shadow 180ms ease; }

/* Animated headline treatment for Title Sponsor (slide s18) */
[data-slide="s18"] .headline-xl {
  background: linear-gradient(90deg, #f6e27a, #e5b80b, #f6e27a);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 18px rgba(229,184,11,0.25);
  animation: titleGlow 8s linear infinite;
}
@keyframes titleGlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* Light motion sheen for other tiers */
.tier--presenting::after, .tier--spotlight::after, .tier--supporting::after {
  content: '';
  position: absolute; top: -120%; left: -30%; width: 40%; height: 320%;
  transform: rotate(16deg);
  opacity: 0.25; pointer-events: none;
  animation: sheen 7s ease-in-out infinite;
}
.tier--presenting::after { background: linear-gradient(120deg, transparent, rgba(110,231,183,0.16), transparent); }
.tier--spotlight::after { background: linear-gradient(120deg, transparent, rgba(205,127,50,0.18), transparent); }
.tier--supporting::after { background: linear-gradient(120deg, transparent, rgba(53,197,154,0.16), transparent); }

/* subtle tier header bling */
.tier--title .tier__name { background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier--presenting .tier__name { color: var(--silver-1); }
.tier--spotlight .tier__name { color: var(--bronze-1); }
.tier--supporting .tier__name { color: var(--green-1); }

/* Benefit-level color coding */
.checks li.benefit--title::before { color: var(--gold-1); }
.checks li.benefit--presenting::before { color: var(--silver-1); }
.checks li.benefit--spotlight::before { color: var(--bronze-1); }
.checks li.benefit--supporting::before { color: var(--green-1); }

/* In s6 Title Sponsor card, remove the gold highlight container around the
   "View all benefits" button so it matches the other tiers */
.tier--title .note--highlight { background: transparent; border: 0; padding: 0; }

/* s18 price badge */
.price-line { margin: 6px 0 12px; }
.price-badge { display: inline-block; color: #0b4f37; background: linear-gradient(90deg, #8ff0c8, #6ee7b7); border: 1px solid rgba(110,231,183,0.8); border-radius: 999px; padding: 4px 10px; font-weight: 800; }

@media (max-width: 900px) {
  /* Harmonized mobile type scale */
  h1 { font-size: 32px; line-height: 1.12; }
  h2, .headline-xl { font-size: 26px; line-height: 1.12; }
  h3 { font-size: 20px; line-height: 1.15; }
  p, .note, .list li, .checks li { font-size: 18px; line-height: 1.6; }
  .tiers { grid-template-columns: 1fr; }
}

.ui { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); display: flex; align-items: center; justify-content: center; padding: 8px clamp(8px, 2.6vw, 18px); gap: 8px; pointer-events: none; z-index: 1000; background: rgba(12,12,16,0.5); border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 -10px 28px rgba(0,0,0,0.35); backdrop-filter: blur(6px); }
.btn { pointer-events: auto; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); color: var(--fg); border: 1px solid rgba(255,255,255,0.28); border-radius: 10px; padding: 10px 14px; font-size: 16px; cursor: pointer; transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.btn#btn-music { position: relative; }
.music-status { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #111; box-shadow: 0 2px 6px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.6); }
.music-status--on { background: #8ff0c8; }
.music-status--muted { background: #ff6b6b; }
.btn#ask-mic { position: relative; }
.btn#ask-mic.recording::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255,59,48,0.7);
  animation: blink-record 1s infinite ease-in-out;
  border: 1px solid rgba(255,255,255,0.6);
}
@keyframes blink-record {
  0%, 100% { opacity: 0.25; transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255,59,48,0.6); }
  50% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(255,59,48,0); }
}
.btn#btn-apply { background: linear-gradient(180deg, #f6e27a, #e5b80b); color: #111; border-color: rgba(229,184,11,0.95); box-shadow: 0 14px 32px rgba(229,184,11,0.35), 0 8px 22px rgba(0,0,0,0.35); font-weight: 900; letter-spacing: 0.03em; }
.btn#btn-apply::after { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); pointer-events: none; }
.btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Prominent tooltips for toolbar buttons */
.btn[data-tooltip] { position: relative; }
.btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: linear-gradient(180deg, rgba(12,12,16,0.98), rgba(12,12,16,0.95));
  color: var(--fg);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 2000;
  border: 1px solid rgba(229,184,11,0.4);
  box-shadow: 0 12px 32px rgba(229,184,11,0.35), 0 8px 22px rgba(0,0,0,0.55);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.btn[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 8px solid transparent;
  border-top-color: rgba(229,184,11,0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 2000;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.btn[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Extra prominent styling for Calendly button tooltip */
#btn-calendly[data-tooltip]::before {
  background: linear-gradient(180deg, rgba(229,184,11,0.98), rgba(229,184,11,0.92));
  color: #0b0b0f;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border: 2px solid rgba(246,226,122,0.9);
  box-shadow: 0 16px 42px rgba(229,184,11,0.5), 0 10px 28px rgba(0,0,0,0.65);
  letter-spacing: 0.02em;
}
#btn-calendly[data-tooltip]::after {
  border-top-color: rgba(246,226,122,0.9);
  filter: drop-shadow(0 6px 12px rgba(229,184,11,0.4));
}

/* Allow tooltip text wrapping for longer descriptions */
.btn[data-tooltip].tooltip-wrap::before {
  white-space: normal;
  max-width: 280px;
  text-align: center;
}
.btn.nav { font-size: 28px; padding: 14px 18px; }
.btn#btn-prev, .btn#btn-next {
  background: rgba(12,12,16,0.65);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  z-index: 1100;
}
.btn#btn-next {
  /* Gold glow to draw attention without feeling gaudy */
  border-color: rgba(229,184,11,0.85);
  box-shadow: 0 0 0 2px rgba(229,184,11,0.28) inset,
              0 12px 28px rgba(229,184,11,0.22),
              0 0 18px rgba(229,184,11,0.18);
  animation: gold-pulse 2600ms ease-in-out infinite;
}
.btn#btn-next[disabled] {
  animation: none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.28);
}
@keyframes gold-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(229,184,11,0.22) inset,
                0 10px 24px rgba(229,184,11,0.16),
                0 0 12px rgba(229,184,11,0.12);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(229,184,11,0.38) inset,
                0 16px 36px rgba(229,184,11,0.32),
                0 0 26px rgba(229,184,11,0.28);
  }
}
.btn#btn-prev:hover, .btn#btn-next:hover { background: rgba(12,12,16,0.8); }
.spacer { flex: 1; }
.meta { display: flex; align-items: center; gap: 12px; justify-content: center; }
.btn-mini { font-size: 11px; padding: 0 6px; min-width: 24px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin: 0 2px; }
/* Hide vestigial small arrows on desktop; keep only large chevrons */
@media (min-width: 901px) {
  #mini-prev, #mini-next { display: none !important; }
}
.counter { display: none; }

/* Force mobile-style arrows based purely on viewport toggled by body.mobile-arrows */
body.mobile-arrows #btn-prev, body.mobile-arrows #btn-next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	bottom: auto;
	height: clamp(56px, 14vh, 100px);
	width: clamp(56px, 14vw, 84px);
	font-size: clamp(32px, 6.5vw, 44px);
	display: grid;
	place-items: center;
	pointer-events: auto;
	z-index: 1100;
	background: #0b0b0f;
}
body.mobile-arrows #btn-prev { left: 0; border-radius: 0 16px 16px 0; }
body.mobile-arrows #btn-next { right: 0; border-radius: 16px 0 0 16px; }
body.mobile-arrows #mini-prev, body.mobile-arrows #mini-next { display: none !important; }

.progress {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: auto; z-index: 900;
  background: transparent;
}
.bar {
  height: 6px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 200ms ease-out;
}
.segments {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  align-items: stretch; justify-content: stretch;
  padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: rgba(12,12,16,0.5);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -10px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}
.segment {
  position: relative; display: grid; place-items: stretch; height: 30px;
  border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.segment:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.segment:active { transform: translateY(0); }
.segment__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 200ms ease-out;
}
.segment__label { display: none; }
.segment[aria-selected="true"] {
  border-color: rgba(229,184,11,0.75);
  box-shadow: 0 6px 18px rgba(229,184,11,0.18) inset, 0 8px 18px rgba(0,0,0,0.35);
}
.segment[aria-current="true"] .segment__bar { width: 100%; opacity: 0.25; }
.segment[aria-complete="true"] .segment__bar { width: 100%; opacity: 0.45; }

.seg-active-title { display: none !important; }

@media (max-width: 900px) {
  .ui { bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); }
}

/* Desktop: keep toolbar compact and centered so nav arrows are close together */
@media (min-width: 901px) {
  .ui { left: 50%; right: auto; transform: translateX(-50%); width: auto; padding: 8px 10px; gap: 8px; border-radius: 12px; }
  .ui .spacer { display: none; }
}

@media (max-width: 900px) {
  .segment { height: 26px; border-radius: 6px; }
}

/* Slide 1 CTAs – apply mobile styling globally as well */
[data-slide="s1"] .s1-ctas { position: static; transform: none; display: grid; gap: 12px; justify-items: center; margin-top: 12px; z-index: 3; }
.cta-btn { font-weight: 900; letter-spacing: 0.05em; border-radius: 999px; padding: 14px 20px; border: 1px solid rgba(229,184,11,0.95); cursor: pointer; position: relative; overflow: hidden; }
.cta-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }
.cta-btn--gold { background: linear-gradient(180deg, #f6e27a, #e5b80b); color: #111; box-shadow: 0 14px 32px rgba(229,184,11,0.35), 0 8px 22px rgba(0,0,0,0.35); }
.cta-btn--gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cta-btn--outlined { background: linear-gradient(180deg, #6ee7b7, #35c59a); color: #0b4f37; border-color: rgba(53,197,154,0.9); box-shadow: 0 14px 28px rgba(53,197,154,0.35), 0 8px 22px rgba(0,0,0,0.35); }
.cta-btn--outlined:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Persistent brand logos (slides 2+): center large 6ixFashion only */
.brand {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--brand-height);
  padding: 8px 8px 0; /* a little breathing room */
  display: flex; gap: 10px; align-items: center; justify-content: center;
  z-index: 1100;
  pointer-events: none; /* avoid intercepting content scroll */
  /* readability backdrop behind centered logo on slides 2+ */
  background:
    radial-gradient(120% 70% at 50% 10%, rgba(0,0,0,0.55), rgba(0,0,0,0.0) 70%);
}
.brand img { height: 100%; width: auto; opacity: 0.98; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); pointer-events: auto; }
.brand .brand-6ixfashion { height: 100%; max-height: calc(var(--brand-height) - 12px); width: auto; }
/* Hide extra logos and pill across slides 2+ */
.brand .brand-6ixelement, .brand .brand-uhn, .brand .brand-pill { display: none !important; }
/* Hide brand bar on slide 1 only */
[data-slide="s1"] ~ .brand { display: none !important; }
/* Desktop/wider screens - ensure hero logos display properly */
@media (min-width: 901px) {
  /* Make sure hero logos are visible and properly sized */
  .logo-6ixfashion { width: min(260px, 22vw); }
  .logo-6ixelement { width: min(126px, 11.2vw); }
}

@media (max-width: 900px) {
  /* Align CSS variable to actual mobile brand height so content can reserve space */
:root { --brand-height: clamp(63px, 16vw, 112px); }
  .brand { height: clamp(63px, 16vw, 112px); padding: 6px 8px 0; }
  .brand .brand-6ixfashion { height: 100%; max-height: calc(100% - 6px); width: auto; }
  /* Remove legacy mobile styling that forced wrong proportions */
  [data-slide]:not([data-slide="s1"]) ~ .brand .brand-6ixfashion {
    height: 100%; width: auto; max-width: none; margin: 0;
    background: none; padding: 0; border-radius: 0;
    border: 0; box-shadow: none;
  }
  /* On slides 2+, hide 6ixElement and enlarge others */
  [data-slide]:not([data-slide="s1"]) ~ .brand .brand-6ixelement { display: none; }
  /* Hide 30% pill on mobile inside brand bar; keep floating UHN badge visible */
  .brand .brand-pill { display: none !important; }
  /* Remove UHN brand logo on mobile top bar */
  .brand .brand-uhn { display: none !important; }
  /* Center the brand bar and keep the logo proportional (height-driven) */
  [data-slide]:not([data-slide="s1"]) ~ .brand { justify-content: center; gap: 8px; }
  [data-slide]:not([data-slide="s1"]) ~ .brand .brand-6ixfashion {
    height: 100%; width: auto; max-width: none; margin: 0;
    background: none; padding: 0; border-radius: 0; border: 0;
    /* subtle glow around gold logo for contrast */
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65)) drop-shadow(0 1px 2px rgba(0,0,0,0.9));
  }
  /* Compact the gold pill on slides 2+ */
  [data-slide]:not([data-slide="s1"]) ~ .brand .brand-pill { font-size: 12px; padding: 2px 8px; }
  /* Hide brand bar on slide 1 to reduce clutter */
  [data-slide="s1"] ~ .brand { display: none; }
  /* Hide fullscreen toggle on mobile */
  #btn-fullscreen { display: none; }
}

/* Integrated gold pill for 30% to UHN in brand bar */
.brand-pill { display: none; }
.brand-pill .pill-ico { height: 14px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

.help { position: absolute; left: 50%; transform: translateX(-50%); bottom: 36px; font-size: 12px; color: var(--muted); text-align: center; opacity: 0.8; }

@media (max-width: 900px) {
  /* Remove scroll affordance overlays and pill on mobile */
  .content[data-scrollable="true"]::before,
  .content[data-scrollable="true"]::after { display: none !important; content: none !important; }
  /* Disable slide blend overlay on mobile */
  .slide::after { display: none !important; content: none !important; }
  .two-col { grid-template-columns: 1fr; }
  /* Add horizontal padding equal to arrow width so icons never sit under arrows */
  .ui { padding: 6px calc(10px + clamp(32px, 9vw, 46px)); gap: 6px; }
  /* Hide the mini nav arrows on mobile; keep only the large edge arrows */
  #mini-prev, #mini-next { display: none !important; }
  /* add breathing room above headings on mobile */
  .content { padding-top: clamp(24px, 8vw, 40px); }
  /* Avoid overlap with fixed brand bar on slides 2+ by reserving exact height + margin */
  [data-slide]:not([data-slide="s1"]) .content { margin-top: calc(var(--brand-height) + 8px); padding-top: clamp(18px, 4vw, 26px); }
  .content > h1:first-child,
  .content > h2:first-child,
  .content > h3:first-child { margin-top: 12px; }
  /* ensure content doesn't overlap with fixed controls on mobile */
  /* Reserve more space for bottom UI on mobile */
  .content { padding-bottom: calc(var(--bottom-ui) + 140px); }
  /* thicker visible scrollbar on mobile */
  .content { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255,255,255,0.08); }
  .content::-webkit-scrollbar { width: 10px; }
  .content::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 10px; }
  .content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 10px; }
  /* edge-to-edge vertical nav arrows - expand for mobile ergonomics */
  #btn-prev, #btn-next {
    position: fixed;
    top: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
    width: clamp(60px, 12vw, 84px);
    font-size: clamp(36px, 7vw, 46px);
    display: grid;
    place-items: center;
    pointer-events: auto;
    z-index: 1100;
    background: #0b0b0f;
  }
  #btn-prev { left: 0; border-radius: 0 16px 16px 0; }
  #btn-next { right: 0; border-radius: 16px 0 0 16px; }
  /* mobile share and calendly sizing */
  #btn-share-global, #btn-calendly { font-size: 15px; padding: 8px 12px; }
  
  /* Mobile tooltip adjustments */
  .btn[data-tooltip]::before {
    font-size: 12px;
    padding: 8px 12px;
    max-width: 200px;
    white-space: normal;
  }
  #btn-calendly[data-tooltip]::before {
    font-size: 13px;
    padding: 10px 16px;
    max-width: 240px;
  }

  /* Slide 1 mobile tuning */
  [data-slide="s1"] .scrim { opacity: 0.5; }
  [data-slide="s1"] .topbar { top: 6px; left: 6px; right: 6px; }
  [data-slide="s1"] .topbar .eyebrow { font-size: clamp(11px, 3.2vw, 14px); }
  [data-slide="s1"] .topbar .eyebrow--muted { padding: 4px 8px; }
  /* On mobile remove all topbar badges entirely */
  [data-slide="s1"] .topbar { justify-content: center; }
  [data-slide="s1"] .topbar .eyebrow:first-child { display: none; }
  [data-slide="s1"] .donate-badge { display: none !important; }
  /* make date headline wrap nicely on small screens */
  [data-slide="s1"] .topbar .eyebrow { white-space: normal; line-height: 1.25; max-width: 70vw; }
  [data-slide="s1"] .topbar { align-items: flex-start; }
  /* Centered date below main logo with white text to avoid gold-on-gold */
  [data-slide="s1"] .s1-date { display: block; margin: 6px auto 6px; text-align: center; max-width: 92vw; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 6px 10px; color: #fff; }
  [data-slide="s1"] h1 {
    bottom: calc(190px + env(safe-area-inset-bottom, 0px));
    font-size: clamp(20px, 5.5vw, 32px);
    width: 92vw;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 8px 12px;
  }
  /* mobile sizes for hero logos and support band */
  .logo-6ixelement { width: min(120px, 26vw); }
  /* Fit neatly without overlapping content */
  .logo-6ixfashion { width: min(210px, 50vw); }
  /* Vertically center the 6ixFashion logo block (raised slightly to better balance space) */
  [data-slide="s1"] .hero-logos { top: 36vh; transform: translate(-50%, -50%); }
  /* ensure both logos stack and center */
  [data-slide="s1"] .hero-logos img { display: block; }
  /* subtle "present" label under Six Element */
  [data-slide="s1"] .s1-present {
    margin: 4px 0 6px;
    padding: 2px 8px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
  }
  /* Elegant oval ring and backdrop fade for emphasis */
  [data-slide="s1"] .s1-oval-ring {
    position: absolute; left: 50%; top: 47vh; transform: translate(-50%, -50%);
    width: min(520px, 94vw); height: min(500px, 100vw);
    border-radius: 14px;
    border: 2px solid rgba(229,184,11,0.75);
    box-shadow: 0 0 0 4px rgba(229,184,11,0.18), inset 0 0 80px rgba(0,0,0,0.35);
    z-index: 1; pointer-events: none;
  }
  [data-slide="s1"] .s1-spotlight {
    position: absolute; left: 50%; top: 47vh; transform: translate(-50%, -50%);
    width: min(600px, 100vw); height: min(540px, 108vw);
    border-radius: 14px;
    background: radial-gradient(circle at center, rgba(0,0,0,0.15), rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.75) 100%);
    filter: blur(2px);
    z-index: 0; pointer-events: none;
  }
  [data-slide="s1"] .support-uhn { position: static; transform: none; margin: 8px auto 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  /* Force label on next line under the logo */
  [data-slide="s1"] .support-uhn .label { white-space: normal; line-height: 1.25; display: block; text-align: center; }

  /* Polished CTA: center above headline and remove neon look */
  /* Floating CTA removed */

  /* S1 dual CTAs */
  /* Center CTAs directly under Seasons logo */
  [data-slide="s1"] .s1-ctas { position: static; transform: none; display: grid; gap: 10px; justify-items: center; margin-top: 12px; z-index: 3; }
  .cta-btn { font-weight: 900; letter-spacing: 0.05em; border-radius: 999px; padding: 14px 20px; border: 1px solid rgba(229,184,11,0.95); cursor: pointer; position: relative; overflow: hidden; min-width: 90vw; }
  .cta-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }
  .cta-btn--gold { background: linear-gradient(180deg, #f6e27a, #e5b80b); color: #111; box-shadow: 0 14px 32px rgba(229,184,11,0.35), 0 8px 22px rgba(0,0,0,0.35); }
  .cta-btn--gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
  .cta-btn--outlined { background: linear-gradient(180deg, #6ee7b7, #35c59a); color: #0b4f37; border-color: rgba(53,197,154,0.9); box-shadow: 0 14px 28px rgba(53,197,154,0.35), 0 8px 22px rgba(0,0,0,0.35); }
  .cta-btn--outlined:hover { filter: brightness(1.05); transform: translateY(-1px); }
  [data-slide="s1"] .support-uhn img { height: 18px; }
  [data-slide="s1"] .support-uhn .label { font-size: 12px; }
}

/* Show the active slide title pill on mobile so slide changes are obvious */
@media (max-width: 900px) {
  .seg-active-title { display: grid !important; }
  .seg-active-title::before { font-size: 12px; padding: 6px 10px; }
}

/* Auto two-column layout when portraits present and viewport is wide */
@media (min-width: 900px) {
  .content.grid-with-portrait {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(12px, 3vw, 36px);
    align-items: start;
  }
  .content.grid-with-portrait > .portrait.portrait--grid {
    order: 2;
    justify-self: center;
  }
  /* Support slides where the portrait is nested inside the `.copy` block */
  /* NOTE: Using display: contents on the copy wrapper can accidentally make
     the first child (like an eyebrow) share the row with the portrait and
     force the grid row to match the image height, creating large vertical
     gaps. Keep the copy as a proper left column container instead. */
  .two-col { display: grid; grid-template-columns: 1.1fr 1fr; }
  .two-col .copy { display: block; }
  .two-col .copy > .portrait { grid-column: 2; align-self: start; justify-self: center; }
  .two-col .copy > :not(.portrait) { grid-column: 1; }
  .two-col > .portrait { grid-column: 2; }
  /* Ensure s2 layout places portrait to the right and sized to fit without overlapping brand */
  [data-slide="s2"] .two-col { grid-template-columns: 1.1fr 0.9fr; }
  [data-slide="s2"] .two-col > .portrait { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
  [data-slide="s2"] .two-col > .portrait .portrait-oval { width: clamp(260px, 24vw, 340px); max-width: 100%; height: auto; }
}

/* Video overlay */
.video-overlay { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; }
.video-overlay[hidden] { display: none !important; }
/* Thank-you confetti overlay */
#thankyou-overlay { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; }
#thankyou-overlay[hidden] { display: none !important; }
#thankyou-overlay .ty-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
#thankyou-overlay .ty-frame { position: relative; display: grid; gap: 8px; place-items: center; width: min(840px, 94vw); height: min(380px, 60vh); border-radius: 18px; background:
  radial-gradient(120% 80% at 50% 0%, rgba(229,184,11,0.08), rgba(0,0,0,0) 60%),
  radial-gradient(120% 80% at 10% 100%, rgba(110,231,183,0.08), rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(12,12,16,0.98), rgba(12,12,16,0.94));
  border: 0; box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06) inset; overflow: hidden; }
#thankyou-overlay .ty-text { position: relative; z-index: 2; font-weight: 900; letter-spacing: 0.02em; text-align: center; padding: 16px; font-size: clamp(20px, 3.6vw, 32px); background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 18px rgba(229,184,11,0.25); }
#thankyou-overlay .ty-sub { position: relative; z-index: 2; max-width: 90%; text-align: center; color: var(--fg); opacity: 0.92; font-size: clamp(14px, 2.4vw, 16px); line-height: 1.5; }
#thankyou-overlay .ty-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: screen; filter: blur(0.2px); }
.video-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); }
.video-frame { position: relative; width: auto; max-width: 92vw; height: min(70vh, calc(100vh - 180px)); background: #000; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); display: grid; }
.video-frame video { width: 100%; height: 100%; max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 14px; }
.video-close { position: absolute; top: -38px; right: 0; background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; padding: 6px 10px; cursor: pointer; }

@media (orientation: landscape) {
  .video-frame { width: min(960px, 92vw); height: min(540px, 70vh); }
  .video-frame video { max-width: 92vw; max-height: 70vh; }
}

@media (orientation: portrait) {
  .video-frame { width: 92vw; max-width: 92vw; height: auto; max-height: min(80vh, calc(100vh - 140px)); }
  .video-frame video { width: 100%; height: auto; max-height: inherit; }
}

/* Ask the Pitch Deck panel */
.ask {
  position: fixed;
  right: clamp(8px, 2vw, 20px);
  top: 50%;
  transform: translateY(-50%);
  width: min(680px, 92vw);
  max-height: min(82vh, 900px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, rgba(12,12,16,0.98), rgba(12,12,16,0.95));
  border: 2px solid rgba(229,184,11,0.35);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(229,184,11,0.25), 0 12px 40px rgba(0,0,0,0.7);
  z-index: 1200;
}
.ask__header { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(229,184,11,0.2);
}
.ask__title { 
  font-weight: 800; 
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 17px;
}
.ask__spacer { flex: 1; }
#ask-close {
  min-width: 36px;
  min-height: 36px;
  padding: 8px;
  font-size: 18px;
  opacity: 0.8;
  transition: opacity 200ms ease, transform 200ms ease;
}
#ask-close:hover {
  opacity: 1;
  transform: scale(1.1);
}
.ask__body { display: grid; gap: 12px; grid-template-rows: auto 1fr; min-height: 0; }
.ask__system-row { display: grid; gap: 6px; }
#ask-system { width: 100%; background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.ask__key { display: flex; gap: 8px; }
#ask-key { flex: 1; background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 10px 12px; }
.ask__input-row { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  gap: 10px; 
  align-items: end; 
}
.ask__input-row .input-wrapper {
  display: grid;
  gap: 8px;
  grid-template-rows: 1fr auto;
}
#ask-input { 
  width: 100%; 
  background: rgba(255,255,255,0.08); 
  color: var(--fg); 
  border: 1px solid rgba(229,184,11,0.25); 
  border-radius: 10px; 
  padding: 12px 14px; 
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
  min-height: 80px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
#ask-input:focus {
  outline: none;
  border-color: rgba(229,184,11,0.6);
  box-shadow: 0 0 0 3px rgba(229,184,11,0.12);
}
.ask__input-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
#ask-read { margin-right: 6px; }
.ask__read { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 13px; 
  color: var(--muted); 
  user-select: none;
  cursor: pointer;
  transition: color 200ms ease;
}
.ask__read:hover { color: var(--fg); }
.ask__read input { 
  accent-color: var(--gold-1);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.ask__action-buttons {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Microphone button for speech-to-text */
.btn--mic {
  position: relative;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 10px;
  transition: all 180ms ease;
  background: rgba(229,184,11,0.08);
  border-color: rgba(229,184,11,0.3);
}
.btn--mic:hover {
  background: rgba(229,184,11,0.14);
  border-color: rgba(229,184,11,0.5);
}
.btn--mic .mic-icon {
  display: block;
  transition: opacity 180ms ease;
}
.btn--mic .mic-waveform {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 40px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}
.btn--mic .mic-status {
  display: none;
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(229,184,11,0.4);
}
.btn--mic.recording {
  background: rgba(229,184,11,0.18);
  border-color: rgba(229,184,11,0.6);
  box-shadow: 0 0 0 3px rgba(229,184,11,0.15), 0 8px 18px rgba(0,0,0,0.35);
}
.btn--mic.recording .mic-waveform {
  display: block;
  animation: pulse-glow 1.5s ease-in-out infinite;
}
.btn--mic.converting {
  background: rgba(110,231,183,0.18);
  border-color: rgba(110,231,183,0.6);
}
.btn--mic.converting .mic-status {
  display: block;
  color: var(--accent-2);
  border-color: rgba(110,231,183,0.4);
}
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(229,184,11,0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(229,184,11,0.6);
  }
}
#ask-submit {
  background: linear-gradient(180deg, rgba(229,184,11,0.95), rgba(229,184,11,0.85));
  color: #0b0b0f;
  border-color: rgba(246,226,122,0.9);
  font-weight: 700;
  min-width: 100px;
  box-shadow: 0 6px 18px rgba(229,184,11,0.35), 0 4px 12px rgba(0,0,0,0.4);
}
#ask-submit:hover {
  background: linear-gradient(180deg, rgba(246,226,122,0.98), rgba(229,184,11,0.9));
  box-shadow: 0 8px 24px rgba(229,184,11,0.45), 0 6px 16px rgba(0,0,0,0.5);
}
.ask__stop { 
  background: rgba(255,255,255,0.06); 
  border-color: rgba(255,255,255,0.2); 
  color: var(--fg); 
  opacity: 0.9;
  min-width: 80px;
  font-weight: 600;
}
.ask__stop:hover {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}
.btn.btn--quiet { background: rgba(255,255,255,0.06); color: var(--fg); border: 1px solid rgba(255,255,255,0.16); box-shadow: none; }
.ask__output { 
  overflow: auto; 
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(229,184,11,0.15); 
  border-radius: 12px; 
  padding: 14px; 
  font-size: 14px; 
  color: var(--fg); 
  display: grid; 
  gap: 12px;
  line-height: 1.6;
}
.msg { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.msg__avatar { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); 
  display: grid; 
  place-items: center; 
  color: #111; 
  font-size: 16px; 
  font-weight: 900; 
  box-shadow: 0 4px 12px rgba(229,184,11,0.4);
  flex-shrink: 0;
}
.msg__bubble { 
  background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.12); 
  border-radius: 12px; 
  padding: 12px 14px;
  line-height: 1.6;
}
.msg--ai .msg__avatar::after { content: '🤖'; }
.msg--talking .msg__avatar { animation: talk 900ms infinite ease-in-out; }
@keyframes talk { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
/* draggable window affordance */
.ask--window { resize: both; overflow: auto; }
#ask-drag-handle { cursor: move; }

@media (max-width: 900px) {
  .ask { left: 8px; right: 8px; bottom: 70px; top: auto; transform: none; width: auto; max-height: 65vh; }
  #inquiry-modal.ask { max-height: 60vh; width: min(480px, 94vw); }
  .inquiry .grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .inquiry input, .inquiry select, .inquiry textarea { padding: 8px 10px; font-size: 14px; }
  #inquiry-form .actions { position: sticky; bottom: 0; background: rgba(12,12,16,0.96); padding-top: 6px; }

  /* Mobile input row - stack vertically */
  .ask__input-row { 
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #ask-input {
    min-height: 100px;
  }
  .ask__action-buttons {
    flex-direction: column;
  }
  #ask-submit,
  .ask__stop {
    width: 100%;
  }

  /* Mobile mic button sizing */
  .btn--mic {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
  .btn--mic .mic-waveform {
    width: 60px;
    height: 32px;
  }
  .btn--mic .mic-status {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Mobile nav arrows: make them visible and tappable */
  #btn-prev, #btn-next {
    position: fixed;
    top: 42%;
    transform: translateY(-50%);
    bottom: auto;
    height: clamp(60px, 16vh, 120px);
    width: clamp(32px, 9vw, 46px);
    font-size: clamp(24px, 6.2vw, 36px);
    display: grid;
    place-items: center;
    pointer-events: auto;
    z-index: 1100;
    background: #0b0b0f;
  }
  #btn-prev { left: 0; border-radius: 0 12px 12px 0; }
  #btn-next { right: 0; border-radius: 12px 0 0 12px; }
}

/* Ensure vertical centering and slimmer width when forcing mobile arrows via class (works in desktop emulation) */
@media (max-width: 1200px) {
  body.mobile-arrows #btn-prev, body.mobile-arrows #btn-next {
    top: 42% !important;
    bottom: auto !important;
    height: clamp(60px, 16vh, 120px);
    width: clamp(32px, 9vw, 46px);
    font-size: clamp(24px, 6.2vw, 36px);
    transform: translateY(-50%);
  }
}


/* Ensure hidden attribute actually hides elements that define display */
[hidden] { display: none !important; }

/* Inquiry form layout reuse of ask panel styles */
/* Music panel */
.music { position: fixed; right: clamp(8px, 2vw, 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); display: grid; gap: 8px; background: linear-gradient(180deg, rgba(12,12,16,0.96), rgba(12,12,16,0.9)); border: 1px solid rgba(229,184,11,0.45); border-radius: 14px; padding: 10px; z-index: 1200; box-shadow: 0 16px 44px rgba(229,184,11,0.26), 0 10px 28px rgba(0,0,0,0.55); }
.music__header { display: flex; align-items: center; gap: 10px; }
.music__title { font-weight: 800; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.music__row { display: flex; gap: 8px; align-items: center; }
.music select, .music input[type="range"] { background: rgba(255,255,255,0.08); color: var(--fg); border: 1px solid rgba(229,184,11,0.45); border-radius: 10px; padding: 6px 8px; }
.music select option, .music select optgroup { background: #111; color: var(--fg); }
.inquiry { display: grid; gap: 16px; color-scheme: dark; }
.inquiry .grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(160px, 1fr)); }
.inquiry label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; }
.inquiry label span { color: var(--fg); }
.inquiry input, .inquiry select, .inquiry textarea {
  width: 100%; background: rgba(255,255,255,0.06); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 12px 14px;
  font-size: 15px;
  transition: border-color 200ms ease, background 200ms ease;
}
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus {
  outline: none;
  border-color: rgba(229,184,11,0.6);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(229,184,11,0.15);
}
.inquiry input::placeholder, .inquiry textarea::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.inquiry select option, .inquiry select optgroup { background: #111; color: var(--fg); }
.inquiry .company-info { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.inquiry .actions { display: flex; justify-content: end; gap: 8px; margin-top: 8px; }
.inquiry .actions .btn[type="submit"] {
  background: linear-gradient(180deg, #f6e27a, #e5b80b);
  color: #111;
  border-color: rgba(229,184,11,0.95);
  font-weight: 900;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 18px rgba(229,184,11,0.35), 0 4px 12px rgba(0,0,0,0.35);
}
.inquiry .actions .btn[type="submit"]:hover {
  box-shadow: 0 12px 24px rgba(229,184,11,0.45), 0 6px 16px rgba(0,0,0,0.45);
}

/* Designer package options */
.pkg { grid-column: 1 / -1; display: grid; gap: 8px; padding: 8px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(255,255,255,0.04); }
.pkg__title { font-weight: 800; letter-spacing: 0.02em; font-size: 14px; color: var(--fg); opacity: 0.95; }
.pkg__option { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 8px; }
.pkg__option:hover { background: rgba(255,255,255,0.04); }
.pkg__label { font-weight: 700; color: var(--fg); }
.pkg__desc { grid-column: 2; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* User Type Selection Menu - Animated Rollout */
.user-type-menu {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
}
.user-type-menu[hidden] { display: none !important; }

.user-type-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  animation: fadeIn 300ms ease;
}

.user-type-menu__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 32px;
  max-width: min(900px, 92vw);
  animation: menuSlideIn 400ms cubic-bezier(.2,.65,.2,1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menuSlideIn {
  from { 
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to { 
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.user-type-btn {
  position: relative;
  display: grid;
  gap: 12px;
  place-items: center;
  padding: 28px 20px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  cursor: pointer;
  transition: all 280ms cubic-bezier(.2,.65,.2,1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: buttonPopIn 500ms cubic-bezier(.2,.65,.2,1) backwards;
}

.user-type-btn:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.35);
}

.user-type-btn__icon {
  font-size: 48px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.user-type-btn__label {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--fg);
}

/* Stagger animation delays */
.user-type-btn:nth-child(1) { animation-delay: 50ms; }
.user-type-btn:nth-child(2) { animation-delay: 100ms; }
.user-type-btn:nth-child(3) { animation-delay: 150ms; }
.user-type-btn:nth-child(4) { animation-delay: 200ms; } /* Sponsor - center */
.user-type-btn:nth-child(5) { animation-delay: 250ms; }
.user-type-btn:nth-child(6) { animation-delay: 300ms; }
.user-type-btn:nth-child(7) { animation-delay: 350ms; }

@keyframes buttonPopIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Sponsor button - Gold styling in center */
.user-type-btn--sponsor {
  background: linear-gradient(180deg, #f6e27a, #e5b80b);
  border-color: rgba(229,184,11,0.95);
  box-shadow: 
    0 0 0 4px rgba(229,184,11,0.25),
    0 14px 42px rgba(229,184,11,0.45),
    0 8px 22px rgba(0,0,0,0.35);
  grid-column: 2; /* Center in 3-column grid */
  grid-row: 2; /* Second row */
}

.user-type-btn--sponsor .user-type-btn__label {
  color: #111;
  font-size: 18px;
}

.user-type-btn--sponsor:hover {
  box-shadow: 
    0 0 0 6px rgba(229,184,11,0.35),
    0 20px 56px rgba(229,184,11,0.55),
    0 12px 32px rgba(0,0,0,0.45);
}

/* Other button styles */
.user-type-btn--designer {
  grid-column: 1;
  grid-row: 2;
}

.user-type-btn--tickets {
  grid-column: 3;
  grid-row: 2;
}

/* Buy Tickets — hover "coming soon" effect */
.user-type-btn--tickets { position: relative; overflow: hidden; }
.user-type-btn--tickets::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.user-type-btn--tickets::after {
  content: 'Tickets on sale soon';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  color: #0e0e12;
  background: linear-gradient(180deg, #cfd8dc, #90a4ae);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.12) inset;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.user-type-btn--tickets:hover {
  filter: grayscale(1) brightness(0.8) saturate(0.6);
}
.user-type-btn--tickets:hover::before { opacity: 1; }
.user-type-btn--tickets:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }


.user-type-btn--makeup {
  grid-column: 1;
  grid-row: 1;
}

.user-type-btn--stylist {
  grid-column: 2;
  grid-row: 1;
}

.user-type-btn--media {
  grid-column: 3;
  grid-row: 1;
}

.user-type-btn--volunteer {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 300px;
  margin: 0 auto;
}

/* Mobile responsive layout */
@media (max-width: 900px) {
  .user-type-menu__content {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
  }

  .user-type-btn {
    padding: 20px 16px;
  }

  .user-type-btn__icon {
    font-size: 36px;
  }

  .user-type-btn__label {
    font-size: 14px;
  }

  /* Mobile grid layout */
  .user-type-btn--makeup { grid-column: 1; grid-row: 1; }
  .user-type-btn--stylist { grid-column: 2; grid-row: 1; }
  .user-type-btn--designer { grid-column: 1; grid-row: 2; }
  .user-type-btn--sponsor { 
    grid-column: 2; 
    grid-row: 2;
  }
  .user-type-btn--tickets { grid-column: 1; grid-row: 3; }
  .user-type-btn--media { grid-column: 2; grid-row: 3; }
  .user-type-btn--volunteer { 
    grid-column: 1 / -1; 
    grid-row: 4;
    max-width: 100%;
  }

  .user-type-btn--sponsor .user-type-btn__label {
    font-size: 16px;
  }
}

/* Quick-apply buttons: compact, professional palette */
.quick-apply__buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.qa { padding: 8px 10px; font-size: 13px; border-radius: 10px; box-shadow: 0 8px 18px rgba(0,0,0,0.28); }
.qa.qa--sponsor { background: linear-gradient(180deg, #f6e27a, #e5b80b); color: #111; border-color: rgba(229,184,11,0.85); }
.qa.qa--designer { background: linear-gradient(180deg, #cfd8dc, #90a4ae); color: #102027; border-color: rgba(207,216,220,0.85); }
.qa.qa--makeup { background: linear-gradient(180deg, #b39ddb, #7e57c2); color: #100a20; border-color: rgba(126,87,194,0.8); }
.qa.qa--stylist { background: linear-gradient(180deg, #90caf9, #42a5f5); color: #0b2747; border-color: rgba(66,165,245,0.8); }
.qa.qa--volunteer { background: linear-gradient(180deg, #a5d6a7, #66bb6a); color: #0b4f37; border-color: rgba(102,187,106,0.85); }

/* Sponsorship select: emphasize money without being gaudy */
#inq-tier { font-weight: 700; }

/* Quick-apply section inside inquiry modal */
.quick-apply { display: grid; gap: 12px; margin-bottom: 12px; }
.quick-apply__label { font-weight: 900; letter-spacing: 0.02em; color: var(--fg); font-size: 20px; }
.quick-apply__buttons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.qa { font-weight: 800; letter-spacing: 0.02em; padding: 12px 14px; font-size: 14px; }
.qa.qa--sponsor { background: linear-gradient(180deg, #f6e27a, #e5b80b); color: #111; border-color: rgba(229,184,11,0.95); }
.qa.qa--designer { background: linear-gradient(180deg, #6ee7b7, #35c59a); color: #0b4f37; border-color: rgba(53,197,154,0.9); }
.qa.qa--makeup { background: linear-gradient(180deg, #cfd8dc, #90a4ae); color: #102027; border-color: rgba(207,216,220,0.8); }
.qa.qa--stylist { background: linear-gradient(180deg, #cd7f32, #b06b28); color: #130a00; border-color: rgba(205,127,50,0.8); }
.qa.qa--volunteer { background: linear-gradient(180deg, #8ff0c8, #6ee7b7); color: #0b4f37; border-color: rgba(110,231,183,0.8); }
.qa.qa--media { background: linear-gradient(180deg, #111, #222); color: #f3f4f6; border-color: rgba(255,255,255,0.4); }
.qa::after { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }

@media (max-width: 900px) {
  .quick-apply__buttons { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* Table of Contents Drawer */
.toc { position: fixed; top: 0; bottom: 0; left: 0; width: min(360px, 86vw); background: rgba(12,12,16,0.96); border-right: 1px solid rgba(255,255,255,0.12); z-index: 1300; box-shadow: 0 10px 36px rgba(0,0,0,0.5); transform: translateX(-100%); transition: transform 220ms ease; display: grid; grid-template-rows: auto 1fr; }
.toc[aria-hidden="false"] { transform: translateX(0); }
.toc__header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.toc__title { font-weight: 800; letter-spacing: 0.02em; }
.toc__spacer { flex: 1; }
.toc__list { overflow: auto; padding: 12px; display: grid; gap: 12px; }
.toc__section { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.toc__blurb { font-size: 14px; color: var(--fg); opacity: 0.9; }

/* Floating CTA */
.cta { position: fixed; right: clamp(10px, 2vw, 16px); bottom: clamp(70px, 10vh, 120px); z-index: 900; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #111; border: none; font-weight: 800; padding: 12px 16px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,0.35); cursor: pointer; }
.cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

.s1-oval-ring, .s1-spotlight { display: none !important; }

@media (min-width: 901px) { [data-slide="s1"] .uhn-badge { display: none !important; } }

/* Toolbar hide/show controls */
.ui.hideable { transition: transform 220ms ease, opacity 220ms ease; }
.ui--hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
#btn-ui-hide { font-size: 18px; padding: 6px 10px; }
.ui-toggle { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 1001; font-size: 18px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.ui-toggle::after { content: ' Show toolbar'; font-weight: 900; letter-spacing: 0.03em; margin-left: 6px; }
#btn-ui-hide { font-size: 18px; padding: 6px 10px; }
.ui--hidden ~ .progress + #btn-ui-show { display: inline-block; }
#btn-ui-show[hidden] { display: none !important; }

/* Slide 2 desktop refinements – align portrait to right, no extra top gap */
@media (min-width: 901px) {
	[data-slide="s2"] .content { margin-top: 0; }
	[data-slide="s2"] .two-col { align-items: start; }
	[data-slide="s2"] .two-col > .portrait { justify-self: center; align-self: start; }
	[data-slide="s2"] .two-col > .portrait .portrait-oval { width: clamp(280px, 26vw, 380px); height: auto; border-radius: 14px; }
}

/* Remove unintended outer ring lines that might appear due to outlines */
[data-slide="s2"] .content, [data-slide="s2"] .two-col, [data-slide="s2"] .portrait { outline: none; }

/* Continue button at end of each slide */
.slide-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(32px, 5vh, 64px);
  padding: 16px 28px;
  background: linear-gradient(180deg, #f6e27a, #e5b80b);
  color: #111;
  border: 2px solid rgba(229,184,11,0.95);
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 
    0 0 0 3px rgba(229,184,11,0.25),
    0 14px 32px rgba(229,184,11,0.35),
    0 8px 22px rgba(0,0,0,0.35);
  transition: all 240ms cubic-bezier(.2,.65,.2,1);
  position: relative;
  overflow: hidden;
}

.slide-continue-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  pointer-events: none;
}

.slide-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 0 0 4px rgba(229,184,11,0.35),
    0 18px 42px rgba(229,184,11,0.45),
    0 12px 28px rgba(0,0,0,0.45);
}

.slide-continue-btn:active {
  transform: translateY(0);
}

.slide-continue-btn__text {
  display: block;
}

.slide-continue-btn__icon {
  display: block;
  font-size: 1.2em;
  transition: transform 240ms cubic-bezier(.2,.65,.2,1);
}

.slide-continue-btn:hover .slide-continue-btn__icon {
  transform: translateX(4px);
}

/* Ensure continue button is visible on mobile with proper spacing */
@media (max-width: 900px) {
  .slide-continue-btn {
    margin-top: clamp(24px, 4vh, 48px);
    padding: 14px 24px;
    font-size: 16px;
  }
}