/*
 * FAQ faq-child — assets/css/pages.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Page-specific styles for templates with no page builder.
 * Loaded ONLY on the templates that need them — zero cost on other pages.
 *
 * Sections:
 *   1. Online Marketing Partnership  (.bc-*)  template-partnership.php
 *   2. Growth Partnership SLA        (.sl-*)  template-growth-sla.php
 *
 * Version: 1.0.0
 * CHANGELOG
 * 1.0.0 — 2026-03-20 — Extracted from Beaver Builder HTML. No BB dependency.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── SECTION 1: Online Marketing Partnership (.bc-*) ── */

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * FAQ — Online Marketing Partnership Page
 * Build at: faq.co.za/online-marketing-partnership/
 * Keep /base-comms/ live until new page tested, then 301 redirect.
 *
 * BEAVER BUILDER: Each section marked ── BB ROW [n] ──
 * Move ALL CSS to Astra Pro > Additional CSS (once, not per module).
 * Fonts already loaded on homepage — skip Google Fonts link in BB.
 * ═══════════════════════════════════════════════════════════════════════════
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: #fff; color: #1A1A2E; }

:root {
  --blue:   #0E5D88;
  --gold:   #C6BB44;
  --dark:   #415161;
  --grey:   #94A3B8;
  --light:  #EEF4F8;
  --white:  #FFFFFF;
  --text:   #1A1A2E;
  --green:  #16A34A;
  --red:    #DC2626;
  --fh:     'Sora', sans-serif;
  --fb:     'DM Sans', sans-serif;
}

.bc-wrap      { max-width: 860px;  margin: 0 auto; padding: 0 20px; }
.bc-wrap-wide { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.bc-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 100px; padding: 5px 14px; margin-bottom: 18px;
  color: var(--gold); background: rgba(198,187,68,.14);
  border: 1px solid rgba(198,187,68,.3);
}
.bc-eyebrow-b {
  color: var(--blue); background: rgba(14,93,136,.08);
  border: 1px solid rgba(14,93,136,.18);
}
.bc-divider {
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--gold); margin-bottom: 18px;
}
.bc-h2 {
  font-family: var(--fh); font-size: clamp(22px,4vw,36px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  color: var(--dark); margin-bottom: 14px;
}
.bc-h2 em { font-style: normal; color: var(--blue); }
.bc-h2-wh { color: var(--white); }
.bc-h2-wh em { color: var(--gold); }
.bc-lead { font-size: clamp(15px,2vw,17px); line-height: 1.7; color: var(--dark); opacity: .8; max-width: 580px; }
.bc-lead-wh { color: rgba(255,255,255,.8); opacity: 1; }

/* Buttons */
.bc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fh); font-size: 15px; font-weight: 700;
  padding: 15px 28px; border-radius: 8px; text-decoration: none;
  transition: all .18s ease; cursor: pointer; border: none; white-space: nowrap;
}
.bc-btn-gold {
  background: var(--gold); color: #1a1a1a;
  box-shadow: 0 4px 20px rgba(198,187,68,.35);
}
.bc-btn-gold:hover {
  background: #b3a93a; transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(198,187,68,.45); color: #1a1a1a;
}
.bc-btn-ghost {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,.35);
}
.bc-btn-ghost:hover {
  border-color: var(--white); background: rgba(255,255,255,.08); color: var(--white);
}
.bc-btn svg { width: 16px; height: 16px; }


/* ════════════════════════════════════════
   ROW 1 — HERO  bg:#0E5D88
   ════════════════════════════════════════ */
.bc-hero {
  background: var(--blue); position: relative;
  overflow: hidden; padding: 72px 24px 64px;
}
.bc-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 90% 10%, rgba(198,187,68,.11) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 5%  90%, rgba(255,255,255,.04) 0%, transparent 50%);
}
.bc-hero::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(198,187,68,.1) 100%);
}
.bc-hero__in { position: relative; max-width: 860px; margin: 0 auto; padding: 0 20px; }
.bc-hero__h1 {
  font-family: var(--fh); font-size: clamp(28px,5vw,50px);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--white); margin-bottom: 20px;
}
.bc-hero__h1 em { font-style: normal; color: var(--gold); }
.bc-hero__sub {
  font-size: clamp(15px,2vw,18px); line-height: 1.7;
  color: rgba(255,255,255,.82); max-width: 620px; margin-bottom: 36px;
}
.bc-hero__sub strong { color: var(--white); font-weight: 600; }
.bc-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.bc-hero__trust {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12);
}
.bc-hero__stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.65); }
.bc-hero__stat strong { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--white); line-height: 1; }
.bc-hero__sep  { width: 1px; height: 28px; background: rgba(255,255,255,.15); }
@media (max-width: 480px) { .bc-hero__sep { display: none; } }


/* ════════════════════════════════════════
   ROW 2 — TRUTH BAR  bg:#415161
   ════════════════════════════════════════ */
.bc-truth { background: var(--dark); padding: 30px 24px; text-align: center; }
.bc-truth p {
  font-family: var(--fh); font-size: clamp(14px,2.2vw,19px);
  font-weight: 600; line-height: 1.6; color: rgba(255,255,255,.82);
}
.bc-truth p em { font-style: normal; color: var(--gold); font-weight: 700; }


/* ════════════════════════════════════════
   ROW 3 — THE MODEL  bg:#ffffff
   ════════════════════════════════════════ */
.bc-model { background: var(--white); padding: 72px 24px; }
.bc-model__cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin: 36px 0;
}
@media (max-width: 580px) { .bc-model__cards { grid-template-columns: 1fr; } }
.bc-model__card {
  border-radius: 14px; padding: 28px;
  border: 1.5px solid rgba(14,93,136,.12);
  transition: box-shadow .2s, transform .2s;
}
.bc-model__card:hover { box-shadow: 0 8px 28px rgba(14,93,136,.1); transform: translateY(-2px); }
.bc-model__card-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.bc-model__card-val { font-family: var(--fh); font-size: clamp(26px,4vw,40px); font-weight: 800; line-height: 1; color: var(--blue); margin-bottom: 10px; }
.bc-model__card-desc { font-size: 14px; line-height: 1.6; color: var(--dark); }
.bc-model__card--hi { background: var(--blue); border-color: var(--blue); }
.bc-model__card--hi .bc-model__card-lbl { color: rgba(255,255,255,.55); }
.bc-model__card--hi .bc-model__card-val { color: var(--gold); }
.bc-model__card--hi .bc-model__card-desc { color: rgba(255,255,255,.8); }

/* Worked example */
.bc-example {
  background: var(--light); border-radius: 14px; padding: 28px;
  border: 1px solid rgba(14,93,136,.1);
}
.bc-example__title {
  font-family: var(--fh); font-size: 15px; font-weight: 700;
  color: var(--dark); margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.bc-example__badge {
  background: var(--gold); color: #1a1a1a;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 4px;
}
.bc-example__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 540px) { .bc-example__cols { grid-template-columns: 1fr; } }
.bc-example__col-label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 12px;
}
.bc-example__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid rgba(65,81,97,.08);
  font-size: 13.5px; color: var(--dark); gap: 12px;
}
.bc-example__row:last-child { border-bottom: none; }
.bc-example__row span:last-child { font-weight: 600; white-space: nowrap; }
.bc-example__row.total {
  border-top: 2px solid rgba(14,93,136,.15);
  border-bottom: none; padding-top: 12px; margin-top: 4px;
}
.bc-example__row.total span { font-family: var(--fh); font-weight: 700; font-size: 15px; color: var(--blue); }
.bc-example__row.total span:last-child { color: var(--green); font-size: 18px; }
.bc-example__note {
  font-size: 12px; color: var(--grey); margin-top: 16px; line-height: 1.5;
  grid-column: 1 / -1;
}


/* ════════════════════════════════════════
   ROW 4 — WHAT'S INCLUDED  bg:#EEF4F8
   ════════════════════════════════════════ */
.bc-incl { background: var(--light); padding: 72px 24px; }
.bc-incl__grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 14px; margin: 36px 0 40px;
}
@media (min-width: 860px) { .bc-incl__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px)  { .bc-incl__grid { grid-template-columns: 1fr; } }
.bc-incl__item {
  background: var(--white); border-radius: 12px; padding: 20px;
  border: 1px solid rgba(14,93,136,.08);
  display: flex; gap: 14px; align-items: flex-start;
}
.bc-incl__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(14,93,136,.07); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.bc-incl__item h4 { font-family: var(--fh); font-size: 13.5px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.bc-incl__item p  { font-size: 12.5px; line-height: 1.5; color: var(--grey); }

/* You vs Us */
.bc-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .bc-roles { grid-template-columns: 1fr; } }
.bc-role { border-radius: 14px; padding: 24px; }
.bc-role--you { background: var(--white); border: 2px solid var(--gold); }
.bc-role--us  { background: var(--blue); }
.bc-role__lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.bc-role--you .bc-role__lbl { color: var(--gold); }
.bc-role--us  .bc-role__lbl { color: rgba(255,255,255,.55); }
.bc-role ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.bc-role li { font-size: 13.5px; line-height: 1.4; padding-left: 20px; position: relative; }
.bc-role--you li { color: var(--dark); }
.bc-role--us  li { color: rgba(255,255,255,.85); }
.bc-role--you li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.bc-role--us  li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }


/* ════════════════════════════════════════
   ROW 5 — HOW IT STARTS  bg:#ffffff
   ════════════════════════════════════════ */
.bc-process { background: var(--white); padding: 72px 24px; }
.bc-steps {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; margin-top: 36px;
}
@media (max-width: 600px) { .bc-steps { grid-template-columns: 1fr; } }
.bc-step {
  padding: 28px; border: 1px solid rgba(14,93,136,.1);
  background: var(--white); position: relative; overflow: hidden;
}
.bc-step:nth-child(1) { border-radius: 14px 0 0 0; }
.bc-step:nth-child(2) { border-radius: 0 14px 0 0; }
.bc-step:nth-child(3) { border-radius: 0 0 0 14px; }
.bc-step:nth-child(4) { border-radius: 0 0 14px 0; }
@media (max-width: 600px) {
  .bc-step:nth-child(1) { border-radius: 14px 14px 0 0; }
  .bc-step:nth-child(2) { border-radius: 0; }
  .bc-step:nth-child(3) { border-radius: 0; }
  .bc-step:nth-child(4) { border-radius: 0 0 14px 14px; }
}
.bc-step--hi { background: var(--blue); border-color: var(--blue); }
.bc-step__num {
  font-family: var(--fh); font-size: 52px; font-weight: 800; line-height: 1;
  color: rgba(14,93,136,.08); position: absolute; top: 16px; right: 18px;
}
.bc-step--hi .bc-step__num { color: rgba(255,255,255,.1); }
.bc-step__when { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.bc-step--hi .bc-step__when { color: rgba(198,187,68,.8); }
.bc-step h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.3; }
.bc-step--hi h3 { color: var(--white); }
.bc-step p { font-size: 13.5px; line-height: 1.65; color: var(--grey); }
.bc-step--hi p { color: rgba(255,255,255,.75); }


/* ════════════════════════════════════════
   ROW 6 — WHO IT'S FOR  bg:#415161
   ════════════════════════════════════════ */
.bc-qualify { background: var(--dark); padding: 72px 24px; }
.bc-qualify__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 36px;
}
@media (max-width: 540px) { .bc-qualify__grid { grid-template-columns: 1fr; } }
.bc-ql { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.bc-ql-y { color: #4ade80; }
.bc-ql-n { color: #f87171; }
.bc-qlist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bc-qlist li { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); padding-left: 22px; position: relative; }
.bc-qlist-y li::before { content: '✓'; position: absolute; left: 0; color: #4ade80; font-weight: 700; }
.bc-qlist-n li::before { content: '✕'; position: absolute; left: 0; color: #f87171; font-weight: 700; }
.bc-qualify__note {
  margin-top: 32px; padding: 20px 24px;
  background: rgba(255,255,255,.06);
  border-radius: 12px; border-left: 3px solid var(--gold);
  font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.65;
}
.bc-qualify__note strong { color: var(--gold); }


/* ════════════════════════════════════════
   ROW 7 — PLAIN ENGLISH T&C  bg:#EEF4F8
   ════════════════════════════════════════ */
.bc-terms { background: var(--light); padding: 72px 24px; }
.bc-terms__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 32px;
}
@media (max-width: 540px) { .bc-terms__grid { grid-template-columns: 1fr; } }
.bc-term {
  background: var(--white); border-radius: 10px; padding: 18px 20px;
  border: 1px solid rgba(14,93,136,.08);
  display: flex; gap: 12px; align-items: flex-start;
}
.bc-term__num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.bc-term p { font-size: 13.5px; line-height: 1.55; color: var(--dark); }
.bc-term p strong { color: var(--blue); }


/* ════════════════════════════════════════
   ROW 8 — FORM HEADER  bg:#0E5D88
   ════════════════════════════════════════ */
.bc-fhdr {
  background: var(--blue); padding: 64px 24px 48px;
  text-align: center; position: relative; overflow: hidden;
}
.bc-fhdr::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(198,187,68,.07) 0%, transparent 60%);
}
.bc-fhdr__in { position: relative; max-width: 620px; margin: 0 auto; padding: 0 20px; }
.bc-fhdr h2 {
  font-family: var(--fh); font-size: clamp(24px,4vw,38px);
  font-weight: 800; line-height: 1.15;
  color: var(--white); margin-bottom: 14px; letter-spacing: -.02em;
}
.bc-fhdr h2 em { font-style: normal; color: var(--gold); }
.bc-fhdr p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.8); margin-bottom: 24px; }
.bc-fhdr__pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.bc-fhdr__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px; padding: 6px 14px;
  font-size: 12px; color: rgba(255,255,255,.85); font-weight: 500;
}

@media (max-width: 400px) {
  .bc-hero { padding: 52px 16px 48px; }
  .bc-btn  { padding: 13px 20px; font-size: 14px; }
}

/* ── SECTION 2: Growth Partnership SLA (.sl-*) ── */

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * FAQ — Growth Partnership SLA Page
 * Recommended URL: faq.co.za/growth-sla/
 * Keep /sla/ live → 301 redirect once new page tested
 *
 * BEAVER BUILDER: Each section marked ── BB ROW [n] ──
 * Background colour noted per row. Padding: 0 on all rows.
 * Move ALL CSS to Astra Pro → Additional CSS (once only).
 * Fonts already loaded on homepage — skip Google Fonts link in BB.
 *
 * FORM: Use same Fluent Forms form (#23) as homepage and partnership page.
 * Hidden field: source_page = sla-partnership
 * ═══════════════════════════════════════════════════════════════════════════
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: #fff; color: #1A1A2E; }

:root {
  --blue:  #0E5D88;
  --gold:  #C6BB44;
  --dark:  #415161;
  --grey:  #94A3B8;
  --light: #EEF4F8;
  --white: #FFFFFF;
  --text:  #1A1A2E;
  --green: #16A34A;
  --red:   #DC2626;
  --fh:    'Sora', sans-serif;
  --fb:    'DM Sans', sans-serif;
}

.sl-wrap      { max-width: 860px;  margin: 0 auto; padding: 0 20px; }
.sl-wrap-wide { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.sl-eye {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 100px; padding: 5px 14px; margin-bottom: 18px;
  color: var(--gold); background: rgba(198,187,68,.14);
  border: 1px solid rgba(198,187,68,.3);
}
.sl-eye-b {
  color: var(--blue); background: rgba(14,93,136,.08);
  border: 1px solid rgba(14,93,136,.18);
}
.sl-div {
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--gold); margin-bottom: 18px;
}
.sl-h2 {
  font-family: var(--fh); font-size: clamp(22px,4vw,36px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  color: var(--dark); margin-bottom: 14px;
}
.sl-h2 em        { font-style: normal; color: var(--blue); }
.sl-h2-wh        { color: var(--white); }
.sl-h2-wh em     { color: var(--gold); }
.sl-lead { font-size: clamp(15px,2vw,17px); line-height: 1.7; color: var(--dark); opacity: .8; max-width: 600px; }
.sl-lead-wh { color: rgba(255,255,255,.8); opacity: 1; }

.sl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fh); font-size: 15px; font-weight: 700;
  padding: 15px 28px; border-radius: 8px; text-decoration: none;
  transition: all .18s ease; cursor: pointer; border: none; white-space: nowrap;
}
.sl-btn-gold {
  background: var(--gold); color: #1a1a1a;
  box-shadow: 0 4px 20px rgba(198,187,68,.35);
}
.sl-btn-gold:hover {
  background: #b3a93a; transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(198,187,68,.45); color: #1a1a1a;
}
.sl-btn-ghost {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,.35);
}
.sl-btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,.08); color: var(--white);
}
.sl-btn svg { width: 16px; height: 16px; }


/* ════════════════════════════════
   ROW 1 — HERO  bg:#0E5D88
   ════════════════════════════════ */
.sl-hero {
  background: var(--blue);
  position: relative; overflow: hidden;
  padding: 72px 24px 64px;
}
.sl-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 88% 12%, rgba(198,187,68,.11) 0%, transparent 55%),
    radial-gradient(ellipse 45% 65% at 8%  88%, rgba(255,255,255,.04) 0%, transparent 50%);
}
.sl-hero::after {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(198,187,68,.1) 100%);
}
.sl-hero__in { position: relative; max-width: 860px; margin: 0 auto; padding: 0 20px; }
.sl-hero__h1 {
  font-family: var(--fh); font-size: clamp(28px,5vw,50px);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--white); margin-bottom: 20px;
}
.sl-hero__h1 em { font-style: normal; color: var(--gold); }
.sl-hero__sub {
  font-size: clamp(15px,2vw,18px); line-height: 1.7;
  color: rgba(255,255,255,.82); max-width: 640px; margin-bottom: 36px;
}
.sl-hero__sub strong { color: var(--white); font-weight: 600; }
.sl-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.sl-hero__diff {
  display: flex; flex-wrap: wrap; gap: 0;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12);
}
.sl-hero__diff-item {
  padding: 16px 24px 16px 0; margin-right: 24px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.sl-hero__diff-item:last-child { border-right: none; margin-right: 0; }
.sl-hero__diff-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 4px;
}
.sl-hero__diff-val {
  font-family: var(--fh); font-size: 15px; font-weight: 700;
  color: var(--white); line-height: 1.3;
}
@media (max-width: 560px) {
  .sl-hero__diff { flex-direction: column; gap: 12px; }
  .sl-hero__diff-item { border-right: none; padding: 0; margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 12px; }
  .sl-hero__diff-item:last-child { border-bottom: none; }
}


/* ════════════════════════════════
   ROW 2 — TRUTH BAR  bg:#415161
   ════════════════════════════════ */
.sl-truth { background: var(--dark); padding: 30px 24px; text-align: center; }
.sl-truth p {
  font-family: var(--fh); font-size: clamp(14px,2.2vw,19px);
  font-weight: 600; line-height: 1.6; color: rgba(255,255,255,.82);
}
.sl-truth p em { font-style: normal; color: var(--gold); font-weight: 700; }


/* ════════════════════════════════
   ROW 3 — TWO PATHS  bg:#ffffff
   ════════════════════════════════ */
.sl-paths { background: var(--white); padding: 72px 24px; }
.sl-paths__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-top: 36px;
}
@media (max-width: 600px) { .sl-paths__grid { grid-template-columns: 1fr; } }
.sl-path {
  border-radius: 16px; padding: 28px;
  border: 1.5px solid rgba(14,93,136,.12);
  position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.sl-path:hover { box-shadow: 0 8px 28px rgba(14,93,136,.1); transform: translateY(-2px); }
.sl-path--hi { background: var(--blue); border-color: var(--blue); }
.sl-path__tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; margin-bottom: 14px;
}
.sl-path__tag-std { background: rgba(14,93,136,.1); color: var(--blue); }
.sl-path__tag-prm { background: var(--gold); color: #1a1a1a; }
.sl-path h3 {
  font-family: var(--fh); font-size: 20px; font-weight: 700;
  color: var(--dark); margin-bottom: 10px; line-height: 1.2;
}
.sl-path--hi h3 { color: var(--white); }
.sl-path__desc { font-size: 14px; line-height: 1.65; color: var(--grey); margin-bottom: 20px; }
.sl-path--hi .sl-path__desc { color: rgba(255,255,255,.75); }
.sl-path ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sl-path li { font-size: 13.5px; line-height: 1.4; padding-left: 20px; position: relative; color: var(--dark); }
.sl-path--hi li { color: rgba(255,255,255,.85); }
.sl-path li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.sl-path--hi li::before { color: var(--gold); }
.sl-path__price {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(14,93,136,.1);
  font-family: var(--fh); font-size: 13px; font-weight: 600; color: var(--dark);
}
.sl-path--hi .sl-path__price { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.75); }
.sl-path__price strong { color: var(--blue); font-size: 18px; }
.sl-path--hi .sl-path__price strong { color: var(--gold); font-size: 18px; }

.sl-paths__bridge {
  margin-top: 24px; padding: 20px 24px;
  background: var(--light); border-radius: 12px;
  border-left: 3px solid var(--gold);
  font-size: 14px; color: var(--dark); line-height: 1.65;
}
.sl-paths__bridge strong { color: var(--blue); }


/* ════════════════════════════════
   ROW 4 — WHAT WE ACTUALLY DO  bg:#EEF4F8
   ════════════════════════════════ */
.sl-does { background: var(--light); padding: 72px 24px; }
.sl-does__grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 14px; margin-top: 36px;
}
@media (min-width: 860px) { .sl-does__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 500px)  { .sl-does__grid { grid-template-columns: 1fr; } }
.sl-does__item {
  background: var(--white); border-radius: 12px; padding: 20px;
  border: 1px solid rgba(14,93,136,.08);
  display: flex; gap: 14px; align-items: flex-start;
}
.sl-does__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(14,93,136,.07); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.sl-does__item h4 { font-family: var(--fh); font-size: 13.5px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.sl-does__item p  { font-size: 12.5px; line-height: 1.5; color: var(--grey); }


/* ════════════════════════════════
   ROW 5 — PLANS  bg:#ffffff
   ════════════════════════════════ */
.sl-plans { background: var(--white); padding: 72px 24px; }
.sl-plans__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 36px;
}
@media (min-width: 860px) { .sl-plans__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px)  { .sl-plans__grid { grid-template-columns: 1fr; } }
.sl-plan {
  border-radius: 14px; padding: 24px;
  border: 1.5px solid rgba(14,93,136,.12);
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.sl-plan:hover { box-shadow: 0 8px 28px rgba(14,93,136,.1); transform: translateY(-3px); }
.sl-plan--pop {
  background: var(--blue); border-color: var(--blue);
  position: relative;
}
.sl-plan__popular {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1a1a;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 12px; border-radius: 100px;
  white-space: nowrap;
}
.sl-plan__hours {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 6px;
}
.sl-plan--pop .sl-plan__hours { color: rgba(255,255,255,.5); }
.sl-plan__rate {
  font-family: var(--fh); font-size: clamp(22px,3vw,30px);
  font-weight: 800; line-height: 1; color: var(--blue); margin-bottom: 4px;
}
.sl-plan--pop .sl-plan__rate { color: var(--gold); }
.sl-plan__period { font-size: 12px; color: var(--grey); margin-bottom: 14px; }
.sl-plan--pop .sl-plan__period { color: rgba(255,255,255,.5); }
.sl-plan__name {
  font-family: var(--fh); font-size: 15px; font-weight: 700;
  color: var(--dark); margin-bottom: 10px; line-height: 1.3;
}
.sl-plan--pop .sl-plan__name { color: var(--white); }
.sl-plan__desc { font-size: 13px; line-height: 1.55; color: var(--grey); margin-bottom: 16px; flex: 1; }
.sl-plan--pop .sl-plan__desc { color: rgba(255,255,255,.7); }
.sl-plan__items { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sl-plan__items li { font-size: 12.5px; line-height: 1.4; padding-left: 18px; position: relative; color: var(--dark); }
.sl-plan--pop .sl-plan__items li { color: rgba(255,255,255,.85); }
.sl-plan__items li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: 12px; }
.sl-plan--pop .sl-plan__items li::before { color: var(--gold); }

/* Custom / V2 plan CTA */
.sl-plan--custom {
  background: linear-gradient(135deg, var(--dark) 0%, #2d3d4d 100%);
  border-color: var(--dark);
}
.sl-plan--custom .sl-plan__hours  { color: rgba(255,255,255,.45); }
.sl-plan--custom .sl-plan__rate   { color: var(--gold); }
.sl-plan--custom .sl-plan__period { color: rgba(255,255,255,.45); }
.sl-plan--custom .sl-plan__name   { color: var(--white); }
.sl-plan--custom .sl-plan__desc   { color: rgba(255,255,255,.7); }
.sl-plan--custom .sl-plan__items li { color: rgba(255,255,255,.85); }
.sl-plan--custom .sl-plan__items li::before { color: var(--gold); }

.sl-plans__note {
  margin-top: 24px; padding: 18px 22px;
  background: var(--light); border-radius: 10px;
  font-size: 13.5px; color: var(--dark); line-height: 1.6;
}
.sl-plans__note strong { color: var(--blue); }


/* ════════════════════════════════
   ROW 6 — HOW IT WORKS  bg:#EEF4F8
   ════════════════════════════════ */
.sl-process { background: var(--light); padding: 72px 24px; }
.sl-steps {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; margin-top: 36px;
}
@media (max-width: 580px) { .sl-steps { grid-template-columns: 1fr; } }
.sl-step {
  padding: 28px; border: 1px solid rgba(14,93,136,.1);
  background: var(--white); position: relative; overflow: hidden;
}
.sl-step:nth-child(1) { border-radius: 14px 0 0 0; }
.sl-step:nth-child(2) { border-radius: 0 14px 0 0; }
.sl-step:nth-child(3) { border-radius: 0 0 0 14px; }
.sl-step:nth-child(4) { border-radius: 0 0 14px 0; }
@media (max-width: 580px) {
  .sl-step:nth-child(1) { border-radius: 14px 14px 0 0; }
  .sl-step:nth-child(2), .sl-step:nth-child(3) { border-radius: 0; }
  .sl-step:nth-child(4) { border-radius: 0 0 14px 14px; }
}
.sl-step--hi { background: var(--blue); border-color: var(--blue); }
.sl-step__num {
  font-family: var(--fh); font-size: 52px; font-weight: 800;
  line-height: 1; color: rgba(14,93,136,.07);
  position: absolute; top: 16px; right: 18px;
}
.sl-step--hi .sl-step__num { color: rgba(255,255,255,.1); }
.sl-step__when {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.sl-step--hi .sl-step__when { color: rgba(198,187,68,.8); }
.sl-step h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.3; }
.sl-step--hi h3 { color: var(--white); }
.sl-step p { font-size: 13.5px; line-height: 1.65; color: var(--grey); }
.sl-step--hi p { color: rgba(255,255,255,.75); }


/* ════════════════════════════════
   ROW 7 — T&C  bg:#415161
   ════════════════════════════════ */
.sl-terms { background: var(--dark); padding: 72px 24px; }
.sl-terms__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-top: 32px;
}
@media (max-width: 540px) { .sl-terms__grid { grid-template-columns: 1fr; } }
.sl-term {
  background: rgba(255,255,255,.06); border-radius: 10px; padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.08);
  display: flex; gap: 12px; align-items: flex-start;
}
.sl-term__num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: var(--gold); color: #1a1a1a;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.sl-term p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.78); }
.sl-term p strong { color: var(--gold); }


/* ════════════════════════════════
   ROW 8 — FORM HEADER  bg:#0E5D88
   ════════════════════════════════ */
.sl-fhdr {
  background: var(--blue); padding: 64px 24px 48px;
  text-align: center; position: relative; overflow: hidden;
}
.sl-fhdr::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(198,187,68,.07) 0%, transparent 60%);
}
.sl-fhdr__in { position: relative; max-width: 620px; margin: 0 auto; padding: 0 20px; }
.sl-fhdr h2 {
  font-family: var(--fh); font-size: clamp(24px,4vw,38px);
  font-weight: 800; line-height: 1.15;
  color: var(--white); margin-bottom: 14px; letter-spacing: -.02em;
}
.sl-fhdr h2 em { font-style: normal; color: var(--gold); }
.sl-fhdr p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.8); margin-bottom: 24px; }
.sl-fhdr__pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.sl-fhdr__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px; padding: 6px 14px;
  font-size: 12px; color: rgba(255,255,255,.85); font-weight: 500;
}

@media (max-width: 400px) {
  .sl-hero { padding: 52px 16px 48px; }
  .sl-btn  { padding: 13px 20px; font-size: 14px; }
}