/* =====================================================================
   VWM GLOBAL STYLES — single source of truth for chrome, scale, and
   page-type polish across ALL pages. Linked on every page via:
     <link rel="stylesheet" href="/assets/vwm-global.css">
   Edit HERE to change every page at once. Do not duplicate per-page.
   ===================================================================== */

/* ---- SCALE / WRAP / TYPOGRAPHY (all pages) ---- */

@media screen{
  /* ---- guarantee vertical scroll (defeat stuck loader html{overflow:hidden}) ---- */
  html{overflow-y:auto!important;}
  /* ---- overflow guard ---- */
  html,body{max-width:100%;overflow-x:hidden;}
  /* ---- unified horizontal alignment box across ALL pages + sections ---- */
  :root{--container-max:1400px!important;--container-px:24px!important;}
  html body .container,html body .nav-inner,html body .footer-inner,
  html body .rt-shell,html body .rt-wrap,html body .o-container,
  html body .vcm-inner,html body .aligned-section,html body .section-title-strip,
  html body .vwm-article,html body .vwm-art-hero,
  html body .feature-demo-section > div,html body main > section > .container{
    max-width:1400px!important;margin-left:auto!important;margin-right:auto!important;
    padding-left:clamp(18px,3vw,32px)!important;padding-right:clamp(18px,3vw,32px)!important;
    box-sizing:border-box!important;}
  /* ---- typography scale (slightly larger than prior pass; still capped) ---- */
  html body .display,html body h1.display,html body .rt-hero__h1,html body .vwm-art-h1,
  html body .hero h1,html body main h1{
    font-size:clamp(30px,5.4vw,56px)!important;line-height:1.06!important;letter-spacing:-0.01em!important;}
  html body h2,html body .display.section,html body .section-title,html body .sec-h2,
  html body main h2,html body section h2{font-size:clamp(23px,3.1vw,38px)!important;line-height:1.15!important;}
  html body h2.display.section,html body h2.display,html body .display.section.display{
    font-size:clamp(23px,3.1vw,40px)!important;line-height:1.14!important;}
  html body .vcm-inner .section-head h2.display.section,
  html body .section-head h2.display.section,
  html body .section-title-strip h2.display.section,
  html body .section-title-strip h2,
  html body .aligned-section h2.display.section,
  html body .live-rates-section h2.display.section{font-size:clamp(26px,3.3vw,42px)!important;line-height:1.12!important;}
  html body .hero-sub-o,html body .hero-sub,html body .rt-hero__sub{font-size:clamp(16px,1.55vw,19px)!important;line-height:1.55!important;}
  html body .vcm-headline-numeral{font-size:clamp(44px,5.2vw,78px)!important;}
  html body .sc-savings{font-size:clamp(36px,4.6vw,64px)!important;}
  /* ---- hero: larger than prior pass so it doesn't cut off too quick, still not 100vh ---- */
  html body .hero,html body .hero-photo,html body .o-hero,html body section.hero,
  html body .hero.hero-photo,html body .hero.photo-hero,html body .hero-photo.hero-photo-skyline,
  html body .hero.hero-photo.hero-photo-skyline{
    min-height:clamp(560px,78vh,820px)!important;
    padding-top:clamp(120px,16vh,170px)!important;
    padding-bottom:clamp(64px,9vh,110px)!important;}
  /* ---- "Try the Tools" demo cards: larger + wider grid ---- */
  html body .feature-demo-grid{max-width:920px!important;gap:clamp(20px,2.4vw,32px)!important;}
  html body .feature-demo-card{min-height:clamp(360px,34vw,440px)!important;}
  /* ---- hamburger drawer content: slightly larger ---- */
  html body .rtd-list a{font-size:19px!important;padding:16px 2px!important;}
  html body .rtd-eyebrow{font-size:13px!important;}
  html body .rtd-tel{font-size:17px!important;}
  html body .r11-panel__link{font-size:19px!important;}
  /* ---- header: compact + no brand wrap + fix logo overlap ---- */
  html body .brand-name{white-space:nowrap!important;}
  html body .brand-stamp{white-space:nowrap!important;}
  html body .nav-origin{gap:clamp(14px,2vw,28px)!important;align-items:center!important;}
  html body .nav-origin .brand,html body .nav-origin .nav-brand,
  html body .nav-origin a.brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;flex:0 0 auto!important;}
  html body .nav-origin .brand .brand-mark{margin-right:4px!important;flex:0 0 auto!important;}
  html body .nav-origin .brand-mark,html body .nav-origin .brand-mark img{flex:0 0 auto!important;}
  html body .nav-origin .brand-text,html body .nav-origin .brand-name-wrap{min-width:0!important;}
}
/* ---- mobile header collapse: logo + hamburger only ---- */
@media screen and (max-width:640px){
  html body .nav-origin .nav-tel,
  html body .nav-origin .cta-glow,
  html body .nav-origin .nav-right > .btn-origin,
  html body .r11-nav__cta{display:none!important;}
  html body .nav-origin{padding:9px 15px!important;top:10px!important;left:10px!important;right:10px!important;}
  html body .brand-name{font-size:15px!important;line-height:1.1!important;}
  html body .brand-stamp{font-size:9.5px!important;}
  html body .feature-demo-card{min-height:300px!important;}
  html body .rtd-list a{font-size:18px!important;}
}
@media screen and (max-width:380px){
  html body .nav-origin{padding:8px 12px!important;}
  html body .brand-name{font-size:14px!important;}
}

/* ---- WHITE FROSTED HEADER (all pages) ---- */

.nav-origin.on-photo{
  background:rgba(255,255,255,0.82)!important;
  border:1px solid rgba(10,10,10,0.07)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  box-shadow:0 6px 22px -14px rgba(10,10,10,0.16)!important;
}
.nav-origin.on-photo .brand-name,
.nav-origin.on-photo .nav-links a,
.nav-origin.on-photo .nav-tel,
.nav-origin.on-photo .nav-toggle,
.nav-origin.on-photo .r11-ham-toggle{ color:var(--o-text,#0a0a0a)!important; }
.nav-origin.on-photo .brand-stamp{ color:var(--o-accent,var(--rt-accent))!important; }
.nav-origin.on-photo .nav-links a{ background:rgba(10,10,10,0.04)!important; }
.nav-origin.on-photo .nav-links a:hover{ background:rgba(10,10,10,0.08)!important; }
.nav-origin.on-photo .nav-toggle,
.nav-origin.on-photo .r11-ham-toggle{ border-color:rgba(10,10,10,0.12)!important; }
.nav-origin.on-photo .btn-origin.ghost{ background:rgba(10,10,10,0.04)!important; color:var(--o-text,#0a0a0a)!important; }

/* ---- APPLY PAGE SIZING ---- */

@media screen{
  /* widen the quiz column so it isn't a cramped 448px sliver */
  html body .rma__wrap{max-width:620px!important;}
  /* question heading — clearly readable */
  html body .rma__q{font-size:clamp(24px,3vw,34px)!important;line-height:1.2!important;margin:-4px 0 10px!important;width:100%!important;display:block!important;text-align:center!important;}
  html body .rma__step-count,html body .rma__progress-label{font-size:14px!important;}
  /* option rows — bigger touch targets, larger label */
  html body .rma__opt{padding:18px 20px!important;border-radius:14px!important;min-height:64px!important;}
  html body .rma__opt-label{font-size:17px!important;font-weight:500!important;}
  html body .rma__opt svg,html body .rma__opt .rma__opt-icon{width:22px!important;height:22px!important;}
  html body .rma__opts{gap:12px!important;display:flex!important;flex-direction:column!important;}
  /* inputs inside later steps */
  html body .rma__input,html body .rma__wrap input,html body .rma__wrap select{
    height:54px!important;font-size:17px!important;border-radius:12px!important;padding:0 16px!important;}
  /* nav buttons */
  html body .rma__next,html body .rma__back{font-size:16px!important;padding:15px 28px!important;border-radius:12px!important;}
}
@media screen and (max-width:680px){
  html body .rma__wrap{max-width:100%!important;}
  html body .rma__opt{padding:16px 16px!important;min-height:58px!important;}
  html body .rma__opt-label{font-size:16px!important;}
}

/* ---- CALCULATOR ROCKET+ORIGIN ---- */

@media screen{
  /* ===== Rocket + Origin calculator restyle ===== */
  :root{--cx-accent:#DC2626;--cx-ink:#0a0a0a;--cx-mut:#6b7280;--cx-line:#e5e7eb;--cx-surf:#ffffff;--cx-soft:#f8f9fb;}

  /* Card: Origin elegance — soft border, layered shadow, generous radius */
  html body .calc-card{
    background:var(--cx-surf)!important;border:1px solid var(--cx-line)!important;
    border-radius:22px!important;box-shadow:0 1px 2px rgba(10,10,10,.04),0 24px 48px -28px rgba(10,10,10,.22)!important;
    padding:clamp(22px,3vw,38px)!important;max-width:1120px!important;margin:0 auto!important;}
  html body .calc-card__title{
    font-family:'Sora',sans-serif!important;font-weight:600!important;
    font-size:clamp(20px,2.2vw,26px)!important;letter-spacing:-.01em!important;color:var(--cx-ink)!important;
    margin:0 0 20px!important;}

  /* Inputs: Rocket clarity — bigger touch target, rounded, subtle fill, crisp focus */
  html body .calc-input,html body .calc-field input,html body .calc-field select{
    height:54px!important;border:1.5px solid var(--cx-line)!important;border-radius:14px!important;
    background:var(--cx-soft)!important;font-size:17px!important;color:var(--cx-ink)!important;
    padding:0 16px!important;transition:border-color .16s,box-shadow .16s,background .16s!important;
    -webkit-appearance:none;appearance:none;width:100%!important;box-sizing:border-box!important;}
  html body .calc-input:hover,html body .calc-field input:hover,html body .calc-field select:hover{border-color:#cbd5e1!important;}
  html body .calc-input:focus,html body .calc-field input:focus,html body .calc-field select:focus{
    outline:none!important;border-color:var(--cx-accent)!important;background:#fff!important;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--cx-accent) 12%,transparent)!important;}
  html body .calc-input-prefix,html body .calc-input-suffix{color:var(--cx-mut)!important;font-size:16px!important;font-weight:500!important;}

  /* Labels: Origin restraint */
  html body .calc-label{font-family:'Sora',sans-serif!important;font-weight:600!important;font-size:13px!important;
    letter-spacing:.02em!important;text-transform:uppercase!important;color:#374151!important;}
  html body .calc-label__hint{color:var(--cx-mut)!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;}
  html body .calc-field{margin-bottom:clamp(14px,1.6vw,20px)!important;}

  /* Segmented toggles (term, credit, down-payment chips): Rocket pill style */
  html body .calc-seg,html body .seg-group,html body .calc-toggle-group{
    background:var(--cx-soft)!important;border:1.5px solid var(--cx-line)!important;border-radius:14px!important;padding:4px!important;gap:4px!important;}
  html body .calc-seg button,html body .seg-btn,html body .calc-seg .seg,
  html body .calc-toggle-group button{
    border-radius:10px!important;font-weight:600!important;font-size:15px!important;padding:10px 14px!important;
    color:#475569!important;transition:all .15s!important;border:none!important;background:transparent!important;}
  html body .calc-seg button.active,html body .seg-btn.active,
  html body .calc-seg .seg.active,html body .calc-toggle-group button[aria-pressed="true"],
  html body .calc-toggle-group button.active{
    background:var(--cx-accent)!important;color:#fff!important;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--cx-accent) 50%,transparent)!important;}

  /* Result / total payment block: Origin display elegance */
  html body .total-payment-block,html body .calc-outputs .calc-result,html body .calc-result-card{
    background:linear-gradient(180deg,#fff, var(--cx-soft))!important;border:1px solid var(--cx-line)!important;
    border-radius:18px!important;padding:clamp(20px,2.4vw,30px)!important;box-shadow:0 12px 30px -20px rgba(10,10,10,.18)!important;}

  /* CTA after results: Rocket conversion button */
  html body .calc-cta-btn{
    background:var(--cx-accent)!important;color:#fff!important;border:none!important;border-radius:14px!important;
    font-weight:600!important;font-size:16px!important;padding:15px 26px!important;
    box-shadow:0 10px 24px -10px color-mix(in srgb,var(--cx-accent) 55%,transparent)!important;
    transition:transform .15s,box-shadow .15s!important;}
  html body .calc-cta-btn:hover{transform:translateY(-1px)!important;}

  /* FIX: sticky/CTA bar overlapping the header at top of page */
  html body .calc-sticky-bar{
    position:sticky!important;top:auto!important;bottom:0!important;z-index:80!important;
    margin-top:24px!important;}
}
@media screen and (max-width:760px){
  html body .calc-input,html body .calc-field input,html body .calc-field select{height:50px!important;font-size:16px!important;}
  html body .calc-card{padding:18px!important;border-radius:18px!important;}
}








/* ---- CANONICAL DRAWER (display-based top sheet; matches native model) ---- */
@media screen{
  html body #navDrawer{display:none!important;position:fixed!important;top:64px!important;left:0!important;right:0!important;
    background:#fff!important;border-bottom:1px solid #eee!important;padding:18px 20px!important;flex-direction:column!important;
    gap:4px!important;z-index:1000!important;max-height:calc(100vh - 64px)!important;overflow-y:auto!important;
    box-shadow:0 14px 30px -18px rgba(0,0,0,.25)!important;transform:none!important;}
  html body #navDrawer.open{display:flex!important;visibility:visible!important;}
  html body #navDrawerBackdrop{display:none!important;position:fixed!important;inset:0!important;background:rgba(10,10,10,.28)!important;z-index:999!important;}
  html body #navDrawerBackdrop.open{display:block!important;}
  html body #navDrawer a{display:block!important;padding:13px 8px!important;font-size:17px!important;color:#0a0a0a!important;text-decoration:none!important;border-bottom:1px solid #f3f3f3!important;}
  html body #navDrawer .nav-drawer-cta{background:#DC2626!important;color:#fff!important;text-align:center!important;border-radius:10px!important;margin-top:10px!important;border-bottom:0!important;font-weight:600!important;}
  html body #navDrawer .nav-drawer-phone{color:#DC2626!important;font-weight:600!important;border-bottom:0!important;}
  html body #navDrawer .nav-drawer-head{display:flex!important;justify-content:space-between!important;align-items:center!important;border-bottom:0!important;}
}


/* ============================================================
   VWM GLOBAL SIZING SYSTEM v2  (auto-applies to every page)
   One container scale, centered, with overflow protection.
   New pages inherit this automatically via vwm-global.css.
   ============================================================ */
@media screen{
  :root{
    --vwm-wide:1640px;   /* near-full-width bands */
    --vwm-main:1280px;   /* standard content sections */
    --vwm-read:760px;    /* long-form article body */
    --vwm-px:clamp(20px,4vw,40px);
  }
  /* hard overflow guard so nothing bleeds past the viewport */
  html,body{max-width:100%!important;overflow-x:hidden!important;}
  html body *{max-width:100%;}

  /* ---- unify ALL inner wrappers to ONE centered container ---- */
  html body .wrap,html body .shell,html body .hero-in,html body .pillbar-in,
  html body .statband,html body .tools,html body .lpath,html body .glossary,
  html body .news,html body .related,html body .container,html body .nav-inner,
  html body .footer-inner,html body .rt-shell,html body .rt-wrap,html body .o-container,
  html body .vcm-inner,html body .aligned-section,html body .vwm-article,
  html body main > section > .container{
    max-width:var(--vwm-main)!important;margin-left:auto!important;margin-right:auto!important;
    padding-left:var(--vwm-px)!important;padding-right:var(--vwm-px)!important;
    box-sizing:border-box!important;width:100%!important;float:none!important;}

  /* hero inner + faq stay reading-width but centered to the same axis */
  html body .hero-in,html body .faqwrap{max-width:var(--vwm-read)!important;}

  /* learning-center shell: drop the side rail into normal flow so nothing bleeds */
  html body .shell{display:block!important;}
  html body .shell > *{max-width:100%!important;}
  html body .rail{width:100%!important;margin-top:28px!important;}

  /* grids inside the unified container never exceed it */
  html body .gl-grid,html body .related-grid,html body .featured,
  html body .tools-grid,html body .guide-grid,html body .lpath-grid{
    width:100%!important;box-sizing:border-box!important;}

  /* tighten featured split so its art panel can't push width out */
  html body .featured{grid-template-columns:1.1fr 1fr!important;}
}
@media screen and (max-width:760px){
  html body .featured{grid-template-columns:1fr!important;}
  html body .gl-grid,html body .related-grid{grid-template-columns:1fr!important;}
}
/* ============================================================ */