:root{--black:#111111;--white:#FFFFFF;--off-white:#F5F5F2;--green:#A8FF3E;--charcoal:#2E2E2B;--border:#DDDDD8;--alert:#D63F2F}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:"Barlow",sans-serif;font-size:18px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.skip{position:absolute;top:-100px;left:0;background:var(--black);color:var(--white);padding:12px 20px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;z-index:1000;text-decoration:none}
.skip:focus{top:0}

/* ── NAV ── */
body > nav,.wp-site-blocks > nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:14px 48px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.nav-logo{display:inline-block;text-decoration:none}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-item{position:relative}
.nav-link{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;padding:8px 0;display:inline-flex;align-items:center;gap:4px;transition:color .2s}
.nav-link:hover{color:var(--black)}
.nav-link .caret{font-size:9px;opacity:.6;transition:transform .2s}
.nav-item:hover .nav-link .caret,.nav-item:focus-within .nav-link .caret{transform:rotate(180deg)}
.nav-drop{position:absolute;top:100%;left:-16px;background:var(--white);border:1px solid var(--border);min-width:240px;padding:12px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop a{display:block;padding:10px 24px;font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--charcoal);text-decoration:none;transition:background .15s,color .15s}
.nav-drop a:hover{background:var(--off-white);color:var(--black)}
.nav-drop a.ext::after{content:" ↗︎";font-size:10px;opacity:.5;letter-spacing:0}
.nav-cta{background:var(--black);color:var(--white);padding:13px 28px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all .2s}
.nav-cta:hover{background:var(--green);color:var(--black)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--charcoal)}
.nav-toggle svg{width:24px;height:24px}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--white);z-index:300;padding:80px 32px 40px;overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-close{position:absolute;top:18px;right:24px;background:none;border:none;cursor:pointer;padding:8px;color:var(--charcoal)}
.mobile-close svg{width:28px;height:28px}
.mobile-group{margin-bottom:32px}
.mobile-group-title{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--charcoal);opacity:.6;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.mobile-group a{display:block;padding:10px 0;font-size:17px;font-weight:600;color:var(--black);text-decoration:none}
.mobile-cta-wrap{margin-top:24px;padding-top:24px;border-top:2px solid var(--black)}
.mobile-cta{display:block;background:var(--black);color:var(--white);padding:18px 24px;text-align:center;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none}

/* ── BUTTONS ── */
.btn-p{background:var(--black);color:var(--white);padding:18px 48px;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;display:inline-block;transition:all .2s;border:none;cursor:pointer;font-family:inherit}
.btn-p:hover{background:var(--green);color:var(--black)}
.btn-s{border:2px solid var(--black);color:var(--black);padding:16px 36px;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;display:inline-block;transition:all .2s;background:transparent;cursor:pointer;font-family:inherit}
.btn-s:hover{background:var(--black);color:var(--white)}

/* ── COMMON TYPE ── */
.eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--charcoal);margin-bottom:16px;display:block}
.section-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(36px,5.5vw,80px);line-height:.93;margin-bottom:24px;color:var(--black)}
.section-body{font-size:18px;color:var(--charcoal);line-height:1.7;margin-bottom:32px}

/* ── HERO ── */
.hero{padding:88px 56px 80px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.hero-badge{display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}
.hero-tag{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;background:var(--green);color:var(--black);padding:6px 14px}
.hero-loc{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--charcoal)}
.hero h1{font-family:"Bebas Neue",sans-serif;font-size:clamp(48px,9vw,130px);line-height:.88;letter-spacing:1px;margin-bottom:28px;color:var(--black)}
.hero h1 em{font-style:normal;background:var(--green);padding:0 14px;display:inline-block}
.hero-sub{font-size:19px;color:var(--charcoal);line-height:1.6;margin-bottom:36px;max-width:520px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.hero-fine{font-size:13px;color:var(--charcoal);line-height:1.5;opacity:.85}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.stat{background:var(--off-white);padding:36px 32px;transition:background .2s}
.stat:hover{background:var(--green)}
.stat-num{font-family:"Bebas Neue",sans-serif;font-size:clamp(56px,5vw,80px);line-height:1;color:var(--black);display:block;margin-bottom:10px;letter-spacing:.5px}
.stat-lbl{font-size:15px;font-weight:700;color:var(--black);margin-bottom:6px;letter-spacing:.3px}
.stat-desc{font-size:14px;color:var(--charcoal);line-height:1.5}

/* ── MARQUEE ── */
.mq-wrap{background:var(--black);overflow:hidden;padding:16px 0}
.mq-track{display:flex;width:max-content;will-change:transform;animation:mq 32s linear infinite}
.mq-item{font-family:"Bebas Neue",sans-serif;font-size:18px;letter-spacing:3px;color:var(--white);padding:0 36px;flex-shrink:0}
.mq-g{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin:0 36px 0 33px;font-size:0;line-height:0;color:transparent;position:relative;top:-1.5px}
.mq-item{display:inline-flex;align-items:center;padding:0}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── FEE MATH (the differentiator) ── */
.fee-math{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}
.fee-left{background:var(--black);padding:80px 56px;color:var(--white)}
.fee-left .eyebrow{color:rgba(255,255,255,.55)}
.fee-left h2{font-family:"Bebas Neue",sans-serif;font-size:clamp(40px,5.5vw,80px);line-height:.93;margin-bottom:28px;color:var(--white)}
.fee-left h2 span{background:var(--green);color:var(--black);padding:0 12px;display:inline-block}
.fee-left p{font-size:17px;color:rgba(255,255,255,.78);line-height:1.65;margin-bottom:32px;max-width:480px}
.fee-source{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.5px;font-style:italic;margin-top:24px}

.fee-table{background:var(--off-white);padding:0;display:flex;flex-direction:column}
.fee-row{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:32px 48px;border-bottom:1px solid var(--border);transition:background .2s;flex:1 0 auto}
.fee-row:last-child{border-bottom:none}
.fee-row:hover{background:var(--green)}
.fee-amount{font-family:"Bebas Neue",sans-serif;font-size:72px;line-height:1;color:var(--black);min-width:120px}
.fee-detail{display:flex;flex-direction:column;gap:6px}
.fee-name{font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--black)}
.fee-compare{font-size:14px;color:var(--charcoal);line-height:1.5}
.fee-compare strong{color:var(--black);font-weight:700}

/* ── PRODUCTS ── */
.products{padding:80px 56px;border-bottom:1px solid var(--border)}
.products-header{max-width:720px;margin-bottom:48px}
.product-group{margin-bottom:64px}
.product-group:last-child{margin-bottom:0}
.product-group-label{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--charcoal);margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid var(--black);display:flex;justify-content:space-between;align-items:baseline}
.product-group-label .count{font-size:12px;color:#666663;letter-spacing:2px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.pcard{background:var(--white);padding:36px 28px;text-decoration:none;color:var(--black);display:flex;flex-direction:column;justify-content:space-between;min-height:240px;transition:background .2s;position:relative}
.pcard:hover{background:var(--green)}
.pcard:hover .pc-arrow{transform:translateX(4px)}
.pc-icon{margin-bottom:20px}
.pc-icon svg{width:32px;height:32px;color:var(--black)}
.pc-cat{font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--charcoal);opacity:.7;margin-bottom:6px}
.pc-name{font-family:"Bebas Neue",sans-serif;font-size:28px;line-height:1;color:var(--black);margin-bottom:10px;letter-spacing:.5px}
.pc-copy{font-size:14px;color:var(--charcoal);line-height:1.55;margin-bottom:20px;flex:1}
.pc-bottom{display:flex;justify-content:space-between;align-items:center}
.pc-rate{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--black)}
.pc-arrow{font-size:18px;color:var(--black);transition:transform .2s}

/* ── WHY VIDA ── */
.why-section{padding:80px 56px;background:var(--off-white);border-bottom:1px solid var(--border)}
.why-header{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end;margin-bottom:56px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.why-card{background:var(--white);padding:40px 32px;transition:background .2s}
.why-card:hover{background:var(--green)}
.why-icon{margin-bottom:24px}
.why-icon svg{width:36px;height:36px;color:var(--black)}
.why-title{font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;color:var(--black);margin-bottom:14px;letter-spacing:.5px}
.why-body{font-size:15px;color:var(--charcoal);line-height:1.6}

/* ── MEMBERSHIP CTA ── */
.member-cta{padding:96px 56px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;border-bottom:1px solid var(--border);background:var(--white)}
.member-cta h2{font-family:"Bebas Neue",sans-serif;font-size:clamp(56px,9vw,140px);line-height:.86;margin-bottom:28px;color:var(--black)}
.member-cta h2 span{background:var(--green);padding:0 12px;display:inline-block}
.member-cta p{font-size:19px;color:var(--charcoal);line-height:1.65;margin-bottom:36px;max-width:520px}
.member-bullets{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.member-bullets li{display:flex;gap:14px;font-size:16px;color:var(--charcoal);align-items:flex-start;line-height:1.55;list-style:none}
.member-bullets li::before{content:"";display:block;width:8px;height:8px;background:var(--green);margin-top:9px;flex-shrink:0}
.member-actions{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.member-actions .btn-p,.member-actions .btn-s{text-align:center}
.member-phone{font-size:15px;color:var(--charcoal);text-align:center;padding-top:8px}
.member-phone a{color:var(--black);font-weight:700;text-decoration:none}
.member-phone a:hover{text-decoration:underline}

/* ── TRUST STRIP ── */
.trust{background:var(--black);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 2rem;padding:20px 32px}
.ti-item{display:flex;align-items:center;gap:10px;font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--white);white-space:nowrap}
.tidot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ── FOOTER ── */
footer{background:var(--black);padding:64px 56px 40px;color:var(--white)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid #2A2A27}
.ft-brand .ft-logo img{height:36px;width:auto;filter:brightness(0) invert(1);margin-bottom:20px}
.ft-tag{font-family:"Bebas Neue",sans-serif;font-size:22px;color:var(--green);line-height:1.05;margin-bottom:14px;letter-spacing:.5px}
.ft-addr{font-size:13px;color:#888;line-height:1.65}
.ft-addr a{color:#888;text-decoration:none}
.ft-addr a:hover{color:var(--green)}
.ft-col-title{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--white);margin-bottom:18px}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:10px}
.ft-col a{font-size:13px;color:#888;text-decoration:none;transition:color .2s}
.ft-col a:hover{color:var(--green)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:24px}
.ft-cert{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:12px;color:#888;letter-spacing:.5px}
.ft-cert span{display:flex;align-items:center;gap:8px}
.ft-cert .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.ft-social{display:flex;gap:14px}
.ft-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #2A2A27;color:#888;transition:all .2s;text-decoration:none}
.ft-social a:hover{background:var(--green);color:var(--black);border-color:var(--green)}
.ft-social svg{width:16px;height:16px}
.ft-legal{font-size:12px;color:#888;line-height:1.7;max-width:1000px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── MOBILE ── */
@media(max-width:991px){
  nav{padding:14px 24px}
  .nav-links{display:none}
  .nav-toggle{display:flex;align-items:center}
  .hero{padding:84px 24px 56px;grid-template-columns:1fr;gap:48px}
  .hero h1{font-size:clamp(44px,11vw,68px)}
  .hero-sub{font-size:17px}
  .stat-num{font-size:54px}
  .fee-math{grid-template-columns:1fr}
  .fee-left{padding:56px 24px}
  .fee-left h2{font-size:clamp(36px,8vw,56px)}
  .fee-row{padding:24px 24px;grid-template-columns:auto 1fr;gap:20px}
  .fee-amount{font-size:54px;min-width:90px}
  .products{padding:56px 24px}
  .product-grid{grid-template-columns:1fr 1fr}
  .pcard{min-height:200px;padding:28px 22px}
  .pc-name{font-size:24px}
  .why-section{padding:56px 24px}
  .why-header{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
  .why-grid{grid-template-columns:1fr 1fr}
  .why-card{padding:32px 24px}
  .why-title{font-size:24px}
  .member-cta{padding:64px 24px;grid-template-columns:1fr;gap:36px}
  .member-cta h2{font-size:clamp(48px,12vw,76px)}
  .trust{padding:16px 20px;gap:.3rem 1rem}
  .ti-item{font-size:11px;letter-spacing:2px}
  footer{padding:48px 24px 32px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1/-1}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:20px}
  .section-title{font-size:clamp(34px,8vw,52px)}
  .section-body{font-size:16px}
}
@media(max-width:767px){
  .product-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .fee-amount{font-size:44px;min-width:80px}
}

/* ── MOBILE PORTRAIT (Webflow tier ≤478) ── */
@media(max-width:478px){
  nav{padding:32px 20px}
  .hero{padding:72px 20px 44px}
  .fee-left{padding:44px 20px}
  .fee-row{padding:32px 20px}
  .products{padding:44px 20px}
  .why-section{padding:44px 20px}
  .why-card{padding:32px 20px}
  .member-cta{padding:52px 20px}
  footer{padding:36px 20px 24px}
  nav,body > nav,.wp-site-blocks > nav{padding:12px 16px}
  .nav-logo img{height:32px}
  .mobile-menu{padding:72px 20px 32px}
  .mobile-group a{font-size:16px}
  .hero h1{font-size:clamp(38px,12.5vw,54px)}
  .hero-sub{font-size:16px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-p,.hero-actions .btn-s{width:100%;text-align:center;padding-left:24px;padding-right:24px}
  .hero-fine{font-size:12px}
  .stat{padding:22px 16px}
  .stat-num{font-size:40px}
  .stat-lbl{font-size:14px}
  .stat-desc{font-size:13px}
  .eyebrow{font-size:12px;letter-spacing:3px}
  .section-title{font-size:clamp(30px,9.5vw,44px)}
  .section-body{font-size:15px}
  .btn-p{padding:16px 28px;font-size:13px}
  .btn-s{padding:14px 24px;font-size:13px}
  .mq-item{font-size:15px;letter-spacing:2px;padding:0}
  .mq-g{width:7px;height:7px;margin:0 22px 0 20px}
  .trust{padding:14px 16px;gap:.25rem .8rem}
  .ti-item{font-size:10px;letter-spacing:1.5px}
  .final h2{font-size:clamp(40px,13vw,60px)}
  .final p{font-size:16px}
  .final-actions .btn-p,.final-actions .btn-s{width:100%}
  .faq-item{padding:22px 18px}
  .faq-q{font-size:18px}
  .inc{padding:26px 20px}
  .person-card{padding:26px 20px}
  .acct-card-header,.holiday-card-header,.prod-card-header,.card-tier-header{padding:18px 16px}
  .acct-card-name,.holiday-card-name{font-size:24px}
  .acct-tagline{padding-left:16px;padding-right:16px}
  .acct-row,.cdfi-row,.gov-row,.rt-row,.rt-head{padding-left:16px;padding-right:16px}
  .qa-row{padding:22px 18px}
  .rate-table th,.rate-table td{padding:12px 10px;font-size:13px}
  .rate-note{padding:12px 12px 16px}
  .dl-list a{padding:14px 14px;font-size:14px}
  .disc{padding:16px 18px}
  .split-dark h2,.holiday-dark h2,.rebrand-dark h2{font-size:clamp(36px,12vw,52px)}
  footer{padding:36px 20px 24px}
  .ft-grid{gap:24px;margin-bottom:32px;padding-bottom:32px}
  .ft-cert{gap:10px 16px}
  .ft-legal{font-size:11px}
  .ft-legal-row{gap:20px}
  .ft-compliance{flex-direction:column;align-items:flex-start;gap:16px}
  main section > div,main section > div > div{min-width:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}
/* ── THE BREAKUP CALLOUT ── */
.breakup-callout{background:var(--black);color:var(--white);padding:96px 56px;position:relative;overflow:hidden}
.breakup-callout::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--alert,#D63F2F) 30%,var(--alert,#D63F2F) 70%,transparent 100%);opacity:.4}
.breakup-callout-inner{max-width:1100px;margin:0 auto;text-align:center}
.breakup-callout-eye{font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--green);margin-bottom:24px;display:block}
.breakup-callout-h{font-family:"Bebas Neue",sans-serif;font-size:clamp(48px,7vw,96px);line-height:.92;color:var(--white);letter-spacing:0;margin-bottom:24px;max-width:900px;margin-left:auto;margin-right:auto}
.breakup-callout-h em{font-style:normal;background:var(--green);color:var(--black);padding:0 14px;display:inline-block}
.breakup-callout-sub{font-size:19px;color:rgba(255,255,255,.8);line-height:1.55;max-width:680px;margin:0 auto 40px;font-weight:500}
.breakup-callout-sub strong{color:var(--green);font-weight:700}
.breakup-callout-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.breakup-callout-cta{background:var(--white);color:var(--black);padding:20px 48px;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;display:inline-block;transition:all .2s}
.breakup-callout-cta:hover{background:var(--green);color:var(--black)}
@media(max-width:991px){
  .breakup-callout{padding:64px 24px}
  .breakup-callout-h{font-size:clamp(40px,9vw,60px)}
  .breakup-callout-sub{font-size:17px}
}


    /* Online Banking login card (client request 2026-06-24) */
    .login-card{background:var(--black);color:var(--white);padding:28px 28px 24px;margin-bottom:16px}
    .login-title{font-family:'Bebas Neue',sans-serif;font-size:1.75rem;letter-spacing:.04em;margin:0 0 14px;line-height:1}
    .login-label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.8125rem;letter-spacing:.25rem;text-transform:uppercase;color:#888;margin-bottom:6px}
    .login-input{width:100%;box-sizing:border-box;background:var(--white);border:none;padding:14px 16px;font-family:'Barlow',sans-serif;font-size:1rem;color:var(--charcoal);margin-bottom:10px}
    .login-input::placeholder{color:#737373}
    .login-input:focus{outline:3px solid var(--green);outline-offset:0}
    .login-btn{width:100%;background:var(--green);color:var(--black);border:none;padding:15px 16px;font-family:'Barlow',sans-serif;font-weight:700;font-size:.875rem;letter-spacing:.125rem;text-transform:uppercase;cursor:pointer}
    .login-btn:hover{background:var(--white)}
    .login-links{display:flex;flex-direction:column;gap:6px;margin-top:14px}
    .login-links a{color:#888;font-size:.8125rem;text-decoration:none}
    .login-links a:hover{color:var(--green)}
      .ft-cert .cert-strong{color:var(--white);font-weight:600;font-size:.9375rem}
  
    /* Elevated split-panel hero (2026-08): white logo side / full-bleed black login panel */
    .hero{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:72px 56px;margin-top:65px;align-items:center}
    .hero-left{display:flex;flex-direction:column;justify-content:center}
    .hero-left .hero-badge{margin-bottom:40px}
    .hero-logo{margin:0 0 32px}
    .hero-logo img{width:min(500px,92%);height:auto;display:block}
    .hero-value{font-size:19px;line-height:1.6;color:var(--charcoal);max-width:46ch;margin:0 0 40px}
    .hero-fine{font-size:13px;color:var(--charcoal);line-height:1.5;opacity:.7;margin:0;border-top:1px solid var(--border);padding-top:20px;max-width:52ch}
    .hero-right{display:flex;align-items:center}
    .login-panel{background:var(--black);border-top:6px solid var(--green);width:100%;aspect-ratio:1/1;max-height:660px;padding:44px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
    .login-eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--green);display:block;margin-bottom:10px}
    .login-title{font-family:"Bebas Neue",sans-serif;font-size:clamp(34px,3.2vw,44px);letter-spacing:.5px;line-height:.95;color:var(--white);margin:0 0 26px}
    .login-label{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#888;margin-bottom:8px}
    .login-input{width:100%;box-sizing:border-box;background:var(--white);border:none;padding:16px 18px;font-family:"Barlow",sans-serif;font-size:16px;color:var(--charcoal);margin-bottom:12px}
    .login-input::placeholder{color:#737373}
    .login-input:focus{outline:3px solid var(--green);outline-offset:0}
    .login-btn{width:100%;background:var(--green);color:var(--black);border:none;padding:17px 18px;font-family:"Barlow",sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,transform .12s}
    .login-btn:hover{background:var(--white)}
    .login-btn:active{transform:translateY(1px)}
    .login-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}
    .login-links a{color:#aaa;font-size:13.5px;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
    .login-links a:hover{color:var(--green);border-bottom-color:var(--green)}
    .login-sep{color:#444;font-family:"Barlow Condensed",sans-serif}
    .login-trust{margin-top:24px;padding-top:16px;border-top:1px solid #222;font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#888}
    @media (max-width:960px){
      .hero{grid-template-columns:1fr;gap:40px;padding:48px 24px}
      .hero-left{padding:0}
      .hero-left .hero-badge{margin-bottom:28px}
      .hero-logo img{width:min(380px,88%)}
      .hero-value{margin-bottom:28px}
      .hero-right{padding:0}
      .login-panel{aspect-ratio:auto;padding:36px 26px}
    }
    /* Hero sky (2026-09-08): the sky photo as a texture under a 30% wash of Vida black, filling the section; the white + green lockup; login panel at 70% */
    .hero{background-color:var(--black)}
    .hero-loc{color:rgba(255,255,255,.85)}
    .hero-value{color:var(--white)}
    .hero-fine{color:rgba(255,255,255,.9);opacity:1;border-top-color:rgba(255,255,255,.35)}
    .hero-loc,.hero-value,.hero-fine{text-shadow:0 1px 2px rgba(0,0,0,.35)}
    .login-panel{background:rgba(17,17,17,.7)}
    /* more breathing room around the two containers (David, Sep 8): wider outer margins, a tighter gap between the
       two containers, and the login panel at about 70% of its former width (it was half the row) */
    /* two true halves of the screen: the login panel sits centred in the right half (David, Sep 8); the left
       column carries the outer margin as padding so the halves are measured from the screen edges */
    .hero{padding:96px 0;grid-template-columns:1fr 1fr;gap:0}
    /* the left container stays exactly where the centred pair put it (50vw - 514px, never under the 120px outer margin) */
    .hero-left{padding-left:max(120px,calc(50vw - 514px));max-width:calc(560px + max(120px,calc(50vw - 514px)))}
    .hero-right{justify-content:center}
    .login-panel{padding:36px}
    @media (min-width:961px){.login-panel{width:clamp(360px,34vw,420px)}.hero-logo img{width:min(500px,100%)}}
    /* desktop: a compact login panel that spans from the top of the leaf to the bottom of the "since 1961" line
       (David, Sep 8), so it no longer matches the full height of the left column */
    @media (min-width:961px){
      .login-panel{aspect-ratio:auto;max-height:none;padding:28px 30px 26px}
      .login-eyebrow{font-size:11px;letter-spacing:3.5px;margin-bottom:6px}
      .login-title{font-size:34px;margin:0 0 16px}
      .login-label{font-size:11px;letter-spacing:2.5px;margin-bottom:6px}
      .login-input{padding:12px 15px;font-size:15px;margin-bottom:10px}
      .login-btn{padding:13px 16px;font-size:13px;margin-top:2px}
      .login-links{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:14px}
      .login-links a{font-size:12.5px}
      .login-trust{margin-top:16px;padding-top:12px;font-size:10px;letter-spacing:2px;line-height:1.6;text-wrap:balance}
    }
    @media (max-width:1100px){.hero{padding:80px 0}.hero-left{padding-left:max(72px,calc(50vw - 514px));max-width:calc(560px + max(72px,calc(50vw - 514px)))}}
    @media (max-width:960px){.hero{padding:56px 32px;grid-template-columns:1fr;gap:40px}.hero-left{max-width:none;padding-left:0}.hero-right{justify-content:stretch}}
    @media (max-width:480px){.hero{padding:48px 24px}}
    /* Hero slider (2026-09-19, David from the Vida meeting): the left column rotates the featured items, the login panel
       never moves, and the photo crossfades to the next slide's photo instead of sliding. Slides are stacked in one grid
       cell so the section keeps the height of its tallest slide; nothing below it shifts. The controls appear only once
       the script is running with two or more slides. */
    .hero{position:relative;overflow:hidden}
    .hero-bgs{position:absolute;inset:0;z-index:0;pointer-events:none}
    .hero-bg{position:absolute;inset:0;background-color:var(--black);background-image:linear-gradient(rgba(17,17,17,.3),rgba(17,17,17,.3)),var(--bg);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity .9s ease}
    .hero-bg.is-photo{background-image:linear-gradient(90deg,rgba(17,17,17,.62) 0%,rgba(17,17,17,.44) 55%,rgba(17,17,17,.3) 100%),var(--bg)}
    .hero-bg.is-on{opacity:1}
    .hero-left,.hero-right{position:relative;z-index:1}
    .hero-slides{display:grid}
    .hero-slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
    .hero-slide.is-on{opacity:1;visibility:visible;transition:opacity .55s ease .15s,visibility 0s}
    .hero-slide .hero-badge{align-self:stretch}
    .hero-h{font-family:"Bebas Neue",sans-serif;font-size:clamp(44px,5vw,78px);line-height:.92;letter-spacing:.5px;color:var(--white);margin:0 0 26px;text-shadow:0 1px 2px rgba(0,0,0,.35);text-wrap:balance}
    .hero-h em{font-style:normal;background:var(--green);color:var(--black);padding:0 12px;display:inline-block;text-shadow:none}
    .hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--black);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:14px 26px;text-decoration:none;margin:-12px 0 32px;transition:background .15s}
    .hero-cta:hover{background:var(--white)}
    .hero-nav{display:none;align-items:center;gap:14px;margin-top:34px}
    .hero-slider.is-live .hero-nav{display:flex}
    .hero-arrow,.hero-pause{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(17,17,17,.35);color:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .15s,border-color .15s,color .15s}
    .hero-arrow:hover,.hero-pause:hover{background:var(--green);border-color:var(--green);color:var(--black)}
    .hero-arrow svg,.hero-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .hero-pause .ico-play{display:none}
    .hero-pause[aria-pressed="true"] .ico-pause{display:none}
    .hero-pause[aria-pressed="true"] .ico-play{display:block;fill:currentColor}
    .hero-dots{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
    /* each dot is a 24 px target (WCAG 2.5.8); the visible dot is drawn inside it */
    .hero-dots button{position:relative;width:24px;height:24px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer}
    .hero-dots button::before{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .15s,inset .15s}
    .hero-dots button[aria-selected="true"]::before{background:var(--green);inset:5px}
    .hero-dots button:hover::before{background:var(--white)}
    .hero-arrow:focus-visible,.hero-pause:focus-visible,.hero-dots button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
    @media (max-width:960px){.hero-h{font-size:clamp(42px,9vw,64px)}.hero-nav{margin-top:26px}}
    @media (max-width:767px){.hero-bg{background-image:linear-gradient(rgba(17,17,17,.4),rgba(17,17,17,.4)),var(--bg-m,var(--bg))}.hero-bg.is-photo{background-image:linear-gradient(rgba(17,17,17,.55),rgba(17,17,17,.55)),var(--bg-m,var(--bg))}}
    @media (prefers-reduced-motion:reduce){.hero-bg,.hero-slide{transition:none}}
    /* Statement section: the old hero layout, one level down */
    .statement{padding:80px 56px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;border-bottom:1px solid var(--border)}
    .statement-h{font-family:"Bebas Neue",sans-serif;font-size:clamp(48px,8vw,116px);line-height:.88;letter-spacing:1px;margin-bottom:28px;color:var(--black)}
    .statement-h em{font-style:normal;background:var(--green);padding:0 14px;display:inline-block}
    @media (max-width:960px){
      .statement{padding:64px 24px;grid-template-columns:1fr;gap:48px}
    }
      .eyebrow-line{display:inline-flex;align-items:center;gap:10px;font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--charcoal);margin-bottom:22px}
    .eyebrow-tick{width:26px;height:3px;background:var(--green);display:inline-block}
  
    /* ATM / shared-branch finder band */
    .atm-finder{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:64px 56px;background:var(--off-white);border-bottom:1px solid var(--border)}
    .atm-h{font-family:"Bebas Neue",sans-serif;font-size:clamp(34px,4.5vw,60px);line-height:.92;color:var(--black);margin:0 0 16px}
    .atm-sub{font-size:16.5px;color:var(--charcoal);line-height:1.6;max-width:48ch;margin:0}
    .atm-label{color:var(--charcoal)}
    .atm-row{display:flex;gap:10px}
    .atm-input{flex:1;min-width:0;background:var(--white);border:1px solid var(--border);padding:15px 16px;font-family:"Barlow",sans-serif;font-size:16px;color:var(--charcoal)}
    .atm-input::placeholder{color:#737373}
    .atm-input:focus{outline:3px solid var(--green);outline-offset:0;border-color:var(--black)}
    .atm-btn{background:var(--black);color:var(--white);border:none;padding:15px 24px;font-family:"Barlow",sans-serif;font-weight:700;font-size:13.5px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
    .atm-btn:hover{background:var(--green);color:var(--black)}
    .atm-alt{font-size:13px;color:var(--charcoal);opacity:.8;margin:14px 0 0;line-height:1.5}
    @media (max-width:960px){
      .atm-finder{grid-template-columns:1fr;gap:28px;padding:48px 24px}
      .atm-row{flex-direction:column}
      .atm-btn{justify-content:center}
    }

/* ── inline styles from the approved HTML, promoted to classes ── */
.s-62fa3e{background:var(--green) !important;color:var(--black) !important}
.s-92fad8{margin-bottom:0 !important}
