/* HAVTO Blueprint Design System -- marketing/public surface utilities.
   Drives the "wireframe/blueprint" aesthetic from the Industry design system:
   square corners, hairline borders, + registration marks, Barlow Condensed headings,
   single steel accent, and left-aligned content-first layouts.

   Tokens are emitted from ThemeConfiguration.BuildRootCssVariablesCss() as
   --havto-blueprint-* so this file contains no hardcoded brand hex values. */

/* CSS variable fallbacks -- mirror ThemeConfiguration.BuildRootCssVariablesCss().
   The dynamic <style> tag from ThemeRootStyles.razor overrides these at runtime
   (same specificity, later source order). Defined here so the page works even
   during hot-reload cycles where the Razor component hasn't rebuilt yet. */
:root {
    --havto-blueprint-accent: #3b6ea5;
    --havto-blueprint-accent-700: #2A5280;
    --havto-blueprint-accent-600: color-mix(in srgb, #3b6ea5 90%, #2A5280);
    --havto-blueprint-accent-hover: color-mix(in srgb, #3b6ea5 90%, #2A5280);
    --havto-blueprint-accent-pressed: #2A5280;
    --havto-blueprint-divider: color-mix(in srgb, #1d1f20 16%, transparent);
    --havto-blueprint-bg: #f2f2f3;
    --havto-blueprint-surface: #e9e9ea;
    --havto-blueprint-text: #1d1f20;
    --havto-blueprint-text-muted: color-mix(in srgb, #1d1f20 70%, transparent);
    --havto-blueprint-text-caption: color-mix(in srgb, #1d1f20 55%, transparent);
    --havto-blueprint-space-1: 3.4px;
    --havto-blueprint-space-2: 6.8px;
    --havto-blueprint-space-3: 10.2px;
    --havto-blueprint-space-4: 13.6px;
    --havto-blueprint-space-6: 20.4px;
    --havto-blueprint-space-8: 27.2px;
    --havto-blueprint-space-half: calc(var(--havto-blueprint-leading) / 2);
    --havto-blueprint-leading: 24px;
    --havto-blueprint-radius: 0px;
    --havto-paper-bg: #ffffff;
    /* Portal status colours -- HAV2234/HAV2233: use tokens, not hex literals, in portal rules */
    --havto-blueprint-stat-success: #237F52;
    --havto-blueprint-stat-success-text: #ffffff;
    --havto-blueprint-stat-error: #C0392B;
    --havto-blueprint-stat-error-text: #ffffff;
    --font-heading: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --font-heading-weight: 600;
}

.mud-theme-dark {
    --havto-blueprint-accent: #64B5F6;
    --havto-blueprint-accent-700: #1E88E5;
    --havto-blueprint-accent-600: color-mix(in srgb, #64B5F6 90%, #1E88E5);
    --havto-blueprint-accent-hover: color-mix(in srgb, #64B5F6 90%, #1E88E5);
    --havto-blueprint-accent-pressed: #1E88E5;
    --havto-blueprint-divider: color-mix(in srgb, #ffffff 16%, transparent);
    --havto-blueprint-bg: #0f172a;
    --havto-blueprint-surface: #1e293b;
    --havto-blueprint-text: #ffffff;
    --havto-blueprint-text-muted: color-mix(in srgb, #ffffff 70%, transparent);
    --havto-blueprint-text-caption: color-mix(in srgb, #ffffff 55%, transparent);
    --havto-paper-bg: #1e293b;
    --havto-blueprint-stat-success: #237F52;
    --havto-blueprint-stat-success-text: #ffffff;
    --havto-blueprint-stat-error: #C0392B;
    --havto-blueprint-stat-error-text: #ffffff;
}

/* ==========================================================================
   Root defaults scoped to blueprint surfaces
   ====================================================================== */

.blueprint-surface {
    --edge: clamp(20px, 5vw, 72px);
    background-color: var(--havto-blueprint-bg);
    color: var(--havto-blueprint-text);
    font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

/* Marketing layout must grow with content; MudBlazor's .mud-layout has
   height: 100% (i.e. 100vh). With long marketing pages the content overflows
   the layout and the body background (a different MudBlazor palette colour)
   shows through, making the page background look inconsistent. */
.mud-layout.blueprint-surface {
    height: auto;
    min-height: 100%;
}

.blueprint-surface h1,
.blueprint-surface h2,
.blueprint-surface h3,
.blueprint-surface h4 {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--havto-blueprint-space-2);
    text-transform: uppercase;
}

.blueprint-surface h1 { font-size: clamp(48px, 7vw, 96px); }
.blueprint-surface h2 { font-size: 32px; }
.blueprint-surface h3 { font-size: clamp(25px, 4vw, 36px); }
.blueprint-surface h4 { font-size: clamp(20px, 3vw, 28px); }
.blueprint-surface h5 { font-size: 16px; }
.blueprint-surface h6 {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blueprint-surface p {
    margin: 0 0 var(--havto-blueprint-space-3);
    max-width: 60ch;
    white-space: normal;
    text-wrap: pretty;
}

.blueprint-surface a {
    color: var(--havto-blueprint-accent-700);
    text-underline-offset: 3px;
}

.blueprint-surface img { display: block; max-width: 100%; }
.blueprint-surface figure { margin: 0; }

.blueprint-surface figcaption {
    font-size: 11px;
    margin-top: var(--havto-blueprint-space-1);
    color: var(--havto-blueprint-text-caption);
}

.blueprint-surface :focus { outline: none; }
.blueprint-surface :focus-visible {
    outline: 2px solid var(--havto-blueprint-accent);
    outline-offset: 2px;
}

/* FocusOnNavigate focuses the h1 on every route change via tabindex="-1" -- a
   programmatic-only target that Chromium still paints with the focus-visible
   ring after pointer navigation. tabindex="-1" elements are unreachable by
   keyboard, so the ring carries no signal here. */
.blueprint-surface [tabindex="-1"]:focus-visible { outline: none; }

.blueprint-surface ::selection {
    background: var(--havto-blueprint-accent);
    background: color-mix(in srgb, var(--havto-blueprint-accent) 30%, transparent);
}

/* ==========================================================================
   Blueprint frame -- hairline border + + corner registration marks
   ====================================================================== */

.blueprint {
    position: relative;
    border: 1px solid var(--havto-blueprint-divider);
    border-radius: 0;
    background: transparent;
}

.blueprint.halftone,
.blueprint.plate,
.blueprint.duotone { overflow: visible; }

/* ==========================================================================
   Duotone image treatment
   ====================================================================== */

.duotone {
    position: relative;
    overflow: hidden;
}

.duotone::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--havto-blueprint-accent);
    mix-blend-mode: color;
    opacity: 0.45;
}

/* ==========================================================================
   Kicker + caption rule
   ====================================================================== */

.blueprint-kicker {
    display: block;
    width: 100%;
    align-self: stretch;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--havto-blueprint-accent-700);
}

.blueprint-kicker-text {
    display: block;
    line-height: var(--havto-blueprint-space-half);
    font-feature-settings: "tnum" 1;
    margin: 0 0 var(--havto-blueprint-space-half);
}

.blueprint-features > .blueprint-kicker > .blueprint-rule {
    margin: 0 0 calc(var(--havto-blueprint-leading) + 8px);
}

/* ==========================================================================
   Hero (kicker + display + sub + cta row + tag rows)
   ====================================================================== */

.blueprint-hero {
    padding: calc(4 * var(--havto-blueprint-leading)) 0 calc(3 * var(--havto-blueprint-leading));
}

@media (max-width: 720px) {
    .blueprint-hero { padding-top: calc(2.5 * var(--havto-blueprint-leading)); }
}

/* Section kickers carry the caption rule; hero kickers do not draw one. */
.blueprint-kicker > .blueprint-rule {
    margin: 0 0 calc(var(--havto-blueprint-leading) - var(--havto-blueprint-space-half));
}

.blueprint-hero .blueprint-kicker > .blueprint-rule {
    display: none;
}

/* ==========================================================================
   Display heading (per-sentence line spans)
   ====================================================================== */

.blueprint-display {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(48px, 7vw, 96px) !important;
    line-height: clamp(50px, 7.3vw, 100px) !important;
    letter-spacing: 0.01em !important;
    margin-left: -0.052em;
}

.blueprint-display .line {
    display: block;
}

.blueprint-display .accent {
    color: var(--havto-blueprint-accent);
}

/* Shared hero subtitle measure - keeps hero intro text aligned across all
   marketing pages (Features, Pricing, Evidence, About, Support). */
.blueprint-hero-subtitle {
    max-width: 780px;
    font-size: 16px;
    line-height: var(--havto-blueprint-leading);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
    margin-top: calc(1.5 * var(--havto-blueprint-leading) - 1cap);
    margin-bottom: 0;
}

/* ==========================================================================
   Tags / chips
   ====================================================================== */

.blueprint-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid var(--havto-blueprint-divider);
    border-radius: 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--havto-blueprint-accent-700);
    background: transparent;
}

.blueprint-tag--accent {
    border-color: transparent;
    background: color-mix(in srgb, var(--havto-blueprint-accent) 7%, var(--havto-paper-bg));
}

.blueprint-tag--neutral {
    color: var(--havto-blueprint-text-muted);
    border-color: var(--havto-blueprint-divider);
}

.blueprint-tag-row,
.blueprint-landing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--havto-blueprint-space-half);
    margin-top: calc(1.5 * var(--havto-blueprint-leading));
}

.blueprint-landing-tags + .blueprint-landing-tags {
    margin-top: var(--havto-blueprint-space-half);
}

/* step-tags equivalent: a tag row inside a framed cell sits a half-unit
   below the body copy, not a full tag-row drop. */
.blueprint-cell .blueprint-landing-tags {
    margin-top: var(--havto-blueprint-space-half);
}

.blueprint-tag-row .blueprint-tag,
.blueprint-landing-tags .blueprint-tag {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ==========================================================================
   Mod list (+) and X list (x)
   ====================================================================== */

.mod-list,
.x-list {
    list-style: none;
    padding: 0;
    margin: calc(var(--havto-blueprint-leading) - 1cap) 0 0;
}

.mod-list li,
.x-list li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 82%, transparent);
}

.mod-list li + li,
.x-list li + li {
    margin-top: 4px;
}

.mod-list li::before,
.x-list li::before {
    position: absolute;
    left: 0;
    top: 0.15em;
    font-weight: 700;
    color: var(--havto-blueprint-accent-700);
}

.mod-list li::before { content: "+"; }
.x-list li::before { content: "x"; color: var(--havto-blueprint-text-caption); }

.blueprint-cell .tier-tag {
    display: block;
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-accent-700);
    font-weight: 600;
    margin: calc(var(--havto-blueprint-leading) - 1cap) 0 0;
}

.blueprint-cell .tier-tag + .mod-list {
    margin-top: var(--havto-blueprint-space-1);
}

/* ==========================================================================
   Pricing tier cards
   ====================================================================== */

.blueprint-cell.tier-card {
    display: flex;
    flex-direction: column;
}

.blueprint-cell.tier-card .blueprint-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tier-card .tier-flag {
    display: flex;
    align-items: center;
    min-height: var(--havto-blueprint-leading);
    margin-bottom: calc(var(--havto-blueprint-leading) / 2);
}

.tier-card .tier-flag .blueprint-tag {
    flex: none;
    white-space: nowrap;
}

.tier-card .tier-head {
    display: block;
}

.tier-card .price {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 46px;
    line-height: 1;
    letter-spacing: 0.01em;
    font-feature-settings: "tnum" 1;
    margin: calc(var(--havto-blueprint-leading) / 2) 0 0;
}

.tier-card .price .unit {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 6px;
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

.tier-card .mod-list {
    flex: 1;
}

.tier-card .tier-btn {
    margin-top: var(--havto-blueprint-leading);
}

/* ==========================================================================
   Stat cell (About "by the numbers")
   ====================================================================== */

.blueprint-cell .stat-n {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 52px;
    line-height: 1;
    letter-spacing: 0.01em;
    font-feature-settings: "tnum" 1;
    color: var(--havto-blueprint-accent-700);
    margin: 0;
}

.blueprint-cell .stat-l {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    margin: var(--havto-blueprint-space-half) 0 0;
}

.blueprint-cell .stat-c {
    font-size: 13px;
    line-height: var(--havto-blueprint-leading);
    color: color-mix(in srgb, var(--havto-blueprint-text) 65%, transparent);
    margin: 4px 0 0;
}

/* ==========================================================================
   Quote and close sections
   ====================================================================== */

.blueprint-quote-section {
    padding: calc(2.5 * var(--havto-blueprint-leading)) 0 calc(3 * var(--havto-blueprint-leading));
}

.blueprint-quote-section figure {
    margin: 0;
}

.blueprint-quote-section blockquote {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: calc(1.5 * var(--havto-blueprint-leading));
    letter-spacing: 0;
    max-width: 36ch;
    margin: 0;
    text-indent: -0.316em;
}

.blueprint-quote-section figcaption {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
    margin: calc(2 * var(--havto-blueprint-leading) - 1cap) 0 0;
    text-indent: 0;
}

.blueprint-cell .tier-head h2 {
    font-size: 22px;
}

/* ==========================================================================
   Cells grid
   ====================================================================== */

.blueprint-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 3vw, 48px);
    margin-top: var(--havto-blueprint-space-half);
}

.blueprint-cells.cols-1 { grid-template-columns: 1fr; }
.blueprint-cells.cols-2 { grid-template-columns: repeat(2, 1fr); }
.blueprint-cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
.blueprint-cells.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .blueprint-cells,
    .blueprint-cells.cols-2,
    .blueprint-cells.cols-3,
    .blueprint-cells.cols-4 {
        grid-template-columns: 1fr;
    }

    /* Blueprint cell-frames draw no glyphs; the leading icon only exists on the
       app side. Drop it when the cells stack single-column. Two-class selector
       beats MudBlazor's later-loaded .mud-icon-root { display: inline-block }. */
    .blueprint-cell .blueprint-cell-icon { display: none; }
}

.blueprint-cell {
    padding: var(--havto-blueprint-leading);
}

.blueprint-cell .blueprint-cell-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 22px;
    line-height: var(--havto-blueprint-leading);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.blueprint-cell .blueprint-cell-body {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
    margin: calc(var(--havto-blueprint-leading) - 1cap) 0 0;
    max-width: none;
}

/* FAQ cells: question reads in the condensed face without the cell-title
   caps treatment; the answer sits a half-unit below. */
.faq-q {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 20px;
    line-height: var(--havto-blueprint-leading);
    letter-spacing: 0.01em;
    text-transform: none;
    margin: 0;
}

.faq-a {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
    margin: var(--havto-blueprint-space-half) 0 0;
}

/* ==========================================================================
   Split layout (text + figure, 2-column)
   ====================================================================== */

.blueprint-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--havto-blueprint-leading) clamp(24px, 5vw, 96px);
    align-items: center;
    padding: calc(2 * var(--havto-blueprint-leading)) 0 calc(3 * var(--havto-blueprint-leading));
}

.blueprint-split-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 32px;
    line-height: calc(1.5 * var(--havto-blueprint-leading));
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
    max-width: 20ch;
}

.blueprint-split-copy {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
    margin: calc(var(--havto-blueprint-leading) - 1cap) 0 0;
    max-width: 48ch;
}

.blueprint-split-figure {
    position: relative;
    margin: 0;
    border: 1px solid var(--havto-blueprint-divider);
    aspect-ratio: 1600 / 1187;
    background: var(--havto-blueprint-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.blueprint-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    font-size: 13px;
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 50%, transparent);
    text-align: center;
    padding: var(--havto-blueprint-leading);
}

@media (max-width: 768px) {
    .blueprint-split {
        grid-template-columns: 1fr;
        gap: var(--havto-blueprint-leading);
    }
}

/* ==========================================================================
   Features section (cells grid with kicker)
   ====================================================================== */

.blueprint-features {
    padding: calc(3 * var(--havto-blueprint-leading)) 0 calc(2.5 * var(--havto-blueprint-leading));
}

.blueprint-rule {
    border: 0;
    border-top: 1px solid var(--havto-blueprint-divider);
    margin: var(--havto-blueprint-space-1) 0;
}

.blueprint.plate .blueprint-rule,
.blueprint-frame .blueprint-rule {
    margin: var(--havto-blueprint-space-4) 0;
}

.blueprint-features > .blueprint-rule {
    margin-bottom: calc(var(--havto-blueprint-leading) + 8px);
}

/* ==========================================================================
   Reg section (standards & guidance with tag row)
   ====================================================================== */

.blueprint-reg {
    padding: calc(2.5 * var(--havto-blueprint-leading)) 0;
}

.blueprint-reg .blueprint-split-title {
    max-width: 20ch;
}

.blueprint-lead {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    max-width: var(--havto-blueprint-measure, 65ch);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
    margin: calc(var(--havto-blueprint-leading) - 1cap) 0 0;
}

/* ==========================================================================
   Close section (final CTA)
   ====================================================================== */

.blueprint-close {
    padding: calc(2.5 * var(--havto-blueprint-leading)) 0 calc(2 * var(--havto-blueprint-leading));
}

.blueprint-close h3 {
    font-family: var(--havto-blueprint-font-heading, "Barlow Condensed", "Barlow", system-ui, sans-serif);
    font-weight: var(--havto-blueprint-font-heading-weight, 600);
    font-size: 24px;
    line-height: var(--havto-blueprint-leading);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.blueprint-close .blueprint-sub {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
    margin: calc(var(--havto-blueprint-leading) - 1cap) 0 0;
    max-width: var(--havto-blueprint-measure, 65ch);
}

.blueprint-cta-row {
    display: flex;
    gap: var(--havto-blueprint-space-3);
    flex-wrap: wrap;
    margin-top: var(--havto-blueprint-leading);
}

/* ==========================================================================
   Spec plate / engineering title block
   ====================================================================== */

.blueprint-sheet {
    padding: calc(3 * var(--havto-blueprint-leading)) 0 calc(2.5 * var(--havto-blueprint-leading));
}

.blueprint-plate {
    position: relative;
    border: 1px solid var(--havto-blueprint-divider);
    border-radius: 0;
    overflow: visible;
}

.blueprint-title-block {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid var(--havto-blueprint-divider);
}

.blueprint-title-block > span {
    padding: var(--havto-blueprint-space-half) var(--havto-blueprint-leading);
    font-size: 13px;
    line-height: var(--havto-blueprint-leading);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    font-feature-settings: "tnum";
}

.blueprint-title-block .tb-title {
    flex: 1 1 0;
    min-width: 16ch;
}

.blueprint-title-block .tb-cell {
    border-left: 1px solid var(--havto-blueprint-divider);
    white-space: nowrap;
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

.blueprint-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.blueprint-table th,
.blueprint-table td {
    padding: var(--havto-blueprint-space-2);
    border-bottom: 1px solid var(--havto-blueprint-divider);
    text-align: left;
}

.blueprint-table thead th {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 60%, transparent);
}

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

.blueprint-table.spec {
    table-layout: fixed;
}

.blueprint-table.spec col.c-num { width: calc(3 * var(--havto-blueprint-leading)); }
.blueprint-table.spec col.c-prop { width: 30%; }

.blueprint-table.spec th,
.blueprint-table.spec td {
    padding: var(--havto-blueprint-space-half) var(--havto-blueprint-leading) var(--havto-blueprint-space-half) 0;
    vertical-align: middle;
}

.blueprint-table.spec th:first-child,
.blueprint-table.spec td:first-child {
    padding-left: var(--havto-blueprint-leading);
}

.blueprint-table.spec th {
    font-size: 13px;
    line-height: var(--havto-blueprint-space-half);
    font-weight: 600;
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

.blueprint-table.spec td {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
}

.blueprint-table.spec .s-num {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--havto-blueprint-accent-700);
    font-feature-settings: "tnum";
}

.blueprint-table.spec .s-rem {
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 78%, transparent);
}

.blueprint-table.spec tbody tr:hover { background: none; }

/* Band price sheet: band names keyed, figures tabular (blueprint .bands) */
#rate-card .blueprint-table td {
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

#rate-card .blueprint-table tbody td:first-child {
    font-weight: 500;
}

@media (max-width: 560px) {
    #rate-card .blueprint-table,
    #capability .blueprint-table { font-size: 12px; }

    #rate-card .blueprint-table th,
    #rate-card .blueprint-table td,
    #capability .blueprint-table th,
    #capability .blueprint-table td {
        padding: var(--havto-blueprint-space-1) var(--havto-blueprint-space-2);
    }

    /* The comparison sheet's uppercase column heads are its min-content driver --
       at phone widths they force the table past the plate. Compress them the way
       the bands table compresses its figures (blueprint .bands <=560px pattern). */
    #capability .blueprint-table th {
        font-size: 10px;
        letter-spacing: 0.05em;
    }
}

/* Capability-by-tier comparison (blueprint .cmp): 46/18 column split,
   accent ticks, muted dashes. */
#capability .blueprint-table col.c-cap { width: 46%; }
#capability .blueprint-table col.c-t { width: 18%; }

#capability .blueprint-table td.yes {
    color: var(--havto-blueprint-accent-700);
    font-weight: 600;
}

#capability .blueprint-table td.no {
    color: color-mix(in srgb, var(--havto-blueprint-text) 32%, transparent);
}

.blueprint-plate > .blueprint-sheet-note {
    margin: 0;
    max-width: none;
    padding: var(--havto-blueprint-space-half) var(--havto-blueprint-leading);
    border-top: 1px solid var(--havto-blueprint-divider);
    font-size: 13px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

/* ==========================================================================
   Quote (the one lowercase-condensed moment)
   ====================================================================== */

.blueprint-quote {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 600;
    line-height: calc(1.5 * var(--leading, 24px));
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 var(--havto-blueprint-space-2);
}

.blueprint-quote::before { content: open-quote; }
.blueprint-quote::after { content: close-quote; }

.blueprint-quote-section {
    padding: calc(2.5 * var(--havto-blueprint-leading)) 0 calc(3.5 * var(--havto-blueprint-leading));
}

.blueprint-quote-caption {
    font-size: 15px;
    line-height: var(--leading, 24px);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

/* ==========================================================================
   Hairline / rules
   ====================================================================== */

.blueprint-rule {
    height: 0;
    border: 0;
    border-top: 1px solid var(--havto-blueprint-divider);
    margin: var(--havto-blueprint-space-4) 0;
}

/* ==========================================================================
   Legal body (privacy / terms / retention -- bare 74ch measure, no frame)
   ====================================================================== */

.blueprint-legal {
    max-width: 74ch;
    padding: var(--havto-blueprint-leading) 0 calc(2 * var(--havto-blueprint-leading));
}

.blueprint-legal .blueprint-updated {
    display: block;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--havto-blueprint-accent-700);
    font-weight: 600;
    margin: 0 0 var(--havto-blueprint-leading);
}

.blueprint-legal h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: calc(2 * var(--havto-blueprint-leading)) 0 var(--havto-blueprint-space-half);
}

.blueprint-legal h2:first-of-type { margin-top: var(--havto-blueprint-leading); }

.blueprint-legal p,
.blueprint-legal li {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    color: color-mix(in srgb, var(--havto-blueprint-text) 82%, transparent);
    max-width: none;
}

.blueprint-legal p { margin-top: 0; margin-bottom: var(--havto-blueprint-space-half); }

.blueprint-legal ul {
    margin: 0 0 var(--havto-blueprint-space-half);
    padding-left: 20px;
}

.blueprint-legal li + li { margin-top: 6px; }

.blueprint-legal .blueprint-disclaimer {
    display: block;
    margin-top: var(--havto-blueprint-leading);
    padding: var(--havto-blueprint-space-3);
    border: 1px solid var(--havto-blueprint-divider);
    font-size: 13px;
    line-height: var(--havto-blueprint-leading);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

.blueprint-legal .blueprint-table {
    margin: var(--havto-blueprint-space-half) 0 var(--havto-blueprint-leading);
}

/* ==========================================================================
   MudBlazor component overrides within marketing blueprint surfaces
   ====================================================================== */

.blueprint-marketing .mud-paper {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--havto-blueprint-divider) !important;
    background: transparent !important;
}

.blueprint-marketing .mud-paper.mud-elevation-0 {
    border: 0 !important;
}

.blueprint-marketing .mud-typography-h2,
.blueprint-marketing .mud-typography-h3,
.blueprint-marketing .mud-typography-h4,
.blueprint-marketing .mud-typography-h5,
.blueprint-marketing .mud-typography-h6 {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.12;
}

.blueprint-marketing .mud-typography-h2 { font-size: 32px; }
.blueprint-marketing .mud-typography-h3 { font-size: clamp(25px, 4vw, 36px); }
.blueprint-marketing .mud-typography-h4 { font-size: clamp(20px, 3vw, 28px); }
.blueprint-marketing .mud-typography-h5 { font-size: 20px; }
.blueprint-marketing .mud-typography-h6 { font-size: 16px; letter-spacing: 0.04em; }

.blueprint-marketing .mud-typography-body1,
.blueprint-marketing .mud-typography-body2,
.blueprint-marketing p {
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.blueprint-marketing .mud-chip {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--havto-blueprint-divider);
    color: var(--havto-blueprint-accent-700);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.blueprint-marketing .mud-chip-color-primary {
    border-color: var(--havto-blueprint-accent);
    background: var(--havto-blueprint-accent);
    background: color-mix(in srgb, var(--havto-blueprint-accent) 8%, transparent);
    color: var(--havto-blueprint-accent-700);
}

.blueprint-marketing .mud-chip-color-success {
    border-color: var(--havto-blueprint-accent);
    background: var(--havto-blueprint-accent);
    background: color-mix(in srgb, var(--havto-blueprint-accent) 8%, transparent);
    color: var(--havto-blueprint-accent-700);
}

.blueprint-marketing .mud-chip-color-info,
.blueprint-marketing .mud-chip-color-warning,
.blueprint-marketing .mud-chip-color-default,
.blueprint-marketing .mud-chip-color-secondary {
    border-color: var(--havto-blueprint-divider);
    background: transparent;
    color: var(--havto-blueprint-text-muted);
}

.blueprint-marketing .mud-button-filled.mud-button-filled-primary,
.blueprint-marketing .mud-button-filled.mud-button-filled-primary:hover {
    border-radius: 0;
    background-color: var(--havto-blueprint-accent);
    color: var(--hav-on-accent);
    font-weight: 600;
    text-transform: none;
}

.blueprint-marketing .mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--havto-blueprint-accent-hover);
}

.blueprint-marketing .mud-button-outlined.mud-button-outlined-primary,
.blueprint-marketing .mud-button-text.mud-button-text-primary {
    border-radius: 0;
    color: var(--havto-blueprint-accent-700);
    font-weight: 600;
    text-transform: none;
}

.blueprint-marketing .mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--havto-blueprint-divider);
}

.blueprint-marketing .mud-button-outlined.mud-button-outlined-primary:hover,
.blueprint-marketing .mud-button-text.mud-button-text-primary:hover {
    background-color: var(--havto-blueprint-accent);
    background-color: color-mix(in srgb, var(--havto-blueprint-accent) 8%, transparent);
}

/* Marketing pages use .hav-row for multi-column sections; the kit's 640px
   form cap makes them collapse to a single column at desktop widths. */
.blueprint-marketing .hav-row {
    --hav-row-track: 1fr;
}

/* ==========================================================================
   Inputs -- outlined, square, accent focus
   ====================================================================== */

.blueprint-marketing .mud-input-outlined-border {
    border-radius: 0;
    border-color: var(--havto-blueprint-divider);
}

.blueprint-marketing .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--havto-blueprint-accent);
    border-width: 1px;
}

.blueprint-marketing .mud-select .mud-input-outlined-border,
.blueprint-marketing .mud-select:focus-within .mud-input-outlined-border {
    border-color: var(--havto-blueprint-divider);
}

/* Outlined MudTextField / MudSelect -- floating labels sit on the top border.
   Give the input and label the same surface background so the border does not
   show through the label. */
.blueprint-marketing .mud-input.mud-input-outlined,
.blueprint-marketing .mud-select .mud-input.mud-input-outlined {
    background-color: var(--havto-blueprint-surface);
}

.blueprint-marketing .mud-input-label-outlined {
    background-color: var(--havto-blueprint-surface) !important;
    z-index: 1 !important;
}

.blueprint-marketing .mud-paper,
.blueprint-marketing .mud-card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--havto-blueprint-divider);
    background: transparent;
}

.blueprint-marketing .mud-card-content,
.blueprint-marketing .mud-card-actions {
    background: transparent;
    border-radius: 0;
}

.blueprint-marketing .mud-list {
    padding: 0;
}

.blueprint-marketing .mud-list-item {
    padding-left: 0;
}

.blueprint-marketing .mud-alert {
    border-radius: 0;
    border: 1px solid var(--havto-blueprint-divider);
    background: transparent;
}

.blueprint-marketing .mud-divider {
    border-color: var(--havto-blueprint-divider);
}

/* ==========================================================================
   Global left-alignment overrides for marketing blueprint surfaces.
   The design system is content-first and left-aligned; these helpers convert
   legacy centered marketing sections without editing every file.
   ====================================================================== */

.blueprint-marketing .text-center {
    text-align: left !important;
}

.blueprint-marketing .mud-stack.mud-stack-align-center:not(.mud-stack-row) {
    align-items: flex-start !important;
}

.blueprint-marketing .mud-stack.mud-stack-align-center:not(.mud-stack-row) .mud-typography {
    text-align: left !important;
}

.blueprint-marketing .mud-typography-align-center,
.blueprint-marketing .mud-typography-align-center .mud-typography {
    text-align: left !important;
}

.blueprint-marketing .mud-stack.mud-stack-justify-center {
    justify-content: flex-start !important;
}

.blueprint-marketing .mud-stack.mud-stack-justify-center .mud-typography {
    text-align: left !important;
}

/* ==========================================================================
   Dark mode overrides (MudBlazor adds .mud-theme-dark to body)
   ====================================================================== */

.mud-theme-dark .blueprint-surface {
    background-color: #17191c;
    color: #f1f2f4;
}

.mud-theme-dark .blueprint-surface a {
    color: #94bce3;
}

.mud-theme-dark .blueprint,
.mud-theme-dark .blueprint-plate,
.mud-theme-dark .blueprint-tag,
.mud-theme-dark .mud-input-outlined-border {
    border-color: #f1f2f4;
    border-color: color-mix(in srgb, #f1f2f4 18%, transparent);
}

.mud-theme-dark .blueprint-kicker {
    color: #94bce3;
    border-color: #f1f2f4;
    border-color: color-mix(in srgb, #f1f2f4 18%, transparent);
}

.mud-theme-dark .blueprint-surface .mud-button-filled.mud-button-filled-primary {
    background-color: #94bce3;
    color: #17191c;
}

.mud-theme-dark .blueprint-surface .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #b5d9fd;
}

.blueprint-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--havto-blueprint-space-2);
    color: inherit;
    text-decoration: none;
}

.blueprint-brand-logo {
    height: 22px;
    width: auto;
    max-width: 22px;
    display: block;
}

/* ==========================================================================
   Marketing header / nav -- global overrides because child components
   (MudAppBar, MudToolBar, MudButton, etc.) do not receive scoped CSS.
   ====================================================================== */

.blueprint-marketing {
    --leading: 24px;
    --half: 12px;
    --measure: 60ch;
    --font-heading: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    --font-heading-weight: 600;
    padding-top: 0 !important;
}

.blueprint-marketing .mud-container.landing-page,
.blueprint-marketing .mud-container.marketing-page {
    padding-inline: var(--edge) !important;
    max-width: 1200px !important;
}

.blueprint-marketing-header {
    background: transparent !important;
    border-bottom: none;
    box-shadow: none !important;
}

.blueprint-marketing-header .mud-toolbar {
    max-width: none;
    margin: 0;
    padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
    background: transparent;
    border-bottom: 0;
}

.blueprint-marketing-header .marketing-nav {
    width: 100%;
    justify-content: space-between;
}

.blueprint-marketing-header .marketing-nav-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--havto-blueprint-space-4) !important;
}

.blueprint-marketing-header .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    color: var(--havto-blueprint-text);
    text-decoration: none;
}

.blueprint-marketing-header .nav-brand .hav-app-brand-mark {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 4px;
    flex: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.blueprint-marketing-header .nav-word {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: var(--leading, 24px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
}

@media (max-width: 599px) {
    .blueprint-marketing-header .nav-word {
        display: none;
    }
}

.blueprint-marketing-header .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 14px;
    line-height: var(--leading, 24px);
    color: var(--havto-blueprint-text);
    text-decoration: none;
    white-space: nowrap;
}

.blueprint-marketing-header .nav-link:hover {
    color: var(--havto-blueprint-accent-700);
}

.blueprint-marketing-header .nav-link.blueprint-nav-active {
    color: var(--havto-blueprint-accent-700);
    font-weight: 600;
}

.blueprint-marketing-header .nav-signin {
    font-weight: 600;
}

.blueprint-marketing-header .theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--havto-blueprint-text);
    border: 1px solid var(--havto-blueprint-divider);
    background: transparent;
    cursor: pointer;
}

.blueprint-marketing-header .theme-toggle .icon-moon {
    display: none;
}

.blueprint-marketing-header .theme-toggle .icon-sun {
    display: block;
}

.mud-theme-dark .blueprint-marketing-header .theme-toggle .icon-moon {
    display: block;
}

.mud-theme-dark .blueprint-marketing-header .theme-toggle .icon-sun {
    display: none;
}

.blueprint-marketing-header .mud-button-filled.nav-cta {
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-heading, "Barlow Condensed", system-ui, sans-serif);
    font-weight: 600;
    font-size: 14px;
    padding: var(--havto-blueprint-space-2) calc(var(--havto-blueprint-space-3) * 1.2);
    border: 1px solid var(--havto-blueprint-accent);
    background: var(--havto-blueprint-accent);
    color: var(--havto-blueprint-bg);
    box-shadow: none !important;
}

.blueprint-marketing-header .mud-button-filled.nav-cta:hover {
    background: var(--havto-blueprint-accent-600);
    box-shadow: none !important;
}

@media (max-width: 480px) {
    .blueprint-marketing-header .nav-link:not(.nav-signin) {
        display: none;
    }
}

/* ==========================================================================
   Marketing footer
   ====================================================================== */

.blueprint-footer {
    padding: calc(2 * var(--leading, 24px)) 0;
    font-size: 13px;
    line-height: var(--leading, 24px);
}

.blueprint-footer .mud-container {
    max-width: 1200px;
    padding-inline: var(--edge) !important;
}

.blueprint-footer .foot-cols {
    --hav-row-track: 1fr;
    --hav-row-min: 170px;
    padding-top: var(--havto-blueprint-space-2);
    border-top: 1px solid var(--havto-blueprint-divider);
}

.blueprint-footer .foot-brand .fb-name,
.blueprint-footer .foot-brand .mud-stack-root.foot-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    color: var(--havto-blueprint-text);
}

.blueprint-footer .foot-brand .fb-word,
.blueprint-footer .foot-brand .mud-typography-h6 {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 20px;
    font-weight: 600 !important;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--havto-blueprint-text);
}

.blueprint-footer .foot-brand .hav-app-brand-mark {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 4px;
    flex: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.blueprint-footer .foot-brand .mud-typography-body2 {
    font-family: "Barlow", system-ui, sans-serif;
    margin-top: var(--havto-blueprint-space-2);
    max-width: 34ch;
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent);
}

.blueprint-footer .foot-col .mud-typography-subtitle1 {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 13px;
    line-height: 12px;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--havto-blueprint-accent-700) !important;
}

.blueprint-footer .foot-col .mud-link {
    display: block;
    text-decoration: none;
    line-height: var(--leading, 24px);
    font-family: "Barlow", system-ui, sans-serif;
    color: var(--havto-blueprint-text) !important;
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent) !important;
}

.blueprint-footer .foot-col .mud-link:hover {
    color: var(--havto-blueprint-accent-700);
    text-decoration: underline;
}

.blueprint-footer .foot-base {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--havto-blueprint-space-2);
    margin-top: calc(2 * var(--leading, 24px));
}

.blueprint-footer .foot-base .mud-typography {
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 13px;
    line-height: var(--leading, 24px);
    color: var(--havto-blueprint-text) !important;
    color: color-mix(in srgb, var(--havto-blueprint-text) 70%, transparent) !important;
}

/* ==========================================================================
   Reduced motion
   ====================================================================== */

/* ==========================================================================
   Global MudDialog shell -- applies blueprint look to ALL dialogs automatically.
   Update once here, every dialog inherits. Individual components can still
   override via scoped CSS if needed.
   ====================================================================== */

.blueprint-dialog-backdrop {
    background: var(--havto-blueprint-text, #1d1f20);
    background: color-mix(in srgb, var(--havto-blueprint-text, #1d1f20) 50%, transparent);
}

.mud-dialog {
    border-radius: 0;
    border: 1px solid var(--havto-blueprint-divider);
    background: var(--havto-blueprint-bg);
    box-shadow: none;
    color: var(--havto-blueprint-text);
}

.mud-dialog .mud-dialog-title {
    font-family: var(--font-heading, "Barlow Condensed", "Barlow", system-ui, sans-serif);
    font-weight: var(--font-heading-weight, 600);
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--havto-blueprint-text);
}

.mud-dialog .mud-dialog-content {
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 14px;
    color: var(--havto-blueprint-text);
}

.mud-dialog .mud-dialog-actions .mud-button {
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-heading, "Barlow Condensed", system-ui, sans-serif);
    font-weight: 600;
    font-size: 14px;
    box-shadow: none !important;
}

.mud-dialog .mud-dialog-actions .mud-button-filled.mud-button-filled-primary {
    background: var(--havto-blueprint-accent);
    color: var(--havto-blueprint-bg);
    border: 1px solid var(--havto-blueprint-accent);
}

.mud-dialog .mud-dialog-actions .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--havto-blueprint-accent-600);
}

.mud-dialog .mud-dialog-actions .mud-button-outlined.mud-button-outlined-primary {
    background: transparent;
    color: var(--havto-blueprint-text);
    border: 1px solid var(--havto-blueprint-divider);
}

.mud-dialog .mud-dialog-actions .mud-button-outlined.mud-button-outlined-primary:hover {
    background: var(--havto-blueprint-text);
    background: color-mix(in srgb, var(--havto-blueprint-text) 7%, transparent);
}

.mud-dialog .mud-input .mud-input-outlined-border {
    border-radius: 0;
    border-color: var(--havto-blueprint-divider);
}

.mud-dialog .mud-input:hover .mud-input-outlined-border {
    border-color: var(--havto-blueprint-text);
    border-color: color-mix(in srgb, var(--havto-blueprint-text) 45%, transparent);
}

.mud-dialog .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--havto-blueprint-accent);
    border-width: 1px;
}

/* Outlined inputs in dialogs need a solid surface and label background so the
   top border doesn't show through the floating label. */
.mud-dialog .mud-input.mud-input-outlined,
.mud-dialog .mud-select .mud-input.mud-input-outlined {
    background-color: var(--havto-blueprint-surface);
}

.mud-dialog .mud-input-label-outlined {
    background-color: var(--havto-blueprint-surface) !important;
    z-index: 1 !important;
}

.mud-dialog .mud-input-label {
    color: var(--havto-blueprint-text-muted) !important;
    font-size: 12px !important;
}

.mud-dialog .mud-input-label.mud-input-error {
    color: var(--havto-blueprint-text-muted) !important;
}

.mud-dialog .mud-alert {
    border-radius: 0;
    border: 1px solid var(--havto-blueprint-divider);
    background: transparent;
}

.mud-theme-dark .mud-dialog {
    background-color: #17191c;
    color: #f1f2f4;
    border-color: #f1f2f4;
    border-color: color-mix(in srgb, #f1f2f4 18%, transparent);
}

.mud-theme-dark .mud-dialog .mud-dialog-title {
    color: #f1f2f4;
}

.mud-theme-dark .mud-dialog .mud-input-outlined-border {
    border-color: #f1f2f4;
    border-color: color-mix(in srgb, #f1f2f4 18%, transparent);
}

/* ==========================================================================
   Reduced motion
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .blueprint-surface * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Public Verify page (https://localhost:7066/verify)
   - Temporary overlay while scoped CSS scope matching is unreliable in watch.
   - Styles mirror the scoped Verify.razor.css; use blueprint tokens.
   ====================================================================== */

.verify-page {
    display: block;
}

.verify-landing {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.verify-subtitle {
    text-align: left;
    max-width: 60ch;
    font-size: 16px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    margin-bottom: var(--havto-blueprint-space-2);
}

.verify-reassurance {
    text-align: left;
    max-width: 60ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--havto-blueprint-text-muted);
    margin-bottom: var(--havto-blueprint-space-6);
}

.verify-cells {
    margin-bottom: var(--havto-blueprint-space-8);
}

.verify-intake {
    border: 1px solid var(--havto-blueprint-divider);
    padding: var(--havto-blueprint-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--havto-blueprint-space-4);
    background: transparent;
    margin-bottom: var(--havto-blueprint-space-6);
}

.verify-input .mud-input {
    font-family: "Barlow", system-ui, sans-serif;
}

.verify-input .mud-input-outlined-border {
    border-radius: 0;
}

.verify-input .mud-input-outlined:hover .mud-input-outlined-border,
.verify-input .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--havto-blueprint-accent);
}

.verify-button {
    align-self: flex-start !important;
    width: auto !important;
    border-radius: 0 !important;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 2rem;
    background-color: var(--havto-blueprint-accent) !important;
}

.verify-button:focus-visible,
.verify-button:hover {
    background-color: var(--havto-blueprint-text) !important;
    color: var(--havto-blueprint-surface) !important;
}

.verify-button:disabled {
    opacity: 0.5;
    background-color: var(--havto-blueprint-accent) !important;
}

.verify-verdict {
    border: 1px solid var(--havto-blueprint-divider);
    padding: var(--havto-blueprint-space-6);
    margin-bottom: var(--havto-blueprint-space-6);
    background: transparent;
}

.verdict-main {
    display: flex;
    gap: var(--havto-blueprint-space-4);
    margin-bottom: var(--havto-blueprint-space-4);
}

.verdict-rail {
    width: 6px;
    flex-shrink: 0;
    background-color: var(--havto-blueprint-text-muted);
}

.verdict-body {
    flex: 1;
}

.verdict-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--havto-blueprint-space-2);
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 0.25rem 0.75rem;
    margin-bottom: var(--havto-blueprint-space-2);
    color: var(--havto-blueprint-text);
    background-color: var(--havto-blueprint-surface);
}

.verdict-glyph {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

.verdict-summary {
    font-size: 15px;
    line-height: var(--havto-blueprint-leading);
    max-width: 60ch;
    margin: 0;
}

.verify-verdict-verified .verdict-rail,
.verify-verdict-verified .verdict-badge {
    background-color: var(--havto-blueprint-stat-success);
    color: var(--havto-blueprint-stat-success-text);
}

.verify-verdict-failed .verdict-rail,
.verify-verdict-failed .verdict-badge,
.verify-verdict-error .verdict-rail,
.verify-verdict-error .verdict-badge {
    background-color: var(--havto-blueprint-stat-error);
    color: var(--havto-blueprint-stat-error-text);
}

.verify-register {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--havto-blueprint-space-4);
}

.verify-register th,
.verify-register td {
    text-align: left;
    padding: var(--havto-blueprint-space-2) var(--havto-blueprint-space-3);
    border-bottom: 1px solid var(--havto-blueprint-divider);
    font-size: 14px;
    line-height: var(--havto-blueprint-leading);
}

.verify-register th {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    color: var(--havto-blueprint-text-muted);
}

.verify-register td {
    color: var(--havto-blueprint-text);
}

.verify-completion,
.verify-hash,
.verify-help {
    font-size: 14px;
    line-height: var(--havto-blueprint-leading);
    margin: 0 0 var(--havto-blueprint-space-3);
    max-width: 65ch;
}

.verify-hash code {
    display: block;
    width: 100%;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.9em;
    word-break: break-all;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

@media (max-width: 720px) {
    .verify-intake {
        padding: var(--havto-blueprint-space-4);
    }

    .verify-button {
        align-self: stretch !important;
    }

    .verify-register {
        display: block;
        overflow-x: auto;
    }
}

/* ==========================================================================
   Verify page -- file drop zone (client-side hash)
   ====================================================================== */

.verify-privacy-callout {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: var(--havto-blueprint-space-4);
    margin-bottom: var(--havto-blueprint-space-4);
    padding: var(--havto-blueprint-space-3) var(--havto-blueprint-space-4);
    border: 1px solid var(--havto-blueprint-divider);
    background: var(--havto-blueprint-surface);
}

.verify-privacy-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--havto-blueprint-accent);
}

.verify-privacy-text {
    font-size: 13.5px;
    line-height: var(--havto-blueprint-leading);
    margin: 0;
    color: var(--havto-blueprint-text);
}

/* Stacking context for the input/label paint order. The real <input type=file> is
   the interactive drop/click surface and sits on top; the visible <label> is the
   drop zone graphics and accessible name (HAV2238). */
.verify-file-upload {
    position: relative;
    z-index: 0;
}

.verify-drop-zone {
    display: flex;
    align-items: center;
    gap: var(--havto-blueprint-space-6);
    position: relative;
    z-index: 1;
    margin: 0;
    border: 2px dashed var(--havto-blueprint-divider);
    background: var(--havto-blueprint-surface);
    padding: var(--havto-blueprint-space-6) var(--havto-blueprint-leading);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Hover on the upload or the drop zone itself to keep visual feedback even
   when the transparent input overlay is the pointer target. */
.verify-file-upload:hover .verify-drop-zone,
.verify-drop-zone:hover,
.verify-drop-zone.drag-over {
    border-color: var(--havto-blueprint-accent);
    background-color: color-mix(in srgb, var(--havto-blueprint-accent) 7%, var(--havto-blueprint-surface));
}

/* The real <input type=file> is the interactive drop/click surface. We keep it
   visually hidden but filling the drop zone; the <label> is the visible surface
   and accessible name (HAV2238). */
.verify-file-input {
    position: absolute;
    inset: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.verify-file-input:not([hidden]) {
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
}

/* Batch verification results table + verdict receipt action */

.verify-batch {
    margin-top: var(--havto-blueprint-space-4);
}

.verify-batch-table {
    margin-bottom: var(--havto-blueprint-space-2);
}

.verify-batch-row-clickable {
    cursor: pointer;
}

.verify-batch-row-clickable:hover td {
    background-color: color-mix(in srgb, var(--havto-blueprint-accent) 6%, transparent);
}

.verify-batch-file {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 12.5px;
    word-break: break-all;
}

.verify-batch-verdict {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11.5px;
}

.verify-batch-verdict-ok {
    color: #1b5e20;
}

.verify-batch-verdict-fail {
    color: #b71c1c;
}

.verify-batch-verdict-error {
    color: var(--havto-blueprint-text-muted);
}

.verify-batch-hint {
    font-size: 12.5px;
    color: var(--havto-blueprint-text-muted);
    margin: 0 0 var(--havto-blueprint-space-4);
}

.verify-receipt-action {
    margin-top: var(--havto-blueprint-space-4);
}

.verify-drop-icon {
    display: block;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin: 0;
    color: var(--havto-blueprint-accent);
}

.verify-drop-body {
    display: flex;
    flex-direction: column;
    gap: var(--havto-blueprint-space-1);
    flex: 1 1 auto;
    min-width: 0;
}

.verify-drop-title {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin: 0;
    color: var(--havto-blueprint-text);
}

.verify-drop-hint {
    font-size: 13px;
    margin: 0;
    color: var(--havto-blueprint-text-muted);
}

.verify-drop-choose {
    color: var(--havto-blueprint-accent);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.verify-file-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.verify-file-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.verify-file-name {
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 13px;
    margin: 0;
    color: var(--havto-blueprint-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verify-file-hint {
    font-size: 12px;
    margin: 4px 0 0;
    color: var(--havto-blueprint-text-muted);
}

.verify-file-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    align-items: center;
}

.verify-button-secondary {
    align-self: center !important;
    width: auto !important;
    border-radius: 0 !important;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 13.5px;
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--havto-blueprint-divider) !important;
    color: var(--havto-blueprint-text) !important;
    background: transparent !important;
}

.verify-button-secondary:hover,
.verify-button-secondary:focus-visible {
    background-color: var(--havto-blueprint-text) !important;
    color: var(--havto-blueprint-surface) !important;
}

.verify-manual-toggle {
    margin-top: var(--havto-blueprint-space-3);
    text-align: left;
}

.verify-manual-link {
    color: var(--havto-blueprint-accent) !important;
    text-transform: none;
    font-weight: 600;
    font-size: 13.5px;
    padding: 0 !important;
}

.verify-manual-link:hover {
    color: var(--havto-blueprint-text) !important;
    background: transparent !important;
}

.verify-drop-error {
    border-left: 6px solid var(--havto-error, #C0392B);
    background: var(--havto-blueprint-surface);
    padding: 20px;
    margin-top: var(--havto-blueprint-space-4);
    text-align: left;
}

.verify-drop-error .verify-drop-error-title {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin: 0;
    color: var(--havto-error, #C0392B);
}

.verify-drop-error .verify-drop-error-body {
    font-size: 13px;
    line-height: var(--havto-blueprint-leading);
    margin: 7px 0 0;
    color: var(--havto-blueprint-text);
}

/* ==========================================================================
   Pricing rate card dialog
   Matches the blueprint .ratecard-backdrop .dialog: 660px max-width,
   86vh max-height, no border-radius, hairline border, and the .rate-h / .rate-sub
   / .first / .p micro-typography defined in the marketing pricing blueprint.
   ====================================================================== */

.mud-dialog.pricing-rate-card-dialog {
    width: 100%;
    max-width: 660px;
    max-height: 86vh;
    overflow: auto;
    border-radius: 0;
    border: 1px solid var(--havto-blueprint-divider);
    background: var(--havto-blueprint-bg);
    color: var(--havto-blueprint-text);
}

.mud-dialog.pricing-rate-card-dialog .mud-dialog-title,
.mud-dialog.pricing-rate-card-dialog .mud-dialog-title .mud-typography-h6 {
    font-family: var(--font-heading, "Barlow Condensed", "Barlow", system-ui, sans-serif);
    font-weight: var(--font-heading-weight, 600);
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--havto-blueprint-text);
    margin: 0;
}

.mud-dialog.pricing-rate-card-dialog .mud-dialog-content {
    font-family: "Barlow", system-ui, sans-serif;
    color: var(--havto-blueprint-text);
}

.mud-dialog.pricing-rate-card-dialog .mud-dialog-content .ratecard-intro,
.mud-dialog.pricing-rate-card-dialog .mud-dialog-content .ratecard-intro.mud-typography-body1 {
    font-size: 14px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text);
    color: color-mix(in srgb, var(--havto-blueprint-text) 85%, transparent);
    margin: 0 0 var(--havto-blueprint-space-2) 0;
}

.mud-dialog.pricing-rate-card-dialog .rate-h,
.mud-dialog.pricing-rate-card-dialog .rate-h.mud-typography-subtitle1 {
    font-family: var(--font-heading, "Barlow Condensed", "Barlow", system-ui, sans-serif);
    font-weight: var(--font-heading-weight, 600);
    font-size: 15px;
    letter-spacing: 0.03em;
    line-height: var(--havto-blueprint-leading);
    text-transform: uppercase;
    color: var(--havto-blueprint-text);
    margin: var(--havto-blueprint-leading) 0 var(--havto-blueprint-space-2) 0;
}

.mud-dialog.pricing-rate-card-dialog .rate-sub,
.mud-dialog.pricing-rate-card-dialog .rate-sub.mud-typography-body1 {
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 12px;
    line-height: var(--havto-blueprint-leading);
    color: var(--havto-blueprint-text-caption);
    margin: 0 0 var(--havto-blueprint-space-2) 0;
}

.mud-dialog.pricing-rate-card-dialog .blueprint-table {
    font-size: 13px;
}

.mud-dialog.pricing-rate-card-dialog .blueprint-table td {
    font-size: 13px;
}

.mud-dialog.pricing-rate-card-dialog .blueprint-table td.first {
    font-weight: 500;
}

.mud-dialog.pricing-rate-card-dialog .blueprint-table th.p,
.mud-dialog.pricing-rate-card-dialog .blueprint-table td.p {
    text-align: right;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

.mud-dialog.pricing-rate-card-dialog .mud-dialog-actions {
    justify-content: flex-end;
    padding-top: var(--havto-blueprint-space-2);
}