/* ==========================================================================
   Microland Forms design system ("Precision")
   Tokens first, then base, layout, form controls, checkout pieces, pages.
   Every page and component uses these classes. See docs/FORMS.md.
   ========================================================================== */

:root {
    /* Colour */
    --ml-canvas: #F3F4F6;
    --ml-surface: #FFFFFF;
    --ml-surface-muted: #F9FAFB;
    --ml-surface-sunken: #FAFAFB;
    --ml-ink: #101828;
    --ml-ink-2: #344054;
    --ml-muted: #475467;
    --ml-subtle: #667085;
    --ml-border: #E4E7EC;
    --ml-border-strong: #D0D5DD;
    --ml-divider: #F2F4F7;

    --ml-accent: #0B6BCB;
    --ml-accent-hover: #0957A6;
    --ml-accent-soft: #EAF3FD;
    --ml-accent-tint: #F5F9FF;
    --ml-focus-ring: 0 0 0 4px rgba(11, 107, 203, .16);

    --ml-danger: #D92D20;
    --ml-danger-ink: #B42318;
    --ml-danger-soft: #FEF3F2;
    --ml-danger-ring: 0 0 0 4px rgba(217, 45, 32, .14);
    --ml-success: #067647;
    --ml-success-ink: #1E5B2A;
    --ml-success-soft: #F0F7EE;
    --ml-warning-ink: #93370D;
    --ml-warning-soft: #FFFAEB;
    --ml-warning-border: #FEDF89;
    --ml-info-ink: #0B4A8B;
    --ml-info-soft: #F2F7FD;

    /* Type */
    --ml-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ml-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Shape and depth */
    --ml-radius-sm: 8px;
    --ml-radius: 10px;
    --ml-radius-md: 12px;
    --ml-radius-lg: 16px;
    --ml-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --ml-shadow-panel: 0 1px 2px rgba(16, 24, 40, .04);
    --ml-shadow-pop: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -2px rgba(16, 24, 40, .06);

    /* Sizing */
    --ml-control-h: 44px;
    --ml-page-max: 1400px;
    --ml-aside-w: 360px;
    --ml-sidenav-w: 232px;
    --ml-gutter: 32px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    background: var(--ml-canvas);
    color: var(--ml-ink);
    font-family: var(--ml-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: #0B5FB8; text-underline-offset: 2px; }
a:hover { color: #084A90; }
h1, h2, h3, p { margin: 0; }
h1:focus, h2:focus { outline: none; }
.ml-mono { font-family: var(--ml-mono); font-feature-settings: "zero" 1; }
.ml-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }

.ml-skip {
    position: absolute; left: 16px; top: -48px; z-index: 10;
    padding: 8px 14px; border-radius: var(--ml-radius-sm);
    background: var(--ml-ink); color: #fff; text-decoration: none; font-weight: 500;
}
.ml-skip:focus { top: 12px; color: #fff; }

/* ---------- Shell ---------- */
.ml-shell { min-height: 100vh; display: flex; flex-direction: column; }

.ml-topbar { background: var(--ml-surface); border-bottom: 1px solid var(--ml-border); }
.ml-topbar-inner {
    max-width: var(--ml-page-max); margin: 0 auto; padding: 0 var(--ml-gutter);
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ml-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ml-ink); min-width: 0; }
.ml-brand img { height: 20px; width: auto; display: block; }
.ml-brand-product {
    font-size: 14px; color: var(--ml-subtle); padding-left: 12px; border-left: 1px solid var(--ml-border);
    white-space: nowrap;
}
.ml-brand:hover { color: var(--ml-ink); }
.ml-topbar-help { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ml-muted); text-decoration: none; }
.ml-topbar-help:hover { color: var(--ml-ink); }

.ml-content { flex: 1; width: 100%; max-width: var(--ml-page-max); margin: 0 auto; padding: 40px var(--ml-gutter) 80px; }
.ml-page { min-width: 0; }

/* ---------- Services nav ----------
   A sticky rail beside the page from 1320px; below that, a row of text tabs above it.
   Deliberately quiet: no fills or rounded rows. Group headings sit on a hairline, the
   current service is set in ink with a short dash in the margin. */
.ml-sidenav { display: flex; flex-direction: column; }
.ml-sidenav-section { display: flex; flex-direction: column; margin-top: 26px; }
.ml-sidenav-group {
    margin: 0 0 6px; padding: 0 0 8px 18px; border-bottom: 1px solid var(--ml-border);
    font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ml-subtle);
}
.ml-sidenav-link {
    position: relative; display: flex; flex-direction: column; gap: 1px;
    padding: 9px 0 9px 18px; text-decoration: none; color: var(--ml-ink-2);
    transition: color .12s ease;
}
.ml-sidenav-link:hover { color: var(--ml-ink); }
.ml-sidenav-link:hover .ml-sidenav-title { color: var(--ml-ink); }
.ml-sidenav-link:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; border-radius: 4px; }
.ml-sidenav-brand { font-size: 12px; line-height: 1.4; color: var(--ml-subtle); }
.ml-sidenav-title { position: relative; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ml-ink-2); }
.ml-sidenav-price { margin-top: 2px; font-family: var(--ml-mono); font-size: 12px; line-height: 1.4; color: var(--ml-subtle); font-feature-settings: "zero" 1; }
.ml-sidenav-link.is-current .ml-sidenav-title { color: var(--ml-ink); font-weight: 600; }
.ml-sidenav-link.is-current .ml-sidenav-price { color: var(--ml-ink-2); }
.ml-sidenav-link.is-current .ml-sidenav-title::before {
    content: ""; position: absolute; left: -18px; top: 50%; width: 10px; height: 2px; margin-top: -1px;
    background: var(--ml-ink); border-radius: 1px;
}

@media (min-width: 1320px) {
    .ml-content { display: grid; grid-template-columns: var(--ml-sidenav-w) minmax(0, 1fr); column-gap: 40px; align-items: start; }
    .ml-sidenav { position: sticky; top: 24px; }
}
@media (max-width: 1319.98px) {
    .ml-sidenav {
        flex-direction: row; gap: 28px; overflow-x: auto; scrollbar-width: none;
        margin: -12px calc(-1 * var(--ml-gutter)) 28px; padding: 0 var(--ml-gutter);
        border-bottom: 1px solid var(--ml-border);
    }
    .ml-sidenav::-webkit-scrollbar { display: none; }
    .ml-sidenav-group, .ml-sidenav-brand, .ml-sidenav-price { display: none; }
    .ml-sidenav-section { display: contents; }
    .ml-sidenav-link {
        display: block; flex: none; white-space: nowrap; padding: 12px 0 13px;
        box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .12s ease, color .12s ease;
    }
    .ml-sidenav-link:hover { box-shadow: inset 0 -2px 0 var(--ml-border-strong); }
    .ml-sidenav-link.is-current { box-shadow: inset 0 -2px 0 var(--ml-ink); }
    .ml-sidenav-link.is-current .ml-sidenav-title::before { display: none; }
    .ml-sidenav-link:focus-visible { outline-offset: -2px; border-radius: 0; }
}

.ml-footer { border-top: 1px solid var(--ml-border); background: var(--ml-surface); }
.ml-footer-inner {
    max-width: var(--ml-page-max); margin: 0 auto; padding: 20px var(--ml-gutter);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    font-size: 13px; color: var(--ml-subtle);
}
.ml-footer-stripe { display: inline-flex; align-items: center; gap: 6px; }
.ml-footer-stripe img { height: 18px; opacity: .8; }

/* ---------- Page header ---------- */
.ml-eyebrow { font-size: 13px; font-weight: 500; color: var(--ml-accent); margin-bottom: 8px; letter-spacing: .01em; }
.ml-title { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.ml-lede { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ml-muted); max-width: 640px; }

.ml-layout { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.ml-layout.has-aside { grid-template-columns: minmax(0, 1fr) var(--ml-aside-w); }
.ml-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ml-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Panels ---------- */
.ml-panel {
    background: var(--ml-surface); border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-panel); padding: 24px;
}
.ml-panel-title { font-size: 16px; font-weight: 600; }
.ml-panel-title + * { margin-top: 16px; }
.ml-panel--tight { padding: 20px 24px; }

/* ---------- Progress ---------- */
.ml-progress { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }
.ml-progress-bar { height: 4px; border-radius: 4px; background: var(--ml-border); }
.ml-progress-item.is-done .ml-progress-bar { background: var(--ml-accent); }
.ml-progress-item.is-current .ml-progress-bar { background: linear-gradient(90deg, var(--ml-accent) 50%, var(--ml-border) 50%); }
.ml-progress-label { margin-top: 10px; font-size: 13px; color: var(--ml-subtle); display: flex; gap: 6px; align-items: center; }
.ml-progress-item.is-done .ml-progress-label { color: var(--ml-muted); }
.ml-progress-item.is-current .ml-progress-label { color: var(--ml-ink); font-weight: 600; }

/* ---------- Sections (checkout cards) ---------- */
.ml-section { scroll-margin-top: 24px; }
.ml-section-head { display: flex; gap: 14px; align-items: center; }
.ml-section.is-active .ml-section-head { margin-bottom: 24px; }
.ml-section-title { font-size: 18px; font-weight: 600; }
.ml-section-desc { margin: -16px 0 24px 42px; font-size: 14px; color: var(--ml-muted); }
.ml-badge {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.ml-badge--active { background: var(--ml-accent); color: #fff; }
.ml-badge--done { background: var(--ml-accent-soft); }
.ml-badge--todo { border: 1px solid var(--ml-border-strong); color: var(--ml-subtle); }

.ml-section.is-active { padding: 28px; }
.ml-section.is-done { padding: 20px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ml-section.is-done .ml-section-head { align-items: flex-start; min-width: 0; }
.ml-section.is-done .ml-section-title { font-size: 16px; }
.ml-section-summary { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ml-muted); overflow-wrap: anywhere; }
.ml-section.is-todo { padding: 20px 28px; background: var(--ml-surface-sunken); box-shadow: none; }
.ml-section.is-todo .ml-section-title { font-size: 16px; font-weight: 500; color: var(--ml-subtle); }

.ml-section-body { display: flex; flex-direction: column; gap: 20px; }
.ml-section-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px;
    padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--ml-divider);
}
.ml-submit-note { font-size: 14px; color: var(--ml-muted); margin-right: auto; }
.ml-submit-note strong { color: var(--ml-ink); font-weight: 600; }

/* ---------- Field layout ---------- */
.ml-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ml-row--3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1fr); }
/* Fields that only apply once a particular choice is made, shown indented under that choice. */
.ml-subfields {
    display: flex; flex-direction: column; gap: 20px;
    margin: -6px 0 0 16px; padding: 14px 0 6px 20px;
    border-left: 3px solid var(--ml-accent);
}
.ml-field { min-width: 0; }
.ml-w-xs .ml-input { max-width: 8.5rem; }
.ml-w-sm .ml-input { max-width: 13rem; }
.ml-w-md .ml-input { max-width: 22rem; }

fieldset.ml-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.ml-label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; color: var(--ml-ink-2); padding: 0; }
legend.ml-label { margin-bottom: 10px; }
.ml-optional { font-weight: 400; color: var(--ml-subtle); }
.ml-hint { font-size: 13px; line-height: 1.45; color: var(--ml-muted); margin: 6px 0 0; }
.ml-error { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ml-danger-ink); margin: 6px 0 0; }
.ml-error svg { flex: none; margin-top: 1px; }

/* ---------- Controls ---------- */
.ml-input {
    display: block; width: 100%; height: var(--ml-control-h); padding: 0 12px;
    font: inherit; font-size: 16px; color: var(--ml-ink); background: var(--ml-surface);
    border: 1px solid var(--ml-border-strong); border-radius: var(--ml-radius);
    outline: none; box-shadow: var(--ml-shadow-xs);
    appearance: none; -webkit-appearance: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ml-input::placeholder { color: #98A2B3; }
.ml-input:hover { border-color: #B9C0CB; }
.ml-input:focus { border-color: var(--ml-accent); box-shadow: var(--ml-focus-ring); }
.ml-input[aria-invalid="true"] { border-color: var(--ml-danger); }
.ml-input[aria-invalid="true"]:focus { box-shadow: var(--ml-danger-ring); }
.ml-input:disabled { background: var(--ml-surface-muted); color: var(--ml-subtle); cursor: not-allowed; }
textarea.ml-input { height: auto; min-height: 128px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ml-input--upper { text-transform: uppercase; }
.ml-input--upper::placeholder { text-transform: none; }

select.ml-input {
    padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
select.ml-input.is-placeholder { color: #98A2B3; }

/* Date: Day / Month / Year */
.ml-date { display: flex; gap: 12px; align-items: flex-end; }
.ml-date-part { display: flex; flex-direction: column; }
.ml-date-part label { font-size: 13px; color: var(--ml-muted); margin-bottom: 4px; }
.ml-date-part .ml-input { width: 4.25rem; text-align: center; }
.ml-date-part--year .ml-input { width: 5.75rem; }

/* File attachment */
.ml-file {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border: 1px dashed var(--ml-border-strong); border-radius: var(--ml-radius-md); background: var(--ml-surface-muted);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ml-file.has-file { border-style: solid; background: var(--ml-surface); }
.ml-file:focus-within { border-color: var(--ml-accent); box-shadow: var(--ml-focus-ring); }
.ml-file.is-invalid { border-color: var(--ml-danger); }
.ml-file-body { flex: 1; min-width: 0; }
.ml-file-name { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ml-file:not(.has-file) .ml-file-name { color: var(--ml-muted); font-weight: 400; }
.ml-file-meta { margin-top: 2px; font-size: 13px; color: var(--ml-muted); }
.ml-file-pick { cursor: pointer; }
.ml-file-pick.is-disabled { pointer-events: none; opacity: .6; }

/* Choice tiles (radio cards) */
.ml-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ml-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-tiles--1 { grid-template-columns: minmax(0, 1fr); }
.ml-tile {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border: 1px solid var(--ml-border-strong); border-radius: var(--ml-radius-md);
    background: var(--ml-surface); cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.ml-tile:hover { border-color: #B9C0CB; }
.ml-tile input {
    position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; margin: 0;
    accent-color: var(--ml-accent); cursor: pointer;
}
.ml-tile.is-on { border-color: var(--ml-accent); background: var(--ml-accent-tint); box-shadow: inset 0 0 0 1px var(--ml-accent); }
.ml-tile:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--ml-accent), var(--ml-focus-ring); }
.ml-tile.is-disabled { cursor: not-allowed; background: var(--ml-surface-muted); color: var(--ml-subtle); }
.ml-tile.is-disabled input { cursor: not-allowed; }
.ml-tile-title { font-size: 15px; font-weight: 600; padding-right: 28px; }
.ml-tile-meta { font-size: 15px; font-weight: 500; color: var(--ml-ink); }
.ml-tile-desc { font-size: 14px; line-height: 1.45; color: var(--ml-muted); }
.ml-tiles.is-invalid .ml-tile:not(.is-disabled) { border-color: var(--ml-danger); }

/* Combobox */
.ml-combo { position: relative; }
.ml-combo-icon { position: absolute; left: 12px; top: 14px; pointer-events: none; }
.ml-combo .ml-input { padding-left: 36px; padding-right: 36px; }
.ml-combo-clear {
    position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: var(--ml-radius-sm);
    background: transparent; color: var(--ml-subtle); cursor: pointer; display: grid; place-items: center;
}
.ml-combo-clear:hover { background: var(--ml-surface-muted); color: var(--ml-ink); }
.ml-listbox {
    list-style: none; margin: 6px 0 0; padding: 6px; max-height: 300px; overflow-y: auto;
    background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--ml-radius-md);
    box-shadow: var(--ml-shadow-pop); position: absolute; left: 0; right: 0; z-index: 20;
}
.ml-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: var(--ml-radius-sm); font-size: 15px; cursor: pointer;
}
.ml-option b { font-weight: 600; }
.ml-option.is-active { background: var(--ml-info-soft); }
.ml-option--other { color: var(--ml-muted); border-top: 1px solid var(--ml-divider); margin-top: 4px; border-radius: 0 0 8px 8px; }
.ml-listbox-empty { padding: 10px 12px; font-size: 14px; color: var(--ml-subtle); }

/* ---------- Buttons ---------- */
.ml-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 22px; border: 0; border-radius: var(--ml-radius);
    background: var(--ml-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 500;
    cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); text-decoration: none; white-space: nowrap;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.ml-btn:hover { background: var(--ml-accent-hover); color: #fff; }
.ml-btn:focus-visible { outline: none; box-shadow: var(--ml-focus-ring); }
.ml-btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.ml-btn--secondary { background: var(--ml-surface); color: var(--ml-ink-2); border: 1px solid var(--ml-border-strong); box-shadow: var(--ml-shadow-xs); }
.ml-btn--secondary:hover { background: var(--ml-surface-muted); color: var(--ml-ink); }
.ml-btn--ghost {
    height: 36px; padding: 0 12px; border-radius: var(--ml-radius-sm); font-size: 14px;
    background: var(--ml-surface); color: var(--ml-ink-2); border: 1px solid var(--ml-border-strong); box-shadow: none;
}
.ml-btn--ghost:hover { background: var(--ml-surface-muted); color: var(--ml-ink); }
.ml-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: ml-spin .7s linear infinite;
}
.ml-btn--secondary .ml-spinner, .ml-btn--ghost .ml-spinner { border-color: var(--ml-border); border-top-color: var(--ml-accent); }
@keyframes ml-spin { to { transform: rotate(360deg); } }
.ml-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Notices ---------- */
.ml-notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--ml-radius); font-size: 14px; line-height: 1.5; }
.ml-notice svg { flex: none; margin-top: 2px; }
.ml-notice-title { font-weight: 600; }
.ml-notice--info { background: var(--ml-info-soft); color: var(--ml-info-ink); }
.ml-notice--success { background: var(--ml-success-soft); color: var(--ml-success-ink); }
.ml-notice--warning { background: var(--ml-warning-soft); color: var(--ml-warning-ink); border: 1px solid var(--ml-warning-border); }
.ml-notice--error { background: var(--ml-danger-soft); color: var(--ml-danger-ink); }
.ml-notice a { color: inherit; }

/* ---------- Summary ---------- */
.ml-product { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--ml-radius-md); background: var(--ml-surface-muted); }
.ml-product-icon {
    flex: none; width: 44px; height: 44px; border-radius: var(--ml-radius); background: var(--ml-surface);
    border: 1px solid var(--ml-border); display: grid; place-items: center; color: var(--ml-ink-2);
}
.ml-product-title { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ml-product-title .ml-mono { font-size: 14px; }
.ml-product-meta { margin-top: 2px; font-size: 13px; color: var(--ml-muted); }
.ml-product--empty .ml-product-title { color: var(--ml-subtle); font-weight: 400; }

.ml-lines { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.ml-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ml-line-label { color: var(--ml-muted); }
.ml-line-amount { font-variant-numeric: tabular-nums; }
.ml-line--total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--ml-border); font-size: 16px; font-weight: 600; }
.ml-line--total .ml-line-label { color: var(--ml-ink); }
.ml-lines + .ml-notice { margin-top: 16px; }
.ml-fineprint { margin-top: 12px; font-size: 12px; color: var(--ml-subtle); }

.ml-steps { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--ml-muted); }
.ml-steps li + li { margin-top: 2px; }
.ml-steps--large { padding: 0; list-style: none; counter-reset: ml-step; font-size: 15px; color: var(--ml-ink-2); }
.ml-steps--large li { counter-increment: ml-step; position: relative; padding-left: 40px; min-height: 28px; }
.ml-steps--large li + li { margin-top: 14px; }
.ml-steps--large li::before {
    content: counter(ml-step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--ml-accent-soft); color: var(--ml-accent); font-size: 13px; font-weight: 600; display: grid; place-items: center;
}
.ml-help { margin-top: 14px; font-size: 14px; color: var(--ml-muted); }

/* ---------- FAQ ---------- */
.ml-faq-list { margin-top: 8px; }
.ml-faq { border-top: 1px solid var(--ml-divider); }
.ml-faq:first-child { border-top: 0; }
.ml-faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 14px 0; font-size: 15px; font-weight: 500; color: var(--ml-ink);
}
.ml-faq summary::-webkit-details-marker { display: none; }
.ml-faq summary svg { flex: none; transition: transform .15s ease; color: var(--ml-subtle); }
.ml-faq[open] summary svg { transform: rotate(180deg); }
.ml-faq summary:hover { color: var(--ml-accent); }
.ml-faq-body { padding: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ml-muted); max-width: 64ch; }
.ml-faq-body p + p { margin-top: 8px; }

/* ---------- Details list (confirmation) ---------- */
.ml-details { margin: 0; display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
.ml-details dt, .ml-details dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--ml-divider); font-size: 14px; }
.ml-details dt { color: var(--ml-muted); padding-right: 16px; }
.ml-details dd { color: var(--ml-ink); overflow-wrap: anywhere; white-space: pre-line; }
.ml-details dt:first-of-type, .ml-details dt:first-of-type + dd { border-top: 0; }

.ml-confirm { display: flex; gap: 20px; align-items: flex-start; }
.ml-confirm-icon {
    flex: none; width: 48px; height: 48px; border-radius: 50%;
    background: var(--ml-success-soft); color: var(--ml-success); display: grid; place-items: center;
}
.ml-ref { margin-top: 20px; display: inline-flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: var(--ml-radius-md); background: var(--ml-surface); border: 1px solid var(--ml-border); }
.ml-ref-label { font-size: 13px; color: var(--ml-muted); }
.ml-ref-value { font-family: var(--ml-mono); font-size: 22px; font-weight: 500; letter-spacing: .02em; color: var(--ml-ink); }
.ml-address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--ml-ink-2); }

.ml-skeleton { border-radius: var(--ml-radius-sm); background: linear-gradient(90deg, #EEF0F3 0%, #F6F7F9 50%, #EEF0F3 100%); background-size: 200% 100%; animation: ml-shimmer 1.2s ease-in-out infinite; }
@keyframes ml-shimmer { to { background-position: -200% 0; } }

/* ---------- Landing ---------- */
.ml-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ml-services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .ml-services--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ml-service {
    display: flex; flex-direction: column; gap: 6px; padding: 24px; text-decoration: none; color: var(--ml-ink);
    background: var(--ml-surface); border: 1px solid var(--ml-border); border-radius: var(--ml-radius-lg);
    box-shadow: var(--ml-shadow-panel); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ml-service:hover { color: var(--ml-ink); border-color: #B9C8DB; box-shadow: var(--ml-shadow-pop); transform: translateY(-1px); }
.ml-service:focus-visible { outline: none; box-shadow: var(--ml-focus-ring); border-color: var(--ml-accent); }
.ml-service-brand { font-size: 13px; color: var(--ml-subtle); }
.ml-service-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ml-service-desc { font-size: 14px; line-height: 1.55; color: var(--ml-muted); }
.ml-service-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.ml-service-price { color: var(--ml-ink-2); }
.ml-service-go { display: inline-flex; align-items: center; gap: 6px; color: var(--ml-accent); font-weight: 500; }
.ml-service:hover .ml-service-go svg { transform: translateX(2px); }
.ml-service-go svg { transition: transform .15s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .ml-layout.has-aside { grid-template-columns: minmax(0, 1fr); }
    .ml-aside { position: static; }
}
@media (max-width: 640px) {
    :root { --ml-gutter: 16px; }
    .ml-content { padding-top: 24px; padding-bottom: 56px; }
    .ml-title { font-size: 28px; }
    .ml-layout { margin-top: 24px; }
    .ml-row, .ml-row--3, .ml-tiles, .ml-tiles--3, .ml-services, .ml-services--3 { grid-template-columns: minmax(0, 1fr); }
    .ml-subfields { margin-left: 8px; padding-left: 14px; }
    .ml-section.is-active { padding: 20px; }
    .ml-section.is-done, .ml-section.is-todo { padding: 16px 20px; }
    .ml-section-desc { margin-left: 0; }
    .ml-panel { padding: 20px; }
    .ml-progress-text { display: none; }
    .ml-section-foot .ml-btn--primary { width: 100%; }
    .ml-submit-note { margin-right: 0; width: 100%; text-align: center; order: 2; }
    .ml-brand-product { display: none; }
    .ml-topbar-help span { display: none; }
    .ml-details { grid-template-columns: minmax(0, 1fr); }
    .ml-details dt { padding-bottom: 0; }
    .ml-details dd { border-top: 0; padding-top: 2px; }
    .ml-confirm { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print (confirmation pages) ---------- */
@media print {
    html, body { background: #fff; }
    .ml-topbar, .ml-footer, .ml-sidenav, .ml-no-print, .ml-skip { display: none !important; }
    .ml-content { display: block; padding: 0; max-width: none; }
    .ml-panel { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    .ml-layout.has-aside { grid-template-columns: minmax(0, 1fr) 280px; }
    .ml-aside { position: static; }
}

/* ---------- Blazor runtime chrome ---------- */
.ml-boot { min-height: 100vh; display: grid; place-items: center; }
.ml-boot .ml-spinner { width: 28px; height: 28px; border-width: 3px; border-color: var(--ml-border); border-top-color: var(--ml-accent); }

#blazor-error-ui {
    display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
    max-width: 560px; margin: 0 auto; padding: 14px 44px 14px 16px;
    background: var(--ml-ink); color: #fff; border-radius: var(--ml-radius-md); box-shadow: var(--ml-shadow-pop);
    font-size: 14px;
}
#blazor-error-ui a { color: #9CC8F5; }
#blazor-error-ui .dismiss { position: absolute; right: 14px; top: 12px; cursor: pointer; color: #fff; text-decoration: none; }
.blazor-error-boundary { padding: 16px; border-radius: var(--ml-radius); background: var(--ml-danger-soft); color: var(--ml-danger-ink); }
.blazor-error-boundary::after { content: "Something went wrong loading this part of the page."; }