:root {
  /* Strict Two-Color Palette */
  --bg-color: #ffffff;
  --bg-gradient: none;
  
  --primary-brand: #B41F62;
  --primary-accent: #B41F62;
  --secondary-brand: #000000;
  
  --success-color: var(--primary-brand);
  --warning-color: var(--primary-brand);
  --danger-color: var(--primary-brand);

  --text-main: #000000;
  --text-muted: #000000;
  
  /* Glassmorphism tuned for light bg */
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-bg-accent: rgba(180, 31, 98, 0.05); /* #B41F62 at 5% alpha */
  --glass-glow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
  
  /* Dynamic Status Colors mapped to single primary brand for consistency */
  --status-blue: var(--primary-brand);
  --status-green: var(--primary-brand);
  --status-yellow: var(--primary-brand);
  --status-red: var(--primary-brand);

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;

  /* Deck layout rhythm — spacing / composition only */
  --layout-content-max: 1200px;
  --layout-pad-x: clamp(2rem, 8.5vw, 5rem);
  --layout-pad-y: clamp(2.75rem, 5vh, 4.75rem);
  --layout-pad-y-tight: clamp(2.5rem, 4.25vh, 4rem);
  --layout-brand-clearance: clamp(2.65rem, 4.75vh, 3.65rem);
  --layout-slide-inner-bottom: clamp(1rem, 2.25vh, 1.75rem);
  --layout-stack-gap: clamp(0.9rem, 1.75vh, 1.2rem);
  --layout-heading-cluster: clamp(0.35rem, 0.9vh, 0.55rem);
  --layout-after-heading-block: clamp(0.8rem, 1.75vh, 1.15rem);
  --layout-section-to-body: clamp(0.55rem, 1.35vh, 0.85rem);
  --layout-body-to-cards: clamp(1rem, 1.85vh, 1.4rem);
  --layout-cards-gap: clamp(0.85rem, 1.5vh, 1.05rem);
  --layout-cta-top: clamp(1.15rem, 2.1vh, 1.65rem);
  --layout-future-grid-gap: clamp(1.5rem, 2.75vw, 2.35rem);
  --layout-demo-label-gap: clamp(0.45rem, 1vh, 0.65rem);
  --layout-demo-block-top: clamp(0.35rem, 1vh, 0.55rem);
}

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

i.fas, i.far, i.fab { color: var(--primary-brand) !important; }

body {
  font-family: var(--font-main);
  background: var(--bg-color);
  color: var(--text-main);
  overflow: hidden; /* Prevent body scroll, use #deck */
  line-height: 1.6;
}

#deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#deck::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: var(--layout-pad-y) var(--layout-pad-x);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 1;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.slide.slide-in-view {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: opacity 0.2s ease;
    opacity: 1;
  }
  .slide.slide-in-view {
    opacity: 1;
  }
}

/* Animations for scroll reveal */
.slide .animate-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide.visible .animate-reveal {
  opacity: 1;
  transform: translateY(0);
}

.slide-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  z-index: -1;
  opacity: 0.1; /* Reduced opacity for light bg */
  transition: all 1s ease;
}

.blob-1 { top: -20vh; left: -20vw; width: 60vw; height: 60vh; background: var(--primary-brand); }
.blob-2 { bottom: -20vh; right: -20vw; width: 60vw; height: 60vh; background: var(--secondary-brand); }

h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 2rem; color: var(--primary-brand) !important; text-align: center; width: 100%; }
h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; color: var(--primary-brand) !important; text-align: center; width: 100%; }
h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-brand) !important; }
h4, h5, h6 { color: var(--primary-brand) !important; }
p { font-size: 1.2rem; color: #000000 !important; margin-bottom: 1.5rem; }

.text-gradient { color: var(--primary-brand); font-weight: 700; }
.text-gradient-warn { color: var(--primary-brand); font-weight: 700; }
.text-gradient-success { color: var(--primary-brand); font-weight: 700; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; width: 100%; max-width: 1400px; margin: 0 auto; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; width: 100%; margin: 0 auto; }
.center-content { text-align: center; }
.content-wrapper { max-width: var(--layout-content-max); margin: 0 auto; width: 100%; }

/* Product / system-flow slides: one vertical rhythm, optical centering in viewport */
.slide .content-wrapper.recruitment-wrapper,
.slide .content-wrapper.attendance-wrapper,
.slide .content-wrapper.payment-wrapper,
.slide .content-wrapper.sessions-wrapper,
.slide .content-wrapper.management-wrapper,
.slide .content-wrapper.billing-wrapper,
.slide .content-wrapper.online-wrapper,
.slide .content-wrapper.macro-wrapper,
.slide .content-wrapper.closing-wrapper,
.slide .content-wrapper.commercial-wrapper {
  height: auto;
  min-height: 0;
  flex: 0 1 auto;
  width: 100%;
  max-width: min(var(--layout-content-max), 1040px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(1.65rem, 3.2vh, 2.55rem);
  padding-top: var(--layout-brand-clearance);
  padding-bottom: clamp(1.15rem, 2.3vh, 1.85rem);
}
.flex-column { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.card, .example-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: var(--glass-glow);
  transition: transform 0.3s ease;
}

.card:hover { transform: translateY(-3px); }

.example-card {
  border-left: 4px solid var(--primary-accent);
  background: var(--glass-bg-accent);
  margin-top: 2rem;
  padding: 1.5rem 2rem;
}

.example-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary-accent);
  margin-bottom: 0.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.example-card p {
  font-size: 1.1rem;
  margin-bottom: 0;
  color: #000 !important;
  line-height: 1.5;
}

.mockup-container {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.mockup-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.ui-card {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}
.status-blue { background: var(--status-blue); }
.status-green { background: var(--status-green); }
.status-yellow { background: var(--status-yellow); }
.status-red { background: var(--status-red); }

.stat-box { display: flex; flex-direction: column; }
.stat-large { font-size: 3rem; font-weight: 800; color: #000 !important; line-height: 1.1; margin-bottom: 0.5rem; }
.stat-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #000 !important; font-weight: 600;}
.highlight-primary { color: var(--primary-accent); }
.highlight-danger { color: #000 !important; }
.highlight-success { color: #000 !important; }

.chart-container {
  width: 100%;
  height: 300px;
  position: relative;
  margin-top: 1rem;
}

/* Dual Logo Alignment & Balancing */
.logo-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 4rem;
}

.logo-lockup img.logo-rdcc {
  height: 85px; /* Blocky weight compensated with slightly less height */
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.08));
}

.logo-lockup img.logo-cm {
  height: 95px; /* Lean aspect ratio compensated with slightly more height */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));
  opacity: 0.9;
}

.co-brand { 
  position: absolute; 
  top: var(--layout-pad-y-tight); 
  left: var(--layout-pad-x); 
  display: flex; 
  gap: 1.2rem; 
  align-items: center; 
  z-index: 10; 
  opacity: 1; 
}

.co-brand img.logo-rdcc { height: 23px; width: auto; opacity: 0.8; }
.co-brand img.logo-cm { height: 26px; width: auto; opacity: 0.8; }

.logo-divider {
  width: 1px;
  height: 30px;
  background: rgba(0,0,0,0.1);
  margin: 0 0.5rem;
}

.separator { color: var(--primary-brand); font-size: 1.1rem; font-weight: 300; margin: 0 0.2rem; }

.nav-controls { display: none; } /* Hidden for scroll-based landing page experience */
.nav-btn {
  background: transparent;
  border: none;
  color: var(--primary-brand);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: none;
}
.nav-btn:hover:not(:disabled) { transform: scale(1.2); }
.nav-btn:disabled { opacity: 0.15; cursor: not-allowed; }

.slide-progress {
  position: fixed;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex !important;
  flex-direction: column !important;
  gap: 15px; /* Slightly more spacing for premium feel */
  z-index: 2000; /* Extremely high to stay above all blobs */
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--primary-brand);
  background: transparent;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, background 0.2s ease;
  position: relative;
}

.dot.active {
  background: var(--primary-brand);
  transform: scale(1.45);
  box-shadow: 0 0 0 1px rgba(180, 31, 98, 0.25);
}

.dot:hover:not(.active) {
  transform: scale(1.32);
  box-shadow: 0 0 0 3px rgba(180, 31, 98, 0.18);
  background: rgba(180, 31, 98, 0.12);
}

.dot.active:hover {
  transform: scale(1.52);
  box-shadow: 0 0 0 2px rgba(180, 31, 98, 0.35);
}

.nav-tooltip {
  position: fixed;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  z-index: 2001;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s,
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), right 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.1));
}

.nav-tooltip.show {
  opacity: 1;
  visibility: visible;
  right: 4.5rem;
  transform: translateY(-50%) translateX(0);
}

.nav-preview-card {
  background: #fff;
  padding: 0.85rem 1rem 1rem;
  border-radius: 16px;
  box-shadow: 0 15px 45px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.05);
  width: 204px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Scaled slide thumbnail frame (1440×900 @ 0.08 scale ≈ 115×72) */
.preview-iframe-wrapper {
  position: relative;
  width: 115px;
  height: 72px;
  overflow: hidden;
  background: #faf9f9;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

/* Hover clone: show transition words without waiting for keyframes */
.nav-slide-preview-root.transition-filler-layout .trans-word {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Arrow for tooltip */
.nav-preview-card::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.preview-thumb {
  width: 100%;
  height: 80px;
  background: var(--glass-bg-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-brand);
  font-size: 1.5rem;
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-num {
  font-size: 0.7rem;
  font-weight: 800;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.preview-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
}

hr.gradient { border: 0; height: 1px; background: rgba(0,0,0,0.1); margin: 2rem 0; }
ul.feature-list { list-style: none; margin-top: 1rem; }
ul.feature-list li { margin-bottom: 1.2rem; font-size: 1.15rem; display: flex; align-items: flex-start; color: #000 !important; }
ul.feature-list li i { margin-right: 1rem; margin-top: 0.3rem; font-size: 0.9rem; color: var(--primary-brand) !important; }

.table-container { overflow-x: auto; background: var(--glass-bg); border-radius: 12px; border: 1px solid var(--glass-border); padding: 1rem; }
table.projection-table { width: 100%; border-collapse: collapse; }
table.projection-table th, table.projection-table td { padding: 1.2rem 1rem; text-align: right; border-bottom: 1px solid rgba(0,0,0,0.05); }
table.projection-table tr:last-child th, table.projection-table tr:last-child td { border-bottom: none; }
table.projection-table th:first-child, table.projection-table td:first-child { text-align: left; }
table.projection-table th { color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
table.projection-table td { font-weight: 500; font-size: 1.1rem; }


/* Welcome Slide Specifics & Animations */
.welcome-slide {
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
  padding: var(--layout-pad-y) var(--layout-pad-x) !important;
  background-color: #faf9f9; /* very light warm white / light grey */
}

.welcome-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
}

.welcome-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-bottom: clamp(2.25rem, 4.5vh, 3.5rem);
}

.welcome-logo-cm {
  width: 291px;
  height: 67px;
  object-fit: contain;
}

.welcome-logo-rdcc {
  width: 237px;
  height: 85px;
  object-fit: contain;
}

.welcome-separator {
  color: var(--primary-brand);
  font-size: 2.5rem;
  font-weight: 300;
  font-family: var(--font-main);
}

.welcome-headline {
  font-family: 'Crimson Text', serif;
  font-weight: 700;
  color: var(--primary-brand);
  font-size: 4.2rem;
  line-height: 1.25;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  letter-spacing: normal;
}

.welcome-subheading-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: #222;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Slide 1 hero: word-by-word fade (spacing/typography unchanged on .welcome-headline / .welcome-subheading-text) */
@keyframes welcomeHeroWordIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#slide-1 .welcome-headline .hero-word,
#slide-1 .welcome-subheading-text .hero-word {
  display: inline-block;
  will-change: opacity, transform;
}

#slide-1.welcome-hero-words-armed .welcome-headline .hero-word {
  opacity: 0;
  animation: welcomeHeroWordIn 0.8s cubic-bezier(0, 0, 0.2, 1) forwards;
  animation-delay: var(--hero-d, 0ms);
}

#slide-1.welcome-hero-words-armed .welcome-subheading-text .hero-word {
  opacity: 0;
  animation: welcomeHeroWordIn 0.68s cubic-bezier(0, 0, 0.2, 1) forwards;
  animation-delay: var(--hero-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  #slide-1 .welcome-headline .hero-word,
  #slide-1 .welcome-subheading-text .hero-word {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Keyframes for soft entrance */
@keyframes revealText {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(15px) rotate(-1deg); }
}

.animate-reveal { opacity: 0; }
.visible .animate-reveal {
  animation: revealText 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}



/* Slide 2: Diagnosis Layout (Weighted 3-Zone) */
.diagnosis-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 1fr;
  gap: 3rem;
  width: 100%;
  margin-top: 1rem;
  align-items: stretch;
  flex: 1;
  min-height: 60vh; /* Ensure it takes substantial vertical space */
}

/* Slide 2 Specifics */
.slide-2-layout {
  background-color: #faf9f9;
  justify-content: center;
  align-items: center;
  padding: var(--layout-pad-y) var(--layout-pad-x);
}

.slide-2-top-brand {
  display: flex;
  align-items: center;
  position: absolute;
  top: var(--layout-pad-y-tight);
  left: var(--layout-pad-x);
  gap: 1rem;
}

.slide-2-logo-cm { width: 140px; height: auto; object-fit: contain; }
.slide-2-logo-rdcc { width: 110px; height: auto; object-fit: contain; }
.slide-2-separator { color: var(--primary-brand); font-size: 1.5rem; font-weight: 300; }

.slide-2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  padding-top: var(--layout-brand-clearance);
  max-width: 1000px;
  width: 100%;
  gap: var(--layout-stack-gap);
}

.slide-2-header {
  text-align: center;
  margin-bottom: var(--layout-after-heading-block);
}

.slide-2-heading {
  font-family: 'Crimson Text', serif;
  font-weight: 700;
  color: var(--primary-brand) !important;
  font-size: 3.5rem;
  margin-bottom: 0;
  text-align: center;
}

.slide-2-kpi-grid {
  display: flex;
  flex-direction: column;
  gap: var(--layout-cards-gap);
  margin-bottom: var(--layout-body-to-cards);
  width: 100%;
}

.slide-2-kpi-row {
  display: flex;
  justify-content: center;
  gap: 6rem;
}

.slide-2-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 150px;
}

.slide-2-value {
  font-family: 'Crimson Text', serif;
  font-weight: 700;
  font-size: 3.8rem; /* Slightly reduced from 4rem for better balance */
  color: #111;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.slide-2-label {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #444;
  margin-top: 0.5rem;
}

.slide-2-paragraph {
  text-align: center;
  max-width: 950px;
  margin-bottom: var(--layout-body-to-cards);
}

.typewriter-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.2rem; /* Slightly reduced */
  color: #111 !important;
  line-height: 1.6;
  min-height: 2.5rem; /* Reduced from 3rem */
}

/* Typing cursor animation */
.typewriter-text::after {
  content: '|';
  animation: blink 1s step-end infinite;
  opacity: 1;
}

.typewriter-text.done::after {
  display: none;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.slide-2-problems {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.slide-2-problems-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.8rem; /* Slightly reduced from 2rem */
  color: #111 !important;
  margin-bottom: var(--layout-cards-gap);
}

.slide-2-problems-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
}

.slide-2-problem-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  flex: 1;
  transition: all 0.3s ease;
}

.slide-2-problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.problem-icon {
  width: 45px;
  height: 45px;
  background: rgba(180, 31, 98, 0.08); /* Pale pink container */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-brand);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.problem-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #111;
  line-height: 1.3;
}

/* Transition Filler Specifics */
.transition-filler-layout {
  background-color: #faf9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--layout-pad-y) var(--layout-pad-x);
  position: relative;
}

.transition-headline-container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto;
  padding-top: var(--layout-brand-clearance);
}

.transition-row {
  display: flex;
  align-items: baseline;
  line-height: 1.05;
  overflow: hidden;
}

.row-1 { padding-left: 3rem; }
.row-2 { padding-left: 0; margin-top: -1rem; }
.row-3 { padding-left: 14rem; margin-top: -1.5rem; }
.row-4 { padding-left: 0; margin-top: -1rem; }
.row-5 { padding-left: 0; margin-left: -2rem; margin-top: -1rem; }

/* Word reveal timing is driven in script.js when slide 3 enters the viewport (avoids finishing off-screen). */
.trans-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.trans-word.trans-word-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Type Styles */
.trans-lets {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  color: #111;
  margin-right: 1.5rem;
}

.trans-solve {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 8rem;
  color: #111;
  letter-spacing: -2px;
}

.trans-all,
.trans-these {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 5rem;
  color: #111;
  letter-spacing: -1.5px;
}

.trans-all {
  margin-right: 1.2rem;
}

.trans-problems {
  font-family: 'Crimson Text', serif;
  font-weight: 700;
  font-size: 9.5rem;
  color: #111;
  letter-spacing: -1px;
}

.trans-with {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 5.5rem;
  color: #111;
  letter-spacing: -1.5px;
}

.trans-corementors {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 7rem;
  color: var(--primary-brand);
  letter-spacing: -2px;
}

/* Slide 4: Staff Recruitment Interactive Demo */
.staff-recruitment-slide {
  background: #faf9f9;
}

.recruitment-heading-block {
  text-align: center;
}

.recruitment-title {
  font-family: 'Crimson Text', serif;
  font-size: 3rem;
  color: var(--primary-brand) !important;
  margin-bottom: var(--layout-after-heading-block);
  line-height: 1.05;
}

.recruitment-section-title {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #111 !important;
  margin-bottom: var(--layout-section-to-body);
}

.recruitment-state {
  display: none;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.recruitment-state.is-active {
  display: block;
}

.recruitment-typewriter,
.recruitment-future-typewriter {
  font-family: 'Poppins', sans-serif;
  font-size: 0.96rem;
  line-height: 1.75;
  max-width: 980px;
  margin: 0 auto var(--layout-body-to-cards);
  min-height: 5.2rem;
  color: #111 !important;
  font-weight: 500;
}

.recruitment-current-cards {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--layout-cards-gap);
}

.recruitment-current-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.55s ease;
}

.recruitment-current-card.show {
  opacity: 1;
  transform: translateY(0);
}

.recruitment-icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(180, 31, 98, 0.09);
  border: 1px solid rgba(180, 31, 98, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruitment-card-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #111;
}

.recruitment-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--layout-cta-top);
}

.recruitment-future-btn {
  border: none;
  border-radius: 5px;
  padding: 0.8rem 1.8rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  background: #3D98D2;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(61, 152, 210, 0.24);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.recruitment-future-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(61, 152, 210, 0.3);
}

.recruitment-future-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--layout-future-grid-gap);
  align-items: center;
}

.recruitment-future-left {
  padding: 0.35rem 0.65rem 0 0;
}

.recruitment-future-benefits {
  margin-top: var(--layout-body-to-cards);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--layout-cards-gap);
}

.future-benefit-item {
  font-family: 'Poppins', sans-serif;
  background: #fff;
  border: 1px solid rgba(180, 31, 98, 0.15);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.4s ease;
}

.future-benefit-item.show {
  opacity: 1;
  transform: translateY(0);
}

.recruitment-demo-shell {
  position: relative;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: var(--layout-demo-block-top) 0 0;
  min-height: 470px;
  overflow: visible; /* allow control bar pill to extend beyond demo shell */
}

.recruitment-future-right,
.attendance-future-right,
.payment-future-right,
.sessions-future-right,
.management-future-right,
.billing-future-right,
.online-future-right,
.macro-future-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--layout-demo-block-top);
}

.demo-cursor {
  position: absolute;
  z-index: 30;
  font-size: 1.2rem;
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.4s ease;
}

.desktop-demo-screen,
.mobile-demo-screen {
  display: none;
}

.desktop-demo-screen.is-active,
.mobile-demo-screen.is-active {
  display: block;
}

.desktop-demo-screen {
  position: relative;
  border: 2px solid #26282d;
  border-radius: 4px;
  background: #fff;
  padding: 0.65rem 0.5rem 0.6rem;
  max-width: 100%;
}

.demo-frame-label {
  width: 100%;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: #111;
  margin-top: var(--layout-demo-label-gap);
  margin-bottom: var(--layout-demo-label-gap);
}

.desktop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: #f7f7f8;
}

.desktop-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

.desktop-brand img {
  height: 18px;
}

.desktop-search {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: 0.38rem 0.8rem;
  min-width: 210px;
  font-family: 'Poppins', sans-serif;
  color: #777;
  font-size: 0.77rem;
}

.desktop-title-row {
  margin: 0.9rem 0 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.desktop-title-row h4 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #111 !important;
  font-size: 1rem;
  font-weight: 600;
}

.desktop-title-row span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.76rem;
  color: #666;
}

.desktop-table {
  border: 1px solid #ececef;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

.desktop-row {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1fr 1.2fr 0.8fr;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: #333;
}

.desktop-row:last-child {
  border-bottom: none;
}

.desktop-head {
  background: #fafafb;
  font-weight: 500;
  color: #666;
}

.candidate-abhay.focus {
  background: rgba(180, 31, 98, 0.07);
}

#approveAbhayBtn {
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  background: #3D98D2;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.desktop-row small {
  color: #777;
}

.desktop-toast {
  margin-top: 0.7rem;
  display: inline-flex;
  background: rgba(180, 31, 98, 0.1);
  border: 1px solid rgba(180, 31, 98, 0.25);
  color: #8e184d;
  font-family: 'Poppins', sans-serif;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.35s ease;
}

.desktop-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.mobile-demo-screen {
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 0.2rem;
  flex-direction: column;
}

.mobile-demo-screen.is-active {
  display: flex;
}

.mobile-frame {
  height: min(500px, 62vh);
  aspect-ratio: 16 / 25;
  width: auto;
  max-width: 100%;
  border: 4px solid #26282d;
  border-radius: 28px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-demo-screen .demo-frame-label {
  margin-top: 0;
  margin-bottom: var(--layout-demo-label-gap);
  width: auto;
  text-align: center;
}

.mobile-status {
  height: 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-status i {
  color: #111 !important;
}

.mobile-step {
  display: none;
  padding: 0.8rem 0.95rem 1rem;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  animation: fadeUpSoft 0.38s ease;
}

.mobile-step.is-active {
  display: block;
}

.mobile-step img {
  height: 20px;
  margin-bottom: 0.55rem;
}

.mobile-step h5 {
  font-size: 1.02rem;
  color: #111 !important;
  margin-bottom: 0.42rem;
  font-family: 'Poppins', sans-serif;
}

.mobile-step p {
  margin-bottom: 0.7rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #444 !important;
}

.mobile-step button {
  width: 100%;
  border: none;
  border-radius: 5px;
  background: #3D98D2;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.52rem 0.75rem;
  margin-top: 0.7rem;
}

.mobile-step button.tap {
  animation: tapPulse 0.28s ease;
}

.mobile-step label,
.mobile-step small {
  font-size: 0.68rem;
  color: #666;
  font-family: 'Poppins', sans-serif;
}

.mobile-input-row,
.mobile-field,
.upload-state {
  border: 1px solid #e7e7ea;
  background: #fcfcfc;
  border-radius: 8px;
  padding: 0.45rem 0.58rem;
  font-size: 0.7rem;
  color: #333;
  margin-top: 0.45rem;
}

.mobile-input-row {
  display: flex;
  justify-content: space-between;
}

.otp-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 0;
}

.otp-row span {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e5e8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(6px);
}

.otp-row.animate span {
  animation: otpIn 0.25s ease forwards;
}

.otp-row.animate span:nth-child(2) { animation-delay: 0.15s; }
.otp-row.animate span:nth-child(3) { animation-delay: 0.3s; }
.otp-row.animate span:nth-child(4) { animation-delay: 0.45s; }

.upload-state {
  display: flex;
  justify-content: space-between;
}

.upload-state span {
  color: #218739;
  font-weight: 600;
}

.review-list {
  list-style: none;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.review-list li {
  font-size: 0.7rem;
  color: #2b2b2b;
  opacity: 0;
  transform: translateY(5px);
}

.review-list.animate li {
  animation: fadeUpSoft 0.25s ease forwards;
}

.review-list.animate li:nth-child(2) { animation-delay: 0.12s; }
.review-list.animate li:nth-child(3) { animation-delay: 0.24s; }
.review-list.animate li:nth-child(4) { animation-delay: 0.36s; }
.review-list.animate li:nth-child(5) { animation-delay: 0.48s; }

.review-list li::before {
  content: "✓";
  color: #1f9a4d;
  margin-right: 0.4rem;
}

.credentials-step {
  text-align: center;
}

.success-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0.2rem auto 0.65rem;
  background: rgba(39, 174, 96, 0.12);
  color: #1f9a4d;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: popInSoft 0.38s ease;
}

.credential-card {
  background: #fbfbfc;
  border: 1px solid #e9e9ef;
  border-radius: 10px;
  text-align: left;
  padding: 0.6rem 0.72rem;
  font-size: 0.7rem;
  margin: 0.7rem 0;
}

@keyframes fadeUpSoft {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes otpIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popInSoft {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tapPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Staff Attendance section */
.staff-attendance-slide { background: #faf9f9; }
.attendance-heading-block { text-align: center; }
.attendance-title { font-family: 'Crimson Text', serif; font-size: 3rem; color: var(--primary-brand) !important; line-height: 1.05; margin-bottom: var(--layout-after-heading-block); }
.attendance-section-title { font-family: 'Poppins', sans-serif; text-align: center; font-size: 2rem; font-weight: 700; color: #111 !important; margin-bottom: var(--layout-section-to-body); }

.attendance-state { display: none; width: 100%; max-width: 1160px; margin: 0 auto; }
.attendance-state.is-active { display: block; }
.attendance-typewriter, .attendance-future-typewriter { font-family: 'Poppins', sans-serif; font-size: 0.96rem; line-height: 1.75; max-width: 980px; margin: 0 auto var(--layout-body-to-cards); min-height: 5.2rem; color: #111 !important; font-weight: 500; }

.attendance-current-cards { margin-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-cards-gap); }
.attendance-current-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 0.9rem; display: flex; align-items: center; gap: 0.75rem; opacity: 0; transform: translateY(16px); transition: all 0.5s ease; }
.attendance-current-card.show { opacity: 1; transform: translateY(0); }
.attendance-icon-tile { width: 42px; height: 42px; border-radius: 10px; background: rgba(180,31,98,0.09); border: 1px solid rgba(180,31,98,0.2); display: flex; align-items: center; justify-content: center; }
.attendance-card-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem; color: #111; }
.attendance-cta-wrap { display: flex; justify-content: center; margin-top: var(--layout-cta-top); }
.attendance-future-btn { border: none; border-radius: 5px; padding: 0.8rem 1.8rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; background: #3D98D2; color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(61,152,210,0.24); transition: transform .25s ease, box-shadow .25s ease; }
.attendance-future-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(61,152,210,0.3); }

.attendance-future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-future-grid-gap); align-items: center; }
.attendance-future-left { padding-right: 0.65rem; }
.attendance-future-benefits { margin-top: var(--layout-body-to-cards); list-style: none; display: flex; flex-direction: column; gap: var(--layout-cards-gap); }
.attendance-benefit-item { font-family: 'Poppins', sans-serif; background: #fff; border: 1px solid rgba(180,31,98,0.15); border-radius: 10px; padding: 0.55rem 0.75rem; font-size: 0.86rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: all 0.35s ease; }
.attendance-benefit-item.show { opacity: 1; transform: translateY(0); }

.attendance-demo-shell { position: relative; min-height: 500px; padding: var(--layout-demo-block-top) 0 0; }
.attendance-cursor { position: absolute; z-index: 40; opacity: 0; font-size: 1.2rem; transition: transform .7s ease, opacity .3s ease; }
.attendance-mobile-demo, .attendance-desktop-demo { display: none; }
.attendance-mobile-demo.is-active, .attendance-desktop-demo.is-active { display: flex; flex-direction: column; align-items: center; }

.attendance-mobile-frame { height: min(500px, 62vh); aspect-ratio: 16/25; width: auto; max-width: 100%; border: 4px solid #26282d; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.attendance-mobile-status { height: 28px; font-family: 'Poppins', sans-serif; font-size: 0.62rem; font-weight: 600; padding: 0 0.8rem; display: flex; align-items: center; justify-content: space-between; }
.attendance-mobile-status i { color: #111 !important; }
.attendance-mobile-step { display: none; padding: 0.7rem 0.9rem; font-family: 'Poppins', sans-serif; animation: fadeUpSoft .3s ease; }
.attendance-mobile-step.is-active { display: block; }
.attendance-mobile-step img { height: 20px; margin-bottom: 0.45rem; }
.attendance-mobile-step h5 { font-family: 'Poppins', sans-serif; font-size: 1.02rem; margin-bottom: 0.4rem; color: #111 !important; }
.attendance-mobile-step p { font-family: 'Poppins', sans-serif; font-size: 0.74rem; line-height: 1.45; color: #444 !important; margin-bottom: 0.55rem; }
.attendance-summary-card { border: 1px solid #e6e8ee; border-radius: 8px; padding: 0.43rem 0.55rem; margin-bottom: 0.42rem; font-size: 0.69rem; color: #2d2d2d; background: #fff; }
.attendance-mobile-step button { width: 100%; border: none; border-radius: 5px; background: #3D98D2; color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.74rem; font-weight: 500; padding: 0.5rem 0.7rem; margin-top: 0.45rem; }
.attendance-mobile-step button.tap { animation: tapPulse 0.28s ease; }
.attendance-mobile-step small { font-family: 'Poppins', sans-serif; font-size: 0.64rem; color: #666; display: block; margin-top: 0.45rem; }
.attendance-option-grid { margin-top: 0.55rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.attendance-option-grid span { font-size: 0.64rem; border: 1px solid #ececf1; border-radius: 7px; padding: 0.35rem 0.4rem; text-align: center; background: #fcfcfd; }
.attendance-verify-card { border: 1px solid #e6e8ee; border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.68rem; display: grid; gap: 0.35rem; margin-bottom: 0.5rem; }
.verify-success { color: #179144; font-weight: 600; }
.attendance-day-badge { border: 1px solid rgba(23,145,68,.25); background: rgba(23,145,68,.08); border-radius: 999px; font-size: 0.66rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; margin-bottom: 0.45rem; }
.attendance-leave-list { list-style: none; margin: 0.35rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.attendance-leave-list li { border: 1px solid #ececf1; border-radius: 7px; padding: 0.38rem 0.45rem; font-size: 0.68rem; }
.attendance-leave-list li::before { content: "•"; color: var(--primary-brand); margin-right: 0.35rem; }

.attendance-desktop-frame { border: 2px solid #26282d; border-radius: 4px; background: #fff; padding: 0.55rem; width: 100%; max-width: 520px; font-family: 'Poppins', sans-serif; }
.attendance-desktop-topbar { display: flex; justify-content: space-between; align-items: center; background: #f7f8fa; border-radius: 8px; padding: 0.5rem 0.6rem; }
.attendance-desktop-brand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; }
.attendance-desktop-brand img { height: 16px; }
.attendance-desktop-search { font-size: 0.68rem; color: #666; background: #fff; border: 1px solid #e4e7ee; border-radius: 6px; padding: 0.22rem 0.45rem; }
.attendance-stats-strip { margin: 0.5rem 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 0.35rem; }
.attendance-stats-strip div { border: 1px solid #e8ebf1; border-radius: 6px; padding: 0.35rem; font-size: 0.62rem; line-height: 1.35; }
.attendance-table { border: 1px solid #eceef4; border-radius: 9px; overflow: hidden; }
.attendance-row { display: grid; grid-template-columns: 1.2fr 0.9fr 1.4fr 0.8fr 1.2fr; gap: 0.35rem; align-items: center; padding: 0.4rem 0.45rem; font-size: 0.62rem; border-bottom: 1px solid #f1f3f7; }
.attendance-row:last-child { border-bottom: none; }
.attendance-head { background: #fafbfc; font-weight: 500; color: #666; }
.attendance-approve-btn { border: none; background: #3D98D2; color: #fff; border-radius: 5px; padding: 0.22rem 0.4rem; font-size: 0.6rem; font-family: 'Poppins', sans-serif; }
.attendance-reject-btn { border: 1px solid #d9deea; background: #fff; color: #555; border-radius: 5px; padding: 0.2rem 0.35rem; font-size: 0.6rem; font-family: 'Poppins', sans-serif; margin-left: 0.18rem; }
.neha-row.focus { background: rgba(180,31,98,0.07); }
.attendance-detail-panel { margin-top: 0.45rem; border: 1px solid #eceef4; border-radius: 7px; padding: 0.38rem 0.45rem; font-size: 0.63rem; display: grid; gap: 0.24rem; opacity: 0; transform: translateY(6px); transition: all .25s ease; }
.attendance-detail-panel.show { opacity: 1; transform: translateY(0); }
.attendance-toast { margin-top: 0.45rem; display: inline-flex; background: rgba(61,152,210,0.12); border: 1px solid rgba(61,152,210,0.3); color: #2d6f99; border-radius: 999px; padding: 0.28rem 0.72rem; font-size: 0.66rem; opacity: 0; transform: translateY(6px); transition: all .25s ease; }
.attendance-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .attendance-future-grid { grid-template-columns: 1fr; }
  .attendance-current-cards { grid-template-columns: 1fr; }
}

/* Staff Payment section */
.staff-payment-slide { background: #faf9f9; }
.payment-heading-block { text-align: center; }
.payment-title { font-family: 'Crimson Text', serif; font-size: 3rem; color: var(--primary-brand) !important; line-height: 1.05; margin-bottom: var(--layout-after-heading-block); }
.payment-section-title { font-family: 'Poppins', sans-serif; text-align: center; font-size: 2rem; font-weight: 700; color: #111 !important; margin-bottom: var(--layout-section-to-body); }

.payment-state { display: none; width: 100%; max-width: 1160px; margin: 0 auto; }
.payment-state.is-active { display: block; }
.payment-typewriter, .payment-future-typewriter { font-family: 'Poppins', sans-serif; font-size: 0.95rem; line-height: 1.75; max-width: 980px; margin: 0 auto var(--layout-body-to-cards); min-height: 5.2rem; color: #111 !important; font-weight: 500; }

.payment-current-cards { margin-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-cards-gap); }
.payment-current-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 0.9rem; display: flex; align-items: center; gap: 0.7rem; opacity: 0; transform: translateY(16px); transition: all 0.5s ease; }
.payment-current-card.show { opacity: 1; transform: translateY(0); }
.payment-icon-tile { width: 40px; height: 40px; border-radius: 10px; background: rgba(180,31,98,0.09); border: 1px solid rgba(180,31,98,0.2); display: flex; align-items: center; justify-content: center; }
.payment-card-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.89rem; color: #111; }
.payment-time-loss-callout { margin: var(--layout-cards-gap) auto 0; max-width: 420px; text-align: center; padding: 0.65rem 0.9rem; border: 1px solid rgba(180,31,98,0.25); border-radius: 10px; background: rgba(180,31,98,0.05); font-family: 'Poppins', sans-serif; font-size: 0.82rem; color: #222; opacity: 0; transform: translateY(12px); transition: all .45s ease; }
.payment-time-loss-callout.show { opacity: 1; transform: translateY(0); }
.payment-cta-wrap { display: flex; justify-content: center; margin-top: var(--layout-cta-top); }
.payment-future-btn { border: none; border-radius: 5px; padding: 0.8rem 1.8rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; background: #3D98D2; color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(61,152,210,0.24); transition: transform .25s ease, box-shadow .25s ease; }
.payment-future-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(61,152,210,0.3); }

.payment-future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-future-grid-gap); align-items: center; }
.payment-future-benefits { margin-top: var(--layout-body-to-cards); list-style: none; display: flex; flex-direction: column; gap: var(--layout-cards-gap); }
.payment-benefit-item { font-family: 'Poppins', sans-serif; background: #fff; border: 1px solid rgba(180,31,98,0.15); border-radius: 10px; padding: 0.54rem 0.75rem; font-size: 0.85rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: all .35s ease; }
.payment-benefit-item.show { opacity: 1; transform: translateY(0); }

.payment-demo-shell { position: relative; min-height: 500px; padding: var(--layout-demo-block-top) 0 0; }
.payment-cursor { position: absolute; z-index: 45; opacity: 0; font-size: 1.2rem; transition: transform .7s ease, opacity .3s ease; }
.payment-desktop-demo, .payment-mobile-demo { display: none; }
.payment-desktop-demo.is-active, .payment-mobile-demo.is-active { display: flex; flex-direction: column; align-items: center; }

.payment-desktop-frame { border: 2px solid #26282d; border-radius: 4px; background: #fff; padding: 0.55rem; width: 100%; max-width: 540px; font-family: 'Poppins', sans-serif; }
.payment-desktop-topbar { display: flex; justify-content: space-between; align-items: center; background: #f7f8fa; border-radius: 8px; padding: 0.5rem 0.6rem; }
.payment-desktop-brand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; }
.payment-desktop-brand img { height: 16px; }
.payment-desktop-search { font-size: 0.67rem; color: #666; background: #fff; border: 1px solid #e4e7ee; border-radius: 6px; padding: 0.2rem 0.45rem; }
.payment-stats-strip { margin: 0.5rem 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 0.35rem; }
.payment-stats-strip div { border: 1px solid #e8ebf1; border-radius: 6px; padding: 0.35rem; font-size: 0.62rem; line-height: 1.35; }
.payment-action-bar { display: flex; justify-content: space-between; align-items: center; margin: 0.45rem 0; font-size: 0.65rem; }
.payment-action-bar label { display: flex; align-items: center; gap: 0.3rem; font-family: 'Poppins', sans-serif; }
.payment-primary-btn { border: none; background: #3D98D2; color: #fff; border-radius: 5px; padding: 0.24rem 0.55rem; font-size: 0.62rem; font-family: 'Poppins', sans-serif; margin-left: 0.22rem; }
.payment-table { border: 1px solid #eceef4; border-radius: 9px; overflow: hidden; }
.payment-row { display: grid; grid-template-columns: 1.25fr 0.95fr 0.9fr 0.85fr 0.65fr 0.75fr 0.8fr; gap: 0.3rem; align-items: center; padding: 0.38rem 0.42rem; font-size: 0.61rem; border-bottom: 1px solid #f1f3f7; }
.payment-row:last-child { border-bottom: none; }
.payment-head { background: #fafbfc; font-weight: 500; color: #666; }
.neha-pay-row.focus { background: rgba(180,31,98,0.07); }
.payment-processing { margin-top: 0.4rem; font-size: 0.64rem; color: #2e7fb3; opacity: 0; transition: opacity .25s ease; }
.payment-processing.show { opacity: 1; }
.payment-toast { margin-top: 0.4rem; display: inline-flex; background: rgba(61,152,210,0.12); border: 1px solid rgba(61,152,210,0.3); color: #2d6f99; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.65rem; opacity: 0; transform: translateY(6px); transition: all .25s ease; }
.payment-toast.show { opacity: 1; transform: translateY(0); }
.performance-panel { margin-top: 0.45rem; border: 1px solid #eceef4; border-radius: 8px; padding: 0.45rem 0.52rem; opacity: 0; transform: translateY(6px); transition: all .3s ease; }
.performance-panel.show { opacity: 1; transform: translateY(0); }
.performance-panel h5 { margin-bottom: 0.35rem; font-size: 0.7rem; color: #111 !important; font-family: 'Poppins', sans-serif; }
.perf-name { font-size: 0.67rem; font-weight: 600; margin-bottom: 0.3rem; color: #b41f62; }
.perf-row { display: flex; justify-content: space-between; font-size: 0.62rem; margin-bottom: 0.18rem; }
.perf-highlight { margin-top: 0.28rem; border-radius: 6px; padding: 0.24rem 0.4rem; background: rgba(180,31,98,0.1); color: #8e184d; font-size: 0.62rem; font-weight: 600; }

.payment-mobile-frame { height: min(460px, 58vh); aspect-ratio: 16/25; width: auto; max-width: 100%; border: 4px solid #26282d; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.payment-mobile-status { height: 28px; font-family: 'Poppins', sans-serif; font-size: 0.62rem; font-weight: 600; padding: 0 0.8rem; display: flex; align-items: center; justify-content: space-between; }
.payment-mobile-status i { color: #111 !important; }
.payment-slip-screen { padding: 0.7rem 0.9rem; font-family: 'Poppins', sans-serif; }
.payment-slip-screen img { height: 20px; margin-bottom: 0.45rem; }
.payment-slip-screen h5 { font-family: 'Poppins', sans-serif; font-size: 1.02rem; margin-bottom: 0.45rem; color: #111 !important; }
.payment-slip-line { border: 1px solid #e6e8ee; border-radius: 8px; padding: 0.43rem 0.55rem; margin-bottom: 0.42rem; font-size: 0.69rem; color: #2d2d2d; background: #fff; display: flex; justify-content: space-between; }
.payment-slip-screen button { width: 100%; border: none; border-radius: 5px; background: #3D98D2; color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.74rem; font-weight: 500; padding: 0.5rem 0.7rem; margin-top: 0.35rem; }

@media (max-width: 1024px) {
  .payment-future-grid { grid-template-columns: 1fr; }
  .payment-current-cards { grid-template-columns: 1fr; }
}

/* Sessions Interaction section */
.sessions-slide { background: #faf9f9; }
.sessions-heading-block { text-align: center; }
.sessions-title { font-family: 'Crimson Text', serif; font-size: 3rem; color: var(--primary-brand) !important; line-height: 1.05; margin-bottom: var(--layout-after-heading-block); }
.sessions-section-title { font-family: 'Poppins', sans-serif; text-align: center; font-size: 2rem; font-weight: 700; color: #111 !important; margin-bottom: var(--layout-section-to-body); }
.sessions-state { display: none; width: 100%; max-width: 1160px; margin: 0 auto; }
.sessions-state.is-active { display: block; }
.sessions-typewriter, .sessions-future-typewriter { font-family: 'Poppins', sans-serif; font-size: 0.95rem; line-height: 1.75; max-width: 980px; margin: 0 auto var(--layout-body-to-cards); min-height: 5.2rem; color: #111 !important; font-weight: 500; }

.sessions-current-cards { margin-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-cards-gap); }
.sessions-current-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 0.9rem; display: flex; align-items: center; gap: 0.7rem; opacity: 0; transform: translateY(16px); transition: all 0.5s ease; }
.sessions-current-card.show { opacity: 1; transform: translateY(0); }
.sessions-icon-tile { width: 40px; height: 40px; border-radius: 10px; background: rgba(180,31,98,0.09); border: 1px solid rgba(180,31,98,0.2); display: flex; align-items: center; justify-content: center; }
.sessions-card-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.89rem; color: #111; }
.sessions-cta-wrap { display: flex; justify-content: center; margin-top: var(--layout-cta-top); }
.sessions-future-btn { border: none; border-radius: 5px; padding: 0.8rem 1.8rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; background: #3D98D2; color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(61,152,210,0.24); transition: transform .25s ease, box-shadow .25s ease; }
.sessions-future-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(61,152,210,0.3); }

.sessions-future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-future-grid-gap); align-items: center; }
.sessions-future-benefits { margin-top: var(--layout-body-to-cards); list-style: none; display: flex; flex-direction: column; gap: var(--layout-cards-gap); }
.sessions-benefit-item { font-family: 'Poppins', sans-serif; background: #fff; border: 1px solid rgba(180,31,98,0.15); border-radius: 10px; padding: 0.52rem 0.72rem; font-size: 0.84rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: all .35s ease; }
.sessions-benefit-item.show { opacity: 1; transform: translateY(0); }

.sessions-demo-shell { position: relative; min-height: 500px; padding: var(--layout-demo-block-top) 0 0; }
.sessions-cursor { position: absolute; z-index: 45; opacity: 0; font-size: 1.2rem; transition: transform .7s ease, opacity .3s ease; }
.sessions-desktop-demo, .sessions-mobile-demo, .sessions-parent-demo { display: none; }
.sessions-desktop-demo.is-active, .sessions-mobile-demo.is-active, .sessions-parent-demo.is-active { display: flex; flex-direction: column; align-items: center; }

.sessions-desktop-frame { border: 2px solid #26282d; border-radius: 4px; background: #fff; padding: 0.55rem; width: 100%; max-width: 540px; font-family: 'Poppins', sans-serif; }
.sessions-desktop-topbar { display: flex; justify-content: space-between; align-items: center; background: #f7f8fa; border-radius: 8px; padding: 0.5rem 0.6rem; }
.sessions-desktop-brand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; }
.sessions-desktop-brand img { height: 16px; }
.sessions-desktop-search { font-size: 0.67rem; color: #666; background: #fff; border: 1px solid #e4e7ee; border-radius: 6px; padding: 0.2rem 0.45rem; }
.sessions-table { border: 1px solid #eceef4; border-radius: 9px; overflow: hidden; margin-top: 0.5rem; }
.sessions-row { display: grid; grid-template-columns: 0.75fr 1.1fr 1fr 1fr 0.8fr 0.8fr; gap: 0.3rem; align-items: center; padding: 0.4rem 0.45rem; font-size: 0.61rem; border-bottom: 1px solid #f1f3f7; }
.sessions-row:last-child { border-bottom: none; }
.sessions-head { background: #fafbfc; font-weight: 500; color: #666; }
.target-session-row.focus { background: rgba(180,31,98,0.07); }
.sessions-row em { font-style: normal; border-radius: 999px; padding: 0.13rem 0.4rem; font-size: 0.58rem; }
.status-ready { background: rgba(33,150,243,0.12); color: #156cb3; }
.status-scan { background: rgba(255,193,7,0.15); color: #9b7a00; }
.status-live { background: rgba(76,175,80,0.14); color: #2a7f2f; }
.session-status-strip { margin-top: 0.45rem; display: flex; flex-wrap: wrap; gap: 0.3rem; opacity: 0; transition: opacity .25s ease; }
.session-status-strip.show { opacity: 1; }
.session-status-strip span { font-size: 0.58rem; padding: 0.2rem 0.42rem; border-radius: 999px; font-family: 'Poppins', sans-serif; }
.chip-green { background: rgba(76,175,80,0.14); color: #2a7f2f; }
.chip-blue { background: rgba(33,150,243,0.12); color: #156cb3; }
.chip-yellow { background: rgba(255,193,7,0.15); color: #9b7a00; }
.chip-red { background: rgba(244,67,54,0.12); color: #b12b24; }

.sessions-mobile-frame { height: min(500px, 62vh); aspect-ratio: 16/25; width: auto; max-width: 100%; border: 4px solid #26282d; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.sessions-mobile-status { height: 28px; font-family: 'Poppins', sans-serif; font-size: 0.62rem; font-weight: 600; padding: 0 0.8rem; display: flex; align-items: center; justify-content: space-between; }
.sessions-mobile-status i { color: #111 !important; }
.sessions-mobile-step { display: none; padding: 0.7rem 0.9rem; font-family: 'Poppins', sans-serif; animation: fadeUpSoft .3s ease; }
.sessions-mobile-step.is-active { display: block; }
.sessions-mobile-step img { height: 20px; margin-bottom: 0.45rem; }
.sessions-mobile-step h5 { font-family: 'Poppins', sans-serif; font-size: 1.02rem; margin-bottom: 0.4rem; color: #111 !important; }
.sessions-mobile-step p { font-family: 'Poppins', sans-serif; font-size: 0.74rem; line-height: 1.45; color: #444 !important; margin-bottom: 0.55rem; }
.sessions-field { border: 1px solid #e6e8ee; border-radius: 8px; padding: 0.43rem 0.55rem; margin-bottom: 0.42rem; font-size: 0.69rem; color: #2d2d2d; background: #fff; }
.sessions-mobile-step button { width: 100%; border: none; border-radius: 5px; background: #3D98D2; color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.74rem; font-weight: 500; padding: 0.5rem 0.7rem; margin-top: 0.35rem; }
.sessions-mobile-step button.tap { animation: tapPulse 0.28s ease; }
.sessions-mobile-step small { font-family: 'Poppins', sans-serif; font-size: 0.64rem; color: #249556; margin-top: 0.35rem; display: block; }
.sessions-scan-card { border: 1px dashed #d7dbe4; border-radius: 10px; padding: 0.7rem; text-align: center; font-size: 0.68rem; margin: 0.4rem 0; background: #fcfcfd; }
.scan-success { font-size: 0.67rem; color: #249556; font-weight: 600; margin-bottom: 0.35rem; }
.timer-line { font-size: 0.67rem; color: #444; margin: 0.2rem 0 0.35rem; }
.badge-ontime { display: inline-block; background: rgba(76,175,80,0.14); color: #2a7f2f; border-radius: 999px; padding: 0.15rem 0.45rem; font-size: 0.62rem; margin-bottom: 0.35rem; }

.parent-note-card { width: 100%; max-width: 430px; display: grid; gap: 0.5rem; }
.parent-note { border: 1px solid #e6e8ee; border-radius: 10px; padding: 0.55rem 0.65rem; font-family: 'Poppins', sans-serif; font-size: 0.72rem; color: #111; background: #fff; }
.parent-note span { display: block; margin-top: 0.2rem; font-size: 0.66rem; color: #444; }

@media (max-width: 1024px) {
  .sessions-future-grid { grid-template-columns: 1fr; }
  .sessions-current-cards { grid-template-columns: 1fr; }
}

/* Management Intelligence section */
.management-slide { background: #faf9f9; }
.management-heading-block { text-align: center; }
.management-title { font-family: 'Crimson Text', serif; font-size: 3rem; color: var(--primary-brand) !important; line-height: 1.05; margin-bottom: var(--layout-after-heading-block); }
.management-section-title { font-family: 'Poppins', sans-serif; text-align: center; font-size: 2rem; font-weight: 700; color: #111 !important; margin-bottom: var(--layout-section-to-body); }
.management-state { display: none; width: 100%; max-width: 1160px; margin: 0 auto; }
.management-state.is-active { display: block; }
.management-typewriter, .management-future-typewriter { font-family: 'Poppins', sans-serif; font-size: 0.95rem; line-height: 1.75; max-width: 980px; margin: 0 auto var(--layout-body-to-cards); min-height: 5.2rem; color: #111 !important; font-weight: 500; }
.management-current-cards { margin-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-cards-gap); }
.management-current-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 0.9rem; display: flex; align-items: center; gap: 0.7rem; opacity: 0; transform: translateY(16px); transition: all .5s ease; }
.management-current-card.show { opacity: 1; transform: translateY(0); }
.management-icon-tile { width: 40px; height: 40px; border-radius: 10px; background: rgba(180,31,98,0.09); border: 1px solid rgba(180,31,98,0.2); display: flex; align-items: center; justify-content: center; }
.management-card-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.89rem; color: #111; }
.management-callout { margin: var(--layout-cards-gap) auto 0; max-width: 520px; text-align: center; padding: 0.65rem 0.9rem; border: 1px solid rgba(180,31,98,0.25); border-radius: 10px; background: rgba(180,31,98,0.05); font-family: 'Poppins', sans-serif; font-size: 0.82rem; color: #222; opacity: 0; transform: translateY(10px); transition: all .4s ease; }
.management-callout.show { opacity: 1; transform: translateY(0); }
.management-cta-wrap { display: flex; justify-content: center; margin-top: var(--layout-cta-top); }
.management-future-btn { border: none; border-radius: 5px; padding: 0.8rem 1.8rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.95rem; background: #3D98D2; color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(61,152,210,0.24); transition: transform .25s ease, box-shadow .25s ease; }

.management-future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-future-grid-gap); align-items: center; }
.management-future-benefits { margin-top: var(--layout-body-to-cards); list-style: none; display: flex; flex-direction: column; gap: var(--layout-cards-gap); }
.management-benefit-item { font-family: 'Poppins', sans-serif; background: #fff; border: 1px solid rgba(180,31,98,0.15); border-radius: 10px; padding: 0.52rem 0.72rem; font-size: 0.84rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: all .35s ease; }
.management-benefit-item.show { opacity: 1; transform: translateY(0); }

.management-demo-shell { position: relative; min-height: 500px; padding: var(--layout-demo-block-top) 0 0; }
.management-cursor { position: absolute; z-index: 45; opacity: 0; font-size: 1.2rem; transition: transform .7s ease, opacity .3s ease; }
.management-dashboard-demo, .management-ai-demo { display: none; }
.management-dashboard-demo.is-active, .management-ai-demo.is-active { display: flex; flex-direction: column; align-items: center; }
.management-dashboard-frame { border: 2px solid #26282d; border-radius: 4px; background: #fff; padding: 0.55rem; width: 100%; max-width: 550px; font-family: 'Poppins', sans-serif; }
.management-topbar { display: flex; justify-content: space-between; align-items: center; background: #f7f8fa; border-radius: 8px; padding: 0.5rem 0.6rem; }
.management-brand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 500; }
.management-brand img { height: 16px; }
.management-action-btn { border: none; background: #3D98D2; color: #fff; border-radius: 5px; padding: 0.24rem 0.6rem; font-size: 0.61rem; font-family: 'Poppins', sans-serif; }
.management-stats { margin: 0.5rem 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 0.35rem; }
.management-stats div { border: 1px solid #e8ebf1; border-radius: 6px; padding: 0.35rem; font-size: 0.62rem; }
.management-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
.zone-card { border: 1px solid #eceef4; border-radius: 8px; padding: 0.35rem; font-size: 0.6rem; display: grid; gap: 0.26rem; }
.zone-card h6 { font-size: 0.62rem; margin-bottom: 0.2rem; color: #666; font-family: 'Poppins', sans-serif; }
#targetStudentRow, #targetFacultyRow, #targetRoomRow { border-radius: 5px; padding: 0.15rem 0.2rem; }
#targetStudentRow.focus, #targetFacultyRow.focus, #targetRoomRow.focus { background: rgba(180,31,98,0.1); }
.management-assigned-card { margin-top: 0.4rem; border: 1px solid rgba(61,152,210,0.3); border-radius: 7px; padding: 0.3rem 0.45rem; font-size: 0.62rem; color: #2d6f99; opacity: 0; transition: opacity .25s ease; }
.management-assigned-card.show { opacity: 1; }
.management-toast { margin-top: 0.38rem; display: inline-flex; background: rgba(61,152,210,0.12); border: 1px solid rgba(61,152,210,0.3); color: #2d6f99; border-radius: 999px; padding: 0.24rem 0.66rem; font-size: 0.64rem; opacity: 0; transform: translateY(6px); transition: all .25s ease; }
.management-toast.show { opacity: 1; transform: translateY(0); }

.management-ai-frame { border: 2px solid #26282d; border-radius: 4px; background: #fff; padding: 0.55rem; width: 100%; max-width: 550px; font-family: 'Poppins', sans-serif; }
.management-ai-frame h5 { font-size: 0.8rem; margin-bottom: 0.35rem; color: #111 !important; }
.ai-card { border: 1px solid #eceef4; border-radius: 8px; padding: 0.35rem 0.45rem; margin-bottom: 0.35rem; font-size: 0.62rem; opacity: 0; transform: translateY(8px); transition: all .3s ease; }
.ai-card.show { opacity: 1; transform: translateY(0); }
.ai-card strong { display: block; margin-bottom: 0.15rem; color: #111; }
.ai-card p { margin: 0 0 0.12rem; font-size: 0.61rem; line-height: 1.35; color: #333 !important; }
.ai-highlight { color: #8e184d !important; font-weight: 600; }
.role-card { border: 1px solid #eceef4; border-radius: 8px; padding: 0.4rem 0.45rem; opacity: 0; transform: translateY(8px); transition: all .3s ease; }
.role-card.show { opacity: 1; transform: translateY(0); }
.role-card h6 { font-family: 'Poppins', sans-serif; font-size: 0.63rem; margin-bottom: 0.28rem; color: #666; }
.role-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.role-col { border-radius: 6px; padding: 0.3rem 0.35rem; font-size: 0.58rem; line-height: 1.3; }
.role-col.current { background: #f7f7f8; color: #444; }
.role-col.future { background: rgba(180,31,98,0.08); color: #8e184d; }

@media (max-width: 1024px) {
  .management-future-grid { grid-template-columns: 1fr; }
  .management-current-cards { grid-template-columns: 1fr; }
  .management-zones, .management-stats { grid-template-columns: 1fr; }
}

/* Billing Flow section */
.billing-slide{background:#faf9f9}.billing-heading-block{text-align:center}.billing-title{font-family:'Crimson Text',serif;font-size:3rem;color:var(--primary-brand)!important;line-height:1.05;margin-bottom:var(--layout-after-heading-block)}.billing-section-title{font-family:'Poppins',sans-serif;text-align:center;font-size:2rem;font-weight:700;color:#111!important;margin-bottom:var(--layout-section-to-body)}.billing-state{display:none;width:100%;max-width:1160px;margin:0 auto}.billing-state.is-active{display:block}.billing-typewriter,.billing-future-typewriter{font-family:'Poppins',sans-serif;font-size:.95rem;line-height:1.75;max-width:980px;margin:0 auto var(--layout-body-to-cards);min-height:5.2rem;color:#111!important;font-weight:500}
.billing-current-cards{margin-top:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-cards-gap)}.billing-current-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.9rem;display:flex;align-items:center;gap:.7rem;opacity:0;transform:translateY(16px);transition:all .5s ease}.billing-current-card.show{opacity:1;transform:translateY(0)}.billing-icon-tile{width:40px;height:40px;border-radius:10px;background:rgba(180,31,98,.09);border:1px solid rgba(180,31,98,.2);display:flex;align-items:center;justify-content:center}.billing-card-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:.89rem;color:#111}.billing-callout{margin:var(--layout-cards-gap) auto 0;max-width:620px;text-align:center;padding:.65rem .9rem;border:1px solid rgba(180,31,98,.25);border-radius:10px;background:rgba(180,31,98,.05);font-family:'Poppins',sans-serif;font-size:.82rem;color:#222;opacity:0;transform:translateY(10px);transition:all .4s ease}.billing-callout.show{opacity:1;transform:translateY(0)}.billing-cta-wrap{display:flex;justify-content:center;margin-top:var(--layout-cta-top)}.billing-future-btn{border:none;border-radius:5px;padding:.8rem 1.8rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;background:#3D98D2;color:#fff;cursor:pointer}
.billing-future-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-future-grid-gap);align-items:center}.billing-future-benefits{margin-top:var(--layout-body-to-cards);list-style:none;display:flex;flex-direction:column;gap:var(--layout-cards-gap)}.billing-benefit-item{font-family:'Poppins',sans-serif;background:#fff;border:1px solid rgba(180,31,98,.15);border-radius:10px;padding:.52rem .72rem;font-size:.84rem;font-weight:500;opacity:0;transform:translateY(10px);transition:all .35s ease}.billing-benefit-item.show{opacity:1;transform:translateY(0)}
.billing-demo-shell{position:relative;min-height:500px;padding:var(--layout-demo-block-top) 0 0}.billing-cursor{position:absolute;z-index:45;opacity:0;font-size:1.2rem;transition:transform .7s ease,opacity .3s ease}.billing-dashboard-demo,.billing-mobile-demo{display:none}.billing-dashboard-demo.is-active,.billing-mobile-demo.is-active{display:flex;flex-direction:column;align-items:center}
.billing-dashboard-frame{border:2px solid #26282d;border-radius:4px;background:#fff;padding:.55rem;width:100%;max-width:560px;font-family:'Poppins',sans-serif}.billing-topbar{display:flex;justify-content:space-between;align-items:center;background:#f7f8fa;border-radius:8px;padding:.5rem .6rem}.billing-brand{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:500}.billing-brand img{height:16px}.billing-action-btn{border:none;background:#3D98D2;color:#fff;border-radius:5px;padding:.24rem .6rem;font-size:.61rem;font-family:'Poppins',sans-serif}
.billing-zones{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:.4rem;margin-top:.5rem}.billing-zone{border:1px solid #eceef4;border-radius:8px;padding:.35rem;font-size:.6rem;display:grid;gap:.26rem}.billing-zone h6{font-size:.62rem;margin-bottom:.2rem;color:#666;font-family:'Poppins',sans-serif}
.billing-actions-row{display:flex;gap:.3rem;margin-top:.4rem}.quote-preview,.emi-panel,.payment-panel{margin-top:.4rem;border:1px solid #eceef4;border-radius:8px;padding:.35rem .45rem;font-size:.62rem;opacity:0;transform:translateY(8px);transition:all .3s ease}.quote-preview.show,.emi-panel.show,.payment-panel.show{opacity:1;transform:translateY(0)}.quote-preview h6,.emi-panel h6{font-size:.64rem;margin-bottom:.2rem;color:#666}.quote-preview small,.emi-panel small{font-size:.58rem;color:#8e184d}
.billing-toast{margin-top:.35rem;display:inline-flex;background:rgba(61,152,210,.12);border:1px solid rgba(61,152,210,.3);color:#2d6f99;border-radius:999px;padding:.24rem .66rem;font-size:.64rem;opacity:0;transform:translateY(6px);transition:all .25s ease}.billing-toast.show{opacity:1;transform:translateY(0)}
.billing-mobile-frame{height:min(500px,62vh);aspect-ratio:16/25;width:auto;max-width:100%;border:4px solid #26282d;border-radius:28px;background:#fff;overflow:hidden;display:flex;flex-direction:column}.billing-mobile-status{height:28px;font-family:'Poppins',sans-serif;font-size:.62rem;font-weight:600;padding:0 .8rem;display:flex;align-items:center;justify-content:space-between}.billing-mobile-status i{color:#111!important}.billing-mobile-step{display:none;padding:.7rem .9rem;font-family:'Poppins',sans-serif;animation:fadeUpSoft .3s ease}.billing-mobile-step.is-active{display:block}.billing-mobile-step img{height:20px;margin-bottom:.45rem}.billing-mobile-step h5{font-family:'Poppins',sans-serif;font-size:1.02rem;margin-bottom:.4rem;color:#111!important}.billing-mobile-field{border:1px solid #e6e8ee;border-radius:8px;padding:.43rem .55rem;margin-bottom:.42rem;font-size:.69rem;color:#2d2d2d;background:#fff}.billing-mobile-step button{width:100%;border:none;border-radius:5px;background:#3D98D2;color:#fff;font-family:'Poppins',sans-serif;font-size:.74rem;font-weight:500;padding:.5rem .7rem;margin-top:.35rem}.billing-mobile-step button.tap{animation:tapPulse .28s ease}

@media (max-width:1024px){.billing-future-grid{grid-template-columns:1fr}.billing-current-cards{grid-template-columns:1fr}.billing-zones{grid-template-columns:1fr}}

/* Online Sessions section */
.online-slide{background:#faf9f9}.online-heading-block{text-align:center}.online-title{font-family:'Crimson Text',serif;font-size:3rem;color:var(--primary-brand)!important;line-height:1.05;margin-bottom:var(--layout-after-heading-block)}.online-section-title{font-family:'Poppins',sans-serif;text-align:center;font-size:2rem;font-weight:700;color:#111!important;margin-bottom:var(--layout-section-to-body)}.online-state{display:none;width:100%;max-width:1160px;margin:0 auto}.online-state.is-active{display:block}.online-typewriter,.online-future-typewriter{font-family:'Poppins',sans-serif;font-size:.95rem;line-height:1.75;max-width:980px;margin:0 auto var(--layout-body-to-cards);min-height:5.2rem;color:#111!important;font-weight:500}
.online-current-cards{margin-top:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-cards-gap)}.online-current-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.9rem;display:flex;align-items:center;gap:.7rem;opacity:0;transform:translateY(16px);transition:all .5s ease}.online-current-card.show{opacity:1;transform:translateY(0)}.online-icon-tile{width:40px;height:40px;border-radius:10px;background:rgba(180,31,98,.09);border:1px solid rgba(180,31,98,.2);display:flex;align-items:center;justify-content:center}.online-card-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:.89rem;color:#111}.online-callout{margin:var(--layout-cards-gap) auto 0;max-width:640px;text-align:center;padding:.65rem .9rem;border:1px solid rgba(180,31,98,.25);border-radius:10px;background:rgba(180,31,98,.05);font-family:'Poppins',sans-serif;font-size:.82rem;color:#222;opacity:0;transform:translateY(10px);transition:all .4s ease}.online-callout.show{opacity:1;transform:translateY(0)}.online-cta-wrap{display:flex;justify-content:center;margin-top:var(--layout-cta-top)}.online-future-btn{border:none;border-radius:5px;padding:.8rem 1.8rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;background:#3D98D2;color:#fff;cursor:pointer}
.online-future-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--layout-future-grid-gap);align-items:center}.online-future-benefits{margin-top:var(--layout-body-to-cards);list-style:none;display:flex;flex-direction:column;gap:var(--layout-cards-gap)}.online-benefit-item{font-family:'Poppins',sans-serif;background:#fff;border:1px solid rgba(180,31,98,.15);border-radius:10px;padding:.52rem .72rem;font-size:.84rem;font-weight:500;opacity:0;transform:translateY(10px);transition:all .35s ease}.online-benefit-item.show{opacity:1;transform:translateY(0)}
.online-demo-shell{position:relative;min-height:520px;padding:var(--layout-demo-block-top) 0 0}.online-cursor{position:absolute;z-index:45;opacity:0;font-size:1.2rem;transition:transform .7s ease,opacity .3s ease}.online-eval-demo,.online-booking-demo,.online-room-demo,.online-feedback-demo{display:none}.online-eval-demo.is-active,.online-booking-demo.is-active,.online-room-demo.is-active,.online-feedback-demo.is-active{display:flex;flex-direction:column;align-items:center}
.online-eval-frame{border:2px solid #26282d;border-radius:4px;background:#fff;padding:.55rem;width:100%;max-width:560px;font-family:'Poppins',sans-serif}.online-eval-top{display:flex;justify-content:space-between;align-items:center;background:#f7f8fa;border-radius:8px;padding:.5rem .6rem}.online-eval-brand{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:500}.online-eval-brand img{height:16px}.online-btn{border:none;background:#3D98D2;color:#fff;border-radius:5px;padding:.24rem .6rem;font-size:.61rem;font-family:'Poppins',sans-serif}
.online-eval-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.5rem}.online-eval-card{border:1px solid #eceef4;border-radius:8px;padding:.35rem;font-size:.6rem;display:grid;gap:.22rem}.online-eval-card h6{font-size:.62rem;margin-bottom:.15rem;color:#666;font-family:'Poppins',sans-serif}
#onlineStudentRow.focus,#onlinePackageRow.focus{background:rgba(180,31,98,.1);border-radius:6px;padding:.08rem .12rem}
.online-security-card{margin-top:.45rem;border:1px solid #eceef4;border-radius:8px;padding:.35rem .45rem;font-size:.62rem;opacity:0;transform:translateY(8px);transition:all .3s ease}.online-security-card.show{opacity:1;transform:translateY(0)}.online-security-card strong{display:block;margin-bottom:.15rem;color:#111}
.online-toast{margin-top:.35rem;display:inline-flex;background:rgba(61,152,210,.12);border:1px solid rgba(61,152,210,.3);color:#2d6f99;border-radius:999px;padding:.24rem .66rem;font-size:.64rem;opacity:0;transform:translateY(6px);transition:all .25s ease}.online-toast.show{opacity:1;transform:translateY(0)}
.online-mobile-frame{height:min(500px,62vh);aspect-ratio:16/25;width:auto;max-width:100%;border:4px solid #26282d;border-radius:28px;background:#fff;overflow:hidden;display:flex;flex-direction:column}.online-mobile-status{height:28px;font-family:'Poppins',sans-serif;font-size:.62rem;font-weight:600;padding:0 .8rem;display:flex;align-items:center;justify-content:space-between}.online-mobile-status i{color:#111!important}
.online-mobile-step{display:none;padding:.7rem .9rem;font-family:'Poppins',sans-serif;animation:fadeUpSoft .3s ease}.online-mobile-step.is-active{display:block}.online-mobile-step img{height:20px;margin-bottom:.45rem}.online-mobile-step h5{font-family:'Poppins',sans-serif;font-size:1.02rem;margin-bottom:.4rem;color:#111!important}.online-mobile-step p{font-family:'Poppins',sans-serif;font-size:.74rem;line-height:1.45;color:#444!important;margin-bottom:.55rem}
.online-field{border:1px solid #e6e8ee;border-radius:8px;padding:.43rem .55rem;margin-bottom:.42rem;font-size:.69rem;color:#2d2d2d;background:#fff}.online-field.small{font-size:.64rem;line-height:1.45}.online-field.highlight{border-color:rgba(180,31,98,.35);background:rgba(180,31,98,.06)}
.online-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.35rem}.online-btn-row button{width:100%;border:none;border-radius:5px;background:#3D98D2;color:#fff;font-family:'Poppins',sans-serif;font-size:.68rem;font-weight:500;padding:.45rem .5rem}
.online-mobile-step button{width:100%;border:none;border-radius:5px;background:#3D98D2;color:#fff;font-family:'Poppins',sans-serif;font-size:.74rem;font-weight:500;padding:.5rem .7rem;margin-top:.35rem}.online-mobile-step button.tap{animation:tapPulse .28s ease}
.online-check{display:flex;align-items:center;gap:.35rem;font-size:.64rem;margin:.25rem 0;color:#333}
.online-room-frame{border:2px solid #26282d;border-radius:4px;background:#fff;padding:.55rem;width:100%;max-width:560px;font-family:'Poppins',sans-serif}.online-room-top{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;margin-bottom:.35rem}.online-room-top img{height:16px}.rec-badge{margin-left:auto;background:rgba(244,67,54,.12);color:#b12b24;border-radius:999px;padding:.12rem .45rem;font-size:.58rem;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}.rec-badge.show{opacity:1;transform:translateY(0)}.rec-badge.pulse{animation:tapPulse .9s ease infinite}
.online-room-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.tile{border:1px solid #eceef4;border-radius:10px;padding:.45rem .5rem;text-align:center;transition:transform .6s ease,box-shadow .6s ease}.tile strong{display:block;font-size:.72rem}.tile small{color:#666;font-size:.58rem}.tile.live{animation:onlineTileDrift 5.5s ease-in-out infinite alternate}
@keyframes onlineTileDrift{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
.online-btn.tap{animation:tapPulse .28s ease}
.online-room-meta{margin-top:.35rem;border:1px solid #eceef4;border-radius:8px;padding:.35rem .45rem;font-size:.62rem}.online-room-meta .timer{font-weight:700;margin:.15rem 0}.online-room-controls{display:flex;gap:.3rem;margin-top:.35rem}.online-room-controls .online-btn{flex:1}
.stars{color:#d9d9d9;font-size:.85rem;letter-spacing:.08rem;margin:.2rem 0;transition:color .25s ease}#onlineStars.selected{color:#f5b301}#onlineFeedbackSuccess{opacity:0;transition:opacity .25s ease}#onlineFeedbackSuccess.show{opacity:1}
.online-eval-card.expand{box-shadow:0 0 0 1px rgba(180,31,98,.18)}

/* Macro System & Infrastructure section */
.macro-slide{background:#faf9f9}.macro-heading-block{text-align:center}.macro-title{font-family:'Crimson Text',serif;font-size:2.65rem;color:var(--primary-brand)!important;line-height:1.05;margin-bottom:var(--layout-after-heading-block)}.macro-section-title{font-family:'Poppins',sans-serif;text-align:center;font-size:2rem;font-weight:700;color:#111!important;margin-bottom:var(--layout-section-to-body)}.macro-state{display:none;width:100%;max-width:1180px;margin:0 auto}.macro-state.is-active{display:block}.macro-typewriter,.macro-future-typewriter{font-family:'Poppins',sans-serif;font-size:.95rem;line-height:1.65;max-width:980px;margin:0 auto var(--layout-body-to-cards);min-height:3.2rem;color:#111!important;font-weight:500}
.macro-current-cards{margin-top:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-cards-gap)}.macro-current-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:.85rem;display:flex;align-items:center;gap:.65rem;opacity:0;transform:translateY(16px);transition:all .5s ease}.macro-current-card.show{opacity:1;transform:translateY(0)}.macro-icon-tile{width:40px;height:40px;border-radius:10px;background:rgba(180,31,98,.09);border:1px solid rgba(180,31,98,.2);display:flex;align-items:center;justify-content:center;color:var(--primary-brand)}.macro-card-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;color:#111;line-height:1.35}.macro-callout{margin:var(--layout-cards-gap) auto 0;max-width:680px;text-align:center;padding:.65rem .9rem;border:1px solid rgba(180,31,98,.25);border-radius:10px;background:rgba(180,31,98,.05);font-family:'Poppins',sans-serif;font-size:.82rem;color:#222;opacity:0;transform:translateY(10px);transition:all .4s ease}.macro-callout.show{opacity:1;transform:translateY(0)}.macro-cta-wrap{display:flex;justify-content:center;margin-top:var(--layout-cta-top)}.macro-future-btn{border:none;border-radius:5px;padding:.8rem 1.8rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;background:#3D98D2;color:#fff;cursor:pointer;transition:background .2s ease,transform .2s ease}.macro-future-btn:hover{background:#3490c4}
.macro-future-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--layout-future-grid-gap);align-items:start}.macro-future-grid--identity{align-items:start}.macro-future-left--identity .macro-future-typewriter{max-width:100%;margin:0 0 1rem;text-align:left}
.macro-identity-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--layout-cards-gap)}.macro-identity-point{font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:500;color:#111;line-height:1.35;background:#fff;border:1px solid rgba(180,31,98,.22);border-radius:10px;padding:.48rem .65rem;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .45s ease}.macro-identity-point.show{opacity:1;transform:translateY(0)}
.macro-future-right--identity{display:flex;justify-content:center;align-items:flex-start;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;align-self:stretch;min-height:0}.macro-id-hero-column{display:flex;flex-direction:column;align-items:center;gap:.85rem;width:100%;max-width:340px}.macro-id-soft-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;opacity:0;transition:opacity .5s ease .15s}.macro-id-soft-tags.show{opacity:1}.macro-id-soft-tag{font-family:'Poppins',sans-serif;font-size:.58rem;font-weight:500;color:#666;background:rgba(255,255,255,.9);border:1px solid rgba(180,31,98,.18);border-radius:999px;padding:.2rem .5rem}

/* Macro future: ID-only then devices — shared right visual column */
.macro-visual-composite{position:relative;width:100%;max-width:min(100%,760px);margin:0 auto;min-height:clamp(280px,32vh,380px);flex:1;align-self:stretch}
.macro-visual-phase--id,.macro-visual-phase--devices{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.25rem 0 .75rem;transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),visibility .95s;box-sizing:border-box}
.macro-visual-phase--devices{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.985)}
.macro-visual-composite.is-devices-phase .macro-visual-phase--id{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.97)}
.macro-visual-composite.is-devices-phase .macro-visual-phase--devices{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.macro-visual-phase--id,.macro-visual-phase--devices{transition-duration:.25s}}
.macro-id-hero-card{width:100%;max-width:300px;border-radius:16px;background:#fff;border:1px solid rgba(30,91,161,.14);box-shadow:0 14px 36px rgba(12,41,84,.09);overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .55s ease,transform .65s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}.macro-id-hero-card.show{opacity:1;transform:translateY(0) scale(1)}.macro-id-hero-card:hover{box-shadow:0 18px 44px rgba(12,41,84,.14)}
.macro-id-hero-topbar{height:8px;background:linear-gradient(90deg,#1e5ba1,#2f86d6)}
.macro-id-hero-inner{padding:1.15rem 1.25rem 1rem;font-family:'Poppins',sans-serif;text-align:center}.macro-id-hero-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.macro-id-hero-logo{height:26px;object-fit:contain}.macro-id-hero-chip{font-size:.52rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1e5ba1;background:#f4f9ff;border:1px solid rgba(30,91,161,.32);border-radius:999px;padding:.12rem .45rem}
.macro-id-hero-photo{width:88px;height:88px;border-radius:50%;margin:0 auto .65rem;background:#f4f8fd;border:3px solid #fff;box-shadow:0 4px 12px rgba(11,43,84,.12);display:flex;align-items:center;justify-content:center;color:#7a90ad;font-size:2.2rem}
.macro-id-hero-name{font-size:1.15rem;font-weight:700;color:#111;margin-bottom:.15rem}.macro-id-hero-role{font-size:.78rem;font-weight:600;color:#1e5ba1;margin-bottom:.75rem}
.macro-id-hero-meta{display:grid;gap:.45rem;text-align:left;margin:0 0 .85rem}.macro-id-hero-meta>div{display:grid;grid-template-columns:92px 1fr;gap:.35rem;font-size:.72rem}.macro-id-hero-meta dt{font-weight:500;color:#6b7280;margin:0}.macro-id-hero-meta dd{margin:0;font-weight:600;color:#1f2937}
.macro-id-hero-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.65rem;border-top:1px solid #e6edf5}.macro-id-hero-qr{width:64px;height:64px;border:1px solid #ccdff1;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f6fbff;color:#1e5ba1;font-size:2.4rem;opacity:0;transform:scale(.92);transition:opacity .45s ease,transform .45s ease}.macro-id-hero-qr.show{opacity:1;transform:scale(1)}.macro-id-hero-nfc{font-size:.58rem;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:.3rem;opacity:0;transition:opacity .45s ease .1s}.macro-id-hero-nfc.show{opacity:1}.macro-id-hero-nfc i{transform:rotate(90deg);color:#1e5ba1;font-size:.65rem}
.macro-id-hero-cm-note{margin:.55rem 0 0;font-size:.5rem;font-weight:500;color:#94a3b8;letter-spacing:.02em}

/* Macro future: parent ID reissue + admin — composite layout (no bottom clip) */
.macro-reissue-devices-composite {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: clamp(300px, 38vh, 420px);
  margin: 0 auto;
  flex-shrink: 0;
}

.macro-reissue-devices-composite .macro-reissue-panel {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: auto;
  margin: 0;
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.macro-reissue-panel--desktop {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: min(100%, 520px);
  transform: scale(0.66);
  transform-origin: bottom left;
}

.macro-reissue-panel--mobile {
  position: absolute;
  right: -2%;
  bottom: 6%;
  z-index: 3;
  width: min(46%, 300px);
  transform: scale(0.78);
  transform-origin: bottom right;
}

.macro-reissue-panel.macro-reissue-front {
  z-index: 4;
  opacity: 1;
  filter: none;
}

.macro-reissue-panel.macro-reissue-behind {
  z-index: 2;
  opacity: 0.5;
  filter: saturate(0.88);
}

.macro-reissue-panel--desktop.macro-reissue-front {
  z-index: 4;
  opacity: 1;
  filter: none;
  transform: scale(0.68);
}

.macro-reissue-panel--mobile.macro-reissue-behind {
  opacity: 0.45;
  z-index: 2;
}

.demo-frame-label--macro-device {
  font-size: 0.58rem;
  margin-bottom: 0.15rem;
  text-align: center;
}

.macro-reissue-demo-shell--mobile {
  position: relative;
  width: 100%;
  max-width: 280px;
  padding: 0.1rem 0 0;
}

.macro-reissue-demo-shell {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: var(--layout-demo-block-top) 0 0;
}

.macro-reissue-demo-shell--admin {
  max-width: 520px;
  padding-top: 0.15rem;
}

.macro-reissue-devices-composite .macro-reissue-mobile-frame {
  height: min(260px, 30vh) !important;
  max-height: 30vh;
  aspect-ratio: 16 / 25;
  width: auto;
  max-width: 100%;
  border: 3px solid #26282d;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}

.macro-reissue-mobile-frame {
  height: min(420px, 52vh);
  aspect-ratio: 16 / 25;
  width: auto;
  max-width: 100%;
  border: 4px solid #26282d;
  border-radius: 28px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
}

.macro-reissue-devices-composite .macro-id-admin-frame {
  max-height: min(240px, 28vh);
  overflow: visible;
  padding: 0.4rem 0.45rem 0.45rem;
}

.macro-reissue-devices-composite .macro-id-admin-title {
  font-size: 0.72rem;
  margin-bottom: 0.28rem;
}

.macro-reissue-devices-composite .macro-id-admin-row {
  padding: 0.26rem 0.32rem;
  font-size: 0.54rem;
  gap: 0.22rem;
}

.macro-reissue-devices-composite .macro-id-admin-head {
  font-size: 0.52rem;
}

.macro-reissue-devices-composite .macro-id-admin-print-note {
  font-size: 0.54rem;
  margin-top: 0.22rem;
}

.macro-reissue-devices-composite .macro-id-reissue-toast {
  font-size: 0.58rem;
  padding: 0.2rem 0.5rem;
  margin-top: 0.25rem;
}

.macro-reissue-devices-composite .macro-reissue-step {
  padding: 0.45rem 0.55rem 0.55rem;
}

.macro-reissue-devices-composite .macro-reissue-step h5 {
  font-size: 0.82rem;
  margin-bottom: 0.28rem;
}

.macro-reissue-devices-composite .macro-reissue-step p,
.macro-reissue-devices-composite .macro-reissue-lead {
  font-size: 0.64rem !important;
  margin-bottom: 0.35rem !important;
}

.macro-reissue-devices-composite .macro-reissue-step button {
  padding: 0.38rem 0.5rem;
  font-size: 0.66rem;
}

.macro-id-admin-status {
  font-weight: 600;
  color: #111 !important;
}

.macro-reissue-mobile-status {
  height: 28px;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
}

.macro-reissue-mobile-status i {
  color: #111 !important;
}

.macro-reissue-step {
  display: none;
  padding: 0.7rem 0.9rem 1rem;
  text-align: left;
  animation: fadeUpSoft 0.3s ease;
}

.macro-reissue-step.is-active {
  display: block;
}

.macro-reissue-step img {
  height: 20px;
  margin-bottom: 0.45rem;
}

.macro-reissue-step h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
  color: #111 !important;
}

.macro-reissue-step p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #444 !important;
  margin-bottom: 0.55rem;
}

.macro-reissue-child-name {
  font-weight: 600;
  color: #111 !important;
}

.macro-reissue-summary,
.macro-reissue-fee {
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  padding: 0.43rem 0.55rem;
  margin-bottom: 0.45rem;
  font-size: 0.7rem;
  color: #2d2d2d;
  background: #fcfcfc;
  font-family: 'Poppins', sans-serif;
}

.macro-reissue-fee {
  font-weight: 600;
  color: #111 !important;
}

.macro-reissue-lead {
  font-size: 0.7rem !important;
  line-height: 1.5 !important;
}

.macro-reissue-check {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.66rem;
  color: #333;
  margin: 0.45rem 0 0.55rem;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.macro-reissue-check input {
  margin-top: 0.12rem;
}

.macro-reissue-success-note {
  font-size: 0.72rem;
  font-weight: 600;
  color: #179144;
  margin: 0.35rem 0 0.55rem;
  font-family: 'Poppins', sans-serif;
}

.macro-reissue-step button {
  width: 100%;
  border: none;
  border-radius: 5px;
  background: #3d98d2;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.5rem 0.7rem;
  margin-top: 0.45rem;
  cursor: pointer;
}

.macro-reissue-step button.tap {
  animation: tapPulse 0.28s ease;
}

.macro-reissue-cursor {
  position: absolute;
  z-index: 45;
  opacity: 0;
  font-size: 1.2rem;
  transition: transform 0.7s ease, opacity 0.3s ease;
  pointer-events: none;
}

.macro-id-admin-frame {
  border: 2px solid #26282d;
  border-radius: 4px;
  background: #fff;
  padding: 0.55rem;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

.macro-id-admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.45rem;
}

.macro-id-admin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #111;
}

.macro-id-admin-brand img {
  height: 16px;
}

.macro-id-admin-search {
  font-size: 0.68rem;
  color: #666;
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 6px;
  padding: 0.22rem 0.45rem;
}

.macro-id-admin-title {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #111 !important;
  margin: 0 0 0.45rem 0.15rem;
  text-align: left;
}

.macro-id-admin-table {
  border: 1px solid #eceef4;
  border-radius: 9px;
  overflow: hidden;
}

.macro-id-admin-row {
  display: grid;
  grid-template-columns: 1fr 0.95fr 0.65fr 1fr 0.75fr 0.95fr;
  gap: 0.3rem;
  align-items: center;
  padding: 0.38rem 0.42rem;
  font-size: 0.6rem;
  border-bottom: 1px solid #f1f3f7;
  color: #333;
}

.macro-id-admin-row:last-child {
  border-bottom: none;
}

.macro-id-admin-head {
  background: #fafbfc;
  font-weight: 500;
  color: #666;
}

#macroIdAdminAaravRow.focus {
  background: rgba(180, 31, 98, 0.07);
}

.macro-id-admin-dl-btn {
  border: none;
  border-radius: 5px;
  background: #3d98d2;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  padding: 0.22rem 0.45rem;
  cursor: pointer;
}

.macro-id-admin-dl-btn.tap {
  animation: tapPulse 0.28s ease;
}

.macro-id-admin-print-note {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  line-height: 1.45;
  color: #444 !important;
  text-align: left;
  padding: 0 0.1rem;
}

.macro-id-reissue-toast {
  margin-top: 0.4rem;
  display: inline-flex;
  align-self: flex-start;
  background: rgba(61, 152, 210, 0.12);
  border: 1px solid rgba(61, 152, 210, 0.3);
  color: #2d6f99;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.64rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease;
  font-family: 'Poppins', sans-serif;
}

.macro-id-reissue-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width:1024px){.macro-future-grid,.macro-future-grid--identity{grid-template-columns:1fr}.macro-current-cards{grid-template-columns:1fr}.macro-id-hero-column{max-width:100%}.macro-id-hero-card{max-width:280px}.macro-id-admin-row{grid-template-columns:1fr 1fr;gap:0.25rem;font-size:0.58rem}}

/* Macro: single fixed animation stage — ID → mobile → admin (no overlap, no bottom clip) */
.macro-stage-root {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: clamp(360px, 46vh, 520px);
  max-height: min(56vh, calc(100vh - 14rem));
  box-sizing: border-box;
}

.macro-animation-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.35rem 0.5rem 0.75rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.992);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.6s;
}

.macro-animation-stage.macro-stage-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.macro-animation-stage.macro-stage-leaving {
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.985) !important;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

.macro-animation-stage--id {
  justify-content: center;
  padding-top: 0.5rem;
}

.macro-animation-stage--mobile,
.macro-animation-stage--admin {
  justify-content: center;
}

.macro-animation-stage--mobile .macro-reissue-demo-shell--mobile,
.macro-animation-stage--admin .macro-reissue-demo-shell--admin {
  width: 100%;
  max-width: 100%;
  flex: 0 1 auto;
}

.macro-reissue-actions {
  display: flex;
  flex-direction: row;
  gap: 0.35rem;
  margin-top: 0.4rem;
  width: 100%;
}

.macro-reissue-actions button {
  flex: 1;
  min-width: 0;
  margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .macro-animation-stage {
    transition-duration: 0.2s;
    transform: none;
  }
  .macro-animation-stage.macro-stage-leaving {
    transform: none !important;
  }
}

/* Macro slide — strict title / grid / media well (no overlap, phases contained) */
#slide-macro.macro-slide {
  overflow: hidden;
}

#slide-macro .macro-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#slide-macro .macro-heading-block {
  flex-shrink: 0;
}

#slide-macro .macro-future-state.is-active {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#slide-macro .macro-future-title-band {
  flex-shrink: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0.25rem 0.15rem;
}

#slide-macro .macro-future-section-heading {
  margin-bottom: 0.35rem;
}

#slide-macro .macro-future-grid--identity {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(280px, min(40vw, 420px));
}

#slide-macro .macro-future-left--identity {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  align-self: stretch;
  -webkit-overflow-scrolling: touch;
}

#slide-macro .macro-future-right--identity {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

#slide-macro .macro-media-well {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-height: min(58vh, calc(100vh - 13.5rem));
}

#slide-macro .macro-stage-root {
  max-width: 100%;
  width: 100%;
}

#slide-macro .macro-id-hero-card {
  max-width: min(288px, 100%);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

#slide-macro .macro-animation-stage--mobile .macro-reissue-mobile-frame {
  height: min(380px, 50vh);
  max-height: min(380px, 50vh);
  aspect-ratio: 10 / 19;
  width: auto;
  max-width: min(260px, 100%);
  border: 3px solid #26282d;
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
  margin: 0 auto;
}

#slide-macro .macro-animation-stage--admin .macro-id-admin-frame {
  max-height: none;
  overflow: visible;
  width: 100%;
  max-width: min(400px, 100%);
  margin: 0 auto;
}

#slide-macro .macro-animation-stage--admin .macro-reissue-demo-shell--admin {
  max-width: min(400px, 100%);
  position: relative;
  padding-top: 0.2rem;
}

#slide-macro .macro-animation-stage--admin .macro-id-admin-title {
  font-size: 0.78rem;
}

#slide-macro .macro-animation-stage--admin .macro-id-admin-row {
  font-size: 0.58rem;
  padding: 0.32rem 0.38rem;
}

#slide-macro .macro-animation-stage--admin .macro-id-admin-head {
  font-size: 0.54rem;
}

#slide-macro .macro-reissue-cursor {
  font-size: 1rem;
}

#slide-macro .macro-reissue-actions button {
  width: auto;
}

#slide-macro .macro-id-admin-dl-btn {
  background: #3d98d2;
  border-radius: 5px;
}

@media (max-width: 1024px) {
  #slide-macro .macro-media-well {
    max-height: min(52vh, calc(100vh - 12rem));
  }
  #slide-macro .macro-stage-root {
    min-height: clamp(320px, 42vh, 480px);
  }
  #slide-macro .macro-animation-stage--mobile .macro-reissue-mobile-frame {
    height: min(340px, 44vh);
    max-height: min(340px, 44vh);
  }
}

/* —— Final commercial / value slide —— */
.slide.commercial-slide {
  background: #faf9f9;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.commercial-wrapper {
  font-family: 'Poppins', sans-serif;
}

.commercial-slide .commercial-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1), transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.commercial-slide .commercial-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .commercial-slide .commercial-reveal {
    transition: opacity 0.35s ease;
    transform: none;
  }
}

.commercial-header-block {
  margin-bottom: 0.15rem;
}

.commercial-main-title {
  font-family: 'Crimson Text', serif;
  font-size: clamp(1.85rem, 3.2vw, 2.45rem);
  color: var(--primary-brand) !important;
  text-align: center;
  line-height: 1.08;
  margin-bottom: clamp(0.55rem, 1.2vh, 0.85rem);
  font-weight: 700;
}

.commercial-main-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  color: #111 !important;
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.commercial-section-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-brand) !important;
  margin: 0 0 clamp(0.75rem, 1.4vh, 1rem);
  text-align: center;
}

.commercial-email-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.35rem);
  width: 100%;
}

.commercial-email-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 1.05rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.commercial-email-card--featured {
  border-color: rgba(180, 31, 98, 0.35);
  box-shadow: 0 10px 32px rgba(180, 31, 98, 0.1);
  background: linear-gradient(180deg, #fff 0%, rgba(180, 31, 98, 0.04) 100%);
}

.commercial-email-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.commercial-email-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.2rem;
  object-fit: contain;
}

.commercial-email-icon--g {
  border: none;
  padding: 0;
}

.commercial-email-icon--m {
  border-radius: 6px;
}

.commercial-email-icon--cm {
  border: none;
  padding: 0;
  border-radius: 6px;
}

.commercial-email-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #111 !important;
  line-height: 1.3;
  margin: 0;
}

.commercial-email-price {
  font-family: 'Poppins', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #111 !important;
  margin: 0;
  letter-spacing: -0.01em;
}

.commercial-email-spec {
  font-size: 0.72rem;
  font-weight: 500;
  color: #444 !important;
  margin: 0;
  line-height: 1.35;
}

.commercial-email-footnote {
  margin-top: clamp(0.85rem, 1.5vh, 1.15rem);
  font-size: 0.72rem;
  font-weight: 600;
  color: #333 !important;
  text-align: center;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

.commercial-commission-hero {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.commercial-bench-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: clamp(0.85rem, 1.5vh, 1.1rem);
}

.commercial-bench-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 7.2rem;
  min-height: 4.3rem;
  padding: 0.75rem 0.9rem 0.8rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.commercial-bench-pill-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #555 !important;
  letter-spacing: 0.02em;
}

.commercial-bench-pill-metricrow {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.commercial-bench-pill-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-brand) !important;
  font-variant-numeric: tabular-nums;
}

.commercial-bench-pill-value--hero {
  font-size: 1.58rem;
  letter-spacing: -0.02em;
}

.commercial-bench-pill-suffix {
  font-size: 0.72rem;
  font-weight: 600;
  color: #777 !important;
  text-transform: lowercase;
}

.commercial-bench-pill--accent {
  border-color: rgba(180, 31, 98, 0.45);
  background: linear-gradient(180deg, #fff 0%, rgba(180, 31, 98, 0.06) 100%);
  box-shadow: 0 4px 18px rgba(180, 31, 98, 0.12);
}

.commercial-day-kicker {
  font-size: 0.74rem;
  font-weight: 500;
  color: #333 !important;
  margin: 0 0 clamp(0.65rem, 1.2vh, 0.9rem);
  letter-spacing: 0.01em;
}

.commercial-stacked-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  height: clamp(168px, 24vh, 210px);
}

.commercial-chart-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.55rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: #333 !important;
}

.commercial-chart-key-i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.commercial-chart-key-i--partner {
  background: var(--primary-brand);
}

.commercial-chart-key-i--rdcc {
  background: #111;
}

.commercial-model-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  max-width: 520px;
  margin: clamp(0.85rem, 1.5vh, 1.15rem) auto 0;
  text-align: left;
}

.commercial-model-col {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 0.55rem 0.65rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.commercial-model-col--cm {
  border-color: rgba(180, 31, 98, 0.22);
  background: rgba(180, 31, 98, 0.03);
}

.commercial-model-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #111 !important;
  margin-bottom: 0.15rem;
}

.commercial-model-metric {
  font-size: 0.72rem;
  font-weight: 500;
  color: #333 !important;
}

.commercial-model-metric strong {
  font-weight: 800;
  color: #111 !important;
  font-variant-numeric: tabular-nums;
}

.commercial-insight-banner {
  margin: clamp(1rem, 1.85vh, 1.35rem) auto 0;
  max-width: 34rem;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  color: #111 !important;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(180, 31, 98, 0.35);
  background: linear-gradient(135deg, rgba(180, 31, 98, 0.11), rgba(180, 31, 98, 0.04));
}

.commercial-insight-banner strong {
  color: var(--primary-brand) !important;
  font-weight: 800;
}

.commercial-growth-block {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.commercial-growth-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  height: clamp(160px, 22vh, 200px);
}

.commercial-growth-tagline {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #333 !important;
  margin: clamp(0.65rem, 1.2vh, 0.95rem) 0 0;
  letter-spacing: 0.02em;
}

.commercial-milestones-block {
  width: 100%;
}

.final-milestones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  width: 100%;
}

.commercial-mile-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 0.85rem 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
  min-height: 5.5rem;
  justify-content: center;
}

.commercial-mile-card--advance {
  border-color: rgba(180, 31, 98, 0.28);
}

.commercial-mile-card--milestone .commercial-mile-value,
.commercial-mile-card--percent .commercial-mile-value {
  color: var(--primary-brand) !important;
  font-weight: 800;
}

.commercial-mile-card--percent .commercial-mile-value {
  font-size: 1.08rem;
}

.commercial-mile-title {
  font-size: 0.65rem;
  font-weight: 600;
  color: #333 !important;
  line-height: 1.35;
  max-width: 11rem;
}

.commercial-mile-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111 !important;
  font-variant-numeric: tabular-nums;
}

.commercial-final-footer {
  width: 100%;
  margin-top: 0.25rem;
}

.commercial-final-card {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  padding: 0.85rem 1.15rem 0.95rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(180, 31, 98, 0.18);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.05);
}

.commercial-final-lead {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: #111 !important;
  margin: 0 0 0.45rem;
}

.commercial-final-tags {
  font-size: 0.68rem;
  font-weight: 600;
  color: #444 !important;
  margin: 0;
  letter-spacing: 0.03em;
}

@media (max-width: 900px) {
  .commercial-email-grid {
    grid-template-columns: 1fr;
  }
  .final-milestones {
    grid-template-columns: 1fr 1fr;
  }
  .commercial-model-rows {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

@media (max-width: 560px) {
  .final-milestones {
    grid-template-columns: 1fr;
  }
  .commercial-bench-pills {
    flex-direction: column;
    align-items: stretch;
  }
  .commercial-bench-pill {
    flex-direction: row;
    justify-content: space-between;
    min-width: 0;
  }
}

/* —— Closing / Final Commitment (minimal centered close) —— */
.slide.closing-slide {
  background: #faf9f9;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

#slide-closing.closing-slide .content-wrapper.closing-wrapper {
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  gap: 0;
  max-width: 100%;
}

#slide-closing.closing-slide p {
  margin-bottom: 0;
}

.closing-wrapper {
  font-family: "Poppins", sans-serif;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3.5vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vh, 3.25rem);
  box-sizing: border-box;
  min-height: min(78vh, calc(100vh - 6.5rem));
}

.closing-column {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.15rem, 2.8vh, 1.85rem);
}

.closing-slide .closing-reveal {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.closing-slide .closing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .closing-slide .closing-reveal {
    transition: opacity 0.45s ease;
    transform: none;
  }
}

.closing-title {
  font-family: "Crimson Text", serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 2.9vw, 1.95rem);
  color: var(--primary-brand);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.15;
  width: 100%;
}

.closing-subtitle {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(0.84rem, 1.45vw, 0.96rem);
  color: #333;
  margin: 0;
  line-height: 1.6;
  max-width: 32rem;
}

.closing-main {
  width: 100%;
  max-width: 34rem;
}

.closing-main-line {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.65vw, 1.02rem);
  color: #111;
  line-height: 1.62;
  margin: 0 0 0.85rem;
}

.closing-main-line:last-child {
  margin-bottom: 0;
}

.closing-trust {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(0.82rem, 1.35vw, 0.93rem);
  color: #444;
  line-height: 1.65;
  margin: 0;
  max-width: 32rem;
}

.closing-thanks {
  margin-top: clamp(1.75rem, 5vh, 3.25rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 28rem;
}

.closing-thanks-title {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: #111;
  letter-spacing: 0.04em;
  margin: 0 0 0.45rem;
}

.closing-thanks-line {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(0.82rem, 1.35vw, 0.92rem);
  color: #555;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 720px) {
  .closing-wrapper {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

@media (max-width:1024px){.online-future-grid{grid-template-columns:1fr}.online-current-cards{grid-template-columns:1fr}.online-eval-grid{grid-template-columns:1fr}}

@media (max-width: 1024px) {
  .recruitment-future-grid {
    grid-template-columns: 1fr;
  }
  .recruitment-current-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .infographic-container { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) { h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } .grid-2 { gap: 2rem; } .logo-container img { max-height: 60px; } }
@media (max-width: 768px) {
  body { overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
  #deck { height: auto; display: block; overflow: visible; }
  .slide { position: relative; height: auto; min-height: 100vh; transform: none !important; opacity: 1; visibility: visible; padding: 5rem 1.5rem; justify-content: flex-start; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 2rem; }
  .nav-controls, .slide-progress { display: none; }
  h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } .stat-large { font-size: 2.5rem; } .chart-container { height: 250px; } .co-brand { top: 1.5rem; left: 1.5rem; }
}

@media print {
  body { background: #fff !important; color: #000 !important; overflow: visible !important; }
  #deck { height: auto; display: block; overflow: visible !important; }
  .slide { position: relative !important; width: 100vw; height: 100vh; page-break-after: always; opacity: 1 !important; visibility: visible !important; transform: none !important; color: #000 !important; padding: 2rem !important; }
  h1, h2, h3, p, .text-muted, .stat-large { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .card, .example-card, .table-container, .mockup-container { border: 1px solid #ccc; background: transparent; box-shadow: none; backdrop-filter: none; }
  .nav-controls, .slide-progress, .slide-bg-blob, .co-brand { display: none !important; }
  h1 { border-bottom: 2px solid #000; padding-bottom: 0.5rem; margin-bottom: 2rem; }
}

/* --- Final refinement layer: responsive safety + prototype focus --- */
.slide,
.content-wrapper,
[class$="-future-grid"],
[class$="-zones"],
[class$="-demo-shell"] {
  min-width: 0;
}

.slide {
  width: 100%;
  max-width: 100%;
}

#deck {
  width: 100%;
  max-width: 100%;
}

.transition-row {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Future state visibility guard.
   [class$="-future-state"] matches ONLY when the class attribute ENDS with "-future-state",
   i.e. before classList.add('is-active') appends "is-active" to the class string.
   Once is-active is appended, this selector no longer matches and the individual
   .*-state.is-active { display: block } rules take over.
   This provides a robust layer that prevents any future-state from showing before click,
   regardless of specificity conflicts from other rules. */
[class$="-future-state"] {
  width: 100%;
  display: none !important;
  visibility: hidden !important;
}

/* When active: individual .*-state.is-active rules handle display.
   The [class$="-future-state"].is-active selector intentionally doesn't exist here —
   once is-active is added, the class attribute ends in "is-active" not "-future-state",
   so the rule above stops matching automatically. */

[class$="-future-grid"] {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  align-self: stretch;
}

[class$="-future-left"] {
  min-width: 0;
}

/* Reusable prototype stage for all demo shells */
[class$="-demo-shell"] {
  --prototype-stage-height: clamp(420px, 58vh, 620px);
  min-height: var(--prototype-stage-height);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-inline: clamp(0.2rem, 1.2vw, 0.7rem);
  /* Ensure controls pill is never clipped */
  overflow: visible;
  position: relative;
}

/* Extra bottom padding so the controls pill doesn't overlap demo content */
[class$="-demo-shell"].sequence-control-host {
  padding-bottom: 2.8rem;
}

[class$="-desktop-frame"],
[class$="-mobile-frame"],
.management-dashboard-frame,
.management-ai-frame,
.online-eval-frame,
.online-room-frame,
.macro-animation-stage {
  max-width: 100%;
  max-height: min(64vh, 640px);
  margin-inline: auto;
}

canvas {
  max-width: 100%;
}

/* ============================================================
   PROTOTYPE DEMO CONTROLS — bottom-center pill, hover-reveal
   Appears only on mobile / desktop screen prototype areas.
   ============================================================ */
.sequence-controls {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  right: auto;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Hidden by default; translate-X keeps centering, translateY hides slightly */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}

.sequence-controls.is-visible {
  visibility: visible;
}

/* Show on hover over the demo shell, or when touch-tapped (controls-open) */
.sequence-control-host:hover .sequence-controls.is-visible,
.sequence-control-host:focus-within .sequence-controls.is-visible,
.sequence-control-host.controls-open .sequence-controls.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.sequence-controls-btn {
  border: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: transparent;
  color: #333 !important;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
  flex-shrink: 0;
}

.sequence-controls-btn i {
  color: inherit !important;
  font-size: 0.62rem;
}

.sequence-controls-btn:hover {
  background: rgba(180, 31, 98, 0.09);
  color: #b41f62 !important;
  transform: scale(1.08);
}

.sequence-controls-btn:active {
  transform: scale(0.95);
}

.sequence-controls-btn:focus-visible {
  outline: 2px solid rgba(180, 31, 98, 0.5);
  outline-offset: 1px;
}

/* Visual separator between rewind and play/pause group */
.sequence-controls-btn--back {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding-right: 0.32rem;
  margin-right: 0.08rem;
}

/* Highlight play when active, pause when paused */
.sequence-controls-btn--play.is-active-state {
  background: rgba(180, 31, 98, 0.10);
  color: #b41f62 !important;
}
.sequence-controls-btn--pause.is-active-state {
  background: rgba(180, 31, 98, 0.10);
  color: #b41f62 !important;
}

/* Small label inside the pill (screen-reader visible, visually minimal) */
.sequence-controls::before {
  content: 'DEMO';
  font-family: 'Poppins', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.28);
  padding: 0 0.3rem 0 0.1rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  margin-right: 0.2rem;
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 1024px) {
  [class$="-future-grid"] {
    grid-template-columns: 1fr;
    gap: clamp(0.9rem, 2.3vh, 1.3rem);
  }

  [class$="-demo-shell"] {
    --prototype-stage-height: clamp(390px, 52vh, 560px);
  }
}

@media (max-width: 768px) {
  .slide {
    overflow-x: clip;
    padding-inline: clamp(0.9rem, 4.5vw, 1.4rem);
  }

  h1 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.34rem, 5.8vw, 1.95rem); }
  h3 { font-size: clamp(1.05rem, 4.8vw, 1.35rem); }
  p { font-size: clamp(0.88rem, 3.8vw, 1.02rem); }

  .row-3 {
    padding-left: clamp(0.5rem, 4vw, 1.6rem);
    margin-top: -0.5rem;
  }

  .row-5 {
    margin-left: 0;
    margin-top: -0.45rem;
  }

  [class$="-demo-shell"] {
    --prototype-stage-height: clamp(340px, 58vh, 500px);
    align-items: center;
    justify-content: center;
    padding-inline: 0;
  }

  [class$="-desktop-frame"],
  .management-dashboard-frame,
  .management-ai-frame,
  .online-eval-frame,
  .online-room-frame {
    width: min(100%, 96vw);
  }

  [class$="-mobile-frame"] {
    height: min(68vh, 520px);
    max-height: min(68vh, 520px);
  }

  .sequence-controls {
    bottom: 0.5rem;
    /* left: 50% and transform: translateX(-50%) are already set globally */
  }
}