/* ==========================================================================
   MBBSDirect — site-wide stylesheet  (v1.0, Oct 2026)
   One file for every page. Do not add page-specific <style> blocks;
   add a reusable class here instead. Mobile-first: base styles are for
   phones, @media (min-width) blocks add tablet/desktop layout.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand (from logo) */
  --brand: #4126E7;
  --brand-hover: #2C17B8;
  --brand-tint: #EEEBFE;
  --brand-tint-2: #F4F2FE;
  --brand-soft: #C4BBFF;

  /* Dark surfaces */
  --ink-900: #130B4A;   /* top bar, footer */
  --ink-800: #1C1270;   /* hero, dark sections */
  --ink-700: #2B1F8C;   /* cards on dark */
  --ink-line: #2E2480;  /* dividers on dark */

  /* Text */
  --text: #161236;
  --text-2: #46405F;
  --text-3: #625D7C;
  --on-dark: #FFFFFF;
  --on-dark-2: #D3CEF5;
  --on-dark-3: #B3ACE6;

  /* Surfaces & lines */
  --bg: #F7F6FC;
  --surface: #FFFFFF;
  --placeholder: #E6E2FB;
  --line: #E6E3F2;
  --line-soft: #EFEDF7;
  --input-line: #CFCAE3;

  /* Accents used only for their own meaning */
  --star: #D97706;
  --star-on-dark: #FBBF24;
  --youtube: #CC0000;
  --whatsapp: #128C4A;
  --whatsapp-tint: #E7F6EC;
  --warn-bg: #FFF7ED;
  --warn-line: #FBD5A8;
  --warn-ink: #B45309;

  /* Type */
  --font-head: 'Sora', 'Source Sans 3', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape & spacing */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow: 0 18px 40px rgba(19, 11, 74, .18);
  --container: 1200px;
  --gutter: 16px;
  --section-y: 48px;
  --sticky-h: 0px;
}
@media (min-width: 768px) { :root { --gutter: 24px; --section-y: 72px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; --section-y: 96px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  padding-bottom: var(--sticky-h);
}
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.2; font-weight: 700; color: inherit; }
h1 { font-size: clamp(28px, 4.6vw, 52px); letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.15; }
h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, iframe { max-width: 100%; display: block; }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; border-radius: 4px; }
[id] { scroll-margin-top: 80px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section-white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-dark { background: var(--ink-800); color: var(--on-dark); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; align-items: center; }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grid { gap: 20px; }
  .grid-3, .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Two-up that stays 2 columns on phones (small stat tiles, icon tiles) */
.grid-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .grid-tight.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .grid-tight.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .grid-tight.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .grid-tight.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Odd last card in a 3-column grid fills the row on tablets and phones (17 Oct 2026) */
@media (max-width: 899px) { .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Split: text + media, stacks on phones */
.split { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .split-wide { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); align-items: start; } }

/* Horizontal swipe rail on phones, grid on desktop */
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 82%; scroll-snap-align: start; }
.rail.rail-reels > * { flex-basis: 42%; }
@media (min-width: 900px) {
  .rail { display: grid; overflow: visible; margin: 0; padding: 0; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail.rail-reels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 4. Text helpers ---------- */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.section-dark .eyebrow { color: var(--brand-soft); }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-2); line-height: 1.6; }
.section-dark .lead { color: var(--on-dark-2); }
.muted { color: var(--text-3); font-size: 14px; }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.section-head.center { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .section-head { margin-bottom: 40px; } }
.price { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3vw, 34px); }
.stars { color: var(--star); letter-spacing: 2px; }
.section-dark .stars, .topbar .stars { color: var(--star-on-dark); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn-lg { min-height: 56px; padding: 16px 30px; font-size: 18px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn-outline:hover { background: var(--brand-tint); color: var(--brand); }
.btn-white { background: #fff; color: var(--brand); }
.btn-white:hover { background: var(--brand-tint); color: var(--brand); }
.btn-ghost-light { border-color: #8A7EE8; color: #fff; background: transparent; }
.btn-ghost-light:hover { background: var(--ink-700); color: #fff; }
.btn-wa { background: var(--whatsapp); color: #fff; }
.btn-wa:hover { background: #0E7339; color: #fff; }
.btn-yt { background: var(--youtube); color: #fff; border-radius: 999px; }
.btn-yt:hover { background: #A30000; color: #fff; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow::after { content: " →"; }

/* ---------- 6. Badges & chips ---------- */
.badge { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--brand-soft); color: var(--ink-900); }
.badge-dark { background: var(--ink-700); color: #DCD8F7; font-weight: 600; }
.chip { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 14px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tick { display: flex; gap: 10px; align-items: flex-start; }
.tick::before { content: "✓"; color: var(--brand); font-weight: 700; flex-shrink: 0; }
.cross { display: flex; gap: 10px; align-items: flex-start; }
.cross::before { content: "✕"; color: var(--text-3); font-weight: 700; flex-shrink: 0; }
.tick-list { display: flex; flex-direction: column; gap: 10px; }

/* ---------- 7. Top bar & header ---------- */
.topbar { background: var(--ink-900); color: #DCD8F7; font-size: 13px; }
.topbar .container { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar .topbar-contact { display: none; gap: 20px; }
@media (min-width: 768px) { .topbar { font-size: 14px; } .topbar .topbar-contact { display: flex; } }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo img { height: 42px; width: auto; }
@media (min-width: 900px) { .logo img { height: 54px; } .site-header .container { min-height: 80px; } }
.nav { display: none; }
.nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--brand); padding-bottom: 4px; }
.header-cta { display: none; gap: 10px; }
.header-icons { display: flex; gap: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.icon-btn.icon-btn-tint { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand); }
.icon-btn svg { width: 20px; height: 20px; }
@media (min-width: 1000px) {
  .nav { display: flex; gap: 28px; }
  .header-cta { display: flex; }
  .header-icons { display: none; }
}
/* Mobile menu drawer */
.mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: 14px var(--gutter); border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none; font-weight: 600; }
@media (min-width: 1000px) { .mobile-menu { display: none !important; } }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--on-dark-3); }
.breadcrumb a { color: var(--on-dark-3); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }

/* ---------- 8. Hero ---------- */
.hero { background: var(--ink-800); color: var(--on-dark); padding: 28px 0 40px; }
@media (min-width: 900px) { .hero { padding: 64px 0 80px; } }
.hero .lead { color: #ECE9FC; }
.hero .lead strong { color: #fff; }
.hero-points { display: flex; flex-direction: column; gap: 10px; font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; }
.hero-points li { display: flex; align-items: center; gap: 12px; }
.hero-points li::before { content: "✓"; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-700); color: var(--brand-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.hero-media { position: relative; }
.float-card { background: #fff; color: var(--text); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.hero-media .float-card { margin-top: 12px; }
@media (min-width: 900px) {
  .hero-media .float-card { position: absolute; margin: 0; }
  .hero-media .float-bl { left: -24px; bottom: 28px; }
  .hero-media .float-tr { right: -16px; top: 28px; }
}
.float-cards-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .float-cards-mobile { display: contents; } }

/* ---------- 9. Media placeholders & video ---------- */
.media {
  position: relative; border-radius: var(--radius-lg); background: var(--placeholder); color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 16px; font-size: 14px; overflow: hidden; aspect-ratio: 16 / 10;
}
.media img, .media iframe, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.media-dark { background: #2A1D86; color: var(--on-dark-3); }
.media-tall { aspect-ratio: 9 / 15; }
.media-square { aspect-ratio: 1; }
.media-hero { aspect-ratio: 16 / 11; }
.play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 1; box-shadow: 0 6px 20px rgba(19,11,74,.25); }
.play svg { width: 24px; height: 24px; margin-left: 3px; }
.play-sm { width: 48px; height: 48px; }
.play-sm svg { width: 18px; height: 18px; }
.play-brand { background: var(--brand); color: #fff; }

/* ---------- 10. Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .card { padding: 26px; } }
.card-flat { background: var(--bg); border: 0; }
.section-white .card-flat { background: var(--bg); }
.card-dark { background: var(--ink-700); border: 0; color: #fff; }
.card-brand { background: var(--brand); border: 0; color: #fff; }
.card-brand p, .card-brand .lead { color: #E2DEFB; }
.card-outline-brand { border: 2px solid var(--brand); }
.card-media { padding: 0; overflow: hidden; }
.card-media .media { border-radius: 0; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
@media (min-width: 900px) { .card-body { padding: 24px; } }
.card-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.3; }
.card .icon { color: var(--brand); width: 30px; height: 30px; }
.card .num { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--brand); }
.card-link { text-decoration: none; color: var(--text); }
.card-link:hover { border-color: var(--brand); color: var(--text); }
.push { margin-top: auto; }
.divider { border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* ---------- 11. Key facts, stats ---------- */
.facts { background: var(--surface); border-bottom: 1px solid var(--line); }
.facts .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; padding-top: 20px; padding-bottom: 20px; }
@media (min-width: 900px) { .facts .container { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 28px; padding-bottom: 28px; } }
.fact-label { display: block; font-size: 12px; color: var(--text-3); font-weight: 600; }
.fact-value { display: block; font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; }
.stat { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.stat-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); color: var(--brand); }
.stat-label { font-size: 14px; color: var(--text-2); font-weight: 600; }

/* ---------- 12. Press strip ---------- */
.press { background: var(--surface); border-bottom: 1px solid var(--line); }
.press .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 36px; padding-top: 18px; padding-bottom: 18px; }
.press-label { width: 100%; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.press-logo { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: var(--text-2); }
.press-logo.sans { font-family: var(--font-head); }
.press-logo img { height: 28px; width: auto; filter: grayscale(1); opacity: .75; }
@media (min-width: 900px) { .press-label { width: auto; } .press .container { gap: 48px; padding-top: 26px; padding-bottom: 26px; } }

/* ---------- 13. Quick nav (sticky section tabs) ---------- */
.quick-nav { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 30; }
@media (min-width: 900px) { .quick-nav { top: 80px; } }
.quick-nav .container { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.quick-nav .container::-webkit-scrollbar { display: none; }
.quick-nav a { white-space: nowrap; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.quick-nav a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 14. Forms & apply card ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea {
  min-height: 50px; border: 1px solid var(--input-line); border-radius: var(--radius-sm); padding: 0 12px;
  font-family: inherit; font-size: 16px; color: var(--text); background: #fff; width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.form-note { font-size: 13px; color: var(--text-3); text-align: center; }
.apply-card { background: #fff; color: var(--text); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 50px rgba(19,11,74,.4); }
@media (min-width: 900px) { .apply-card { padding: 28px; position: sticky; top: 100px; } }
.price-lines { display: flex; flex-direction: column; gap: 8px; }
.price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.price-line span:first-child { color: var(--text-2); font-weight: 600; }
.price-line strong { font-size: 17px; }
.price-line small { color: var(--text-3); font-weight: 500; font-size: 13px; }
.price-total { padding-top: 10px; border-top: 2px solid var(--brand); }
.price-total span:first-child { color: var(--text); font-weight: 700; }
.price-total strong { font-family: var(--font-head); font-size: clamp(24px, 2.6vw, 30px); color: var(--brand); }

/* ---------- 15. Tables (stack into cards on phones) ---------- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font-size: 16px; }
.table th { background: var(--bg); color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 14px 18px; }
.table td { padding: 16px 18px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.table td small { display: block; color: var(--text-3); font-size: 13px; }
.table tr.total td { background: var(--brand-tint-2); border-top: 2px solid var(--brand); font-weight: 700; }
.table .hl { background: var(--brand-tint-2); font-weight: 600; }
.table th.hl { background: var(--brand); color: #fff; }
.table-wrap { border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 699px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack { border: 0; background: transparent; }
  .table-stack tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 12px 14px; }
  .table-stack tr.total { border: 2px solid var(--brand); background: var(--brand-tint-2); }
  .table-stack td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
  .table-stack tr.total td { background: transparent; border: 0; }
  .table-stack td { justify-content: flex-end; align-items: baseline; }
  .table-stack td::before { content: attr(data-label); color: var(--text-3); font-weight: 600; font-size: 14px; margin-right: auto; }
  .table-stack td:first-child { font-weight: 700; font-size: 17px; display: block; }
  .table-stack td:first-child::before { content: none; }
  .table-stack td small { display: inline; margin-left: 6px; }
}

/* ---------- 16. Steps & timeline ---------- */
.steps { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: step; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step::before { counter-increment: step; content: counter(step); flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 18px; }
.step-title { display: block; font-weight: 700; font-size: 17px; }
.step-text { display: block; font-size: 15px; color: var(--text-2); }
@media (min-width: 900px) {
  .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .steps-row .step { flex-direction: column; }
  .step::before { width: 52px; height: 52px; font-size: 22px; }
}
.timeline { position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: #4B3DB0; }
.tl-item { position: relative; display: flex; flex-direction: column; gap: 4px; }
.tl-item::before { content: ""; position: absolute; left: -32px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.tl-year { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--brand-soft); }
.tl-text { color: var(--on-dark-2); font-size: 16px; }
@media (min-width: 900px) {
  .timeline { flex-direction: row; padding-left: 0; padding-top: 34px; gap: 20px; }
  .timeline::before { left: 0; right: 0; top: 9px; bottom: auto; width: auto; height: 2px; }
  .tl-item { flex: 1; }
  .tl-item::before { left: 0; top: -34px; }
}

/* ---------- 17. Accordion (native <details>, content stays in HTML for SEO) ---------- */
.accordion { display: flex; flex-direction: column; gap: 10px; }
.accordion details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; font-weight: 700; font-size: 16px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--brand); font-size: 22px; line-height: 1; flex-shrink: 0; }
.accordion details[open] summary::after { content: "−"; }
.accordion .acc-body { padding: 0 18px 18px; color: var(--text-2); font-size: 16px; line-height: 1.65; display: flex; flex-direction: column; gap: 10px; }
.accordion summary h3 { font-size: inherit; font-family: var(--font-body); }
@media (min-width: 900px) { .accordion summary { padding: 20px 24px; font-size: 18px; } .accordion .acc-body { padding: 0 24px 22px; } }

/* ---------- 18. Callouts ---------- */
.callout { background: var(--brand-tint); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.callout svg { width: 26px; height: 26px; color: var(--brand); flex-shrink: 0; }
.callout-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.callout-warn svg { color: var(--warn-ink); }
.callout-title { font-weight: 700; font-size: 17px; display: block; margin-bottom: 4px; }
.cta-band { background: var(--brand); color: #fff; border-radius: var(--radius-xl); padding: 28px 22px; display: flex; flex-direction: column; gap: 20px; }
.cta-band p { color: #E2DEFB; }
@media (min-width: 900px) { .cta-band { padding: 48px; flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---------- 19. Compare rows (local agent vs MBBSDirect) ---------- */
.compare { display: flex; flex-direction: column; gap: 10px; }
.compare-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 6px; }
.compare-what { font-weight: 700; }
.compare-them { color: var(--text-3); font-size: 15px; }
.compare-us { color: var(--brand); font-weight: 600; }
.compare-head { display: none; }
@media (min-width: 900px) {
  .compare { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .compare-row, .compare-head { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; border: 0; border-radius: 0; padding: 0; gap: 0; border-top: 1px solid var(--line-soft); }
  .compare-head { border-top: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--bg); }
  .compare-row > *, .compare-head > * { padding: 18px 22px; }
  .compare-head .compare-us { background: var(--brand); color: #fff; }
  .compare-row .compare-us { background: var(--brand-tint-2); }
  .compare-them, .compare-us { font-size: 16px; }
}

/* ---------- 20. Reviews ---------- */
.review { display: flex; flex-direction: column; gap: 14px; }
.reviewer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--placeholder); flex-shrink: 0; object-fit: cover; }
.rating-box { display: inline-flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px; }
.rating-num { font-family: var(--font-head); font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; }

/* ---------- 21. YouTube strip ---------- */
.yt-strip { background: var(--ink-700); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.yt-channel { display: flex; align-items: center; gap: 12px; }
.yt-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
@media (min-width: 700px) { .yt-strip { flex-direction: row; align-items: center; justify-content: center; gap: 20px; padding: 24px; } }

/* ---------- 22. Footer ---------- */
.site-footer { background: var(--ink-900); color: var(--on-dark-2); font-size: 15px; }
.site-footer a:not(.btn) { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:not(.btn):hover { color: #fff; }
.footer-cta { display: flex; flex-direction: column; gap: 16px; padding: 36px 0 28px; border-bottom: 1px solid var(--ink-line); }
.footer-cta-title { font-family: var(--font-head); font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.footer-logo { align-self: flex-start; background: #fff; border-radius: 10px; padding: 8px 12px; }
.footer-logo img { height: 40px; width: auto; }
.footer-col summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 50px; border-top: 1px solid var(--ink-line); color: #fff; font-weight: 700; font-size: 16px; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary::after { content: "+"; color: var(--on-dark-3); font-size: 20px; }
.footer-col[open] summary::after { content: "−"; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.footer-address { display: flex; flex-direction: column; gap: 6px; line-height: 1.5; padding-top: 16px; }
.footer-address strong { color: #fff; }
.socials { display: flex; gap: 10px; }
.socials a { width: 44px; height: 44px; border-radius: 10px; background: var(--ink-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.socials svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid var(--ink-line); padding: 18px 0 24px; font-size: 13px; color: var(--on-dark-3); display: flex; flex-direction: column; gap: 8px; }
.footer-bottom a { color: var(--on-dark-3); }
.footer-bottom .links { display: flex; flex-wrap: wrap; gap: 16px; }
@media (min-width: 900px) {
  .footer-cta { flex-direction: row; justify-content: space-between; align-items: center; padding: 48px 0 40px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; gap: 36px; padding: 48px 0; }
  .footer-brand { margin-bottom: 0; }
  .footer-col summary { pointer-events: none; border-top: 0; min-height: auto; margin-bottom: 14px; }
  .footer-col summary::after, .footer-col[open] summary::after { content: none; }
  .footer-address { padding-top: 0; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* ---------- 23. Sticky mobile action bar ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(19,11,74,.12); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.sticky-cta a { min-height: 52px; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: 13px; text-decoration: none; }
.sticky-cta svg { width: 18px; height: 18px; }
.sticky-call { background: var(--brand-tint); color: var(--brand); }
.sticky-wa { background: var(--whatsapp-tint); color: var(--whatsapp); }
.sticky-apply { background: var(--brand); color: #fff; font-size: 15px !important; }
.sticky-apply:hover { color: #fff; }
body.has-sticky { --sticky-h: 76px; }
@media (min-width: 900px) { .sticky-cta { display: none; } body.has-sticky { --sticky-h: 0px; } }

/* ---------- 24. Print ---------- */
@media print { .site-header, .sticky-cta, .quick-nav, .topbar { display: none !important; } body { background: #fff; } }