/**************************************************************************
* CSS 01. ROOT DESIGN TOKENS
* Global layout, color, surface, shadow, motion, spacing, radius, and icon tokens.
**************************************************************************/

:root {
    /* Brand and accent tokens. */
    --accent-text: #ea580c;
    --accent: #ff7a1a;
    --accent-rgb: 255, 122, 26;
    --accent-dark: #c2410c;
    --accent-light: #fff7ed;
    --purple: #7c3aed;
    --purple-dark: #5b21b6;
    --purple-light: #f5f3ff;
    --purple-border: #ddd6fe;

    /* Surface and border tokens. */
    --page-bg: #f7f3ec;
    --page-bg-soft: #f1eee9;
    --surface-subtle-bg: #faf9f6;
    --surface-gradient-end: #faf8f4;
    --surface-bg: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%);

    /* Color tokens */
    --border: #d9dee7;
    --border-soft: #e8edf4;
    --border-strong: #c7ceda;
    --icon-border: #cbd5e1;

    /* Shadow and glow tokens. */
    --shadow-soft: 0 12px 32px rgba(17, 24, 39, var(--a-s));
    --shadow-card: 0 18px 45px rgba(17, 24, 39, var(--a-s));
    --shadow-card-hover: 0 22px 55px rgba(17, 24, 39, var(--a-m));
    --shadow-card-purple-hover:
        0 20px 46px rgba(17, 24, 39, var(--a-m)),
        0 0 0 1px rgba(var(--purple-rgb), var(--a-l)),
        0 0 28px rgba(var(--purple-rgb), var(--a-m));

    /* Button color and shadow tokens. */
    --button-primary-rgb: var(--accent-rgb);
    --button-secondary-shadow-rgb: 107, 114, 128;

    /* Button color and shadow tokens. */
    --button-primary-shadow:
        0 10px 22px rgba(17, 24, 39, var(--a-m)),
        0 0 0 1px rgba(var(--accent-rgb), var(--a-l)),
        0 0 18px rgba(var(--accent-rgb), var(--a-l)),
        0 0 34px rgba(var(--accent-rgb), var(--a-m));

    --button-primary-shadow-hover:
        0 14px 32px rgba(17, 24, 39, var(--a-m)),
        0 0 0 1px rgba(var(--accent-rgb), var(--a-xl)),
        0 0 26px rgba(var(--accent-rgb), var(--a-xl)),
        0 0 52px rgba(var(--accent-rgb), var(--a-l));

    --button-secondary-shadow:
        0 8px 18px rgba(17, 24, 39, var(--a-s)),
        0 0 0 1px rgba(var(--button-secondary-shadow-rgb), var(--a-m)),
        0 0 14px rgba(var(--button-secondary-shadow-rgb), var(--a-s));

    --button-secondary-shadow-hover:
        0 12px 26px rgba(17, 24, 39, var(--a-m)),
        0 0 0 1px rgba(var(--button-secondary-shadow-rgb), var(--a-l)),
        0 0 22px rgba(var(--button-secondary-shadow-rgb), var(--a-l));

    --button-height: clamp(48px, calc((1380px + 30vw) / 31), 60px);
    --button-small-height: clamp(38px, calc((1124px + 15vw) / 31), 44px);
    --icon-box-size: clamp(40px, calc((1060px + 50vw) / 31), 60px);

    /* Decoration and icon size tokens. */
    --decor-line-width: 28px;
    --icon-image-size: calc(var(--icon-box-size) * 0.86);
    --check-icon-size: 0.946em;
    --issue-icon-size: 20px;
    --faq-icon-size: 28px;
    --faq-line-length: 12px;
    --faq-line-thickness: 2px;
}

/**************************************************************************
* CSS 02. BASE RESET AND GLOBAL ELEMENTS
* Browser reset, page background, global text behavior, media defaults, and focus states.
**************************************************************************/

/* Hidden-element override. */
[hidden] {
    display: none !important;
}

body {
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 255, 255, var(--a-3xl)) 0%,
            rgba(255, 255, 255, var(--a-0)) 38%),
        radial-gradient(circle at 86% 8%,
            rgba(118, 92, 67, var(--a-xs)) 0%,
            transparent 30%),
        linear-gradient(180deg, var(--page-bg) 0%, #f5f2ed 48%, var(--page-bg-soft) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Link and button inheritance defaults. */
a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

/* Text selection color. */
::selection {
    color: #7c2d12;
    background-color: rgba(var(--accent-rgb), var(--a-xl));
}

/* Keyboard focus ring. */
:focus-visible:not([data-popup-open]) {
    border-radius: var(--radius-s);
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/**************************************************************************
* CSS 03. TYPOGRAPHY UTILITIES
* Reusable text scales, shared text colors, and text wrapping helpers.
**************************************************************************/

/* Text line-lock wrapping helpers. */

.line-lock>span {
    display: inline;
}

.line-lock.is-line-locked>span {
    display: block;
    white-space: nowrap;
}

.phrase-lock {
    white-space: nowrap;
}

/**************************************************************************
* CSS 04. GLOBAL STACK SPACING
* Default vertical rhythm for commonly stacked text, tags, grids, and actions.
**************************************************************************/

/* Default text stack spacing. */


:is(.label, .section-title):not(:last-child) {
    margin-bottom: var(--space-l);
}

:is(.stack-grid, .pill-list):not(:last-child) {
    margin-bottom: var(--space-xl);
}

.actions:not(:last-child) {
    margin-bottom: var(--space-2xl);
}

/**************************************************************************
* CSS 05. PAGE LAYOUT AND SECTION DIVIDERS
* Main section spacing, centered container, section headers, and decorative divider lines.
**************************************************************************/

/* Centered page container. */
.container {
    position: relative;
    z-index: 1;
    width: min(var(--page-container), calc(100% - (var(--outer-padding) * 2)));
    margin-inline: auto;
}

/* Section heading layout. */
.section-header {
    margin-bottom: var(--space-2xl);
}

.section-title-accent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
}

.section-title-accent::before {
    flex: 0 0 calc(var(--decor-line-width) + 16px);
    margin-block-start: calc((1lh - 16px) / 2);
}

/**************************************************************************
* CSS 06. SHARED FOUNDATIONS
* Reusable card shell, accent marker, and shared card text defaults.
**************************************************************************/

/* Shared card shell. */
.card {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--surface-bg);
    box-shadow: var(--shadow-soft);
}

/* Shared marker geometry + Chrome-safe clean pill glow */
:is(.label, .section-title-accent)::before {
    content: "";
    width: calc(var(--decor-line-width) + 16px);
    height: 16px;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(90deg, #ffb15c 0%, var(--accent) 55%, #f97316 100%) center / var(--decor-line-width) 3px no-repeat,
        rgba(var(--accent-rgb), var(--a-m));
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), var(--a-xs)),
        0 0 0 5px rgba(var(--accent-rgb), var(--a-s)),
        0 0 14px rgba(var(--accent-rgb), var(--a-l)),
        0 0 28px rgba(var(--accent-rgb), var(--a-m));
}

/**************************************************************************
* CSS 07. COMMON UI COMPONENTS
* Labels, buttons, icon boxes, check lists, tags, grids, feature cards, and arrow links.
**************************************************************************/

/* Clickable element cursor. */
:is(a[href], button, [data-popup-open]) {
    cursor: pointer;
}

/* Action button row. */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
}

/* Eyebrow label component. */
.label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-l);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.label>span {
    min-width: 0;
}

/* Shared check-list foundation. */
.check-list {
    font-size: clamp(0.9rem, calc((27rem + 4vw) / 31), 1rem);
    line-height: 1.4;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.check-list li::before {
    content: "";
    flex: 0 0 var(--check-icon-size);
    width: var(--check-icon-size);
    height: var(--check-icon-size);
    background-color: #15803d;
    -webkit-mask: url("/assets/media/icons/check.svg") center / contain no-repeat;
    mask: url("/assets/media/icons/check.svg") center / contain no-repeat;
}

/* Icon-and-title row. */
.icon-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    margin-bottom: var(--space-s);
}

.icon-box {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--icon-box-size);
    height: var(--icon-box-size);
    border: 1px solid rgba(var(--accent-rgb), var(--a-l));
    border-radius: var(--radius-s);
    font-weight: 950;
    color: var(--accent-dark);
    background: var(--accent-light);
}

.icon-box img {
    width: var(--icon-image-size);
    height: var(--icon-image-size);
    object-fit: contain;
    object-position: center;
}

/* Primary and secondary button base. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    position: relative;
    isolation: isolate;
    min-height: var(--button-height);
    padding: var(--space-l) var(--space-xl);
    border: 0;
    border-radius: var(--radius-s);
    font-weight: 800;
}

.button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.button-primary {
    color: var(--white);
}

.button-primary::before {
    border: 1px solid rgba(var(--accent-rgb), var(--a-xl));
    background: linear-gradient(180deg, #ff8a2c 0%, #f97316 100%);
    box-shadow: var(--button-primary-shadow);
}

.button-secondary {
    color: var(--text);
}

.button-secondary::before {
    border: 1px solid var(--border-strong);
    background: var(--white);
    box-shadow: var(--button-secondary-shadow);
}

.button:hover::before {
    transform: scale(1.06);
}

.button-primary:hover::before {
    border-color: rgba(var(--accent-rgb), var(--a-2xl));
    box-shadow: var(--button-primary-shadow-hover);
    filter: brightness(1.04);
}

.button-secondary:hover::before {
    border-color: rgba(var(--button-secondary-shadow-rgb), var(--a-xl));
    box-shadow: var(--button-secondary-shadow-hover);
    filter: brightness(1.02);
}

/* Compact full-width action button base. */
.button-small {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    width: 100%;
    min-height: var(--button-small-height);
    padding: var(--space-m) var(--space-l);
    border: 1px solid rgba(var(--accent-rgb), var(--a-xl));
    border-radius: var(--radius-s);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text);
    background: var(--white);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button-small:is(:hover, :focus-visible) {
    border-color: rgba(var(--accent-rgb), var(--a-2xl));
    background: var(--white);
    box-shadow:
        0 0 14px rgba(var(--accent-rgb), var(--a-l)),
        0 0 30px rgba(var(--accent-rgb), var(--a-l));
}

/* Reusable grid utilities. */
.grid {
    display: grid;
    gap: var(--space-xl);
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.stack-grid {
    display: grid;
    gap: var(--space-m);
}

/* Reusable feature card. */
.feature-card {
    min-height: 100%;
    padding: var(--space-xl);
}

/* Arrow text link. */
.arrow-link {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    font-weight: 750;
    color: var(--accent-text);
}

.arrow-link-text {
    transition: text-shadow var(--transition-fast);
}

.arrow-icon {
    display: inline-block;
    flex: 0 0 1.2em;
    width: 1.2em;
    height: 0.8em;
    background-color: currentColor;
    transition: transform var(--transition-fast);
    -webkit-mask: url("/assets/media/icons/arrow_right.svg") center / contain no-repeat;
    mask: url("/assets/media/icons/arrow_right.svg") center / contain no-repeat;
}

:is(.service-button, .arrow-link):hover .arrow-icon {
    transform: translateX(0.6em);
}

.arrow-link:hover .arrow-link-text {
    text-shadow:
        0 0 14px rgba(var(--accent-rgb), var(--a-2xl)),
        0 0 28px rgba(var(--accent-rgb), var(--a-xl));
}

/* tag pills. */
.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    list-style: none;
}

.pill-list li {
    flex: 0 0 auto;
    padding: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background: rgba(255, 255, 255, var(--a-3xl));
    box-shadow: 0 8px 22px rgba(17, 24, 39, var(--a-xs));
}

/**************************************************************************
* CSS 08. HERO SECTION
* Hero grid, headline, video card, meta pills, and benefit grid.
**************************************************************************/

/* Hero split layout. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    align-items: center;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

/* Hero headline spacing. */
.hero-title {
    margin-bottom: var(--space-xl);
}

/* Hero video card. */
.media-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-l);
}

.media-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid var(--purple);
    border-radius: inherit;
    pointer-events: none;
}

/* Hero video fill. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero benefit grid. */
.benefit-grid {
    overflow: hidden;
    gap: var(--space-m);
    margin-bottom: var(--space-2xl);
}

/* Hero benefit cards */
.benefit-grid .feature-card {
    border-color: var(--border);
    background: var(--white);
    box-shadow: none;
}

/**************************************************************************
* CSS 09. HERO TRUST STRIP
* Compact trust cards shown below the hero benefits.
**************************************************************************/

/* Trust strip grid shell. */
.trust-grid {
    overflow: hidden;
    gap: var(--space-xs);
    background: transparent;
}

/* Individual trust strip cards. */
.trust-card {
    padding: var(--space-xl);
    background: var(--white);
    box-shadow: 0 0 0 calc(var(--space-xs) / 2) var(--border);
}

/* Small inner cards inside the big trust card */
#trust>.container>.grid-2>.card .grid-2>.feature-card {
    border-color: var(--border);
    background: var(--white);
}

/**************************************************************************
* CSS 10. SERVICES SECTION
* Service cards and service-button placement.
**************************************************************************/

/* Service card layout. */
.service-card {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    padding: var(--space-xl);
    transition: border-color var(--transition-fast);
}

/* Service card hover state. */
.service-card:hover {
    border-color: rgba(var(--purple-rgb), var(--a-2xl));
    box-shadow:
        0 20px 46px rgba(17, 24, 39, var(--a-m)),
        0 0 0 1px rgba(var(--purple-rgb), var(--a-l)),
        0 0 30px rgba(var(--purple-rgb), var(--a-m));
}

/* Service card link placement. */
.service-button {
    justify-content: center;
    margin-top: auto;
}

/**************************************************************************
* CSS 11. FIT ASSESSMENT SECTION
* Good-fit, check-first, and not-fitting repair case card styles.
**************************************************************************/

/* Fit card base. */
.fit-card {
    --fit-rgb: 107, 114, 128;
    --fit-title: var(--text);

    position: relative;
    overflow: hidden;
    padding: var(--space-xl);
    border: 1px solid rgba(var(--fit-rgb), var(--a-xl));
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--fit-rgb), var(--a-l)), transparent 38%),
        linear-gradient(180deg, rgba(var(--fit-rgb), var(--a-m)), rgba(var(--fit-rgb), var(--a-xs)));
}

/* Fit card glow. */
.fit-card::after {
    content: "";
    position: absolute;
    inset-block-start: -60px;
    inset-inline-end: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--fit-rgb), var(--a-l)), transparent 70%);
    pointer-events: none;
}

/* Fit card status colors. */
.fit-card.fit-good {
    --fit-rgb: 34, 197, 94;
    --fit-title: #14532d;
}

.fit-card.fit-check {
    --fit-rgb: 245, 158, 11;
    --fit-title: #78350f;
}

.fit-card.fit-bad {
    --fit-rgb: 239, 68, 68;
    --fit-title: #7f1d1d;
}

/* Fit card text layering. */
.fit-card h4 {
    position: relative;
    z-index: 1;
    color: var(--fit-title);
}

.fit-card p {
    position: relative;
    z-index: 1;
    color: #374151;
}

/**************************************************************************
* CSS 12. TRUST AND PROBLEM STATEMENT SECTION
* Two-column trust cards, issue rows, and warning icons.
**************************************************************************/

/* Trust section column cards. */
#trust>.container>.grid-2>.card {
    padding: var(--space-2xl);
}

/* Problem statement issue rows. */
.issue-list li {
    font-size: clamp(0.9rem, calc((27rem + 4vw) / 31), 1rem);
    line-height: 1.4;
    position: relative;
    padding: var(--space-m);
    padding-inline-start: var(--space-3xl);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    list-style: none;
    background: var(--white);
    box-shadow: 0 8px 22px rgba(17, 24, 39, var(--a-xs));
}

.issue-list li::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--space-m) + (1lh - var(--issue-icon-size)) / 2);
    inset-inline-start: var(--space-m);
    width: var(--issue-icon-size);
    height: var(--issue-icon-size);
    background: url("/assets/media/icons/exclamation.svg") center / contain no-repeat;
}

/**************************************************************************
* CSS 13. REPAIR EXAMPLES SECTION
* Repair example card clipping, media ratio, image fill, body padding, and popup radius.
**************************************************************************/

/* Repair example card shell. */
.case-card {
    overflow: hidden;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

/* Repair example hover purple card glow */
.case-card:hover {
    border-color: rgba(var(--purple-rgb), var(--a-2xl));
    box-shadow:
        0 20px 46px rgba(17, 24, 39, var(--a-m)),
        0 0 0 1px rgba(var(--purple-rgb), var(--a-l)),
        0 0 30px rgba(var(--purple-rgb), var(--a-m));
}

/* Repair example image hover: orange image-border glow only */
.case-media[data-popup-open]:is(:hover, :focus-visible)::before {
    box-shadow:
        inset 0 0 0 3px rgba(var(--accent-rgb), var(--a-3xl)),
        inset 0 0 9px rgba(var(--accent-rgb), var(--a-xl));
}

/* Repair example media frame. */
.case-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    border-block-end: 1px solid var(--border-soft);
}

/* Repair example image fill. */
.case-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Repair example text body. */
.case-body {
    padding: var(--space-xl);
}

.case-media[data-popup-open]::before {
    border-radius: var(--radius-l) var(--radius-l) 0 0;
}

/**************************************************************************
* CSS 14. SHARED MEDIA POPUP
* Clickable media trigger, overlay shell, popup card, close button, and media sizing.
**************************************************************************/

/* Media popup trigger highlight. */
[data-popup-open]::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), var(--a-0));
    transition: box-shadow var(--transition-fast);
}

[data-popup-open]:is(:hover, :focus-visible)::before {
    box-shadow: inset 0 0 0 4px rgba(var(--accent-rgb), var(--a-3xl));
}

/* Media popup overlay shell. */
.media-popup {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 1000;
    inset: 0 0 auto;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--transition-medium),
        visibility var(--transition-medium);
    pointer-events: none;
}

.media-popup.is-open {
    opacity: 1;
    visibility: visible;
}

/* Media popup backdrop. */
.media-popup-backdrop {
    position: absolute;
    inset: 0;
    object-position: center;
    background: rgba(0, 0, 0, var(--a-xl));
}

/* Media popup card. */
.media-popup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100vh;
    pointer-events: auto;
}

/* Media popup content fill. */
.media-popup-video,
.media-popup-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Media popup close button. */
.media-popup-close {
    position: fixed;
    z-index: 2;
    inset-block-start: calc(var(--space-l) + env(safe-area-inset-top));
    inset-inline-end: calc(var(--space-l) + env(safe-area-inset-right));
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #ff2b2b;
    background: rgba(0, 0, 0, var(--a-3xl));
}

/* Media popup close icon lines. */
.media-popup-close::before,
.media-popup-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 4px;
    border-radius: 999px;
    background: #ff2b2b;
    transform-origin: center;
}

.media-popup-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.media-popup-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Media popup close hover state. */
.media-popup-close:hover {
    background: #ff2b2b;
}

.media-popup-close:hover::before,
.media-popup-close:hover::after {
    background: #fff;
}

/**************************************************************************
* CSS 15. PROCESS STEPS SECTION
* Step counter reset, numbered cards, and process-card header layout.
**************************************************************************/

/* Step counter setup. */
#process .grid-step {
    counter-reset: step;
}

/* Step card shell. */
.step-card {
    overflow: hidden;
    padding: var(--space-xl);
    counter-increment: step;
}

/* Step card header. */
.step-card h4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-m);
}

/* Step card number badge. */
.step-card h4::after {
    content: counter(step, decimal-leading-zero);
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 2.4rem;
    border: 1px solid var(--purple-border);
    border-radius: var(--radius-s);
    font-size: 1.7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--purple-dark);
    background: var(--purple-light);
    pointer-events: none;
}

/**************************************************************************
* CSS 16. FAQ AND CTA SECTION
* FAQ layout, accordion controls, answer panels, CTA card, and checklist color.
**************************************************************************/

/* FAQ and CTA two-column layout. */
.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    align-items: start;
    gap: var(--space-xl);
}

/* FAQ item shell. */
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--white);
    box-shadow: 0 10px 28px rgba(17, 24, 39, var(--a-xs));
}

/* FAQ button layout. */
.faq-button {
    justify-content: space-between;
    gap: var(--space-xl);
    text-align: left;
}

/* FAQ button interactive state. */
.faq-button:is(:hover, :focus-visible) .faq-icon {
    border-color: var(--purple-border);
    background: var(--purple-light);
}

/* FAQ plus icon box. */
.faq-icon {
    flex-shrink: 0;
    position: relative;
    width: var(--faq-icon-size);
    height: var(--faq-icon-size);
    border: 1px solid var(--purple-border);
    border-radius: var(--radius-s);
    background: var(--purple-light);
}

/* FAQ plus icon lines. */
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: var(--faq-line-length);
    height: var(--faq-line-thickness);
    border-radius: var(--radius-pill);
    background: var(--purple-dark);
    transform: translate(-50%, -50%);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.faq-icon::after {
    width: var(--faq-line-thickness);
    height: var(--faq-line-length);
}

.faq-item.open .faq-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* JavaScript-controlled FAQ answer panel. */
.faq-answer {
    overflow: hidden;
}

.js .faq-answer {
    max-height: 0;
    transition: max-height var(--transition-medium);
}

/* FAQ answer text body. */
.faq-answer-inner {
    padding: var(--space-xl);
}

/* Final CTA card. */
.cta-card {
    padding: var(--space-2xl);
    background:
        radial-gradient(circle at top right, rgba(var(--accent-rgb), var(--a-m)), transparent 34%),
        var(--surface-bg);
}

/* CTA eyebrow text: "Nächster Schritt" */
.cta-card .label {
    color: var(--accent-text);
}

/**************************************************************************
* CSS 17. MOTION AND ANIMATION
* Reveal states and JavaScript-enabled entrance animation.
**************************************************************************/

/* Reveal fallback state. */
.reveal {
    opacity: 1;
    transform: none;
}

/* JavaScript-enabled reveal start state. */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/**************************************************************************
* CSS 18. RESPONSIVE LAYOUT RULES
* Breakpoint-specific layout adjustments and grid collapses.
**************************************************************************/


/* Large desktop and tablet grid adjustments. */
@media (max-width: 1399px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Medium desktop three-column grid adjustment. */
@media (max-width: 1199px) {
    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet single-column layout adjustment. */
@media (max-width: 1099px) {

    .hero-grid,
    .faq-layout {
        grid-template-columns: 1fr;
    }
}

/* Small tablet three-column grid collapse. */
@media (max-width: 799px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Mobile four-column grid collapse. */
@media (max-width: 599px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
}