/* ==========================================================================
   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
   -------------------------------------------------------------------------- */

.ai-metrics__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ai-space-4);
    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);
    }
}

.ai-metric {
    display: flex;
    flex-direction: column;
    gap: var(--ai-space-2);
    height: 100%;
    padding: var(--ai-space-6);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ai-color-border-inverse);
    border-radius: var(--ai-radius-lg);
}

/* --------------------------------------------------------------------------
   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);
    font-size: clamp(2rem, 4.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 count-up runs. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--ai-color-ink);
}

.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;
}

.ai-metric__label {
    font-size: var(--ai-text-base);
    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-sm);
    line-height: var(--ai-leading-normal);
    color: var(--ai-color-ink-muted);
}

.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;
}

/* --------------------------------------------------------------------------
   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;
}

.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 var(--ai-duration) var(--ai-ease),
        box-shadow var(--ai-duration) var(--ai-ease);
}

.ai-accordion__item[open] {
    border-color: var(--ai-color-border-strong);
    box-shadow: var(--ai-shadow-sm);
}

.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;
    transition: background-color var(--ai-duration) var(--ai-ease);
}

/* 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);
}

.ai-accordion__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--ai-color-primary-light);
    color: var(--ai-color-primary-dark);
    transition: transform var(--ai-duration) var(--ai-ease);
}

.ai-accordion__item[open] .ai-accordion__indicator {
    transform: rotate(180deg);
}

.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);
}

/* --------------------------------------------------------------------------
   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);
}

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

.ai-timeline__media {
    display: block;
    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);
}

/* 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);
}