/*
Theme Name: MD4U Child
Theme URI: https://marketingdone4u.com
Description: MarketingDone4U child theme of Hello Elementor - brand token layer
Author: Fresh Digital
Template: hello-elementor
Version: 1.7.0
Text Domain: md4u-child
*/

/* [BRAND TOKENS] Every design token from ELEMENTOR-REBUILD-PLAN.md §3.1, values
   measured off the LIVE marketingdone4u.com 24 Aug 2026. Single CSS-variable
   source for anything outside Elementor (post content, funnel plugin, widgets).
   GLOBAL-COLOUR CHAIN (Mitch's must-rule, 24 Aug 2026): every colour token is
   now var(--e-global-color-{kit id}, #fallback), so changing a Global Color in
   the Elementor kit (Site Settings > Global Colors) recolours the whole build
   - widgets, page furniture, funnel, blog. The ids are the ones setup-kit.php
   creates (system: primary/secondary/text/accent; custom: navycard/navydeep/
   cyan/cream/white/lead/ondarkbody/ondarkdim/line/linkhover/footergrey), and
   Elementor prints them in post-{kit}.css on the body's .elementor-kit-{id}
   class. TRAP: a var() chain is resolved on the element that DECLARES it, so
   declaring these only on :root would resolve against html - where the kit
   vars do not exist - and freeze every token at its fallback. The body
   declaration below is the live one (kit vars + tokens meet on the same
   element); :root is the safety net for anything outside body. Fallbacks stay
   = the kit's shipped values, so a page without Elementor CSS renders
   identically. Used: sitewide. Added 24/08/2026, chained 24/08/2026. */
:root, body {
  --md4u-navy: var(--e-global-color-primary, #011627);          /* text, borders, hard shadows, navy bands */
  --md4u-navy-card: var(--e-global-color-navycard, #082137);    /* dark cards inside bands */
  --md4u-navy-deep: var(--e-global-color-navydeep, #0B2A45);    /* deep navy accents */
  --md4u-orange: var(--e-global-color-secondary, #FE7F2D);      /* primary CTA, link underline */
  --md4u-pink: var(--e-global-color-accent, #E5446D);           /* kicker, heading stop, focus ring */
  --md4u-cyan: var(--e-global-color-cyan, #2DE1FC);             /* on-dark shadows, step dots */
  --md4u-cream: var(--e-global-color-cream, #FFFAF4);           /* PAGE BACKGROUND - cream, never white */
  --md4u-white: var(--e-global-color-white, #FFFFFF);
  --md4u-muted: var(--e-global-color-text, #5A6770);            /* body copy */
  --md4u-lead: var(--e-global-color-lead, #3E4F5B);             /* lead paragraph copy */
  --md4u-on-dark-body: var(--e-global-color-ondarkbody, #C7D1D8); /* body copy on navy bands */
  --md4u-on-dark-dim: var(--e-global-color-ondarkdim, #BFCAD1);   /* dimmed copy on navy bands */
  --md4u-line: var(--e-global-color-line, rgba(1, 22, 39, 0.13)); /* hairline borders */
  --md4u-link-hover: var(--e-global-color-linkhover, #C2542C);  /* text link hover (darkened orange) */
  --md4u-footer-grey: var(--e-global-color-footergrey, #AAB8C1); /* footer small print */

  /* [AA TEXT TOKENS] 25 Aug 2026, verification round 2. The brand pink and the
     brand orange are display colours: at 12-17px they measure 3.90:1 and 2.53:1
     on white, both under the 4.5:1 WCAG AA floor for normal-size text. These two
     are the same hues darkened until they pass on BOTH grounds the site uses
     (white cards and the cream page), so small text can carry the brand colour
     without failing AA. Use the display token for dots, borders, shadows and
     large display type; use these for anything a reader has to READ.
       --md4u-pink-text   #C43A5E  5.10:1 on white, 4.92:1 on cream
       --md4u-orange-text #B0581F  4.93:1 on white, 4.75:1 on cream
     (--md4u-link-hover #C2542C is 4.57:1 on white but 4.40:1 on cream, so it is
     NOT safe for a link sitting on the page background; the blog uses
     --md4u-orange-text for every link hover instead.) */
  --md4u-pink-text: var(--e-global-color-pinktext, #C43A5E);
  --md4u-orange-text: var(--e-global-color-orangetext, #B0581F);

  /* [DERIVED ALPHAS] The kicker dot halo and the two hairline weights were bare
     rgba() literals in five places, so they alone ignored a Global Color change
     (proved 25 Aug: setting --e-global-color-accent green turned every pink on
     the blog green except the halo). Declared once here and re-derived from the
     token below wherever color-mix() is available; the literal stays as the
     fallback so an old engine still paints the shipped value. */
  --md4u-pink-halo: rgba(229, 68, 109, .14);
  --md4u-navy-halo: rgba(1, 22, 39, .14);
  --md4u-line-strong: rgba(1, 22, 39, .18);
  --md4u-font: Arial, Helvetica, sans-serif; /* the whole site - deliberate brand
                                                choice, no webfonts to self-host */
}

@supports (color: color-mix(in srgb, red 14%, transparent)) {
  :root, body {
    --md4u-pink-halo: color-mix(in srgb, var(--md4u-pink) 14%, transparent);
    --md4u-navy-halo: color-mix(in srgb, var(--md4u-navy) 14%, transparent);
    --md4u-line-strong: color-mix(in srgb, var(--md4u-navy) 18%, transparent);
  }
}

::selection { background: var(--md4u-pink); color: #fff; }

/* [BODY BASE] Cream page background (plan §3.1: cream, NOT white), Arial stack,
   antialiased smoothing matched to the LIVE site (plan §3.2 - live measures
   antialiased, unlike Core Comms where live was auto). Used: sitewide.
   Added 24/08/2026. */
body {
  background-color: var(--md4u-cream);
  font-family: var(--md4u-font);
  color: var(--md4u-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* [HEADING FACE] Hello Elementor's reset.css sets h1-h6 { font-family: inherit },
   so headings silently take the body face unless something names one (playbook
   trap 16 - it hid a wrong face across a whole site because widget CSS named
   each class individually). Named once at the brand layer; Elementor's global
   Primary typography can still override it. Headings are navy by default.
   Used: sitewide. Added 24/08/2026. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--e-global-typography-primary-font-family, var(--md4u-font));
  color: var(--md4u-navy);
}

/* [NO-PINK GUARD - HELLO RESET] Hello Elementor's reset.css paints every bare
   <button>/[type=button]/[type=submit] with border:1px solid #c36 + a #c36
   hover FILL, and every bare <a> with color:#c36. #c36 (#cc3366) is NOT the
   brand pink and must never appear (Mitch's rule, 20 Aug 2026). Why here and
   not per component: [type=button] is an ATTRIBUTE selector, so it ties with a
   component class on specificity and wins on load order - a component-level
   fix keeps regressing on every new page. Neutralised once at the brand layer;
   components then paint their own borders/states on top. Used: sitewide.
   Added 24/08/2026. */
a { color: var(--md4u-navy); }
a:hover, a:active { color: var(--md4u-link-hover); }
button, [type="button"], [type="submit"], [type="reset"] {
  border-color: var(--md4u-navy);
  color: inherit;
  background-color: transparent;
}
button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover {
  background-color: transparent;
  color: inherit;
}
/* Focus ring: brand pink, never the UA/theme default. */
a:focus-visible, button:focus-visible, [type="button"]:focus-visible,
[type="submit"]:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--md4u-pink);
  outline-offset: 2px;
}

/* [INLINE-COPY CLASSES] .heading-stop (pink full stop span on visible h1/h2,
   navy variant on the pink band) and .text-link (900/14, 2px orange underline,
   hover pink) are used INSIDE rich text (html-v3 spans/anchors). Elementor's
   Global Classes exist for both (g-heading-stop, g-text-link, canonical values
   in _working/wp-rebuild/md4u-atomic.php) but its per-page CSS only emits a
   Global Class when an ELEMENT references it - the usage scan cannot see inline
   spans, so a heading whose only .heading-stop is in its copy renders unstyled
   (found on the dev components page, 24/08/2026). These duplicates guarantee
   inline usage always styles; keep values in lockstep with md4u-atomic.php.
   Used: sitewide, every h1/h2 with a full stop; in-copy links. Added 24/08/2026. */
.heading-stop { color: var(--md4u-pink); }
.heading-stop-navy { color: var(--md4u-navy); }
.text-link {
  font-size: 14px;
  font-weight: 900;
  color: var(--md4u-navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--md4u-orange);
  text-underline-offset: 4px;
}
.text-link:hover {
  color: var(--md4u-pink);
  text-decoration-color: var(--md4u-pink);
}

/* [HIDDEN GUARD] A stylesheet setting display on an element (flex on containers,
   etc.) silently defeats the html hidden attribute; funnel steps and pop-out
   panels rely on it. Belt-and-braces at the brand layer. Used: sitewide.
   Added 24/08/2026. */
[hidden] { display: none !important; }

/* [REDUCED MOTION] Plan §3.4: prefers-reduced-motion zeroes ALL motion - button
   press-in transforms, entrance fades, breathe animations. One rule so no
   component can forget it. Used: sitewide. Added 24/08/2026. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== PHASE 3a PAGE FURNITURE (build-pages.php era) =====================
   Everything below is the LIVE site's family CSS ported for the WP rebuild
   (plan §7). Sources: home.css / site.css / pages.css / lander99.css /
   lander49.css / legal.css / local.css, fetched off the live docroot
   24 Aug 2026. Copy rules: scoping + li-to-p adaptations only - values
   are verbatim. Widget CSS stays in md4u-widgets/assets/md4u-widgets.css. */

/* live token aliases used by the ported files */
:root { --navy:#011627; --navy-card:#082137; --orange:#fe7f2d; --pink:#e5446d; --blue:#2de1fc; --cream:#fffaf4; --white:#ffffff; --muted:#5a6770; --line:rgba(1,22,39,0.13); }

/* [ATOMIC BASE RESET - PAGE SCOPES] The atomic bases carry real box styles at
   `.elementor .e-*-base` (0-2-0): div-block 10px padding + 30px min-width,
   flexbox 10px padding + FLEX-DIRECTION: ROW, e-button a blue default. The
   ported family CSS below assumes the live box model, so within the page
   families the bases are neutralised at EXACTLY 0-2-0 via :where() (zero
   specificity contribution) - this file loads after the Elementor uploads
   CSS, so these win the tie with the bases, while every family rule below
   (same or higher specificity, later in this file) wins over this reset.
   Section flow: column + stretch = normal block flow for stacked sections
   (the base's row direction collapsed any section without an explicit
   display rule - the /about band-navy bug, 24 Aug). Used: all Phase 3a
   pages. Added Phase 3a. */
.elementor .e-flexbox-base:where(.md4u-home, .s-page, .pg, .lp99, .lp49, .md4u-legal, .md4u-areas, .md4u-blog,
  .md4u-home *, .s-page *, .pg *, .lp99 *, .lp49 *, .md4u-legal *, .md4u-areas *, .md4u-blog *) {
  padding: 0; min-width: 0; flex-direction: column; align-items: stretch;
}
.elementor .e-div-block-base:where(.md4u-home, .s-page, .pg, .lp99, .lp49, .md4u-legal, .md4u-areas, .md4u-blog,
  .md4u-home *, .s-page *, .pg *, .lp99 *, .lp49 *, .md4u-legal *, .md4u-areas *, .md4u-blog *) {
  padding: 0; min-width: 0;
}
/* [BUTTON BASE FIX] `.elementor .e-button-base` paints every e-button blue
   with 12/24 padding and r2. The solid family buttons (.s-btn/.btn) redefine
   every one of those props so the prefixed ports below win; the TEXT-LINK
   buttons define none of them, so neutralise the base for those explicitly.
   Used: every page with a text link CTA. Added Phase 3a. */
.elementor a.e-button-base.text-link, .elementor a.e-button-base.s-textlink {
  display: inline-block; background: transparent; border-width: 0; border-radius: 0;
  padding: 7px 0; min-height: 0; box-shadow: none;
  font-weight: 900; font-size: 14px; color: var(--md4u-navy); text-align: center;
}
.elementor a.e-button-base.s-textlink { border-bottom: 2px solid var(--md4u-orange); }
.elementor a.e-button-base.s-textlink:hover { color: var(--md4u-pink); border-bottom-color: var(--md4u-pink); }
/* atomic p/heading bases keep 0 margins; the family rules below set the real ones */

.elementor /* [HOME FURNITURE] Port of home.css section furniture (measured live layer), .elementor scoped under .md4u-home (every top-level homepage section carries the class).
   Widget-owned rules (hero-visual, .elementor steps, .elementor faq list, .elementor service cards, .elementor promise, .elementor modal, .elementor mini-cart, .elementor price-alert) live in md4u-widgets.css and are NOT here.
   li-free: proof-row/plan-points/fit-list items are spans inside atomic
   paragraphs. Used: homepage only. Added Phase 3a. */
html { scroll-behavior: smooth; }
.elementor .md4u-home a { color: inherit; text-decoration: none; }
.elementor .md4u-home .section-kicker {
  margin: 0 0 22px; color: var(--md4u-pink);
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
}
.elementor .md4u-home.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px;
  min-height: 700px; max-width: 1240px; margin: 0 auto; padding: 72px 32px 96px;
}
.elementor .md4u-home .eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; color: var(--md4u-navy);
}
.elementor .md4u-home .eyebrow-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--md4u-pink); box-shadow: 0 0 0 5px rgba(229,68,109,.14); }
.elementor .md4u-home h1 {
  max-width: 720px; margin: 24px 0 24px;
  font-size: clamp(62px, 6.4vw, 94px); line-height: .92; letter-spacing: -6px; font-weight: 900;
}
.elementor .md4u-home h1 em { color: var(--md4u-pink); font-style: normal; }
.elementor .md4u-home .hero-lead { max-width: 620px; margin: 0; color: var(--md4u-lead); font-size: 20px; line-height: 1.55; }
.elementor .md4u-home .hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 34px; padding: 0; }
.elementor .md4u-home .proof-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 42px 0 0; font-size: 12px; font-weight: 800; color: var(--md4u-muted); }
.elementor .md4u-home .proof-row span::before { content: "\2713"; color: var(--md4u-pink); margin-right: 7px; }
.elementor .md4u-home h2 { margin: 0; font-size: clamp(39px, 5vw, 66px); line-height: 1.04; letter-spacing: -3px; font-weight: 900; }
.elementor .md4u-home.belief {
  padding: 110px max(32px, calc((100vw - 1020px) / 2));
  background: var(--md4u-navy); color: var(--md4u-white); text-align: center;
}
.elementor .md4u-home.belief h2 { max-width: 1000px; margin: 0 auto; color: var(--md4u-white); }
.elementor .md4u-home.belief .belief-copy { max-width: 730px; margin: 30px auto 0; color: var(--md4u-on-dark-body); font-size: 18px; line-height: 1.65; }
.elementor .md4u-home.how, .elementor .md4u-home.plan-builder, .elementor .md4u-home.dan-sec, .elementor .md4u-home.fit, .elementor .md4u-home.faq-sec { max-width: 1180px; margin: 0 auto; padding: 110px 32px; }
.elementor .md4u-home .section-heading { display: flex; flex-direction: row; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 52px; padding: 0; }
.elementor .md4u-home .section-heading .sh-copy { max-width: 420px; margin: 0 0 5px; color: var(--md4u-muted); font-size: 17px; line-height: 1.6; }
.elementor .md4u-home.services { padding: 110px max(32px, calc((100vw - 1180px) / 2)); background: var(--md4u-pink); color: var(--md4u-white); }
.elementor .md4u-home.services h2 { color: var(--md4u-white); }
.elementor .md4u-home .section-heading.light .sh-copy { color: rgba(255,255,255,.9); }
.elementor .md4u-home .section-heading.light .section-kicker { color: var(--md4u-navy); }
.elementor .md4u-home .terms-note { margin: 24px 0 0; color: rgba(255,255,255,.88); font-size: 11px; text-align: center; }
.elementor .md4u-home.plan-builder { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; }
.elementor .md4u-home .plan-copy .plan-intro { max-width: 620px; margin: 24px 0 28px; color: var(--md4u-muted); font-size: 18px; line-height: 1.6; }
.elementor .md4u-home .plan-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.elementor .md4u-home .plan-points span { padding: 15px; border: 1px solid var(--md4u-line); border-radius: 7px; background: white; font-size: 13px; font-weight: 800; text-align: left; }
.elementor .md4u-home .plan-points span::before { content: "\2713"; margin-right: 8px; color: var(--md4u-pink); }
.elementor .md4u-home .plan-panel { display: block; padding: 36px; border: 3px solid var(--md4u-navy); border-radius: 14px; background: white; box-shadow: 12px 12px 0 var(--md4u-orange); }
.elementor .md4u-home .plan-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0; font-size: 10px; font-weight: 900; letter-spacing: 1px; color: var(--md4u-navy); }
.elementor .md4u-home .selection-count { padding: 7px 9px; border-radius: 99px; background: var(--md4u-pink); color: white; }
.elementor .md4u-home .empty-plan { min-height: 92px; margin: 25px 0; padding: 27px 0; border-block: 1px solid var(--md4u-line); color: var(--md4u-muted); font-size: 14px; }
.elementor .md4u-home .plan-total { display: flex; flex-direction: row; justify-content: space-between; align-items: end; gap: 20px; margin: 25px 0; padding: 0; }
.elementor .md4u-home .plan-total .pt-label { max-width: 100px; margin: 0; font-size: 9px; font-weight: 900; letter-spacing: .8px; color: var(--md4u-navy); }
.elementor .md4u-home .plan-total .pt-amount { display: flex; align-items: end; margin: 0; color: var(--md4u-navy); }
.elementor .md4u-home .plan-total .pt-amount strong { font-size: 58px; line-height: .8; letter-spacing: -4px; }
.elementor .md4u-home .plan-total .pt-amount small, .elementor .md4u-home .plan-total .pt-amount .md4u-sm { margin-left: 8px; color: var(--md4u-muted); font-size: 10px; font-weight: 400; }
.elementor .md4u-home .plan-panel a[class*="btn-primary"] { width: 100%; }
.elementor .md4u-home .button-disabled, .elementor .button-disabled { background: #d8dee2 !important; color: #687680 !important; box-shadow: 5px 5px 0 #687680 !important; border-color: #687680 !important; pointer-events: none; }
.elementor .md4u-home .plan-small { margin: 20px 0 0; color: var(--md4u-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.elementor /* funnel staging: the package modal + mini-cart pre-placed for the Phase 4 cart
   wiring; hidden so the pre-wiring page matches live (live renders neither
   until home.js opens them). The funnel phase removes this guard. */
.md4u-home .md4u-funnel-staging { display: none !important; }
.elementor .md4u-home.dan-sec { padding-top: 45px; }
.elementor .md4u-home.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; border-top: 1px solid var(--md4u-line); align-items: center; }
.elementor .md4u-home.fit h2 { font-size: clamp(39px, 4.6vw, 60px); }
.elementor .md4u-home .fit-list { display: grid; gap: 12px; align-content: center; }
.elementor .md4u-home .fit-list p { margin: 0; padding: 17px 19px; border: 1px solid var(--md4u-line); border-radius: 7px; background: white; font-size: 14px; font-weight: 800; color: var(--md4u-navy); }
.elementor .md4u-home .fit-list p > span { margin-right: 11px; color: var(--md4u-pink); }
.elementor .md4u-home.faq-sec { padding-top: 45px; }
.elementor .md4u-home.faq-sec h2 { margin-bottom: 40px; }
.elementor .md4u-home.closing { padding: 100px max(32px, calc((100vw - 1180px) / 2)); display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 80px; background: var(--md4u-orange); color: var(--md4u-navy); }
.elementor .md4u-home.closing .section-kicker { color: var(--md4u-navy); }
.elementor .md4u-home .closing-action { padding-bottom: 6px; }
.elementor .md4u-home .closing-action p { max-width: 440px; margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--md4u-navy); }
@media (max-width: 900px) {
  .elementor .md4u-home { text-align: center; }
  .elementor .md4u-home.hero { grid-template-columns: 1fr; padding-top: 60px; gap: 25px; }
  .elementor .md4u-home .hero-copy { text-align: center; }
  .elementor .md4u-home .eyebrow, .elementor .md4u-home .hero-actions, .elementor .md4u-home .proof-row { justify-content: center; }
  .elementor .md4u-home h1, .elementor .md4u-home .hero-lead { margin-inline: auto; }
  .elementor .md4u-home.plan-builder, .elementor .md4u-home.fit { grid-template-columns: 1fr; gap: 55px; text-align: center; }
  .elementor .md4u-home .section-heading { align-items: center; flex-direction: column; text-align: center; }
  .elementor .md4u-home .section-heading .sh-copy { margin-inline: auto; }
  .elementor .md4u-home .plan-points span { text-align: center; }
  .elementor .md4u-home .plan-panel-top { justify-content: center; flex-wrap: wrap; }
  .elementor .md4u-home .plan-total { flex-direction: column; align-items: center; }
  .elementor .md4u-home .plan-total .pt-label { max-width: none; }
  .elementor .md4u-home .plan-total .pt-amount { justify-content: center; }
  .elementor .md4u-home.closing { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 620px) {
  .elementor .md4u-home.hero { padding: 52px 20px 70px; }
  .elementor .md4u-home h1 { margin-top: 22px; font-size: 54px; letter-spacing: -4px; }
  .elementor .md4u-home .hero-lead { font-size: 17px; }
  .elementor .md4u-home .hero-actions { flex-direction: column; gap: 18px; }
  .elementor .md4u-home .hero-actions a[class*="btn-primary"] { width: 100%; }
  .elementor .md4u-home .proof-row { flex-direction: column; }
  .elementor .md4u-home.belief { padding: 80px 20px; }
  .elementor .md4u-home h2 { letter-spacing: -2px; }
  .elementor .md4u-home.belief .belief-copy { font-size: 16px; }
  .elementor .md4u-home.how, .elementor .md4u-home.plan-builder, .elementor .md4u-home.dan-sec, .elementor .md4u-home.fit, .elementor .md4u-home.faq-sec { padding: 80px 20px; }
  .elementor .md4u-home .section-heading { align-items: center; flex-direction: column; gap: 20px; margin-bottom: 38px; text-align: center; }
  .elementor .md4u-home.services { padding: 80px 20px; }
  .elementor .md4u-home .plan-panel { padding: 27px 22px; }
  .elementor .md4u-home .plan-points { grid-template-columns: 1fr; }
  .elementor .md4u-home .plan-total .pt-amount strong { font-size: 48px; }
  .elementor .md4u-home.fit { gap: 40px; }
  .elementor .md4u-home.closing { padding: 80px 20px; }
}

/* ---- [S-FAMILY] site.css port (services + service pages + 404), verbatim minus :root/body, `.elementor `-prefixed to out-cascade the atomic bases ---- */
.elementor /* MD4U site.css — the new-brand layer for server-rendered pages (services + hub).
   Sits AFTER the compiled Tailwind css (which the nav partial needs); .s- classes
   are page components, .elementor element rules deliberately override preflight. */
:root {
  --navy: #011627;
  --orange: #fe7f2d;
  --pink: #e5446d;
  --blue: #2de1fc;
  --cream: #fffaf4;
  --white: #ffffff;
  --muted: #5a6770;
  --line: rgba(1, 22, 39, 0.13);
}
.elementor .s-page a { color: inherit; text-decoration: none; }

.elementor .s-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.elementor /* the homepage's kicker dot, .elementor so these pages read as the same system */
.s-kicker::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(229, 68, 109, .14);
}
.elementor .s-closing .s-kicker::before { box-shadow: 0 0 0 5px rgba(1, 22, 39, .12); }

.elementor .s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 28px;
  border: 2px solid var(--navy);
  border-radius: 7px;
  background: var(--orange);
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--navy);
  transition: transform .18s ease, box-shadow .18s ease;
}
.elementor .s-btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--navy); }
.elementor .s-btn.pink { background: var(--pink); color: #fff; }
.elementor .s-textlink { font-weight: 900; font-size: 14px; border-bottom: 2px solid var(--orange); padding: 7px 0; }

.elementor .s-hero { max-width: 1080px; margin: 0 auto; padding: 76px 24px 64px; text-align: center; }
.elementor .s-hero h1 {
  max-width: 900px;
  margin: 0 auto 22px;
  font-size: clamp(42px, 5.6vw, 72px);
  line-height: .98;
  letter-spacing: -3px;
  font-weight: 900;
}
.elementor .s-hero .s-lead { max-width: 660px; margin: 0 auto; color: #3e4f5b; font-size: 19px; line-height: 1.55; }
.elementor .s-hero-actions { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 32px; flex-wrap: wrap; }

.elementor .s-intro { max-width: 1080px; margin: 0 auto; padding: 40px 24px 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.elementor .s-intro-img { border: 3px solid var(--navy); border-radius: 14px; overflow: hidden; box-shadow: 16px 16px 0 var(--blue); }
.elementor .s-intro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elementor .s-intro h2 { margin: 0 0 16px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -1.8px; font-weight: 900; }
.elementor .s-intro p { margin: 0 0 24px; color: var(--muted); font-size: 17px; line-height: 1.65; }

.elementor .s-cards { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; }
.elementor .s-cards h2, .elementor .s-tiers h2, .elementor .s-addons h2 { margin: 0 0 10px; text-align: center; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -1.8px; font-weight: 900; }
.elementor .s-cards-sub, .elementor .s-tiers-sub { margin: 0 0 34px; text-align: center; color: var(--muted); font-size: 16px; }
.elementor .s-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.elementor .s-card { padding: 26px 22px; border: 3px solid var(--navy); border-radius: 12px; background: var(--white); box-shadow: 8px 8px 0 var(--pink); text-align: center; }
.elementor .s-card:nth-child(2) { box-shadow: 8px 8px 0 var(--orange); }
.elementor .s-card:nth-child(3) { box-shadow: 8px 8px 0 var(--blue); }
.elementor .s-card:nth-child(4) { box-shadow: 8px 8px 0 var(--navy); }
.elementor .s-card h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.6px; font-weight: 900; }
.elementor .s-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.elementor .s-tiers { padding: 80px max(24px, calc((100vw - 1120px) / 2)); background: var(--navy); color: var(--white); }
.elementor .s-tiers h2 { color: #fff; }
.elementor .s-tiers-sub { color: rgba(255,255,255,.75); }
.elementor .s-tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.elementor .s-tier { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border: 2px solid rgba(255,255,255,.2); border-radius: 14px; background: #082137; }
.elementor .s-tier.popular { border-color: var(--pink); background: #0b2a45; box-shadow: 10px 10px 0 var(--pink); }
.elementor .s-tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 99px; background: var(--pink); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .9px; white-space: nowrap; }
.elementor .s-tier h3 { margin: 0 0 14px; text-align: center; font-size: 22px; font-weight: 900; }
.elementor .s-tier-price { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin-bottom: 20px; }
.elementor .s-tier-price strong { font-size: 46px; letter-spacing: -2px; line-height: .9; }
.elementor .s-tier-price span { color: #bfcad1; font-size: 12px; }
.elementor .s-tier ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.elementor .s-tier li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: #d6dee3; }
.elementor .s-tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--pink); font-weight: 900; }
.elementor .s-tier li.lead-line { padding-left: 0; color: #9fb2bd; font-weight: 800; font-size: 12px; }
.elementor .s-tier li.lead-line::before { content: none; }
.elementor .s-tier .s-btn { width: 100%; margin-top: auto; min-height: 48px; font-size: 14px; }
.elementor .s-tiers-note { margin: 26px 0 0; text-align: center; color: rgba(255,255,255,.82); font-size: 11px; }

.elementor .s-addons { max-width: 980px; margin: 0 auto; padding: 70px 24px; }
.elementor .s-addons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.elementor .s-addon { padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.elementor .s-addon strong { display: block; margin-bottom: 6px; font-size: 15px; }
.elementor .s-addon p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.elementor .s-svcgrid { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.elementor .s-svc { display: flex; flex-direction: column; padding: 28px 24px; border: 3px solid var(--navy); border-radius: 12px; background: var(--white); box-shadow: 8px 8px 0 var(--navy); transition: transform .18s ease, box-shadow .18s ease; }
.elementor .s-svc:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--navy); }
.elementor .s-svc h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.6px; font-weight: 900; }
.elementor .s-svc p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.elementor .s-svc-price { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.elementor .s-svc-price small { color: var(--pink); font-size: 10px; font-weight: 900; letter-spacing: .6px; }
.elementor .s-svc-price strong { font-size: 30px; letter-spacing: -1.4px; }
.elementor .s-svc-price span { color: var(--muted); font-size: 12px; }
.elementor .s-svc-go { margin-top: 14px; color: #c2542c; font-size: 13px; font-weight: 900; }
.elementor .s-svc:hover .s-svc-go { color: var(--pink); }

.elementor .s-closing { padding: 84px max(24px, calc((100vw - 1080px) / 2)); background: var(--orange); color: var(--navy); text-align: center; }
.elementor .s-closing .s-kicker { color: var(--navy); }
.elementor .s-closing h2 { margin: 0 0 14px; font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -2.4px; line-height: 1.02; font-weight: 900; }
.elementor .s-closing p { max-width: 560px; margin: 0 auto 28px; font-size: 17px; line-height: 1.6; }
.elementor .s-closing .s-btn.pink { box-shadow: 5px 5px 0 var(--navy); }

@media (max-width: 900px) {
  .elementor /* brand rule: all content centred up to 900px */
  .s-page { text-align: center; }
  .elementor .s-kicker { justify-content: center; }
  .elementor .s-faq summary { justify-content: center; text-align: center; }
  .elementor .s-addon { text-align: center; }
  .elementor .s-hero { padding: 56px 20px 44px; }
  .elementor .s-intro { grid-template-columns: 1fr; gap: 30px; padding-bottom: 56px; text-align: center; }
  .elementor .s-cards-grid, .elementor .s-tiers-grid, .elementor .s-svcgrid { grid-template-columns: 1fr; }
  .elementor .s-tiers-grid { gap: 24px; }
  .elementor .s-addons-grid { grid-template-columns: 1fr; }
  .elementor .s-hero h1 { letter-spacing: -2px; }
}
@media (max-width: 620px) {
  .elementor .s-hero h1 { font-size: 38px; }
  .elementor .s-hero-actions { flex-direction: column; gap: 16px; }
  .elementor .s-hero-actions .s-btn { width: 100%; }
  .elementor .s-tiers { padding-top: 64px; padding-bottom: 64px; }
  .elementor .s-closing { padding-top: 64px; padding-bottom: 64px; }
  .elementor .s-closing .s-btn { width: 100%; }
}

.elementor /* steps + FAQ (added same night: per-service how-it-works and Good to know) */
.s-steps { max-width: 1080px; margin: 0 auto; padding: 70px 24px 70px; } /* live RENDERS 70px top (measured 24 Aug, Mitch's defect); the declared site.css rule says 0 but a later live rule adds it — declared-vs-rendered trap */
.elementor .s-steps h2 { margin: 0 0 26px; text-align: center; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -1.8px; font-weight: 900; }
.elementor .s-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--navy); }
.elementor .s-step { padding: 24px 20px 6px 0; }
.elementor .s-step + .s-step { padding-left: 20px; border-left: 1px solid var(--line); }
.elementor .s-step span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--navy); border-radius: 50%; background: var(--blue); font-weight: 900; }
.elementor .s-step:nth-child(2) span { background: var(--orange); }
.elementor .s-step:nth-child(3) span { background: var(--pink); color: #fff; }
.elementor .s-step h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 900; }
.elementor .s-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.elementor .s-faq { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
.elementor .s-faq h2 { margin: 0 0 24px; text-align: center; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -1.8px; font-weight: 900; }
.elementor .s-faq details { border-bottom: 1px solid var(--line); }
.elementor .s-faq details:first-of-type { border-top: 2px solid var(--navy); }
.elementor .s-faq summary { display: flex; justify-content: space-between; gap: 18px; padding: 20px 4px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 900; }
.elementor .s-faq summary::-webkit-details-marker { display: none; }
.elementor .s-faq summary span { color: var(--pink); font-size: 22px; flex: none; transition: transform .2s ease; }
.elementor .s-faq details[open] summary span { transform: rotate(45deg); }
.elementor .s-faq details p { margin: -4px 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 900px) {
  .elementor .s-steps-grid { grid-template-columns: 1fr; }
  .elementor .s-step, .elementor .s-step + .s-step { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); text-align: center; }
  .elementor .s-step span { margin-inline: auto; }
  .elementor .s-faq summary { text-align: left; }
}

.elementor /* In-copy text links on server-rendered pages (added 3 Aug 2026) */
.s-inline-link { border-bottom: 2px solid var(--orange); font-weight: 700; }
.elementor .s-inline-link:hover { border-bottom-color: var(--pink); }

.elementor /* [S-FAMILY ATOMIC ADAPTATION] The atomic build has no li elements and native
   .s-svc cards are e-flexbox anchors: re-target the handful of li-based and
   anchor-child rules from site.css. Used: /services, .elementor 404, .elementor paid-media. Added Phase 3a. */
.s-page .s-hero-actions { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 32px; flex-wrap: wrap; }
.elementor .s-hero .s-kicker, .elementor .s-cards .s-kicker, .elementor .s-closing .s-kicker { justify-content: center; }
.elementor .s-hero { text-align: center; }
.elementor .s-hero h1 { margin-left: auto; margin-right: auto; }
.elementor .s-hero .s-lead { margin-left: auto; margin-right: auto; }
.elementor .s-intro { text-align: left; }
.elementor .s-intro h2 { margin: 0 0 16px; }
.elementor .s-intro .e-paragraph-base { margin: 0 0 24px; color: var(--md4u-muted); font-size: 17px; line-height: 1.65; }
.elementor .s-cards .s-card { text-align: center; }
.elementor .s-card h3 { margin: 0 0 10px; }
.elementor .s-card p { margin: 0; }
.elementor .s-addon .s-addon-name { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--md4u-navy); }
.elementor .s-addon p { margin: 0; }
.elementor .s-tiers-sub a, .elementor .s-inline-link { color: inherit; }
.elementor a.s-svc { text-align: left; }
.elementor a.s-svc h3 { margin: 0 0 8px; }
.elementor a.s-svc p { margin: 0 0 18px; }
.elementor a.s-svc .s-svc-price { margin: auto 0 0; display: flex; align-items: baseline; gap: 6px; }
.elementor a.s-svc .s-svc-go { margin: 14px 0 0; color: var(--md4u-link-hover); font-size: 13px; font-weight: 900; }
@media (max-width: 900px) {
  .elementor .s-page, .elementor a.s-svc, .elementor .s-intro { text-align: center; }
  .elementor a.s-svc .s-svc-price { justify-content: center; }
}

.elementor /* [404 + HUB GRID WRAPPERS] The widget-rendered /services grid and the native
   404 / paid-media two-up grids need the live container metrics on their
   atomic wrappers. Used: /services, .elementor 404 template, .elementor /services/paid-media.
   Added Phase 3a. */
.s-svcgrid-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 70px; }
.elementor .s-svcgrid-wrap .s-cards-sub { margin: 34px auto 0; max-width: 980px; }
.elementor .s-svcgrid.s-svcgrid--404 { grid-template-columns: repeat(2, 1fr); max-width: 840px; margin: 0 auto; padding: 0; }
@media (max-width: 900px) { .elementor .s-svcgrid.s-svcgrid--404 { grid-template-columns: 1fr; } }
.elementor .pg .hero-cta { margin-top: 34px; }
.elementor .lp99 .belief-cta, .elementor .lp49 .belief-cta { margin-top: 56px; justify-content: center; }

/* ---- [PG-FAMILY] pages.css port (/about /contact /pricing), verbatim, `.elementor `-prefixed ---- */
.elementor /* MD4U shared page styles: /about, .elementor /contact, .elementor /pricing.
   Added 6 Aug 2026. These three pages were still rendering the compiled SPA's
   Tailwind classes (bg-brand-navy, .elementor rounded-[2rem], .elementor shadow-brand-orange/30), .elementor which is a third design generation on top of home.css and site.css. This file
   is the homepage system, .elementor with the tokens and component metrics copied out of
   home.css so they cannot drift.

   EVERY selector is scoped under .pg. Nothing here may touch the global nav or
   footer. Served immutable for a year: bump the ?v= in the page's PHP file, .elementor never edit in place and expect visitors to see it. */

.pg {
  --navy: #011627;
  --navy-card: #082137;
  --orange: #fe7f2d;
  --pink: #e5446d;
  --blue: #2de1fc;
  --cream: #fffaf4;
  --white: #ffffff;
  --muted: #5a6770;
  --line: rgba(1, 22, 39, 0.13);

  background: var(--cream);
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.elementor /* widget subtrees excluded: the prefixed `.elementor .pg *` (0-2-0) was
       zeroing md4u widget paddings/margins it used to lose to (found via the
       deep element diff: cream tier badge padding, .elementor price margins). :where()
       keeps the reset's original reach. */
.pg *:where(:not([class*="md4u-"]):not([class*="md4u-"] *)) { box-sizing: border-box; margin: 0; padding: 0; }
.elementor .pg a { color: inherit; text-decoration: none; }
.elementor .pg img { max-width: 100%; display: block; }
.elementor .pg li { list-style: none; }

.elementor .pg .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.elementor .pg section { padding: 92px 0; }

.elementor /* ---- type ---- */
.pg h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: .96; letter-spacing: -3px; font-weight: 700; }
.elementor .pg h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -2px; font-weight: 700; }
.elementor .pg h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.4px; }
.elementor .pg .heading-stop { color: var(--pink); }
.elementor .pg .kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  color: var(--pink); font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
}
.elementor .pg .kicker::before {
  content: ""; width: 9px; height: 9px; border-radius: 99px;
  background: var(--pink); box-shadow: 0 0 0 5px rgba(229, 68, 109, .14);
}
.elementor .pg .lead { max-width: 660px; margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.elementor .pg .section-intro { max-width: 740px; margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.elementor .pg .centre { text-align: center; }
.elementor .pg .body-copy p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.elementor .pg .body-copy p:first-child { margin-top: 0; }
.elementor .pg .body-copy strong { color: var(--navy); }
.elementor .pg .inline-link { border-bottom: 2px solid var(--orange); font-weight: 700; color: var(--navy); }

.elementor /* ---- buttons: identical metrics to .button in home.css ---- */
.pg .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 30px;
  border: 2px solid var(--navy); border-radius: 7px;
  background: var(--orange); color: var(--navy);
  font-size: 15px; font-weight: 900;
  box-shadow: 5px 5px 0 var(--navy);
  transition: transform .18s ease, box-shadow .18s ease;
}
.elementor .pg .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--navy); }
.elementor .pg .btn-pink { background: var(--pink); color: var(--white); }
.elementor .pg .btn-on-dark { box-shadow: 5px 5px 0 var(--blue); }
.elementor .pg .btn-on-dark:hover { box-shadow: 2px 2px 0 var(--blue); }
.elementor .pg .btn-sub { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }

.elementor /* ---- hero ---- */
.pg .hero { padding: 84px 0 76px; }
.elementor .pg .hero .lead { margin-inline: auto; }

.elementor /* ---- split intro (copy + image) ---- */
.pg .split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.elementor .pg .split-img { border: 3px solid var(--navy); border-radius: 18px; overflow: hidden; box-shadow: 16px 16px 0 var(--blue); }
.elementor .pg .split-img img { width: 100%; height: 100%; object-fit: cover; }

.elementor /* ---- generic cards ---- */
.pg .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 56px; }
.elementor .pg .cards.three { grid-template-columns: repeat(3, 1fr); }
.elementor .pg .cards.two { grid-template-columns: repeat(2, 1fr); }
.elementor .pg .card {
  padding: 30px 26px;
  border: 3px solid var(--navy); border-radius: 14px;
  background: var(--white); box-shadow: 8px 8px 0 var(--pink);
}
.elementor .pg .card:nth-child(2) { box-shadow: 8px 8px 0 var(--orange); }
.elementor .pg .card:nth-child(3) { box-shadow: 8px 8px 0 var(--blue); }
.elementor .pg .card:nth-child(4) { box-shadow: 8px 8px 0 var(--navy); }
.elementor .pg .card .icon { margin-bottom: 16px; color: var(--pink); }
.elementor .pg .card p { margin-top: 11px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.elementor /* ---- dark band ---- */
.pg .band-navy { background: var(--navy); color: var(--white); }
.elementor .pg .band-navy .kicker { color: var(--blue); }
.elementor .pg .band-navy .kicker::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(45, 225, 252, .2); }
.elementor .pg .band-navy .section-intro { color: rgba(255, 255, 255, .82); }
.elementor .pg .band-navy .card { background: var(--navy-card); border-color: rgba(255, 255, 255, .16); box-shadow: none; color: var(--white); }
.elementor .pg .band-navy .card p { color: rgba(255, 255, 255, .76); }
.elementor .pg .band-navy .card .icon { color: var(--blue); }

.elementor /* ---- pricing tiers ---- */
.pg .svc { padding: 78px 0; border-top: 2px solid var(--line); }
.elementor .pg .svc:nth-child(even) { background: var(--white); }
.elementor .pg .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; align-items: start; }
.elementor .pg .tier {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 34px 28px;
  border: 3px solid var(--navy); border-radius: 16px;
  background: var(--cream); box-shadow: 10px 10px 0 var(--navy);
}
.elementor .pg .svc:nth-child(even) .tier { background: var(--white); }
.elementor .pg .tier.popular { box-shadow: 10px 10px 0 var(--pink); }
.elementor .pg .tier-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border: 2px solid var(--navy); border-radius: 99px;
  background: var(--pink); color: var(--white);
  font-size: 10px; font-weight: 900; letter-spacing: 1px; white-space: nowrap;
}
.elementor .pg .tier h3 { font-size: 15px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pink); }
.elementor .pg .tier-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 22px; }
.elementor .pg .tier-price strong { font-size: 52px; line-height: .9; letter-spacing: -3px; font-weight: 700; color: var(--navy); }
.elementor .pg .tier-price span { font-size: 15px; font-weight: 900; color: var(--muted); }
.elementor /* Features read left-aligned: the section wrapper is .centre, .elementor and inheriting
   that left multi-line items like "5 page website (Home, .elementor About, .elementor Contact, .elementor 1
   Service, .elementor 1 Location)" ragged on both edges. Name and price stay centred.
   The <=900px rule below re-centres everything, .elementor per the brand rule. */
.pg .tier ul { display: grid; gap: 11px; margin-bottom: 26px; text-align: left; }
.elementor .pg .tier li { font-size: 14px; line-height: 1.5; }
.elementor .pg .tier li::before { content: "\2713"; color: var(--pink); margin-right: 9px; font-weight: 900; }
.elementor .pg .tier .btn { margin-top: auto; width: 100%; }

.elementor /* ---- contact form ---- */
.pg .contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.elementor .pg .form-card {
  padding: 36px;
  border: 3px solid var(--navy); border-radius: 18px;
  background: var(--white); box-shadow: 16px 16px 0 var(--blue);
  text-align: left;
}
.elementor .pg .field { margin-bottom: 20px; }
.elementor .pg .field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 900; letter-spacing: .3px; }
.elementor .pg .field input, .elementor .pg .field textarea, .elementor .pg .field select {
  width: 100%; padding: 13px 15px;
  border: 2px solid var(--navy); border-radius: 8px;
  background: var(--white); color: var(--navy);
  font-family: inherit; font-size: 15px;
}
.elementor .pg .field textarea { min-height: 132px; resize: vertical; }
.elementor .pg .field input:focus, .elementor .pg .field textarea:focus, .elementor .pg .field select:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(229, 68, 109, .16);
}
.elementor .pg .field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.elementor .pg .form-card .btn { width: 100%; }
.elementor .pg .form-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.elementor .pg .form-status { margin-top: 18px; padding: 14px 16px; border: 2px solid var(--navy); border-radius: 8px; font-size: 14px; font-weight: 700; }
.elementor .pg .form-status[data-state="ok"] { background: rgba(45, 225, 252, .16); }
.elementor .pg .form-status[data-state="error"] { background: rgba(229, 68, 109, .14); }
.elementor .pg .btn[disabled] { opacity: .6; pointer-events: none; }

.elementor /* ---- contact details list ---- */
.pg .detail { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); text-align: left; }
.elementor .pg .detail:last-child { border-bottom: 0; }
.elementor .pg .detail-icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--navy); border-radius: 50%; background: var(--blue);
}
.elementor .pg .detail h3 { font-size: 13px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pink); }
.elementor .pg .detail p { margin-top: 5px; font-size: 17px; font-weight: 700; word-break: break-word; }
.elementor .pg .detail small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }

.elementor /* ---- closing ---- */
.pg .closing { background: var(--orange); color: var(--navy); }
.elementor .pg .closing .kicker { color: var(--navy); }
.elementor .pg .closing .kicker::before { background: var(--navy); box-shadow: 0 0 0 5px rgba(1, 22, 39, .14); }
.elementor .pg .closing p { max-width: 700px; margin: 20px auto 32px; font-size: 17px; line-height: 1.6; }
.elementor .pg .closing .btn { background: var(--navy); color: var(--white); }

/* ---- responsive. Brand rule: all content centred up to 900px. ---- */
@media (max-width: 1080px) {
  .elementor .pg .cards { grid-template-columns: repeat(2, 1fr); }
  .elementor .pg .tiers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .elementor .pg { text-align: center; }
  .elementor .pg section, .elementor .pg .svc { padding: 70px 0; }
  .elementor .pg .split, .elementor .pg .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .elementor .pg .lead, .elementor .pg .section-intro { margin-inline: auto; }
  .elementor .pg .kicker { justify-content: center; }
  .elementor .pg .tier-price { justify-content: center; }
  .elementor .pg .tier ul, .elementor .pg .form-card, .elementor .pg .detail { text-align: center; }
  .elementor .pg .detail { flex-direction: column; align-items: center; }
  .elementor .pg .field label { text-align: center; }
}
@media (max-width: 620px) {
  .elementor .pg .wrap { padding: 0 20px; }
  .elementor .pg h1 { font-size: 40px; letter-spacing: -2px; }
  .elementor .pg h2 { font-size: 30px; letter-spacing: -1.3px; }
  .elementor .pg .cards { grid-template-columns: 1fr; }
  .elementor .pg .form-card { padding: 26px 22px; }
  .elementor .pg .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .pg *, .elementor .pg *::before, .elementor .pg *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.elementor /* [PG-FAMILY ATOMIC ADAPTATION + ELEMENTOR PRO FORM MAPPING] pages.css is
   ported verbatim above; this block (a) re-targets its body-copy/hero spacing
   onto atomic paragraph structure, .elementor (b) maps the live .form-card input spec onto
   Elementor Pro form markup (the contact form is a Pro form widget - plan §7
   row 12), .elementor (c) flips even /pricing service sections white at build-computed
   class .svc--even (live uses :nth-child, .elementor which Elementor's wrapper order
   changes). Used: /about, .elementor /contact, .elementor /pricing. Added Phase 3a. */
.pg section, .elementor .pg .svc { display: block; }
.elementor .pg .wrap { display: block; }
.elementor .pg .hero .kicker, .elementor .pg .centre .kicker { justify-content: center; }
.elementor .pg .hero { text-align: center; }
.elementor .pg .hero .lead { margin-left: auto; margin-right: auto; }
.elementor .pg .split { text-align: left; }
.elementor .pg .body-copy .e-paragraph-base { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--md4u-muted); }
.elementor .pg .body-copy .e-paragraph-base:first-child { margin-top: 0; }
.elementor .pg .cards .card h3 { font-size: 19px; }
.elementor .pg .card p { margin-top: 11px; }
.elementor .pg .svc--even { background: var(--md4u-white); }
.elementor .pg .svc--even .md4u-tiers--cream .md4u-tiers__tier { background: var(--md4u-white); }
.elementor .pg .svc .md4u-tiers { margin-top: 48px; }
.elementor .pg .svc-link { margin-top: 18px; }
.elementor .pg .band-navy h2, .elementor .pg .band-navy h3, .elementor .pg .band-navy p { color: var(--md4u-white); }
.elementor .pg .band-navy .card p { color: rgba(255,255,255,.76); }
.elementor .pg .closing h2 { color: var(--md4u-navy); }
.elementor .pg .closing .btn-navy-btn { background: var(--md4u-navy); color: var(--md4u-white); }
.elementor /* contact: detail list built atomically */
.pg .detail .detail-body h3 { margin: 0; }
.elementor .pg .detail .detail-body p { margin-top: 5px; font-size: 17px; font-weight: 700; word-break: break-word; color: var(--md4u-navy); }
.elementor .pg .detail .detail-body small, .elementor .pg .detail .detail-body .detail-small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--md4u-muted); }
.elementor /* Elementor Pro form -> live .form-card field spec */
.pg .form-card { display: block; }
.elementor .pg .form-card .elementor-form-fields-wrapper { gap: 20px 0; }
.elementor .pg .form-card .elementor-field-group { margin-bottom: 0; padding: 0; }
.elementor .pg .form-card .elementor-field-group > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 900; letter-spacing: .3px; color: var(--md4u-navy); }
.elementor .pg .form-card input.elementor-field, .elementor .pg .form-card textarea.elementor-field, .elementor .pg .form-card select.elementor-field {
  width: 100%; padding: 13px 15px; border: 2px solid var(--md4u-navy); border-radius: 8px;
  background: var(--md4u-white); color: var(--md4u-navy); font-family: inherit; font-size: 15px;
}
.elementor .pg .form-card textarea.elementor-field { min-height: 132px; resize: vertical; }
.elementor .pg .form-card input.elementor-field:focus, .elementor .pg .form-card textarea.elementor-field:focus, .elementor .pg .form-card select.elementor-field:focus {
  outline: none; border-color: var(--md4u-pink); box-shadow: 0 0 0 4px rgba(229, 68, 109, .16);
}
.elementor .pg .form-card .elementor-field-type-submit { margin-top: 6px; }
.elementor .pg .form-card button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 0 30px; border: 2px solid var(--md4u-navy); border-radius: 7px;
  background: var(--md4u-orange); color: var(--md4u-navy); font-size: 15px; font-weight: 900;
  box-shadow: 5px 5px 0 var(--md4u-navy); transition: transform .18s ease, box-shadow .18s ease; cursor: pointer;
}
.elementor .pg .form-card button[type="submit"]:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-navy); background: var(--md4u-orange); color: var(--md4u-navy); }
@media (max-width: 900px) {
  .elementor .pg .split, .elementor .pg .band-navy, .elementor .pg .form-card, .elementor .pg .detail { text-align: center; }
  .elementor .pg .form-card .elementor-field-group > label { text-align: center; }
  .elementor .pg .detail { flex-direction: column; align-items: center; }
}

/* ---- [LP99] lander99.css port, verbatim, `.elementor `-prefixed ---- */
.elementor /* MD4U /websites-from-99 landing page.
   Rebuilt 6 Aug 2026 in the homepage design system: cream page, .elementor Arial, .elementor pop-art
   hard offset shadows (solid, .elementor no blur), .elementor pink heading full stops, .elementor pink services
   band with navy cards. Tokens and component metrics copied from home.css so
   the two pages cannot drift apart.

   EVERY selector is scoped under .lp99. The artifact this page came from had
   80+ global selectors (.container, .elementor .btn, .elementor footer, .elementor h1-h3, .elementor img) which would have
   restyled the global nav and footer. Keep it scoped.

   Served immutable for a year: bump the ?v= in pages/websites-from-99.php, .elementor never edit this file in place and expect visitors to see it. */

.lp99 {
  --navy: #011627;
  --navy-card: #082137;
  --orange: #fe7f2d;
  --pink: #e5446d;
  --blue: #2de1fc;
  --cream: #fffaf4;
  --white: #ffffff;
  --muted: #5a6770;
  --line: rgba(1, 22, 39, 0.13);

  background: var(--cream);
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.elementor .lp99 *:where(:not([class*="md4u-"]):not([class*="md4u-"] *)) { box-sizing: border-box; margin: 0; padding: 0; }
.elementor .lp99 a { color: inherit; text-decoration: none; }
.elementor .lp99 img { max-width: 100%; display: block; }
.elementor .lp99 li { list-style: none; }

.elementor .lp99 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.elementor .lp99 section { padding: 96px 0; }

.elementor /* ---- type ---- */
.lp99 h1 {
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: .96;
  letter-spacing: -3px;
  font-weight: 700;
}
.elementor .lp99 h1 em { color: var(--pink); font-style: normal; }
.elementor .lp99 h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 700;
}
.elementor .lp99 h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.5px; }
.elementor .lp99 .heading-stop { color: var(--pink); }
.elementor .lp99 .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.elementor .lp99 .kicker::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--pink);
  box-shadow: 0 0 0 5px rgba(229, 68, 109, .14);
}
.elementor .lp99 .lead { max-width: 620px; margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.elementor .lp99 .section-intro { max-width: 720px; margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.elementor .lp99 .centre { text-align: center; }

.elementor /* ---- buttons ---- */
.lp99 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 30px;
  border: 2px solid var(--navy);
  border-radius: 7px;
  background: var(--orange);
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--navy);
  transition: transform .18s ease, box-shadow .18s ease;
}
.elementor .lp99 .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--navy); }
.elementor .lp99 .btn-sub { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }
.elementor .lp99 .btn-on-dark { box-shadow: 5px 5px 0 var(--blue); }
.elementor .lp99 .btn-on-dark:hover { box-shadow: 2px 2px 0 var(--blue); }

.elementor /* ---- hero ---- */
.lp99 .hero { padding: 80px 0 96px; }
.elementor .lp99 .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; }
.elementor .lp99 .price-flag {
  display: inline-block;
  margin-bottom: 26px;
  padding: 11px 20px;
  border: 2px solid var(--navy);
  border-radius: 99px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--blue);
  font-size: 13px;
  font-weight: 900;
}
.elementor .lp99 .hero-actions { margin-top: 34px; }
.elementor .lp99 .trust-strip { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 14px; font-weight: 700; }
.elementor .lp99 .trust-strip li::before { content: "\2713"; color: var(--pink); margin-right: 8px; font-weight: 900; }

.elementor /* Meet Dan card. The portrait is photographic, .elementor so the fictional-guide
   disclosure directly beneath it is mandatory (dan-harper-compliance.md). */
.lp99 .dan-card {
  padding: 32px;
  border: 3px solid var(--navy);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 16px 16px 0 var(--blue);
  text-align: center;
}
.elementor .lp99 .dan-card img {
  width: 190px; height: 190px;
  margin: 0 auto 20px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--pink);
}
.elementor .lp99 .dan-name { font-size: 15px; font-weight: 900; }
.elementor .lp99 .dan-disc { margin-top: 8px; font-size: 12px; color: var(--muted); }
.elementor .lp99 .dan-points { display: grid; gap: 12px; margin-top: 24px; text-align: left; }
.elementor .lp99 .dan-points li { font-size: 14px; font-weight: 700; }
.elementor .lp99 .dan-points li::before { content: "\2713"; color: var(--pink); margin-right: 9px; font-weight: 900; }

.elementor /* ---- pain cards ---- */
.lp99 .pain { background: var(--white); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.elementor .lp99 .pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 56px; }
.elementor .lp99 .pain-card {
  padding: 30px 26px;
  border: 3px solid var(--navy);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--pink);
}
.elementor .lp99 .pain-card:nth-child(2) { box-shadow: 8px 8px 0 var(--orange); }
.elementor .lp99 .pain-card:nth-child(3) { box-shadow: 8px 8px 0 var(--blue); }
.elementor .lp99 .pain-card:nth-child(4) { box-shadow: 8px 8px 0 var(--navy); }
.elementor .lp99 .pain-card .icon { font-size: 30px; margin-bottom: 16px; }
.elementor .lp99 .pain-card p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.elementor .lp99 .pain-note { margin-top: 52px; font-size: 19px; font-weight: 700; line-height: 1.5; }

.elementor /* ---- belief ---- */
.lp99 .belief h2 { max-width: 1000px; margin: 0 auto; }
.elementor .lp99 .belief-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 34px; margin-top: 60px; text-align: left; }
.elementor .lp99 .belief-grid h3 { margin-bottom: 9px; }
.elementor .lp99 .belief-grid p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.elementor .lp99 .belief-grid li::before {
  content: "\2713";
  display: block;
  margin-bottom: 12px;
  color: var(--pink);
  font-size: 22px;
  font-weight: 900;
}

.elementor /* ---- steps ---- */
.lp99 .steps { background: var(--white); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.elementor .lp99 .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 58px; }
.elementor .lp99 .step .num {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 20px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--blue);
  font-size: 17px;
  font-weight: 900;
}
.elementor .lp99 .step:nth-child(2) .num { background: var(--pink); color: var(--white); }
.elementor .lp99 .step:nth-child(3) .num { background: var(--orange); }
.elementor .lp99 .step p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.elementor /* ---- includes: pink band, .elementor navy cards (approved website colour pattern) ---- */
.lp99 .includes { background: var(--pink); color: var(--white); }
.elementor .lp99 .includes .kicker { color: var(--white); }
.elementor .lp99 .includes .kicker::before { background: var(--white); box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); }
.elementor .lp99 .includes .section-intro { color: rgba(255, 255, 255, .88); }
.elementor .lp99 .includes .heading-stop { color: var(--navy); }
.elementor .lp99 .includes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; text-align: left; }
.elementor .lp99 .include {
  padding: 26px 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: var(--navy-card);
}
.elementor .lp99 .include strong { display: block; margin-bottom: 9px; font-size: 16px; }
.elementor .lp99 .include strong::before { content: "\2713"; color: var(--blue); margin-right: 9px; }
.elementor .lp99 .include p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

.elementor /* ---- comparison ---- */
.lp99 .table-wrap {
  margin-top: 52px;
  overflow-x: auto;
  border: 3px solid var(--navy);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 12px 12px 0 var(--orange);
}
.elementor .lp99 .compare table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.elementor .lp99 .compare th, .elementor .lp99 .compare td { padding: 17px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.elementor .lp99 .compare thead th { background: var(--navy); color: var(--white); font-size: 13px; letter-spacing: .4px; }
.elementor .lp99 .compare thead th:nth-child(2) { background: var(--pink); }
.elementor .lp99 .compare tbody th { font-weight: 700; }
.elementor .lp99 .compare td.yes { font-weight: 900; }
.elementor .lp99 .compare td.no { color: var(--muted); }
.elementor .lp99 .compare tr:last-child th, .elementor .lp99 .compare tr:last-child td { border-bottom: 0; }

.elementor /* ---- price ---- */
.lp99 .price-box {
  max-width: 640px;
  margin: 56px auto 0;
  padding: 44px 40px;
  border: 3px solid var(--navy);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 16px 16px 0 var(--blue);
  text-align: center;
}
.elementor .lp99 .price-box .tier { font-size: 13px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pink); }
.elementor /* colour set explicitly: `.price-box > p` below also matches .amount, .elementor and
   without this the headline price rendered in muted grey. */
.lp99 .price-box .amount { margin: 14px 0 6px; font-size: 82px; line-height: .86; letter-spacing: -5px; font-weight: 700; color: var(--navy); }
.elementor .lp99 .price-box .amount span { font-size: 20px; letter-spacing: 0; font-weight: 900; color: var(--muted); }
.elementor .lp99 .price-box .amount .heading-stop { letter-spacing: -5px; }
.elementor .lp99 .price-box > p { margin-bottom: 30px; font-size: 16px; color: var(--muted); }
.elementor .lp99 .price-box ul { display: grid; gap: 13px; margin: 0 0 34px; text-align: left; }
.elementor .lp99 .price-box li { font-size: 15px; }
.elementor .lp99 .price-box li::before { content: "\2713"; color: var(--pink); margin-right: 11px; font-weight: 900; }
.elementor .lp99 .guarantee { margin-top: 20px; font-size: 13px; color: var(--muted); }

.elementor /* Mandatory pricing-transparency block (dan-harper-compliance.md §8). Readable, .elementor not buried: normal body size, .elementor full contrast, .elementor directly under the price. */
.lp99 .terms {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 24px 28px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: var(--white);
  text-align: left;
}
.elementor .lp99 .terms p { font-size: 14px; line-height: 1.7; color: var(--navy); }
@media (max-width: 900px) { .elementor .lp99 .terms { text-align: center; } }

.elementor /* ---- faq ---- */
.lp99 .faq { background: var(--white); border-top: 2px solid var(--line); }
.elementor .lp99 .faq-list { max-width: 860px; margin: 50px auto 0; text-align: left; }
.elementor .lp99 .faq-item { border-bottom: 1px solid var(--line); }
.elementor .lp99 .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
}
.elementor .lp99 .faq-item summary::-webkit-details-marker { display: none; }
.elementor .lp99 .faq-item summary::after { content: "+"; color: var(--pink); font-size: 27px; font-weight: 400; transition: transform .2s ease; }
.elementor .lp99 .faq-item[open] summary::after { transform: rotate(45deg); }
.elementor .lp99 .faq-item .answer { padding: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.elementor /* ---- closing ---- */
.lp99 .final { background: var(--navy); color: var(--white); }
.elementor .lp99 .final .kicker { color: var(--blue); }
.elementor .lp99 .final .kicker::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(45, 225, 252, .2); }
.elementor .lp99 .final .heading-stop { color: var(--pink); }
.elementor .lp99 .final p { max-width: 700px; margin: 22px auto 34px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.elementor .lp99 .final .btn-sub { color: rgba(255, 255, 255, .66); }

/* ---- responsive. Brand rule: all content centred up to 900px. ---- */
@media (max-width: 1080px) {
  .elementor .lp99 .pain-grid, .elementor .lp99 .belief-grid, .elementor .lp99 .includes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .elementor .lp99 { text-align: center; }
  .elementor .lp99 section { padding: 72px 0; }
  .elementor .lp99 .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .elementor .lp99 .lead, .elementor .lp99 .section-intro { margin-inline: auto; }
  .elementor .lp99 .kicker, .elementor .lp99 .trust-strip { justify-content: center; }
  .elementor .lp99 .steps-grid { grid-template-columns: 1fr; }
  .elementor .lp99 .step .num { margin-inline: auto; }
  .elementor .lp99 .belief-grid, .elementor .lp99 .includes-grid { text-align: center; }
  .elementor .lp99 .dan-points { text-align: center; }
  .elementor .lp99 .dan-points li::before, .elementor .lp99 .price-box li::before { margin-right: 8px; }
  .elementor .lp99 .price-box ul { text-align: center; }
  .elementor .lp99 .faq-list { text-align: center; }
  .elementor .lp99 .faq-item summary { justify-content: center; text-align: center; }
  .elementor .lp99 .compare table { text-align: center; }
}
@media (max-width: 620px) {
  .elementor .lp99 .wrap { padding: 0 20px; }
  .elementor .lp99 h1 { font-size: 40px; letter-spacing: -2px; }
  .elementor .lp99 h2 { font-size: 32px; letter-spacing: -1.4px; }
  .elementor .lp99 .pain-grid, .elementor .lp99 .belief-grid, .elementor .lp99 .includes-grid { grid-template-columns: 1fr; }
  .elementor .lp99 .price-box { padding: 34px 24px; }
  .elementor .lp99 .price-box .amount { font-size: 64px; letter-spacing: -3px; }
  .elementor .lp99 .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .lp99 *, .elementor .lp99 *::before, .elementor .lp99 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- [LP49] lander49.css port, verbatim, `.elementor `-prefixed ---- */
.elementor /* MD4U /marketing-from-49 landing page.
   Built 13 Aug 2026 as the marketing twin of /websites-from-99. Same design
   system as the homepage and lander99.css: cream page, .elementor Arial, .elementor pop-art hard
   offset shadows (solid, .elementor no blur), .elementor pink heading full stops, .elementor pink services band
   with navy #082137 cards. Tokens and component metrics are copied from
   home.css / lander99.css so the three cannot drift apart.

   EVERY selector is scoped under .lp49. lander99.css learned this the hard way:
   the artifact it came from had 80+ global selectors that would have restyled
   the global nav and footer. Keep it scoped.

   Served immutable for a year: bump the ?v= in pages/marketing-from-49.php, .elementor never edit this file in place and expect visitors to see it.

   What is here that lander99.css does not have:
   - .svc-* the four-service band (pink background, .elementor navy cards, .elementor tier rows with
     the Growth MOST POPULAR badge, .elementor CTA anchored to the bottom of every card).
   - .price-grid two-box pricing (Starter and Growth side by side) because the
     brand rule is that Growth is always marked as the recommended package.
   - .adspend the mandatory "Ad spend is separate" note on Google Ads and paid
     social. Brand rule, .elementor not decoration: do not remove it. */

.lp49 {
  --navy: #011627;
  --navy-card: #082137;
  --orange: #fe7f2d;
  --pink: #e5446d;
  --blue: #2de1fc;
  --cream: #fffaf4;
  --white: #ffffff;
  --muted: #5a6770;
  --line: rgba(1, 22, 39, 0.13);

  background: var(--cream);
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.elementor .lp49 *:where(:not([class*="md4u-"]):not([class*="md4u-"] *)) { box-sizing: border-box; margin: 0; padding: 0; }
.elementor .lp49 a { color: inherit; text-decoration: none; }
.elementor .lp49 img { max-width: 100%; display: block; }
.elementor .lp49 li { list-style: none; }

.elementor .lp49 .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.elementor .lp49 section { padding: 96px 0; }

.elementor /* ---- type ---- */
.lp49 h1 {
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: .96;
  letter-spacing: -3px;
  font-weight: 700;
}
.elementor .lp49 h1 em { color: var(--pink); font-style: normal; }
.elementor .lp49 h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 700;
}
.elementor .lp49 h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.5px; }
.elementor .lp49 .heading-stop { color: var(--pink); }
.elementor .lp49 .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.elementor .lp49 .kicker::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--pink);
  box-shadow: 0 0 0 5px rgba(229, 68, 109, .14);
}
.elementor .lp49 .lead { max-width: 620px; margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.elementor .lp49 .section-intro { max-width: 740px; margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.elementor .lp49 .centre { text-align: center; }

.elementor /* ---- buttons ---- */
.lp49 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 30px;
  border: 2px solid var(--navy);
  border-radius: 7px;
  background: var(--orange);
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 5px 5px 0 var(--navy);
  transition: transform .18s ease, box-shadow .18s ease;
}
.elementor .lp49 .btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--navy); }
.elementor .lp49 .btn-sub { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }
.elementor .lp49 .btn-on-dark { box-shadow: 5px 5px 0 var(--blue); }
.elementor .lp49 .btn-on-dark:hover { box-shadow: 2px 2px 0 var(--blue); }

.elementor /* ---- hero ---- */
.lp49 .hero { padding: 80px 0 96px; }
.elementor .lp49 .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; }
.elementor .lp49 .price-flag {
  display: inline-block;
  margin-bottom: 26px;
  padding: 11px 20px;
  border: 2px solid var(--navy);
  border-radius: 99px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--blue);
  font-size: 13px;
  font-weight: 900;
}
.elementor .lp49 .hero-actions { margin-top: 34px; }
.elementor .lp49 .trust-strip { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 14px; font-weight: 700; }
.elementor .lp49 .trust-strip li::before { content: "\2713"; color: var(--pink); margin-right: 8px; font-weight: 900; }

.elementor /* Meet Dan card. The portrait is photographic, .elementor so the fictional-guide
   disclosure directly beneath it is mandatory (dan-harper-compliance.md). */
.lp49 .dan-card {
  padding: 32px;
  border: 3px solid var(--navy);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 16px 16px 0 var(--pink);
  text-align: center;
}
.elementor .lp49 .dan-card img {
  width: 190px; height: 190px;
  margin: 0 auto 20px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--pink);
}
.elementor .lp49 .dan-name { font-size: 15px; font-weight: 900; }
.elementor .lp49 .dan-disc { margin-top: 8px; font-size: 12px; color: var(--muted); }
.elementor .lp49 .dan-points { display: grid; gap: 12px; margin-top: 24px; text-align: left; }
.elementor .lp49 .dan-points li { font-size: 14px; font-weight: 700; }
.elementor .lp49 .dan-points li::before { content: "\2713"; color: var(--pink); margin-right: 9px; font-weight: 900; }

.elementor /* ---- pain cards ---- */
.lp49 .pain { background: var(--white); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.elementor .lp49 .pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 56px; }
.elementor .lp49 .pain-card {
  padding: 30px 26px;
  border: 3px solid var(--navy);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--orange);
}
.elementor .lp49 .pain-card:nth-child(2) { box-shadow: 8px 8px 0 var(--pink); }
.elementor .lp49 .pain-card:nth-child(3) { box-shadow: 8px 8px 0 var(--navy); }
.elementor .lp49 .pain-card:nth-child(4) { box-shadow: 8px 8px 0 var(--blue); }
.elementor .lp49 .pain-card .icon { font-size: 30px; margin-bottom: 16px; }
.elementor .lp49 .pain-card p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.elementor .lp49 .pain-note { margin-top: 52px; font-size: 19px; font-weight: 700; line-height: 1.5; }

.elementor /* ---- belief ---- */
.lp49 .belief h2 { max-width: 1000px; margin: 0 auto; }
.elementor .lp49 .belief-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 34px; margin-top: 60px; text-align: left; }
.elementor .lp49 .belief-grid h3 { margin-bottom: 9px; }
.elementor .lp49 .belief-grid p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.elementor .lp49 .belief-grid li::before {
  content: "\2713";
  display: block;
  margin-bottom: 12px;
  color: var(--pink);
  font-size: 22px;
  font-weight: 900;
}

.elementor /* ---- services: pink band, .elementor navy cards (approved website colour pattern) ---- */
.lp49 .svc { background: var(--pink); color: var(--white); }
.elementor .lp49 .svc .kicker { color: var(--white); }
.elementor .lp49 .svc .kicker::before { background: var(--white); box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); }
.elementor .lp49 .svc .section-intro { color: rgba(255, 255, 255, .88); }
.elementor .lp49 .svc .heading-stop { color: var(--navy); }
.elementor .lp49 .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 56px; text-align: left; }
.elementor /* Flex column + margin-top:auto on the action keeps every button on the same
   line when a card's copy wraps or a visitor enlarges their font. Brand rule:
   service-card actions are anchored to the bottom of the card. */
.lp49 .svc-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: var(--navy-card);
}
.elementor .lp49 .svc-card h3 { color: var(--white); }
.elementor .lp49 .svc-from { margin: 12px 0 14px; font-size: 30px; font-weight: 700; letter-spacing: -1.5px; color: var(--blue); }
.elementor .lp49 .svc-from span { font-size: 14px; font-weight: 900; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.elementor /* Targets the description by class, .elementor NOT `.svc-card > p`. That broad child
   selector (0, .elementor 2, .elementor 1) outranked `.svc-from` and `.adspend` (0, .elementor 2, .elementor 0), .elementor so the card
   price rendered at 14px white instead of 30px cyan and the ad-spend note lost
   its colour. Same trap as gotcha #2 in css-reference.md. Keep it a class. */
.lp49 .svc-desc { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.elementor .lp49 .svc-tiers { display: grid; gap: 8px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.elementor .lp49 .svc-tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.elementor .lp49 .svc-tiers b { font-weight: 900; color: var(--white); }
.elementor .lp49 .svc-tiers .pop { color: var(--white); font-weight: 700; }
.elementor .lp49 .svc-tiers .pop em {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--orange);
  color: var(--navy);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  vertical-align: middle;
}
.elementor /* Mandatory brand rule: "Ad spend is separate" wherever PPC or paid social
   appears. Styled to be read, .elementor not skipped. */
.lp49 .adspend { margin-top: 16px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--blue); }
.elementor .lp49 .svc-action { margin-top: auto; padding-top: 22px; }
.elementor .lp49 .svc-card .btn { width: 100%; min-height: 46px; padding: 0 16px; font-size: 13px; box-shadow: 4px 4px 0 var(--navy); }
.elementor .lp49 .svc-card .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }

.elementor /* Strategy call catcher: the visitor who wants marketing but cannot choose.
   The £80 fee is deducted when they proceed, .elementor and that qualification has to stay
   visible wherever the call is priced (brand-guidelines.md). */
.lp49 .unsure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 900px;
  margin: 44px auto 0;
  padding: 26px 30px;
  border: 2px solid var(--navy);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--navy);
  text-align: left;
  color: var(--navy);
}
.elementor .lp49 .unsure h3 { margin-bottom: 7px; }
.elementor .lp49 .unsure p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.elementor .lp49 .unsure .btn { flex: none; }

.elementor /* ---- steps ---- */
.lp49 .steps { background: var(--white); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.elementor .lp49 .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 58px; }
.elementor .lp49 .step .num {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 20px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--blue);
  font-size: 17px;
  font-weight: 900;
}
.elementor .lp49 .step:nth-child(2) .num { background: var(--pink); color: var(--white); }
.elementor .lp49 .step:nth-child(3) .num { background: var(--orange); }
.elementor .lp49 .step p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.elementor /* ---- comparison ---- */
.lp49 .table-wrap {
  margin-top: 52px;
  overflow-x: auto;
  border: 3px solid var(--navy);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 12px 12px 0 var(--orange);
}
.elementor .lp49 .compare table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.elementor .lp49 .compare th, .elementor .lp49 .compare td { padding: 17px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.elementor .lp49 .compare thead th { background: var(--navy); color: var(--white); font-size: 13px; letter-spacing: .4px; }
.elementor .lp49 .compare thead th:nth-child(2) { background: var(--pink); }
.elementor .lp49 .compare tbody th { font-weight: 700; }
.elementor .lp49 .compare td.yes { font-weight: 900; }
.elementor .lp49 .compare td.no { color: var(--muted); }
.elementor .lp49 .compare tr:last-child th, .elementor .lp49 .compare tr:last-child td { border-bottom: 0; }

.elementor /* ---- price: two boxes, .elementor Growth badged as the recommended package ---- */
.lp49 .price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
  max-width: 900px;
  margin: 56px auto 0;
}
.elementor .lp49 .price-box {
  position: relative;
  padding: 40px 34px;
  border: 3px solid var(--navy);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 16px 16px 0 var(--blue);
  text-align: center;
}
.elementor .lp49 .price-box.popular { box-shadow: 16px 16px 0 var(--pink); }
.elementor .lp49 .pop-badge {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 2px solid var(--navy);
  border-radius: 99px;
  background: var(--orange);
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.elementor .lp49 .price-box .tier { font-size: 13px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--pink); }
.elementor /* Colour set explicitly: `.price-box > p` below also matches .amount, .elementor and on the
   £99 lander that made the headline price render in muted grey. */
.lp49 .price-box .amount { margin: 14px 0 6px; font-size: 72px; line-height: .86; letter-spacing: -4px; font-weight: 700; color: var(--navy); }
.elementor .lp49 .price-box .amount span { font-size: 19px; letter-spacing: 0; font-weight: 900; color: var(--muted); }
.elementor .lp49 .price-box > p { margin-bottom: 28px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.elementor .lp49 .price-box ul { display: grid; gap: 12px; margin: 0 0 30px; text-align: left; }
.elementor .lp49 .price-box li { font-size: 15px; line-height: 1.45; }
.elementor .lp49 .price-box li::before { content: "\2713"; color: var(--pink); margin-right: 11px; font-weight: 900; }
.elementor .lp49 .price-box .btn { width: 100%; }
.elementor .lp49 .guarantee { margin-top: 18px; font-size: 13px; color: var(--muted); }
.elementor .lp49 .price-note { max-width: 760px; margin: 34px auto 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.elementor /* Mandatory pricing-transparency block (dan-harper-compliance.md §8). Readable, .elementor not buried: normal body size, .elementor full contrast, .elementor directly under the price. */
.lp49 .terms {
  max-width: 900px;
  margin: 28px auto 0;
  padding: 24px 28px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: var(--white);
  text-align: left;
}
.elementor .lp49 .terms p { font-size: 14px; line-height: 1.7; color: var(--navy); }
@media (max-width: 900px) { .elementor .lp49 .terms { text-align: center; } }

.elementor /* ---- faq ---- */
.lp49 .faq { background: var(--white); border-top: 2px solid var(--line); }
.elementor .lp49 .faq-list { max-width: 860px; margin: 50px auto 0; text-align: left; }
.elementor .lp49 .faq-item { border-bottom: 1px solid var(--line); }
.elementor .lp49 .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
}
.elementor .lp49 .faq-item summary::-webkit-details-marker { display: none; }
.elementor .lp49 .faq-item summary::after { content: "+"; color: var(--pink); font-size: 27px; font-weight: 400; transition: transform .2s ease; }
.elementor .lp49 .faq-item[open] summary::after { transform: rotate(45deg); }
.elementor .lp49 .faq-item .answer { padding: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.elementor .lp49 .faq-item .answer a { font-weight: 700; border-bottom: 2px solid var(--orange); }
.elementor .lp49 .faq-item .answer a:hover { color: var(--pink); border-bottom-color: var(--pink); }

.elementor /* ---- closing ---- */
.lp49 .final { background: var(--navy); color: var(--white); }
.elementor .lp49 .final .kicker { color: var(--blue); }
.elementor .lp49 .final .kicker::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(45, 225, 252, .2); }
.elementor .lp49 .final .heading-stop { color: var(--pink); }
.elementor .lp49 .final p { max-width: 720px; margin: 22px auto 34px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.elementor .lp49 .final .btn-sub { color: rgba(255, 255, 255, .66); }

/* ---- responsive. Brand rule: all content centred up to 900px. ---- */
@media (max-width: 1080px) {
  .elementor .lp49 .pain-grid, .elementor .lp49 .belief-grid, .elementor .lp49 .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .elementor .lp49 { text-align: center; }
  .elementor .lp49 section { padding: 72px 0; }
  .elementor .lp49 .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .elementor .lp49 .lead, .elementor .lp49 .section-intro { margin-inline: auto; }
  .elementor .lp49 .kicker, .elementor .lp49 .trust-strip { justify-content: center; }
  .elementor .lp49 .steps-grid { grid-template-columns: 1fr; }
  .elementor .lp49 .step .num { margin-inline: auto; }
  .elementor .lp49 .belief-grid, .elementor .lp49 .svc-grid { text-align: center; }
  .elementor .lp49 .svc-tiers li { justify-content: center; }
  .elementor .lp49 .unsure { flex-direction: column; text-align: center; }
  .elementor .lp49 .dan-points { text-align: center; }
  .elementor .lp49 .dan-points li::before, .elementor .lp49 .price-box li::before { margin-right: 8px; }
  .elementor .lp49 .price-box ul { text-align: center; }
  .elementor .lp49 .faq-list { text-align: center; }
  .elementor .lp49 .faq-item summary { justify-content: center; text-align: center; }
  .elementor .lp49 .compare table { text-align: center; }
}
@media (max-width: 760px) {
  .elementor .lp49 .price-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 620px) {
  .elementor .lp49 .wrap { padding: 0 20px; }
  .elementor .lp49 h1 { font-size: 40px; letter-spacing: -2px; }
  .elementor .lp49 h2 { font-size: 32px; letter-spacing: -1.4px; }
  .elementor .lp49 .pain-grid, .elementor .lp49 .belief-grid, .elementor .lp49 .svc-grid { grid-template-columns: 1fr; }
  .elementor .lp49 .price-box { padding: 34px 24px; }
  .elementor .lp49 .price-box .amount { font-size: 60px; letter-spacing: -3px; }
  .elementor .lp49 .unsure { padding: 26px 22px; }
  .elementor .lp49 .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .lp49 *, .elementor .lp49 *::before, .elementor .lp49 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.elementor /* [LANDER ATOMIC ADAPTATION] lander99.css + lander49.css are ported verbatim
   above; the atomic build has no li elements, .elementor so the li furniture re-targets
   p/div structures carrying the same classes. The dan-card and (lp99)
   comparison table are the signed-off md4u-dan / md4u-comparison-table
   widgets and keep their own CSS. Used: the two landers. Added Phase 3a. */
.lp99 .hero-grid, .elementor .lp49 .hero-grid { align-items: center; }
.elementor .lp99 .trust-strip, .elementor .lp49 .trust-strip { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 36px 0 0; padding: 0; }
.elementor .lp99 .trust-strip span, .elementor .lp49 .trust-strip span { font-size: 13px; font-weight: 800; color: var(--md4u-muted); }
.elementor .lp99 .trust-strip span::before, .elementor .lp49 .trust-strip span::before { content: "\2713"; color: var(--md4u-pink); margin-right: 8px; font-weight: 900; }
.elementor .lp99 .pain-card h3, .elementor .lp49 .pain-card h3 { margin: 0 0 10px; }
.elementor .lp99 .pain-card p, .elementor .lp49 .pain-card p { margin: 0; }
.elementor .lp99 .belief-grid, .elementor .lp49 .belief-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 46px 0 0; padding: 0; text-align: left; }
.elementor .lp99 .belief-grid > div, .elementor .lp49 .belief-grid > div { padding: 22px 20px; border: 1px solid var(--md4u-line); border-radius: 10px; background: var(--md4u-white); }
.elementor .lp99 .belief-grid h3, .elementor .lp49 .belief-grid h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 900; letter-spacing: -.2px; }
.elementor .lp99 .belief-grid h3::before, .elementor .lp49 .belief-grid h3::before { content: "\2713"; color: var(--md4u-pink); margin-right: 8px; }
.elementor .lp99 .belief-grid p, .elementor .lp49 .belief-grid p { margin: 0; color: var(--md4u-muted); font-size: 13.5px; line-height: 1.55; }
.elementor .lp99 .steps-grid .step h3, .elementor .lp49 .steps-grid .step h3 { margin: 0; } .elementor /* live: spacing rides the copy P */
.lp99 .steps-grid .step p, .elementor .lp49 .steps-grid .step p { margin: 10px 0 0; }
.elementor .lp99 .includes-grid .include strong, .elementor .lp49 .includes-grid .include strong { display: block; }
.elementor .lp99 .price-box .pb-li, .elementor .lp49 .price-box .pb-li { margin: 0; font-size: 15px; text-align: left; }
.elementor .lp99 .price-box .pb-li::before, .elementor .lp49 .price-box .pb-li::before { content: "\2713"; color: var(--md4u-pink); margin-right: 11px; font-weight: 900; }
.elementor .lp99 .price-box .pb-list, .elementor .lp49 .price-box .pb-list { display: grid; gap: 13px; margin: 0 0 34px; padding: 0; }
.elementor .lp49 .svc-tiers { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; }
.elementor .lp49 .svc-tiers p { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 9px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; font-size: 13px; }
.elementor .lp49 .svc-tiers p.pop { border-color: var(--md4u-pink); background: rgba(229,68,109,.12); }
.elementor .lp49 .svc-tiers p em { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .5px; color: var(--md4u-pink); margin-left: 6px; }
.elementor .lp49 .svc-tiers p b { white-space: nowrap; }
.elementor /* lander FAQ: details are the signed-off md4u-faq widget (service variant);
   the lander look keeps its own left-aligned max-width from the ported files */
.lp99 .faq .md4u-faq, .elementor .lp49 .faq .md4u-faq { max-width: 860px; margin: 50px auto 0; text-align: left; }
@media (max-width: 900px) {
  .elementor .lp99 .trust-strip, .elementor .lp49 .trust-strip { justify-content: center; }
  .elementor .lp99 .belief-grid, .elementor .lp49 .belief-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .elementor .lp99 .belief-grid, .elementor .lp49 .belief-grid { grid-template-columns: 1fr; }
}

.elementor /* [LEGAL PROSE] Port of legal.css (live /privacy/, .elementor /cookie-policy/, .elementor /terms/, .elementor /accessibility/), .elementor scoped under .md4u-legal. The live pages use Inter; the
   rebuild uses the brand Arial stack (plan §3.2: one face site-wide - live
   legal pages were the pre-rebrand stragglers). Lists are atomic paragraphs
   set display:list-item. Used: 4 legal pages. Added Phase 3a. */
.md4u-legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; color: var(--md4u-navy); line-height: 1.65; font-size: 16px; text-align: left; }
.elementor .md4u-legal h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.02em; font-weight: 700; }
.elementor .md4u-legal .updated { color: var(--md4u-muted); font-size: .9rem; margin: 0 0 2rem; }
.elementor .md4u-legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .7rem; letter-spacing: -.01em; font-weight: 700; }
.elementor .md4u-legal h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; font-weight: 700; }
.elementor .md4u-legal p { margin: 0 0 1rem; color: var(--md4u-navy); }
/* Link colour moved off the raw display pink onto the accessible text token
   (26 Aug 2026, post-launch audit). Measured on /privacy/: rgb(229,68,109) on
   the cream page background is 3.76:1 at 16px/400, under the 4.5:1 AA floor.
   --md4u-pink-text (#C43A5E) is 4.92:1 on cream - the token was already defined
   at the top of this file for exactly this purpose. */
.elementor .md4u-legal a { color: var(--md4u-pink-text); text-decoration: none; }
.elementor .md4u-legal a:hover, .elementor .md4u-legal a:focus { text-decoration: underline; color: var(--md4u-pink-text); }
.elementor .md4u-legal .panel { background: hsl(210 33% 98%); border-radius: .75rem; padding: 1.25rem 1.5rem; margin: 0 0 1.5rem; }
.elementor .md4u-legal .md4u-ul { margin: 0 0 1rem; }
.elementor .md4u-legal .md4u-ul p { display: list-item; list-style: disc; margin: 0 0 .35rem 1.4rem; }
.elementor .md4u-legal .md4u-tablewrap { overflow-x: auto; margin: 0 0 1rem; }
.elementor .md4u-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.elementor .md4u-legal th, .elementor .md4u-legal td { text-align: left; padding: .6rem .7rem; border: 1px solid #dde5ec; vertical-align: top; }
.elementor .md4u-legal th { background: hsl(210 33% 98%); }
.elementor .md4u-legal caption { caption-side: top; text-align: left; color: var(--md4u-muted); font-size: .9rem; padding: 0 0 .4rem; }
.elementor .md4u-legal tbody tr:nth-child(odd) td, .elementor .md4u-legal tbody tr:nth-child(odd) th { background: transparent; } /* Hello zebra reset (trap 9) - live tables are flat */
@media (max-width: 620px) { .elementor .md4u-legal h1 { font-size: 1.7rem; } .elementor .md4u-legal { padding: 32px 20px 48px; } }

.elementor /* [AREAS HUB] Port of the local.css subset the /areas/ hub uses, .elementor scoped under
   .md4u-areas. The h1 pink stop is the live ::after device (never a span on
   local pages). Entries are rendered by the md4u-areas widget: live local
   pages link, .elementor pending ones are plain text (plan §9.2 replaces relink.php).
   Used: /areas/. Added Phase 3a. */
.md4u-areas { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; color: var(--md4u-navy); font-size: 1.05rem; line-height: 1.65; text-align: left; }
.elementor .md4u-areas h1 { margin: 0 0 1.15rem; font-size: clamp(2rem, 1.35rem + 3.1vw, 3.1rem); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; }
.elementor .md4u-areas h1::after { content: "."; color: var(--md4u-pink); }
.elementor .md4u-areas .lp-short { margin: 0 0 2.4rem; padding: clamp(1rem, 3vw, 1.4rem) clamp(1.05rem, 3.5vw, 1.6rem); border: 3px solid var(--md4u-navy); border-radius: 14px; background: var(--md4u-white); box-shadow: 8px 8px 0 var(--md4u-cyan); }
.elementor .md4u-areas .lp-section { margin: 0 0 2.6rem; }
.elementor .md4u-areas .lp-section + .lp-section, .elementor .md4u-areas .md4u-areas-sections > div + div { padding-top: 2.4rem; border-top: 1px solid var(--md4u-line); }
.elementor .md4u-areas h2 { margin: 0 0 .9rem; font-size: clamp(1.4rem, 1.15rem + 1.15vw, 1.85rem); font-weight: 900; line-height: 1.18; letter-spacing: -.015em; }
.elementor .md4u-areas h2::after { content: ""; display: block; width: 2.4rem; height: 5px; margin: .7rem 0 0; border-radius: 3px; background: var(--md4u-pink); }
.elementor .md4u-areas p { margin: 0 0 1.05em; }
.elementor .md4u-areas a { color: var(--md4u-navy); text-decoration: underline; text-decoration-color: var(--md4u-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
.elementor .md4u-areas a:hover { color: var(--md4u-pink); text-decoration-color: var(--md4u-pink); }
.elementor .md4u-areas .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .6rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.elementor .md4u-areas .lp-grid > li, .elementor .md4u-areas .lp-grid > .lp-cell { min-width: 0; padding: .55rem .8rem; border: 1px solid var(--md4u-line); border-left: 3px solid var(--md4u-pink); border-radius: 8px; background: var(--md4u-white); font-size: .97rem; font-weight: 700; line-height: 1.4; }
.elementor .md4u-areas .lp-grid > li:hover, .elementor .md4u-areas .lp-grid > .lp-cell:hover { border-color: var(--md4u-navy); border-left-color: var(--md4u-pink); }
.elementor .md4u-areas .lp-grid a { text-decoration: none; }
.elementor .md4u-areas .lp-grid a:hover { color: var(--md4u-pink); }
.elementor .md4u-areas .lp-pending { color: var(--md4u-muted); font-weight: 700; }
.elementor .md4u-areas .lp-cta { margin: 2.8rem 0 0; padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.2rem, 4.5vw, 2rem); border: 3px solid var(--md4u-navy); border-radius: 16px; background: var(--md4u-orange); box-shadow: 8px 8px 0 var(--md4u-navy); color: var(--md4u-navy); text-align: center; }
.elementor .md4u-areas .lp-cta h2 { color: var(--md4u-navy); margin-bottom: .8rem; }
.elementor .md4u-areas .lp-cta h2::after { margin-inline: auto; margin-top: .75rem; background: var(--md4u-navy); }
.elementor .md4u-areas .lp-cta p { color: var(--md4u-navy); }
.elementor .md4u-areas .lp-cta a:not(.lp-btn) { color: var(--md4u-navy); text-decoration-color: rgba(1,22,39,.55); }
.elementor .md4u-areas a.lp-btn, .elementor .md4u-areas a.e-button-base.lp-btn { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 3.25rem; margin: 1.2rem 0 1rem; padding: .7rem 1.75rem; border: 2px solid var(--md4u-navy); border-radius: 8px; background: var(--md4u-pink); color: var(--md4u-white); font-size: 1.1875rem; font-weight: 900; line-height: 1.25; text-align: center; text-decoration: none; box-shadow: 5px 5px 0 var(--md4u-navy); transition: transform .18s ease, box-shadow .18s ease; }
.elementor .md4u-areas a.lp-btn:hover { color: var(--md4u-white); transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-navy); }
.elementor .md4u-areas .lp-alt { margin: 0; color: var(--md4u-navy); font-size: .9rem; line-height: 1.6; }

.elementor /* [LIVE-RENDERED ADOPTIONS] The dying SPA's compiled css forces heading
   weights/sizes over the authored page css (h1/h2 900, .elementor h3 800!important, .elementor h3 1.25rem) - the LIVE COMPUTED values are the parity gate (measure, .elementor don't
   trust stylesheets, .elementor incl. live's own; same ruling as the Phase 2b 800-weight
   note). Adopted here after the verbatim ports so the numbers match the live
   render. Flag to Mitch if the authored 700/15.5px values are preferred
   post-cutover. Used: pg + lander families. Added Phase 3a. */
.pg h1, .elementor .pg h2 { font-weight: 900; }
.elementor .pg .cards .card h3 { font-weight: 800; }
.elementor .lp99 h1, .elementor .lp99 h2, .elementor .lp49 h1, .elementor .lp49 h2 { font-weight: 900; }
.elementor .lp99 .pain-card h3, .elementor .lp49 .pain-card h3 { font-weight: 800; }
.elementor .lp99 .belief-grid h3, .elementor .lp49 .belief-grid h3 { font-weight: 800; font-size: 20px; }
.elementor .lp99 .unsure h3, .elementor .lp49 .unsure h3 { font-weight: 800; }
.elementor /* widget-content protections: the ported .pg h3 {19px} .elementor must not resize the
   signed-off cream tier names (15px, .elementor md4u-widgets.css) */
.pg .md4u-tiers__tier h3 { font-size: 15px; }
.elementor /* home dan split: live caps the h2 at 59px (.dan h2 clamp), .elementor not the generic 66 */
.md4u-home .md4u-dan--portrait h2 { font-size: clamp(38px, 4.4vw, 59px); }
.elementor /* lander step / lp49 service-card headings render 800 on live (same SPA rule) */
.lp99 .step h3, .elementor .lp49 .step h3, .elementor .lp49 .svc-card h3 { font-weight: 800; }
.elementor /* band headings inherit white on live; the brand heading layer paints navy - restore */
.lp99 .includes h2, .elementor .lp99 .final h2, .elementor .lp49 .svc h2, .elementor .lp49 .final h2 { color: var(--md4u-white); }
.elementor /* s-family pages render on a WHITE base on live (the SPA-era .bg-background
   wrapper paints over the cream body) with navy base text; landers likewise.
   div-scoped: the family WRAPPER is a <div>, .elementor the band sections inside are
   <section>s carrying the same class - an unscoped `.s-page {background}.elementor ` wiped
   the navy tiers / orange closing bands (Mitch defect 7, .elementor 24 Aug). */
div.s-page { background: var(--md4u-white); color: var(--md4u-navy); }
/* [DEVIATION — cream heros] APPROVED DEVIATION (Mitch, 24 Aug 2026): service-page
   hero bands use the homepage cream (kit cream global via --md4u-cream), not the
   white s-family base. `s-hero--cream` is set by the specs/section builder
   (md4u_s_page + the services hub + paid-media bespoke heros; NOT the 404).
   The section is converted from a centred 1080px column (24px side padding →
   1032px content box) to a full-bleed band with the same centred content box —
   the exact s-tiers/s-closing padding pattern — so the cream paints edge to
   edge. ≤900 keeps live's 20px side padding (this rule's 0-2-1 specificity
   would otherwise beat the base 0-2-0 breakpoint rule). Added 24/08/2026. */
section.s-page.s-hero--cream {
  max-width: none;
  padding-left: max(24px, calc((100vw - 1032px) / 2));
  padding-right: max(24px, calc((100vw - 1032px) / 2));
  background: var(--md4u-cream);
}
@media (max-width: 900px) {
  section.s-page.s-hero--cream { padding-left: 20px; padding-right: 20px; }
}
.elementor div.lp99, .elementor div.lp49 { background: var(--md4u-white); }
.elementor div.md4u-home { color: var(--md4u-navy); }
.elementor /* the compiled css forces h2 line-height 1.5 + h3 800/1.5 on the s-family */
.s-cards h2, .elementor .s-tiers h2, .elementor .s-steps h2, .elementor .s-faq h2, .elementor .s-addons h2 { line-height: 1.5; }
.elementor .s-card h3 { font-weight: 800; line-height: 1.5; }
.elementor a.s-svc h3 { font-weight: 800; line-height: 1.5; }
.elementor .pg .detail .detail-body h3 { font-weight: 800; }
.elementor /* lander card spacing lives on the paragraph, .elementor not the heading (live measure) */
.lp99 .pain-card h3, .elementor .lp49 .pain-card h3 { margin: 0; }
.elementor .lp99 .pain-card p, .elementor .lp49 .pain-card p { margin: 12px 0 0; }
.elementor .lp99 .step h3, .elementor .lp49 .step h3 { margin: 0; }
.elementor .lp99 .step p, .elementor .lp49 .step p { margin: 10px 0 0; }
.elementor .lp99 .belief-grid p, .elementor .lp49 .belief-grid p { line-height: 24px; }
.elementor .lp99 .md4u-faq a, .elementor .lp49 .md4u-faq a { font-weight: 700; }
.elementor /* lander FAQ summaries render 700/24px-padded on live (the widget's service
   spec is 900/20 for the service pages, .elementor which match live there) */
.lp99 .md4u-faq summary, .elementor .lp49 .md4u-faq summary { font-weight: 700; padding: 24px 4px; }
.elementor /* paid-media native channel cards: the price strong is inside a P (atomic build), .elementor so it inherited the muted P colour; live's span structure inherits navy */
a.s-svc .s-svc-price, .elementor a.s-svc .s-svc-price strong { color: var(--md4u-navy); }
.elementor /* legal prose: headings inherit the 1.65 body leading on live */
.md4u-legal h2, .elementor .md4u-legal h3 { line-height: 1.65; }
.elementor .md4u-legal .updated { color: #5b6b78; } .elementor /* live legal muted token */
/* home dan split: live shows no gap above the copy paragraph */
.md4u-home .md4u-dan--portrait .md4u-dan__copy { margin-top: 0; }
.elementor /* areas hub: live base type measures 19px/1.65 at desktop */
.md4u-areas { font-size: 19px; }
@media (max-width: 767px) { .elementor .md4u-areas { font-size: 17px; } }
.elementor .md4u-areas a { font-weight: 400; }
.elementor .md4u-areas .lp-grid a { font-weight: 700; }
.elementor /* live inline-style margins carried as classes by the specs */
.pg .mt-34 { margin-top: 34px; }
.elementor .pg .contact-cross { margin-top: 26px; }
.elementor /* legal pages: live navy is #011628 (legal.css token, .elementor one off the brand navy)
   and the compiled css forces h1/h2 900 + h3 800 */
.md4u-legal, .elementor .md4u-legal p { color: #011628; }
.elementor .md4u-legal h1, .elementor .md4u-legal h2 { font-weight: 900; color: #011628; }
.elementor .md4u-legal h3 { font-weight: 800; color: #011628; }

/* [BUTTON COLOUR GUARD - LAST BLOCK: order beats the 0-2-1 family
   `a{color:inherit}` ports above] Global Classes render by LABEL
   (class="btn-primary", no g- prefix) and emit at 0-1-0, so the ported family
   inherit rules were re-colouring button text per band (found by Mitch on the
   homepage promise CTA: white-on-orange, 24 Aug). Values = md4u-atomic.php /
   live computed. */
.elementor a.e-button-base.btn-primary, .elementor a.e-button-base.btn-on-dark { color: var(--md4u-navy); }
.elementor a.e-button-base.btn-pink { color: var(--md4u-white); }
.elementor a.e-button-base.btn-navy { color: var(--md4u-cream); }
/* family-class buttons: same inherit-vs-label problem (deep diff: muted text) */
.elementor a.e-button-base.s-btn, .elementor a.e-button-base.btn { color: var(--md4u-navy); }
.elementor a.e-button-base.s-btn.pink, .elementor a.e-button-base.btn.btn-pink { color: var(--md4u-white); }
.elementor .pg .closing a.e-button-base.btn, .elementor a.e-button-base.btn.btn-navy-btn { color: var(--md4u-white); }
.elementor a.e-button-base.lp-btn { color: var(--md4u-white); }
/* a button dropped straight into a section flexbox must not stretch (the
   full-width pink closing CTA bug, deep diff 24 Aug) */
.elementor :where(.s-page, .pg, .lp99, .lp49, .md4u-home, .md4u-areas) .e-flexbox-base > a.e-button-base { align-self: center; }
.elementor .md4u-home a.md4u-promise__cta, .elementor .md4u-home a.md4u-alert__cta,
.elementor .md4u-home a.md4u-cart__cta, .elementor a.md4u-promise__cta,
.elementor a.md4u-alert__cta, .elementor a.md4u-cart__cta { color: var(--md4u-navy, #011627); }
/* [PROMISE SECTION SPACING] live: aside margin -12px 0 34px inside .services;
   in the rebuild those margins sit on the widget WRAPPER (Mitch item 3). */
.elementor .md4u-home.services .elementor-widget-md4u-pricing-promise { margin: -12px 0 34px; }
/* [SMALL-TAG REPLACEMENT] html-v3 strips <small>; specs use
   <span class="md4u-sm"> instead - styled to the live small rules. */
.elementor .s-svc-price .md4u-sm { color: var(--md4u-pink); font-size: 10px; font-weight: 900; letter-spacing: .6px; }

/* ---- [HOMEPAGE OVERFLOW GUARD] live home.css behaviour (Mitch fix, 24 Aug 2026)
   The hero's rotated orbits overhang sideways; live hides ONLY horizontal
   overflow at body level (body{overflow-x:hidden} on the homepage). The old
   widget-level overflow:hidden cropped the tilted result-card top/bottom —
   never reinstate it. ---- */
body.home { overflow-x: hidden; }
/* ...but that body rule is INERT here, and the homepage really did scroll
   sideways. MEASURED 26 Aug 2026 (post-launch audit) in headless Chrome, six
   samples per width because the 28s orbit rotation makes the overhang breathe:
   window.scrollTo(9999,0) then window.scrollX gave 74 / 44 / 101 / 27 at
   360 / 390 / 1024 / 1180 - i.e. a real user-visible sideways scroll, not just
   a scrollWidth artefact. body.home computes overflow-x:hidden yet the root
   stays visible and the viewport still scrolls, so the body->viewport
   propagation is not happening on this page. Setting overflow-x:clip on the
   ROOT is the same intent (hide horizontal overflow at viewport level, exactly
   as live's body rule does) applied where it actually takes effect.
   MEASURED alternatives, all at 360/390/430/1024/1180/1440:
     body.home{overflow-x:clip}          -> STILL SCROLLS (74/44/102/33). Rejected.
     .md4u-herovis{overflow:clip}        -> fixes it, but crops the tilted
                                            result-card + its shadow top/bottom,
                                            which is the exact guard Mitch
                                            removed on 24 Aug ("never reinstate
                                            it"). 2.87% of hero pixels changed
                                            vs 0.42% for the root fix. Rejected.
     html:has(body.home){overflow-x:clip} -> scrollX 0 at every width, header
                                            still position:sticky, /services/seo/
                                            root overflow-x stays `visible` so the
                                            rule is genuinely homepage-scoped.
   `clip` not `hidden`: clip does not create a scroll container, so the sticky
   header keeps working. The body rule above is retained as the fallback for
   any browser without :has(). */
html:has(body.home) { overflow-x: clip; }

/* ---- [LOCAL PAGES FURNITURE] Phase 3c (plan §9) — REWORKED per Mitch's design
   ruling (24 Aug 2026, approved deviation): the 224 local pages do NOT replicate
   live's plainer .lp-* look — they are built in the s-family design language
   (cream s-hero--cream hero, s-cards hard-shadow grids, md4u-faq widget,
   orange s-closing) with every word of local content VERBATIM. This block is
   page furniture only (scope .md4u-lp on the s-page wrapper): the breadcrumb,
   the CSS h1 full stop (live H1 text is byte-identical, so the heading-stop
   period cannot be a DOM span here), the verbatim pricing table's hard-shadow
   panel, the lp-soon softened-link rule and small s-family fit adjustments.
   All band/card/FAQ/closing styling is the existing signed-off s-family +
   widget CSS — no parallel design system. Added Phase 3c. ---- */

/* breadcrumb — the live verbatim crumb line, styled as the hero eyebrow */
.elementor .md4u-lp .lp-crumb { margin: 0 0 18px; color: var(--md4u-muted); font-size: 13px; line-height: 1.55; text-align: center; }
.elementor .md4u-lp .lp-crumb a { color: var(--md4u-muted); text-decoration: underline; text-decoration-color: var(--md4u-line); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.elementor .md4u-lp .lp-crumb a:hover { color: var(--md4u-navy); text-decoration-color: var(--md4u-pink); }
.elementor .md4u-lp .lp-crumb span { color: var(--md4u-navy); font-weight: 700; }

/* h1 full stop: live H1 text is byte-identical (no trailing period), so the
   brand stop is drawn by CSS exactly as live's local.css did */
.elementor .md4u-lp .s-hero h1::after { content: "."; color: var(--md4u-pink); }

/* the answer box (p.lp-short) — live's hard-shadow panel device, kept as the
   hero's lead card (house navy border + cyan hard shadow) */
.elementor .md4u-lp .s-hero .lp-short { max-width: 760px; margin: 6px auto 0; padding: 20px 24px; border: 3px solid var(--md4u-navy); border-radius: 14px; background: var(--md4u-white); box-shadow: 8px 8px 0 var(--md4u-cyan); text-align: left; color: var(--md4u-navy); font-size: 19px; line-height: 1.55; /* = .s-lead metrics (design-consistency gate) */ }

/* verbatim inline links in local copy (no classes can be added to verbatim
   html): the house pink-underline affordance */
.elementor .md4u-lp .lp-short a, .elementor .md4u-lp .s-card a { color: inherit; text-decoration: underline; text-decoration-color: var(--md4u-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.elementor .md4u-lp .lp-short a:hover, .elementor .md4u-lp .s-card a:hover { text-decoration-color: var(--md4u-orange); text-decoration-thickness: 3px; }

/* prose-as-cards: long-form verbatim paragraphs read left-aligned at body
   size inside the house cards; 2-paragraph sections use a 2-up grid */
.elementor .md4u-lp .s-cards-grid { margin-top: 24px; align-items: stretch; }
.elementor .md4u-lp .s-cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.elementor .md4u-lp .s-cards-grid.cols-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.elementor .md4u-lp .s-cards-grid.cols-wide { grid-template-columns: 1fr; }
/* centred narrow prose treatment (v3 rotation) */
.elementor .md4u-lp .md4u-lp-prose { max-width: 720px; margin: 0 auto 18px; color: var(--md4u-navy); font-size: 17px; line-height: 1.65; text-align: left; }
.elementor .md4u-lp .s-cards h2 + .md4u-lp-prose { margin-top: 24px; }
/* tiers band: verbatim local sub lines may be long — keep them readable */
.elementor .md4u-lp .s-tiers .s-tiers-sub { max-width: 760px; margin-left: auto; margin-right: auto; }
.elementor .md4u-lp .s-tiers .s-tiers-note { max-width: 760px; margin-left: auto; margin-right: auto; }
/* verbatim links inside tiers sub/notes + prose (white band text on navy) */
.elementor .md4u-lp .s-tiers a { color: inherit; text-decoration: underline; text-decoration-color: var(--md4u-cyan); }
.elementor .md4u-lp .md4u-lp-prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--md4u-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.elementor .md4u-lp .s-card { text-align: left; }
.elementor .md4u-lp .s-card p { color: var(--md4u-navy); font-size: 15px; line-height: 1.65; }
@media (max-width: 900px) {
  .elementor .md4u-lp .s-cards-grid.cols-2 { grid-template-columns: 1fr; }
  .elementor .md4u-lp .s-card { text-align: left; } /* brand centring exception: long-form prose */
}

/* the verbatim pricing table — hard-shadow scroll panel (live device, house
   tokens). The wrapper owns border/radius/scroll; min-width keeps columns
   legible at 320 and the wrapper scrolls instead of the page. */
.elementor .md4u-lp .lp-tablewrap { max-width: 100%; margin: 24px 0 0; border: 2px solid var(--md4u-navy); border-radius: 12px; background: var(--md4u-white); box-shadow: 6px 6px 0 var(--md4u-navy); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.elementor .md4u-lp table { margin: 0; /* Hello/WP base adds 15px; inside the scroll-container BFC it can never collapse away */ width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; text-align: left; }
.elementor .md4u-lp th, .elementor .md4u-lp td { line-height: inherit; /* Hello sets td line-height 1.5 directly */ padding: 0.75rem 0.85rem; border: 1px solid var(--md4u-line); text-align: left; vertical-align: top; }
.elementor .md4u-lp td { background: transparent; }
.elementor .md4u-lp th { background: var(--md4u-navy); color: var(--md4u-cream); font-weight: 900; line-height: 1.35; }
.elementor .md4u-lp th.rec { background: var(--md4u-pink); color: var(--md4u-white); }
.elementor .md4u-lp tr:first-child th { border-bottom: 2px solid var(--md4u-navy); }
.elementor .md4u-lp td.rec { background: #fdeef2; }
.elementor .md4u-lp th.rec, .elementor .md4u-lp td.rec { border-left: 2px solid var(--md4u-pink); border-right: 2px solid var(--md4u-pink); }
.elementor .md4u-lp tr:first-child th.rec { border-bottom-color: var(--md4u-pink); }
.elementor .md4u-lp tr:last-child td.rec { border-bottom: 2px solid var(--md4u-pink); }
.elementor .md4u-lp tbody tr:nth-child(odd) td { background: none; } /* Hello zebra reset (trap 9) — td only: the first (odd) row is the navy th header */
.elementor .md4u-lp tbody tr:nth-child(odd) td.rec { background: #fdeef2; }
/* table section: intro/note lines reuse .s-cards-sub; the note sits under the panel */
.elementor .md4u-lp .lp-tablewrap + .s-cards-sub, .elementor .md4u-lp .md4u-lp-note { margin: 22px 0 0; text-align: center; color: var(--md4u-muted); font-size: 14px; }

/* closing band extras: the verbatim alt line (call/email) under the CTA */
.elementor .md4u-lp .s-closing .md4u-lp-alt { max-width: none; margin: 18px auto 0; font-size: 13.5px; line-height: 1.6; }
.elementor .md4u-lp .s-closing a:not(.s-btn) { color: var(--md4u-navy); text-decoration: underline; text-decoration-color: rgba(1,22,39,.55); }
.elementor .md4u-lp .s-closing a:not(.s-btn):hover { text-decoration-color: var(--md4u-navy); }

/* a link to a local page that has not published yet — softened by the
   md4u-local-pages mu-plugin at render time; must read as plain text */
.elementor .md4u-lp .lp-soon, .elementor .md4u-lp .lp-soon:hover { color: inherit; text-decoration: none; cursor: default; font-weight: inherit; }

/* narrow screens: pull the hard shadows in (live device, house pattern) */
@media (max-width: 480px) {
  .elementor .md4u-lp .s-hero .lp-short { box-shadow: 5px 5px 0 var(--md4u-cyan); border-width: 2px; }
  .elementor .md4u-lp .lp-tablewrap { box-shadow: 4px 4px 0 var(--md4u-navy); }
}

/* [PHASE 5 AUDIT, 25 Aug 2026] Hello's reset paints the a11y skip-link the
   #c36 pink (house rule: no pink, ever). Brand navy on focus instead. */
.skip-link.screen-reader-text { color: var(--md4u-navy, #10233f); }
.skip-link.screen-reader-text:focus { color: var(--md4u-navy, #10233f); background: #fff; }

/* ==========================================================================
   [BLOG FAMILY] Phase 3d, 25 Aug 2026 — page furniture for the three Elementor
   Theme Builder templates (MD4U Blog Archive, MD4U Author Archive, MD4U Single
   Post). The cards and post furniture themselves are widgets and live in
   md4u-widgets.css; this block owns the page shell: hero, wraps, the article
   column, post-content typography, Loop Grid pagination and the closing band.

   WHY A SEPARATE SCOPE AND NOT .pg. The pg family sets `.pg h2 {font-size:
   clamp(34px,4.4vw,58px)}` at specificity 0-2-1, which is right for a landing
   section and catastrophic for a post body (live renders body h2 at 24px) and
   for a card title. Re-using .pg would mean out-specifying it on every heading
   the blog owns. The family already scopes itself this way (.md4u-home, .s-page,
   .pg, .lp99, .lp49, .md4u-legal, .md4u-areas); .md4u-blog is the eighth member
   and repeats the same measured token values, so nothing can drift.

   LOAD-ORDER IMMUNITY (audit D1): the scope declares background, colour and
   font-family itself, so Hello Elementor's reset.css cannot decide any of them
   whatever order the stylesheets print in.
   ========================================================================== */
/* No local --navy/--pink/... token set here. An earlier draft declared one and
   nothing consumed it: a second, LITERAL copy of the palette that would have
   silently ignored the Elementor kit the moment anyone reached for var(--pink).
   Every colour below comes from the --md4u-* chain, which resolves to a Global
   Color (removed 25 Aug 2026, verification round 2). */
.md4u-blog {
  background: var(--md4u-cream, #fffaf4);
  color: var(--md4u-navy, #011627);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Hello Elementor's reset paints every bare link #c36 (house rule: no pink,
   ever). Neutralised at the scope root.

   :where() IS LOad-BEARING, not decoration. The rule used to read
   `.elementor .md4u-blog a`, specificity (0,2,1) in a stylesheet that prints at
   index 19 while md4u-widgets.css prints at index 7 — so it beat every widget's
   own link colour on file order, and six declared colours plus four declared
   hover states never rendered at all (verification round 2, 25 Aug 2026:
   .md4u-dateline a declared navy and computed muted; .md4u-authorbio__more
   declared orange and computed navy; .md4u-crumbs a, .md4u-svccta a,
   .md4u-authorbio__bio a had no hover feedback whatever).
   :where() zeroes the specificity of everything inside it, so this rule is
   (0,0,1) — exactly Hello's bare `a`, which it still beats on order — and any
   component rule at (0,1,1) or above now wins, from either file. */
:where(.elementor .md4u-blog) a { color: inherit; text-decoration: none; }
.elementor .md4u-blog *, .elementor .md4u-blog *::before, .elementor .md4u-blog *::after { box-sizing: border-box; }
.elementor .md4u-blog img { max-width: 100%; }
.elementor .md4u-blog .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
/* the article column: live sets the post body 768px wide; 820 minus the 32px
   gutters lands on the same measure at the same reading length */
.elementor .md4u-blog .wrap--article { max-width: 820px; }

/* ---- hero ---- */
.elementor .md4u-blog .blog-hero { padding: 84px 0 56px; text-align: center; }
.elementor .md4u-blog .blog-hero .kicker { justify-content: center; }
.elementor .md4u-blog .blog-hero h1 { margin: 0; font-size: clamp(44px, 5.6vw, 84px); font-weight: 900; letter-spacing: -3px; line-height: .96; color: var(--md4u-navy, #011627); }
.elementor .md4u-blog .blog-hero .lead { max-width: 660px; margin: 22px auto 0; color: var(--md4u-muted, #5a6770); font-size: 18px; line-height: 1.6; }
/* 12px/900 pink is TEXT, so it takes the AA text token, not the display pink:
   #E5446D measures 3.76:1 on cream (verification round 2). The 9px dot beside it
   keeps the full display pink — it is decoration, not something to read — so the
   kicker still reads as the brand pink at a glance. */
.elementor .md4u-blog .kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  color: var(--md4u-pink-text, #c43a5e); font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
}
.elementor .md4u-blog .kicker::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 99px;
  background: var(--md4u-pink, #e5446d); box-shadow: 0 0 0 5px var(--md4u-pink-halo, rgba(229, 68, 109, .14));
}
.elementor .md4u-blog .heading-stop { color: var(--md4u-pink, #e5446d); }

/* ---- the card grid section ---- */
.elementor .md4u-blog .blog-grid { padding: 0 0 88px; }
.elementor .md4u-blog .blog-grid--author { padding-top: 40px; }
.elementor .md4u-blog .grid-heading { margin: 0 0 26px; font-size: 24px; font-weight: 900; letter-spacing: -.8px; line-height: 1.2; color: var(--md4u-navy, #011627); }

/* Elementor's own Equal height control handles `.e-loop-item > .e-con`; the loop
   item root here is an atomic div-block, so the stretch chain is completed. */
.elementor .md4u-blog .elementor-loop-container { align-items: stretch; }
.elementor .md4u-blog .e-loop-item { display: flex; }

/* ---- "Keep reading" when the post has fewer than three picks ----
   The related query no longer pads a short row out with unrelated posts
   (verification round 2: two Social media posts were recommending SEO articles),
   so a row can legitimately hold one or two cards. A short row centres at the
   normal column width instead of hanging off the left edge, and a post with no
   picks at all hides the section rather than printing a heading over an empty
   grid. The count comes from a body class the child theme sets. */
body.md4u-rel-0 .elementor .md4u-blog .blog-grid--related,
body.md4u-rel-0 .md4u-blog .blog-grid--related { display: none; }
body.md4u-rel-1 .elementor .md4u-blog .blog-grid--related .elementor-loop-container,
body.md4u-rel-2 .elementor .md4u-blog .blog-grid--related .elementor-loop-container {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 30px;
}
body.md4u-rel-1 .elementor .md4u-blog .blog-grid--related .e-loop-item,
body.md4u-rel-2 .elementor .md4u-blog .blog-grid--related .e-loop-item { flex: 0 1 calc((100% - 60px) / 3); }
@media (max-width: 900px) {
  body.md4u-rel-1 .elementor .md4u-blog .blog-grid--related .e-loop-item,
  body.md4u-rel-2 .elementor .md4u-blog .blog-grid--related .e-loop-item { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 620px) {
  body.md4u-rel-1 .elementor .md4u-blog .blog-grid--related .e-loop-item,
  body.md4u-rel-2 .elementor .md4u-blog .blog-grid--related .e-loop-item { flex-basis: 100%; }
}

/* ---- Loop Grid pagination in the house link/button language ---- */
.elementor .md4u-blog .elementor-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 48px; }
.elementor .md4u-blog .elementor-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 0 14px;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-white, #fff);
  box-shadow: 4px 4px 0 var(--md4u-navy, #011627);
  color: var(--md4u-navy, #011627);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 14px; font-weight: 900; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.elementor .md4u-blog .elementor-pagination a.page-numbers:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); background: var(--md4u-orange, #fe7f2d); color: var(--md4u-navy, #011627); }
.elementor .md4u-blog .elementor-pagination .page-numbers.current { background: var(--md4u-orange, #fe7f2d); box-shadow: 4px 4px 0 var(--md4u-pink, #e5446d); }
.elementor .md4u-blog .elementor-pagination .page-numbers.dots { border-color: transparent; box-shadow: none; background: transparent; }
.elementor .md4u-blog .elementor-pagination a.page-numbers:focus-visible { outline: 2px solid var(--md4u-pink, #e5446d); outline-offset: 3px; }

/* ---- single post: article column ---- */
.elementor .md4u-blog .post-head { padding: 48px 0 0; }
.elementor .md4u-blog .post-head h1 { margin: 0; font-size: clamp(34px, 4.6vw, 52px); font-weight: 900; letter-spacing: -1.6px; line-height: 1.06; color: var(--md4u-navy, #011627); }
.elementor .md4u-blog .post-figure img { display: block; width: 100%; height: auto; border: 3px solid var(--md4u-navy, #011627); border-radius: 14px; box-shadow: 8px 8px 0 var(--md4u-pink, #e5446d); }
.elementor .md4u-blog .post-body-sec { padding: 0 0 72px; }

/* ---- post content typography (the Post Content widget's output) ---- */
.elementor .md4u-blog .md4u-postbody {
  color: var(--md4u-navy, #011627);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 17px; line-height: 1.75;
}
.elementor .md4u-blog .md4u-postbody p { margin: 0 0 18px; }
.elementor .md4u-blog .md4u-postbody h2 { margin: 40px 0 14px; font-size: 26px; font-weight: 900; letter-spacing: -1px; line-height: 1.22; color: var(--md4u-navy, #011627); }
.elementor .md4u-blog .md4u-postbody h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; color: var(--md4u-navy, #011627); }
.elementor .md4u-blog .md4u-postbody h2:first-child, .elementor .md4u-blog .md4u-postbody h3:first-child { margin-top: 0; }
.elementor .md4u-blog .md4u-postbody strong { color: var(--md4u-navy, #011627); font-weight: 800; }
.elementor .md4u-blog .md4u-postbody a { color: var(--md4u-navy, #011627); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--md4u-orange, #fe7f2d); }
.elementor .md4u-blog .md4u-postbody a:hover { color: var(--md4u-orange-text, #b0581f); } /* display orange is 2.53:1 on cream */
.elementor .md4u-blog .md4u-postbody ul, .elementor .md4u-blog .md4u-postbody ol { margin: 0 0 18px; padding-left: 24px; }
.elementor .md4u-blog .md4u-postbody li { margin-bottom: 7px; list-style: revert; }
.elementor .md4u-blog .md4u-postbody img { max-width: 100%; height: auto; border-radius: 14px; }
.elementor .md4u-blog .md4u-postbody hr { margin: 32px 0; border: 0; border-top: 2px solid var(--md4u-line, rgba(1, 22, 39, .13)); }
.elementor .md4u-blog .md4u-postbody blockquote {
  margin: 0 0 22px; padding: 18px 22px;
  border: 3px solid var(--md4u-navy, #011627); border-radius: 14px;
  background: var(--md4u-white, #fff); box-shadow: 8px 8px 0 var(--md4u-cyan, #2de1fc);
}
.elementor .md4u-blog .md4u-postbody blockquote p:last-child { margin-bottom: 0; }
/* zero horizontal overflow gate: a wide comparison table scrolls inside its own
   box rather than pushing the page sideways */
.elementor .md4u-blog .md4u-postbody table {
  display: block; width: 100%; max-width: 100%; overflow-x: auto;
  margin: 0 0 24px; border-collapse: collapse; font-size: 15px;
}
.elementor .md4u-blog .md4u-postbody th, .elementor .md4u-blog .md4u-postbody td { border: 2px solid var(--md4u-line, rgba(1, 22, 39, .13)); padding: 10px 12px; text-align: left; vertical-align: top; }
.elementor .md4u-blog .md4u-postbody th { background: var(--md4u-white, #fff); color: var(--md4u-navy, #011627); font-weight: 900; white-space: nowrap; }

/* ---- closing CTA band (live's blog CTA, copy verbatim, house band) ---- */
.elementor .md4u-blog .closing { padding: 84px 0; background: var(--md4u-orange, #fe7f2d); color: var(--md4u-navy, #011627); text-align: center; }
.elementor .md4u-blog .closing .kicker { color: var(--md4u-navy, #011627); justify-content: center; }
.elementor .md4u-blog .closing .kicker::before { background: var(--md4u-navy, #011627); box-shadow: 0 0 0 5px var(--md4u-navy-halo, rgba(1, 22, 39, .14)); }
.elementor .md4u-blog .closing h2 { margin: 0; font-size: clamp(34px, 4.4vw, 58px); font-weight: 900; letter-spacing: -2px; line-height: 1.03; color: var(--md4u-navy, #011627); }
.elementor .md4u-blog .closing p { max-width: 700px; margin: 20px auto 32px; color: var(--md4u-navy, #011627); font-size: 17px; line-height: 1.6; }
.elementor .md4u-blog .closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.elementor .md4u-blog a.btn, .elementor .md4u-blog a.e-button-base.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 30px;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-navy, #011627); color: var(--md4u-white, #fff);
  box-shadow: 5px 5px 0 var(--md4u-white, #fff);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 15px; font-weight: 900; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.elementor .md4u-blog a.btn:hover, .elementor .md4u-blog a.e-button-base.btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-white, #fff); color: var(--md4u-white, #fff); }
.elementor .md4u-blog a.btn-ghost, .elementor .md4u-blog a.e-button-base.btn-ghost { background: transparent; color: var(--md4u-navy, #011627); box-shadow: 5px 5px 0 var(--md4u-navy, #011627); }
.elementor .md4u-blog a.btn-ghost:hover, .elementor .md4u-blog a.e-button-base.btn-ghost:hover { color: var(--md4u-navy, #011627); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); }
.elementor .md4u-blog a.btn:focus-visible { outline: 2px solid var(--md4u-navy, #011627); outline-offset: 3px; }

/* ---- responsive. Brand rule: all content centres up to 900px. ---- */
@media (max-width: 900px) {
  .elementor .md4u-blog { text-align: center; }
  .elementor .md4u-blog .kicker { justify-content: center; }
  .elementor .md4u-blog .blog-hero h1, .elementor .md4u-blog .closing h2 { font-size: 40px; letter-spacing: -2px; }
  .elementor .md4u-blog .post-head h1 { font-size: 34px; letter-spacing: -1.2px; }
  /* article copy stays left-aligned: centred long-form body text is unreadable,
     and the brand rule is about page furniture, not paragraphs. */
  .elementor .md4u-blog .md4u-postbody, .elementor .md4u-blog .md4u-postbody th, .elementor .md4u-blog .md4u-postbody td { text-align: left; }
  .elementor .md4u-blog .md4u-postbody ul, .elementor .md4u-blog .md4u-postbody ol { text-align: left; }
}
@media (max-width: 620px) {
  .elementor .md4u-blog .wrap { padding: 0 20px; }
  .elementor .md4u-blog .blog-hero { padding: 60px 0 40px; }
  .elementor .md4u-blog .blog-grid { padding-bottom: 64px; }
  .elementor .md4u-blog .closing { padding: 64px 0; }
  .elementor .md4u-blog .closing h2 { font-size: 30px; letter-spacing: -1.3px; }
  .elementor .md4u-blog a.btn, .elementor .md4u-blog a.e-button-base.btn { width: 100%; }
  .elementor .md4u-blog .post-figure img, .elementor .md4u-blog .md4u-shortanswer { box-shadow: 5px 5px 0 var(--md4u-pink, #e5446d); }
  .elementor .md4u-blog .md4u-shortanswer { box-shadow: 5px 5px 0 var(--md4u-cyan, #2de1fc); }
}
@media (prefers-reduced-motion: reduce) {
  .elementor .md4u-blog *, .elementor .md4u-blog *::before, .elementor .md4u-blog *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================================
   [CONTACT GRID RESTORE] 27/08/2026 — Mitch reported the "DIRECT CONTACT"
   kicker colliding with the contact form card's 16px cyan shadow.
   ROOT CAUSE: the two-column contact grid was rendering display:block, so the
   form and the direct-contact column STACKED, putting the kicker 12px inside
   the card's shadow. Measured: container height 1276px stacked vs 783px as a
   grid; clearance -12px. The rule at ~line 695 sits directly after a
   mechanically-inserted ".elementor" + comment prefix and was not reaching the
   browser (no rule matching "contact-grid" appears in document.styleSheets,
   while an identical injected rule fixes the layout immediately).
   Re-declared here at the end of the file, where nothing above can affect it.
   Verify with: computed display === "grid" on .pg .contact-grid at >=901px.
   ========================================================================= */
.elementor .pg .contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
@media (max-width: 900px) {
  .elementor .pg .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}