/* =========================================================
   IsizweVault — shared styles
   Palette: navy #0E1A4B, deep navy #0A1440, green #1E7A3D,
            light green #E8F4EC, ink #12162E, mist #F5F7FB,
            hairline #E3E7F0
   Type: 'Fraunces' (display, headings) + 'Inter' (body/UI)
   ========================================================= */

:root{
  --navy: #0E1A4B;
  --navy-deep: #0A1440;
  --navy-soft: #1B2C6B;
  --green: #1E7A3D;
  --green-deep: #145C2C;
  --green-light: #E8F4EC;
  --ink: #12162E;
  --ink-soft: #545B78;
  --mist: #F5F7FB;
  --mist-2: #EEF1F8;
  --hairline: #E3E7F0;
  --hero-img: url('../images/hero-default.jpg');
  --white: #FFFFFF;
  --amber: #B8860B;
  --amber-bg: #FBF1DD;
  --shadow-sm: 0 1px 2px rgba(14,26,75,0.06);
  --shadow-md: 0 8px 24px rgba(14,26,75,0.10);
  --shadow-lg: 0 24px 60px rgba(14,26,75,0.16);
  --radius: 14px;
  --radius-sm: 8px;
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1,h2,h3,h4{
  font-family: 'Fraunces', Georgia, serif;
  margin: 0 0 .5em 0;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em 0; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-light);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 18px rgba(30,122,61,0.28);
}
.btn-primary:hover{ background: var(--green-deep); box-shadow: 0 8px 22px rgba(20,92,44,0.34); }
.btn-outline{
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover{ background: var(--navy); color:#fff; }
.btn-ghost{
  background: transparent;
  color: var(--navy);
  border-color: var(--hairline);
}
.btn-ghost:hover{ border-color: var(--navy); }
.btn-sm{ padding: 9px 18px; font-size: 13.5px; }
.btn-block{ width:100%; }

/* =========== HEADER =========== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-family:'Fraunces',serif; font-weight:700; font-size:19px; color:var(--navy); letter-spacing:-0.01em; }
.brand-name span{ color: var(--green); }
.brand-tag{ font-size:10px; color: var(--ink-soft); letter-spacing:.02em; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:14.5px; font-weight:500; color: var(--ink); position:relative; padding: 4px 0; }
.nav-links a:hover{ color: var(--green-deep); }
.nav-links a.active{ color: var(--navy); font-weight:700; }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--green);
}
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; background:none; border:none; padding:6px;
}
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--navy); margin:5px 0; border-radius:2px; }

/* =========== HERO =========== */
.hero{
  padding: 76px 0 90px;
  background:
    radial-gradient(1100px 500px at 82% -10%, rgba(30,122,61,0.08), transparent 60%),
    var(--white);
  overflow: hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
}
.hero h1{
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hero h1 .accent{ color: var(--green); }
.hero-sub{ font-size: 17px; max-width: 480px; margin-bottom: 30px; }
.hero-actions{ display:flex; gap:14px; margin-bottom: 40px; flex-wrap:wrap; }
.hero-features{ display:flex; gap: 30px; flex-wrap:wrap; }
.hero-feature{ display:flex; align-items:center; gap:10px; font-size: 13.5px; font-weight:600; color: var(--navy); max-width:150px; }
.hero-feature .icon-badge{ width:34px; height:34px; }

/* Phone mock */
.hero-visual{ position:relative; }
.phone-wrap{ position:relative; max-width: 340px; margin: 0 auto; }
.phone{
  background: var(--navy-deep);
  border-radius: 38px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index:2;
}
.phone-screen{
  background: var(--white);
  border-radius: 26px;
  overflow:hidden;
  padding: 18px 16px 20px;
}
.phone-status{ display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--navy); margin-bottom:14px; }
.phone-hello{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.phone-hello .who{ font-size:13.5px; font-weight:600; color: var(--navy); }
.phone-avatar{ width:26px; height:26px; border-radius:50%; background: linear-gradient(135deg,#D9A066,#B97A4E); }
.phone-balance-card{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 16px; padding: 16px 18px; color:#fff; margin-bottom:14px;
}
.phone-balance-card .label{ font-size:11px; opacity:.75; margin-bottom:6px; }
.phone-balance-card .amount{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; margin-bottom:12px; }
.phone-runway{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.15); padding-top:10px; font-size:11px; }
.phone-runway b{ color: #7FE0A0; font-size:13px; }
.phone-premiums .ph-title{ display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.phone-premiums .ph-title span:last-child{ color: var(--green-deep); font-weight:600; }
.phone-row{ display:flex; align-items:center; justify-content:space-between; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.phone-row:last-child{ border-bottom:none; }
.phone-row .pr-left{ display:flex; align-items:center; gap:10px; }
.phone-row .pr-icon{ width:26px; height:26px; border-radius:8px; background: var(--green-light); display:flex; align-items:center; justify-content:center; color: var(--green-deep); }
.phone-row .pr-name{ font-size:12px; font-weight:600; color: var(--navy); }
.phone-row .pr-date{ font-size:10px; color: var(--ink-soft); }
.phone-row .pr-amt{ font-size:12px; font-weight:700; color: var(--navy); text-align:right; }
.phone-row .pr-status{ font-size:9px; color: var(--green-deep); text-align:right; }
.phone-tabbar{ display:flex; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid var(--hairline); }
.phone-tabbar .tab{ font-size:9px; color: var(--ink-soft); text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; }
.phone-tabbar .tab.mid{ background: var(--green); color:#fff; width:34px; height:34px; border-radius:50%; margin-top:-20px; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow: 0 6px 14px rgba(30,122,61,.4); }

.hero-badge-float{
  position:absolute; left:-30px; bottom:20px; z-index:3;
  background:#fff; border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--shadow-md); display:flex; align-items:center; gap:12px;
  max-width: 220px;
}
.hero-badge-float .check{ width:34px; height:34px; border-radius:50%; background: var(--green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-badge-float .txt{ font-size:12px; font-weight:700; color: var(--navy); line-height:1.3; }
.hero-visual::before{
  content:''; position:absolute; inset: 30px -20px auto auto; width:260px; height:260px;
  background: radial-gradient(circle, rgba(30,122,61,.14), transparent 70%);
  z-index:1;
}

/* =========== LOGO STRIP =========== */
.logos{ padding: 40px 0; background: var(--mist); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.logos .label{ font-size: 12.5px; font-weight:700; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; text-align:center; }
.logo-row{ display:flex; align-items:center; justify-content:center; gap: 46px; flex-wrap:wrap; }
.logo-row .lg{ font-family:'Fraunces',serif; font-weight:700; font-size:19px; color: var(--navy); opacity:.55; }

/* =========== SECTION shared =========== */
.section{ padding: 96px 0; }
.section-head{ max-width: 640px; margin: 0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.2vw, 40px); }
.section-head p{ font-size:16px; }
.section-alt{ background: var(--mist); }

/* =========== HOW IT WORKS =========== */
.steps{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position:relative;
}
.steps::before{
  content:''; position:absolute; top:26px; left:10%; right:10%; height:2px;
  background: repeating-linear-gradient(90deg, var(--hairline) 0 8px, transparent 8px 14px);
  z-index:0;
}
.step{ text-align:center; position:relative; z-index:1; }
.step-num{
  width:52px; height:52px; border-radius:50%; background:#fff; border:2px solid var(--green);
  color: var(--green-deep); font-weight:700; font-family:'Fraunces',serif; font-size:18px;
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px;
}
.step h4{ font-size:15px; margin-bottom:8px; }
.step p{ font-size: 13.5px; }

/* =========== PROTECTION RUNWAY panel =========== */
.runway-panel{
  background: #fff; border:1px solid var(--hairline); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
.runway-panel h4{ font-size:16px; margin-bottom: 4px; }
.runway-panel .sub{ font-size:13px; color:var(--ink-soft); margin-bottom:18px; }
.runway-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--hairline); font-size:14px; }
.runway-row:last-of-type{ border-bottom:none; }
.runway-row .rn-left{ display:flex; align-items:center; gap:10px; color: var(--navy); font-weight:600; }
.runway-row .rn-val{ font-weight:700; color: var(--navy); }
.runway-total{
  margin-top:16px; background: var(--navy); color:#fff; border-radius:10px;
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  font-weight:700;
}
.runway-total .n{ font-family:'Fraunces',serif; font-size:19px; }

.how-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap:44px; align-items:start; }

/* =========== BENEFITS =========== */
.benefits-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.benefit-card{
  background:#fff; border:1px solid var(--hairline); border-radius: var(--radius); padding: 30px;
}
.benefit-card.for-insurers{ background: var(--navy); color:#fff; }
.benefit-card h3{ font-size:17px; margin-bottom:18px; }
.benefit-card.for-insurers h3{ color:#fff; }
.benefit-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.benefit-item{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:600; color: var(--navy); }
.benefit-card.for-insurers .benefit-item{ color: #fff; }
.benefit-item .ic{ width:30px; height:30px; border-radius:9px; background: var(--green-light); color:var(--green-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.benefit-card.for-insurers .benefit-item .ic{ background: rgba(255,255,255,.12); color: #7FE0A0; }

/* =========== TRUST STRIP =========== */
.trust{
  background: #fff; border:1px solid var(--hairline); border-radius: var(--radius);
  padding: 34px 40px; display:flex; align-items:center; gap: 30px; box-shadow: var(--shadow-sm);
}
.trust-icon{ width:52px; height:52px; border-radius:14px; background: var(--green-light); color:var(--green-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-text h4{ font-size:16px; margin-bottom:4px; }
.trust-text p{ margin:0; font-size:13.5px; }
.trust-badges{ display:flex; gap: 30px; margin-left:auto; flex-wrap:wrap; }
.trust-badge{ text-align:center; font-size:11.5px; font-weight:700; color: var(--navy); display:flex; flex-direction:column; align-items:center; gap:8px; max-width:100px; }
.trust-badge .ic{ width:38px; height:38px; border-radius:50%; background: var(--mist); display:flex; align-items:center; justify-content:center; color: var(--green-deep); }

/* =========== CTA BAND =========== */
.cta-band{
  background: var(--navy); border-radius: 20px; padding: 46px 50px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  color:#fff; position:relative; overflow:hidden;
}
.cta-band::after{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(30,122,61,.35), transparent 70%);
}
.cta-band h3{ color:#fff; font-size: clamp(22px,2.6vw,30px); margin-bottom:6px; position:relative; }
.cta-band h3 .accent{ color:#7FE0A0; }
.cta-band p{ color: rgba(255,255,255,.7); margin:0; position:relative; }
.cta-actions{ display:flex; gap:14px; position:relative; flex-wrap:wrap; }

/* =========== FOOTER =========== */
.site-footer{ background: var(--mist); border-top:1px solid var(--hairline); padding: 30px 0; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-row .copy{ font-size:13px; color: var(--ink-soft); }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ font-size:13px; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--navy); }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color: var(--navy); }
.footer-social a:hover{ background: var(--navy); color:#fff; }

/* =========== BACK TO TOP =========== */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 200;
  width: 48px; height:48px; border-radius: 50%;
  background: var(--navy); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, visibility .25s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--green-deep); }

/* =========== Utility icon svg sizing =========== */
svg{ display:block; }

/* =========================================================
   RESPONSIVE — marketing site
   ========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; max-width: 320px; margin: 0 auto 20px; }
  .how-grid{ grid-template-columns: 1fr; }
  .benefits-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(3,1fr); row-gap: 40px; }
  .steps::before{ display:none; }
  .trust{ flex-direction:column; align-items:flex-start; }
  .trust-badges{ margin-left:0; }
}

@media (max-width: 760px){
  .nav-links{
    position: fixed; top: 68px; left:0; right:0; bottom:0;
    background:#fff; flex-direction:column; align-items:flex-start;
    padding: 26px 28px; gap: 22px; transform: translateX(100%);
    transition: transform .3s ease; overflow-y:auto;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-cta{ display: none; }
  .nav-links .mobile-cta{ display:flex; gap:12px; margin-top:10px; width:100%; }
  .nav-links .mobile-cta .btn{ flex:1; }
  .nav-toggle{ display:block; }
  .section{ padding: 64px 0; }
  .steps{ grid-template-columns: 1fr 1fr; }
  .benefit-list{ grid-template-columns: 1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-row{ flex-direction:column; align-items:flex-start; }
  .logo-row{ gap:26px; }
}

@media (max-width: 480px){
  .container{ padding: 0 20px; }
  .hero{ padding: 48px 0 60px; }
  .steps{ grid-template-columns: 1fr; }
  .hero-badge-float{ left: 0; }
}

/* =========================================================
   2026 landing-page refinement — hero supplied by client
   ========================================================= */
body, h1, h2, h3, h4, .brand-name, .logo-row .lg,
.phone-balance-card .amount, .step-num, .runway-total .n{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.site-header{
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(14,26,75,.06);
}
.nav{ padding:18px 0; }
.brand{ gap:12px; }
.brand-mark{ width:50px; height:50px; }
.brand-name{ font-size:25px; font-weight:800; letter-spacing:-.045em; }
.brand-tag{ font-size:9px; font-weight:600; color:#29324f; margin-top:4px; }
.nav-links{ gap:28px; }
.nav-links a{ font-size:13.5px; }

.hero{
  min-height:680px;
  padding:0;
  display:flex;
  align-items:center;
  position:relative;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 30%, rgba(255,255,255,.82) 44%, rgba(255,255,255,.10) 63%, rgba(255,255,255,0) 100%),
    var(--hero-img);
  background-size:100% auto;
  background-position:54% top;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:90px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.9));
  pointer-events:none;
}
.hero-grid{
  width:100%;
  display:block;
  position:relative;
  z-index:1;
}
.hero-copy{
  max-width:590px;
  padding:74px 0 62px;
}
.hero .eyebrow{
  background:#eef7f1;
  color:var(--green-deep);
  border:1px solid rgba(30,122,61,.13);
  letter-spacing:.08em;
}
.hero h1{
  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:800;
  color:#0a1230;
  margin-bottom:24px;
}
.hero h1 .accent{ color:var(--green); }
.hero-sub{
  max-width:535px;
  font-size:18px;
  line-height:1.7;
  color:#28314e;
  margin-bottom:32px;
}
.hero-actions{ margin-bottom:34px; }
.hero .btn{ min-height:50px; border-radius:8px; }
.hero-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:590px;
  gap:12px;
}
.hero-feature{
  max-width:none;
  min-height:72px;
  padding:12px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(14,26,75,.09);
  box-shadow:0 8px 28px rgba(14,26,75,.06);
  backdrop-filter:blur(8px);
  font-size:12.5px;
  line-height:1.3;
}
.hero-feature .icon-badge{ flex:0 0 34px; }

.logos{ padding:28px 0 34px; background:#fff; }
.logos .label{ color:var(--green-deep); }

.section-head h2, .cta-band h3{ font-weight:800; letter-spacing:-.035em; }
.benefit-card, .runway-panel, .trust{ box-shadow:0 10px 32px rgba(14,26,75,.045); }

@media (max-width: 1080px){
  .hero{
    min-height:650px;
    background-position:58% center;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 38%, rgba(255,255,255,.76) 55%, rgba(255,255,255,.08) 78%),
      var(--hero-img);
  }
  .hero-copy{ max-width:520px; }
  .hero h1{ font-size:52px; }
}

@media (max-width: 760px){
  .brand-mark{ width:42px; height:42px; }
  .brand-name{ font-size:21px; }
  .brand-tag{ display:none; }
  .hero{
    min-height:auto;
    padding-top:330px;
    background-size:auto 390px;
    background-position:68% top;
    background-color:#fff;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,.92) 76%, #fff 100%),
      var(--hero-img);
  }
  .hero::after{ display:none; }
  .hero-copy{ padding:38px 0 54px; max-width:none; }
  .hero h1{ font-size:clamp(38px,11vw,52px); }
  .hero-sub{ font-size:16px; }
  .hero-features{ grid-template-columns:1fr; max-width:none; }
  .hero-feature{ min-height:58px; }
}

@media (max-width: 480px){
  .nav{ padding:12px 0; }
  .brand-mark{ width:38px; height:38px; }
  .brand-name{ font-size:19px; }
  .hero{ padding-top:285px; background-size:auto 330px; background-position:66% top; }
  .hero .eyebrow{ font-size:10.5px; }
  .hero h1{ font-size:40px; }
  .hero-actions{ display:grid; grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; }
}

/* =========================================================
   Final landing-page match — approved hero composition
   ========================================================= */
/* The mobile CTA belongs only inside the collapsed mobile menu. */
.nav-links .mobile-cta{ display:none; }

.site-header .container,
.hero .container,
.logos .container{
  max-width:1450px;
  padding-left:42px;
  padding-right:42px;
}

.site-header .nav{
  min-height:92px;
  padding-top:14px;
  padding-bottom:14px;
}

.site-header .brand-mark{ width:52px; height:52px; }
.site-header .brand-name{ font-size:27px; }
.site-header .brand-tag{ font-size:9.5px; }
.site-header .nav-links{ gap:32px; }
.site-header .nav-cta{ gap:14px; }
.site-header .nav-cta .btn-sm{ padding:11px 20px; }

.hero{
  /* height intentionally left unset here — the final aspect-ratio-based
     sizing further down the file (search "aspect-ratio:1512/700") is what
     actually governs hero height; an explicit height here previously fought
     with it and squashed the hero's width. */
  padding:0;
  align-items:stretch;
  background-image:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 27%, rgba(255,255,255,.92) 38%, rgba(255,255,255,.42) 52%, rgba(255,255,255,.03) 70%, rgba(255,255,255,0) 100%),
    var(--hero-img);
  background-size:cover;
  background-position:56% center;
}
.hero::after{
  height:46px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.55));
}
.hero-grid{ height:100%; display:flex; align-items:center; }
.hero-copy{
  max-width:560px;
  padding:42px 0 38px;
}
.hero .eyebrow{
  margin-bottom:16px;
  padding:6px 14px;
  font-size:12px;
}
.hero h1{
  max-width:560px;
  font-size:clamp(38px,3.65vw,54px);
  line-height:1.04;
  margin-bottom:18px;
}
.hero-sub{
  max-width:535px;
  font-size:16px;
  line-height:1.62;
  margin-bottom:24px;
}
.hero-actions{
  gap:14px;
  margin-bottom:28px;
}
.hero .btn{
  min-height:48px;
  padding:12px 24px;
  font-size:14px;
}
.hero-features{
  max-width:540px;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.hero-feature{
  min-height:64px;
  padding:10px 6px;
  border:0;
  box-shadow:none;
  background:transparent;
  backdrop-filter:none;
  font-size:12px;
}
.hero-feature .icon-badge{ width:36px; height:36px; flex-basis:36px; }

/* Bring the trust strip closer to the hero, as in the approved design. */
.logos{ padding:20px 0 24px; }
.logos .container{
  display:flex;
  align-items:center;
  gap:44px;
  border:1px solid var(--hairline);
  border-radius:14px;
  padding-top:22px;
  padding-bottom:22px;
}
.logos .label{
  flex:0 0 185px;
  margin:0;
  text-align:left;
  text-transform:none;
  letter-spacing:0;
  line-height:1.35;
}
.logo-row{
  flex:1;
  justify-content:space-between;
  gap:26px;
}

@media (max-width:1100px){
  .site-header .container,
  .hero .container,
  .logos .container{ padding-left:28px; padding-right:28px; }
  .hero{
    height:560px;
    min-height:560px;
    background-position:60% center;
  }
  .hero-copy{ max-width:500px; }
  .hero h1{ font-size:46px; max-width:500px; }
  .hero-sub{ max-width:470px; font-size:15.5px; }
}

@media (max-width:760px){
  .nav-links .mobile-cta{ display:flex; }
  .site-header .container,
  .hero .container,
  .logos .container{ padding-left:20px; padding-right:20px; }
  .site-header .nav{ min-height:72px; }
  .hero{
    height:auto;
    min-height:auto;
    padding-top:300px;
    background-size:auto 355px;
    background-position:66% top;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.94) 78%, #fff 100%),
      var(--hero-img);
  }
  .hero-grid{ height:auto; display:block; }
  .hero-copy{ padding:28px 0 48px; }
  .hero h1{ font-size:clamp(36px,10vw,48px); }
  .hero-features{ grid-template-columns:1fr; gap:8px; }
  .hero-feature{ min-height:52px; }
  .logos .container{ display:block; }
  .logos .label{ margin-bottom:18px; text-align:center; }
}

/* 2026-08-22 visual alignment fixes */
.hero{
  min-height:575px;
  /* Fill the hero edge-to-edge without stretching the artwork. */
  background-size:cover;
  background-position:56% center;
  background-repeat:no-repeat;
}
.hero-copy{
  max-width:560px;
  padding:54px 0 44px;
}
.hero h1{
  font-size:clamp(38px,4.2vw,56px);
  line-height:1.03;
}
.hero-sub{
  font-size:16px;
  line-height:1.65;
  max-width:520px;
}
.hero-actions{ margin-bottom:28px; }
.hero-features{ max-width:540px; }

.logos{
  padding:14px 0;
  background:#fff;
}
.logo-strip-wrap{
  display:flex;
  align-items:center;
  gap:26px;
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:14px 22px;
}
.logos .label{
  flex:0 0 185px;
  margin:0;
  text-align:left;
  line-height:1.35;
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  color:var(--green-deep);
}
.logo-image-row{
  flex:1;
  display:block;
  overflow:hidden;
}
.insurer-logos-img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

@media (max-width:1080px){
  .hero{
    min-height:560px;
    background-size:cover;
    background-position:58% center;
  }
  .hero h1{ font-size:48px; }
}
@media (max-width:760px){
  .hero{
    min-height:auto;
    padding-top:300px;
    background-size:auto 340px;
    background-position:72% top;
  }
  .logo-strip-wrap{ display:block; padding:14px; }
  .logos .label{ margin-bottom:10px; text-align:center; }
}

/* Preserve the supplied hero artwork at full clarity. The source image already
   contains the white left-side blend, so no translucent overlay is needed. */
.hero{
  background-image:var(--hero-img);
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position:right center;
  image-rendering:auto;
}
.hero::after{ display:none; }

@media (max-width:760px){
  .hero{
    background-image:var(--hero-img);
    background-repeat:no-repeat;
    background-size:auto 340px;
    background-position:72% top;
  }
}

/* 2026-08-22 — centre hero subjects slightly without softening the phone UI */
.hero{
  background-image:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 27%, rgba(255,255,255,.92) 38%, rgba(255,255,255,.42) 52%, rgba(255,255,255,.03) 70%, rgba(255,255,255,0) 100%),
    var(--hero-img);
  background-size:auto 100%;
  background-position:right center;
}
@media (max-width:1080px){
  .hero{
    background-image:
      linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 31%, rgba(255,255,255,.90) 44%, rgba(255,255,255,.36) 61%, rgba(255,255,255,.02) 82%),
      var(--hero-img);
    background-size:auto 100%;
    background-position:right center;
  }
}
@media (max-width:760px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.94) 78%, #fff 100%),
      var(--hero-img);
    background-size:auto 340px;
    background-position:78% top;
  }
}

/* 2026-08-22 — final hero fix: use the original undistorted artwork and
   position it inward. Preserve aspect ratio; never stretch the family/phone. */
.hero{
  background-image:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 27%, rgba(255,255,255,.92) 38%, rgba(255,255,255,.40) 52%, rgba(255,255,255,.02) 70%, rgba(255,255,255,0) 100%),
    var(--hero-img);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, auto 100%;
  background-position:center, 78% center;
}
@media (max-width:1080px){
  .hero{
    background-size:100% 100%, auto 100%;
    background-position:center, 72% center;
  }
}
@media (max-width:760px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.94) 78%, #fff 100%),
      var(--hero-img);
    background-size:100% 100%, auto 340px;
    background-position:center, 70% top;
  }
}

/* 2026-08-22 — eliminate right-side gap while keeping hero artwork undistorted.
   Anchor the artwork to the right edge and scale proportionally; the slight
   oversize brings the phone/family inward without stretching the image. */
.hero{
  background-image:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 27%, rgba(255,255,255,.92) 38%, rgba(255,255,255,.40) 52%, rgba(255,255,255,.02) 70%, rgba(255,255,255,0) 100%),
    var(--hero-img);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, auto 112%;
  background-position:center center, right center;
  background-color:#fff;
}
@media (max-width:1080px){
  .hero{
    background-size:100% 100%, auto 118%;
    background-position:center center, right center;
  }
}
@media (max-width:760px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.94) 78%, #fff 100%),
      var(--hero-img);
    background-size:100% 100%, auto 350px;
    background-position:center center, right top;
  }
}


/* 2026-08-23 — final hero framing, matched to approved reference screenshot */
.hero{
  /* Height scales with width (instead of a fixed px height) so the
     cover-cropped photo keeps the SAME framing — full mountain peak and the
     whole phone mock — at every viewport width. A fixed height combined with
     width-based `cover` scaling was pushing the phone bottom out of frame on
     wide screens (e.g. 1728px laptops). */
  width:100%;
  aspect-ratio:1512/700;
  min-height:560px;
  max-height:820px;
  padding:0;
  background-color:#fff;
  background-image:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.995) 29%,rgba(255,255,255,.93) 39%,rgba(255,255,255,.48) 52%,rgba(255,255,255,.08) 65%,rgba(255,255,255,0) 78%),
    var(--hero-img);
  background-repeat:no-repeat,no-repeat;
  /* Cover the full hero so there is no right strip. */
  background-size:100% 100%,cover;
  /* Top-weighted crop keeps the full mountain peak, sky, and the whole phone
     mock visible at once, matching the approved reference composition. */
  background-position:center center,58% 37%;
  overflow:hidden;
}
.hero::after{display:none;}
.hero-grid{height:100%;display:flex;align-items:center;}
.hero-copy{padding:34px 0 30px;max-width:535px;}
.hero h1{font-size:clamp(38px,3.35vw,52px);max-width:535px;margin-bottom:16px;}
.hero-sub{font-size:15.5px;line-height:1.56;max-width:520px;margin-bottom:20px;}
.hero-actions{margin-bottom:20px;}
.hero-features{gap:12px;max-width:530px;}
.hero-feature{min-height:52px;padding:6px 2px;}

.logos{padding:10px 0 8px;background:#fff;}
.logo-strip-wrap{padding:12px 20px;}

/* Homepage quick-benefit row shown as four cards, matching the approved mockup. */
.quick-benefits{display:block;background:#fff;padding:8px 0 26px;}
.quick-benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.quick-benefit-card{border:1px solid var(--hairline);border-radius:14px;padding:20px 18px;display:flex;gap:14px;align-items:flex-start;background:#fff;box-shadow:0 8px 24px rgba(14,26,75,.035);}
.quick-benefit-icon{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#13964f,#087437);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:0 0 44px;}
.quick-benefit-card h3{font-size:14px;margin:2px 0 7px;color:var(--navy);}
.quick-benefit-card p{font-size:12.5px;line-height:1.55;margin:0;color:#33405f;}

@media (max-width:1100px){
  .hero{
    height:530px;
    min-height:530px;
    background-size:100% 100%,cover;
    background-position:center center,center 42%;
  }
  .quick-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .hero{
    height:auto;
    min-height:auto;
    padding-top:300px;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.95) 80%,#fff 100%),
      var(--hero-img);
    background-size:100% 100%,auto 350px;
    background-position:center top,68% top;
  }
  .hero-grid{height:auto;display:block;}
  .quick-benefits-grid{grid-template-columns:1fr;}
}

/* =========================================================
   2026-08-22 — responsive navigation + mobile hero fix
   ========================================================= */
@media (max-width: 1024px){
  .site-header{ position:sticky; top:0; z-index:1000; }
  .site-header .container{ padding-left:20px; padding-right:20px; }
  .site-header .nav{ min-height:78px; padding-top:10px; padding-bottom:10px; }
  .site-header .brand-mark{ width:46px; height:46px; }
  .site-header .brand-name{ font-size:23px; }
  .site-header .brand-tag{ display:none; }

  .nav-toggle{
    display:block;
    margin-left:auto;
    position:relative;
    z-index:1002;
    width:44px;
    height:44px;
    padding:8px;
    border-radius:8px;
  }
  .nav-toggle span{
    width:28px;
    height:2px;
    margin:6px auto;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .nav-cta{ display:none !important; }
  .nav-links{
    position:fixed;
    top:78px;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    max-height:calc(100vh - 78px);
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0 !important;
    padding:14px 20px 22px;
    background:#fff;
    border-top:1px solid var(--hairline);
    box-shadow:0 18px 36px rgba(14,26,75,.12);
    transform:translateY(-115%);
    opacity:0;
    visibility:hidden;
    transition:transform .25s ease, opacity .2s ease, visibility .2s;
    z-index:1001;
  }
  .nav-links.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  .nav-links > a{
    width:100%;
    padding:15px 6px;
    font-size:16px;
    border-bottom:1px solid #eef1f5;
  }
  .nav-links > a::after{ display:none; }
  .nav-links .mobile-cta{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:100%;
    margin-top:18px;
  }
  .nav-links .mobile-cta .btn{
    width:100%;
    min-height:48px;
    justify-content:center;
  }

  /* Do not overlay copy on top of the phone/family at tablet/mobile widths. */
  .hero{
    height:auto;
    min-height:0;
    padding-top:410px;
    background-image:
      linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 58%,rgba(255,255,255,.88) 82%,#fff 100%),
      var(--hero-img);
    background-repeat:no-repeat,no-repeat;
    background-size:100% 410px, auto 410px;
    background-position:center top, 67% top;
    background-color:#fff;
  }
  .hero-grid{ height:auto; display:block; }
  .hero-copy{
    max-width:680px;
    padding:22px 0 36px;
  }
  .hero h1{
    max-width:650px;
    font-size:clamp(42px,6.2vw,56px);
  }
  .hero-sub{ max-width:650px; }
  .hero-features{
    max-width:650px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .site-header .container,
  .hero .container,
  .logos .container{ padding-left:16px; padding-right:16px; }

  .hero{
    padding-top:390px;
    background-size:100% 390px, auto 390px;
    background-position:center top, 66% top;
  }
  .hero-copy{ padding:18px 0 34px; }
  .hero .eyebrow{ font-size:10.5px; padding:6px 12px; white-space:normal; }
  .hero h1{
    font-size:clamp(36px,9.8vw,48px);
    line-height:1.04;
  }
  .hero-sub{ font-size:16px; line-height:1.58; }
  .hero-actions{ display:grid; grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; }
  .hero-features{
    grid-template-columns:1fr;
    gap:6px;
  }
  .hero-feature{
    min-height:48px;
    padding:6px 0;
  }

  .logo-strip-wrap{ padding:14px 12px; }
  .logo-image-row{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .insurer-logos-img{ min-width:620px; width:620px; }
}

@media (max-width: 520px){
  .site-header .nav{ min-height:70px; }
  .nav-links{ top:70px; max-height:calc(100vh - 70px); }
  .site-header .brand-mark{ width:42px; height:42px; }
  .site-header .brand-name{ font-size:20px; }

  .hero{
    padding-top:320px;
    background-size:100% 320px, auto 320px;
    background-position:center top, 67% top;
  }
  .hero-copy{ padding-top:14px; }
  .hero h1{ font-size:clamp(34px,10.5vw,43px); }
  .hero-sub{ font-size:15.5px; }
  .logos .label{ text-align:left; }
}

body.menu-open{ overflow:hidden; }


/* =========================================================
   Mobile refinement — text-only hero + insurer logo slideshow
   ========================================================= */
.logo-slide-track{ width:100%; }
.logo-slide-track .insurer-logos-img + .insurer-logos-img{ display:none; }

@media (max-width:760px){
  /* Mobile hero is intentionally text-only: no family/phone background. */
  .hero{
    padding-top:0 !important;
    background-image:none !important;
    background:#fff !important;
  }
  .hero-grid{ min-height:0; }
  .hero-copy{ padding-top:42px; }

  /* Turn the insurer strip into an automatic, touch-friendly logo carousel. */
  .logos{ overflow:hidden; }
  .logo-strip-wrap{ display:block; overflow:hidden; }
  .logos .label{ margin-bottom:12px; }
  .logo-image-row{
    width:100%;
    overflow:hidden !important;
    touch-action:pan-y;
  }
  .logo-slide-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:isizweLogoSlide 18s linear infinite;
    will-change:transform;
  }
  .logo-slide-track .insurer-logos-img,
  .logo-slide-track .insurer-logos-img + .insurer-logos-img{
    display:block;
    flex:0 0 auto;
    width:620px !important;
    min-width:620px !important;
    max-width:none;
    padding-right:34px;
  }
  .logo-image-row:hover .logo-slide-track,
  .logo-image-row:focus-within .logo-slide-track{ animation-play-state:paused; }
}

@keyframes isizweLogoSlide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce){
  .logo-slide-track{ animation:none !important; }
}

/* =========================================================
   2026-08-22 — responsive hero visibility + all-screen logo carousel
   ========================================================= */

/* Continuous insurer-logo carousel on every screen size. */
.logos{ overflow:hidden; }
.logo-strip-wrap{ overflow:hidden; }
.logo-image-row{
  width:100%;
  overflow:hidden !important;
  flex:1 1 auto;
}
.logo-slide-track{
  display:flex !important;
  align-items:center;
  width:max-content !important;
  animation:isizweLogoSlide 24s linear infinite;
  will-change:transform;
}
.logo-slide-track .insurer-logos-img,
.logo-slide-track .insurer-logos-img + .insurer-logos-img{
  display:block !important;
  flex:0 0 auto;
  width:900px !important;
  min-width:900px !important;
  max-width:none !important;
  height:auto;
  padding-right:38px;
}
.logo-image-row:hover .logo-slide-track,
.logo-image-row:focus-within .logo-slide-track{
  animation-play-state:paused;
}

/* On tablet/smaller-laptop widths, use the clean text-only hero rather than
   showing a cropped family/phone image. Desktop artwork returns above 1180px. */
@media (max-width:1180px){
  .hero{
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    background-image:none !important;
    background:#fff !important;
  }
  .hero-grid{
    height:auto !important;
    min-height:0 !important;
    display:block !important;
  }
  .hero-copy{
    max-width:720px !important;
    padding:46px 0 44px !important;
  }
  .hero h1{ max-width:680px !important; }
  .hero-sub{ max-width:650px !important; }
}

@media (max-width:900px){
  .logo-slide-track .insurer-logos-img,
  .logo-slide-track .insurer-logos-img + .insurer-logos-img{
    width:760px !important;
    min-width:760px !important;
    padding-right:32px;
  }
}

@media (max-width:760px){
  .hero-copy{ padding:38px 0 34px !important; }
  .logo-slide-track .insurer-logos-img,
  .logo-slide-track .insurer-logos-img + .insurer-logos-img{
    width:620px !important;
    min-width:620px !important;
    padding-right:28px;
  }
}

@media (max-width:520px){
  .hero-copy{ padding:30px 0 30px !important; }
  .logo-slide-track .insurer-logos-img,
  .logo-slide-track .insurer-logos-img + .insurer-logos-img{
    width:560px !important;
    min-width:560px !important;
  }
}

/* ===== Refined trust/security section ===== */
.trust{
  background:linear-gradient(135deg,#071a45 0%,#0b2a55 62%,#0e4a3a 100%);
  border:0; color:#fff; padding:38px 42px; gap:36px; box-shadow:0 18px 50px rgba(8,28,68,.14);
}
.trust-lead{display:flex;align-items:center;gap:20px;min-width:0;flex:1 1 460px;}
.trust .trust-icon{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.1);color:#83e0a4;border:1px solid rgba(255,255,255,.14);}
.trust .trust-text h4{color:#fff;font-size:24px;line-height:1.15;margin:3px 0 8px;}
.trust .trust-text p{color:rgba(255,255,255,.76);font-size:14px;line-height:1.65;max-width:600px;}
.trust-kicker{font-size:11px;letter-spacing:.13em;font-weight:800;color:#83e0a4;}
.trust .trust-badges{margin-left:auto;gap:12px;flex:1 1 500px;justify-content:flex-end;}
.trust .trust-badge{max-width:none;min-width:150px;flex:1 1 150px;flex-direction:row;text-align:left;gap:10px;padding:13px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;}
.trust .trust-badge .ic{width:36px;height:36px;min-width:36px;background:rgba(127,224,160,.13);color:#83e0a4;font-size:15px;}
.trust .trust-badge span:last-child{display:flex;flex-direction:column;gap:2px;}
.trust .trust-badge strong{font-size:12px;color:#fff;line-height:1.2;}
.trust .trust-badge small{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.62);line-height:1.25;}

/* ===== Refined footer ===== */
.site-footer{background:#061638;color:#fff;border-top:0;padding:48px 0 0;}
.footer-main{display:grid;grid-template-columns:minmax(280px,1.8fr) repeat(3,minmax(130px,.7fr));gap:46px;padding-bottom:38px;}
.footer-brand-name{font-size:25px;font-weight:850;letter-spacing:-.035em;color:#fff;margin-bottom:8px;}
.footer-brand-name span{color:#56bd76;}
.footer-brand p{margin:0 0 12px;color:#fff;font-weight:650;font-size:14px;}
.footer-note{display:block;color:rgba(255,255,255,.58);font-size:12.5px;line-height:1.55;max-width:360px;}
.footer-nav-group{display:flex;flex-direction:column;gap:10px;}
.footer-nav-group strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7fe0a0;margin-bottom:4px;}
.footer-nav-group a{font-size:13px;color:rgba(255,255,255,.7);}
.footer-nav-group a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0 22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(255,255,255,.48);font-size:11.5px;}

/* Composite logo image no longer includes the non-logo '...and more' label. */
.logo-slide-track .insurer-logos-img,
.logo-slide-track .insurer-logos-img + .insurer-logos-img{width:790px !important;min-width:790px !important;}

@media(max-width:900px){
  .trust{padding:30px 26px;}
  .trust .trust-badges{width:100%;justify-content:flex-start;}
  .footer-main{grid-template-columns:1.5fr 1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
  .logo-slide-track .insurer-logos-img,.logo-slide-track .insurer-logos-img + .insurer-logos-img{width:690px !important;min-width:690px !important;}
}
@media(max-width:600px){
  .trust{padding:26px 20px;}
  .trust-lead{align-items:flex-start;}
  .trust .trust-icon{width:52px;height:52px;min-width:52px;}
  .trust .trust-text h4{font-size:20px;}
  .trust .trust-badge{flex-basis:100%;}
  .footer-main{grid-template-columns:1fr 1fr;gap:30px 24px;}
  .footer-brand{grid-column:1/-1;}
  .footer-bottom{flex-direction:column;gap:6px;}
  .logo-slide-track .insurer-logos-img,.logo-slide-track .insurer-logos-img + .insurer-logos-img{width:570px !important;min-width:570px !important;}
}


/* ===== Authenticated header account menu ===== */
.user-menu-wrap{ position:relative; margin-left:12px; }
.user-menu-trigger{ display:flex; align-items:center; gap:9px; border:0; background:transparent; color:var(--navy); padding:6px 4px; font-weight:700; font-size:13.5px; }
.user-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--green-light); background:var(--green-light); }
.user-dropdown{ position:absolute; top:calc(100% + 10px); right:0; min-width:190px; padding:8px; background:#fff; border:1px solid var(--hairline); border-radius:12px; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(-5px); transition:.18s ease; z-index:250; }
.user-dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); }
.user-dropdown a,.user-dropdown button{ display:block; width:100%; padding:10px 12px; border:0; background:transparent; border-radius:8px; text-align:left; font:inherit; font-size:13.5px; color:var(--ink); }
.user-dropdown a:hover,.user-dropdown button:hover{ background:var(--mist); color:var(--green-deep); }
.user-dropdown .header-logout{ border-top:1px solid var(--hairline); border-radius:0 0 8px 8px; margin-top:5px; padding-top:11px; }
.mobile-user-menu{ width:100%; border-top:1px solid var(--hairline); padding-top:18px; }
.mobile-user-summary{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.mobile-user-menu a,.mobile-user-menu button{ width:100%; display:block; padding:11px 0; border:0; background:none; text-align:left; color:var(--navy); font-size:14px; font-weight:600; }

/* ===== Full-width call to action ===== */
.cta-section{ width:100%; background:var(--green); margin:0; padding:0; }
.cta-section .container{ max-width:var(--container); }
.cta-section .cta-band{ width:100%; border-radius:0; padding:54px 0; background:transparent; }
.cta-section .cta-band::after{ background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%); }
.cta-section .cta-band h3 .accent{ color:#fff; }
.cta-section + .site-footer{ margin-top:0; }
.site-footer{ margin-top:0; }

/* ===== About page ===== */
.about-hero{ padding:92px 0 70px; background:linear-gradient(180deg,var(--green-light),#fff); text-align:center; }
.about-hero .container{ max-width:850px; }
.about-hero h1{ font-size:clamp(36px,5vw,58px); margin-bottom:18px; }
.about-hero p{ font-size:18px; max-width:720px; margin:0 auto; }
.about-content{ padding:78px 0; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.about-card{ border:1px solid var(--hairline); border-radius:16px; padding:32px; background:#fff; box-shadow:var(--shadow-sm); }
.about-card h2{ font-size:24px; }
.about-trust{ margin-top:42px; }
@media(max-width:760px){
  .about-grid{ grid-template-columns:1fr; }
  .user-menu-wrap{ display:none !important; }
  .cta-section .cta-band{ padding:42px 0; }
}
.cta-section .btn-primary{ background:#fff; color:var(--green-deep); box-shadow:none; }
.cta-section .btn-primary:hover{ background:var(--green-light); color:var(--green-deep); }


/* 2026-08-23 — About page dashboard showcase */
.about-dashboard-showcase{
  margin:48px 0 8px;
  padding:34px;
  border:1px solid var(--hairline);
  border-radius:20px;
  background:linear-gradient(180deg,#f7faff 0%,#fff 100%);
  box-shadow:var(--shadow-sm);
}
.about-dashboard-copy{max-width:760px;margin:0 auto 28px;text-align:center;}
.about-dashboard-copy h2{font-size:clamp(28px,3.2vw,40px);margin:8px 0 14px;}
.about-dashboard-copy p{font-size:16px;line-height:1.7;max-width:720px;margin:0 auto 22px;color:#52607b;}
.about-dashboard-frame{overflow:hidden;border-radius:14px;border:1px solid #dbe4f1;background:#fff;box-shadow:0 18px 50px rgba(14,26,75,.10);}
.about-dashboard-frame img{display:block;width:100%;height:auto;}
@media (max-width:760px){
  .about-dashboard-showcase{margin-top:34px;padding:20px 14px;}
  .about-dashboard-copy{text-align:left;}
  .about-dashboard-copy p{font-size:14.5px;}
  .about-dashboard-frame{border-radius:10px;overflow-x:auto;}
  .about-dashboard-frame img{width:980px;max-width:none;}
}


/* ===== 2026-08-23 header/account-menu fixes ===== */
.auth-guest-actions[hidden],
.auth-user-menu[hidden]{display:none !important;}

/* Keep the signed-in account control anchored at the far right and the menu directly below it. */
.user-menu-wrap{margin-left:auto;position:relative;flex:0 0 auto;}
.user-menu-trigger{cursor:pointer;white-space:nowrap;border:1px solid transparent;border-radius:10px;padding:7px 9px;}
.user-menu-trigger:hover,.user-menu-trigger[aria-expanded="true"]{background:#f7f9fc;border-color:var(--hairline);}
.user-dropdown{top:100%;right:0;margin-top:8px;min-width:220px;}
/* Invisible hover/click bridge removes the dead gap between trigger and menu. */
.user-dropdown::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}

/* The About screenshot intentionally excludes the dashboard's left navigation sidebar. */
.about-dashboard-frame img{width:100%;max-width:100%;height:auto;object-fit:contain;}
@media(max-width:760px){
  .about-dashboard-frame{overflow-x:auto;}
  .about-dashboard-frame img{width:820px;max-width:none;}
}

/* ===== 2026-08-23 latest About/header design ===== */
/* Desktop has one account control only. The mobile account block lives inside the slide-out nav. */
.mobile-user-menu{display:none !important;}
.header-open-vault{margin-left:auto;white-space:nowrap;border-color:var(--green);color:var(--green-deep);background:#fff;}
.header-open-vault:hover{background:var(--green-light);border-color:var(--green-deep);}
.site-header .nav{gap:22px;}

/* About hero: copy left, human/family visual right, matching the supplied reference. */
.about-hero{padding:0;background:linear-gradient(90deg,#f4fbf7 0%,#f8fcfa 48%,#eef8f2 100%);text-align:left;overflow:hidden;}
.about-hero .container{max-width:var(--container);}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);align-items:stretch;min-height:355px;}
.about-hero-copy{padding:64px 20px 60px 0;align-self:center;position:relative;z-index:2;}
.about-hero-copy .eyebrow{margin-bottom:18px;}
.about-hero h1{font-size:clamp(38px,4.1vw,56px);line-height:1.08;max-width:650px;margin:0 0 18px;letter-spacing:-.025em;}
.about-hero p{font-size:16px;line-height:1.75;max-width:570px;margin:0;color:#42516d;}
.about-hero-visual{min-height:355px;background-image:linear-gradient(90deg,#f7fcf9 0%,rgba(247,252,249,.12) 28%,rgba(247,252,249,0) 45%),var(--hero-img);background-repeat:no-repeat;background-size:auto 150%;background-position:72% 48%;}

/* The Vault section is a true two-column presentation: copy at left, product screenshot at right. */
.about-dashboard-showcase{display:grid;grid-template-columns:minmax(270px,.36fr) minmax(0,.64fr);gap:28px;align-items:center;margin:48px 0 8px;padding:22px;border:1px solid var(--hairline);border-radius:20px;background:linear-gradient(180deg,#fbfdfc 0%,#fff 100%);box-shadow:var(--shadow-sm);}
.about-dashboard-copy{max-width:none;margin:0;padding:28px 12px 28px 10px;text-align:left;}
.about-dashboard-copy h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin:16px 0 18px;}
.about-dashboard-copy p{font-size:15px;line-height:1.8;max-width:430px;margin:0 0 28px;color:#52607b;}
.about-dashboard-copy .btn{margin-top:4px;}
.about-dashboard-frame{align-self:stretch;display:flex;align-items:center;overflow:hidden;border-radius:14px;border:1px solid #dbe4f1;background:#fff;box-shadow:0 16px 42px rgba(14,26,75,.09);}
.about-dashboard-frame img{display:block;width:100%;height:auto;object-fit:contain;}

@media(max-width:1024px){
  .header-open-vault{display:none !important;}
  .mobile-user-menu.auth-user-menu:not([hidden]){display:block !important;}
  .site-header .nav-links{margin-left:0;}
  .about-hero-grid{grid-template-columns:1fr 1fr;min-height:330px;}
  .about-hero-copy{padding:50px 22px 48px 0;}
  .about-hero-visual{min-height:330px;background-size:auto 135%;background-position:72% 48%;}
  .about-dashboard-showcase{grid-template-columns:1fr;gap:18px;}
  .about-dashboard-copy{padding:18px 10px 4px;}
  .about-dashboard-copy p{max-width:650px;}
}
@media(max-width:760px){
  .about-hero-grid{display:block;min-height:0;}
  .about-hero-copy{padding:46px 0 30px;}
  .about-hero h1{font-size:36px;}
  .about-hero-visual{min-height:260px;background-size:auto 120%;background-position:69% 47%;}
  .about-dashboard-showcase{padding:14px;margin-top:30px;}
  .about-dashboard-copy{text-align:left;padding:16px 8px 6px;}
  .about-dashboard-frame{overflow-x:auto;}
  .about-dashboard-frame img{width:820px;max-width:none;}
}

/* 2026-08-23: pull desktop nav links in closer to the logo, keep CTAs pinned right */
@media (min-width: 901px) {
  .site-header .nav {
    justify-content: flex-start;
  }

  .site-header .nav-links {
    margin-left: clamp(40px, 4vw, 64px);
  }

  .site-header .nav-cta,
  .site-header .user-menu-wrap {
    margin-left: auto;
  }
}


/* 2026-08-24: configurable full-width About Us hero background */
.about-hero{
  background-image:var(--about-hero-bg, linear-gradient(90deg,#f4fbf7 0%,#f8fcfa 48%,#eef8f2 100%));
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.about-hero-grid{position:relative;}
.about-hero-copy{position:relative;z-index:2;}

/* Uploaded About hero artwork is desktop/tablet only. Mobile always falls back to the clean brand gradient. */
@media(max-width:760px){
  .about-hero{
    background-image:linear-gradient(180deg,#f4fbf7 0%,#f8fcfa 100%) !important;
    background-size:auto;
    background-position:center;
  }
}


/* 2026-08-24: reduce homepage hero height on desktop while preserving mobile layout */
@media (min-width: 901px) {
  .hero {
    aspect-ratio: 1512 / 610;
    min-height: 500px;
    max-height: 680px;
  }

  .hero-copy {
    padding-top: 28px !important;
    padding-bottom: 26px !important;
  }
}

/* 2026-08-25: public account balance and For Business page */
.user-menu-trigger .user-menu-balance{
  font-size:11px;
  font-weight:800;
  color:var(--green-deep);
  padding-left:8px;
  margin-left:2px;
  border-left:1px solid var(--hairline);
  white-space:nowrap;
}
.mobile-user-summary{flex-wrap:wrap}
.mobile-user-balance{font-size:11px;font-weight:800;color:var(--green-deep);margin-left:auto}

.business-hero{background:linear-gradient(135deg,#f1f8f4 0%,#f8fbff 100%);padding:88px 0 80px;border-bottom:1px solid var(--hairline)}
.business-hero-copy{max-width:820px;margin:0 auto;text-align:center}
.business-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.03;letter-spacing:-.045em;margin:12px 0 22px}
.business-hero p{font-size:18px;line-height:1.7;color:#39435d;max-width:760px;margin:0 auto 28px}
.business-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.business-section{padding:78px 0}
.business-intro{text-align:center;max-width:760px;margin:0 auto 42px}
.business-intro h2{font-size:34px;margin-bottom:12px}
.business-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.business-card{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm)}
.business-card .business-icon{width:46px;height:46px;border-radius:12px;background:var(--green-light);color:var(--green-deep);display:grid;place-items:center;font-weight:800;margin-bottom:17px}
.business-card h3{font-size:19px;margin-bottom:8px}.business-card p{color:var(--ink-soft);line-height:1.65;margin:0}
.business-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:34px}
.business-step{background:#f8fafc;border:1px solid var(--hairline);border-radius:14px;padding:21px}
.business-step b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;margin-bottom:12px}
.business-step h4{font-size:15px;margin-bottom:6px}.business-step p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:0}
.business-band{background:var(--navy);color:#fff;padding:62px 0}.business-band-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.business-band h2{color:#fff;font-size:30px;margin:0 0 7px}.business-band p{color:rgba(255,255,255,.72);margin:0;max-width:650px}
@media(max-width:900px){.business-grid{grid-template-columns:1fr}.business-flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.business-flow{grid-template-columns:1fr}.business-hero{padding:62px 0}}