@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');

 
 html, body {
    height: 100%;
    width: 100%;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
    background-color: #ffffff;
    color: var(--navy);
    line-height: 1.5;
    scroll-behavior: smooth;
    position: fixed;
    overflow:hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }


:root {
  /* Base Brand Colors */
  --primary-blue: #0056D2;
  --navy: #0A1F44;
  --darknavy: #081121;
  --lightnavy: #1C3059;
  --lighter: #5A6C87;
  --teal: #00B7A8;
  --coral: #FF5A5F;
  --sunset-orange: #FF914D;
  --golden-yellow: #FFD43B;

  --light-gray: #F5F5F5;
  --medium-gray: #cecece;
  --charcoal: #333333;

  /* Typography */
  --h1: #0A1F44;            /* navy */
  --h2: #0056D2;            /* primary-blue */
  --h3: #00B7A8;            /* teal */
  --h4: #333333;            /* charcoal */
  --h5: #FF5A5F;            /* coral */
  --h6: #FF914D;            /* sunset-orange */
  --body-text: #333333;     /* charcoal */
  --muted-text: #8d8d8d;    /* soft dark gray */
  --link: #0056D2;          /* primary-blue */
  --link-hover: #003fa3;    /* darker primary-blue */

  /* Backgrounds */
  --background-main: #ffffff;
  --background-alt: #F5F5F5;       /* light-gray */
  --background-muted: #cecece;     /* medium-gray */
  --background-dark: #0A1F44;      /* navy */

  /* Buttons */
  --button-primary: #0056D2;
  --button-primary-hover: #0041a3;
  --button-accent: #00B7A8;
  --button-accent-hover: #008e84;
  --button-danger: #FF5A5F;
  --button-danger-hover: #e94a4f;

  /* Borders & Dividers */
  --border-light: #cecece;
  --border-dark: #333333;

  /* Accents */
  --accent-blue: #0056D2;
  --accent-teal: #00B7A8;
  --accent-coral: #FF5A5F;
  --accent-orange: #FF914D;
  --accent-yellow: #FFD43B;

  /* Status Indicators */
  --success: #00B7A8;
  --warning: #FFD43B;
  --error: #FF5A5F;
  --info: #0056D2;

    --blue-1: #1A73E8;
  --blue-2: #1976D2;
  --blue-3: #4A90E2;
  --blue-4: #6FA8DC;
  --blue-5: #B3D7F5;
  --blue-6: #3C6E91;
  --blue-7: #89CFF0;
  --blue-8: #2C82C9;
  --blue-9: #1F4E79;
  --blue-10: #0077B6;

  /* Teals & Aquas */
  --teal-1: #00B7A8;
  --teal-2: #20C997;
  --teal-3: #17A2B8;
  --teal-4: #009999;
  --teal-5: #4DB6AC;
  --teal-6: #66CCCC;
  --teal-7: #3FB8AF;
  --teal-8: #2BBBAD;
  --teal-9: #00CED1;
  --teal-10: #40E0D0;

  /* Greens (harmonious contrast) */
  --green-1: #2E8B57;
  --green-2: #3CB371;
  --green-3: #5CB85C;
  --green-4: #A2D39C;
  --green-5: #9CCC65;
  --green-6: #8BC34A;
  --green-7: #A8E6CF;
  --green-8: #B2D8B2;
  --green-9: #6DBE45;
  --green-10: #4CAF50;

  /* Neutrals & Grays */
  --gray-50: #F5F5F5;
  --gray-100: #E9EDF5;
  --gray-200: #DCE3EA;
  --gray-300: #B0BEC5;
  --gray-400: #90A4AE;
  --gray-500: #607D8B;
  --gray-600: #455A64;
  --gray-700: #37474F;
  --gray-800: #C5D1DC;
  --gray-900: #AAB7C4;

  /* Accents (contrasting highlights) */
  --accent-orange-1: #FF914D;
  --accent-orange-2: #FFB347;
  --accent-yellow-1: #FFD43B;
  --accent-yellow-2: #FEC601;
  --accent-gold-1: #FFC857;
  --accent-red-1: #FF5A5F;
  --accent-red-2: #F28B82;
  --accent-coral: #FF6F61;
  --accent-red-3: #D7263D;
  --accent-red-4: #E84855;
}

.comparison {
  padding-top:75px;
}

/* ==== Local Deals Comparison — Complete CSS ==== */
/* Scoped palette on the component wrapper (no :root) */
.ldx-compare {
  --navy: #0A1F44;
  --navy-2: #0C235B;
  --blue: #0056D2;
  --teal: #00B7A8;
  --coral: #FF5A5F;
  --yellow: #FFD43B;
  --white: #ffffff;
  --ink: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.75);
  --line: rgba(255,255,255,0.14);
  --line-soft: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.06);
  --shadow: 0 18px 60px rgba(0,0,0,0.35);
  --r: 16px;
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .5s;
  position: relative;
  isolation: isolate;
  background: var(--navy);
  border-radius: 20px;
}

/* Shell (glass card on navy bg) */
.ldx-compare .ldx-shell{
  border-radius: 20px;
  color: var(--ink);
  position: relative;
  margin:25px 0;
  overflow: hidden;
}

/* Subtle ambient glow */
.ldx-compare .ldx-shell::before,
.ldx-compare .ldx-shell::after{
  content:""; position:absolute; pointer-events:none; filter: blur(40px);
  opacity:.25; width: 60%; height: 120px;

}
.ldx-compare .ldx-shell::before{ inset:auto auto 6% -10%; transform: rotate(-3deg); }
.ldx-compare .ldx-shell::after{ inset:-10% -12% auto auto; transform: rotate(6deg); opacity:.2; }

/* Header */
.ldx-compare .ldx-head{ display:grid; gap:12px; margin-bottom:10px; }
.ldx-compare h2{
  margin:0; font-weight:900; letter-spacing:.3px; color: var(--white);
  font-size: clamp(22px, 2.3vw, 32px);
  text-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ldx-compare .ldx-controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* Switch (differences) */
.ldx-compare .ldx-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.ldx-compare .ldx-switch input{ display:none; }
.ldx-compare .ldx-switch__rail{
  width:54px; height:28px; border-radius:999px; position:relative; display:inline-block;
  background: var(--glass); border:1px solid var(--line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ldx-compare .ldx-switch__knob{
  position:absolute; top:50%; left:3px; translate:0 -50%;
  width:22px; height:22px; border-radius:50%;
  background: var(--white);
  box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 -2px 6px rgba(0,0,0,.08);
  transition: transform var(--dur) var(--ease), left var(--dur) var(--ease);
}
.ldx-compare .ldx-switch input:checked + .ldx-switch__rail .ldx-switch__knob{ left:29px; transform: rotate(10deg); }
.ldx-compare .ldx-switch__label{ color:var(--muted); font-weight:600; }

/* ===== Refined Segmented Selector (white, round, centered) ===== */
.ldx-compare .ldx-seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 20px;
  padding: 4px;
  border-radius: 999px;
  width:100%;
  border: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.ldx-compare .ldx-seg__btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  width:100%;
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  text-align: center;
  transition: color .3s ease;
}
.ldx-compare .ldx-seg__btn span { width: 100%; text-align: center; }
.ldx-compare .ldx-seg__btn input { display: none; }
.ldx-compare .ldx-seg__thumb {
  position: absolute; z-index: 0; top: 4px; left: 4px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--primary-blue);
  
  transition: all .25s cubic-bezier(.22,1,.36,1);
}
.ldx-compare .ldx-seg__btn input:checked + span { color: var(--white); }

/* Grid base */
.ldx-compare .ldx-grid{
  position:relative; margin-top:25px;
  display:grid; grid-template-columns: 1.1fr 1fr 1fr;
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(2px);
}

/* Spotlight hover */
.ldx-compare .ldx-spotlight{
  position:absolute; inset:auto auto 0 0; width:220px; height:220px; pointer-events:none; opacity:0;
  background: radial-gradient(120px 120px at center, rgba(255,255,255,.15), rgba(255,255,255,0));
  filter: blur(8px); transition: opacity .3s ease;
}
.ldx-compare .ldx-grid:hover .ldx-spotlight{ opacity:1; }

/* Rows */
.ldx-compare .ldx-row{
  display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; position:relative;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), transform .45s var(--ease);
  will-change: max-height, opacity, transform;
}
.ldx-compare .ldx-row--head .ldx-cell{ background: var(--navy-2); font-weight:800; color:var(--white); }
.ldx-compare .ldx-row:not(.ldx-row--head):nth-child(odd) .ldx-cell{ background: rgba(255,255,255,.03); }
.ldx-compare .ldx-row:not(.ldx-row--head):nth-child(even) .ldx-cell{ background: transparent; }

.ldx-compare .ldx-cell{
  padding: 14px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink); font-size:15px;
}

/* Label column */
.ldx-compare .ldx-cell--label{ font-weight:800; color: var(--yellow); display:flex; align-items:center; gap:8px; }

/* Column headers */
.ldx-compare .ldx-colhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ldx-compare .ldx-pill{
  display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px;
  background: var(--teal); color: var(--navy); font-weight:900;
  
}

/* Column highlight (animated border + glow) */
.ldx-compare.highlight-a .ldx-cell--a,
.ldx-compare.highlight-b .ldx-cell--b{ position:relative; }
.ldx-compare.highlight-a .ldx-cell--a::before,
.ldx-compare.highlight-b .ldx-cell--b::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:0 4px 4px 0;
  background: var(--primary-blue);
  animation: ldxPulse .9s var(--ease) 1;
}
.ldx-compare.highlight-b .ldx-cell--b::before{ background: var(--coral); }
@keyframes ldxPulse{
  0%{ box-shadow:0 0 0 0 rgba(0,183,168,.45); }
  100%{ box-shadow:0 0 0 12px rgba(0,183,168,0); }
}

.whitespan {color:white !important;}

/* Tips */
.ldx-compare .ldx-tip{
  margin-left:2px; width:22px; height:22px; border-radius:50%;
  display:inline-grid; place-items:center; font-size:12px; line-height:20px;
  background: var(--glass); color: var(--white);
  border:1px solid var(--line); cursor:pointer; transition: transform .2s var(--ease), background .2s var(--ease);
}
.ldx-compare .ldx-tip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.ldx-compare .ldx-tooltip{
  position: fixed; z-index: 50; max-width: 320px; padding: 12px 14px;
  background: var(--navy); color: var(--ink); border:1px solid var(--line);
  border-radius:12px; box-shadow: 0 18px 48px rgba(0,0,0,.55);
  transform-origin: 10% 10%; scale:.9; opacity:0; transition: scale .18s var(--ease), opacity .18s var(--ease);
}
.ldx-compare .ldx-tooltip[aria-show="true"]{ scale:1; opacity:1; }

/* CTA buttons */
.ldx-compare .ldx-cta{ display:flex; gap:12px; justify-content:center; margin-top:16px; }
.ldx-compare .ldx-btn{
  height:50px; padding:0 18px; border-radius:14px; font-weight:700; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  transition: transform .05s ease, filter .15s ease, background .2s ease, color .2s ease;
  border:2px solid transparent; color: var(--white);
}
.ldx-compare .ldx-btn--primary{ background: var(--blue); }
.ldx-compare .ldx-btn--primary:hover{ filter:brightness(1.08); transform: translateY(-1px); }
.ldx-compare .ldx-btn--ghost{ background: transparent; border-color: var(--line); }
.ldx-compare .ldx-btn--ghost:hover{ background: var(--white); color: var(--navy); }

/* Diff-only collapse */
.ldx-compare .is-same{ overflow:hidden; }
.ldx-compare.collapsing .is-same{ opacity:0; transform: translateY(-6px); }

/* Mobile: card layout */
@media (max-width: 860px){
  .ldx-compare .ldx-grid{ display:block; border:none; background:transparent; }
  .ldx-compare .ldx-row--head{ display:none; }
  .ldx-compare [data-row]{
    display:grid; grid-template-columns:1fr; gap:0; margin-bottom:12px; overflow:hidden;
    border:1px solid var(--line); border-radius:14px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  }
  .ldx-compare [data-row] .ldx-cell{ border:0; padding:14px 16px; }
  .ldx-compare [data-row] .ldx-cell--label{
    border-bottom:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,212,59,.18), rgba(255,212,59,.04));
    color:var(--yellow);
  }
  .ldx-compare .ldx-cell--a::before,
  .ldx-compare .ldx-cell--b::before{
    content: attr(data-coltitle);
    display:block; font-size:12px; font-weight:800; color:var(--muted); margin-bottom:6px;
  }
    .ldx-compare .ldx-cta {
    display: flex;
    flex-direction: column;      /* stack */
    align-items: center;        /* full width */
    justify-content: center;
    gap: 12px;                   /* vertical spacing */
    margin-top: 20px;
  }
  .ldx-compare .ldx-btn {
    width: 100%;
    min-height: 54px;            /* larger tap target */
    font-size: 16px;
    text-align: center;
  }
}


/* Screen-reader helper */
.ldx-compare .sr-only{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip: rect(0,0,0,0) !important; border:0 !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ldx-compare *{ transition:none !important; animation:none !important; }
}


/* Mobile stacking */
@media (max-width: 820px) {
  .comparison__grid {
    grid-template-columns: 1fr;
  }
  .comparison__row--header { display: none; }
  .comparison__cell {
    border-bottom: none;
    border-top: 1px solid var(--gray-300);
  }
  .comparison__row [role="rowheader"] {
    background: var(--gray-50);
    border-top: none;
  }
  .comparison__row .comparison__cell--a::before,
  .comparison__row .comparison__cell--b::before {
    content: attr(data-coltitle);
    display: block;
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 6px;
  }
}

/* Accessibility helpers */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  border: 0 !important;
}



  section {
      width:calc(100% - 40px); padding: 0 20px 120px 20px; position:relative; overflow: hidden;
  }

  section.primary-bg {
    background-color: var(--navy);
    color:white;
  }
  
  section.light-bg {
    background-color: white;
    color: var(--charcoal);
  }
  
  /* Wave transitioning from primary to light */
  section.primary-bg.wave-to-light::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M0,64L60,69.3C120,75,240,85,360,117.3C480,149,600,203,720,197.3C840,192,960,128,1080,106.7C1200,85,1320,107,1380,117.3L1440,128V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
    
  }
  
  /* Wave transitioning from light to primary (#0A1F44) */
  section.light-bg.wave-to-primary::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230A1F44' d='M0,64L60,69.3C120,75,240,85,360,117.3C480,149,600,203,720,197.3C840,192,960,128,1080,106.7C1200,85,1320,107,1380,117.3L1440,128V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
  }


  h1, .headline {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
    display:flex; align-items:center; justify-content:center;
  }

  h2 {
 font-style:italic;
  font-size:24px;
    text-align:center;
    display:flex; justify-content:center;
  }

  h3 {
 
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size:20px;
  }

.primary-bg > h1 {
  color:white !important;
}

  h1 {font-size:38px; display:flex; justify-content:center; text-align:center;}

  a {text-decoration: none; color:inherit; margin:0 3px;}
  a:visited {text-decoration: none; color:inherit;}

  label {
    display: flex;
    align-items: center;
    margin:10px 0;
    font-size: 16px; font-weight: 700;
    color: #333;
  }


  input[type="checkbox"] {
    width: 35px;
    height: 35px;
    accent-color: #007BFF; /* Sky blue or your brand color */
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease; margin-right:5px;
  }

  input[type="checkbox"]:hover {
    border-color: #007BFF;
  }

  input[type="checkbox"]:checked {
    border-color: #007BFF;
  }

  label span {
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }

  input[type="checkbox"]:checked + span {
    color: var(--primary-blue);
    font-weight: 600;
  }

  select {
    width:100%;
    font-size: 16px;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background-color: #ffffff;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.3s;
    height:50px;
    outline:0;
    -webkit-appearance: none;  /* Safari/Chrome */
    -moz-appearance: none;     /* Firefox */
    appearance: none;  
    box-shadow: none;
    font-weight: 700;
   
  }

  option {
    width:100%;
    background-color: #fff;
    color: #ccc;
    font-size: 16px;
    font-weight: 700;
    height:50px;
  }

  .optionAddOns {
    border:1px solid var(--medium-gray); border-radius:6px;
     display:flex; flex-direction:column; margin-top:20px;
  }
  .optionAddOns > div:first-child {
    font-size:14px; color:#333; font-weight: 700;
  }

  .advertiseNowFlow {
    border-radius:6px; background:var(--light-gray); position: relative;
    padding:10px; display:none; flex-direction:column; margin-top:10px;
    width:calc(100% - 20px); overflow:hidden;
  }

  .advertiseNowFlow > div {
     margin:5px 0;
  }


  .launchCampaign {
    background-color: #0056D2; width:100%; height:50px; border-radius:6px; margin-top:20px;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    font-weight: 700; position:relative; opacity:.5; cursor:pointer;
  }
  .launchCampaign > div:nth-child(2) {
    position:relative; z-index:1;
}

  .profilePicture {
    width:75px; height:75px; border-radius:100%; background:var(--navy);
    margin:15px 0; font-size:32px; color:white; font-weight:900;
    display:flex; align-items:center; justify-content:center;
  }

  .businessInfo {
    display:flex; flex-direction:row;
  }
  .businessInfo > div:first-child { margin-right:6px; display:flex; align-items:center; justify-content:center; }
  
  .invoices {
    margin:25px 0;
  }

  .invoices > div:first-child {
    font-size:18px; color:var(--navy); font-weight: 700;
    margin-bottom:6px; display:flex; flex-direction: row; align-items:center; justify-content:flex-start;
  }
  .invoices > div:first-child > div:first-child { margin-right:5px; display:flex; align-items:center; justify-content:flex-end; }

  .invoices > div:last-child {
    border:1px solid var(--medium-gray); border-radius: 6px; padding:10px;
  }

  .paidInvoices {
    margin-top:15px;
  }

  .paidInvoices > div:first-child {
    font-size:14px; color:var(--navy); font-weight: 700;
    margin-top:5px; padding-left:5px;
  }

  .unpaidInvoices > div:first-child {
    font-size:14px; color:var(--navy); font-weight: 700;
    margin-top:5px; padding-left:5px;
  }

  .unpaidInvoices > div:nth-child(2) {
    display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
    padding:5px;
  }
  .unpaidInvoices > div:nth-child(2) > div {
    width:25%; display:flex; align-items:center; justify-content:flex-start;
  }
  .unpaidInvoicesList > div {
    display:flex; flex-direction: row; justify-content: flex-start; color:#212529;
    background:#fbe8a6; border:1px solid #e0a800; height:40px; border-radius: 6px; padding:5px; margin:5px 0;
  }
  .unpaidInvoicesList > div > div {
    width:25%; display:flex; align-items:center; justify-content:flex-start;
  }


  /* PAID INVOICES */
  .paidInvoices > div:nth-child(2) {
    display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
    padding:5px;
  }
  .paidInvoices > div:nth-child(2) > div {
    width:25%; display:flex; align-items:center; justify-content:flex-start;
  }
  .paidInvoicesList > div {
    display:flex; flex-direction: row; justify-content: flex-start; color:#155724;
    background:#e6f4ea; border:1px solid #28a745; height:40px; border-radius: 6px; padding:5px; margin:5px 0;
  }
  .paidInvoicesList > div > div {
    width:25%; display:flex; align-items:center; justify-content:flex-start;
    overflow:hidden; margin-right:10px;
  }

  .campaigns {
    margin:25px 0;
  }
  .campaigns > div:first-child {
    font-size:18px; color:var(--navy); font-weight: 700;
    margin-bottom:6px; display:flex; flex-direction: row; align-items:center; justify-content:flex-start;
  }
  .campaigns > div:first-child > div:first-child { margin-right:5px; display:flex; align-items:center; justify-content:flex-end; }

  .campaigns > div:last-child {
    border:1px solid var(--medium-gray); border-radius: 6px; padding:10px;
  }


  .deals {
    margin:25px 0;
  }
  .deals > div:first-child {
    font-size:18px; color:var(--navy); font-weight: 700;
    margin-bottom:6px; display:flex; flex-direction: row; align-items:center; justify-content:flex-start;
  }
  .deals > div:first-child > div:first-child { margin-right:5px; display:flex; align-items:center; justify-content:flex-end; }

  .deals > div:last-child {
    border:1px solid var(--medium-gray); border-radius: 6px; padding:10px;
  }


  .designs {
    margin:25px 0;
  }
  .designs > div:first-child {
    font-size:18px; color:var(--navy); font-weight: 700;
    margin-bottom:6px; display:flex; flex-direction: row; align-items:center; justify-content:flex-start;
  }
  .designs > div:first-child > div:first-child { margin-right:5px; display:flex; align-items:center; justify-content:flex-end; }

  .designs > div:last-child {
    border:1px solid var(--medium-gray); border-radius: 6px; padding:10px;
  }

  .zones {
    margin:15px 0;
  }
  .zones > div:first-child {
    display: flex;
    margin:10px 0;
    font-size: 14px; font-weight: 700;
    color: #333;
  }

  .price {

  }
  .price > div:first-child {
    display: flex;
    margin:10px 0;
    font-size: 14px; font-weight: 700;
    color: #333;
  }
  .price > div:last-child {
    font-size:32px; font-weight: 700;
  }

  @media (min-width:600px) {

    .box1 {min-height:600px;}
   h1 {width:100%; text-align:center; justify-content: center;}
   h2 {width:100%; text-align:center; justify-content: center;}
   h3 {width:100%; text-align:center; justify-content: center;}

   section {padding:0 20px 220px 20px;}

   section.light-bg.wave-to-primary::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 102%;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230A1F44' d='M0,128L60,133.3C120,139,240,149,360,181.3C480,213,600,267,720,261.3C840,256,960,192,1080,170.7C1200,149,1320,171,1380,181.3L1440,192V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
  }
section.primary-bg.wave-to-light::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 102%;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M0,128L60,133.3C120,139,240,149,360,181.3C480,213,600,267,720,261.3C840,256,960,192,1080,170.7C1200,149,1320,171,1380,181.3L1440,192V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}


  

  }

  .profilePic {
    width:50px; height:50px; border-radius:100%; background:var(--navy);
    position:relative; display:none;
  }
  .profilePicLetter {
    color:white; font-size:24px; font-weight: 900;
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    z-index:1;
  }
  .profilePicOnline {
    width:15px; height:15px; position:absolute; right:0; bottom:0; border-radius:100%;
    background:white; display:flex; align-items:center; justify-content:center; z-index:2;
  }
  .profilePicOnline > div {
    width:10px; height:10px; border-radius:100%; background:green;
  }

  /* Error, Success */
  .error {
    background:#FF6B6B;  height:50px; font-weight:700; display:none; align-items:center; justify-content:center;
    color:white; font-size:16px; border-radius:6px; text-align:center; margin:10px 0;
  }
  .success {
    background:#28a745; height:50px; font-weight:700; display:none; align-items:center; justify-content:center;
    color:white; font-size:16px; border-radius:6px; text-align:center; margin:10px 0;
  }

  .contactForm {
      width:100%;
      display:flex; flex-direction: column; justify-content: center;
  }

  .contactForm > div:not(:last-child) {
      margin-top:10px;
      width:100%;
  }

  .contactForm > div:not(:last-child) > div:first-child {
      font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
  }

  .sendMessage {
    background-color: #0056D2; width:100%; height:50px; border-radius:6px; margin-top:20px;
      color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
      font-weight: 700; position:relative; opacity:.5; cursor:pointer;
  }

  .sendMessage > div:nth-child(2) {
      position:relative; z-index:1;
  }

  .input {
      font-size:16px; outline:0; border:0; padding:0; caret-color:black; font-weight: 700;
      width:calc(100% - 10px); background:#f0f0f0; height:50px; padding-left:10px; 
      border-top-left-radius:6px; border-bottom-left-radius:6px;
  }

  /* Clients */

  .registerForm {
    width:100%;
    display:flex; flex-direction: column; justify-content: center;
}

  .registerForm > div:not(:nth-child(5)) {
    margin-top:10px;
    width:100%;
}

.registerForm > div:not(:nth-child(5)) > div:last-child {
  background:#f0f0f0;
}

.registerForm > div:not(:nth-child(5)) > div:first-child {
    font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
}

.registerForm > div > div:last-child > div:last-child {
  width:50px; height:100%; display:flex; align-items:center; justify-content:center;
  position:relative;
}

.registerForm > div:not(:nth-child(5)) > div:last-child {
  width:100%; display:flex; flex-direction: row;
}

.registerForm > div > div:last-child > div:first-child {
  width:calc(100% - 50px); 
}

.registerForm > div > div:last-child > div:last-child {
  width:50px; height:50px; display:flex; align-items:center; justify-content: center;
  background:#f0f0f0; 
}

.registerForm > div > div:last-child > div:last-child > div {
  position:absolute;
}

.fullNameCheck {
  color:green; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.businessNameCheck {
  color:green; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.phoneNumberCheck {
  color:green; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.phoneNumberX {
  color:red; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.emailCheck {
  color:green; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.emailX {
  color:red; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.loginFormEmailX {
  color:red; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.loginFormEmailCodeX {
  color:red; width:50px; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}

  .dashboard {
      width:100%; height:100%; position:relative; z-index:2;
      display:none; flex-direction: column;
  }
  .welcome {
    width:100%; font-size:24px; color:black; font-weight:900;
    display:flex; align-items:center; justify-content:flex-start;
  }
  .dashboardBusinessName {
    width:100%; font-size:20px; color:black; font-weight:900;
    display:flex; align-items:center; justify-content:flex-start;
  }
  .reserveAdSpotButton {
    background-color: #0056D2; width:100%; height:50px; border-radius:6px; margin-top:20px;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    font-weight: 700; position:relative; opacity:1; cursor:pointer;
  }
  .logout-button {
    background-color: #ff7043;  /* Deep orange */
    color: white;
    width:100%; height:50px; border-radius:6px; margin-top:20px;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    font-weight: 700; position:relative; opacity:1; cursor:pointer; 
  }
  .logout-button:hover {
    background-color: #f4511e;
  }

.loginForm {
    width:100%;
    display:flex; flex-direction: column; justify-content: center;
}

.loginForm > div:not(:last-child) {
    margin-top:10px;
    width:100%;
}

.loginForm > div:not(:last-child) > div:first-child {
    font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
}

.getCode {
  background-color: #0056D2; width:100%; height:50px; border-radius:6px; margin-top:20px;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    font-weight: 700; position:relative; opacity:.5; cursor:pointer;
}

.getCode > div:nth-child(2) {
    position:relative; z-index:1;
}
.loginFormEmailInputContainer {
  border-radius:6px; border:2px solid #f0f0f0;
  background:#f0f0f0;
}
.loginFormEmailCodeInputContainer {
  border-radius:6px; border:2px solid #f0f0f0;
  background:#f0f0f0;
}

.loginFormEmailCode {
  display:none; flex-direction: column;
}
.loginFormEmail {
  display:flex; flex-direction: column;
}
.loginFormEmail > div:not(:last-child) > div:first-child {
  font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
}

.loginFormEmail > div:first-child > div:last-child {
  display:flex; flex-direction:row;
}

.loginFormEmail > div > div:last-child > div:first-child {
  width:calc(100% - 50px); 
}

.loginFormEmail > div > div:last-child > div:last-child {
  width:50px; height:50px; display:flex; align-items:center; justify-content: center;
  background:#f0f0f0; 
}

.loginFormEmail > div > div:last-child > div:last-child > div {
  position:absolute;
}

.loginFormEmailCode > div:first-child > div:last-child {
  display:flex; flex-direction:row;
}

.loginFormEmailCode > div > div:last-child > div:first-child {
  width:calc(100% - 50px); 
}

.loginFormEmailCode > div > div:last-child > div:last-child {
  width:50px; height:50px; display:flex; align-items:center; justify-content: center;
  background:#f0f0f0; 
}

.loginFormEmailCode > div > div:last-child > div:last-child > div {
  position:absolute;
}

.loginFormEmailCode > div:not(:last-child) > div:first-child {
  font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
}

.verifyEmailCodeButton {
  background-color: #0056D2; width:100%; height:50px; border-radius:6px; margin-top:20px;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    font-weight: 700; position:relative; opacity:.5; cursor:pointer;
}

.verifyEmailCodeButton > div:nth-child(2) {
    position:relative; z-index:1;
}


.termsprivaynotice {
  width:calc(100% - 20px); padding:0 10px; font-size:12px; color:var(--navy); 
  margin:10px 0; text-align:center; display:flex; align-items:center; justify-content:center;
  
}


.registerButton {
    background-color: #0056D2; width:100%; height:50px; border-radius:6px; margin-top:20px;
      color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
      font-weight: 700; position:relative; opacity:.5; cursor:pointer;
  }
  
  .registerButton > div:nth-child(2) {
      position:relative; z-index:1;
  }

.newUser {
    width:100%; height:50px; font-size:16px; color:white; font-weight: 700;
    display:flex; align-items:center; justify-content:center; margin-top:20px;
    background:var(--border-light); border-radius: 2px; cursor:pointer;
}
.newUser:hover {
  background:var(--border-dark);
}

.existingUser {
    width:100%; height:50px; font-size:16px; color:white; font-weight: 700;
    display:flex; align-items:center; justify-content:center; margin-top:20px;
    background:var(--border-light); border-radius: 2px; cursor:pointer;
}
.existingUser:hover {
  background:var(--border-dark);
}

.registerContainer {
    display:none; flex-direction: column;
}
.loginContainer {
    display:flex; flex-direction: column;
}

.bigSpinnerCover {
  width:100%; height:100%;
  position:absolute; left:0; top:0; z-index:3; background:white;
  display:flex; align-items:center; justify-content:center;
}
.bigSpinner {
  width:50px;
  height:50px;
  border:3px solid transparent;
  border-top:3px solid var(--navy);
  border-radius:100%;
  animation: spin .5s infinite;
  opacity:1;
  position:absolute;
  z-index:0;
  visibility:visible;
}

.loginButton {
  width:85px; height:40px; color:white; background:var(--navy); border-radius:6px;
  display:none; align-items:center; justify-content:center; font-size:14px;
  
}

  /* --- Primary, Secondary, Accent Styles --- */

.primaryButton {
    background-color: var(--navy);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
    margin-top:15px;
  }
  
  .primaryButton:hover {
    background-color: var(--navy);
    transform: scale(1.05);
  }
  
  .secondaryButton {
    background-color: var(--sky-blue);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }
  
  .secondaryButton:hover {
    background-color: var(--primary-blue);
    transform: scale(1.05);
  }
  
  .accent {
    background-color: var(--coral);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }
  
  .accent:hover {
    background-color: var(--sunset-orange);
    transform: scale(1.05);
  }

  video {

    object-fit: cover;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
    display:flex; align-items:center; justify-content:center;

}

  .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1.2;
    color: #0A1F44; /* Dark Navy */
    text-align:left;
  }

  .logo-text > div {
    
    display:flex; flex-direction:row;
  }
  .logo-text > div > div:first-child {
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
    
  }
  .logo-text > div > div:last-child {
   display:flex; flex-direction:flex-end; align-items:flex-end;
  margin-bottom:4px; margin-left:5px;
    
  }
  
  .logo-text .primary {
    display: block;
  }
  
  .logo-text .secondary {
    display: block;
    color: #005BAC; /* Royal Blue */
    letter-spacing: 1px;
    font-weight: 900;
  }

  .logo-text .primaryWhite {
      display:block; color:white;
  }
  

  .header {
      width:calc(100% - 40px); padding:0 20px; height:85px; position:relative; z-index:4;
      display:flex; flex-direction:row; align-items:center; justify-content:space-between;
      background:white;
  }

  .headerLeft {
    
    width:150px;
  }

  .headerRight {
    height:100%;
    width:calc(100% - 150px); display:flex; flex-direction: row; align-items:center; justify-content:flex-end;
  }

  .hamburger {
      display:none;
  }

  .navBar {
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end; width:100%; height:100%;
  }

  .navBar > div {
      padding:5px 8px; margin-left:10px; 
      font-size:18px; font-weight: 700; color:black; 
  }




  .main {
      height:calc(100% - 85px); overflow-y:scroll; overflow-x:hidden;
      border:none; outline:0;
  }

/* Inline, baseline-aligned row */
.box1cycle{
  display:inline-flex;
  align-items:baseline;
  gap:.35em;
  white-space:nowrap;
  height:50px;
  color:white;
  font-size:46px;
  margin-bottom:15px;
}
.box1cycle h1{ margin:0; line-height:1.05; font-size:46px; color:white;}

/* Robust CSS-only rotator (no width jitter) — now for 4 items */
.h1-cycle{
  --row-h: 50px;               /* one line tall viewport */
  display:grid;                /* all items overlap in one grid cell */
  inline-size: max-content;    /* width = widest word */
  block-size: var(--row-h);    /* viewport = one line tall */
  overflow:hidden;
  align-self: baseline;        /* line up with neighbor text */
  
}

/* Place every H1 in the same grid cell and animate visibility */
/* Keep your existing container rules... */

/* Each H1 runs a 12s cycle; 4 items → 0/3/6/9s offsets */
.h1-cycle > h1{
  grid-area: 1 / 1;
  display:flex; align-items:center;
  block-size: var(--row-h);
  white-space:nowrap;
  opacity:0; transform: translateY(24%);
  animation: h1-cycle-fade 12s cubic-bezier(.22,1,.36,1) infinite;
  color:#0074fc;
  font-size:46px;
}

.h1-cycle > h1:nth-child(1){ animation-delay: 0s; }
.h1-cycle > h1:nth-child(2){ animation-delay: 3s; }
.h1-cycle > h1:nth-child(3){ animation-delay: 6s; }
.h1-cycle > h1:nth-child(4){ animation-delay: 9s; }

/* Faster exit: in ~0.5s, hold ~2.0s, out ~0.5s, gone before the next fades in */
@keyframes h1-cycle-fade{
  0%   { opacity:0; transform: translateY(24%); }
  5%   { opacity:1; transform: translateY(0); }      /* quick fade-in */
  22%  { opacity:1; transform: translateY(0); }      /* shorter hold */
  26%  { opacity:0; transform: translateY(-22%); }   /* quick fade-out */
  100% { opacity:0; transform: translateY(-22%); }
}

/* Optional tiny optical nudge if needed */
.box1cycle .h1-cycle{ transform: translateY(-0.02em); }

/* Mobile stack (optional) */
@media (max-width: 680px){
  .box1cycle{
    display:flex; flex-direction:column; align-items:center;
    gap:.2em; white-space:normal; text-align:center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .h1-cycle > h1{ animation:none; opacity:0; transform:none; }
  .h1-cycle > h1:first-child{ opacity:1; }
}




  .box1Cover {
      position:absolute; z-index:1; width:100%; height:100%; background:rgb(0,0,0,.7);
      top:0; left:0;
  }

  .box1cycle {
    display:flex; flex-direction:row; justify-content:center; z-index:2;
  }

  .box1 {
      width:100%; min-height:100%; padding:60px 0; position:relative; background:white;
      display:flex; flex-direction:column; justify-content:center; align-items: center; box-sizing:border-box;
  }
  .box1 > h1 {
      text-align:center; position:relative; z-index:2; color:white; font-size:46px;
      width:calc(100% - 40px); padding:0 20px;
  }
  .box1 > h2 {
      text-align:center; position:relative; z-index:2; color:white;
      font-size:26px; width:calc(100% - 40px); padding:0 20px;
     top:-10px; 
  }

  .goldilocks.box {
    --shadow-color: hsl(0deg 0% 0% / 0.5);
  }
  .box {
    filter: drop-shadow(
      1px 2px 8px var(--shadow-color)
    );
  }

  .learnMoreSmall {
    margin-top:30px; font-size:18px; color:white;
    text-decoration:underline; z-index:2;
  }

  

  .learnMore {
      margin:20px 0;
      position:relative; z-index:2;
      font-weight:900; border-radius:6px;
      background-color: #0074fc;
      color: white;
      font-weight: 700;
      text-transform: uppercase;
      padding: 0.55rem 1.4rem;
      border: none;
      border-radius: 8px;
      display: inline-block;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
      text-decoration: none;
  }

  .learnMore.pulse { --pulse-rgb: 0, 86, 210; }

  .getStarted {
    margin:20px 0;
    position:relative; z-index:2;
    font-weight:900; border-radius:6px;
    background-color: #0056D2;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }
  .clientPortalButton {
    margin:20px 0;
    position:relative; z-index:2;
    font-weight:900; border-radius:6px;
    background-color: #0056D2;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }

  .italic {font-style:italic;}

  #how-it-works {
    padding:40px 0;
    width:100%; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }

  #testimonials {
    padding:40px 0;
  }

  #pricing {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #design-services {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #coverage-map {
    padding:40px 0;
    width:100%;  display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #success-stories {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #resources {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #faq {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #about-us {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #contact {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #client-portal {
    width:100%;  display:flex; flex-direction:column; justify-content:center; align-items: center;
  }

  .how-it-works-action {
      width:100%; margin-top:20px;
      position:relative; display:flex; flex-direction: row;
  }
  .move-left {
      width:75px;  display:flex; align-items:center; justify-content:flex-start;
      color:white; cursor:pointer;
  }
  .move-right {
      width:75px;  display:flex; align-items:center; justify-content:flex-end;
      color:white; cursor:pointer;
  }
.holder {
  width: calc(100% - 150px);
  /* optional baseline min-height if you want a floor */
  /* min-height: 350px; */
  position: relative;
  border: 2px solid white;
  border-radius: 10px;
  overflow-x: hidden;   /* keep horizontal clipping for slide effect */
  /* overflow-y: visible;  default is fine; this keeps vertical overflow visible */
}

.mover {
  position: relative;         /* not absolute */
  display: flex;              /* modern flex, not -webkit-box */
  flex-direction: row;
  transition: transform .2s;  /* slide by translating this container */
  /* no fixed height; let content define it */
}

.mover > div {
  flex: 0 0 100%;             /* each slide is full width of holder */
  width: 100%;
  padding: 20px 10px;
  /* no height:100%; let content size it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* keep if you want spacing, otherwise 'start' */
  text-align: center;
  box-sizing: border-box;
}

/* Don’t absolutely position this label if you want it to affect height */
.mover > div > div:first-child {
  position: relative;         /* was absolute */
  /* if you liked the “badge over content” look, use margin instead of abs */
  margin-bottom: 12px;
  background: #16366e;
  border-radius: 25px;
  font-size: 16px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:5px 20px;
}


  .loud {
      width:100%; display:flex; align-items:center; justify-content:flex-start;
  }

  .Testimonials {
    display:flex; flex-direction: column; min-height:300px; width:100%;
    margin-top:30px;
  }

  .Testimonials > div:first-child {

     border-radius:10px;
    width:100%; position:relative; overflow-x:hidden;

  }

  .Testimonials > div:last-child {
    width:100%; display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  }

  .TestimonialLeft {
    visibility:hidden;
    display:flex; align-items:center; justify-content:flex-start;
  }
  .TestimonialRight {
    display:flex; align-items:center; justify-content:flex-end;
  }

  .TestimonialMover {
    width:100%; height:100%; transition: all .2s;
    position:relative; left:0; top:0; display:-webkit-box;
  }

  .TestimonialMover > div {
      width:100%;
  }

  .stars {
      width:100%; display:flex; align-items:center; justify-content: center;
  }

  .TestimonialMover > div > div:last-child {
      width:100%; height:50px; font-size: 22px; font-weight: 900; text-align:center;
      display:flex; align-items:center; justify-content:center; margin-top:20px;
  }

  .TestimonialMover > div > div:first-child > div:first-child > h2 {font-size:20px;}
  .TestimonialMover > div > div:first-child > div:last-child > h3 {font-size:18px; text-align:center;}

  .size18 {font-size:18px;}
  .size20 {font-size:20px;}

  .faqMenu {width:100%;}
  .faq-item {border-bottom:1px solid #0f2f66; }
  .question {width:100%; height:50px; display:flex; align-items:center; justify-content: space-between;
padding:10px 0; margin:10px 0;}
  .question > div:first-child {font-size:18px; font-weight: 900;}
  .question > div:last-child {width:50px; height:100%; display:flex; align-items:center; justify-content: center; transition: all .2s;}
  .answer {
      width:100%; padding-bottom:20px; font-size:18px; color:white; 
      transition: all .2s; display:none; margin-bottom:10px;
  }

  .affordable {
      width:100%; display:flex; flex-direction: row; align-items:center; justify-content: center;
      height:75px; font-size:26px; color:var(--navy);
  }
  .affordable > div:first-child {margin-right:6px; display:flex; align-items:center; justify-content: center;}

  #map {

    width:100%;
    height:300px;
    position:relative;
    z-index:0;
    opacity:1;
    transition: all .25s;
    border-radius:10px;
    border:1px solid var(--navy);

}

.eddmapContainer {
  width:100%; height:300px; border-radius:6px;
  position:relative;
  border:1px solid var(--light-gray);
}

#eddmap {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius:6px;
}

.center {
  width:100%; display:flex; align-items:center; justify-content:center;
}

.breaker20 {
  width:100%; height:20px;
}

.zoneMap {
  width:100%;
}


  footer {
    background-color: var(--navy);
    color: white;
    padding: 2rem;
    font-family: 'Montserrat', sans-serif;
  }
  
  .footer-branding {
    margin-bottom: 2rem; 
    display:flex; flex-direction: column; align-items:center; justify-content:center;
  }
  
  .footer-branding p {
    max-width: 500px;
    margin: 0.5rem auto 0;
    padding-top:10px;
    font-size: 0.9rem; text-align:center;
  }
  
  .footer-links {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  
  .footer-links h4 {
    margin-bottom: 0.5rem;
  }
  
  .footer-links ul {
    list-style: none;
    padding: 0;
  }
  
  .footer-links li {
    margin: 0.5rem 0;
  }
  
  .footer-links a {
    color: var(--sky-blue);
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .footer-links a:hover {
    color: var(--primary-blue);
  }
  
  .footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid #005BAC;
    padding-top: 1rem;
    color: #005BAC;
  }

  .hamburgerMenu {
    width:calc(100% - 40px); padding:0 20px; height:calc(100% - 85px); background:white; 
    position:absolute; left:0; top:-100%; z-index:3; transform:translateY(0); transition: all .2s; 
}
.hamburgerMenu > div:first-child > div {
    width:100%; height:60px; text-align:left; 
    display:flex; align-items:center; justify-content:flex-start;
    font-size:18px; border-bottom:1px solid var(--medium-gray); font-weight: 700;
}

.letstalk {
    width:100%; height:50px;
    display:flex; flex-direction: row; align-items:center; justify-content:center;
    margin-top:8px;
    font-weight:900; border-radius:6px;
    background-color: #0056D2;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
}
.letstalk > div:first-child {
    width:40px; height:100%; display:flex; align-items:center; justify-content:center;
}
.letstalk > div:last-child {font-size:18px; font-weight:700;}

/* Pricing */
.subheading {
  font-size: 1.2rem;
  font-weight: 300;
}
.pricing-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 2rem;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-5px);
}
.card h2 {
  margin-top: 0;
  color: #0a3d62;
}
.price {
  font-size: 2rem;
  color: #27ae60;
  margin: 1rem 0;
}
.card ul {
  list-style: none;
  padding: 0;
}
.card ul li {
  margin: 0.5rem 0;
}
.btn {
  display: block;
  text-align: center;
  background-color: #0a3d62;
  color: white;
  padding: 0.75rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}
.btn:hover {
  background-color: #06507e;
}


.blueSpinner {
    width:15px;
    height:15px;
    border:3px solid transparent;
    border-top:3px solid var(--navy);
    border-radius:100%;
    animation: spin .5s infinite;
    opacity:1;
    position:absolute;
    z-index:0;
    visibility:hidden;
}
.spinner {
    width:15px;
    height:15px;
    border:3px solid transparent;
    border-top:3px solid #f7f7f7;
    border-radius:100%;
    animation: spin .5s infinite;
    opacity:1;
    position:absolute;
    z-index:0;
    visibility:hidden;
}

@keyframes spin {
    from {
        transform:rotate(0);
    }
    to {
        transform:rotate(359deg);
    }
}

  @media (max-width:855px) {

    .hamburger {
        width:40px; height:100%;
        display:flex; position:relative; display:flex; align-items:center; justify-content:center;}
    .hamburgerOpen {display:flex; position:absolute; left:0; top:0; width:100%; height:100%; align-items:center; justify-content:flex-end;}
    .hamburgerClose { display:none; position:absolute; left:0; top:0; width:100%; height:100%; align-items:center; justify-content:flex-end;}
    .navBar {display:none;}
    .navBar > div {
        font-size:18px; font-weight: 700; color:black;
    }

  }

.lesspadding {
  padding:0 20px 120px 20px !important;
}

.socialProof {
  width:100%; height:75px; 
  background:var(--navy);
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:white;
  font-size:22px; 
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:visible;
}
.socialProof > div:first-child {
  position:absolute; top:10px;
  z-index:0; width:150px; height:100px;
  opacity:.1;
}
.socialProof > div:last-child {
  position:absolute; z-index:1; top:55px;
}
.img-cover{
  position: relative;
  width: 100%;           /* or use aspect-ratio like above */
  overflow: hidden;
}
.img-cover img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* auto-resize like CSS background-size: cover */
  object-position: center;
}
.img-cover.ratio-16x9{ aspect-ratio: 16 / 9; min-height: auto; }

/* === Outside pulse (matches your ldxPulse style) === */

/* Apply to any div: class="pulse"  */
/* Change color via --pulse-rgb, size via --pulse-spread, speed via --pulse-speed */
.pulse{
  --pulse-rgb: 0,183,168;   /* teal (R,G,B) */
  --pulse-spread: 12px;     /* how far the glow expands */
  --pulse-speed: 1.1s;      /* pulse speed */
  position: relative;
}

.pulse::after{
  content:"";
  position: absolute;
  inset: 0;                       /* same size as the element */
  border-radius: inherit;         /* follows your shape */
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), .45);
  animation: ldxPulse var(--pulse-speed) ease-out infinite;
  z-index: -1;                    /* sits behind content */
}

/* Your style, generalized with variables */
@keyframes ldxPulse{
  0%   { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), .75); }
  100% { box-shadow: 0 0 0 var(--pulse-spread) rgba(var(--pulse-rgb), 0); }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pulse::after{ animation: none; opacity: .5; }
}

.smallTitle {
  width:100%; display:flex; justify-content:center;
  color:#fcfcfc; font-size:14px; z-index:2; font-style: italic;
  margin-top:15px; 
}

.dualRow {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:100%;
}

.textLeft {
  display:flex; flex-direction:column; justify-content:space-around; align-items:flex-start;
}

.textLeft > div {
  display:flex; flex-direction:row; width:100%; margin:20px 0;
  font-size:20px;
}

.textLeft > div > div:first-child {
  margin-right:10px; color:green; display:flex; align-items:center; justify-content:flex-start;
}
.textLeft > div > div:last-child {

}

@media (max-width:600px) {
.dualRow {
  display:flex; flex-direction:column; justify-content:space-between;
}
.mailboxImageLeft {
  width:100%; margin-top:40px;
}
.textLeft {
  display:flex; flex-direction:column; justify-content:space-around; align-items:flex-start;
}
}

/* Scalable background image for any div */

/* Fill the box (may crop): */
.bg-cover{
  /* set the image per element: style="--bg:url('/img/hero.jpg')" */
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep full image visible (won’t crop): */
.bg-contain{
  background-image: var(--bg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #0000; /* set a backdrop if you want */
}

/* Optional: lock aspect ratio so height auto-scales with width */
.bg-cover.ratio-16x9,
.bg-contain.ratio-16x9{ aspect-ratio: 16 / 9; }
.bg-cover.ratio-4x3,
.bg-contain.ratio-4x3{ aspect-ratio: 4 / 3; }

/* Optional: ensure visibility when there’s no content inside */
.bg-min-300{ min-height: 240px; max-width:400px; }

/* Optional: mobile image swap */
@media (max-width: 600px){
  .bg-cover, .bg-contain{
    background-image: var(--bg-mobile, var(--bg)); /* set --bg-mobile if needed */
  }
}

.svgmailbox {
  width: 100%;
  background: url('/assets/svgmailbox.svg') no-repeat center center;
  background-size: contain;     /* or 'cover' depending on effect */
}

  /* ============ THEME (your palette) ============ */

  /* ============ LAYOUT ============ */
/* Sync heights between panel and map */
:root { --map-h: 640px; }

.map-layout{
  display:flex; gap:16px; align-items:stretch;
  width:100%; max-width:1200px; margin:0 auto;
}

.map-view{
  flex:1 1 auto; height:var(--map-h); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);
}

.zip-panel{
  width:340px;               /* fixed sidebar so map stays visible */
  max-height:282px;     /* match map height */
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, var(--navy), #0d274f);
  color:#fff; border-radius:14px; padding:10px; box-shadow:0 6px 24px rgba(0,0,0,.35);
  min-height:0;              /* allow inner flex child to shrink */
}

.zip-panel__header{ display:flex; align-items:center; gap:10px; }
.zip-panel__header h3{ margin:0; font:600 16px/1.2 system-ui, sans-serif; letter-spacing:.2px; }

.zip-search{
  flex:1; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:#0f315f; color:#fff; padding:0 12px; outline:none; font-size:16px;
}
.zip-search::placeholder{ color:rgba(255,255,255,.6); }

.zip-list{
  margin:0; padding:0; list-style:none;
  flex:1 1 auto;                 /* take remaining vertical space */
  min-height:0;   
  height:calc(300px - 20px);               /* IMPORTANT for scrollable flex child */
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;   /* don’t scroll the page when list hits ends */
  border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04);
}

.zip-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; cursor:pointer; user-select:none;
  border-left:4px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .06s ease;
}
.zip-item + .zip-item{ border-top:1px solid rgba(255,255,255,.06); }
.zip-code{ font:700 16px/1 system-ui, sans-serif; letter-spacing:.3px; }
.zip-meta{ font:500 12px/1 system-ui, sans-serif; color:rgba(255,255,255,.75); }
.zip-item:hover{ background:rgba(255,255,255,.06); }
.zip-item:active{ transform:scale(.995); }
.zip-item.active{
  background:rgba(0,183,168,.14); border-left-color:var(--teal);
  box-shadow:inset 0 0 0 1px rgba(0,183,168,.35);
}
.chev{
  font-size:18px; line-height:1; color:rgba(255,255,255,.75);
  transform:translateX(0); transition:transform .15s ease, color .15s ease;
}
.zip-item:hover .chev{ transform:translateX(3px); color:#fff; }

.reset-btn{
  height:42px; min-height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,#17407c,#133566);
  color:#fff; font:600 14px/1 system-ui, sans-serif; cursor:pointer;
}
.reset-btn:hover{ filter:brightness(1.08); }
.reset-btn:active{ transform:translateY(1px); }

/* Mobile */
@media (max-width: 900px){
  :root { --map-h: 56vh; }        /* map takes ~half the screen */
  .map-layout{ flex-direction:column; }
  .zip-panel{ width:calc(100% - 20px); height:auto; }
  .map-view{ height:var(--map-h); }
  .zip-list{
    max-height:28vh;             /* show a few rows, then scroll */
  }
}