/* ═══════════════════════════════════════════════════════════
   CILT Central Asia — Premium Courses & Training Stylesheet
   Designed under Strict Brandbook Constraints (Arial, Left Aligned)
   Elegance through Spacing, Typographic Contrast, and Easing
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', Arial, sans-serif; /* 2026-09-18: sitewide premium upgrade, Arial fallback */
  font-size: 15px;
  line-height: 1.5;
  color: #505050; /* CILT Steel Grey */
  background: #ffffff;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── DESIGN TOKENS ── */
:root {
  --cilt-purple: #361163;
  --cilt-purple-dark: #1e0938;
  --cilt-purple-deep: #130526;
  
  --cilt-gold: #C0A582;
  --cilt-gold-hover: #A78E6C;
  --cilt-gold-light: rgba(192,165,130, 0.15);
  
  --cilt-yellow: #ffd204;
  --cilt-green: #b7d432;
  --cilt-blue: #00a8e5;
  --cilt-red: #b72049;
  --cilt-steel: #505050;
  --cilt-pale: #ebebeb;
  --header-h: 122px; /* Top bar 48px + Nav 74px */
  
  /* Easing curves (Premium Expo curves like Apple/Stripe) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.5s var(--ease-out-expo);
  
  /* Subtle luxurious flat shadows */
  --shadow-premium-sm: 0 4px 12px rgba(19, 5, 38, 0.03);
  --shadow-premium-md: 0 12px 36px rgba(19, 5, 38, 0.06);
  --shadow-premium-lg: 0 24px 60px rgba(19, 5, 38, 0.1);
  /* --shadow-gold-glow(-hover) removed 2026-09-18 — CLAUDE.md bans
     decorative glow sitewide; the 4 places that used it now use plain
     elevation shadows instead. */

  /* Border Radius (Upgraded to premium rounded corners per user request) */
  --border-radius-card: 12px; /* Rounded cards for premium appearance */
  --border-radius-btn: 6px;   /* Clean matching radius for buttons & inputs */
}

/* ── TYPOGRAPHY OPTIMIZATION ── */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, span, button, input, select, textarea {
  font-family: 'Inter', Arial, sans-serif !important; /* 2026-09-18: Inter sitewide, Arial fallback */
  text-align: left !important; /* Force LEFT alignment everywhere */
}

h1.hero-title {
  font-size: 42px; /* 2.625rem */
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: -0.03em; /* Tight tracking for premium Arial look */
}

h2.section-title {
  font-size: 34px; /* 2.125rem */
  font-weight: 700;
  line-height: 1.2;
  color: var(--cilt-purple);
  margin: 0 0 20px 0;
  letter-spacing: -0.025em; /* Tight tracking */
}

h3.card-title, h3.cta-form-title {
  font-size: 22px; /* 1.375rem */
  font-weight: 700;
  line-height: 1.25;
  color: var(--cilt-purple);
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
}

h4 {
  font-size: 18px; /* 1.125rem */
  font-weight: 700;
  line-height: 1.3;
  color: var(--cilt-purple);
  margin: 0 0 10px 0;
  letter-spacing: -0.015em;
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em; /* Loose tracking for tags */
  text-transform: uppercase;
  color: var(--cilt-gold);
  display: block;
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 18px; /* Body Large */
  font-weight: 400;
  line-height: 1.45;
  color: var(--cilt-steel);
  max-width: 850px;
  margin: 0 0 48px 0;
}

/* ── UTILITIES ── */
.container {
  /* !important is required here, not stylistic: edu/corporate/membership load
     cdn.tailwindcss.com, which scans the DOM at runtime for the literal class
     name "container" and injects its own max-width rule (up to 1536px on
     ≥1536px screens) AFTER this stylesheet — same specificity, later in the
     cascade, so it silently wins and widens every .container-classed section
     past 1280px on wide monitors. Only !important is immune to load order. */
  max-width: 1280px !important;
  margin: 0 auto;
  padding: 0 32px; /* Generous side padding */
}

.section-bg-light {
  background-color: #fafafa; /* Subtle light grey */
}

section {
  padding: 100px 0; /* Massive spacing */
  border-bottom: 1px solid var(--cilt-pale);
}

.hidden {
  display: none !important;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px; /* Smaller, cleaner text size */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--cilt-gold);
  color: #000000 !important; /* Dark text as in reference image */
  border-color: var(--cilt-gold);
  border-radius: 9999px !important; /* Pill shape */
  padding: 8px 8px 8px 28px !important; /* Adjusted for icon symmetry */
  font-size: 15px !important;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-transform: none !important; /* Keep casing clean and modern */
  font-weight: 700;
  box-shadow: var(--shadow-premium-sm);
}

.btn-primary::after {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #000000; /* Black circle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C0A582'%3E%3Cpath d='M13 6l6 6-6 6v-3.5H5v-5h8V6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

.btn-primary:hover {
  background-color: #A78E6C;
  border-color: #A78E6C;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(192, 165, 130, 0.25);
}

.btn-primary:hover::after {
  transform: translateX(3px); /* Interactive micro-animation */
}

.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  border-radius: 9999px !important; /* Consistent pill shape */
  padding: 10px 24px !important;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.btn-secondary:hover {
  background-color: #ffffff;
  color: var(--cilt-purple-deep) !important;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.15);
}

.btn-outline {
  background-color: transparent;
  color: var(--cilt-purple);
  border-color: var(--cilt-purple);
  border-radius: 9999px !important; /* Consistent pill shape */
  padding: 10px 24px !important;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.btn-outline:hover {
  background-color: var(--cilt-purple);
  color: #ffffff !important;
  border-color: var(--cilt-purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium-sm);
}

.btn-full-width {
  width: 100%;
  justify-content: center;
}

/* Hover effects for form elements */
input, select, textarea {
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

input:hover, select:hover, textarea:hover {
  border-color: rgba(54, 17, 99, 0.3);
}

/* ── HEADER TOP BAR ── */
#top-bar {
  background: var(--cilt-purple-dark);
  height: 48px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid rgba(192,165,130, 0.15); /* Elegant gold line divider */
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-selector {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px;
  letter-spacing: 0.05em;
  transition: var(--transition-normal);
}

.lang-btn.active, .lang-btn:hover {
  color: #ffffff;
}

.lang-sep {
  color: rgba(255, 255, 255, 0.15);
  font-size: 11px;
}

.topbar-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-normal);
}

.topbar-link:hover {
  color: #ffffff;
  text-decoration: none;
}

.topbar-join {
  background-color: var(--cilt-gold);
  color: var(--cilt-purple-deep) !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: var(--border-radius-btn);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-normal);
}

.topbar-join:hover {
  background-color: var(--cilt-gold-hover);
}

/* ── MAIN NAVIGATION ── */
#main-nav {
  background: #ffffff;
  height: 74px;
  position: fixed;
  top: 48px;
  left: 0;
  width: 100%;
  z-index: 999;
  border-bottom: 1px solid var(--cilt-pale);
  transition: box-shadow var(--transition-normal), background var(--transition-normal);
}

#main-nav.scrolled {
  box-shadow: 0 10px 30px rgba(19, 5, 38, 0.04);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo-desktop {
  height: 44px;
  width: auto;
  display: block;
  transition: var(--transition-normal);
}

.logo-desktop:hover {
  opacity: 0.9;
}

.logo-mobile {
  height: 40px;
  width: auto;
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  color: var(--cilt-steel);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0;
  transition: color var(--transition-normal);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--cilt-gold);
  transition: width 0.4s var(--ease-out-expo);
}

.nav-link:hover {
  color: var(--cilt-purple);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--cilt-purple);
}

.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--cilt-purple);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

#mobile-menu {
  position: absolute;
  top: 74px;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--cilt-pale);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  z-index: 998;
}

@media (min-width: 992px) {
  #mobile-menu {
    display: none !important;
  }
}

#mobile-menu.open {
  max-height: 400px; /* enough to show all links */
  box-shadow: 0 10px 30px rgba(19, 5, 38, 0.08);
}

.mobile-nav-link {
  display: block;
  padding: 16px 32px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cilt-purple-deep);
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  background-color: var(--cilt-gold);
  color: #fff;
}

/* ── HERO SECTION (premium dark grid) ── */
.edu-hero {
  /* Pin the canonical brand tokens for the hero regardless of what a later
     sitewide :root wins the cascade (css/shared.css defines --cilt-gold with
     a different hex and loads after this file on edu/corporate/membership/
     projects — a custom property declared directly on this element always
     wins for itself and everything that inherits from it, independent of
     specificity/load-order tricks elsewhere). */
  --cilt-gold: #C0A582;
  --cilt-purple-deep: #130526;
  background:
    radial-gradient(circle at 80% 20%, rgba(192,165,130, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, var(--cilt-purple-deep) 0%, var(--cilt-purple-dark) 50%, var(--cilt-purple) 100%);
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  border-bottom: 2px solid var(--cilt-gold); /* Golden bottom stroke */
}

/* Subtle tech grid background pattern */
.edu-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  pointer-events: none;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Single source of truth for hero geometry, used identically (verbatim, same
   numbers) on every photo-hero page — edu/corporate/membership/projects via
   this stylesheet, women-in-tlp/next-generation via a duplicated copy in their
   own inline <style> (they don't load this file). Deliberately NOT named
   "container": edu/corporate/membership load cdn.tailwindcss.com, which scans
   the DOM for that literal class name and injects its own runtime .container
   rule (width:100% + responsive max-width up to 1536px) — that rule has the
   same specificity as ours and is injected after every static <link>/<style>,
   so it silently wins the cascade and makes the hero wider than intended on
   wide screens. A class name Tailwind doesn't recognize is immune by design. */
.hero-frame {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-description {
  font-size: 18px;
  line-height: 1.6;
  color: #ebebeb;
  margin: 0 0 36px 0;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  justify-content: flex-end;
}

.hero-badge-card {
  /* Owner decision 2026-09-26: a slight see-through is intentional here — the
     photo should faintly read through the panel for a premium feel. This is
     NOT glassmorphism: no backdrop-filter/blur anywhere, just a translucent
     flat background over --cilt-purple-deep. Alpha picked (0.85) is high
     enough to stay readable over the lightest hero photo (corporate.html) —
     see CLAUDE_PROJECT_CONTEXT.md 2026-08-10 entry for why fully transparent
     failed before. Don't lower alpha without re-checking that page. */
  background: rgba(19, 5, 38, 0.85);
  border: 1px solid rgba(192,165,130, 0.22); /* Golden hairline — kept quiet so the divider below reads as the gold accent */
  padding: 44px;
  width: 100%;
  max-width: 380px;
  border-radius: var(--border-radius-card);
  box-shadow: 0 32px 64px -24px rgba(8, 2, 20, 0.6);
}

.badge-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  /* Deliberately NOT a top gold line (owner rejected that) — this divider
     under the logo/title header is the one visible gold line in the card. */
  border-bottom: 1px solid rgba(192, 165, 130, 0.55);
  padding-bottom: 24px;
}

.badge-logo {
  height: 38px;
  width: auto;
}

.badge-title {
  color: var(--cilt-gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* No forced text-transform: cpd.html uses a Russian sentence here
     ("Быстрая проверка"), not a brand stamp — CSS caps would read as
     shouting. English brand titles are authored in caps directly in HTML. */
}

.badge-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cilt-gold);
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.badge-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.badge-text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* ── SECTION 1: INTERACTIVE NAVIGATOR (FLOWCHART) ── */
.flowchart-card {
  background-color: #ffffff;
  border: 1px solid var(--cilt-pale);
  padding: 48px;
  margin-top: 24px;
  position: relative;
  box-shadow: var(--shadow-premium-md);
  border-radius: var(--border-radius-card);
}

/* Slider step layout, choice cards and tabs */
.choice-card {
  background-color: #ffffff;
  border: 1px solid var(--cilt-pale);
  border-radius: var(--border-radius-card);
  padding: 24px;
  cursor: pointer;
  transition: transform var(--transition-normal), border-color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.choice-card:hover {
  border-color: var(--cilt-gold);
  background-color: rgba(192,165,130, 0.04);
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium-sm);
}

/* Membership Grades Tab Control Active States */
.active-tab {
  color: var(--cilt-purple) !important;
  border-bottom-color: var(--cilt-gold) !important;
  background-color: rgba(54, 17, 99, 0.02);
}

.wizard-breadcrumbs button {
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}


/* Flowchart Result Panel */
.flowchart-result-wrapper {
  background-color: rgba(192,165,130, 0.03);
  border: 1px solid var(--cilt-gold);
  padding: 40px;
  margin-top: 32px;
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  animation: stepFadeIn 0.8s forwards var(--ease-out-expo);
  border-radius: var(--border-radius-card);
}

.flowchart-result-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--cilt-gold);
}

/* Non-binding note shown above the wizard result — reuses the .cpd-result-disclaimer
   pattern from cpd.html; sits on the dark #navigator-section/#checker-section background. */
.wizard-result-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(192, 165, 130, 0.22);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 24px;
}

.wizard-result-disclaimer i,
.wizard-result-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cilt-gold);
}

.result-header {
  margin-bottom: 20px;
}

.result-tag {
  background-color: var(--cilt-purple-deep);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  letter-spacing: 0.15em;
  display: inline-block;
  margin-bottom: 16px;
  border-radius: var(--border-radius-btn);
}

.result-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--cilt-purple);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.result-original-title {
  font-size: 14px;
  font-style: italic;
  color: var(--cilt-steel);
  display: block;
}

.result-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cilt-steel);
  margin: 0 0 32px 0;
  max-width: 800px;
}

.result-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════
   WIZARD SECTIONS — DARK PREMIUM THEME
   Applies to #navigator-section (edu) and #checker-section
   (membership, corporate)
══════════════════════════════════════════════════════ */
#navigator-section,
#checker-section {
  background: var(--cilt-purple-deep);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

/* Separator line at top */
#navigator-section::before,
#checker-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent                   0%,
    rgba(192,165,130, 0.22)    25%,
    rgba(192,165,130, 0.22)    75%,
    transparent                  100%
  );
}

/* Subtle gold radial glow */
#navigator-section::after,
#checker-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% -5%,
    rgba(192,165,130, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

#navigator-section .section-eyebrow,
#checker-section  .section-eyebrow  { color: var(--cilt-gold); }

#navigator-section .section-title,
#checker-section  .section-title    { color: #ffffff; }

#navigator-section .section-subtitle,
#checker-section  .section-subtitle { color: rgba(255, 255, 255, 0.54); }

/* ── Flowchart card ── */
#navigator-section .flowchart-card,
#checker-section  .flowchart-card {
  background:   rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(192,165,130, 0.25)  !important;
  box-shadow:
    0 2px 8px  rgba(0, 0, 0, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.25) !important;
  position: relative;
  z-index: 1;
}

/* Gold accent bar on card top */
#navigator-section .flowchart-card::before,
#checker-section  .flowchart-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(192,165,130, 0)    0%,
    rgba(192,165,130, 0.6) 20%,
    #C0A582                  50%,
    rgba(192,165,130, 0.6) 80%,
    rgba(192,165,130, 0)  100%
  );
  border-radius: 12px 12px 0 0;
}

/* ── Wizard header border ── */
#navigator-section .wizard-header,
#checker-section  .wizard-header {
  border-bottom-color: rgba(192,165,130, 0.18) !important;
}

/* Step counter & breadcrumbs text */
#navigator-section .wizard-header span,
#checker-section  .wizard-header span {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Breadcrumb pill buttons */
#navigator-section .wizard-breadcrumbs button,
#checker-section  .wizard-breadcrumbs button {
  background:   rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(192,165,130, 0.28)  !important;
  color:        rgba(255, 255, 255, 0.62) !important;
}

#navigator-section .wizard-breadcrumbs button:hover,
#checker-section  .wizard-breadcrumbs button:hover {
  border-color: var(--cilt-gold)            !important;
  color:        rgba(255, 255, 255, 0.9)    !important;
  background:   rgba(192,165,130, 0.1)    !important;
}

/* ── Question text ── */
#navigator-section .wizard-question-text,
#checker-section  .wizard-question-text {
  color: #ffffff !important;
}

/* ── Choice cards ── */
#navigator-section .choice-card,
#checker-section  .choice-card {
  background:   rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(192,165,130, 0.22)  !important;
  box-shadow:   0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

#navigator-section .choice-card:hover,
#checker-section  .choice-card:hover {
  background:   rgba(192,165,130, 0.11)  !important;
  border-color: var(--cilt-gold)           !important;
  box-shadow:   0 8px 28px rgba(192,165,130, 0.16) !important;
}

/* Text inside choice cards */
#navigator-section .choice-card .text-cilt-steel,
#checker-section  .choice-card .text-cilt-steel {
  color: rgba(255, 255, 255, 0.52) !important;
}

#navigator-section .choice-card .text-cilt-purple,
#checker-section  .choice-card .text-cilt-purple {
  color: rgba(255, 255, 255, 0.82) !important;
}

#navigator-section .choice-card .text-cilt-purple-dark,
#checker-section  .choice-card .text-cilt-purple-dark {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* ── Result panel ── */
#navigator-section .flowchart-result-wrapper,
#checker-section  .flowchart-result-wrapper {
  background:   rgba(192,165,130, 0.06) !important;
  border-color: rgba(192,165,130, 0.35) !important;

  /* Override CSS vars ONLY inside the result wrapper (not the whole section).
     Chronology and result card texts that use var() will adapt correctly.  */
  --cilt-pale:        rgba(192,165,130, 0.18);
  --cilt-steel:       rgba(255, 255, 255, 0.52);
  --cilt-purple:      rgba(255, 255, 255, 0.78);
  --cilt-purple-dark: rgba(255, 255, 255, 0.88);
}

/* level-card has a white CSS background — restore original vars so its
   text stays dark and readable on the white card surface */
#navigator-section .flowchart-result-wrapper .level-card,
#checker-section  .flowchart-result-wrapper .level-card {
  --cilt-pale:        #ebebeb;
  --cilt-steel:       #505050;
  --cilt-purple:      #361163;
  --cilt-purple-dark: #1e0938;
}

#navigator-section .flowchart-result-wrapper::before,
#checker-section  .flowchart-result-wrapper::before {
  background: var(--cilt-gold);
}

#navigator-section .result-title,
#checker-section  .result-title { color: #E3C493   !important; }

#navigator-section .result-desc,
#checker-section  .result-desc  { color: rgba(255, 255, 255, 0.62) !important; }

#navigator-section .result-original-title,
#checker-section  .result-original-title { color: rgba(255, 255, 255, 0.42) !important; }

/* Chronology & result internals */
#navigator-section .flowchart-result-wrapper .text-cilt-steel,
#checker-section  .flowchart-result-wrapper .text-cilt-steel {
  color: rgba(255, 255, 255, 0.55) !important;
}

#navigator-section .flowchart-result-wrapper .text-cilt-purple-dark,
#checker-section  .flowchart-result-wrapper .text-cilt-purple-dark {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* White boxes inside result (chronology card, outer result card) → dark-transparent */
#navigator-section .flowchart-result-wrapper [class~="bg-white"],
#checker-section  .flowchart-result-wrapper [class~="bg-white"] {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* The "postNominals / Corporate" pill uses bg-[#f7f7f7] (light grey, not caught
   by bg-white above) but text-cilt-purple-dark is now overridden to near-white.
   Convert it to a dark gold-tinted badge so the white text is legible. */
#navigator-section .flowchart-result-wrapper [class*="f7f7f7"],
#checker-section  .flowchart-result-wrapper [class*="f7f7f7"] {
  background:   rgba(192,165,130, 0.12) !important;
  border-color: rgba(192,165,130, 0.3)  !important;
}

/* btn-outline inside the dark result panel — make border/text visible on dark bg */
#navigator-section .flowchart-result-wrapper .btn-outline,
#checker-section  .flowchart-result-wrapper .btn-outline {
  color:        rgba(255, 255, 255, 0.8)   !important;
  border-color: rgba(255, 255, 255, 0.3)   !important;
}
#navigator-section .flowchart-result-wrapper .btn-outline:hover,
#checker-section  .flowchart-result-wrapper .btn-outline:hover {
  background:   rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.5)  !important;
  color:        #ffffff                   !important;
}

/* Restore original btn colours inside level-card (white bg) */
#navigator-section .flowchart-result-wrapper .level-card .btn-outline,
#checker-section  .flowchart-result-wrapper .level-card .btn-outline {
  color:        var(--cilt-purple)  !important;   /* = #361163 (restored) */
  border-color: var(--cilt-purple)  !important;
  background:   transparent         !important;
}
#navigator-section .flowchart-result-wrapper .level-card .btn-outline:hover,
#checker-section  .flowchart-result-wrapper .level-card .btn-outline:hover {
  background:   var(--cilt-purple)  !important;
  color:        #ffffff             !important;
}

/* Warmer section-bg-light for pages — subtle warm grey bridges the gap */
.section-bg-light { background-color: #f4f2ee; }


/* ── SECTION 2: LEVELS GRID & CARD PRESTIGE SYSTEM ──
   2026-09-24 (premium redesign, owner request — cards read as "ужаты"):
   more air (padding 20→32px), a full type-scale bump, and structural
   row alignment via CSS subgrid instead of hand-tuned min-heights.

   `.levels-grid` now just stacks two `.levels-grid-row` groups (top:
   L6·L5·L3, bottom: L2·L1·short — see gridRows in initLevelsGrid()).
   Each `.levels-grid-row` is its own 3-column × 5-row grid; each
   `.level-card` inside it is `grid-template-rows: subgrid` and its five
   children (header/desc/benefits/details/actions) are pinned to the
   matching row via `grid-row`. A row's height for e.g. "header" is set by
   the TALLEST header among that row's 3 cards — so a 2-line title in one
   card can never push its neighbours' bullets out of alignment, without
   needing the old fixed min-height reservations (removed below). */
.levels-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}

/* 2026-09-25: 5 → 7 shared rows. The header used to be ONE row, so a
   2-line title in one card still pushed its own English name down relative
   to a 1-line neighbour. Now tag / title / English name / desc / benefits /
   details / actions are 7 separate subgrid tracks (the .level-card-header
   wrapper is display:contents here, see below).
   minmax(0,1fr), not 1fr: a plain 1fr track has an automatic minimum of its
   content's min-content width, which let a long unbreakable line widen one
   column past its card (the L2 button overflowing its card). */
.levels-grid-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  column-gap: 32px;
  row-gap: 0; /* rows are content blocks WITHIN a card, not gaps between cards */
}

/* General Card Design — premium white card, single consolidated hover spec
   (previously duplicated: a dead 0.5s base transition here plus a competing
   0.32s !important override in edu.html's <head> — now there is exactly one
   definition, so there's no ambiguity about which one actually runs). */
.level-card {
  background-color: #ffffff;
  border: 1px solid rgba(54, 17, 99, 0.1);
  padding: 32px 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.32s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.32s cubic-bezier(.22,.61,.36,1),
              border-color 0.32s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  border-radius: var(--border-radius-card);
  box-shadow: 0 1px 3px rgba(54,17,99,0.05), 0 6px 18px rgba(54,17,99,0.06), 0 20px 48px rgba(54,17,99,0.04);
  overflow: hidden; /* Fix top bar clipping round corners */
}

/* Subgrid rows — ONLY for cards that are actual children of a
   `.levels-grid-row` (the main 3×2 program grid). The flowchart-result-
   wizard reuses the plain `.level-card` flex layout above unmodified (it is
   not a grid item of any parent grid, so subgrid there would silently fall
   back to `none` and could otherwise re-trigger unwanted grid auto-placement
   on its children — keeping this scoped avoids that entirely). */
.levels-grid-row .level-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 8;
  row-gap: 0;
  min-width: 0;
}
.levels-grid-row .level-card-header { display: contents; }
.levels-grid-row .level-card-tag { grid-row: 1; justify-self: start; align-self: start; position: relative; z-index: 1; }
/* Title: plain block, no line-clamp here — the corner icon floats inside
   it (see .level-card-icon) and -webkit-box ignores floats. */
.levels-grid-row .level-card-title { grid-row: 2; display: block; -webkit-line-clamp: unset; overflow: visible; position: relative; z-index: 1; margin-bottom: 12px; }
.levels-grid-row .level-card-original-title { grid-row: 3; position: relative; z-index: 1; }
/* Air between the last bullet and the duration row's hairline. */
.levels-grid-row .level-card-benefits { padding-bottom: 20px; }

.level-card:hover {
  transform: translateY(-4px);
  border-color: rgba(192,165,130, 0.55);
  box-shadow: 0 2px 6px rgba(54,17,99,0.06), 0 12px 36px rgba(54,17,99,0.12), 0 36px 80px rgba(54,17,99,0.09);
}

/* Corner icon (2026-09-25, replaced the outlined level numerals) — same
   recipe as .trained-stat-icon in «Результаты и признание»: thin Lucide
   line icon at low opacity, tilts on card hover; here it also turns gold.
   Floated inside the title, not absolutely in the corner: the tag above
   can run the full card width and would collide with a corner icon. */
.level-card-icon {
  float: right;
  width: 44px;
  height: 44px;
  /* Negative bottom margin shortens the float's exclusion to ~ONE title
     line: the icon only pushes the first line aside, the second line gets
     the full card width ("продвинутый диплом" needs all of it at 1100px). */
  margin: -6px 6px -22px 16px; /* 6px inset from the right edge (owner: sat too tight) */
  color: var(--cilt-purple);
  opacity: .24;
  pointer-events: none;
  transition: opacity .35s ease, color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.level-card-icon svg { width: 100% !important; height: 100% !important; stroke-width: 1.4; }
.level-card:hover .level-card-icon {
  color: var(--cilt-gold);
  opacity: 1;
  transform: rotate(-10deg) scale(1.06);
}
.levels-grid .level-card-l5 .level-card-icon { color: #F9DFBD; opacity: .5; }
.levels-grid .level-card-l5:hover .level-card-icon { color: #F9DFBD; opacity: 1; }
/* Narrow cards (~260px text width): a 44px icon reaches into the 2nd title
   line, where "продвинутый диплом" runs edge to edge. 32px fits line 1. */
@media (max-width: 1199px) {
  .level-card-icon { width: 32px; height: 32px; margin: -4px 4px -10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .level-card:hover .level-card-icon { transform: none; }
}

/* Flagship tier (Advanced Diploma) gets a slightly deeper elevation on
   hover than the other five cards — no glow (CLAUDE.md bans it sitewide),
   just one more shadow layer so it still reads as the premium pick. */
.level-card-l6:hover {
  box-shadow: 0 2px 6px rgba(54,17,99,0.06), 0 12px 36px rgba(54,17,99,0.12), 0 40px 90px rgba(54,17,99,0.14);
}

/* Thin top accent line (3px, 4px on hover) — see SCALE OF PRESTIGE below for per-level color */
.level-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2;
  transition: height 0.25s ease;
}

.level-card:hover::before {
  height: 4px;
}

/* Header: tag + title + original-title. 2026-09-18: the big H3 holds the
   short Russian name (e.g. "Международный диплом" — a Russian-speaking
   buyer reads that first, not the English qualification name); the English
   original moved to the small italic line below, truncated with an
   ellipsis + title="" tooltip since it can run long ("International
   Introductory Certificate in Logistics and Transport").
   2026-09-24: fixed min-height reservations removed — subgrid (see
   .levels-grid-row above) now aligns this row across the row's 3 cards
   structurally, sized to whichever header is tallest that row. line-clamp
   stays as a safety cap so an unexpectedly long title can never grow past
   2 lines and blow out the row. */
.level-card-header {
  grid-row: 1;
  padding-bottom: 16px;
  position: relative;
  z-index: 1;
}

.level-card-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94804F;
  background: none;
  border: none;
  border-left: 2px solid rgba(192,165,130,0.45);
  padding-left: 10px;
  border-radius: 0;
  margin-bottom: 14px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.level-card:hover .level-card-tag {
  color: #776136;
  border-left-color: var(--cilt-gold);
}

.level-card-title {
  font-size: 23px;
  font-weight: 700;
  color: #1a0533;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Plain muted italic caption, no fill — mirrors the already-shipped
   .hc-card-en treatment on index.html's course cards for the same content
   (English qualification name), single-line with ellipsis; full text still
   available via the title="" attribute added in courses-app.js. */
.level-card-original-title {
  display: block;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: rgba(54,17,99,0.5);
  background: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Main grid (2026-09-25, owner: the pale italic line was unreadable and the
   L2 name was cut off). Official English qualification name as a proper
   caption: upright, medium weight, a solid purple-grey at 6:1 contrast,
   allowed to wrap (no ellipsis — the full name is a trust signal, and a
   title-only tooltip is unreachable on touch), introduced by a short gold
   hairline so it reads as a credential line, not a stray subtitle. Its own
   subgrid row, so it starts on one Y across the row whatever the titles do. */
.levels-grid-row .level-card-original-title {
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #6B5A84;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  margin: 0;
  padding-bottom: 18px;
}
.levels-grid-row .level-card-original-title::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--cilt-gold);
  margin-bottom: 10px;
}

/* 2026-09-20 — THE alignment fix, superseded 2026-09-24 by structural
   subgrid rows (see .levels-grid-row / .level-card above): this row now
   simply sizes to the tallest description in the row, so every block below
   it lands on the same Y across the 3 cards without a hand-picked
   min-height. `margin-top: auto` on .level-card-actions still absorbs any
   remaining slack so the buttons sit flush at the card's own bottom edge. */
.level-card-desc {
  grid-row: 4;
  font-size: 15px;
  line-height: 1.55;
  color: #505050;
  padding-bottom: 16px;
  position: relative;
  z-index: 1;
}

.level-card-details {
  grid-row: 6;
  border-top: 1px solid rgba(192,165,130,0.22);
  padding: 16px 0;
  position: relative;
  z-index: 1;
}

/* Duration as a fact chip (was a label/value table row) — reads as a quick
   fact, not a form field. */
.level-card-duration-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cilt-purple);
}
.level-card-duration-chip svg { flex-shrink: 0; color: var(--cilt-gold); }
.levels-grid .level-card-l5 .level-card-duration-chip { color: #ffffff; }
.levels-grid .level-card-l5 .level-card-duration-chip svg { color: #F9DFBD; }

/* The .level-card-project footnote row (L3/L5/L6 only) was removed from the
   card on 2026-09-20 — it repeated the bullet already above it in English,
   and existing on only three of six cards it broke the row's alignment.
   Its styles are deleted with it; `level.project` still renders in the
   "Подробнее о программе" drawer, which has its own styling.
   2026-09-24: .detail-row/.detail-label/.detail-value (the old label/value
   table row markup) removed with them — duration is now a single
   .level-card-duration-chip, see above; nothing else in the codebase
   referenced these three classes (checked). */

/* Base rule stays flex/margin-auto so the standalone flowchart-result-wrapper
   card (NOT a subgrid child — see #navigator-section .flowchart-result-wrapper
   .level-card above) keeps working unchanged. The grid card's own row
   placement is added separately below, scoped to .levels-grid-row, so
   `grid-row`/`align-self` never reach that other context. */
.level-card-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.levels-grid-row .level-card-actions {
  grid-row: 7;
  align-self: end;
}

/* Column stack (primary CTA + secondary text link) — main grid only. The
   standalone flowchart-result card reuses .level-card-actions with its own
   inline row layout (two side-by-side buttons, set via inline style in
   js/courses-app.js) and must keep that — this selector intentionally
   doesn't reach it. */
.levels-grid .level-card-actions {
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(192,165,130,0.22);
  /* Inherits `margin-top: auto` from the base rule — this is the card's one
     and only slack absorber, which is what keeps every content block above
     it top-aligned across neighbouring cards. */
}

/* Compact rectangle buttons (was a 9999px pill) — scoped to .level-card-actions
   only, does not affect .btn-outline/.btn-primary elsewhere on the page.
   Only ever matches the standalone flowchart-result card's buttons now (the
   main grid's own buttons deliberately don't carry the .btn class — see
   .level-cta-unified / .level-detail-link below — to avoid colliding with
   this rule's !important padding/border-radius and its `flex: 1`). */
.level-card-actions .btn {
  flex: 1;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  justify-content: center;
  text-transform: uppercase;
}

.level-card-actions .btn-outline {
  color: var(--cilt-purple);
  border-color: rgba(54,17,99,0.3);
}

/* Buttons intentionally do NOT lift on hover — the whole card already lifts;
   adding a second, independent motion on the button inside it reads as
   jittery rather than premium. Overrides the sitewide .btn-outline:hover
   translateY(-2px) via selector specificity, no !important needed. */
.level-card-actions .btn-outline:hover {
  background: rgba(54,17,99,0.06);
  border-color: var(--cilt-purple);
  transform: none;
}

/* ── Unified primary CTA + secondary text link — main level-card grid ──
   2026-09-24: bumped to the site's button scale (15px/700/UPPERCASE,
   CLAUDE.md typography table) and a fuller-height 48px tap target — was
   11.5px, a leftover from the compact first pass. */
.level-cta-unified {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 6px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center !important; /* overrides the sitewide `text-align: left !important` reset */
  cursor: pointer;
  border: 2px solid var(--cilt-purple);
  background: var(--cilt-purple);
  color: #ffffff;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.level-cta-unified:hover {
  background: #4e2885;
  border-color: #4e2885;
  box-shadow: 0 4px 16px rgba(54,17,99,0.28);
}

/* L6 Executive — gold-on-purple, matches its accent bar and premium badge */
.level-cta-l6 {
  background: var(--cilt-gold);
  border-color: var(--cilt-gold);
  color: var(--cilt-purple);
}
.level-cta-l6:hover {
  background: #D7BDA0;
  border-color: #D7BDA0;
  box-shadow: 0 4px 16px rgba(192,165,130,0.35);
}

/* ═══════════════════════════════════════════════════════════
   MEMBERSHIP GRADE STEPPER (membership.html #grades-section)
   Replaces a flat 6-color inline-hex tab row with the same "one gold
   accent, one flagship-purple tier" language as .level-card above —
   one brand, not a rainbow of one-off hues per grade.
   ═══════════════════════════════════════════════════════════ */
.grade-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 40px;
  position: relative;
}
.grade-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.grade-step-connector {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--cilt-pale);
  z-index: 0;
}
.grade-step-connector-fill {
  position: absolute;
  top: 22px;
  left: 22px;
  height: 2px;
  width: 0%;
  background: var(--cilt-gold);
  z-index: 1;
  transition: width 0.4s ease;
}
.grade-step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(54,17,99,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.grade-step-circle svg { width: 18px; height: 18px; color: var(--cilt-purple); stroke-width: 2.5px; transition: color 0.3s ease; }
.grade-step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cilt-steel);
  text-align: center;
  transition: color 0.3s ease;
}
.grade-step:hover .grade-step-circle { border-color: var(--cilt-gold); }
.grade-step.is-active .grade-step-circle { background: var(--cilt-purple); border-color: var(--cilt-purple); box-shadow: 0 4px 14px rgba(54,17,99,0.3); }
.grade-step.is-active .grade-step-circle svg { color: var(--cilt-gold); }
.grade-step.is-active .grade-step-label { color: var(--cilt-purple); }
.grade-step.is-flagship .grade-step-circle { border-color: var(--cilt-gold); }
.grade-step.is-flagship.is-active .grade-step-circle { background: var(--cilt-gold); border-color: var(--cilt-gold); box-shadow: 0 4px 14px rgba(192,165,130,0.45); }
.grade-step.is-flagship.is-active .grade-step-circle svg { color: var(--cilt-purple); }

.grade-panel {
  background: #ffffff;
  border: 1px solid rgba(54,17,99,0.1);
  border-radius: var(--border-radius-card);
  box-shadow: 0 1px 3px rgba(54,17,99,0.04), 0 6px 18px rgba(54,17,99,0.05), 0 20px 48px rgba(54,17,99,0.06);
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.grade-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cilt-gold);
}
.grade-panel.is-flagship {
  background: #361163;
  border-color: rgba(192,165,130,0.5);
  box-shadow: 0 4px 16px rgba(54,17,99,0.18), 0 16px 40px rgba(54,17,99,0.14);
}

.grade-panel-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; padding-bottom: 24px;
  border-bottom: 1px solid var(--cilt-pale);
}
.grade-panel.is-flagship .grade-panel-header { border-bottom-color: rgba(255,255,255,0.14); }
.grade-panel-title { font-size: 26px; font-weight: 700; color: var(--cilt-purple); margin: 0; }
.grade-panel.is-flagship .grade-panel-title { color: #ffffff; }
.grade-panel-postnom-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cilt-steel); margin-bottom: 6px; display: block; }
.grade-panel.is-flagship .grade-panel-postnom-label { color: rgba(255,255,255,0.6); }
.grade-panel-postnom-chip {
  display: inline-block;
  background: rgba(192,165,130,0.14);
  border: 1px solid rgba(192,165,130,0.3);
  color: var(--cilt-purple);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
}
.grade-panel.is-flagship .grade-panel-postnom-chip { background: rgba(255,255,255,0.1); border-color: rgba(192,165,130,0.4); color: var(--cilt-gold); }

.grade-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grade-panel-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cilt-gold); margin: 0 0 10px; }
.grade-panel-text { font-size: 14px; line-height: 1.6; color: var(--cilt-steel); margin: 0; }
.grade-panel.is-flagship .grade-panel-text { color: rgba(255,255,255,0.85); }
.grade-panel-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.grade-panel-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--cilt-steel); line-height: 1.5; text-align: left; }
.grade-panel.is-flagship .grade-panel-benefits li { color: rgba(255,255,255,0.92); }
.grade-panel-benefits svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--cilt-gold); stroke-width: 2.5px; }

.grade-panel-footer { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--cilt-pale); }
.grade-panel.is-flagship .grade-panel-footer { border-top-color: rgba(255,255,255,0.14); }
.grade-panel.is-flagship .btn-primary { background: var(--cilt-gold) !important; border-color: var(--cilt-gold) !important; color: var(--cilt-purple) !important; }

@media (max-width: 900px) {
  .grade-stepper { overflow-x: auto; padding-bottom: 4px; gap: 2px; -webkit-overflow-scrolling: touch; }
  .grade-step { min-width: 76px; }
  .grade-step-label { font-size: 10px; }
  .grade-panel { padding: 28px 22px; }
  .grade-panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .grade-panel-title { font-size: 22px; }
}

/* Secondary "Подробнее" — plain text link, not a button, so it never
   competes visually with the primary CTA above it. Arrow slides via the
   widening gap on hover — mirrors index.html's already-shipped .hc-cta
   pattern (.hc-card:hover .hc-cta { gap: 12px }) for cross-page consistency. */
.level-detail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--cilt-gold);
  text-align: center !important; /* overrides the sitewide `text-align: left !important` reset */
  padding: 8px 0 0;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, gap 0.25s ease;
}
.level-detail-link svg { transition: transform 0.25s ease; }
.level-detail-link:hover { color: var(--cilt-purple); gap: 9px; }
.level-detail-link:hover svg { transform: translateX(1px); }

/* Benefits checklist — sits between the description and the factual
   duration/modules block.
   2026-09-24: min-height + the ~42-char bullet cap removed — subgrid (see
   .levels-grid-row above) now aligns this row structurally: if a bullet
   wraps to 2 lines, that row's shared track grows uniformly across all 3
   cards in the row, it does not misalign the siblings. Font bumped to the
   site's Body Default (15px, CLAUDE.md typography table) — was 13px. */
.level-card-benefits {
  grid-row: 5;
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.level-card-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #3d3a45;
}
.level-card-benefits svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cilt-gold);
  transition: transform 0.2s ease;
}
.level-card:hover .level-card-benefits svg {
  transform: translateX(1px);
}

/* MOST POPULAR / EXECUTIVE STRATEGY badges — static, no animation, matches
   the same restraint decision made for index.html's badge.
   2026-09-24: moved out 20px/20px to match the card's roomier 32px padding
   (was pulled in to 14px/14px for the old tighter card). */
.level-popular-badge,
.level-premium-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: var(--cilt-gold);
  color: var(--cilt-purple-deep);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 9px;
  letter-spacing: 0.12em;
  border-radius: var(--border-radius-btn);
  z-index: 3;
}

/* L5 gets a noticeably richer hover shadow — the one visual distinction
   that signals "most popular" without copying L6's dark background, so the
   two special cards stay legible as two different tiers, not near-twins. */
.level-card-l5:hover {
  box-shadow: 0 2px 6px rgba(54,17,99,0.06),
              0 12px 36px rgba(54,17,99,0.14),
              0 0 28px rgba(192,165,130,0.22);
}

/* ────────── SCALE OF PRESTIGE — unified accent ──────────
   Gold top bar for every standard level, deep purple reserved for L6 only
   — the executive tier signal. Card body stays white, except L5 (Diploma),
   which gets the full brand-purple treatment below — same one deliberate
   fill as the "Most Popular" card on index.html's #home-courses. */

.level-card-short::before,
.level-card-l1::before,
.level-card-l2::before,
.level-card-l3::before,
.level-card-l5::before { background-color: var(--cilt-gold); }

.level-card-l6::before { background-color: var(--cilt-purple); }

/* ────────── L5 (International Diploma) — brand-purple treatment ──────────
   Mirrors index.html's .hc-card--featured (same gradient, same gold accent
   logic) but WITHOUT its scale/lift-out-of-grid transform or infinite
   hc-elite-pulse animation — this card sits in a row with L3/L6 inside a
   strict 3-column grid where siblings must stay row-aligned, and an
   autoplay pulse was already explicitly rejected on this page (see
   .level-card-header comment history / project log) as too heavy/annoying
   for a functional listing rather than a hero showcase. Scoped to
   `.levels-grid` only — the wizard's "recommended program" result card
   reuses `.level-card-l5` too but is hardcoded to stay a white card (see
   `#navigator-section .flowchart-result-wrapper .level-card` CSS-var
   reset above), so this must not leak into it. */
.levels-grid .level-card-l5 {
  background: #361163;
  border-color: rgba(192,165,130,0.5);
  box-shadow: 0 4px 16px rgba(54,17,99,0.18), 0 16px 40px rgba(54,17,99,0.14);
}
.levels-grid .level-card-l5 .level-card-tag { color: #F9DFBD; border-left-color: rgba(249,223,189,0.5); }
.levels-grid .level-card-l5:hover .level-card-tag { color: #FFFCEC; border-left-color: #F9DFBD; }
.levels-grid .level-card-l5 .level-card-title { color: #ffffff; }
.levels-grid .level-card-l5 .level-card-original-title { color: rgba(255,255,255,0.55); }
.levels-grid .level-card-l5 .level-card-desc { color: rgba(255,255,255,0.82); }
.levels-grid .level-card-l5 .level-card-benefits li { color: rgba(255,255,255,0.92); }
.levels-grid .level-card-l5 .level-card-benefits svg { color: #F9DFBD; }
.levels-grid .level-card-l5 .level-card-details { border-top-color: rgba(255,255,255,0.14); }
.levels-grid .level-card-l5 .level-card-actions { border-top-color: rgba(255,255,255,0.14); }
.levels-grid .level-card-l5 .level-cta-unified { background: var(--cilt-gold); border-color: var(--cilt-gold); color: var(--cilt-purple); }
.levels-grid .level-card-l5 .level-cta-unified:hover { background: #D7BDA0; border-color: #D7BDA0; }
.levels-grid .level-card-l5 .level-detail-link { color: rgba(255,255,255,0.75); }
.levels-grid .level-card-l5 .level-detail-link:hover { color: #ffffff; }

/* ────────── LEVEL SPECIFIC BUTTON STYLES ──────────
   Superseded on the main grid by the unified .level-cta-unified /
   .level-cta-l6 buttons below — kept defined (not deleted) because the
   standalone flowchart-result card (js/courses-app.js, "recommended
   program" result after the wizard) still renders `class="btn btn-${levelId}"`
   and depends on these exact rules for its own button color. Deleting
   these would silently break that untouched component. */

.btn-level-short {
  background-color: #F2E9FA;
  color: #1e0938;
  border: 1px solid rgba(54,17,99,.22);
}
.btn-level-short:hover {
  background-color: #E8D8F5;
  border-color: rgba(54,17,99,.32);
  box-shadow: 0 4px 14px rgba(54,17,99,0.15);
}

.btn-level-1 {
  background-color: #DCC4EE;
  color: #1e0938;
  border-color: #DCC4EE;
}
.btn-level-1:hover {
  background-color: #CDB0E3;
  border-color: #CDB0E3;
  box-shadow: 0 4px 14px rgba(54,17,99,0.18);
}

.btn-level-2 {
  background-color: #C9A8E0;
  color: #1e0938;
  border-color: #C9A8E0;
}
.btn-level-2:hover {
  background-color: #B993D6;
  border-color: #B993D6;
  box-shadow: 0 4px 14px rgba(54,17,99,0.2);
}

.btn-level-3 {
  background-color: #7F4EAE;
  color: #ffffff;
  border-color: #7F4EAE;
}
.btn-level-3:hover {
  background-color: #6F4198;
  border-color: #6F4198;
  box-shadow: 0 4px 16px rgba(54,17,99,0.28);
}

.btn-level-5 {
  background-color: #7A45B3;
  color: #ffffff;
  border-color: #7A45B3;
}
.btn-level-5:hover {
  background-color: #6A3A9E;
  border-color: #6A3A9E;
  box-shadow: 0 4px 16px rgba(54,17,99,0.3);
}

.btn-level-6 {
  background-color: var(--cilt-purple);
  color: var(--cilt-gold);
  border-color: var(--cilt-purple);
}
.btn-level-6:hover {
  background-color: #2b0d4f;
  border-color: #2b0d4f;
  box-shadow: 0 4px 16px rgba(54,17,99,0.3);
}

/* Deep-link target (alumni.html CTA → edu.html#levels-section): without this
   the fixed header (122px, 72px at ≤480px) covered the block's eyebrow.
   Values put the eyebrow ~36-56px below the header at every width. */
#levels-section { scroll-margin-top: 78px; }
@media (max-width: 480px) { #levels-section { scroll-margin-top: 28px; } }

/* Inter, scoped strictly to the Programs/Qualifications block (per explicit
   user decision — not site-wide, not even page-wide on edu.html; everywhere
   else on the site stays on the Arial-only brandbook rule above). Also
   reaches the standalone flowchart-result card (js/courses-app.js), which
   reuses these same .level-card classes outside #levels-section, so the one
   shared component doesn't render half in Inter and half in Arial.
   #trained-stats-section (Diploma/Certificate live counters, added later,
   same explicit per-block user request) shares the same exception. */
#levels-section,
#levels-section *,
.flowchart-result-wrapper .level-card,
.flowchart-result-wrapper .level-card *,
#trained-stats-section,
#trained-stats-section * {
  font-family: 'Inter', Arial, sans-serif !important;
}

/* ── TRAINED STATS — Diploma/Certificate live counters. Number scale, gold
   rule and the large low-opacity background-icon-fills-the-empty-space trick
   are borrowed directly from index.html's #achievements .stat-card (the
   "CILT в цифрах" block) — same reference the user pointed to, adapted (not
   copied 1:1: smaller clamp ceiling here since this is a 2-card not 3-card
   row, light background not dark) so both stat blocks read as one family
   without being identical. Hover language (translateY lift, growing layered
   shadow, thickening gold top bar) still matches .level-card above. ── */
.trained-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Rows are shared by the cards (each card is a SUBGRID spanning 5 rows: rule /
     value / label / description / link), so a label that wraps to two lines in
     one card can never push only its own description down. Row gap must stay 0
     for that; the vertical space between card rows in the 2-column layout is a
     margin on the card (see the max-width: 1024px block). */
  column-gap: 20px;
  row-gap: 0;
  margin-top: 8px;
}
.trained-stat-card {
  background: #ffffff;
  border: 1px solid rgba(54,17,99,0.1);
  border-radius: var(--border-radius-card);
  padding: 30px 26px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-premium-sm), var(--shadow-premium-md);
  transition: transform 0.32s var(--ease-out-expo), box-shadow 0.32s var(--ease-out-expo), border-color 0.32s var(--ease-out-expo);
  will-change: transform;
}
.trained-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--cilt-gold);
  transition: height .25s ease;
}
.trained-stat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(192,165,130,.55);
  box-shadow: var(--shadow-premium-lg);
}
.trained-stat-card:hover::before { height: 4px; }
/* Large decorative watermark icon, not a small badge — fills the space that
   used to sit empty to the right of the number/label column, the "почему
   правый край пустой" complaint. */
.trained-stat-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  color: var(--cilt-purple);
  opacity: .07;
  transition: opacity .35s ease, transform .35s var(--ease-out-expo);
}
.trained-stat-icon svg { width: 100% !important; height: 100% !important; stroke-width: 1.4; }
.trained-stat-card:hover .trained-stat-icon {
  opacity: .13;
  transform: scale(1.08) rotate(-4deg);
}
.trained-stat-rule {
  width: 40px;
  height: 2px;
  background: var(--cilt-gold);
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.trained-stat-value {
  position: relative;
  z-index: 1;
  font-size: clamp(40px, 3.8vw, 58px);
  font-weight: 700;
  color: var(--cilt-purple);
  line-height: .95;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
  margin-bottom: 10px;
}
/* Words instead of a number ("Royal / Chartered", "Ofqual / RQF · EQF").
   Exactly TWO lines whose total height equals ONE numeric value: the font is
   half the numeric size and the line-height is the shared .95, so 2 x 0.5 x
   .95 = 0.95 - the label/description rows of number cards and word cards land
   on the same line. If you change the numeric clamp below, change it here too
   (and in the two media blocks). */
.trained-stat-value--text {
  display: flex;
  align-items: flex-end;
  font-size: calc(clamp(40px, 3.8vw, 58px) * .5);
  height: calc(clamp(40px, 3.8vw, 58px) * .95);
  letter-spacing: -0.02em;
}
.trained-stat-label {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cilt-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.trained-stat-desc {
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  color: var(--cilt-steel);
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .trained-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .trained-stat-card:nth-child(n+3) { margin-top: 20px; }
  .trained-stat-value { font-size: clamp(44px, 7vw, 58px); }
  .trained-stat-value--text { font-size: calc(clamp(44px, 7vw, 58px) * .5); height: calc(clamp(44px, 7vw, 58px) * .95); }
}
@media (max-width: 767px) {
  .trained-stats-grid { grid-template-columns: 1fr; }
  .trained-stat-card + .trained-stat-card { margin-top: 16px; }
  .trained-stat-value { font-size: clamp(40px, 12vw, 52px); }
  .trained-stat-value--text { font-size: calc(clamp(40px, 12vw, 52px) * .5); height: calc(clamp(40px, 12vw, 52px) * .95); }
  .trained-stat-card { padding: 28px 24px; }
  .trained-stat-icon { width: 48px; height: 48px; top: 16px; right: 16px; }
}


/* ── SECTION 3: ALL MODULES CATALOG ── */
.catalog-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 320px;
  position: relative;
}

.search-box input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 48px;
  border: 1px solid var(--cilt-pale);
  font-size: 15px;
  color: var(--cilt-steel);
  border-radius: var(--border-radius-btn);
  outline: none;
  transition: var(--transition-normal);
}

.search-box input:focus {
  border-color: var(--cilt-gold); /* Gold border focus */
  box-shadow: 0 0 0 3px rgba(192,165,130, 0.1);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 18px;
  height: 18px;
  color: var(--cilt-steel);
}

.filter-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-group select {
  height: 52px;
  padding: 0 20px;
  border: 1px solid var(--cilt-pale);
  background-color: #ffffff;
  font-size: 14px;
  color: var(--cilt-steel);
  border-radius: var(--border-radius-btn);
  outline: none;
  cursor: pointer;
  transition: var(--transition-normal);
}

.filter-group select:focus {
  border-color: var(--cilt-gold);
}

.catalog-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--cilt-steel);
}

.catalog-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Catalog modules groups */
.catalog-level-group {
  background-color: #ffffff;
  border: 1px solid var(--cilt-pale);
  margin-bottom: 40px;
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-premium-sm);
  overflow: hidden;
}

.catalog-level-header {
  background-color: rgba(54, 17, 99, 0.02);
  padding: 24px 32px;
  border-bottom: 1px solid var(--cilt-pale);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.catalog-level-header:hover {
  background-color: rgba(192,165,130, 0.05); /* Subtle gold hover */
}

.level-icon {
  width: 24px;
  height: 24px;
  color: var(--cilt-gold);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 16px;
}

.catalog-level-group.open .level-icon {
  transform: rotate(180deg);
}

.catalog-level-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  background-color: #ffffff;
}

.catalog-level-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cilt-purple-dark);
  margin: 0;
  letter-spacing: -0.015em;
}

.catalog-level-badge {
  font-size: 11px;
  background-color: var(--cilt-purple-dark);
  color: #ffffff;
  padding: 6px 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--border-radius-btn);
}

/* Module rows */
.module-item {
  border: 1px solid transparent;
  border-bottom: 1px solid var(--cilt-pale);
  border-left: 4px solid transparent;
  background-color: transparent;
  border-radius: 12px;
  margin: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-item:last-child {
  border-bottom-color: transparent;
}

.module-item.open {
  background-color: #ffffff;
  border: 1px solid rgba(54, 17, 99, 0.08); /* Faint purple border */
  border-left: 4px solid var(--cilt-gold); /* Strong gold accent */
  margin: 24px 0;
  box-shadow: 0 20px 60px rgba(54, 17, 99, 0.08); /* Deep premium shadow */
}

.module-item.open + .module-item {
  border-top-color: transparent;
}

.module-trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
}

.module-trigger:hover {
  background-color: rgba(192,165,130, 0.08); /* Noticeable soft gold highlight */
}

.module-item.open .module-trigger {
  background-color: rgba(192,165,130, 0.08); /* Retain highlight when open */
  border-radius: 12px 12px 0 0;
}

.module-title-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

.module-status-badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.module-status-badge.status-mandatory { background-color: var(--cilt-purple); }
.module-status-badge.status-elective  { background-color: #ffd204; }
.module-status-badge.status-optional  { background-color: var(--cilt-gold); }

.module-code-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cilt-purple);
  background-color: var(--cilt-pale-grey, #ebebeb);
  padding: 2px 8px;
  border-radius: 4px;
}

.module-name-ru {
  font-size: 16px;
  font-weight: 700;
  color: var(--cilt-purple-dark);
  letter-spacing: -0.01em;
}

.module-name-en {
  font-size: 13px;
  font-style: italic;
  color: var(--cilt-steel);
}

.module-icon {
  width: 20px;
  height: 20px;
  color: var(--cilt-steel);
  transition: transform 0.4s var(--ease-out-expo);
}

.module-item.open .module-icon {
  transform: rotate(180deg);
  color: var(--cilt-gold);
}

.module-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  background-color: transparent;
}

.module-details-inner {
  padding: 32px;
  border-top: 1px solid var(--cilt-pale);
}

.module-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cilt-steel);
  margin: 0 0 24px 0;
}

.module-relations {
  border-top: 1px solid var(--cilt-pale);
  padding-top: 20px;
}

.relations-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--cilt-purple-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: block;
}

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

.relation-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--border-radius-btn);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-normal);
}

.relation-badge-mandatory {
  background-color: rgba(54, 17, 99, 0.06);
  color: var(--cilt-purple);
  border: 1px solid rgba(54, 17, 99, 0.1);
}

.relation-badge-mandatory:hover {
  background-color: var(--cilt-purple);
  color: #ffffff;
}

.relation-badge-elective {
  background-color: rgba(255, 210, 4, 0.12);
  color: var(--cilt-steel);
  border: 1px solid rgba(255, 210, 4, 0.35);
}

.relation-badge-elective:hover {
  background-color: #ffd204;
  color: var(--cilt-purple);
}

.relation-badge-optional {
  background-color: rgba(192,165,130, 0.08);
  color: var(--cilt-gold);
  border: 1px solid rgba(192,165,130, 0.15);
}

.relation-badge-optional:hover {
  background-color: var(--cilt-gold);
  color: #ffffff;
}


/* SECTION 4: ROADMAP — moved to index.html (#roadmap-section) 2026-08-09 */


/* ── SECTION 5: FAQ ACCORDION — PREMIUM REDESIGN ── */
#faq-section {
  background: var(--cilt-purple-deep);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

#faq-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent                  0%,
    rgba(192,165,130, 0.22)    25%,
    rgba(192,165,130, 0.22)    75%,
    transparent                 100%
  );
}

#faq-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 45% at 50% -5%, rgba(54, 17, 99, 0.45) 0%, transparent 60%);
  pointer-events: none;
}

#faq-section .section-eyebrow { color: var(--cilt-gold); }
#faq-section .section-title   { color: #ffffff; }

/* ── LIST WRAPPER ── */
.faq-list {
  max-width: 820px;
  margin: 56px auto 0;
  border-top: 1px solid rgba(192,165,130, 0.14);
  position: relative;
  z-index: 1;
}

/* ── ACCORDION ITEM ── */
.faq-item {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(192,165,130, 0.14);
  border-left: 3px solid transparent;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  transform: none;
  position: relative;
  transition:
    background 0.3s ease,
    border-left-color 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item:hover {
  background: rgba(255, 255, 255, 0.016);
  transform: none;
  box-shadow: none;
  border-color: rgba(192,165,130, 0.14);
  border-left-color: rgba(192,165,130, 0.28);
}

.faq-item.open {
  background: rgba(192,165,130, 0.038);
  border-left-color: var(--cilt-gold);
}

/* ── TRIGGER BUTTON ── */
.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 34px 6px 34px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  text-align: left;
  transition: none;
}

/* Ordinal number */
.faq-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(192,165,130, 0.38);
  flex-shrink: 0;
  min-width: 28px;
  line-height: 1;
  padding-top: 1px;
  transition: color 0.3s ease;
}

.faq-item:hover .faq-num { color: rgba(192,165,130, 0.65); }
.faq-item.open  .faq-num { color: var(--cilt-gold); }

/* Question text */
.faq-question {
  font-size: 17px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.76);
  letter-spacing: -0.015em;
  line-height: 1.3;
  flex-grow: 1;
  transition: color 0.3s ease;
}

.faq-item:hover .faq-question { color: rgba(255, 255, 255, 0.92); }
.faq-item.open  .faq-question { color: #ffffff; }

/* ── CHEVRON ICON ── */
.faq-icon {
  width: 18px;
  height: 18px;
  color: rgba(192,165,130, 0.45);
  flex-shrink: 0;
  transition: transform 0.42s var(--ease-out-expo), color 0.3s ease;
}

.faq-item:hover .faq-icon { color: rgba(192,165,130, 0.7); }
.faq-item.open  .faq-icon {
  transform: rotate(180deg);
  color: var(--cilt-gold);
}

/* ── ANSWER CONTENT ── */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease-out;
  background: none;
}

.faq-content p {
  padding: 0 6px 36px 70px;
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.52);
  border-top: none;
}


/* ── SECTION 6: CTA REGISTRATION FORM ── */
.cta-form-section {
  background-color: var(--cilt-purple-deep);
  padding: 100px 0;
  position: relative;
  border-bottom: none;
}

.cta-form-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  pointer-events: none;
}

.cta-container {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.cta-info h2 {
  font-size: 38px;
  letter-spacing: -0.035em;
}

.cta-contact-details {
  margin-top: 40px;
}

.cta-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 16px;
}

.cta-contact-item .icon {
  width: 22px;
  height: 22px;
}

.cta-form-card {
  background-color: #ffffff;
  padding: 48px;
  border-radius: var(--border-radius-card);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(192,165,130, 0.15); /* Gold outline */
}

/* ── Contact channel widget: WhatsApp / Telegram / Email picker ── */
.contact-widget-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 13px 24px;
  background-color: #C0A582;
  color: #361163;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-widget-trigger:hover {
  background-color: #AC916B;
  color: #ffffff;
}

.contact-widget-trigger:focus-visible {
  outline: 2px solid #C0A582;
  outline-offset: 3px;
}

.contact-widget-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.contact-widget-trigger[aria-expanded="true"] .contact-widget-chevron {
  transform: rotate(180deg);
}

.contact-widget-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.contact-widget-options[hidden] {
  display: none;
}

.contact-widget-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 10px 6px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  animation: contactOptionsIn 0.18s ease-out;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-widget-tile:hover,
.contact-widget-tile:focus-visible {
  background-color: rgba(192, 165, 130, 0.14);
  border-color: #C0A582;
}

.contact-widget-tile:focus-visible {
  outline: 2px solid #C0A582;
  outline-offset: 2px;
}

.contact-widget-icon {
  width: 20px;
  height: 20px;
  color: #C0A582;
  flex-shrink: 0;
}

@keyframes contactOptionsIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-widget-tile {
    animation: none;
  }
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cilt-purple-dark);
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--cilt-pale);
  font-size: 15px;
  color: var(--cilt-steel);
  border-radius: var(--border-radius-btn);
  outline: none;
  transition: var(--transition-normal);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--cilt-gold);
  box-shadow: 0 0 0 3px rgba(192,165,130, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Consent checkbox row — overrides .form-group label's uppercase/bold/block
   styling (meant for field labels above an input), since here the <label>
   wraps the checkbox itself as its clickable hit area. */
.form-consent-group {
  margin-bottom: 20px;
}
.form-consent-label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--cilt-steel);
  cursor: pointer;
}
.form-consent-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--cilt-purple);
  cursor: pointer;
}
.form-consent-label a {
  color: var(--cilt-purple);
  font-weight: 600;
  text-decoration: underline;
}


/* ── DETAIL WINDOW (right-side slide-over panel) ──
   2026-09-24 (owner): back to a right-hand panel after the 2026-09-21 centred-
   modal experiment read as "странно" — this is meant to feel like part of the
   page, not a floating dialog. Desktop: exactly half the viewport width,
   full height, page content still visible (lightly dimmed) to its left.
   Solid scrim and NO backdrop-filter - the site rule is matte, flat surfaces
   (no glass). The scroll container keeps data-lenis-prevent in edu.html:
   without it Lenis swallows the wheel and the panel "does not scroll". */
.drawer-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background-color: rgba(19, 5, 38, 0.35);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out-expo), visibility 0.35s var(--ease-out-expo);
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50vw;
  min-width: 560px;
  max-width: 880px;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  background-color: #ffffff;
  border-radius: 0;
  box-shadow: -24px 0 56px rgba(19, 5, 38, 0.22);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out-expo);
}

.drawer-overlay.open .drawer-panel {
  transform: none;
}

.drawer-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-normal);
  z-index: 10;
}

.drawer-close-btn:hover {
  color: var(--cilt-purple);
  background: #ffffff;
  transform: rotate(90deg);
}

.drawer-close-btn:focus-visible {
  outline: 2px solid var(--cilt-gold);
  outline-offset: 2px;
}

.drawer-scroll-container {
  --dw-pad-x: 48px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 0 0 0;
  /* the sticky footer must never hide the focused control (WCAG 2.2 2.4.11) */
  scroll-padding-bottom: 104px;
}

/* Purple header band — the panel's brand anchor, matches .level-card-l5's
   solid-purple treatment so the flagship card and its own detail window read
   as the same object. Russian name is the big headline (matches the card);
   English original is the small line underneath. */
.drawer-header {
  background: var(--cilt-purple);
  padding: 44px var(--dw-pad-x) 28px;
  margin-bottom: 0;
}

.drawer-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--cilt-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 12px;
}

.drawer-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  letter-spacing: -0.025em;
}

.drawer-original-title {
  font-size: 14px;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  display: block;
}

.drawer-body {
  flex-grow: 1;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cilt-steel);
  padding: 36px var(--dw-pad-x) 0;
}

.drawer-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--cilt-purple-dark);
  margin: 32px 0 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drawer-body h3:first-of-type {
  margin-top: 0;
}

.drawer-body ul {
  padding-left: 20px;
  margin: 0 0 24px 0;
}

.drawer-body li {
  margin-bottom: 10px;
  font-size: 14px;
}

/* Sticky: a long module list (L5, L2) must not push "Подать заявку" off-screen. */
.drawer-footer {
  position: sticky;
  bottom: 0;
  margin: 32px 0 0;
  padding: 20px var(--dw-pad-x);
  background: #ffffff;
  border-top: 1px solid var(--cilt-pale);
  display: flex;
  gap: 16px;
}

.drawer-footer .btn {
  flex: 1;
  justify-content: center;
}

/* -- Short-course topic chips (level-short drawer) -- */
.drawer-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px;
}
.drawer-topic-chip {
  padding: 8px 14px;
  border: 1px solid rgba(192,165,130,0.4);
  border-radius: 999px;
  background: rgba(192,165,130,0.06);
  color: var(--cilt-purple-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0;
}
.drawer-topics-note {
  padding-left: 14px;
  border-left: 2px solid var(--cilt-gold);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cilt-steel);
  margin: 0 0 28px;
}
.drawer-delivery-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 8px;
}
.drawer-delivery-format {
  padding: 16px 16px 18px;
  border: 1px solid rgba(54,17,99,0.12);
  border-radius: var(--border-radius-card);
}
.drawer-delivery-format h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cilt-purple);
  line-height: 1.3;
}
.drawer-delivery-format p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cilt-steel);
}

/* -- Core modules (L5/L3 drawer): a short headline list, not the full
      modulesList — see buildModulesSectionHtml in courses-app.js. -- */
.drawer-core-modules {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px;
}
.drawer-core-modules li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cilt-pale);
  font-size: 14px;
}
.drawer-core-modules li:first-child { padding-top: 0; }
.drawer-core-module-ru {
  font-weight: 700;
  color: var(--cilt-purple-dark);
}
.drawer-core-module-en {
  font-size: 12px;
  font-style: italic;
  color: var(--cilt-steel);
}
.drawer-catalog-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(192,165,130,0.5);
  border-radius: var(--border-radius-card);
  background: rgba(192,165,130,0.05);
  color: var(--cilt-purple);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  margin: 0 0 24px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.drawer-catalog-link:hover {
  background: rgba(192,165,130,0.12);
  border-color: var(--cilt-gold);
}
.drawer-catalog-link svg { flex-shrink: 0; }

/* -- Diploma-supplement pointer (L5/L6 drawer, links to #supplement-section) -- */
.drawer-supplement-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  padding: 16px 18px;
  background: rgba(54,17,99,0.04);
  border-left: 4px solid var(--cilt-purple);
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cilt-purple-dark);
}
.drawer-supplement-note svg { flex-shrink: 0; margin-top: 2px; color: var(--cilt-gold); }
.drawer-supplement-note a {
  color: var(--cilt-purple);
  font-weight: 700;
  text-decoration: underline;
}

/* Price block at the top of the window body. The old three-format-panel
   layout for L5 (.drawer-formats*, .format-panel*) was removed 2026-09-24 —
   L5 now shows one headline price like every other level (see buildPriceBlock
   in js/courses-app.js and .drawer-price-note below for the reason line). */
.drawer-price {
  margin: 0 0 32px; /* .drawer-body h3:first-of-type has no top margin, so the gap lives here */
}

/* Levels with one price (or none): a single matte box, same edge and radius as
   the level-5 format panels so the first block looks related on every level. */
.drawer-price-box {
  padding: 20px 22px;
  border: 1px solid rgba(54,17,99,0.14);
  border-radius: var(--border-radius-card);
  box-shadow: 0 4px 12px rgba(54,17,99,0.06);
}
.drawer-price-main {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cilt-purple);
}
.drawer-price-request {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cilt-purple);
}
.drawer-price-intake {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cilt-steel);
}
.drawer-price-note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cilt-steel);
}

/* Tablet: panel takes most of the width but still shows a strip of the page
   behind it, so it still reads as a panel rather than a full takeover. */
@media (max-width: 1023px) and (min-width: 601px) {
  .drawer-panel { width: 80vw; min-width: 0; max-width: none; }
  .drawer-delivery-formats { grid-template-columns: 1fr; }
}

/* Phones: the panel fills the screen — no page strip left to show. */
@media (max-width: 600px) {
  .drawer-panel {
    width: 100vw;
    min-width: 0;
    max-width: none;
  }
  .drawer-header { padding: 32px 20px 24px; }
  .drawer-body { padding: 28px 20px 0; }
  .drawer-footer { padding: 14px 20px; }
  .drawer-title { font-size: 24px; }
  .drawer-delivery-formats { grid-template-columns: 1fr; }
  /* one button only: the × already closes, and two stacked buttons ate ~16% of the height */
  .drawer-footer #drawer-secondary-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-overlay, .drawer-panel { transition: opacity 0.01s, visibility 0.01s; transform: none; }
}


/* ── TOAST NOTIFICATIONS ── */
.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background-color: var(--cilt-purple-deep);
  color: #ffffff;
  border-left: 4px solid var(--cilt-green);
  padding: 20px 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  z-index: 3000;
  opacity: 1;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.4s var(--ease-out-expo);
  border-radius: var(--border-radius-btn);
}

.toast.hidden {
  display: none !important;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toast-icon {
  width: 22px;
  height: 22px;
  color: var(--cilt-green);
}

.toast-message {
  font-size: 14px;
  font-weight: 700;
}


/* ── ANIMATIONS ── */

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


/* ── MEDIA QUERIES FOR RESPONSIVENESS ── */
@media (max-width: 1024px) {
  .hero-container,
  .hero-frame {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-visual {
    justify-content: flex-start;
  }

  .hero-badge-card {
    max-width: 100%;
  }

  /* 2026-09-24: below the desktop breakpoint every program card stacks in
     one column — subgrid alignment only matters when cards sit side by
     side, so it is switched off here rather than reflowed into an
     awkward 2-column subgrid. */
  .levels-grid-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  /* 2026-09-25: own (non-sub) grid, not flex — the children keep their
     explicit grid-row 1-7 as implicit auto rows, so the corner icon still
     shares the title's cell instead of dropping onto a line of its own. */
  .levels-grid-row .level-card {
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-row: auto;
  }
  .levels-grid-row .level-card-actions {
    align-self: stretch;
  }

  .cta-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  
}

@media (max-width: 768px) {
  h1.hero-title {
    font-size: 34px;
  }
  
  h2.section-title {
    font-size: 28px;
  }
  
  section {
    padding: 80px 0;
  }
  
  .nav-links {
    display: none;
  }
  
  .burger-btn {
    display: flex;
  }
  
  .levels-grid {
    gap: 20px;
  }
  .levels-grid-row .level-card {
    padding: 24px 24px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .footer-inner {
    flex-direction: column;
    gap: 40px;
  }
  
  .footer-links-group {
    flex-direction: column;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .container,
  .hero-frame {
    padding: 0 20px;
  }
  
  .logo-desktop {
    display: none;
  }
  
  .logo-mobile {
    display: block;
  }
  
  #top-bar {
    display: none;
  }
  
  #main-nav {
    top: 0;
    height: 72px;
  }
  
  #mobile-menu {
    top: 72px;
  }
  
  .page-body {
    padding-top: 72px;
  }
  
  .flowchart-card {
    padding: 24px;
  }
  
  .flowchart-step {
    gap: 16px;
    padding-left: 20px;
  }
  
  .step-number {
    width: 28px;
    height: 28px;
    font-size: 11px;
    left: -15px;
  }
  
  .step-buttons {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn-choice {
    width: 100%;
    text-align: center !important; /* Center-align buttons on mobile for thumb reach */
  }
  
}

/* ────────── CUSTOM SCROLLBAR ────────── */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(54, 17, 99, 0.2);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(54, 17, 99, 0.4);
}

/* ── CILT Framework Guide Styles ── */
#framework-guide {
  background: linear-gradient(145deg, #130526 0%, #1e0938 100%);
  position: relative;
}
#framework-guide::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at 15% 50%, rgba(192,165,130, 0.05), transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(183, 212, 50, 0.03), transparent 25%);
  pointer-events: none;
}

.guide-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.guide-card:hover {
  box-shadow: 0 10px 30px -10px rgba(192,165,130, 0.2);
  transform: translateY(-5px);
}

.pillar-btn {
  opacity: 0.7;
}
.pillar-btn.active {
  opacity: 1;
  box-shadow: 0 0 20px rgba(192,165,130, 0.2);
}

.level-node {
  position: relative;
  z-index: 2;
}
/* Chevrons */


/* ══════════════════════════════════════════════════════════
   INTEGRATION ADDITIONS — Added during merge into Cilt-site_8
   Footer, nav dropdown, utility classes, page-body fix
══════════════════════════════════════════════════════════ */

/* ── PAGE BODY (clear fixed header: 48px top-bar + 74px nav) ── */
.page-body {
  padding-top: var(--header-h); /* 122px */
}

/* ── UTILITY CLASSES ──
   !important is required here: these are meant to be final overrides on any
   element (incl. `h2.section-title`, which sets `color: var(--cilt-purple)`
   via a type+class selector with higher specificity than a bare class). Without
   it, `<h2 class="section-title text-white">` on a dark CTA background
   silently loses to the purple default and renders unreadable purple-on-purple
   text (seen on corporate.html/edu.html/membership.html/cpd.html CTA sections). */
.text-gold-accent { color: var(--cilt-gold) !important; }
.text-white       { color: #ffffff !important; }
.text-light       { color: rgba(255, 255, 255, 0.85) !important; }

/* Catalog legend dots */
.badge-mandatory-dot { background-color: var(--cilt-purple); }
.badge-elective-dot  { background-color: #ffd204; }
.badge-optional-dot  { background-color: var(--cilt-gold); }

/* ── NAV DROPDOWN ── */
.nav-dropdown {
  position: relative;
}

.nav-link-has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

.dropdown-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #ffffff;
  border: 1px solid var(--cilt-pale);
  min-width: 270px;
  box-shadow: 0 8px 28px rgba(19, 5, 38, 0.1);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 999;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-link {
  display: block;
  padding: 13px 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cilt-steel);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--cilt-pale);
  transition: background 0.15s, color 0.15s;
}

.nav-dropdown-link:last-child {
  border-bottom: none;
}

.nav-dropdown-link:hover {
  background: rgba(54, 17, 99, 0.04);
  color: var(--cilt-purple);
}

.nav-dropdown-link.active {
  color: var(--cilt-purple);
  background: rgba(54, 17, 99, 0.03);
  border-left: 3px solid var(--cilt-gold);
  padding-left: 17px;
}

/* ══════════════════════════════════════════════════════════
   MOBILE ADAPTATIONS — INTERACTIVE WIZARD & CARD SECTIONS
   Targets all three pages: edu, membership, corporate
══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Section padding ── */
  #navigator-section,
  #checker-section { padding: 56px 0 !important; }

  #faq-section { padding: 64px 0 !important; }

  /* ── Section title sizing ── */
  #navigator-section .section-title,
  #checker-section  .section-title  { font-size: 22px !important; line-height: 1.25 !important; }

  #navigator-section .section-subtitle,
  #checker-section  .section-subtitle { font-size: 14px !important; }

  /* ── Flowchart card padding ── */
  .flowchart-card { padding: 18px !important; border-radius: 12px !important; }

  /* ── Wizard header: stack step-counter + breadcrumbs ── */
  .wizard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }

  /* Breadcrumbs take full width & scroll horizontally if needed */
  .wizard-breadcrumbs {
    width: 100% !important;
    gap: 5px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }

  /* Breadcrumb pills: compact text */
  .wizard-breadcrumbs button {
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  /* ── Slider container: content starts at top, no min-height ── */
  #wizard-slider-container,
  #calc-slider-container,
  #corp-slider-container {
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* ── Question text: smaller margin ── */
  .wizard-question-text {
    font-size: 17px !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
  }

  /* ── Choice cards (edu ДА/НЕТ): tighter padding ── */
  #navigator-section .choice-card { padding: 14px !important; }

  /* ── Choice cards (membership / corporate): tighter ── */
  #checker-section .choice-card { padding: 12px 10px !important; }

  /* ── Result wrapper ── */
  .flowchart-result-wrapper {
    padding: 18px !important;
    margin-top: 18px !important;
    border-radius: 12px !important;
  }

  /* Level card inside result */
  .flowchart-result-wrapper .level-card { padding: 20px !important; }

  /* Stack level-card action buttons */
  .level-card-actions { flex-direction: column !important; gap: 8px !important; }

  /* Chronology header padding */
  .flowchart-result-wrapper [class*="px-6"][class*="py-4"] {
    padding: 12px 14px !important;
  }

  /* ── FAQ: tighter padding ── */
  .faq-trigger { padding: 22px 6px 22px 14px !important; }
  .faq-content p { padding: 0 6px 24px 52px !important; }
  .faq-question { font-size: 15px !important; }

}

@media (max-width: 420px) {

  /* Very small screens */
  .flowchart-card { padding: 14px !important; }
  .flowchart-result-wrapper { padding: 14px !important; }
  .flowchart-result-wrapper .level-card { padding: 16px !important; }

  .wizard-question-text { font-size: 15px !important; }

}

/* Modifier for the actual Education page background */
.edu-hero.education-page-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(192,165,130, 0.3) 0%, transparent 60%),
    linear-gradient(135deg, rgba(19,5,38,0.45) 0%, rgba(30,9,56,0.45) 50%, rgba(54,17,99,0.55) 100%),
    url('img/main-bg.webp') center/cover no-repeat;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Modifier for the Corporate page background */
.edu-hero.corporate-page-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(192,165,130, 0.3) 0%, transparent 60%),
    linear-gradient(135deg, rgba(19,5,38,0.45) 0%, rgba(30,9,56,0.45) 50%, rgba(54,17,99,0.55) 100%),
    url('img/corp-bg-new.webp') top center / cover no-repeat;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Modifier for the Individual Membership page background */
.edu-hero.membership-page-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(192,165,130, 0.3) 0%, transparent 60%),
    linear-gradient(135deg, rgba(19,5,38,0.45) 0%, rgba(30,9,56,0.45) 50%, rgba(54,17,99,0.55) 100%),
    url('img/corp-bg.webp') top center / cover no-repeat;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Единая высота фото-героев (эталон — corporate-page-hero) в одноколоночном
   режиме (.hero-frame стекает в 1 колонку на ≤1024px — граница здесь должна
   совпадать с той же точкой, а не с произвольной "мобильной" 767px, иначе в
   промежутке 768–1024px min-height:660 уже не клэмпит высоту (контент выше
   660 в одну колонку), а десктопный padding у каждой страницы был разный —
   не тянуть 620px там, где контент естественно короче экрана. */
@media (max-width: 1024px) {
  .edu-hero.education-page-hero,
  .edu-hero.corporate-page-hero,
  .edu-hero.membership-page-hero,
  .edu-hero.projects-hero-standard {
    min-height: auto;
    padding: 80px 0 64px;
  }
}



/* ======================================================================
   EDU PAGE - PHASE 3 COMPOSITION (2026-09-19, revised same day)
   Pricing lines - process - proof - collapsed catalog - stat-card links.
   Flat matte surfaces only: no glow, no glass, no gradients.

   REVISION (same day, on user review): the full-width flagship L5 card and
   the 6-column grid it required were REMOVED. At 1280px that card rendered
   1217x337 - a banner, not a card: content stretched thin, dead space
   bottom-right, and the whole "one plan breaks the grid" device reads as
   SaaS pricing rather than an institute. The grid is back to the original
   symmetric 3x2 (.levels-grid near the top of this file). L5 now earns
   flagship status through ORDER (centre of the top row - the classic
   featured slot) plus its solid-purple treatment, which is enough on a
   board of five white cards. For the same reason the 4-cell flat
   .trust-strip was dropped and the original premium stat cards restored.
   ====================================================================== */

/* -- Trained-stats cards are links to the public alumni registry. A number
      a visitor can go and verify is worth more than one they must believe,
      and that registry is the strongest proof asset this site has. -- */
.trained-stat-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  text-decoration: none;
}
.trained-stat-desc { flex-grow: 1; }
/* The recognition card is a <div>, not a link: it has nowhere to go, so the
   cursor stays an arrow. It DOES lift on hover like its three siblings —
   2026-09-20 owner decision: a row of four where three rise and one sits
   still reads as a rendering fault, not as "not clickable". The old
   `.trained-stat-card--static:hover` reset (transform:none etc.) was removed
   for that reason; don't add it back. */
.trained-stat-card--static { cursor: default; }
.trained-stat-card:focus-visible {
  outline: 2px solid var(--cilt-purple);
  outline-offset: 3px;
}
.trained-stat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cilt-purple);
}
.trained-stat-link svg { transition: transform .25s ease; }
.trained-stat-card:hover .trained-stat-link { color: #1a0533; }
.trained-stat-card:hover .trained-stat-link svg { transform: translateX(4px); }

/* Advisory note under the navigator: reuses .wizard-result-disclaimer (dark
   section) but sits BELOW the card, so the margin flips top-side. */
.nav-advisory-note { margin: 20px 0 0; }

/* Institutional anchors, deliberately understated - a quiet caption, not a
   third and fourth stat card competing with our own two numbers. Now holds
   the base fact line plus the "*"/"†" footnotes for cards 3-4 (2026-09-22) -
   one shared border-left block, not one per footnote, so three short lines
   don't read as three separate disclaimers stacked on top of each other. */
.trust-facts-line {
  margin: 22px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--cilt-gold);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cilt-steel);
}
.trust-facts-line p { margin: 0; }
.trust-facts-line p + p { margin-top: 6px; }
/* Footnote markers inside the stat-card desc text: small and gold, never
   red/blue/green (text color rule), never large enough to read as a badge. */
.trained-stat-footnote-mark {
  color: var(--cilt-gold);
  font-weight: 700;
  margin-left: 1px;
}

/* -- Enrollment process -- */
/* Gold rail with nodes: a thin gold line runs the full row and each step hangs
   off a solid gold node (white ring cuts the line - a flat cut-out, not a
   glow). Numerals stay brand purple: gold #C0A582 on white is ~2.4:1, too weak
   for text.

   ALIGNMENT (fixed 2026-09-21): the five steps share three grid rows (number /
   title / text) through SUBGRID. Before, each step laid out its own children,
   so a title that wrapped to two lines ("Документы и зачисление") pushed only
   its own paragraph down. Now the row height is the tallest title and every
   paragraph starts on the same line, whatever wraps. Verify by measuring, not
   by eye: top of number / title / text must be identical across all five.

   MOTION (matte, no glow): on first view the rail draws left to right and the
   steps rise in a stagger (.process-anim / .is-in / .is-done are set by
   initProcessRail() in js/courses-app.js, so without JS everything is simply
   visible). On hover a purple "path travelled" line fills up to the hovered
   node and the nodes before it turn purple (--rail-p and .is-passed, also from
   that function). Hover is decoration only: all information is always visible. */
.process-steps {
  list-style: none;
  margin: 40px 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto 1fr; /* number / title / text */
  column-gap: 32px;
  row-gap: 0;
  position: relative;
}
.process-steps::before,
.process-steps::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  height: 2px;
}
.process-steps::before {
  right: 0;
  background: var(--cilt-gold);
}
/* purple "path travelled" line, width driven from JS on hover */
.process-steps::after {
  width: var(--rail-p, 0px);
  background: var(--cilt-purple);
  transition: width 0.5s var(--ease-out-expo);
  pointer-events: none;
  z-index: 0;
}
.process-step {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-top: 36px;
  transition: transform 0.35s var(--ease-out-expo);
}
.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cilt-gold);
  box-shadow: 0 0 0 5px #ffffff;
  z-index: 1;
  transition: background-color 0.3s ease, transform 0.4s var(--ease-out-expo);
}
.process-step.is-passed::before { background: var(--cilt-purple); }
.process-step-num {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--cilt-purple);
  font-feature-settings: 'tnum';
  margin-bottom: 12px;
}
/* short gold bar under the numeral; grows on hover */
.process-step-num::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 10px;
  background: var(--cilt-gold);
  transition: width 0.35s var(--ease-out-expo);
}
.process-step-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cilt-purple);
}
.process-step-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cilt-steel);
  max-width: 60ch;
}

/* hover: lift + longer bar. Specificity is deliberately higher than the
   entrance rules below, which also set transform. */
.process-steps:not(.process-anim) .process-step:hover,
.process-steps.is-done .process-step:hover { transform: translateY(-4px); }
.process-steps:not(.process-anim) .process-step:hover .process-step-num::after,
.process-steps.is-done .process-step:hover .process-step-num::after { width: 56px; }

/* entrance (only when JS marked the rail as animated) */
.process-anim::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out-expo);
}
.process-anim.is-in::before { transform: scaleX(1); }
.process-anim .process-step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 110ms + 200ms);
}
.process-anim.is-in .process-step { opacity: 1; transform: none; }
.process-anim .process-step::before {
  transform: scale(0);
  transition-delay: calc(var(--i, 0) * 110ms + 200ms), 0s;
}
.process-anim.is-in .process-step::before { transform: scale(1); }
/* once the entrance is over the stagger delays go, or hover would lag */
.process-anim.is-done .process-step,
.process-anim.is-done .process-step::before { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .process-steps::before,
  .process-steps::after,
  .process-step,
  .process-step::before,
  .process-step-num::after {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Browsers without subgrid: fall back to a two-line title box so the
   paragraphs still start on one line for the common one/two-line cases. */
@supports not (grid-template-rows: subgrid) {
  .process-steps { grid-template-rows: none; }
  .process-step { display: block; grid-row: auto; }
  .process-step-title { min-height: 2.6em; }
}

/* -- Proof cards -- 2026-09-22: dropped from 3 to 2 (alumni-registry card
   removed, it duplicated the "Реестр выпускников"/"Наши выпускники" card in
   #trained-stats-section above).
   2026-09-24: back to 3 — the section moved into #supplement-section and
   gained a third card ("Приложение к диплому"), so a 3-slot grid is an
   intentional trio again, not a pair with a hole. */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

/* ── "WHAT YOU GET" SECTION (#supplement-section) ──
   2026-09-24: LIGHT-GREY section (`.section-bg-light` palette), not the
   dark-purple banner first drafted here. Reason: #navigator-section (right
   after this one in the new page order) and #faq-section are both
   hardcoded dark purple by their own `#id` rules elsewhere in this file,
   regardless of any class — a dark supplement-section here would sit flush
   against navigator's dark band with zero separation, breaking the
   light/dark alternation CLAUDE.md asks for. Measured via computed
   background-color per section during verification; do not reintroduce a
   dark fill here without re-checking that full sequence. A two-column intro
   (text + flat document illustration) sits above the .proof-grid trio. */
.supplement-section {
  background-color: #f4f2ee;
}
.supplement-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 56px;
  align-items: center;
  margin-bottom: 48px;
}
.supplement-intro-text .section-eyebrow,
.supplement-intro-text .section-title {
  margin-bottom: 0;
}
.supplement-subtitle {
  margin-top: 16px;
}
.supplement-cta {
  margin-top: 24px;
}

/* Flat, matte "diploma + supplement document" illustration — two stacked
   panels, no gradients/glow/shadow-blur (CLAUDE.md bans glass/glow
   sitewide). Pure CSS + one inline seal icon, decorative (aria-hidden). */
.supplement-illustration {
  position: relative;
  height: 260px;
}
.supplement-doc {
  position: absolute;
  width: 200px;
  border-radius: 10px;
  padding: 22px 20px;
}
.supplement-doc--back {
  top: 0;
  left: 0;
  background: rgba(54,17,99,0.06);
  border: 1px solid rgba(54,17,99,0.12);
  transform: rotate(-6deg);
}
.supplement-doc--front {
  top: 28px;
  left: 64px;
  background: #ffffff;
  border: 1px solid rgba(192,165,130,0.4);
  box-shadow: 0 12px 32px rgba(54,17,99,0.14);
}
.supplement-doc-seal {
  width: 34px;
  height: 34px;
  margin: 0 0 14px auto;
  color: var(--cilt-gold);
}
.supplement-doc-seal svg { width: 100%; height: 100%; }
.supplement-doc-line {
  height: 8px;
  border-radius: 3px;
  background: rgba(54,17,99,0.1);
  margin-bottom: 10px;
}
.supplement-doc--back .supplement-doc-line { background: rgba(54,17,99,0.14); }
.supplement-doc-line--title { width: 70%; height: 10px; background: var(--cilt-gold); }
.supplement-doc--back .supplement-doc-line--title { background: rgba(54,17,99,0.22); }
.supplement-doc-line--short { width: 45%; }
.supplement-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.supplement-doc-row span:first-child {
  flex: 1;
  height: 7px;
  border-radius: 3px;
  background: rgba(54,17,99,0.1);
  margin-right: 10px;
}
.supplement-doc-row--short span:first-child { max-width: 60%; }
.supplement-doc-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(183,212,50,0.18);
  color: #5c6e11;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .supplement-intro { grid-template-columns: 1fr; gap: 32px; }
  /* width MUST be explicit here, not max-width: the two document panels
     inside are both position:absolute (out of flow), so as a grid item with
     auto margins and an auto width this box has no in-flow content to size
     itself by and collapses to 0×0 — auto margins disable grid's default
     justify-self:stretch. An explicit width sidesteps that and still centers
     via the same auto margins. */
  .supplement-illustration { height: 220px; width: 280px; margin: 0 auto; max-width: 100%; }
}
.proof-card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  background: #ffffff;
  border: 1px solid rgba(54,17,99,0.1);
  border-top: 3px solid var(--cilt-gold);
  border-radius: var(--border-radius-card);
  box-shadow: 0 2px 10px rgba(54,17,99,0.08);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.proof-card:hover {
  transform: translateY(-4px);
  border-color: rgba(192,165,130,0.6);
  box-shadow: 0 8px 22px rgba(54,17,99,0.12);
}
.proof-card:focus-visible { outline: 2px solid var(--cilt-purple); outline-offset: 3px; }
.proof-card-icon { width: 32px; height: 32px; color: var(--cilt-purple); stroke-width: 2.5; margin-bottom: 16px; }
.proof-card-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--cilt-purple); }
.proof-card-text { margin: 0 0 20px; font-size: 15px; line-height: 1.45; color: var(--cilt-steel); flex-grow: 1; }
.proof-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cilt-purple);
}
.proof-card-link svg { transition: transform .25s ease; }
.proof-card:hover .proof-card-link svg { transform: translateX(4px); }

/* -- Collapsed module catalog -- */
.modules-toggle { margin: 8px 0 0; }
.modules-collapsible { margin-top: 32px; }
.modules-collapsible[hidden] { display: none; }

/* -- Responsive (levels-grid keeps its own original 1024/768 rules above) -- */
@media (max-width: 1024px) {
  .process-steps { column-gap: 20px; }
  .process-step-num { font-size: 34px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .proof-card { padding: 22px 20px; }
}
/* Rail turns vertical only when five columns no longer fit (~900px): a
   vertical list at 1024px wastes 700px of height beside empty space. */
@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 28px; margin: 32px 0 36px; }
  .process-steps::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 2px; height: auto; }
  .process-steps::after { display: none; } /* no hover path on the vertical list */
  .process-step { display: block; grid-row: auto; padding: 0 0 0 40px; }
  .process-step::before { top: 2px; }
  .process-anim::before { transform: scaleY(0); transform-origin: center top; }
  .process-anim.is-in::before { transform: scaleY(1); }
}
@media (max-width: 767px) {
  .proof-grid { grid-template-columns: 1fr; }
  .trust-facts-line { font-size: 12.5px; }
}