/* ===========================================================
   Styx — Mission Control template.
   Mirrors the "Homepage V2 — Mission Control" Pencil design.
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
    --mc-ink: #121826;
    --mc-ink-2: #4B5563;
    --mc-muted: #9CA3AF;
    --mc-border: #C9CDD6;
    --mc-border-subtle: #E5E7EB;
    --mc-surface: #FFFFFF;
    --mc-surface-2: #F7F6F2;
    --mc-accent: #FACC15;
    --mc-amber: #F59E0B;
    --mc-launch: #EA580C;
    --mc-green: #1FA463;

    --font-head: "Anton", "Impact", sans-serif;
    --font-body: "Geist", system-ui, sans-serif;
    --font-data: "Geist Mono", "SF Mono", monospace;
    --font-mono: "IBM Plex Mono", "SF Mono", monospace;

    --mc-maxw: 1280px;
    --mc-pad-x: clamp(20px, 4vw, 56px);
}

.mc-container {
    width: 100%;
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--mc-surface-2);
    color: var(--mc-ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

.mc-page { width: 100%; }

/* ============ 00 PARTNER BAR ============ */
.mc-partner {
    background: var(--mc-ink);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid #2A303E;
}
.mc-partner__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 9px var(--mc-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.mc-partner__lead {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mc-partner__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mc-accent);
    color: var(--mc-ink);
    font-weight: 600;
    letter-spacing: 2.5px;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
    animation: mc-pulse-amber 2.4s ease-in-out infinite;
}
.mc-partner__badge:hover {
    filter: brightness(1.08);
    color: var(--mc-ink);
    transform: translateY(-1px);
}
.mc-partner__badge__arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s ease;
}
.mc-partner__badge:hover .mc-partner__badge__arrow {
    transform: translate(2px, -2px);
}
.mc-partner__chev {
    display: inline-block;
    color: var(--mc-accent);
    animation: mc-chev 1.6s ease-in-out infinite;
}
@keyframes mc-chev {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50%      { transform: translateX(4px); opacity: 1; }
}
.mc-partner__static {
    color: var(--mc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-partner__sep { color: var(--mc-accent); }

/* ============ PRODUCT DETAILS (twenty-one fallback skin) ============ */
main .product-details { padding: 0 !important; }
main .product-status {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-ink) !important;
    padding: 28px 24px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    position: relative !important;
}
main .product-status::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--mc-ink);
}
main .product-status-active::before { background: var(--mc-green); }
main .product-status-pending::before { background: var(--mc-amber); }
main .product-status-suspended::before, main .product-status-terminated::before { background: var(--mc-launch); }
main .product-status-cancelled::before { background: var(--mc-ink-2); }
main .product-icon { margin-bottom: 8px; }
main .product-icon .fa-stack {
    color: var(--mc-ink) !important;
    margin-bottom: 12px !important;
    font-size: 1.4em !important;
}
main .product-icon .fa-stack i.fas:first-child {
    color: var(--mc-accent) !important;
}
main .product-icon h3 {
    font-family: var(--font-head) !important;
    font-size: 28px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
    margin: 0 0 4px !important;
    line-height: 1.1 !important;
}
main .product-icon h4 {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: var(--mc-ink-2) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}
main .product-status-text {
    margin-top: 16px !important;
    padding: 10px 16px !important;
    background: var(--mc-surface-2) !important;
    border: 1px solid var(--mc-border) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
    display: inline-block !important;
}
main .product-status-active .product-status-text { color: var(--mc-green) !important; border-color: var(--mc-green) !important; background: rgba(31,164,99,0.06) !important; }
main .product-status-suspended .product-status-text,
main .product-status-terminated .product-status-text { color: var(--mc-launch) !important; border-color: var(--mc-launch) !important; background: rgba(234,88,12,0.06) !important; }
main .product-status-pending .product-status-text { color: var(--mc-amber) !important; border-color: var(--mc-amber) !important; background: rgba(245,158,11,0.06) !important; }

main .product-details + ul.nav-tabs,
main ul.nav-tabs.responsive-tabs-sm,
main ul.nav-tabs {
    border-bottom: 2px solid var(--mc-ink) !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    list-style: none !important;
}
main ul.nav-tabs .nav-item { margin: 0 !important; }
main ul.nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 13px 22px !important;
    color: var(--mc-ink-2) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    transition: color 0.15s, border-color 0.15s, background 0.15s !important;
}
main ul.nav-tabs .nav-link:hover {
    color: var(--mc-ink) !important;
    background: var(--mc-surface) !important;
}
main ul.nav-tabs .nav-link.active {
    color: var(--mc-ink) !important;
    border-bottom-color: var(--mc-accent) !important;
    background: var(--mc-surface) !important;
}
main ul.nav-tabs .nav-link i { color: var(--mc-accent) !important; margin-right: 6px !important; }

main .responsive-tabs-sm-connector { display: none !important; }
main .product-details-tab-container,
main .tab-content.bg-white {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-top: none !important;
    padding: 28px !important;
}
main .tab-pane { color: var(--mc-ink) !important; }
main .tab-pane h4,
main .tab-pane strong { color: var(--mc-ink) !important; }
main .tab-pane h4 {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink-2) !important;
    margin: 18px 0 6px !important;
}
main .tab-pane .row { margin-bottom: 6px !important; padding: 8px 0 !important; border-bottom: 1px dashed var(--mc-border-subtle) !important; }
main .tab-pane .row:last-child { border-bottom: none !important; }

/* Cancel / upgrade button block under status */
main .product-status + .row,
main .product-status ~ .row .btn-block { margin-top: 8px !important; }

/* ============ BILLING / CHANNEL SUBNAV ============ */
.mc-subnav {
    background: var(--mc-ink);
    border-bottom: 2px solid var(--mc-accent);
    position: sticky;
    top: 0;
    z-index: 50;
}
.mc-subnav__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    display: flex;
    align-items: stretch;
    gap: 28px;
    min-height: 48px;
}
.mc-subnav__title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-accent);
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    padding-right: 28px;
}
.mc-subnav__dot {
    width: 7px;
    height: 7px;
    background: var(--mc-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--mc-accent);
    animation: mc-subnav-pulse 2.2s ease-in-out infinite;
}
@keyframes mc-subnav-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.18); }
}
.mc-subnav__links {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    align-items: stretch;
}
.mc-subnav__links::-webkit-scrollbar { display: none; }
.mc-subnav__links a {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    color: rgba(255,255,255,0.62);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 500;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mc-subnav__links a:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.mc-subnav__links a.is-active {
    color: var(--mc-accent);
    border-bottom-color: var(--mc-accent);
    background: rgba(250,204,21,0.06);
}
@media (max-width: 820px) {
    .mc-subnav__inner { flex-direction: column; align-items: stretch; padding-top: 10px; padding-bottom: 0; gap: 4px; min-height: 0; }
    .mc-subnav__title { border-right: none; padding-right: 0; padding-bottom: 4px; }
    .mc-subnav__links a { padding: 12px 14px; font-size: 10px; }
}

/* ============ 01 NAV ============ */
.mc-nav {
    background: var(--mc-surface);
    border-bottom: 1px solid var(--mc-border);
}
.mc-nav__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 16px var(--mc-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mc-nav__brand { display: flex; align-items: center; gap: 14px; }

.mc-nav__logo {
    height: 36px;
    width: auto;
    display: block;
    filter: brightness(0);
}

.mc-nav__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    padding-left: 14px;
    border-left: 1px solid var(--mc-border);
}

.mc-nav__links { display: flex; gap: 34px; }
.mc-nav__links a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--mc-ink-2);
}
.mc-nav__links a:hover { color: var(--mc-ink); }

.mc-nav__right { display: flex; align-items: center; gap: 20px; }

.mc-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-ink-2);
}
.mc-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mc-green);
    box-shadow: 0 0 0 0 rgba(31, 164, 99, 0.6);
    animation: mc-pulse-green 2.2s ease-out infinite;
}
@keyframes mc-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(31, 164, 99, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(31, 164, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 164, 99, 0); }
}

.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--mc-ink);
    background: var(--mc-accent);
    border: 0;
    cursor: pointer;
    transition: filter 0.15s;
}
.mc-btn { position: relative; overflow: hidden; transition: transform 0.15s ease, filter 0.15s ease; }
.mc-btn:hover { filter: brightness(0.95); transform: translateY(-1px); }
.mc-btn:active { transform: translateY(0); }
.mc-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
}
.mc-btn:hover::after { animation: mc-shine 0.7s ease-out; }
@keyframes mc-shine {
    to { transform: translateX(100%); }
}

.mc-btn--ghost {
    background: transparent;
    color: var(--mc-ink);
    border: 1.5px solid var(--mc-ink);
}

.mc-btn--lg { padding: 15px 26px; font-size: 14px; }
.mc-btn--xl { padding: 16px 34px; font-size: 15px; }

.mc-btn--launch { background: var(--mc-launch); color: #fff; }

.mc-btn--lmp {
    background: var(--mc-ink);
    color: #fff;
    border: 1.5px solid var(--mc-ink);
    position: relative;
    padding: 15px 22px 15px 22px;
}
.mc-btn--lmp::before,
.mc-btn--lmp::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--mc-accent);
    pointer-events: none;
}
.mc-btn--lmp::before { top: -1.5px; left: -1.5px;  border-right: none; border-bottom: none; }
.mc-btn--lmp::after  { bottom: -1.5px; right: -1.5px; border-left: none;  border-top: none; }

.mc-btn--lmp:hover {
    background: #1F2937;
    color: #fff;
    transform: translateY(-1px);
}

.mc-btn--lmp__star {
    color: var(--mc-accent);
    margin-right: 8px;
    font-size: 13px;
}
.mc-btn--lmp__arrow {
    display: inline-block;
    margin-left: 8px;
    color: var(--mc-accent);
    transition: transform 0.2s ease;
}
.mc-btn--lmp:hover .mc-btn--lmp__arrow { transform: translate(3px, -3px); }

/* ============ 02 HERO ============ */
.mc-hero {
    background: var(--mc-surface-2);
    padding: 78px 0 68px;
    position: relative;
    overflow: hidden;
}
.mc-hero__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    display: flex;
    flex-direction: column;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.mc-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(18, 24, 38, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 24, 38, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    pointer-events: none;
    animation: mc-drift 24s linear infinite;
}
@keyframes mc-drift {
    from { background-position: 0 0; }
    to   { background-position: 48px 48px; }
}

.mc-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-eyebrow::before,
.mc-eyebrow::after {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--mc-amber);
}

.mc-hero__primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: 100%;
}

.mc-headline {
    font-family: var(--font-head);
    font-size: 76px;
    letter-spacing: 1px;
    line-height: 0.98;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.mc-headline__hl {
    display: inline-flex;
    align-items: center;
    background: var(--mc-accent);
    padding: 2px 16px 8px;
    position: relative;
    animation: mc-hl-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}
@keyframes mc-hl-in {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0.4;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.mc-headline {
    animation: mc-fade-up 0.6s ease-out 0.05s backwards;
}
.mc-subhead, .mc-actions, .mc-trust {
    animation: mc-fade-up 0.6s ease-out backwards;
}
.mc-subhead { animation-delay: 0.25s; }
.mc-actions { animation-delay: 0.35s; }
.mc-trust   { animation-delay: 0.45s; }
@keyframes mc-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.mc-subhead {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--mc-ink-2);
    text-align: center;
    max-width: 660px;
    margin: 0;
}

.mc-actions {
    display: flex;
    gap: 14px;
    padding-top: 8px;
    align-items: center;
    position: relative;
    z-index: 50;
}

/* ============ Header account dropdown (top-right DEPLOY ▾) ============ */
.mc-account { position: relative; }
.mc-account > summary { list-style: none; cursor: pointer; }
.mc-account > summary::-webkit-details-marker { display: none; }
.mc-account__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mc-account__caret {
    display: inline-block;
    font-size: 9px;
    transition: transform 0.18s ease;
}
.mc-account[open] .mc-account__caret { transform: rotate(180deg); }

.mc-account__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-ink);
    box-shadow: 0 18px 44px -16px rgba(18, 24, 38, 0.4);
    z-index: 100;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-6px);
    animation: mc-account-in 0.18s ease-out forwards;
}
@keyframes mc-account-in {
    to { opacity: 1; transform: translateY(0); }
}
.mc-account__menu::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: var(--mc-surface);
    border-left: 1.5px solid var(--mc-ink);
    border-top: 1.5px solid var(--mc-ink);
    transform: rotate(45deg);
}
.mc-account__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mc-border-subtle);
    text-decoration: none !important;
    color: var(--mc-ink) !important;
    transition: background 0.12s ease, padding-left 0.12s ease;
    border-left: 3px solid transparent !important;
}
.mc-account__item:last-child { border-bottom: 0; }
.mc-account__item:hover {
    background: var(--mc-surface-2) !important;
    padding-left: 24px;
    border-left-color: var(--mc-accent) !important;
}
.mc-account__item__label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
}
.mc-account__item__hint {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.8px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-account__item__arrow {
    color: var(--mc-amber);
    margin-left: 2px;
}
.mc-account__item--external {
    background: var(--mc-surface-2);
}
.mc-account__item--external:hover {
    background: var(--mc-ink) !important;
    color: #fff !important;
}
.mc-account__item--external:hover .mc-account__item__label { color: #fff; }
.mc-account__item--external:hover .mc-account__item__hint { color: rgba(255,255,255,0.7); }
.mc-account__item--external:hover .mc-account__item__arrow { color: var(--mc-accent); }

@media (max-width: 880px) {
    .mc-account__menu {
        position: static;
        right: auto;
        width: 100%;
        margin-top: 12px;
        animation: none;
        opacity: 1;
        transform: none;
        box-shadow: none;
    }
    .mc-account__menu::before { display: none; }
}

/* ============ Deploy disclosure menu ============ */
.mc-deploy { position: relative; }
.mc-deploy > summary { list-style: none; cursor: pointer; }
.mc-deploy > summary::-webkit-details-marker { display: none; }
.mc-deploy__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.mc-deploy__caret {
    display: inline-block;
    font-size: 10px;
    transition: transform 0.2s ease;
}
.mc-deploy[open] .mc-deploy__caret { transform: rotate(180deg); }

.mc-deploy__panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(1040px, calc(100vw - var(--mc-pad-x) * 2));
    background: var(--mc-surface);
    border: 1px solid var(--mc-ink);
    box-shadow: 0 32px 72px -24px rgba(18, 24, 38, 0.45);
    z-index: 60;
    opacity: 0;
    animation: mc-deploy-in 0.22s ease-out forwards;
}
@keyframes mc-deploy-in {
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mc-deploy__panel::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--mc-surface);
    border-left: 1px solid var(--mc-ink);
    border-top: 1px solid var(--mc-ink);
}
.mc-deploy__panel__hd {
    padding: 14px 20px;
    border-bottom: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
    background: var(--mc-surface-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mc-deploy__panel__count {
    color: var(--mc-ink);
    letter-spacing: 1.5px;
}
.mc-deploy__panel__ft {
    padding: 14px 20px;
    border-top: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
    background: var(--mc-surface-2);
    text-align: center;
}
.mc-deploy__panel__ft a {
    color: var(--mc-ink);
    border-bottom: 1px solid var(--mc-ink);
}

/* ============ Game tile grid in deploy panel ============ */
.mc-deploy__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--mc-border-subtle);
    max-height: 70vh;
    overflow-y: auto;
}
@media (max-width: 760px) {
    .mc-deploy__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mc-deploy__grid { grid-template-columns: 1fr; }
}

.mc-deploy__tile {
    display: flex;
    flex-direction: column;
    background-color: var(--mc-surface);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--mc-ink);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease;
    position: relative;
}
.mc-deploy__tile:hover { transform: translateY(-2px); z-index: 1; }

.mc-deploy__tile--partner {
    box-shadow: inset 0 0 0 2px var(--mc-accent);
}
.mc-deploy__tile__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: var(--mc-accent);
    color: var(--mc-ink);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 4px 8px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
}

.mc-deploy__tile__art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 60%),
        linear-gradient(135deg,
            var(--mc-game-color),
            color-mix(in srgb, var(--mc-game-color) 35%, #0A0F1A));
    background-size: cover, cover, cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-deploy__tile__pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.mc-deploy__tile__icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    opacity: 0.85;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.mc-deploy__tile:hover .mc-deploy__tile__icon {
    transform: scale(1.12);
    opacity: 1;
}
.mc-deploy__tile__art::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.45));
    pointer-events: none;
}

.mc-deploy__tile__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.mc-deploy__tile__name {
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
}
.mc-deploy__tile__tag {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--mc-ink-2);
    line-height: 1.4;
    flex: 1;
}
.mc-deploy__tile__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--mc-border-subtle);
}
.mc-deploy__tile__price {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.mc-deploy__tile__from {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-bottom: 3px;
}
.mc-deploy__tile__num {
    font-family: var(--font-data);
    font-size: 16px;
    font-weight: 600;
}
.mc-deploy__tile__unit {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-top: 2px;
}
.mc-deploy__tile__cta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--mc-game-color);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mc-deploy__tile__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mc-deploy__tile:hover .mc-deploy__tile__arrow {
    transform: translate(3px, -3px);
}
.mc-deploy__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 60vh;
    overflow: auto;
}
.mc-deploy__list li + li { border-top: 1px solid var(--mc-border-subtle); }
.mc-deploy__list a {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--mc-ink);
    transition: background 0.15s ease, padding-left 0.15s ease;
    text-align: left;
}
.mc-deploy__list a:hover {
    background: var(--mc-surface-2);
    padding-left: 24px;
}
.mc-deploy__list__icon {
    width: 32px; height: 32px;
    color: var(--mc-game-color, var(--mc-ink));
}
.mc-deploy__list__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mc-deploy__list__name {
    font-family: var(--font-head);
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
}
.mc-deploy__list__tag {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--mc-ink-2);
    line-height: 1.3;
}
.mc-deploy__list__price {
    text-align: right;
    display: flex;
    flex-direction: column;
    line-height: 1;
    white-space: nowrap;
}
.mc-deploy__list__from {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-bottom: 3px;
}
.mc-deploy__list__num {
    font-family: var(--font-data);
    font-size: 16px;
    font-weight: 600;
}
.mc-deploy__list__unit {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-top: 2px;
}
.mc-deploy__list__arrow {
    font-family: var(--font-mono);
    color: var(--mc-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}
.mc-deploy__list a:hover .mc-deploy__list__arrow {
    color: var(--mc-game-color, var(--mc-ink));
    transform: translate(3px, -3px);
}

.mc-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-muted);
}
.mc-trust__sep {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--mc-muted);
    display: inline-block;
}

/* ---------- Schematic ---------- */
.mc-schematic {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 420;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    overflow: hidden;
}
.mc-schematic__diagram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.mc-rocket-anim { animation: mc-rocket-hover 5s ease-in-out infinite; transform-origin: 600px 200px; }
@keyframes mc-rocket-hover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.mc-rocket-cross { animation: mc-rocket-spin 14s linear infinite; }
@keyframes mc-rocket-spin {
    to { transform: rotate(360deg); }
}
.mc-rocket-flame rect {
    transform-origin: center top;
    animation: mc-rocket-flicker 0.22s steps(2) infinite alternate;
}
.mc-rocket-flame rect:nth-child(1) { animation-delay: 0.00s; }
.mc-rocket-flame rect:nth-child(2) { animation-delay: 0.04s; }
.mc-rocket-flame rect:nth-child(3) { animation-delay: 0.02s; }
.mc-rocket-flame rect:nth-child(4) { animation-delay: 0.06s; }
.mc-rocket-flame rect:nth-child(5) { animation-delay: 0.01s; }
@keyframes mc-rocket-flicker {
    0%   { transform: scaleY(1) translateY(0); opacity: 1; }
    100% { transform: scaleY(0.55) translateY(0); opacity: 0.55; }
}
.mc-leader { stroke-dashoffset: 0; animation: mc-leader-flow 1.4s linear infinite; }
@keyframes mc-leader-flow {
    to { stroke-dashoffset: -7; }
}

.mc-schematic__corner {
    position: absolute;
    width: 14px;
    height: 14px;
}
.mc-schematic__corner::before,
.mc-schematic__corner::after {
    content: "";
    position: absolute;
    background: var(--mc-ink);
}
.mc-schematic__corner::before { width: 14px; height: 1px; }
.mc-schematic__corner::after  { width: 1px; height: 14px; }
.mc-schematic__corner.tl { top: 11px;    left: 11px;    }
.mc-schematic__corner.tr { top: 11px;    right: 11px;   }
.mc-schematic__corner.tr::after { right: 0; }
.mc-schematic__corner.bl { bottom: 11px; left: 11px;    }
.mc-schematic__corner.bl::after { bottom: 0; }
.mc-schematic__corner.br { bottom: 11px; right: 11px;   }
.mc-schematic__corner.br::after { right: 0; bottom: 0; }

.mc-schematic__title,
.mc-schematic__rev,
.mc-schematic__foot {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
}
.mc-schematic__title { top: 18px; left: 38px; color: var(--mc-ink-2); }
.mc-schematic__rev   { top: 18px; right: 38px; color: var(--mc-muted); }
.mc-schematic__foot  { bottom: 16px; left: 38px; color: var(--mc-muted); font-size: 10px; }

.mc-schematic__rocket {
    position: absolute;
    left: 50%;
    top: 64px;
    width: 64px;
    height: 320px;
    transform: translateX(-50%);
    animation: mc-hover 4.5s ease-in-out infinite;
}
.mc-schematic__rocket svg { display: block; }
@keyframes mc-hover {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -6px); }
}

.mc-schematic__rocket svg rect[fill="#F59E0B"] {
    animation: mc-flame 0.18s steps(2) infinite alternate;
    transform-origin: center bottom;
}
@keyframes mc-flame {
    0%   { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0.55; transform: scaleY(0.55); }
}

.mc-callout {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 215px;
}
.mc-callout--right { align-items: flex-start; }
.mc-callout--left  { align-items: flex-end; }
.mc-callout__tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-callout__val {
    font-family: var(--font-data);
    font-size: 15px;
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-callout__line {
    position: absolute;
    height: 1px;
    border-top: 1px dashed var(--mc-ink-2);
    opacity: 0.6;
}

/* ============ 03 TELEMETRY STRIP ============ */
.mc-telemetry {
    background: var(--mc-ink);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.mc-telemetry::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(250, 204, 21, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 204, 21, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: mc-drift 18s linear infinite;
    pointer-events: none;
}
.mc-telemetry__inner {
    position: relative;
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 26px var(--mc-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.mc-telemetry__tag {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mc-accent);
}
.mc-telemetry__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--mc-accent);
    box-shadow: 0 0 8px var(--mc-accent);
    animation: mc-pulse-amber 1.6s ease-in-out infinite;
}
@keyframes mc-pulse-amber {
    0%, 100% { box-shadow: 0 0 8px var(--mc-accent); opacity: 1; }
    50%      { box-shadow: 0 0 16px var(--mc-accent); opacity: 0.65; }
}

.mc-readout__value {
    position: relative;
    display: inline-block;
}
.mc-readout--accent .mc-readout__value::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 4px;
    vertical-align: text-bottom;
    background: var(--mc-accent);
    animation: mc-cursor 1s steps(2) infinite;
}
@keyframes mc-cursor {
    50% { opacity: 0; }
}
.mc-readouts {
    display: flex;
    align-items: center;
}
.mc-readout {
    padding: 0 32px;
    border-left: 1px solid #FFFFFF26;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mc-readout:first-child { border-left: 0; }
.mc-readout__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
}
.mc-readout__value {
    font-family: var(--font-data);
    font-size: 27px;
    font-weight: 600;
}
.mc-readout--accent .mc-readout__value { color: var(--mc-accent); }

/* ============ 04 MISSION PROFILES ============ */
.mc-section {
    padding: 96px 0;
}
.mc-section__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
}
.mc-section--surface { background: var(--mc-surface); }
.mc-section--surface-2 { background: var(--mc-surface-2); }

.mc-section__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.mc-section__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-section__eyebrow--mono::before { content: "// "; }

.mc-section__title {
    font-family: var(--font-head);
    font-size: 52px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.mc-section__title__hl {
    display: inline-flex;
    background: var(--mc-accent);
    padding: 2px 12px 6px;
}

.mc-section__note {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-transform: uppercase;
}

.mc-section__sub {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--mc-ink-2);
    max-width: 640px;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

.mc-profiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--mc-border);
    margin-top: 46px;
    background: var(--mc-surface);
}
.mc-profile {
    background: var(--mc-surface);
    border-left: 1px solid var(--mc-border);
}
.mc-profile:first-child { border-left: 0; }
.mc-profile__band {
    background: var(--mc-surface-2);
    padding: 9px 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.mc-profile--featured .mc-profile__band {
    background: var(--mc-accent);
    color: var(--mc-ink);
}
.mc-profile__body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mc-profile__name {
    font-family: var(--font-head);
    font-size: 36px;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.mc-profile__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-data);
}
.mc-profile__price__num { font-size: 36px; font-weight: 600; }
.mc-profile__price__unit {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-profile__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-profile__features li::before {
    content: "▸ ";
    color: var(--mc-amber);
    font-weight: bold;
}

/* ============ 05 SYSTEMS GRID ============ */
.mc-systems {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--mc-border);
    border: 1px solid var(--mc-border);
    margin-top: 56px;
}
.mc-system {
    background: var(--mc-surface);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: background 0.25s ease;
}
.mc-system::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 2px;
    background: var(--mc-accent);
    transition: width 0.3s ease;
}
.mc-system:hover { background: var(--mc-surface-2); }
.mc-system:hover::before { width: 100%; }
.mc-system__num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
}
.mc-system__title {
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}
.mc-system__desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    line-height: 1.55;
}

/* ============ 06 LAUNCH SEQUENCE ============ */
.mc-sequence {
    position: relative;
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.mc-sequence__rail {
    position: absolute;
    top: 28px;
    left: calc(10% + 28px);
    right: calc(10% + 28px);
    height: 1.5px;
    background-image: linear-gradient(to right, var(--mc-ink-2) 50%, transparent 0%);
    background-size: 8px 1.5px;
    background-repeat: repeat-x;
    z-index: 0;
}
@media (max-width: 880px) {
    .mc-sequence { grid-template-columns: 1fr; gap: 24px; }
    .mc-sequence__rail { display: none; }
}

.mc-sequence__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 8px;
    animation: mc-fade-up 0.55s ease-out backwards;
    animation-delay: var(--step-delay, 0s);
}

.mc-sequence__node {
    position: relative;
    width: 56px;
    height: 56px;
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-ink);
    transition: background 0.2s ease, transform 0.2s ease;
}
.mc-sequence__step:hover .mc-sequence__node {
    background: var(--mc-accent);
    transform: translateY(-2px);
}
.mc-sequence__num {
    position: absolute;
    top: -10px;
    left: -10px;
    background: var(--mc-ink);
    color: #fff;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.mc-sequence__step:last-child .mc-sequence__num {
    background: var(--mc-accent);
    color: var(--mc-ink);
}
.mc-sequence__icon {
    width: 28px;
    height: 28px;
}

.mc-sequence__time {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--mc-ink-2);
    margin-top: 4px;
}
.mc-sequence__step:last-child .mc-sequence__time {
    color: var(--mc-launch);
}
.mc-sequence__title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--mc-ink);
    text-transform: uppercase;
    margin: 0;
    font-weight: 600;
}
.mc-sequence__desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--mc-ink-2);
    line-height: 1.4;
    margin: 0;
    max-width: 200px;
}
.mc-sequence__caption {
    margin-top: 40px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
}

/* (legacy ground-stations CSS, unused now) */
.mc-stations {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.mc-stations__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.mc-stations__caption {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-stations__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid var(--mc-border);
    border-bottom: 1px solid var(--mc-border);
}
.mc-station {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}
.mc-station__name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-station__ping {
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 600;
}
.mc-station__bar {
    height: 4px;
    background: var(--mc-amber);
    align-self: center;
    transform-origin: left center;
    animation: mc-bar 0.9s ease-out backwards;
}
.mc-station:nth-child(2) .mc-station__bar { animation-delay: 0.05s; }
.mc-station:nth-child(3) .mc-station__bar { animation-delay: 0.10s; }
.mc-station:nth-child(4) .mc-station__bar { animation-delay: 0.15s; }
.mc-station:nth-child(5) .mc-station__bar { animation-delay: 0.20s; }
.mc-station:nth-child(6) .mc-station__bar { animation-delay: 0.25s; }
@keyframes mc-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ============ 07 FLIGHT LOG ============ */
.mc-logs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}
.mc-log {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    gap: 28px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.mc-log:hover {
    transform: translateY(-2px);
    border-color: var(--mc-ink);
    box-shadow: 0 8px 24px -12px rgba(18, 24, 38, 0.18);
}
.mc-log__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
}
.mc-log__entry {
    display: block;
    font-family: var(--font-head);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--mc-ink);
    text-transform: uppercase;
}
.mc-log__title {
    font-family: var(--font-head);
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
}
.mc-log__body {
    font-family: var(--font-body);
    color: var(--mc-ink-2);
    font-size: 14px;
    line-height: 1.55;
}
.mc-log__foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-muted);
}

/* ============ 08 LAUNCH CTA ============ */
.mc-cta {
    background: var(--mc-ink);
    color: #fff;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}
.mc-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(250, 204, 21, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 204, 21, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    animation: mc-drift 26s linear infinite;
    pointer-events: none;
}
.mc-cta__inner {
    position: relative;
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.mc-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-cta__eyebrow::before { content: "// "; }

.mc-cta__head {
    font-family: var(--font-head);
    font-size: 88px;
    line-height: 0.95;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.mc-cta__sub {
    font-family: var(--font-body);
    font-size: 17px;
    color: #C4C9D4;
    line-height: 1.5;
    max-width: 680px;
    margin: 0;
}

.mc-countdown {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid #3A4150;
    font-family: var(--font-data);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}
.mc-countdown__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--mc-accent);
    box-shadow: 0 0 12px var(--mc-accent);
    animation: mc-pulse-amber 1.2s ease-in-out infinite;
}

.mc-countdown {
    position: relative;
    overflow: hidden;
}
.mc-countdown::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.08), transparent);
    transform: translateX(-100%);
    animation: mc-sweep 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mc-sweep {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

.mc-cta__actions {
    display: flex;
    gap: 16px;
}

.mc-btn--inverse-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

/* ============ 09 FOOTER ============ */
.mc-footer {
    background: var(--mc-ink);
    color: #fff;
    padding: 80px 0;
}
.mc-footer__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.mc-footer__top {
    display: flex;
    justify-content: space-between;
    gap: 80px;
}
.mc-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 320px;
    font-family: var(--font-body);
    color: var(--mc-muted);
    font-size: 14px;
    line-height: 1.55;
}
.mc-footer__cols {
    display: flex;
    gap: 64px;
}
.mc-footer__col h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    margin: 0 0 14px;
    text-transform: uppercase;
}
.mc-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mc-footer__col a {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #DDE1EA;
}
.mc-footer__col a:hover { color: var(--mc-accent); }
.mc-footer__divider {
    height: 1px;
    background: #2A303E;
}

/* ============ Footer Discord callout ============ */
.mc-footer__discord {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #5865F2;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
    align-self: flex-start;
}
.mc-footer__discord:hover {
    background: #4752C4;
    transform: translateY(-1px);
    color: #fff;
}
.mc-footer__discord__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    color: #fff;
    flex-shrink: 0;
}
.mc-footer__discord__icon svg { width: 100%; height: 100%; display: block; }
.mc-footer__discord__body { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.mc-footer__discord__body strong {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff;
}
.mc-footer__discord__body em {
    font-family: var(--font-mono);
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.78);
}
.mc-footer__discord__arrow {
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.85);
    transition: transform 0.15s ease;
}
.mc-footer__discord:hover .mc-footer__discord__arrow { transform: translate(3px, -3px); }

.mc-footer__disclaimer {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--mc-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 820px;
    text-transform: none;
}
.mc-footer__bottom {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-transform: uppercase;
}

/* ============ Game picker grid (replaces Mission Profiles cards) ============ */
.mc-gamegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 46px;
}
@media (max-width: 920px) {
    .mc-gamegrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mc-gamegrid { grid-template-columns: 1fr; }
}

.mc-gamecard {
    display: flex;
    flex-direction: column;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: var(--mc-ink);
}
.mc-gamecard:hover {
    transform: translateY(-3px);
    border-color: var(--mc-ink);
    box-shadow: 0 14px 36px -20px rgba(18, 24, 38, 0.35);
}

.mc-gamecard__art {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--mc-game-color, var(--mc-surface-2));
    background-size: cover, cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.mc-gamecard__art::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.45));
    pointer-events: none;
}

.mc-gamecard__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-gamecard--partner {
    border-color: var(--mc-accent);
    box-shadow: 0 0 0 1px var(--mc-accent), 0 12px 32px -22px rgba(250, 204, 21, 0.55);
}
.mc-gamecard__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: var(--mc-accent);
    color: var(--mc-ink);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 4px 8px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4);
}
.mc-gamecard__chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #fff;
    background: rgba(18, 24, 38, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 10px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mc-gamecard__icon { display: none; }

.mc-gamecard__name {
    font-family: var(--font-head);
    font-size: 32px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}
.mc-gamecard__tagline {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.mc-gamecard__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--mc-border-subtle);
    position: relative;
    z-index: 1;
}
.mc-gamecard__price {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.mc-gamecard__price__from {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.mc-gamecard__price__num {
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-gamecard__price__unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-top: 3px;
}
.mc-gamecard__cta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--mc-ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mc-gamecard__cta__arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
.mc-gamecard:hover .mc-gamecard__cta__arrow { transform: translate(3px, -3px); }

/* (legacy games strip — kept for any future re-use) */
.mc-games {
    background: var(--mc-surface);
    border-top: 1px solid var(--mc-border);
    border-bottom: 1px solid var(--mc-border);
    padding: 32px 0;
}
.mc-games__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    display: flex;
    align-items: center;
    gap: 48px;
}
.mc-games__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
    white-space: nowrap;
}
.mc-games__list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.mc-game {
    aspect-ratio: 1.4 / 1;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.mc-game::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--mc-game-color, var(--mc-accent));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.mc-game:hover {
    transform: translateY(-2px);
    border-color: var(--mc-ink);
}
.mc-game:hover::after { transform: scaleX(1); }
.mc-game__icon {
    width: 28px; height: 28px;
    display: block;
}
.mc-game__name {
    font-weight: 600;
    color: var(--mc-ink);
    letter-spacing: 2px;
}

/* ============ Hero dashboard panel ============ */
.mc-dash {
    width: 100%;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    position: relative;
    margin-top: 32px;
}
.mc-dash::before, .mc-dash::after {
    content: "STYX LIVE CONSOLE · OPS-01";
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--mc-surface-2);
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
}
.mc-dash::after {
    content: "● REC";
    left: auto;
    right: 20px;
    color: var(--mc-launch);
    animation: mc-blink 1.4s steps(2) infinite;
}
@keyframes mc-blink {
    50% { opacity: 0.3; }
}
.mc-dash__panel {
    padding: 16px;
    border: 1px solid var(--mc-border-subtle);
    background: var(--mc-surface-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 140px;
}
.mc-dash__title {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-dash__title__val {
    color: var(--mc-ink);
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}
.mc-dash__bars {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 2px;
    height: 56px;
    align-items: end;
}
.mc-dash__bars span {
    background: var(--mc-ink-2);
    width: 100%;
    transform-origin: bottom;
    animation: mc-bar-bounce 1.4s ease-in-out infinite;
}
.mc-dash__bars--amber span { background: var(--mc-amber); }
.mc-dash__bars--accent span { background: var(--mc-accent); }
@keyframes mc-bar-bounce {
    0%, 100% { transform: scaleY(0.35); }
    50%      { transform: scaleY(1); }
}
.mc-dash__bars span:nth-child(1)  { animation-delay: 0.00s; height: 50%; }
.mc-dash__bars span:nth-child(2)  { animation-delay: 0.05s; height: 70%; }
.mc-dash__bars span:nth-child(3)  { animation-delay: 0.10s; height: 40%; }
.mc-dash__bars span:nth-child(4)  { animation-delay: 0.15s; height: 80%; }
.mc-dash__bars span:nth-child(5)  { animation-delay: 0.20s; height: 60%; }
.mc-dash__bars span:nth-child(6)  { animation-delay: 0.25s; height: 90%; }
.mc-dash__bars span:nth-child(7)  { animation-delay: 0.30s; height: 55%; }
.mc-dash__bars span:nth-child(8)  { animation-delay: 0.35s; height: 75%; }
.mc-dash__bars span:nth-child(9)  { animation-delay: 0.40s; height: 45%; }
.mc-dash__bars span:nth-child(10) { animation-delay: 0.45s; height: 85%; }
.mc-dash__bars span:nth-child(11) { animation-delay: 0.50s; height: 65%; }
.mc-dash__bars span:nth-child(12) { animation-delay: 0.55s; height: 50%; }
.mc-dash__bars span:nth-child(13) { animation-delay: 0.60s; height: 95%; }
.mc-dash__bars span:nth-child(14) { animation-delay: 0.65s; height: 70%; }
.mc-dash__bars span:nth-child(15) { animation-delay: 0.70s; height: 55%; }
.mc-dash__bars span:nth-child(16) { animation-delay: 0.75s; height: 80%; }
.mc-dash__legend {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--mc-muted);
    letter-spacing: 1px;
}
.mc-dash__line {
    height: 32px;
    position: relative;
    background:
        repeating-linear-gradient(90deg, var(--mc-border-subtle) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(0deg, var(--mc-border-subtle) 0 1px, transparent 1px 8px);
}
.mc-dash__line svg { width: 100%; height: 100%; display: block; }
.mc-dash__line__path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: mc-draw 2.4s ease-out forwards 0.4s; }
@keyframes mc-draw {
    to { stroke-dashoffset: 0; }
}

/* ============ Cart configurator (CPU/Memory/Storage + summary) ============ */
.mc-configurator {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: flex-start;
}
@media (max-width: 880px) {
    .mc-configurator { grid-template-columns: 1fr; }
}

.mc-configurator__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mc-resource {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 22px 26px;
    transition: border-color 0.2s ease;
}
.mc-resource:hover { border-color: var(--mc-ink-2); }

.mc-resource__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.mc-resource__label {
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--mc-ink);
    text-transform: uppercase;
}
.mc-resource__num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    padding: 3px 7px;
    border: 1px solid var(--mc-border);
}
.mc-resource__hint {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--mc-ink-2);
    margin: 0 0 14px;
    line-height: 1.5;
}

/* Custom dropdown (mc-pick) — full-control styling for the open list */
.mc-pick {
    position: relative;
    width: 100%;
}
.mc-pick__trigger {
    width: 100%;
    background: var(--mc-surface-2);
    border: 1.5px solid var(--mc-ink);
    padding: 14px 16px;
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-ink);
    cursor: pointer;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    transition: background 0.15s ease;
}
.mc-pick__trigger:hover { background: var(--mc-surface); }
.mc-pick__trigger:focus,
.mc-pick.is-open .mc-pick__trigger {
    outline: none;
    background: var(--mc-surface);
    box-shadow: 0 0 0 2px var(--mc-accent);
}
.mc-pick__value {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-pick__value em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-amber);
    font-weight: 600;
}
.mc-pick__caret {
    font-size: 12px;
    color: var(--mc-ink);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.mc-pick.is-open .mc-pick__caret { transform: rotate(180deg); }

.mc-pick__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-ink);
    box-shadow: 0 14px 36px -16px rgba(18, 24, 38, 0.35);
    max-height: 320px;
    overflow-y: auto;
    animation: mc-pick-in 0.16s ease-out;
}
@keyframes mc-pick-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mc-pick__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--mc-border-subtle);
    transition: background 0.1s ease;
}
.mc-pick__option:last-child { border-bottom: 0; }
.mc-pick__option:hover,
.mc-pick__option:focus,
.mc-pick__option.is-highlighted {
    background: var(--mc-surface-2);
    outline: none;
}
.mc-pick__option.is-selected {
    background: var(--mc-accent);
    color: var(--mc-ink);
}
.mc-pick__option.is-selected::before {
    content: "▸ ";
    color: var(--mc-ink);
    font-weight: 700;
    margin-right: 4px;
}
.mc-pick__option.is-selected .mc-pick__option__name { color: var(--mc-ink); }
.mc-pick__option.is-selected .mc-pick__option__price { color: var(--mc-ink); }

.mc-pick__option__name {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--mc-ink);
}
.mc-pick__option__price {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-amber);
    font-weight: 600;
}

/* Summary panel */
.mc-summary {
    background: var(--mc-ink);
    color: #fff;
    padding: 28px;
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mc-summary__head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #2A303E;
    padding-bottom: 14px;
}
.mc-summary__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--mc-accent);
}
.mc-summary__rev {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
}

.mc-summary__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mc-summary__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #2A303E;
}
.mc-summary__line:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-summary__line__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.mc-summary__line__name {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.2px;
    color: #fff;
    text-transform: uppercase;
}
.mc-summary__line__name em {
    font-style: normal;
    color: var(--mc-accent);
    font-weight: 600;
}
.mc-summary__line__hint {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-summary__line__amount {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.mc-summary__line--base .mc-summary__line__amount {
    color: var(--mc-accent);
}
.mc-summary__line__amount--included {
    color: var(--mc-muted);
    font-size: 10px;
    letter-spacing: 1.5px;
}

.mc-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0 4px;
    border-top: 1.5px solid var(--mc-accent);
}
.mc-summary__total__label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2.5px;
    color: #fff;
    text-transform: uppercase;
}
.mc-summary__total__amount {
    font-family: var(--font-data);
    font-size: 32px;
    font-weight: 600;
    color: var(--mc-accent);
    line-height: 1;
}
.mc-summary__total__amount small {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    font-weight: 400;
    margin-left: 4px;
}

.mc-btn--block { display: block; width: 100%; text-align: center; }

.mc-summary__included {
    list-style: none;
    padding: 14px 0 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border-top: 1px solid #2A303E;
}
.mc-summary__included li {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-summary__included li::first-letter {
    color: var(--mc-accent);
}

/* ============ Cart hero (game banner) ============ */
.mc-cart-hero {
    position: relative;
    color: #fff;
    background-size: cover, cover;
    background-position: center;
    background-color: var(--mc-ink);
    padding: 120px 0 80px;
    border-bottom: 1px solid var(--mc-ink);
}
.mc-cart-hero__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    position: relative;
    z-index: 2;
}
.mc-cart-hero__eyebrow {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
    text-transform: uppercase;
}
.mc-cart-hero__crumb {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s ease;
}
.mc-cart-hero__crumb:hover { color: var(--mc-accent); }

.mc-cart-hero__title {
    font-family: var(--font-head);
    font-size: clamp(40px, 6vw, 76px);
    letter-spacing: 1px;
    line-height: 0.95;
    margin: 0 0 14px;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: baseline;
}
.mc-cart-hero__game {
    background: var(--mc-accent);
    color: var(--mc-ink);
    padding: 4px 18px 10px;
    display: inline-block;
}
.mc-cart-hero__tag {
    font-family: var(--font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 600px;
}
.mc-cart-hero__badge {
    display: inline-flex;
    align-items: center;
    margin-top: 22px;
    padding: 5px 12px;
    background: var(--mc-accent);
    color: var(--mc-ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    animation: mc-pulse-amber 2.4s ease-in-out infinite;
}

/* ============ Resource tiers ============ */
.mc-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--mc-border);
    border: 1px solid var(--mc-border);
    margin-top: 40px;
}
@media (max-width: 960px) { .mc-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mc-tiers { grid-template-columns: 1fr; } }

.mc-tier {
    position: relative;
    background: var(--mc-surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.15s ease;
}
.mc-tier:hover { background: var(--mc-surface-2); }
.mc-tier__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mc-tier:has(.mc-tier__radio:checked) {
    background: var(--mc-surface);
    box-shadow: inset 0 0 0 2px var(--mc-ink);
}
.mc-tier--recommended:has(.mc-tier__radio:checked) {
    box-shadow: inset 0 0 0 2px var(--mc-accent);
}

.mc-tier__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--mc-accent);
    color: var(--mc-ink);
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.mc-tier__band {
    padding: 9px 24px;
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-tier--recommended .mc-tier__band {
    background: var(--mc-accent);
    color: var(--mc-ink);
}

.mc-tier__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.mc-tier__name {
    font-family: var(--font-head);
    font-size: 30px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}
.mc-tier__tagline {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--mc-ink-2);
    line-height: 1.5;
    margin: 0;
}
.mc-tier__specs {
    list-style: none;
    padding: 12px 0;
    margin: 0;
    border-top: 1px solid var(--mc-border-subtle);
    border-bottom: 1px solid var(--mc-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mc-tier__specs li {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-ink-2);
}
.mc-tier__specs strong {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--mc-ink);
    font-weight: 600;
    letter-spacing: 0;
}
.mc-tier__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: auto;
}
.mc-tier__price__num {
    font-family: var(--font-data);
    font-size: 26px;
    font-weight: 600;
}
.mc-tier__price__unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
}

/* ============ Config grid (region + add-ons) ============ */
.mc-config-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    margin-top: 56px;
}
@media (max-width: 800px) { .mc-config-grid { grid-template-columns: 1fr; } }

.mc-config-block {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 28px;
}

.mc-regions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--mc-border-subtle);
    border: 1px solid var(--mc-border-subtle);
}
@media (max-width: 540px) { .mc-regions { grid-template-columns: repeat(2, 1fr); } }

.mc-region {
    background: var(--mc-surface);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    transition: background 0.15s ease, color 0.15s ease;
}
.mc-region:hover { background: var(--mc-surface-2); color: var(--mc-ink); }
.mc-region input { display: none; }
.mc-region__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--mc-border);
    background: var(--mc-surface);
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.mc-region:has(input:checked) { color: var(--mc-ink); background: var(--mc-surface); box-shadow: inset 0 0 0 1.5px var(--mc-ink); }
.mc-region:has(input:checked) .mc-region__dot { background: var(--mc-accent); border-color: var(--mc-ink); }

.mc-addons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.mc-addons li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-addons li:last-child { border-bottom: 0; }
.mc-addons__check {
    width: 22px;
    height: 22px;
    background: var(--mc-accent);
    color: var(--mc-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.mc-addons__body { display: flex; flex-direction: column; gap: 2px; }
.mc-addons__body strong {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
    font-weight: 600;
}
.mc-addons__body em {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--mc-ink-2);
    font-style: normal;
}

/* ============ Cart CTA ============ */
.mc-cart-cta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--mc-border);
}
.mc-cart-cta__back {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    transition: color 0.15s ease;
}
.mc-cart-cta__back:hover { color: var(--mc-ink); }

/* ============ Compact cart hero variant ============ */
.mc-cart-hero--compact { padding: 70px 0 50px; }
.mc-cart-hero--compact .mc-cart-hero__title { font-size: clamp(32px, 4.5vw, 56px); }

/* ============ Generic numbered block (used on viewcart + submit ticket) ============ */
.mc-block {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    margin-bottom: 24px;
}
.mc-block__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
}
.mc-block__num {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 8px;
    background: var(--mc-ink);
    color: #fff;
}
.mc-block__title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    margin: 0;
    color: var(--mc-ink);
    text-transform: uppercase;
    flex: 1;
}
.mc-block__edit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    border-bottom: 1px solid var(--mc-border);
}
.mc-block__edit:hover { color: var(--mc-ink); border-color: var(--mc-ink); }

/* ============ Cart line items on viewcart ============ */
.mc-cartlines {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mc-cartlines__row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 16px 26px;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-cartlines__row:last-child { border-bottom: 0; }
.mc-cartlines__row--base { background: var(--mc-surface-2); }
.mc-cartlines__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-cartlines__name {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-cartlines__price {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-ink);
    white-space: nowrap;
}
.mc-cartlines__price small {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-left: 3px;
    font-weight: 400;
}

/* ============ Checkout shell ============ */
.mc-checkout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) { .mc-checkout { grid-template-columns: 1fr; } }
.mc-checkout__main > .mc-block { margin-bottom: 24px; }

/* ============ Tabs (viewcart, tickets, service tabs use specific variants) ============ */
.mc-tabs {
    display: flex;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
}
.mc-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--mc-ink-2);
    cursor: pointer;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.mc-tab:hover { color: var(--mc-ink); background: var(--mc-surface); }
.mc-tab.is-active {
    color: var(--mc-ink);
    border-bottom-color: var(--mc-accent);
    background: var(--mc-surface);
}

.mc-tab-panel {
    padding: 24px 26px;
}

/* ============ Form grid (viewcart, submitticket) ============ */
.mc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mc-form-grid .mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-form-grid .mc-field--full { grid-column: 1 / -1; }
.mc-field label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-field input,
.mc-field textarea,
.mc-field select,
.mc-input {
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-border);
    padding: 11px 14px;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--mc-ink);
}
.mc-field input:focus,
.mc-field textarea:focus,
.mc-field select:focus,
.mc-input:focus {
    outline: none;
    border-color: var(--mc-ink);
    box-shadow: 0 0 0 2px var(--mc-accent);
}
.mc-native-select,
select.mc-native-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background-color: var(--mc-surface);
    background-image: linear-gradient(45deg, transparent 50%, var(--mc-ink) 50%), linear-gradient(135deg, var(--mc-ink) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 12px) center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    border: 1.5px solid var(--mc-ink);
    padding: 12px 36px 12px 14px;
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-ink);
    cursor: pointer;
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.mc-native-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--mc-accent);
}

.mc-link-mono {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
}
.mc-link-mono:hover { color: var(--mc-ink); }

/* ============ Payment methods ============ */
.mc-paymethods { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.mc-paymethod {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid var(--mc-border);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mc-paymethod input { display: none; }
.mc-paymethod__check {
    width: 22px; height: 22px;
    border: 1.5px solid var(--mc-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-weight: 600;
    flex-shrink: 0;
}
.mc-paymethod__body { display: flex; flex-direction: column; gap: 2px; }
.mc-paymethod__name {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
    font-weight: 600;
}
.mc-paymethod__desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--mc-ink-2);
}
.mc-paymethod:hover { background: var(--mc-surface-2); }
.mc-paymethod.is-active { border-color: var(--mc-ink); background: var(--mc-surface-2); }
.mc-paymethod.is-active .mc-paymethod__check { background: var(--mc-accent); border-color: var(--mc-ink); color: var(--mc-ink); }

/* ============ Promo + terms ============ */
.mc-promo {
    display: flex;
    margin-top: 14px;
    border: 1.5px solid #2A303E;
}
.mc-promo__input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #fff;
}
.mc-promo__input::placeholder { color: var(--mc-muted); }
.mc-promo__input:focus { outline: none; background: rgba(255,255,255,0.05); }
.mc-promo__apply {
    background: transparent;
    color: var(--mc-accent);
    border: 0;
    border-left: 1.5px solid #2A303E;
    padding: 11px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    font-weight: 600;
}
.mc-promo__apply:hover { background: rgba(250, 204, 21, 0.1); }

.mc-terms {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 12px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    color: var(--mc-muted);
    line-height: 1.5;
}
.mc-terms a { color: var(--mc-accent); border-bottom: 1px solid var(--mc-accent); }
.mc-terms input { accent-color: var(--mc-accent); margin-top: 2px; }

/* ============ Client area hero ============ */
.mc-ca-hero {
    background: var(--mc-ink);
    color: #fff;
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
}
.mc-ca-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(250, 204, 21, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 204, 21, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: mc-drift 24s linear infinite;
    pointer-events: none;
}
.mc-ca-hero__inner {
    position: relative;
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
}
.mc-ca-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-muted);
    margin-bottom: 12px;
}
.mc-ca-hero__title {
    font-family: var(--font-head);
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: 1px;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.mc-ca-hero__name {
    background: var(--mc-accent);
    color: var(--mc-ink);
    padding: 2px 14px 8px;
    display: inline-block;
}
.mc-ca-hero__tag {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-muted);
    margin: 0;
}

/* ============ Dashboard stats strip + alerts ============ */
.mc-statstrip {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: -32px 0 32px;
    position: relative;
    z-index: 3;
}
@media (max-width: 700px) { .mc-statstrip { grid-template-columns: repeat(2, 1fr); } }
.mc-statstrip__cell {
    padding: 22px 24px;
    border-left: 1px solid var(--mc-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mc-statstrip__cell:first-child { border-left: 0; }
.mc-statstrip__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
}
.mc-statstrip__value {
    font-family: var(--font-data);
    font-size: 28px;
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-statstrip__cell--accent .mc-statstrip__value { color: var(--mc-launch); }

.mc-alerts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}
.mc-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface);
}
.mc-alert--warning { border-left: 4px solid var(--mc-launch); }
.mc-alert--info    { border-left: 4px solid var(--mc-accent); }
.mc-alert__icon {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-ink);
    color: var(--mc-accent);
    font-family: var(--font-head);
    font-size: 16px;
    flex-shrink: 0;
}
.mc-alert--warning .mc-alert__icon { color: var(--mc-launch); }
.mc-alert__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mc-alert__body strong {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
    font-weight: 600;
}
.mc-alert__body span { font-family: var(--font-body); font-size: 13px; color: var(--mc-ink-2); }
.mc-alert__cta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-ink);
    padding: 7px 12px;
    border: 1.5px solid var(--mc-ink);
}
.mc-alert__cta:hover { background: var(--mc-accent); }

/* ============ Dashboard grid (services + activity) ============ */
.mc-ca-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
}
@media (max-width: 940px) { .mc-ca-grid { grid-template-columns: 1fr; } }
.mc-ca-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.mc-ca-section__title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    margin: 0;
}

/* ============ Service cards (dashboard) ============ */
.mc-services { display: flex; flex-direction: column; gap: 16px; }
.mc-service {
    display: block;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    overflow: hidden;
    color: var(--mc-ink);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.mc-service:hover { transform: translateY(-2px); border-color: var(--mc-ink); }

.mc-service--row {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: stretch;
}
@media (max-width: 700px) { .mc-service--row { grid-template-columns: 1fr; } }
.mc-service__art--side { height: auto !important; min-height: 140px; }

.mc-quickstrip {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 700px) { .mc-quickstrip { grid-template-columns: 1fr; } }

.mc-service__art {
    position: relative;
    height: 100px;
    background-color: var(--mc-game-color, var(--mc-surface-2));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 18px;
}
.mc-service__chip {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.8px;
    padding: 4px 10px;
    background: rgba(18, 24, 38, 0.65);
    backdrop-filter: blur(4px);
    color: #fff;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.2);
}
.mc-service__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #fff;
    background: rgba(2, 6, 12, 0.6);
    padding: 4px 10px;
}
.mc-service__status__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mc-green);
    box-shadow: 0 0 0 0 rgba(31,164,99,0.6);
    animation: mc-pulse-green 2.2s ease-out infinite;
}

.mc-service__body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 16px; }
.mc-service__head { display: flex; justify-content: space-between; gap: 16px; }
.mc-service__name {
    font-family: var(--font-head);
    font-size: 24px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}
.mc-service__id {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-top: 4px;
    display: inline-block;
}
.mc-service__price {
    text-align: right;
    line-height: 1;
}
.mc-service__price__num {
    font-family: var(--font-data);
    font-size: 18px;
    font-weight: 600;
}
.mc-service__price__unit {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    margin-top: 4px;
}
.mc-service__gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mc-gauge { display: flex; flex-direction: column; gap: 4px; }
.mc-gauge__head {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--mc-ink-2);
}
.mc-gauge__head span:last-child {
    font-family: var(--font-data);
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-gauge__bar {
    height: 4px;
    background: var(--mc-border-subtle);
    position: relative;
}
.mc-gauge__bar span {
    display: block;
    height: 100%;
    background: var(--mc-accent);
    transition: width 0.4s ease;
}
.mc-service__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--mc-border-subtle);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
}
.mc-service__open { color: var(--mc-ink); font-weight: 600; }

/* ============ Activity feed (dashboard right column) ============ */
.mc-activity {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
}
.mc-activity__row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--mc-border-subtle);
    align-items: center;
}
.mc-activity__row:last-child { border-bottom: 0; }
.mc-activity__time {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--mc-muted);
    letter-spacing: 0.5px;
}
.mc-activity__body { display: flex; flex-direction: column; gap: 2px; }
.mc-activity__event {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.3px;
    color: var(--mc-ink);
    font-weight: 600;
}
.mc-activity__target {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--mc-muted);
}
.mc-activity__row--success { border-left: 3px solid var(--mc-green); }
.mc-activity__row--warning { border-left: 3px solid var(--mc-launch); }
.mc-activity__row--info    { border-left: 3px solid var(--mc-accent); }

.mc-quickactions { display: flex; flex-direction: column; gap: 8px; }
.mc-quickaction {
    display: block;
    padding: 12px 16px;
    border: 1.5px solid var(--mc-border);
    background: var(--mc-surface);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--mc-ink);
    text-transform: uppercase;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mc-quickaction:hover { background: var(--mc-accent); border-color: var(--mc-ink); }

/* ============ Service Console hero ============ */
.mc-svc-hero {
    background-color: var(--mc-ink);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 60px 0 40px;
}
.mc-svc-hero__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
}
.mc-svc-hero__crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 18px;
}
.mc-svc-hero__crumb a { color: rgba(255,255,255,0.6); transition: color 0.15s ease; }
.mc-svc-hero__crumb a:hover { color: var(--mc-accent); }
.mc-svc-hero__crumb span:not(a) { color: #fff; }

.mc-svc-hero__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
}
.mc-svc-hero__chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    padding: 4px 10px;
    background: var(--mc-accent);
    color: var(--mc-ink);
    margin-bottom: 12px;
}
.mc-svc-hero__title {
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: 1px;
    line-height: 1;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.mc-svc-hero__meta {
    display: flex;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
    flex-wrap: wrap;
}
.mc-svc-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mc-green);
}
.mc-svc-status__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mc-green);
    box-shadow: 0 0 8px var(--mc-green);
    animation: mc-pulse-green 2.2s ease-out infinite;
}
.mc-svc-hero__actions { display: flex; gap: 10px; }
.mc-svc-hero__action--ghost {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    background: transparent;
}
.mc-svc-hero__action--ghost:hover { background: rgba(255,255,255,0.08); }

.mc-svc-endpoint {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}
.mc-svc-endpoint__item {
    background: var(--mc-ink);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mc-svc-endpoint__item span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--mc-muted);
}
.mc-svc-endpoint__item code {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--mc-accent);
    font-weight: 600;
}

/* ============ Service Detail · Panel CTA ============ */
.mc-panel-cta {
    position: relative;
    background: var(--mc-ink);
    color: #fff;
    padding: 56px var(--mc-pad-x);
    margin-bottom: 32px;
    overflow: hidden;
}
.mc-panel-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(250, 204, 21, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 204, 21, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    animation: mc-drift 26s linear infinite;
    pointer-events: none;
}
.mc-panel-cta__corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--mc-accent);
}
.mc-panel-cta__corner--tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.mc-panel-cta__corner--br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
.mc-panel-cta__body {
    position: relative;
    z-index: 2;
    max-width: 720px;
}
.mc-panel-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-accent);
    text-transform: lowercase;
}
.mc-panel-cta__title {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: 1px;
    margin: 12px 0 14px;
    text-transform: uppercase;
    line-height: 1;
}
.mc-panel-cta__hl {
    background: var(--mc-accent);
    color: var(--mc-ink);
    padding: 2px 14px 8px;
}
.mc-panel-cta__lead {
    font-family: var(--font-body);
    font-size: 15px;
    color: #C4C9D4;
    line-height: 1.6;
    margin: 0 0 26px;
    max-width: 560px;
}
.mc-panel-cta__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.mc-panel-cta__reset {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--mc-muted);
    border-bottom: 1px solid #2A303E;
    padding-bottom: 3px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.mc-panel-cta__reset:hover { color: var(--mc-accent); border-color: var(--mc-accent); }

/* ============ Service Detail · 2-col grid + key-value list ============ */
.mc-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
}
@media (max-width: 800px) { .mc-svc-grid { grid-template-columns: 1fr; } }

.mc-kv {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mc-kv li {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 12px 26px;
    border-bottom: 1px solid var(--mc-border-subtle);
    align-items: baseline;
}
.mc-kv li:last-child { border-bottom: 0; }
.mc-kv span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.8px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-kv strong {
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--mc-ink);
    font-weight: 600;
}

.mc-actions-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    flex-wrap: wrap;
}
.mc-link-mono--danger {
    margin-left: auto;
    color: var(--mc-launch);
}
.mc-link-mono--danger:hover { color: var(--mc-launch); }

/* ============ Service Detail · Status modifiers ============ */
.mc-svc-status--active .mc-svc-status__dot { background: var(--mc-green); box-shadow: 0 0 8px var(--mc-green); }
.mc-svc-status--pending .mc-svc-status__dot { background: var(--mc-amber); box-shadow: 0 0 8px var(--mc-amber); }
.mc-svc-status--suspended .mc-svc-status__dot,
.mc-svc-status--terminated .mc-svc-status__dot { background: var(--mc-launch); box-shadow: 0 0 8px var(--mc-launch); }
.mc-svc-status--cancelled .mc-svc-status__dot { background: var(--mc-muted); box-shadow: none; }

/* ============ Service Detail · Panel + Definition List ============ */
.mc-svc-panel {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    overflow: hidden;
}
.mc-svc-panel__head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--mc-border-subtle);
    background: var(--mc-surface-2);
}
.mc-svc-panel__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2.5px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.mc-svc-panel__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
    line-height: 1;
}
.mc-svc-panel__body { padding: 22px 24px; }

.mc-svc-dl {
    margin: 0;
    padding: 0;
}
.mc-svc-dl > div {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--mc-border-subtle);
    align-items: baseline;
}
.mc-svc-dl > div:last-child { border-bottom: 0; }
.mc-svc-dl dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    font-weight: 600;
}
.mc-svc-dl dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink);
    line-height: 1.5;
    word-break: break-word;
}
.mc-svc-dl dd strong { font-weight: 600; }
.mc-svc-dl dd code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--mc-surface-2);
    color: var(--mc-ink);
    padding: 3px 8px;
    border: 1px solid var(--mc-border-subtle);
}
@media (max-width: 600px) {
    .mc-svc-dl > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 20px; }
}

.mc-svc-dl--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.mc-svc-dl--cols > div {
    padding: 14px 24px;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-svc-dl--cols > div:nth-last-child(-n+2):not(:nth-child(odd):last-child) { border-bottom: 0; }
@media (max-width: 600px) { .mc-svc-dl--cols { grid-template-columns: 1fr; } }

/* ============ Service Detail · Resource usage bars ============ */
.mc-svc-usage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 24px;
}
@media (max-width: 600px) { .mc-svc-usage { grid-template-columns: 1fr; } }
.mc-svc-usage__cell { display: flex; flex-direction: column; gap: 8px; }
.mc-svc-usage__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    font-weight: 600;
}
.mc-svc-usage__value {
    font-family: var(--font-head);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--mc-ink);
}
.mc-svc-usage__value small {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--mc-ink-2);
    letter-spacing: 1px;
    margin-left: 4px;
}
.mc-svc-usage__bar {
    height: 6px;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-subtle);
    overflow: hidden;
    position: relative;
}
.mc-svc-usage__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-amber));
    transition: width 0.4s ease;
}
.mc-svc-usage__updated {
    margin: 0 24px 20px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
}

/* ============ Service Detail · Action bar ============ */
.mc-svc-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.mc-btn--ghost-danger {
    background: transparent !important;
    border: 1.5px solid var(--mc-launch) !important;
    color: var(--mc-launch) !important;
}
.mc-btn--ghost-danger:hover {
    background: var(--mc-launch) !important;
    color: #fff !important;
}
.mc-btn.is-disabled, .mc-btn--ghost-danger.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ============ Ticket submit · single-card layout ============ */
.mc-ticket-form {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
}
/* The ticket form reuses .mc-form for its file-input styling, but must not
   inherit the 520px login-card shell */
.mc-ticket-form .mc-form {
    max-width: none;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}
.mc-ticket-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-top: 3px solid var(--mc-ink);
}
.mc-ticket-section {
    padding: 36px 44px;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-ticket-section--last { padding-top: 28px; padding-bottom: 28px; }
.mc-ticket-section:last-child { border-bottom: 0; }
@media (max-width: 720px) {
    .mc-ticket-section { padding: 28px 22px; }
}
.mc-ticket-section__head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
}
.mc-ticket-section__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--mc-ink);
    color: var(--mc-accent);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}
.mc-ticket-section__title {
    margin: 0 0 4px;
    font-family: var(--font-head);
    font-size: 22px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
    line-height: 1.1;
}
.mc-ticket-section__sub {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    line-height: 1.5;
}
.mc-ticket-section__body { padding-left: 60px; }
@media (max-width: 720px) {
    .mc-ticket-section__body { padding-left: 0; }
    .mc-ticket-section__head { gap: 12px; }
}

/* "main form.mc-form > div" forces block — the ticket form reuses .mc-form,
   so the footer needs its flex re-asserted at higher specificity */
.mc-ticket-footer,
main form.mc-form > .mc-ticket-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}
@media (max-width: 560px) {
    .mc-ticket-footer { flex-direction: column-reverse; align-items: stretch; }
    .mc-ticket-footer .mc-btn { justify-content: center; }
    .mc-ticket-footer .mc-link-mono { text-align: center; }
}

.mc-attach { display: flex; flex-direction: column; gap: 8px; }
.mc-attach__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.mc-attach__row .custom-file { flex: 1; min-width: 220px; position: relative; }
.mc-attach__row .custom-file-input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.mc-attach__row .custom-file-label {
    display: block;
    padding: 12px 16px;
    margin: 0;
    background: var(--mc-surface-2);
    border: 1px dashed var(--mc-border);
    color: var(--mc-ink-2);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
}
.mc-attach__row .custom-file-label:hover { border-color: var(--mc-ink); color: var(--mc-ink); }

/* ============ Mission Control form ============ */
.mc-form__grid {
    display: grid;
    gap: 16px;
}
.mc-form__grid--2 { grid-template-columns: 1fr 1fr; }
.mc-form__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
    .mc-form__grid--2, .mc-form__grid--3 { grid-template-columns: 1fr; }
}
.mc-form__field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.mc-form__field:last-child { margin-bottom: 0; }
.mc-form__field label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    font-weight: 600;
}
.mc-form__field input[type="text"],
.mc-form__field input[type="email"],
.mc-form__field input[type="password"],
.mc-form__field input[type="number"],
.mc-form__field input[type="tel"],
.mc-form__field input[type="url"],
.mc-form__field select,
.mc-form__field textarea {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    color: var(--mc-ink) !important;
    padding: 14px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    width: 100% !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    line-height: 1.4 !important;
}
.mc-form__field input:focus,
.mc-form__field select:focus,
.mc-form__field textarea:focus {
    border-color: var(--mc-ink) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(250,204,21,0.18) !important;
}
.mc-form__field input[disabled],
.mc-form__field select[disabled] {
    background: var(--mc-surface-2) !important;
    color: var(--mc-ink-2) !important;
    cursor: not-allowed !important;
}
.mc-form__hint {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--mc-ink-2);
}
.mc-form__hint code {
    background: var(--mc-surface-2);
    padding: 2px 6px;
    border: 1px solid var(--mc-border-subtle);
    font-size: 11px;
}

/* Custom file input inside mc-form */
.mc-form .custom-file { position: relative; flex: 1; min-width: 200px; }
.mc-form .custom-file-input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; }
.mc-form .custom-file-label {
    display: block;
    padding: 11px 14px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    color: var(--mc-ink-2);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    margin: 0;
    text-transform: uppercase;
}
.mc-form .input-group { display: flex; gap: 8px; flex-wrap: nowrap; }
.mc-form .input-group-append { display: flex; }

/* ============ Alert variants ============ */
.mc-alert--success { border-left: 4px solid var(--mc-green); background: rgba(31, 164, 99, 0.06); color: var(--mc-ink); }
.mc-alert--danger { border-left: 4px solid var(--mc-launch); background: rgba(234, 88, 12, 0.06); color: var(--mc-ink); }

/* ============ Service Detail · Help band ============ */
.mc-help-band {
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 32px;
    align-items: center;
    padding: 32px 36px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-left: 4px solid var(--mc-accent);
}
@media (max-width: 700px) { .mc-help-band { grid-template-columns: 1fr; } }
.mc-help-band__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-ink-2);
}
.mc-help-band__title {
    font-family: var(--font-head);
    font-size: 28px;
    letter-spacing: 1px;
    margin: 8px 0 6px;
    text-transform: uppercase;
}
.mc-help-band__body p {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    margin: 0;
}
.mc-help-band__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
@media (max-width: 700px) { .mc-help-band__actions { flex-direction: row; align-items: center; } }

/* ============ Service Console readouts ============ */
.mc-svc-readouts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--mc-border);
    border: 1px solid var(--mc-border);
    margin-bottom: 32px;
}
@media (max-width: 800px) { .mc-svc-readouts { grid-template-columns: repeat(2, 1fr); } }
.mc-svc-readout {
    background: var(--mc-surface);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mc-svc-readout__head { display: flex; justify-content: space-between; align-items: baseline; }
.mc-svc-readout__head span {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
}
.mc-svc-readout__head strong {
    font-family: var(--font-data);
    font-size: 28px;
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-svc-readout__head strong small {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--mc-muted);
    margin-left: 3px;
    font-weight: 400;
    letter-spacing: 1px;
}
.mc-svc-readout__bar { height: 4px; background: var(--mc-border-subtle); }
.mc-svc-readout__bar span { display: block; height: 100%; background: var(--mc-ink); transition: width 0.4s ease; }
.mc-svc-readout__bar--accent span { background: var(--mc-accent); }
.mc-svc-readout__cap {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
}

/* ============ Service Console tabs + panels ============ */
.mc-svc-tabs {
    display: flex;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-bottom: 0;
}
.mc-svc-tab {
    background: transparent;
    border: 0;
    padding: 14px 22px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.mc-svc-tab:hover { color: var(--mc-ink); }
.mc-svc-tab.is-active { color: var(--mc-ink); border-bottom-color: var(--mc-accent); }
.mc-svc-panel {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
}

/* ============ Live console ============ */
.mc-console { display: flex; flex-direction: column; }
.mc-console__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
}
.mc-console__title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-ink);
}
.mc-console__filters { display: flex; gap: 8px; }
.mc-console__filter {
    background: transparent;
    border: 1px solid var(--mc-border);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    cursor: pointer;
}
.mc-console__filter.is-active { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }

.mc-console__lines {
    list-style: none;
    margin: 0;
    padding: 16px 0;
    background: #0A0F1A;
    color: #cfe9f5;
    max-height: 400px;
    overflow-y: auto;
    font-family: var(--font-data);
    font-size: 12px;
    line-height: 1.6;
}
.mc-console__line {
    display: grid;
    grid-template-columns: 78px 60px 1fr;
    gap: 14px;
    padding: 2px 22px;
}
.mc-console__line:hover { background: rgba(255,255,255,0.04); }
.mc-console__time { color: var(--mc-muted); }
.mc-console__level { font-weight: 600; }
.mc-console__line--info  .mc-console__level { color: var(--mc-accent); }
.mc-console__line--warn  .mc-console__level { color: var(--mc-launch); }
.mc-console__line--error .mc-console__level { color: #FF5757; }
.mc-console__msg { color: #DDE1EA; }

.mc-console__input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #0A0F1A;
    border-top: 1px solid #2A303E;
}
.mc-console__prompt {
    color: var(--mc-accent);
    font-family: var(--font-data);
    font-size: 16px;
    font-weight: 600;
}
.mc-console__input input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #cfe9f5;
    font-family: var(--font-data);
    font-size: 13px;
    padding: 0;
}
.mc-console__input input::placeholder { color: var(--mc-muted); }
.mc-console__input input:focus { outline: none; }

/* ============ Generic list (mods, backups, settings) ============ */
.mc-list { display: flex; flex-direction: column; }
.mc-list__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
}
.mc-list__rows { list-style: none; margin: 0; padding: 0; }
.mc-list__row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 18px;
    align-items: center;
    padding: 12px 22px;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-list__row:last-child { border-bottom: 0; }
.mc-list__cell--icon { font-family: var(--font-data); color: var(--mc-muted); }
.mc-list__dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--mc-border);
}
.mc-list__dot.is-on { background: var(--mc-green); box-shadow: 0 0 8px rgba(31, 164, 99, 0.4); }
.mc-list__cell--main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-list__cell--main strong {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--mc-ink);
    font-weight: 600;
}
.mc-list__cell--main em {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--mc-muted);
    font-style: normal;
    letter-spacing: 0.5px;
}
.mc-list__cell--state {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    padding: 4px 9px;
    border: 1px solid var(--mc-border);
}
.mc-list__cell--actions {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
}
.mc-list__cell--actions a { color: var(--mc-ink-2); }
.mc-list__cell--actions a:hover { color: var(--mc-ink); }
.mc-list__foot {
    padding: 16px 22px;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
}

.mc-settings { list-style: none; margin: 0; padding: 0; }
.mc-settings li {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 18px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--mc-border-subtle);
}
.mc-settings li:last-child { border-bottom: 0; }
.mc-settings strong {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}
.mc-settings em {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--mc-ink-2);
    font-style: normal;
}
.mc-switch { position: relative; display: inline-block; width: 44px; height: 22px; }
.mc-switch input { display: none; }
.mc-switch span {
    display: block;
    width: 100%; height: 100%;
    background: var(--mc-border);
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
}
.mc-switch span::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--mc-surface);
    transition: transform 0.2s ease;
}
.mc-switch input:checked + span { background: var(--mc-accent); }
.mc-switch input:checked + span::after { transform: translateX(22px); }

/* ============ Tickets list ============ */
.mc-ticket-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.mc-ticket-toolbar .mc-tabs {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    flex: 0 0 auto;
}
.mc-ticket-toolbar .mc-tab { padding: 11px 18px; }

.mc-tickets {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
}
.mc-tickets__head,
.mc-tickets__row {
    display: grid;
    grid-template-columns: 140px 2fr 1fr 1fr 130px;
    gap: 18px;
    align-items: center;
    padding: 14px 22px;
}
.mc-tickets__head {
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
}
.mc-tickets__row {
    border-bottom: 1px solid var(--mc-border-subtle);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.mc-tickets__row:last-child { border-bottom: 0; }
.mc-tickets__row:hover { background: var(--mc-surface-2); }

.mc-tickets__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.mc-tickets__status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--mc-muted);
}
.mc-tickets__status--open .mc-tickets__status__dot     { background: var(--mc-green); }
.mc-tickets__status--awaiting .mc-tickets__status__dot { background: var(--mc-launch); animation: mc-pulse-amber 1.6s ease-in-out infinite; }
.mc-tickets__status--closed .mc-tickets__status__dot   { background: var(--mc-border); }
.mc-tickets__status--awaiting { color: var(--mc-launch); }
.mc-tickets__status--open { color: var(--mc-green); }
.mc-tickets__status--closed { color: var(--mc-muted); }

.mc-tickets__subject { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-tickets__subject strong {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--mc-muted);
}
.mc-tickets__subject em {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 14px;
    color: var(--mc-ink);
}

.mc-tickets__cell {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--mc-ink-2);
}
.mc-tickets__cell--right { text-align: right; }

/* ============ Ticket view (thread) ============ */
.mc-ticket-hd { margin-bottom: 32px; }
.mc-ticket-hd__crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    margin-bottom: 18px;
}
.mc-ticket-hd__crumb a { color: var(--mc-muted); }
.mc-ticket-hd__crumb a:hover { color: var(--mc-ink); }
.mc-ticket-hd__crumb span:not(a) { color: var(--mc-ink); }

.mc-ticket-hd__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.mc-ticket-hd__id {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    display: block;
    margin-bottom: 8px;
}
.mc-ticket-hd__title {
    font-family: var(--font-head);
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.05;
}
.mc-ticket-hd__lead {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    margin: 8px 0 0;
}

.mc-ticket-hd__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 12px 16px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
}
.mc-ticket-hd__strip em {
    font-style: normal;
    color: var(--mc-muted);
    margin-right: 4px;
}

.mc-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.mc-msg {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 18px 22px;
}
.mc-msg--staff {
    border-left: 4px solid var(--mc-accent);
    background: var(--mc-surface);
}
.mc-msg__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
}
.mc-msg__author { color: var(--mc-ink); font-weight: 600; }
.mc-msg__role {
    color: var(--mc-ink-2);
    padding: 2px 7px;
    border: 1px solid var(--mc-border);
    font-size: 9px;
    letter-spacing: 1.5px;
}
.mc-msg--staff .mc-msg__role {
    background: var(--mc-accent);
    color: var(--mc-ink);
    border-color: var(--mc-accent);
}
.mc-msg__time { color: var(--mc-muted); margin-left: auto; }
.mc-msg__body { font-family: var(--font-body); font-size: 14px; color: var(--mc-ink); line-height: 1.6; }

.mc-reply {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
}
.mc-reply__head {
    display: flex;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
}
.mc-reply__title { color: var(--mc-ink); }
.mc-reply__hint { color: var(--mc-muted); }
.mc-reply__input {
    width: 100%;
    border: 0;
    padding: 18px 22px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink);
    background: var(--mc-surface);
    resize: vertical;
}
.mc-reply__input:focus { outline: none; background: var(--mc-surface-2); }
.mc-reply__foot {
    display: flex;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid var(--mc-border-subtle);
    align-items: center;
}
.mc-reply__attach {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    cursor: pointer;
    padding: 8px 12px;
    border: 1.5px dashed var(--mc-border);
}
.mc-reply__attach:hover { color: var(--mc-ink); border-color: var(--mc-ink); }

/* ============ Submit ticket departments ============ */
.mc-submit { display: flex; flex-direction: column; }
.mc-submit__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
}
.mc-dept-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--mc-border);
}
@media (max-width: 700px) { .mc-dept-grid { grid-template-columns: 1fr; } }
.mc-dept {
    background: var(--mc-surface);
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mc-dept:hover { background: var(--mc-surface-2); }
.mc-dept input { display: none; }
.mc-dept__pick {
    width: 22px; height: 22px;
    border: 1.5px solid var(--mc-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-weight: 700;
}
.mc-dept.is-active { box-shadow: inset 0 0 0 2px var(--mc-ink); }
.mc-dept.is-active .mc-dept__pick { background: var(--mc-accent); border-color: var(--mc-ink); color: var(--mc-ink); }
.mc-dept__body { display: flex; flex-direction: column; gap: 2px; }
.mc-dept__body strong {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
    font-weight: 600;
}
.mc-dept__body em {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 12px;
    color: var(--mc-ink-2);
}
.mc-dept__eta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-amber);
}

/* ============ Invoice header + grid ============ */
.mc-invoice-hd { margin-bottom: 28px; }
.mc-invoice-hd__crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    margin-bottom: 18px;
}
.mc-invoice-hd__crumb a { color: var(--mc-muted); }
.mc-invoice-hd__crumb a:hover { color: var(--mc-ink); }
.mc-invoice-hd__crumb span:not(a) { color: var(--mc-ink); }
.mc-invoice-hd__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.mc-invoice-hd__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    display: block;
    margin-bottom: 6px;
}
.mc-invoice-hd__title {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}
.mc-invoice-hd__meta {
    display: flex;
    gap: 22px;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink);
}
.mc-invoice-hd__meta em { font-style: normal; color: var(--mc-muted); margin-right: 4px; }
.mc-invoice-hd__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}
.mc-invoice-hd__status__dot { width: 8px; height: 8px; border-radius: 50%; }
.mc-invoice-hd__status--paid    { background: rgba(31, 164, 99, 0.12); color: var(--mc-green); }
.mc-invoice-hd__status--paid    .mc-invoice-hd__status__dot { background: var(--mc-green); }
.mc-invoice-hd__status--unpaid  { background: rgba(234, 88, 12, 0.12); color: var(--mc-launch); }
.mc-invoice-hd__status--unpaid  .mc-invoice-hd__status__dot { background: var(--mc-launch); animation: mc-pulse-amber 1.6s ease-in-out infinite; }
.mc-invoice-hd__status--overdue { background: rgba(234, 88, 12, 0.18); color: var(--mc-launch); }
.mc-invoice-hd__status--overdue .mc-invoice-hd__status__dot { background: var(--mc-launch); }

.mc-invoice-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) { .mc-invoice-grid { grid-template-columns: 1fr; } }

.mc-invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
}
.mc-invoice-table th {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-align: left;
    padding: 12px 26px;
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
    text-transform: uppercase;
}
.mc-invoice-table td {
    padding: 12px 26px;
    border-bottom: 1px solid var(--mc-border-subtle);
    font-size: 14px;
    color: var(--mc-ink);
    vertical-align: top;
}
.mc-invoice-table td strong {
    display: block;
    font-family: var(--font-data);
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-invoice-table td em {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--mc-muted);
    font-style: normal;
    letter-spacing: 0.5px;
    margin-top: 3px;
}
.mc-invoice-table .right { text-align: right; }
.mc-invoice-table .is-credit { color: var(--mc-launch); }
.mc-invoice-table__sep td {
    border-top: 1.5px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    background: var(--mc-surface-2);
}
.mc-invoice-table__total td {
    font-family: var(--font-head);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--mc-ink);
    background: var(--mc-surface-2);
}
.mc-invoice-table__balance td {
    background: var(--mc-ink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
    border-bottom: 0;
}
.mc-invoice-table__balance td strong {
    font-family: var(--font-data);
    color: var(--mc-accent);
    font-size: 18px;
    display: inline;
}

.mc-block__foot {
    padding: 18px 26px;
    border-top: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
}

.mc-invoice-notes {
    margin-top: 18px;
    padding: 16px 22px;
    border-left: 4px solid var(--mc-border);
    background: var(--mc-surface);
}
.mc-invoice-notes strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    margin-bottom: 4px;
}
.mc-invoice-notes p { font-family: var(--font-body); font-size: 13px; color: var(--mc-ink-2); margin: 0; }

.mc-invoice-billed {
    padding: 18px 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink);
}
.mc-invoice-billed strong { font-family: var(--font-data); font-weight: 600; }
.mc-invoice-billed pre {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    white-space: pre-wrap;
    line-height: 1.6;
}
.mc-invoice-billed a {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--mc-ink-2);
    border-bottom: 1px solid var(--mc-border);
    margin-top: 6px;
    padding-bottom: 2px;
}
.mc-invoice-billed a:hover { color: var(--mc-ink); border-color: var(--mc-ink); }

.mc-invoice-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* ============ Password reset message ============ */
.mc-form-msg {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--mc-ink-2);
    line-height: 1.55;
    margin: 0;
}

/* ============ Form (login/register/cart use these) ============ */
.mc-form-wrap {
    background: var(--mc-surface-2);
    padding: 96px var(--mc-pad-x);
    display: flex;
    justify-content: center;
}
.mc-form {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 48px;
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mc-form h2 {
    font-family: var(--font-head);
    font-size: 36px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}
.mc-form .sub {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-transform: uppercase;
    margin: 0;
}
.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-field label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-field input,
.mc-field select {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 12px 14px;
    font-family: var(--font-data);
    font-size: 14px;
    color: var(--mc-ink);
}
.mc-field input:focus,
.mc-field select:focus {
    outline: none;
    border-color: var(--mc-ink);
}
.mc-form__row { display: flex; gap: 12px; }
.mc-form__row > * { flex: 1; }
.mc-form__foot {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-muted);
    text-align: center;
    text-transform: uppercase;
    margin-top: 12px;
}
.mc-alert {
    padding: 10px 14px;
    border-left: 3px solid var(--mc-launch);
    background: rgba(234, 88, 12, 0.08);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--mc-launch);
}

/* =====================================================================
   STORE / orderform products listing (templates/orderforms/styx/)
   ===================================================================== */
.mc-store-section { padding: 64px 0; }

.mc-store-cats {
    margin: 24px 0 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.mc-store-cats__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-store-cats__select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-ink);
    padding: 10px 36px 10px 14px;
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    color: var(--mc-ink);
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--mc-ink) 50%), linear-gradient(135deg, var(--mc-ink) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 12px) center;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

.mc-store-products {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
@media (max-width: 760px) { .mc-store-products { grid-template-columns: 1fr; } }

.mc-store-product {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.mc-store-product:hover {
    transform: translateY(-2px);
    border-color: var(--mc-ink);
    box-shadow: 0 14px 36px -22px rgba(18, 24, 38, 0.3);
}
.mc-store-product__band {
    background: var(--mc-surface-2);
    padding: 10px 24px;
    border-bottom: 1px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-store-product__body {
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}
.mc-store-product__name {
    font-family: var(--font-head);
    font-size: 30px;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}
.mc-store-product__desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mc-ink-2);
    line-height: 1.55;
}
.mc-store-product__desc p { margin: 0 0 8px; }
.mc-store-product__features {
    list-style: none;
    padding: 14px 0;
    margin: 0;
    border-top: 1px solid var(--mc-border-subtle);
    border-bottom: 1px solid var(--mc-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mc-store-product__features li {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
}
.mc-store-product__features__val {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--mc-ink);
    font-weight: 600;
    letter-spacing: 0;
}
.mc-store-product__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-top: auto;
    padding-top: 8px;
    flex-wrap: wrap;
}
.mc-store-product__price {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.mc-store-product__from {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.mc-store-product__price__num {
    font-family: var(--font-data);
    font-size: 26px;
    font-weight: 600;
    color: var(--mc-ink);
}
.mc-store-product__price__unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-muted);
    text-transform: uppercase;
    margin-top: 4px;
}
.mc-store-product__setup {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--mc-muted);
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.mc-store-product__stock {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--mc-amber);
    text-transform: uppercase;
}
.mc-store-currency {
    margin-top: 32px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mc-store-currency__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    margin-right: 4px;
    text-transform: uppercase;
}
.mc-store-currency__pill {
    padding: 6px 12px;
    border: 1.5px solid var(--mc-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
}
.mc-store-currency__pill.is-active { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }
.mc-store-currency__pill:hover { border-color: var(--mc-ink); color: var(--mc-ink); }
.mc-store-currency__pill.is-active:hover { color: #fff; }

/* =====================================================================
   Configure-product summary panel — WHMCS injects HTML into #producttotal
   via recalctotals() AJAX (class names: product-name, product-group,
   clearfix + pull-left/right, summary-totals, total-due-today).
   ===================================================================== */
.mc-summary--config { min-height: 240px; }
.mc-summary--config #orderSummaryLoaderBadge { display: none; }

/* standard_cart's css paints .summary-container grey (#f8f8f8) — inside
   our dark panel it must stay transparent. All #producttotal rules below
   are scoped to .mc-summary so the white text can't leak into other cart
   templates rendered with the styx client theme. */
.mc-summary .summary-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    font-size: 12px !important;
}

.mc-summary #producttotal {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #fff;
}
.mc-summary #producttotal .product-name {
    display: block;
    font-family: var(--font-head);
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 4px;
    line-height: 1;
}
.mc-summary #producttotal .product-group {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--mc-accent);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2A303E;
    text-transform: uppercase;
}
.mc-summary #producttotal .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #2A303E;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #fff;
}
.mc-summary #producttotal .pull-left,
.mc-summary #producttotal .float-left {
    flex: 1;
    color: #fff;
    text-align: left;
}
.mc-summary #producttotal .pull-right,
.mc-summary #producttotal .float-right {
    font-family: var(--font-data);
    font-weight: 600;
    color: var(--mc-accent);
    white-space: nowrap;
    text-align: right;
}
.mc-summary #producttotal .summary-totals {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #2A303E;
}
.mc-summary #producttotal .summary-totals .clearfix {
    border-bottom: 0;
    padding: 4px 0;
}
.mc-summary #producttotal .total-due-today {
    margin-top: 14px;
    padding: 14px 0 4px;
    border-top: 1.5px solid var(--mc-accent);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
.mc-summary #producttotal .total-due-today .amt {
    font-family: var(--font-data);
    font-size: 28px;
    font-weight: 600;
    color: var(--mc-accent);
    line-height: 1;
}
.mc-summary #producttotal .total-due-today span:not(.amt) {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--mc-muted);
    text-transform: uppercase;
}
.mc-summary #producttotal a {
    color: var(--mc-muted);
    border-bottom: 1px dashed currentColor;
}
.order-summary .loader {
    padding: 16px 0;
    text-align: center;
    color: var(--mc-accent);
}

/* =====================================================================
   GLOBAL BOOTSTRAP OVERRIDES — applied to twenty-one fallback pages
   (login, register, account, invoices, tickets, announcements, etc.)
   So every page inherits Mission Control look without per-template work.
   ===================================================================== */

main .btn,
main button.btn,
main a.btn {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 11px 20px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}
main .btn:hover { filter: brightness(0.95) !important; transform: translateY(-1px) !important; }
main .btn-default,
main .btn-secondary,
main .btn-light,
main .btn-outline-primary,
main .btn-outline-secondary {
    background: transparent !important;
    border: 1.5px solid var(--mc-ink) !important;
    color: var(--mc-ink) !important;
}
main .btn-default:hover,
main .btn-secondary:hover,
main .btn-light:hover,
main .btn-outline-primary:hover,
main .btn-outline-secondary:hover { background: var(--mc-ink) !important; color: #fff !important; }
main .btn-danger {
    background: var(--mc-launch) !important;
    color: #fff !important;
}
main .btn-sm { padding: 7px 12px !important; font-size: 10px !important; }
main .btn-lg { padding: 14px 24px !important; font-size: 13px !important; }
main .btn-block { display: block !important; width: 100% !important; text-align: center !important; }

/* Cards */
main .card,
main .panel {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
main .card-header,
main .panel-heading {
    background: var(--mc-surface-2) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    border-radius: 0 !important;
    padding: 14px 22px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    color: var(--mc-ink) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
main .card-body,
main .panel-body { padding: 22px !important; }
main .card-footer,
main .panel-footer {
    background: var(--mc-surface-2) !important;
    border-top: 1px solid var(--mc-border) !important;
    padding: 14px 22px !important;
}
main .card-title {
    font-family: var(--font-head) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Headings */
main h1, main h2, main h3, main h4, main h5,
main .h1, main .h2, main .h3, main .h4, main .h5 {
    font-family: var(--font-head) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
}
main h1, main .h1 { font-size: 38px !important; }
main h2, main .h2 { font-size: 30px !important; }
main h3, main .h3 { font-size: 22px !important; }
main h4, main .h4 { font-size: 16px !important; letter-spacing: 1.5px !important; }
main h5, main .h5 { font-size: 13px !important; letter-spacing: 1.8px !important; }

/* Dark-background blocks keep light text against the global main h* override */
main .mc-svc-hero h1, main .mc-svc-hero h2, main .mc-svc-hero h3, main .mc-svc-hero h4, main .mc-svc-hero h5,
main .mc-svc-hero .mc-svc-hero__title,
main .mc-panel-cta h1, main .mc-panel-cta h2, main .mc-panel-cta h3, main .mc-panel-cta h4, main .mc-panel-cta h5,
main .mc-ca-hero h1, main .mc-ca-hero h2, main .mc-ca-hero h3,
main .mc-cta h1, main .mc-cta h2 {
    color: #fff !important;
}

/* Dark-background blocks keep light link colours — specificity must beat the global `main a:not()` chain */
main .mc-svc-hero a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item),
main .mc-panel-cta a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item),
main .mc-ca-hero a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item) {
    color: rgba(255,255,255,0.72) !important;
    border-bottom: none !important;
    text-decoration: none !important;
}
main .mc-svc-hero a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item):hover,
main .mc-panel-cta a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item):hover,
main .mc-ca-hero a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item):hover {
    color: var(--mc-accent) !important;
    border-bottom: none !important;
}

/* Form controls */
main .form-control,
main .form-select,
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="tel"],
main input[type="url"],
main input[type="number"],
main input[type="search"],
main textarea,
main select {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-border) !important;
    border-radius: 0 !important;
    padding: 11px 14px !important;
    font-family: var(--font-data) !important;
    font-size: 14px !important;
    color: var(--mc-ink) !important;
    box-shadow: none !important;
}
main select.form-control,
main select {
    height: auto !important;
    line-height: 1.4 !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23121826'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}
main .form-control:focus,
main input:focus, main textarea:focus, main select:focus {
    outline: none !important;
    border-color: var(--mc-ink) !important;
    box-shadow: 0 0 0 2px var(--mc-accent) !important;
}
main .form-control-label,
main label,
main .form-label {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-ink-2) !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

/* Input groups — must be flex so icon + input + button stay on one line */
main .input-group {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    border: 1.5px solid var(--mc-border) !important;
    background: var(--mc-surface) !important;
    position: relative !important;
}
main .input-group:focus-within {
    border-color: var(--mc-ink) !important;
    box-shadow: 0 0 0 2px var(--mc-accent) !important;
}
main .input-group .form-control,
main .input-group input,
main .input-group-merge .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
main .input-group .form-control:focus { box-shadow: none !important; }
main .input-group-prepend,
main .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
}
main .input-group-text,
main .input-group-prepend .input-group-text,
main .input-group-append .input-group-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
    color: var(--mc-ink-2) !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}
main .input-group-append .btn,
main .input-group-prepend .btn,
main .input-group .btn-reveal-pw {
    margin: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    color: var(--mc-ink-2) !important;
    border: 0 !important;
    border-left: 1px solid var(--mc-border-subtle) !important;
}
main .input-group-append .btn:hover { color: var(--mc-ink) !important; background: var(--mc-surface-2) !important; }

/* Alerts */
main .alert {
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 4px solid var(--mc-ink) !important;
    background: var(--mc-surface-2) !important;
    padding: 14px 18px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    color: var(--mc-ink) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.5px !important;
}
main .alert-success { border-left-color: var(--mc-green) !important; }
main .alert-warning { border-left-color: var(--mc-amber) !important; background: rgba(245, 158, 11, 0.05) !important; }
main .alert-danger  { border-left-color: var(--mc-launch) !important; color: var(--mc-launch) !important; background: rgba(234, 88, 12, 0.05) !important; }
main .alert-info    { border-left-color: var(--mc-accent) !important; background: rgba(250, 204, 21, 0.05) !important; }

/* Pagination */
main .pagination {
    display: flex !important;
    gap: 4px !important;
    padding: 0 !important;
    margin-top: 24px !important;
    list-style: none !important;
}
main .pagination > li { list-style: none !important; }
main .page-item .page-link,
main .pagination li > a,
main .pagination li > span {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-border) !important;
    border-radius: 0 !important;
    color: var(--mc-ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    padding: 8px 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
}
main .page-item.active > .page-link,
main .page-item.active > a,
main .pagination li.active > a {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border-color: var(--mc-ink) !important;
}
main .page-item.disabled > .page-link,
main .page-item.disabled > a { color: var(--mc-muted) !important; cursor: not-allowed !important; opacity: 0.6 !important; }

/* Tables */
main table:not(.mc-summary table) {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--mc-surface) !important;
}
main table:not(.mc-summary table) th {
    background: var(--mc-surface-2) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    padding: 12px 16px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-muted) !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
main table:not(.mc-summary table) td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    font-family: var(--font-data) !important;
    font-size: 13px !important;
    color: var(--mc-ink) !important;
}

/* Misc — text-muted, bg-light, links inside main */
main .text-muted { color: var(--mc-muted) !important; }
main .bg-light { background: var(--mc-surface-2) !important; }
main a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item) {
    color: var(--mc-ink) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--mc-border) !important;
}
main a:not(.btn):not(.mc-btn):not(.mc-deploy__tile):not(.mc-gamecard):not(.mc-store-product):not(.page-link):not(.dropdown-item):not(.tickets__row):not(.mc-tickets__row):not(.mc-service):not(.list-group-item):hover {
    border-color: var(--mc-ink) !important;
}

/* Inner content wrapper — applied to every non-homepage page */
.mc-inner-content {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 56px var(--mc-pad-x);
    min-height: 50vh;
}

/* Container width on fallback content so it doesn't span edge-to-edge */
main > div.container,
main > .container,
main .container:not(.mc-page) {
    max-width: var(--mc-maxw) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Center any card-style form (login, register, etc.) */
main .mw-540,
main .card.mw-540 {
    max-width: 540px !important;
    margin: 0 auto !important;
}
main .mw-720,
main .mw-960 { margin: 0 auto !important; }

/* Login/register form-specific look */
main .login-form .card,
main .signup-form .card {
    border: 1.5px solid var(--mc-ink) !important;
}
main .login-form .card-body .h3 {
    font-size: 30px !important;
}
main .text-muted, main p.text-muted {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
}
main .small, main .text-small {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

/* Announcements + general body content: limit prose width */
main .announcement,
main article {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 24px 28px !important;
    margin-bottom: 16px !important;
}
main .announcement h2,
main .announcement h3 {
    font-family: var(--font-head) !important;
    text-transform: uppercase !important;
    margin: 0 0 10px !important;
}
main .announcement .label-default,
main .label-default {
    background: var(--mc-ink) !important;
    color: var(--mc-accent) !important;
    padding: 4px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
}

/* Forms inside main — generic improvements */
main .form-group { margin-bottom: 18px !important; }
main .form-check-input { margin-right: 8px !important; }

/* Bootstrap grid form rows — make label + input inline like a real form */
main .form-group.row {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    gap: 20px !important;
    align-items: center !important;
}
@media (max-width: 600px) {
    main .form-group.row { grid-template-columns: 1fr !important; gap: 6px !important; align-items: start !important; }
}
main .form-group.row > .col-form-label,
main .form-group.row > label {
    text-align: left !important;
    margin-bottom: 0 !important;
}
main .form-group.row > .col-sm-3,
main .form-group.row > .col-sm-4,
main .form-group.row > .col-sm-7,
main .form-group.row > .col-sm-8,
main .form-group.row > .col-sm-9 {
    width: 100% !important;
    padding: 0 !important;
    flex: none !important;
    max-width: 100% !important;
}
main .form-group.row > [class*="col-sm"] .form-control,
main .form-group.row > [class*="col-sm"] textarea,
main .form-group.row > [class*="col-sm"] select { width: 100% !important; }
main .text-right { text-align: left !important; }

/* Contact + standalone cards — make them feel Mission Control, not Bootstrap */
main .card.mb-4 { margin-bottom: 28px !important; }
main .card-body.extra-padding {
    padding: 36px 44px !important;
}
main .card .h3,
main .card h3.h3,
main .card h6.h3 {
    font-family: var(--font-head) !important;
    font-size: 36px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
    line-height: 1 !important;
    margin: 0 !important;
}
main .card-body .h3 + p,
main .card-body p.text-muted {
    font-family: var(--font-body) !important;
    color: var(--mc-ink-2) !important;
    font-size: 14px !important;
    margin-top: 8px !important;
}

/* Inputs taller for better feel on standalone forms */
main .card-body .form-control,
main .card-body input[type="text"],
main .card-body input[type="email"],
main .card-body input[type="password"],
main .card-body textarea,
main .card-body select { padding: 13px 16px !important; font-size: 15px !important; }

/* (Bootstrap's real grid now loads via twenty-one theme.min.css — the old
   home-made .row{display:grid} fallback fought it and broke float layouts,
   so it has been removed.) */

/* =====================================================================
   KNOWLEDGEBASE
   ===================================================================== */

/* Search box */
main .kb-search,
main .input-group.input-group-lg {
    padding: 0 !important;
    margin-bottom: 28px !important;
}
main .kb-search input,
main .input-group-lg input.form-control {
    padding: 16px 20px !important;
    font-size: 15px !important;
    font-family: var(--font-data) !important;
}
main .kb-search input::placeholder {
    color: var(--mc-muted) !important;
    font-style: normal !important;
}
main .kb-search .btn,
main .input-group-lg .btn {
    padding: 16px 24px !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* Category cards (Luna Multiplayer / Minecraft etc.) */
main .kb-category {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    margin-bottom: 0 !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease !important;
}
main .kb-category:hover {
    transform: translateY(-2px) !important;
    border-color: var(--mc-ink) !important;
    box-shadow: 0 12px 28px -18px rgba(18, 24, 38, 0.3) !important;
}
main .kb-category .card-body,
main .kb-category > a.card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 22px 26px !important;
    color: var(--mc-ink) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
main .kb-category .card-body .h5,
main .kb-category .card-body span.h5 {
    font-family: var(--font-head) !important;
    font-size: 22px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    line-height: 1 !important;
}
main .kb-category i.fal,
main .kb-category i.fa-folder {
    color: var(--mc-amber) !important;
    font-size: 20px !important;
}
main .kb-category .text-muted small,
main .kb-category .text-muted {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--mc-ink-2) !important;
    margin: 0 !important;
}

/* Badges (article count etc.) */
main .badge {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    background: var(--mc-ink) !important;
    color: var(--mc-accent) !important;
}
main .badge.badge-info,
main .badge-info { background: var(--mc-ink) !important; color: var(--mc-accent) !important; }
main .badge.badge-warning,
main .badge-warning { background: var(--mc-amber) !important; color: var(--mc-ink) !important; }
main .badge.badge-success,
main .badge-success { background: var(--mc-green) !important; color: #fff !important; }
main .badge.float-right { float: none !important; margin-left: auto !important; }

/* Move badge to the right when next to a folder/file title */
main .kb-category .h5 .badge { margin-left: auto !important; }

/* Most Popular Articles card */
main .card-title {
    font-family: var(--font-head) !important;
    font-size: 22px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
main .card-title i.fal,
main .card-title i.fa-star { color: var(--mc-accent) !important; }

/* Article list rows */
main .list-group {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
main .list-group-flush > .list-group-item,
main .list-group > .list-group-item {
    background: var(--mc-surface) !important;
    border: 0 !important;
    border-top: 1px solid var(--mc-border-subtle) !important;
    border-radius: 0 !important;
    padding: 16px 26px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mc-ink) !important;
    text-decoration: none !important;
    transition: background 0.12s ease, padding-left 0.12s ease !important;
}
main .list-group-item .badge {
    margin-left: auto !important;
    width: auto !important;
    flex: none !important;
}
main .list-group-item:hover {
    background: var(--mc-surface-2) !important;
    padding-left: 32px !important;
}
main .list-group-item > i,
main .kb-article-item > i {
    color: var(--mc-amber) !important;
    margin-right: 8px !important;
}
main .kb-article-item {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    color: var(--mc-ink) !important;
}
main .kb-article-item small {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    color: var(--mc-ink-2) !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    margin-top: 4px !important;
    display: block !important;
}

/* =====================================================================
   KB article page — title row, vote count, article prose, vote form
   ===================================================================== */
main .card-body > h1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    font-family: var(--font-head) !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    margin: 0 0 18px !important;
    color: var(--mc-ink) !important;
}
main .card-body > h1 .btn,
main .card-body > h1 a.btn {
    margin-left: auto !important;
    float: none !important;
}

/* list-inline (Bootstrap horizontal list) — kills bullets, makes inline */
main .list-inline {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
main .list-inline-item {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    color: var(--mc-ink-2) !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border: 1px solid var(--mc-border) !important;
}
main .list-inline-item i { color: var(--mc-accent) !important; margin-right: 8px !important; }

/* HR — sharp ink line */
main hr {
    border: 0 !important;
    border-top: 1px solid var(--mc-border) !important;
    margin: 22px 0 !important;
}

/* Article prose — scoped to KB article body to avoid affecting Flight Log <article class="mc-log"> */
main .card-body > article,
main .card-body article:not(.mc-log) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--mc-ink) !important;
}
main .card-body article p,
main .card-body > article p {
    margin: 0 0 14px !important;
    color: var(--mc-ink) !important;
}
main .card-body article a:not(.btn):not(.mc-btn) {
    color: var(--mc-ink) !important;
    border-bottom: 1px solid var(--mc-accent) !important;
    text-decoration: none !important;
    word-break: break-word !important;
}
main .card-body article a:not(.btn):not(.mc-btn):hover {
    border-bottom-color: var(--mc-ink) !important;
    background: rgba(250, 204, 21, 0.1) !important;
}

main .card-body article ol,
main .card-body article ul {
    padding-left: 24px !important;
    margin: 12px 0 18px !important;
}
main .card-body article ol > li,
main .card-body article ul > li {
    margin-bottom: 8px !important;
    padding-left: 6px !important;
    color: var(--mc-ink) !important;
}
main .card-body article ol ol,
main .card-body article ul ul,
main .card-body article ol ul,
main .card-body article ul ol { margin: 8px 0 0 !important; }

main .card-body article code {
    background: var(--mc-ink) !important;
    color: var(--mc-accent) !important;
    font-family: var(--font-data) !important;
    font-size: 13px !important;
    padding: 2px 6px !important;
}
main .card-body article pre {
    background: var(--mc-ink) !important;
    color: #cfe9f5 !important;
    padding: 16px 20px !important;
    overflow-x: auto !important;
    font-family: var(--font-data) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 14px 0 !important;
}
main .card-body article blockquote {
    border-left: 3px solid var(--mc-accent) !important;
    padding: 8px 16px !important;
    margin: 14px 0 !important;
    background: var(--mc-surface-2) !important;
    font-style: normal !important;
    color: var(--mc-ink-2) !important;
}

/* "Was this answer helpful?" + vote form */
main .card-body h4 {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink-2) !important;
    margin: 16px 0 12px !important;
}
main form.d-flex,
main form .d-flex { display: flex !important; }
main form .justify-content-between,
main form.justify-content-between { justify-content: space-between !important; }
/* KB article vote form (yes/no buttons) only — never plain form-groups,
   which stack their label above the field */
main .card-body form.kb-vote > div,
main .card-body form[action*="voteup"] > div,
main .card-body form > div.kb-article-vote { display: flex !important; gap: 10px !important; }
main form.mc-form > div, main form.mc-form > div > div { display: block !important; gap: 0 !important; }
main .mc-ticket-card, main .mc-ticket-section { display: block !important; width: 100% !important; }
/* SimpleMDE markdown editor — don't inherit our button styling */
main .editor-toolbar a,
main .CodeMirror, main .CodeMirror * { background: transparent !important; }
main .editor-toolbar a {
    color: var(--mc-ink-2) !important;
    border: 1px solid transparent !important;
    padding: 4px 6px !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
main .editor-toolbar a:hover, main .editor-toolbar a.active {
    background: var(--mc-surface-2) !important;
    color: var(--mc-ink) !important;
    border: 1px solid var(--mc-border) !important;
}
main .editor-toolbar { border: 1px solid var(--mc-border) !important; background: var(--mc-surface) !important; }
main .CodeMirror { border: 1px solid var(--mc-border) !important; border-top: none !important; padding: 8px !important; }
main .btn-secondary {
    background: transparent !important;
    border: 1.5px solid var(--mc-ink) !important;
    color: var(--mc-ink) !important;
}
main .btn-secondary:hover { background: var(--mc-ink) !important; color: #fff !important; }
main button[value="yes"]:hover { background: var(--mc-green) !important; border-color: var(--mc-green) !important; color: #fff !important; }
main button[value="no"]:hover  { background: var(--mc-launch) !important; border-color: var(--mc-launch) !important; color: #fff !important; }

/* Bootstrap utility classes — quick fallbacks */
main .d-flex { display: flex !important; }
main .d-block { display: block !important; }
main .d-inline-block { display: inline-block !important; }
main .justify-content-between { justify-content: space-between !important; }
main .justify-content-center { justify-content: center !important; }
main .align-items-center { align-items: center !important; }
main .float-right { float: none !important; margin-left: auto !important; }
main .float-left { float: none !important; }
main .text-right { text-align: right !important; }
main .mr-2 { margin-right: 8px !important; }
main .ml-2 { margin-left: 8px !important; }
main .pr-3 { padding-right: 0 !important; }
main .px-4 { padding-left: 22px !important; padding-right: 22px !important; }
main .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
main .m-0 { margin: 0 !important; }
main .mb-2 { margin-bottom: 8px !important; }
main .mb-4 { margin-bottom: 24px !important; }
main .mt-4 { margin-top: 24px !important; }
main .text-center { text-align: center !important; }
main .no-gutters { gap: 0 !important; }
main .offset-1, main .offset-sm-1 { grid-column-start: 2 !important; }
main .col-10, main .col-sm-10 { width: 100% !important; }

/* =====================================================================
   CLIENT AREA DASHBOARD — top tiles (Services / Quotes / Tickets / Invoices)
   ===================================================================== */
main .tiles { margin-bottom: 28px !important; }
main .tiles .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}
/* Bootstrap col widths don't apply inside the tiles grid */
main .tiles .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}
@media (max-width: 760px) { main .tiles .row { grid-template-columns: repeat(2, 1fr) !important; } }
main .tile {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 22px 24px !important;
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    color: var(--mc-ink) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease !important;
}
main .tile:hover {
    transform: translateY(-2px) !important;
    border-color: var(--mc-ink) !important;
    box-shadow: 0 12px 28px -18px rgba(18, 24, 38, 0.25) !important;
}
main .tile > i.fas,
main .tile > i.far,
main .tile > i.fal {
    font-size: 18px !important;
    color: var(--mc-muted) !important;
    margin-bottom: 2px !important;
}
main .tile .stat {
    font-family: var(--font-data) !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    color: var(--mc-ink) !important;
    line-height: 1 !important;
    margin: 4px 0 2px !important;
}
main .tile .title {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-muted) !important;
    text-transform: uppercase !important;
}
main .tile .highlight {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: 4px !important;
}
main .bg-color-blue,
main .tile .highlight.bg-color-blue { background: #5B7CFF !important; }
main .bg-color-green,
main .tile .highlight.bg-color-green { background: var(--mc-green) !important; }
main .bg-color-red,
main .tile .highlight.bg-color-red { background: var(--mc-launch) !important; }
main .bg-color-gold,
main .tile .highlight.bg-color-gold { background: var(--mc-accent) !important; }
main .bg-color-orange,
main .tile .highlight.bg-color-orange { background: var(--mc-amber) !important; }

/* =====================================================================
   STATUS LABELS — services, tickets, invoices, domains
   ===================================================================== */
main .label.status,
main .label,
main .badge.status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    line-height: 1.2 !important;
}
main .label.status::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* status colors — services + general */
main .status-active,
main .label.status-active,
main .status-paid,
main .label.status-paid     { background: rgba(31, 164, 99, 0.15) !important; color: var(--mc-green) !important; }
main .status-pending,
main .label.status-pending,
main .status-onhold,
main .label.status-onhold,
main .status-awaitingreply,
main .label.status-awaitingreply { background: rgba(245, 158, 11, 0.18) !important; color: var(--mc-amber) !important; }
main .status-suspended,
main .label.status-suspended,
main .status-unpaid,
main .label.status-unpaid,
main .status-overdue,
main .label.status-overdue  { background: rgba(234, 88, 12, 0.18) !important; color: var(--mc-launch) !important; }
main .status-terminated,
main .label.status-terminated,
main .status-cancelled,
main .label.status-cancelled,
main .status-fraud,
main .label.status-fraud,
main .status-closed,
main .label.status-closed   { background: var(--mc-surface-2) !important; color: var(--mc-muted) !important; }
main .status-open,
main .label.status-open     { background: rgba(91, 124, 255, 0.15) !important; color: #5B7CFF !important; }
main .status-completed,
main .label.status-completed { background: rgba(31, 164, 99, 0.12) !important; color: var(--mc-green) !important; }

/* =====================================================================
   CARD-TITLE row — make h3.card-title display flex so .float-right button
   sits on the right instead of as a separate line
   ===================================================================== */
main h3.card-title,
main .card-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
main h3.card-title .float-right,
main .card-title .float-right {
    margin-left: auto !important;
    order: 99 !important;
}
main .card-title .float-right .btn,
main .card-title .btn-xs {
    padding: 6px 12px !important;
    font-size: 10px !important;
    margin: 0 !important;
}
main .card-title i.fas,
main .card-title i.far,
main .card-title i.fal { color: var(--mc-amber) !important; }

/* Card accent variants — coloured top stripe on dashboard panels */
main .card-accent-blue   { border-top: 4px solid #5B7CFF !important; }
main .card-accent-green  { border-top: 4px solid var(--mc-green) !important; }
main .card-accent-red    { border-top: 4px solid var(--mc-launch) !important; }
main .card-accent-gold,
main .card-accent-yellow { border-top: 4px solid var(--mc-accent) !important; }
main .card-accent-orange { border-top: 4px solid var(--mc-amber) !important; }

/* =====================================================================
   TABLES — used by services, invoices, tickets, domains
   ===================================================================== */
main .table-container {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
main .table-container > .table,
main .table-list,
main table.table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}
main table.table tbody tr,
main .table-list tbody tr {
    cursor: pointer !important;
    transition: background 0.12s ease !important;
}
main table.table tbody tr:hover,
main .table-list tbody tr:hover { background: var(--mc-surface-2) !important; }
main table.table thead th {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-muted) !important;
    background: var(--mc-surface-2) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    padding: 13px 18px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
main table.table tbody td {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    font-family: var(--font-data) !important;
    font-size: 13px !important;
    color: var(--mc-ink) !important;
    vertical-align: middle !important;
}
main table.table tbody tr:last-child td { border-bottom: 0 !important; }
main table.table td strong { font-weight: 600 !important; color: var(--mc-ink) !important; }
main table.table td small { color: var(--mc-muted) !important; font-family: var(--font-mono) !important; letter-spacing: 0.5px !important; }

/* DataTables search box + length + paginate + info */
main .dataTables_wrapper {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 0 !important;
}
main .dataTables_wrapper .row { padding: 14px 18px !important; gap: 14px !important; background: var(--mc-surface-2) !important; border-bottom: 1px solid var(--mc-border); }
main .dataTables_filter {
    text-align: right !important;
}
main .dataTables_filter label {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-muted) !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
main .dataTables_filter input {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-border) !important;
    padding: 8px 12px !important;
    font-family: var(--font-data) !important;
    font-size: 13px !important;
    color: var(--mc-ink) !important;
    width: 240px !important;
    text-transform: none !important;
}
main .dataTables_filter input:focus {
    outline: none !important;
    border-color: var(--mc-ink) !important;
    box-shadow: 0 0 0 2px var(--mc-accent) !important;
}
main .dataTables_length label {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-muted) !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
main .dataTables_length select {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-border) !important;
    padding: 6px 10px !important;
    font-family: var(--font-data) !important;
    font-size: 12px !important;
}
main .dataTables_info {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    color: var(--mc-muted) !important;
    text-transform: uppercase !important;
    padding: 12px 18px !important;
    border-top: 1px solid var(--mc-border-subtle) !important;
}
main .dataTables_paginate {
    padding: 12px 18px !important;
    border-top: 1px solid var(--mc-border-subtle) !important;
    text-align: right !important;
}
main .dataTables_paginate .paginate_button {
    display: inline-block !important;
    padding: 6px 12px !important;
    border: 1.5px solid var(--mc-border) !important;
    background: var(--mc-surface) !important;
    color: var(--mc-ink) !important;
    margin: 0 2px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
main .dataTables_paginate .paginate_button.current,
main .dataTables_paginate .paginate_button.current:hover {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border-color: var(--mc-ink) !important;
}
main .dataTables_paginate .paginate_button.disabled,
main .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Generic "Page header" for client-area sub-pages that don't have one.
   Use ::before on .mc-inner-content > .table-container if useful, but
   safer: rely on title in twenty-one's mainBodyTitle var (rendered elsewhere). */
main .page-header,
main .mainBodyTitle {
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--mc-border) !important;
    font-family: var(--font-head) !important;
    font-size: 36px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
}
main .mainbody-title,
main .mainbody-subtitle {
    font-family: var(--font-head) !important;
    font-size: 36px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

/* =====================================================================
   CANCEL REQUEST FORM
   ===================================================================== */
main .form-stacked,
main form.form-stacked fieldset { padding: 0 !important; border: 0 !important; }
main form.form-stacked .form-group { margin-bottom: 18px !important; }
main textarea.form-control.fullwidth { width: 100% !important; min-height: 140px !important; }
main .btn.btn-danger {
    background: var(--mc-launch) !important;
    color: #fff !important;
    border: 0 !important;
}
main .btn.btn-danger:hover { filter: brightness(0.92) !important; }
main .btn.btn-success {
    background: var(--mc-green) !important;
    color: #fff !important;
    border: 0 !important;
}
main .btn.btn-success:hover { filter: brightness(0.92) !important; }

/* =====================================================================
   STORE LISTING — legacy_modern orderform (in case carttpl isn't switched)
   ===================================================================== */
main #order-modern {
    background: transparent !important;
}
main #order-modern .title-bar {
    display: flex !important;
    align-items: baseline !important;
    gap: 18px !important;
    margin-bottom: 26px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--mc-border) !important;
    flex-wrap: wrap !important;
}
main #order-modern .title-bar h1,
main #order-modern .title-bar .font-size-36 {
    font-family: var(--font-head) !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
    margin: 0 !important;
    line-height: 1 !important;
}
main #order-modern .choosecat { margin-left: auto !important; }
main #order-modern .choosecat .btn {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-ink) !important;
    color: var(--mc-ink) !important;
}
main #order-modern .currencychooser {
    margin: 18px 0 24px !important;
    display: flex !important;
    gap: 6px !important;
}
main #order-modern .currencychooser .btn {
    background: var(--mc-surface) !important;
    border: 1.5px solid var(--mc-border) !important;
    color: var(--mc-ink-2) !important;
}
main #order-modern .currencychooser .btn.active {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border-color: var(--mc-ink) !important;
}
/* Product cards on /index.php?rp=/store/<category> — uses .product class */
main #order-modern .row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
    margin: 0 !important;
}
@media (max-width: 760px) { main #order-modern .row { grid-template-columns: 1fr !important; } }
main #order-modern .row > [class*="col-"] {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}
main #order-modern .product,
main #order-modern div[id^="product"].product {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 26px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.15s ease, box-shadow 0.2s ease !important;
    color: var(--mc-ink) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
main #order-modern .product::before {
    content: "PROFILE";
    position: absolute !important;
    top: 0;
    left: 0;
    background: var(--mc-surface-2) !important;
    color: var(--mc-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    padding: 5px 12px !important;
    border-right: 1px solid var(--mc-border) !important;
    border-bottom: 1px solid var(--mc-border) !important;
}
main #order-modern .product:hover {
    transform: translateY(-2px) !important;
    border-color: var(--mc-ink) !important;
    box-shadow: 0 14px 30px -18px rgba(18, 24, 38, 0.3) !important;
}
main #order-modern .product .name {
    font-family: var(--font-head) !important;
    font-size: 28px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink) !important;
    margin: 14px 0 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    float: none !important;
    width: auto !important;
    order: 1 !important;
}
main #order-modern .product .description {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--mc-ink-2) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--mc-border-subtle) !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    float: none !important;
    background: transparent !important;
    order: 3 !important;
}
main #order-modern .product .description strong {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    color: var(--mc-ink) !important;
    text-transform: uppercase !important;
    display: block !important;
    margin: 6px 0 4px !important;
}
main #order-modern .product .description br + br { display: block !important; content: "" !important; height: 6px !important; }
main #order-modern .product .pricing {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    color: var(--mc-muted) !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    order: 2 !important;
}
main #order-modern .product .pricing .pricing,
main #order-modern .product span.pricing {
    display: block !important;
    font-family: var(--font-data) !important;
    font-size: 36px !important;
    color: var(--mc-ink) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin: 6px 0 4px !important;
    text-transform: none !important;
}
main #order-modern .product .clear { display: none !important; }
main #order-modern .product .text-right {
    text-align: right !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    order: 4 !important;
}
main #order-modern .product .text-right .btn,
main #order-modern .product .btn.btn-success {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
    border: 0 !important;
    padding: 12px 22px !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    width: 100% !important;
    display: inline-block !important;
    text-align: center !important;
}
main #order-modern .product .btn.btn-success:hover { filter: brightness(0.95) !important; }
main #order-modern .product .btn i.fas { color: var(--mc-ink) !important; margin-right: 6px !important; }

/* =====================================================================
   PRODUCT DETAILS / SERVICE OVERVIEW (clientareaproductdetails)
   ===================================================================== */
main .channel {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    color: var(--mc-muted) !important;
    text-transform: uppercase !important;
}
main .text-right { text-align: left !important; } /* normalise — was right-aligned label/value pair, now stacked */
main .bottom-border {
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

/* List-group with active state */
main .list-group-item.active {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border-color: var(--mc-ink) !important;
}
main .list-group-item-action:hover { background: var(--mc-surface-2) !important; }
main .badge:not(.label) {
    background: var(--mc-ink) !important;
    color: var(--mc-accent) !important;
    border-radius: 0 !important;
}

/* =====================================================================
   MOBILE NAV (always-present markup, hidden on desktop)
   ===================================================================== */
.mc-nav__burger {
    display: none;
    background: transparent;
    border: 1.5px solid var(--mc-ink);
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.mc-nav__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--mc-ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.mc-nav.is-open .mc-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mc-nav.is-open .mc-nav__burger span:nth-child(2) { opacity: 0; }
.mc-nav.is-open .mc-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mc-nav__menu { display: contents; }

/* =====================================================================
   MOBILE ≤880px — nav goes hamburger, partner sub-line drops,
   most desktop side-by-side layouts collapse to single column
   ===================================================================== */
@media (max-width: 880px) {
    .mc-nav { position: relative; }
    .mc-nav__burger { display: inline-flex; }

    .mc-nav__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        background: var(--mc-surface);
        border-bottom: 1px solid var(--mc-border);
        padding: 18px var(--mc-pad-x) 22px;
        gap: 18px;
        z-index: 50;
        box-shadow: 0 12px 24px -16px rgba(18, 24, 38, 0.25);
        animation: mc-menu-in 0.22s ease-out;
    }
    .mc-nav.is-open .mc-nav__menu { display: flex; }
    @keyframes mc-menu-in {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .mc-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }
    .mc-nav__links a {
        padding: 14px 4px;
        font-size: 14px;
        border-bottom: 1px solid var(--mc-border-subtle);
    }
    .mc-nav__links a:last-child { border-bottom: 0; }

    .mc-nav__right {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid var(--mc-border-subtle);
    }
    .mc-nav__right .mc-status { justify-content: center; padding: 4px 0; }
    .mc-nav__right .mc-btn { text-align: center; }

    /* Partner bar — keep the badge, drop the secondary sub-line */
    .mc-partner__static { display: none; }
    .mc-partner__inner { justify-content: center; padding: 8px var(--mc-pad-x); }
    .mc-partner__badge { font-size: 10px; letter-spacing: 2px; padding: 4px 9px; }
}

/* =====================================================================
   MOBILE ≤760px — section paddings shrink, multi-col grids collapse,
   tables restructure, sticky sidebars unstick
   ===================================================================== */
@media (max-width: 760px) {

    /* --- Section paddings (96px → 56px) --- */
    .mc-section { padding: 56px 0; }
    .mc-hero { padding: 48px 0 40px; }
    .mc-cta { padding: 72px 0; }
    .mc-ca-hero { padding: 44px 0 32px; }
    .mc-svc-hero { padding: 40px 0 30px; }
    .mc-cart-hero { padding: 72px 0 52px; }
    .mc-cart-hero--compact { padding: 52px 0 36px; }
    .mc-panel-cta { padding: 44px var(--mc-pad-x); }
    .mc-footer { padding: 56px 0; }

    /* --- 3-col → 1-col grids --- */
    .mc-systems,
    .mc-logs,
    .mc-dash { grid-template-columns: 1fr; }
    .mc-svc-grid { grid-template-columns: 1fr; }
    .mc-config-grid { grid-template-columns: 1fr; }
    .mc-profiles { grid-template-columns: 1fr; }

    /* --- 2-col form fields stack --- */
    .mc-form-grid { grid-template-columns: 1fr; }
    .mc-form__row { flex-direction: column; }

    /* --- Cart configurator main + summary stack, summary unsticks --- */
    .mc-configurator,
    .mc-checkout,
    .mc-invoice-grid {
        grid-template-columns: 1fr;
    }
    .mc-summary { position: static; }

    /* --- Service hero stack and full-width CTA --- */
    .mc-svc-hero__main { flex-direction: column; align-items: stretch; gap: 18px; }
    .mc-svc-hero__actions { flex-wrap: wrap; width: 100%; }
    .mc-svc-hero__action { flex: 1; min-width: 140px; text-align: center; justify-content: center; }
    .mc-panel-cta__actions { flex-direction: column; align-items: stretch; gap: 14px; }
    .mc-panel-cta__actions .mc-btn { text-align: center; justify-content: center; }
    .mc-panel-cta__reset { text-align: center; }

    /* --- Telemetry strip stacks tag above readouts, readouts wrap --- */
    .mc-telemetry__inner { flex-direction: column; align-items: stretch; gap: 18px; }
    .mc-readouts {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 16px 0;
    }
    .mc-readout { padding: 0 18px; min-width: 50%; }
    .mc-readout:first-child { border-left: 0; }
    .mc-readout:nth-child(3) { border-left: 0; }

    /* --- Trust strip wraps --- */
    .mc-trust { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .mc-trust__sep { display: none; }

    /* --- Hero actions stack --- */
    .mc-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin: 0 auto; }
    .mc-actions .mc-btn,
    .mc-actions .mc-deploy,
    .mc-actions .mc-deploy__trigger { width: 100%; text-align: center; justify-content: center; }

    /* --- Deploy dropdown panel — full mobile width, panel grid stacks --- */
    .mc-deploy__panel {
        width: calc(100vw - 24px);
        max-width: 480px;
        left: 50%;
    }
    .mc-deploy__panel__hd { flex-direction: column; align-items: flex-start; gap: 4px; }
    .mc-deploy__panel__count { font-size: 9px; }

    /* --- Mission Profiles section (deploy header) note wraps --- */
    .mc-section__title { font-size: clamp(36px, 8vw, 48px); }
    .mc-cta__head { font-size: clamp(48px, 12vw, 72px); flex-direction: column; align-items: center; gap: 8px; }

    /* --- Tickets / invoices tables → card-stack on mobile --- */
    .mc-tickets__head { display: none; }
    .mc-tickets__row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "status updated"
            "subject subject"
            "meta1 meta2";
        gap: 8px 14px;
        padding: 16px 18px;
        align-items: start;
    }
    .mc-tickets__row > .mc-tickets__status      { grid-area: status; }
    .mc-tickets__row > .mc-tickets__cell--right { grid-area: updated; text-align: right; }
    .mc-tickets__row > .mc-tickets__subject     { grid-area: subject; }
    .mc-tickets__row > .mc-tickets__cell:nth-of-type(1) { grid-area: meta1; }
    .mc-tickets__row > .mc-tickets__cell:nth-of-type(2) { grid-area: meta2; text-align: right; }

    /* --- Invoice table rows compact, KV stacks --- */
    .mc-invoice-table th,
    .mc-invoice-table td { padding: 10px 16px; font-size: 13px; }
    .mc-kv li { grid-template-columns: 1fr; gap: 4px; padding: 10px 18px; }
    .mc-kv span { font-size: 9px; }

    /* --- Service / dashboard cards already responsive at 700px --- */

    /* --- Submit ticket back/save row stacks --- */
    .mc-submit__foot { flex-direction: column; gap: 16px; align-items: stretch; }
    .mc-submit__foot .mc-btn { text-align: center; }

    /* --- Stat strip → 2 cols (already), value smaller --- */
    .mc-statstrip__value { font-size: 22px; }

    /* --- Schematic gets a height floor so the rocket stays usable --- */
    .mc-schematic { aspect-ratio: auto; height: 320px; }

    /* --- Quick actions full width --- */
    .mc-actions-strip { flex-direction: column; align-items: stretch; }
    .mc-actions-strip > * { width: 100%; text-align: center; }
    .mc-link-mono--danger { margin-left: 0; }

    /* --- Tabs stretch to fill --- */
    .mc-svc-tabs { overflow-x: auto; }
    .mc-svc-tab { flex: 0 0 auto; padding: 12px 18px; }

    /* --- Reply box footer stacks --- */
    .mc-reply__foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .mc-reply__foot .mc-btn { text-align: center; }
    .mc-reply__attach { text-align: center; }

    /* --- Help-band actions stack --- */
    .mc-help-band__actions { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   MOBILE ≤480px — small phone aggressive simplification
   ===================================================================== */
@media (max-width: 480px) {
    :root { --mc-pad-x: 16px; }

    .mc-statstrip { grid-template-columns: 1fr 1fr; }
    .mc-statstrip__value { font-size: 20px; }
    .mc-statstrip__cell { padding: 16px 18px; }

    .mc-svc-readouts { grid-template-columns: 1fr; }

    .mc-headline { font-size: clamp(34px, 11vw, 48px); }
    .mc-eyebrow { font-size: 10px; letter-spacing: 1.5px; }
    .mc-eyebrow::before, .mc-eyebrow::after { width: 14px; }
    .mc-subhead { font-size: 15px; }

    .mc-svc-hero__title { font-size: clamp(32px, 9vw, 44px); }
    .mc-cart-hero__title { font-size: clamp(28px, 8vw, 40px); }
    .mc-cart-hero__title { flex-direction: column; align-items: flex-start; gap: 6px; }
    .mc-ca-hero__title { font-size: clamp(28px, 9vw, 40px); }

    .mc-dash__panel { min-height: 120px; padding: 14px; }
    .mc-dash__bars { height: 44px; }

    /* Footer cols stack */
    .mc-footer__top { flex-direction: column; gap: 32px; }
    .mc-footer__cols { flex-wrap: wrap; gap: 32px; }

    /* Modal/panel reduce padding */
    .mc-form { padding: 32px 22px; }
    .mc-form-wrap { padding: 56px var(--mc-pad-x); }
    .mc-block__head { padding: 14px 18px; }
    .mc-block .mc-form-grid { padding: 18px 18px !important; }

    /* Reduce schematic height */
    .mc-schematic { height: 260px; }
}

/* =====================================================================
   STANDARD_CART · skin standard_cart's HTML to Mission Control palette
   ===================================================================== */

#order-standard_cart {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
}
#order-standard_cart > .row {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    margin: 0 !important;
}
@media (max-width: 900px) {
    #order-standard_cart > .row { grid-template-columns: 1fr; }
}
#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-body {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Hide the duplicate collapsed sidebar — we always show the proper one */
#order-standard_cart .sidebar-collapsed { display: none !important; }

/* Sidebar accordion panels */
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 0 !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}
#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .card-header {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 16px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}
/* twenty-one's scripts.min.js collapses every sidebar panel when
   jQuery(".container").width() <= 720 — our layout has no real Bootstrap
   .container, so it measures an empty conditional include (0px) and hides
   the panel bodies on desktop too. Pin them open above mobile widths. */
@media (min-width: 721px) {
    #order-standard_cart .cart-sidebar .collapsable-card-body { display: block !important; }
    #order-standard_cart .cart-sidebar .card-minimise { display: none !important; }
}

/* The label lives in an h3.panel-title — the global "main h3" ink color
   would otherwise render it black on the dark header */
#order-standard_cart .cart-sidebar .panel-heading .panel-title,
#order-standard_cart .cart-sidebar .card-header .panel-title,
#order-standard_cart .cart-sidebar .card-header h3 {
    color: #fff !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
#order-standard_cart .cart-sidebar .panel-heading a,
#order-standard_cart .cart-sidebar .card-header a {
    color: var(--mc-accent) !important;
    border-bottom: none !important;
}
#order-standard_cart .cart-sidebar .panel-body,
#order-standard_cart .cart-sidebar .card-body { padding: 8px 0 !important; }
#order-standard_cart .cart-sidebar ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#order-standard_cart .cart-sidebar ul li a,
#order-standard_cart .cart-sidebar .panel-body a {
    display: block !important;
    padding: 10px 18px !important;
    color: var(--mc-ink) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    background: var(--mc-surface) !important;
}
#order-standard_cart .cart-sidebar ul li:last-child a { border-bottom: none !important; }
#order-standard_cart .cart-sidebar ul li a:hover {
    background: var(--mc-surface-2) !important;
    color: var(--mc-launch) !important;
}
#order-standard_cart .cart-sidebar ul li.active a,
#order-standard_cart .cart-sidebar ul li a.active {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
}

/* Cart body header */
#order-standard_cart .cart-body .header-lined {
    margin-bottom: 22px !important;
    padding: 0 !important;
    border: none !important;
}
#order-standard_cart .cart-body .header-lined h1 {
    font-family: var(--font-head) !important;
    font-size: 36px !important;
    letter-spacing: 2px !important;
    color: var(--mc-ink) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* View-cart items table */
#order-standard_cart .view-cart-items-header {
    background: var(--mc-ink) !important;
    color: #fff !important;
    padding: 14px 22px !important;
    margin: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
}
#order-standard_cart .view-cart-items-header .row {
    display: flex !important;
    margin: 0 !important;
    gap: 0 !important;
}
#order-standard_cart .view-cart-items-header [class*="col-"] {
    padding: 0 8px !important;
    color: rgba(255,255,255,0.85) !important;
}
#order-standard_cart .view-cart-items {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-top: none;
}
#order-standard_cart .view-cart-items .item {
    padding: 20px 22px !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    background: var(--mc-surface) !important;
    margin: 0 !important;
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: none !important; }
#order-standard_cart .view-cart-items .item .row {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
}
#order-standard_cart .view-cart-items .item .row > [class*="col-"] { padding: 0 8px !important; }
#order-standard_cart .view-cart-items .item-title {
    font-family: var(--font-head) !important;
    font-size: 18px !important;
    letter-spacing: 1px !important;
    color: var(--mc-ink) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-bottom: 6px !important;
}
#order-standard_cart .view-cart-items .item .cost,
#order-standard_cart .view-cart-items .item .amt {
    font-family: var(--font-head) !important;
    font-size: 20px !important;
    color: var(--mc-ink) !important;
    letter-spacing: 0.5px !important;
}
#order-standard_cart .view-cart-items .item .cycle {
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--mc-ink-2) !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
}
#order-standard_cart .view-cart-items .item ul,
#order-standard_cart .view-cart-items .item .item-options {
    list-style: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}
#order-standard_cart .view-cart-items .item ul li {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--mc-ink-2) !important;
    margin: 0 !important;
    padding: 2px 0 !important;
}

/* Small action buttons inside cart items: edit / remove */
#order-standard_cart .btn-link.btn-xs,
#order-standard_cart .btn-link.btn-xs.btn-remove-from-cart,
#order-standard_cart .btn-remove-from-cart {
    background: transparent !important;
    color: var(--mc-launch) !important;
    border: 1px solid transparent !important;
    padding: 4px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin: 0 6px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
#order-standard_cart .btn-link.btn-xs:hover,
#order-standard_cart .btn-remove-from-cart:hover {
    background: var(--mc-launch) !important;
    color: #fff !important;
    border-color: var(--mc-launch) !important;
}
#order-standard_cart .btn-link.btn-xs i { margin-right: 4px !important; }

/* Empty cart button under items list */
#order-standard_cart .empty-cart,
#order-standard_cart button.empty-cart,
#order-standard_cart .btn-continue-shopping {
    background: transparent !important;
    border: 1.5px solid var(--mc-ink) !important;
    color: var(--mc-ink) !important;
    padding: 11px 20px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 18px 0 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#order-standard_cart .empty-cart:hover,
#order-standard_cart .btn-continue-shopping:hover {
    background: var(--mc-ink) !important;
    color: #fff !important;
}

/* Promo code area */
#order-standard_cart .promotion-area,
#order-standard_cart .apply-promo-code,
#order-standard_cart [class*="promo"] {
    background: var(--mc-surface) !important;
}
#order-standard_cart input[name="promocode"],
#order-standard_cart input.promocode {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 12px 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    border-radius: 0 !important;
}

/* Order summary block */
#order-standard_cart .order-summary,
#order-standard_cart .bordered-totals,
#order-standard_cart .cart-summary {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-top: 3px solid var(--mc-ink) !important;
    padding: 22px 24px !important;
    margin-top: 24px !important;
    border-radius: 0 !important;
}
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary h3,
#order-standard_cart .order-summary .order-summary-title,
#order-standard_cart .bordered-totals h2,
#order-standard_cart .bordered-totals h3 {
    background: transparent !important;
    color: var(--mc-ink) !important;
    font-family: var(--font-head) !important;
    font-size: 20px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
}
#order-standard_cart .order-summary .row,
#order-standard_cart .bordered-totals .row {
    display: flex !important;
    justify-content: space-between !important;
    margin: 6px 0 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--mc-ink) !important;
}
#order-standard_cart .order-summary .row.total,
#order-standard_cart .order-summary .grand-total,
#order-standard_cart .bordered-totals .total {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
    padding: 12px 14px !important;
    margin: 14px -14px 0 !important;
    font-family: var(--font-head) !important;
    font-size: 18px !important;
    letter-spacing: 1.5px !important;
}

/* Big checkout button — same accent CTA as COMPLETE ORDER */
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-success.btn-checkout,
#order-standard_cart .btn-success.btn-lg {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
    border: 1.5px solid var(--mc-ink) !important;
    box-shadow: 5px 5px 0 var(--mc-ink);
    padding: 16px 28px !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    width: 100% !important;
    margin-top: 16px !important;
    border-radius: 0 !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-success.btn-checkout:hover,
#order-standard_cart .btn-success.btn-lg:hover {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--mc-ink);
}
#order-standard_cart .btn-checkout.disabled,
#order-standard_cart .btn-checkout[disabled] {
    background: var(--mc-border) !important;
    color: var(--mc-ink-2) !important;
    cursor: not-allowed !important;
}

/* Express checkout buttons row */
#order-standard_cart .express-checkout-buttons {
    margin-top: 14px !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Tame all generic .btn-default/primary inside cart so they don't blow up */
#order-standard_cart .btn-default,
#order-standard_cart .btn-primary {
    padding: 10px 16px !important;
    font-size: 12px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

/* Generic alerts inside the cart */
#order-standard_cart .alert {
    border-radius: 0 !important;
    border: 1px solid var(--mc-border) !important;
    border-left-width: 4px !important;
    padding: 14px 18px !important;
    background: var(--mc-surface) !important;
}
#order-standard_cart .alert-warning { border-left-color: var(--mc-amber) !important; background: rgba(245,158,11,0.05) !important; }
#order-standard_cart .alert-danger { border-left-color: var(--mc-launch) !important; background: rgba(234,88,12,0.05) !important; }
#order-standard_cart .alert-info { border-left-color: var(--mc-accent) !important; background: rgba(250,204,21,0.05) !important; }
#order-standard_cart .alert-success { border-left-color: var(--mc-green) !important; background: rgba(31,164,99,0.05) !important; }

/* State / Country / address selects inside cart */
#order-standard_cart .form-control,
#order-standard_cart select,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"] {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    color: var(--mc-ink) !important;
    padding: 11px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Headers within sidebar accordions hide the bootstrap blue panel-heading */
#order-standard_cart .panel-heading.bg-info,
#order-standard_cart .panel-heading.panel-primary,
#order-standard_cart .panel-default > .panel-heading {
    background: var(--mc-ink) !important;
    color: #fff !important;
}

/* Standard cart products listing page (product list under a category) */
#order-standard_cart .group-products,
#order-standard_cart .products-list,
#order-standard_cart .product-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px !important;
    margin-top: 12px !important;
}
#order-standard_cart .product,
#order-standard_cart .product-col,
#order-standard_cart .product-item {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    padding: 22px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
#order-standard_cart .product:hover,
#order-standard_cart .product-col:hover { border-color: var(--mc-ink) !important; }
#order-standard_cart .product h3, #order-standard_cart .product h4,
#order-standard_cart .product .product-name {
    font-family: var(--font-head) !important;
    font-size: 20px !important;
    letter-spacing: 1.2px !important;
    color: var(--mc-ink) !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
}
#order-standard_cart .product .price, #order-standard_cart .product .product-pricing {
    font-family: var(--font-head) !important;
    font-size: 26px !important;
    color: var(--mc-ink) !important;
    letter-spacing: 0.5px !important;
}

/* =====================================================================
   ORDER COMPLETE — Mission Go confirmation page
   ===================================================================== */
.mc-complete {
    padding: 64px 0 96px;
}
.mc-complete__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--mc-pad-x);
    text-align: center;
}
.mc-complete__stamp {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
}
.mc-complete__stamp__ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--mc-green);
    border-radius: 50%;
    animation: mc-stamp-pulse 2.4s ease-out infinite;
}
@keyframes mc-stamp-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
.mc-complete__stamp__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-green);
    color: #fff;
    font-size: 40px;
    border-radius: 50%;
}
.mc-complete__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--mc-ink-2);
    margin-bottom: 12px;
}
.mc-complete__title {
    font-family: var(--font-head) !important;
    font-size: clamp(44px, 7vw, 72px) !important;
    margin: 0 0 10px;
    letter-spacing: 1px;
}
.mc-complete__title__hl {
    background: var(--mc-green);
    color: #fff;
    padding: 0 14px;
}
.mc-complete__sub {
    font-size: 16px;
    color: var(--mc-ink-2);
    max-width: 560px;
    margin: 0 auto 28px;
}
.mc-complete__ordernum {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: 1.5px solid var(--mc-ink);
    background: var(--mc-surface);
    padding: 14px 26px;
    margin-bottom: 28px;
}
.mc-complete__ordernum__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
}
.mc-complete__ordernum__value {
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
}
.mc-complete__paywarn {
    background: #FEF3C7;
    border: 1.5px solid var(--mc-amber);
    padding: 16px 22px;
    margin-bottom: 28px;
    font-size: 14px;
}
.mc-complete__paywarn a {
    display: inline-block;
    margin-left: 8px;
    font-weight: 600;
    text-decoration: underline;
}
.mc-complete__next__head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--mc-ink-2);
    margin: 12px 0 18px;
    text-align: left;
}
.mc-complete__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 36px;
}
.mc-complete__step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    padding: 20px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.mc-complete__step:hover {
    transform: translateY(-2px);
    border-color: var(--mc-ink);
}
.mc-complete__step__num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--mc-amber);
    letter-spacing: 2px;
}
.mc-complete__step strong {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
}
.mc-complete__step span:last-child {
    font-size: 13px;
    color: var(--mc-ink-2);
    line-height: 1.5;
}
@media (max-width: 760px) {
    .mc-complete__steps { grid-template-columns: 1fr; }
}

/* WHMCS utility: outranks component display rules via specificity,
   but NOT inline styles — jQuery .show()/.hide() must keep working. */
html body .w-hidden { display: none; }

/* =====================================================================
   STANDARD CART · checkout & shared order-form skin
   (markup is stock standard_cart — keep all ids/classes JS depends on)
   ===================================================================== */
#order-standard_cart {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px var(--mc-pad-x) 96px;
}
#order-standard_cart .header-lined h1 {
    font-family: var(--font-head) !important;
    font-size: clamp(34px, 5vw, 52px) !important;
    letter-spacing: 1px;
    border: 0;
    margin: 0 0 6px;
}
#order-standard_cart .header-lined {
    border-bottom: 2px solid var(--mc-ink);
    margin-bottom: 28px;
    padding-bottom: 14px;
}

/* Section headings ("Personal Details", "Payment Details", …) —
   clean display headings, no chips or rule lines */
#order-standard_cart .sub-heading {
    position: relative;
    text-align: left !important;
    margin: 46px 0 22px !important;
    border: 0 !important;          /* standard_cart draws its heading line
                                      via height:0 + border-top */
    height: auto !important;
}
#order-standard_cart .sub-heading span {
    display: inline-block;
    position: static !important;   /* standard_cart floats it -11px up onto
                                      its rule line */
    top: 0 !important;
    font-family: var(--font-head);
    font-size: 22px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 !important;
}
#order-standard_cart .sub-heading span::before {
    content: "// ";
    color: var(--mc-amber);
}

/* Account selector cards */
#order-standard_cart .account-select-container { margin-bottom: 10px; }
#order-standard_cart .account {
    border: 1.5px solid var(--mc-border);
    background: var(--mc-surface);
    padding: 16px 18px;
    margin-bottom: 14px;
    transition: border-color 0.15s ease;
}
#order-standard_cart .account.active {
    border-color: var(--mc-ink);
    box-shadow: 4px 4px 0 var(--mc-accent);
}
#order-standard_cart .account .address {
    display: inline-block;
    margin-left: 6px;
    font-size: 13px;
    line-height: 1.6;
}

/* Total due banner */
#order-standard_cart #totalDueToday {
    background: var(--mc-ink) !important;
    border: 0 !important;
    color: #fff !important;
    font-family: var(--font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 18px 22px;
}
#order-standard_cart #totalDueToday strong {
    color: var(--mc-accent);
    font-family: var(--font-data);
    font-size: 22px;
    margin-left: 8px;
}

/* Payment gateway radios as tiles */
#order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--mc-border);
    background: var(--mc-surface);
    padding: 14px 22px;
    margin: 0 6px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover { border-color: var(--mc-ink); }
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked) {
    border-color: var(--mc-ink);
    box-shadow: 4px 4px 0 var(--mc-accent);
}
#order-standard_cart #paymentGatewaysContainer p.small {
    font-family: var(--font-mono);
    font-size: 11px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Credit card fields */
#order-standard_cart .cc-input-container { max-width: 720px; margin: 0 auto; }

/* Complete order button — the loudest thing on the page */
#order-standard_cart #btnCompleteOrder,
#order-standard_cart .btn-checkout {
    background: var(--mc-accent) !important;
    color: var(--mc-ink) !important;
    border: 1.5px solid var(--mc-ink) !important;
    box-shadow: 6px 6px 0 var(--mc-ink);
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    padding: 20px 56px !important;
    margin-top: 14px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#order-standard_cart #btnCompleteOrder:hover,
#order-standard_cart .btn-checkout:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--mc-ink);
    filter: none;
}
#order-standard_cart #btnCompleteOrder:active,
#order-standard_cart .btn-checkout:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--mc-ink);
}

/* =====================================================================
   GAME LANDING PAGES (/lmp, /minecraft) — mc-gl-*
   ===================================================================== */
.mc-gl-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--mc-ink-2);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.mc-gl-eyebrow--light { color: rgba(255,255,255,0.65); }
.mc-gl-h2 {
    font-family: var(--font-head) !important;
    font-size: clamp(34px, 5vw, 54px) !important;
    letter-spacing: 1px;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.mc-gl-hl { background: var(--mc-accent); padding: 0 12px; }
.mc-gl-lead {
    font-size: 16px;
    color: var(--mc-ink-2);
    max-width: 640px;
    margin: 0 auto;
}

/* ---- hero ---- */
.mc-gl-hero {
    background: var(--mc-ink);
    color: #fff;
    overflow: hidden;
    position: relative;
}
.mc-gl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
}
.mc-gl-hero__inner {
    position: relative;
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 84px var(--mc-pad-x) 96px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
}
.mc-gl-partnerbadge {
    display: inline-block;
    background: var(--mc-accent);
    color: var(--mc-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    padding: 8px 16px;
    margin-bottom: 26px;
    animation: mc-pulse-amber 2.4s ease-in-out infinite;
}
a.mc-gl-partnerbadge:hover { filter: brightness(1.08); color: var(--mc-ink); }
.mc-gl-partnerbadge--plain {
    background: transparent;
    color: var(--mc-accent);
    border: 1.5px solid var(--mc-accent);
    animation: none;
}
.mc-gl-hero__title {
    font-family: var(--font-head) !important;
    font-size: clamp(40px, 5.4vw, 68px) !important;
    line-height: 1.04;
    letter-spacing: 1px;
    margin: 0 0 22px;
    color: #fff !important;
    text-transform: uppercase;
}
.mc-gl-hero__title__hl {
    background: var(--mc-accent);
    color: var(--mc-ink);
    padding: 0 12px;
    display: inline-block;
}
.mc-gl-hero__sub {
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    max-width: 560px;
    margin: 0 0 30px;
}
.mc-gl-hero__sub strong { color: var(--mc-accent); }
.mc-gl-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}
.mc-gl-hero__ctas .mc-btn--ghost {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
.mc-gl-hero__ctas .mc-btn--ghost:hover { background: rgba(255,255,255,0.1); }
.mc-gl-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: rgba(255,255,255,0.6);
}

/* ---- screenshots ---- */
.mc-gl-shot {
    margin: 0;
    border: 1px solid rgba(18,24,38,0.18);
    background: #0d1117;
    box-shadow: 10px 10px 0 rgba(18,24,38,0.10);
}
.mc-gl-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.mc-gl-shot figcaption {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    padding: 10px 14px;
    background: var(--mc-ink);
    color: rgba(255,255,255,0.7);
}
.mc-gl-shot--hero {
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 14px 14px 0 rgba(250,204,21,0.16);
    transform: rotate(0.6deg);
}

/* ---- partner strip ---- */
.mc-gl-partner {
    background: var(--mc-accent);
    border-bottom: 2px solid var(--mc-ink);
}
.mc-gl-partner__inner {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 26px var(--mc-pad-x);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}
.mc-gl-partner__item strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 4px;
}
.mc-gl-partner__item span { font-size: 13.5px; line-height: 1.5; }

/* ---- features ---- */
.mc-gl-features {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 84px var(--mc-pad-x) 30px;
}
.mc-gl-features__head {
    text-align: center;
    margin-bottom: 58px;
}
.mc-gl-feature {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 56px;
    align-items: center;
    padding: 44px 0;
    border-top: 1px dashed var(--mc-border);
}
.mc-gl-feature--flip .mc-gl-feature__copy { order: 2; }
.mc-gl-feature--flip .mc-gl-shot { order: 1; }
.mc-gl-feature__num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--mc-amber);
    margin-bottom: 10px;
}
.mc-gl-feature h3 {
    font-family: var(--font-head) !important;
    font-size: 28px !important;
    letter-spacing: 1px;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.mc-gl-feature p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--mc-ink-2);
    margin: 0 0 16px;
}
.mc-gl-feature ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mc-gl-feature ul li {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.5px;
    padding: 7px 0 7px 22px;
    position: relative;
    border-bottom: 1px dotted var(--mc-border-subtle);
}
.mc-gl-feature ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--mc-amber);
}

/* ---- pricing ---- */
.mc-gl-pricing {
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 70px var(--mc-pad-x) 84px;
}
.mc-gl-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
.mc-gl-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-border);
    padding: 30px 28px;
}
.mc-gl-plan--featured {
    border-color: var(--mc-ink);
    box-shadow: 8px 8px 0 var(--mc-accent);
    transform: translateY(-6px);
}
.mc-gl-plan__flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mc-ink);
    color: var(--mc-accent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2.5px;
    padding: 6px 14px;
    white-space: nowrap;
}
.mc-gl-plan__name {
    font-family: var(--font-head);
    font-size: 26px;
    letter-spacing: 1.5px;
}
.mc-gl-plan__tag {
    font-size: 13px;
    color: var(--mc-ink-2);
    margin: 2px 0 18px;
}
.mc-gl-plan__price {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--mc-ink-2);
    border-bottom: 2px solid var(--mc-ink);
    padding-bottom: 18px;
    margin-bottom: 18px;
}
.mc-gl-plan__price span {
    font-family: var(--font-data);
    font-size: 38px;
    font-weight: 600;
    color: var(--mc-ink);
    margin-right: 4px;
}
.mc-gl-plan__specs {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex: 1;
}
.mc-gl-plan__specs li {
    font-size: 13.5px;
    padding: 8px 0 8px 22px;
    position: relative;
    border-bottom: 1px dotted var(--mc-border-subtle);
}
.mc-gl-plan__specs li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mc-green);
    font-weight: 700;
}
.mc-gl-plan__cta { text-align: center; }
.mc-gl-plans__note {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 1.5px;
    color: var(--mc-ink-2);
    margin-top: 26px;
}

/* ---- FAQ ---- */
.mc-gl-faq {
    max-width: 880px;
    margin: 0 auto;
    padding: 30px var(--mc-pad-x) 90px;
}
.mc-gl-faq__list details {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    margin-bottom: 10px;
}
.mc-gl-faq__list summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
}
.mc-gl-faq__list summary::-webkit-details-marker { display: none; }
.mc-gl-faq__list summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-data);
    font-size: 18px;
    color: var(--mc-amber);
}
.mc-gl-faq__list details[open] summary::after { content: "–"; }
.mc-gl-faq__list details p {
    padding: 0 22px 20px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mc-ink-2);
}

/* ---- final CTA ---- */
.mc-gl-cta {
    background: var(--mc-ink);
    color: #fff;
    text-align: center;
}
.mc-gl-cta__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 84px var(--mc-pad-x);
}
.mc-gl-cta h2 {
    font-family: var(--font-head) !important;
    font-size: clamp(36px, 5vw, 56px) !important;
    letter-spacing: 1px;
    margin: 0 0 12px;
    color: #fff !important;
    text-transform: uppercase;
}
.mc-gl-cta p {
    font-size: 16px;
    color: rgba(255,255,255,0.72);
    margin: 0 0 30px;
}

/* ---- responsive ---- */
@media (max-width: 980px) {
    .mc-gl-hero__inner { grid-template-columns: 1fr; padding: 56px var(--mc-pad-x) 64px; }
    .mc-gl-feature { grid-template-columns: 1fr; gap: 26px; }
    .mc-gl-feature--flip .mc-gl-feature__copy { order: 1; }
    .mc-gl-feature--flip .mc-gl-shot { order: 2; }
    .mc-gl-partner__inner { grid-template-columns: 1fr; gap: 18px; }
    .mc-gl-plans { grid-template-columns: 1fr; }
    .mc-gl-plan--featured { transform: none; }
}

/* LMP nav link — always highlighted */
.mc-nav__links a.mc-nav__link--lmp {
    color: var(--mc-amber);
    font-weight: 700;
}
.mc-nav__links a.mc-nav__link--lmp:hover { color: var(--mc-launch); }

/* =====================================================================
   HOMEPAGE · LMP flagship + Orbit panel strip
   ===================================================================== */
.mc-home-lmp {
    background: var(--mc-ink);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.mc-home-lmp::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
}
.mc-home-lmp__inner {
    position: relative;
    max-width: var(--mc-maxw);
    margin: 0 auto;
    padding: 76px var(--mc-pad-x);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
}
.mc-home-lmp__title {
    font-family: var(--font-head) !important;
    font-size: clamp(34px, 4.6vw, 56px) !important;
    line-height: 1.06;
    letter-spacing: 1px;
    color: #fff !important;
    margin: 0 0 18px;
    text-transform: uppercase;
}
.mc-home-lmp__hl { background: var(--mc-accent); color: var(--mc-ink); padding: 0 12px; }
.mc-home-lmp__sub {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    margin: 0 0 20px;
}
.mc-home-lmp__points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.mc-home-lmp__points li {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 1px;
    padding: 8px 0 8px 24px;
    position: relative;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px dotted rgba(255,255,255,0.15);
}
.mc-home-lmp__points li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--mc-accent);
}
.mc-home-lmp__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.mc-home-lmp__ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.mc-home-lmp__ghost:hover { background: rgba(255,255,255,0.1); }
.mc-home-lmp__visual .mc-gl-shot figcaption { color: rgba(255,255,255,0.7); }

.mc-home-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.mc-home-panel__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease;
}
.mc-home-panel__card:hover { transform: translateY(-3px); }
.mc-home-panel__cta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--mc-ink);
}
.mc-home-panel__card:hover .mc-home-panel__cta { color: var(--mc-launch); }

@media (max-width: 980px) {
    .mc-home-lmp__inner { grid-template-columns: 1fr; gap: 36px; }
    .mc-home-panel { grid-template-columns: 1fr; }
}

/* Invoice tables: never force horizontal overflow on small screens */
.styx-inv__items table,
.styx-inv__trans table {
    width: 100%;
    table-layout: fixed;
}
.styx-inv__items table td,
.styx-inv__trans table td {
    word-break: break-word;
}
@media (max-width: 480px) {
    .styx-inv__trans table { font-size: 11px; }
}

/* Resource-based pricing box (replaces the old 3-tier cards) */
.mc-gl-pricebox {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    border: 1.5px solid var(--mc-ink);
    background: var(--mc-surface);
    box-shadow: 10px 10px 0 var(--mc-accent);
    max-width: 980px;
    margin: 0 auto;
}
.mc-gl-pricebox__main {
    padding: 36px 38px;
    display: flex;
    flex-direction: column;
}
.mc-gl-pricebox__main .mc-gl-plan__specs { flex: 1; }
.mc-gl-pricebox__scale {
    background: var(--mc-ink);
    color: #fff;
    padding: 36px 34px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mc-gl-pricebox__scale__head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--mc-accent);
}
.mc-gl-scaleitem strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 4px;
}
.mc-gl-scaleitem span {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.72);
}
.mc-gl-pricebox__note {
    margin: auto 0 0;
    padding-top: 16px;
    border-top: 1px dotted rgba(255,255,255,0.25);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
}
@media (max-width: 860px) {
    .mc-gl-pricebox { grid-template-columns: 1fr; }
}

/* Highlight chips must not paint over the line above (Anton + tight leading) */
.mc-home-lmp__title { line-height: 1.18 !important; }
.mc-gl-hero__title { line-height: 1.16 !important; }
.mc-home-lmp__hl,
.mc-gl-hero__title__hl { padding-top: 1px; padding-bottom: 1px; }

/* Orbit panel strip: identical image sizes regardless of source aspect */
.mc-home-panel { margin-top: 14px; }
.mc-home-panel__card .mc-gl-shot img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top left;
}

/* Dashboard breathing room */
main .tiles { margin-bottom: 28px !important; }
main .client-home-cards .card { margin-bottom: 26px !important; }

/* Client-area pages: space between stacked cards/panels everywhere */
main .card + .card,
main .panel + .panel { margin-top: 26px !important; }

/* standard_cart's .primary-bg-color paints its own blue text/background —
   our plain heading must win on both */
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading span.primary-bg-color {
    background: transparent !important;
    color: var(--mc-ink) !important;
}

/* Fields with a leading icon: keep the icon clear of the text.
   input.field variants needed: "main .card-body input[type=...]" is (0,2,2)
   and outranks a bare ".prepend-icon .field" (0,2,1). */
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon input.field,
#order-standard_cart .prepend-icon input.form-control,
main .prepend-icon .field,
main .prepend-icon input.field,
main .prepend-icon input.form-control,
main .card-body .prepend-icon .field {
    padding-left: 46px !important;
}
#order-standard_cart .prepend-icon .field-icon,
main .prepend-icon .field-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 42px !important;
    color: var(--mc-muted) !important;
    margin: 0 !important;
}

/* =====================================================================
   STANDARD CART · viewcart theming
   ===================================================================== */
#order-standard_cart .view-cart-items-header {
    background: var(--mc-ink);
    padding: 12px 22px;
    margin-bottom: 0;
}
#order-standard_cart .view-cart-items-header .row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
}
#order-standard_cart .view-cart-items-header .row > div {
    padding: 0;
    width: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
}
#order-standard_cart .view-cart-items {
    border: 1.5px solid var(--mc-ink);
    border-top: 0;
    background: var(--mc-surface);
}
#order-standard_cart .view-cart-items .item {
    padding: 22px;
    border-bottom: 1px dashed var(--mc-border);
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
#order-standard_cart .view-cart-items .item-title {
    font-family: var(--font-head);
    font-size: 19px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
#order-standard_cart .view-cart-items .item-group {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
    margin-top: 2px;
}
#order-standard_cart .view-cart-items .item-domain {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 12.5px;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-subtle);
    padding: 2px 8px;
    margin-top: 6px;
}
#order-standard_cart .view-cart-items .item small {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--mc-ink-2);
    margin-top: 8px;
}
#order-standard_cart .view-cart-items .item-price span:first-child,
#order-standard_cart .view-cart-items .item .col-sm-4 {
    font-family: var(--font-data);
}
#order-standard_cart .empty-cart { margin: 14px 0 4px; text-align: left; }

/* Promo tabs */
#order-standard_cart .view-cart-tabs { margin-top: 26px; }
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 2px solid var(--mc-ink);
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
    padding: 12px 18px;
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    background: var(--mc-ink);
    color: var(--mc-accent);
}
#order-standard_cart .view-cart-tabs .tab-content {
    border: 1.5px solid var(--mc-ink);
    border-top: 0;
    background: var(--mc-surface);
    padding: 22px;
}

/* Applied promo code: quiet dashed chip + centred remove link */
#order-standard_cart .view-cart-promotion-code {
    font-family: var(--font-data);
    font-size: 14px;
    text-align: center;
    padding: 12px 14px;
    background: var(--mc-surface-2);
    border: 1px dashed var(--mc-border);
    margin-bottom: 14px;
}

/* Inside the order summary, bordered-totals is a line group, not a
   nested boxed card */
#order-standard_cart .order-summary .bordered-totals {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--mc-border-subtle) !important;
    border-bottom: 1px solid var(--mc-border-subtle) !important;
    padding: 6px 0 !important;
    margin: 6px 0 !important;
}
#order-standard_cart .order-summary .bordered-totals .clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px;
    padding: 5px 0;
}
#order-standard_cart .order-summary .bordered-totals .pull-left {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
    float: none !important;
}
#order-standard_cart .order-summary .bordered-totals .pull-right {
    font-family: var(--font-data);
    font-size: 13px;
    float: none !important;
    white-space: nowrap;
}

/* Active sidebar item: white on ink with an accent icon, stays put on hover */
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .cart-sidebar .list-group-item.active:hover,
main .list-group-item.active:hover {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border-color: var(--mc-ink) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active i,
main .list-group-item.active i { color: var(--mc-accent) !important; }

/* Order summary panel */
#order-standard_cart .order-summary {
    border: 1.5px solid var(--mc-ink);
    background: var(--mc-surface);
    box-shadow: 8px 8px 0 var(--mc-accent);
    padding: 24px 24px 22px;
}
#order-standard_cart .order-summary h2 {
    font-size: 24px !important;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mc-ink);
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .recurring-totals {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    background: transparent;
}
#order-standard_cart .order-summary .recurring-totals .pull-left { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mc-ink-2); }
#order-standard_cart .order-summary .subtotal .pull-left { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mc-ink-2); }
#order-standard_cart .order-summary .recurring-charges { text-align: right; font-family: var(--font-data); }
#order-standard_cart .order-summary .amount-due,
#order-standard_cart .order-summary .total-due-today {
    background: var(--mc-ink);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    margin: 14px 0 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
#order-standard_cart .order-summary .amount-due .amt,
#order-standard_cart .order-summary .total-due-today .amt {
    font-family: var(--font-data);
    font-size: 20px;
    color: var(--mc-accent);
}

/* total-due band: amount first in DOM — show label left, amount right */
#order-standard_cart .order-summary .total-due-today {
    flex-direction: row-reverse;
    gap: 10px;
    min-width: 0;
}
#order-standard_cart .order-summary .total-due-today .amt { white-space: nowrap; }

/* =====================================================================
   VIEWCART · width + summary layout
   ===================================================================== */
/* The category sidebar is empty on cart review/checkout — collapse it so
   the cart gets the full container width instead of a blank 280px column.
   (:has must not nest, so test for "sidebar with element children".) */
#order-standard_cart > .row:not(:has(.cart-sidebar > *)) {
    grid-template-columns: 1fr;
}
#order-standard_cart > .row:not(:has(.cart-sidebar > *)) > .cart-sidebar {
    display: none;
}

/* On cart review the Categories/Actions sidebar is just noise (the only
   action links back to the page itself) — drop it and go full width */
#order-standard_cart > .row:has(.view-cart-items-header),
#order-standard_cart > .row:has(.view-cart-empty) {
    grid-template-columns: 1fr;
}
#order-standard_cart > .row:has(.view-cart-items-header) > .cart-sidebar,
#order-standard_cart > .row:has(.view-cart-empty) > .cart-sidebar {
    display: none !important;
}

/* Items + order summary as a proper two-column grid (standard_cart floats
   them at ~58%/38% which reads narrow and lets the totals band overflow) */
#order-standard_cart .cart-body > .row:has(> .secondary-cart-body) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 36px;
    align-items: start;
    margin: 0 !important;
}
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    min-width: 0;
}
@media (max-width: 900px) {
    #order-standard_cart .cart-body > .row:has(> .secondary-cart-body) {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CHECKOUT · card payment box
   ===================================================================== */
/* The saved-card CVV row only matters when an existing card is selected —
   with "enter new card" checked it's noise, so hide it (real WHMCS JS
   toggles it too; this covers initial paint and previews) */
#order-standard_cart .cc-input-container:has(#new:checked) #existingCardInfo {
    display: none !important;
}

#order-standard_cart .cc-input-container {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: 0 !important;
    padding: 26px 26px 14px !important;
    margin-top: 18px !important;
}
#order-standard_cart .cc-input-container ul { list-style: none; margin: 0 0 16px; padding: 0; }
#order-standard_cart .cc-input-container .radio-inline {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-ink);
}

/* CVV input-group: keep the field + "?" button inside their column */
#order-standard_cart .cc-input-container .input-group {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
#order-standard_cart .cc-input-container .input-group .field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
#order-standard_cart .cc-input-container .input-group .input-group-append,
#order-standard_cart .cc-input-container .input-group .input-group-btn {
    flex: 0 0 auto !important;
    display: flex !important;
}
#order-standard_cart .cc-input-container .input-group .btn {
    border: 1.5px solid var(--mc-border) !important;
    border-left: 0 !important;
    background: var(--mc-surface-2) !important;
    color: var(--mc-ink-2) !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
}

/* The "name this card" row has no label child — the generic
   form-group.row 200px/1fr label grid mangles it into a tiny box */
main .form-group.row:not(:has(> label)):not(:has(> .col-form-label)) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}
#order-standard_cart #inputDescriptionContainer {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* =====================================================================
   CHECKOUT · breathing room + field alignment rework
   ===================================================================== */
/* Checkout is a focused flow — drop the category sidebar and give the
   form the full container */
#order-standard_cart > .row:has(#frmCheckout) { grid-template-columns: 1fr; }
#order-standard_cart > .row:has(#frmCheckout) > .cart-sidebar { display: none; }

/* The whole form as one generous card */
#order-standard_cart #frmCheckout {
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-ink);
    padding: 36px clamp(22px, 4vw, 52px) 48px;
}
#order-standard_cart #frmCheckout > .sub-heading:first-of-type { margin-top: 0; }
#order-standard_cart .already-registered { margin-bottom: 20px; }
#order-standard_cart .already-registered p {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
    padding-top: 10px;
}

/* Comfortable inputs across the form */
#order-standard_cart .field.form-control,
#order-standard_cart select.field.form-control {
    min-height: 48px;
    font-size: 15px !important;
}
#order-standard_cart #frmCheckout .form-group { margin-bottom: 16px !important; }

/* intl-tel-input: the flag + dial-code widget sits where our 46px icon
   padding puts the text, so the number overlaps the flag. Give it its own
   room and drop the phone icon. Applies anywhere the widget appears (cart,
   register, account details) — every phone field uses the same .prepend-icon
   markup. (.intl-tel-input = the v12 bundled with this WHMCS; .iti = newer) */
.prepend-icon .iti,
.prepend-icon .intl-tel-input { width: 100%; display: block; }
.prepend-icon:has(.iti) .field-icon,
.prepend-icon:has(.intl-tel-input) .field-icon { display: none !important; }
.iti input.field,
.iti input.form-control,
.intl-tel-input input.field,
.intl-tel-input input.form-control {
    padding-left: 94px !important;
}

/* Card entry row: top-align so a validation message under one field
   doesn't shove its neighbours' boxes down */
#order-standard_cart #newCardInfo,
#order-standard_cart #newCardInfo.row {
    align-items: flex-start !important;
}
#order-standard_cart .field-error-msg {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--mc-launch);
    margin-top: 6px;
}

/* Name-on-card + save-card toggle: flush columns, no bootstrap negative
   margins, toggle and its label on one line */
#order-standard_cart #newCardSaveSettings .row.form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px 24px !important;
    margin: 0 !important;
    align-items: center !important;
}
#order-standard_cart #inputDescriptionContainer {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
#order-standard_cart #inputDescriptionContainer .prepend-icon {
    width: 100% !important;
    margin: 0 !important;
}
#order-standard_cart #inputNoStoreContainer {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px;
}
#order-standard_cart #inputNoStoreContainer .checkbox-inline {
    margin: 0 !important;
    white-space: normal;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
}
#order-standard_cart .cc-input-container { padding: 26px !important; }

/* ToS agreement line */
#order-standard_cart #frmCheckout .checkbox-inline input[type="checkbox"] { margin-right: 8px; }

/* --- Stripe gateway: the module injects #stripeElements with its own
   labels and a col-md-8/offset-2 wrapper that indents everything oddly.
   Lay it out like our own card row. --- */
#order-standard_cart #stripeElements { margin: 6px 0 18px !important; }
#order-standard_cart #stripeElements .stripe-cards-inputs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: none !important;
}
#order-standard_cart #stripeElements .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
    align-items: flex-start !important;
}
#order-standard_cart #stripeElements .row > [class*="col-"] {
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 150px !important;
    position: relative;
}
#order-standard_cart #stripeElements .row > .col-md-6 { flex: 2.4 1 300px !important; }
#order-standard_cart #stripeElements label {
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink-2) !important;
    margin: 0 0 8px !important;
    white-space: nowrap;
}
#order-standard_cart .StripeElement.form-control {
    min-height: 48px;
    padding: 15px 14px !important;
    background: var(--mc-surface) !important;
}
#order-standard_cart .StripeElement--focus { border-color: var(--mc-ink) !important; }
#order-standard_cart .StripeElement--invalid { border-color: var(--mc-launch) !important; }
@media (max-width: 700px) {
    #order-standard_cart #stripeElements .row > [class*="col-"] { flex: 1 1 100% !important; }
}

/* --- bootstrap-switch toggles (save-card on the cart, "Join our mailing list"
   opt-in on register + account details): the plugin initializes but its
   stylesheet never loads, so Yes/No stack in an unreadable white box. Restyle
   the initialized markup, wherever it appears, as a segmented Yes|No control
   (active side lit). --- */
.bootstrap-switch {
    display: inline-flex !important;
    vertical-align: middle;
    border: 1.5px solid var(--mc-border) !important;
    border-radius: 0 !important;
    background: var(--mc-surface) !important;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    overflow: hidden !important;
}
.bootstrap-switch .bootstrap-switch-container {
    display: inline-flex !important;
    align-items: stretch !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
}
.bootstrap-switch .bootstrap-switch-label { display: none !important; }
.bootstrap-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 7px 14px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    background: var(--mc-surface-2) !important;
    color: var(--mc-muted) !important;
    text-shadow: none !important;
    transition: background 0.12s ease, color 0.12s ease;
}
.bootstrap-switch-on .bootstrap-switch-handle-on {
    background: var(--mc-green) !important;
    color: #fff !important;
}
.bootstrap-switch-off .bootstrap-switch-handle-off {
    background: var(--mc-ink) !important;
    color: #fff !important;
}

/* Security notice: padlock inside the box, quiet mono footnote */
#order-standard_cart .checkout-security-msg,
#order-standard_cart .alert.checkout-security-msg {
    display: block !important;
    background: transparent !important;
    border: 1px dashed var(--mc-border) !important;
    color: var(--mc-ink-2) !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    margin: 28px 0 0 !important;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center !important;
    line-height: 1.8;
}
#order-standard_cart .checkout-security-msg i,
#order-standard_cart .checkout-security-msg .fa-lock {
    position: static !important;
    float: none !important;
    display: inline !important;
    font-size: 14px !important;
    color: var(--mc-amber) !important;
    margin-right: 10px;
}
#order-standard_cart .checkout-security-msg .clearfix { display: none; }

/* =====================================================================
   INVOICE PAYMENT · index.php?rp=/invoice/N/pay (invoice-payment.tpl)
   ===================================================================== */

/* Form + summary as a real two-column grid (Bootstrap cols read cramped) */
main #frmPayment .cc-payment-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 36px;
    align-items: start;
    margin: 0 !important;
}
main #frmPayment .cc-payment-form > .col-md-7,
main #frmPayment .cc-payment-form > .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    min-width: 0;
}
@media (max-width: 1000px) {
    main #frmPayment .cc-payment-form { grid-template-columns: 1fr; }
}

/* Payment form card */
main #frmPayment .cc-payment-form .card {
    border: 1.5px solid var(--mc-ink) !important;
    border-radius: 0 !important;
}
main #frmPayment .cc-payment-form .card-body { padding: 32px 36px !important; }
main #frmPayment .card-title {
    margin: 0 0 26px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--mc-ink);
}

/* Saved-card chooser (live accounts with stored cards) */
main #frmPayment .three-column-grid {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    margin-bottom: 12px;
}
main #frmPayment .paymethod-info label {
    margin: 0 !important;
    cursor: pointer;
}

/* Comfortable input sizing across the whole payment form */
main #frmPayment .form-control,
main #frmPayment .custom-select {
    min-height: 48px;
    padding: 12px 16px !important;
    font-size: 15px !important;
}
/* Expiry + CVV full width, same as the card number box (twenty-one's
   input-inline-100 otherwise pins them to ~100px) — kill the pin on every
   page that uses it (invoice pay, card manage, masspay, …) */
main input.input-inline,
main input.input-inline-100,
#order-standard_cart input.input-inline,
#order-standard_cart input.input-inline-100 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
main #frmPayment .form-group.row > .col-sm-7:has(> #inputCardCvv) > #inputCardCvv { flex: 1 1 100%; }
main #frmPayment .form-group.row > .col-sm-7:has(> #inputCardCvv) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}
main #frmPayment .form-group.row > .col-sm-7 > br { display: none; }
main #frmPayment #cvvWhereLink {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px dashed currentColor !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--mc-ink-2) !important;
}
main #frmPayment #cvvWhereLink:hover { color: var(--mc-ink) !important; }

/* Billing address choices as selectable panels */
main #frmPayment #billingAddressChoice { align-items: start !important; }
main #frmPayment #billingAddressChoice > .col-form-label,
main #frmPayment #billingAddressChoice > label { padding-top: 12px; }
main #frmPayment #billingAddressChoice > .col-sm-8 > br { display: none; }
main #frmPayment #billingAddressChoice > .col-sm-8 > label {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin: 0 0 8px !important;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface);
    cursor: pointer;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--mc-ink) !important;
    line-height: 1.5;
}
main #frmPayment #billingAddressChoice > .col-sm-8 > label:has(input:checked) {
    border-color: var(--mc-ink);
    box-shadow: 3px 3px 0 var(--mc-accent);
}
main #frmPayment #billingAddressChoice .name {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}
main #frmPayment #billingAddressChoice input[type=radio] { margin-right: 8px; }

/* Save-card toggle — the offset-sm-4 column otherwise pushes the label
   off the edge of the card */
main #frmPayment .form-group.row > .offset-sm-4 {
    margin-left: 0 !important;
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid var(--mc-border-subtle);
    background: var(--mc-surface-2);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left !important;
}
main #frmPayment .form-group.row > .offset-sm-4 label { margin: 0 !important; }

/* col-sm-6 is missing from the generic col-width fix — without this the
   description + new-billing-address inputs render ~160px wide */
main #frmPayment .form-group.row > .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: none !important;
}
main #frmPayment #inputDescriptionContainer { align-items: start !important; }
main #frmPayment #inputDescriptionContainer > .col-form-label { padding-top: 12px; }
main #frmPayment #inputDescription { max-width: 360px; }

/* Card description = optional nickname for the saved card */
main #frmPayment .cc-desc-hint {
    max-width: 480px;
    display: block;
    margin-top: 7px;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mc-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Submit */
main #frmPayment .submit-container {
    margin: 28px 0 0 !important;
    padding-top: 24px;
    border-top: 1px solid var(--mc-border-subtle);
}
main #frmPayment #btnSubmit {
    width: 100%;
    padding: 16px 20px !important;
    font-size: 13px !important;
    letter-spacing: 3px !important;
}

/* Invoice summary card — match the checkout order summary */
main #invoiceIdSummary {
    border: 1.5px solid var(--mc-ink) !important;
    border-radius: 0 !important;
    background: var(--mc-surface) !important;
    box-shadow: 8px 8px 0 var(--mc-accent);
    position: sticky;
    top: 96px;
}
main #invoiceIdSummary .invoice-summary { padding: 24px 24px 22px !important; }
main #invoiceIdSummary h2 {
    font-family: var(--font-head) !important;
    font-size: 24px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    color: var(--mc-ink) !important;
    text-align: left !important;
    margin: 0 0 16px !important;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mc-ink);
}
main #invoiceIdSummary .invoice-summary-table table {
    width: 100%;
    margin: 0;
}
main #invoiceIdSummary .invoice-summary-table td {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--mc-ink);
    padding: 9px 0 !important;
    border: 0;
    border-top: 1px solid var(--mc-border-subtle);
    background: transparent !important;
    vertical-align: top;
}
main #invoiceIdSummary .invoice-summary-table td:last-child {
    font-family: var(--font-data);
    text-align: right !important;
    white-space: nowrap;
    width: auto !important;
    padding-left: 14px !important;
}
/* Header row */
main #invoiceIdSummary .invoice-summary-table tr:first-child td {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-muted);
    border-top: 0;
    padding: 0 0 10px !important;
    text-align: left !important;
}
main #invoiceIdSummary .invoice-summary-table tr:first-child td:last-child { text-align: right !important; }
/* Subtotal / credit / total rows */
main #invoiceIdSummary .invoice-summary-table td.total-row:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
    text-align: right !important;
}
main #invoiceIdSummary .invoice-summary-table td.total-row:last-child {
    font-weight: 600;
}
/* Payments to date */
main #invoiceIdSummary .invoice-summary > .mb-2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 0 !important;
    padding: 12px 0;
    border-top: 1px solid var(--mc-border-subtle);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mc-ink-2);
    text-align: left !important;
}
main #invoiceIdSummary .invoice-summary > .mb-2 strong { font-family: var(--font-data); font-size: 14px; color: var(--mc-ink); }
/* Balance due — dark band like the cart's total-due-today */
main #invoiceIdSummary .alert-success {
    background: var(--mc-ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 16px !important;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left !important;
}
main #invoiceIdSummary .alert-success strong {
    font-family: var(--font-data);
    font-size: 20px;
    color: var(--mc-accent);
    white-space: nowrap;
}

/* SSL notice — quiet mono footnote instead of a warning banner */
main #frmPayment > .alert-warning {
    margin: 28px 0 0 !important;
    background: transparent !important;
    border: 1px dashed var(--mc-border) !important;
    color: var(--mc-ink-2) !important;
    border-radius: 0 !important;
    padding: 13px 16px !important;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: center;
}

@media (max-width: 600px) {
    main #frmPayment .cc-payment-form .card-body { padding: 22px 18px !important; }
    main #invoiceIdSummary { position: static; }
}