/* ============================================================================
   Car Claims Check: brand skin v1 (2026-10-12; hero v2 + homepage polish the same day; 1.4.0 2026-10-16: the
   final-submit wait line, the one-time-code box, the declaration block; 1.4.1 the same day: legal tables that do
   not fit become cards, the mobile-number error border, the /mo key-facts table at 320-379px; 1.5.0 2026-10-19:
   the Car Claims Check wordmark, which is wider than the first one, gets its own widths). Mobile-first. Plain CSS.
   Look: red / black / white, Poppins display + Mulish body (self-hosted, SIL OFL 1.1),
   black strap lines, soft white cards, even corners with a red top edge on the form and CTA cards.
   Layout follows the agreed reference design (docs/discovery); the identity (wordmark, icons, car) is our own.

   CONTRACTS this file keeps:
   - every --mpc-* custom property NAME is defined below and aliased to the --msp-* tokens,
     because the /mo stylesheet (mo.css) and the inline chrome styles read them (change values, never names);
   - the #gform_wrapper_1 / #gform_wrapper_2 machinery (house form 1 + /mo form 2);
   - the legacy .mpc-hero / .mpc-form-card / .mpc-legal classes still used by /mo and old bodies.
   New markup uses the .msp-* vocabulary in docs/COMPONENTS.md.
   Fonts live in ./fonts/ next to this file. On every change bump the ?ver in the msp-custom
   wp_enqueue_style call (security-hardening.php; cmp_remove_version_query() keeps it) or the
   FILENAME, then purge Cloudflare and compare the served BYTES (M-N13).
   ========================================================================== */

@font-face { font-family: "Mulish"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/mulish-latin-300-900.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-latin-800.woff2") format("woff2"); }

:root {
    /* ---- colour (contrast-checked) ---- */
    --msp-red:        #EF2E31;   /* button backgrounds (20px bold = large text, 4.11:1), stars, rules, big accent words */
    --msp-red-ink:    #D42027;   /* red TEXT under 19px bold / 24px, small red UI (5.2:1 on white) */
    --msp-red-deep:   #B3141B;   /* small red text on tinted or shadowed grounds (6.9:1 on white) */
    --msp-black:      #000000;
    --msp-ink:        #000000;   /* body text */
    --msp-ink-2:      #1A1A1A;   /* long-form legal text */
    --msp-muted:      #4A4A4A;   /* secondary text (8.9:1) */
    --msp-white:      #FFFFFF;
    --msp-surface:    #FFFFFF;
    --msp-tint:       #FFF8F8;   /* steps section, step bands, CTA cards (near-white warm tint) */
    --msp-tint-strong:#FDECEC;   /* hover fills, selected rows */
    --msp-border-soft:rgba(17, 17, 17, .09);   /* hairline edges on white chips */
    --msp-hover-dark: #231F20;   /* button hover */
    --msp-rule:       #EEEEEE;
    --msp-line:       #E2E2E2;   /* dividers */
    --msp-field:      #8C8C8C;   /* form control borders (3.4:1, WCAG 1.4.11) */
    --msp-zebra:      #FEF7F7;   /* legal table rows */
    --msp-overlay:    rgba(0, 0, 0, .5);
    --msp-focus:      #D42027;
    --msp-success:    #1C7C4A;

    /* ---- type ---- */
    --msp-font:    "Mulish", "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    --msp-display: "Poppins", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --msp-fs-hero:     clamp(2.125rem, 1.1rem + 3.4vw, 3.75rem);    /* 34px @390 -> 60px */
    --msp-fs-hero-sub: clamp(1.0625rem, .98rem + .45vw, 1.3125rem); /* 17 -> 21 */
    --msp-fs-h2:       clamp(1.625rem, 1.486rem + .5714vw, 2rem);   /* 26 -> 32 */
    --msp-fs-h2-split: clamp(1.375rem, 1.1rem + 1vw, 2rem);         /* 22 -> 32 */
    --msp-fs-cta:      clamp(1.625rem, 1.393rem + .9524vw, 2.25rem);/* 26 -> 36 */
    --msp-fs-letter:   clamp(1.125rem, .9857rem + .5714vw, 1.5rem); /* 18 -> 24 */
    --msp-fs-tagline:  clamp(1rem, .9rem + .4vw, 1.125rem);         /* 16 -> 18 */
    --msp-fs-strap:    clamp(.875rem, .72rem + .62vw, 1.25rem);     /* 14 -> 20 (never below 14) */
    --msp-fs-btn:      20px;     /* keep >= 19px bold so white-on-red counts as large text */

    /* ---- layout ---- */
    --msp-container: 1140px;
    --msp-gutter:    20px;
    --msp-header-h:  65px;
    --msp-col-main:  59.3%;
    --msp-col-side:  40.7%;
    --msp-col-form:  clamp(380px, 32vw, 430px);   /* the hero form card column (>= 960px) */

    /* ---- shape ---- */
    --msp-radius-btn:  5px;
    --msp-radius-card: 15px;
    --msp-radius-media:25px;
    --msp-radius-band: 25px 25px 0 0;
    --msp-radius-cta:  30px 150px 30px 30px;   /* the big curve, top-right (desktop) */
    --msp-radius-cta-m:150px 30px 30px 30px;   /* mobile: curve moves top-left */
    --msp-radius-form: 20px;                   /* the hero form card and the CTA side card: even corners */
    --msp-shadow-card: -5px 5px 10px 0 rgba(0, 0, 0, .2);   /* falls to the LEFT */
    --msp-shadow-soft: -5px 5px 10px 0 rgba(0, 0, 0, .1);
    --msp-shadow-head: 0 1px 3px 0 rgba(0, 0, 0, .12);
    --msp-shadow-lift: 0 30px 60px -30px rgba(17, 17, 17, .38), 0 12px 26px -14px rgba(17, 17, 17, .14);
    --msp-shadow-chip: 0 1px 2px rgba(17, 17, 17, .05), 0 6px 16px -8px rgba(122, 20, 24, .28);

    /* ---- motion ---- */
    --msp-t: .25s;

    /* ---- the --mpc-* contract (names read by mo.css and inline chrome): values only ---- */
    --mpc-plum:          var(--msp-red-ink);   /* primary: small red text, pills, checked states */
    --mpc-plum-deep:     var(--msp-black);     /* dark text / dark surfaces */
    --mpc-plum-tint:     var(--msp-tint-strong);
    --mpc-purple2:       var(--msp-hover-dark);
    --mpc-yellow:        var(--msp-red);
    --mpc-lime:          var(--msp-red);
    --mpc-blue:          var(--msp-red-ink);
    --mpc-green:         var(--msp-success);
    --mpc-green-ink:     var(--msp-white);
    --mpc-cream:         var(--msp-white);     /* page background */
    --mpc-cream-deep:    var(--msp-line);
    --mpc-surface:       var(--msp-surface);
    --mpc-sky:           var(--msp-black);     /* footer */
    --mpc-ink:           var(--msp-ink);
    --mpc-ink-2:         var(--msp-ink-2);
    --mpc-muted:         var(--msp-muted);
    --mpc-muted-soft:    var(--msp-muted);
    --mpc-line:          var(--msp-line);
    --mpc-line-cool:     var(--msp-field);
    --mpc-white:         var(--msp-white);
    --mpc-emerald:       var(--msp-red-ink);
    --mpc-emerald-bright:var(--msp-red);
    --mpc-emerald-ink:   var(--msp-black);
    --mpc-emerald-bg:    var(--msp-tint);
    --mpc-charcoal:      var(--msp-black);
    --mpc-charcoal-deep: var(--msp-black);
    --mpc-charcoal-ink:  var(--msp-black);
    --mpc-gold:          var(--msp-red);
    --mpc-font:          var(--msp-font);
    --mpc-display:       var(--msp-display);
    --mpc-radius-card:   var(--msp-radius-card);
    --mpc-shadow-card:   var(--msp-shadow-card);
    --mpc-shadow-btn:    none;

    /* ---- WordPress presets (theme.json) pinned to the brand so editor colours match ---- */
    --wp--preset--color--primary:               var(--msp-red);
    --wp--preset--color--secaccent:             var(--msp-black);
    --wp--preset--color--secondary-accent-text: var(--msp-black);
    --wp--preset--color--accent:                var(--msp-black);
    --wp--preset--color--secondary:             var(--msp-tint);
    --wp--preset--color--accent-text:           var(--msp-white);
    --wp--preset--color--secondary-accent:      var(--msp-tint-strong);
    --wp--preset--color--hover:                 var(--msp-red-ink);
    --wp--preset--color--heading:               var(--msp-black);
    /* our sections own their gutters; the theme's 15px root padding would leave white edges
       beside every full-bleed black band */
    --wp--style--root--padding-left:  0px;
    --wp--style--root--padding-right: 0px;
}
@media (min-width: 960px) { :root { --msp-header-h: 96px; } }
/* ---- icons: CSS-only, so page bodies carry no <svg> (kses-proof) ---- */
:root {
  --msp-ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.6l2.85 5.9 6.45.85-4.72 4.48 1.2 6.4L12 17.1l-5.78 3.13 1.2-6.4L2.7 9.35l6.45-.85z'/%3E%3C/svg%3E");
  --msp-ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7.5a5 5 0 0 1 10 0V10h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2zm2.5 0h5V7.5a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E");
  --msp-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 8l4 4-4 4M8 12h8'/%3E%3C/svg%3E");
  --msp-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --msp-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
  --msp-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
  --msp-ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --msp-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --msp-step-details: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='38' height='28' rx='4' stroke='%23111111'/%3E%3Ccircle cx='17' cy='21' r='4.5' stroke='%23111111'/%3E%3Cpath d='M10.5 32c1.2-3.6 3.6-5.2 6.5-5.2s5.3 1.6 6.5 5.2' stroke='%23111111'/%3E%3Cpath d='M28 19h9M28 25h9' stroke='%23111111'/%3E%3Cpath d='M28 31h6' stroke='%23EF2E31'/%3E%3C/svg%3E");
  --msp-step-sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 5H11a3 3 0 0 0-3 3v32a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V20' stroke='%23111111'/%3E%3Cpath d='M14 13h12M14 19h9' stroke='%23111111'/%3E%3Cpath d='M13 33c2.5-4 4.2-4.6 5-2.4.8 2.2 2 2.6 4.2-.6 1.6-2.4 3-2.6 4.8.4' stroke='%23EF2E31'/%3E%3Cpath d='M38.5 6.5l3 3L29 22l-4.2 1.2L26 19z' stroke='%23111111' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --msp-step-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='5' width='24' height='32' rx='3' stroke='%23111111'/%3E%3Cpath d='M14 13h12M14 19h12M14 25h6' stroke='%23111111'/%3E%3Ccircle cx='32' cy='32' r='7' stroke='%23EF2E31' fill='%23FFFFFF'/%3E%3Cpath d='M37 37l6 6' stroke='%23EF2E31'/%3E%3C/svg%3E");
  --msp-step-progress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 42h36' stroke='%23111111'/%3E%3Cpath d='M11 42V31M20 42V24M29 42V18M38 42V10' stroke='%23111111'/%3E%3Cpath d='M8 23l11-9 8 5 13-12' stroke='%23EF2E31'/%3E%3Cpath d='M33 7h7v7' stroke='%23EF2E31'/%3E%3C/svg%3E");
  --msp-step-complaint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='32' height='24' rx='3' stroke='%23111111'/%3E%3Cpath d='M5 9l15 11 15-11' stroke='%23111111'/%3E%3Cpath d='M26 40h17M38 35l5 5-5 5' stroke='%23EF2E31'/%3E%3C/svg%3E");
  --msp-step-scheme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L24 7l18 11' stroke='%23EF2E31'/%3E%3Cpath d='M8 42h32M10 38h28M12 22v12M20 22v12M28 22v12M36 22v12' stroke='%23111111'/%3E%3C/svg%3E");
  /* our own side-on hatchback (build/assets/car-hatch.svg): white, a red swoosh, no livery */
  --msp-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 330'%3E%3Cdefs%3E%3ClinearGradient id='pb' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.40' stop-color='%23F6F7F9'/%3E%3Cstop offset='.66' stop-color='%23E6E9ED'/%3E%3Cstop offset='1' stop-color='%23C4CAD2'/%3E%3C/linearGradient%3E%3ClinearGradient id='pg' x1='0' y1='0' x2='.3' y2='1'%3E%3Cstop offset='0' stop-color='%235A6571'/%3E%3Cstop offset='.5' stop-color='%23252A31'/%3E%3Cstop offset='1' stop-color='%2313161A'/%3E%3C/linearGradient%3E%3ClinearGradient id='ps' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.09'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23FFFFFF' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='pd' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.34'/%3E%3Cstop offset='.65' stop-color='%23000' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='pr' cx='.42' cy='.36' r='.7'%3E%3Cstop offset='0' stop-color='%23F6F7F9'/%3E%3Cstop offset='.6' stop-color='%23C9CED5'/%3E%3Cstop offset='1' stop-color='%238B939D'/%3E%3C/radialGradient%3E%3Cg id='wh'%3E%3Ccircle r='58' fill='%2316181B'/%3E%3Ccircle r='54' fill='none' stroke='%232B2E33' stroke-width='3'/%3E%3Ccircle r='43' fill='url(%23pr)'/%3E%3Ccircle r='34' fill='%232C3138'/%3E%3Cg fill='url(%23pr)'%3E%3Cpath d='M-5 -41 L5 -41 L3.2 -10 L-3.2 -10 Z'/%3E%3Cpath d='M-5 -41 L5 -41 L3.2 -10 L-3.2 -10 Z' transform='rotate(72)'/%3E%3Cpath d='M-5 -41 L5 -41 L3.2 -10 L-3.2 -10 Z' transform='rotate(144)'/%3E%3Cpath d='M-5 -41 L5 -41 L3.2 -10 L-3.2 -10 Z' transform='rotate(216)'/%3E%3Cpath d='M-5 -41 L5 -41 L3.2 -10 L-3.2 -10 Z' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='43' fill='none' stroke='%23727A84' stroke-width='2'/%3E%3Ccircle r='10.5' fill='%233A4048' stroke='%23A3AAB2' stroke-width='2'/%3E%3C/g%3E%3C/defs%3E%3Cellipse cx='400' cy='300' rx='372' ry='17' fill='url(%23pd)'/%3E%3Cpath d='M95.6 280 A68 68 0 1 1 208.4 280 Z' fill='%231A1D21'/%3E%3Cpath d='M563.6 280 A68 68 0 1 1 676.4 280 Z' fill='%231A1D21'/%3E%3Cuse href='%23wh' x='152' y='242'/%3E%3Cuse href='%23wh' x='620' y='242'/%3E%3Cpath d='M60 282 Q42 280 40 262 L40 206 Q40 192 46 186 L50 162 Q53 146 60 134 L92 88 Q110 66 150 62 C246 52 352 52 420 57 C468 64 522 100 570 133 C622 141 676 150 712 162 C740 171 754 188 756 208 L758 250 Q758 272 740 278 L676.4 280 A68 68 0 1 0 563.6 280 L208.4 280 A68 68 0 1 0 95.6 280 Z' fill='url(%23pb)' stroke='%2323272D' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M214 226 L560 232 L563.6 280 L208.4 280 Z' fill='url(%23ps)'/%3E%3Cpath d='M230 196 C330 198 460 202 556 206 L556 212 C460 208 330 204 230 202 Z' fill='url(%23pl)'/%3E%3Cpath d='M208.4 280 L563.6 280 L561 270 L211 268 Z' fill='%2330353C'/%3E%3Cpath d='M538 133 C508 106 474 80 426 70 C340 62 248 64 190 70 C156 74 134 96 126 120 Z' fill='url(%23pg)'/%3E%3Cpath d='M262 65 L298 64 L250 125 L232 124 Z' fill='%23FFFFFF' opacity='.10'/%3E%3Cpath d='M410 67 L442 74 L398 130 L366 129 Z' fill='%23FFFFFF' opacity='.10'/%3E%3Cpath d='M340 62 L354 62 L354 130 L340 130 Z' fill='%2315181C'/%3E%3Cpath d='M206 68 L216 68 L226 123 L216 123 Z' fill='%2315181C'/%3E%3Cpath d='M124 120 L540 134' stroke='%2323272D' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M64 156 C240 158 480 164 708 172' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M72 162 C240 164 480 172 704 180' stroke='%23AEB5BE' stroke-width='1.5' stroke-linecap='round' opacity='.7' fill='none'/%3E%3Cpath d='M546 137 C550 182 556 228 558 266' stroke='%2323272D' stroke-width='2' opacity='.32' fill='none'/%3E%3Cpath d='M347 132 L345 266' stroke='%2323272D' stroke-width='2' opacity='.32'/%3E%3Cpath d='M222 125 C230 150 236 176 236 204' stroke='%2323272D' stroke-width='2' opacity='.32' fill='none'/%3E%3Crect x='288' y='144' width='34' height='7' rx='3.5' fill='%233A4048'/%3E%3Crect x='486' y='150' width='34' height='7' rx='3.5' fill='%233A4048'/%3E%3Cpath d='M238 225.6 C340 236.2 462 241.6 536 240.2 A3.6 3.6 0 0 1 536 247.4 C462 248.2 338 242.8 238 229.4 A1.9 1.9 0 0 1 238 225.6 Z' fill='%23EF2E31'/%3E%3Cpath d='M526 127 Q540 113 562 119 L566 137 Q546 141 530 139 Z' fill='%23F2F4F6' stroke='%2323272D' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M532 135 L564 133' stroke='%2323272D' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M686 158 C710 162 734 171 746 183 L748 193 C726 191 702 185 682 175 Z' fill='%23DCE4EC' stroke='%2323272D' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M692 166 C712 170 730 177 740 185' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3Cpath d='M716 238 L756 236 L757 250 L720 252 Z' fill='%231B1E22'/%3E%3Cpath d='M700 268 L756 262 Q754 274 740 278 L688 279 Z' fill='%2330353C'/%3E%3Cpath d='M46 150 L74 146 Q70 162 66 174 L44 180 Z' fill='%23E0262A' stroke='%2323272D' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M50 156 L68 153' stroke='%23FF8A8C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M41 256 L97 256 Q99 270 97 280 L60 282 Q43 280 41 266 Z' fill='%2330353C'/%3E%3Cpath d='M42 232 L92 230' stroke='%23AEB5BE' stroke-width='1.5' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M112 70 L168 60' stroke='%231B1E22' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --msp-car-ratio: 800 / 330;
}

/* ============================================================================
   BASE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--msp-header-h) + 12px); }
body { margin: 0; font-family: var(--msp-font); font-size: 16px; line-height: 1.7; color: var(--msp-ink); background: var(--msp-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, button, input, select, textarea { font-family: var(--msp-font); }
/* the theme's post-content wrapper carries has-roboto-font-family (!important) */
body .wp-block-post-content.has-roboto-font-family, body .wp-site-blocks .has-roboto-font-family { font-family: var(--msp-font) !important; }
[class^="msp-"], [class*=" msp-"], [class^="msp-"]::before, [class*=" msp-"]::before, [class^="msp-"]::after, [class*=" msp-"]::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
/* our sections own their vertical rhythm: cancel the block-gap margins WP adds between them */
body .wp-block-post-content > *, body .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* the block theme's own header, footer, page-title cover and featured image: our chrome replaces them */
.wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > footer.wp-block-template-part,
.mpc-theme-header-hidden, .wp-block-post-title, .wp-block-post-featured-image,
.wp-block-cover:has(.wp-block-post-title),
.ast-header-sticked, #ast-desktop-header, header.site-header, .site-footer, footer.site-footer, #colophon { display: none !important; }
.site-content, #content, .entry-content { margin-top: 0 !important; }
/* fallbacks for the stock page template (until theme/patterns/template-page.php is deployed): the post
   content must run full width, and the stock nested <main> adds a bottom gap above the footer */
body .wp-site-blocks .wp-block-post-content { max-width: none !important; }
body .wp-site-blocks > main main.wp-block-group { padding-bottom: 0 !important; }
.wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; }

/* focus: one visible ring everywhere (beats the redress plugin's !important purple ring) */
html body a:focus-visible, html body button:focus-visible, html body input:focus-visible,
html body select:focus-visible, html body textarea:focus-visible, html body summary:focus-visible,
html body [tabindex]:focus-visible {
    outline: 3px solid var(--msp-focus) !important; outline-offset: 3px !important;
}
.msp-section--dark :focus-visible, .msp-lenders :focus-visible, .msp-footer :focus-visible,
.msp-band :focus-visible, .msp-strap :focus-visible, .mpc-cookie :focus-visible { outline-color: #FFFFFF !important; }
.msp-content-anchor { display: block; height: 0; outline: 0 !important; }

/* ---- utilities ---- */
.msp-wrap { width: 100%; max-width: calc(var(--msp-container) + 2 * var(--msp-gutter)); margin-inline: auto; padding-inline: var(--msp-gutter); }
.msp-wrap--narrow { max-width: calc(860px + 2 * var(--msp-gutter)); }
.msp-accent { color: var(--msp-red); }             /* large text only (>= 24px, or 19px bold) */
.msp-accent-ink { color: var(--msp-red-ink); }     /* small red text */
.msp-center { text-align: center; }
.msp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.msp-confirm { background: #FFF1A8; color: #000; font-weight: 700; padding: 0 4px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---- icons (CSS masks: take currentColor; markup is <span class="msp-i msp-i--star" aria-hidden="true"></span>) ---- */
.msp-i { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em; background-color: currentColor; -webkit-mask: var(--msp-i) center / contain no-repeat; mask: var(--msp-i) center / contain no-repeat; }
.msp-i--star { --msp-i: var(--msp-ico-star); }
.msp-i--lock { --msp-i: var(--msp-ico-lock); }
.msp-i--arrow { --msp-i: var(--msp-ico-arrow); }
.msp-i--chevron { --msp-i: var(--msp-ico-chevron); }
.msp-i--mail { --msp-i: var(--msp-ico-mail); }
.msp-i--info { --msp-i: var(--msp-ico-info); }
.msp-i--doc { --msp-i: var(--msp-ico-doc); }
.msp-i--plus { --msp-i: var(--msp-ico-plus); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.msp-btn, a.msp-btn, button.msp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 12px 26px; margin: 0;
    border: 0; border-radius: var(--msp-radius-btn);
    background: var(--msp-red); color: #FFFFFF !important;
    font: 700 var(--msp-fs-btn)/1.15 var(--msp-font); letter-spacing: 0; text-align: center;
    text-decoration: none !important; cursor: pointer;
    transition: background-color var(--msp-t) ease, transform var(--msp-t) ease;
}
.msp-btn:hover, .msp-btn:focus-visible { background: var(--msp-hover-dark); color: #FFFFFF !important; }
.msp-btn .msp-i { width: 20px; height: 20px; }
.msp-btn--block { display: flex; width: 100%; }
.msp-btn--wide { min-width: min(100%, 320px); }
/* variants are .msp-btn.msp-btn--x (0,2,0): `a.msp-btn` (0,1,1) used to out-rank them, so every
   <a class="msp-btn msp-btn--outline"> rendered as the plain red button */
.msp-btn.msp-btn--dark { background: var(--msp-black); }
.msp-btn.msp-btn--dark:hover, .msp-btn.msp-btn--dark:focus-visible { background: var(--msp-red-ink); }
.msp-btn.msp-btn--outline { background: transparent; color: var(--msp-black) !important; box-shadow: inset 0 0 0 2px var(--msp-black); }
.msp-btn.msp-btn--outline:hover, .msp-btn.msp-btn--outline:focus-visible { background: var(--msp-black); color: #FFFFFF !important; }
.msp-btn.msp-btn--light { background: #FFFFFF; color: var(--msp-black) !important; }
.msp-btn.msp-btn--light:hover, .msp-btn.msp-btn--light:focus-visible { background: var(--msp-red); color: #FFFFFF !important; }
.msp-btn--pulse { animation: msp-pulse 1.8s ease-in-out infinite; }
.msp-btn--pulse[aria-expanded="true"] { animation: none; }
@keyframes msp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.msp-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; }
.msp-cta-row--left { justify-content: flex-start; }

/* ============================================================================
   CHROME: skip link, compliance band, header, nav, drawer
   ========================================================================== */
.msp-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #FFFFFF; color: #000000; padding: 10px 14px; border: 2px solid #000000; border-radius: 5px; font-weight: 700; text-decoration: none; }
.msp-skip:focus { left: 8px; }

.msp-band { background: var(--msp-black); color: #FFFFFF; font-size: 14px; line-height: 1.45; text-align: center; padding: 8px var(--msp-gutter); }
.msp-band p { max-width: 1180px; margin: 0 auto; text-wrap: balance; }
@media (max-width: 767px) { .msp-band { text-align: left; line-height: 1.4; padding-inline: 14px; } }
.msp-band a { color: #FFFFFF; }

.msp-header { position: sticky; top: 0; z-index: 200; background: #FFFFFF; box-shadow: var(--msp-shadow-head); }
.msp-header__inner { max-width: calc(var(--msp-container) + 2 * var(--msp-gutter)); margin: 0 auto; padding: 0 var(--msp-gutter); min-height: var(--msp-header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.msp-logo { display: inline-flex; align-items: center; color: var(--msp-black); line-height: 0; text-decoration: none !important; flex: none; }
.msp-logo__svg { display: block; width: min(208px, calc(100vw - 2 * var(--msp-gutter) - 64px)); height: auto; }   /* 1.5.0: wordmark viewBox 357.47 x 41.27 (was 279.69); 208px fits 320px beside the burger (48px + 16px gap); below 320px it shrinks so a 280px screen does not scroll sideways */
.msp-logo--light { color: #FFFFFF; }
.msp-nav { display: none; }
.msp-burger, .msp-drawer__close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 42px; padding: 0; margin: 0;
    background: #FFFFFF; color: #000000; border: 1.5px solid #000000; border-radius: 4px; cursor: pointer;
}
.msp-burger:hover, .msp-drawer__close:hover { background: var(--msp-black); color: #FFFFFF; }
@media (min-width: 960px) {
    .msp-logo__svg { width: 232px; }
    .msp-burger { display: none; }
    .msp-nav { display: block; }
    .msp-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
    .msp-nav li { margin: 0; }
    .msp-nav a { display: block; padding: 8px 0 6px; border-bottom: 2px solid transparent; color: var(--msp-black); font: 700 15px/1.3 var(--msp-font); text-decoration: none; white-space: nowrap; }
    .msp-nav a:hover { color: var(--msp-red-ink); }
    .msp-nav a[aria-current="page"] { color: var(--msp-red-ink); border-bottom-color: var(--msp-red); }
}
@media (min-width: 1200px) {
    .msp-logo__svg { width: 276px; }
    .msp-nav ul { gap: 4px 26px; }
    .msp-nav a { font-size: 17px; }
}

.msp-drawer-backdrop { position: fixed; inset: 0; z-index: 300; background: var(--msp-overlay); opacity: 0; transition: opacity .3s ease; }
.msp-drawer-backdrop[hidden] { display: none; }
body.msp-drawer-open .msp-drawer-backdrop { opacity: 1; }
body.msp-drawer-open { overflow: hidden; }
.msp-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 310;
    width: min(330px, 88vw); padding: 14px 20px 24px;
    display: flex; flex-direction: column; text-align: center;
    background: #FFFFFF; box-shadow: 4px 0 30px rgba(0, 0, 0, .2);
    overflow-x: hidden; overflow-y: auto;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
}
body.msp-drawer-open .msp-drawer { transform: none; visibility: visible; }
.msp-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--msp-line); }
.msp-drawer__head .msp-logo__svg { width: min(176px, calc(88vw - 100px)); }   /* drawer padding 40px + close 48px + gap 12px */
.msp-drawer nav ul { list-style: none; margin: 14px 0 18px; padding: 0; }
.msp-drawer nav li { margin: 0; }
.msp-drawer nav a { display: block; padding: 11px 8px; color: var(--msp-black); font: 700 17px/1.3 var(--msp-font); text-decoration: none; }
.msp-drawer nav a:hover { color: var(--msp-red-ink); }
.msp-drawer nav a[aria-current="page"] { color: var(--msp-red-ink); }
.msp-drawer__small { margin: auto 0 0; padding-top: 24px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--msp-muted); }

/* ============================================================================
   FOOTER (black)
   ========================================================================== */
.msp-footer { background: var(--msp-black); color: #FFFFFF; font-size: 15px; line-height: 1.6; border-top: 4px solid var(--msp-red); }
.msp-footer a { color: #FFFFFF; text-decoration: none; }
.msp-footer a:hover { color: var(--msp-red); }
.msp-footer__inner { max-width: calc(var(--msp-container) + 2 * var(--msp-gutter)); margin: 0 auto; padding: 44px var(--msp-gutter) 18px; }
.msp-footer__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "company legal" "contact contact"; gap: 30px 20px; }
.msp-footer__brand { grid-area: brand; }
.msp-footer__brand .msp-logo__svg { width: min(252px, calc(100vw - 2 * var(--msp-gutter))); }
.msp-footer__col--company { grid-area: company; }
.msp-footer__col--legal { grid-area: legal; }
.msp-footer__col--contact { grid-area: contact; }
.msp-footer .msp-footer__heading { margin: 0 0 14px; color: #FFFFFF; font: 800 17px/1.3 var(--msp-font); letter-spacing: 0; }
.msp-footer__col ul { list-style: none; margin: 0; padding: 0; }
.msp-footer__col li { margin: 0; }
.msp-footer__col li + li { margin-top: 9px; }
.msp-footer__col a[aria-current="page"] { color: var(--msp-red); }
.msp-footer__email { display: inline-block; font-weight: 800; font-size: clamp(15px, 4.6vw, 17px); white-space: nowrap; }
.msp-at { color: var(--msp-red); font-weight: 900; }
.msp-footer__legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); }
.msp-footer__legal p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, .86); }
.msp-footer__legal p.msp-footer__statutory { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.msp-footer__legal a { text-decoration: underline; text-underline-offset: 2px; }
.msp-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 12.5px; color: rgba(255, 255, 255, .86); }
.msp-footer__bottom a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 960px) {
    .msp-footer__inner { padding-top: 64px; }
    .msp-footer__top { grid-template-columns: 1.35fr 1fr 1fr 1fr; grid-template-areas: "brand company legal contact"; align-items: start; gap: 30px; }
    .msp-footer__brand .msp-logo__svg { width: 300px; max-width: 100%; }
    .msp-footer__legal { margin-top: 48px; }
    .msp-footer__legal p { max-width: 1000px; margin-inline: auto; text-align: center; }
    .msp-footer__bottom { justify-content: center; }
}

/* ============================================================================
   HOME: HERO v2 (2026-10-12; operator: "make it visually better as the example site"),
   revised the same day after the hero QA (docs/qa/hero-2026-10-12/QA.md, fixes in .../fix/).
   An eyebrow with the exact FCA scheme period, a two-line headline, our own drawn car and
   house form 1 in the card.
   - Phones (<768px): copy, then the card with the car parked in its header beside a
     two-line title (QA M3: the car no longer costs a screen band above the card), then
     how-it-works, facts and fees.
   - Tablets (768-959px): one centred column, the car parked on the card's red top edge.
   - Wide screens (>=960px): copy, car, facts and fees left; the card right. The car is
     capped and parked on a level red road that runs in from the left edge and fades out
     before the card (QA L8: no line behind the card, no car floating over a slope).
   The car in the hero reverses C23 at the operator's request of 2026-10-12. All imagery is
   CSS (no <svg> in the page body). The soft glows are background layers of .msp-hero,
   anchored from the TOP: a background never counts as a layout shift, and content that
   streams in below cannot move them (QA M1: the old bottom-anchored pseudo-element did).
   ========================================================================== */
.msp-hero {
    --msp-hero-gap: clamp(36px, 4.2vw, 60px);
    --msp-car-w: clamp(118px, 37vw, 200px);                 /* phones: the car in the card header */
    --msp-car-h: calc(var(--msp-car-w) * .4125);            /* the drawing is 800 x 330 */
    --msp-card-top: 26px;                                    /* the card's 6px top edge + 20px padding */
    --msp-ft: clamp(1.5rem, 1.32rem + .7vw, 1.875rem);      /* the card title's size (as .msp-formcard__title) */
    position: relative; overflow: hidden; isolation: isolate; padding: 8px 0 40px;
    background:
        radial-gradient(circle 330px at calc(100% - 30px) 490px, rgba(239, 46, 49, .12), rgba(239, 46, 49, .04) 55%, rgba(239, 46, 49, 0)),
        radial-gradient(circle 360px at 40px 1560px, rgba(255, 106, 77, .15), rgba(255, 106, 77, .05) 60%, rgba(255, 106, 77, 0)),
        #FFFFFF;
}
.msp-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form" "more"; }
/* the soft red glow behind the card (a grid item sharing the card's area; its top never moves) */
.msp-hero__inner::after { content: ""; grid-area: form; z-index: 0; align-self: stretch; margin: -24px -48px; pointer-events: none; background: radial-gradient(closest-side, rgba(239, 46, 49, .14), rgba(239, 46, 49, .05) 60%, rgba(239, 46, 49, 0)); }
/* the road: only on wide screens (below 960px the card's red top edge, or the card itself, is the ground) */
.msp-hero__road { display: none; }

.msp-hero__copy { grid-area: copy; z-index: 1; min-width: 0; margin-bottom: 14px; }
.msp-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 10px; padding: 3px 12px 3px 3px; background: #FFFFFF; border: 1px solid var(--msp-border-soft); border-radius: 99px; box-shadow: var(--msp-shadow-chip); color: var(--msp-ink-2); font: 700 13px/1.3 var(--msp-font); }
.msp-hero__tag { flex: none; padding: 4px 9px; border-radius: 99px; background: var(--msp-red-ink); color: #FFFFFF; font: 800 11.5px/1.15 var(--msp-font); letter-spacing: .06em; white-space: nowrap; }   /* white on #D42027 = 5.2:1 */
.msp-hero__tag-phone { display: none; }
.msp-hero__period { min-width: 0; }
.msp-hero__title { margin: 0; color: var(--msp-black); font: 800 var(--msp-fs-hero)/1.04 var(--msp-display); letter-spacing: -.02em; text-wrap: balance; }
.msp-hero__sub { margin: 10px 0 0; max-width: 32em; color: var(--msp-ink-2); font-size: var(--msp-fs-hero-sub); line-height: 1.45; text-wrap: balance; }

/* the car (phones): parked in the card's top-right corner, beside the two-line card title. The drawing
   sits on ::after; ::before is a short level road under the tyres (tyres touch at 300/330 = 90.9%). */
.msp-hero__art {
    grid-area: form; z-index: 3; position: relative; align-self: start; justify-self: end; pointer-events: none;
    width: var(--msp-car-w); aspect-ratio: var(--msp-car-ratio);
    margin: calc(var(--msp-card-top) + var(--msp-ft) * 2 - var(--msp-car-h) * .909) 16px 0 0;   /* tyres level with the title's 2nd line */
}
.msp-hero__art::after { content: ""; position: absolute; inset: 0; background: var(--msp-car) center bottom / contain no-repeat; }
.msp-hero__art::before { content: ""; position: absolute; left: -10%; right: -8%; top: calc(90.9% - 1px); height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(239, 46, 49, 0), var(--msp-red) 22%, var(--msp-red) 80%, rgba(239, 46, 49, 0)); }
.msp-hero .msp-formcard { grid-area: form; z-index: 2; }
/* room for the car beside the title, which always takes two lines here ("Check my" / "car finance") */
.msp-hero .msp-formcard__title { padding-right: calc(var(--msp-car-w) + 4px); font-size: var(--msp-ft); }
.msp-hero .msp-formcard__title .msp-accent { display: block; }

/* under the card: how it works (phones and tablets), three plain facts, the fee line */
.msp-hero__more { grid-area: more; z-index: 1; min-width: 0; margin-top: 28px; }
.msp-hero__how { margin: 0 0 24px; }
.msp-hero__label { margin: 0 0 12px; color: var(--msp-red-deep); font: 800 12px/1.2 var(--msp-font); letter-spacing: .12em; text-transform: uppercase; }
.msp-hero__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.msp-hero__steps li { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; color: var(--msp-ink-2); font: 700 15px/1.3 var(--msp-font); }
.msp-hero__steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; height: 10px; border-left: 2px dashed rgba(212, 32, 39, .45); }
.msp-hero__num { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--msp-red-ink); color: #FFFFFF; font: 800 13px/1 var(--msp-font); }
/* facts: a quiet unboxed row (no ticks or shields, C16) */
.msp-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--msp-line); }
.msp-fact { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 2px 14px; align-items: baseline; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--msp-line); }
.msp-fact__big { color: var(--msp-black); font: 700 16px/1.25 var(--msp-display); letter-spacing: -.005em; }
.msp-fact__text { color: var(--msp-muted); font-size: 14.5px; line-height: 1.45; }
.msp-hero__fees { margin: 18px 0 0; max-width: 46em; color: var(--msp-ink-2); font-size: 14px; line-height: 1.6; }
.msp-hero__fees strong { color: var(--msp-black); font-weight: 800; }
.msp-hero__fees a { color: var(--msp-black); font-weight: 800; text-decoration: underline; text-decoration-color: var(--msp-red); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.msp-hero__fees a:hover { color: var(--msp-red-ink); }

@media (max-width: 559.98px) {
    .msp-hero__eyebrow { margin-bottom: 8px; }
    .msp-hero__sub { margin-top: 8px; font-size: 16px; text-wrap: pretty; }
    .msp-hero .msp-formcard__lede { margin-bottom: 12px; }
    /* one line on a phone, still labelled (QA I1): the tag reads "FCA scheme" in place of "PCP & HP", so
       the dates never stand unexplained; the full "FCA scheme period:" stays in the accessibility tree */
    .msp-hero__tag-wide { display: none; }
    .msp-hero__tag-phone { display: inline; }
    .msp-hero__tag { letter-spacing: .02em; }
    .msp-hero__period-label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@media (max-width: 380px) {   /* the card's padding is 18px 14px 14px here */
    .msp-hero { --msp-card-top: 24px; }
    .msp-hero__art { margin-right: 12px; }
}
@media (max-width: 374.98px) {
    .msp-hero__eyebrow { gap: 5px; padding-right: 8px; font-size: 12px; }
    .msp-hero__tag { padding-inline: 6px; font-size: 10.5px; letter-spacing: 0; }
}
@media (max-width: 359.98px) {
    .msp-hero { --msp-ft: 1.3125rem; }                       /* the card title is 21px here */
    .msp-hero__eyebrow { font-size: 11.5px; }
    .msp-hero__title { font-size: 30px; }
}
@media (min-width: 560px) {
    .msp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
    .msp-fact { display: flex; flex-direction: column; gap: 4px; padding: 2px 18px; border-bottom: 0; border-left: 1px solid var(--msp-line); }
    .msp-fact:first-child { padding-left: 0; border-left: 0; }
    .msp-fact__big::before { content: ""; display: block; width: 24px; height: 3px; margin: 0 0 10px; border-radius: 2px; background: var(--msp-red); }
}
@media (min-width: 768px) {
    .msp-hero { padding: 30px 0 56px; }
    .msp-hero .msp-formcard { padding: 28px 30px 24px; }
}
/* tablets: one centred column, the car parked on the centred card's red top edge (the edge is the road) */
@media (min-width: 768px) and (max-width: 959.98px) {
    .msp-hero__inner { grid-template-areas: "copy" "art" "form" "more"; }
    .msp-hero__copy { margin-bottom: 0; text-align: center; }
    .msp-hero__title { max-width: 13em; margin-inline: auto; }
    .msp-hero__sub { margin-inline: auto; }
    .msp-hero__art { grid-area: art; justify-self: center; width: 340px; margin: 4px 0 -15px; }
    .msp-hero__art::before { display: none; }
    .msp-hero .msp-formcard__title { padding-right: 0; }
    .msp-hero .msp-formcard__title .msp-accent { display: inline; }
    .msp-hero .msp-formcard, .msp-hero__more { justify-self: center; width: 100%; max-width: 640px; }
    .msp-hero__inner::after { justify-self: center; width: 100%; max-width: 760px; }
}
/* wide screens: copy, car, facts and fees left; the card right */
@media (min-width: 960px) {
    .msp-hero {
        --msp-car-w: min(100%, 520px);                       /* capped: the facts and the fee line stay above the fold */
        --msp-art-lift: 22px;                                /* the drawing's empty top 16% tucks under the copy */
        padding: 34px 0 56px;
        background:
            radial-gradient(circle 500px at calc(100% - 260px) 280px, rgba(239, 46, 49, .16), rgba(239, 46, 49, .05) 55%, rgba(239, 46, 49, 0)),
            radial-gradient(circle 540px at 180px 640px, rgba(255, 106, 77, .15), rgba(255, 106, 77, .05) 60%, rgba(255, 106, 77, 0)),
            #FFFFFF;
    }
    .msp-hero__inner { grid-template-columns: minmax(0, 1fr) var(--msp-col-form); grid-template-areas: "copy form" "art form" "more form" ". form"; grid-template-rows: auto auto auto 1fr; column-gap: var(--msp-hero-gap); align-items: start; }
    .msp-hero__inner::after { margin: -70px -110px -40px -90px; background: radial-gradient(closest-side, rgba(239, 46, 49, .2), rgba(239, 46, 49, .07) 55%, rgba(239, 46, 49, 0)); }
    .msp-hero__copy { margin-bottom: 0; padding-top: 14px; }
    /* the car: left-aligned in its own column (never under the card), its transparent top tucked under the copy */
    .msp-hero__art { grid-area: art; z-index: 1; justify-self: start; width: var(--msp-car-w); margin: calc(-1 * var(--msp-art-lift)) 0 0 -26px; }
    .msp-hero__art::before { display: none; }
    /* the card title on one line in the card column: the type scales with the column, not the window
       (QA L2: "Check my car / finance" between 1110 and 1210px) */
    .msp-hero .msp-formcard__title { padding-right: 0; font-size: min(1.875rem, calc((var(--msp-col-form) - 62px) * .0865)); }
    .msp-hero .msp-formcard__title .msp-accent { display: inline; }
    /* the road: a level red line under the tyres, from the left edge of the screen to the end of the
       left column, fading out before the gap so it never runs behind the card; a soft tint below it.
       Its top = the car's top margin + 90.9% of the car's height (margins resolve against the width). */
    .msp-hero__road {
        display: block; grid-area: art; align-self: start; z-index: 0; pointer-events: none; height: 130px;
        margin: calc(var(--msp-car-w) * .375 - var(--msp-art-lift) - 1px) 0 -130px -100vw;   /* the negative bottom margin: the tint never sizes the row */
        border-top: 4px solid var(--msp-red);
        background: linear-gradient(180deg, rgba(253, 228, 228, .6), rgba(253, 228, 228, 0) 130px);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 160px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 160px), transparent);
    }
    .msp-hero__more { margin-top: 6px; }
    .msp-hero__how { display: none; }
    .msp-hero__fees { margin-top: 14px; }
}
@media (min-width: 960px) and (max-height: 820px) {   /* laptop screens: lift the card so Next clears the cookie bar */
    .msp-hero { padding-top: 10px; }
    .msp-hero__copy { padding-top: 6px; }
    .msp-hero .msp-formcard { padding-top: 20px; }
    .msp-hero .msp-formcard__title { font-size: min(1.75rem, calc((var(--msp-col-form) - 62px) * .0865)); }
    .msp-hero .msp-formcard__lede { margin-bottom: 10px; line-height: 1.45; }
    .msp-hero #gform_wrapper_1 .gfield_label, .msp-hero #gform_wrapper_1 legend.gfield_label { margin-bottom: 4px !important; }
    .msp-hero #gform_wrapper_1 .gf_progressbar_wrapper { margin-bottom: 12px !important; }
    .msp-hero #gform_wrapper_1 .gform_fields { row-gap: 10px !important; }
    .msp-hero #gform_wrapper_1 input[type="text"], .msp-hero #gform_wrapper_1 input[type="email"], .msp-hero #gform_wrapper_1 input[type="tel"], .msp-hero #gform_wrapper_1 input[type="number"] { min-height: 40px !important; padding-block: 7px !important; }
    .msp-hero #gform_wrapper_1 .gfield--type-radio .gchoice label { min-height: 40px; }
    .msp-hero #gform_wrapper_1 .gform_page_footer { margin-top: 8px !important; padding-top: 8px !important; }
    html body .msp-hero #gform_wrapper_1 .gform_next_button { min-height: 48px !important; padding-block: 11px !important; }
}

/* CRO 2026-10-12 (S4): short phones (under 560px wide, at most 740px tall). The cookie bar covered the Title
   field at 360x740 (by 13px), 375x667 (86px) and 320x568 (224px). Spacing only: no text, size or order
   changes. Measured with the bar (and its narrow-screen padding in the mu-plugin): 360x740 clear (26px
   spare), 375x667 47px still covered, 320x568 194px. The rest needs the operator's hero proposals (P5/P6). */
@media (max-width: 559.98px) and (max-height: 740px) {
    .msp-hero { padding-top: 4px; --msp-card-top: 20px; }   /* the car's margin follows the card's 6px edge + 14px padding */
    .msp-hero__eyebrow { margin-bottom: 6px; }
    .msp-hero__sub { margin-top: 4px; }
    .msp-hero__copy { margin-bottom: 10px; }
    .msp-hero .msp-formcard { padding-top: 14px; }
    .msp-hero .msp-formcard__lede { margin-bottom: 8px; }
    .msp-hero #gform_wrapper_1 .gf_progressbar_wrapper { margin-bottom: 12px !important; }
    .msp-hero #gform_wrapper_1 .gf_progressbar_title { margin-bottom: 6px !important; }
}

/* ---- the form card (house form 1 on home): even corners, red top edge, soft lift ---- */
.msp-formcard { position: relative; min-width: 0; background: #FFFFFF; border: 1px solid #E4E4E4; border-top: 6px solid var(--msp-red); border-radius: var(--msp-radius-form); box-shadow: var(--msp-shadow-lift); padding: 20px 18px 18px; scroll-margin-top: calc(var(--msp-header-h) + 14px); }
.msp-formcard__title { margin: 0 0 4px; color: var(--msp-black); font: 700 clamp(1.5rem, 1.32rem + .7vw, 1.875rem)/1.15 var(--msp-display); letter-spacing: -.01em; }
.msp-formcard__title .msp-accent { white-space: nowrap; }   /* never "Check my car / finance" (QA L2) */
.msp-formcard__lede { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--msp-muted); }
/* the statutory statement (C25: 14px by the CTA), in a tinted box with an info mark so it reads as information */
.msp-formcard__note { position: relative; margin: 18px 0 0; padding: 12px 14px 12px 42px; border-radius: 12px; background: var(--msp-tint); color: var(--msp-ink-2); font-size: 14px; line-height: 1.55; }
.msp-formcard__note::before { content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background-color: var(--msp-red-ink); -webkit-mask: var(--msp-ico-info) center / contain no-repeat; mask: var(--msp-ico-info) center / contain no-repeat; }
.msp-formcard .gform_wrapper { margin: 0 !important; }
/* QA L3 (and M1's remaining shift): GF prints the wrapper with style="display:none" and shows it from its
   script, so on a slow phone the CMC note and everything under the card jumped ~500px after first paint.
   While PAGE 1 is the visible page, show the wrapper straight away: page 1 has no conditional logic (the
   form's only rule is field 51, on page 3), so nothing can flash. Any other page keeps GF's own hide-then-
   show, because its conditional fields are hidden by script. Without :has() nothing changes. */
.msp-hero #gform_wrapper_1[style*="display:none"]:has(#gform_page_1_1:not([style*="display:none"])) { display: block !important; }
.msp-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--msp-black); }
.msp-secure .msp-i { width: 13px; height: 13px; }
.msp-formcard .msp-secure { color: var(--msp-muted); }

/* ============================================================================
   STRAP LINE (black, red rule) — a <p>, never a heading
   ========================================================================== */
.msp-strap { margin: 0; padding: 12px var(--msp-gutter); background: var(--msp-black); color: #FFFFFF; border-bottom: 3px solid var(--msp-red); text-align: center; font: 500 var(--msp-fs-strap)/1.4 var(--msp-font); }

/* ============================================================================
   SECTIONS + TITLES
   ========================================================================== */
.msp-section { padding-block: 56px 60px; }
.msp-section--tint { background: var(--msp-tint); }
.msp-section--dark { background: var(--msp-black); color: #FFFFFF; }
.msp-section--tight { padding-block: 40px; }
@media (min-width: 768px) { .msp-section { padding-block: 90px 85px; } .msp-section--tight { padding-block: 56px; } }
.msp-section-title { margin: 0 0 30px; text-align: center; color: inherit; font: 600 var(--msp-fs-h2)/1.18 var(--msp-display); letter-spacing: 0; }
.msp-section-title--left { text-align: left; }
.msp-section-intro { max-width: 760px; margin: -16px auto 30px; text-align: center; font-size: 16px; line-height: 1.6; }
.msp-tagline { margin: 38px auto 0; max-width: 820px; text-align: center; font: 600 var(--msp-fs-tagline)/1.35 var(--msp-display); }

/* the statutory "you do not need a CMC" statement: >= 14px wherever it sits by a CTA (C25) */
.msp-statutory { max-width: 880px; margin: 22px auto 0; font-size: 15px; line-height: 1.6; text-align: center; color: inherit; }
.msp-statutory--left { margin-left: 0; text-align: left; }
.msp-statutory a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msp-statutory + .msp-statutory { margin-top: 10px; }
@media (max-width: 767px) { .msp-statutory { text-align: left; } }
/* on a tinted section the statutory paragraphs read as one left-aligned panel, not centred small print
   (two adjacent paragraphs are joined with :has(); without it they show as two stacked panels) */
.msp-section--tint .msp-wrap > .msp-statutory { max-width: 880px; margin: 26px auto 0; padding: 20px 24px 20px 26px; text-align: left; background: #FFFFFF; border: 1px solid #EFE2E2; border-left: 5px solid var(--msp-red); border-radius: 6px 16px 16px 6px; line-height: 1.65; }
.msp-section--tint .msp-wrap > .msp-statutory:has(+ .msp-statutory) { padding-bottom: 8px; border-bottom: 0; border-radius: 6px 16px 0 0; }
.msp-section--tint .msp-wrap > .msp-statutory + .msp-statutory { margin-top: 0; padding-top: 8px; border-top: 0; border-radius: 0 0 16px 6px; }

/* ============================================================================
   3-STEP CARDS
   ========================================================================== */
.msp-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.msp-step { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background: #FFFFFF; border: 1px solid #F1E3E3; border-radius: 18px; box-shadow: 0 22px 44px -30px rgba(17, 17, 17, .35), 0 4px 10px -6px rgba(17, 17, 17, .08); padding: 26px 24px 28px; transition: transform var(--msp-t) ease, box-shadow var(--msp-t) ease; }
.msp-step__icon { display: block; width: 84px; height: 84px; margin: 0 0 18px; border-radius: 50%; background: var(--msp-tint) var(--msp-step-details) center / 54px no-repeat; box-shadow: inset 0 0 0 1px #F6DADA; }
.msp-step__icon--details  { background-image: var(--msp-step-details); }
.msp-step__icon--sign     { background-image: var(--msp-step-sign); }
.msp-step__icon--check    { background-image: var(--msp-step-check); }
.msp-step__icon--progress { background-image: var(--msp-step-progress); }
.msp-step__icon--complaint{ background-image: var(--msp-step-complaint); }
.msp-step__icon--scheme   { background-image: var(--msp-step-scheme); }
.msp-step__title { margin: 0 0 8px; color: var(--msp-black); font: 800 clamp(1.25rem, 1.15rem + .4vw, 1.4375rem)/1.3 var(--msp-font); letter-spacing: 0; }
.msp-step p { margin: 0; line-height: 1.65; }
.msp-step__label { order: -1; margin: 0 0 18px; display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 99px; background: var(--msp-tint); box-shadow: inset 0 0 0 1px #F4CFCF; color: var(--msp-red-ink); font: 800 13px/1 var(--msp-font); letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) { .msp-step:hover { transform: translateY(-3px); box-shadow: 0 28px 50px -30px rgba(17, 17, 17, .42), 0 4px 10px -6px rgba(17, 17, 17, .08); } }
@media (min-width: 768px) {
    .msp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .msp-step__title { font-size: 1.3125rem; }
    .msp-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
    .msp-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .msp-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================================
   LENDER A-Z (black)
   ========================================================================== */
.msp-lenders { background: var(--msp-black); color: #FFFFFF; padding-block: 60px; }
@media (min-width: 768px) { .msp-lenders { padding-block: 90px; } }
.msp-lenders .msp-section-title { color: #FFFFFF; }
.msp-lenders .msp-section-intro { color: rgba(255, 255, 255, .86); }
.msp-lenders__list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 24px; max-width: 1120px; margin: 0 auto; }
.msp-js .msp-lenders__list:not(.is-open) { max-height: 470px; overflow: hidden; }
.msp-js .msp-lenders__list:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to top, var(--msp-black), rgba(0, 0, 0, 0)); pointer-events: none; }
.msp-lender-group { min-width: 0; }
.msp-lender-group h3 { margin: 0 0 12px; color: var(--msp-red); font: 700 var(--msp-fs-letter)/1 var(--msp-display); letter-spacing: 0; }   /* 5.1:1 on black */
.msp-lender-group ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.msp-lender-group li { position: relative; margin: 0; padding: 3px 0 3px 25px; font-weight: 600; line-height: 1.5; }
.msp-lender-group li::before { content: ""; position: absolute; left: 0; top: .52em; width: 14px; height: 14px; background-color: var(--msp-red); -webkit-mask: var(--msp-ico-star) center / contain no-repeat; mask: var(--msp-ico-star) center / contain no-repeat; }
.msp-lenders__more { margin: 26px 0 0; text-align: center; }
.msp-lenders__note { max-width: 820px; margin: 22px auto 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .86); }
@media (min-width: 768px) { .msp-lenders__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 40px; } .msp-js .msp-lenders__list:not(.is-open) { max-height: 560px; } }
@media (min-width: 1025px) { .msp-lenders__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .msp-js .msp-lenders__list:not(.is-open) { max-height: 600px; } }

/* ============================================================================
   TWO-COLUMN: copy left, CTA side card right (PCP/HP on home; inner pages)
   ========================================================================== */
.msp-split { padding-block: 64px 80px; overflow-x: hidden; }
@supports (overflow: clip) { .msp-split { overflow-x: clip; } }   /* clip keeps position:sticky working */
.msp-split__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
.msp-split__text > :first-child { margin-top: 0; }
.msp-split__text h2, .msp-split__title { margin: 40px 0 16px; color: var(--msp-black); font: 600 var(--msp-fs-h2-split)/1.2 var(--msp-display); letter-spacing: 0; }
.msp-split__text h2:first-child { margin-top: 0; }
@media (max-width: 639.98px) {   /* QA L5: these headings are under 24px (22px at 390) and 600, so not large text: the red accent needs red-ink (5.2:1) */
    .msp-split__text h2 .msp-accent, .msp-split__title .msp-accent { color: var(--msp-red-ink); }
}
.msp-split__text h3 { margin: 26px 0 10px; color: var(--msp-black); font: 800 19px/1.35 var(--msp-font); letter-spacing: 0; }
.msp-split__text p, .msp-split__text li { font-weight: 300; line-height: 1.8; }
.msp-split__text p { margin: 0 0 18px; }
.msp-split__text ul, .msp-split__text ol { margin: 0 0 20px; padding-left: 1.3em; }
.msp-split__text li { margin: 0 0 6px; }
.msp-split__text li::marker { color: var(--msp-red); }
.msp-split__text strong { font-weight: 800; }
.msp-split__text a { color: var(--msp-red-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
    .msp-split { padding-block: 100px; }
    .msp-split__grid { grid-template-columns: minmax(0, var(--msp-col-main)) minmax(0, var(--msp-col-side)); gap: 0; align-items: center; }
    .msp-split--top .msp-split__grid { align-items: start; }
    .msp-split__text { padding-right: 60px; }
    .msp-split--sticky .msp-sidecard { position: sticky; top: calc(var(--msp-header-h) + 30px); }
}

/* ---- CTA side card: even corners and a red top edge like the hero form card; the car rides out of the top ---- */
.msp-sidecard { position: relative; margin-top: 70px; padding: 0 22px 24px; text-align: center; background: #FFFFFF; border: 1px solid #E4E4E4; border-top: 6px solid var(--msp-red); border-radius: var(--msp-radius-form); box-shadow: var(--msp-shadow-lift); }
.msp-car { display: block; width: 104%; max-width: none; aspect-ratio: var(--msp-car-ratio); margin: -74px -2% 4px; background: var(--msp-car) center bottom / contain no-repeat; }
.msp-sidecard__title { margin: 2px 12px 18px; color: var(--msp-black); font: 600 var(--msp-fs-cta)/1.1 var(--msp-display); letter-spacing: 0; }
.msp-sidecard .msp-btn { width: 100%; max-width: 360px; }
.msp-sidecard .msp-statutory { margin: 16px auto 0; font-size: 14px; text-align: center; }
.msp-sidecard__text { margin: 0 0 16px; font-size: 15px; }
@media (min-width: 900px) {
    .msp-sidecard { margin-top: 60px; padding: 0 28px 28px; }
    .msp-car { width: 112%; margin: -96px -6% 6px; }
}
/* definitions card (inner pages): soft card, no car */
.msp-defcard { padding: 26px; background: #FFFFFF; border-radius: var(--msp-radius-media); box-shadow: var(--msp-shadow-soft); }
.msp-defcard h3 { margin: 0 0 8px; font: 800 18px/1.3 var(--msp-font); }
.msp-defcard p { margin: 0 0 16px; font-size: 15px; }
.msp-defcard > :last-child { margin-bottom: 0; }

/* ============================================================================
   FAQ ACCORDION (native <details>; no JS)
   ========================================================================== */
.msp-faq { margin: 0; display: grid; gap: 10px; }
.msp-faq__item { margin: 0; overflow: hidden; background: #FFFFFF; border: 1px solid #EBDDDD; border-radius: 14px; }
.msp-faq__item[open] { border-color: var(--msp-red-ink); }
.msp-faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; background: #FFFFFF; color: var(--msp-black); font: 700 16.5px/1.35 var(--msp-font); }
.msp-faq__q::-webkit-details-marker { display: none; }
.msp-faq__q::marker { content: ""; }
.msp-faq__q::after { content: ""; flex: none; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--msp-ico-chevron) center / 16px no-repeat; mask: var(--msp-ico-chevron) center / 16px no-repeat; border: 2px solid currentColor; border-radius: 50%; transition: transform var(--msp-t) ease; }
.msp-faq__q:hover { color: var(--msp-red-ink); }
.msp-faq__item[open] > .msp-faq__q { background: var(--msp-red-ink); color: #FFFFFF; }
.msp-faq__item[open] > .msp-faq__q::after { transform: rotate(180deg); }
.msp-faq__a { padding: 16px 20px 4px; }
.msp-faq__a p { margin: 0 0 14px; line-height: 1.7; }
.msp-faq__a ul, .msp-faq__a ol { margin: 0 0 14px; padding-left: 1.3em; }
.msp-faq__a a { color: var(--msp-red-ink); text-decoration: underline; }

/* ============================================================================
   INNER PAGES: page intro, dual-colour titles, process step bands
   ========================================================================== */
.msp-page-intro { max-width: calc(980px + 2 * var(--msp-gutter)); margin: 0 auto; padding: 40px var(--msp-gutter) 44px; text-align: center; }
.msp-page-title { margin: 0 0 18px; color: var(--msp-black); font: 800 clamp(1.875rem, 1.32rem + 2.3vw, 3.375rem)/1.1 var(--msp-display); letter-spacing: -.01em; }
.msp-page-lede { max-width: 820px; margin: 0 auto; font-size: 17px; line-height: 1.6; }
.msp-page-lede + .msp-page-lede { margin-top: 12px; }
.msp-dual-title { margin: 0 0 14px; text-align: center; color: var(--msp-black); font: 800 clamp(1.75rem, 1.55rem + .8vw, 2.25rem)/1.28 var(--msp-font); letter-spacing: 0; }
@media (min-width: 768px) { .msp-page-intro { padding-block: 64px 56px; } }

.msp-stepbands { list-style: none; margin: 0; padding: 0; }
.msp-stepband { margin: 0 0 26px; }
.msp-stepbands .msp-stepband__title, .msp-split__text .msp-stepband__title { margin: 0 0 12px; padding: 18px 20px; background: var(--msp-tint); border-radius: var(--msp-radius-band); color: var(--msp-black); font: 800 clamp(1.1875rem, 1.1rem + .4vw, 1.375rem)/1.3 var(--msp-font); letter-spacing: 0; }
.msp-stepbands .msp-stepband__title b { color: var(--msp-red-ink); font-weight: inherit; }
.msp-stepband__body { margin: 0 15px 0 20px; }
.msp-stepband__body p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; }
.msp-footnote { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--msp-muted); }

/* ============================================================================
   LEGAL PAGES (.msp-legal): privacy, terms, fees, complaints, cookies
   ========================================================================== */
.msp-legal { max-width: calc(860px + 2 * var(--msp-gutter)); margin: 0 auto; padding: 40px var(--msp-gutter) 72px; color: var(--msp-ink-2); font-size: 16px; line-height: 1.7; }
.msp-legal h1 { margin: 0 0 10px; color: var(--msp-black); font: 800 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem)/1.12 var(--msp-display); letter-spacing: -.01em; }
.msp-legal__meta { margin: 0 0 30px; padding-bottom: 18px; border-bottom: 2px solid var(--msp-black); font-size: 14px; color: var(--msp-muted); }
.msp-legal__meta strong { color: var(--msp-black); }
.msp-legal h2 { margin: 40px 0 12px; padding-left: 14px; border-left: 4px solid var(--msp-red); color: var(--msp-black); font: 700 clamp(1.25rem, 1.12rem + .5vw, 1.5rem)/1.3 var(--msp-display); letter-spacing: 0; }
.msp-legal h3 { margin: 26px 0 8px; color: var(--msp-black); font: 800 17px/1.4 var(--msp-font); letter-spacing: 0; }
.msp-legal h4 { margin: 20px 0 6px; color: var(--msp-black); font: 800 16px/1.4 var(--msp-font); letter-spacing: 0; }
.msp-legal p { margin: 0 0 14px; }
.msp-legal ul, .msp-legal ol { margin: 0 0 18px; padding-left: 1.45em; }
.msp-legal li { margin: 0 0 8px; padding-left: 2px; }
.msp-legal ul li::marker { color: var(--msp-red); }
.msp-legal ol li::marker { color: var(--msp-red-ink); font-weight: 800; }
.msp-legal a { color: var(--msp-red-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.msp-legal strong { color: var(--msp-black); font-weight: 800; }
.msp-legal hr { margin: 34px 0; border: 0; border-top: 1px solid var(--msp-line); }
.msp-legal address { margin: 0 0 16px; font-style: normal; padding: 14px 18px; background: var(--msp-tint); border-radius: 10px; }
.msp-callout { margin: 0 0 26px; padding: 18px 20px; background: var(--msp-tint); border: 2px solid var(--msp-black); border-radius: var(--msp-radius-card); }
.msp-callout > :last-child { margin-bottom: 0; }
.msp-callout--statutory { border-color: var(--msp-red); }
.msp-callout__title { margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; font: 800 17px/1.35 var(--msp-font) !important; color: var(--msp-black); }
.msp-toc { margin: 0 0 30px; padding: 16px 20px; border: 1px solid var(--msp-line); border-radius: 10px; }
.msp-toc ol { margin: 6px 0 0; columns: 1; }
@media (min-width: 768px) { .msp-toc ol { columns: 2; column-gap: 32px; } .msp-legal { padding-top: 56px; } }

/* tables: always inside .msp-table-wrap so only the table scrolls on a phone */
.msp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; border: 1px solid var(--msp-line); border-radius: 10px; }
.msp-legal table, .msp-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 15px; line-height: 1.45; margin: 0; }
.msp-legal caption, .msp-table caption { caption-side: top; text-align: left; padding: 12px 14px 10px; font-weight: 800; color: var(--msp-black); }
.msp-legal th, .msp-table th { padding: 11px 14px; background: var(--msp-black); color: #FFFFFF; text-align: left; font-weight: 700; vertical-align: bottom; }
.msp-legal td, .msp-table td { padding: 11px 14px; border-top: 1px solid var(--msp-line); vertical-align: top; }
.msp-legal tbody tr:nth-child(even) td, .msp-table tbody tr:nth-child(even) td { background: var(--msp-zebra); }
.msp-fee-table td, .msp-fee-table th { font-variant-numeric: tabular-nums; }
.msp-fee-table td:not(:first-child), .msp-fee-table th:not(:first-child) { text-align: right; }
.msp-fee-table td { white-space: nowrap; }
.msp-table-note { margin: -10px 0 22px; font-size: 14px; color: var(--msp-muted); }
@media (max-width: 480px) { .msp-legal table, .msp-table { font-size: 14px; } .msp-legal th, .msp-legal td, .msp-table th, .msp-table td { padding: 9px 10px; } }

/* ============================================================================
   THANK-YOU, GET IN TOUCH, 404
   ========================================================================== */
.msp-thanks { padding: 48px var(--msp-gutter) 72px; background: var(--msp-tint); }
.msp-thanks__card { max-width: 720px; margin: 0 auto; padding: 32px 22px 26px; text-align: center; background: #FFFFFF; border: 2px solid var(--msp-black); border-radius: 24px 90px 24px 24px; box-shadow: var(--msp-shadow-soft); }
.msp-thanks__icon { display: block; width: 76px; height: 76px; margin: 0 auto 18px; background: var(--msp-step-complaint) center / contain no-repeat; }
.msp-thanks h1 { margin: 0 0 12px; color: var(--msp-black); font: 800 clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem)/1.15 var(--msp-display); letter-spacing: -.01em; }
.msp-thanks__lede { margin: 0 auto 22px; max-width: 560px; font-size: 17px; line-height: 1.6; }
.msp-thanks__ref { display: inline-block; margin: 0 0 22px; padding: 8px 14px; border: 2px dashed var(--msp-black); border-radius: 8px; font-weight: 800; letter-spacing: .04em; }
.msp-thanks__next { margin: 0 0 22px; padding: 18px 20px; text-align: left; background: var(--msp-tint); border-radius: var(--msp-radius-card); }
.msp-thanks__next h2 { margin: 0 0 10px; color: var(--msp-black); font: 800 18px/1.35 var(--msp-font); letter-spacing: 0; }
.msp-thanks__next ol { margin: 0; padding-left: 1.35em; }
.msp-thanks__next li { margin: 0 0 8px; }
.msp-thanks__next li::marker { color: var(--msp-red-ink); font-weight: 800; }
@media (min-width: 768px) { .msp-thanks { padding-block: 72px 96px; } .msp-thanks__card { padding: 44px 48px 36px; border-radius: 30px 140px 30px 30px; } }

.msp-contact { max-width: calc(760px + 2 * var(--msp-gutter)); margin: 0 auto; padding: 8px var(--msp-gutter) 72px; }
.msp-contact__card { padding: 28px 22px; text-align: center; background: var(--msp-tint); border: 2px solid var(--msp-black); border-radius: var(--msp-radius-cta-m); }
.msp-contact__icon { display: block; width: 44px; height: 44px; margin: 0 auto 12px; color: var(--msp-red); }
.msp-contact__email { display: inline-block; margin: 6px 0 18px; color: var(--msp-black); font: 800 clamp(1.125rem, .9rem + 1.6vw, 1.75rem)/1.25 var(--msp-display); text-decoration: none; overflow-wrap: anywhere; }
.msp-contact__email .msp-at { color: var(--msp-red); }
.msp-contact__card p { margin: 0 0 12px; }
@media (min-width: 768px) { .msp-contact__card { padding: 40px 44px; border-radius: var(--msp-radius-cta); } }

.msp-404 { max-width: calc(760px + 2 * var(--msp-gutter)); margin: 0 auto; padding: 64px var(--msp-gutter) 88px; text-align: center; }
.msp-404__code { display: inline-block; margin: 0 0 8px; padding: 4px 14px; background: var(--msp-red); color: #FFFFFF; border-radius: 4px 14px 4px 4px; font: 800 20px/1.2 var(--msp-display); letter-spacing: .04em; }
.msp-404 h1 { margin: 0 0 14px; color: var(--msp-black); font: 800 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem)/1.12 var(--msp-display); }
.msp-404 p { margin: 0 auto 10px; max-width: 560px; font-size: 17px; }

/* ---- accepted aliases: the legal-page class names used in build/pages/*.html (WP3) ---- */
.msp-legal-sub { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--msp-muted); }
.msp-legal-meta { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 2px solid var(--msp-black); font-size: 14px; color: var(--msp-muted); }
.msp-legal-lead { margin: 0 0 22px; font-size: 18px; line-height: 1.6; color: var(--msp-black); }
.msp-legal-callout { margin: 0 0 26px; padding: 18px 20px; background: var(--msp-tint); border: 2px solid var(--msp-black); border-radius: var(--msp-radius-card); }
.msp-legal-callout > :last-child { margin-bottom: 0; }
.msp-legal-callout.msp-legal-statutory { border-color: var(--msp-red); }
.msp-legal-steps { counter-reset: msp-step; list-style: none; padding-left: 0 !important; }
.msp-legal-steps > li { position: relative; margin: 0 0 14px; padding: 14px 16px 14px 56px; background: var(--msp-tint); border-radius: 12px; }
.msp-legal-steps > li::before { counter-increment: msp-step; content: counter(msp-step); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 4px 12px 4px 4px; background: var(--msp-red-ink); color: #FFFFFF; font: 800 15px/28px var(--msp-font); text-align: center; }
.msp-legal-contact { list-style: none; margin: 0 0 18px; padding: 14px 18px !important; background: var(--msp-tint); border-radius: 10px; }
.msp-legal-contact li { margin: 0 0 6px; padding: 0; }
.msp-legal-contact li:last-child { margin-bottom: 0; }
div.msp-legal-table, .msp-legal-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; border: 1px solid var(--msp-line); border-radius: 10px; }
div.msp-legal-table table, .msp-legal-table-wrap table { margin: 0; }
.msp-legal-toc { margin: 0 0 30px; padding: 16px 20px; border: 1px solid var(--msp-line); border-radius: 10px; }
.msp-legal .msp-legal-toc h2 { margin: 0 0 6px; padding: 0; border: 0; font: 800 15px/1.4 var(--msp-font); letter-spacing: .06em; text-transform: uppercase; }
.msp-legal-toc ol { margin: 0; }
.msp-legal-toc li { margin: 0 0 4px; }
@media (min-width: 768px) { .msp-legal-toc ol { columns: 2; column-gap: 32px; } }
.msp-legal-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; background: var(--msp-black); color: #FFFFFF; border: 0; border-radius: var(--msp-radius-btn); font: 700 17px/1.2 var(--msp-font); cursor: pointer; }
.msp-legal-btn:hover, .msp-legal-btn:focus-visible { background: var(--msp-red-ink); }
.msp-legal-form { margin: 0 0 22px; padding: 18px 20px; border: 2px dashed var(--msp-black); border-radius: 10px; background: #FFFFFF; }
.msp-legal-form > :last-child { margin-bottom: 0; }
.msp-clause { display: inline-block; min-width: 2.6em; margin-right: 4px; color: var(--msp-red-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
mark.msp-cr-confirm, .msp-cr-confirm { background: #FFF1A8; color: #000000; font-weight: 700; padding: 0 4px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.msp-legal tbody th, .msp-table tbody th { padding: 11px 14px; background: var(--msp-tint); color: var(--msp-black); border-top: 1px solid var(--msp-line); text-align: left; vertical-align: top; font-weight: 800; }

/* ---- legal tables that do not fit their box (1.4.1, 2026-10-16) ----
   On phones and tablets up to about 800px the fee and cookie tables were wider than their box: the columns
   with the VAT-inclusive fees, or a cookie's purpose, type and lifetime, sat off-screen with nothing to show
   that the box scrolls. Pages that hold one of these tables print a small script (security-hardening.php) that
   adds .msp-tbl to each wrapper, copies each column's header text into data-label on its cells (the table's
   own <th> text is the only source of the labels) and sets ONE state while the table is wider than its box:
   - a table that fits: nothing changes;
   - .msp-tbl--compact: 14px type and tighter cells, as on phones;
   - .msp-tbl--stacked (with --compact): still too wide, so one card per row, each figure beside or under its
     own column header. .msp-tbl--kv (short plain-text cells, the fee tables) puts label and figure on one line
     and, on screens from about 580px, two cards side by side; long text (the cookie tables) goes under its label;
   - .msp-tbl--scroll: a wrapper that would still scroll is a named, focusable region with a fade on each side
     that has more to see (--start / --end follow the scroll position).
   It is checked again on resize and once the fonts have loaded. Without the script none of this applies and the
   table scrolls inside its box as before. The labels are generated content with EMPTY alternative text, so a
   screen reader, which already announces the column header for each cell, does not hear them twice; a browser
   without that syntax uses the plain declaration before it. The wrappers carry an inline overflow-x:auto, which
   is left alone: a stacked table fits, so nothing scrolls. */
.msp-legal .msp-tbl--compact table { font-size: 14px; }
.msp-legal .msp-tbl--compact th, .msp-legal .msp-tbl--compact td { padding: 9px 10px; }
.msp-legal .msp-tbl--stacked { position: relative; border: 0; border-radius: 0; }
.msp-legal .msp-tbl--stacked table, .msp-legal .msp-tbl--stacked tbody, .msp-legal .msp-tbl--stacked tr,
.msp-legal .msp-tbl--stacked th, .msp-legal .msp-tbl--stacked td { display: block; width: auto; min-width: 0; }
.msp-legal .msp-tbl--stacked caption { display: block; padding: 0 0 10px; }
/* the header row stays in the accessibility tree (it names every cell); it is only hidden from sight */
.msp-legal .msp-tbl--stacked thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.msp-legal .msp-tbl--stacked tbody tr { margin: 0 0 12px; background: #FFFFFF; border: 1px solid var(--msp-line); border-radius: 10px; overflow: hidden; }
.msp-legal .msp-tbl--stacked tbody tr:last-child { margin-bottom: 0; }
/* tr:nth-child(n) only lifts these over the zebra rule (.msp-legal tbody tr:nth-child(even) td): a card has no zebra */
.msp-legal .msp-tbl--stacked tbody tr:nth-child(n) > * { padding: 9px 12px; background: transparent; border-top: 1px solid var(--msp-line); color: var(--msp-ink-2); font-weight: 400; text-align: left; white-space: normal; overflow-wrap: anywhere; }
/* the row's first cell (the band, the cookie's name, the example's amount) heads the card */
.msp-legal .msp-tbl--stacked tbody tr:nth-child(n) > :first-child { background: var(--msp-tint); border-top: 0; color: var(--msp-black); font-weight: 800; }
.msp-legal .msp-tbl--stacked td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin: 0 0 2px; color: var(--msp-black); font-weight: 700; }
/* "Band 1", "Name mspc_consent": a plain space, so a long cookie name moves to its own line before it is split */
.msp-legal .msp-tbl--stacked th[data-label]::before { content: attr(data-label) " "; content: attr(data-label) " " / ""; font-weight: 600; }
.msp-legal .msp-tbl--stacked code { overflow-wrap: anywhere; }
.msp-legal .msp-tbl--kv.msp-tbl--stacked tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 12px; }
.msp-legal .msp-tbl--kv.msp-tbl--stacked tbody tr { margin: 0; }
.msp-legal .msp-tbl--kv.msp-tbl--stacked tbody tr:nth-child(n) > td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 16px; text-align: right; }
.msp-legal .msp-tbl--kv.msp-tbl--stacked td[data-label]::before { flex: 1 1 10em; min-width: 0; margin: 0; text-align: left; }
/* a worked example has no row header: its first cell (the amount) heads the card, label over figure */
.msp-legal .msp-tbl--kv.msp-tbl--stacked tbody tr:nth-child(n) > td:first-child { display: block; text-align: left; }
.msp-legal .msp-tbl--kv.msp-tbl--stacked tbody tr > td:first-child[data-label]::before { margin: 0 0 2px; font-weight: 600; }
.msp-legal .msp-tbl--scroll {
    --msp-fade-l: #000; --msp-fade-r: rgba(0, 0, 0, .12);
    -webkit-mask-image: linear-gradient(to right, var(--msp-fade-l), #000 40px, #000 calc(100% - 40px), var(--msp-fade-r));
            mask-image: linear-gradient(to right, var(--msp-fade-l), #000 40px, #000 calc(100% - 40px), var(--msp-fade-r));
}
.msp-legal .msp-tbl--scroll:not(.msp-tbl--start) { --msp-fade-l: rgba(0, 0, 0, .12); }
.msp-legal .msp-tbl--scroll.msp-tbl--end { --msp-fade-r: #000; }
.msp-legal .msp-tbl--scroll:focus-visible { -webkit-mask-image: none; mask-image: none; }   /* the focus ring sits outside the box, where a mask would hide it */

/* ============================================================================
   GRAVITY FORMS: house form 1 (home) + form 2 (/mo). Orbital theme retinted through its
   own variables, then the field machinery (DOB row, Title pills, consent cards, buttons).
   The selector html body #gform_wrapper_N[data-form-index].gform-theme out-ranks the inline
   variables GF prints per form (#gform_wrapper_N[data-form-index="0"].gform-theme).
   ========================================================================== */
html body #gform_wrapper_1[data-form-index].gform-theme,
html body #gform_wrapper_2[data-form-index].gform-theme {
    --gf-color-primary: #EF2E31; --gf-color-primary-rgb: 239, 46, 49; --gf-color-primary-contrast: #FFFFFF; --gf-color-primary-contrast-rgb: 255, 255, 255;
    --gf-color-primary-darker: #231F20; --gf-color-primary-lighter: #F25B5E;
    --gf-color-secondary: #FFFFFF; --gf-color-secondary-contrast: #000000; --gf-color-secondary-contrast-rgb: 0, 0, 0; --gf-color-secondary-darker: #F4F4F4;
    --gf-color-out-ctrl-dark: #4A4A4A; --gf-color-out-ctrl-dark-rgb: 74, 74, 74; --gf-color-out-ctrl-dark-darker: #000000; --gf-color-out-ctrl-dark-lighter: #5C5C5C;
    --gf-color-out-ctrl-light: rgba(0, 0, 0, .1); --gf-color-out-ctrl-light-darker: #8C8C8C;
    --gf-color-in-ctrl: #FFFFFF; --gf-color-in-ctrl-contrast: #000000; --gf-color-in-ctrl-contrast-rgb: 0, 0, 0;
    --gf-color-in-ctrl-primary: #D42027; --gf-color-in-ctrl-primary-rgb: 212, 32, 39; --gf-color-in-ctrl-primary-contrast: #FFFFFF;
    --gf-color-in-ctrl-primary-darker: #231F20; --gf-color-in-ctrl-primary-lighter: #EF2E31;
    --gf-color-in-ctrl-light: rgba(0, 0, 0, .1); --gf-color-in-ctrl-light-darker: #8C8C8C; --gf-color-in-ctrl-dark: #4A4A4A; --gf-color-in-ctrl-dark-darker: #000000;
    --gf-radius: 6px; --gf-font-size-secondary: 14px; --gf-font-size-tertiary: 13px;
    font-family: var(--msp-font);
}
#gform_wrapper_1, #gform_wrapper_2 { font-family: var(--msp-font); color: var(--msp-black); }
#gform_wrapper_1 .gform_heading, #gform_wrapper_2 .gform_heading { display: none; }

/* ---- progress bar ("Step 1 of 3") ---- */
#gform_wrapper_1 .gf_progressbar_wrapper { margin: 0 0 18px !important; }
#gform_wrapper_1 .gf_progressbar_title { margin: 0 0 8px !important; color: var(--msp-black) !important; font: 800 12px/1.2 var(--msp-font) !important; letter-spacing: .1em !important; text-transform: uppercase; }
#gform_wrapper_1 .gf_progressbar_title .gf_step_current_page { color: var(--msp-red-ink); }
#gform_wrapper_1 .gf_progressbar {
    height: 6px !important; padding: 0 !important; background: #F1E1E1 !important; border-radius: 99px !important; overflow: hidden !important; box-shadow: none !important;
    /* three segments with gaps, one per form page (the bar is aria-hidden; the title says "Step 1 of 3") */
    -webkit-mask: linear-gradient(90deg, #000 calc(33.333% - 3px), transparent 0 calc(33.333% + 3px), #000 0 calc(66.667% - 3px), transparent 0 calc(66.667% + 3px), #000 0);
            mask: linear-gradient(90deg, #000 calc(33.333% - 3px), transparent 0 calc(33.333% + 3px), #000 0 calc(66.667% - 3px), transparent 0 calc(66.667% + 3px), #000 0);
}
#gform_wrapper_1 .gf_progressbar_percentage { height: 6px !important; background: var(--msp-red) !important; border-radius: 0 !important; font-size: 0 !important; color: transparent !important; }
#gform_wrapper_1 .gf_progressbar_percentage span { display: none !important; }

/* ---- labels, descriptions, required marks ---- */
#gform_wrapper_1 .gfield_label, #gform_wrapper_2 .gfield_label,
#gform_wrapper_1 legend.gfield_label, #gform_wrapper_2 legend.gfield_label { margin: 0 0 6px !important; color: var(--msp-black) !important; font: 700 14px/1.35 var(--msp-font) !important; letter-spacing: 0 !important; }
#gform_wrapper_1 .gfield_required, #gform_wrapper_2 .gfield_required { color: var(--msp-red-ink) !important; font-size: 12px !important; font-weight: 700 !important; }
#gform_wrapper_1 .gfield_description, #gform_wrapper_2 .gfield_description,
#gform_wrapper_1 .gform-field-label--type-sub, #gform_wrapper_2 .gform-field-label--type-sub { color: var(--msp-muted) !important; font-size: 13px !important; line-height: 1.45 !important; }
#gform_wrapper_1 .gform_fields { row-gap: 14px !important; column-gap: 12px !important; }
#gform_wrapper_1 .gfield { margin: 0 !important; }

/* ---- text-like inputs ---- */
#gform_wrapper_1 input[type="text"], #gform_wrapper_1 input[type="email"], #gform_wrapper_1 input[type="tel"], #gform_wrapper_1 input[type="number"], #gform_wrapper_1 select, #gform_wrapper_1 textarea,
#gform_wrapper_2 input[type="text"], #gform_wrapper_2 input[type="email"], #gform_wrapper_2 input[type="tel"], #gform_wrapper_2 input[type="number"], #gform_wrapper_2 select, #gform_wrapper_2 textarea {
    width: 100%; min-height: 50px !important; padding: 12px 14px !important; box-sizing: border-box !important;
    background: #FFFFFF !important; color: var(--msp-black) !important;
    border: 1.5px solid var(--msp-field) !important; border-radius: 6px !important; box-shadow: none !important;
    font: 400 16px/1.3 var(--msp-font) !important;
    transition: border-color var(--msp-t) ease, box-shadow var(--msp-t) ease !important;
}
#gform_wrapper_1 input[type="text"], #gform_wrapper_1 input[type="email"], #gform_wrapper_1 input[type="tel"], #gform_wrapper_1 input[type="number"], #gform_wrapper_1 select, #gform_wrapper_1 textarea { border-radius: 10px !important; }
#gform_wrapper_1 input:focus, #gform_wrapper_1 select:focus, #gform_wrapper_1 textarea:focus,
#gform_wrapper_2 input:focus, #gform_wrapper_2 select:focus, #gform_wrapper_2 textarea:focus {
    border-color: var(--msp-black) !important; box-shadow: 0 0 0 4px rgba(239, 46, 49, .25) !important;
    outline: 2px solid var(--msp-focus) !important; outline-offset: 1px !important;
}
#gform_wrapper_1 input::placeholder, #gform_wrapper_2 input::placeholder { color: #767676 !important; opacity: 1; }

/* ---- DOB: DD / MM / YYYY on one row ---- */
#gform_wrapper_1 .gfield--type-date .ginput_complex, #gform_wrapper_1 .gfield--type-date .gform-grid-row { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 0 !important; width: 100% !important; }
#gform_wrapper_1 .gfield--type-date .gform-grid-col { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
#gform_wrapper_1 .gfield--type-date .gform-grid-col:last-child { flex-grow: 1.35 !important; }
#gform_wrapper_1 .gfield--type-date input { min-width: 0 !important; text-align: center; -moz-appearance: textfield; appearance: textfield; }
#gform_wrapper_1 .gfield--type-date input::-webkit-inner-spin-button, #gform_wrapper_1 .gfield--type-date input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Title (field 26): equal-width pills ---- */
#gform_wrapper_1 .gfield--type-radio .ginput_container_radio, #gform_wrapper_1 .gfield--type-radio .gfield_radio { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; }
#gform_wrapper_1 .gfield--type-radio .gchoice { display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; position: relative; }
#gform_wrapper_1 .gfield--type-radio .gchoice input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none; }
#gform_wrapper_1 .gfield--type-radio .gchoice label {
    display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 0 !important; padding: 0 6px !important;
    background: #FFFFFF; color: var(--msp-black) !important; border: 1.5px solid var(--msp-black); border-radius: 10px;
    font: 700 16px/1 var(--msp-font) !important; cursor: pointer; user-select: none; white-space: nowrap; transition: background-color var(--msp-t), color var(--msp-t);
}
#gform_wrapper_1 .gfield--type-radio .gchoice label::before, #gform_wrapper_1 .gfield--type-radio .gchoice label::after { display: none !important; }
#gform_wrapper_1 .gfield--type-radio .gchoice label:hover { background: var(--msp-tint-strong); }
#gform_wrapper_1 .gfield--type-radio .gchoice input[type="radio"]:checked + label { background: var(--msp-black); color: #FFFFFF !important; }
#gform_wrapper_1 .gfield--type-radio .gchoice input[type="radio"]:focus-visible + label { outline: 3px solid var(--msp-focus); outline-offset: 2px; }
/* field 31 (additional support): long labels stack full width */
#gform_wrapper_1 #field_1_31 .ginput_container_radio, #gform_wrapper_1 #field_1_31 .gfield_radio { flex-direction: column !important; flex-wrap: wrap !important; }
#gform_wrapper_1 #field_1_31 .gchoice { flex: 1 1 auto !important; width: 100% !important; }
#gform_wrapper_1 #field_1_31 .gchoice label { justify-content: flex-start !important; min-height: 52px; padding: 13px 16px !important; white-space: normal !important; text-align: left; line-height: 1.35 !important; font-size: 15px !important; }

/* ---- consent / attestation checkboxes as bordered cards (forms 1 and 2) ---- */
#gform_wrapper_1 .gfield--type-checkbox .gchoice, #gform_wrapper_2 .gfield--type-checkbox .gchoice {
    display: flex !important; align-items: flex-start; gap: 12px; margin: 0 0 10px !important; padding: 13px 14px;
    background: #FFFFFF; border: 1.5px solid var(--msp-field); border-radius: 12px; transition: border-color var(--msp-t), background-color var(--msp-t);
}
#gform_wrapper_1 .gfield--type-checkbox .gchoice:hover, #gform_wrapper_2 .gfield--type-checkbox .gchoice:hover { border-color: var(--msp-black); background: var(--msp-tint); }
#gform_wrapper_1 .gfield--type-checkbox input[type="checkbox"], #gform_wrapper_2 .gfield--type-checkbox input[type="checkbox"] { flex: none; width: 22px !important; height: 22px !important; margin: 1px 0 0 !important; accent-color: var(--msp-red-ink); cursor: pointer; }
#gform_wrapper_1 .gfield--type-checkbox .gchoice label, #gform_wrapper_2 .gfield--type-checkbox .gchoice label { flex: 1; margin: 0 !important; color: var(--msp-black) !important; font-size: 14px !important; line-height: 1.5 !important; cursor: pointer; }
/* CRO S8: the whole card ticks the box, not just the 21px line of label text (WCAG 2.5.8). The label's
   ::after covers the card; a click on it is a click on the label. Cards whose label holds a link are left
   alone (the overlay would swallow the link); without :has() support this rule simply does not apply. */
#gform_wrapper_1 .gfield--type-checkbox .gchoice:not(:has(a)), #gform_wrapper_2 .gfield--type-checkbox .gchoice:not(:has(a)) { position: relative; }
#gform_wrapper_1 .gfield--type-checkbox .gchoice:not(:has(a)) label::after, #gform_wrapper_2 .gfield--type-checkbox .gchoice:not(:has(a)) label::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }

/* ---- the "Before you sign" key-summary block inside form 1 (field 30) and /mo ---- */
.mpc-signblock, .msp-signblock { margin: 0 0 4px; padding: 16px 16px 6px; background: var(--msp-tint); border: 1.5px solid var(--msp-black); border-radius: 10px; font-size: 14px; line-height: 1.6; color: var(--msp-black); }
.mpc-signblock h3, .mpc-signblock-h, .msp-signblock h3 { margin: 0 0 8px !important; color: var(--msp-black) !important; font: 800 17px/1.3 var(--msp-font) !important; letter-spacing: 0 !important; }
.mpc-signblock p, .msp-signblock p { margin: 0 0 10px; }
.mpc-signblock a, .msp-signblock a { color: var(--msp-red-ink); text-decoration: underline; }
.mpc-signblock table, .msp-signblock table { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 13px; }
.mpc-signblock th, .mpc-signblock td, .msp-signblock th, .msp-signblock td { padding: 6px 8px; border: 1px solid var(--msp-line); text-align: left; }
/* the two fee tables in the key facts fit a phone with nothing cut off (2026-10-13; was 25px too wide at 390px,
   the "Maximum fee" column hidden with no sign that it scrolled). Band ranges may wrap at their spaces; the
   "+ VAT" lines and the figures never break. Anything still too wide (very large text) scrolls, and the
   edge shadows show that it does (they need transparent cells, which these tables have). */
.mpc-signblock .msp-fee-table, .msp-signblock .msp-fee-table { margin: 0; }
.mpc-signblock .msp-fee-table th, .msp-signblock .msp-fee-table th { vertical-align: bottom; }
.mpc-signblock .msp-fee-table td, .msp-signblock .msp-fee-table td { white-space: normal; }
.mpc-signblock .msp-fee-table td small, .msp-signblock .msp-fee-table td small { white-space: nowrap; }
.mpc-signblock .msp-table-wrap, .msp-signblock .msp-table-wrap {
    background:
        linear-gradient(to right, var(--msp-tint) 30%, rgba(255, 248, 248, 0)) left center / 32px 100% no-repeat local,
        linear-gradient(to left, var(--msp-tint) 30%, rgba(255, 248, 248, 0)) right center / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat scroll;
    background-color: var(--msp-tint);
}
@media (max-width: 480px) {
    .mpc-signblock .msp-fee-table th, .mpc-signblock .msp-fee-table td,
    .msp-signblock .msp-fee-table th, .msp-signblock .msp-fee-table td { padding: 6px; }
    .mpc-signblock .msp-fee-table th, .msp-signblock .msp-fee-table th { font-size: 12px; }
}
@media (max-width: 359px) {
    .mpc-signblock .msp-table-wrap, .msp-signblock .msp-table-wrap { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }
    .mpc-signblock .msp-fee-table, .msp-signblock .msp-fee-table { font-size: 12px; }
    .mpc-signblock .msp-fee-table th, .msp-signblock .msp-fee-table th { font-size: 11px; }
    .mpc-signblock .msp-fee-table th, .mpc-signblock .msp-fee-table td,
    .msp-signblock .msp-fee-table th, .msp-signblock .msp-fee-table td { padding: 6px 5px; }
}
/* 1.4.1, /mo only (form 2): its card is 10px narrower than form 1's (2px border, 18px padding), so the band table
   was still 6px too wide at 320 and 9px at 360 (the last glyphs clipped at 360). Under 380px it gets the tight
   settings above plus 11px side padding on the key-facts box. Form 1 is untouched (it fits: 234/234 at 320). */
@media (max-width: 379.98px) {
    #gform_wrapper_2 .mpc-signblock.msp-keyfacts { padding-left: 11px; padding-right: 11px; }
    #gform_wrapper_2 .mpc-signblock .msp-table-wrap { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }
    #gform_wrapper_2 .mpc-signblock .msp-fee-table { font-size: 12px; }
    #gform_wrapper_2 .mpc-signblock .msp-fee-table th { font-size: 11px; }
    #gform_wrapper_2 .mpc-signblock .msp-fee-table th, #gform_wrapper_2 .mpc-signblock .msp-fee-table td { padding: 6px 5px; }
}
.mpc-consent-note, .msp-consent-note { font-size: 14px; line-height: 1.55; color: var(--msp-black); }

/* ---- page footer buttons: Next / Back / Submit ---- */
#gform_wrapper_1 .gform_page_footer, #gform_wrapper_1 .gform-page-footer, #gform_wrapper_1 .gform_footer,
#gform_wrapper_2 .gform_footer, #gform_wrapper_2 .gform-page-footer {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px !important;
    margin: 20px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid var(--msp-line) !important;
}
html body #gform_wrapper_1 .gform_next_button, html body #gform_wrapper_1 .gform_button, html body #gform_wrapper_1 button[type="submit"]:not(.gform_previous_button),
html body #gform_wrapper_2 .gform_button, html body #gform_wrapper_2 button[type="submit"]:not(.gform_previous_button) {
    flex: 2 1 200px; min-height: 52px !important; margin: 0 !important; padding: 13px 22px !important;
    background: var(--msp-red) !important; color: #FFFFFF !important; border: 0 !important; border-radius: var(--msp-radius-btn) !important; box-shadow: none !important;
    font: 700 20px/1.15 var(--msp-font) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
    transition: background-color var(--msp-t) ease !important;
}
html body #gform_wrapper_1 .gform_next_button:hover, html body #gform_wrapper_1 .gform_button:hover,
html body #gform_wrapper_2 .gform_button:hover { background: var(--msp-hover-dark) !important; }
/* form 1 (home card): 10px corners and a soft red shadow under the primary button */
html body #gform_wrapper_1 .gform_next_button, html body #gform_wrapper_1 .gform_button, html body #gform_wrapper_1 button[type="submit"]:not(.gform_previous_button) { border-radius: 10px !important; box-shadow: 0 14px 26px -14px rgba(239, 46, 49, .9) !important; }
html body #gform_wrapper_1 .gform_previous_button { border-radius: 10px !important; }
html body #gform_wrapper_1 .gform_previous_button, html body #gform_wrapper_2 .gform_previous_button {
    flex: 1 1 110px; min-height: 52px !important; margin: 0 !important; padding: 12px 18px !important;
    background: #FFFFFF !important; color: var(--msp-black) !important; border: 2px solid var(--msp-black) !important; border-radius: var(--msp-radius-btn) !important; box-shadow: none !important;
    font: 700 17px/1.15 var(--msp-font) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body #gform_wrapper_1 .gform_previous_button:hover, html body #gform_wrapper_2 .gform_previous_button:hover { background: var(--msp-black) !important; color: #FFFFFF !important; }
html body #gform_wrapper_1 button[disabled], html body #gform_wrapper_1 input[disabled] { opacity: .45 !important; cursor: not-allowed !important; }
.gform_page_footer .gform_next_button.addr-locked { opacity: .4 !important; cursor: not-allowed !important; }   /* CRO S1: still tappable (aria-disabled); a tap explains why */
/* CRO S5: the disabled "Start My Claim" lets a tap through to its footer, which says why (sign first) */
html body #gform_wrapper_1 #gform_submit_button_1[disabled], html body #gform_wrapper_2 #gform_submit_button_2[disabled] { pointer-events: none !important; }
.mpc-sign-msg { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: #FFF4F4; border: 2px solid var(--msp-red-ink); color: var(--msp-red-deep); font-size: 14px; font-weight: 700; line-height: 1.4; }
.mpc-sig-padbox:focus { outline: 3px solid var(--msp-focus); outline-offset: 2px; }
#gform_wrapper_1 .gf_progressbar_title:focus { outline: none !important; }   /* CRO S13: focus lands here after a step change (not a control) */
#gform_wrapper_1 .gform-loader, #gform_wrapper_1 .gform_ajax_spinner { border-left-color: var(--msp-red) !important; }

/* ---- validation ---- */
#gform_wrapper_1 .gform_validation_errors, #gform_wrapper_2 .gform_validation_errors { margin: 0 0 16px !important; padding: 12px 14px !important; background: #FFF4F4 !important; border: 2px solid var(--msp-red-ink) !important; border-radius: 8px !important; box-shadow: none !important; }
#gform_wrapper_1 .gform_validation_errors h2, #gform_wrapper_2 .gform_validation_errors h2 { color: var(--msp-red-ink) !important; font: 700 15px/1.4 var(--msp-font) !important; }
#gform_wrapper_1 .gfield_error input, #gform_wrapper_1 .gfield_error select, #gform_wrapper_2 .gfield_error input { border-color: var(--msp-red-ink) !important; }
/* 1.4.1: the mobile-number hint (security-hardening.php) marks the box aria-invalid="true"; its red border comes from
   here. An inline border colour set by the script lost to the !important border rule above, so it never showed.
   It also wins over the focus border, so the box stays red while it is being corrected (the focus outline still shows). */
#gform_wrapper_1 input[type="tel"][aria-invalid="true"], #gform_wrapper_2 input[type="tel"][aria-invalid="true"] { border-color: var(--msp-red-ink) !important; }
/* the same for the homepage email check (an address it cannot accept; a suggested spelling is not marked invalid) */
#gform_wrapper_1 input[type="email"][aria-invalid="true"] { border-color: var(--msp-red-ink) !important; }
#gform_wrapper_1 .validation_message, #gform_wrapper_2 .validation_message { margin-top: 6px !important; padding: 0 !important; background: none !important; border: 0 !important; color: var(--msp-red-ink) !important; font-size: 13px !important; font-weight: 700 !important; }

/* lean form: hide the de-required fields (24/25/31) until WP4 decides them — reversible */
#gform_wrapper_1 .mpc-off, #gform_wrapper_2 .mpc-off { display: none !important; }

/* ---- postcode lookup UI (getaddress-lookup prints its own inline <style>; body-scoped wins) ---- */
body .address-search-wrap { gap: 8px; }
body .address-search-btn { height: 50px; padding: 0 18px; background: var(--msp-black); border-radius: 10px; font: 700 16px/1 var(--msp-font); }
body .address-search-btn:hover { background: var(--msp-red-ink); }
/* QA M2: the button also carries GF's `.button` class, and the orbital framework rule for it
   (.gform-theme.gform-theme--framework.gform_wrapper .button:where(...), 0,4,0) out-ranked the rule above,
   so it rendered white on #EF2E31 at 14px/500 (4.11:1). The wrapper id lifts ours over it:
   white on black is 21:1, and on the red-ink hover 5.2:1. */
html body #gform_wrapper_1 .address-search-btn, html body #gform_wrapper_2 .address-search-btn {
    height: 50px; min-height: 50px; padding: 0 18px; border: 0; border-radius: 10px; box-shadow: none;
    background: var(--msp-black); color: #FFFFFF; font: 700 16px/1 var(--msp-font); letter-spacing: 0; text-transform: none; opacity: 1;
}
html body #gform_wrapper_1 .address-search-btn:hover, html body #gform_wrapper_2 .address-search-btn:hover { background: var(--msp-red-ink); color: #FFFFFF; }
body .address-dropdown { border: 1.5px solid var(--msp-black); border-radius: 8px; box-shadow: var(--msp-shadow-soft); }
body .address-dropdown-item { font-size: 15px; }
body .address-dropdown-item:hover, body .address-dropdown-item:focus { background: var(--msp-tint-strong); }
body .address-manual-link, body .address-selected-summary .addr-change { color: var(--msp-red-ink); }
body .address-helper { color: var(--msp-muted); }
body .address-selected-summary { background: var(--msp-tint); border: 1.5px solid var(--msp-black); color: var(--msp-black); }

/* ---- signature pad (form 1 in-house signing; /mo has its own copy in mo.css) ---- */
.mpc-sig-wrap { margin: 18px 0 6px; }
.mpc-sig-title { color: var(--msp-black) !important; font: 800 16px/1.3 var(--msp-font) !important; }
.mpc-sig-padbox { background: #FFFFFF !important; border: 2px dashed var(--msp-black) !important; border-radius: 10px !important; }
/* CRO S8: 44px Clear button. GF's orbital button rule sets min-block-size (38px) at higher specificity, so the
   wrapper id and !important are needed here; min-height alone was ignored. */
html body #gform_wrapper_1 .mpc-sig-clear, html body #gform_wrapper_2 .mpc-sig-clear { min-block-size: 44px !important; min-height: 44px !important; min-width: 64px; }
.mpc-sig-clear { min-height: 44px; min-width: 64px; background: #FFFFFF !important; color: var(--msp-black) !important; border: 1.5px solid var(--msp-black) !important; border-radius: 5px !important; font-weight: 700 !important; }
.mpc-sig-clear:hover { background: var(--msp-black) !important; color: #FFFFFF !important; }
.mpc-sig-baseline { color: var(--msp-muted) !important; }   /* QA L4: was #94A3B8 on white (2.56:1); #4A4A4A is 8.9:1 */
.mpc-sig-legal { color: var(--msp-black) !important; font-size: 13px !important; line-height: 1.55 !important; }
.mpc-sig-legal a { color: var(--msp-red-ink); text-decoration: underline; }
/* 2026-10-16: the declaration is block content (p, p, ul, p: msp_sig_legal_html()) on both forms. The same size on
   both, and the paragraphs and list keep the container's 13px whatever the theme sets for p and li. */
.mpc-sig-legal p, .mpc-sig-legal ul, .mpc-sig-legal li { font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
.mpc-sig-legal p { margin: 0 0 8px; }
.mpc-sig-legal ul { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
.mpc-sig-legal li { margin: 0 0 4px; }
.mpc-sig-legal > :last-child { margin-bottom: 0; }

/* ---- the final-submit wait line (msp-leads assets/msp-leads.js, DESIGN §3.2; 2026-10-16) ----
   A status line under "Start My Claim" while the claim is checked: no overlay. It sits in the button row
   (flex-wrap), on a row of its own. Gravity Forms' own button spinner is hidden while it shows, so there is one
   indicator; the button label stays readable (GF makes it transparent behind its spinner, and Safari also sets
   -webkit-text-fill-color). The reduced-motion rule below freezes the small spinner: the words carry it. */
.msp-wait { flex: 1 1 100%; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; background: var(--msp-tint); border: 1.5px solid var(--msp-black); border-radius: 8px; color: var(--msp-black); font-size: 14px; font-weight: 700; line-height: 1.45; opacity: 0; }
.msp-wait.is-on { opacity: 1; }
.msp-wait__spin { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 3px solid var(--msp-line); border-top-color: var(--msp-red); border-radius: 50%; animation: msp-spin 1s linear infinite; }
@keyframes msp-spin { to { transform: rotate(360deg); } }
.msp-wait--fail { display: block; background: #FFF4F4; border: 2px solid var(--msp-red-ink); color: var(--msp-red-deep); }   /* one run of text with a link: not flex items */
.msp-wait a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#gform_wrapper_1.msp-waiting .gform-loader, #gform_wrapper_2.msp-waiting .gform-loader { display: none !important; }
#gform_wrapper_1.msp-waiting .gform-has-spinner, #gform_wrapper_2.msp-waiting .gform-has-spinner { -webkit-text-fill-color: currentColor !important; cursor: progress !important; }
/* the claim could not be confirmed: the form stays locked (a second send could make a second claim), and looks it */
#gform_wrapper_1.msp-wait-failed .gform_page_footer button, #gform_wrapper_1.msp-wait-failed .gform_footer button,
#gform_wrapper_2.msp-wait-failed .gform_footer button, #gform_wrapper_2.msp-wait-failed .gform-page-footer button { opacity: .45 !important; pointer-events: none !important; cursor: not-allowed !important; }

/* ---- the one-time-code box (msp-leads; it replaces the form inside the form card) ---- */
.msp-otp { margin: 0; color: var(--msp-black); font-family: var(--msp-font); }
.msp-otp:focus { outline: none; }
.msp-otp .msp-otp-h { margin: 0 0 8px !important; color: var(--msp-black) !important; font: 800 22px/1.25 var(--msp-display) !important; letter-spacing: 0 !important; }
.msp-otp .msp-otp-p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.msp-otp-form { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.msp-otp-form label { flex: 1 1 100%; margin: 0; color: var(--msp-black); font: 700 14px/1.35 var(--msp-font); }
.msp-otp-form input { flex: 1 1 180px; min-width: 0; min-height: 52px; margin: 0; padding: 10px 14px; box-sizing: border-box; background: #FFFFFF; color: var(--msp-black); border: 1.5px solid var(--msp-field); border-radius: 10px; font: 700 22px/1.2 var(--msp-font); letter-spacing: .14em; }
.msp-otp-form input:focus { border-color: var(--msp-black); box-shadow: 0 0 0 4px rgba(239, 46, 49, .25); outline: 2px solid var(--msp-focus); outline-offset: 1px; }
.msp-otp-form input:disabled { background: var(--msp-rule); color: var(--msp-muted); }
.msp-otp-button { flex: 1 1 140px; min-height: 52px; margin: 0; padding: 13px 22px; background: var(--msp-red); color: #FFFFFF; border: 0; border-radius: 10px; box-shadow: 0 14px 26px -14px rgba(239, 46, 49, .9); font: 700 20px/1.15 var(--msp-font); cursor: pointer; }
.msp-otp-button:not([disabled]):hover { background: var(--msp-hover-dark); }
.msp-otp-button:focus-visible { outline: 3px solid var(--msp-focus); outline-offset: 2px; }
.msp-otp-button[disabled] { opacity: .55; cursor: progress; box-shadow: none; }
.msp-otp-status, .msp-otp-msg { flex: 1 1 100%; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; }
/* Empty, the two lines stay in the accessibility tree (a live region inserted and filled in one step is not reliably
   announced), collapsed out of sight. Not display:none. */
.msp-otp-status:empty, .msp-otp-msg:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.msp-otp-msg { padding: 10px 12px; background: #FFF4F4; border: 2px solid var(--msp-red-ink); border-radius: 8px; color: var(--msp-red-deep); }
.msp-otp .msp-otp-help { margin: 0; color: var(--msp-muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 767px) {
    html body #gform_wrapper_1 .gform_next_button, html body #gform_wrapper_1 .gform_button, html body #gform_wrapper_2 .gform_button { flex-basis: 100%; }
    #gform_wrapper_1 .gform_page_footer .gform_previous_button { flex: 0 0 auto; padding-inline: 14px !important; white-space: nowrap; }
    html body #gform_wrapper_1 .gform_page_footer .gform_button { padding-inline: 12px !important; }
    #gform_wrapper_1 .gform_page_footer .gform_next_button { flex: 2 1 160px; }
}
@media (max-width: 380px) {
    #gform_wrapper_1 .gfield--type-radio .gchoice label { min-height: 46px; font-size: 15px !important; }
    .msp-formcard { padding: 18px 14px 14px; }
}

/* ============================================================================
   LEGACY CLASSES still in use: the /mo lander body (post 50, read by mo.css) and any page
   body not yet rewritten. Same look, so /mo matches the rest of the site with mo.css as is.
   ========================================================================== */
.mpc-hero { position: relative; overflow: hidden; background: #FFFFFF; padding: 26px 0 48px; }
.mpc-hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -180px; top: -160px; width: 560px; height: 560px; border-radius: 70px 300px 70px 70px; background: var(--msp-red); opacity: .045; transform: rotate(10deg); }
.mpc-hero-grain { display: none; }
.mpc-hero-inner { position: relative; z-index: 1; max-width: calc(var(--msp-container) + 2 * var(--msp-gutter)); margin: 0 auto; padding: 0 var(--msp-gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.mpc-hero-copy, .mpc-form-card, .mpc-qcard { min-width: 0; }
.mpc-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--msp-red-ink); font: 800 12px/1.2 var(--msp-font); letter-spacing: .14em; text-transform: uppercase; }
.mpc-eyebrow::before { content: ""; width: 14px; height: 14px; background: var(--msp-red); border-radius: 2px 7px 2px 2px; }
.mpc-hero-title { margin: 12px 0 10px; color: var(--msp-black); font: 800 clamp(2rem, 1.5rem + 2.2vw, 3.25rem)/1.08 var(--msp-display); letter-spacing: -.01em; }
.mpc-hero-title em { font-style: normal; color: var(--msp-red); }
body .mpc-hero-lede { color: var(--msp-black); font-size: 17px; line-height: 1.55; }
@media (max-width: 640px) { body .mpc-hero-lede { font-size: 15px; } }   /* CRO S12: mo.css asks for 15px on phones; this file used to out-rank it */
.mpc-hero-footnote { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--msp-muted); }
.mpc-hero-footnote a { color: var(--msp-red-ink); }
body .mpc-trust-row { color: var(--msp-black); font-size: 14px; }
.mpc-form-card, .mpc-qcard { position: relative; background: #FFFFFF; border: 2px solid var(--msp-black); border-radius: 24px 70px 24px 24px; box-shadow: var(--msp-shadow-soft); padding: 22px 18px 18px; scroll-margin-top: calc(var(--msp-header-h) + 14px); }
.mpc-qcard h2, .mpc-form-card h2 { margin: 0 0 14px; padding-right: 40px; color: var(--msp-black); font: 700 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--msp-display); letter-spacing: 0; }
.mpc-qcard .gform_wrapper, .mpc-form-card .gform_wrapper { margin: 0; }
.mpc-qcard-foot, .mpc-form-card-cta { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--msp-black); }
@media (min-width: 768px) { .mpc-form-card, .mpc-qcard { border-radius: 30px 120px 30px 30px; padding: 30px 30px 24px; } .mpc-qcard h2, .mpc-form-card h2 { padding-right: 70px; } }
/* CRO S12: on /mo the form copy's block headings print as <h2> (heading order); the card-title h2 rules above must not
   reach them, so they wrap exactly as the old <h3> did */
.mpc-form-card .mpc-signblock-h, .mpc-qcard .mpc-signblock-h { padding-right: 0; }
@media (min-width: 901px) {
    .mpc-hero { padding: 54px 0 70px; }
    .mpc-hero-inner { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 56px; align-items: start; }
    .mpc-hero-copy { padding-top: 18px; }
}

/* legacy buttons */
.mpc-cta, .mpc-cta-pill, .mpc-claim { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 26px; background: var(--msp-red); color: #FFFFFF !important; border: 0; border-radius: var(--msp-radius-btn); box-shadow: none; font: 700 20px/1.15 var(--msp-font); letter-spacing: 0; text-transform: none; text-decoration: none !important; cursor: pointer; }
.mpc-cta:hover, .mpc-cta-pill:hover, .mpc-claim:hover { background: var(--msp-hover-dark); transform: none; }
.mpc-cta-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px; background: transparent; color: var(--msp-black) !important; border: 2px solid var(--msp-black); border-radius: var(--msp-radius-btn); font: 700 18px/1.15 var(--msp-font); text-decoration: none !important; }
.mpc-cta-outline:hover { background: var(--msp-black); color: #FFFFFF !important; }
.mpc-wrap { max-width: calc(var(--msp-container) + 2 * var(--msp-gutter)); margin: 0 auto; padding: 0 var(--msp-gutter); }
.mpc-card { margin: 0 0 20px; padding: 24px 20px; background: #FFFFFF; border: 1.5px solid var(--msp-black); border-radius: var(--msp-radius-card); }

/* legacy legal wrapper: same rules as .msp-legal */
.mpc-legal { max-width: calc(860px + 2 * var(--msp-gutter)); margin: 0 auto; padding: 40px var(--msp-gutter) 72px; color: var(--msp-ink-2); font-size: 16px; line-height: 1.7; }
.mpc-legal h1 { margin: 0 0 10px; color: var(--msp-black); font: 800 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem)/1.12 var(--msp-display); letter-spacing: -.01em; }
.mpc-legal .mpc-legal-sub { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 2px solid var(--msp-black); font-size: 14px; color: var(--msp-muted); }
.mpc-legal h2 { margin: 40px 0 12px; padding-left: 14px; border-left: 4px solid var(--msp-red); color: var(--msp-black); font: 700 clamp(1.25rem, 1.12rem + .5vw, 1.5rem)/1.3 var(--msp-display); letter-spacing: 0; }
.mpc-legal h3 { margin: 26px 0 8px; color: var(--msp-black); font: 800 17px/1.4 var(--msp-font); letter-spacing: 0; }
.mpc-legal p, .mpc-legal li { margin: 0 0 12px; }
.mpc-legal ul, .mpc-legal ol { margin: 0 0 18px; padding-left: 1.45em; }
.mpc-legal a { color: var(--msp-red-ink); text-decoration: underline; overflow-wrap: anywhere; }
.mpc-legal table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; display: block; overflow-x: auto; }
.mpc-legal th { padding: 10px 12px; background: var(--msp-black); color: #FFFFFF; text-align: left; }
.mpc-legal td { padding: 10px 12px; border-top: 1px solid var(--msp-line); vertical-align: top; }
.mpc-legal-callout { margin: 0 0 24px; padding: 18px 20px; background: var(--msp-tint); border: 2px solid var(--msp-black); border-radius: var(--msp-radius-card); }

/* ============================================================================
   MOTION + PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .msp-btn--pulse { animation: none !important; }
}
@media print {
    .msp-header, .msp-drawer, .msp-drawer-backdrop, .mpc-cookie, .msp-skip, .msp-lenders__more { display: none !important; }
    .msp-band, .msp-strap, .msp-footer, .msp-lenders { background: #FFFFFF !important; color: #000000 !important; }
    .msp-js .msp-lenders__list:not(.is-open) { max-height: none !important; }
    .msp-js .msp-lenders__list::after { display: none !important; }
}