/* ==========================================================================
   OpsWallah — Design Tokens
   ========================================================================== */
:root {
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-accent: #F59E0B;
  --color-success: #10B981;
  --color-bg: #F8FAFC;
  --color-white: #FFFFFF;
  --color-heading: #0F172A;
  --color-body: #475569;
  --color-border: #E2E8F0;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(37, 99, 235, 0.12);

  --container-width: 1160px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.25;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 52px 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.eyebrow.center { display: block; text-align: center; }

.section-title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  margin-bottom: 16px;
}

.section-title.center { text-align: center; }

.section-note {
  color: var(--color-body);
  font-size: 15px;
  margin-top: 20px;
}

.section-note.center { text-align: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

/* .btn's display:inline-flex has the same specificity as the browser's
   built-in [hidden]{display:none} rule, so it silently wins and any
   .btn given the `hidden` attribute (e.g. Continue/Submit/Back on the
   Discovery form) stayed visible and clickable. Force it back off. */
.btn[hidden] {
  display: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-small { padding: 10px 18px; font-size: 14px; }
.btn-large { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; padding: 14px 20px; font-size: 15px; }

.price-chip {
  background: rgba(255, 255, 255, 0.22);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
}

.price-chip-large { font-size: 14px; padding: 3px 11px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
}

.logo-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-heading);
}

.logo-text strong { font-weight: 700; color: var(--color-primary); }

.main-nav {
  display: none;
  gap: 32px;
}

.main-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-body);
  transition: color 0.15s ease;
}

.main-nav a:hover { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-cta { display: none; }

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-items: center;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-heading);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: max-height 0.3s ease;
}

.mobile-menu.is-open { max-height: 360px; }

.mobile-menu a {
  display: block;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu .btn { margin: 16px 24px; width: calc(100% - 48px); }

@media (min-width: 900px) {
  .main-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .hamburger { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 40px 0 48px;
  background:
    radial-gradient(circle at 85% 8%, rgba(245, 158, 11, 0.10), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(37, 99, 235, 0.10), transparent 45%),
    var(--color-bg);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 700;
  margin-bottom: 10px;
}

/* --- Rotating headline (pain-point slider) ---
   Transition timing intentionally 600ms (spec range 500-700ms): a calm
   fade + slight upward rise, no bounce, no dramatic movement. --- */
.hero-headline-rotator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-headline-rotator.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

.rotator-headline {
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.25;
  min-height: 2.5em;
  margin-bottom: 10px;
  transition: font-size 0.3s ease;
}

/* Per-slide font tiers: longer/two-line hooks shrink instead of growing
   the box (keeps .hero-hook height perfectly frozen across all 6 slides). */
.rotator-headline.tier-lg { font-size: clamp(38px, 6.2vw, 64px); }
.rotator-headline.tier-md { font-size: clamp(34px, 5.4vw, 54px); }
.rotator-headline.tier-sm { font-size: clamp(30px, 4.6vw, 44px); }

.rotator-sub {
  min-height: 2.6em;
}

/* --- Headline highlight system (rotating hero slides) ---
   Color-only emphasis: no glow, gradient, outline or text-shadow.
   Font-weight matches the surrounding headline (already 700) so the
   only visual change is hue — keeps it premium, not shouty. --- */
.rotator-headline .hl-warm {
  color: #F97316;
  font-weight: 700;
}

.rotator-headline .hl-cool {
  color: #60A5FA;
  font-weight: 700;
}

/* Optional light variant, reserved for any future dark-background theme.
   Not used by the current 6 themes (all light tints). */
.rotator-headline .hl-light {
  color: #F8FAFC;
  font-weight: 700;
}

/* Subtitle emphasis: bold + high-contrast color on a single phrase only,
   rest of the subtitle stays at its normal weight/color. */
.rotator-sub .sub-emphasis {
  font-weight: 700;
  color: var(--color-primary-dark);
}

@media (max-width: 768px) {
  .rotator-headline .hl-warm,
  .rotator-headline .hl-cool,
  .rotator-headline .hl-light {
    /* keep highlighted phrases inline so manual <br> breaks in the
       slide data remain the only line-break points on mobile */
    display: inline;
  }

  .rotator-sub .sub-emphasis {
    font-weight: 700;
  }
}

/* --- Soft background hook behind the rotating headline ---
   Fixed height/width/padding/radius across every slide — only the
   background tint + accent color change, so nothing ever shifts the
   page as slides rotate. --- */
.hero-hook {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 232px;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 22px;
  transition: background 0.5s ease, border-color 0.5s ease;
}

/* Subtle rotating background tint + accent border — each ≤5-7% tint,
   never bright, always premium and calm. */
.hero-hook.theme-blue {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(37, 99, 235, 0.02));
  border-color: rgba(37, 99, 235, 0.16);
  border-left-color: #2563EB;
}
.hero-hook.theme-purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(139, 92, 246, 0.02));
  border-color: rgba(139, 92, 246, 0.16);
  border-left-color: #8B5CF6;
}
.hero-hook.theme-teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(20, 184, 166, 0.02));
  border-color: rgba(20, 184, 166, 0.16);
  border-left-color: #14B8A6;
}
.hero-hook.theme-amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.07), rgba(245, 158, 11, 0.02));
  border-color: rgba(245, 158, 11, 0.18);
  border-left-color: #F59E0B;
}
.hero-hook.theme-coral {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.06), rgba(251, 146, 60, 0.02));
  border-color: rgba(251, 146, 60, 0.16);
  border-left-color: #FB923C;
}
.hero-hook.theme-cyan {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(6, 182, 212, 0.02));
  border-color: rgba(6, 182, 212, 0.16);
  border-left-color: #06B6D4;
}

@media (max-width: 640px) {
  .hero-hook { min-height: 196px; }
}

.rotator-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

/* --- Modern pill indicators: replaces the old plain dots.
   All pills share height; the active one simply widens + fills with
   color. No bounce, transform/opacity + width only. --- */
.rotator-dot {
  width: 20px;
  height: 6px;
  border-radius: 999px;
  border: none;
  background: var(--color-border);
  opacity: 0.7;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.3s ease, opacity 0.25s ease;
}

.rotator-dot.is-active {
  background: var(--color-primary);
  width: 34px;
  opacity: 1;
}

.rotator-dot:hover { background: #94A3B8; opacity: 1; }
.rotator-dot.is-active:hover { background: var(--color-primary-dark); }

.hero-sub {
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--color-heading);
  font-weight: 500;
  margin-bottom: 10px;
}

.hero-body {
  font-size: 16px;
  margin-bottom: 10px;
  max-width: 52ch;
}

.hero-body strong { color: var(--color-heading); }

.hero-value {
  font-size: 16px;
  margin-bottom: 20px;
  max-width: 54ch;
}

.hero-value strong { color: var(--color-primary-dark); }

.hero-cta-row { margin-bottom: 20px; }

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.trust-badges li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-body);
}

.trust-badges li i { width: 16px; height: 16px; color: var(--color-primary); }

/* --- Hero signature visual: "Inside Banking & FinTech" showcase card ---
   Premium, contained, glass-soft card. Floating chips live inside the
   .industry-stage only — never behind the headline/CTA — so the motion
   reads as an intentional product detail, not decoration. --- */
.hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  /* Right panel stays pinned to the right edge of the hero row and never
     stretches to fill leftover space — it is a supporting element only. */
  justify-content: flex-end;
  width: 100%;
}

.industry-card {
  width: 100%;
  max-width: 380px;
  max-height: 330px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(37, 99, 235, 0.05), rgba(245, 158, 11, 0.03)),
    var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.industry-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.industry-eyebrow i { width: 16px; height: 16px; flex-shrink: 0; }

.industry-heading {
  font-size: 17px;
  margin-bottom: 4px;
}

.industry-sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-body);
  margin-bottom: 14px;
}

/* Bounded "stage" where pills quietly appear/fade — fixed height, overflow
   hidden, so the effect is always contained and never affects surrounding
   layout. Sized to hold only the active subset (6-8 pills desktop) inside
   a 2-column safe-zone grid, keeping the whole .industry-card under its
   400px cap. Mobile shrinks this further — see the max-width:700px block. */
.industry-stage {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.035), rgba(255, 255, 255, 0));
  margin-bottom: 14px;
}

/* Premium text-only pills — no logos, no brand icons, no product marks.
   Each pill is just a keyword plus a small color dot for visual rhythm.
   Positioning (top/left) and the accent color are assigned by JS; the
   pill itself only ever fades — it never slides, floats, or bounces. */
.industry-chip {
  position: absolute;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44%;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-heading);
  text-align: center;
  opacity: 0;
  will-change: opacity;
  animation-name: industryChipFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.industry-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-color, var(--color-primary));
}

/* Dedicated label element (rather than a raw text node) is required so
   the text actually wraps: a bare text node inside a flex container
   becomes an anonymous flex item with min-width:auto, which forces it to
   its max-content width and overflows/clips instead of wrapping — this
   was the cause of pills clipping ("FASTa…") and overlapping earlier. */
.industry-chip-label {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Appear → Stay → Fade → Disappear → (JS repositions during the hidden
   gap) → Appear again. Opacity only — no transform, so nothing ever
   drifts, slides, or floats across the stage. Calm and enterprise-grade. */
@keyframes industryChipFade {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .industry-chip {
    animation: none;
    opacity: 1;
  }
}

.industry-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-body);
  opacity: 0.85;
  border-top: 1px dashed var(--color-border);
  padding-top: 10px;
  width: 100%;
  justify-content: center;
  transition: gap 0.15s ease, opacity 0.15s ease;
}

.industry-link i { width: 13px; height: 13px; }

.industry-link:hover { gap: 8px; opacity: 1; }

@media (min-width: 960px) {
  /* 75% / 25% desktop hero ratio (3fr:1fr). The left column still clearly
     dominates — 3× the width — while the right column now has enough
     breathing room (~270-290px on a 1160px container) for multi-word
     keyword pills to sit on one line, or wrap to two, without clipping
     or colliding with their neighbors. */
  .hero-inner { grid-template-columns: 3fr 1fr; gap: 36px; align-items: flex-start; }
  .industry-card { max-width: 100%; padding: 22px 24px 18px; }
}

/* Compact mobile preview: smaller card, shorter stage, smaller pills.
   Keeps the whole panel (including the CTA) inside a 240px cap so it
   never turns into a long vertical section or forces extra scrolling. */
@media (max-width: 700px) {
  .industry-card {
    max-height: 192px;
    padding: 16px 14px 12px;
  }
  .industry-heading { font-size: 14px; margin-bottom: 3px; }
  .industry-sub { font-size: 11px; margin-bottom: 8px; }
  .industry-stage { height: 96px; margin-bottom: 8px; }
  .industry-chip {
    width: 46%;
    padding: 5px 9px;
    font-size: 10.5px;
  }
  .industry-link { padding-top: 8px; font-size: 11px; }
}

/* ==========================================================================
   About OpsWallah (condensed, expandable)
   ========================================================================== */
.about { background: var(--color-white); }

.about-container { max-width: 760px; margin: 0 auto; }

/* Short credibility strip — condensed founder trust signal shown
   earlier in the page flow, ahead of the Program/FAQ/CTA sequence.
   Full About story still lives in the .about section at the bottom. */
.credibility-strip { background: var(--color-white); }
.credibility-strip .container { max-width: 760px; margin: 0 auto; }
.credibility-strip .about-identity { margin-bottom: 10px; }
.credibility-strip .about-intro-text { max-width: 620px; margin-left: auto; margin-right: auto; }
.credibility-strip .section-note { margin-top: 4px; }
.credibility-strip .section-note a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.credibility-strip .section-note a:hover { text-decoration: underline; }

.about-identity {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--color-heading);
  margin-bottom: 18px;
}

.about-intro-text { text-align: center; font-size: 15px; margin-bottom: 12px; }
.about-intro-text:last-of-type { margin-bottom: 24px; }
.about-origin-line { max-width: 62ch; margin-left: auto; margin-right: auto; line-height: 1.7; }

.about-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 28px;
  padding: 22px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.about-stat { text-align: center; }
.about-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--color-primary-dark);
  line-height: 1.2;
}
.about-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-body);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .about-stat-row { grid-template-columns: repeat(2, 1fr); }
}

.about-skill-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.about-skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-heading);
}

.about-skill-pill i { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; }

.about-mini-heading {
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 600;
  margin-bottom: 12px;
}

.about-gap { text-align: center; margin-bottom: 26px; }
.about-gap p { font-size: 14.5px; }

/* ---- Expand / collapse toggle ---- */
.about-toggle-wrap { display: flex; justify-content: center; }

.about-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.about-toggle:hover { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.3); }

.about-toggle-icon { width: 18px; height: 18px; transition: transform 0.25s ease; }

.about-toggle[aria-expanded="true"] .about-toggle-icon { transform: rotate(180deg); }

/* ---- Expandable region ----
   Height is set inline via JS (scrollHeight) so the open/close transition is
   accurate regardless of content length; opacity transition is layered on
   top for a soft reveal. Global prefers-reduced-motion rule (top of file)
   already zeroes transition-duration site-wide, so no extra override needed. */
.about-expand {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.about-expand.is-open { opacity: 1; }

.about-expand-inner { padding-top: 36px; display: flex; flex-direction: column; gap: 36px; }

/* ---- Created by Vimal Singh (text-led, no photo) ---- */
.about-block p { font-size: 14.5px; margin-bottom: 12px; }
.about-block p:last-of-type { margin-bottom: 16px; }

.about-expertise-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.about-expertise-tag {
  padding: 8px 13px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

/* ---- Learning philosophy flow ---- */
.about-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 4px;
  margin: 18px 0 24px;
}

.about-flow-node {
  padding: 9px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-heading);
}

.about-flow-node-final { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

.about-flow-arrow { width: 14px; height: 14px; color: #CBD5E1; flex-shrink: 0; }

.about-approach-list { display: grid; grid-template-columns: 1fr; gap: 10px; }

.about-approach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-heading);
}

.about-approach-item i { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }

@media (min-width: 640px) {
  .about-approach-list { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Transparency and expectations ---- */
.about-transparency {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: #F1F5F9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.about-transparency-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-transparency-icon i { width: 22px; height: 22px; color: var(--color-primary); }

.about-transparency-body p { font-size: 13.5px; margin-bottom: 10px; }
.about-transparency-body p:last-child { margin-bottom: 0; }

.about-transparency-lead { font-size: 14.5px; font-weight: 600; color: var(--color-heading); }

.about-transparency-commitment { font-weight: 600; color: var(--color-heading); }

@media (min-width: 640px) {
  .about-transparency { flex-direction: row; }
}

/* ---- Contact CTA card ---- */
.about-contact-card {
  margin-top: 36px;
  padding: 28px;
  text-align: center;
  background: linear-gradient(160deg, #0F172A 0%, #1D4ED8 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.about-contact-card .about-mini-heading { color: var(--color-white); }
.about-contact-card p { font-size: 14.5px; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; }

.about-contact-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.about-contact-actions .btn { width: 100%; padding: 13px 22px; font-size: 14.5px; }
.about-contact-actions .btn i { width: 18px; height: 18px; }

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-outline:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

@media (min-width: 480px) {
  .about-contact-actions { flex-direction: row; justify-content: center; }
  .about-contact-actions .btn { width: auto; }
}

/* ==========================================================================
   Career Journey
   ========================================================================== */
.journey-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  max-width: 200px;
}

.journey-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.journey-icon i { width: 26px; height: 26px; color: var(--color-primary); }

.journey-icon-muted { border-color: var(--color-border); }
.journey-icon-muted i { color: #94A3B8; }

.journey-icon-success { border-color: var(--color-success); }
.journey-icon-success i { color: var(--color-success); }

.journey-step p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--color-heading);
}

.journey-arrow {
  color: #CBD5E1;
  transform: rotate(90deg);
}

.journey-arrow i { width: 20px; height: 20px; }

@media (min-width: 800px) {
  .journey-flow { flex-direction: row; justify-content: center; gap: 8px; }
  .journey-arrow { transform: none; margin-top: 22px; }
}

/* ==========================================================================
   Curriculum — What You'll Actually Learn
   ========================================================================== */
.curriculum { background: var(--color-white); }

.curriculum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 30px;
}

.curriculum-card {
  position: relative;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.curriculum-card-3 { border-top-color: var(--color-success); }

.curriculum-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.curriculum-icon i { width: 24px; height: 24px; color: var(--color-primary); }

.curriculum-card h3 { font-size: 17px; margin-bottom: 12px; }

.curriculum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.curriculum-list li {
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
  padding-left: 20px;
  color: var(--color-body);
}

.curriculum-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-primary);
}

.curriculum-card-3 .curriculum-list li::before { background: var(--color-success); }

.curriculum-card-highlight {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: none;
  box-shadow: var(--shadow-lg);
}

.curriculum-card-highlight h3 { color: var(--color-white); }
.curriculum-card-highlight .curriculum-list li { color: rgba(255, 255, 255, 0.92); }
.curriculum-card-highlight .curriculum-list li::before { background: var(--color-accent); }
.curriculum-card-highlight .curriculum-list li strong { color: var(--color-accent); font-weight: 700; }
.curriculum-card-highlight .curriculum-icon { background: rgba(255, 255, 255, 0.16); }
.curriculum-card-highlight .curriculum-icon i { color: var(--color-white); }

.curriculum-badge {
  position: absolute;
  top: -12px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-accent);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  animation: badge-pulse 2.2s ease-in-out infinite;
}

.curriculum-badge i { width: 12px; height: 12px; }

@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); transform: scale(1); }
  50%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); transform: scale(1.045); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .curriculum-badge { animation: none; }
}

@media (min-width: 800px) {
  .curriculum-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .curriculum-card-highlight { transform: scale(1.03); }
}

/* ==========================================================================
   Audience
   ========================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 30px;
}

.audience-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.audience-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.audience-icon i { width: 26px; height: 26px; color: var(--color-primary); }

.audience-card h3 { font-size: 17px; margin-bottom: 8px; }
.audience-card p { font-size: 14.5px; }

.audience-highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin: 26px auto 0;
  padding: 20px 24px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
}

.audience-highlight i { width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; }

.audience-highlight p { font-size: 15px; color: var(--color-heading); font-weight: 500; }

@media (min-width: 800px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Program
   ========================================================================== */
.program { background: var(--color-white); }

.program-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.program-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 16px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.program-card i { width: 24px; height: 24px; color: var(--color-primary); }

.program-card span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-heading);
}

@media (min-width: 700px) {
  .program-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .program-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ==========================================================================
   Assessment
   ========================================================================== */
.assessment {
  background: linear-gradient(160deg, #0F172A 0%, #1D4ED8 100%);
  color: rgba(255,255,255,0.85);
}

.assessment .eyebrow { color: var(--color-accent); }
.assessment .section-title { color: var(--color-white); }

.assessment-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.assessment-desc { font-size: 15.5px; margin-bottom: 28px; max-width: 50ch; }

.assessment-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-white);
}

.mini-card i { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

.assessment-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
}

.assessment-note i { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }

.assessment-price-box {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.price-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-body);
  margin-bottom: 8px;
}

.price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.price-sub { font-size: 13.5px; color: var(--color-body); margin-bottom: 24px; }

@media (min-width: 900px) {
  .assessment-inner { grid-template-columns: 1.2fr 0.8fr; gap: 56px; }
}

/* ==========================================================================
   FAQs
   ========================================================================== */
.faqs { background: var(--color-white); }

.accordion { max-width: 760px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 12px; }

.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-heading);
}

.accordion-trigger i {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.accordion-item.is-open .accordion-trigger i { transform: rotate(180deg); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-panel p {
  padding: 0 18px 16px;
  font-size: 14.5px;
  color: var(--color-body);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #0F172A;
  color: rgba(255,255,255,0.65);
  padding-top: 40px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .logo-text { color: var(--color-white); }
.footer-brand .logo-text strong { color: var(--color-accent); }

.footer-tagline { margin-top: 10px; font-size: 14px; }

.footer-links h4, .footer-contact h4 {
  color: var(--color-white);
  font-size: 14px;
  margin-bottom: 14px;
}

.footer-links a, .footer-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.65);
}

.footer-links a:hover, .footer-contact a:hover { color: var(--color-white); }

.footer-contact i { width: 16px; height: 16px; }

.footer-social { display: flex; gap: 12px; margin-top: 8px; }

.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}

.footer-social i { width: 16px; height: 16px; }

.footer-bottom {
  padding: 20px 24px;
  text-align: center;
  font-size: 13px;
}

/* Subtle legal-style disclaimer — muted, small, easy to skip, never
   competes visually with the copyright line above it. */
.footer-disclaimer {
  max-width: 640px;
  margin: 0 auto 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
}

@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ==========================================================================
   Career Readiness Journey (Excel + Banking & FinTech + Corporate Skills)
   ========================================================================== */
.readiness-journey {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--color-border);
}

.rj-intro {
  text-align: center;
  max-width: 480px;
  margin: 0 auto 28px;
}

.rj-title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 6px;
}

.rj-subtitle {
  font-size: 14px;
  color: var(--color-body);
}

.rj-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rj-node {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}

.curriculum.in-view .rj-node { opacity: 1; transform: translateY(0); }
.curriculum.in-view .rj-node.rj-d1 { transition-delay: 0.05s; }
.curriculum.in-view .rj-node.rj-d2 { transition-delay: 0.15s; }
.curriculum.in-view .rj-node.rj-d3 { transition-delay: 0.25s; }
.curriculum.in-view .rj-node.rj-d4 { transition-delay: 0.35s; }

.rj-node:hover { box-shadow: var(--shadow-sm); }

.rj-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.rj-node-icon i { width: 20px; height: 20px; color: var(--color-primary); }

.rj-node-tag {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.rj-node-title { font-size: 16px; font-weight: 600; color: var(--color-heading); margin-bottom: 6px; }
.rj-node-copy { font-size: 13.5px; color: var(--color-body); }

.rj-node-final {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: none;
  box-shadow: var(--shadow-lg);
}

.rj-node-final .rj-node-icon { background: rgba(255, 255, 255, 0.16); }
.rj-node-final .rj-node-icon i { color: var(--color-white); }
.rj-node-final .rj-node-tag { color: rgba(255, 255, 255, 0.85); }
.rj-node-final .rj-node-title { color: var(--color-white); }
.rj-node-final .rj-node-copy { color: rgba(255, 255, 255, 0.92); }

.rj-connector {
  display: flex;
  justify-content: center;
  color: #CBD5E1;
  transform: rotate(90deg);
}

.rj-connector i { width: 18px; height: 18px; }

@media (min-width: 800px) {
  .rj-track { flex-direction: row; align-items: stretch; gap: 8px; }
  .rj-node { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
  .rj-connector { transform: none; align-items: center; margin-top: 58px; flex-shrink: 0; }
}

/* ==========================================================================
   Scroll Reveal (subtle fade-in)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   WhatsApp Quick Connect (floating button + QR popup)
   ========================================================================== */

/* Locks background scroll while the popup is open */
html.wa-no-scroll,
body.wa-no-scroll {
  overflow: hidden;
}

/* ---- Floating button ---- */
.wa-float-btn {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  width: 60px;
  padding: 0;
  border: none;
  border-radius: 999px;
  overflow: hidden;

  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: var(--color-white);
  cursor: pointer;

  box-shadow:
    0 10px 26px rgba(18, 140, 126, 0.32),
    0 3px 10px rgba(15, 23, 42, 0.12);

  transition: width 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.25s ease,
              transform 0.25s ease;
}

.wa-float-btn:hover,
.wa-float-btn:focus-visible {
  width: 188px;
  padding-right: 20px;
  box-shadow:
    0 14px 32px rgba(18, 140, 126, 0.4),
    0 6px 16px rgba(15, 23, 42, 0.14);
  transform: translateY(calc(-50% - 2px));
}

.wa-float-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.wa-float-btn:active {
  transform: translateY(-50%) scale(0.97);
}

.wa-float-icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-float-icon svg {
  width: 28px;
  height: 28px;
}

.wa-float-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wa-float-btn:hover .wa-float-text,
.wa-float-btn:focus-visible .wa-float-text {
  opacity: 1;
  transition: opacity 0.2s ease 0.12s;
}

/* Gentle breathing glow so the button reads as alive without being noisy */
@media (prefers-reduced-motion: no-preference) {
  .wa-float-btn {
    animation: wa-pulse 3.2s ease-in-out infinite;
  }
  .wa-float-btn:hover,
  .wa-float-btn:focus-visible {
    animation: none;
  }
}

@keyframes wa-pulse {
  0%, 100% {
    box-shadow:
      0 10px 26px rgba(18, 140, 126, 0.32),
      0 3px 10px rgba(15, 23, 42, 0.12);
  }
  50% {
    box-shadow:
      0 10px 30px rgba(18, 140, 126, 0.5),
      0 3px 10px rgba(15, 23, 42, 0.12);
  }
}

/* Mobile: bottom-right corner, icon only, no hover-expand */
@media (max-width: 768px) {
  .wa-float-btn {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: none;
    width: 56px;
    height: 56px;
  }

  .wa-float-btn:hover,
  .wa-float-btn:focus-visible {
    width: 56px;
    padding-right: 0;
    transform: translateY(-2px);
  }

  .wa-float-icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .wa-float-text {
    display: none;
  }
}

/* ==========================================================================
   Quick Book Floating Button (frosted-glass, mirrors .wa-float-btn on the
   opposite edge so the two floating buttons never collide)
   ========================================================================== */
.qb-float-btn {
  position: fixed;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  width: 60px;
  padding: 0;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;

  background: rgba(255, 247, 224, 0.95);
  backdrop-filter: blur(10px);
  color: var(--color-primary-dark);
  cursor: pointer;

  box-shadow:
    0 10px 26px rgba(245, 158, 11, 0.22),
    0 3px 10px rgba(15, 23, 42, 0.12);

  transition: width 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.25s ease,
              transform 0.25s ease,
              background 0.25s ease;
}

.qb-float-btn:hover,
.qb-float-btn:focus-visible {
  width: 224px;
  padding-right: 20px;
  background: rgba(255, 247, 224, 1);
  box-shadow:
    0 16px 40px rgba(245, 158, 11, 0.32),
    0 6px 16px rgba(15, 23, 42, 0.14);
  transform: translateY(calc(-50% - 2px));
}

.qb-float-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.qb-float-btn:active {
  transform: translateY(-50%) scale(0.97);
}

.qb-float-icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
}

.qb-float-icon svg {
  width: 26px;
  height: 26px;
}

.qb-float-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.qb-float-btn:hover .qb-float-text,
.qb-float-btn:focus-visible .qb-float-text {
  opacity: 1;
  transition: opacity 0.2s ease 0.12s;
}

/* Mobile: bottom-left corner (WhatsApp owns bottom-right), icon only, no hover-expand */
@media (max-width: 768px) {
  .qb-float-btn {
    top: auto;
    bottom: 20px;
    left: 16px;
    transform: none;
    width: 56px;
    height: 56px;
  }

  .qb-float-btn:hover,
  .qb-float-btn:focus-visible {
    width: 56px;
    padding-right: 0;
    transform: translateY(-2px);
  }

  .qb-float-icon {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .qb-float-text {
    display: none;
  }
}

/* ---- Popup / modal ---- */
.wa-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

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

.wa-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.wa-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  box-shadow: var(--shadow-lg), 0 30px 70px rgba(15, 23, 42, 0.28);

  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.wa-modal-overlay.is-open .wa-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wa-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-body);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.wa-modal-close:hover {
  background: var(--color-border);
  color: var(--color-heading);
}

.wa-modal-close:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.wa-modal-close i {
  width: 18px;
  height: 18px;
}

.wa-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(18, 140, 126, 0.3);
}

.wa-modal-badge svg {
  width: 26px;
  height: 26px;
}

.wa-modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.wa-modal-subtitle {
  font-size: 0.95rem;
  color: var(--color-body);
  margin: 0 0 22px;
}

.wa-modal-qr-wrap {
  display: inline-flex;
  margin: 0 auto 16px;
  padding: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wa-modal-qr {
  display: block;
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 8px;
}

.wa-modal-hint {
  font-size: 0.85rem;
  color: var(--color-body);
  margin: 0 0 18px;
}

.wa-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wa-modal-cta i {
  width: 18px;
  height: 18px;
}

@media (max-width: 480px) {
  .wa-modal {
    padding: 32px 20px 22px;
  }
  .wa-modal-qr {
    width: 190px;
    height: 190px;
  }
}
/* ===== Mobile Hero Fix ===== */

@media (max-width: 700px) {

  .hero {
    overflow: visible;
    padding: 42px 0 56px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
  }

  .hero-copy h1 {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero-sub,
  .hero-body,
  .hero-value {
    max-width: 100%;
  }

  .hero-cta-row .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .hero-visual {
    width: 100%;
    height: auto;
    overflow: visible;
    margin-top: 8px;
  }

  .float-card {
    padding: 9px 12px;
    font-size: 12px;
  }

  .card-excel {
    top: 8%;
    left: 3%;
  }

  .card-fintech {
    top: 8%;
    right: 3%;
  }

  .card-ops {
    bottom: 10%;
    left: 3%;
  }

  .card-interview {
    bottom: 8%;
    right: 3%;
  }
}
/* =====================================================
   FINAL INDUSTRY PANEL SIZE FIX
===================================================== */

@media (max-width: 700px) {

  .hero-visual {
    width: 100% !important;
    height: 192px !important;
    max-height: 192px !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  #industryCard {
    width: 100% !important;
    height: 192px !important;
    max-height: 192px !important;
    min-height: 0 !important;
    padding: 12px 12px 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #industryCard .industry-eyebrow {
    margin-bottom: 3px !important;
    font-size: 9.5px !important;
  }

  #industryCard .industry-heading {
    margin-bottom: 3px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #industryCard .industry-sub {
    margin-bottom: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  #industryStage {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    margin-bottom: 6px !important;
    overflow: hidden !important;
  }

  #industryCard .industry-link {
    height: 26px !important;
    padding-top: 6px !important;
    font-size: 11px !important;
    opacity: 0.85 !important;
  }

  #industryCard .industry-chip {
    padding: 4px 7px !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }
}
/* ==========================================================================
   Discovery Form (embedded booking / enquiry form)
   ========================================================================== */
.discovery { background: var(--color-white); }

.discovery-card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 24px;
  transition: box-shadow 0.6s ease;
}

/* Temporary subtle highlight applied when a booking CTA scrolls here */
.discovery-card.is-highlighted {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), var(--shadow-lg);
}

.discovery-card-head { margin-bottom: 28px; }

.discovery-subtitle {
  max-width: 60ch;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 15.5px;
  color: var(--color-body);
}

.discovery-info-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  max-width: 720px;
}

.discovery-info-strip li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-heading);
}

.discovery-info-strip i { width: 15px; height: 15px; color: var(--color-success); flex-shrink: 0; }

/* ---- Form layout ---- */
.discovery-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.form-field-full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-heading);
}

.required-mark { color: var(--color-primary); }
.optional-mark { font-weight: 400; color: var(--color-body); font-size: 12.5px; }

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-heading);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23475569' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-field textarea { resize: vertical; min-height: 90px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #DC2626;
}

.field-error {
  font-size: 12.5px;
  color: #DC2626;
  min-height: 1px;
  display: none;
}

.form-field.has-error .field-error { display: block; }

.form-field-consent { flex-direction: row; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-body);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.discovery-form-status {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-body);
  text-align: center;
  margin-bottom: 14px;
  min-height: 1px;
}

.discovery-form-status.is-error { color: #DC2626; }
.discovery-form-status.is-info { color: var(--color-primary); }

.discovery-submit-btn { gap: 8px; }
.discovery-submit-btn i { width: 18px; height: 18px; }

.discovery-form-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: #16A34A;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 14px;
}
.discovery-form-reassurance i { width: 14px; height: 14px; flex: none; }

.discovery-form-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-body);
  margin-top: 12px;
}

@media (min-width: 700px) {
  .discovery-card { padding: 48px 40px; }

  .discovery-form-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
}

@media (min-width: 800px) {
  .discovery-card { padding: 56px 64px; }
}

/* ==========================================================================
   Official Domain Verification Popup
   (mirrors the WhatsApp modal pattern: fixed overlay, scroll-locked,
   focus-trapped, ESC / close-icon / button dismissible)
   ========================================================================== */
html.domain-no-scroll,
body.domain-no-scroll {
  overflow: hidden;
}

.domain-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

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

.domain-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.domain-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  box-shadow: var(--shadow-lg), 0 30px 70px rgba(15, 23, 42, 0.28);

  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.domain-modal-overlay.is-open .domain-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.domain-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-body);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.domain-modal-close:hover { background: var(--color-border); color: var(--color-heading); }

.domain-modal-close:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.domain-modal-close i { width: 18px; height: 18px; }

.domain-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.domain-modal-logo { width: 40px; height: 40px; object-fit: contain; }

.domain-modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--color-heading);
  margin: 0 0 14px;
}

.domain-modal-body p {
  font-size: 0.95rem;
  color: var(--color-body);
  margin: 0 0 10px;
}

.domain-modal-url {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.08);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin: 0 0 14px !important;
}

.domain-modal-cta {
  margin-top: 18px;
  gap: 8px;
}

.domain-modal-cta i { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .domain-modal { padding: 32px 20px 22px; }
}

/* ==========================================================================
   Footer — official domain note
   ========================================================================== */
.footer-official-domain {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.footer-official-domain a {
  color: var(--color-accent);
  font-weight: 600;
}

.footer-official-domain a:hover { text-decoration: underline; }


/* ==========================================================================\n   V1 Discovery Wizard + Payment Result Pages\n   ========================================================================== */
#discovery-form{scroll-margin-top:86px;background:radial-gradient(circle at 10% 15%,rgba(249,115,22,.15),transparent 32%),radial-gradient(circle at 90% 80%,rgba(29,78,216,.18),transparent 35%),linear-gradient(135deg,#eff6ff 0%,#f8fafc 50%,#fff7ed 100%);position:relative;overflow:hidden}
.discovery-shell{display:grid;gap:24px;align-items:start}.discovery-aside{padding:28px;border-radius:var(--radius-lg);background:linear-gradient(150deg,#0f172a,#1d4ed8);color:#fff;box-shadow:var(--shadow-lg)}.discovery-aside h2{color:#fff;font-size:clamp(25px,3vw,34px);margin-bottom:22px}.discovery-aside .eyebrow{color:#fbbf24}.discovery-benefits{display:grid;gap:13px}.discovery-benefits li{display:flex;gap:10px;align-items:center;font-weight:600}.discovery-benefits i{width:19px;flex:none;color:#fbbf24}.discovery-aside-note{display:flex;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:#dbeafe}.discovery-aside-note i{width:18px;flex:none}.discovery-card{background:#fff;border:1px solid rgba(37,99,235,.15);border-radius:28px;padding:24px;box-shadow:0 24px 60px rgba(15,23,42,.14);transition:box-shadow .25s ease,transform .25s ease}.discovery-card.is-highlighted{box-shadow:0 0 0 5px rgba(37,99,235,.14),0 28px 68px rgba(15,23,42,.18);transform:translateY(-2px)}.discovery-card-head{text-align:left;margin-bottom:18px}.discovery-card-head .section-title{font-size:clamp(25px,3vw,36px)}.discovery-subtitle{max-width:65ch}.form-progress{margin:22px 0}.form-progress-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}.form-progress-bar span{display:block;width:33.333%;height:100%;background:linear-gradient(90deg,var(--color-primary),#60a5fa);transition:width .25s ease}.form-progress p{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px}.form-progress p strong{color:var(--color-primary-dark)}.form-step h3{font-size:19px;margin-bottom:16px}.discovery-form-grid{display:grid;gap:16px}.form-field label,.choice-group legend{display:block;font-weight:600;color:var(--color-heading);font-size:14px;margin-bottom:7px}.form-field input,.form-field select,.form-field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:var(--color-heading);font:inherit;font-size:16px}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)}.field-error{min-height:18px;color:#b91c1c;font-size:12px;margin-top:4px}.has-error input,.has-error select,.has-error .choice-grid{border-color:#dc2626!important}.choice-group{border:0;margin-bottom:18px}.choice-grid{display:grid;gap:10px;border:1px solid transparent;border-radius:12px}.choice-grid label{display:flex;align-items:flex-start;gap:9px;padding:12px 13px;border:1px solid #dbe3ef;border-radius:12px;background:#f8fafc;cursor:pointer}.choice-grid input{margin-top:4px;accent-color:var(--color-primary)}.choice-grid label:has(input:checked){background:#eff6ff;border-color:#93c5fd}.consent-card{padding:15px;border:1px solid #dbe3ef;border-radius:14px;background:#f8fafc;margin-top:12px}.checkbox-label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--color-heading)}.checkbox-label input{margin-top:4px;accent-color:var(--color-primary);flex:none}.language-toggle{margin-top:8px;border:0;background:none;color:var(--color-primary);font-weight:600;padding:4px 0}.language-copy{font-size:12.5px;margin-top:8px;padding-top:8px;border-top:1px dashed #cbd5e1}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}.form-actions .btn{min-height:50px;padding:13px 22px}.btn-outline{background:#fff;color:var(--color-primary-dark);border:1px solid #93c5fd}.form-submit,.form-next{margin-left:auto}.discovery-form-status{min-height:24px;margin-top:12px;font-size:13px}.discovery-form-status.is-error{color:#b91c1c}.discovery-form-status.is-info{color:var(--color-primary-dark)}.discovery-form-note{text-align:center;font-size:12px;margin-top:10px}.form-success-state{text-align:center;padding:28px 6px}.form-success-state h3{font-size:26px;margin:14px 0}.form-success-state p{margin:8px auto;max-width:58ch}.form-success-state .btn{margin:20px auto 10px;max-width:420px}.form-success-state small{display:block}.status-icon{display:inline-flex;width:60px;height:60px;border-radius:50%;align-items:center;justify-content:center}.status-icon-success{background:#dcfce7;color:#047857}.status-icon i{width:30px;height:30px}.footer-domain-reopen{border:0;background:none;color:var(--color-primary);font:inherit;text-decoration:underline;cursor:pointer}
@media(min-width:900px){.discovery-shell{grid-template-columns:minmax(250px,35%) minmax(0,65%)}.discovery-aside{position:sticky;top:96px}.discovery-card{padding:34px 38px}.discovery-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-field-full,.choice-group,.consent-card{grid-column:1/-1}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){.discovery-aside{padding:22px}.discovery-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#discovery-form{padding:38px 0}.container.discovery-shell{padding:0 16px}.discovery-aside{padding:20px}.discovery-aside h2{font-size:24px}.discovery-benefits{grid-template-columns:1fr;gap:9px}.discovery-card{padding:19px;border-radius:20px}.form-progress p{font-size:12px}.form-actions{flex-wrap:wrap}.form-actions .btn{width:100%;margin:0}.choice-grid label{font-size:13px}.discovery-card-head .section-title{font-size:25px}}

/* ---- Linear Step 2: Education & Career Profile ---- */
.form-step-linear{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.field-note{font-size:12px;color:#64748b;margin:-2px 0 2px;line-height:1.4}
.form-field[hidden]{display:none}

/* Payment / error pages */
.result-page{min-height:100vh;background:radial-gradient(circle at 12% 10%,rgba(249,115,22,.12),transparent 30%),radial-gradient(circle at 88% 80%,rgba(37,99,235,.15),transparent 34%),#f8fafc;display:flex;flex-direction:column}.result-header{padding:18px 0;border-bottom:1px solid var(--color-border);background:rgba(255,255,255,.9)}.result-header img{width:min(260px,70vw)}.result-main{flex:1;display:grid;place-items:center;padding:42px 0}.result-card{width:min(760px,100%);background:#fff;border:1px solid var(--color-border);border-radius:28px;box-shadow:var(--shadow-lg);padding:clamp(22px,5vw,44px);text-align:center}.result-card h1{font-size:clamp(28px,5vw,42px);margin:14px 0 8px}.result-card .lead{font-size:17px;max-width:58ch;margin:0 auto 20px}.result-details{margin:24px 0;text-align:left;border:1px solid var(--color-border);border-radius:16px;overflow:hidden}.result-row{display:flex;justify-content:space-between;gap:18px;padding:12px 15px;border-bottom:1px solid var(--color-border)}.result-row:last-child{border-bottom:0}.result-row dt{font-weight:600;color:var(--color-body)}.result-row dd{font-weight:700;color:var(--color-heading);text-align:right;overflow-wrap:anywhere}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.result-confirmation-note{max-width:600px;margin:22px auto 0;text-align:center;font-size:16px;line-height:1.7;color:var(--color-body);font-weight:400}.result-confirmation-note strong{font-weight:600}.result-warning{background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:14px;margin:18px 0;color:#9a3412;text-align:left}.result-footer{text-align:center;padding:22px;font-size:13px}.status-icon-failed{background:#fee2e2;color:#b91c1c}.status-icon-neutral{background:#e0e7ff;color:#3730a3}@media(max-width:560px){.result-main{padding:24px 0}.result-card{border-radius:20px}.result-row{display:block}.result-row dd{text-align:left;margin-top:3px}.result-actions .btn{width:100%}}
@media print{body.result-page{background:#fff}.result-header,.result-actions,.result-footer,.result-warning{display:none!important}.result-main{padding:0}.result-card{box-shadow:none;border:0;width:100%;padding:20px}.result-details{break-inside:avoid}}

/* ==========================================================================
   Mobile overflow fix — long-label buttons (e.g. "Book OpsWallah Discovery
   Session ₹29", "Submit & Continue to Payment") were nowrap by default via
   the base .btn rule. On narrow screens that forced the button wider than
   the viewport, pushing the whole page out and clipping the right edge.
   Only .hero-cta-row .btn had a wrap override before; this extends the same
   fix to every button site-wide below 640px.
   ========================================================================== */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}