/* Streams finding order: the approved opening, sized to one visible viewport. */
:root { background:#080f1a; --welcome-ink:#eff4fa; --welcome-teal:#76d4c7; }
body { padding-top:0; }
.header { position:absolute; z-index:3; top:max(28px,env(safe-area-inset-top)); left:var(--page-gutter); right:var(--page-gutter); height:auto; margin:0; border:0; }
.header .brand { gap:10px; }
.header .brand img { width:32px; height:auto; }
.header .brand span { font-size:30px; font-weight:600; letter-spacing:-1.6px; line-height:1; }
.header { gap:12px; }
.header .brand { flex-shrink:0; }
.header-actions { display:flex; align-items:center; gap:8px; }
.account-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border:1px solid #a4b3c133; border-radius:6px; color:var(--welcome-ink); background:#ffffff03; font-size:13px; font-weight:500; line-height:1.2; white-space:nowrap; transition:background .2s,border-color .2s,color .2s; }
.account-link:hover { background:#ffffff0c; border-color:#a4b3c177; }
.account-register { background:var(--welcome-teal); border-color:var(--welcome-teal); color:#080f1a; }
.account-register:hover { background:#9ae5da; border-color:#9ae5da; }
.account-link:focus-visible { outline:2px solid var(--welcome-teal); outline-offset:4px; }
.account-link[aria-current="page"] { color:var(--welcome-teal); border-color:#76d4c766; background:#76d4c708; }
.hero.streams-hero { display:block; isolation:isolate; position:relative; overflow:hidden; width:100%; height:100vh; height:100svh; min-height:0; max-width:none; margin:0; padding:0; background:#080f1a; color:var(--welcome-ink); }
.streams-hero::before { display:none; }
.streams-hero .flow-canvas,.streams-hero .flow-fallback { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:fill; pointer-events:none; z-index:0; }
.streams-hero .flow-canvas { opacity:0; }
.streams-hero.flow-ready .flow-canvas { opacity:1; }
.streams-hero.flow-ready .flow-fallback { visibility:hidden; }
.streams-hero .hero-copy { position:absolute; z-index:1; top:19%; left:var(--page-gutter); right:var(--page-gutter); min-height:0; max-width:none; pointer-events:none; }
.streams-hero .eyebrow { display:block; font-size:clamp(9px,1.4svh,11px); font-weight:500; line-height:1.5; letter-spacing:.18em; color:#a6b7c6; margin:0 0 clamp(14px,3svh,24px); }
.streams-hero h1 { font-size:clamp(36px,min(7.3vw,12svh),112px); font-weight:500; line-height:1.05; letter-spacing:-.065em; margin:0; color:var(--welcome-ink); }
.streams-hero h1 span { color:var(--welcome-teal); }
.streams-hero .hero-description { font-size:clamp(12px,min(1.45vw,2.4svh),17px); font-weight:400; line-height:1.65; letter-spacing:-.01em; color:#a2b2c1; max-width:420px; margin:clamp(14px,3.2svh,28px) 0 0; }
.streams-hero .welcome-caption { position:absolute; z-index:1; left:var(--page-gutter); right:var(--page-gutter); bottom:max(26px,env(safe-area-inset-bottom)); display:flex; justify-content:space-between; gap:16px; font-size:clamp(10px,.8vw,12px); line-height:1.4; letter-spacing:.02em; color:#8b9cac; }
.streams-hero.is-introducing .hero-copy { animation:welcome-copy 1.1s .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes welcome-copy { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:620px) {
  .header { top:max(24px,env(safe-area-inset-top)); }
  .header .brand { gap:9px; }
  .header .brand img { width:30px; }
  .header .brand span { font-size:28px; }
  .account-link { padding-inline:12px; font-size:12px; }
  .streams-hero .hero-copy { top:19%; }
  .streams-hero .eyebrow { font-size:9px; margin-bottom:18px; }
  .streams-hero h1 { font-size:clamp(30px,min(11.5vw,9svh),64px); }
  .streams-hero .hero-description { font-size:13px; margin-top:20px; max-width:270px; }
  .streams-hero .welcome-caption { font-size:10px; bottom:max(22px,env(safe-area-inset-bottom)); gap:12px; }
}
@media(max-height:500px) {
  .header { top:max(18px,env(safe-area-inset-top)); }
  .header .brand img { width:25px; }
  .header .brand span { font-size:25px; }
  .streams-hero .hero-copy { top:21%; }
  .streams-hero .eyebrow { font-size:8px; margin-bottom:10px; }
  .streams-hero h1 { font-size:clamp(28px,min(6.7vw,10svh),48px); }
  .streams-hero .hero-description { font-size:11px; line-height:1.5; margin-top:12px; }
  .streams-hero .welcome-caption { font-size:9px; bottom:max(14px,env(safe-area-inset-bottom)); }
}
@media(max-width:420px) {
  .header-actions { gap:6px; }
  .account-link { padding-inline:9px; font-size:11px; }
}
@media(max-width:360px) {
  .header { gap:10px; }
  .header .brand { gap:7px; }
  .header .brand img { width:28px; }
  .header .brand span { display:none; }
  .header-actions { gap:6px; }
  .account-link { padding-inline:9px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .streams-hero.is-introducing .hero-copy { animation:none; } }
html[data-motion="off"] .streams-hero .hero-copy { opacity:1; transform:none; animation:none; }