/* GovInbox homepage flag background: fixed Three.js waving flag behind the hero.
   The flag sits at z-index 0, the scrim at 1, page content at 2+.
   Sections below the hero carry solid backgrounds so the flag reads as the hero backdrop. */
#flag-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#flag-bg canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.flag-scrim { display: none; }

body.flag-page .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #ffffff; }
body.flag-page .section,
body.flag-page .site-footer { position: relative; z-index: 2; }
body.flag-page .section,
body.flag-page .site-footer { background: rgba(255,255,255,.93); }
/* Hero floats over the flag: light text, transparent background */
body.flag-page .hero { position: relative; z-index: 2; background: rgba(255,255,255,.93); }
body.flag-page .hero h1,
body.flag-page .hero .lede,
body.flag-page .hero .eyebrow,
body.flag-page .hero .trust,
body.flag-page .hero .trust-name,
body.flag-page .hero .trial-note,
body.flag-page .hero .hero-how-link { color: #0f1e3c; }
body.flag-page .hero .lede,
body.flag-page .hero .trust { color: #334155; }
body.flag-page .hero h1,
body.flag-page .hero .lede,
body.flag-page .hero .eyebrow { text-shadow: none; }
body.flag-page .hero .btn-signal { box-shadow: 0 2px 14px rgba(0,0,0,.4); }