* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #EAF2FF;
            background: radial-gradient(1200px 600px at 15% 10%, rgba(34, 230, 199, 0.14), transparent 55%),
                        radial-gradient(900px 500px at 80% 30%, rgba(124, 92, 255, 0.14), transparent 55%),
                        linear-gradient(180deg, #050B18, #060F22);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            background: rgba(5, 11, 24, 0.60);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
            backdrop-filter: blur(10px);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: #EAF2FF;
            text-decoration: none;
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        nav a {
            text-decoration: none;
            color: rgba(234,242,255,0.86);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        nav a:hover {
            /* LOGO TEAL */
            color: #22E6C7;
        }
        
        .cta-primary {
            /* LOGO TEAL gradient */
            background: linear-gradient(180deg, #22E6C7, #00A79B);
            color: #06101c;
            padding: 12px 24px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 700;
            transition: filter 0.3s, box-shadow 0.3s, border-color 0.3s;
            border: 1px solid rgba(34, 230, 199, 0.55);
            box-shadow: 0 18px 60px rgba(0,0,0,0.35);
        }
        
        .cta-primary:hover {
            filter: brightness(1.05);
        }
        
        /* Hero Section */
        .hero {
            background: radial-gradient(900px 420px at 20% 20%, rgba(34, 230, 199, 0.10), transparent 60%),
                        radial-gradient(800px 420px at 75% 35%, rgba(124, 92, 255, 0.12), transparent 60%),
                        linear-gradient(180deg, rgba(10,20,42,0.65), rgba(5,11,24,0.25));
            color: #fff;
            padding: 80px 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            line-height: 1.2;
            color: #EAF2FF;
        }
        
        .hero p {
            font-size: 20px;
            margin-bottom: 30px;
            opacity: 0.92;
            color: rgba(234,242,255,0.78);
        }
        
        .hero-ctas {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cta-secondary {
            background: rgba(34,230,199,0.12);
            color: rgba(234,242,255,0.94);
            padding: 14px 28px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            transition: transform 0.2s, border-color 0.3s, box-shadow 0.3s;
            border: 1px solid rgba(34,230,199,0.30);
            box-shadow: 0 18px 60px rgba(0,0,0,0.30);
        }
        
        .cta-secondary:hover {
            transform: translateY(-2px);
            border-color: rgba(34,230,199,0.48);
            box-shadow: 0 18px 60px rgba(0,0,0,0.40);
        }
        
        /* Trust Bar */
        .trust-bar {
            background: rgba(10,20,42,0.55);
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        
        .trust-bar p {
            color: rgba(167,180,204,0.95);
            font-weight: 500;
        }
        
        /* Quote Form */
        .quote-section {
            background: transparent;
            padding: 60px 20px;
        }

        /* ===============================
           Industry pages consistency
           Fixes inline light hero + white quote section backgrounds
           (colors only; no layout changes)
           =============================== */

        /* Industry pages wrap their content in .industry-page */
        .industry-page .hero {
            /* Override inline hero backgrounds on industry pages */
            background: radial-gradient(900px 420px at 20% 20%, rgba(34,230,199,0.10), transparent 60%),
                        radial-gradient(800px 420px at 75% 35%, rgba(124, 92, 255, 0.12), transparent 60%),
                        linear-gradient(180deg, rgba(10,20,42,0.65), rgba(5,11,24,0.25)) !important;
        }

        .industry-page .quote-section {
            /* Override inline background:#f8f9fa on industry pages */
            background: transparent !important;
        }

        /* Site-wide: neutralise legacy light section backgrounds (colors only).
           Many pages use inline background:#f8f9fa which makes light text unreadable. */
        [style*="background:#f8f9fa"],
        [style*="background: #f8f9fa"],
        [style*="background-color:#f8f9fa"],
        [style*="background-color: #f8f9fa"],
        [style*="background:#ffffff"],
        [style*="background: #ffffff"],
        [style*="background-color:#ffffff"],
        [style*="background-color: #ffffff"],
        [style*="background: white"],
        [style*="background-color: white"] {
            background: transparent !important;
        }

        /* Darken callout boxes that were hard-coded to light grey */
        [style*="background:#f8f9fa"][style*="border-left:4px solid #1a3a5c"],
        [style*="background: #f8f9fa"][style*="border-left:4px solid #1a3a5c"] {
            background: linear-gradient(180deg, rgba(14,31,63,0.92), rgba(10,20,42,0.78)) !important;
            border-left-color: rgba(34,230,199,0.85) !important;
            border-top-color: rgba(255,255,255,0.08) !important;
            border-right-color: rgba(255,255,255,0.08) !important;
            border-bottom-color: rgba(255,255,255,0.08) !important;
            color: rgba(234,242,255,0.90) !important;
        }

        /* Ensure text stays readable if any light background leaks in */
        .industry-page .hero h1,
        .industry-page .hero p,
        .industry-page .quote-section,
        .industry-page .content-section {
            color: inherit;
        }
        
        .quote-form {
            max-width: 600px;
            margin: 0 auto;
            background: linear-gradient(180deg, rgba(14,31,63,0.92), rgba(10,20,42,0.78));
            padding: 40px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 18px 60px rgba(0,0,0,0.45);
        }
        
        .form-step {
            margin-bottom: 30px;
        }
        
        .form-step label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: rgba(234,242,255,0.92);
        }
        
        .form-step select,
        .form-step input {
            width: 100%;
            padding: 12px;
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 4px;
            font-size: 16px;
            background: rgba(10,20,42,0.75);
            color: #EAF2FF;
        }

        .form-step input::placeholder {
            color: rgba(167,180,204,0.72);
        }

        .form-step select:focus,
        .form-step input:focus {
            outline: none;
            border-color: rgba(34,230,199,0.45);
            box-shadow: 0 0 0 3px rgba(34,230,199,0.18);
        }
        
        .form-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
        }
        
        .form-option {
            padding: 15px;
            border: 2px solid rgba(255,255,255,0.10);
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
            background: rgba(10,20,42,0.55);
            color: rgba(234,242,255,0.88);
        }
        
        .form-option:hover {
            border-color: rgba(34,230,199,0.55);
            background: rgba(34,230,199,0.08);
        }
        
        .form-option input[type="radio"] {
            margin-right: 8px;
        }
        
        .credit-warning {
            background: rgba(245,196,81,0.10);
            border: 1px solid rgba(245,196,81,0.30);
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
            font-size: 14px;
            color: rgba(245,196,81,0.95);
        }
        
        .submit-btn {
            /* LOGO TEAL gradient */
            background: linear-gradient(180deg, #22E6C7, #00A79B);
            color: #06101c;
            padding: 14px 32px;
            border: 1px solid rgba(34,230,199,0.55);
            border-radius: 4px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            transition: filter 0.3s, box-shadow 0.3s;
            box-shadow: 0 18px 60px rgba(0,0,0,0.35);
        }
        
        .submit-btn:hover {
            filter: brightness(1.05);
        }
        
        /* ===== Dropdown menu ===== */
        nav ul li {
          position: relative;
        }
        
        .has-submenu > a::after {
          content: " ▾";
          font-size: 12px;
        }
        
        .submenu {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          background: rgba(5, 11, 24, 0.92);
          border: 1px solid rgba(255,255,255,0.08);
          min-width: 200px;
          z-index: 1001;
          box-shadow: 0 18px 60px rgba(0,0,0,0.45);
          backdrop-filter: blur(10px);
        }
        
        .submenu li {
          list-style: none;
        }
        
        .submenu a {
          display: block;
          padding: 12px 16px;
          color: rgba(234,242,255,0.86);
          white-space: nowrap;
        }
        
        .submenu a:hover {
          background: rgba(34,230,199,0.10);
          color: #22E6C7;
        }
        
        .has-submenu:hover .submenu {
          display: block;
        }

        
        /* Footer */
        footer {
            background: rgba(5, 11, 24, 0.90);
            color: #fff;
            padding: 60px 20px 20px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-links h3 {
            margin-bottom: 15px;
            font-size: 16px;
            color: rgba(234,242,255,0.92);
        }
        
        .footer-links ul {
            list-style: none;
        }
        
        .footer-links a {
            color: rgba(167,180,204,0.95);
            text-decoration: none;
            display: block;
            margin-bottom: 8px;
        }
        
        .footer-links a:hover {
            color: #EAF2FF;
        }
        
        .legal-block {
            border-top: 1px solid rgba(255,255,255,0.12);
            padding-top: 30px;
            font-size: 10pt;
            line-height: 1.6;
            color: rgba(234,242,255,0.86);
        }
        
        .legal-block p {
            margin-bottom: 15px;
        }
        
        /* Mobile Menu */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: rgba(234,242,255,0.90);
        }
        
        /* Sticky Mobile CTA */
        .mobile-cta {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(5, 11, 24, 0.92);
            padding: 15px;
            text-align: center;
            z-index: 999;
            box-shadow: 0 -12px 30px rgba(0,0,0,0.45);
            border-top: 1px solid rgba(255,255,255,0.08);
            backdrop-filter: blur(10px);
        }
        
        .mobile-cta a {
            color: #EAF2FF;
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            nav {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .mobile-cta {
                display: block;
            }
            
            .hero h1 {
                font-size: 32px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .quote-form {
                padding: 20px;
            }
            
            body {
                padding-bottom: 60px;
            }
        }
        
        /* Content Sections */
        .content-section {
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .content-section h2 {
            font-size: 36px;
            margin-bottom: 20px;
            color: rgba(234,242,255,0.92);
        }
        
        .content-section h3 {
            font-size: 24px;
            margin: 30px 0 15px;
            color: rgba(234,242,255,0.92);
        }
        
        .pain-points {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .pain-point {
            background: linear-gradient(180deg, rgba(14,31,63,0.92), rgba(10,20,42,0.78));
            padding: 20px;
            border-radius: 4px;
            border-left: 4px solid rgba(34,230,199,0.85);
            border-top: 1px solid rgba(255,255,255,0.08);
            border-right: 1px solid rgba(255,255,255,0.08);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 18px 60px rgba(0,0,0,0.35);
            color: rgba(167,180,204,0.95);
        }
        
        .general-advice-warning {
            background: rgba(245,196,81,0.10);
            border: 1px solid rgba(245,196,81,0.30);
            padding: 20px;
            border-radius: 4px;
            margin: 30px 0;
            font-size: 14px;
            color: rgba(245,196,81,0.95);
        }
        
        .success-message {
            background: rgba(46,229,157,0.10);
            border: 1px solid rgba(46,229,157,0.26);
            color: rgba(46,229,157,0.95);
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        /* ===== Legal / Content page alignment fix (drop-in) ===== */
        /* Ensures headings, paragraphs and lists share the same left edge */
        .container h1,
        .container h2,
        .container h3,
        .container p,
        .container ul,
        .container ol {
          margin-left: 0;
          padding-left: 0;
          color: inherit;
        }
        
        /* Restore consistent spacing for legal/content blocks */
        .container p {
          margin: 0 0 12px 0;
        }
        
        /* Fix list indent so list items align under the same text block as headings */
        .container ul,
        .container ol {
          padding-left: 1.25rem;   /* controls the list marker indent */
          margin: 0 0 16px 0;
        }
        
        /* Keep nested lists readable */
        .container ol ol,
        .container ul ul,
        .container ul ol,
        .container ol ul {
          margin-top: 8px;
          margin-bottom: 8px;
          padding-left: 1.25rem;
        }
        
        /* Headings spacing on legal/content pages */
        .container h1 {
          margin: 30px 0 16px 0;
        }
        .container h2 {
          margin: 26px 0 12px 0;
        }
        .container h3 {
          margin: 20px 0 10px 0;
        }

/* ===== Desktop dropdown ===== */
.has-submenu { position: relative; }
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(5, 11, 24, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 200px;
  z-index: 1001;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}
.has-submenu:hover .submenu { display: block; }
.submenu li { list-style: none; }
.submenu a { display: block; padding: 12px 16px; white-space: nowrap; color: rgba(234,242,255,0.86); }
.submenu a:hover { background: rgba(34,230,199,0.10); color: #22E6C7; }

/* ===== Mobile navigation (drop-in) ===== */
@media (max-width: 768px) {
  header { position: sticky; top: 0; }
  nav { display: none; }

  /* when opened by JS */
  nav.open { display: block; }

  nav#siteNav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(5, 11, 24, 0.96);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 15px 20px;
    backdrop-filter: blur(10px);
  }

  nav#siteNav ul {
    flex-direction: column;
    gap: 12px;
  }

  /* Dropdown becomes tap-to-open on mobile */
  .submenu {
    display: none;
    position: static;
    border: none;
    min-width: 0;
    box-shadow: none;
    backdrop-filter: none;
    background: transparent;
  }

  .has-submenu > a::after { content: " ▾"; font-size: 12px; }

  /* disable hover open on mobile */
  .has-submenu:hover .submenu { display: none; }

  .has-submenu.open .submenu {
    display: block;
    margin-top: 8px;
    padding-left: 12px;
  }
}

/* =========================================================
   ACCENT PATCH (LOGO TEAL) - keeps prior white-background neutralisers
   ========================================================= */

:root{
  --cf-bg-1: #050B18;
  --cf-bg-2: #060F22;
  --cf-card: rgba(14,31,63,0.92);

  --cf-text: #EAF2FF;
  --cf-muted: rgba(234,242,255,0.78);

  /* LOGO TEAL */
  --cf-accent: #22E6C7;
  --cf-accent-2: #00A79B;

  --cf-border: rgba(255,255,255,0.08);
  --cf-border-2: rgba(255,255,255,0.12);
  --cf-glow: rgba(34,230,199,0.18);
}

/* Global background enforcement (no page should fall back to white) */
html, body{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(34,230,199,0.14), transparent 55%),
              radial-gradient(900px 500px at 80% 30%, rgba(124,92,255,0.14), transparent 55%),
              linear-gradient(180deg, var(--cf-bg-1), var(--cf-bg-2));
  color: var(--cf-text);
}

/* If any page uses a wrapper div with a hard white bg, neutralise it */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background-color: white"],
[style*="background: rgb(255,255,255)"],
[style*="background-color: rgb(255,255,255)"]{
  background: transparent !important;
}

/* Buttons: logo teal */
.cta-primary,
.submit-btn{
  background: linear-gradient(180deg, var(--cf-accent), var(--cf-accent-2));
  border-color: rgba(34,230,199,0.55);
  color: #06101c;
}
.cta-primary:hover,
.submit-btn:hover{
  box-shadow: 0 18px 60px rgba(0,0,0,0.35), 0 0 0 3px rgba(34,230,199,0.14);
}

/* Focus ring */
.form-step select:focus,
.form-step input:focus{
  border-color: rgba(34,230,199,0.45);
  box-shadow: 0 0 0 3px var(--cf-glow);
}

/* Nav hover accent */
nav a:hover{ color: var(--cf-accent); }

/* Dropdown hover accent */
.submenu a:hover{
  background: rgba(34,230,199,0.10);
  color: var(--cf-accent);
}

/* Form option hover accent */
.form-option:hover{
  border-color: rgba(34,230,199,0.55);
  background: rgba(34,230,199,0.08);
}


/* ===== Value proposition icons (custom, logo teal) ===== */
.vp-icon{
  margin-bottom:15px; /* matches previous inline margin-bottom */
  line-height:0;
}
.vp-icon img{
  width:48px;
  height:48px;
  display:inline-block;
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.contact-icon img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===== Mobile CTA stacking to prevent overlaps ===== */
@media (max-width: 520px) {
  /* Any CTA links sitting next to each other should stack cleanly */
  .hero-ctas {
    gap: 12px;
  }

  /* Force buttons to become full-width and not collide */
  .cta-primary,
  .cta-secondary,
  .submit-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 360px; /* keeps it tidy when centered */
  }

  /* Center the stacked CTAs (works for the About page bottom section too) */
  .hero-ctas,
  .quote-section div[style*="text-align:center"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Remove left margins that were used for desktop spacing */
  .quote-section a.cta-secondary[style*="margin-left"] {
    margin-left: 0 !important;
  }

  /* Avoid hover transforms causing visual overlap on touch devices */
  .cta-secondary:hover {
    transform: none;
  }
}

@media (max-width:420px) {
  header .header-content > .cta-primary{
    padding: 10px 12px;
    font-size: 0;                /* hide original text visually */
  }

  header .header-content > .cta-primary::before{
    content: "Quote";
    font-size: 15px;
    font-weight: 700;
    color: inherit;
  }
}

/* ===== Mobile-only: CTA text + size ===== */
@media (max-width: 768px) {

  /* Make header CTA ~30% narrower without affecting layout elsewhere */
  header .header-content > .cta-primary{
    padding: 8px 14px;     /* smaller padding */
    font-size: 15px;       /* slightly smaller type */
  }

  /* Replace visible label with "Quote" on mobile only (keep original in HTML) */
  header .header-content > .cta-primary{
    position: relative;
    font-size: 0;          /* hides "Get a Quote" visually */
    line-height: 1;
  }
  header .header-content > .cta-primary::before{
    content: "Quote";
    font-size: 15px;       /* visible label size */
    font-weight: 800;
    color: inherit;
  }
}

/* ===== Mobile header de-crowding: hard cap CTA width + align right ===== */
@media (max-width: 768px) {

  /* Give logo room and force right-side controls to stay compact */
  .header-content{
    gap: 10px;
  }

  .logo{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hard cap the CTA so it cannot crowd */
  header .header-content > .cta-primary{
    flex: 0 0 auto;
    width: 128px;          /* <- adjust 110–140 if needed */
    max-width: 128px;
    padding: 10px 0;       /* no horizontal padding so width is truly capped */
    text-align: center;

    /* keep your styling but reduce visual weight */
    border-radius: 10px;
    font-size: 0;          /* hide desktop text */
    line-height: 1;
  }

  header .header-content > .cta-primary::before{
    content: "Quote";
    font-size: 15px;
    font-weight: 800;
  }

  /* Hamburger stays compact */
  .mobile-menu-btn{
    flex: 0 0 auto;
    font-size: 30px;
    margin-left: 8px;
  }
}

/* =========================================================
   MOBILE FUNNEL PATCH
   Goals:
   1) One primary action on mobile: Quote (reduce choice overload)
   2) Sticky CTA becomes the primary conversion driver
   3) Add subtle reassurance: "No impact on credit score"
   4) Support returning-visitor copy via optional .is-returning class
   ========================================================= */

/* Mobile funnel: reduce competing CTAs in hero (keep primary only) */
@media (max-width: 768px){
  /* Keep hero primary CTA, hide secondary CTA to reduce decision friction */
  .hero-ctas .cta-secondary{
    display: none !important;
  }

  /* Reduce header CTA prominence (it remains for quick access, but not competing) */
  header .header-content > .cta-primary{
    filter: saturate(0.92);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  }

  /* Ensure content never sits under sticky bar */
  body{
    padding-bottom: 96px;
  }
}

/* Sticky Mobile CTA (primary action driver) */
.mobile-cta{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  z-index: 999;
  background: rgba(5, 11, 24, 0.96);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -12px 30px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}

/* Show sticky CTA only on mobile */
@media (max-width: 768px){
  .mobile-cta{ display: block; }
}

/* Style the sticky CTA as a thumb-friendly primary button */
.mobile-cta a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 560px;
  margin: 0 auto;

  background: linear-gradient(180deg, #22E6C7, #00A79B);
  color: #06101c;
  text-decoration: none;

  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(34,230,199,0.55);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.45),
    0 0 0 3px rgba(34,230,199,0.12);

  /* We'll render our own two-line label */
  font-size: 0;
  line-height: 1;
}

/* Two-line label: primary action + reassurance */
.mobile-cta a::before{
  content: "Get a Quote\A No impact on credit score";
  white-space: pre-line;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.10);
}

/* Returning visitor copy (optional):
   Add class 'is-returning' to <body> via a tiny JS snippet if desired. */
.is-returning .mobile-cta a::before{
  content: "Finish your quote\A No impact on credit score";
}
/* Sticky CTA notification dot — delayed reveal (no JS) */
.mobile-cta a::after{
  content: "";
  position: absolute;

  /* placement (tuned) */
  top: 12px;
  right: 14px;

  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF3B30;

  /* edge cutout so it reads on teal */
  box-shadow: 0 0 0 2px rgba(5,11,24,0.96);

  /* hidden at first */
  opacity: 0;
  transform: scale(0.7);

  /* show after 3s */
  animation: gpsDotIn 0.18s ease-out forwards;
  animation-delay: 5s;
}

@keyframes gpsDotIn{
  to { opacity: 1; transform: scale(1); }
}


/* Slightly more compact on very small phones */
@media (max-width: 380px){
  .mobile-cta a{
    padding: 12px 14px;
    border-radius: 12px;
  }
  .mobile-cta a::before{
    font-size: 16px;
  }
}

/* =========================================================
   MOBILE ONLY: De-emphasise HERO CTA
   Sticky CTA remains primary conversion driver
   ========================================================= */

@media (max-width: 768px) {

  /* Target the main hero primary CTA only */
  .hero .cta-primary,
  .hero a.cta-primary {

    /* Visual downgrade */
    background: transparent;
    color: #AEEFE6; /* softer teal */
    border: 1px solid rgba(174,239,230,0.35);

    box-shadow: none;
    filter: none;

    /* Reduce size */
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;

    /* Reduce visual priority */
    opacity: 0.9;
  }

  /* Subtle hover / tap feedback (still feels alive) */
  .hero .cta-primary:hover,
  .hero .cta-primary:active {
    background: rgba(34,230,199,0.08);
    border-color: rgba(174,239,230,0.6);
    opacity: 1;
  }
}
`