/* Shared mobile fixes for the 11 product / advisor landing pages.
   Each page links this in addition to its inline <style>.
   Selectors below are intentionally generic to match the page templates. */

@media(max-width:768px){
  /* Mobile menu drawer for the simple nav used on landing pages */
  body.nav-locked{overflow:hidden}
  .nav-mobile{display:flex;flex-direction:column;justify-content:center;gap:5px;background:transparent;border:0;padding:8px 6px;cursor:pointer;width:36px;height:36px}
  .nav-mobile span{display:block;width:22px;height:2px;background:var(--navy,#1a365d);border-radius:2px;transition:transform .25s, opacity .25s}
  .nav-mobile.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-mobile.is-open span:nth-child(2){opacity:0}
  .nav-mobile.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links.is-open{
    display:flex !important;
    position:fixed;
    top:62px;
    left:0;
    right:0;
    bottom:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:24px 20px env(safe-area-inset-bottom,24px);
    background:#fff;
    border-top:1px solid #e5e7eb;
    overflow-y:auto;
    z-index:99;
  }
  .nav-links.is-open > a{display:block;width:100%;padding:14px 4px;border-bottom:1px solid #e5e7eb;font-size:16px}
  .nav-links.is-open .nav-cta{margin-top:16px;border-bottom:0;background:#ff8c42;color:#fff !important;text-align:center;border-radius:8px;padding:14px 20px}
}

@media(max-width:480px){
  html,body{overflow-x:hidden}
  nav{padding:14px 16px !important}
  .nav-rex{width:36px !important;height:36px !important}
  .nav-logo-text{font-size:19px !important;letter-spacing:-0.4px !important}
  .nav-tagline{display:none !important}
  .hero{padding:48px 18px 64px !important}
  .hero-content{padding:0 !important}
  .pill{font-size:11px !important;padding:5px 12px !important;margin-bottom:18px !important}
  .live-badge,.coming-soon,.trade-pill{font-size:10px !important;padding:5px 11px !important}
  .hero h1{font-size:clamp(28px,8vw,38px) !important;letter-spacing:-0.8px !important;line-height:1.12 !important;margin-bottom:18px !important}
  .hero h1 span{display:block}
  .hero p.lead{font-size:15.5px !important;line-height:1.55 !important;margin-bottom:24px !important}
  .savings-banner{padding:12px 16px !important;gap:8px !important;flex-direction:column;align-items:flex-start;text-align:left;margin-bottom:24px !important}
  .savings-banner .amt{font-size:20px !important}
  .savings-banner .lbl{font-size:12px !important}
  .hero-buttons{flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .hero-buttons a{width:100%;text-align:center;justify-content:center;padding:13px 18px !important;font-size:14.5px !important}
  .btn-primary,.btn-secondary{padding:13px 18px !important;font-size:14.5px !important}
  section{padding:56px 18px !important}
  h2.section-title{font-size:clamp(24px,6.5vw,32px) !important;letter-spacing:-0.5px !important;line-height:1.2 !important;margin-bottom:14px !important}
  p.section-lead{font-size:15.5px !important;line-height:1.55 !important;margin-bottom:32px !important}
  .grid-features,.modules,.funnel,.roadmap,.grid-routes{grid-template-columns:1fr !important;gap:14px !important}
  .feature,.module,.funnel-step,.route,.stage{padding:20px !important}
  .feature h3,.module h4,.route h3,.stage h3{font-size:16px !important}
  .feature p,.module p,.route p,.stage p{font-size:13.5px !important}
  .vs-card{grid-template-columns:1fr !important;gap:16px !important;padding:20px !important}
  .vs-card .side{padding:18px !important}
  .vs-card .big-num{font-size:38px !important;margin:8px 0 !important}
  .vs-card li{font-size:13px !important;padding:6px 0 !important}
  .vs-table table,.vs-bg table{font-size:12.5px}
  .vs-table th,.vs-table td{padding:10px 12px !important}
  /* Force horizontal scroll on dense comparison tables */
  .vs-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pricing-card{padding:28px 20px !important;margin-top:28px !important}
  .pricing-card h3{font-size:20px !important}
  .pricing-card .price{font-size:46px !important}
  .pricing-card .price small{font-size:14px !important}
  .pricing-card p{font-size:14px !important;line-height:1.55 !important}
  .pricing-card .btn-primary{width:100%;text-align:center;justify-content:center}
  .roi-stats{grid-template-columns:1fr !important;max-width:none !important;gap:10px !important}
  .roi-stat{padding:14px !important}
  .roi-stat .num{font-size:30px !important}
  .roi-stat .lbl{font-size:10.5px !important}
  .phase-card{padding:22px !important}
  .phase-card h3{font-size:18px !important}
  .phase-card li{font-size:14px !important}
  .module-tier .tier-header{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px !important}
  .module-tier .tier-header h3{font-size:17px !important}
  .module-tier .tier-header .price{margin-left:0;font-size:15px !important;padding:5px 11px !important}
  .rex-img{display:none !important}
  .hero-content{display:block !important;grid-template-columns:1fr !important}
  .key-point{padding:12px 16px !important;font-size:14px !important;line-height:1.55 !important}
  .base-strip{flex-direction:column;align-items:flex-start;padding:20px !important}
  .base-strip h3{font-size:17px !important}
  .base-strip p{font-size:13.5px !important}
  .base-strip .badge{margin-left:0;font-size:12px !important;padding:6px 12px !important}
  .interest-form{padding:22px !important}
  .interest-form h3{font-size:18px !important}
  .interest-form p{font-size:14px !important}
  .citation-note{padding:14px 18px !important;font-size:12.5px !important;line-height:1.55 !important}
  .pitch{padding:24px !important}
  .pitch h3{font-size:18px !important}
  .pitch p{font-size:14.5px !important}
  footer{padding:32px 18px !important;font-size:13px !important}
  footer p{line-height:1.7}
}

@media(max-width:380px){
  nav{padding:12px 14px !important}
  .nav-logo-text{font-size:17px !important}
  .hero h1{font-size:clamp(26px,8vw,34px) !important;letter-spacing:-0.6px !important}
  .hero p.lead{font-size:15px !important}
  section{padding:48px 16px !important}
  h2.section-title{font-size:22px !important}
}