/* ==========================================================================
 * features.css — W9 marketing surface (`demo/features.php`)
 *
 * Polish-round 2 (2026-05-07) — landing-page big-block pivot.
 *
 * Section-level CSS only. Consumes existing primitives from `app.css`:
 *   .demo-btn / .demo-pill / .demo-card
 * Plus `.demo-code-popover` (W4; demo-tier — migrated out of src/builder.css
 * per W6.A.B 2026-05-08 — pulled from `/assets/css/code-popover.css` via
 * `@import` below).
 *
 * Layout-diversity matrix (refreshed 2026-05-07 polish-round 2):
 *   §1–§5 alternating big-blocks (image L ↔ image R, generous padding)
 *   §6 3-pillar trust strip · final CTA centered band
 *   Hero stays full-width 0.95fr/1.1fr asymmetric column.
 *
 * Strict token discipline — every value comes from `--demo-*`. Animation
 * variables fall back to literal rgba where keyframe interpolation requires.
 * ========================================================================== */

@import url('/dist/builder.css');
@import url('/assets/css/code-popover.css');

/* --------------------------------------------------------------------------
 * Page wrapper
 * -------------------------------------------------------------------------- */
.demo-features {
    --demo-features-toc-width: 220px;
    --demo-features-sidebar-gap: var(--demo-space-8);
    --demo-features-block-padding-y: var(--demo-space-9);
    --demo-features-block-illo-bg: var(--demo-bg-elevated);

    display: flex;
    flex-direction: column;
    gap: var(--demo-space-9);
    padding-bottom: var(--demo-space-9);
}

.demo-features__body {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--demo-space-7);
    display: grid;
    grid-template-columns: var(--demo-features-toc-width) minmax(0, 1fr);
    gap: var(--demo-features-sidebar-gap);
}
@media (max-width: 1023px) {
    .demo-features__body {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 var(--demo-space-6);
        gap: var(--demo-space-6);
    }
}
@media (max-width: 575px) {
    .demo-features__body {
        padding: 0 var(--demo-space-5);
    }
}

.demo-features__sections {
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-9);
    min-width: 0;
}

/* --------------------------------------------------------------------------
 * Sticky TOC
 * -------------------------------------------------------------------------- */
.demo-features__toc-wrap {
    position: sticky;
    top: var(--demo-space-9);
    align-self: start;
    height: max-content;
}

.demo-features__toc {
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-3);
    padding: var(--demo-space-5) var(--demo-space-4);
    background: var(--demo-bg-elevated);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-md);
}

.demo-features__toc-eyebrow {
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    letter-spacing: var(--demo-ls-caps);
    text-transform: uppercase;
    color: var(--demo-text-muted);
}

.demo-features__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-1);
}

.demo-features__toc-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--demo-space-3);
    padding: var(--demo-space-3) var(--demo-space-3);
    border-radius: var(--demo-radius-sm);
    font-size: var(--demo-fs-sm);
    color: var(--demo-text-secondary);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.demo-features__toc-num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--demo-fw-medium);
    color: var(--demo-text-muted);
    font-size: var(--demo-fs-xs);
}

.demo-features__toc-label {
    line-height: var(--demo-lh-tight);
}

.demo-features__toc-link:hover,
.demo-features__toc-link:focus-visible {
    background: rgba(0, 0, 0, 0.03);
    color: var(--demo-text-strong);
    outline: none;
}
[data-theme='dark'] .demo-features__toc-link:hover,
[data-theme='dark'] .demo-features__toc-link:focus-visible {
    background: rgba(255, 255, 255, 0.04);
}

.demo-features__toc-link.is-active {
    background: var(--demo-accent-soft);
    color: var(--demo-text-strong);
}
.demo-features__toc-link.is-active .demo-features__toc-num {
    color: var(--demo-accent);
    font-weight: var(--demo-fw-semibold);
}

@media (max-width: 1023px) {
    .demo-features__toc-wrap {
        position: sticky;
        top: 0;
        z-index: 5;
        margin-top: -1px;
    }
    .demo-features__toc {
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: var(--demo-space-3) var(--demo-space-5);
        gap: var(--demo-space-4);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .demo-features__toc-eyebrow {
        display: none;
    }
    .demo-features__toc-list {
        flex-direction: row;
        gap: var(--demo-space-2);
        scroll-snap-type: inherit;
    }
    .demo-features__toc-item {
        scroll-snap-align: start;
    }
    .demo-features__toc-link {
        white-space: nowrap;
        padding: var(--demo-space-2) var(--demo-space-4);
    }
}

/* --------------------------------------------------------------------------
 * Hero — 0.95fr / 1.1fr asymmetric grid; narrative traits strip
 * -------------------------------------------------------------------------- */
.demo-features__hero {
    position: relative;
    padding: var(--demo-space-9) var(--demo-space-7) var(--demo-space-8);
    overflow: hidden;
}

.demo-features__hero-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--demo-space-8);
    position: relative;
}

@media (max-width: 1023px) {
    .demo-features__hero {
        padding: var(--demo-space-8) var(--demo-space-6) var(--demo-space-7);
    }
    .demo-features__hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--demo-space-7);
    }
}

.demo-features__hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-5);
}

.demo-features__hero-pill {
    align-self: flex-start;
}

.demo-features__hero-title {
    margin: 0;
    font-size: clamp(2.75rem, 5vw + 0.5rem, 4.5rem);
    line-height: var(--demo-lh-display);
    letter-spacing: var(--demo-ls-display);
    font-weight: var(--demo-fw-display);
    color: var(--demo-text-strong);
}

.demo-features__hero-title-accent {
    color: var(--demo-accent);
}

.demo-features__hero-lede {
    margin: 0;
    font-size: var(--demo-fs-md);
    line-height: var(--demo-lh-body);
    color: var(--demo-text);
    max-width: 56ch;
}

.demo-features__hero-ctas {
    display: flex;
    gap: var(--demo-space-3);
    flex-wrap: wrap;
    margin-top: var(--demo-space-2);
}

.demo-features__hero-traits {
    list-style: none;
    margin: var(--demo-space-3) 0 0;
    padding: var(--demo-space-5) 0 0;
    border-top: 1px solid var(--demo-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--demo-space-5);
}

.demo-features__hero-trait {
    display: flex;
    align-items: center;
    gap: var(--demo-space-2);
    font-size: var(--demo-fs-sm);
    font-weight: var(--demo-fw-medium);
    color: var(--demo-text);
}

.demo-features__hero-trait-icon {
    font-size: 18px;
    color: var(--demo-accent);
}

.demo-features__hero-trait-label {
    line-height: var(--demo-lh-tight);
}

.demo-features__hero-shot {
    position: relative;
    perspective: 1300px;
    perspective-origin: 60% 40%;
}

.demo-features__hero-shot-frame {
    position: relative;
    padding: 8px;
    border-radius: var(--demo-radius-xl);
    border: 1px solid var(--demo-border);
    background: var(--demo-bg-elevated);
    box-shadow:
        -18px 24px 48px -24px rgba(0, 0, 0, 0.18),
        -8px 12px 20px -12px rgba(0, 0, 0, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.04);
    transform: rotateY(-12deg) rotateX(-5deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
[data-theme='dark'] .demo-features__hero-shot-frame {
    box-shadow:
        -22px 28px 60px -24px rgba(0, 0, 0, 0.55),
        -10px 14px 24px -12px rgba(0, 0, 0, 0.40),
        0 1px 2px rgba(0, 0, 0, 0.20);
}

.demo-features__hero-shot:hover .demo-features__hero-shot-frame {
    transform: rotateY(-4deg) rotateX(-1deg) scale(1.02);
    box-shadow:
        -24px 36px 72px -24px rgba(0, 0, 0, 0.22),
        -12px 16px 28px -12px rgba(0, 0, 0, 0.14),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

.demo-features__hero-shot-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--demo-radius-xl) - 8px);
    object-fit: cover;
    object-position: top center;
}
.demo-features__hero-shot-img--dark { display: none; }
[data-theme='dark'] .demo-features__hero-shot-img--light { display: none; }
[data-theme='dark'] .demo-features__hero-shot-img--dark { display: block; }

.demo-features__hero-shot-bg {
    position: absolute;
    bottom: -32px;
    right: -24px;
    width: 60%;
    color: var(--demo-text-strong);
    pointer-events: none;
}

@media (max-width: 1023px) {
    .demo-features__hero-shot-frame {
        transform: none;
        box-shadow: var(--demo-shadow-md);
    }
    .demo-features__hero-shot:hover .demo-features__hero-shot-frame {
        transform: none;
    }
    .demo-features__hero-shot-bg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-features__hero-shot-frame { transition: none; }
}

/* --------------------------------------------------------------------------
 * Section primitives (header / wrapper) — shared across §1–§6
 * -------------------------------------------------------------------------- */
.demo-features__section {
    padding: var(--demo-features-block-padding-y) 0;
    border-top: 1px solid var(--demo-border);
    scroll-margin-top: var(--demo-space-8);
}
.demo-features__section:first-child {
    border-top: 0;
    padding-top: var(--demo-space-7);
}

.demo-features__section-header {
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-3);
    margin-bottom: var(--demo-space-9);
    max-width: 64ch;
}

.demo-features__section-eyebrow {
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    letter-spacing: var(--demo-ls-caps);
    text-transform: uppercase;
    color: var(--demo-accent);
}

.demo-features__section-title {
    margin: 0;
    font-size: clamp(2.125rem, 3.2vw + 0.5rem, 2.875rem);
    line-height: var(--demo-lh-heading);
    letter-spacing: var(--demo-ls-heading);
    font-weight: var(--demo-fw-bold);
    color: var(--demo-text-strong);
}

.demo-features__section-lede {
    margin: 0;
    font-size: var(--demo-fs-base);
    line-height: var(--demo-lh-body);
    color: var(--demo-text);
}

/* --------------------------------------------------------------------------
 * §2 mosaic — full-width signature visual at section top
 * -------------------------------------------------------------------------- */
.demo-features__mosaic {
    margin: 0 0 var(--demo-space-9);
    padding: var(--demo-space-6) var(--demo-space-7);
    background: var(--demo-bg-elevated);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-xl);
    color: var(--demo-text-strong);
    overflow: hidden;
}
.demo-features__mosaic img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
 * BIG-BLOCK PRIMITIVE — alternating image L ↔ image R, landing-page rhythm
 * (Used by §1 live editing · §2 elements · §3 controls · §4 themes · §5 dev)
 * -------------------------------------------------------------------------- */
.demo-features__blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-9);
}

.demo-features__block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--demo-space-8);
    align-items: center;
}

@media (max-width: 1023px) {
    .demo-features__block {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--demo-space-5);
    }
}

.demo-features__block--reverse > .demo-features__block-illo,
.demo-features__block--reverse > .demo-features__block-illo--code,
.demo-features__block--reverse > .demo-features__block-illo--carousel {
    order: 2;
}
.demo-features__block--reverse > .demo-features__block-copy {
    order: 1;
}

@media (max-width: 1023px) {
    .demo-features__block--reverse > .demo-features__block-illo,
    .demo-features__block--reverse > .demo-features__block-illo--code,
    .demo-features__block--reverse > .demo-features__block-illo--carousel,
    .demo-features__block--reverse > .demo-features__block-copy {
        order: initial;
    }
}

.demo-features__block-illo {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--demo-features-block-illo-bg);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-xl);
    color: var(--demo-text-strong);
    overflow: hidden;
    transition: border-color 200ms ease, transform 300ms ease;
}
.demo-features__block:hover .demo-features__block-illo {
    border-color: var(--demo-accent);
}
.demo-features__block-illo img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.demo-features__block:hover .demo-features__block-illo img {
    transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
    .demo-features__block:hover .demo-features__block-illo img { transform: none; }
}

.demo-features__block-copy {
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-3);
    padding: 0 var(--demo-space-3);
}

.demo-features__block-eyebrow {
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    letter-spacing: var(--demo-ls-caps);
    text-transform: uppercase;
    color: var(--demo-accent);
}

.demo-features__block-title {
    margin: 0;
    font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2rem);
    line-height: var(--demo-lh-tight);
    letter-spacing: var(--demo-ls-heading);
    font-weight: var(--demo-fw-bold);
    color: var(--demo-text-strong);
}

.demo-features__block-title code {
    background: var(--demo-accent-soft);
    color: var(--demo-text-strong);
    padding: 1px 8px;
    border-radius: var(--demo-radius-sm);
    font-size: 0.85em;
    font-family: var(--demo-font-mono, ui-monospace, SFMono-Regular, monospace);
}

.demo-features__block-body {
    margin: 0;
    font-size: var(--demo-fs-md);
    line-height: var(--demo-lh-body);
    color: var(--demo-text);
    max-width: 56ch;
}

.demo-features__block-body code {
    background: var(--demo-accent-soft);
    color: var(--demo-text-strong);
    padding: 1px 6px;
    border-radius: var(--demo-radius-sm);
    font-size: 0.9em;
    font-family: var(--demo-font-mono, ui-monospace, SFMono-Regular, monospace);
}

/* §5 dev — code-popover-as-illustration variant */
.demo-features__block-illo--code {
    aspect-ratio: auto;
    background: transparent;
    border: 0;
    padding: 0;
    align-items: stretch;
}
.demo-features__block-illo--code .demo-code-popover {
    width: 100%;
    align-self: stretch;
}

/* §4 themes — in-block scroll-snap thumbnail carousel variant */
.demo-features__block-illo--carousel {
    aspect-ratio: 4 / 3;
    padding: var(--demo-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.demo-features__inblock-carousel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    gap: var(--demo-space-3);
    align-items: start;
}
.demo-features__inblock-carousel > li { scroll-snap-align: start; }

.demo-features__inblock-card {
    display: flex;
    flex-direction: column;
    gap: var(--demo-space-2);
    padding: var(--demo-space-2);
    background: var(--demo-bg);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-md);
    text-decoration: none;
    transition: transform 200ms ease, border-color 200ms ease;
}
.demo-features__inblock-card:hover {
    transform: translateY(-2px);
    border-color: var(--demo-accent);
}
.demo-features__inblock-card img {
    display: block;
    width: 100%;
    aspect-ratio: 200 / 225;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--demo-radius-sm);
    background: var(--demo-bg-elevated);
}
.demo-features__inblock-card-label {
    padding: 0 var(--demo-space-2);
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    color: var(--demo-text-strong);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .demo-features__inblock-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
 * §5 dev — roadmap pill (after the canonical-wiring big-block)
 * -------------------------------------------------------------------------- */
.demo-features__roadmap {
    margin: var(--demo-space-9) 0 0;
    padding: var(--demo-space-5) var(--demo-space-6);
    background: var(--demo-bg-elevated);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-md);
    font-size: var(--demo-fs-sm);
    line-height: var(--demo-lh-body);
    color: var(--demo-text);
    display: flex;
    flex-wrap: wrap;
    gap: var(--demo-space-3);
    align-items: baseline;
}
.demo-features__roadmap-pill {
    flex-shrink: 0;
}
.demo-features__roadmap-link {
    margin-left: auto;
    color: var(--demo-accent);
    font-weight: var(--demo-fw-medium);
}
.demo-features__roadmap-link code {
    background: transparent;
    color: inherit;
}

/* --------------------------------------------------------------------------
 * §6 trust strip — 3 pillars, narrative-vignette (NOT stat-driven)
 * -------------------------------------------------------------------------- */
.demo-features__pillars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--demo-space-5);
}
@media (max-width: 1023px) {
    .demo-features__pillars { grid-template-columns: minmax(0, 1fr); }
}

.demo-features__pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--demo-space-3);
    padding: var(--demo-space-7);
    background: var(--demo-bg-elevated);
    border: 1px solid var(--demo-border);
    border-radius: var(--demo-radius-xl);
    transition: border-color 200ms ease, transform 200ms ease;
}
.demo-features__pillar:hover {
    border-color: var(--demo-accent);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .demo-features__pillar:hover { transform: none; }
}

.demo-features__pillar-illo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--demo-radius-md);
    background: var(--demo-bg);
    color: var(--demo-text-strong);
    border: 1px solid var(--demo-border);
}
.demo-features__pillar-illo img { width: 64%; height: 64%; }

.demo-features__pillar-tag {
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    letter-spacing: var(--demo-ls-caps);
    text-transform: uppercase;
    color: var(--demo-accent);
}

.demo-features__pillar-name {
    margin: 0;
    font-size: var(--demo-fs-lg);
    font-weight: var(--demo-fw-semibold);
    color: var(--demo-text-strong);
}

.demo-features__pillar-body {
    margin: 0;
    font-size: var(--demo-fs-sm);
    line-height: var(--demo-lh-body);
    color: var(--demo-text);
}

/* --------------------------------------------------------------------------
 * Final CTA — centered band with subtle dot-grid SVG bg
 * -------------------------------------------------------------------------- */
.demo-features__final-cta {
    position: relative;
    margin-top: var(--demo-space-9);
    padding: var(--demo-space-10) var(--demo-space-7);
    background: var(--demo-bg-elevated);
    border-top: 1px solid var(--demo-border);
    overflow: hidden;
    color: var(--demo-text-strong);
}

.demo-features__final-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    color: var(--demo-text-strong);
    opacity: 0.7;
}

.demo-features__final-cta-inner {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--demo-space-4);
}

.demo-features__final-cta-eyebrow {
    font-size: var(--demo-fs-xs);
    font-weight: var(--demo-fw-semibold);
    letter-spacing: var(--demo-ls-caps);
    text-transform: uppercase;
    color: var(--demo-accent);
}

.demo-features__final-cta-title {
    margin: 0;
    font-size: clamp(2rem, 3.4vw + 0.5rem, 3rem);
    line-height: var(--demo-lh-display);
    letter-spacing: var(--demo-ls-display);
    font-weight: var(--demo-fw-display);
    color: var(--demo-text-strong);
    max-width: 18ch;
}

.demo-features__final-cta-body {
    margin: 0;
    font-size: var(--demo-fs-md);
    line-height: var(--demo-lh-body);
    color: var(--demo-text);
    max-width: 56ch;
}

.demo-features__final-cta-buttons {
    display: flex;
    gap: var(--demo-space-3);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--demo-space-3);
}

.demo-features__final-cta-sublinks {
    list-style: none;
    margin: var(--demo-space-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--demo-space-3) var(--demo-space-6);
}

.demo-features__final-cta-sublink {
    color: var(--demo-text-secondary);
    text-decoration: none;
    font-size: var(--demo-fs-sm);
    font-weight: var(--demo-fw-medium);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 160ms ease, border-color 160ms ease;
}
.demo-features__final-cta-sublink:hover,
.demo-features__final-cta-sublink:focus-visible {
    color: var(--demo-accent);
    border-bottom-color: var(--demo-accent);
}

.demo-features__final-cta-footnote {
    margin: var(--demo-space-7) 0 0;
    padding-top: var(--demo-space-5);
    border-top: 1px solid var(--demo-border);
    width: 100%;
    font-size: var(--demo-fs-xs);
    color: var(--demo-text-muted);
    line-height: var(--demo-lh-body);
}

.demo-features__final-cta-version {
    display: inline-block;
    margin-left: var(--demo-space-3);
    color: var(--demo-text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: var(--demo-fw-medium);
}

/* --------------------------------------------------------------------------
 * Print + a11y polish
 * -------------------------------------------------------------------------- */
@media print {
    .demo-features__toc-wrap,
    .demo-features__hero-shot { display: none; }
    .demo-features__block { break-inside: avoid; }
}

.demo-features :focus-visible {
    outline: 2px solid var(--demo-accent);
    outline-offset: 3px;
    border-radius: var(--demo-radius-sm);
}