:root {
  color-scheme: dark;
  --bg: #030712;
  --surface: #0a1220;
  --surface-2: #0d1728;
  --surface-3: #111d30;
  --line: #223047;
  --line-soft: rgba(148,163,184,.16);
  --text: #f4f8ff;
  --muted: #9dacbf;
  --cyan: #50d8f4;
  --cyan-strong: #14c6ec;
  --violet: #a855f7;
  --green: #4de5ae;
  --pink: #fa50cf;
  --max: 1240px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #277e96 #02050b; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); line-height: 1.5; }
body::-webkit-scrollbar { width: 9px; }
body::-webkit-scrollbar-track { background: #02050b; }
body::-webkit-scrollbar-thumb { border: 2px solid #02050b; border-radius: 99px; background: linear-gradient(var(--cyan), #155e75); }
button, input, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 16px; top: 10px; z-index: 200; transform: translateY(-150%); padding: 10px 14px; border-radius: 8px; background: var(--text); color: #020617; font-weight: 800; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #172238; background: rgba(2,5,12,.9); backdrop-filter: blur(18px); }
.site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(calc(100% - 36px), 1520px); min-height: 72px; margin: auto; }
.brand { display: inline-flex; width: 305px; max-width: 100%; }
.brand img { display: block; width: 100%; height: 30px; object-fit: contain; object-position: left center; }
.site-nav { display: flex; align-items: center; gap: 30px; color: #b7c1d0; font-size: 13px; font-weight: 750; }
.site-nav a { position: relative; padding: 26px 0; text-decoration: none; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; }
.site-nav a::after { content: ""; position: absolute; right: 50%; bottom: 16px; left: 50%; height: 2px; border-radius: 2px; background: var(--cyan); transition: left .2s ease, right .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; left: 0; }
.account { position: relative; justify-self: end; }
.login-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 9px; background: #5865f2; color: #fff; box-shadow: 0 1px 3px #0006; font-size: 14px; font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s ease,box-shadow .15s ease; }
.login-link:hover, .login-link:focus-visible { background: #4752c4; color: #fff; }
.login-link svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.account-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; border: 1px solid #2b3d58; border-radius: 10px; background: #101a2a; color: #eef5ff; font-size: 12px; font-weight: 800; cursor: pointer; }
.account-button { max-width: 180px; }
.account-avatar { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; }
.account-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 220px; overflow: hidden; padding: 6px; border: 1px solid #2b3d58; border-radius: 12px; background: #0a1220; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.account-menu a, .account-menu button { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 8px; background: none; color: #cfdae8; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: #142138; color: white; }
.account-menu .logout { color: #ff9eb5; }
.mobile-menu-button { display: none; justify-self: end; width: 38px; height: 38px; border: 1px solid #2b3d58; border-radius: 10px; background: #101a2a; color: #eef5ff; cursor: pointer; }
.mobile-nav { display: none; padding: 8px 18px 16px; background: #030711; }
.mobile-nav a { display: block; padding: 10px 12px; border-radius: 8px; color: #c6d0de; font-size: 13px; font-weight: 700; text-decoration: none; }
.mobile-nav a:hover { background: #101a2a; color: white; }

.hero { position: relative; min-height: 760px; overflow: hidden; border-bottom: 1px solid rgba(148,163,184,.12); background: radial-gradient(800px circle at 74% 38%, rgba(113,51,214,.22), transparent 55%), radial-gradient(640px circle at 14% 24%, rgba(6,182,212,.14), transparent 60%), linear-gradient(135deg,#06101c 0%,#050712 52%,#12061d 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(121,168,204,.11) 1px, transparent 1px), linear-gradient(90deg,rgba(121,168,204,.11) 1px,transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom,black,transparent 90%); }
.hero::after { content: ""; position: absolute; top: -200px; right: -180px; width: 660px; height: 660px; border: 1px solid rgba(109,217,246,.14); border-radius: 50%; box-shadow: 0 0 0 90px rgba(168,85,247,.035), 0 0 0 180px rgba(80,216,244,.025); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(520px,.98fr); gap: 74px; min-height: 720px; align-items: center; padding: 88px 0 92px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.hero h1 { max-width: 730px; margin: 19px 0 22px; color: white; font-size: clamp(45px,5.2vw,75px); font-weight: 880; letter-spacing: -.055em; line-height: .99; }
.hero h1 .hero-title-tournaments { -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .hero-title-tournaments { background-image: linear-gradient(90deg,#fff8dc 0%,#fde68a 9%,#facc15 25%,#f59e0b 62%,#ea580c 100%); }
.hero h1 em { display: block; margin-top: 8px; color: #d7e2ef; font-style: normal; }
.hero h1 .hero-title-removed { --strike-angle: -2deg; --strike-delay: .62s; position: relative; display: inline-block; color: #94a3b8; text-decoration: none; }
.hero h1 .hero-title-without { --strike-angle: 1.35deg; --strike-delay: .5s; }
.hero h1 .hero-title-removed::after { position: absolute; top: 60%; right: -.04em; left: -.04em; min-height: 4px; height: .075em; background: linear-gradient(90deg,#fb7185,#ef4444 58%,#b91c1c); box-shadow: 0 0 10px rgba(239,68,68,.24); clip-path: polygon(0 31%,18% 23%,39% 35%,62% 18%,82% 31%,100% 21%,100% 72%,80% 64%,61% 81%,40% 69%,18% 78%,0 66%); content: ""; transform: translateY(-50%) rotate(var(--strike-angle)) scaleX(0); transform-origin: left center; animation: hero-strike .62s cubic-bezier(.2,.9,.3,1) var(--strike-delay) forwards; }
.hero-lede { max-width: 670px; margin: 0; color: #b6c2d2; font-size: 17px; line-height: 1.75; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 29px 0 0; padding: 0; list-style: none; color: #dbe7f3; font-size: 13px; font-weight: 750; }
.hero-checks li { display: flex; align-items: center; gap: 8px; }
.hero-checks span { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(77,229,174,.48); border-radius: 50%; background: rgba(77,229,174,.1); color: var(--green); font-size: 11px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { --mx: 0px; --my: 0px; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; border: 1px solid transparent; border-radius: 11px; color: #f7fbff; font-size: 13px; font-weight: 850; text-decoration: none; transform: translate(var(--mx),var(--my)); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.button.primary { border-color: #61dcf4; background: linear-gradient(135deg,#60dcf5,#1dbddd); color: #021018; box-shadow: 0 14px 38px rgba(20,198,236,.18); }
.button.primary:hover, .button.primary:focus-visible { box-shadow: 0 18px 45px rgba(20,198,236,.36), inset 0 0 0 1px rgba(255,255,255,.35); }
.button.secondary { border-color: #30415b; background: rgba(16,26,42,.78); color: #dce7f4; }
.button.secondary:hover, .button.secondary:focus-visible { border-color: #5a718f; background: #152238; }
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.hero-note { margin: 13px 0 0; color: #728298; font-size: 11px; }
.hero-stage { position: relative; min-height: 570px; display: grid; place-items: center; }
.stage-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle,rgba(225,62,226,.21),rgba(73,97,250,.11) 44%,transparent 72%); filter: blur(15px); }
.atom-mark { position: absolute; top: 1px; right: 12px; width: 124px; height: 124px; padding: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 33px; background: rgba(8,10,27,.72); box-shadow: 0 25px 70px rgba(0,0,0,.42), 0 0 45px rgba(239,80,207,.14); backdrop-filter: blur(10px); transform: rotate(4deg); }
.atom-mark img { width: 100%; height: 100%; object-fit: contain; }
.product-window { position: relative; width: min(100%,530px); overflow: hidden; border: 1px solid rgba(123,153,193,.34); border-radius: 18px; background: rgba(8,15,28,.94); box-shadow: 0 35px 100px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.025) inset; transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg); }
.window-bar { display: flex; height: 38px; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid #1e2b41; background: #111b2d; }
.window-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #3b4a61; }
.window-bar > span:first-child { background: #ff6687; }.window-bar > span:nth-child(2) { background: #ffd266; }.window-bar > span:nth-child(3) { background: var(--green); }
.window-bar strong { margin-left: 7px; color: #9dacbf; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.window-bar small { margin-left: auto; padding: 3px 7px; border: 1px solid rgba(77,229,174,.3); border-radius: 99px; color: var(--green); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.event-heading { display: flex; align-items: center; gap: 13px; padding: 22px 21px 14px; }
.event-icon { display: grid; width: 43px; height: 43px; flex: none; place-items: center; border: 1px solid rgba(80,216,244,.4); border-radius: 12px; background: linear-gradient(145deg,#15304a,#17203a); color: var(--cyan); font-size: 12px; font-weight: 900; }
.event-heading div:last-child { display: grid; gap: 1px; }
.event-heading span { color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.event-heading strong { font-size: 15px; }
.event-heading small { color: #8393a8; font-size: 8px; }
.progress-track { height: 4px; margin: 0 21px; overflow: hidden; border-radius: 99px; background: #19243a; }
.progress-track i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)); box-shadow: 0 0 15px rgba(80,216,244,.42); }
.event-status-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; padding: 17px 21px; }
.event-status-grid article { display: grid; gap: 1px; min-height: 73px; align-content: center; padding: 11px; border: 1px solid #22324b; border-radius: 11px; background: #0c1728; }
.event-status-grid span { color: #6f829c; font-size: 7px; font-weight: 900; letter-spacing: .11em; }.event-status-grid strong { font-size: 17px; }.event-status-grid small { color: #8b9ab0; font-size: 8px; }
.flow-list { display: grid; gap: 7px; padding: 0 21px 22px; }
.flow-list > div { display: grid; grid-template-columns: 30px 1fr auto; min-height: 57px; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #1c2a42; border-radius: 10px; background: #0a1424; }
.flow-list > div > i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #31445e; border-radius: 8px; color: #8090a7; font-size: 9px; font-style: normal; font-weight: 900; }.flow-list > div > span { display: grid; }.flow-list strong { font-size: 9px; }.flow-list small { color: #718198; font-size: 7px; }.flow-list b { color: #7f8fa5; font-size: 7px; text-transform: uppercase; }.flow-list .done > i { border-color: rgba(77,229,174,.35); background: rgba(77,229,174,.1); color: var(--green); }.flow-list .done b { color: var(--green); }.flow-list .active { border-color: rgba(80,216,244,.38); background: linear-gradient(90deg,rgba(21,72,91,.42),#0a1424); }.flow-list .active > i { border-color: rgba(80,216,244,.5); background: rgba(80,216,244,.13); color: var(--cyan); }.flow-list .active b { color: var(--cyan); }
.discord-proof { position: absolute; right: -10px; bottom: 17px; display: flex; width: 265px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(154,166,212,.27); border-radius: 12px; background: rgba(9,12,29,.9); box-shadow: 0 18px 45px rgba(0,0,0,.4); backdrop-filter: blur(12px); }
.discord-proof > span { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 9px; background: #5865f2; }.discord-proof img { width: 21px; }.discord-proof div { display: grid; }.discord-proof strong { font-size: 10px; }.discord-proof small { color: #8999af; font-size: 8px; }
.hero-fade { position: absolute; right: 0; bottom: 0; left: 0; height: 130px; background: linear-gradient(transparent,var(--bg)); }

.product-nav { position: sticky; top: 72px; z-index: 80; border-bottom: 1px solid #172238; background: rgba(5,9,17,.92); backdrop-filter: blur(14px); }
.product-nav .page-shell { display: flex; min-height: 54px; align-items: center; gap: 28px; }
.product-nav a { color: #8d9caf; font-size: 11px; font-weight: 750; text-decoration: none; transition: color .2s ease; }.product-nav a:hover { color: white; }.product-nav .product-nav-cta { margin-left: auto; color: var(--cyan); }
.product-nav a[href^="#"] { position: relative; display: inline-flex; min-height: 54px; align-items: center; }
.product-nav a[href^="#"]::after { position: absolute; right: 50%; bottom: -1px; left: 50%; height: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(80,216,244,.45); content: ""; transition: right .2s ease,left .2s ease; }
.product-nav a[href^="#"]:hover::after,.product-nav a[href^="#"]:focus-visible::after,.product-nav a[href^="#"].active::after { right: 0; left: 0; }
.product-nav a[href^="#"].active { color: #f5fbff; }
.proof-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 42px; border: 1px solid #1e2c42; border-radius: 15px; background: linear-gradient(90deg,rgba(12,22,37,.8),rgba(11,16,31,.8)); }
.proof-strip div { display: grid; gap: 3px; padding: 20px 24px; border-right: 1px solid #1e2c42; }.proof-strip div:last-child { border: 0; }.proof-strip strong { font-size: 12px; }.proof-strip span { color: #718198; font-size: 9px; }

.section { padding-top: 112px; padding-bottom: 112px; }
#workflow,#capabilities,#plans,#faq { scroll-margin-top: 148px; }
.section-heading { margin-bottom: 42px; }.section-heading.centered { max-width: 760px; margin-right: auto; margin-left: auto; text-align: center; }.section-heading.centered .eyebrow { justify-content: center; }.section-heading h2, .possibility-copy h2, .access-copy h2, .final-cta h2 { margin: 13px 0 14px; font-size: clamp(34px,4vw,52px); line-height: 1.06; letter-spacing: -.043em; }.section-heading p, .possibility-copy > p, .access-copy > p, .final-cta p { max-width: 680px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }.section-heading.split { display: grid; grid-template-columns: 1.05fr .65fr; align-items: end; gap: 80px; }.section-heading.split p { padding-bottom: 4px; }
.plans-section .section-heading.centered { max-width: none; }
.system-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.system-card { position: relative; min-height: 525px; overflow: hidden; padding: 30px; border: 1px solid #213047; border-radius: 18px; background: radial-gradient(340px circle at 100% 0%,rgba(88,101,242,.08),transparent 68%),linear-gradient(145deg,#0e1828,#090f1d); transition: transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.system-card:hover { transform: translateY(-6px); border-color: rgba(80,216,244,.42); box-shadow: 0 25px 65px rgba(0,0,0,.25); }.featured-system { background: radial-gradient(400px circle at 100% 0%,rgba(80,216,244,.13),transparent 65%),linear-gradient(145deg,#0e1d2d,#090f1d); }.card-number { position: absolute; top: 20px; right: 22px; color: rgba(148,163,184,.22); font-size: 45px; font-weight: 900; letter-spacing: -.06em; }.icon-shell { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 52px; border: 1px solid rgba(168,85,247,.35); border-radius: 14px; background: rgba(168,85,247,.09); color: #c796f8; }.icon-shell.automation-icon { border-color: rgba(80,216,244,.35); background: rgba(80,216,244,.09); color: var(--cyan); }.icon-shell svg { width: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.system-copy { min-height: 210px; }.system-label { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.system-card h3 { margin: 11px 0 13px; font-size: 24px; line-height: 1.18; letter-spacing: -.025em; }.system-card p { margin: 0; color: #91a1b6; font-size: 13px; line-height: 1.68; }.system-card ul { display: grid; gap: 9px; margin: 20px 0 0; padding: 19px 0 0; border-top: 1px solid #1e2b41; list-style: none; }.system-card li { position: relative; padding-left: 16px; color: #c2cede; font-size: 11px; }.system-card li::before { content: ""; position: absolute; top: .55em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(77,229,174,.55); }

.capability-section { border-block: 1px solid rgba(148,163,184,.11); background: radial-gradient(750px circle at 12% 45%,rgba(6,182,212,.08),transparent 66%),#060b14; }
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.capability-card { position: relative; min-height: 320px; padding: 27px; overflow: hidden; border: 1px solid #1f2e45; border-radius: 16px; background: linear-gradient(145deg,rgba(14,24,40,.92),rgba(8,15,28,.92)); transition: border-color .22s ease,transform .22s ease,background .22s ease; }
.capability-card:hover { transform: translateY(-4px); border-color: rgba(80,216,244,.38); background: linear-gradient(145deg,#101e31,#091321); }
.capability-card > span { position: absolute; top: 17px; right: 20px; color: rgba(148,163,184,.2); font-size: 30px; font-weight: 900; }
.capability-card h3 { margin: 5px 0 10px; font-size: 20px; letter-spacing: -.025em; }
.capability-card > p { min-height: 60px; margin: 0; color: #8b9cb1; font-size: 11px; line-height: 1.65; }
.capability-card ul { display: grid; gap: 8px; margin: 20px 0 0; padding: 17px 0 0; border-top: 1px solid #1d2a40; list-style: none; }
.capability-card li { position: relative; padding-left: 15px; color: #bdcada; font-size: 10px; }
.capability-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-size: 9px; font-weight: 900; }

.workflow-section { position: relative; border-block: 1px solid rgba(148,163,184,.11); background: radial-gradient(650px circle at 82% 30%,rgba(168,85,247,.08),transparent 60%),#060b14; }
.workflow { counter-reset: none; display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; }.workflow li { position: relative; min-height: 250px; padding: 30px 28px; border: 1px solid #1e2b41; border-right: 0; background: rgba(10,18,32,.6); }.workflow li:first-child { border-radius: 16px 0 0 16px; }.workflow li:last-child { border-right: 1px solid #1e2b41; border-radius: 0 16px 16px 0; }.workflow li:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 38px; right: -13px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #29415a; border-radius: 50%; background: #08111e; color: var(--cyan); font-size: 10px; }.workflow li > span { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .12em; }.workflow li > div { position: absolute; right: 28px; bottom: 28px; left: 28px; }.workflow strong { font-size: 16px; }.workflow p { margin: 9px 0 0; color: #8797ac; font-size: 11px; line-height: 1.65; }

.showcase { overflow: hidden; border: 1px solid #223047; border-radius: 20px; background: #08111e; box-shadow: 0 35px 90px rgba(0,0,0,.28); }.showcase-tabs { display: flex; min-height: 60px; align-items: stretch; gap: 4px; padding: 8px; border-bottom: 1px solid #1c2940; background: #0c1626; }.showcase-tabs button { position: relative; padding: 0 20px; border: 0; border-radius: 9px; background: transparent; color: #8090a5; font-size: 11px; font-weight: 800; cursor: pointer; }.showcase-tabs button.active { background: #142238; color: white; }.showcase-tabs button.active::after { content: ""; position: absolute; right: 18px; bottom: 3px; left: 18px; height: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.showcase-body { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 510px; }.showcase-copy { align-self: center; padding: 50px; animation: panelIn .28s ease both; }.showcase-copy > span { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.showcase-copy h3 { margin: 14px 0; font-size: 31px; line-height: 1.15; letter-spacing: -.035em; }.showcase-copy p { color: #8fa0b5; font-size: 13px; line-height: 1.7; }.showcase-copy ul { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }.showcase-copy li { display: flex; align-items: center; gap: 9px; color: #c7d2e1; font-size: 11px; }.showcase-copy i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgba(77,229,174,.1); color: var(--green); font-size: 9px; font-style: normal; }.showcase-ui { display: grid; grid-template-columns: 65px 1fr; margin: 30px 30px 30px 0; overflow: hidden; border: 1px solid #2b3a52; border-radius: 14px; background: #07101c; box-shadow: 0 20px 60px rgba(0,0,0,.45); }.ui-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 14px; border-right: 1px solid #1d2b40; background: #0b1525; }.ui-logo { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #273952; border-radius: 11px; background: #0e1930; }.ui-logo img { width: 31px; height: 31px; object-fit: contain; }.ui-sidebar > i { width: 23px; height: 6px; border-radius: 99px; background: #26364c; }.ui-sidebar > i:nth-of-type(2) { background: var(--cyan); box-shadow: 0 0 10px rgba(80,216,244,.45); }.ui-main { padding: 25px; }.ui-top { display: flex; align-items: center; justify-content: space-between; }.ui-top > div { display: grid; }.ui-top small,.ui-metrics small,.ui-content small { color: #71839c; font-size: 7px; font-weight: 900; letter-spacing: .11em; }.ui-top strong { font-size: 16px; }.ui-top > span { padding: 5px 9px; border: 1px solid rgba(77,229,174,.3); border-radius: 99px; background: rgba(77,229,174,.07); color: var(--green); font-size: 7px; font-weight: 900; text-transform: uppercase; }.ui-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 22px; }.ui-metrics > div { display: grid; gap: 4px; padding: 13px; border: 1px solid #1d2b41; border-radius: 9px; background: #0c1727; }.ui-metrics strong { font-size: 11px; }.ui-metrics i { height: 3px; overflow: hidden; border-radius: 9px; background: linear-gradient(90deg,var(--cyan) var(--fill),#25344a var(--fill)); }.ui-content { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; margin-top: 10px; }.ui-bracket,.ui-activity { padding: 15px; border: 1px solid #1d2b41; border-radius: 9px; background: #0a1423; }.ui-bracket > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; }.ui-bracket span { display: flex; justify-content: space-between; padding: 8px; border: 1px solid #263650; border-radius: 6px; color: #aab8ca; font-size: 7px; }.ui-bracket b { color: var(--green); }.ui-activity p { margin: 11px 0 0; color: #94a4b8; font-size: 7px; }.ui-activity p i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--green); }

.possibilities { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 85px; }.text-link { display: inline-flex; gap: 10px; margin-top: 25px; color: var(--cyan); font-size: 12px; font-weight: 800; text-decoration: none; }.text-link:hover span { transform: translateX(4px); }.text-link span { transition: transform .2s ease; }.possibility-cloud { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; min-height: 360px; padding: 34px; border: 1px solid #223047; border-radius: 50%; background: radial-gradient(circle,rgba(80,216,244,.08),transparent 63%); }.possibility-cloud span { padding: 9px 13px; border: 1px solid #293a55; border-radius: 99px; background: #0c1727; color: #a9b8ca; font-size: 10px; font-weight: 750; }.possibility-cloud .large { font-size: 13px; }.possibility-cloud .accent { border-color: rgba(80,216,244,.4); color: #cdf6ff; box-shadow: 0 0 25px rgba(80,216,244,.06); }

.access-section { position: relative; overflow: hidden; border-block: 1px solid rgba(148,163,184,.12); background: radial-gradient(680px circle at 20% 50%,rgba(6,182,212,.13),transparent 65%),radial-gradient(650px circle at 90% 20%,rgba(168,85,247,.11),transparent 62%),#080c17; }.access-grid { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 90px; }.access-copy h2 { max-width: 650px; }.access-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }.access-card { padding: 28px; border: 1px solid #2a3b56; border-radius: 18px; background: rgba(10,18,32,.78); box-shadow: 0 30px 80px rgba(0,0,0,.25); }.access-card-head { display: grid; gap: 3px; padding-bottom: 18px; border-bottom: 1px solid #233149; }.access-card-head span { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }.access-card-head strong { font-size: 19px; }.access-card ol { display: grid; gap: 18px; margin: 23px 0; padding: 0; list-style: none; }.access-card li { display: flex; align-items: flex-start; gap: 12px; }.access-card li > i { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border: 1px solid rgba(80,216,244,.35); border-radius: 7px; background: rgba(80,216,244,.08); color: var(--cyan); font-size: 10px; font-style: normal; font-weight: 900; }.access-card li div { display: grid; }.access-card li strong { font-size: 11px; }.access-card li span { color: #8090a6; font-size: 9px; }.access-card > p { margin: 0; padding-top: 15px; border-top: 1px solid #233149; color: #73849a; font-size: 9px; }

.faq { padding-bottom: 80px; }.faq-list { border-top: 1px solid #223047; }.faq details { border-bottom: 1px solid #223047; }.faq summary { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 8px; color: #dfe9f5; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary span { color: var(--cyan); font-size: 22px; font-weight: 400; transition: transform .2s ease; }.faq details[open] summary span { transform: rotate(45deg); }.faq details p { max-width: 820px; margin: -4px 0 0; padding: 0 8px 24px; color: #8797ab; font-size: 12px; line-height: 1.7; }
.final-cta { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; overflow: hidden; margin-bottom: 100px; padding: 55px; border: 1px solid rgba(80,216,244,.27); border-radius: 20px; background: radial-gradient(500px circle at 100% 30%,rgba(168,85,247,.18),transparent 66%),linear-gradient(130deg,#0c2130,#0b1224 56%,#181027); }.final-cta::after { content: ""; position: absolute; right: -90px; width: 260px; height: 260px; border: 1px solid rgba(80,216,244,.16); border-radius: 50%; box-shadow: 0 0 0 50px rgba(80,216,244,.025),0 0 0 100px rgba(168,85,247,.02); }.final-cta > * { position: relative; z-index: 1; }.final-cta h2 { max-width: 700px; font-size: clamp(30px,3.5vw,47px); }.final-cta > div:last-child { display: grid; justify-items: center; gap: 10px; }.final-cta small { color: #8393a7; font-size: 9px; }

.site-footer { padding: 24px; border-top: 1px solid #1f2937; background: #000; color: #6b7280; font-size: 14px; text-align: center; }
.site-footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.site-footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.site-footer a { color: inherit; text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: #67e8f9; }
.site-footer p { margin: 0; }
.mobile-cta { display: none; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease,transform .65s ease; }.reveal.revealed { opacity: 1; transform: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hero-strike { to { transform: translateY(-50%) rotate(var(--strike-angle)) scaleX(1); } }

@media (max-width: 1080px) {
  .site-header-inner { grid-template-columns: 1fr auto auto; }.site-nav { display: none; }.mobile-menu-button { display: inline-grid; place-items: center; margin-left: 10px; }.mobile-nav.open { display: block; }.brand { width: 270px; }
  .hero { min-height: auto; }.hero-grid { grid-template-columns: 1fr; gap: 35px; padding-top: 72px; }.hero-copy { text-align: center; }.hero-copy .eyebrow,.hero-checks,.hero-actions { justify-content: center; }.hero-lede { margin-inline: auto; }.hero-stage { min-height: 535px; width: min(100%,660px); margin-inline: auto; }.atom-mark { right: 20px; }.discord-proof { right: 14px; }
  .system-grid { grid-template-columns: 1fr; }.system-card { min-height: 0; }.system-copy { min-height: 0; }.icon-shell { margin-bottom: 34px; }.system-card ul { grid-template-columns: 1fr 1fr; }.capability-grid { grid-template-columns: 1fr 1fr; }
  .workflow { grid-template-columns: 1fr 1fr; gap: 12px; }.workflow li,.workflow li:first-child,.workflow li:last-child { border: 1px solid #1e2b41; border-radius: 14px; }.workflow li::after { display: none !important; }
  .showcase-body { grid-template-columns: 1fr; }.showcase-copy { padding-bottom: 25px; }.showcase-ui { min-height: 380px; margin: 0 30px 30px; }.possibilities,.access-grid { grid-template-columns: 1fr; gap: 45px; }.possibility-cloud { max-width: 680px; margin-inline: auto; }.access-card { width: min(100%,650px); }
}

@media (max-width: 720px) {
  .page-shell { width: min(calc(100% - 28px),var(--max)); }.site-header-inner { width: calc(100% - 26px); min-height: 62px; }.brand { width: min(190px,45vw); }.brand img { height: 25px; }.account-button span { display: none; }.product-nav { top: 62px; overflow-x: auto; }.product-nav .page-shell { width: max-content; min-width: 100%; padding: 0 14px; gap: 22px; }.product-nav .product-nav-cta { display: none; }
  .hero-grid { padding: 64px 0 72px; }.hero h1 { font-size: clamp(40px,13vw,58px); }.hero-lede { font-size: 15px; }.hero-checks { display: grid; justify-content: start; width: min(100%,420px); margin: 25px auto 0; text-align: left; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.hero-stage { min-height: 470px; }.product-window { transform: none; }.atom-mark { top: -8px; right: 0; width: 86px; height: 86px; border-radius: 24px; }.discord-proof { right: 4px; bottom: 0; width: 235px; }.event-status-grid { gap: 6px; padding-inline: 13px; }.event-heading,.flow-list { padding-right: 13px; padding-left: 13px; }.progress-track { margin-inline: 13px; }
  .proof-strip { grid-template-columns: 1fr 1fr; }.proof-strip div:nth-child(2) { border-right: 0; }.proof-strip div:nth-child(-n+2) { border-bottom: 1px solid #1e2c42; }
  .section { padding-top: 78px; padding-bottom: 78px; }.section-heading.split { grid-template-columns: 1fr; gap: 16px; }.section-heading h2,.possibility-copy h2,.access-copy h2 { font-size: 37px; }.system-card { padding: 25px; }.system-card ul { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }.capability-card { min-height: 0; }.capability-card > p { min-height: 0; }.workflow { grid-template-columns: 1fr; }.workflow li { min-height: 180px; }
  .showcase-tabs { overflow-x: auto; }.showcase-tabs button { min-width: max-content; min-height: 44px; }.showcase-copy { padding: 34px 24px 20px; }.showcase-copy h3 { font-size: 27px; }.showcase-ui { grid-template-columns: 45px 1fr; min-height: 360px; margin: 15px; }.ui-main { padding: 16px; }.ui-sidebar { gap: 15px; }.ui-logo { width: 31px; height: 31px; }.ui-metrics { grid-template-columns: 1fr 1fr; }.ui-metrics > div:last-child { display: none; }.ui-content { grid-template-columns: 1fr; }.ui-activity { display: none; }
  .possibility-cloud { min-height: 320px; padding: 22px; border-radius: 40px; }.access-actions { flex-direction: column; }.access-actions .button { width: 100%; }.faq summary { font-size: 13px; }
  .final-cta { grid-template-columns: 1fr; padding: 34px 25px; text-align: center; }.final-cta .eyebrow { justify-content: center; }.final-cta p { margin-inline: auto; }.final-cta > div:last-child { justify-items: stretch; }
  .mobile-cta { position: fixed; z-index: 90; right: 12px; bottom: 12px; left: 12px; display: block; opacity: 0; pointer-events: none; transform: translateY(16px); transition: opacity .2s ease,transform .2s ease; }.mobile-cta.show { opacity: 1; pointer-events: auto; transform: none; }.mobile-cta a { display: flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; border: 1px solid #74e4fa; border-radius: 12px; background: linear-gradient(135deg,#60dcf5,#1dbddd); color: #021018; box-shadow: 0 12px 38px rgba(0,0,0,.45); font-size: 13px; font-weight: 900; text-decoration: none; }
}

@media (max-width: 440px) {
  .brand { width: min(165px,44vw); }.login-link { padding: 9px 11px; }.login-link span { display: none; }.hero h1 { font-size: 39px; }.hero-stage { min-height: 440px; }.window-bar strong { display: none; }.event-status-grid article { padding: 8px; }.event-status-grid strong { font-size: 14px; }.flow-list > div { grid-template-columns: 27px 1fr; }.flow-list > div > b { display: none; }.proof-strip { grid-template-columns: 1fr; }.proof-strip div { border-right: 0; border-bottom: 1px solid #1e2c42; }.proof-strip div:last-child { border-bottom: 0; }.section-heading h2,.possibility-copy h2,.access-copy h2 { font-size: 33px; }.possibility-cloud .large { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }
}

/* Conversion-focused ATOM product page. */
.atom-page [data-bgl-header-inner] .brand {
  width: auto !important;
  max-width: none !important;
}

.atom-page [data-bgl-header-inner] .brand img {
  height: auto !important;
  max-width: none !important;
}

.conversion-hero {
  min-height: 770px;
}

.conversion-hero .hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(540px, 1.1fr);
  gap: 68px;
}

.conversion-hero .hero-copy {
  padding-bottom: 16px;
}

.conversion-hero .hero-copy h1 {
  max-width: 690px;
}

.hero-evidence {
  position: relative;
  min-height: 590px;
}

.evidence-glow {
  position: absolute;
  inset: 8% 0 5% 3%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 210, 238, .18), rgba(128, 73, 235, .12) 45%, transparent 72%);
  filter: blur(18px);
}

.evidence-admin,
.evidence-discord,
.product-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(113, 147, 193, .38);
  background: #070d19;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

.evidence-admin {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 0;
  left: 7px;
  height: 420px;
  border-radius: 18px;
  transform: perspective(1300px) rotateY(-3deg) rotateX(1deg);
}

.evidence-admin > img {
  display: block;
  width: 112%;
  max-width: none;
  transform: translate(-5.4%, -11.8%);
}

.evidence-discord {
  position: absolute;
  z-index: 3;
  top: 308px;
  right: -12px;
  bottom: auto;
  width: 224px;
  height: 190px;
  border-radius: 15px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .58), 0 0 0 1px rgba(168, 85, 247, .13);
}

.evidence-discord > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.evidence-label {
  position: absolute;
  z-index: 4;
  bottom: 17px;
  left: -14px;
  display: grid;
  max-width: 330px;
  gap: 2px;
  padding: 13px 15px;
  border: 1px solid rgba(111, 145, 192, .34);
  border-radius: 12px;
  background: rgba(8, 14, 28, .93);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .46);
  backdrop-filter: blur(12px);
}

.evidence-label strong {
  color: #f2f7ff;
  font-size: 11px;
}

.evidence-label span {
  color: #8394aa;
  font-size: 8px;
  line-height: 1.45;
}

.conversion-hero + .proof-strip {
  position: relative;
  z-index: 5;
  margin-top: -62px;
  margin-bottom: 42px;
  background: linear-gradient(90deg, rgba(11, 24, 40, .96), rgba(18, 15, 38, .96));
  box-shadow: 0 22px 65px rgba(0, 0, 0, .34);
}

.product-nav {
  top: 76px;
}

.workflow-proof {
  padding-top: 92px;
}

.product-story {
  display: grid;
  grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr);
  align-items: center;
  gap: 70px;
  padding: 58px 0;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.product-story:last-child {
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.product-story.reverse {
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
}

.product-story.reverse .product-story-copy {
  order: 2;
}

.product-story-copy > span {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.product-story-copy h3 {
  margin: 14px 0 15px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.product-story-copy p {
  margin: 0;
  color: #95a5b9;
  font-size: 14px;
  line-height: 1.72;
}

.product-story-copy ul {
  display: grid;
  gap: 9px;
  margin: 23px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #1f2d42;
  list-style: none;
}

.product-story-copy li {
  position: relative;
  padding-left: 20px;
  color: #c5d0df;
  font-size: 12px;
}

.product-story-copy li::before {
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 900;
  content: "✓";
}

.product-shot {
  position: relative;
  min-width: 0;
  height: 410px;
  border-radius: 18px;
}

.product-shot img {
  display: block;
  max-width: none;
}

.product-shot figcaption {
  position: absolute;
  right: 13px;
  bottom: 13px;
  padding: 7px 10px;
  border: 1px solid rgba(115, 146, 190, .32);
  border-radius: 8px;
  background: rgba(4, 9, 18, .9);
  color: #9fb0c6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.product-shot.admin-divisions img {
  width: 112%;
  transform: translate(-5.4%, -11.6%);
}

.product-shot.discord-shot {
  height: 560px;
  justify-self: center;
  width: min(100%, 450px);
  border-color: rgba(168, 85, 247, .35);
  background: #1e1f22;
}

.product-shot.discord-shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.product-shot.tournament-hub img {
  width: 119%;
  transform: translate(-8%, -16%);
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.outcome-card {
  min-height: 275px;
  padding: 27px;
  border: 1px solid #213047;
  border-radius: 16px;
  background: radial-gradient(310px circle at 100% 0%, rgba(80, 216, 244, .08), transparent 66%), linear-gradient(145deg, #0e1828, #090f1d);
  transition: transform .22s ease, border-color .22s ease;
}

.outcome-card:hover {
  transform: translateY(-4px);
  border-color: rgba(80, 216, 244, .38);
}

.outcome-card > span {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

.outcome-card h3 {
  margin: 34px 0 13px;
  font-size: 21px;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.outcome-card p {
  margin: 0;
  color: #8e9fb4;
  font-size: 12px;
  line-height: 1.68;
}

.audience-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #213047;
  border-radius: 15px;
  background: rgba(7, 13, 24, .72);
}

.audience-strip > div {
  display: grid;
  gap: 5px;
  padding: 21px 23px;
}

.audience-strip > div + div {
  border-left: 1px solid #213047;
}

.audience-strip span {
  color: #71839a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.audience-strip strong {
  color: #dbe5f2;
  font-size: 12px;
  line-height: 1.45;
}

.plans-section {
  background: radial-gradient(700px circle at 20% 30%, rgba(80, 216, 244, .09), transparent 64%), radial-gradient(680px circle at 88% 60%, rgba(168, 85, 247, .09), transparent 60%), #060a13;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}

.plan-card {
  display: grid;
  align-content: start;
  padding: 31px;
  border: 1px solid #26364e;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(14, 24, 40, .96), rgba(8, 14, 27, .96));
  box-shadow: 0 22px 65px rgba(0, 0, 0, .2);
}

.plan-card.premium {
  border-color: rgba(167, 112, 247, .48);
  background: radial-gradient(460px circle at 100% 0%, rgba(168, 85, 247, .17), transparent 66%), linear-gradient(145deg, #101c2e, #0b1020);
}

.plan-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 21px;
  border-bottom: 1px solid #25334a;
}

.plan-card-head > div {
  display: grid;
  gap: 7px;
}

.plan-card-head span {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.plan-card-head h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1;
}

.plan-card-head h3 small {
  font-size: 11px;
  font-weight: 800;
}

.plan-card-head > small {
  max-width: 145px;
  color: #8697ad;
  font-size: 9px;
  line-height: 1.45;
  text-align: right;
}

.plan-card > p {
  margin: 22px 0 0;
  color: #94a4b8;
  font-size: 13px;
  line-height: 1.65;
}

.plan-card ul {
  display: grid;
  gap: 11px;
  margin: 22px 0 28px;
  padding: 0;
  list-style: none;
}

.plan-card li {
  position: relative;
  padding-left: 20px;
  color: #cbd6e4;
  font-size: 12px;
}

.plan-card li::before {
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 900;
  content: "✓";
}

.plan-card .button {
  width: 100%;
  align-self: end;
  margin-top: auto;
}

.plan-summary-grid {
  margin-bottom: 18px;
}

.plan-summary-grid .plan-card {
  padding: 25px 27px;
}

.plan-summary-grid .plan-card-head {
  min-height: 80px;
  box-sizing: border-box;
}

.plan-summary-grid .plan-card > p {
  margin-top: 17px;
  min-height: calc(1.65em * 2);
}

.plan-fit {
  display: grid;
  gap: 4px;
  margin: 16px 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(72, 91, 120, .46);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}

.plan-summary-grid .plan-fit {
  min-height: 58px;
  box-sizing: border-box;
}

.plan-card.premium .plan-fit {
  border-color: rgba(167, 112, 247, .25);
  background: rgba(168, 85, 247, .04);
}

.plan-fit span {
  color: var(--cyan);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.plan-fit strong {
  color: #cbd6e4;
  font-size: 11px;
  line-height: 1.45;
}

.plan-detail-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  max-width: 1000px;
  margin: 18px auto 0;
  padding: 21px 24px;
  border: 1px solid #2b3b55;
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(10, 22, 38, .94), rgba(25, 16, 43, .92));
}

.plan-detail-cta > div {
  display: grid;
  gap: 3px;
}

.plan-detail-cta > div > span {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.plan-detail-cta strong {
  color: #edf4fc;
  font-size: 17px;
}

.plan-detail-cta p {
  margin: 2px 0 0;
  color: #8394aa;
  font-size: 11px;
  line-height: 1.55;
}

.plan-detail-cta .button {
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.plan-comparison-wrap {
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #2a3a54;
  border-radius: 18px;
  background: rgba(7, 13, 24, .94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.plan-comparison {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.plan-comparison th,
.plan-comparison td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(64, 82, 111, .48);
  text-align: left;
  vertical-align: middle;
}

.plan-comparison thead th {
  background: #0d1728;
  color: #8fa0b7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plan-comparison thead th:first-child {
  width: 46%;
}

.plan-comparison thead th:nth-child(2),
.plan-comparison thead th:nth-child(3) {
  width: 27%;
}

.plan-comparison thead th:nth-child(3) {
  background: linear-gradient(135deg, rgba(26, 33, 61, .98), rgba(38, 19, 58, .98));
}

.plan-comparison thead span {
  display: block;
  color: #f5f8fc;
  font-size: 13px;
  letter-spacing: .04em;
}

.plan-comparison thead th:nth-child(3) span {
  color: #d8c4ff;
}

.plan-comparison thead small {
  display: block;
  margin-top: 3px;
  color: #7f90a8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.plan-comparison tbody tr:not(.comparison-group):hover {
  background: rgba(255, 255, 255, .018);
}

.plan-comparison tbody tr:last-child th,
.plan-comparison tbody tr:last-child td {
  border-bottom: 0;
}

.plan-comparison tbody th strong,
.plan-comparison tbody th small {
  display: block;
}

.plan-comparison tbody th strong {
  color: #ecf3fb;
  font-size: 13px;
  line-height: 1.35;
}

.plan-comparison tbody th small {
  margin-top: 3px;
  color: #7f90a7;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.plan-comparison td {
  color: #bdc9d8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.plan-comparison td:nth-child(3) {
  background: rgba(168, 85, 247, .025);
}

.plan-comparison .comparison-group th {
  padding: 9px 18px;
  border-bottom-color: #30425d;
  background: linear-gradient(90deg, rgba(30, 67, 91, .38), rgba(66, 34, 92, .28));
  color: #70e3f8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.comparison-check {
  margin-right: 7px;
  color: #42e6a4;
  font-weight: 950;
}

.comparison-minus {
  color: #738399;
  font-weight: 650;
}

.comparison-value {
  color: #cbd6e4;
}

.comparison-value.premium-value {
  color: #d8c4ff;
}

.plan-retention-note {
  max-width: 920px;
  margin: 18px auto 0;
  color: #8495aa;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.plan-retention-note strong {
  color: #c6d3e2;
}

.origin-section {
  border-block: 1px solid rgba(148, 163, 184, .11);
  background: radial-gradient(580px circle at 20% 50%, rgba(239, 80, 207, .08), transparent 64%), #070b14;
}

.origin-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 85px;
  max-width: 1060px;
}

.origin-mark {
  display: grid;
  width: 250px;
  height: 250px;
  place-items: center;
  border: 1px solid rgba(126, 152, 196, .3);
  border-radius: 52px;
  background: radial-gradient(circle at 45% 35%, rgba(80, 216, 244, .12), transparent 55%), linear-gradient(145deg, #111c31, #0b0e20);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  transform: rotate(-3deg);
}

.origin-mark img {
  width: 190px;
  height: 190px;
  object-fit: contain;
}

.origin-copy h2 {
  margin: 14px 0 18px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.043em;
}

.origin-copy p {
  margin: 0;
  color: #95a5b9;
  font-size: 14px;
  line-height: 1.76;
}

.origin-copy p + p {
  margin-top: 14px;
}

@media (max-width: 1080px) {
  .conversion-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-evidence {
    width: min(100%, 740px);
    min-height: 590px;
    margin: 0 auto;
  }

  .conversion-hero + .proof-strip {
    margin-top: -35px;
  }

  .product-story,
  .product-story.reverse {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .product-story.reverse .product-story-copy {
    order: 0;
  }

  .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .atom-page [data-bgl-header-inner] .brand img {
    max-width: none !important;
  }

  .product-nav {
    top: 64px;
  }

  #workflow,#capabilities,#plans,#faq {
    scroll-margin-top: 128px;
  }

  .conversion-hero .hero-grid {
    gap: 25px;
  }

  .hero-evidence {
    min-height: 455px;
  }

  .evidence-admin {
    top: 18px;
    left: 0;
    height: 310px;
    transform: none;
  }

  .evidence-discord {
    top: 260px;
    right: -4px;
    bottom: auto;
    width: 155px;
    height: 154px;
  }

  .evidence-label {
    bottom: 0;
    left: -4px;
    max-width: calc(100% - 135px);
  }

  .conversion-hero + .proof-strip {
    grid-template-columns: 1fr;
    margin-top: -22px;
  }

  .conversion-hero + .proof-strip div {
    border-right: 0;
    border-bottom: 1px solid #1e2c42;
  }

  .conversion-hero + .proof-strip div:last-child {
    border-bottom: 0;
  }

  .workflow-proof {
    padding-top: 70px;
  }

  .product-story {
    padding: 42px 0;
  }

  .product-shot {
    height: 300px;
  }

  .product-shot.discord-shot {
    height: 490px;
  }

  .outcome-grid,
  .audience-strip,
  .plan-grid,
  .origin-grid,
  .plan-detail-cta {
    grid-template-columns: 1fr;
  }

  .plan-detail-cta .button {
    width: 100%;
  }

  .plan-summary-grid .plan-card-head,
  .plan-summary-grid .plan-card > p,
  .plan-summary-grid .plan-fit {
    min-height: 0;
  }

  .audience-strip > div + div {
    border-top: 1px solid #213047;
    border-left: 0;
  }

  .origin-grid {
    gap: 42px;
  }

  .origin-mark {
    width: 190px;
    height: 190px;
    margin: 0 auto;
    border-radius: 42px;
  }

  .origin-mark img {
    width: 145px;
    height: 145px;
  }

  .plan-comparison-wrap {
    overflow-x: auto;
    border-radius: 14px;
  }

  .plan-comparison {
    min-width: 700px;
  }

  .plan-comparison th,
  .plan-comparison td {
    padding: 13px 14px;
  }
}

@media (max-width: 440px) {
  .hero-evidence {
    min-height: 400px;
  }

  .evidence-admin {
    height: 260px;
  }

  .evidence-discord {
    top: 232px;
    width: 130px;
    height: 145px;
  }

  .evidence-label {
    max-width: calc(100% - 112px);
    padding: 10px;
  }

  .evidence-label span {
    display: none;
  }

  .product-shot {
    height: 245px;
  }

  .product-shot.discord-shot {
    height: 420px;
  }

  .plan-card,
  .outcome-card {
    padding: 24px;
  }

  .plan-card-head {
    display: grid;
  }

  .plan-card-head > small {
    max-width: none;
    text-align: left;
  }
}

/* Product workflow previews. */
.demo-admin {
  --demo-scale: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(145deg, #0b1427, #070b18 68%);
  color: #f4f7fc;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.demo-admin-titlebar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 73px;
  padding: 11px 15px;
  border-bottom: 1px solid #27334a;
  background: linear-gradient(115deg, #17243b, #151d32 64%, #1b1536);
}

.demo-event-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #344a68;
  border-radius: 11px;
  background: #07101e;
}

.demo-event-mark img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.demo-admin-titlebar > div:nth-child(2) {
  display: grid;
  min-width: 0;
}

.demo-admin-titlebar small {
  color: #67e8f9;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.demo-admin-titlebar strong {
  overflow: hidden;
  margin: 1px 0;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-admin-titlebar span {
  overflow: hidden;
  color: #8e9db2;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-admin-titlebar span b {
  margin-right: 6px;
  color: #facc15;
}

.demo-admin-titlebar button,
.demo-live {
  align-self: center;
  padding: 7px 10px;
  border: 1px solid #34435a;
  border-radius: 9px;
  background: #202a3d;
  color: #d8e1ee;
  font-size: 8px;
  font-weight: 800;
}

.demo-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(74, 222, 128, .26);
  background: rgba(20, 83, 45, .28);
  color: #86efac;
  text-transform: uppercase;
}

.demo-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}

.demo-admin-tabs {
  display: flex;
  min-height: 39px;
  align-items: stretch;
  gap: 5px;
  padding: 5px 13px;
  overflow: hidden;
  border-bottom: 1px solid #222d43;
  background: #080d1d;
}

.demo-admin-tabs span {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #7d8ba1;
  font-size: 7px;
  font-weight: 800;
}

.demo-admin-tabs span b {
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #202b3d;
  color: #b9c5d5;
  font-size: 6px;
}

.demo-admin-tabs span.active {
  border-color: rgba(34, 211, 238, .35);
  background: #10283b;
  color: #eefbff;
}

.demo-admin-tabs span.active b {
  background: #215469;
  color: #a5f3fc;
}

.demo-admin-body {
  padding: 14px 16px 16px;
}

.demo-admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-admin-heading > div {
  display: grid;
  gap: 1px;
}

.demo-admin-heading > .demo-class-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.demo-class-heading > img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 7px;
  object-fit: contain;
}

.demo-class-heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.demo-admin-heading small {
  color: #67e8f9;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.demo-admin-heading strong {
  font-size: 11px;
}

.demo-admin-heading > span {
  padding: 4px 7px;
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 99px;
  background: rgba(8, 145, 178, .13);
  color: #8cecff;
  font-size: 6px;
  font-weight: 800;
}

.demo-bracket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, .95fr);
  align-items: center;
  gap: 0;
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #202d43;
  border-radius: 12px;
  background: radial-gradient(300px circle at 45% 35%, rgba(15, 105, 130, .12), transparent 70%), #070c17;
}

.demo-round {
  display: grid;
  gap: 7px;
}

.demo-round > small {
  color: #76879e;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.demo-match {
  overflow: hidden;
  border: 1px solid #29364c;
  border-radius: 8px;
  background: #0f1727;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.demo-match > span {
  display: block;
  padding: 4px 7px;
  border-bottom: 1px solid #27344a;
  color: #7f8fa5;
  font-size: 5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-match.complete > span {
  color: #6ee7b7;
}

.demo-match.live {
  border-color: rgba(34, 211, 238, .55);
  box-shadow: 0 0 24px rgba(34, 211, 238, .08);
}

.demo-match.live > span {
  color: #67e8f9;
}

.demo-match p {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) auto;
  min-height: 29px;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 7px;
}

.demo-match p + p {
  border-top: 1px solid #202b3e;
}

.demo-match p img,
.demo-team-placeholder {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.demo-team-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed #425069;
  border-radius: 6px;
  color: #65758c;
  font-size: 7px;
  font-weight: 900;
}

.demo-match p b {
  overflow: hidden;
  color: #cfd8e6;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-match p strong {
  color: #f8fafc;
  font-size: 8px;
}

.demo-bracket-line {
  position: relative;
  min-height: 112px;
  align-self: stretch;
}

.demo-bracket-line.merge::before {
  position: absolute;
  top: 24%;
  right: 50%;
  bottom: 24%;
  left: 0;
  border-top: 2px solid #40516a;
  border-right: 2px solid #40516a;
  border-bottom: 2px solid #40516a;
  border-radius: 0 6px 6px 0;
  content: "";
}

.demo-bracket-line.merge::after,
.demo-bracket-line.advance::after {
  position: absolute;
  top: calc(50% - 1px);
  height: 2px;
  background: #40516a;
  content: "";
}

.demo-bracket-line.merge::after {
  right: 0;
  left: 50%;
}

.demo-bracket-line.advance::after {
  right: 0;
  left: 0;
}

.demo-rank-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.demo-rank-summary article {
  display: grid;
  gap: 1px;
  padding: 7px 8px;
  border: 1px solid #26364e;
  border-radius: 8px;
  background: #0d1728;
}

.demo-rank-summary small {
  color: #708198;
  font-size: 5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-rank-summary strong {
  overflow: hidden;
  color: #edf8ff;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-rank-summary span {
  color: #75dff0;
  font-size: 6px;
}

.demo-rank-table {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #26364e;
  border-radius: 9px;
  background: #09111f;
}

.demo-rank-row {
  display: grid;
  grid-template-columns: 35px minmax(0, 1.35fr) minmax(72px, .8fr) 50px;
  min-height: 27px;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border-top: 1px solid #1d2a3e;
  color: #b9c5d5;
  font-size: 6px;
}

.demo-rank-row.heading {
  min-height: 23px;
  border-top: 0;
  background: #101b2e;
  color: #71839b;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-rank-row > b {
  color: #67e8f9;
  font-size: 7px;
}

.demo-rank-row > span:nth-child(2) {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #eef6ff;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-rank-row img,
.rank-avatar {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.rank-avatar {
  display: grid;
  place-items: center;
  color: white;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.rank-avatar.beacon,
.discord-member-avatar.beacon {
  background: linear-gradient(135deg, #14b8a6, #2563eb);
}

.rank-avatar.circuit,
.discord-member-avatar.circuit {
  background: linear-gradient(135deg, #f97316, #be123c);
}

.rank-avatar.tidal,
.discord-member-avatar.tidal {
  background: linear-gradient(135deg, #06b6d4, #4f46e5);
}

.discord-member-avatar.fennec {
  background: linear-gradient(135deg, #f59e0b, #7c3aed);
}

.demo-rank-row > em {
  overflow: hidden;
  color: #c4b5fd;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-rank-row > strong {
  color: #a5f3fc;
  font-size: 7px;
  text-align: right;
}

.demo-activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
  color: #708198;
  font-size: 6px;
}

.demo-activity span:first-child {
  color: #94a3b8;
}

.demo-activity i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, .7);
}

.demo-admin-hero .demo-admin-titlebar {
  min-height: 67px;
}

.demo-admin-hero .demo-admin-body {
  padding: 12px 14px;
}

.demo-admin-hero .demo-admin-tabs span {
  padding-inline: 7px;
}

.demo-admin-shot {
  height: 455px;
}

.demo-admin-full .demo-bracket-wide {
  grid-template-columns: minmax(0, 1fr) 23px minmax(0, .95fr) 23px minmax(0, .9fr);
  min-height: 250px;
}

.demo-admin-full .final-round,
.demo-admin-full .championship-round {
  align-self: center;
}

.evidence-discord .discord-peek {
  height: 100%;
}

.discord-peek {
  background: #1e1f22;
  color: #dbdee1;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.discord-peek-head {
  display: flex;
  height: 37px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-bottom: 1px solid #111214;
  box-shadow: 0 1px 0 #26272b;
}

.discord-peek-head span {
  color: #949ba4;
  font-size: 15px;
}

.discord-peek-head strong {
  font-size: 8px;
}

.discord-peek-message {
  display: grid;
  grid-template-columns: 29px 1fr;
  gap: 8px;
  padding: 17px 10px;
}

.discord-peek-message > img {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  object-fit: contain;
}

.discord-peek-message p {
  display: grid;
  gap: 5px;
  margin: 0;
}

.discord-peek-message p > b {
  font-size: 8px;
}

.discord-peek-message p em {
  padding: 2px 4px;
  border-radius: 3px;
  background: #5865f2;
  font-size: 5px;
  font-style: normal;
}

.discord-peek-message p small {
  color: #b5bac1;
  font-size: 7px;
}

.discord-peek-message p strong {
  padding: 9px;
  border-left: 3px solid #57f287;
  border-radius: 3px;
  background: #2b2d31;
  color: #fff;
  font-size: 8px;
  line-height: 1.4;
}

.discord-peek-message p span {
  color: #23a559;
  font-size: 6px;
  font-weight: 800;
}

.product-shot.discord-shot {
  width: 100%;
  height: 560px;
  max-width: 680px;
}

.discord-demo {
  display: grid;
  grid-template-columns: 48px 145px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #313338;
  color: #dbdee1;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.discord-server-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  background: #1e1f22;
}

.discord-server-rail img {
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 11px;
  background: #2b2d31;
  object-fit: contain;
}

.discord-server-rail span {
  width: 26px;
  height: 1px;
  background: #35363c;
}

.discord-channel-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px;
  background: #2b2d31;
}

.discord-channel-rail strong {
  overflow: hidden;
  margin: 0 4px 12px;
  color: #f2f3f5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-channel-rail small {
  margin: 10px 4px 2px;
  color: #949ba4;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .06em;
}

.discord-channel-rail span {
  overflow: hidden;
  padding: 6px 7px;
  border-radius: 4px;
  color: #949ba4;
  font-size: 7px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-channel-rail span.active {
  background: #404249;
  color: #f2f3f5;
}

.discord-chat {
  min-width: 0;
  background: #313338;
}

.discord-chat-head {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-bottom: 1px solid #202225;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.discord-chat-head b {
  color: #949ba4;
  font-size: 16px;
}

.discord-chat-head strong {
  font-size: 9px;
}

.discord-chat-head span {
  overflow: hidden;
  color: #949ba4;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 12px 12px;
  color: #949ba4;
  font-size: 6px;
  font-weight: 700;
}

.discord-date::before,
.discord-date::after {
  height: 1px;
  flex: 1;
  background: #3f4147;
  content: "";
}

.discord-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  padding: 4px 13px 18px;
}

.discord-message > img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
}

.discord-author {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.discord-author strong {
  color: #f2f3f5;
  font-size: 8px;
}

.discord-author em {
  padding: 1px 4px;
  border-radius: 3px;
  background: #5865f2;
  color: white;
  font-size: 5px;
  font-style: normal;
  font-weight: 800;
}

.discord-author span {
  color: #949ba4;
  font-size: 5px;
}

.discord-embed {
  max-width: 355px;
  padding: 12px;
  border-left: 3px solid #a855f7;
  border-radius: 4px;
  background: #2b2d31;
}

.discord-embed small {
  color: #c084fc;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .09em;
}

.discord-embed h4 {
  margin: 3px 0 2px;
  color: #f2f3f5;
  font-size: 11px;
}

.discord-embed > p {
  margin: 0 0 9px;
  color: #b5bac1;
  font-size: 6px;
  line-height: 1.5;
}

.discord-versus,
.discord-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #404249;
  border-radius: 5px;
  background: #242529;
}

.discord-versus span,
.discord-score span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: #e3e5e8;
  font-size: 6px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-versus span:last-child,
.discord-score span:last-child {
  justify-content: flex-end;
}

.discord-versus img,
.discord-score img {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
}

.discord-versus b {
  color: #949ba4;
  font-size: 6px;
}

.discord-embed dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 9px 0;
}

.discord-embed dl div {
  display: grid;
}

.discord-embed dt {
  color: #949ba4;
  font-size: 5px;
  font-weight: 750;
}

.discord-embed dd {
  margin: 0;
  color: #dbdee1;
  font-size: 6px;
}

.discord-embed button {
  padding: 6px 9px;
  border: 0;
  border-radius: 3px;
  background: #5865f2;
  color: white;
  font-size: 6px;
  font-weight: 750;
}

.discord-embed.result {
  border-left-color: #23a559;
}

.discord-embed.result small {
  color: #57f287;
}

.discord-score strong {
  color: #57f287;
  font-size: 9px;
}

.discord-embed.result > p {
  margin-top: 8px;
  margin-bottom: 0;
}

.tournament-hub-shot {
  height: 360px;
}

.hub-demo {
  height: 100%;
  padding: 18px;
  overflow: hidden;
  background: radial-gradient(520px circle at 80% -10%, rgba(168, 85, 247, .16), transparent 65%), #070c17;
  color: #f4f8ff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.hub-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hub-demo-head > div {
  display: grid;
}

.hub-demo-head small {
  color: #67e8f9;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hub-demo-head strong {
  font-size: 14px;
}

.hub-demo-head > span {
  padding: 5px 8px;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 99px;
  background: rgba(8, 145, 178, .12);
  color: #a5f3fc;
  font-size: 6px;
  font-weight: 800;
}

.hub-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hub-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #29374f;
  border-radius: 10px;
  background: #101827;
  box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
}

.hub-card.featured {
  border-color: rgba(34, 211, 238, .46);
}

.hub-banner {
  position: relative;
  display: grid;
  height: 110px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 110%, rgba(34, 211, 238, .45), transparent 56%), linear-gradient(135deg, #092940, #17103d);
}

.hub-banner.violet {
  background: radial-gradient(circle at 50% 110%, rgba(236, 72, 153, .38), transparent 56%), linear-gradient(135deg, #251050, #090e2b);
}

.hub-banner.ember {
  background: radial-gradient(circle at 50% 110%, rgba(249, 115, 22, .42), transparent 56%), linear-gradient(135deg, #361025, #17102e);
}

.hub-banner::before {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  transform: perspective(200px) rotateX(50deg) scale(1.6);
}

.hub-banner > span {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 3px 6px;
  border: 1px solid rgba(165, 243, 252, .46);
  border-radius: 99px;
  background: rgba(6, 20, 35, .72);
  color: #a5f3fc;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .08em;
}

.hub-banner > span.community {
  border-color: rgba(74, 222, 128, .5);
  color: #bbf7d0;
}

.hub-banner > span.private {
  border-color: rgba(192, 132, 252, .54);
  color: #e9d5ff;
}

.hub-banner > div {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}

.hub-banner img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .36));
}

.hub-banner .hub-event-mark img {
  width: 82px;
  height: 82px;
}

.hub-banner img + img {
  width: 54px;
  height: 54px;
  opacity: .78;
  transform: translateY(8px);
}

.hub-card-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 10px;
}

.hub-card-identity {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hub-card-identity > img,
.hub-community-mark {
  width: 34px;
  height: 34px;
  border: 1px solid #314159;
  border-radius: 9px;
  background: #0b1220;
  object-fit: cover;
}

.hub-community-mark {
  display: grid;
  place-items: center;
  color: #f8fafc;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.hub-community-mark.summit {
  background: radial-gradient(circle at 35% 25%, rgba(250, 204, 21, .75), transparent 35%), linear-gradient(145deg, #3a174e, #111c3b 60%, #083344);
}

.hub-card-identity > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2px;
}

.hub-card-identity small {
  color: #74859d;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-card-identity h4 {
  grid-column: 1 / -1;
  overflow: hidden;
  margin: 0;
  color: #f8fafc;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-card-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 6px;
  margin-top: 8px;
}

.hub-card-body dl {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #243149;
  border-radius: 6px;
  background: #0a111e;
}

.hub-card-body dl div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.hub-card-body dl div:last-child {
  border-bottom: 0;
}

.hub-card-body dt {
  color: #718198;
  font-size: 5px;
  font-weight: 800;
  text-transform: uppercase;
}

.hub-card-body dd {
  overflow: hidden;
  margin: 0;
  color: #d6deea;
  font-size: 5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-player-stat {
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 7px;
  background: rgba(34, 211, 238, .07);
}

.hub-player-stat span {
  color: #718198;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hub-player-stat strong {
  margin-top: 3px;
  color: #a5f3fc;
  font-size: 15px;
  line-height: 1;
}

.hub-card-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: #8a9bb0;
  font-size: 5px;
}

.hub-card-time {
  display: grid;
  min-width: 0;
}

.hub-card-time span {
  color: #718198;
  font-size: 5px;
}

.hub-card-time strong {
  overflow: hidden;
  color: #e5edf7;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-card-foot > strong {
  color: #8cecff;
  font-size: 5px;
}

@media (max-width: 720px) {
  .demo-admin-titlebar {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 59px;
    padding: 8px 10px;
  }

  .demo-event-mark {
    width: 35px;
    height: 35px;
  }

  .demo-event-mark img {
    width: 30px;
    height: 30px;
  }

  .demo-admin-titlebar strong {
    font-size: 11px;
  }

  .demo-admin-tabs {
    overflow-x: hidden;
    padding-inline: 7px;
  }

  .demo-admin-tabs span {
    display: none;
  }

  .demo-admin-tabs span.active,
  .demo-admin-tabs span:nth-child(3) {
    display: inline-flex;
  }

  .demo-admin-body {
    padding: 10px;
  }

  .demo-admin-full .demo-bracket-wide {
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, .95fr);
  }

  .demo-admin-full .demo-bracket-wide > :nth-last-child(-n+2) {
    display: none;
  }

  .demo-admin-shot {
    height: 355px;
  }

  .product-shot.discord-shot {
    height: 500px;
  }

  .discord-demo {
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .discord-channel-rail {
    display: none;
  }

  .tournament-hub-shot {
    height: 385px;
  }

  .hub-demo {
    padding: 12px;
  }

  .hub-demo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hub-card:last-child {
    display: none;
  }

  .hub-banner {
    height: 90px;
  }

  .hub-banner img {
    width: 54px;
    height: 54px;
  }

  .hub-banner img + img {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 440px) {
  .demo-live,
  .demo-admin-titlebar button {
    display: none;
  }

  .demo-admin-titlebar {
    grid-template-columns: 35px minmax(0, 1fr);
  }

  .demo-admin-heading > span,
  .demo-activity span:last-child {
    display: none;
  }

  .demo-bracket {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .demo-bracket > .demo-bracket-line,
  .demo-bracket > .final-round,
  .demo-bracket > .championship-round {
    display: none;
  }

  .demo-admin-shot {
    height: 300px;
  }

  .product-shot.discord-shot {
    height: 450px;
  }

  .discord-embed {
    padding: 9px;
  }

  .discord-versus,
  .discord-score {
    grid-template-columns: 1fr;
  }

  .discord-versus > b,
  .discord-score > strong {
    justify-self: start;
  }

  .discord-versus span:last-child,
  .discord-score span:last-child {
    justify-content: flex-start;
  }

  .tournament-hub-shot {
    height: 380px;
  }

  .hub-demo-grid {
    grid-template-columns: 1fr;
  }

  .hub-card:not(:first-child) {
    display: none;
  }

  .hub-card-body h4 {
    font-size: 11px;
  }
}

/* Discord product demo aligned with ATOM's actual message and channel structure. */
.discord-peek-message {
  grid-template-columns: 31px minmax(0, 1fr);
  padding: 14px 9px;
}

.discord-peek-message > img {
  width: 31px;
  height: 31px;
}

.discord-peek-message > div {
  min-width: 0;
}

.discord-peek-message .discord-peek-author {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 5px;
}

.discord-peek-message .discord-peek-author b {
  color: #f2f3f5;
  font-size: 8px;
}

.discord-peek-message .discord-peek-author em {
  padding: 1px 4px;
  border-radius: 3px;
  background: #5865f2;
  color: white;
  font-size: 5px;
  font-style: normal;
  font-weight: 850;
}

.discord-peek-message .discord-peek-author span {
  color: #949ba4;
  font-size: 5px;
}

.discord-peek-embed {
  display: grid;
  gap: 4px;
  padding: 9px 9px 8px;
  border-left: 3px solid #5ee4fa;
  border-radius: 3px;
  background: #2b2d31;
}

.discord-peek-embed strong,
.discord-peek-embed b,
.discord-peek-embed span,
.discord-peek-embed small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-peek-embed strong {
  color: #f2f3f5;
  font-size: 7px;
}

.discord-peek-embed b {
  color: #f2f3f5;
  font-size: 7px;
}

.discord-peek-embed span {
  color: #dbdee1;
  font-size: 6px;
}

.discord-peek-embed small {
  margin-top: 3px;
  color: #b5bac1;
  font-size: 5px;
  font-weight: 700;
}

.product-shot.discord-shot {
  width: 100%;
  height: 500px;
  max-width: 760px;
  background: #1e1f22;
}

.discord-demo {
  grid-template-columns: 45px 138px minmax(0, 1fr) 102px;
  background: #313338;
}

.discord-leaderboard-demo {
  grid-template-columns: 45px 138px minmax(0, 1fr);
}

.leaderboard-shot {
  height: 620px !important;
}

.discord-server-rail {
  gap: 7px;
  padding: 8px 5px;
}

.discord-server-rail img {
  width: 33px;
  height: 33px;
  border-radius: 12px;
}

.discord-server-rail .discord-home-logo {
  padding: 8px;
  background: #5865f2;
  object-fit: contain;
}

.discord-channel-rail {
  gap: 2px;
  padding: 10px 7px;
}

.discord-channel-rail strong {
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid #3b3d44;
  font-size: 9px;
}

.discord-channel-rail small {
  margin-top: 8px;
  font-size: 5px;
}

.discord-channel-rail span {
  padding: 5px 6px;
  font-size: 6px;
}

.discord-chat {
  min-width: 0;
  overflow: hidden;
  background: #313338;
}

.discord-chat-head {
  height: 41px;
  padding-inline: 11px;
}

.discord-chat-head strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-channel-welcome {
  display: grid;
  gap: 3px;
  padding: 22px 13px 13px;
}

.discord-channel-welcome > b {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #41434a;
  color: #f2f3f5;
  font-size: 22px;
}

.discord-channel-welcome strong {
  overflow: hidden;
  color: #f2f3f5;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-channel-welcome span {
  color: #b5bac1;
  font-size: 6px;
}

.discord-channel-welcome.compact {
  padding-top: 16px;
  padding-bottom: 8px;
}

.discord-channel-welcome.compact > b {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  font-size: 18px;
}

.discord-channel-welcome.compact strong {
  font-size: 10px;
}

.discord-date {
  margin: 8px 12px 10px;
}

.discord-match-post {
  padding-top: 7px;
  padding-bottom: 12px;
  background: rgba(88, 101, 242, .035);
}

.discord-message {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding-right: 11px;
  padding-left: 11px;
}

.discord-message > img {
  width: 30px;
  height: 30px;
}

.discord-mentions {
  margin: 0 0 5px;
  color: #c9cdfb;
  font-size: 6px;
}

.discord-author {
  margin-bottom: 3px;
}

.discord-author strong {
  font-size: 7px;
}

.discord-embed {
  width: min(100%, 370px);
  max-width: none;
  padding: 10px;
  border-left-color: #a855f7;
  background: #2b2d31;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
}

.discord-embed-title {
  display: block;
  margin-bottom: 7px;
  color: #f2f3f5;
  font-size: 7px;
}

.discord-embed h4 {
  margin: 0 0 7px;
  color: #f2f3f5;
  font-size: 9px;
}

.discord-matchup {
  display: block;
  margin-bottom: 8px;
  color: #f2f3f5;
  font-size: 7px;
}

.discord-rosters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.discord-rosters > div {
  display: grid;
  align-content: start;
}

.discord-rosters strong,
.discord-embed section > strong {
  color: #f2f3f5;
  font-size: 6px;
  text-decoration: underline;
}

.discord-rosters span {
  overflow: hidden;
  width: max-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 1px 3px;
  border-radius: 2px;
  background: #404675;
  color: #c9cdfb;
  font-size: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-embed section {
  margin-top: 7px;
}

.discord-embed section > p,
.discord-embed.result > p {
  margin: 2px 0 0;
  color: #dbdee1;
  font-size: 5px;
  line-height: 1.42;
}

.discord-embed section > p b,
.discord-embed.result > p b {
  color: #f2f3f5;
}

.discord-embed code {
  padding: 1px 3px;
  border-radius: 2px;
  background: #404249;
  color: #f2f3f5;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 5px;
}

.discord-embed > small {
  display: block;
  margin-top: 8px;
  color: #b5bac1;
  font-size: 5px;
  font-weight: 750;
}

.discord-report-button {
  margin-top: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: #4e5058;
  color: #f2f3f5;
  font-size: 6px;
  font-weight: 750;
}

.discord-result-post {
  padding-top: 9px;
  border-top: 1px solid #3f4147;
}

.discord-embed.result {
  border-left-color: #5ee4fa;
}

.discord-embed.result .discord-embed-title {
  color: #f2f3f5;
}

.discord-leaderboard-post {
  padding-top: 9px;
  padding-bottom: 12px;
  border-top: 1px solid #3f4147;
}

.leaderboard-shot .discord-leaderboard-post {
  padding-top: 5px;
  border-top: 0;
}

.discord-embed.leaderboard {
  border-left-color: #5ee4fa;
}

.leaderboard-shot .discord-embed.leaderboard {
  width: min(100%, 365px);
}

.discord-leaderboard-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 10px;
}

.discord-leaderboard-title > img {
  width: 44px;
  height: 44px;
  border: 1px solid #4a3825;
  border-radius: 4px;
  background: #17191d;
  object-fit: cover;
}

.discord-leaderboard-head,
.discord-leaderboard-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 5px;
}

.discord-leaderboard-head {
  padding: 3px 4px;
  border-bottom: 1px solid #41434a;
  color: #b5bac1;
  font-size: 5px;
  font-weight: 850;
}

.discord-leaderboard-head span:last-child {
  text-align: right;
}

.discord-leaderboard-list {
  display: block;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.discord-leaderboard-list li {
  min-width: 0;
  padding: 2.5px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
  color: #dbdee1;
  font-size: 5.5px;
}

.discord-leaderboard-list li b {
  color: #f2f3f5;
}

.discord-leaderboard-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-leaderboard-list li strong {
  color: #f2f3f5;
  font-size: 5px;
  text-align: right;
}

/* One leaderboard system, shown as the full BGL view and its Discord Top 20. */
.leaderboard-showcase-shot {
  height: 660px;
  overflow: hidden;
  border: 1px solid #26364e;
  background: #070b14;
}

.leaderboard-showcase {
  position: relative;
  height: 100%;
  background: radial-gradient(420px circle at 18% -5%, rgba(34, 211, 238, .11), transparent 68%), radial-gradient(380px circle at 95% 15%, rgba(168, 85, 247, .12), transparent 70%), #070b14;
}

.web-leaderboard-demo,
.leaderboard-discord-pane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #29374f;
  border-radius: 12px;
}

.web-leaderboard-demo {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: 69%;
  background: #0c1120;
  color: #f8fafc;
}

.web-leaderboard-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 105px;
  padding: 12px;
  border-bottom: 1px solid #2a3750;
  background: radial-gradient(220px circle at 18% 40%, rgba(34, 211, 238, .15), transparent 68%), linear-gradient(115deg, #071426, #11102d 68%, #1d1032);
}

.web-leaderboard-hero > div:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.web-leaderboard-hero small {
  color: #67e8f9;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .12em;
}

.web-leaderboard-hero strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-leaderboard-hero > div:last-child > span {
  color: #cbd5e1;
  font-size: 6px;
}

.ranked-thumbnail {
  position: relative;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(251, 146, 60, .54);
  border-radius: 8px;
  background: #17191d;
  box-shadow: inset 0 0 18px rgba(249, 115, 22, .2);
}

.ranked-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.08);
}

.ranked-thumbnail::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(5, 8, 13, .88));
  content: "";
}

.ranked-thumbnail span {
  position: absolute;
  z-index: 1;
  right: 3px;
  bottom: 3px;
  left: 3px;
  color: #fed7aa;
  font-size: 5px;
  font-weight: 950;
  letter-spacing: .08em;
  text-align: center;
}

.web-leaderboard-body {
  padding: 12px;
}

.web-leaderboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.web-leaderboard-title > div,
.web-leaderboard-title > b {
  display: grid;
}

.web-leaderboard-title > div strong {
  font-size: 16px;
}

.web-leaderboard-title > div span {
  color: #aab8ca;
  font-size: 7px;
}

.web-leaderboard-title > b {
  min-width: 78px;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 9px;
  background: rgba(34, 211, 238, .07);
  font-size: 11px;
  text-align: right;
}

.web-leaderboard-title > b small {
  color: #67e8f9;
  font-size: 5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.web-leaderboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.web-leaderboard-metrics > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 8px;
  background: #0e1426;
}

.web-leaderboard-metrics small,
.web-leaderboard-controls small {
  color: #91a5c3;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.web-leaderboard-metrics strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-leaderboard-controls {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 6px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 8px;
  background: #0a1020;
}

.web-leaderboard-controls > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.web-leaderboard-controls span {
  overflow: hidden;
  padding: 7px 8px;
  border: 1px solid #324158;
  border-radius: 6px;
  color: #d9e2ef;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-leaderboard-count {
  margin: 8px 3px 5px;
  color: #9ab3d5;
  font-size: 5px;
  text-align: right;
}

.web-leaderboard-table {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 8px;
}

.web-leaderboard-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, .11);
  background: #0d1223;
}

.web-leaderboard-row:last-child {
  border-bottom: 0;
}

.web-leaderboard-row.heading {
  min-height: 28px;
  color: #72e8fa;
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.web-leaderboard-row > b,
.web-leaderboard-row > strong {
  color: #f8fafc;
  font-size: 8px;
}

.web-leaderboard-row > strong {
  color: #7eeafb;
  text-align: right;
}

.web-leaderboard-row > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.web-leaderboard-row > span > img,
.web-player-avatar {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border: 1px solid #334155;
  border-radius: 50%;
  object-fit: cover;
}

.web-leaderboard-row i {
  display: grid;
  min-width: 0;
  color: #f1f5f9;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.web-leaderboard-row i small {
  overflow: hidden;
  color: #718198;
  font-size: 5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-player-avatar.beacon {
  background: linear-gradient(145deg, #22d3ee, #2563eb);
}

.web-player-avatar.circuit {
  background: linear-gradient(145deg, #fb7185, #ea580c);
}

.web-player-avatar.tidal {
  background: linear-gradient(145deg, #a78bfa, #4f46e5);
}

.web-player-avatar.fennec {
  background: linear-gradient(145deg, #f472b6, #9333ea);
}

.web-player-avatar.echo {
  background: linear-gradient(145deg, #34d399, #0f766e);
}

.web-player-avatar.nova {
  background: linear-gradient(145deg, #facc15, #ea580c);
}

.leaderboard-discord-pane {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  width: 43%;
  height: 520px;
  background: #313338;
  box-shadow: -22px 24px 55px rgba(0, 0, 0, .52);
  color: #dbdee1;
}

.leaderboard-discord-head {
  display: grid;
  grid-template-columns: 13px auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid #3f4147;
  background: #2b2d31;
}

.leaderboard-discord-head b,
.leaderboard-discord-head strong {
  color: #f2f3f5;
  font-size: 7px;
}

.leaderboard-discord-head span {
  overflow: hidden;
  color: #949ba4;
  font-size: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-discord-welcome {
  display: grid;
  gap: 3px;
  padding: 14px 10px 8px;
}

.leaderboard-discord-welcome strong {
  color: #f2f3f5;
  font-size: 10px;
}

.leaderboard-discord-welcome span {
  color: #b5bac1;
  font-size: 5px;
}

.leaderboard-discord-pane .discord-date {
  margin: 7px 9px 5px;
}

.leaderboard-discord-pane .discord-message {
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
  padding-right: 8px;
  padding-left: 8px;
}

.leaderboard-discord-pane .discord-message > img {
  width: 27px;
  height: 27px;
}

.leaderboard-discord-pane .discord-embed.leaderboard {
  width: 100%;
  padding: 8px;
}

.leaderboard-discord-pane .discord-leaderboard-head,
.leaderboard-discord-pane .discord-leaderboard-list li {
  grid-template-columns: 28px minmax(0, 1fr) 30px;
}

.leaderboard-discord-pane .discord-leaderboard-head span:first-child {
  color: #f2f3f5;
}

.leaderboard-discord-pane .discord-leaderboard-list li {
  padding: 2px 3px;
  font-size: 5px;
}

.discord-rank-thumbnail {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}

.discord-member-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 49px 7px 10px;
  overflow: hidden;
  background: #2b2d31;
}

.discord-member-rail > small {
  color: #949ba4;
  font-size: 5px;
  font-weight: 800;
}

.discord-member-rail > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.discord-member-rail img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
}

.discord-member-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  min-width: 24px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 8px;
  font-weight: 900;
}

.discord-member-rail span {
  display: grid;
  min-width: 0;
}

.discord-member-rail strong {
  overflow: hidden;
  color: #b5bac1;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-member-rail strong em {
  padding: 1px 2px;
  border-radius: 2px;
  background: #5865f2;
  color: white;
  font-size: 4px;
  font-style: normal;
}

.discord-author em,
.discord-peek-message .discord-peek-author em,
.discord-member-rail strong em {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.discord-author em::before,
.discord-peek-message .discord-peek-author em::before,
.discord-member-rail strong em::before {
  content: "✓";
  font-weight: 900;
  line-height: 1;
}

.discord-member-rail span small {
  overflow: hidden;
  color: #80848e;
  font-size: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .product-shot.discord-shot {
    height: 500px;
  }

  .product-shot.leaderboard-shot {
    height: 600px !important;
  }

  .leaderboard-showcase-shot {
    height: 1080px;
  }

  .leaderboard-showcase {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 540px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .web-leaderboard-demo,
  .leaderboard-discord-pane {
    position: static;
    width: auto;
    height: auto;
  }

  .discord-demo {
    grid-template-columns: 43px minmax(0, 1fr);
  }

  .discord-member-rail {
    display: none;
  }

  .discord-channel-welcome {
    padding-top: 15px;
  }

  .discord-channel-welcome strong {
    font-size: 10px;
  }
}

@media (max-width: 440px) {
  .product-shot.discord-shot {
    height: 455px;
  }

  .product-shot.leaderboard-shot {
    height: 560px !important;
  }

  .leaderboard-showcase-shot {
    height: 1030px;
  }

  .leaderboard-showcase {
    grid-template-rows: 485px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .web-leaderboard-hero {
    min-height: 88px;
  }

  .web-leaderboard-body {
    padding: 9px;
  }

  .web-leaderboard-metrics > div {
    padding: 6px;
  }

  .web-leaderboard-row {
    min-height: 39px;
  }

  .web-leaderboard-row:nth-child(n+6) {
    display: none;
  }

  .discord-channel-welcome {
    padding-right: 9px;
    padding-left: 9px;
  }

  .discord-message {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .discord-message > img {
    width: 26px;
    height: 26px;
  }

  .discord-rosters {
    gap: 6px;
  }

  .discord-result-post {
    display: none;
  }

  .leaderboard-shot .discord-channel-welcome {
    display: none;
  }
}

/* Product previews grounded in the class and tournament workflow. */
.core-overview .demo-admin-titlebar { background: linear-gradient(115deg,#152338,#101b2e 70%,#173042); }
.core-overview .demo-admin-heading > div { gap: 4px; }
.core-class-card { overflow: hidden; margin-top: 14px; border: 1px solid #30425c; border-radius: 13px; background: #0d182b; }
.core-class-banner { height: 65px; overflow: hidden; background: linear-gradient(115deg,#132d4b,#233054 57%,#131c36); }
.core-class-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.core-class-content { padding: 10px 13px; }
.core-class-identity { display: flex; align-items: center; gap: 9px; }
.core-class-identity > img { width: 37px; height: 37px; flex: none; border-radius: 9px; object-fit: cover; }
.core-class-identity > div { display: grid; min-width: 0; gap: 2px; }
.core-class-identity small { color: #79dfea; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.core-class-identity strong { color: #eef5fc; font-size: 12px; }
.core-class-identity span { color: #91a4bb; font-size: 8px; }
.core-class-identity > b { margin-left: auto; padding: 5px 8px; border: 1px solid #29614e; border-radius: 99px; color: #9be7c6; font-size: 7px; }
.core-class-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; }
.core-class-stats span { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid #263952; border-radius: 8px; background: #101f35; color: #95a7bc; font-size: 7px; }
.core-class-stats strong { color: #f2f8ff; font-size: 13px; }
.core-class-action { display: flex; justify-content: space-between; margin-top: 9px; color: #8ee8f8; font-size: 8px; font-weight: 800; }
.core-overview-foot { display: flex; justify-content: space-between; gap: 8px; padding: 11px 2px; color: #8497af; font-size: 7px; }
.core-overview-foot b { color: #81dfcf; }

.results-showcase-shot { height: 490px; background: #14161e; }
.results-showcase { height: 100%; padding: 15px 18px; color: #e7e9ed; background: linear-gradient(#22252e 0 44px,#17191f 44px); font-family: Inter,ui-sans-serif,system-ui,sans-serif; }
.results-discord-head { display: flex; align-items: center; gap: 8px; min-height: 28px; border-bottom: 1px solid #353944; font-size: 11px; }
.results-discord-head b { color: #8c92a0; font-size: 19px; }
.results-discord-head span { margin-left: auto; color: #858d9b; font-size: 8px; }
.results-post { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; padding-top: 17px; }
.results-atom-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #0e1725; }
.results-post-content { min-width: 0; }
.results-embed { max-width: 500px; margin-top: 8px; padding: 12px; border-left: 3px solid #4eb8d4; border-radius: 4px; background: #292d35; }
.results-embed-title { display: flex; align-items: center; gap: 9px; }
.results-embed-title img { width: 31px; height: 31px; border-radius: 7px; object-fit: contain; }
.results-embed-title div { display: grid; gap: 2px; }
.results-embed-title small { color: #aeb8c4; font-size: 7px; letter-spacing: .08em; }
.results-embed-title strong { color: #f3f5f8; font-size: 13px; }
.results-embed p { margin: 9px 0; color: #c8ced7; font-size: 9px; }
.results-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.results-stats span { padding: 5px 8px; border-radius: 5px; background: #202530; color: #aeb8c5; font-size: 8px; }
.results-stats b { color: #f3f8fd; }
.results-attachment { max-width: 500px; margin-top: 6px; overflow: hidden; border: 1px solid #3c4858; border-radius: 6px; background: #0b1424; }
.results-attachment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #273b54; background: linear-gradient(90deg,#15283e,#151e36); }
.results-attachment-head strong { color: #e9f4fb; font-size: 12px; }
.results-attachment-head span { display: inline-flex; align-items: center; gap: 5px; color: #9fb8ce; font-size: 7px; white-space: nowrap; }
.results-attachment-head img { width: 16px; height: 16px; object-fit: contain; }
.results-attachment-bracket { display: grid; grid-template-columns: 1fr 1fr .8fr; align-items: center; gap: 10px; min-height: 169px; padding: 13px; }
.results-attachment-bracket > div { min-width: 0; }
.results-attachment-bracket small { display: block; margin-bottom: 9px; color: #83a8c8; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.results-attachment-bracket p { display: flex; justify-content: space-between; gap: 4px; margin: 3px 0; padding: 7px; border: 1px solid #2b3d55; border-radius: 5px; background: #14233a; color: #d6e6f2; font-size: 7px; white-space: nowrap; }
.results-attachment-bracket p b { color: #86dfbe; }
.results-winner { padding: 10px; border: 1px solid #3f745e; border-radius: 7px; background: #17372e; }
.results-winner strong { color: #c7fbe0; font-size: 9px; }
.results-history { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; max-width: 500px; padding: 8px 1px; color: #929ba9; font-size: 8px; }
.results-history strong { color: #b2c9f7; font-weight: 700; }
@media (max-width: 720px) {
  .core-overview .demo-admin-body { padding: 8px 10px; }
  .core-class-banner { height: 30px; }
  .core-class-content { padding: 7px 9px; }
  .core-class-stats { margin-top: 6px; }
  .core-class-stats span { padding: 4px 5px; }
  .core-overview-foot { display: none; }
  .results-showcase-shot { height: 480px; }
}
@media (max-width: 440px) {
  .core-class-banner { display: none; }
  .core-class-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .core-class-identity > b { display: none; }
  .results-showcase-shot { height: 470px; }
  .results-showcase { padding: 10px; }
  .results-attachment-bracket { gap: 4px; padding: 7px; min-height: 160px; }
  .results-attachment-bracket p { padding: 5px 3px; font-size: 6px; }
  .results-winner { padding: 5px; }
  .results-winner strong { font-size: 7px; }
}

/* Four-step public product story: registration, bracket, match, result. */
.registration-shot { height: 525px; background: #1e2028; }
.registration-demo { height: 100%; padding: 14px 16px; color: #e8e9ed; background: linear-gradient(#24262f 0 47px,#1b1c22 47px); font-family: Inter,ui-sans-serif,system-ui,sans-serif; }
.registration-channel { display: flex; align-items: center; gap: 7px; min-height: 31px; border-bottom: 1px solid #363943; }
.registration-channel span { color: #989da8; font-size: 21px; }
.registration-channel strong { font-size: 12px; }
.registration-channel small { margin-left: auto; color: #8c929e; font-size: 8px; }
.registration-message { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 10px; padding-top: 12px; }
.registration-avatar { width: 31px; height: 31px; border-radius: 50%; object-fit: contain; background: #132035; }
.registration-message-main { min-width: 0; }
.registration-author { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.registration-author strong { color: #f5f5f8; }
.registration-author em { padding: 2px 4px; border-radius: 3px; background: #5268d8; color: #fff; font-size: 7px; font-style: normal; font-weight: 850; }
.registration-author span { color: #8d93a0; font-size: 7px; }
.registration-embed { max-width: 460px; margin-top: 8px; padding: 12px; border-left: 3px solid #8d4bea; border-radius: 5px; background: #27292f; }
.registration-identity { display: flex; align-items: center; gap: 6px; color: #e3e5ea; font-size: 9px; font-weight: 800; }
.registration-identity > img:first-child { width: 20px; height: 20px; border-radius: 50%; object-fit: contain; }
.registration-identity .registration-class { width: 40px; height: 40px; margin-left: auto; border-radius: 5px; object-fit: contain; background: #121b2f; }
.registration-embed h4 { margin: 1px 0 6px; color: #6ba9ff; font-size: 15px; }
.registration-embed > p { margin: 0 0 10px; color: #d5d7dc; font-size: 9px; }
.registration-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-bottom: 12px; }
.registration-meta div { display: grid; gap: 3px; }
.registration-meta small { color: #b6bac4; font-size: 7px; font-weight: 850; }
.registration-meta strong { color: #f2f3f5; font-size: 8px; }
.registration-details { display: grid; gap: 3px; margin-bottom: 11px; font-size: 8px; }
.registration-details strong { margin-top: 2px; color: #f2f3f6; }
.registration-details span { color: #c4c8d0; }
.registration-banner { display: grid; height: 105px; place-items: center; overflow: hidden; border-radius: 5px; background: radial-gradient(circle at 50% 70%,#953dec 0,#57359b 28%,transparent 65%),linear-gradient(125deg,#152750,#251741 60%,#0c193a); }
.registration-banner img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(109,222,255,.48)); }
.registration-id { display: block; margin-top: 8px; color: #b6bbc5; font-size: 7px; }
.registration-buttons { display: flex; gap: 6px; margin-top: 7px; }
.registration-buttons span { padding: 8px 10px; border-radius: 6px; background: #138b61; color: #fff; font-size: 8px; font-weight: 850; }
.registration-buttons span + span { background: #b63845; }
.results-game-info { display: grid; gap: 3px; margin: 10px 0; color: #c8d0db; font-size: 8px; }
.results-game-info strong { color: #f0f4f9; }
@media (max-width: 720px) {
  .registration-shot { height: 480px; }
  .registration-banner { height: 76px; }
  .registration-banner img { width: 62px; height: 62px; }
}
@media (max-width: 440px) {
  .registration-shot { height: 455px; }
  .registration-demo { padding: 10px; }
  .registration-embed { padding: 8px; }
  .registration-meta strong { font-size: 7px; }
  .registration-banner { height: 70px; }
}
.results-tournament-id { display: block; margin-top: 6px; color: #9da7b6; font-size: 7px; }

/* UI previews follow the product's actual server overview and tournament views. */
.real-overview, .real-bracket, .real-match-discord, .real-result-discord { height: 100%; color: #edf4fb; font-family: Inter,ui-sans-serif,system-ui,sans-serif; }
.real-overview { padding: 12px; background: #080e1c; }
.real-admin-banner { display: flex; align-items: center; gap: 8px; height: 52px; margin-bottom: 10px; padding: 7px 10px; border: 1px solid #2c3e55; border-radius: 10px; background: #142032; }
.real-admin-banner img { width: 34px; height: 34px; object-fit: contain; }
.real-admin-banner div { display: grid; gap: 2px; }
.real-admin-banner strong { font-size: 12px; }
.real-admin-banner span { color: #90a0b5; font-size: 7px; }
.real-overview-layout { display: grid; grid-template-columns: 23% minmax(0,1fr); gap: 10px; height: calc(100% - 62px); }
.real-overview-nav { display: grid; align-content: start; gap: 5px; padding: 10px 7px; border: 1px solid #2c3b53; border-radius: 9px; background: linear-gradient(145deg,#17253a,#171a32); }
.real-overview-nav small, .real-ui-label, .real-overview-classes > div:first-child small { color: #79cfe5; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.real-overview-nav span { display: flex; justify-content: space-between; padding: 7px 6px; border: 1px solid #2a3a52; border-radius: 6px; color: #a6b7c8; font-size: 8px; white-space: nowrap; }
.real-overview-nav span.active { border-color: #3d7091; background: #1b3d51; color: #dff4fa; }
.real-overview-nav b { color: #6f869a; }
.real-overview-main { min-width: 0; padding: 11px; border: 1px solid #29384f; border-radius: 10px; background: linear-gradient(155deg,#121d2d,#14182b); }
.real-overview-server { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.real-overview-server > img { width: 29px; height: 29px; border-radius: 6px; object-fit: contain; background: #1c3041; }
.real-overview-server div { display: grid; gap: 1px; }
.real-overview-server small { color: #71d9ea; font-size: 6px; font-weight: 850; }
.real-overview-server strong { font-size: 13px; }
.real-overview-server > span { display: grid; margin-left: auto; padding: 6px 8px; border: 1px solid #324567; border-radius: 7px; background: #1d2747; color: #9daacb; font-size: 7px; text-align: center; }
.real-overview-server > span b { color: #f2f7fb; font-size: 13px; }
.real-overview-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 7px 0 12px; }
.real-overview-stats div { display: grid; gap: 3px; padding: 8px; border: 1px solid #314059; border-radius: 7px; background: #18273a; }
.real-overview-stats div:nth-child(2) { background: #2c242e; }
.real-overview-stats div:nth-child(3) { background: #173039; }
.real-overview-stats div:nth-child(4) { background: #302336; }
.real-overview-stats small { color: #a8bacc; font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.real-overview-stats strong { font-size: 13px; }
.real-overview-classes { padding: 9px; border: 1px solid #28364e; border-radius: 9px; background: #101a29; }
.real-overview-classes > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.real-overview-classes > div:first-child b { padding: 5px 7px; border-radius: 6px; background: #b88718; color: #0b111a; font-size: 7px; }
.real-overview-filters { display: flex; gap: 5px; margin: 7px 0; }
.real-overview-filters span { flex: 1; padding: 6px; border: 1px solid #2b3a52; border-radius: 6px; background: #1c2940; color: #8fa2b7; font-size: 7px; }
.real-overview-class { display: flex; justify-content: space-between; align-items: center; max-width: 76%; padding: 8px; border: 1px solid #2e4058; border-radius: 7px; background: #101828; }
.real-overview-class div { display: grid; gap: 3px; }
.real-overview-class strong { font-size: 9px; }
.real-overview-class small { color: #8ca4b7; font-size: 7px; }
.real-overview-class img { width: 30px; height: 30px; object-fit: contain; }

.real-bracket { background: #080e1c; }
.real-bracket-title { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid #29384e; background: linear-gradient(110deg,#17263a,#151b32); }
.real-bracket-title div { display: grid; gap: 2px; }
.real-bracket-title small { color: #76ddeb; font-size: 6px; font-weight: 850; letter-spacing: .09em; }
.real-bracket-title strong { font-size: 13px; }
.real-bracket-title span { color: #9cadbf; font-size: 7px; }
.real-bracket-title > b { padding: 6px 9px; border: 1px solid #33445e; border-radius: 6px; font-size: 8px; }
.real-bracket-tabs { display: flex; gap: 5px; padding: 5px 10px; border-bottom: 1px solid #28374b; }
.real-bracket-tabs span { padding: 6px; color: #9cabbd; font-size: 8px; white-space: nowrap; }
.real-bracket-tabs b { padding: 2px 4px; border-radius: 99px; background: #2a3b51; color: #d5e0ec; font-size: 6px; }
.real-bracket-tabs .active { border: 1px solid #35718a; border-radius: 6px; background: #173344; color: #dbfaff; }
.real-bracket-body { padding: 10px 13px; }
.real-bracket-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.real-bracket-heading div { display: grid; gap: 2px; }
.real-bracket-heading strong { font-size: 11px; }
.real-bracket-heading small { color: #8a9caf; font-size: 7px; }
.real-bracket-heading > b { color: #81e5ef; font-size: 7px; white-space: nowrap; }
.real-bracket-division { display: flex; justify-content: space-between; margin-top: 10px; padding: 8px; border: 1px solid #29394f; border-radius: 6px; font-size: 8px; }
.real-bracket-division span { color: #b6cce0; font-size: 7px; }
.real-bracket-participants { margin-top: 5px; padding: 8px; border: 1px solid #29394f; border-radius: 7px; }
.real-bracket-subhead { display: flex; justify-content: space-between; font-size: 8px; }
.real-bracket-subhead span { color: #77d9e7; font-size: 7px; }
.real-bracket-teams { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 6px; }
.real-bracket-teams > div { position: relative; display: grid; gap: 3px; padding: 7px; border: 1px solid #283f58; border-radius: 6px; background: #0d1727; }
.real-bracket-teams small { color: #79d7ea; font-size: 6px; }
.real-bracket-teams strong { font-size: 8px; }
.real-bracket-teams span { color: #8e9daf; font-size: 6px; }
.real-bracket-teams b { color: #e3bf62; font-size: 6px; }
.real-bracket-rounds { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 9px; }
.real-bracket-round { display: grid; align-content: start; gap: 6px; padding: 7px; border: 1px solid #23354c; border-radius: 7px; background: #0c1525; }
.real-bracket-round > small { color: #a8bad0; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.real-bracket-match { padding: 5px; border: 1px solid #2b4059; border-radius: 6px; }
.real-bracket-match span { color: #8eabb6; font-size: 6px; }
.real-bracket-match p { display: flex; justify-content: space-between; margin: 3px 0 0; padding: 4px; background: #17293b; color: #dcebf3; font-size: 7px; }
.real-bracket-match p b { color: #80e1bb; }

.real-match-discord, .real-result-discord { padding: 13px 15px; background: #1b1c22; }
.real-discord-channel { display: flex; align-items: center; gap: 7px; height: 33px; border-bottom: 1px solid #373a43; }
.real-discord-channel > span { color: #a0a6b0; font-size: 19px; }
.real-discord-channel strong { font-size: 11px; }
.real-discord-channel small { margin-left: auto; color: #9da4ae; font-size: 7px; }
.real-discord-welcome { display: grid; gap: 3px; padding: 13px 0; }
.real-discord-welcome b { color: #9da3ae; font-size: 19px; }
.real-discord-welcome strong { font-size: 11px; }
.real-discord-welcome span { color: #9aa1ab; font-size: 8px; }
.real-discord-post { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 8px; padding-top: 10px; }
.real-discord-post > img { width: 29px; height: 29px; border-radius: 50%; object-fit: contain; background: #18263b; }
.real-discord-author { display: flex; align-items: center; gap: 5px; }
.real-discord-author strong { font-size: 10px; }
.real-discord-author em { padding: 2px 4px; border-radius: 3px; background: #586bd8; color: white; font-size: 6px; font-style: normal; font-weight: 900; }
.real-discord-author span { color: #9299a4; font-size: 7px; }
.real-discord-mentions { margin: 7px 0; color: #a9b5ff; font-size: 8px; }
.real-discord-embed { max-width: 470px; padding: 10px; border-left: 3px solid #4d79d6; border-radius: 4px; background: #262930; }
.real-discord-identity { display: flex; align-items: center; gap: 5px; font-size: 8px; }
.real-discord-identity img { width: 18px; height: 18px; object-fit: contain; }
.real-discord-identity img:last-child:not(:first-child) { width: 28px; height: 28px; margin-left: auto; }
.real-discord-embed h4 { margin: 5px 0; color: #6aa8ff; font-size: 12px; }
.real-discord-embed > strong { display: block; font-size: 9px; }
.real-discord-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 10px 0; }
.real-discord-columns div { display: grid; gap: 3px; }
.real-discord-columns b, .real-discord-info b, .real-winner-data b { color: #f0f2f5; font-size: 8px; }
.real-discord-columns span, .real-discord-info span, .real-winner-data span { color: #bec4cc; font-size: 7px; }
.real-discord-info, .real-winner-data { display: grid; gap: 4px; }
.real-discord-embed > small { display: block; margin-top: 10px; color: #b7bbc4; font-size: 7px; }
.real-discord-button { display: inline-block; margin-top: 6px; padding: 7px 9px; border-radius: 5px; background: #50545e; color: #f0f1f5; font-size: 8px; font-weight: 850; }
.real-winner-embed { border-left-color: #facc15; }
.real-winner-bracket { overflow: hidden; margin-top: 10px; border: 1px solid #30445c; border-radius: 5px; background: #0b1424; }
.real-winner-bracket-head { display: flex; justify-content: space-between; align-items: center; padding: 7px; background: #14243a; }
.real-winner-bracket-head strong { font-size: 8px; }
.real-winner-bracket-head span { display: flex; align-items: center; gap: 4px; color: #afc4d2; font-size: 6px; }
.real-winner-bracket-head img { width: 12px; height: 12px; object-fit: contain; }
.real-winner-rounds { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; min-height: 125px; padding: 8px; }
.real-winner-rounds > div { min-width: 0; }
.real-winner-rounds small { color: #86abc5; font-size: 7px; }
.real-winner-rounds p { display: flex; justify-content: space-between; gap: 3px; margin: 5px 0; padding: 5px; border: 1px solid #2e4059; border-radius: 4px; background: #182a41; font-size: 7px; white-space: nowrap; }
.real-winner-rounds p b { color: #84dfbc; }
.real-result-record { margin-top: 8px; color: #a9b9cb; font-size: 8px; }
@media (max-width: 720px) {
  .real-overview { padding: 8px; }
  .real-overview-layout { grid-template-columns: 21% 1fr; gap: 5px; }
  .real-overview-nav { padding: 6px 4px; }
  .real-overview-nav span { overflow: hidden; padding: 5px 3px; font-size: 6px; text-overflow: ellipsis; }
  .real-overview-main { padding: 7px; }
  .real-overview-stats { gap: 3px; margin: 5px 0; }
  .real-overview-stats div { padding: 5px; }
  .real-overview-class { max-width: 100%; }
  .real-bracket-tabs { gap: 0; padding: 4px; }
  .real-bracket-tabs span { padding: 4px; font-size: 6px; }
  .real-bracket-body { padding: 6px; }
  .real-bracket-participants { padding: 5px; }
  .real-bracket-rounds { gap: 3px; margin-top: 5px; }
  .real-match-discord, .real-result-discord { padding: 9px; }
}
@media (max-width: 440px) {
  .real-overview-nav span:nth-of-type(n+4), .real-overview-server > span { display: none; }
  .real-overview-stats small { font-size: 5px; }
  .real-overview-stats strong { font-size: 10px; }
  .real-overview-classes { padding: 5px; }
  .real-overview-filters { display: none; }
  .real-bracket-teams > div:last-child { display: none; }
  .real-bracket-teams { grid-template-columns: repeat(2,1fr); }
  .real-bracket-round:last-child { display: none; }
  .real-bracket-rounds { grid-template-columns: repeat(2,1fr); }
  .real-discord-welcome { display: none; }
  .real-winner-rounds { min-height: 100px; }
  .real-winner-rounds p { padding: 3px; font-size: 6px; }
}
.evidence-admin { transform: none; }