/*
Theme Name:   MedClinica
Template:     generatepress
Theme URI:    https://medclinica.com.ua/
Author:       MedClinica
Author URI:   https://medclinica.com.ua/
Description:  GeneratePress child theme for medclinica.com.ua. Підбір медсестри на дому в Києві. Inherits design system from medservice (see wp/round16-plan.md for provenance).
Version:      0.1.0
Requires PHP: 7.4
Text Domain:  medclinica
*/

/* ─────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (CSS custom properties)
   Source of truth: wp/design-tokens.md
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand colors */
  --color-primary:        #2563eb;   /* blue-600 */
  --color-primary-end:    #4f46e5;   /* indigo-600 */
  --color-primary-hover:  #1d4ed8;   /* blue-700 */
  --color-primary-soft:   #dbeafe;   /* blue-100 */

  /* Accents */
  --color-accent-amber:   #fbbf24;   /* amber-400 */
  --color-accent-green:   #22c55e;   /* green-500 */
  --color-accent-red:     #ef4444;   /* red-500 */
  --color-success-soft:   #dcfce7;   /* green-100 */
  --color-success-text:   #15803d;   /* green-700 */

  /* Text */
  --color-text-heading:   #0f172a;   /* gray-900 */
  --color-text-body:      #374151;   /* gray-700 */
  --color-text-muted:     #6b7280;   /* gray-500 */
  --color-text-subtle:    #9ca3af;   /* gray-400 */

  /* Surfaces */
  --color-bg:             #ffffff;
  --color-bg-soft:        #f9fafb;   /* gray-50 */
  --color-bg-section:     #f8fafc;   /* slate-50 */
  --color-border:         #f3f4f6;   /* gray-100 */
  --color-border-strong:  #e5e7eb;   /* gray-200 */

  /* Typography */
  --font-display: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter',   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing / radius */
  --radius-pill:  9999px;
  --radius-btn:   0.75rem;          /* 12px */
  --radius-card:  1rem;             /* 16px */
  --radius-card-lg: 1.5rem;         /* 24px */
  --radius-bento: 2rem;             /* 32px */

  /* Shadows */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(37,99,235,0.06);
  --shadow-lifted:  0 8px 24px -12px rgba(15,23,42,0.10);
  --shadow-bento:   0 8px 32px -12px rgba(37,99,235,0.10);
  --shadow-cta:     0 8px 22px -8px rgba(37,99,235,0.55);
  --shadow-quiz:    0 20px 50px -12px rgba(37,99,235,0.25), 0 8px 24px -8px rgba(15,23,42,0.10);

  /* Container */
  --container-max:        1200px;
  --container-pad-mobile: 1rem;     /* 16px */
  --container-pad-tablet: 1.5rem;   /* 24px */
  --container-pad-desk:   2rem;     /* 32px */
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BASE TYPOGRAPHY (mobile-first)
   ───────────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "cv02";
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
}

h1, .entry-title { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.375rem); }

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus { color: var(--color-primary-hover); text-decoration: underline; }

p { margin-bottom: 1rem; }

/* Tables (used in money/blog pages) */
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.95rem; }
.entry-content th, .entry-content td { border: 1px solid var(--color-border-strong); padding: 0.625rem 0.75rem; text-align: left; }
.entry-content th { background: var(--color-bg-soft); color: var(--color-text-heading); font-weight: 700; }

/* Lists */
.entry-content ul, .entry-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.entry-content li { margin-bottom: 0.375rem; }

/* Blockquote */
.entry-content blockquote {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-soft);
  padding: 0.875rem 1.125rem;
  margin: 1.25rem 0;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--color-text-body);
}

/* Code */
.entry-content code { background: var(--color-bg-soft); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.9em; }
.entry-content pre { background: var(--color-bg-soft); padding: 1rem; border-radius: var(--radius-card); overflow-x: auto; font-size: 0.85rem; }

/* ─────────────────────────────────────────────────────────────────────────
   3. CONTAINER + LAYOUT
   ───────────────────────────────────────────────────────────────────────── */

.site .grid-container,
.site .inside-article,
.site .inside-page-header,
.site .inside-header { max-width: var(--container-max); }

.entry-content { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }

@media (min-width: 768px) {
  .entry-content { padding-left: var(--container-pad-tablet); padding-right: var(--container-pad-tablet); }
}
@media (min-width: 1024px) {
  .entry-content { padding-left: var(--container-pad-desk); padding-right: var(--container-pad-desk); }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. COMPONENT — BUTTONS
   ───────────────────────────────────────────────────────────────────────── */

.btn,
.btn-primary,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-btn);
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
}

.btn-primary,
.wp-block-button.is-style-primary .wp-block-button__link {
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover,
.btn-primary:focus,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(37,99,235,0.65);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary .arrow,
.btn-primary svg { width: 1rem; height: 1rem; }

.btn-secondary {
  color: var(--color-text-heading);
  background: #fff;
  border: 1.5px solid var(--color-border-strong);
  box-shadow: var(--shadow-card);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   5. COMPONENT — TRUST PILL / BADGES / CARDS
   ───────────────────────────────────────────────────────────────────────── */

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-success-text);
  background: var(--color-success-soft);
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
}
.trust-pill .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--color-accent-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

.price-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--color-text-heading);
  background: var(--color-accent-amber);
  border-radius: var(--radius-pill);
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}
.card--lg { border-radius: var(--radius-card-lg); padding: 1.5rem; }
.card--bento { border-radius: var(--radius-bento); padding: 1.75rem; box-shadow: var(--shadow-bento); }
.card--quiz { box-shadow: var(--shadow-quiz); border-color: var(--color-primary-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   6. HERO (homepage / money pages)
   Markup rendered by template-parts/hero.php
   ───────────────────────────────────────────────────────────────────────── */

/* ── Hero (Round 6 rewrite) ─────────────────────────────────────────── */

.ms-hero {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  padding: 3rem 1.5rem 3.5rem;
  text-align: center;
}
.ms-hero__inner {
  max-width: 640px;
  margin: 0 auto;
}
.ms-hero--home .ms-hero__inner { max-width: 720px; }

@media (min-width: 768px) { .ms-hero { padding: 4rem 2rem 4.5rem; } }
@media (min-width: 1024px) { .ms-hero { padding: 5rem 2rem 5rem; } }

.ms-hero__moz-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.875rem;
  background: var(--color-success-soft);
  color: var(--color-success-text);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.ms-hero__moz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--color-accent-green);
  color: #fff;
  font-weight: 900;
  font-size: 0.6875rem;
}

.ms-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text-heading);
  line-height: 1.05;
  margin: 0 0 1rem;
}
.ms-hero__title--home {
  font-size: clamp(2rem, 6vw, 2.875rem);
}
.ms-hero__title--money .ms-hero__title-line1,
.ms-hero__title--geo   .ms-hero__title-line1 {
  display: block;
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  line-height: 1.1;
}
.ms-hero__title--money .ms-hero__title-line2,
.ms-hero__title--geo   .ms-hero__title-line2 {
  display: block;
  font-size: clamp(2.25rem, 8vw, 3rem);
  line-height: 1.05;
  margin-top: 0.125rem;
}
.ms-hero__title-accent { color: var(--color-primary); }
.ms-hero--home .ms-hero__title-accent { display: inline; }

.ms-hero__subhead {
  font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
  color: var(--color-text-muted);
  margin: 0.5rem auto 1.25rem;
  max-width: 36rem;
  line-height: 1.5;
}
.ms-hero__subhead strong { color: var(--color-text-heading); font-weight: 700; }

.ms-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.5rem 0 1.25rem;
}
.ms-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.ms-hero__chip--price {
  background: var(--color-accent-amber);
  color: var(--color-text-heading);
}
.ms-hero__chip--time {
  background: #fff;
  color: #4b5563;
  border: 1px solid var(--color-border-strong);
}

.ms-hero__trust {
  list-style: none;
  padding: 0;
  margin: 0.75rem auto 1.5rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--color-text-body);
}
.ms-hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ms-hero__trust--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}
.ms-hero__trust-check {
  color: var(--color-accent-green);
  font-weight: 900;
  font-size: 1rem;
}

.ms-hero__cta { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ms-hero__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
}
.ms-hero__cta-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Home Hero — embedded quiz */
.ms-hero__quiz {
  margin: 1.5rem auto 1.25rem;
  max-width: 480px;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-quiz);
  text-align: left;
  scroll-margin-top: 5rem;
}
.ms-hero__quiz .fluentform { background: transparent; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   7. HEADER / SITE TITLE OVERRIDES (GeneratePress)
   ───────────────────────────────────────────────────────────────────────── */

/* Header — fixed 64px, white blur, two-tone logo, mobile hamburger */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  min-height: 64px;
}
.site-header .inside-header {
  min-height: 64px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header .main-title,
.site-header .site-description { display: none !important; }
.site-header .header-image,
.site-header .site-logo { display: none !important; }

body { padding-top: 64px; }

/* Two-tone wordmark logo */
.ms-logo-wrap { display: flex; align-items: center; }
.ms-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem; /* 22px */
  letter-spacing: -0.02em;
  text-decoration: none !important;
  line-height: 1;
}
.ms-logo:hover { text-decoration: none !important; }
.ms-logo__med     { color: #374151; }
.ms-logo__service { color: var(--color-primary); }

/* Header right-side actions (phone + small CTA) */
.ms-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.ms-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: #4b5563;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.ms-header-phone:hover { color: var(--color-primary); background: rgba(37,99,235,0.06); text-decoration: none; }
.ms-header-phone svg { color: var(--color-primary); flex-shrink: 0; }
@media (max-width: 600px) {
  .ms-header-phone__num { display: none; }
  .ms-header-phone { padding: 0.5rem; }
}

.ms-header-cta {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-btn);
  text-decoration: none !important;
  box-shadow: 0 4px 10px -4px rgba(37,99,235,0.45);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.ms-header-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(37,99,235,0.6); }

/* Mobile hamburger button */
.ms-mobile-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ms-mobile-toggle span {
  display: block;
  height: 2px;
  background: var(--color-text-heading);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.ms-mobile-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.ms-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.ms-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
  /* Mobile top bar: logo (in nav) + phone + CTA + burger; menu UL hidden until toggle */
  .main-navigation { display: block !important; }
  .main-navigation .inside-navigation {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
  }
  /* Hide outside-nav duplicates (logo-wrap and outside burger) — nav has its own */
  .site-header > .ms-logo-wrap { display: none !important; }
  .site-header > .ms-mobile-toggle { display: none !important; }
  /* Hide menu UL by default; toggled state opens it as drawer */
  .main-navigation .main-nav,
  .main-navigation #primary-menu { display: none !important; }
  .main-navigation.toggled .main-nav,
  .main-navigation.toggled #primary-menu {
    display: block !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 16px 32px -16px rgba(15,23,42,.18);
    padding: 12px 16px;
    z-index: 100;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .main-navigation.toggled .menu,
  .main-navigation.toggled .sub-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  .main-navigation.toggled .menu > li,
  .main-navigation.toggled .sub-menu > li {
    background: #ffffff !important;
  }
  .main-navigation.toggled .menu {
    display: block !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-navigation.toggled .menu > li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
  }
  .main-navigation.toggled .menu > li:last-child { border-bottom: 0; }
  .main-navigation.toggled .menu > li > a {
    display: block !important;
    padding: 12px 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
  }
  .main-navigation.toggled .sub-menu {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 4px 8px 8px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    grid-template-columns: 1fr !important;
  }
  .main-navigation.toggled .sub-menu li a {
    padding: 8px 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. FLUENT FORMS — Quiz polish to match brand
   ───────────────────────────────────────────────────────────────────────── */

.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="tel"] {
  border-radius: var(--radius-btn) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
  padding: 0.875rem 1rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fluentform .ff-el-form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.10) !important; }

.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.9375rem !important;
  padding: 0.875rem 1.75rem !important;
  box-shadow: var(--shadow-cta) !important;
  cursor: pointer;
}
.fluentform .ff-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(37,99,235,0.65) !important; }

/* Step progress bar */
.ff-step-header { margin-bottom: 1rem; }
.ff-step-header .ff_progress_bar { background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.ff-step-header .ff_progress_bar_fill { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-end)); }

/* Radio cards (for service / city pickers) */
.fluentform .ff-el-form-check { padding: 0.75rem 1rem; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-btn); margin-bottom: 0.5rem; transition: all 0.15s ease; cursor: pointer; }
.fluentform .ff-el-form-check:hover { border-color: var(--color-primary); background: rgba(37,99,235,0.03); }
.fluentform .ff-el-form-check input:checked + label { color: var(--color-primary); font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   9. UTILITIES
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   X. STICKY BOTTOM CTA (mobile only, money + geo pages)
   ───────────────────────────────────────────────────────────────────────── */

.ms-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
          backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px -8px rgba(15,23,42,0.14);
  padding: 0.625rem var(--container-pad-mobile) calc(0.625rem + env(safe-area-inset-bottom));
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translateY(0);
  opacity: 1;
}
/* Hidden state — when quiz is in viewport, JS adds .is-hidden */
.ms-sticky-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
/* Hide entirely on tablet+ */
@media (min-width: 768px) {
  .ms-sticky-cta { display: none; }
}

.ms-sticky-cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.ms-sticky-cta__phone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  border-radius: var(--radius-btn);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.ms-sticky-cta__phone:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  text-decoration: none;
}
.ms-sticky-cta__phone:active { transform: scale(0.95); }
.ms-sticky-cta__phone svg { width: 1.125rem; height: 1.125rem; }

.ms-sticky-cta__btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%);
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-cta);
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.ms-sticky-cta__btn:hover { color: #fff !important; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(37,99,235,0.65); }
.ms-sticky-cta__btn:active { transform: translateY(0) scale(0.98); }
.ms-sticky-cta__btn svg { width: 1rem; height: 1rem; }

/* Add bottom padding to body so sticky CTA never overlaps the footer on mobile */
@media (max-width: 767px) {
  body.has-sticky-cta { padding-bottom: 4.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Y. QUIZ POLISH — radio-as-cards, progress bar, operator avatar
   ───────────────────────────────────────────────────────────────────────── */

/* Wrap the form in a card on the page */
.fluentform { font-family: var(--font-body); }
.fluentform .ff-el-group { margin-bottom: 1rem; }
.fluentform label { font-family: var(--font-body); color: var(--color-text-heading); font-weight: 600; font-size: 0.9375rem; }

/* Radio cards (data-mask added by JS for any radio inside fluentform) */
.fluentform .ff-el-form-check[data-radiocard="1"] {
  display: block;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  margin-bottom: 0.5rem;
  cursor: pointer;
  background: #fff;
  transition: all 0.18s ease;
}
.fluentform .ff-el-form-check[data-radiocard="1"]:hover {
  border-color: var(--color-primary);
  background: rgba(37,99,235,0.03);
}
.fluentform .ff-el-form-check[data-radiocard="1"].is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 4px 12px -4px rgba(37,99,235,0.25);
}
.fluentform .ff-el-form-check[data-radiocard="1"] input[type="radio"] { position: absolute; opacity: 0; }
.fluentform .ff-el-form-check[data-radiocard="1"] label {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-text-heading);
  display: block;
}
.fluentform .ff-el-form-check[data-radiocard="1"].is-selected label { color: var(--color-primary); }

/* Disabled "next/submit" until selection in current step */
.fluentform button[disabled],
.fluentform .ff-btn-submit[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Step 3 — operator banner injected by JS */
.ms-quiz-operator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-btn);
  margin-bottom: 1rem;
}
.ms-quiz-operator__photo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px -3px rgba(37,99,235,0.30);
  flex-shrink: 0;
}
.ms-quiz-operator__text { line-height: 1.3; }
.ms-quiz-operator__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.ms-quiz-operator__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-accent-green);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.20);
}
.ms-quiz-operator__sub {
  font-size: 0.8125rem;
  color: #1e40af;
  margin-top: 0.125rem;
}

/* Thank-you-style success burst (rendered by Fluent Forms confirmation hook) */
.ms-quiz-success {
  text-align: center;
  padding: 1.5rem 0;
}
.ms-quiz-success__check {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4ade80 0%, #059669 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 10px 30px -10px rgba(34,197,94,0.45);
  animation: ms-pulse 1.6s ease-out 1;
  margin-bottom: 1rem;
}
@keyframes ms-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.ms-quiz-success__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-text-heading); margin: 0.5rem 0; }
.ms-quiz-success__sub   { color: var(--color-text-muted); font-size: 0.9375rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Z. HOMEPAGE SECTIONS — services / advantages / cities / final CTA
   ───────────────────────────────────────────────────────────────────────── */

.ms-section {
  padding: 2.5rem var(--container-pad-mobile);
}
@media (min-width: 768px) {
  .ms-section { padding: 3.5rem var(--container-pad-tablet); }
}
@media (min-width: 1024px) {
  .ms-section { padding: 4.5rem var(--container-pad-desk); }
}
.ms-section--soft { background: var(--color-bg-soft); }
.ms-section__inner { max-width: var(--container-max); margin: 0 auto; }
.ms-section__head  { text-align: center; margin-bottom: 2rem; }
.ms-section__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.ms-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  color: var(--color-text-heading);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.ms-section__sub {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* Services grid (6 cards) */
.ms-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
@media (min-width: 600px) { .ms-services-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .ms-services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.ms-service-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none !important;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.18s ease;
}
.ms-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-soft);
  box-shadow: 0 12px 28px -16px rgba(37,99,235,0.25), 0 4px 12px -4px rgba(15,23,42,0.08);
  text-decoration: none;
}
.ms-service-card__icon { font-size: 1.75rem; line-height: 1; }
.ms-service-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-text-heading);
  margin: 0;
  line-height: 1.25;
}
.ms-service-card__price { margin: 0; }
.ms-service-card__cta {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.ms-service-card:hover .ms-service-card__cta { color: var(--color-primary-hover); }

/* Advantages (3 columns) */
.ms-advantages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .ms-advantages { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.ms-advantage {
  text-align: center;
  padding: 1.25rem;
}
.ms-advantage__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 0.875rem;
}
.ms-advantage__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text-heading);
  margin: 0 0 0.375rem;
}
.ms-advantage__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.5;
}

/* Cities grid (6 cards) */
.ms-cities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 600px) { .ms-cities-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .ms-cities-grid { grid-template-columns: repeat(6, 1fr); } }

.ms-city-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem;
  text-align: center;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.18s ease;
}
.ms-city-card:hover {
  border-color: var(--color-primary);
  background: rgba(37,99,235,0.03);
  transform: translateY(-1px);
  text-decoration: none;
}
.ms-city-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-heading);
  margin: 0 0 0.25rem;
}
.ms-city-card__count {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin: 0;
}

/* Breadcrumbs (Rank Math output, custom-wrapped) — left-aligned, matches header container */
.ms-breadcrumbs {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.875rem 16px 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: left;
}
@media (min-width: 768px) {
  .ms-breadcrumbs { padding: 0.875rem 32px 0.5rem; }
}
.ms-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.ms-breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.ms-breadcrumbs .separator { margin: 0 0.375rem; color: var(--color-text-subtle); }
.ms-breadcrumbs .last { color: var(--color-text-heading); font-weight: 600; }
.ms-breadcrumbs .last a { color: var(--color-text-heading); pointer-events: none; }
/* Tablet/desktop padding handled above in single rule (matches header 32px) */

/* Quiz section wrapper (used on home + money + geo) */
.ms-quiz-section {
  scroll-margin-top: 5rem;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(79,70,229,0.06) 100%);
  border-radius: var(--radius-bento);
  border: 1px solid var(--color-primary-soft);
  margin: 2.5rem auto;
  max-width: 640px;
  box-shadow: var(--shadow-quiz);
}
.ms-quiz-section--inline {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.ms-quiz-section h2,
.ms-quiz-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  font-weight: 800;
  color: var(--color-text-heading);
  margin: 0 0 0.25rem;
  text-align: center;
  line-height: 1.2;
}
.ms-quiz-section__sub {
  text-align: center;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
.ms-quiz-section .fluentform { background: transparent; }
@media (min-width: 768px) {
  .ms-quiz-section { padding: 3rem 2.5rem; }
}

/* Service-card description (Round 6) */
.ms-service-card__desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Final CTA — gradient blue→indigo full-width (Round 6) */
.ms-final-cta-grad {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%);
  color: #fff;
  border-radius: var(--radius-bento);
  padding: 3rem 1.75rem;
  text-align: center;
  box-shadow: 0 20px 50px -16px rgba(37,99,235,0.45);
}
.ms-final-cta-grad__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 4.5vw, 2.25rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.625rem;
  line-height: 1.15;
}
.ms-final-cta-grad__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  margin: 0 0 1.5rem;
}
.ms-final-cta-grad__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--color-primary) !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.9375rem 2rem;
  border-radius: var(--radius-btn);
  text-decoration: none !important;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.25);
}
.ms-final-cta-grad__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(0,0,0,0.30); color: var(--color-primary-hover) !important; }
.ms-final-cta-grad__btn svg { width: 1rem; height: 1rem; }

/* Final CTA — old soft variant (Round 3, kept for backwards compat) */
.ms-final-cta {
  text-align: center;
  background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(79,70,229,0.06) 100%);
  border-radius: var(--radius-bento);
  padding: 2.5rem 1.5rem;
}
.ms-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 800;
  color: var(--color-text-heading);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.ms-final-cta__sub {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 0 0 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER (custom, replaces generate_credits)
   ───────────────────────────────────────────────────────────────────────── */

.ms-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 0;
  font-family: var(--font-body);
}
.ms-footer__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}
.ms-footer__menu-list li { margin: 0; }
.ms-footer__menu-list a {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.ms-footer__menu-list a:hover { color: var(--color-primary); text-decoration: underline; }
.ms-footer__copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-subtle);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   AA. E-E-A-T card (rendered by ms_render_eeat_card())
   ───────────────────────────────────────────────────────────────────────── */

.ms-eeat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin: 2rem 0 1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid var(--color-primary-soft);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px -8px rgba(37,99,235,0.18);
}
.ms-eeat-card__avatar {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid #dbeafe;
  background: #fff;
}
.ms-eeat-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ms-eeat-card__info { min-width: 0; flex: 1; }
.ms-eeat-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--color-success-soft);
  color: var(--color-success-text);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}
.ms-eeat-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--color-text-heading);
  line-height: 1.25;
}
.ms-eeat-card__role {
  font-size: 0.875rem;
  color: var(--color-text-body);
  margin-top: 0.125rem;
}
.ms-eeat-card__meta,
.ms-eeat-card__date {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   BB. CONTENT BENTO STYLES (.entry-content)
   ───────────────────────────────────────────────────────────────────────── */

.entry-content h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-primary-soft);
  line-height: 1.25;
}
.entry-content h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;            /* gray-800 */
  margin: 1.5rem 0 0.625rem;
  line-height: 1.3;
}
.entry-content strong { color: var(--color-text-heading); font-weight: 600; }

/* Tables — bento with rounded corners + alternating rows */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-card);
  background: #fff;
}
.entry-content thead { background: var(--color-primary); }
.entry-content th {
  background: var(--color-primary);
  color: #fff;
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-family: var(--font-display);
  border: 0;
}
.entry-content td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  border-left: 0;
  border-right: 0;
}
.entry-content tbody tr:nth-child(even) td { background: var(--color-bg-soft); }
.entry-content tbody tr:hover td { background: rgba(37,99,235,0.05); }
.entry-content tr:last-child td { border-bottom: 0; }

/* Blockquote + Key-Takeaway */
.entry-content blockquote {
  border-left: 4px solid var(--color-primary);
  background: #eff6ff;
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  margin: 1.25rem 0;
  font-style: normal;
  color: var(--color-text-body);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
/* First blockquote on a page → full Key-Takeaway gradient bento */
.entry-content > blockquote:first-of-type,
.entry-content blockquote.ms-key-takeaway,
.entry-content .key-takeaway {
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-card-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

/* Lists with custom blue checkmarks */
.entry-content ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}
.entry-content ul li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin-bottom: 0.25rem;
}
.entry-content ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.25rem;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
}
/* Nested lists revert to default discs to avoid double-checkmarks */
.entry-content ul ul li::before { content: "•"; color: var(--color-text-subtle); }
/* Ordered lists keep numbering */
.entry-content ol { padding-left: 1.5rem; margin: 1rem 0; }
.entry-content ol li { padding: 0.25rem 0; margin-bottom: 0.25rem; }

/* ─────────────────────────────────────────────────────────────────────────
   CC. QUIZ — full UX rewrite (replaces earlier section Y. polish)
   ───────────────────────────────────────────────────────────────────────── */

/* Hide raw radio inputs; the label IS the card */
.fluentform .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fluentform .ff-el-form-check {
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff_list_buttons label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: #fff;
  font-family: var(--font-body) !important;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-text-heading);
  transition: all 0.15s ease;
  margin: 0 !important;
  width: 100%;
  line-height: 1.3;
}

.fluentform .ff-el-form-check-label:hover,
.fluentform .ff_list_buttons label:hover {
  border-color: #93c5fd;       /* blue-300 */
  background: #eff6ff;
}

.fluentform input[type="radio"]:checked + .ff-el-form-check-label,
.fluentform input[type="radio"]:checked + label,
.fluentform .ff_list_buttons input:checked + label {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-hover) !important;
  box-shadow: 0 4px 12px -4px rgba(37,99,235,0.25);
}

/* Submit / Next buttons */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-next,
.fluentform .ff-btn-primary,
.fluentform button[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  padding: 0.875rem 1.75rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  width: 100%;
  border: 0 !important;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-cta) !important;
  margin-top: 0.5rem;
}
.fluentform .ff-btn-submit[disabled],
.fluentform .ff-btn-next[disabled] { opacity: 0.4 !important; cursor: not-allowed !important; }
.fluentform .ff-btn-prev,
.fluentform button.ff-btn-prev {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  border-radius: var(--radius-btn) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.25rem !important;
  box-shadow: none !important;
  width: auto;
}

/* Custom JS-injected progress bar */
.ms-quiz-progress {
  width: 100%;
  height: 6px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 0 0 1.25rem;
}
.ms-quiz-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-end));
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* Operator banner (JS-injected at step 3) */
.ms-operator-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.625rem;
  margin: 0 0 1rem;
}
.ms-operator-banner__img {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
}
.ms-operator-banner__text { font-size: 0.875rem; color: #1e3a8a; line-height: 1.35; }
.ms-operator-banner__text strong { color: #1e3a8a; font-weight: 700; }
.ms-operator-banner__text span   { color: #1e40af; }

/* Success state */
.fluentform .ff-message-success,
.fluentform .ff_success {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-card-lg);
}
.ms-quiz-success {
  text-align: center;
  padding: 1.5rem 0;
}
.ms-quiz-success__check {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4ade80 0%, #059669 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 10px 30px -10px rgba(34,197,94,0.45);
  animation: ms-pulse 0.6s ease-out 1;
  margin-bottom: 0.875rem;
}
@keyframes ms-pulse {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.ms-quiz-success__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-text-heading);
  margin: 0.25rem 0;
}
.ms-quiz-success__sub { color: var(--color-text-muted); font-size: 0.9375rem; }

/* ─────────────────────────────────────────────────────────────────────────
   DD. ARTICLE HEADER (single post)
   ───────────────────────────────────────────────────────────────────────── */

.ms-article-header {
  max-width: 720px;
  margin: 1.25rem auto 1rem;
  padding: 0 var(--container-pad-mobile);
  text-align: left;
}
@media (min-width: 768px) { .ms-article-header { padding: 0 var(--container-pad-tablet); margin-top: 1.75rem; } }

.ms-article-header__cat {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.ms-article-header__cat:hover { background: #bfdbfe; text-decoration: none; }

.ms-article-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 2.625rem);
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 0.875rem;
}

.ms-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.625rem 0;
  margin-bottom: 1rem;
}
.ms-article-header__meta-item--check {
  color: var(--color-success-text);
  font-weight: 600;
}

/* TOC for long posts */
.ms-toc {
  max-width: 720px;
  margin: 1rem auto 1.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-card);
}
.ms-toc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-hover);
  margin-bottom: 0.5rem;
}
.ms-toc__list {
  margin: 0;
  padding-left: 1.5rem;
  color: var(--color-text-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.ms-toc__list li { margin: 0.125rem 0; padding: 0; }
.ms-toc__list li::before { content: none !important; }
.ms-toc__list a { color: var(--color-text-body); text-decoration: none; }
.ms-toc__list a:hover { color: var(--color-primary); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   EE. CLINIC CARDS (geo singles)
   ───────────────────────────────────────────────────────────────────────── */

.ms-clinics {
  padding: 2rem var(--container-pad-mobile);
  background: var(--color-bg-soft);
}
@media (min-width: 768px) { .ms-clinics { padding: 2.5rem var(--container-pad-tablet); } }
@media (min-width: 1024px) { .ms-clinics { padding: 3rem var(--container-pad-desk); } }

.ms-clinics__inner { max-width: var(--container-max); margin: 0 auto; }
.ms-clinics__head  { text-align: center; margin-bottom: 1.5rem; }
.ms-clinics__head .ms-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  color: var(--color-text-heading);
  margin: 0 0 0.375rem;
  line-height: 1.2;
}

.ms-clinics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 600px) { .ms-clinics__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .ms-clinics__grid { grid-template-columns: repeat(4, 1fr); } }

.ms-clinic-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ms-clinic-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lifted); }
.ms-clinic-card__district {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
}
.ms-clinic-card__address,
.ms-clinic-card__hours {
  font-size: 0.8125rem;
  color: var(--color-text-body);
  line-height: 1.4;
  margin: 0.125rem 0;
}
.ms-clinic-card__hours { color: var(--color-text-muted); }

.text-primary  { color: var(--color-primary); }
.text-muted    { color: var(--color-text-muted); }
.text-heading  { color: var(--color-text-heading); }
.bg-soft       { background: var(--color-bg-soft); }
.section       { padding: 3rem 0; }
.section--soft { padding: 3rem 0; background: var(--color-bg-soft); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 7 OVERRIDES — density + quiz UI + service-card layout fixes    ║
   ║ User QA showed: Hero too airy, quiz looks like raw form, service     ║
   ║ cards broken layout. This block intentionally LATE in cascade so it  ║
   ║ wins over earlier sections 6 / Z / CC.                               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── FIX 1: Hero — tighter padding, smaller margins, horizontal trust ── */

.ms-hero {
  padding: 2rem 1.25rem 2.5rem !important;     /* 32 / 20 / 40 */
  max-width: 100% !important;
  text-align: center !important;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%) !important;
}
.ms-hero__inner,
.ms-hero--home .ms-hero__inner { max-width: 560px !important; margin: 0 auto !important; }

@media (min-width: 768px) { .ms-hero { padding: 2.5rem 1.5rem 3rem !important; } }

.ms-hero__moz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #dcfce7; color: #15803d;
  font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 16px !important;
}
.ms-hero__moz-icon {
  width: 14px; height: 14px; min-width: 14px;
  background: #22c55e; color: #fff;
  font-size: 10px; font-weight: 800;
}

.ms-hero__title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 5vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.022em !important;
  margin: 0 0 12px !important;
  color: #0f172a !important;
}
.ms-hero__title-line1 { font-size: inherit !important; line-height: inherit !important; display: block; }
.ms-hero__title-line2 {
  display: block !important;
  color: #2563eb !important;
  font-size: clamp(34px, 7.5vw, 56px) !important;
  line-height: 1.05 !important;
  margin-top: 2px !important;
}
.ms-hero__title-accent { color: #2563eb !important; }
.ms-hero--home .ms-hero__title-accent { display: inline; }

.ms-hero__subhead {
  font-size: 15px !important;
  color: #6b7280;
  margin: 0 auto 12px !important;
  line-height: 1.5;
  max-width: 480px;
}

.ms-hero__chips {
  display: flex !important;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0 !important;
}
.ms-hero__chip {
  padding: 5px 14px !important;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  font-family: var(--font-body) !important;
}
.ms-hero__chip--price { background: #fbbf24; color: #111827; }
.ms-hero__chip--time  { background: #fff; border: 1px solid #e5e7eb; color: #6b7280; }

.ms-hero__trust {
  list-style: none; padding: 0;
  margin: 12px auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  flex-wrap: wrap;
  justify-content: center;
}
.ms-hero__trust li { font-size: 14px !important; color: #374151; display: flex; align-items: center; gap: 4px; }
.ms-hero__trust-check { color: #22c55e; font-weight: 700; font-size: 14px; }

.ms-hero__cta { margin-top: 16px !important; gap: 6px !important; }
.ms-hero__btn {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  color: #fff !important;
  padding: 14px 32px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-top: 8px;
  transition: opacity 0.2s, transform 0.2s !important;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,0.45) !important;
}
.ms-hero__btn:hover { opacity: 0.92; transform: translateY(-1px); }
.ms-hero__cta-sub { font-size: 13px !important; color: #9ca3af !important; margin-top: 8px !important; }

/* ── FIX 2: Quiz — boxed card, real Fluent Forms native selectors ── */

.ms-quiz-section,
.ms-hero__quiz {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  max-width: 520px !important;
  margin: 28px auto !important;
  box-shadow: 0 4px 24px rgba(37,99,235,0.08) !important;
  text-align: left !important;
}
.ms-quiz-section--inline { margin-top: 32px !important; }

.ms-quiz-section h2,
.ms-quiz-section__title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  color: #0f172a !important;
}
.ms-quiz-section__sub {
  font-size: 14px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin: 0 0 20px !important;
}

/* Hide native radio */
.ms-quiz-section .ff-el-form-check input[type="radio"],
.ms-hero__quiz .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="radio"] {
  position: absolute !important; opacity: 0 !important;
  width: 0 !important; height: 0 !important; pointer-events: none !important;
}

/* Card label — works for any label following a hidden radio */
.fluentform .ff-el-form-check {
  margin: 0 0 8px 0 !important; padding: 0 !important;
  border: 0 !important; background: transparent !important;
}
.fluentform .ff-el-form-check-label,
.fluentform .ff_list_buttons label,
.fluentform .ff-el-form-check label {
  display: flex !important;
  align-items: center !important;
  padding: 11px 16px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #374151 !important;
  margin: 0 !important;
  width: 100% !important;
  user-select: none;
  transition: all 0.15s ease !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}
.fluentform .ff-el-form-check-label:hover,
.fluentform .ff_list_buttons label:hover { border-color: #93c5fd !important; background: #eff6ff !important; }
.fluentform .ff-el-form-check input[type="radio"]:checked + .ff-el-form-check-label,
.fluentform .ff-el-form-check input[type="radio"]:checked + label,
.fluentform .ff_list_buttons input:checked + label {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px -4px rgba(37,99,235,0.25) !important;
}

/* City picker — 2 columns */
.ms-quiz-section .ff-el-group:nth-of-type(2) .ff-el-form-check,
.ms-hero__quiz   .ff-el-group:nth-of-type(2) .ff-el-form-check {
  display: inline-block !important;
  width: calc(50% - 4px) !important;
  vertical-align: top;
}
.ms-quiz-section .ff-el-group:nth-of-type(2) .ff-el-form-check:nth-child(odd),
.ms-hero__quiz   .ff-el-group:nth-of-type(2) .ff-el-form-check:nth-child(odd) {
  margin-right: 4px !important;
}

/* Inputs */
.fluentform input[type="text"],
.fluentform input[type="tel"],
.fluentform input[type="email"] {
  width: 100% !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  box-shadow: none !important;
}
.fluentform input:focus { border-color: #2563eb !important; }

/* Field labels */
.fluentform .ff-el-input--label label,
.fluentform .ff-field_container > label {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: var(--font-body) !important;
}

/* Submit / Next */
.fluentform .ff-btn-submit,
.fluentform .ff-btn-next,
.fluentform .ff-btn-primary,
.fluentform button[type="submit"] {
  width: 100% !important;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 15px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  margin-top: 8px !important;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,0.45) !important;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-next:hover,
.fluentform .ff-btn-primary:hover { opacity: 0.92; transform: none !important; }

/* Prev button */
.fluentform .ff-btn-prev {
  width: auto !important;
  background: transparent !important;
  color: #6b7280 !important;
  border: 1.5px solid #e5e7eb !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  box-shadow: none !important;
  margin-right: 8px !important;
}

/* ── FIX 4: Section spacing — tighter ────────────────────────────────── */

.ms-section {
  padding: 40px 20px !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}
.ms-section + .ms-section { padding-top: 0 !important; }
.ms-section--soft {
  background: #f8fafc !important;
  max-width: 100% !important;       /* full-width grey band */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ms-section--soft .ms-section__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px !important;
}
.ms-section__inner { max-width: 960px; margin: 0 auto; }
.ms-section__head  { text-align: center; margin-bottom: 24px !important; }

.ms-section__label,
.ms-section__eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #2563eb !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
  display: inline-block;
}
.ms-section__title {
  font-size: clamp(22px, 4vw, 32px) !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.ms-section__sub {
  font-size: 15px !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* ── FIX 3: Service cards — auto-fit grid + flex column inside ──────── */

.ms-services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.ms-service-card {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
  cursor: pointer !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.ms-service-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,0.12) !important;
  border-color: #bfdbfe !important;
  text-decoration: none !important;
}

.ms-service-card__icon {
  font-size: 32px !important;
  margin-bottom: 12px !important;
  line-height: 1 !important;
}
.ms-service-card__body { flex: 1 1 auto; min-width: 0; }
.ms-service-card__name {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  line-height: 1.25;
}
.ms-service-card__price {
  display: inline-block !important;
  background: #fbbf24 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 8px !important;
  font-family: var(--font-body) !important;
}
.ms-service-card__desc {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.4;
}
.ms-service-card__link {
  font-size: 13px !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  margin-top: 12px !important;
}

/* ── FIX 5: Advantages + Cities — compact ────────────────────────────── */

.ms-advantages {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 20px !important;
}
.ms-advantage,                 /* legacy class from Round 3 */
.ms-advantage-card {           /* new Round 7 class */
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 20px !important;
  text-align: center !important;
}
.ms-advantage__icon,
.ms-advantage-card__icon {
  font-size: 28px !important;
  margin-bottom: 10px !important;
  width: auto !important; height: auto !important;
  background: transparent !important;
  display: inline-block !important;
}
.ms-advantage__title,
.ms-advantage-card__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 0 6px !important;
  color: #0f172a !important;
}
.ms-advantage__text,
.ms-advantage-card__text {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.4;
}

.ms-cities-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}
@media (max-width: 600px) { .ms-cities-grid { grid-template-columns: repeat(2, 1fr) !important; } }

.ms-city-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s, transform 0.15s !important;
  display: block !important;
  box-shadow: none !important;
}
.ms-city-card:hover { border-color: #2563eb !important; transform: translateY(-2px) !important; text-decoration: none !important; }
.ms-city-card__name {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0f172a !important;
  display: block !important;
  margin: 0 !important;
}
.ms-city-card__count {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-top: 4px !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 8 OVERRIDES — buroonlineua.com level UI                        ║
   ║ • Stats bar after Hero                                               ║
   ║ • Service cards horizontal (icon | body | arrow)                     ║
   ║ • 3-steps section (numbered cards)                                   ║
   ║ • Home: kill leftover sidebar (CSS safety net)                       ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Sidebar safety net — even if PHP filter misses, CSS hides it on home */
.home .widget-area,
.home .sidebar.is-right-sidebar,
.home .sidebar.is-left-sidebar { display: none !important; }
.home .site-content .content-area,
.home .site-main { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ── Stats bar ───────────────────────────────────────────────────────── */
.ms-stats-bar { background: #fff; border-bottom: 1px solid #e5e7eb; }
.ms-stats-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ms-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1; min-width: 120px;
}
.ms-stat__num {
  font-size: 1.5rem; font-weight: 700;
  color: #2563eb;
  font-family: var(--font-display);
  line-height: 1.1;
}
.ms-stat__label { font-size: 0.75rem; color: #6b7280; text-align: center; }

/* ── Service cards — Round 8 horizontal layout ───────────────────────── */
.ms-services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}
.ms-service-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: box-shadow .2s, border-color .2s, transform .15s !important;
  box-shadow: none !important;
}
.ms-service-card:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,.12) !important;
  border-color: #93c5fd !important;
  transform: none !important;
  text-decoration: none !important;
}
.ms-service-card__icon {
  font-size: 1.625rem !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.ms-service-card__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ms-service-card__name {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: #111827 !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}
.ms-service-card__price {
  display: inline-block !important;
  background: transparent !important;
  color: #2563eb !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.ms-service-card__desc {
  font-size: 0.75rem !important;
  color: #9ca3af !important;
  margin: 4px 0 0 !important;
  line-height: 1.35;
}
.ms-service-card__arrow,
.ms-service-card__link {
  color: #9ca3af !important;
  font-size: 1.125rem !important;
  flex-shrink: 0 !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
}
.ms-service-card:hover .ms-service-card__arrow { color: #2563eb !important; }

/* ── Steps section (3 numbered cards) ────────────────────────────────── */
.ms-steps {
  background: #f0f7ff;
  padding: 48px 0;
  margin: 0;
}
.ms-steps__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ms-steps__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 32px;
  color: #111827;
}
.ms-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) { .ms-steps__grid { grid-template-columns: 1fr; } }
.ms-step {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ms-step__num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-step__icon { font-size: 2.5rem; margin: 8px 0 12px; line-height: 1; }
.ms-step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 8px;
  color: #111827;
}
.ms-step__desc { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin: 0; }

/* ── Spacing tighten — Round 8 ───────────────────────────────────────── */
.ms-section { padding: 48px 20px !important; }
@media (max-width: 768px) { .ms-section { padding: 32px 16px !important; } }
.ms-hero { padding-top: 32px !important; }
@media (min-width: 768px) { .ms-hero { padding-top: 40px !important; } }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 8b — QUIZ UI like buroonlineua.com (2-step: urgency → contacts) ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Quiz card wrapper polish (override Round 7) */
.ms-quiz-section,
.ms-hero__quiz {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  max-width: 540px !important;
  margin: 24px auto !important;
  box-shadow: 0 8px 32px -12px rgba(37,99,235,.18) !important;
  text-align: left !important;
}

/* Step header / question */
.fluentform .ff-el-input--label label,
.fluentform .ff-field_container > label {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.fluentform .ff-el-help-message {
  font-size: 14px !important;
  color: #6b7280 !important;
  margin: 0 0 16px !important;
  font-weight: 400 !important;
}

/* Urgency cards — taller, with icon + body layout */
.ms-quiz-urgency .ff-el-form-check,
.fluentform .ff-el-form-check {
  position: relative !important;
  margin: 0 0 10px 0 !important;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff_list_buttons label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #111827 !important;
  margin: 0 !important;
  width: 100% !important;
  transition: all .15s ease !important;
  line-height: 1.3 !important;
  position: relative !important;
}

/* Per-option icon — inserted via ::before */
.fluentform input[value="today"] + label::before,
.fluentform input[value="tomorrow"] + label::before,
.fluentform input[value="week"] + label::before {
  content: "";
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
}
.fluentform input[value="today"]    + label::before { background-color: #fee2e2; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>"); }
.fluentform input[value="tomorrow"] + label::before { background-color: #fef3c7; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.fluentform input[value="week"]     + label::before { background-color: #dbeafe; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }

/* Two-line label content: split «Title · sub» on the « · » separator */
/* (CSS can't split text — Fluent Forms label remains inline, so the separator
    is visible but compact.) */

/* Per-option badge — inserted via ::after, positioned top-right of card */
.fluentform input[value="today"] + label::after,
.fluentform input[value="tomorrow"] + label::after {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--font-display);
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.18);
}
.fluentform input[value="today"]    + label::after { content: "Найшвидше"; background: #ef4444; color: #fff; }
.fluentform input[value="tomorrow"] + label::after { content: "Популярно";  background: #fbbf24; color: #78350f; }

/* Hover */
.fluentform .ff-el-form-check-label:hover,
.fluentform .ff_list_buttons label:hover {
  border-color: #93c5fd !important;
  background: #f8fbff !important;
  transform: translateY(-1px);
}

/* Checked state — blue ring */
.fluentform input[type="radio"]:checked + label,
.fluentform .ff_list_buttons input:checked + label {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 8px 22px -10px rgba(37,99,235,.45) !important;
}
.fluentform input[type="radio"]:checked + label::before {
  box-shadow: 0 0 0 2px #2563eb;
}

/* Step 2 — contacts: pre-step banner («Підтверджено час») injected by JS */
.ms-quiz-confirm {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.ms-quiz-confirm__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 16px;
}
.ms-quiz-confirm__text { font-size: 13.5px; line-height: 1.35; color: #1e3a8a; font-weight: 600; }
.ms-quiz-confirm__sub  { font-size: 12px; color: #1e40af; font-weight: 400; margin-top: 2px; }

/* Footer guarantee line */
.ms-quiz-foot {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin-top: 14px;
}

/* Progress bar — clean blue gradient over light gray track */
.fluentform .ff_progress_bar,
.ff-step-header .ff_progress_bar {
  background: #e5e7eb !important;
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}
.fluentform .ff_progress_bar_fill {
  background: linear-gradient(90deg, #2563eb, #4f46e5) !important;
  border-radius: 999px !important;
  transition: width .35s ease !important;
}

/* Submit button gets full-width gradient (already set, ensure consistency) */
.ms-quiz-section .ff-btn-submit,
.ms-hero__quiz   .ff-btn-submit { margin-top: 12px !important; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 8c — QUIZ UI v3 (DOM-built cards, JS multi-step, full polish)  ║
   ║ Use VERY late + !important to win over Rounds 7/8/8b                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Container */
.ms-quiz-section,
.ms-hero__quiz {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  max-width: 540px !important;
  margin: 24px auto !important;
  box-shadow: 0 8px 32px -12px rgba(37,99,235,.18) !important;
  text-align: left !important;
}
@media (max-width: 480px) {
  .ms-quiz-section, .ms-hero__quiz { padding: 20px 16px !important; border-radius: 16px !important; }
}

/* Question label / help */
.ms-quiz-section .fluentform .ff-el-input--label label,
.ms-hero__quiz   .fluentform .ff-el-input--label label,
.ms-quiz-section .fluentform .ff-field_container > label,
.ms-hero__quiz   .fluentform .ff-field_container > label {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 4px 0 6px !important;
  display: block !important;
  letter-spacing: -0.01em !important;
}
.ms-quiz-section .fluentform .ff-el-help-message,
.ms-hero__quiz   .fluentform .ff-el-help-message {
  font-size: 14px !important;
  color: #6b7280 !important;
  margin: 0 0 16px !important;
  font-weight: 400 !important;
}

/* Hide the asterisk that FF appends after the urgency label */
.ms-quiz-step--1 .ff-el-input--label label::after { content: none !important; }

/* Wrapping ff-el-form-check — strip its own background/border */
.ms-quiz-section .ff-el-form-check,
.ms-hero__quiz   .ff-el-form-check {
  position: relative !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* The card label (now class .ms-card via JS) */
.ms-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 16px !important;
  background: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  width: 100% !important;
  transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.ms-card:hover {
  border-color: #93c5fd !important;
  background: #f8fbff !important;
}
.ms-card.is-selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 8px 22px -10px rgba(37,99,235,.45) !important;
}

/* Icon box */
.ms-card__icon {
  flex-shrink: 0 !important;
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  background: #eff6ff;
}
.ms-card__icon svg { width: 24px; height: 24px; display: block; }
.ms-card__icon--today    { background: #fee2e2 !important; }
.ms-card__icon--tomorrow { background: #dbeafe !important; }
.ms-card__icon--week     { background: #dbeafe !important; }
.ms-card.is-selected .ms-card__icon { box-shadow: 0 0 0 2px #2563eb !important; }

/* Body — title + sub */
.ms-card__body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.ms-card__title {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  line-height: 1.2 !important;
}
.ms-card__sub {
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

/* Top-right badge */
.ms-card__badge {
  position: absolute !important;
  top: -10px !important;
  right: 14px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-family: var(--font-display) !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.18) !important;
}
.ms-card__badge--red   { background: #ef4444 !important; color: #fff !important; }
.ms-card__badge--amber { background: #fbbf24 !important; color: #78350f !important; }

/* Custom Next + Back buttons */
.ms-quiz-next {
  width: 100% !important;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .1s !important;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,.45) !important;
  margin-top: 14px !important;
}
.ms-quiz-next:hover { opacity: .92; transform: translateY(-1px); }
.ms-quiz-next:disabled { opacity: .4 !important; cursor: not-allowed !important; transform: none !important; }

.ms-quiz-back {
  background: transparent !important;
  border: 1.5px solid #e5e7eb !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  margin-right: 8px !important;
  cursor: pointer !important;
  margin-bottom: 8px;
}

/* Native FF submit kept for step 2 (gets full width gradient already) */

/* Footer guarantee text */
.ms-quiz-foot {
  text-align: center !important;
  font-size: 12px !important;
  color: #9ca3af !important;
  margin-top: 14px !important;
}

/* Step 2 confirm banner */
.ms-quiz-confirm {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin: 0 0 16px !important;
}
.ms-quiz-confirm__icon {
  flex-shrink: 0 !important;
  width: 32px !important; height: 32px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-weight: 900 !important; font-size: 16px !important;
}
.ms-quiz-confirm__text { font-size: 14px !important; line-height: 1.3 !important; color: #1e3a8a !important; font-weight: 700 !important; }
.ms-quiz-confirm__sub  { font-size: 12px !important; color: #1e40af !important; font-weight: 400 !important; margin-top: 2px !important; }

/* Progress bar */
.ms-quiz-progress {
  width: 100% !important;
  height: 6px !important;
  background: #e5e7eb !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
}
.ms-quiz-progress__bar {
  height: 100% !important;
  background: linear-gradient(90deg, #2563eb, #4f46e5) !important;
  border-radius: inherit !important;
  transition: width .35s ease !important;
}

/* Inputs (step 2) */
.ms-quiz-section .fluentform input[type="text"],
.ms-quiz-section .fluentform input[type="tel"],
.ms-hero__quiz   .fluentform input[type="text"],
.ms-hero__quiz   .fluentform input[type="tel"] {
  width: 100% !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  transition: border-color .15s !important;
  box-shadow: none !important;
}
.ms-quiz-section .fluentform input:focus,
.ms-hero__quiz   .fluentform input:focus { border-color: #2563eb !important; }

/* Hide FF's own non-multi-step submit when on step 1 (handled via JS show/hide,
   but ensure no flash at load) */
.ms-quiz-step--submit { transition: opacity .15s; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 9 — VANILLA QUIZ (no Fluent Forms). Wins over all prior rules. ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Hero embed wrapper */
.ms-hero__quiz {
  margin: 24px auto 0 !important;
  max-width: 540px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Quiz card container */
.ms-quiz {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px -12px rgba(37,99,235,.18);
  text-align: left;
  font-family: var(--font-body);
}
@media (max-width: 480px) { .ms-quiz { padding: 20px 16px; border-radius: 16px; } }

/* Progress segments (2) */
.ms-quiz__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.ms-quiz__seg {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
  transition: background .35s ease;
}
.ms-quiz__seg.is-active {
  background: linear-gradient(90deg, #2563eb, #4f46e5);
}

/* Step container (vanilla; no FF leftovers) */
.ms-quiz__step { display: block; }
.ms-quiz__step[hidden] { display: none !important; }

/* Title + sub */
.ms-quiz__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.ms-quiz__sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 16px;
  line-height: 1.4;
}

/* Cards stack */
.ms-quiz__cards { display: flex; flex-direction: column; gap: 10px; }

.ms-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.ms-card:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}
.ms-card.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 8px 22px -10px rgba(37,99,235,.45);
}

.ms-card__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-card__icon svg { width: 24px; height: 24px; display: block; }
.ms-card__icon--today    { background: #fee2e2; }
.ms-card__icon--tomorrow { background: #dbeafe; }
.ms-card__icon--week     { background: #dbeafe; }
.ms-card.is-selected .ms-card__icon { box-shadow: 0 0 0 2px #2563eb; }

.ms-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ms-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}
.ms-card__sub {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
}

.ms-card__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--font-display);
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.18);
}
.ms-card__badge--red   { background: #ef4444; color: #fff; }
.ms-card__badge--amber { background: #fbbf24; color: #78350f; }

/* Foot guarantee */
.ms-quiz__foot {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin: 14px 0 0;
}

/* Step 2 confirm banner */
.ms-quiz__confirm {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.ms-quiz__confirm-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
}
.ms-quiz__confirm-text {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: #1e3a8a;
  font-weight: 700;
}
.ms-quiz__confirm-sub {
  display: block;
  font-size: 12px;
  color: #1e40af;
  margin-top: 2px;
}

/* Form fields */
.ms-quiz__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ms-quiz__field { display: flex; flex-direction: column; gap: 6px; }
.ms-quiz__field-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ms-quiz__field-label small {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.ms-quiz__req { color: #ef4444; }
.ms-quiz__field input {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
  color: #111827;
}
.ms-quiz__field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ms-quiz__field input.is-error { border-color: #ef4444; }
.ms-quiz__error { color: #ef4444; font-size: 12px; font-weight: 500; }

.ms-quiz__submit {
  width: 100%;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,.45);
  margin-top: 4px;
}
.ms-quiz__submit:hover { opacity: .92; transform: translateY(-1px); }
.ms-quiz__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ms-quiz__privacy {
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  margin: 4px 0 0;
}

.ms-quiz__back {
  background: transparent;
  border: 0;
  color: #6b7280;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  margin-top: 16px;
  padding: 6px 0;
}
.ms-quiz__back:hover { color: #2563eb; }

/* Success step */
.ms-quiz-success {
  text-align: center;
  padding: 12px 0 8px;
}
.ms-quiz-success__check {
  width: 72px; height: 72px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4ade80 0%, #059669 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 900;
  box-shadow: 0 12px 30px -10px rgba(34,197,94,.45);
  animation: ms-pulse-9 .6s ease-out 1;
  margin-bottom: 14px;
}
@keyframes ms-pulse-9 {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ms-quiz-success__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
}
.ms-quiz-success__sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}
.ms-quiz-success__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
}

/* Suppress any leftover Fluent Forms render that might still be in body content */
.ms-quiz-section .fluentform { display: none; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 10 — REFERENCE BLOCK PORTS                                     ║
   ║ Direct ports of App.tsx sections: stats / benefits / price card /    ║
   ║ how-it-works bento / doctors carousel / reviews slider / final CTA   ║
   ║ + quiz operator banner.                                              ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── QUIZ — operator banner (Step 0 from Step0Intro.tsx) ─────────────── */
.ms-quiz__operator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 70%, rgba(239,246,255,.5) 100%);
  border: 2px solid #bfdbfe;
  border-radius: 16px;
}
.ms-quiz__operator-photo { position: relative; flex-shrink: 0; }
.ms-quiz__operator-photo img {
  width: 44px; height: 44px;
  border-radius: 999px;
  object-fit: cover; object-position: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px -3px rgba(37,99,235,.30);
  display: block;
}
.ms-quiz__operator-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #22c55e;
  border-radius: 999px;
  border: 2px solid #fff;
}
.ms-quiz__operator-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.ms-quiz__operator-name { font-size: 15px; font-weight: 700; color: #1e3a8a; }
.ms-quiz__operator-msg  { font-size: 13px; color: #1e40af; margin-top: 2px; }
.ms-quiz__operator-tail {
  position: absolute;
  left: 28px; bottom: -7px;
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  border-right: 2px solid #bfdbfe;
  border-bottom: 2px solid #bfdbfe;
  transform: rotate(45deg);
}

/* ── STATS bento (3 cells in soft gradient card) ─────────────────────── */
.ms-section--stats { padding-top: 24px !important; padding-bottom: 24px !important; }
.ms-stats-bento {
  background: linear-gradient(135deg, #f9fafb 0%, rgba(239,246,255,.4) 50%, rgba(238,242,255,.3) 100%);
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  padding: 18px;
}
.ms-stats-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ms-stat-cell { text-align: center; }
.ms-stat-cell__num {
  font-family: var(--font-display);
  font-size: clamp(22px, 4.5vw, 28px);
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  margin-bottom: 4px;
}
.ms-stat-cell__star { color: #fbbf24; font-size: .9em; }
.ms-stat-cell__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── BENEFITS — 3 cards with colored gradient icon plates ────────────── */
.ms-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) { .ms-benefits { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.ms-benefit {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 8px 24px -12px rgba(15,23,42,.10);
  transition: transform .2s, box-shadow .2s;
}
@media (min-width: 768px) { .ms-benefit { flex-direction: column; align-items: stretch; } }
.ms-benefit:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(15,23,42,.16); }
.ms-benefit__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.ms-benefit__icon svg { width: 26px; height: 26px; }
.ms-benefit__icon--blue  { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.ms-benefit__icon--green { background: linear-gradient(135deg, #f0fdf4, #d1fae5); }
.ms-benefit__icon--amber { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ms-benefit__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.2;
}
.ms-benefit__text {
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.5;
}

/* ── PRICE CARD — gradient blue with striked + amber «Найпопулярніше» ── */
.ms-price-card {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #4f46e5 100%);
  border-radius: 28px;
  padding: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 24px 0 0;
  box-shadow: 0 20px 50px -16px rgba(37,99,235,.45);
}
.ms-price-card::before {
  content: "";
  position: absolute;
  right: -50px; top: -50px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  pointer-events: none;
}
.ms-price-card::after {
  content: "";
  position: absolute;
  left: -40px; bottom: -50px;
  width: 130px; height: 130px;
  background: rgba(34,211,238,.20);
  border-radius: 999px;
  filter: blur(40px);
  pointer-events: none;
}
.ms-price-card > * { position: relative; z-index: 1; }
.ms-price-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.ms-price-card__proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(219,234,254,.95);
}
.ms-price-card__proof-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.ms-price-card__hit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #fbbf24;
  color: #78350f;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ms-price-card__name { font-size: 14px; font-weight: 700; color: #dbeafe; margin-bottom: 4px; }
.ms-price-card__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ms-price-card__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 11vw, 48px);
  font-weight: 900;
  line-height: 1;
}
.ms-price-card__cur { font-size: 18px; font-weight: 700; }
.ms-price-card__old {
  font-size: 14px;
  color: rgba(191,219,254,.8);
  text-decoration: line-through;
  margin-left: 4px;
}
.ms-price-card__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
  color: #f0f9ff;
  margin-bottom: 16px;
}
.ms-price-card__guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.ms-price-card__guarantee-icon { font-size: 16px; flex-shrink: 0; }
.ms-price-card__guarantee span:last-child {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.ms-price-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #fff;
  color: #1d4ed8 !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.25);
  transition: transform .12s, box-shadow .2s;
}
.ms-price-card__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(0,0,0,.3); }

/* ── HOW IT WORKS — bento blue tinted with amber 01/02/03 numbers ────── */
.ms-section--how { padding: 32px 20px !important; }
.ms-how-bento {
  background: linear-gradient(180deg, rgba(239,246,255,.6) 0%, rgba(238,242,255,.4) 100%);
  border: 1px solid rgba(191,219,254,.6);
  border-radius: 32px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px -12px rgba(37,99,235,.10);
}
.ms-how__head { text-align: center; margin-bottom: 22px; }
.ms-how__list { display: flex; flex-direction: column; gap: 12px; }
.ms-how-step {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 4px 16px -6px rgba(15,23,42,.08);
}
.ms-how-step__icon-wrap { position: relative; flex-shrink: 0; }
.ms-how-step__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -2px rgba(37,99,235,.35);
}
.ms-how-step__icon svg { width: 22px; height: 22px; }
.ms-how-step__num {
  position: absolute;
  top: -6px; right: -6px;
  width: 24px; height: 24px;
  background: #fbbf24;
  color: #78350f;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.ms-how-step__body { flex: 1; min-width: 0; padding-top: 2px; }
.ms-how-step__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 4px;
}
.ms-how-step__desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

/* ── DOCTORS — horizontal scroll carousel ────────────────────────────── */
.ms-section--doctors { background: rgba(248,250,252,.6); padding-bottom: 32px !important; }
.ms-doctors-scroll {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
}
.ms-doctors-scroll__inner {
  display: flex;
  gap: 12px;
  padding: 4px 20px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ms-doctors-scroll__inner::-webkit-scrollbar { display: none; }
.ms-doctor-card {
  flex-shrink: 0;
  width: 160px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 18px;
  padding: 16px 12px;
  text-align: center;
  scroll-snap-align: start;
  box-shadow: 0 2px 8px -2px rgba(15,23,42,.06);
}
.ms-doctor-card__avatar {
  width: 64px; height: 64px;
  border-radius: 999px;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px #eff6ff;
}
.ms-doctor-card__name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  line-height: 1.2;
}
.ms-doctor-card__spec { font-size: 11.5px; color: #2563eb; font-weight: 700; }
.ms-doctor-card__exp  { font-size: 10.5px; color: #9ca3af; margin: 4px 0 8px; }
.ms-doctor-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  background: #f9fafb;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ── REVIEWS — header w/ Google badge + slider ───────────────────────── */
.ms-section--reviews { padding-top: 32px !important; }
.ms-reviews-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 18px;
}
.ms-reviews-head__stars {
  color: #fbbf24;
  letter-spacing: 1px;
  font-size: 18px;
}
.ms-reviews-head__num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}
.ms-reviews-head__google {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.ms-reviews-head__count { font-size: 13px; color: #6b7280; }

.ms-reviews-slider {
  position: relative;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  box-shadow: 0 8px 24px -12px rgba(15,23,42,.10);
  padding: 24px 20px 18px;
}
.ms-review-card { display: none; }
.ms-review-card.is-active { display: block; }
.ms-review-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ms-review-card__avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ms-review-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: #0f172a;
  line-height: 1.1;
}
.ms-review-card__role { font-size: 12px; color: #6b7280; margin-top: 2px; }
.ms-review-card__stars {
  margin-left: auto;
  color: #fbbf24;
  font-size: 13px;
  letter-spacing: 1px;
}
.ms-review-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  margin: 0;
}
.ms-reviews-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.ms-reviews-dots button {
  width: 7px; height: 7px;
  border-radius: 999px;
  border: 0;
  background: #d1d5db;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}
.ms-reviews-dots button.is-active { background: #2563eb; transform: scale(1.3); }

/* ── FINAL CTA — gradient + 3 messengers (from App.tsx FINAL CTA) ────── */
.ms-section--final { background: rgba(248,250,252,.6); }
.ms-final-cta-grad {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #4f46e5 100%);
  color: #fff;
  border-radius: 32px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 20px 50px -16px rgba(37,99,235,.45);
  position: relative;
  overflow: hidden;
}
.ms-final-cta-grad__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.15;
  color: #fff;
}
.ms-final-cta-grad__sub {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin: 0 0 18px;
}
.ms-final-cta-grad__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #1d4ed8 !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 14px;
  text-decoration: none !important;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.25);
}
.ms-final-cta-grad__or {
  margin: 16px 0 10px;
  font-size: 11px;
  color: rgba(255,255,255,.7);
}
.ms-messengers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ms-messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 12px;
  color: #fff !important;
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none !important;
  transition: transform .1s;
}
.ms-messenger:hover { transform: translateY(-1px); color: #fff !important; }
.ms-messenger--viber    { background: #7360F2; }
.ms-messenger--telegram { background: #0088cc; }
.ms-messenger--whatsapp { background: #25D366; }
.ms-final-cta-grad__trust {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}

/* ── Section title spacing tighten (override Round 7/8) ──────────────── */
.ms-section__head { margin-bottom: 18px !important; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 11 — REVIEWS w/ side arrows + DOCTORS bigger ring + FAQ        ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* ── Section head — left-aligned variant for FAQ ──────────────────────── */
.ms-section__head--left { text-align: left !important; }

/* ── REVIEWS — frame with side arrows + offwhite card + bigger dots ──── */
.ms-section--reviews { padding: 32px 20px !important; }

.ms-reviews-frame {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 18px;
}
.ms-reviews-track {
  background: #f8fafc;
  border-radius: 24px;
  padding: 28px 28px;
  min-height: 180px;
}
@media (max-width: 480px) {
  .ms-reviews-track { padding: 22px 20px; border-radius: 20px; }
  .ms-reviews-frame { padding: 0; }
}

.ms-reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.15);
  transition: color .15s, border-color .15s, transform .12s;
}
.ms-reviews-arrow:hover { color: #2563eb; border-color: #93c5fd; transform: translateY(-50%) scale(1.05); }
.ms-reviews-arrow:active { transform: translateY(-50%) scale(.95); }
.ms-reviews-arrow svg { width: 18px; height: 18px; }
.ms-reviews-arrow--prev { left: -8px; }
.ms-reviews-arrow--next { right: -8px; }
@media (max-width: 480px) {
  .ms-reviews-arrow { width: 34px; height: 34px; }
  .ms-reviews-arrow--prev { left: -6px; }
  .ms-reviews-arrow--next { right: -6px; }
}

.ms-review-card { display: none; }
.ms-review-card.is-active { display: block; }
.ms-review-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ms-review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ms-review-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
  line-height: 1.1;
}
.ms-review-card__role {
  font-size: 12.5px;
  color: #6b7280;
  margin-top: 3px;
}
.ms-review-card__stars {
  margin-left: auto;
  color: #fbbf24;
  font-size: 13px;
  letter-spacing: 1.5px;
}
.ms-review-card__text {
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
  margin: 0;
}

.ms-reviews-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.ms-reviews-dots button {
  width: 7px; height: 7px;
  border-radius: 999px;
  border: 0;
  background: #d1d5db;
  cursor: pointer;
  transition: background .2s, width .25s ease;
  padding: 0;
}
.ms-reviews-dots button.is-active {
  background: #2563eb;
  width: 22px;          /* extended pill for active dot */
}

/* ── DOCTORS — bigger avatars w/ blue ring, scroll-hint right fade ───── */
.ms-section--doctors { background: #fafbff; padding-bottom: 36px !important; }
.ms-section--doctors .ms-section__head { margin-bottom: 22px; }
.ms-doctors {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.ms-doctors__track {
  display: flex;
  gap: 14px;
  padding: 6px 20px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ms-doctors__track::-webkit-scrollbar { display: none; }
.ms-doctors__fade {
  position: absolute;
  right: 0; top: 0; bottom: 14px;
  width: 60px;
  pointer-events: none;
  background: linear-gradient(to left, #fafbff 10%, transparent 100%);
}

.ms-doctor {
  flex-shrink: 0;
  width: 184px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 22px;
  padding: 22px 14px 18px;
  text-align: center;
  scroll-snap-align: start;
  box-shadow: 0 4px 16px -8px rgba(15,23,42,.10);
}
.ms-doctor__avatar {
  width: 80px; height: 80px;
  border-radius: 999px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  box-shadow: 0 0 0 4px #eff6ff;
}
.ms-doctor__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}
.ms-doctor__spec {
  font-size: 12.5px;
  color: #2563eb;
  font-weight: 700;
  margin-top: 3px;
}
.ms-doctor__exp {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 6px 0 10px;
}
.ms-doctor__loc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ── FAQ — accordion (native <details>) ──────────────────────────────── */
.ms-section--faq { padding: 40px 20px !important; }
.ms-section--faq .ms-section__head { max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: 18px; }

.ms-faq {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 24px;
  box-shadow: 0 8px 24px -16px rgba(15,23,42,.08);
  padding: 0 22px;
}
.ms-faq__item { border-bottom: 1px solid #f1f5f9; }
.ms-faq__item:last-child { border-bottom: 0; }
.ms-faq__item summary {
  list-style: none;
  cursor: pointer;
}
.ms-faq__item summary::-webkit-details-marker { display: none; }
.ms-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
  line-height: 1.35;
}
.ms-faq__chev {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
  transition: transform .25s ease, color .15s;
}
.ms-faq__item[open] .ms-faq__chev { transform: rotate(180deg); color: #2563eb; }
.ms-faq__a {
  padding: 0 0 18px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

/* Hide the old "Z." section ms-final-cta legacy if any leaked */
.entry-content > .ms-section + .ms-section__head + .ms-final-cta { display: none; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 12 — Final CTA clean (white bg, blue accent, solid CTA, msgrs) ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.ms-section--final {
  background: #fff !important;
  padding: 32px 20px 56px !important;
}

.ms-final-clean {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.ms-final-clean__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 900;
  line-height: 1.1;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.ms-final-clean__accent { color: #2563eb; }

.ms-final-clean__sub {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 20px;
}

.ms-final-clean__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #2f4cff;             /* deep solid blue (matches reference) */
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  padding: 18px 28px;
  border-radius: 16px;
  text-decoration: none !important;
  box-shadow: 0 12px 32px -10px rgba(47,76,255,.45);
  transition: transform .12s, box-shadow .2s, background .15s;
}
.ms-final-clean__cta:hover {
  background: #2540e6;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(47,76,255,.55);
  color: #fff !important;
}

.ms-final-clean__or {
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  margin: 14px 0 10px;
}

.ms-final-clean__msgr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.ms-msg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 14px;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  transition: transform .1s, box-shadow .2s, opacity .15s;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.18);
  line-height: 1;
}
.ms-msg:hover { transform: translateY(-1px); color: #fff !important; box-shadow: 0 8px 18px -6px rgba(0,0,0,.25); }
.ms-msg svg { width: 18px; height: 18px; flex-shrink: 0; }
.ms-msg--viber    { background: #7360F2; }
.ms-msg--viber:hover    { background: #5d4cd9; }
.ms-msg--telegram { background: #0088cc; }
.ms-msg--telegram:hover { background: #0077b3; }
.ms-msg--whatsapp { background: #25D366; }
.ms-msg--whatsapp:hover { background: #1fb558; }

@media (max-width: 480px) {
  .ms-msg span { display: none; }
  .ms-msg { padding: 14px 8px; }
  .ms-msg svg { width: 22px; height: 22px; }
}

.ms-final-clean__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
}
.ms-final-clean__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.20);
  margin-right: 4px;
}
.ms-final-clean__sep { color: #d1d5db; }

/* Hide any leftover gradient final CTA from earlier rounds */
.ms-final-cta-grad { display: none !important; }

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 13 — Real photos + ReviewsSlider 1:1 from React reference      ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Doctor avatar — REAL <img>, not emoji */
.ms-doctor__avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 999px !important;
  margin: 0 auto 12px !important;
  overflow: hidden !important;
  display: block !important;
  background: linear-gradient(135deg, #eff6ff, #e0e7ff) !important;  /* fallback if img fails */
  box-shadow: 0 0 0 4px #eff6ff !important;
  padding: 0 !important;
}
.ms-doctor__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 999px !important;
}

/* Reviews — arrows OVERLAID on card edges (per ReviewsSlider.tsx) */
.ms-reviews-frame {
  position: relative !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 !important;     /* arrows now overlaid, no padding needed */
}
.ms-reviews-track {
  background: linear-gradient(135deg, #f9fafb 0%, rgba(239,246,255,.30) 100%) !important;
  border: 1px solid #f3f4f6 !important;
  border-radius: 24px !important;
  padding: 22px 24px !important;
  margin: 0 20px !important;             /* мала горизонталь так щоб arrows стирчали */
  min-height: 200px !important;
  position: relative !important;
}
.ms-reviews-arrow {
  position: absolute !important;
  top: 50% !important;
  z-index: 10 !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 16px -4px rgba(15,23,42,.18), 0 4px 8px -2px rgba(15,23,42,.10) !important;
  transition: border-color .15s, background .15s, transform .12s !important;
}
.ms-reviews-arrow:hover {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
  transform: translateY(-50%) scale(1.05) !important;
}
.ms-reviews-arrow:active { transform: translateY(-50%) scale(.92) !important; }
.ms-reviews-arrow svg { width: 16px !important; height: 16px !important; }
.ms-reviews-arrow--prev { left: -4px !important; }   /* стирчить назовні card */
.ms-reviews-arrow--next { right: -4px !important; }

/* Bigger avatar in review card (12 px → 48px з gradient) */
.ms-review-card__avatar {
  width: 48px !important; height: 48px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #dbeafe, #e0e7ff) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}
.ms-review-card__name { font-size: 14px !important; }
.ms-review-card__role { font-size: 11.5px !important; color: #6b7280 !important; }
.ms-review-card__text { font-size: 14.5px !important; color: #374151 !important; line-height: 1.55 !important; margin: 0 !important; }

/* Dots — active = extended pill 24×6 (per React reference) */
.ms-reviews-dots { gap: 6px !important; margin-top: 12px !important; }
.ms-reviews-dots button {
  width: 6px !important; height: 6px !important;
  border-radius: 999px !important;
  background: #d1d5db !important;
  transition: width .25s ease, background .2s !important;
}
.ms-reviews-dots button.is-active {
  background: #2563eb !important;
  width: 24px !important;
}
.ms-reviews-dots button:hover { background: #9ca3af; }

/* Operator photo — real Unsplash URL renders properly (already an <img>) */
.ms-quiz__operator-photo img {
  border-radius: 999px;
  object-fit: cover;
}

@media (max-width: 480px) {
  .ms-reviews-track { margin: 0 16px !important; padding: 20px 18px !important; }
  .ms-reviews-arrow--prev { left: -2px !important; }
  .ms-reviews-arrow--next { right: -2px !important; }
}

/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ ROUND 14 — точковий diff fix (15 пунктів від QA)                     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

/* P5 — Hero H1 accent більший */
.ms-hero__title-accent,
.ms-hero__title-line2.ms-hero__title-accent {
  font-size: clamp(2.5rem, 6vw, 3.25rem) !important;
  font-weight: 900 !important;
  display: block;
  color: var(--color-primary) !important;
  line-height: 1.05 !important;
  margin-top: 4px !important;
}

/* P6 — Eyebrow (.ms-section__eyebrow + .ms-section__label) */
.ms-section__eyebrow,
.ms-section__label {
  color: #2563eb !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* P7 — Step icon round blue (referense uses small filled circle) */
.ms-how-step__icon,
.ms-step__icon {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  margin: 0 auto 12px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.45) !important;
}
.ms-how-step__icon svg { width: 22px !important; height: 22px !important; }

/* P9 — Quiz card states (chevron up: підкреслимо selected blue ring + tinted bg) */
.ms-card,
.fluentform .ff-el-form-check-label,
.fluentform .ff_list_buttons label {
  min-height: 64px !important;
  align-items: center !important;
  padding: 12px 16px !important;
}
.ms-card.is-selected,
.fluentform input[type="radio"]:checked + label,
.fluentform .ff_list_buttons input:checked + label {
  background: rgba(37,99,235,.06) !important;
  border-color: #2563eb !important;
  border-width: 2px !important;
}

/* P10 — Quiz badges (Найшвидше / Популярно) */
.ms-card__badge {
  position: absolute !important;
  top: -10px !important;
  right: 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 3px 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

/* P11 — Progress bar (тонкий 3px зверху квіза) */
.ms-quiz__progress {
  height: 4px !important;
  border-radius: 2px !important;
  margin: 0 0 16px !important;
  background: #f3f4f6 !important;
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.ms-quiz__seg {
  height: 4px !important;
  border-radius: 2px !important;
}

/* P14 — Social CTA block (Viber / Telegram / WhatsApp + trust) */
.ms-social-cta {
  background: #fff;
  padding: 20px 0 32px;
}
.ms-social-cta__inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.ms-social-cta__or {
  font-size: 13px;
  color: #9ca3af;
  margin: 0 0 12px;
}
.ms-social-cta__btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ms-social-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 22px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: opacity .15s, transform .1s !important;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.18) !important;
  line-height: 1 !important;
}
.ms-social-btn:hover    { opacity: .92 !important; transform: translateY(-1px); color: #fff !important; }
.ms-social-btn--viber    { background: #7360F2 !important; }
.ms-social-btn--telegram { background: #29a9eb !important; }
.ms-social-btn--whatsapp { background: #25D366 !important; }
.ms-social-btn svg { flex-shrink: 0; }

.ms-social-cta__trust {
  font-size: 12.5px;
  color: #6b7280;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.ms-social-cta__trust span { display: inline-flex; align-items: center; gap: 4px; }


/* ── ROUND 15: desktop 2-col hero, bullets, no blue bg ── */

/* Hero container full width */
.ms-hero__inner,
.ms-hero--home .ms-hero__inner {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Desktop 2 columns: text left, quiz right */
@media (min-width: 900px) {
  .ms-hero--home .ms-hero__inner {
    display: grid !important;
    grid-template-columns: 1fr 460px !important;
    gap: 48px !important;
    align-items: start !important;
    padding: 48px 40px !important;
    text-align: left !important;
  }
  .ms-hero--home .ms-hero__quiz {
    grid-column: 2 !important;
    grid-row: 1 / 10 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .ms-hero--home .ms-hero__moz-pill,
  .ms-hero--home .ms-hero__title,
  .ms-hero--home .ms-hero__bullets,
  .ms-hero--home .ms-hero__trust { grid-column: 1 !important; text-align: left !important; }
  .ms-hero--home .ms-hero__trust { justify-content: flex-start !important; }
  .ms-hero--home .ms-hero__title { font-size: clamp(36px,4vw,52px) !important; }
  .ms-hero--home .ms-hero__title-accent { font-size: clamp(40px,5vw,60px) !important; }
}

/* Bullet list — темний текст, зелені галочки */
.ms-hero__bullets {
  list-style: none !important; padding: 0 !important;
  margin: 16px 0 20px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.ms-hero__bullets li {
  display: flex !important; align-items: flex-start !important;
  gap: 10px !important; font-size: 15px !important;
  color: #374151 !important; line-height: 1.45 !important;
}
.ms-hero__bullets li::before {
  content: "✓" !important; flex-shrink: 0 !important;
  width: 22px !important; height: 22px !important;
  background: #dcfce7 !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 800 !important; color: #15803d !important;
}

/* === ROUND 16 P2 === */
.ms-cities,
.ms-coverage,
[class*="cities"] {
  display: none !important;
}
/* Hide parent section that wraps the cities grid (no unique class on it) */
.ms-section:has(.ms-cities-grid) {
  display: none !important;
}

/* === ROUND 16 P3 === */
.ms-hero--home .ms-hero__subhead {
  font-size: 1.05rem;
  color: #475569;
  margin: 0 0 1.2rem;
  line-height: 1.5;
}

/* === ROUND 16 P4 === */
.ms-quiz__text-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ms-quiz__text-input:focus {
  border-color: #2563eb;
}

/* === ROUND 16 P5 === */
.ms-section--faq {
  max-width: 1200px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
}

/* === ROUND 16 P8 (revised — soft light final, NOT dark) === */
.ms-section--final {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
}
.ms-final-clean {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 28px !important;
  padding: 36px 28px !important;
  box-shadow: 0 18px 44px -18px rgba(15,23,42,.12) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
.ms-section--final .ms-final-clean__title { color: #0f172a !important; }
.ms-section--final .ms-final-clean__accent { color: #2563eb !important; }
.ms-section--final .ms-final-clean__sub { color: #6b7280 !important; }
.ms-section--final .ms-final-clean__or { color: #9ca3af !important; }
.ms-section--final .ms-final-clean__trust { color: #6b7280 !important; }
.ms-section--final .ms-final-clean__sep { color: #d1d5db !important; }
/* CTA returns to brand-blue solid (white-on-blue, not dark inverted) */
.ms-section--final .ms-final-clean__cta {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px -10px rgba(37,99,235,.45) !important;
}
.ms-section--final .ms-final-clean__cta:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px -10px rgba(37,99,235,.55) !important;
}
/* Messengers return to brand colors (Viber violet / TG blue / WA green) */
.ms-section--final .ms-msg--viber    { background: #7360F2 !important; color: #fff !important; border-color: transparent !important; }
.ms-section--final .ms-msg--telegram { background: #0088cc !important; color: #fff !important; border-color: transparent !important; }
.ms-section--final .ms-msg--whatsapp { background: #25D366 !important; color: #fff !important; border-color: transparent !important; }
.ms-section--final .ms-msg--viber:hover    { background: #5d4cd9 !important; }
.ms-section--final .ms-msg--telegram:hover { background: #0077b3 !important; }
.ms-section--final .ms-msg--whatsapp:hover { background: #1fb558 !important; }
@media (max-width: 480px) {
  .ms-final-clean { padding: 28px 20px !important; border-radius: 22px !important; }
}

/* === ROUND 16 P10 === */
#ms-messenger-popup { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.ms-popup__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.ms-popup__box { position:relative; background:#fff; border-radius:16px; padding:2rem; text-align:center; min-width:280px; z-index:1; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.ms-popup__close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:1.2rem; cursor:pointer; color:#64748b; }
.ms-popup__title { font-size:1.3rem; font-weight:700; color:#0f172a; margin:0 0 0.5rem; }
.ms-popup__number { font-size:1.5rem; font-weight:800; color:#2563eb; margin:0 0 0.5rem; letter-spacing:0.05em; }
.ms-popup__hint { font-size:0.85rem; color:#64748b; margin:0; }

/* === Lead-capture form popup (extends ms-popup) === */
.ms-popup__box--form {
  min-width: 320px;
  max-width: 420px;
  width: calc(100vw - 32px);
  padding: 28px 28px 24px;
  text-align: left;
}
.ms-popup__sub {
  font-size: 14px;
  color: #475569;
  margin: 0 0 18px;
  line-height: 1.45;
}
.ms-popup__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ms-popup__field { display: flex; flex-direction: column; gap: 6px; }
.ms-popup__label { font-size: 13px; font-weight: 600; color: #334155; }
.ms-popup__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
}
.ms-popup__input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ms-popup__input.is-error { border-color: #ef4444; }
.ms-popup__error { font-size: 13px; color: #ef4444; margin: -2px 0 0; }
.ms-popup__submit {
  margin-top: 6px;
  padding: 13px 16px;
  background: #2563eb;
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.ms-popup__submit:hover:not(:disabled) { background: #1d4ed8; }
.ms-popup__submit:active { transform: translateY(1px); }
.ms-popup__submit:disabled { background: #94a3b8; cursor: wait; }
.ms-popup__privacy { font-size: 12px; color: #64748b; margin: 8px 0 0; text-align: center; }

.ms-popup__success { text-align: center; padding: 16px 0 8px; }
.ms-popup__check {
  width: 60px; height: 60px; border-radius: 999px;
  background: #d1fae5; color: #047857;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800;
  margin: 0 auto 14px;
}
.ms-popup__success-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.ms-popup__success-sub { font-size: 14px; color: #475569; margin: 0; line-height: 1.5; }

/* === ROUND 16 P11 (FIX-3) — reviews: cohesive single-block design === */
/* Wrap whole reviews section content into one card-like container */
.ms-section--reviews .ms-section__inner {
  max-width: 760px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 28px !important;
  padding: 28px 32px 24px !important;
  box-shadow: 0 12px 32px -12px rgba(15,23,42,.10), 0 4px 12px -4px rgba(15,23,42,.06) !important;
  box-sizing: border-box !important;
}
.ms-section--reviews .ms-section__head { margin-bottom: 14px !important; }
.ms-section--reviews .ms-section__title {
  font-size: 22px !important;
  margin: 0 !important;
  text-align: center !important;
}
.ms-reviews-head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
/* Frame fills the container; arrows live INSIDE, not outside */
.ms-reviews-frame {
  position: relative !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 56px !important;   /* room for arrows on the sides */
}
/* Track is now just a content slot — no extra background, padding or border */
.ms-reviews-track {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 160px !important;
  box-shadow: none !important;
}
/* Arrows: anchored inside the frame's padding gutters */
.ms-reviews-arrow {
  width: 38px !important;
  height: 38px !important;
}
.ms-reviews-arrow--prev { left: 8px !important; right: auto !important; }
.ms-reviews-arrow--next { right: 8px !important; left: auto !important; }
.ms-reviews-dots { margin-top: 18px !important; }
@media (max-width: 600px) {
  .ms-section--reviews .ms-section__inner {
    padding: 22px 18px 18px !important;
    border-radius: 22px !important;
  }
  .ms-reviews-frame { padding: 0 !important; }
}

/* Hide prev/next arrows in reviews — navigation is via dots only */
.ms-reviews-arrow,
.ms-reviews-arrow--prev,
.ms-reviews-arrow--next { display: none !important; }
.ms-reviews-frame { padding: 0 !important; }

/* === ROUND 16 P15 (FIX-9) — homepage UI polish round 2 === */

/* 1) Unified content container width — hero stays at its 720px, content sections expand to 1100px */
.ms-section--catalog .ms-section__inner,
.ms-section--how .ms-section__inner,
.ms-section--doctors .ms-section__inner,
.ms-section--price .ms-section__inner,
.ms-section--faq .ms-section__inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* 2) Catalog grid — explicit breakpoints so 8 items always pack evenly */
.ms-services-grid {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
@media (min-width: 600px) {
  .ms-services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (min-width: 900px) {
  .ms-services-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
}
.ms-service-card {
  padding: 16px !important;
  gap: 14px !important;
  border-radius: 14px !important;
}
.ms-service-card__name { font-size: 0.95rem !important; line-height: 1.3 !important; }

/* 3) Mobile-friendly border-radius on heavy containers */
@media (max-width: 480px) {
  .ms-how-bento { border-radius: 22px !important; padding: 22px 16px !important; }
  .ms-how-step  { border-radius: 14px !important; padding: 14px !important; gap: 12px !important; }
  .ms-faq       { border-radius: 18px !important; padding: 0 16px !important; }
  .ms-faq__q    { font-size: 14.5px !important; padding: 16px 0 !important; }
  .ms-faq__a    { font-size: 13.5px !important; padding-bottom: 16px !important; }
  .ms-price-card { border-radius: 22px !important; padding: 22px 18px !important; }
  .ms-doctor    { width: 168px !important; padding: 18px 12px !important; }
  .ms-doctor__avatar { width: 70px !important; height: 70px !important; }
}

/* 4) Section title — kill UA-default <h2> margin (some themes inject it) */
.ms-section__title { margin-top: 0 !important; }
.ms-section__head .ms-section__title + p,
.ms-section__head .ms-section__title { margin-block: 0 !important; }

/* 5) PRICE-card "Найпопулярніше" — slightly more refined chip */
.ms-price-card__hit {
  background: #fde68a !important;
  color: #78350f !important;
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  letter-spacing: .04em !important;
}

/* 6) HOW-step icon — ensure round square (P7 forced 50%, looks unbalanced next to numbered badge) */
.ms-section--how .ms-how-step__icon {
  border-radius: 14px !important;
  width: 48px !important;
  height: 48px !important;
}
.ms-how-step__num {
  top: -6px !important;
  right: -6px !important;
  background: #fbbf24 !important;
}

/* 7) Doctors — even rhythm + better fade after layout */
.ms-doctors { padding: 0 20px !important; }
.ms-doctors__track {
  padding: 6px 0 16px !important;
  gap: 16px !important;
}
.ms-doctors__fade {
  bottom: 16px !important;
  width: 48px !important;
}

/* 8) Reviews card — after arrows removed, give card more room and a real card feel */
.ms-section--reviews .ms-reviews-track { padding: 4px 0 !important; }
.ms-section--reviews .ms-review-card { padding: 4px 0 !important; }

/* 9) FAQ chevron — color the arrow caret consistently with hover */
.ms-faq__chev { font-size: 14px !important; color: #6b7280 !important; }

/* 10) Underline-free links inside section bodies, hover states */
.entry-content .ms-service-card,
.entry-content .ms-faq__item summary,
.entry-content .ms-msg,
.entry-content .ms-final-clean__cta { text-decoration: none !important; }

/* === ROUND 16 P16 (FIX-10) — unified "services-card" design language across the page === */

/* 1) Single typeface everywhere — Manrope for both body and display */
:root {
  --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* 2) Global box-sizing + prevent CTA/buttons overflowing their cards */
.ms-price-card,
.ms-service-card,
.ms-how-step,
.ms-doctor,
.ms-faq,
.ms-final-clean,
.ms-stats-bento,
.ms-stat-cell,
.ms-price-card *,
.ms-final-clean *,
.ms-how-step *,
.ms-msg,
.ms-price-card__cta,
.ms-final-clean__cta { box-sizing: border-box !important; }

.ms-price-card__cta,
.ms-final-clean__cta {
  max-width: 100% !important;
  white-space: normal !important;
}

/* 3) Doctor location chips — hidden per request */
.ms-doctor__loc { display: none !important; }

/* 4) PRICE-card — keep original blue-gradient design (reverted from FIX-10 white attempt) */
/* Only ensure max-width + overflow safety + center on the page */
.ms-price-card {
  margin: 24px auto 0 !important;
  max-width: 520px !important;
}

/* 5) HOW — strip bento wrapper (gradient + border + shadow), let 3 step-cards stand on their own */
.ms-how-bento {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ms-how__list { gap: 14px !important; }
.ms-how-step {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px -10px rgba(15,23,42,.08) !important;
  padding: 16px !important;
}
.ms-how-step__icon {
  background: #eff6ff !important;
  border-radius: 12px !important;
  width: 48px !important;
  height: 48px !important;
  box-shadow: none !important;
}
.ms-how-step__icon svg {
  stroke: #2563eb !important;
  width: 22px !important;
  height: 22px !important;
}
.ms-how-step__num {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* 6) DOCTORS — match services-card light style (already close, just harmonize) */
.ms-doctor {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px -10px rgba(15,23,42,.08) !important;
}
.ms-doctor__avatar { box-shadow: 0 0 0 3px #eff6ff !important; }

/* 7) FAQ — same light card with same border-radius */
.ms-faq {
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 16px -10px rgba(15,23,42,.08) !important;
}

/* 8) REVIEWS — match services radius (14-16px) instead of huge 28px */
.ms-section--reviews .ms-section__inner {
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 16px -10px rgba(15,23,42,.08) !important;
}

/* 9) FINAL card — same radius/border treatment */
.ms-final-clean {
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 16px -10px rgba(15,23,42,.08) !important;
}

/* 10) STATS cells in hero — match services radius */
.ms-stat-cell { border-radius: 14px !important; }

/* 11) MOBILE — services-card behavior baseline (used as visual reference) */
@media (max-width: 480px) {
  .ms-price-card { padding: 20px !important; border-radius: 14px !important; }
  .ms-how-step  { padding: 14px !important; gap: 12px !important; border-radius: 12px !important; }
  .ms-doctor    { border-radius: 12px !important; }
  .ms-faq       { border-radius: 14px !important; }
  .ms-final-clean { border-radius: 14px !important; padding: 24px 18px !important; }
  .ms-section--reviews .ms-section__inner { border-radius: 14px !important; }
  .ms-stat-cell { border-radius: 12px !important; }
  /* Truncate-friendly: prevent overflow of long button labels on small screens */
  .ms-price-card__cta,
  .ms-final-clean__cta { font-size: 14.5px !important; padding: 14px 16px !important; }
  .ms-msg span { display: inline !important; }
}

/* === ROUND 16 P12 (FIX-4) — homepage rhythm: spacing + section accents + stats refresh === */

/* 1) Unified vertical rhythm between sections (desktop / mobile) */
.ms-section { padding: 56px 20px !important; }
@media (min-width: 768px) { .ms-section { padding: 72px 24px !important; } }
@media (max-width: 480px) { .ms-section { padding: 40px 16px !important; } }

/* Stats moved INTO hero — small gap from trust-checks list */
.ms-hero__stats { margin-top: 18px !important; }
@media (max-width: 480px) { .ms-hero__stats { margin-top: 14px !important; } }

/* === ROUND 16 P13 (FIX-6) — homepage UI polish === */

/* 1) Win against old per-section padding overrides (specificity battle) */
/* Tighter vertical rhythm — was 56/72/40, now 40/56/28 */
.ms-section--catalog,
.ms-section--how,
.ms-section--doctors,
.ms-section--reviews,
.ms-section--faq,
.ms-section--final,
.ms-section--price {
  padding: 40px 20px !important;
}
@media (min-width: 768px) {
  .ms-section--catalog,
  .ms-section--how,
  .ms-section--doctors,
  .ms-section--reviews,
  .ms-section--faq,
  .ms-section--final,
  .ms-section--price {
    padding: 56px 24px !important;
  }
}
@media (max-width: 480px) {
  .ms-section--catalog,
  .ms-section--how,
  .ms-section--doctors,
  .ms-section--reviews,
  .ms-section--faq,
  .ms-section--final,
  .ms-section--price {
    padding: 28px 16px !important;
  }
}

/* 2) Section heads — consistent margin */
.ms-section__head { margin-bottom: 28px !important; }
.ms-section--faq .ms-section__head { margin-bottom: 28px !important; }
.ms-section__sub {
  margin: 8px auto 0 !important;
  max-width: 560px !important;
  color: #6b7280 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* 3) Doctors — fade color synced to new section background */
.ms-doctors__fade {
  background: linear-gradient(to left, #f8fafc 10%, rgba(248,250,252,0) 100%) !important;
}

/* 4) HOW step — icon must NOT auto-center (icon-wrap is in a horizontal flex row) */
.ms-section--how .ms-how-step__icon {
  margin: 0 !important;
}

/* 5) Hover feedback on interactive cards */
.ms-service-card {
  transition: box-shadow .2s, border-color .2s, transform .15s !important;
}
.ms-service-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px -12px rgba(37,99,235,.22) !important;
  border-color: #93c5fd !important;
}
.ms-how-step {
  transition: transform .15s, box-shadow .2s !important;
}
.ms-how-step:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -10px rgba(15,23,42,.12) !important;
}
.ms-doctor {
  transition: transform .15s, box-shadow .2s !important;
}
.ms-doctor:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px -10px rgba(15,23,42,.14) !important;
}

/* 6) FAQ — hover/active states + summary cursor */
.ms-faq__item summary {
  transition: color .15s !important;
}
.ms-faq__item:hover .ms-faq__q { color: #2563eb !important; }
.ms-faq__item:hover .ms-faq__chev { color: #2563eb !important; }
.ms-faq__item[open] .ms-faq__q { color: #1d4ed8 !important; }

/* 7) PRICE card — better contrast on strikethrough old price */
.ms-price-card__old {
  color: rgba(255,255,255,.65) !important;
  font-weight: 600 !important;
}

/* 8) FINAL — content centered (was text-align:left on a centered container) */
.ms-final-clean { text-align: center !important; }
.ms-final-clean__msgr { justify-content: center !important; }
.ms-final-clean__trust { justify-content: center !important; }

/* 9) Subtle entry separation — first non-hero section gets extra top air */
.ms-hero + .entry-content > .ms-section:first-child,
.ms-hero + .ms-section { margin-top: 0 !important; }

/* 10) Service-card icon — slightly larger, brighter */
.ms-service-card__icon {
  font-size: 1.75rem !important;
  width: 52px !important;
  height: 52px !important;
}

/* 2) Subtle alternating background to visually separate blocks */
.ms-section--catalog,
.ms-section--doctors,
.ms-section--faq {
  background: #f8fafc !important;
}
.ms-section--price,
.ms-section--how,
.ms-section--reviews {
  background: #ffffff !important;
}

/* 3) Section titles — consistent scale + spacing (bumped per user request) */
.ms-section__head { margin-bottom: 32px !important; text-align: center !important; }
.ms-section__title {
  font-size: clamp(28px, 4.5vw, 40px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* 4) STATS — 3 clear cards, never collapse to one column on phones */
.ms-stats-bento {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.ms-stat-cell {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  padding: 18px 12px !important;
  text-align: center !important;
  box-shadow: 0 6px 16px -8px rgba(15,23,42,.10) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
.ms-stat-cell__num {
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 5vw, 32px) !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.ms-stat-cell__star { color: #fbbf24 !important; font-size: .9em !important; }
.ms-stat-cell__label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;        /* keep "👥 клієнтів" on one line */
  margin: 0 !important;
}
@media (max-width: 480px) {
  .ms-stats-bento { gap: 8px !important; }
  .ms-stat-cell { padding: 14px 8px !important; border-radius: 14px !important; }
  .ms-stat-cell__label { font-size: 10.5px !important; letter-spacing: .04em !important; }
}

/* === ROUND 16 P18 (FIX-16/17) — Polished footer (soft slate-50 + colored msgr chips) === */

.ms-footer {
  background: #f8fafc !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: 56px 20px 20px !important;
  color: #0f172a !important;
  display: block !important;          /* override legacy flex-column on line 1104 */
  align-items: initial !important;
  gap: 0 !important;
}
/* Kill any GeneratePress site-info border/background that may show a dark line */
.site-info,
.site-footer,
.gp-footer,
footer.site-info {
  background: #f8fafc !important;
  border-top: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media (min-width: 768px) { .ms-footer { padding: 72px 24px 24px !important; } }
@media (max-width: 480px) { .ms-footer { padding: 40px 16px 20px !important; } }

.ms-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto 36px;
  text-align: left;
}
@media (min-width: 700px) { .ms-footer__grid { grid-template-columns: 1.7fr 1fr 1fr; gap: 48px; } }

.ms-footer__col { min-width: 0; }

/* Brand column */
.ms-footer__logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none !important;
  margin-bottom: 14px;
}
.ms-footer__logo .ms-logo__med { color: #0f172a; }
.ms-footer__logo .ms-logo__service { color: #2563eb; }
.ms-footer__tag {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 380px;
}
.ms-footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}
.ms-footer__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
}

/* Section title (Контакти / Послуги) */
.ms-footer__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 16px;
}

/* Phone primary line */
.ms-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: #0f172a !important;
  text-decoration: none !important;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  transition: color .15s;
}
.ms-footer__phone:hover { color: #2563eb !important; }

/* Messenger chips — brand colors, no plain text */
.ms-footer__msgrs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ms-footer__msg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: transform .12s, box-shadow .2s, opacity .15s;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.18);
}
.ms-footer__msg:hover { transform: translateY(-1px); color: #ffffff !important; box-shadow: 0 8px 16px -6px rgba(0,0,0,.25); }
.ms-footer__msg--viber    { background: #7360F2; }
.ms-footer__msg--viber:hover    { background: #5d4cd9; }
.ms-footer__msg--telegram { background: #0088cc; }
.ms-footer__msg--telegram:hover { background: #0077b3; }
.ms-footer__msg--whatsapp { background: #25D366; }
.ms-footer__msg--whatsapp:hover { background: #1fb558; }

.ms-footer__hours {
  font-size: 13px;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ms-footer__network {
  margin: 14px 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
  max-width: 340px;
}

/* Service links list */
.ms-footer__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-footer__list li { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.ms-footer__list li::marker { content: "" !important; }
.ms-footer__list li::before { content: none !important; }
.ms-footer__link {
  font-size: 14px;
  color: #4b5563 !important;
  text-decoration: none !important;
  transition: color .15s, padding-left .15s;
  display: inline-block;
}
.ms-footer__link:hover {
  color: #2563eb !important;
  padding-left: 4px;
}

/* Bottom bar — copyright + legal nav */
.ms-footer__bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
@media (min-width: 700px) {
  .ms-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.ms-footer__copyright {
  font-size: 12.5px;
  color: #9ca3af;
  margin: 0;
}
.ms-footer__legal {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
}
.ms-footer__legal a {
  color: #6b7280;
  text-decoration: none;
  transition: color .15s;
}
.ms-footer__legal a:hover { color: #2563eb; }
.ms-footer__legal-sep { color: #d1d5db; }

/* Override legacy .ms-footer__menu (we no longer render this nav, but keep safe defaults) */
.ms-footer__menu { display: none !important; }

/* Bring back the stronger "Читати далі" button (lost during footer rewrite) */
/* Safety: force-show wrapper + button regardless of cascade */
.ms-seo-actions,
section .ms-seo-actions,
.entry-content .ms-seo-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 24px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
}
.ms-seo-toggle,
section .ms-seo-toggle,
.entry-content .ms-seo-toggle,
button.ms-seo-toggle {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 16px 32px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,.45) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background .15s, box-shadow .2s, transform .12s !important;
}
.ms-seo-toggle:hover,
section .ms-seo-toggle:hover,
.entry-content .ms-seo-toggle:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px -8px rgba(37,99,235,.55) !important;
}

/* Stronger "Читати далі" button — solid blue so it's visible on white */
.ms-seo-toggle {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  box-shadow: 0 8px 22px -8px rgba(37,99,235,.40) !important;
}
.ms-seo-toggle:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px -8px rgba(37,99,235,.50) !important;
}

/* === ROUND 16 P17 (FIX-12) — SEO long-form section with collapsible "Читати далі" === */
.ms-section--seo {
  background: #ffffff !important;
  padding: 40px 20px !important;
}
@media (min-width: 768px) { .ms-section--seo { padding: 56px 24px !important; } }
@media (max-width: 480px) { .ms-section--seo { padding: 28px 16px !important; } }

.ms-section--seo .ms-section__inner {
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Collapsible body — show only first ~280px, fade the rest */
.ms-seo-text {
  position: relative;
  max-height: 280px;
  overflow: hidden;
  transition: max-height .35s ease;
  color: #374151;
  font-size: 15.5px;
  line-height: 1.65;
}
.ms-seo-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 85%);
  pointer-events: none;
  transition: opacity .25s ease;
}
.ms-seo-text.is-expanded {
  max-height: 12000px;
}
.ms-seo-text.is-expanded::after { opacity: 0; }

/* Prose styling inside the SEO body */
.ms-seo-text p { margin: 0 0 14px; }
.ms-seo-text p:last-child { margin-bottom: 0; }
.ms-seo-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 28px 0 12px;
  line-height: 1.25;
}
.ms-seo-text h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 20px 0 8px;
}
.ms-seo-text h5 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 14px 0 6px;
}
.ms-seo-text ul,
.ms-seo-text ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.ms-seo-text li { margin: 4px 0; }
.ms-seo-text a {
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,.25);
  transition: border-color .15s, color .15s;
}
.ms-seo-text a:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.ms-seo-text strong { color: #0f172a; }
.ms-seo-text blockquote {
  margin: 16px 0;
  padding: 14px 18px;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  border-radius: 8px;
  color: #0f172a;
}
.ms-seo-text blockquote p { margin: 0; }
.ms-seo-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}
.ms-seo-text th,
.ms-seo-text td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.ms-seo-text th { background: #f8fafc; font-weight: 700; color: #0f172a; }

/* Toggle button */
.ms-seo-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.ms-seo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #2563eb;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .2s;
  box-shadow: 0 4px 12px -8px rgba(15,23,42,.10);
}
.ms-seo-toggle:hover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 8px 18px -8px rgba(37,99,235,.20);
}
.ms-seo-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ ROUND 16 P19 (FIX-19) — page-wide design audit (14-point spec)           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============ Pt.1 — SINGLE-row header: logo + nav + phone + CTA all-in-one ============ */
/* Strategy: hide GP's site-header band entirely; render everything inside .inside-navigation */
.site-header,
.site-header .inside-header {
  display: none !important;
}

/* The nav band IS the header now */
.main-navigation {
  background: #ffffff !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
  margin: 0 !important;
  position: relative;
  z-index: 9999 !important;       /* above hero/quiz/sticky-cta so dropdown sits on top */
}
.main-navigation .inside-navigation {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 12px 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 64px;
}

/* Logo rendered first inside nav band */
.ms-nav-logo {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none !important;
  color: #0f172a !important;
}
.ms-nav-logo .ms-logo__med { color: #0f172a; }
.ms-nav-logo .ms-logo__service { color: #2563eb; }

/* Flex order: logo → menu → phone+CTA (DOM order doesn't matter, CSS order does) */
.ms-nav-logo { order: 1; }
.main-navigation .main-nav,
.main-navigation #primary-menu { order: 2; flex: 1; }
.main-navigation .ms-header-actions { order: 3; margin-left: auto !important; flex-shrink: 0; }
.main-navigation .menu-toggle { order: 99; }

/* Mobile header — logo + phone + CTA + burger (compact) */
@media (max-width: 768px) {
  .main-navigation .inside-navigation {
    padding: 10px 12px !important;
    min-height: 56px;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .ms-nav-logo { font-size: 18px; flex-shrink: 0; }

  /* Show phone + CTA on mobile in compact form */
  .ms-header-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  /* Phone — perfect square icon button on mobile */
  .ms-header-phone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #eff6ff !important;
    box-sizing: border-box !important;
  }
  .ms-header-phone__num { display: none !important; }
  .ms-header-phone svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  /* CTA — hidden on mobile per spec (logo + phone + burger only) */
  .ms-header-cta { display: none !important; }

  /* Order: logo (1) — [auto gap] — status (2) — phone (3) — burger (4) */
  .ms-nav-logo        { order: 1 !important; }
  .ms-status-bar      { order: 2 !important; margin-left: auto !important; margin-right: 6px !important; }
  .ms-header-actions  { order: 3 !important; margin-left: 0 !important; margin-right: 10px !important; }
  .ms-mobile-toggle   { order: 4 !important; margin-left: 0 !important; }
  /* Hide GP's default burger — we use our own .ms-mobile-toggle */
  .menu-toggle, .mobile-menu-control-wrapper { display: none !important; }

  /* Burger — far right, styled visible */
  .menu-toggle,
  .ms-mobile-toggle {
    display: flex !important;
    flex-shrink: 0;
    margin-left: 0 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
  }
  .ms-mobile-toggle span { background: #0f172a !important; }
}
@media (max-width: 380px) {
  /* Ultra-narrow phones — drop CTA text to single word */
  .ms-header-cta { padding: 8px 10px !important; font-size: 12px !important; }
}

/* ============ Pt.2 — Nav: kill black, light + blue accent ============ */
.main-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
  background: #ffffff !important;
  color: #0f172a !important;
}
.main-navigation .main-nav > ul {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
}
.main-navigation .main-nav > ul > li > a,
.main-navigation .menu-item > a {
  background: transparent !important;
  color: #0f172a !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  padding: 14px 16px !important;
  border-radius: 8px;
  transition: background .15s, color .15s;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-ancestor > a {
  background: #eff6ff !important;
  color: #2563eb !important;
}
/* Dropdown arrow next to "Послуги" */
.main-navigation .menu-item-has-children > a::after {
  content: " ▾";
  color: #9ca3af;
  font-size: 10px;
  margin-left: 4px;
}
/* Hide GeneratePress's built-in dropdown-toggle dot/bullet (it duplicates our chevron) */
.main-navigation .dropdown-menu-toggle,
.main-navigation .menu-item-has-children > a > .dropdown-menu-toggle,
.main-navigation span[role="presentation"].dropdown-menu-toggle {
  display: none !important;
}
/* Belt-and-suspenders: kill any list markers that might leak through */
.main-navigation .menu,
.main-navigation .menu > li,
.main-navigation .sub-menu,
.main-navigation .sub-menu > li {
  list-style: none !important;
}
.main-navigation .menu > li::marker,
.main-navigation .sub-menu > li::marker { content: "" !important; }
.main-navigation .menu > li::before,
.main-navigation .sub-menu > li::before { content: none !important; }
/* MEGA-MENU dropdown — spans the full nav width, doesn't overlap hero h1 */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav,
.main-navigation #primary-menu,
.main-navigation .menu,
.main-navigation .menu > li {
  overflow: visible !important;
}
/* "Послуги" anchor for full-width panel */
.main-navigation .menu-item-has-children {
  position: static !important;   /* parent of sub-menu is the whole nav, not the <li> */
}
.main-navigation .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 24px 32px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 40px -12px rgba(15,23,42,.18) !important;
  list-style: none !important;
  z-index: 99999 !important;
  /* 3-column grid for service items */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px 24px !important;
  /* Inner content centered to match header container */
  max-width: 100% !important;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
/* Center inner grid contents to header max-width */
.main-navigation .sub-menu::before,
.main-navigation .sub-menu::after { content: none !important; }
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children > .sub-menu.toggled-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.main-navigation .sub-menu > li {
  width: 100%;
  list-style: none !important;
}
.main-navigation .sub-menu li a {
  display: block !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}
.main-navigation .sub-menu li a:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* Mobile drawer keeps its existing styles (defined elsewhere); only desktop mega-menu rules above */
@media (max-width: 768px) {
  .main-navigation .menu-item-has-children { position: relative !important; }
  .main-navigation .sub-menu {
    position: static !important;
    display: block !important;
    grid-template-columns: none !important;
    padding: 4px 8px 8px 16px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ ROUND 16 P21 (FIX-22) — Mobile UI polish across home + sanitarna pages   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============ Mobile baseline ≤ 768px ============ */
@media (max-width: 768px) {

  /* HEADER — compact, only logo + burger */
  .main-navigation .inside-navigation {
    padding: 10px 14px !important;
    min-height: 52px !important;
    gap: 8px !important;
  }
  .ms-nav-logo { font-size: 20px !important; }
  .menu-toggle { width: 40px !important; height: 40px !important; }
  .menu-toggle::before { width: 18px !important; height: 12px !important; }

  /* BREADCRUMBS — slim row, ellipsize overflow */
  .ms-breadcrumbs {
    padding: 8px 14px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ms-breadcrumbs::-webkit-scrollbar { display: none; }

  /* HERO — tighter rhythm */
  .ms-hero { padding: 24px 16px 32px !important; }
  .ms-hero__inner { gap: 12px !important; }
  .ms-hero__moz-pill { font-size: 11px !important; padding: 5px 10px !important; }
  .ms-hero__title { font-size: clamp(22px, 6.5vw, 28px) !important; line-height: 1.15 !important; }
  .ms-hero__chips { gap: 6px !important; flex-wrap: wrap !important; }
  .ms-hero__chip { font-size: 13px !important; padding: 5px 10px !important; }
  .ms-hero__bullets { gap: 6px !important; max-width: 100% !important; }
  .ms-hero__bullets li { font-size: 14px !important; padding-left: 24px !important; }
  .ms-hero__bullets li::before { width: 18px !important; height: 18px !important; font-size: 10px !important; }
  .ms-hero__quiz { max-width: 100% !important; margin-top: 12px !important; }
  .ms-hero__stats { max-width: 100% !important; margin-top: 10px !important; }

  /* STATS — compact 3-in-a-row */
  .ms-stats-bento { gap: 6px !important; }
  .ms-stat-cell { padding: 12px 6px !important; gap: 4px !important; border-radius: 12px !important; }
  .ms-stat-cell__num { font-size: 18px !important; }
  .ms-stat-cell__label { font-size: 9.5px !important; letter-spacing: .02em !important; gap: 3px !important; }

  /* SECTION TITLE — smaller, tighter */
  .ms-section__title { font-size: clamp(22px, 6vw, 28px) !important; }
  .ms-section__head { margin-bottom: 20px !important; }
  .ms-section__label { font-size: 10.5px !important; }
  .ms-section__sub { font-size: 14px !important; line-height: 1.5 !important; }

  /* PRICE CARD — fit nicely on phone */
  .ms-price-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
  .ms-price-card__top { gap: 6px !important; margin-bottom: 10px !important; }
  .ms-price-card__proof { font-size: 11px !important; }
  .ms-price-card__hit { font-size: 9.5px !important; padding: 3px 8px !important; }
  .ms-price-card__name { font-size: 13px !important; }
  .ms-price-card__num { font-size: 36px !important; }
  .ms-price-card__cur { font-size: 15px !important; }
  .ms-price-card__old { font-size: 13px !important; }
  .ms-price-card__ticks { gap: 4px 10px !important; font-size: 12px !important; margin-bottom: 12px !important; }
  .ms-price-card__guarantee { padding: 8px 12px !important; margin-bottom: 12px !important; }
  .ms-price-card__guarantee span:last-child { font-size: 12.5px !important; line-height: 1.3 !important; }
  .ms-price-card__cta {
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    border-radius: 10px !important;
  }

  /* CATALOG — 1 col, snug cards */
  .ms-services-grid { gap: 10px !important; margin-top: 16px !important; }
  .ms-service-card { padding: 12px 14px !important; gap: 12px !important; border-radius: 12px !important; }
  .ms-service-card__icon { width: 44px !important; height: 44px !important; font-size: 22px !important; border-radius: 10px !important; }
  .ms-service-card__name { font-size: 14.5px !important; }
  .ms-service-card__price { font-size: 13px !important; }
  .ms-service-card__arrow { font-size: 18px !important; }

  /* HOW STEPS — compact icon, readable text */
  .ms-how__list { gap: 10px !important; }
  .ms-how-step { padding: 14px !important; gap: 12px !important; border-radius: 14px !important; }
  .ms-how-step__icon { width: 42px !important; height: 42px !important; }
  .ms-how-step__icon svg { width: 20px !important; height: 20px !important; }
  .ms-how-step__num { width: 20px !important; height: 20px !important; font-size: 9px !important; top: -4px !important; right: -4px !important; }
  .ms-how-step__title { font-size: 14.5px !important; }
  .ms-how-step__desc { font-size: 12.5px !important; line-height: 1.45 !important; }

  /* DOCTORS carousel — smaller cards, easier swipe */
  .ms-doctors { padding: 0 14px !important; }
  .ms-doctors__track { gap: 12px !important; padding: 6px 0 14px !important; }
  .ms-doctor { width: 152px !important; padding: 16px 10px 14px !important; border-radius: 14px !important; }
  .ms-doctor__avatar { width: 64px !important; height: 64px !important; margin: 0 auto 10px !important; }
  .ms-doctor__name { font-size: 13.5px !important; }
  .ms-doctor__spec { font-size: 11.5px !important; }
  .ms-doctor__exp { font-size: 11px !important; margin: 4px 0 0 !important; }
  .ms-doctors__fade { width: 40px !important; }

  /* REVIEWS — full-width card */
  .ms-section--reviews .ms-section__inner { padding: 18px 14px 14px !important; }
  .ms-review-card__head { gap: 8px !important; margin-bottom: 10px !important; }
  .ms-review-card__avatar { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .ms-review-card__name { font-size: 13.5px !important; }
  .ms-review-card__role { font-size: 11.5px !important; }
  .ms-review-card__text { font-size: 14px !important; line-height: 1.55 !important; }
  .ms-reviews-head { gap: 4px 8px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; }
  .ms-reviews-head__num { font-size: 22px !important; }
  .ms-reviews-head__count { font-size: 12px !important; }
  .ms-reviews-dots { margin-top: 14px !important; }

  /* FAQ — compact accordion */
  .ms-faq { padding: 0 14px !important; border-radius: 14px !important; }
  .ms-faq__q { padding: 14px 0 !important; font-size: 14.5px !important; gap: 8px !important; }
  .ms-faq__a { padding-bottom: 14px !important; font-size: 13.5px !important; line-height: 1.55 !important; }
  .ms-faq__chev { width: 18px !important; height: 18px !important; font-size: 11px !important; }

  /* SEO collapsible — readable text + big touch-friendly button */
  .ms-seo-text { font-size: 14.5px !important; line-height: 1.6 !important; max-height: 240px !important; }
  .ms-seo-text h3 { font-size: 18px !important; margin: 20px 0 10px !important; }
  .ms-seo-text h4 { font-size: 15px !important; margin: 16px 0 6px !important; }
  .ms-seo-text p { margin: 0 0 12px !important; }
  .ms-seo-text ul, .ms-seo-text ol { padding-left: 20px !important; }
  .ms-seo-toggle { padding: 14px 24px !important; font-size: 14px !important; width: 100% !important; max-width: 280px !important; }

  /* FINAL CTA card */
  .ms-final-clean { padding: 24px 18px !important; border-radius: 18px !important; }
  .ms-final-clean__title { font-size: clamp(22px, 6vw, 26px) !important; }
  .ms-final-clean__sub { font-size: 14px !important; margin-bottom: 16px !important; }
  .ms-final-clean__cta { padding: 14px 18px !important; font-size: 14.5px !important; }
  .ms-final-clean__msgr { gap: 8px !important; margin-bottom: 16px !important; }
  .ms-msg { padding: 12px 6px !important; font-size: 13px !important; }
  .ms-final-clean__trust { font-size: 11.5px !important; gap: 6px !important; }

  /* FOOTER — single column, breathable */
  .ms-footer { padding: 32px 16px 16px !important; }
  .ms-footer__grid { gap: 28px !important; margin-bottom: 24px !important; }
  .ms-footer__logo { font-size: 22px !important; }
  .ms-footer__tag { font-size: 13.5px !important; max-width: 100% !important; }
  .ms-footer__title { font-size: 11.5px !important; margin-bottom: 12px !important; }
  .ms-footer__phone { font-size: 16px !important; }
  .ms-footer__msgrs { gap: 6px !important; }
  .ms-footer__msg { padding: 6px 12px !important; font-size: 12px !important; }
  .ms-footer__list { gap: 8px !important; }
  .ms-footer__link { font-size: 13.5px !important; }
  .ms-footer__bottom { gap: 6px !important; padding-top: 16px !important; }
  .ms-footer__copyright,
  .ms-footer__legal { font-size: 11.5px !important; }

  /* STICKY BOTTOM CTA — ensure tap targets ≥44px, no overlap */
  .ms-sticky-cta { padding: 8px 12px !important; }
  .ms-sticky-cta__inner { gap: 8px !important; }
  .ms-sticky-cta__phone { width: 48px !important; height: 48px !important; flex-shrink: 0; }
  .ms-sticky-cta__btn { padding: 12px 18px !important; font-size: 14.5px !important; flex: 1 !important; justify-content: center !important; }
  body.has-sticky-cta { padding-bottom: 72px !important; }
}

/* ============ Extra small ≤ 380px (compact-phone tuning) ============ */
@media (max-width: 380px) {
  .ms-hero__title { font-size: clamp(20px, 7vw, 24px) !important; }
  .ms-stat-cell { padding: 10px 4px !important; }
  .ms-stat-cell__num { font-size: 16px !important; }
  .ms-stat-cell__label { font-size: 9px !important; }
  .ms-price-card__num { font-size: 32px !important; }
  .ms-msg { padding: 10px 4px !important; font-size: 12px !important; }
  .ms-msg span { display: none !important; }   /* show only icon on tiny screens */
  .ms-msg svg { width: 22px !important; height: 22px !important; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ ROUND 16 P22 (FIX-23) — Comprehensive responsive normalization           ║
   ║                                                                          ║
   ║ Standardized breakpoints (mobile-first):                                 ║
   ║   default (<480) — phone portrait                                        ║
   ║   480+         — phone landscape / phablet                               ║
   ║   640+         — tablet portrait                                         ║
   ║   768+         — tablet landscape                                        ║
   ║   1024+        — laptop / desktop                                        ║
   ║   1280+        — wide desktop                                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ---------- Global box-sizing + smooth scroll + iOS safe-area ---------- */
html { scroll-behavior: smooth; }
*,*::before,*::after { box-sizing: border-box; }
body { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ---------- Image / media fluidity (prevent overflow on any breakpoint) ---------- */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* ---------- Touch-target minimum 44×44 on mobile (Apple HIG / WCAG) ---------- */
@media (max-width: 768px) {
  .ms-service-card,
  .ms-faq__item summary,
  .ms-final-clean__cta,
  .ms-price-card__cta,
  .ms-seo-toggle,
  .ms-header-cta,
  .ms-msg,
  .ms-footer__link,
  .ms-footer__msg,
  .ms-footer__phone,
  .main-navigation .menu > li > a { min-height: 44px; }
}

/* ============ Tablet portrait 640-767px (fill the gap) ============ */
@media (min-width: 640px) and (max-width: 767px) {
  /* Hero — slightly more breathing room than phone */
  .ms-hero { padding: 36px 24px 44px !important; }
  .ms-hero__title { font-size: clamp(26px, 5vw, 32px) !important; }
  .ms-hero__bullets { max-width: 480px !important; }
  .ms-hero__quiz,
  .ms-hero__stats { max-width: 480px !important; }
  /* Catalog — 2 columns at tablet portrait */
  .ms-services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  /* Stats — bigger numbers on tablet */
  .ms-stat-cell__num { font-size: 22px !important; }
  .ms-stat-cell__label { font-size: 10.5px !important; }
  /* Reviews / FAQ contain bigger now */
  .ms-section--reviews .ms-section__inner { max-width: 600px !important; }
  /* Footer grid — 2 cols (brand wide, others compact) */
  .ms-footer__grid { grid-template-columns: 1.6fr 1fr !important; gap: 32px !important; }
}

/* ============ Tablet landscape 768-1023px ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .ms-hero { padding: 48px 32px 56px !important; }
  .ms-hero__title { font-size: clamp(30px, 4.5vw, 38px) !important; }
  /* Section paddings — moderate */
  .ms-section--catalog,
  .ms-section--how,
  .ms-section--doctors,
  .ms-section--reviews,
  .ms-section--faq,
  .ms-section--final,
  .ms-section--price,
  .ms-section--seo { padding: 48px 32px !important; }
  /* Catalog — 3 cols at tablet landscape */
  .ms-services-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  /* Hero quiz/stats centered, can be a bit wider */
  .ms-hero__quiz,
  .ms-hero__stats { max-width: 520px !important; }
  /* Footer 3 cols proportions tuned */
  .ms-footer__grid { grid-template-columns: 2fr 1fr 1fr !important; gap: 40px !important; }
}

/* ============ Desktop 1024+ — Hero becomes 2-col (text left | quiz right) ============ */
@media (min-width: 1024px) {
  /* Hero stretches near full-width on big screens */
  .ms-hero { padding: 72px 48px 88px !important; }
  .ms-hero__inner,
  .ms-hero--home .ms-hero__inner,
  .ms-hero--money .ms-hero__inner,
  .ms-hero--geo .ms-hero__inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 520px !important;
    grid-template-areas:
      "pill    quiz"
      "title   quiz"
      "chips   quiz"
      "bullets quiz"
      "stats   stats" !important;
    column-gap: 64px !important;
    row-gap: 16px !important;
    align-items: start !important;
    text-align: left !important;
  }
  .ms-hero__moz-pill { grid-area: pill; margin: 0 !important; justify-self: start; }
  .ms-hero__title    { grid-area: title; text-align: left !important; }
  .ms-hero__chips    { grid-area: chips; justify-content: flex-start !important; margin: 0 !important; }
  .ms-hero__subhead  { grid-area: bullets; }
  .ms-hero__bullets  { grid-area: bullets; max-width: none !important; }
  .ms-hero__quiz     { grid-area: quiz; max-width: none !important; width: 100% !important; margin: 0 !important; }
  .ms-hero__stats    { grid-area: stats; max-width: none !important; margin-top: 32px !important; }
  .ms-hero__stats .ms-stats-bento { max-width: 720px !important; margin: 0 auto !important; }

  /* UNIFIED content width across ALL sections — stretched to ~85% viewport on big screens */
  .ms-section--catalog .ms-section__inner,
  .ms-section--how .ms-section__inner,
  .ms-section--doctors .ms-section__inner,
  .ms-section--price .ms-section__inner,
  .ms-section--seo .ms-section__inner,
  .ms-section--reviews .ms-section__inner,
  .ms-section--faq .ms-section__inner,
  .ms-section--final .ms-section__inner {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* FAQ + FINAL cards stretch the FULL section width (same as footer) */
  .ms-faq { max-width: 100% !important; margin: 0 auto !important; padding: 0 32px !important; }
  .ms-final-clean { max-width: 100% !important; margin: 0 auto !important; padding: 48px 56px !important; }
  /* Constrain inner CTA button width so it doesn't span 1600+ pixels */
  .ms-final-clean__cta { max-width: 480px !important; margin: 0 auto !important; }
  .ms-final-clean__msgr { max-width: 540px !important; margin-left: auto !important; margin-right: auto !important; }
  .ms-final-clean__title,
  .ms-final-clean__sub,
  .ms-final-clean__or,
  .ms-final-clean__trust { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
  /* Section padding for desktop */
  .ms-section--catalog,
  .ms-section--how,
  .ms-section--doctors,
  .ms-section--reviews,
  .ms-section--faq,
  .ms-section--final,
  .ms-section--price,
  .ms-section--seo { padding: 64px 48px !important; }

  /* Catalog 4 cols on desktop */
  .ms-services-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
  /* How list — 3-col horizontal cards on desktop */
  .ms-how__list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .ms-how-step { flex-direction: column !important; align-items: flex-start !important; }
  .ms-how-step__body { padding-top: 12px !important; }
}

/* ============ Wide desktop 1280+ — stretch to near full width ============ */
@media (min-width: 1280px) {
  .ms-hero { padding: 88px 56px 104px !important; }
  .ms-hero__title { font-size: clamp(36px, 3.6vw, 52px) !important; }
  .ms-hero__inner,
  .ms-hero--home .ms-hero__inner,
  .ms-hero--money .ms-hero__inner,
  .ms-hero--geo .ms-hero__inner {
    max-width: 1600px !important;
    grid-template-columns: 1fr 560px !important;
    column-gap: 80px !important;
  }
  .ms-section--catalog,
  .ms-section--how,
  .ms-section--doctors,
  .ms-section--reviews,
  .ms-section--faq,
  .ms-section--final,
  .ms-section--price,
  .ms-section--seo { padding: 80px 56px !important; }
  /* Stretch content containers ~85% of viewport on big screens */
  .ms-section--catalog .ms-section__inner,
  .ms-section--how .ms-section__inner,
  .ms-section--doctors .ms-section__inner,
  .ms-section--price .ms-section__inner,
  .ms-section--seo .ms-section__inner,
  .ms-section--reviews .ms-section__inner,
  .ms-section--faq .ms-section__inner,
  .ms-section--final .ms-section__inner { max-width: 1600px !important; }
  .ms-faq { max-width: 100% !important; }
  .ms-final-clean { max-width: 100% !important; }
  /* How-step roomier */
  .ms-how-step { padding: 22px !important; }
  .ms-how-step__body { padding-top: 14px !important; }
  .ms-section__title { font-size: clamp(32px, 3vw, 44px) !important; }
  /* Header/Nav also wider */
  .site-header .inside-header,
  .main-navigation .inside-navigation { max-width: 1600px !important; padding: 14px 56px !important; }
  /* Footer too */
  .ms-footer__grid,
  .ms-footer__bottom { max-width: 1600px !important; }
}

/* ============ Ultra-wide ≥ 1600px ============ */
@media (min-width: 1600px) {
  .ms-section--catalog .ms-section__inner,
  .ms-section--how .ms-section__inner,
  .ms-section--doctors .ms-section__inner,
  .ms-section--price .ms-section__inner,
  .ms-section--seo .ms-section__inner,
  .ms-section--reviews .ms-section__inner,
  .ms-section--faq .ms-section__inner,
  .ms-section--final .ms-section__inner { max-width: 1800px !important; }
  .ms-hero__inner,
  .ms-hero--home .ms-hero__inner,
  .ms-hero--money .ms-hero__inner,
  .ms-hero--geo .ms-hero__inner {
    max-width: 1800px !important;
    grid-template-columns: 1fr 600px !important;
  }
  .site-header .inside-header,
  .main-navigation .inside-navigation,
  .ms-footer__grid,
  .ms-footer__bottom { max-width: 1800px !important; }
  .ms-section--catalog,
  .ms-section--how,
  .ms-section--doctors,
  .ms-section--reviews,
  .ms-section--faq,
  .ms-section--final,
  .ms-section--price,
  .ms-section--seo,
  .ms-hero { padding-left: 64px !important; padding-right: 64px !important; }
}

/* ============ Mobile fine-tuning (≤ 639px) ============ */
@media (max-width: 639px) {
  /* Prevent horizontal scroll from any rogue elements */
  body, html { overflow-x: hidden !important; max-width: 100vw !important; }
  /* Section inner — no fixed max-width on mobile, full available width */
  .ms-section__inner { max-width: 100% !important; padding: 0 !important; }
  /* Iframes / forms — full width */
  .fluentform, .ms-hero__quiz iframe { width: 100% !important; }
  /* Smooth swipe-friendly carousels */
  .ms-doctors__track,
  .ms-reviews-track { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  /* Safe-area for iPhone bottom (sticky CTA) */
  .ms-sticky-cta { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
  body.has-sticky-cta { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ============ Print friendly ============ */
@media print {
  .ms-sticky-cta, .ms-header-actions, .main-navigation, .ms-breadcrumbs, .ms-seo-toggle, .ms-footer { display: none !important; }
  .ms-seo-text { max-height: none !important; }
  .ms-seo-text::after { display: none !important; }
}
.main-navigation .sub-menu li a {
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #374151 !important;
}
.main-navigation .sub-menu li a:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* ============ Pt.3-7 — Hero composition (centered, single column) ============ */
.ms-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding: 48px 20px 56px !important;
}
@media (min-width: 768px) { .ms-hero { padding: 64px 24px 72px !important; } }
@media (max-width: 480px) { .ms-hero { padding: 32px 16px 40px !important; } }
.ms-hero__inner,
.ms-hero--home .ms-hero__inner,
.ms-hero--money .ms-hero__inner,
.ms-hero--geo .ms-hero__inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
}
.ms-hero__moz-pill { margin: 0 !important; }
.ms-hero__title { margin: 0 !important; text-align: center !important; }
.ms-hero__chips { justify-content: center !important; margin: 0 !important; }
.ms-hero__subhead { margin: 0 !important; max-width: 580px; }

/* Pt.5 — Bullets back into the central composition */
.ms-hero__bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 520px !important;
  text-align: left !important;
}
.ms-hero__bullets li {
  position: relative !important;
  padding-left: 28px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #374151 !important;
}
.ms-hero__bullets li::before {
  content: "✓" !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #15803d;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* Pt.7 — Quiz card centered under hero, breathing room */
.ms-hero__quiz {
  width: 100% !important;
  max-width: 560px !important;
  margin: 16px auto 0 !important;
}

/* Pt.8 — Social-proof stats glued to hero */
.ms-hero__stats {
  width: 100% !important;
  max-width: 560px !important;
  margin: 12px auto 0 !important;
}
.ms-stats-bento { max-width: 560px !important; }
.ms-stat-cell {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 14px -10px rgba(15,23,42,.10) !important;
}

/* ============ Pt.9 — Breadcrumbs above hero, neutral & small (aligned under logo) ============ */
.ms-breadcrumbs {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 24px 16px 14px !important;
  font-size: 12.5px !important;
  color: #9ca3af !important;
  background: transparent !important;
  border-bottom: 0 !important;
  text-align: left !important;
}
@media (min-width: 768px) {
  .ms-breadcrumbs { padding: 32px 32px 16px !important; }
}
.ms-breadcrumbs a { color: #6b7280 !important; }
.ms-breadcrumbs .last { color: #6b7280 !important; font-weight: 600 !important; }

/* ============ Pt.10 — Unified vertical spacing scale ============ */
/* (already enforced 40/56/28 in P13 — keep) */

/* ============ Pt.11 — Smooth transition into "Прозорі ціни" ============ */
.ms-hero + .ms-section,
.ms-hero + .ms-breadcrumbs + .ms-section,
.entry-content > .ms-section:first-of-type {
  margin-top: 0 !important;
}

/* ============ Pt.12 — Typography hierarchy cleanup ============ */
.ms-hero__title {
  font-size: clamp(28px, 5.5vw, 44px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
.ms-hero__chips .ms-hero__chip {
  font-size: 14.5px !important;
  font-weight: 700 !important;
}
.ms-hero__subhead { font-size: 15.5px !important; line-height: 1.55 !important; color: #4b5563 !important; }

/* ============ Pt.13 — Color system: kill stray blacks ============ */
.main-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav ul,
.main-navigation .main-nav li,
.main-navigation .main-nav li a {
  background-color: transparent !important;
}
.main-navigation { background: #ffffff !important; }
/* Force any GP-injected dark wrappers light */
.ms-header-actions { background: transparent !important; }

/* ============ Pt.1+2 enforcement: force desktop menu visible ============ */
@media (min-width: 769px) {
  .main-navigation .main-nav,
  .main-navigation #primary-menu,
  .main-navigation .menu,
  .main-navigation .sf-menu { display: block !important; visibility: visible !important; }
  .main-navigation .main-nav > ul,
  .main-navigation #primary-menu > ul,
  .main-navigation .menu.sf-menu,
  .main-navigation ul.sf-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-navigation .menu > li,
  .main-navigation .sf-menu > li { display: inline-flex !important; align-items: center; }
  /* Hide GP's mobile burger when we have real desktop menu */
  .main-navigation .menu-toggle,
  .main-navigation .mobile-menu-control-wrapper { display: none !important; }
  .ms-mobile-toggle { display: none !important; }
}

/* ============ Pt.3 reinforced — full-width layout (no narrow squeeze on wide screens) ============ */
/* Kill ALL GeneratePress wrappers that constrain width / float content left */
.site,
.site-content,
.site-grid,
.site-main,
.content-area,
.inside-article,
#page,
.entry-content,
.grid-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}
/* Header/Nav grid-containers keep their own container width (defined elsewhere) */
.site-header .inside-header,
.main-navigation .inside-navigation {
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* .inside-article (GP separate-containers wrap for page content) — strip default 40px padding */
.inside-article { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
/* Section wrappers — bumped to 1400 for content sections */
.ms-section--catalog .ms-section__inner,
.ms-section--how .ms-section__inner,
.ms-section--doctors .ms-section__inner,
.ms-section--price .ms-section__inner,
.ms-section--faq .ms-section__inner,
.ms-section--reviews .ms-section__inner,
.ms-section--final .ms-section__inner,
.ms-section--seo .ms-section__inner {
  max-width: 1200px !important;
}

/* ============ Mobile burger drawer (GP .menu-toggle path) ============ */
@media (max-width: 768px) {
  /* Show the GP burger; we hide our duplicate .ms-mobile-toggle */
  .ms-mobile-toggle { display: none !important; }
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .menu-toggle .mobile-menu { display: none; }  /* text label not needed; use bars below */
  .menu-toggle::before {
    content: "";
    display: block;
    width: 20px; height: 14px;
    background:
      linear-gradient(#0f172a, #0f172a) 0 0/100% 2px no-repeat,
      linear-gradient(#0f172a, #0f172a) 0 50%/100% 2px no-repeat,
      linear-gradient(#0f172a, #0f172a) 0 100%/100% 2px no-repeat;
  }
  .menu-toggle[aria-expanded="true"]::before {
    background:
      linear-gradient(#0f172a, #0f172a) 0 50%/100% 2px no-repeat,
      linear-gradient(#0f172a, #0f172a) 0 50%/100% 2px no-repeat;
    transform: rotate(0deg);
  }

  /* Drawer panel */
  .main-navigation .main-nav,
  .main-navigation #primary-menu { display: none !important; }
  .main-navigation.toggled .main-nav,
  .main-navigation.toggled #primary-menu {
    display: block !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 16px 32px -16px rgba(15,23,42,.18);
    padding: 12px 16px;
    z-index: 100;
  }
  .main-navigation.toggled .menu {
    display: block !important;
    flex-direction: column !important;
  }
  .main-navigation.toggled .menu > li { display: block !important; width: 100%; }
  .main-navigation.toggled .menu > li > a {
    display: block !important;
    padding: 14px 12px !important;
    border-radius: 8px;
    font-size: 16px !important;
  }
  .main-navigation.toggled .sub-menu {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 4px 8px 8px 16px !important;
    margin: 0 !important;
    background: transparent !important;
  }
}

/* ============ Pt.14 — Mobile clean stack ============ */
@media (max-width: 768px) {
  .site-header .inside-header { padding: 12px 16px !important; }
  .main-navigation .inside-navigation { padding: 0 16px !important; }
  .ms-hero__inner { gap: 14px !important; }
  .ms-hero__title { font-size: clamp(24px, 7vw, 32px) !important; }
  .ms-hero__bullets { max-width: 100% !important; }
  .ms-hero__quiz,
  .ms-hero__stats { max-width: 100% !important; }
  .ms-breadcrumbs { padding: 8px 16px !important; font-size: 12px !important; }
}
@media (max-width: 480px) {
  .ms-hero__bullets li { font-size: 14.5px !important; }
}

/* =====================================================================
   Pt.18 — Dual-layout strategy:
     • <1024px → show .ms-mobile-only (existing mobile DOM, untouched)
     • ≥1024px → show .ms-desktop-only (separate desktop DOM, .msd-* prefix)
   ===================================================================== */

.ms-desktop-only { display: none; }
.ms-mobile-only  { display: block; }

@media (min-width: 1024px) {
  .ms-mobile-only  { display: none !important; }
  .ms-desktop-only { display: block; }
}

/* ============ DESKTOP HERO (.msd-hero) — only ≥1024px ============ */
@media (min-width: 1024px) {

  .msd-hero {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: 64px 32px 80px;
  }
  .msd-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 480px);
    column-gap: 56px;
    align-items: start;
  }
  .msd-hero__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }
  .msd-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
  }
  .msd-hero__pill-icon { color: #10b981; }
  .msd-hero__title {
    margin: 0;
    font-size: clamp(36px, 3.4vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
  }
  .msd-hero__accent { color: #2563eb; }
  .msd-hero__subhead {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #475569;
  }
  .msd-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
  .msd-hero__chip {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
  }
  .msd-hero__chip--time { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
  .msd-hero__bullets {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .msd-hero__bullets li {
    position: relative;
    padding-left: 30px;
    font-size: 16.5px;
    line-height: 1.5;
    color: #334155;
  }
  .msd-hero__bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: #d1fae5
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
      center/12px no-repeat;
  }
  .msd-hero__bullets strong { color: #0f172a; font-weight: 700; }
  .msd-hero__stats {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .msd-hero__stat {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  }
  .msd-hero__stat-num {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
  }
  .msd-hero__stat-star { color: #f59e0b; }
  .msd-hero__stat-label {
    margin-top: 4px;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 500;
  }

  .msd-hero__right { min-width: 0; }
  .msd-hero__quiz-shell {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 24px 60px -24px rgba(15,23,42,0.18), 0 8px 24px -10px rgba(37,99,235,0.10);
    overflow: hidden;
  }
  /* Desktop quiz internals — namespace-scoped overrides so we don't touch mobile rules */
  .msd-hero__quiz-shell .ms-quiz {
    padding: 26px 26px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .msd-hero__quiz-shell .ms-quiz__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .msd-hero__quiz-shell .ms-quiz__form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 14px !important;
  }
  .msd-hero__quiz-shell .ms-quiz__form > .ms-quiz__field:nth-of-type(1) { grid-column: 1 / 2; }
  .msd-hero__quiz-shell .ms-quiz__form > .ms-quiz__field:nth-of-type(2) { grid-column: 2 / 3; }
  .msd-hero__quiz-shell .ms-quiz__form > .ms-quiz__field:nth-of-type(3) { grid-column: 1 / -1; }
  .msd-hero__quiz-shell .ms-quiz__form > .ms-quiz__submit,
  .msd-hero__quiz-shell .ms-quiz__form > .ms-quiz__privacy { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .msd-hero__inner {
    max-width: 1280px;
    grid-template-columns: minmax(0, 1.1fr) minmax(500px, 540px);
    column-gap: 72px;
  }
  .msd-hero { padding: 80px 40px 96px; }
}
@media (min-width: 1536px) {
  .msd-hero__inner { max-width: 1440px; }
}

/* ============ Simple content pages (about, contacts, privacy, faq) ============ */
.ms-section--content { padding: 2.5rem 1rem; }
@media (min-width: 768px) { .ms-section--content { padding: 3.5rem 1.5rem; } }
@media (min-width: 1024px) { .ms-section--content { padding: 4.5rem 2rem; } }

.ms-content-text {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.65;
  color: #334155;
}
.ms-content-text h2 {
  margin: 2em 0 0.6em;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}
.ms-content-text h3 {
  margin: 1.6em 0 0.4em;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
}
.ms-content-text p { margin: 0 0 1em; }
.ms-content-text ul, .ms-content-text ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.ms-content-text li { margin-bottom: 0.4em; }
.ms-content-text a { color: #2563eb; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ms-content-text a:hover { text-decoration-thickness: 2px; }
.ms-content-text strong { color: #0f172a; }
.ms-content-text hr { margin: 2.5em 0; border: 0; border-top: 1px solid #e2e8f0; }
.ms-content-text blockquote {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 3px solid #2563eb;
  background: #f8fafc;
  color: #475569;
}

/* ============ Status indicator — inside the menu bar (right side, near phone) ============ */
.ms-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  line-height: 1.2;
  order: 2 !important;   /* same cluster as actions/phone on the right */
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: auto;     /* push to the right; everything after it stays adjacent */
  margin-right: 8px;
}
.ms-status-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  flex-shrink: 0;
}
.ms-status-bar__text { white-space: nowrap; }

/* Mobile: shorten — keep dot + "Онлайн" only; hide "Працюємо сьогодні…" */
@media (max-width: 768px) {
  .ms-status-bar { margin-left: 10px; font-size: 12px; }
  .ms-status-bar__sep,
  .ms-status-bar__hours { display: none; }
}
/* Tiny phones — hide whole status to save space for burger */
@media (max-width: 380px) {
  .ms-status-bar { display: none; }
}

/* ============ Dropdown: opaque background + hover-bridge fix ============ */
/* Force solid white background — defeats any GP/plugin transparency override */
.site .main-navigation .sub-menu,
.main-navigation li .sub-menu,
.main-navigation ul ul {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* Hover bridge — invisible strip above sub-menu so cursor moving from trigger
   down into menu stays inside the hover area; without this, browser sees the
   gap and triggers mouseleave, hiding the menu mid-move. */
.main-navigation .sub-menu::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 14px !important;
  background: transparent !important;
  pointer-events: auto !important;
}
/* Delay hide — gives ~250ms to move cursor from trigger into menu */
.main-navigation .menu-item-has-children > .sub-menu {
  transition: opacity .15s ease, transform .15s ease, visibility .15s, visibility 0s linear .25s !important;
  transition-delay: 0s, 0s, .25s, 0s !important;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
  transition-delay: 0s !important;
}
/* Items themselves get a contrasting hover bg */
.main-navigation .sub-menu li a {
  background: transparent !important;
}
.main-navigation .sub-menu li a:hover,
.main-navigation .sub-menu li a:focus {
  background: #f1f5f9 !important;
}

/* ============ Cashback chip — emerald, distinct from gold price ============ */
.ms-hero__chip--cashback {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-weight: 700;
}
.msd-hero__chip--cashback {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * MEDCLINICA OVERRIDES
 * ─────────────────────────────────────────────────────────────────────────
 * Last-wins, append-only block. All MedClinica-specific palette,
 * typography, section and component tweaks go HERE — NOT in the base
 * layer (lines 1-1500) or the Round 16 patches above.
 *
 * Rules of engagement:
 *   - Override tokens via :root { --token: value; } at the top of TOKENS.
 *   - Override existing classes via specific selectors. Avoid !important
 *     unless overriding a Round 16 !important rule (which is sometimes
 *     unavoidable — flag with a comment when you do).
 *   - New classes follow .ms-* family naming.
 *   - Sub-sections below stay in this order. Add rules inside, never
 *     above the divider.
 *
 * Status (Patch 2): scaffolding only. Zero rules. Zero braces.
 *                   Adding rules is the job of Patch 9 and later.
 * ───────────────────────────────────────────────────────────────────────── */

/* 1. TOKENS — palette + typography overrides ----------------------------- */
/* TODO (P9): define MedClinica palette here when approved.                 */

/* 2. LAYOUT — hero / sections / containers ------------------------------- */

/* Desktop home/state — vertically center the left column against the
 * taller right column (quiz aside). Compensates for stats removed in P3a.
 * Money/geo not affected — they retain stats and natural alignment. */
.msd-hero--home  .msd-hero__inner,
.msd-hero--state .msd-hero__inner {
  align-items: center;
}

/* CTA pair layout — home/state only. Scoped to avoid the single-button
 * geo variant. On <480px the pair stacks column with full-width buttons;
 * from 480px+ the pair rows with centered alignment.
 * NOTE: !important on margin/gap is required to beat Round 16 P15 rule
 * (style.css:1758) which set margin-top/gap with !important. */
.ms-hero--home  .ms-hero__cta,
.ms-hero--state .ms-hero__cta {
  flex-direction: column;
  align-items: stretch;
  gap: 10px !important;
  max-width: 480px;
  margin: 16px auto 0 !important;
}

@media (min-width: 480px) {
  .ms-hero--home  .ms-hero__cta,
  .ms-hero--state .ms-hero__cta {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px !important;
  }
}

/* 3. COMPONENTS — quiz / cards / buttons --------------------------------- */

/* Secondary CTA — mobile (ghost/outline). Companion to .ms-hero__btn
 * (which extends .btn-primary). Used in home + state hero CTA pair. */
.ms-hero__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.ms-hero__btn--secondary:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  text-decoration: none;
}
.ms-hero__btn--secondary:active {
  transform: scale(0.99);
}
.ms-hero__btn--secondary:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: 2px;
}

/* State disclaimer — мягкий, не алармизм. Sits under CTA pair on
 * .ms-hero--state pages. Border-top softly separates it from CTAs. */
.ms-hero__disclaimer {
  margin: 16px auto 0;
  max-width: 480px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

/* Desktop CTA pair — NEW class, no base rule exists.
 * Lives in .msd-hero__left, between bullets and (removed) stats. */
.msd-hero__cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  justify-content: flex-start;
}

/* Desktop primary CTA — NEW (no base rule). Used as .btn-primary
 * .msd-hero__btn in markup, so styles here augment .btn-primary. */
.msd-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.msd-hero__btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(37, 99, 235, 0.65);
}
.msd-hero__btn:active {
  transform: translateY(0) scale(0.99);
}
.msd-hero__btn:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: 2px;
}

/* Desktop secondary CTA — ghost/outline */
.msd-hero__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.msd-hero__btn--secondary:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
  text-decoration: none;
}
.msd-hero__btn--secondary:active {
  transform: scale(0.99);
}
.msd-hero__btn--secondary:focus-visible {
  outline: 2px solid var(--color-primary-soft);
  outline-offset: 2px;
}

/* Desktop disclaimer — same palette as mobile, left-aligned for desktop reading */
.msd-hero__disclaimer {
  margin: 16px 0 0;
  max-width: 520px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
}

/* 4. NEW SECTIONS -------------------------------------------------------- */

/* Urgent strip — soft notice below hero */
.ms-urgent-strip {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 16px;
  margin: 0;
}
.ms-urgent-strip .ms-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.ms-urgent-strip__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.5;
}
.ms-urgent-strip__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 0.875rem;
  border-radius: var(--radius-btn);
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease;
}
.ms-urgent-strip__cta:hover { background: var(--color-primary-hover); color: #fff; text-decoration: none; }
@media (min-width: 640px) {
  .ms-urgent-strip .ms-section__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Section--cases */
.ms-section--cases { padding: 56px 16px; }
.ms-section--cases .ms-section__inner { max-width: 1100px; margin: 0 auto; }
.ms-cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}
.ms-case-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.ms-case-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lifted); }
.ms-case-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-heading);
  margin: 0 0 8px;
  line-height: 1.4;
}
.ms-case-card__text {
  margin: 0;
  color: var(--color-text-body);
  font-size: 0.9375rem;
  line-height: 1.55;
}
@media (min-width: 640px) { .ms-cases-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .ms-cases-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Section--addiction (sensitive, soft tone) */
.ms-section--addiction {
  padding: 56px 16px;
  background: var(--color-bg-soft);
}
.ms-section--addiction .ms-section__head {
  max-width: 720px;
  margin: 0 auto 24px;
}
.ms-section--addiction .ms-section__head--left { text-align: left; }
.ms-addiction-content {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
}
.ms-addiction-points {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.ms-addiction-points li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.55;
}
.ms-addiction-points li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.ms-addiction-points li + li { border-top: 1px solid var(--color-border); }
.ms-addiction-cta {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  text-align: center;
}
.ms-addiction-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  margin-bottom: 12px;
  transition: background 160ms ease, transform 160ms ease;
  min-height: 48px;
}
.ms-addiction-cta__btn:hover { background: var(--color-primary-hover); transform: translateY(-1px); color: #fff; text-decoration: none; }
.ms-addiction-cta__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Section--founder */
.ms-section--founder { padding: 56px 16px; }
.ms-founder {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.ms-founder__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-bg-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--color-primary);
}
.ms-founder__photo img { width: 100%; height: 100%; object-fit: cover; display: none; }
.ms-founder__body { flex: 1; min-width: 0; }
.ms-founder__quote {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-heading);
  font-style: italic;
  margin: 0 0 16px;
  font-weight: 500;
}
.ms-founder__principles { margin-bottom: 16px; }
.ms-founder__principles p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.5;
}
.ms-founder__sig {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-heading);
}
.ms-founder__role {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
@media (min-width: 640px) {
  .ms-founder { flex-direction: row; align-items: flex-start; text-align: left; }
  .ms-founder__quote { font-size: 1.125rem; }
}

/* Section--specialists */
.ms-section--specialists { padding: 56px 16px; }
.ms-section--specialists .ms-section__inner { max-width: 1100px; margin: 0 auto; }
.ms-specialists-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}
.ms-specialist-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  padding: 20px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.ms-specialist-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lifted); }
.ms-specialist-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text-heading);
  margin: 0 0 8px;
}
.ms-specialist-card__scope {
  margin: 0;
  color: var(--color-text-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (min-width: 640px) { .ms-specialists-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .ms-specialists-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* Section--price (override Round 16 background) */
.ms-section--price {
  padding: 56px 16px !important;
  background: var(--color-bg-soft) !important;
}
.ms-section--price .ms-section__inner { max-width: 720px; margin: 0 auto; }
.ms-price-list {
  margin: 24px 0 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ms-price-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.ms-price-row:last-child { border-bottom: 0; }
.ms-price-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-heading);
}
.ms-price-row__val {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
@media (min-width: 640px) {
  .ms-price-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
  .ms-price-row__val { text-align: right; flex-shrink: 0; }
}

/* Section--districts */
.ms-section--districts { padding: 56px 16px; }
.ms-section--districts .ms-section__inner { max-width: 720px; margin: 0 auto; }
.ms-districts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.ms-district-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-radius: var(--radius-card);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-heading);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  text-align: center;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
  min-height: 56px;
}
.ms-district-card:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  text-decoration: none;
}
@media (min-width: 480px) { .ms-districts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .ms-districts-grid { grid-template-columns: repeat(5, 1fr); } }

/* Section--faq (override Round 16) */
.ms-section--faq { padding: 56px 16px !important; }
.ms-section--faq .ms-section__inner { max-width: 720px; margin: 0 auto; }
.ms-faq-list { margin-top: 24px; }
.ms-faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.ms-faq-item:hover { box-shadow: var(--shadow-card); border-color: var(--color-primary-soft); }
.ms-faq-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-heading);
  margin: 0 0 8px;
  line-height: 1.4;
}
.ms-faq-item p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.55;
}

/* Services-grid + service-card adjustments (base in Round 16 — soften here) */
.ms-section--services { padding: 56px 16px; }
.ms-section--services .ms-section__inner { max-width: 1100px; margin: 0 auto; }

/* Section--services-card description (already styled in base; soften) */
.ms-service-card__desc {
  display: block;
  margin: 6px 0 10px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Quiz multi-step extensions */
.ms-quiz__cards--2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ms-quiz__cards--3col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 480px) {
  .ms-quiz__cards--2col { grid-template-columns: 1fr 1fr; }
  .ms-quiz__cards--3col { grid-template-columns: repeat(3, 1fr); }
}
.ms-card--compact {
  padding: 12px 14px !important;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ms-card--compact .ms-card__title { font-size: 0.9375rem; }

/* Quiz textarea */
.ms-quiz__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 84px;
  background: var(--color-bg);
  color: var(--color-text-body);
  box-sizing: border-box;
}
.ms-quiz__field textarea:focus {
  outline: 2px solid var(--color-primary-soft);
  border-color: var(--color-primary);
}

/* Quiz messenger preference chips */
.ms-quiz__messenger {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.ms-quiz__messenger legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-heading);
  padding: 0;
  margin-bottom: 10px;
}
.ms-quiz__messenger-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ms-quiz__messenger-opt {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-body);
  position: relative;
}
.ms-quiz__messenger-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.ms-quiz__messenger-opt:hover { border-color: var(--color-primary); }
.ms-quiz__messenger-opt:has(input:checked) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}
/* Fallback for older browsers without :has — selected via class toggle by JS optional */

/* Section gap unification — remove default body padding gaps between sections */
.ms-section + .ms-section { margin-top: 0; }
.ms-urgent-strip + .ms-section { margin-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────
 * MEDCLINICA OVERRIDES — QUIZ REDESIGN (ref: SanitarKnyzhka funnel)
 * Pattern: rich icon cards + confirm banner + summary + analyzing + thanks burst
 * All inside .ms-quiz scope so we don't fight Round 16 quiz rules
 * ───────────────────────────────────────────────────────────────────────── */

/* Container reset — Round 16 already styled .ms-quiz card; keep that as shell */
.ms-quiz { font-family: var(--font-display); }

/* Progress bar — 5 segments, larger gap */
.ms-quiz .ms-quiz__progress {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
}
.ms-quiz .ms-quiz__seg {
  flex: 1;
  height: 4px !important;
  background: #e5e7eb !important;
  border-radius: 2px !important;
  transition: background 280ms ease;
}
.ms-quiz .ms-quiz__seg.is-active {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-end)) !important;
}

/* Step animation — slide-in on activation */
.ms-quiz__step { display: none; }
.ms-quiz__step.is-active {
  display: block !important;
  animation: ms-q-slide 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ms-q-slide {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Operator banner */
.ms-q-operator {
  position: relative;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 60%, #eff6ff 100%);
  border: 2px solid #c7d2fe;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ms-q-operator__photo {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.ms-q-operator__photo img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #eff6ff;
  box-shadow: none;
}
/* Hide the green online dot (visual noise under the photo) */
.ms-q-operator__dot { display: none !important; }
.ms-q-operator__dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #fff;
}
.ms-q-operator__text { flex: 1; min-width: 0; }
.ms-q-operator__name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #1e3a8a;
  line-height: 1.2;
}
.ms-q-operator__msg {
  margin: 4px 0 0;
  font-size: 13px;
  color: #1d4ed8;
  line-height: 1.4;
}
.ms-q-operator__tail {
  position: absolute;
  left: 28px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #eef2ff, #eff6ff);
  border-right: 2px solid #c7d2fe;
  border-bottom: 2px solid #c7d2fe;
  transform: rotate(45deg);
}

/* Confirm banner (between steps) */
.ms-q-banner {
  background: linear-gradient(135deg, #eff6ff, #eef2ff, #eff6ff);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.ms-q-banner__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-q-banner__icon svg { width: 16px; height: 16px; }
.ms-q-banner__text { flex: 1; min-width: 0; }
.ms-q-banner__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #1e3a8a;
  line-height: 1.25;
}
.ms-q-banner__sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: #1d4ed8;
  line-height: 1.4;
}

/* Step head */
.ms-q-head {
  margin: 6px 4px 14px;
}
.ms-q-head--center { text-align: center; }
.ms-q-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--color-text-heading);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.ms-q-sub {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.ms-q-sub strong { color: var(--color-text-heading); font-weight: 700; }

/* Cards stack */
.ms-q-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-q-cards--districts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 520px) {
  .ms-q-cards--districts { grid-template-columns: repeat(3, 1fr); }
}

/* Card */
.ms-q-card {
  position: relative;
  width: 100%;
  padding: 14px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 100ms ease;
  animation: ms-q-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.ms-q-card:nth-child(1)  { animation-delay: 0.05s; }
.ms-q-card:nth-child(2)  { animation-delay: 0.10s; }
.ms-q-card:nth-child(3)  { animation-delay: 0.13s; }
.ms-q-card:nth-child(4)  { animation-delay: 0.16s; }
.ms-q-card:nth-child(5)  { animation-delay: 0.19s; }
.ms-q-card:nth-child(6)  { animation-delay: 0.22s; }
.ms-q-card:nth-child(7)  { animation-delay: 0.25s; }
.ms-q-card:nth-child(8)  { animation-delay: 0.28s; }
.ms-q-card:nth-child(9)  { animation-delay: 0.31s; }
.ms-q-card:nth-child(10) { animation-delay: 0.34s; }
@keyframes ms-q-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ms-q-card:hover { border-color: #93c5fd; box-shadow: 0 6px 18px -10px rgba(37,99,235,0.30); }
.ms-q-card:active { transform: scale(0.98); }
.ms-q-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Card selected */
.ms-q-card.is-selected {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  border-color: var(--color-primary);
  box-shadow: 0 12px 28px -10px rgba(37,99,235,0.45);
}
.ms-q-card.is-selected .ms-q-card__title,
.ms-q-card.is-selected .ms-q-card__meta { color: #fff; }
.ms-q-card.is-selected .ms-q-card__icon { background: rgba(255,255,255,0.18); color: #fff; }
.ms-q-card.is-selected .ms-q-card__chevron { color: #fff; animation: none; }

/* Card icon square */
.ms-q-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease;
}
.ms-q-card__icon svg { width: 22px; height: 22px; }
.ms-q-card__icon--blue  { background: #dbeafe; color: var(--color-primary); }
.ms-q-card__icon--amber { background: #fef3c7; color: #b45309; }
.ms-q-card__icon--red   { background: #fee2e2; color: #dc2626; }
.ms-q-card__icon--gray  { background: #f3f4f6; color: #6b7280; }

/* Card body */
.ms-q-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-q-card__title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.25;
}
.ms-q-card__meta {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* Card chevron with pulse animation */
.ms-q-card__chevron {
  flex-shrink: 0;
  color: #93c5fd;
  display: inline-flex;
  align-items: center;
  animation: ms-q-chev-pulse 1.6s ease-in-out infinite;
}
.ms-q-card__chevron svg { width: 16px; height: 16px; }
@keyframes ms-q-chev-pulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* Card variants */
.ms-q-card--muted { background: #f9fafb; border-color: #e5e7eb; }
.ms-q-card--muted:hover { border-color: #9ca3af; }
.ms-q-card--sensitive { background: linear-gradient(135deg, #fffbeb, #fff); border-color: #fde68a; }
.ms-q-card--sensitive:hover { border-color: #f59e0b; box-shadow: 0 6px 18px -10px rgba(245,158,11,0.30); }

/* District compact card */
.ms-q-card--district {
  padding: 12px;
  gap: 10px;
}
.ms-q-card--district .ms-q-card__icon { width: 36px; height: 36px; border-radius: 10px; }
.ms-q-card--district .ms-q-card__icon svg { width: 18px; height: 18px; }
.ms-q-card--district .ms-q-card__title { font-size: 14px; }

/* Back button */
.ms-q-back {
  margin-top: 14px;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 160ms ease;
}
.ms-q-back:hover { color: var(--color-primary); }

/* Footer line */
.ms-q-foot {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: #9ca3af;
}

/* ─── STEP 4: Summary + Form ─── */
.ms-q-summary {
  background: linear-gradient(135deg, #eff6ff, #eef2ff, #eff6ff);
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ms-q-summary__eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1d4ed8;
}
.ms-q-summary__rows { display: flex; flex-direction: column; gap: 6px; }
.ms-q-summary__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-heading);
}
.ms-q-summary__row--divider {
  border-top: 1px solid #bfdbfe;
  padding-top: 8px;
  margin-top: 4px;
}
.ms-q-summary__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-q-summary__check svg { width: 16px; height: 16px; }

/* Form card */
.ms-q-form-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 8px 32px -12px rgba(15,23,42,0.12);
}
.ms-q-form { display: flex; flex-direction: column; gap: 12px; }
.ms-q-field { display: flex; flex-direction: column; gap: 6px; }
.ms-q-field__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #374151;
}
.ms-q-field__label small { font-weight: 400; color: #9ca3af; text-transform: none; letter-spacing: 0; font-size: 12px; margin-left: 4px; }
.ms-q-req { color: #ef4444; }
.ms-q-field__wrap {
  position: relative;
  display: block;
}
.ms-q-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.ms-q-field__icon svg { width: 16px; height: 16px; }
.ms-q-field input[type="text"],
.ms-q-field input[type="tel"] {
  width: 100%;
  padding: 12px 12px 12px 38px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-heading);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ms-q-field input::placeholder { font-weight: 400; color: #9ca3af; }
.ms-q-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.10); }
.ms-q-field input.is-error { border-color: #ef4444; }
.ms-q-field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  resize: vertical;
  min-height: 72px;
  background: #fff;
  box-sizing: border-box;
}
.ms-q-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.10); }
.ms-q-field__error {
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
}

/* Messenger chips */
.ms-q-msg { border: 0; padding: 0; margin: 4px 0 0; }
.ms-q-msg legend { padding: 0; margin-bottom: 6px; }
.ms-q-msg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-q-msg__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: #4b5563;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ms-q-msg__chip input { position: absolute; opacity: 0; pointer-events: none; }
.ms-q-msg__chip:hover { border-color: #93c5fd; }
.ms-q-msg__chip.is-selected {
  background: #dbeafe;
  border-color: var(--color-primary);
  color: #1d4ed8;
}

/* Submit button */
.ms-q-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  color: #fff;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(37,99,235,0.45);
  transition: transform 100ms ease, box-shadow 160ms ease;
  margin-top: 4px;
}
.ms-q-submit:hover { box-shadow: 0 16px 32px -10px rgba(37,99,235,0.55); }
.ms-q-submit:active { transform: scale(0.98); }
.ms-q-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.ms-q-submit__icon svg { width: 18px; height: 18px; }

.ms-q-privacy {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: #6b7280;
  font-weight: 500;
}

/* ─── STEP 5: Analyzing ─── */
.ms-q-analyzing {
  text-align: center;
  padding: 16px 8px 8px;
}
.ms-q-analyzing__logo {
  display: inline-block;
  margin-bottom: 20px;
  animation: ms-q-rotate 2s linear infinite;
}
.ms-q-analyzing__spinner {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  box-shadow: 0 16px 36px -10px rgba(37,99,235,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ms-q-analyzing__spinner::after {
  content: '';
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,0.30);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ms-q-spin 1s linear infinite;
}
@keyframes ms-q-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ms-q-spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ms-q-analyzing__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
}
.ms-q-analyzing__sub {
  margin: 0 0 24px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.ms-q-analyzing__bar {
  max-width: 320px;
  margin: 0 auto;
  height: 8px;
  background: #f3f4f6;
  border-radius: 9999px;
  overflow: hidden;
}
.ms-q-analyzing__bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-end));
  border-radius: 9999px;
  transition: width 60ms linear;
}
.ms-q-analyzing__pct {
  margin: 8px 0 22px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-muted);
}
.ms-q-analyzing__stages {
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.ms-q-analyzing__stage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #f3f4f6;
  background: #f9fafb;
  border-radius: 14px;
  opacity: 0.45;
  transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease;
}
.ms-q-analyzing__stage.is-active {
  opacity: 1;
  background: #eff6ff;
  border-color: #bfdbfe;
}
.ms-q-analyzing__stage.is-done {
  opacity: 1;
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.ms-q-analyzing__stage-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #d1d5db;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms ease;
}
.ms-q-analyzing__stage.is-active .ms-q-analyzing__stage-icon { background: var(--color-primary); }
.ms-q-analyzing__stage.is-done   .ms-q-analyzing__stage-icon { background: #10b981; }
.ms-q-analyzing__stage-icon svg { width: 17px; height: 17px; }
.ms-q-stage-svg--done { display: none; }
.ms-q-analyzing__stage.is-done .ms-q-stage-svg { display: none; }
.ms-q-analyzing__stage.is-done .ms-q-stage-svg--done { display: block; }
.ms-q-analyzing__stage-text {
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
}
.ms-q-analyzing__stage.is-active .ms-q-analyzing__stage-text { color: #1e3a8a; }
.ms-q-analyzing__stage.is-done   .ms-q-analyzing__stage-text { color: #166534; }

/* ─── STEP 6: Thanks ─── */
.ms-q-thanks {
  text-align: center;
  padding: 10px 4px 4px;
}
.ms-q-thanks__burst {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
}
.ms-q-thanks__burst-circle {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #10b981);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 32px -10px rgba(16,185,129,0.45);
  animation: ms-q-burst 600ms cubic-bezier(0.22, 1.61, 0.36, 1);
  color: #fff;
}
.ms-q-thanks__burst-circle svg { width: 48px; height: 48px; }
.ms-q-thanks__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #34d399;
  opacity: 0.6;
  animation: ms-q-ripple 1.8s ease-out infinite;
}
.ms-q-thanks__ripple--2 { animation-delay: 0.6s; }
@keyframes ms-q-burst {
  from { opacity: 0; transform: scale(0.3) rotate(-90deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ms-q-ripple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0;   }
}

.ms-q-thanks__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ms-q-thanks__sub {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--color-text-body);
  line-height: 1.5;
}
.ms-q-thanks__sub span { font-weight: 700; color: var(--color-text-heading); }
.ms-q-thanks__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 24px;
}
.ms-q-thanks__pill svg { width: 15px; height: 15px; }

.ms-q-thanks__next {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 18px;
  padding: 16px;
  text-align: left;
}
.ms-q-thanks__next-eyebrow {
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}
.ms-q-thanks__steps { display: flex; flex-direction: column; gap: 12px; }
.ms-q-thanks__step { display: flex; gap: 12px; align-items: flex-start; }
.ms-q-thanks__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-q-thanks__step-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-heading);
}
.ms-q-thanks__step-desc {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Desktop tweaks */
@media (min-width: 768px) {
  .ms-q-title { font-size: 26px; }
  .ms-q-card__title { font-size: 16px; }
  .ms-q-thanks__title { font-size: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * HOMEPAGE BODY — final upgrade (services / team / districts / faq accordion)
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Services ── */
.ms-section--services { padding: 64px 16px !important; background: #fff; }
.ms-section--services .ms-section__inner { max-width: 1100px; margin: 0 auto; }
.ms-section--services .ms-section__head { text-align: center; margin-bottom: 32px; }
.ms-section--services .ms-section__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--color-text-heading); margin: 4px 0 8px; letter-spacing: -0.01em; }
.ms-section--services .ms-section__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: 9999px;
}
.ms-section--services .ms-section__sub { color: var(--color-text-muted); font-size: 14.5px; max-width: 580px; margin: 0 auto; line-height: 1.5; }

.ms-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) { .ms-services-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .ms-services-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.ms-srv {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -16px rgba(15,23,42,0.08);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  position: relative;
}
.ms-srv:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 8px 28px -8px rgba(37,99,235,0.20);
  text-decoration: none !important;
}
.ms-srv__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform 220ms cubic-bezier(0.22, 1.61, 0.36, 1);
}
.ms-srv:hover .ms-srv__icon { transform: scale(1.08) rotate(-3deg); }
.ms-srv__icon svg { width: 26px; height: 26px; }
.ms-srv__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--color-text-heading); margin: 0 0 6px; line-height: 1.25; }
.ms-srv__desc { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 14px; flex: 1; }
.ms-srv__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary);
  letter-spacing: 0;
  transition: gap 200ms ease;
}
.ms-srv__cta svg { width: 14px; height: 14px; transition: transform 200ms ease; }
.ms-srv:hover .ms-srv__cta { gap: 8px; }
.ms-srv:hover .ms-srv__cta svg { transform: translateX(2px); }

/* ── Team / Specialists with avatar ── */
.ms-section--specialists { padding: 64px 16px !important; background: var(--color-bg-soft); }
.ms-section--specialists .ms-section__inner { max-width: 1100px; margin: 0 auto; }
.ms-section--specialists .ms-section__head { text-align: center; margin-bottom: 32px; }
.ms-section--specialists .ms-section__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--color-text-heading); margin: 4px 0 8px; letter-spacing: -0.01em; }
.ms-section--specialists .ms-section__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: 9999px;
}
.ms-section--specialists .ms-section__sub { color: var(--color-text-muted); font-size: 14.5px; max-width: 580px; margin: 0 auto; line-height: 1.5; }

.ms-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) { .ms-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-team-grid { grid-template-columns: repeat(4, 1fr); } }

.ms-team-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -16px rgba(15,23,42,0.08);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ms-team-card:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 8px 28px -8px rgba(37,99,235,0.20); }
.ms-team-card__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-soft), #fff);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px var(--color-primary-soft), 0 8px 20px -8px rgba(37,99,235,0.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.ms-team-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--color-text-heading);
  margin: 0 0 2px;
  line-height: 1.2;
}
.ms-team-card__role {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.ms-team-card__scope {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Districts (quiz-style cards) ── */
.ms-section--districts { padding: 64px 16px !important; background: #fff; }
.ms-section--districts .ms-section__inner { max-width: 880px; margin: 0 auto; }
.ms-section--districts .ms-section__head { text-align: center; margin-bottom: 28px; }
.ms-section--districts .ms-section__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--color-text-heading); margin: 4px 0 8px; letter-spacing: -0.01em; }
.ms-section--districts .ms-section__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: 9999px;
}
.ms-section--districts .ms-section__sub { color: var(--color-text-muted); font-size: 14.5px; max-width: 580px; margin: 0 auto; line-height: 1.5; }

.ms-d-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 480px) { .ms-d-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .ms-d-grid { grid-template-columns: repeat(3, 1fr); } }

.ms-d-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  text-decoration: none !important;
  color: var(--color-text-heading) !important;
  font-family: var(--font-display);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 100ms ease;
}
.ms-d-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 6px 18px -10px rgba(37,99,235,0.30);
  text-decoration: none !important;
}
.ms-d-card:active { transform: scale(0.99); }
.ms-d-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #dbeafe;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, transform 220ms cubic-bezier(0.22, 1.61, 0.36, 1);
}
.ms-d-card:hover .ms-d-card__icon { transform: scale(1.06); }
.ms-d-card__icon svg { width: 18px; height: 18px; }
.ms-d-card__name { flex: 1; font-weight: 800; font-size: 14.5px; }
.ms-d-card__chev {
  flex-shrink: 0;
  color: #93c5fd;
  display: inline-flex;
  animation: ms-q-chev-pulse 1.6s ease-in-out infinite;
}
.ms-d-card__chev svg { width: 14px; height: 14px; }

/* ── FAQ accordion ── */
.ms-section--faq { padding: 64px 16px !important; background: var(--color-bg-soft); }
.ms-section--faq .ms-section__inner { max-width: 720px; margin: 0 auto; }
.ms-section--faq .ms-section__head { text-align: center; margin-bottom: 28px; }
.ms-section--faq .ms-section__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--color-text-heading); margin: 4px 0 0; letter-spacing: -0.01em; }
.ms-section--faq .ms-section__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: 9999px;
}

.ms-faq { display: flex; flex-direction: column; gap: 10px; }
.ms-faq-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.ms-faq-item:hover { border-color: #bfdbfe; }
.ms-faq-item.is-open {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px -12px rgba(37,99,235,0.25);
}
.ms-faq-item__q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--color-text-heading);
  margin: 0;
  padding: 18px 56px 18px 20px;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
  user-select: none;
  transition: color 180ms ease;
}
.ms-faq-item__q:hover { color: var(--color-primary); }
.ms-faq-item.is-open .ms-faq-item__q { color: var(--color-primary); }
.ms-faq-item__chev {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 280ms cubic-bezier(0.22, 1.61, 0.36, 1), background 180ms ease;
}
.ms-faq-item__chev::before,
.ms-faq-item__chev::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 280ms cubic-bezier(0.22, 1.61, 0.36, 1), opacity 200ms ease;
}
.ms-faq-item__chev::before { width: 12px; height: 2px; }
.ms-faq-item__chev::after  { width: 2px; height: 12px; }
.ms-faq-item.is-open .ms-faq-item__chev {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}
.ms-faq-item.is-open .ms-faq-item__chev::after { transform: rotate(90deg); opacity: 0; }
.ms-faq-item__a {
  margin: 0;
  padding: 0 20px;
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease, padding 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-faq-item.is-open .ms-faq-item__a {
  max-height: 600px;
  opacity: 1;
  padding: 0 20px 20px;
}

/* ── Final CTA polish (uses existing classes) ── */
.ms-section--final { padding: 64px 16px !important; background: #fff; }
.ms-section--final .ms-final-clean { max-width: 600px; margin: 0 auto; text-align: center; }

@media (min-width: 768px) {
  .ms-section--services .ms-section__title,
  .ms-section--specialists .ms-section__title,
  .ms-section--districts .ms-section__title,
  .ms-section--faq .ms-section__title { font-size: 34px; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-4 — reference-aligned layouts
 * Featured blue card · colored services · clean team cards
 * ───────────────────────────────────────────────────────────────────────── */

/* ── FEATURED big blue card ── */
.ms-section--featured { padding: 48px 16px !important; background: #fff; }
.ms-section--featured .ms-section__inner { max-width: 720px; margin: 0 auto; }
.ms-feat {
  position: relative;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  border-radius: 28px;
  padding: 32px 28px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 28px 56px -20px rgba(37,99,235,0.55);
}
.ms-feat__blob {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  filter: blur(20px);
  pointer-events: none;
}
.ms-feat__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  position: relative;
}
.ms-feat__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ms-feat__check svg { width: 12px; height: 12px; }
.ms-feat__pretitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.ms-feat__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  color: #78350f;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -4px rgba(245,158,11,0.55);
}
.ms-feat__badge svg { width: 12px; height: 12px; }
.ms-feat__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.01em;
  position: relative;
}
.ms-feat__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 18px;
  position: relative;
}
.ms-feat__bullets span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.ms-feat__bullets svg { width: 14px; height: 14px; }
.ms-feat__guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.12);
  border-radius: 14px;
  margin-bottom: 18px;
  position: relative;
}
.ms-feat__guarantee svg { width: 20px; height: 20px; flex-shrink: 0; color: #a5f3fc; }
.ms-feat__guarantee span { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.ms-feat__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  color: var(--color-primary);
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15.5px;
  text-decoration: none;
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 8px 20px -8px rgba(15,23,42,0.20);
}
.ms-feat__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(15,23,42,0.30); color: var(--color-primary); text-decoration: none; }
.ms-feat__cta svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.ms-feat__cta:hover svg { transform: translateX(4px); }
@media (min-width: 768px) {
  .ms-feat { padding: 40px 36px; }
  .ms-feat__title { font-size: 34px; }
}

/* ── SERVICES — colored icon variants ── */
.ms-section--services { background: var(--color-bg-soft) !important; }
.ms-services-grid {
  grid-template-columns: 1fr !important;
}
@media (min-width: 520px) { .ms-services-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 900px) { .ms-services-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1100px) { .ms-services-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.ms-srv {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
  padding: 18px 18px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.ms-srv:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 12px 28px -10px rgba(37,99,235,0.20);
  text-decoration: none !important;
}
.ms-srv__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms cubic-bezier(0.22, 1.61, 0.36, 1);
}
.ms-srv:hover .ms-srv__icon { transform: scale(1.06) rotate(-3deg); }
.ms-srv__icon svg { width: 26px; height: 26px; }
.ms-srv--blue   .ms-srv__icon { background: #dbeafe; color: #2563eb; }
.ms-srv--green  .ms-srv__icon { background: #d1fae5; color: #059669; }
.ms-srv--rose   .ms-srv__icon { background: #ffe4e6; color: #e11d48; }
.ms-srv--teal   .ms-srv__icon { background: #ccfbf1; color: #0d9488; }
.ms-srv--purple .ms-srv__icon { background: #ede9fe; color: #7c3aed; }
.ms-srv--amber  .ms-srv__icon { background: #fef3c7; color: #d97706; }

.ms-srv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-srv__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--color-text-heading); margin: 0; line-height: 1.25; }
.ms-srv__meta { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; font-weight: 500; }
.ms-srv__arrow {
  flex-shrink: 0;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  transition: transform 200ms ease, color 200ms ease;
}
.ms-srv__arrow svg { width: 18px; height: 18px; }
.ms-srv:hover .ms-srv__arrow { color: var(--color-primary); transform: translateX(4px); }

/* Hide previous .ms-srv variants (.ms-srv--featured / desc) — superseded */
.ms-srv__desc, .ms-srv__cta, .ms-srv__badge { display: none !important; }

/* ── TEAM (reference pattern) ── */
.ms-section--team { padding: 64px 16px !important; background: var(--color-bg-soft); }
.ms-section--team .ms-section__inner { max-width: 1100px; margin: 0 auto; }
.ms-section--team .ms-section__head { text-align: center; margin-bottom: 28px; }
.ms-section--team .ms-section__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.ms-section--team .ms-section__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--color-text-heading); margin: 0 0 8px; letter-spacing: -0.01em; }
.ms-section--team .ms-section__sub { color: var(--color-text-muted); font-size: 14.5px; max-width: 580px; margin: 0 auto; line-height: 1.5; }

.ms-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 520px) { .ms-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ms-team-grid { grid-template-columns: repeat(4, 1fr); } }

.ms-team-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -16px rgba(15,23,42,0.10);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.ms-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -14px rgba(15,23,42,0.18);
}
.ms-team-card__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px -8px rgba(37,99,235,0.25);
}
.ms-team-card__avatar span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}
.ms-team-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: var(--color-text-heading);
  margin: 0 0 4px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ms-team-card__role {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px;
}
.ms-team-card__meta {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0;
  font-weight: 500;
}

/* Hide old specialist/scope fields if some markup leaks */
.ms-team-card__photo, .ms-team-card__scope { display: none !important; }

/* ── FOUNDER quote-only card ── */
.ms-section--founder { padding: 64px 16px !important; background: #fff; }
.ms-section--founder .ms-section__inner { max-width: 720px; margin: 0 auto; }
.ms-founder-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  padding: 40px 32px 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 16px 40px -20px rgba(15,23,42,0.12);
  text-align: left;
}
.ms-founder-card__quote-mark {
  position: absolute;
  top: 22px;
  left: 26px;
  width: 36px;
  height: 36px;
  color: #dbeafe;
}
.ms-founder-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text-heading);
  line-height: 1.5;
  margin: 0 0 20px;
  padding-left: 0;
  border-left: 0;
  position: relative;
  z-index: 1;
}
.ms-founder-card__points { margin-bottom: 18px; }
.ms-founder-card__points p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.55;
}
.ms-founder-card__sig {
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ms-founder-card__sig-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  color: var(--color-text-heading);
}
.ms-founder-card__sig-role {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
@media (min-width: 640px) {
  .ms-founder-card { padding: 48px 40px 36px; }
  .ms-founder-card__quote { font-size: 20px; }
}

/* Hide previous founder markup if leaks */
.ms-founder { display: none !important; }

/* ── FAQ chevron — simpler thin down-arrow ── */
.ms-faq-item__chev {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
}
.ms-faq-item__chev::before, .ms-faq-item__chev::after { display: none; }
.ms-faq-item__chev svg { width: 18px; height: 18px; }
.ms-faq-item.is-open .ms-faq-item__chev {
  background: transparent;
  color: var(--color-primary);
  transform: translateY(-50%) rotate(180deg);
}

/* Sensitive FAQ item — soft amber for "103" question */
.ms-faq-item--sensitive { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fff); }
.ms-faq-item--sensitive:hover { border-color: #f59e0b; }
.ms-faq-item--sensitive.is-open { border-color: #d97706; box-shadow: 0 8px 24px -12px rgba(217,119,6,0.25); }
.ms-faq-item--sensitive.is-open .ms-faq-item__q,
.ms-faq-item--sensitive.is-open .ms-faq-item__chev { color: #b45309; }

/* Hide old MEDCLINICA-section variants if any leaked */
.ms-section--specialists,
.ms-section--cases,
.ms-section--addiction,
.ms-section--price,
.ms-section--how,
.ms-section--about { display: none !important; }
.ms-urgent-strip { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-5 — match reference visual scale
 * Big H2 (clamp 32-56), photo-silhouette avatar, more whitespace
 * ───────────────────────────────────────────────────────────────────────── */

/* Big section titles everywhere */
.ms-section--featured .ms-section__title,
.ms-section--services .ms-section__title,
.ms-section--districts .ms-section__title,
.ms-section--team .ms-section__title,
.ms-section--founder .ms-section__title,
.ms-section--faq .ms-section__title,
.ms-section--final .ms-final-clean__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 5vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--color-text-heading);
  margin: 8px 0 12px !important;
}
.ms-section--featured .ms-section__sub,
.ms-section--services .ms-section__sub,
.ms-section--districts .ms-section__sub,
.ms-section--team .ms-section__sub,
.ms-section--faq .ms-section__sub {
  font-size: clamp(14px, 1.6vw, 17px) !important;
  color: var(--color-text-muted) !important;
  max-width: 620px;
  margin: 0 auto !important;
  line-height: 1.5;
  font-weight: 500;
}
.ms-section__eyebrow {
  display: inline-block !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}

/* More generous section padding */
.ms-section--services,
.ms-section--districts,
.ms-section--team,
.ms-section--founder,
.ms-section--faq,
.ms-section--final { padding: 88px 16px !important; }
.ms-section--featured { padding: 56px 16px 32px !important; }
@media (min-width: 768px) {
  .ms-section--services,
  .ms-section--districts,
  .ms-section--team,
  .ms-section--founder,
  .ms-section--faq,
  .ms-section--final { padding: 112px 32px !important; }
}

/* Team avatar — photo-silhouette placeholder (clearly not pretending to be a real photo) */
.ms-team-card { padding: 36px 24px 32px !important; border-radius: 22px !important; border: 1px solid #eef2f7 !important; box-shadow: 0 4px 12px -8px rgba(15,23,42,0.06), 0 14px 32px -20px rgba(15,23,42,0.10) !important; }
.ms-team-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 24px -10px rgba(15,23,42,0.12), 0 24px 48px -20px rgba(37,99,235,0.18) !important;
}
.ms-team-card__avatar {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e0e7ff 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  box-shadow: 0 0 0 1px #fff, 0 0 0 5px rgba(37,99,235,0.06), 0 8px 24px -8px rgba(37,99,235,0.20) !important;
  margin: 0 auto 22px !important;
}
.ms-team-card__avatar svg { width: 60% !important; height: 60% !important; }
.ms-team-card__avatar span { display: none !important; }
.ms-team-card__name {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 19px !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
}
.ms-team-card__role {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 0 12px !important;
  letter-spacing: 0;
}
.ms-team-card__meta {
  font-size: 14px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Featured CTA — bigger title, more punch */
.ms-feat { padding: 36px 28px !important; border-radius: 28px !important; }
@media (min-width: 768px) {
  .ms-feat { padding: 48px 44px !important; border-radius: 32px !important; }
  .ms-feat__title { font-size: clamp(28px, 3.6vw, 40px) !important; }
}
.ms-feat__cta {
  padding: 18px 24px !important;
  font-size: 16px !important;
  border-radius: 18px !important;
}

/* Services — wider gaps, bigger card padding */
.ms-services-grid { gap: 14px !important; }
@media (min-width: 900px) { .ms-services-grid { gap: 18px !important; } }
.ms-srv { padding: 22px !important; border-radius: 20px !important; }
.ms-srv__icon { width: 60px !important; height: 60px !important; border-radius: 16px !important; }
.ms-srv__icon svg { width: 30px !important; height: 30px !important; }
.ms-srv__title { font-size: 17px !important; }
.ms-srv__meta { font-size: 13px !important; margin-top: 2px; }

/* Districts — slightly bigger */
.ms-d-card { padding: 16px !important; border-radius: 18px !important; }
.ms-d-card__name { font-size: 16px !important; }
.ms-d-card__meta { font-size: 12.5px; color: var(--color-text-muted); display: block; margin-top: 2px; font-weight: 500; }
.ms-d-card__body { display: flex !important; flex-direction: column; gap: 0; flex: 1; }
.ms-d-card__icon { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
.ms-d-card__icon svg { width: 20px !important; height: 20px !important; }

/* Founder card bigger feel */
.ms-founder-card { padding: 56px 36px 40px !important; border-radius: 32px !important; }
.ms-founder-card__quote { font-size: clamp(18px, 2.4vw, 22px) !important; line-height: 1.55 !important; }
.ms-founder-card__quote-mark { width: 48px !important; height: 48px !important; top: 28px !important; left: 30px !important; }

/* FAQ items bigger touch target */
.ms-faq-item__q { font-size: 16px !important; padding: 22px 60px 22px 24px !important; }
.ms-faq-item__a { padding: 0 24px !important; font-size: 15px !important; }
.ms-faq-item.is-open .ms-faq-item__a { padding: 0 24px 22px !important; }

/* Final CTA bigger */
.ms-final-clean__title { font-size: clamp(26px, 4.8vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -0.02em; }
.ms-final-clean__sub { font-size: 16px !important; }
.ms-final-clean__cta { padding: 18px 36px !important; font-size: 17px !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-6 — competitor-style large 2-col service cards
 * ───────────────────────────────────────────────────────────────────────── */

/* Section header — left-aligned title + right-aligned description like ref */
.ms-section--services .ms-section__inner { max-width: 1200px !important; }
.ms-section--services { background: #fff !important; padding: 88px 24px !important; }
.ms-srv2__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
  margin: 0 0 40px;
  text-align: left;
}
.ms-srv2__head .ms-section__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 6vw, 68px) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a;
  margin: 0 !important;
}
.ms-srv2__head .ms-section__sub {
  font-size: 16px !important;
  color: var(--color-text-muted) !important;
  line-height: 1.55;
  max-width: 540px;
  margin: 0 !important;
  font-weight: 500;
}
@media (min-width: 900px) {
  .ms-srv2__head {
    grid-template-columns: auto 1fr;
    gap: 60px;
    align-items: end;
  }
  .ms-srv2__head .ms-section__sub { max-width: 460px; margin-bottom: 8px !important; }
}

/* 2x2 grid of large cards */
.ms-srv2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .ms-srv2-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.ms-srv2 {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 28px;
  background: #f1f5f9;
  border: 0;
  border-radius: 24px;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.ms-srv2--blue  { background: #e7eef9; }
.ms-srv2--sage  { background: #ecf3ee; }
.ms-srv2--amber { background: #fdf4e3; }
.ms-srv2--rose  { background: #faecee; }

.ms-srv2:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(15,23,42,0.18);
  text-decoration: none !important;
}

.ms-srv2__art {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-srv2__art svg { width: 100%; height: 100%; }

.ms-srv2__body { flex: 1; min-width: 0; }
.ms-srv2__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 12px !important;
}
.ms-srv2__desc {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 18px;
  font-weight: 500;
}
.ms-srv2__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  transition: gap 200ms ease;
}
.ms-srv2__cta svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.ms-srv2:hover .ms-srv2__cta { gap: 10px; }
.ms-srv2:hover .ms-srv2__cta svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .ms-srv2 { flex-direction: column; align-items: flex-start; padding: 24px; min-height: 0; }
  .ms-srv2__art { width: 100%; height: 140px; align-self: stretch; }
  .ms-srv2__art svg { max-width: 140px; height: 140px; }
}

/* Hide the old .ms-srv card styles when .ms-srv2 is in use */
.ms-srv2 .ms-srv__icon,
.ms-srv2 .ms-srv__title,
.ms-srv2 .ms-srv__meta,
.ms-srv2 .ms-srv__arrow { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * Header "Онлайн" indicator — next to phone link
 * ───────────────────────────────────────────────────────────────────────── */

/* Hide the standalone status-bar entirely (any leaked markup) */
.ms-status-bar { display: none !important; }

/* New compact online pill — sits inside .ms-header-actions before the phone */
.ms-header-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: #15803d;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: 4px;
}
.ms-header-online__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  position: relative;
  flex-shrink: 0;
  animation: ms-online-pulse 1.8s ease-in-out infinite;
}
@keyframes ms-online-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0.05); }
}

/* Hours next to "Онлайн" */
.ms-header-online__hours {
  font-weight: 600;
  color: #166534;
  opacity: 0.85;
  padding-left: 6px;
  margin-left: 6px;
  border-left: 1px solid rgba(22,101,52,0.25);
}

/* Mobile/narrow: keep pill visible — just compact */
@media (max-width: 768px) {
  .ms-header-online {
    display: inline-flex !important;
    padding: 4px 8px 4px 6px !important;
    font-size: 11.5px !important;
    margin-right: 6px !important;
  }
  .ms-header-online__hours { font-size: 11px !important; }
}
@media (max-width: 480px) {
  .ms-header-online__text { display: none; }
  .ms-header-online__hours {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-7 — site-wide UI polish
 * Section rhythm · district lift · team gradient ring · FAQ refinement
 * Founder layered bg · branded messenger buttons · subtle reveal
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Consistent section rhythm ── */
.ms-section { position: relative; }
.ms-section--services,
.ms-section--districts,
.ms-section--team,
.ms-section--founder,
.ms-section--faq,
.ms-section--final {
  padding: 80px 20px !important;
}
@media (min-width: 900px) {
  .ms-section--services,
  .ms-section--districts,
  .ms-section--team,
  .ms-section--founder,
  .ms-section--faq,
  .ms-section--final { padding: 104px 24px !important; }
}

/* Soft alternating backgrounds for visual rhythm */
.ms-section--districts { background: #fafbfd !important; }
.ms-section--team      { background: #f8fafc !important; }
.ms-section--faq       { background: #fafbfd !important; }
.ms-section--founder   { background: #fff !important; }
.ms-section--final     { background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%) !important; }

/* Eyebrow chip — unified treatment with leading dash */
.ms-section__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 14px !important;
}
.ms-section__eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
}

/* Big section H2 — consistent scale */
.ms-section--districts .ms-section__title,
.ms-section--team .ms-section__title,
.ms-section--faq .ms-section__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  margin: 0 0 14px !important;
}
.ms-section__sub {
  font-size: 16px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
  max-width: 600px;
  margin: 0 auto !important;
  font-weight: 500;
}

/* ── DISTRICTS: lift + accent + animated chevron ── */
.ms-section--districts .ms-section__inner { max-width: 1100px !important; }
.ms-section--districts .ms-section__head { text-align: center; margin-bottom: 40px !important; }

.ms-d-grid { gap: 12px !important; }
@media (min-width: 720px) { .ms-d-grid { gap: 14px !important; } }

.ms-d-card {
  padding: 18px 18px 18px 16px !important;
  background: #fff !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.02);
  position: relative;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease !important;
}
.ms-d-card::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-end));
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height 260ms cubic-bezier(0.22, 1.61, 0.36, 1);
}
.ms-d-card:hover {
  border-color: transparent !important;
  background: #fff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px -16px rgba(37,99,235,0.28) !important;
}
.ms-d-card:hover::before { height: 60%; }

.ms-d-card__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: var(--color-primary) !important;
}
.ms-d-card__icon svg { width: 20px !important; height: 20px !important; }
.ms-d-card:hover .ms-d-card__icon {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%) !important;
  color: #fff !important;
  transform: scale(1.08) rotate(-3deg) !important;
}

.ms-d-card__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ms-d-card__name {
  font-family: var(--font-display);
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  line-height: 1.2;
}
.ms-d-card__meta {
  font-size: 12.5px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.3;
}

.ms-d-card__chev {
  color: #cbd5e1 !important;
  animation: none !important;
  transition: color 200ms ease, transform 220ms cubic-bezier(0.22, 1.61, 0.36, 1) !important;
}
.ms-d-card:hover .ms-d-card__chev {
  color: var(--color-primary) !important;
  transform: translateX(4px);
}

/* ── TEAM: gradient ring around avatar + hover lift ── */
.ms-section--team .ms-section__head { text-align: center; margin-bottom: 40px !important; }
.ms-section--team .ms-section__sub { max-width: 600px; }

.ms-team-grid { gap: 20px !important; margin-top: 40px !important; }
@media (min-width: 1024px) { .ms-team-grid { gap: 24px !important; } }

.ms-team-card {
  background: #fff !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 28px !important;
  padding: 36px 24px 28px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.02), 0 8px 24px -20px rgba(15,23,42,0.10) !important;
  transition: transform 280ms cubic-bezier(0.22, 1.61, 0.36, 1), box-shadow 280ms ease, border-color 220ms ease !important;
}
.ms-team-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px -20px rgba(37,99,235,0.20) !important;
  border-color: #dbeafe !important;
}

.ms-team-card__avatar {
  width: 116px !important;
  height: 116px !important;
  margin: 0 auto 20px !important;
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 60%, #ede9fe 100%) !important;
  color: #94a3b8 !important;
  position: relative;
  box-shadow: 0 12px 28px -10px rgba(99,102,241,0.30) !important;
}
.ms-team-card__avatar::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, #2563eb, #4f46e5, #06b6d4, #2563eb);
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms ease;
}
.ms-team-card:hover .ms-team-card__avatar::before { opacity: 1; }
.ms-team-card__avatar svg { width: 56px; height: 56px; }

.ms-team-card__name {
  font-size: 19px !important;
  margin-bottom: 6px !important;
}
.ms-team-card__role {
  display: inline-block;
  font-size: 12.5px !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: 9999px;
  margin: 0 auto 12px !important;
}
.ms-team-card__meta {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
}

/* ── FAQ: hover bg tint, smoother chevron, left accent when open ── */
.ms-section--faq .ms-section__inner { max-width: 640px !important; padding-left: 16px; padding-right: 16px; }
.ms-section--faq .ms-section__head { text-align: center; margin-bottom: 40px !important; }

.ms-faq { gap: 12px !important; }
.ms-faq-item {
  background: #fff !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.02);
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
  position: relative;
}
.ms-faq-item:hover {
  border-color: #dbeafe !important;
  background: #fafcff !important;
}
.ms-faq-item.is-open {
  border-color: #bfdbfe !important;
  background: #fff !important;
  box-shadow: 0 12px 32px -16px rgba(37,99,235,0.22) !important;
}
.ms-faq-item.is-open::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-end));
}
.ms-faq-item__q {
  font-size: 16px !important;
  padding: 22px 60px 22px 22px !important;
  font-weight: 800 !important;
}
.ms-faq-item__chev {
  right: 22px !important;
  width: 32px !important;
  height: 32px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-radius: 50%;
}
.ms-faq-item:hover .ms-faq-item__chev { background: #dbeafe !important; color: var(--color-primary) !important; }
.ms-faq-item.is-open .ms-faq-item__chev {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end)) !important;
  color: #fff !important;
}
.ms-faq-item__chev svg { width: 16px !important; height: 16px !important; }
.ms-faq-item__a {
  padding: 0 22px !important;
  font-size: 14.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
}
.ms-faq-item.is-open .ms-faq-item__a { padding: 0 22px 22px !important; }

/* ── FOUNDER: layered background + bigger quote-mark + accent strip ── */
.ms-section--founder .ms-section__inner { max-width: 780px !important; }
.ms-founder-card {
  border-radius: 32px !important;
  padding: 48px 32px 36px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(99,102,241,0.06) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(37,99,235,0.05) 0%, transparent 50%),
    #fff !important;
  border: 1px solid #eef1f5 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 24px 56px -28px rgba(15,23,42,0.18) !important;
  overflow: hidden;
}
.ms-founder-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-end));
  border-radius: 0 4px 4px 0;
}
.ms-founder-card__quote-mark {
  top: 28px !important;
  left: 32px !important;
  width: 52px !important;
  height: 52px !important;
  color: #e0e7ff !important;
  opacity: 0.9;
}
.ms-founder-card__quote {
  font-size: 20px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #0f172a !important;
  margin: 24px 0 24px !important;
  padding-top: 12px;
}
@media (min-width: 640px) {
  .ms-founder-card { padding: 56px 48px 40px !important; }
  .ms-founder-card__quote { font-size: 23px !important; }
}
.ms-founder-card__points p {
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
}
.ms-founder-card__sig {
  padding-top: 20px !important;
  border-top: 1px solid #eef1f5 !important;
  margin-top: 8px;
}
.ms-founder-card__sig-name {
  font-size: 17px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── FINAL CTA: gradient bg + branded messenger buttons ── */
.ms-section--final .ms-final-clean { max-width: 640px !important; }
.ms-final-clean__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 4.6vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  margin: 0 0 16px !important;
}
.ms-final-clean__accent {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-final-clean__sub {
  font-size: 16.5px !important;
  color: #64748b !important;
  margin: 0 0 28px !important;
  line-height: 1.55;
}
.ms-final-clean__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%) !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800 !important;
  font-size: 16px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 16px 36px -12px rgba(37,99,235,0.45) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  letter-spacing: -0.01em;
}
.ms-final-clean__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -12px rgba(37,99,235,0.55) !important;
}
.ms-final-clean__or {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  margin: 28px 0 14px !important;
  font-weight: 500;
}

.ms-final-clean__msgr {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ms-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
  position: relative;
}
.ms-msg::before {
  content: '';
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.ms-msg--viber {
  background: linear-gradient(135deg, #7360f2 0%, #5b4be3 100%) !important;
  box-shadow: 0 10px 24px -10px rgba(115,96,242,0.55);
}
.ms-msg--viber::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.37 5.07L2 22l5.07-1.37A9.95 9.95 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm5.04 14.42c-.22.62-1.1 1.13-1.78 1.28-.46.1-1.07.18-3.11-.66-2.62-1.08-4.3-3.74-4.43-3.92-.13-.18-1.07-1.42-1.07-2.71 0-1.29.68-1.92.92-2.18.2-.22.44-.27.59-.27.15 0 .3 0 .43.01.14.01.32-.05.5.38.18.43.62 1.5.67 1.6.05.1.08.22.02.36-.07.13-.1.22-.2.34-.1.13-.21.28-.3.38-.1.1-.2.21-.09.4.11.2.5.83 1.07 1.35.74.67 1.36.88 1.56.98.2.1.31.08.43-.05.12-.13.5-.59.63-.79.13-.2.27-.17.45-.1.18.07 1.16.55 1.36.65.2.1.33.15.38.23.05.09.05.49-.17 1.11z'/></svg>");
}
.ms-msg--telegram {
  background: linear-gradient(135deg, #29b6f6 0%, #0288d1 100%) !important;
  box-shadow: 0 10px 24px -10px rgba(2,136,209,0.55);
}
.ms-msg--telegram::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/></svg>");
}
.ms-msg--whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  box-shadow: 0 10px 24px -10px rgba(37,211,102,0.55);
}
.ms-msg--whatsapp::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M20.52 3.48A11.93 11.93 0 0 0 12.04 0C5.46 0 .14 5.32.14 11.9c0 2.1.55 4.14 1.6 5.96L0 24l6.32-1.66a11.88 11.88 0 0 0 5.72 1.46h.01c6.58 0 11.9-5.32 11.9-11.9 0-3.18-1.24-6.17-3.43-8.42zM12.04 21.8h-.01a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.64-.24-.37a9.85 9.85 0 0 1-1.51-5.28c0-5.47 4.45-9.92 9.92-9.92 2.65 0 5.14 1.04 7.01 2.91a9.84 9.84 0 0 1 2.9 7.01c-.01 5.47-4.45 9.9-9.94 9.9zm5.44-7.43c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07a8.13 8.13 0 0 1-2.4-1.48 9 9 0 0 1-1.66-2.07c-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.5l-.57-.01c-.2 0-.52.08-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.47 1.07 2.88 1.22 3.08.15.2 2.1 3.21 5.1 4.5.71.31 1.27.49 1.7.63.71.23 1.36.2 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z'/></svg>");
}
.ms-msg:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ── Subtle reveal on scroll (CSS-only fallback) ── */
@media (prefers-reduced-motion: no-preference) {
  .ms-section--services .ms-srv2,
  .ms-section--districts .ms-d-card,
  .ms-section--team .ms-team-card,
  .ms-section--faq .ms-faq-item {
    opacity: 0;
    transform: translateY(12px);
    animation: ms-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .ms-section--services .ms-srv2:nth-child(1) { animation-delay: 0.05s; }
  .ms-section--services .ms-srv2:nth-child(2) { animation-delay: 0.10s; }
  .ms-section--services .ms-srv2:nth-child(3) { animation-delay: 0.15s; }
  .ms-section--services .ms-srv2:nth-child(4) { animation-delay: 0.20s; }
}
@keyframes ms-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Mobile tuning ── */
@media (max-width: 600px) {
  .ms-section--services,
  .ms-section--districts,
  .ms-section--team,
  .ms-section--founder,
  .ms-section--faq,
  .ms-section--final { padding: 56px 16px !important; }
  .ms-section__sub { font-size: 14.5px !important; }
  .ms-founder-card { padding: 32px 22px 26px !important; }
  .ms-founder-card__quote-mark { top: 22px !important; left: 22px !important; width: 40px !important; height: 40px !important; }
  .ms-final-clean__cta { padding: 16px 28px !important; font-size: 15px !important; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-8 — real brand logo + founder photo
 * ───────────────────────────────────────────────────────────────────────── */

/* Hide leaked img markup (in case of cached HTML) */
.ms-logo__img { display: none !important; }

/* ─── Brand mark (cross icon) + gradient-text wordmark ─── */
.ms-logo,
.ms-nav-logo,
.ms-footer__logo {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  text-decoration: none !important;
  padding: 4px 0;
  line-height: 1;
  transition: transform 260ms cubic-bezier(0.22, 1.61, 0.36, 1);
  will-change: transform;
}
.ms-logo:hover,
.ms-nav-logo:hover,
.ms-footer__logo:hover { transform: translateY(-1px); }

/* Cross + figure mark (inline SVG) */
.ms-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}
.ms-logo__mark svg,
.ms-logo__mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Wordmark text container */
.ms-logo__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
.ms-logo__name {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.ms-logo__med     { color: #1e3a5f !important; display: inline !important; }   /* navy */
.ms-logo__service { color: #4fb3a4 !important; display: inline !important; }   /* teal */
.ms-logo__tld {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #94a3b8;
  margin-left: 2px;
}

/* Header (above-nav) variant — slightly larger */
.ms-logo .ms-logo__mark { width: 84px; height: 84px; margin: -14px -12px -14px -14px; }
.ms-logo .ms-logo__name { font-size: 36px; }
.ms-logo .ms-logo__tld  { font-size: 12px; }

/* Nav strip variant */
.ms-nav-logo .ms-logo__mark { width: 74px; height: 74px; margin: -12px -12px -12px -14px; }
.ms-nav-logo .ms-logo__name { font-size: 30px; }

/* Footer variant — keep wordmark on white, restore footer-specific color overrides */
.ms-footer__logo .ms-logo__mark   { width: 74px; height: 74px; margin: -12px -12px -12px -14px; }
.ms-footer__logo .ms-logo__name   { font-size: 30px; }
.ms-footer__logo .ms-logo__med     { color: #0f172a !important; }
.ms-footer__logo .ms-logo__service { color: #4fb3a4 !important; }
.ms-footer__logo .ms-logo__tld     { color: #94a3b8; }

/* Bigger nav band so logo breathes */
.main-navigation .inside-navigation {
  min-height: 84px !important;
  padding: 14px 32px !important;
}

@media (max-width: 900px) {
  .ms-logo .ms-logo__mark     { width: 70px; height: 70px; margin: -10px -10px -10px -12px; }
  .ms-logo .ms-logo__name     { font-size: 30px; }
  .ms-nav-logo .ms-logo__mark { width: 64px; height: 64px; margin: -10px -10px -10px -12px; }
  .ms-nav-logo .ms-logo__name { font-size: 26px; }
}
@media (max-width: 600px) {
  /* Mobile — bigger cross, snug against the wordmark */
  .ms-logo,
  .ms-nav-logo,
  .ms-footer__logo { gap: 0 !important; padding: 0 !important; }

  .ms-logo .ms-logo__mark,
  .ms-nav-logo .ms-logo__mark { width: 68px !important; height: 68px !important; margin: -12px -12px -12px -14px !important; }
  .ms-footer__logo .ms-logo__mark { width: 66px !important; height: 66px !important; margin: -12px -12px -12px -14px !important; }

  .ms-logo .ms-logo__name,
  .ms-nav-logo .ms-logo__name,
  .ms-footer__logo .ms-logo__name { font-size: 24px !important; }

  .ms-logo__tld { display: none !important; }

  .main-navigation .inside-navigation {
    min-height: 60px !important;
    padding: 6px 12px !important;
  }
}

/* ── Founder card with photo: 2-column on desktop, stacked on mobile ── */
.ms-founder-card {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 28px;
  text-align: left;
}
.ms-founder-card__media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%);
  box-shadow: 0 16px 36px -16px rgba(15,23,42,0.22);
  aspect-ratio: 4 / 5;
  max-width: 320px;
  margin: 0 auto;
}
.ms-founder-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ms-founder-card__content {
  position: relative;
  padding-top: 4px;
}
.ms-founder-card__quote-mark {
  position: absolute !important;
  top: -10px !important;
  left: -6px !important;
}

@media (min-width: 720px) {
  .ms-founder-card {
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
  }
  .ms-founder-card__media {
    max-width: 100%;
    margin: 0;
    position: sticky;
    top: 24px;
  }
  .ms-founder-card__content { padding-top: 8px; }
  .ms-founder-card__quote-mark { top: 0 !important; left: -8px !important; }
}
@media (min-width: 900px) {
  .ms-founder-card { grid-template-columns: 320px 1fr; gap: 48px; }
}

/* Tighten the accent strip so it doesn't overlap photo column on stacked layout */
.ms-founder-card::after { left: 0 !important; }

/* ── Team cards with real photo avatars ── */
.ms-team-card__avatar--photo {
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 60%, #ede9fe 100%) !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}
.ms-team-card__avatar--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 420ms cubic-bezier(0.22, 1.61, 0.36, 1);
}
.ms-team-card:hover .ms-team-card__avatar--photo img { transform: scale(1.06); }

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-9 — Team banner · District call buttons · FAQ tighter
 * ───────────────────────────────────────────────────────────────────────── */

/* Team group banner (above 4 individual cards) */
.ms-team-banner {
  margin: 0 0 36px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 56px -24px rgba(15,23,42,0.20);
  background: #fff;
  position: relative;
}
.ms-team-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  object-position: center 30%;
}

/* District cards as call buttons — green accent */
.ms-d-card--call .ms-d-card__icon {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  color: #15803d !important;
}
.ms-d-card--call:hover .ms-d-card__icon {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
  color: #fff !important;
  transform: scale(1.08) rotate(-3deg) !important;
}
.ms-d-card--call::before {
  background: linear-gradient(180deg, #22c55e, #15803d) !important;
}
.ms-d-card--call .ms-d-card__chev svg { width: 14px !important; height: 14px !important; }
.ms-d-card--call:hover .ms-d-card__chev { color: #15803d !important; }

/* FAQ — tighter spacing per user request */
.ms-faq { gap: 8px !important; }
.ms-faq-item {
  border-radius: 14px !important;
}
.ms-faq-item__q {
  font-size: 15px !important;
  padding: 16px 52px 16px 18px !important;
}
.ms-faq-item__chev {
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
}
.ms-faq-item__chev svg { width: 14px !important; height: 14px !important; }
.ms-faq-item__a {
  padding: 0 18px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.ms-faq-item.is-open .ms-faq-item__a { padding: 0 18px 16px !important; }
.ms-faq-item.is-open::before { top: 12px !important; bottom: 12px !important; }
.ms-section--faq .ms-section__head { margin-bottom: 28px !important; }

/* Final CTA without messenger row — center the single CTA button */
.ms-final-clean__or, .ms-final-clean__msgr { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-12 — Quiz UI polish (operator, cards, inputs, submit, progress)
 * ───────────────────────────────────────────────────────────────────────── */

/* Quiz outer shell */
.ms-quiz {
  font-family: var(--font-display);
  color: #0f172a;
}

/* Progress bar — refined segments, gradient fill, breathing animation */
.ms-quiz__progress {
  display: flex !important;
  gap: 6px !important;
  margin: 0 0 22px !important;
}
.ms-quiz__seg {
  flex: 1;
  height: 5px !important;
  border-radius: 9999px !important;
  background: #e5e7eb !important;
  position: relative;
  overflow: hidden;
  transition: background 320ms ease;
}
.ms-quiz__seg.is-active,
.ms-quiz__seg.is-done {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-end)) !important;
}
.ms-quiz__seg.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: ms-q-shimmer 1.4s ease-in-out infinite;
}
@keyframes ms-q-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Operator banner — softer, more inviting */
.ms-q-operator {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 18px !important;
  margin: 0 0 22px !important;
  position: relative;
}
.ms-q-operator__photo {
  position: relative;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-weight: normal;
  font-size: inherit;
  box-shadow: none !important;
  overflow: hidden;
}
.ms-q-operator__photo::before { content: none !important; }
.ms-q-operator__photo img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
}
.ms-q-operator__dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.16);
  animation: ms-q-pulse 1.8s ease-in-out infinite;
}
@keyframes ms-q-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.16); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0.06); }
}
.ms-q-operator__text { flex: 1; min-width: 0; }
.ms-q-operator__name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 0 2px !important;
  letter-spacing: 0.01em;
}
.ms-q-operator__msg {
  font-size: 14px !important;
  color: #334155 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.ms-q-operator__tail { display: none !important; }

/* Step head — bigger, cleaner */
.ms-q-head { margin: 0 0 18px !important; }
.ms-q-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}
.ms-q-sub {
  font-size: 14.5px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* Quiz cards — bigger touch targets, smoother hover */
.ms-q-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ms-q-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1.5px solid #eef1f5 !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 220ms ease, background 200ms ease !important;
  font-family: var(--font-display);
  position: relative;
  overflow: hidden;
}
.ms-q-card:hover {
  transform: translateY(-2px) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 10px 24px -14px rgba(37,99,235,0.28) !important;
}
.ms-q-card.is-selected {
  border-color: var(--color-primary) !important;
  background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%) !important;
  box-shadow: 0 16px 32px -16px rgba(37,99,235,0.30) !important;
}
.ms-q-card.is-selected::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-end));
}
.ms-q-card--sensitive {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

/* Card icon block — colored rounded square */
.ms-q-card__icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eff6ff !important;
  color: var(--color-primary) !important;
}
.ms-q-card__icon svg { width: 22px; height: 22px; }
.ms-q-card__icon--blue  { background: linear-gradient(135deg, #dbeafe, #c7d2fe) !important; color: #2563eb !important; }
.ms-q-card__icon--amber { background: linear-gradient(135deg, #fde68a, #fbbf24) !important; color: #92400e !important; }
.ms-q-card__icon--green { background: linear-gradient(135deg, #bbf7d0, #86efac) !important; color: #15803d !important; }
.ms-q-card__icon--rose  { background: linear-gradient(135deg, #fecaca, #fda4af) !important; color: #be123c !important; }
.ms-q-card:hover .ms-q-card__icon { transform: scale(1.06) rotate(-2deg); }
.ms-q-card.is-selected .ms-q-card__icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end)) !important;
  color: #fff !important;
}

/* Card body */
.ms-q-card__body { flex: 1; min-width: 0; }
.ms-q-card__title {
  display: block;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.ms-q-card__meta {
  display: block;
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Card chevron */
.ms-q-card__chevron {
  flex-shrink: 0;
  color: #cbd5e1 !important;
  transition: color 200ms ease, transform 220ms cubic-bezier(0.22, 1.61, 0.36, 1);
}
.ms-q-card__chevron svg { width: 16px; height: 16px; }
.ms-q-card:hover .ms-q-card__chevron { color: var(--color-primary) !important; transform: translateX(3px); }
.ms-q-card.is-selected .ms-q-card__chevron { color: var(--color-primary) !important; }

/* Compact district cards (used on step 3) */
.ms-q-card--district {
  padding: 12px 14px !important;
  gap: 10px !important;
}
.ms-q-card--district .ms-q-card__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}
.ms-q-card--district .ms-q-card__title { font-size: 14px !important; }

/* Form fields (step 4) */
.ms-q-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
}
.ms-q-field__label {
  font-family: var(--font-display);
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}
.ms-q-field__label small {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  margin-left: 4px;
  font-size: 11px;
}
.ms-q-field input[type="text"],
.ms-q-field input[type="tel"],
.ms-q-field textarea {
  width: 100% !important;
  padding: 13px 14px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  outline: none !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  font-weight: 500 !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Reserve space on the left when a leading icon is rendered inside the wrap */
.ms-q-field__wrap input[type="text"],
.ms-q-field__wrap input[type="tel"] {
  padding-left: 42px !important;
}
.ms-q-field input::placeholder,
.ms-q-field textarea::placeholder {
  color: #94a3b8 !important;
  font-weight: 500;
}
.ms-q-field input:focus,
.ms-q-field textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12) !important;
}
.ms-q-field input[aria-invalid="true"] {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.10) !important;
}
.ms-q-field__error {
  font-size: 12.5px !important;
  color: #dc2626 !important;
  font-weight: 600;
  margin: 4px 0 0 !important;
}

/* Summary card (step 4 — shows answers so far) */
.ms-q-summary {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin: 0 0 16px !important;
}
.ms-q-summary__title {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin: 0 0 8px !important;
}
.ms-q-summary__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-q-summary__list li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
}
.ms-q-summary__list li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dcfce7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
  flex-shrink: 0;
}

/* Submit button — bigger, gradient, with arrow */
.ms-q-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -0.005em !important;
  box-shadow: 0 16px 32px -12px rgba(37,99,235,0.45) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  margin: 4px 0 0 !important;
}
.ms-q-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 48px -12px rgba(37,99,235,0.55) !important;
}
.ms-q-submit:active { transform: translateY(0) !important; }
.ms-q-submit__icon { display: inline-flex; }
.ms-q-submit__icon svg { width: 18px; height: 18px; }

/* Back button (between steps) */
.ms-q-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 8px 0 !important;
  margin: 12px 0 0 !important;
  transition: color 180ms ease;
}
.ms-q-back:hover { color: var(--color-primary) !important; }
.ms-q-back svg { width: 14px; height: 14px; }

/* Footer line below submit */
.ms-q-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  margin: 10px 0 0 !important;
  text-align: center;
}
.ms-q-footer svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Mobile tuning */
@media (max-width: 600px) {
  .ms-q-card { padding: 12px !important; gap: 12px !important; }
  .ms-q-card__icon { width: 40px !important; height: 40px !important; }
  .ms-q-card__title { font-size: 14.5px !important; }
  .ms-q-operator { padding: 12px 14px !important; }
  .ms-q-operator__photo { width: 40px !important; height: 40px !important; font-size: 16px; }
  .ms-q-submit { font-size: 15px !important; padding: 14px 20px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-11 — FAQ refined: numbered badges, smoother animation, polish
 * ───────────────────────────────────────────────────────────────────────── */

.ms-section--faq {
  background: linear-gradient(180deg, #fafbfd 0%, #f1f5f9 100%) !important;
  padding: 80px 16px !important;
}
@media (min-width: 900px) {
  .ms-section--faq { padding: 100px 16px !important; }
}

.ms-section--faq .ms-section__head {
  text-align: center;
  margin-bottom: 36px !important;
}
.ms-section--faq .ms-section__eyebrow {
  justify-content: center;
}
.ms-section--faq .ms-section__title {
  font-size: clamp(30px, 4.4vw, 44px) !important;
  margin: 8px 0 10px !important;
}
/* Inject a subtitle below FAQ title via ::after if no .ms-section__sub */
.ms-section--faq .ms-section__head::after {
  content: 'Не знайшли відповідь? Зателефонуйте — координатор підкаже.';
  display: block;
  font-size: 14.5px;
  color: #64748b;
  margin-top: 6px;
}

/* FAQ list — counter for auto-numbered badges */
.ms-faq {
  counter-reset: faq;
  gap: 10px !important;
}
.ms-faq-item {
  counter-increment: faq;
  background: #fff !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.02);
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease, transform 200ms ease !important;
  position: relative;
}
.ms-faq-item:hover {
  border-color: #dbeafe !important;
  background: #fafcff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(37,99,235,0.20) !important;
}
.ms-faq-item.is-open {
  border-color: #bfdbfe !important;
  background: #fff !important;
  box-shadow: 0 16px 36px -18px rgba(37,99,235,0.28) !important;
  transform: translateY(-2px);
}

/* Numbered badge before question (01, 02, …) */
.ms-faq-item__q {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  padding: 18px 56px 18px 18px !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
  letter-spacing: -0.005em;
}
.ms-faq-item__q::before {
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  transition: background 240ms ease, color 240ms ease, transform 240ms ease;
}
.ms-faq-item:hover .ms-faq-item__q::before {
  transform: scale(1.06);
}
.ms-faq-item.is-open .ms-faq-item__q::before {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end)) !important;
  color: #fff !important;
  transform: scale(1.1) rotate(-3deg);
}

/* Chevron — softer, more aligned with overall design */
.ms-faq-item__chev {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 320ms cubic-bezier(0.22, 1.61, 0.36, 1), background 240ms ease, color 240ms ease !important;
}
.ms-faq-item__chev svg { width: 14px !important; height: 14px !important; }
.ms-faq-item:hover .ms-faq-item__chev {
  background: #dbeafe !important;
  color: var(--color-primary) !important;
}
.ms-faq-item.is-open .ms-faq-item__chev {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end)) !important;
  color: #fff !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Answer — bigger, more readable, smooth reveal */
.ms-faq-item__a {
  margin: 0 !important;
  padding: 0 18px 0 64px !important;
  font-size: 14.5px !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease 60ms, padding 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ms-faq-item.is-open .ms-faq-item__a {
  max-height: 700px;
  opacity: 1;
  padding: 0 18px 18px 64px !important;
}

/* Soft left accent stripe when open (subtler than before) */
.ms-faq-item::before { display: none !important; }
.ms-faq-item.is-open::before {
  display: block !important;
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-end));
  border-radius: 0 3px 3px 0;
}

@media (max-width: 600px) {
  .ms-faq-item__q { font-size: 14.5px !important; padding: 16px 48px 16px 14px !important; gap: 10px !important; }
  .ms-faq-item__q::before { width: 28px; height: 28px; font-size: 11.5px; }
  .ms-faq-item__a { padding: 0 14px 0 52px !important; }
  .ms-faq-item.is-open .ms-faq-item__a { padding: 0 14px 14px 52px !important; }
  .ms-faq-item__chev { width: 26px !important; height: 26px !important; right: 12px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * UPGRADE-10 — Hero + Quiz redesigned in trust-blocks style
 * Big H1, eyebrow with dash, soft-pastel quiz shell, gradient CTA pill
 * ───────────────────────────────────────────────────────────────────────── */

/* Kill fake stats + license pill from old hero */
.msd-hero__stats,
.msd-hero__pill,
.msd-hero__chips,
.ms-hero__pill,
.ms-hero__stats,
.ms-hero__chips { display: none !important; }

/* Hero section background — soft alternating gradient like trust-blocks */
.msd-hero,
.ms-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 70%, #f1f5f9 100%) !important;
  padding: 56px 24px 80px !important;
}
@media (min-width: 900px) {
  .msd-hero { padding: 80px 24px 100px !important; }
}

/* Hero H1 — match trust-blocks section title typography */
.msd-hero__title,
.ms-hero__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 5.6vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
  color: #0f172a !important;
  margin: 12px 0 18px !important;
}
.msd-hero__accent,
.ms-hero__accent {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* Hero subhead */
.msd-hero__subhead,
.ms-hero__subhead {
  font-size: 17px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  margin: 0 0 26px !important;
  max-width: 560px;
}

/* Hero bullets — flat inline pill chips, simple and readable */
.msd-hero__bullets,
.ms-hero__bullets {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  text-align: left !important;
}
.msd-hero__bullets li,
.ms-hero__bullets li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  padding: 8px 14px 8px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  box-shadow: none !important;
  letter-spacing: -0.005em;
  position: static !important;
  transition: background 180ms ease, color 180ms ease;
}
.msd-hero__bullets li:hover,
.ms-hero__bullets li:hover {
  background: #e2e8f0 !important;
}
.msd-hero__bullets li::before,
.ms-hero__bullets li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 12px 12px no-repeat;
  margin: 0;
  font-size: 0;
}
.msd-hero__bullets li svg,
.ms-hero__bullets li svg { display: none !important; }

@media (max-width: 600px) {
  .msd-hero__bullets li,
  .ms-hero__bullets li { font-size: 13px !important; padding: 7px 12px 7px 8px !important; }
}

/* Hero CTA button — gradient pill like trust-blocks final CTA */
.msd-hero__btn,
.btn-primary.msd-hero__btn,
.ms-hero__btn,
.btn-primary.ms-hero__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 36px !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-end) 100%) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 16px 36px -12px rgba(37,99,235,0.45) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  letter-spacing: -0.005em !important;
  border: 0 !important;
}
.msd-hero__btn:hover,
.ms-hero__btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 48px -12px rgba(37,99,235,0.55) !important;
}

/* Hero quiz shell — white rounded card with shadow like ms-srv2 */
.msd-hero__quiz-shell,
.ms-hero__quiz {
  background: #fff !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 28px !important;
  padding: 24px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 28px 56px -28px rgba(15,23,42,0.18) !important;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  .msd-hero__quiz-shell { padding: 28px !important; }
}

/* Quiz step head — bigger, trust-blocks-style title */
.ms-q-step__title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
}
.ms-q-step__sub {
  font-size: 14.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}

/* Quiz cards — match .ms-srv2 pastel feel with hover lift */
.ms-q-card {
  border: 1px solid #eef1f5 !important;
  background: #fff !important;
  border-radius: 18px !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}
.ms-q-card:hover {
  transform: translateY(-2px) !important;
  border-color: #dbeafe !important;
  box-shadow: 0 12px 28px -16px rgba(37,99,235,0.22) !important;
}
.ms-q-card.is-selected {
  border-color: var(--color-primary) !important;
  box-shadow: 0 16px 32px -16px rgba(37,99,235,0.30) !important;
  background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%) !important;
}

/* Quiz submit — gradient pill matching hero CTA */
.ms-q-submit {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end)) !important;
  border-radius: 9999px !important;
  padding: 16px 28px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  box-shadow: 0 14px 32px -12px rgba(37,99,235,0.45) !important;
  border: 0 !important;
  color: #fff !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}
.ms-q-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -12px rgba(37,99,235,0.55) !important;
}

/* Quiz progress bar — softer */
.ms-q-progress__seg.is-done {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-end)) !important;
}

/* Operator banner — match founder card vibe */
.ms-q-operator {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 16px !important;
}

/* Mobile / Desktop hero swap — aligned to 1024px breakpoint (matches .ms-mobile-only / .ms-desktop-only wrappers) */
@media (max-width: 1023px) {
  .msd-hero { display: none !important; }
  .ms-hero  { display: block !important; }
}
@media (min-width: 1024px) {
  .ms-hero  { display: none !important; }
  .msd-hero { display: block !important; }
}

/* ── Per-page intro section (non-home pages) ── */
.ms-section--page-intro {
  padding: 64px 20px 24px !important;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.ms-section--page-intro .ms-section__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.ms-page-intro__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin: 0 0 16px;
}
.ms-page-intro__lead {
  font-size: 17px;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 22px;
  font-weight: 500;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.ms-page-intro__bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.ms-page-intro__bullets li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  padding: 6px 12px;
  border-radius: 9999px;
}
.ms-page-intro__bullets svg { width: 14px; height: 14px; }
.ms-page-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-end));
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15.5px;
  border-radius: 9999px;
  text-decoration: none !important;
  box-shadow: 0 14px 32px -12px rgba(37,99,235,0.45);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.ms-page-intro__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(37,99,235,0.55);
}

/* Hero bullets — force solid green check-circle (wins cascade) */
.ms-hero .ms-hero__bullets li::before,
.ms-hero__bullets li::before,
.msd-hero__bullets li::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: #16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 12px 12px no-repeat !important;
  margin: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: static !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  FAQ v2 — fresh native <details> accordion (round-20)
 *  Premium compact medical · zero-JS · sticky-CTA aware
 * ═══════════════════════════════════════════════════════════════════════ */

/* Hide ALL legacy FAQ styles by neutralising the old root */
.ms-section--faq { display: none !important; }

/* Section */
.ms-faqv2-section {
  padding: 36px 16px 110px;
  background: #fff;
}
.ms-faqv2-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* Header */
.ms-faqv2-head {
  margin: 0 0 18px;
  text-align: left;
}
.ms-faqv2-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #2563eb);
  background: #eff6ff;
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 0 10px;
  line-height: 1.2;
}
.ms-faqv2-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0;
}
.ms-faqv2-sub {
  font-size: 14px;
  line-height: 20px;
  color: #64748b;
  margin: 8px 0 0;
  max-width: 540px;
}

/* List — counter root for numbered badges */
.ms-faqv2-list {
  counter-reset: faqv2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 0;
}

/* Item card */
.ms-faqv2-item {
  counter-increment: faqv2;
  background: #fff;
  border: 1px solid #E8EEF7;
  border-radius: 16px;
  padding: 0;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
  position: relative;
}
.ms-faqv2-item:hover { border-color: #cfe0fa; }
.ms-faqv2-item[open] {
  background: #FBFCFF;
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 6px 18px -12px rgba(37,99,235,0.22);
}

/* Question (summary) — full row, custom toggle */
.ms-faqv2-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 56px;
  min-height: 60px;
  position: relative;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
  user-select: none;
}
.ms-faqv2-q::-webkit-details-marker { display: none; }
.ms-faqv2-q::marker { content: ''; }
.ms-faqv2-q > span:first-child { flex: 1; min-width: 0; }

/* Numbered badge (counter) — 28x28 on the left */
.ms-faqv2-q::before {
  content: counter(faqv2, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--color-primary, #2563eb);
  font-size: 11.5px;
  font-weight: 800;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: background 200ms ease, color 200ms ease;
}
.ms-faqv2-item[open] .ms-faqv2-q::before {
  background: var(--color-primary, #2563eb);
  color: #fff;
}

/* Toggle "+" → "×" */
.ms-faqv2-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  position: relative;
  transition: background 200ms ease, color 200ms ease, transform 220ms ease;
}
.ms-faqv2-toggle::before,
.ms-faqv2-toggle::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  top: 50%;
  left: 50%;
}
.ms-faqv2-toggle::before {
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.ms-faqv2-toggle::after {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
  transition: transform 220ms ease, opacity 220ms ease;
}
.ms-faqv2-item:hover .ms-faqv2-toggle { background: #e0ecff; color: var(--color-primary, #2563eb); }
.ms-faqv2-item[open] .ms-faqv2-toggle {
  background: var(--color-primary, #2563eb);
  color: #fff;
  transform: rotate(45deg);
}

/* Answer */
.ms-faqv2-a {
  padding: 4px 16px 14px 56px;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
  font-weight: 400;
}

/* Native open animation (modern browsers) */
.ms-faqv2-item::details-content { transition: block-size 240ms ease, content-visibility 240ms allow-discrete; }

/* Mobile */
@media (max-width: 600px) {
  .ms-faqv2-section { padding: 28px 16px 100px; }
  .ms-faqv2-title { font-size: 22px; }
  .ms-faqv2-q { font-size: 14.5px; padding: 13px 14px 13px 50px; min-height: 56px; gap: 10px; }
  .ms-faqv2-q::before { left: 12px; width: 26px; height: 26px; font-size: 11px; }
  .ms-faqv2-toggle { width: 24px; height: 24px; }
  .ms-faqv2-a { padding: 2px 14px 12px 50px; font-size: 13.5px; line-height: 1.55; }
}

/* Hero — services chips in 2-column grid (3 chips × 2 rows) */
.ms-hero__services,
.msd-hero__services {
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 18px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  max-width: 480px;
}
.ms-hero__services li,
.msd-hero__services li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 9999px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #1e3a8a !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .ms-hero__services li,
  .msd-hero__services li { font-size: 12px !important; padding: 7px 10px !important; }
}

/* Hero — CTA + messengers row */
.ms-hero__cta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}
.ms-hero__cta .ms-hero__btn { flex: 1 1 auto; min-width: 220px; }
.ms-hero__msgrs {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.ms-hero__msg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.ms-hero__msg:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(0,0,0,.2); }
.ms-hero__msg--viber    { background: #7360F2 !important; }
.ms-hero__msg--telegram { background: #0088cc !important; }
.ms-hero__msg--whatsapp { background: #25D366 !important; }
@media (max-width: 480px) {
  .ms-hero__msg { width: 40px !important; height: 40px !important; }
  .ms-hero__cta .ms-hero__btn { min-width: 0; flex: 1 1 100%; }
}
.ms-hero__services li,
.msd-hero__services li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 11px !important;
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 9999px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #1e3a8a !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.ms-hero__services li::before,
.msd-hero__services li::before { content: none !important; }
.ms-hero__services-ico,
.msd-hero__services-ico { font-size: 14px; line-height: 1; }
@media (max-width: 480px) {
  .ms-hero__services li,
  .msd-hero__services li { font-size: 12px !important; padding: 5px 9px !important; }
}

/* Tighten subhead → chips → CTA stack + wider subhead, 2-line cap on mobile */
.ms-hero--home .ms-hero__subhead,
.msd-hero--home .msd-hero__subhead {
  margin: 0 0 8px !important;
  max-width: 600px !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  font-weight: 500 !important;
}
@media (max-width: 480px) {
  .ms-hero--home .ms-hero__subhead {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }
}
.ms-hero--home .ms-hero__cta,
.msd-hero--home .msd-hero__cta { margin-top: 4px !important; }

/* ═══════════════════════════════════════════════════════════════════════
 *  FOOTER — compact info layout (round-19): no services list, left-aligned,
 *  logo + tag + phone + trust + legal row · sticky-CTA aware.
 * ═══════════════════════════════════════════════════════════════════════ */
.ms-footer--compact {
  padding: 28px 16px 100px !important;
  background: #fff !important;
  border-top: 1px solid #eef2f7 !important;
}
@media (min-width: 768px) {
  .ms-footer--compact { padding: 36px 24px 100px !important; }
}
.ms-footer--compact .ms-footer__inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
}
.ms-footer--compact .ms-footer__logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.ms-footer--compact .ms-footer__tag {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
}
.ms-footer--compact .ms-footer__phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #0f172a !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  background: transparent !important;
}
.ms-footer--compact .ms-footer__phone svg { color: var(--color-primary, #2563eb); }
.ms-footer--compact .ms-footer__phone:hover { color: var(--color-primary, #2563eb) !important; }
.ms-footer--compact .ms-footer__trust {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}
.ms-footer--compact .ms-footer__bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #eef2f7 !important;
  width: 100% !important;
  align-items: flex-start !important;
}
.ms-footer--compact .ms-footer__copyright {
  margin: 0 !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}
.ms-footer--compact .ms-footer__legal {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  align-items: center !important;
}
.ms-footer--compact .ms-footer__legal a {
  font-size: 12px !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.ms-footer--compact .ms-footer__legal a:hover { color: var(--color-primary, #2563eb) !important; }
.ms-footer--compact .ms-footer__legal-sep { color: #cbd5e1; font-size: 12px; }
/* Footer — contact-focused (no page lists, just brand + heading + phone + messengers) */
.ms-footer--contact {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 36px 16px 100px !important;
  text-align: center;
}
.ms-footer--contact .ms-footer__inner {
  max-width: 640px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}
.ms-footer--contact .ms-footer__logo {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  text-decoration: none !important;
  margin: 0 0 4px !important;
}
.ms-footer--contact .ms-footer__heading {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.015em !important;
}
.ms-footer--contact .ms-footer__heading span {
  color: var(--color-primary, #2563eb) !important;
  display: inline-block;
}
.ms-footer--contact .ms-footer__tag {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 460px;
}
.ms-footer--contact .ms-footer__contacts {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 0 !important;
  width: 100%;
}
.ms-footer--contact .ms-footer__phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, var(--color-primary, #2563eb), var(--color-primary-end, #4f46e5)) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 24px -12px rgba(37,99,235,0.55) !important;
}
.ms-footer--contact .ms-footer__msgrs {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  flex-wrap: wrap;
}
.ms-footer--contact .ms-footer__msg {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  border-radius: 9999px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.ms-footer--contact .ms-footer__msg:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.2); }
.ms-footer--contact .ms-footer__msg--viber    { background: #7360F2 !important; }
.ms-footer--contact .ms-footer__msg--telegram { background: #0088cc !important; }
.ms-footer--contact .ms-footer__msg--whatsapp { background: #25D366 !important; }
.ms-footer--contact .ms-footer__bottom {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #eef2f7 !important;
  width: 100% !important;
}
.ms-footer--contact .ms-footer__copyright {
  margin: 0 !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}
.ms-footer--contact .ms-footer__copyright a { color: #475569; text-decoration: none; }
.ms-footer--contact .ms-footer__copyright a:hover { color: var(--color-primary, #2563eb); }
@media (max-width: 480px) {
  .ms-footer--contact .ms-footer__heading { font-size: 19px !important; }
  .ms-footer--contact .ms-footer__msgrs { gap: 6px !important; }
  .ms-footer--contact .ms-footer__msg { padding: 8px 12px !important; font-size: 12.5px !important; }
}

/* Footer v2 layout — restored 3-col grid: brand | services | info */
.ms-footer--v2 {
  background: #fff !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 36px 16px 100px !important;
}
@media (min-width: 768px) {
  .ms-footer--v2 { padding: 48px 24px 90px !important; }
}
.ms-footer--v2 .ms-footer__grid {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}
@media (min-width: 700px) {
  .ms-footer--v2 .ms-footer__grid { grid-template-columns: 1.6fr 1fr 1fr !important; gap: 40px !important; }
}
.ms-footer--v2 .ms-footer__col { min-width: 0 !important; }
.ms-footer--v2 .ms-footer__col--brand { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
.ms-footer--v2 .ms-footer__logo {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  text-decoration: none !important;
}
.ms-footer--v2 .ms-footer__tag { margin: 0 !important; font-size: 14px !important; color: #475569 !important; line-height: 1.5 !important; max-width: 360px; }
.ms-footer--v2 .ms-footer__phone {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 16px !important;
  color: #0f172a !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important;
}
.ms-footer--v2 .ms-footer__phone svg { color: var(--color-primary, #2563eb); }
.ms-footer--v2 .ms-footer__title {
  font-family: var(--font-display) !important;
  font-size: 12px !important; font-weight: 800 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: #94a3b8 !important; margin: 0 0 12px !important;
}
.ms-footer--v2 .ms-footer__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.ms-footer--v2 .ms-footer__link {
  color: #475569 !important; text-decoration: none !important;
  font-size: 14px !important; font-weight: 500 !important;
  transition: color 180ms ease;
}
.ms-footer--v2 .ms-footer__link:hover { color: var(--color-primary, #2563eb) !important; }
.ms-footer--v2 .ms-footer__bottom {
  max-width: 1100px !important;
  margin: 28px auto 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid #eef2f7 !important;
}
.ms-footer--v2 .ms-footer__copyright { margin: 0 !important; font-size: 12.5px !important; color: #94a3b8 !important; }

/* ═══════════════════════════════════════════════════════════════════════
 *  QUIZ — UX OVERHAUL (round-17): tighter hierarchy, stronger selected,
 *  step label, sticky form CTA, compact operator/summary banners.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Progress: label + bar */
.ms-quiz__progress-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}
.ms-quiz__progress-wrap.is-done .ms-quiz__progress-label { display: none !important; }
.ms-quiz__progress-label {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.ms-quiz__progress-label [data-current-step] {
  color: var(--color-primary);
  font-size: 13.5px;
}
.ms-quiz__progress-wrap .ms-quiz__progress {
  flex: 1 !important;
  margin: 0 !important;
  height: 6px !important;
  background: #eef2f7 !important;
  border-radius: 999px !important;
  display: flex !important;
  gap: 3px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.ms-quiz__progress-wrap .ms-quiz__seg {
  height: 6px !important;
  border-radius: 999px !important;
  background: #e2e8f0 !important;
  transition: background 320ms ease, transform 320ms ease;
}
.ms-quiz__progress-wrap .ms-quiz__seg.is-active {
  background: linear-gradient(90deg, #2563eb, #4f46e5) !important;
  box-shadow: 0 0 0 0 rgba(37,99,235,0.0);
}

/* Operator banner — compact, single line on mobile, less dominant */
.ms-q-operator {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 14px !important;
  gap: 10px !important;
}
.ms-q-operator__photo,
.ms-q-operator__photo img {
  width: 32px !important;
  height: 32px !important;
}
.ms-q-operator__photo img {
  box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgba(15,23,42,0.08) !important;
}
.ms-q-operator__dot {
  width: 9px !important;
  height: 9px !important;
  bottom: -1px !important;
  right: -1px !important;
  border-width: 1.5px !important;
}
.ms-q-operator__name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
.ms-q-operator__msg {
  font-size: 12.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
}
.ms-q-operator__tail { display: none !important; }

/* Confirm summary banner — tight 1-line pill */
.ms-q-banner {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 999px !important;
  padding: 6px 12px 6px 6px !important;
  margin-bottom: 14px !important;
  align-items: center !important;
  gap: 8px !important;
}
.ms-q-banner__icon {
  width: 22px !important;
  height: 22px !important;
  background: #16a34a !important;
}
.ms-q-banner__icon svg { width: 13px !important; height: 13px !important; }
.ms-q-banner__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #166534 !important;
}
.ms-q-banner__sub { display: none !important; }

/* Question hierarchy — bigger title, smaller sub, tighter gap */
.ms-q-head { margin: 4px 2px 12px !important; }
.ms-q-title {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 4px !important;
  color: #0f172a !important;
}
.ms-q-sub {
  font-size: 13px !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
}
@media (max-width: 480px) {
  .ms-q-title { font-size: 22px !important; }
}

/* Cards — tighter, lower height */
.ms-q-cards { gap: 8px !important; }
.ms-q-card {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border-width: 1.5px !important;
  gap: 10px !important;
  border-color: #e5e7eb !important;
}
.ms-q-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 3px 10px -6px rgba(37,99,235,0.25) !important;
}
.ms-q-card__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}
.ms-q-card__icon svg { width: 18px !important; height: 18px !important; }
.ms-q-card__title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  letter-spacing: -0.005em !important;
}
.ms-q-card__meta {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}
/* Selected state: ensure both lines stay legible on dark gradient */
.ms-q-card.is-selected .ms-q-card__title { color: #ffffff !important; }
.ms-q-card.is-selected .ms-q-card__meta  { color: rgba(255,255,255,0.85) !important; }

/* Stronger selected state — clear "VYBRANO" + checkmark badge + ring */
.ms-q-card.is-selected {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  border-color: #1e3a8a !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18), 0 14px 28px -12px rgba(37,99,235,0.55) !important;
  transform: translateY(-1px);
}
.ms-q-card.is-selected::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 13px 13px no-repeat;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.25);
}
.ms-q-card.is-selected .ms-q-card__chevron { opacity: 0; }
.ms-q-card--district.is-selected::after { width: 20px; height: 20px; }

/* District grid — smaller, denser cells */
.ms-q-cards--districts { gap: 6px !important; }
.ms-q-card--district { padding: 10px 12px !important; }
.ms-q-card--district .ms-q-card__icon {
  width: 28px !important;
  height: 28px !important;
}
.ms-q-card--district .ms-q-card__icon svg { width: 14px !important; height: 14px !important; }
.ms-q-card--district .ms-q-card__title { font-size: 13.5px !important; }

/* Foot trust text */
.ms-q-foot {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin: 12px 0 0 !important;
  text-align: center !important;
}

/* Form step — sticky submit on mobile, cleaner trust line */
.ms-q-form-card { padding: 16px !important; }
.ms-q-form .ms-q-submit {
  border-radius: 14px !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px -12px rgba(37,99,235,0.55) !important;
}
.ms-q-privacy {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px 12px !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  margin: 10px 0 0 !important;
  text-align: center;
}

/* Summary on form step — compact 1-line chips */
.ms-q-summary {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-bottom: 12px !important;
}
.ms-q-summary__eyebrow {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  margin: 0 0 6px !important;
}
.ms-q-summary__rows {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.ms-q-summary__row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 4px 10px 4px 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.ms-q-summary__row--divider { border-color: #bfdbfe !important; background: #eff6ff !important; color: #1e40af !important; }
.ms-q-summary__check {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ms-q-summary__check svg { width: 10px !important; height: 10px !important; }
.ms-q-summary__row--divider .ms-q-summary__check { background: #2563eb !important; }

/* Back button — smaller, lighter */
.ms-q-back {
  background: transparent !important;
  border: 0 !important;
  color: #64748b !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 0 !important;
  margin-top: 8px !important;
  cursor: pointer !important;
}
.ms-q-back:hover { color: #2563eb !important; }

/* ═══════════════════════════════════════════════════════════════════════
 *  Operator photo — HARD RESET (kill all legacy blue rings/glows/letters)
 * ═══════════════════════════════════════════════════════════════════════ */
.ms-q-operator__photo,
.ms-q-operator .ms-q-operator__photo {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: visible !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ms-q-operator__photo::before,
.ms-q-operator__photo::after { content: none !important; display: none !important; }
.ms-q-operator__photo img,
.ms-q-operator .ms-q-operator__photo img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  display: block !important;
}
.ms-q-operator__tail { display: none !important; }
/* Online indicator — small green dot on bottom-right of the photo */
.ms-q-operator__dot {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  animation: none !important;
  z-index: 2;
}

/* Header logo — closer to the left edge */
.main-navigation .inside-navigation { padding-left: 12px !important; padding-right: 12px !important; }
@media (max-width: 768px) {
  .main-navigation .inside-navigation { padding-left: 6px !important; padding-right: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  FINAL ZONE (round-21): tighter FAQ → CTA → Footer rhythm
 * ═══════════════════════════════════════════════════════════════════════ */

/* FAQ bottom: drop heavy 110px → 40px so the CTA card sits close */
.ms-faqv2-section { padding-bottom: 40px !important; }
@media (max-width: 600px) {
  .ms-faqv2-section { padding-bottom: 36px !important; }
}

/* Final CTA section — tight vertical margins */
.ms-section--final {
  padding: 0 16px 32px !important;
  background: transparent !important;
}
@media (min-width: 768px) {
  .ms-section--final { padding: 0 24px 36px !important; }
}
.ms-section--final .ms-section__inner {
  max-width: 720px !important;
  margin: 0 auto !important;
}

/* CTA card — compact, less internal whitespace */
.ms-final-clean {
  padding: 32px 24px !important;
  border-radius: 22px !important;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 8px 24px -16px rgba(37,99,235,0.20) !important;
}
.ms-final-clean__title {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  color: #0f172a !important;
}
@media (min-width: 768px) {
  .ms-final-clean__title { font-size: 26px !important; }
}
.ms-final-clean__sub {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #475569 !important;
  margin: 0 0 18px !important;
  font-weight: 500 !important;
}
.ms-final-clean__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, var(--color-primary, #2563eb), var(--color-primary-end, #4f46e5)) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  font-family: var(--font-display);
  font-weight: 800 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px -12px rgba(37,99,235,0.55) !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ms-final-clean__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(37,99,235,0.55) !important; }

/* Footer — tighter top, sticky-CTA aware bottom */
.ms-footer--compact { padding-top: 24px !important; padding-bottom: 100px !important; }
@media (min-width: 768px) {
  .ms-footer--compact { padding-top: 28px !important; padding-bottom: 90px !important; }
}

/* Decorative blue lines flanking the eyebrow (Districts + Team sections) */
.ms-section--districts .ms-section__eyebrow,
.ms-section--team .ms-section__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ms-section--districts .ms-section__eyebrow::before,
.ms-section--districts .ms-section__eyebrow::after,
.ms-section--team .ms-section__eyebrow::before,
.ms-section--team .ms-section__eyebrow::after {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--color-primary, #2563eb);
  border-radius: 2px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .ms-section--districts .ms-section__eyebrow::before,
  .ms-section--districts .ms-section__eyebrow::after,
  .ms-section--team .ms-section__eyebrow::before,
  .ms-section--team .ms-section__eyebrow::after { width: 20px; }
  .ms-section--districts .ms-section__eyebrow,
  .ms-section--team .ms-section__eyebrow { gap: 10px !important; }
}

/* Smooth scroll for in-page anchor menu links + offset so header doesn't cover the top of the section */
html { scroll-behavior: smooth; }
#services, #districts, #team, #faq, #footer, #quiz { scroll-margin-top: 80px; }

/* ═══════════════════════════════════════════════════════════════════════
 *  HAMBURGER MENU — visible on all screen sizes (round-22)
 *  Inline desktop menu hidden; burger opens a clean dropdown overlay.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Burger button always visible, on the right of header */
.ms-mobile-toggle {
  display: flex !important;
  margin-left: auto !important;
  width: 40px !important;
  height: 40px !important;
  padding: 10px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  flex-shrink: 0;
}
.ms-mobile-toggle span {
  display: block !important;
  height: 2.5px !important;
  background: #0f172a !important;
  border-radius: 2px !important;
}

/* Hide GP's duplicate burger and inline primary menu on ALL widths */
.main-navigation .menu-toggle,
.mobile-menu-control-wrapper { display: none !important; }
.main-navigation .main-nav,
.main-navigation #primary-menu {
  display: none !important;
}

/* When toggled — show the menu as full-width dropdown anchored under nav */
.main-navigation { position: relative; }
.main-navigation.toggled .main-nav,
.main-navigation.toggled #primary-menu {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 14px 28px -16px rgba(15,23,42,0.16) !important;
  padding: 12px 0 14px !important;
  z-index: 999;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.main-navigation.toggled #primary-menu > ul.sf-menu,
.main-navigation.toggled #primary-menu > ul.menu {
  display: flex !important;
  flex-direction: column !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 16px !important;
}
.main-navigation.toggled #primary-menu li {
  display: block !important;
  padding: 0 !important;
  border-bottom: 1px solid #f1f5f9;
}
.main-navigation.toggled #primary-menu li:last-child { border-bottom: 0; }
.main-navigation.toggled #primary-menu li > a {
  display: block !important;
  padding: 14px 16px !important;
  font-family: var(--font-display) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  transition: background 160ms ease, color 160ms ease;
}
.main-navigation.toggled #primary-menu li > a:hover,
.main-navigation.toggled #primary-menu li > a:focus {
  background: #eff6ff !important;
  color: var(--color-primary, #2563eb) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  HEADER (clean) — visible sticky bar with logo, online, phone, burger
 * ═══════════════════════════════════════════════════════════════════════ */

/* Hide the duplicate GP mobile-toggle wrapper, not the real nav */
#mobile-menu-control-wrapper { display: none !important; }

/* Show the real navigation band as a sticky white header.
   Override earlier `.site-header, .site-header .inside-header { display: none }` */
.site-header { display: block !important; position: static !important; }
.site-header .inside-header { display: block !important; padding: 0 !important; min-height: 0 !important; }
.site-header .inside-header > .ms-logo-wrap,
.site-header .inside-header > .site-branding { display: none !important; }
nav#site-navigation {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
nav#site-navigation .inside-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: nowrap;
}

/* Logo — tight against mark, bigger text */
nav#site-navigation .ms-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px !important;
  flex-shrink: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 22px !important;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1;
}
nav#site-navigation .ms-logo__mark { display: inline-flex; align-items: center; }
nav#site-navigation .ms-logo__mark img { width: 36px !important; height: 36px !important; display: block; margin-right: -2px; }
nav#site-navigation .ms-logo__text { display: inline-flex; align-items: baseline; gap: 0; }
nav#site-navigation .ms-logo__name { display: inline-flex; align-items: baseline; }
nav#site-navigation .ms-logo__med { color: #0f172a; }
nav#site-navigation .ms-logo__service { color: var(--color-primary, #2563eb); }
nav#site-navigation .ms-logo__tld { font-size: 10px !important; color: #94a3b8; font-weight: 700; margin-left: 3px; align-self: center; }
@media (max-width: 380px) {
  nav#site-navigation .ms-nav-logo { font-size: 19px !important; }
  nav#site-navigation .ms-logo__mark img { width: 30px !important; height: 30px !important; }
  nav#site-navigation .ms-logo__tld { display: none; }
}

/* Right actions */
nav#site-navigation .ms-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Online pill — green oval with "Виїзд по Києву · 5:00–00:00" */
nav#site-navigation .ms-header-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #166534;
  white-space: nowrap;
}
nav#site-navigation .ms-header-online__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
nav#site-navigation .ms-header-online__text {
  display: inline !important;
  font-weight: 700;
}
nav#site-navigation .ms-header-online__hours {
  font-weight: 600;
  border-left: 1px solid rgba(22,101,52,.25);
  padding-left: 8px;
  margin-left: 4px;
}
@media (max-width: 480px) {
  nav#site-navigation .ms-header-online { font-size: 11.5px; padding: 5px 10px; }
}

/* Phone button — visible icon (compact circle on mobile, with number on desktop) */
nav#site-navigation .ms-header-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  background: #eff6ff !important;
  border-radius: 9999px !important;
  color: var(--color-primary, #2563eb) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
nav#site-navigation .ms-header-phone svg { color: var(--color-primary, #2563eb) !important; flex-shrink: 0; }
@media (max-width: 600px) {
  nav#site-navigation .ms-header-phone { padding: 8px !important; }
  nav#site-navigation .ms-header-phone__num { display: none !important; }
}
/* CTA button still hidden (call is enough) */
nav#site-navigation .ms-header-cta { display: none !important; }

/* Burger button — sits tight against the online pill on mobile */
nav#site-navigation .ms-mobile-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36px;
  height: 36px;
  padding: 9px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2px;
}
@media (max-width: 768px) {
  nav#site-navigation { padding: 0 !important; }
  nav#site-navigation .inside-navigation { gap: 4px !important; padding: 8px 6px 8px 0 !important; min-height: 56px !important; margin: 0 !important; }
  nav#site-navigation .ms-nav-logo { margin-left: -4px !important; }

  /* Logo block — flush left, tight icon+text */
  nav#site-navigation .ms-nav-logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    align-items: center !important;
  }
  /* Bigger cross icon (+35%), pulled close to text */
  nav#site-navigation .ms-logo__mark {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 0 !important;
  }
  nav#site-navigation .ms-logo__mark img {
    width: 48px !important;
    height: 48px !important;
    margin: 0 -6px 0 -4px !important;
    display: block !important;
  }
  nav#site-navigation .ms-logo__text {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  nav#site-navigation .ms-logo__name { line-height: 1 !important; }
  nav#site-navigation .ms-logo__tld { margin-left: 3px !important; align-self: center !important; }

  /* Right actions group hugs the right edge */
  nav#site-navigation .ms-header-actions { gap: 4px !important; margin-left: auto !important; margin-right: 0 !important; padding-right: 0 !important; }
  nav#site-navigation .ms-mobile-toggle { margin-left: 0 !important; margin-right: 0 !important; width: 34px; height: 34px; padding: 8px; }
}
nav#site-navigation .ms-mobile-toggle span {
  display: block;
  height: 2.5px;
  background: #0f172a;
  border-radius: 2px;
}

/* Hide GP's old burger (we use ms-mobile-toggle) */
nav#site-navigation .menu-toggle { display: none !important; }

/* Primary menu — hidden by default, shown when burger toggled */
nav#site-navigation #primary-menu,
nav#site-navigation .main-nav { display: none; }
nav#site-navigation.toggled #primary-menu,
nav#site-navigation.toggled .main-nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 14px 28px -16px rgba(15,23,42,.18);
  padding: 8px 0 10px;
  z-index: 99;
}
nav#site-navigation.toggled #menu-primary {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
nav#site-navigation.toggled #menu-primary li { border-bottom: 1px solid #f1f5f9; }
nav#site-navigation.toggled #menu-primary li:last-child { border-bottom: 0; }
nav#site-navigation.toggled #menu-primary li > a {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}
nav#site-navigation.toggled #menu-primary li > a:hover { background: #eff6ff; color: var(--color-primary, #2563eb); }

/* Team block — 2 columns on mobile (was 1) so it's not stretched vertically */
.ms-team-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 600px) {
  .ms-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (min-width: 1024px) {
  .ms-team-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
}
.ms-team-card { padding: 12px !important; border-radius: 14px !important; }
.ms-team-card__avatar { width: 64px !important; height: 64px !important; margin: 0 auto 8px !important; }
.ms-team-card__avatar img { width: 64px !important; height: 64px !important; border-radius: 50% !important; object-fit: cover !important; }
.ms-team-card__name { font-size: 14px !important; margin: 0 0 2px !important; font-weight: 700 !important; }
.ms-team-card__role { font-size: 12px !important; margin: 0 !important; color: var(--color-primary, #2563eb) !important; }
.ms-team-card__meta { font-size: 11px !important; margin: 2px 0 0 !important; color: #64748b !important; }
.ms-team-banner { margin: 0 0 16px !important; }
.ms-team-banner img { max-width: 100%; height: auto; border-radius: 16px; }

/* Services v2 — compact (no header, no CTA, tighter cards) */
.ms-section--services-compact { padding: 24px 16px !important; }
.ms-section--services-compact .ms-section__inner { max-width: 1100px !important; margin: 0 auto !important; }
.ms-section--services-compact .ms-srv2-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
@media (min-width: 700px) {
  .ms-section--services-compact .ms-srv2-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
.ms-section--services-compact .ms-srv2 {
  padding: 16px !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
.ms-section--services-compact .ms-srv2__art {
  width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
}
.ms-section--services-compact .ms-srv2__art svg { width: 100%; height: 100%; }
.ms-section--services-compact .ms-srv2__body { flex: 1; min-width: 0; }
.ms-section--services-compact .ms-srv2__title {
  font-size: 16px !important;
  margin: 0 0 4px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.ms-section--services-compact .ms-srv2__desc {
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  color: #475569 !important;
}
.ms-section--services-compact .ms-srv2__cta { display: none !important; }

/* Services caption — subtitle + 2 bullet list (about алкоголю & home visit) */
.ms-srv2__caption {
  text-align: left;
  max-width: 720px;
  margin: 0 auto 18px !important;
  padding: 0 4px;
}
.ms-srv2__caption-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary, #2563eb);
  background: #eff6ff;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.ms-srv2__caption-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.ms-srv2__caption-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 10px;
  font-weight: 500;
}
.ms-srv2__caption-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.ms-srv2__caption-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
  margin: 0 0 4px;
}
.ms-srv2__caption-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 9px 9px no-repeat;
}
@media (max-width: 480px) {
  .ms-srv2__caption-title { font-size: 20px; }
}

/* Тонкий "easter egg" акцент у meta району */
.ms-d-card__easter {
  font-style: italic;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* Quiz messenger choice chips */
.ms-q-msg {
  border: 0;
  padding: 0;
  margin: 12px 0 16px;
}
.ms-q-msg legend.ms-q-field__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  margin: 0 0 8px;
}
.ms-q-msg__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 480px) {
  .ms-q-msg__chips { grid-template-columns: repeat(4, 1fr); }
}
.ms-q-msg__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
  position: relative;
}
.ms-q-msg__chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.ms-q-msg__chip svg { flex-shrink: 0; }
.ms-q-msg__chip:hover { border-color: #bfdbfe; background: #f8fafc; }
.ms-q-msg__chip.is-selected { border-color: var(--color-primary, #2563eb) !important; background: #eff6ff !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.10); }
.ms-q-msg__chip--phone svg    { color: var(--color-primary, #2563eb); }
.ms-q-msg__chip--viber svg    { color: #7360F2; }
.ms-q-msg__chip--telegram svg { color: #0088cc; }
.ms-q-msg__chip--whatsapp svg { color: #25D366; }

/* ═══════════════════════════════════════════════════════════════════════
 *  HEADER FINAL FIX (round-25): override GP nav-float-right, force layout
 * ═══════════════════════════════════════════════════════════════════════ */

/* Block GP body class .nav-float-right pushing menu right */
.nav-float-right .main-navigation,
.nav-float-right #site-navigation {
  float: none !important;
  width: 100% !important;
}
/* GP's inside-header CONTAINER stays visible (it wraps our nav). Hide only GP default branding inside it. */
.site-header .inside-header { display: block !important; padding: 0 !important; min-height: 0 !important; }
.site-header .inside-header > .ms-logo-wrap,
.site-header .inside-header > .site-branding,
.site-header .inside-header > #mobile-menu-control-wrapper { display: none !important; }

/* Force nav band to be the visible header bar, sticky, full-width */
nav#site-navigation.main-navigation {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important; right: 0 !important;
  z-index: 200 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
nav#site-navigation .inside-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;  /* anchor for dropdown */
  flex-wrap: nowrap !important;
}

/* Logo flush left, single line */
nav#site-navigation .ms-nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
nav#site-navigation .ms-logo__text {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
nav#site-navigation .ms-logo__name { white-space: nowrap !important; }
nav#site-navigation .ms-logo__tld {
  font-size: 10px !important;
  align-self: center !important;
  margin-left: 3px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Right group hugs right */
nav#site-navigation .ms-header-actions {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Burger DROPDOWN — absolute positioned RIGHT BELOW NAV (not below quiz) */
nav#site-navigation .main-nav,
nav#site-navigation #primary-menu { display: none !important; }
nav#site-navigation.toggled .main-nav,
nav#site-navigation.toggled #primary-menu {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 32px -18px rgba(15,23,42,0.22) !important;
  padding: 8px 12px 12px !important;
  z-index: 250 !important;
  max-height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  width: auto !important;
  margin: 0 !important;
}
nav#site-navigation.toggled #menu-primary {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column !important;
}
nav#site-navigation.toggled #menu-primary li {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0 !important;
  list-style: none !important;
}
nav#site-navigation.toggled #menu-primary li:last-child { border-bottom: 0 !important; }
nav#site-navigation.toggled #menu-primary li > a {
  display: block !important;
  padding: 14px 16px !important;
  font-family: var(--font-display) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  border-radius: 10px !important;
}
nav#site-navigation.toggled #menu-primary li > a:hover {
  background: #eff6ff !important;
  color: var(--color-primary, #2563eb) !important;
}

/* License pill — make sure it shows up clearly above H1 in BOTH heroes */
.ms-hero__license,
.msd-hero__left .ms-hero__license {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 14px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ───────────────── Desktop layout (≥769px) ───────────────── */
@media (min-width: 769px) {
  nav#site-navigation .inside-navigation {
    padding: 12px 24px !important;
    gap: 16px !important;
    max-width: 1440px !important;  /* align with .msd-hero__inner */
    margin: 0 auto !important;
  }
  /* Logo: flush left (no negative margin needed on desktop, padding covers it) */
  nav#site-navigation .ms-nav-logo { margin-left: 0 !important; font-size: 22px !important; }
  nav#site-navigation .ms-logo__mark img { width: 40px !important; height: 40px !important; }
  /* Phone + online pill + burger group at RIGHT */
  nav#site-navigation .ms-header-actions {
    margin-left: auto !important;
    gap: 10px !important;
  }
  nav#site-navigation .ms-header-phone { padding: 9px 14px !important; font-size: 14px !important; }
  nav#site-navigation .ms-mobile-toggle { width: 40px !important; height: 40px !important; padding: 11px !important; margin-left: 4px !important; }
  /* Burger goes AFTER ms-header-actions visually — flex order */
  nav#site-navigation .ms-mobile-toggle { order: 99 !important; }
}

/* Dropdown — above quiz, no modal/backdrop dimming */
nav#site-navigation.toggled .main-nav,
nav#site-navigation.toggled #primary-menu {
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  padding: 12px 16px 18px !important;
  z-index: 2147483646 !important;
  max-height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
  width: 100% !important;
  margin: 0 !important;
}
/* Backdrop behind the dropdown */
/* Серый backdrop под меню ВЫКЛЮЧЕН (как на medservice — без затемнения страницы). */
body.ms-mobile-nav-open::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
}
nav#site-navigation.toggled #menu-primary {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
}
@media (min-width: 769px) {
  nav#site-navigation.toggled .main-nav,
  nav#site-navigation.toggled #primary-menu { top: 72px !important; max-height: calc(100vh - 72px) !important; }
  body.ms-mobile-nav-open::before { top: 72px; }
}

/* Quiz — outline highlight around coordinator pill */
.ms-q-operator {
  border: 1.5px solid #e0ecff !important;
  background: linear-gradient(135deg, #f8fafc, #eff6ff) !important;
  box-shadow: 0 4px 12px -8px rgba(37,99,235,0.18) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}
.ms-q-operator__name {
  color: var(--color-primary, #2563eb) !important;
  font-weight: 800 !important;
}

/* Hero — license pill above H1 (same style as header online pill) */
.ms-hero__license {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: #166534;
  letter-spacing: 0.005em;
  margin: 0 0 14px;
  width: fit-content;
}
.ms-hero__license-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .ms-hero__license { font-size: 11.5px; padding: 5px 10px; }
}
@media (max-width: 480px) {
  .ms-section--services-compact .ms-srv2 { padding: 14px !important; gap: 12px !important; }
  .ms-section--services-compact .ms-srv2__art { width: 56px !important; height: 56px !important; }
  .ms-section--services-compact .ms-srv2__title { font-size: 15px !important; }
  .ms-section--services-compact .ms-srv2__desc { font-size: 12.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  QUIZ — Device-mockup card UI (round-24)
 *  Gradient brand border · rounded corners · soft shadow · clean inside
 * ═══════════════════════════════════════════════════════════════════════ */

/* Outer wrapper acts like a "device frame" with a thin gradient border */
.ms-hero__quiz,
.msd-hero__quiz-shell {
  position: relative;
  padding: 3px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, var(--color-primary, #2563eb) 0%, var(--color-primary-end, #4f46e5) 50%, #6366f1 100%) !important;
  box-shadow: 0 24px 48px -24px rgba(37,99,235,0.35), 0 6px 14px -6px rgba(15,23,42,0.08) !important;
  overflow: visible;
}
.ms-hero__quiz::before,
.msd-hero__quiz-shell::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 24px;
  background: #ffffff;
  z-index: 0;
}
.ms-hero__quiz > *,
.msd-hero__quiz-shell > * { position: relative; z-index: 1; }

/* Inner card: white surface */
.ms-quiz {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 22px 18px !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 480px) {
  .ms-hero__quiz,
  .msd-hero__quiz-shell { border-radius: 24px !important; padding: 2px !important; }
  .ms-hero__quiz::before,
  .msd-hero__quiz-shell::before { inset: 5px; border-radius: 20px; }
  .ms-quiz { border-radius: 18px !important; padding: 18px 14px !important; }
}

/* Tighten step inner spacing so card feels cohesive */
.ms-quiz__step { padding: 0 !important; }
.ms-quiz__progress-wrap { margin-bottom: 14px !important; }

/* Consent checkbox on form step — neat compact look matching site */
.ms-q-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  margin: 12px 0 !important;
  cursor: pointer;
}
.ms-q-consent input[type="checkbox"] {
  width: 18px !important; height: 18px !important;
  margin: 1px 0 0 !important;
  accent-color: var(--color-primary, #2563eb);
  flex-shrink: 0;
}
.ms-q-consent__text {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
}
.ms-q-consent__text a { color: var(--color-primary, #2563eb); text-decoration: underline; }
.ms-q-consent:has(input:invalid) {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

/* Partner trust badge — calm medical look, fits below quiz/CTA */
.ms-trust-partner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 16px;
  margin: 16px 0 0;
  max-width: 560px;
}
.ms-trust-partner__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #bfdbfe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #2563eb);
  flex-shrink: 0;
}
.ms-trust-partner__body { flex: 1; min-width: 0; }
.ms-trust-partner__title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
}
.ms-trust-partner__sub {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #475569;
}
.ms-trust-partner__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
  text-decoration: none;
}
.ms-trust-partner__link:hover { text-decoration: underline; }
.msd-hero__trust-wrap {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 24px;
}
@media (max-width: 480px) {
  .ms-trust-partner { padding: 12px; gap: 10px; }
  .ms-trust-partner__sub { font-size: 11px; }
}

/* Footer — legal nav + note */
.ms-footer__legal-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px 14px !important;
  margin: 14px 0 0 !important;
}
.ms-footer__legal-link {
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.ms-footer__legal-link:hover { color: var(--color-primary, #2563eb) !important; text-decoration: underline; }
.ms-footer__sep { color: #cbd5e1; font-size: 13px; }
.ms-footer__legal-note {
  margin: 12px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #94a3b8 !important;
  text-align: center;
  max-width: 540px;
}
.ms-footer__legal-note a { color: #64748b; text-decoration: underline; }
.ms-footer__legal-note a:hover { color: var(--color-primary, #2563eb); }

/* Legal pages — readable typography for Privacy / Terms / About / Contacts */
.ms-legal { padding: 32px 16px 80px; background: #fff; }
.ms-legal__inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-display);
  color: #334155;
  line-height: 1.65;
}
.ms-legal__inner h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 12px;
}
.ms-legal__lead {
  font-size: 16px;
  color: #475569;
  margin: 0 0 28px;
}
.ms-legal__inner h2 {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 28px 0 10px;
  letter-spacing: -0.01em;
}
.ms-legal__inner p { font-size: 14.5px; margin: 0 0 12px; }
.ms-legal__inner ul, .ms-legal__inner ol { font-size: 14.5px; margin: 0 0 16px; padding-left: 22px; }
.ms-legal__inner li { margin: 0 0 6px; }
.ms-legal__inner a { color: var(--color-primary, #2563eb); text-decoration: underline; }
.ms-legal__inner strong { color: #0f172a; font-weight: 700; }
.ms-legal__small {
  font-size: 12.5px !important;
  color: #94a3b8 !important;
  font-style: italic;
  margin: 28px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}
@media (max-width: 480px) {
  .ms-legal { padding: 24px 14px 60px; }
  .ms-legal__inner h1 { font-size: 24px; }
  .ms-legal__inner h2 { font-size: 18px; }
}