/* ─────────────────────────────────────────
RESET & BASE — mirrors main RMPAC site so the
AI landing visually reads as part of the same
product family.
───────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root { color-scheme: dark; }
html.light { color-scheme: light; }

:root {
    --red: #c41717;
    --red-dark: #9e1010;
    --black: #0a0a0a;
    --off-black: #111111;
    --charcoal: #1c1c1e;
    --gray-dark: #3a3a3c;
    --gray-mid: #6e6e73;
    --gray-light: #aeaeb2;
    --off-white: #d9d6cf;
    --white: #ffffff;
    --border: rgba(255, 255, 255, 0.08);

    --font:
        -apple-system, "SF Pro Display", "Helvetica Neue", Arial,
        sans-serif;
    --font-mono: "SF Mono", "Fira Code", monospace;

    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-gutter: stable;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.18s;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 16, 46, 0.55);
    background-clip: padding-box;
}
html.light * { scrollbar-color: rgba(0, 0, 0, 0.22) transparent; }
html.light *::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    background-clip: padding-box;
}

body {
    font-family: var(--font);
    background: var(--black);
    color: var(--off-white);
    line-height: 1.5;
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}
html.light body {
    background: #ffffff;
    color: #1a1a1a;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

[hidden] { display: none !important; }

/* ─────────────────────────────────────────
SHARED — eyebrows, section titles
───────────────────────────────────────── */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
}

.section-title {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--off-white);
}
.section-title em {
    font-style: normal;
    color: var(--red);
}
.section-title.light { color: var(--white); }
html.light .section-title { color: #0a0a0a; }
html.light .section-title.light { color: #0a0a0a; }

.section-body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-light);
    max-width: 640px;
}
.section-body.light { color: rgba(255, 255, 255, 0.7); }
html.light .section-body { color: var(--gray-mid); }
html.light .section-body.light { color: var(--gray-mid); }

/* ─────────────────────────────────────────
NAV — copied verbatim from the main RMPAC site so the headers read as
identical. The AI site's nav is permanently in the dark state (because
the hero is always dark), so `nav.dark` styling is inlined into the
default selectors instead of being toggled via JS.
───────────────────────────────────────── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s var(--ease);
}
html.light nav {
    background: rgba(212, 208, 200, 0.92);
    border-bottom-color: var(--border);
}

.nav-left { display: flex; align-items: center; gap: 0; }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--white);
}
html.light .nav-logo { color: var(--black); }
.nav-logo-img {
    height: 110px;
    width: auto;
    flex-shrink: 0;
    display: block;
    position: relative;
    z-index: 101;
    filter: brightness(0) invert(1);
}
html.light .nav-logo-img { filter: none; }

/* "RMPAC AI" wordmark — uses the actual letters PNG. Two variants in
   the DOM, one shown per theme, so the wordmark always reads correctly
   against the nav background. */
.nav-logo-letters {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
    margin-left: -6px;
}
/* Default (dark nav) → show the white letters; hide the colored ones. */
.nav-logo-letters--light { display: none; }
html.light .nav-logo-letters--dark { display: none; }
html.light .nav-logo-letters--light { display: block; }

/* Theme toggle — same icon-only button as the main site. */
.theme-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0 4px 0 0;
    cursor: pointer;
    color: var(--gray-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: color 0.2s, transform 0.2s;
}
.theme-toggle:hover {
    color: var(--white);
    transform: scale(1.1);
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
html.light .theme-toggle .icon-moon { display: none; }
html.light .theme-toggle .icon-sun  { display: block; }
.nav-theme-toggle {
    width: 36px;
    height: 36px;
    margin: 0 0 0 8px;
}
.nav-theme-toggle svg {
    width: 20px;
    height: 20px;
}
html.light .nav-theme-toggle { color: #6b7280; }
html.light .nav-theme-toggle:hover { color: #0a0a0a; }

/* Nav links — identical sizing to main site. */
.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-light);
    letter-spacing: -0.01em;
    transition: color 0.2s;
}
.nav-links a:hover {
    color: var(--white);
}
html.light .nav-links a {
    color: var(--gray-dark);
}
html.light .nav-links a:hover {
    color: var(--black);
}
.nav-links a.is-active,
.nav-links a[aria-current="page"] {
    color: var(--red);
}

/* News modal — full-page slide-down sheet, mirrors the main RMPAC site
   so visitors going site → site see consistent chrome. Posts are fetched
   from the shared API so news content stays in sync across both. */
.news-modal {
    --news-dur: 460ms;
    --news-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    z-index: 99;             /* below the nav (100) so the nav stays visible */
    background: var(--off-black);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px 0 24px;
    transform: translate3d(0, -100%, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform var(--news-dur) var(--news-ease),
        opacity var(--news-dur) var(--news-ease),
        visibility 0s linear var(--news-dur);
    will-change: transform, opacity;
}
.news-modal.is-open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        transform var(--news-dur) var(--news-ease),
        opacity var(--news-dur) var(--news-ease),
        visibility 0s linear 0s;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
}
.news-modal::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--red) 30%, var(--red) 70%, transparent 100%);
    opacity: 0;
    transition: opacity 400ms ease 280ms;
    pointer-events: none;
}
.news-modal.is-open::before { opacity: 0.55; }
html.light .news-modal { background: #f6f4ef; }

.news-modal-back {
    position: fixed;
    top: 24px; left: 24px;
    z-index: 99;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font: 600 13px/1 var(--font);
    letter-spacing: 0.02em;
    border-radius: 999px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        opacity 280ms ease 220ms,
        transform 320ms var(--news-ease) 220ms,
        background 160ms ease,
        border-color 160ms ease;
}
.news-modal.is-open .news-modal-back {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.news-modal-back:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.26);
}
html.light .news-modal-back {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: #0a0a0a;
}
html.light .news-modal-back:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.news-modal-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 40px;
}
.news-modal-header {
    text-align: center;
    margin-bottom: 48px;
}
.news-modal-header .eyebrow { color: var(--red); margin-bottom: 12px; }
.news-modal-header h2 { margin: 0 0 14px; color: var(--white); }
html.light .news-modal-header h2 { color: #0a0a0a; }
.news-modal-header p {
    font-size: 16px;
    color: var(--gray-light);
    max-width: 600px;
    margin: 0 auto;
}
html.light .news-modal-header p { color: var(--gray-mid); }

.news-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.news-modal-single { max-width: 760px; margin: 0 auto; }

.news-card {
    display: flex;
    flex-direction: column;
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s, border-color 0.25s;
    text-align: left;
    color: inherit;
}
.news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 23, 23, 0.5);
}
html.light .news-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
.news-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a center / cover no-repeat;
    border-bottom: 1px solid var(--border);
}
html.light .news-card-thumb {
    background-color: #e5e5ea;
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.news-card-thumb.is-empty {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1010 60%, #0a0a0a 100%);
}
html.light .news-card-thumb.is-empty {
    background: linear-gradient(135deg, #fbe5e5 0%, #f5e5e5 60%, #f0f0f3 100%);
}
.news-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
}
.news-card-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
    color: var(--white);
}
html.light .news-card-title { color: #0a0a0a; }
.news-card-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--gray-light);
    margin: 0;
}
html.light .news-card-excerpt { color: var(--gray-mid); }
.news-card-foot { margin-top: auto; padding-top: 8px; font-size: 12px; }
.news-card-readmore { color: var(--red); font-weight: 600; }

.news-loading, .news-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-light);
    font-size: 14px;
}
html.light .news-loading, html.light .news-empty { color: var(--gray-mid); }

/* Single-post view inside the modal */
.news-post {
    color: var(--off-white);
}
html.light .news-post { color: #1a1a1a; }
.news-post-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
}
.news-post-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 24px;
    color: var(--white);
}
html.light .news-post-title { color: #0a0a0a; }
.news-post-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a center / cover no-repeat;
    border-radius: 14px;
    margin-bottom: 28px;
}
html.light .news-post-thumb { background-color: #e5e5ea; }
.news-post-body { font-size: 16px; line-height: 1.7; }
.news-post-body p { margin: 0 0 16px; }
.news-post-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    cursor: pointer;
}
.news-post-back:hover { color: var(--red-dark); }

/* Single-post media gallery (image + thumbnail strip). Videos render
   as embedded iframes. Same shape as the main site's news.js gallery. */
.news-gallery {
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.news-gallery-main {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
html.light .news-gallery-main { background: #e5e5ea; }
.news-gallery-main img,
.news-gallery-main iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.news-gallery-main img { object-fit: cover; }
.news-gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.news-gallery-thumb {
    width: 88px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    border: 2px solid transparent;
    background: #1a1a1a center / cover no-repeat;
    cursor: pointer;
    position: relative;
    transition: border-color 0.18s, transform 0.15s;
}
.news-gallery-thumb:hover { transform: translateY(-1px); }
.news-gallery-thumb.is-active { border-color: var(--red); }
.news-gallery-thumb.is-video::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
    border-radius: 4px;
}
.news-gallery-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Markdown body — keep typography readable in both themes. */
.news-post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; }
.news-post-body h2 { font-size: 24px; font-weight: 700; margin: 28px 0 12px; line-height: 1.2; color: var(--white); }
.news-post-body h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; line-height: 1.25; color: var(--white); }
html.light .news-post-body h2, html.light .news-post-body h3 { color: #0a0a0a; }
.news-post-body a { color: var(--red); text-decoration: underline; }
.news-post-body a:hover { color: var(--red-dark); }
.news-post-body ul, .news-post-body ol { padding-left: 22px; margin: 0 0 16px; }
.news-post-body li { margin-bottom: 4px; }
.news-post-body blockquote {
    border-left: 3px solid var(--red);
    padding: 4px 0 4px 14px;
    margin: 16px 0;
    color: var(--gray-light);
    font-style: italic;
}
html.light .news-post-body blockquote { color: var(--gray-mid); }
.news-post-body iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
    margin: 16px 0;
}
.news-post-body code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}
html.light .news-post-body code { background: rgba(0, 0, 0, 0.06); }

/* Body lock while modal open — same pattern as main site so background
   page doesn't scroll behind the open sheet. */
body.news-open { overflow: hidden; }

/* Nav auth buttons — copied verbatim from main site so sizes match. */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-auth-guest,
.nav-auth-user {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-auth-guest[hidden],
.nav-auth-user[hidden] {
    display: none !important;
}

.nav-hello {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-light);
    letter-spacing: -0.01em;
    padding: 7px 4px 7px 8px;
    white-space: nowrap;
}
html.light .nav-hello { color: var(--gray-dark); }

.nav-signin {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-light);
    letter-spacing: -0.01em;
    padding: 7px 14px;
    cursor: pointer;
    border-radius: 980px;
    transition: color 0.2s, background 0.2s;
}
.nav-signin:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
html.light .nav-signin {
    color: var(--gray-dark);
}
html.light .nav-signin:hover {
    color: var(--black);
    background: rgba(0, 0, 0, 0.04);
}

.nav-cta {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    background: var(--red);
    color: #fff;
    border-radius: 980px;
    letter-spacing: -0.01em;
    transition: background 0.2s, transform 0.15s;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav-cta:hover {
    background: var(--red-dark);
    transform: scale(1.02);
}

/* Mobile menu button (hidden by default — shown via JS for signed-in users) */
.nav-menu-btn {
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--off-white);
    transition: background 0.18s;
}
.nav-menu-btn:hover { background: rgba(255, 255, 255, 0.06); }
html.light .nav-menu-btn { color: #1a1a1a; }
html.light .nav-menu-btn:hover { background: rgba(0,0,0,0.05); }
.nav-menu-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-menu-bars span {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 1px;
}

/* Hamburger panel (signed-in users) — copied verbatim from rmpacgroup.com
   so it looks identical. Panel stays invisible (opacity:0 +
   pointer-events:none) until JS adds .is-open. */
.nav-menu-panel {
    position: fixed;
    top: 60px;
    left: 16px;
    z-index: 110;
    width: 260px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 12px 40px -12px rgba(0, 0, 0, 0.4),
        0 2px 8px -2px rgba(0, 0, 0, 0.18);
    transform-origin: top left;
    transform: translateY(-6px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.22s var(--ease),
        opacity 0.18s var(--ease);
}
.nav-menu-panel[hidden] { display: none; }
.nav-menu-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
html.light .nav-menu-panel {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 12px 40px -12px rgba(0, 0, 0, 0.25),
        0 2px 8px -2px rgba(0, 0, 0, 0.08);
}

.nav-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}
html.light .nav-menu-header { border-bottom-color: rgba(0, 0, 0, 0.06); }
.nav-menu-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-mid);
}
.nav-menu-role {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}
html.light .nav-menu-role { color: #0a0a0a; }

.nav-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.nav-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--gray-light);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-menu-item:hover,
.nav-menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
}
html.light .nav-menu-item { color: var(--gray-dark); }
html.light .nav-menu-item:hover,
html.light .nav-menu-item:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    color: #0a0a0a;
}
.nav-menu-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--gray-mid);
}
.nav-menu-item:hover .nav-menu-icon,
.nav-menu-item:focus-visible .nav-menu-icon {
    color: var(--red);
}
.nav-menu-item--danger { color: var(--red); }
.nav-menu-item--danger:hover,
.nav-menu-item--danger:focus-visible {
    background: rgba(196, 23, 23, 0.08);
    color: var(--red);
}
.nav-menu-item--danger .nav-menu-icon { color: var(--red); }
.nav-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 4px;
    border: none;
    list-style: none;
}
html.light .nav-menu-divider { background: rgba(0, 0, 0, 0.06); }

/* ─────────────────────────────────────────
BUTTONS
───────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--red);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 6px;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.btn-primary:hover {
    background: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(196, 23, 23, 0.5);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    transition: background 0.18s, border-color 0.18s;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
}
html.light .btn-secondary {
    color: #0a0a0a;
    border-color: rgba(0, 0, 0, 0.18);
}
html.light .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────
HERO
───────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 40px 80px;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0a0a 100%);
}
/* Hero background video — fills the section, darkened by ::after so
   the foreground copy stays legible. Sits below .hero-bg (grid + glow)
   so the brand chrome paints over it. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.7) 60%,
        rgba(26, 10, 10, 0.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}
.hero-glow {
    position: absolute;
    top: 30%; left: 50%;
    width: 600px; height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(196, 23, 23, 0.25) 0%, transparent 65%);
    filter: blur(40px);
}
.hero > *:not(.hero-bg):not(.hero-video) { position: relative; z-index: 3; }

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red);
    margin-bottom: 28px;
    padding: 6px 14px;
    border: 1px solid rgba(196, 23, 23, 0.4);
    border-radius: 100px;
    background: rgba(196, 23, 23, 0.08);
}

.hero h1 {
    font-size: clamp(48px, 9vw, 96px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--white);
    margin-bottom: 28px;
}
.hero h1 em {
    font-style: normal;
    color: var(--red);
}
.hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    max-width: 640px;
    margin-bottom: 40px;
}
.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Free-trial banner — prominent callout in the hero so the no-card trial
   offer is the first thing visitors see. */
.hero-trial-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 680px;
    margin: 0 auto 32px;
    padding: 14px 18px;
    background: rgba(196, 23, 23, 0.10);
    border: 1px solid rgba(196, 23, 23, 0.40);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
}
.hero-trial-pill {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--red, #c41717);
    padding: 5px 11px;
    border-radius: 999px;
}
.hero-trial-text {
    flex: 1 1 300px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}
.hero-trial-text strong { color: #fff; font-weight: 700; }
.hero-trial-cta {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--red, #c41717);
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease);
    white-space: nowrap;
}
.hero-trial-cta:hover { background: var(--red-dark, #9e1010); transform: translateY(-1px); }
@media (max-width: 600px) {
    .hero-trial-banner { flex-direction: column; text-align: center; gap: 12px; }
    .hero-trial-cta { width: 100%; }
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gray-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.scroll-line {
    width: 1px; height: 32px;
    background: linear-gradient(180deg, transparent 0%, currentColor 100%);
}

/* ─────────────────────────────────────────
ABOUT SECTION
───────────────────────────────────────── */
.about-section {
    padding: 120px 40px;
    background: var(--black);
}
html.light .about-section { background: #ffffff; }
.about-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.about-inner .section-title {
    margin: 12px auto 24px;
}
.about-inner .section-body {
    margin: 0 auto;
}
.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 72px;
    text-align: left;
}
/* 5-card variant: 3 across on top, 2 across (centered) on the second row.
   Uses a 6-column track so the bottom two cards can each span 3 cols and
   sit centered under the top row instead of orphan-left. */
.about-features--5 {
    grid-template-columns: repeat(6, 1fr);
}
.about-features--5 > .feature-card { grid-column: span 2; }
.about-features--5 > .feature-card:nth-child(4) { grid-column: 2 / span 2; }
.about-features--5 > .feature-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 980px) {
    .about-features--5 {
        grid-template-columns: 1fr;
    }
    .about-features--5 > .feature-card,
    .about-features--5 > .feature-card:nth-child(4),
    .about-features--5 > .feature-card:nth-child(5) {
        grid-column: auto;
    }
}
.feature-card {
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 23, 23, 0.5);
}
html.light .feature-card {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.06);
}
html.light .feature-card:hover {
    background: #ffffff;
}
.feature-icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(196, 23, 23, 0.12);
    color: var(--red);
    margin-bottom: 20px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
html.light .feature-name { color: #0a0a0a; }
.feature-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-light);
}
html.light .feature-desc { color: var(--gray-mid); }

/* ─────────────────────────────────────────
PRICING
───────────────────────────────────────── */
.pricing-section {
    padding: 120px 40px;
    background: var(--off-black);
}
html.light .pricing-section { background: #f5f5f7; }

.pricing-header {
    max-width: 720px;
    margin: 0 auto 72px;
    text-align: center;
}
.pricing-header .section-title { margin: 12px 0 20px; }
.pricing-header .section-body { margin: 0 auto; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    background: var(--black);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.25s, border-color 0.25s;
}
.pricing-card:hover {
    transform: translateY(-4px);
}
html.light .pricing-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}
.pricing-card--featured {
    border-color: var(--red);
    background: linear-gradient(180deg, rgba(196, 23, 23, 0.08) 0%, var(--black) 60%);
    box-shadow: 0 24px 60px -20px rgba(196, 23, 23, 0.4);
}
html.light .pricing-card--featured {
    background: linear-gradient(180deg, rgba(196, 23, 23, 0.04) 0%, #ffffff 60%);
    box-shadow: 0 24px 60px -20px rgba(196, 23, 23, 0.25);
}
.pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--red);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: 100px;
}
.pricing-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
}
.pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.03em;
}
html.light .pricing-card-price { color: #0a0a0a; }
.pricing-card-currency { font-size: 22px; opacity: 0.7; }
.pricing-card-amount { font-size: 56px; line-height: 1; }
.pricing-card-period { font-size: 14px; color: var(--gray-light); margin-left: 4px; }
html.light .pricing-card-period { color: var(--gray-mid); }

/* TBD pricing variant — used while plans/pricing are still being
   finalized. Number is replaced by the literal "TBD" so spacing needs
   to be tighter than the $999 layout. */
.pricing-card-price--tbd .pricing-card-amount {
    font-size: 36px;
    letter-spacing: 0.08em;
    color: var(--gray-light);
}
html.light .pricing-card-price--tbd .pricing-card-amount { color: var(--gray-mid); }

/* Annual price line under the monthly amount. */
.pricing-card-annual {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-light);
    margin-top: 6px;
    letter-spacing: 0.01em;
}
html.light .pricing-card-annual { color: var(--gray-mid); }

/* Custom / "Contact a RMPAC Rep" price — text instead of a number, so it
   needs a smaller, wrapping treatment than the 56px dollar amount. */
.pricing-card-price--custom .pricing-card-amount {
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Billing period toggle (Monthly / Annual). */
.pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
}
html.light .pricing-toggle { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.10); }
.pricing-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-light);
    padding: 8px 18px;
    border-radius: 999px;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
html.light .pricing-toggle-btn { color: var(--gray-mid); }
.pricing-toggle-btn.is-active { background: var(--red, #c41717); color: #fff; }
.pricing-toggle-save {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8fe0a0;
    background: rgba(40, 180, 90, 0.16);
    padding: 2px 7px;
    border-radius: 999px;
}
.pricing-toggle-btn.is-active .pricing-toggle-save { color: #fff; background: rgba(255, 255, 255, 0.22); }

/* Annual-discount tag at the top of each tier. */
.pricing-card-discount {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(40, 175, 90, 0.85);
    padding: 3px 8px;
    border-radius: 999px;
}

.pricing-card-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-light);
    min-height: 42px;
}
html.light .pricing-card-tagline { color: var(--gray-mid); }

.pricing-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 16px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.pricing-card-list li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--off-white);
}
.pricing-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 2px;
    background: var(--red);
}
html.light .pricing-card-list li { color: #1a1a1a; }
html.light .pricing-card-list { border-top-color: rgba(0,0,0,0.08); }

.pricing-card-cta {
    margin-top: auto;
    padding: 14px;
    background: var(--red);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    transition: background 0.18s, transform 0.18s, opacity 0.18s;
}
.pricing-card-cta:hover:not(:disabled) {
    background: var(--red-dark);
    transform: translateY(-1px);
}
.pricing-card-cta:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-light);
    cursor: not-allowed;
}
html.light .pricing-card-cta:disabled {
    background: rgba(0, 0, 0, 0.06);
    color: var(--gray-mid);
}
.pricing-card--featured .pricing-card-cta {
    /* extra emphasis on the featured tier */
    box-shadow: 0 8px 20px -8px rgba(196, 23, 23, 0.6);
}

/* Role-aware CTA states (set by script.js based on rmpac-role).
   Modifier wins over :disabled for color/text since some states
   want a distinct accent even while disabled. */
.pricing-card-cta--current {
    background: rgba(196, 23, 23, 0.12) !important;
    color: var(--red) !important;
    cursor: default !important;
    border: 1px solid rgba(196, 23, 23, 0.35);
    opacity: 1 !important;
}
.pricing-card-cta--current::before {
    content: "✓ ";
    margin-right: 4px;
}
.pricing-card-cta--upgrade {
    /* leave default red background; click is active */
    background: var(--red);
    color: #fff;
}
.pricing-card-cta--lower {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gray-mid) !important;
    cursor: not-allowed !important;
}
html.light .pricing-card-cta--lower {
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--gray-mid) !important;
}
.pricing-card-cta--staff {
    background: linear-gradient(135deg, rgba(196, 23, 23, 0.2), rgba(196, 23, 23, 0.05)) !important;
    color: var(--red) !important;
    cursor: default !important;
    border: 1px solid rgba(196, 23, 23, 0.3);
    opacity: 1 !important;
    font-weight: 700;
}
/* TBD state — pricing not yet final, buttons disabled site-wide for
   non-staff users. Same dim treatment as the lower-tier state but
   neutral copy so it doesn't read as "wrong tier". */
.pricing-card-cta--tbd {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--gray-mid) !important;
    cursor: not-allowed !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
html.light .pricing-card-cta--tbd {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--gray-mid) !important;
}

.pricing-foot {
    max-width: 600px;
    margin: 48px auto 0;
    text-align: center;
    font-size: 14px;
    color: var(--gray-light);
}
.pricing-foot a {
    color: var(--red);
    font-weight: 600;
}
.pricing-foot a:hover { color: var(--red-dark); }
html.light .pricing-foot { color: var(--gray-mid); }

/* ─────────────────────────────────────────
CONTACT
───────────────────────────────────────── */
.contact-section {
    padding: 120px 40px;
    background: var(--black);
}
html.light .contact-section { background: #ffffff; }
.contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.contact-inner .section-title { margin: 12px auto 20px; }
.contact-inner .section-body { margin: 0 auto; }
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 56px;
}
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 24px;
    background: var(--off-black);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-align: left;
    transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.contact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196, 23, 23, 0.5);
}
html.light .contact-card {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.06);
}
.contact-card-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
}
.contact-card-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.01em;
}
html.light .contact-card-value { color: #0a0a0a; }

/* ─────────────────────────────────────────
FOOTER
───────────────────────────────────────── */
footer {
    background: #050505;
    padding: 80px 40px 40px;
    border-top: 1px solid var(--border);
}
html.light footer {
    background: #f0f0f3;
    border-top-color: rgba(0,0,0,0.06);
}
.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-brand { padding-right: 24px; }
.footer-logo-img {
    height: 32px;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
}
html.light .footer-logo-img { filter: none; }
.footer-tagline {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-light);
    max-width: 320px;
}
html.light .footer-tagline { color: var(--gray-mid); }

.footer-col h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
    margin-bottom: 16px;
}
.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-col a {
    font-size: 13px;
    color: var(--gray-light);
    transition: color 0.18s;
}
.footer-col a:hover { color: var(--white); }
html.light .footer-col a { color: var(--gray-mid); }
html.light .footer-col a:hover { color: #0a0a0a; }

.footer-bottom {
    max-width: 1200px;
    margin: 48px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--gray-mid);
    text-align: center;
}
html.light .footer-bottom { border-top-color: rgba(0,0,0,0.06); }

/* ─────────────────────────────────────────
REVEAL ANIMATIONS — wire up via IntersectionObserver in script.js
───────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 980px) {
    .about-features, .pricing-grid, .contact-grid {
        grid-template-columns: 1fr;
    }
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    nav#mainNav {
        padding: 14px 20px;
    }
    .nav-links { gap: 18px; }
    .nav-links li:not(:last-child):not(.nav-dropdown) {
        display: none; /* hide non-essential nav items on mobile */
    }
    .hero { padding: 90px 24px 60px; }
    .about-section, .pricing-section, .contact-section {
        padding: 80px 24px;
    }
    .footer-top { grid-template-columns: 1fr; gap: 36px; }
    .footer-brand { padding-right: 0; }
}

/* ═════════════════════════════════════════════
   AUTH MODALS (sign-up + sign-in)
   Copied verbatim from rmpacgroup.com so the auth UI on rmpac.ai
   looks identical to the main site. Same Cognito User Pool means
   the same form serves the same accounts on both domains.
   ═════════════════════════════════════════════ */
.signup-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.75s;
}
.signup-modal.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}

.signup-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(
            ellipse 80% 60% at 50% 40%,
            rgba(196, 23, 23, 0) 0%,
            transparent 65%
        ),
        rgba(6, 6, 8, 0);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    cursor: pointer;
    transition:
        background 0.65s var(--ease-out),
        backdrop-filter 0.75s var(--ease-out),
        -webkit-backdrop-filter 0.75s var(--ease-out);
}
.signup-modal.is-open .signup-backdrop {
    background: radial-gradient(
            ellipse 80% 60% at 50% 40%,
            rgba(196, 23, 23, 0.18) 0%,
            transparent 65%
        ),
        rgba(6, 6, 8, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.signup-dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 48px);
    background: var(--off-black);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.6),
        0 20px 40px -10px rgba(196, 23, 23, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition:
        transform 0.45s var(--ease-out),
        opacity 0.35s var(--ease-out);
}
html.light .signup-dialog {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.18),
        0 20px 40px -10px rgba(196, 23, 23, 0.15);
}
.signup-modal.is-open .signup-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.signup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        transform 0.15s,
        border-color 0.2s;
}
.signup-close:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: rotate(90deg);
}
html.light .signup-close {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.1);
}
html.light .signup-close:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Brand (left) panel ── */
.signup-brand {
    position: relative;
    padding: 44px 40px;
    background:
        linear-gradient(
            155deg,
            #1a0707 0%,
            #0f0606 40%,
            #080808 100%
        );
    color: #fff;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.signup-brand-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 44px 44px;
    mask-image: radial-gradient(
        ellipse 80% 70% at 30% 30%,
        black 10%,
        transparent 90%
    );
    pointer-events: none;
}

.signup-brand-glow {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(
        circle,
        rgba(196, 23, 23, 0.4) 0%,
        transparent 60%
    );
    filter: blur(40px);
    pointer-events: none;
}

.signup-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 540px;
}

.signup-brand-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 44px;
}
.signup-brand-logo {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
}
.signup-brand-wordmark {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: #fff;
}

/* RMPAC AI override of the brand panel header — R icon is massive
   (bigger than the wordmark text per user spec), wordmark drops the
   "Group" subtitle and shows the "ai" red pill instead. */
.signup-brand-top--ai {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px;
}
.signup-brand-logo--ai {
    height: 130px;
    width: auto;
}
/* Auth-modal brand uses the white letters PNG against the dark
   gradient brand panel. Height is well below the 130px R icon so the
   icon stays visually dominant per spec. */
.signup-brand-letters {
    height: 56px;
    width: auto;
    display: block;
}
.signup-brand-wordmark span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.signup-brand-headline {
    flex: 1;
}
.signup-brand-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    padding: 6px 12px;
    background: rgba(196, 23, 23, 0.14);
    border: 1px solid rgba(196, 23, 23, 0.3);
    border-radius: 980px;
    margin-bottom: 20px;
}
.signup-brand-headline h3 {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
    margin-bottom: 14px;
}
.signup-brand-headline h3 em {
    font-style: normal;
    color: var(--red);
    position: relative;
}
.signup-brand-headline p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    max-width: 340px;
}

.signup-brand-list {
    list-style: none;
    margin: 32px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.signup-brand-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: -0.005em;
}
.signup-brand-bullet {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(196, 23, 23, 0.35);
}

.signup-brand-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.signup-brand-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

/* ── Form (right) panel ── */
.signup-form-panel {
    padding: 48px 44px;
    background: #fafafa;
    color: var(--black);
    overflow-y: auto;
    max-height: calc(100vh - 48px);
}

.signup-form-header {
    margin-bottom: 28px;
}
.signup-form-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}
.signup-form-header h2 {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--black);
    margin-bottom: 10px;
}
.signup-form-header p {
    font-size: 13px;
    color: var(--gray-mid);
}

.signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signup-form[hidden],
.signup-form-header[hidden] {
    display: none !important;
}

.mfa-choose-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: var(--white, #fff);
    border: 1px solid var(--gray-line, #e2e2e2);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.05s ease;
    font: inherit;
}
.mfa-choose-btn:hover {
    border-color: var(--brand-red, #c8102e);
}
.mfa-choose-btn:active { transform: translateY(1px); }
.mfa-choose-btn:focus-visible {
    outline: 2px solid var(--brand-red, #c8102e);
    outline-offset: 2px;
}
.mfa-choose-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(200, 16, 46, 0.08);
    color: var(--brand-red, #c8102e);
}
.mfa-choose-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mfa-choose-title { font-size: 14px; font-weight: 600; }
.mfa-choose-sub { font-size: 12px; color: var(--gray-mid, #6a6a6a); }
.mfa-choose-chev { flex: 0 0 14px; color: var(--gray-mid, #6a6a6a); }

.signup-mfa-notice {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 196, 71, 0.08);
    border: 1px solid rgba(255, 196, 71, 0.35);
    border-radius: 10px;
    color: inherit;
}
.signup-mfa-notice-icon {
    flex: 0 0 18px;
    color: #c89432;
    margin-top: 1px;
}
.signup-mfa-notice strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 4px;
}
.signup-mfa-notice p {
    font-size: 12px;
    line-height: 1.45;
    color: var(--gray-mid, #6a6a6a);
    margin: 0;
}

.signup-mfa-pick {
    border: 1px solid var(--gray-line, #e2e2e2);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.signup-mfa-pick legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 6px;
    color: var(--gray-mid, #6a6a6a);
}
.signup-mfa-pick .signup-mfa-hint {
    font-size: 12px;
    color: var(--gray-mid, #6a6a6a);
    margin: -2px 0 4px;
    line-height: 1.4;
}

.totp-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--gray-line, #e2e2e2);
    border-radius: 12px;
}
.totp-qr-canvas {
    display: block;
    width: 192px;
    height: 192px;
    background: #fff;
    padding: 8px;
    box-sizing: content-box;
}
.totp-qr-canvas img,
.totp-qr-canvas canvas {
    display: block;
    width: 192px !important;
    height: 192px !important;
}
.totp-qr-fallback {
    font-size: 12px;
    color: var(--gray-mid, #6a6a6a);
    text-align: center;
    line-height: 1.5;
}
.totp-qr-fallback code {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 10px;
    background: #f3f3f3;
    border-radius: 6px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    user-select: all;
    word-break: break-all;
}
.light .totp-qr-fallback code,
html:not(.dark) .totp-qr-fallback code {
    color: #1a1a1a;
}

.signup-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.signup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.signup-field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--gray-dark);
}
.signup-field input,
.signup-select select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--black);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        background 0.2s;
}
.signup-field input::placeholder {
    color: var(--gray-light);
}
.signup-field input:hover,
.signup-select select:hover {
    border-color: rgba(0, 0, 0, 0.2);
}
.signup-field input:focus,
.signup-select select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(196, 23, 23, 0.12);
    background: #fff;
}

/* Chrome / Edge / Safari highlight autofilled fields with a blue or yellow
   background tint. You can't style that bg directly, but a giant inset
   box-shadow paints over it. The 5000s transition keeps the override from
   ever being interpolated away. */
.signup-field input:-webkit-autofill,
.signup-field input:-webkit-autofill:hover,
.signup-field input:-webkit-autofill:focus,
.signup-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--black) !important;
    caret-color: var(--black);
    transition: background-color 5000s ease-in-out 0s;
}
.signup-field input:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 1000px #fff inset,
        0 0 0 4px rgba(196, 23, 23, 0.12) !important;
}

.signup-select {
    position: relative;
}
.signup-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
}
.signup-select-caret {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--gray-mid);
    pointer-events: none;
}

/* ── Company picker (typeahead dropdown on signup form) ── */
.company-picker {
    position: relative;
}
.company-trigger {
    width: 100%;
    height: 44px;
    padding: 0 38px 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--black);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.company-trigger:hover {
    border-color: rgba(0, 0, 0, 0.2);
}
.company-trigger[aria-expanded="true"],
.company-trigger:focus-visible {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(196, 23, 23, 0.12);
}
.company-trigger-label {
    flex: 1;
    color: var(--gray-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.company-trigger-label.is-selected {
    color: var(--black);
}
.company-trigger-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-mid);
    pointer-events: none;
}

.company-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.18);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
}
.company-popover[hidden] {
    display: none !important;
}

.company-search-row {
    flex: 0 0 auto;
}
.company-search {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--black);
    background: #f7f7f8;
    border: 1px solid transparent;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.company-search:focus {
    background: #fff;
    border-color: var(--red);
}
.company-search::placeholder {
    color: var(--gray-light);
}

.company-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.company-list-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--black);
    background: transparent;
    border: none;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.company-list-item:hover,
.company-list-item:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

.company-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--gray-mid);
    text-align: center;
}

.company-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--red);
    background: transparent;
    border: 1px dashed rgba(196, 23, 23, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.company-create-btn:hover {
    background: rgba(196, 23, 23, 0.05);
    border-color: rgba(196, 23, 23, 0.6);
}

.company-new-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px 2px;
}
.company-new-form[hidden] {
    display: none !important;
}
.company-new-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--black);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    outline: none;
}
.company-new-input:focus {
    border-color: var(--red);
}
.company-new-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.company-new-cancel,
.company-new-add {
    height: 30px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.company-new-cancel {
    background: transparent;
    color: var(--gray-dark);
}
.company-new-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
}
.company-new-add {
    background: var(--red);
    color: #fff;
}
.company-new-add:hover {
    background: #a40f0f;
}
.company-new-add:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.company-warn {
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--black);
    background: #fff7ec;
    border: 1px solid #f5d599;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.company-warn[hidden] {
    display: none !important;
}
.company-warn-pick,
.company-warn-force {
    align-self: flex-start;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.company-warn-pick {
    background: var(--red);
    color: #fff;
}
.company-warn-pick:hover {
    background: #a40f0f;
}
.company-warn-force {
    background: transparent;
    color: var(--gray-dark);
    text-decoration: underline;
}

.signup-hint {
    font-size: 11px;
    color: var(--gray-mid);
    margin-top: 2px;
    line-height: 1.4;
}

.signup-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-top: 4px;
}
.signup-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.signup-check-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.signup-check-box svg {
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.15s,
        transform 0.15s;
}
.signup-check input:checked + .signup-check-box {
    background: var(--red);
    border-color: var(--red);
}
.signup-check input:checked + .signup-check-box svg {
    opacity: 1;
    transform: scale(1);
}
.signup-check input:focus-visible + .signup-check-box {
    box-shadow: 0 0 0 4px rgba(196, 23, 23, 0.2);
}
.signup-check-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-dark);
}
.signup-check-text a {
    color: var(--black);
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    transition: border-color 0.15s;
}
.signup-check-text a:hover {
    border-bottom-color: var(--red);
    color: var(--red);
}

.signup-error {
    margin-top: 4px;
    padding: 10px 12px;
    background: rgba(196, 23, 23, 0.08);
    border: 1px solid rgba(196, 23, 23, 0.28);
    border-radius: 9px;
    font-size: 13px;
    color: var(--red-dark);
    line-height: 1.4;
}
.signup-error[hidden] {
    display: none;
}

.signup-submit {
    margin-top: 8px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--red);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow:
        0 6px 16px -4px rgba(196, 23, 23, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
    transition:
        background 0.2s,
        transform 0.15s,
        box-shadow 0.2s;
}
.signup-submit:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px -6px rgba(196, 23, 23, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}
.signup-submit:active {
    transform: translateY(0);
}
.signup-submit svg {
    transition: transform 0.2s;
}
.signup-submit:hover svg {
    transform: translateX(3px);
}

.signup-alt {
    text-align: center;
    font-size: 13px;
    color: var(--gray-mid);
    margin-top: 4px;
}
.signup-alt a,
.signup-link-btn {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: var(--black);
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    transition:
        color 0.15s,
        border-color 0.15s;
}
.signup-alt a:hover,
.signup-link-btn:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* ── Sign In form additions ── */
.signup-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.signup-forgot {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--gray-mid);
    transition: color 0.15s;
}
.signup-forgot:hover {
    color: var(--red);
}

.signup-password {
    position: relative;
}
.signup-password input {
    padding-right: 44px;
}
.signup-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-mid);
    cursor: pointer;
    border-radius: 8px;
    transition:
        color 0.15s,
        background 0.15s;
}
.signup-password-toggle:hover {
    color: var(--black);
    background: rgba(0, 0, 0, 0.04);
}
.signup-password-toggle .icon-eye-off {
    display: none;
}
.signup-password-toggle.is-visible .icon-eye {
    display: none;
}
.signup-password-toggle.is-visible .icon-eye-off {
    display: block;
}

.signup-check-small .signup-check-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}
.signup-check-small .signup-check-text {
    font-size: 12px;
    color: var(--gray-mid);
}

.signup-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-light);
}
.signup-divider::before,
.signup-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.signup-sso {
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: var(--black);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        transform 0.15s;
}
.signup-sso:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}
.signup-sso:active {
    transform: translateY(0);
}

/* Lock background scroll when open */
body.signup-open {
    overflow: hidden;
}

/* ── Light mode tweaks (dialog chrome stays dark for brand impact) ── */
html.light .signup-form-panel {
    background: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .signup-modal {
        padding: 0;
        align-items: flex-end;
    }
    .signup-dialog {
        grid-template-columns: 1fr;
        max-width: 100%;
        max-height: 94vh;
        border-radius: 24px 24px 0 0;
        overflow-y: auto;
    }
    .signup-brand {
        padding: 32px 28px;
    }
    .signup-brand-inner {
        min-height: auto;
    }
    .signup-brand-top {
        margin-bottom: 28px;
    }
    .signup-brand-headline h3 {
        font-size: 26px;
    }
    .signup-brand-list {
        margin: 24px 0 20px;
    }
    .signup-form-panel {
        padding: 36px 28px 40px;
        max-height: none;
    }
    .signup-form-header h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .signup-row {
        grid-template-columns: 1fr;
    }
}