/* =========================================================
   10K RENTAL CLUB — RESPONSIVE LAYER
   Loaded last so the approved desktop design remains intact.
   These rules only affect smaller desktop, tablet, and mobile.
   ========================================================= */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

main,
section,
article,
div,
header,
footer,
nav{
  min-width:0;
}

img,
svg{
  max-width:100%;
}

button,
a,
input,
select{
  -webkit-tap-highlight-color:transparent;
}

@media (max-width:1100px){
  .container{
    width:min(100% - 40px,940px) !important;
  }

  /* Header / navigation */
  .hero#overview > header.site-header#top .nav-wrap{
    width:min(100% - 40px,940px) !important;
    grid-template-columns:190px minmax(0,1fr) 145px !important;
    gap:14px !important;
  }

  .hero#overview > header.site-header#top .brand-image img{
    width:185px !important;
  }

  .hero#overview > header.site-header#top .main-nav{
    gap:17px !important;
  }

  .hero#overview > header.site-header#top .main-nav a{
    font-size:9px !important;
  }

  .hero#overview > header.site-header#top .nav-cta .btn{
    width:auto !important;
    min-width:138px !important;
    padding-left:17px !important;
    padding-right:17px !important;
  }

  /* Hero */
  html body main > .hero#overview .hero-grid{
    width:min(100% - 40px,940px) !important;
    grid-template-columns:50% 50% !important;
  }

  html body main > .hero#overview .hero-copy{
    max-width:590px !important;
  }

  html body main > .hero#overview h1{
    font-size:44px !important;
  }

  /* Overview */
  .overview-page .strip-grid article{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .overview-page .deal-grid{
    grid-template-columns:1.35fr 1fr .62fr !important;
  }

  /* Footer */
  .compact-site-footer .compact-footer-main{
    width:min(100% - 40px,940px) !important;
  }

  .compact-site-footer .compact-footer-bottom{
    width:min(100% - 40px,940px) !important;
  }
}

/* =========================================================
   TABLET + MOBILE NAVIGATION / HERO
   ========================================================= */
@media (max-width:860px){
  .container{
    width:calc(100% - 30px) !important;
  }

  /* Header becomes a compact hamburger layout */
  .hero#overview > header.site-header#top .nav-wrap{
    width:calc(100% - 30px) !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    min-height:68px !important;
    height:68px !important;
    gap:8px !important;
  }

  .hero#overview > header.site-header#top .brand-image{
    height:68px !important;
    min-width:0 !important;
  }

  .hero#overview > header.site-header#top .brand-image img{
    width:160px !important;
    max-width:160px !important;
  }

  .hero#overview > header.site-header#top .menu-toggle{
    display:block !important;
    order:2 !important;
    width:42px !important;
    height:42px !important;
    padding:8px !important;
    position:relative !important;
    z-index:3 !important;
  }

  .hero#overview > header.site-header#top .nav-cta{
    order:3 !important;
    height:68px !important;
  }

  .hero#overview > header.site-header#top .nav-cta .btn{
    min-width:110px !important;
    padding:10px 13px !important;
    font-size:10px !important;
  }

  .hero#overview > header.site-header#top .nav-cta small{
    display:none !important;
  }

  .hero#overview > header.site-header#top .main-nav{
    position:absolute !important;
    top:68px !important;
    left:-15px !important;
    right:-15px !important;
    width:auto !important;
    height:auto !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:8px 20px 16px !important;
    background:#0b1320 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 18px 35px rgba(0,0,0,.24) !important;
    z-index:120 !important;
  }

  .hero#overview > header.site-header#top .main-nav.open{
    display:flex !important;
  }

  .hero#overview > header.site-header#top .main-nav a{
    width:100% !important;
    height:auto !important;
    padding:13px 0 !important;
    font-size:12px !important;
  }

  .hero#overview > header.site-header#top .main-nav a::after{
    bottom:6px !important;
    right:auto !important;
    width:34px !important;
  }

  /* Hero stacks cleanly while retaining the approved background */
  html body main > .hero#overview{
    height:auto !important;
    min-height:0 !important;
    background-position:62% center !important;
  }

  html body main > .hero#overview::before{
    background:
      linear-gradient(
        90deg,
        rgba(11,19,32,.98) 0%,
        rgba(11,19,32,.94) 38%,
        rgba(11,19,32,.76) 62%,
        rgba(11,19,32,.36) 100%
      ) !important;
  }

  html body main > .hero#overview .hero-grid{
    width:calc(100% - 30px) !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
    padding-top:68px !important;
    padding-bottom:30px !important;
  }

  html body main > .hero#overview .hero-copy{
    max-width:620px !important;
    padding:42px 0 20px !important;
  }

  html body main > .hero#overview h1{
    font-size:40px !important;
    line-height:.98 !important;
  }

  html body main > .hero#overview .hero-lead{
    max-width:590px !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }

  html body main > .hero#overview .hero-visual{
    min-height:0 !important;
    margin:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
  }

  html body main > .hero#overview .seat-card{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:190px !important;
    margin:10px 0 0 auto !important;
  }

  /* Overview */
  .overview-page .strip-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .overview-page .strip-grid article{
    border-bottom:1px solid #d7d0c5 !important;
  }

  .overview-page .strip-grid article:nth-child(2n){
    border-right:0 !important;
  }

  .overview-page .membership-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .overview-page .tier-arrow{
    transform:rotate(90deg) !important;
  }

  .overview-page .process-row{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:24px 18px !important;
  }

  .overview-page .process-arrow{
    display:none !important;
  }

  .overview-page .accelerator-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .overview-page .accelerator-intro{
    grid-column:1 / -1 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(217,139,18,.55) !important;
  }

  .overview-page .deal-grid{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
  }

  .overview-page .drop-card{
    grid-column:1 / -1 !important;
  }

  .overview-page .faq-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  /* Shared pre-footer */
  .prefooter-grid{
    width:calc(100% - 30px) !important;
    grid-template-columns:68px minmax(0,1fr) auto !important;
    gap:16px !important;
  }

  .prefooter h2{
    font-size:15px !important;
    letter-spacing:.11em !important;
  }

  .prefooter-cta{
    grid-column:2 / 3 !important;
  }

  .prefooter-grid > .btn{
    grid-column:3 !important;
    grid-row:1 / 3 !important;
  }

  /* Benefits */
  .benefits-page .wealth-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .benefits-page .wealth-card{
    border:1px solid #d8d0c4 !important;
    border-radius:12px !important;
  }

  .benefits-page .pathway-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .benefits-page .benefit-strip-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* How It Works */
  .how-page .role-compare{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .how-page .not-same{
    width:88px !important;
    height:88px !important;
  }

  .how-page .chevrons{
    display:none !important;
  }

  .how-page .manager-card{
    grid-template-columns:1fr !important;
  }

  .how-page .manager-divider{
    width:100% !important;
    height:1px !important;
  }

  .how-page .service-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .how-page .why-matters{
    grid-template-columns:76px minmax(0,1fr) !important;
  }

  .how-page .why-matters p{
    grid-column:1 / -1 !important;
  }

  /* Best Deals */
  .best-deals-page .deal-pillar-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .best-deals-page .deal-pillar-grid article:nth-child(2n){
    border-right:0 !important;
  }

  .best-deals-page .purchase-card{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }

  .best-deals-page .financial-card{
    grid-column:1 / -1 !important;
    margin:0 12px 12px !important;
  }

  /* FAQs */
  .faqs-page .faq-page-container{
    width:calc(100% - 30px) !important;
  }

  /* Compact footer */
  .compact-site-footer .compact-footer-main,
  .compact-site-footer .compact-footer-bottom{
    width:calc(100% - 30px) !important;
  }
}

/* =========================================================
   SMALL TABLETS + LARGE PHONES
   ========================================================= */
@media (max-width:680px){
  /* Header */
  .hero#overview > header.site-header#top .brand-image img{
    width:142px !important;
    max-width:142px !important;
  }

  .hero#overview > header.site-header#top .nav-cta .btn{
    min-width:96px !important;
    padding:9px 10px !important;
    font-size:9px !important;
  }

  /* Hero */
  html body main > .hero#overview .hero-copy{
    padding-top:34px !important;
  }

  html body main > .hero#overview h1{
    font-size:34px !important;
  }

  html body main > .hero#overview .hero-benefits{
    grid-template-columns:1fr 1fr !important;
    gap:13px !important;
  }

  html body main > .hero#overview .benefit{
    font-size:9px !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:30px !important;
    height:30px !important;
  }

  html body main > .hero#overview .seat-card{
    width:172px !important;
    padding:14px !important;
  }

  html body main > .hero#overview .seat-card strong{
    font-size:48px !important;
  }

  /* Section headings */
  .section-heading h2,
  .overview-page .membership-section-heading h2,
  .benefits-page .benefits-section-heading h2,
  .how-page .how-heading h2,
  .best-deals-page .deal-section-heading h2,
  .faqs-page .faq-page-heading h2{
    font-size:24px !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }

  /* Overview */
  .overview-page .strip-grid{
    grid-template-columns:1fr !important;
  }

  .overview-page .strip-grid article{
    border-right:0 !important;
  }

  .overview-page .process-row{
    grid-template-columns:1fr 1fr !important;
    gap:28px 16px !important;
  }

  .overview-page .process-step:last-of-type{
    grid-column:1 / -1 !important;
    width:min(240px,100%) !important;
    margin-inline:auto !important;
  }

  .overview-page .accelerator-grid{
    grid-template-columns:1fr !important;
  }

  .overview-page .accelerator-feature{
    border-right:0 !important;
  }

  .overview-page .deal-grid{
    grid-template-columns:1fr !important;
  }

  .overview-page .glance-card,
  .overview-page .mini-seat-card{
    grid-column:1 !important;
  }

  .overview-page #properties .drop-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:18px !important;
  }

  .overview-page #properties .drop-copy{
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    padding:0 !important;
  }

  .overview-page #properties .countdown{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    justify-self:stretch !important;
    margin:0 !important;
  }

  .overview-page #properties .countdown span{
    min-width:0 !important;
  }

  .overview-page .faq h2{
    font-size:28px !important;
  }

  /* Pre-footer */
  .prefooter-grid{
    grid-template-columns:58px minmax(0,1fr) !important;
    padding-top:20px !important;
    padding-bottom:20px !important;
  }

  .prefooter .seal{
    width:54px !important;
    height:54px !important;
  }

  .prefooter-cta{
    grid-column:2 !important;
  }

  .prefooter-grid > .btn{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
    margin:4px 0 0 !important;
  }

  /* Benefits */
  .benefits-page .wealth-grid{
    grid-template-columns:1fr !important;
  }

  .benefits-page .wealth-card{
    height:auto !important;
    min-height:0 !important;
  }

  .benefits-page .wealth-card .wealth-metric{
    margin-top:20px !important;
  }

  .benefits-page .pathway-copy{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }

  .benefits-page .pathway-chart-icon{
    margin-inline:auto !important;
  }

  .benefits-page .pathway-steps{
    grid-template-columns:1fr 1fr !important;
    gap:22px !important;
  }

  .benefits-page .path-arrow{
    display:none !important;
  }

  .benefits-page .benefit-strip-grid{
    grid-template-columns:1fr !important;
  }

  .benefits-page .benefit-strip-grid article{
    border-right:0 !important;
  }

  /* How It Works */
  .how-page .role-card{
    min-height:0 !important;
    padding:22px 20px !important;
  }

  .how-page .role-card-head{
    gap:14px !important;
  }

  .how-page .role-icon{
    width:66px !important;
    height:66px !important;
    flex-basis:66px !important;
    padding:12px !important;
  }

  .how-page .role-card h3{
    font-size:20px !important;
  }

  .how-page .manager-card{
    padding:20px !important;
  }

  .how-page .manager-intro{
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:14px !important;
  }

  .how-page .manager-icon{
    width:76px !important;
    height:76px !important;
  }

  .how-page .service-grid{
    grid-template-columns:1fr 1fr !important;
    gap:24px 8px !important;
  }

  .how-page .why-matters{
    grid-template-columns:58px minmax(0,1fr) !important;
    padding:16px !important;
  }

  /* Best Deals */
  .best-deals-page .deal-pillar-grid{
    grid-template-columns:1fr !important;
  }

  .best-deals-page .deal-pillar-grid article{
    border-right:0 !important;
    border-bottom:1px solid rgba(213,146,28,.42) !important;
  }

  .best-deals-page .deal-pillar-grid article:last-child{
    border-bottom:0 !important;
  }

  .best-deals-page .purchase-card{
    grid-template-columns:1fr !important;
  }

  .best-deals-page .purchase-photo,
  .best-deals-page .purchase-photo img{
    min-height:250px !important;
    height:250px !important;
  }

  .best-deals-page .purchase-details{
    padding:20px !important;
  }

  .best-deals-page .financial-card{
    grid-column:auto !important;
    margin:0 12px 12px !important;
  }

  .best-deals-page .property-specs{
    gap:8px 0 !important;
  }

  .best-deals-page .property-specs i{
    margin-left:10px !important;
    margin-right:10px !important;
  }

  /* FAQ page */
  .faqs-page .faq-accordion-list{
    gap:11px !important;
  }

  .faqs-page .faq-item button{
    grid-template-columns:38px minmax(0,1fr) 28px !important;
    gap:12px !important;
    padding:15px !important;
  }

  .faqs-page .faq-number{
    width:34px !important;
    height:34px !important;
  }

  .faqs-page .faq-question{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  .faqs-page .faq-answer{
    padding-left:65px !important;
    padding-right:15px !important;
  }

  .faqs-page .faq-item.open .faq-answer-inner{
    padding-bottom:16px !important;
  }

  /* Footer */
  .compact-site-footer .compact-footer-main{
    grid-template-columns:1fr !important;
    gap:22px !important;
    padding-top:26px !important;
    padding-bottom:24px !important;
  }

  .compact-site-footer .compact-footer-logo{
    justify-content:center !important;
  }

  .compact-site-footer .compact-footer-logo img{
    width:205px !important;
  }

  .compact-site-footer .compact-footer-nav{
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:12px 10px !important;
    white-space:normal !important;
  }

  .compact-site-footer .compact-footer-contact{
    grid-column:auto !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px 0 !important;
    padding-top:16px !important;
  }

  .compact-site-footer .footer-contact-item{
    border-left:0 !important;
    padding:0 10px !important;
  }

  .compact-site-footer .compact-footer-bottom{
    min-height:0 !important;
    padding-top:18px !important;
    padding-bottom:18px !important;
    flex-direction:column !important;
    justify-content:center !important;
    text-align:center !important;
    gap:12px !important;
  }

  /* Application modal */
  .modal-dialog{
    width:calc(100% - 24px) !important;
    max-height:90vh !important;
    overflow:auto !important;
    margin-top:5vh !important;
    padding:22px 18px !important;
  }

  #applyForm{
    grid-template-columns:1fr !important;
  }

  #applyForm .btn,
  .form-status{
    grid-column:1 !important;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */
@media (max-width:480px){
  .container,
  html body main > .hero#overview .hero-grid,
  .hero#overview > header.site-header#top .nav-wrap,
  .faq-page-container,
  .compact-site-footer .compact-footer-main,
  .compact-site-footer .compact-footer-bottom{
    width:calc(100% - 24px) !important;
  }

  /* Navigation remains usable around 320–480px */
  .hero#overview > header.site-header#top .nav-wrap{
    grid-template-columns:minmax(0,1fr) 38px auto !important;
    gap:5px !important;
  }

  .hero#overview > header.site-header#top .brand-image img{
    width:124px !important;
    max-width:124px !important;
  }

  .hero#overview > header.site-header#top .menu-toggle{
    width:38px !important;
    height:38px !important;
    padding:7px !important;
  }

  .hero#overview > header.site-header#top .nav-cta .btn{
    min-width:84px !important;
    padding:8px 8px !important;
    font-size:8px !important;
    letter-spacing:.02em !important;
  }

  .hero#overview > header.site-header#top .main-nav{
    left:-12px !important;
    right:-12px !important;
  }

  /* Hero typography */
  html body main > .hero#overview .hero-copy{
    padding-top:28px !important;
  }

  html body main > .hero#overview h1{
    font-size:30px !important;
    line-height:1.02 !important;
    letter-spacing:-.02em !important;
  }

  html body main > .hero#overview .hero-lead{
    font-size:13px !important;
  }

  html body main > .hero#overview .hero-benefits{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  html body main > .hero#overview .seat-card{
    width:160px !important;
  }

  /* Overview */
  .overview-page .process-row{
    grid-template-columns:1fr !important;
  }

  .overview-page .process-step:last-of-type{
    grid-column:auto !important;
    width:100% !important;
  }

  .overview-page .tier-card header{
    align-items:flex-start !important;
  }

  .overview-page .tier-body{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .overview-page #properties .countdown b{
    font-size:15px !important;
  }

  .overview-page #properties .countdown small{
    font-size:7px !important;
  }

  /* Benefits */
  .benefits-page .pathway-steps{
    grid-template-columns:1fr !important;
  }

  /* How It Works */
  .how-page .role-card-head{
    align-items:center !important;
  }

  .how-page .role-icon{
    width:58px !important;
    height:58px !important;
    flex-basis:58px !important;
  }

  .how-page .service-grid{
    grid-template-columns:1fr !important;
  }

  .how-page .service-item{
    min-height:100px !important;
  }

  /* Best Deals */
  .best-deals-page .address-block h3{
    font-size:18px !important;
  }

  .best-deals-page .property-specs{
    align-items:flex-start !important;
  }

  .best-deals-page .property-specs .spec-item{
    font-size:12px !important;
  }

  .best-deals-page .financial-card dl > div{
    gap:8px !important;
  }

  /* FAQ page */
  .faqs-page .faq-item button{
    grid-template-columns:34px minmax(0,1fr) 24px !important;
    gap:9px !important;
    padding:13px 12px !important;
  }

  .faqs-page .faq-number{
    width:30px !important;
    height:30px !important;
    font-size:10px !important;
  }

  .faqs-page .faq-question{
    font-size:13px !important;
  }

  .faqs-page .faq-toggle{
    font-size:23px !important;
  }

  .faqs-page .faq-answer{
    padding-left:55px !important;
    padding-right:12px !important;
  }

  .faqs-page .faq-answer p{
    font-size:13px !important;
  }

  /* Pre-footer */
  .prefooter-grid{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }

  .prefooter .seal{
    margin-inline:auto !important;
  }

  .prefooter-cta{
    grid-column:1 !important;
  }

  .prefooter-grid > .btn{
    grid-column:1 !important;
  }

  /* Footer */
  .compact-site-footer .compact-footer-nav{
    flex-direction:column !important;
    gap:10px !important;
  }

  .compact-site-footer .footer-chevron{
    display:none !important;
  }

  .compact-site-footer .compact-footer-contact{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  .compact-site-footer .footer-contact-item{
    justify-content:flex-start !important;
    width:100% !important;
    padding:4px 0 !important;
  }

  .compact-site-footer .compact-footer-legal{
    gap:14px !important;
    font-size:10px !important;
  }
}

/* Very small devices */
@media (max-width:360px){
  .hero#overview > header.site-header#top .brand-image img{
    width:112px !important;
  }

  .hero#overview > header.site-header#top .nav-cta .btn{
    min-width:76px !important;
    font-size:7.5px !important;
  }

  html body main > .hero#overview h1{
    font-size:27px !important;
  }
}


/* =========================================================
   MOBILE NAV — APPLY NOW INSIDE BURGER MENU
   ========================================================= */
@media (max-width:860px){
  .hero#overview > header.site-header#top .nav-wrap{
    grid-template-columns:minmax(0,1fr) auto !important;
  }

  /* Before JS moves it, don't reserve a third navbar column. */
  .hero#overview > header.site-header#top .nav-wrap > .nav-cta{
    display:none !important;
  }

  /* Once moved, show it as the last burger-menu item. */
  .hero#overview > header.site-header#top .main-nav > .nav-cta{
    display:flex !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin-top:8px !important;
    padding:16px 0 2px !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:7px !important;
    order:99 !important;
  }

  .hero#overview > header.site-header#top .main-nav > .nav-cta .btn{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:13px 18px !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }

  .hero#overview > header.site-header#top .main-nav > .nav-cta small{
    display:block !important;
    margin:0 !important;
    color:#fff !important;
    text-align:center !important;
    font-size:9px !important;
    line-height:1.25 !important;
    text-transform:uppercase !important;
  }
}

@media (max-width:480px){
  .hero#overview > header.site-header#top .nav-wrap{
    grid-template-columns:minmax(0,1fr) 38px !important;
  }

  .hero#overview > header.site-header#top .main-nav > .nav-cta .btn{
    min-width:0 !important;
    padding:12px 14px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   MOBILE HERO / NAV REFINEMENTS
   1. Burger dropdown sits directly beneath the burger icon.
   2. Hero benefit icons stay in one compact horizontal row.
   3. Exclusive Membership card stretches to full width.
   ========================================================= */
@media (max-width:860px){

  /* Make the navbar the positioning anchor for the dropdown. */
  .hero#overview > header.site-header#top .nav-wrap{
    position:relative !important;
  }

  /* Compact dropdown anchored directly below the burger button. */
  .hero#overview > header.site-header#top .main-nav{
    top:54px !important;
    left:auto !important;
    right:0 !important;
    width:min(290px,calc(100vw - 30px)) !important;
    padding:8px 16px 14px !important;
    border:1px solid rgba(216,139,18,.34) !important;
    border-radius:8px !important;
    background:rgba(5,19,31,.98) !important;
    box-shadow:0 14px 32px rgba(0,0,0,.28) !important;
  }

  .hero#overview > header.site-header#top .main-nav a{
    padding:11px 0 !important;
  }

  /* Keep the Apply CTA neatly inside the dropdown. */
  .hero#overview > header.site-header#top .main-nav > .nav-cta{
    padding-top:12px !important;
    margin-top:5px !important;
  }

  /* Keep all four hero benefits on one row to save vertical space. */
  html body main > .hero#overview .hero-benefits{
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:16px !important;
  }

  html body main > .hero#overview .benefit{
    min-width:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    white-space:nowrap !important;
    font-size:8px !important;
    line-height:1.05 !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
  }

  /* Stretch membership card across the available mobile width. */
  html body main > .hero#overview .hero-visual{
    width:100% !important;
    display:block !important;
  }

  html body main > .hero#overview .seat-card{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:14px 0 0 !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:480px){

  /* Bring the dropdown even closer beneath the smaller burger icon. */
  .hero#overview > header.site-header#top .main-nav{
    top:51px !important;
    width:min(280px,calc(100vw - 24px)) !important;
  }

  /* Preserve the single-row icon layout even on small phones. */
  html body main > .hero#overview .hero-benefits{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
  }

  html body main > .hero#overview .benefit{
    gap:3px !important;
    font-size:6.8px !important;
    letter-spacing:0 !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
  }

  html body main > .hero#overview .seat-card{
    width:100% !important;
    margin-top:12px !important;
  }
}

@media (max-width:360px){
  html body main > .hero#overview .benefit{
    font-size:6.3px !important;
    gap:2px !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }
}


/* =========================================================
   MOBILE HERO BENEFITS — LARGER WHILE STAYING ONE LINE
   Scale as large as the available width allows.
   ========================================================= */
@media (max-width:860px){
  html body main > .hero#overview .hero-benefits{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    align-items:center !important;
  }

  html body main > .hero#overview .benefit{
    min-width:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;

    /* Automatically scales from very small phones through tablets. */
    font-size:clamp(6.4px,2vw,10px) !important;
    line-height:1 !important;
    letter-spacing:-.015em !important;
    font-weight:700 !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:clamp(18px,5vw,28px) !important;
    height:clamp(18px,5vw,28px) !important;
    flex:0 0 clamp(18px,5vw,28px) !important;
  }
}

@media (min-width:600px) and (max-width:860px){
  html body main > .hero#overview .benefit{
    font-size:10px !important;
    gap:6px !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }
}

@media (max-width:480px){
  html body main > .hero#overview .hero-benefits{
    gap:2px !important;
  }

  html body main > .hero#overview .benefit{
    gap:3px !important;
    font-size:clamp(6.4px,2vw,9.2px) !important;
    letter-spacing:-.025em !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:clamp(18px,5vw,24px) !important;
    height:clamp(18px,5vw,24px) !important;
    flex-basis:clamp(18px,5vw,24px) !important;
  }
}

@media (max-width:360px){
  html body main > .hero#overview .benefit{
    gap:2px !important;
    font-size:clamp(6.2px,2vw,7.2px) !important;
    letter-spacing:-.035em !important;
  }

  html body main > .hero#overview .benefit .icon{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }
}


/* =========================================================
   MOBILE FOOTER — CENTER CONTACT INFORMATION
   ========================================================= */
@media (max-width:680px){
  .compact-site-footer .compact-footer-contact{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:10px !important;
  }

  .compact-site-footer .footer-contact-item{
    width:auto !important;
    min-width:0 !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    padding:4px 0 !important;
    margin:0 auto !important;
    border-left:0 !important;
  }

  .compact-site-footer .footer-contact-copy{
    justify-items:center !important;
    text-align:center !important;
  }
}

@media (max-width:480px){
  .compact-site-footer .compact-footer-contact{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    gap:10px !important;
  }

  .compact-site-footer .footer-contact-item{
    width:auto !important;
    max-width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    margin-inline:auto !important;
  }

  .compact-site-footer .footer-contact-copy{
    align-items:center !important;
    justify-items:center !important;
  }
}


/* =========================================================
   MOBILE INNER-PAGE HERO — MEMBERSHIP CARD VISIBILITY
   Inner pages only. Overview remains unchanged.
   Keeps the card in normal document flow so the next section
   can never overlap it.
   ========================================================= */
@media (max-width:860px){

  /* Pull the membership card closer to the hero subheading. */
  .benefits-page main > .hero#overview .hero-copy{
    padding-bottom:6px !important;
  }

  /* Keep enough hero space for the full card before the next section. */
  .benefits-page main > .hero#overview .hero-grid{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding-bottom:28px !important;
  }

  .benefits-page main > .hero#overview .hero-visual{
    position:relative !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /*
   Keep the card in normal flow instead of absolute positioning.
   This guarantees the following section starts below the card.
  */
  .benefits-page main > .hero#overview .seat-card{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:100% !important;
    max-width:100% !important;
    margin:6px auto 0 !important;

    box-sizing:border-box !important;
    text-align:center !important;
    z-index:5 !important;
    transform:none !important;
  }
}

@media (max-width:480px){
  .benefits-page main > .hero#overview .hero-copy{
    padding-bottom:4px !important;
  }

  .benefits-page main > .hero#overview .hero-grid{
    padding-bottom:24px !important;
  }

  .benefits-page main > .hero#overview .seat-card{
    margin-top:4px !important;
  }
}


/* =========================================================
   PRE-FOOTER LOGO CLEANUP
   Use the uploaded logo directly with no extra ring border.
   ========================================================= */
.prefooter .seal{
  width:68px !important;
  height:68px !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.prefooter .seal img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

@media (max-width:860px){
  .prefooter .seal{
    width:62px !important;
    height:62px !important;
  }
}

@media (max-width:620px){
  .prefooter .seal{
    width:58px !important;
    height:58px !important;
  }
}

@media (max-width:480px){
  .prefooter .seal{
    width:56px !important;
    height:56px !important;
  }
}


/* =========================================================
   MEMBERSHIP APPLICATION POPUP
   ========================================================= */
.apply-modal-card{
  width:min(680px,calc(100% - 36px)) !important;
  max-height:90vh !important;
  margin:5vh auto 0 !important;
  padding:0 !important;
  overflow:auto !important;
  border:1px solid rgba(226,151,28,.92) !important;
  border-radius:14px !important;
  background:#f8f6f1 !important;
  box-shadow:0 36px 90px rgba(0,0,0,.48) !important;
}

.apply-modal-header{
  position:relative;
  padding:30px 34px 24px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 15%,rgba(225,148,25,.18),transparent 34%),
    linear-gradient(135deg,#071827,#0a2237);
  border-bottom:3px solid #df9419;
}

.apply-modal-header .eyebrow{
  margin:0 0 7px !important;
  color:#eda11f !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.apply-modal-header h2{
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  text-transform:uppercase !important;
}

.apply-modal-header > p:last-child{
  max-width:530px;
  margin:0 !important;
  color:rgba(255,255,255,.75) !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

.apply-modal-card .modal-close{
  top:15px !important;
  right:17px !important;
  z-index:5 !important;
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-size:25px !important;
  line-height:1 !important;
}

.apply-modal-card .modal-close:hover{
  background:rgba(237,161,31,.18) !important;
  border-color:#eda11f !important;
}

.membership-application-form{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  padding:26px 34px 30px !important;
}

.membership-application-form .form-field{
  display:block !important;
  min-width:0 !important;
  color:#101d2b !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}

.membership-application-form .form-field > span{
  display:block;
  margin-bottom:7px;
}

.membership-application-form input[type="text"],
.membership-application-form input[type="email"],
.membership-application-form input[type="tel"],
.membership-application-form select{
  width:100% !important;
  height:48px !important;
  margin:0 !important;
  padding:0 13px !important;
  border:1px solid #cfc8bc !important;
  border-radius:7px !important;
  outline:none !important;
  background:#fff !important;
  color:#121820 !important;
  font-size:14px !important;
  font-weight:500 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:border-color .18s ease,box-shadow .18s ease !important;
}

.membership-application-form input::placeholder{
  color:#92979c !important;
}

.membership-application-form input:focus,
.membership-application-form select:focus{
  border-color:#dd9219 !important;
  box-shadow:0 0 0 3px rgba(221,146,25,.13) !important;
}

.membership-application-form .form-consent{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  margin-top:2px !important;
  color:#5a6066 !important;
  font-size:11px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.membership-application-form .form-consent input{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
  margin:1px 0 0 !important;
  accent-color:#dd9219;
}

.membership-application-form .apply-submit{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-height:48px !important;
  margin:0 !important;
  font-size:13px !important;
}

.membership-application-form .form-status{
  grid-column:1 / -1 !important;
  min-height:0 !important;
  margin:0 !important;
  color:#17683b !important;
  font-size:12px !important;
  font-weight:700 !important;
  text-align:center !important;
}

@media (max-width:620px){
  .apply-modal-card{
    width:calc(100% - 24px) !important;
    max-height:92vh !important;
    margin:4vh auto 0 !important;
    border-radius:12px !important;
  }

  .apply-modal-header{
    padding:25px 22px 20px !important;
  }

  .apply-modal-header h2{
    max-width:85% !important;
    font-size:27px !important;
  }

  .apply-modal-header > p:last-child{
    font-size:12px !important;
  }

  .apply-modal-card .modal-close{
    top:12px !important;
    right:12px !important;
    width:34px !important;
    height:34px !important;
    font-size:22px !important;
  }

  .membership-application-form{
    grid-template-columns:1fr !important;
    gap:13px !important;
    padding:21px 22px 24px !important;
  }

  .membership-application-form .form-consent,
  .membership-application-form .apply-submit,
  .membership-application-form .form-status{
    grid-column:1 !important;
  }

  .membership-application-form input[type="text"],
  .membership-application-form input[type="email"],
  .membership-application-form input[type="tel"],
  .membership-application-form select{
    height:46px !important;
    font-size:16px !important;
  }
}


/* === HOW IT WORKS / FOUNDER WORKS DROPDOWN === */
.main-nav .nav-dropdown{
  position:relative;
  display:flex;
  align-items:stretch;
}

.main-nav .nav-dropdown > a{
  display:flex;
  align-items:center;
  gap:5px;
}

.main-nav .nav-dropdown-caret{
  display:inline-block;
  margin-top:-1px;
  color:#e7a12a;
  font-size:10px;
  line-height:1;
  transition:transform .2s ease;
}

.main-nav .nav-submenu{
  position:absolute;
  top:61px;
  left:50%;
  z-index:150;
  min-width:176px;
  padding:7px;
  border:1px solid rgba(216,139,18,.45);
  border-radius:7px;
  background:rgba(5,19,31,.98);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}

.main-nav .nav-dropdown:hover .nav-submenu,
.main-nav .nav-dropdown:focus-within .nav-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.main-nav .nav-dropdown:hover .nav-dropdown-caret,
.main-nav .nav-dropdown:focus-within .nav-dropdown-caret{
  transform:rotate(180deg);
}

.main-nav .nav-submenu a{
  display:block;
  width:100%;
  padding:10px 12px !important;
  border-radius:4px;
  color:rgba(255,255,255,.86);
  font-size:10px !important;
  line-height:1.2;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:1;
}

.main-nav .nav-submenu a::after{
  display:none !important;
  content:none !important;
}

.main-nav .nav-submenu a:hover,
.main-nav .nav-submenu a.active{
  background:rgba(216,139,18,.12);
  color:#f0a52d;
}

/* Founder Works is a child page, so the parent How It Works link is not
   forced into the active underline state on founder-works.html. */
.founder-works-page .main-nav .nav-dropdown > a:not(:hover)::after{
  transform:scaleX(0);
}

@media (max-width:860px){
  .main-nav .nav-dropdown{
    display:block !important;
    width:100% !important;
  }

  .main-nav .nav-dropdown > a{
    width:100% !important;
    justify-content:flex-start !important;
  }

  .main-nav .nav-dropdown-caret{
    margin-left:3px;
  }

  /* Keep the Founder Works child visible inside the opened burger menu. */
  .main-nav .nav-submenu{
    position:static !important;
    top:auto !important;
    left:auto !important;
    width:calc(100% - 12px) !important;
    min-width:0 !important;
    margin:-3px 0 5px 12px !important;
    padding:0 0 0 12px !important;
    border:0 !important;
    border-left:1px solid rgba(216,139,18,.42) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .main-nav .nav-submenu a{
    padding:8px 0 !important;
    color:rgba(255,255,255,.72) !important;
    font-size:10px !important;
  }

  .main-nav .nav-submenu a:hover,
  .main-nav .nav-submenu a.active{
    background:transparent !important;
    color:#f0a52d !important;
  }

  .main-nav .nav-dropdown:hover .nav-dropdown-caret,
  .main-nav .nav-dropdown:focus-within .nav-dropdown-caret{
    transform:none;
  }
}

/* =========================================================
   NAV DROPDOWN POLISH — clearer caret + tighter submenu
   ========================================================= */
.main-nav .nav-dropdown > a{
  gap:7px;
}

.main-nav .nav-dropdown-caret{
  margin-top:0;
  font-size:15px;
  font-weight:800;
  line-height:.8;
  transform-origin:center;
}

.main-nav .nav-submenu{
  top:58px;
  min-width:158px;
  padding:4px;
  border-radius:6px;
}

.main-nav .nav-submenu a{
  padding:7px 9px !important;
  font-size:10px !important;
  line-height:1.15;
}

@media (max-width:860px){
  .main-nav .nav-dropdown > a{
    gap:7px !important;
  }

  .main-nav .nav-dropdown-caret{
    margin-left:2px;
    font-size:15px;
  }

  .main-nav .nav-submenu{
    width:calc(100% - 10px) !important;
    margin:0 0 3px 10px !important;
    padding:0 0 0 10px !important;
  }

  .main-nav .nav-submenu a{
    padding:6px 0 !important;
  }
}

/* Mega menu must be allowed to extend below the hero/header without being clipped. */
@media (min-width:861px){
  main > .hero{
    overflow:visible !important;
  }
  .site-header,
  .site-header .nav-wrap,
  .site-header .main-nav{
    overflow:visible !important;
  }
}

/* =========================================================
   HOW IT WORKS — MEGA MENU (REFERENCE-MATCHED)
   Dark, wide, multi-column dropdown inspired by supplied mockup.
   ========================================================= */
@media (min-width:861px){
  .main-nav .nav-dropdown{
    position:relative !important;
    display:flex !important;
    align-items:stretch !important;
  }

  .main-nav .nav-dropdown > a{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }

  .main-nav .nav-dropdown-caret{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#e29a20 !important;
    font-size:17px !important;
    font-weight:900 !important;
    line-height:1 !important;
    transform-origin:center !important;
    transition:transform .2s ease !important;
  }

  .main-nav .nav-mega{
    position:absolute !important;
    top:calc(100% - 2px) !important;
    left:50% !important;
    z-index:250 !important;
    width:min(650px,calc(100vw - 32px)) !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:.95fr 1.45fr !important;
    gap:0 !important;
    padding:24px 26px !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:10px !important;
    background:
      radial-gradient(circle at 12% 0,rgba(26,67,104,.22),transparent 37%),
      linear-gradient(145deg,#071522 0%,#020d17 100%) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.42) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate(-39%,10px) !important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease !important;
  }

  .main-nav .nav-mega::before{
    content:"" !important;
    position:absolute !important;
    top:-7px !important;
    left:39% !important;
    width:14px !important;
    height:14px !important;
    background:#071522 !important;
    border-left:1px solid rgba(255,255,255,.08) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    transform:rotate(45deg) !important;
  }

  .main-nav .nav-dropdown:hover .nav-mega,
  .main-nav .nav-dropdown:focus-within .nav-mega{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(-39%,0) !important;
  }

  .main-nav .nav-dropdown:hover .nav-dropdown-caret,
  .main-nav .nav-dropdown:focus-within .nav-dropdown-caret{
    transform:rotate(180deg) !important;
  }

  .nav-mega-intro{
    padding:2px 30px 2px 6px !important;
    border-right:1px solid rgba(255,255,255,.14) !important;
  }

  .nav-mega-kicker,
  .nav-mega-label{
    display:block !important;
    margin:0 0 20px !important;
    color:#e6a01f !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }

  .nav-mega-intro h3{
    margin:0 0 12px !important;
    color:#fff !important;
    font-family:inherit !important;
    font-size:24px !important;
    font-weight:800 !important;
    line-height:1.12 !important;
    letter-spacing:-.02em !important;
    text-transform:none !important;
  }

  .nav-mega-intro p{
    margin:0 0 24px !important;
    color:rgba(225,232,239,.75) !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.55 !important;
    text-transform:none !important;
  }

  .main-nav .nav-mega .nav-mega-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    min-width:176px !important;
    padding:12px 14px !important;
    border:1px solid #d58d16 !important;
    border-radius:6px !important;
    color:#fff !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
    text-transform:uppercase !important;
    opacity:1 !important;
  }

  .main-nav .nav-mega .nav-mega-button b{
    color:#e7a12a !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .main-nav .nav-mega .nav-mega-button:hover{
    background:rgba(216,139,18,.12) !important;
  }

  .nav-mega-group{
    padding:2px 14px 2px 28px !important;
  }

  .nav-mega-group + .nav-mega-group{
    border-left:1px solid rgba(255,255,255,.08) !important;
  }

  .main-nav .nav-mega .nav-mega-link{
    position:relative !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 12px !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    margin:0 0 7px !important;
    padding:10px 9px !important;
    border-radius:7px !important;
    color:#fff !important;
    font-size:inherit !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    opacity:1 !important;
    transition:background .18s ease,color .18s ease,transform .18s ease !important;
  }

  .main-nav .nav-mega .nav-mega-link::after,
  .main-nav .nav-mega .nav-mega-button::after{
    display:none !important;
    content:none !important;
  }

  .main-nav .nav-mega .nav-mega-link:hover,
  .main-nav .nav-mega .nav-mega-link.active{
    background:rgba(216,139,18,.11) !important;
    transform:translateX(2px) !important;
  }

  .nav-mega-icon{
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    color:#f3f5f7 !important;
    font-style:normal !important;
  }

  .nav-mega-icon svg{
    width:24px !important;
    height:24px !important;
    stroke:currentColor !important;
    fill:none !important;
    stroke-width:1.8 !important;
  }

  .nav-mega-copy{
    min-width:0 !important;
    display:block !important;
  }

  .nav-mega-copy strong{
    display:block !important;
    margin:0 0 3px !important;
    color:#fff !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }

  .nav-mega-copy small{
    display:block !important;
    color:rgba(218,225,232,.72) !important;
    font-size:10px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    white-space:normal !important;
  }

  .nav-mega-arrow{
    color:rgba(255,255,255,.68) !important;
    font-size:20px !important;
    font-weight:300 !important;
    line-height:1 !important;
  }

  .main-nav .nav-mega .nav-mega-link:hover .nav-mega-icon,
  .main-nav .nav-mega .nav-mega-link:hover .nav-mega-arrow,
  .main-nav .nav-mega .nav-mega-link.active .nav-mega-icon,
  .main-nav .nav-mega .nav-mega-link.active .nav-mega-arrow{
    color:#e7a12a !important;
  }
}

@media (max-width:1050px) and (min-width:861px){
  .main-nav .nav-mega{
    width:min(630px,calc(100vw - 28px)) !important;
    padding:24px !important;
    grid-template-columns:.9fr 1.4fr !important;
  }
  .nav-mega-intro{padding-right:22px !important;}
  .nav-mega-group{padding-left:20px !important;padding-right:8px !important;}
  .nav-mega-intro h3{font-size:21px !important;}
}

/* Mobile: compact nested menu while preserving the same hierarchy. */
@media (max-width:860px){
  .main-nav .nav-dropdown{
    display:block !important;
    width:100% !important;
  }

  .main-nav .nav-dropdown > a{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
  }

  .main-nav .nav-dropdown-caret{
    color:#e7a12a !important;
    font-size:17px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .main-nav .nav-mega{
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 6px !important;
    padding:5px 0 6px 12px !important;
    border:0 !important;
    border-left:1px solid rgba(216,139,18,.42) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  .nav-mega-intro,
  .nav-mega-label{
    display:none !important;
  }

  .nav-mega-group,
  .nav-mega-group + .nav-mega-group{
    padding:0 !important;
    border:0 !important;
  }

  .main-nav .nav-mega .nav-mega-link{
    display:grid !important;
    grid-template-columns:26px minmax(0,1fr) 12px !important;
    align-items:center !important;
    gap:9px !important;
    width:100% !important;
    margin:0 !important;
    padding:8px 7px !important;
    border-radius:5px !important;
    color:rgba(255,255,255,.86) !important;
    font-size:11px !important;
    text-transform:none !important;
    opacity:1 !important;
  }

  .main-nav .nav-mega .nav-mega-link::after{
    display:none !important;
    content:none !important;
  }

  .main-nav .nav-mega .nav-mega-link:hover,
  .main-nav .nav-mega .nav-mega-link.active{
    background:rgba(216,139,18,.1) !important;
    color:#fff !important;
  }

  .nav-mega-icon{
    width:24px !important;
    height:24px !important;
    display:grid !important;
    place-items:center !important;
    color:#e7a12a !important;
  }
  .nav-mega-icon svg{width:19px !important;height:19px !important;stroke:currentColor !important;fill:none !important;}
  .nav-mega-copy strong{display:block !important;color:#fff !important;font-size:11px !important;font-weight:700 !important;text-transform:none !important;}
  .nav-mega-copy small{display:none !important;}
  .nav-mega-arrow{color:rgba(255,255,255,.6) !important;font-size:17px !important;line-height:1 !important;}
}


/* =========================================================
   FINAL HEADER / MEGA MENU OVERFLOW FIX
   Keep the How It Works mega menu above the section that follows
   the hero. This intentionally creates a desktop stacking layer
   for the hero/header while still allowing the menu to overflow.
   ========================================================= */
@media (min-width:861px){
  html body main > .hero#overview{
    position:relative !important;
    overflow:visible !important;
    z-index:40 !important;
  }

  html body main > .hero#overview > header.site-header#top{
    position:absolute !important;
    overflow:visible !important;
    z-index:1000 !important;
  }

  html body main > .hero#overview > header.site-header#top .nav-wrap,
  html body main > .hero#overview > header.site-header#top .main-nav,
  html body main > .hero#overview > header.site-header#top .nav-dropdown{
    overflow:visible !important;
  }

  html body main > .hero#overview > header.site-header#top .nav-dropdown{
    z-index:1001 !important;
  }

  html body main > .hero#overview > header.site-header#top .nav-mega{
    z-index:1100 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* The section after the hero stays below the open mega menu. */
  html body main > .hero#overview + section{
    position:relative !important;
    z-index:1 !important;
  }
}

/* =========================================================
   HEADER CTA — BUTTON ONLY
   Remove the seat-count caption from the navigation and keep a
   single clean Apply Now button with consistent padding.
   ========================================================= */
.site-header .nav-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  text-align:center !important;
}

.site-header .nav-cta .btn{
  min-width:132px !important;
  margin:0 !important;
  padding:14px 24px !important;
  line-height:1 !important;
}

.site-header .nav-cta small{
  display:none !important;
}

@media (max-width:620px){
  .site-header .nav-cta .btn{
    min-width:106px !important;
    padding:11px 14px !important;
  }
}

/* Mega menu CTA: use the exact same Apply Now button treatment as the header CTA. */
.main-nav .nav-mega .nav-mega-apply{
  width:auto;
  min-width:0;
  justify-self:start;
  margin-top:20px;
}
@media(max-width:860px){
  .main-nav .nav-mega .nav-mega-apply{
    margin-top:14px;
  }
}

/* =========================================================
   OVERVIEW — HOW IT WORKS MOBILE 2-COLUMN GRID
   Keep the five steps compact on phones. The fifth item spans
   both columns and is centered on its own final row.
   ========================================================= */
@media (max-width:680px){
  .overview-page .process-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 14px !important;
    align-items:start !important;
  }

  .overview-page .process-arrow{
    display:none !important;
  }

  .overview-page .process-step{
    width:100% !important;
    margin:0 !important;
    padding:0 4px !important;
    min-width:0 !important;
  }

  .overview-page .process-step:last-of-type{
    grid-column:1 / -1 !important;
    width:min(190px,100%) !important;
    justify-self:center !important;
    margin-inline:auto !important;
  }

  .overview-page .process-icon{
    width:56px !important;
    height:56px !important;
    margin-bottom:8px !important;
  }

  .overview-page .process-step h3{
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .overview-page .process-step p{
    font-size:9px !important;
    line-height:1.45 !important;
  }
}

/* =========================================================
   MOBILE HOW IT WORKS MENU — COLLAPSED BY DEFAULT
   The nested Founder / Accelerator links only open after the
   user taps How It Works. Desktop hover/focus behavior is unchanged.
   ========================================================= */
@media (max-width:860px){
  .main-nav .nav-dropdown .nav-mega{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .main-nav .nav-dropdown.mobile-open .nav-mega{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .main-nav .nav-dropdown.mobile-open .nav-dropdown-caret{
    transform:rotate(180deg) !important;
  }
}