/**
 * Operational Impact and Modernization ROI Estimator — Styles
 * Version: 07.23.26
 * Author: Tim Taricco
 *
 * All selectors are scoped under .roi-estimator to avoid
 * conflicts with GeneratePress, GenerateBlocks, and Gravity Forms.
 */


/* ─────────────────────────────────────────────────────────────
   Wrapper
   overflow:hidden clips the off-screen inactive steps so they
   don't expand the wrapper height and create blank space.
───────────────────────────────────────────────────────────── */
.roi-estimator {
    width: 100%;
    margin: 0 auto;
    font-family: inherit;
    color: var(--dark-1, #1a1a1a);
    position: relative;
}

/* Steps: all off-screen by default so GF can render without display:none
   blocking it. JS adds --active to bring the correct step into view. */
.roi-estimator__step {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    clip: rect(0,0,0,0);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.roi-estimator__step--active {
    position: static;
    left: auto;
    visibility: visible;
    pointer-events: auto;
    overflow: visible !important;
}


/* ─────────────────────────────────────────────────────────────
   Section Labels
   Green underline removed — clean text heading only.
───────────────────────────────────────────────────────────── */
.roi-estimator__section-label {
    font-size: var(--text-md, 1.125rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--accent-1, #008080);
    line-height: 1.2;
    grid-column: 1 / -1;
}

.roi-estimator__section-label:first-child {
    margin-top: 0;
}

.roi-estimator__section-label--optional {
    margin-top: 2.5rem;
}

.roi-estimator__optional-note {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: var(--dark-3, #666);
    margin-left: 0.5rem;
}

.roi-estimator__form-intro {
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-3, #666);
    margin: 0.25rem 0 1rem 0;
    line-height: 1.5;
}

/* Intro text outside the grid (sits between section label and form) */
.roi-estimator__section-intro {
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-3, #666);
    margin: 0.25rem 0 2rem 0;
    line-height: 1.5;
}

/* When form-intro is inside the grid (optional section), span full width */
.roi-estimator__form .roi-estimator__section-label,
.roi-estimator__form .roi-estimator__form-intro {
    grid-column: 1 / -1;
}

.roi-estimator__form .roi-estimator__form-intro {
    margin-top: 0;
    margin-bottom: 0.25rem;
}


/* ─────────────────────────────────────────────────────────────
   Calculator Form — 2-column grid on desktop/tablet
───────────────────────────────────────────────────────────── */
.roi-estimator__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
    align-items: start;
}

/* Section labels and the actions row span both columns */
.roi-estimator__section-label,
.roi-estimator__actions,
.roi-estimator__disclaimer,
.roi-estimator__validation-banner,
.roi-estimator__form-intro,
.roi-estimator__accordion-intro,
.roi-estimator__accordion {
    grid-column: 1 / -1;
}

/* Section labels inside the grid need margin control */
.roi-estimator__form .roi-estimator__section-label {
    margin-top: 1rem;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}

.roi-estimator__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
}

.roi-estimator__field input[type="number"] {
    margin-top: auto;
}

.roi-estimator__field label {
    font-size: var(--text-p, 0.9375rem);
    font-weight: 600;
    color: var(--dark-1, #1a1a1a);
    margin-bottom: 0;
    text-wrap: balance;
}

.roi-estimator__unit-hint {
    display: block;
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-3, #888);
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   Tooltip
───────────────────────────────────────────────────────────── */
.roi-estimator__tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background-color: var(--accent-1, #008080);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-left: 3px;
    padding: 0;
    flex-shrink: 0;
}

.roi-estimator__tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--dark-1, #1a1a1a);
    color: var(--light-1, #fff);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 6px;
    width: 220px;
    white-space: normal;
    text-align: left;
    display: none;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.roi-estimator__tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark-1, #1a1a1a);
    display: none;
    z-index: 101;
}

.roi-estimator__tooltip:hover::after,
.roi-estimator__tooltip:focus::after,
.roi-estimator__tooltip:hover::before,
.roi-estimator__tooltip:focus::before {
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   Validation banners
───────────────────────────────────────────────────────────── */
.roi-estimator__validation-banner {
    grid-column: 1 / -1;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-default, 12px);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.roi-estimator__validation-banner--error {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.roi-estimator__validation-banner--warning {
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.roi-estimator__field-hint {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-3, #666);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.roi-estimator__required {
    display: none;
}

.roi-estimator__field input[type="number"] {
    font-size: var(--text-p, 0.9375rem);
    line-height: inherit;
    color: var(--dark-1, #1a1a1a);
    padding: 10px 16px;
    border: 1px solid var(--dark-2, #444);
    border-radius: var(--border-radius-default, 12px);
    background-color: var(--light-1, #fff);
    width: 100%;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease;
}

.roi-estimator__field input[type="number"]::-webkit-inner-spin-button,
.roi-estimator__field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.roi-estimator__field input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-1, #008080);
    box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.15);
}

.roi-estimator__input--error {
    border-color: #c00 !important;
}

.roi-estimator__input--warning {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15) !important;
}

.roi-estimator__error {
    font-size: var(--text-xs, 0.75rem);
    color: #c00;
    line-height: 1.4;
    display: none;
}

.roi-estimator__error:not(:empty) {
    display: block;
}


/* ─────────────────────────────────────────────────────────────
   Advanced Settings accordion
───────────────────────────────────────────────────────────── */
.roi-estimator__accordion {
    grid-column: 1 / -1;
    border: 1px solid var(--light-2, #eee);
    border-radius: var(--border-radius-default, 12px);
    overflow: hidden;
}

.roi-estimator__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--accent-1, #008080);
    background-color: var(--light-2, #f5f5f5);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.roi-estimator__accordion-trigger::-webkit-details-marker {
    display: none;
}

.roi-estimator__accordion-trigger::after {
    content: '+';
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.2s ease;
}

.roi-estimator__accordion[open] .roi-estimator__accordion-trigger::after {
    content: '−';
}

.roi-estimator__accordion-content {
    padding: 1.25rem 1.25rem 0.5rem;
    border-top: 1px solid var(--light-2, #eee);
}

.roi-estimator__accordion-intro {
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-3, #666);
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    grid-column: 1 / -1;
}

.roi-estimator__accordion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

.roi-estimator__accordion-grid input {
    box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────
   Assessment includes (now in right column below snapshot)
───────────────────────────────────────────────────────────── */
.roi-estimator__assessment-includes {
    margin-top: 0;
    padding: 1.25rem 1.5rem;
    background-color: var(--light-2, #f5f5f5);
    border-radius: var(--border-radius-default, 12px);
}

.roi-estimator__assessment-heading {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.roi-estimator__assessment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}

.roi-estimator__assessment-list li {
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-2, #333);
    padding-left: 1rem;
    position: relative;
    line-height: 1.4;
}

.roi-estimator__assessment-list li::before {
    content: '\2022';
    color: var(--accent-1, #008080);
    position: absolute;
    left: 0;
    font-weight: 700;
}

.roi-estimator__disclaimer {
    grid-column: 1 / -1;
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-2, #333);
    margin: 0.75rem 0 0 0;
    font-style: italic;
}


/* ─────────────────────────────────────────────────────────────
   Hide GF confirmation flash before JS redirect fires
───────────────────────────────────────────────────────────── */
#gform_confirmation_wrapper_9 {
    display: none !important;
}


/* ─────────────────────────────────────────────────────────────
   Gravity Forms submit button — match CTA button styling
───────────────────────────────────────────────────────────── */
.roi-estimator #gform_submit_button_9 {
    background-color: var(--accent-1) !important;
    color: var(--light-1) !important;
    border: none !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 12px 30px !important;
    font-size: var(--text-p) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease-in !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.roi-estimator #gform_submit_button_9:hover,
.roi-estimator #gform_submit_button_9:focus {
    background-color: var(--accent-2) !important;
    color: var(--light-1) !important;
    border: none !important;
}


/* ─────────────────────────────────────────────────────────────
   Calculator submit button
───────────────────────────────────────────────────────────── */
.roi-estimator__actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.roi-estimator__submit {
    align-items: center;
    background-color: var(--accent-1);
    color: var(--light-1);
    display: inline-flex;
    font-size: var(--text-p);
    justify-content: center;
    text-align: center;
    border-radius: var(--border-radius-sm);
    padding: 12px 30px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in 0s;
}

.roi-estimator__submit:hover,
.roi-estimator__submit:focus {
    background-color: var(--accent-2);
    color: var(--light-1);
    text-decoration: none;
    border: none;
}


/* ─────────────────────────────────────────────────────────────
   Three-column calculator layout (desktop)
   Left: assessment includes. Middle: form. Right: snapshot panel.
   On tablet: assessment full width top, then form + snapshot.
   On mobile: assessment full width, form full width, snapshot hidden.
───────────────────────────────────────────────────────────── */
.roi-estimator__calculator-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.roi-estimator__calculator-left {
    flex: 0 0 240px;
    width: 240px;
    align-self: flex-start;
    position: sticky;
    top: 3rem;
}

.roi-estimator__calculator-middle {
    flex: 1 1 0;
    min-width: 0;
}

.roi-estimator__calculator-right {
    flex: 0 0 240px;
    width: 240px;
    overflow: visible;
    align-self: flex-start;
    position: sticky;
    top: 3rem;
}

/* Ensure GenerateBlocks wrappers don't clip sticky positioning */
.gb-element-862a0012,
.gb-element-2ed46010,
.gb-element-ba471311,
.section_default_0-x-x-x,
.section_inner-center {
    overflow: visible !important;
}


/* ─────────────────────────────────────────────────────────────
   Snapshot panel (right column)
───────────────────────────────────────────────────────────── */
.roi-estimator__snapshot {
    background-color: var(--light-2, #f5f5f5);
    border-radius: var(--border-radius-default, 12px);
    padding: 1.25rem 1.5rem;
}

.roi-estimator__snapshot-heading {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
    padding-bottom: 0;
    border-bottom: none;
}

.roi-estimator__snapshot-subtext {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-3, #666);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.roi-estimator__snapshot-card {
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background-color: var(--light-1, #fff);
    border-radius: var(--border-radius-default, 12px);
    border-top: 2px solid var(--accent-1, #008080);
    border-bottom: none;
}

.roi-estimator__snapshot-card:last-child {
    margin-bottom: 0;
    padding-bottom: 1rem;
}

.roi-estimator__snapshot-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--dark-2, #333);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roi-estimator__snapshot-value {
    font-size: var(--text-xl, 1.5rem);
    font-weight: 700;
    color: var(--accent-1, #008080);
    line-height: 1.1;
    margin-bottom: 0.35rem;
    transition: color 0.2s ease;
}

.roi-estimator__snapshot-note {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-2, #333);
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   Page 2: Teaser heading and intro
───────────────────────────────────────────────────────────── */
.roi-estimator__teaser {
    margin-bottom: 2rem;
}

.roi-estimator__teaser-heading {
    font-size: var(--text-lg, 1.5rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.roi-estimator__teaser-intro {
    font-size: var(--text-p, 0.9375rem);
    color: var(--dark-2, #333);
    margin: 0 0 2rem 0;
}


/* ─────────────────────────────────────────────────────────────
   Page 2: Operational Summary strip
───────────────────────────────────────────────────────────── */
.roi-estimator__teaser-strip {
    background-color: var(--light-2, #f5f5f5);
    border-radius: var(--border-radius-default, 12px);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.roi-estimator__teaser-strip .roi-estimator__section-label {
    color: var(--dark-1, #1a1a1a);
    border-left-color: var(--accent-1, #008080);
    margin-top: 0;
}

.roi-estimator__teaser-scores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.roi-estimator__teaser-score {
    padding: 1rem 1.25rem;
    background-color: var(--light-1, #fff);
    border-radius: var(--border-radius-default, 12px);
    border-top: 2px solid var(--accent-1, #008080);
}

.roi-estimator__teaser-score-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--dark-2, #333);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.roi-estimator__teaser-score-value {
    font-size: var(--text-xl, 1.5rem);
    font-weight: 700;
    color: var(--accent-1, #008080);
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.roi-estimator__teaser-score-note {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-2, #333);
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   Page 2: Form gate heading and intro
───────────────────────────────────────────────────────────── */
.roi-estimator__form-gate-heading {
    font-size: var(--text-md, 1.125rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    margin: 0 0 0.5rem 0;
}

.roi-estimator__form-gate-intro {
    font-size: var(--text-p, 0.9375rem);
    color: var(--dark-2, #333);
    margin: 0 0 1.5rem 0;
}


/* ─────────────────────────────────────────────────────────────
   Results (Step 3)
───────────────────────────────────────────────────────────── */
.roi-estimator__results-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.roi-estimator__result-card {
    flex: 1 1 200px;
    padding: 1.25rem 1.5rem;
    background-color: var(--light-2, #f5f5f5);
    border-radius: var(--border-radius-default, 12px);
    border-top: 3px solid var(--light-3, #ddd);
}

.roi-estimator__result-card--highlight {
    border-top-color: var(--accent-1, #008080);
    background-color: var(--light-1, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.roi-estimator__result-label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--dark-2, #333);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.roi-estimator__result-value {
    font-size: var(--text-xl, 1.5rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.roi-estimator__result-card--highlight .roi-estimator__result-value {
    color: var(--accent-1, #008080);
}

.roi-estimator__result-note {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-3, #666);
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   Recalculate / Print links (Step 3 footer)
───────────────────────────────────────────────────────────── */
.roi-estimator__recalculate {
    margin-top: 2.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.roi-estimator__recalculate-link {
    font-size: var(--text-sm, 0.875rem);
    color: var(--accent-1, #008080);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s ease;
}

.roi-estimator__recalculate-link:hover,
.roi-estimator__recalculate-link:focus {
    color: var(--accent-2, #006666);
}

.roi-estimator__recalculate-divider {
    color: var(--dark-3, #999);
    font-size: var(--text-sm, 0.875rem);
    user-select: none;
}


/* ─────────────────────────────────────────────────────────────
   Print step (?step=print) — screen preview styles
   The report pages are visible on screen before print dialog fires.
   Each .roi-estimator__report-page becomes a printed page.
───────────────────────────────────────────────────────────── */
.roi-estimator__step[data-step="print"].roi-estimator__step--active ~ *,
body:has(.roi-estimator__step[data-step="print"].roi-estimator__step--active) .gb-site-header,
body:has(.roi-estimator__step[data-step="print"].roi-estimator__step--active) .site-footer,
body:has(.roi-estimator__step[data-step="print"].roi-estimator__step--active) .generate-back-to-top,
body:has(.roi-estimator__step[data-step="print"].roi-estimator__step--active) #hubspot-messages-iframe-container,
body:has(.roi-estimator__step[data-step="print"].roi-estimator__step--active) #flexiblecookies_container {
    display: none !important;
}

.roi-estimator__report {
    font-family: inherit;
    color: var(--dark-1, #1a1a1a);
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.roi-estimator__report-page {
    padding: 3rem;
    margin-bottom: 2rem;
    border: 1px solid var(--light-2, #eee);
    border-radius: var(--border-radius-default, 12px);
    background: var(--light-1, #fff);
    break-inside: avoid;
}

/* Cover page */
.roi-estimator__report-page--cover {
    display: flex;
    flex-direction: column;
    min-height: 500px;
    background-color: var(--dark-1, #1a1a1a);
    color: var(--light-1, #fff);
    border: none;
    border-radius: var(--border-radius-default, 12px);
}

.roi-estimator__report-logo {
    margin-bottom: 3rem;
    filter: brightness(0) invert(1);
}

.roi-estimator__report-cover-content {
    flex: 1;
}

.roi-estimator__report-cover-title {
    font-size: var(--text-h3, 2rem);
    font-weight: 700;
    color: var(--light-1, #fff);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.roi-estimator__report-cover-subtitle {
    font-size: var(--text-md, 1.125rem);
    color: var(--accent-1, #008080);
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.roi-estimator__report-cover-description {
    font-size: var(--text-p, 0.9375rem);
    color: rgba(255,255,255,0.75);
    margin: 0 0 2.5rem 0;
    max-width: 500px;
}

.roi-estimator__report-cover-meta {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 1.5rem;
    margin-bottom: 2rem;
}

.roi-estimator__report-cover-meta-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-sm, 0.875rem);
}

.roi-estimator__report-cover-meta-label {
    color: rgba(255,255,255,0.5);
    min-width: 110px;
}

.roi-estimator__report-cover-meta-value {
    color: var(--light-1, #fff);
    font-weight: 600;
}

.roi-estimator__report-cover-disclaimer {
    font-size: var(--text-xs, 0.75rem);
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1rem;
}

/* Page header (pages 2-5) */
.roi-estimator__report-page-header {
    font-size: var(--text-md, 1.125rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    padding-left: 0.75rem;
    border-left: 3px solid var(--accent-1, #008080);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Executive summary snapshot */
.roi-estimator__report-snapshot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.roi-estimator__report-snapshot-item {
    padding: 1rem 1.25rem;
    background-color: var(--light-2, #f5f5f5);
    border-radius: var(--border-radius-default, 12px);
    border-top: 2px solid var(--accent-1, #008080);
}

.roi-estimator__report-snapshot-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--dark-3, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.roi-estimator__report-snapshot-value {
    font-size: var(--text-xl, 1.5rem);
    font-weight: 700;
    color: var(--dark-1, #1a1a1a);
    line-height: 1.1;
}

.roi-estimator__report-snapshot-denom {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: var(--dark-3, #666);
}

/* Dynamic executive summary text */
.roi-estimator__report-summary p {
    font-size: var(--text-p, 0.9375rem);
    color: var(--dark-2, #333);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.roi-estimator__report-summary p:last-child {
    margin-bottom: 0;
}

/* Metric rows (pages 3-4) */
.roi-estimator__report-metric {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--light-2, #eee);
}

.roi-estimator__report-metric:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.roi-estimator__report-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.roi-estimator__report-metric-label {
    font-size: var(--text-p, 0.9375rem);
    font-weight: 600;
    color: var(--dark-1, #1a1a1a);
}

.roi-estimator__report-metric-value {
    font-size: var(--text-lg, 1.375rem);
    font-weight: 700;
    color: var(--accent-1, #008080);
    white-space: nowrap;
}

.roi-estimator__report-metric-interpretation {
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-2, #333);
    margin: 0;
    line-height: 1.5;
}

/* Next steps (page 5) */
.roi-estimator__report-next-heading {
    font-size: var(--text-md, 1.125rem);
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.roi-estimator__report-next-copy {
    font-size: var(--text-p, 0.9375rem);
    color: var(--dark-2, #333);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.roi-estimator__report-next-ctas {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.roi-estimator__report-next-cta {
    flex: 1;
    padding: 1rem 1.25rem;
    background-color: var(--light-2, #f5f5f5);
    border-radius: var(--border-radius-default, 12px);
    border-left: 3px solid var(--accent-1, #008080);
}

.roi-estimator__report-next-cta strong {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-1, #1a1a1a);
    margin-bottom: 0.25rem;
}

.roi-estimator__report-next-cta p {
    margin: 0;
}

.roi-estimator__report-next-cta a {
    font-size: var(--text-xs, 0.75rem);
}

.roi-estimator__report-next-resources {
    font-size: var(--text-sm, 0.875rem);
    color: var(--dark-2, #333);
    line-height: 1.6;
    margin: 0;
}

.roi-estimator__report-footer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-2, #eee);
}

.roi-estimator__report-footer p {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-2, #333);
    margin: 0 0 0.25rem 0;
}

.roi-estimator__report-footer p:last-child {
    margin-bottom: 0;
}

.roi-estimator__print-disclaimer {
    font-size: var(--text-xs, 0.75rem);
    color: var(--dark-3, #999);
    margin-top: 2rem;
    font-style: italic;
}


/* ─────────────────────────────────────────────────────────────
   Print logo — hidden on screen by default, visible in print only
───────────────────────────────────────────────────────────── */
.roi-estimator__print-logo,
.roi-estimator__print-headline {
    display: none;
}


/* ─────────────────────────────────────────────────────────────
   Tablet — assessment full width on top, form + snapshot side by side
───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {

    .roi-estimator__calculator-layout {
        flex-wrap: wrap;
    }

    .roi-estimator__calculator-left {
        flex: 1 1 100%;
        width: 100%;
        position: static;
    }

    .roi-estimator__calculator-middle {
        flex: 1 1 0;
        min-width: 0;
    }

    .roi-estimator__calculator-right {
        flex: 0 0 240px;
        width: 240px;
    }

    .roi-estimator__form {
        grid-template-columns: 1fr;
    }

    .roi-estimator__assessment-list {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem 1rem;
    }
}


/* ─────────────────────────────────────────────────────────────
   Mobile — single column on mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .roi-estimator__calculator-layout {
        flex-wrap: wrap;
    }

    .roi-estimator__calculator-left {
        flex: 1 1 100%;
        width: 100%;
        position: static;
    }

    .roi-estimator__calculator-middle {
        flex: 1 1 100%;
        width: 100%;
    }

    .roi-estimator__calculator-right {
        display: none;
    }

    .roi-estimator__form {
        grid-template-columns: 1fr;
    }

    .roi-estimator__teaser-scores {
        grid-template-columns: 1fr;
    }

    .roi-estimator__submit {
        width: 100%;
    }

    .roi-estimator__teaser-scores,
    .roi-estimator__results-grid {
        flex-direction: column;
    }

    .roi-estimator__teaser-score,
    .roi-estimator__result-card {
        flex: 1 1 100%;
    }
}


/* ─────────────────────────────────────────────────────────────
   Print styles
   Hides all site chrome, renders just the results in greyscale.
   A meshIQ logo and page title are injected via CSS ::before
   on the results wrapper so no extra HTML is needed.
───────────────────────────────────────────────────────────── */
@media print {

    /* Hide site chrome */
    #wpadminbar,
    .gb-site-header,
    .site-header,
    .site-footer,
    .generate-back-to-top,
    .gb-element-7bd0c31,
    .gb-element-8341112,
    #hubspot-messages-iframe-container,
    [id*="hubspot"],
    [class*="hubspot"],
    [id*="hs-"],
    [class*="hs-"],
    #flexiblecookies_container,
    #flexiblecookies_settings_background,
    #flexiblecookies_settings_container,
    .flexiblecookies_open_settings_button,
    .gp-modal,
    .gp-search-modal,
    #trdflame,
    iframe,
    [id*="trendemon"],
    [class*="trendemon"],
    [id*="trd-"],
    [class*="trd-"],
    #fb-root {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Reset layout wrappers */
    html,
    body,
    .body-wrapper,
    #page,
    #content,
    #primary,
    #main,
    .inside-article,
    .entry-content,
    .section_default,
    .section_inner-center,
    .gb-element-2ed46010,
    .gb-element-ba471311,
    .gb-element-862a0012 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background: none !important;
    }

    /* Hide all steps except print */
    .roi-estimator__step {
        display: none !important;
        position: absolute !important;
        left: -9999px !important;
        visibility: hidden !important;
    }

    .roi-estimator__step--active {
        display: block !important;
        position: static !important;
        left: auto !important;
        visibility: visible !important;
    }

    /* Reset report wrapper */
    .roi-estimator {
        overflow: visible !important;
        width: 100% !important;
        margin: 0 !important;
        position: static !important;
    }

    .roi-estimator__report {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    /* Each report page = one printed page */
    .roi-estimator__report-page {
        break-before: page;
        break-inside: avoid;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

    .roi-estimator__report-page:first-child {
        break-before: auto;
    }

    /* Cover page print */
    .roi-estimator__report-page--cover {
        min-height: auto;
        background-color: #1a1a1a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 2cm;
    }

    /* Interior pages */
    .roi-estimator__report-page:not(.roi-estimator__report-page--cover) {
        padding: 1.5cm 2cm;
    }

    /* Metric values */
    .roi-estimator__report-metric-value {
        color: #000 !important;
    }

    /* Page setup */
    @page {
        size: A4 portrait;
        margin: 0;
    }
}