@layer components {

    /* ── Verification section ───────────────────────────────────────
     Split layout — left column copy + checklist, right column document
     mock with verified seal overlay. */
    .c-verification {
        background: var(--color-surface-alt);
        padding-block: var(--section-space);
        border-top: 1px solid var(--color-line);
    }

    .c-verification__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding-inline: var(--space-7);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
        align-items: center;
    }

    @media (max-width: 900px) {
        .c-verification__inner {
            grid-template-columns: 1fr;
            gap: var(--space-6);
            padding-inline: var(--space-5);
        }
    }

    .c-verification__title {
        font-family: var(--font-display);
        font-weight: 400;
        font-size: clamp(2.25rem, 5vw, 4rem);
        line-height: 1;
        letter-spacing: -0.02em;
        margin-bottom: var(--space-6);
    }

    .c-verification__title em {
        font-style: italic;
        color: var(--color-accent);
    }

    .c-verification__copy {
        font-size: var(--fs-body);
        color: var(--color-ink-soft);
        margin-bottom: var(--space-5);
        line-height: 1.65;
    }

    /* Checklist (.c-checklist) — promoted to OnPoint.Razor's
       components/app-c-ui.css. Generic tick + label pattern. */

    /* ── Document mock ──────────────────────────────────────────────
     Stylised representation of a verified document. Offset shadow
     evokes stacked paper. */
    .c-doc-mock {
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        aspect-ratio: 3 / 4;
        padding: var(--space-7);
        position: relative;
        box-shadow:
            0 1px 0 var(--color-line),
            20px 20px 0 -1px var(--color-line);
    }

    .c-doc-mock__stamp {
        position: absolute;
        top: var(--space-5);
        right: -1px;
        background: var(--color-accent);
        color: var(--color-on-dark);
        font-family: var(--font-mono);
        font-size: 0.625rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        padding: 6px 12px;
    }

    .c-doc-mock__meta {
        font-family: var(--font-mono);
        font-size: 0.625rem;
        color: var(--color-ink-mute);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: var(--space-2);
    }

    .c-doc-mock__title {
        font-family: var(--font-display);
        font-size: 1.75rem;
        line-height: 1.1;
        margin-bottom: var(--space-5);
        letter-spacing: -0.01em;
    }

    .c-doc-mock__bar {
        height: 4px;
        background: var(--color-line);
        margin-bottom: var(--space-2);
        border-radius: var(--radius-sm);
    }

    .c-doc-mock__bar--short { width: 60%; }
    .c-doc-mock__bar--long { width: 80%; }

    .c-doc-mock__group {
        margin-top: var(--space-5);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-line);
    }

    /* ── Seal ───────────────────────────────────────────────────────
     Angled circular stamp overlay marking the document as verified. */
    .c-seal {
        position: absolute;
        bottom: var(--space-7);
        right: var(--space-7);
        width: 5.625rem;
        height: 5.625rem;
        border: 2px solid var(--color-accent);
        border-radius: 50%;
        display: grid;
        place-items: center;
        transform: rotate(-8deg);
        font-family: var(--font-mono);
        color: var(--color-accent);
        font-size: 0.5625rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .c-seal__label {
        font-size: 0.8125rem;
        display: block;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
}