/* ============================================================================
   MD4U Site Widgets - component styles.
   One of the TWO legal CSS homes on this build (the other is the md4u-child
   brand layer). Everything here is namespaced md4u-* BEM - never plain nouns,
   because Global Classes share the page's cascade and a plain ".footer" or
   ".btn" collides with them silently.
   Colour values are the plan S3.1 tokens; where a component is a verbatim
   port of a live partial the live literal values are kept so the parity
   harness can diff byte-for-byte.
   ========================================================================= */

/* [HEADER STICKY WRAPPER] position:sticky must sit on the element directly in
   the body flow. Elementor Pro's header location wraps the widget in its own
   <header class="elementor-location-header"> exactly the height of the bar,
   so sticky on OUR div would only stick within that wrapper (i.e. never).
   Applied to Pro's wrapper instead. z-index 50 matches the live nav (z-50).
   Used: every page (Theme Builder include/general). Added 24/08/2026. */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* [HEADER BAR] Plan S4: the site's ONE soft-shadow, white/95 + backdrop-blur
   component - every other surface uses hard offset shadows. 64px bar, bottom
   border #d9e0e8 (live literal), max-width 1280 inner. Used: all pages.
   Added 24/08/2026. */
.md4u-header {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #d9e0e8;
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
}
.md4u-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* [WORDMARK] "MarketingDone4U." - Done orange, final stop pink. Shared by the
   header bar, the pop-out panel head and the footer via the md4u-logo-done /
   md4u-logo-stop spans. Used: header + footer. Added 24/08/2026. */
.md4u-header__logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #011627;
  text-decoration: none;
  flex: 0 0 auto;
}
.md4u-header__logo:hover { color: #011627; }
.md4u-logo-done { color: #fe7f2d; }
.md4u-logo-stop { color: #e5446d; }

/* [DESKTOP NAV] Links 14px #435a70 (live literal) hover orange; hidden <=900
   where the burger takes over (kit breakpoint - the live SPA used 1024, the
   rebuild standardises on the 900 kit breakpoint per plan S4).
   Used: all pages >=901px. Added 24/08/2026. */
.md4u-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.md4u-header__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #435a70;
  text-decoration: none;
  transition: color 0.2s ease;
}
.md4u-header__link:hover,
.md4u-header__link:active { color: #fe7f2d; }
.md4u-header__link:focus-visible { outline: 3px solid #e5446d; outline-offset: 3px; border-radius: 4px; }

/* [SERVICES DROPDOWN] White card, radius 16, soft shadow (the header's soft-
   shadow licence extends to its own dropdown - still the only such component).
   Opens on hover-intent/focus-within via CSS, and by JS click fallback
   (.md4u-header__dd.is-open) for touch + keyboard; chevron rotates when open.
   The pt-12 wrapper bridges the hover gap between link and card.
   Used: all pages >=901px. Added 24/08/2026. */
.md4u-header__dd { position: relative; }
.md4u-header__dd-toggle svg { transition: transform 0.2s ease; }
.md4u-header__dd:hover .md4u-header__dd-toggle svg,
.md4u-header__dd.is-open .md4u-header__dd-toggle svg { transform: rotate(180deg); }
.md4u-header__dd-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 50;
}
.md4u-header__dd:hover .md4u-header__dd-wrap,
.md4u-header__dd:focus-within .md4u-header__dd-wrap,
.md4u-header__dd.is-open .md4u-header__dd-wrap {
  opacity: 1;
  visibility: visible;
}
.md4u-header__dd-card {
  min-width: 200px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #d9e0e8;
  box-shadow: 0 10px 15px -3px rgba(1, 22, 39, 0.1), 0 4px 6px -4px rgba(1, 22, 39, 0.1);
  padding: 8px;
}
.md4u-header__dd-link {
  display: block;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #011627;
  text-decoration: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.md4u-header__dd-link:hover { background: rgba(1, 22, 39, 0.06); color: #011627; }
.md4u-header__dd-link:focus-visible { outline: 3px solid #e5446d; outline-offset: -3px; }

/* [HEADER CTA] Orange PILL (rounded-full - deliberately unlike the r7 hard-
   shadow btn-primary family), WHITE text, font-black. The pill + white-on-
   orange combination is exclusive to the nav per plan S4.
   Used: all pages >=901px. Added 24/08/2026. */
.md4u-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fe7f2d;
  color: #ffffff;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.md4u-header__cta:hover { opacity: 0.9; color: #ffffff; }
.md4u-header__cta:focus-visible { outline: 3px solid #011627; outline-offset: 3px; }

/* [BURGER TRIGGER] The fd-popup trigger, ported. Hidden on desktop; the
   "Menu" word shows from 640px down to the burger's own breakpoint.
   The child-theme Hello reset already neutralises the #c36 button paint.
   Used: all pages <=900px. Added 24/08/2026. */
.md4u-header__burger {
  display: none;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 9999px;
  color: #011627;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s;
}
.md4u-header__burger:hover { background: rgba(1, 22, 40, 0.06); color: #fe7f2d; }
.md4u-header__burger:focus-visible { outline: 3px solid #fe7f2d; outline-offset: 2px; }
.md4u-header__burger-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.md4u-header__burger-bars i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.28s ease;
}
.md4u-header__burger-bars i:nth-child(2) { width: 70%; }
.md4u-header__burger:hover .md4u-header__burger-bars i:nth-child(2) { width: 100%; }
.md4u-header__burger-label { display: none; }
@media (min-width: 640px) { .md4u-header__burger-label { display: inline; } }

/* [HEADER BREAKPOINT] <=900 the desktop nav goes away and the burger appears;
   >=901 the pop-out machinery is fully off. 900 is the kit breakpoint
   (1080/900/620), replacing the live SPA's 1024. Added 24/08/2026. */
@media (max-width: 900px) {
  .md4u-header__nav { display: none; }
  .md4u-header__burger { display: inline-flex; }
}
@media (min-width: 901px) {
  .md4u-header__burger { display: none !important; }
  .md4u-panel { display: none !important; }
}

/* ============================================================================
   [POP-OUT PANEL] The house fd-popup pattern (same family as Hancocks + DMR),
   ported verbatim from the live /fd-popup.css into the md4u-panel__* BEM
   namespace; only the breakpoint changed (1024 -> 900) and the trigger rules
   moved to the burger block above. Two rules this CSS is careful about,
   inherited from the source file:
   1. The closed state uses visibility:hidden, not just opacity/width -
      anything merely transparent stays in the keyboard tab order.
   2. visibility is switched by class, not transition - a zero-duration
      visibility transition is unreliable.
   Used: all pages <=900px. Added 24/08/2026.
   ========================================================================= */
.md4u-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(1, 22, 40, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
}
.md4u-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.md4u-panel.is-closing { visibility: visible; } /* held visible only while it slides out */

.md4u-panel__dialog {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 90%;
  max-width: 400px;
  background: #011628;
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -24px 0 60px rgba(1, 22, 40, 0.45);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.md4u-panel.is-open .md4u-panel__dialog { transform: translateX(0); }

.md4u-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  background: #011628;
  z-index: 2;
}
.md4u-panel__brand {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.md4u-panel__brand:hover { color: #fff; }
.md4u-panel__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}
.md4u-panel__close:hover { color: #fe7f2d; background: rgba(255, 255, 255, 0.06); }
.md4u-panel__close:focus-visible { outline: 3px solid #2de1fc; outline-offset: 2px; }

.md4u-panel__menu { padding: 4px 0; }
.md4u-panel__list,
.md4u-panel__submenu { list-style: none; margin: 0; padding: 0; }
.md4u-panel__list > .md4u-panel__item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.md4u-panel__list > .md4u-panel__item > a,
.md4u-panel__list > .md4u-panel__item > .md4u-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 20px;
  min-height: 52px;
  color: #fff;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 600;
  box-sizing: border-box;
  transition: color 0.2s, background 0.2s;
  background: transparent;
  border: 0;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.md4u-panel__list > .md4u-panel__item > a:hover,
.md4u-panel__list > .md4u-panel__item > .md4u-panel__row:hover { color: #fe7f2d; background: rgba(255, 255, 255, 0.04); }
.md4u-panel__menu a:focus-visible,
.md4u-panel__row:focus-visible { outline: 3px solid #2de1fc; outline-offset: -3px; }
.md4u-panel__menu a[aria-current="page"] { color: #fe7f2d; box-shadow: inset 3px 0 0 #fe7f2d; }

/* items ease in behind the panel; tightened so they settle with it, not after it */
.md4u-panel__list > .md4u-panel__item { opacity: 0; transform: translateX(12px); }
.md4u-panel.is-open .md4u-panel__list > .md4u-panel__item {
  opacity: 1;
  transform: none;
  transition: opacity 0.26s ease, transform 0.26s ease;
  transition-delay: calc(var(--i, 0) * 25ms + 90ms);
}

.md4u-panel__caret { display: inline-flex; transition: transform 0.3s ease; color: #fe7f2d; flex: 0 0 auto; }
.md4u-panel__item.open > .md4u-panel__row .md4u-panel__caret { transform: rotate(90deg); }

/* collapsed submenu must be genuinely hidden, not just clipped, or its links stay tabbable */
.md4u-panel__submenu {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background: rgba(255, 255, 255, 0.045);
  transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}
.md4u-panel__item.open > .md4u-panel__submenu {
  max-height: 640px;
  visibility: visible;
  transition: max-height 0.3s ease, visibility 0s;
}
.md4u-panel__submenu > li > a {
  display: block;
  padding: 13px 20px 13px 32px;
  min-height: 46px;
  box-sizing: border-box;
  color: #cfe3f2;
  text-decoration: none;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s, background 0.2s;
}
.md4u-panel__submenu > li > a:hover { color: #fff; background: rgba(254, 127, 45, 0.16); }

.md4u-panel__cta { margin-top: auto; padding: 20px; }
.md4u-panel__btn {
  display: block;
  text-align: center;
  background: #fe7f2d;
  color: #011628;
  text-decoration: none;
  padding: 15px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.2px;
  transition: opacity 0.2s, transform 0.2s;
}
.md4u-panel__btn:hover { opacity: 0.92; transform: translateY(-1px); color: #011628; }
.md4u-panel__btn:focus-visible { outline: 3px solid #2de1fc; outline-offset: 3px; }
.md4u-panel__tel {
  display: block;
  text-align: center;
  margin-top: 14px;
  min-height: 44px;
  line-height: 44px;
  color: #cfe3f2;
  text-decoration: none;
  font-weight: 600;
}
.md4u-panel__tel:hover { color: #fe7f2d; }
.md4u-panel__meta { display: block; text-align: center; color: rgba(207, 227, 242, 0.62); font-size: 0.82rem; }

body.md4u-panel-lock { overflow: hidden; }

/* ============================================================================
   [FOOTER] Verbatim port of partials/site-footer.html's embedded stylesheet
   into the md4u-footer__* namespace - every value byte-identical to live:
   navy #011627, 1180 wrap padding 56/32/28, grid 1.3fr 1fr 1.2fr 1fr gap 40
   (2-col + centred <=900 per the everything-centres brand rule, 1-col <=620),
   links #aab8c1 13px hover orange, socials hover cyan, bottom bar 11px
   #8fa0ab with the 10px #778995 legal sub-line.
   Used: every page (Theme Builder include/general). Added 24/08/2026.
   ========================================================================= */
.md4u-footer {
  background: #011627;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
}
.md4u-footer * { box-sizing: border-box; }
.md4u-footer a { color: inherit; text-decoration: none; }
.md4u-footer__wrap { max-width: 1180px; margin: 0 auto; padding: 56px 32px 28px; }
.md4u-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 40px; }
.md4u-footer__logo { font-size: 23px; font-weight: 900; letter-spacing: -1.2px; display: inline-block; }
.md4u-footer__signoff {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #fff;
}
.md4u-footer__signoff span { color: #e5446d; }
.md4u-footer__social { display: flex; gap: 14px; margin-top: 18px; }
/* 44x44 hit area (26 Aug 2026, post-launch audit). Measured at 390px these
   anchors were 20x27 CSS px - under the 24x24 WCAG 2.5.8 AA minimum, and the
   only genuine tap-target miss on the site (the other sub-24px hits are inline
   text links inside sentences, which the standard exempts, and the 1x1 skip
   link, which is the standard pattern). The icon art is unchanged; only the
   touch target grows. */
.md4u-footer__social a {
  color: #aab8c1;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.md4u-footer__social a:hover { color: #2de1fc; }
.md4u-footer__h { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: #fff; }
.md4u-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; }
.md4u-footer__links a { color: #aab8c1; transition: color 0.2s ease; }
.md4u-footer__links a:hover { color: #fe7f2d; }
.md4u-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 13px; color: #aab8c1; }
.md4u-footer__contact li { display: flex; align-items: flex-start; gap: 8px; }
.md4u-footer__contact svg { flex-shrink: 0; margin-top: 1px; }
.md4u-footer__contact a:hover { color: #fe7f2d; }
.md4u-footer__news { margin: 0; font-size: 13px; color: #aab8c1; line-height: 1.6; }
.md4u-footer__news a { color: #fff; }
.md4u-footer__news a:hover { color: #fe7f2d; }

/* Newsletter signup form (footer). Markup + copy mirror the live SPA footer
   bundle; the visual language is the footer's own (13px, #aab8c1 on #011627,
   brand orange action) so nothing new is invented for it. */
.md4u-footer__newsform { display: flex; gap: 8px; margin-top: 12px; }
.md4u-footer__newsform input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #fff;
}
.md4u-footer__newsform input[type="email"]::placeholder { color: rgba(170, 184, 193, 0.7); }
.md4u-footer__newsform input[type="email"]:focus {
  outline: none;
  border-color: #fe7f2d;
  box-shadow: 0 0 0 2px rgba(254, 127, 45, 0.35);
}
.md4u-footer__newsform button {
  flex: 0 0 auto;
  background: #fe7f2d;
  color: #011627;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.md4u-footer__newsform button:hover { opacity: 0.9; }
.md4u-footer__newsform button:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 900px) {
  .md4u-footer__newsform { justify-content: center; }
}
.md4u-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 11px;
  color: #8fa0ab;
}
.md4u-footer__bottom p { margin: 0; line-height: 1.6; }
.md4u-footer__bottom p span { display: block; margin-top: 7px; color: #778995; font-size: 10px; }
.md4u-footer__legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 11px; }
.md4u-footer__legal-links a { color: #8fa0ab; }
.md4u-footer__legal-links a:hover { color: #fff; }
@media (max-width: 900px) {
  .md4u-footer { text-align: center; }
  .md4u-footer__grid { grid-template-columns: 1fr 1fr; }
  .md4u-footer__contact li,
  .md4u-footer__social { justify-content: center; }
  .md4u-footer__contact li { text-align: left; }
}
@media (max-width: 620px) {
  .md4u-footer__wrap { padding: 44px 20px 24px; }
  .md4u-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* [REDUCED MOTION] Brand rule (plan S3.4): prefers-reduced-motion zeroes ALL
   motion, chrome included. Used: sitewide. Added 24/08/2026. */
@media (prefers-reduced-motion: reduce) {
  .md4u-header__link,
  .md4u-header__cta,
  .md4u-header__dd-toggle svg,
  .md4u-header__dd-wrap,
  .md4u-header__burger,
  .md4u-header__burger-bars i,
  .md4u-panel,
  .md4u-panel__dialog,
  .md4u-panel__submenu,
  .md4u-panel__list > .md4u-panel__item,
  .md4u-panel__caret,
  .md4u-panel__btn,
  .md4u-footer__social a,
  .md4u-footer__links a { transition: none !important; }
  .md4u-panel__list > .md4u-panel__item { opacity: 1; transform: none; }
}

/* ==========================================================================
   PHASE 2b COMPONENTS (24 Aug 2026). Every value below is measured off the
   live CSS (home.css v20260730-6, site.css, pages.css, lander99.css) — do not
   round or "tidy". BEM md4u-* only. Breakpoints 1080/900/620 per the kit;
   <=900 the brand rule centres everything. Reduced-motion gates are at the
   bottom of this file.
   ========================================================================== */

/* ---- [HERO VISUAL] home.css .hero-visual family, verbatim metrics ---- */
.md4u-herovis {
  color: var(--md4u-navy, #011627); /* live: inherited page colour */
  min-height: 540px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 18px 14px;
  align-items: center;
  /* NO overflow clipping here (Mitch, 24 Aug — the guard cropped the tilted
     result-card + its 16px shadow top and bottom, which live never does).
     Live's approach is replicated instead: the child theme sets
     body.home { overflow-x: hidden } so only sideways orbit overhang is
     hidden, exactly as live's body rule does. */
  overflow: visible;
}
.md4u-herovis__orbit { position: absolute; border-radius: 999px; border: 2px dashed rgba(1,22,39,.16); }
.md4u-herovis__orbit--one { width: 470px; height: 470px; animation: md4u-rotate 28s linear infinite; }
.md4u-herovis__orbit--two { width: 350px; height: 350px; border-color: rgba(229,68,109,.25); animation: md4u-rotate 20s linear infinite reverse; }
@keyframes md4u-rotate { to { rotate: 360deg; } }
.md4u-herovis__spark { position: absolute; color: var(--md4u-orange, #FE7F2D); font-size: 33px; }
.md4u-herovis__spark--one { top: 30px; left: 50px; }
.md4u-herovis__spark--two { bottom: 42px; right: 45px; color: var(--md4u-pink, #E5446D); }
.md4u-herovis__card {
  width: min(380px, 88%);
  min-height: 385px;
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  padding: 29px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 18px;
  background: var(--md4u-white, #fff);
  box-shadow: 16px 16px 0 var(--md4u-cyan, #2DE1FC);
  transform: rotate(-2deg);
}
.md4u-herovis__top { display: flex; justify-content: space-between; align-items: center; }
.md4u-herovis__logo { font-weight: 900; font-size: 18px; color: var(--md4u-navy, #011627); }
.md4u-herovis__logo span { color: var(--md4u-orange, #FE7F2D); }
/* [HERO MINI-LOGO STOP] The accent rule above targets a bare `span` (0,1,1), so
   the stop needs (0,2,0) to stay pink. Brand rule: the wordmark always closes
   on the pink full stop (Mitch, 27/08/2026). */
.md4u-herovis__logo .md4u-logo-stop { color: var(--md4u-pink, #E5446D); }
.md4u-herovis__pill { border-radius: 99px; padding: 7px 9px; background: rgba(45,225,252,.18); color: #006b7b; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.md4u-herovis__card > p { margin: 58px 0 8px; font-size: 18px; color: var(--md4u-navy, #011627); }
.md4u-herovis__card > strong { display: block; font-size: 35px; line-height: 1.04; letter-spacing: -1.7px; color: var(--md4u-navy, #011627); }
.md4u-herovis__lines { display: grid; gap: 9px; margin: 30px 0; }
.md4u-herovis__lines i { height: 8px; width: 86%; border-radius: 9px; background: #e9eef1; }
.md4u-herovis__lines i:nth-child(2) { width: 70%; }
.md4u-herovis__lines i:nth-child(3) { width: 53%; }
.md4u-herovis__btn { display: inline-block; background: var(--md4u-orange, #FE7F2D); border: 2px solid var(--md4u-navy, #011627); border-radius: 5px; padding: 12px 16px; font-weight: 900; font-size: 12px; color: var(--md4u-navy, #011627); }
.md4u-herovis__note { position: relative; z-index: 4; width: min(170px, 100%); min-width: 0; padding: 16px 18px; border: 2px solid var(--md4u-navy, #011627); border-radius: 8px; background: var(--md4u-white, #fff); box-shadow: 5px 5px 0 var(--md4u-navy, #011627); }
.md4u-herovis__note b { display: block; color: var(--md4u-pink, #E5446D); font-size: 29px; line-height: 1; }
.md4u-herovis__note span { display: block; margin-top: 5px; font-size: 11px; font-weight: 900; color: var(--md4u-navy, #011627); }
.md4u-herovis__note--one { grid-column: 1; grid-row: 2; justify-self: end; }
.md4u-herovis__note--two { grid-column: 2; grid-row: 2; justify-self: start; }
.md4u-herovis__note--two b { color: #008fa5; }
@media (max-width: 900px) { .md4u-herovis { min-height: 500px; } }
@media (max-width: 620px) {
  .md4u-herovis { min-height: 430px; }
  .md4u-herovis__orbit--one { width: 350px; height: 350px; }
  .md4u-herovis__orbit--two { width: 270px; height: 270px; }
  .md4u-herovis__card { min-height: 330px; padding: 23px; }
  .md4u-herovis__card > p { margin-top: 45px; }
  .md4u-herovis__card > strong { font-size: 29px; }
  .md4u-herovis__note { width: 100%; min-width: 0; padding: 12px; }
  .md4u-herovis__note b { font-size: 24px; }
}

/* ---- [SERVICE CARDS — dark skin] home.css .service-grid/.service-card ---- */
.md4u-svcgrid--dark { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; color: var(--md4u-white, #fff); }
.md4u-svcgrid__card {
  position: relative;
  /* Explicit stacking: the hover translateY creates a stacking context, which
     would trap the overhanging OR badge (z-index 3) inside its card and let the
     NEXT sibling card paint over it (positioned siblings stack by DOM order).
     Every plain card gets z-index 1; the has-or cards get 3 / 2 below (see the
     --has-or comment: two badge cards sit ADJACENT on the real homepage), so
     the stack order is deterministic in every state (Mitch, 24 Aug ×2). */
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 370px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: var(--md4u-navy-card, #082137);
  transition: transform .2s ease, border-color .2s ease;
}
.md4u-svcgrid__card--orange { --md4u-accent: var(--md4u-orange, #FE7F2D); }
.md4u-svcgrid__card--pink   { --md4u-accent: var(--md4u-pink, #E5446D); }
.md4u-svcgrid__card--blue   { --md4u-accent: var(--md4u-cyan, #2DE1FC); }
/* OR-badge stacking, round 2 (defect round 1, 24 Aug 2026). Live puts an OR
   badge on BOTH website cards (home.js orBadge: lead-gen AND ecommerce), so on
   the real homepage two --has-or cards sit SIDE BY SIDE. A flat z-index on the
   modifier made them equal, and equal positioned siblings stack by DOM order —
   the ecommerce card painted over the lead-gen card's badge in EVERY state
   (that is what Mitch saw; the components page never caught it because it only
   renders one --has-or card). Each badge-carrying card must sit ABOVE its
   right-hand neighbour, so a has-or card is 3 and a has-or card that DIRECTLY
   FOLLOWS another has-or card steps down to 2 (still above the plain cards' 1).
   Live never renders more than two in a row (the website alternatives); a
   third consecutive has-or card would tie at 2 — renumber here if that day
   comes. Entrance animations on ANCESTORS (Elementor .animated fill-mode
   both / V4 interactions) flatten the whole grid into one context and keep
   this internal order intact — verified mid- and post-animation. */
.md4u-svcgrid__card--has-or { z-index: 3; }
.md4u-svcgrid__card--has-or + .md4u-svcgrid__card--has-or { z-index: 2; }
.md4u-svcgrid__card:hover { transform: translateY(-5px); border-color: var(--md4u-accent); }
.md4u-svcgrid__num { color: var(--md4u-accent); font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.md4u-svcgrid__card h3 { margin: 46px 0 13px; font-size: 25px; letter-spacing: -.8px; color: var(--md4u-white, #fff); font-weight: 800; line-height: 1.5; /* live-rendered */ }
.md4u-svcgrid__card > p { flex: 1; margin: 0; color: #bfcad1; font-size: 14px; line-height: 1.55; }
.md4u-svcgrid__price { display: flex; align-items: end; margin: 25px 0 26px; }
.md4u-svcgrid__price small { align-self: start; margin: 7px 8px 0 0; color: var(--md4u-accent); font-size: 9px; font-weight: 900; }
.md4u-svcgrid__price strong { font-size: 43px; line-height: .9; letter-spacing: -2px; color: var(--md4u-white, #fff); }
.md4u-svcgrid__price > span { margin-left: 5px; color: #bfcad1; font-size: 12px; }
.md4u-svcgrid__actions { display: flex; align-items: center; gap: 15px; margin-top: auto; }
.md4u-svcgrid__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 128px;
  min-height: 39px;
  padding: 0 13px;
  border: 2px solid var(--md4u-accent);
  border-radius: 5px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}
.md4u-svcgrid__actions button:hover,
.md4u-svcgrid__actions button[aria-pressed="true"] { background: var(--md4u-accent); color: var(--md4u-navy, #011627); }
.md4u-svcgrid__actions button:focus-visible { outline: 2px solid var(--md4u-cyan, #2DE1FC); outline-offset: 2px; }
.md4u-svcgrid__actions button span { font-size: 17px; line-height: 1; }
.md4u-svcgrid__or {
  position: absolute;
  z-index: 3;
  top: 50%;
  /* live uses -31px and papers over the resulting 0.6px viewport overflow at
     900px with body{overflow-x:hidden} (the -7deg rotation widens the bbox by
     ~2.6px each side). -29px keeps the whole rotated badge inside the 32px
     section gutter at every width — visually identical, zero overflow. */
  right: -29px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 50%;
  background: var(--md4u-orange, #FE7F2D);
  color: var(--md4u-navy, #011627);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 4px 4px 0 var(--md4u-cyan, #2DE1FC);
  transform: translateY(-50%) rotate(-7deg);
}
@media (max-width: 900px) {
  .md4u-svcgrid--dark { grid-template-columns: repeat(2, 1fr); }
  .md4u-svcgrid__card { text-align: center; }
  .md4u-svcgrid__price, .md4u-svcgrid__actions { justify-content: center; }
}
@media (max-width: 620px) {
  .md4u-svcgrid--dark { grid-template-columns: 1fr; row-gap: 30px; }
  .md4u-svcgrid__card { min-height: 340px; }
  .md4u-svcgrid__or { top: auto; right: auto; bottom: -39px; left: 50%; transform: translateX(-50%) rotate(-7deg); }
}

/* ---- [SERVICE CARDS — light skin] site.css .s-svcgrid/.s-svc ---- */
.md4u-svcgrid--light { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
a.md4u-svcgrid__lcard {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 12px;
  background: var(--md4u-white, #fff);
  box-shadow: 8px 8px 0 var(--md4u-navy, #011627);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  color: var(--md4u-navy, #011627);
}
a.md4u-svcgrid__lcard:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--md4u-navy, #011627); color: var(--md4u-navy, #011627); }
a.md4u-svcgrid__lcard:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 3px; }
/* :is(h2,h3,h4) so the per-instance heading_tag control cannot change the look
   (26 Aug 2026). Same specificity as the old `a.md4u-svcgrid__lcard h3`
   (0,2,1), so nothing else in the cascade shifts. */
a.md4u-svcgrid__lcard :is(h2, h3, h4) { margin: 0 0 8px; font-size: 21px; letter-spacing: -.6px; font-weight: 800; line-height: 1.5; /* live-rendered */ }
a.md4u-svcgrid__lcard p { margin: 0 0 18px; color: var(--md4u-muted, #5A6770); font-size: 14px; line-height: 1.55; }
.md4u-svcgrid__lprice { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.md4u-svcgrid__lprice small { color: var(--md4u-pink, #E5446D); font-size: 10px; font-weight: 900; letter-spacing: .6px; }
.md4u-svcgrid__lprice strong { font-size: 30px; letter-spacing: -1.4px; }
.md4u-svcgrid__lprice span { color: var(--md4u-muted, #5A6770); font-size: 12px; }
.md4u-svcgrid__go { margin-top: 14px; color: var(--md4u-orange, #FE7F2D); font-size: 13px; font-weight: 900; } /* brand orange per Mitch 24 Aug (was the darker #c2542c link tone) */
a.md4u-svcgrid__lcard:hover .md4u-svcgrid__go { color: var(--md4u-pink, #E5446D); }
@media (max-width: 900px) { .md4u-svcgrid--light { grid-template-columns: 1fr; } .md4u-svcgrid__lcard { text-align: center; } .md4u-svcgrid__lprice { justify-content: center; } }

/* ---- [PACKAGE MODAL] home.css .pkg-* verbatim ---- */
button.md4u-pkg-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px;
  border: 2px solid var(--md4u-navy, #011627);
  border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D);
  color: var(--md4u-navy, #011627);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--md4u-navy, #011627);
  transition: transform .15s ease, box-shadow .15s ease;
}
button.md4u-pkg-trigger:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); }
button.md4u-pkg-trigger:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 3px; }
.md4u-pkg { position: fixed; inset: 0; z-index: 200; display: none; }
.md4u-pkg.is-open { display: block; }
body.md4u-pkg-open { overflow: hidden; }
.md4u-pkg__backdrop { position: absolute; inset: 0; background: rgba(1, 22, 39, .62); }
.md4u-pkg__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 30px 30px 24px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 16px;
  background: var(--md4u-white, #fff);
  color: var(--md4u-navy, #011627);
  box-shadow: 10px 10px 0 var(--md4u-pink, #E5446D);
  text-align: left;
}
button.md4u-pkg__close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--md4u-navy, #011627); cursor: pointer; font: inherit; font-size: 26px; line-height: 1; }
button.md4u-pkg__close:hover { color: var(--md4u-pink, #E5446D); }
button.md4u-pkg__close:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 2px; }
.md4u-pkg__kicker { margin: 0 0 10px; color: var(--md4u-pink, #E5446D); font-size: 10px; font-weight: 900; letter-spacing: 1.6px; }
.md4u-pkg__title { margin: 0 0 6px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -1.2px; font-weight: 900; color: var(--md4u-navy, #011627); }
.md4u-pkg__term { margin: 0 0 18px; color: var(--md4u-muted, #5A6770); font-size: 12px; font-weight: 700; }
.md4u-pkg__tiers { display: grid; gap: 12px; }
.md4u-pkg__tier {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 2px solid var(--md4u-line, rgba(1,22,39,.13));
  border-radius: 10px;
  background: var(--md4u-cream, #FFFAF4);
  color: var(--md4u-navy, #011627);
  text-align: left;
}
.md4u-pkg__tier.is-popular { border-color: var(--md4u-pink, #E5446D); background: #fff; }
.md4u-pkg__badge { position: absolute; top: -9px; right: 14px; padding: 4px 9px; border-radius: 99px; background: var(--md4u-pink, #E5446D); color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.md4u-pkg__tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.md4u-pkg__tier-head strong { font-size: 17px; font-weight: 900; }
.md4u-pkg__tier-price { font-size: 24px; font-weight: 900; letter-spacing: -1px; white-space: nowrap; }
.md4u-pkg__tier-price small { margin-left: 2px; color: var(--md4u-muted, #5A6770); font-size: 10px; font-weight: 700; letter-spacing: 0; }
.md4u-pkg__tier-desc { display: block; margin: 7px 0 10px; color: var(--md4u-muted, #5A6770); font-size: 12px; line-height: 1.5; }
button.md4u-pkg__more {
  display: table;
  border-radius: 0; /* theme button base bleeds 3px */
  margin: 0 0 12px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid var(--md4u-orange, #FE7F2D);
  background: none;
  color: var(--md4u-navy, #011627);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}
button.md4u-pkg__more:hover { color: var(--md4u-pink, #E5446D); }
button.md4u-pkg__more:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 2px; }
.md4u-pkg__features[hidden] { display: none; }
.md4u-pkg__features { list-style: none; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--md4u-line, rgba(1,22,39,.13)); border-radius: 8px; background: #fff; display: grid; gap: 7px; }
.md4u-pkg__features li { font-size: 12px; line-height: 1.45; color: var(--md4u-navy, #011627); padding-left: 18px; position: relative; }
.md4u-pkg__features li::before { content: "\2713"; position: absolute; left: 0; color: var(--md4u-pink, #E5446D); font-weight: 900; }
.md4u-pkg__features li.md4u-pkg__feature-lead { padding-left: 0; color: var(--md4u-muted, #5A6770); font-weight: 800; font-size: 11px; }
.md4u-pkg__features li.md4u-pkg__feature-lead::before { content: none; }
button.md4u-pkg__add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px;
  border: 2px solid var(--md4u-navy, #011627);
  border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D);
  color: var(--md4u-navy, #011627);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--md4u-navy, #011627);
  transition: transform .15s ease, box-shadow .15s ease;
}
button.md4u-pkg__add:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); }
button.md4u-pkg__add:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 3px; }
.md4u-pkg__note {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 2px solid var(--md4u-navy, #011627);
  border-radius: 8px;
  background: var(--md4u-orange, #FE7F2D);
  color: var(--md4u-navy, #011627);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 620px) {
  .md4u-pkg__card { padding: 24px 18px 20px; box-shadow: 6px 6px 0 var(--md4u-pink, #E5446D); }
  .md4u-pkg__tier-head strong { font-size: 15px; }
  .md4u-pkg__tier-price { font-size: 20px; }
}

/* ---- [MINI CART] home.css .mini-cart verbatim; --inline shows it in flow ---- */
.md4u-cart {
  width: min(330px, calc(100vw - 44px));
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 14px;
  background: var(--md4u-white, #fff);
  color: var(--md4u-navy, #011627);
  box-shadow: 8px 8px 0 var(--md4u-cyan, #2DE1FC);
  text-align: left;
}
.md4u-cart--fixed {
  position: fixed;
  z-index: 120;
  right: 22px;
  bottom: 22px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(28px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
}
.md4u-cart--fixed.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
button.md4u-cart__head {
  border-radius: 0; /* theme button base bleeds 3px onto <button> */
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13));
  background: transparent;
  color: var(--md4u-navy, #011627);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.1px;
}
button.md4u-cart__head:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: -3px; }
.md4u-cart__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--md4u-pink, #E5446D); color: #fff; font-size: 11px; }
.md4u-cart__chevron { margin-left: auto; font-size: 15px; transition: transform .2s ease; }
.md4u-cart.is-collapsed .md4u-cart__chevron { transform: rotate(180deg); }
.md4u-cart.is-collapsed .md4u-cart__body { display: none; }
.md4u-cart.is-collapsed .md4u-cart__head { border-bottom: 0; }
.md4u-cart__body { padding: 6px 18px 18px; }
.md4u-cart__list { list-style: none; margin: 0 0 4px; padding: 0; max-height: 200px; overflow-y: auto; }
.md4u-cart__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13)); font-size: 12px; }
.md4u-cart__list li span { font-weight: 800; }
.md4u-cart__list li strong { margin-left: auto; white-space: nowrap; font-size: 11px; }
button.md4u-cart__remove { border: 0; border-radius: 0; /* theme button base bleeds 3px */ background: transparent; color: var(--md4u-muted, #5A6770); cursor: pointer; font: inherit; font-size: 16px; line-height: 1; padding: 2px 4px; }
button.md4u-cart__remove:hover { color: var(--md4u-pink, #E5446D); }
.md4u-cart__total { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 12px 0 14px; }
.md4u-cart__total > span { font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.md4u-cart__total strong { font-size: 30px; line-height: .85; letter-spacing: -1.5px; }
.md4u-cart__total small { color: var(--md4u-muted, #5A6770); font-size: 10px; }
a.md4u-cart__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 48px;
  padding: 0 26px;
  border: 2px solid var(--md4u-navy, #011627);
  border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D);
  color: var(--md4u-navy, #011627);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--md4u-navy, #011627);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.md4u-cart__cta:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); color: var(--md4u-navy, #011627); }
a.md4u-cart__cta:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 3px; }
/* Secondary "See your marketing plan" link (Mitch, 24 Aug 2026 — not on live):
   written by md4u-cart.js only on pages that have the in-section plan panel. */
a.md4u-cart__panel-link {
  display: block;
  margin: 10px 0 0;
  text-align: center;
  color: var(--md4u-muted, #5A6770);
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.md4u-cart__panel-link:hover { color: var(--md4u-pink, #E5446D); }
@media (max-width: 620px) {
  .md4u-cart--fixed { right: 10px; bottom: 10px; width: calc(100vw - 20px); box-shadow: 5px 5px 0 var(--md4u-cyan, #2DE1FC); }
  .md4u-cart__list { max-height: 150px; }
}

/* ---- [PLAN PANEL — dynamic rows] home.css .selected-list/.call-total/
   .hosting-free-note verbatim (defect round 1, 24 Aug 2026). This markup is
   written by md4u-cart.js's renderPlanPanel() into the homepage plan-builder
   panel (#plan-body) — the panel SHELL (.plan-panel/.plan-total/.pt-amount/
   .md4u-sm/.empty-plan) is page furniture styled by the child theme; only the
   JS-injected selection rows live here, because the JS that writes them lives
   in this plugin. Scoped under .plan-panel so nothing leaks. Breakpoints
   900/620 mirror live's two centring blocks. */
.plan-panel .selected-list { list-style: none; padding: 0; margin: 25px 0; border-top: 1px solid var(--md4u-line, rgba(1,22,39,.13)); }
.plan-panel .selected-list li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13)); font-size: 12px; }
.plan-panel .selected-list li span { font-weight: 800; }
.plan-panel .selected-list li strong { white-space: nowrap; }
.plan-panel .call-total { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; align-items: center; margin: -10px 0 25px; padding: 14px 16px; border: 1px solid rgba(229,68,109,.35); border-radius: 7px; background: rgba(229,68,109,.07); }
.plan-panel .call-total-only { margin-top: 25px; }
.plan-panel .call-total > span { font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.plan-panel .call-total strong { font-size: 18px; white-space: nowrap; }
.plan-panel .call-total small { grid-column: 1 / -1; color: var(--md4u-muted, #5A6770); font-size: 10px; }
.plan-panel .hosting-free-note { margin: -8px 0 22px; padding: 10px 13px; border: 1px solid rgba(45,225,252,.5); border-radius: 7px; background: rgba(45,225,252,.09); font-size: 11px; }
@media (max-width: 900px) {
  .plan-panel .selected-list li { flex-direction: column; align-items: center; gap: 5px; }
  .plan-panel .call-total { grid-template-columns: 1fr; text-align: center; }
  .plan-panel .call-total small { grid-column: 1; }
}
@media (max-width: 620px) {
  .plan-panel .selected-list li { flex-direction: column; align-items: center; gap: 5px; }
  .plan-panel .call-total { grid-template-columns: 1fr; text-align: center; }
  .plan-panel .call-total small { grid-column: 1; }
}

/* ---- [PRICING TIERS — cream] pages.css .pg .tier verbatim ----
   DELIBERATE DEVIATION from live (Mitch, 24 Aug 2026, playbook micro-detail):
   live uses align-items:start so the tier CTAs sit at ragged heights; the
   rebuild stretches cards sharing a row to equal height and bottom-anchors
   the CTA (margin-top:auto). Applies at desktop AND tablet; natural height
   once stacked. */
.md4u-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.md4u-tiers--cream .md4u-tiers__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--md4u-navy, #011627);   /* live: inherited from .pg */
  text-align: center;                  /* live: inherited from the .centre wrapper */
  padding: 34px 28px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 16px;
  background: var(--md4u-cream, #FFFAF4);
  box-shadow: 10px 10px 0 var(--md4u-navy, #011627);
}
.md4u-tiers--cream .md4u-tiers__tier.is-popular { box-shadow: 10px 10px 0 var(--md4u-pink, #E5446D); }
.md4u-tiers--cream .md4u-tiers__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border: 2px solid var(--md4u-navy, #011627); border-radius: 99px;
  background: var(--md4u-pink, #E5446D); color: #fff;
  font-size: 10px; font-weight: 900; letter-spacing: 1px; white-space: nowrap;
}
.md4u-tiers--cream .md4u-tiers__tier h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 1.6px; line-height: 1.25; text-transform: uppercase; color: var(--md4u-pink, #E5446D); /* live-rendered weight (SPA base 800!important) */ }
.md4u-tiers--cream .md4u-tiers__price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 14px 0 22px; }
.md4u-tiers--cream .md4u-tiers__price strong { font-size: 52px; line-height: .9; letter-spacing: -3px; font-weight: 700; color: var(--md4u-navy, #011627); }
.md4u-tiers--cream .md4u-tiers__price span { font-size: 15px; font-weight: 900; color: var(--md4u-muted, #5A6770); }
.md4u-tiers--cream .md4u-tiers__tier ul { list-style: none; display: grid; gap: 11px; margin: 0 0 26px; padding: 0; text-align: left; }
.md4u-tiers--cream .md4u-tiers__tier li { font-size: 14px; line-height: 1.5; color: var(--md4u-navy, #011627); }
.md4u-tiers--cream .md4u-tiers__tier li::before { content: "\2713"; color: var(--md4u-pink, #E5446D); margin-right: 9px; font-weight: 900; }
.md4u-tiers--cream .md4u-tiers__tier li.md4u-tiers__lead-line { color: var(--md4u-muted, #5A6770); font-weight: 800; }
.md4u-tiers--cream .md4u-tiers__tier li.md4u-tiers__lead-line::before { content: none; }
.md4u-tiers--cream .md4u-tiers__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: auto; width: 100%;
  min-height: 56px; padding: 0 30px;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D); color: var(--md4u-navy, #011627);
  font-size: 15px; font-weight: 900; text-decoration: none;
  box-shadow: 5px 5px 0 var(--md4u-navy, #011627);
  transition: transform .18s ease, box-shadow .18s ease;
}
.md4u-tiers--cream .md4u-tiers__btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); color: var(--md4u-navy, #011627); }
.md4u-tiers--cream .md4u-tiers__btn:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 3px; }

/* ---- [PRICING TIERS — navy band] site.css .s-tier verbatim ---- */
.md4u-tiers--navy { gap: 18px; color: var(--md4u-white, #fff); }
.md4u-tiers--navy .md4u-tiers__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; /* equal-height rule: stretch to the row, CTA bottom-anchored */
  padding: 30px 26px;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: var(--md4u-navy-card, #082137);
}
.md4u-tiers--navy .md4u-tiers__tier.is-popular { border-color: var(--md4u-pink, #E5446D); background: var(--md4u-navy-deep, #0B2A45); box-shadow: 10px 10px 0 var(--md4u-pink, #E5446D); }
.md4u-tiers--navy .md4u-tiers__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 99px; background: var(--md4u-pink, #E5446D); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .9px; white-space: nowrap; }
.md4u-tiers--navy .md4u-tiers__tier h3 { margin: 0 0 14px; text-align: center; font-size: 22px; font-weight: 800; line-height: 1.5; color: var(--md4u-white, #fff); /* live-rendered */ }
.md4u-tiers--navy .md4u-tiers__price { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin-bottom: 20px; }
.md4u-tiers--navy .md4u-tiers__price strong { font-size: 46px; letter-spacing: -2px; line-height: .9; color: var(--md4u-white, #fff); }
.md4u-tiers--navy .md4u-tiers__price span { color: #bfcad1; font-size: 12px; }
.md4u-tiers--navy .md4u-tiers__tier ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.md4u-tiers--navy .md4u-tiers__tier li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: #d6dee3; }
.md4u-tiers--navy .md4u-tiers__tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--md4u-pink, #E5446D); font-weight: 900; }
.md4u-tiers--navy .md4u-tiers__tier li.md4u-tiers__lead-line { padding-left: 0; color: #9fb2bd; font-weight: 800; font-size: 12px; }
.md4u-tiers--navy .md4u-tiers__tier li.md4u-tiers__lead-line::before { content: none; }
.md4u-tiers--navy .md4u-tiers__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; margin-top: auto;
  min-height: 48px; padding: 0 28px;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D); color: var(--md4u-navy, #011627);
  font-size: 14px; font-weight: 900; text-decoration: none;
  box-shadow: 5px 5px 0 var(--md4u-cyan, #2DE1FC);
  transition: transform .18s ease, box-shadow .18s ease;
}
.md4u-tiers--navy .md4u-tiers__btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-cyan, #2DE1FC); color: var(--md4u-navy, #011627); }
.md4u-tiers--navy .md4u-tiers__btn:focus-visible { outline: 2px solid var(--md4u-cyan, #2DE1FC); outline-offset: 3px; }
@media (max-width: 1080px) {
  .md4u-tiers--cream { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .md4u-tiers { grid-template-columns: 1fr; text-align: center; }
  .md4u-tiers--navy { gap: 24px; }
  .md4u-tiers--cream .md4u-tiers__price { justify-content: center; }
  .md4u-tiers--cream .md4u-tiers__tier ul { text-align: center; }
}

/* ---- [PRICING PROMISE] home.css .pricing-promise verbatim ---- */
.md4u-promise {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 34px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-left: 5px solid var(--md4u-cyan, #2DE1FC);
  border-radius: 10px;
  /* Phase 2c: gradient stops exposed as local custom props so the widget's
     Style tab can retint them; fallbacks are the original literals, so the
     rendered gradient is byte-identical until a control is set. */
  background: linear-gradient(120deg, var(--md4u-promise-g1, #0b2a45), var(--md4u-promise-g2, #082137));
  color: var(--md4u-white, #fff);
  box-shadow: 0 16px 35px rgba(6,26,43,.25);
  animation: md4u-promise-breathe 4.5s ease-in-out infinite;
}
@keyframes md4u-promise-breathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 16px 35px rgba(6,26,43,.25); }
  50% { transform: translateY(-4px); box-shadow: 0 21px 42px rgba(6,26,43,.34); }
}
.md4u-promise__price > span { display: block; margin-bottom: 7px; color: var(--md4u-cyan, #2DE1FC); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.md4u-promise__rates { display: grid; grid-template-columns: repeat(2, auto); gap: 24px; }
.md4u-promise__rate { display: grid; align-content: end; }
.md4u-promise__rate small { margin-bottom: 4px; color: var(--md4u-cyan, #2DE1FC); font-size: 9px; font-weight: 900; letter-spacing: .7px; white-space: nowrap; }
.md4u-promise__rate strong { font-size: 48px; line-height: .86; letter-spacing: -3px; color: var(--md4u-white, #fff); }
.md4u-promise__rate em { margin-top: 6px; color: #bfcad1; font-size: 9px; font-style: normal; white-space: nowrap; }
.md4u-promise__copy h3 { margin: 0 0 7px; font-size: 24px; letter-spacing: -.7px; color: var(--md4u-white, #fff); font-weight: 800; line-height: 1.5; /* live-rendered */ }
.md4u-promise__copy p { max-width: 480px; margin: 0; color: #d8e0e5; font-size: 13px; font-weight: 700; line-height: 1.5; }
a.md4u-promise__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-width: 210px; min-height: 56px; padding: 0 26px;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D); color: var(--md4u-navy, #011627);
  font-size: 15px; font-weight: 900; text-decoration: none;
  box-shadow: 5px 5px 0 var(--md4u-cyan, #2DE1FC);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.md4u-promise__cta:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-cyan, #2DE1FC); color: var(--md4u-navy, #011627); }
a.md4u-promise__cta:focus-visible { outline: 2px solid var(--md4u-cyan, #2DE1FC); outline-offset: 3px; }
@media (max-width: 900px) {
  .md4u-promise { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .md4u-promise__rates { justify-content: center; }
  .md4u-promise__copy p { margin-inline: auto; }
  .md4u-promise__cta { justify-self: center; }
}
@media (max-width: 620px) { .md4u-promise { padding: 24px 20px; } }

/* ---- [PRICE ALERT] home.css .price-alert verbatim; --inline shows in flow ---- */
.md4u-alert {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  width: min(880px, calc(100% - 48px));
  margin-inline: auto;
  padding: 22px 66px 22px 26px;
  position: relative;
  border: 2px solid var(--md4u-cyan, #2DE1FC);
  border-radius: 12px;
  background: var(--md4u-navy, #011627);
  color: #fff;
  box-shadow: 10px 10px 0 rgba(229,68,109,.88), 0 24px 60px rgba(6,26,43,.35);
}
.md4u-alert--fixed {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  left: 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(35px) scale(.98);
  transition: opacity .45s ease, transform .45s ease;
}
.md4u-alert--fixed.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.md4u-alert.is-dismissed { display: none; }
.md4u-alert__copy > span { display: block; margin-bottom: 6px; color: var(--md4u-cyan, #2DE1FC); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.md4u-alert__copy strong { display: block; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.15; letter-spacing: -.5px; }
.md4u-alert__copy p { margin: 7px 0 0; color: #d8e0e5; font-size: 13px; line-height: 1.45; }
a.md4u-alert__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-width: 190px; min-height: 56px; padding: 0 26px; white-space: nowrap;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-orange, #FE7F2D); color: var(--md4u-navy, #011627);
  font-size: 15px; font-weight: 900; text-decoration: none;
  box-shadow: 5px 5px 0 var(--md4u-navy, #011627);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.md4u-alert__cta:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--md4u-navy, #011627); color: var(--md4u-navy, #011627); }
a.md4u-alert__cta:focus-visible { outline: 2px solid var(--md4u-cyan, #2DE1FC); outline-offset: 3px; }
button.md4u-alert__close { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border: 0; background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: 27px; line-height: 1; }
button.md4u-alert__close:hover { color: var(--md4u-pink, #E5446D); }
button.md4u-alert__close:focus-visible { outline: 2px solid var(--md4u-cyan, #2DE1FC); outline-offset: 2px; }
@media (max-width: 620px) {
  .md4u-alert { grid-template-columns: 1fr; gap: 16px; width: auto; padding: 24px 22px 22px; text-align: center; box-shadow: 6px 6px 0 rgba(229,68,109,.88), 0 18px 45px rgba(6,26,43,.35); }
  .md4u-alert--fixed { right: 12px; bottom: 12px; left: 12px; }
  .md4u-alert__copy p { margin-inline: auto; }
  .md4u-alert__cta { justify-self: center; }
}

/* ---- [STEPS] home.css .steps (home) + site.css .s-steps (compact) ---- */
.md4u-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--md4u-navy, #011627); color: var(--md4u-navy, #011627); }
.md4u-steps--home .md4u-steps__step { padding: 28px 25px 10px 0; }
.md4u-steps--home .md4u-steps__step + .md4u-steps__step { padding-left: 25px; border-left: 1px solid var(--md4u-line, rgba(1,22,39,.13)); }
.md4u-steps__num { display: grid; place-items: center; width: 35px; height: 35px; border: 2px solid var(--md4u-navy, #011627); border-radius: 50%; background: var(--md4u-cyan, #2DE1FC); font-weight: 900; color: var(--md4u-navy, #011627); }
.md4u-steps__step:nth-child(2) .md4u-steps__num { background: var(--md4u-orange, #FE7F2D); }
.md4u-steps__step:nth-child(3) .md4u-steps__num { background: var(--md4u-pink, #E5446D); color: #fff; }
.md4u-steps--home h3 { margin: 26px 0 10px; font-size: 22px; color: var(--md4u-navy, #011627); font-weight: 800; letter-spacing: -0.02em; line-height: 1.5; /* live-rendered: SPA base h3 800!important + -.02em + lh 1.5 */ }
.md4u-steps--home p { margin: 0; color: var(--md4u-muted, #5A6770); font-size: 15px; line-height: 1.55; }
.md4u-steps--compact .md4u-steps__step { padding: 24px 20px 6px 0; }
.md4u-steps--compact .md4u-steps__step + .md4u-steps__step { padding-left: 20px; border-left: 1px solid var(--md4u-line, rgba(1,22,39,.13)); }
.md4u-steps--compact .md4u-steps__num { width: 34px; height: 34px; }
.md4u-steps--compact h3 { margin: 18px 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.5; color: var(--md4u-navy, #011627); /* live-rendered (site.css says 900 but the SPA base 800!important wins on live) */ }
.md4u-steps--compact p { margin: 0; color: var(--md4u-muted, #5A6770); font-size: 14px; line-height: 1.55; }
/* <=900 bordered-row collapse (brand rule) — home collapses to 2-up at 900
   then rows at 620 exactly as live; compact goes straight to rows. */
@media (max-width: 900px) {
  .md4u-steps--home { grid-template-columns: repeat(2, 1fr); }
  .md4u-steps--home .md4u-steps__step,
  .md4u-steps--home .md4u-steps__step + .md4u-steps__step { padding: 28px 20px; text-align: center; }
  .md4u-steps--home .md4u-steps__step:nth-child(3) { border-left: 0; }
  .md4u-steps--compact { grid-template-columns: 1fr; }
  .md4u-steps--compact .md4u-steps__step,
  .md4u-steps--compact .md4u-steps__step + .md4u-steps__step { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13)); text-align: center; }
  .md4u-steps__num { margin-inline: auto; }
}
@media (max-width: 620px) {
  .md4u-steps--home { grid-template-columns: 1fr; }
  .md4u-steps--home .md4u-steps__step,
  .md4u-steps--home .md4u-steps__step + .md4u-steps__step { padding: 25px 0; border-left: 0; border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13)); }
}

/* ---- [FAQ] home.css .faq (home) + site.css .s-faq (service) ---- */
.md4u-faq { border-top: 2px solid var(--md4u-navy, #011627); }
.md4u-faq details { border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13)); }
.md4u-faq summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; color: var(--md4u-navy, #011627); }
.md4u-faq summary::-webkit-details-marker { display: none; }
.md4u-faq summary:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: -2px; }
.md4u-faq summary span { color: var(--md4u-pink, #E5446D); flex: none; transition: transform .2s ease; }
.md4u-faq details[open] summary span { transform: rotate(45deg); }
.md4u-faq details p { color: var(--md4u-muted, #5A6770); line-height: 1.65; }
.md4u-faq--home summary { padding: 25px 4px; font-size: 18px; font-weight: 900; }
.md4u-faq--home summary span { font-size: 25px; }
.md4u-faq--home details p { max-width: 740px; margin: -5px 0 25px; }
.md4u-faq--service summary { padding: 20px 4px; font-size: 16.5px; font-weight: 900; }
.md4u-faq--service summary span { font-size: 22px; }
.md4u-faq--service details p { margin: -4px 0 20px; font-size: 14.5px; }
@media (max-width: 900px) {
  .md4u-faq summary { justify-content: center; align-items: center; text-align: center; }
  .md4u-faq details p { margin-inline: auto; text-align: center; }
}

/* ---- [DAN] home.css .dan (portrait) + lander99.css .dan-card (circle) ---- */
.md4u-dan--portrait { display: grid; grid-template-columns: 400px 1fr; gap: 70px; align-items: center; color: var(--md4u-navy, #011627); }
.md4u-dan__img { border: 3px solid var(--md4u-navy, #011627); border-radius: 16px; overflow: hidden; background: var(--md4u-pink, #E5446D); }
.md4u-dan--shadow-blue .md4u-dan__img { box-shadow: 12px 12px 0 var(--md4u-cyan, #2DE1FC); }
.md4u-dan--shadow-orange .md4u-dan__img { box-shadow: 12px 12px 0 var(--md4u-orange, #FE7F2D); }
.md4u-dan__img img { width: 100%; height: auto; display: block; }
.md4u-dan--portrait .md4u-dan__disc { margin: 18px 0 0; font-size: 12px; color: var(--md4u-muted, #5A6770); }
.md4u-dan__kicker { margin: 0 0 22px; color: var(--md4u-pink, #E5446D); font-size: 12px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; }
.md4u-dan--portrait h2 { max-width: 740px; margin: 0; font-size: clamp(38px, 4.4vw, 59px); line-height: 1.04; letter-spacing: -3px; font-weight: 900; color: var(--md4u-navy, #011627); }
.md4u-dan__copy { max-width: 690px; margin: 24px 0 0; color: var(--md4u-muted, #5A6770); font-size: 17px; line-height: 1.65; }
.md4u-dan--circle {
  color: var(--md4u-navy, #011627);
  padding: 32px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 18px;
  background: var(--md4u-white, #fff);
  text-align: center;
}
.md4u-dan--circle.md4u-dan--shadow-blue { box-shadow: 16px 16px 0 var(--md4u-cyan, #2DE1FC); }
.md4u-dan--circle.md4u-dan--shadow-orange { box-shadow: 16px 16px 0 var(--md4u-orange, #FE7F2D); }
.md4u-dan--circle img {
  width: 190px; height: 190px;
  margin: 0 auto 20px;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--md4u-pink, #E5446D);
  display: block;
}
.md4u-dan__name { margin: 0; font-size: 15px; font-weight: 900; color: var(--md4u-navy, #011627); }
.md4u-dan--circle .md4u-dan__disc { margin: 8px 0 0; font-size: 12px; color: var(--md4u-muted, #5A6770); }
.md4u-dan__points { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.md4u-dan__points li { font-size: 14px; font-weight: 700; color: var(--md4u-navy, #011627); }
.md4u-dan__points li::before { content: "\2713"; color: var(--md4u-pink, #E5446D); margin-right: 9px; font-weight: 900; }
@media (max-width: 900px) {
  .md4u-dan--portrait { grid-template-columns: 1fr; gap: 45px; text-align: center; }
  .md4u-dan__frame { width: min(400px, 100%); margin-inline: auto; }
  .md4u-dan__points { text-align: center; }
}

/* ---- [COMPARISON TABLE] lander99.css .table-wrap/.compare verbatim ----
   The wrapper owns horizontal scroll (min-width 640 table) so the PAGE never
   overflows — the overflow-x rule. 12px ORANGE hard shadow per lp99 spec. */
.md4u-cmp {
  color: var(--md4u-navy, #011627);
  text-align: center; /* live: .centre wrapper; the table below re-lefts itself */
  overflow-x: auto;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 14px;
  background: var(--md4u-white, #fff);
  box-shadow: 12px 12px 0 var(--md4u-orange, #FE7F2D);
}
.md4u-cmp table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.md4u-cmp th, .md4u-cmp td { padding: 17px 20px; border: 0; border-bottom: 1px solid var(--md4u-line, rgba(1,22,39,.13)); background: transparent; font-size: 15px; color: var(--md4u-navy, #011627); }
.md4u-cmp thead th { background: var(--md4u-navy, #011627); color: var(--md4u-white, #fff); font-size: 13px; letter-spacing: .4px; }
.md4u-cmp thead th:nth-child(2) { background: var(--md4u-pink, #E5446D); }
.md4u-cmp tbody th { font-weight: 700; }
.md4u-cmp td.md4u-cmp__yes { font-weight: 900; }
.md4u-cmp td.md4u-cmp__no { color: var(--md4u-muted, #5A6770); }
.md4u-cmp tr:last-child th, .md4u-cmp tr:last-child td { border-bottom: 0; }
/* Hello/theme base table styles zebra-stripe odd tbody rows and put a
   border-block-start on the first thead row at 0-1-3 specificity — match and
   beat them or the table renders striped with a stray grey top border. */
.md4u-cmp table tbody > tr:nth-child(2n+1) > th,
.md4u-cmp table tbody > tr:nth-child(2n+1) > td { background-color: transparent; }
.md4u-cmp table thead tr:first-child th,
.md4u-cmp table thead tr:first-child td { border-block-start: 0; }
@media (max-width: 900px) { .md4u-cmp table { text-align: center; } }


/* TRAP (found 24 Aug 2026, Phase 2b parity run): Elementor's frontend base
   ships `.elementor a { box-shadow: none }` at specificity 0-1-1, which beats
   a bare component class (0-1-0) on <a> elements and silently deletes hard
   shadows from link-styled components. Every anchor that carries a shadow is
   selected as `a.md4u-*` above. */

/* TRAP (found 24 Aug 2026, Phase 2b visual pass): Hello's reset styles buttons
   via `[type="button"], button` at 0-1-0 — the SAME specificity as a bare
   component class — and the child theme's neutraliser re-runs it later, so a
   plain `.md4u-x { background: … }` on a <button> silently loses (the pink
   #c36 trap's quieter sibling). Every button-element component selector above
   is `button.md4u-*`. */
/* ---- [PRICE TOKEN] inherits surrounding type; only weight is opinionated ---- */
.md4u-price__amount { font-weight: inherit; }

/* ---- [REDUCED MOTION] Phase 2b additions: the brand rule zeroes ALL motion.
   The promise breathe and orbit rotation STOP (not merely shorten). ---- */
@media (prefers-reduced-motion: reduce) {
  .md4u-herovis__orbit,
  .md4u-promise { animation: none !important; }
  .md4u-svcgrid__card,
  .md4u-svcgrid__lcard,
  .md4u-cart--fixed,
  .md4u-cart__chevron,
  .md4u-alert--fixed,
  .md4u-faq summary span,
  .md4u-pkg-trigger,
  .md4u-pkg__add,
  .md4u-tiers__btn,
  .md4u-promise__cta,
  .md4u-alert__cta,
  .md4u-cart__cta { transition: none !important; }
}

/* ==========================================================================
   PHASE 4 (funnel) — live cart machine states, ported from home.css
   24 Aug 2026: selected card state, mini-cart strategy-call note, the
   marketing upsell prompt, and the marketing-chooser service rows used by
   md4u-cart.js. Values verbatim from live home.css.
   ========================================================================== */

.md4u-svcgrid__card.is-selected {
  border-color: var(--md4u-accent);
  box-shadow: inset 0 0 0 2px var(--md4u-accent);
  background: #0b2a45;
}

.md4u-cart__call { display: block; padding: 0 0 12px; color: var(--md4u-muted, #5A6770); font-size: 10px; }
.md4u-cart__call strong { color: var(--md4u-navy, #011627); }

.md4u-cart__upsell {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 2px solid var(--md4u-navy, #011627);
  border-radius: 9px;
  background: rgba(45, 225, 252, .12);
}
.md4u-cart__upsell > span { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 900; }
.md4u-cart__upsell-actions { display: flex; gap: 7px; }
.md4u-cart__upsell-actions button {
  flex: 1;
  min-height: 34px;
  padding: 0 8px;
  border: 2px solid var(--md4u-line, rgba(1, 22, 39, .13));
  border-radius: 6px;
  background: white;
  color: var(--md4u-muted, #5A6770);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.md4u-cart__upsell-actions button:hover { border-color: var(--md4u-navy, #011627); color: var(--md4u-navy, #011627); }
.md4u-cart__upsell-actions button.primary {
  border-color: var(--md4u-navy, #011627);
  background: var(--md4u-orange, #FE7F2D);
  color: var(--md4u-navy, #011627);
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--md4u-navy, #011627);
}
.md4u-cart__upsell-actions button.primary:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--md4u-navy, #011627); }

/* Marketing chooser rows (button.md4u-* — Hello reset trap, README trap 8) */
button.md4u-pkg__svc {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 2px solid var(--md4u-line, rgba(1, 22, 39, .13));
  border-radius: 10px;
  background: var(--md4u-cream, #FFFAF4);
  color: var(--md4u-navy, #011627);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
button.md4u-pkg__svc:hover { border-color: var(--md4u-navy, #011627); background: white; transform: translateY(-2px); box-shadow: 4px 4px 0 var(--md4u-cyan, #2DE1FC); }
.md4u-pkg__tier-add { display: inline-block; color: #c2542c; font-size: 12px; font-weight: 900; }
button.md4u-pkg__svc:hover .md4u-pkg__tier-add { color: var(--md4u-pink, #E5446D); }

/* Free-hosting tier row in the dynamic modal */
.md4u-pkg__tier--free .md4u-pkg__tier-price { color: var(--md4u-orange, #FE7F2D); }

@media (prefers-reduced-motion: reduce) {
  .md4u-cart__upsell-actions button.primary,
  button.md4u-pkg__svc { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   [BLOG WIDGETS] Phase 3d, 25 Aug 2026 — the post card, the single-post
   furniture (breadcrumb, kicker, dateline, short answer, service CTA) and the
   author bio. Used by the three Elementor Theme Builder templates: MD4U Blog
   Archive, MD4U Author Archive, MD4U Single Post.

   LOAD-ORDER IMMUNITY (audit D1). Every block below declares its own `color`
   and `font-family` rather than inheriting them. The blog previously rendered
   in -apple-system on a white page with card links computing #c36, because the
   old PHP templates enqueued their stylesheet before get_header() and pushed
   Hello Elementor's reset.css to the back of the print order where it won every
   tie. The enqueue is fixed (the widgets declare md4u-widgets as a style
   dependency, so Elementor enqueues it during wp_enqueue_scripts like every
   other widget), and these declarations mean that even if the order were
   inverted again the brand values would still hold.
   ========================================================================== */

/* ---- [BLOG CARD] one design, three places: /blog, /author/*, "Keep reading" ---- */
.md4u-bcard-cell,
.md4u-bcard-cell > .elementor-element,
.md4u-bcard-cell > .elementor-element > .elementor-widget-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
a.md4u-bcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;                                   /* equal height across a row */
  overflow: hidden;
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 14px;
  background: var(--md4u-white, #fff);
  box-shadow: 8px 8px 0 var(--md4u-pink, #E5446D);
  color: var(--md4u-navy, #011627);               /* never inherit Hello's #c36 */
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* HOUSE BUTTON GEOMETRY: the shadow's OUTER edge stays put on hover. The card
   translates 3px and the shadow shrinks by the same 3px (8 -> 5), so 3+5 = 8
   exactly as the house button does 3+2 = 5. It was 8 -> 4 (3+4 = 7), which
   walked the shadow edge 1px inward on every hover (verification round 2). */
a.md4u-bcard:hover { transform: translate(3px, 3px); box-shadow: 5px 5px 0 var(--md4u-pink, #E5446D); color: var(--md4u-navy, #011627); }
a.md4u-bcard:focus-visible { outline: 2px solid var(--md4u-pink, #E5446D); outline-offset: 3px; }

/* The family's rotating accent (style.css .pg .card / .s-card), generalised to an
   unbounded grid.
   KEYED ON A CLASS THE WIDGET EMITS, NOT ON nth-child. The rotation used to read
   `.e-loop-item:nth-child(4n+N)`, and Elementor injects `<style id="loop-680">`
   as the FIRST child of .elementor-loop-container — so the first real card was
   nth-child(2), the whole sequence was phase-shifted by one, card 1 rendered
   ORANGE and pink never landed on it at all (verification round 2, measured on
   /blog, /author and the "Keep reading" row). Any future element Elementor
   decides to inject into that container would shift it again. The widget now
   counts its own renders and stamps md4u-bcard--a1..a4, so the sequence is
   pink -> orange -> cyan -> navy from card 1 wherever the grid is used and
   whatever the DOM around it contains. */
a.md4u-bcard.md4u-bcard--a2 { box-shadow: 8px 8px 0 var(--md4u-orange, #FE7F2D); }
a.md4u-bcard.md4u-bcard--a2:hover { box-shadow: 5px 5px 0 var(--md4u-orange, #FE7F2D); }
a.md4u-bcard.md4u-bcard--a3 { box-shadow: 8px 8px 0 var(--md4u-cyan, #2DE1FC); }
a.md4u-bcard.md4u-bcard--a3:hover { box-shadow: 5px 5px 0 var(--md4u-cyan, #2DE1FC); }
a.md4u-bcard.md4u-bcard--a4 { box-shadow: 8px 8px 0 var(--md4u-navy, #011627); }
a.md4u-bcard.md4u-bcard--a4:hover { box-shadow: 5px 5px 0 var(--md4u-navy, #011627); }

.md4u-bcard__media { border-bottom: 3px solid var(--md4u-navy, #011627); }
/* aspect-ratio, not just the width/height attributes: it reserves the box at
   every column width, so a slow connection cannot shift the row (CLS). Every
   featured image is 1200x800. */
.md4u-bcard__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.md4u-bcard__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 22px 22px 20px; }
/* AA TEXT TOKEN, not the display pink. 12px/900 #E5446D measures 3.90:1 on a
   white card and 3.76:1 on cream, both under the 4.5:1 AA floor for normal-size
   text (verification round 2 measured every kicker on the blog, not just this
   one). --md4u-pink-text is the same hue at 5.10:1 / 4.92:1. The 9px dot keeps
   the full display pink, because a dot is not something a reader has to read. */
.md4u-bcard__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--md4u-pink-text, #C43A5E);
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase;
}
.md4u-bcard__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));
}
.md4u-bcard__title {
  margin: 0;
  color: var(--md4u-navy, #011627);
  font-size: 19px; font-weight: 800; letter-spacing: -.4px; line-height: 1.3;
}
.md4u-bcard__excerpt { color: var(--md4u-muted, #5A6770); font-size: 14px; line-height: 1.6; }
/* THE CARD AFFORDANCE — an arrow control, no repeated words.
   margin-top:auto is the house gate: it sits on the card floor, so the
   affordance aligns across a row of unequal-length titles.

   WHY THERE IS NO LABEL HERE ANY MORE (verification round 2, 25 Aug 2026). The
   card used to print a category-derived phrase, which meant seven strings served
   all 46 cards and nine consecutive cards on /blog read "Read the SEO guide"
   while linking to nine different posts. That is exactly the house gate on
   repeated card links, and it is furniture live does not have at all: the live
   card is kicker, title, excerpt and nothing else. Writing 46 bespoke phrases
   would only have restated each title a few pixels below itself and left a trap
   for post 47. Dropping the words instead means the visible link text of every
   card IS its own title — rich, target-specific and unique by construction, with
   nothing to maintain. The arrow is a bordered control in the house button
   language so the affordance still reads as "go", and it is aria-hidden because
   the whole card is one anchor. A per-card label can still be typed into the
   widget's "Call to action label" field, and renders beside the arrow. */
.md4u-bcard__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 16px;
  color: var(--md4u-navy, #011627);
  font-size: 13px; font-weight: 900; letter-spacing: .2px;
}
.md4u-bcard__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 36px; height: 36px;
  border: 2px solid var(--md4u-navy, #011627); border-radius: 7px;
  background: var(--md4u-white, #fff);
  color: var(--md4u-navy, #011627);
  font-size: 15px; line-height: 1;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
a.md4u-bcard:hover .md4u-bcard__cta { color: var(--md4u-navy, #011627); }
a.md4u-bcard:hover .md4u-bcard__arrow { background: var(--md4u-orange, #FE7F2D); transform: translateX(3px); }

/* Brand rule: everything centres at <=900 (matches .md4u-svcgrid__lcard). */
@media (max-width: 900px) {
  .md4u-bcard__body { text-align: center; }
  .md4u-bcard__kicker, .md4u-bcard__cta { justify-content: center; }
}

/* ---- [POST BREADCRUMB] ---- */
.md4u-crumbs {
  color: var(--md4u-muted, #5A6770);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 14px; line-height: 1.5;
}
.md4u-crumbs a { color: var(--md4u-muted, #5A6770); text-decoration: none; border-bottom: 1px solid var(--md4u-line-strong, rgba(1, 22, 39, .18)); }
/* the display orange is 2.53:1 on cream, so every link hover on the blog uses
   the AA orange token instead (verification round 2) */
.md4u-crumbs a:hover { color: var(--md4u-orange-text, #B0581F); border-bottom-color: var(--md4u-orange-text, #B0581F); }

/* ---- [POST KICKER + DATELINE] ---- */
.md4u-postkicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  color: var(--md4u-pink-text, #C43A5E);   /* AA text token; the dot keeps display pink */
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase;
}
.md4u-postkicker::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));
}
.md4u-dateline {
  margin: 0;
  color: var(--md4u-muted, #5A6770);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 14px; line-height: 1.6;
}
.md4u-dateline a { color: var(--md4u-navy, #011627); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--md4u-orange, #FE7F2D); }
.md4u-dateline a:hover { color: var(--md4u-orange-text, #B0581F); }

/* ---- [SHORT ANSWER] the labelled box under the featured image ---- */
.md4u-shortanswer {
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 14px;
  background: var(--md4u-white, #fff);
  box-shadow: 8px 8px 0 var(--md4u-cyan, #2DE1FC);
  padding: 24px 26px;
  color: var(--md4u-navy, #011627);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
}
.md4u-shortanswer__label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px;
  color: var(--md4u-pink-text, #C43A5E);   /* AA text token; the dot keeps display pink */
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase;
}
.md4u-shortanswer__label::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));
}
.md4u-shortanswer__text { color: var(--md4u-navy, #011627); font-size: 17px; line-height: 1.7; }
.md4u-shortanswer__text p { margin: 0 0 12px; }
.md4u-shortanswer__text p:last-child { margin-bottom: 0; }
.md4u-shortanswer__text strong { color: var(--md4u-navy, #011627); }
.md4u-shortanswer__text a { color: var(--md4u-navy, #011627); font-weight: 700; border-bottom: 2px solid var(--md4u-orange, #FE7F2D); text-decoration: none; }
.md4u-shortanswer__text a:hover { color: var(--md4u-orange-text, #B0581F); }

/* ---- [SERVICE CTA] the last paragraph of a post body ---- */
.md4u-svccta {
  margin: 0;
  color: var(--md4u-navy, #011627);
  font-family: var(--md4u-font, Arial, Helvetica, sans-serif);
  font-size: 17px; line-height: 1.75;
}
.md4u-svccta a { color: var(--md4u-navy, #011627); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--md4u-orange, #FE7F2D); }
.md4u-svccta a:hover { color: var(--md4u-orange-text, #B0581F); }

/* ---- [AUTHOR BIO] ---- */
.md4u-authorbio { font-family: var(--md4u-font, Arial, Helvetica, sans-serif); color: var(--md4u-navy, #011627); }
.md4u-authorbio__kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px;
  color: var(--md4u-pink-text, #C43A5E);   /* AA text token; the dot keeps display pink */
  font-size: 12px; font-weight: 900; letter-spacing: 1.8px; line-height: 1.4; text-transform: uppercase;
}
.md4u-authorbio__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));
}
.md4u-authorbio__name { margin: 0; color: var(--md4u-navy, #011627); }
.md4u-authorbio--page .md4u-authorbio__name { font-size: clamp(44px, 5.6vw, 84px); font-weight: 900; letter-spacing: -3px; line-height: .96; }
.md4u-authorbio--box .md4u-authorbio__name { font-size: 19px; font-weight: 800; letter-spacing: -.4px; line-height: 1.3; }
/* navy, not the brand pink: at 13px, #E5446D measures 3.90:1 on white and
   3.76:1 on cream, both under the 4.5:1 AA floor for normal-size text */
.md4u-authorbio__role { margin: 14px 0 0; color: var(--md4u-navy, #011627); font-size: 13px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
.md4u-authorbio--box .md4u-authorbio__role { margin-top: 6px; }
.md4u-authorbio__bio { margin-top: 22px; color: var(--md4u-muted, #5A6770); font-size: 17px; line-height: 1.75; }
.md4u-authorbio--box .md4u-authorbio__bio { margin-top: 12px; font-size: 15px; line-height: 1.7; }
.md4u-authorbio__bio p { margin: 0 0 16px; }
.md4u-authorbio__bio p:last-child { margin-bottom: 0; }
.md4u-authorbio__bio strong { color: var(--md4u-navy, #011627); }
.md4u-authorbio__bio a { color: var(--md4u-navy, #011627); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--md4u-orange, #FE7F2D); }
.md4u-authorbio__bio a:hover { color: var(--md4u-orange-text, #B0581F); }
.md4u-authorbio--box {
  border: 3px solid var(--md4u-navy, #011627);
  border-radius: 14px;
  background: var(--md4u-white, #fff);
  box-shadow: 8px 8px 0 var(--md4u-orange, #FE7F2D);
  padding: 26px 28px;
}
/* This was declared orange and rendered navy, because the child theme's
   `.elementor .md4u-blog a` catch-all out-specified it (verification round 2).
   The catch-all is now :where()-neutralised, so the declaration here is what
   renders - and 13px #FE7F2D is 2.53:1, so it declares navy plus the AA orange
   on hover instead of resurrecting a failing colour. */
.md4u-authorbio__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--md4u-navy, #011627);
  font-size: 13px; font-weight: 900; letter-spacing: .2px; text-decoration: none;
}
.md4u-authorbio__more:hover { color: var(--md4u-orange-text, #B0581F); }

/* Long-form prose stays left-aligned at every width. The brand "everything
   centres at <=900" rule governs page furniture (kickers, headings, cards,
   buttons) and the cards above obey it; a centred three-paragraph biography is
   simply unreadable, exactly as centred article body copy would be.

   THE SAME RULE NOW COVERS THE SHORT ANSWER AND THE SERVICE CTA (verification
   round 2). At 375px the short answer renders eight lines / 274 characters,
   longer than the biography this exception was written for, and the service CTA
   is the closing PARAGRAPH of the article, three lines directly under
   left-aligned body copy. Both sat centred between left-aligned blocks in the
   same column. The labels and kickers above them are furniture and still centre,
   exactly like the card kickers - and the CARD excerpt still centres too,
   because a whole card is furniture and centres as one object at <=900, the same
   as .md4u-svcgrid__lcard everywhere else on the site.

   An inherited text-align always loses to a direct declaration whatever the
   specificity, which is why these (0,1,0) rules beat the (0,2,1)
   `.elementor .md4u-blog { text-align: center }` in the child theme. */
.md4u-authorbio__bio, .md4u-authorbio__bio p,
.md4u-svccta,
.md4u-shortanswer__text, .md4u-shortanswer__text p, .md4u-shortanswer__text li { text-align: left; }
@media (max-width: 900px) {
  .md4u-authorbio__kicker, .md4u-authorbio__more, .md4u-shortanswer__label { justify-content: center; }
  .md4u-shortanswer { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  a.md4u-bcard, .md4u-bcard__arrow { transition: none !important; }
  a.md4u-bcard:hover { transform: none !important; }
  a.md4u-bcard:hover .md4u-bcard__arrow { transform: none !important; }
}