/* The homepage is one continuous document on every screen. */
html:has(body.scrolling-home), body.scrolling-home { height: auto; overflow: visible; overscroll-behavior: auto; }
.scrolling-home .page { height: auto; min-height: 100svh; display: block; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.scrolling-home .paged-content { display: block; width: 100%; overflow: visible; min-height: 0; scroll-snap-type: none; touch-action: auto; }
.scrolling-home .paged-content > section { height: auto; min-height: 0; scroll-snap-align: none; border-top: 1px solid var(--rule); padding: clamp(2.5rem, 7vw, 5rem) 0; }
.scrolling-home .paged-content > .hero { border-top: 0; }
.scrolling-home .page-controls { display: none; }
.scrolling-home .support-page { max-width: 48rem; margin-inline: auto; text-align: left; }
.scrolling-home .support-page h2 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.045em; margin-bottom: 1.25rem; }
.scrolling-home .support-page p { max-width: 42rem; color: var(--muted); line-height: 1.6; }
.scrolling-home .kofi-widget { display: block; width: 100%; height: 712px; margin: 1.5rem 0 1rem; border: 0; border-radius: 0; }
.scrolling-home .support-link { color: var(--maroon); font-size: .875rem; text-underline-offset: .2em; }
.scrolling-home footer { margin-top: 1rem; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {
 .scrolling-home .hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; }
 .scrolling-home .hero .mark { width: min(68%, 15rem); margin-bottom: 1.25rem; }
 .scrolling-home .release-page .releases { flex-direction: row; gap: 1.25rem; margin: .75rem 0; }
 .scrolling-home .release-page .release { flex: 1; }
 .scrolling-home .release-page .release + .release { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
 .scrolling-home .release-page .beta-link { font-size: clamp(1rem, 4.2vw, 1.5rem); white-space: nowrap; }
 .scrolling-home .release-page .availability { max-width: 34ch; }
 .scrolling-home .info-page, .scrolling-home .about { align-items: stretch; }
 .scrolling-home .hero .eyebrow { margin-bottom: 1rem; }
}


/* Flat maroon beta actions. */
.scrolling-home .release-page .beta-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 180px; padding: .85rem 1.25rem; border: 1px solid var(--maroon); border-radius: 999px; background: var(--maroon); color: #fff; font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; text-decoration: none; box-shadow: none; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.scrolling-home .release-page .beta-link:hover { background: #610019; border-color: #610019; text-decoration: none; }
.scrolling-home .release-page .beta-link:focus-visible { outline: 3px solid var(--maroon); outline-offset: 4px; }
@media (max-width: 700px), (orientation: landscape) and (max-height: 520px) and (max-width: 1024px) {
 .scrolling-home .release-page .releases { width: 100%; max-width: 30rem; gap: .75rem; }
 .scrolling-home .release-page .release { min-width: 0; }
 .scrolling-home .release-page .release + .release { border: 0; padding-left: 0; }
 .scrolling-home .release-page .beta-link { min-width: 0; width: 100%; min-height: 48px; padding: .85rem .55rem; font-size: clamp(.8125rem, 3.6vw, 1rem); white-space: nowrap; }
}

/* Light blurred scene, with a darker softly blurred building shape and no emphasized rooftop spires. */
.scrolling-home .hero { position: relative; isolation: isolate; }
.scrolling-home .hero::before { content: ""; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); pointer-events: none; background: url("/security-bank-soft-shape-v4.svg") no-repeat left center / cover; filter: none; }
.scrolling-home .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 calc((100% - 100vw) / 2); background: linear-gradient(to bottom, var(--paper), transparent 10%, transparent 72%, var(--paper)); }
@media (max-width: 700px) { .scrolling-home .hero::before { background-position: 22% center; } .scrolling-home .hero::after { background: linear-gradient(to bottom, var(--paper), transparent 10%, rgba(252,250,249,.12) 65%, var(--paper)); } }