/* HB Battle final readability + mobile marketing layout layer (2026-10-02) */
:root{--hb-final-ink:#172820;--hb-final-muted:#405249;--hb-final-paper:#f5f8f6;--hb-final-green:#087f55;--hb-final-gold:#d6a93f}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{overflow-x:hidden;overflow-wrap:break-word}
/* Ensure every element inside light cards inherits dark readable text, even when old CSS uses !important. */
.card,.card *, .faq-item,.faq-item *, .step,.step *, .note,.note *, .guide-card,.guide-card *, .article-card,.article-card *, .popular-guide-card,.popular-guide-card *, .content-card,.content-card *, .guide-list li,.guide-list li *{
  color:var(--hb-final-ink)!important;opacity:1!important;text-shadow:none!important
}
.card,.faq-item,.step,.note,.guide-card,.article-card,.popular-guide-card,.content-card,.guide-list li{
  background:var(--hb-final-paper)!important;border:1px solid rgba(23,40,32,.14)!important;border-radius:22px!important;box-shadow:0 8px 24px rgba(0,0,0,.09)!important
}
.card{padding:clamp(20px,4vw,32px)}
.card h2,.card h3,.faq-item summary,.step h2,.step h3{font-weight:750;line-height:1.35;letter-spacing:-.02em}
.card p,.faq-item p,.faq-a,.step p,.note p,.content p{font-size:clamp(16px,2.2vw,19px);line-height:1.75;color:var(--hb-final-muted)!important}
.card a,.faq-item a,.step a,.note a,.content a{color:var(--hb-final-green)!important;font-weight:700;text-underline-offset:3px}
.faq-item{margin:14px 0;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:20px 22px;cursor:pointer;list-style-position:inside;font-size:clamp(16px,2.1vw,19px)}
.faq-item summary::marker{color:var(--hb-final-gold)}
.faq-item[open] summary{border-bottom:1px solid rgba(23,40,32,.12)}
.faq-a{padding:18px 22px 22px}
.faq-a p{margin:0}
/* Marketing section rhythm: less dead space and a consistent reading width. */
.sec{padding-block:clamp(44px,7vw,84px)}
.sec-head{gap:18px;align-items:flex-end}
.sec h2{line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.sec p{max-width:68ch}
.grid{align-items:stretch}
.grid>.card{height:100%;box-sizing:border-box}
.site-footer .col a{display:block;width:fit-content;max-width:100%;line-height:1.6;overflow-wrap:anywhere;margin:0 0 10px}
.site-footer .footer-bottom{line-height:1.75}
.site-footer .legal-note{max-width:78ch}
/* Sticky app CTA must not cover FAQs, legal links, or the last paragraph. */
body{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
.mega-cta-bar{left:12px!important;right:12px!important;width:auto!important;max-width:620px!important;margin-inline:auto!important;box-sizing:border-box;z-index:40!important}
.mega-cta-bar a,.mega-cta-bar button{min-height:46px;line-height:1.25}
@media(max-width:600px){
 .wrap{width:auto;max-width:100%;margin-inline:auto;padding-inline:20px}
 .sec{padding-block:42px}
 .sec-head{align-items:flex-start;flex-direction:column}
 .grid{grid-template-columns:minmax(0,1fr)!important;gap:16px}
 .card{padding:22px!important;border-radius:22px!important}
 .faq-item summary{padding:18px 18px;min-height:64px}
 .faq-a{padding:16px 18px 20px}
 .site-footer .footer-grid{gap:28px}
 .site-footer .col a{font-size:16px;line-height:1.65}
 .mega-cta-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;padding:8px!important;gap:8px!important}
 .mega-cta-bar a,.mega-cta-bar button{font-size:14px!important;padding:12px 14px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}