.hero{background:var(--field);color:var(--on-field);text-align:center;padding:28px 16px clamp(40px,7vw,80px);display:flex;flex-direction:column;align-items:center}
.hero .brand{margin-bottom:clamp(28px,6vw,56px)}
.hero .mark{background:var(--on-field)}
.hero .mark::after{border-color:var(--field)}
.hero h1{font:650 clamp(2.4rem,7.4vw,5rem)/1 Bricolage,sans-serif;letter-spacing:-.045em;max-width:30ch;margin:0 auto clamp(16px,2.4vw,24px);text-wrap:balance;color:var(--on-field)}
.hero h1 em{color:var(--marigold)}
.hero .sub{font-size:clamp(17px,2.4vw,21px);line-height:1.5;max-width:80ch;margin:0 auto;color:var(--on-field-muted);text-wrap:balance}
.hero .cta{display:inline-block;margin-top:clamp(22px,3vw,32px);padding:15px 26px;border:0;border-radius:var(--r-control);background:var(--on-field);color:var(--field);font:600 17px/1 Geist,sans-serif;cursor:pointer}
.hero .cta:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
.hero figure{width:100%;max-width:1100px;margin:clamp(32px,6vw,64px) 0 0}
.hero video{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:var(--r-surface);box-shadow:var(--card-shadow);background:var(--sunk)}

.foot{padding:24px 16px 40px;text-align:center;font-size:14px}
.foot a{color:var(--muted)}

.join-dialog{width:calc(100% - 32px);max-width:600px;max-height:calc(100svh - 32px);margin:auto;padding:clamp(24px,5vw,40px) clamp(18px,5vw,36px);border:0;border-radius:var(--r-surface);background:var(--paper);color:var(--ink);box-shadow:var(--card-shadow);overflow:auto}
.join-dialog::backdrop{background:oklch(.2 .08 345 / .65)}
.join-dialog .close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
.join-dialog .close:hover{background:var(--sunk)}
.join-dialog .small{margin-top:28px}
.join-dialog .turnstile{min-height:0}