/* The opening screen: exactly one viewport (header + hero + law ticker), everything visible at once */
.hx { min-height: calc(100svh - 66px - 87px); padding: 2.5rem 0 2rem !important; display: flex; align-items: center; }
.hx > .wrap { width: 100%; }
@media (min-width: 980px) { .hx { padding: 1.9rem 0 !important; } }
.hx h1 { font-size: clamp(2.2rem, min(5vw, 8.2svh), 4.4rem); margin: .3rem 0 .6rem; }
.hx-sub { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }
.hx .btn-row { margin-top: clamp(1rem, 2.4svh, 1.5rem); }
.hx-visual { height: clamp(400px, 60svh, 520px); }
@media (max-height: 800px) and (min-width: 980px) { .hx-visual { transform: scale(.86); transform-origin: center right; } .hx .eyebrow { margin-bottom: .3rem; } }

/* Proof strip inside the hero, so the first screen carries the evidence */
.hx-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.6rem; margin-top: clamp(1.2rem, 3.2svh, 2rem); padding-top: clamp(.9rem, 2.2svh, 1.3rem); border-top: 1px solid rgba(174,185,204,.22); max-width: 640px; }
@media (min-width: 640px) { .hx-proof { grid-template-columns: repeat(4, auto); justify-content: start; } }
.hx-proof div { display: flex; flex-direction: column; }
.hx-proof b { font-size: clamp(1.4rem, 3.4svh, 1.8rem); letter-spacing: -.03em; color: #fff; line-height: 1; }
.hx-proof span { color: #AEB9CC; font-size: .8rem; margin-top: .3rem; max-width: 13ch; line-height: 1.35; }
.hx-proof .pf-gold b { color: #E2BD4A; }
.hx-copy .hx-proof { animation: rise .9s cubic-bezier(.2,.8,.2,1) .55s both; }

/* The law ticker sits at the bottom edge of the first screen */
.lawbar { padding: .9rem 0 !important; }