/*
Theme Name:   MedService
Template:     generatepress
Theme URI:    https://medservice.com.ua/
Author:       MedService
Author URI:   https://medservice.com.ua/
Description:  GeneratePress child theme for medservice.com.ua. Mobile-first design system based on the SanitarKnyzhka React reference (see wp/design-tokens.md).
Version:      1.0.34
Requires PHP: 7.4
Text Domain:  medservice
*/

/* ─────────────────────────────────────────────────────────────────────────
   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;
}