@media (max-width: 768px) {

  /* Scroll-to-top floating button */
  #scrollTopBtn {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  #scrollTopBtn.show {
    display: flex;
  }

  /* Hard-hide common sticky CTA bars on mobile if they exist */
  .sticky-cta,
  .mobile-cta,
  .bottom-cta,
  .cta-sticky {
    display: none !important;
  }
}

/* MFW_MOBILE_FIXES_V9 — Desktop-parity mobile reset */
@media (max-width: 768px) {

  /* 1. Base Reset & iOS Safe Areas */
  /* We DO NOT force a background color on html/body. 
     This allows the desktop's "light theme" (white body) to persist on mobile,
     fixing the "dark mode" dissonance. */

  body {
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* 2. Header Polish (Icons Only) */
  .mfw-topbar,
  .topbar {
    padding: 8px 14px !important;
  }

  /* Force brand to be visible and sized correctly */
  .mfw-brand,
  .brand {
    font-size: 18px !important;
    white-space: nowrap !important;
  }

  /* Turn Text Pills into Icon Buttons */
  /* Target specific classes added in index.php hooks */
  .mfw-topbar__phone,
  .mfw-topbar__email,
  /* Fallbacks */
  .header-link[href^="tel:"],
  .header-link[href^="mailto:"] {
    font-size: 0 !important;
    /* Hide text */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Icon styling */
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-left: 0 !important;
  }

  /* Active state */
  .mfw-topbar__phone:active,
  .mfw-topbar__email:active,
  .header-link[href^="tel:"]:active,
  .header-link[href^="mailto:"]:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.2) !important;
  }

  /* Phone Icon (Receiver) */
  .mfw-topbar__phone,
  .header-link[href^="tel:"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") !important;
  }

  /* Email Icon (Envelope) */
  .mfw-topbar__email,
  .header-link[href^="mailto:"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    max-width: none !important;
    /* Reset any max-width constraints */
  }

  /* Container Alignment */
  .topbar__actions,
  .header-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* 3. Typography & Contrast */
  /* Prevent iOS zoom on inputs */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Ensure text is readable on mobile (restoring desktop assumptions) */
  /* Remove any forced white text on sections unless they are explicitly dark */
  .section,
  .card {
    color: inherit;
    /* Let desktop CSS decide */
  }
}

/* MFW_MOBILE_V9 */
@media (max-width: 768px) {

  /* Header: logo left, icon buttons right (like nocostreplacement vibe) */
  header.topbar, .topbar {
    position: sticky;
    top: 0;
    z-index: 9998;
    background: linear-gradient(180deg, rgba(10,16,26,0.96), rgba(10,16,26,0.84));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  .topbar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .mfw-brand {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .topbar__actions.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }

  /* Icon button style (no emoji phone) */
  .topbar__actions .mfw-pill {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    font-size: 0 !important; /* hide text visually but keep for accessibility */
  }

  .topbar__actions .mfw-pill:active {
    transform: scale(0.98);
  }

  .topbar__actions .mfw-pill::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    opacity: 0.95;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
  }

  .topbar__actions .mfw-pill--call::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.6 10.8c1.4 2.7 3.9 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.9.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.3 21 3 12.7 3 2c0-.6.4-1 1-1h3c.6 0 1 .4 1 1 0 1.4.2 2.7.6 3.9.1.4 0 .8-.3 1.1L6.6 10.8z' fill='%23EAF2FF'/%3E%3C/svg%3E");
  }

  .topbar__actions .mfw-pill--email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 6.5C4 5.7 4.7 5 5.5 5h13C19.3 5 20 5.7 20 6.5v11c0 .8-.7 1.5-1.5 1.5h-13C4.7 19 4 18.3 4 17.5v-11z' stroke='%23EAF2FF' stroke-width='1.6'/%3E%3Cpath d='M5.2 7.1l6.2 5.1c.4.3 1 .3 1.4 0l6.2-5.1' stroke='%23EAF2FF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* Make the "Questions? Call or text." email also a pill and ensure it fits */
  .contact-card a[href^="mailto:"],
  .contact-card .email,
  .contact-card .email-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    background: rgba(234,242,255,0.75) !important;
    border: 1px solid rgba(30,64,175,0.25) !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* "How it works": clean "You are here" badge on step 1 (no overlap) */
  .how-it-works ol li:first-child {
    position: relative !important;
    padding-right: 110px !important;
  }
  .how-it-works ol li:first-child::after {
    content: "You are here";
    position: absolute;
    right: 10px;
    top: 2px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(37,99,235,0.12);
    border: 1px solid rgba(37,99,235,0.30);
    color: #1d4ed8;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    animation: mfwPulse 1.6s ease-in-out infinite;
  }

  @keyframes mfwPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.88; }
  }

  /* Scroll-to-top button: better UI + label toast */
  #scrollTopBtn {
    width: 54px !important;
    height: 54px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15,23,42,0.18) !important;
    background: rgba(255,255,255,0.92) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 30px rgba(0,0,0,0.22) !important;
  }

  #mfwMobileToast {
    position: fixed;
    right: 18px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0.92);
    color: rgba(255,255,255,0.95);
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    z-index: 9999;
  }

  #mfwMobileToast.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
  }
}

/* MFW_MOBILE_PATCH_V10 */
@media (max-width: 768px) {

  /* Remove sticky iOS “pressed/focus” look after tapping buttons/links */
  a, button, .btn, .mfw-pill, .btn-primary, .btn-secondary {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
  }
  .btn:focus, .btn:active,
  a.btn:focus, a.btn:active,
  .mfw-pill:focus, .mfw-pill:active {
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .btn:focus-visible, a:focus-visible {
    outline: none !important;
  }

  /* Scroll-to-top arrow: remove circle, make arrow bigger + clear */
  #scrollTopBtn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: rgba(15, 23, 42, 0.9) !important; /* readable on light sections */
    font-size: 28px !important;
    line-height: 54px !important;
    text-shadow: 0 2px 10px rgba(255,255,255,0.65);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* If your arrow sits inside another wrapper circle anywhere, neutralize it */
  .scroll-top, .scrollTop, .to-top, .back-to-top {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Hide any “You are here” text label, keep the flash/glow animation */
  .you-are-here,
  .mfw-you-are-here,
  [data-you-are-here],
  .how-works-you-are-here,
  .howitworks-you-are-here {
    display: none !important;
  }

  /* If the label was being injected as a pseudo-element */
  .how-it-works li:first-child::after,
  .howitworks li:first-child::after {
    content: "" !important;
    display: none !important;
  }
}


/* MFW_MOBILE_FIXES_V10 */
@media (max-width: 768px) {
  /* Hide any 'you are here' label so it can't overlap step 1 text */
  .you-are-here,
  .mfw-you-are-here,
  .step-you-are-here,
  .current-step-badge,
  [data-you-are-here] {
    display: none !important;
  }

  /* Center icons inside circular header buttons */
  .topbar__actions a,
  .header-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* If your icon is an <img> inside the circle */
  .topbar__actions a img,
  .header-actions a img {
    display: block !important;
    margin: 0 !important;
  }

  /* iOS tap / “stuck pressed” visual polish */
  a, button, .btn, .mfw-pill {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Prevent ugly latched styles from looking broken */
  a:focus, button:focus, .btn:focus, .mfw-pill:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* MFW_MOBILE_FIXES_V9 */
@media (max-width: 768px) {

  /* --- HOW IT WORKS: remove "you are here" text (mobile only) --- */
  /* Best-case: if it's wrapped (span/em/small/etc), hide it */
  .how-it-works .you-are-here,
  .how-it-works .youarehere,
  .how-it-works .current-step,
  .how-it-works .current,
  .how-it-works .is-current,
  .how-it-works .is-active,
  .how-it-works .active-step,
  .how-it-works .step-current,
  .how-it-works .step-active,
  .how-it-works .step__current,
  .how-it-works .step__active {
    display: none !important;
  }

  /* Common wrapper tags that often hold the badge text */
  .how-it-works small.you-are-here,
  .how-it-works span.you-are-here,
  .how-it-works em.you-are-here,
  .how-it-works i.you-are-here {
    display: none !important;
  }

  /* If the badge is inside a pill/badge element, hide only that badge */
  .how-it-works .badge.you-are-here,
  .how-it-works .pill.you-are-here,
  .how-it-works .tag.you-are-here,
  .how-it-works .chip.you-are-here {
    display: none !important;
  }

  /* Last-resort: if the badge is the FIRST small element inside a step title, hide it */
  .how-it-works .step-title small:first-child,
  .how-it-works .step__title small:first-child {
    display: none !important;
  }

  /* Ensure step text remains readable even after badge is removed */
  .how-it-works .step-title,
  .how-it-works .step__title {
    display: block !important;
    line-height: 1.25 !important;
  }
}


/* MFW_LANDING_FIX_V1 */
@media (max-width: 768px) {
    /* 1. Header Phone Icon Alignment */
    .mfw-topbar__phone, .mfw-topbar__email, .header-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important; /* Reset padding to let flex center it */
        width: 40px !important;
        height: 40px !important;
        line-height: 1 !important;
    }
    /* Ensure icon inside is centered if it's an element */
    .mfw-topbar__phone svg, .mfw-topbar__email svg, .header-link svg {
        margin: 0 !important;
        display: block !important;
    }
    
    /* 2. Remove "You are here" text, keep glow */
    .how-it-works .you-are-here,
    .how-it-works .step-label-text, 
    .how-it-works span[class*="here"] {
         display: none !important;
    }
    /* Ensure the list item still exists for the glow */
    .how-it-works li {
        position: relative;
    }
    
    /* 4. Remove footer white strip */
    /* Often caused by padding/margin on body or footer wrapper */
    body {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    footer, .footer {
        padding-bottom: env(safe-area-inset-bottom) !important;
        margin-bottom: 0 !important;
    }
    .scrollTopLabel, .scroll-top-label { display: none !important; }
    
    /* 5. Mobile Spacing & Contrast */
    /* Darken overly light text on sections */
    section {
        background-color: #f8fafc; /* Ensure not raw white everywhere */
    }
    .section-light {
        color: #1e293b !important;
    }
    /* Fix specific problematic contrasts if identified, otherwise generic safety */
    p, li {
        color: #334155;
    }
}