/* =====================================================================
   bolt - site + dashboard styling

   The palette, the radii and the type are the in-game menu's own, taken
   from ThirdParty/Interface/colors/colors.h rather than eyeballed from a
   screenshot: one accent, a few surfaces, three text weights, and a
   single hairline on every edge. The menu describes itself as a "modern
   flat theme" and this is the same theme on a page.
   ===================================================================== */

:root {
    /* canvas + surfaces - the menu's own values, in the same order it
       declares them: the gradient behind everything, then the card, then
       the control that sits on the card, then that control hovered. */
    --bg: #0a0b12;          /* background_bottom */
    --bg-top: #0f111a;      /* background_top   */
    --surface: #141723;     /* surface  - cards */
    --surface-2: #1b1f2e;   /* surface_alt  - controls on cards */
    --surface-3: #242a3e;   /* surface_high - hovered controls */
    --sidebar: #0d0f17;
    --bg-soft: #0d0f17;     /* sidebar - alternating bands and the footer */

    /* One hairline, not two. The old sheet drew a hard black seat under a
       blue-grey line because the menu used to; the menu now draws a single
       white line at 7% and catches a light along the top edge instead. */
    --line: rgba(255, 255, 255, .07);       /* outline      */
    --line-soft: rgba(255, 255, 255, .035); /* outline_soft */
    --line-strong: rgba(255, 255, 255, .14);
    --edge-light: rgba(255, 255, 255, .06);

    /* text - three weights, near-neutral by design. The menu deliberately
       does not tint these with the accent; that is what stops a themed
       build from looking like a colour filter was dropped over it. */
    --text: #fafcff;        /* text       */
    --text-dim: #b9c3da;    /* text_dim   */
    --text-faint: #96a2bc;  /* text_faint */

    /* one accent, used sparingly */
    --primary: #8c98ff;
    --accent: #8c98ff;                          /* accent       */
    --accent-hover: #a0b0ff;                    /* accent_hover */
    --accent-soft: rgba(140, 152, 255, .18);    /* accent_muted */
    --accent-line: rgba(140, 152, 255, .45);
    --ok: #3fd9a4;
    --no: #ff6b9d;
    --gold: #ffc24b;
    --blurple: #5865f2;

    /* type: Poppins SemiBold for headings, Inter for everything read at
       length - the two faces the menu itself bundles. */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ui: Verdana, Geneva, Tahoma, sans-serif;  /* the menu mock only */

    /* shape: c_metrics, verbatim. Every surface agrees because they all
       come from these four numbers. */
    --r-sm: 8px;      /* control_rounding */
    --r-md: 12px;     /* card_rounding    */
    --r-lg: 14px;     /* window_rounding  */
    --r-pill: 999px;  /* pill_rounding    */
    --control-h: 34px;
    --row-gap: 12px;

    --wrap: 1180px;
    --shadow-card: 0 18px 40px rgba(0, 0, 0, .55);
    --shadow-pop: 0 28px 70px rgba(0, 0, 0, .72);
}

/* Every surface in the menu is a flat fill, a hairline, and a light along
   its top edge - c_colors::lit_edges. One utility, so the page cannot
   drift from it. */
.chrome {
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--edge-light);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    background-image: linear-gradient(180deg, var(--bg-top), var(--bg) 680px);
    background-attachment: fixed;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
}

p { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; transition: color .16s ease; }
b, strong { color: var(--text); font-weight: 600; }

code {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: .86em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--r-sm);
    padding: 2px 6px;
}

kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

img { max-width: 100%; }

.wrap { width: min(var(--wrap), calc(100% - 44px)); margin: 0 auto; }
.mt { margin-top: 22px; }
.text-center { text-align: center; }
.text-green { color: var(--ok) !important; }

/* icon system ------------------------------------------------------- */
.svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    vertical-align: -3px;
}
.svg-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.svg-icon--sm { width: 14px; height: 14px; }
.svg-icon--md { width: 18px; height: 18px; }
.svg-icon--lg { width: 24px; height: 24px; }
.svg-icon--xl { width: 40px; height: 40px; }

/* =============================== nav pill ============================ */

.titlebar {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1040px, calc(100% - 32px));
    z-index: 80;
}

.titlebar__inner {
    height: 60px;
    padding: 0 12px 0 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    background: rgba(20, 23, 35, .86);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 1px 0 var(--edge-light), 0 12px 34px rgba(0, 0, 0, .55);
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--text); justify-self: start; }
.brand__logo { width: 22px; height: 22px; }
.brand__name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.brand__tag {
    margin-left: 2px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .05);
    border-radius: var(--r-pill);
}

.nav { display: flex; align-items: center; gap: 2px; justify-self: center; }

.nav__item {
    position: relative;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-faint);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav__item:hover { color: var(--text); background: var(--line-soft); border-color: var(--line); }
.nav__item.is-active { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
/* the menu marks its active tab with an accent underline - so does the nav */
.nav__item.is-active::after { content: none; }

.titlebar__right { display: flex; align-items: center; gap: 8px; justify-self: end; }
.titlebar__status { display: none; }

.nav-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: background .16s ease, border-color .16s ease;
}
.nav-user-badge:hover { background: rgba(255, 255, 255, .1); border-color: var(--line-strong); }
.nav-user-avatar {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    color: #fff;
    background: var(--blurple);
    border-radius: var(--r-pill);
}

/* ================================ buttons ============================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-h);
    padding: 0 18px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-dim);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 var(--edge-light);
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover { color: var(--text); background: var(--surface-3); border-color: var(--line-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary,
.btn--accent {
    color: #0b0d16;
    background: var(--accent);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    font-weight: 600;
}
.btn--primary:hover,
.btn--accent:hover {
    background: var(--accent-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 28px rgba(140, 152, 255, .30);
}

.btn--sm { height: 30px; padding: 0 14px; font-size: 13px; }
.btn--lg { height: 48px; padding: 0 24px; font-size: 14.5px; }
.btn--block { width: 100%; }
.btn--dashboard { color: var(--text); }

.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
}
.link-btn:hover { color: var(--accent-hover); }

/* pills + badges ---------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.pill--ok { color: var(--ok); background: rgba(77, 219, 127, .1); border-color: rgba(77, 219, 127, .25); }

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.badge-dot {
    width: 6px; height: 6px;
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .12);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.dot {
    width: 6px; height: 6px;
    background: var(--ok);
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .14);
}

/* ================================= hero ============================== */

.hero { padding: 190px 0 120px; position: relative; overflow: hidden; }
.hero::before {
    content: "";
    position: absolute;
    inset: -180px 0 auto 0;
    height: 620px;
    background:
        radial-gradient(640px 320px at 20% 20%, rgba(140, 152, 255, .18), transparent 70%),
        radial-gradient(520px 280px at 80% 6%, rgba(140, 152, 255, .07), transparent 70%);
    pointer-events: none;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 68px;
    align-items: center;
}

.hero__title {
    margin: 0 0 26px;
    font-size: clamp(46px, 6.4vw, 84px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.0;
    /* hard fade: bright white shoulder straight down into the accent, then
       almost into the page itself */
    background: linear-gradient(163deg, #ffffff 6%, #e4e8ff 28%, #8c98ff 70%, #2f3566 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 40px rgba(140, 152, 255, .3));
}

.hero__lead { max-width: 46ch; font-size: 16px; line-height: 1.7; color: var(--text-dim); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 44px; }

.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--line);
}
.hero__stats li { display: flex; flex-direction: column; gap: 2px; }
.hero__stats b { font-size: 21px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; }
.hero__stats span { font-size: 11.5px; color: var(--text-faint); }

/* ------------------------- in-game menu mock ------------------------ */

.hero__mock { perspective: 1400px; }

/* the hero art is a straight capture of the client, framed in the same
   chrome the menu draws for itself */
.hero__frame {
    position: relative;
    max-width: 647px;
    margin: 0 0 0 auto;
    transform-style: preserve-3d;
    will-change: transform;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-pop);
    overflow: hidden;
    animation: floaty 9s ease-in-out infinite;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

/* tilt on hover. css alone gives a fixed angle so it still works without
   js; when js is present it drives the angles per frame and the transform
   transition is dropped so nothing lags behind the pointer. */
.hero__mock:hover .hero__frame,
.hero__mock.is-tilting .hero__frame {
    /* the float animation also drives transform, and an animated value beats
       a normal declaration - it has to be switched off for the tilt to win */
    animation: none;
    transform:
        perspective(1100px)
        rotateX(var(--tilt-x, 5deg))
        rotateY(var(--tilt-y, -9deg))
        scale(var(--tilt-scale, 1.025));
    box-shadow: inset 0 0 0 1px var(--accent-line), 0 30px 70px rgba(0, 0, 0, .75), 0 0 60px rgba(140, 152, 255, .12);
}
.hero__mock:hover .hero__frame { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease; }
/* while js drives it, every frame carries its own value - no transition */
.hero__mock.is-tilting .hero__frame { transition: box-shadow .25s ease; }
.hero__frame::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--r-md);
    background: linear-gradient(150deg, rgba(140, 152, 255, .16), transparent 45%);
    pointer-events: none;
}
.hero__shot {
    display: block;
    width: 100%;
    height: auto;
}

.mock {
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0;
    color: #9aa4bb;
    background: linear-gradient(180deg, #12141b, #0b0d12);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-pop);
    user-select: none;
    animation: floaty 8s ease-in-out infinite;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.mock__title {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mock__title img { width: 14px; height: 14px; }
.mock__name { color: #e9edf5; font-weight: 700; }
.mock__hint { margin-left: auto; color: #5f6879; }

.mock__body { display: grid; grid-template-columns: 92px minmax(0, 1fr); }

.mock__side {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 7px;
    background: rgba(0, 0, 0, .25);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.mock__side span { padding: 5px 9px; color: #5f6879; border-radius: 6px; }
.mock__side .is-active { color: #fff; background: rgba(91, 140, 255, .18); }

.mock__content-wrap { padding: 10px; display: flex; flex-direction: column; gap: 9px; }

.mock__subtabs { display: flex; gap: 4px; }
.mock__subtab {
    flex: 1;
    text-align: center;
    padding: 5px 0;
    color: #5f6879;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 6px;
}
.mock__subtab.is-active { color: #fff; background: rgba(91, 140, 255, .2); border-color: rgba(91, 140, 255, .35); }

.mock__content { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.panel--mock {
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 9px;
    padding-bottom: 10px;
    box-shadow: none;
}
.panel--mock .panel__head {
    padding: 7px 10px;
    font-size: 11px;
    color: #e9edf5;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.panel--mock > *:not(.panel__head) { margin: 0 10px; }

.mock__row { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #9aa4bb; }
.mock__row em { margin-left: auto; font-style: normal; color: #5f6879; }

.chk {
    width: 11px; height: 11px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
}
.chk.is-on { background: var(--accent); border-color: transparent; box-shadow: 0 0 10px rgba(91, 140, 255, .5); }

.mock__label { padding-top: 7px; color: #5f6879; }

.mock__slider {
    position: relative;
    height: 16px;
    background: rgba(0, 0, 0, .45);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.mock__slider span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4a7bf0, #7ea3ff); }
.mock__slider b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 400; }

.mock__combo {
    position: relative;
    padding: 5px 10px;
    color: #c8cfdd;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 7px;
}
.mock__combo i {
    position: absolute; right: 9px; top: 50%;
    width: 5px; height: 5px; margin-top: -4px;
    border-right: 1.4px solid #5f6879;
    border-bottom: 1.4px solid #5f6879;
    transform: rotate(45deg);
}

.mock__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px;
    color: #5f6879;
    background: rgba(0, 0, 0, .3);
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.mock__footer .dot { width: 6px; height: 6px; box-shadow: none; margin-right: 5px; }
.mock__footer b { color: var(--accent); font-weight: 500; }

/* =============================== sections ============================ */

.section { padding: 96px 0; }
.section--alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section__head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.section__head h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -.045em;
}
.section__head h2::after {
    content: "";
    display: block;
    width: 34px; height: 2px;
    margin: 14px auto 0;
    background: var(--accent);
}
.section__head p { margin: 12px 0 0; color: var(--text-dim); font-size: 14.5px; }

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

/* Five cards, two full rows. Without this the last row is two cards and a gap. */
.grid--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
.grid--bento > * { grid-column: span 2; }
.grid--bento > *:nth-child(4),
.grid--bento > *:nth-child(5) { grid-column: span 3; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ============================== cards ================================ */

.card-bento,
.panel,
.card-pricing,
.faq-card,
.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge-light);
}

.card-bento {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
    padding: 26px 26px 28px;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.card-bento .card-icon-wrap { grid-area: 1 / 1; align-self: center; margin-bottom: 0; }
.card-bento .card-title     { grid-area: 1 / 2; align-self: center; margin-bottom: 0; }
.card-bento .card-desc      { grid-area: 2 / 1 / auto / -1; margin-top: 14px; }
.card-bento .list           { grid-area: 3 / 1 / auto / -1; }
.card-bento:hover { border-color: var(--line-strong); }
.card-bento:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-card); transform: translateY(-3px); }

.card-icon-wrap {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    margin-bottom: 18px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
}

.card-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 7px; }
.card-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-faint); margin: 0; }

.list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.list li {
    position: relative;
    padding: 11px 0 11px 22px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim);
    border-top: 1px solid var(--line);
}
.list li:first-child { border-top: 0; padding-top: 4px; }
.list li:first-child::before { top: 12px; }
.list li:last-child { padding-bottom: 0; }
.list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 19px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(140, 152, 255, .5);
}

/* generic panel (dashboard + popups) --------------------------------- */

.panel { overflow: hidden; box-shadow: var(--shadow-card); }
.panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text);
    background: rgba(255, 255, 255, .022);
    border-bottom: 1px solid var(--line);
}
.panel__head > .pill,
.panel__head > .panel__head-right { margin-left: auto; }
.panel__head .svg-icon:first-child {
    box-sizing: content-box;
    width: 14px; height: 14px;
    padding: 6px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(140, 152, 255, .22);
    border-radius: var(--r-sm);
}
.panel__body { padding: 20px; }
.panel__body--flush { padding: 0; }

/* ============================== gallery ============================== */

.marquee {
    position: relative;
    margin-top: 42px;
    padding: 8px 0 12px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 14px 0;
    animation: roll var(--roll-duration, 46s) linear infinite;
}
/* Pausing on hover helps someone reading a screenshot. A clip is already
   moving, so stopping the strip over one just feels broken - :has lets the
   pause skip them. Without :has support the strip simply never pauses,
   which is the harmless way to fail. */
.marquee__track:has(.shot:hover:not(.shot--video)) { animation-play-state: paused; }
@keyframes roll {
    from { transform: translateX(calc(var(--roll-distance, 50%) * -1)); }
    to { transform: translateX(0); }
}

.shot {
    flex: 0 0 auto;
    width: 300px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--edge-light);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color .2s ease, transform .2s ease;
}
.shot:hover { box-shadow: inset 0 0 0 1px var(--accent-line); transform: translateY(-4px); }
.shot img { display: block; width: 100%; height: 168px; object-fit: cover; object-position: center; }
/* A UI capture is taller than the tile and centring it crops the two things that identify
   it - the tab header at the top and the account row at the bottom. Anchoring to the top
   keeps the header and the first rows of cards, which is the half worth showing. */
.shot--ui img { object-position: center top; }

/* a clip tile: the same frame as a screenshot, but completely inert */
.shot--video { cursor: default; }
.shot--video:hover { transform: none; box-shadow: inset 0 1px 0 var(--edge-light); }
.shot--video video {
    display: block;
    width: 100%;
    height: 168px;
    object-fit: cover;
    pointer-events: none;      /* no scrubbing, no context menu, no focus */
}
.shot figcaption {
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-dim);
    border-top: 1px solid var(--line);
}

/* lightbox ------------------------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(8, 8, 10, .82);
    backdrop-filter: blur(8px);
    animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__frame {
    max-width: min(1120px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-pop);
}
.lightbox__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}
.lightbox__bar button {
    height: 32px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
}
.lightbox__bar button:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.lightbox img { display: block; max-width: 100%; max-height: 74vh; }

/* =============================== table =============================== */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--edge-light);
    border-radius: var(--r-md);
    /* scroll, do not clip: overflow:hidden silently cut columns off the
       right of wide tables with no way to reach them */
    overflow-x: auto;
    overflow-y: hidden;
}
.table-wrap table { min-width: 360px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 14px 16px; text-align: left; }
/* A key is the one cell that can run long; let it shorten rather than push the table wide. */
.table td:first-child { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table th {
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
    background: rgba(255, 255, 255, .022);
    border-bottom: 1px solid var(--line);
}
.table td { color: var(--text-dim); border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .16s ease; }
.table tbody tr:hover td { background: rgba(255, 255, 255, .025); }

/* ============================== pricing ============================== */

.card-pricing {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px;
    transition: border-color .2s ease, transform .2s ease;
}
.card-pricing:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-card); transform: translateY(-3px); }

/* The recommendation sits in the middle and stands a little proud of the two beside it.
   Grown with padding and type rather than transform: scaling a card resamples its text. */
.card-pricing--featured {
    margin: -14px 0;
    padding: 40px 32px;
    background:
        linear-gradient(180deg, rgba(140, 152, 255, .10), transparent 46%),
        var(--surface);
    border-color: var(--accent-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 24px 56px rgba(140, 152, 255, .16);
}
.card-pricing--featured .pricing-title { font-size: 20px; }
.card-pricing--featured .pricing-amount b { font-size: 50px; }

/* Small print that used to sit in a framed callout. */
.compat-note {
    max-width: 76ch;
    margin: 18px auto 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-faint);
    text-align: center;
}
.compat-note a { color: var(--accent); }
.compat-note a:hover { color: var(--accent-hover); }

.badge-featured {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: #0b0d16;
    background: var(--accent);
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.pricing-title { font-size: 18px; font-weight: 700; }
.pricing-subtitle { margin: 6px 0 0; font-size: 13px; color: var(--text-faint); }

.pricing-amount { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; }
.pricing-amount b { font-size: 42px; font-weight: 800; color: var(--text); letter-spacing: -.05em; }
.pricing-amount span { font-size: 13px; color: var(--text-faint); }

.pricing-features { list-style: none; margin: 22px 0 26px; padding: 20px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-dim); }
.pricing-features .svg-icon { color: var(--accent); margin-top: 3px; }
.card-pricing .btn { margin-top: auto; }

/* ===================== private license upsell ======================== */

.upsell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 260px;
    gap: 26px;
    align-items: center;
    padding: 30px;
    background:
        linear-gradient(135deg, rgba(140, 152, 255, .1), transparent 46%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--accent-line), 0 20px 48px rgba(140, 152, 255, .1);
}

.upsell__icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(140, 152, 255, .3);
    border-radius: var(--r-sm);
}

.upsell__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.upsell__head h3 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.upsell__body p { max-width: 68ch; margin: 0 0 14px; font-size: 13.5px; color: var(--text-dim); }

.upsell__list { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.upsell__list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); }
.upsell__list .svg-icon { color: var(--accent); }

.upsell__action { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.upsell__price { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.upsell__price b { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.04em; }
.upsell__price span { font-size: 11.5px; color: var(--text-faint); }
.upsell__redeem { justify-content: center; font-size: 11.5px; }

.pill--accent { color: var(--accent); background: var(--accent-soft); border-color: rgba(140, 152, 255, .3); }

@media (max-width: 900px) {
    .upsell { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .upsell__action { align-items: stretch; }
}

/* ================================= faq =============================== */

.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

.faq-card { padding: 4px 22px; transition: border-color .2s ease; }
.faq-card[open] { box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.faq-card summary {
    position: relative;
    padding: 18px 34px 18px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after {
    content: "";
    position: absolute;
    right: 6px; top: 24px;
    width: 8px; height: 8px;
    border-right: 1.8px solid var(--text-faint);
    border-bottom: 1.8px solid var(--text-faint);
    transform: rotate(45deg);
    transition: transform .2s ease, border-color .2s ease;
}
.faq-card[open] summary::after { transform: rotate(-135deg); border-color: var(--accent); top: 27px; }
.faq-body { padding: 0 0 20px; font-size: 13.5px; color: var(--text-dim); }
.faq-body a { color: var(--accent); }

/* =============================== footer ============================== */

.footer { border-top: 1px solid var(--line); background: var(--bg-soft); }
.footer__inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 76px;
    padding: 18px 0;
    font-size: 12.5px;
    color: var(--text-faint);
    flex-wrap: wrap;
    gap: 10px;
}
.footer__left { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; }
.footer__left img { width: 18px; height: 18px; }
.footer__dim { color: var(--text-faint); }
.footer__accent { color: var(--accent); }

/* ============================= auth pages ============================ */

.auth-wrapper { min-height: 100vh; display: flex; flex-direction: column; }

.auth-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 150px 22px 70px;
    position: relative;
}
.auth-content::before {
    content: "";
    position: absolute;
    top: 60px; left: 50%;
    width: 720px; height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(140, 152, 255, .16), transparent);
    pointer-events: none;
}

.auth-card {
    position: relative;
    width: min(460px, 100%);
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-pop);
    animation: riseIn .25s ease;
}
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.auth-card__header { text-align: center; margin-bottom: 22px; }
.auth-card__brand {
    width: 54px; height: 54px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
}
.auth-card__logo { width: 28px; height: 28px; }
.auth-card__title { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.auth-card__subtitle { margin: 8px 0 0; font-size: 13.5px; color: var(--text-dim); }

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.auth-tab {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
    border-radius: var(--r-sm);
    transition: background .16s ease, color .16s ease;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.is-active {
    color: #0b0d16;
    background: var(--accent);
    font-weight: 600;
}

.auth-form { display: block; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }

.label-with-action { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.label-with-action label { margin-bottom: 0; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 14px; color: var(--text-faint); pointer-events: none; transition: color .16s ease; }
.input-wrap input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 40px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.input-wrap input::placeholder { color: var(--text-faint); }
.input-wrap input:hover { border-color: var(--line-strong); }
.input-wrap input:focus {
    outline: none;
    background: #070a11;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(140, 152, 255, .14);
}
.input-wrap:focus-within .input-icon { color: var(--accent); }
.input-wrap > input:first-child { padding-left: 14px; }

.form-action { margin-top: 22px; }
.form-footer-hint { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--text-faint); }
.form-footer-hint a { color: var(--accent); font-weight: 500; }
.form-hint { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }

.auth-trust-strip {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.auth-trust-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--text-faint);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.auth-trust-item .svg-icon { color: var(--accent); }

/* the auth pages reuse the fixed nav, so it must not float over content */
.auth-wrapper .titlebar { position: fixed; }

/* ============================== dashboard ============================ */
/* the panel reuses the marketing components - same chrome, same rhythm.
   only the page frame and the chat surface are specific to it. */

.dash { padding: 148px 0 90px; }

.dash-header {
    padding-bottom: 24px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
}
.dash-header h1 {
    position: relative;
    padding-bottom: 12px;
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 700;
    letter-spacing: -.045em;
}
.dash-header h1::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 32px; height: 2px;
    background: var(--accent);
}
.dash-header p { margin: 10px 0 0; font-size: 14px; color: var(--text-dim); }
/* nav tabs double as the view switcher */
.dash-nav-item { font-family: inherit; background: transparent; cursor: pointer; }
.nav-tag {
    margin-left: 7px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--no);
    background: rgba(214, 85, 95, .14);
    border: 1px solid rgba(214, 85, 95, .3);
    border-radius: var(--r-sm);
}

.dash-view { display: none; }
.dash-view.is-active { display: flex; flex-direction: column; gap: 18px; animation: fade .22s ease; }

.dash-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* stat cards ---------------------------------------------------------- */

.stat-card {
    position: relative;
    padding: 20px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.stat-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 72%);
    opacity: .6;
}
.stat-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10); transform: translateY(-2px); }
.stat-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
}
.stat-card-head .svg-icon {
    box-sizing: content-box;
    width: 14px; height: 14px;
    padding: 6px;
    color: var(--accent);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.stat-card-value { font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -.04em; line-height: 1.15; }
.stat-card-note { font-size: 12px; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.stat-card-sub { margin-top: 6px; font-size: 12px; color: var(--text-faint); }

/* small build / licence cards ----------------------------------------- */

.mini-card {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge-light);
    transition: box-shadow .2s ease, transform .2s ease;
}
.mini-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10); transform: translateY(-2px); }
.mini-card--accent { box-shadow: inset 0 0 0 1px var(--accent-line); }
.mini-card--accent:hover { box-shadow: inset 0 0 0 1px var(--accent-line), 0 14px 32px rgba(140, 152, 255, .12); }
.mini-card__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
}
.mini-card__head .svg-icon { color: var(--accent); }
.mini-card__value {
    display: flex; align-items: center; gap: 9px;
    font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.02em;
}
.mini-card p { margin: 8px 0 0; font-size: 12px; color: var(--text-faint); }
.mini-card .link-btn { margin-top: 10px; font-size: 11.5px; }

/* feed + quick actions ------------------------------------------------- */

.feed-item + .feed-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.feed-date { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-faint); }
.feed-title { margin: 10px 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.feed-item p { margin: 0; font-size: 13px; color: var(--text-dim); }

.quick-action-card {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
    padding: 14px;
    font-family: inherit;
    text-align: left;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.quick-action-card + .quick-action-card { margin-top: 12px; }
.quick-action-card:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateX(3px); }
.quick-action-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(140, 152, 255, .22);
    border-radius: var(--r-sm);
    flex: 0 0 auto;
}
.quick-action-text { flex: 1; display: flex; flex-direction: column; }
.quick-action-text b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.quick-action-text span { font-size: 12px; color: var(--text-faint); }
.quick-action-arrow { color: var(--text-faint); transition: color .18s ease, transform .18s ease; }
.quick-action-card:hover .quick-action-arrow { color: var(--accent); transform: translateX(3px); }

/* downloads ------------------------------------------------------------ */

.gate {
    display: flex; align-items: center; gap: 26px;
    padding: 32px;
    background:
        linear-gradient(135deg, rgba(88, 101, 242, .12), transparent 48%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .35);
}
.gate__icon {
    width: 74px; height: 74px;
    display: grid; place-items: center;
    color: #fff;
    background: var(--blurple);
    border-radius: var(--r-md);
    flex: 0 0 auto;
}
.gate__body h3 { font-size: 20px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 8px; }
.gate__body p { max-width: 64ch; margin: 0 0 18px; font-size: 13.5px; color: var(--text-dim); }

.download-box {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    flex-wrap: wrap;
    padding: 20px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.download-box__info { display: flex; align-items: center; gap: 16px; }
.download-box__logo { width: 42px; height: 42px; }
.download-box__info h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.download-box__info p { margin: 5px 0 0; font-size: 12.5px; color: var(--text-faint); }
.download-box__action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.download-box__hash { font-size: 11.5px; color: var(--text-faint); }

.setup-step {
    padding: 18px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.setup-num {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    margin-bottom: 12px;
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(140, 152, 255, .25);
    border-radius: var(--r-sm);
}
.setup-step b { display: block; margin-bottom: 5px; font-size: 13.5px; }
.setup-step p { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* chat ----------------------------------------------------------------- */

.chat-shell { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 18px; height: 560px; }

.chat-main, .chat-side {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge-light);
    overflow: hidden;
}

.chat-main__head, .chat-side__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .022);
    border-bottom: 1px solid var(--line);
}
.chat-main__title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); }
.chat-main__title .svg-icon { color: var(--accent); }
.chat-side__head {
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint);
    justify-content: flex-start;
}
.chat-side__head .svg-icon { color: var(--accent); }

.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }

.chat-msg-row { display: flex; gap: 12px; }
.chat-msg-avatar {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    flex: 0 0 auto;
}
.chat-msg-content { flex: 1; min-width: 0; }
.chat-msg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.chat-msg-user { font-size: 13px; font-weight: 600; color: var(--text); }
.chat-msg-time { font-size: 11px; color: var(--text-faint); }
.chat-msg-text { font-size: 13px; color: var(--text-dim); word-break: break-word; }

.chat-badge-tag {
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--r-sm);
    color: var(--text-faint);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
}
.chat-badge--lifetime { color: var(--accent); background: var(--accent-soft); border-color: rgba(140, 152, 255, .3); }
.chat-badge--vip { color: var(--gold); background: rgba(245, 181, 63, .12); border-color: rgba(245, 181, 63, .3); }
.chat-badge--staff { color: var(--blurple); background: rgba(88, 101, 242, .16); border-color: rgba(88, 101, 242, .4); }
.chat-badge--you { color: var(--ok); background: rgba(77, 219, 127, .12); border-color: rgba(77, 219, 127, .3); }

.chat-composer { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.chat-composer input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.chat-composer input::placeholder { color: var(--text-faint); }
.chat-composer input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140, 152, 255, .14); }

.chat-side__list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.chat-user-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-dim);
    border-radius: var(--r-sm);
}
.chat-user-item:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.chat-user-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }

/* account -------------------------------------------------------------- */

.profile { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile__avatar {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    color: #fff;
    background: var(--blurple);
    border-radius: var(--r-md);
}
.profile__text h3 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.profile__text p { margin: 4px 0 8px; font-size: 13px; color: var(--text-faint); }

.detail-list { margin: 0; padding: 0; }
.detail-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row dt { font-size: 12.5px; color: var(--text-faint); }
.detail-row dd { margin: 0; font-size: 13px; color: var(--text-dim); }

.link-box {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px;
    background: rgba(88, 101, 242, .08);
    border: 1px solid rgba(88, 101, 242, .28);
    border-radius: var(--r-sm);
}
.link-box__left { display: flex; align-items: center; gap: 13px; }
.link-box__left b { font-size: 13.5px; }
.link-box__left p { margin: 2px 0 0; font-size: 12px; color: var(--text-faint); }
.link-box__icon {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    color: #fff;
    background: var(--blurple);
    border-radius: var(--r-sm);
}

.key-box label { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
.key-box__row { display: flex; gap: 10px; }
.key-box__row input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--accent);
    background: rgba(140, 152, 255, .07);
    border: 1px solid rgba(140, 152, 255, .22);
    border-radius: var(--r-sm);
}
.key-box__row input:focus { outline: none; border-color: var(--accent); }

/* modal ---------------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 6, 10, .8);
    backdrop-filter: blur(8px);
    animation: fade .2s ease;
}
.modal {
    width: min(440px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-pop);
    overflow: hidden;
    animation: riseIn .24s ease;
}
.modal__head {
    padding: 26px 26px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(88, 101, 242, .14), transparent);
    border-bottom: 1px solid var(--line);
}
.modal__icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    margin: 0 auto 14px;
    color: #fff;
    background: var(--blurple);
    border-radius: var(--r-sm);
}
.modal__head h3 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.modal__head p { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }
.modal__body { padding: 22px 26px 26px; }
.modal__perms { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.modal__perms li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); }

/* toasts ---------------------------------------------------------------- */

.toast-container {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast-item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge-light), var(--shadow-pop);
    animation: toastIn .24s ease;
}
.toast-item .svg-icon { color: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ===================== admin + checkout components =================== */

/* selects match the input styling */
.select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                      linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
    background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(140, 152, 255, .14); }

.form-optional { color: var(--text-faint); font-weight: 400; font-size: 11px; }
.form-hint.is-error, .checkout-note.is-error { color: var(--no); }

/* generated batch output */
.gen-output {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.gen-output__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--line);
}
.gen-output pre {
    margin: 0;
    padding: 14px;
    max-height: 210px;
    overflow: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--accent);
}

/* table extras */
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }

.table-wrap--flush { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.cell-dim { color: var(--text-faint); }
.cell-actions { text-align: right; white-space: nowrap; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    margin-left: 4px;
    color: var(--text-faint);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.icon-btn--danger:hover { color: var(--no); border-color: rgba(214, 85, 95, .45); background: rgba(214, 85, 95, .12); }

.mini-search {
    height: 32px;
    width: 220px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.mini-search:focus { outline: none; border-color: var(--accent); }

.empty-note { padding: 26px 20px; margin: 0; text-align: center; font-size: 13px; color: var(--text-faint); }

.pill--bad { color: var(--no); background: rgba(214, 85, 95, .12); border-color: rgba(214, 85, 95, .3); }

.btn.danger { color: var(--no); }
.btn.danger:hover { box-shadow: inset 0 0 0 1px rgba(214, 85, 95, .5); }

/* a callout used for the honest caveats */
.notice {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(245, 181, 63, .07);
    border: 1px solid rgba(245, 181, 63, .28);
    border-radius: var(--r-sm);
}
.notice .svg-icon { color: var(--gold); margin-top: 3px; }
.notice b { display: block; font-size: 13px; margin-bottom: 3px; }
.notice p { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* checkout */
.checkout-total {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 18px;
    background: rgba(140, 152, 255, .07);
    border: 1px solid rgba(140, 152, 255, .22);
    border-radius: var(--r-sm);
}
.checkout-total__label { font-size: 12.5px; color: var(--text-dim); }
.checkout-total__value { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.04em; }

.checkout-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-faint); }

.checkout-order { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line); }
.checkout-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.checkout-actions .btn { flex: 1; }

.checkout-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.checkout-steps li { display: flex; gap: 14px; }
.checkout-steps b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.checkout-steps p { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* the $5 test row under pricing */
.test-purchase {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
}
.test-purchase__text b { display: block; font-size: 14px; margin-bottom: 3px; }
.test-purchase__text p { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* ============================== responsive ============================= */

@media (max-width: 720px) {
    .mini-search { width: 140px; }
    .checkout-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 1080px) {
    .hero { padding: 140px 0 72px; }
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav { display: none; }
    .dash-split, .chat-shell { grid-template-columns: minmax(0, 1fr); }
    .chat-shell { height: auto; }
    .chat-log { min-height: 320px; }
}

@media (max-width: 720px) {
    .wrap { width: calc(100% - 28px); }
    .section { padding: 68px 0; }
    .grid--2, .grid--3, .grid--4, .faq-grid, .setup-steps-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
    .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shot { width: 232px; }
    .shot img, .shot--video video { height: 130px; }
    .mock__content { grid-template-columns: minmax(0, 1fr); }
    .titlebar { top: 10px; }
    .titlebar__inner { height: 54px; padding: 0 8px 0 14px; }
    .dash { padding: 120px 0 70px; }
    .gate { flex-direction: column; text-align: center; }
    .download-box { flex-direction: column; align-items: stretch; }
    .download-box__action { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track, .mock, .badge-dot, .hero__frame { animation: none; }
    html { scroll-behavior: auto; }
    /* the hero tilt is driven by the pointer, so it keeps its easing */
    *:not(.hero__frame) { transition-duration: .01ms !important; }
}

/* ===================== auth: discord + divider ======================= */

.label-actions { display: inline-flex; align-items: center; gap: 12px; }

.auth-divider {
    position: relative;
    margin: 16px 0;
    text-align: center;
}
.auth-divider::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--line);
}
.auth-divider span {
    position: relative;
    padding: 0 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
    background: var(--surface);
}

.btn--discord {
    color: #fff;
    background: linear-gradient(180deg, #5f6cf5, #4752c4);
    border-color: var(--line);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.btn--discord:hover {
    background: linear-gradient(180deg, #6f7bf7, #5560d4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 8px 24px rgba(88, 101, 242, .3);
}

/* the real discord avatar, once a session exists */
.nav-user-avatar-img {
    width: 26px; height: 26px;
    /* round, to match the fallback badge it replaces */
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

/* an "optional" tag next to a field label */
.label-optional {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

/* table rows that carry buttons, and a real discord avatar ------------ */

.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.row-actions .btn { white-space: nowrap; }

.profile__avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* dashboard view switcher ---------------------------------------------
   its own row rather than the header nav: that nav is hidden below
   1080px, which would leave the dashboard with no way to change view. */

.dash-tabs {
    display: flex;
    gap: 4px;
    margin: -12px 0 26px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }

.dash-tab {
    position: relative;
    flex: 0 0 auto;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.dash-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .035);
    border-color: var(--line);
}
.dash-tab.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--line);
}
.dash-tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -3px;
    height: 2px;
    background: var(--accent);
}

/* keeps the brand left and the account controls right once the marketing
   nav is gone */
.titlebar__spacer { flex: 1 1 auto; }

/* release notes, shown with the build they describe ------------------- */

.release-notes {
    padding: 16px 18px;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.release-notes b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.release-notes p { margin: 8px 0 0; font-size: 14px; color: var(--text); }

/* narrow screens: the header keeps the controls but drops their labels,
   which is what used to push the title bar past the viewport ---------- */

.btn__label { display: inline; }

@media (max-width: 720px) {
    .titlebar__inner { gap: 6px; }
    .titlebar__right { gap: 6px; }
    .titlebar__right .btn__label { display: none; }
    .titlebar__right .btn--sm { padding: 0 10px; }
    .nav-user-badge { padding: 0 8px; gap: 0; }
    .dash-tabs { margin: -6px 0 22px; }
}

/* multi-line inputs and inline checkboxes, for the plan editor -------- */

.textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    resize: vertical;
}
.textarea:focus { outline: none; border-color: var(--accent); }

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
}
.check input { width: 15px; height: 15px; accent-color: var(--accent); }

/* switching plan without leaving checkout ----------------------------- */

.checkout-switch { display: flex; flex-wrap: wrap; gap: 10px; }
.checkout-switch__item {
    flex: 1 1 160px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .16s ease, background .16s ease;
}
.checkout-switch__item:hover { border-color: var(--accent); background: var(--accent-soft); }
.checkout-switch__item b { display: block; font-size: 14px; color: var(--text); }
.checkout-switch__item span { font-size: 13px; color: var(--text-dim); }

/* a notice that wants acting on, and the captcha widget --------------- */

.notice--warn {
    align-items: center;
    margin-bottom: 18px;
    border-color: rgba(230, 170, 70, .35);
    background: rgba(230, 170, 70, .07);
}
.notice--warn .svg-icon { color: #e6aa46; }
.notice--warn .btn { flex: 0 0 auto; margin-left: auto; }

.captcha-slot { display: flex; justify-content: center; }
/* the widget is a fixed 302px iframe; let it shrink rather than overflow */
.captcha-slot > div, #loginCaptchaSlot > div { max-width: 100%; }
#loginCaptchaSlot { display: flex; justify-content: center; margin-bottom: 18px; }

/* ============================== checkout ============================= */
/* the stepper mirrors real order state, so it needs a look for each of
   the three: still to come, happening now, and done. */

.stepper {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: -12px 0 26px;
    padding: 0;
}
.stepper__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .2s ease, background .2s ease;
}
.stepper__dot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-faint);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 50%;
}
.stepper__text b { display: block; font-size: 13px; color: var(--text-dim); }
.stepper__text span { font-size: 12px; color: var(--text-faint); }

.stepper__item.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.stepper__item.is-active .stepper__dot {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.stepper__item.is-active .stepper__text b { color: var(--text); }

.stepper__item.is-done .stepper__dot {
    color: var(--ok);
    border-color: var(--ok);
    background: transparent;
}
.stepper__item.is-done .stepper__text b { color: var(--text-dim); }

/* order summary rows ---------------------------------------------------- */

.summary { margin: 0; }
.summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.summary__row:last-child { border-bottom: 0; }
.summary__row dt { font-size: 13px; color: var(--text-faint); }
.summary__row dd { margin: 0; font-size: 13.5px; color: var(--text); text-align: right; }

.summary__row--total { padding-top: 16px; }
.summary__row--total dt { font-size: 14px; color: var(--text-dim); }
.summary__row--total dd {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--text);
}

.pay-methods {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-faint);
}
.pay-methods .svg-icon { flex: 0 0 auto; margin-top: 2px; }

/* waiting on the gateway ------------------------------------------------ */

.waiting {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.waiting b { display: block; font-size: 14px; color: var(--text); }
.waiting p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-faint); }

.waiting__pulse {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    background: var(--accent);
    border-radius: 50%;
    animation: waiting-pulse 1.6s ease-in-out infinite;
}
@keyframes waiting-pulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(140, 152, 255, .45); }
    50%      { opacity: .5; box-shadow: 0 0 0 8px rgba(140, 152, 255, 0); }
}

/* the moment it all pays off ------------------------------------------- */

.key-reveal {
    padding: 22px 18px;
    text-align: center;
    /* plain values first: a browser without color-mix keeps the look */
    background: rgba(77, 219, 127, .08);
    border: 1px solid rgba(77, 219, 127, .32);
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
    border-radius: var(--r-sm);
}
.key-reveal__icon { color: var(--ok); }
.key-reveal b {
    display: block;
    margin-top: 8px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}
.key-reveal p { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }

/* switching plan without leaving the page ------------------------------- */

.plan-switch { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-switch__item {
    flex: 1 1 150px;
    padding: 15px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .16s ease, background .16s ease;
}
.plan-switch__item:hover { border-color: var(--accent); background: var(--accent-soft); }
.plan-switch__name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.plan-switch__price {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--accent);
}
.plan-switch__note { font-size: 12px; color: var(--text-faint); }

@media (max-width: 720px) {
    /* three steps side by side stop being readable long before this */
    .stepper { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .stepper__item { padding: 11px 14px; }
}

/* ========================= payment method picker ===================== */
/* A dropdown rather than a dozen tiles: twelve methods laid out flat
   would dominate a page whose real subject is the order. Closed it is one
   row; open it is a short scrollable list with the groups kept. */

.picker { position: relative; }

.picker__trigger {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    text-align: left;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}
.picker__trigger:hover { border-color: var(--line-strong); }
.picker.is-open .picker__trigger { border-color: var(--accent); }

.picker__icon { flex: 0 0 auto; color: var(--accent); }
.picker__label { flex: 1 1 auto; font-weight: 600; }
.picker__tag { flex: 0 0 auto; }

.picker__caret {
    flex: 0 0 auto;
    color: var(--text-faint);
    transition: transform .18s ease;
}
.picker.is-open .picker__caret { transform: rotate(180deg); }

.picker__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    animation: picker-in .14s ease;
}
@keyframes picker-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.picker__group {
    padding: 9px 10px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.picker__option {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    font-family: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .14s ease;
}
.picker__option:hover { background: rgba(255, 255, 255, .04); }
.picker__option.is-selected { background: var(--accent-soft); }

.picker__option .picker__icon { color: var(--text-dim); }
.picker__option.is-selected .picker__icon { color: var(--accent); }

.picker__option-text { flex: 1 1 auto; min-width: 0; }
.picker__option-text b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}
.picker__option-text span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-faint);
}

.picker__check { flex: 0 0 auto; color: var(--accent); opacity: 0; }
.picker__option.is-selected .picker__check { opacity: 1; }

/* the extra hop a voucher method adds ---------------------------------- */

.voucher-step {
    display: flex;
    gap: 13px;
    padding: 15px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.voucher-step__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 50%;
}
.voucher-step__body b { display: block; font-size: 13.5px; color: var(--text); }
.voucher-step__body p { margin: 4px 0 12px; font-size: 12.5px; color: var(--text-faint); }

/* a voucher code is the thing being judged, so it gets read, not skimmed */
.voucher-code {
    font-size: 13px;
    letter-spacing: .04em;
    word-break: break-all;
}

/* the one action on the voucher page, before a code can exist --------- */

.buy-step {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
}
.buy-step__text { flex: 1 1 220px; }
.buy-step__text b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
}
.buy-step__text p { margin: 5px 0 0; font-size: 13px; color: var(--text-dim); }
.buy-step .btn { flex: 0 0 auto; }

@media (max-width: 720px) {
    .buy-step .btn { width: 100%; justify-content: center; }
}

/* several codes can cover one order, so they stack rather than run on --- */

.voucher-codes { display: flex; flex-direction: column; gap: 4px; }
.voucher-codes .voucher-code {
    display: block;
    padding: 3px 7px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

/* the repeatable code inputs on the voucher page */
.code-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 9px; }
.code-row .input-wrap { flex: 1 1 auto; }
.code-row__drop {
    flex: 0 0 auto;
    width: 38px; height: 42px;
    display: grid; place-items: center;
    color: var(--text-faint);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.code-row__drop:hover { color: var(--no); border-color: var(--no); }

   /* swipe is the gesture here */
}