/* Homepage only: header, hero and statistics share the opening viewport. */
#top>.hero{padding-top:28px}
@media(min-width:1001px){
  #top>.hero{min-height:calc(100svh - 82px);display:flex;flex-direction:column;justify-content:space-between;padding:22px 0 0}
  #top>.hero .status-hero-grid{flex:1;align-items:center;gap:36px;padding-top:0;padding-bottom:18px;min-height:0}
  #top>.hero .status-hero-copy{padding:0}
  #top>.hero .status-card-shell{padding:0}
  #top>.hero .trust-strip{margin-top:0;flex-shrink:0}
  #top>.hero .trust-strip div{padding-top:14px;padding-bottom:14px}
  #top>.hero .ct-stage{height:clamp(230px,calc(100svh - 390px),445px)}
  #top>.hero .ct-demo{padding:20px}
}
@media(max-width:1000px){#top>.hero{padding-top:28px}#top>.hero .trust-strip{margin-top:24px}}

/* The hero card. `.tax-motion-card` in app/page.tsx is the pre-hydration
   placeholder that public/ct-card-demo.js overwrites with the live CT
   Calculator 2026. It is the older design and it was on screen for the two
   or three seconds before that script ran, so it is hidden from first paint
   instead. The shell holds the calculator footprint (400px, the height of
   .ct-demo) and borrows its frame while empty, so nothing jumps when the
   real card arrives and the gap does not read as a hole in the hero.

   The markup itself stays: public/script.js animates .tax-motion-card and
   dereferences it with no null check, so deleting it would throw and take
   the rest of that file down with it. The :has() rule stops matching the
   moment ct-card-demo.js swaps the contents. */
#top>.hero .status-card-shell{min-height:400px}
#top>.hero .status-card-shell:has(>.tax-motion-card){border:.8px solid rgba(255,255,255,.1);border-radius:23px;background:radial-gradient(at 100% 0,rgba(37,71,82,.3),transparent 55%)}
#top>.hero .status-card-shell>.tax-motion-card{display:none}