/* ─────────────────────────────────────────────────────────────────────────
   Redesign design tokens — shared, non-scoped utilities for the Shared/Design
   primitives. Tints are translucent so they read on light AND dark surfaces;
   the foreground pulls from MudBlazor palette vars so it adapts to dark mode.
   ───────────────────────────────────────────────────────────────────────── */

.msp-tint-blue {
    --msp-tint-bg: rgba(94, 134, 190, 0.14);
    --msp-tint-fg: var(--mud-palette-primary);
}

.msp-tint-sage {
    --msp-tint-bg: rgba(79, 157, 126, 0.16);
    --msp-tint-fg: var(--mud-palette-success);
}

.msp-tint-gold {
    --msp-tint-bg: rgba(214, 154, 76, 0.18);
    --msp-tint-fg: var(--mud-palette-warning);
}

.msp-tint-clay {
    --msp-tint-bg: rgba(192, 86, 75, 0.14);
    --msp-tint-fg: var(--mud-palette-error);
}

.msp-tint-neutral {
    --msp-tint-bg: rgba(90, 102, 117, 0.10);
    --msp-tint-fg: var(--mud-palette-text-secondary);
}

/* ─── App bar alignment with the rail + content ───────────────────────────
   The menu button sits centered over the 80px icon rail; the brand starts at
   the content's left edge (rail width + the MudMainContent pa-4 padding). Keep
   the rail width here in sync with MudDrawer Width in MainLayout.razor. */
.msp-appbar .mud-toolbar {
    padding-left: 0 !important;
}

.msp-appbar-rail {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.msp-appbar-brand {
    padding-left: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Shared design-system utilities — reusable patterns lifted out of per-page
   scoped CSS so screens share one source of truth. Plain-div patterns only;
   component-internal (::deep) tweaks stay in each component's scoped file, and
   pills use the StatusPill primitive (.msp-pill + .msp-tint-*).
   Names avoid colliding with the primitives' scoped classes (StatTile uses
   .msp-stat-tile; NavyHeroBand uses .msp-hero).
   ───────────────────────────────────────────────────────────────────────── */

/* Surface card (override radius/padding per-use when needed) */
.msp-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(16, 32, 55, 0.05);
}

/* Uppercase section label */
.msp-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 13px;
}

/* Empty / no-data state */
.msp-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
}

/* Club / segment selector pills */
.msp-club-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.msp-club-pill {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    padding: 9px 17px;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 32, 55, 0.05);
}

.msp-club-pill:hover {
    color: var(--mud-palette-text-primary);
}

.msp-club-pill.active {
    color: #fff;
    background: #243B59;
    border-color: #243B59;
}

/* Navy headline stat band (Avg carry / total / etc.) */
.msp-statband {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 800px) {
    .msp-statband {
        grid-template-columns: repeat(2, 1fr);
    }
}

.msp-statband-tile {
    background: #243B59;
    border-radius: 14px;
    padding: 20px 22px;
}

.msp-statband-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9fb0c4;
    margin-bottom: 8px;
}

.msp-statband-value {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.msp-statband-unit {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #9fb0c4;
}

/* Navy gradient hero container (inner layout is per-page) */
.msp-hero-navy {
    background: linear-gradient(120deg, #243B59, #34547D);
    border-radius: 18px;
    padding: 30px 34px;
    box-shadow: 0 16px 36px -22px rgba(36, 59, 89, 0.8);
}

/* Breadcrumb trail */
.msp-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.msp-crumbs a {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-weight: 600;
}

.msp-crumbs a:hover {
    color: var(--mud-palette-primary);
}

.msp-crumbs .current {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────
   Marketing feature-page template — shared by all 8 /features/* pages so they
   don't each carry their own copy of this layout CSS. Full-bleed sections with
   inner max-width containers (the marketing body is full width). Prefixed
   .msp-fp-* so it never collides with the app or the home page's .msp-mkt-*.
   ───────────────────────────────────────────────────────────────────────── */

/* Buttons */
.msp-fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 24px;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.msp-fp-btn.primary {
    background: var(--mud-palette-primary);
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(94, 134, 190, 0.9);
}

.msp-fp-btn.primary:hover {
    filter: brightness(0.96);
}

.msp-fp-btn.ghost {
    color: var(--mud-palette-text-primary);
    border: 1.5px solid var(--mud-palette-lines-default);
    font-weight: 600;
}

.msp-fp-btn.ghost:hover {
    border-color: var(--mud-palette-primary);
}

.msp-fp-btn.white {
    background: #fff;
    color: #243B59;
}

.msp-fp-btn.white:hover {
    filter: brightness(0.95);
}

.msp-fp-btn.ghost-light {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.msp-fp-btn.ghost-light:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

/* Sections */
.msp-fp-section {
    padding: 58px 24px;
}

.msp-fp-section.alt {
    background: #F4F7FB;
}

.msp-fp-section.navy {
    background: #1A2A40;
}

.msp-fp-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.msp-fp-h2 {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
    text-align: center;
    margin: 0 0 12px;
}

.msp-fp-section.navy .msp-fp-h2 {
    color: #fff;
}

.msp-fp-section-sub {
    font-size: 15.5px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    line-height: 1.5;
    max-width: 680px;
    margin: 0 auto 38px;
}

.msp-fp-section.navy .msp-fp-section-sub {
    color: #9fb0c4;
}

/* Breadcrumb spacing */
.msp-fp-crumbs {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 24px 0;
}

/* Hero — navy band (matches the home hero), split copy + floating visual */
.msp-fp-hero {
    background: linear-gradient(165deg, #1A2A40 0%, #26405F 60%, #33527A 100%);
    padding: 52px 24px 60px;
    overflow: hidden;
}

/* Centered hero variant (pages with no hero art: About, Contact, Pricing, Blog).
   Centers the whole block and overrides the lead's left-column margins. */
.msp-fp-hero-center {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.msp-fp-hero-center .msp-fp-badge {
    margin-left: auto;
    margin-right: auto;
}

.msp-fp-hero-center .msp-fp-hero-lead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.msp-fp-hero-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.msp-fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #cdddf0;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.msp-fp-badge .mud-icon-root {
    color: #8FB4E0;
}

.msp-fp-h1 {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 14px;
}

.msp-fp-subtitle {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    color: #8FB4E0;
    margin: 0 0 18px;
}

.msp-fp-hero-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #c3d0e0;
    max-width: 520px;
    margin: 0 0 26px;
}

.msp-fp-lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 26px;
}

.msp-fp-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.msp-fp-hero-art {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating hero mockup — shared building blocks composed per feature page. */
.msp-fp-artcard {
    width: 100%;
    max-width: 390px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 30px 60px -30px rgba(16, 32, 55, 0.6);
    border: 1px solid #EDF1F6;
    transform: rotate(1deg);
}

.msp-fp-art-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #EDF1F6;
}

.msp-fp-art-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(94, 134, 190, 0.14);
    color: var(--mud-palette-primary);
}

.msp-fp-art-title {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: #1A2430;
}

.msp-fp-art-sub {
    font-size: 11px;
    color: #8a96a3;
    margin-top: 1px;
}

.msp-fp-art-rows {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.msp-fp-art-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msp-fp-art-row .mud-icon-root {
    color: var(--mud-palette-primary);
    flex: none;
}

.msp-fp-art-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #2c3a4a;
}

.msp-fp-art-val {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #1A2430;
    flex: none;
}

.msp-fp-art-bar {
    height: 6px;
    border-radius: 999px;
    background: #EEF2F7;
    overflow: hidden;
    flex: 1;
}

.msp-fp-art-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--mud-palette-primary);
}

.msp-fp-art-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(79, 157, 126, 0.16);
    color: var(--mud-palette-success);
}

.msp-fp-art-text {
    font-size: 12.5px;
    color: #5a6675;
    line-height: 1.55;
    margin: 0;
}

.msp-fp-art-statgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 9px;
}

.msp-fp-art-stat {
    background: #F4F7FB;
    border-radius: 11px;
    padding: 11px;
    text-align: center;
}

.msp-fp-art-stat-val {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #1A2430;
}

.msp-fp-art-stat-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a96a3;
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .msp-fp-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Grids */
.msp-fp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.msp-fp-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 860px) {
    .msp-fp-grid3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .msp-fp-grid2,
    .msp-fp-grid3 {
        grid-template-columns: 1fr;
    }
}

/* Why cards */
.msp-fp-why {
    background: var(--mud-palette-surface);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 1px 3px rgba(16, 32, 55, 0.07);
}

.msp-fp-why-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.msp-fp-why-head .mud-icon-root {
    color: var(--mud-palette-primary);
    flex: none;
}

.msp-fp-why-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--mud-palette-text-primary);
}

.msp-fp-why-body {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* Bulleted list inside a card (shared by feature pages). */
.msp-fp-list {
    margin: 12px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.msp-fp-list li {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

.msp-fp-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 14px 0 4px;
}

/* Highlighted (premium) card accent. */
.msp-fp-premium-card {
    border: 1.5px solid var(--mud-palette-primary);
}

/* Four-up responsive card grid. */
.msp-fp-grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 960px) {
    .msp-fp-grid4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .msp-fp-grid4 { grid-template-columns: 1fr; }
}

/* Comparison table (pricing). */
.msp-fp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

.msp-fp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Hanken Grotesk', sans-serif;
    background: var(--mud-palette-surface);
    min-width: 560px;
}

.msp-fp-table th,
.msp-fp-table td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    vertical-align: top;
}

.msp-fp-table thead th {
    font-weight: 700;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    background: #F4F7FB;
}

.msp-fp-table tbody tr:last-child td { border-bottom: none; }

.msp-fp-table .msp-fp-table-feat {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.msp-fp-table .msp-fp-table-c { text-align: center; }

.msp-fp-table .msp-fp-table-prem { background: #F0F4FF; }

.msp-fp-table .msp-fp-table-cap {
    display: block;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.msp-fp-table .mud-icon-root { vertical-align: middle; }

.msp-fp-table tr.msp-fp-table-hl { background: #F0F4FF; }

.msp-fp-table tr.msp-fp-table-hl td { font-weight: 600; color: var(--mud-palette-text-primary); }

/* ===================================================================
   Auth pages (login / register / password reset) — minimal focused
   chrome: logo header, centered branded card, slim footer.
   =================================================================== */
.msp-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #F4F7FB 0%, #E8EFF7 100%);
}

.msp-auth-top {
    padding: 18px 24px;
    display: flex;
    align-items: center;
}

.msp-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}

.msp-auth-brand img { height: 32px; }

.msp-auth-wordmark {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #1A2A40;
    letter-spacing: -0.01em;
}

.msp-auth-wordmark .play { color: #2D70B8; }

.msp-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 48px;
}

.msp-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(26, 42, 64, 0.12);
    padding: 36px 34px 32px;
}

/* Tighten the identity pages' default heading inside the card. */
.msp-auth-card .mud-typography-h3 {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    margin-bottom: 6px;
    color: var(--mud-palette-text-primary);
}

.msp-auth-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px 16px 28px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.msp-auth-foot a {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.msp-auth-foot a:hover { color: #2D70B8; }

/* Optional intro line under the card heading. */
.msp-auth-sub {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 22px;
}

/* Secondary links block (forgot password / register / resend). */
.msp-auth-links {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 13.5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Topic items */
.msp-fp-topic {
    padding: 4px 0;
}

.msp-fp-topic-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.msp-fp-topic-head .mud-icon-root {
    color: var(--mud-palette-primary);
    flex: none;
}

.msp-fp-topic-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--mud-palette-text-primary);
}

.msp-fp-topic-body {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 0;
    padding-left: 27px;
}

/* Connected (navy) cards */
.msp-fp-connected {
    background: #17263A;
    border: 1px solid #243349;
    border-radius: 14px;
    padding: 22px;
}

.msp-fp-connected-title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    color: #fff;
    margin-bottom: 8px;
}

.msp-fp-connected-body {
    font-size: 13.5px;
    color: #9fb0c4;
    line-height: 1.55;
    margin: 0;
}

.msp-fp-connected-body a {
    color: #8FB4E0;
    font-weight: 600;
    text-decoration: none;
}

.msp-fp-connected-body a:hover {
    text-decoration: underline;
}

/* Use cases (split: heading + cards) */
.msp-fp-usecases {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 860px) {
    .msp-fp-usecases {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.msp-fp-usecases-head .msp-fp-h2 {
    text-align: left;
    margin-bottom: 14px;
}

.msp-fp-usecase-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msp-fp-usecase {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #F4F7FB;
    border-radius: 13px;
    padding: 16px 18px;
}

.msp-fp-usecase-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(94, 134, 190, 0.14);
    color: var(--mud-palette-primary);
}

.msp-fp-usecase-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 3px;
}

.msp-fp-usecase-quote {
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
    font-style: italic;
    margin: 0;
}

/* FAQ accordion (MudExpansionPanels) */
.msp-fp-faq {
    max-width: 820px;
    margin: 0 auto;
}

/* Give the answer body breathing room inside each panel. */
.msp-fp-faq .mud-expand-panel-content,
.msp-fp-faq .mud-expansion-panel-content {
    padding: 0 22px 20px;
}

/* CTA band */
.msp-fp-cta {
    background: linear-gradient(135deg, #243B59, #3E6FA0);
    padding: 64px 24px;
    text-align: center;
}

.msp-fp-cta-h2 {
    font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
    font-weight: 800;
    font-size: 31px;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 14px;
}

.msp-fp-cta-sub {
    font-size: 16px;
    line-height: 1.55;
    color: #c8d6e6;
    margin: 0 auto 28px;
    max-width: 600px;
}

.msp-fp-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}