/* Application layout only. Blueprint owns component styling and theme tokens. */
html, body {
    margin: 0;
    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
    background: var(--background);
    color: var(--foreground);
}

/* Both experiences share the same theme-aware grid, behind content and outside interaction. */
.background-grid {
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--foreground) 1px, transparent 1px),
        linear-gradient(to bottom, var(--foreground) 1px, transparent 1px);
    background-size: 4rem 4rem;
    opacity: .045;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
/* Let wide tables scroll inside their own containers instead of widening the entire flex item. */
.workspace-shell { position: relative; isolation: isolate; min-width: 0; }
/* Clip viewport-fixed decorations below the header and inside the sidebar inset.
   Overlay providers remain outside this wrapper so menus and dialogs can escape it. */
.workspace-body { position: relative; isolation: isolate; flex: 1; min-width: 0; clip-path: inset(0); }
/* A viewport-sized layer stays still while document or sidebar-inset content scrolls over it. */
.workspace-grid { position: fixed; inset: 0; }
@media (forced-colors: active) {
    .background-grid { display: none; }
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--background);
}

.app-header-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-name {
    font-weight: 650;
    letter-spacing: -0.025em;
}

.page-content {
    width: 100%;
    max-width: 72rem;
    padding: clamp(1rem, 4vw, 3rem);
    margin-inline: auto;
}

/* Workspace sizing follows authentication, independently of the decorative background layer. */
.authenticated-layout > .workspace-body > .page-content { max-width: none; }

.page-stack {
    display: grid;
    gap: 1.5rem;
}

.page-heading h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.page-heading p {
    color: var(--muted-foreground);
}

h1:focus {
    outline: none;
}

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10000;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0;
    z-index: 10000;
    padding: 1rem 3.5rem 1rem 1.5rem;
    background: var(--background);
    color: var(--foreground);
    border-top: 2px solid var(--destructive);
}

#blazor-error-ui .reload {
    margin-inline-start: 0.75rem;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    padding: 0.25rem;
    cursor: pointer;
}

.blazor-error-boundary {
    padding: 1rem;
    border: 1px solid var(--destructive);
    border-radius: var(--radius);
}

.blazor-error-boundary::after {
    content: "Something went wrong. Please reload the page.";
}

.action-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.form-stack { display: grid; gap: 1rem; }
.form-stack label { display: block; margin-bottom: 0.5rem; }
/* Every entity collection uses the same minimum card width and fills as many columns as the workspace allows. */
.tenant-grid, .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; align-items: stretch; }
.tenant-card-link { display: flex; min-width: 0; color: inherit; text-decoration: none; border-radius: var(--radius); }
.tenant-card { width: 100%; min-width: 0; min-height: 19rem; overflow-wrap: anywhere; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.tenant-card-link:hover .tenant-card,
.tenant-card-link:focus-visible .tenant-card { background: var(--accent); border-color: var(--muted-foreground); box-shadow: 0 6px 18px -12px var(--foreground); }
.tenant-card-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.tenant-card-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }
.card-icon-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-icon-row .tenant-card-icon { margin-bottom: 0; }
.billing-indicator { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted-foreground); font-size: .875rem; }
.billing-indicator svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.tenant-project-count, .tenant-overview-role, .entity-role { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--muted-foreground); font-size: .875rem; }
.tenant-project-count svg, .tenant-overview-role svg, .entity-role svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Carry parent tracks through the link, card, header, and metadata wrappers. */
.entity-card-link, .entity-card, .entity-card-header, .entity-card-content {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
}
/* Negative end lines span the variant's full explicit subgrid, regardless of its row count. */
.entity-card-link::before, .entity-card { grid-area: 1 / 1 / -1 / 2; }
/* A spanning item contributes the minimum to shared tracks; a subgrid container's own minimum does not. */
.entity-card-link::before { content: ""; min-height: 19rem; pointer-events: none; }
.entity-card { min-height: 0; }
.project-summary-header > *, .service-summary-header > *, .instance-summary-header > *,
.entity-card-content > * { align-self: start; }
.entity-card-content > :not(:first-child) { margin-top: .75rem; }

.tenant-overview-header, .project-summary-header, .service-summary-header { grid-row: span 3; }

/* Tenants: icon, name, role, and project count. */
.tenant-list .tenant-grid { grid-auto-rows: max-content max-content max-content auto; }
.tenant-overview-link { grid-row: span 4; }
.tenant-overview-name, .tenant-overview-role { align-self: start; }
.tenant-overview-role { margin-top: .375rem; }
.tenant-overview-content { align-self: start; }
.tenant-list .tenant-grid > .create-card { grid-row: span 4; }

/* Share icon, title, description, region, service count, and optional tenant tracks across each project row. */
.project-grid { grid-auto-rows: max-content max-content max-content max-content max-content auto; }
.project-summary-link { grid-row: span 6; }
.project-summary-content { grid-row: span 2; }
.project-summary-footer { align-self: start; }
.project-grid > .create-card { grid-row: span 6; }

/* Keep each service's instance and resource rows aligned even when names and descriptions wrap. */
.service-summary-grid { grid-auto-rows: max-content max-content max-content max-content max-content max-content max-content auto; }
.service-summary-link { grid-row: span 8; }
.service-summary-content { grid-row: span 5; }
.service-resources-empty { grid-row: span 3; }

/* Instances share aligned region, per-instance compute, shared disk, and telemetry-status tracks. */
.instance-summary-grid { grid-auto-rows: max-content max-content max-content max-content max-content max-content auto; }
.instance-summary-link { grid-row: span 7; }
.instance-summary-header { grid-row: span 2; }
.instance-summary-content { grid-row: span 5; }
.instance-resources-empty { grid-row: span 2; }

.create-card { display: flex; min-width: 0; min-height: 19rem; }
.create-card-trigger { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; width: 100%; height: auto; padding: 1.5rem; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.create-card-trigger .tenant-card-icon { flex-shrink: 0; }
.create-card-title { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.025em; }
.create-card-description { margin-top: .375rem; color: var(--muted-foreground); font-size: .875rem; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .tenant-card { transition: none; } }
.validation-message { color: var(--destructive); font-size: 0.875rem; margin-top: 0.25rem; }

.entity-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.entity-section-heading { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.entity-metadata { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.entity-identifier { min-width: 0; overflow-wrap: anywhere; }
.project-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.billing-coverage-note { margin: 0; color: var(--muted-foreground); font-size: .875rem; }
.api-token-list { display: grid; gap: 1rem; }
.api-token-row { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.api-token-row h3 { margin: 0 0 .5rem; font-weight: 600; }
.api-token-row p { margin: .25rem 0; color: var(--muted-foreground); font-size: .875rem; }
.api-token-secret { display: block; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); overflow-wrap: anywhere; user-select: all; }

/* Keep the admission control and its label together without relying on library internals. */
.region-admission { display: flex; align-items: center; gap: 0.75rem; }

/* Searchable choices fill the form while comparison details remain scrollable on small screens. */
.selection-combobox { width: 100%; min-width: 0; }
.field-label-help { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.form-stack .field-label-help label { margin-bottom: 0; }
.region-comparison-dialog { width: calc(100vw - 2rem); max-width: 64rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.region-comparison-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); }
.region-comparison-scroll:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.region-comparison-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: .875rem; }
.region-comparison-table th, .region-comparison-table td { padding: .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.region-comparison-table th { background: var(--muted); font-weight: 600; }
.region-comparison-code { display: block; margin-top: .25rem; color: var(--muted-foreground); overflow-wrap: anywhere; }

/* Price forms keep numeric units explicit and remain usable on narrow screens. */
.pricing-dialog { max-height: 85vh; overflow-y: auto; }
.pricing-editor-row { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.pricing-rates { padding-inline-start: 1.25rem; }

.resource-summary { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: .5rem 1rem; }
.resource-summary dt { font-weight: 600; }
.resource-summary dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .resource-summary { grid-template-columns: 1fr; } }

/* Fieldsets group editable inputs without adding browser-default borders or minimum width. */
.entity-editor-fields { border: 0; padding: 0; margin: 0; min-width: 0; }

/* The focus-return anchor must not change toolbar spacing or create another tab stop. */
.entity-dialog-trigger { display: contents; }

/* Capacity meters are non-interactive, so the whole service card remains one accessible link. */
.service-usage-grid { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: .75rem; min-width: 0; width: 100%; }
.resource-usage-row { display: grid; align-content: start; gap: .4rem; min-width: 0; }
/* Keep refreshes on one line; names yield space to readings without changing row height. */
.resource-usage-label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: nowrap; gap: .75rem; font-size: .875rem; }
.resource-usage-name { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource-usage-value { flex: 0 1 auto; min-width: 0; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource-usage-track { height: .375rem; width: 100%; border-radius: 999px; overflow: hidden; background: var(--muted); }
.resource-usage-fill { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.resource-usage-high .resource-usage-fill { background: var(--destructive); }
.resource-usage-muted .resource-usage-fill { background: var(--muted-foreground); }
.resource-usage-note, .service-usage-status { color: var(--muted-foreground); font-size: .75rem; }
.service-usage-status { display: flex; flex-direction: column; gap: .25rem; }
.service-usage-status time { font-variant-numeric: tabular-nums; }

/* Historical plots keep layout and keyboard inspection stable while observations refresh. */
.resource-history { width: 100%; min-width: 0; }
.resource-history-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.resource-history-chart { min-width: 0; }
.resource-history-chart h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.history-scope { color: var(--muted-foreground); font-size: .75rem; margin-top: .375rem; }
.resource-history-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.resource-history-header h2 { font-size: 1.5rem; font-weight: 600; }
.resource-history-heading { display: grid; gap: .375rem; }
.resource-history-controls { display: flex; flex-wrap: wrap; gap: .75rem; min-width: 0; }
.resource-history-controls > div { display: grid; gap: .375rem; }
.history-period-picker { width: 15rem; max-width: 100%; }
.history-statistic-picker { width: 10rem; max-width: 100%; }
.resource-history-status { color: var(--muted-foreground); font-size: .75rem; margin-top: 1rem; }
.history-colour-key { width: .65rem; height: .65rem; border-radius: 50%; }
.history-plot { position: relative; width: 100%; min-width: 0; }
.history-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.history-grid-line { stroke: var(--border); }
.history-axis-label { fill: var(--muted-foreground); font-size: 10px; }
.history-series { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.history-series.desired, .history-series.limit { stroke-dasharray: 8 5; stroke-width: 2; }
.history-capacity-area { fill-opacity: .14; stroke: none; }
.history-tooltip-targets { position: absolute; inset: 0; pointer-events: none; }
.history-trigger > span { position: absolute; display: block; padding: 0; min-width: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; cursor: crosshair; pointer-events: auto; }
.history-trigger > span:hover, .history-trigger > span:active { background: transparent; }
.history-trigger > span:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.history-tooltip-guide { stroke: var(--muted-foreground); stroke-width: 1; opacity: .5; }
.history-tooltip-dot { fill: var(--background); stroke-width: 2; }
.history-tooltip { max-width: calc(100vw - 2rem); max-height: min(24rem, 60vh); overflow: auto; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
.history-tooltip-heading { font-weight: 600; margin-bottom: .25rem; }
.history-tooltip-description { color: var(--muted-foreground); font-size: .75rem; margin-bottom: .5rem; }
.history-tooltip-table { border-collapse: collapse; font-size: .75rem; white-space: nowrap; }
.history-tooltip-table th, .history-tooltip-table td { padding: .25rem .375rem; text-align: right; font-variant-numeric: tabular-nums; }
.history-tooltip-table thead th { color: var(--muted-foreground); font-weight: 400; }
.history-tooltip-table th:first-child { text-align: left; padding-left: 0; }
.history-tooltip-table td { font-weight: 600; }
.history-tooltip-instance { display: inline-flex; align-items: center; gap: .375rem; font-weight: 400; }
.history-empty { padding: 3rem 1rem; text-align: center; color: var(--muted-foreground); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 64rem) { .resource-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .resource-history-grid { grid-template-columns: minmax(0, 1fr); } }

/* Keep chart readings inside narrow viewports when the trigger is near either edge. */
@media (max-width: 40rem) {
    .resource-history-controls, .resource-history-controls > div, .history-period-picker, .history-statistic-picker { width: 100%; }
    .history-tooltip { position: fixed; inset: auto 1rem 1rem; width: max-content; margin-inline: auto; }
}

.history-series.usage.history-network-total { stroke-dasharray: 4 3; opacity: .7; }

.cli-command { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; margin: .5rem 0; border-radius: var(--radius); background: var(--muted); color: var(--foreground); font-size: .875rem; }
.cli-command code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cli-copy { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); cursor: pointer; }
.cli-copy:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.cli-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--muted-foreground);
    font-size: .875rem;
}
.cli-steps [aria-current="step"] { color: var(--foreground); font-weight: 600; }

.cli-wizard {
    width: min(40rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: min(36rem, calc(100dvh - 2rem));
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}
.cli-wizard-body { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.cli-code-input { display: flex; justify-content: center; }

/* The beta notice and consent form share a responsive, theme-aware section. */
.beta-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 3rem); margin-block: 2rem 4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); scroll-margin-top: 6rem; }
.beta-copy h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.15; margin-block: .75rem 1rem; }
.beta-copy p { max-width: 42ch; margin-block-end: 1.25rem; }
.newsletter-form-panel { min-width: 0; }
.newsletter-form-panel h3 { font-size: 1.25rem; margin-block-end: 1rem; }
.newsletter-consent, .newsletter-status { font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.newsletter-status { margin-block-start: 1rem; }
.newsletter-action { max-width: 40rem; padding: clamp(1.5rem, 5vw, 3rem); margin: 3rem auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.newsletter-action h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
@media (max-width: 700px) { .beta-newsletter { grid-template-columns: minmax(0, 1fr); } }

/* Public product pages share the landing page's typography and theme tokens. */
.brand-link { color: inherit; text-decoration: none; }
.brand-logo { display: block; width: 9.5rem; max-width: 100%; }
.app-header .brand-logo { width: 7rem; }
.brand-logo-mark { width: 2rem; }
.brand-logo img { width: 100%; height: auto; }
.brand-mark { display: block; width: 100%; height: auto; }
.footer-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted-foreground); }
.footer-brand .brand-mark { width: 1.25rem; }
.project-empty-state { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.project-empty-mark { display: block; flex: 0 0 3.5rem; color: var(--muted-foreground); opacity: .65; }
.project-empty-state h2, .project-empty-state h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .375rem; }
.project-empty-state p { color: var(--muted-foreground); font-size: .875rem; line-height: 1.6; margin: 0; }
/* Follow Blueprint's saved theme, including its blocking initialization before first paint. */
.brand-logo-on-light { display: block; }
.brand-logo-on-dark { display: none; }
html.dark .brand-logo-on-light { display: none; }
html.dark .brand-logo-on-dark { display: block; }
.app-header-actions, .public-navigation { display: flex; align-items: center; gap: 1.5rem; }
.public-navigation a { color: var(--muted-foreground); text-decoration: none; font-size: .875rem; padding-block: .5rem; border-bottom: 2px solid transparent; }
.public-navigation a:hover, .public-navigation a.active { color: var(--foreground); border-bottom-color: var(--foreground); }
.public-navigation a:focus-visible, .brand-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: 2px; }
.marketing-page { position: relative; isolation: isolate; overflow-wrap: anywhere; }
.marketing-grid { position: fixed; inset: 0; }
.marketing-hero { padding-block: clamp(2rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem); max-width: 58rem; }
.marketing-eyebrow { font-size: .7rem; font-weight: 650; letter-spacing: .15em; line-height: 1.8; margin: 0; }
.marketing-hero h1 { font-size: clamp(2.6rem, 5.8vw, 4.8rem); line-height: 1.08; letter-spacing: -.065em; font-weight: 650; margin-block: 1.5rem; }
.marketing-hero h1 span { color: var(--muted-foreground); }
.marketing-intro { max-width: 39rem; font-size: 1.05rem; color: var(--muted-foreground); line-height: 1.8; }
.marketing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.8rem 1rem; }
.marketing-note { font-size: .8rem; line-height: 1.7; color: var(--muted-foreground); margin-block: 1.2rem 0; max-width: 54rem; }
.marketing-section { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--border); }
.marketing-section-heading { max-width: 40rem; margin-bottom: 2.5rem; }
.marketing-page h2 { font-size: clamp(1.8rem, 3.7vw, 2.8rem); line-height: 1.15; letter-spacing: -.045em; font-weight: 600; margin-block: .9rem 1rem; }
.marketing-section-heading > p:last-child, .marketing-callout p:last-child { color: var(--muted-foreground); line-height: 1.8; }
.marketing-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.marketing-card { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); }
.marketing-card > svg { width: 1.6rem; height: 1.6rem; margin-bottom: 2rem; }
.marketing-page h3 { font-weight: 600; font-size: 1.1rem; letter-spacing: -.025em; margin-block: 1rem .6rem; }
.marketing-card > p:not(.marketing-eyebrow), .marketing-facts p { color: var(--muted-foreground); font-size: .9rem; line-height: 1.8; margin-block: 0 1.25rem; }
.marketing-card-detail { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: auto; width: 100%; color: var(--muted-foreground); font-size: .75rem; line-height: 1.6; }
.marketing-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.marketing-facts article + article { border-top: 1px solid var(--border); padding-top: .75rem; }
.marketing-facts h3 { margin-top: 0; }
.marketing-callout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-block: 1rem 4rem; }
.marketing-callout > div { max-width: 36rem; }
.marketing-callout p { margin-bottom: 0; }
.marketing-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--border); padding-block: 1.5rem; margin-top: 3rem; font-size: .875rem; }
.marketing-footer > span { color: var(--muted-foreground); }
.footer-legal-links, .legal-navigation { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.footer-legal-links a { color: var(--muted-foreground); padding-block: .5rem; }
.footer-legal-links a:hover, .legal-navigation a.active { color: var(--foreground); }
.footer-legal-links a:focus-visible, .legal-document a:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; border-radius: 2px; }

/* Narrow reading measure and native anchors keep long documents usable without scripts. */
.legal-document { max-width: 76ch; margin-inline: auto; padding-block: clamp(1rem, 3vw, 2.5rem); line-height: 1.8; overflow-wrap: anywhere; }
.legal-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.legal-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; letter-spacing: -.04em; margin-block: .75rem; }
.legal-updated { color: var(--muted-foreground); font-size: .875rem; }
.legal-document section { margin-top: 2.5rem; }
.legal-document h2 { font-size: 1.4rem; line-height: 1.4; font-weight: 650; margin-bottom: 1rem; scroll-margin-top: 2rem; }
.legal-document h3 { font-size: 1.1rem; font-weight: 650; margin-block: 1.5rem .5rem; }
.legal-document p, .legal-document ul, .legal-document ol { margin-block: 1rem; }
.legal-document ul { list-style: disc; padding-inline-start: 1.5rem; }
.legal-document ol { list-style: decimal; padding-inline-start: 1.5rem; }
.legal-document li + li { margin-top: .5rem; }
.legal-document a { text-decoration: underline; text-underline-offset: .2em; }
.legal-document address { font-style: normal; }
.legal-contact-list dt { font-weight: 600; margin-top: .75rem; }
.legal-contact-list dd { margin-inline-start: 0; }
.legal-toc { margin-block: 1.5rem; padding: 1rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.legal-toc ol { padding-inline-start: 1.25rem; }
.legal-form { padding: 1rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
@media print {
    .app-header, .marketing-footer, .legal-navigation, .legal-toc, .skip-link, #blazor-error-ui { display: none !important; }
    .background-grid { display: none; }
    html, body, .workspace-shell, .workspace-body, .legal-document { background: white; color: black; }
    .workspace-body { clip-path: none; }
    .page-content, .legal-document { max-width: none; padding: 0; }
    .legal-document { font-size: 11pt; }
    .legal-document h2, .legal-document h3 { break-after: avoid; }
    .legal-document address, .legal-form { break-inside: avoid; }
    .legal-document a, .legal-updated { color: black; }
}
@media (max-width: 760px) {
    .marketing-card-grid, .marketing-split { grid-template-columns: minmax(0, 1fr); }
    .marketing-callout { align-items: flex-start; flex-direction: column; }
    .marketing-card > svg { margin-bottom: 1.25rem; }
}
@media (max-width: 480px) {
    .app-header { gap: .5rem; padding-inline: 1rem; flex-wrap: wrap; }
    .app-header .brand-logo { width: 6.4rem; }
    .app-header-actions, .public-navigation { gap: .75rem; }
    .public-navigation a { font-size: .8rem; }
}

.marketing-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); }
.marketing-table-scroll:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.marketing-comparison-table { min-width: 42rem; width: 100%; }
#rates { scroll-margin-top: 2rem; }
/* Blueprint's headless table supplies semantics; these public tables own their presentation. */
.marketing-comparison-table { border-collapse: collapse; font-size: .875rem; line-height: 1.6; }
.marketing-comparison-table th, .marketing-comparison-table td { padding: 1rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.marketing-comparison-table thead { background: var(--muted); }
.marketing-comparison-table thead th { font-weight: 650; }
.marketing-comparison-table tbody th { font-weight: 500; }
.marketing-comparison-table tbody tr:last-child th, .marketing-comparison-table tbody tr:last-child td { border-bottom: 0; }
#rates .marketing-comparison-table tbody tr:first-child td { font-size: 1.75rem; font-weight: 650; letter-spacing: -.04em; white-space: nowrap; }

/* The subscriber table uses Blueprint primitives with application-owned theme-aware presentation. */
.newsletter-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.newsletter-panel-header, .newsletter-panel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; }
.newsletter-panel-header h2 { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.125rem; font-weight: 600; }
.newsletter-panel-header p, .newsletter-panel-footer p { margin: .375rem 0 0; color: var(--muted-foreground); font-size: .875rem; }
.newsletter-count { padding: .125rem .5rem; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.newsletter-table-scroll { overflow-x: auto; border-block: 1px solid var(--border); }
.newsletter-table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
.newsletter-table th { padding: .875rem 1.5rem; background: var(--muted); color: var(--muted-foreground); font-weight: 500; white-space: nowrap; }
.newsletter-table td { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.newsletter-table tbody tr:hover { background: var(--accent); }
.newsletter-table time { color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
.newsletter-email { font-weight: 500; white-space: nowrap; }
.newsletter-status { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; font-size: .75rem; }
.newsletter-status svg { width: .875rem; height: .875rem; }
.newsletter-table .newsletter-actions { text-align: right; white-space: nowrap; }
.newsletter-empty { padding: 3rem 1.5rem; border-block: 1px solid var(--border); text-align: center; color: var(--muted-foreground); }
.newsletter-empty > svg { width: 2rem; height: 2rem; }
.newsletter-empty h3 { margin: 1rem 0 .375rem; color: var(--foreground); font-size: 1rem; }
.newsletter-empty p { margin: 0; font-size: .875rem; }
@media (max-width: 640px) { .newsletter-panel-header, .newsletter-panel-footer { padding: 1rem; } .newsletter-table th, .newsletter-table td { padding: .875rem 1rem; } }