/* =========================
      SECTIONS
    ========================== */
    .section{
      padding: clamp(34px, 4vw, 64px) 0;
      position:relative;
    }
    .section:before{display:none}
    .section.no-line:before{display:none}

    .subhead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom: 22px;
    }
    .subhead p{margin:0; max-width: 70ch}
    .nowrap{white-space:nowrap}
    .final-cta-text{white-space:nowrap}
    .final-cta-break{display:inline}
    #final-cta .subhead{
      align-items:center;
      justify-content:center;
      text-align:center;
      flex-direction:column;
      gap:18px;
    }
    #final-cta .subhead > div{
      max-width: 70ch;
      width:100%;
      margin:0 auto;
    }
    #final-cta .subhead > div:last-child{
      display:flex;
      justify-content:center;
    }
    .closable{
      position:relative;
    }
    .close-section{
      position:absolute;
      right: 0;
      top: 0;
      width: 36px;
      height: 36px;
      border-radius: var(--radius);
      border:1px solid rgba(11,15,20,.14);
      background: rgba(255,255,255,.92);
      color: #0633A6;
      font-size:22px;
      font-weight:700;
      line-height:1;
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .close-section:hover{background:#fff}
    .is-hidden{display:none !important}


    /* =========================
      SCROLL / SWIPE: horizontal scrollers
    ========================== */
    .scroller-wrap{ position:relative; }
    .scroller{
      display:grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(280px, 1fr);
      gap:10px;
      overflow:auto;
      padding-bottom: 10px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      scroll-behavior:smooth;
      touch-action: auto;
    }
    .scroller-wide{
      grid-auto-columns:minmax(300px, 1fr);
    }
    .scroller::-webkit-scrollbar{display:none}
    .scroller > *{scroll-snap-align: start}

    .container-center-text{
      text-align:center;
    }

    .scroller-wrap:before,
    .scroller-wrap:after{
      content:"";
      position:absolute;
      top:0; bottom:10px;
      width:46px;
      pointer-events:none;
      z-index:5;
      opacity:.0;
      transition: opacity var(--fast);
    }
    .scroller-wrap:before{
      left:-2px;
      background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
    }
    .scroller-wrap:after{
      right:-2px;
      background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
    }
    .scroller-wrap.has-left:before{opacity:1}
    .scroller-wrap.has-right:after{opacity:1}

    .scroll-btn{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width:40px;height:40px;
      border-radius: var(--radius);
      border:1px solid rgba(11,15,20,.14);
      background: rgba(255,255,255,.86);
      box-shadow: 0 10px 24px rgba(11,15,20,.12);
      display:grid; place-items:center;
      cursor:pointer;
      z-index:10;
      transition: transform var(--fast), opacity var(--fast);
    }
    .scroll-btn:hover{transform: translateY(-50%) scale(1.03)}
    .scroll-btn:active{transform: translateY(-50%) scale(.99)}
    .scroll-btn[disabled]{opacity:.35; pointer-events:none}
    .scroll-prev{left:-8px}
    .scroll-next{right:-8px}
    .scroll-btn svg{width:18px;height:18px}

    /* =========================
      HEADER / NAV / BURGER
    ========================== */
    header#top{
      position: fixed;
      top:0;
      left:0;
      right:0;
      z-index: 50;
      background: rgba(255,255,255,.76);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(11,15,20,.10);
      transition: box-shadow var(--slow), background var(--slow);
    }
    main{
      padding-top: 112px;
    }
    header#top.scrolled{
      background: rgba(255,255,255,.90);
      box-shadow: 0 10px 24px rgba(11,15,20,.12);
    }
    header#top > .container{
      width:min(var(--container), calc(100% - 40px));
      margin-inline:auto;
    }
    .nav{
      display:grid;
      grid-template-columns:auto minmax(0, 720px) auto;
      align-items:center;
      justify-content:center;
      column-gap:clamp(22px, 2.4vw, 34px);
      padding: 12px 0;
    }
    .brand{
      display:flex; align-items:center; gap:0;
      text-decoration:none;
      min-width: 188px;
      flex:0 0 auto;
    }
    .logo{
      width:42px;height:42px;border-radius: var(--radius);
      background:
        radial-gradient(18px 18px at 28% 30%, rgba(255,255,255,.9), transparent 60%),
        linear-gradient(135deg, rgba(45,189,126,.95), rgba(56,105,172,.72));
      box-shadow: 0 10px 22px rgba(11,15,20,.12);
      position:relative; overflow:hidden;
    }
    .logo-image{
      width:188px;
      height:68px;
      object-fit:contain;
      display:block;
      flex:0 0 auto;
    }
    nav.desktop{
      justify-self:center;
      width:100%;
      min-width:0;
      overflow:visible;
    }
    .brand-title{display:flex; flex-direction:column; line-height:1.05}
    .brand-title strong{
      font-family:"Montserrat";
      font-weight:500;
      font-size:14px;
      letter-spacing:-.01em;
      color: var(--primary);
    }
    .brand-title span{
      font-size:12px;
      font-weight:700;
      color:rgba(11,15,20,.58)
    }

    .desktop-nav-lines{
      display:flex;
      flex-direction:column;
      gap:4px;
      width:100%;
    }
    nav.desktop ul,
    .desktop-nav-row{
      list-style:none;
      padding:0;margin:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-width:0;
    }
    nav.desktop li{
      display:flex;
      justify-content:center;
      min-width:0;
    }
    nav.desktop a{
      text-decoration:none;
      font-weight:700;
      font-size:12px;
      color:#233B59;
      padding:8px 9px;
      border-radius: var(--chipRadius);
      transition: background var(--fast), transform var(--fast);
      white-space:nowrap;
      text-align:center;
    }
    nav.desktop a:not(.btn-primary){
      font-size:12.5px;
      padding:5px 5px;
    }
    nav.desktop a.btn-primary{
      color:#fff;
      padding:10px 16px;
    }
    .header-cta{
      padding:10px 16px;
    }
    nav.desktop a:hover{
      background: rgba(255,255,255,.94);
      transform: translateY(-1px);
    }
    nav.desktop a.btn-primary:hover{
      background: linear-gradient(180deg, #FF1D25, #C1272D);
      color:#fff;
    }

    .burger{
      display:none;
      border:1px solid rgba(11,15,20,.16);
      background: rgba(255,255,255,.92);
      border-radius: var(--btnRadius);
      padding:10px 12px;
      cursor:pointer;
      gap:10px;
      align-items:center;
      transition: transform var(--fast), box-shadow var(--fast);
      box-shadow: 0 8px 18px rgba(11,15,20,.10);
    }
    .burger:hover{transform: translateY(-1px); box-shadow: 0 12px 26px rgba(11,15,20,.12)}
    .burger .lines{display:grid; gap:4px}
    .burger .lines span{
      width:18px;height:2px;border-radius:10px;
      background: rgba(11,15,20,.72);
      display:block;
    }
    .burger .label{font-weight:700; font-size:13px; color:rgba(11,15,20,.72)}
    .mobile-panel{display:none; padding: 10px 0 14px}
    .mobile-panel .panel{
      background: rgba(255,255,255,.92);
      border:1px solid rgba(11,15,20,.12);
      border-radius: var(--radius);
      padding:10px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .mobile-panel nav ul{
      list-style:none; padding:0;margin:0;
      display:grid; gap:6px;
    }
    .mobile-panel nav a{
      display:block;
      padding:12px 12px;
      border-radius: var(--radius);
      text-decoration:none;
      font-weight:700;
      color:#233B59;
      border:1px solid rgba(11,15,20,.10);
      background: rgba(255,255,255,.92);
      transition: transform var(--fast), box-shadow var(--fast);
      box-shadow: 0 8px 18px rgba(11,15,20,.08);
    }
    .mobile-panel nav a:hover{transform: translateY(-1px); box-shadow: 0 12px 26px rgba(11,15,20,.10)}
    .mobile-actions{
      margin-top: 10px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }


    /* =========================
      GRIDS
    ========================== */
    .grid-4{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
    .grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}