@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/dm-sans-latin.woff2) format('woff2')}

:root{
  /* Fuse Your Games Brand Guide v3 */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,sans-serif;
  --violet:#7730B5; --lavender:#B46FE3; --orchid:#9B4FD6; --lilac:#D3A6F2; --magenta:#A62A8E; --pink:#E46AC9;
  --indigo:#4F55D6; --periwinkle:#9CA2F5; --indigo-mist:#E8E9FC; --deep-indigo:#1E2042;
  --canvas-light:#F7F5FC; --canvas-dark:#151020; --text-light:#24172F; --text-dark:#F8F5FF;
  /* status: light-mode / dark-mode pairs */
  --ruby:#C2304F; --burnt-ember:#B04A1C; --jade:#177A57; --ruby-glow:#F0708A; --ember:#E8743B; --mint:#6ED6A4;
  /* ranking: light-mode / dark-mode pairs */
  --gold:#8A6A0C; --steel:#5E6B7A; --bronze:#94603A; --sunflower:#F2C94C; --silver:#C9D1DB; --copper:#D49A6E;
  /* theme-aware status and ranking (use these in components; dark mode swaps them below) */
  --danger:var(--ruby); --warning:var(--burnt-ember); --success:var(--jade);
  --rank-1:var(--gold); --rank-2:var(--steel); --rank-3:var(--bronze);
  /* category and class colors, light mode (dark-mode values are set in the dark blocks below) (icon tiles only; never buttons or status) */
  --cat-terracotta:#83483F;
  --cat-walnut:#6E5435;
  --cat-khaki:#766F47;
  --cat-cobalt:#0B1FD0;
  --cat-plum:#6D2173;
  --cat-lilac-gray:#77688D;
  --cat-lagoon:#127D76;
  --cat-sea-glass:#306064;
  --cat-aqua:#087691;
  --cat-azure:#0A6FC7;
  --cat-denim:#275A86;
  --cat-heather:#A95180;
  --ink:var(--canvas-dark); --ink-2:var(--deep-indigo); --ink-3:var(--canvas-dark); --line-dark:color-mix(in srgb,var(--periwinkle) 28%,var(--deep-indigo));
  --bg:var(--canvas-light); --card:#FFFFFF; --tint:var(--indigo-mist); --line:color-mix(in srgb,var(--lilac) 40%,var(--canvas-light));
  --fg:var(--text-light); --fg2:color-mix(in srgb,var(--text-light) 86%,var(--canvas-light)); --mute:color-mix(in srgb,var(--text-light) 72%,var(--canvas-light));
  --link:var(--violet); --banner-fg:var(--deep-indigo);
  --accent:var(--violet); --accent-hover:var(--orchid); --accent-lt:var(--lavender);
  --on-dark:var(--text-dark); --on-dark-2:color-mix(in srgb,var(--text-dark) 88%,var(--canvas-dark)); --on-dark-3:color-mix(in srgb,var(--text-dark) 72%,var(--canvas-dark));
  /* surfaces: dark bands, footer, card edge/shadow, outline accent */
  --band:var(--ink); --footer:color-mix(in srgb,var(--periwinkle) 30%,var(--indigo-mist));
  --edge:color-mix(in srgb,var(--lilac) 55%,var(--canvas-light));
  --card-shadow:0 1px 2px color-mix(in srgb,var(--violet) 10%,transparent),0 10px 24px -14px color-mix(in srgb,var(--violet) 40%,transparent);
  --outline:var(--violet);
  /* header, hero and themes band: Indigo Mist in light mode, dark band in dark mode */
  --tint-band:var(--indigo-mist); --tint-fg:var(--text-light); --tint-accent:var(--violet); --tint-surface:#FFFFFF;
  --tint-line:color-mix(in srgb,var(--periwinkle) 55%,var(--indigo-mist)); --tint-ok:var(--jade); --tint-err:var(--ruby);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --bg:var(--canvas-dark); --card:color-mix(in srgb,var(--lavender) 9%,var(--canvas-dark)); --tint:var(--deep-indigo); --line:color-mix(in srgb,var(--lavender) 22%,var(--canvas-dark));
  --fg:var(--text-dark); --fg2:color-mix(in srgb,var(--text-dark) 86%,var(--canvas-dark)); --mute:color-mix(in srgb,var(--text-dark) 68%,var(--canvas-dark)); --link:var(--lavender); --banner-fg:var(--text-dark);
  --danger:var(--ruby-glow); --warning:var(--ember); --success:var(--mint);
  --rank-1:var(--sunflower); --rank-2:var(--silver); --rank-3:var(--copper);
  --cat-terracotta:#DBB9B3;
  --cat-walnut:#D2BCA2;
  --cat-khaki:#AFA779;
  --cat-cobalt:#CFD3FC;
  --cat-plum:#EECCF0;
  --cat-lilac-gray:#ABA1BA;
  --cat-lagoon:#1BBBB1;
  --cat-sea-glass:#94C8CC;
  --cat-aqua:#0CB5DF;
  --cat-azure:#55ABF6;
  --cat-denim:#A0C4E3;
  --cat-heather:#CD98B4;
  --band:color-mix(in srgb,var(--deep-indigo) 55%,var(--canvas-dark)); --footer:color-mix(in srgb,var(--canvas-dark) 70%,#000);
  --edge:color-mix(in srgb,var(--lavender) 24%,var(--canvas-dark)); --card-shadow:none; --outline:var(--lavender);
  --tint-band:var(--band); --tint-fg:var(--text-dark); --tint-accent:var(--lavender); --tint-surface:var(--deep-indigo);
  --tint-line:color-mix(in srgb,var(--periwinkle) 28%,var(--deep-indigo)); --tint-ok:var(--mint); --tint-err:var(--ruby-glow);
  color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--canvas-dark); --card:color-mix(in srgb,var(--lavender) 9%,var(--canvas-dark)); --tint:var(--deep-indigo); --line:color-mix(in srgb,var(--lavender) 22%,var(--canvas-dark));
  --fg:var(--text-dark); --fg2:color-mix(in srgb,var(--text-dark) 86%,var(--canvas-dark)); --mute:color-mix(in srgb,var(--text-dark) 68%,var(--canvas-dark)); --link:var(--lavender); --banner-fg:var(--text-dark);
  --danger:var(--ruby-glow); --warning:var(--ember); --success:var(--mint);
  --rank-1:var(--sunflower); --rank-2:var(--silver); --rank-3:var(--copper);
  --cat-terracotta:#DBB9B3;
  --cat-walnut:#D2BCA2;
  --cat-khaki:#AFA779;
  --cat-cobalt:#CFD3FC;
  --cat-plum:#EECCF0;
  --cat-lilac-gray:#ABA1BA;
  --cat-lagoon:#1BBBB1;
  --cat-sea-glass:#94C8CC;
  --cat-aqua:#0CB5DF;
  --cat-azure:#55ABF6;
  --cat-denim:#A0C4E3;
  --cat-heather:#CD98B4;
  --band:color-mix(in srgb,var(--deep-indigo) 55%,var(--canvas-dark)); --footer:color-mix(in srgb,var(--canvas-dark) 70%,#000);
  --edge:color-mix(in srgb,var(--lavender) 24%,var(--canvas-dark)); --card-shadow:none; --outline:var(--lavender);
  --tint-band:var(--band); --tint-fg:var(--text-dark); --tint-accent:var(--lavender); --tint-surface:var(--deep-indigo);
  --tint-line:color-mix(in srgb,var(--periwinkle) 28%,var(--deep-indigo)); --tint-ok:var(--mint); --tint-err:var(--ruby-glow);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--body)}
img{max-width:100%;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent-lt);outline-offset:3px}
section[id]{scroll-margin-top:16px}
h1,h2,h3{font-family:var(--display);text-wrap:balance}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.dark{background:var(--band);color:var(--on-dark)}
.dark a{color:var(--accent-lt)}
.dark.tint{background:var(--tint-band);color:var(--tint-fg);--on-dark:var(--tint-fg);--on-dark-2:color-mix(in srgb,var(--tint-fg) 88%,var(--tint-band));--on-dark-3:color-mix(in srgb,var(--tint-fg) 74%,var(--tint-band));--accent-lt:var(--tint-accent);--ink-2:var(--tint-surface);--line-dark:var(--tint-line);--msg-ok:var(--tint-ok);--msg-err:var(--tint-err)}
.dark.tint .theme-list li.on{color:var(--text-dark)}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.lc{text-transform:none}
.eyebrow{margin:0 0 12px;color:var(--link);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.dark .eyebrow{color:var(--accent-lt)}

/* header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-dark)!important;font-family:var(--display);font-weight:800;font-size:19px}
.brand img{width:40px;height:40px;border-radius:10px}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-light{display:none}
  :root:not([data-theme="light"]) .brand .logo-dark{display:block}
}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-size:15px}
.site-nav a{color:var(--on-dark)!important;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-nav a:hover{color:var(--accent-lt)!important}
.theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dark);background:var(--ink-2);color:var(--on-dark);display:inline-grid;place-items:center;cursor:pointer}
.theme-toggle:hover{border-color:var(--accent-lt)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .moon{display:none}
.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-dark);background:var(--ink-2);color:var(--on-dark);place-items:center;cursor:pointer}
.nav-toggle:hover{border-color:var(--accent-lt)}
.nav-toggle svg{width:20px;height:20px}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}
}

/* hero */
.hero-in{max-width:1200px;margin-inline:auto;padding:72px 24px 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero h1{font-weight:800;font-size:clamp(40px,6vw,68px);line-height:1.04;letter-spacing:-.02em}
.hero .lede{font-size:19px;line-height:1.55;color:var(--on-dark-2);max-width:34ch}
.hero-art{display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:480px;height:auto}

/* notify form */
.notify{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.notify input[type=email]{flex:1 1 240px;min-height:52px;padding:0 18px;border-radius:999px;border:1px solid var(--line-dark);background:var(--ink-2);color:var(--on-dark);font:inherit;font-size:16px}
.notify input::placeholder{color:color-mix(in srgb,var(--on-dark) 60%,var(--ink-2))}
.notify button{min-height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--accent);color:var(--text-dark);font-family:var(--display);font-weight:700;font-size:16px;cursor:pointer}
.notify button:hover{background:var(--accent-hover)}
.notify button[disabled]{opacity:.6;cursor:progress}
.notify .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notify-msg{min-height:1.55em;font-size:14px;color:var(--on-dark-3);width:100%}
.notify-msg.ok{color:var(--msg-ok,var(--mint))}
.notify-msg.err{color:var(--msg-err,var(--ruby-glow))}
.fineprint{font-size:14px;color:var(--on-dark-3)}

/* intro */
.intro{background:var(--tint);color:var(--banner-fg);padding:80px max(24px,calc((100% - 1200px)/2 + 24px));display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;align-items:center}
.intro h2{font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.01em}
.intro p{font-size:19px;line-height:1.6;color:var(--banner-fg)}

/* steps */
.fuse{max-width:1200px;margin-inline:auto;padding:96px 24px 104px}
.fuse h2,.nights h2{font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.fuse h2{margin-bottom:40px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.step{background:var(--card);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--edge);box-shadow:var(--card-shadow)}
.step .art{height:160px;border-radius:16px;background:var(--tint);display:flex;align-items:center;justify-content:center;overflow:hidden}
.step .art.deep{background:var(--ink-2)}
.step .art svg{width:100%;height:100%}
.step .num{font-family:var(--display);font-weight:800;color:var(--link);font-size:15px}
.step h3{font-size:22px}
.step p{line-height:1.55;color:var(--fg2)}
.disclaimer{margin-top:24px;font-size:14px;color:var(--mute);max-width:70ch}

/* themes */
.themes .wrap{padding-block:96px;display:flex;flex-direction:column;gap:20px}
.themes h2{font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.02em}
.themes h2 span{color:var(--accent-lt)}
.themes p{font-size:19px;line-height:1.55;color:var(--on-dark-2);max-width:52ch}
.theme-list{list-style:none;margin-top:16px;padding-bottom:6px;display:flex;gap:10px;overflow-x:auto}
.theme-list li{flex:none;padding:12px 18px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line-dark)}
.theme-list li.on{background:var(--accent);border-color:var(--outline)}

/* feature cards */
.nights{max-width:1200px;margin-inline:auto;padding:104px 24px}
.nights h2{margin-bottom:16px;max-width:22ch}
.nights .sub{margin-bottom:40px;font-size:18px;line-height:1.6;color:var(--fg2);max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--edge);box-shadow:var(--card-shadow);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:12px}
.card svg{width:32px;height:32px;color:var(--link)}
.card h3{font-size:20px}
.card p{line-height:1.55;color:var(--fg2)}

/* The Fuse Box (blog teaser) */
.fusebox{max-width:1200px;margin-inline:auto;padding:96px 24px 104px}
.fusebox h2{font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:24px}
.post{display:flex;flex-direction:column;gap:8px;max-width:640px;background:var(--card);border-radius:24px;padding:28px;text-decoration:none;color:var(--fg);border:1px solid var(--edge);box-shadow:var(--card-shadow)}
.post-meta{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.post h3{font-size:22px}
.post p{line-height:1.55;color:var(--fg2)}

.banner{background:var(--tint)}
.banner p{padding:40px 24px;text-align:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--banner-fg)}

/* socials */
.socials{max-width:1200px;margin-inline:auto;padding:80px 24px 88px;text-align:center}
.socials h2{font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:12px}
.socials p{font-size:18px;line-height:1.6;color:var(--fg2);margin-bottom:28px}
.social-list{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.social-list a{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--edge);box-shadow:var(--card-shadow);color:var(--fg);text-decoration:none;font-weight:700}
.social-list a:hover,.social-list a:focus-visible{border-color:var(--outline);box-shadow:0 0 0 1px var(--outline);color:var(--link)}
.social-list svg{width:24px;height:24px;flex:none}

/* faq */
.faq{max-width:1200px;margin-inline:auto;padding:104px 24px;text-align:left}
.faq h2{margin-bottom:32px;font-weight:800;font-size:clamp(30px,3.6vw,44px)}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:start}
@media (max-width:720px){.faq-list{grid-template-columns:1fr}}
.faq details{background:var(--card);border:1px solid var(--edge);box-shadow:var(--card-shadow);border-radius:16px;padding:20px 24px}
.faq summary{font-weight:700;font-size:18px;cursor:pointer;min-height:28px}
.faq details p{margin-top:12px;line-height:1.6;color:var(--fg2)}

/* closing */
.closing .wrap{max-width:760px;padding-block:104px;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
.closing h2{font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1.1}
.closing p{font-size:18px;line-height:1.6;color:var(--on-dark-2)}
.closing .notify{width:100%;max-width:520px}

/* footer */
.site-footer,.site-footer.dark.tint{background:var(--footer);border-top:1px solid var(--line-dark);color:var(--on-dark-3);font-size:14px}
.site-footer .wrap{padding-block:32px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.site-footer nav{display:flex;flex-wrap:wrap;gap:20px}
.site-footer a{color:var(--on-dark-3)}
.site-footer a:hover{color:var(--on-dark)}

/* prose pages */
.prose{max-width:720px;margin-inline:auto;padding:56px 24px 72px}
.prose h1{font-weight:800;font-size:clamp(34px,5vw,48px);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
.prose h2{font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin:34px 0 8px}
.prose h3{font-weight:700;font-size:1.1rem;margin:22px 0 6px}
.prose p,.prose ul,.prose ol{margin-block:10px;color:var(--fg2)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-block:6px}
.prose .lead{font-size:1.2rem;color:var(--mute)}
.prose strong{color:var(--fg)}
.prose .note{background:var(--tint);border-left:4px solid var(--outline);padding:10px 14px;border-radius:6px;color:var(--mute);font-size:.95rem}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* phone nav: links collapse behind the menu button */
@media (max-width:860px){
  .site-header{flex-wrap:wrap;gap:8px 10px}
  .site-nav{display:contents}
  .brand{margin-right:auto}
  .nav-toggle{display:inline-grid;order:2}
  .theme-toggle{order:1}
  .site-nav a{display:none}
  .site-header.open .site-nav a{display:flex;order:10;flex:0 0 100%;justify-content:flex-start;border-top:1px solid var(--line-dark)}
}

/* phone: hide the hero illustration */
@media (max-width:720px){.hero-art{display:none}}

/* 404: center the message between header and footer */
.page-404{min-height:100vh;display:flex;flex-direction:column}
.page-404 main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.page-404 .socials{padding-block:40px 56px}

/* FAQ boxes inside a prose page (support): single column, prose-sized heading */
.prose .faq{max-width:none;margin:28px 0 8px;padding:0}
.prose .faq h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 14px}
.prose .faq-list{grid-template-columns:1fr}
.prose .faq summary{font-size:1.05rem}
.prose .faq + .faq{margin-top:12px}

/* beta registration page */
.beta{max-width:1200px;margin-inline:auto;padding:56px 24px 96px;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.beta-intro{flex:1 1 380px;min-width:0;padding-top:24px}
.beta-intro h1{font-weight:800;font-size:clamp(40px,6vw,56px);line-height:1.04;letter-spacing:-.025em;margin-bottom:20px}
.beta-intro .hook{font-size:20px;line-height:1.5;color:var(--fg2);max-width:480px;margin-bottom:32px}
.beta-steps{list-style:none;display:flex;flex-direction:column;gap:20px;max-width:460px}
.beta-steps li{display:flex;gap:16px;align-items:flex-start;font-size:17px;line-height:1.45}
.beta-steps .num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--text-dark);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.beta-steps p{margin-top:4px}
.beta-card{flex:1 1 460px;min-width:0;max-width:560px;background:var(--card);border:1px solid var(--edge);border-radius:24px;padding:40px 36px;box-shadow:var(--card-shadow)}
@media (max-width:520px){.beta-card{padding:28px 20px}}
.beta-card h2{font-size:28px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px}
.beta-card .sub{font-size:16px;color:var(--mute);margin-bottom:28px}
.beta-card form{display:flex;flex-direction:column;gap:28px}
.beta-card .field{display:flex;flex-direction:column;gap:8px}
.beta-card .label,.beta-card legend{font-size:16px;font-weight:700}
.beta-card fieldset{border:0;min-width:0}
.beta-card legend{padding:0;margin-bottom:10px}
.beta-card input[type=email],.beta-card select{font:inherit;font-size:17px;padding:12px 16px;border:1.5px solid color-mix(in srgb,var(--fg) 38%,var(--bg));border-radius:12px;background:var(--card);color:var(--fg);min-height:48px;width:100%}
.beta-card input[type=email]:focus,.beta-card select:focus{outline:3px solid var(--accent-lt);outline-offset:1px;border-color:var(--outline)}
.beta-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--tint);border-radius:12px;font-size:14px;line-height:1.45;color:var(--fg2)}
.beta-note svg{flex:none;margin-top:1px;color:var(--link)}
.options{display:grid;gap:10px}
.options.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.options.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.options.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.options.stack{grid-template-columns:1fr}
@media (max-width:420px){.options.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:12px 14px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--fg) 38%,var(--bg));background:var(--card);color:var(--fg);font-size:16px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.options.stack .opt span{justify-content:flex-start;text-align:left;padding:12px 18px}
.opt span:hover{border-color:var(--outline)}
.opt input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--text-dark)}
.opt input:focus-visible+span{outline:3px solid var(--accent-lt);outline-offset:2px}
.android-note{margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--warning) 12%,var(--card));border:1px solid color-mix(in srgb,var(--warning) 40%,var(--card));font-size:14px;line-height:1.45;color:var(--fg)}
.beta-card .check{display:flex;gap:12px;align-items:center;font-size:16px;cursor:pointer;min-height:44px}
.beta-card .check input{width:22px;height:22px;accent-color:var(--accent);margin:0;flex:none}
.beta-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.beta-error{margin-top:-12px;font-size:14px;color:var(--danger);font-weight:700}
.beta-cta{font-family:var(--display);font-size:18px;font-weight:700;color:var(--text-dark);background:var(--accent);border:0;border-radius:999px;padding:16px 28px;min-height:56px;cursor:pointer}
.beta-cta:hover{background:var(--accent-hover)}
.beta-cta:focus-visible{outline:3px solid var(--accent-lt);outline-offset:3px}
.beta-cta[disabled]{opacity:.65;cursor:wait}
.beta-card .fine{margin-top:-12px;font-size:13px;color:var(--mute);text-align:center}
.beta-done{display:flex;flex-direction:column;gap:16px;padding:12px 0}
.beta-done .tick{width:56px;height:56px;border-radius:50%;background:var(--tint);color:var(--link);display:flex;align-items:center;justify-content:center}
.beta-done h2{font-size:30px;margin:0}
.beta-done p{font-size:17px;line-height:1.5;color:var(--fg2)}
.beta-done .tip{padding:14px 16px;background:var(--tint);border-radius:12px;font-size:15px}
.beta [hidden]{display:none!important}

/* secondary call to action: register for the beta */
.beta-cta-row{margin-top:-4px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid var(--accent-lt);color:var(--accent-lt)!important;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none}
.btn-ghost:hover,.btn-ghost:focus-visible{background:color-mix(in srgb,var(--accent-lt) 16%,transparent)}

/* beta form: invalid fields turn red and cannot be submitted */
.field-error{font-size:14px;font-weight:700;color:var(--danger)}
.beta-card input.invalid,.beta-card select.invalid{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--card));outline-color:var(--danger)}
.beta-card fieldset.invalid legend,.beta-card .check.invalid{color:var(--danger)}
.beta-card fieldset.invalid .opt span{border-color:var(--danger)}
.beta-card .check.invalid input{outline:2px solid var(--danger);outline-offset:2px}

/* beta form: state type-ahead */
.combo{position:relative}
.combo-list{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);list-style:none;max-height:260px;overflow:auto;background:var(--card);border:1.5px solid color-mix(in srgb,var(--fg) 38%,var(--bg));border-radius:12px;box-shadow:0 12px 28px -12px color-mix(in srgb,var(--violet) 45%,transparent)}
.combo-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;font-size:16px;cursor:pointer}
.combo-list li span{color:var(--mute);font-weight:700;font-size:14px}
.combo-list li[aria-selected=true],.combo-list li:hover{background:var(--accent);color:var(--text-dark)}
.combo-list li[aria-selected=true] span,.combo-list li:hover span{color:var(--text-dark)}
.beta-card input[type=text]{font:inherit;font-size:17px;padding:12px 16px;border:1.5px solid color-mix(in srgb,var(--fg) 38%,var(--bg));border-radius:12px;background:var(--card);color:var(--fg);min-height:48px;width:100%}
.beta-card input[type=text]:focus{outline:3px solid var(--accent-lt);outline-offset:1px;border-color:var(--outline)}
.beta-card input[type=text].invalid{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--card));outline-color:var(--danger)}
.beta-note-check{background:color-mix(in srgb,var(--warning) 12%,var(--card));border:1px solid color-mix(in srgb,var(--warning) 40%,var(--card));color:var(--fg)}

/* hero: same stack as the closing section (email + notify on one row, beta button centered beneath) */
.hero-copy .notify,.hero-copy .beta-cta-row{width:100%;max-width:520px}
.hero-copy .beta-cta-row{margin-top:0;text-align:center}