/* md-v3.css for template-home-v3.php.
   Part 1: Khalid's stylesheet from home-v3/index.html, scoped under .mdv3.
   Part 2: additions for the sections taken from the live Elementor homepage.
   Part 3: Khalid's own sections, testimonial slider, revenue-protection pair,
   lead calculator and the free-audit close. 2026-08-12. */
.mdv3 {
  --navy:#001b48; --navy2:#0a2f6b; --blue:#0964FC; --blue-dk:#003691;
  --ink:#0b1220; --body:#41506b; --line:#e3e9f4; --soft:#f5f8fd; --white:#fff;
  --wrap:1160px; --r:16px;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 12px 32px rgba(11,18,32,.08);
}
.mdv3 * {margin:0;padding:0;box-sizing:border-box}
.mdv3 {scroll-behavior:smooth}
.mdv3 {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
.mdv3 img {max-width:100%;height:auto;display:block}
.mdv3 a {color:inherit}
.mdv3 .wrap {width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mdv3 section {padding:88px 0}
.mdv3 .soft {background:var(--soft)}
.mdv3 .eyebrow {display:inline-block;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px}
.mdv3 h1, .mdv3 h2, .mdv3 h3, .mdv3 h4 {line-height:1.2;letter-spacing:-.02em}
.mdv3 h1 {font-size:clamp(34px,5vw,58px);font-weight:800}
.mdv3 h2 {font-size:clamp(27px,3.4vw,40px);font-weight:800}
.mdv3 h3 {font-size:20px;font-weight:700}
.mdv3 .lede {font-size:clamp(17px,1.5vw,20px);color:var(--body);max-width:62ch}
.mdv3 .head {max-width:76ch;margin-bottom:44px}
.mdv3 .head--c {margin:0 auto 48px;text-align:center}
.mdv3 .btn {display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;
  padding:15px 26px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.mdv3 .btn--p {background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(9,100,252,.28)}
.mdv3 .btn--p:hover {transform:translateY(-1px);background:#0a58db}
.mdv3 .btn--g {background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.38)}
.mdv3 .btn--g:hover {background:rgba(255,255,255,.18)}
.mdv3 .btn--o {background:#fff;color:var(--navy);border:1px solid var(--line)}
.mdv3 .btn--o:hover {border-color:#c3d3ee}
.mdv3 .row {display:flex;flex-wrap:wrap;gap:14px}
.mdv3 .hdr {position:sticky;top:0;z-index:50;background:rgba(0,27,72,.92);backdrop-filter:blur(8px)}
.mdv3 .hdr__in {display:flex;align-items:center;gap:28px;height:74px}
.mdv3 .hdr__logo img {height:36px;width:auto}
.mdv3 .hdr nav {display:flex;gap:22px;margin-left:auto}
.mdv3 .hdr nav a {color:#dce6f7;text-decoration:none;font-size:15px;font-weight:500}
.mdv3 .hdr nav a:hover {color:#fff}
.mdv3 .hdr .btn {padding:11px 20px;font-size:15px}
.mdv3 .hero {position:relative;color:#fff;padding:104px 0 96px;overflow:hidden;background:var(--navy)}
.mdv3 .hero__bg {position:absolute;inset:0}
.mdv3 .hero__bg img {width:100%;height:100%;object-fit:cover;opacity:.30}
.mdv3 .hero__bg::after {content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(0,27,72,.96) 0%,rgba(0,27,72,.86) 42%,rgba(9,100,252,.55) 100%)}
.mdv3 .hero__in {position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.mdv3 .hero h1 {margin-bottom:20px}
.mdv3 .hero p.lede {color:#d7e3f7;max-width:56ch}
.mdv3 .hero .row {margin:30px 0 22px}
.mdv3 .trust {font-size:14.5px;color:#a8c0e6}
.mdv3 .card-glass {background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:26px}
.mdv3 .card-glass h4 {font-size:14px;letter-spacing:1.6px;text-transform:uppercase;color:#9fbbea;margin-bottom:18px}
.mdv3 .chk {list-style:none;display:grid;gap:13px}
.mdv3 .chk li {display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#e6eefb}
.mdv3 .chk svg {flex:none;margin-top:3px}
.mdv3 .grid4 {display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mdv3 .grid3 {display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mdv3 .grid2 {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mdv3 .card {background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mdv3 .card img {aspect-ratio:16/10;object-fit:cover;width:100%}
.mdv3 .card__b {padding:22px}
.mdv3 .card h3 {margin-bottom:8px}
.mdv3 .card p {font-size:15.5px;color:var(--body)}
.mdv3 .tag {display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#b4123f;background:#fdeef2;border-radius:999px;padding:5px 11px;margin-bottom:10px}
.mdv3 .band {background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 55%,var(--blue) 100%);color:#fff}
.mdv3 .sum {background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:32px;
  font-size:clamp(18px,2vw,23px);line-height:1.5}
.mdv3 .sum b {color:#fff}
.mdv3 .sum .price {display:block;margin-top:18px;font-size:15px;color:#bcd2f5}
.mdv3 .step {position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mdv3 .step img {aspect-ratio:4/3;object-fit:cover}
.mdv3 .step__b {padding:24px}
.mdv3 .step__n {position:absolute;top:16px;left:16px;background:var(--blue);color:#fff;font-weight:800;font-size:14px;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 16px rgba(9,100,252,.35)}
.mdv3 .proof {display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.mdv3 .proof__img {border-radius:var(--r);border:1px solid var(--line);box-shadow:0 20px 50px rgba(11,18,32,.14);overflow:hidden}
.mdv3 .note {background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:22px;
  font-size:16px;color:var(--body);margin-top:24px}
.mdv3 .note strong {color:var(--ink)}
.mdv3 .q {display:grid;gap:14px;max-width:760px;margin:0 auto}
.mdv3 .q li {list-style:none;display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;font-size:16.5px;font-weight:600}
.mdv3 .q span {flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--blue);
  display:grid;place-items:center;font-size:14px;font-weight:800}
.mdv3 .q + p {text-align:center;margin-top:26px;font-size:17px;color:var(--body)}
.mdv3 .plans {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.mdv3 .plan {background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow);position:relative}
.mdv3 .plan--best {border-color:var(--blue);box-shadow:0 18px 44px rgba(9,100,252,.18)}
.mdv3 .flag {position:absolute;top:-13px;left:30px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.mdv3 .plan h3 {font-size:19px}
.mdv3 .plan .p {font-size:44px;font-weight:800;letter-spacing:-.03em;margin:12px 0 4px}
.mdv3 .plan .p span {font-size:16px;font-weight:600;color:var(--body)}
.mdv3 .plan .sub {font-size:15px;color:var(--body);min-height:48px}
.mdv3 .plan ul {list-style:none;margin:20px 0 24px;display:grid;gap:10px}
.mdv3 .plan li {font-size:15.5px;color:var(--body);display:flex;gap:10px}
.mdv3 .plan li svg {flex:none;margin-top:4px}
.mdv3 .plan .btn {width:100%;justify-content:center}
.mdv3 .plans__note {text-align:center;margin-top:26px;color:var(--body);font-size:15.5px}
.mdv3 details {background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.mdv3 summary {cursor:pointer;list-style:none;padding:20px 22px;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.mdv3 summary::-webkit-details-marker {display:none}
.mdv3 summary::after {content:"+";color:var(--blue);font-weight:800;font-size:22px;line-height:1}
/* 2026-08-22: this was an EN DASH. Changed to U+2212 MINUS SIGN, which is the right
   glyph for a collapse toggle and matches the width of the + above.
   CHECKED IN THE BROWSER AFTERWARDS: nothing visible changed, because the FAQ sets
   `.v3-faq summary::after { content:none }` further down and draws its own icon in
   `.v3-faq-ico`. So this pair of rules is dead for every accordion on the site today.
   Left correct rather than deleted, for the next plain <details> that gets used. */
.mdv3 details[open] summary::after {content:"−"}
.mdv3 details p {padding:0 22px 20px;color:var(--body);font-size:16px}
.mdv3 .gain {display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:52px}
.mdv3 .gain__i {background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.mdv3 .gain__i h3 {font-size:17.5px;margin-bottom:8px}
.mdv3 .gain__i p {font-size:15px;color:var(--body)}
.mdv3 .tbl-wrap {overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.mdv3 table.cmp {width:100%;border-collapse:collapse;min-width:640px}
.mdv3 table.cmp th, .mdv3 table.cmp td {padding:16px 20px;text-align:left;font-size:15.5px;border-bottom:1px solid var(--line);vertical-align:top}
.mdv3 table.cmp thead th {font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:#5b6b88;background:var(--soft)}
.mdv3 table.cmp thead th:nth-child(3) {color:var(--blue)}
.mdv3 table.cmp tbody th {font-weight:700;color:var(--ink);width:24%}
.mdv3 table.cmp td:first-of-type {color:#8b3a4c}
.mdv3 table.cmp td:last-child {color:#1c6b3f;font-weight:600;background:rgba(46,204,113,.05)}
.mdv3 table.cmp tr:last-child th, .mdv3 table.cmp tr:last-child td {border-bottom:0}
@media (max-width:980px) {
.mdv3 .gain {grid-template-columns:1fr 1fr}
 
}
@media (max-width:560px) {
.mdv3 .gain {grid-template-columns:1fr}
 
}
.mdv3 .final {background:linear-gradient(115deg,var(--navy) 0%,var(--blue-dk) 60%,var(--blue) 100%);color:#fff;text-align:center}
.mdv3 .final p {color:#d7e3f7;max-width:62ch;margin:16px auto 30px}
.mdv3 footer {background:var(--navy);color:#b9cbe8;padding:56px 0 34px;font-size:15px}
.mdv3 footer img {height:44px;width:auto;margin-bottom:18px}
.mdv3 .f__grid {display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.mdv3 footer h4 {color:#fff;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px}
.mdv3 footer a {color:#b9cbe8;text-decoration:none}
.mdv3 footer a:hover {color:#fff}
.mdv3 footer ul {list-style:none;display:grid;gap:9px}
.mdv3 .f__bar {border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;font-size:14px;color:#8ea9d4}
@media (max-width:980px) {
.mdv3 .hero__in, .mdv3 .grid2, .mdv3 .proof {grid-template-columns:1fr}
.mdv3 .grid4 {grid-template-columns:1fr 1fr}
.mdv3 .grid3, .mdv3 .plans {grid-template-columns:1fr}
.mdv3 .f__grid {grid-template-columns:1fr}
.mdv3 .hdr nav {display:none}
.mdv3 section {padding:64px 0}
.mdv3 .hero {padding:72px 0 64px}


}
@media (max-width:560px) {
.mdv3 .grid4 {grid-template-columns:1fr}
 
}


/* ============================================================================
   ADDITIONS, written for template-home-v3.php on 2026-08-12.
   Everything above this line is Khalid's own stylesheet from
   ~/websitemaintenance-shopify/home-v3/index.html, scoped under .mdv3 so it
   cannot reach the Elementor header, the footer, or any other page.
   Everything below adds the sections that come from the live Elementor
   homepage instead, in the same visual language.
   ============================================================================ */

/* The Elementor kit sets an explicit color on every heading and on bare buttons,
   and a direct rule always beats inheritance. Without these two resets a dark
   section renders dark headings, and a <button> renders as a blue slab. */
.mdv3 h1, .mdv3 h2, .mdv3 h3, .mdv3 h4, .mdv3 h5, .mdv3 h6,
.mdv3 p, .mdv3 li, .mdv3 span, .mdv3 strong, .mdv3 b, .mdv3 small, .mdv3 td, .mdv3 th {
  color: inherit;
}
/* Headings INHERIT, they must not be given a default color here. Setting
   color:var(--ink) on them looked harmless and made the h2 of every dark section
   (.hero, .band) render near black on navy, because a direct rule beats the
   color:#fff those sections set on themselves. Light sections inherit --ink from
   .mdv3 anyway. The one place inheritance is wrong is a white .card sitting inside
   a dark section, which is handled explicitly further down. */
.mdv3 button { background: none; border: 0; padding: 0; font: inherit; color: inherit; border-radius: 0; box-shadow: none; }
.mdv3 .eyebrow { color: var(--blue); }
.mdv3 .lede { color: var(--body); }

/* Font. The site loads Onest through the Elementor kit, so use it here too. */
.mdv3 { font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

/* ---------- 1. HERO, reproduction of the live Elementor hero, unchanged ---------- */
.mdv3 .v3-hero {
  position: relative; overflow: hidden; color: #fff;
  margin: 50px 50px 0; border-radius: 40px;
  background-color: #0a1c3d;
  background-image: var(--v3-herobg);
  background-repeat: no-repeat; background-position: center right; background-size: cover;
  padding: 214px 0 56px; min-height: 780px;
  display: flex; align-items: flex-end;
}
.mdv3 .v3-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(6,20,48,.92) 0%, rgba(6,20,48,.72) 38%, rgba(6,20,48,.30) 62%, rgba(6,20,48,.18) 100%);
}
.mdv3 .v3-hero > .wrap { position: relative; z-index: 2; width: 100%; }
.mdv3 .v3-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: end; }
.mdv3 .v3-hero h1 { color: #fff; max-width: 17ch; font-size: clamp(34px, 3.9vw, 52px); line-height: 1.14; }
.mdv3 .v3-hero-list { list-style: none; margin: 32px 0 40px; padding: 0; display: grid; gap: 15px; }
.mdv3 .v3-hero-list li { display: flex; align-items: center; gap: 13px; font-size: 17px; font-weight: 500; color: #fff; }
.mdv3 .v3-chk {
  flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--blue);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff;
  box-shadow: 0 6px 14px -6px rgba(9,100,252,.9);
}
.mdv3 .v3-arrow { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.mdv3 .v3-hero-partners { align-self: end; text-align: center; padding-bottom: 6px; }
.mdv3 .v3-partners-label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.92);
}
.mdv3 .v3-partners-label::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }


/* ---------- 2. MERGED SECTION, now a LIGHT section ----------
   It used to repeat the hero: another dark rounded panel, which Khalid rejected as
   "hero section round and dark, next section same like that, its not good". His own
   home-v3 design has this content on white, and on white the four photo cards and
   the monthly checks carry themselves. That also ends the dark-on-dark contrast
   problem and the background-photo seam, since the photo is gone from here. */
.mdv3 .v3-merge { background: #fff; padding: 96px 0 92px; }
.mdv3 .v3-merge-top { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; }
.mdv3 .v3-merge-top > * { min-width: 0; }
.mdv3 .v3-merge-top h2 { color: var(--ink); margin-bottom: 18px; max-width: 18ch; }
.mdv3 .v3-merge-top .lede { color: var(--body); max-width: 54ch; }
.mdv3 .v3-merge .head h2 { color: var(--ink); }
.mdv3 .v3-merge .head .lede { color: var(--body); }
.mdv3 .v3-merge-head { max-width: 32ch; margin: 76px 0 0; }

.mdv3 .v3-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: #eef4ff; border: 1px solid #d8e6ff; border-radius: 999px; padding: 8px 16px 8px 13px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
}
.mdv3 .v3-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c15e;
  box-shadow: 0 0 0 4px rgba(34,193,94,.16);
}
.mdv3 .v3-hl { color: var(--blue); }

/* The three facts were floating pills that wrapped onto a ragged second line. Now a
   simple ticked list that sits under the buttons without competing with them. */
.mdv3 .v3-facts { list-style: none; display: grid; gap: 11px; margin: 26px 0 0; padding: 0; }
.mdv3 .v3-facts li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--body); }
.mdv3 .v3-fact-tick {
  flex: none; width: 19px; height: 19px; border-radius: 50%; background: rgba(34,193,94,.14);
  color: #17a54b; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}

.mdv3 .v3-checks-sl { margin-top: 44px; }
.mdv3 .v3-checks-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #6b7c99; margin-bottom: 18px;
}
.mdv3 .v3-checks-label::before { content: ""; width: 20px; height: 1.5px; background: currentColor; }
.mdv3 .v3-check-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; display: flex; gap: 13px; align-items: flex-start; min-height: 108px;
  box-shadow: var(--shadow); transition: border-color .25s ease, transform .25s ease;
}
.mdv3 .v3-check-card:hover { border-color: #c9dcff; transform: translateY(-2px); }
.mdv3 .v3-check-card span { font-size: 15.5px; color: var(--ink); line-height: 1.55; }
.mdv3 .v3-check-card .v3-gt { flex: none; margin-top: 2px; }

/* Slider controls on this light section. */
.mdv3 .v3-merge .v3-sl-arrow { border-color: var(--line); background: #fff; box-shadow: var(--shadow); }
.mdv3 .v3-merge .v3-sl-arrow:hover { background: #f4f8ff; border-color: #c9dcff; }
.mdv3 .v3-merge .v3-sl-arrow::before { border-color: var(--navy); }
.mdv3 .v3-merge .v3-sl-dot { background: #c9d5e8; }
.mdv3 .v3-merge .v3-sl-dot.is-on { background: var(--blue); }
.mdv3 .v3-merge-top { position: relative; z-index: 2; }
.mdv3 .v3-merge-top .row { margin: 30px 0 22px; }
.mdv3 .v3-merge .head { margin: 84px 0 34px; max-width: 68ch; }
.mdv3 .v3-merge-head { margin: 84px 0 0; }
/* The four failures, now a slider in the right column. One card at a time,
   because the column is roughly 430px wide at 1440. */
.mdv3 .v3-fails-col { position: relative; z-index: 2; }
.mdv3 .v3-sl--fails .card { height: 100%; }
.mdv3 .v3-sl--fails .v3-sl-item:not([style]) { width: 100%; }
.mdv3 .v3-sl--fails .card img { aspect-ratio: 16 / 9; }
.mdv3 .v3-sl--fails .card__b { padding: 20px 22px 22px; }
.mdv3 .v3-sl--fails .card p { min-height: 96px; }
.mdv3 .v3-merge .card h3 { color: var(--ink); }
.mdv3 .v3-merge .card p { color: var(--body); }

/* Click to play film. The poster is 37KB, the video is 4.5MB and is never fetched
   until asked for, which matters on a page that sells page speed. */
.mdv3 .v3-film { margin-top: 44px; border-radius: var(--r); overflow: hidden; position: relative; background: #001229; }
.mdv3 .v3-film video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #001229; }
.mdv3 .v3-film-play {
  position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center;
  cursor: pointer; padding: 0; background: linear-gradient(180deg, rgba(0,18,41,.10), rgba(0,18,41,.50));
}
.mdv3 .v3-film-play span {
  width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,.95);
  display: grid; place-items: center; box-shadow: 0 18px 40px -12px rgba(0,0,0,.6);
}
.mdv3 .v3-film-play span::after { content: ""; width: 0; height: 0; margin-left: 5px; border-left: 21px solid var(--navy); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.mdv3 .v3-film-cap { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: #a8c0e6; margin-top: 12px; }

/* ---------- 3. WEBSITE MAINTENANCE IS REVENUE PROTECTION, from the live homepage ---------- */
.mdv3 .v3-wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mdv3 .v3-wm-art img { border-radius: 20px; width: 100%; }
.mdv3 .v3-wm-box { background: var(--soft); border-radius: var(--r); padding: 26px 28px; margin: 28px 0 34px; }
.mdv3 .v3-wm-box ul { list-style: none; display: grid; gap: 16px; }
.mdv3 .v3-wm-box li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; color: var(--ink); }
.mdv3 .v3-wm-box .v3-gt { flex: none; }

/* ---------- 6. OUR PROCESS. Pinned photo, stacking step cards, active card solid
   blue. Matches the live homepage's sticky scroll effect without Elementor Pro. ---------- */
.mdv3 .v3-proc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.mdv3 .v3-proc-media {
  position: sticky; top: 120px; border-radius: 20px; overflow: hidden;
  aspect-ratio: 722 / 598; background: #0b1220;
}
.mdv3 .v3-proc-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
}
.mdv3 .v3-proc-img.is-on { opacity: 1; }
.mdv3 .v3-proc-col { display: block; }
/* All cards sticky at the SAME top so they pile one on top of another, which is
   what the live page does. The bottom margin is the scroll distance between one
   card arriving and the next covering it, matched to the live pitch of ~272px. */
.mdv3 .v3-pstep {
  position: sticky; top: 120px; margin-bottom: 72px;
  background: #eef4ff; border-radius: 18px; padding: 26px 28px 28px;
  border: 1px solid #dfe9ff;
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.mdv3 .v3-pstep:last-child { margin-bottom: 0; }
.mdv3 .v3-pstep.is-active {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 18px 40px -18px rgba(9,100,252,.6);
}
.mdv3 .v3-pstep h3 { font-size: 22px; margin-bottom: 10px; }
.mdv3 .v3-pstep p { font-size: 15.5px; color: var(--body); }
.mdv3 .v3-pstep.is-active h3 { color: #fff; }
.mdv3 .v3-pstep.is-active p { color: rgba(255,255,255,.9); }
.mdv3 .v3-step-n {
  width: 54px; height: 54px; border-radius: 14px; background: #fff; border: 1px solid #d6e4ff;
  display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--blue); margin-bottom: 18px;
}
.mdv3 .v3-proc-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 56px; }
.mdv3 .btn--soft { background: #e7f0ff; color: var(--blue); }
.mdv3 .btn--soft:hover { background: #d9e7ff; }

/* ---------- slider, used for the partner logos and the six monthly checks ---------- */
/* min-width:0 is REQUIRED here. A grid/flex item defaults to min-width:auto, i.e.
   min-content, and .v3-sl-track is a flex row of fixed-width slides. Without this
   the track's min-content blew the hero's right column out to 22,619px, crushing
   the H1 column to 252px and wrapping the headline over seven lines. The slider JS
   then measured that inflated width and baked it into the slide widths. Caught in a
   real browser; the headless render did not reproduce it. */
.mdv3 .v3-sl { position: relative; overflow: hidden; width: 100%; max-width: 100%; min-width: 0; }
.mdv3 .v3-hero-grid > *, .mdv3 .v3-proc > *, .mdv3 .v3-wm-grid > *, .mdv3 .grid2 > *,
.mdv3 .hero__in > * { min-width: 0; }
.mdv3 .v3-sl-track { display: flex; will-change: transform; }
.mdv3 .v3-sl-item { flex: 0 0 auto; }
.mdv3 .v3-sl--logos .v3-sl-item { display: flex; align-items: center; justify-content: center; }
.mdv3 .v3-sl--logos img { height: 56px; width: auto; max-width: 100%; }
/* No-JS fallback: without the script the items have no inline width, so give them one. */
.mdv3 .v3-sl--logos .v3-sl-item:not([style]) { width: 33.33%; }
.mdv3 .v3-sl--checks .v3-sl-item:not([style]) { width: 33.33%; }
.mdv3 .v3-checks-sl { margin-top: 46px; }

/* ---------- 7. WHY YOU CAN COUNT ON US, from the live homepage.
   why-choose-us-combo.webp is this section's background by design: flat navy on the
   left for the copy, the team photograph on the right. ---------- */
.mdv3 .v3-why {
  position: relative; color: #fff; padding: 0;
  background: #001b48 var(--v3-whybg) no-repeat center / cover;
}
.mdv3 .v3-why-in { display: grid; grid-template-columns: 1fr 1fr; }
.mdv3 .v3-why-copy { padding: 88px 56px 88px 0; }
.mdv3 .v3-why h2 { color: #fff; margin-bottom: 30px; }
.mdv3 .v3-why .eyebrow { color: #4f8dff; display: inline-flex; align-items: center; gap: 10px; }
.mdv3 .v3-why .eyebrow::before { content: ""; width: 18px; height: 1.5px; background: currentColor; }
.mdv3 .v3-why-list { display: grid; gap: 18px; }
.mdv3 .v3-why-item { background: rgba(255,255,255,.06); border-radius: 16px; padding: 22px 26px 24px; }
.mdv3 .v3-why-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.mdv3 .v3-why-head svg { flex: none; width: 26px; height: 26px; stroke: #cfe1ff; fill: none; stroke-width: 1.6; }
.mdv3 .v3-why-item h3 { color: #fff; font-size: 21px; margin: 0; }
.mdv3 .v3-why-item p { color: #c3d4ee; font-size: 15.5px; margin: 0; padding-left: 40px; }

/* ---------- reviews, renders only when the template has real rows ---------- */
.mdv3 .v3-rev-head { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; }
.mdv3 .v3-rev-score { text-align: right; }
.mdv3 .v3-rev-score strong { font-size: 42px; font-weight: 800; line-height: 1; display: block; color: var(--ink); }
.mdv3 .v3-stars { color: #f5a623; letter-spacing: 2px; font-size: 17px; display: inline-block; }
.mdv3 .v3-star-off { color: #d9dfea; }
.mdv3 .v3-rev-count { display: block; font-size: 13.5px; color: var(--body); margin-top: 4px; }
.mdv3 .v3-rev { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.mdv3 .v3-rev-top { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.mdv3 .v3-rev-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.mdv3 .v3-rev-name { font-weight: 700; }
.mdv3 .v3-rev-role { font-size: 13.5px; color: var(--body); }
.mdv3 .v3-rev blockquote { margin-top: 12px; font-size: 15.5px; color: var(--ink); }
.mdv3 .v3-rev blockquote::before { content: "\201C"; }
.mdv3 .v3-rev blockquote::after { content: "\201D"; }
.mdv3 .v3-rev-date { font-size: 13px; color: var(--body); margin-top: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mdv3 .v3-hero { margin: 24px 24px 0; border-radius: 30px; padding: 176px 0 48px; min-height: 0; }
  .mdv3 .v3-hero-grid, .mdv3 .v3-wm-grid, .mdv3 .v3-proc, .mdv3 .v3-why-in { grid-template-columns: 1fr; }
  .mdv3 .v3-proc-media { position: relative; top: auto; }
  .mdv3 .v3-pstep { position: static; }
  .mdv3 .v3-hero-partners { text-align: left; }
  .mdv3 .v3-partners { justify-content: flex-start; }
  .mdv3 .v3-why { background-image: none; background: linear-gradient(150deg, #001b48, #0a2f6b); }
  .mdv3 .v3-why-copy { padding: 72px 0; }
  .mdv3 .v3-why-photo img { border-radius: 20px; }
  .mdv3 .v3-rev-head { flex-direction: column; align-items: flex-start; }
  .mdv3 .v3-rev-score { text-align: left; }
  .mdv3 .v3-proc-art { max-width: 620px; }
}
@media (max-width: 560px) {
  .mdv3 .v3-hero { margin: 12px 12px 0; border-radius: 22px; padding: 150px 0 40px; background-position: 72% center; }
  .mdv3 .v3-partners img { height: 44px; }
  .mdv3 .v3-hero-list li { font-size: 15.5px; }
  .mdv3 .btn { width: 100%; justify-content: center; }
  .mdv3 .v3-why-item p { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mdv3 * { transition: none !important; }
}

/* ---------- 9. PACKAGES, from the live homepage ---------- */
.mdv3 .v3-center { text-align: center; margin: 0 auto 44px; }
.mdv3 .v3-pkg { background: var(--soft); border-radius: 22px; padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mdv3 .v3-pkg-card { background: #fff; border-radius: 18px; padding: 32px 34px 34px; display: flex; flex-direction: column; }
.mdv3 .v3-pkg-badge { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #cfe1ff; display: grid; place-items: center; margin-bottom: 26px; }
.mdv3 .v3-pkg-badge svg { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 1.6; }
.mdv3 .v3-pkg-card h3 { font-size: 26px; margin-bottom: 8px; }
.mdv3 .v3-pkg-sub { font-size: 14.5px; color: var(--body); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.mdv3 .v3-pkg-price { padding: 20px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.mdv3 .v3-pkg-price strong { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.mdv3 .v3-pkg-price span { font-size: 15px; color: var(--body); }
.mdv3 .v3-pkg-inc { font-weight: 700; font-size: 14.5px; margin-bottom: 16px; }
.mdv3 .v3-pkg-list { list-style: none; display: grid; gap: 14px; margin-bottom: 28px; }
.mdv3 .v3-pkg-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.mdv3 .v3-pkg-list .v3-ck { flex: none; color: #22c15e; font-weight: 700; }
.mdv3 .v3-i-wrap { margin-left: auto; display: inline-flex; }
.mdv3 .v3-pkg-list .v3-i {
  flex: none; width: 18px; height: 18px; text-decoration: none; border-radius: 4px; border: 1px solid #cfe1ff;
  color: var(--blue); font-size: 11px; font-weight: 700; display: grid; place-items: center; background: #f4f8ff;
}
.mdv3 .v3-pkg-card .btn { justify-content: center; width: 100%; margin-top: auto; }
.mdv3 .v3-pkg-art img { border-radius: 18px; width: 100%; height: 100%; object-fit: cover; }

.mdv3 .v3-upsell {
  margin-top: 22px; background: var(--soft); border-radius: 18px; padding: 18px;
  display: grid; grid-template-columns: 200px auto 1fr; gap: 26px; align-items: center;
}
.mdv3 .v3-upsell img { border-radius: 12px; width: 200px; height: 108px; object-fit: cover; }
.mdv3 .v3-upsell-3x { color: var(--blue); font-size: 26px; font-weight: 800; line-height: 1.15; max-width: 8ch; }
.mdv3 .v3-upsell-price strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.mdv3 .v3-upsell-price span { font-size: 15px; color: var(--body); }
.mdv3 .v3-upsell-right h4 { font-size: 18px; margin-bottom: 6px; }
.mdv3 .v3-upsell-right p { font-size: 14.5px; color: var(--body); margin-bottom: 14px; }
.mdv3 .v3-upsell-right .btn { justify-content: center; width: 100%; }

/* ---------- 10. PROTECT YOUR REVENUE, from the live homepage ---------- */
.mdv3 .v3-prot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.mdv3 .v3-prot-art img { border-radius: 18px; width: 100%; height: 100%; object-fit: cover; }
.mdv3 .v3-prot-panel {
  border-radius: 18px; padding: 52px 48px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, #0a3ea8 0%, #001b48 60%);
}
.mdv3 .v3-prot-panel h2 { color: #fff; margin-bottom: 16px; }
.mdv3 .v3-prot-panel p { color: #cddcf3; font-size: 16px; margin-bottom: 26px; max-width: 44ch; }
.mdv3 .v3-prot-list { list-style: none; display: grid; gap: 14px; margin-bottom: 34px; }
.mdv3 .v3-prot-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }
.mdv3 .v3-prot-list .v3-chk { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }

/* ---------- 11. FAQ. Measured off the live accordion and matched: 855px wide,
   16px gaps, closed item #f7f8fa at radius 12, open item tinted blue 10% with a
   55% blue border that wraps the question and the answer as one card. <details>
   so it needs no JavaScript. ---------- */
.mdv3 .v3-faq { max-width: 855px; margin: 0 auto; display: grid; gap: 16px; }
.mdv3 .v3-faq details { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; overflow: visible; }
.mdv3 .v3-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px;
  padding: 24px; border-radius: 12px; background: #f7f8fa; border: 1px solid transparent;
  font-size: 16px; font-weight: 700; color: #0a1642; transition: background .2s ease;
}
.mdv3 .v3-faq summary:hover { background: #eef1f7; }
.mdv3 .v3-faq summary::-webkit-details-marker { display: none; }
.mdv3 .v3-faq summary > span:first-child { flex: 1; }
.mdv3 .v3-faq-ico { position: relative; flex: none; width: 16px; height: 16px; margin-left: auto; }
.mdv3 .v3-faq-ico::before, .mdv3 .v3-faq-ico::after {
  content: ""; position: absolute; background: #0a1642; border-radius: 2px;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.mdv3 .v3-faq-ico::before { left: 0; top: 7px; width: 16px; height: 2px; }
.mdv3 .v3-faq-ico::after { left: 7px; top: 0; width: 2px; height: 16px; }
.mdv3 .v3-faq details[open] .v3-faq-ico::after { transform: scaleY(0); opacity: 0; }
.mdv3 .v3-faq details[open] summary {
  background: rgba(9,100,252,.1); border-radius: 12px 12px 0 0;
  border: 1px solid rgba(9,100,252,.55); border-bottom: 0; color: #1f2124;
}
/* Height is animated by script; overflow hides the content as it collapses. */
.mdv3 .v3-faq-body {
  overflow: hidden; background: rgba(9,100,252,.1); border-radius: 0 0 12px 12px;
  border: 1px solid rgba(9,100,252,.55); border-top: 0;
  transition: height .4s cubic-bezier(.4,0,.2,1);
}
.mdv3 .v3-faq details p { padding: 0 24px 24px; margin: 0; font-size: 16px; line-height: 1.6; color: #0a1642; }

@media (max-width: 1100px) {
  .mdv3 .v3-pkg, .mdv3 .v3-prot { grid-template-columns: 1fr; }
  .mdv3 .v3-upsell { grid-template-columns: 1fr; }
  .mdv3 .v3-upsell img { width: 100%; height: 150px; }
  .mdv3 .v3-upsell-3x { max-width: none; }
  .mdv3 .v3-prot-panel { padding: 40px 30px; }
}

/* ---------- 4. THE REAL COST: what happens when you hire in a hurry ---------- */
.mdv3 .v3-cost-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.mdv3 .v3-cost-flow > * { min-width: 0; }
.mdv3 .v3-cost-step {
  position: relative; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px; padding: 26px 26px 28px;
}
.mdv3 .v3-cost-step--bill { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.mdv3 .v3-cost-n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 16px;
}
.mdv3 .v3-cost-step h3 { color: #fff; font-size: 19px; margin-bottom: 9px; }
.mdv3 .v3-cost-step p { color: #cfdff8; font-size: 15.5px; line-height: 1.6; }
.mdv3 .v3-cost-step p b { color: #fff; }
.mdv3 .v3-cost-foot { margin-top: 26px; color: #bcd2f5; font-size: 15.5px; }
@media (max-width: 980px) {
  .mdv3 .v3-cost-flow { grid-template-columns: 1fr; }
}

/* The popup CTAs are wrapped in .get_strt_mdkhd so the site-wide delegated handler
   opens Elementor popup 1494. The wrapper must not change how the button sits. */
.mdv3 .get_strt_mdkhd { display: inline-flex; }
.mdv3 .v3-pkg-card .get_strt_mdkhd, .mdv3 .v3-upsell-right .get_strt_mdkhd { width: 100%; margin-top: auto; }
.mdv3 .v3-pkg-card .get_strt_mdkhd .btn, .mdv3 .v3-upsell-right .get_strt_mdkhd .btn { width: 100%; justify-content: center; }

/* ---------- section 2 top block presentation ---------- */
.mdv3 .v3-merge-top h2 { line-height: 1.14; }

/* ---------- slider controls: arrows, dots, drag affordance ---------- */
.mdv3 .v3-sl { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mdv3 .v3-sl.is-dragging { cursor: grabbing; }
.mdv3 .v3-sl img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* Controls sit centered under the slider, per Khalid. */
.mdv3 .v3-sl-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.mdv3 .v3-sl-arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  display: grid; place-items: center; position: relative; transition: background .2s ease, border-color .2s ease;
}
.mdv3 .v3-sl-arrow:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
.mdv3 .v3-sl-arrow::before {
  content: ""; width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.mdv3 .v3-sl-arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.mdv3 .v3-sl-arrow--next::before { transform: rotate(45deg); margin-right: 3px; }
.mdv3 .v3-sl-dots { display: flex; align-items: center; gap: 8px; }
.mdv3 .v3-sl-dot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.3); transition: width .25s ease, background .25s ease;
}
.mdv3 .v3-sl-dot.is-on { width: 26px; background: #fff; }
/* On light sections the controls need dark ink instead. */
.mdv3 .soft .v3-sl-arrow, .mdv3 #benefit .v3-sl-arrow, .mdv3 #pricing .v3-sl-arrow {
  border-color: var(--line); background: #fff;
}
.mdv3 .soft .v3-sl-arrow::before, .mdv3 #benefit .v3-sl-arrow::before, .mdv3 #pricing .v3-sl-arrow::before {
  border-color: var(--navy);
}
.mdv3 .soft .v3-sl-dot, .mdv3 #benefit .v3-sl-dot, .mdv3 #pricing .v3-sl-dot { background: #c9d5e8; }
.mdv3 .soft .v3-sl-dot.is-on, .mdv3 #benefit .v3-sl-dot.is-on, .mdv3 #pricing .v3-sl-dot.is-on { background: var(--blue); }

/* ---------- section 2 lower block ----------
   The background photograph and the original hero gradient were tuned for a short
   hero with copy on the left. Stretched over this taller merged section they left a
   hard diagonal seam down the middle with the photo showing through strongly on the
   right. Calmer photo, more even overlay, and the monthly checks read as real cards. */
.mdv3 .v3-merge-head { max-width: 30ch; }
.mdv3 .v3-merge-head h2 { margin-bottom: 14px; }
.mdv3 .v3-checks-sl { margin-top: 52px; }

/* .btn--g is a ghost button drawn for dark backgrounds: white text on a translucent
   white fill. On this now-light section it rendered white on white and vanished. */
.mdv3 .v3-merge .btn--g {
  background: #fff; color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.mdv3 .v3-merge .btn--g:hover { background: #f4f8ff; border-color: #c9dcff; }

/* The section carried two headlines saying the same thing, the second with a wide
   empty column beside it. One headline now, and the monthly checks read as a labeled
   strip under the whole thing rather than a second half-section. */
.mdv3 .v3-checks-sl { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 40px; }
.mdv3 .v3-merge { padding-bottom: 88px; }

/* Six monthly checks as a calm static list. They were a second slider in the same
   section as the failure cards, which Khalid rejected: two sliders in one section. */
.mdv3 .v3-checks-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px;
}
.mdv3 .v3-checks-grid li { display: flex; gap: 12px; align-items: flex-start; }
.mdv3 .v3-checks-grid .v3-gt { flex: none; margin-top: 3px; }
.mdv3 .v3-checks-grid span { font-size: 15.5px; line-height: 1.55; color: var(--body); }
@media (max-width: 980px) { .mdv3 .v3-checks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mdv3 .v3-checks-grid { grid-template-columns: 1fr; } }

/* The card carries a soft drop shadow, and overflow:hidden on the slider was slicing
   it flat down both sides and along the bottom. Padding gives the shadow room inside
   the clip; the layout maths subtracts that padding so the slide width stays exact. */
/* NO drop shadow on a card inside a horizontally clipped carousel. A 40px blur
   needs 40px of padding on both sides to survive overflow:hidden, and that
   padding then shrinks the slide and pulls it out of line with the column.
   Two rounds of padding tweaks did not fix it. The card reads fine on white
   with a slightly firmer border, which cannot clip. */
.mdv3 .v3-sl--fails { padding: 0; }
.mdv3 .v3-sl--fails .card { box-shadow: none; border-color: #dfe6f2; }

/* Buttons now close the section rather than sitting in the left column. */
.mdv3 .v3-merge-cta { justify-content: center; margin-top: 44px; }

/* Each monthly check carries its own icon rather than six identical ticks. */
.mdv3 .v3-checks-grid li { align-items: center; gap: 14px; }
.mdv3 .v3-check-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: #eef4ff; display: grid; place-items: center;
}
.mdv3 .v3-check-ico svg {
  width: 19px; height: 19px; fill: none; stroke: var(--blue);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- the real cost: photograph with an example call-out laid over it ---------- */
.mdv3 .v3-cost-visual { position: relative; }
.mdv3 .v3-cost-visual img { border-radius: 20px; width: 100%; display: block; }
.mdv3 .v3-invoice {
  position: absolute; right: -6px; bottom: -34px; width: 300px;
  background: #fff; color: var(--ink); border-radius: 16px; padding: 20px 22px 18px;
  box-shadow: 0 26px 60px rgba(0,10,35,.45);
}
.mdv3 .v3-invoice-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mdv3 .v3-invoice-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: #c2521b; background: #fff1e9; border-radius: 999px; padding: 5px 10px;
}
.mdv3 .v3-invoice-when { font-size: 11.5px; color: #7d8aa3; }
.mdv3 .v3-invoice-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mdv3 .v3-invoice-lines li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--body); }
.mdv3 .v3-invoice-lines b { color: var(--ink); font-weight: 600; }
.mdv3 .v3-invoice-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
.mdv3 .v3-invoice-total span { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #7d8aa3; }
.mdv3 .v3-invoice-total b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #c2521b; }
.mdv3 .v3-invoice-foot { font-size: 12px; color: #7d8aa3; margin: 10px 0 0; }
.mdv3 .v3-cost-sum { margin-top: 46px; }
@media (max-width: 980px) {
  .mdv3 .v3-invoice { position: static; width: auto; margin-top: 16px; }
}

/* Each cost step carries an icon beside its number, so the row is not three
   text blocks. */
.mdv3 .v3-cost-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mdv3 .v3-cost-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.12); display: grid; place-items: center; color: #cfe1ff;
}
.mdv3 .v3-cost-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mdv3 .v3-cost-n { margin-bottom: 0; width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.mdv3 .v3-cost-step--bill .v3-cost-ico { background: rgba(255,180,140,.2); color: #ffc4a3; }
.mdv3 .v3-invoice-total b { font-variant-numeric: tabular-nums; }

/* ============================================================
   real-cost-preview: Khalid's own section CSS, scoped to #cost.
   Preview-only page chrome (card width, radius, shadow, page
   background) removed; palette applied to the section, not :root.
   ============================================================ */
.mdv3 #cost { --navy: #071232; --navy2: #0e2454; --blue: #2774ff; --ink: #10192f; --body: #58647a; --line: #e1e7f0; }
.mdv3 #cost { background: linear-gradient(120deg, var(--navy) 0%, var(--navy2) 55%, var(--blue) 100%); color: #fff; padding: clamp(42px, 6vw, 86px) 0; overflow: hidden; }
.mdv3 #cost .wrap { width: min(1040px, calc(100% - 42px)); margin: 0 auto; }
.mdv3 #cost .grid2 { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.mdv3 #cost .eyebrow { display: inline-block; color: #8fb7ff; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 14px; }
.mdv3 #cost h2 { margin: 0; max-width: 11ch; color: #fff; font-size: clamp(36px, 5.4vw, 66px); line-height: 1.04; letter-spacing: 0; }
.mdv3 #cost .lede { color: #cfdff8; max-width: 56ch; margin: 22px 0 0; font-size: 17px; line-height: 1.65; }
.mdv3 #cost .v3-cost-proof { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.08); color: #dce9ff; font-size: 14px; line-height: 1.35; }
.mdv3 #cost .v3-cost-proof b { color: #fff; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.12); }
.mdv3 #cost .v3-cost-visual { position: relative; }
.mdv3 #cost .v3-cost-scene { position: relative; overflow: hidden; border-radius: 24px; min-height: 520px; background: #081631; box-shadow: 0 34px 80px rgba(0,10,35,.42); }
.mdv3 #cost .v3-cost-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,18,50,.45), rgba(7,18,50,.04) 48%, rgba(7,18,50,.18)), linear-gradient(180deg, rgba(7,18,50,0), rgba(7,18,50,.56)); }
.mdv3 #cost .v3-cost-scene img { width: 100%; min-height: 520px; height: 100%; display: block; object-fit: cover; }
.mdv3 #cost .v3-cost-story-card { position: absolute; left: 22px; bottom: 22px; width: min(410px, calc(100% - 44px)); padding: 18px; border-radius: 18px; background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 26px 65px rgba(0,10,35,.42); backdrop-filter: blur(12px); }
.mdv3 #cost .v3-story-label { margin: 0 0 12px; color: #c2521b; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.mdv3 #cost .v3-story-row { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.mdv3 #cost .v3-story-row span { color: #718098; font-size: 12.5px; font-weight: 700; }
.mdv3 #cost .v3-story-row b { color: var(--ink); font-size: 14px; font-weight: 700; }
.mdv3 #cost .v3-story-total { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 14px 15px; border-radius: 14px; background: #fff1e9; }
.mdv3 #cost .v3-story-total span { color: #9c4317; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.mdv3 #cost .v3-story-total b { color: #c2521b; font-size: 32px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mdv3 #cost .v3-cost-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 70px; }
.mdv3 #cost .v3-cost-step { position: relative; background: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; padding: 16px 16px 24px; color: var(--ink); box-shadow: 0 18px 46px rgba(0,10,35,.18); }
.mdv3 #cost .v3-cost-step::after { content: ""; position: absolute; top: 47px; right: -23px; width: 23px; height: 1px; background: rgba(255,255,255,.28); }
.mdv3 #cost .v3-cost-step:last-child::after { display: none; }
.mdv3 #cost .v3-cost-step--bill { border-color: #ffd3bf; }
.mdv3 #cost .v3-cost-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mdv3 #cost .v3-cost-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #eef4ff; display: grid; place-items: center; color: var(--blue); }
.mdv3 #cost .v3-cost-step--bill .v3-cost-ico { background: #fff1e9; color: #c2521b; }
.mdv3 #cost .v3-cost-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mdv3 #cost .v3-cost-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; }
.mdv3 #cost .v3-cost-step h3 { color: var(--ink); font-size: 21px; line-height: 1.22; margin: 0 0 10px; letter-spacing: 0; }
.mdv3 #cost .v3-cost-step p { color: var(--body); font-size: 15.5px; line-height: 1.65; margin: 0; }
.mdv3 #cost .v3-cost-step p b { color: var(--ink); }
.mdv3 #cost .v3-cost-step .v3-cost-metric { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.16); line-height: 1.1; }
.mdv3 #cost .v3-cost-metric span { display: block; color: #aecaee; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; }
.mdv3 #cost .v3-cost-metric b { display: block; color: #fff; font-size: clamp(28px,3vw,42px); line-height: 1; font-weight: 850; letter-spacing: -.03em; }
.mdv3 #cost .v3-cost-step--bill .v3-cost-metric b { color: #ffc4a3; }
.mdv3 #cost .v3-cost-card-img { position: relative; margin: 0 0 22px; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 10; background: #081631; border: 1px solid var(--line); }
.mdv3 #cost .v3-cost-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,18,50,0) 35%, rgba(7,18,50,.82)); }
.mdv3 #cost .v3-cost-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdv3 #cost .v3-cost-card-img figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 5px; }
.mdv3 #cost .v3-cost-card-img span { color: #cfe1ff; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.mdv3 #cost .v3-cost-card-img b { color: #fff; font-size: clamp(24px,2vw,32px); line-height: 1; font-weight: 850; letter-spacing: -.03em; }
.mdv3 #cost .v3-cost-step--bill .v3-cost-card-img b { color: #ffc4a3; }
.mdv3 #cost .v3-cost-signal { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 0 0 22px; border-radius: 16px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.2); }
.mdv3 #cost .v3-cost-signal div { min-height: 108px; padding: 18px; background: rgba(255,255,255,.08); }
.mdv3 #cost .v3-cost-signal span { display: block; color: #aecaee; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; }
.mdv3 #cost .v3-cost-signal b { display: block; color: #fff; font-size: clamp(22px,2.2vw,30px); line-height: 1.05; font-weight: 850; letter-spacing: -.02em; }
.mdv3 #cost .v3-cost-signal div:nth-child(2) b { color: #ffc4a3; }
.mdv3 #cost .v3-cost-signal--quiet div:nth-child(1) b { color: #fff; }
.mdv3 #cost .v3-cost-signal--quiet div:nth-child(2) b, .mdv3 #cost .v3-cost-signal--bill div:nth-child(1) b { color: #ffc4a3; }
.mdv3 #cost .v3-cost-signal--bill div:nth-child(2) b { font-size: clamp(20px,1.9vw,26px); }
.mdv3 #cost .v3-card-visual { position: relative; min-height: 132px; margin: 0 0 22px; padding: 16px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.mdv3 #cost .v3-card-visual::before { content: ""; position: absolute; inset: auto -28px -52px auto; width: 130px; height: 130px; border-radius: 50%; background: rgba(143,183,255,.12); }
.mdv3 #cost .v3-card-visual em { position: absolute; left: 16px; bottom: 14px; color: #dce9ff; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .3px; }
.mdv3 #cost .v3-mini-browser { display: flex; gap: 5px; width: 116px; padding: 9px 10px; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.18); }
.mdv3 #cost .v3-mini-browser span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.42); }
.mdv3 #cost .v3-mini-page { width: 116px; height: 64px; padding: 12px; border-radius: 0 0 12px 12px; background: rgba(255,255,255,.92); display: grid; gap: 6px; }
.mdv3 #cost .v3-mini-page i { display: block; height: 5px; border-radius: 999px; background: #d8e2f3; }
.mdv3 #cost .v3-mini-page i:nth-child(2) { width: 72%; }
.mdv3 #cost .v3-mini-page b { justify-self: start; margin-top: 2px; padding: 4px 8px; border-radius: 999px; background: #e7f8ef; color: #16814a; font-size: 10px; line-height: 1; font-weight: 800; }
.mdv3 #cost .v3-card-visual--site::after { content: "!"; position: absolute; right: 22px; top: 28px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff1e9; color: #c2521b; font-weight: 900; font-size: 22px; box-shadow: 0 12px 28px rgba(0,10,35,.2); }
.mdv3 #cost .v3-inbox-line { width: 78%; height: 22px; border-radius: 999px; margin-bottom: 10px; background: rgba(255,255,255,.18); display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.mdv3 #cost .v3-inbox-line span { width: 8px; height: 8px; border-radius: 50%; background: #8fb7ff; }
.mdv3 #cost .v3-inbox-line b { width: 62%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.5); }
.mdv3 #cost .v3-inbox-line.is-faded { opacity: .38; }
.mdv3 #cost .v3-quiet-count { position: absolute; right: 22px; top: 18px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); color: #c2521b; font-size: 36px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 16px 34px rgba(0,10,35,.22); }
.mdv3 #cost .v3-mini-bill { position: relative; width: 142px; min-height: 92px; padding: 16px 14px 14px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 18px 38px rgba(0,10,35,.24); }
.mdv3 #cost .v3-mini-bill span { display: block; height: 6px; margin-bottom: 8px; border-radius: 999px; background: #d9e2ef; }
.mdv3 #cost .v3-mini-bill span:nth-child(2) { width: 82%; }
.mdv3 #cost .v3-mini-bill span:nth-child(3) { width: 58%; }
.mdv3 #cost .v3-mini-bill strong { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: #c2521b; font-size: 27px; line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.mdv3 #cost .v3-card-visual--bill::after { content: ""; position: absolute; right: 26px; top: 24px; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,180,140,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.mdv3 #cost .sum { margin-top: 34px; background: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 20px; padding: 28px; color: var(--body); line-height: 1.65; box-shadow: 0 18px 46px rgba(0,10,35,.16); }
.mdv3 #cost .sum b { color: var(--ink); }
.mdv3 #cost .sum .price { display: block; margin-top: 18px; font-size: 15px; color: var(--navy); background: #eef4ff; border-left: 4px solid var(--blue); padding: 14px 16px; border-radius: 12px; line-height: 1.55; }
.mdv3 #cost .v3-cost-foot { margin: 24px 0 0; color: #bcd2f5; font-size: 15.5px; }
@media (max-width: 980px) {
.mdv3 #cost .grid2, .mdv3 #cost .v3-cost-flow { grid-template-columns: 1fr; }
.mdv3 #cost .v3-cost-step::after { display: none; }
.mdv3 #cost h2 { max-width: 12ch; }
.mdv3 #cost .v3-cost-scene, .mdv3 #cost .v3-cost-scene img { min-height: 420px; }
.mdv3 #cost .v3-cost-story-card { position: relative; left: auto; bottom: auto; width: auto; margin: -74px 14px 0; }
}
.mdv3 #cost { padding-top: 76px; padding-bottom: 72px; }
.mdv3 #cost .grid2 { align-items: start; gap: 64px; }
.mdv3 #cost h2 { max-width: 13ch; font-size: clamp(38px,4.1vw,56px); line-height: 1.08; letter-spacing: 0; }
.mdv3 #cost .lede { max-width: 49ch; font-size: 16px; line-height: 1.6; margin-top: 20px; }
.mdv3 #cost .v3-cost-proof { margin-top: 24px; }
.mdv3 #cost .v3-cost-scene { min-height: 430px; }
.mdv3 #cost .v3-cost-scene img { min-height: 430px; }
.mdv3 #cost .v3-story-row { grid-template-columns: 62px 1fr; padding: 8px 0; }
.mdv3 #cost .v3-story-row b { font-size: 13.5px; line-height: 1.25; }
.mdv3 #cost .v3-story-total { margin-top: 10px; padding: 12px 14px; }
.mdv3 #cost .v3-story-total b { font-size: 28px; }
.mdv3 #cost .v3-cost-flow { margin-top: 44px; }
.mdv3 #cost .v3-cost-step h3 { font-size: 20px; margin-bottom: 8px; }
.mdv3 #cost .v3-cost-step p { font-size: 15px; line-height: 1.55; }
.mdv3 #cost .v3-cost-sum { margin-top: 30px; }
@media (max-width: 980px) {
.mdv3 #cost { padding-top: 56px; padding-bottom: 56px; }
.mdv3 #cost h2 { max-width: 12ch; font-size: clamp(34px,8vw,46px); }
.mdv3 #cost .v3-cost-scene, .mdv3 #cost .v3-cost-scene img { min-height: 380px; }
}

/* ============================================================
   benefit-preview: Khalid's own section CSS, scoped to #benefit.
   Preview-only page chrome (card width, radius, shadow, page
   background) removed; palette applied to the section, not :root.
   ============================================================ */
.mdv3 #benefit { --blue:#2774ff; --ink:#0b1220; --body:#41506b; --line:#e3e9f4; --soft:#f5f8fd; }
.mdv3 #benefit { background: var(--soft); padding:76px 0; }
.mdv3 #benefit .wrap { width:min(1040px, calc(100% - 42px)); margin:0 auto; }
.mdv3 #benefit .head { max-width:840px; margin-bottom:34px; }
.mdv3 #benefit .eyebrow { display:inline-block; color:var(--blue); font-size:12px; font-weight:850; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:14px; }
.mdv3 #benefit h2 { margin:0; max-width:15ch; color:var(--ink); font-size:clamp(36px,5vw,56px); line-height:1.08; letter-spacing:0; }
.mdv3 #benefit .lede { max-width:66ch; color:var(--body); font-size:17px; line-height:1.65; margin:20px 0 0; }
.mdv3 #benefit .v3-benefit-story { display:grid; grid-template-columns:minmax(0,.9fr) 74px minmax(0,1.1fr); align-items:stretch; gap:18px; margin:0 0 32px; }
.mdv3 #benefit .v3-benefit-before, .mdv3 #benefit .v3-benefit-after { border-radius:22px; padding:28px; border:1px solid var(--line); box-shadow:0 18px 48px rgba(10,25,60,.08); }
.mdv3 #benefit .v3-benefit-before { background:linear-gradient(135deg,#fff7f8 0%,#fff 72%); border-color:#f2d3dc; color:#7d3344; }
.mdv3 #benefit .v3-benefit-after { background:linear-gradient(135deg,#eef6ff 0%,#f8fffb 100%); border-color:#bfd8ff; color:#0b3e86; }
.mdv3 #benefit .v3-benefit-before span, .mdv3 #benefit .v3-benefit-after span { display:block; margin-bottom:14px; font-size:12px; line-height:1; font-weight:900; letter-spacing:1.1px; text-transform:uppercase; }
.mdv3 #benefit .v3-benefit-before strong, .mdv3 #benefit .v3-benefit-after strong { display:block; color:var(--ink); font-size:clamp(24px,2.5vw,34px); line-height:1.12; letter-spacing:0; max-width:13ch; }
.mdv3 #benefit .v3-benefit-before p { margin:18px 0 0; max-width:42ch; color:#693b48; font-size:16px; line-height:1.55; }
.mdv3 #benefit .v3-benefit-after ul { list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mdv3 #benefit .v3-benefit-after li { position:relative; padding:12px 12px 12px 36px; border-radius:13px; background:rgba(255,255,255,.74); color:#155f39; font-size:14px; line-height:1.25; font-weight:800; }
.mdv3 #benefit .v3-benefit-after li::before { content:""; position:absolute; left:13px; top:13px; width:14px; height:14px; border-radius:50%; background:#2aa866; box-shadow:inset 0 0 0 4px #dff7e8; }
.mdv3 #benefit .v3-benefit-arrow { align-self:center; justify-self:center; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font-size:11px; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 16px 34px rgba(39,116,255,.28); }
.mdv3 #benefit .gain { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:34px; }
.mdv3 #benefit .gain__i { min-height:0; padding:12px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 34px rgba(10,25,60,.07); display:grid; grid-template-columns:minmax(154px,.38fr) 1fr; grid-template-rows:auto auto 1fr; gap:0 18px; align-items:start; }
.mdv3 #benefit .v3-gain-img { grid-row:1 / span 3; width:100%; height:100%; min-height:190px; object-fit:cover; display:block; border-radius:14px; border:1px solid var(--line); }
.mdv3 #benefit .v3-gain-n { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; margin:6px 0 22px; background:#eef4ff; color:var(--blue); font-size:13px; font-weight:850; }
.mdv3 #benefit .gain__i h3 { font-size:20px; line-height:1.18; margin:0 0 8px; letter-spacing:0; }
.mdv3 #benefit .gain__i p { color:var(--body); font-size:15px; line-height:1.55; margin:0; }
.mdv3 #benefit .tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 16px 44px rgba(10,25,60,.08); }
.mdv3 #benefit table { width:100%; min-width:720px; border-collapse:collapse; }
.mdv3 #benefit th, .mdv3 #benefit td { padding:18px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:15px; line-height:1.45; }
.mdv3 #benefit thead th { font-size:12px; color:#5b6b88; letter-spacing:1.2px; text-transform:uppercase; background:#eef4fb; }
.mdv3 #benefit thead th:nth-child(3) { color:var(--blue); }
.mdv3 #benefit tbody th { color:var(--ink); width:24%; font-weight:800; }
.mdv3 #benefit td:first-of-type { color:#7d3344; background:#fff7f8; }
.mdv3 #benefit td:last-child { color:#155f39; background:#f3fbf6; font-weight:650; }
.mdv3 #benefit tr:last-child th, .mdv3 #benefit tr:last-child td { border-bottom:0; }
.mdv3 #benefit .v3-benefit-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:8px; }
.mdv3 #benefit .v3-compare-col { background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:0 16px 44px rgba(10,25,60,.08); }
.mdv3 #benefit .v3-compare-col h3 { font-size:22px; line-height:1.2; letter-spacing:0; margin:0 0 20px; }
.mdv3 #benefit .v3-compare-col ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.mdv3 #benefit .v3-compare-col li { position:relative; padding:14px 14px 14px 44px; border-radius:14px; font-size:15px; line-height:1.35; font-weight:650; }
.mdv3 #benefit .v3-compare-col li::before { position:absolute; left:14px; top:12px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; }
.mdv3 #benefit .v3-compare-col--bad { background:#fffafa; border-color:#f4d9df; }
.mdv3 #benefit .v3-compare-col--bad h3 { color:#7d3344; }
.mdv3 #benefit .v3-compare-col--bad li { color:#7d3344; background:#fff1f4; }
.mdv3 #benefit .v3-compare-col--bad li::before { content:"!"; color:#fff; background:#c85b73; }
.mdv3 #benefit .v3-compare-col--good { background:#f8fffb; border-color:#cfeeda; }
.mdv3 #benefit .v3-compare-col--good h3 { color:#155f39; }
.mdv3 #benefit .v3-compare-col--good li { color:#155f39; background:#ecfbf2; }
.mdv3 #benefit .v3-compare-col--good li::before { content:"✓"; color:#fff; background:#2aa866; }
.mdv3 #benefit .v3-benefit-close { margin-top:20px; padding:22px 24px; border-radius:18px; background:#0b1b45; color:#dce9ff; font-size:18px; line-height:1.5; font-weight:750; box-shadow:0 18px 44px rgba(10,25,60,.14); }
@media (max-width:980px) {
.mdv3 #benefit .gain { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mdv3 #benefit .v3-benefit-story { grid-template-columns:1fr }
.mdv3 #benefit .v3-benefit-arrow { width:48px;height:48px;margin:-4px 0 }
.mdv3 #benefit .v3-benefit-compare { grid-template-columns:1fr }
}
@media (max-width:560px) {
.mdv3 #benefit { padding:56px 0; }
.mdv3 #benefit .gain { grid-template-columns:1fr }
.mdv3 #benefit .v3-benefit-before, .mdv3 #benefit .v3-benefit-after { padding:22px;border-radius:18px }
.mdv3 #benefit .v3-benefit-after ul { grid-template-columns:1fr }
/* 2026-08-22: flex-direction was missing here, so on a phone the picture, the
   number, the title and the paragraph laid out in a ROW and the card ran off the
   side of the screen. The rest of this breakpoint only makes sense as a column (the
   image gets a 16/9 ratio and a bottom margin), so column is what was meant. Found
   the first time this section was on a real page: it was parked before it ever
   shipped, so nobody had seen it at 500px. */
.mdv3 #benefit .gain__i { display:flex; flex-direction:column; padding:14px 14px 22px }
.mdv3 #benefit .v3-gain-img { min-height:0; aspect-ratio:16 / 9; margin-bottom:18px }
.mdv3 #benefit .v3-gain-n { margin:0 0 16px }
}

/* ============================================================
   why-preview: Khalid's own section CSS, scoped to #why.
   Preview-only page chrome (card width, radius, shadow, page
   background) removed; palette applied to the section, not :root.
   ============================================================ */
.mdv3 #why { --blue:#2774ff; --ink:#0b1220; }
.mdv3 #why { position:relative; overflow:hidden; color:#fff; background:#001b48; }
.mdv3 #why::before { content:""; position:absolute; inset:0; background:var(--v3-whybg) center right / cover no-repeat; }
.mdv3 #why::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, #001b48 0%, #001b48 42%, rgba(0,27,72,.82) 53%, rgba(0,27,72,.16) 67%, rgba(0,27,72,0) 100%), linear-gradient(180deg, rgba(0,27,72,.04), rgba(0,27,72,.14)); }
.mdv3 #why .wrap { width:min(1120px, calc(100% - 42px)); margin:0 auto; }
.mdv3 #why .v3-why-in { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); min-height:680px; }
.mdv3 #why .v3-why-copy { max-width:560px; padding:74px 40px 74px 0; }
.mdv3 #why .eyebrow { color:#4f8dff; display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:850; letter-spacing:1.4px; text-transform:uppercase; margin-bottom:24px; }
.mdv3 #why .eyebrow::before { content:""; width:18px; height:1.5px; background:currentColor; }
.mdv3 #why h2 { color:#fff; margin:0 0 18px; max-width:13ch; font-size:clamp(38px,3.9vw,54px); line-height:1.06; letter-spacing:0; }
.mdv3 #why .v3-why-lede { max-width:39ch; color:#d8e5f8; font-size:17px; line-height:1.58; margin:0 0 24px; }
.mdv3 #why .v3-why-proof { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.mdv3 #why .v3-why-proof span { min-height:0; border-radius:999px; padding:9px 13px; display:inline-flex; flex-direction:row; align-items:baseline; gap:5px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#c7d7f2; font-size:12.5px; line-height:1.2; }
.mdv3 #why .v3-why-proof b { display:inline; color:#fff; font-size:13px; line-height:1.2; margin-bottom:0; }
.mdv3 #why .v3-why-list { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.14); }
.mdv3 #why .v3-why-item { display:grid; grid-template-columns:34px 1fr; gap:0 14px; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.14); border-radius:0; padding:18px 0 20px; box-shadow:none; backdrop-filter:none; }
.mdv3 #why .v3-why-head { display:contents; }
.mdv3 #why .v3-why-head svg { grid-row:1 / span 2; flex:none; width:26px; height:26px; margin-top:1px; stroke:#cfe1ff; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mdv3 #why .v3-why-item h3 { color:#fff; font-size:20px; line-height:1.2; margin:0 0 7px; }
.mdv3 #why .v3-why-item p { color:#c9d8f2; font-size:15.5px; line-height:1.5; margin:0; padding-left:0; }
.mdv3 #why .v3-why-photo { min-height:100%; }
@media (max-width:1100px) {
.mdv3 #why .v3-why-in { grid-template-columns:1fr; min-height:0; }
.mdv3 #why::before { opacity:.2; background-position:center; }
.mdv3 #why::after { background:linear-gradient(150deg, rgba(0,27,72,.96), rgba(10,47,107,.94)); }
.mdv3 #why .v3-why-copy { padding:72px 0; }
.mdv3 #why h2 { max-width:16ch; }
.mdv3 #why .v3-why-photo { min-height:420px; }
}
@media (max-width:560px) {
.mdv3 #why .v3-why-copy { padding:56px 0; }
.mdv3 #why .v3-why-proof { flex-direction:column; align-items:flex-start; }
.mdv3 #why .v3-why-item p { padding-left:0; }
}

/* ============================================================
   reviews-slider-preview: Khalid's testimonial slider CSS, scoped to
   #reviews. The Google wordmark colors and the verified-tick rules are
   left out along with the markup they styled. See the template comment.
   ============================================================ */
.mdv3 #reviews { background:#fff; padding:112px 0 118px }
.mdv3 #reviews .wrap { width:min(1120px, calc(100% - 42px)); margin:0 auto; }
.mdv3 #reviews .v3-rev-head { text-align:center; margin:0 auto 34px; }
.mdv3 #reviews h2 { margin:0 0 66px; color:var(--ink); font-size:clamp(34px,3.4vw,46px); line-height:1.1; letter-spacing:0; }
.mdv3 #reviews .v3-rev-score { text-align:center; }
.mdv3 #reviews .v3-rev-score strong { display:block; color:var(--ink); font-size:20px; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; }
.mdv3 #reviews .v3-stars { color:#f8b400; letter-spacing:1px; font-size:22px; line-height:1; display:inline-block; }
.mdv3 #reviews .v3-star-off { color:#d9dfea; }
.mdv3 #reviews .v3-rev-count { display:block; font-size:14px; color:var(--ink); margin-top:8px; }
.mdv3 #reviews .v3-rev-count b { font-weight:850; }
.mdv3 #reviews .v3-rev-slider { position:relative; margin:34px auto 0; max-width:1080px; }
.mdv3 #reviews .v3-rev-window { overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:0 6px; }
.mdv3 #reviews .v3-rev-window::-webkit-scrollbar { display:none; }
.mdv3 #reviews .v3-rev-track { display:flex; gap:18px; align-items:stretch; }
.mdv3 #reviews .v3-rev { flex:0 0 calc((100% - 36px) / 3); min-height:222px; scroll-snap-align:start; background:#f5f5f6; border:1px solid #eceef2; border-radius:12px; padding:22px 22px 20px; margin:0; }
.mdv3 #reviews .v3-rev-top { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; margin-bottom:12px; }
.mdv3 #reviews .v3-rev-avatar { width:44px; height:44px; border-radius:50%; background:#287233; color:#fff; display:grid; place-items:center; font-weight:850; font-size:20px; }
.mdv3 #reviews .v3-rev-avatar--img { display:block; object-fit:cover; background:#eceef2; }
.mdv3 #reviews .v3-rev-name { font-weight:850; color:var(--ink); line-height:1.2; }
.mdv3 #reviews .v3-rev-role { font-size:13.5px; color:#7b8496; margin:2px 0 0; }
.mdv3 #reviews .v3-rev .v3-stars { font-size:17px; letter-spacing:0; margin:0 0 10px; display:inline-flex; align-items:center; gap:2px; }
.mdv3 #reviews blockquote { margin:0; max-height:92px; font-size:16px; line-height:1.45; color:var(--ink); overflow:hidden; transition:max-height .32s ease; }
.mdv3 #reviews .v3-rev.is-open blockquote { max-height:320px; }
.mdv3 #reviews .v3-rev-more { display:inline-block; margin-top:13px; padding:0; border:0; background:transparent; color:#9098a6; font:inherit; font-size:14px; line-height:1.2; text-decoration:none; font-weight:600; cursor:pointer; }
.mdv3 #reviews .v3-rev-date { font-size:13px; color:#8a93a3; margin:6px 0 0; }
.mdv3 #reviews .v3-rev-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:50%; border:1px solid #e4e7ed; background:#fff; color:var(--ink); display:grid; place-items:center; box-shadow:0 10px 28px rgba(10,25,60,.08); cursor:pointer; }
.mdv3 #reviews .v3-rev-nav svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mdv3 #reviews .v3-rev-nav--prev { left:-18px; }
.mdv3 #reviews .v3-rev-nav--next { right:-18px; }
.mdv3 #reviews .v3-rev-nav[disabled] { opacity:.38; cursor:default; }
@media (max-width:980px) {
.mdv3 #reviews .v3-rev { flex-basis:calc((100% - 18px) / 2); }
.mdv3 #reviews .v3-rev-nav--prev { left:-8px; }
.mdv3 #reviews .v3-rev-nav--next { right:-8px; }
}
@media (max-width:560px) {
.mdv3 #reviews { padding:68px 0 76px }
.mdv3 #reviews h2 { margin-bottom:34px; font-size:34px; }
.mdv3 #reviews .v3-rev-slider { margin-top:28px; }
.mdv3 #reviews .v3-rev { flex-basis:86%; min-height:236px; }
.mdv3 #reviews .v3-rev-nav { display:none; }
}

/* Something in the Elementor stack italicises figcaption. His previews render
   upright because they are standalone pages. */
.mdv3 figcaption, .mdv3 figcaption span, .mdv3 figcaption b { font-style: normal; }

/* ---------- 3b: the mirrored section, picture on the other side ---------- */
.mdv3 .v3-wm-grid--flip .v3-wm-art { order: 2; }
.mdv3 .v3-wm-foot { font-size: 15px; color: var(--body); margin: 0 0 26px; }
.mdv3 #protected .v3-wm-art img { border-radius: 20px; }
@media (max-width: 1100px) { .mdv3 .v3-wm-grid--flip .v3-wm-art { order: 0; } }

/* ---------- lead value calculator in the real cost section ---------- */
.mdv3 #cost .v3-calc {
  margin: 22px 0 4px; padding: 20px 22px; border-radius: 16px;
  background: #f4f8ff; border: 1px solid #d9e6ff;
}
.mdv3 #cost .v3-calc-label {
  margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: #5b6b88;
}
.mdv3 #cost .v3-calc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mdv3 #cost .v3-calc-rows > * { min-width: 0; }
.mdv3 #cost .v3-calc-rows label { display: grid; gap: 7px; }
.mdv3 #cost .v3-calc-rows label > span:first-child { font-size: 13px; color: #58647a; font-weight: 700; }
.mdv3 #cost .v3-calc input {
  width: 100%; font: inherit; font-size: 19px; font-weight: 800; color: #10192f;
  padding: 11px 13px; border-radius: 11px; border: 1px solid #cfe0ff; background: #fff;
  -moz-appearance: textfield;
}
.mdv3 #cost .v3-calc input:focus { outline: 2px solid #2774ff; outline-offset: 1px; }
.mdv3 #cost .v3-calc input::-webkit-outer-spin-button,
.mdv3 #cost .v3-calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mdv3 #cost .v3-calc-money { position: relative; display: block; }
.mdv3 #cost .v3-calc-money i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 17px; font-weight: 800; color: #8895ad;
}
.mdv3 #cost .v3-calc-money input { padding-left: 30px; }
.mdv3 #cost .v3-calc-out {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed #c9dcff;
  display: grid; gap: 4px;
}
.mdv3 #cost .v3-calc-out > span { font-size: 13px; font-weight: 700; color: #5b6b88; }
.mdv3 #cost .v3-calc-out b {
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1; font-weight: 800;
  letter-spacing: -.03em; color: #c2521b; font-variant-numeric: tabular-nums;
}
.mdv3 #cost .v3-calc-out em { font-style: normal; font-size: 13.5px; color: #7d8aa3; }
@media (max-width: 560px) { .mdv3 #cost .v3-calc-rows { grid-template-columns: 1fr; } }

/* Khalid's home-v3 stylesheet styles a generic accordion with a text "+" on
   summary::after, and the FAQ also carries the animated .v3-faq-ico that morphs a
   plus into a minus. Both drew, so the row showed two icons. The text one is
   suppressed inside the FAQ only; any other <details> on the page keeps his. */
.mdv3 .v3-faq summary::after,
.mdv3 .v3-faq details[open] summary::after { content: none; display: none; }

/* ---------- 12. free audit close, from home-v3/index.html ---------- */
.mdv3 #audit { background: linear-gradient(115deg, #001b48 0%, #003691 60%, #0964FC 100%); color: #fff; text-align: center; padding: 96px 0 100px; }
.mdv3 #audit h2 { color: #fff; max-width: 22ch; margin: 0 auto; }
.mdv3 #audit p { color: #d7e3f7; max-width: 62ch; margin: 16px auto 30px; font-size: 17px; line-height: 1.6; }
.mdv3 #audit .eyebrow { color: #9fc3ff; }

/* Sample-content banner, visible only while the demo rows are in place. */
.mdv3 #reviews .v3-rev-demo {
  max-width: 1080px; margin: 0 auto 18px; padding: 10px 16px; border-radius: 10px;
  background: #fff8e6; border: 1px solid #f2dfa8; color: #7a5b00;
  font-size: 13px; font-weight: 700; text-align: center;
}

/* The proof chip was an inline-flex row of three children, so in the narrow left
   column the last one wrapped and stranded "vs." on its own at the end of line one.
   Now a fixed three-row grid: the two sides stacked with the divider between them,
   color-coded so the comparison reads at a glance. */
.mdv3 #cost .v3-cost-proof {
  display: grid; grid-template-columns: 1fr; gap: 8px; align-items: start;
  margin-top: 26px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  max-width: 30ch;
}
.mdv3 #cost .v3-cost-proof span { font-size: 15px; line-height: 1.35; color: #dce9ff; }
.mdv3 #cost .v3-cost-proof span:first-child { color: #fff; font-weight: 700; }
.mdv3 #cost .v3-cost-proof span:last-child { color: #ffc4a3; font-weight: 600; }
.mdv3 #cost .v3-cost-proof b {
  justify-self: start; margin: 2px 0; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}

/* The review cards inherit the 32px-blur .card shadow from part 1, but their scroll
   window is overflow-x:auto with no vertical padding, so the shadow was sliced flat
   along the top and bottom edges. overflow-x:auto also clips vertically, there is no
   way to have one axis scroll and the other visible. Two changes: pad the window so
   the blur has somewhere to live, with a negative margin so the cards stay aligned
   with the heading, and drop the shadow to a soft one that fits inside that padding.
   The negative margin is safe here because .v3-rev-slider has room, unlike the
   failures slider inside a grid column. */
.mdv3 #reviews .v3-rev-window { padding: 14px 16px 20px; margin: -14px -16px -20px; }
.mdv3 #reviews .v3-rev {
  box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 8px 18px rgba(11,18,32,.07);
}

/* ---------- process section, end-of-stack fix ----------
   Two faults met at cards 5 and 6. First, the column had no room left after the
   last card, so the sticky containing block ended while card 6 was still arriving:
   every card un-stuck at once and they separated, which is why card 5 showed as a
   stranded band with only its number visible. Padding at the foot of the column
   extends the containing block, so card 6 pins properly and the photo stays put.
   Second, the cards were not the same height (card 5 is 239px against 214px),
   and a shorter card cannot fully cover a taller one, so the extra 25px peeked out
   above. A shared min-height makes each card cover the one beneath it exactly. */
.mdv3 .v3-proc-col { padding-bottom: 340px; }
.mdv3 .v3-pstep { min-height: 246px; }
@media (max-width: 1100px) {
  .mdv3 .v3-proc-col { padding-bottom: 0; }
  .mdv3 .v3-pstep { min-height: 0; }
}

/* ---------- 3. Revenue Protection: one centered title, two mirrored halves ----------
   Adil: "the title of the two sections will be Website Maintenance is a Revenue
   Protection", then "copy and duplicate these two sections and flip them". So one
   heading over both, centered, and the picture changes sides between the halves. */
.mdv3 #what .v3-rp-head { text-align: center; margin: 0 auto 56px; max-width: 60ch; }
.mdv3 #what .v3-rp-head h2 { margin: 0 auto 14px; max-width: 22ch; }
.mdv3 #what .v3-rp-head .lede { margin: 0 auto; }
.mdv3 #what .v3-rp-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 64px;
}
.mdv3 #what .v3-rp-row > * { min-width: 0; }
.mdv3 #what .v3-rp-row--flip .v3-rp-art { order: 2; }
.mdv3 #what .v3-rp-art img { border-radius: 20px; width: 100%; }
.mdv3 #what .v3-rp-tag {
  display: inline-block; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px;
  background: #eef4ff; color: var(--blue);
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}
.mdv3 #what .v3-rp-copy h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; margin: 0 0 10px; }
.mdv3 #what .v3-rp-copy > p { color: var(--body); font-size: 16.5px; line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.mdv3 #what .v3-rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mdv3 #what .v3-rp-list li { display: flex; gap: 13px; align-items: flex-start; }
.mdv3 #what .v3-rp-list .v3-gt { flex: none; margin-top: 3px; }
.mdv3 #what .v3-rp-list span { font-size: 16px; line-height: 1.5; color: var(--ink); }
.mdv3 #what .v3-rp-cta { justify-content: center; margin-top: 8px; }
@media (max-width: 1100px) {
  .mdv3 #what .v3-rp-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  .mdv3 #what .v3-rp-row--flip .v3-rp-art { order: 0; }
}

/* ============================================================
   2026-08-13: THE REAL COST, presentation pass.
   Khalid named three defects: congested title, unpresentable photograph, and a
   crowded price line. All overrides, appended after the ported preview CSS, so
   deleting this whole block restores the previous look exactly.
   ============================================================ */

/* 1. TITLE. It was max-width:13ch at up to 56px, so a 55-character headline
      broke into five stub lines of two or three words. */
.mdv3 #cost h2 { max-width: 20ch; font-size: clamp(32px, 3.5vw, 50px); line-height: 1.1; }

/* 2. PHOTOGRAPH. The box was 430-520px tall against a 1586x992 source, so
      object-fit:cover kept only the center ~37% of the width and cropped away
      the laptop warning and the pile of bills, which are the point of the
      picture. Give the box the source's own aspect ratio: nothing is cropped. */
.mdv3 #cost .v3-cost-scene { min-height: 0; aspect-ratio: 1586 / 992; }
.mdv3 #cost .v3-cost-scene img { min-height: 0; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* The old overlay stacked two gradients and buried the laptop screen. */
.mdv3 #cost .v3-cost-scene::after { background: linear-gradient(180deg, rgba(7,18,50,0) 58%, rgba(7,18,50,.32)); }

/* 3. STORY CARD. It was absolutely positioned bottom-left, sitting directly on
      top of the laptop and the paperwork. Now it sits under the photograph. */
.mdv3 #cost .v3-cost-story-card { position: static; left: auto; bottom: auto; width: auto; margin: 16px 0 0; background: #fff; backdrop-filter: none; }

/* 4. PRICE COMPARISON. Was one inline-flex run that wrapped mid-phrase, so the
      comparison read as a sentence fragment. Now two labeled cells with a VS
      between them: the layout itself carries the comparison. */
.mdv3 #cost .v3-cost-proof { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; margin-top: 26px; padding: 0; border: 0; background: none; }
.mdv3 #cost .v3-cp-item { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.mdv3 #cost .v3-cp-item--bad { border-color: rgba(255,150,90,.34); background: rgba(255,140,70,.12); }
.mdv3 #cost .v3-cp-cap { display: block; margin-bottom: 7px; color: #a8c4f0; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.mdv3 #cost .v3-cp-item--bad .v3-cp-cap { color: #ffb894; }
.mdv3 #cost .v3-cp-fig { display: block; color: #fff; font-size: 19px; font-weight: 800; line-height: 1.15; }
.mdv3 #cost .v3-cp-fig i { display: block; margin-top: 4px; color: #cfdff8; font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mdv3 #cost .v3-cp-item--bad .v3-cp-fig { color: #ffd9c6; }
.mdv3 #cost .v3-cp-vs { align-self: center; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; }

@media (max-width: 980px) {
.mdv3 #cost h2 { max-width: 24ch; font-size: clamp(30px, 6.4vw, 40px); }
.mdv3 #cost .v3-cost-story-card { margin: 16px 0 0; }
}
@media (max-width: 560px) {
.mdv3 #cost .v3-cost-proof { grid-template-columns: 1fr; }
.mdv3 #cost .v3-cp-vs { justify-self: start; }
}

/* ---- 2026-08-13, second pass on the cost chip, found in a real browser ----
   Both defects were mine and both are lessons already on record.
   a) A grid `1fr` child defaults to min-width:auto, so the two cells collapsed
      to min-content and the text wrapped one word per line.
   b) The ported preview CSS styles a bare `b` inside .v3-cost-proof as a small
      uppercase pill. A type selector outspecifies a plain class, so that rule
      beat .v3-cp-fig and put a pill background behind the figures. */
.mdv3 #cost .v3-cost-proof > * { min-width: 0; }
.mdv3 #cost .v3-cost-proof b.v3-cp-fig { padding: 0; border: 0; border-radius: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 800; line-height: 1.15; }
.mdv3 #cost .v3-cost-proof b.v3-cp-fig i { text-transform: none; letter-spacing: 0; }
/* Title was still breaking to four lines in a 441px column at 50px. */
.mdv3 #cost h2 { font-size: clamp(30px, 3.1vw, 44px); }

/* ---- 2026-08-13, third pass. The chip was capped at max-width:30ch by the
   earlier three-row-grid fix (line ~1035), which computes to 279px and is why
   both cells stayed narrow and every phrase wrapped. Lift the cap and lay each
   side out as caption-then-figure on one row, which fits the 441px column with
   room to spare and keeps the comparison readable. ---- */
.mdv3 #cost .v3-cost-proof { max-width: none; grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
.mdv3 #cost .v3-cp-item { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; }
.mdv3 #cost .v3-cp-cap { margin: 0; }
.mdv3 #cost .v3-cost-proof b.v3-cp-fig i { display: inline; margin: 0 0 0 5px; }
.mdv3 #cost .v3-cp-vs { justify-self: start; margin-left: 4px; }
/* 44px still broke to four lines in the 441px column at 1440. */
.mdv3 #cost h2 { font-size: clamp(30px, 2.9vw, 40px); }
@media (max-width: 560px) {
.mdv3 #cost .v3-cp-item { grid-template-columns: 1fr; gap: 4px; }
.mdv3 #cost .v3-cost-proof b.v3-cp-fig i { display: block; margin: 3px 0 0; }
}

/* ============================================================
   2026-08-13: BUTTON HOVER STATES, and #why at wide viewports.
   Both found by measuring in a real browser: hover states were read by forcing
   the :hover pseudo-class over CDP, not by reading this stylesheet.
   Of 38 interactive elements, 12 hovered to a contrast ratio of 1.0 and 23 had
   no hover change at all.
   ROOT CAUSE of every contrast-1.0 case: the Elementor kit styles `a:hover`
   with its accent blue and post-6.css loads AFTER this file, so any :hover rule
   here that sets only a background loses the text color to the kit, and the
   label paints #0964FC on a #0964FC button. Every rule below therefore sets
   color AND background together, with two classes plus the element so it beats
   the kit on specificity as well as order.
   ============================================================ */

/* Primary CTA. Was #0964FC on #0964FC, contrast 1.0, on 7 buttons including
   every "Get Started With $25/m" and both free-audit CTAs. */
.mdv3 a.btn.btn--p:hover, .mdv3 a.btn.btn--p:focus-visible { background: #0a58db; color: #fff; }
.mdv3 a.btn.btn--p:hover *, .mdv3 a.btn.btn--p:focus-visible * { color: #fff; }

/* Ghost button on the dark sections: the kit turned the label blue against a
   10% white fill. Keep it white and lift the fill instead. */
.mdv3 a.btn.btn--g:hover, .mdv3 a.btn.btn--g:focus-visible { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.5); }
/* The same class also appears on a LIGHT background inside .v3-merge, where
   white-on-white would be the same bug in reverse. */
.mdv3 .v3-merge a.btn.btn--g:hover, .mdv3 .v3-merge a.btn.btn--g:focus-visible { background: #f4f8ff; color: #001b48; border-color: #c9dcff; }

/* Outline and soft buttons had no hover at all. */
.mdv3 a.btn.btn--o:hover, .mdv3 a.btn.btn--o:focus-visible { background: #f4f8ff; color: #0a58db; border-color: #c3d3ee; }
.mdv3 a.btn.btn--soft:hover, .mdv3 a.btn.btn--soft:focus-visible { background: #d7e6ff; color: #0a58db; }

/* Slider arrows. The chevron is drawn with currentColor, and hover turned it
   white on a white button, so the arrow disappeared entirely. */
.mdv3 button.v3-sl-arrow:hover, .mdv3 button.v3-sl-arrow:focus-visible { background: #f4f8ff; border-color: #9ec2ff; color: #0a58db; }
.mdv3 button.v3-sl-arrow:hover::before, .mdv3 button.v3-sl-arrow:focus-visible::before { border-color: #0a58db; }

/* Slider dots had no visible hover: only `color` changed, and a dot has no text. */
.mdv3 button.v3-sl-dot:hover, .mdv3 button.v3-sl-dot:focus-visible { background: #7fa9f5; }
.mdv3 button.v3-sl-dot.is-on:hover, .mdv3 button.v3-sl-dot.is-on:focus-visible { background: #0a58db; }

/* Reviews prev/next and Read more. Disabled arrows must NOT light up. */
.mdv3 button.v3-rev-nav:hover, .mdv3 button.v3-rev-nav:focus-visible { background: #f4f8ff; border-color: #9ec2ff; color: #0a58db; }
.mdv3 button.v3-rev-nav[disabled]:hover { background: #fff; border-color: #e4e7ed; color: #0b1220; }
.mdv3 button.v3-rev-more:hover, .mdv3 button.v3-rev-more:focus-visible { color: #0a58db; text-decoration: underline; }

/* FAQ rows: a hover rule existed already but the kit outspecified it. */
.mdv3 .v3-faq details summary:hover { background: rgba(9,100,252,.14); }

/* Packages info icons. */
.mdv3 a.v3-i:hover, .mdv3 a.v3-i:focus-visible { background: #0964fc; color: #fff; }

/* Elementor's own buttons rendered inside this page had no hover state. */
.mdv3 .elementor-button:hover, .mdv3 .elementor-button:focus-visible { background-color: #0a58db; color: #fff; }

/* ---- #why was congested at wide viewports. Measured at 1920: the copy column
   was 418px (378px of content) against a photograph reading across 1078px, so a
   32-character headline broke to three lines, the lede to three, and the three
   chips to two uneven rows. My earlier sweep stopped at 1440, which is exactly
   why this was missed. ---- */
.mdv3 #why .v3-why-in { grid-template-columns: minmax(0, 52%) minmax(0, 48%); }
.mdv3 #why .v3-why-copy { max-width: 640px; }
/* The chips were inline-flex with gap:5px. In a flex container the bold text and
   the text after it are SEPARATE flex items, so the 5px gap landed before the
   comma and it rendered "Human review , not a script". */
.mdv3 #why .v3-why-proof span { display: inline-block; column-gap: 0; }

/* ---- 2026-08-13, hover follow-up, both found with a REAL dispatched mouse
   hover after CDP forcePseudoState gave unreliable readings. ----
   a) The reviews controls are styled by ID-scoped rules (.mdv3 #reviews
      .v3-rev-nav / .v3-rev-more). An ID beats any number of classes, so the
      class-only hover rules above lost to them and never applied. Same #reviews
      scope needed. This is the third specificity trap in this stylesheet.
   b) The header CTA is an Elementor button OUTSIDE <main class="mdv3">, so no
      .mdv3 selector can reach it. md-v3.css only loads on /home-v3/, so an
      unscoped rule here is still page-scoped. The missing hover on that button
      is SITEWIDE and needs a separate fix in the theme. */
.mdv3 #reviews button.v3-rev-nav:hover, .mdv3 #reviews button.v3-rev-nav:focus-visible { background: #f4f8ff; border-color: #9ec2ff; color: #0a58db; }
.mdv3 #reviews button.v3-rev-nav[disabled]:hover { background: #fff; border-color: #e4e7ed; color: #0b1220; }
.mdv3 #reviews button.v3-rev-more:hover, .mdv3 #reviews button.v3-rev-more:focus-visible { color: #0a58db; text-decoration: underline; }
a.elementor-button:hover, a.elementor-button:focus-visible { background-color: #0a58db; color: #fff; }
/* The header CTA's background comes from Elementor's per-element generated CSS
   (.elementor-element-<id> .elementor-button), which both outspecifies a plain
   class rule AND loads after this stylesheet, so ordinary selectors cannot win.
   !important is confined to the hover state only, so the resting button is
   untouched. The proper sitewide fix is Elementor's own Button > Style > Hover
   on that widget; this only covers /home-v3/, where md-v3.css loads. */
a.elementor-button:hover, a.elementor-button:focus-visible { background-color: #0a58db !important; color: #fff !important; }

/* ============================================================
   2026-08-14: RESPONSIVE, SPACING AND CONTAINER PASS.
   Everything below is an override appended after every earlier block, so
   deleting from this comment to the end of the file restores the previous
   layout exactly. Every value was measured in a real browser at
   1920/1600/1440/1366/1280/1180/1024/900/834/768/640/540/430/390/360/320.
   ============================================================ */

/* ---- 1. CONTAINER. Three sections came from standalone previews that carried
   their own measure: #cost at 1040px and #why / #reviews at 1120px, each using
   width:min(X, 100% - 42px) instead of the site's max-width + 24px padding.
   Two visible faults. On desktop the page had three different content edges
   (140px, 160px and 200px from the viewport at 1440), so the left margin
   stepped in and out while scrolling. Below 1160 those three indented 45px
   against 24px everywhere else, which is the same fault magnified on tablet
   and phone. One measure now, everywhere. ---- */
.mdv3 #cost .wrap,
.mdv3 #why .wrap,
.mdv3 #reviews .wrap,
.mdv3 #benefit .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* The slider inside #reviews carried its own 1080px cap, which put the cards on
   a fourth edge, 16px inside the heading above them. */
.mdv3 #reviews .v3-rev-slider { max-width: none; }

/* ---- 2. VERTICAL RHYTHM. The scale is 88px, 64px at 980 and now 56px at 560.
   Four sections opted out with their own values and no small-screen variant,
   so desktop ran 96/92 (#risk), 76/72 (#cost), 112/118 (#reviews) and 96/100
   (#audit) against 88/88 elsewhere, and at 768 those three sat at up to 118px
   next to neighbours at 64px. ---- */
.mdv3 .v3-merge,
.mdv3 #cost,
.mdv3 #reviews,
.mdv3 #audit { padding-top: 88px; padding-bottom: 88px; }
@media (max-width: 980px) {
  .mdv3 .v3-merge,
  .mdv3 #cost,
  .mdv3 #reviews,
  .mdv3 #audit { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 560px) {
  .mdv3 section,
  .mdv3 .v3-merge,
  .mdv3 #cost,
  .mdv3 #reviews,
  .mdv3 #audit { padding-top: 56px; padding-bottom: 56px; }
}

/* ---- 3. #why NEVER STACKED, AND THE PHOTOGRAPH VANISHED.
   The 52/48 columns added for 1920 were written without a media query, so they
   beat the max-width:1100px stacking rule that comes earlier in the file. The
   section therefore held two columns all the way down: at 768 the right half
   was empty navy (the photograph is the section's own ::before, faded to .2
   below 1100), and at 390 the headline set two words per line in a 200px
   column. The columns are now bounded to the desktop range, and below it the
   copy runs full width with the photograph shown as a real band underneath,
   rather than an empty 420px div. ---- */
@media (max-width: 1100px) {
  .mdv3 #why .v3-why-in { grid-template-columns: 1fr; min-height: 0; }
  .mdv3 #why .v3-why-copy { max-width: none; padding: 64px 0 36px; }
  .mdv3 #why h2 { max-width: 20ch; }
  .mdv3 #why .v3-why-lede { max-width: 62ch; }
  .mdv3 #why .v3-why-photo {
    min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 64px; border-radius: 20px;
    background: #001b48 var(--v3-whybg) no-repeat center / cover;
  }
}
@media (max-width: 560px) {
  .mdv3 #why .v3-why-copy { padding: 56px 0 30px; }
  .mdv3 #why .v3-why-photo { aspect-ratio: 4 / 3; margin-bottom: 56px; }
}

/* ---- 4. #risk NEVER STACKED. .v3-merge-top is a 1.06fr/.94fr grid and was
   left out of every responsive rule, so at 390 the copy column was 145px wide
   ("Your website looks fine." set one word per line) and the failure card was
   134px and clipped by the viewport. It now stacks at the same 980 the rest of
   the page uses. ---- */
@media (max-width: 980px) {
  .mdv3 .v3-merge-top { grid-template-columns: 1fr; gap: 34px; }
  .mdv3 .v3-merge-top h2 { max-width: 24ch; }
  .mdv3 .v3-merge-top .lede { max-width: 64ch; }
}

/* ---- 5. TABLET DEAD ZONE. #pricing, #protect, the upsell strip and the two
   #what rows all dropped to one column at 1100, so a 1024 viewport showed a
   940px-wide pricing card and 976px-wide photographs, and the page grew from
   12,900px to 17,400px. They hold two columns down to 900 instead, which is
   where the columns genuinely stop working. ---- */
@media (min-width: 901px) and (max-width: 1100px) {
  .mdv3 .v3-pkg, .mdv3 .v3-prot { grid-template-columns: 1fr 1fr; }
  .mdv3 .v3-upsell { grid-template-columns: 200px auto 1fr; }
  .mdv3 .v3-upsell img { width: 200px; height: 108px; }
  .mdv3 #what .v3-rp-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mdv3 #what .v3-rp-row--flip .v3-rp-art { order: 2; }
}

/* ---- 6. "Want 3X Protection?" was capped at max-width:8ch = 137px while the
   word Protection? alone needs 146px, so it overflowed its own box. ---- */
.mdv3 .v3-upsell-3x { max-width: 11ch; }
@media (max-width: 900px) { .mdv3 .v3-upsell-3x { max-width: none; } }

/* ---- 7. TOUCH TARGETS. The slider dots are 8x8 and Read more is 71x17, both
   well under the 24px minimum. The dots keep their 8px look and gain an
   invisible 26x30 hit area; Read more gains real padding. ---- */
.mdv3 .v3-sl-dots { gap: 18px; }
.mdv3 .v3-sl-dot { position: relative; }
.mdv3 .v3-sl-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 26px; height: 30px;
}
.mdv3 #reviews button.v3-rev-more { padding: 7px 2px; margin-top: 6px; }

/* ---- 8. FOOTER OVERFLOW. A single Elementor icon-list span is 291px wide in a
   276px column, and it was the sole cause of 5-59px of horizontal page overflow
   between 1180 and 1366 (0 at 1200 and 1440, which is why a two-width check
   misses it). Letting that text wrap removes the overflow. md-v3.css only loads
   on /home-v3/, so this is a page-level fix; the footer content itself is a
   sitewide job. ---- */
.elementor-widget-icon-list .elementor-icon-list-item,
.elementor-widget-icon-list .elementor-icon-list-item > a { min-width: 0; }
.elementor-widget-icon-list .elementor-icon-list-text { overflow-wrap: anywhere; }

/* ---- 9. REVIEWS SLIDER GUTTER. The window carries padding with a matching
   negative margin so the card shadows are not clipped by its own overflow, but
   the horizontal half of that pulled the cards 16px OUTSIDE the container while
   the arrows sit at -18px, so the prev arrow covered the first card's text and
   a fourth card was permanently cut in half at the right edge. The horizontal
   padding becomes a real gutter (no negative margin), which puts the arrows in
   clear space and makes exactly three cards fit the window. Vertical negative
   margins stay: they are what keeps the shadows visible.
   Scroll padding matters as much as padding here: scroll-snap aligns a card to
   the SNAPPORT, which is the padding box unless scroll-padding says otherwise,
   so without it the snap pulls the first card straight back under the arrow and
   the gutter does nothing. Measured at rest, not mid-autoplay. ---- */
.mdv3 #reviews .v3-rev-window { padding: 14px 18px 20px 26px; margin: -14px 0 -20px; scroll-padding-left: 26px; scroll-padding-right: 18px; }
@media (max-width: 560px) {
  .mdv3 #reviews .v3-rev-window { padding: 14px 4px 20px; margin: -14px -4px -20px; scroll-padding-inline: 4px; }
}

/* ---- 10. REVIEWS HEADER on tablet. The head is a flex row on desktop (title
   left, rating right) and stacks below 1100 with align-items:flex-start, but
   the rating block keeps text-align:center from an ID-scoped rule, so it landed
   as a centered block floating in the left third of an otherwise left-aligned
   header. Center the whole header there, which is what it already does on the
   phone. ---- */
@media (max-width: 1100px) {
  .mdv3 #reviews .v3-rev-head { align-items: center; text-align: center; }
  .mdv3 #reviews .v3-rev-score { text-align: center; }
  .mdv3 #reviews h2 { margin-bottom: 30px; }
}

/* ---- 11. #cost column balance. The story card moved out from over the
   photograph in the August 13 pass, which made the right column ~610px against
   ~380px of copy on the left, and grid align-items:start left the difference as
   a void under the price comparison. Centering the two columns closes it. Only
   while the section is actually two columns. ---- */
@media (min-width: 981px) {
  .mdv3 #cost .grid2 { align-items: center; }
}

/* ============================================================
   2026-08-14: FREE AUDIT FORM in #audit, replacing the popup CTA there.
   Dark section, so the fields are translucent white on the navy gradient.
   Delete this block and the markup in template-home-v3.php to go back to the
   button that opened Elementor popup 1494.
   ============================================================ */
.mdv3 #audit .v3-af { max-width: 720px; margin: 34px auto 0; text-align: left; }
.mdv3 #audit .v3-af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mdv3 #audit .v3-af-grid > * { min-width: 0; }
.mdv3 #audit .v3-af-field { display: block; }
.mdv3 #audit .v3-af-lab { display: block; margin-bottom: 7px; color: #cfe0ff; font-size: 13.5px; font-weight: 700; }
.mdv3 #audit .v3-af-lab i { font-style: normal; font-weight: 500; color: rgba(255,255,255,.55); }
/* 16px is deliberate: anything smaller makes iOS Safari zoom the page on focus. */
.mdv3 #audit .v3-af input {
  width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.3;
  color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mdv3 #audit .v3-af input::placeholder { color: rgba(255,255,255,.52); }
.mdv3 #audit .v3-af input:focus {
  outline: none; background: rgba(255,255,255,.15); border-color: #9ec2ff;
  box-shadow: 0 0 0 3px rgba(158,194,255,.26);
}
/* The honeypot is moved off-screen rather than hidden, so a bot that skips
   display:none fields still fills it. */
.mdv3 #audit .v3-af-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mdv3 #audit .v3-af-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }
/* The submit is a <button>, and every hover rule on this page was written for
   a.btn, so the button needed its own. The Elementor kit also styles the bare
   `button` element, which is why border and font are reset explicitly. */
.mdv3 #audit .v3-af button.btn { border: 0; cursor: pointer; font-family: inherit; }
.mdv3 #audit .v3-af button.btn--p:hover, .mdv3 #audit .v3-af button.btn--p:focus-visible { background: #0a58db; color: #fff; }
.mdv3 #audit .v3-af-note { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: rgba(255,255,255,.66); }
.mdv3 #audit .v3-af-err {
  max-width: 720px; margin: 26px auto 0; padding: 13px 18px; border-radius: 12px; text-align: left;
  background: rgba(255,140,70,.14); border: 1px solid rgba(255,150,110,.42); color: #ffd9c6; font-size: 15.5px;
}
.mdv3 #audit .v3-af-ok {
  max-width: 620px; margin: 34px auto 0; padding: 28px 30px; border-radius: 20px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
}
.mdv3 #audit .v3-af-ok strong { display: block; margin-bottom: 10px; font-size: 21px; color: #fff; }
.mdv3 #audit .v3-af-ok p { margin: 0; color: #d8e5f8; font-size: 16px; line-height: 1.6; }
.mdv3 #audit .v3-af-ok-alt { margin-top: 12px !important; font-size: 15px; color: rgba(255,255,255,.72); }
.mdv3 #audit .v3-af-ok-alt a { color: #fff; text-decoration: underline; }
@media (max-width: 680px) {
  .mdv3 #audit .v3-af-grid { grid-template-columns: 1fr; }
  .mdv3 #audit .v3-af-actions { flex-direction: column; }
  .mdv3 #audit .v3-af-actions .btn { width: 100%; justify-content: center; }
}
/* Shown only when wp_mail refuses the message, so the visitor is never told
   "received" for something that was not sent, and still has a way through. */
.mdv3 #audit .v3-af-err-link { display: inline-block; margin-left: 6px; color: #fff; font-weight: 800; text-decoration: underline; }
.mdv3 #audit .v3-af-err-link:hover { color: #ffe6d8; }

/* ---- The form's plan mode (2026-08-14). Clicking a pricing CTA switches the
   audit form into plan mode: the chip confirms what they picked and can undo it,
   and the platform row is one tap rather than another thing to type. Both are
   hidden until a plan CTA is clicked, so the default form is unchanged. ---- */
.mdv3 #audit .v3-af-chip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
  color: #fff; font-size: 14.5px; font-weight: 600; width: fit-content;
}
.mdv3 #audit .v3-af-chip-x {
  border: 0; background: transparent; padding: 4px 2px; color: #bcd6ff;
  font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.mdv3 #audit .v3-af-chip-x:hover, .mdv3 #audit .v3-af-chip-x:focus-visible { color: #fff; background: transparent; }
.mdv3 #audit .v3-af-plat { margin: 18px 0 0; padding: 0; border: 0; }
.mdv3 #audit .v3-af-plat legend { padding: 0; margin-bottom: 9px; color: #cfe0ff; font-size: 13.5px; font-weight: 700; }
.mdv3 #audit .v3-af-plat legend i { font-style: normal; font-weight: 500; color: rgba(255,255,255,.55); }
.mdv3 #audit .v3-af-plat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mdv3 #audit .v3-af-plat label { position: relative; }
/* The radio itself is only hidden from sight: it stays focusable and keyboard
   selectable, and the ring below shows where the focus is. */
.mdv3 #audit .v3-af-plat input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.mdv3 #audit .v3-af-plat span {
  display: block; padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 600;
  color: #dce9ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mdv3 #audit .v3-af-plat input:hover + span { background: rgba(255,255,255,.14); color: #fff; }
.mdv3 #audit .v3-af-plat input:focus-visible + span { border-color: #9ec2ff; box-shadow: 0 0 0 3px rgba(158,194,255,.26); }
.mdv3 #audit .v3-af-plat input:checked + span { background: #fff; border-color: #fff; color: #0a1642; }
.mdv3 #audit .v3-af-ok:focus { outline: none; }

/* ============================================================
   2026-08-14: #audit REDESIGNED. Khalid: "form section not good UI".
   He was right. The fields were translucent white on a bright blue gradient, so
   the placeholders read at poor contrast and the whole block floated with no
   container; the chip was a 999px pill that broke badly when its text wrapped on
   a phone; the copy was centered while the fields were left aligned; and at 1440
   a 720px form sat in a 1160px section with the rest empty.
   Now: two columns from 901px, the argument on the left and the form as a solid
   white card on the right, which is the highest-contrast surface on the page and
   the pattern people expect a form to look like. One action in the card, with
   the phone moved out to the copy column so it stops competing with the submit.
   Everything below overrides the earlier #audit rules by order.
   ============================================================ */
.mdv3 #audit .wrap { text-align: left; }
.mdv3 #audit .v3-af-layout {
  display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.mdv3 #audit .v3-af-layout > * { min-width: 0; }
.mdv3 #audit .v3-af-copy h2 { margin: 0 0 16px; max-width: 15ch; }
.mdv3 #audit .v3-af-copy p { margin: 0; max-width: 46ch; color: #d8e5f8; }
.mdv3 #audit .v3-af-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.mdv3 #audit .v3-af-points li { display: flex; align-items: flex-start; gap: 11px; color: #e6eefc; font-size: 15.5px; line-height: 1.45; }
.mdv3 #audit .v3-af-points svg { flex: none; margin-top: 2px; }
.mdv3 #audit .v3-af-call { margin: 22px 0 0; color: #a8c4f0; font-size: 15px; }
.mdv3 #audit .v3-af-call a { color: #fff; font-weight: 700; text-decoration: underline; }
.mdv3 #audit .v3-af-call a:hover { color: #cfe0ff; background: transparent; }

/* The card. White, because a form is easier to fill in on the most legible
   surface available, and it separates the doing from the arguing. */
.mdv3 #audit .v3-af-card {
  background: #fff; border-radius: 22px; padding: clamp(22px, 2.3vw, 30px);
  box-shadow: 0 30px 70px rgba(2, 12, 40, .34); max-width: none; margin: 0; text-align: left;
}
.mdv3 #audit .v3-af-card .v3-af-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.mdv3 #audit .v3-af-card .v3-af-lab { color: #4a5a75; font-size: 12.5px; letter-spacing: .01em; }
.mdv3 #audit .v3-af-card .v3-af-lab i { color: #8a98b0; }
.mdv3 #audit .v3-af-card input[type="text"],
.mdv3 #audit .v3-af-card input[type="email"],
.mdv3 #audit .v3-af-card input[type="tel"] {
  background: #f5f8fd; border: 1px solid #dde5f2; color: #0a1642;
  padding: 13px 15px; border-radius: 12px; font-size: 16px;
}
.mdv3 #audit .v3-af-card input::placeholder { color: #94a1b8; }
.mdv3 #audit .v3-af-card input:focus {
  background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(9, 100, 252, .16);
}
/* Not a 999px pill: the plan name wraps on a phone and a pill wraps badly. */
.mdv3 #audit .v3-af-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  width: auto; margin: 0 0 16px; padding: 11px 14px; border-radius: 14px;
  background: #eef4ff; border: 1px solid #d6e4ff; color: #0a1642; font-size: 14.5px; font-weight: 700;
}
.mdv3 #audit .v3-af-chip-x { color: var(--blue); font-size: 13.5px; }
.mdv3 #audit .v3-af-chip-x:hover, .mdv3 #audit .v3-af-chip-x:focus-visible { color: #0a58db; background: transparent; }
.mdv3 #audit .v3-af-card .v3-af-plat { margin-top: 16px; }
.mdv3 #audit .v3-af-card .v3-af-plat legend { color: #4a5a75; font-size: 12.5px; }
.mdv3 #audit .v3-af-card .v3-af-plat legend i { color: #8a98b0; }
.mdv3 #audit .v3-af-card .v3-af-plat span {
  background: #f2f6fd; border-color: #dde5f2; color: #33405a; padding: 9px 15px; font-size: 14.5px;
}
.mdv3 #audit .v3-af-card .v3-af-plat input:hover + span { background: #e7eefb; color: #0a1642; }
.mdv3 #audit .v3-af-card .v3-af-plat input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.mdv3 #audit .v3-af-card .v3-af-plat input:focus-visible + span { box-shadow: 0 0 0 3px rgba(9, 100, 252, .18); }
/* One action in the card. The phone lives in the copy column now. */
.mdv3 #audit .v3-af-go { width: 100%; justify-content: center; margin-top: 20px; }
.mdv3 #audit .v3-af-card .v3-af-note { margin: 13px 0 0; text-align: left; color: #7b8496; font-size: 13px; }
.mdv3 #audit .v3-af-err {
  max-width: none; margin: 0 0 14px; background: #fff2ec; border-color: #ffc7ab; color: #8a3310;
}
.mdv3 #audit .v3-af-err-link { color: #0a58db; }
.mdv3 #audit .v3-af-err-link:hover { color: #0a1642; }
/* The confirmation takes the card's place, so it must look like the card. */
.mdv3 #audit .v3-af-ok {
  max-width: none; margin: 0; padding: clamp(24px, 2.4vw, 32px); border-radius: 22px;
  background: #fff; border: 0; box-shadow: 0 30px 70px rgba(2, 12, 40, .34); text-align: left;
}
.mdv3 #audit .v3-af-ok strong { color: #0a1642; font-size: 22px; }
.mdv3 #audit .v3-af-ok p { color: #4a5a75; }
.mdv3 #audit .v3-af-ok-alt { color: #7b8496 !important; }
.mdv3 #audit .v3-af-ok-alt a { color: var(--blue); }

@media (max-width: 900px) {
  .mdv3 #audit .v3-af-layout { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .mdv3 #audit .v3-af-copy h2 { max-width: 20ch; }
}
@media (max-width: 560px) {
  .mdv3 #audit .v3-af-card .v3-af-grid { grid-template-columns: 1fr; }
  .mdv3 #audit .v3-af-card { padding: 20px 18px; border-radius: 18px; }
}
/* Two defects from the redesign, both visible in the first render.
   1. The HTML `hidden` attribute is only a UA `display:none`, so the author
      rule `.v3-af-chip{display:flex}` beat it and the empty plan chip showed in
      audit mode as a blank box with a stray "change" link. Any element this
      stylesheet gives a display to must restate [hidden].
   2. `.mdv3 #audit .v3-af-copy p` carries an extra type selector, so its
      `margin:0` outspecified `.v3-af-call`'s margin-top and the phone line sat
      welded to the last bullet. */
.mdv3 #audit .v3-af-chip[hidden],
.mdv3 #audit .v3-af-plat[hidden] { display: none; }
.mdv3 #audit p.v3-af-call { margin-top: 22px; }

/* ---- 2026-08-14: OUR PROCESS, the sticky stack was breaking at the end.
   Measured, not guessed: every card is `position:sticky; top:120px` inside one
   containing block, so they all release at the same scroll point. With a 72px
   margin between them they released STAGGERED, and card five appeared as a 72px
   band above card six, exactly the fault that was fixed once before and came
   back. Then the whole stack slid off the top while the section still had ~700px
   of scroll left, leaving the pinned photo beside an empty column.
   The margin was the scroll pacing AND the bug. Removing it makes consecutive
   cards flush, so each one covers the last exactly and the release is a single
   solid stack; the card's own 246px height now sets the pacing. The column's
   tail padding drops from 340px to 120px, which is what closes most of the empty
   run at the end. Verified by sweeping the whole section at 120px steps: worst
   end-of-stack offset 0px, and one sampled position without a card instead of
   three. ---- */
.mdv3 .v3-pstep { margin-bottom: 0; }
.mdv3 .v3-proc-col { padding-bottom: 120px; }
@media (max-width: 1100px) {
  /* Below 1100 the cards are static and stacked normally, so they need their
     spacing back. */
  .mdv3 .v3-pstep { margin-bottom: 22px; }
  .mdv3 .v3-pstep:last-child { margin-bottom: 0; }
  .mdv3 .v3-proc-col { padding-bottom: 0; }
}

/* ============================================================
   2026-08-23: /WORK-PROCESS/ READS AS ROWS, NOT AS THE HOMEPAGE'S STACK.
   Khalid, looking at the page: "this page layout not good, proses section will be
   image content will like" the What we do section. So that page renders
   template-parts/section-process-rows.php: one photograph per step, the picture
   changing sides on every row, the same shape as #what.

   THE HOMEPAGE IS UNTOUCHED. These .wm-proc-* rules exist on that page only, and the
   .v3-proc / .v3-pstep rules further up still style the homepage's pinned stack.

   The measurements are deliberately the same as #what (56px column gap, 64px between
   rows, 20px picture radius, 46ch copy) so the two pages look like one site rather
   than like two designs. ------------------------------------ */
.mdv3 .wm-proc-head { text-align: center; margin: 0 auto 56px; max-width: 60ch; }
.mdv3 .wm-proc-head h2 { margin: 0 auto 14px; max-width: 24ch; }
.mdv3 .wm-proc-head .lede { margin: 0 auto; }
.mdv3 .wm-proc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  margin-bottom: 64px;
}
.mdv3 .wm-proc-row > * { min-width: 0; }
.mdv3 .wm-proc-row:last-child { margin-bottom: 0; }
.mdv3 .wm-proc-row--flip .wm-proc-art { order: 2; }
.mdv3 .wm-proc-art img { border-radius: 20px; width: 100%; height: auto; display: block; }
/* The step number sits inside its own pill so the row says which step it is without
   a second heading. The tag reads "1  Step 1 of 6": the numeral is the marker you
   scan, the words are what a screen reader gets. */
.mdv3 .wm-proc-tag {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 14px; padding: 6px 15px 6px 6px; border-radius: 999px;
  background: #eef4ff; color: var(--blue);
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}
.mdv3 .wm-proc-tag b {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 12.5px; letter-spacing: 0;
}
.mdv3 .wm-proc-copy h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; margin: 0 0 10px; }
.mdv3 .wm-proc-copy > p { color: var(--body); font-size: 16.5px; line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.mdv3 .wm-proc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mdv3 .wm-proc-list li { display: flex; gap: 13px; align-items: flex-start; }
.mdv3 .wm-proc-list .v3-gt { flex: none; margin-top: 3px; }
.mdv3 .wm-proc-list span { font-size: 16px; line-height: 1.5; color: var(--ink); }
.mdv3 .wm-proc-rows + .v3-proc-cta { margin-top: 56px; }
@media (max-width: 1100px) {
  .mdv3 .wm-proc-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  /* Picture first on every row once they stack, otherwise the flipped ones would
     read title, list, picture while the others read picture, title, list. */
  .mdv3 .wm-proc-row--flip .wm-proc-art { order: 0; }
}
/* Same exception #what makes: a tablet still holds two columns comfortably, and
   dropping to one there makes the page a great deal longer for no gain. */
@media (min-width: 901px) and (max-width: 1100px) {
  .mdv3 .wm-proc-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mdv3 .wm-proc-row--flip .wm-proc-art { order: 2; }
}
@media (max-width: 560px) {
  .mdv3 .wm-proc-head { margin-bottom: 36px; }
  .mdv3 .wm-proc-row { gap: 24px; margin-bottom: 40px; }
  .mdv3 .wm-proc-copy > p { margin-bottom: 18px; }
  .mdv3 .wm-proc-list { gap: 12px; }
  .mdv3 .wm-proc-list span { font-size: 15.5px; }
}

/* ============================================================
   2026-08-24: /benefits/ CUT BACK TO BENEFITS AND A COMPARISON.
   Khalid: "make the page that what customer will benifited and compare, your layuot
   not good, you used too many content. you know that user not want to read many
   content."

   EVERY RULE IN THIS BLOCK IS SCOPED TO body.wm-secpage-benefits. md-v3.css is loaded
   on the homepage as well and his instruction the same day was "dont tuch the home
   page", so a new rule here must not be able to reach it. The class comes from
   wmco_section_page_head(), and the homepage's body tag does not carry it.

   Nothing was removed from the stylesheet. The `.mdv3 #benefit .gain` sliver grid and
   the `.v3-benefit-story` / `.v3-benefit-compare` rules above are all still here,
   unused, for whenever he wants any of it back.
   ============================================================ */

/* ---- The heading. One, not three ---- */
/* 24ch here was the bug: `ch` resolves against this div's own 16px body font, so
   it came out at 255px and broke the 56px heading to one word a line. The wrapper
   keeps the measure the preview build gave it and the h2 sets its own below. */
.wm-secpage-benefits #benefit .head { max-width: 840px; margin-bottom: 30px; }

/* ---- What the customer gets: four cards, photograph on top ----
   Was a two column grid with the picture as a 154x190 portrait sliver cut out of a
   1448x1086 landscape frame, which halved the faces in all four photographs. At two
   across, each picture is 569px wide and the whole section is half the height of the
   alternating rows that were here for an hour this afternoon. */
.wm-secpage-benefits .wm-ben-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px; margin: 0 0 44px;
}
.wm-secpage-benefits .wm-ben-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e3e9f4; border-radius: 20px;
  box-shadow: 0 14px 36px rgba(10,25,60,.08);
}
.wm-secpage-benefits .wm-ben-card img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.wm-secpage-benefits .wm-ben-card__c { padding: 24px 26px 28px; }
.wm-secpage-benefits .wm-ben-card h3 {
  margin: 0 0 9px; color: #0b1220;
  font-size: clamp(19px, 1.7vw, 22px); line-height: 1.22; letter-spacing: -.01em;
}
.wm-secpage-benefits .wm-ben-card p {
  margin: 0; color: #41506b; font-size: 15.5px; line-height: 1.58;
}

/* ---- The comparison ----
   The table rules it sits on are the ones already in this file under #benefit, from
   Khalid's own preview build: the first column is the row label, the middle cell is
   tinted rose and the last cell green. Only what that block did not anticipate is
   stated here. */
.wm-secpage-benefits .wm-ben-vs { margin: 0; }
/* The first heading cell is empty on screen, so it must not draw a tinted box. */
.wm-secpage-benefits .wm-ben-vs thead th:first-child { background: transparent; }
.wm-secpage-benefits .wm-ben-vs tbody th { white-space: nowrap; }

/* On a phone the table becomes one small card per row. The alternative is a table
   720px wide inside a sideways scroller, and a comparison nobody can see both halves
   of at once is not a comparison. The column headings are hidden and each cell says
   which side it is through data-vs, so the pairing survives the stack. */
/* 820px, not 760px, and the figure is measured rather than picked. The table carries
   min-width:720px, and #benefit's wrap is min(1040px, 100% - 42px) with 24px of padding
   each side, so the table only fits from about 810px up. Between 761 and 809 it was
   inside a sideways scroller: a comparison you cannot see both halves of at once is not
   a comparison, which is the whole reason these rows become cards. Checked at 768, where
   it was 720px wide in a 672px box, and at 820 and 900, where it fits as a table. */
@media (max-width: 820px) {
  .wm-secpage-benefits #benefit .wm-ben-vs {
    overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0;
  }
  .wm-secpage-benefits #benefit .wm-ben-vs table { min-width: 0; display: block; }
  .wm-secpage-benefits #benefit .wm-ben-vs thead { display: none; }
  .wm-secpage-benefits #benefit .wm-ben-vs tbody { display: grid; gap: 14px; }
  .wm-secpage-benefits #benefit .wm-ben-vs tr {
    display: block; background: #fff;
    border: 1px solid #e3e9f4; border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 30px rgba(10,25,60,.07);
  }
  .wm-secpage-benefits #benefit .wm-ben-vs th,
  .wm-secpage-benefits #benefit .wm-ben-vs td { display: block; width: auto; border-bottom: 0; }
  .wm-secpage-benefits #benefit .wm-ben-vs tbody th {
    padding: 13px 18px; background: #eef4fb; color: #0b1220;
    font-size: 12.5px; font-weight: 850; letter-spacing: 1.1px; text-transform: uppercase;
  }
  /* In this breakpoint the wrap loses its border and each row gains one, so a cell
     already starts a pixel in and the inset is the plain figure. `tbody th` has to be
     named: it sets the shorthand padding above and, being one element more specific,
     it beats a rule that only says `th`. Measured at 390px, this is what puts the table
     back in line with the cards and the closing band at 44px. */
  .wm-secpage-benefits #benefit .wm-ben-vs tbody th,
  .wm-secpage-benefits #benefit .wm-ben-vs tbody td { padding-left: var(--ben-box-inset); }
  .wm-secpage-benefits #benefit .wm-ben-vs td { padding-top: 14px; padding-bottom: 16px; font-size: 15.5px; }
  .wm-secpage-benefits #benefit .wm-ben-vs td::before {
    content: attr(data-vs); display: block; margin-bottom: 3px;
    font-size: 11.5px; font-weight: 850; letter-spacing: .9px; text-transform: uppercase;
    opacity: .75;
  }
}
@media (max-width: 900px) {
  .wm-secpage-benefits .wm-ben-cards { gap: 18px; }
}
@media (max-width: 680px) {
  .wm-secpage-benefits .wm-ben-cards { grid-template-columns: 1fr; margin-bottom: 34px; }
  .wm-secpage-benefits .wm-ben-card__c { padding: 20px 22px 24px; }
  .wm-secpage-benefits #benefit .head { margin-bottom: 24px; }
}

/* The section heading carries max-width:15ch from the preview build above, which was
   written for a 56px line in a wider column. With the eyebrow and the paragraph gone
   it broke to one word per line, so this page states its own measure. */
.wm-secpage-benefits #benefit h2 { max-width: 26ch; }

/* Hidden but read aloud. Stated here rather than borrowed from core's
   .screen-reader-text: the table has to survive with only the theme's own CSS. */
.wm-secpage-benefits .wm-ben-vs caption,
.wm-secpage-benefits .wm-ben-vs thead th:first-child span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- What it costs, and how it happens. 2026-08-24 ----
   Khalid: "you have to present how he benifits, how much he lost how, how he he can
   benifited after maintenance etc." The copy and both figures are the homepage's own
   real cost fields, read rather than rewritten.

   Navy, because it is the loss. The closing line at the foot of the page is already a
   navy card, so this and that one bracket the four light benefit cards. */
.wm-secpage-benefits .wm-ben-loss {
  /* ONE TEXT INSET FOR EVERYTHING STACKED IN THIS CARD, 2026-08-24. Khalid: "some
     alignment issue, find it". Measured: the timeline's text started at 228px, the
     bill card's at 229 and the maintenance strip's at 225, because the three had
     22px, 24px and 20px of padding against a 2px, 1px and 1px border. A four pixel
     ragged left edge down the middle of the card.

     Every one of them now works back from this figure, so the text lines up whatever
     the border on the box happens to be, and a new box added here cannot land out of
     line by picking its own padding. */
  --ben-inset: 25px;
  position: relative; overflow: hidden;
  margin: 0 0 40px; padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  border-radius: 22px; color: #dce9ff;
  background:
    radial-gradient(620px 300px at 88% -40%, rgba(9,100,252,.34), transparent 64%),
    linear-gradient(180deg, #0b1b45 0%, #071233 100%);
  box-shadow: 0 22px 54px rgba(10,25,60,.18);
}
.wm-secpage-benefits .wm-ben-loss__tag {
  margin: 0 0 12px; color: #8fb7ff;
  font-size: 12px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase;
}
.wm-secpage-benefits .wm-ben-loss h3 {
  margin: 0 0 24px; max-width: 24ch; color: #fff;
  font-size: clamp(21px, 2.3vw, 31px); line-height: 1.16; letter-spacing: -.015em;
}
/* The copy and the picture, side by side. 2026-08-24: the right half of this card was
   empty, which is what Khalid was pointing at when he asked for an image. */
.wm-secpage-benefits .wm-ben-loss__top {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr);
  gap: clamp(24px, 3vw, 40px); align-items: center; margin-bottom: 28px;
}
.wm-secpage-benefits .wm-ben-loss__art img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 56px rgba(0,0,0,.42);
}
/* The three steps are the "how". A rule down the left ties them into one sequence, so
   they read as one thing happening over six weeks rather than three separate facts. */
.wm-secpage-benefits .wm-ben-loss__steps {
  list-style: none; margin: 0;
  padding: 0 0 0 calc(var(--ben-inset) - 2px);
  border-left: 2px solid rgba(143,183,255,.28);
  display: grid; gap: 14px;
}
.wm-secpage-benefits .wm-ben-loss__steps li { position: relative; }
.wm-secpage-benefits .wm-ben-loss__steps li::before {
  content: ""; position: absolute; left: -28px; top: .42em;
  width: 10px; height: 10px; border-radius: 50%;
  background: #8fb7ff; box-shadow: 0 0 0 4px rgba(143,183,255,.16);
}
/* The last dot is the one the bill follows, so it is the warm one. */
.wm-secpage-benefits .wm-ben-loss__steps li:last-child::before {
  background: #ffab4a; box-shadow: 0 0 0 4px rgba(255,171,74,.18);
}
.wm-secpage-benefits .wm-ben-loss__steps span {
  display: block; margin-bottom: 2px; color: #8fb7ff;
  font-size: 12px; font-weight: 850; letter-spacing: 1.1px; text-transform: uppercase;
}
.wm-secpage-benefits .wm-ben-loss__steps b {
  display: block; color: #fff; font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.4; font-weight: 700;
}
/* The two numbers, side by side, because the comparison is the whole argument. */
.wm-secpage-benefits .wm-ben-loss__sums {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
  margin-bottom: 18px;
}
.wm-secpage-benefits .wm-ben-loss__sum {
  padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}
.wm-secpage-benefits .wm-ben-loss__sum span {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  opacity: .85;
}
.wm-secpage-benefits .wm-ben-loss__sum b {
  display: block; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05;
  letter-spacing: -.02em;
}
.wm-secpage-benefits .wm-ben-loss__sum b i {
  font-style: normal; font-size: 15px; font-weight: 700; opacity: .8;
}
.wm-secpage-benefits .wm-ben-loss__sum--bad { border-color: rgba(255,171,74,.30); }
.wm-secpage-benefits .wm-ben-loss__sum--bad span { color: #ffc98a; }
.wm-secpage-benefits .wm-ben-loss__sum--bad b { color: #ffab4a; }
.wm-secpage-benefits .wm-ben-loss__sum--good { border-color: rgba(90,229,160,.30); }
.wm-secpage-benefits .wm-ben-loss__sum--good span { color: #a9e9c6; }
.wm-secpage-benefits .wm-ben-loss__sum--good b { color: #5ae5a0; }
@media (max-width: 560px) {
  .wm-secpage-benefits .wm-ben-loss { margin-bottom: 30px; border-radius: 18px; }
  .wm-secpage-benefits .wm-ben-loss__sums { grid-template-columns: 1fr; }
}

/* ---- The cost calculator. 2026-08-24, Khalid: "i want cost calculate" ----
   A light panel inside the dark card, which is how the homepage dresses this same
   calculator inside its own dark section. Its CSS could not be reused: every rule for
   it is scoped to `.mdv3 #cost`, so none of it reaches this page.

   The sum is the homepage's, in template-parts/section-benefits.php: inquiries x 1.5
   months x a one in three close rate x what a customer is worth. */
.wm-secpage-benefits .wm-ben-calc {
  padding: 22px calc(var(--ben-inset) - 1px) 24px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.wm-secpage-benefits .wm-ben-calc__label {
  margin: 0 0 16px; color: #0b1220;
  font-size: 13px; font-weight: 850; letter-spacing: .4px;
}
.wm-secpage-benefits .wm-ben-calc__rows {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;
}
.wm-secpage-benefits .wm-ben-calc__rows > * { min-width: 0; }
.wm-secpage-benefits .wm-ben-calc__rows label { display: grid; gap: 7px; }
.wm-secpage-benefits .wm-ben-calc__rows label > span:first-child {
  color: #58647a; font-size: 13px; font-weight: 700;
}
.wm-secpage-benefits .wm-ben-calc input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid #d7e3f7; border-radius: 12px; background: #f9fbff;
  color: #0b1220; font: inherit; font-size: 16px; font-weight: 750;
}
/* 16px above is deliberate: anything smaller and iOS zooms the page when the field is
   focused, which on a phone reads as the layout jumping. */
.wm-secpage-benefits .wm-ben-calc input:focus-visible {
  outline: 3px solid #2774ff; outline-offset: 2px; border-color: #2774ff;
}
.wm-secpage-benefits .wm-ben-calc input::-webkit-outer-spin-button,
.wm-secpage-benefits .wm-ben-calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wm-secpage-benefits .wm-ben-calc__money { position: relative; display: block; }
.wm-secpage-benefits .wm-ben-calc__money i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #7d8aa3; font-style: normal; font-size: 15px; font-weight: 750;
}
.wm-secpage-benefits .wm-ben-calc__money input { padding-left: 32px; }
.wm-secpage-benefits .wm-ben-calc__out {
  padding: 16px 18px; border-radius: 14px;
  background: #fff5ec; border: 1px solid #ffd9b3;
}
.wm-secpage-benefits .wm-ben-calc__out > span {
  display: block; margin-bottom: 4px; color: #9c4317;
  font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.wm-secpage-benefits .wm-ben-calc__out b {
  display: block; color: #c2521b;
  font-size: clamp(28px, 3vw, 38px); line-height: 1.04; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.wm-secpage-benefits .wm-ben-calc__out em {
  display: block; margin-top: 4px; color: #8a6a53; font-style: normal; font-size: 13.5px;
}
@media (max-width: 900px) {
  .wm-secpage-benefits .wm-ben-loss__top { grid-template-columns: 1fr; }
  /* The picture goes first once they stack: it sets the scene the three steps then
     describe, and it stops the card opening on a wall of text on a phone. */
  .wm-secpage-benefits .wm-ben-loss__art { order: -1; }
  .wm-secpage-benefits .wm-ben-loss__art img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .wm-secpage-benefits .wm-ben-calc { padding: 18px calc(var(--ben-inset) - 1px) 20px; border-radius: 15px; }
  .wm-secpage-benefits .wm-ben-calc__rows { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- "It costs you twice", 2026-08-24 ----
   Khalid on the bare $500: "user will not understand, suppose why cose $500, this
   section not present, why cost, how cost loss her buesness".

   A figure with a label and no explanation reads as invented, however real it is. So
   the two costs are named and numbered: one is money that leaves, on a bill, and the
   list under it says what the job consists of. Two is money that never arrives, which
   is the one an owner never sees on a statement, so the calculator lives there and
   answers it in her own numbers. The price we charge is the last line, on its own,
   because it is the answer to both. */
.wm-secpage-benefits .wm-ben-loss__twice {
  margin: 0 0 16px; color: #fff;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2; letter-spacing: -.01em;
}
.wm-secpage-benefits .wm-ben-costs {
  display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: 16px; align-items: start; margin-bottom: 18px;
}
/* The numeral. Small, because it is a signpost and not a heading. */
.wm-secpage-benefits .wm-ben-bill__n,
.wm-secpage-benefits .wm-ben-calc__n {
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 850; letter-spacing: 1.3px; text-transform: uppercase;
}
/* h4 since 2026-08-24, when the card's own "It costs you twice" heading moved out to
   the part header above the card and these two moved up a level with it. Kept as one
   rule so the two costs cannot drift apart. */
.wm-secpage-benefits .wm-ben-bill h3,
.wm-secpage-benefits .wm-ben-calc h3 {
  margin: 0 0 14px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.25; letter-spacing: -.01em;
}

/* Cost one: the bill. */
.wm-secpage-benefits .wm-ben-bill {
  padding: 22px calc(var(--ben-inset) - 1px) 24px; border-radius: 18px;
  background: rgba(255,171,74,.07); border: 1px solid rgba(255,171,74,.30);
}
.wm-secpage-benefits .wm-ben-bill__n { color: #ffc98a; }
.wm-secpage-benefits .wm-ben-bill h3 { color: #fff; }
.wm-secpage-benefits .wm-ben-bill__fig {
  display: block; margin-bottom: 16px; color: #ffab4a;
  font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* What the job is. The part that was missing, so it is a list and not a sentence: three
   things somebody has to do, which is why it costs what it costs. */
.wm-secpage-benefits .wm-ben-bill ul {
  list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px;
}
.wm-secpage-benefits .wm-ben-bill li {
  position: relative; padding-left: 20px; color: #e8f0ff;
  font-size: 15px; line-height: 1.45;
}
.wm-secpage-benefits .wm-ben-bill li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 2px; border-radius: 2px; background: #ffab4a;
}
.wm-secpage-benefits .wm-ben-bill__note {
  margin: 0; color: #bcd0ef; font-size: 14px; line-height: 1.5;
}
.wm-secpage-benefits .wm-ben-bill__months {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,171,74,.24);
  color: #ffc98a; font-size: 14.5px; line-height: 1.45; font-weight: 750;
}

/* Cost two: the calculator, now a named cost rather than a box under the first one. */
/* Same reason as .wm-ben-part__tag: 4.18:1 on the white panel at 11.5px. */
.wm-secpage-benefits .wm-ben-calc__n { color: #1a5fd6; }
/* Stated, not inherited: the panel is white and it sits inside a card whose colour is
   #dce9ff, so without this the heading was very nearly invisible on it. */
.wm-secpage-benefits .wm-ben-calc h3 { color: #0b1220; }

/* The answer to both. */
.wm-secpage-benefits .wm-ben-loss__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 0; padding: 16px calc(var(--ben-inset) - 1px); border-radius: 16px;
  background: rgba(90,229,160,.09); border: 1px solid rgba(90,229,160,.30);
}
.wm-secpage-benefits .wm-ben-loss__price > span {
  color: #a9e9c6;
  font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.wm-secpage-benefits .wm-ben-loss__price > b {
  color: #5ae5a0; font-size: clamp(26px, 2.6vw, 32px); line-height: 1; letter-spacing: -.02em;
}
.wm-secpage-benefits .wm-ben-loss__price > b i {
  font-style: normal; font-size: 15px; font-weight: 700; opacity: .8;
}
.wm-secpage-benefits .wm-ben-loss__price > em {
  flex: 1 1 100%; color: #cfe9db; font-style: normal; font-size: 14.5px; line-height: 1.5;
}
@media (max-width: 1000px) {
  .wm-secpage-benefits .wm-ben-costs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Reset the figure once rather than re-stating a padding on each box. */
  .wm-secpage-benefits .wm-ben-loss { --ben-inset: 19px; }
  .wm-secpage-benefits .wm-ben-bill { padding: 18px calc(var(--ben-inset) - 1px) 20px; border-radius: 15px; }
  .wm-secpage-benefits .wm-ben-loss__price { padding: 14px calc(var(--ben-inset) - 1px); border-radius: 14px; }
}

/* ---- The block titles, 2026-08-24. Khalid: "need title" ----
   The four cards and the table both began with no heading, so the page moved from a
   bill straight into four photographs and then into seven rows with nothing telling the
   reader the subject had changed. Sized between the section H2 and the card titles, so
   the outline is visible in the type as well as in the markup. */
.wm-secpage-benefits .wm-ben-title {
  margin: 0 0 20px; color: #0b1220;
  font-size: clamp(22px, 2.2vw, 29px); line-height: 1.2; letter-spacing: -.015em;
  max-width: 30ch;
}
.wm-secpage-benefits .wm-ben-loss + .wm-ben-title { margin-top: 8px; }
.wm-secpage-benefits .wm-ben-cards + .wm-ben-title { margin-top: 4px; }
@media (max-width: 560px) {
  .wm-secpage-benefits .wm-ben-title { margin-bottom: 16px; }
}

/* ---- The calculator's working, 2026-08-24. Khalid: "you need to work on" this box ----
   Ten inquiries at $500 each looks like $5,000 and the box answered $2,500, because six
   weeks of silence and a one in three close rate were both hidden inside the sum. Both
   are now on screen and both update live, so the total can be checked instead of
   trusted. The two assumptions are the homepage's own, stated in its cost_summary. */
.wm-secpage-benefits .wm-ben-calc__why {
  margin: 0 0 14px; color: #58647a; font-size: 13.5px; line-height: 1.5;
}
.wm-secpage-benefits .wm-ben-work {
  list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px;
}
.wm-secpage-benefits .wm-ben-work li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 14px; border-radius: 12px; background: #f4f8ff; border: 1px solid #e3ecfb;
}
/* Each step is a numeral first, because the numerals are what the eye follows down the
   chain to the total. */
.wm-secpage-benefits .wm-ben-work b {
  flex: none; min-width: 4.6em; color: #0b57d0;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.wm-secpage-benefits .wm-ben-work span {
  color: #41506b; font-size: 14.5px; line-height: 1.45;
}
@media (max-width: 480px) {
  .wm-secpage-benefits .wm-ben-work li { flex-direction: column; gap: 2px; }
  .wm-secpage-benefits .wm-ben-work b { min-width: 0; }
}

/* ---- The seams between the three parts, 2026-08-24 ----
   Khalid: "section 3 part, all part good, but part to part blend not good."

   The fault was structural. Part one carried its eyebrow and heading inside the dark
   card while parts two and three carried theirs outside on the light background, so
   three parts of one argument were dressed three different ways. Every part now opens
   the same way, and the rhythm is stated once here: a bigger gap between parts than
   inside any of them, so the eye can tell a new part from a new row. */
/* CENTRED AND AT THE SIZE THE REST OF THE SITE USES, 2026-08-24. Khalid: "other page
   h2 font size and this page title size not same ... those will be aligne middle on pc".
   Measured on /work-process/ rather than guessed: its section heading renders at 40px,
   weight 800, line height 1.2, letter spacing -0.02em, centred, on a 60ch head with a
   24ch heading and 56px under it. This is that, so the two pages match. */
.wm-secpage-benefits .wm-ben-part {
  max-width: 60ch; margin: 0 auto clamp(28px, 3vw, 40px); text-align: center;
}
.wm-secpage-benefits .wm-ben-part__tag {
  /* #2774ff, the brand blue, comes to 3.92:1 against this section's #f5f8fd at 12px,
     under the 4.5:1 that small text needs. This is the nearest blue to it that passes:
     5.4:1 here and 5.75:1 on white. Measured, not guessed. */
  margin: 0 0 12px; color: #1a5fd6;
  font-size: 12px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase;
}
/* #benefit is in this selector because these are h2 elements since 2026-08-24, and
   `.mdv3 #benefit h2` above sets them to clamp(36px,5vw,56px) with an ID in the
   selector. Without it every section heading renders at the size the removed page
   heading used to be. Also resets that rule's own max-width, which is stated in ch
   against a 56px font and comes out near 960px. */
.wm-secpage-benefits #benefit .wm-ben-part__h {
  /* The same clamp as `.mdv3 h2`, which is what every other section heading on the site
     resolves to. Stated here rather than inherited because `.mdv3 #benefit h2` carries
     an ID and would otherwise win with clamp(36px,5vw,56px). */
  margin: 0 auto 12px; max-width: 24ch; color: #0b1220;
  font-size: clamp(27px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -.02em;
}
/* The handover line. This is the thing that was missing: one sentence carrying the
   reader out of the part before and into this one. */
.wm-secpage-benefits .wm-ben-part__lede {
  margin: 0 auto; max-width: 56ch; color: #41506b;
  font-size: clamp(15.5px, 1.4vw, 17px); line-height: 1.6;
}

/* The rhythm. A part ends, a wider gap, the next part begins. */
.wm-secpage-benefits .wm-ben-loss,
.wm-secpage-benefits .wm-ben-cards { margin-bottom: clamp(46px, 5vw, 68px); }
.wm-secpage-benefits .wm-ben-vs { margin-bottom: 28px; }

/* Part one's card no longer introduces itself, so its first row starts at the top
   rather than under a heading that has moved out of it. */
.wm-secpage-benefits .wm-ben-loss__copy { padding-top: 2px; }
@media (max-width: 560px) {
  .wm-secpage-benefits .wm-ben-part { margin-bottom: 18px; }
  .wm-secpage-benefits .wm-ben-loss,
  .wm-secpage-benefits .wm-ben-cards { margin-bottom: 38px; }
}

/* ---- The calculator, cut back. 2026-08-24: "too much content, present simple clear" ----
   Eight lines became four: the heading, the two inputs, the number, and one line of
   working under it. The "put your own numbers in" label went, since the two inputs are
   labelled; the two lines explaining six weeks went, since the working line says "in six
   weeks"; and the two step boxes went, since one line does the same job.

   The working line stays, and it is not decoration: ten inquiries at $500 reads as
   $5,000 and the answer is $2,500, so without it the number cannot be checked. The rules
   for .wm-ben-calc__label, .wm-ben-calc__why and .wm-ben-work above are left in place,
   unused, in case any of them is wanted back. */
.wm-secpage-benefits .wm-ben-calc__rows { margin-bottom: 16px; }
.wm-secpage-benefits .wm-ben-calc__out em {
  margin-top: 6px; font-size: 14px; line-height: 1.5;
}

/* ---- One text inset for every block on the page, 2026-08-24 ----
   Khalid: "some alignment issue, find it". Two were found by measuring the left edge of
   every block and every box inside them, rather than by looking.

   The first was inside the dark card and is fixed at --ben-inset above: its timeline,
   bill card and price strip started their text at 228, 229 and 225.

   This is the second, one level up. The four benefit cards indented their text 191px
   from the viewport, the comparison table 185 and the closing band 188, because each
   had picked its own padding against its own border. Six pixels of raggedness down the
   left of the page, in three components that sit directly under each other.

   All three now work back from one figure, the same 25px the boxes inside the dark card
   use, so the whole page insets text from its own edge by the same amount. The dark
   card's own text sits deeper on purpose: it is a padded card containing boxes, so its
   contents are nested one level further in. */
.wm-secpage-benefits #benefit { --ben-box-inset: 25px; }
.wm-secpage-benefits .wm-ben-card__c {
  padding: 24px var(--ben-box-inset) 28px;
}
/* The cell sits 1px in from the wrap's own border, so this is measured off the cell. */
.wm-secpage-benefits #benefit .wm-ben-vs th,
.wm-secpage-benefits #benefit .wm-ben-vs td {
  padding-left: var(--ben-box-inset);
  padding-right: var(--ben-box-inset);
}
/* No border on this one, so it carries the extra pixel itself. #benefit is in the
   selector because `.mdv3 #benefit .v3-benefit-close` sets this padding above, and an ID
   beats two classes: without it this rule loses and the band stays 2px out of line. That
   is the third time today the same trap has caught a rule on this page. */
.wm-secpage-benefits #benefit .v3-benefit-close {
  padding-left: calc(var(--ben-box-inset) + 1px);
  padding-right: calc(var(--ben-box-inset) + 1px);
}
@media (max-width: 560px) {
  .wm-secpage-benefits #benefit { --ben-box-inset: 19px; }
}

/* ---- Three sections, 2026-08-24. Khalid: "split ... section to 3 section" ----
   The id stays on a wrapper so every #benefit-scoped rule above keeps matching: the
   table is built entirely out of them, and so is the closing band. The wrapper stops
   painting and stops padding, and each section does both for itself.

   Soft, white, soft. Alternating is what makes three sections read as three rather than
   as one long band with headings in it. */
.wm-secpage-benefits #benefit.wm-ben-group { background: none; padding: 0; }
.wm-secpage-benefits .wm-ben-sec { padding: clamp(52px, 5.5vw, 76px) 0; }
.wm-secpage-benefits .wm-ben-sec--cost { background: #f5f8fd; }
.wm-secpage-benefits .wm-ben-sec--gains { background: #fff; }
.wm-secpage-benefits .wm-ben-sec--compare { background: #f5f8fd; }

/* The gaps that used to separate the parts inside one section are the sections' own
   padding now, so the blocks stop carrying their own. */
.wm-secpage-benefits .wm-ben-sec .wm-ben-loss,
.wm-secpage-benefits .wm-ben-sec .wm-ben-cards { margin-bottom: 0; }

/* ============================================================
   /pricing/ ONLY, 2026-08-24. Khalid: "fix this page".

   The page showed Essential Care as a full card and Comprehensive Care as a thin strip
   with no feature list, next to a photograph taking half the plan area. It is two equal
   cards now, which needed almost no new CSS: .v3-pkg is already a two column grid that
   stacks at 900 and holds two columns from 901 up, and .v3-pkg-card .btn is already
   full width and bottom aligned, so the two buttons cannot disagree the way they did.

   Everything here is scoped to body.wm-secpage-pricing, from wmco_section_page_head().
   md-v3.css is loaded on the homepage too and the homepage's own pricing section still
   renders template-parts/section-pricing.php, so no rule below may reach it.
   ============================================================ */

/* THE UPGRADE CARD IS NAVY, 2026-08-24. Khalid, on the first version: "2 card allmost
   same lauout". He is right and it was my overcorrection. The strip this replaced buried
   Comprehensive Care, so I made the two cards equal, and equal came out identical: two
   white cards with the same seven rows and nothing but a price and a small tag to tell
   them apart. A reader had no signal about which was which.

   So the structure stays identical, which is what makes the two comparable row by row,
   and the skin does the telling apart. Navy is the site's own emphasis colour, used for
   the hero, the real cost card on /benefits/ and every closing band, so the upgrade now
   reads as the premium plan without a word being added to it.

   Essential Care keeps the white card and the blue button, because $25 is the price the
   rest of the site advertises and it must not read as the wrong answer. */
/* Both cards carry a 1px border, the plain one transparent, so the two boxes are the
   same size. Measured without it: the bordered card's button came out 447px against
   449px and sat a pixel lower, because a border on one card only shifts its content
   box. Two prices side by side is exactly where a two pixel difference shows. */
.wm-secpage-pricing .v3-pkg-card { border: 1px solid transparent; }
.wm-secpage-pricing .v3-pkg-card.wm-pkg-card--up {
  position: relative;
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(560px 280px at 88% -30%, rgba(9,100,252,.34), transparent 64%),
    linear-gradient(180deg, #0b1b45 0%, #071233 100%);
  box-shadow: 0 22px 54px rgba(0,27,72,.24);
  color: #dce9ff;
}
/* Every piece of the card that had a colour of its own has to be restated for the dark
   ground, or it keeps the near-black ink the white card gives it. */
.wm-secpage-pricing .wm-pkg-card--up h3 { color: #fff; }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-sub {
  color: #cfdff8; border-bottom-color: rgba(255,255,255,.14);
}
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-price {
  border-bottom-color: rgba(255,255,255,.14);
}
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-price strong { color: #fff; }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-price span { color: #a9c3ea; }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-inc { color: #fff; }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-list li { color: #e8f0ff; }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-list .v3-ck { color: #5ae5a0; }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-badge { border-color: rgba(255,255,255,.28); }
.wm-secpage-pricing .wm-pkg-card--up .v3-pkg-badge svg { stroke: #8fb7ff; }
/* The white button carries a 1px border and the blue one does not, so their boxes were
   2px apart in height and, being bottom aligned, the upgrade's sat 2px higher than its
   opposite number. The blue one gets a transparent border of the same width. Measured:
   this is what takes the last row from a 2px gap to 0. */
.wm-secpage-pricing .v3-pkg-card .btn--p { border: 1px solid transparent; }

/* A white button, not the blue one: blue on navy is the weakest pairing available here,
   and this is the card's primary action. .btn--o is the house white button. */
.wm-secpage-pricing .wm-pkg-card--up .btn--o { border-color: #fff; }
.wm-secpage-pricing .wm-pkg-card--up .btn--o:hover { border-color: #cfe1ff; background: #eff5ff; }
/* OUT OF THE FLOW, and that is the whole point. In the flow it added about 40px to the
   upgrade card only, so its name, price and feature list all sat lower than the other
   card's: measured, the two h3s were 21px apart and the two prices 43px. Two prices side
   by side that do not line up is not a comparison. Absolute, so both cards' rows stay
   level and the tag still reads as a label on this one. */
.wm-secpage-pricing .wm-pkg-tag {
  position: absolute; top: 22px; right: 22px; margin: 0;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(143,183,255,.16); color: #cfe1ff;
  font-size: 11.5px; font-weight: 850; letter-spacing: 1.1px; text-transform: uppercase;
}

/* THE ONE LINE UNDER EACH PLAN NAME RESERVES TWO LINES IN BOTH CARDS. Essential's sub
   is one line and Comprehensive's is two, so without this everything below it sat 23px
   lower in the upgrade card: the two prices, the two What's Included labels and the two
   feature lists all out of step. On a page whose job is comparing $25 against $45, the
   prices have to be on the same line as each other. */
.wm-secpage-pricing .v3-pkg-sub { line-height: 1.5; min-height: calc(3em + 22px); box-sizing: content-box; }

/* ---- THREE PLANS, 2026-08-24. Khalid: "we need a custom plan" ----
   .v3-pkg is a two column grid everywhere in the theme because the homepage puts a card
   next to a photograph in it. This page holds three cards, so it states its own columns
   and its own breakpoints, and only under the pricing page's body class.

   Three across above 900 and one below it. The middle ground was measured rather than
   guessed: at 1000px the wrap is 958px, so three cards come out about 286px each, which
   holds the longest feature line ("1x desktop and mobile experience test per month") in
   three lines without overflowing. Under 900 they stack, which is where the theme's own
   two column rule already gave up.

   Card padding drops from 34px to 26px at three across, because 34px of side padding in
   a 286px card leaves 218px of reading width. */
.wm-secpage-pricing .v3-pkg { align-items: stretch; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.wm-secpage-pricing .v3-pkg-card { padding: 28px 26px 30px; }
/* 1101px, and the figure is measured. Three across, a card is a third of the wrap: 340px
   at 1440 and about 317px at 1100, which leaves 265px inside the padding, and "Get
   Started With $25/m" plus its arrow and the button's own padding needs 261px. At 1000px
   the card is 287px, the inside is 235px, and all three buttons wrapped to two lines at
   83px tall. So three columns hold to 1100 and stack below it, rather than the buttons
   being shrunk to fit a width the layout should not be using. */
@media (max-width: 1100px) {
  .wm-secpage-pricing .v3-pkg { grid-template-columns: 1fr; }
}

/* The price row on the custom card carries a word, not a figure. 40px is right for $45
   and far too big for "Custom", which would then be the loudest thing on the page. */
.wm-secpage-pricing .wm-pkg-price-word { font-size: 30px; letter-spacing: -.02em; }

/* THE PRICE ROW IS ONE LINE ON ALL THREE CARDS. It was two on the custom one, because
   its explanation was set to display:block, and that pushed its included label, its
   feature list and its button 28px below the other two: measured at 521.9 against 493.9.
   Three prices side by side have to sit on one line as each other, so the word stands
   alone and the explaining is done by the button underneath. */

/* .btn--soft carries no border where .btn--p and .btn--o do, so the custom card's button
   was 2px shorter and, bottom aligned, sat 2px lower. Third time this has come up on
   these cards; every button in them now has a 1px border of some colour. */
.wm-secpage-pricing .v3-pkg-card .btn--soft { border: 1px solid transparent; }

/* Third skin, so the three are told apart at a glance: white, navy, and this one
   outlined. It is not dressed to compete with the navy card, because the plan somebody
   can buy today should stay the loudest. */
.wm-secpage-pricing .v3-pkg-card.wm-pkg-card--custom {
  background: #fbfcff; border-color: #d7e3f7; box-shadow: none;
}
@media (max-width: 560px) {
  /* THE BUTTON LABEL WAS WRAPPING TO TWO LINES, 81px tall, on both cards. Measured: the
     card's 34px of side padding leaves 222px inside a 290px card, and "Get Started With
     $25/m" plus its arrow needs about 209px before the button's own 26px of padding
     either side. Narrowing the card's padding on a phone and the button's with it gets
     the label onto one line, and a smaller phone gains 28px of reading width for the
     feature list at the same time. The font size is not touched: shrinking the type on
     the one button that matters is not a fix. */
  .wm-secpage-pricing .v3-pkg { padding: 16px; }
  .wm-secpage-pricing .v3-pkg-card { padding: 26px 20px 28px; }
  .wm-secpage-pricing .v3-pkg-card .btn { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
  /* On a narrow phone the badge and the tag would meet in the middle, so the tag drops
     under the badge and the name moves down to clear it. Both cards get the same extra
     room, so they stay level with each other. */
  /* align-self, because the card is a flex column and a flex child stretches by
     default: inline-block alone left the tag spanning the whole card like a banner. */
  .wm-secpage-pricing .wm-pkg-tag { position: static; display: inline-block; align-self: flex-start; margin: -8px 0 14px; }
}

/* ============================================================
   /why-choose-us/ ONLY, 2026-08-24.

   The page was one navy section carrying three claims that are all on /benefits/ and
   /work-process/ too, with no call to action anywhere inside it. It has three sections
   now: who does the work, what is different, and the proof you keep. Section one is
   Khalid's own build untouched, so nothing below restyles it beyond giving its new
   button row somewhere to sit.

   Scoped to body.wm-secpage-why, from wmco_section_page_head(). md-v3.css loads on the
   homepage too and the homepage still renders template-parts/section-why.php, so no rule
   here may reach it.
   ============================================================ */

/* The button row inside the navy section. The house .v3-proc-cta centres itself, which
   is wrong here: everything in that column is left aligned against the photograph. */
.wm-secpage-why .wm-why-cta { justify-content: flex-start; margin-top: 30px; }

/* The two new sections. Light, so the hero and section one stop being one unbroken
   880px of navy, and alternating so the two read as two. */
.wm-secpage-why .wm-why-sec { padding: clamp(52px, 5.5vw, 76px) 0; }
.wm-secpage-why .wm-why-sec--diff { background: #f5f8fd; }
.wm-secpage-why .wm-why-sec--proof { background: #fff; }
.wm-secpage-why .wm-why-sec .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* One header pattern for both, the same shape /benefits/ ended up with: a small label,
   a heading at the size the rest of the site uses for a section, and one line under it. */
.wm-secpage-why .wm-why-head { max-width: 60ch; margin: 0 auto clamp(28px, 3vw, 40px); text-align: center; }
.wm-secpage-why .wm-why-tag {
  margin: 0 0 12px; color: #1a5fd6;
  font-size: 12px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase;
}
.wm-secpage-why .wm-why-h {
  margin: 0 auto 12px; max-width: 26ch; color: #0b1220;
  font-size: clamp(27px, 3.4vw, 40px); line-height: 1.2; letter-spacing: -.02em;
}
.wm-secpage-why .wm-why-lede2 {
  margin: 0 auto; max-width: 56ch; color: #41506b;
  font-size: clamp(15.5px, 1.4vw, 17px); line-height: 1.6;
}

/* Four differentiators, two by two. Two columns rather than four, because these are
   sentences and not labels: at four across each card would be 260px and every one of
   them would run to five lines. */
.wm-secpage-why .wm-why-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px;
  margin-bottom: 8px;
}
.wm-secpage-why .wm-why-card {
  padding: 26px 28px 28px; border-radius: 20px;
  background: #fff; border: 1px solid #e3e9f4;
  box-shadow: 0 14px 36px rgba(10,25,60,.07);
}
.wm-secpage-why .wm-why-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 11px; background: #eef4ff; color: #1a5fd6;
  font-size: 12.5px; font-weight: 850;
}
.wm-secpage-why .wm-why-card h3 {
  margin: 0 0 9px; color: #0b1220;
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.22; letter-spacing: -.01em;
}
.wm-secpage-why .wm-why-card p { margin: 0; color: #41506b; font-size: 15.5px; line-height: 1.58; }

/* The report, as three ticked lines rather than another grid of cards: three short
   statements do not need a box each. */
.wm-secpage-why .wm-why-keep {
  list-style: none; margin: 0 auto; padding: 24px 26px; max-width: 60ch;
  display: grid; gap: 14px;
  background: #f5f8fd; border: 1px solid #e3e9f4; border-radius: 20px;
}
.wm-secpage-why .wm-why-keep li { display: flex; gap: 13px; align-items: flex-start; }
.wm-secpage-why .wm-why-keep .v3-gt { flex: none; margin-top: 3px; }
.wm-secpage-why .wm-why-keep span { color: #0b1220; font-size: 16px; line-height: 1.5; }
.wm-secpage-why .wm-why-keep + .v3-proc-cta { margin-top: 36px; }

@media (max-width: 860px) {
  .wm-secpage-why .wm-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wm-secpage-why .wm-why-card { padding: 22px 20px 24px; border-radius: 16px; }
  .wm-secpage-why .wm-why-keep { padding: 20px 18px; border-radius: 16px; }
  .wm-secpage-why .wm-why-cta { margin-top: 24px; }
}

/* ============================================================
   /why-choose-us/ RELAID 2026-08-27, so the page keeps to the shape the other
   section pages use. Khalid: "page layout not good. can you make it good, like
   others pages".

   Measured at 1440 before this, against /benefits/ on the same viewport:

     - #why was a FULL BLEED band 1440px wide and 932px tall, sitting directly
       under the navy page header, so the page opened with two unbroken navy
       areas and no edge between them. The photograph ran off the right of the
       screen because the section painted it as its own background. Every other
       section page puts its first block inside the 1112px column instead:
       /benefits/ does exactly this with its dark cost panel.
     - The copy column inside it was 578px of a 1440px screen with the heading,
       the lede and three chips in it, which is why the third chip dropped to a
       row of its own.
     - The report list at the foot was a 638px box holding 150px of content,
       centred in a 1112px column inside a 409px band. Next to the 1112px
       comparison table that closes /benefits/ it read as an unfinished page.

   Nothing here is a copy change and nothing reaches the homepage: every rule is
   scoped to body.wm-secpage-why, and the homepage renders section-why.php while
   this page renders section-why-page.php.
   ============================================================ */

/* ---- 1. The navy block becomes a panel in the column, not a band across the page ---- */
body.wm-secpage-why #why {
  overflow: visible;
  background: #fff;
  padding: clamp(48px, 5vw, 72px) 24px;
}
/* The photograph and its fade were painted on the section itself. They move onto
   the panel below so they stop at its rounded edge. */
body.wm-secpage-why #why::before,
body.wm-secpage-why #why::after { content: none; }

body.wm-secpage-why #why .v3-why-in {
  position: relative; overflow: hidden;
  width: 100%; max-width: 1112px; margin: 0 auto;
  min-height: 0;
  /* 22px and 1112px wide, the same panel /benefits/ opens with. Measured after:
     both are x=164 w=1112, and within two pixels of the same height. */
  border-radius: 22px; background: #001b48;
  box-shadow: 0 24px 60px rgba(10, 25, 60, .16);
}

@media (min-width: 1101px) {
  /* 1.24fr, not the 52% the full bleed version used, and not the 1.16 I tried first:
     that left 531px of readable width and the three chips need 544. They measure 189,
     181 and 158 with 8px between them, and the third was dropping to a row of its own.
     1.24 gives the copy 669px, 589px of it readable, and the photograph still 443. */
  body.wm-secpage-why #why .v3-why-in { grid-template-columns: minmax(0, 1.24fr) minmax(0, .82fr); }
  body.wm-secpage-why #why .v3-why-in::before {
    content: ""; position: absolute; inset: 0;
    background: var(--v3-whybg) center right / cover no-repeat;
  }
  body.wm-secpage-why #why .v3-why-in::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #001b48 0%, #001b48 40%, rgba(0, 27, 72, .86) 52%, rgba(0, 27, 72, .2) 68%, rgba(0, 27, 72, 0) 100%);
  }
  body.wm-secpage-why #why .v3-why-copy {
    position: relative; z-index: 1;
    max-width: none;
    padding: clamp(44px, 3.8vw, 58px) clamp(28px, 2.8vw, 40px);
  }
  body.wm-secpage-why #why .v3-why-photo { position: relative; z-index: 1; min-height: 0; }
}

@media (max-width: 1100px) {
  /* Stacked, which the section already did. The padding moves inside the panel,
     because the copy used to run to the edge of a section that had no edge. */
  body.wm-secpage-why #why { padding: clamp(36px, 5vw, 56px) 20px; }
  body.wm-secpage-why #why .v3-why-copy {
    max-width: none;
    padding: clamp(34px, 4.6vw, 48px) clamp(22px, 3.4vw, 36px) clamp(26px, 3vw, 34px);
  }
  body.wm-secpage-why #why .v3-why-photo {
    margin: 0 clamp(22px, 3.4vw, 36px) clamp(34px, 4.6vw, 48px);
    border-radius: 16px;
  }
}

/* ---- 2. The report you keep, as three columns rather than one narrow box ---- */
body.wm-secpage-why .wm-why-keep {
  max-width: none; padding: 0; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: none; border: 0; border-radius: 0;
}
body.wm-secpage-why .wm-why-keep li {
  padding: 26px 28px 28px; border-radius: 20px;
  background: #f5f8fd; border: 1px solid #e3e9f4;
}

@media (max-width: 860px) {
  body.wm-secpage-why .wm-why-keep { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.wm-secpage-why .wm-why-keep li { padding: 20px 18px 22px; border-radius: 16px; }
}

/* ---- 3. The four "What is different" cards carry a photograph, 2026-08-27 ----
   Khalid: "we need work on What is different use image". This was the only two by
   two card grid on the site with no picture in it, sitting one page away from
   /benefits/, where the same grid gives every card a 16:9 photograph above the copy
   and comes out 545 wide by 444 tall. Same shape here.

   The number badge moves onto the picture instead of sitting above the heading, so
   a card that gained a 306px photograph does not also gain a 48px row. It keeps its
   own solid background, which is what makes it readable over any photograph that is
   ever swapped in. A card with no picture set still renders: the badge falls back to
   its old place above the heading, in the template. */
body.wm-secpage-why .wm-why-card {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
body.wm-secpage-why .wm-why-card__img { position: relative; }
body.wm-secpage-why .wm-why-card__img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
body.wm-secpage-why .wm-why-card__img .wm-why-n {
  position: absolute; top: 14px; left: 14px; margin: 0;
}
body.wm-secpage-why .wm-why-card__c { padding: 22px 28px 26px; }

@media (max-width: 560px) {
  body.wm-secpage-why .wm-why-card { padding: 0; border-radius: 16px; }
  body.wm-secpage-why .wm-why-card__c { padding: 18px 20px 22px; }
  body.wm-secpage-why .wm-why-card__img .wm-why-n { top: 12px; left: 12px; }
}

/* The number chip sits on drawn artwork now, not on a photograph. Over a dark
   photograph the pale blue chip read clearly; over these light illustrations it
   nearly vanished, and on the first card it lands next to the browser window's own
   corner, so a chip with no edge of its own looked like a collision rather than a
   label. White with a real shadow reads as something placed on top, which is what it
   is, and it stays legible whatever picture is swapped in behind it. */
body.wm-secpage-why .wm-why-card__img .wm-why-n {
  background: #fff; color: var(--blue, #0964fc);
  box-shadow: 0 4px 14px rgba(10, 25, 60, .16);
}

/* ---- "Where this came from", added 2026-08-27 on Khalid's "you also add our
   expariance story". It sits between the four claim cards and the report, so the
   backgrounds alternate again: #why is white, the cards are tinted, this is white,
   the report is tinted. Only the report band had to change. ---- */
body.wm-secpage-why .wm-why-sec--exp { background: #fff; }
body.wm-secpage-why .wm-why-sec--proof { background: #f5f8fd; }
body.wm-secpage-why .wm-why-sec--proof .wm-why-keep li { background: #fff; }

/* The story on the left at reading width, the three things it produced on the right.
   1.05fr against .95fr rather than an even split, because two paragraphs need more
   room than three short items and an even split left the prose running short and
   ragged. */
body.wm-secpage-why .wm-why-exp {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 3.4vw, 52px); align-items: start;
}
body.wm-secpage-why .wm-why-exp__story p {
  margin: 0 0 16px; color: #41506b;
  font-size: clamp(15.5px, 1.45vw, 17px); line-height: 1.65;
}
body.wm-secpage-why .wm-why-exp__story p:last-child { margin-bottom: 0; }

body.wm-secpage-why .wm-why-exp__points {
  list-style: none; margin: 0; padding: 26px 28px; display: grid; gap: 22px;
  background: #f5f8fd; border: 1px solid #e3e9f4; border-radius: 20px;
}
body.wm-secpage-why .wm-why-exp__points li { display: flex; gap: 14px; align-items: flex-start; }
body.wm-secpage-why .wm-why-exp__points .v3-gt { flex: none; margin-top: 3px; }
body.wm-secpage-why .wm-why-exp__points h3 {
  margin: 0 0 5px; color: #0b1220;
  font-size: clamp(16px, 1.5vw, 17.5px); line-height: 1.25; letter-spacing: -.01em;
}
body.wm-secpage-why .wm-why-exp__points p { margin: 0; color: #41506b; font-size: 14.5px; line-height: 1.55; }

/* The figures. Hidden entirely until somebody fills them in, so the page cannot
   publish a count nobody has confirmed. */
body.wm-secpage-why .wm-why-stats {
  margin: clamp(30px, 3.2vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
body.wm-secpage-why .wm-why-stats > div {
  padding: 22px 24px; border-radius: 18px;
  background: #f5f8fd; border: 1px solid #e3e9f4; text-align: center;
}
body.wm-secpage-why .wm-why-stats dt {
  color: #0964fc; font-size: clamp(28px, 3.2vw, 38px); font-weight: 900; letter-spacing: -.03em; line-height: 1;
}
body.wm-secpage-why .wm-why-stats dd {
  margin: 9px 0 0; color: #41506b; font-size: 14px; line-height: 1.45;
}

@media (max-width: 860px) {
  body.wm-secpage-why .wm-why-exp { grid-template-columns: 1fr; }
  body.wm-secpage-why .wm-why-stats { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  body.wm-secpage-why .wm-why-exp__points { padding: 22px 20px; border-radius: 16px; }
  body.wm-secpage-why .wm-why-stats > div { padding: 18px 20px; border-radius: 16px; }
}

/* ============================================================
   /why-choose-us/ RESHAPED AROUND ITS PHOTOGRAPHS, 2026-08-27.
   Khalid: "use images , you can chage layout also, i want good page this".

   The two by two card grid wanted four photographs in the house style and there are
   exactly two on this machine, both his own and both previously unused. Rather than
   invent two more, both sections became a feature row: one photograph beside the
   copy, sides alternating down the page, which is what /work-process/ already does.
   The old .wm-why-grid and .wm-why-card rules above are left alone: nothing renders
   them now, and nothing here reaches the homepage.
   ============================================================ */

body.wm-secpage-why .wm-why-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px); align-items: center;
}
/* The story sits on the left and its photograph on the right, so the page reads
   picture, copy, copy, picture down the two sections rather than two rows the same
   way round. order, not a second grid definition, so the markup keeps the picture
   first for anyone reading it with the stylesheet off. */
body.wm-secpage-why .wm-why-feature--flip .wm-why-feature__img { order: 2; }

body.wm-secpage-why .wm-why-feature__img { margin: 0; }
body.wm-secpage-why .wm-why-feature__img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 22px; box-shadow: 0 22px 54px rgba(10, 25, 60, .16);
}

/* The four points, numbered. The number was the one thing carrying order in the old
   grid and a list of four reads better numbered than bulleted. */
body.wm-secpage-why .wm-why-points {
  list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.2vw, 28px);
  counter-reset: none;
}
body.wm-secpage-why .wm-why-points li { display: flex; gap: 16px; align-items: flex-start; }
body.wm-secpage-why .wm-why-points .wm-why-n { margin: 0; flex: none; }
body.wm-secpage-why .wm-why-points h3 {
  margin: 0 0 6px; color: #0b1220;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.24; letter-spacing: -.01em;
}
body.wm-secpage-why .wm-why-points p { margin: 0; color: #41506b; font-size: 15.5px; line-height: 1.58; }

/* The story column, now that it sits beside a picture rather than beside its own
   panel. The ticked list loses the tinted box: the photograph is the weight on that
   row and two filled shapes side by side was one too many. */
body.wm-secpage-why .wm-why-exp__points {
  padding: 20px 0 0; margin: 22px 0 0; gap: 16px;
  background: none; border: 0; border-top: 1px solid #e3e9f4; border-radius: 0;
}

@media (max-width: 900px) {
  body.wm-secpage-why .wm-why-feature { grid-template-columns: 1fr; gap: 28px; }
  /* Stacked, the picture goes back on top in both sections: a photograph under its
     own paragraphs reads as an afterthought. */
  body.wm-secpage-why .wm-why-feature--flip .wm-why-feature__img { order: 0; }
  body.wm-secpage-why .wm-why-feature__img img { aspect-ratio: 16 / 9; border-radius: 18px; }
}

/* ---- "What you keep" is the report now, 2026-08-27. Khalid: "I dont like the
   section layout".

   It was three tinted cards in a row holding one line each. Measured: 357x104 inside
   a 1112 column, so the band was mostly empty, and it sat directly under two sections
   that had just gained a 530px photograph apiece. It read as the leftovers.

   A section about a document should show the document. Composed in markup rather than
   as a picture, the way the cost panel on /benefits/ and the audit card already are:
   the type stays sharp at any size, the copy stays in the fields, and a screen reader
   still gets a real list. Centred, because the two sections above are both split left
   and right and three of those in a row is a pattern with no break in it. ---- */
body.wm-secpage-why .wm-why-report {
  width: 100%; max-width: 840px; margin: 0 auto; overflow: hidden;
  background: #fff; border: 1px solid #e3e9f4; border-radius: 22px;
  box-shadow: 0 26px 62px rgba(10, 25, 60, .15);
}
body.wm-secpage-why .wm-why-report__bar {
  display: flex; align-items: center; gap: 13px;
  padding: 18px clamp(20px, 2.4vw, 28px);
  background: #001b48; color: #fff;
}
body.wm-secpage-why .wm-why-report__bar svg { width: 22px; height: 22px; flex: none; opacity: .85; }
body.wm-secpage-why .wm-why-report__bar b {
  font-size: clamp(15px, 1.4vw, 16.5px); font-weight: 800; letter-spacing: -.01em;
}
body.wm-secpage-why .wm-why-report__chip {
  margin-left: auto; padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #cfe0fa;
  font-size: 11.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  white-space: nowrap;
}
body.wm-secpage-why .wm-why-report__rows {
  list-style: none; margin: 0; padding: 4px clamp(20px, 2.4vw, 28px) 8px;
}
body.wm-secpage-why .wm-why-report__rows li {
  display: flex; gap: 15px; align-items: flex-start;
  padding: clamp(17px, 1.9vw, 22px) 0; border-bottom: 1px solid #eef2f8;
}
body.wm-secpage-why .wm-why-report__rows li:last-child { border-bottom: 0; }
body.wm-secpage-why .wm-why-report__rows .v3-gt { flex: none; width: 21px; height: 21px; margin-top: 1px; }
body.wm-secpage-why .wm-why-report__rows span {
  color: #0b1220; font-size: clamp(15.5px, 1.5vw, 17px); line-height: 1.5;
}
body.wm-secpage-why .wm-why-report + .v3-proc-cta { margin-top: clamp(30px, 3.2vw, 42px); }

@media (max-width: 560px) {
  body.wm-secpage-why .wm-why-report { border-radius: 18px; }
  body.wm-secpage-why .wm-why-report__bar { gap: 10px; padding: 15px 18px; }
  body.wm-secpage-why .wm-why-report__chip { padding: 6px 10px; font-size: 10.5px; }
}