/* ============================================================================
   Prenup interactive tools — shared styling
   Clean editorial: Poppins, navy #003366 used sparingly, thin dividers, generous
   whitespace. No boxy cards / icon-chips / accent bars.
   Used by: prenup_calculator.html, prenup_validity_checker.html, prenup_statistics.html
   ============================================================================ */
.calc-section,
.quiz-section,
.stats-section,
.poll-section,
.cite-section,
.tool-explainer {
    --tool-navy: #003366;
    --tool-navy-2: #004d80;
    --tool-ink: #1f2937;
    --tool-muted: #6b7280;
    --tool-line: #e5e7eb;
    --tool-surface: #f8fafc;
    --tool-risk: #c0392b;
    --tool-safe: #1e8449;
    --tool-amber: #b9770a;
    font-family: 'Poppins', Arial, sans-serif;
    color: #1f2937;
}

/* ── Hero band (shared across all tools; matches the free-tools hub hero) ───── */
.tool-hero-band {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    width: 100vw; max-width: 100vw;
    background: #003366;
    color: #fff;
    padding: 40px 0 52px;
    text-align: center;
    font-family: 'Poppins', Arial, sans-serif;
}
.tool-hero-band .container { max-width: 900px; }

/* Breadcrumb, integrated into the hero on a dark background */
.tool-hero-crumb {
    font-size: 0.82rem;
    color: #a9c3dc;
    margin: 0 0 22px;
}
.tool-hero-crumb a { color: #cfe0f0; text-decoration: none; }
.tool-hero-crumb a:hover { color: #ffffff; text-decoration: underline; }
.tool-hero-crumb span[aria-hidden] { margin: 0 7px; color: #6f92b5; }
.tool-hero-crumb .current { color: #a9c3dc; }

.tool-hero-band h1 {
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.95rem, 4.4vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 auto 18px;
    max-width: 20em;
}
.tool-hero-desc {
    font-size: 1.13rem;
    line-height: 1.65;
    color: #dbe7f2;
    max-width: 44em;
    margin: 0 auto 16px;
}
.tool-hero-desc a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.tool-hero-desc a:hover { color: #cfe0f0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.tool-btn {
    display: inline-block;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tool-btn-primary { background: #003366; color: #fff; border-color: #003366; }
.tool-btn-primary:hover { background: #004d80; border-color: #004d80; color: #fff; }
.tool-btn-ghost { background: transparent; color: #003366; border-color: #cbd5e1; }
.tool-btn-ghost:hover { border-color: #003366; color: #003366; background: #f8fafc; }

/* ── Shared explainer / related ───────────────────────────────────────────── */
.tool-explainer { padding: 54px 0; border-top: 1px solid #e5e7eb; }

/* Centred header (title + intro) for the explainer sections */
.explainer-head { text-align: center; max-width: 44em; margin: 0 auto 34px; }
.explainer-head h2 {
    font-weight: 800;
    color: #003366;
    font-size: clamp(1.75rem, 3.2vw, 2.2rem);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.explainer-lead { font-size: 1.08rem; line-height: 1.7; color: #4b5563; margin: 0; }
/* The h2's bottom margin is the gap to the lead. Where a band has no lead
   (the deadline planner), that margin stacks on the head's own and opens a
   38px gap above the steps for nothing. */
.explainer-head h2:last-child { margin-bottom: 0; }

.stats-section h2,
.cite-section h2 {
    font-weight: 800;
    color: #003366;
    font-size: 1.5rem;
    margin: 0 0 16px;
}

/* Numbered principle cards — 2×2 grid */
.explainer-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 62em;
    margin: 0 auto;
    align-items: stretch;
}
/* An odd final card (e.g. the checker's 5th) spans the full width so it never sits alone. */
.explainer-steps .explainer-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
.explainer-step {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 34px 34px 36px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.explainer-step:hover {
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.14);
    transform: translateY(-4px);
    border-color: #dbe6f2;
}
.explainer-step-text h3 {
    color: #003366;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 16px;
    line-height: 1.3;
}
.explainer-step-text p { color: #4b5768; font-size: 0.99rem; line-height: 1.75; margin: 0; }
.explainer-step-text a {
    color: #003366; font-weight: 600;
    text-decoration: underline; text-decoration-color: rgba(0, 51, 102, 0.3); text-underline-offset: 2px;
}
.explainer-step-text a:hover { text-decoration-color: #003366; }

/* Plain bullet list (used for the statistics "Sources & notes") */
.tool-list { list-style: none; padding: 0; margin: 18px auto 0; max-width: 48em; }
.tool-list li {
    position: relative;
    padding: 0 0 14px 22px;
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
}
.tool-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #003366;
}
.tool-sources li { color: #4b5563; font-size: 0.95rem; }
.tool-note {
    font-size: 0.92rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.7;
    margin: 28px auto 0;
    max-width: 52em;
    text-align: center;
}

/* Final CTA — pulled from the homepage (.home-final-cta) so every tool matches */
.home-final-cta {
    background-color: #003366;
    padding: 60px 40px;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.home-final-cta h2 { color: #ffffff; font-weight: 700; }
.home-final-cta p { color: rgba(255, 255, 255, 0.9); }
.home-final-cta-btn {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #003366 !important;
    font-weight: 600;
}
.home-final-cta-btn:hover {
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
    color: #003366 !important;
}

.tool-note a, .tool-list a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tool-note a:hover, .tool-list a:hover { color: #004d80; }

/* FAQ — accordion, matching the homepage (.seo-accordion) so styling is consistent */
.tool-faq { padding: 40px 0; border-top: 1px solid #e5e7eb; }
.tool-faq h2 {
    font-weight: 800;
    color: #003366;
    font-size: clamp(1.75rem, 3.2vw, 2.2rem);
    letter-spacing: -0.01em;
    margin: 0 0 28px;
    text-align: center;
}
.seo-accordion { display: flex; flex-direction: column; gap: 12px; }
.seo-accordion-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 51, 102, 0.06);
    border: 1px solid rgba(0, 51, 102, 0.06);
    overflow: hidden;
    transition: box-shadow 0.25s;
}
.seo-accordion-item:hover { box-shadow: 0 4px 24px rgba(0, 51, 102, 0.10); }
.seo-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    /* The trigger now sits INSIDE the h3.seo-accordion-title — inherit its
       typography so the question renders as the heading, not button default. */
    font: inherit;
    color: inherit;
}
.seo-accordion-trigger:hover { background: rgba(0, 51, 102, 0.02); }
.seo-accordion-trigger:focus { outline: none; }
.seo-accordion-trigger:focus-visible { outline: 2px solid #0066cc; outline-offset: -3px; border-radius: 12px; }
.seo-accordion-title { color: #003366; font-weight: 700; font-size: 1.15rem; margin: 0; line-height: 1.4; }
.seo-accordion-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease, background 0.3s;
}
.seo-accordion-icon i { color: #003366; font-size: 0.8rem; transition: transform 0.3s ease; }
.seo-accordion-trigger[aria-expanded="true"] .seo-accordion-icon { background: #003366; }
.seo-accordion-trigger[aria-expanded="true"] .seo-accordion-icon i { color: #fff; transform: rotate(180deg); }
.seo-accordion-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.35s ease; }
.seo-accordion-panel.is-open { grid-template-rows: 1fr; }
.seo-accordion-body { padding: 0 28px; overflow: hidden; min-height: 0; }
.seo-accordion-body::after { content: ""; display: block; height: 24px; }
.seo-accordion-body p { color: #3a4a5a; font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.seo-accordion-body p:last-child { margin-bottom: 0; }
.seo-accordion-body a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 51, 102, 0.25);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.seo-accordion-body a:hover { text-decoration-color: #003366; }
@media (max-width: 767px) {
    .seo-accordion-trigger { padding: 16px 20px; }
    .seo-accordion-body { padding: 0 20px; }
    .seo-accordion-title { font-size: 1.05rem; }
}


/* ============================================================================
   FREE TOOLS HUB
   ============================================================================ */
.hub-hero {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    width: 100vw; max-width: 100vw;
    background: #003366;
    color: #fff;
    padding: 56px 0 60px;
    text-align: center;
    font-family: 'Poppins', Arial, sans-serif;
}
.hub-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 3rem);
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.hub-hero-lead {
    color: #dbe7f2;
    font-size: 1.12rem;
    line-height: 1.65;
    max-width: 46em;
    margin: 0 auto;
}
.hub-hero-lead a { color: #ffffff; text-decoration: underline; font-weight: 600; }
.hub-hero-lead a:hover { color: #cfe0f0; }

.hub-section { padding: 48px 0 8px; font-family: 'Poppins', Arial, sans-serif; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 18px;
    padding: 40px 34px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(2, 20, 43, 0.06);
    transition: box-shadow .18s ease, transform .18s ease;
}
.hub-card:hover {
    box-shadow: 0 16px 38px rgba(2, 20, 43, 0.12);
    transform: translateY(-4px);
    text-decoration: none;
}
.hub-card-title { font-weight: 800; color: #003366; font-size: 1.3rem; margin: 0 0 18px; }
.hub-card-desc { font-size: 1rem; line-height: 1.65; color: #5b6b86; margin: 0 0 26px; flex: 1; }
.hub-card-desc strong { color: #2b3a52; }
.hub-card-cta {
    font-weight: 700;
    color: #003366;
    font-size: 1rem;
}
.hub-card-cta span[aria-hidden] { transition: transform .15s ease; display: inline-block; margin-left: 3px; }
.hub-card:hover .hub-card-cta span[aria-hidden] { transform: translateX(4px); }

.hub-cta-section { padding: 44px 0 8px; font-family: 'Poppins', Arial, sans-serif; }
.hub-cta-band {
    background: linear-gradient(135deg, #003366 0%, #004d80 100%);
    border-radius: 14px;
    padding: 44px 32px;
    text-align: center;
    color: #fff;
}
.hub-cta-band h2 { color: #fff; font-weight: 800; font-size: 1.7rem; margin: 0 0 12px; }
.hub-cta-band p { color: #dbe7f2; font-size: 1.02rem; line-height: 1.6; max-width: 40em; margin: 0 auto 24px; }
.hub-cta-band a { color: #fff; text-decoration: underline; }
.hub-cta-btn { background: #fff !important; color: #003366 !important; border-color: #fff !important; text-decoration: none !important; }
.hub-cta-btn:hover { background: #eef4fa !important; color: #003366 !important; }
.hub-footnote { padding: 10px 0 54px; text-align: center; font-family: 'Poppins', Arial, sans-serif; }
.hub-footnote p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #64748b;
    margin: 0 auto;
    max-width: 38em;
}
.hub-footnote a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 2px;
}
.hub-footnote a:hover { text-decoration-color: #003366; }

/* ============================================================================
   TOOL 1 — Asset-at-risk calculator
   ============================================================================ */
.calc-section { padding: 40px 0 12px; }
.calc-grid { /* layout set in TOOL PAGE COMPOSITION below */ }

/* Inputs — carded to match the result panel */
.calc-inputs {
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 32px 34px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}
.calc-h2 { font-weight: 800; color: #003366; font-size: 1.3rem; margin: 0 0 22px; }

.calc-field { margin-bottom: 20px; }
.calc-field > label {
    display: block;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.98rem;
    margin-bottom: 5px;
}
.calc-hint { display: block; font-size: 0.82rem; color: #6b7280; margin-bottom: 9px; line-height: 1.45; }
.calc-money {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d8e0ea;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-money:focus-within { border-color: #003366; box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.10); }
.calc-money > span {
    padding: 0 14px;
    color: #64748b;
    background: #f4f7fb;
    display: flex;
    align-items: center;
    font-weight: 700;
    border-right: 1px solid #e5e7eb;
}
.calc-money > input {
    border: 0;
    outline: 0;
    padding: 13px 15px;
    font-size: 1.08rem;
    width: 100%;
    font-family: 'Poppins', Arial, sans-serif;
    color: #1f2937;
}
.calc-money > input::placeholder { color: #b6c0cc; }

/* Result panel */
.calc-result {
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 32px 32px 34px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
}
.calc-result-kicker {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8194a7;
    margin: 0 0 9px;
}
.calc-result-figure {
    font-weight: 800;
    color: #c0392b;
    font-size: clamp(2.6rem, 6.8vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    font-variant-numeric: tabular-nums;
}
.calc-bar { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: #eef2f6; box-shadow: inset 0 1px 2px rgba(0, 51, 102, 0.06); }
.calc-bar-risk { background: linear-gradient(90deg, #b93327, #d9534f); transition: width .35s ease; }
.calc-bar-safe { background: linear-gradient(90deg, #1e8449, #27ae60); transition: width .35s ease; }
.calc-bar-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    color: #56636f;
    margin: 13px 0 22px;
    gap: 10px;
}
.calc-bar-legend span { display: inline-flex; align-items: center; }
.calc-bar-legend strong { color: #1f2937; margin-left: 5px; font-variant-numeric: tabular-nums; }
.calc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; flex: none; }
.calc-dot-risk { background: #c0392b; }
.calc-dot-safe { background: #1e8449; }
.calc-breakdown { margin: 0 0 24px; border-top: 1px solid #eef2f7; padding-top: 6px; }
.calc-breakdown > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    font-size: 0.95rem;
}
.calc-breakdown > div + div { border-top: 1px solid #f1f4f9; }
.calc-breakdown dt { color: #56636f; margin: 0; font-weight: 500; text-align: left; }
.calc-breakdown dd { color: #1f2937; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-breakdown > div:first-child dt { color: #1f2937; font-weight: 600; }
.calc-breakdown > div:first-child dd { color: #003366; }
.calc-cta { border-top: 1px solid #eef2f7; padding-top: 22px; }
.calc-cta .tool-btn { display: block; width: 100%; margin-bottom: 10px; padding: 14px 26px; }
.calc-cta .tool-btn-primary { box-shadow: 0 6px 16px rgba(0, 51, 102, 0.18); }
.calc-cta .tool-btn:last-child { margin-bottom: 0; }
.calc-benchmark {
    margin: 26px auto 0;
    padding: 18px 22px;
    background: #f1f6fb;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    font-size: 0.96rem;
    color: #374151;
    text-align: center;
    max-width: 52em;
    line-height: 1.55;
}
.calc-benchmark strong { color: #003366; }

/* ============================================================================
   TOOL 2 — Radmacher validity checker
   ============================================================================ */
.quiz-section { padding: 34px 0 14px; }

/* The quiz lives in the same card language as the calculator's input panel —
   centred, white, soft navy shadow — so the two tools read as one family. */
.quiz {
    max-width: 780px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 38px 42px 34px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}

.quiz-list { list-style: none; padding: 0; margin: 0; }
.quiz-q { padding: 24px 0; border-top: 1px solid #eef1f5; scroll-margin-top: 96px; }
.quiz-q:first-child { border-top: 0; padding-top: 0; }

.quiz-prompt {
    font-size: 1.08rem;
    font-weight: 700;
    color: #003366;
    margin: 0 0 14px;
    line-height: 1.5;
}
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opts label {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border: 1.5px solid #dbe1e8;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    color: #374151;
    background: #fff;
    transition: border-color .13s ease, background-color .13s ease, box-shadow .13s ease;
    margin: 0;
}
.quiz-opts label:hover { border-color: #8fa9c2; background: #f8fafc; }
.quiz-opts input[type="radio"] {
    /* Custom ring: the native unchecked radio is nearly invisible on white. */
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #b6c4d4;
    border-radius: 50%;
    background: #fff;
    flex: none;
    margin: 0;
    cursor: pointer;
    transition: border-color .13s ease, border-width .13s ease;
}
.quiz-opts label:hover input[type="radio"] { border-color: #8fa9c2; }
.quiz-opts input[type="radio"]:checked {
    border-color: #003366;
    border-width: 6px; /* thick ring reads as a filled dot */
}
.quiz-opts input[type="radio"]:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 3px;
    border-radius: 50%;
}
.quiz-opts label:has(input:checked) {
    border-color: #003366;
    background: #eef5fb;
    color: #0f2c52;
    font-weight: 600;
    box-shadow: 0 1px 6px rgba(0, 51, 102, 0.08);
}

.quiz-actions { margin: 30px 0 0; text-align: center; }
.quiz-actions .tool-btn {
    min-width: 240px;
    padding: 14px 34px;
    font-size: 1.05rem;
}
.quiz-error {
    color: #c0392b;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 14px 0 0;
}

/* ── Result panel ── */
.quiz-result {
    max-width: 780px;
    margin: 30px auto 0;
    scroll-margin-top: 96px; /* fixed navbar: keep the band headline visible on scrollIntoView */
    padding: 38px 42px;
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
    text-align: center;
    animation: quizResultIn .35s ease;
}
@keyframes quizResultIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-result { animation: none; }
}

.quiz-result-band { font-size: 1.55rem; font-weight: 800; margin: 0 0 18px; line-height: 1.25; }
.quiz-band-strong { color: #1e8449; }
.quiz-band-reasonable { color: #1d6fa5; }
.quiz-band-weak { color: #b9770a; }
.quiz-band-atrisk { color: #c0392b; }

.quiz-meter {
    height: 14px;
    border-radius: 7px;
    background: #e8edf2;
    overflow: hidden;
    max-width: 460px;
    margin: 0 auto;
}
.quiz-meter-fill { display: block; height: 100%; transition: width .5s ease; background: #003366; }
.quiz-fill-strong { background: #1e8449; }
.quiz-fill-reasonable { background: #1d6fa5; }
.quiz-fill-weak { background: #b9770a; }
.quiz-fill-atrisk { background: #c0392b; }

.quiz-result-score { font-size: 0.98rem; color: #4b5563; margin: 12px 0 18px; }
.quiz-result-score strong { color: #0f2c52; font-size: 1.15rem; }
.quiz-result-summary {
    font-size: 1.04rem;
    line-height: 1.65;
    color: #374151;
    max-width: 560px;
    margin: 0 auto 30px;
}

.quiz-factors-h { font-size: 1.08rem; font-weight: 700; color: #003366; margin: 0 0 14px; }
.quiz-factors {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px;
    max-width: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 28px;
    text-align: left;
}
.quiz-factors li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    font-size: 0.95rem;
    color: #374151;
    border-bottom: 1px solid #eef1f5;
}
.quiz-dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; flex: none; }
.quiz-factor-strong .quiz-dot { background: #1e8449; }
.quiz-factor-partial .quiz-dot { background: #d9a441; }
.quiz-factor-weak .quiz-dot { background: #c0392b; }
.quiz-factor-weak { color: #1f2937; font-weight: 600; }

.quiz-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.quiz-cta .tool-btn { margin: 0; }
.quiz-restart {
    display: inline-block;
    background: none;
    border: 0;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Poppins', Arial, sans-serif;
    padding: 4px 0;
}
.quiz-restart:hover { color: #003366; }

@media (max-width: 767px) {
    .quiz { padding: 26px 20px 24px; border-radius: 14px; }
    .quiz-q { padding: 20px 0; }
    .quiz-prompt { font-size: 1.02rem; }
    .quiz-opts label { padding: 13px 14px; font-size: 0.96rem; }
    .quiz-actions .tool-btn { width: 100%; min-width: 0; }
    .quiz-result { padding: 28px 20px; border-radius: 14px; }
    .quiz-result-band { font-size: 1.3rem; }
    .quiz-factors { grid-template-columns: 1fr; max-width: none; }
    .quiz-cta { flex-direction: column; }
    .quiz-cta .tool-btn { width: 100%; }
}

/* ============================================================================
   TOOL 3 — Statistics hub + poll
   ============================================================================ */
/* Headline stats: a KPI grid of stat tiles (value → claim → source), centred —
   replaces the old left-hugging rows that stranded half the viewport. */
.stats-section { padding: 26px 0 8px; }
/* Layout picked by measuring the whole page in five arrangements, not by eye.
   Total grid height across the six sections:
       3 cols, figure on top   2,780px   <- this one
       3 cols, figure at left  3,173px
       2 cols, figure at left  3,305px
       4 cols, figure on top   3,321px
       1 col,  figure at left  4,614px
   Moving the figure into a left-hand column reads well and scans well, but at
   any column count that fits three across it leaves the prose too narrow and
   the wrapping costs more than the arrangement saves. Widened to 1180px, which
   is the width the rest of the tool pages use. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
}
.stat-tile {
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 16px;
    padding: 18px 20px 16px;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.05);
    transition: box-shadow .18s ease, transform .18s ease;
}
.stat-tile:hover {
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.10);
    transform: translateY(-2px);
}
.stat-value {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 800;
    color: #003366;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 7px;
}
.stat-claim {
    font-size: 0.97rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.45;
    margin: 0 0 9px;
}
/* The source line is the credibility of this page, so it stays in full — but at
   126px it was the tallest part of a 333px tile. Tightened, not truncated.
   The old `margin: auto 0 0` pinned sources to the tile base to make a row read
   level; that is what made every tile as tall as the worst one in its row, so
   it is gone and each tile is now its own height. */
.stat-src {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}
.stat-src a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.stat-foot {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
    font-size: 0.9rem;
    font-weight: 600;
    color: #003366;
}
.stat-foot a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.stat-foot a:hover { color: #003366; }

/* ── Cite-this-page (closing card) ── */
.cite-section { padding: 38px 0 14px; }
.cite-card {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 34px 38px 34px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
    text-align: center;
}
.cite-kicker {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d6fa5;
    margin: 0 0 8px;
}
.cite-card h2 {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #003366;
    margin: 0 0 8px;
}
.cite-intro {
    max-width: 480px;
    margin: 0 auto 22px;
    color: #4b5768;
    line-height: 1.65;
    font-size: 0.98rem;
}
.cite-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}
.cite-line {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    text-align: left;
    background: #f4f7fb;
    border: 1px solid #e2e9f2;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 0.87rem;
    line-height: 1.5;
    color: #0f2c52;
    word-break: break-word;
}
.cite-copy-btn {
    flex: none;
    white-space: nowrap;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 0.95rem;
}
.cite-note {
    max-width: 600px;
    margin: 0 auto;
    font-size: 0.8rem;
    font-style: normal;
    color: #8492a6;
    line-height: 1.6;
}
@media (max-width: 576px) {
    .cite-card { padding: 26px 18px 24px; }
    .cite-row { flex-direction: column; }
    .cite-copy-btn { width: 100%; }
}

/* ── Themed stat groups (statistics hub expansion) ────────────────────────── */
.stats-group { padding: 34px 0 4px; }
.stats-group .explainer-head { margin-bottom: 26px; }
.stats-group .explainer-head h2 { font-size: 1.45rem; }

/* ── Stats hub architecture: jump nav, takeaways, section anchors ─────────── */
/* 84px navbar + 61px section nav + breathing room. At 96px an anchored
   heading landed underneath the nav that had just been clicked. */
.stats-section[id], .stats-group[id] { scroll-margin-top: 165px; }

/* The section nav follows you down the page. This is the whole difference
   between a 7,000px scroll and a reference you can navigate: 33 figures across
   six sections is too many to hold in your head, and a nav that scrolls away at
   354px means the only way back to it is scrolling to the top.

   Sticky genuinely works HERE, unlike the result panels on the calculator and
   deadline planner where it was removed. The scrollport on this site is <body>
   (.d-flex.flex-column carries overflow-y:auto), and those panels were direct
   grid items, so their containing block was the grid area and they had nothing
   to travel through. This nav's containing block is .main-container, which is
   6,283px tall — measured, not assumed — so it holds the whole way down.

   top:84px clears the site navbar, which is itself sticky at top:0 and 84px
   tall; z-index stays under its 1030 so the header always wins. */
.stats-jumpnav {
    position: sticky;
    top: 84px;
    z-index: 1020;
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e8eef6;
    margin-bottom: 4px;
}
.stats-jumpnav .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.stats-jumpnav a {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid #d8e0ea;
    border-radius: 999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f2c52;
    text-decoration: none;
    transition: border-color .13s ease, background-color .13s ease;
}
.stats-jumpnav a:hover { border-color: #003366; background: #f1f6fb; color: #003366; }

/* Where you are now, in the All view: six sections and 33 figures is too many to
   keep a mental position in. Set by IntersectionObserver in
   prenup_statistics.js; the page works without it, just without the marker. */
.stats-jumpnav a[aria-current="true"] {
    border-color: #003366;
    background: #003366;
    color: #ffffff;
}

/* Tabbed mode. The selected tab is filled, the same treatment the All view gives
   the section you are scrolled into, so the nav means one thing in both modes. */
.stats-jumpnav.is-tabbed a[aria-selected="true"],
.stats-tab[aria-selected="true"] {
    border-color: #003366;
    background: #003366;
    color: #ffffff;
}
/* The All control is added by script, so it needs the pill styling the anchors
   get from .stats-jumpnav a. */
.stats-tab {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid #d8e0ea;
    border-radius: 999px;
    background: #ffffff;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f2c52;
    cursor: pointer;
    transition: border-color .13s ease, background-color .13s ease;
}
.stats-tab:hover { border-color: #003366; background: #f1f6fb; color: #003366; }
.stats-jumpnav a:focus-visible,
.stats-tab:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }

/* One panel at a time, so the section heading does not need the run-up it needs
   when six of them follow each other down a 6,200px page. */
.stats-jumpnav.is-tabbed ~ .stats-section { padding-top: 18px; }

@media (max-width: 700px) {
    /* Wrapped, the six pills were 148px tall — with the 84px site header above
       them that is 232px of an 844px phone screen permanently occupied, before
       any content. One row that scrolls sideways instead. */
    .stats-jumpnav .container {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .stats-jumpnav .container::-webkit-scrollbar { display: none; }
    /* .stats-tab too: the All control is a <button> added by script, so the
       anchor selector alone left it shrinkable in a nowrap row. */
    .stats-jumpnav a,
    .stats-jumpnav .stats-tab { flex: 0 0 auto; white-space: nowrap; }

    /* The scrollbar is hidden and the strip ends flush at the right edge, so
       there was nothing to say the row continues - on a 390px screen the sixth
       pill is entirely off-screen and looks like it does not exist. A fade over
       the right edge is the affordance. It is a sibling overlay rather than a
       ::after on the scroller, because a pseudo-element inside an overflow
       container scrolls away with the content instead of staying at the edge. */
    .stats-jumpnav { position: sticky; }
    .stats-jumpnav .container { position: relative; }
    .stats-jumpnav::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 34px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.94) 72%);
    }
    /* Script adds .is-scrollend when the strip is scrolled to its right edge, so
       the fade does not sit there implying more when there is no more. Without
       JS the fade simply stays, which is the safe direction to fail in. */
    .stats-jumpnav.is-scrollend::after { opacity: 0; }
    .stats-jumpnav::after { transition: opacity .18s ease; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    .stats-jumpnav::after { transition: none; }
}

.takeaways-section { padding: 26px 0 0; }
.takeaways-card {
    max-width: 860px;
    margin: 0 auto;
    background: #f6f9fd;
    border: 1px solid #dfe9f4;
    border-radius: 16px;
    padding: 26px 30px;
}
.takeaways-kicker {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d6fa5;
    margin: 0 0 12px;
}
.takeaways-list { list-style: none; margin: 0; padding: 0; }
.takeaways-list li {
    position: relative;
    padding: 7px 0 7px 26px;
    color: #2b3a4d;
    font-size: 0.97rem;
    line-height: 1.6;
}
.takeaways-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.95em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d6fa5;
}
.takeaways-list strong { color: #0f2c52; }
.takeaways-list a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.takeaways-list a:hover { color: #003366; }

/* Copy-link, in the sticky section bar. Replaces a 0.85rem glyph at 45% opacity
   whose only label was a title attribute — invisible in practice, and absent
   entirely from the section the page opens on. Given its own colour so it reads
   as an action rather than a seventh tab. */
.stats-copylink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 16px;
    border: 1.5px solid #b9d3ea;
    border-radius: 999px;
    background: #f1f7fd;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    color: #00518c;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .13s ease, background-color .13s ease, color .13s ease;
}
.stats-copylink:hover { border-color: #00518c; background: #e4f0fb; color: #003366; }
.stats-copylink:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.stats-copylink.is-copied { background: #e9f5ee; border-color: #b6ddc6; color: #1b7a44; }

@media (max-width: 700px) {
    /* margin-left:auto would push it off the end of the scrolling strip. */
    .stats-copylink { margin-left: 4px; }
}

/* ── Per-figure links ─────────────────────────────────────────────────────── */
/* Each tile is individually citable, so each has its own id and copy button.
   The tile becomes the positioning context for it. */
.stat-tile { position: relative; }
.stat-tile[id] { scroll-margin-top: 172px; }   /* 84px navbar + 64px section bar */

.stat-copylink {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #f6f9fd;
    font-size: 0.8rem;
    line-height: 1;
    color: #00518c;
    cursor: pointer;
    opacity: 0;
    transition: opacity .13s ease, border-color .13s ease, background-color .13s ease;
}
.stat-tile:hover .stat-copylink,
.stat-tile:focus-within .stat-copylink,
.stat-copylink:focus-visible { opacity: 1; }
.stat-copylink:hover { border-color: #00518c; background: #e4f0fb; }
.stat-copylink:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.stat-copylink.is-copied { opacity: 1; background: #e9f5ee; border-color: #b6ddc6; color: #1b7a44; }

@media (hover: none) {
    /* Nothing to hover with, so revealing on hover would hide it permanently. */
    .stat-copylink { opacity: 1; }
}

/* A figure arrived at by link says so, briefly, otherwise a deep link drops you
   into a grid of 33 tiles with no indication which one was meant. */
.stat-tile:target {
    border-color: #9dc4e8;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16), 0 4px 18px rgba(0, 51, 102, 0.08);
}

@media print {
    .stat-copylink, .stats-copylink { display: none !important; }
}

@media (max-width: 576px) {
    .stats-jumpnav .container { gap: 8px; }
    .stats-jumpnav a { padding: 7px 13px; font-size: 0.82rem; }
    .takeaways-card { padding: 20px 18px; }
}

/* Stats page: no rule above the FAQs (the global .tool-faq border-top reads as
   a stray line after the tile grids). */
.tool-faq--flush { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .seo-accordion-panel,
    .seo-accordion-icon,
    .seo-accordion-icon i { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE FIX + POLISH — free tools pages
   ══════════════════════════════════════════════════════════════════════════
   Four of the five multi-column grids in this file had NO mobile rule at all:
   .hub-grid (3 cols), .calc-grid (2), .stat-grid (3) and .explainer-steps (2).
   Only .quiz-factors was handled. On a 390px screen .calc-grid was still
   resolving to two columns totalling 466px inside a 330px container, so the
   whole results panel — the running total, the risk bar and both CTAs — sat
   off-screen. It did not even scroll: `html, body { overflow-x: hidden }` in
   base-styles.css clipped it, so the content was simply unreachable.

   Breakpoints are chosen per grid by what the content needs, not from a single
   shared value: the calculator needs a full-width column much earlier than the
   card hubs do, because it holds labelled inputs beside a results panel.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tool hub cards (3 across) ── */
@media (max-width: 1024px) {
    .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .hub-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* ── Calculator: inputs beside results ──
   Collapses at 900px. Below that the results panel goes full width and stops
   being sticky, so it reads as the answer to the inputs above it rather than
   a floating column. */
@media (max-width: 900px) {
    .calc-grid { grid-template-columns: 1fr; gap: 22px; }
    .calc-result { position: static; }
}

/* The legend is a two-item flex row with a percentage between them. At narrow
   widths "Could be claimed" and "Mine to keep" each wrapped to three lines and
   pushed the row past the card edge. */
@media (max-width: 560px) {
    .calc-bar-legend { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
    .calc-bar-legend span { white-space: nowrap; }
}

/* ── Statistics tiles (3 across) ── */
@media (max-width: 1024px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .stat-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ── Explainer steps (2 across) ── */
@media (max-width: 700px) {
    .explainer-steps { grid-template-columns: 1fr; }
    /* the last-child span rule only makes sense in a two-column layout */
    .explainer-steps .explainer-step:last-child:nth-child(odd) { grid-column: auto; }
}

/* ── Desktop polish ──
   Equal-size cards. `align-items: stretch` alone only equalises within a row,
   so row 2 could still be a different height from row 1; `grid-auto-rows: 1fr`
   makes every row the height of the tallest card on the page, which is what
   "the same size" actually means for an 8-card block like the checker's. */
.explainer-steps,
.stat-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}
/* Rows are now the height of the tallest card, so a two-line card would sit at
   the top of a four-line box with dead space beneath it. These are already
   column flex containers, so centring the content fills the box evenly. */
.explainer-step,
.stat-tile { justify-content: center; }

/* Card headings wrap to two or three lines at these widths; balancing stops a
   single word being orphaned onto its own line. */
.hub-card h2,
.hub-card h3,
.explainer-step h3,
.stat-tile h3,
.tool-card-title { text-wrap: balance; }

/* Long tool pages: give the sections a little more air between them so the
   page reads as distinct blocks rather than one continuous run. */
@media (max-width: 767px) {
    .tool-section,
    .stats-section { padding-left: 4px; padding-right: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BAND LEGEND — "What your score means"
   ══════════════════════════════════════════════════════════════════════════
   This block had no CSS at all. The markup is a <dl> of four dt/dd pairs, so
   it fell back to browser defaults: bold terms, indented definitions, no card,
   no rule, no colour. The .band-dot spans rendered as nothing, because an empty
   inline <span> with no width is invisible.

   It now uses the same card language as the .explainer-step grid below it, and
   each band is keyed to the exact colour the result meter uses for that score,
   so the legend reads as a key to the thing the user just saw.
   ────────────────────────────────────────────────────────────────────────── */


/* Coloured rail down the left edge. --band-colour is set per row below. */



/* The meter colours, reused. `weak` is darkened from the #b9770a used on the
   coloured meter fill: at 17px bold on white that amber is 3.70:1, under the
   4.5:1 AA threshold for text this size. #9a6300 is 5.04:1. */
/* Fallback for engines without :has() — the dot alone still carries the colour
   and the heading stays navy, which is legible rather than broken. */

.band-legend-note {
    max-width: 62em;
    margin: 22px auto 0;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4b5563;
}
.band-legend-note a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 2px;
}
.band-legend-note a:hover { text-decoration-color: #003366; }


/* ── Equal-height cards are a desktop concern only ──
   Must stay AFTER the .explainer-steps / .stat-grid base rules above (~line
   1030): they are the same specificity, so a media block placed before them
   would lose the cascade. Anything appended below here is fine. In a single
   column nothing sits beside anything, so a shared row height would only pad
   the short cards and lengthen the scroll. */
@media (max-width: 700px) {
    .explainer-steps { grid-auto-rows: auto; }
    .explainer-step { justify-content: flex-start; }
}
@media (max-width: 620px) {
    .stat-grid { grid-auto-rows: auto; }
    .stat-tile { justify-content: flex-start; }
}

/* ============================================================================
   PRENUP COST CHECKER  (/prenup-cost-checker/)
   ============================================================================ */
.cost-section {
    --cost-navy: #003366;
    --cost-ink: #1f2937;
    --cost-muted: #5b6b86;
    --cost-line: #e5e7eb;
    --cost-surface: #f8fafc;
    padding: 40px 0 12px;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--cost-ink);
}

.cost-grid { /* layout set in TOOL PAGE COMPOSITION below */ }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.cost-inputs {
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 30px 30px 26px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}
.cost-h2 { font-weight: 800; color: var(--cost-navy); font-size: 1.3rem; margin: 0 0 22px; }

/* <fieldset> needs the browser defaults stripped before it lays out like a div. */
.cost-field { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.cost-field:last-of-type { margin-bottom: 0; }
.cost-legend {
    display: block; float: left; width: 100%; padding: 0;
    font-size: 1.02rem; font-weight: 700; color: var(--cost-navy);
    line-height: 1.5; margin: 0 0 4px;
}
.cost-hint { display: block; clear: both; font-size: 0.82rem; color: #6b7280; line-height: 1.5; margin: 0 0 12px; }

.cost-opts { display: flex; flex-direction: column; gap: 9px; }
.cost-opts label {
    display: flex; align-items: center; gap: 12px; margin: 0;
    padding: 12px 16px;
    border: 1.5px solid #dbe1e8; border-radius: 12px;
    background: #fff; color: #374151; font-size: 0.97rem; line-height: 1.45;
    cursor: pointer;
    transition: border-color .13s ease, background-color .13s ease, box-shadow .13s ease;
}
.cost-opts label:hover { border-color: #8fa9c2; background: var(--cost-surface); }
.cost-opts input[type="radio"],
.cost-opts input[type="checkbox"] {
    /* Custom control: the native unchecked box is nearly invisible on white. */
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; flex: none; margin: 0;
    border: 2px solid #b6c4d4; background: #fff; cursor: pointer;
    transition: border-color .13s ease, border-width .13s ease, background-color .13s ease;
}
.cost-opts input[type="radio"] { border-radius: 50%; }
.cost-opts input[type="checkbox"] { border-radius: 6px; }
.cost-opts label:hover input { border-color: #8fa9c2; }
.cost-opts input[type="radio"]:checked { border-color: var(--cost-navy); border-width: 6px; }
.cost-opts input[type="checkbox"]:checked {
    border-color: var(--cost-navy); background: var(--cost-navy);
    /* Inline tick, so no icon font is needed inside the control. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3.1 3.1 6.5-6.6'/%3E%3C/svg%3E");
    background-size: 15px 15px; background-position: center; background-repeat: no-repeat;
}
.cost-opts input:focus-visible { outline: 2px solid #0066cc; outline-offset: 3px; }
.cost-opts label:has(input:checked) {
    border-color: var(--cost-navy); background: #eef5fb; color: #0f2c52; font-weight: 600;
    box-shadow: 0 1px 6px rgba(0, 51, 102, 0.08);
}

.cost-vat { margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef2f7; }

/* ── Result panel ─────────────────────────────────────────────────────────── */
.cost-result {
    background: #fff; border: 1px solid #eaf0f6; border-radius: 18px;
    padding: 30px 30px 26px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}
.cost-result-kicker {
    font-size: 0.78rem; letter-spacing: .09em; text-transform: uppercase;
    color: #7b8aa0; font-weight: 700; margin: 0 0 10px;
}
.cost-headline {
    font-size: 1.24rem; font-weight: 700; color: #0f2c52; line-height: 1.5; margin: 0 0 14px;
}
.cost-headline strong { color: var(--cost-navy); font-weight: 800; white-space: nowrap; }
.cost-subline { font-size: 0.96rem; line-height: 1.7; color: #4b5563; margin: 0 0 22px; }
.cost-subline strong { color: #0f2c52; white-space: nowrap; }

.cost-lines { margin: 0 0 16px; border-top: 1px solid #eef2f7; padding-top: 6px; }
.cost-lines > div {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 11px 0; font-size: 0.95rem;
}
.cost-lines > div + div { border-top: 1px solid #f1f4f9; }
.cost-lines dt { color: #56636f; margin: 0; font-weight: 500; text-align: left; }
.cost-lines dd { color: var(--cost-ink); margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cost-note { font-size: 0.85rem; line-height: 1.6; color: #6b7280; margin: 0; }
/* The one note that sits under the full-width matrix rather than in the panel. */
.cost-matrix-note { max-width: 52em; margin: 16px auto 0; text-align: center; }

/* ── Inclusions matrix — same card weight as the result, never a footnote ─── */
.cost-matrix { margin-top: 30px; }
.cost-matrix-head { text-align: center; max-width: 44em; margin: 0 auto 20px; }
.cost-matrix-head h2 { font-weight: 800; color: var(--cost-navy); font-size: 1.45rem; margin: 0 0 10px; }
.cost-matrix-head p { font-size: 0.98rem; line-height: 1.7; color: #4b5563; margin: 0; }

.cost-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border: 1px solid #eaf0f6; border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}
.cost-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9rem; margin: 0; }
/* The long legend sits OUTSIDE .cost-table-wrap: anything inside inherits the
   table's min-width and is unreadable on a phone until you scroll sideways.
   What is left in <caption> is a short accessible name for the table. */
.cost-table-legend {
    max-width: 56em; margin: 0 auto 14px; text-align: center;
    font-size: 0.88rem; line-height: 1.65; color: #6b7280;
}
.cost-table caption {
    caption-side: top; padding: 16px 22px 2px; text-align: left;
    font-size: 0.76rem; letter-spacing: .07em; text-transform: uppercase;
    font-weight: 700; color: #8494a8;
}
.cost-table th, .cost-table td { padding: 13px 14px; text-align: left; vertical-align: top; border-top: 1px solid #eef2f7; }
.cost-table thead th {
    border-top: 0; border-bottom: 1px solid var(--cost-line);
    font-size: 0.78rem; letter-spacing: .04em; text-transform: uppercase;
    color: #6b7280; font-weight: 700; white-space: nowrap;
}
.cost-table tbody th { font-weight: 700; color: #0f2c52; min-width: 200px; }
.cost-table tbody th small { display: block; font-weight: 400; font-size: 0.8rem; color: #6b7280; margin-top: 3px; }
.cost-table tbody tr:hover { background: #fbfdff; }
.cost-row-ours { background: #f4f9fe; }
.cost-row-ours:hover { background: #eef5fb; }
.cost-table tbody tr.is-selected { box-shadow: inset 3px 0 0 var(--cost-navy); }

.cost-mark { display: inline-block; font-weight: 700; font-size: 0.88rem; }
.cost-mark-yes { color: #1e8449; }
.cost-mark-no { color: #c0392b; }
.cost-mark-opt { color: #9a6300; }

/* ── Published price ladder (server-rendered) ─────────────────────────────── */
.cost-ladder { margin-top: 34px; }
.cost-ladder-head { text-align: center; max-width: 44em; margin: 0 auto 18px; }
.cost-ladder-head h2 { font-weight: 800; color: var(--cost-navy); font-size: 1.45rem; margin: 0 0 10px; }
.cost-ladder-head p { font-size: 0.98rem; line-height: 1.7; color: #4b5563; margin: 0; }
.cost-ladder .cost-table { min-width: 700px; }
.cost-price { font-weight: 700; color: #0f2c52; white-space: nowrap; }
.cost-src { font-size: 0.82rem; color: #6b7280; white-space: nowrap; }
.cost-src a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.cost-src a:hover { color: var(--cost-navy); }

/* ── CTAs, sitting AFTER the matrix so the inclusions are read first ──────── */
.cost-cta { margin: 30px auto 0; max-width: 560px; text-align: center; }
.cost-cta .tool-btn { display: block; width: 100%; margin-bottom: 10px; padding: 14px 26px; }
.cost-cta .tool-btn-primary { box-shadow: 0 6px 16px rgba(0, 51, 102, 0.18); }
.cost-cta .tool-btn:last-child { margin-bottom: 0; }

.cost-noscript {
    margin: 26px auto 0; max-width: 780px;
    background: #fff8ec; border: 1px solid #f0dcba; border-radius: 12px;
    padding: 16px 20px; font-size: 0.94rem; line-height: 1.65; color: #4b5563;
}
.cost-noscript a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }

/* ── Mobile: one column, matching .calc-grid's treatment ──────────────────── */
@media (max-width: 900px) {
    .cost-grid { grid-template-columns: 1fr; gap: 22px; }
    .cost-inputs, .cost-result { padding: 26px 22px 22px; }
}
@media (max-width: 576px) {
    .cost-section { padding-top: 30px; }
    .cost-headline { font-size: 1.12rem; }
    .cost-matrix-head h2, .cost-ladder-head h2 { font-size: 1.28rem; }
    .cost-table caption { padding: 15px 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cost-opts label, .cost-opts input { transition: none; }
}

/* ============================================================================
   PRENUP DEADLINE PLANNER  (/prenup-deadline-planner/)
   ============================================================================ */
.plan-section {
    --tool-navy: #003366;
    --tool-navy-2: #004d80;
    --tool-ink: #1f2937;
    --tool-muted: #6b7280;
    --tool-line: #e5e7eb;
    --tool-surface: #f8fafc;
    font-family: 'Poppins', Arial, sans-serif;
    color: #1f2937;
    padding: 40px 0 12px;
}
.plan-grid { /* layout set in TOOL PAGE COMPOSITION below */ }

/* ── Inputs — same card language as .calc-inputs ── */
.plan-form {
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 32px 34px 26px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}
.plan-h2 { font-weight: 800; color: #003366; font-size: 1.3rem; margin: 0 0 22px; }

.plan-step { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.plan-step:last-child { margin-bottom: 0; }
.plan-step-q {
    display: block;
    width: 100%;
    float: none; /* legend in a flex/grid context: keep it on its own line */
    font-weight: 600;
    color: #003366;
    font-size: 1.02rem;
    line-height: 1.5;
    padding: 0;
    margin: 0 0 12px;
}
.plan-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    margin-right: 9px;
    border-radius: 50%;
    background: #eef5fb;
    color: #003366;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: 1px;
}
.plan-hint { display: block; font-size: 0.82rem; color: #6b7280; margin: -6px 0 10px 33px; line-height: 1.45; }

.plan-opts { display: flex; flex-direction: column; gap: 9px; }
.plan-opts label {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 16px;
    border: 1.5px solid #dbe1e8;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.97rem;
    color: #374151;
    background: #fff;
    margin: 0;
    transition: border-color .13s ease, background-color .13s ease, box-shadow .13s ease;
}
.plan-opts label:hover { border-color: #8fa9c2; background: #f8fafc; }
.plan-opts input[type="radio"] {
    /* Custom ring: the native unchecked radio is nearly invisible on white. */
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 2px solid #b6c4d4;
    border-radius: 50%;
    background: #fff;
    flex: none;
    margin: 0;
    cursor: pointer;
    transition: border-color .13s ease, border-width .13s ease;
}
.plan-opts label:hover input[type="radio"] { border-color: #8fa9c2; }
.plan-opts input[type="radio"]:checked { border-color: #003366; border-width: 6px; }
/* Hovering a chosen option must not grey its ring: the hover rule above carries
   one more element in its selector, so it would otherwise win the tie. */
.plan-opts label:hover input[type="radio"]:checked { border-color: #003366; }
.plan-opts input[type="radio"]:focus-visible { outline: 2px solid #0066cc; outline-offset: 3px; }
.plan-opts label:has(input:checked) {
    border-color: #003366;
    background: #eef5fb;
    color: #0f2c52;
    font-weight: 600;
    box-shadow: 0 1px 6px rgba(0, 51, 102, 0.08);
}

.plan-date { display: flex; margin-left: 33px; }
.plan-date input {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.02rem;
    color: #1f2937;
    padding: 12px 15px;
    border: 1.5px solid #d8e0ea;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    max-width: 260px;
}
.plan-date input:focus { outline: 0; border-color: #003366; box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.10); }

/* ── Result panel ── */
.plan-result {
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 30px 32px 32px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
}
.plan-band {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.plan-band-ok { background: #e6f4ec; color: #1e8449; }
.plan-band-tight { background: #fbf1de; color: #b9770a; }
.plan-band-late { background: #fbeae8; color: #c0392b; }
.plan-band-info { background: #e9f1f9; color: #1d6fa5; }
.plan-band-out { background: #eef1f5; color: #5b6b86; }

/* Centred to match the milestone cards below them, so the panel reads as one
   centred column rather than left-aligned prose sitting on top of centred cards.
   The band is inline-block, so it needs the parent to do the centring. */
.plan-result { text-align: center; }
.plan-headline { font-size: 1.14rem; font-weight: 700; color: #0f2c52; line-height: 1.55; margin: 0 0 12px; }
.plan-note { font-size: 0.95rem; line-height: 1.7; color: #5b6b86; margin: 0 auto 22px; max-width: 42em; }

/* ── Milestone cards ── */
/* Four small cards, two across, rather than a four-deep stack. The stack was
   516px on its own — 44% of the panel — which is what made the result column
   swing between 325px and 1,171px as answers came in. Each card carried a
   sentence explaining what that milestone is for; those four sentences are the
   same four explanations the navy band below the tool already gives at length,
   so they are gone from here rather than said twice. */
.plan-milestones {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: grid;
    /* auto-fit rather than a breakpoint: the panel is full width below 900px,
       so the pair should stay side by side until the card itself gets cramped. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.plan-milestone {
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e4ecf7;
    border-radius: 10px;
    text-align: center;
}
.plan-ms-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8194a7;
    margin: 0 0 4px;
}
.plan-ms-date { font-size: 1.02rem; font-weight: 700; color: #003366; margin: 0 0 3px; line-height: 1.35; }
.plan-ms-meta { font-size: 0.86rem; font-weight: 600; color: #5b6b86; margin: 0; font-variant-numeric: tabular-nums; }

.plan-milestone.is-overdue { border-color: #e7b4ad; background: #fdf6f5; }
.plan-milestone.is-overdue .plan-ms-date { color: #c0392b; }
.plan-milestone.is-overdue .plan-ms-meta { color: #c0392b; }
.plan-milestone.is-today { border-color: #e8cf9a; background: #fdfaf3; }
.plan-milestone.is-today .plan-ms-meta { color: #b9770a; }

/* The CTA set is 1 to 4 buttons depending on the answer. Stacked full width that
   was 143px in the green state and 257px in the red one — a 114px swing on its
   own. The primary keeps the full width; the secondary links pair up, so the
   block grows by a half-row rather than a whole one. */
.plan-cta {
    border-top: 1px solid #eef2f7;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.plan-cta .tool-btn { margin: 0; text-align: center; }
.plan-cta .tool-btn-primary { flex: 1 1 100%; padding: 13px 24px; box-shadow: 0 6px 16px rgba(0, 51, 102, 0.18); }
.plan-cta .tool-btn-ghost { flex: 1 1 calc(50% - 5px); padding: 11px 14px; font-size: 0.9rem; }

/* ── Noscript + explainer footnote ── */
.plan-noscript {
    margin: 22px auto 0;
    padding: 18px 22px;
    max-width: 52em;
    background: #f1f6fb;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #374151;
}
.plan-noscript a { color: #003366; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.plan-footnote {
    margin: 30px auto 0;
    max-width: 52em;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.7;
    color: #6b7280;
    text-align: center;
}

@media (max-width: 900px) {
    .plan-grid { grid-template-columns: 1fr; gap: 22px; }
    .plan-result { position: static; }
}
@media (max-width: 767px) {
    .plan-form { padding: 26px 20px 22px; border-radius: 14px; }
    .plan-result { padding: 24px 20px 26px; border-radius: 14px; }
    .plan-opts label { padding: 12px 14px; font-size: 0.95rem; }
    .plan-hint, .plan-date { margin-left: 0; }
    .plan-date input { max-width: none; }
    .plan-headline { font-size: 1.06rem; }
}

/* ============================================================================
   PRENUP DISCLOSURE CHECKLIST  (/prenup-disclosure-checklist/)
   ============================================================================ */
.disc-section {
    --tool-navy: #003366;
    --tool-ink: #1f2937;
    --tool-muted: #6b7280;
    --tool-line: #e5e7eb;
    padding: 40px 0 12px;
    font-family: 'Poppins', Arial, sans-serif;
    color: #1f2937;
}

/* ── Input panel ──────────────────────────────────────────────────────────── */
.disc-panel {
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 32px 34px 28px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
    scroll-margin-top: 96px;
}
.disc-h2 { font-weight: 800; color: #003366; font-size: 1.3rem; margin: 0 0 18px; }
.disc-h2-grid { margin-top: 32px; padding-top: 26px; border-top: 1px solid #eef2f7; }
.disc-intro { font-size: 0.95rem; line-height: 1.65; color: #5b6b86; margin: 0 0 22px; max-width: 52em; }

.disc-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.disc-field > label, .disc-field-legend {
    display: block; font-weight: 600; color: #1f2937; font-size: 0.98rem; margin-bottom: 5px;
}
.disc-hint { display: block; font-size: 0.82rem; color: #6b7280; margin-bottom: 9px; line-height: 1.45; }
.disc-date {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #d8e0ea;
    border-radius: 10px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1rem;
    color: #1f2937;
    background: #fff;
}
.disc-date:focus { outline: 0; border-color: #003366; box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.10); }

.disc-se-group { display: flex; flex-direction: column; gap: 8px; }
.disc-se {
    display: flex; align-items: center; gap: 11px; margin: 0;
    padding: 11px 14px; border: 1.5px solid #dbe1e8; border-radius: 10px;
    font-size: 0.95rem; color: #374151; cursor: pointer;
    transition: border-color .13s ease, background-color .13s ease;
}
.disc-se:hover { border-color: #8fa9c2; background: #f8fafc; }
.disc-se:has(input:checked) { border-color: #003366; background: #eef5fb; color: #0f2c52; font-weight: 600; }

/* ── Custom tick box, shared by the grid and the self-employed toggles ────── */
.disc-se input[type="checkbox"],
.disc-tick input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px; flex: none; margin: 0; cursor: pointer;
    border: 2px solid #b6c4d4; border-radius: 6px; background: #fff;
    background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
    transition: border-color .13s ease, background-color .13s ease;
}
.disc-se input[type="checkbox"]:checked,
.disc-tick input[type="checkbox"]:checked {
    border-color: #003366; background-color: #003366;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.2 3.3L13 5'/%3E%3C/svg%3E");
}
.disc-se input[type="checkbox"]:focus-visible,
.disc-tick input[type="checkbox"]:focus-visible { outline: 2px solid #0066cc; outline-offset: 3px; }

/* ── The tick grid ────────────────────────────────────────────────────────── */
.disc-grid { border-top: 1px solid #eef1f5; }
.disc-grid-head, .disc-row { display: grid; grid-template-columns: 1fr 250px; gap: 16px; align-items: center; }
.disc-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.disc-grid-head {
    padding: 12px 0; border-bottom: 1px solid #e5e7eb;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8194a7;
}
.disc-col { text-align: center; }
.disc-row { padding: 14px 0; border-bottom: 1px solid #f1f4f9; }
.disc-row[hidden] { display: none; }
.disc-row:hover { background: #fbfdff; }
.disc-cat { display: block; font-weight: 600; color: #1f2937; font-size: 0.98rem; line-height: 1.4; }
.disc-cat-hint { display: block; font-size: 0.82rem; color: #6b7280; line-height: 1.5; margin-top: 3px; }
.disc-cell { display: flex; justify-content: center; }
.disc-tick { display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.disc-tick:hover { background: #eef5fb; }
.disc-tick[hidden] { display: none; }
.disc-tick-text { display: none; font-size: 0.9rem; color: #374151; }
.disc-na { font-size: 0.82rem; color: #9aa7b6; font-style: italic; }
.disc-na[hidden] { display: none; }

.disc-actions { margin-top: 22px; }
.disc-reset {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font-family: 'Poppins', Arial, sans-serif; font-size: 0.9rem; color: #6b7280;
    text-decoration: underline; text-underline-offset: 2px;
}
.disc-reset:hover { color: #003366; }

.disc-noscript {
    margin: 18px 0 0; padding: 16px 20px; border-radius: 12px;
    background: #fff7ed; border: 1px solid #f2ddc2; color: #7a5a2e;
    font-size: 0.95rem; line-height: 1.6;
}

/* ── Result ───────────────────────────────────────────────────────────────── */
.disc-result {
    margin: 26px 0 0;
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 34px 34px 30px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
}
.disc-result-h { font-weight: 800; color: #003366; font-size: 1.45rem; margin: 0 0 10px; }
.disc-valuation { font-size: 0.95rem; line-height: 1.6; color: #374151; margin: 0 0 22px; }
.disc-valuation-empty { color: #8194a7; font-style: italic; }

.disc-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 22px; }
.disc-meter-label { font-size: 0.95rem; color: #4b5563; margin: 0 0 8px; }
.disc-meter-label strong { color: #003366; }
.disc-meter-track { height: 10px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.disc-meter-fill { display: block; height: 100%; width: 0; background: #1d6fa5; transition: width .35s ease; }
.disc-meter-fill-done { background: #1e8449; }

.disc-verdict {
    font-size: 1.04rem; line-height: 1.65; color: #1f2937; font-weight: 600;
    margin: 0 0 26px; padding: 16px 20px;
    background: #f1f6fb; border: 1px solid #e2ecf6; border-radius: 12px;
}

/* One list, so it runs the full width. The two-column .disc-parties grid is gone
   with the second copy of the list it used to hold. */
#discList { margin-top: 4px; }
.disc-party-h {
    font-weight: 800; color: #003366; font-size: 1.1rem;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #eaf0f6;
}
.disc-sub {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: #8194a7; margin: 18px 0 8px;
}
.disc-sub:first-child { margin-top: 0; }
.disc-empty { font-size: 0.93rem; color: #1e8449; font-weight: 600; margin: 0; }
/* Two across. Twelve entries at 127px each ran to 1,524px in a single 1,080px
   column, which is the whole reason the result panel was 2,150px tall — the list
   was the page. Two columns halve the run without making an entry unreadable:
   ~528px still holds the document name on one line. auto-fit rather than a
   breakpoint so it drops to one column when the entry would get cramped. */
.disc-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* min(420px, 100%) not a bare 420px: auto-fit honours the minimum even when
       the container is narrower than it, so on a 390px screen the single track
       stayed 420px wide and the whole list hung off the side of the page. */
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 0 26px;
    align-items: start;
}
.disc-item { padding: 11px 0 11px 16px; border-left: 3px solid #d9e4ef; border-bottom: 1px solid #f1f4f9; }
/* :last-child is the last in DOM order, which in a two-column grid is not the
   bottom of either column — so the rule below it stays. */
.disc-item:last-child { border-bottom: 1px solid #f1f4f9; }
.disc-item-done { border-left-color: #b9dcc4; opacity: 0.72; }
.disc-item-label { display: block; font-weight: 700; color: #1f2937; font-size: 0.95rem; }
.disc-item-evidence { display: block; font-size: 0.92rem; color: #003366; line-height: 1.5; margin-top: 2px; }
.disc-item-where { display: block; font-size: 0.85rem; color: #6b7280; line-height: 1.55; margin-top: 3px; }
.disc-items-done .disc-item-where { display: none; }

/* Who still needs it. This is what replaces the duplicated second list: the
   document is stated once, and these two markers say where each of you is on it.
   Wrapped inline so a row costs one line, not a block. */
.disc-item-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.disc-who {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.disc-who-todo { background: #fdf3e7; color: #9a5b06; border-color: #f0dcc2; }
.disc-who-done { background: #e9f5ee; color: #1b7a44; border-color: #c6e5d3; }
.disc-who-na   { background: #f1f4f8; color: #6b7280; border-color: #e2e8f0; }

/* Opens the rest of the list. A button, not a link: it changes what is on the
   page rather than going anywhere, and aria-expanded says so. */
.disc-more {
    display: inline-block;
    margin: 14px 0 0;
    padding: 10px 20px;
    background: #ffffff;
    border: 1.5px solid #cddcec;
    border-radius: 999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #003366;
    cursor: pointer;
    transition: border-color .13s ease, background-color .13s ease;
}
.disc-more:hover { border-color: #003366; background: #f1f6fb; }
.disc-more:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.disc-more-note { margin: 8px 0 0; font-size: 0.83rem; color: #6b7280; }

/* ── Two-phase tool: answer, then build ───────────────────────────────────── */
.disc-build {
    display: inline-block;
    padding: 14px 30px;
    background: #003366;
    border: 0;
    border-radius: 999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 51, 102, 0.18);
    transition: background-color .14s ease, transform .14s ease;
}
.disc-build:hover { background: #004d80; transform: translateY(-1px); }
.disc-build:focus-visible { outline: 2px solid #003366; outline-offset: 3px; }
.disc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* The results bar: back out on the left, act on the list on the right. */
.disc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6edf5;
}
.disc-controls-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-btn-back,
.disc-ctl {
    padding: 9px 16px;
    background: #ffffff;
    border: 1.5px solid #cddcec;
    border-radius: 999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: #003366;
    cursor: pointer;
    transition: border-color .13s ease, background-color .13s ease;
}
.disc-btn-back { font-weight: 700; }
.disc-btn-back:hover,
.disc-ctl:hover { border-color: #003366; background: #f1f6fb; }
.disc-btn-back:focus-visible,
.disc-ctl:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.disc-ctl[aria-pressed="true"] { background: #003366; border-color: #003366; color: #ffffff; }

/* "Outstanding only" — hides the group both of you have finished, and its
   heading with it, so the filter does not leave a labelled empty space. */
.disc-hide-done .disc-items-done,
.disc-hide-done .disc-sub-done { display: none; }

@media (max-width: 620px) {
    .disc-controls { justify-content: flex-start; }
    .disc-controls-actions { width: 100%; }
    .disc-ctl { flex: 1 1 auto; text-align: center; }
}

.disc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid #eef2f7; }
.disc-copy-status { font-size: 0.88rem; color: #1e8449; margin: 0; }
.disc-print-note { display: none; }
.disc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ── Mobile: one column everywhere, and the ticks label themselves ─────────── */
@media (max-width: 900px) {
    .disc-panel { padding: 24px 20px 22px; border-radius: 14px; }
    .disc-setup { grid-template-columns: 1fr; gap: 18px; }
    .disc-grid-head { display: none; }
    .disc-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
    /* One column, which is what the heading of this block always intended and
       .disc-cells alone was not doing. Side by side, each cell is 127px at 360px
       wide, leaving 66px of text room for a "Your partner" that needs 90px, so it
       wrapped to two lines and dragged the "You" beside it to 67px tall. Padding
       and font-size tweaks could claw back most of that but not all of it at
       360px, and a fit with 2px of slack breaks on the next copy edit. Stacked,
       each tick is full width, reads on one line, and is a full-width tap. */
    .disc-cells { grid-template-columns: 1fr; gap: 8px; }
    .disc-cell { justify-content: flex-start; }
    .disc-tick { width: 100%; padding: 11px 14px; border: 1.5px solid #dbe1e8; border-radius: 10px; }
    .disc-tick:has(input:checked) { border-color: #003366; background: #eef5fb; font-weight: 600; }
    .disc-tick-text { display: inline; }
    .disc-result { padding: 26px 20px 24px; border-radius: 14px; }
    .disc-meters { grid-template-columns: 1fr; gap: 18px; }
    .disc-cta .tool-btn { width: 100%; }
}

/* ── Print: the checklist only ────────────────────────────────────────────── */
@media print {
    .navbar,
    #main-footer,
    .tool-hero-band,
    .disc-panel,
    .disc-noscript,
    .tool-explainer,
    .tool-faq,
    .home-final-cta,
    .hub-footnote,
    .disc-tools,
    .disc-cta { display: none !important; }

    .disc-section { padding: 0; }
    .disc-result { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .disc-result-h { font-size: 1.3rem; margin-bottom: 8px; }
    .disc-verdict { background: none; border: 0; padding: 0; margin-bottom: 18px; }
    .disc-meter-track { border: 1px solid #999; }
    .disc-meter-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .disc-item { break-inside: avoid; page-break-inside: avoid; }
    .disc-items-done .disc-item-where { display: block; }
    .disc-item-done { opacity: 1; }
    .disc-print-note { display: block; margin-top: 18px; font-size: 0.75rem; color: #555; }
}


/* ============================================================================
   TOOL PAGE COMPOSITION
   ----------------------------------------------------------------------------
   These pages were laid out as one narrow column, which turned every page into
   a long list of blocks. The fix is to use the width: the tool runs as two
   balanced columns, and the supporting sections (explainer, FAQ, compliance)
   run multi-up instead of single file. Measured on the calculator, that takes
   the page from 4,695px to roughly 3,100px WITHOUT deleting any content.
   ============================================================================ */

/* Page width. Bootstrap's .container goes to 1320px, which reads too wide for
   prose; 1180px suits a two-up tool with room for a four-up card row. */
.calc-section > .container,
.quiz-section > .container,
.plan-section > .container,
.disc-section > .container,
.cost-section > .container,
.stats-section > .container,
.takeaways-section > .container,
.cite-section > .container,
.tool-explainer > .container,
.tool-faq > .container,
.hub-footnote > .container { max-width: 1180px; }

/* ── The tool: two columns that finish level ──────────────────────────────── */
/* Inputs and result are within ~110px of each other in height, so a two-up
   layout balances. align-items:stretch makes them finish level regardless. */
.calc-grid,
.plan-grid,
.cost-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 940px) {
    .calc-grid, .plan-grid, .cost-grid { grid-template-columns: 1fr; gap: 18px; }
}

.calc-section, .quiz-section, .plan-section, .disc-section, .cost-section { padding: 28px 0 6px; }

/* Both columns are cards; the result is tinted so the answer reads as the
   destination rather than a second form. */
.calc-inputs, .plan-form, .cost-form, .disc-panel {
    border-radius: 20px;
    padding: 26px 28px;
}
.calc-result, .plan-result, .cost-result {
    background: linear-gradient(180deg, #f6faff 0%, #edf3fb 100%);
    border: 1px solid #dfe9f7;
    border-radius: 20px;
    box-shadow: none;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
}
/* Push the CTA block to the bottom so both columns end on the same line. */
.calc-cta, .plan-cta, .cost-cta { margin-top: auto; padding-top: 18px; }

.disc-result { border-radius: 20px; margin-top: 20px; }

/* ── Caveats, attached to what they qualify ───────────────────────────────── */
/* A tool page makes two different statements and they live in two places.
   .tool-result-note is the tool's OWN limitation and sits inside the result
   panel, directly under the figure or date it qualifies. Who we are — not a law
   firm, not SRA-regulated — is about the whole site rather than this tool, so it
   is the footer line in base.html and is not repeated here; the full-width
   .tool-status strip that used to carry it on these six pages is gone, because it
   said the same thing the footer says a few hundred pixels further down.
   Neither statement is behind a toggle. */

.tool-result-note {
    margin: 16px 0 0;
    padding: 13px 0 0;
    border-top: 1px solid rgba(0, 51, 102, 0.10);
    font-size: 0.755rem;
    line-height: 1.6;
    color: #6b7b93;
    text-align: center;
}
.tool-result-note strong { color: #35506f; font-weight: 700; }
.tool-result-note em { font-style: italic; }
.tool-result-note a {
    color: #003366; font-weight: 600;
    text-decoration: underline; text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 2px;
}

/* Statistics has no result panel, so its caveat sits with the figures instead. */
.tool-note-inline {
    max-width: 62em;
    margin: 0 auto 22px;
    font-size: 0.8rem;
    line-height: 1.65;
    color: #6b7b93;
    text-align: center;
}
.tool-note-inline strong { color: #35506f; }

/* ── Explainer: four across, not two down ─────────────────────────────────── */
/* border-top:0 — the base rule draws a hairline above this section, which now
   sits just under the status band's own bottom edge and reads as a stray double
   rule above the heading. The band already provides the separation. */
.tool-explainer { padding: 34px 0 30px; border-top: 0; }
.explainer-head { margin-bottom: 24px; }
.explainer-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.explainer-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 1080px) { .explainer-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .explainer-steps { grid-template-columns: 1fr; } }

/* ── Explainer: a numbered reasoning chain ────────────────────────────────── */
/* These points are a chain of reasoning, not four unrelated cards, so the layout
   says so: a numeral per step with a rule running between them. The numbers are
   a CSS counter, so no template needs markup for them and every tool page picks
   the treatment up automatically.

   The copy is also balanced to a common length. That is the part no layout could
   fix: 25 words beside 70 will look uneven in any arrangement of equal columns. */
.explainer-steps {
    counter-reset: explainer;
    gap: 0 28px;
    position: relative;
}

/* The connecting rule, drawn once behind the row and aligned to the numerals.
   Only correct when the steps form a SINGLE row of four: the checker has eight,
   which wrap, and a rule spanning just the first row reads as broken. :has() scopes it to exactly-four; where :has() is
   unsupported the rule simply never paints and the numerals carry the sequence
   on their own, which is the safe way round. */
.explainer-steps::before { content: none; }

.explainer-steps:has(> .explainer-step:nth-child(4):last-child)::before {
    content: "";
    position: absolute;
    top: 17px;
    left: calc((100% - 84px) / 8);
    right: calc((100% - 84px) / 8);
    height: 2px;
    background: linear-gradient(90deg, #d8e4f2 0%, #c3d6ea 50%, #d8e4f2 100%);
    z-index: 0;
}

.explainer-step {
    counter-increment: explainer;
    position: relative;
    z-index: 1;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
}
.explainer-step:hover { box-shadow: none; transform: none; }

.explainer-step::before {
    content: counter(explainer);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a4a92 0%, #003366 100%);
    color: #fff;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 51, 102, 0.26), 0 0 0 6px #fff;
}

.explainer-step-text h3 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}

/* Two levels per step, so the row can be read in four short sentences and the
   detail is there only if you want it. Four balanced 40-word paragraphs were
   still four paragraphs; this makes the chain skimmable. */
.explainer-step-text .explainer-lead {
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.5;
    color: #22384f;
    margin: 0 0 8px;
}
.explainer-step-text p {
    font-size: 0.83rem;
    line-height: 1.6;
    color: #6b7b91;
    margin: 0;
}
.explainer-step-text p em { font-style: italic; }

@media (max-width: 1080px) {
    .explainer-steps { gap: 30px 28px; }
    /* Two-up: the single straight rule no longer describes the order, so drop it
       and let the numerals carry the sequence on their own. */
    .explainer-steps:has(> .explainer-step:nth-child(4):last-child)::before { content: none; }
}
@media (max-width: 620px) {
    .explainer-steps { gap: 26px; }
    .explainer-step::before { width: 32px; height: 32px; margin-bottom: 12px; }
}

/* ── FAQ: two columns ─────────────────────────────────────────────────────── */
/* border-top:0 — the base rule draws a hairline above the FAQ, which lands
   directly under the status strip's own bottom edge and reads as a stray
   double rule above the heading. Same fix as the explainer above. */
.tool-faq { padding: 28px 0; border-top: 0; }
/* Back to a single stacked column. Two-up halved the height but split the
   reading order across two tracks, so a question and the one that follows it
   were never next to each other. Held to a readable measure rather than run to
   the full page width. */
.tool-faq .seo-accordion {
    max-width: 880px;
    margin: 0 auto;
}
.seo-accordion-item { border-radius: 16px; }

/* ── Wide tables can use the full page width ──────────────────────────────── */
.cost-table { min-width: 0; font-size: 0.84rem; }
.cost-table th, .cost-table td { padding: 11px 10px; }
.cost-table tbody th { min-width: 150px; }
.cost-table tbody th small { font-size: 0.74rem; }
.cost-table thead th { font-size: 0.7rem; letter-spacing: 0.04em; }
@media (max-width: 1080px) { .cost-table { min-width: 820px; } }

/* ── Hero and closing CTA: trimmed to match ───────────────────────────────── */
.tool-hero-band { padding: 32px 0 40px; }
.tool-hero-crumb { margin-bottom: 16px; }
.tool-hero-desc { font-size: 1.06rem; margin-bottom: 8px; }
.home-final-cta { max-width: 1000px; padding: 42px 32px; }
.hub-footnote { padding: 8px 0 40px; }

/* The explainer's closing note is a caption for the card row above it, so it
   should read as one — centred and held to the same width, not run full-bleed. */
.explainer-footnote {
    max-width: 60em;
    margin: 18px auto 0;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #6b7280;
}

/* ── Validity checker: two columns of questions ───────────────────────────── */
/* Eight questions, each with three full-width stacked options, ran to 2,375px
   in a 780px column inside an 1,150px container, so the page was a single long
   scroll with dead space either side. Two columns of four halves the scroll and
   uses the width the page already has. The option rows also carried desktop
   padding sized for a full-width row, which is why each question block was
   ~250px tall. */
.quiz {
    max-width: 1150px;
    padding: 32px 36px 30px;
    border-radius: 20px;
}

.quiz-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
    align-items: start;
}

/* The rule was a horizontal divider between stacked questions; in two columns
   it would draw across the top of both, so it becomes a divider between rows
   only, and the first two items (row one) lose it. */
.quiz-q { padding: 16px 0 18px; }
.quiz-q:first-child, .quiz-q:nth-child(2) { border-top: 0; padding-top: 0; }

.quiz-prompt { font-size: 0.98rem; margin: 0 0 11px; line-height: 1.45; }

.quiz-opts { gap: 7px; }
.quiz-opts label {
    padding: 9px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
    gap: 10px;
}

@media (max-width: 900px) {
    .quiz-list { grid-template-columns: 1fr; column-gap: 0; }
    .quiz-q:nth-child(2) { border-top: 1px solid #eef1f5; padding-top: 16px; }
    .quiz { padding: 26px 20px 24px; }
}

/* ── Validity checker: step mode ──────────────────────────────────────────── */
/* .is-stepped is added by prenup_checker.js. Without it the two-column list
   above still applies, so a no-JS visitor gets the full eight-question form
   rather than a single question with no way to reach the rest. */
.quiz.is-stepped { max-width: 720px; padding: 28px 34px 30px; }
.quiz.is-stepped .quiz-list { grid-template-columns: 1fr; column-gap: 0; }

/* One question on screen needs no divider, and can afford to be read at full
   size again — the compact sizing exists to fit two columns. */
.quiz.is-stepped .quiz-q { border-top: 0; padding: 4px 0 0; }
.quiz.is-stepped .quiz-prompt { font-size: 1.15rem; line-height: 1.45; margin: 0 0 16px; }
.quiz.is-stepped .quiz-opts { gap: 10px; }
.quiz.is-stepped .quiz-opts label { padding: 13px 18px; font-size: 0.98rem; border-radius: 12px; }

/* Progress header */
.quiz-progress { margin: 0 0 22px; }
.quiz-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 9px;
}
.quiz-progress-label {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #003366;
}
.quiz-progress-count { font-size: 0.78rem; color: #8494a8; font-variant-numeric: tabular-nums; }
.quiz-progress-track {
    height: 6px;
    border-radius: 999px;
    background: #e9eff6;
    overflow: hidden;
}
.quiz-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #003366;
    transition: width .32s ease;
}
@media (prefers-reduced-motion: reduce) {
    .quiz-progress-fill { transition: none; }
}

/* Back sits beside the submit; on steps 1-7 the submit is hidden and answering
   advances, so Back is usually alone and should not stretch. */
.quiz-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.quiz-actions .quiz-error { flex: 1 0 100%; }
.quiz-back { min-width: 110px; }

@media (max-width: 900px) {
    .quiz.is-stepped { padding: 24px 20px 26px; }
    .quiz.is-stepped .quiz-prompt { font-size: 1.06rem; }
}

/* ── Score bands as a scale ───────────────────────────────────────────────── */
/* These are four bands of ONE continuous 0-100% score, so cards were the wrong
   form: they implied four unrelated things and needed three redundant colour
   signals each (a dot, a coloured heading and a thick left bar) to say what a
   single coloured segment says on its own. Now the four segments butt together
   into one bar, ascending left to right so it runs the same direction as the
   result meter the reader has just seen. */
.band-scale {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
}
.band-seg { margin: 0; position: relative; padding-top: 16px; }

/* The segment of the bar. The 20px gutter is bridged so the four read as one
   continuous scale rather than four separate rules. */
.band-seg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -20px;
    height: 7px;
    background: currentColor;
}
.band-seg:last-child::before { right: 0; border-radius: 0 999px 999px 0; }
.band-seg:first-child::before { border-radius: 999px 0 0 999px; }

.band-seg-atrisk     { color: #c0392b; }
.band-seg-weak       { color: #b9770a; }
.band-seg-reasonable { color: #1d6fa5; }
.band-seg-strong     { color: #1e8449; }

.band-seg dt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 8px;
    font-family: 'Poppins', Arial, sans-serif;
}
.band-range {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: currentColor;
    font-variant-numeric: tabular-nums;
}
.band-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f2c52;
    letter-spacing: -0.01em;
}
.band-seg dd {
    margin: 0;
    font-size: 0.845rem;
    line-height: 1.62;
    color: #6b7b91;
}

.band-legend-note {
    max-width: 62em;
    margin: 26px auto 0;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #6b7280;
}

@media (max-width: 900px) {
    .band-scale { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
    .band-seg:first-child::before { border-radius: 999px 0 0 999px; }
    .band-seg:nth-child(2)::before { right: 0; border-radius: 0 999px 999px 0; }
    .band-seg:nth-child(3)::before { border-radius: 999px 0 0 999px; }
}
@media (max-width: 560px) {
    .band-scale { grid-template-columns: 1fr; gap: 20px; }
    .band-seg::before { right: 0; border-radius: 999px; }

    /* Stacked, each band's bar runs the full width of the column, so the whole
       segment reads as one centred unit under it. The dt is a column flexbox,
       so it needs align-items as well as text-align. */
    .band-seg dt { align-items: center; text-align: center; }
    .band-seg dd { text-align: center; }
}

/* ── Checker: question and its explanation, side by side ──────────────────── */
/* The step form left the card marooned in the middle of a 1,150px page. The
   matching "why this matters" item now sits beside the question it explains,
   which fills the width and puts the reason where the decision is made. */
.quiz-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
}

/* Both boxes stay one consistent size. align-items:stretch matches them to each
   other; the floor stops the pair resizing as you step, because the question
   card measured 387-476px across the eight steps and the panel 445-488px, so
   without it the whole layout jumped on almost every answer. Measured max was
   488px; 500 leaves headroom for a longer question or a webfont reflow. */
.quiz-layout > * { min-height: 500px; }
.quiz-steps { flex: 1 1 auto; }
/* Without JS the side panel is never revealed, so the form takes the full width
   and keeps the two-column question list. Keyed off .quiz-steps — the panel that
   actually exists — not the aside card that used to. */
.quiz-layout:not(:has(.quiz-steps:not([hidden]))) { grid-template-columns: 1fr; max-width: 1150px; }

.quiz.is-stepped { max-width: none; margin: 0; }

.quiz-aside {
    padding: 26px 28px 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f6faff 0%, #edf3fb 100%);
    border: 1px solid #dfe9f7;
    font-family: 'Poppins', Arial, sans-serif;
}
.quiz-aside-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #7d93ad;
    margin: 0 0 9px;
}
.quiz-aside-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #003366;
    line-height: 1.35;
    margin: 0 0 10px;
}
.quiz-aside-body { font-size: 0.875rem; line-height: 1.68; color: #5f7086; }
.quiz-aside-body p { margin: 0; }
.quiz-aside-body a {
    color: #003366; font-weight: 600;
    text-decoration: underline; text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 2px;
}

/* Relocated into the aside; kept in the DOM for no-JS and for crawlers. */
#quizWhySection.is-relocated { display: none; }

@media (max-width: 940px) {
    /* Stacked, so a shared floor would just leave two tall empty boxes. */
    .quiz-layout { grid-template-columns: 1fr; gap: 18px; }
    .quiz-layout > * { min-height: 0; }
}

/* ── Checker: the eight-at-a-glance list ──────────────────────────────────── */
/* The step form's one real cost is that you can no longer see what is being
   assessed. This puts all eight back, with state, and makes them clickable so
   an answer is never more than one click away. */
.quiz-side { display: flex; flex-direction: column; gap: 16px; }

.quiz-steps {
    border: 1px solid #e7edf5;
    border-radius: 20px;
    padding: 20px 22px 22px;
    background: #fff;
    font-family: 'Poppins', Arial, sans-serif;
}
.quiz-steps-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #7d93ad;
    margin: 0 0 12px;
}
.quiz-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.quiz-steps-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 0.845rem;
    color: #7c8ca1;
    transition: background-color .14s ease, color .14s ease;
}
.quiz-steps-item:hover { background: #f4f8fd; color: #34506f; }
.quiz-steps-item:focus-visible { outline: 2px solid #003366; outline-offset: 1px; }

.quiz-steps-mark {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #dbe3ec;
    font-size: 0.68rem;
    font-weight: 700;
    color: #9aa9bc;
    background: #fff;
}
.quiz-steps-item.is-done { color: #34506f; }
.quiz-steps-item.is-done .quiz-steps-mark {
    background: #1e8449;
    border-color: #1e8449;
    color: #fff;
}
.quiz-steps-item.is-current { background: #eef4fc; color: #003366; font-weight: 600; }
.quiz-steps-item.is-current .quiz-steps-mark {
    border-color: #003366;
    color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.10);
}
.quiz-steps-item.is-current.is-done .quiz-steps-mark {
    background: #003366; border-color: #003366; color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-steps-item { transition: none; }
}

/* The current item's explanation, expanded inline. */
.quiz-steps-why {
    padding: 2px 8px 12px 40px;
    font-size: 0.83rem;
    line-height: 1.62;
    color: #6b7b91;
}
.quiz-steps-why a {
    color: #003366; font-weight: 600;
    text-decoration: underline; text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 2px;
}
.quiz-steps-list > li { margin: 0; }

/* The fixed 500px card leaves room under a short question, so the actions and a
   standing reassurance sit at the foot of it rather than floating mid-card.
   The claim is accurate: views/tools.py:checker_log recomputes the score from
   the answers and stores only score + band, never the answers themselves. */
.quiz.is-stepped { display: flex; flex-direction: column; }
.quiz.is-stepped .quiz-actions { margin-top: auto; padding-top: 18px; }
.quiz-foot {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
    font-size: 0.76rem;
    line-height: 1.6;
    color: #8494a8;
    text-align: center;
}
.quiz-foot strong { color: #45596f; font-weight: 700; }
/* Not stepped (no JS): it is just a closing note under a long form. */
.quiz:not(.is-stepped) .quiz-foot { text-align: center; }

/* ── Cost checker: long form, short summary ───────────────────────────────── */
/* Two attempts here, and the first was wrong: splitting the form into two
   columns gave each one 239px, so "An online agreement service, such as ours at
   £199" wrapped to three lines and the fieldsets grew MORE than the column split
   saved (1,322px became 1,001px, but only because the labels ballooned).
   The form is simply long — 13 radios, 4 checkboxes and a VAT toggle — and the
   summary is short (681px). So: stop stretching the summary to match, compact
   the rows, and make the summary sticky so it stays in view while you work down
   the form. That is what the empty tinted panel was really asking for. */
/* Gated to the two-column range on purpose. Unmediated, this rule sits AFTER the
   `@media (max-width: 940px) { .cost-grid { grid-template-columns: 1fr } }` above
   and beat it at every width, so the phone got two columns of 194px and 226px in
   a 330px container - the page scrolled sideways by 77px. A media query does not
   outrank a later plain rule of equal specificity; only source order decides. */
@media (min-width: 941px) {
    .cost-grid {
        align-items: start;
        /* 1.2fr/1fr measured best: widening the form further only trims ~40px off
           it while pushing the summary from 681px to 798px as its £ rows wrap. */
        grid-template-columns: 1.2fr 1fr;
    }
}


/* Compact rows: this form has 18 controls, and full-size rows are what made it
   1,322px in the first place. */
.cost-opts label { padding: 10px 14px; font-size: 0.91rem; border-radius: 10px; }
.cost-opts { gap: 7px; }
.cost-field { margin-bottom: 22px; }
.cost-legend { font-size: 0.98rem; margin-bottom: 6px; }
.cost-hint { font-size: 0.8rem; margin-bottom: 10px; }


/* The CTA now lives inside the summary, directly under the figures, rather than
   floating between the two tables. Stacked full-width to suit the column. */
.cost-result .cost-cta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid #dfe9f7;
}
.cost-result .cost-cta .tool-btn { width: 100%; padding: 12px 20px; font-size: 0.95rem; }

/* Region and the complexity flags have short labels, so full-width rows waste
   the height. Two-up them; route and advice keep single rows because their
   labels are long enough to wrap at half width (which is exactly what made the
   whole-form two-column attempt backfire). */
.cost-inputs > fieldset.cost-field:nth-of-type(3) .cost-opts,
.cost-inputs > fieldset.cost-field:nth-of-type(4) .cost-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}
@media (max-width: 1080px) {
    .cost-inputs > fieldset.cost-field:nth-of-type(3) .cost-opts,
    .cost-inputs > fieldset.cost-field:nth-of-type(4) .cost-opts { grid-template-columns: 1fr; }
}

/* ── Price ladder: tighter rows ───────────────────────────────────────────── */
/* Seven rows each repeating "Checked 26 Aug 2026" is noise, not evidence — the
   date is now stated once above the table (and only falls back to per-row when
   the rows genuinely differ, see pricing_data.all_verified_on). With the date
   gone the Source column needs far less room. */
/* The legend sits BELOW the table, matching .cost-matrix-note on the other tab:
   it qualifies the figures, so it reads as a footnote to them rather than as a
   preamble you meet before there is anything to qualify. That leaves
   .cost-ladder-head holding only the h2. */
.cost-ladder-note { max-width: 60em; margin: 16px auto 0; text-align: center; }
.cost-ladder .cost-table th,
.cost-ladder .cost-table td { padding: 10px 12px; }
.cost-ladder .cost-src { white-space: nowrap; width: 1%; }
.cost-ladder .cost-price { white-space: nowrap; }

/* ── Cost checker: comparison tabs ────────────────────────────────────────── */
.cost-tables { margin-top: 34px; }
.cost-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 4px;
    padding: 5px;
    background: #eef2f7;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}
.cost-tab {
    border: 0;
    background: none;
    border-radius: 9px;
    padding: 9px 18px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #5b6b86;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cost-tab:hover { color: #003366; }
.cost-tab.is-active {
    background: #fff;
    color: #003366;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.12);
}
.cost-tab:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }

/* The panel's own heading repeats the tab label, so trim it back once tabbed —
   the tab is doing the naming. Kept in the DOM at full size without JS. */
.cost-tables:has(#costTabs:not([hidden])) .cost-matrix-head h2,
.cost-tables:has(#costTabs:not([hidden])) .cost-ladder-head h2 { font-size: 1.25rem; }
.cost-tables .cost-matrix, .cost-tables .cost-ladder { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) { .cost-tab { transition: none; } }
@media (max-width: 620px) {
    .cost-tabs { width: 100%; }
    .cost-tab { flex: 1 1 auto; padding: 9px 10px; font-size: 0.82rem; }
}

/* ── Both cost tables: a proper table treatment ───────────────────────────── */
/* The marks were bold coloured words, left-aligned in wide cells, so a column
   read as scattered text rather than a pattern you could scan down. They are now
   centred pills, which makes "no row in that column reads Yes" visible at a
   glance — which is the entire point the note below the table has to make in
   prose. The aria-labels on each mark already carry the full meaning, so the
   visual treatment is free to be compact. */

.cost-table-wrap { border-radius: 16px; }
.cost-table { font-size: 0.875rem; }

/* Header: a tint rather than only a rule, so it reads as a header when the table
   scrolls sideways. No `position: sticky; top: 0` here — .cost-table-wrap only
   ever scrolls horizontally (its height fits its content), so a vertical sticky
   was inert. The horizontal freeze on the first column below is the real one. */
.cost-table thead th {
    background: #f7f9fc;
    color: #5b6b86;
    padding: 11px 14px;
    z-index: 2;
}

/* The row label stays put while the marks scroll on a narrow screen. */
.cost-table tbody th,
.cost-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff;
}
.cost-table thead th:first-child { background: #f7f9fc; z-index: 4; }
.cost-row-ours th[scope="row"] { background: #f4f9fe; }

.cost-table tbody th { min-width: 190px; padding-right: 18px; }
.cost-table tbody th small { color: #8494a8; }

/* Mark columns: centred, middle-aligned, fixed narrow width. */
.cost-matrix .cost-table td { text-align: center; vertical-align: middle; width: 1%; white-space: nowrap; }

.cost-mark {
    display: inline-block;
    min-width: 68px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.cost-mark-yes { color: #14663a; background: #e6f3ec; }
.cost-mark-no  { color: #9b2c1c; background: #fbecea; }
.cost-mark-opt { color: #8a5300; background: #fbf2e1; }

/* Price ladder: figures line up, and the source column stays out of the way. */
.cost-ladder .cost-table td { vertical-align: top; }
.cost-ladder .cost-price {
    font-variant-numeric: tabular-nums;
    color: #0f2c52;
    font-weight: 700;
    white-space: nowrap;
}
.cost-ladder .cost-src a {
    font-size: 0.8rem;
    white-space: nowrap;
    text-decoration-color: rgba(0, 51, 102, 0.3);
}

/* The row matching the route you picked. */
/* The selected marker has to live on the row-header cell, not the <tr>: that cell
   is position:sticky with its own background, so it paints over any inset shadow
   set on the row behind it. */
.cost-table tbody tr.is-selected th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--cost-navy);
    color: #003366;
}
.cost-table tbody tr:hover { background: #fafcff; }
.cost-table tbody tr:hover th[scope="row"] { background: #fafcff; }
.cost-row-ours:hover th[scope="row"] { background: #eef5fb; }

@media (max-width: 620px) {
    .cost-table tbody th { min-width: 150px; }
    .cost-mark { min-width: 56px; font-size: 0.68rem; }
}

/* ── Price ladder: provider name carries its own source ───────────────────── */
/* "Published page" repeated down a whole column is the same noise the repeated
   dates were: seven identical labels, none of which distinguishes its row. The
   provider name is now the link to that provider's published price, which drops
   a column and still puts the evidence one click from the figure it supports. */
.cost-provider {
    color: #0f2c52;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 44, 82, 0.22);
}
.cost-provider:hover { color: #003366; border-bottom-color: #003366; }
.cost-provider:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.cost-ext {
    display: inline-block;
    margin-left: 5px;
    font-size: 0.78em;
    color: #8494a8;
    border-bottom: 0;
}
.cost-provider:hover .cost-ext { color: #003366; }

/* Three columns now, so give the prose the room the Source column was using. */
.cost-ladder .cost-table th[scope="row"] { width: 22%; min-width: 170px; }
.cost-ladder .cost-table td.cost-price { width: 22%; }

/* Only needed if a row is ever re-checked out of step with the others. */
.cost-ladder .cost-table th[scope="row"] small {
    display: block; margin-top: 3px;
    font-weight: 400; font-size: 0.76rem; color: #8494a8;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ── Explainer on navy (opt-in per page via .tool-explainer--navy) ────────── */
/* Full-bleed like the hero, so it reads as a band across the page rather than a
   navy box floating in white. Every colour in the default treatment has to be
   re-stated here: the numerals sit on a white ring that masks the connector, and
   that ring has to become navy or it draws a white halo on a navy ground. */
.tool-explainer--navy {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    width: 100vw; max-width: 100vw;
    background: #003366;
    padding: 44px 0 46px;
    /* Air above the band. On the checker it follows the quiz directly, which left
       a 6px gap; on the other pages it follows the status strip, which already had
       ~32px. margin-left/right stay at -50vw for the full bleed, so this only
       affects the vertical. */
    margin-top: 40px;
    border-top: 0;
}
.tool-explainer--navy > .container { max-width: 1180px; }

.tool-explainer--navy .explainer-head h2 { color: #ffffff; }
.tool-explainer--navy .explainer-head p,
.tool-explainer--navy .explainer-lead { color: #ffffff; }

.tool-explainer--navy .explainer-step-text h3 { color: #ffffff; }
.tool-explainer--navy .explainer-step-text .explainer-lead { color: #ffffff; }
.tool-explainer--navy .explainer-step-text p { color: #bdd2e6; }

.tool-explainer--navy .explainer-step-text a,
.tool-explainer--navy .explainer-head a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 2px;
}
.tool-explainer--navy .explainer-step-text a:hover,
.tool-explainer--navy .explainer-head a:hover { text-decoration-color: #ffffff; }

/* Numeral: inverted, and its masking ring matched to the band. */
.tool-explainer--navy .explainer-step::before {
    background: #ffffff;
    color: #003366;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 6px #003366;
}

/* Connector: light enough to read on navy. */
.tool-explainer--navy .explainer-steps:has(> .explainer-step:nth-child(4):last-child)::before {
    background: rgba(255, 255, 255, 0.28);
}

/* Closing footnotes. The planner uses its own .plan-footnote rather than the
   shared .explainer-footnote, so it needs naming here too — it was rendering
   #6b7280 grey on navy, which is barely legible. */
.tool-explainer--navy .explainer-footnote,
.tool-explainer--navy .plan-footnote { color: #a9c3dc; }
/* The 28-day caveat moved in here from the result panel, so the band now carries
   two footnote paragraphs and the first opens with a bold lead-in. Italic body
   with an upright bold opener is the same treatment the caveat had in the panel;
   white for the lead-in so it reads as a heading for the paragraph. */
.tool-explainer--navy .plan-footnote + .plan-footnote { margin-top: 14px; }
.tool-explainer--navy .plan-footnote strong { color: #ffffff; font-style: normal; font-weight: 700; }
/* The paragraph is italic, so the case and consultation names inside it revert
   to roman — nested emphasis flips rather than doubling, which is the only way
   they stay distinguishable from the sentence around them. */
.tool-explainer--navy .plan-footnote em { font-style: normal; }

/* ── Score scale on navy ──────────────────────────────────────────────────── */
/* The band colours were chosen for a white ground and do not survive navy: the
   Reasonable blue (#1d6fa5) is close enough to #003366 to disappear against it,
   and the other three go muddy. Re-picked lighter so all four stay distinct from
   the band and from each other, with the same red-amber-blue-green order. */
.tool-explainer--navy .band-seg-atrisk     { color: #ff8f7a; }
.tool-explainer--navy .band-seg-weak       { color: #f0b429; }
.tool-explainer--navy .band-seg-reasonable { color: #6cb6f5; }
.tool-explainer--navy .band-seg-strong     { color: #5ecb96; }

/* The band name was dark navy — invisible on a navy ground. */
.tool-explainer--navy .band-name { color: #ffffff; }
.tool-explainer--navy .band-seg dd { color: #bdd2e6; }

.tool-explainer--navy .band-legend-note { color: #a9c3dc; }
.tool-explainer--navy .band-legend-note a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 2px;
}
.tool-explainer--navy .band-legend-note a:hover { text-decoration-color: #ffffff; }

/* ── Deadline planner: let each column be its own height ──────────────────── */
/* Stretch was wrong in BOTH states here. On load only question 1 is shown (the
   rest are gated behind the jurisdiction answer), so the form card carried ~450px
   of void; once all six are answered the form is 1,307px and the result card is
   padded out to match, with its CTAs shoved to the bottom. align-items:start lets
   each be its own height, and the result sticks so the dates stay in view while
   you work down the questions. */
.plan-grid { align-items: start; }
.plan-cta { margin-top: 22px; }

/* ── A result panel that keeps its size ───────────────────────────────────── */
/* Measured across all ten states, the panel ran 325px (nothing answered) to
   1,171px (England & Wales, not yet married, no date) — it grew and shrank under
   the reader as they answered, and the tallest thing on the page was a
   placeholder rather than the answer.

   The fix is structural, not a fixed height. A `min-height: 780px` floor did make
   seven of the ten states pixel-identical, but it bought that with 230-310px of
   dead space in the early states, which reads far worse than the resizing did.
   So the panel is sized by its content, and the content was cut instead:
     - the milestones went 2-up and lost the four sentences the navy band below
       already gives at length: 516px -> 195px;
     - the CTA block wraps its secondary links in pairs instead of stacking them
       full width: a 114px swing between the 1-CTA and 4-CTA states -> ~50px;
     - the milestone preview shows from load, so the entry state is not a lone
       sentence in a large card.
   Range is now 470-1016px, and every state is full of content at whatever height
   it lands on.

   align-self:stretch, not align-items:stretch on the grid: it lets the result
   fill the row when the FORM is the taller of the two (question 1 has four
   options) without the reverse — a stretched form would carry 570px of void
   against the finished red result. The caveat is pinned to the base so any slack
   that does open sits above it, framed, rather than trailing off the bottom. */
.plan-result { align-self: stretch; }

/* STICKY RESULT PANEL — cost checker
   An earlier attempt put `position: sticky` straight on .cost-result and it did
   nothing, because the panel is a direct grid item under `align-items:start`, so
   its containing block is a grid area exactly its own height — zero travel. The
   fix is the .cost-result-col wrapper in prenup_cost_checker.html: the wrapper is
   the grid item and stretches to the row, the panel is its child, and the
   difference between the two is the distance the panel can travel.
   (The scrollport being <body> rather than <html> — .d-flex.flex-column carries
   overflow-y:auto — turned out not to matter: sticky resolves against the nearest
   scrollport either way.)

   Measured at 1440x900: form 1087px, panel 793–858px depending on route, so the
   panel stays pinned for the last ~230–290px of the form and releases at the end
   of the grid.

   top:100px clears the navbar, which is position:sticky, 84px tall and on screen
   the whole way down, plus 16px of air.

   No max-height/overflow-y here, though it was tried. The panel is 793-858px and
   the space under the navbar is 100vh-116px, so on every common laptop viewport
   it overflows by a little and the card carries a permanent inner scrollbar. It
   is also the wrong call for the content: the bottom of this panel is "These are
   estimates, not quotes", and a caveat you reach by scrolling inside a box reads
   as more tucked away than one you reach by scrolling the page. Nothing is
   unreachable without it - the panel releases at the end of the grid and its
   bottom comes into view then (measured: at 1440x768, scroll 900 puts the panel
   at top:-4 with its full height on screen).

   Below 941px the grid is one column and the panel sits under the form, where
   pinning it would cover the questions, so none of this applies. */
@media (min-width: 941px) {
    .cost-result-col { align-self: stretch; }

    .cost-result {
        position: sticky;
        top: 100px;
    }
}

/* ── Deadline planner: step mode ──────────────────────────────────────────── */
/* Same visual language as the checker's stepper. .is-stepped is added by
   prenup_deadline.js, so without it the progressive-reveal form still applies
   and a no-JS visitor gets every question. */
.plan-form.is-stepped { display: flex; flex-direction: column; }
.plan-form.is-stepped .plan-step { border-top: 0; padding: 4px 0 0; }
.plan-form.is-stepped .plan-step-q { font-size: 1.1rem; line-height: 1.45; margin-bottom: 14px; }
.plan-form.is-stepped .plan-opts label { padding: 13px 18px; font-size: 0.98rem; }

.plan-progress { margin: 0 0 22px; }
.plan-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 9px;
}
.plan-progress-label {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #003366;
}
.plan-progress-count { font-size: 0.78rem; color: #8494a8; font-variant-numeric: tabular-nums; }
.plan-progress-track { height: 6px; border-radius: 999px; background: #e9eff6; overflow: hidden; }
.plan-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #003366;
    transition: width .32s ease;
}
@media (prefers-reduced-motion: reduce) { .plan-progress-fill { transition: none; } }

.plan-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 20px;
}
.plan-back, .plan-next { min-width: 120px; }

/* ══ Touch targets on phones ═══════════════════════════════════════════════ */
/* Measured at 390px, these were the controls a thumb has to hit that came in
   under 40px tall: the checker's step list at 35px, the disclosure reset at
   30px, a stat card's copy-link at 30x30, the cost checker's two tabs at 38px
   and the statistics pills at 39px. All of them clear the 24x24 WCAG 2.5.8 AA
   floor, so this is not a conformance fix - it is that a 30px control inside a
   scrolling page is a miss-and-retry on a real phone, where the contact patch is
   nearer 44px (Apple HIG; Material says 48dp).
   Only min-height and padding change. Nothing here alters font size, colour or
   layout, so the desktop design is untouched and the pages keep their measured
   heights above 700px. */
@media (max-width: 700px) {
    .quiz-steps-item { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .disc-reset { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .cost-tab { min-height: 44px; }
    .stats-jumpnav a,
    .stats-jumpnav .stats-tab { min-height: 44px; display: inline-flex; align-items: center; }

    /* 40, not 44: this one is absolutely positioned in the top-right corner of a
       stat card, and 44 starts crowding the figure it sits beside. */
    .stat-copylink { width: 40px; height: 40px; }
}

/* ══ Cost tables become cards on a phone ═══════════════════════════════════ */
/* The matrix is seven columns. At 390px the wrap is 358px and the sticky route
   column holds 190px of it, so six columns of pills had to pass through a 145px
   window - the screenshot symptom was a header reading "LEGAL AD" and a pill cut
   in half. There is no width tuning that fixes seven columns at this size, and
   the price ladder had the same problem with its third column, so both tables
   stack into one card per row with each cell labelled by its column.

   Semantics: turning table parts into blocks drops their implicit ARIA roles, so
   the markup now carries explicit role="table"/rowgroup/row/columnheader/
   rowheader/cell. The thead is visually hidden rather than display:none for the
   same reason - display:none would take the column headers out of the
   accessibility tree and leave a screen reader hearing "Yes" with nothing to
   attach it to. The ::before labels are for sighted users; the aria-label on
   every .cost-mark still carries the full sentence. */
@media (max-width: 700px) {
    .cost-table-wrap {
        overflow-x: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    /* .cost-ladder .cost-table sets its own min-width:700px at (0,2,0), so a bare
       .cost-table reset at (0,1,0) loses to it however late it appears. */
    .cost-table,
    .cost-matrix .cost-table,
    .cost-ladder .cost-table { display: block; min-width: 0; font-size: 0.9rem; }
    .cost-table tbody { display: block; }

    .cost-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cost-table tbody tr {
        display: block;
        margin-bottom: 12px;
        padding: 0 16px 6px;
        border: 1px solid #eaf0f6;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 6px 20px rgba(0, 51, 102, 0.05);
    }
    .cost-table tbody tr:last-child { margin-bottom: 0; }

    /* The row label becomes the card's heading. position:static undoes the
       horizontal freeze, which has nothing left to hold still. */
    .cost-table tbody th {
        display: block;
        position: static;
        min-width: 0;
        padding: 14px 0 11px;
        border-top: 0;
        border-bottom: 1px solid #eef2f7;
        font-size: 1rem;
    }
    .cost-table tbody th small { margin-top: 4px; }

    /* Label left, value right, one line per attribute. The width:1% and nowrap
       the matrix sets for its narrow pill columns both have to go. */
    .cost-matrix .cost-table td,
    .cost-ladder .cost-table td,
    .cost-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: auto;
        padding: 10px 0;
        border-top: 0;
        border-bottom: 1px solid #f4f7fb;
        text-align: right;
        vertical-align: middle;
        white-space: normal;
    }
    .cost-table tbody tr td:last-child { border-bottom: 0; }

    .cost-table tbody td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        text-align: left;
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.45;
        color: #5b6b86;
    }

    /* Our own row keeps its highlight, moved from the frozen cell to the card. */
    .cost-table tbody tr.cost-row-ours {
        border-color: #cfe1f5;
        background: #f8fbff;
    }
    .cost-row-ours th[scope="row"] { background: transparent; }
    .cost-table tbody tr.is-selected { box-shadow: 0 6px 20px rgba(0, 51, 102, 0.05); border-color: var(--cost-navy); }

    /* The ladder stacks its label above its value instead of sitting them on one
       line. Its values are phrases, not the matrix's one-word pills - "£690 per
       person (£1,380 per couple)" against a "Published price" label leaves both
       flex items shrinking, and the price came out as five ragged lines. */
    /* Centred: stacked, each provider card is a self-contained block whose name,
       price and description all belong to the one heading above them, so they
       read as a unit rather than a left-aligned column of fragments. */
    .cost-ladder .cost-table tbody th,
    .cost-ladder .cost-table td,
    .cost-ladder .cost-table td.cost-price {
        display: block;
        width: auto;
        text-align: center;
        padding: 11px 0;
    }
    .cost-ladder .cost-table td::before {
        display: block;
        margin-bottom: 3px;
        text-align: center;
    }
    /* The column widths that shared out a 700px table - 22% to the provider and
       22% to the price - are percentages of a 298px card once stacked, which is
       what squeezed "£690 per person (£1,380 per couple)" into one word per
       line. Both need resetting at their own specificity to be beaten. */
    .cost-ladder .cost-table th[scope="row"] { width: auto; min-width: 0; }
    .cost-ladder .cost-price { font-size: 1rem; white-space: normal; }
}