/* ================================================================
   DV VISA PATHWAY HELPER — style.css
   Calm, professional, trauma-aware design
   Suitable for a UK immigration law firm website
   Fully mobile responsive
   ================================================================ */


/* ----------------------------------------------------------------
   1. COLOUR VARIABLES & GLOBAL RESET
   ---------------------------------------------------------------- */

:root {
    /* Brand colours — soft and calming */
    --colour-primary:        #2a6496;   /* deep calm blue */
    --colour-primary-light:  #d6e8f5;   /* very light blue for backgrounds */
    --colour-primary-hover:  #1e4d73;   /* darker blue on hover */

    /* Page & card backgrounds */
    --colour-bg:             #f4f7fa;   /* soft off-white page background */
    --colour-card:           #ffffff;   /* white card background */

    /* Text colours */
    --colour-text:           #2c3e50;   /* dark charcoal for body text */
    --colour-text-light:     #5d6d7e;   /* muted grey for secondary text */
    --colour-text-white:     #ffffff;

    /* Borders and dividers */
    --colour-border:         #d5e0ec;   /* soft blue-grey border */
    --colour-border-focus:   #2a6496;   /* blue border on focus */

    /* Safe Exit button — deep plum, visible but professional */
    --colour-exit-bg:        #6e2b47;
    --colour-exit-hover:     #55203a;

    /* Disclaimer bar — soft amber */
    --colour-disclaimer-bg:  #fef9e7;
    --colour-disclaimer-border: #f0c040;
    --colour-disclaimer-text:   #7d6608;

    /* Validation error */
    --colour-error:          #c0392b;
    --colour-error-bg:       #fdecea;

    /* Support cards — warm accent */
    --colour-support-accent: #1a6b4a;   /* deep green for support section */
    --colour-support-hover:  #145239;
    --colour-support-card-top: #e8f5ee; /* light green card header */

    /* Info boxes */
    --colour-info-bg:        #eaf3fb;
    --colour-info-border:    #aacde8;

    /* Spacing scale */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;

    /* Radius */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;

    /* Shadows */
    --shadow-card: 0 2px 12px rgba(42, 100, 150, 0.10);
    --shadow-btn:  0 2px 6px  rgba(42, 100, 150, 0.18);
}

/* Global reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: auto;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #f5f3ee;
    color: var(--colour-text);
    line-height: 1.7;
    min-height: 100vh;
}


/* ----------------------------------------------------------------
   2. SAFE EXIT BAR
   Always fixed at the top — visible on every screen
   ---------------------------------------------------------------- */

#safe-exit-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--colour-exit-bg);
    z-index: 1000;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
}

#safe-exit-btn {
    background-color: var(--colour-text-white);
    color: var(--colour-exit-bg);
    border: 2px solid var(--colour-text-white);
    border-radius: var(--radius-sm);
    padding: 6px 18px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background-color 0.2s, color 0.2s;
}

#safe-exit-btn:hover,
#safe-exit-btn:focus {
    background-color: var(--colour-exit-bg);
    color: var(--colour-text-white);
    outline: 3px solid var(--colour-text-white);
}

/* Explanatory label inside the safe exit bar */
.safe-exit-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

.safe-exit-label::after {
    content: '|';
    margin-left: var(--space-md);
    color: rgba(255, 255, 255, 0.35);
}


/* ----------------------------------------------------------------
   3. DISCLAIMER BAR
   Always visible below the safe exit bar
   ---------------------------------------------------------------- */

#disclaimer-bar {
    position: fixed;
    top: 44px;           /* sits directly below the safe exit bar */
    left: 0;
    width: 100%;
    background-color: var(--colour-disclaimer-bg);
    border-bottom: 2px solid var(--colour-disclaimer-border);
    z-index: 999;
    padding: var(--space-sm) var(--space-lg);
    text-align: center;
}

#disclaimer-bar p {
    font-size: 14px;
    color: var(--colour-disclaimer-text);
    line-height: 1.6;
}


/* ----------------------------------------------------------------
   4. MAIN APP WRAPPER
   Adds top padding to clear the fixed bars above
   ---------------------------------------------------------------- */

#app {
    max-width: 760px;
    margin: 0 auto;
    padding: 120px var(--space-lg) var(--space-xl);
    /* 120px top padding clears both fixed bars comfortably */
}


/* ----------------------------------------------------------------
   5. HEADER
   ---------------------------------------------------------------- */

#main-header {
    display: none;
    text-align: center;
    margin-bottom: var(--space-lg);
    padding: var(--space-xl) var(--space-md) var(--space-lg);
}

#main-header h1 {
    font-size: 1.2rem;
    color: #085041;
    font-weight: bold;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.header-subtitle {
    display: none;
    font-size: 1rem;
    color: rgba(8, 80, 65, 0.6);
    margin-top: var(--space-sm);
    font-style: italic;
}


/* ----------------------------------------------------------------
   6. PROGRESS INDICATOR
   ---------------------------------------------------------------- */

#progress-container {
    display: none;             /* hidden on welcome page — script.js shows it from Step 1 onward */
    margin-bottom: var(--space-lg);
    text-align: center;
}

#app:has(#step-6.active) #progress-container {
    display: none !important;
}

#app:has(#support-page.active) #progress-container {
    display: none !important;
}

#progress-bar-track {
    background-color: #E1F5EE;
    border-radius: 99px;
    height: 10px;
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

#progress-bar-fill {
    background-color: #085041;
    height: 100%;
    width: 20%;           /* script.js updates this per step: 20/40/60/80/100 */
    border-radius: 99px;
    transition: width 0.2s ease;
}

#step-label {
    font-size: 0.85rem;
    color: rgba(8, 80, 65, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------------
   7. STEP SECTIONS
   Each step is a card — only the active one is shown
   ---------------------------------------------------------------- */

.step-section {
    display: none;            /* hidden by default — script.js shows active step */
    background-color: #ffffff;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-xl);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-xl);
}

.step-section.active {
    display: block;           /* only the active step is visible */
}

.step-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #085041;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    padding-bottom: 12px;
    border-bottom: 2px solid #085041;
}

.step-intro {
    font-size: 0.95rem;
    color: var(--colour-text-light);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}


/* ----------------------------------------------------------------
   8. FORM GROUPS, LABELS, INPUTS
   ---------------------------------------------------------------- */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group > label {
    display: block;
    font-size: 0.97rem;
    font-weight: bold;
    color: var(--colour-text);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

/* Dropdowns (select elements) */
select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.97rem;
    color: var(--colour-text);
    background-color: var(--colour-card);
    border: 1.5px solid var(--colour-border);
    border-radius: var(--radius-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232a6496' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus {
    outline: none;
    border-color: var(--colour-border-focus);
    box-shadow: 0 0 0 3px rgba(42, 100, 150, 0.15);
}

/* Number input (children count) */
input[type="number"] {
    display: block;
    width: 120px;
    padding: 10px 14px;
    font-size: 0.97rem;
    color: var(--colour-text);
    background-color: var(--colour-card);
    border: 1.5px solid var(--colour-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="number"]:focus {
    outline: none;
    border-color: var(--colour-border-focus);
    box-shadow: 0 0 0 3px rgba(42, 100, 150, 0.15);
}


/* ----------------------------------------------------------------
   9. RADIO BUTTONS & CHECKBOXES
   ---------------------------------------------------------------- */

.radio-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.radio-label,
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--colour-text);
    cursor: pointer;
    padding: 10px 14px;
    border: 1.5px solid var(--colour-border);
    border-radius: var(--radius-sm);
    background-color: var(--colour-bg);
    transition: background-color 0.2s, border-color 0.2s;
    line-height: 1.5;
}

.radio-label:hover,
.checkbox-label:hover {
    background-color: var(--colour-primary-light);
    border-color: var(--colour-primary);
}

/* Custom radio and checkbox sizing */
.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--colour-primary);
    cursor: pointer;
}


/* ----------------------------------------------------------------
   10. VISA EXPIRY ROW (two selects side by side)
   ---------------------------------------------------------------- */

.expiry-row {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.expiry-row select {
    flex: 1;
    min-width: 140px;
}


/* ----------------------------------------------------------------
   11. CONDITIONAL SECTION (children follow-up questions)
   Hidden by default — shown/hidden by script.js
   ---------------------------------------------------------------- */

.conditional-section {
    display: none;            /* script.js sets display:block when needed */
    background-color: var(--colour-primary-light);
    border: 1.5px solid var(--colour-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.conditional-section .form-group:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------------
   12. VALIDATION ERROR MESSAGES
   ---------------------------------------------------------------- */

.validation-error {
    font-size: 0.88rem;
    color: var(--colour-error);
    background-color: var(--colour-error-bg);
    border-left: 4px solid var(--colour-error);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin-top: var(--space-sm);
    display: none;            /* shown by script.js only when there is an error */
}

.validation-error.visible {
    display: block;
}


/* ----------------------------------------------------------------
   13. NAVIGATION BUTTONS (Back / Next)
   ---------------------------------------------------------------- */

.button-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-xl);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.btn-back,
.btn-next {
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    min-width: 120px;
    text-align: center;
    box-shadow: var(--shadow-btn);
}

.btn-back {
    background-color: var(--colour-card);
    color: #085041;
    border-color: #085041;
}

.btn-back:hover,
.btn-back:focus {
    background-color: var(--colour-primary-light);
    outline: none;
}

.btn-next {
    background-color: #085041;
    color: var(--colour-text-white);
    border-color: #085041;
    margin-left: auto;        /* pushes Next to the right when Back is absent */
}

.btn-next:hover,
.btn-next:focus {
    background-color: #063d32;
    outline: none;
}


/* ----------------------------------------------------------------
   14. RESULTS PAGE — DISCLAIMER
   ---------------------------------------------------------------- */

.results-disclaimer {
    background-color: var(--colour-disclaimer-bg);
    border: 1.5px solid var(--colour-disclaimer-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: 0.9rem;
    color: var(--colour-disclaimer-text);
    line-height: 1.6;
}


/* ----------------------------------------------------------------
   15. SUMMARY OUTPUT
   The div populated by script.js on the results page
   ---------------------------------------------------------------- */

#summary-output {
    margin-bottom: var(--space-xl);
}

/* Each named section of the summary (e.g. Relationship, Evidence) */
.summary-section {
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    background-color: var(--colour-card);
}

.summary-section-title {
    background-color: var(--colour-card);
    color: var(--colour-primary);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--colour-border);
}

.summary-section-body {
    padding: var(--space-md) var(--space-md) var(--space-lg);
    background-color: var(--colour-card);
}

.summary-row {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: 0.93rem;
    line-height: 1.6;
    flex-wrap: wrap;
}

.summary-row:last-child {
    margin-bottom: 0;
}

.summary-label {
    font-weight: bold;
    color: var(--colour-text);
    min-width: 180px;
    flex-shrink: 0;
}

.summary-value {
    color: var(--colour-text);
    flex: 1;
}

/* Key Guidance section */
.summary-guidance {
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.summary-guidance h3 {
    color: var(--colour-primary);
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.summary-guidance ul {
    padding-left: var(--space-lg);
    font-size: 0.93rem;
    color: var(--colour-text);
    line-height: 1.8;
}

/* Timeline warning — draws attention when visa is expiring soon */
.summary-warning {
    background-color: #fff4e5;
    border-left: 4px solid #e67e22;
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: #7d4e00;
}


/* ----------------------------------------------------------------
   15b. SUMMARY PREVIEW — "Summary at a Glance"
   Compact on-screen preview card on the Results page.
   The full structured case summary is available via the download.
   ---------------------------------------------------------------- */

/* Preview card container — matches summary-section left-accent style */
.summary-preview {
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

/* Section heading inside the preview card */
.summary-preview-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--colour-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--colour-border);
}

/* Each key fact row — label and value side by side */
.summary-preview-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--colour-border);
    font-size: 0.93rem;
    line-height: 1.6;
    flex-wrap: wrap;
}

.summary-preview-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Label — e.g. "Visa type" */
.summary-preview-label {
    font-weight: 600;
    color: var(--colour-text);
    min-width: 170px;
    flex-shrink: 0;
}

/* Value — e.g. "Spouse or Civil Partner Visa" */
.summary-preview-value {
    color: var(--colour-text);
    flex: 1;
}

/* Mobile — stack label above value on small screens */
@media (max-width: 480px) {

    .summary-preview {
        padding: var(--space-md);
    }

    .summary-preview-item {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .summary-preview-label {
        min-width: auto;
        font-size: 0.88rem;
        color: var(--colour-text-light);
    }
}


/* ----------------------------------------------------------------
   16. ACTION BUTTONS (results page)
   ---------------------------------------------------------------- */

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xl);
    border-top: 1px solid var(--colour-border);
    padding-top: var(--space-lg);
}

.btn-action {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 0.97rem;
    font-weight: bold;
    text-align: left;
    background-color: var(--colour-card);
    color: var(--colour-primary);
    border: 2px solid var(--colour-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    box-shadow: var(--shadow-btn);
}

.btn-action:hover,
.btn-action:focus {
    background-color: var(--colour-primary);
    color: var(--colour-text-white);
    outline: none;
}

/* Support button — green accent to distinguish it */
.btn-support {
    background-color: var(--colour-support-card-top);
    color: var(--colour-support-accent);
    border-color: var(--colour-support-accent);
}

.btn-support:hover,
.btn-support:focus {
    background-color: var(--colour-support-accent);
    color: var(--colour-text-white);
}

/* Primary action — Download This Summary */
.btn-action--primary {
    background-color: var(--colour-primary);
    color: var(--colour-text-white);
    border-color: var(--colour-primary);
    text-align: center;
    padding: 16px 20px;
    box-shadow: 0 3px 10px rgba(42, 100, 150, 0.28);
}

.btn-action--primary:hover,
.btn-action--primary:focus {
    background-color: var(--colour-primary-hover);
    border-color: var(--colour-primary-hover);
    color: var(--colour-text-white);
}


/* ----------------------------------------------------------------
   17. INFO BOXES
   Personal statement guidance and solicitor contact blocks
   ---------------------------------------------------------------- */

.info-box {
    background-color: var(--colour-info-bg);
    border: 1.5px solid var(--colour-info-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.info-box h3 {
    color: var(--colour-primary);
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
}

.info-box p {
    font-size: 0.93rem;
    color: var(--colour-text);
    margin-bottom: var(--space-sm);
    line-height: 1.7;
}

.info-box ul {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.info-box ul li {
    font-size: 0.93rem;
    color: var(--colour-text);
    margin-bottom: var(--space-xs);
    line-height: 1.7;
}

.info-note {
    font-style: italic;
    color: var(--colour-text-light) !important;
    font-size: 0.88rem !important;
}

/* Hidden utility class — toggled by script.js */
.hidden {
    display: none !important;
}


/* ----------------------------------------------------------------
   18. LOCAL SUPPORT PAGE
   ---------------------------------------------------------------- */

.support-card {
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-top: 4px solid #085041;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-card);
}

.support-card h3 {
    color: #085041;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.support-card p {
    font-size: 0.93rem;
    color: var(--colour-text);
    margin-bottom: 10px;
    line-height: 1.6;
}

.support-card p:last-of-type {
    margin-bottom: 0;
}

.support-note {
    font-style: italic;
    color: var(--colour-text-light);
    font-size: 0.88rem;
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--colour-border);
}

#support-page {
    background-color: #f5f3ee;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
}

#support-page .support-body {
    padding: 28px;
}

#support-page .support-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#support-page .support-option {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    background-color: #ffffff;
    border: 1px solid rgba(8, 80, 65, 0.18);
    border-left: 4px solid #085041;
    border-radius: 10px;
    padding: 16px;
    box-shadow: none;
}

#support-page .support-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eaf7f2;
    color: #085041;
    flex-shrink: 0;
}

#support-page .support-option-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#support-page .support-option-content {
    min-width: 0;
}

#support-page .support-option h3 {
    color: #202a25;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 4px;
}

#support-page .support-option p {
    color: #59635e;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

#support-page .support-option .support-note {
    color: #59635e;
    font-size: 13px;
    font-style: normal;
    margin-top: 7px;
    padding-top: 0;
    border-top: 0;
}

#support-page .support-option-danger {
    border-color: rgba(190, 42, 42, 0.24);
    border-left-color: #B3261E;
}

#support-page .support-option-danger .support-option-icon {
    background-color: #FCEEEE;
    color: #B3261E;
}

#support-page .support-option-danger h3 {
    color: #8f1f1a;
}

#support-page .support-option-danger p {
    color: #8f1f1a;
    font-weight: 700;
}

#support-page .emergency-block {
    background: #fafafa;
    border: 1.5px solid #d4d4d4;
    border-left: 4px solid #b91c1c;
    padding: 16px 20px;
    margin-top: 16px;
    border-radius: 3px;
}

#support-page .emergency-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b91c1c;
    margin-bottom: 6px;
}

#support-page .emergency-number {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

#support-page .emergency-detail {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

#support-page .support-hero {
    padding: 32px 24px 38px;
}

#support-page .btn-back {
    background-color: #085041;
    color: #ffffff;
    border-color: #085041;
    border-radius: 10px;
}

#support-page .btn-back:hover,
#support-page .btn-back:focus {
    background-color: #063d32;
    border-color: #063d32;
    color: #ffffff;
}


/* ----------------------------------------------------------------
   19. RESPONSIVE DESIGN — TABLET & MOBILE
   ---------------------------------------------------------------- */

/* Tablet — up to 768px */
@media (max-width: 768px) {

    #app {
        padding: 130px var(--space-md) var(--space-lg);
    }

    #main-header h1 {
        font-size: 1.6rem;
    }

    .step-section {
        padding: var(--space-lg) var(--space-md);
    }

    .step-title {
        font-size: 1.25rem;
    }

    .summary-label {
        min-width: 100%;      /* stacks label above value on small screens */
    }

    .summary-row {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .expiry-row {
        flex-direction: column;
    }

    .expiry-row select {
        width: 100%;
    }
}

/* Mobile — up to 480px */
@media (max-width: 480px) {

    /* Hide the Safe Exit label on small screens — button only */
    .safe-exit-label {
        display: none;
    }

    body {
        font-size: 15px;
    }

    #app {
        padding: 120px var(--space-md) var(--space-md);
    }

    #disclaimer-bar {
        padding: var(--space-sm) var(--space-md);
    }

    #disclaimer-bar p {
        font-size: 0.78rem;
    }

    #main-header h1 {
        font-size: 1.35rem;
    }

    .header-subtitle {
        font-size: 0.9rem;
    }

    .step-section {
        padding: var(--space-md) var(--space-md);
        border-radius: var(--radius-md);
    }

    .step-title {
        font-size: 1.1rem;
    }

    .btn-back,
    .btn-next {
        width: 100%;
        text-align: center;
    }

    .button-row {
        flex-direction: column-reverse;
        /* Next appears first (on top) on small screens */
    }

    .btn-next {
        margin-left: 0;
    }

    .btn-action {
        font-size: 0.9rem;
        padding: 13px 16px;
    }

    input[type="number"] {
        width: 100%;
    }
}


/* ----------------------------------------------------------------
   20. ACCESSIBILITY — FOCUS STYLES
   Ensures keyboard users can always see where focus is
   ---------------------------------------------------------------- */

a:focus,
button:focus,
select:focus,
input:focus {
    outline: 3px solid var(--colour-primary);
    outline-offset: 2px;
}

/* Remove outline on mouse click (keeps it for keyboard only) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}


/* ----------------------------------------------------------------
   21. UTILITY
   ---------------------------------------------------------------- */

/* Smooth separator line between major areas */
hr.divider {
    border: none;
    border-top: 1px solid var(--colour-border);
    margin: var(--space-lg) 0;
}


/* ----------------------------------------------------------------
   22. WELCOME / SAFETY NOTICE PAGE
   Styles for the pre-step welcome screen only.
   All existing step styles are unchanged.
   ---------------------------------------------------------------- */

/* Bullet list of notice points */
.welcome-notices {
    list-style: none;          /* remove default bullets */
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
}

.welcome-notices li {
    position: relative;
    padding-left: var(--space-xl);
    font-size: 0.95rem;
    color: var(--colour-text);
    line-height: 1.8;
    margin-bottom: var(--space-md);
    border-left: 3px solid var(--colour-primary-light);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}

.welcome-notices li:last-child {
    margin-bottom: 0;
}

/* Agreement checkbox wrapper — visually distinct from regular form questions */
.welcome-agreement {
    background-color: #fef9e7;         /* soft amber — same tone as disclaimer bar */
    border: 2px solid #f0c040;
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

/* Override the checkbox label inside the agreement box —
   it should sit directly on the amber background, not on its own card */
.welcome-agreement .checkbox-label {
    background-color: transparent;
    border: none;
    padding: var(--space-xs) 0;
    font-size: 0.97rem;
    font-weight: bold;
    color: var(--colour-text);
    line-height: 1.6;
}

.welcome-agreement .checkbox-label:hover {
    background-color: transparent;
    border-color: transparent;
}

/* Mobile adjustments for welcome page */
@media (max-width: 480px) {

    .welcome-notices li {
        font-size: 0.9rem;
        padding-left: var(--space-lg);
        line-height: 1.7;
    }

    .welcome-agreement {
        padding: var(--space-md);
    }
}


/* ----------------------------------------------------------------
   23. RESULTS PAGE — NEW CONTENT BOXES
   Suggested Next Steps and Legal Disclaimer boxes.
   Uses only existing colour variables — no new colours introduced.
   ---------------------------------------------------------------- */

/* Suggested Next Steps box */
.next-steps-box {
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.next-steps-box h3 {
    color: var(--colour-primary);
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.next-steps-box ul {
    padding-left: var(--space-lg);
    font-size: 0.93rem;
    color: var(--colour-text);
    line-height: 1.9;
}

.next-steps-box ul li {
    margin-bottom: var(--space-xs);
}

.next-steps-box ul li:last-child {
    margin-bottom: 0;
}

/* Legal / Safety Disclaimer box */
.results-full-disclaimer {
    background-color: var(--colour-disclaimer-bg);       /* soft amber */
    border: 1.5px solid var(--colour-disclaimer-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    font-size: 0.88rem;
    color: var(--colour-disclaimer-text);
    line-height: 1.6;
}


/* ----------------------------------------------------------------
   24. KEY GUIDANCE CARDS (Results page)
   ---------------------------------------------------------------- */

/* Intro paragraph — calm, readable, gently set apart */
.guidance-intro {
    background-color: var(--colour-card);
    border-left: 4px solid var(--colour-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.guidance-intro p {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.93rem;
    color: var(--colour-text);
    line-height: 1.75;
}

.guidance-intro p:last-child {
    margin-bottom: 0;
}

/* Card container — stacks cards vertically */
.guidance-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Individual guidance card */
.guidance-card {
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-left: 3px solid var(--colour-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}

/* Card title — scannable label */
.guidance-card-title {
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--colour-primary);
    margin-bottom: var(--space-xs);
}

/* Card body text */
.guidance-card-text {
    font-size: 0.91rem;
    color: var(--colour-text);
    line-height: 1.75;
}


/* ----------------------------------------------------------------
   25. RESULTS PAGE — TWO-COLUMN PREMIUM LAYOUT
   Applies only to #step-6. Does not affect steps 1–5,
   the welcome page, support page, or any global styles.
   ---------------------------------------------------------------- */

/* Results page heading — bolder than step-title used on steps 1–5 */
.results-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--colour-primary);
    line-height: 1.3;
    margin-bottom: var(--space-md);
}

/* Desktop breakout — wider than #app for two-column dashboard feel.
   Steps 1–5 are not affected (they use different IDs).
   Reset cleanly below 900px to prevent horizontal overflow. */
#step-6 {
    width: min(1060px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Two-column grid wrapper */
#results-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

/* Left column — no special framing, just width */
#results-main {
    min-width: 0;   /* prevents grid blowout on long content */
}

/* Right column — sticky so panel stays visible while scrolling */
#results-panel {
    position: sticky;
    top: 160px;     /* clears the fixed safe-exit + disclaimer bars */
}

/* Panel card */
.results-panel-inner {
    background-color: var(--colour-card);
    border: 1.5px solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(42, 100, 150, 0.13);
    padding: 28px var(--space-lg);
    text-align: center;
}

/* Circular icon area — hidden (div is empty, status conveyed by heading and border colour) */
.results-panel-icon {
    display: none;
}

/* Status heading inside the panel */
.results-panel-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--colour-text);
    line-height: 1.25;
    margin-bottom: var(--space-sm);
}

/* Support text below the heading */
.results-panel-text {
    font-size: 0.92rem;
    color: var(--colour-text);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Trust pills container */
.trust-pills {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
}

/* Individual trust pill badge */
.trust-pill {
    display: block;
    width: 100%;
    background-color: var(--colour-primary-light);
    color: var(--colour-primary);
    border: 1px solid var(--colour-info-border);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    line-height: 1.5;
    text-align: center;
}

/* Important notice box — warm but calm, not alarming */
.results-important-box {
    background-color: #fef9e7;
    border: 1.5px solid #f0c040;
    border-left: 4px solid #c9a200;
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.results-important-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #7d6608;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-xs);
}

.results-important-box p {
    font-size: 0.91rem;
    color: #5a4a04;
    line-height: 1.6;
    margin: 0;
}

/* ----------------------------------------------------------------
   Results layout — responsive
   Tablet (≤ 900px): stack into single column, panel moves below heading
   ---------------------------------------------------------------- */
@media (max-width: 900px) {

    /* Reset the desktop breakout — no horizontal overflow on tablet/mobile */
    #step-6 {
        width: auto;
        margin-left: 0;
        transform: none;
    }

    #results-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    #results-panel {
        position: static;   /* remove sticky on small screens */
        order: -1;
    }

    .results-panel-inner {
        padding: var(--space-md) var(--space-lg);
    }

    .results-heading {
        font-size: 1.4rem;
    }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {

    .results-heading {
        font-size: 1.2rem;
    }

    .results-panel-inner {
        padding: var(--space-md);
    }

    .trust-pills {
        gap: var(--space-xs);
    }
}


/* ----------------------------------------------------------------
   26. STATUS PANEL MODIFIERS
   Applied dynamically by script.js to #results-panel based on
   the user's answers. Colour is used as a professional accent only —
   card background stays white, colour appears on border, icon, heading.
   Three levels: prepared / important / urgent.
   No risk labels. No pass/fail wording.
   ---------------------------------------------------------------- */

/* ------ 1. Summary Prepared — teal/calm ------ */

#results-panel.panel-status--prepared .results-panel-inner {
    border-color: #2e8b6e;
    border-top: 5px solid #2e8b6e;
    box-shadow: 0 4px 24px rgba(46, 139, 110, 0.18);
}

#results-panel.panel-status--prepared .results-panel-icon {
    background-color: #e6f5f0;
    border-color: #2e8b6e;
    border-width: 3px;
    color: #1a6b4a;
}

#results-panel.panel-status--prepared .results-panel-heading {
    color: #1a6b4a;
}

/* ------ 2. Important Points Identified — warm gold ------ */

#results-panel.panel-status--important .results-panel-inner {
    border-color: #c9a200;
    border-top: 5px solid #c9a200;
    box-shadow: 0 4px 24px rgba(201, 162, 0, 0.18);
}

#results-panel.panel-status--important .results-panel-icon {
    background-color: #fef8e1;
    border-color: #c9a200;
    border-width: 3px;
    color: #7d6608;
}

#results-panel.panel-status--important .results-panel-heading {
    color: #7d5a00;
}

/* ------ 3. Urgent Support Recommended — deep rose/plum (softer than crimson) ------ */

#results-panel.panel-status--urgent .results-panel-inner {
    border-color: #6e3050;
    border-top: 5px solid #6e3050;
    box-shadow: 0 4px 24px rgba(110, 48, 80, 0.18);
}

#results-panel.panel-status--urgent .results-panel-icon {
    background-color: #f5eaf0;
    border-color: #6e3050;
    border-width: 3px;
    color: #6e3050;
}

#results-panel.panel-status--urgent .results-panel-heading {
    color: #6e3050;
}


/* ================================================================
   27. WELCOME / BEFORE YOU BEGIN PAGE — CARD LAYOUT
   Applies only to #welcome-page content.
   Does not affect Step 1–6, Results page, support page,
   Safe Exit, global buttons, or global form styles.
   ================================================================ */

/* ----------------------------------------------------------------
   Header: shield placeholder circle + heading + intro
   ---------------------------------------------------------------- */

.welcome-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-md);
}

/* Empty placeholder — hidden */
.welcome-header-icon {
    display: none;
}

.welcome-header-text {
    width: 100%;
}

.welcome-heading {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--colour-primary);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.welcome-intro {
    font-size: 0.95rem;
    color: var(--colour-text-light);
    line-height: 1.5;
    margin: 0;
}


/* ----------------------------------------------------------------
   "What this tool does" card
   ---------------------------------------------------------------- */

.welcome-what-card {
    padding: var(--space-md) 0;
    margin-bottom: var(--space-md);
}

/* Empty placeholder — hidden */
.welcome-what-icon {
    display: none;
}

.welcome-what-body {
    width: 100%;
}

.welcome-what-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--colour-primary);
    margin-bottom: var(--space-sm);
}

.welcome-what-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.welcome-what-list li {
    position: relative;
    padding-left: var(--space-lg);
    font-size: 0.93rem;
    color: var(--colour-text);
    line-height: 1.75;
    margin-bottom: var(--space-xs);
}

.welcome-what-list li:last-child {
    margin-bottom: 0;
}

/* CSS-only bullet dot */
.welcome-what-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--colour-primary);
}


/* ----------------------------------------------------------------
   Trust / safety card grid (2x2 on desktop)
   ---------------------------------------------------------------- */

.welcome-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.welcome-trust-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md) var(--space-sm);
}

/* Base circle for all trust card icons */
.welcome-trust-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    /* default colours — overridden by modifier classes below */
    background-color: var(--colour-primary-light);
    color: var(--colour-primary);
    border: 2px solid var(--colour-info-border);
}

/* Not legal advice — soft rose */
.welcome-trust-icon--legal {
    background-color: #fdeef0;
    color: #9b1c1c;
    border-color: #e8aaaa;
}

/* No data stored — soft blue */
.welcome-trust-icon--data {
    background-color: var(--colour-primary-light);
    color: var(--colour-primary);
    border-color: var(--colour-info-border);
}

/* Safe Exit available — soft teal */
.welcome-trust-icon--exit {
    background-color: #e6f5f0;
    color: #1a6b4a;
    border-color: #a8d9c8;
}

/* No detailed abuse description — soft lavender */
.welcome-trust-icon--chat {
    background-color: #EAF7F2;
    color: #0F4A36;
    border-color: #9cc7b7;
}

.welcome-trust-body {
    width: 100%;
}

.welcome-trust-title {
    display: block;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--colour-text);
    margin-bottom: var(--space-xs);
}

.welcome-trust-text {
    font-size: 0.88rem;
    color: var(--colour-text-light);
    line-height: 1.6;
    margin: 0;
}


/* ----------------------------------------------------------------
   Important notice box
   ---------------------------------------------------------------- */

.welcome-important {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background-color: #fef9e7;
    border: 1.5px solid #f0c040;
    border-left: 4px solid #c9a200;
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}

/* Plain "i" in a small circle */
.welcome-important-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f0c040;
    color: #5a4a04;
    font-size: 0.85rem;
    font-weight: 700;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.welcome-important p {
    font-size: 0.91rem;
    color: #5a4a04;
    line-height: 1.6;
    margin: 0;
}

.welcome-important strong {
    color: #7d6608;
}


/* ----------------------------------------------------------------
   Responsive — tablet (max-width: 768px)
   Trust grid collapses from 4-col to 2x2.
   ---------------------------------------------------------------- */

@media (max-width: 768px) {

    .welcome-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-heading {
        font-size: 1.55rem;
    }
}


/* ----------------------------------------------------------------
   Responsive — mobile (max-width: 480px)
   Trust grid stays 2x2.
   ---------------------------------------------------------------- */

@media (max-width: 480px) {

    .welcome-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }

    .welcome-heading {
        font-size: 1.3rem;
    }

    .welcome-trust-card {
        padding: var(--space-sm);
    }
}


/* ================================================================
   28. PREMIUM ANSWER OPTION CARDS
   Scoped strictly to .radio-group .radio-label and
   .checkbox-group .checkbox-label only.
   Does NOT affect .welcome-agreement .checkbox-label,
   the welcome page, results page, support page, or any global style.
   ================================================================ */

/* ----------------------------------------------------------------
   Base card — overrides Section 9 defaults for scoped labels only.
   Extra right padding reserves space for the indicator circle.
   ---------------------------------------------------------------- */

.radio-group .radio-label,
.checkbox-group .checkbox-label {
    position: relative;
    padding: 13px 52px 13px 16px;
    background-color: var(--colour-card);
    border: 1.5px solid var(--colour-border);
    border-radius: var(--radius-md);
    transition: background-color 0.15s, border-color 0.15s;
}

/* ----------------------------------------------------------------
   Accessible visual hide for native inputs.
   Standard sr-only pattern — element stays in the DOM,
   remains keyboard-focusable, and is read by screen readers.
   Clicking the label card still toggles the input correctly.
   ---------------------------------------------------------------- */

.radio-group .radio-label input[type="radio"],
.checkbox-group .checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------
   ::before — indicator circle, always visible on the right.
   Empty when unchecked, filled teal when checked.
   ---------------------------------------------------------------- */

.radio-group .radio-label::before,
.checkbox-group .checkbox-label::before {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--colour-card);
    border: 2px solid var(--colour-border);
    transition: background-color 0.15s, border-color 0.15s;
}

/* ----------------------------------------------------------------
   ::after — CSS-only tick mark inside the indicator circle.
   Drawn using a rotated border trick. No Unicode, no SVG, no emoji.
   Hidden (opacity:0) by default, shown when checked.
   ---------------------------------------------------------------- */

.radio-group .radio-label::after,
.checkbox-group .checkbox-label::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    width: 6px;
    height: 11px;
    border-right: 2.5px solid var(--colour-card);
    border-bottom: 2.5px solid var(--colour-card);
    opacity: 0;
    transition: opacity 0.15s;
}

/* ----------------------------------------------------------------
   Hover — soft lavender tint, calm lavender border.
   Replaces the existing blue hover within this scope only.
   ---------------------------------------------------------------- */

.radio-group .radio-label:hover,
.checkbox-group .checkbox-label:hover {
    background-color: #F3FBF7;
    border-color: #9cc7b7;
}

.radio-group .radio-label:hover::before,
.checkbox-group .checkbox-label:hover::before {
    border-color: #0F4A36;
}

/* ----------------------------------------------------------------
   :has(input:checked) — selected card state.
   Lavender tinted background, lavender border.
   ---------------------------------------------------------------- */

.radio-group .radio-label:has(input:checked),
.checkbox-group .checkbox-label:has(input:checked) {
    background-color: #EAF7F2;
    border-color: #0F4A36;
}

/* Selected — indicator circle fills with teal */
.radio-group .radio-label:has(input:checked)::before,
.checkbox-group .checkbox-label:has(input:checked)::before {
    background-color: #1a6b4a;
    border-color: #1a6b4a;
}

/* Selected — tick mark becomes visible */
.radio-group .radio-label:has(input:checked)::after,
.checkbox-group .checkbox-label:has(input:checked)::after {
    opacity: 1;
}

/* ----------------------------------------------------------------
   :focus-within — keyboard focus ring on the whole card.
   Fires when the hidden input inside receives keyboard focus.
   Preserves full keyboard accessibility.
   ---------------------------------------------------------------- */

.radio-group .radio-label:focus-within,
.checkbox-group .checkbox-label:focus-within {
    outline: 3px solid var(--colour-primary);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Mobile (≤ 480px) — tighter right-side positioning
   ---------------------------------------------------------------- */

@media (max-width: 480px) {

    .radio-group .radio-label,
    .checkbox-group .checkbox-label {
        padding: 12px 48px 12px 14px;
    }

    .radio-group .radio-label::before,
    .checkbox-group .checkbox-label::before {
        right: 12px;
    }

    .radio-group .radio-label::after,
    .checkbox-group .checkbox-label::after {
        right: 20px;
    }
}


/* ----------------------------------------------------------------
   29. REDUCED MOTION SAFETY
   Overrides all animations and transitions for users who have
   "reduce motion" enabled in their OS or browser accessibility
   settings. Ensures the tool is safe for every user.
   ---------------------------------------------------------------- */

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


/* ================================================================
   30. EVIDENCE SNAPSHOT CARD (Results page)
   Used by buildEvidenceSnapshot() and buildUrgentSupportNote()
   in script.js. Scoped to the Results page only.
   Does not affect Steps 1–5, Safe Exit, or any global styles.
   Reuses existing colour variables throughout — no new colours.
   ================================================================ */

/* Card wrapper — matches the visual weight of .summary-preview */
.evidence-snapshot {
    background-color: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

/* Status heading — single-line summary of the evidence position */
.evidence-snapshot-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--colour-primary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--colour-border);
}

/* Body paragraph beneath the heading */
.evidence-snapshot-text {
    font-size: 0.93rem;
    color: var(--colour-text);
    line-height: 1.75;
    margin-top: var(--space-sm);
    margin-bottom: 0;
}

/* Small uppercase label above the short evidence list */
.evidence-snapshot-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--colour-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

/* Short evidence item list — up to 3 selected items */
.evidence-snapshot-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.evidence-snapshot-list li {
    position: relative;
    padding-left: var(--space-lg);
    font-size: 0.91rem;
    color: var(--colour-text);
    line-height: 1.7;
    margin-bottom: var(--space-xs);
}

.evidence-snapshot-list li:last-child {
    margin-bottom: 0;
}

/* CSS-only bullet dot — no Unicode, no image, no SVG */
.evidence-snapshot-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--colour-primary);
}

/* Overflow line shown when more than 3 items are selected */
.evidence-snapshot-more {
    font-size: 0.88rem;
    color: var(--colour-text-light);
    font-style: italic;
    margin-top: var(--space-xs);
    padding-left: var(--space-lg);
}

/* ----------------------------------------------------------------
   Helpline note — calm, non-alarming callout used by
   buildUrgentSupportNote() when urgent triggers are present.
   Distinct from .summary-warning (amber/orange) to avoid
   causing distress. Uses the soft primary-light blue palette.
   ---------------------------------------------------------------- */

.helpline-note {
    background-color: var(--colour-primary-light);
    border: 1px solid var(--colour-border);
    border-left: 4px solid var(--colour-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
    font-size: 0.91rem;
    color: var(--colour-text);
    line-height: 1.7;
}


/* ================================================================
   31. ROUND 2 STEP 6 VISUAL REDESIGN - OPTION B WARM PROFESSIONAL
   Applies only to section id="step-6" and its results-page children.
   HTML for new hero/body/numbered-step classes is added separately.
   ================================================================ */

#step-6 {
    width: min(1060px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: #f5f3ee;
    border: 1px solid #e5dfd4;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
}

.results-hero {
    background-color: #085041;
    color: #ffffff;
    text-align: center;
    padding: 32px 24px 26px;
}

.results-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
}

.results-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #9FE1CB;
    flex-shrink: 0;
}

.results-hero-title {
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}

.results-hero-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    line-height: 1.5;
    margin-top: 8px;
}

.results-body {
    background-color: #f5f3ee;
    border-radius: 20px 20px 0 0;
    margin-top: -1px;
    padding: 28px;
}

#results-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 24px;
}

#results-main {
    min-width: 0;
}

.results-heading {
    display: none;
}

#step-6 .action-buttons,
#step-6 .results-full-disclaimer,
#step-6 #summary-output {
    display: none;
}

#results-panel {
    position: sticky;
    top: 160px;
    min-width: 280px;
}

.results-panel-inner {
    border-radius: 0;
    padding: 22px 22px 20px;
    text-align: left;
    box-shadow: none;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-left: 4px solid currentColor;
}

.results-panel-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background-color: currentColor;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 14px;
}

.results-panel-heading {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 8px;
}

.results-panel-text {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 20px;
}

#step-6 .trust-pills {
    display: block;
    color: rgba(44, 62, 80, 0.62);
    font-size: 13px;
    line-height: 1.5;
}

.trust-pill {
    display: inline;
    width: auto;
    background-color: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
}

.trust-pill + .trust-pill::before {
    content: ' · ';
}

#results-panel.panel-status--urgent .results-panel-inner {
    background-color: #FFF8EE;
    border-left: 5px solid #D4850A;
    border-top: 1px solid #F0D4A6;
    border-right: 1px solid #F0D4A6;
    border-bottom: 1px solid #F0D4A6;
}

#results-panel.panel-status--urgent .results-panel-heading {
    color: #1a1a1a;
}

#results-panel.panel-status--important .results-panel-inner {
    background-color: #fef6e4;
    border-left: 5px solid #c9870a;
    border-top: 1px solid #ecd39f;
    border-right: 1px solid #ecd39f;
    border-bottom: 1px solid #ecd39f;
}

#results-panel.panel-status--important .results-panel-heading {
    color: #1a1a1a;
}

#results-panel.panel-status--prepared .results-panel-inner {
    background-color: #eaf7f2;
    border-left: 5px solid #085041;
    border-top: 1px solid #b9ddd1;
    border-right: 1px solid #b9ddd1;
    border-bottom: 1px solid #b9ddd1;
}

#results-panel.panel-status--prepared .results-panel-heading {
    color: #1a1a1a;
}

.next-steps-box {
    background-color: #ffffff;
    border: 1px solid #dedbd4;
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: none;
}

.next-steps-box h3 {
    color: #085041;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 18px;
}

/* Download banner above steps */
.download-summary-banner {
    background: #1B4332;
    padding: 14px 20px;
    text-align: center;
    border-radius: 2px 2px 0 0;
}

.download-summary-btn {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 2px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.download-summary-btn:hover {
    background: rgba(255,255,255,0.1);
}

.download-summary-note {
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin: 8px 0 16px 0;
    line-height: 1.5;
}

.next-step-list {
    display: flex;
    flex-direction: column;
}

.next-step-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #ebe6dc;
}

.next-step-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.next-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E1F5EE;
    color: #085041;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.next-step-item:nth-child(1) .next-step-number {
    background-color: #085041;
    color: #ffffff;
}

.next-step-item:nth-child(2) .next-step-number {
    background-color: #9FE1CB;
    color: #085041;
}

.next-step-content {
    min-width: 0;
}

#step-6 .next-step-priority {
    display: inline-block;
    color: #555;
    background-color: #f0f0f0;
    border-radius: 2px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.next-step-title {
    color: #202a25;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 4px;
}

.next-step-description {
    color: #59635e;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

#step-6 .next-step-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 230px);
    background-color: #085041;
    color: #ffffff;
    border: 2px solid #085041;
    border-radius: 3px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    margin-top: 12px;
}

#step-6 .next-step-download:hover,
#step-6 .next-step-download:focus {
    background-color: #063d32;
    border-color: #063d32;
    outline: none;
}

#step-6 .next-step-item:nth-child(4) .next-step-download {
    background-color: #eaf7f2 !important;
    color: #085041 !important;
    border-color: #085041 !important;
}

#step-6 .next-step-item:nth-child(4) .next-step-download:hover,
#step-6 .next-step-item:nth-child(4) .next-step-download:focus {
    background-color: #d8f0e8 !important;
    color: #085041 !important;
    border-color: #085041 !important;
}

.summary-warning {
    background-color: #fef3de;
    border-left: 3px solid #e8a020;
    color: #7d4e00;
}

.guidance-card-title {
    display: inline-block;
    background-color: #E1F5EE;
    color: #0F6E56;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.76rem;
    line-height: 1.25;
}

.step-6-footer {
    color: rgba(44, 62, 80, 0.52);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    margin-top: 20px;
}

.step-6-footer p {
    margin: 0;
}

.step-6-footer-links {
    display: flex;
    justify-content: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.step-6-footer-links a {
    color: #085041;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.step-6-footer-links a:hover,
.step-6-footer-links a:focus {
    text-decoration: underline;
    outline: none;
}

.step-6-footer-smallprint {
    color: rgba(44, 62, 80, 0.46);
    font-size: 0.72rem;
}

@media (max-width: 900px) {

    #step-6 {
        width: auto;
        margin-left: 0;
        transform: none;
    }

    .results-body {
        padding: 24px 18px;
    }

    #results-layout {
        grid-template-columns: 1fr;
    }

    #results-panel {
        position: static;
        order: -1;
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {

    #step-6 {
        border-radius: 16px;
    }

    .results-hero {
        padding: 28px 18px 24px;
    }

    .results-hero-title {
        font-size: 1.35rem;
    }

    .next-steps-box {
        padding: 18px 15px;
    }

    .next-step-item {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }
}


/* ================================================================
   32. STEP 6 TARGET OUTPUT PAGE
   Flat institutional results page matching the reference screenshot.
   ================================================================ */

body:has(#step-6.active) #disclaimer-bar {
    background-color: #ffffff;
    border-bottom: 2px solid #e0b23e;
    padding: 12px 24px;
}

body:has(#step-6.active) #disclaimer-bar p {
    max-width: 820px;
    margin: 0 auto;
    color: #23312c;
    font-size: 14px;
    line-height: 1.55;
}

#app:has(#step-6.active) {
    max-width: 960px;
    padding-left: 0;
    padding-right: 0;
}

#step-6 {
    width: 100%;
    margin-left: 0;
    transform: none;
    background-color: #f5f3ee;
    border: 1px solid #d8d4ca;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

.results-hero {
    background: #085041;
    padding: 32px 24px 48px;
    text-align: center;
}

.results-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 14px;
}

.results-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5de8b0;
    display: inline-block;
}

.results-hero-title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.2;
}

.results-hero-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
}

.results-body {
    background-color: #f5f3ee;
    border-radius: 0;
    margin-top: 0;
    padding: 26px 32px 28px;
}

@media (max-width: 600px) {
    .results-hero {
        padding: 24px 16px 36px;
    }

    .results-hero-title {
        font-size: 22px;
    }
}

#results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 26px;
    align-items: start;
}

#results-main {
    grid-column: 1;
    min-width: 0;
}

.results-important-box {
    grid-column: 1 / -1;
    background-color: #fffaf0;
    border: 0;
    border-left: 4px solid #d97706;
    border-radius: 0;
    padding: 14px 16px;
    margin: 0 0 -2px;
    box-shadow: none;
}

.results-important-title {
    display: block;
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.results-important-box p {
    color: #9a3412;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.results-important-box {
    display: none;
}

.next-steps-box {
    grid-column: 1;
    background-color: #ffffff;
    border: 1px solid #d8d4ca;
    border-radius: 0;
    padding: 22px 22px 0;
    margin: 0;
    box-shadow: none;
    min-width: 0;
}

.next-steps-box h3 {
    color: #003f32;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px;
}

.next-steps-intro {
    color: #34423d;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.next-step-list {
    margin: 0 -22px;
}

.next-step-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0;
    padding: 22px;
    margin: 0;
    border-top: 1px solid #e6e0d6;
    border-bottom: 0;
}

.next-step-content {
    min-width: 0;
}

.next-step-number {
    width: 28px;
    height: 28px;
    border-radius: 2px;
    background-color: #edf7f3;
    color: #003f32;
    font-size: 14px;
    font-weight: 800;
}

.next-step-item:nth-child(1) .next-step-number {
    background-color: #1B4332;
    color: #ffffff;
}

.next-step-item:nth-child(2) .next-step-number,
.next-step-item:nth-child(3) .next-step-number,
.next-step-item:nth-child(4) .next-step-number {
    background-color: #edf7f3;
    color: #003f32;
}

#step-6 .next-step-priority {
    display: inline-block;
    background-color: #f1f2f1;
    color: #52605b;
    border-radius: 2px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.next-step-title {
    color: #050f0c;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 6px;
}

.next-step-description,
.next-step-note {
    color: #1f332d;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 8px;
}

.next-step-note {
    color: #0f5f47;
    font-style: italic;
}

.download-summary-banner {
    background: transparent;
    padding: 10px 0 0;
    text-align: left;
    border-radius: 0;
}

.download-summary-btn {
    width: 100%;
    max-width: 100%;
    background: #1B4332;
    color: #ffffff;
    border: 2px solid #1B4332;
    border-radius: 2px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 800;
}

.download-summary-btn:hover,
.download-summary-btn:focus {
    background: #123d2d;
    border-color: #123d2d;
    outline: 2px solid #1B4332;
    outline-offset: 2px;
}

.download-summary-note {
    color: #275746;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    margin: 8px 0 0;
}

.evidence-checklist-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #085041;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    line-height: 1.5;
}

.evidence-checklist-label input {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #085041;
    width: 16px;
    height: 16px;
}

.civil-legal-advice-box {
    background-color: #eef7f3;
    border: 1px solid #a8d9c7;
    border-left: 3px solid #1B4332;
    border-radius: 0;
    padding: 14px 16px;
    margin-top: 12px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.civil-legal-advice-box h5 {
    color: #1B4332;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.civil-legal-advice-box p {
    color: #1f332d;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 8px;
}

.civil-legal-advice-box p:last-child {
    border-top: 1px solid #d3e7df;
    margin-bottom: 0;
    padding-top: 10px;
}

.civil-legal-advice-phone {
    color: #0a3c2e !important;
    font-size: 21px !important;
    font-weight: 800;
    letter-spacing: 0.03em;
}

#step-6 .official-links-box {
    background: #eaf7f2;
    border: 1px solid #b9ddd1;
    border-left: 4px solid #085041;
    border-radius: 3px;
    padding: 14px 16px;
    margin-top: 12px;
}

#step-6 .official-links-section {
    margin-bottom: 12px;
}

#step-6 .official-links-heading {
    font-size: 11px;
    font-weight: 700;
    color: #085041;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#step-6 .official-link-btn {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid #085041;
    border-radius: 3px;
    padding: 11px 14px;
    margin-bottom: 8px;
    text-decoration: none;
    color: #085041;
    cursor: pointer;
}

#step-6 .official-link-btn:last-of-type {
    margin-bottom: 0;
}

#step-6 .official-link-btn:hover {
    background: #085041;
    color: #ffffff;
}

#step-6 .official-link-btn:hover .official-link-sub {
    color: rgba(255,255,255,0.7);
}

#step-6 .official-link-name {
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    margin-bottom: 2px;
    text-decoration: none;
}

#step-6 .official-link-sub {
    font-size: 12px;
    color: #5a7268;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.4;
}

#step-6 .official-links-divider {
    height: 1px;
    background: #b9ddd1;
    margin: 12px 0;
}

#step-6 .official-links-note {
    font-size: 11px;
    color: #7a9088;
    margin-top: 10px;
    font-style: italic;
    line-height: 1.5;
}

#step-6 .next-step-download {
    width: 100%;
    max-width: none;
    background-color: #eef7f3 !important;
    color: #003f32 !important;
    border: 2px solid #1B4332 !important;
    border-radius: 2px;
    padding: 13px 18px;
    box-sizing: border-box;
}

#results-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 142px;
    min-width: 0;
}

.results-panel-inner,
.results-support-card,
.results-emergency-block {
    border-radius: 0;
    box-shadow: none;
}

.results-panel-inner {
    background-color: #fff8ee;
    border: 1px solid #f0d4a6;
    border-left: 4px solid #d97706;
    padding: 20px 20px 18px;
    margin-bottom: 20px;
    text-align: left;
}

#results-panel.panel-status--urgent .results-panel-inner,
#results-panel.panel-status--important .results-panel-inner,
#results-panel.panel-status--prepared .results-panel-inner {
    background-color: #fff8ee;
    border: 1px solid #f0d4a6;
    border-left: 4px solid #d97706;
}

.results-panel-heading,
#results-panel.panel-status--urgent .results-panel-heading,
#results-panel.panel-status--important .results-panel-heading,
#results-panel.panel-status--prepared .results-panel-heading {
    color: #9a3412;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 10px;
}

.results-panel-text {
    color: #1f332d;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

#results-panel.panel-status--urgent .results-panel-inner {
    background-color: #fdeaea;
    border: 1.5px solid #f0b0b0;
    border-radius: 12px;
    text-align: center;
    padding: 22px 18px;
}

.results-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background-color: transparent;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 auto 16px;
}

#results-panel.panel-status--urgent .results-panel-icon,
#results-panel.panel-status--urgent .results-panel-heading {
    color: #A32D2D;
}

#step-6 .trust-pills {
    border-top: 1px solid #efd9b8;
    color: #6f655b;
    display: block;
    font-size: 12px;
    line-height: 1.5;
    padding-top: 12px;
}

.trust-pill {
    font-weight: 500;
}

.results-support-card {
    background-color: #ffffff;
    border: 1px solid #d8d4ca;
    margin-bottom: 16px;
}

.results-support-card h3 {
    color: #1B4332;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    padding: 16px 20px;
}

.results-support-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    border-top: 1px solid #e6e0d6;
    padding: 14px 18px;
}

.results-support-icon {
    position: relative;
    width: 28px;
    height: 28px;
    background-color: #eef7f3;
    border-radius: 2px;
}

.results-support-icon::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid #1B4332;
    border-radius: 2px;
}

.results-support-icon-shield {
    background-color: #fff7e8;
}

.results-support-icon-shield::before {
    border-color: #d97706;
    border-radius: 50% 50% 45% 45%;
}

.results-support-row h4 {
    color: #111815;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 3px;
}

.results-support-row p {
    color: #4f5b56;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.results-support-compact {
    background: #ffffff;
    border: 1px solid #d4dbd8;
    border-radius: 4px;
    padding: 16px;
    margin-top: 12px;
}

.results-support-note {
    font-size: 13px;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 12px;
}

.results-support-btn {
    display: block;
    width: 100%;
    background: #085041;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}

.results-support-btn:hover {
    background: #0f6e56;
}

.results-emergency-block {
    background-color: #ffffff;
    border: 1px solid #d8d4ca;
    border-left: 4px solid #c81e1e;
    padding: 18px 20px;
}

.results-emergency-label {
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.2;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.results-emergency-number {
    color: #0f1211;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
}

.results-emergency-block p {
    color: #4f5b56;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.step-6-footer {
    color: #8d9692;
    font-size: 12px;
    margin-top: 18px;
}

@media (max-width: 900px) {
    #app:has(#step-6.active) {
        padding-left: 14px;
        padding-right: 14px;
    }

    #results-layout {
        grid-template-columns: 1fr;
    }

    .results-important-box,
    .next-steps-box,
    #results-panel {
        grid-column: 1;
    }

    #results-panel {
        grid-row: auto;
        position: static;
    }
}


/* Clarespath support page refresh: mobile-first, calm public-service layout */
#support-page {
    background-color: #F8F6F1;
    border: 1px solid #e0dcd2;
    border-radius: 0;
    overflow: hidden;
}

#support-page .support-page-shell {
    background-color: #F8F6F1;
}

body:has(#support-page.active) #disclaimer-bar {
    display: none;
}

#app:has(#support-page.active) {
    max-width: 960px;
    padding-left: 0;
    padding-right: 0;
}

#support-page .support-disclaimer-strip {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    background-color: #fffaf0;
    border-bottom: 1px solid #e0b23e;
    color: #24362f;
    padding: 12px 20px;
}

#support-page .support-disclaimer-strip p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

#support-page .support-disclaimer-icon {
    width: 20px;
    height: 20px;
    border: 1.8px solid #d98b00;
    border-radius: 50% 50% 45% 45%;
    margin-top: 1px;
}

#support-page .support-hero {
    background: #1B4332;
    color: #ffffff;
    padding: 24px 20px 22px;
}

#support-page .support-hero-content,
#support-page .support-body {
    max-width: 820px;
    margin: 0 auto;
}

#support-page .support-hero h2 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
}

#support-page .support-hero p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0;
}

#support-page .support-hero-reassurance {
    margin-top: 7px !important;
}

#support-page .support-safety-notice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    margin-top: 16px;
    padding: 12px;
}

#support-page .support-safety-icon {
    width: 24px;
    height: 24px;
    border: 1.8px solid #d7efe5;
    border-radius: 50% 50% 45% 45%;
}

#support-page .support-safety-notice p {
    font-size: 14px;
    line-height: 1.45;
}

#support-page .support-safety-notice a {
    color: #ffffff;
    font-weight: 800;
    text-underline-offset: 3px;
}

#support-page .support-body {
    padding: 20px;
}

#support-page .support-section {
    margin-bottom: 18px;
}

#support-page .support-section-heading {
    color: #355047;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    margin: 0 0 10px;
    text-transform: uppercase;
}

#support-page .support-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    background-color: #ffffff;
    border: 1px solid #ded8cd;
    border-radius: 5px;
    padding: 16px;
    box-shadow: none;
}

#support-page .support-option + .support-option {
    margin-top: 10px;
}

#support-page .support-option-primary {
    border-color: #cfded6;
    border-left: 4px solid #1B4332;
    padding: 18px 16px;
}

#support-page .support-option-safety .support-option-icon {
    background-color: #fff7e8;
    color: #c46b00;
}

#support-page .support-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background-color: #eef7f3;
    color: #1B4332;
}

#support-page .support-option-icon svg {
    width: 20px;
    height: 20px;
}

#support-page .support-option-label {
    display: inline-block;
    background-color: #dfeee7;
    color: #1B4332;
    border-radius: 2px;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 7px;
    text-transform: uppercase;
}

#support-page .support-option h4 {
    color: #101714;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 5px;
}

#support-page .support-option p {
    color: #34423d;
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}

#support-page .support-warning-note {
    background-color: #fff9eb;
    border: 1px solid #edc56b;
    border-radius: 3px;
    color: #7a4a00 !important;
    font-size: 13.5px !important;
    margin-top: 12px !important;
    padding: 9px 10px;
}

#support-page .support-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1B4332;
    color: #ffffff;
    border: 2px solid #1B4332;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 12px;
    min-height: 42px;
    padding: 10px 14px;
    text-decoration: none;
}

#support-page .support-action-link:hover,
#support-page .support-action-link:focus {
    background-color: #123d2d;
    border-color: #123d2d;
    outline: 2px solid #1B4332;
    outline-offset: 2px;
}

#support-page .support-card-link {
    color: #1B4332;
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    margin-top: 8px;
    text-underline-offset: 3px;
}

#support-page .support-card-link:hover,
#support-page .support-card-link:focus,
#support-page .support-safety-notice a:hover,
#support-page .support-safety-notice a:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

#support-page .support-small-text,
#support-page .support-note {
    color: #4f5b56 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin-top: 9px !important;
}

#support-page .support-note {
    font-style: italic !important;
}

#support-page .support-phone {
    color: #1B4332 !important;
    font-size: 17px !important;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#support-page .emergency-block {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    background: #ffffff;
    border: 1.5px solid #ef8d8d;
    border-left: 4px solid #c81e1e;
    border-radius: 5px;
    padding: 16px;
    margin: 18px 0 14px;
}

#support-page .emergency-icon {
    width: 34px;
    height: 34px;
    border: 1.8px solid #c81e1e;
    border-radius: 4px;
    position: relative;
}

#support-page .emergency-icon::before {
    content: "!";
    position: absolute;
    inset: 0;
    color: #c81e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

#support-page .emergency-label {
    color: #b91c1c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    margin: 0 0 6px;
    text-transform: uppercase;
}

#support-page .emergency-number {
    color: #111815;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
}

#support-page .emergency-detail {
    color: #34423d;
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
}

#support-page .support-back-row {
    margin: 0 0 10px;
}

#support-page .btn-back {
    width: 100%;
    min-height: 46px;
    background-color: #1B4332;
    color: #ffffff;
    border: 2px solid #1B4332;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 800;
}

#support-page .btn-back:hover,
#support-page .btn-back:focus {
    background-color: #123d2d;
    border-color: #123d2d;
    outline: 2px solid #1B4332;
    outline-offset: 2px;
}

#support-page .support-footer {
    color: #4f5b56;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

#support-page .support-footer p {
    margin: 0;
}

@media (min-width: 760px) {
    #support-page .support-hero {
        padding: 34px 36px 32px;
    }

    #support-page .support-body {
        padding: 28px 36px 30px;
    }

    #support-page .support-section {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }

    #support-page .support-section-heading {
        grid-column: 1 / -1;
    }

    #support-page .support-option {
        margin-top: 0 !important;
    }

    #support-page .support-option-primary,
    #support-page .support-option-safety {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    #app:has(#support-page.active) {
        padding-left: 10px;
        padding-right: 10px;
    }

    #support-page .support-disclaimer-strip {
        grid-template-columns: 20px minmax(0, 1fr);
        padding: 10px 14px;
    }

    #support-page .support-disclaimer-strip p {
        font-size: 13.5px;
    }

    #support-page .support-hero {
        padding: 20px 16px 18px;
    }

    #support-page .support-hero h2 {
        font-size: 23px;
    }

    #support-page .support-hero p {
        font-size: 15px;
    }

    #support-page .support-body {
        padding: 16px 14px 18px;
    }

    #support-page .support-option,
    #support-page .emergency-block {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    #support-page .support-option-icon,
    #support-page .emergency-icon {
        width: 30px;
        height: 30px;
    }

    #support-page .support-option h4 {
        font-size: 15.5px;
    }

    #support-page .support-action-link {
        width: 100%;
    }
}

/* ================================================================
   33. WELCOME PAGE REDESIGN - CLARESPATH
   Scoped to #welcome-page except the fixed top bar, which sits
   outside the app wrapper and keeps the existing safeExit() action.
   ================================================================ */

#safe-exit-bar {
    background-color: #1B4332;
    padding: 12px 18px;
    justify-content: space-between;
}

.safe-brand,
#safe-exit-btn {
    display: flex;
    align-items: center;
    gap: 7px;
}

.safe-brand-dot,
.safe-exit-dot {
    display: none;
}

.safe-brand-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

#safe-exit-btn {
    background: #ffffff;
    color: #1B4332;
    border: 0;
    border-radius: 2px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

.safe-exit-text {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

#safe-exit-btn:hover,
#safe-exit-btn:focus {
    background: #f5f5f5;
    color: #1B4332;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

#welcome-page {
    background-color: #f5f3ee;
    border: 1px solid #e5dfd4;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(8, 80, 65, 0.12);
}

#welcome-page .welcome-hero {
    background-color: #085041;
    padding: 32px 24px 44px;
    text-align: center;
    color: #ffffff;
}

#welcome-page .welcome-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 4px 12px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 16px;
}

#welcome-page .welcome-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #5de8b0;
    flex-shrink: 0;
}

#welcome-page .welcome-hero-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 8px;
}

#welcome-page .welcome-hero-subtitle {
    max-width: 520px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    line-height: 1.6;
}

#welcome-page .welcome-body {
    background-color: #f5f3ee;
    border-radius: 20px 20px 0 0;
    margin-top: -16px;
    padding: 20px 18px 22px;
}

#welcome-page .welcome-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

#welcome-page .welcome-trust-card {
    display: block;
    background-color: #ffffff;
    border: 1px solid rgba(8, 80, 65, 0.10);
    border-radius: 10px;
    box-shadow: none;
    padding: 20px 16px;
    text-align: center;
}

#welcome-page .welcome-trust-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E1F5EE;
    color: #085041;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin: 0 auto 10px;
}

#welcome-page .welcome-trust-title {
    display: block;
    color: #1c2b24;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 3px;
}

#welcome-page .welcome-trust-text {
    color: #7a9088;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

#welcome-page .welcome-what-card {
    background-color: #ffffff;
    border: 1px solid rgba(8, 80, 65, 0.10);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}

#welcome-page .welcome-what-title {
    color: #085041;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 10px;
}

#welcome-page .welcome-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

#welcome-page .welcome-check-item:last-child {
    margin-bottom: 0;
}

#welcome-page .welcome-check-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #E1F5EE;
    color: #085041;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

#welcome-page .welcome-check-text {
    color: #3d5248;
    font-size: 12px;
    line-height: 1.55;
}

#welcome-page .welcome-agreement {
    margin: 0 0 16px;
}

#welcome-page .welcome-agreement .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: #ffffff;
    border: 2px solid #085041;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
}

#welcome-page .welcome-agreement .checkbox-label:hover {
    background-color: #ffffff;
    border-color: #085041;
}

#welcome-page .welcome-agreement input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: #085041;
}

#welcome-page .welcome-agreement-label,
#welcome-page .welcome-agreement-text {
    display: block;
}

#welcome-page .welcome-agreement-label {
    color: #7a9088;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-bottom: 4px;
}

#welcome-page .welcome-agreement-text {
    color: #085041;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

#welcome-page #error-welcome {
    margin-bottom: 12px;
}

#welcome-page .button-row {
    display: block;
    margin-top: 0;
}

#welcome-page .btn-next {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #085041;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 16px 48px 16px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    margin-left: 0;
}

#welcome-page .btn-next:hover,
#welcome-page .btn-next:focus {
    background-color: #063d32;
    color: #ffffff;
    outline: none;
}

#welcome-page .btn-back {
    border: 0;
    border-radius: 8px;
}

#welcome-page .welcome-start-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
}

#welcome-page .welcome-footer-note {
    color: #8f9692;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
    margin: 12px 0 0;
}

@media (max-width: 480px) {

    #welcome-page {
        border-radius: 16px;
    }

    #welcome-page .welcome-hero {
        padding: 28px 18px 40px;
    }

    #welcome-page .welcome-hero-title {
        font-size: 22px;
    }
}


/* Clarespath welcome page refresh: premium first screen only */
body:has(#welcome-page.active) {
    background-color: #F8F6F1;
}

body:has(#welcome-page.active) #disclaimer-bar {
    background-color: #fffaf0;
    border-bottom: 1px solid #d9a31a;
    padding: 13px 24px;
}

body:has(#welcome-page.active) #disclaimer-bar p {
    color: #24362f;
    font-size: 14px;
    line-height: 1.55;
    max-width: 920px;
    margin: 0 auto;
}

#app:has(#welcome-page.active) {
    max-width: 1100px;
    padding: 132px 24px 34px;
}

#welcome-page {
    background-color: #ffffff;
    border: 1px solid #e2ded5;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(27, 67, 50, 0.10);
    overflow: hidden;
}

#welcome-page .welcome-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 20%, rgba(42, 121, 88, 0.38), transparent 28%),
        linear-gradient(135deg, #0F4A36 0%, #063D2E 100%);
    color: #ffffff;
    padding: 54px 56px 58px;
    text-align: left;
}

#welcome-page .welcome-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 22px;
    padding: 7px 13px;
}

#welcome-page .welcome-hero-dot {
    display: none;
}

#welcome-page .welcome-badge-icon,
#welcome-page .welcome-badge-icon svg {
    width: 14px;
    height: 14px;
}

#welcome-page svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

#welcome-page .welcome-hero-title {
    color: #ffffff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.16;
    max-width: 760px;
    margin: 0 0 16px;
}

#welcome-page .welcome-hero-subtitle {
    color: rgba(255, 255, 255, 0.94);
    font-size: 18px;
    line-height: 1.55;
    max-width: 680px;
    margin: 0;
}

#welcome-page .welcome-hero-plant {
    position: absolute;
    right: 90px;
    bottom: -24px;
    width: 150px;
    height: 210px;
    opacity: 0.13;
    pointer-events: none;
}

#welcome-page .welcome-hero-plant::before,
#welcome-page .welcome-hero-plant::after {
    content: "";
    position: absolute;
    background-color: #9FE1CB;
}

#welcome-page .welcome-hero-plant::before {
    left: 70px;
    bottom: 0;
    width: 5px;
    height: 180px;
    border-radius: 999px;
    transform: rotate(23deg);
}

#welcome-page .welcome-hero-plant::after {
    left: 18px;
    top: 18px;
    width: 118px;
    height: 156px;
    border-radius: 80% 0 80% 0;
    background:
        radial-gradient(ellipse at 72% 18%, #9FE1CB 0 16%, transparent 17%),
        radial-gradient(ellipse at 30% 38%, #9FE1CB 0 15%, transparent 16%),
        radial-gradient(ellipse at 72% 56%, #9FE1CB 0 14%, transparent 15%),
        radial-gradient(ellipse at 32% 76%, #9FE1CB 0 14%, transparent 15%);
}

#welcome-page .welcome-body {
    background-color: #ffffff;
    border-radius: 0;
    margin-top: 0;
    padding: 28px 32px 24px;
}

#welcome-page .welcome-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

#welcome-page .welcome-trust-card {
    background-color: #ffffff;
    border: 1px solid #e1ded6;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(27, 67, 50, 0.04);
    min-height: 150px;
    padding: 24px 18px 20px;
    text-align: center;
}

#welcome-page .welcome-trust-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #dff1ea;
    color: #0F4A36;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

#welcome-page .welcome-trust-icon-box svg {
    width: 24px;
    height: 24px;
}

#welcome-page .welcome-trust-title {
    display: block;
    color: #0F4A36;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 8px;
}

#welcome-page .welcome-trust-text {
    color: #23362f;
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
}

#welcome-page .welcome-what-card {
    background-color: #ffffff;
    border: 1px solid #e1ded6;
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 20px 24px;
}

#welcome-page .welcome-what-title {
    color: #0F4A36;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 14px;
}

#welcome-page .welcome-check-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}

#welcome-page .welcome-check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #cfe9de;
    color: #0F4A36;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

#welcome-page .welcome-check-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.8;
}

#welcome-page .welcome-check-text {
    color: #1d2f28;
    font-size: 15.5px;
    line-height: 1.55;
}

#welcome-page .welcome-agreement {
    background-color: #fffaf0;
    border: 1.5px solid #e0a11a;
    border-radius: 8px;
    margin: 0 0 14px;
    padding: 16px 20px;
}

#welcome-page .welcome-agreement .checkbox-label {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #1d2f28;
    cursor: pointer;
    padding: 0;
}

#welcome-page .welcome-agreement .checkbox-label:hover {
    background-color: transparent;
    border-color: transparent;
}

#welcome-page .welcome-agreement input[type="checkbox"] {
    width: 28px;
    height: 28px;
    accent-color: #0F4A36;
    margin: 2px 0 0;
}

#welcome-page .welcome-agreement input[type="checkbox"]:focus-visible,
#welcome-page .btn-next:focus-visible {
    outline: 3px solid #d9a31a;
    outline-offset: 3px;
}

#welcome-page .welcome-agreement-label {
    display: block;
    color: #1d2f28;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin-bottom: 8px;
    text-transform: uppercase;
}

#welcome-page .welcome-agreement-text {
    display: block;
    color: #111c18;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.55;
}

#welcome-page #error-welcome {
    color: #8a4f00;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 12px;
}

#welcome-page .button-row {
    display: block;
    margin: 0;
}

#welcome-page .btn-next {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    background: linear-gradient(135deg, #0F4A36 0%, #063D2E 100%);
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 74, 54, 0.16);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    padding: 16px 56px 16px 18px;
}

#welcome-page .btn-next:hover,
#welcome-page .btn-next:focus {
    background: linear-gradient(135deg, #0b3e2d 0%, #043225 100%);
    color: #ffffff;
}

#welcome-page .welcome-start-arrow {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 23px;
    line-height: 1;
}

#welcome-page .welcome-footer-note {
    color: #5c6964;
    font-size: 13px;
    line-height: 1.55;
    margin: 16px auto 0;
    max-width: 920px;
    text-align: center;
}

#welcome-page .welcome-footer-note span {
    display: block;
    margin-top: 10px;
}

@media (max-width: 820px) {
    #app:has(#welcome-page.active) {
        padding: 128px 14px 24px;
    }

    #welcome-page .welcome-hero {
        padding: 40px 26px 42px;
        text-align: center;
    }

    #welcome-page .welcome-hero-title {
        font-size: 28px;
        margin-left: auto;
        margin-right: auto;
    }

    #welcome-page .welcome-hero-subtitle {
        font-size: 16px;
        margin-left: auto;
        margin-right: auto;
    }

    #welcome-page .welcome-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    body:has(#welcome-page.active) #disclaimer-bar {
        padding: 11px 16px;
        text-align: left;
    }

    body:has(#welcome-page.active) #disclaimer-bar p {
        font-size: 13.5px;
    }

    #app:has(#welcome-page.active) {
        padding: 132px 10px 18px;
    }

    #welcome-page {
        border-radius: 7px;
    }

    #welcome-page .welcome-hero {
        padding: 28px 18px 30px;
    }

    #welcome-page .welcome-hero-badge {
        font-size: 12px;
        margin-bottom: 16px;
    }

    #welcome-page .welcome-hero-title {
        font-size: 24px;
    }

    #welcome-page .welcome-hero-subtitle {
        font-size: 15px;
    }

    #welcome-page .welcome-body {
        padding: 16px 14px 18px;
    }

    #welcome-page .welcome-trust-grid {
        gap: 10px;
    }

    #welcome-page .welcome-trust-card {
        min-height: 136px;
        padding: 16px 10px 14px;
    }

    #welcome-page .welcome-trust-icon-box {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    #welcome-page .welcome-trust-title {
        font-size: 14px;
    }

    #welcome-page .welcome-trust-text {
        font-size: 13.5px;
    }

    #welcome-page .welcome-what-card,
    #welcome-page .welcome-agreement {
        padding: 15px;
    }

    #welcome-page .welcome-check-text,
    #welcome-page .welcome-agreement-text {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #welcome-page *,
    #welcome-page *::before,
    #welcome-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Clarespath numbered form screens refresh: Step 1-5 only */
body:has(#step-1.active),
body:has(#step-2.active),
body:has(#step-3.active),
body:has(#step-4.active),
body:has(#step-5.active) {
    background-color: #F8F6F1;
}

body:has(#step-1.active) #safe-exit-bar,
body:has(#step-2.active) #safe-exit-bar,
body:has(#step-3.active) #safe-exit-bar,
body:has(#step-4.active) #safe-exit-bar,
body:has(#step-5.active) #safe-exit-bar {
    background-color: #1B4332;
    padding: 10px 18px;
}

body:has(#step-1.active) #disclaimer-bar,
body:has(#step-2.active) #disclaimer-bar,
body:has(#step-3.active) #disclaimer-bar,
body:has(#step-4.active) #disclaimer-bar,
body:has(#step-5.active) #disclaimer-bar {
    background-color: #fffaf0;
    border-bottom: 1px solid #d9a31a;
    padding: 12px 24px;
}

body:has(#step-1.active) #disclaimer-bar p,
body:has(#step-2.active) #disclaimer-bar p,
body:has(#step-3.active) #disclaimer-bar p,
body:has(#step-4.active) #disclaimer-bar p,
body:has(#step-5.active) #disclaimer-bar p {
    color: #24362f;
    font-size: 14px;
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto;
}

#app:has(#step-1.active),
#app:has(#step-2.active),
#app:has(#step-3.active),
#app:has(#step-4.active),
#app:has(#step-5.active) {
    max-width: 760px;
    padding: 116px 22px 34px;
}

#app:has(#step-1.active) #progress-container,
#app:has(#step-2.active) #progress-container,
#app:has(#step-3.active) #progress-container,
#app:has(#step-4.active) #progress-container,
#app:has(#step-5.active) #progress-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
    margin: 0 auto 14px;
    max-width: 680px;
    text-align: left;
}

#app:has(#step-1.active) #step-label,
#app:has(#step-2.active) #step-label,
#app:has(#step-3.active) #step-label,
#app:has(#step-4.active) #step-label,
#app:has(#step-5.active) #step-label {
    grid-column: 1 / -1;
    color: #0F4A36;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

#app:has(#step-1.active) #progress-bar-track,
#app:has(#step-2.active) #progress-bar-track,
#app:has(#step-3.active) #progress-bar-track,
#app:has(#step-4.active) #progress-bar-track,
#app:has(#step-5.active) #progress-bar-track {
    grid-column: 1;
    background-color: #d7eee5;
    height: 7px;
    margin: 0;
}

#app:has(#step-1.active) #progress-bar-fill,
#app:has(#step-2.active) #progress-bar-fill,
#app:has(#step-3.active) #progress-bar-fill,
#app:has(#step-4.active) #progress-bar-fill,
#app:has(#step-5.active) #progress-bar-fill {
    background-color: #0F4A36;
}

#app:has(#step-1.active) #progress-container::after,
#app:has(#step-2.active) #progress-container::after,
#app:has(#step-3.active) #progress-container::after,
#app:has(#step-4.active) #progress-container::after,
#app:has(#step-5.active) #progress-container::after {
    content: "";
    grid-column: 2;
    grid-row: 2;
    color: #0F4A36;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

#app:has(#step-1.active) #progress-container::after { content: "17%"; }
#app:has(#step-2.active) #progress-container::after { content: "33%"; }
#app:has(#step-3.active) #progress-container::after { content: "50%"; }
#app:has(#step-4.active) #progress-container::after { content: "67%"; }
#app:has(#step-5.active) #progress-container::after { content: "83%"; }

#step-1,
#step-2,
#step-3,
#step-4,
#step-5 {
    background-color: #ffffff;
    border: 1px solid #e1ded6;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(27, 67, 50, 0.08);
    margin: 0 auto 28px;
    max-width: 680px;
    padding: 28px 32px 30px;
}

#step-1 .step-title,
#step-2 .step-title,
#step-3 .step-title,
#step-4 .step-title,
#step-5 .step-title {
    color: #0F4A36;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 3px solid #0F4A36;
}

#step-1 .step-intro,
#step-2 .step-intro,
#step-3 .step-intro,
#step-4 .step-intro,
#step-5 .step-intro {
    color: #34423d;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

#step-1 .form-group,
#step-2 .form-group,
#step-3 .form-group,
#step-4 .form-group,
#step-5 .form-group {
    margin-bottom: 22px;
}

#step-1 .form-group > label,
#step-2 .form-group > label,
#step-3 .form-group > label,
#step-4 .form-group > label,
#step-5 .form-group > label {
    color: #101a16;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 10px;
}

#step-1 select,
#step-2 select,
#step-3 select,
#step-4 select,
#step-5 select,
#step-1 input[type="number"],
#step-2 input[type="number"],
#step-3 input[type="number"],
#step-4 input[type="number"],
#step-5 input[type="number"] {
    background-color: #ffffff;
    border: 1.5px solid #cfd8d4;
    border-radius: 5px;
    color: #10211a;
    font-size: 16px;
    min-height: 48px;
    padding: 11px 42px 11px 14px;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath fill='%230F4A36' d='M1.2.8 6.5 6l5.3-5.2 1.2 1.2-6.5 6-6.5-6z'/%3E%3C/svg%3E");
}

#step-1 select:focus,
#step-2 select:focus,
#step-3 select:focus,
#step-4 select:focus,
#step-5 select:focus,
#step-1 input[type="number"]:focus,
#step-2 input[type="number"]:focus,
#step-3 input[type="number"]:focus,
#step-4 input[type="number"]:focus,
#step-5 input[type="number"]:focus {
    border-color: #0F4A36;
    box-shadow: 0 0 0 3px rgba(15, 74, 54, 0.14);
    outline: none;
}

#step-1 .radio-group,
#step-2 .radio-group,
#step-3 .radio-group,
#step-4 .radio-group,
#step-5 .radio-group,
#step-1 .checkbox-group,
#step-2 .checkbox-group,
#step-3 .checkbox-group,
#step-4 .checkbox-group,
#step-5 .checkbox-group {
    gap: 9px;
}

#step-1 .radio-group .radio-label,
#step-2 .radio-group .radio-label,
#step-3 .radio-group .radio-label,
#step-4 .radio-group .radio-label,
#step-5 .radio-group .radio-label,
#step-1 .checkbox-group .checkbox-label,
#step-2 .checkbox-group .checkbox-label,
#step-3 .checkbox-group .checkbox-label,
#step-4 .checkbox-group .checkbox-label,
#step-5 .checkbox-group .checkbox-label {
    background-color: #ffffff;
    border: 1.5px solid #d8dedb;
    border-radius: 7px;
    color: #1d2f28;
    font-size: 15.5px;
    line-height: 1.45;
    min-height: 52px;
    padding: 14px 54px 14px 16px;
}

#step-1 .radio-group .radio-label:hover,
#step-2 .radio-group .radio-label:hover,
#step-3 .radio-group .radio-label:hover,
#step-4 .radio-group .radio-label:hover,
#step-5 .radio-group .radio-label:hover,
#step-1 .checkbox-group .checkbox-label:hover,
#step-2 .checkbox-group .checkbox-label:hover,
#step-3 .checkbox-group .checkbox-label:hover,
#step-4 .checkbox-group .checkbox-label:hover,
#step-5 .checkbox-group .checkbox-label:hover {
    background-color: #F3FBF7;
    border-color: #9cc7b7;
}

#step-1 .radio-group .radio-label::before,
#step-2 .radio-group .radio-label::before,
#step-3 .radio-group .radio-label::before,
#step-4 .radio-group .radio-label::before,
#step-5 .radio-group .radio-label::before,
#step-1 .checkbox-group .checkbox-label::before,
#step-2 .checkbox-group .checkbox-label::before,
#step-3 .checkbox-group .checkbox-label::before,
#step-4 .checkbox-group .checkbox-label::before,
#step-5 .checkbox-group .checkbox-label::before {
    background-color: #ffffff;
    border-color: #b7c3be;
    height: 22px;
    right: 14px;
    width: 22px;
}

#step-1 .radio-group .radio-label:hover::before,
#step-2 .radio-group .radio-label:hover::before,
#step-3 .radio-group .radio-label:hover::before,
#step-4 .radio-group .radio-label:hover::before,
#step-5 .radio-group .radio-label:hover::before,
#step-1 .checkbox-group .checkbox-label:hover::before,
#step-2 .checkbox-group .checkbox-label:hover::before,
#step-3 .checkbox-group .checkbox-label:hover::before,
#step-4 .checkbox-group .checkbox-label:hover::before,
#step-5 .checkbox-group .checkbox-label:hover::before {
    border-color: #0F4A36;
}

#step-1 .radio-group .radio-label:has(input:checked),
#step-2 .radio-group .radio-label:has(input:checked),
#step-3 .radio-group .radio-label:has(input:checked),
#step-4 .radio-group .radio-label:has(input:checked),
#step-5 .radio-group .radio-label:has(input:checked),
#step-1 .checkbox-group .checkbox-label:has(input:checked),
#step-2 .checkbox-group .checkbox-label:has(input:checked),
#step-3 .checkbox-group .checkbox-label:has(input:checked),
#step-4 .checkbox-group .checkbox-label:has(input:checked),
#step-5 .checkbox-group .checkbox-label:has(input:checked) {
    background-color: #EAF7F2;
    border-color: #0F4A36;
}

#step-1 .radio-group .radio-label:has(input:checked)::before,
#step-2 .radio-group .radio-label:has(input:checked)::before,
#step-3 .radio-group .radio-label:has(input:checked)::before,
#step-4 .radio-group .radio-label:has(input:checked)::before,
#step-5 .radio-group .radio-label:has(input:checked)::before,
#step-1 .checkbox-group .checkbox-label:has(input:checked)::before,
#step-2 .checkbox-group .checkbox-label:has(input:checked)::before,
#step-3 .checkbox-group .checkbox-label:has(input:checked)::before,
#step-4 .checkbox-group .checkbox-label:has(input:checked)::before,
#step-5 .checkbox-group .checkbox-label:has(input:checked)::before {
    background-color: #0F4A36;
    border-color: #0F4A36;
}

#step-1 .radio-group .radio-label:focus-within,
#step-2 .radio-group .radio-label:focus-within,
#step-3 .radio-group .radio-label:focus-within,
#step-4 .radio-group .radio-label:focus-within,
#step-5 .radio-group .radio-label:focus-within,
#step-1 .checkbox-group .checkbox-label:focus-within,
#step-2 .checkbox-group .checkbox-label:focus-within,
#step-3 .checkbox-group .checkbox-label:focus-within,
#step-4 .checkbox-group .checkbox-label:focus-within,
#step-5 .checkbox-group .checkbox-label:focus-within {
    outline: 3px solid rgba(15, 74, 54, 0.25);
    outline-offset: 2px;
}

#step-1 .conditional-section,
#step-2 .conditional-section,
#step-3 .conditional-section,
#step-4 .conditional-section,
#step-5 .conditional-section {
    background-color: #F3FBF7;
    border: 1px solid #cfded6;
    border-radius: 7px;
    padding: 18px;
}

#step-1 .button-row,
#step-2 .button-row,
#step-3 .button-row,
#step-4 .button-row,
#step-5 .button-row {
    border-top: 1px solid #ece8df;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
}

#step-1 .btn-next,
#step-2 .btn-next,
#step-3 .btn-next,
#step-4 .btn-next,
#step-5 .btn-next,
#step-1 .btn-back,
#step-2 .btn-back,
#step-3 .btn-back,
#step-4 .btn-back,
#step-5 .btn-back {
    border-radius: 7px;
    box-shadow: none;
    font-size: 16px;
    font-weight: 800;
    min-height: 48px;
    padding: 13px 26px;
}

#step-1 .btn-next,
#step-2 .btn-next,
#step-3 .btn-next,
#step-4 .btn-next,
#step-5 .btn-next {
    background: linear-gradient(135deg, #0F4A36 0%, #063D2E 100%);
    border-color: #0F4A36;
    color: #ffffff;
}

#step-1 .btn-next:hover,
#step-2 .btn-next:hover,
#step-3 .btn-next:hover,
#step-4 .btn-next:hover,
#step-5 .btn-next:hover,
#step-1 .btn-next:focus,
#step-2 .btn-next:focus,
#step-3 .btn-next:focus,
#step-4 .btn-next:focus,
#step-5 .btn-next:focus {
    background: linear-gradient(135deg, #0b3e2d 0%, #043225 100%);
    outline: 3px solid rgba(15, 74, 54, 0.22);
    outline-offset: 2px;
}

#step-1 .btn-back,
#step-2 .btn-back,
#step-3 .btn-back,
#step-4 .btn-back,
#step-5 .btn-back {
    background-color: #ffffff;
    border-color: #0F4A36;
    color: #0F4A36;
}

#step-1 .btn-back:hover,
#step-2 .btn-back:hover,
#step-3 .btn-back:hover,
#step-4 .btn-back:hover,
#step-5 .btn-back:hover,
#step-1 .btn-back:focus,
#step-2 .btn-back:focus,
#step-3 .btn-back:focus,
#step-4 .btn-back:focus,
#step-5 .btn-back:focus {
    background-color: #EAF7F2;
    outline: 3px solid rgba(15, 74, 54, 0.18);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    body:has(#step-1.active) #safe-exit-bar,
    body:has(#step-2.active) #safe-exit-bar,
    body:has(#step-3.active) #safe-exit-bar,
    body:has(#step-4.active) #safe-exit-bar,
    body:has(#step-5.active) #safe-exit-bar {
        padding: 9px 12px;
        gap: 10px;
    }

    body:has(#step-1.active) #safe-exit-btn,
    body:has(#step-2.active) #safe-exit-btn,
    body:has(#step-3.active) #safe-exit-btn,
    body:has(#step-4.active) #safe-exit-btn,
    body:has(#step-5.active) #safe-exit-btn {
        padding: 9px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    body:has(#step-1.active) #disclaimer-bar,
    body:has(#step-2.active) #disclaimer-bar,
    body:has(#step-3.active) #disclaimer-bar,
    body:has(#step-4.active) #disclaimer-bar,
    body:has(#step-5.active) #disclaimer-bar {
        padding: 10px 14px;
        text-align: left;
    }

    body:has(#step-1.active) #disclaimer-bar p,
    body:has(#step-2.active) #disclaimer-bar p,
    body:has(#step-3.active) #disclaimer-bar p,
    body:has(#step-4.active) #disclaimer-bar p,
    body:has(#step-5.active) #disclaimer-bar p {
        font-size: 13.5px;
        line-height: 1.45;
    }

    #app:has(#step-1.active),
    #app:has(#step-2.active),
    #app:has(#step-3.active),
    #app:has(#step-4.active),
    #app:has(#step-5.active) {
        max-width: 100%;
        padding: 128px 14px 20px;
    }

    #app:has(#step-1.active) #progress-container,
    #app:has(#step-2.active) #progress-container,
    #app:has(#step-3.active) #progress-container,
    #app:has(#step-4.active) #progress-container,
    #app:has(#step-5.active) #progress-container {
        margin-bottom: 12px;
        max-width: 100%;
    }

    #step-1,
    #step-2,
    #step-3,
    #step-4,
    #step-5 {
        border-radius: 8px;
        margin-bottom: 18px;
        max-width: 100%;
        padding: 22px 16px 16px;
    }

    #step-1 .step-title,
    #step-2 .step-title,
    #step-3 .step-title,
    #step-4 .step-title,
    #step-5 .step-title {
        font-size: 21px;
        margin-bottom: 14px;
        padding-bottom: 13px;
    }

    #step-1 .step-intro,
    #step-2 .step-intro,
    #step-3 .step-intro,
    #step-4 .step-intro,
    #step-5 .step-intro {
        font-size: 14.5px;
        margin-bottom: 20px;
    }

    #step-1 .form-group > label,
    #step-2 .form-group > label,
    #step-3 .form-group > label,
    #step-4 .form-group > label,
    #step-5 .form-group > label,
    #step-1 .radio-group .radio-label,
    #step-2 .radio-group .radio-label,
    #step-3 .radio-group .radio-label,
    #step-4 .radio-group .radio-label,
    #step-5 .radio-group .radio-label,
    #step-1 .checkbox-group .checkbox-label,
    #step-2 .checkbox-group .checkbox-label,
    #step-3 .checkbox-group .checkbox-label,
    #step-4 .checkbox-group .checkbox-label,
    #step-5 .checkbox-group .checkbox-label {
        font-size: 14.5px;
    }

    #step-1 .radio-group .radio-label,
    #step-2 .radio-group .radio-label,
    #step-3 .radio-group .radio-label,
    #step-4 .radio-group .radio-label,
    #step-5 .radio-group .radio-label,
    #step-1 .checkbox-group .checkbox-label,
    #step-2 .checkbox-group .checkbox-label,
    #step-3 .checkbox-group .checkbox-label,
    #step-4 .checkbox-group .checkbox-label,
    #step-5 .checkbox-group .checkbox-label {
        min-height: 46px;
        padding: 12px 48px 12px 13px;
    }

    #step-1 .button-row,
    #step-2 .button-row,
    #step-3 .button-row,
    #step-4 .button-row,
    #step-5 .button-row {
        flex-direction: column-reverse;
        padding-top: 16px;
    }

    #step-1 .btn-next,
    #step-2 .btn-next,
    #step-3 .btn-next,
    #step-4 .btn-next,
    #step-5 .btn-next,
    #step-1 .btn-back,
    #step-2 .btn-back,
    #step-3 .btn-back,
    #step-4 .btn-back,
    #step-5 .btn-back {
        width: 100%;
    }
}

@media (max-width: 400px) {
    #app:has(#step-1.active),
    #app:has(#step-2.active),
    #app:has(#step-3.active),
    #app:has(#step-4.active),
    #app:has(#step-5.active) {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Clarespath pathway landing page */
body:has(#landing-page.active) {
    background-color: #F8F6F1;
}

body:has(#landing-page.active) #safe-exit-bar {
    background-color: #1B4332;
    padding: 10px 18px;
}

body:has(#landing-page.active) #disclaimer-bar {
    background-color: #fffaf0;
    border-bottom: 1px solid #d9a31a;
    padding: 12px 24px;
}

body:has(#landing-page.active) #disclaimer-bar p {
    color: #24362f;
    font-size: 14px;
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto;
}

#app:has(#landing-page.active) {
    max-width: 920px;
    padding: 124px 22px 34px;
}

#app:has(#landing-page.active) #progress-container {
    display: none !important;
}

#landing-page {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    max-width: 860px;
    padding: 0;
    min-height: calc(100vh - 142px);
}

#landing-page.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.landing-card-grid {
    display: grid;
    gap: 18px;
}

.landing-card {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #d9ded9;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(27, 67, 50, 0.08);
    color: #10211a;
    cursor: pointer;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 132px;
    padding: 24px 28px;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    width: 100%;
}

.landing-card:hover,
.landing-card:focus {
    border-color: #0F4A36;
    box-shadow: 0 14px 32px rgba(27, 67, 50, 0.14);
    outline: none;
    transform: translateY(-1px);
}

.landing-card:focus-visible {
    outline: 3px solid rgba(15, 74, 54, 0.24);
    outline-offset: 3px;
}

.landing-card-icon {
    align-items: center;
    border: 2px solid #0F4A36;
    border-radius: 999px;
    display: flex;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.landing-card-icon svg {
    fill: none;
    height: 30px;
    stroke: #0F4A36;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 30px;
}

.landing-card-copy {
    display: block;
    min-width: 0;
}

.landing-card-title {
    color: #0F4A36;
    display: block;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 7px;
}

.landing-card-text {
    color: #34423d;
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
}

#blackmail-mini-step {
    background-color: #ffffff;
    border: 1px solid #e1ded6;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(27, 67, 50, 0.08);
    max-width: 680px;
}

body:has(#blackmail-mini-step.active) {
    background-color: #F8F6F1;
}

#app:has(#blackmail-mini-step.active) {
    max-width: 760px;
    padding: 116px 22px 34px;
}

#app:has(#blackmail-mini-step.active) #progress-container {
    display: none !important;
}

@media (max-width: 640px) {
    body:has(#landing-page.active) #safe-exit-bar {
        padding: 9px 12px;
        gap: 10px;
    }

    body:has(#landing-page.active) #safe-exit-btn {
        padding: 9px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    body:has(#landing-page.active) #disclaimer-bar {
        padding: 10px 14px;
        text-align: left;
    }

    body:has(#landing-page.active) #disclaimer-bar p {
        font-size: 13.5px;
        line-height: 1.45;
    }

    #app:has(#landing-page.active) {
        max-width: 100%;
        padding: 128px 14px 20px;
    }

    .landing-card {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 126px;
        padding: 20px 16px;
    }

    .landing-card-icon {
        height: 42px;
        width: 42px;
    }

    .landing-card-icon svg {
        height: 25px;
        width: 25px;
    }

    .landing-card-title {
        font-size: 18px;
    }

    .landing-card-text {
        font-size: 14px;
    }
}

/* ================================================================
   34. PRINT / PDF STYLES
   Applies only when the page is printed or saved as PDF.
   All existing screen styles above are fully unchanged.

   NOTE: Chrome print headers and footers (date, page number, and
   local file path) are a browser setting and cannot be controlled
   by CSS. To remove them before saving as PDF: open Chrome's print
   dialog, expand "More settings", and uncheck "Headers and footers".
   ================================================================ */

@media print {

    /* ----------------------------------------------------------------
       Remove box shadows throughout — they reproduce as grey smudges
       on paper and PDF. Preserve exact border and background colours
       so coloured accents (blue, amber) render correctly in print.
       ---------------------------------------------------------------- */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* ----------------------------------------------------------------
       Hide screen-only chrome.
       - Fixed bars (safe exit, disclaimer) served their screen purpose
         and add nothing to a printed document.
       - Progress indicator is navigation-only.
       - Action buttons and button rows are screen interactions only.
       - Supplementary toggle panels (personal statement guidance,
         solicitor contact) are screen-only expandable sections.
       ---------------------------------------------------------------- */
    #safe-exit-bar,
    #disclaimer-bar,
    #progress-container,
    .action-buttons,
    .button-row,
    #personal-statement-guidance,
    #solicitor-contact {
        display: none !important;
    }

    /* ----------------------------------------------------------------
       Fix app top padding.
       On screen 120px clears the two fixed bars above the content.
       In print those bars are hidden — normal top spacing applies.
       max-width: 100% and margin: 0 use the full page width.
       ---------------------------------------------------------------- */
    #app {
        padding-top: var(--space-xl);
        max-width: 100%;
        margin: 0;
    }

    /* ----------------------------------------------------------------
       Step section card framing.
       The card border and padding are screen affordances — they add
       an unnecessary box outline and excess whitespace around the
       entire printed page.
       ---------------------------------------------------------------- */
    .step-section {
        border: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* ----------------------------------------------------------------
       Results page layout.
       Collapse the two-column grid to a single column and remove
       sticky positioning from the status panel so it flows naturally
       in the printed document.
       ---------------------------------------------------------------- */
    #results-layout {
        display: block;
    }

    #results-panel {
        position: static;
        margin-top: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    /* ----------------------------------------------------------------
       Disclaimer handling.
       Hide the small inline amber disclaimer at the top of the
       results section — it is redundant in print.
       .results-important-box (the brief "Important" notice) is kept.
       .results-full-disclaimer (the full legal text at the bottom)
       is kept as the single authoritative printed disclaimer.
       ---------------------------------------------------------------- */
    .results-disclaimer {
        display: none !important;
    }

    /* ----------------------------------------------------------------
       Page-break rules.
       Prevent key content blocks from splitting awkwardly across
       printed pages. Both modern (break-inside) and legacy
       (page-break-inside) properties are set for broad compatibility.
       ---------------------------------------------------------------- */
    .summary-preview,
    .evidence-snapshot,
    .next-steps-box,
    .guidance-intro,
    .guidance-card,
    .results-important-box,
    .results-full-disclaimer,
    #results-panel {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ----------------------------------------------------------------
       Links — ensure they remain readable in black and white print.
       ---------------------------------------------------------------- */
    a {
        color: #000;
        text-decoration: underline;
    }

}

@media print {
  .topbar,
  #progress-container,
  .demo-bar,
  .step-6-footer-links,
  .emergency-block { display: none; }
  .results-hero {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
  }
  .results-panel-inner,
  .steps-section,
  .support-section {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .next-step-item { break-inside: avoid; }
  body { font-size: 12pt; line-height: 1.5; }
}


/* ================================================================
   STUDENT PATHWAY — OUTPUT PAGE COMPONENTS
   Used only by the student branch of updateResultsForPathway().
   All classes here are new and do not affect DV or blackmail output.
   ================================================================ */

/* --- Helpline pair: two cards side by side --- */
.helpline-pair {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* --- Helpline card (used in .helpline-pair and .helpline-grid) --- */
.helpline-card {
    flex: 1;
    background: #f0f7f4;
    border: 1px solid #c8e0d8;
    border-radius: 8px;
    padding: 16px;
    min-width: 0;
}

.helpline-name {
    font-weight: 600;
    color: #085041;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.helpline-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.helpline-tag {
    font-size: 0.78rem;
    color: #5d6d7e;
    line-height: 1.4;
}

.helpline-link {
    display: block;
    color: #085041;
    font-weight: 600;
    text-decoration: underline;
    margin-bottom: 4px;
    font-size: 0.9rem;
    word-break: break-all;
}

.helpline-link:hover {
    color: #054030;
}

/* --- Helpline grid: 2x2 for More support section --- */
.helpline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

/* --- More support section --- */
.student-more-support {
    margin-top: 32px;
}

.student-more-support-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: #085041;
    margin-bottom: 12px;
}

/* --- Evidence strip (amber) --- */
.evidence-strip {
    background: #fef9e7;
    border-left: 4px solid #f0c040;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-top: 28px;
}

.evidence-strip-title {
    font-weight: 600;
    color: #7d6608;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.evidence-strip-list {
    margin: 0;
    padding-left: 20px;
    color: #5a4a00;
}

.evidence-strip-list li {
    font-size: 0.9rem;
    margin-bottom: 5px;
    line-height: 1.5;
}

.evidence-strip-list li:last-child {
    margin-bottom: 0;
}

/* --- Reassurance banner --- */
.reassurance-banner {
    background: #085041;
    color: #ffffff;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    padding: 18px 24px;
    border-radius: 8px;
    margin-top: 28px;
}

/* --- Student action buttons row --- */
.student-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* --- Responsive: collapse to single column on narrow screens --- */
@media (max-width: 600px) {
    .helpline-pair {
        flex-direction: column;
    }

    .helpline-grid {
        grid-template-columns: 1fr;
    }

    .student-action-buttons {
        flex-direction: column;
    }

    .student-action-buttons .download-summary-btn,
    .student-action-buttons .next-step-download {
        width: 100%;
    }
}


/* ================================================================
   STUDENT SUPPORT PAGE — COMPACT LAYOUT OVERRIDES
   Scoped to #support-page-student. Does not affect #support-page.
   ================================================================ */

#support-page-student .support-section {
    margin-bottom: 24px;
}

#support-page-student .support-section-heading {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5d6d7e;
    margin-bottom: 12px;
}

.student-school-card {
    background: #fef9e7;
    border-left: 4px solid #f0c040;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.student-school-card h4 {
    font-weight: 600;
    color: #7d6608;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.student-school-card p {
    color: #5a4a00;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}


/* --- Student results page — action button scoped overrides --- */
#suggested-next-steps-list .download-summary-btn {
    background: #085041;
    color: #ffffff;
    border: 2px solid #085041;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-top: 12px;
}

#suggested-next-steps-list .download-summary-btn:hover {
    background: #054030;
    border-color: #054030;
}

.student-action-buttons .next-step-download {
    background: #ffffff;
    color: #085041;
    border: 2px solid #085041;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.student-action-buttons .next-step-download:hover {
    background: #f0f7f4;
}


/* ================================================================
   ════════════════════════════════════════════════════════════════
   CLARESPATH WEBSITE THEME OVERRIDE
   Appended last so it wins over every earlier rule.
   Retargets the tool's blue/green palette to match the main site's
   ivory / sage / dusty-rose colour scheme, and layers in subtle
   trauma-aware animations.
   ════════════════════════════════════════════════════════════════
   ================================================================ */

/* Note: the Fraunces + Inter fonts are loaded via a <link> tag in
   page-tool.php so the WordPress-rendered page has access to them.
   @import here would be invalid (only legal at the very top of a CSS
   file) and would be silently dropped by the browser. */

:root {
    /* Re-map the original CSS variables to the site palette ---------- */
    --colour-primary:        #2E4538;   /* sage-deep  — replaces deep blue */
    --colour-primary-light:  #E0E9DE;   /* sage-mist  — replaces light blue */
    --colour-primary-hover:  #5C7867;   /* sage       — replaces darker blue */

    --colour-bg:             #FAF6EE;   /* ivory      — replaces off-white */
    --colour-card:           #FFFFFF;

    --colour-text:           #1F1D1A;   /* charcoal */
    --colour-text-light:     #6B655C;   /* warm-grey */
    --colour-text-white:     #FAF6EE;

    --colour-border:         #DDD3C2;   /* line — warm beige */
    --colour-border-focus:   #5C7867;   /* sage */

    /* Safe Exit — keep visibly different (red) for safety affordance */
    --colour-exit-bg:        #B23A48;
    --colour-exit-hover:     #6A1F28;

    /* Disclaimer bar — soft rose-mist instead of amber */
    --colour-disclaimer-bg:     #F4E4DD;
    --colour-disclaimer-border: #C58578;
    --colour-disclaimer-text:   #6A2A1F;

    --colour-error:          #B23A48;
    --colour-error-bg:       #F4E4DD;

    /* Support / next-steps accent — sage-deep instead of forest green */
    --colour-support-accent:    #2E4538;
    --colour-support-hover:     #5C7867;
    --colour-support-card-top:  #E0E9DE;

    /* Info boxes — rose-mist instead of pale blue */
    --colour-info-bg:        #F4E4DD;
    --colour-info-border:    #E8C9BF;

    /* Site-matching shadow */
    --shadow-card: 0 8px 28px rgba(31, 29, 26, 0.08);
    --shadow-btn:  0 4px 14px rgba(46, 69, 56, 0.18);

    /* Aliases we use below so anything hard-coded in earlier CSS gets
       caught by one targeted override block. */
    --cs-sage-deep:  #2E4538;
    --cs-sage:       #5C7867;
    --cs-sage-mist:  #E0E9DE;
    --cs-rose:       #C58578;
    --cs-rose-soft:  #E8C9BF;
    --cs-rose-mist:  #F4E4DD;
    --cs-cream:      #F4EDE0;
    --cs-ivory:      #FAF6EE;
    --cs-charcoal:   #1F1D1A;
}

/* ----------------------------------------------------------------
   Typography — pull in the site's Fraunces + Inter pairing.
   ---------------------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: linear-gradient(180deg, #FAF6EE 0%, #F4EDE0 100%) fixed;
    color: var(--cs-charcoal);
}
h1, h2, h3, .step-title,
.welcome-hero-title,
.support-hero h2,
[id$="-heading"] {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.018em;
    color: var(--cs-charcoal);
}

/* ----------------------------------------------------------------
   Hard-coded greens & blues from earlier CSS — re-skin in bulk.
   The earlier file uses many literal hexes (e.g. #085041, #1B4332,
   #2a6496) instead of variables. Anywhere they appeared as a
   foreground colour, swap to sage-deep; for borders, swap to a
   matching tone.
   ---------------------------------------------------------------- */

#main-header h1,
.step-title,
.welcome-hero-title,
.welcome-what-title,
.welcome-agreement-label,
.summary-section-title,
[class^="step-"] h2,
.support-section-heading,
.results-panel-heading,
.next-step-title { color: var(--cs-charcoal); }

.step-title { border-bottom-color: var(--cs-sage); }

.header-subtitle,
#step-label { color: var(--cs-sage); }

/* Progress bar */
#progress-bar-track { background-color: var(--cs-sage-mist); }
#progress-bar-fill  {
    background: linear-gradient(90deg, var(--cs-sage) 0%, var(--cs-sage-deep) 100%);
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Buttons */
.btn-next,
.welcome-start-btn,
button.btn-primary,
.download-summary-btn,
.support-action-link,
.results-cta button:not(.btn-back) {
    background: var(--cs-sage-deep);
    color: var(--cs-ivory);
    border-radius: 999px;
    transition: background 0.3s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
    box-shadow: 0 6px 20px rgba(46, 69, 56, 0.22);
}
.btn-next:hover,
.welcome-start-btn:hover,
button.btn-primary:hover,
.download-summary-btn:hover,
.support-action-link:hover,
.results-cta button:not(.btn-back):hover {
    background: var(--cs-rose);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(197, 133, 120, 0.35);
}

.btn-back {
    background: transparent;
    color: var(--cs-sage-deep);
    border: 1.5px solid var(--cs-sage-deep);
    border-radius: 999px;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn-back:hover {
    background: var(--cs-sage-deep);
    color: var(--cs-ivory);
    transform: translateX(-3px);
}

/* Cards & containers */
.step-section,
.welcome-trust-card,
.welcome-what-card,
.summary-section,
.support-option,
.results-panel,
.helpline-card,
.next-step-item,
.landing-card,
#results-panel,
.support-page-shell > * {
    border-color: var(--cs-rose-soft) !important;
}

.step-section {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid var(--cs-rose-soft);
    box-shadow: var(--shadow-card);
    border-radius: 22px;
}

/* Form fields */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
    border-color: var(--cs-rose-soft);
    border-radius: 10px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--cs-sage);
    box-shadow: 0 0 0 4px rgba(184, 201, 189, 0.4);
    outline: none;
}

/* Checkbox / radio cards */
.checkbox-label,
.radio-label {
    transition: background 0.3s, border-color 0.3s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 10px;
}
.checkbox-label:hover,
.radio-label:hover {
    background: var(--cs-rose-mist);
    border-color: var(--cs-rose);
    transform: translateX(4px);
}
.checkbox-label:has(input:checked),
.radio-label:has(input:checked) {
    background: var(--cs-sage-mist);
    border-color: var(--cs-sage);
}

/* Disclaimer bar — softer warm tone */
#disclaimer-bar {
    background-color: var(--colour-disclaimer-bg);
    border-bottom-color: var(--colour-disclaimer-border);
}
#disclaimer-bar p { color: var(--colour-disclaimer-text); }

/* Safe exit bar — match site safe-exit pill aesthetic */
#safe-exit-bar {
    background: var(--colour-exit-bg);
    box-shadow: 0 2px 12px rgba(178, 58, 72, 0.25);
}
#safe-exit-btn {
    background-color: #fff;
    color: var(--colour-exit-bg);
    border-color: #fff;
    transition: transform 0.25s, box-shadow 0.25s;
}
#safe-exit-btn:hover,
#safe-exit-btn:focus {
    background: var(--cs-charcoal);
    color: #fff;
    border-color: var(--cs-charcoal);
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.safe-brand-name { color: #fff; font-family: 'Fraunces', serif; font-style: italic; }
.safe-brand-dot, .safe-exit-dot { background: var(--cs-rose-soft); }

/* Landing cards */
.landing-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--cs-rose-soft);
    border-radius: 16px;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s, border-color 0.3s;
}
.landing-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--cs-sage);
    box-shadow: 0 18px 40px rgba(46, 69, 56, 0.15);
}
.landing-card:hover .landing-card-icon { color: var(--cs-rose); transform: scale(1.06); }
.landing-card-icon {
    color: var(--cs-sage-deep);
    transition: color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.landing-card-title { color: var(--cs-charcoal); font-family: 'Fraunces', serif; font-weight: 400; }

/* Welcome page accents */
.welcome-hero-badge {
    background: var(--cs-sage-mist);
    color: var(--cs-sage-deep);
    border: 1px solid rgba(92, 120, 103, 0.3);
}
.welcome-badge-icon, .welcome-trust-icon-box, .welcome-check-icon {
    color: var(--cs-sage-deep);
    background: var(--cs-sage-mist);
}
.welcome-hero-plant {
    background:
      radial-gradient(circle at 40% 50%, var(--cs-rose-mist) 0%, transparent 60%),
      radial-gradient(circle at 60% 50%, var(--cs-sage-mist) 0%, transparent 60%);
    opacity: 0.7;
}

/* Validation error pills */
.validation-error.visible {
    background: var(--colour-error-bg);
    border: 1px solid var(--colour-error);
    color: var(--colour-error);
    border-radius: 10px;
    padding: 12px 16px;
    animation: cs-shake 0.4s ease-out;
}
@keyframes cs-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Summary sections */
.summary-section {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--cs-rose-soft);
    border-left: 3px solid var(--cs-rose);
    border-radius: 12px;
}
.summary-section-title { color: var(--cs-sage-deep); }

/* Support cards */
.support-option-primary,
.support-option-safety { border-left: 3px solid var(--cs-rose); }
.support-option-icon { color: var(--cs-sage-deep); background: var(--cs-sage-mist); }
.support-option h4 { color: var(--cs-charcoal); }
.support-phone { color: var(--cs-rose-deep, var(--cs-rose)); font-family: 'Fraunces', serif; font-style: italic; }
.support-disclaimer-strip {
    background: var(--cs-rose-mist);
    border-color: var(--cs-rose);
    color: var(--colour-disclaimer-text);
}
.emergency-block {
    background: rgba(178, 58, 72, 0.06);
    border: 1px solid var(--cs-rose);
    border-radius: 14px;
}
.emergency-number { color: var(--colour-exit-bg); font-family: 'Fraunces', serif; }

/* ----------------------------------------------------------------
   ANIMATIONS — step entrances, button shimmer, floating petals
   ---------------------------------------------------------------- */

/* Step section entrance: fade + gentle rise */
@keyframes cs-step-enter {
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: translateY(0); }
}
.step-section.active.just-shown {
    animation: cs-step-enter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Stagger children of the active step so questions appear one after another */
.step-section.active.just-shown > * {
    opacity: 0;
    animation: cs-step-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.step-section.active.just-shown > *:nth-child(1) { animation-delay: 0.05s; }
.step-section.active.just-shown > *:nth-child(2) { animation-delay: 0.12s; }
.step-section.active.just-shown > *:nth-child(3) { animation-delay: 0.20s; }
.step-section.active.just-shown > *:nth-child(4) { animation-delay: 0.28s; }
.step-section.active.just-shown > *:nth-child(5) { animation-delay: 0.36s; }
.step-section.active.just-shown > *:nth-child(6) { animation-delay: 0.44s; }
.step-section.active.just-shown > *:nth-child(n+7) { animation-delay: 0.52s; }

/* Floating petals layer — shared with the main site */
.cs-petals {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.cs-petals .petal {
    position: absolute;
    border-radius: 50% 0 50% 0;
    opacity: 0;
    animation: cs-petal-float linear infinite;
    filter: blur(0.5px);
}
@keyframes cs-petal-float {
    0%   { transform: translateY(110vh) translateX(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.45; }
    90%  { opacity: 0.35; }
    100% { transform: translateY(-20vh) translateX(var(--drift, 80px)) rotate(360deg); opacity: 0; }
}
/* Bring content above the petals layer */
#safe-exit-bar, #disclaimer-bar, #app { position: relative; z-index: 1; }
#safe-exit-bar { z-index: 1000; }
#disclaimer-bar { z-index: 999; }

/* Reduce-motion users get a calm static layout */
@media (prefers-reduced-motion: reduce) {
    .step-section.active.just-shown,
    .step-section.active.just-shown > *,
    .cs-petals .petal,
    .validation-error.visible { animation: none !important; opacity: 1 !important; transform: none !important; }
    .cs-petals { display: none; }
}

/* ================================================================
   v1.3.0 — Tool color override enforcement
   Re-skin every SVG that hardcoded the original forest-green
   (#085041 / #0F6E56 etc.) to use the site's sage palette via
   currentColor inheritance.
   ================================================================ */

/* Force ALL SVG strokes/fills to inherit from the parent text color,
   so swapping the parent color also swaps the icon. */
.landing-card svg,
.welcome-trust-icon-box svg,
.welcome-check-icon svg,
.welcome-badge-icon svg,
.support-option-icon svg,
.support-disclaimer-icon svg,
.support-safety-icon svg,
.emergency-icon svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Now make sure each parent has the right color. */
.landing-card-icon,
.welcome-trust-icon-box,
.welcome-check-icon,
.welcome-badge-icon,
.support-option-icon  { color: var(--cs-sage-deep) !important; }

/* Disclaimer bar — soft rose tone, drop the amber. */
#disclaimer-bar {
    background: var(--cs-rose-mist) !important;
    border-bottom: 2px solid var(--cs-rose) !important;
}
#disclaimer-bar p { color: var(--colour-disclaimer-text) !important; }

/* Headings throughout the tool — sage-deep, not forest-green. */
.welcome-hero-title,
.step-title,
.welcome-what-title,
.summary-section-title,
.support-section-heading,
.results-panel-heading,
[class*="-heading"] { color: var(--cs-charcoal) !important; }

/* Step-title underline */
.step-title { border-bottom-color: var(--cs-sage) !important; }

/* Step labels & subtitles */
#step-label, .header-subtitle { color: var(--cs-sage) !important; }

/* Logo wordmark in the safe-exit bar — use brand italic Fraunces */
.safe-brand-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}


/* ================================================================
   v1.4.0 — LANDING PAGE POLISH
   Adds a welcoming header + reassurance footer so the landing
   page doesn't feel empty above the cards.
   ================================================================ */

.landing-header {
    max-width: 720px;
    margin: 0 auto 36px;
    padding: 0 8px;
    text-align: center;
    animation: cs-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.landing-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cs-rose);
    margin-bottom: 14px;
    padding: 6px 14px;
    background: rgba(197, 133, 120, 0.12);
    border-radius: 999px;
    border: 1px solid rgba(197, 133, 120, 0.28);
}
.landing-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.022em;
    color: var(--cs-charcoal) !important;
    margin: 0 0 14px;
}
.landing-lede {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-charcoal);
    opacity: 0.78;
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.landing-footer {
    max-width: 600px;
    margin: 40px auto 0;
    text-align: center;
    animation: cs-fade-up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
.landing-footer p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cs-charcoal);
    opacity: 0.72;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.landing-footer-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cs-sage);
    box-shadow: 0 0 0 4px rgba(92, 120, 103, 0.18);
}
.landing-footer-meta {
    opacity: 0.55 !important;
    font-size: 12.5px !important;
    margin-top: 8px !important;
}

@keyframes cs-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
    .landing-header { margin-bottom: 28px; padding: 0 16px; }
    .landing-title { font-size: 26px; }
    .landing-lede { font-size: 15px; }
    .landing-footer { margin-top: 32px; padding: 0 16px; }
    .landing-footer p { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-header, .landing-footer { animation: none; }
}

/* ================================================================
   v1.4.0 — INFO PANEL MODAL
   Opens via any link with [data-info-panel]. Esc and overlay-click
   both close it. Locks background scroll while open.
   ================================================================ */

.cs-info-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(31, 29, 26, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: cs-overlay-in 0.3s ease-out;
}
.cs-info-overlay[hidden] { display: none !important; }

.cs-info-panel {
    background: var(--cs-ivory);
    color: var(--cs-charcoal);
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid var(--cs-rose-soft);
    box-shadow: 0 30px 80px rgba(31, 29, 26, 0.35);
    padding: 36px 40px 40px;
    position: relative;
    animation: cs-panel-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-info-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cs-rose-soft);
    background: transparent;
    color: var(--cs-charcoal);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.cs-info-close:hover {
    background: var(--cs-rose-mist);
    border-color: var(--cs-rose);
    transform: rotate(90deg);
}
.cs-info-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: -0.018em;
    margin: 0 50px 18px 0;
    color: var(--cs-charcoal) !important;
}
.cs-info-body {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--cs-charcoal);
}
.cs-info-body p {
    margin: 0 0 14px;
}
.cs-info-body p:last-child { margin-bottom: 0; }
.cs-info-body strong { font-weight: 600; }
.cs-info-body ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.cs-info-body ul li {
    position: relative;
    padding: 8px 0 8px 22px;
    line-height: 1.6;
}
.cs-info-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 10px;
    height: 1px;
    background: var(--cs-rose);
}
.cs-info-body a {
    color: var(--cs-rose);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.cs-info-body a:hover { color: var(--cs-sage-deep); }

@keyframes cs-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cs-panel-in {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .cs-info-panel {
        padding: 28px 24px 32px;
        max-height: 90vh;
        border-radius: 14px;
    }
    .cs-info-title { font-size: 24px; margin-right: 44px; }
    .cs-info-body { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-info-overlay, .cs-info-panel { animation: none !important; }
    .cs-info-close { transition: none !important; }
}

/* ================================================================
   v1.4.0 — SAFE EXIT BAR brand polish
   ================================================================ */

.safe-brand-name {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 19px !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: #fff !important;
}
.safe-brand-name em {
    font-style: italic;
    font-weight: 400;
    color: var(--cs-rose-soft);
}
.safe-brand-dot {
    width: 8px; height: 8px;
    background: var(--cs-rose);
    box-shadow: 0 0 0 4px rgba(197, 133, 120, 0.25);
}
@keyframes cs-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .safe-brand-dot { animation: none; }
}

@media (max-width: 500px) {
    .safe-brand-name { font-size: 17px !important; }
    .safe-exit-text { font-size: 12.5px; }
}

/* ================================================================
   v1.4.0 — UNIFY safe-exit-bar across all pages
   The original tool had a different bar colour per page (red on
   welcome/landing, dark-green on steps 1-5). That inconsistency
   reads as a bug. Force one calm sage-deep tone everywhere.
   ================================================================ */

#safe-exit-bar,
body:has(#landing-page.active) #safe-exit-bar,
body:has(#welcome-page.active) #safe-exit-bar,
body:has(#step-1.active) #safe-exit-bar,
body:has(#step-2.active) #safe-exit-bar,
body:has(#step-3.active) #safe-exit-bar,
body:has(#step-4.active) #safe-exit-bar,
body:has(#step-5.active) #safe-exit-bar,
body:has(#step-6.active) #safe-exit-bar,
body:has(#blackmail-mini-step.active) #safe-exit-bar,
body:has(#support-page.active) #safe-exit-bar,
body:has(#support-page-student.active) #safe-exit-bar,
body:has(#support-page-blackmail.active) #safe-exit-bar {
    background-color: var(--cs-sage-deep) !important;
    box-shadow: 0 2px 12px rgba(46, 69, 56, 0.25) !important;
    padding: 12px 18px !important;
}

/* The Leave-this-page-quickly button — keep readable on sage */
#safe-exit-btn {
    background-color: var(--cs-ivory) !important;
    color: var(--cs-sage-deep) !important;
    border: 1.5px solid var(--cs-ivory) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
#safe-exit-btn:hover,
#safe-exit-btn:focus-visible {
    background-color: var(--cs-rose) !important;
    color: #fff !important;
    border-color: var(--cs-rose) !important;
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(197, 133, 120, 0.4);
}

/* Disclaimer bar — single consistent rose-mist tone across every step */
#disclaimer-bar,
body:has(#step-1.active) #disclaimer-bar,
body:has(#step-2.active) #disclaimer-bar,
body:has(#step-3.active) #disclaimer-bar,
body:has(#step-4.active) #disclaimer-bar,
body:has(#step-5.active) #disclaimer-bar {
    background-color: var(--cs-rose-mist) !important;
    border-bottom: 2px solid var(--cs-rose) !important;
    padding: 12px 24px !important;
}
#disclaimer-bar p,
body:has(#step-1.active) #disclaimer-bar p,
body:has(#step-2.active) #disclaimer-bar p,
body:has(#step-3.active) #disclaimer-bar p,
body:has(#step-4.active) #disclaimer-bar p,
body:has(#step-5.active) #disclaimer-bar p {
    color: var(--colour-disclaimer-text) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* ================================================================
   v1.4.0 — Welcome page title polish
   The trust cards used hardcoded dark-green for titles; switch to
   neutral charcoal so the eye lands on the icon, not the heading.
   ================================================================ */

#welcome-page .welcome-trust-title,
.welcome-trust-title {
    color: var(--cs-charcoal) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}
#welcome-page .welcome-trust-text,
.welcome-trust-text {
    color: var(--cs-charcoal) !important;
    opacity: 0.62 !important;
}

/* The big "Understand Your Immigration Options" hero on welcome page
   was rendered in dark green at low contrast — switch to charcoal. */
.welcome-hero-title,
#welcome-page .welcome-hero-title {
    color: var(--cs-charcoal) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 400 !important;
}

.welcome-what-title,
#welcome-page .welcome-what-title,
.welcome-checklist h3 {
    color: var(--cs-charcoal) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
}

/* ================================================================
   ════════════════════════════════════════════════════════════════
   v1.5.0 — VISUAL POLISH PASS
   Targets bugs found in the end-to-end visual audit:
     • Dark-on-dark headlines on welcome + step 6 hero photos
     • Yellow/amber borders that should be rose
     • Empty icon circle on Summary Prepared card
     • Landing cards need a tappable affordance
   ════════════════════════════════════════════════════════════════
   ================================================================ */

/* ---------------------------------------------------------------
   1. WELCOME HERO TITLE — light text on the dark sage photo
   --------------------------------------------------------------- */
.welcome-hero-title,
#welcome-page .welcome-hero-title {
    color: var(--cs-ivory) !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.welcome-hero-lede,
#welcome-page .welcome-hero-lede {
    color: rgba(250, 246, 238, 0.92) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.welcome-hero-badge,
#welcome-page .welcome-hero-badge {
    color: var(--cs-ivory) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.welcome-hero-badge .welcome-badge-icon,
#welcome-page .welcome-badge-icon {
    color: var(--cs-rose-soft) !important;
    background: transparent !important;
}

/* ---------------------------------------------------------------
   2. STEP-6 HERO TITLE — same treatment
   --------------------------------------------------------------- */
#step-6 .results-hero h2,
#step-6 .results-hero-heading,
.results-hero h2 {
    color: var(--cs-ivory) !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.results-hero p,
#step-6 .results-hero p {
    color: rgba(250, 246, 238, 0.92) !important;
}
.results-hero-badge,
#step-6 .results-hero-badge {
    color: var(--cs-ivory) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* ---------------------------------------------------------------
   3. AGREEMENT BOX — was butter-yellow, switch to rose-mist
   --------------------------------------------------------------- */
.welcome-agreement,
#welcome-page .welcome-agreement {
    background: var(--cs-rose-mist) !important;
    border: 1.5px solid var(--cs-rose) !important;
    border-radius: 14px !important;
}
.welcome-agreement-label,
#welcome-page .welcome-agreement-label {
    color: var(--cs-rose) !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.16em !important;
}
.welcome-agreement-text,
#welcome-page .welcome-agreement-text {
    color: var(--cs-charcoal) !important;
}
.welcome-agreement input[type="checkbox"] {
    accent-color: var(--cs-rose) !important;
    width: 20px;
    height: 20px;
}

/* ---------------------------------------------------------------
   4. SUMMARY PREPARED CARD — switch amber border to rose
   --------------------------------------------------------------- */
.results-summary-card,
#step-6 .results-summary-card,
.summary-prepared-card,
.disclaimer-card-amber {
    border-left-color: var(--cs-rose) !important;
    background: rgba(232, 201, 191, 0.12) !important;
}
.results-summary-card .icon-circle,
.summary-prepared-icon {
    background: var(--cs-rose-mist) !important;
    color: var(--cs-rose) !important;
    border: 1.5px solid var(--cs-rose) !important;
}

/* Any remaining amber/gold borders on warning notices */
.support-warning-note,
.results-warning,
[class*="warning-strip"],
[class*="-amber"] {
    background: var(--cs-rose-mist) !important;
    border-color: var(--cs-rose) !important;
    color: var(--colour-disclaimer-text) !important;
}

/* ---------------------------------------------------------------
   5. LANDING CARDS — add a right-arrow chevron so they read as
   tappable, and fix the title/description weight hierarchy.
   --------------------------------------------------------------- */
.landing-card {
    position: relative;
    padding-right: 56px !important;   /* room for the chevron */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s,
                box-shadow 0.4s !important;
}
.landing-card::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--cs-sage-deep);
    border-top: 2px solid var(--cs-sage-deep);
    transform: translateY(-50%) rotate(45deg);
    transition: right 0.3s ease, border-color 0.3s ease;
    opacity: 0.6;
}
.landing-card:hover {
    transform: translateX(2px) translateY(-3px) !important;
    border-color: var(--cs-sage) !important;
    box-shadow: 0 18px 40px rgba(46, 69, 56, 0.15) !important;
}
.landing-card:hover::after {
    right: 16px;
    border-color: var(--cs-rose);
    opacity: 1;
}

/* Title is the most prominent — description is secondary, lighter */
.landing-card-title {
    color: var(--cs-charcoal) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
}
.landing-card-text {
    color: var(--cs-charcoal) !important;
    opacity: 0.68 !important;
    font-weight: 400 !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin-top: 4px !important;
}

/* ---------------------------------------------------------------
   6. STEP-3-style RADIO/CHECKBOX hover/check polish
   Make the checked state visually warmer (rose ring).
   --------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cs-sage-deep);
}

/* When a label wraps a checked input, mark the whole label */
.checkbox-label:has(input:checked),
.radio-label:has(input:checked) {
    background: rgba(232, 201, 191, 0.12) !important;
    border-color: var(--cs-rose) !important;
    transform: translateX(2px);
}

/* ---------------------------------------------------------------
   7. PROGRESS LABEL — "Step 3 of 6" + "50%"
   Make the percentage feel less like raw data and more like a soft
   indicator. Move it to align with the step label.
   --------------------------------------------------------------- */
#progress-container {
    /* Original CSS sets display:none and JS toggles it to flex when
       step-1 becomes active. Don't force display here. */
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}
/* Only show progress when an actual numbered step is active */
body:has(#step-1.active) #progress-container,
body:has(#step-2.active) #progress-container,
body:has(#step-3.active) #progress-container,
body:has(#step-4.active) #progress-container,
body:has(#step-5.active) #progress-container {
    display: flex !important;
}
body:has(#welcome-page.active) #progress-container,
body:has(#landing-page.active) #progress-container,
body:has(#blackmail-mini-step.active) #progress-container,
body:has(#step-6.active) #progress-container,
body:has(#support-page.active) #progress-container,
body:has(#support-page-student.active) #progress-container,
body:has(#support-page-blackmail.active) #progress-container {
    display: none !important;
}
#progress-bar-track {
    height: 6px !important;
    border-radius: 999px !important;
    overflow: hidden;
    background: var(--cs-sage-mist) !important;
}
#progress-bar-fill {
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--cs-sage) 0%, var(--cs-sage-deep) 100%) !important;
    box-shadow: 0 0 8px rgba(92, 120, 103, 0.4);
    transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#step-label {
    font-family: 'Inter', sans-serif !important;
    color: var(--cs-sage-deep) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
    text-align: left !important;
    opacity: 0.85;
}
.progress-percent,
#progress-percent {
    display: none !important;  /* hide raw percentage — bar speaks for itself */
}

/* ---------------------------------------------------------------
   8. STEP TITLES — soften the "Step X: …" header
   --------------------------------------------------------------- */
.step-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    color: var(--cs-charcoal) !important;
    border-bottom: 1px solid var(--cs-rose-soft) !important;
    padding-bottom: 14px !important;
    letter-spacing: -0.018em !important;
}

/* ---------------------------------------------------------------
   9. BACK button — give it a gentler character
   --------------------------------------------------------------- */
.btn-back {
    background: transparent !important;
    color: var(--cs-sage-deep) !important;
    border: 1.5px solid var(--cs-sage-deep) !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    transition: background 0.3s, color 0.3s, transform 0.3s !important;
}
.btn-back:hover {
    background: var(--cs-sage-deep) !important;
    color: var(--cs-ivory) !important;
    transform: translateX(-3px);
}

/* ---------------------------------------------------------------
   10. PRIMARY CTA / NEXT button — soft rose hover
   --------------------------------------------------------------- */
.btn-next,
.welcome-start-btn,
.download-summary-btn {
    background: var(--cs-sage-deep) !important;
    color: var(--cs-ivory) !important;
    border-radius: 999px !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 8px 24px rgba(46, 69, 56, 0.25);
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s !important;
}
.btn-next:hover,
.welcome-start-btn:hover,
.download-summary-btn:hover {
    background: var(--cs-rose) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(197, 133, 120, 0.35);
}

/* ---------------------------------------------------------------
   11. FORM SELECT dropdowns — match input style
   --------------------------------------------------------------- */
select {
    background-color: #fff;
    border: 1.5px solid var(--cs-rose-soft) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: var(--cs-charcoal) !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%232E4538' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 12px;
    padding-right: 44px !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}
select:focus {
    border-color: var(--cs-sage) !important;
    box-shadow: 0 0 0 4px rgba(184, 201, 189, 0.4) !important;
    outline: none;
}

/* ---------------------------------------------------------------
   12. RADIO buttons — show a sage dot inside when checked
   --------------------------------------------------------------- */
input[type="radio"] {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--cs-rose-soft);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
input[type="radio"]:hover {
    border-color: var(--cs-sage);
}
input[type="radio"]:checked {
    border-color: var(--cs-sage-deep);
    background: var(--cs-sage-deep);
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    background: var(--cs-ivory);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------
   13. CHECKBOX — sage check on tick
   --------------------------------------------------------------- */
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--cs-rose-soft);
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
input[type="checkbox"]:hover {
    border-color: var(--cs-sage);
}
input[type="checkbox"]:checked {
    border-color: var(--cs-sage-deep);
    background: var(--cs-sage-deep);
}
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 11px;
    border: solid var(--cs-ivory);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------
   14. TEXTAREA / TEXT INPUT polish
   --------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
    border: 1.5px solid var(--cs-rose-soft) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: var(--cs-charcoal) !important;
    background: #fff !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--cs-sage) !important;
    box-shadow: 0 0 0 4px rgba(184, 201, 189, 0.4) !important;
    outline: none;
}

/* ---------------------------------------------------------------
   15. Phone numbers in support panels — italic Fraunces for warmth
   --------------------------------------------------------------- */
.support-phone,
.helpline-number,
[class*="phone-number"] {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--cs-rose) !important;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   16. SUMMARY SECTION blocks — softer rose left-stripe
   --------------------------------------------------------------- */
.summary-section {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--cs-rose-soft) !important;
    border-left: 4px solid var(--cs-rose) !important;
    border-radius: 14px !important;
    padding: 24px 26px !important;
    margin-bottom: 18px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.summary-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(31, 29, 26, 0.08);
}
.summary-section-title {
    color: var(--cs-charcoal) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    margin-bottom: 12px !important;
}

/* ---------------------------------------------------------------
   17. Emergency 999 block at top of step 6 — keep red attention
   but match the visual language
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   17. Emergency 999 block — keep red attention but match the visual
   language. IMPORTANT: only style the block containers, never their
   children (a previous wildcard [class*="emergency"] was drawing a
   bordered rounded box around every label/number/detail, creating
   nested-rectangle clutter).
   --------------------------------------------------------------- */
.emergency-block,
.results-emergency-block {
    background: rgba(178, 58, 72, 0.04) !important;
    border: 1px solid rgba(178, 58, 72, 0.25) !important;
    border-left: 4px solid var(--colour-exit-bg) !important;
    border-radius: 14px !important;
}
.emergency-number,
.results-emergency-number {
    font-family: 'Fraunces', Georgia, serif !important;
    color: var(--colour-exit-bg) !important;
    font-weight: 400 !important;
}


/* Hide the CSS-generated percent label — the bar itself is enough */
#app:has(#step-1.active) #progress-container::after,
#app:has(#step-2.active) #progress-container::after,
#app:has(#step-3.active) #progress-container::after,
#app:has(#step-4.active) #progress-container::after,
#app:has(#step-5.active) #progress-container::after {
    content: "" !important;
    display: none !important;
}

/* ================================================================
   v1.5.0 — SUMMARY PREPARED panel polish
   The .results-panel-icon container holds an inline SVG injected
   by JS (see script.js buildPanelStatus). Style the container.
   ================================================================ */

.results-panel-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--cs-rose-mist) !important;
    border: 1.5px solid var(--cs-rose) !important;
    margin: 0 auto 14px !important;
    color: var(--cs-rose) !important;
}
.results-panel-icon svg {
    display: block;
    width: 26px;
    height: 26px;
    color: inherit;
    stroke: currentColor !important;
}

/* Status-specific colour: urgent = rose-dark, important = sage,
   prepared = sage-deep + check */
#results-panel.panel-status--urgent .results-panel-icon {
    background: rgba(178, 58, 72, 0.12) !important;
    border-color: var(--colour-exit-bg) !important;
    color: var(--colour-exit-bg) !important;
}
#results-panel.panel-status--important .results-panel-icon {
    background: rgba(232, 201, 191, 0.25) !important;
    border-color: var(--cs-rose) !important;
    color: var(--cs-rose) !important;
}
#results-panel.panel-status--prepared .results-panel-icon {
    background: var(--cs-sage-mist) !important;
    border-color: var(--cs-sage) !important;
    color: var(--cs-sage-deep) !important;
}

.results-panel-heading {
    color: var(--cs-charcoal) !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
}
.results-panel-text {
    color: var(--cs-charcoal) !important;
    opacity: 0.72 !important;
    text-align: center !important;
    font-size: 14.5px !important;
}
.results-panel-inner {
    text-align: center;
    padding: 24px 22px !important;
}
.trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 14px;
}
.trust-pill {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: var(--cs-sage-mist) !important;
    color: var(--cs-sage-deep) !important;
    border: 1px solid rgba(92, 120, 103, 0.25) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
}


/* ================================================================
   v1.5.0 — Replace remaining amber/gold/forest-green borders
   ================================================================ */

.results-important-box,
.results-panel-inner,
.summary-warning {
    border-left-color: var(--cs-rose) !important;
    background: rgba(232, 201, 191, 0.10) !important;
}
.official-links-box,
.civil-legal-advice-box {
    border-left-color: var(--cs-sage-deep) !important;
}
/* Guidance cards — sage-mist border */
.guidance-card {
    border-left-color: var(--cs-rose-soft) !important;
}

/* ================================================================
   v1.7.0 — TOOL FULL INTERACTION ANIMATIONS
   Every button click, card tap, input focus, and selection
   change gets a soft, trauma-aware animation.
   ================================================================ */

/* ----- Button press feedback ----- */
.btn-next:active,
.welcome-start-btn:active,
.download-summary-btn:active,
button.btn-primary:active,
.btn-back:active,
#safe-exit-btn:active,
.support-action-link:active,
.results-cta button:active {
    transform: scale(0.97) !important;
    transition: transform 0.08s ease !important;
}

/* ----- Landing card press feedback ----- */
.landing-card {
    will-change: transform;
}
.landing-card:active {
    transform: scale(0.98) translateY(-1px) !important;
    transition: transform 0.1s ease !important;
}

/* ----- Checkbox / radio selection animation ----- */
@keyframes cs-tick-pop {
    0%   { transform: scale(0.4) translate(-50%, -50%); opacity: 0; }
    60%  { transform: scale(1.15) translate(-50%, -50%); opacity: 1; }
    100% { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}
input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
    animation: cs-tick-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Label highlight when its input is selected */
.checkbox-label:has(input:checked),
.radio-label:has(input:checked) {
    animation: cs-label-pulse 0.5s ease-out;
}
@keyframes cs-label-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(197, 133, 120, 0.4); }
    50%  { box-shadow: 0 0 0 8px rgba(197, 133, 120, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(197, 133, 120, 0); }
}

/* ----- Input focus ring animation ----- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    animation: cs-focus-pulse 0.6s ease-out;
}
@keyframes cs-focus-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(92, 120, 103, 0.45); }
    100% { box-shadow: 0 0 0 4px rgba(184, 201, 189, 0.4); }
}

/* ----- Progress bar fill animation: a soft pulse when value changes ----- */
#progress-bar-fill {
    transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}
#progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    animation: cs-shimmer 2.4s ease-in-out infinite;
}
@keyframes cs-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ----- Safe Exit button ----- */
#safe-exit-btn {
    position: relative;
}
/* Ring appears only on hover/focus now — no constant pulsing. */
#safe-exit-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
#safe-exit-btn:hover::before,
#safe-exit-btn:focus-visible::before {
    opacity: 1;
    transform: scale(1.05);
}
@keyframes cs-exit-ring {
    0%   { transform: scale(0.95); opacity: 0; }
    25%  { opacity: 0.4; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* ----- Page transitions between steps — smoother fade out as well ----- */
.step-section {
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.step-section:not(.active) {
    opacity: 0;
    pointer-events: none;
}

/* ----- Hover scale on the safe-exit pill ----- */
#safe-exit-btn:hover {
    transform: translateY(-1px) scale(1.04);
}

/* ----- Disclaimer bar — gentle slide in on first paint ----- */
@keyframes cs-bar-slide {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
#safe-exit-bar { animation: cs-bar-slide 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#disclaimer-bar { animation: cs-bar-slide 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ----- Card icon — motion only on hover ----- */
.landing-card-icon {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.landing-card:hover .landing-card-icon {
    transform: scale(1.08);
}

/* ----- Summary section reveal — slide up from below ----- */
@keyframes cs-summary-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
#step-6.active .summary-section {
    animation: cs-summary-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#step-6.active .summary-section:nth-child(1) { animation-delay: 0.10s; }
#step-6.active .summary-section:nth-child(2) { animation-delay: 0.18s; }
#step-6.active .summary-section:nth-child(3) { animation-delay: 0.26s; }
#step-6.active .summary-section:nth-child(4) { animation-delay: 0.34s; }
#step-6.active .summary-section:nth-child(5) { animation-delay: 0.42s; }

/* ----- Toast / notification slide in (used after download) ----- */
@keyframes cs-toast-in {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.cs-toast, .toast {
    animation: cs-toast-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ----- Info modal animation polish ----- */
.cs-info-overlay { animation: cs-overlay-in 0.32s ease-out !important; }
.cs-info-panel   { animation: cs-panel-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }

/* ----- Help/info tile icon — soft rotate on hover ----- */
.welcome-trust-icon-box,
.support-option-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.welcome-trust-card:hover .welcome-trust-icon-box,
.support-option:hover .support-option-icon {
    transform: rotate(-6deg) scale(1.08);
}

/* ----- Brand wordmark — subtle hue cycle on hover ----- */
.safe-brand-name em {
    transition: color 0.4s ease;
}
.safe-brand-name:hover em {
    color: var(--cs-rose) !important;
}

/* ----- Reduced motion — kill all the extra animations ----- */
@media (prefers-reduced-motion: reduce) {
    .landing-card-icon,
    #safe-exit-btn::before,
    #progress-bar-fill::after,
    #safe-exit-bar,
    #disclaimer-bar,
    #step-6.active .summary-section,
    .cs-info-overlay,
    .cs-info-panel,
    .cs-toast,
    .toast {
        animation: none !important;
    }
    .step-section { transition: none !important; }
    .step-section:not(.active) { opacity: 1; }
}

/* ================================================================
   ANIMATION TOGGLE BUTTON  (tool)
   Floating pill, bottom-left. Session-only, stores nothing.
   ================================================================ */
.cs-anim-toggle {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 13px;
    border: 1.5px solid var(--cs-rose-soft, #E8C9BF);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--cs-charcoal, #1F1D1A);
    font-family: Inter, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(31, 29, 26, 0.14);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-color 0.25s ease;
}
.cs-anim-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(31, 29, 26, 0.2);
    border-color: var(--cs-rose, #C58578);
}
.cs-anim-toggle:active { transform: translateY(0) scale(0.97); }
.cs-anim-toggle:focus-visible {
    outline: 3px solid var(--cs-rose, #C58578);
    outline-offset: 2px;
}
.cs-anim-toggle .cs-anim-ico {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    color: var(--cs-rose, #C58578);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-anim-toggle[aria-pressed="true"] .cs-anim-ico { transform: rotate(180deg); }
.cs-anim-toggle .cs-anim-state { color: var(--cs-sage, #5C7867); }
.cs-anim-toggle[aria-pressed="true"] .cs-anim-state { color: var(--cs-rose, #C58578); }
@media (max-width: 600px) {
    .cs-anim-toggle { left: 12px; bottom: 12px; padding: 8px 13px 8px 11px; font-size: 11px; }
}

/* ---- ANIMATIONS OFF: instant + static, but nothing stays hidden ---- */
body.cs-anim-off *,
body.cs-anim-off *::before,
body.cs-anim-off *::after {
    animation: none !important;
    transition: none !important;
}
/* Step entrances and any rise/fade pieces must be forced visible. */
body.cs-anim-off .step-section.active.just-shown,
body.cs-anim-off .step-section.active.just-shown > *,
body.cs-anim-off .step-section.active,
body.cs-anim-off .summary-section,
body.cs-anim-off #safe-exit-bar,
body.cs-anim-off #disclaimer-bar {
    opacity: 1 !important;
    transform: none !important;
}
body.cs-anim-off .cs-petals { display: none !important; }

/* ================================================================
   SELF-CONTAINMENT GUARD
   The tool is a standalone page with its own stylesheet. functions.php
   already prevents the main site CSS from loading here. This block is a
   cache-safety net: if a stale cache ever serves the site CSS onto this
   page, these rules neutralise its leaky global element rules
   (section padding + dark footer background) so the tool layout holds.
   ================================================================ */
.clarespath-tool-page footer {
    background: transparent !important;
}
.clarespath-tool-page #support-page .support-section {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
.clarespath-tool-page #support-page .support-body > .support-section + .support-section {
    margin-top: 18px;
}

/* ================================================================
   v1.8.0 — RICH ENTRANCE ANIMATIONS (always on)
   Tasteful, calm motion throughout the tool. No looping pulses on
   buttons; motion is entrance + hover/press only. Respects the
   visitor's reduced-motion setting.
   ================================================================ */

/* --- Step screens fade + rise in when they become active --- */
@keyframes cs-step-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-section.active {
    animation: cs-step-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Landing cards cascade in one after another --- */
@keyframes cs-card-in {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.step-section.active .landing-card {
    animation: cs-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-section.active .landing-card:nth-child(1) { animation-delay: 0.08s; }
.step-section.active .landing-card:nth-child(2) { animation-delay: 0.18s; }
.step-section.active .landing-card:nth-child(3) { animation-delay: 0.28s; }
.step-section.active .landing-card:nth-child(4) { animation-delay: 0.38s; }

/* --- Landing header pieces rise in --- */
@keyframes cs-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-section.active .landing-eyebrow { animation: cs-rise 0.5s ease both; animation-delay: 0.02s; }
.step-section.active .landing-title   { animation: cs-rise 0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.10s; }
.step-section.active .landing-lede    { animation: cs-rise 0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.18s; }

/* --- Question groups / fields cascade as a step opens --- */
@keyframes cs-field-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-section.active .question-group,
.step-section.active .form-group,
.step-section.active .checkbox-label,
.step-section.active .radio-label {
    animation: cs-field-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-section.active .question-group:nth-child(1),
.step-section.active .form-group:nth-child(1) { animation-delay: 0.12s; }
.step-section.active .question-group:nth-child(2),
.step-section.active .form-group:nth-child(2) { animation-delay: 0.20s; }
.step-section.active .question-group:nth-child(3),
.step-section.active .form-group:nth-child(3) { animation-delay: 0.28s; }
.step-section.active .question-group:nth-child(4),
.step-section.active .form-group:nth-child(4) { animation-delay: 0.36s; }
.step-section.active .question-group:nth-child(n+5),
.step-section.active .form-group:nth-child(n+5) { animation-delay: 0.44s; }

/* Checkbox / radio option rows cascade within a group */
.step-section.active .checkbox-label:nth-child(1),
.step-section.active .radio-label:nth-child(1) { animation-delay: 0.16s; }
.step-section.active .checkbox-label:nth-child(2),
.step-section.active .radio-label:nth-child(2) { animation-delay: 0.22s; }
.step-section.active .checkbox-label:nth-child(3),
.step-section.active .radio-label:nth-child(3) { animation-delay: 0.28s; }
.step-section.active .checkbox-label:nth-child(4),
.step-section.active .radio-label:nth-child(4) { animation-delay: 0.34s; }
.step-section.active .checkbox-label:nth-child(n+5),
.step-section.active .radio-label:nth-child(n+5) { animation-delay: 0.40s; }

/* --- Hover lift on option labels (motion on interaction) --- */
.checkbox-label,
.radio-label {
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.checkbox-label:hover,
.radio-label:hover {
    transform: translateX(3px);
}

/* --- Welcome trust cards cascade --- */
.step-section.active .welcome-trust-card {
    animation: cs-card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-section.active .welcome-trust-card:nth-child(1) { animation-delay: 0.10s; }
.step-section.active .welcome-trust-card:nth-child(2) { animation-delay: 0.18s; }
.step-section.active .welcome-trust-card:nth-child(3) { animation-delay: 0.26s; }
.step-section.active .welcome-trust-card:nth-child(4) { animation-delay: 0.34s; }

/* --- Support page blocks cascade --- */
.step-section.active .support-option,
.step-section.active .support-card,
.step-section.active .emergency-block,
.step-section.active .support-back-row {
    animation: cs-field-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-section.active .support-option:nth-child(1) { animation-delay: 0.10s; }
.step-section.active .support-option:nth-child(2) { animation-delay: 0.20s; }
.step-section.active .support-option:nth-child(3) { animation-delay: 0.30s; }

/* --- Summary sections build in one after another --- */
.step-section.active .results-section,
.step-section.active .summary-block {
    animation: cs-field-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.step-section.active .results-section:nth-child(1) { animation-delay: 0.10s; }
.step-section.active .results-section:nth-child(2) { animation-delay: 0.18s; }
.step-section.active .results-section:nth-child(3) { animation-delay: 0.26s; }
.step-section.active .results-section:nth-child(4) { animation-delay: 0.34s; }
.step-section.active .results-section:nth-child(5) { animation-delay: 0.42s; }
.step-section.active .results-section:nth-child(n+6) { animation-delay: 0.50s; }

/* --- Card hover depth across the tool --- */
.welcome-trust-card,
.support-option,
.support-card,
.results-section {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.welcome-trust-card:hover,
.support-option:hover,
.results-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(8, 80, 65, 0.10);
}

/* --- Button press feedback (no looping; interaction only) --- */
.btn-next:active,
.btn-back:active,
.welcome-start-btn:active,
.landing-card:active,
.support-action:active {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .step-section.active,
    .step-section.active *,
    .step-section.active .landing-card,
    .step-section.active .question-group,
    .step-section.active .form-group,
    .step-section.active .checkbox-label,
    .step-section.active .radio-label,
    .step-section.active .welcome-trust-card,
    .step-section.active .support-option,
    .step-section.active .results-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}