/* Source: base.css */
/* =====================================================================
   SpinDeck — design system
   Dark arcade palette: near-black base, violet -> cyan accent, neon edges.
   ===================================================================== */

:root {
    /* Surfaces */
    --bg: #06060d;
    --bg-deep: #04040a;
    --surface: #0e0e1a;
    --surface-2: #14142a;
    --surface-3: #1b1b34;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* Brand */
    --violet: #8b5cf6;
    --violet-deep: #6d28d9;
    --cyan: #22d3ee;
    --magenta: #e879f9;
    --lime: #a3e635;
    --brand: linear-gradient(120deg, #8b5cf6 0%, #6366f1 45%, #22d3ee 100%);
    --brand-soft: linear-gradient(120deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .18));
    --gold: linear-gradient(120deg, #fbbf24, #f59e0b 55%, #fb923c);

    /* Text */
    --text: #f2f2f8;
    --text-2: #a5a5c0;
    --text-3: #6c6c8a;

    /* Status */
    --ok: #22c55e;
    --warn: #f59e0b;
    --danger: #f43f5e;
    --live: #ef4444;

    /* Shape */
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 30px;

    --shadow: 0 20px 60px -20px rgba(0, 0, 0, .85);
    --glow-violet: 0 0 0 1px rgba(139, 92, 246, .35), 0 0 32px -6px rgba(139, 92, 246, .55);
    --glow-cyan: 0 0 0 1px rgba(34, 211, 238, .32), 0 0 30px -6px rgba(34, 211, 238, .5);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --header-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient arcade backdrop: two slow-drifting colour blooms over a faint grid.
   Fixed + pointer-events:none so it never interferes with layout or clicks. */
body::before,
body::after {
    content: '';
    position: fixed;
    inset: -30vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 18% 12%, rgba(139, 92, 246, .20), transparent 62%),
        radial-gradient(32vmax 32vmax at 82% 8%, rgba(34, 211, 238, .16), transparent 60%),
        radial-gradient(36vmax 36vmax at 62% 88%, rgba(232, 121, 249, .12), transparent 62%);
    animation: drift 34s ease-in-out infinite alternate;
}
body::after {
    z-index: -3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: none;
    mask-image: radial-gradient(70vmax 60vmax at 50% 20%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(70vmax 60vmax at 50% 20%, #000 20%, transparent 78%);
}

@keyframes drift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
a { color: inherit; text-decoration: none; }

.grad-text {
    background: var(--brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.mono { font-family: var(--font-mono); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.center { text-align: center; }
.hidden { display: none !important; }

/* A shared vector icon set keeps small UI details crisp on every screen. */
.sd-icon { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: -.2em; color: inherit; }
.btn .sd-icon { width: 17px; height: 17px; }
.chip .sd-icon { width: 14px; height: 14px; }
.icon-btn .sd-icon, .ex .sd-icon { width: 16px; height: 16px; }
.sd-icon-label { display: inline-flex; align-items: center; gap: 8px; }
.sd-icon-label .sd-icon { width: 17px; height: 17px; color: #b4a0ff; }

/* ----------------------------------------------------------------- layout */
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grid { display: grid; gap: 18px; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ cards */
.card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.card-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--brand);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
    --btn-bg: var(--surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--btn-bg);
    color: var(--text);
    font: 600 .94rem/1 var(--font);
    cursor: pointer;
    transition: transform .16s cubic-bezier(.2, .9, .3, 1), box-shadow .2s, background .2s, border-color .2s, opacity .2s;
    white-space: nowrap;
    user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 255, 255, .28); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.btn-primary {
    background: var(--brand);
    border-color: transparent;
    color: #0a0a14;
    font-weight: 800;
    box-shadow: 0 10px 30px -12px rgba(139, 92, 246, .9);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 16px 40px -12px rgba(139, 92, 246, 1); }

.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .05); }

.btn-danger { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .4); color: #fda4af; }
.btn-danger:hover:not(:disabled) { background: rgba(244, 63, 94, .2); }

.btn-sm { padding: 8px 14px; font-size: .84rem; border-radius: 10px; }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; border-radius: 14px; }
.btn-block { width: 100%; }

/* ----------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.field .hint { font-size: .76rem; color: var(--text-3); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font: 500 .95rem var(--font);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, .65);
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .14);
}
select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c6c8a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
select option { background: #14142a; color: var(--text); }
textarea { resize: vertical; min-height: 88px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
    width: 44px; height: 25px; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid var(--line);
    position: relative; transition: background .2s, border-color .2s; flex: none;
}
.switch .track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--text-2); transition: transform .2s cubic-bezier(.3, .9, .3, 1), background .2s;
}
.switch input:checked + .track { background: rgba(139, 92, 246, .5); border-color: rgba(139, 92, 246, .8); }
.switch input:checked + .track::after { transform: translateX(19px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ----------------------------------------------------------------- chips */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
    font-size: .76rem; font-weight: 600; color: var(--text-2);
}
.chip-violet { background: rgba(139, 92, 246, .14); border-color: rgba(139, 92, 246, .38); color: #c4b5fd; }
.chip-cyan { background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .34); color: #a5f3fc; }
.chip-ok { background: rgba(34, 197, 94, .13); border-color: rgba(34, 197, 94, .36); color: #86efac; }
.chip-warn { background: rgba(245, 158, 11, .13); border-color: rgba(245, 158, 11, .36); color: #fcd34d; }
.chip-danger { background: rgba(244, 63, 94, .13); border-color: rgba(244, 63, 94, .36); color: #fda4af; }
.chip > svg { width: 14px; height: 14px; flex: none; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot-live { background: var(--live); box-shadow: 0 0 0 0 rgba(239, 68, 68, .7); animation: pulse 1.8s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .65); }
    70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ---------------------------------------------------------------- header */
.site-header {
    position: sticky; top: 0; z-index: 60;
    height: var(--header-h);
    display: flex; align-items: center;
    background: rgba(6, 6, 13, .72);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 11px; flex: none;
    background: var(--brand);
    display: grid; place-items: center;
    box-shadow: 0 6px 20px -6px rgba(139, 92, 246, .9);
}
.brand-mark svg { width: 20px; height: 20px; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav a.navlink {
    padding: 8px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600;
    color: var(--text-2); transition: color .18s, background .18s;
}
.nav a.navlink:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav a.navlink.active { color: var(--text); background: rgba(139, 92, 246, .16); }

.avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
    background: var(--surface-2); border: 1px solid var(--line-strong);
}

/* ---------------------------------------------------------------- footer */
.site-footer {
    margin-top: 80px; padding: 34px 0;
    border-top: 1px solid var(--line);
    color: var(--text-3); font-size: .85rem;
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.site-footer a:hover { color: var(--text-2); }

/* --------------------------------------------------------------- toasts */
#toasts {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px));
}
.toast {
    padding: 13px 16px; border-radius: 13px;
    background: rgba(20, 20, 42, .96);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
    font-size: .89rem; font-weight: 500;
    animation: toastIn .28s cubic-bezier(.2, .9, .3, 1);
}
.toast.ok { border-color: rgba(34, 197, 94, .5); }
.toast.err { border-color: rgba(244, 63, 94, .5); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- misc */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .1) 37%, rgba(255, 255, 255, .05) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 10px;
}
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.empty {
    padding: 46px 24px; text-align: center; color: var(--text-3);
    border: 1px dashed var(--line-strong); border-radius: var(--r);
}
.empty .icon { font-size: 2.6rem; margin-bottom: 10px; opacity: .8; }

.copy-field {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
    border-radius: 12px; padding: 4px 4px 4px 14px;
}
.copy-field input {
    border: none; background: none; padding: 8px 0; font-family: var(--font-mono);
    font-size: .84rem; color: var(--text-2);
}
.copy-field input:focus { box-shadow: none; background: none; }

@media (max-width: 720px) {
    .wrap, .wrap-narrow { width: calc(100% - 28px); }
    .nav a.navlink { padding: 8px 10px; font-size: .85rem; }
}

/* =====================================================================
   Responsive layer
   ---------------------------------------------------------------------
   Measured against real widths (320 / 360 / 390 / 414 / 768 / 1024 / 1440).
   The header was the main failure: brand (126px) + nav (218px) + gap
   overflowed anything under ~390px, which is most small Androids and every
   iPhone SE. Everything here is additive — it only narrows the existing
   desktop design, never redefines it.
   ===================================================================== */

/* A long unbroken viewer name or URL must never widen the page. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Notched phones in landscape: keep content clear of the rounded corners. */
.wrap, .wrap-narrow {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Horizontal scrollers (the comparison table) need momentum on iOS. */
.table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ------------------------------------------------------------ ≤ 860px */
@media (max-width: 860px) {
    .site-header .wrap { gap: 10px; }
    .nav { gap: 4px; }
}

/* ------------------------------------------------------------ ≤ 640px */
@media (max-width: 640px) {
    :root { --header-h: 58px; }

    /* "How it works" is an anchor to a section one scroll down the same
       page — the first thing to drop when the bar runs out of room. The
       signed-in links (Dashboard, Admin) are navigation and always stay. */
    .nav a.navlink[href="/#how"],
    .nav a.navlink[href="#how"] { display: none; }

    .brand { font-size: 1.02rem; gap: 8px; }
    .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
    .brand-mark svg { width: 17px; height: 17px; }

    .nav a.navlink { padding: 8px; font-size: .82rem; }
    .btn-sm { padding: 8px 12px; font-size: .8rem; }
    .btn-lg { padding: 13px 22px; font-size: .96rem; }

    /* iOS zooms the whole page when a focused input is under 16px. */
    input, select, textarea { font-size: 16px; }
}

/* ------------------------------------------------------------ ≤ 400px */
@media (max-width: 400px) {
    .wrap, .wrap-narrow { width: calc(100% - 22px); }
    .brand { font-size: .96rem; gap: 7px; }
    .nav a.navlink { padding: 7px 6px; font-size: .8rem; }
    .btn-sm { padding: 7px 10px; font-size: .78rem; }
    .btn-lg { padding: 12px 18px; font-size: .92rem; }
}

/* Short landscape phones: the hero should not need a scroll to clear. */
@media (max-height: 460px) and (orientation: landscape) {
    .site-header { position: static; }
}

/* --------------------------------------------------- touch ergonomics */
/* Applies to touch devices at any width, rather than assuming small =
   touch. 44px is the Apple/Material minimum for a reliable tap. */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .nav a.navlink { min-height: 40px; display: inline-flex; align-items: center; }
    .brand { min-height: 44px; }
    .site-footer a { display: inline-block; padding: 9px 0; }
    .crumbs a { display: inline-block; padding: 8px 0; }
    /* Links sitting inside a sentence are deliberately left alone — WCAG
       exempts inline text links from target sizing, and padding them would
       break the line rhythm of the paragraph they live in. */
    /* Hover lift is meaningless on touch and leaves elements stuck raised. */
    .btn:hover:not(:disabled) { transform: none; }
}

/* Source: home.css */
/* =====================================================================
   SpinDeck — landing page
   ===================================================================== */

/* ------------------------------------------------------------------ hero */
.hero { padding: clamp(48px, 8vw, 96px) 0 40px; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.hero-copy h1 { margin: 18px 0 18px; }
.hero-copy .lede {
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    color: var(--text-2);
    max-width: 54ch;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 24px; }

.hero-platforms { display: flex; gap: 10px; flex-wrap: wrap; }
.plat-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    font-size: .8rem; font-weight: 600; color: var(--text-2);
}
.plat-badge svg { width: 14px; height: 14px; }

/* -------------------------------------------------------- browser mockup */
.demo-frame {
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
    background: rgba(8, 8, 18, .8);
    box-shadow: var(--shadow), var(--glow-violet);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}
.demo-frame:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg); }

.demo-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid var(--line);
}
.demo-bar .dot { width: 9px; height: 9px; }
.demo-url {
    margin-left: 10px; font-size: .7rem; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.demo-stage { padding: 20px; min-height: 300px; position: relative; }

.demo-counter { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); }
.demo-counter b { font-size: 1.9rem; font-weight: 800; }
.demo-counter span { color: var(--text-3); font-weight: 600; }
.demo-counter em {
    font-style: normal; font-family: var(--font); margin-left: 6px;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}

.demo-bar-fill {
    height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08);
    margin: 12px 0 16px; overflow: hidden; border: 1px solid var(--line);
}
.demo-bar-fill i {
    display: block; height: 100%; width: 0;
    background: var(--brand); border-radius: inherit;
    transition: width .5s cubic-bezier(.2, .9, .3, 1);
    box-shadow: 0 0 14px rgba(139, 92, 246, .8);
}

.demo-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.demo-slot {
    aspect-ratio: 1; border-radius: 12px;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
    display: grid; place-items: center; overflow: hidden;
    font-size: .68rem; color: var(--text-3); font-family: var(--font-mono);
}
.demo-slot.taken {
    border-color: rgba(139, 92, 246, .5);
    animation: slotPop .4s cubic-bezier(.2, 1.3, .4, 1);
    padding: 0;
}
.demo-slot img { width: 100%; height: 100%; object-fit: cover; }
@keyframes slotPop { 0% { transform: scale(.6); opacity: 0 } 60% { transform: scale(1.06); opacity: 1 } 100% { transform: scale(1) } }

.demo-tape {
    position: relative; height: 92px; margin-top: 4px;
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--line-strong);
    background: radial-gradient(60% 120% at 50% 50%, rgba(139, 92, 246, .22), transparent 70%), rgba(0, 0, 0, .4);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.demo-track {
    position: absolute; top: 0; bottom: 0; left: 0;
    display: flex; align-items: center; will-change: transform;
}
.demo-track > div {
    width: 66px; height: 66px; margin: 0 4px; flex: none;
    border-radius: 13px; overflow: hidden;
    border: 1px solid var(--line-strong); background: var(--surface-2);
}
.demo-track img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-track > div.win { border-color: #fbbf24; box-shadow: 0 0 0 2px #fbbf24, 0 0 26px rgba(251, 191, 36, .8); }
.demo-line {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; z-index: 3;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--cyan) 15%, var(--cyan) 85%, transparent);
    box-shadow: 0 0 14px rgba(34, 211, 238, .9);
}

.demo-winner {
    display: flex; align-items: center; gap: 12px; margin-top: 14px;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, .45);
    background: linear-gradient(120deg, rgba(251, 191, 36, .14), rgba(249, 115, 22, .06));
    animation: winnerIn .5s cubic-bezier(.2, 1.2, .35, 1);
}
.demo-winner img { width: 44px; height: 44px; border-radius: 12px; border: 2px solid #fbbf24; }
.demo-winner .l { font-size: .64rem; letter-spacing: .22em; color: #fcd34d; font-weight: 700; }
.demo-winner .n { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
@keyframes winnerIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* ----------------------------------------------------------- stat strip */
.stat-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-top: clamp(40px, 6vw, 72px);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--line); overflow: hidden;
}
.stat-strip > div {
    background: rgba(10, 10, 22, .8);
    padding: 22px 18px; text-align: center;
}
.stat-strip b {
    display: block; font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 800; line-height: 1.1;
}
.stat-strip span { font-size: .78rem; color: var(--text-3); letter-spacing: .06em; }

/* -------------------------------------------------------------- sections */
.section { padding: clamp(56px, 9vw, 104px) 0 0; }
.section-head { max-width: 660px; margin-bottom: 38px; }
.section-head h2 { margin: 14px 0 12px; }

/* ---------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; gap: 11px; }
.step-n {
    font-family: var(--font-display); font-size: .82rem; font-weight: 700;
    letter-spacing: .18em; color: transparent;
    background: var(--brand); -webkit-background-clip: text; background-clip: text;
}
.step p { color: var(--text-2); font-size: .93rem; }
.step-visual {
    margin-top: auto; padding-top: 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.mini-field {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 13px; border-radius: 11px;
    background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
    font-size: .86rem;
}
.chatlines { font-size: .84rem; }
.cl {
    padding: 8px 12px; border-radius: 10px;
    background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
    color: var(--text-2);
}
.cl.joined {
    background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35);
    color: #86efac; font-weight: 700; text-align: center;
}
.mini-winner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, .4);
    background: rgba(251, 191, 36, .09);
}
.mw-av {
    width: 42px; height: 42px; border-radius: 11px; flex: none;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    border: 2px solid #fbbf24;
}

/* ------------------------------------------------------------- features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.feature h3 { margin: 14px 0 8px; font-size: 1.08rem; }
.feature p { color: var(--text-2); font-size: .91rem; }
.ficon {
    width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.35rem;
    background: color-mix(in srgb, var(--fc) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--fc) 38%, transparent);
    box-shadow: 0 8px 26px -12px var(--fc);
}

/* ------------------------------------------------------------------ cta */
.cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 26px; flex-wrap: wrap;
    padding: clamp(28px, 5vw, 46px);
    background: linear-gradient(120deg, rgba(139, 92, 246, .14), rgba(34, 211, 238, .08));
}
.cta h2 { margin-bottom: 8px; }

@media (max-width: 940px) {
    .hero-grid { grid-template-columns: 1fr; }
    .demo-frame { transform: none; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .demo-slots { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   SEO content sections: platforms, use cases, comparison table, FAQ.
   These are static prose blocks — no JS touches them.
   ===================================================================== */

.lede-sm {
    margin-top: 22px;
    max-width: 780px;
    color: var(--text-2);
    font-size: .96rem;
}

/* ------------------------------------------------------------ platforms */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.platform { display: flex; flex-direction: column; gap: 12px; }
.pl-head { display: flex; align-items: center; gap: 12px; }
.pl-icon {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pc) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc) 38%, transparent);
}
.pl-icon svg { width: 19px; height: 19px; }
.pl-head h3 { font-size: 1.06rem; margin: 0; }
.platform > p { color: var(--text-2); font-size: .92rem; }
.pl-list { list-style: none; display: grid; gap: 7px; margin-top: auto; padding-top: 4px; }
.pl-list li {
    position: relative;
    padding-left: 20px;
    font-size: .86rem;
    color: var(--text-2);
}
.pl-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: .55em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--pc, var(--violet));
}

/* ------------------------------------------------------------ use cases */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.use h3 { font-size: 1.02rem; margin-bottom: 9px; }
.use p { color: var(--text-2); font-size: .9rem; }

/* ----------------------------------------------------------- comparison */
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
.compare {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: .89rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th {
    font-family: var(--font-display);
    font-size: .84rem;
    color: var(--text-2);
    background: rgba(255, 255, 255, .03);
    white-space: nowrap;
}
.compare tbody th { font-weight: 600; color: var(--text); }
.compare td { color: var(--text-3); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* The SpinDeck column is tinted end to end so the eye tracks it down the table. */
.compare .mine { background: rgba(139, 92, 246, .1); color: var(--text); }
.compare thead .mine { color: #c4b5fd; background: rgba(139, 92, 246, .16); }
.compare td.yes { color: #86efac; }
.compare td.mine.yes { color: #d8b4fe; font-weight: 600; }
.compare td.no { color: var(--text-3); }

/* ------------------------------------------------------------------ faq */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(255, 255, 255, .028);
    overflow: hidden;
}
.faq-item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
    font-size: .98rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
/* Chevron drawn in CSS so the summary stays a single semantic heading. */
.faq-item summary::after {
    content: "";
    width: 8px; height: 8px; flex: none;
    border-right: 2px solid var(--text-3);
    border-bottom: 2px solid var(--text-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item[open] summary { background: rgba(139, 92, 246, .08); }
.faq-item summary:hover h3 { color: #c4b5fd; }
.faq-item > p {
    padding: 2px 18px 18px;
    color: var(--text-2);
    font-size: .91rem;
    max-width: 74ch;
}

/* --------------------------------------------------------------- footer */
/* home.css only loads on the homepage, so this restyles the richer footer
   there without touching the compact one every other page uses. */
.site-footer .wrap { flex-direction: column; align-items: stretch; gap: 20px; }
.foot-blurb { max-width: 760px; font-size: .84rem; line-height: 1.7; color: var(--text-3); }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 700px) {
    .compare { font-size: .84rem; }
    .compare th, .compare td { padding: 11px 13px; }
}

/* =====================================================================
   Responsive refinements
   ===================================================================== */

/* On a phone the table used to scroll sideways, which hid the SpinDeck
   column — the whole reason the table exists — behind a gesture nobody was
   prompted to make. Below 760px each row becomes its own card listing all
   three options, so nothing is off-screen and no scrolling is required. */
@media (max-width: 760px) {
    .table-scroll { border: 0; overflow-x: visible; }

    .compare,
    .compare thead,
    .compare tbody,
    .compare tr,
    .compare th,
    .compare td { display: block; width: auto; min-width: 0; }

    /* The column names move into each cell via data-col, so the real
       header row is redundant. Kept in the DOM for screen readers. */
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    .compare tbody tr {
        border: 1px solid var(--line);
        border-radius: var(--r);
        background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
        margin-bottom: 12px;
        padding: 4px 0;
        overflow: hidden;
    }

    .compare tbody th {
        font-family: var(--font-display);
        font-size: .96rem;
        padding: 13px 15px 9px;
        border-bottom: 1px solid var(--line);
    }

    .compare tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 9px 15px;
        border-bottom: 0;
        text-align: right;
    }

    .compare tbody td::before {
        content: attr(data-col);
        flex: 0 1 auto;
        text-align: left;
        color: var(--text-3);
        font-size: .82rem;
        font-weight: 500;
    }

    /* The SpinDeck answer is the one people are looking for: give it the
       tinted band it has on desktop plus a little more weight. */
    .compare tbody td.mine {
        background: rgba(139, 92, 246, .1);
        margin-top: 3px;
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .compare tbody td.mine::before { color: #c4b5fd; font-weight: 700; }
}

.demo-url { font-size: .75rem; }

@media (max-width: 940px) {
    /* The mock browser frame is decorative; give the copy the full width. */
    .hero-demo { margin-top: 6px; }
}

@media (max-width: 640px) {
    .hero { padding-top: 30px; }
    .hero-cta { gap: 10px; margin: 24px 0 20px; }
    .hero-cta .btn { flex: 1 1 auto; }
    .section-head { margin-bottom: 28px; }
    .platforms, .uses, .features, .steps { gap: 14px; }
    .cta { flex-direction: column; align-items: flex-start; gap: 18px; }
    .cta .btn { width: 100%; }
    .faq-item summary { padding: 14px 15px; }
    .faq-item > p { padding: 2px 15px 16px; }
    .foot-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .foot-nav { gap: 14px; row-gap: 2px; }
}

@media (max-width: 400px) {
    .stat-strip { gap: 10px; }
    .demo-stage { padding: 15px; }
    .demo-slots { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}

/* =====================================================================
   Platform landing pages (/twitch-giveaway-wheel, /youtube-…, /kick-…)
   Each page sets --pc to its brand colour on <body>.
   ===================================================================== */

.crumbs {
    display: flex; align-items: center; gap: 9px;
    padding-top: 22px;
    font-size: .82rem; color: var(--text-3);
}
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }

.plat-hero { padding: clamp(20px, 4vw, 44px) 0 clamp(30px, 5vw, 54px); }
/* The hero now shares .hero-grid with the homepage, so the column sets the
   measure — the old max-widths were for a full-bleed text block. */
.plat-hero h1 { margin: 16px 0 18px; }
.plat-hero .lede { font-size: clamp(1rem, 1.6vw, 1.13rem); color: var(--text-2); max-width: 56ch; }
.plat-hero .hero-cta { margin: 26px 0 20px; }

/* A colour wash keyed to the platform, so the three pages read as siblings
   rather than as one page with the words swapped. */
.plat-page .plat-hero {
    background: radial-gradient(60vmax 34vmax at 12% -10%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 62%);
}
.plat-page .chip-violet {
    background: color-mix(in srgb, var(--pc) 14%, transparent);
    border-color: color-mix(in srgb, var(--pc) 40%, transparent);
    color: color-mix(in srgb, var(--pc) 70%, white);
}

.tick-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tick-row li {
    position: relative; padding-left: 20px;
    font-size: .87rem; color: var(--text-2); font-weight: 500;
}
.tick-row li::before {
    content: ''; position: absolute; left: 2px; top: .42em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--pc, var(--lime));
    border-bottom: 2px solid var(--pc, var(--lime));
    transform: rotate(-45deg);
}

/* ------------------------------------------------------------- how-to */
.howto { list-style: none; counter-reset: step; display: grid; gap: 14px; max-width: 900px; }
.howto > li {
    counter-increment: step;
    position: relative;
    padding: 18px 20px 18px 62px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: rgba(255, 255, 255, .028);
}
.howto > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 20px; top: 18px;
    font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
    color: var(--pc, var(--violet));
}
.howto h3 { font-size: 1.02rem; margin-bottom: 6px; }
.howto p { color: var(--text-2); font-size: .92rem; }

/* ----------------------------------------------------------- two-col */
.two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
.two-col > div > p { color: var(--text-2); margin-bottom: 12px; }
.two-col .pl-list { margin-top: 14px; }
.two-col .pl-list li { font-size: .89rem; }

.compare-mini h3 { font-size: .96rem; margin-bottom: 14px; }
.compare-mini dl { display: grid; gap: 11px; }
.compare-mini dt {
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-3); font-weight: 700;
}
.compare-mini dd { font-size: .89rem; color: var(--text); }
.compare-mini dd s { color: var(--text-3); text-decoration-color: rgba(244, 63, 94, .5); }

/* ------------------------------------------------- cross-platform links */
.plat-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.plat-link { display: flex; align-items: center; gap: 14px; transition: border-color .18s, transform .18s; }
.plat-link:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.plat-link b { display: block; font-size: .98rem; margin-bottom: 2px; }
.plat-link .muted { font-size: .84rem; }

@media (max-width: 860px) {
    .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .plat-hero h1 { max-width: none; }
    .howto > li { padding: 15px 16px 16px 52px; }
    .howto > li::before { left: 16px; top: 16px; }
    .plat-link:hover { transform: none; }
}

/* Link from each homepage platform card to its dedicated page. */
.card-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px;
    font-size: .87rem; font-weight: 600;
    color: var(--pc, var(--violet));
}
.card-more:hover { text-decoration: underline; }
.platform .pl-list { margin-top: 14px; }
.platform h3 a { color: inherit; }
.platform h3 a:hover { color: var(--pc); }

/* The platform hero is text-only (no mockup beside it like the homepage),
   so the default section spacing left a dead band under the fold. */
.plat-hero + .section { padding-top: clamp(26px, 4vw, 52px); }

/* Source: homepage.css */
/* Homepage art direction. Scoped to keep dashboards and platform guides stable. */
.hp-winner-star>.sd-icon,.hp-final-spark>.sd-icon,.hp-overlay-result>span>.sd-icon{width:1em;height:1em;vertical-align:0}
.homepage{--hp-bg:#090a10;--hp-panel:#101118;--hp-text:#f5f5f1;--hp-muted:#aaaab7;--hp-lime:#d6fb7c;background:var(--hp-bg);color:var(--hp-text)}
.homepage::before{display:none}.homepage main{overflow:clip}.homepage .hp-container{width:calc(100% - 80px);max-width:1240px;margin-inline:auto}.homepage a:focus-visible,.homepage button:focus-visible,.homepage summary:focus-visible{outline:2px solid var(--hp-lime);outline-offset:5px}.hp-skip{position:fixed;z-index:300;top:10px;left:10px;background:var(--hp-lime);color:#10120a;padding:12px;transform:translateY(-150%)}.hp-skip:focus{transform:none}
.hp-header{position:sticky;top:0;z-index:60;height:82px;background:rgba(9,10,16,.88);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07)}.hp-header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}.hp-brand{font-size:1.25rem;letter-spacing:-.05em;gap:9px}.hp-brand .brand-mark{width:34px;height:34px;border-radius:10px;color:#080911;background:linear-gradient(145deg,#baa0ff,#8374f2 65%,#a0ceff);box-shadow:0 0 28px #8774ff28}.hp-brand-accent{color:#a899f5}.hp-nav{display:flex;gap:29px;align-items:center;font-size:.84rem;color:#b5b5c2}.hp-nav a{padding:14px 0;transition:color .2s}.hp-nav a:hover{color:#fff}.hp-nav-account{display:none}.hp-header-actions{display:flex;align-items:center;gap:24px}.hp-signin{font-size:.83rem}.hp-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:54px;padding:15px 22px;border:1px solid transparent;border-radius:10px;background:var(--hp-lime);color:#15190d;font-size:.91rem;font-weight:700;line-height:1.4;box-shadow:0 4px 24px #c6ed6110;transition:background .2s,transform .2s}.hp-button:hover{background:#e4ffae;transform:translateY(-2px)}.hp-button svg,.hp-text-button svg{width:18px;height:18px;flex:none}.hp-button-small{min-height:41px;padding:10px 16px;font-size:.8rem;border-radius:8px}.hp-text-button{display:inline-flex;align-items:center;gap:11px;font-size:.88rem;font-weight:600;min-height:44px}.hp-text-button:hover{color:var(--hp-lime)}.hp-menu{display:none;width:42px;height:42px;border:1px solid var(--line);background:transparent;border-radius:8px;color:#fff;padding:12px}.hp-menu span{display:block;width:16px;height:1px;background:currentColor;margin:5px 0}
.hp-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .65rem/1.6 var(--font-mono);letter-spacing:.13em;color:#b9b4ce;text-transform:uppercase}.hp-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--hp-lime);box-shadow:0 0 12px #d6fb7c50}.hp-hero{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:70px 0 52px;min-height:710px}.hp-hero-copy{position:relative;z-index:2}.hp-hero h1{font:600 clamp(3.45rem,5.65vw,5.1rem)/1.02 var(--font-display);letter-spacing:-.065em;margin:22px 0 26px;max-width:640px}.hp-hero h1>span{color:#b4a0ff}.hp-lede{font-size:1.05rem;line-height:1.75;color:var(--hp-muted);max-width:410px}.hp-hero-description{font-size:.82rem;color:#d5d2e0;margin-top:16px}.hp-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:29px 0 18px}.hp-fine{display:flex;align-items:center;gap:9px;color:#848490;font-size:.7rem;flex-wrap:wrap}.hp-fine svg{width:13px;height:13px;color:var(--hp-lime)}.hp-fine>span{color:#4c4b59;margin-inline:2px}
.hp-hero-visual{position:relative;min-width:0;height:590px;isolation:isolate;scroll-margin-top:105px}.hp-hero-art{position:absolute;width:calc(100% + 110px);max-width:none;height:490px;object-fit:cover;object-position:center;left:-38px;top:-28px;z-index:-1;mask-image:linear-gradient(to bottom,#000 65%,transparent 99%);-webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent 99%)}.hp-art-label{position:absolute;top:4px;left:20px;font:500 .58rem var(--font-mono);letter-spacing:.12em;color:#aaa4c3;display:flex;align-items:center;gap:8px}.hp-live-dot{display:inline-block;flex:none;width:5px;height:5px;background:var(--hp-lime);border-radius:50%;box-shadow:0 0 10px #d6fb7c55}.hp-demo-shell{position:absolute;bottom:7px;left:24px;right:-5px}.homepage .demo-frame,.homepage .demo-frame:hover{transform:none;background:linear-gradient(130deg,rgba(27,25,40,.96),rgba(13,14,22,.97));border:1px solid #5a506e;border-radius:16px;box-shadow:0 24px 70px #0009,0 0 0 5px #ffffff03;backdrop-filter:blur(18px)}.homepage .demo-bar{padding:12px 16px;gap:10px;background:#ffffff03;font-size:.73rem;font-weight:500;color:#e1ddea}.hp-demo-mark{display:grid;place-items:center;width:22px;height:22px;font-size:.57rem;background:#a894ec;border-radius:6px;color:#171021;font-weight:800;letter-spacing:-.05em}.hp-demo-badge{margin-left:auto;color:#a9b99b;font:500 .5rem var(--font-mono);letter-spacing:.09em;padding:4px 6px;background:#b4df8610;border:1px solid #b4df861f;border-radius:4px}.homepage .demo-stage{padding:18px 20px 14px;height:auto;min-height:220px}.hp-demo-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.homepage .demo-counter b{font-size:1.5rem}.homepage .demo-counter em{font-size:.53rem;letter-spacing:.08em;color:#9592a3}.hp-demo-keyword{font-size:.64rem;color:#878394}.hp-demo-keyword b{color:#c8b2ff;font:500 .64rem var(--font-mono);padding:4px 6px;background:#baa1ff0e;border:1px solid #baa1ff20;border-radius:4px}.homepage .demo-slots{gap:6px;grid-template-columns:repeat(6,minmax(0,1fr));max-width:402px;margin:auto}.homepage .demo-slot{aspect-ratio:auto;height:53px;border-radius:8px}.homepage .demo-bar-fill{height:4px;margin:10px 0 12px}.homepage .demo-bar-fill i{background:linear-gradient(90deg,#8c70eb,#c4b0ff);box-shadow:none}.homepage .demo-tape{height:76px;border-radius:9px}.homepage .demo-track>div{width:53px;height:53px;border-radius:10px}.homepage .demo-winner{margin-top:8px;padding:7px 10px;border-radius:8px;gap:10px}.homepage .demo-winner img{width:30px;height:30px;border-radius:8px}.homepage .demo-winner .l{font-size:.48rem}.homepage .demo-winner .n{font-size:.82rem}.hp-demo-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff09;padding:6px 14px;font-size:.57rem;color:#898392}.hp-demo-footer button{padding:6px 4px;border:0;background:transparent;color:#c0b5d1;font:inherit;cursor:pointer}
.hp-platform-strip{display:flex;align-items:center;gap:35px;border-block:1px solid var(--line);padding:28px 0}.hp-platform-strip>p{font:500 .58rem var(--font-mono);letter-spacing:.13em;color:#747280;max-width:100px;line-height:1.6}.hp-platform-strip>div{display:flex;align-items:center;justify-content:center;gap:48px;flex:1}.hp-platform-strip a{display:inline-flex;align-items:center;gap:10px;font:600 1.08rem var(--font-display);color:#e5e3e9;letter-spacing:-.025em}.hp-platform-strip svg{width:22px;height:22px}.hp-strip-note{font-size:.7rem;color:#81818f}
.hp-section{padding-top:112px;scroll-margin-top:50px}.hp-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px}.hp-section h2{font:500 clamp(2rem,3.6vw,3.05rem)/1.1 var(--font-display);letter-spacing:-.05em;margin:16px 0 0}.hp-section-heading>p{max-width:320px;color:var(--hp-muted);font-size:.92rem;line-height:1.75;margin-bottom:3px}.hp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.hp-step{background:linear-gradient(160deg,#14141e,#101017);border:1px solid #ffffff0c;border-radius:16px;padding:27px;display:flex;flex-direction:column}.hp-step-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:31px}.hp-step-title>span{font:500 .73rem var(--font-mono);letter-spacing:.05em;color:#8e80ab}.hp-step-title svg{width:24px;height:24px;color:#b9a7e3}.hp-step h3{font:500 1.2rem var(--font-display);letter-spacing:-.03em}.hp-step>p{font-size:.82rem;line-height:1.75;color:#9292a3;margin:12px 0 26px}.hp-setup-preview{margin-top:auto;border:1px solid #ffffff0a;background:#0b0c12;border-radius:9px;padding:6px 14px}.hp-setup-preview>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-size:.65rem;border-bottom:1px solid #ffffff08}.hp-setup-preview>div:last-child{border:0}.hp-setup-preview span{color:#777584}.hp-setup-preview b{font-weight:500;color:#cfcbda}.hp-setup-preview code{font-size:.65rem;color:#c0a3ff;background:#b893ff12;border-radius:4px;padding:2px 6px}.hp-chat-preview{margin-top:auto;display:grid;gap:6px}.hp-chat-preview>div{display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #ffffff08;background:#0b0c12;border-radius:7px;font-size:.66rem}.hp-chat-preview code{color:#e0d4fa}.hp-chat-preview b{font-weight:500;min-width:44px;color:#aca0ce}.hp-chat-preview svg{margin-left:auto;width:13px;height:13px;color:#afd780}.hp-avatar{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:7px;color:#f5efff;font:600 .7rem var(--font-display)}.hp-avatar-purple{background:linear-gradient(145deg,#ba83f4,#533b84)}.hp-avatar-blue{background:linear-gradient(145deg,#63cfe4,#5554b6)}.hp-avatar-pink{background:linear-gradient(145deg,#f593b3,#965695)}.hp-winner-preview{position:relative;display:flex;align-items:center;gap:13px;margin-top:auto;height:126px;padding:25px 16px;border:1px solid #c3b07a30;border-radius:9px;background:radial-gradient(at 75% 0,#dabe5620,transparent 90%),#100f14;overflow:hidden}.hp-winner-preview .hp-avatar{width:44px;height:44px;border:1px solid #e4c179;font-size:1.1rem;border-radius:10px}.hp-winner-preview div>span{display:block;color:#ceb678;font:500 .47rem var(--font-mono);letter-spacing:.08em}.hp-winner-preview b{display:block;font:600 1.15rem var(--font-display);margin:4px 0}.hp-winner-preview small{font-size:.58rem;color:#a9a296}.hp-winner-star{position:absolute;font-size:42px;right:10px;top:-3px;opacity:.28;color:#e5c67f;transform:rotate(13deg)}
.hp-broadcast{display:grid;grid-template-columns:.88fr 1.12fr;border:1px solid #ffffff0d;background:#11121a;border-radius:20px;overflow:hidden}.hp-broadcast-copy{padding:46px 38px;align-self:center}.hp-broadcast-copy h2{font-size:clamp(2rem,3.3vw,2.8rem)}.hp-broadcast-copy>p{color:var(--hp-muted);font-size:.85rem;line-height:1.8;margin:20px 0}.hp-broadcast-copy ul{list-style:none;margin:24px 0 22px;display:grid;gap:13px}.hp-broadcast-copy li{display:flex;align-items:flex-start;gap:9px;font-size:.73rem;color:#b4b2bf}.hp-broadcast-copy li svg{width:15px;height:15px;color:var(--hp-lime);flex:none;margin-top:2px}.hp-broadcast-copy .hp-text-button{font-size:.8rem;color:var(--hp-lime)}.hp-broadcast-visual{position:relative;min-height:470px;overflow:hidden}.hp-broadcast-visual>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:45% center}.hp-broadcast-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#11121a 0,transparent 28%),linear-gradient(0deg,#08090fb0,transparent 50%);pointer-events:none}.hp-scene-label{position:absolute;top:20px;right:20px;z-index:2;font:500 .5rem var(--font-mono);letter-spacing:.12em;background:#05050b80;padding:6px 8px;border:1px solid #ffffff22;border-radius:5px;color:#bab1c9}.hp-overlay-preview{position:absolute;bottom:34px;right:28px;left:70px;padding:14px;background:#0c0c14db;border:1px solid #a7a3cb50;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 12px 40px #0008;z-index:3}.hp-overlay-preview>div:first-child{display:flex;align-items:center;gap:6px;font-size:.68rem}.hp-overlay-preview>div:first-child>span:last-child{margin-left:auto;font:400 .48rem var(--font-mono);color:#85808e}.hp-overlay-result{margin-top:12px;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #d2be6440;border-radius:8px;background:linear-gradient(110deg,#c6ad6018,transparent)}.hp-overlay-result img{border:1px solid #dbc178;border-radius:10px}.hp-overlay-result small{font:500 .5rem var(--font-mono);color:#d8c188;letter-spacing:.16em}.hp-overlay-result b{font:600 1rem var(--font-display);display:block}.hp-overlay-result>span{margin-left:auto;font-size:30px;color:#d8c188}.hp-feature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;padding:34px 6px 0}.hp-feature-row>article>svg{width:23px;height:23px;color:#b8a6e7;margin-bottom:12px}.hp-feature-row h3{font:500 1rem var(--font-display);letter-spacing:-.02em}.hp-feature-row p{font-size:.79rem;color:#90909f;line-height:1.75;margin-top:10px}
.hp-platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.hp-platform-card{padding:27px;border:1px solid #ffffff0b;border-radius:15px;background:radial-gradient(ellipse at 0 0,var(--platform-tint),transparent 75%),#101117;transition:border-color .2s,transform .2s}.hp-platform-card:hover{border-color:var(--platform-color);transform:translateY(-3px)}.hp-twitch{--platform-color:#ad7dfb;--platform-tint:#7a3dd019}.hp-youtube{--platform-color:#ff626b;--platform-tint:#d9414817}.hp-kick{--platform-color:#87e55f;--platform-tint:#65ca3e13}.hp-platform-title{display:flex;align-items:center;gap:12px;margin-bottom:38px}.hp-platform-title>svg:first-child{width:27px;height:27px}.hp-platform-title h3{font:600 1.25rem var(--font-display);letter-spacing:-.035em}.hp-platform-title>svg:last-child{margin-left:auto;transform:rotate(-45deg);color:#6d6a79;width:18px;height:18px}.hp-platform-card>b{font-size:.81rem;font-weight:500}.hp-platform-card p{font-size:.78rem;line-height:1.8;color:#93909f;margin:10px 0 23px}.hp-platform-link{display:flex;gap:8px;align-items:center;font-size:.72rem;color:var(--platform-color)}.hp-platform-link svg{width:15px;height:15px}.hp-section-note{color:#74717f;font-size:.68rem;margin-top:18px;line-height:1.75}
.hp-occasion{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:46px 0;border-block:1px solid var(--line)}.hp-occasion>div>p{font-size:.9rem;line-height:1.8;color:var(--hp-muted);max-width:380px;margin-top:20px}.hp-occasion-list{align-self:center}.hp-occasion-list>div{display:flex;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}.hp-occasion-list>div:last-child{border:0}.hp-occasion-list svg{width:25px;height:25px;color:#ae9be2;flex:none}.hp-occasion-list b{display:block;font-size:.91rem;font-weight:500}.hp-occasion-list small{display:block;color:#8c8a99;font-size:.76rem;margin-top:5px}
.hp-trust{display:grid;grid-template-columns:56px 1fr .85fr;gap:27px;align-items:start;padding:40px;border:1px solid #bca1ff20;border-radius:18px;background:radial-gradient(ellipse at 15% 0,#8c69e218,transparent 80%),#101017}.hp-trust-symbol{width:52px;height:56px;display:grid;place-items:center;border:1px solid #b497f544;border-radius:14px;background:#b497f50a;color:#bfabef}.hp-trust-symbol svg{width:28px;height:28px}.hp-trust-copy .hp-eyebrow{font-size:.5rem;letter-spacing:.1em}.hp-trust-copy h2{font-size:2rem}.hp-trust-copy>p{font-size:.8rem;line-height:1.8;color:#9d97ad;max-width:420px;margin:20px 0 16px}.hp-trust-copy .hp-text-button{font-size:.75rem;color:#cec0f1}.hp-trust-points{padding-top:18px}.hp-trust-points>div{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #ffffff09;font-size:.76rem;color:#c9c3d7}.hp-trust-points svg{color:#c7e697;width:15px;height:15px;flex:none}.hp-trust-points>p{color:#847e93;font-size:.68rem;line-height:1.8;margin-top:18px}.hp-trust-points a{color:#c9b9eb;text-decoration:underline;text-underline-offset:3px}
.hp-faq-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px}.hp-faq-heading>p{max-width:265px;margin:20px 0;font-size:.88rem;line-height:1.7;color:var(--hp-muted)}.hp-faq-heading .hp-text-button{font-size:.76rem;color:#c2b3e8}.hp-faq details{border-bottom:1px solid #ffffff10;padding:4px 0}.hp-faq details:first-child{border-top:1px solid #ffffff10}.hp-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 0;font-size:.87rem;font-weight:500;cursor:pointer}.hp-faq summary::-webkit-details-marker{display:none}.hp-faq summary svg{width:17px;height:17px;color:#9c94ad;flex:none;transition:transform .2s}.hp-faq details[open] summary svg{transform:rotate(45deg)}.hp-faq details p{color:#9f99ad;font-size:.81rem;line-height:1.85;padding:0 28px 22px 0;max-width:570px}
.hp-final{position:relative;overflow:hidden;margin-top:112px!important;margin-bottom:86px!important;padding:64px 24px 58px;text-align:center;border-radius:22px;border:1px solid #9880c82a;background:radial-gradient(ellipse at 50% 0,#9668e929,transparent 68%),linear-gradient(180deg,#13111b,#101016)}.hp-final h2{font:500 clamp(3rem,6vw,5rem)/1.02 var(--font-display);letter-spacing:-.055em;margin:22px 0}.hp-final h2>span{color:#b9a5f3}.hp-final p{font-size:.9rem;color:#a19ba9;margin-bottom:26px}.hp-final small{display:block;color:#807a8a;font-size:.66rem;margin-top:16px}.hp-final-spark{position:absolute;color:#ac97dc;opacity:.35;pointer-events:none}.hp-spark-one{left:13%;top:100px;font-size:65px;transform:rotate(15deg)}.hp-spark-two{right:12%;bottom:95px;font-size:45px;transform:rotate(-15deg)}
.hp-footer{border-top:1px solid #ffffff0a;background:#08090d;padding:52px 0 24px}.hp-footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:55px;padding-bottom:40px}.hp-footer-top>div>p{font-size:.83rem;line-height:1.7;color:#7d778b;margin-top:16px}.hp-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:13px;font-size:.77rem;color:#a6a0b0}.hp-footer nav b{font:500 .59rem var(--font-mono);letter-spacing:.1em;color:#686271;margin-bottom:7px}.hp-footer nav a:hover{color:var(--hp-lime)}.hp-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff09;padding-top:23px;font-size:.65rem;color:#76717e}.hp-footer-bottom a{color:#a49aac}
@media(min-width:1500px){.hp-hero{padding-top:95px;padding-bottom:75px}.hp-hero-visual{height:620px}.hp-hero-art{height:525px;top:-35px}}
@media(max-width:1100px){.homepage .hp-container{width:calc(100% - 48px)}.hp-nav{gap:20px}.hp-header-actions{gap:15px}.hp-hero h1{font-size:4rem}.hp-hero-visual{height:570px}.hp-hero-art{width:calc(100% + 50px);left:-15px;height:400px;top:5px}.hp-demo-shell{left:0;right:0;bottom:10px}.homepage .demo-stage{padding-inline:16px}.hp-demo-badge{font-size:.44rem}.hp-actions{gap:16px}.hp-actions>.hp-button{font-size:.78rem;padding-inline:15px}.hp-actions .hp-text-button{font-size:.78rem}.hp-step{padding:23px}.hp-platform-strip{gap:25px}.hp-platform-strip>div{gap:35px}.hp-strip-note{display:none}.hp-broadcast-copy{padding:32px 27px}.hp-trust{grid-template-columns:45px 1fr .9fr;padding:30px;gap:22px}.hp-trust-symbol{width:44px;height:48px}.hp-trust-copy h2{font-size:1.8rem}.hp-faq-section{gap:55px}.hp-platform-card{padding:23px}.hp-platform-title h3{font-size:1.1rem}}
@media(max-width:850px){.hp-header{height:72px}.hp-nav{gap:16px;font-size:.75rem}.hp-header-inner{gap:16px}.hp-hero{grid-template-columns:1fr 1fr;padding-top:44px;min-height:625px}.hp-hero h1{font-size:3.2rem}.hp-eyebrow{font-size:.53rem}.hp-lede{font-size:.9rem}.hp-hero-description{font-size:.7rem}.hp-hero-visual{height:500px}.hp-hero-art{height:310px;top:0;left:-5px;width:calc(100% + 25px)}.hp-art-label{font-size:.43rem;left:10px;top:0}.hp-demo-shell{bottom:10px}.homepage .demo-stage{height:auto;min-height:200px;padding:13px}.homepage .demo-slot{height:42px}.homepage .demo-bar{font-size:.6rem;padding:10px}.hp-demo-mark{width:19px;height:19px}.hp-demo-badge{display:none}.hp-demo-keyword{font-size:.5rem}.homepage .demo-counter b{font-size:1.25rem}.homepage .demo-counter em{font-size:.43rem;margin-left:1px}.hp-demo-footer{font-size:.48rem;padding-inline:10px}.hp-fine{font-size:.6rem;gap:5px}.hp-actions{gap:12px;margin-top:22px}.hp-section{padding-top:80px}.hp-steps{gap:12px}.hp-step{padding:20px 18px}.hp-step h3{font-size:1rem}.hp-step>p{font-size:.75rem}.hp-setup-preview{padding-inline:9px}.hp-winner-preview{gap:8px;padding-inline:10px}.hp-winner-preview div>span{font-size:.4rem}.hp-winner-preview .hp-avatar{width:33px;height:33px}.hp-platform-grid{gap:12px}.hp-platform-card{padding:22px 18px}.hp-platform-title{gap:8px;margin-bottom:25px}.hp-platform-title h3{font-size:1rem}.hp-platform-title>svg:first-child{width:22px;height:22px}.hp-broadcast{grid-template-columns:1fr 1fr}.hp-broadcast-copy{padding:30px 24px}.hp-broadcast-copy h2{font-size:2rem}.hp-broadcast-copy>p{font-size:.78rem}.hp-broadcast-copy li{font-size:.67rem}.hp-broadcast-visual{min-height:460px}.hp-overlay-preview{left:15px;right:15px;bottom:25px}.hp-overlay-preview>div:first-child>span:last-child{font-size:.38rem}.hp-feature-row{gap:24px}.hp-occasion{gap:45px}.hp-trust{grid-template-columns:1fr 1fr}.hp-trust-symbol{display:none}.hp-trust-copy h2{font-size:1.7rem}.hp-faq-section{grid-template-columns:.75fr 1.25fr;gap:35px}.hp-faq summary{font-size:.8rem}.hp-final{margin-top:80px!important}.hp-footer-top{gap:32px}}
@media(max-width:680px){.hp-signin{display:none}.hp-nav-account{display:block}.homepage .hp-container{width:calc(100% - 36px)}.hp-header{height:66px}.hp-header-inner{gap:12px}.hp-brand{font-size:1.15rem}.hp-header-actions{margin-left:auto}.hp-header-actions .hp-button{padding:9px 12px;font-size:.74rem;min-height:40px;gap:9px}.hp-header-actions .hp-button svg{width:15px;height:15px}.hp-menu{display:block;flex:none}.hp-nav{position:absolute;top:65px;left:0;right:0;background:#11111b;border-bottom:1px solid #ffffff1a;padding:17px 25px;display:none;gap:12px;flex-direction:column;align-items:flex-start;font-size:.92rem}.hp-nav.is-open{display:flex}.hp-nav a{width:100%;padding:10px 0}.hp-hero{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:42px 0 20px;min-height:0}.hp-hero h1{font-size:clamp(3.15rem,10.7vw,4.5rem);letter-spacing:-.055em;margin:20px 0 24px}.hp-hero-copy{max-width:500px}.hp-eyebrow{font-size:.56rem;letter-spacing:.09em}.hp-lede{max-width:390px;font-size:.94rem;line-height:1.7}.hp-hero-description{font-size:.76rem}.hp-actions{margin-top:23px;gap:22px}.hp-actions>.hp-button{font-size:.82rem;padding:14px 16px;min-height:50px;gap:10px}.hp-actions .hp-text-button{font-size:.78rem}.hp-fine{font-size:.62rem;gap:7px}.hp-hero-visual{height:500px;width:100%;max-width:500px;align-self:center;margin-top:30px}.hp-hero-art{height:360px;top:-5px;left:-10%;width:120%;object-position:50% 35%}.hp-art-label{left:12px;top:7px;font-size:.47rem}.hp-demo-shell{left:5px;right:5px;bottom:15px}.homepage .demo-stage{height:auto;min-height:210px;padding:14px 16px}.homepage .demo-slot{height:45px}.homepage .demo-bar{font-size:.67rem;padding:10px 13px}.hp-demo-badge{display:inline-block;font-size:.41rem}.hp-demo-keyword{font-size:.55rem}.hp-demo-footer{font-size:.51rem}.hp-platform-strip{padding:23px 0;gap:16px;flex-direction:column;align-items:flex-start}.hp-platform-strip>p{max-width:none;font-size:.52rem}.hp-platform-strip>div{width:100%;justify-content:space-between;gap:10px}.hp-platform-strip a{font-size:.95rem;gap:8px}.hp-platform-strip svg{width:19px;height:19px}.hp-section{padding-top:70px;scroll-margin-top:25px}.hp-section-heading{display:block;margin-bottom:27px}.hp-section h2{font-size:2.25rem}.hp-section-heading>p{font-size:.85rem;margin-top:18px;max-width:390px}.hp-steps{grid-template-columns:1fr;gap:14px}.hp-step{padding:25px;display:grid;grid-template-columns:1fr;gap:0}.hp-step-title{margin-bottom:23px}.hp-step h3{font-size:1.25rem}.hp-step>p{font-size:.85rem;margin-bottom:25px;max-width:440px}.hp-setup-preview{padding:7px 16px}.hp-setup-preview>div{font-size:.74rem;padding:12px 0}.hp-chat-preview>div{font-size:.76rem;padding:10px 14px}.hp-chat-preview b{min-width:55px}.hp-winner-preview{padding:25px 20px;gap:16px}.hp-winner-preview .hp-avatar{width:44px;height:44px}.hp-winner-preview div>span{font-size:.5rem}.hp-winner-preview small{font-size:.65rem}.hp-broadcast{grid-template-columns:1fr}.hp-broadcast-copy{padding:32px 26px}.hp-broadcast-copy h2{font-size:2.25rem}.hp-broadcast-copy>p{font-size:.85rem}.hp-broadcast-copy li{font-size:.74rem}.hp-broadcast-visual{min-height:330px}.hp-broadcast-visual::after{background:linear-gradient(180deg,#11121a,transparent 25%),linear-gradient(0deg,#08090f8c,transparent 60%)}.hp-broadcast-visual>img{object-position:50% 45%}.hp-overlay-preview{left:26px;right:26px;bottom:25px}.hp-overlay-preview>div:first-child>span:last-child{font-size:.43rem}.hp-feature-row{grid-template-columns:1fr;gap:0;padding-top:15px}.hp-feature-row>article{padding:25px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:28px 1fr;column-gap:15px}.hp-feature-row>article>svg{grid-row:1/3;margin-top:2px}.hp-feature-row h3{font-size:1rem}.hp-feature-row p{margin-top:8px}.hp-platform-grid{grid-template-columns:1fr;gap:14px}.hp-platform-card{padding:27px}.hp-platform-title{margin-bottom:24px;gap:12px}.hp-platform-title h3{font-size:1.2rem}.hp-platform-title>svg:first-child{width:26px;height:26px}.hp-platform-card>b{font-size:.88rem}.hp-platform-card p{font-size:.83rem}.hp-platform-link{font-size:.78rem}.hp-section-note{font-size:.68rem}.hp-occasion{grid-template-columns:1fr;gap:20px;padding:32px 0}.hp-occasion>div>p{font-size:.85rem}.hp-occasion-list>div{gap:16px}.hp-occasion-list b{font-size:.88rem}.hp-trust{grid-template-columns:1fr;padding:28px 24px;gap:10px}.hp-trust-copy h2{font-size:2rem}.hp-trust-copy .hp-eyebrow{font-size:.49rem}.hp-trust-copy>p{font-size:.84rem}.hp-trust-points{padding-top:0}.hp-trust-points>div{font-size:.78rem}.hp-trust-points>p{font-size:.7rem}.hp-faq-section{grid-template-columns:1fr;gap:27px}.hp-faq-heading>p{max-width:360px;font-size:.85rem}.hp-faq summary{font-size:.86rem;line-height:1.6;padding-block:20px}.hp-faq details p{font-size:.82rem}.hp-final{margin-top:70px!important;margin-bottom:60px!important;padding:47px 20px 42px}.hp-final .hp-eyebrow{font-size:.48rem}.hp-final h2{font-size:3.2rem}.hp-final p{font-size:.8rem;max-width:250px;margin-inline:auto}.hp-final .hp-button{font-size:.8rem;gap:10px;padding-inline:18px}.hp-final-spark{display:none}.hp-footer{padding-top:38px}.hp-footer-top{grid-template-columns:1fr 1fr;gap:36px 15px}.hp-footer-top>div{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px}.hp-footer-top>div>p{margin:0;font-size:.72rem}.hp-footer nav{gap:12px;font-size:.75rem}.hp-footer-bottom{flex-wrap:wrap;gap:17px;font-size:.6rem}.hp-footer-bottom p{order:3;flex-basis:100%;font-size:.59rem}.hp-footer-bottom>a{margin-left:auto}}
@media(max-width:370px){.homepage .hp-container{width:calc(100% - 28px)}.hp-brand{font-size:1rem;gap:7px}.hp-brand .brand-mark{width:29px;height:29px}.hp-header-inner{gap:8px}.hp-header-actions .hp-button{font-size:.69rem;padding-inline:9px}.hp-menu{width:36px;height:40px;padding:10px}.hp-hero h1{font-size:3rem}.hp-eyebrow{font-size:.5rem}.hp-actions{gap:8px}.hp-actions>.hp-button{font-size:.74rem;padding-inline:12px}.hp-actions .hp-text-button{font-size:.7rem;gap:5px}.hp-fine{font-size:.55rem;gap:5px}.hp-demo-shell{left:0;right:0}.hp-demo-badge{display:none}.hp-hero-visual{height:450px}.hp-hero-art{height:310px}.hp-platform-strip a{font-size:.8rem;gap:6px}.hp-section h2{font-size:2rem}.hp-step{padding:22px}.hp-broadcast-copy{padding:27px 22px}.hp-trust{padding:25px 22px}.hp-trust-copy .hp-eyebrow{font-size:.43rem}.hp-final h2{font-size:2.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.homepage *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hp-button:hover,.hp-platform-card:hover{transform:none}}

/* Text identified by the mobile accessibility audit; preserve the dark palette. */
.hp-platform-strip>p,.hp-setup-preview span,.hp-section-note,.hp-footer-top nav>b,.hp-footer-bottom,.hp-fine>span{color:#a6a3b5}

/* Source: header.css */
/* One navigation and account experience across the marketing site and app. */
.homepage,.sd-page { --header-h:80px; }
.sd-masthead.site-header { height:80px; position:sticky; top:0; z-index:90; display:block; background:rgba(9,10,16,.94); border-bottom:1px solid #ffffff0c; box-shadow:0 8px 30px #00000010; backdrop-filter:blur(22px); }
.sd-masthead .mh-inner { width:min(1240px,calc(100% - 80px)); height:100%; margin-inline:auto; display:flex; align-items:center; gap:32px; }
.sd-masthead .mh-brand { display:inline-flex; align-items:center; gap:10px; flex:none; font:700 1.25rem var(--font-display); letter-spacing:-.055em; color:#f5f5f1; }
.mh-brand>span:last-child>span { color:#b4a0ff; }
.mh-logo { display:grid; place-items:center; width:36px; height:36px; border:1px solid #c9b7ff66; border-radius:11px; background:linear-gradient(145deg,#c2adff,#9580eb 70%,#a7bdec); box-shadow:0 4px 20px #a082e320; color:#1b142b; }
.mh-logo>svg { width:23px; height:23px; }
.mh-nav { display:flex; align-items:center; gap:7px; margin-inline:auto; }
.mh-nav>a,.mh-disclosure { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; min-height:40px; color:#b3aeba; font:500 .81rem var(--font); background:transparent; border:0; border-radius:8px; cursor:pointer; white-space:nowrap; }
.mh-nav>a:hover,.mh-disclosure:hover,.mh-nav>a[aria-current="page"],.mh-disclosure[aria-expanded="true"] { color:#f2eef8; background:#ffffff06; }
.mh-nav>a[aria-current="page"] { box-shadow:inset 0 -2px #ad96ed; }
.mh-disclosure>.sd-icon { width:13px; height:13px; color:#898191; transition:transform .16s; }
.mh-disclosure[aria-expanded="true"]>.sd-icon { transform:rotate(180deg); }
.mh-platforms { position:relative; }
.mh-popover { position:absolute; top:calc(100% + 17px); max-height:calc(100dvh - var(--header-h) - 24px); overflow-y:auto; border:1px solid #4a405c; border-radius:16px; background:linear-gradient(135deg,#1b1823,#12131b 70%); box-shadow:0 24px 64px #0009,0 1px 0 #ffffff08 inset; padding:8px; }
.mh-platform-panel { width:330px; left:50%; transform:translateX(-50%); }
.mh-popover[hidden],.mh-avatar img[hidden] { display:none!important; }
.mh-panel-label { font:500 .55rem var(--font-mono); letter-spacing:.12em; color:#958aab; padding:13px 13px 8px; }
.mh-platform-panel>a { display:flex; align-items:center; gap:13px; padding:13px; border-radius:9px; color:#efeaf7; }
.mh-platform-panel>a:hover,.mh-platform-panel>a[aria-current="page"] { background:#b4a0ff0a; }
.mh-platform-symbol { display:grid; place-items:center; width:35px; height:35px; border:1px solid #ffffff0a; background:#ffffff04; border-radius:9px; }
.mh-platform-symbol svg { width:19px; height:19px; }
.mh-platform-panel b { display:block; font-size:.81rem; font-weight:600; }
.mh-platform-panel small { display:block; color:#91899f; font-size:.67rem; margin-top:4px; }
.mh-platform-panel>a>.sd-icon { width:14px; height:14px; color:#91839f; margin-left:auto; }
.mh-platform-footer { border-top:1px solid #ffffff0a; padding:13px; font-size:.66rem; line-height:1.6; color:#a79cb9; }
.mh-actions { display:flex; align-items:center; gap:18px; flex:none; margin-left:auto; }
.mh-signin { color:#d4cfdf; font:500 .8rem var(--font); white-space:nowrap; }
.mh-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 15px; border-radius:9px; background:#d6fb7c; color:#171b10; font:600 .78rem var(--font); white-space:nowrap; box-shadow:0 2px 8px #bada4a0a; transition:background .16s; }
.mh-primary:hover { background:#e4ffad; }.mh-primary>.sd-icon { width:16px; height:16px; }
.mh-account { position:relative; padding-left:17px; border-left:1px solid #ffffff12; }
.mh-profile-button { display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; text-align:left; color:#f5f5f1; font:inherit; }
.mh-profile-button:hover,.mh-profile-button[aria-expanded="true"] { background:#b4a0ff09; border-color:#b4a0ff22; }
.mh-avatar { display:grid; place-items:center; position:relative; width:37px; height:37px; flex:none; border:1px solid #cbb4ff63; border-radius:50%; background:linear-gradient(145deg,#dacaff,#a38bd5); box-shadow:0 0 0 3px #b4a0ff09; color:#30213f; overflow:hidden; font:600 .77rem var(--font-display); letter-spacing:.025em; }
.mh-avatar>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#1b1825; }
.mh-profile-copy { min-width:0; max-width:110px; }
.mh-profile-copy>b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.77rem; font-weight:600; }
.mh-profile-copy>small { display:block; font:400 .61rem var(--font); color:#9a8fab; margin-top:3px; }
.mh-profile-button>.sd-icon { width:13px; height:13px; color:#9587a9; margin-left:3px; }
.mh-account-panel { width:295px; right:0; }
.mh-account-summary { display:flex; align-items:center; gap:12px; padding:17px 12px 19px; border-bottom:1px solid #ffffff0b; margin-bottom:7px; }
.mh-account-summary .mh-avatar { width:45px; height:45px; font-size:.92rem; }
.mh-account-summary>div { min-width:0; }
.mh-account-summary b { display:block; font:600 .94rem var(--font-display); overflow-wrap:anywhere; color:#f2ecfa; }
.mh-account-summary small { display:block; color:#a294b2; font-size:.68rem; margin-top:4px; overflow-wrap:anywhere; }
.mh-account-links>a,.mh-signout { display:flex; align-items:center; width:100%; gap:12px; min-height:43px; padding:11px 12px; border-radius:8px; border:0; background:transparent; color:#d2cadf; font:500 .78rem var(--font); text-align:left; cursor:pointer; }
.mh-account-links>a>.sd-icon,.mh-signout>.sd-icon { width:17px; height:17px; color:#a492bf; }
.mh-account-links>a:hover { background:#b4a0ff0a; color:#f4ecff; }
.mh-signout { margin-top:7px; border-top:1px solid #ffffff0b; border-radius:0 0 8px 8px; padding-top:15px; padding-bottom:13px; color:#e7a8b7; }
.mh-signout>.sd-icon { color:#cc8ca0; }.mh-signout:hover { background:#f48aa00a; }.mh-signout:disabled { cursor:wait; opacity:.6; }
.mh-menu-toggle { display:none; width:41px; height:41px; flex:none; align-items:center; justify-content:center; border:1px solid #ffffff1a; border-radius:9px; background:#ffffff02; color:#ccc2de; }
.mh-menu-toggle>.sd-icon { width:19px; height:19px; }
.mh-mobile-signin { display:none!important; }
.sd-masthead :is(a,button):focus-visible { outline:2px solid #d6fb7c; outline-offset:4px; }
.sd-masthead .mh-fallback { margin-left:auto; }
@media(max-width:1150px) {
 .sd-masthead .mh-inner { width:calc(100% - 48px); gap:20px; }.mh-nav { gap:0; }.mh-nav>a,.mh-disclosure { padding-inline:10px; font-size:.76rem; }
 .mh-actions { gap:13px; }.mh-profile-copy { display:none; }.mh-account { padding-left:11px; }.mh-profile-button { gap:5px; }
}
@media(max-width:850px) {
 .homepage,.sd-page { --header-h:70px; }
 .sd-masthead.site-header { height:70px; }.sd-masthead .mh-inner { gap:16px; }.sd-masthead .mh-brand { font-size:1.15rem; }.mh-logo { width:33px; height:33px; }
 .mh-nav>a,.mh-disclosure { font-size:.72rem; padding-inline:8px; }.mh-primary { font-size:.72rem; padding-inline:12px; }.mh-signin { font-size:.74rem; }
 .mh-actions { gap:11px; }.mh-account { padding-left:0; border:0; }.mh-profile-button>.sd-icon { display:none; }
}
@media(max-width:760px) {
 .homepage,.sd-page { --header-h:68px; }
 .sd-masthead.site-header { height:68px; }.sd-masthead .mh-inner { width:calc(100% - 36px); gap:11px; }
 .mh-menu-toggle { display:flex; }.mh-actions { gap:12px; }.mh-profile-button { padding:0; border:0; }.mh-avatar { width:39px; height:39px; }
 .mh-signin { display:none; }.mh-primary { min-height:40px; padding:10px 13px; font-size:.74rem; }
 .mh-new-giveaway { width:38px; min-height:38px; padding:9px; background:#b4a0ff13; color:#cdb8f5; border:1px solid #b4a0ff30; }.mh-new-giveaway>span { display:none; }.mh-new-giveaway:hover { background:#b4a0ff22; }
 .mh-nav { display:none; position:absolute; top:77px; left:18px; right:18px; margin:0; padding:12px; background:linear-gradient(130deg,#191620,#11121a); border:1px solid #4a405c; border-radius:15px; box-shadow:0 22px 60px #0009; max-height:calc(100dvh - 94px); overflow-y:auto; }
 .mh-nav.is-open { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
 .mh-nav>a,.mh-disclosure { width:100%; justify-content:space-between; padding:14px 12px; min-height:44px; font-size:.83rem; }
 .mh-mobile-signin { display:flex!important; border-top:1px solid #ffffff0b!important; border-radius:0!important; margin-top:4px; }
 .mh-platform-panel { position:static; transform:none; width:auto; margin:4px 0 7px; border-color:#ffffff0d; background:#090a1040; box-shadow:none; }
 .mh-platform-panel>a { padding-block:12px; }.mh-platform-panel .mh-panel-label { padding-top:10px; }
 .mh-account-panel { position:fixed; top:77px; left:18px; right:18px; width:auto; max-height:calc(100dvh - 94px); overflow-y:auto; }
 .mh-account-summary { padding:17px 14px 19px; }.mh-account-summary .mh-avatar { width:48px; height:48px; }.mh-account-links>a,.mh-signout { min-height:46px; font-size:.84rem; }
}
@media(max-width:370px) {
 .sd-masthead .mh-inner { width:calc(100% - 28px); gap:9px; }.sd-masthead .mh-brand { font-size:1.06rem; gap:8px; }.mh-logo { width:31px; height:31px; }.mh-primary { font-size:.71rem; padding-inline:10px; }.mh-actions { gap:9px; }.mh-menu-toggle { width:37px; }.mh-new-giveaway { width:34px; }.mh-avatar { width:35px; height:35px; }
}
@media(prefers-reduced-motion:reduce) { .sd-masthead * { transition:none!important; } }

/* Source: guides.css */
.guide-main{padding-top:32px;padding-bottom:64px}.guide-skip{position:absolute;top:-100px;left:16px;z-index:100;background:#d6fb7c;color:#090a10;padding:14px}.guide-skip:focus{top:10px}.guide-crumbs{display:flex;flex-wrap:wrap;gap:12px;color:#aaaab7;font-size:.8rem;margin-bottom:36px}.guide-crumbs a{color:#b4a0ff}.guide-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}.guide-eyebrow{color:#b4a0ff;font-size:.7rem;letter-spacing:.16em;font-weight:700}.guide-hero h1{font-size:clamp(2.8rem,5.4vw,5rem);line-height:1.06;margin:20px 0 24px}.guide-hero h1 span{color:#d6fb7c}.guide-intro{color:#b9b8c7;font-size:1.05rem;line-height:1.85;max-width:620px}.guide-hero figure{margin:0}.guide-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:1px solid #ffffff12}.guide-hero figcaption{font-size:.75rem;color:#aaaab7;margin-top:12px}.guide-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:28px 0 16px}.guide-actions>a:not(.btn){color:#d6fb7c;font-size:.85rem}.guide-note{font-size:.85rem;color:#aaaab7;line-height:1.7}.guide-note a,.guide-steps a{color:#b4a0ff;text-decoration:underline;text-underline-offset:4px}.guide-toc{display:flex;flex-wrap:wrap;gap:12px 32px;padding:24px 0;border-block:1px solid #ffffff16;margin-top:56px}.guide-toc a{font-size:.8rem;color:#c8c6d2;padding:8px 0}.guide-section{padding-top:76px;scroll-margin-top:95px}.guide-section-head{max-width:760px;margin-bottom:30px}.guide-section h2,.guide-cta h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.16;margin:16px 0}.guide-section p,.guide-cta p{color:#aaaab7;line-height:1.8}.guide-steps{list-style:none;padding:0;display:grid;gap:0;max-width:940px}.guide-steps li{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:28px 0;border-top:1px solid #ffffff14}.guide-steps li>span{font-size:.8rem;color:#d6fb7c;padding-top:5px}.guide-steps h3,.guide-help-grid h3{font-size:1.1rem;margin:0 0 10px}.guide-steps p{margin:0}.guide-page code{font-size:.85em;color:#ded5fc;overflow-wrap:anywhere}.guide-code{padding:22px 24px;background:#15141f;border:1px solid #ffffff18;border-radius:14px;margin:28px 0}.guide-code span{display:block;color:#aaaab7;font-size:.75rem;margin-bottom:10px}.guide-code code{display:block;overflow-wrap:anywhere}.guide-table-wrap{overflow-x:auto;border:1px solid #ffffff16;border-radius:14px}.guide-table-wrap table{border-collapse:collapse;width:100%;font-size:.9rem;text-align:left}.guide-table-wrap caption{text-align:left;padding:18px 22px;background:#15141f;color:#cfc7e7;font-size:.8rem}.guide-table-wrap th,.guide-table-wrap td{padding:18px 22px;border-top:1px solid #ffffff12;line-height:1.6}.guide-table-wrap td{color:#aaaab7}.guide-table-wrap thead{background:#111219}.guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.guide-cards a{padding:28px;border:1px solid #ffffff16;border-radius:18px;background:#111219}.guide-cards a:hover{border-color:#b4a0ff66}.guide-cards span{font-size:.7rem;color:#b4a0ff;letter-spacing:.15em}.guide-cards h3{font-size:1.2rem;margin:20px 0 12px}.guide-cards p{font-size:.9rem}.guide-cards b{display:block;color:#d6fb7c;font-size:.8rem;margin-top:24px}.guide-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 46px}.guide-help-grid article{border-top:1px solid #ffffff16;padding-top:24px}.guide-faq{max-width:900px}.guide-faq details{border-bottom:1px solid #ffffff16;padding:20px 0}.guide-faq summary{cursor:pointer;line-height:1.6;font-weight:600}.guide-faq p{padding-right:24px}.guide-cta{margin-top:80px;padding:36px;border:1px solid #b4a0ff33;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(115deg,#b4a0ff10,transparent)}.guide-cta .btn{flex-shrink:0}.guide-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-block:20px 40px;border-top:1px solid #ffffff16}.guide-footer>a{font-weight:700}.guide-footer nav{display:flex;flex-wrap:wrap;gap:20px;font-size:.85rem}.guide-footer p{flex-basis:100%;color:#aaaab7;font-size:.75rem}.seo-guide-link{margin-top:24px;display:block;font-size:.9rem;color:#b4a0ff;text-decoration:underline;text-underline-offset:5px}
.sd-learn{padding-block:72px;border-top:1px solid #ffffff16}.sd-learn h2{font:700 clamp(1.7rem,3.5vw,2.6rem)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:14px 0}.sd-learn>div>p{color:#aaaab7;line-height:1.7;margin-bottom:28px}.sd-learn .guide-cards p{color:#b9b8c7;line-height:1.75}.sd-learn .guide-cards a{display:block;min-width:0}.guide-page main a:not(.btn),.guide-help-grid a{color:#c6b5ff}.guide-page .guide-actions>a:not(.btn){color:#d6fb7c}.guide-page a:focus-visible,.sd-learn a:focus-visible{outline:2px solid #d6fb7c;outline-offset:6px}.guide-hero>div{min-width:0}.guide-hero h1{overflow-wrap:break-word}.guide-section p{max-width:940px}.guide-section p a{text-decoration:underline;text-underline-offset:4px}.guide-cards a{transition:border-color .15s,background .15s}.guide-cards a:hover{background:#181623}.guide-cards h3{line-height:1.35}.guide-cards p{line-height:1.75}.guide-cards b span{color:inherit;letter-spacing:normal;font-size:inherit}.sd-learn .guide-eyebrow{font-size:.72rem;color:#b4a0ff;letter-spacing:.14em;font-weight:700}
@media(max-width:900px){.guide-hero{grid-template-columns:1fr;gap:30px}.guide-hero figure{max-width:650px}.guide-cards{grid-template-columns:1fr}.guide-cards a{padding:24px}.guide-cta{flex-direction:column;align-items:flex-start}.sd-learn{padding-block:48px}}
@media(max-width:600px){.guide-page .wrap{width:calc(100% - 36px)}.guide-main{padding-top:24px}.guide-hero h1{font-size:2.9rem}.guide-intro{font-size:1rem}.guide-toc{gap:4px 18px;margin-top:32px}.guide-section{padding-top:50px}.guide-steps li{grid-template-columns:28px 1fr;gap:10px}.guide-help-grid{grid-template-columns:1fr}.guide-table-wrap th,.guide-table-wrap td{padding:12px;min-width:100px}.guide-cta{padding:24px;margin-top:50px}.guide-footer nav{gap:16px}}