/* Brand foundations (--tx-* tokens, .tx-btn, etc.) come from /css/iq-design.css
   which is loaded site-wide from app/layout.tsx. The Cormorant Garamond import
   was removed to satisfy the runtime self-containment rule (no Google Fonts);
   the .hp-* serif accents now fall back to Georgia, which is already declared
   on every selector that referenced Cormorant. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--tx-font-body);
  color: var(--tx-fg);
  background: var(--tx-white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Top utility bar */
.tx-top-bar {
  background: #050130;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--tx-font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}
.tx-top-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 48px;
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}
.tx-top-bar a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms;
}
.tx-top-bar a:hover { color: #fff; }

/* Main nav */
.tx-nav {
  background: #5433FE;
  position: sticky;
  top: 0;
  z-index: 50;
}
.tx-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tx-nav-left { display: flex; align-items: center; gap: 40px; }
.tx-nav-logo { height: 32px; display: block; }
.tx-nav-links { display: flex; gap: 4px; }
.tx-nav-links button {
  background: transparent; border: 0;
  color: #fff;
  font-family: var(--tx-font-body);
  font-weight: 500; font-size: 16px;
  padding: 8px 14px; cursor: pointer;
  letter-spacing: -0.01em;
}
.tx-nav-right { display: flex; gap: 24px; align-items: center; }
.tx-nav-right a {
  color: #fff;
  font-family: var(--tx-font-body);
  font-weight: 500; font-size: 16px;
  text-decoration: none; cursor: pointer;
}

/* Container */
.tx-wrap { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* Hero */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(84,51,254,0.55) 0%, rgba(84,51,254,0) 60%),
    radial-gradient(ellipse 70% 80% at 100% 100%, rgba(189,39,170,0.35) 0%, rgba(189,39,170,0) 55%),
    linear-gradient(180deg, #0F0471 0%, #090242 60%, #050130 100%);
  color: #fff;
  overflow: hidden;
  padding: 144px 0 176px;
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 80%);
}
.hero-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto; padding: 0 48px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #1CD3F5;
  padding: 8px 16px;
  border: 1px solid rgba(28,211,245,0.3);
  border-radius: 999px;
  background: rgba(28,211,245,0.06);
  margin-bottom: 32px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; background: #1CD3F5; border-radius: 50%;
  box-shadow: 0 0 12px #1CD3F5;
}
.hero h1 {
  font-family: var(--tx-font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 720px;
}
.hero h1 .accent {
  background: linear-gradient(92deg, #1CD3F5 0%, #8C79F7 50%, #DC53CB 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 .accent-pink {
  background: linear-gradient(92deg, #DC53CB 0%, #D219BA 50%, #910F80 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 600px;
  margin: 28px 0 36px;
}

/* Two-column hero layout */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 24px;
}
.hero-text { min-width: 0; }
.hero-cal-col {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* HP-style calendar frame */
.hp-cal-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(132, 92, 220, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 90%, rgba(28, 211, 245, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #11092e 0%, #0a0420 100%);
  box-shadow:
    0 30px 80px -30px rgba(9, 2, 66, 0.85),
    0 0 0 1px rgba(244, 213, 141, 0.10);
  overflow: hidden;
  padding: 18px 14px 10px;
}
.hp-cal-bg-glow {
  position: absolute; inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 10%, rgba(244, 213, 141, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 20% 90%, rgba(132, 92, 220, 0.18) 0%, transparent 40%);
  filter: blur(20px);
}
.hp-cal-svg {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  font-family: "Outfit", sans-serif;
}

/* HP calendar text styles — using a generic serif fallback to evoke the
   ornate Harry Potter-style serif from the reference */
.hp-eyebrow {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: #F4D58D;
}
.hp-control-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: #F4D58D;
}
.hp-seat-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  fill: #090242;
}
.hp-month {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.05em;
  fill: #F4D58D;
}
.hp-legend {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  fill: rgba(244, 213, 141, 0.7);
}
.hp-dayhead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: rgba(244, 213, 141, 0.85);
}
.hp-daynum {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: 11px;
  fill: rgba(244, 213, 141, 0.75);
}
.hp-daynum.is-dim { fill: rgba(244, 213, 141, 0.25); }
.hp-anniv {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: #F4D58D;
}
.hp-pill-time {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 9px;
  fill: #fff;
}
.hp-pill-price {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 9px;
  fill: rgba(255,255,255,0.92);
}

/* HP calendar animations */
@keyframes hp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hp-divider-grow {
  from { opacity: 0; transform: scaleX(0.7); }
  to { opacity: 1; transform: scaleX(1); }
}
.hp-divider { transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes hp-pill-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: var(--pill-op, 1); transform: translateY(0) scale(1); }
}
.hp-pill { transform-origin: center; transform-box: fill-box; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.hero-meta {
  display: flex; gap: 56px; margin-top: 48px; padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.hero-meta-item {
  font-family: var(--tx-font-body);
  font-size: 14px; color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.hero-meta-item strong {
  display: block; color: #fff;
  font-family: var(--tx-font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em;
  text-transform: none; margin-top: 4px;
}

/* Hero visual */
.hero-visual {
  position: relative;
  margin-top: 64px;
  padding: 0 48px;
  max-width: 1440px;
  margin-left: auto; margin-right: auto;
}

/* Stat block (Section 2) */
.stats-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #FFFFFF 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(84, 51, 254, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 70% 70% at 0% 100%, rgba(28, 211, 245, 0.035) 0%, transparent 65%),
    linear-gradient(180deg, #FAFAFB 0%, #EFEFF3 100%);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.stats-section > * { position: relative; z-index: 1; }

.stats-eyebrow {
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-purple-blue);
  margin-bottom: 18px;
}

/* 50/50 intro row above the stat cells */
.stats-intro-grid {
  display: grid;
  /* Body copy is capped at ~520px max-width so the text column doesn't
     need a full 1fr — give the chart more horizontal space (text :
     chart = 1 : 1.5) so the dashboard reads at a useful size and the
     y-axis labels have room to breathe. */
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
}
.stats-intro-text { min-width: 0; }
.stats-intro-anim {
  position: relative;
  width: 100%;
  /* Match the SVG viewBox aspect (640:420 = 32:21) so the inner dashboard
     fills the container with no top/bottom letterboxing. The SVG provides
     its own outer card (white fill + border + drop-shadow), so no need
     for an additional background or border on this wrapper. */
  aspect-ratio: 32 / 21;
}
.stats-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--tx-dark-blue);
  margin: 0 0 20px;
  max-width: 520px;
}
.stats-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.55;
  color: var(--tx-smokey-blue);
  max-width: 520px;
  margin: 0;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid #D8D6E8;
}
.stat-cell {
  padding: 56px 32px 12px 0;
  border-bottom: 1px solid #D8D6E8;
  position: relative;
}
.stat-cell + .stat-cell {
  padding-left: 40px;
  border-left: 1px solid #D8D6E8;
}

/* Stat-row scroll-in (rise from below, staggered) */
.stat-row .stat-cell {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.stat-row[data-in-view="1"] .stat-cell {
  opacity: 1;
  transform: translateY(0);
}
.stat-num {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(64px, 7.5vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--tx-dark-blue);
  margin: 0 0 18px;
}
.stat-num .pct { color: var(--tx-purple-blue); }
.stat-label {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--tx-dark-blue);
  margin: 0 0 12px;
}
.stat-desc {
  font-family: var(--tx-font-body);
  font-size: 15px; line-height: 1.55;
  color: var(--tx-smokey-blue);
  max-width: 380px;
  margin: 0;
}

/* Stats animation (50/50 right side) */
.stats-anim {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.stats-anim-chrome {
  padding: 20px 24px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 12px;
}
.stats-anim-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tx-smokey-blue);
}
.stats-anim-tag .dot {
  width: 7px; height: 7px; background: #30D37F; border-radius: 50%;
  box-shadow: 0 0 8px #30D37F;
  animation: stats-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes stats-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.stats-anim-rev {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--tx-dark-blue);
  display: inline-flex; align-items: baseline; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.stats-anim-rev .trend {
  font-size: 12px;
  font-weight: 600;
  color: #1a8a4e;
  letter-spacing: 0.02em;
}
.stats-anim-svg {
  flex: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.stats-axis {
  font-family: var(--tx-font-body);
  font-size: 11px;
  font-weight: 500;
  fill: var(--tx-smokey-blue);
  opacity: 0.7;
}
.stats-pin-label {
  font-family: var(--tx-font-display);
  font-size: 11px;
  font-weight: 600;
  fill: var(--tx-dark-blue);
  letter-spacing: 0;
}
.stats-pin-sub {
  font-family: var(--tx-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@keyframes stats-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stats-line-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes stats-pop {
  from { opacity: 0; transform: scale(0.5); transform-origin: center; }
  to { opacity: 1; transform: scale(1); }
}
@keyframes stats-pulse {
  0% { transform: scale(0.8); opacity: 0.7; transform-origin: center; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes stats-pin {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.stats-anim-svg circle[r="14"] { transform-box: fill-box; }

/* Track record */
.track-section {
  background: #fff;
  padding: 120px 0;
  border-top: 1px solid var(--tx-line);
}
.track-eyebrow {
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-purple-blue);
  margin-bottom: 18px;
}
.track-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tx-dark-blue);
  margin: 0 0 20px;
  max-width: 880px;
}
.track-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.55;
  color: var(--tx-smokey-blue);
  max-width: 720px;
  margin: 0 0 64px;
}

/* Logo marquee styles (.marquee-wrap / .marquee-track / .client-logo)
   moved to public/css/iq-design.css so the same component renders on
   every page — venues, /solutions/sales-reporting, /solutions/marketing-spend
   — without each page having to load this stylesheet. */

/* Credentials row */
.credentials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 80px;
  border: 1px solid var(--tx-line);
  background: #FAFAFC;
}
.credential {
  padding: 36px 32px;
  border-right: 1px solid var(--tx-line);
  display: flex; align-items: flex-start; gap: 18px;
}
.credential:last-child { border-right: 0; }
.credential-icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--tx-dark-blue);
  color: #1CD3F5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.credential-stat {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--tx-dark-blue);
  line-height: 1; margin: 4px 0 6px;
}
.credential-label {
  font-family: var(--tx-font-body);
  font-size: 14px; line-height: 1.4;
  color: var(--tx-smokey-blue);
}

/* Credentials scroll-in (left → right stagger) */
.credentials .credential {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.credentials[data-in-view="1"] .credential {
  opacity: 1;
  transform: translateX(0);
}

/* Case study */
.case-section {
  background: #090242;
  background-image:
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(189,39,170,0.35) 0%, rgba(189,39,170,0) 60%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(84,51,254,0.4) 0%, rgba(84,51,254,0) 60%);
  padding: 120px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.case-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.case-eyebrow {
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #1CD3F5;
  margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.case-eyebrow .bar { width: 24px; height: 1px; background: #1CD3F5; }

.case-bignum {
  font-family: var(--tx-font-display);
  font-weight: 800;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: #1CD3F5;
  margin: 8px 0 24px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 24px;
  text-shadow: 0 0 60px rgba(28, 211, 245, 0.35);
}
.case-bignum .suffix {
  background: linear-gradient(135deg, #1CD3F5 0%, #8C79F7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-left: -4px;
}
.case-bignum-tag {
  font-family: var(--tx-font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 16px;
  max-width: 220px;
  line-height: 1.3;
}
.case-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.case-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0 0 32px;
  max-width: 540px;
}
.case-stats { display: flex; gap: 48px; margin-bottom: 40px; }
.case-stat { }
.case-stat-num {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 44px; line-height: 1;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 6px;
}
.case-stat-num .accent { color: #1CD3F5; }
.case-stat-label {
  font-family: var(--tx-font-body);
  font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.case-visual {
  position: relative;
  perspective: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 580px;
}
.case-cover-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
}
.case-cover-glow {
  position: absolute;
  inset: -10% -8% -8% -10%;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(28, 211, 245, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(189, 39, 170, 0.30) 0%, transparent 55%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}
.case-cover {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 60px 80px -30px rgba(0, 0, 0, 0.65),
    0 30px 60px -20px rgba(28, 211, 245, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform-origin: 60% 50%;
  z-index: 1;
  opacity: 0;
  transform: translateY(28px) rotate(-3deg) scale(0.96);
  transition:
    opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.case-visual[data-in-view="1"] .case-cover {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}
.case-cover-glow {
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.case-visual[data-in-view="1"] .case-cover-glow {
  opacity: 1;
}
.case-cover-stage:hover .case-cover {
  transform: perspective(1600px) rotateY(-4deg) rotateX(2deg) rotateZ(-3deg) translateY(-6px);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes case-cover-rotate-in {
  0% {
    opacity: 0;
    transform: perspective(1600px) rotateY(-32deg) rotateX(8deg) rotateZ(-12deg) translateX(40px) translateY(20px) scale(0.9);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(1600px) rotateY(-12deg) rotateX(3deg) rotateZ(-6deg) translateX(0) translateY(0) scale(1);
  }
}

/* Why TickX section */
.why-section {
  background: #fff;
  padding: 140px 0;
}
.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 96px;
}
.why-eyebrow {
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-purple-blue);
  margin-bottom: 18px;
}
.why-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--tx-dark-blue);
  margin: 0 0 28px;
}

/* Static "destination" highlight in why-section headline */
.why-destination {
  position: relative;
  display: inline-block;
  background: linear-gradient(92deg, #BD27AA 0%, #5433FE 50%, #1CD3F5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding: 0 4px 0 2px;
}
.why-destination::after {
  content: "";
  position: absolute;
  left: 0; right: 4px;
  bottom: 6px;
  height: 14px;
  background: linear-gradient(135deg, #1CD3F5 0%, #5433FE 60%, #BD27AA 100%);
  opacity: 0.32;
  border-radius: 4px;
  z-index: -1;
}

/* Network diagram under the headline */
.why-network-wrap {
  margin-top: 36px;
  position: relative;
}

  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--tx-dark-blue);
  margin: 0 0 28px;
}
.why-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.6;
  color: var(--tx-smokey-blue);
  margin: 0 0 16px;
}
.why-list-title {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tx-purple-blue);
  margin: 16px 0 24px;
}
.why-list {
  list-style: none; padding: 0; margin: 0;
}
.why-list li {
  padding: 24px 0;
  border-bottom: 1px solid var(--tx-line);
  display: flex; gap: 24px;
  align-items: flex-start;
}
.why-list li:first-child { border-top: 1px solid var(--tx-line); }
.why-list .num {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 14px;
  color: var(--tx-purple-blue);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 32px;
  padding-top: 5px;
}
.why-list .txt {
  font-family: var(--tx-font-display);
  font-weight: 600; font-size: 22px;
  letter-spacing: -0.01em; line-height: 1.3;
  color: var(--tx-dark-blue);
}

/* Product / feature row */
.feature-section {
  padding: 120px 0;
  background: #fff;
}
.feature-section.alt { background: #F7F7F7; }
.feature-section.dark {
  background: #090242;
  background-image:
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(84,51,254,0.45) 0%, rgba(84,51,254,0) 55%),
    radial-gradient(ellipse 50% 50% at 90% 80%, rgba(28,211,245,0.18) 0%, rgba(28,211,245,0) 55%);
  color: #fff;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  align-items: center;
}
.feature-grid.reversed { grid-template-columns: 1.1fr 1fr; }
.feature-grid.reversed .feature-text { order: 2; }
.feature-grid.reversed .feature-art { order: 1; }

/* Header-with-art variant: eyebrow + h2 sit in the same column as the art,
   directly above it. Used by the TickX IQ section so the heading is bound
   to the visual it's framing instead of orphaned across an empty row. */
.feature-grid.feature-grid--header-with-art {
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}
.feature-art-col { display: flex; flex-direction: column; gap: 40px; }
.feature-art-header { /* eyebrow + h2 wrapper inside the art column */ }
.feature-text--no-header { /* reserved for any header-with-art-specific tweaks */ }
.feature-eyebrow {
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-purple-blue);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.feature-section.dark .feature-eyebrow { color: #1CD3F5; }
.feature-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--tx-dark-blue);
  margin: 0 0 22px;
}
.feature-section.dark .feature-h2 { color: #fff; }
.feature-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.6;
  color: var(--tx-smokey-blue);
  margin: 0 0 32px;
  max-width: 560px;
}
.feature-section.dark .feature-body { color: rgba(255,255,255,0.78); }
.feature-bullets {
  list-style: none; padding: 0; margin: 0 0 32px;
}
.feature-bullets li {
  padding: 18px 0;
  border-top: 1px solid var(--tx-line);
  font-family: var(--tx-font-body);
  font-size: 16px; line-height: 1.5;
  color: var(--tx-fg);
  display: flex; gap: 18px;
  align-items: flex-start;
}
.feature-bullets li:last-child { border-bottom: 1px solid var(--tx-line); }
.feature-bullets .num {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tx-purple-blue);
  width: 28px; flex-shrink: 0; padding-top: 3px;
}
.feature-section.dark .feature-bullets li {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}
.feature-section.dark .feature-bullets .num { color: #1CD3F5; }

.feature-bullets .bullet-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tx-purple-blue);
  margin-top: -2px;
}
.feature-bullets.has-icons li { gap: 16px; }

/* Feature art frames */
.feature-art {
  position: relative;
}
.art-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 30px 80px -20px rgba(9,2,66,0.25),
    0 0 0 1px rgba(9,2,66,0.06);
}
.art-frame.dark { background: #0a052e; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); }
.art-frame.is-transparent { background: transparent; box-shadow: none; overflow: visible; }
.art-frame img { width: 100%; display: block; }
.art-glow {
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(84,51,254,0.35) 0%, transparent 60%);
  filter: blur(40px);
  z-index: -1;
}

/* Hero visual frame */
.hero-product-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 24px;
  backdrop-filter: blur(10px);
}
.hero-product-card .left img,
.hero-product-card .right img {
  width: 100%; display: block; border-radius: 4px;
}
.hero-product-card .right {
  display: grid; grid-template-rows: 1fr 1fr; gap: 24px;
}
.hero-product-card .right .stat-overlay {
  background: rgba(9,2,66,0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 180px;
}
.hero-product-card .right .stat-overlay .num {
  font-family: var(--tx-font-display);
  font-weight: 800; font-size: 56px;
  letter-spacing: -0.03em; line-height: 1;
  color: #fff;
}
.hero-product-card .right .stat-overlay .num .pct { color: #1CD3F5; }
.hero-product-card .right .stat-overlay .lbl {
  font-family: var(--tx-font-body);
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-top: 14px;
}
.hero-product-card .badge {
  position: absolute; top: -16px; left: 24px;
  background: #1CD3F5; color: #090242;
  font-family: var(--tx-font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
}

/* Testimonials */
.testimonial-section {
  background: #fff;
  padding: 120px 0;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.testimonial-card {
  background: #fff;
  padding: 48px;
  border: 1px solid var(--tx-line);
  display: flex; flex-direction: column;
  position: relative;
  min-height: 480px;
}
.testimonial-quote-mark {
  font-family: var(--tx-font-display);
  font-weight: 800;
  font-size: 96px;
  line-height: 0.6;
  color: var(--tx-purple-blue);
  margin-bottom: 12px;
}
.testimonial-quote {
  font-family: var(--tx-font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--tx-dark-blue);
  margin: 0 0 32px;
  flex: 1;
}
.testimonial-attr {
  display: flex; gap: 16px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--tx-line);
}
.testimonial-portrait {
  width: 56px; height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tx-font-display); font-weight: 700;
  font-size: 18px; color: #fff;
  letter-spacing: -0.01em;
}
/* Match the canonical Testimonial component styling (lib/components/
   testimonials.ts → renderTestimonialCard): logo is a naked image, no
   background, no border-radius, just placed at roughly the proportions
   of the previous show-logo box (~140 × 90). */
.testimonial-show-logo {
  width: 140px; height: 90px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.testimonial-show-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.testimonial-name {
  font-family: var(--tx-font-display); font-weight: 700;
  font-size: 16px; color: var(--tx-dark-blue);
  letter-spacing: -0.005em;
}
.testimonial-role {
  font-family: var(--tx-font-body);
  font-size: 14px; color: var(--tx-smokey-blue);
  margin-top: 4px;
}

/* Marketing integrations marquee */
.integrations-section {
  background: #5433FE;
  background-image:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(28,211,245,0.25) 0%, rgba(28,211,245,0) 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(189,39,170,0.3) 0%, rgba(189,39,170,0) 60%);
  padding: 120px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.integrations-section .feature-eyebrow { color: #1CD3F5; }
.integrations-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  max-width: 760px;
}
.integrations-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 580px;
  margin: 0 0 64px;
}
.integration-marquee-wrap { overflow: hidden; padding: 8px 0; }
.integration-marquee-wrap::before, .integration-marquee-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2;
  pointer-events: none;
}
.integration-marquee-wrap::before { left: 0; background: linear-gradient(90deg, #5433FE 0%, transparent 100%); }
.integration-marquee-wrap::after { right: 0; background: linear-gradient(270deg, #5433FE 0%, transparent 100%); }
.integration-row {
  display: flex; gap: 16px;
  margin-bottom: 16px;
  width: max-content;
  /* Same compositor-promotion treatment as the client logo marquee — keeps
     the long horizontal translates GPU-driven on mobile so the rows don't
     judder or blank out under load. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.integration-row.r1 { animation: marquee 60s linear infinite; }
.integration-row.r2 { animation: marquee-reverse 50s linear infinite; }
@keyframes marquee-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.integration-tile {
  flex-shrink: 0;
  width: 200px; height: 96px;
  background: rgba(255,255,255,0.97);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 24px;
  box-shadow: 0 8px 24px -10px rgba(9,2,66,0.4);
}
.integration-tile img { max-width: 100%; max-height: 48px; object-fit: contain; }

/* Ticketing reassurance */
.ticketing-callout-section {
  background: #fff;
  padding: 100px 0;
  border-top: 1px solid var(--tx-line);
}
.ticketing-callout {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 64px; align-items: center;
}
.ticketing-h3 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tx-dark-blue);
  margin: 0 0 16px;
}
.ticketing-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.6;
  color: var(--tx-smokey-blue);
  max-width: 520px;
}
.ticketing-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border: 1px solid var(--tx-line);
  background: #FAFAFC;
}
.ticketing-logo-cell {
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 20px;
  background: #fff;
}
/* Cap both axes so logos with very different aspect ratios — Gigantic
   (wide wordmark) vs. Spektrix (square mark) — read at the same visual
   weight in the grid. */
.ticketing-logo-cell img { max-width: 70%; max-height: 40px; width: auto; height: auto; object-fit: contain; opacity: 0.85; }

/* Scroll-in animation for ticketing logos */
.ticketing-callout-section .ticketing-logo-cell {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.ticketing-callout-section[data-in-view="1"] .ticketing-logo-cell {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Final CTA / form */
.cta-form-section {
  background: linear-gradient(180deg, #090242 0%, #050130 100%);
  background-image:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(189,39,170,0.3) 0%, rgba(189,39,170,0) 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(28,211,245,0.18) 0%, rgba(28,211,245,0) 55%),
    linear-gradient(180deg, #0F0471 0%, #090242 100%);
  padding: 120px 0;
  color: #fff;
}
.cta-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
}
.cta-form-h2 {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.cta-form-body {
  font-family: var(--tx-font-body);
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0 0 40px;
  max-width: 480px;
}
.cta-form-checks {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cta-form-checks li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: var(--tx-font-body);
  font-size: 15px; color: rgba(255,255,255,0.85);
  display: flex; gap: 16px; align-items: center;
}
.cta-form-checks .num {
  font-family: var(--tx-font-display);
  font-weight: 700; font-size: 12px;
  color: #1CD3F5; letter-spacing: 0.08em;
}
.form-card {
  background: #fff;
  padding: 48px;
  color: var(--tx-dark-blue);
  position: relative;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-family: var(--tx-font-display);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--tx-dark-blue);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-family: var(--tx-font-body);
  font-size: 16px;
  color: var(--tx-dark-blue);
  background: #fff;
  border: 1px solid #D8D6E8;
  border-radius: 5px;
  outline: none;
  transition: border-color 180ms, box-shadow 180ms;
}
.form-field textarea {
  height: 100px; padding: 14px 16px; resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--tx-purple-blue);
  box-shadow: 0 0 0 3px rgba(84,51,254,0.12);
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23090242' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 40px; }

/* Footer */
.tx-footer {
  background: #050130;
  color: #fff;
  padding: 80px 0 32px;
}
.tx-footer-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1.2fr 2.5fr; gap: 64px;
}
.tx-footer-brand img { height: 36px; margin-bottom: 24px; }
.tx-footer-brand p {
  font-family: var(--tx-font-body); font-size: 15px;
  color: rgba(255,255,255,0.65); max-width: 320px;
  line-height: 1.5; margin: 0;
}
.tx-footer-cols {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 32px;
}
.tx-footer-col h4 {
  font-family: var(--tx-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 18px;
}
.tx-footer-col a {
  display: block;
  font-family: var(--tx-font-body); font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 6px 0;
}
.tx-footer-col a:hover { color: #1CD3F5; }
.tx-footer-bottom {
  max-width: 1440px; margin: 64px auto 0; padding: 24px 48px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between;
  font-family: var(--tx-font-body); font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* Section header pattern */
.section-eyebrow {
  font-family: var(--tx-font-body);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tx-purple-blue);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-eyebrow .bar { width: 24px; height: 1px; background: currentColor; }

/* Anchor link button */
.anchor-link {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--tx-font-display);
  font-weight: 600; font-size: 17px;
  cursor: pointer;
  letter-spacing: -0.005em;
  padding: 18px 0;
}
.anchor-link .arr {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform 200ms;
}
.anchor-link:hover .arr { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1100px) {
  .case-grid, .why-grid, .feature-grid, .feature-grid.reversed,
  .testimonial-grid, .integrations-grid, .ticketing-callout, .cta-form-grid,
  .hero-grid, .stats-intro-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .hero-cal-col { order: 2; }
  .feature-grid.reversed .feature-text { order: 1; }
  .feature-grid.reversed .feature-art { order: 2; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-cell { padding: 40px 0 !important; border-left: 0 !important; }
  .credentials { grid-template-columns: repeat(2, 1fr); }
  .credential:nth-child(2) { border-right: 0; }
  .credential:nth-child(1), .credential:nth-child(2) { border-bottom: 1px solid var(--tx-line); }
  .ticketing-logos { grid-template-columns: repeat(3, 1fr); }
  .tx-footer-inner { grid-template-columns: 1fr; }
  .tx-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tx-wrap { padding: 0 24px; }
  .hero-inner { padding: 0 24px; }
  .tx-nav-links { display: none; }
  .tx-top-bar-inner { padding: 10px 24px; flex-wrap: wrap; gap: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .tx-footer-cols { grid-template-columns: 1fr 1fr; }
  .case-stats { flex-wrap: wrap; gap: 24px; }
  .ticketing-logos { grid-template-columns: repeat(2, 1fr); }
  /* Tighten the logo cap on small screens so wide wordmarks (Gigantic) and
     the typeset Tessitura mark stop dwarfing the square ones. */
  .ticketing-logo-cell { height: 80px; padding: 14px 16px; }
  .ticketing-logo-cell img { max-height: 28px; max-width: 80%; }
  .ticketing-logo-cell .ticketing-tessitura { font-size: 16px !important; }
  .hero-product-card { grid-template-columns: 1fr; }
  .testimonial-card { padding: 32px; min-height: auto; }
  /* Final CTA HubSpot form: desktop padding (48px on every side) eats too
     much room on a 375px viewport — the form fields shrink to ~250px and
     the form feels boxed-in. Drop horizontal padding so fields take the
     full content width. Keep some vertical padding so the form doesn't
     feel flush against the section background. */
  .iq-page-root .form-card { padding: 28px 20px !important; }

  /* The canonical Webflow nav (.secondarynavigationwrapper + .navmenu) stacks
     on mobile to ~110–130px tall; the top padding clears the nav band
     without leaving an awkward dead-space gap between the nav and the
     eyebrow chip. The bottom padding gives the calendar room to breathe
     between its bottom edge and the start of the stats section. The
     overflow override is the load-bearing fix here: the hero's desktop
     "overflow: hidden" was clipping the calendar's bottom rows on a
     stacked mobile layout because the hero content (text + calendar)
     stack is much taller than the desktop two-column hero ever was — let
     content paint past the hero's visual bottom on mobile. The page root
     keeps overflow-x: clip so this never causes horizontal scroll. */
  .iq-page-root .hero {
    /* Webflow's global .hero rule (public/css/tickx-styles.css) hard-codes
       height: 816px from the desktop two-column layout. On mobile the hero
       stacks (text + calendar) and content goes past 1200px, but the fixed
       816px clamp left the calendar's bottom rows overflowing the hero box.
       height: auto lets the hero grow to its content; min-height: auto
       neutralises any flex-derived intrinsic minimum that would otherwise
       restore the clamp. */
    height: auto !important;
    min-height: auto !important;
    padding-top: 112px;
    padding-bottom: 120px;
    overflow: visible;
  }
  .iq-page-root .hero-eyebrow { margin-bottom: 24px; }
  .iq-page-root .anchor-link { gap: 16px; }
  /* Add vertical breathing room between the H1/CTAs and the calendar so the
     calendar isn't sitting tight against the buttons on a stacked layout. */
  .iq-page-root .hero-grid { gap: 72px !important; }
}


/* ===== Seatmap Animation ===== */
.seatmap-anim {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #0A0628 0%, #15094a 100%);
  font-family: var(--tx-font-body);
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
}
.seatmap-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 75% 110%, rgba(84,51,254,0.25) 0%, rgba(84,51,254,0) 60%),
    radial-gradient(700px 400px at 15% -20%, rgba(28,211,245,0.15) 0%, rgba(28,211,245,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.sm-topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,6,40,0.7);
  backdrop-filter: blur(6px);
  height: 34px;
}
.sm-back {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
}
.sm-chips {
  position: relative; z-index: 3;
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(10,6,40,0.5);
}
.sm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: var(--tx-font-body);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  letter-spacing: 0.02em;
  transition: opacity 360ms ease, transform 360ms ease;
  white-space: nowrap;
}
.sm-chip-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.sm-chip-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px;
  font-size: 9px;
  background: #1CD3F5;
  color: #0A0628;
  border-radius: 1.5px;
  font-weight: 700;
}

.sm-stage-wrap {
  position: absolute;
  top: 80px;       /* below topbar + chips */
  left: 0; right: 0;
  bottom: 0;
  z-index: 1;
}
.sm-svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 50ms linear;
}

/* Side widget — best available */
.sm-best {
  position: absolute;
  top: 96px;
  left: 14px;
  z-index: 4;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(28,211,245,0.35);
  border-radius: 3px;
  padding: 10px 12px;
  width: 130px;
  font-family: var(--tx-font-body);
  transition: opacity 400ms ease, transform 400ms ease;
}
.sm-best-label {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
  margin-bottom: 6px;
}
.sm-best-counter {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sm-best-btn {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(28,211,245,0.55);
  color: #1CD3F5;
  border-radius: 2px;
  font-size: 11px;
  cursor: pointer;
}
.sm-best-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1CD3F5;
  color: #0A0628;
  font-weight: 700;
  font-family: var(--tx-font-display);
  border-radius: 50%;
  font-size: 11px;
}
.sm-best-link {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  color: #1CD3F5;
  cursor: pointer;
}

/* Right info card */
.sm-info {
  position: absolute;
  top: 96px;
  right: 14px;
  z-index: 4;
  width: 200px;
  border: 1px solid rgba(28,211,245,0.45);
  border-radius: 3px;
  background: rgba(10,6,40,0.65);
  backdrop-filter: blur(10px);
  padding: 10px;
  transition: opacity 400ms ease, transform 400ms ease;
  font-family: var(--tx-font-body);
}
.sm-info-thumb {
  display: flex;
  margin-bottom: 8px;
  gap: 8px;
  align-items: flex-start;
}
.sm-info-thumb-inner {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #5433FE, #1CD3F5);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sm-info-meta {
  margin-bottom: 8px;
}
.sm-info-title {
  font-family: var(--tx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 3px;
}
.sm-info-sub {
  font-size: 9px;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.sm-info-cta {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-family: var(--tx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: all 250ms ease;
  margin-bottom: 8px;
}
.sm-info-cta.active {
  color: #fff;
  background: linear-gradient(90deg, #5433FE, #1CD3F5);
  border-color: transparent;
  box-shadow: 0 6px 18px -4px rgba(28,211,245,0.55);
}
.sm-info-dates {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.sm-info.compact {
  width: 200px;
  padding: 12px;
}
.sm-info.compact .sm-info-cta { margin-bottom: 10px; }
.sm-info-date {
  text-align: center;
  padding: 6px 4px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  font-family: var(--tx-font-body);
}
.sm-info-date.active {
  border-color: rgba(28,211,245,0.55);
  background: rgba(28,211,245,0.08);
}
.sm-info-date-d {
  font-family: var(--tx-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.sm-info-date-t {
  font-size: 8px;
  color: rgba(255,255,255,0.7);
  margin-top: 1px;
}
.sm-info-date-n {
  font-size: 7px;
  color: rgba(28,211,245,0.85);
  margin-top: 1px;
  letter-spacing: 0.04em;
}

/* Selection tooltip */
.sm-tooltip {
  position: absolute;
  z-index: 5;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.96);
  color: #0A0628;
  border-radius: 3px;
  padding: 8px 12px;
  font-family: var(--tx-font-body);
  font-size: 11px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6);
  transition: opacity 250ms ease;
  pointer-events: none;
  text-align: left;
  min-width: 180px;
}
.sm-tooltip-row {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600;
}
.sm-tooltip-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.sm-tooltip-label {
  font-size: 10px;
  letter-spacing: 0.02em;
}
.sm-tooltip-price {
  font-family: var(--tx-font-display);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
  color: #0A0628;
}
.sm-tooltip-price span {
  font-family: var(--tx-font-body);
  font-weight: 400;
  color: rgba(10,6,40,0.55);
  font-size: 10px;
}

/* Scan effect during boot */
.sm-scan {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, transparent 0%, rgba(28,211,245,0.05) 50%, transparent 100%);
  pointer-events: none;
  transition: opacity 300ms ease;
}

@media (max-width: 1100px) {
  .sm-info { width: 160px; }
  .sm-best { width: 110px; }
}
@media (max-width: 760px) {
  .sm-info { display: none; }
  .sm-best { display: none; }
  .sm-stage-wrap { top: 76px; }
}


/* ===== Network Diagram ===== */
.network-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  max-width: 540px;
}
.nd-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nd-node-label {
  font-family: var(--tx-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--tx-fg);
  text-transform: uppercase;
}
.nd-node-label-sub {
  font-family: var(--tx-font-body);
  font-size: 9px;
  fill: rgba(9,2,66,0.55);
  letter-spacing: 0;
}


/* ===== Why Bullet Showcase ===== */
.why-showcase {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 5 / 3;
  background: linear-gradient(160deg, #FAFAFB 0%, #F3F1FE 100%);
  border-radius: 8px;
  padding: 8px 12px 28px;
  border: 1px solid rgba(84,51,254,0.10);
  box-shadow: 0 30px 60px -30px rgba(84,51,254,0.18);
  overflow: hidden;
}
.why-showcase-svg {
  width: 100%; height: 100%;
  display: block;
}
.why-showcase-dots {
  position: absolute;
  left: 16px; right: 16px;
  bottom: 10px;
  display: flex; gap: 6px;
  z-index: 2;
}
.why-showcase-dot {
  flex: 1;
  height: 2px;
  background: rgba(84,51,254,0.12);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.why-showcase-dot-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5433FE, #1CD3F5);
  border-radius: 1px;
  transition: width 80ms linear;
}
.why-showcase-dot.active .why-showcase-dot-fill {
  box-shadow: 0 0 8px rgba(28,211,245,0.6);
}

/* Active bullet highlight */
.why-list .why-list-item {
  transition: background 300ms ease, padding 300ms ease;
  padding-left: 0;
  position: relative;
}
.why-list .why-list-item.active {
  padding-left: 14px;
}
.why-list .why-list-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #5433FE, #1CD3F5);
  border-radius: 2px;
}
.why-list .why-list-item.active .num {
  color: #5433FE;
}
.why-list .why-list-item.active .txt {
  color: #090242;
}
.why-list .why-list-item .num,
.why-list .why-list-item .txt {
  transition: color 300ms ease, opacity 300ms ease;
}
.why-list .why-list-item:not(.active) .num,
.why-list .why-list-item:not(.active) .txt {
  opacity: 0.55;
}


/* ===== Upgrade Animation ===== */
.upgrade-anim {
  width: 100%;
  /* Match the SVG viewBox aspect (480 x 600 = 4/5) so the SVG fills the
     container with no letterbox margins. Required for the modal backdrop
     dim to visibly cover the entire art column on desktop. */
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #FAFAFB 0%, #EEE9FE 100%);
  border-radius: 8px;
  border: 1px solid rgba(84,51,254,0.10);
  box-shadow: 0 30px 60px -30px rgba(84,51,254,0.18);
  position: relative;
  overflow: hidden;
  transition: opacity 400ms ease;
}
.ua-svg {
  width: 100%; height: 100%;
  display: block;
}


/* ===== Restaurant Reservation Card (dark, sharp) ===== */
.restaurant-resv {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}
@keyframes rr-card-in {
  from { opacity: 0; transform: translateY(18px) rotateX(8deg) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    rotateX(0)    scale(1); }
}
@keyframes rr-row-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rr-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes rr-photo-in {
  from { opacity: 0; transform: scale(1.08); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

.rr-card {
  width: 100%;
  max-width: 560px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(84,51,254,0.22) 0%, rgba(84,51,254,0) 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(28,211,245,0.10) 0%, rgba(28,211,245,0) 60%),
    #0A0628;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 60px -28px rgba(0,0,0,0.7);
  opacity: 0;
}

/* Initial state: everything hidden */
.rr-card > .rr-top,
.rr-card > .rr-divider,
.rr-card > .rr-options-head,
.rr-card > .rr-rows,
.rr-card > .rr-foot {
  opacity: 0;
}
.rr-card .rr-row { opacity: 0; }
.rr-card .rr-photo { opacity: 0; }

/* Animation only when section scrolls into view */
.restaurant-resv[data-in-view="1"] .rr-card {
  animation: rr-card-in 0.8s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
.restaurant-resv[data-in-view="1"] .rr-card > .rr-top {
  animation: rr-row-in 0.55s cubic-bezier(0.22,1,0.36,1) 0.55s forwards;
}
.restaurant-resv[data-in-view="1"] .rr-card > .rr-divider {
  animation: rr-line-grow 0.7s cubic-bezier(0.22,1,0.36,1) 0.85s forwards;
  opacity: 1;
}
.restaurant-resv[data-in-view="1"] .rr-card > .rr-options-head {
  animation: rr-row-in 0.55s cubic-bezier(0.22,1,0.36,1) 0.95s forwards;
}
.restaurant-resv[data-in-view="1"] .rr-card > .rr-rows {
  animation: rr-row-in 0.55s cubic-bezier(0.22,1,0.36,1) 1.10s forwards;
}
.restaurant-resv[data-in-view="1"] .rr-card > .rr-foot {
  animation: rr-row-in 0.55s cubic-bezier(0.22,1,0.36,1) 1.55s forwards;
}
.restaurant-resv[data-in-view="1"] .rr-photo {
  animation: rr-photo-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.7s forwards;
}
.restaurant-resv[data-in-view="1"] .rr-rows .rr-row {
  animation: rr-row-in 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
.restaurant-resv[data-in-view="1"] .rr-rows .rr-row:nth-child(1) { animation-delay: 1.25s; }
.restaurant-resv[data-in-view="1"] .rr-rows .rr-row:nth-child(2) { animation-delay: 1.37s; }
.restaurant-resv[data-in-view="1"] .rr-rows .rr-row:nth-child(3) { animation-delay: 1.49s; }

.rr-eyebrow {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  margin: 0 0 10px;
}

.rr-top { display: flex; flex-direction: column; gap: 16px; }
.rr-top-main {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: stretch;
}
.rr-photo {
  width: 120px;
  height: 120px;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #1a0d4a 0%, #0A0628 100%);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.6);
  opacity: 0;
}
.rr-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rr-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
  pointer-events: none;
}

.rr-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rr-name {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #fff;
  letter-spacing: -0.005em;
}
.rr-name-dim { color: rgba(255,255,255,0.55); font-weight: 500; }
.rr-body {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.rr-menu {
  margin-top: 4px;
  display: inline-block;
  font-family: var(--tx-font-display), sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #1CD3F5;
  text-decoration: none;
}
.rr-menu:hover { color: #fff; }

.rr-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0;
  transform-origin: left center;
}

.rr-options-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rr-options-label {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.rr-party {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rr-party-btn {
  width: 28px; height: 28px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.30);
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--tx-font-display), sans-serif;
  transition: background 120ms ease, border-color 120ms ease;
}
.rr-party-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.55);
}
.rr-party-count {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.rr-rows { display: flex; flex-direction: column; gap: 10px; }
.rr-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  opacity: 0;
}
.rr-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
.rr-row--selected {
  background: #fff;
  border-color: #fff;
  color: #0A0628;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.5);
}
.rr-row--selected:hover { color: #0A0628; }
.rr-row-label {
  font-size: 13px;
  font-family: var(--tx-font-body), sans-serif;
}
.rr-row-time {
  font-family: var(--tx-font-display), sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.rr-row--selected .rr-row-time { color: #0A0628; }
.rr-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  display: inline-block;
}
.rr-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1CD3F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rr-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
  gap: 12px;
}
.rr-cta {
  background: linear-gradient(90deg, #5433FE 0%, #1CD3F5 100%);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 12px 26px;
  font-family: var(--tx-font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.rr-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(28,211,245,0.5);
  filter: brightness(1.05);
}

/* ===== Adaptive Cart Animation v2 (matches IQ product) ===== */
.aca2-anim {
  width: 100%;
  background: #F4F6FA;
  border: 1px solid rgba(15,27,45,0.08);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 18px 40px -22px rgba(15,27,45,0.18);
}

.aca2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 14px;
  border: 1px solid rgba(15,27,45,0.06);
}
.aca2-stat-label {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.aca2-stat-num {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.aca2-chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.aca2-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 10px -4px rgba(15,27,45,0.10);
  border: 1px solid rgba(15,27,45,0.06);
  transition: transform 200ms;
}
.aca2-card--active {
  background: #4FB6E0;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(79,182,224,0.55);
}
.aca2-card-title {
  font-family: var(--tx-font-display), sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0F1B2D;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aca2-card--active .aca2-card-title { color: #fff; }
.aca2-chev {
  font-weight: 700;
  font-size: 16px;
  display: inline-block;
}
.aca2-card-sub {
  margin-top: 4px;
  font-family: var(--tx-font-body), sans-serif;
  font-size: 13px;
  color: rgba(15,27,45,0.7);
}
.aca2-card--active .aca2-card-sub { color: rgba(255,255,255,0.92); }
.aca2-accent { color: #4FB6E0; font-weight: 600; }

.aca2-dots {
  position: absolute;
  top: 16px; right: 18px;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.aca2-dots span {
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(15,27,45,0.4);
}

.aca2-connector {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aca2-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  width: 1px;
  height: 100%;
  background: rgba(15,27,45,0.5);
}
.aca2-plus {
  position: relative;
  z-index: 1;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(15,27,45,0.20);
  box-shadow: 0 2px 6px -2px rgba(15,27,45,0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}