/* Quote-section shell — #forespoergsel. Dark section per export CSS (--bg-dark,
   dark-dots texture, asymmetric clamp padding). The form card's static
   composition (green-light progress band + step dots, full-width choice
   rows, radius-16 white card) is transcribed from the export's
   progress-bar/step markup; only the JS-driven step-transition *behavior*
   is deferred to Stage 4, not the visual. Badges/CTA are tokens-only
   (genuinely absent from the export). */

.quote {
    position: relative;
    padding-block: clamp(56px, 14.6px + 8.64vw, 128px);
    background-color: var(--bg-dark);
    overflow: hidden;
}

/* Dots on their own layer for the 3.4 parallax (transform-only). */
.quote::before {
    content: '';
    position: absolute;
    inset: -6% 0;
    pointer-events: none;
    background-image: var(--quote-bg-url);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* Barely perceptible light drift (motion concept §4.5).
   `pointer-events: none` is not cosmetic here: ::after paints *after* the
   section's children, so without it this layer covered the whole form card
   and swallowed every click on it (found in 4.2 verification). */
.quote::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 50% at 30% 30%, rgb(145 196 1 / .12), transparent 70%);
    animation: quote-light-drift 24s ease-in-out infinite alternate;
}

@keyframes quote-light-drift {
    from { transform: translate3d(-4%, -2%, 0); }
    to { transform: translate3d(4%, 2%, 0); }
}

.quote__container {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .quote::after {
        animation: none;
    }
}

.quote__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
}

@media (min-width: 992px) {
    .quote__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-32);
    }
}

.quote__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

@media (min-width: 992px) {
    .quote__intro {
        max-width: 528px;
    }
}

/* Finish-quality checklist (7.1, §5 — dark-section contrast re-verified):
   the eyebrow's usual --green-dark reads at 3.71:1 on this section's dark
   navy background, short of WCAG AA's 4.5:1 for text this size (14px/600 —
   below the large-text threshold). --green is the same brand accent, just
   the brighter of the two green tokens, and clears 5.71:1 here. Every other
   section's eyebrow sits on a light background, where --green-dark already
   passes, so this override is scoped to the one dark section that needs it. */
.quote .eyebrow {
    color: var(--green);
}

.quote__title {
    color: var(--white);
    margin: 0;
}

.quote__sub {
    color: var(--neutral-200);
    margin: 0;
    line-height: 1.6;
}

.quote__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.quote__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--neutral-200);
    font-size: var(--text-sm);
    font-weight: 500;
}

.quote__badge-icon {
    display: inline-flex;
    color: var(--green);
}

.quote__cta {
    align-self: flex-start;
    margin-top: var(--space-8);
}

.quote__form-card {
    width: 100%;
    max-width: 528px;
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
}

.quote__progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    height: 56px;
    padding-inline: var(--space-24);
    background: var(--green-light);
}

@media (min-width: 768px) {
    .quote__progress-bar {
        padding-inline: var(--space-32);
    }
}

.quote__progress-label {
    color: var(--green-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    white-space: nowrap;
}

.quote__progress-steps {
    display: flex;
    flex: 1;
    max-width: 140px;
    gap: var(--space-8);
}

.quote__progress-step {
    flex-grow: 1;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--green-mid);
}

.quote__progress-step.is-active {
    background: var(--green);
}

/* Fixed-height step area (spec §3 hard rule: the card must not resize as
   the visitor moves between steps). Only applied once JS has taken over —
   without it the form is one long scroll and must be free to grow. */
.quote__steps {
    display: flex;
    flex-direction: column;
}

.is-stepped .quote__steps {
    /* --steps-height is measured from the tallest step by js/quote-form.js;
       the fallback only applies for the frames before that runs. */
    height: var(--steps-height, 420px);
    /* A step that outgrows the box scrolls inside it rather than stretching
       the card; the spec's answer is to split it into another step, so this
       is the safety net, not the design. */
    overflow-y: auto;
}

.quote__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-24);
}

/* Hiding a step relies on the global `[hidden]` rule in main.css — a class
   selector's `display` would otherwise outrank the UA sheet and leave every
   step painted (the 4.1 bug that grew the card to 2640px). */

/* focus({preventScroll}) targets the step wrapper; it is a move-to marker,
   not an interactive control, so it should not draw a focus ring. */
.quote__step:focus {
    outline: none;
}

@media (min-width: 768px) {
    .quote__step {
        padding: var(--space-32);
    }
}

.quote__hint {
    margin: calc(-1 * var(--space-8)) 0 0;
    color: var(--green-dark);
    font-size: var(--text-sm);
}

/* Paired number/short fields sit two-up where there is room. */
.quote__fields {
    display: grid;
    gap: var(--space-16);
}

@media (min-width: 560px) {
    .quote__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A checkbox used on its own (kitchen, GDPR) rather than inside a group. */
.quote__choice--standalone {
    align-items: flex-start;
    flex: 0 0 auto;
}

.quote__actions {
    display: flex;
    gap: var(--space-16);
    padding: 0 var(--space-24) var(--space-24);
}

@media (min-width: 768px) {
    .quote__actions {
        padding: 0 var(--space-32) var(--space-32);
    }
}

.quote__actions .btn {
    flex: 1;
}

.quote__step-title {
    margin: 0 0 var(--space-16);
    color: var(--primary);
    font-size: var(--text-h4);
    font-weight: 600;
}

.quote__choices {
    display: flex;
    gap: var(--space-8);
    margin-top: calc(-1 * var(--space-16));
}

.quote__choices--stack {
    flex-direction: column;
}

.quote__choices--row {
    flex-direction: row;
}

.quote__choice {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-16);
    background: var(--neutral-200);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-micro);
}

.quote__choice:hover {
    background: var(--neutral-400);
}

.quote__choice:has(.quote__choice-input:checked) {
    background: var(--white);
    box-shadow: 0 0 0 1px var(--neutral-800) inset;
}

.quote__choice:has(.quote__choice-input:focus-visible) {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Custom control instead of the browser default (owner note 2026-07-18).
   The native input stays in place with `appearance: none` — it keeps the
   focus, keyboard and form semantics, we only repaint it. The tick and dot
   are background images because pseudo-elements on <input> are not
   dependable across engines. */
.quote__choice-input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--neutral-800);
    border-radius: var(--radius-xs);
    background: var(--white);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: background-color var(--motion-micro), border-color var(--motion-micro);
}

.quote__choice-input[type="radio"] {
    border-radius: var(--radius-pill);
}

.quote__choice-input:checked {
    border-color: var(--green);
    background-color: var(--green);
}

.quote__choice-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.quote__choice-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='white'/%3E%3C/svg%3E");
}

/* The row already draws a focus ring via :has() above. */
.quote__choice-input:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .quote__choice,
    .quote__choice-input {
        transition: none;
    }
}


/* ---------------------------------------------- submit states (4.3) */

/* Form-level failure (send refused / network down). Sits above the steps so
   it is visible wherever in the form the visitor pressed send. */
.quote__form-error {
    margin: 0;
    padding: var(--space-16) var(--space-24) 0;
    color: var(--error);
    font-size: var(--text-sm);
    line-height: 1.35;
}

/* Success state (4.5): confirmation + what was sent + the Stage-B CTA. */
.quote__success {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-32) var(--space-24);
}

.quote__success:focus {
    outline: none;
}

.quote__success-title {
    margin: 0;
    color: var(--primary);
    font-size: var(--text-h3);
    font-weight: 600;
}

@media (min-width: 768px) {
    .quote__form-error {
        padding: var(--space-24) var(--space-32) 0;
    }

    .quote__success {
        padding: var(--space-40) var(--space-32);
    }
}

.quote__success-text,
.quote__success-lead {
    margin: 0;
    color: var(--secondary);
    font-size: var(--text-base);
    line-height: 1.6;
}

.quote__success-summary {
    width: 100%;
    padding: var(--space-16) 0;
    border-top: 1px solid var(--neutral-800);
    border-bottom: 1px solid var(--neutral-800);
}

.quote__success-summary-label {
    margin: 0 0 var(--space-8);
    color: var(--secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Definition list, not a table: this is a set of label/value pairs, and the
   two-column look is a layout choice that collapses on narrow screens. */
.quote__summary {
    margin: 0;
    display: grid;
    gap: var(--space-8);
}

.quote__summary-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

@media (min-width: 480px) {
    .quote__summary-row {
        grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
        gap: var(--space-16);
    }
}

.quote__summary dt {
    color: var(--secondary);
    font-size: var(--text-sm);
}

.quote__summary dd {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    /* A long free-text answer must wrap, not widen the card. */
    overflow-wrap: anywhere;
}

.quote__success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    width: 100%;
}

.quote__success-actions .btn {
    flex: 1 1 auto;
}