/* Typography only: the shared website background shows through the hero. */
#top #hero {
 position:relative; isolation:isolate; display:block; overflow:hidden;
 height:auto; min-height:0; max-height:none; padding:76px 0 0;
 background:none; border:0; border-radius:0;
}
#top #hero::before,#top #hero::after,
#top #hero :is(.hero__vignette,.hero__emblem,#fx) { display:none; }
#top #hero .hero__center {
 position:relative; inset:auto; transform:none; display:block;
 width:calc(100% - 96px); max-width:1344px; margin:0 auto; padding:52px 0 40px;
 text-align:left; background:none; border:0;
}
#top #hero .sc-hero-kicker {
 justify-content:flex-start; gap:5px; margin:0 0 18px; color:#cfdbdf;
 font:600 11px/1.6 Inter,sans-serif; letter-spacing:0;
}
#top #hero .sc-hero-kicker::before { display:none; }
#top #hero .sc-brand-title {
 max-width:800px; margin:0; color:#f3f5f6; text-align:left; text-wrap:balance;
 font:600 56px/1.12 Inter,system-ui,sans-serif; letter-spacing:0;
 text-shadow:none; text-transform:none;
}
#top #hero .sc-brand-title span { display:inline; color:inherit; }
#top #hero .hero__sub {
 max-width:620px; margin:18px 0 0; color:#d0dadd; text-align:left;
 font:400 18px/1.6 Inter,sans-serif; letter-spacing:0; text-wrap:pretty;
}
#top #hero .hero-brand-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
#top #hero .hero-brand-primary {
 --action-surface:#343d45; --action-hover:#424d57; --action-text:#f1f4f6; --action-border:#343d45;
 display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
 min-height:48px; min-width:174px; padding:12px 18px; border:1px solid #343d45; border-radius:6px;
 background:#343d45; color:#f1f4f6; box-shadow:none; clip-path:none;
 font:650 13px/20px Inter,sans-serif; letter-spacing:0;
}
#top #hero .hero-brand-primary:hover { color:#f1f4f6!important; background:#424d57; }
#top #hero .hero-brand-primary .vector-icon { width:18px; height:18px; flex:0 0 18px; }
#top #hero .hero__discord {
 display:inline-flex; align-items:center; justify-content:center; gap:9px; margin:0; padding:12px 14px;
 min-height:48px; font:600 13px/20px Inter,sans-serif; letter-spacing:0;
 color:#e0e8ea; border:0; background:transparent; text-decoration:none;
}
#top #hero .hero__discord:hover { color:#fff; background:#ffffff0b; }
#top #hero .hero__discord .ex-icon { width:18px; height:18px; flex:0 0 18px; }
#top #hero .hero__discord .vector-icon { width:18px; height:18px; }
#top #hero :is(.hero-brand-primary,.hero__discord):focus-visible { outline:2px solid #c8d2da; outline-offset:4px; }
#top #hero .hero-brand-platforms {
 display:flex; flex-wrap:wrap; gap:0; margin-top:28px; color:#b1c2cb;
 font:500 10px/16px Inter,sans-serif; letter-spacing:0;
}
#top #hero .hero-brand-platforms span { padding:0 16px; border-left:1px solid #ffffff30; }
#top #hero .hero-brand-platforms span:first-child { padding-left:0; border:0; }
#top #servers { padding-top:28px; }
@media(max-width:1000px) {
 #top #hero .hero__center { width:calc(100% - 48px); }
 #top #hero .sc-brand-title { font-size:48px; }
}
@media(max-width:700px) {
 #top #hero { padding-top:66px; }
 #top #hero .hero__center { width:calc(100% - 44px); padding:38px 0 28px; }
 #top #hero .sc-hero-kicker { margin-bottom:12px; font-size:10px; }
 #top #hero .sc-brand-title { font-size:38px; line-height:1.15; }
 #top #hero .hero__sub { margin-top:14px; font-size:16px; }
 #top #hero .hero-brand-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:8px; margin-top:20px; }
 #top #hero .hero-brand-primary { width:auto; min-width:0; min-height:48px; font-size:12px; padding:11px 14px; }
 #top #hero .hero__discord { min-width:0; min-height:48px; font-size:12px; padding:8px; }
 #top #hero .hero__discord span { min-width:0; }
 #top #hero .hero-brand-platforms { margin-top:22px; }
 #top #servers { padding-top:22px; }
}
@media(max-width:370px) {
 #top #hero .hero-brand-actions { gap:4px; }
 #top #hero .hero-brand-primary { min-width:0; gap:12px; padding-inline:10px; }
 #top #hero .hero__discord { gap:6px; font-size:11px; padding-inline:6px; }
}
@media(max-height:700px) and (max-width:700px) {
 #top #hero .hero__center { padding-top:28px; padding-bottom:18px; }
 #top #hero .sc-brand-title { font-size:36px; }
 #top #hero .hero-brand-platforms { margin-top:16px; }
}
@media(max-height:650px) and (min-width:701px) {
 #top #hero .hero__center { padding-top:24px; padding-bottom:24px; }
 #top #hero .sc-brand-title { font-size:50px; }
 #top #hero .hero-brand-platforms { margin-top:18px; }
 #top #hero .hero-brand-actions { margin-top:18px; }
}