/*
 * Adaptive portal surfaces.
 * This file intentionally sits after the legacy stylesheet and maps existing
 * components onto the shared semantic theme without changing their behavior.
 */

.portal-public,
.portal-auth,
.portal-admin,
.portal-dj-live,
.portal-guest {
    --bg: var(--color-background);
    --bg-2: color-mix(in srgb, var(--color-background) 94%, var(--color-primary));
    --panel: var(--color-surface);
    --panel-2: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary));
    --line: var(--color-border);
    --text: var(--color-foreground);
    --muted: var(--color-muted-foreground);
    --accent: var(--workspace-accent);
    --accent-2: var(--workspace-primary);
    --surface-base: var(--color-background);
    --surface-panel: var(--color-surface);
    --surface-panel-strong: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary));
    --surface-input: var(--color-surface);
    --surface-hover: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    --border-subtle: var(--color-border);
    --border-strong: color-mix(in srgb, var(--color-foreground) 28%, var(--color-background));
    --text-strong: var(--color-foreground);
    --text-muted: var(--color-muted-foreground);
    --focus: var(--color-primary);
    --focus-ring: var(--shadow-focus);
    --shadow-panel: var(--shadow-sm);
}

.portal-admin,
.portal-dj-live,
.portal-guest {
    overflow-x: clip;
}

.portal-admin :where(.container, .admin-product-shell, .admin-main),
.portal-dj-live :where(.container, .dj-live-shell, .dj-main),
.portal-guest :where(.container, .guest-app-shell, .guest-main-grid) {
    min-width: 0;
}

.portal-public .topbar,
.portal-auth .topbar,
.portal-admin .topbar,
.portal-guest .topbar {
    color: var(--color-foreground);
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    border-bottom-color: var(--color-border);
    box-shadow: 0 1px 0 rgb(15 23 42 / 0.02);
    backdrop-filter: blur(16px);
}

.portal-public .app-current-user,
.portal-auth .app-current-user,
.portal-admin .app-current-user,
.portal-guest .app-current-user {
    color: var(--color-muted-foreground);
}

.portal-public .topbar-user-dropdown,
.portal-auth .topbar-user-dropdown,
.portal-admin .topbar-user-dropdown,
.portal-guest .topbar-user-dropdown {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

.portal-public .topbar-user-action,
.portal-auth .topbar-user-action,
.portal-admin .topbar-user-action,
.portal-guest .topbar-user-action {
    color: var(--color-foreground);
}

.portal-public input,
.portal-public textarea,
.portal-public select,
.portal-auth input,
.portal-auth textarea,
.portal-auth select,
.portal-admin input,
.portal-admin textarea,
.portal-admin select,
.portal-guest input,
.portal-guest textarea,
.portal-guest select {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.portal-public input::placeholder,
.portal-public textarea::placeholder,
.portal-auth input::placeholder,
.portal-auth textarea::placeholder,
.portal-admin input::placeholder,
.portal-admin textarea::placeholder,
.portal-guest input::placeholder,
.portal-guest textarea::placeholder {
    color: color-mix(in srgb, var(--color-muted-foreground) 76%, var(--color-background));
}

/* Public product and legal surfaces */
.portal-public {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 30rem),
        var(--color-background);
}

.portal-public:has(.landing-page-night) {
    color-scheme: dark;
    background:
        radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 32rem),
        radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 36rem),
        linear-gradient(180deg, color-mix(in srgb, var(--color-sidebar) 88%, black), var(--color-sidebar) 46%, color-mix(in srgb, var(--color-sidebar) 92%, black));
    background-attachment: fixed;
}

.portal-public:has(.landing-page) > .topbar {
    display: none;
}

.portal-public > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

.portal-public .landing-page-refined {
    --landing-bg: var(--color-sidebar);
    --landing-panel: color-mix(in srgb, var(--color-sidebar) 91%, white);
    --landing-panel-strong: color-mix(in srgb, var(--color-sidebar) 84%, white);
    --landing-border: rgb(170 194 218 / 0.18);
    --landing-text: #F8FAFC;
    --landing-muted: #B8C5D8;
    --landing-accent: color-mix(in srgb, var(--color-accent) 68%, white);
    --landing-blue: #60A5FA;
    color: var(--landing-text);
    background: transparent;
}

.portal-public .landing-page-refined .landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    width: min(94rem, 100%);
    margin: 0 auto;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    color: var(--landing-text);
    background: color-mix(in srgb, var(--color-sidebar) 88%, transparent);
    border: 0;
    border-bottom: 1px solid var(--landing-border);
    border-radius: 0;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.16);
    backdrop-filter: blur(18px);
}

.portal-public .landing-nav-brand {
    color: var(--landing-text);
}

.portal-public .landing-nav-brand strong,
.portal-public .landing-eyebrow,
.portal-public .landing-mini-label {
    color: var(--landing-accent);
}

.portal-public .landing-navigation a:hover,
.portal-public .landing-navigation a:focus-visible {
    color: var(--landing-accent);
}

.portal-public .landing-nav-cta,
.portal-public .landing-btn-primary,
.portal-public .landing-footer-cta .landing-btn {
    min-height: 44px;
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
}

.portal-public .landing-btn-secondary {
    color: var(--landing-text);
    background: color-mix(in srgb, var(--landing-panel-strong) 88%, transparent);
    border-color: var(--landing-border);
}

.portal-public .landing-hero {
    --landing-text: #F8FAFC;
    --landing-muted: color-mix(in srgb, #F8FAFC 72%, var(--color-sidebar));
    --landing-accent: color-mix(in srgb, var(--color-accent) 58%, white);
    grid-template-columns: minmax(0, 1.04fr) minmax(20rem, 0.96fr);
    width: min(88rem, calc(100% - 2rem));
    min-height: 35rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 3vw, 3rem);
    color: var(--landing-text);
    background:
        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 28rem),
        color-mix(in srgb, var(--landing-panel) 94%, transparent);
    border-color: var(--landing-border);
}

.portal-public .landing-hero h1 {
    max-width: 18ch;
    color: var(--landing-text);
    font-size: clamp(2.5rem, 4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.portal-public .landing-lead,
.portal-public .landing-section p,
.portal-public .landing-proof-box p {
    color: var(--landing-muted);
}

.portal-public .landing-hero .landing-lead {
    color: var(--landing-muted);
}

.portal-public .landing-hero .landing-eyebrow,
.portal-public .landing-business-band .landing-eyebrow {
    color: var(--landing-accent);
}

.portal-public .landing-section,
.portal-public .landing-contact,
.portal-public .landing-proof-box,
.portal-public .landing-page-refined .landing-section,
.portal-public .landing-page-refined .landing-contact,
.portal-public .landing-page-refined .landing-proof-box {
    color: var(--landing-text);
    background: color-mix(in srgb, var(--landing-panel) 94%, transparent);
    border-color: var(--landing-border);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.portal-public .landing-product-visual {
    --landing-text: #F8FAFC;
    --landing-muted: color-mix(in srgb, #F8FAFC 72%, var(--color-live-background));
    --landing-accent: color-mix(in srgb, var(--color-accent) 58%, white);
    color: var(--landing-text);
    background: color-mix(in srgb, var(--color-live-background) 94%, transparent);
    border-color: var(--landing-border);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.22);
}

.portal-public .landing-page-night .landing-section article,
.portal-public .landing-page-night .landing-section details,
.portal-public .landing-page-night .landing-price-card,
.portal-public .landing-page-night .landing-contact-form {
    color: var(--landing-text);
    background: color-mix(in srgb, var(--landing-panel-strong) 90%, transparent);
    border-color: var(--landing-border);
    box-shadow: none;
}

/* Landing page reference composition: Midnight Aurora */
.portal-public:has(.landing-page-aurora-reference) {
    color-scheme: dark;
    background: #061321;
}

.portal-public .landing-page-aurora-reference {
    --reference-bg: #061321;
    --reference-bg-deep: #04101c;
    --reference-panel: #0d1c2a;
    --reference-panel-raised: #132536;
    --reference-panel-soft: #182d3e;
    --reference-line: rgba(151, 178, 198, 0.2);
    --reference-line-strong: rgba(61, 219, 167, 0.36);
    --reference-text: #f4f7f8;
    --reference-muted: #a8b6c1;
    --reference-green: #35d6a0;
    --reference-green-dark: #087454;
    --reference-blue: #43a8ff;
    --reference-light: #eef3f0;
    --reference-ink: #0b2030;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: clip;
    color: var(--reference-text);
    background:
        linear-gradient(180deg, rgba(4, 16, 28, 0.12), rgba(4, 16, 28, 0.34) 34rem, rgba(4, 16, 28, 0.96) 50rem),
        url("/img/landing-aurora-v1.png") center top / max(100rem, 100vw) auto no-repeat,
        var(--reference-bg);
}

.portal-public .landing-page-aurora-reference :is(h1, h2, h3, strong, b, summary, label) {
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference :is(p, small, span, li, label) {
    color: var(--reference-muted);
}

.portal-public .landing-page-aurora-reference a {
    color: inherit;
}

.portal-public .landing-page-aurora-reference .landing-reference-content {
    display: block;
}

.portal-public .landing-page-aurora-reference .landing-reference-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(88rem, calc(100% - 3rem));
    min-height: 4.5rem;
    margin: 0 auto;
    padding: 0.75rem 0;
    background: rgba(4, 16, 28, 0.78);
    border: 0;
    border-bottom: 1px solid var(--reference-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.portal-public .landing-page-aurora-reference .landing-nav-brand img {
    display: block;
    width: 9.6rem;
    height: auto;
}

.portal-public .landing-page-aurora-reference .landing-navigation,
.portal-public .landing-page-aurora-reference .landing-nav-links,
.portal-public .landing-page-aurora-reference .landing-nav-actions {
    display: flex;
    align-items: center;
}

.portal-public .landing-page-aurora-reference .landing-navigation {
    gap: 1.5rem;
}

.portal-public .landing-page-aurora-reference .landing-nav-links {
    gap: 1.25rem;
}

.portal-public .landing-page-aurora-reference .landing-nav-actions {
    gap: 0.9rem;
}

.portal-public .landing-page-aurora-reference .landing-navigation a {
    color: #c9d4dc;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

.portal-public .landing-page-aurora-reference .landing-navigation a:hover,
.portal-public .landing-page-aurora-reference .landing-navigation a:focus-visible {
    color: var(--reference-text);
}

.portal-public .landing-page-aurora-reference .landing-nav-cta,
.portal-public .landing-page-aurora-reference .landing-btn-primary {
    min-height: 44px;
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border: 1px solid transparent;
}

.portal-public .landing-page-aurora-reference .landing-navigation a.landing-nav-cta {
    color: var(--action-primary-text);
}

.portal-public .landing-page-aurora-reference .landing-nav-cta {
    padding: 0.72rem 1rem;
    border-radius: 0.55rem;
}

.portal-public .landing-page-aurora-reference .landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0.68rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.portal-public .landing-page-aurora-reference .landing-btn:hover {
    transform: translateY(-1px);
}

.portal-public .landing-page-aurora-reference .landing-btn-secondary {
    color: var(--reference-text);
    background: rgba(12, 28, 42, 0.72);
    border: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(34rem, 1.16fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    width: min(88rem, calc(100% - 3rem));
    min-height: 33rem;
    margin: 0 auto;
    padding: 3.8rem 0 3.3rem;
    isolation: isolate;
}

.portal-public .landing-page-aurora-reference .landing-reference-hero::before {
    position: absolute;
    z-index: -1;
    top: -1rem;
    right: -5rem;
    width: 52rem;
    height: 34rem;
    content: "";
    background:
        radial-gradient(ellipse at 42% 45%, rgba(47, 214, 160, 0.34), transparent 42%),
        radial-gradient(ellipse at 70% 38%, rgba(49, 142, 230, 0.2), transparent 48%),
        radial-gradient(ellipse at 52% 70%, rgba(11, 89, 95, 0.34), transparent 56%);
    filter: blur(36px);
}

.portal-public .landing-page-aurora-reference .landing-reference-hero-copy {
    position: relative;
    z-index: 2;
}

.portal-public .landing-page-aurora-reference .landing-reference-hero h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--reference-text);
    font-size: clamp(2.8rem, 4vw, 4.25rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.portal-public .landing-page-aurora-reference .landing-reference-hero-copy > p:not(.landing-reference-note) {
    max-width: 31rem;
    margin: 1.5rem 0 0;
    color: var(--reference-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.portal-public .landing-page-aurora-reference .landing-reference-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-note {
    margin: 0.65rem 0 0;
    font-size: 0.72rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-trust-label {
    margin: 1.7rem 0 0;
    color: #d7e2e8;
    font-size: 0.68rem;
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference a.landing-btn-primary,
.portal-public .landing-page-aurora-reference button.landing-btn-primary {
    min-height: 44px;
}

.portal-public .landing-page-aurora-reference .landing-reference-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 29rem;
    margin-top: 0.6rem;
    border-top: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-trust > div {
    display: grid;
    gap: 0.15rem;
    padding: 0.9rem 0.8rem 0 0;
}

.portal-public .landing-page-aurora-reference .landing-reference-trust strong {
    color: var(--reference-green);
    font-size: 1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-trust span {
    font-size: 0.69rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-app {
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-width: 0;
    background: rgba(6, 18, 30, 0.94);
    border: 1px solid rgba(103, 175, 198, 0.46);
    border-radius: 0.75rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.42), 0 0 4rem rgba(26, 192, 145, 0.1);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-top img {
    width: 7.2rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-app-top span {
    font-size: 0.62rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-app-body {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 10rem;
    min-height: 18rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-app-nav {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 1rem 0.7rem;
    border-right: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-nav :is(strong, span) {
    padding: 0.5rem 0.55rem;
    font-size: 0.62rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-app-nav strong {
    color: var(--reference-text);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-nav .active {
    color: var(--reference-green);
    background: rgba(53, 214, 160, 0.12);
    border-radius: 0.4rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue {
    min-width: 0;
    padding: 0.9rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-screen-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-screen-title > div {
    display: grid;
}

.portal-public .landing-page-aurora-reference .landing-reference-screen-title span {
    color: var(--reference-text);
    font-size: 0.74rem;
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference .landing-reference-screen-title small,
.portal-public .landing-page-aurora-reference .landing-reference-screen-title b {
    font-size: 0.58rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-screen-title b {
    padding: 0.3rem 0.5rem;
    color: var(--reference-green);
    background: rgba(53, 214, 160, 0.1);
    border: 1px solid rgba(53, 214, 160, 0.3);
    border-radius: 99rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue ol {
    display: grid;
    gap: 0.42rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue li {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem;
    background: rgba(22, 42, 59, 0.78);
    border: 1px solid rgba(145, 173, 194, 0.16);
    border-radius: 0.45rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue li > b {
    color: var(--reference-green);
    font-size: 0.75rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue li > span {
    display: grid;
    min-width: 0;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue li strong {
    overflow: hidden;
    color: var(--reference-text);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue li small,
.portal-public .landing-page-aurora-reference .landing-reference-queue li em {
    font-size: 0.55rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-queue li em {
    color: var(--reference-muted);
    font-style: normal;
}

.portal-public .landing-page-aurora-reference .landing-reference-live-panel {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 0.9rem 0.75rem;
    border-left: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-card,
.portal-public .landing-page-aurora-reference .landing-reference-event-card {
    display: grid;
    gap: 0.32rem;
    padding: 0.7rem;
    background: rgba(20, 40, 56, 0.76);
    border: 1px solid var(--reference-line);
    border-radius: 0.5rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-card :is(strong, span, small),
.portal-public .landing-page-aurora-reference .landing-reference-event-card :is(strong, span, b, small) {
    font-size: 0.55rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-card strong,
.portal-public .landing-page-aurora-reference .landing-reference-event-card b,
.portal-public .landing-page-aurora-reference .landing-reference-event-card strong {
    color: var(--reference-text);
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-link {
    display: block;
    width: fit-content;
    margin: 0.25rem auto;
    line-height: 0;
    border-radius: 0.35rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-link:focus-visible {
    outline: 2px solid var(--reference-green);
    outline-offset: 3px;
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-image {
    display: block;
    width: 4.3rem;
    height: 4.3rem;
    padding: 0.2rem;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 0.25rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-qr-image.small {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
}

.portal-public .landing-page-aurora-reference .landing-reference-event-card > div {
    display: flex;
    justify-content: space-between;
}

.portal-public .landing-page-aurora-reference .landing-reference-event-card span {
    color: var(--reference-green);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem;
    border-right: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-app-stats div:last-child {
    border-right: 0;
}

.portal-public .landing-page-aurora-reference .landing-reference-app-stats :is(span, strong) {
    font-size: 0.58rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-app-stats strong {
    color: var(--reference-text);
}

.portal-public .landing-page-aurora-reference .landing-reference-process {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
    align-items: center;
    width: min(88rem, calc(100% - 3rem));
    margin: 0 auto;
    padding: 2.25rem 0;
    border-top: 1px solid var(--reference-line);
    border-bottom: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-process h2 {
    text-align: center;
    margin: 0;
    color: var(--reference-text);
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.portal-public .landing-page-aurora-reference .landing-reference-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(68rem, 100%);
    margin: 0 auto;
}

.portal-public .landing-page-aurora-reference .landing-reference-process-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    min-height: 4.2rem;
    padding: 0.4rem 0.8rem;
    border-left: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-process-grid article:first-child {
    border-left: 0;
}

.portal-public .landing-page-aurora-reference .landing-reference-process-grid article > div {
    display: grid;
    gap: 0.12rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-process-grid strong {
    color: var(--reference-text);
    font-size: 0.78rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-process-grid small {
    font-size: 0.7rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-icon,
.portal-public .landing-page-aurora-reference .landing-reference-feature-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    color: var(--reference-green);
    background: rgba(53, 214, 160, 0.1);
    border: 1px solid rgba(53, 214, 160, 0.26);
    border-radius: 0.55rem;
}

.portal-public .landing-page-aurora-reference :is(.landing-reference-icon, .landing-reference-feature-icon) svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.portal-public .landing-page-aurora-reference .landing-reference-bento,
.portal-public .landing-page-aurora-reference .landing-reference-showcase,
.portal-public .landing-page-aurora-reference .landing-reference-features,
.portal-public .landing-page-aurora-reference .landing-reference-faq,
.portal-public .landing-page-aurora-reference .landing-reference-contact,
.portal-public .landing-page-aurora-reference .landing-reference-cta {
    width: min(88rem, calc(100% - 3rem));
    margin-right: auto;
    margin-left: auto;
}

.portal-public .landing-page-aurora-reference .landing-reference-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 2.8rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-bento > article,
.portal-public .landing-page-aurora-reference .landing-reference-features,
.portal-public .landing-page-aurora-reference .landing-reference-faq,
.portal-public .landing-page-aurora-reference .landing-reference-contact {
    background: linear-gradient(145deg, rgba(19, 37, 54, 0.96), rgba(9, 24, 38, 0.97));
    border: 1px solid rgba(151, 178, 198, 0.24);
    border-radius: 0.75rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-how-card {
    grid-column: span 2;
    min-height: 0;
    padding: 2rem;
    background:
        radial-gradient(circle at 96% 0%, rgba(54, 214, 160, 0.1), transparent 18rem),
        linear-gradient(145deg, rgba(19, 37, 54, 0.98), rgba(9, 24, 38, 0.98));
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card {
    grid-column: span 2;
    padding: 1.6rem;
    background:
        radial-gradient(circle at 90% 10%, rgba(53, 214, 160, 0.14), transparent 14rem),
        var(--reference-panel-raised);
}

.portal-public .landing-page-aurora-reference .landing-reference-mini-card {
    grid-column: span 2;
    min-height: 10rem;
    padding: 1.4rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-section-head h2,
.portal-public .landing-page-aurora-reference .landing-reference-showcase h2,
.portal-public .landing-page-aurora-reference .landing-reference-faq > h2,
.portal-public .landing-page-aurora-reference .landing-reference-contact h2 {
    margin: 0;
    color: var(--reference-text);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.portal-public .landing-page-aurora-reference .landing-reference-section-head p,
.portal-public .landing-page-aurora-reference .landing-reference-showcase-copy > p {
    margin: 0.65rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.portal-public .landing-page-aurora-reference .landing-reference-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.3rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-timeline::before {
    position: absolute;
    top: 1rem;
    right: 8%;
    bottom: auto;
    left: 8%;
    width: auto;
    height: 1px;
    content: "";
    background: var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-timeline > div {
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    align-items: start;
}

.portal-public .landing-page-aurora-reference .landing-reference-timeline > div > span {
    grid-row: auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: #062116;
    background: var(--reference-green);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference .landing-reference-timeline strong {
    color: var(--reference-text);
    font-size: 0.76rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-timeline small {
    font-size: 0.67rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card h3,
.portal-public .landing-page-aurora-reference .landing-reference-mini-card h3 {
    margin: 0;
    color: var(--reference-text);
    font-size: 1.2rem;
    line-height: 1.2;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card ul {
    display: grid;
    gap: 0;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.7rem;
    padding: 0.62rem 0.75rem;
    color: #dce6ec;
    background: rgba(4, 16, 28, 0.72);
    border: 1px solid rgba(151, 178, 198, 0.2);
    border-radius: 0.5rem;
    font-size: 0.78rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card li + li {
    margin-top: 0.45rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card li > span {
    position: relative;
    width: 2.2rem;
    height: 1.15rem;
    background: #304353;
    border-radius: 99rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card li > span::after {
    position: absolute;
    top: 0.17rem;
    left: 0.17rem;
    width: 0.81rem;
    height: 0.81rem;
    content: "";
    background: #a7b3bd;
    border-radius: 50%;
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card li > span.active {
    background: var(--reference-green-dark);
}

.portal-public .landing-page-aurora-reference .landing-reference-rules-card li > span.active::after {
    left: 1.22rem;
    background: var(--reference-green);
}

.portal-public .landing-page-aurora-reference .landing-reference-mini-card p {
    margin: 0.6rem 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
}

.portal-public .landing-page-aurora-reference .landing-reference-bars {
    display: flex;
    align-items: end;
    gap: 0.3rem;
    height: 4rem;
    margin-top: 1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-bars i {
    flex: 1;
    height: 30%;
    background: var(--reference-green);
    border-radius: 0.18rem 0.18rem 0 0;
    opacity: 0.52;
}

.portal-public .landing-page-aurora-reference .landing-reference-bars i:nth-child(2) { height: 55%; }
.portal-public .landing-page-aurora-reference .landing-reference-bars i:nth-child(3) { height: 42%; }
.portal-public .landing-page-aurora-reference .landing-reference-bars i:nth-child(4) { height: 80%; }
.portal-public .landing-page-aurora-reference .landing-reference-bars i:nth-child(5) { height: 68%; }
.portal-public .landing-page-aurora-reference .landing-reference-bars i:nth-child(6) { height: 92%; }
.portal-public .landing-page-aurora-reference .landing-reference-bars i:nth-child(7) { height: 72%; }

.portal-public .landing-page-aurora-reference .landing-reference-donut {
    width: 4.8rem;
    aspect-ratio: 1;
    margin: 1rem auto 0;
    background: conic-gradient(var(--reference-green) 0 68%, rgba(124, 151, 171, 0.2) 68% 100%);
    border: 0.85rem solid var(--reference-panel);
    border-radius: 50%;
    outline: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-showcase {
    display: grid;
    grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
    gap: 2rem;
    align-items: center;
    min-height: 28rem;
    margin-top: 0.9rem;
    padding: 2.25rem;
    background:
        radial-gradient(circle at 78% 40%, rgba(53, 214, 160, 0.17), transparent 20rem),
        linear-gradient(120deg, rgba(17, 39, 54, 0.96), rgba(7, 25, 38, 0.94));
    border: 1px solid var(--reference-line-strong);
    border-radius: 0.75rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-showcase-copy ul {
    display: grid;
    gap: 0.65rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-showcase-copy li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.78rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-showcase-copy li::before {
    position: absolute;
    top: 0.35rem;
    left: 0;
    width: 0.52rem;
    height: 0.52rem;
    content: "";
    border: 2px solid var(--reference-green);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.portal-public .landing-page-aurora-reference .landing-reference-devices {
    position: relative;
    min-height: 21rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-laptop {
    position: absolute;
    top: 1rem;
    right: 4rem;
    left: 0;
}

.portal-public .landing-page-aurora-reference .landing-reference-laptop-screen {
    min-height: 17rem;
    padding: 0.85rem;
    overflow: hidden;
    background: #06111c;
    border: 0.55rem solid #263a4c;
    border-radius: 0.8rem 0.8rem 0.35rem 0.35rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-device-brand {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.7rem;
    color: var(--reference-text);
    border-bottom: 1px solid var(--reference-line);
    font-size: 0.68rem;
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference .landing-reference-device-brand span {
    color: var(--reference-green);
}

.portal-public .landing-page-aurora-reference .landing-reference-device-columns {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) 5.6rem;
    gap: 0.7rem;
    padding-top: 0.8rem;
}

.portal-public .landing-page-aurora-reference :is(.landing-reference-device-nav, .landing-reference-device-list, .landing-reference-device-side) {
    display: grid;
    align-content: start;
    gap: 0.45rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-device-nav :is(b, span),
.portal-public .landing-page-aurora-reference .landing-reference-device-list :is(strong, span),
.portal-public .landing-page-aurora-reference .landing-reference-device-side small {
    padding: 0.45rem;
    font-size: 0.58rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-device-nav b,
.portal-public .landing-page-aurora-reference .landing-reference-device-list strong {
    color: var(--reference-text);
    background: rgba(53, 214, 160, 0.1);
    border-radius: 0.35rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-device-list span {
    background: var(--reference-panel-raised);
    border: 1px solid var(--reference-line);
    border-radius: 0.35rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-qr.small {
    width: 3.5rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-laptop-base {
    width: calc(100% + 2rem);
    height: 0.7rem;
    margin-left: -1rem;
    background: linear-gradient(#647687, #263a4c);
    border-radius: 0 0 1rem 1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-phone {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -0.5rem;
    display: grid;
    gap: 0.48rem;
    width: 9rem;
    padding: 0.8rem;
    color: var(--reference-text);
    background: #06111c;
    border: 0.42rem solid #263a4c;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28);
}

.portal-public .landing-page-aurora-reference .landing-reference-phone img {
    width: 5.5rem;
    margin: 0 auto;
}

.portal-public .landing-page-aurora-reference .landing-reference-phone strong,
.portal-public .landing-page-aurora-reference .landing-reference-phone label,
.portal-public .landing-page-aurora-reference .landing-reference-phone input,
.portal-public .landing-page-aurora-reference .landing-reference-phone button {
    font-size: 0.52rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-phone label {
    display: grid;
    gap: 0.25rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-phone input {
    width: 100%;
    padding: 0.45rem;
    color: var(--reference-muted);
    background: var(--reference-bg-deep);
    border: 1px solid var(--reference-line);
    border-radius: 0.35rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-phone button {
    padding: 0.5rem;
    color: #062116;
    background: var(--reference-green);
    border: 0;
    border-radius: 0.35rem;
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference .landing-reference-features {
    margin-top: 0.9rem;
    padding: 2.2rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid article {
    min-height: 9.6rem;
    padding: 1.2rem;
    background: var(--reference-bg-deep);
    border: 1px solid var(--reference-line);
    border-radius: 0.65rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid article.featured {
    grid-row: span 2;
    min-height: 20rem;
    background:
        radial-gradient(circle at 60% 20%, rgba(53, 214, 160, 0.14), transparent 13rem),
        var(--reference-panel-raised);
    border-color: var(--reference-line-strong);
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid h3 {
    margin: 0.8rem 0 0;
    color: var(--reference-text);
    font-size: 0.95rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid p {
    margin: 0.45rem 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid ol {
    display: grid;
    gap: 0.45rem;
    margin: 1.2rem 0 0;
    padding: 0;
    counter-reset: queue;
    list-style: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid ol li {
    counter-increment: queue;
    padding: 0.55rem;
    color: var(--reference-text);
    background: rgba(5, 17, 28, 0.75);
    border: 1px solid var(--reference-line);
    border-radius: 0.4rem;
    font-size: 0.65rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-feature-grid ol li::before {
    margin-right: 0.5rem;
    color: var(--reference-green);
    content: counter(queue);
}

.portal-public .landing-page-aurora-reference .landing-reference-pricing {
    width: 100%;
    margin-top: 0.9rem;
    padding: 3.2rem max(1.5rem, calc((100% - 88rem) / 2));
    color: var(--reference-ink);
    background: var(--reference-light);
}

.portal-public .landing-page-aurora-reference .landing-reference-pricing .landing-reference-section-head {
    text-align: center;
}

.portal-public .landing-page-aurora-reference .landing-reference-pricing .landing-reference-section-head :is(h2, p) {
    color: var(--reference-ink);
}

.portal-public .landing-page-aurora-reference .landing-reference-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 2rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-pricing-swipe {
    display: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    padding: 1.5rem;
    color: var(--reference-text);
    background: var(--reference-panel);
    border: 1px solid var(--reference-line);
    border-radius: 0.75rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card.featured {
    color: var(--reference-text);
    background:
        linear-gradient(180deg, rgba(53, 214, 160, 0.12), rgba(13, 28, 42, 0.94) 42%),
        var(--reference-panel);
    border-color: var(--reference-line-strong);
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card :is(h3, strong, li) {
    color: var(--reference-text);
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card > p {
    min-height: 2.8rem;
    margin: 0.55rem 0 0;
    color: var(--reference-muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.portal-public .landing-page-aurora-reference .landing-reference-price {
    display: block;
    margin-top: 1rem;
    font-size: 1.9rem;
    letter-spacing: -0.04em;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-badge {
    align-self: flex-start;
    margin-bottom: 0.8rem;
    padding: 0.32rem 0.55rem;
    color: #063121;
    background: #91f0c9;
    border-radius: 99rem;
    font-size: 0.62rem;
    font-weight: 700;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card ul {
    display: grid;
    gap: 0;
    margin: 1.1rem 0 1.4rem;
    padding: 0;
    list-style: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card li {
    position: relative;
    padding: 0.62rem 0 0.62rem 1.15rem;
    color: var(--reference-text);
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--reference-line);
    font-size: 0.69rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card.featured li {
    color: var(--reference-text);
    background: rgba(53, 214, 160, 0.055);
    border-bottom-color: var(--reference-line-strong);
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card li::before {
    position: absolute;
    top: 0.86rem;
    left: 0.15rem;
    width: 0.35rem;
    height: 0.35rem;
    content: "";
    background: var(--reference-green);
    border-radius: 50%;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card.featured li::before {
    background: #91f0c9;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-actions .landing-btn {
    min-height: 36px;
    padding: 0.5rem 0.75rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card:not(.featured) .landing-btn-secondary {
    color: var(--reference-text);
    background: transparent;
    border-color: var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-price-card.featured .landing-btn-primary {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
}

.portal-public .landing-page-aurora-reference .landing-reference-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 9rem;
    margin-top: 0.9rem;
    padding: 2rem 2.3rem;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(7, 25, 38, 0.9), rgba(7, 25, 38, 0.25)),
        url("/img/landing-aurora-v1.png") 70% 64% / cover no-repeat,
        #0b3f42;
    border: 1px solid var(--reference-line-strong);
    border-radius: 0.75rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-cta h2 {
    margin: 0;
    color: var(--reference-text);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    letter-spacing: -0.04em;
}

.portal-public .landing-page-aurora-reference .landing-reference-cta p {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-cta > div:last-child {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
}

.portal-public .landing-page-aurora-reference .landing-reference-cta small {
    font-size: 0.62rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-faq {
    margin-top: 0.9rem;
    padding: 2.1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
    margin-top: 1.2rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-faq details {
    border-top: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-faq summary {
    position: relative;
    padding: 0.9rem 1.8rem 0.9rem 0;
    color: var(--reference-text);
    cursor: pointer;
    font-size: 0.78rem;
    list-style: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-faq summary::-webkit-details-marker {
    display: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-faq summary::after {
    position: absolute;
    top: 0.8rem;
    right: 0.1rem;
    color: var(--reference-green);
    content: "+";
    font-size: 1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-faq details[open] summary::after {
    content: "−";
}

.portal-public .landing-page-aurora-reference .landing-reference-faq details p {
    margin: 0;
    padding: 0 1.5rem 1rem 0;
    font-size: 0.7rem;
    line-height: 1.55;
}

.portal-public .landing-page-aurora-reference .landing-reference-contact {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
    gap: 2rem;
    align-items: center;
    margin-top: 0.9rem;
    padding: 2rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-contact-intro > p:last-child,
.portal-public .landing-page-aurora-reference .landing-reference-contact-action p {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
}

.portal-public .landing-page-aurora-reference .landing-eyebrow {
    margin: 0 0 0.6rem;
    color: var(--reference-green);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.portal-public .landing-page-aurora-reference .landing-reference-contact-meta,
.portal-public .landing-page-aurora-reference .landing-reference-contact-action {
    display: grid;
    gap: 0.45rem;
    align-content: center;
    min-height: 7rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-contact-meta span,
.portal-public .landing-page-aurora-reference .landing-reference-contact-meta small {
    font-size: 0.65rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-contact-meta a,
.portal-public .landing-page-aurora-reference .landing-reference-contact-action strong {
    color: var(--reference-text);
    font-size: 0.82rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-contact-action .landing-btn {
    justify-self: start;
    margin-top: 0.35rem;
}

.portal-public .landing-page-aurora-reference .landing-form-success,
.portal-public .landing-page-aurora-reference .landing-form-error,
.portal-public .landing-page-aurora-reference .landing-reference-contact-form-wrap {
    grid-column: 1 / -1;
}

.portal-public .landing-page-aurora-reference .landing-reference-contact-form-wrap {
    display: grid;
    grid-template-columns: minmax(12rem, 0.58fr) minmax(0, 1.42fr);
    gap: 1.5rem;
    width: min(66rem, 100%);
    margin-right: auto;
    margin-left: auto;
    padding-top: 1.35rem;
    border-top: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-form-heading {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1rem 0;
}

.portal-public .landing-page-aurora-reference .landing-reference-form-heading strong {
    color: var(--reference-text);
    font-size: 1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-form-heading span {
    font-size: 0.7rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1.15rem;
    background: linear-gradient(145deg, rgba(6, 17, 28, 0.98), rgba(14, 32, 47, 0.95));
    border: 1px solid rgba(151, 178, 198, 0.24);
    border-radius: 0.65rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--reference-text);
    font-size: 0.76rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form .landing-form-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: 0.6rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form :is(input, select, textarea) {
    width: 100%;
    color: var(--reference-text);
    background: var(--reference-panel);
    border: 1px solid var(--reference-line);
    border-radius: 0.45rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form :is(input, select) {
    min-height: 2.5rem;
    padding: 0.55rem 0.65rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form textarea {
    padding: 0.65rem;
}

.portal-public .landing-page-aurora-reference .landing-contact-form .landing-form-wide {
    grid-column: 1 / -1;
}

.portal-public .landing-page-aurora-reference .landing-contact-form .landing-consent {
    display: flex;
    align-items: center;
}

.portal-public .landing-page-aurora-reference .landing-contact-form .landing-consent input {
    width: 1rem;
    min-height: 1rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer {
    width: min(88rem, calc(100% - 3rem));
    margin: 1rem auto 0;
    padding: 2.2rem 0 1.5rem;
    border-top: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 0.75fr);
    gap: 2.5rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-brand img {
    width: 9rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-brand p {
    max-width: 19rem;
    margin: 0.8rem 0;
    font-size: 0.76rem;
    line-height: 1.6;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-brand a {
    color: var(--reference-green);
    font-size: 0.76rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-main nav {
    display: grid;
    align-content: start;
    gap: 0.7rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-main nav strong {
    color: var(--reference-text);
    font-size: 0.78rem;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-main nav a {
    color: var(--reference-muted);
    font-size: 0.74rem;
    text-decoration: none;
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--reference-line);
}

.portal-public .landing-page-aurora-reference .landing-reference-footer-bottom span {
    font-size: 0.7rem;
}

@media (max-width: 68rem) {
    .portal-public .landing-page-aurora-reference .landing-reference-hero {
        grid-template-columns: minmax(0, 0.82fr) minmax(28rem, 1.18fr);
        gap: 2rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero h1 {
        font-size: clamp(2.8rem, 5.6vw, 4rem);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-body {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-live-panel {
        display: none;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid article.featured {
        grid-column: span 2;
        grid-row: auto;
        min-height: 9.6rem;
    }
}

@media (max-width: 52rem) {
    .portal-public .landing-page-aurora-reference .landing-reference-nav {
        width: calc(100% - 2rem);
    }

    .portal-public .landing-page-aurora-reference .landing-navigation {
        position: fixed;
        z-index: 70;
        top: 4.8rem;
        right: 1rem;
        left: 1rem;
        display: none;
        align-items: stretch;
        padding: 1rem;
        color: var(--reference-text);
        background: #0b1b29;
        border: 1px solid var(--reference-line);
        border-radius: 0.75rem;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    }

    .portal-public .landing-page-aurora-reference.landing-menu-open .landing-navigation {
        display: grid;
    }

    .portal-public .landing-page-aurora-reference .landing-nav-links,
    .portal-public .landing-page-aurora-reference .landing-nav-actions {
        display: grid;
        align-items: stretch;
        gap: 0.35rem;
    }

    .portal-public .landing-page-aurora-reference .landing-navigation a {
        display: block;
        padding: 0.7rem;
    }

    .portal-public .landing-page-aurora-reference .landing-menu-toggle {
        display: grid;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero {
        grid-template-columns: 1fr;
        width: calc(100% - 2rem);
        padding-top: 3rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero::before {
        top: 19rem;
        right: -14rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero h1 {
        max-width: 12ch;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app {
        width: 100%;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process,
    .portal-public .landing-page-aurora-reference .landing-reference-bento,
    .portal-public .landing-page-aurora-reference .landing-reference-showcase,
    .portal-public .landing-page-aurora-reference .landing-reference-features,
    .portal-public .landing-page-aurora-reference .landing-reference-faq,
    .portal-public .landing-page-aurora-reference .landing-reference-contact,
    .portal-public .landing-page-aurora-reference .landing-reference-cta,
    .portal-public .landing-page-aurora-reference .landing-reference-footer {
        width: calc(100% - 2rem);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process-grid article:nth-child(3) {
        border-left: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-public .landing-page-aurora-reference .landing-reference-how-card {
        grid-row: auto;
        grid-column: 1 / -1;
        min-height: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-mini-card {
        grid-column: span 1;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-showcase {
        grid-template-columns: 1fr;
        padding-bottom: 1.5rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid article.featured {
        grid-column: 1 / -1;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 34rem;
        margin-right: auto;
        margin-left: auto;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-price-card {
        min-height: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-cta,
    .portal-public .landing-page-aurora-reference .landing-reference-contact {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-contact-form-wrap {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-cta {
        align-items: flex-start;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-cta > div:last-child {
        justify-items: start;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-contact-meta,
    .portal-public .landing-page-aurora-reference .landing-reference-contact-action {
        min-height: 0;
        padding-top: 1rem;
        padding-left: 0;
        border-top: 1px solid var(--reference-line);
        border-left: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-footer-main {
        grid-template-columns: 1.4fr repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 36rem) {
    .portal-public .landing-page-aurora-reference .landing-reference-nav,
    .portal-public .landing-page-aurora-reference .landing-reference-hero,
    .portal-public .landing-page-aurora-reference .landing-reference-process,
    .portal-public .landing-page-aurora-reference .landing-reference-bento,
    .portal-public .landing-page-aurora-reference .landing-reference-showcase,
    .portal-public .landing-page-aurora-reference .landing-reference-features,
    .portal-public .landing-page-aurora-reference .landing-reference-faq,
    .portal-public .landing-page-aurora-reference .landing-reference-contact,
    .portal-public .landing-page-aurora-reference .landing-reference-cta,
    .portal-public .landing-page-aurora-reference .landing-reference-footer {
        width: calc(100% - 1.25rem);
    }

    .portal-public .landing-page-aurora-reference .landing-nav-brand img {
        width: 8.2rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero {
        min-height: 0;
        padding: 1.8rem 0 2rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero h1 {
        font-size: clamp(2.35rem, 12.5vw, 3.2rem);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-hero-copy > p:not(.landing-reference-note) {
        margin-top: 1rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-trust {
        gap: 0.3rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-trust > div {
        padding-right: 0.3rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-body {
        grid-template-columns: 3.7rem minmax(0, 1fr);
        min-height: 13.5rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-nav {
        padding: 0.65rem 0.35rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-nav :is(strong, span) {
        padding: 0.45rem 0.25rem;
        font-size: 0.52rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-queue {
        padding: 0.65rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-queue li:nth-child(4) {
        display: none;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-stats {
        display: none;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-stats div:nth-child(2) {
        border-right: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-app-stats div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--reference-line);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process-grid {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-process-grid article {
        min-height: 3.6rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        border-top: 1px solid var(--reference-line);
        border-left: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-bento,
    .portal-public .landing-page-aurora-reference .landing-reference-showcase,
    .portal-public .landing-page-aurora-reference .landing-reference-features {
        margin-top: 2rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-bento {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin-top: 1rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-rules-card,
    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid article.featured {
        grid-column: 1 / -1;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-how-card,
    .portal-public .landing-page-aurora-reference .landing-reference-rules-card,
    .portal-public .landing-page-aurora-reference .landing-reference-mini-card,
    .portal-public .landing-page-aurora-reference .landing-reference-showcase,
    .portal-public .landing-page-aurora-reference .landing-reference-features,
    .portal-public .landing-page-aurora-reference .landing-reference-faq,
    .portal-public .landing-page-aurora-reference .landing-reference-contact,
    .portal-public .landing-page-aurora-reference .landing-reference-cta {
        padding: 1rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-how-card,
    .portal-public .landing-page-aurora-reference .landing-reference-rules-card,
    .portal-public .landing-page-aurora-reference .landing-reference-mini-card {
        grid-column: auto;
        min-height: 0;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-timeline {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 1.4rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-timeline::before {
        display: none;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-devices {
        min-height: 17rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-laptop {
        right: 1.5rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-device-columns {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-device-side {
        display: none;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-phone {
        right: -0.2rem;
        width: 7.5rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-pricing {
        margin-top: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid article,
    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid article.featured {
        min-height: 0;
        padding: 0.8rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid h3 {
        margin-top: 0.55rem;
        font-size: 0.82rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid p {
        font-size: 0.68rem;
        line-height: 1.4;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-feature-grid article.featured ol {
        margin-top: 0.8rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-price-card {
        flex: 0 0 calc(100vw - 3rem);
        max-width: 23rem;
        padding: 1rem;
        scroll-snap-align: center;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-price-actions .landing-btn {
        min-height: 44px;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-pricing-grid {
        display: flex;
        gap: 0.75rem;
        max-width: none;
        margin-right: calc(-1 * max(1.5rem, calc((100% - 88rem) / 2)));
        margin-left: 0;
        padding-right: 1.25rem;
        padding-bottom: 0.55rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-pricing-swipe {
        display: block;
        margin: 1rem 0 -0.8rem;
        color: rgba(13, 32, 48, 0.68);
        font-size: 0.72rem;
        font-weight: 700;
        text-align: center;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-price-card li {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-price-card li::before {
        top: 0.68rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-faq-grid,
    .portal-public .landing-page-aurora-reference .landing-contact-form {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-aurora-reference .landing-contact-form .landing-form-wide {
        grid-column: auto;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-contact-form-wrap {
        gap: 0.75rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-form-heading {
        padding: 0.4rem 0;
    }

    .portal-public .landing-page-aurora-reference .landing-contact-form {
        gap: 0.6rem;
        padding: 0.9rem;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-footer-main {
        grid-template-columns: repeat(2, 1fr);
    }

    .portal-public .landing-page-aurora-reference .landing-reference-footer-brand {
        grid-column: 1 / -1;
    }

    .portal-public .landing-page-aurora-reference .landing-reference-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

.portal-public:has(.landing-demo-page) > .topbar {
    display: none;
}

.portal-public:has(.landing-demo-page) > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.portal-public .landing-demo-page {
    min-height: 100vh;
    padding: 1.5rem;
    color: #f4f7f8;
    background:
        radial-gradient(circle at 75% 5%, rgba(53, 214, 160, 0.18), transparent 24rem),
        #04101c;
}

.portal-public .landing-demo-header,
.portal-public .landing-demo-shell {
    width: min(48rem, 100%);
    margin-right: auto;
    margin-left: auto;
}

.portal-public .landing-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(151, 178, 198, 0.24);
}

.portal-public .landing-demo-header img {
    display: block;
    width: 9.5rem;
}

.portal-public .landing-demo-header span {
    padding: 0.4rem 0.6rem;
    color: #91f0c9;
    background: rgba(53, 214, 160, 0.1);
    border: 1px solid rgba(53, 214, 160, 0.28);
    border-radius: 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.portal-public .landing-demo-shell {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, rgba(19, 37, 54, 0.98), rgba(9, 24, 38, 0.98));
    border: 1px solid rgba(151, 178, 198, 0.24);
    border-radius: 0.75rem;
}

.portal-public .landing-demo-event p,
.portal-public .landing-demo-event h1,
.portal-public .landing-demo-event span,
.portal-public .landing-demo-notice p {
    margin: 0;
}

.portal-public .landing-demo-event p {
    color: #35d6a0;
    font-size: 0.76rem;
    font-weight: 700;
}

.portal-public .landing-demo-event h1 {
    margin-top: 0.35rem;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.portal-public .landing-demo-event span,
.portal-public .landing-demo-notice p {
    display: block;
    margin-top: 0.55rem;
    color: #a8b6c1;
    font-size: 0.86rem;
    line-height: 1.55;
}

.portal-public .landing-demo-search {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.portal-public .landing-demo-search label {
    font-size: 0.82rem;
}

.portal-public .landing-demo-search > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    color: #a8b6c1;
    background: #071522;
    border: 1px solid rgba(151, 178, 198, 0.24);
    border-radius: 0.55rem;
}

.portal-public .landing-demo-search b {
    color: #35d6a0;
    font-size: 0.74rem;
}

.portal-public .landing-demo-queue {
    display: grid;
    gap: 0.55rem;
}

.portal-public .landing-demo-queue article {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    background: rgba(4, 16, 28, 0.68);
    border: 1px solid rgba(151, 178, 198, 0.2);
    border-radius: 0.55rem;
}

.portal-public .landing-demo-queue article > span,
.portal-public .landing-demo-queue article em {
    color: #35d6a0;
    font-style: normal;
}

.portal-public .landing-demo-queue article div {
    display: grid;
}

.portal-public .landing-demo-queue small,
.portal-public .landing-demo-queue em {
    color: #a8b6c1;
    font-size: 0.74rem;
}

.portal-public .landing-demo-notice {
    padding: 1rem;
    background: rgba(53, 214, 160, 0.08);
    border-left: 3px solid #35d6a0;
    border-radius: 0.45rem;
}

.portal-public .landing-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.portal-public .landing-demo-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0.68rem 1rem;
    color: #f4f7f8;
    text-decoration: none;
    background: #0c1c2a;
    border: 1px solid rgba(151, 178, 198, 0.3);
    border-radius: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.portal-public .landing-demo-actions .landing-btn-primary {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
}

@media (max-width: 36rem) {
    .portal-public .landing-demo-page {
        padding: 1rem;
    }

    .portal-public .landing-demo-header img {
        width: 8rem;
    }

    .portal-public .landing-demo-shell {
        margin-top: 1rem;
        padding: 1rem;
    }

    .portal-public .landing-demo-queue article {
        grid-template-columns: 1.6rem minmax(0, 1fr);
    }

    .portal-public .landing-demo-queue article em {
        grid-column: 2;
    }

    .portal-public .landing-demo-actions {
        display: grid;
    }
}

.portal-public .legal-page,
.portal-public .package-detail-card {
    color: var(--color-foreground);
    background: color-mix(in srgb, var(--color-surface) 97%, transparent);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.portal-public .landing-preview-panel,
.portal-public .landing-preview-card,
.portal-public .landing-proof-metrics article {
    --landing-text: #F8FAFC;
    --landing-muted: #B8C5D8;
    --landing-accent: color-mix(in srgb, var(--color-accent) 68%, white);
    color: var(--landing-text);
    background: color-mix(in srgb, var(--landing-panel-strong) 92%, transparent);
    border-color: var(--landing-border);
}

.portal-public :is(
    .landing-metric-card,
    .landing-event-line,
    .landing-phone-frame,
    .landing-input-line,
    .landing-submit-line,
    .landing-tabs b,
    .landing-tip-grid b,
    .landing-request-card,
    .landing-calendar-strip span
) {
    --landing-text: #F8FAFC;
    --landing-muted: #B8C5D8;
    --landing-accent: color-mix(in srgb, var(--color-accent) 58%, white);
    color: var(--landing-text);
}

.portal-public .landing-status {
    color: #86EFAC;
    background: color-mix(in srgb, var(--status-success) 16%, var(--landing-panel-strong));
    border-color: color-mix(in srgb, var(--status-success) 48%, var(--landing-panel-strong));
}

.portal-public .landing-badge {
    color: #A7F3D0;
    background: color-mix(in srgb, var(--color-accent) 14%, var(--landing-panel-strong));
    border-color: color-mix(in srgb, var(--color-accent) 42%, var(--landing-panel-strong));
}

.portal-public .landing-steps article > span {
    color: #93C5FD;
    background: color-mix(in srgb, var(--status-info) 18%, var(--landing-panel-strong));
}

.portal-public .landing-event-line.active,
.portal-public .landing-calendar-strip .has-event {
    color: #F8FAFC;
    background: color-mix(in srgb, var(--color-accent) 18%, var(--color-live-background));
    border-color: color-mix(in srgb, var(--color-accent) 52%, var(--color-live-background));
}

.portal-public .landing-phone-frame .landing-screen-top span {
    color: var(--landing-accent);
}

.portal-public .landing-business-band {
    --landing-text: #F8FAFC;
    --landing-muted: color-mix(in srgb, #F8FAFC 72%, var(--color-sidebar));
    --landing-accent: color-mix(in srgb, var(--color-accent) 58%, white);
    color: var(--landing-text);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 58%),
        var(--color-sidebar);
    border-color: color-mix(in srgb, var(--color-sidebar) 72%, white);
}

.portal-public .landing-business-band p {
    color: var(--landing-muted);
}

.portal-public .landing-footer-cta {
    --landing-text: #F8FAFC;
    --landing-muted: color-mix(in srgb, #F8FAFC 72%, var(--color-sidebar));
    --landing-accent: color-mix(in srgb, var(--color-accent) 58%, white);
}

.portal-public .landing-section,
.portal-public .landing-contact,
.portal-public .landing-business-band,
.portal-public .landing-proof-box {
    width: min(88rem, calc(100% - 2rem));
    margin-inline: auto;
}

.portal-public .landing-price-featured {
    background: color-mix(in srgb, var(--landing-panel-strong) 86%, var(--color-primary));
    border-color: color-mix(in srgb, var(--color-accent) 60%, white);
    box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
}

.portal-public .landing-footer {
    color: var(--landing-text);
    background: color-mix(in srgb, var(--color-sidebar) 94%, black);
    border-top-color: var(--landing-border);
}

.portal-public .landing-footer-cta {
    color: #F8FAFC;
    background: color-mix(in srgb, var(--landing-panel) 88%, black);
    border-color: var(--landing-border);
}

.portal-public .landing-page-night :is(h1, h2, h3, strong, summary, label) {
    color: var(--landing-text);
}

.portal-public .landing-page-night :is(
    .landing-section-note,
    .landing-cta-note,
    .landing-preview-panel small,
    .landing-preview-card small,
    .landing-footer p,
    .landing-footer span,
    .landing-footer a,
    .landing-contact p,
    .landing-price-card li,
    .landing-audience-grid span,
    .landing-upgrade-grid span
) {
    color: var(--landing-muted);
}

.portal-public .landing-page-night .landing-footer-cta .landing-btn {
    color: var(--action-primary-text);
}

.portal-public .landing-page-night .landing-navigation a,
.portal-public .landing-page-night .landing-login-link,
.portal-public .landing-page-night .landing-footer-column strong,
.portal-public .landing-page-night .landing-footer-contact {
    color: var(--landing-text);
}

.portal-public .landing-page-night .landing-proof span,
.portal-public .landing-page-night .landing-business-highlights span {
    color: var(--landing-text);
    background: color-mix(in srgb, var(--landing-panel-strong) 86%, transparent);
    border-color: var(--landing-border);
}

.portal-public .landing-page-night .landing-price-card li {
    color: var(--landing-muted);
    background: color-mix(in srgb, var(--landing-panel-strong) 86%, black);
    border-color: var(--landing-border);
}

.portal-public .landing-page-night .landing-contact-form :is(input, textarea, select) {
    color: var(--landing-text);
    background: color-mix(in srgb, var(--landing-panel-strong) 90%, black);
    border-color: var(--landing-border);
}

.portal-public .landing-page-night .landing-contact-form :is(input, textarea)::placeholder {
    color: var(--landing-muted);
}

.portal-public .landing-page-night .landing-contact-form input[type="checkbox"] {
    accent-color: var(--color-accent);
}

.portal-public .landing-page-night .landing-menu-toggle span {
    background: var(--landing-text);
}

/* Landing page Variant C: Midnight Aurora editorial composition */
.portal-public:has(.landing-page-midnight-aurora) {
    background:
        radial-gradient(circle at 6% 8%, rgb(20 111 92 / 0.18), transparent 29rem),
        radial-gradient(circle at 92% 46%, rgb(22 96 89 / 0.1), transparent 35rem),
        #07111f;
    background-attachment: fixed;
}

.portal-public .landing-page-midnight-aurora {
    --aurora-canvas: #07111f;
    --aurora-surface: #0d1a2a;
    --aurora-surface-raised: #122235;
    --aurora-line: rgb(141 170 196 / 0.2);
    --aurora-line-strong: rgb(74 222 166 / 0.42);
    --aurora-text: #f4f8fb;
    --aurora-muted: #a9b9c9;
    --aurora-green: #38d39f;
    --aurora-green-strong: #16a875;
    --aurora-mist: #eef4f2;
    --aurora-ink: #102033;
    gap: 0;
    overflow: clip;
    padding-bottom: 0;
    color: var(--aurora-text);
}

.portal-public .landing-page-midnight-aurora .landing-nav {
    width: min(90rem, 100%);
    min-height: 4.75rem;
    padding: 0.85rem clamp(1rem, 4vw, 3.75rem);
    background: rgb(7 17 31 / 0.86);
    border-bottom-color: var(--aurora-line);
    box-shadow: none;
}

.portal-public .landing-page-midnight-aurora .landing-nav-brand {
    font-size: 0.94rem;
    letter-spacing: -0.02em;
}

.portal-public .landing-page-midnight-aurora .landing-navigation {
    gap: clamp(0.8rem, 2vw, 1.6rem);
}

.portal-public .landing-page-midnight-aurora .landing-nav-links {
    gap: clamp(0.75rem, 1.5vw, 1.2rem);
}

.portal-public .landing-page-midnight-aurora .landing-navigation a {
    font-size: 0.82rem;
}

.portal-public .landing-page-midnight-aurora .landing-nav-cta,
.portal-public .landing-page-midnight-aurora .landing-btn-primary,
.portal-public .landing-page-midnight-aurora .landing-footer-cta .landing-btn {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
    box-shadow: none;
}

.portal-public .landing-page-midnight-aurora .landing-nav-cta:hover,
.portal-public .landing-page-midnight-aurora .landing-btn-primary:hover {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient-hover);
    border-color: transparent;
}

.portal-public .landing-page-midnight-aurora .landing-btn-secondary {
    color: var(--aurora-text);
    background: transparent;
    border-color: rgb(169 190 210 / 0.34);
}

.portal-public .landing-page-midnight-aurora .landing-hero-editorial {
    position: relative;
    isolation: isolate;
    width: min(88rem, calc(100% - 2rem));
    min-height: 43rem;
    grid-template-columns: minmax(0, 0.84fr) minmax(34rem, 1.16fr);
    gap: clamp(2rem, 5vw, 5rem);
    margin: 0 auto;
    padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 3vw, 2.5rem) clamp(4rem, 8vw, 7rem);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.portal-public .landing-page-midnight-aurora .landing-hero-editorial::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 7%;
    right: -18%;
    width: 58%;
    height: 72%;
    background: radial-gradient(ellipse, rgb(41 207 154 / 0.13), transparent 68%);
    pointer-events: none;
}

.portal-public .landing-page-midnight-aurora .landing-hero-copy {
    align-self: center;
}

.portal-public .landing-page-midnight-aurora .landing-hero h1 {
    max-width: 12ch;
    color: var(--aurora-text);
    font-size: clamp(3.1rem, 5.5vw, 5.35rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.portal-public .landing-page-midnight-aurora .landing-lead {
    max-width: 37rem;
    margin-top: 1.5rem;
    color: var(--aurora-muted);
    font-size: 1.08rem;
    line-height: 1.72;
}

.portal-public .landing-page-midnight-aurora .landing-actions {
    margin-top: 1.7rem;
}

.portal-public .landing-page-midnight-aurora .landing-btn {
    min-height: 2.85rem;
    padding-inline: 1rem;
}

.portal-public .landing-page-midnight-aurora .landing-cta-note {
    margin: 0.7rem 0 0;
    color: #8093a7;
    font-size: 0.78rem;
}

.portal-public .landing-page-midnight-aurora .landing-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.15rem;
    max-width: 36rem;
    margin-top: 2rem;
}

.portal-public .landing-page-midnight-aurora .landing-proof span {
    position: relative;
    min-height: auto;
    padding: 0 0 0 0.9rem;
    color: #c4d0dc;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 700;
}

.portal-public .landing-page-midnight-aurora .landing-proof span::before {
    content: "";
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--aurora-green);
}

.portal-public .landing-page-midnight-aurora .landing-product-window {
    display: block;
    align-self: center;
    padding: 0;
    overflow: hidden;
    background: #091523;
    border: 1px solid rgb(127 158 184 / 0.28);
    border-radius: 1rem;
    box-shadow: 0 6px 8px rgb(0 0 0 / 0.22);
}

.portal-public .landing-page-midnight-aurora .landing-product-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    padding: 0 0.8rem;
    color: #7f93a7;
    background: #0c1928;
    border-bottom: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-product-chrome > span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #34475b;
}

.portal-public .landing-page-midnight-aurora .landing-product-chrome > span:first-child {
    background: var(--aurora-green);
}

.portal-public .landing-page-midnight-aurora .landing-product-chrome small {
    margin-left: auto;
    color: #768b9f;
    font-size: 0.7rem;
}

.portal-public .landing-page-midnight-aurora .landing-product-app {
    display: grid;
    grid-template-columns: 8.6rem minmax(0, 1fr);
    min-height: 27rem;
}

.portal-public .landing-page-midnight-aurora .landing-product-sidebar {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1.1rem 0.75rem;
    background: #07121f;
    border-right: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-product-sidebar .landing-logo {
    width: 100%;
    height: 2.6rem;
    margin-bottom: 1rem;
    object-fit: contain;
}

.portal-public .landing-page-midnight-aurora .landing-product-sidebar > span {
    padding: 0.6rem 0.65rem;
    color: #8da0b3;
    border-radius: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.portal-public .landing-page-midnight-aurora .landing-product-sidebar > span.active {
    color: #8cf0ca;
    background: rgb(56 211 159 / 0.12);
}

.portal-public .landing-page-midnight-aurora .landing-product-workspace {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    padding: 1.25rem;
}

.portal-public .landing-page-midnight-aurora .landing-product-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-product-workspace-head div {
    display: grid;
    gap: 0.2rem;
}

.portal-public .landing-page-midnight-aurora .landing-product-workspace-head small,
.portal-public .landing-page-midnight-aurora .landing-product-workspace-head > span {
    color: #7f94a8;
    font-size: 0.7rem;
}

.portal-public .landing-page-midnight-aurora .landing-product-workspace-head strong {
    font-size: 0.94rem;
}

.portal-public .landing-page-midnight-aurora .landing-preview-panel,
.portal-public .landing-page-midnight-aurora .landing-preview-card {
    background: #102033;
    border-color: rgb(133 163 189 / 0.22);
    border-radius: 0.65rem;
}

.portal-public .landing-page-midnight-aurora .landing-preview-panel {
    padding: 0.95rem;
}

.portal-public .landing-page-midnight-aurora .landing-preview-card {
    min-height: 7rem;
    padding: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-preview-card strong {
    line-height: 1.25;
}

.portal-public .landing-page-midnight-aurora .landing-journey-strip {
    width: min(82rem, calc(100% - 2rem));
    grid-template-columns: minmax(0, 0.78fr) minmax(32rem, 1.22fr);
    gap: clamp(2rem, 5vw, 5rem);
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4.2rem) 0;
    color: var(--aurora-text);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--aurora-line);
    border-bottom: 1px solid var(--aurora-line);
    border-radius: 0;
    backdrop-filter: none;
}

.portal-public .landing-page-midnight-aurora .landing-journey-strip h2 {
    max-width: 18ch;
    font-size: clamp(1.85rem, 3.3vw, 3rem);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.portal-public .landing-page-midnight-aurora .landing-proof-metrics {
    align-self: stretch;
    gap: 0;
}

.portal-public .landing-page-midnight-aurora .landing-proof-metrics article {
    display: grid;
    align-content: center;
    gap: 0.35rem;
    min-height: 8.75rem;
    padding: 1rem 1.2rem;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--aurora-line);
    border-radius: 0;
}

.portal-public .landing-page-midnight-aurora .landing-proof-metrics strong {
    color: var(--aurora-green);
    font-size: 1.8rem;
}

.portal-public .landing-page-midnight-aurora .landing-proof-metrics span {
    color: var(--aurora-muted);
}

.portal-public .landing-page-midnight-aurora .landing-section,
.portal-public .landing-page-midnight-aurora .landing-contact {
    width: min(88rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1rem, 3vw, 2.5rem);
    color: var(--aurora-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.portal-public .landing-page-midnight-aurora .landing-section-head {
    max-width: 58rem;
    gap: 0.65rem;
    margin-bottom: 2.2rem;
}

.portal-public .landing-page-midnight-aurora .landing-section h2,
.portal-public .landing-page-midnight-aurora .landing-contact h2,
.portal-public .landing-page-midnight-aurora .landing-business-band h2 {
    color: var(--aurora-text);
    font-size: clamp(2.2rem, 4.3vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.portal-public .landing-page-midnight-aurora .landing-eyebrow {
    color: var(--aurora-green);
    font-size: 0.71rem;
    letter-spacing: 0.04em;
}

.portal-public .landing-page-midnight-aurora .landing-section-note,
.portal-public .landing-page-midnight-aurora .landing-section p,
.portal-public .landing-page-midnight-aurora .landing-contact p {
    color: var(--aurora-muted);
}

.portal-public .landing-page-midnight-aurora .landing-bento-workflow {
    max-width: 88rem;
}

.portal-public .landing-page-midnight-aurora .landing-steps-four {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(10.5rem, auto);
    gap: 1rem;
}

.portal-public .landing-page-midnight-aurora .landing-steps-four article {
    display: grid;
    align-content: end;
    min-height: 14rem;
    padding: 1.5rem;
    overflow: hidden;
    color: var(--aurora-text);
    background: var(--aurora-surface);
    border: 1px solid var(--aurora-line);
    border-radius: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-steps-four article:first-child {
    grid-column: span 7;
    min-height: 20rem;
    background:
        radial-gradient(circle at 82% 18%, rgb(56 211 159 / 0.16), transparent 15rem),
        var(--aurora-surface-raised);
}

.portal-public .landing-page-midnight-aurora .landing-steps-four article:nth-child(2) {
    grid-column: span 5;
    min-height: 20rem;
}

.portal-public .landing-page-midnight-aurora .landing-steps-four article:nth-child(3),
.portal-public .landing-page-midnight-aurora .landing-steps-four article:nth-child(4) {
    grid-column: span 6;
}

.portal-public .landing-page-midnight-aurora .landing-steps article > span {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: auto;
    color: #052217;
    background: var(--aurora-green);
    font-size: 0.78rem;
}

.portal-public .landing-page-midnight-aurora .landing-steps h3 {
    margin-top: 2.5rem;
    font-size: 1.35rem;
}

.portal-public .landing-page-midnight-aurora .landing-steps p {
    max-width: 35rem;
    margin-bottom: 0;
}

.portal-public .landing-page-midnight-aurora .landing-showcase-editorial {
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100vw - 83rem) / 2));
    background: #0a1625;
    border-top: 1px solid var(--aurora-line);
    border-bottom: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-showcase-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(13rem, auto));
    gap: 1rem;
}

.portal-public .landing-page-midnight-aurora .landing-showcase-card {
    min-height: 0;
    padding: 1.35rem;
    color: var(--aurora-text);
    background: #101f30;
    border-color: var(--aurora-line);
    border-radius: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-showcase-admin {
    grid-column: 1 / span 8;
    grid-row: 1;
}

.portal-public .landing-page-midnight-aurora .landing-showcase-phone {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 50% 44%, rgb(56 211 159 / 0.12), transparent 18rem),
        #0d1a2a;
}

.portal-public .landing-page-midnight-aurora .landing-showcase-ops {
    grid-column: 1 / span 8;
    grid-row: 2;
}

.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-metric-card,
.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-event-line,
.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-tabs b,
.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-request-card,
.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-calendar-strip span {
    background: #081321;
    border-color: rgb(130 161 188 / 0.22);
}

.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-event-line.active,
.portal-public .landing-page-midnight-aurora .landing-showcase-card .landing-calendar-strip .has-event {
    background: rgb(56 211 159 / 0.11);
    border-color: rgb(56 211 159 / 0.4);
}

.portal-public .landing-page-midnight-aurora .landing-phone-frame {
    min-height: 26rem;
    background: #050e19;
    border-color: rgb(94 139 170 / 0.48);
    box-shadow: 0 5px 8px rgb(0 0 0 / 0.22);
}

.portal-public .landing-page-midnight-aurora .landing-submit-line {
    color: #062319;
    background: var(--aurora-green);
}

.portal-public .landing-page-midnight-aurora .landing-feature-bento {
    padding-bottom: 4rem;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(13rem, auto));
    gap: 1rem;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article {
    display: grid;
    align-content: end;
    min-height: 0;
    padding: 1.5rem;
    color: var(--aurora-text);
    background: var(--aurora-surface);
    border: 1px solid var(--aurora-line);
    border-radius: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article:first-child {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
    background:
        linear-gradient(145deg, rgb(56 211 159 / 0.12), transparent 52%),
        var(--aurora-surface-raised);
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article:nth-child(2) {
    grid-column: 8 / span 5;
    grid-row: 1;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article:nth-child(3) {
    grid-column: 8 / span 5;
    grid-row: 2;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article:nth-child(4) {
    grid-column: 1 / span 12;
    grid-row: 3;
    min-height: 10rem;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups h3 {
    margin: 0.35rem 0;
    font-size: 1.45rem;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article:first-child h3 {
    max-width: 12ch;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1;
}

.portal-public .landing-page-midnight-aurora .landing-feature-groups article > span {
    margin-top: 1.4rem;
    color: var(--aurora-green);
    font-size: 0.76rem;
    font-weight: 800;
}

.portal-public .landing-page-midnight-aurora .landing-audience-editorial {
    padding-top: 3.5rem;
    border-top: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-audience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-audience-grid article {
    min-height: 8.5rem;
    padding: 1.2rem 1.25rem;
    color: var(--aurora-text);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--aurora-line);
    border-bottom: 1px solid var(--aurora-line);
    border-radius: 0;
}

.portal-public .landing-page-midnight-aurora .landing-audience-grid article:nth-child(3n) {
    border-right: 0;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light {
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100vw - 83rem) / 2));
    color: var(--aurora-ink);
    background: var(--aurora-mist);
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-eyebrow {
    color: #087b58;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light h2,
.portal-public .landing-page-midnight-aurora .landing-pricing-light h3,
.portal-public .landing-page-midnight-aurora .landing-pricing-light strong,
.portal-public .landing-page-midnight-aurora .landing-pricing-light p,
.portal-public .landing-page-midnight-aurora .landing-pricing-light li {
    color: var(--aurora-ink);
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-card {
    display: flex;
    min-height: 34rem;
    flex-direction: column;
    padding: 1.65rem;
    background: #ffffff;
    border: 1px solid #cfdbd7;
    border-radius: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-card ul {
    gap: 0;
    margin-bottom: 1.5rem;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-card li {
    padding: 0.7rem 0 0.7rem 1rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dce5e2;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-card .landing-card-actions {
    margin-top: auto;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price {
    color: var(--aurora-ink) !important;
    font-size: clamp(2rem, 3vw, 3rem);
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-featured {
    color: #f4fbf8;
    background: #0b684e;
    border-color: #0b684e;
    box-shadow: none;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-featured :is(h3, strong, p, li),
.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-featured .landing-price {
    color: #f4fbf8 !important;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-featured li {
    background: transparent;
    border-bottom-color: rgb(221 255 242 / 0.18);
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-featured .landing-badge {
    color: #06291d;
    background: #8df2cc;
    border-color: #8df2cc;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-featured .landing-btn-primary {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-card:not(.landing-price-featured) .landing-btn-secondary {
    color: var(--aurora-ink);
    border-color: #afc0bc;
}

.portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-text-link {
    color: inherit;
}

.portal-public .landing-page-midnight-aurora .landing-upgrade-editorial {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
}

.portal-public .landing-page-midnight-aurora .landing-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-upgrade-grid article {
    min-height: 8rem;
    padding: 1.3rem;
    color: var(--aurora-text);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--aurora-line);
    border-bottom: 1px solid var(--aurora-line);
    border-radius: 0;
}

.portal-public .landing-page-midnight-aurora .landing-upgrade-grid article:nth-child(2n) {
    border-right: 0;
}

.portal-public .landing-page-midnight-aurora .landing-aurora-cta {
    position: relative;
    isolation: isolate;
    width: min(88rem, calc(100% - 2rem));
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 5rem);
    margin: 0 auto clamp(4rem, 8vw, 7rem);
    padding: clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    color: var(--aurora-text);
    background: #0d2330;
    border: 1px solid var(--aurora-line-strong);
    border-radius: 1rem;
}

.portal-public .landing-page-midnight-aurora .landing-aurora-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 10% 85%, rgb(56 211 159 / 0.22), transparent 24rem),
        radial-gradient(circle at 88% 10%, rgb(31 159 135 / 0.14), transparent 24rem);
}

.portal-public .landing-page-midnight-aurora .landing-aurora-cta h2 {
    max-width: 14ch;
}

.portal-public .landing-page-midnight-aurora .landing-business-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.portal-public .landing-page-midnight-aurora .landing-business-highlights span {
    color: var(--aurora-text);
    background: rgb(4 15 24 / 0.46);
    border-color: rgb(110 203 172 / 0.28);
}

.portal-public .landing-page-midnight-aurora .landing-faq-editorial {
    padding-top: 0;
}

.portal-public .landing-page-midnight-aurora .landing-faq-grid {
    gap: 0;
    border-top: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-faq-grid details {
    padding: 1.15rem 0.25rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--aurora-line);
    border-radius: 0;
}

.portal-public .landing-page-midnight-aurora .landing-faq-grid details:nth-child(odd) {
    padding-right: 1.5rem;
}

.portal-public .landing-page-midnight-aurora .landing-faq-grid details:nth-child(even) {
    padding-left: 1.5rem;
}

.portal-public .landing-page-midnight-aurora .landing-contact-editorial {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(18rem, 0.62fr) minmax(0, 1.38fr);
    gap: clamp(2rem, 6vw, 6rem);
    padding-inline: max(1rem, calc((100vw - 83rem) / 2));
    background: #0a1625;
    border-top: 1px solid var(--aurora-line);
    border-bottom: 1px solid var(--aurora-line);
}

.portal-public .landing-page-midnight-aurora .landing-contact-editorial .landing-section-head {
    align-content: start;
    margin-bottom: 0;
}

.portal-public .landing-page-midnight-aurora .landing-contact-form {
    margin-top: 0;
    padding: 1.5rem;
    color: var(--aurora-text);
    background: var(--aurora-surface-raised);
    border: 1px solid var(--aurora-line);
    border-radius: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-contact-form :is(input, textarea, select) {
    color: var(--aurora-text);
    background: #07121f;
    border-color: rgb(130 161 188 / 0.28);
}

.portal-public .landing-page-midnight-aurora .landing-footer {
    display: block;
    padding: clamp(3rem, 7vw, 6rem) 0 2rem;
    color: var(--aurora-text);
    background: #06101c;
    border: 0;
    text-align: left;
}

.portal-public .landing-page-midnight-aurora .landing-footer-cta,
.portal-public .landing-page-midnight-aurora .landing-footer-main,
.portal-public .landing-page-midnight-aurora .landing-footer-bottom {
    width: min(82rem, calc(100% - 2rem));
    margin-inline: auto;
}

.portal-public .landing-page-midnight-aurora .landing-footer-cta {
    padding: clamp(2rem, 5vw, 3.5rem);
    color: var(--aurora-text);
    background:
        radial-gradient(circle at 78% 0%, rgb(56 211 159 / 0.18), transparent 22rem),
        #0e2231;
    border: 1px solid var(--aurora-line-strong);
    border-radius: 0.85rem;
}

.portal-public .landing-page-midnight-aurora .landing-footer-main {
    padding-top: 4rem;
}

.portal-public .landing-page-midnight-aurora .landing-footer-brand img {
    max-width: 15rem;
}

.portal-public .landing-page-midnight-aurora .landing-footer-bottom {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top-color: var(--aurora-line);
}

@media (max-width: 1080px) {
    .portal-public .landing-page-midnight-aurora .landing-hero-editorial {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .portal-public .landing-page-midnight-aurora .landing-hero-copy {
        max-width: 48rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-product-window {
        width: 100%;
        max-width: 52rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-journey-strip,
    .portal-public .landing-page-midnight-aurora .landing-contact-editorial {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .portal-public .landing-page-midnight-aurora .landing-steps-four article:first-child,
    .portal-public .landing-page-midnight-aurora .landing-steps-four article:nth-child(2),
    .portal-public .landing-page-midnight-aurora .landing-steps-four article:nth-child(3),
    .portal-public .landing-page-midnight-aurora .landing-steps-four article:nth-child(4) {
        grid-column: span 12;
        min-height: 14rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-showcase-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .portal-public .landing-page-midnight-aurora .landing-showcase-admin,
    .portal-public .landing-page-midnight-aurora .landing-showcase-phone,
    .portal-public .landing-page-midnight-aurora .landing-showcase-ops {
        grid-column: 1;
        grid-row: auto;
    }

    .portal-public .landing-page-midnight-aurora .landing-showcase-phone {
        order: 2;
    }

    .portal-public .landing-page-midnight-aurora .landing-showcase-ops {
        order: 3;
    }

    .portal-public .landing-page-midnight-aurora .landing-feature-groups {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .portal-public .landing-page-midnight-aurora .landing-feature-groups article:first-child,
    .portal-public .landing-page-midnight-aurora .landing-feature-groups article:nth-child(2),
    .portal-public .landing-page-midnight-aurora .landing-feature-groups article:nth-child(3),
    .portal-public .landing-page-midnight-aurora .landing-feature-groups article:nth-child(4) {
        grid-column: 1;
        grid-row: auto;
        min-height: 13rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-public .landing-page-midnight-aurora .landing-audience-grid article,
    .portal-public .landing-page-midnight-aurora .landing-audience-grid article:nth-child(3n) {
        border-right: 1px solid var(--aurora-line);
    }

    .portal-public .landing-page-midnight-aurora .landing-audience-grid article:nth-child(2n) {
        border-right: 0;
    }

    .portal-public .landing-page-midnight-aurora .landing-pricing {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-pricing-light .landing-price-card {
        min-height: 0;
    }

    .portal-public .landing-page-midnight-aurora .landing-aurora-cta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .portal-public .landing-page-midnight-aurora .landing-nav {
        min-height: 4rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-hero-editorial {
        width: 100%;
        padding: 3.75rem 1rem 3.25rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-hero h1 {
        font-size: clamp(2.65rem, 13vw, 3.8rem);
    }

    .portal-public .landing-page-midnight-aurora .landing-proof {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-product-app {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-product-sidebar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0.75rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--aurora-line);
    }

    .portal-public .landing-page-midnight-aurora .landing-product-sidebar .landing-logo {
        display: none;
    }

    .portal-public .landing-page-midnight-aurora .landing-product-sidebar > span {
        min-width: 6rem;
        padding-inline: 0.4rem;
        text-align: center;
    }

    .portal-public .landing-page-midnight-aurora .landing-product-workspace {
        padding: 0.85rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-preview-grid,
    .portal-public .landing-page-midnight-aurora .landing-proof-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-preview-card:last-child {
        grid-column: 1 / -1;
    }

    .portal-public .landing-page-midnight-aurora .landing-journey-strip {
        width: calc(100% - 2rem);
        min-width: 0;
        padding-block: 3rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-proof-metrics article {
        min-height: 6.5rem;
        border-left: 0;
        border-top: 1px solid var(--aurora-line);
    }

    .portal-public .landing-page-midnight-aurora .landing-section,
    .portal-public .landing-page-midnight-aurora .landing-contact {
        width: 100%;
        padding: 3.75rem 1rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-section h2,
    .portal-public .landing-page-midnight-aurora .landing-contact h2,
    .portal-public .landing-page-midnight-aurora .landing-business-band h2 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .portal-public .landing-page-midnight-aurora .landing-audience-grid,
    .portal-public .landing-page-midnight-aurora .landing-upgrade-grid,
    .portal-public .landing-page-midnight-aurora .landing-faq-grid {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-audience-grid article,
    .portal-public .landing-page-midnight-aurora .landing-audience-grid article:nth-child(2n),
    .portal-public .landing-page-midnight-aurora .landing-upgrade-grid article,
    .portal-public .landing-page-midnight-aurora .landing-upgrade-grid article:nth-child(2n) {
        border-right: 0;
    }

    .portal-public .landing-page-midnight-aurora .landing-faq-grid details:nth-child(odd),
    .portal-public .landing-page-midnight-aurora .landing-faq-grid details:nth-child(even) {
        padding-inline: 0.25rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-contact-form {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-contact-form > * {
        grid-column: 1 / -1;
    }

    .portal-public .landing-page-midnight-aurora .landing-aurora-cta {
        width: calc(100% - 2rem);
        margin-bottom: 4rem;
        padding: 2rem 1.2rem;
    }

    .portal-public .landing-page-midnight-aurora .landing-business-highlights {
        grid-template-columns: 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-footer-main {
        grid-template-columns: 1fr 1fr;
    }

    .portal-public .landing-page-midnight-aurora .landing-footer-brand {
        grid-column: 1 / -1;
    }

    .portal-public .landing-page-midnight-aurora .landing-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

.portal-public .legal-page,
.portal-public .landing-page:not(.landing-page-refined) {
    width: min(72rem, calc(100% - 2rem));
    margin: 2rem auto;
}

/* Authentication and registration */
.portal-auth {
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 26rem),
        radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 24rem),
        var(--color-background);
}

.portal-auth .topbar {
    position: relative;
}

.portal-auth .container {
    width: 100%;
    max-width: 82rem;
}

.portal-auth .admin-login-shell,
.portal-auth .registration-shell {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.portal-auth .admin-login-side,
.portal-auth .registration-summary {
    color: #F8FAFC;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 17rem),
        var(--color-sidebar);
    border-color: color-mix(in srgb, var(--color-sidebar) 72%, white);
}

.portal-auth .admin-login-card,
.portal-auth .registration-form-card,
.portal-auth .admin-login-page-pro .admin-login-card {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: transparent;
    box-shadow: none;
}

.portal-auth .admin-login-brand {
    background: transparent;
    border-color: transparent;
}

.portal-auth .admin-login-form label span,
.portal-auth .registration-form label span,
.portal-auth .admin-login-turnstile-label {
    color: var(--color-foreground);
}

.portal-auth .admin-login-turnstile {
    background: var(--color-background);
    border-color: var(--color-border);
}

.portal-auth .admin-login-form button,
.portal-auth .registration-form button {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
}

.portal-auth .admin-login-forgot,
.portal-auth .registration-form a {
    color: var(--color-primary);
}

/* Super Admin and client administration */
.portal-admin {
    background: var(--color-background);
}

.portal-admin > .container {
    width: 100%;
    max-width: 100rem;
    padding: 1.5rem clamp(1rem, 2.5vw, 2.5rem) 3rem;
}

.portal-admin .admin-shell {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1.25rem;
}

.portal-admin .admin-sidebar {
    top: 5.4rem;
    min-height: calc(100vh - 7rem);
    padding: 1rem;
    color: #F8FAFC;
    background: var(--color-sidebar);
    border-color: color-mix(in srgb, var(--color-sidebar) 72%, white);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgb(2 12 27 / 0.18);
}

.portal-admin .admin-menu-home,
.portal-admin .admin-nav-btn,
.portal-admin .admin-submenu-btn {
    color: #E7EEF7;
}

.portal-admin .admin-nav-section-label,
.portal-admin .admin-system-nav-group-title,
.portal-admin .admin-workspace-context-label {
    color: #91A6BD;
}

.portal-admin .admin-nav-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.portal-admin .admin-nav-btn:hover,
.portal-admin .admin-nav-btn:focus-visible {
    color: #FFFFFF;
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.12);
}

.portal-admin .admin-nav-btn.active {
    color: #FFFFFF;
    background: color-mix(in srgb, var(--workspace-primary) 34%, var(--color-sidebar));
    border-color: color-mix(in srgb, var(--workspace-primary) 66%, white);
    box-shadow: inset 3px 0 0 var(--workspace-accent);
}

.portal-admin .admin-submenu {
    border-left-color: rgb(255 255 255 / 0.16);
}

.portal-admin .admin-submenu-btn {
    background: rgb(0 0 0 / 0.16);
    border-color: rgb(255 255 255 / 0.08);
}

.portal-admin .client-workspace-switcher select {
    color: #FFFFFF;
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.18);
}

.portal-admin .admin-main .card,
.portal-admin .admin-main .hero,
.portal-admin .system-registration-dialog,
.portal-admin .modal-card {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.portal-admin .system-page-head,
.portal-admin .company-switcher,
.portal-admin .client-dashboard-header {
    border-radius: var(--radius-lg);
}

.portal-admin .company-switcher {
    padding: 0.85rem 1rem;
}

.portal-admin .system-kpi-strip > *,
.portal-admin .metrics-grid > *,
.portal-admin .support-kpi-grid > *,
.portal-admin .organization-kpi-grid > * {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.portal-admin .system-data-table-card,
.portal-admin .workspace-profile-card,
.portal-admin .advanced-settings-card,
.portal-admin .system-feature-row,
.portal-admin .activity-row,
.portal-admin li {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.portal-admin table,
.portal-admin th,
.portal-admin td {
    border-color: var(--color-border);
}

.portal-admin th {
    color: var(--color-muted-foreground);
    background: color-mix(in srgb, var(--color-background) 72%, var(--color-surface));
}

.portal-admin tbody tr:hover {
    background: color-mix(in srgb, var(--workspace-primary) 5%, var(--color-surface));
}

.portal-admin .admin-main button:not(.admin-nav-btn):not(.admin-submenu-btn):not(.admin-menu-home):not(.admin-logout):not(.hero-toggle-btn):not(.guest-tab-btn):not(.dj-tab-btn):not(.dj-icon-btn):not(.hero-qr-btn):not(.qr-studio-step-button),
.portal-admin .admin-main .admin-link-btn,
.portal-admin .admin-main .admin-compact-btn {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: none;
}

.portal-admin .admin-main :is(.app-btn-primary, .ui-button-primary, .workspace-dashboard-create),
.portal-admin .admin-main [data-dashboard-action="create"],
.portal-admin .admin-main form button[type="submit"]:not(.app-btn-secondary):not(.app-btn-success):not(.app-btn-warning):not(.app-btn-danger):not(.admin-compact-warning):not(.admin-compact-danger):not(.danger):not(.workspace-mini-btn):not(.qr-studio-step-button) {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
}

.portal-admin .admin-main :is(.app-btn-secondary, .workspace-mini-btn, .account-access-tab, .advanced-tab-btn) {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.portal-admin .section-kicker,
.portal-admin .ops-eyebrow {
    color: var(--workspace-primary);
}

.portal-admin .muted,
.portal-admin .advanced-card-hint,
.portal-admin .system-result-count,
.portal-admin .field-helper {
    color: var(--color-muted-foreground);
}

.portal-admin .admin-boot-card {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

/* DJ live cockpit: deliberately dark and low-glare. */
.portal-dj-live {
    color-scheme: dark;
    --bg: var(--color-live-background);
    --bg-2: color-mix(in srgb, var(--color-live-background) 86%, black);
    --panel: var(--color-live-surface);
    --panel-2: color-mix(in srgb, var(--color-live-surface) 88%, white);
    --line: rgb(255 255 255 / 0.12);
    --text: #F8FAFC;
    --muted: #A7B5C7;
    --accent: var(--workspace-accent);
    --accent-2: var(--workspace-primary);
    --surface-base: var(--color-live-background);
    --surface-panel: var(--color-live-surface);
    --surface-panel-strong: color-mix(in srgb, var(--color-live-surface) 90%, white);
    --surface-input: rgb(255 255 255 / 0.04);
    --surface-hover: rgb(255 255 255 / 0.08);
    --border-subtle: rgb(255 255 255 / 0.12);
    --border-strong: rgb(255 255 255 / 0.22);
    --text-strong: #F8FAFC;
    --text-muted: #A7B5C7;
    --focus: var(--workspace-accent);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 26%, transparent);
    --shadow-panel: 0 18px 44px rgb(0 0 0 / 0.22);
    background:
        radial-gradient(circle at 70% 0%, color-mix(in srgb, var(--workspace-primary) 13%, transparent), transparent 34rem),
        var(--color-live-background);
}

.portal-dj-live .topbar {
    color: #F8FAFC;
    background: color-mix(in srgb, var(--color-live-background) 94%, transparent);
    border-bottom-color: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(18px);
}

.portal-dj-live .container {
    width: 100%;
    max-width: 100rem;
    padding: 1.25rem clamp(0.75rem, 2vw, 2rem) 3rem;
}

.portal-dj-live .card,
.portal-dj-live .hero,
.portal-dj-live .modal-card {
    color: #F8FAFC;
    background: color-mix(in srgb, var(--color-live-surface) 96%, transparent);
    border-color: rgb(255 255 255 / 0.12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
}

.portal-dj-live .page-brand-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 5rem;
    padding: 0.75rem 1rem;
}

.portal-dj-live .page-logo {
    width: min(18rem, 64vw);
    max-height: 3.75rem;
    margin: 0;
    object-position: left center;
}

.portal-dj-live #dj-hero-card {
    border-top: 2px solid var(--workspace-accent);
}

.portal-dj-live .dj-time-card,
.portal-dj-live .dj-request-details,
.portal-dj-live #dj-queue > li {
    color: #F8FAFC;
    background: color-mix(in srgb, var(--color-live-surface) 88%, white);
    border-color: rgb(255 255 255 / 0.12);
}

.portal-dj-live .dj-queue-tabs {
    padding: 0.25rem;
    background: rgb(0 0 0 / 0.16);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--radius-md);
}

.portal-dj-live .dj-tab-btn {
    color: #A7B5C7;
    background: transparent;
    border-color: transparent;
}

.portal-dj-live .dj-tab-btn.active {
    color: #FFFFFF;
    background: color-mix(in srgb, var(--workspace-primary) 38%, var(--color-live-surface));
    border-color: var(--workspace-accent);
}

.portal-dj-live .dj-request-actions button,
.portal-dj-live .app-btn-success {
    color: #052016;
    background: var(--workspace-accent);
    border-color: var(--workspace-accent);
}

.portal-dj-live input,
.portal-dj-live textarea,
.portal-dj-live select {
    color: #F8FAFC;
    background: rgb(255 255 255 / 0.05);
    border-color: rgb(255 255 255 / 0.14);
}

/* Guest request flow: bright, simple and touch-first. */
.portal-guest {
    background:
        radial-gradient(circle at 80% 5%, color-mix(in srgb, var(--workspace-accent) 13%, transparent), transparent 25rem),
        var(--color-background);
}

.portal-guest .container {
    width: 100%;
    max-width: 78rem;
    padding: 1rem clamp(0.75rem, 3vw, 2rem) 4rem;
}

.portal-guest .card,
.portal-guest .hero,
.portal-guest .modal-card {
    color: var(--color-foreground);
    background: color-mix(in srgb, var(--color-surface) 97%, transparent);
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.portal-guest .page-brand-center {
    min-height: 6rem;
    padding: 1rem;
    background: var(--color-surface);
}

.portal-guest .page-logo {
    width: min(28rem, 88vw);
    max-height: 5rem;
    margin: 0 auto;
}

.portal-guest #guest-hero-card {
    overflow: hidden;
    background:
        linear-gradient(110deg, var(--color-surface) 0%, color-mix(in srgb, var(--workspace-accent) 12%, var(--color-surface)) 100%);
    border-top: 2px solid var(--workspace-accent);
}

.portal-guest .guest-main-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
}

.portal-guest .guest-source-tabs {
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.portal-guest .guest-tab-btn {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
}

.portal-guest .guest-tab-btn.active {
    color: var(--color-on-primary);
    background: linear-gradient(120deg, var(--workspace-primary), var(--workspace-accent));
    border-color: transparent;
}

.portal-guest .source-panel > input {
    min-height: 3.5rem;
    padding-inline: 1rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.portal-guest .source-panel li,
.portal-guest #approved-queue-list li {
    color: var(--color-foreground);
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.portal-guest .guest-main-grid button.guest-action-primary,
.portal-guest #guest-request-modal button.guest-action-primary,
.portal-guest .guest-tip-form .app-btn.guest-action-primary {
    color: var(--action-primary-text);
    background: var(--action-primary-gradient);
    border-color: transparent;
}

.portal-guest .guest-tip-card {
    border-top: 2px solid var(--workspace-accent);
}

@media (max-width: 980px) {
    .portal-public .landing-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1279px) {
    .portal-admin .admin-shell {
        grid-template-columns: 1fr;
    }

    .portal-admin .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        width: min(21rem, 88vw);
        height: 100dvh;
        min-height: 0;
        overflow-y: auto;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }
}

@media (max-width: 760px) {
    .portal-default .topbar {
        min-height: 3.75rem;
        padding: 0.75rem 1rem;
    }

    .portal-public .landing-page-refined .landing-nav {
        padding: 0.8rem 1rem;
    }

    .portal-public .landing-hero {
        width: 100%;
        min-height: auto;
        padding: 3rem 1rem;
    }

    .portal-public .landing-hero h1 {
        font-size: clamp(2.25rem, 10vw, 3.2rem);
    }

    .portal-public .landing-section,
    .portal-public .landing-contact,
    .portal-public .landing-business-band,
    .portal-public .landing-proof-box {
        width: calc(100% - 1rem);
    }

    .portal-auth .container,
    .portal-admin > .container,
    .portal-dj-live .container,
    .portal-guest .container {
        padding-inline: 0.65rem;
    }

    .portal-auth .admin-login-shell,
    .portal-auth .registration-shell {
        border-radius: var(--radius-lg);
    }

    .portal-admin .card,
    .portal-dj-live .card,
    .portal-dj-live .hero,
    .portal-guest .card,
    .portal-guest .hero {
        border-radius: var(--radius-md);
    }

    .portal-dj-live .hero-with-qr,
    .portal-guest .hero-with-qr,
    .portal-guest .guest-main-grid {
        grid-template-columns: 1fr;
    }

    .portal-dj-live .dj-queue-tabs,
    .portal-guest .guest-source-tabs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .portal-dj-live .dj-tab-btn,
    .portal-guest .guest-tab-btn {
        flex: 0 0 auto;
        min-height: 2.75rem;
        scroll-snap-align: start;
    }

    .portal-dj-live .dj-request-actions,
    .portal-guest .guest-tip-amounts {
        grid-template-columns: 1fr 1fr;
    }

    .portal-guest .source-panel > input {
        min-height: 3.25rem;
    }
}