/* v431G — Fees page manual layout cleanup.
   This is a real page-by-page pass, not a generic global rail.
   Scope: fees.html only. */

body.fees-page{
  --fees-rail: 1368px;
  --fees-gutter: clamp(36px, 4.2vw, 72px);
  --fees-gap: clamp(30px, 3.2vw, 52px);
}

/* Lock every major fees page section to the same visual width. */
body.fees-page .fees-hero > .container,
body.fees-page main > .section > .container,
body.fees-page .fees-check-section > .container,
body.fees-page footer > .container,
body.fees-page .footer-grid{
  width:min(calc(100% - (var(--fees-gutter) * 2)), var(--fees-rail)) !important;
  max-width:var(--fees-rail) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Make the checker section feel centered as one balanced block. */
body.fees-page .fees-check-section{
  padding-top:clamp(72px, 6.6vw, 112px) !important;
  padding-bottom:clamp(66px, 6vw, 104px) !important;
}

body.fees-page .fees-check-section > .container.grid.two{
  display:grid !important;
  grid-template-columns:minmax(0, .95fr) minmax(520px, 1.05fr) !important;
  gap:var(--fees-gap) !important;
  align-items:center !important;
}

/* The left text column must not look like it is floating too far away from the form. */
body.fees-page .fees-check-section > .container.grid.two > div:first-child{
  max-width:620px !important;
}

body.fees-page .fees-check-section h2{
  max-width:720px !important;
  font-size:clamp(40px, 4vw, 62px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

body.fees-page .fees-check-section p.muted{
  max-width:620px !important;
}

/* The fee checker card should not stretch too much to the far right. */
body.fees-page .fees-check-section .fee-card{
  width:100% !important;
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  padding:clamp(28px, 3vw, 42px) !important;
  border-radius:28px !important;
}

/* Tables and lower blocks sit on the same rail and do not drift. */
body.fees-page .urgent-table-wrap,
body.fees-page .fees-table,
body.fees-page .fees-example-grid,
body.fees-page .fees-trust-section .trust-grid{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

body.fees-page main > .section:not(.fees-check-section){
  padding-top:clamp(58px, 5vw, 88px) !important;
  padding-bottom:clamp(58px, 5vw, 88px) !important;
}

body.fees-page main > .section > .container > .eyebrow,
body.fees-page main > .section > .container > h2,
body.fees-page main > .section > .container > p.muted,
body.fees-page main > .section > .container > .section-lead{
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}

body.fees-page main > .section > .container > p.muted,
body.fees-page main > .section > .container > .section-lead{
  max-width:980px !important;
}

/* Fees trust grid: keep true 4x2 layout, centered inside the same width. */
body.fees-page .fees-trust-section .trust-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}

body.fees-page .fees-trust-section .trust-card{
  min-height:0 !important;
  padding:22px 24px !important;
}

/* Example/CTA area should not become a different-width island. */
body.fees-page .fees-example-grid,
body.fees-page .section > .container.grid.two{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:var(--fees-gap) !important;
  align-items:stretch !important;
}

body.fees-page .section > .container .hero-actions{
  justify-content:flex-start !important;
}

/* Keep decorative backgrounds from visually defining a different alignment than content. */
body.fees-page .section::before,
body.fees-page .section::after{
  pointer-events:none !important;
}

/* Floating chat: on fees page, keep Need Help away from table/card content a bit more. */
@media (min-width: 1100px){
  body.fees-page .vge-chatbot-root:not(.is-open){
    right:18px !important;
  }
}

/* Responsive: stack cleanly without breaking the same rail. */
@media (max-width: 1180px){
  body.fees-page{
    --fees-gutter: clamp(24px, 4vw, 44px);
  }

  body.fees-page .fees-check-section > .container.grid.two,
  body.fees-page .fees-example-grid,
  body.fees-page .section > .container.grid.two{
    grid-template-columns:1fr !important;
  }

  body.fees-page .fees-check-section .fee-card{
    max-width:760px !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

  body.fees-page .fees-trust-section .trust-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  body.fees-page{
    --fees-gutter: 18px;
  }

  body.fees-page .fees-check-section{
    padding-top:44px !important;
    padding-bottom:44px !important;
  }

  body.fees-page .fees-check-section h2{
    font-size:clamp(32px, 9vw, 42px) !important;
  }

  body.fees-page .fees-check-section .fee-card{
    padding:22px !important;
    border-radius:22px !important;
  }

  body.fees-page .fees-trust-section .trust-grid{
    grid-template-columns:1fr !important;
  }
}