/* HQ Provider theme.
   Generated by _build.py from assets/css/ — edit those, not this.
   Loads after bootstrap.css so our rules win on .table/.btn/.alert. */

/* ===== base.css ===== */
/* ============================================================
   HQ PROVIDER — BASE
   Tokens, reset, typography, buttons, section headings and the
   shared decorative layer. Loaded by every page.
   ============================================================ */

:root {
    /* Brand */
    --red:            #e01b22;
    --red-dark:       #b3151b;
    --red-deep:       #7a0d10;
    --red-soft:       rgba(224, 27, 34, .12);

    /* Neutrals — dark */
    --black:          #0b0b0b;
    --black-soft:     #141414;
    --black-card:     #0f0f0f;
    --hairline:       #262626;
    --hairline-red:   #3a1010;

    /* Neutrals — light */
    --white:          #ffffff;
    --gray-bg:        #f3f4f6;
    --gray-line:      #e5e7eb;

    /* Text */
    --text-dark:      #1a1a1a;
    --text-muted:     #6b7280;
    --text-dim:       #9a9a9a;

    /* Type */
    --font-head:      'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Radii */
    --r-sm:           8px;
    --r-md:           8px;
    --r-lg:           12px;
    --r-pill:         999px;

    /* Elevation */
    --sh-sm:          0 4px 14px rgba(0, 0, 0, .06);
    --sh-md:          0 8px 26px rgba(0, 0, 0, .08);
    --sh-lg:          0 16px 40px rgba(0, 0, 0, .12);

    /* Layout */
    --nav-h:          78px;
    --sidebar-w:      264px;
    --ease:           cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Bootstrap 3 ships `html { font-size: 10px }` and per-element margins on
   headings, paragraphs and lists. Element selectors outrank the `*` reset
   above, so each one has to be restated explicitly or every section on the
   page grows. This block only matters when bootstrap.css is also loaded,
   which is the case on the live panel. */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6,
p, blockquote, figure, dl, dd,
ul, ol, pre, fieldset, legend, hr,
/* `form` is here because the panel's bootstrap.css carries
   `.api h4, h5, h6, form { margin-bottom: 10px }` -- the `.api` prefix only
   binds to `h4`, so `form`, `h5` and `h6` are left unscoped and every form on
   the panel picks up that margin. */
form {
    margin: 0;
    padding: 0;
}

/* bootstrap.css: `label { display: inline-block; max-width: 100%;
   margin-bottom: 5px }`. Every label in this theme sets its own box, so the
   inherited bottom margin only ever shows up as unexplained slack. */
label {
    margin-bottom: 0;
    max-width: none;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--black);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    /* bootstrap.css carries a `body { padding-bottom: 50px }` rule. */
    padding-bottom: 0;
}

img,
svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

/* Visible focus for keyboard users only, so mouse clicks stay clean. */
:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   TYPOGRAPHY
   The design's headings are heavy condensed italic uppercase.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.heading {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .5px;
}

/* Opt back out of the italic/uppercase treatment where the design
   uses a plain-cased heading (card titles, testimonial names). */
.heading-plain {
    font-family: var(--font-body);
    font-style: normal;
    text-transform: none;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

p { line-height: 1.65; }

/* ============================================================
   LAYOUT + UTILITIES
   ============================================================ */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-red   { color: var(--red); }
.text-white { color: var(--white); }
.text-ink   { color: #111; }

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

/* ============================================================
   SECTIONS
   ============================================================ */

.section {
    position: relative;
    padding: 84px 0;
    overflow: hidden; /* contains the decorative layers */
}

.section-white { background: var(--white); }
.section-gray  { background: var(--gray-bg); }
.section-black { background: var(--black); color: var(--white); }

/* Textured light and dark bands recreate the angular comic-style
   framing from the supplied landing-page artwork without soft clouds. */
.section-light-art {
    color: var(--text-dark);
    background:
        linear-gradient(rgba(17, 17, 17, .017) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, .017) 1px, transparent 1px),
        #f7f7f4;
    background-size: 52px 52px, 52px 52px, auto;
}

.section-light-art::before,
.section-light-art::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.section-light-art::before {
    inset: -8% -4%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700'%3E%3Cg fill='none'%3E%3Cpath d='M-120 510 C230 180 500 760 870 410 S1380 130 1740 390' stroke='%23e01b22' stroke-opacity='.105' stroke-width='2'/%3E%3Cpath d='M-80 570 C280 260 520 690 910 455 S1390 225 1690 315' stroke='%23111111' stroke-opacity='.045' stroke-width='1.5'/%3E%3Cpath d='M-160 440 C180 120 490 650 820 350 S1320 60 1750 300' stroke='%23e01b22' stroke-opacity='.055' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .9;
}

.section-light-art::after {
    inset: 0;
    background: linear-gradient(118deg,
        rgba(224, 27, 34, .026),
        transparent 24%,
        transparent 74%,
        rgba(224, 27, 34, .032));
}

.art-flow-left::before { transform: scaleX(-1); }
.art-flow-center::before { transform: scaleY(-1); }

.section-light-art .deco-halftone {
    opacity: .42;
}

.section-dark-art {
    background:
        radial-gradient(circle at 11% 16%, rgba(224, 27, 34, .11), transparent 24%),
        radial-gradient(circle at 88% 84%, rgba(224, 27, 34, .08), transparent 25%),
        repeating-linear-gradient(-24deg,
            rgba(255, 255, 255, .018) 0 1px,
            transparent 1px 19px),
        var(--black);
}

.section-dark-art::before,
.section-dark-art::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border: 2px solid rgba(224, 27, 34, .2);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 1;
}

.section-dark-art::before { top: -154px; left: -112px; }
.section-dark-art::after { right: -122px; bottom: -158px; }

.section-light-art > .container,
.section-dark-art > .container {
    position: relative;
    z-index: 2;
}

/* --- Section heading block --- */

.sec-head {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.sec-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--red);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* Pill variant with flanking rules — used by Platforms, Testimonials, FAQ. */
.sec-eyebrow-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.sec-eyebrow-pill span {
    padding: 7px 20px;
    border-radius: var(--r-sm);
    background: var(--red);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sec-eyebrow-pill::before,
.sec-eyebrow-pill::after {
    content: "";
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--red);
    flex-shrink: 0;
}

.sec-title {
    font-size: clamp(30px, 5vw, 52px);
    color: #111;
}

.section-black .sec-title { color: var(--white); }

.sec-underline {
    width: 64px;
    height: 4px;
    margin: 16px auto 20px;
    border-radius: 4px;
    background: var(--red);
}

.sec-sub {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 15.5px;
}

.section-black .sec-sub { color: #b8b8b8; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    /* bootstrap.css `.btn` sets `border: 1px solid transparent` and
       `line-height: 1.42857143`. Both are inherited unless restated, and the
       border alone makes every button 2px taller than the design. */
    border: 0;
    line-height: 1.6;
    border-radius: var(--r-md);
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform .2s var(--ease), background .2s var(--ease);
    white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn-red {
    background: var(--red);
    color: var(--white);
}

.btn-red:hover { background: var(--red-dark); }

.btn-black {
    background: #111;
    color: var(--white);
}

.btn-black:hover { background: #000; }

.btn-ghost {
    background: transparent;
    border: 2px solid currentColor;
}

/* Circle play/arrow icon inside buttons. */
.btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
}

.btn-red .btn-icon { background: var(--white); color: var(--red); }
.btn-black .btn-icon { background: var(--white); color: #111; }

/* ============================================================
   BADGES
   ============================================================ */

.badge-pill {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-outline {
    border: 1px solid currentColor;
    background: transparent;
}

.badge-solid {
    background: var(--red);
    color: var(--white);
}

/* ============================================================
   DECORATIVE LAYERS
   Halftone dots, swooshes, and gradient overlays that sit
   behind or above section content.
   ============================================================ */

/* Halftone dot field — radiates from top-left. */
.deco-halftone {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 50%;
    height: 60%;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, .055) 1.2px,
        transparent 1.3px
    );
    background-size: 18px 18px;
    /* Fade the field out toward the middle of the section so it reads as
       a corner texture rather than a flat screen over the whole band. */
    mask-image: linear-gradient(to bottom right, #000 0%, transparent 62%);
    -webkit-mask-image: linear-gradient(to bottom right, #000 0%, transparent 62%);
    pointer-events: none;
    z-index: 1;
}

/* Mirrored field for the top-right corner, with the diagonal pinstripe
   streaks the artwork lays over it. */
.deco-halftone-right {
    top: -8%;
    left: auto;
    right: -4%;
    width: 46%;
    height: 58%;
    background:
        repeating-linear-gradient(-24deg,
            rgba(0, 0, 0, .045) 0 2px,
            transparent 2px 15px),
        radial-gradient(circle, rgba(0, 0, 0, .05) 1.2px, transparent 1.3px);
    background-size: 100% 100%, 18px 18px;
    background-repeat: no-repeat, repeat;
    mask-image: linear-gradient(to bottom left, #000 0%, transparent 65%);
    -webkit-mask-image: linear-gradient(to bottom left, #000 0%, transparent 65%);
}

/* ------------------------------------------------------------
   CLOUD CLUSTERS
   Glossy red + black bubbles stacked into the bottom corners of
   every light band, sliced flat by the section edge. The element
   itself carries the pale "ghost" puffs that drift along the
   bottom; ::before / ::after carry the solid clusters.
   ------------------------------------------------------------ */

.deco-clouds {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 230px;
    pointer-events: none;
    z-index: 1;
    /* Pale ghost puffs drifting along the bottom, well inboard of the
       solid clusters so the empty middle still has something in it. */
    background:
        radial-gradient(circle 118px at 27% 96%, rgba(0, 0, 0, .028) 97%, transparent 100%),
        radial-gradient(circle 86px at 40% 112%, rgba(0, 0, 0, .022) 97%, transparent 100%),
        radial-gradient(circle 134px at 71% 100%, rgba(0, 0, 0, .026) 97%, transparent 100%),
        radial-gradient(circle 92px at 57% 118%, rgba(0, 0, 0, .02) 97%, transparent 100%);
}

.deco-clouds::before,
.deco-clouds::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 400px;
    height: 230px;
    /* Listed front-to-back: gloss and arc highlights first, then the
       bubbles from nearest to furthest. */
    background:
        radial-gradient(circle 15px at 268px 152px, rgba(255, 255, 255, .42), transparent 74%),
        radial-gradient(circle 20px at 74px 106px, rgba(255, 255, 255, .5), transparent 74%),
        radial-gradient(circle 62px at 176px 176px,
            transparent 93%, rgba(255, 255, 255, .34) 93.5%,
            rgba(255, 255, 255, .34) 96%, transparent 96.5%),
        radial-gradient(circle 34px at 322px 196px, var(--red) 97%, transparent 100%),
        radial-gradient(circle 46px at 262px 172px, var(--red) 97%, transparent 100%),
        radial-gradient(circle 62px at 176px 176px, #0d0d0d 97%, transparent 100%),
        radial-gradient(circle 84px at 78px 148px, var(--red) 97%, transparent 100%),
        radial-gradient(circle 66px at 210px 214px, #111 97%, transparent 100%),
        radial-gradient(circle 58px at 128px 106px, #0d0d0d 97%, transparent 100%),
        radial-gradient(circle 70px at -10px 128px, #0d0d0d 97%, transparent 100%),
        radial-gradient(circle 54px at 300px 240px, var(--red-dark) 97%, transparent 100%),
        radial-gradient(circle 96px at 96px 250px, #141414 97%, transparent 100%);
}

.deco-clouds::before { left: -62px; }

.deco-clouds::after {
    right: -62px;
    transform: scaleX(-1);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 992px) {
    .container { padding: 0 16px; }
    .section { padding: 64px 0; }
    .sec-head { margin-bottom: 44px; }
    .sec-title { font-size: clamp(28px, 5vw, 40px); }

    /* Scale the clusters down so they stay a corner accent instead of
       swallowing the narrower layout. */
    .deco-clouds { height: 165px; }
    .deco-clouds::before,
    .deco-clouds::after {
        width: 290px;
        height: 165px;
        background-size: 400px 230px;
        background-position: bottom left;
        background-repeat: no-repeat;
    }
    .deco-clouds::before { left: -70px; }
    .deco-clouds::after { right: -70px; }
}

@media (max-width: 640px) {
    .section { padding: 52px 0; }
    .sec-head { margin-bottom: 36px; }
    .sec-title { font-size: 28px; }
    .sec-sub { font-size: 14.5px; }
    .btn { padding: 12px 22px; font-size: 15px; }

    .section-light-art::before {
        inset: -2% -55%;
        background-size: auto 100%;
    }

    .deco-clouds { height: 116px; }
    .deco-clouds::before,
    .deco-clouds::after { width: 210px; height: 116px; }
    .deco-clouds::before { left: -78px; }
    .deco-clouds::after { right: -78px; }
}

/* ===== ui.css ===== */
/* ============================================================
   HQ PROVIDER — SHARED UI PRIMITIVES
   Cards, forms, tables, badges, tabs, alerts, pagination and
   code blocks. Loaded by every page except the landing page.
   Depends on the tokens declared in base.css.
   ============================================================ */

/* ============================================================
   BUTTON ADDITIONS
   base.css already defines .btn/.btn-red/.btn-black/.btn-ghost.
   ============================================================ */

.btn-sm    { padding: 10px 18px; font-size: 14px; }
.btn-xs    { padding: 7px 13px; font-size: 13px; gap: 7px; }
.btn-block { width: 100%; justify-content: center; }

.btn-line {
    border: 2px solid #111;
    color: #111;
    background: transparent;
}

.btn-line:hover { background: #111; color: var(--white); }

.btn-soft { background: var(--red-soft); color: var(--red); }
.btn-soft:hover { background: var(--red); color: var(--white); }

/* Neutral icon-only action, used in table rows and card headers. */
.act-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-line);
    background: var(--white);
    color: #555;
    font-size: 13px;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}

.act-btn:hover { border-color: var(--red); color: var(--red); }

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

/* Red rule along the top edge, matching the landing-page cards. */
.card-top-red { border-top: 3px solid var(--red); }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--gray-line);
}

.card-head h3,
.card-head h2 {
    font-size: 21px;
    color: #111;
}

.card-head .card-note {
    color: var(--text-muted);
    font-size: 13px;
}

.card-body { padding: 22px; }
.card-body-flush { padding: 0; }

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    border-top: 1px solid var(--gray-line);
    background: #fafafa;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* Dark card variant for use on black bands. */
.card-dark {
    background: linear-gradient(160deg, #171717, #0e0e0e);
    border: 1px solid var(--hairline-red);
    color: var(--white);
}

.card-dark .card-head { border-bottom-color: var(--hairline); }
.card-dark .card-head h3 { color: var(--white); }

/* ============================================================
   FORMS
   ============================================================ */

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

.form-row { margin-bottom: 18px; }
.form-row:last-child { margin-bottom: 0; }
.form-row-full { grid-column: 1 / -1; }

/* Named `field-label`, not `label`: bootstrap.css uses `.label` for its badge
   component (`display: inline; padding: .2em .6em .3em; font-size: 75%;
   line-height: 1`), which collapsed these form labels on the live panel.
   `line-height` is restated because bootstrap also sets it on `label`. */
.field-label {
    display: block;
    margin-bottom: 7px;
    color: #2a2a2a;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .3px;
    max-width: none;
}

.field-label .req { color: var(--red); }

.input,
.select,
.textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d8d8d8;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--text-dark);
    font-size: 14.5px;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
}

.input::placeholder,
.textarea::placeholder { color: #a9a9a9; }

.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.select {
    appearance: none;
    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 d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Input with a leading unit/currency chip. */
.input-group { display: flex; }

.input-group .input {
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.input-group-addon {
    display: grid;
    place-items: center;
    min-width: 46px;
    padding: 0 13px;
    border: 1px solid #d8d8d8;
    border-left: 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--gray-bg);
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

.input-group-addon-left {
    border-left: 1px solid #d8d8d8;
    border-right: 0;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.input-group .input-group-addon-left + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.hint {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Admin-authored service description. The panel stores it as HTML, so this
   has to style tags it did not write: paragraphs, lists, links, breaks. */
.svc-desc-text {
    color: #555;
    font-size: 14px;
    line-height: 1.75;
}

.svc-desc-text p { margin: 0 0 10px; }
.svc-desc-text p:last-child { margin-bottom: 0; }
.svc-desc-text a { color: var(--red); font-weight: 600; }

.svc-desc-text ul,
.svc-desc-text ol {
    margin: 0 0 10px;
    padding-left: 20px;
    list-style: revert;
}

.svc-desc-text li { margin-bottom: 4px; }
.svc-desc-text strong { color: #222; font-weight: 700; }

/* Bulleted checklist used in page sidebars. */
.tick-list { display: grid; gap: 11px; }

.tick-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4a4a4a;
    font-size: 13.5px;
    line-height: 1.6;
}

.tick-list i {
    margin-top: 4px;
    color: #10794b;
    font-size: 11px;
    flex-shrink: 0;
}

/* ---------- Panel-injected fields ----------
   The order form's inputs are not in the template. The panel's own JS builds
   them after a service is picked and emits bootstrap markup: `.form-group`
   wrappers, `.control-label` labels, `.form-control` inputs. None of those
   class names are ours, so without this block the runtime fields would render
   as raw bootstrap next to hand-written `.input` fields on the same form.
   These rules alias them onto the same treatment instead of restyling
   bootstrap globally. */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }

.control-label {
    display: block;
    margin-bottom: 7px;
    max-width: none;
    color: #2a2a2a;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .3px;
}

/* `height` and `box-shadow` are restated because bootstrap sets both on
   `.form-control` (34px and an inset shadow), and padding alone would leave
   the field shorter than the theme's own inputs. */
.form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 12px 14px;
    border: 1px solid #d8d8d8;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--text-dark);
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.form-control:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-soft);
}

.form-control::placeholder { color: #a9a9a9; }
.form-control[readonly] { background: var(--gray-bg); color: #555; }

textarea.form-control { min-height: 110px; resize: vertical; }

/* Native select arrow, matching `.select`. */
select.form-control {
    appearance: none;
    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 d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* The panel marks invalid fields by adding `.has-error` to the wrapper. */
.has-error .form-control { border-color: var(--red); }
.has-error .control-label,
.has-error .help-block { color: #8f1116; }

.help-block {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Terms checkbox row the order and signup forms print. */
.control-label.terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 500;
    font-size: 13.5px;
    color: #4a4a4a;
}
.control-label.terms input { margin-top: 3px; flex-shrink: 0; }
.control-label.terms a { color: var(--red); font-weight: 600; }

.hint-error { color: var(--red); font-weight: 500; }

/* Checkbox / radio rows */
.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.check input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--red);
    flex-shrink: 0;
}

.check a { color: var(--red); font-weight: 600; }

/* ============================================================
   TABLES
   ============================================================ */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Every rule here is written with the same `> thead > tr > th` chain bootstrap
   uses (bootstrap.css:2268). A flat `.table thead th` scores lower on
   specificity than bootstrap's chain, so on the live panel bootstrap's 8px
   padding and `border-top: 1px solid #ddd` won and the tables came out with
   cramped cells and double lines. Matching the chain is what makes ours win. */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* bootstrap: `margin-bottom: 20px` on `.table`. */
    margin-bottom: 0;
}

.table > thead > tr > th {
    padding: 13px 18px;
    background: #f7f7f5;
    border-top: 0;
    border-bottom: 1px solid var(--gray-line);
    color: #4a4a4a;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.5;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    padding: 15px 18px;
    border-top: 0;
    border-bottom: 1px solid #f0f0ee;
    color: #333;
    vertical-align: middle;
    line-height: 1.55;
}

.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr { transition: background .15s var(--ease); }
.table > tbody > tr:hover { background: #fcfbfb; }

.table > tbody > tr > .td-id {
    color: #111;
    font-weight: 700;
    white-space: nowrap;
}

.table > tbody > tr > .td-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table > tbody > tr > .td-money {
    color: #111;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table > tbody > tr > .td-dim { color: var(--text-muted); font-size: 13px; }
.table .td-right { text-align: right; }
.table .td-center { text-align: center; }

/* Truncating cell for links and long service names. */
.td-clip {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-link { color: #2563eb; }
.td-link:hover { text-decoration: underline; }

/* Service name cell with the platform icon beside it. */
.svc-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}
.svc-cell .svc-ic {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--gray-bg);
    font-size: 15px;
    flex-shrink: 0;
}

.svc-cell strong {
    display: block;
    color: #1d1d1d;
    font-weight: 600;
    font-size: 13.8px;
    line-height: 1.35;
}

.svc-cell small {
    color: var(--text-muted);
    font-size: 12px;
}

/* ============================================================
   STATUS BADGES
   Order lifecycle states plus generic on/off pills.
   ============================================================ */

.st {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.st::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Fallback fill. Status text comes from the panel, and the class is derived
   from it (`{{ status|lower|replace({' ': ''}) }}`), so an operator who renames
   a status or a future panel release adding one would otherwise produce a chip
   with no background at all. Neutral grey is the safe default; every known
   state overrides it below. */
.st { background: #f2f3f5; color: #4b5563; }

.st-completed  { background: #e7f7ee; color: #10794b; }
.st-progress   { background: #e8f0fe; color: #1a56c4; }
/* The panel prints "In progress", which the theme's class-from-status
   expression collapses to `st-inprogress`. Kept beside `st-progress` rather
   than replacing it: the shorter name is what the dashboard markup uses. */
.st-inprogress { background: #e8f0fe; color: #1a56c4; }
.st-awaiting   { background: #fff5e0; color: #9a6206; }
.st-fail       { background: #fdeaea; color: #b3151b; }
.st-pending    { background: #fff5e0; color: #9a6206; }
.st-processing { background: #f0eaff; color: #5b34c7; }
.st-partial    { background: #fdf0e6; color: #a3510d; }
.st-canceled   { background: #f2f3f5; color: #4b5563; }
.st-error      { background: #fdeaea; color: #b3151b; }
.st-refunded   { background: #eef7fd; color: #0f6f9c; }
.st-active     { background: #e7f7ee; color: #10794b; }
.st-inactive   { background: #f2f3f5; color: #4b5563; }
.st-open       { background: #e8f0fe; color: #1a56c4; }
.st-answered   { background: #e7f7ee; color: #10794b; }
.st-closed     { background: #f2f3f5; color: #4b5563; }

/* On dark panels the pale fills go translucent instead. */
.card-dark .st,
.section-black .st { background: rgba(255, 255, 255, .08); }
.card-dark .st-completed, .section-black .st-completed { color: #4ade80; }
.card-dark .st-progress,  .section-black .st-progress  { color: #7aa8ff; }
.card-dark .st-pending,   .section-black .st-pending   { color: #fbbf24; }
.card-dark .st-canceled,  .section-black .st-canceled  { color: #b0b6c0; }

/* HTTP verb chips for the API docs. */
.verb {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
}

.verb-post { background: #10794b; color: var(--white); }
.verb-get  { background: #1a56c4; color: var(--white); }

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 18px;
    /* bootstrap.css `.alert` carries `border: 1px solid transparent` and
       `margin-bottom: 20px`. Only border-left is restated below, so without
       these two the other three edges keep a phantom 1px and every alert the
       panel prints drags 20px of slack behind it. */
    border: 0;
    margin: 0;
    border-radius: var(--r-sm);
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.6;
}
.alert i { margin-top: 2px; font-size: 15px; flex-shrink: 0; }
.alert strong { display: block; margin-bottom: 3px; font-weight: 700; }
.alert h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

.alert-info    { background: #eef4ff; border-left-color: #1a56c4; color: #24417d; }
.alert-warn    { background: #fff8e8; border-left-color: #d99000; color: #7a5100; }
.alert-success { background: #ecf9f2; border-left-color: #10794b; color: #0c5d3a; }
.alert-error   { background: #fdeeee; border-left-color: var(--red); color: #8f1116; }

/* `alert-danger` is the class the panel's own templates emit for errors;
   `alert-error` is this theme's name for the same thing. Both are kept so
   hand-written and panel-rendered markup look identical. */
.alert-danger  { background: #fdeeee; border-left-color: var(--red); color: #8f1116; }

/* The panel's dismissible alerts ship a `<button class="close"
   data-dismiss="alert">&times;</button>`; bootstrap.js does the removing,
   this only makes the X look deliberate. */
.alert .close {
    margin-left: auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    opacity: .55;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.alert .close:hover { opacity: 1; }

/* ============================================================
   TABS
   ============================================================ */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--gray-line);
    margin-bottom: 26px;
    overflow-x: auto;
}

.tab {
    padding: 12px 20px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}

.tab:hover { color: #111; }

.tab.active {
    border-bottom-color: var(--red);
    color: var(--red);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Pill-style filter row, used above tables. */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pill {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--gray-line);
    background: var(--white);
    color: #444;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .18s var(--ease);
}

.pill:hover { border-color: #bdbdbd; }

.pill.active {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.pill .pill-count {
    margin-left: 6px;
    opacity: .7;
    font-weight: 500;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pager a,
.pager span {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-line);
    background: var(--white);
    color: #444;
    font-size: 13.5px;
    font-weight: 600;
}
.pager a:hover { border-color: var(--red); color: var(--red); }

.pager .current {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

.pager .disabled { color: #c3c3c3; }

/* ============================================================
   CODE BLOCKS — API documentation
   ============================================================ */

.code {
    position: relative;
    padding: 18px 20px;
    border-radius: var(--r-sm);
    border: 1px solid #1f1f1f;
    background: #0d0d0d;
    overflow-x: auto;
}

.code pre {
    color: #d8d8d8;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
}

/* Minimal token colouring, applied with spans in the markup. */
.code .c-key  { color: #7aa8ff; }
.code .c-str  { color: #7ee29a; }
.code .c-num  { color: #f2b45f; }
.code .c-com  { color: #6b6b6b; font-style: italic; }
.code .c-fn   { color: #f3737a; }

.code-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

code.inline {
    padding: 2px 7px;
    border-radius: 4px;
    background: #f1f1ef;
    color: #b3151b;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13px;
}
/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty {
    padding: 54px 20px;
    text-align: center;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--gray-bg);
    color: #b9b9b9;
    font-size: 30px;
}

.empty h4 { font-size: 22px; color: #111; margin-bottom: 8px; }

.empty p {
    max-width: 380px;
    margin: 0 auto 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ============================================================
   MISC HELPERS
   ============================================================ */

.avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f3343a, var(--red-dark));
    color: var(--white);
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}

.divider { height: 1px; background: var(--gray-line); margin: 24px 0; }
.stack-sm > * + * { margin-top: 10px; }
.stack   > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 26px; }

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.mono {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13px;
}

/* Copyable value box — API keys, endpoints. */
.copy-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px dashed #cfcfcf;
    border-radius: var(--r-sm);
    background: #fafafa;
}

.copy-box .copy-val {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13px;
}

.copy-box button {
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .card-head { flex-wrap: wrap; padding: 16px; }
    .card-body { padding: 16px; }
    .card-foot { padding: 14px 16px; }
}

/* ===== landing.css ===== */
/* ============================================================
   HQ PROVIDER — LANDING PAGE
   Navbar, hero, feature strips, testimonials, FAQ, CTA, footer.
   ============================================================ */

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--black);
    /* bootstrap.css owns `.navbar` too, with `border: 1px solid transparent`,
       `min-height: 50px` and `margin-bottom: 20px`. Only border-bottom is
       restated below, so the other three edges have to be zeroed explicitly. */
    border: 0;
    border-bottom: 3px solid var(--red);
    min-height: 0;
    margin-bottom: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
}

.navbar-logo img {
    height: 54px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-links a {
    color: #e8e8e8;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s var(--ease);
}

.nav-links a:hover,
.nav-links a.active { color: var(--red); }

.nav-links a.active {
    padding-bottom: 4px;
    border-bottom: 2px solid var(--red);
}

.nav-toggle {
    display: none;
    color: var(--white);
    font-size: 24px;
}

.nav-toggle-symbol {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.nav-toggle i { display: none; }

/* ============================================================
   HERO
   Light background with halftone pattern, red swoosh bottom-left.
   ============================================================ */

.hero {
    position: relative;
    background:
        linear-gradient(105deg,
            transparent 0 54%,
            rgba(224, 27, 34, .045) 54.2%,
            rgba(224, 27, 34, .13) 100%),
        linear-gradient(rgba(17, 17, 17, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, .018) 1px, transparent 1px),
        #f7f7f4;
    background-size: auto, 52px 52px, 52px 52px, auto;
    padding: 72px 0 92px;
    overflow: hidden;
}

/* Thin flowing linework adds movement without a visible shape boundary. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760'%3E%3Cg fill='none'%3E%3Cpath d='M650 710 C870 420 990 760 1180 430 S1450 115 1690 250' stroke='%23e01b22' stroke-opacity='.25' stroke-width='2'/%3E%3Cpath d='M730 760 C900 480 1050 690 1230 400 S1490 180 1660 95' stroke='%23111111' stroke-opacity='.08' stroke-width='1.5'/%3E%3Cpath d='M810 740 C960 510 1080 620 1280 340 S1510 245 1710 40' stroke='%23e01b22' stroke-opacity='.12' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

/* Fine separator into the dark feature band. */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(224, 27, 34, .55) 28%,
        rgba(224, 27, 34, .2) 72%,
        transparent);
    pointer-events: none;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    align-items: center;
    gap: 40px;
}

/* Grid items default to an auto minimum size. The mascot PNGs are
   ~3000px wide intrinsically, which otherwise forces the column
   wider than the viewport and clips the copy on small screens. */
.hero .container > *,
.cta .container > * { min-width: 0; }

/* bootstrap.css clearfixes `.container` with `:before`/`:after` pseudo-elements
   carrying `content: " "` and `display: table`. Nothing in this theme floats
   its children, so the clearfix has no job here and two side effects:
   in a flex/grid `.container` the `:before` claims the first track and shifts
   every child one cell over, and in a block `.container` the pair still adds
   stray height. `.row` is left alone, since panel markup does float `.col-*`
   inside it and genuinely needs the clearfix. */
.container::before,
.container::after {
    display: none;
    content: none;
}

.hero-badge {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 22px;
    border-radius: 4px;
    border: 1px solid var(--red);
    background: var(--red);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(48px, 6.8vw, 78px);
    line-height: .88;
    color: #111;
    margin-bottom: 24px;
    letter-spacing: -.4px;
}

.hero h1 .impact {
    display: block;
    color: var(--red);
}

.hero-text p {
    max-width: 520px;
    margin-bottom: 30px;
    color: #4c4c4c;
    font-size: 16.5px;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Play button link with two-line label */
.hero-link-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.3;
}

.hero-link-play .play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    border: 2px solid #111;
    color: #111;
    font-size: 14px;
    flex-shrink: 0;
}

.hero-img {
    position: relative;
    text-align: center;
}

.hero-img::before {
    display: none;
}

.hero-img img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .2));
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    margin-top: 26px;
    max-width: 560px;
}

.hero-proof span {
    color: #242424;
    font-size: 12.5px;
    font-weight: 700;
}

.hero-proof i {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    border-radius: 50%;
    background: #111;
    color: var(--white);
    font-size: 9px;
}

/* ============================================================
   FEATURES STRIP + STATS
   Black band with 4 white feature cards + red-bordered stats box.
   ============================================================ */

.features {
    position: relative;
    background: var(--black);
    padding: 56px 0 68px;
    overflow: hidden;
}

.features::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 30%, rgba(224, 27, 34, .12), transparent 25%),
        radial-gradient(circle, rgba(255, 255, 255, .035) 1px, transparent 1.4px);
    background-size: auto, 16px 16px;
    pointer-events: none;
}

.features .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-card {
    background: var(--white);
    border-radius: var(--r-md);
    border-top: 4px solid var(--red);
    padding: 26px 14px;
    text-align: center;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
    transition: transform .25s var(--ease);
}

.feature-card:hover { transform: translateY(-8px); }

.feature-card .fc-icon {
    font-size: 34px;
    color: var(--red);
    margin-bottom: 14px;
}

.feature-card h4 {
    font-size: 18px;
    color: #111;
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Stats box — 2×2 grid with red border */
.stats-box {
    background: #000;
    border: 2px solid var(--red);
    border-radius: var(--r-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.stat {
    padding: 26px 10px;
    text-align: center;
    border-right: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
}

.stat:nth-child(2n) { border-right: none; }
.stat:nth-child(n+3) { border-bottom: none; }

.stat .st-icon {
    font-size: 28px;
    color: var(--white);
    margin-bottom: 10px;
}

.stat .st-num {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 32px;
    color: var(--red);
}

.stat .st-label {
    color: #ddd;
    font-size: 13px;
}

/* ============================================================
   SERVICES (Platform Marketing Cards)
   6-column grid of white cards with brand-colored icons.
   ============================================================ */

.platform-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.pm-card {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid #deded9;
    border-bottom: 3px solid var(--red);
    padding: 26px 8px;
    text-align: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
    transition: transform .25s var(--ease);
}

.pm-card:hover { transform: translateY(-6px); }

.pm-card .pm-icon {
    font-size: 42px;
    margin-bottom: 14px;
}

.pm-card p {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}

/* Brand colors */
.ic-facebook  { color: #1877f2; }
.ic-instagram { color: #e4405f; }
.ic-youtube   { color: #ff0000; }
.ic-tiktok    { color: #000; }
.ic-twitter   { color: #000; }
.ic-telegram  { color: #29a9eb; }
.ic-spotify   { color: #1db954; }
.ic-twitch    { color: #9146ff; }

/* ============================================================
   HOW IT WORKS
   4 dark cards, red number badge overlapping the top edge,
   dotted red chevron connectors between cards.
   ============================================================ */

.steps {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.step {
    position: relative;
    margin-top: 24px;
    padding: 50px 20px 26px;
    background: linear-gradient(180deg, #151515, #0d0d0d);
    border: 1px solid #381012;
    border-top: 3px solid var(--red);
    border-radius: var(--r-md);
    text-align: center;
}

.step-num {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    font-family: var(--font-head);
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    box-shadow: 0 0 0 6px var(--black);
}

/* Dotted red chevron between steps. Drawn on the gap to the
   right of each card except the last. */
.step:not(:last-child)::after {
    content: "\f101"; /* fa-angles-right */
    position: absolute;
    top: 50%;
    right: -20px;          /* spans exactly the 20px grid gap */
    width: 20px;
    transform: translateY(-50%);
    color: var(--red);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    opacity: .75;
    pointer-events: none;
}

.step .step-icon {
    font-size: 40px;
    color: var(--white);
    margin-bottom: 18px;
}

.step h4 {
    color: var(--white);
    font-size: 20px;
    margin-bottom: 10px;
}

.step p {
    color: #a8a8a8;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ============================================================
   WHY CHOOSE US
   3×2 white cards with red circular icons.
   ============================================================ */

.why-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    background: var(--white);
    border: 1px solid #dfd5d5;
    border-top: 3px solid var(--red);
    border-radius: var(--r-md);
    padding: 34px 26px;
    text-align: center;
    box-shadow: var(--sh-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(224, 27, 34, .12);
}

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 6px;
    background: linear-gradient(145deg, #f3343a, var(--red-dark));
    color: var(--white);
    font-size: 32px;
}

.why-card h4 {
    font-size: 21px;
    color: #111;
    margin-bottom: 10px;
}

.why-card p {
    color: var(--text-muted);
    font-size: 14px;
}

/* ============================================================
   PLATFORMS WE SUPPORT
   4×2 dark cards, large brand icons, red underline.
   ============================================================ */

.plat-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.plat-card {
    background: linear-gradient(160deg, #171717, #0e0e0e);
    border: 1px solid var(--hairline-red);
    border-bottom: 3px solid #341014;
    border-radius: var(--r-md);
    padding: 40px 20px 30px;
    text-align: center;
    transition: transform .25s var(--ease), border-color .25s var(--ease);
}

.plat-card:hover {
    transform: translateY(-8px);
    border-color: var(--red);
}

.plat-card .plat-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

/* On the dark cards TikTok and X read as white, not black. */
.plat-card .ic-tiktok,
.plat-card .ic-twitter { color: var(--white); }

.plat-card h4 {
    color: var(--white);
    font-size: 20px;
    margin-bottom: 12px;
}

.plat-card .plat-line {
    width: 40px;
    height: 3px;
    margin: 0 auto;
    border-radius: 3px;
    background: var(--red);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testi-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testi-card {
    position: relative;
    background: var(--white);
    border: 1px solid #deded9;
    border-top: 3px solid var(--red);
    border-radius: var(--r-md);
    padding: 30px 26px;
    box-shadow: var(--sh-md);
}

.testi-quote {
    position: absolute;
    top: 24px;
    right: 26px;
    color: var(--red);
    font-size: 38px;
    line-height: 1;
}

.testi-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testi-head img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid var(--red);
    object-fit: cover;
    flex-shrink: 0;
}

.testi-head h4 {
    font-size: 18px;
    color: #111;
    margin-bottom: 4px;
}

.testi-role {
    display: block;
    margin: -1px 0 3px;
    color: #777;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.testi-stars {
    color: var(--red);
    font-size: 14px;
    letter-spacing: 1px;
}

.testi-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-line);
    color: #555;
    font-size: 14px;
    line-height: 1.65;
}

/* ============================================================
   FAQ
   Every answer is visible under its question, matching the
   mockup. The +/- only expands supplementary detail.
   ============================================================ */

.faq-list {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
}

.faq-item {
    background: linear-gradient(90deg, #151515, #101010);
    border: 1px solid #2b191a;
    border-left: 3px solid var(--red);
    border-radius: var(--r-md);
    margin-bottom: 16px;
    transition: border-color .2s var(--ease);
}

.faq-item:hover { border-color: #3a3a3a; }

.faq-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 20px 24px;
    text-align: left;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 5px;
    background: linear-gradient(145deg, #f3343a, var(--red-dark));
    color: var(--white);
    font-size: 17px;
    flex-shrink: 0;
}

.faq-text { flex: 1; }

/* Spans, not headings — the row is a <button>, which may only
   contain phrasing content. */
.faq-title {
    display: block;
    margin-bottom: 5px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* Always-visible summary answer, per the design. */
.faq-sub {
    display: block;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}

.faq-plus {
    color: var(--red);
    font-size: 22px;
    flex-shrink: 0;
    transition: transform .25s var(--ease);
}

.faq-item.open .faq-plus { transform: rotate(45deg); }

/* Expandable detail panel — collapsed by default. */
.faq-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease);
}

.faq-item.open .faq-detail { grid-template-rows: 1fr; }

.faq-detail > div { overflow: hidden; }

.faq-detail p {
    padding: 0 24px 22px 88px;
    color: #b8b8b8;
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================
   CTA BANNER
   Textured red artwork behind mascot (left) and copy (right).
   ============================================================ */

.cta {
    position: relative;
    background-color: var(--red-deep);
    background-image: url("https://storage.perfectcdn.com/ospmqs/2tysbcxi0eka4ihk.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* The artwork is dark exactly where the headline sits, which left the
   near-black "NEXT LEVEL?" unreadable. This glow lifts the red behind
   the copy to a contrast-safe level for large text. */
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 68% 50%,
        rgba(224, 27, 34, .62) 0%,
        rgba(224, 27, 34, .30) 45%,
        transparent 72%);
    pointer-events: none;
    z-index: 1;
}

.cta .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 20px;
    min-height: 340px;
}

.cta-img {
    text-align: center;
    align-self: end;
}

.cta-img img {
    max-height: 360px;
    width: auto;
    margin: 0 auto;
}

.cta-text h2 {
    color: var(--white);
    font-size: clamp(30px, 4.6vw, 50px);
    margin-bottom: 16px;
}

/* "NEXT LEVEL?" renders near-black against the red art. */
.cta-text h2 .dark { color: #111; }

.cta-text p {
    max-width: 420px;
    margin-bottom: 26px;
    color: var(--white);
    font-size: 17px;
    opacity: .95;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: var(--black);
    color: #cfcfcf;
    padding: 60px 0 26px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-brand img {
    height: 62px;
    width: auto;
    margin-bottom: 16px;
}

.footer-brand p {
    max-width: 260px;
    color: var(--text-dim);
    font-size: 14px;
}

.footer-col h4 {
    color: var(--red);
    font-size: 16px;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.footer-col li { margin-bottom: 11px; }

.footer-col a {
    color: #cfcfcf;
    font-size: 14px;
    transition: color .2s var(--ease);
}

.footer-col a:hover { color: var(--red); }

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    color: var(--white);
    font-size: 18px;
    transition: transform .2s var(--ease);
}

.social-icons a:hover { transform: translateY(-3px); }

/* Contact platform backgrounds */
.sc-telegram { background: #29a9eb; }
.sc-whatsapp { background: #25d366; }

.footer-bottom {
    border-top: 1px solid var(--hairline);
    padding-top: 22px;
    text-align: center;
    color: #8a8a8a;
    font-size: 13.5px;
}

.footer-bottom .text-red { font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 992px) {
    .hero {
        padding: 58px 0 64px;
        background:
            linear-gradient(180deg,
                transparent 0 55%,
                rgba(224, 27, 34, .07) 100%),
            linear-gradient(rgba(17, 17, 17, .018) 1px, transparent 1px),
            linear-gradient(90deg, rgba(17, 17, 17, .018) 1px, transparent 1px),
            #f3f3ef;
        background-size: auto, 44px 44px, 44px 44px, auto;
    }
    .hero::before {
        inset: 0;
        background-position: 66% center;
        background-size: auto 100%;
    }
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-text p { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-proof { justify-content: center; margin-left: auto; margin-right: auto; }
    .hero-img { width: 100%; max-width: 520px; margin: 10px auto 0; }

    .features .container { grid-template-columns: 1fr; }
    .platform-row { grid-template-columns: repeat(3, 1fr); }

    /* Chevron connectors only make sense in a single row. */
    .steps { grid-template-columns: repeat(2, 1fr); }
    .step:not(:last-child)::after { display: none; }

    .why-grid  { grid-template-columns: repeat(2, 1fr); }
    .plat-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: 1fr; }

    .cta .container { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
    .cta-text p { margin-left: auto; margin-right: auto; }
    .cta-img { order: -1; }
    .cta-img img { max-height: 260px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: none; }
}

/* The five nav links plus the CTA button stop fitting beside the logo
   well before the 640px content breakpoint, so the drawer takes over
   earlier than the rest of the mobile layout. */
@media (max-width: 900px) {
    .navbar .container { position: relative; }
    .nav-links { display: none; }
    .nav-toggle {
        position: absolute;
        top: 50%;
        right: 16px;
        display: grid !important;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 4px;
        background: var(--red);
        transform: translateY(-50%);
        z-index: 3;
    }
    .navbar .btn-started { display: none; }
}

@media (max-width: 640px) {
    .hero { padding: 44px 0 52px; }
    .hero h1 { font-size: clamp(46px, 15vw, 62px); }
    .hero-text p { font-size: 15px; }
    .hero-actions {
        flex-direction: column;
        gap: 16px;
    }
    .hero-proof {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .features { padding: 44px 0 52px; }
    .feature-cards { grid-template-columns: repeat(2, 1fr); }
    .platform-row  { grid-template-columns: repeat(2, 1fr); }
    .why-grid      { grid-template-columns: 1fr; }
    .plat-grid     { grid-template-columns: 1fr 1fr; }

    .faq-row { padding: 16px; gap: 14px; }
    .faq-detail p { padding: 0 16px 18px; }
    .cta-img img { max-height: 220px; }
}

/* ============================================================
   MOBILE NAV DRAWER
   Toggled by .nav-toggle below 640px.
   ============================================================ */

.nav-drawer {
    display: none;
    background: var(--black-soft);
    border-top: 1px solid var(--hairline);
    padding: 8px 0 18px;
}

.nav-drawer.open { display: block; }

.nav-drawer ul { padding: 0 20px; }

.nav-drawer li { border-bottom: 1px solid var(--hairline); }

.nav-drawer a {
    display: block;
    padding: 14px 4px;
    color: #e8e8e8;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-drawer a:hover,
.nav-drawer a.active { color: var(--red); }

.nav-drawer .btn {
    margin: 18px 20px 0;
    justify-content: center;
    display: flex;
}

/* The drawer only exists while the inline nav is hidden. */
@media (min-width: 901px) {
    .nav-drawer,
    .nav-drawer.open { display: none; }
}

/* ============================================================
   SIGN IN MODAL
   Opened from the navbar and the mobile drawer. On the live panel
   this wraps the real LoginForm[...] fields, so the layout has to
   tolerate a server-rendered alert appearing above the inputs.
   ============================================================ */

body.auth-lock { overflow: hidden; }

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 24px;
}

/* display:grid above outranks the UA [hidden] rule, so restate it —
   otherwise the closed scrim keeps swallowing clicks. */
.auth-modal[hidden] { display: none; }

.auth-scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, .72);
    opacity: 0;
    transition: opacity .2s var(--ease);
}

.auth-modal.open .auth-scrim { opacity: 1; }

.auth-dialog {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 34px 32px 30px;
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}

.auth-modal.open .auth-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Red rule across the top, matching the panel's side-head treatment. */
.auth-dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--red);
}

.auth-x {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #8a8a8a;
    font-size: 16px;
    background: transparent;
    transition: background .18s var(--ease), color .18s var(--ease);
}

.auth-x:hover { background: var(--red); color: var(--white); }
.auth-x:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.auth-dialog-head { margin-bottom: 24px; }

.auth-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--red);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.auth-dialog-head h2 {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--black);
}

.auth-dialog-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-form .btn-block { margin-top: 4px; }

/* Label row with the reset link pushed to the right of it. */
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-forgot {
    color: var(--red);
    font-size: 12.5px;
    font-weight: 600;
}

.auth-alt {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--gray-line);
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-alt a { color: var(--red); font-weight: 700; }

/* Password field with a reveal toggle. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    padding: 4px;
    background: transparent;
}

.pw-toggle:hover { color: var(--red); }

/* Server-rendered login feedback. Deliberately not called .alert —
   bootstrap.css owns that class and the panel's #notify-wrapper needs
   its version untouched. */
.alert-line {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: var(--r-sm);
    border-left: 4px solid;
    font-size: 13.5px;
    line-height: 1.55;
}

.alert-line i { margin-top: 2px; flex-shrink: 0; }

.alert-line-err { background: #fdeeee; border-color: var(--red); color: #8f1116; }
.alert-line-ok  { background: #ecf9f2; border-color: #10794b; color: #0c5d3a; }

/* reCAPTCHA is a fixed-width iframe; let it shrink on narrow phones. */
.auth-captcha { transform-origin: 0 0; }

@media (max-width: 380px) {
    .auth-captcha { transform: scale(.86); }
}

.auth-google {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

/* Optional admin-authored copy under the landing page. */
.auth-text-block { padding: 60px 0; }

.auth-text-inner {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-muted);
    line-height: 1.75;
}

@media (max-width: 480px) {
    .auth-modal { padding: 14px; }
    .auth-dialog { padding: 30px 22px 26px; }
    .auth-dialog-head h2 { font-size: 29px; }
}

/* ===== pages.css ===== */
/* ============================================================
   HQ PROVIDER — PUBLIC INNER PAGES
   Page hero band, auth screens, public service catalogue,
   API documentation, contact and legal pages.
   Loaded after base.css + landing.css + ui.css.
   ============================================================ */

/* ============================================================
   PAGE HERO
   Compact dark band that replaces the landing hero on inner
   pages. Reuses the .section-dark-art texture idea.
   ============================================================ */

.page-hero {
    position: relative;
    padding: 58px 0 62px;
    background:
        radial-gradient(circle at 12% 18%, rgba(224, 27, 34, .16), transparent 26%),
        radial-gradient(circle at 88% 82%, rgba(224, 27, 34, .1), transparent 28%),
        repeating-linear-gradient(-24deg,
            rgba(255, 255, 255, .02) 0 1px,
            transparent 1px 19px),
        var(--black);
    border-bottom: 3px solid var(--red);
    color: var(--white);
    overflow: hidden;
    text-align: center;
}

/* Rotated square accents, mirroring .section-dark-art. */
.page-hero::before,
.page-hero::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border: 2px solid rgba(224, 27, 34, .22);
    transform: rotate(45deg);
    pointer-events: none;
}

.page-hero::before { top: -140px; left: -100px; }
.page-hero::after { right: -110px; bottom: -142px; }

.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
    font-size: clamp(34px, 5.4vw, 58px);
    color: var(--white);
    margin-bottom: 14px;
}

.page-hero h1 .text-red { color: var(--red); }

.page-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: #bdbdbd;
    font-size: 16px;
}

/* Breadcrumb trail under the title. */
.crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    color: #8f8f8f;
    font-size: 13px;
    font-weight: 500;
    flex-wrap: wrap;
}

.crumbs a { color: #d8d8d8; }
.crumbs a:hover { color: var(--red); }
.crumbs i { font-size: 9px; color: var(--red); }
.crumbs .current { color: var(--red); font-weight: 600; }

/* ============================================================
   AUTH PAGES — sign in, sign up, password reset
   Split layout: brand panel on the left, form card on the right.
   ============================================================ */

.auth {
    min-height: calc(100vh - var(--nav-h));
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f7f7f4;
}

.auth-aside {
    position: relative;
    padding: 60px 54px;
    background:
        radial-gradient(circle at 20% 20%, rgba(224, 27, 34, .2), transparent 34%),
        repeating-linear-gradient(-24deg,
            rgba(255, 255, 255, .022) 0 1px,
            transparent 1px 18px),
        var(--black);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.auth-aside::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(224, 27, 34, .2);
    transform: rotate(45deg);
    pointer-events: none;
}

.auth-aside-inner { position: relative; z-index: 2; max-width: 420px; }

.auth-aside .auth-logo {
    height: 58px;
    width: auto;
    margin-bottom: 34px;
}

.auth-aside h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    color: var(--white);
    margin-bottom: 16px;
}

.auth-aside h2 .text-red { color: var(--red); }

.auth-aside > .auth-aside-inner > p {
    color: #b6b6b6;
    font-size: 15.5px;
    margin-bottom: 30px;
}

.auth-points { display: grid; gap: 16px; }

.auth-point {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.auth-point .ap-ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(145deg, #f3343a, var(--red-dark));
    color: var(--white);
    font-size: 15px;
    flex-shrink: 0;
}
.auth-point h4 {
    font-family: var(--font-body);
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 3px;
    line-height: 1.3;
}

.auth-point p {
    color: #a4a4a4;
    font-size: 13.5px;
    line-height: 1.55;
}

/* --- Form side --- */

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 24px;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-top: 3px solid var(--red);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 38px 36px;
}

.auth-card h1 {
    font-size: 34px;
    color: #111;
    margin-bottom: 8px;
}

.auth-card .auth-sub {
    color: var(--text-muted);
    font-size: 14.5px;
    margin-bottom: 26px;
}

.auth-forgot {
    color: var(--red);
    font-size: 12.5px;
    font-weight: 600;
}
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-alt {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-line);
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-alt a { color: var(--red); font-weight: 700; }

/* Password field with a reveal toggle. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    padding: 4px;
}

.pw-toggle:hover { color: var(--red); }

/* ============================================================
   PUBLIC SERVICE CATALOGUE
   Full-page list: slim title band, sticky filter bar, then the
   service rows running the full width of the viewport. No card
   wrapper and no side nav — the rows are the page.
   ============================================================ */

/* Wider than .container, since the table carries seven columns. */
.cat-wrap {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Slim dark title band --- */
.cat-top {
    background:
        radial-gradient(circle at 8% 30%, rgba(224, 27, 34, .16), transparent 30%),
        repeating-linear-gradient(-24deg,
            rgba(255, 255, 255, .02) 0 1px,
            transparent 1px 19px),
        var(--black);
    border-bottom: 3px solid var(--red);
    color: var(--white);
    padding: 24px 0;
}

.cat-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cat-top h1 {
    font-size: clamp(27px, 3.4vw, 38px);
    color: var(--white);
    line-height: 1;
}

.cat-top h1 .text-red { color: var(--red); }

.cat-top .cat-lede {
    margin-top: 7px;
    color: #b0b0b0;
    font-size: 13.5px;
    max-width: 640px;
}

/* Counters on the right of the band. */
.cat-figs { display: flex; gap: 32px; }

.cat-fig .cf-n {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 29px;
    color: var(--red);
    line-height: 1;
}

.cat-fig .cf-k {
    display: block;
    margin-top: 4px;
    color: #9a9a9a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* --- Sticky filter bar --- */
.cat-bar {
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gray-line);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    padding: 13px 0;
}

.cat-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.svc-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.svc-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #a3a3a3;
    font-size: 14px;
}

.svc-search .input { padding-left: 40px; }

/* Platform chips replace the old sidebar. */
.cat-plats {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    /* `overflow-x: auto` alone does not scroll here. As a flex item this box
       has a content-based automatic minimum size, so a long pill list widens
       it past the viewport instead of scrolling inside it. `min-width: 0`
       is what actually lets it shrink and hand the scroll to overflow. */
    min-width: 0;
}

.cat-plats .pill i { margin-right: 6px; }

/* Removed side nav — kept as a no-op guard in case markup lingers. */
.svc-side { display: none; }

/* --- Full-width service table --- */
.cat-table-wrap {
    background: var(--white);
    border-top: 0;
}

.cat-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.cat-table thead th {
    position: sticky;
    /* Sits directly beneath the sticky filter bar. */
    top: calc(var(--nav-h) + 61px);
    z-index: 10;
    padding: 12px 18px;
    background: #f2f2ef;
    border-bottom: 1px solid #dededa;
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.cat-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0ee;
    color: #333;
    vertical-align: middle;
}

.cat-table tbody tr:hover { background: #fcfbfb; }

/* Cell helpers. ui.css scopes its own to .table, so the catalogue
   table restates the few it needs. */
.cat-table .td-right { text-align: right; }
.cat-table .td-center { text-align: center; }
.cat-table .td-id { color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cat-table .td-num { font-variant-numeric: tabular-nums; }
.cat-table .td-money { font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
.cat-table .td-dim { color: var(--text-muted); font-size: 13px; }

/* Duplicate of the ID inside the service cell. Hidden while the dedicated ID
   column is visible; the ≤640px block below turns it on as that column goes. */
.cat-table .svc-id-sm { display: none; }
.cat-table .svc-id-sm::after { content: " · "; }

/* Platform tints for the icon defined in ui.css. */
.svc-ic.ic-instagram { background: #fdf0f4; color: #c1358a; }
.svc-ic.ic-tiktok    { background: #f2f2f2; color: #111; }
.svc-ic.ic-youtube   { background: #fdeeee; color: #d32f2f; }
.svc-ic.ic-facebook  { background: #eef3fc; color: #1877f2; }
.svc-ic.ic-telegram  { background: #eef7fd; color: #229ed9; }

/* No-results row. */
.svc-empty-row td { padding: 0 !important; border-bottom: 0 !important; }
.svc-empty-row .empty { padding: 60px 24px; text-align: center; }
.svc-empty-row .empty i { font-size: 26px; color: #c9c9c5; margin-bottom: 14px; }
.svc-empty-row .empty h4 { font-size: 19px; color: #111; margin-bottom: 6px; }
.svc-empty-row .empty p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* Category header row inside the catalogue table. */
.svc-group-row td {
    padding: 12px 18px !important;
    background: #111 !important;
    color: var(--white) !important;
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.svc-group-row td i { margin-right: 9px; color: var(--red); }

/* Description trigger, last column of every service row. */
.desc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #dcdcd8;
    border-radius: 999px;
    background: var(--white);
    color: #555;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease),
                color .16s var(--ease);
}

.desc-btn i { font-size: 10.5px; }

.desc-btn:hover {
    border-color: var(--red);
    background: var(--red);
    color: var(--white);
}

.desc-btn:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* ============================================================
   SERVICE DESCRIPTION MODAL
   One shared dialog; row markup is cloned into .modal-body.
   ============================================================ */

body.modal-lock { overflow: hidden; }

/* `:not(.fade)` scopes this to the theme's own dialog.
   `.modal` is also bootstrap's, and the panel's stock templates use it for the
   order-details and change-email dialogs — always as `class="modal fade"`.
   Bootstrap keeps those closed with `display: none`, which this block's
   `display: grid` overrode, leaving a full-viewport invisible grid over every
   such page that swallowed every click on the content beneath it. The theme's
   dialog never carries `.fade` (it animates via `.open`), so excluding it hands
   each modal system back its own elements. */
.modal:not(.fade) {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
}

/* display:grid above outranks the UA [hidden] rule, so restate it —
   without this the closed scrim keeps swallowing clicks. */
.modal:not(.fade)[hidden] { display: none; }

.modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, .72);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s var(--ease);
}

.modal.open .modal-scrim { opacity: 1; }

.modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-radius: var(--radius);
    border-top: 3px solid var(--red);
    background: var(--white);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.modal.open .modal-box {
    opacity: 1;
    transform: none;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--gray-line);
}

.modal-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--red);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.modal-head h3 {
    font-size: 21px;
    line-height: 1.2;
    color: var(--black);
}

.modal-x {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--gray-bg);
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.modal-x:hover { background: var(--red); color: var(--white); }

/* Scoped for the same reason as `.modal` above: `.modal-body` is bootstrap's
   class too, and the panel's dialogs use it with their own 15px padding. */
.modal:not(.fade) .modal-body { padding: 4px 22px 18px; }

.modal-body .svc-desc-body {
    color: #555;
    font-size: 14px;
    line-height: 1.75;
}

.modal-body .svc-desc-body p { margin: 0; }

/* Terms grid inside the description. */
.svc-terms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 16px 0 18px;
    background: var(--gray-line);
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    overflow: hidden;
}

.svc-terms > div {
    padding: 11px 14px;
    background: #fbfbfa;
}

.svc-terms .k {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.svc-terms .v {
    color: var(--black);
    font-size: 13.5px;
    font-weight: 600;
}

.modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 15px 22px;
    border-top: 1px solid var(--gray-line);
    background: #fafaf9;
}

@media (max-width: 560px) {
    .modal { padding: 14px; }
    .modal-box { max-height: calc(100vh - 28px); }
    .svc-terms { grid-template-columns: 1fr; }
    .modal-foot { flex-direction: column; align-items: stretch; }
    .modal-foot .btn { justify-content: center; }
}
/* ============================================================
   API DOCUMENTATION
   Sticky contents rail beside the endpoint reference.
   ============================================================ */

.doc-layout {
    display: grid;
    grid-template-columns: 244px 1fr;
    gap: 34px;
    align-items: start;
}

.doc-nav {
    position: sticky;
    top: calc(var(--nav-h) + 18px);
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 20px;
}

.doc-nav h4 {
    font-size: 15px;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-line);
}

.doc-nav a {
    display: block;
    padding: 8px 11px;
    border-radius: var(--r-sm);
    color: #4a4a4a;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.doc-nav a:hover { background: #f7f7f5; color: var(--red); }

.doc-nav a.active {
    background: var(--red-soft);
    color: var(--red);
    font-weight: 700;
}

.doc-block { margin-bottom: 34px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc-block:last-child { margin-bottom: 0; }
.doc-block > h2 {
    font-size: 28px;
    color: #111;
    margin-bottom: 6px;
}

.doc-block > p {
    color: var(--text-muted);
    font-size: 14.5px;
    margin-bottom: 18px;
    max-width: 700px;
}

/* Endpoint signature strip at the top of a card. */
.endpoint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gray-line);
    background: #fafafa;
    flex-wrap: wrap;
}

.endpoint .ep-path {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13.5px;
    color: #222;
    word-break: break-all;
}

/* Two-column code comparison (request / response). */
.code-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* Parameter reference table lives inside .card-body-flush. */
.param-name {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 13px;
    color: #b3151b;
    font-weight: 600;
    white-space: nowrap;
}

.param-type {
    color: var(--text-muted);
    font-size: 12.5px;
    font-style: italic;
}
/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 30px;
    align-items: start;
}

.contact-methods { display: grid; gap: 16px; }

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 22px;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-left: 3px solid var(--red);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform .22s var(--ease);
}

.contact-method:hover { transform: translateY(-3px); }

.contact-method .cm-ic {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: var(--r-sm);
    color: var(--white);
    font-size: 20px;
    flex-shrink: 0;
}

.cm-telegram { background: #29a9eb; }
.cm-whatsapp { background: #25d366; }
.cm-ticket   { background: linear-gradient(145deg, #f3343a, var(--red-dark)); }

.contact-method h4 { font-size: 19px; color: #111; margin-bottom: 5px; }

.contact-method p {
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 8px;
}
.contact-method .cm-link {
    color: var(--red);
    font-size: 13.5px;
    font-weight: 700;
}

.contact-method .cm-link i { margin-left: 5px; font-size: 11px; }

/* ============================================================
   LEGAL / PROSE PAGES
   ============================================================ */

.prose {
    max-width: 820px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 44px 46px;
}

.prose .prose-meta {
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--gray-line);
    color: var(--text-muted);
    font-size: 13px;
}

.prose h2 {
    font-size: 25px;
    color: #111;
    margin: 32px 0 12px;
}

.prose h2:first-of-type { margin-top: 0; }

.prose h3 {
    font-family: var(--font-body);
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-size: 16.5px;
    font-weight: 700;
    color: #1d1d1d;
    margin: 22px 0 8px;
    line-height: 1.4;
}

.prose p { color: #4a4a4a; font-size: 15px; margin-bottom: 14px; }
.prose ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.prose ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.65;
}

.prose ul li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 4px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--red);
    transform: rotate(45deg);
}

.prose a { color: var(--red); font-weight: 600; }
.prose a:hover { text-decoration: underline; }

/* ============================================================
   PRICING / PLAN CARDS (about + pricing bands)
   ============================================================ */

.tier-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.tier {
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-top: 3px solid var(--red);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 32px 26px;
    text-align: center;
    transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.tier:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(224, 27, 34, .12);
}

.tier-featured {
    border: 2px solid var(--red);
    border-top: 3px solid var(--red);
    box-shadow: 0 16px 40px rgba(224, 27, 34, .16);
}

.tier-flag {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 14px;
    border-radius: var(--r-pill);
    background: var(--red);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.tier h3 { font-size: 24px; color: #111; margin-bottom: 6px; }

.tier .tier-vol {
    color: var(--text-muted);
    font-size: 13.5px;
    margin-bottom: 18px;
}

.tier .tier-rate {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 44px;
    color: var(--red);
    line-height: 1;
}

.tier .tier-rate small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    text-transform: none;
}
.tier-list {
    margin: 22px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-line);
    display: grid;
    gap: 11px;
    text-align: left;
}

.tier-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4a4a4a;
    font-size: 13.8px;
    line-height: 1.5;
}

.tier-list i {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border-radius: 50%;
    background: #111;
    color: var(--white);
    font-size: 8px;
    flex-shrink: 0;
}

/* ============================================================
   ABOUT PAGE — story split + numbered milestones
   ============================================================ */

.split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.split-text h2 {
    font-size: clamp(28px, 4vw, 44px);
    color: #111;
    margin-bottom: 16px;
}

.split-text h2 .text-red { color: var(--red); }
.split-text p {
    color: #4d4d4d;
    font-size: 15.5px;
    margin-bottom: 14px;
}

.split-img img {
    border-radius: var(--r-lg);
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .18));
}

.split-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 26px;
}

.split-mini div {
    padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-left: 3px solid var(--red);
    border-radius: var(--r-sm);
}

.split-mini strong {
    display: block;
    font-family: var(--font-head);
    font-style: italic;
    font-size: 27px;
    color: var(--red);
    line-height: 1;
    margin-bottom: 5px;
}

.split-mini span { color: var(--text-muted); font-size: 13px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 992px) {
    .page-hero { padding: 44px 0 48px; }

    .auth { grid-template-columns: 1fr; min-height: 0; }
    .auth-aside { padding: 44px 24px; }
    .auth-aside-inner { max-width: none; margin: 0 auto; text-align: center; }
    .auth-aside .auth-logo { margin-left: auto; margin-right: auto; }
    .auth-points { text-align: left; max-width: 440px; margin: 0 auto; }
    .cat-wrap { padding: 0 16px; }
    .cat-figs { gap: 24px; }
    .cat-fig .cf-n { font-size: 24px; }

    .doc-layout { grid-template-columns: 1fr; }
    .doc-nav { position: static; }
    .code-pair { grid-template-columns: 1fr; }

    .contact-layout { grid-template-columns: 1fr; }
    .tier-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .split { grid-template-columns: 1fr; gap: 30px; }
    .split-img { order: -1; max-width: 460px; margin: 0 auto; }
    .prose { padding: 30px 24px; }
}

@media (max-width: 640px) {
    .page-hero { padding: 36px 0 40px; }
    .page-hero p { font-size: 14.5px; }
    .auth-card { padding: 28px 22px; }
    .auth-card h1 { font-size: 29px; }
    .auth-main { padding: 34px 16px; }
    .split-mini { grid-template-columns: 1fr; }
    .doc-block > h2 { font-size: 24px; }

    /* Drop the low-signal columns rather than scrolling sideways. */
    .cat-table .cat-hide-sm { display: none; }
    .cat-table thead th,
    .cat-table tbody td { padding: 12px 12px; }
    .cat-top .cat-lede { display: none; }
    .cat-table thead th { top: calc(var(--nav-h) + 57px); }

    /* Even with Min/Max/Speed gone, the remaining columns carry inline width
       hints (74 + 130 + 118) that a `width: 100%` table treats as minimums,
       so the table stayed ~32px wider than a 390px viewport. `table-layout:
       fixed` makes those hints authoritative instead, and the narrower ID and
       Description columns below bring the total under the fold. Service name
       wraps rather than pushing the row wide. */
    .cat-table { table-layout: fixed; }
    .cat-table .td-id,
    .cat-table thead th:first-child { width: 54px; }
    .cat-table .svc-id-sm { display: inline; }
    .cat-table .svc-cell { gap: 8px; }
    .cat-table .svc-cell .svc-ic { display: none; }
    .cat-table .svc-cell strong { white-space: normal; }

    /* Icon-only Details button — the label is what made this column wide. */
    .cat-table thead th:last-child,
    .cat-table .td-center { width: 58px; }
    .desc-btn { padding: 7px 9px; }
    .desc-btn span { display: none; }
}

/* ===== panel.css ===== */
/* ============================================================
   HQ PROVIDER — MEMBER PANEL
   App shell (sidebar + topbar), dashboard widgets, order form,
   ticket threads and settings screens.
   Loaded after base.css + ui.css.
   ============================================================ */

/* base.css sets a black page background for the landing page; the
   panel body is a light workspace instead. */
body.panel-body { background: #f4f4f2; }

/* ============================================================
   SHELL
   Fixed dark sidebar, scrolling main column beside it.
   ============================================================ */

.shell {
    display: flex;
    min-height: 100vh;
}

.side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: var(--sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--black);
    border-right: 1px solid #1e1e1e;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--nav-h);
    padding: 0 18px;
    border-bottom: 3px solid var(--red);
    flex-shrink: 0;
}

.side-head img { height: 44px; width: auto; }

/* Close button, only visible while the drawer is open on mobile. */
.side-close {
    display: none;
    color: #9a9a9a;
    font-size: 20px;
    padding: 6px;
}

.side-close:hover { color: var(--white); }

/* Balance block under the logo. */
.side-balance {
    margin: 18px 14px;
    padding: 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline-red);
    background: linear-gradient(150deg, rgba(224, 27, 34, .18), rgba(224, 27, 34, .04));
}

.side-balance .sb-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c9c9c9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.side-balance .sb-amount {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 30px;
    color: var(--white);
    line-height: 1;
}
.side-balance .sb-amount small {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: #b9b9b9;
    margin-left: 3px;
}

.side-balance .btn { margin-top: 13px; width: 100%; justify-content: center; }

/* Navigation */
.side-nav { padding: 4px 10px 22px; flex: 1; }

.side-group {
    margin: 18px 8px 8px;
    color: #6f6f6f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.side-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 3px;
    border-radius: var(--r-sm);
    color: #cfcfcf;
    font-size: 14px;
    font-weight: 500;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.side-nav a i {
    width: 19px;
    font-size: 15px;
    text-align: center;
    color: #8a8a8a;
    transition: color .16s var(--ease);
    flex-shrink: 0;
}

.side-nav a:hover { background: #171717; color: var(--white); }
.side-nav a:hover i { color: var(--red); }

.side-nav a.active {
    background: linear-gradient(90deg, rgba(224, 27, 34, .22), rgba(224, 27, 34, .04));
    color: var(--white);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--red);
}
.side-nav a.active i { color: var(--red); }

.side-nav a .nav-tag {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--red);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
}

.side-foot {
    padding: 16px 18px;
    border-top: 1px solid #1c1c1c;
    color: #6a6a6a;
    font-size: 11.5px;
    line-height: 1.6;
    flex-shrink: 0;
}

.side-foot a { color: #9a9a9a; }
.side-foot a:hover { color: var(--red); }

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--nav-h);
    padding: 0 26px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-line);
    box-shadow: 0 1px 10px rgba(0, 0, 0, .04);
}

.topbar-toggle {
    display: none;
    color: #222;
    font-size: 20px;
    padding: 8px;
    margin-left: -8px;
}

.topbar h1 {
    font-size: 24px;
    color: #111;
    line-height: 1.15;
}
.topbar .tb-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Compact balance chip, mirrors the sidebar figure. */
.tb-balance {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-line);
    background: #fafafa;
}

.tb-balance i { color: var(--red); font-size: 14px; }

.tb-balance span {
    color: #111;
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tb-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-line);
    background: var(--white);
    color: #444;
    font-size: 15px;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}

.tb-icon:hover { border-color: var(--red); color: var(--red); }
.tb-icon .dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px var(--white);
}

/* User chip with avatar + name */
.tb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--r-pill);
    border: 1px solid var(--gray-line);
    background: var(--white);
}

.tb-user:hover { border-color: #cfcfcf; }

.tb-user .tb-name {
    color: #1d1d1d;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}

.tb-user .tb-role {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

.tb-user i { color: #9a9a9a; font-size: 11px; }

/* ============================================================
   PAGE BODY
   ============================================================ */

.page {
    flex: 1;
    padding: 26px;
}

.page-wide { max-width: 1320px; }

/* Section label above a group of cards. */
.page-sec-title {
    font-size: 20px;
    color: #111;
    margin-bottom: 14px;
}
/* ============================================================
   DASHBOARD — STAT TILES
   ============================================================ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.kpi {
    position: relative;
    padding: 20px 22px;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-top: 3px solid var(--red);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.kpi:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(224, 27, 34, .1);
}

.kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kpi-label {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.kpi-ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: var(--red-soft);
    color: var(--red);
    font-size: 17px;
    flex-shrink: 0;
}
/* Neutral icon tints for tiles that are not the primary metric. */
.kpi-ic-dark  { background: #ededeb; color: #333; }
.kpi-ic-green { background: #e7f7ee; color: #10794b; }
.kpi-ic-blue  { background: #e8f0fe; color: #1a56c4; }

.kpi-value {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 34px;
    color: #111;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.kpi-value small {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}

.kpi-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.kpi-delta { font-weight: 700; }
.kpi-delta-up   { color: #10794b; }
.kpi-delta-down { color: var(--red); }

/* ============================================================
   DASHBOARD — TWO COLUMN AREA
   ============================================================ */

.dash-cols {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 18px;
    align-items: start;
}

.dash-cols-even {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
/* Pure-CSS bar chart. Heights are set inline per bar. */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 210px;
    padding-top: 10px;
}

.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.chart-bar {
    position: relative;
    width: 100%;
    max-width: 42px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #f3343a, var(--red-dark));
    transition: filter .18s var(--ease);
}

.chart-col:hover .chart-bar { filter: brightness(1.12); }

/* Value label floating above each bar. */
.chart-bar span {
    position: absolute;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
    color: #555;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.chart-x {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
}

/* Ranked list — top services by volume. */
.rank-list { display: grid; gap: 14px; }
.rank-item .ri-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.rank-item .ri-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--gray-bg);
    font-size: 13px;
    flex-shrink: 0;
}

.rank-item .ri-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2a2a2a;
    font-size: 13.5px;
    font-weight: 600;
}

.rank-item .ri-val {
    color: #111;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Progress track */
.bar {
    height: 7px;
    border-radius: 4px;
    background: #eeeeec;
    overflow: hidden;
}

.bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--red), #f3646a);
}

.bar-dark { background: #232323; }
/* Quick action grid on the dashboard. */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.qa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid var(--gray-line);
    border-radius: var(--r-sm);
    background: var(--white);
    transition: all .18s var(--ease);
}

.qa:hover {
    border-color: var(--red);
    background: #fffafa;
    transform: translateY(-2px);
}

.qa i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--red-soft);
    color: var(--red);
    font-size: 15px;
    flex-shrink: 0;
}

.qa strong {
    display: block;
    color: #1d1d1d;
    font-size: 13.8px;
    font-weight: 600;
    line-height: 1.25;
}

.qa small { color: var(--text-muted); font-size: 12px; }

/* ============================================================
   NEW ORDER FORM
   Service picker on the left, live summary on the right.
   ============================================================ */
.order-cols {
    display: grid;
    grid-template-columns: 1fr 344px;
    gap: 18px;
    align-items: start;
}

.order-summary { position: sticky; top: calc(var(--nav-h) + 18px); }

.sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px dashed #e8e8e6;
    font-size: 14px;
}

.sum-row:last-of-type { border-bottom: 0; }
.sum-row .sum-k { color: var(--text-muted); }

.sum-row .sum-v {
    color: #1d1d1d;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sum-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 15px 18px;
    border-radius: var(--r-sm);
    background: #111;
    color: var(--white);
}

.sum-total .st-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #c6c6c6;
}

.sum-total .st-v {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: 28px;
    color: var(--red);
    line-height: 1;
}
/* Service meta strip shown once a service is selected. */
.svc-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--gray-line);
    border: 1px solid var(--gray-line);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.svc-meta div {
    padding: 13px 12px;
    background: #fafafa;
    text-align: center;
}

.svc-meta .sm-k {
    display: block;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.svc-meta .sm-v {
    color: #111;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   ADD FUNDS — payment method picker
   ============================================================ */

.pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Radio card: the input is hidden, the label is the tile. */
.pay-opt { position: relative; }

.pay-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pay-opt label {
    display: block;
    height: 100%;
    padding: 20px 16px;
    border: 2px solid var(--gray-line);
    border-radius: var(--r-md);
    background: var(--white);
    text-align: center;
    cursor: pointer;
    transition: all .18s var(--ease);
}

.pay-opt label:hover { border-color: #cfcfcf; transform: translateY(-2px); }

.pay-opt input:checked + label {
    border-color: var(--red);
    background: #fffafa;
    box-shadow: 0 8px 22px rgba(224, 27, 34, .12);
}

/* Keyboard focus ring, since the real input is visually hidden. */
.pay-opt input:focus-visible + label {
    outline: 3px solid var(--red);
    outline-offset: 2px;
}

.pay-opt .po-ic {
    font-size: 30px;
    margin-bottom: 10px;
    color: #333;
}

.pay-opt input:checked + label .po-ic { color: var(--red); }

.pay-opt .po-name {
    display: block;
    color: #1d1d1d;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

.pay-opt .po-fee { color: var(--text-muted); font-size: 12px; }

/* Preset top-up amounts. */
.amt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}
.amt-chip {
    padding: 9px 17px;
    border-radius: var(--r-sm);
    border: 1px solid var(--gray-line);
    background: var(--white);
    color: #333;
    font-size: 14px;
    font-weight: 700;
    transition: all .16s var(--ease);
}

.amt-chip:hover { border-color: var(--red); color: var(--red); }

.amt-chip.active {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
}

/* ============================================================
   SUPPORT TICKETS
   ============================================================ */

.thread { display: grid; gap: 16px; }

.msg {
    display: flex;
    gap: 13px;
    max-width: 82%;
}

/* Own messages align right and mirror the avatar to the far side. */
.msg-me { margin-left: auto; flex-direction: row-reverse; }

.msg-bubble {
    padding: 14px 17px;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--gray-line);
    box-shadow: var(--sh-sm);
}

.msg-me .msg-bubble {
    background: #111;
    border-color: #111;
    color: var(--white);
}

.msg-staff .msg-bubble { border-left: 3px solid var(--red); }
.msg-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 6px;
}

.msg-head strong { color: #111; font-size: 13.5px; font-weight: 700; }
.msg-me .msg-head strong { color: var(--white); }

.msg-head .msg-time { color: var(--text-muted); font-size: 11.5px; }
.msg-me .msg-head .msg-time { color: #9a9a9a; }

.msg-bubble p { font-size: 14px; line-height: 1.65; color: #3d3d3d; }
.msg-me .msg-bubble p { color: #e4e4e4; }

.msg .avatar { width: 40px; height: 40px; }
.msg-me .avatar { background: #111; }

/* Staff avatars keep the red gradient from .avatar. */
.msg-staff .avatar { font-size: 14px; }

/* Attachment list under a message body. Inherits the bubble's text colour so
   one rule covers both the dark customer bubble and the light support one. */
.msg-files {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.msg-me .msg-files { border-top-color: rgba(255, 255, 255, .14); }

.msg-files a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
}
.msg-me .msg-files a { color: #ff8a8f; }
.msg-files a:hover { text-decoration: underline; }
.msg-files i { color: inherit; opacity: .75; }

/* Refill / cancel buttons in the orders table. Right-aligned to match the
   column, and allowed to wrap so a row with both plus a status chip does not
   force the table wider. */
.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* Ticket subject with an unread support reply: a red dot ahead of the text.
   `::before` rather than an <i> so the marker cannot be selected or copied
   along with the subject. */
.tk-unread { color: #111; }
.tk-unread::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--red);
    vertical-align: middle;
}

/* ============================================================
   SETTINGS — API key panel
   ============================================================ */

.api-panel {
    padding: 22px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, #151515, #0c0c0c);
    border: 1px solid var(--hairline-red);
    color: var(--white);
}

.api-panel h4 { color: var(--white); font-size: 19px; margin-bottom: 6px; }

.api-panel > p {
    color: #a8a8a8;
    font-size: 13.5px;
    margin-bottom: 18px;
}

.api-panel .copy-box {
    background: rgba(255, 255, 255, .04);
    border-color: #333;
}

.api-panel .copy-box .copy-val { color: #e0e0e0; }
/* Settings layout: vertical section nav beside the forms. */
.set-cols {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 18px;
    align-items: start;
}

.set-nav {
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 10px;
    position: sticky;
    top: calc(var(--nav-h) + 18px);
}

.set-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 500;
}

.set-nav a i { width: 17px; text-align: center; font-size: 14px; color: #999; }
.set-nav a:hover { background: #f8f8f6; color: #111; }

.set-nav a.active {
    background: var(--red-soft);
    color: var(--red);
    font-weight: 700;
}

.set-nav a.active i { color: var(--red); }

/* Toggle switch */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0ee;
}

.switch-row:last-child { border-bottom: 0; }
.switch-row .sr-text strong {
    display: block;
    color: #1d1d1d;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 3px;
}

.switch-row .sr-text span {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch .track {
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    background: #cfcfcf;
    transition: background .2s var(--ease);
    pointer-events: none;
}

.switch .track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .2s var(--ease);
}
.switch input:checked + .track { background: var(--red); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--red); outline-offset: 2px; }

/* ============================================================
   RESPONSIVE
   Sidebar collapses into an overlay drawer below 1080px.
   ============================================================ */

.side-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), visibility .22s var(--ease);
}

@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .order-cols { grid-template-columns: 1fr; }
    .order-summary { position: static; }
}

@media (max-width: 1080px) {
    .side {
        transform: translateX(-100%);
        transition: transform .24s var(--ease);
        box-shadow: 12px 0 32px rgba(0, 0, 0, .3);
    }

    .side.open { transform: translateX(0); }
    .side-scrim.show { opacity: 1; visibility: visible; }
    .side-close { display: block; }

    .main { margin-left: 0; }
    .topbar-toggle { display: block; }

    .dash-cols,
    .dash-cols-even { grid-template-columns: 1fr; }

    .set-cols { grid-template-columns: 1fr; }
    .set-nav { position: static; display: flex; overflow-x: auto; }
    .set-nav a { white-space: nowrap; }
}
@media (max-width: 768px) {
    .page { padding: 18px 16px; }
    .topbar { padding: 0 16px; gap: 12px; }
    .topbar h1 { font-size: 20px; }
    .topbar .tb-sub { display: none; }

    /* Keep only the avatar and the balance chip in the topbar. The whole
       text block goes, not just `.tb-name`: the name and role sit inside a
       shared wrapper <span>, so hiding the two leaves the wrapper holding
       the role's width and the topbar still overflows the viewport. */
    .tb-user > span:not(.avatar),
    .tb-user i { display: none; }
    .tb-user { padding: 5px; }

    /* The title must be allowed to shrink. `.topbar h1` is a flex item with
       content-based min-width, so a long page title pushes `.topbar-right`
       off-screen instead of ellipsing. */
    .topbar > div { min-width: 0; }
    .topbar h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pay-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-meta { grid-template-columns: repeat(2, 1fr); }
    .qa-grid { grid-template-columns: 1fr; }
    .msg { max-width: 100%; }
    .chart { height: 175px; gap: 6px; }
}

@media (max-width: 560px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-value { font-size: 30px; }
    .tb-balance span { font-size: 13.5px; }
    .pay-grid { grid-template-columns: 1fr; }
    .sum-total .st-v { font-size: 24px; }

    /* Hide the low-signal columns rather than scrolling wide tables. */
    .table .col-hide-sm { display: none; }
}

/* ===== panel2.css ===== */
/* ============================================================
   PANEL — SECOND-TIER PAGES
   Components used only by the pages added after the core five
   (blog, notifications, affiliates, mass order, child panels,
   refunds, updates, the auth side-pages). Kept in its own file
   so the original five stay small and diffable; concatenated
   last by _build.py, so anything here can also correct an
   earlier rule without a specificity fight.
   ============================================================ */

/* ------------------------------------------------------------
   NARROW PAGE
   Forms and prose read badly at the full 1320px content width.
   `.page` already centres and pads; this only caps the measure.
   ------------------------------------------------------------ */
.page-narrow { max-width: 860px; }

/* ------------------------------------------------------------
   PROSE PAGES (terms, faq, newpage, blog)
   `.prose` is already defined in pages.css and is the card itself
   — border, padding, shadow — covering h2/h3/p/ul/a. What follows
   only fills the gaps, because the body is arbitrary HTML the
   operator wrote in the admin and it can contain anything a
   rich-text editor emits, not just the tags the landing pages used.
   ------------------------------------------------------------ */
.prose-page { max-width: 900px; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose h1 {
    margin: 0 0 14px;
    color: #111;
    font-family: var(--font-head);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.prose h4 {
    margin: 20px 0 8px;
    color: #1d1d1d;
    font-size: 15px;
    font-weight: 700;
}

/* pages.css styles `ul` with a custom red marker but leaves `ol` unstyled,
   where a numbered list needs its markers back. */
.prose ol {
    margin: 0 0 16px;
    padding-left: 22px;
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.65;
}
.prose ol li { margin-bottom: 9px; }

.prose strong { color: #111; font-weight: 700; }

.prose blockquote {
    margin: 18px 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--red);
    color: var(--text-muted);
    font-size: 15px;
}

.prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--gray-bg);
    color: #b3151b;
    font-size: 13px;
}

.prose pre {
    margin: 0 0 16px;
    padding: 14px 16px;
    overflow-x: auto;
    border: 0;
    border-radius: var(--r-md);
    background: var(--black-card);
    color: #e0e0e0;
    font-size: 13px;
}
.prose pre code { padding: 0; background: none; color: inherit; }

.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }

.prose hr { margin: 26px 0; border: 0; border-top: 1px solid var(--gray-line); }

.prose table {
    width: 100%;
    margin: 0 0 18px;
    border: 1px solid var(--gray-line);
    border-radius: var(--r-md);
    border-collapse: collapse;
    font-size: 14px;
}
.prose th, .prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-line);
    text-align: left;
}
.prose th { background: #fafafa; color: #111; font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }

/* The operator has not written this page yet. Naming the admin location beats
   a blank card, because the person seeing it is usually the operator. */
.prose-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.prose-empty i {
    display: block;
    margin-bottom: 12px;
    color: #cfcfcf;
    font-size: 28px;
}
/* Overrides `.prose h2`'s left-aligned 25px, since here it is the centred
   headline of an empty state rather than a section heading in a document. */
.prose-empty h2 { margin: 0 0 8px; font-size: 21px; }
.prose-empty p { max-width: 420px; margin: 0 auto; }
.prose-empty code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--gray-bg);
    color: #444;
    font-size: 12px;
}

/* Footer call-to-action under the FAQ body. */
.prose-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    padding: 20px 22px;
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    background: #fafafa;
}
.prose-cta h4 { margin: 0 0 4px; color: #111; font-size: 17px; }
.prose-cta p { margin: 0; color: var(--text-muted); font-size: 14px; }
.prose-cta .btn { flex-shrink: 0; }

/* ------------------------------------------------------------
   BLOG LIST
   ------------------------------------------------------------ */
.blog-intro {
    margin-bottom: 26px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.7;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--sh-sm);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

.pc-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-bg);
}
.pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pc-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
}

.pc-title {
    margin: 0 0 8px;
    color: #111;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.pc-excerpt {
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
}

/* Pushed to the card foot so links line up across a row of cards whose
   excerpts are different lengths. */
.pc-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}
.pc-link i { font-size: 11px; transition: transform .18s var(--ease); }
.post-card:hover .pc-link i { transform: translateX(3px); }

/* ------------------------------------------------------------
   BLOG POST
   ------------------------------------------------------------ */
.post-lead {
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--gray-bg);
}
.post-lead img { width: 100%; height: auto; display: block; }

.post-title {
    margin: 0 0 18px;
    color: #111;
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.post-back { margin-top: 30px; }

/* ------------------------------------------------------------
   AUTH SIDE-PAGES
   ------------------------------------------------------------ */
.reset-note {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

/* One-time code. Wide tracking makes a 6-digit code easy to proof-read
   against an authenticator app. */
.input-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .35em;
    text-align: center;
}
.input-code::placeholder { letter-spacing: .2em; opacity: .35; }

.input-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 13px;
    line-height: 1.7;
}

/* Looks like an input, is not one — a value the user cannot change. Matching
   `.input`'s box keeps the form's rhythm; the tinted fill says it is inert. */
.input-static {
    display: flex;
    align-items: center;
    background: var(--gray-bg);
    color: var(--text-muted);
    cursor: default;
}

/* ------------------------------------------------------------
   CONFIRM EMAIL
   ------------------------------------------------------------ */
.confirm-email { max-width: 620px; margin: 0 auto; }

.ce-mark {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red);
    font-size: 30px;
}

.ce-title {
    margin: 0 0 12px;
    color: #111;
    font-family: var(--font-head);
    font-size: 27px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.ce-desc {
    max-width: 440px;
    margin: 0 auto 26px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}
.ce-desc strong { color: #111; }

.ce-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* ------------------------------------------------------------
   NOTIFICATIONS — CHANNELS
   ------------------------------------------------------------ */
.chan {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-line);
}
.chan:first-child { padding-top: 0; }
.chan:last-child { padding-bottom: 0; border-bottom: 0; }

.chan-ic {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    font-size: 17px;
}
.chan-mail { background: var(--red-soft); color: var(--red); }
.chan-tg { background: #e5f3fb; color: #229ed9; }

.chan-text { flex: 1; min-width: 0; }
.chan-text strong { display: block; color: #111; font-size: 15px; }
.chan-text span { color: var(--text-muted); font-size: 13px; }
.chan-text .st { margin-top: 5px; }

.chan-action { flex-shrink: 0; }

/* ------------------------------------------------------------
   NOTIFICATIONS — MATRIX
   A checkbox per (event, channel). The event names come from the
   panel and can be long, so the first column takes the slack and
   the channel columns stay a fixed narrow width.
   ------------------------------------------------------------ */
.nt-table { width: 100%; font-size: 14px; }

.nt-table th,
.nt-table td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--gray-line);
}
.nt-table tbody tr:last-child td { border-bottom: 0; }
.nt-table tbody tr:hover { background: #fbfbfb; }

.nt-name { color: #2a2a2a; text-align: left; }

.nt-col {
    width: 92px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}
.nt-table td.nt-col { text-align: center; }

/* A checkbox with no label beside it — the column header is the label, so the
   flex gap and text styling `.check` brings would only add dead space. */
.check-bare {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.check-bare input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--red);
    cursor: pointer;
}

/* ------------------------------------------------------------
   AFFILIATES
   ------------------------------------------------------------ */
.af-intro {
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* Commission rate and minimum payout: two numbers, no trend, no action.
   Tiles rather than the one-row tables the stock template used. */
.af-terms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.af-term {
    padding: 16px 18px;
    border: 1px solid var(--gray-line);
    border-radius: var(--r-lg);
    background: #fafafa;
}

.aft-label {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.aft-value {
    color: #111;
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/* Two KPIs instead of `.kpi-grid`'s four, so they do not stretch. */
.kpi-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* ------------------------------------------------------------
   MASS ORDER RESULT
   ------------------------------------------------------------ */
.mo-result { margin-bottom: 20px; }

.mo-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.mo-ok,
.mo-bad {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
}
.mo-ok { background: #e7f7ee; color: #10794b; }
.mo-bad { background: #fdeaea; color: #b3151b; }

.mo-result .alert { margin-bottom: 8px; }
.mo-result .alert:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   CHILD PANEL
   ------------------------------------------------------------ */
.cp-ns { align-items: flex-start; }

.cp-ns-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.cp-ns-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.cp-ns-list code {
    padding: 4px 9px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .05);
    color: #1a1a1a;
    font-size: 13px;
}

.cp-renew {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cp-renew span { flex: 1; }
.cp-renew .btn { flex-shrink: 0; }

/* ------------------------------------------------------------
   UPDATES
   The panel sends a service name per row; it repeats often, so it
   is set apart from the update text rather than run together.
   ------------------------------------------------------------ */
.up-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.service-name {
    display: block;
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

/* ------------------------------------------------------------
   TABLE HELPERS
   ------------------------------------------------------------ */

/* Tabular numerals so quantities and prices align down a column even in a
   proportional face, where a 1 is otherwise narrower than an 8. */
.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The "/ total" half of "1,240 / 5,000" — dimmed so the live figure leads. */
.df-of { color: var(--text-dim); font-weight: 400; }

/* The panel's reason for a status, under the chip. */
.st-why {
    display: block;
    margin-top: 4px;
    max-width: 220px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.width-40 { width: 40%; }

.td-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #111;
    font-weight: 600;
    text-decoration: none;
}
.td-link:hover { color: var(--red); }
.td-link i { color: var(--text-dim); font-size: 11px; }
.td-link:hover i { color: var(--red); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .post-grid { grid-template-columns: 1fr; }
    .prose-cta { flex-direction: column; align-items: flex-start; }
    .kpi-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .af-terms { grid-template-columns: 1fr; }
    .post-title { font-size: 26px; }
    .ce-actions { flex-direction: column; }
    .ce-actions .btn { width: 100%; justify-content: center; }

    /* The channel rows stack: at this width the 42px icon plus a button on one
       line squeezes the text to a couple of words per line. */
    .chan { flex-wrap: wrap; }
    .chan-action { width: 100%; padding-left: 56px; }
    .chan-action .btn { width: 100%; justify-content: center; }

    .cp-renew { flex-direction: column; align-items: flex-start; }
    .cp-ns-list li { flex-wrap: wrap; }

    /* The matrix cannot narrow past its columns, so it scrolls. `.table-wrap`
       supplies the overflow; this just stops the name column collapsing. */
    .nt-table { min-width: 460px; }
    .nt-name { min-width: 180px; }
}