/* ==========================================================================
   Applied InTouch — Landing page components (Phase 2)

   sections.css holds the site chrome (header, nav, footer) and the hero /
   problem / solution sections. This file holds the interactive components
   introduced with the remaining sections: the metrics bar, the steps
   timeline, the use-case cards, the testimonial carousel, the pricing table,
   the FAQ accordion and the lead capture form.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Financial impact (#financial-impact) — metrics bar
   -------------------------------------------------------------------------- */

/* Two up from the narrowest screen. One column made each card a full-width
   band, so six of them buried the rest of the section under a long scroll.
   The card padding and value size below are tuned to survive the ~140px
   column that leaves on a 360px phone. */
.ai-metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ai-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 34em) {
    .ai-metrics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ai-space-5);
    }
}

@media (min-width: 62em) {
    .ai-metrics__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ai-space-6);
    }
}

/* Centred on both axes of the card. align-items does the icon and the value
   (both are flex boxes that would otherwise sit flush left); text-align does
   the label and the description, which wrap. */
.ai-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ai-space-2);
    height: 100%;
    padding: var(--ai-space-4);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ai-color-border-inverse);
    border-radius: var(--ai-radius-lg);
}

/* Roomier once the column is wide enough to carry it. */
@media (min-width: 34em) {
    .ai-metric {
        padding: var(--ai-space-6);
    }
}

/* --------------------------------------------------------------------------
   Metrics colour on TWO grounds
   --------------------------------------------------------------------------
   background_style is admin-editable, so this section is no longer guaranteed
   to be dark. Everything below is therefore written light-ground first, with
   the inverse treatment scoped under .ai-section--dark. Before this, the
   values and labels were unconditionally ink-inverse — switching the section
   to any light band rendered white numbers on a white band.
   -------------------------------------------------------------------------- */

.ai-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--ai-space-2);
    border-radius: var(--ai-radius-md);
    background-color: var(--ai-color-primary-light);
    color: var(--ai-color-primary);
}

.ai-section--dark .ai-metric__icon {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--ai-color-ink-inverse);
}

.ai-metric__icon .ai-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.ai-metric__value {
    display: flex;
    align-items: baseline;
    gap: var(--ai-space-1);
    /* Fixed, not clamped, while the grid is two-up on a phone: the clamp's
       2rem floor is wider than the column and "↓ 30–50%" would spill out. */
    font-size: 1.375rem;
    font-weight: var(--ai-weight-bold);
    line-height: 1.05;
    letter-spacing: var(--ai-tracking-tight);
    /* Digits must not jiggle while the count-up runs. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--ai-color-ink);
}

@media (min-width: 34em) {
    .ai-metric__value {
        font-size: clamp(2rem, 4.5vw, 2.75rem);
    }
}

.ai-section--dark .ai-metric__value {
    color: var(--ai-color-ink-inverse);
}

.ai-metric__arrow {
    font-size: 0.72em;
    line-height: 1;
}

/* Direction of travel is semantic, so it is deliberately NOT the brand accent
   — reusing the accent would make a falling number look like a brand
   highlight. Note "down" is not "bad" here: a falling admin cost is a win,
   which is why the fall is a calm blue and not a red.
   Light grounds: success 4.65:1 and accent-dark 4.86:1 on the tint band, the
   deepest of the four and so the tightest. */
.ai-metric__value--up .ai-metric__arrow {
    color: var(--ai-color-success);
}

.ai-metric__value--down .ai-metric__arrow {
    color: var(--ai-color-accent-dark);
}

/* On navy, both of those go muddy, so the pair is re-picked for that ground.
   Cyan rather than blue for the fall — on a sapphire palette a blue arrow on
   navy reads as brand furniture instead of as data. 6.58:1 and 5.95:1 on
   surface-dark-2, the lighter end of the gradient and so the tighter ground. */
.ai-section--dark .ai-metric__value--up .ai-metric__arrow {
    color: #8fd9b0;
}

.ai-section--dark .ai-metric__value--down .ai-metric__arrow {
    color: #7fcbdd;
}

/* A step down each while the grid is two-up, so a long label like "Insurance
   Verification Time" does not turn the card into five wrapped lines. */
.ai-metric__label {
    font-size: var(--ai-text-sm);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink);
}

.ai-section--dark .ai-metric__label {
    color: var(--ai-color-ink-inverse);
}

.ai-metric__description {
    font-size: var(--ai-text-xs);
    line-height: var(--ai-leading-normal);
    color: var(--ai-color-ink-muted);
}

@media (min-width: 34em) {
    .ai-metric__label {
        font-size: var(--ai-text-base);
    }

    .ai-metric__description {
        font-size: var(--ai-text-sm);
    }
}

.ai-section--dark .ai-metric__description {
    color: var(--ai-color-ink-inverse-muted);
}

.ai-metrics__footnote {
    max-width: 46rem;
    margin-inline: auto;
}

/* The 0.85 is only safe against navy — on a light band it would pull the
   footnote under the AA floor, so it stays scoped to the dark ground. */
.ai-section--dark .ai-metrics__footnote {
    color: var(--ai-color-ink-inverse-muted);
    opacity: 0.85;
}

/* Fused hero metrics — smaller type at every breakpoint. */
.ai-metrics__grid--row .ai-metric__value {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.ai-metrics__grid--row .ai-metric__label {
    font-size: var(--ai-text-sm);
}

.ai-metrics__grid--row .ai-metric__description {
    font-size: var(--ai-text-xs);
    line-height: 1.35;
}

@media (min-width: 34em) {
    .ai-metrics__grid--row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 48em) {
    .ai-metrics__grid--row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ai-space-4);
    }
}

@media (min-width: 72em) {
    .ai-metrics__grid--row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--ai-space-3);
    }

    .ai-metrics__grid--row .ai-metric {
        padding: var(--ai-space-3);
        gap: var(--ai-space-1);
    }

    .ai-metrics__grid--row .ai-metric__icon {
        width: 1.75rem;
        height: 1.75rem;
        margin-bottom: var(--ai-space-1);
    }

    .ai-metrics__grid--row .ai-metric__icon .ai-icon {
        width: 0.95rem;
        height: 0.95rem;
    }

    .ai-metrics__grid--row .ai-metric__value {
        font-size: clamp(1.05rem, 1.15vw, 1.25rem);
    }

    .ai-metrics__grid--row .ai-metric__label {
        font-size: 0.75rem;
    }

    .ai-metrics__grid--row .ai-metric__description {
        font-size: 0.6875rem;
        line-height: 1.35;
    }
}

/* --------------------------------------------------------------------------
   How it works (#how-it-works) — steps timeline
   -------------------------------------------------------------------------- */

.ai-timeline {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--ai-space-4);
    padding-bottom: var(--ai-space-8);
}

.ai-timeline__item:last-child {
    padding-bottom: 0;
}

/* Connecting rail: vertical on mobile, drawn between successive markers. */
.ai-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 3.5rem;
    bottom: 0.5rem;
    left: 1.75rem;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(
        180deg,
        var(--ai-color-primary) 0%,
        var(--ai-color-border-strong) 100%
    );
}

.ai-timeline__marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--ai-gradient-brand);
    color: var(--ai-color-ink-inverse);
    box-shadow: var(--ai-shadow-md);
}

.ai-timeline__icon {
    display: inline-flex;
}

.ai-timeline__icon .ai-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.ai-timeline__number {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-bold);
    color: var(--ai-color-primary-dark);
    background-color: var(--ai-color-surface);
    border: 2px solid var(--ai-color-surface-muted);
    border-radius: 50%;
}

.ai-timeline__body {
    padding-top: var(--ai-space-2);
}

.ai-timeline__title {
    font-size: var(--ai-text-lg);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-normal);
    line-height: var(--ai-leading-snug);
}

.ai-timeline__text {
    margin-top: var(--ai-space-2);
    font-size: var(--ai-text-sm);
    line-height: var(--ai-leading-relaxed);
    color: var(--ai-color-ink-muted);
}

/* Horizontal from 60em. */
@media (min-width: 60em) {
    .ai-timeline {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--ai-space-5);
    }

    .ai-timeline__item {
        grid-template-columns: 1fr;
        gap: var(--ai-space-4);
        padding-bottom: 0;
        justify-items: center;
        text-align: center;
    }

    .ai-timeline__item:not(:last-child)::before {
        top: 1.75rem;
        bottom: auto;
        left: calc(50% + 2.25rem);
        right: calc(-50% + 2.25rem);
        width: auto;
        height: 2px;
        transform: none;
        background: linear-gradient(
            90deg,
            var(--ai-color-primary) 0%,
            var(--ai-color-border-strong) 100%
        );
    }

    .ai-timeline__marker {
        margin-inline: auto;
    }

    .ai-timeline__body {
        padding-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Use cases (#use-cases)
   -------------------------------------------------------------------------- */

.ai-use-cases__grid {
    --ai-grid-min: 17rem;
}

.ai-use-case {
    gap: var(--ai-space-4);
}

.ai-use-case__media {
    margin: calc(var(--ai-space-6) * -1) calc(var(--ai-space-6) * -1) 0;
    overflow: hidden;
    border-radius: var(--ai-radius-lg) var(--ai-radius-lg) 0 0;
}

/* No picture on phones, same trade as #problem and #solution: a full-width
   card makes the 8:5 image the tallest thing in it.

   The whole media box goes, not just the img -- it carries a negative top
   margin to bleed the image to the card edge, and an emptied box would drag
   the title up into the card's padding. Matched on :has() so the icon-tile
   fallback, which is not a picture, survives; where :has() is missing the
   image simply stays, which is where this started. */
.ai-use-case__media:has(img),
.ai-use-case__media:has(.ai-illustration) {
    display: none;
}

@media (min-width: 40em) {
    .ai-use-case__media:has(img),
    .ai-use-case__media:has(.ai-illustration) {
        display: block;
    }
}

.ai-use-case__media img,
.ai-use-case__media .ai-illustration {
    display: block;
    width: 100%;
    height: auto;
}

.ai-use-case__media img {
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.ai-use-case__title {
    margin-top: var(--ai-space-2);
}

/* --------------------------------------------------------------------------
   Testimonials (#testimonials) — carousel
   -------------------------------------------------------------------------- */

.ai-carousel {
    max-width: 46rem;
    margin-inline: auto;
}

.ai-carousel__viewport {
    position: relative;
}

/* No JS: every slide renders, stacked vertically and fully readable. */
.ai-carousel__track {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* With JS: slides share one grid cell, so the viewport is as tall as the
   tallest slide and never jumps height between them. */
.js .ai-carousel__track {
    display: grid;
    gap: 0;
}

.js .ai-carousel__slide {
    grid-area: 1 / 1;
    opacity: 0;
    /* visibility also removes inactive slides from the tab order. */
    visibility: hidden;
    transform: translateY(0.5rem);
    transition:
        opacity var(--ai-duration-slow) var(--ai-ease),
        transform var(--ai-duration-slow) var(--ai-ease),
        visibility 0s linear var(--ai-duration-slow);
}

.js .ai-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.ai-testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-5);
    height: 100%;
    margin: 0;
    padding: var(--ai-space-8) var(--ai-space-6);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-xl);
    box-shadow: var(--ai-shadow-md);
    text-align: center;
}

@media (min-width: 40em) {
    .ai-testimonial {
        padding: var(--ai-space-10);
    }
}

.ai-testimonial__quote-mark {
    display: inline-flex;
    align-self: center;
    color: var(--ai-color-primary);
    opacity: 0.28;
}

.ai-testimonial__quote-mark .ai-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.ai-testimonial__quote {
    margin: 0;
    font-size: var(--ai-text-xl);
    font-weight: var(--ai-weight-medium);
    line-height: var(--ai-leading-snug);
    letter-spacing: var(--ai-tracking-tight);
    color: var(--ai-color-ink);
    text-wrap: balance;
}

.ai-testimonial__attribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ai-space-3);
    margin-top: auto;
    padding-top: var(--ai-space-4);
    border-top: 1px solid var(--ai-color-border);
}

.ai-testimonial__photo {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.ai-testimonial__who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.ai-testimonial__name {
    font-size: var(--ai-text-sm);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink);
}

.ai-testimonial__detail {
    font-size: var(--ai-text-xs);
    color: var(--ai-color-ink-subtle);
}

.ai-testimonial__attribution--anonymous {
    justify-content: center;
}

.ai-testimonial__attribution--anonymous .ai-testimonial__detail {
    font-style: italic;
}

.ai-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ai-space-3);
    margin-top: var(--ai-space-6);
}

.ai-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border-strong);
    color: var(--ai-color-primary-dark);
    transition:
        background-color var(--ai-duration) var(--ai-ease),
        border-color var(--ai-duration) var(--ai-ease);
}

.ai-carousel__arrow:hover {
    background-color: var(--ai-color-primary-light);
    border-color: var(--ai-color-primary);
}

.ai-carousel__arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.ai-carousel__arrow-icon--prev {
    transform: rotate(180deg);
}

.ai-carousel__dots {
    display: flex;
    align-items: center;
    gap: var(--ai-space-2);
}

/* The visible dot is small; the hit area stays a full 40px. */
.ai-carousel__dot {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
}

.ai-carousel__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--ai-color-border-strong);
    transform: translate(-50%, -50%);
    transition:
        background-color var(--ai-duration) var(--ai-ease),
        width var(--ai-duration) var(--ai-ease);
}

.ai-carousel__dot:hover::after {
    background-color: var(--ai-color-primary);
}

.ai-carousel__dot.is-current::after {
    width: 1.5rem;
    border-radius: var(--ai-radius-pill);
    background-color: var(--ai-color-primary);
}

.ai-carousel__playpause {
    padding: var(--ai-space-2) var(--ai-space-4);
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-wide);
    text-transform: uppercase;
    color: var(--ai-color-ink-subtle);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-pill);
}

.ai-carousel__playpause:hover {
    color: var(--ai-color-primary-dark);
    border-color: var(--ai-color-border-strong);
}

.ai-carousel__playpause[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Pricing (#pricing)
   -------------------------------------------------------------------------- */

.ai-pricing__grid {
    --ai-grid-min: 17rem;
    align-items: stretch;
}

.ai-plan {
    position: relative;
    gap: var(--ai-space-4);
    padding-top: var(--ai-space-8);
}

.ai-plan__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--ai-space-1) var(--ai-space-4);
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-bold);
    letter-spacing: var(--ai-tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ai-color-ink-inverse);
    background: var(--ai-gradient-brand);
    border-radius: var(--ai-radius-pill);
}

.ai-plan__name {
    font-size: var(--ai-text-xl);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-normal);
}

.ai-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ai-space-2);
    padding-block: var(--ai-space-2);
}

.ai-plan__price-value {
    font-size: var(--ai-text-3xl);
    font-weight: var(--ai-weight-bold);
    letter-spacing: var(--ai-tracking-tight);
    color: var(--ai-color-primary-dark);
}

/* "Custom Quote" is a phrase, not a figure -- it should not shout like one. */
.ai-plan__price-value--custom {
    font-size: var(--ai-text-xl);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-normal);
}

.ai-plan__price-period,
.ai-plan__price-note {
    font-size: var(--ai-text-sm);
    color: var(--ai-color-ink-subtle);
}

.ai-plan__features {
    padding-top: var(--ai-space-4);
    border-top: 1px solid var(--ai-color-border);
}

.ai-plan__cta {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   FAQ (#faq) — native details/summary accordion
   -------------------------------------------------------------------------- */

.ai-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-3);
}

.ai-accordion__item {
    overflow: hidden;
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-xs);
    transition:
        border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-accordion__item:hover {
    border-color: var(--ai-color-border-dark, var(--ai-color-border));
}

.ai-accordion__item[open] {
    border-color: var(--ai-color-primary-light);
    box-shadow: 0 4px 18px -3px rgba(26, 61, 109, 0.09);
    background-color: var(--ai-color-surface);
}

.ai-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-4);
    padding: var(--ai-space-5);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Suppress the native disclosure triangle in both engines. */
.ai-accordion__summary::-webkit-details-marker {
    display: none;
}

.ai-accordion__summary::marker {
    content: "";
}

.ai-accordion__summary:hover {
    background-color: var(--ai-color-primary-tint);
}

.ai-accordion__summary:focus-visible {
    outline: 3px solid var(--ai-color-focus);
    outline-offset: -3px;
}

.ai-accordion__question {
    font-size: var(--ai-text-lg);
    font-weight: var(--ai-weight-semibold);
    letter-spacing: var(--ai-tracking-normal);
    line-height: var(--ai-leading-snug);
    color: var(--ai-color-ink);
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-accordion__item[open] .ai-accordion__question {
    color: var(--ai-color-primary-dark);
}

.ai-accordion__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background-color: var(--ai-color-primary-light);
    color: var(--ai-color-primary-dark);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-accordion__item[open] .ai-accordion__indicator {
    transform: rotate(180deg);
    background-color: var(--ai-color-primary);
    color: #ffffff;
}

.ai-accordion__panel {
    padding: 0 var(--ai-space-5) var(--ai-space-5);
    font-size: var(--ai-text-base);
    line-height: var(--ai-leading-relaxed);
    color: var(--ai-color-ink-muted);
}

.ai-accordion__panel p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Final CTA (#final-cta) + lead capture form
   -------------------------------------------------------------------------- */

.ai-final-cta__intro {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.ai-final-cta__intro > * + * {
    margin-top: var(--ai-space-4);
}

.ai-final-cta__buttons {
    justify-content: center;
    margin-top: var(--ai-space-6);
}

.ai-lead-form {
    max-width: 52rem;
    margin: var(--ai-space-12) auto 0;
    scroll-margin-top: calc(var(--ai-header-height) + var(--ai-space-4));
}

.ai-lead-form__card {
    padding: var(--ai-space-6);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-xl);
    box-shadow: var(--ai-shadow-lg);
}

@media (min-width: 48em) {
    .ai-lead-form__card {
        padding: var(--ai-space-10);
    }
}

.ai-lead-form__title {
    font-size: var(--ai-text-2xl);
}

.ai-lead-form__subtitle {
    margin-top: var(--ai-space-2);
    margin-bottom: var(--ai-space-6);
    font-size: var(--ai-text-sm);
    line-height: var(--ai-leading-relaxed);
    color: var(--ai-color-ink-muted);
}

.ai-lead-form__plan-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ai-space-2);
    margin-bottom: var(--ai-space-5);
    padding: var(--ai-space-3) var(--ai-space-4);
    font-size: var(--ai-text-sm);
    color: var(--ai-color-primary-dark);
    background-color: var(--ai-color-primary-light);
    border-radius: var(--ai-radius-md);
}

.ai-lead-form__plan-note[hidden] {
    display: none;
}

.ai-lead-form__plan-clear {
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-primary-dark);
    text-decoration: underline;
}

.ai-lead-form__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ai-space-4);
    padding: var(--ai-space-6) var(--ai-space-2);
    text-align: center;
}

.ai-lead-form__success[hidden],
.ai-lead-form__body[hidden] {
    display: none;
}

.ai-lead-form__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--ai-color-success-light);
    color: var(--ai-color-success);
}

.ai-lead-form__success-icon .ai-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.ai-lead-form__success-title {
    font-size: var(--ai-text-2xl);
}

.ai-lead-form__success-text {
    max-width: 32rem;
    color: var(--ai-color-ink-muted);
}

/* --------------------------------------------------------------------------
   Interactive Appointment Booking Widget (Lead Form)
   -------------------------------------------------------------------------- */

.ai-booking-field {
    padding: var(--ai-space-4);
    background-color: var(--ai-color-surface-sunken);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-lg);
}

.ai-booking-selected {
    display: flex;
    align-items: center;
    gap: var(--ai-space-3);
    padding: var(--ai-space-3) var(--ai-space-4);
    margin-bottom: var(--ai-space-3);
    background-color: var(--ai-color-primary-light);
    border: 1px solid var(--ai-color-primary);
    border-radius: var(--ai-radius-md);
    color: var(--ai-color-primary-dark);
}

.ai-booking-selected__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--ai-color-primary);
}

.ai-booking-selected__details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ai-booking-selected__title {
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ai-color-primary);
}

.ai-booking-selected__datetime {
    font-size: var(--ai-text-sm);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink);
}

.ai-booking-selected__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ai-color-ink-muted);
    cursor: pointer;
    border-radius: var(--ai-radius-sm);
    transition: background-color var(--ai-duration) var(--ai-ease), color var(--ai-duration) var(--ai-ease);
}

.ai-booking-selected__clear:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--ai-color-ink);
}

.ai-booking-widget {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ai-space-4);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-md);
    padding: var(--ai-space-4);
}

@media (min-width: 48em) {
    .ai-booking-widget {
        grid-template-columns: 1.15fr 1fr;
    }
}

.ai-cal {
    display: flex;
    flex-direction: column;
}

.ai-cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ai-space-3);
}

.ai-cal__title {
    font-size: var(--ai-text-base);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink);
}

.ai-cal__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--ai-color-border);
    background-color: var(--ai-color-surface);
    border-radius: var(--ai-radius-sm);
    cursor: pointer;
    color: var(--ai-color-ink);
    transition: background-color var(--ai-duration) var(--ai-ease);
}

.ai-cal__nav-btn:hover:not(:disabled) {
    background-color: var(--ai-color-surface-sunken);
}

.ai-cal__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ai-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink-muted);
    margin-bottom: var(--ai-space-2);
}

.ai-cal__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ai-cal__day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--ai-text-sm);
    font-weight: var(--ai-weight-medium);
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: var(--ai-radius-sm);
    cursor: pointer;
    transition: all var(--ai-duration) var(--ai-ease);
    color: var(--ai-color-ink);
}

.ai-cal__day:hover:not(.is-disabled):not(.is-empty) {
    background-color: var(--ai-color-primary-light);
    color: var(--ai-color-primary-dark);
}

.ai-cal__day.is-selected {
    background-color: var(--ai-color-primary) !important;
    color: #ffffff !important;
    font-weight: var(--ai-weight-semibold);
}

.ai-cal__day.is-today:not(.is-selected) {
    border-color: var(--ai-color-primary);
    font-weight: var(--ai-weight-semibold);
}

.ai-cal__day.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--ai-color-ink-subtle);
}

.ai-cal__day.is-holiday {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
    opacity: 0.6;
    text-decoration: line-through;
}

.ai-cal__day.is-empty {
    cursor: default;
}

.ai-booking-slots {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    border-top: 1px solid var(--ai-color-border);
    padding-top: var(--ai-space-3);
}

@media (min-width: 48em) {
    .ai-booking-slots {
        border-top: none;
        padding-top: 0;
        border-left: 1px solid var(--ai-color-border);
        padding-left: var(--ai-space-4);
    }
}

.ai-booking-slots__head {
    margin-bottom: var(--ai-space-3);
}

.ai-booking-slots__title {
    font-size: var(--ai-text-sm);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink);
}

.ai-booking-slots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--ai-space-2);
    max-height: 16rem;
    overflow-y: auto;
    padding-right: var(--ai-space-1);
}

.ai-slot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ai-space-2) var(--ai-space-3);
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-medium);
    border: 1px solid var(--ai-color-border);
    background-color: var(--ai-color-surface);
    color: var(--ai-color-ink);
    border-radius: var(--ai-radius-sm);
    cursor: pointer;
    transition: all var(--ai-duration) var(--ai-ease);
}

.ai-slot-btn:hover:not(:disabled) {
    border-color: var(--ai-color-primary);
    background-color: var(--ai-color-primary-light);
    color: var(--ai-color-primary-dark);
}

.ai-slot-btn.is-selected {
    background-color: var(--ai-color-primary);
    border-color: var(--ai-color-primary);
    color: #ffffff;
    font-weight: var(--ai-weight-semibold);
}

.ai-slot-btn:disabled,
.ai-slot-btn.is-booked {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: line-through;
    background-color: var(--ai-color-surface-sunken);
}

/* Uploaded imagery. Both are optional: every section renders correctly with
   image_path null, which is its seeded state. */

/* Hidden on phones, like the other card imagery. Five steps each carrying a
   16:10 photo turned the onboarding section into a long scroll of pictures
   with the sequence -- which is the point of the section -- lost between them. */
.ai-timeline__media {
    display: none;
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 16 / 10;
    margin-top: var(--ai-space-4);
    object-fit: cover;
    background-color: var(--ai-color-surface-sunken);
    border-radius: var(--ai-radius-md);
}

@media (min-width: 40em) {
    .ai-timeline__media {
        display: block;
    }
}

/* The final CTA sits on the light hero gradient, so the placeholder tint has
   to be a light surface -- a translucent white would have been invisible. */
.ai-final-cta__media {
    display: block;
    width: 100%;
    max-width: 28rem;
    height: auto;
    aspect-ratio: 2 / 1;
    margin-inline: auto;
    border-radius: var(--ai-radius-lg);
}

img.ai-final-cta__media {
    object-fit: cover;
    background-color: var(--ai-color-surface-sunken);
}

/* Section-level illustration above the onboarding timeline. */
.ai-timeline-media {
    max-width: 34rem;
    margin: 0 auto var(--ai-space-10);
}

.ai-timeline-media .ai-illustration {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ai-radius-lg);
}

/* --------------------------------------------------------------------------
   Savings calculator (#savings-calculator) — Your Numbers
   -------------------------------------------------------------------------- */

.ai-calc__form {
    max-width: 64rem;
    margin-inline: auto;
}

.ai-calc__shell {
    padding: var(--ai-space-5);
    background-color: var(--ai-color-surface);
    border: 1px solid var(--ai-color-border);
    border-radius: var(--ai-radius-xl);
    box-shadow: var(--ai-shadow-lg);
}

@media (min-width: 48em) {
    .ai-calc__shell {
        padding: var(--ai-space-8);
    }
}

.ai-calc__panel-label {
    margin: 0 0 var(--ai-space-4);
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-bold);
    letter-spacing: var(--ai-tracking-wide);
    text-transform: uppercase;
    color: var(--ai-color-ink-subtle);
}

.ai-calc__panel-label--inverse {
    color: var(--ai-color-ink-inverse-muted);
}

.ai-calc__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ai-space-6);
    align-items: stretch;
}

@media (min-width: 56em) {
    .ai-calc__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--ai-space-8);
    }
}

.ai-calc__inputs {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Two up at every width, phones included. stretch rather than start so the
   pairing rule below has room to work. */
.ai-calc__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ai-space-3);
    align-items: stretch;
}

/* forms.css stacks consecutive .ai-field siblings with margin-top. Inside this
   grid that pushes every 2nd/3rd/4th cell down a step — kill it; gap owns spacing. */
.ai-calc__fields > .ai-field + .ai-field {
    margin-top: 0;
}

/* Labels in a row run to different line counts — "Front desk staff" against
   "Average monthly salary, per person" — which would leave the two inputs at
   different heights. Let the label absorb the slack so the inputs line up. */
.ai-calc__fields > .ai-field {
    display: flex;
    flex-direction: column;
}

.ai-calc__fields .ai-calc__input {
    margin-top: auto;
}

/* Monthly collections is the fifth of five, so it lands alone on the last row.
   Spanning it keeps that row from looking half-empty — and it is the figure
   with the widest number in it, so it is the one that wants the room. */
.ai-calc__fields .ai-field:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (min-width: 40em) {
    .ai-calc__fields {
        gap: var(--ai-space-4);
    }
}

/* The currency mark sits inside the field rather than in the label, so the
   unit is where the number is being typed. */
.ai-calc__input {
    position: relative;
}

.ai-calc__input.has-prefix .ai-input {
    padding-left: var(--ai-space-8);
}

.ai-calc__prefix {
    position: absolute;
    top: 50%;
    left: var(--ai-space-3);
    transform: translateY(-50%);
    font-weight: var(--ai-weight-semibold);
    color: var(--ai-color-ink-subtle);
    pointer-events: none;
}

/* Spin buttons steal width and invite click-by-click editing on figures that
   are typed, not nudged. */
.ai-calc__input .ai-input::-webkit-outer-spin-button,
.ai-calc__input .ai-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ai-calc__input .ai-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Centred on both axes. justify-content was already doing the vertical; the
   pair added here does the horizontal, which is what left "YOUR ESTIMATE"
   hanging flush left above a centred sentence. Scoped to this panel, so the
   same .ai-calc__panel-label over the inputs stays left where a form wants it. */
.ai-calc__results {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    padding: var(--ai-space-6);
    text-align: center;
    background: var(--ai-gradient-dark);
    border-radius: var(--ai-radius-lg);
    box-shadow: var(--ai-shadow-md);
}

/* The one exception to align-items: center above. The breakdown rows below
   are label-left / value-right, which needs the full panel width -- centring
   would shrink this box to its content and pull the two sides together. */
.ai-calc__figures {
    align-self: stretch;
}

@media (min-width: 56em) {
    .ai-calc__results {
        position: sticky;
        top: calc(var(--ai-header-height) + var(--ai-space-4));
        min-height: 100%;
    }
}

.ai-calc__placeholder {
    margin: 0;
    font-size: var(--ai-text-sm);
    line-height: var(--ai-leading-relaxed);
    color: var(--ai-color-ink-inverse-muted);
    text-align: center;
}

.ai-calc__results:not(.is-empty) .ai-calc__placeholder {
    display: none;
}

.ai-calc__total-label {
    margin: 0;
    font-size: var(--ai-text-xs);
    font-weight: var(--ai-weight-bold);
    letter-spacing: var(--ai-tracking-wide);
    text-transform: uppercase;
    color: var(--ai-color-accent);
}

.ai-calc__total {
    margin: var(--ai-space-2) 0 var(--ai-space-5);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: var(--ai-weight-bold);
    line-height: 1.05;
    letter-spacing: var(--ai-tracking-tight);
    /* Digits must not jiggle while the total updates on every keystroke. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--ai-color-ink-inverse);
}

.ai-calc__breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-3);
    margin: 0;
    padding-top: var(--ai-space-4);
    border-top: 1px solid var(--ai-color-border-inverse);
}

.ai-calc__breakdown > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ai-space-3);
}

.ai-calc__breakdown dt {
    font-size: var(--ai-text-sm);
    color: var(--ai-color-ink-inverse-muted);
}

.ai-calc__breakdown dd {
    margin: 0;
    font-size: var(--ai-text-base);
    font-weight: var(--ai-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--ai-color-ink-inverse);
}

.ai-calc__contact {
    margin-top: var(--ai-space-6);
}

.ai-calc__contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ai-space-4);
    align-items: start;
}

.ai-calc__contact-grid > .ai-field + .ai-field {
    margin-top: 0;
}

@media (min-width: 40em) {
    .ai-calc__contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ai-calc__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--ai-space-6);
}

/* The submit confirmation and error sit between the contact panel and the
   button, so the answer lands where the click did. */
.ai-calc__alert {
    margin-top: var(--ai-space-6);
    margin-bottom: 0;
}

/* .ai-alert and .ai-calc__actions are both display:flex, which outranks the
   UA stylesheet's [hidden] rule -- without these they would never hide. */
.ai-calc__alert[hidden],
.ai-calc__actions[hidden] {
    display: none;
}

.ai-calc .ai-section-footnote {
    margin-top: var(--ai-space-6);
}