:root {
  color-scheme: dark;
  --black: #050607;
  --panel: #090a0c;
  --panel-2: #0d0f12;
  --white: #f5f6f7;
  --muted: #8c929b;
  --line: rgba(255,255,255,.13);
  --soft-line: rgba(255,255,255,.075);
  --green: #45ef8b;
  --orange: #f2a33c;
  --mx: 50%;
  --my: 50%;
}

* { box-sizing: border-box; }
/* A same-specificity class rule setting display (e.g. .button, .discord-login-btn)
   otherwise wins over the UA [hidden] default since it comes later in the
   cascade - this keeps the hidden attribute authoritative everywhere,
   instead of patching every individual class that happens to hit this. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { width: 100%; max-width: 100%; margin: 0; background: var(--black); color: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { color: #050607; background: #f5f6f7; }

#field { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; opacity: .82; filter: contrast(1.04); }
.noise { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }

.site-header { position: fixed; z-index: 20; top: 18px; left: 50%; width: min(1180px, calc(100% - 40px)); min-width: 0; transform: translateX(-50%); height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px 0 18px; background: rgba(6,7,8,.72); border: 1px solid var(--line); border-radius: 17px; backdrop-filter: blur(24px); box-shadow: 0 18px 80px rgba(0,0,0,.28); transition: background .25s, border-color .25s; }
.site-header.scrolled { background: rgba(6,7,8,.93); border-color: rgba(255,255,255,.2); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-width: 0; font-weight: 780; letter-spacing: .04em; }
.brand img { width: 33px; height: 33px; object-fit: cover; border-radius: 9px; }
.desktop-nav { display: flex; align-items: center; gap: 25px; }
.desktop-nav a { color: #a7abb2; font-size: 13px; transition: color .2s; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav .nav-discord { display: inline-flex; align-items: center; gap: 7px; color: #d9dcff; }
.desktop-nav .nav-discord span { width: 5px; height: 5px; border-radius: 50%; background: #8791ff; box-shadow: 0 0 12px rgba(135,145,255,.85); }
.header-cta { justify-self: end; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; color: #090a0b; background: #f1f2f3; border-radius: 10px; font-size: 13px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,255,255,.12); }
.header-cta span, .button span { margin-left: 8px; opacity: .7; transition: transform .2s, opacity .2s; }
.header-cta:hover span { transform: translateX(3px); opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; justify-self: end; }
.header-account-entry { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: #d7d9dc; font-size: 13px; font-weight: 650; white-space: nowrap; transition: border-color .2s, background .2s, transform .2s; }
.header-account-entry:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.065); color: #fff; }
.header-account-entry > span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(69,239,139,.55); }
.header-account-entry[hidden] { display: none; }

/* width: fit-content is load-bearing here, not decoration - without it this
   stretches to fill the whole grid column (site-header's third 1fr track,
   or the flex-item slot inside .header-actions), so the visible pill sits
   at its left edge while the dropdown (right: 0, positioned against this
   same stretched box) opens far off to the right of it. */
.account-chip { position: relative; width: fit-content; justify-self: end; }
.account-chip[hidden] { display: none; }
.account-chip-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color: #d7d9dc; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; touch-action: manipulation; }
.account-chip-btn:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.account-chip-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font: 700 12px/1 Inter, sans-serif; color: #0a0b0d; }
.account-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Capped so a long email (vs. a short Discord username) can't inflate this
   flex item's min-width past what .site-header's grid gives the right 1fr
   track - left uncapped, that imbalance shoves the whole centered nav off
   to one side instead of just truncating the one chip that's too long. */
#account-chip-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Solid filled triangle, not a stroked chevron - two thin diagonal
   strokes at this size read as two separate lines instead of one arrow. */
.account-chip-caret { flex-shrink: 0; color: #7f858e; transition: transform .15s; }
.account-chip-btn[aria-expanded="true"] .account-chip-caret { transform: rotate(180deg); }
.account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; width: 200px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #0a0b0d; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); animation: account-menu-in .15s ease-out; }
.account-menu[hidden] { display: none; }
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.account-menu-name { padding: 9px 10px 8px; color: #7f858e; font-size: 11px; border-bottom: 1px solid var(--soft-line); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-item { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: #d7d9dc; font-size: 13px; font-weight: 550; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; box-sizing: border-box; }
.account-menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.account-menu-item[hidden] { display: none; }
.account-menu-role { display: flex; align-items: center; gap: 8px; color: #c9cdff; }
.account-menu-role span { color: #8791ff; font-size: 10px; text-shadow: 0 0 12px rgba(135,145,255,.8); }

.discord-login-btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 16px; border: 1px solid rgba(88,101,242,.35); border-radius: 10px; background: rgba(88,101,242,.08); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.discord-login-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-20deg); transition: left .7s cubic-bezier(.22,.9,.3,1); pointer-events: none; }
.discord-login-btn:hover, .discord-login-btn:focus-visible { border-color: rgba(88,101,242,.7); background: rgba(88,101,242,.16); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(88,101,242,.3); }
.discord-login-btn:hover::after { left: 130%; }
.discord-login-icon { width: 20px; height: 20px; flex: none; }

/* Compact variant - same button, sized to sit inline in the header next to
   Get XLR8 instead of filling a whole card. */
.discord-login-btn-compact { width: auto; height: 42px; padding: 0 16px; font-size: 13px; white-space: nowrap; text-decoration: none; }
.discord-login-btn-compact .discord-login-icon { width: 17px; height: 17px; }
.discord-login-btn-compact[hidden] { display: none; }

.hero { position: relative; min-height: 1510px; padding: 178px 24px 80px; overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.055), transparent 27%), linear-gradient(180deg, rgba(5,6,7,.22), #050607 94%); }
.hero::after { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent, #000 25%, transparent 88%); }
.eyebrow, .kicker { color: #a7abb2; font: 700 11px/1.2 "SFMono-Regular", Consolas, monospace; text-transform: uppercase; letter-spacing: .18em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(69,239,139,.65); }
.hero h1 { width: min(100%, 1400px); max-width: 100%; margin: 26px auto 20px; font-size: clamp(76px, 10.5vw, 160px); line-height: .76; letter-spacing: -.085em; font-weight: 750; text-wrap: balance; overflow-wrap: anywhere; }
.hero h1 em { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.52); font-style: normal; }
.hero-copy { width: min(580px, 100%); margin: 38px auto 0; color: #a0a5ad; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-width: 156px; min-height: 52px; padding: 0 22px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { gap: 11px; padding: 0 23px; color: #070809; background: #f4f5f6; border-color: #f4f5f6; box-shadow: 0 10px 28px rgba(255,255,255,.07); }
.button-light span { width: auto; height: auto; margin-left: 0; color: #070809; background: none; font-size: 13px; opacity: .72; transition: transform .2s, opacity .2s; }
.button-light:hover { box-shadow: 0 14px 34px rgba(255,255,255,.11); }
.button-light:hover span { transform: translateX(4px); opacity: 1; }
.button-ghost { background: rgba(255,255,255,.025); }
.button-ghost:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
.hero-index { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #555b64; font: 10px Consolas, monospace; letter-spacing: .18em; }

.hero-stage { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; --gx: 50%; --gy: 50%; position: relative; width: min(760px, 92vw); margin: 92px auto 0; perspective: 1500px; }
.app-window { position: relative; z-index: 2; width: 100%; aspect-ratio: 640 / 680; overflow: hidden; text-align: left; border: 1px solid rgba(255,255,255,.26); border-radius: 13px; background: rgba(6,7,9,.96); box-shadow: 0 50px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) inset; transform: translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.app-window input, .app-window textarea, .app-window select { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.app-window::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,.025)); }
.app-glare { position: absolute; z-index: 8; inset: 0; pointer-events: none; opacity: .7; background: radial-gradient(500px circle at var(--gx) var(--gy), rgba(255,255,255,.095), transparent 46%); mix-blend-mode: screen; }
.app-snow { --snow-opacity: .88; position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: var(--snow-opacity); pointer-events: none; transition: opacity .25s; }
.app-snow.off { opacity: 0; }
.app-snow.off i { animation-play-state: paused; }
.app-snow i { position: absolute; top: -7%; width: var(--snow-size); height: var(--snow-size); border-radius: 50%; background: rgba(238,242,247,.9); box-shadow: 0 0 6px rgba(255,255,255,.5); animation: menuSnow var(--snow-duration) linear var(--snow-delay) infinite; }
.stage-shadow { position: absolute; left: 8%; right: 8%; bottom: -36px; height: 120px; border-radius: 50%; background: #000; filter: blur(34px); opacity: .85; transform: translate3d(calc(var(--tx) * -.35), calc(var(--ty) * -.15), -80px); }
.cursor-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px; color: #737982; font: 10px Consolas, monospace; letter-spacing: .11em; text-transform: uppercase; }
.cursor-note b { font: inherit; }
.touch-copy, .touch-tilt-note { display: none; }
.cursor-note span { position: relative; width: 15px; height: 20px; border: 1px solid #737982; border-radius: 8px; }
.cursor-note span::after { content: ""; position: absolute; left: 6px; top: 4px; width: 1px; height: 5px; background: #aaa; }
.app-topbar { position: relative; z-index: 1; height: 4.42%; display: flex; align-items: center; gap: 22px; padding: 0 1.6%; border-bottom: 1px solid var(--line); font: 9px Consolas, monospace; letter-spacing: .1em; }
.app-wordmark { display: flex; align-items: center; gap: 8px; }
.app-wordmark img { width: 22px; height: 22px; border-radius: 6px; }
.app-wordmark b { font: 700 12px Inter, sans-serif; }
.app-performance { color: #aeb3bb; }
.app-performance strong { color: #fff; margin-left: 18px; }
.app-status { margin-left: auto; color: #aeb3bb; }
.app-status i, .app-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(69,239,139,.55); }
.app-tabs { position: relative; z-index: 1; height: 5.45%; display: grid; grid-template-columns: repeat(6,1fr); padding: 0 1.2%; border-bottom: 1px solid var(--line); }
.app-tabs button, .engine-tabs button { position: relative; border: 0; background: none; color: #99a1ae; font: 9px Consolas, monospace; letter-spacing: .06em; cursor: pointer; }
.app-tabs button.active { color: #fff; background: #121419; border-radius: 7px 7px 0 0; box-shadow: 0 -1px rgba(255,255,255,.09) inset; }
.app-tabs button.active::after, .engine-tabs button.active::after { content: ""; display: block; position: absolute; bottom: 0; height: 2px; background: #e8e9eb; }
.app-tabs button.active::after { left: 12%; right: 12%; width: auto; margin: 0; }
.engine-tabs { position: relative; z-index: 1; height: 5.3%; display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.engine-tabs button { position: relative; cursor: pointer; }
.engine-tabs button.active { color: #fff; background: rgba(255,255,255,.025); }
.engine-tabs button.active::after { left: 4%; right: 4%; }
.engine-tabs.hidden { display: none; }
.app-content { position: relative; z-index: 1; height: 80.42%; display: none; grid-template-columns: 1fr 1fr; grid-template-rows: 33% 24% 16%; align-content: start; gap: 2.2%; padding: 1.8%; }
.app-content.active { display: grid; }
.app-content.expanded { height: 85.72%; }
.ui-panel { min-width: 0; padding: 3.8%; border: 1px solid var(--line); border-radius: 5px; background: rgba(5,6,8,.62); }
.panel-title { margin: 0; color: #f5f6f7; font: 700 10px Consolas, monospace; }
.panel-rule { height: 1px; margin: 10px 0 14px; background: var(--line); }
.profile-head { display: flex; align-items: center; justify-content: space-between; }
.profile-head h3 { margin: 0; font: 700 17px Consolas, monospace; }
.profile-head .demo-help { margin-left: 10px; }
.mode-panel > p:not(.panel-title) { max-width: 84%; color: #b3b7be; font: 10px/1.45 Consolas, monospace; }
.mode-panel small { display: block; margin-top: 13%; color: var(--green); font: 8px Consolas, monospace; }
.live-panel dl { margin: 0; }
.live-panel dl div { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--soft-line); font: 10px Consolas, monospace; }
.live-panel dt { color: #9fa5ae; }
.live-panel dd { margin: 0; color: #fff; font-weight: 700; }
.pulse-value { animation: breathe 2.6s ease-in-out infinite; }
.compare-panel { grid-column: 1/3; padding: 2%; }
.compare-panel .panel-rule { margin: 8px 0 6px; }
.compare-panel > div:not(.panel-rule) { display: grid; grid-template-columns: 27% 1fr; padding: 5px; font: 9px Consolas, monospace; }
.compare-panel span { color: #9fa5ae; }
.health-panel { grid-column: 1/3; padding: 1.5% 2%; }
.health-panel .panel-rule { margin: 7px 0; }
.health-panel > div { display: flex; justify-content: space-between; color: #b1b6bd; font: 9px Consolas, monospace; }
.health-panel b { color: #fff; }
.health-panel > i { display: block; height: 2px; margin-top: 7px; background: #17191d; }
.health-panel > i span { display: block; width: 100%; height: 100%; background: #e8e9eb; box-shadow: 0 0 12px #fff; }
.check-row { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; font: 10px Consolas, monospace; cursor: pointer; }
.check-row i { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid #4d535c; color: #060708; background: #e4e6e8; font: 700 8px Consolas, monospace; font-style: normal; }
.check-row i:not(.checked) { color: transparent; background: transparent; }
.panel-title-row, .setting-line { display: flex; align-items: center; justify-content: space-between; }
.demo-help { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 1px solid #424750; border-radius: 4px; color: #a1a6af; background: #0b0d10; font: 700 9px Consolas, monospace; cursor: help; }
.inline-help { display: inline-grid !important; width: 17px !important; min-width: 17px !important; height: 17px; margin-left: 5px; padding: 0 !important; vertical-align: middle; }
.app-tooltip { position: absolute; z-index: 20; display: none; max-width: 268px; padding: 8px 10px; border: 1px solid #5b5f69; border-radius: 5px; color: #d9dce2; background: rgba(12,13,16,.98); box-shadow: 0 14px 35px rgba(0,0,0,.65); font: 9px/1.45 Consolas, monospace; pointer-events: none; }
.app-tooltip.show { display: block; }
.demo-field { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: #a5abb4; font: 10px Consolas, monospace; }
.demo-field b { color: #fff; }
.demo-field button { min-width: 34%; padding: 7px 10px; border: 1px solid #3b4048; border-radius: 5px; color: #fff; background: #0e1013; font: 9px Consolas, monospace; }
.demo-dropdown { position: relative; min-width: 34%; }
.demo-dropdown > [data-dropdown-trigger] { width: 100%; min-width: 0; }
.demo-dropdown-menu { position: absolute; z-index: 35; top: calc(100% + 3px); left: 0; right: 0; display: none; min-width: 112px; padding: 3px; border: 1px solid #454a53; border-radius: 5px; background: #0b0c0f; box-shadow: 0 14px 32px rgba(0,0,0,.72); }
.demo-dropdown.open { z-index: 35; }
.demo-dropdown.open .demo-dropdown-menu { display: grid; }
.demo-dropdown-menu button { width: 100%; min-width: 0; padding: 7px 8px; border: 0; border-radius: 3px; color: #969ca5; background: transparent; text-align: left; white-space: nowrap; }
.demo-dropdown-menu button:hover, .demo-dropdown-menu button.active { color: #08090a; background: #eef0f2; }
.ui-panel.dropdown-raised { z-index: 34; }
.keybind-button { transition: color .16s, border-color .16s, background .16s; }
.keybind-button.capturing { color: #08090a; border-color: #f0f1f2; background: #f0f1f2; }
.demo-range { width: 100%; margin: 14px 0 5px; }
.demo-range, .ramp-control input[type="range"] { --range-fill: 50%; width: 100%; height: 2px; padding: 0; border: 0; border-radius: 999px; outline: 0; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, #f1f2f3 0 var(--range-fill), #32363d var(--range-fill) 100%); accent-color: #fff; cursor: pointer; }
.demo-range::-webkit-slider-runnable-track, .ramp-control input[type="range"]::-webkit-slider-runnable-track { height: 2px; border: 0; border-radius: 999px; background: transparent; }
.demo-range::-webkit-slider-thumb, .ramp-control input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5.5px; border: 1px solid #dfe1e4; border-radius: 50%; background: #f4f5f6; box-shadow: 0 0 6px rgba(255,255,255,.35); appearance: none; -webkit-appearance: none; }
.demo-range::-moz-range-track, .ramp-control input[type="range"]::-moz-range-track { height: 2px; border: 0; border-radius: 999px; background: #32363d; }
.demo-range::-moz-range-progress, .ramp-control input[type="range"]::-moz-range-progress { height: 2px; border-radius: 999px; background: #f1f2f3; }
.demo-range::-moz-range-thumb, .ramp-control input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 1px solid #dfe1e4; border-radius: 50%; background: #f4f5f6; box-shadow: 0 0 6px rgba(255,255,255,.35); }
.rate-track { position: relative; }
#rate-range { --range-fill: 100%; }
.rate-guides { position: relative; height: 28px; margin: 1px 0 0; }
.rate-guides button { position: absolute; top: 0; padding: 5px 8px 0; border: 0; color: #bbbfc7; background: none; font: 7px Consolas, monospace; cursor: pointer; transform: translateX(-50%); }
.rate-guides button:nth-child(1) { left: calc(16% + 4.42px); }
.rate-guides button:nth-child(2) { left: 50%; }
.rate-guides button:nth-child(3) { left: calc(83% - 4.29px); }
.rate-guides button::before { content: ""; position: absolute; top: -4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #666c76; }
.rate-guides b, .rate-guides span { display: block; }
.rate-guides b { font-size: 7px; }
.rate-guides span { margin-top: 2px; color: #dde0e6; font-weight: 700; }
.rate-guides button.active::before { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.65); }
.macro-page {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 32% 16% 44%;
  row-gap: 2.2%;
  align-content: start;
  grid-template-areas: "delivery live" "delivery quick" "ramp ramp";
}
.macro-page .demo-delivery { grid-area: delivery; }
.macro-page .live-panel { grid-area: live; height: 100%; }
.macro-page .quick-panel { grid-area: quick; height: 100%; }
.macro-page .ramp-panel { grid-area: ramp; }
.ramp-panel { padding-top: 1.6%; display: flex; flex-direction: column; }
.ramp-body { display: grid; grid-template-columns: 36% 1fr; gap: 3%; flex: 1; min-height: 0; }
.ramp-controls { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.ramp-control { display: flex; flex-direction: column; gap: 4px; }
.ramp-control input { width: 100%; height: 2px; }
.ramp-control-head { display: flex; align-items: center; justify-content: space-between; font: 10px Consolas, monospace; }
.ramp-control-head b { color: #a5abb4; font-weight: normal; }
.ramp-control-head > span { color: #fff; text-align: right; }
.mini-curve-choice { display: grid; grid-template-columns: 25% 1fr !important; align-items: center; gap: 8px; }
.mini-curve-choice > span { display: flex; gap: 5px; }
.mini-curve-choice button { flex: 1; padding: 5px 4px; border: 1px solid #2e333a; border-radius: 4px; color: #747b84; background: #090a0c; font: 6px Consolas, monospace; cursor: pointer; }
.mini-curve-choice button.active { color: #050607; border-color: #f0f1f2; background: #f0f1f2; }
.ramp-mini-chart { position: relative; display: block !important; height: 100%; min-height: 90px; margin-top: 0; padding: 0 !important; overflow: hidden; border: 1px solid #252a31; border-radius: 5px; background-color: #07080a; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 24px 24px; }
.ramp-mini-chart svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; user-select: none; }
.mini-curve-axis { position: absolute; bottom: 6px; color: #4a5058; font: 6px Consolas, monospace; letter-spacing: .08em; }
.mini-curve-axis-start { left: 8px; }
.mini-curve-axis-end { right: 8px; }
.mini-curve-area { fill: url(#mini-curve-fill); stroke: none; }
.mini-curve-guides { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
.mini-curve-path { fill: none; stroke: #f2f3f4; stroke-width: 1.75; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.mini-curve-handle { fill: #f4f5f6; stroke: rgba(0,0,0,.9); stroke-width: 1.25; vector-effect: non-scaling-stroke; cursor: grab; filter: drop-shadow(0 0 3px rgba(255,255,255,.72)); }
.mini-curve-handle:focus { outline: none; stroke: var(--green); }
.curve-handle, .mini-curve-handle, .curve-hit { transform: scaleY(var(--curve-dot-y, 1)); transform-box: fill-box; transform-origin: center; }
.curve-hit { fill: transparent; stroke: transparent; pointer-events: all; cursor: grab; touch-action: none; }
.quick-panel { padding: 3.8%; }
#quick-start-hint { margin: 0; color: #9da3ac; font: 9px/1.5 Consolas, monospace; }
.settings-page.active { display: block; padding: 0; }
.settings-block { padding: 3%; }
.settings-page .settings-block { position: absolute; }
.performance-settings { left: 1.8%; top: 1.6%; width: 47.5%; height: 29.5%; }
.overlay-settings { right: 1.8%; top: 1.6%; width: 47.5%; height: 45.4%; }
.appearance-settings { left: 1.8%; top: 33.4%; width: 47.5%; height: 28.7%; }
.help-settings { left: 1.8%; top: 64.4%; width: 47.5%; height: 29.3%; }
.sound-settings { right: 1.8%; top: 49.4%; width: 47.5%; height: 32%; }
.discord-settings { right: 1.8%; top: 82.4%; width: 47.5%; height: 15.8%; }
.setting-check { margin: 9px 0; }
.setting-line { margin: 2px 0; }
.demo-value-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--soft-line); color: #999fa8; font: 9px Consolas, monospace; }
.demo-value-row b { color: #e5e7eb; }
.settings-hint, .help-settings p { margin: 9px 0; color: #757b84; font: 8px/1.35 Consolas, monospace; }
.toggle-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border: 0; border-bottom: 1px solid var(--soft-line); color: #9ea4ad; background: none; text-align: left; cursor: pointer; }
.toggle-row span b, .toggle-row span small { display: block; }
.toggle-row span b { color: #eee; font: 9px Consolas, monospace; }
.toggle-row span small { margin-top: 4px; color: #686e77; font: 7px Consolas, monospace; }
.toggle-row > i { min-width: 34px; padding: 5px; border: 1px solid #3b4048; border-radius: 4px; color: #747b85; font: 7px Consolas, monospace; font-style: normal; text-align: center; }
.toggle-row.on > i { color: #050607; border-color: #e7e9eb; background: #e7e9eb; }
.mini-action { padding: 7px 10px; border: 1px solid #3c4149; border-radius: 5px; color: #e8eaec; background: #0d0f12; font: 7px Consolas, monospace; cursor: pointer; }
.mini-action:disabled { color: #5f656e; border-color: #292d33; background: #090a0c; cursor: default; }
.settings-block .mini-action { margin-top: 13px; }
.sound-settings .mini-action { margin-top: 6px; }
.setting-note { padding-top: 1.2%; }
.pipeline-panel { grid-column: 1/3; padding: 2%; }
.pipeline-title { display: flex; justify-content: space-between; }
.pipeline-title > b { color: #737a83; font: 7px Consolas, monospace; }
.pipeline-title > b.running { color: var(--green); }
.pipeline-row { display: flex; justify-content: space-between; padding: 10px 3px; border-bottom: 1px solid var(--soft-line); color: #9ba1aa; font: 9px Consolas, monospace; }
.pipeline-row b { color: #fff; }
.pipeline-panel .mini-action { float: right; margin-top: 10px; }
.input-page { grid-template-rows: 24% 29% 17%; }
.metric-panel { padding: 3.5%; }
.metric-panel > div:not(.panel-rule) { display: flex; justify-content: space-between; padding: 13px 2px; border-bottom: 1px solid var(--soft-line); color: #9da3ac; font: 9px Consolas, monospace; }
.metric-panel b { color: #fff; }
.input-about { grid-column: 1/3; padding-top: 1.5%; }
.input-about > div:last-child { grid-template-columns: 1fr auto !important; align-items: center; }
.configs-page.active { display: block; padding: 1.8%; overflow: hidden; }
.portable-configs { height: 22%; padding: 2.4%; }
.portable-configs label { display: block; color: #8d939d; font: 8px Consolas, monospace; }
.config-name-field { width: 100%; margin-top: 7px; padding: 8px 10px; border: 1px solid #30343c; border-radius: 4px; outline: 0; color: #e5e7eb; background: #0f1013; font: 8px Consolas, monospace; transition: border-color .16s; }
.config-name-field::placeholder { color: #5c626c; }
.config-name-field:focus { border-color: rgba(255,255,255,.35); }
.portable-buttons { display: grid; grid-template-columns: 1.05fr 1fr .9fr; gap: 7px; margin-top: 9px; }
.mini-action.primary { color: #07080a; border-color: #eff0f2; background: #eff0f2; }
.configs-page .config-list { height: 66%; margin-top: 2.2%; padding: 2.4%; border: 1px solid var(--line); border-radius: 5px; }
.config-list .panel-title-row small { color: var(--green); font: 7px Consolas, monospace; }
.active-config small { color: var(--green); font: 7px Consolas, monospace; }
.active-config h3 { margin: 18px 0 8px; font: 700 18px Consolas, monospace; }
.active-config > p:not(.panel-title) { color: #898f98; font: 8px Consolas, monospace; }
.active-config .mini-action { margin-top: 25px; }
.config-option { width: 100%; display: grid; grid-template-columns: 34px 1fr 54px 64px 58px; align-items: center; gap: 7px; padding: 9px; border: 0; border-bottom: 1px solid var(--soft-line); color: #a2a8b0; background: transparent; font: 8px Consolas, monospace; text-align: left; cursor: pointer; }
.config-option > i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #2c3037; border-radius: 4px; font: 6px Consolas, monospace; font-style: normal; }
.config-option > span b, .config-option > span small { display: block; }
.config-option small { margin-top: 3px; color: #636a73; font-size: 6px; }
.config-option em { padding: 6px 4px; border: 1px solid #343941; border-radius: 4px; color: #aeb3bb; font: 6px Consolas, monospace; font-style: normal; text-align: center; }
.config-option em:first-of-type { color: #07080a; border-color: #e9eaec; background: #e9eaec; }
.config-option.active { color: #fff; background: rgba(255,255,255,.05); }
.config-actions { padding-top: 1.4%; }
.config-actions > div:last-child, .account-support > div:last-child { grid-template-columns: 20% 1fr auto !important; align-items: center; }
.config-buttons { display: flex; gap: 6px; justify-content: flex-end; }
.account-page { grid-template-rows: 42% 17%; }
.license-orb { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--green); font: 8px Consolas, monospace; }
.license-orb i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(69,239,139,.55); }
.account-license h3 { margin: 20px 0 8px; font: 700 18px Consolas, monospace; }
.account-license > p:not(.panel-title) { max-width: 80%; color: #7f858e; font: 8px/1.5 Consolas, monospace; }
.account-details > div:not(.panel-rule) { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--soft-line); color: #8f959e; font: 8px Consolas, monospace; }
.account-details b { color: #fff; }
.account-details .mini-action { margin-top: 14px; }
.account-support { padding-top: 1.4%; }
.account-session h3 { margin: 10px 0; font: 700 15px Consolas, monospace; }
.account-session p, .account-license > p { color: #8b919a; font: 8px/1.5 Consolas, monospace; }
.account-session .mini-action { float: right; margin-top: 36px; }
.account-status { grid-column: 1/3; padding: 2.4%; }
.status-ready { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.status-ready > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(69,239,139,.5); }
.status-ready span b, .status-ready span small { display: block; }
.status-ready span b { font: 700 12px Consolas, monospace; }
.status-ready span small { margin-top: 6px; color: #777d86; font: 8px Consolas, monospace; }
.app-footer { position: relative; z-index: 1; height: 4.41%; display: flex; align-items: center; justify-content: space-between; padding: 0 2%; border-top: 1px solid var(--line); color: #8c929b; font: 8px Consolas, monospace; }
.app-footer span:first-child { color: var(--green); }

.stat-strip { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip div { min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 30px 12%; border-right: 1px solid var(--line); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip strong { font-size: clamp(27px, 3vw, 43px); line-height: 1; letter-spacing: -.055em; }
.stat-strip span { margin-top: 12px; color: #747a83; font: 10px Consolas, monospace; text-transform: uppercase; letter-spacing: .11em; }

.section { position: relative; max-width: 1400px; margin: 0 auto; padding: 160px max(30px, 7vw); border-bottom: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 900px; scroll-margin-top: 100px; }
.section-number { position: absolute; top: 70px; left: 24px; color: #4f545c; font: 10px Consolas, monospace; }
.section-heading { max-width: 880px; }
.section-heading h2, .lab-copy h2, .support-card h2 { margin: 14px 0 25px; font-size: clamp(48px, 6.2vw, 94px); line-height: .94; letter-spacing: -.068em; }
.section-heading h2 span, .lab-copy h2 span, .support-card h2 span { color: #686e77; }
.section-heading > p:last-child, .lab-copy > p, .support-card > div:first-child > p:last-child { max-width: 560px; color: #9298a1; line-height: 1.7; }
.engine-cards { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 74px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.engine-card { min-height: 300px; padding: 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); transition: background .3s, transform .3s; cursor: pointer; }
.engine-card:hover, .engine-card.active { background: rgba(255,255,255,.055); }
.engine-card:hover { transform: translateY(-5px); }
.engine-card > span { color: #60656e; font: 10px Consolas, monospace; }
.engine-card h3 { margin: 60px 0 13px; font-size: 25px; letter-spacing: -.04em; }
.engine-card p { max-width: 320px; color: #90969f; font-size: 14px; line-height: 1.65; }
.engine-card small { display: inline-block; margin-top: 18px; color: var(--green); font: 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .13em; }
.engine-card[data-engine="frame"] small { color: var(--orange); }
.engine-card[data-engine="classic"] small { color: var(--muted); }

.lab-grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 7vw; }
.lab-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 52px; }
.lab-metrics div { padding-top: 18px; border-top: 1px solid var(--line); }
.lab-metrics span { display: block; color: #717780; font: 8px Consolas, monospace; text-transform: uppercase; }
.lab-metrics strong { display: inline-block; margin-top: 10px; font-size: 26px; letter-spacing: -.05em; }
.lab-metrics small { margin-left: 3px; color: #747a83; font: 8px Consolas, monospace; }
.screen-frame { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 13px; background: #08090b; box-shadow: 0 45px 100px rgba(0,0,0,.6); transform: perspective(1300px) rotateY(-7deg) rotateX(2deg); transform-style: preserve-3d; transition: transform .16s ease-out; }
.screen-header { position: relative; z-index: 2; height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line); background: #0b0c0e; font: 8px Consolas, monospace; letter-spacing: .1em; }
.screen-header > span { display: flex; gap: 5px; }
.screen-header i { width: 5px; height: 5px; border-radius: 50%; background: #3f444c; }
.screen-header small { justify-self: end; color: var(--green); }
.screen-crop { position: relative; height: min(48vw, 600px); overflow: hidden; }
.screen-crop img { display: block; width: 100%; margin-top: -4.5%; }
.scanline { position: absolute; z-index: 3; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(transparent, rgba(255,255,255,.045), transparent); animation: scan 5s linear infinite; }

.split-heading { max-width: none; display: grid; grid-template-columns: 1fr .65fr; gap: 80px; align-items: end; }
.split-heading > p { padding-bottom: 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 80px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { position: relative; min-height: 350px; overflow: hidden; padding: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.feature > span, .feature-copy > span { color: #636972; font: 9px Consolas, monospace; letter-spacing: .12em; }
.feature h3 { margin: 54px 0 12px; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.05em; }
.feature p { max-width: 420px; color: #8d939c; font-size: 14px; line-height: 1.65; }
.feature-wide { grid-column: 1/3; display: grid; grid-template-columns: .58fr 1.42fr; min-height: 620px; }
.feature-copy { position: relative; z-index: 2; align-self: center; }
.feature-copy > small { display: block; max-width: 300px; margin-top: 24px; color: #555b64; font: 7px/1.5 Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.ramp-visual { position: relative; min-width: 0; align-self: stretch; display: flex; flex-direction: column; margin: -38px; margin-left: 30px; padding: 34px; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(circle at 72% 24%, rgba(255,255,255,.07), transparent 33%), #08090b; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.curve-toolbar { display: flex; align-items: center; justify-content: space-between; }
.curve-toolbar > div span, .curve-toolbar > div b { display: block; }
.curve-toolbar span, .curve-toolbar small { color: #5f656e; font: 7px Consolas, monospace; letter-spacing: .12em; }
.curve-toolbar b { margin-top: 7px; font: 700 13px Consolas, monospace; letter-spacing: .08em; }
.curve-presets { display: flex; gap: 7px; margin-top: 22px; }
.curve-presets button { padding: 8px 11px; border: 1px solid #2d3239; border-radius: 6px; color: #767d86; background: rgba(255,255,255,.015); font: 7px Consolas, monospace; text-transform: uppercase; cursor: pointer; }
.curve-presets button:hover { color: #fff; border-color: #545a63; }
.curve-presets button.active { color: #060708; border-color: #f1f2f3; background: #f1f2f3; }
.curve-chart { position: relative; flex: 1; min-height: 330px; margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #07080a; }
.ramp-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, transparent, #000 20%, #000); }
.curve-chart svg { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); overflow: visible; touch-action: none; user-select: none; }
.curve-area { fill: url(#curve-fill); stroke: none; }
.curve-guides { fill: none; stroke: rgba(255,255,255,.24); stroke-width: 1; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.curve-path { fill: none; stroke: #f2f3f4; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(255,255,255,.55)); }
.curve-handle { fill: #f3f4f5; stroke: #08090a; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: grab; filter: drop-shadow(0 0 4px rgba(255,255,255,.78)); }
.curve-handle:active { cursor: grabbing; }
.curve-handle:focus { outline: none; stroke: var(--green); }
.curve-axis { position: absolute; bottom: 10px; color: #555b64; font: 6px Consolas, monospace; letter-spacing: .1em; pointer-events: none; }
.curve-axis-start { left: 14px; }
.curve-axis-end { right: 14px; }
.curve-readout { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.curve-readout > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.curve-readout > div:last-child { border-right: 0; }
.curve-readout span, .curve-readout b { display: block; }
.curve-readout span { color: #5d636c; font: 6px Consolas, monospace; letter-spacing: .08em; }
.curve-readout b { margin-top: 7px; font: 700 10px Consolas, monospace; }
.sound-wave { position: absolute; right: 44px; bottom: 42px; display: flex; gap: 7px; align-items: center; height: 90px; }
.sound-wave i { width: 3px; height: 15%; background: #bdc1c7; animation: wave 1.25s ease-in-out infinite; }
.sound-wave i:nth-child(2),.sound-wave i:nth-child(8){height:28%;animation-delay:.08s}.sound-wave i:nth-child(3),.sound-wave i:nth-child(7){height:47%;animation-delay:.16s}.sound-wave i:nth-child(4),.sound-wave i:nth-child(6){height:70%;animation-delay:.24s}.sound-wave i:nth-child(5){height:92%;animation-delay:.32s}.sound-wave i:nth-child(9){height:8%;animation-delay:.4s}
.config-stack { position: absolute; right: 48px; bottom: 50px; width: 150px; height: 90px; }
/* At tablet-ish 2-up widths the card isn't wide enough for the full-length
   copy and the stack graphic to share a row without the text running under
   it - drop the stack below the text instead, same as the phone layout
   does, just starting sooner since a 2-column card gets narrow earlier. */
@media (max-width: 900px) {
  .config-stack { position: relative; right: auto; bottom: auto; margin: 30px 0 0; }
}
.config-stack i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: #101216; box-shadow: 0 14px 30px #000; transform: translate(var(--sx),var(--sy)); }
.config-stack i:nth-child(1){--sx:-28px;--sy:22px;opacity:.34}.config-stack i:nth-child(2){--sx:-14px;--sy:11px;opacity:.62}.config-stack i:nth-child(3){--sx:0;--sy:0}
.feature-showcase { grid-column: 1/3; min-height: 640px; display: flex; flex-direction: column; align-items: center; gap: 50px; padding: 60px 40px 80px; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.05), transparent 48%); }
.showcase-heading { max-width: 520px; text-align: center; }
.showcase-heading > span { color: #636972; font: 9px Consolas, monospace; letter-spacing: .12em; }
.showcase-heading > h3 { margin: 16px 0 12px; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.05em; }
.showcase-heading > p { margin-inline: auto; color: #8d939c; font: 9px Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.showcase-cue { margin: 10px auto 0; color: #555b64; font-size: 15px; animation: showcase-bounce 1.6s ease-in-out infinite; }
@keyframes showcase-bounce { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } }
/* Flat sliding carousel. .showcase-videos is taller than the cards' natural
   height on purpose - the centered card scales up 1.15x and transforms don't
   grow their container, so without the extra room that scale-up got clipped
   at the top/bottom by this element's own overflow:hidden. The side clones
   still get clipped horizontally as they slide past the edge, which is the
   point. */
.showcase-videos { position: relative; width: 780px; max-width: 100%; height: 452px; overflow: hidden; }
.showcase-track { display: flex; align-items: center; height: 100%; gap: 36px; transition: transform .5s cubic-bezier(.22,.9,.3,1); will-change: transform; }
.showcase-item { position: relative; flex: 0 0 auto; display: block; width: 220px; aspect-ratio: 9 / 16; padding: 0; border: 0; background: none; cursor: pointer; }
/* border-radius + overflow:hidden lives on this inner card, never on the
   element that also carries the scale transform - Chromium's compositor can
   drop the corner clip on a <video> otherwise, which was the "corners messed
   up on the middle one" bug. video gets border-radius:inherit too, belt and
   braces, since the clipping bug has historically been video-layer-specific. */
/* No box-shadow on the base card: this container clips horizontally
   (overflow:hidden, so side cards can slide off), and a soft blurred shadow
   hitting that hard edge left a visible rectangular smudge instead of a
   clean fade. Only the centered card - which never touches that edge - gets
   one. */
.showcase-card { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: #07080a; transition: transform .4s cubic-bezier(.22,.9,.3,1), box-shadow .4s ease; }
.showcase-item video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.showcase-item.is-center { z-index: 2; }
.showcase-item.is-center .showcase-card { transform: scale(1.15); box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.showcase-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle, rgba(6,7,9,.08), rgba(6,7,9,.45)); opacity: 1; transition: opacity .25s ease; }
.showcase-play::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 999px; background: linear-gradient(155deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.42); box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .35s cubic-bezier(.22,.9,.3,1), box-shadow .35s ease, background .35s ease; z-index: -1; }
.showcase-play::after { content: ""; width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition: transform .35s cubic-bezier(.22,.9,.3,1); }
.showcase-item:hover .showcase-play::before, .showcase-item:focus-visible .showcase-play::before { transform: scale(1.15); background: linear-gradient(155deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); box-shadow: 0 16px 38px rgba(0,0,0,.55), 0 0 36px rgba(255,255,255,.22); }
.showcase-item:hover .showcase-play::after, .showcase-item:focus-visible .showcase-play::after { transform: scale(1.1); }
.showcase-item.has-sound .showcase-play { opacity: 0; }
.showcase-item.has-sound.is-paused .showcase-play { opacity: 1; }

.centered { margin-inline: auto; text-align: center; }
.centered > p:last-child { margin-inline: auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 1060px; margin: 74px auto 0; align-items: stretch; }
.price-card { position: relative; min-height: 390px; padding: 35px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.017); transform-style: preserve-3d; transition: transform .16s ease-out, border-color .25s, background .25s; user-select: none; -webkit-user-select: none; }
.price-card.featured { transform: translateY(-14px); border-color: rgba(255,255,255,.38); background: linear-gradient(150deg, rgba(255,255,255,.095), rgba(255,255,255,.02) 55%); box-shadow: 0 35px 90px rgba(0,0,0,.45); }
.price-card > small { position: absolute; top: 17px; right: 18px; color: #0b0c0e; padding: 6px 8px; border-radius: 5px; background: #eee; font: 700 7px Consolas, monospace; letter-spacing: .08em; }
.price-card > p { margin-top: 38px; color: #8b919a; font: 9px Consolas, monospace; letter-spacing: .13em; }
.price-card > div { display: flex; align-items: flex-start; margin-top: 34px; }
.price-card sup { padding-top: 12px; color: #777d86; font-size: 16px; }
.price-card strong { font-size: 61px; line-height: 1; letter-spacing: -.07em; }
.price-card > span { display: block; margin-top: 16px; color: #8d939c; font-size: 13px; }
.preview-buy { position: absolute; left: 35px; right: 35px; bottom: 34px; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 17px; border: 0; border-radius: 9px; color: #08090a; background: #f2f3f4; font-size: 11px; font-weight: 750; text-transform: uppercase; cursor: pointer; }
.preview-buy:hover b { transform: translate(2px,-2px); }
.preview-buy b { transition: transform .2s; }
.pricing-note { margin: 32px auto 0; color: #5f656e; font: 9px/1.6 Consolas, monospace; text-align: center; }
.pricing-note span { display: block; margin-top: 8px; color: #7d838c; }
.pricing-note a { color: #c9cdff; text-decoration: none; border-bottom: 1px solid rgba(135,145,255,.35); transition: color .2s, border-color .2s; }
.pricing-note a:hover { color: #fff; border-color: rgba(255,255,255,.7); }

.support-card { display: grid; grid-template-columns: .82fr 1.18fr; gap: 6vw; align-items: center; padding: 70px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.055), transparent 37%), #08090b; }
.support-steps { display: flex; flex-direction: column; gap: 14px; margin: 30px 0 34px; padding: 0; list-style: none; }
.support-steps li { display: flex; gap: 14px; align-items: baseline; color: #b6bbc3; font-size: 13px; line-height: 1.6; }
.support-steps li span { flex-shrink: 0; width: 26px; color: #5a5f66; font: 700 11px Consolas, monospace; }
.ticket-preview { position: relative; display: flex; flex-direction: column; padding: 38px; border: 1px solid var(--line); border-radius: 11px; background: #0c0e11; box-shadow: 0 28px 80px #000; transform-style: preserve-3d; transition: transform .22s ease-out, border-color .2s; will-change: transform; }
.ticket-preview:hover { border-color: rgba(255,255,255,.3); }
.ticket-top { display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); font: 700 10px Consolas, monospace; }
.ticket-top i { color: var(--green); font-style: normal; }
.fake-input, .fake-area { display: block; width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: #b6bbc3; background: #090a0c; font: 11px Inter, sans-serif; transition: border-color .2s, background .2s; }
.fake-input { color-scheme: dark; }
select.fake-input { cursor: pointer; }
.fake-area { height: 130px; resize: none; }
.fake-input:focus, .fake-area:focus { border-color: rgba(255,255,255,.42); background: #0b0d10; }
.fake-input::placeholder, .fake-area::placeholder { color: #737983; }
.ticket-demo-thread { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.ticket-demo-row { display: flex; }
.ticket-demo-row.customer { justify-content: flex-end; }
.ticket-demo-bubble { max-width: 84%; padding: 12px 15px; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.ticket-demo-row.staff .ticket-demo-bubble { border: 1px solid var(--line); background: rgba(255,255,255,.03); border-top-left-radius: 3px; color: #c7cad0; }
.ticket-demo-row.customer .ticket-demo-bubble { background: #f1f2f3; color: #14161a; border-top-right-radius: 3px; }
.ticket-demo-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 15px; border-radius: 10px; background: #f4f5f6; color: #070809; font-size: 13px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.ticket-preview:hover .ticket-demo-cta { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,255,255,.1); }

.community-section { padding-top: 40px; padding-bottom: 140px; }
.community-card { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 560px; overflow: hidden; padding: 74px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 82% 46%, rgba(88,101,242,.18), transparent 28%), radial-gradient(circle at 18% 20%, rgba(255,255,255,.06), transparent 34%), #08090b; box-shadow: 0 45px 120px rgba(0,0,0,.35); }
.community-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(circle at 78% 50%, #000, transparent 53%); }
.community-copy { position: relative; z-index: 2; min-width: 0; }
.community-copy h2 { margin: 16px 0 24px; font-size: clamp(50px, 5.4vw, 82px); line-height: .92; letter-spacing: -.065em; }
.community-copy h2 span { color: #686e77; }
.community-copy > p:not(.kicker) { max-width: 570px; margin: 0; color: #9ca1aa; font-size: 15px; line-height: 1.75; }
.community-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 27px 0 31px; color: #c6cad1; font: 700 10px/1.2 Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.community-points span { display: inline-flex; align-items: center; gap: 8px; }
.community-points i { width: 5px; height: 5px; border-radius: 50%; background: #8791ff; box-shadow: 0 0 10px rgba(135,145,255,.75); }
.community-button { min-width: 190px; border-color: rgba(135,145,255,.5); background: linear-gradient(135deg, rgba(88,101,242,.95), rgba(135,145,255,.92)); color: #fff; box-shadow: 0 16px 44px rgba(88,101,242,.2); }
.community-button:hover { border-color: rgba(170,177,255,.9); background: linear-gradient(135deg, #6571f5, #949cff); box-shadow: 0 20px 52px rgba(88,101,242,.32); }
.community-orbit { position: relative; z-index: 1; width: min(390px, 38vw); aspect-ratio: 1; justify-self: end; display: grid; place-items: center; }
.community-ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; animation: community-spin 28s linear infinite; }
.community-ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #8791ff; box-shadow: 0 0 20px rgba(135,145,255,.9); }
.community-ring-two { inset: 17%; animation-duration: 18s; animation-direction: reverse; opacity: .7; }
.community-ring-two::after { background: #fff; box-shadow: 0 0 16px rgba(255,255,255,.75); }
.community-logo { position: relative; z-index: 2; display: grid; place-items: center; width: 124px; height: 124px; border: 1px solid rgba(135,145,255,.38); border-radius: 32px; background: linear-gradient(145deg, rgba(135,145,255,.18), rgba(8,9,11,.96)); color: #f7f7ff; box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 70px rgba(88,101,242,.18); transform: rotate(-5deg); }
.community-logo svg { width: 66px; height: 66px; }
.community-status { position: absolute; z-index: 3; bottom: 13%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8,9,11,.88); backdrop-filter: blur(16px); color: #c8ccd3; font: 700 9px Consolas, monospace; letter-spacing: .12em; }
.community-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(69,239,139,.65); }
@keyframes community-spin { to { transform: rotate(360deg); } }

.final-cta { min-height: 760px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 29%); }
.final-mark { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.04); box-shadow: 0 18px 50px #000; }
.final-mark img { width: 70px; height: 70px; border-radius: 19px; }
.final-cta p { margin-top: 32px; color: #777d86; font: 9px Consolas, monospace; letter-spacing: .2em; }
.final-cta h2 { margin: 25px 0 40px; font-size: clamp(78px, 11vw, 170px); line-height: .8; letter-spacing: -.085em; }
.final-copy { max-width: 560px; margin: -6px auto 34px; color: #9298a1; font-size: 14px; line-height: 1.7; }

footer { max-width: 1400px; min-height: 110px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 0 32px; border-top: 1px solid var(--line); color: #666c75; font: 8px Consolas, monospace; letter-spacing: .08em; }
footer .brand span { color: #fff; font: 700 14px Inter, sans-serif; }
footer > span { justify-self: end; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 24px; color: #8f959e; font: 600 11px Inter, sans-serif; letter-spacing: 0; }
.footer-links a { transition: color .2s; }
.footer-links a:hover { color: #fff; }

/* pointer-events: none here is load-bearing, not decoration - the panel
   below reserves real layout space even while collapsed and invisible
   (opacity/visibility, not display:none, so its open/close transition has
   something to animate), and without this the empty space above the
   circle silently ate taps meant for whatever page content sits behind it.
   Each visible piece opts pointer-events back in for itself below. */
.mobile-discord-fab { display: none; position: fixed; z-index: 45; right: 18px; bottom: 22px; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
@media (max-width: 1100px) {
  .mobile-discord-fab:not([hidden]) { display: flex; }
}
.mobile-discord-fab-toggle { position: relative; width: 56px; height: 56px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5865f2, #8791ff); box-shadow: 0 12px 34px rgba(88,101,242,.45); cursor: pointer; animation: fab-breathe 2.6s ease-in-out infinite; pointer-events: auto; }
@keyframes fab-breathe {
  0%, 100% { box-shadow: 0 12px 34px rgba(88,101,242,.45); transform: scale(1); }
  50% { box-shadow: 0 12px 44px rgba(88,101,242,.7); transform: scale(1.06); }
}
.mobile-discord-fab.open .mobile-discord-fab-toggle { animation: none; }
.mobile-discord-fab-toggle svg { transition: transform .25s ease; }
.mobile-discord-fab.open .mobile-discord-fab-toggle svg { transform: rotate(135deg); }
.mobile-discord-fab-panel { width: min(280px, 78vw); padding: 18px; border-radius: 16px; background: linear-gradient(155deg, rgba(88,101,242,.25), rgba(10,11,13,.98) 60%), #0c0e11; border: 1px solid rgba(88,101,242,.35); box-shadow: 0 30px 70px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.92); transform-origin: bottom right; transition: opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s; pointer-events: none; }
.mobile-discord-fab-kicker { display: block; margin-bottom: 8px; color: #9da5ff; font: 700 8px Consolas, monospace; letter-spacing: .13em; }
.mobile-discord-fab-panel h3 { margin: 0 0 7px; font-size: 19px; letter-spacing: -.025em; }
.mobile-discord-fab-panel p { margin: 0 0 14px; color: #c7cad0; font-size: 12.5px; line-height: 1.55; }
.mobile-discord-fab-panel .discord-login-btn { width: 100%; }
.mobile-discord-fab.open .mobile-discord-fab-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }

.preview-toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; width: min(360px, calc(100% - 48px)); padding: 17px 19px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; background: rgba(12,14,17,.96); box-shadow: 0 25px 70px #000; transform: translateY(130%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.preview-toast.show { transform: translateY(0); opacity: 1; }
.preview-toast b, .preview-toast span { display: block; }
.preview-toast b { font-size: 13px; }
.preview-toast span { margin-top: 5px; color: #8f959e; font-size: 11px; }

.ticket-status { margin: 14px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(69,239,139,.08); color: #b7f2cf; font-size: 12px; line-height: 1.5; }
.ticket-status.is-error { background: rgba(242,80,80,.08); border-color: rgba(242,80,80,.3); color: #f7b3b3; }

.checkout-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.checkout-modal[hidden] { display: none; }
.checkout-backdrop { position: absolute; inset: 0; background: rgba(3,4,5,.78); backdrop-filter: blur(6px); }
.checkout-panel { position: relative; width: min(420px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 34px; border: 2px solid transparent; border-radius: 14px; background-image: linear-gradient(#0a0b0d, #0a0b0d), linear-gradient(90deg, #cfd2d8, #fff, #cfd2d8); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 100%; box-shadow: 0 40px 120px #000, 0 0 140px -50px rgba(99,91,255,.35), 0 0 140px -60px rgba(0,156,222,.25); }
.checkout-panel:has(.checkout-step[data-step="payment"]:not([hidden])) { background-image: linear-gradient(#0a0b0d, #0a0b0d), linear-gradient(90deg, #635bff, #009cde, #003087, #635bff); animation: checkout-accent-flow 6s linear infinite; }
.checkout-panel:has(.pay-card[data-pay="STRIPE"]:hover), .checkout-panel:has(.pay-card[data-pay="STRIPE"]:focus-visible) { background-image: linear-gradient(#0a0b0d, #0a0b0d), linear-gradient(90deg, #635bff, #a294ff, #635bff); animation: checkout-accent-flow 2.4s linear infinite; }
.checkout-panel:has(.pay-card[data-pay="PAYPAL"]:hover), .checkout-panel:has(.pay-card[data-pay="PAYPAL"]:focus-visible) { background-image: linear-gradient(#0a0b0d, #0a0b0d), linear-gradient(90deg, #003087, #009cde, #003087); animation: checkout-accent-flow 2.4s linear infinite; }
@keyframes checkout-accent-flow { to { background-position: 0 0, -300% 0; } }
.checkout-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); color: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.checkout-panel h3 { margin: 10px 0 22px; font-size: 26px; letter-spacing: -.03em; background: linear-gradient(135deg, #fff 45%, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checkout-panel label { display: block; margin: 16px 0 8px; color: #7f858e; font: 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }
.checkout-panel label:first-of-type { margin-top: 0; }
/* Glass button for the actual pay step, not the flatter white .button-light
   look used elsewhere - blur + hairline border + a barely-there grain
   texture (same noise SVG as the page-wide .noise layer). */
.checkout-full { width: 100%; margin-top: 26px; position: relative; overflow: hidden; border: 2px solid rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient(104deg, rgba(253,253,253,.07) 5%, rgba(240,240,228,.13) 100%); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px -1px rgba(0,0,0,.35); color: #fff; }
.checkout-full::before { content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.checkout-full span { color: #fff; }
.checkout-full:hover { background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.5); box-shadow: 0 14px 34px rgba(255,255,255,.11); }
.checkout-full:hover span { color: #070809; }
.checkout-error { margin: 10px 0 0; color: #f7b3b3; font-size: 12px; }
.checkout-pay-label { display: block; margin: 22px 0 8px; color: #7f858e; font: 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }
.checkout-pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.pay-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.pay-card::before { content: ""; position: absolute; inset: 0; opacity: .04; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.pay-card::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-20deg); transition: left .7s cubic-bezier(.22,.9,.3,1); pointer-events: none; }
.pay-card:hover::after { left: 130%; }
.pay-card:hover, .pay-card:focus-visible { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.pay-card[data-pay="STRIPE"]:hover, .pay-card[data-pay="STRIPE"]:focus-visible { border-color: rgba(99,91,255,.55); background: rgba(99,91,255,.07); box-shadow: 0 12px 40px rgba(99,91,255,.22); }
.pay-card[data-pay="PAYPAL"]:hover, .pay-card[data-pay="PAYPAL"]:focus-visible { border-color: rgba(0,156,222,.55); background: rgba(0,156,222,.07); box-shadow: 0 12px 40px rgba(0,156,222,.22); }
.pay-card:disabled { opacity: .5; cursor: default; transform: none; }
.pay-logo { height: 20px; width: auto; display: block; }
.pay-logo-inline { height: 11px; width: auto; vertical-align: -1px; margin: 0 1px; }
.pay-caption { color: #7f858e; font-size: 10.5px; line-height: 1.5; }
.checkout-note { margin-top: 18px; color: #7f858e; font-size: 11px; line-height: 1.6; }
/* Scoped to the discord step specifically (0,3,0 specificity) - needed to
   beat both ".checkout-panel label" (the tiny uppercase monospace style
   meant for the Email/Coupon field labels) and ".checkout-panel
   label:first-of-type" (which zeroes margin-top on this label, since it's
   the only <label> in this step and so matches :first-of-type too). Either
   one alone would silently win a naive ".checkout-discord-skip" rule. */
.checkout-step[data-step="discord"] .checkout-discord-skip { display: flex; align-items: center; gap: 10px; margin: 40px 0 4px; color: #9197a1; font: 500 13px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; text-transform: none; letter-spacing: normal; cursor: pointer; }
.checkout-discord-skip input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: #5865f2; }
.checkout-step[hidden] { display: none; }
.checkout-step-processing { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; text-align: center; gap: 18px; }
.checkout-spinner { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); border-top-color: #fff; animation: checkout-spin .8s linear infinite; }
.checkout-processing-text { color: #9a9fa6; font: 11px Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }

/* Optional post-purchase role claim. SellApp remains responsible for the
   product delivery; this panel only links a verified order to Discord. */
.role-claim-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; }
.role-claim-modal[hidden] { display: none; }
.role-claim-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(18px); }
.role-claim-panel { position: relative; width: min(480px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: radial-gradient(circle at 85% 0%, rgba(88,101,242,.13), transparent 34%), linear-gradient(145deg, #0d0e11, #08090b 70%); box-shadow: 0 50px 160px #000, 0 0 120px -62px rgba(135,145,255,.75); animation: role-claim-in .35s cubic-bezier(.2,.8,.2,1) both; }
.role-claim-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 35%, rgba(135,145,255,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@keyframes role-claim-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.role-claim-brand { display: flex; align-items: center; justify-content: center; gap: 16px; width: max-content; margin: 0 auto 28px; }
.role-claim-logo, .role-claim-discord-mark { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35); }
.role-claim-logo img { width: 24px; height: 24px; border-radius: 6px; }
.role-claim-discord-mark { border-color: rgba(135,145,255,.38); background: rgba(88,101,242,.12); }
.role-claim-discord-mark svg { width: 22px; fill: #aeb5ff; }
.role-claim-step[hidden] { display: none; }
.role-claim-panel h3 { margin: 9px 0 14px; max-width: 390px; font-size: 30px; line-height: 1.08; letter-spacing: -.04em; color: #f7f7f8; }
.role-claim-copy { margin: 0 0 24px; color: #9197a1; font-size: 13px; line-height: 1.7; }
.role-claim-primary { margin-top: 6px; min-height: 52px; }
.role-claim-primary .discord-login-icon { fill: #aeb5ff; }
.role-claim-fine { margin: 14px 0 0; color: #666c76; font-size: 11px; line-height: 1.55; text-align: center; }
.role-claim-panel label { display: block; margin: 17px 0 8px; color: #7f858e; font: 8px Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; }
.role-claim-email-row { display: flex; gap: 9px; }
.role-claim-email-row .fake-input { min-width: 0; }
.role-claim-send { flex: 0 0 auto; min-width: 100px; padding: 0 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; color: #f4f5f6; background: rgba(255,255,255,.07); font: 650 12px Inter, sans-serif; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.role-claim-send:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.role-claim-send:disabled, #role-claim-submit:disabled { opacity: .45; cursor: wait; transform: none; }
.role-claim-code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 18px; letter-spacing: .22em; text-align: center; }
.role-claim-code-wrap .checkout-full { margin-top: 12px; }
.role-claim-message { margin: 13px 0 0; padding: 10px 12px; border: 1px solid rgba(239,106,106,.25); border-radius: 8px; color: #eaa0a0; background: rgba(239,106,106,.06); font-size: 11px; line-height: 1.5; }
.role-claim-message.is-note { border-color: rgba(135,145,255,.25); color: #b7bcff; background: rgba(88,101,242,.07); }
.role-claim-success { text-align: center; }
.role-claim-success .role-claim-copy { max-width: 330px; margin-left: auto; margin-right: auto; }
.role-claim-success-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border: 1px solid rgba(69,239,139,.34); border-radius: 50%; color: #fff; background: radial-gradient(circle, rgba(69,239,139,.2), rgba(69,239,139,.035)); box-shadow: 0 0 42px rgba(69,239,139,.16); font-size: 20px; }
.role-claim-status-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 24px 0; padding: 17px 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(255,255,255,.035); text-align: left; }
.role-claim-status-card span { display: flex; align-items: center; gap: 8px; color: #a7abb2; font: 700 8px Consolas, monospace; letter-spacing: .16em; }
.role-claim-status-card span i { width: 6px; height: 6px; border-radius: 50%; background: #45ef8b; box-shadow: 0 0 12px rgba(69,239,139,.8); }
.role-claim-status-card strong { color: #fff; font-size: 14px; }
.role-claim-status-card small { color: #7f858e; font-size: 11px; }
body.role-claim-open { overflow: hidden; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes breathe { 50% { color: var(--green); text-shadow: 0 0 10px rgba(69,239,139,.35); } }
@keyframes scan { to { transform: translateY(760px); } }
@keyframes wave { 50% { transform: scaleY(.45); opacity: .45; } }
@keyframes menuSnow { from { transform: translate3d(0,-12px,0); } to { transform: translate3d(var(--snow-drift),760px,0); } }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta, .discord-login-btn-compact { display: none; }
  .header-actions { max-width: 58vw; }
  .community-card { grid-template-columns: 1fr 340px; padding: 58px; }
  .community-orbit { width: min(330px, 34vw); }
  .hero { min-height: 1030px; }
  .hero-stage { width: min(1040px, 112vw); margin-left: -6vw; }
  .stat-strip { grid-template-columns: repeat(2,1fr); }
  .stat-strip div:nth-child(2) { border-right: 0; }
  .stat-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .lab-grid, .support-card { grid-template-columns: 1fr; }
  .screen-frame { margin-top: 30px; transform: none; }
  .screen-crop { height: 72vw; }
  .split-heading { grid-template-columns: 1fr; gap: 10px; }
  .showcase-videos { width: 582px; height: 348px; }
  .showcase-item { width: 170px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  .price-card.featured { transform: none; }
  /* iOS Safari auto-zooms the page on focus for any input under 16px -
     jarring on a small modal, and easy to mistake for the tap not
     registering at all. */
  .fake-input, .fake-area { font-size: 16px; }
}

@media (max-width: 520px) {
  .site-header { top: 10px; width: calc(100% - 20px); height: 60px; padding: 0 9px 0 13px; border-radius: 13px; }
  .site-header .brand { gap: 8px; font-size: 14px; }
  .site-header .brand img { width: 31px; height: 31px; }
  .header-actions { max-width: 54vw; gap: 7px; }
  .header-account-entry { height: 38px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
  #account-chip-name { max-width: 92px; }
  .account-chip-btn { max-width: 44vw; padding-right: 9px; }
  .account-menu { max-width: calc(100vw - 24px); }
  .hero { min-height: 0; padding: 145px 14px 78px; }
  .hero h1 { width: 100%; max-width: 100%; font-size: clamp(42px, 13.5vw, 62px); line-height: .94; letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
  .hero h1 br { display: none; }
  .hero h1 em { display: block; width: auto; max-width: 100%; margin: 8px auto 0; font-size: .8em; line-height: .98; letter-spacing: -.045em; color: rgba(255,255,255,.4); -webkit-text-stroke: 0; text-stroke: 0; overflow-wrap: anywhere; }
  .hero-copy { font-size: 14px; overflow-wrap: anywhere; }
  .hero-actions { flex-direction: column; align-items: center; }
  .button { width: min(290px,100%); }
  .hero-stage { width: calc(100vw - 24px); margin: 68px auto 0; perspective: 1200px; }
  .app-window { width: 100%; height: 640px; aspect-ratio: auto; border-radius: 10px; }
  .stage-shadow { display: none; }
  .app-glare { display: none; }
  .cursor-note { display: flex; margin-top: 18px; font-size: 8px; }
  .cursor-note > span, .cursor-copy { display: none; }
  .touch-copy { display: inline; }
  .touch-tilt-note { display: block; margin: 14px auto 0; color: #656b74; font: 7px Consolas, monospace; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
  .app-topbar { height: 48px; padding: 0 13px; font-size: 7px; }
  .app-wordmark img { width: 26px; height: 26px; }
  .app-wordmark b { font-size: 10px; }
  .app-performance { display: none; }
  .app-status { font-size: 7px; }
  .app-tabs { height: 54px; display: flex; overflow: hidden; padding: 0; }
  .app-tabs button { position: relative; flex: 1 1 16.666%; min-width: 0; padding: 0 2px; font-size: clamp(5.5px, 1.55vw, 7px); }
  .app-tabs button.active::after { left: 9px; right: 9px; width: auto; margin: 0; }
  .engine-tabs { height: 48px; }
  .engine-tabs button { font-size: 6.5px; }
  .app-content.active { display: block; height: calc(100% - 190px); padding: 12px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #31363e transparent; }
  .app-content.expanded { height: calc(100% - 142px); }
  .ui-panel { min-height: 0; margin-bottom: 10px; padding: 16px; }
  .panel-title { font-size: 8px; }
  .panel-rule { margin: 10px 0 13px; }
  .profile-head h3 { font-size: 15px; }
  .mode-panel > p:not(.panel-title) { max-width: 94%; font-size: 8px; }
  .mode-panel small { margin-top: 22px; font-size: 7px; }
  .live-panel dl div { padding: 11px 2px; font-size: 8px; }
  .compare-panel > div:not(.panel-rule) { grid-template-columns: 34% 1fr; padding: 7px 3px; font-size: 7.5px; }
  .health-panel > div { font-size: 7.5px; }
  .app-footer { height: 40px; padding-inline: 13px; font-size: 6.5px; }
  .app-footer span:nth-child(2) { display: none; }
  .check-row, .demo-field { font-size: 8px; }
  .demo-field { margin-top: 15px; }
  .demo-field button { font-size: 7px; }
  .ramp-control { gap: 6px; }
  .ramp-body { grid-template-columns: 1fr !important; gap: 14px; }
  .ramp-controls { gap: 12px; }
  .ramp-mini-chart { height: 128px; min-height: 0; }
  .macro-page .live-panel, .macro-page .quick-panel { height: auto; }
  .toggle-row span b { font-size: 8px; }
  .toggle-row span small { font-size: 6.5px; }
  .pipeline-panel { padding: 16px; }
  .pipeline-row, .metric-panel > div:not(.panel-rule) { font-size: 8px; }
  .config-actions > div:last-child, .account-support > div:last-child { display: block; }
  .config-actions > div:last-child > span, .account-support > div:last-child > span { display: block; margin-top: 7px; }
  .config-buttons { margin-top: 11px !important; justify-content: flex-start; }
  .section { padding: 120px 22px; }
  .section-number { top: 44px; }
  .section-heading h2, .lab-copy h2, .support-card h2 { font-size: 49px; }
  .engine-cards { grid-template-columns: 1fr; margin-top: 48px; }
  .engine-card { min-height: 220px; }
  .engine-card.active { background: rgba(255,255,255,.012); }
  .engine-card.scroll-active, .engine-card:active { background: rgba(255,255,255,.065); }
  .engine-card h3 { margin-top: 34px; }
  .lab-metrics { gap: 8px; }
  .lab-metrics strong { font-size: 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-wide, .feature-showcase { grid-column: auto; }
  .feature-wide { grid-template-columns: 1fr; min-height: 900px; }
  .feature-copy { align-self: start; }
  .ramp-visual { height: 525px; margin: 34px -38px -38px; padding: 20px; border-top: 1px solid var(--line); border-left: 0; }
  .curve-toolbar small { font-size: 5.5px; }
  .curve-presets { display: grid; grid-template-columns: 1fr 1fr; }
  .curve-presets button { padding: 9px 6px; }
  .curve-chart { min-height: 275px; }
  .curve-chart svg { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
  .curve-readout > div { padding: 10px 8px; }
  .curve-readout span { font-size: 5px; }
  .curve-readout b { font-size: 8px; }
  .feature-showcase { min-height: 0; padding: 40px 20px 50px; gap: 30px; }
  .sound-wave { position: relative; right: auto; bottom: auto; justify-content: flex-end; margin: 42px 0 0; }
  .config-stack { position: relative; right: auto; bottom: auto; margin: 55px auto 15px; }
  .showcase-videos { width: 332px; height: 205px; }
  .showcase-track { gap: 16px; }
  .showcase-item { width: 100px; }
  .showcase-card { border-radius: 12px; }
  /* Full-screen "bring it to their face" view: a tiny 100px-wide card is
     basically unwatchable on a phone, so tapping any clip also opens it big
     here instead of relying on the small in-place carousel. */
  .showcase-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 72px 20px 24px; background: rgba(3,4,5,.94); }
  .showcase-lightbox[hidden] { display: none; }
  .showcase-lightbox video { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .showcase-lightbox-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(6,7,9,.75); color: #fff; font-size: 15px; }
  .showcase-play::before { width: 36px; height: 36px; }
  .showcase-play::after { margin-left: 2px; border-width: 6px 0 6px 10px; }
  .settings-page .settings-block { position: static; width: auto; height: auto; }
  .configs-page.active { overflow-y: auto; }
  .configs-page .config-list { height: auto; }
  .portable-configs { height: auto; padding: 16px; }
  .portable-buttons { grid-template-columns: 1fr 1fr; }
  .portable-buttons .primary { grid-column: 1 / 3; }
  .config-option { grid-template-columns: 28px 1fr 44px; }
  .config-option em:nth-of-type(n+2) { display: none; }
  .support-card { padding: 30px 20px; }
  .community-section { padding: 24px 14px 100px; }
  .community-card { display: flex; flex-direction: column; min-height: 0; padding: 38px 22px 32px; }
  .community-copy h2 { font-size: clamp(42px, 13vw, 58px); overflow-wrap: anywhere; }
  .community-copy > p:not(.kicker) { font-size: 14px; overflow-wrap: anywhere; }
  .community-points { display: grid; gap: 10px; }
  .community-button { width: 100%; }
  .community-orbit { order: -1; width: min(250px, 76vw); margin: 0 auto 38px; }
  .community-logo { width: 92px; height: 92px; border-radius: 25px; }
  .community-logo svg { width: 49px; height: 49px; }
  .mobile-discord-fab { right: 14px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .mobile-discord-fab-panel { width: min(300px, calc(100vw - 28px)); }
  .ticket-preview { padding: 21px; }
  .checkout-panel { padding: 26px; }
  .role-claim-modal { align-items: flex-end; padding: 0; }
  .role-claim-panel { width: 100%; max-height: 92vh; padding: 28px 22px calc(26px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .role-claim-panel h3 { font-size: 27px; }
  .role-claim-email-row { flex-direction: column; }
  .role-claim-send { min-height: 45px; }
  .final-cta { min-height: 600px; }
  footer { grid-template-columns: 1fr auto; gap: 18px; padding: 26px 16px; }
  .footer-links { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; flex-wrap: wrap; gap: 16px; }
  footer .brand { grid-column: 1; grid-row: 2; }
  footer > span { grid-column: 2; grid-row: 2; font-size: 6px; }
  .section-heading h2, .lab-copy h2, .support-card h2, .final-cta h2,
  .section-heading p, .lab-copy p, .support-card p, .final-copy { max-width: 100%; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
}

@media (min-width: 521px) {
  .curve-handle, .mini-curve-handle { stroke: rgba(255,255,255,.34); stroke-width: .75; filter: drop-shadow(0 0 2px rgba(255,255,255,.55)); }
}

@media (prefers-reduced-motion: reduce) {
  .role-claim-panel { animation: none; }
}

body.embed-mode { overflow: hidden; background: #050607; }
body.embed-mode #field,
body.embed-mode .noise,
body.embed-mode .site-header,
body.embed-mode main > section:not(.hero),
body.embed-mode footer,
body.embed-mode .mobile-discord-fab,
body.embed-mode .preview-toast { display: none !important; }
body.embed-mode .hero { width: 100vw; min-height: 100vh; height: 100vh; padding: 0; background: #050607; }
body.embed-mode .hero > :not(.hero-stage) { display: none !important; }
body.embed-mode .hero-stage { width: 100%; height: 100%; margin: 0; perspective: none; }
body.embed-mode .app-window { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; transform: none !important; }
body.embed-mode .stage-shadow,
body.embed-mode .cursor-note { display: none !important; }