:root{
  --navy:#16253f;
  --navy-2:#21375e;
  --sfblue:#2D6CDF;
  --sfblue-2:#2458B8;
  --green:#2FA84F;
  --green-2:#278C42;
  --gold:#e8a020;
  --cream:#fbfaf6;
  --sand:#f4f0e6;
  --line:#e4dfd4;
  --text:#1f2430;
  --muted:#5d6572;
  --sfsoft-blue:#E8F0FE;
  --soft-green:#eaf7f1;
  --soft-navy:#eef3fb;
  --soft-red:#f9ecea;
  --radius:18px;
  --shadow:0 16px 40px rgba(14, 22, 40, .08);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(251,250,246,.9); border-bottom:1px solid rgba(228,223,212,.9);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:800; color:var(--navy); letter-spacing:.01em}
.brand-mark{
  width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--navy));
  display:grid;place-items:center;color:#fff;font-weight:900;font-size:1rem; box-shadow:var(--shadow)
}
.brand small{display:block;color:var(--muted);font-weight:600;font-size:.78rem}
.nav-links{display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap}

.nav-links a{color:var(--navy);font-weight:700;font-size:.80rem}

.nav-links a:not(.btn)::before{
  content:"•";
  color:var(--muted);
  margin-right:0.6rem;
}

.nav-links a:not(.btn):first-of-type::before{
  display:none;
}

.btn, button.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:.55rem;
  padding:.95rem 1.25rem; 
  border-radius:999px; 
  border:1px solid transparent;
  font-weight:800; 
  text-decoration:none; 
  cursor:pointer; 
  transition:.18s transform,.18s box-shadow,.18s background;
  /* color:var(--cream); */
}
.btn:hover{transform:translateY(-1px); text-decoration:none}

.btn-primary{background:var(--green); color:var(--cream); box-shadow:0 10px 30px rgba(29,158,117,.23)}
.btn-primary:hover{background:var(--green-2)}
.btn-primary-blue {
    background: var(--sfblue);
    color: var(--cream);
    box-shadow: 0 10px 30px rgba(29,158,117,.23)
}

    .btn-primary-blue:hover {
        background: var(--sfblue-2)
    }

.btn-secondary{background:#fff; color:var(--navy); border-color:var(--line)}
    .btn-secondary:hover {
        background: var(--sand);
        color: var(--navy);
    }

.btn-dark{background:var(--navy); color:#fff}
.btn-outline{border-color:var(--green); color:var(--green); background:transparent}
.btn-nav-cta {
    padding: .25rem .5rem;
    font-size: .88rem;
    color: var(--cream) !important;
}
.btn-nav-sign-in {
    padding: .25rem .5rem;
    font-size: .88rem;
    color: var(--cream) !important;
    margin: 0px 0px 0px; /* Top, Left/Right, Bottom */
}

.eyebrow{display:inline-flex; padding:.45rem .8rem; border-radius:999px; background:var(--sfsoft-blue); color:var(--sfblue); font-weight:800; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase}



.hero{padding:1.1rem 0 0.6rem; background:radial-gradient(circle at top left, #ffffff 0, #f7f5ef 50%, #f3efe4 100%)}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:2.2rem; align-items:center}
.hero-grid{align-items:stretch}

/* Mobile responsive: stack hero-grid and reorder */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-grid > div:first-child {
    order: 1;
  }
  .hero-grid > .video-screen {
    order: 2;
  }
}

.hero h1,.page-hero h1{font-size:clamp(2.3rem, 4.7vw, 4.45rem); line-height:1.04; margin:.8rem 0 1rem; letter-spacing:-.03em; color:var(--navy)}
.hero p.lead,.page-hero p.lead{font-size:1.12rem; color:var(--muted); max-width:62ch}
.hero-actions,.stack-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin:1.4rem 0 1rem}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    margin-top: 1rem;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem
}
.standard-card-spacing {
    margin-top: 1rem;
}
.trust-row-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    margin-top: 1rem;
    color: var(--cream);
    font-weight: 700;
    font-size: 0.9rem
}
@media (min-width:640px){.trust-row{flex-wrap:nowrap; white-space:nowrap}}
.hero-card,.panel,.feature-card,.quote-card,.pricing-card,.story-card,.article-card,.podcast-card,.faq-card,.cta-panel,.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-card{padding:1rem; overflow:hidden}



.video-card{background:linear-gradient(145deg, var(--navy), #28416c); color:#fff; padding:1.1rem; border-radius:24px}
.video-screen{aspect-ratio:16/10; border-radius:18px; background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.15); padding:1.3rem; display:flex; flex-direction:column; justify-content:space-between}
.video-screen{padding:1rem; height:100%;}
.video-container{border-radius:12px; overflow:hidden;}
.video-container{display:block;height:100%;}
.video-container img{border-radius:12px;height:100%;width:100%;object-fit:cover}
.video-container .video-embed{border-radius:12px; overflow:hidden;}
.video-top{display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.86rem; font-weight:700}

/* Make video labels readable on light page-hero backgrounds, but white when hero-blue is active */
body.hero-blue .video-top{ color:rgba(255,255,255,.75) }
body:not(.hero-blue) .page-hero .video-screen h3,
body:not(.hero-blue) .page-hero .video-screen p,
body:not(.hero-blue) .page-hero .video-top{ color:var(--navy) !important }
body.hero-blue .page-hero .video-screen h3,
body.hero-blue .page-hero .video-screen p,
body.hero-blue .page-hero .video-top{ color:rgba(255,255,255,.92) !important }
.play-btn{width:72px;height:72px;border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--navy); font-size:1.4rem; box-shadow:0 12px 30px rgba(0,0,0,.25)}
.logo-strip{padding:1rem 0 2.2rem}
.logo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:.85rem}
.logo-pill{padding:1rem; background:#fff; border:1px solid var(--line); border-radius:999px; text-align:center; font-weight:800; color:var(--navy)}


/* 
.page-hero{padding:1rem 0 0.6rem; background:linear-gradient(180deg, #21375e, #2D6CDF)} */
.page-hero{padding:1rem 0 0.6rem; background:linear-gradient(180deg, #f7f5ef, #fbfaf6)}

/* Support image-based hero backgrounds. Add one of the `bg-*` classes to the `.page-hero` element.
  Example: <section class="page-hero bg-cta17"> ... </section>
*/
.page-hero{position:relative; overflow:visible}
.page-hero > .container{position:relative; z-index:2}

/**************************************************************************/
/**************************************************************************/
/**************************************************************************/
/* CTA17: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-cta17{position:relative}
/* image sits in ::after so it can't be overridden by other background shorthand rules; overlay in ::before */
    .page-hero.bg-cta17::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: url('../img/bg/cta_bg_v2_6.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 120%;
        opacity: 1
    }
.page-hero.bg-cta17::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
/* overlay colors: lighter when hero-blue, subtle when not */
body.hero-blue .page-hero.bg-cta17::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-cta17::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
/* ensure content sits above layers */
.page-hero.bg-cta17 > .container{position:relative; z-index:2}

/* Ensure text color works above the image overlay: white when hero-blue, dark otherwise */
body.hero-blue .page-hero.bg-cta17 h1,
body.hero-blue .page-hero.bg-cta17 p,
body.hero-blue .page-hero.bg-cta17 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-cta17 h1,
body:not(.hero-blue) .page-hero.bg-cta17 p,
body:not(.hero-blue) .page-hero.bg-cta17 .eyebrow{color:var(--navy)}

/**************************************************************************/
/**************************************************************************/
/**************************************************************************/

/* CTA18: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-cta18{position:relative}
/* image sits in ::after so it can't be overridden by other background shorthand rules; overlay in ::before */
.page-hero.bg-cta18::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta18-bg1.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-cta18::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
/* overlay colors: lighter when hero-blue, subtle when not */
body.hero-blue .page-hero.bg-cta18::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-cta18::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
/* ensure content sits above layers */
.page-hero.bg-cta18 > .container{position:relative; z-index:2}

/* Ensure text color works above the image overlay: white when hero-blue, dark otherwise */
body.hero-blue .page-hero.bg-cta18 h1,
body.hero-blue .page-hero.bg-cta18 p,
body.hero-blue .page-hero.bg-cta18 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-cta18 h1,
body:not(.hero-blue) .page-hero.bg-cta18 p,
body:not(.hero-blue) .page-hero.bg-cta18 .eyebrow{color:var(--navy)}

/* Mobile responsiveness: stretch background to fill the entire hero area */
@media (max-width:920px){
  .page-hero.bg-cta18::after{background-size:100% 100%; background-position:center center}
}

/**************************************************************************/
/**************************************************************************/
/**************************************************************************/

/* BG-V2-1: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-1{position:relative}
.page-hero.bg-v2-1::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_1.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-1::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-1::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-1::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-1 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-1 h1,
body.hero-blue .page-hero.bg-v2-1 p,
body.hero-blue .page-hero.bg-v2-1 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-1 h1,
body:not(.hero-blue) .page-hero.bg-v2-1 p,
body:not(.hero-blue) .page-hero.bg-v2-1 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-1::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-2: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-2{position:relative}
.page-hero.bg-v2-2::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_2.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-2::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-2::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-2::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-2 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-2 h1,
body.hero-blue .page-hero.bg-v2-2 p,
body.hero-blue .page-hero.bg-v2-2 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-2 h1,
body:not(.hero-blue) .page-hero.bg-v2-2 p,
body:not(.hero-blue) .page-hero.bg-v2-2 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-2::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-3: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-3{position:relative}
.page-hero.bg-v2-3::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_3.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-3::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-3::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-3::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-3 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-3 h1,
body.hero-blue .page-hero.bg-v2-3 p,
body.hero-blue .page-hero.bg-v2-3 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-3 h1,
body:not(.hero-blue) .page-hero.bg-v2-3 p,
body:not(.hero-blue) .page-hero.bg-v2-3 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-3::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-4: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-4{position:relative}
.page-hero.bg-v2-4::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_4.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-4::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-4::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-4::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-4 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-4 h1,
body.hero-blue .page-hero.bg-v2-4 p,
body.hero-blue .page-hero.bg-v2-4 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-4 h1,
body:not(.hero-blue) .page-hero.bg-v2-4 p,
body:not(.hero-blue) .page-hero.bg-v2-4 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-4::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-5: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-5{position:relative}
.page-hero.bg-v2-5::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_5.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-5::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-5::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-5::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-5 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-5 h1,
body.hero-blue .page-hero.bg-v2-5 p,
body.hero-blue .page-hero.bg-v2-5 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-5 h1,
body:not(.hero-blue) .page-hero.bg-v2-5 p,
body:not(.hero-blue) .page-hero.bg-v2-5 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-5::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-6: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-6{position:relative}
.page-hero.bg-v2-6::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_6.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-6::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-6::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-6::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-6 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-6 h1,
body.hero-blue .page-hero.bg-v2-6 p,
body.hero-blue .page-hero.bg-v2-6 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-6 h1,
body:not(.hero-blue) .page-hero.bg-v2-6 p,
body:not(.hero-blue) .page-hero.bg-v2-6 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-6::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-7: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-7{position:relative}
.page-hero.bg-v2-7::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_7.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-7::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-7::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-7::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-7 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-7 h1,
body.hero-blue .page-hero.bg-v2-7 p,
body.hero-blue .page-hero.bg-v2-7 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-7 h1,
body:not(.hero-blue) .page-hero.bg-v2-7 p,
body:not(.hero-blue) .page-hero.bg-v2-7 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-7::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-8: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-8{position:relative}
.page-hero.bg-v2-8::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_8.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-8::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-8::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-8::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-8 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-8 h1,
body.hero-blue .page-hero.bg-v2-8 p,
body.hero-blue .page-hero.bg-v2-8 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-8 h1,
body:not(.hero-blue) .page-hero.bg-v2-8 p,
body:not(.hero-blue) .page-hero.bg-v2-8 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-8::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-9: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-9{position:relative}
.page-hero.bg-v2-9::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_9.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-9::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-9::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-9::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-9 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-9 h1,
body.hero-blue .page-hero.bg-v2-9 p,
body.hero-blue .page-hero.bg-v2-9 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-9 h1,
body:not(.hero-blue) .page-hero.bg-v2-9 p,
body:not(.hero-blue) .page-hero.bg-v2-9 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-9::after{background-size:100% 100%; background-position:center center}
}

/* BG-V2-10: full-bleed image anchored to bottom with optional color overlay when `body.hero-blue` is present */
.page-hero.bg-v2-10{position:relative}
.page-hero.bg-v2-10::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url('../img/bg/cta_bg_v2_10.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1}
.page-hero.bg-v2-10::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:1}
body.hero-blue .page-hero.bg-v2-10::before{background:linear-gradient(135deg, rgba(43,139,184,0.18), rgba(121,190,219,0.08))}
body:not(.hero-blue) .page-hero.bg-v2-10::before{background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.12))}
.page-hero.bg-v2-10 > .container{position:relative; z-index:2}
body.hero-blue .page-hero.bg-v2-10 h1,
body.hero-blue .page-hero.bg-v2-10 p,
body.hero-blue .page-hero.bg-v2-10 .eyebrow{color:#fff}
body:not(.hero-blue) .page-hero.bg-v2-10 h1,
body:not(.hero-blue) .page-hero.bg-v2-10 p,
body:not(.hero-blue) .page-hero.bg-v2-10 .eyebrow{color:var(--navy)}
@media (max-width:920px){
  .page-hero.bg-v2-10::after{background-size:100% 100%; background-position:center center}
}

/**************************************************************************/
/**************************************************************************/
/**************************************************************************/


/* Homepage and content pages: rebalance hero columns and make video fill the column */
.page-hero .hero-grid{grid-template-columns:1fr .95fr; gap:1.8rem; align-items:stretch}
.page-hero h1{font-size:clamp(2.1rem, 4.2vw, 3.6rem); line-height:1.02}
.page-hero .video-screen{aspect-ratio:unset; height:100%; padding:1rem; display:flex; flex-direction:column; justify-content:center}
.page-hero .video-container{max-width:none; height:100%}
.page-hero .video-container img, .page-hero .video-container iframe{width:100%; height:100%; object-fit:cover; display:block}



main section{padding:1rem 0}
.section-head{max-width:760px; margin-bottom:1.6rem}
.section-head h2{font-size:clamp(1.9rem, 3.2vw, 3rem); line-height:1.08; margin:.8rem 0; letter-spacing:-.03em; color:var(--navy)}
.section-head p{color:var(--muted); font-size:1.05rem}
.stats-grid,.feature-grid,.pricing-grid,.cards-3,.cards-2,.story-grid,.story-video-grid,.article-grid,.podcast-grid,.faq-grid,.footer-grid{
  display:grid; gap:1rem
}
.stats-grid{grid-template-columns:repeat(4,1fr)}
.feature-grid,.cards-3,.story-grid,.article-grid,.podcast-grid{grid-template-columns:repeat(3,1fr)}
.cards-2,.story-video-grid{grid-template-columns:repeat(2,1fr)}
.pricing-grid{grid-template-columns:repeat(4,1fr)}
.faq-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
.stat-card,.feature-card,.quote-card,.pricing-card,.story-card,.story-video-card,.article-card,.podcast-card,.faq-card,.contact-card{padding:1.25rem}
.stat-card{background:var(--soft-navy); border:1px solid #d7e2f6; border-radius:var(--radius)}
.stat-card strong{display:block; font-size:2rem; color:var(--navy); letter-spacing:-.03em}
.kicker{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:#72809a}
.problem-band{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.math-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:start}
.roi-table{width:100%; border-collapse:collapse; background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.roi-table th,.roi-table td{padding:1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.roi-table th{background:var(--navy); color:#fff; font-size:.92rem}
.roi-table tr:last-child td{border-bottom:none}
.roi-table td small{color:var(--muted)}
.verdict{padding:1.4rem; background:linear-gradient(135deg, var(--green), #15785a); color:#fff; border-radius:24px; box-shadow:var(--shadow)}
.verdict h3{margin:.1rem 0 .65rem; font-size:2rem; line-height:1.05}
.calc-card{padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow)}
.calc-grid{display:grid; gap:.85rem}
label{font-weight:700; color:var(--navy); font-size:.95rem; display:block; margin-bottom:.35rem}
input, textarea, select{
  width:100%; padding:.9rem 1rem; border-radius:14px; border:1px solid #d8d2c5; background:#fff; font:inherit; color:var(--text)
}
textarea{min-height:140px; resize:vertical}
.calc-result{background:var(--soft-green); border:1px solid #c9eadc; border-radius:18px; padding:1rem}
.demo-card{padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow)}
.demo-placeholder{aspect-ratio:16/8.6; border-radius:20px; background:linear-gradient(135deg, var(--sand), #ffffff); border:1px solid var(--line); display:grid; place-items:center; padding:1rem; text-align:center}
.demo-placeholder .play-btn{background:var(--green); color:#fff}
.feature-card h3,.quote-card h3,.pricing-card h3,.story-card h3,.story-video-card h3,.article-card h3,.podcast-card h3,.faq-card h3,.contact-card h3{margin:.35rem 0 .5rem; font-size:1.22rem; line-height:1.2; color:var(--navy)}
.feature-card p,.quote-card p,.pricing-card p,.story-card p,.story-video-card p,.article-card p,.podcast-card p,.faq-card p,.contact-card p{color:var(--muted)}
.story-video-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:visible; padding:0; display:flex; flex-direction:column}
.story-video-card .video-container{margin:0; border-radius:var(--radius) var(--radius) 0 0; height:auto; position:relative; overflow:hidden}
.story-video-card .video-container img{border-radius:var(--radius) var(--radius) 0 0; height:auto; width:100%; object-fit:contain; display:block}
.story-video-info{padding:1.25rem; flex-grow:1}
.story-video-info h3{margin:0 0 .5rem; font-size:1.35rem; font-weight:700}
.story-video-info p{margin:0; font-size:.95rem}
.before-after{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.before{background:var(--soft-red); border:1px solid #efcfcc}
.after{background:var(--soft-green); border:1px solid #c9eadc}
.quote-card blockquote{margin:0; font-size:1.05rem; color:var(--navy); font-weight:700}
.quote-card cite{display:block; margin-top:.8rem; color:var(--muted); font-style:normal}
.pricing-card{position:relative}
.pricing-card .price{font-size:2.5rem; line-height:1; color:var(--navy); font-weight:900; letter-spacing:-.04em}
.pricing-card .price small{font-size:1rem; color:var(--muted); font-weight:700}
.pricing-card ul, .feature-card ul, .contact-card ul{padding-left:1.1rem; color:var(--muted)}
.pricing-card-featured{background:var(--soft-green); border:1px solid #c9eadc}
.pricing-card .pricing-label{color:var(--green); font-weight:700; margin-top:0.25rem}
.band{background:linear-gradient(135deg, var(--navy), #243f6d); color:#fff; border-radius:28px; padding:1.5rem; box-shadow:var(--shadow)}
.band h2,.band h3{color:#fff; margin-top:0}
.band p,.band li{color:rgba(255,255,255,.82)}

.page-hero{padding:1rem 0 0.6rem; background:linear-gradient(180deg, #f7f5ef, #fbfaf6)}

.breadcrumb{font-size:.92rem; color:var(--muted); margin-bottom:.7rem}
.page-layout{display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,.9fr); gap:1.2rem; align-items:start}
.sticky-card{position:sticky; top:95px}
.list-clean{list-style:none; padding:0; margin:0}
.list-clean li{padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--muted)}
.list-clean li:last-child{border-bottom:none}
.cta-panel{padding:1.4rem; margin-top:1rem}
.site-footer{background:var(--navy); color:#fff; padding:3rem 0 1.7rem; margin-top:3rem}
.site-footer h4{margin:.15rem 0 1rem; font-size:1rem; color:#fff}
.site-footer a{color:rgba(255,255,255,.82)}
.site-footer p,.site-footer li{color:rgba(255,255,255,.72)}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.footer-bottom{padding-top:1.25rem; margin-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.badge-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .7rem; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:800; color:var(--navy); font-size:.82rem}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden-mobile{display:block}
.mobile-toggle{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.45rem .5rem;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:44px;
  height:44px;
  flex-shrink:0;
}
.burger-icon{display:flex;flex-direction:column;gap:5px;pointer-events:none;}
.burger-icon span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s;}
.close-icon{display:none;font-size:1.25rem;color:var(--navy);line-height:1;pointer-events:none;}
.mobile-toggle[aria-expanded="true"] .burger-icon{display:none;}
.mobile-toggle[aria-expanded="true"] .close-icon{display:block;}
.circle {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    border-radius: 50%;
    border-radius: 50%;
    border: solid 1px silver;
    padding: 0px;
}
@media (max-width: 1080px){
  .hero-grid,.math-grid,.page-layout,.footer-grid{grid-template-columns:1fr}
  .logo-grid,.stats-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.cards-3,.story-grid,.story-video-grid,.article-grid,.podcast-grid,.faq-grid{grid-template-columns:repeat(2,1fr)}
  .sticky-card{position:static}
}
@media (max-width: 900px){
  .nav-wrap{min-height:64px}
  .mobile-toggle{display:inline-flex}
  .nav-links{display:none; position:absolute; left:1rem; right:1rem; top:70px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1rem; box-shadow:var(--shadow); flex-direction:column; align-items:flex-start}
  .nav-links.open{display:flex}
  .hero, .page-hero{padding-top:0.8rem}
  .logo-grid,.stats-grid,.pricing-grid,.cards-2,.story-video-grid,.feature-grid,.cards-3,.story-grid,.article-grid,.podcast-grid,.faq-grid,.before-after{grid-template-columns:1fr}
  .btn{width:100%}
  .hero-actions .btn, .stack-actions .btn{width:auto}
  .hidden-mobile{display:none}
}

/* Page-specific full-bleed blue hero (apply by adding `hero-blue` to <body>) */
body.hero-blue .page-hero{
  /* softened blue gradient and reduced saturation */
  background: linear-gradient(135deg, #2b8bb8 0%, #79bedb 100%);
  color:#fff;
  /* reduce height so content pages (forms, lists) don't get dominated by hero */
  min-height: 28vh;
  display:flex;
  align-items:center;
  padding:2.5rem 0 2rem;
  position:relative;
  overflow:hidden;
}
/* Ensure hero content aligns with the page container (left) */
body.hero-blue .page-hero > .container{ text-align:left; color:#fff }
body.hero-blue .page-hero h1{color:#fff; margin-top:0; margin-bottom:.8rem}
body.hero-blue .page-hero p.lead{color:rgba(255,255,255,0.92); margin-bottom:0}
body.hero-blue .page-hero .eyebrow
{
  background:rgba(255,255,255,0.18); 
  color:#fff; 
  display:inline-block; 
  margin-bottom:.5rem;
}
@media (max-width:920px){
  body.hero-blue .page-hero{min-height:auto; padding-top:2rem; padding-bottom:1.5rem}
}