/* Shared Phase-1 page template + Features mega menu (v2) */

#menu-bar,
#menu-bar .nk-menubar-warper,
#menu-bar .nk-menu,
#menu-bar .nk-menu-list {
    overflow: visible;
}

.seo-page {
    color: var(--bs-content-color);
}

.seo-hero {
    padding: 7.5rem 0 3.5rem;
}

.seo-page .nk-header > .section-lg {
    padding-top: 7.5rem;
}

.seo-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.seo-hero h1 {
    margin: 1rem 0 1rem;
    color: var(--bs-title-color, #eef2ff);
}

.seo-section h2,
.seo-cta-band h2 {
    color: var(--bs-title-color, #eef2ff);
}

.seo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.25);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.seo-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 1.5rem;
}

.seo-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.seo-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 2rem;
}

.seo-hero-shot {
    max-width: 920px;
    margin: 0 auto;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-hero-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.seo-answer {
    max-width: 820px;
    margin: 0 auto 3rem;
    padding: 1.5rem 1.6rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.06);
}

.seo-answer h2 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.seo-answer p {
    margin-bottom: 0;
    line-height: 1.75;
}

.seo-section {
    padding: 1.5rem 0 2.5rem;
}

.seo-section h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.seo-section > .seo-sub {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 1.75rem;
}

.seo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.seo-card {
    padding: 1.25rem 1.2rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    height: 100%;
}

.seo-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.55rem;
}

.seo-card p {
    margin: 0;
    line-height: 1.65;
    font-size: 0.95rem;
}

.seo-prose {
    max-width: 760px;
    margin: 0 auto;
}

.seo-prose h2 {
    text-align: left;
    margin: 2.25rem 0 0.85rem;
    font-size: 1.55rem;
}

.seo-prose h3 {
    margin: 1.5rem 0 0.6rem;
    font-size: 1.15rem;
}

.seo-prose p,
.seo-prose li {
    line-height: 1.8;
}

.seo-prose ul,
.seo-prose ol {
    padding-left: 1.2rem;
    margin-bottom: 1.1rem;
}

.seo-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.seo-step {
    padding: 1.2rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-step .num {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.seo-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.seo-quote {
    padding: 1.25rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-quote p {
    margin: 0 0 1rem;
    line-height: 1.65;
}

.seo-quote cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
}

.seo-quote small {
    color: #64748b;
}

.seo-cta-band {
    text-align: center;
    padding: 2.25rem 1.5rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: rgba(11, 18, 32, 0.35);
    margin: 1rem 0 2rem;
}

.seo-cta-band h2 {
    margin-bottom: 0.5rem;
}

.seo-faq {
    max-width: 760px;
    margin: 0 auto;
}

.seo-faq details {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
}

.seo-faq summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.seo-faq summary::-webkit-details-marker {
    display: none;
}

.seo-faq details p {
    margin: 0.75rem 0 0;
    line-height: 1.7;
}

.seo-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.seo-related a {
    display: block;
    padding: 1.1rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: inherit;
}

.seo-related a:hover {
    border-color: rgba(37, 99, 235, 0.45);
}

.seo-related strong {
    display: block;
    margin-bottom: 0.35rem;
}

.seo-compare {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.75rem;
    font-size: 0.95rem;
}

.seo-compare th,
.seo-compare td {
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 0.85rem;
    text-align: left;
    vertical-align: top;
}

.seo-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.seo-plan-free {
    display: grid;
    grid-template-columns: minmax(140px, 0.9fr) minmax(110px, 0.7fr) minmax(220px, 1.5fr) auto;
    gap: 0.85rem 1.25rem;
    align-items: center;
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 1.2rem;
    padding: 1.1rem 1.25rem;
    margin: 1.5rem 0 0.5rem;
    background: rgba(37, 99, 235, 0.06);
}

.seo-plan-free h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
}

.seo-plan-free .price {
    margin: 0;
    font-size: 1.75rem;
}

.seo-plan-free ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-plan-free li {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.seo-plan-free .seo-plan-cta {
    display: inline-flex;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .seo-plan-free {
        grid-template-columns: 1fr 1fr;
    }

    .seo-plan-free .seo-plan-cta {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .seo-plan-free {
        grid-template-columns: 1fr;
    }
}

.seo-plan {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.1rem;
    padding: 1.2rem 1.15rem;
}

.seo-plan.is-featured {
    border-color: rgba(37, 99, 235, 0.5);
}

.seo-plan .price {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--bs-title-color, #eef2ff);
    line-height: 1.15;
    margin: 0.35rem 0 0.5rem;
}

.seo-page .mock-rail-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.seo-page .mock-rail-logo-img,
.seo-page .nk-menubar .mock-rail-logo-img {
    height: 3.25rem;
    width: auto;
    max-width: min(260px, 72vw);
    border-radius: 10px;
    object-fit: contain;
}

#site-chrome-header {
    min-height: 5.5rem;
}

.seo-page #menu-bar.mr-header-shell {
    background: transparent !important;
    padding: 1rem 0 0.625rem;
    overflow: visible;
    z-index: 100;
}

.seo-page #menu-bar .nk-menu,
.seo-page #menu-bar .nk-menubar-warper.mr-header-pill {
    overflow: visible;
}

.seo-page #menu-bar .nk-menu-background {
    display: none !important;
}

.seo-page #menu-bar .nk-menubar-warper.mr-header-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff !important;
    border-radius: 999px;
    padding: 0.5rem 0.625rem 0.5rem 1.125rem;
    box-shadow: 0 8px 32px rgba(11, 18, 32, 0.08);
    border: none !important;
    outline: none;
}

@media (min-width: 1200px) {
    .seo-page #menu-bar .nk-menu {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
}

.seo-page #menu-bar .nk-menu-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    background: transparent;
}

.seo-page #menu-bar:not(.mr-nav-v2) .nk-menu-link.mr-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155 !important;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: none !important;
    box-shadow: none !important;
}

.seo-page #menu-bar:not(.mr-nav-v2) .nk-menu-item.is-current .nk-menu-link.mr-nav-pill,
.seo-page #menu-bar:not(.mr-nav-v2) .nk-menu-link.mr-nav-pill:hover {
    background: #e2e8f0;
    color: #0b1220 !important;
}

.seo-page .mr-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.seo-page .mr-header-cta-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(90deg, #bfdbfe 0%, #60a5fa 100%);
    color: #0b1220;
}

.seo-page .mr-header-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 999px;
    background: #0b1220;
    color: #fff;
    text-decoration: none;
}

@media (min-width: 1200px) {
    .seo-page #menu-bar .nk-menu {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .seo-page #menu-bar .nk-menu-list {
        grid-column: 2;
    }

    .seo-page .mr-header-actions {
        grid-column: 3;
        justify-self: end;
    }
}

@media (max-width: 1199.98px) {
    .seo-page #menu-bar .nk-menubar-warper.mr-header-pill {
        flex-wrap: wrap;
        border-radius: 1.25rem;
    }

    .seo-page #menu-bar .nk-menu {
        order: 3;
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .seo-page #menu-bar .nk-menu-list,
    .seo-page #menu-bar .nk-menu-link.mr-nav-pill,
    .seo-page .mr-header-actions {
        width: 100%;
    }

    .seo-page #menu-bar .nk-menu-list {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   Tables for SEO pages. Structured data that AI systems extract
   readily — prefer these over prose for pricing and comparisons.
   ============================================================ */

.seo-table-wrap {
    margin: 1.5rem 0;
    overflow-x: auto;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.seo-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.seo-table th,
.seo-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--bs-title-color, #eef2ff);
    font-weight: 600;
    white-space: nowrap;
}

.seo-table tbody tr:last-child td {
    border-bottom: 0;
}

.seo-table td:first-child {
    color: var(--bs-title-color, #eef2ff);
    font-weight: 600;
    white-space: nowrap;
}

.seo-table .is-free {
    color: #34d399;
    font-weight: 600;
}

/* ============================================================
   HEADER v2 — kept at the END of this file on purpose.
   The legacy ".seo-page #menu-bar ..." rules above have the SAME
   specificity as these selectors, so whichever comes last wins.
   Moving this block up will silently revert the header on every
   inner page while leaving the homepage correct.
   ============================================================ */

/* ============================================================
   Modern header bar — frosted pill
   Scoped to .mr-nav-v2 so it outranks the older inline rules.
   ============================================================ */

#menu-bar.mr-nav-v2 .nk-menubar-warper.mr-header-pill {
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    background: #fff !important;
    box-shadow:
        0 10px 34px rgba(11, 18, 32, 0.14),
        0 0 0 1px rgba(11, 18, 32, 0.05);
    transition: box-shadow 0.25s ease;
}

#menu-bar.mr-nav-v2 .nk-menu-list {
    gap: 0.15rem;
}

/* Header layout fix.
   .nk-menu is display:grid, which placed the nav list and the CTA group in the
   same cell — they overlapped once a 7th nav item was added. Laying it out as a
   flex row pins the actions right and guarantees a real gap before them.
   Desktop only: below xl the burger takes over and the list stacks vertically. */
#menu-bar.mr-nav-v2 .mr-header-cta-primary {
    white-space: nowrap;
}

@media (min-width: 1200px) {
    #menu-bar.mr-nav-v2 .nk-menu {
        display: flex;
        align-items: center;
        gap: 1.1rem;
    }
    #menu-bar.mr-nav-v2 .nk-menu-list {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-right: 0;
    }
    #menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill {
        white-space: nowrap;
    }
    #menu-bar.mr-nav-v2 .mr-header-actions {
        flex: 0 0 auto;
    }
}

/* Nav links: no grey boxes, soft tint on hover, dot marks the current page */
#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill {
    position: relative;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 5px;
    /* !important because two legacy blocks (index.html's inline <style> and the
       .seo-page rules lower in this file) both target these pills and outrank
       this selector on inner pages. Without it the header hovers grey on inner
       pages and indigo on the homepage. */
    background: transparent !important;
    color: #475569 !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 0.18s ease, color 0.18s ease;
}

#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill .icon {
    font-size: 1rem;
    opacity: 0.65;
    transition: opacity 0.18s ease, color 0.18s ease;
}

#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill:hover {
    background: rgba(99, 102, 241, 0.09) !important;
    color: #1e1b4b !important;
}

#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill:hover .icon {
    opacity: 1;
    color: #6366f1;
}

#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill.is-active,
#menu-bar.mr-nav-v2 .nk-menu-item.is-active .mr-nav-pill,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-mega-trigger {
    background: #312e81 !important;
    color: #ffffff !important;
}

#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill.is-active .icon,
#menu-bar.mr-nav-v2 .nk-menu-item.is-active .mr-nav-pill .icon,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill .icon,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-mega-trigger .icon,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill em.icon,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill em.icon,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill span {
    opacity: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    background-clip: unset !important;
}

#menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill.is-active::after,
#menu-bar.mr-nav-v2 .nk-menu-item.is-active .mr-nav-pill::after,
#menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill::after {
    display: none;
}

/* The Features trigger is a <button> and deliberately does NOT carry the
   .nk-menu-link class: app.js's one-page nav helper does
   getAttribute("href").startsWith(...) on every .nk-menu-link, which throws on
   an element with no href and aborts the rest of the bundle (that is what left
   the homepage preloader stuck at 100%). Base pill layout is therefore
   restated here instead of inherited. */
#menu-bar.mr-nav-v2 .nk-menu-list .mr-mega-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    border: none !important;
    box-shadow: none !important;
}

/* Features trigger is a button — it navigates nowhere, it only opens the panel */
#menu-bar.mr-nav-v2 .mr-mega-trigger {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.mr-mega-chev {
    width: 0.72rem;
    height: 0.72rem;
    margin-left: 0.05rem;
    flex: none;
    transition: transform 0.22s ease;
}

.mr-mega-item:hover > .mr-mega-trigger .mr-mega-chev,
.mr-mega-item.is-open > .mr-mega-trigger .mr-mega-chev {
    transform: rotate(180deg);
}

/* CTA buttons */
#menu-bar.mr-nav-v2 .mr-header-cta-primary {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #6366f1 0%, #4f7ff5 55%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.32);
}

#menu-bar.mr-nav-v2 .mr-header-cta-primary:hover {
    color: #fff;
    box-shadow: 0 10px 26px rgba(79, 70, 229, 0.44);
}

#menu-bar.mr-nav-v2 .mr-header-cta-arrow {
    width: 2.45rem;
    height: 2.45rem;
    background: #0f172a;
}

#menu-bar.mr-nav-v2 .mr-header-cta-arrow:hover {
    background: #4f46e5;
}

/* ============================================================
   Features mega panel — display only, nothing here is a link
   ============================================================ */

.mr-mega-item {
    position: relative;
    z-index: 20;
}

.mr-mega-item:hover,
.mr-mega-item.is-open,
.mr-mega-item:focus-within {
    z-index: 90;
}

.mr-mega {
    display: none;
    position: absolute;
    top: calc(100% - 0.2rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(860px, calc(100vw - 2rem));
    padding: 1rem 1.15rem 1.15rem;
    border-radius: 0 0 1.5rem 1.5rem;
    background: transparent;
    z-index: 80;
}

/* Panel sits under a transparent bridge so the cursor never leaves the trigger */
.mr-mega::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 1.4rem;
    box-shadow:
        0 24px 60px rgba(11, 18, 32, 0.18),
        0 0 0 1px rgba(11, 18, 32, 0.06);
    z-index: -1;
}

.mr-mega-item:hover > .mr-mega,
.mr-mega-item.is-open > .mr-mega,
.mr-mega-item:focus-within > .mr-mega {
    display: block;
    animation: mrMegaIn 0.18s ease both;
}

@keyframes mrMegaIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mr-mega-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.35rem 0.7rem;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 0.7rem;
}

.mr-mega-head strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0b1220;
    letter-spacing: -0.01em;
}

.mr-mega-head span {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366f1;
    white-space: nowrap;
}

.mr-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
}

/* Cards are plain divs — informational, never clickable */
.mr-mega-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem;
    border-radius: 0.85rem;
    cursor: default;
    transition: background 0.16s ease;
}

.mr-mega-card:hover {
    background: #f6f7ff;
}

.mr-mega-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    flex: none;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(37, 99, 235, 0.1));
    color: #4f46e5;
}

.mr-mega-ico svg {
    width: 1rem;
    height: 1rem;
}

.mr-mega-copy {
    min-width: 0;
}

.mr-mega-copy strong {
    display: block;
    font-size: 0.83rem;
    font-weight: 700;
    color: #0b1220;
    line-height: 1.35;
}

.mr-mega-copy span {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.735rem;
    font-weight: 500;
    line-height: 1.45;
    color: #64748b;
}

.mr-mega-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(37, 99, 235, 0.06));
}

.mr-mega-foot span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.745rem;
    font-weight: 600;
    color: #334155;
}

.mr-mega-foot svg {
    width: 0.82rem;
    height: 0.82rem;
    color: #4f46e5;
    flex: none;
}

@media (max-width: 1199.98px) {
    #menu-bar.mr-nav-v2 .nk-menubar-warper.mr-header-pill {
        background: #fff !important;
    }

    /* Collapsed: collapse height without display:none (display:none broke open state) */
    #menu-bar.mr-nav-v2:not(.menu-shown) .nk-menu {
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mr-mega {
        position: static;
        transform: none;
        width: 100%;
        max-height: min(46vh, 340px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.25rem 0 0.35rem;
        background: transparent;
        display: none;
        border-radius: 0;
        animation: none;
        border-top: 1px solid #eef2f7;
        margin-top: 0.15rem;
        -webkit-overflow-scrolling: touch;
    }

    .mr-mega::before {
        display: none;
    }

    .mr-mega-item.is-open > .mr-mega,
    .mr-mega-item:focus-within > .mr-mega {
        display: block;
        animation: none;
    }

    /* hover must not open the panel on touch */
    .mr-mega-item:hover > .mr-mega {
        display: none;
    }

    .mr-mega-item.is-open > .mr-mega {
        display: block;
    }

    .mr-mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .mr-mega-head {
        padding-top: 0.1rem;
        padding-bottom: 0.45rem;
        margin-bottom: 0.45rem;
    }

    .mr-mega-head span {
        display: none;
    }

    .mr-mega-card {
        padding: 0.45rem 0.4rem;
    }

    .mr-mega-copy span {
        font-size: 0.68rem;
        line-height: 1.35;
    }

    .mr-mega-foot {
        margin-top: 0.45rem;
        padding: 0.45rem 0.55rem;
        gap: 0.25rem 0.5rem;
    }

    .mr-mega-foot span {
        font-size: 0.68rem;
    }

    .mr-mega-card:hover {
        background: transparent;
    }
}

/* Mobile header — inner pages only had these on index.html inline before */
@media (max-width: 1199.98px) {
    #menu-bar.mr-nav-v2 .nk-menu-toggle {
        display: flex !important;
        align-items: center;
        margin-left: auto;
    }

    #menu-bar.mr-nav-v2 .nk-menu-toggle .js-menu-toggle {
        width: 2.625rem;
        height: 2.625rem;
        background: #0b1220 !important;
        border: 1px solid rgba(11, 18, 32, 0.12) !important;
        color: #fff !important;
        box-shadow: 0 4px 14px rgba(11, 18, 32, 0.22) !important;
    }

    #menu-bar.mr-nav-v2 .nk-menu-toggle .js-menu-toggle .icon,
    #menu-bar.mr-nav-v2 .nk-menu-toggle .js-menu-toggle em.icon {
        color: #fff !important;
    }

    #menu-bar.mr-nav-v2 .nk-menu-toggle .js-menu-toggle.active,
    #menu-bar.mr-nav-v2 .nk-menu-toggle .js-menu-toggle:hover {
        background: #312e81 !important;
        border-color: #312e81 !important;
        color: #fff !important;
    }

    #menu-bar.mr-nav-v2 .nk-menubar-warper.mr-header-pill {
        flex-wrap: wrap;
        align-items: flex-start;
        border-radius: 1.25rem;
        padding: 0.65rem 0.85rem;
        overflow: visible;
    }

    #menu-bar.mr-nav-v2.menu-shown .nk-menubar-warper.mr-header-pill {
        background: #ffffff !important;
        max-height: calc(100dvh - 1.25rem);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #menu-bar.mr-nav-v2 .nk-menu {
        order: 3;
        flex: 0 0 auto !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    #menu-bar.mr-nav-v2.menu-shown .nk-menu {
        display: flex !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #menu-bar.mr-nav-v2.menu-shown .nk-menu-overlay.active {
        z-index: 1;
    }

    #menu-bar.mr-nav-v2 .nk-menu-list {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        flex-grow: 0 !important;
        border: none !important;
        background: #ffffff !important;
        padding: 0.35rem 0 0;
        gap: 0.15rem;
    }

    #menu-bar.mr-nav-v2 .nk-menu-link.mr-nav-pill,
    #menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill,
    #menu-bar.mr-nav-v2 .mr-mega-trigger {
        width: 100%;
        justify-content: flex-start;
        background: transparent !important;
        color: #475569 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.48rem 0.7rem !important;
        font-size: 0.875rem !important;
        line-height: 1.35 !important;
        min-height: 0 !important;
    }

    #menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill .icon,
    #menu-bar.mr-nav-v2 .mr-mega-trigger .icon,
    #menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill em.icon,
    #menu-bar.mr-nav-v2 .mr-mega-trigger em.icon {
        color: #64748b !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #64748b !important;
    }

    #menu-bar.mr-nav-v2 .nk-menu-list .mr-nav-pill span,
    #menu-bar.mr-nav-v2 .mr-mega-trigger span {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }

    #menu-bar.mr-nav-v2 .mr-header-actions {
        margin-left: 0;
        width: 100%;
        flex-shrink: 0;
        justify-content: stretch;
        padding-top: 0.55rem;
        border-top: 1px solid rgba(11, 18, 32, 0.08);
        margin-top: 0.35rem;
    }

    #menu-bar.mr-nav-v2 .mr-header-cta-primary {
        flex: 1;
        text-align: center;
    }

    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill,
    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-mega-trigger,
    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill {
        background: #312e81 !important;
        color: #ffffff !important;
    }

    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill .icon,
    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-mega-trigger .icon,
    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill em.icon,
    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill em.icon,
    #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill span {
        color: #ffffff !important;
        opacity: 1 !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* Final override: legacy .seo-page rules must not win over header v2 */
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-mega-trigger {
    background: #312e81 !important;
    color: #ffffff !important;
}

.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill .icon,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill em.icon,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill .icon,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill em.icon,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-mega-trigger .icon,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .nk-menu-link.mr-nav-pill span,
.seo-page #menu-bar.mr-nav-v2 .nk-menu-item.is-current .mr-nav-pill span {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

/* ============================================================
   Global footer v2 — injected via site-chrome.js on every page
   ============================================================ */

.mr-footer-v2 {
    position: relative;
    margin-top: auto;
    background: #0b1220;
    color: #94a3b8;
    overflow: hidden;
}

.mr-footer-glow {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 12% 0%, rgba(99, 102, 241, 0.22), transparent 58%),
        radial-gradient(ellipse 55% 45% at 88% 8%, rgba(37, 99, 235, 0.16), transparent 52%);
}

.mr-footer-main {
    position: relative;
    z-index: 1;
    padding: 3.5rem 0 2.75rem;
}

.mr-footer-grid {
    align-items: flex-start;
}

.mr-footer-logo {
    display: inline-block;
    margin-bottom: 1.15rem;
}

.mr-footer-logo .mock-rail-logo-img {
    height: 3.25rem;
    width: auto;
    max-width: min(260px, 72vw);
    border-radius: 10px;
    object-fit: contain;
}

.mr-footer-tagline {
    margin: 0 0 1.35rem;
    max-width: 26rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #94a3b8;
}

.mr-footer-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.mr-footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 1.15rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1 0%, #4f7ff5 55%, #2563eb 100%);
    color: #fff !important;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mr-footer-cta:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.42);
}

.mr-footer-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.58rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e2e8f0 !important;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mr-footer-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.55);
    color: #fff !important;
}

.mr-footer-domain {
    display: inline-block;
    color: #818cf8 !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.mr-footer-domain:hover {
    color: #a5b4fc !important;
}

.mr-footer-heading {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f1f5f9;
}

.mr-footer-heading--sub {
    margin-top: 1.35rem;
}

.mr-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.mr-footer-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.mr-footer-link {
    color: #94a3b8 !important;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s ease;
}

.mr-footer-link:hover {
    color: #f8fafc !important;
}

.mr-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.mr-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.mr-footer-ico {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.12rem;
    color: #6366f1;
}

.mr-footer-ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mr-footer-contact a {
    color: #cbd5e1 !important;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.18s ease;
}

.mr-footer-contact a:hover {
    color: #fff !important;
}

.mr-footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    padding: 1.15rem 0 calc(1.35rem + env(safe-area-inset-bottom, 0px));
}

.mr-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
}

.mr-footer-copy {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.mr-footer-bottom-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.15rem;
}

.mr-footer-bottom-links a {
    color: #94a3b8 !important;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s ease;
}

.mr-footer-bottom-links a:hover {
    color: #f1f5f9 !important;
}

/* Light pages (blog/about) sit on pale bg — footer stays dark for contrast */
.blog-page .mr-footer-v2 {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

@media (max-width: 767.98px) {
    .mr-footer-main {
        padding: 2.75rem 0 2.25rem;
    }

    .mr-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Scrollbars — light/white for the dark theme
   The base theme ships black scrollbar thumbs (rgba(0,0,0,.3)) which are
   invisible on this dark background. These rules make both the page
   scrollbar and every inner horizontal scroller (tables, prompt blocks)
   clearly visible.
   ========================================================================== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.08);
}

/* WebKit / Blink — page scrollbar */
html::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
}

html::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

html::-webkit-scrollbar-thumb,
html:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.55);
    border-radius: 1.25rem;
    border: 3px solid transparent;
    background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

/* Inner horizontal scrollers: comparison tables, prompt blocks, code, any
   element opted in with .has-x-scroll */
.blog-table-wrap,
.blog-prompt pre,
.seo-table-wrap,
.has-x-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.08);
}

.blog-table-wrap::-webkit-scrollbar,
.blog-prompt pre::-webkit-scrollbar,
.seo-table-wrap::-webkit-scrollbar,
.has-x-scroll::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

.blog-table-wrap::-webkit-scrollbar-track,
.blog-prompt pre::-webkit-scrollbar-track,
.seo-table-wrap::-webkit-scrollbar-track,
.has-x-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
}

.blog-table-wrap::-webkit-scrollbar-thumb,
.blog-prompt pre::-webkit-scrollbar-thumb,
.seo-table-wrap::-webkit-scrollbar-thumb,
.has-x-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.55);
    border-radius: 1.25rem;
}

.blog-table-wrap::-webkit-scrollbar-thumb:hover,
.blog-prompt pre::-webkit-scrollbar-thumb:hover,
.seo-table-wrap::-webkit-scrollbar-thumb:hover,
.has-x-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.85);
}