/* VLM pre-launch usability, accessibility, and responsive refinements — July 2026 */
:root{
  --vlm-sage-text:#566b58;
  --vlm-champagne-text:#80643f;
  --vlm-muted-text:#666a70;
}
html{scroll-padding-top:78px}
body.modal-open,body.menu-open{overflow:hidden}

/* Keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #b38e56;
  outline-offset:3px;
}

/* Small text contrast on light backgrounds */
.eyebrow{color:var(--vlm-sage-text)}
.eyebrow--champ{color:var(--vlm-champagne-text)}
.subtitle-line,.tier-excl{color:var(--vlm-sage-text)}
.compare-note,.stats-fn,.impact-source,.tier-price-sub,.legal-note{color:var(--vlm-muted-text)}
.page-hero .eyebrow--champ,.exec-hero .eyebrow,.s-navy .eyebrow,.founding-cta .eyebrow,.cta-white .eyebrow{color:var(--champagne)}
.eyebrow--plat{color:var(--platinum)}
.footer-col-title{color:var(--champagne)}

/* Header and mobile navigation */
.nav{align-items:center}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo-img{display:block;align-self:center}
.hamburger{
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  border-radius:4px;
  color:var(--navy);
}
.hamburger span{pointer-events:none}
.mob-menu{
  max-height:calc(100vh - 68px);
  max-height:calc(100dvh - 68px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mob-menu a{display:block;padding:5px 0;min-height:34px}

/* Footer social link */
.footer-social-links{margin-top:22px;min-height:44px}
.footer-social-link{
  width:44px;
  height:44px;
  border-radius:5px;
  opacity:.86;
}
.footer-social-link:hover{opacity:1;background:rgba(255,255,255,.07)}
.footer-social-link svg{width:24px;height:24px}

/* Modal accessibility and touch targets */
.lead-modal{overflow-y:auto;overscroll-behavior:contain}
.lead-modal-card{max-height:92vh;max-height:92dvh}
.lead-modal-close{
  width:44px;
  height:44px;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Embedded form guardrails */
.hbspt-form,.hubspot-modal-form,.hs-form,.hs-form fieldset{max-width:100%!important}
.hs-form input,.hs-form select,.hs-form textarea,.hs-form .hs-button{max-width:100%!important}
.hs-form input,.hs-form select,.hs-form .hs-button{min-height:44px}
.hs-form .legal-consent-container,.hs-form .hs-richtext{overflow-wrap:anywhere}

/* Membership comparison: mobile horizontal comparison with a fixed feature column */
.membership-swipe-hint{display:none;font-size:12px;font-weight:600;color:var(--vlm-sage-text);margin:0 0 10px;line-height:1.5}
.membership-table-frame{position:relative}
.membership-table-frame::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(to left,rgba(15,27,45,.16),rgba(15,27,45,0));opacity:0;transition:opacity .2s ease}
.membership-table-frame.has-overflow::after{opacity:1}
.membership-table-frame.is-at-end::after{opacity:0}

/* Executive comparison cards are desktop table / mobile cards */
@media (max-width:768px){
  .membership-swipe-hint{display:block}
  .membership-table-scroll{overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
  .membership-table-scroll table{min-width:880px}
  .membership-table-scroll .th-feat,.membership-table-scroll .td-feat{position:sticky;left:0;z-index:3;box-shadow:2px 0 5px rgba(15,27,45,.08)}
  .membership-table-scroll .th-feat{z-index:5}

  .stats-table{display:block;outline:none!important;border:0!important;margin-top:24px!important}
  .stats-table thead{display:none}
  .stats-table tbody{display:grid;grid-template-columns:1fr;gap:16px}
  .stats-table tr{display:block;border:1px solid var(--platinum);border-radius:var(--radius);overflow:hidden;background:var(--white)}
  .stats-table td{display:block;width:100%;border:0!important;padding:16px 18px!important;font-size:13px!important}
  .stats-table .td-metric{background:var(--ivory);border-bottom:1px solid var(--platinum)!important}
  .stats-table .td-metric .metric-label{position:static!important;display:block;transform:none!important;text-align:left!important;font-size:15px;font-weight:600;line-height:1.4}
  .stats-table .td-without::before,.stats-table .td-with::before{content:attr(data-label);display:block;margin-bottom:7px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vlm-champagne-text);line-height:1.4}
  .stats-table .td-with{background:rgba(127,145,128,.06)}
}

/* Narrow phones and short landscape screens */
@media (max-width:360px){
  .nav{padding-left:16px!important;padding-right:12px!important}
  .nav-logo-img{width:158px!important;max-width:calc(100vw - 76px)!important}
  .wrap,.two-col,.compare-outer,.stats-inner,.exec-wrap{padding-left:18px!important;padding-right:18px!important}
  .btn{white-space:normal;text-align:center}
}
@media (max-height:520px) and (orientation:landscape){
  .mob-menu{padding-top:14px!important;padding-bottom:14px!important}
  .mob-menu ul{gap:8px!important}
  .lead-modal{align-items:flex-start;padding-top:8px!important;padding-bottom:8px!important}
  .lead-modal-card{max-height:calc(100dvh - 16px)!important}
}

/* Text resizing */
@media (max-width:1024px){
  .nav{min-height:68px;height:auto}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:360px){
  .card-grid{min-width:0;width:100%}
  .card-grid>*{min-width:0;max-width:100%}
  .d-card{width:100%;overflow-wrap:anywhere;padding-left:22px;padding-right:22px}
}
@media (max-width:360px){
  .diag-grid{min-width:0;width:100%}
  .diag-grid>*{min-width:0;max-width:100%}
  .dc{width:100%;overflow-wrap:anywhere;padding-left:22px;padding-right:22px}
  .cta-support-spaced .nowrap{white-space:normal}
}