@layer components {
    body.hrc-design-system-v1.hrc-module-cv-builder {
        --cv-primary: var(--hrc-color-brand);
        --cv-primary-strong: color-mix(in srgb, var(--hrc-color-brand), var(--hrc-color-text) 15%);
        --cv-blue: var(--hrc-color-info);
        --cv-ink: var(--hrc-color-text);
        --cv-muted: var(--hrc-color-text-muted);
        --cv-border: var(--hrc-color-border);
        --cv-surface: var(--hrc-color-surface);
        --cv-soft: var(--hrc-color-surface-soft);
        --cv-danger: var(--hrc-color-danger);
        --cv-radius: var(--hrc-radius-lg);
        --cv-shadow: var(--hrc-shadow-md);
        margin: var(--hrc-space-0);
        background: var(--hrc-color-bg-app);
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-sans);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-skip-link {
        position: fixed;
        inset-block-start: calc(var(--hrc-space-12) * -2);
        inset-inline-start: var(--hrc-space-4);
        z-index: var(--hrc-z-toast);
        padding: var(--hrc-space-3) var(--hrc-space-4);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-text);
        color: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-skip-link:focus {
        inset-block-start: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-public-main {
        width: min(calc(100% - (var(--hrc-page-gutter) * 2)), var(--hrc-container-2xl));
        margin-inline: auto;
        padding-block: var(--hrc-space-6) var(--hrc-space-10);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-public-intro {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-section-gap);
        margin-block-end: var(--hrc-space-5);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        background: linear-gradient(135deg, var(--hrc-color-surface), var(--hrc-color-brand-soft));
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-public-intro > div {
        flex: 1 1 var(--hrc-container-sm);
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-public-intro > ul {
        flex: 1 1 var(--hrc-layout-detail-min);
        display: grid;
        gap: var(--hrc-space-2);
        margin: var(--hrc-space-0);
        padding: var(--hrc-space-0);
        color: var(--hrc-color-text-muted);
        list-style: none;
    }

    body.hrc-design-system-v1.hrc-module-cv-builder .cv-public-intro li::before {
        content: "✓";
        margin-inline-end: var(--hrc-space-2);
        color: var(--hrc-color-success);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1.hrc-module-public-trial {
        min-height: 100dvh;
        margin: var(--hrc-space-0);
        background: var(--hrc-color-bg-app);
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-sans);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__nav {
        width: min(calc(100% - (var(--hrc-page-gutter) * 2)), var(--hrc-container-lg));
        min-height: var(--hrc-topbar-height);
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-2);
        padding-block: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__nav nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-2);
        margin-inline-start: auto;
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__nav a {
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        padding-inline: var(--hrc-space-4);
        border-radius: var(--hrc-radius-sm);
        color: var(--hrc-color-text);
        font-weight: var(--hrc-weight-semibold);
        text-decoration: none;
    }

    body.hrc-design-system-v1.hrc-module-public-trial .saas-form {
        width: min(calc(100% - (var(--hrc-page-gutter) * 2)), var(--hrc-container-sm));
        margin-inline: auto;
        padding-block: var(--hrc-space-3) var(--hrc-space-8);
        display: grid;
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__hero,
    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__form {
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__hero p,
    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__notice {
        margin: var(--hrc-space-0);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .saas-form a {
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        color: var(--hrc-color-text);
        font-weight: var(--hrc-weight-semibold);
        text-decoration: underline;
        text-underline-offset: .2em;
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__form {
        display: grid;
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__submit {
        width: 100%;
        min-height: var(--hrc-control-height-lg);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__hero {
        padding: var(--hrc-space-2) var(--hrc-space-0);
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--hrc-space-3) var(--hrc-space-4);
        min-width: 0;
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__full {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__nav .hrc-public-trial__brand {
        padding-inline: 0;
    }

    body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__theme {
        flex: 0 0 var(--hrc-control-height);
        inline-size: var(--hrc-control-height);
        min-height: var(--hrc-control-height);
        padding: 0;
    }

    @media (min-width: 640px) {
        body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__fields {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 639px) {
        body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__nav {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            row-gap: 0;
        }

        body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__nav nav {
            grid-column: 1 / -1;
            grid-row: 2;
            margin-inline-start: 0;
        }

        body.hrc-design-system-v1.hrc-module-public-trial .hrc-public-trial__theme {
            grid-column: 2;
            grid-row: 1;
        }
    }

    body.hrc-design-system-v1.hrc-module-public-trial :where(a, button, input, select):focus-visible,
    body.hrc-design-system-v1.hrc-module-cv-builder :where(a, button, input, select, textarea):focus-visible {
        outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
        outline-offset: var(--hrc-focus-offset);
    }
}