/*
 * Services page: page-level layout the shared library does not provide
 * (full-width section bands, responsive split/grid arrangements, the steps
 * list, illustration cards, the reviews carousel, and the situations ticker). Component appearance
 * (cards, buttons, labels, chips, tables, disclosures, stats) stays in the
 * shared bundle; this file only arranges it, using public tokens.
 */

.services-page-block {
    container-type: inline-size;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-body);
}

/* Section bands */
.services-page-block .services-page__section {
    padding-block: var(--clvr-space-12);
    /* Clip sideways overflow at the band edge (a closed tooltip's popup can sit past it on phones). */
    overflow-x: clip;
    background: var(--clvr-color-background);
}

.services-page-block .services-page__section--bg-muted {
    background: var(--clvr-color-surface-muted);
}

.services-page-block .services-page__section--bg-band {
    background: var(--clvr-color-brand-band);
}

.services-page-block .services-page__section--logos {
    padding-block: var(--clvr-space-8);
}

.services-page-block .services-page__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--clvr-space-8);
}

/* Section header */
.services-page-block .services-page__header {
    display: grid;
    gap: var(--clvr-space-3);
}

.services-page-block .services-page__eyebrow {
    margin: 0;
}

.services-page-block .services-page__heading {
    margin: 0;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    line-height: 1.2;
}

.services-page-block .services-page__intro,
.services-page-block .services-page__body,
.services-page-block .services-page__footer,
.services-page-block .services-page__step-copy {
    color: var(--clvr-color-text-muted);
    line-height: 1.65;
}

.services-page-block .services-page__intro > :first-child,
.services-page-block .services-page__body > :first-child,
.services-page-block .services-page__footer > :first-child,
.services-page-block .services-page__step-copy > :first-child,
.services-page-block .services-page__card-copy > :first-child {
    margin-top: 0;
}

.services-page-block .services-page__intro > :last-child,
.services-page-block .services-page__body > :last-child,
.services-page-block .services-page__footer > :last-child,
.services-page-block .services-page__step-copy > :last-child,
.services-page-block .services-page__card-copy > :last-child {
    margin-bottom: 0;
}

.services-page-block .services-page__intro a,
.services-page-block .services-page__body a,
.services-page-block .services-page__footer a,
.services-page-block .services-page__step-copy a,
.services-page-block .services-page__card-copy a,
.services-page-block .services-page__cite a,
.services-page-block .clvr-disclosure__body a {
    color: var(--clvr-color-link);
}

.services-page-block .services-page__intro strong,
.services-page-block .services-page__body strong,
.services-page-block .services-page__footer strong,
.services-page-block .services-page__step-copy strong {
    color: var(--clvr-color-text);
}

.services-page-block .services-page__footer,
.services-page-block .services-page__note,
.services-page-block .services-page__footnote {
    margin: 0;
}

/* Buttons and actions */
.services-page-block .services-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clvr-space-3);
}

.services-page-block .services-page__actions:empty {
    display: none;
}

.services-page-block .services-page__button,
.services-page-block .services-page__zip-submit {
    min-height: 2.75rem;
    padding-inline: var(--clvr-space-4);
    text-decoration: none;
}

.services-page-block .clvr-button .clvr-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* Media */
.services-page-block .services-page__media {
    margin: 0;
}

.services-page-block .services-page__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--clvr-radius-lg);
    box-shadow: var(--clvr-shadow-sm);
}

/* Two-column arrangements: hero, stat, split, closing CTA */
.services-page-block .services-page__hero,
.services-page-block .services-page__stat,
.services-page-block .services-page__split,
.services-page-block .services-page__cta {
    display: grid;
    gap: var(--clvr-space-8);
    align-items: center;
}

.services-page-block .services-page__stat-copy,
.services-page-block .services-page__split-copy {
    display: grid;
    gap: var(--clvr-space-6);
}

@container (min-width: 52rem) {
    .services-page-block .services-page__hero--split {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--clvr-space-12);
    }

    .services-page-block .services-page__stat--split,
    .services-page-block .services-page__split--right,
    .services-page-block .services-page__split--left {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--clvr-space-12);
    }

    .services-page-block .services-page__split--left .services-page__media {
        order: -1;
    }
}

/* ZIP form */
.services-page-block .services-page__form-card {
    padding: var(--clvr-space-6);
    box-shadow: var(--clvr-shadow-lg);
}

/* position: relative contains the visually hidden field label. */
.services-page-block .services-page__zip {
    position: relative;
    display: grid;
    gap: var(--clvr-space-2);
    margin: 0;
}

.services-page-block .services-page__zip-note {
    text-align: start;
}

.services-page-block .services-page__zip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--clvr-space-2);
}

.services-page-block .services-page__zip-field {
    flex: 1 1 12rem;
    padding-inline-end: var(--clvr-space-3);
}

.services-page-block .services-page__zip-submit {
    flex: 1 1 auto;
}

.services-page-block .services-page__zip-note {
    min-height: 1.25rem;
}

/* With no note text, the status line takes no room until a ZIP message appears. */
.services-page-block .services-page__zip-note:empty {
    min-height: 0;
}

.services-page-block .services-page__zip:has(.services-page__zip-note:empty) {
    row-gap: 0;
}

.services-page-block .services-page__editor-note {
    margin: 0;
    padding: var(--clvr-space-3);
    border: 1px dashed var(--clvr-color-border);
    border-radius: var(--clvr-radius-md);
    color: var(--clvr-color-text-muted);
}

/* Highlighted stat */
/* The number itself uses the shared headline-metric style (clvr-topic-explorer__lead-value).
   Without an image the stat stands alone, so it is centered. */
.services-page-block .services-page__stat:not(.services-page__stat--split) {
    justify-items: center;
    text-align: center;
}

.services-page-block .services-page__stat:not(.services-page__stat--split) .services-page__actions {
    justify-content: center;
}

.services-page-block .services-page__stat-text {
    margin: 0;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    line-height: 1.45;
}

/* Card grid */
.services-page-block .services-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--clvr-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 40rem) {
    .services-page-block .services-page__grid--2,
    .services-page-block .services-page__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 60rem) {
    .services-page-block .services-page__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-page-block .services-page__grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.services-page-block .services-page__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--clvr-space-3);
    padding: var(--clvr-space-6);
}

.services-page-block .services-page__card .clvr-card__copy {
    margin: 0;
}

.services-page-block .services-page__card-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface-muted);
}

.services-page-block .services-page__card-meta {
    text-align: start;
}

/* Optional card button (e.g. pre-approval link) sits at the foot of its card so side-by-side cards line up. */
.services-page-block .services-page__card > .services-page__button {
    margin-block-start: auto;
}

/* In a card with a button, its small print and button form one foot: the visual follows the text,
   the spare space sits above the small print, and the small print stays right above the button. */
.services-page-block .services-page__card:has(> .services-page__button) .services-page__card-visual {
    margin-top: 0;
}

.services-page-block .services-page__card > .services-page__card-meta:has(+ .services-page__button) {
    margin-block-start: auto;
}

.services-page-block .services-page__card > .services-page__card-meta + .services-page__button {
    margin-block-start: 0;
}

/* Steps */
.services-page-block .services-page__step-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--clvr-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-page-block .services-page__step {
    display: grid;
    align-content: start;
    gap: var(--clvr-space-4);
}

.services-page-block .services-page__step-text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--clvr-space-4);
}

.services-page-block .services-page__step-number {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-secondary);
    color: var(--clvr-color-link);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    line-height: 1;
}

.services-page-block .services-page__step-body {
    display: grid;
    align-content: start;
    gap: var(--clvr-space-2);
    padding-top: var(--clvr-space-1);
}

/* With visuals each step becomes a column: a tinted stage on top, text below.
   Subgrid keeps every stage in a row the same height. */
.services-page-block .services-page__step-list--visual .services-page__step {
    grid-row: span 2;
    grid-template-rows: subgrid;
    padding: var(--clvr-space-3) var(--clvr-space-3) var(--clvr-space-6);
    border: 1px solid var(--clvr-color-border-card);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-card);
}

.services-page-block .services-page__step-list--visual .services-page__step-text {
    padding-inline: var(--clvr-space-3);
}

.services-page-block .services-page__step-visual {
    display: grid;
    min-height: 15rem;
    place-items: center;
    padding: var(--clvr-space-6);
    border-radius: var(--clvr-radius-md);
    background: linear-gradient(180deg, var(--clvr-color-label-info-bg), var(--clvr-color-surface-muted));
}

.services-page-block .services-page__step--tint-speed .services-page__step-visual {
    background: linear-gradient(180deg, var(--clvr-color-label-speed-bg), var(--clvr-color-surface-muted));
}

.services-page-block .services-page__step--tint-positive .services-page__step-visual {
    background: linear-gradient(180deg, var(--clvr-color-label-positive-bg), var(--clvr-color-surface-muted));
}

.services-page-block .services-page__step--tint-speed .services-page__step-number {
    background: var(--clvr-color-label-speed-bg);
    color: var(--clvr-color-label-speed-text);
}

.services-page-block .services-page__step--tint-positive .services-page__step-number {
    background: var(--clvr-color-label-positive-bg);
    color: var(--clvr-color-label-positive-text);
}



.services-page-block .services-page__step-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--clvr-radius-md);
}

/* A drawn phone-screen illustration (as on the start page) rises from the bottom of its
   stage and is cut off there, so it fills the stage instead of floating in padding. */
.services-page-block .services-page__step-visual:has(> .services-page__step-img) {
    place-items: end center;
    padding: var(--clvr-space-4) var(--clvr-space-4) 0;
    overflow: hidden;
}

.services-page-block .services-page__step-visual > .services-page__step-img {
    border-radius: 0;
}

/* Illustration cards */
.services-page-block .services-page__visual {
    display: grid;
    width: 100%;
    gap: var(--clvr-space-3);
}

.services-page-block .services-page__mini {
    display: grid;
    gap: var(--clvr-space-2);
    box-shadow: var(--clvr-shadow-sm);
}

.services-page-block .services-page__mini-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--clvr-space-2);
}

.services-page-block .services-page__mini-value {
    justify-items: start;
    text-align: start;
}

.services-page-block .services-page__mini-caption {
    margin: 0;
}

.services-page-block .services-page__mini-lines {
    display: grid;
    gap: var(--clvr-space-2);
    margin: 0;
    padding: var(--clvr-space-3) 0 0;
    border-top: 1px solid var(--clvr-color-border-subtle);
    list-style: none;
}

.services-page-block .services-page__mini-lines li {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-space-2);
    color: var(--clvr-color-text-muted);
    line-height: 1.45;
}

/* Several cards: compact rows (tag left, number right). */
.services-page-block .services-page__visual--stack .services-page__mini {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--clvr-space-3) var(--clvr-space-4);
}

.services-page-block .services-page__visual--stack .services-page__mini-value {
    justify-items: end;
}

.services-page-block .services-page__card-visual {
    padding: var(--clvr-space-4);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface-muted);
}

/* Reveal: script-view.js arms the visual, then marks it in view once. Without JS
   (or with reduced motion) cards simply show. Delays are multiples of the shared motion step. */
.services-page-block .services-page__visual.is-armed:not(.is-in-view) .services-page__mini {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .services-page-block .services-page__visual.is-in-view .services-page__mini {
        animation-name: services-page-block-rise;
        animation-duration: calc(var(--clvr-duration-normal) * 3);
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }

    .services-page-block .services-page__visual.is-in-view .services-page__mini:nth-child(2) {
        animation-delay: calc(var(--clvr-duration-normal) * 1.5);
    }

    .services-page-block .services-page__visual.is-in-view .services-page__mini:nth-child(3) {
        animation-delay: calc(var(--clvr-duration-normal) * 3);
    }

    .services-page-block .services-page__visual.is-in-view .services-page__mini:nth-child(4) {
        animation-delay: calc(var(--clvr-duration-normal) * 4.5);
    }

    .services-page-block .services-page__visual.is-in-view .services-page__mini--highlight {
        animation-name: services-page-block-pick;
        animation-duration: calc(var(--clvr-duration-normal) * 4);
    }
}

@keyframes services-page-block-rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes services-page-block-pick {
    0% {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* Stats row */
.services-page-block .services-page__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
    gap: var(--clvr-space-3);
}

/* Checklist */
.services-page-block .services-page__checks {
    display: grid;
    gap: var(--clvr-space-3) var(--clvr-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 40rem) {
    .services-page-block .services-page__checks--2,
    .services-page-block .services-page__checks--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 60rem) {
    .services-page-block .services-page__checks--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.services-page-block .services-page__checks li {
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-space-3);
    color: var(--clvr-color-text);
    line-height: 1.5;
}

.services-page-block .services-page__check-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--clvr-color-valid);
}

/* Situations: static chips, or a ticker with a pause button */
.services-page-block .services-page__chips {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--clvr-space-3);
    justify-items: start;
}

.services-page-block .services-page__chips-label {
    margin: 0;
}

.services-page-block .services-page__ticker-viewport {
    width: 100%;
    overflow-x: clip;
}

/* Fade the ticker's edges so tags slide in and out instead of being cut off. */
.services-page-block .services-page__chips--ticker .services-page__ticker-viewport {
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.services-page-block .services-page__chip-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-page-block .services-page__chip-list--clone {
    display: none;
}

.services-page-block .services-page__chips--ticker .services-page__ticker {
    display: flex;
    width: max-content;
    /* Ticker speed: one loop every 225 shared motion steps (45s at the default token). */
    animation-name: services-page-block-ticker;
    animation-duration: calc(var(--clvr-duration-normal) * 225);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Equal gap and trailing padding keep the two copies seamless when the loop restarts. */
.services-page-block .services-page__chips--ticker .services-page__chip-list {
    flex-wrap: nowrap;
    gap: var(--clvr-space-2);
    padding-inline-end: var(--clvr-space-2);
}

.services-page-block .services-page__chips--ticker .services-page__chip-list--clone {
    display: flex;
}

.services-page-block .services-page__chips--ticker .clvr-chip {
    white-space: nowrap;
}

.services-page-block .services-page__chips--ticker:hover .services-page__ticker,
.services-page-block .services-page__chips--ticker:focus-within .services-page__ticker,
.services-page-block .services-page__chips--ticker[data-paused] .services-page__ticker {
    animation-play-state: paused;
}

.services-page-block .services-page__ticker-toggle {
    min-height: 2.25rem;
}

.services-page-block .services-page__ticker-icon {
    display: inline-flex;
}

.services-page-block .services-page__chips--ticker[data-paused] .services-page__ticker-icon--pause,
.services-page-block .services-page__chips--ticker:not([data-paused]) .services-page__ticker-icon--play {
    display: none;
}

@keyframes services-page-block-ticker {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-page-block .services-page__chips--ticker .services-page__ticker {
        width: auto;
        animation: none;
    }

    .services-page-block .services-page__chips--ticker .services-page__chip-list {
        flex-wrap: wrap;
    }

    .services-page-block .services-page__chips--ticker .services-page__chip-list--clone,
    .services-page-block .services-page__ticker-toggle {
        display: none;
    }
}

/* Comparison table */
.services-page-block .services-page__table .clvr-table {
    width: 100%;
}

.services-page-block .services-page__table th,
.services-page-block .services-page__table td {
    width: 50%;
}

.services-page-block .services-page__table .services-page__col-highlight {
    background: var(--clvr-color-secondary);
    color: var(--clvr-color-text);
}

/* Column headings read as headings (normal case, heading face), with Clever's on brand blue. */
.services-page-block .services-page__table thead th {
    padding-block: var(--clvr-space-4);
    background: var(--clvr-color-surface-muted);
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    letter-spacing: normal;
    text-transform: none;
}

.services-page-block .services-page__table thead th.services-page__col-highlight {
    background: var(--clvr-color-primary);
    color: var(--clvr-color-text-inverse);
}

.services-page-block .services-page__table thead .clvr-card__title {
    margin: 0;
    color: inherit;
}

/* Sentence-style stat callouts (checklist): label above, then a row of short sentences, each built around a big number. */
.services-page-block .services-page__stats-label {
    margin: var(--clvr-space-4) 0 0;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.services-page-block .services-page__callouts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--clvr-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 40rem) {
    .services-page-block .services-page__callouts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.services-page-block .services-page__callout {
    display: grid;
    align-content: start;
    gap: var(--clvr-space-1);
    margin: 0;
    padding: var(--clvr-space-4);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-surface-muted);
    color: var(--clvr-color-text-muted);
    line-height: 1.35;
}

/* Plain stats: just the number and its label, no boxes, left-aligned with the heading and list above. */
.services-page-block .services-page__callouts--plain {
    gap: var(--clvr-space-4);
    margin-top: var(--clvr-space-4);
}

/* The number sits in the headline style's inner span (its smaller size); the outer element
   adds no line height of its own, so the row is as tall as the number. */
.services-page-block .services-page__callouts--plain .services-page__callout-value {
    line-height: 0;
}

.services-page-block .services-page__callouts--plain .services-page__callout-value > span {
    line-height: 1.1;
    white-space: nowrap;
}

.services-page-block .services-page__callouts--plain .services-page__callout {
    justify-items: start;
    padding: 0;
    background: none;
    text-align: start;
}

.services-page-block .services-page__callouts--plain .services-page__callout-value {
    justify-items: start;
    color: var(--clvr-color-text);
    text-align: start;
}

.services-page-block .services-page__callout-value {
    justify-items: start;
    color: var(--clvr-color-primary);
    text-align: start;
}

.services-page-block .services-page__table:focus-visible,
.services-page-block .services-page__carousel-track:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 2px;
}

/* Reviews carousel */
.services-page-block .services-page__carousel {
    display: grid;
    gap: var(--clvr-space-4);
}

.services-page-block .services-page__carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--clvr-space-6);
    margin: 0;
    padding: var(--clvr-space-1) var(--clvr-space-1) var(--clvr-space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--clvr-space-1);
    list-style: none;
}

@container (min-width: 40rem) {
    .services-page-block .services-page__carousel-track {
        grid-auto-columns: calc((100% - var(--clvr-space-6)) / 2);
    }
}

@container (min-width: 64rem) {
    .services-page-block .services-page__carousel-track {
        grid-auto-columns: calc((100% - 2 * var(--clvr-space-6)) / 3);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .services-page-block .services-page__carousel-track {
        scroll-behavior: smooth;
    }
}

/* position: relative keeps the visually hidden rating text inside its card (and the scroll track). */
.services-page-block .services-page__review {
    position: relative;
    padding: var(--clvr-space-6);
    scroll-snap-align: start;
}

.services-page-block .services-page__review-figure {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--clvr-space-3);
    margin: 0;
}

.services-page-block .services-page__stars {
    display: flex;
    gap: var(--clvr-space-1);
    margin: 0;
}

.services-page-block .services-page__star {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--clvr-color-border);
}

.services-page-block .services-page__star.is-on {
    color: var(--clvr-color-valid);
    fill: currentColor;
}

/* Stars follow the review's source: Google-style gold stars, Trustpilot-style green squares (closest shared palette colors). */
.services-page-block .services-page__stars--google .services-page__star.is-on {
    color: var(--clvr-color-chart-series-4);
}

.services-page-block .services-page__stars--trustpilot {
    gap: var(--clvr-space-1);
}

.services-page-block .services-page__stars--trustpilot .services-page__star {
    width: 1.5rem;
    height: 1.5rem;
    padding: var(--clvr-space-1);
    background: var(--clvr-color-border);
    color: var(--clvr-color-surface);
    fill: currentColor;
}

.services-page-block .services-page__stars--trustpilot .services-page__star.is-on {
    background: var(--clvr-color-chart-series-2);
    color: var(--clvr-color-surface);
}

/* Reset the host theme's blockquote styling (side rule, serif, larger type). */
.services-page-block .services-page__quote {
    position: static;
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--clvr-color-text-muted);
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    line-height: 1.6;
}

.services-page-block .services-page__quote::before,
.services-page-block .services-page__quote::after {
    content: none;
}

.services-page-block .services-page__quote p {
    margin: 0;
}

/* Long reviews show seven lines until expanded, so one long review can't stretch the whole row. */
.services-page-block .services-page__quote[data-services-clamp]:not(.is-expanded) p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.services-page-block .services-page__more {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--clvr-color-link);
    cursor: pointer;
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    text-decoration: underline;
}

.services-page-block .services-page__more:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 2px;
}

.services-page-block .services-page__cite {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-3);
    text-align: start;
}

.services-page-block .services-page__avatar {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-label-info-bg);
    color: var(--clvr-color-primary);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.services-page-block .services-page__cite-text {
    display: grid;
    gap: var(--clvr-space-1);
}

.services-page-block .services-page__cite-name {
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.services-page-block .services-page__cite-meta {
    text-align: start;
}

.services-page-block .services-page__carousel-controls {
    display: flex;
    justify-content: center;
    gap: var(--clvr-space-2);
}

.services-page-block .services-page__carousel-controls[hidden] {
    display: none;
}

.services-page-block .services-page__carousel-button {
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
}

/* Filtered reviews: chip buttons over a two-column grid (one scroll row on narrow screens). */
.services-page-block .services-page__review-filter {
    display: grid;
    gap: var(--clvr-space-6);
}

.services-page-block .services-page__review-chips {
    flex-wrap: wrap;
    justify-content: center;
}

.services-page-block .services-page__review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--clvr-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The host theme gives list items a margin; the grid gap does the spacing. */
.services-page-block .services-page__review-grid > li {
    margin: 0;
}

.services-page-block .services-page__review-grid > [hidden] {
    display: none;
}

.services-page-block .services-page__review-grid .services-page__quote[data-services-clamp]:not(.is-expanded) p {
    -webkit-line-clamp: 4;
}

.services-page-block .services-page__review-title {
    margin: 0;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

@container (max-width: 40rem) {
    .services-page-block .services-page__review-chips {
        justify-content: flex-start;
    }

    .services-page-block .services-page__review-grid {
        grid-auto-columns: 85%;
        grid-auto-flow: column;
        grid-template-columns: none;
        padding-block-end: var(--clvr-space-3);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
    }

    .services-page-block .services-page__review-grid .services-page__review {
        scroll-snap-align: start;
    }
}

/* Logo strip */
.services-page-block .services-page__logos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--clvr-space-4);
    justify-items: center;
    text-align: center;
}

.services-page-block .services-page__logo-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-space-4) var(--clvr-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-page-block .services-page__logo-img {
    display: block;
    width: auto;
    height: 1.75rem;
}

.services-page-block .services-page__logo-name {
    color: var(--clvr-color-text-secondary);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

/* Trust widget area under the hero */
.services-page-block .services-page__trust {
    min-height: 1px;
}

@container (max-width: 40rem) {
    .services-page-block .services-page__section {
        padding-block: var(--clvr-space-10);
    }

    .services-page-block .services-page__card,
    .services-page-block .services-page__review,
    .services-page-block .services-page__form-card {
        padding: var(--clvr-space-4);
    }
}


/* Centered headings for grid-style sections. */
.services-page-block :is(.services-page__section--cards, .services-page__section--steps, .services-page__section--reviews, .services-page__section--faq, .services-page__section--comparison, .services-page__section--savings) .services-page__header {
    justify-items: center;
    text-align: center;
}

.services-page-block :is(.services-page__section--cards, .services-page__section--steps, .services-page__section--reviews, .services-page__section--faq, .services-page__section--comparison, .services-page__section--savings) .services-page__intro {
    margin-inline: auto;
}

.services-page-block :is(.services-page__section--cards, .services-page__section--steps, .services-page__section--reviews, .services-page__section--faq) .services-page__footer,
.services-page-block .services-page__footer--center {
    text-align: center;
}

/* Colored words in headings (*like this*). */
.services-page-block .services-page__accent {
    color: var(--clvr-color-primary);
}

/* Hero: soft brand gradient instead of a flat band. */
.services-page-block .services-page__section--hero.services-page__section--bg-band,
.services-page-block .services-page__section--cta.services-page__section--bg-band {
    padding-block: calc(var(--clvr-space-12) * 2);
    background: linear-gradient(160deg, var(--clvr-color-brand-band) 0%, var(--clvr-color-brand-band) 45%, var(--clvr-color-surface) 100%);
}

/* Dark navy sections (stat, closing CTA). */
.services-page-block .services-page__section--bg-dark {
    background: var(--clvr-color-text);
    color: var(--clvr-color-text-inverse);
}

.services-page-block .services-page__section--bg-dark :is(.services-page__heading, .services-page__stat-text, .services-page__intro, .services-page__body, .services-page__footer, .services-page__stat-value) {
    color: var(--clvr-color-text-inverse);
}

.services-page-block .services-page__section--bg-dark :is(.services-page__note, .services-page__footnote, .services-page__bar-label) {
    color: color-mix(in srgb, var(--clvr-color-text-inverse) 75%, transparent);
}

.services-page-block .services-page__section--bg-dark .services-page__accent {
    color: var(--clvr-color-secondary);
}

/* Comparison bars (stat section). */
.services-page-block .services-page__bars {
    display: grid;
    height: 18rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--clvr-space-6);
    padding-inline: var(--clvr-space-6);
}

.services-page-block .services-page__bar {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--clvr-space-2);
}

.services-page-block .services-page__bar-fill {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: var(--clvr-radius-md) var(--clvr-radius-md) 0 0;
    background: var(--clvr-color-text-secondary);
    transform-origin: bottom;
}

.services-page-block .services-page__bar--low .services-page__bar-fill {
    height: 55%;
}

.services-page-block .services-page__bar--high .services-page__bar-fill {
    height: 78%;
    background: var(--clvr-color-primary-cta);
}

.services-page-block .services-page__bar-gain {
    display: block;
    height: 30%;
    border-radius: var(--clvr-radius-md) var(--clvr-radius-md) 0 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--clvr-color-text-inverse) 60%, transparent);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--clvr-color-text-inverse) 28%, transparent) 0 0.5rem, transparent 0.5rem 1rem);
}

.services-page-block .services-page__bar-label {
    color: var(--clvr-color-text-muted);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.services-page-block .services-page__bar-badge {
    padding: var(--clvr-space-1) var(--clvr-space-3);
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-sm);
    color: var(--clvr-color-success-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

/* Card icons (e.g. commitments), colors cycling through the label palette. */
.services-page-block .services-page__card-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-label-info-bg);
    color: var(--clvr-color-label-info-text);
}

.services-page-block .services-page__card-icon .clvr-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.services-page-block .services-page__card:nth-child(4n + 2) .services-page__card-icon {
    background: var(--clvr-color-label-positive-bg);
    color: var(--clvr-color-label-positive-text);
}

.services-page-block .services-page__card:nth-child(4n + 3) .services-page__card-icon {
    background: var(--clvr-color-label-speed-bg);
    color: var(--clvr-color-label-speed-text);
}

.services-page-block .services-page__card:nth-child(4n + 4) .services-page__card-icon {
    background: var(--clvr-color-label-conversion-bg);
    color: var(--clvr-color-label-conversion-text);
}

/* Illustration panels tinted to match their card's tag. */
.services-page-block .services-page__card--tint-info .services-page__card-visual {
    background: linear-gradient(180deg, var(--clvr-color-label-info-bg), var(--clvr-color-surface));
}

.services-page-block .services-page__card--tint-positive .services-page__card-visual {
    background: linear-gradient(180deg, var(--clvr-color-label-positive-bg), var(--clvr-color-surface));
}

.services-page-block .services-page__card--tint-speed .services-page__card-visual {
    background: linear-gradient(180deg, var(--clvr-color-label-speed-bg), var(--clvr-color-surface));
}

/* Question card ("What type of property are you selling?"). */
.services-page-block .services-page__phone {
    display: grid;
    width: 100%;
    gap: var(--clvr-space-3);
    padding: var(--clvr-space-4);
    border: 1px solid var(--clvr-color-border-card);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-lg);
}

.services-page-block .services-page__phone-question {
    margin: 0;
}

.services-page-block .services-page__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--clvr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-page-block .services-page__tile {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--clvr-space-1);
    padding: var(--clvr-space-2);
    border: 1px solid var(--clvr-color-border-subtle);
    border-radius: var(--clvr-radius-md);
    color: var(--clvr-color-text-muted);
    text-align: center;
}

.services-page-block .services-page__tile.is-selected {
    border-color: var(--clvr-color-primary);
    background: var(--clvr-color-secondary);
    color: var(--clvr-color-link);
}

.services-page-block .services-page__tile-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.services-page-block .services-page__tile-check {
    position: absolute;
    top: calc(var(--clvr-space-2) * -1);
    right: calc(var(--clvr-space-2) * -1);
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-valid);
    color: var(--clvr-color-text-inverse);
}

.services-page-block .services-page__tile-check .clvr-icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* Animated U.S. network map (traced from the explainer video). */
.services-page-block .services-page__map-svg {
    display: block;
    width: 100%;
    height: auto;
}

.services-page-block .services-page__map-g {
    fill: var(--clvr-color-border);
}

.services-page-block .services-page__map-b {
    fill: var(--clvr-color-primary);
}

.services-page-block .services-page__map-c {
    fill: var(--clvr-color-primary-cta);
}

.services-page-block .services-page__map-rings {
    fill: none;
    stroke: var(--clvr-color-valid);
    stroke-width: 2;
    opacity: 0.45;
}

.services-page-block .services-page__map circle {
    transform-box: fill-box;
    transform-origin: center;
}

.services-page-block .services-page__map.is-armed:not(.is-in-view) circle {
    opacity: 0;
}

.services-page-block .services-page__badge {
    margin: 0;
}

.services-page-block .services-page__badge .clvr-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Checklist with a side quote. */
.services-page-block .services-page__checklist,
.services-page-block .services-page__checklist-main {
    display: grid;
    gap: var(--clvr-space-6);
}

@container (min-width: 52rem) {
    .services-page-block .services-page__checklist--side {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--clvr-space-12);
        align-items: center;
    }

    .services-page-block .services-page__checklist--side-left {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .services-page-block .services-page__checklist--side-left .services-page__quote-card {
        order: -1;
    }

    /* The featured quote fills the full height of the checklist beside it, content centered. */
    .services-page-block .services-page__quote-card--feature {
        align-self: stretch;
        align-content: center;
        gap: var(--clvr-space-6);
        padding: var(--clvr-space-10);
    }

    .services-page-block .services-page__checklist--side .services-page__quote-card--feature .services-page__quote-photo {
        width: 11rem;
        height: 11rem;
    }

    .services-page-block .services-page__checklist--side .services-page__quote-card--feature .services-page__quote-mark {
        top: var(--clvr-space-10);
        right: var(--clvr-space-10);
    }


}

.services-page-block .services-page__quote-card {
    display: grid;
    gap: var(--clvr-space-4);
    margin: 0;
    padding: var(--clvr-space-8);
    border-top: 4px solid var(--clvr-color-primary);
    box-shadow: var(--clvr-shadow-lg);
}

.services-page-block .services-page__quote-photo {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: var(--clvr-radius-pill);
    object-fit: cover;
}

/* Featured testimonial: brand gradient, larger photo with a white ring, a big quote mark,
   and the quote in the heading face. */
.services-page-block .services-page__quote-card--feature {
    position: relative;
    gap: var(--clvr-space-4);
    border-top: 0;
    background: linear-gradient(160deg, var(--clvr-color-brand-band) 0%, var(--clvr-color-secondary) 55%, var(--clvr-color-surface) 100%);
}

.services-page-block .services-page__quote-card--feature .services-page__quote-photo {
    width: 8rem;
    height: 8rem;
    border: 4px solid var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-lg);
}

.services-page-block .services-page__quote-mark {
    position: absolute;
    top: var(--clvr-space-8);
    right: var(--clvr-space-8);
    display: inline-flex;
    color: var(--clvr-color-primary);
    opacity: 0.25;
}

.services-page-block .services-page__quote-mark .clvr-icon {
    width: 4rem;
    height: 4rem;
    fill: currentColor;
    stroke: none;
}

.services-page-block .services-page__quote-card--feature .services-page__quote p {
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    line-height: 1.45;
}

.services-page-block .services-page__quote-card--feature .services-page__cite-name {
    color: var(--clvr-color-primary);
}

/* Trustpilot widget area. */
.services-page-block .services-page__trustpilot {
    display: flex;
    justify-content: center;
    text-align: center;
}

.services-page-block .services-page__trustpilot .trustpilot-widget {
    width: 100%;
}

/* Static Trustpilot line, visible until (or unless) the widget script loads. */
.services-page-block .services-page__tp-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-space-2);
    color: var(--clvr-color-text);
    text-decoration: none;
}

.services-page-block .services-page__tp-fallback > span:last-child {
    text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
    .services-page-block .services-page__bars.is-in-view .services-page__bar-fill {
        animation-name: services-page-block-grow;
        animation-duration: calc(var(--clvr-duration-normal) * 5);
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }

    .services-page-block .services-page__bars.is-in-view .services-page__bar--high .services-page__bar-fill {
        animation-delay: calc(var(--clvr-duration-normal) * 2);
    }

    .services-page-block .services-page__bars.is-in-view .services-page__bar-badge {
        animation-name: services-page-block-rise;
        animation-duration: calc(var(--clvr-duration-normal) * 3);
        animation-delay: calc(var(--clvr-duration-normal) * 7);
        animation-fill-mode: both;
    }

    .services-page-block .services-page__map.is-in-view circle {
        animation-name: services-page-block-dot;
        animation-duration: calc(var(--clvr-duration-normal) * 4);
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }

    .services-page-block .services-page__map.is-in-view .services-page__map-d1 circle { animation-delay: calc(var(--clvr-duration-normal) * 1.5); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d2 circle { animation-delay: calc(var(--clvr-duration-normal) * 3); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d3 circle { animation-delay: calc(var(--clvr-duration-normal) * 4.5); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d4 circle { animation-delay: calc(var(--clvr-duration-normal) * 6); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d5 circle { animation-delay: calc(var(--clvr-duration-normal) * 7.5); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d6 circle { animation-delay: calc(var(--clvr-duration-normal) * 9); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d7 circle { animation-delay: calc(var(--clvr-duration-normal) * 10.5); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d8 circle { animation-delay: calc(var(--clvr-duration-normal) * 12); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d9 circle { animation-delay: calc(var(--clvr-duration-normal) * 13.5); }
    .services-page-block .services-page__map.is-in-view .services-page__map-d10 circle { animation-delay: calc(var(--clvr-duration-normal) * 15); }

    /* Rings pulse three times after the map fills, then stop (no endless motion). */
    .services-page-block .services-page__map.is-in-view .services-page__map-rings circle {
        animation-name: services-page-block-ping;
        animation-duration: calc(var(--clvr-duration-normal) * 6);
        animation-delay: calc(var(--clvr-duration-normal) * 17);
        animation-iteration-count: 3;
        animation-fill-mode: both;
    }
}

@keyframes services-page-block-grow {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes services-page-block-dot {
    from {
        opacity: 0;
        transform: scale(0.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes services-page-block-ping {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}


/* Example buttons drawn inside an illustration card (decorative, not clickable). */
.services-page-block .services-page__mini-actions {
    display: grid;
    gap: var(--clvr-space-2);
    padding-top: var(--clvr-space-3);
    border-top: 1px solid var(--clvr-color-border-subtle);
}

.services-page-block .services-page__mini-actions .clvr-button {
    width: 100%;
    min-height: 2.25rem;
    box-sizing: border-box;
    cursor: default;
    pointer-events: none;
}

/* Cards: visuals line up along the bottom once the text above them varies. */
.services-page-block .services-page__card-visual {
    margin-top: auto;
}

/* Two-by-two credentials beside an image. */
.services-page-block .services-page__split .services-page__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Comparison chart and its small print. */
.services-page-block .services-page__chart {
    display: grid;
    gap: var(--clvr-space-4);
}

.services-page-block .services-page__chart-note {
    text-align: center;
}

.services-page-block .services-page__card-title-row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--clvr-space-2);
}

/* Hero: more presence; the rating sits under the title, left-aligned. */
.services-page-block .services-page__hero-copy {
    display: grid;
    gap: var(--clvr-space-6);
}

.services-page-block .services-page__hero .services-page__form-card,
.services-page-block .services-page__cta .services-page__form-card {
    padding: var(--clvr-space-8);
}

.services-page-block .services-page__hero-trust {
    justify-content: flex-start;
    text-align: start;
}

/* Trustpilot hides the review count when its widget is narrow, so it spans the column. */
.services-page-block .services-page__hero-trust .trustpilot-widget {
    width: 100%;
}

/* FAQs: question and answer text match the size of the site's existing FAQ drawers. */
.services-page-block .services-page__faq .clvr-disclosure summary {
    padding-block: var(--clvr-space-4);
}

.services-page-block .services-page__faq-question {
    margin: 0;
}

.services-page-block .services-page__faq .clvr-disclosure__body {
    font-size: inherit;
    line-height: 1.65;
}

/* A section holding only the situations row reads as a slim band. */
.services-page-block .services-page__section--checklist:not(:has(.services-page__checklist)) {
    padding-block: var(--clvr-space-6);
}

/* Stat CTA: a larger button on its own line, with its small print underneath, so it
   holds its own next to the big number and the chart. */
.services-page-block .services-page__stat .services-page__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--clvr-space-2);
    margin-top: var(--clvr-space-2);
}

.services-page-block .services-page__stat:not(.services-page__stat--split) .services-page__actions {
    align-items: center;
}

.services-page-block .services-page__stat .services-page__button {
    min-height: 3.25rem;
    padding-inline: var(--clvr-space-8);
    box-shadow: var(--clvr-shadow-lg);
}

/* Logo strip label ("As seen on") reads as a label, not faint small print. */
.services-page-block .services-page__logos-label {
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

/* Hero product logo: sized below the H1 so it labels the page without competing with it. */
.services-page-block .services-page__brand {
    margin: 0;
}

.services-page-block .services-page__brand-logo {
    display: block;
    width: auto;
    height: 2.25rem;
}


/* Closing CTA: centered, with the form card under the heading. */
.services-page-block .services-page__cta {
    justify-items: center;
    gap: var(--clvr-space-8);
    text-align: center;
}

.services-page-block .services-page__cta .services-page__header {
    justify-items: center;
}

.services-page-block .services-page__cta .services-page__form-card {
    width: 100%;
    /* width-exception: Katy Byrom asked on 2026-10-07 to center the closing CTA; a full-width form card would stretch the ZIP field across the page. */
    max-width: 36rem;
    text-align: start;
}

/* The stat section gets more vertical room so its chart can breathe. (The map section
   uses normal padding: Katy found the doubled padding there read as a gap, 2026-10-08.) */
.services-page-block .services-page__section--stat {
    padding-block: calc(var(--clvr-space-12) * 2);
}

/* A white section right under the hero: the hero's bottom padding already fades into
   white, so a full top padding on top of it reads as an empty band. */
.services-page-block .services-page__section--hero + .services-page__section--bg-default {
    padding-top: var(--clvr-space-6);
}

.services-page-block .services-page__stat-copy {
    gap: var(--clvr-space-8);
}

.services-page-block .services-page__bars {
    height: 22rem;
}

@container (min-width: 52rem) {
    .services-page-block .services-page__split:has(.services-page__map) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}

/* Proof row along the bottom of the hero, in its fade (quote, Trustpilot, figures). Lines divide cells only when there are several. */
.services-page-block .services-page__proofbar {
    margin-top: var(--clvr-space-12);
}

/* With the proof row closing the hero, less empty fade is needed underneath it. */
.services-page-block .services-page__section--hero.services-page__section--bg-band:has(.services-page__proofbar) {
    padding-bottom: var(--clvr-space-12);
}

.services-page-block .services-page__proof {
    display: grid;
}

.services-page-block .services-page__proof > * {
    display: grid;
    align-content: center;
    gap: var(--clvr-space-1);
    margin: 0;
    padding: var(--clvr-space-4);
}

.services-page-block .services-page__proof > * + * {
    border-top: 1px solid var(--clvr-color-border-card);
}

.services-page-block .services-page__proof-quote,
.services-page-block .services-page__proof-quote figcaption {
    text-align: start;
}

.services-page-block .services-page__proof-quote .services-page__quote {
    color: var(--clvr-color-text);
}

/* Value above label, as on a scoreboard; the markup keeps label-then-value for screen readers. */
.services-page-block .services-page__proof-stat {
    grid-template-areas: "value" "label";
}

.services-page-block .services-page__proof-value {
    grid-area: value;
    margin: 0;
    justify-items: start;
    text-align: start;
}

.services-page-block .services-page__proof-label {
    grid-area: label;
    color: var(--clvr-color-text-muted);
}

.services-page-block .services-page__proof-label a {
    color: inherit;
    text-decoration: underline;
}

/* One row on wide screens. Trustpilot's widget goes blank below about 18rem, so its cell keeps a fixed width. */
@container (min-width: 64rem) {
    .services-page-block .services-page__proof {
        display: flex;
    }

    .services-page-block .services-page__proof > * {
        flex: 1 1 0;
        min-width: 0;
        padding: var(--clvr-space-4) var(--clvr-space-6);
    }

    .services-page-block .services-page__proof > * + * {
        border-top: 0;
        border-left: 1px solid var(--clvr-color-border-card);
    }

    .services-page-block .services-page__proof-quote {
        flex-grow: 1.6;
    }

    .services-page-block .services-page__proof-trust {
        flex: 0 0 20rem;
    }

    /* On its own, the widget spans the bar and centers itself; a slimmer bar. */
    .services-page-block .services-page__proof-trust:only-child {
        flex: 1 1 auto;
        padding-block: var(--clvr-space-3);
    }

    /* Figures stay on one line; the quote gives up width instead. */
    .services-page-block .services-page__proof-stat {
        min-width: max-content;
    }
}

/* Stat cards show the number first, label underneath (markup stays label-then-value). */
.services-page-block .services-page__stats .clvr-stat--filled {
    flex-direction: column-reverse;
    justify-content: center;
}

/* Trustpilot rating inside the hero form card, under the button and its note. */
.services-page-block .services-page__form-trust {
    margin-top: var(--clvr-space-2);
}

/* Under the button the widget is supporting detail, so it is drawn slightly smaller. */
.services-page-block .services-page__form-trust:not(.services-page__form-trust--between) {
    scale: 0.85;
    transform-origin: top center;
    /* Scaling leaves the widget's full-size box behind; pull the card edge up to the drawn widget. */
    margin-bottom: calc(var(--clvr-space-2) * -1);
}

.services-page-block .services-page__hero .services-page__form-card:has(.services-page__form-trust:not(.services-page__form-trust--between)) {
    padding-bottom: var(--clvr-space-4);
}

/* Rating line in the form card: left-aligned with the note above it, one line where it fits. */
.services-page-block .services-page__form-rating {
    margin: var(--clvr-space-3) 0 0;
}

.services-page-block .services-page__form-rating .services-page__tp-fallback {
    justify-content: flex-start;
    gap: var(--clvr-space-1) var(--clvr-space-2);
    color: var(--clvr-color-text-muted);
}

.services-page-block .services-page__form-rating .services-page__stars {
    gap: 0;
}

.services-page-block .services-page__form-rating .services-page__star {
    width: 0.875rem;
    height: 0.875rem;
}

/* Trust callout: a short line beside the Trustpilot widget, centered in the hero's fade. */
.services-page-block .services-page__proof-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-space-2) var(--clvr-space-4);
    text-align: center;
}

/* The callout row sits in a slim white pill so it has its own clean background in the fade. */
.services-page-block .services-page__proof:has(.services-page__proof-callout) {
    display: flex;
    justify-content: center;
}

.services-page-block .services-page__proof > .services-page__proof-callout {
    flex: 0 1 auto;
    padding: var(--clvr-space-2) var(--clvr-space-6);
    border: 1px solid var(--clvr-color-border-card);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-sm);
}

.services-page-block .services-page__proofbar:has(.services-page__proof-callout) {
    margin-top: var(--clvr-space-8);
}

.services-page-block .services-page__section--hero.services-page__section--bg-band:has(.services-page__proof-callout) {
    padding-bottom: var(--clvr-space-8);
}

.services-page-block .services-page__proof-callout-text {
    margin: 0;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.services-page-block .services-page__proof-callout .services-page__proof-trust {
    flex: 0 1 27rem;
    min-width: 0;
    padding: 0;
}

@container (min-width: 48rem) {
    .services-page-block .services-page__proof-callout {
        flex-wrap: nowrap;
    }

    .services-page-block .services-page__proof > .services-page__proof-callout {
        border-radius: var(--clvr-radius-pill);
    }

    .services-page-block .services-page__proof-callout .services-page__proof-trust {
        flex: 0 0 27rem;
    }

    .services-page-block .services-page__proof-callout-text {
        white-space: nowrap;
    }
}

/* Trustpilot between the ZIP field and the button. */
.services-page-block .services-page__form-trust--between {
    flex: 1 1 100%;
    margin: var(--clvr-space-1) 0;
}

/* Trustpilot under the FAQ's closing line. */
.services-page-block .services-page__faq-trust {
    margin-top: var(--clvr-space-4);
}

/* Small print under the form card's Trustpilot widget. */
.services-page-block .services-page__trust-note {
    margin: var(--clvr-space-1) 0 0;
    text-align: center;
}

/* With small print underneath, keep the widget's full box so the two do not overlap. */
.services-page-block .services-page__form-trust:has(+ .services-page__trust-note) {
    margin-bottom: 0;
}

/* Centered hero: logo, label and title centered, the form card underneath. */
.services-page-block .services-page__hero--centered {
    justify-items: center;
    gap: var(--clvr-space-8);
    text-align: center;
}

.services-page-block .services-page__hero--centered .services-page__hero-copy,
.services-page-block .services-page__hero--centered .services-page__header {
    justify-items: center;
}

.services-page-block .services-page__hero--centered .services-page__brand-logo {
    margin-inline: auto;
}

.services-page-block .services-page__hero--centered .services-page__form-card {
    width: 100%;
    /* width-exception: Katy Byrom asked on 2026-10-07 for a centered hero like start.listwithclever.com/save-with-clever and orchard.com; a full-width form would stretch the ZIP field across the page. */
    max-width: 40rem;
    text-align: start;
}

.services-page-block .services-page__hero--centered .services-page__form-card .services-page__zip-note,
.services-page-block .services-page__hero--centered .services-page__form-card .services-page__trust-note {
    text-align: center;
}

/* Centered hero text wraps into even lines instead of leaving one word on its own. */
.services-page-block .services-page__hero--centered :is(.services-page__heading, .services-page__intro) {
    text-wrap: balance;
}

/* Photo hero (centered layout with a background photo): the photo fills a rounded frame
   under a dark overlay, with light text and the white form card on top. */
.services-page-block .services-page__section--hero:has(.services-page__hero--photo) {
    padding-block: var(--clvr-space-6) var(--clvr-space-10);
    background: var(--clvr-color-surface);
}

.services-page-block .services-page__hero--photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--clvr-space-12) * 1.5) var(--clvr-space-6);
    border-radius: var(--clvr-radius-lg);
}

.services-page-block .services-page__hero-bg {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-page-block .services-page__hero--photo::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--clvr-color-text) 72%, transparent), color-mix(in srgb, var(--clvr-color-text) 45%, transparent));
    content: "";
}

.services-page-block .services-page__hero--photo :is(.services-page__heading, .services-page__intro, .services-page__intro p) {
    color: var(--clvr-color-text-inverse);
}

.services-page-block .services-page__hero--photo .services-page__accent {
    color: var(--clvr-color-label-info-bg);
}

/* The blue logo sits on a white chip so it reads against the photo. */
.services-page-block .services-page__hero--photo .services-page__brand {
    padding: var(--clvr-space-2) var(--clvr-space-4);
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-surface);
}

/* Subtle photo: the photo spans the whole hero band, washed out under a light overlay,
   so the regular dark text and blue accent stay as they are. */
.services-page-block .services-page__section--hero:has(.services-page__hero--photo-subtle) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.services-page-block .services-page__hero--photo-subtle .services-page__hero-bg {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-page-block .services-page__section--hero:has(.services-page__hero--photo-subtle)::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--clvr-color-surface) 87%, transparent) 0%, color-mix(in srgb, var(--clvr-color-brand-band) 86%, transparent) 55%, var(--clvr-color-surface) 100%);
    content: "";
}

/* Agent-match and "sold" illustration cards (how it works, step 2 and 3). */
.services-page-block .services-page__match-list {
    display: grid;
    gap: var(--clvr-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-page-block .services-page__match {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--clvr-space-3);
    padding: var(--clvr-space-2) var(--clvr-space-3);
    border: 1px solid var(--clvr-color-border-subtle);
    border-radius: var(--clvr-radius-md);
    text-align: start;
}

.services-page-block .services-page__match.is-selected {
    margin-top: var(--clvr-space-3);
    border-color: var(--clvr-color-primary);
    background: var(--clvr-color-secondary);
}

.services-page-block .services-page__match-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.services-page-block .services-page__match-text {
    display: grid;
    gap: var(--clvr-space-1);
}

.services-page-block .services-page__match .services-page__tile-check {
    position: static;
    margin-inline-start: auto;
}

.services-page-block .services-page__match .services-page__star {
    width: 0.875rem;
    height: 0.875rem;
}

.services-page-block .services-page__sold {
    justify-items: center;
    padding: var(--clvr-space-6) var(--clvr-space-4);
    text-align: center;
}

.services-page-block .services-page__sold .services-page__mini-value {
    justify-items: center;
    text-align: center;
}

.services-page-block .services-page__sold-sign {
    position: relative;
    padding: var(--clvr-space-2) var(--clvr-space-6);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-primary);
    color: var(--clvr-color-text-inverse);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    text-transform: uppercase;
}

.services-page-block .services-page__sold-label {
    margin-top: var(--clvr-space-3);
    text-transform: uppercase;
}

/* Agents and services: copy and a scrolling services list beside staggered agent cards. */
.services-page-block .services-page__agents {
    display: grid;
    gap: var(--clvr-space-10);
    align-items: start;
}

.services-page-block .services-page__agents-copy {
    display: grid;
    gap: var(--clvr-space-6);
}

.services-page-block .services-page__services {
    display: grid;
    gap: var(--clvr-space-3);
}

.services-page-block .services-page__services-label {
    margin: 0;
}

.services-page-block .services-page__service-list {
    margin: 0;
    padding: 0;
}

.services-page-block .services-page__service-list--clone {
    display: none;
}

/* Scrolling list: a fixed-height window that fades at both ends, looping upward. */
.services-page-block .services-page__services--scroll .services-page__services-viewport {
    block-size: 17rem;
    overflow-y: clip;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.services-page-block .services-page__services--scroll .services-page__services-track {
    display: grid;
    /* One loop every 150 shared motion steps (30s at the default token). */
    animation-name: services-page-block-scroll-up;
    animation-duration: calc(var(--clvr-duration-normal) * 150);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Equal gap and trailing padding keep the two copies seamless when the loop restarts. */
.services-page-block .services-page__services--scroll .services-page__service-list {
    grid-template-columns: minmax(0, 1fr);
    padding-block-end: var(--clvr-space-3);
}

.services-page-block .services-page__services--scroll .services-page__service-list--clone {
    display: grid;
}

.services-page-block .services-page__services--scroll:hover .services-page__services-track,
.services-page-block .services-page__services--scroll:focus-within .services-page__services-track {
    animation-play-state: paused;
}

.services-page-block .services-page__service-list li {
    align-items: center;
    color: var(--clvr-color-text);
}

/* Scrolling list: each service is a small boxed row. */
.services-page-block .services-page__services--scroll .services-page__service-list li {
    padding: var(--clvr-space-3) var(--clvr-space-4);
    border: 1px solid var(--clvr-color-border-subtle);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface);
}

/* Static list: every service visible at once, two columns from tablet width, each check on
   a green badge so the checks carry the list. */
.services-page-block .services-page__services:not(.services-page__services--scroll) .services-page__service-list {
    gap: var(--clvr-space-3) var(--clvr-space-6);
}

@container (min-width: 40rem) {
    .services-page-block .services-page__services:not(.services-page__services--scroll) .services-page__service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The services list runs full width under the copy and the agent cards. */
.services-page-block .services-page__agents-services {
    grid-column: 1 / -1;
}

@container (min-width: 64rem) {
    .services-page-block .services-page__agents-services:not(.services-page__services--scroll) .services-page__service-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.services-page-block .services-page__service-check {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-label-positive-bg);
    color: var(--clvr-color-valid);
}

.services-page-block .services-page__service-check .clvr-icon {
    width: 1rem;
    height: 1rem;
}

/* Checks pop in one after another when the list scrolls into view (script-view.js arms it). */
.services-page-block .services-page__services-viewport.is-armed:not(.is-in-view) .services-page__service-check {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .services-page-block .services-page__services-viewport.is-in-view .services-page__service-check {
        animation-name: services-page-block-rise;
        animation-duration: calc(var(--clvr-duration-normal) * 2);
        animation-delay: calc(var(--clvr-duration-normal) * var(--services-page-block-i, 0) / 2);
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }
}

@keyframes services-page-block-scroll-up {
    to {
        transform: translateY(-50%);
    }
}

.services-page-block .services-page__agent-cards {
    display: grid;
    gap: var(--clvr-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-page-block .services-page__agent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--clvr-space-3) var(--clvr-space-4);
    box-shadow: var(--clvr-shadow-lg);
}

.services-page-block .services-page__agent-photo {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--clvr-radius-pill);
    object-fit: cover;
}

.services-page-block .services-page__agent-text {
    display: grid;
    justify-items: start;
    gap: var(--clvr-space-1);
}

.services-page-block .services-page__agent-name,
.services-page-block .services-page__agent-brokerage {
    margin: 0;
    text-align: start;
}

.services-page-block .services-page__agent-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-space-1);
}

.services-page-block .services-page__agent-badge .clvr-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.services-page-block .services-page__agent-stats li {
    margin: 0;
    line-height: 1.4;
}

.services-page-block .services-page__agent-stats {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: var(--clvr-space-1) var(--clvr-space-4);
    margin: 0;
    padding: var(--clvr-space-3) 0 0;
    border-top: 1px solid var(--clvr-color-border-subtle);
    list-style: none;
    color: var(--clvr-color-text-muted);
}

/* Wide screens: the copy and the card row side by side. Narrower, the cards sit under the copy. */
@container (min-width: 64rem) {
    .services-page-block .services-page__agents--with-cards {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--clvr-space-10) var(--clvr-space-12);
        align-items: center;
    }

    .services-page-block .services-page__agent-cards .services-page__agent-photo {
        width: 6rem;
        height: 6rem;
    }

    .services-page-block .services-page__agent-cards .services-page__agent,
    .services-page-block .services-page__agent-cards .services-page__agent + .services-page__agent {
        padding: var(--clvr-space-6) var(--clvr-space-4);
    }

}

/* From tablet width: vertical cards side by side, filling their space (as on the start page,
   but without the overlap that hid the side cards' stats). */
@container (min-width: 40rem) {
    /* All three cards share one height (no raised middle card, which read as a size mismatch). */
    .services-page-block .services-page__agent-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: var(--clvr-space-3);
        padding-block: var(--clvr-space-6);
    }

    .services-page-block .services-page__agent,
    .services-page-block .services-page__agent:nth-child(3n + 2),
    .services-page-block .services-page__agent:nth-child(3n),
    .services-page-block .services-page__agent + .services-page__agent {
        width: auto;
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        margin: 0;
        padding: var(--clvr-space-4) var(--clvr-space-3);
        text-align: center;
    }


    .services-page-block .services-page__agent-text {
        justify-items: center;
    }

    .services-page-block .services-page__agent-name,
    .services-page-block .services-page__agent-brokerage {
        text-align: center;
    }

    .services-page-block .services-page__agent-stats {
        display: grid;
        justify-items: center;
        width: 100%;
    }
}

.services-page-block .services-page__agent-cards.is-armed:not(.is-in-view) .services-page__agent {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .services-page-block .services-page__agent-cards.is-in-view .services-page__agent {
        animation-name: services-page-block-rise;
        animation-duration: calc(var(--clvr-duration-normal) * 3);
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }

    .services-page-block .services-page__agent-cards.is-in-view .services-page__agent:nth-child(2) {
        animation-delay: calc(var(--clvr-duration-normal) * 1);
    }

    .services-page-block .services-page__agent-cards.is-in-view .services-page__agent:nth-child(3) {
        animation-delay: calc(var(--clvr-duration-normal) * 2);
    }
}

/* Savings calculator: one band (dark navy, like the highlighted stat), the state
   picker on top, the math on the left and the stat section's bar chart on the right. */
.services-page-block .services-page__savings {
    display: grid;
    gap: var(--clvr-space-8);
}

.services-page-block .services-page__savings-top {
    display: grid;
    gap: var(--clvr-space-4);
}

@container (min-width: 52rem) {
    .services-page-block .services-page__savings-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--clvr-space-12);
    }
}

.services-page-block .services-page__savings-math {
    align-content: start;
}

.services-page-block .services-page__savings-rows {
    display: grid;
    gap: var(--clvr-space-3);
    margin: 0;
}

.services-page-block .services-page__savings-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--clvr-space-4);
    padding-block-end: var(--clvr-space-3);
    border-bottom: 1px solid var(--clvr-color-border-subtle);
}

.services-page-block .services-page__savings-row dt {
    color: var(--clvr-color-text-muted);
}

.services-page-block .services-page__savings-row dd {
    margin: 0;
    color: var(--clvr-color-text);
    font-variant-numeric: tabular-nums;
}

.services-page-block .services-page__state-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: var(--clvr-space-1);
    color: var(--clvr-color-link);
    font-weight: var(--clvr-font-heading-weight);
}

.services-page-block .services-page__state-link .clvr-icon {
    width: 1rem;
    height: 1rem;
}

.services-page-block .services-page__savings-place {
    margin: 0;
    text-align: center;
}

/* Bars: the typical fee is the tall bar; Clever's is its share of that
   (--services-page-block-savings-ratio, set inline and by script-view.js). */
/* As on the start page: label above each bar, its text inside, thin diagonal stripes,
   and an "or" badge between the two bars. */
.services-page-block .services-page__savings-bars {
    position: relative;
}

.services-page-block .services-page__savings-bars .services-page__bar-fill {
    align-items: center;
    padding: var(--clvr-space-3);
    border-radius: var(--clvr-radius-md);
    background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--clvr-color-text-inverse) 9%, transparent) 0 0.1875rem, transparent 0.1875rem 0.75rem);
}

.services-page-block .services-page__bar--typical .services-page__bar-fill {
    height: 70%;
}

.services-page-block .services-page__bar--clever .services-page__bar-fill {
    height: calc(70% * var(--services-page-block-savings-ratio));
    background-color: var(--clvr-color-primary);
    transition: height var(--clvr-duration-normal) ease-out;
}

.services-page-block .services-page__bar-caption {
    color: var(--clvr-color-text-inverse);
    line-height: 1.35;
    text-align: center;
}

.services-page-block .services-page__bars-or {
    position: absolute;
    bottom: var(--clvr-space-3);
    left: 50%;
    z-index: 1;
    display: grid;
    width: 2.875rem;
    height: 2.875rem;
    place-items: center;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-surface);
    transform: translateX(-50%);
}

.services-page-block .services-page__bars-or span {
    display: grid;
    width: 2.125rem;
    height: 2.125rem;
    place-items: center;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-primary);
    color: var(--clvr-color-text-inverse);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    line-height: 1;
}

/* On the dark band, the math, captions and the picker/slider labels read in light text. */
.services-page-block .services-page__section--bg-dark :is(.services-page__savings-place, .services-page__savings-row dd, .services-page__savings .clvr-field__label, .services-page__savings .clvr-slider__value, .services-page__savings .clvr-slider__output) {
    color: var(--clvr-color-text-inverse);
}

.services-page-block .services-page__section--bg-dark :is(.services-page__savings-row dt, .services-page__savings .clvr-field__description) {
    color: color-mix(in srgb, var(--clvr-color-text-inverse) 75%, transparent);
}

.services-page-block .services-page__section--bg-dark .services-page__savings-row {
    border-bottom-color: color-mix(in srgb, var(--clvr-color-text-inverse) 20%, transparent);
}

.services-page-block .services-page__section--bg-dark .services-page__state-link {
    color: var(--clvr-color-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .services-page-block .services-page__bar--clever .services-page__bar-fill {
        transition: none;
    }
}

/* Stat bar: the stats joined into one strip, divided by hairlines; each icon and
   number takes its label-palette color, the label stays neutral. */
.services-page-block .services-page__stats--bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--clvr-color-border-subtle);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-sm);
}

@container (min-width: 40rem) {
    .services-page-block .services-page__stats--bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (min-width: 64rem) {
    .services-page-block .services-page__stats--bar {
        grid-template-columns: none;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }
}

/* Hairlines between cells: two columns on phones, three on tablets, one row on wide screens. */
.services-page-block .services-page__stat-cell {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--clvr-space-2);
    padding: var(--clvr-space-6) var(--clvr-space-4);
    border-bottom: 1px solid var(--clvr-color-border-subtle);
}

.services-page-block .services-page__stat-cell:nth-child(2n + 1) {
    border-right: 1px solid var(--clvr-color-border-subtle);
}

.services-page-block .services-page__stat-cell:nth-last-child(-n + 2):nth-child(2n + 1),
.services-page-block .services-page__stat-cell:last-child {
    border-bottom: 0;
}

.services-page-block .services-page__stat-cell:nth-last-child(2):nth-child(2n + 1) + .services-page__stat-cell {
    border-bottom: 0;
}

@container (min-width: 40rem) {
    .services-page-block .services-page__stat-cell,
    .services-page-block .services-page__stat-cell:nth-last-child(2):nth-child(2n + 1) + .services-page__stat-cell {
        border-right: 1px solid var(--clvr-color-border-subtle);
        border-bottom: 1px solid var(--clvr-color-border-subtle);
    }

    .services-page-block .services-page__stat-cell:nth-child(3n) {
        border-right: 0;
    }

    .services-page-block .services-page__stat-cell:nth-last-child(-n + 3):nth-child(3n + 1),
    .services-page-block .services-page__stat-cell:nth-last-child(-n + 3):nth-child(3n + 1) ~ .services-page__stat-cell {
        border-bottom: 0;
    }
}

@container (min-width: 64rem) {
    .services-page-block .services-page__stat-cell,
    .services-page-block .services-page__stat-cell:nth-child(3n) {
        border-right: 1px solid var(--clvr-color-border-subtle);
        border-bottom: 0;
    }

    .services-page-block .services-page__stat-cell:last-child {
        border-right: 0;
    }
}

.services-page-block .services-page__stat-icon {
    display: inline-flex;
}

.services-page-block .services-page__stat-icon .clvr-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.services-page-block .services-page__tile-stat {
    display: grid;
    gap: var(--clvr-space-1);
    margin: 0;
}

.services-page-block .services-page__tile-stat dt {
    color: var(--clvr-color-text-muted);
    line-height: 1.35;
}

/* Number above its label. */
.services-page-block .services-page__tile-stat dd {
    order: -1;
    margin: 0;
    justify-items: start;
    text-align: start;
}

.services-page-block .services-page__stat-cell--info :is(.services-page__stat-icon, dd, dd strong) {
    color: var(--clvr-color-label-info-strong);
}

.services-page-block .services-page__stat-cell--positive :is(.services-page__stat-icon, dd, dd strong) {
    color: var(--clvr-color-label-positive-strong);
}

.services-page-block .services-page__stat-cell--speed :is(.services-page__stat-icon, dd, dd strong) {
    color: var(--clvr-color-label-speed-strong);
}

.services-page-block .services-page__stat-cell--warning :is(.services-page__stat-icon, dd, dd strong) {
    color: var(--clvr-color-label-warning-strong);
}

.services-page-block .services-page__stat-cell--conversion :is(.services-page__stat-icon, dd, dd strong) {
    color: var(--clvr-color-label-conversion-strong);
}

/* Checklist ticker showing logos instead of tags (brokerage banner). */
.services-page-block .services-page__chips--logos {
    justify-items: stretch;
}

.services-page-block .services-page__chips--logos .services-page__chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-space-4) var(--clvr-space-8);
}

.services-page-block .services-page__chips--logos.services-page__chips--ticker .services-page__chip-list {
    flex-wrap: nowrap;
    gap: var(--clvr-space-8);
    padding-inline-end: var(--clvr-space-8);
}

/* Brokerage logos come in very different shapes; each sits in the same box (as on cleverclosings.com). */
.services-page-block .services-page__chips--logos .services-page__logo-img {
    display: block;
    width: 9rem;
    height: 3rem;
    object-fit: contain;
}

.services-page-block .services-page__chips--logos .services-page__logo-name {
    white-space: nowrap;
}

/* Link inside the calculator's small print, on the dark band. */
.services-page-block .services-page__section--bg-dark .services-page__footnote a {
    color: var(--clvr-color-secondary);
}

/* Split with its heading centered above both columns. */
.services-page-block .services-page__split-head .services-page__header {
    justify-items: center;
    text-align: center;
}

.services-page-block .services-page__split-head .services-page__intro {
    margin-inline: auto;
}

/* A logo strip right after a section with the same background reads as that section's
   footer (e.g. brokerage logos under the agents map), so it adds no top padding. */
.services-page-block .services-page__section--bg-default + .services-page__section--logos.services-page__section--bg-default,
.services-page-block .services-page__section--bg-muted + .services-page__section--logos.services-page__section--bg-muted {
    padding-top: 0;
}

/* Logo ticker (brokerage banner): the logo row loops sideways like the situations ticker. */
.services-page-block .services-page__logos .services-page__ticker-viewport {
    display: grid;
    justify-items: center;
}

.services-page-block .services-page__logos--ticker .services-page__ticker-viewport {
    display: block;
    justify-items: start;
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.services-page-block .services-page__logo-list--clone {
    display: none;
}

.services-page-block .services-page__logos--ticker .services-page__ticker {
    display: flex;
    width: max-content;
    animation-name: services-page-block-ticker;
    animation-duration: calc(var(--clvr-duration-normal) * 225);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.services-page-block .services-page__logos--ticker .services-page__logo-list {
    flex-wrap: nowrap;
    padding-inline-end: var(--clvr-space-8);
}

.services-page-block .services-page__logos--ticker .services-page__logo-list--clone {
    display: flex;
}

.services-page-block .services-page__logos--ticker .services-page__logo-name {
    white-space: nowrap;
}

/* Brokerage logos come in very different shapes; each sits in the same box (as on cleverclosings.com). */
.services-page-block .services-page__logos--ticker .services-page__logo-img {
    width: 9rem;
    height: 3rem;
    object-fit: contain;
}

/* White logo files shown dark on the light band; the -color variant turns the hue back
   so colored parts keep their color (as on cleverclosings.com). */
.services-page-block .services-page__logo-img--invert {
    filter: invert(1);
}

.services-page-block .services-page__logo-img--invert-color {
    filter: invert(1) hue-rotate(180deg);
}

/* Keeps a tooltip's icon on the same line as the word before it. */
.services-page-block .services-page__nowrap {
    white-space: nowrap;
}

/* Toggletip: an info button that opens a small bubble with a link (script-view.js). */
.services-page-block .services-page__tip {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.services-page-block .services-page__tip-button {
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: var(--clvr-space-1);
    border: 0;
    border-radius: var(--clvr-radius-pill);
    background: none;
    color: var(--clvr-color-text-muted);
    cursor: pointer;
    vertical-align: middle;
}

.services-page-block .services-page__tip-button:hover,
.services-page-block .services-page__tip-button[aria-expanded="true"] {
    color: var(--clvr-color-primary);
}

.services-page-block .services-page__tip-button:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 2px;
}

.services-page-block .services-page__tip-button .clvr-icon {
    width: 1rem;
    height: 1rem;
}

.services-page-block .services-page__tip-bubble {
    position: absolute;
    bottom: calc(100% + var(--clvr-space-2));
    left: 50%;
    z-index: 2;
    /* width-exception: Katy Byrom asked on 2026-10-08 for a tooltip with a link; the bubble is a fixed small popover, not page layout. */
    width: 14rem;
    padding: var(--clvr-space-2) var(--clvr-space-3);
    border: 1px solid var(--clvr-color-border-card);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface);
    box-shadow: var(--clvr-shadow-lg);
    color: var(--clvr-color-text);
    line-height: 1.4;
    text-align: start;
    transform: translateX(-50%);
}

.services-page-block .services-page__tip-bubble[hidden] {
    display: none;
}

.services-page-block .services-page__tip-bubble a {
    color: var(--clvr-color-link);
}

/* Subheadings inside rich text (e.g. "Clever's business model tackles…"). */
.services-page-block .services-page__body h3 {
    margin: 0 0 var(--clvr-space-3);
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    line-height: 1.3;
}

.services-page-block .services-page__logos--ticker:hover .services-page__ticker,
.services-page-block .services-page__logos--ticker:focus-within .services-page__ticker {
    animation-play-state: paused;
}

/* Closing CTA: overlapping agent photos above the heading, checkmarks under the form. */
.services-page-block .services-page__avatar-stack {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--clvr-space-4);
}

.services-page-block .services-page__avatar-stack img {
    display: block;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--clvr-color-surface);
    border-radius: var(--clvr-radius-pill);
    object-fit: cover;
    box-shadow: var(--clvr-shadow-sm);
}

.services-page-block .services-page__avatar-stack img + img {
    margin-inline-start: calc(var(--clvr-space-3) * -1);
}

.services-page-block .services-page__cta-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--clvr-space-2) var(--clvr-space-6);
    margin: var(--clvr-space-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--clvr-color-text-muted);
}

.services-page-block .services-page__cta-checks li {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-space-1);
}

@media (prefers-reduced-motion: reduce) {
    .services-page-block .services-page__services--scroll .services-page__services-viewport {
        block-size: auto;
        mask-image: none;
    }

    .services-page-block .services-page__services--scroll .services-page__services-track,
    .services-page-block .services-page__logos--ticker .services-page__ticker {
        width: auto;
        animation: none;
    }

    .services-page-block .services-page__services--scroll .services-page__service-list--clone,
    .services-page-block .services-page__logos--ticker .services-page__logo-list--clone {
        display: none;
    }

    .services-page-block .services-page__logos--ticker .services-page__logo-list {
        flex-wrap: wrap;
    }
}