:root {
    --home-accent: var(--erp-warning);
    --home-accent-dark: color-mix(in srgb, var(--erp-warning) 78%, var(--erp-text));
    --home-accent-soft: color-mix(in srgb, var(--erp-warning) 12%, var(--erp-surface));
    --home-ink: var(--erp-text);
    --home-muted: var(--erp-text-muted);
    --home-surface: var(--erp-surface);
    --home-border: var(--erp-border);
    --home-success: var(--erp-success);
    --home-focus-ring: color-mix(in srgb, var(--erp-warning) 18%, transparent);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--erp-bg);
    color: var(--erp-text);
    font-family: var(--erp-font-family);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.navbar-custom {
    background: color-mix(in srgb, var(--home-surface) 94%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--home-border) 82%, transparent);
    box-shadow: var(--erp-shadow-sm);
    padding: .8rem 1.5rem;
}

.brand-text {
    align-items: center;
    color: var(--home-ink);
    display: inline-flex;
    font-weight: 800;
    gap: .65rem;
    letter-spacing: .08em;
    text-decoration: none;
}

.landing-login-link {
    background: var(--home-ink);
    border: 1px solid var(--home-ink);
    border-radius: var(--erp-radius-md);
    color: var(--erp-primary-contrast);
    font: inherit;
    font-weight: 800;
    min-height: 40px;
    padding: .45rem 1rem;
    transition: background var(--erp-transition-fast), border-color var(--erp-transition-fast), box-shadow var(--erp-transition-fast);
}

.landing-login-link:hover,
.landing-login-link:focus-visible {
    background: var(--home-accent-dark);
    border-color: var(--home-accent-dark);
    box-shadow: var(--erp-shadow-sm);
}

.home-page {
    background: linear-gradient(180deg, var(--erp-bg) 0%, var(--home-surface) 42%, var(--erp-bg) 100%);
    color: var(--home-ink);
    margin-top: 0;
    min-height: 100vh;
}

.home-hero {
    padding-block: clamp(2rem, 4.5vw, 3.5rem);
}

.home-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .78fr);
}

.home-hero-content {
    min-width: 0;
}

.home-eyebrow,
.store-kicker {
    align-items: center;
    color: var(--home-accent-dark);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: .45rem;
    margin-bottom: .85rem;
}

.home-eyebrow::before,
.store-kicker::before {
    background: var(--home-accent);
    border-radius: 999px;
    content: "";
    height: .55rem;
    width: .55rem;
}

.home-hero h1 {
    color: var(--home-ink);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.18;
    margin: 0;
    max-width: 760px;
}

.home-hero p {
    color: var(--home-muted);
    font-size: 1.08rem;
    line-height: 1.9;
    margin: 1.25rem 0 0;
    max-width: 620px;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}

.home-primary-action,
.home-secondary-action {
    align-items: center;
    border-radius: var(--erp-radius-md);
    display: inline-flex;
    font-weight: 900;
    gap: .5rem;
    justify-content: center;
    min-height: 46px;
    padding: .72rem 1.1rem;
}

.home-primary-action {
    background: var(--home-accent);
    border: 1px solid var(--home-accent);
    color: var(--erp-primary-contrast);
}

.home-primary-action:hover,
.home-primary-action:focus-visible {
    background: var(--home-accent-dark);
    border-color: var(--home-accent-dark);
    color: var(--erp-primary-contrast);
}

.home-secondary-action {
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    color: var(--home-ink);
}

.home-secondary-action:hover,
.home-secondary-action:focus-visible {
    background: var(--home-accent-soft);
    border-color: color-mix(in srgb, var(--home-accent) 35%, var(--home-border));
    color: var(--home-accent-dark);
}

.home-hero-visual {
    min-width: 0;
}

.home-product-tray {
    align-items: center;
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: var(--erp-radius-xl);
    box-shadow: var(--erp-auth-shadow);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(160px, .9fr) minmax(0, 1fr);
    min-height: 250px;
    padding: clamp(1rem, 2.5vw, 1.4rem);
}

.home-product-media {
    align-items: center;
    align-self: stretch;
    border-radius: var(--erp-radius-lg);
    background: linear-gradient(135deg, var(--home-accent-soft), color-mix(in srgb, var(--erp-primary) 8%, var(--home-surface)));
    display: flex;
    justify-content: center;
    min-height: 210px;
    padding: clamp(.8rem, 2.5vw, 1.25rem);
    position: relative;
}

.home-product-media img {
    display: block;
    filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--erp-text) 12%, transparent));
    max-height: 215px;
    object-fit: contain;
    width: 100%;
}

.home-product-badge {
    align-items: center;
    background: var(--home-success);
    border-radius: 999px;
    color: var(--erp-primary-contrast);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    gap: .35rem;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding: .32rem .65rem;
    position: absolute;
}

.home-product-content {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.home-product-kicker {
    align-items: center;
    color: var(--home-accent-dark);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: .45rem;
}

.home-product-content strong {
    color: var(--home-ink);
    font-size: 1.15rem;
    line-height: 1.45;
}

.home-product-content p {
    color: var(--home-muted);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0;
}

.home-product-delivery {
    align-items: flex-start;
    background: var(--home-accent-soft);
    border: 1px solid color-mix(in srgb, var(--home-accent) 16%, var(--home-border));
    border-radius: var(--erp-radius-md);
    color: var(--home-accent-dark);
    display: flex;
    gap: .55rem;
    line-height: 1.6;
    padding: .72rem .8rem;
}

.home-product-delivery i {
    flex: 0 0 auto;
    margin-top: .15rem;
}

.home-service-strip {
    padding-block: .75rem 3rem;
}

.home-service-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-service-item {
    align-items: flex-start;
    background: color-mix(in srgb, var(--home-surface) 90%, transparent);
    border: 1px solid var(--home-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-xs);
    display: flex;
    gap: .9rem;
    min-width: 0;
    padding: 1rem;
}

.home-service-item i {
    align-items: center;
    background: var(--home-accent-soft);
    border-radius: var(--erp-radius-md);
    color: var(--home-accent-dark);
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.home-service-item strong,
.home-service-item span {
    display: block;
}

.home-service-item strong {
    color: var(--home-ink);
    font-weight: 900;
    margin-bottom: .3rem;
}

.home-service-item span {
    color: var(--home-muted);
    font-size: .9rem;
    line-height: 1.7;
}

.store-section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.store-heading {
    align-items: end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.store-heading h2 {
    color: var(--home-ink);
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
}

.store-heading p {
    color: var(--home-muted);
    line-height: 1.8;
    margin: 0;
    max-width: 460px;
}

.store-toolbar {
    align-items: end;
    background: color-mix(in srgb, var(--home-surface) 94%, transparent);
    border: 1px solid var(--home-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-xs);
    display: grid;
    gap: .9rem;
    grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(150px, .75fr)) minmax(230px, 1fr) minmax(150px, .75fr) auto;
    margin-bottom: .85rem;
    padding: 1rem;
}

.store-filter-field {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.store-filter-field span {
    color: var(--home-muted);
    font-size: .78rem;
    font-weight: 900;
}

.store-filter-field .form-control,
.store-filter-field .form-select,
.store-filter-field .input-group-text {
    border-color: var(--home-border);
    min-height: 42px;
}

.store-filter-field .form-control:focus,
.store-filter-field .form-select:focus {
    border-color: color-mix(in srgb, var(--home-accent) 45%, var(--home-border));
    box-shadow: 0 0 0 .2rem var(--home-focus-ring);
}

.store-filter-field .input-group-text {
    background: var(--home-accent-soft);
    color: var(--home-accent-dark);
}

.store-range-field {
    align-self: stretch;
}

.store-range-label {
    align-items: center;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    min-width: 0;
}

.store-range-label strong {
    color: var(--home-ink);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.store-range-control {
    --range-start: 0%;
    --range-end: 100%;
    align-items: center;
    display: grid;
    min-height: 42px;
    position: relative;
}

.store-range-control::before,
.store-range-control::after {
    border-radius: 999px;
    content: "";
    grid-area: 1 / 1;
    height: 6px;
    pointer-events: none;
}

.store-range-control::before {
    background: color-mix(in srgb, var(--home-border) 74%, transparent);
}

.store-range-control::after {
    background: var(--home-accent-dark);
    margin-inline-start: var(--range-start);
    width: calc(var(--range-end) - var(--range-start));
}

.store-range-input {
    appearance: none;
    background: transparent;
    grid-area: 1 / 1;
    height: 42px;
    margin: 0;
    pointer-events: none;
    position: relative;
    width: 100%;
}

.store-range-input:focus-visible {
    outline: none;
}

.store-range-input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 .22rem var(--home-focus-ring);
}

.store-range-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 .22rem var(--home-focus-ring);
}

.store-range-input::-webkit-slider-runnable-track {
    appearance: none;
    background: transparent;
    border: 0;
    height: 6px;
}

.store-range-input::-webkit-slider-thumb {
    appearance: none;
    background: var(--home-surface);
    border: 3px solid var(--home-accent-dark);
    border-radius: 50%;
    box-shadow: var(--erp-shadow-sm);
    cursor: pointer;
    height: 20px;
    margin-top: -7px;
    pointer-events: auto;
    width: 20px;
}

.store-range-input::-moz-range-track {
    background: transparent;
    border: 0;
    height: 6px;
}

.store-range-input::-moz-range-thumb {
    background: var(--home-surface);
    border: 3px solid var(--home-accent-dark);
    border-radius: 50%;
    box-shadow: var(--erp-shadow-sm);
    cursor: pointer;
    height: 20px;
    pointer-events: auto;
    width: 20px;
}

.store-range-input-min {
    z-index: 2;
}

.store-range-input-max {
    z-index: 3;
}

.store-filter-actions {
    align-items: end;
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
}

.store-filter-apply,
.store-filter-clear {
    min-height: 42px;
    white-space: nowrap;
}

.store-results-summary {
    color: var(--home-muted);
    font-size: .9rem;
    font-weight: 800;
    margin-bottom: 1rem;
    min-height: 1.4rem;
}

.product-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.product-card {
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-xs);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    transition: border-color var(--erp-transition-fast), box-shadow var(--erp-transition-fast), transform var(--erp-transition-fast);
}

.product-card:hover,
.product-card:focus-within {
    border-color: color-mix(in srgb, var(--home-accent) 28%, var(--home-border));
    box-shadow: var(--erp-shadow-md);
    transform: translateY(-2px);
}

.product-media {
    align-items: center;
    aspect-ratio: 16 / 11;
    background: linear-gradient(135deg, var(--home-accent-soft), color-mix(in srgb, var(--erp-primary) 6%, var(--home-surface)));
    display: flex;
    justify-content: center;
    padding: .95rem;
    position: relative;
}

.product-media img {
    border-radius: var(--erp-radius-md);
    display: block;
    filter: drop-shadow(0 16px 22px color-mix(in srgb, var(--erp-text) 11%, transparent));
    height: min(100%, 190px);
    object-fit: contain;
    width: 100%;
}

.product-badge {
    align-items: center;
    background: var(--home-success);
    border-radius: 999px;
    color: var(--erp-primary-contrast);
    display: inline-flex;
    font-size: .74rem;
    font-weight: 900;
    gap: .32rem;
    inset-block-start: .85rem;
    inset-inline-start: .85rem;
    padding: .28rem .7rem;
    position: absolute;
}

.product-category-pill {
    background: color-mix(in srgb, var(--home-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--home-border) 78%, transparent);
    border-radius: 999px;
    color: var(--home-ink);
    font-size: .72rem;
    font-weight: 900;
    inset-block-end: .85rem;
    inset-inline-end: .85rem;
    max-width: calc(100% - 1.7rem);
    overflow: hidden;
    padding: .26rem .62rem;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem;
}

.product-card-main {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.product-kicker {
    color: var(--home-accent-dark);
    font-size: .76rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.product-body h3 {
    color: var(--home-ink);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.45;
    margin: 0;
    min-height: 2.85rem;
    overflow-wrap: anywhere;
}

.product-body p {
    color: var(--home-muted);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0;
    min-height: 2.75rem;
}

.product-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}

.product-chip {
    align-items: center;
    background: var(--home-accent-soft);
    border: 1px solid color-mix(in srgb, var(--home-accent) 16%, var(--home-border));
    border-radius: 999px;
    color: var(--home-accent-dark);
    display: inline-flex;
    font-size: .76rem;
    font-weight: 900;
    gap: .35rem;
    max-width: 100%;
    min-height: 28px;
    overflow: hidden;
    padding: .28rem .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-chip i {
    flex: 0 0 auto;
    font-size: .82rem;
    line-height: 1;
}

.product-action {
    align-items: center;
    background: color-mix(in srgb, var(--home-accent-soft) 42%, var(--home-surface));
    border: 1px solid color-mix(in srgb, var(--home-accent) 12%, var(--home-border));
    border-radius: var(--erp-radius-md);
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    margin-top: auto;
    padding: .72rem;
}

.product-price {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.product-price small {
    color: var(--home-muted);
    font-size: .72rem;
    font-weight: 900;
}

.product-price strong {
    color: var(--home-ink);
    font-size: 1.22rem;
    font-weight: 900;
    white-space: nowrap;
}

.product-buy-action {
    min-height: 40px;
    min-width: 90px;
    padding: .52rem .9rem;
}

.product-state {
    align-items: center;
    background: var(--home-surface);
    border: 1px dashed var(--home-border);
    border-radius: var(--erp-radius-lg);
    color: var(--home-muted);
    display: flex;
    gap: .75rem;
    justify-content: center;
    min-height: 220px;
    padding: 2rem;
    text-align: center;
}

.product-state .spinner-border,
.product-state .bi {
    color: var(--home-accent-dark);
}

.product-state .bi {
    font-size: 1.5rem;
}

.product-grid-skeleton + .product-state {
    display: none;
}

.product-skeleton-card {
    pointer-events: none;
}

.product-skeleton-media {
    overflow: hidden;
}

.product-skeleton-shimmer {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--home-border) 58%, transparent) 0%,
            color-mix(in srgb, var(--home-surface) 80%, var(--erp-bg)) 45%,
            color-mix(in srgb, var(--home-border) 58%, transparent) 100%
        );
    background-size: 220% 100%;
    border-radius: var(--erp-radius-sm);
    display: block;
    overflow: hidden;
    position: relative;
    animation: productSkeletonShimmer 1.25s ease-in-out infinite;
}

.product-skeleton-image {
    border-radius: var(--erp-radius-md);
    height: min(72%, 155px);
    width: 72%;
}

.product-skeleton-badge,
.product-skeleton-pill {
    border-radius: 999px;
    height: 24px;
    position: absolute;
}

.product-skeleton-badge {
    inset-block-start: .85rem;
    inset-inline-start: .85rem;
    width: 58px;
}

.product-skeleton-pill {
    inset-block-end: .85rem;
    inset-inline-end: .85rem;
    width: 86px;
}

.product-skeleton-kicker {
    height: 12px;
    width: 36%;
}

.product-skeleton-title {
    height: 18px;
    width: 84%;
}

.product-skeleton-line {
    height: 12px;
    width: 94%;
}

.product-skeleton-line.short {
    width: 62%;
}

.product-skeleton-chip {
    border-radius: 999px;
    height: 28px;
    width: 112px;
}

.product-skeleton-action {
    min-height: 57px;
}

.product-skeleton-price {
    height: 22px;
    width: 76px;
}

.product-skeleton-button {
    border-radius: var(--erp-radius-sm);
    height: 40px;
    width: 90px;
}

@keyframes productSkeletonShimmer {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-skeleton-shimmer {
        animation: none;
        background-position: 0 0;
    }
}

.store-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.store-pagination span {
    color: var(--home-muted);
    font-weight: 900;
}

@media (max-width: 991.98px) {
    .home-hero-grid,
    .home-service-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-visual {
        max-width: 560px;
    }

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

    .store-search-field,
    .store-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .navbar-custom {
        padding: .65rem .9rem;
    }

    .brand-text {
        font-size: 1rem;
        letter-spacing: .04em;
    }

    .brand-text img {
        width: 40px;
    }

    .landing-login-link {
        min-height: 36px;
        padding-inline: .8rem;
    }

    .home-page {
        margin-top: 0;
    }

    .home-hero {
        padding-block: 1.8rem;
    }

    .home-hero h1 {
        font-size: 2rem;
    }

    .home-hero p {
        font-size: 1rem;
    }

    .home-hero-actions,
    .store-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .home-primary-action,
    .home-secondary-action,
    .product-buy-action {
        width: 100%;
    }

    .home-product-tray {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 1rem;
    }

    .home-product-media {
        min-height: 180px;
    }

    .home-product-media img {
        max-height: 180px;
    }

    .store-heading {
        align-items: stretch;
        flex-direction: column;
        gap: .85rem;
    }

    .store-toolbar {
        align-items: end;
        column-gap: .5rem;
        grid-auto-flow: column;
        grid-template-columns:
            minmax(190px, 1fr)
            minmax(118px, .55fr)
            max-content
            repeat(3, minmax(132px, 132px))
            minmax(220px, 220px);
        grid-template-rows: repeat(2, auto);
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.25);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: .65rem;
        row-gap: .55rem;
        scrollbar-width: thin;
    }

    .store-search-field {
        grid-column: 1;
        grid-row: 1;
    }

    .store-sort-field {
        grid-column: 2;
        grid-row: 1;
    }

    .store-filter-actions {
        align-items: end;
        flex-direction: row;
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-start;
        min-width: max-content;
    }

    .store-toolbar > .store-filter-field:nth-of-type(2),
    .store-toolbar > .store-filter-field:nth-of-type(3),
    .store-toolbar > .store-filter-field:nth-of-type(4),
    .store-price-field {
        grid-row: 2;
    }

    .store-price-field {
        min-width: 220px;
    }

    .store-filter-field {
        gap: .25rem;
    }

    .store-filter-field span {
        font-size: .68rem;
    }

    .store-filter-field .form-control,
    .store-filter-field .form-select,
    .store-filter-field .input-group-text {
        font-size: .78rem;
        min-height: 36px;
    }

    .store-filter-field .form-control,
    .store-filter-field .form-select {
        padding-block: .34rem;
        padding-inline: .55rem;
    }

    .store-range-label strong {
        font-size: .68rem;
    }

    .store-range-control,
    .store-range-input {
        min-height: 36px;
    }

    .store-filter-apply,
    .store-filter-clear {
        font-size: .78rem;
        min-height: 36px;
        padding: .38rem .62rem;
        width: auto;
    }

    .store-results-summary {
        font-size: .78rem;
        margin-bottom: .65rem;
        min-height: 1rem;
    }

    .product-grid {
        gap: .7rem;
        grid-template-columns: 1fr;
    }

    .product-card {
        border-radius: var(--erp-radius-md);
        flex-direction: row;
        min-height: 124px;
    }

    .product-card:hover,
    .product-card:focus-within {
        transform: none;
    }

    .product-media {
        aspect-ratio: auto;
        flex: 0 0 clamp(92px, 30%, 118px);
        min-height: 100%;
        padding: .45rem;
    }

    .product-media img {
        height: min(100%, 90px);
        max-height: 90px;
    }

    .product-badge,
    .product-category-pill {
        font-size: .6rem;
        padding: .18rem .42rem;
    }

    .product-badge {
        inset-block-start: .45rem;
        inset-inline-start: .45rem;
    }

    .product-category-pill {
        inset-block-end: .45rem;
        inset-inline-end: .45rem;
        max-width: calc(100% - .9rem);
    }

    .product-body {
        gap: .45rem;
        min-width: 0;
        padding: .65rem;
    }

    .product-body h3,
    .product-body p {
        min-height: 0;
    }

    .product-card-main {
        gap: .28rem;
    }

    .product-kicker {
        font-size: .68rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-body h3 {
        display: -webkit-box;
        font-size: .9rem;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .product-body p {
        display: -webkit-box;
        font-size: .76rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .product-chip-row {
        gap: .25rem;
    }

    .product-chip {
        font-size: .66rem;
        min-height: 22px;
        padding: .18rem .4rem;
    }

    .product-chip i {
        font-size: .72rem;
    }

    .product-action {
        align-items: center;
        gap: .45rem;
        padding: .42rem;
    }

    .product-price {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: auto;
    }

    .product-price small {
        display: none;
    }

    .product-price strong {
        font-size: .95rem;
    }

    .product-buy-action {
        font-size: .78rem;
        min-height: 34px;
        min-width: 68px;
        padding: .35rem .6rem;
        width: auto;
    }
}

/* Public storefront redesign final cascade */
:root {
    --home-accent: var(--erp-primary);
    --home-accent-dark: color-mix(in srgb, var(--erp-primary) 82%, var(--erp-text));
    --home-accent-soft: color-mix(in srgb, var(--erp-primary) 9%, var(--erp-surface));
    --home-food-accent: var(--erp-warning);
    --home-food-soft: color-mix(in srgb, var(--erp-warning) 12%, var(--erp-surface));
    --home-ink: var(--erp-text);
    --home-muted: var(--erp-text-muted);
    --home-surface: var(--erp-surface);
    --home-border: var(--erp-border);
    --home-success: var(--erp-success);
    --home-focus-ring: var(--erp-focus-ring);
}

.home-page {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--erp-primary) 7%, var(--erp-bg)) 0%, var(--erp-bg) 38%, var(--erp-surface) 100%);
}

.home-hero {
    padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.home-hero-grid > .home-hero-content:not(.home-hero-content-v2),
.home-hero-grid > .home-hero-visual:not(.home-hero-visual-v2),
.home-service-strip .home-service-grid:not(.home-service-grid-v2),
.store-heading > div:not(.store-heading-copy),
.store-heading > p {
    display: none;
}

.home-hero-content-v2 {
    display: grid;
    gap: var(--erp-space-4);
}

.home-eyebrow,
.store-kicker,
.home-product-kicker {
    color: var(--home-accent-dark);
    letter-spacing: 0;
}

.home-eyebrow i,
.store-kicker i,
.home-product-kicker i {
    color: var(--home-food-accent);
}

.home-eyebrow::before,
.store-kicker::before {
    display: none;
}

.home-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.18;
    max-width: 720px;
}

.home-hero p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

.home-hero-actions {
    margin-top: 0;
}

.home-primary-action,
.home-secondary-action {
    border-radius: var(--erp-radius-md);
    font-weight: 700;
    min-height: 40px;
    padding: .55rem .95rem;
}

.home-primary-action {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
}

.home-primary-action:hover,
.home-primary-action:focus-visible {
    background: color-mix(in srgb, var(--erp-primary) 86%, var(--erp-text));
    border-color: color-mix(in srgb, var(--erp-primary) 86%, var(--erp-text));
}

.home-secondary-action {
    background: var(--home-surface);
    border-color: var(--home-border);
    color: var(--home-ink);
}

.home-secondary-action:hover,
.home-secondary-action:focus-visible {
    background: var(--home-accent-soft);
    border-color: color-mix(in srgb, var(--erp-primary) 24%, var(--home-border));
    color: var(--home-accent-dark);
}

.home-product-tray {
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-md);
    grid-template-columns: minmax(150px, .82fr) minmax(0, 1fr);
}

.home-product-media,
.product-media {
    background:
        linear-gradient(135deg, var(--home-accent-soft), var(--home-food-soft));
}

.home-product-badge,
.product-badge {
    background: var(--erp-success);
    font-weight: 700;
}

.home-product-delivery,
.product-chip,
.product-action {
    background: var(--home-accent-soft);
    border-color: color-mix(in srgb, var(--erp-primary) 16%, var(--home-border));
    color: var(--home-accent-dark);
}

.home-service-strip {
    padding-block: 0 clamp(2rem, 5vw, 3.5rem);
}

.home-service-grid-v2 {
    display: grid;
}

.home-service-item {
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-sm);
    min-height: 112px;
    padding: var(--erp-space-4);
}

.home-service-item i {
    background: var(--home-accent-soft);
    color: var(--home-accent-dark);
}

.home-service-item strong {
    font-weight: 700;
}

.home-service-item span {
    font-size: .875rem;
    line-height: 1.55;
}

.store-section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.store-heading {
    align-items: start;
    margin-bottom: var(--erp-space-4);
}

.store-heading-copy {
    display: grid;
    gap: var(--erp-space-2);
    max-width: 920px;
}

.store-heading-copy p {
    color: var(--home-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 680px;
}

.store-heading h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
}

.store-toolbar {
    background: color-mix(in srgb, var(--home-surface) 96%, transparent);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
    position: sticky;
    top: 76px;
    z-index: 4;
}

.store-filter-field span {
    color: var(--home-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
}

.store-filter-field .form-control,
.store-filter-field .form-select,
.store-filter-field .input-group-text {
    border-radius: var(--erp-radius-md);
    min-height: 38px;
}

.store-filter-field .input-group > .input-group-text {
    border-end-end-radius: 0;
    border-start-end-radius: 0;
}

.store-filter-field .input-group > .form-control {
    border-end-start-radius: 0;
    border-start-start-radius: 0;
}

.store-filter-field .input-group-text {
    background: var(--home-accent-soft);
    color: var(--home-accent-dark);
}

.store-filter-field .form-control:focus,
.store-filter-field .form-select:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 .2rem var(--home-focus-ring);
}

.store-range-control::after {
    background: var(--erp-primary);
}

.store-range-input::-webkit-slider-thumb {
    border-color: var(--erp-primary);
}

.store-range-input::-moz-range-thumb {
    border-color: var(--erp-primary);
}

.store-results-summary {
    color: var(--home-muted);
    font-weight: 700;
}

.product-grid {
    gap: var(--erp-space-4);
}

.product-card {
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
}

.product-card:hover,
.product-card:focus-within {
    border-color: color-mix(in srgb, var(--erp-primary) 28%, var(--home-border));
}

.product-kicker {
    color: var(--home-accent-dark);
    font-weight: 700;
}

.product-body h3 {
    font-weight: 800;
}

.product-category-pill {
    border-color: color-mix(in srgb, var(--erp-primary) 18%, var(--home-border));
}

.product-price strong {
    color: var(--home-accent-dark);
}

.product-buy-action {
    min-width: 82px;
}

.product-state {
    border-radius: var(--erp-radius-lg);
}

.product-state .spinner-border,
.product-state .bi {
    color: var(--erp-primary);
}

.store-pagination .bi-chevron-right,
.store-pagination .bi-chevron-left {
    transform: none;
}

[dir="rtl"] .store-pagination .bi-chevron-right,
[dir="rtl"] .store-pagination .bi-chevron-left {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .store-toolbar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .home-hero-content-v2 {
        gap: var(--erp-space-3);
    }

    .home-product-tray {
        grid-template-columns: 1fr;
    }

    .store-toolbar {
        border-radius: var(--erp-radius-md);
    }

    .product-card {
        min-height: 132px;
    }
}

/* Tenant homepage templates */
.home-page:has(.home-template-hero) > .home-hero:not(.home-template-hero),
.home-page:has(.home-template-features) > .home-service-strip:not(.home-template-features) {
    display: none;
}

.home-template-grid {
    align-items: center;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .78fr);
}

.home-template-corporateshowcase {
    background: color-mix(in srgb, var(--erp-primary) 6%, var(--erp-bg));
}

.home-template-corporateshowcase .home-product-tray {
    grid-template-columns: 1fr;
}

.home-template-corporateshowcase .home-product-media {
    min-height: 260px;
}

.home-template-producthighlight .home-template-grid {
    grid-template-columns: minmax(320px, .85fr) minmax(0, 1.05fr);
}

.home-template-producthighlight .home-hero-content {
    order: 2;
}

.home-template-producthighlight .home-hero-visual {
    order: 1;
}

.home-template-producthighlight .home-product-media img {
    max-height: 270px;
}

.home-template-campaignlanding {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--erp-warning) 10%, var(--erp-bg)), var(--erp-bg));
}

.home-template-campaignlanding .home-primary-action {
    background: var(--erp-warning);
    border-color: var(--erp-warning);
    color: var(--erp-text);
}

.home-template-campaignlanding .home-product-badge,
.home-template-campaignlanding .product-badge {
    background: var(--erp-warning);
    color: var(--erp-text);
}

.home-template-minimalcatalog {
    padding-block-end: var(--erp-space-3);
}

.home-template-minimalcatalog .home-template-grid {
    grid-template-columns: 1fr;
}

.home-template-minimalcatalog .home-hero-content {
    max-inline-size: 860px;
}

.home-template-minimalcatalog .home-hero-visual,
.home-template-minimalcatalog-features {
    display: none;
}

@media (max-width: 991.98px) {
    .home-template-grid,
    .home-template-producthighlight .home-template-grid {
        grid-template-columns: 1fr;
    }

    .home-template-producthighlight .home-hero-content,
    .home-template-producthighlight .home-hero-visual {
        order: initial;
    }
}

/* Six selectable tenant homepage designs */
.home-page > .home-hero,
.home-page > .home-service-strip {
    display: none;
}

.home-page-template-only .store-section {
    display: none;
}

.template-page {
    --home-template-nav-offset: 76px;
    --template-bg: var(--erp-bg);
    --template-surface: var(--erp-surface);
    --template-text: var(--erp-text);
    --template-muted: var(--erp-text-muted);
    --template-primary: var(--erp-primary);
    --template-accent: var(--erp-info);
    --template-border: var(--erp-border);
    background: var(--template-bg);
    color: var(--template-text);
    min-height: 100vh;
}

.template-container {
    inline-size: min(1280px, calc(100% - 48px));
    margin-inline: auto;
}

.template-nav {
    align-items: center;
    background: color-mix(in srgb, var(--template-surface) 88%, transparent);
    backdrop-filter: blur(16px);
    border-block-end: 1px solid color-mix(in srgb, var(--template-border) 70%, transparent);
    display: flex;
    gap: var(--erp-space-4);
    inset-block-start: 0;
    inset-inline: 0;
    justify-content: space-between;
    min-height: 76px;
    padding-inline: clamp(1rem, 4vw, 2rem);
    position: fixed;
    z-index: 90;
}

.template-brand,
.template-nav-links,
.template-nav-actions,
.template-hero-actions {
    align-items: center;
    display: flex;
    gap: var(--erp-space-3);
}

.template-brand {
    color: var(--template-text);
    font-weight: 800;
    text-decoration: none;
}

.template-brand img {
    block-size: 42px;
    inline-size: 42px;
}

.template-brand i {
    align-items: center;
    background: var(--template-primary);
    border-radius: var(--erp-radius-md);
    color: var(--erp-primary-contrast);
    display: inline-flex;
    block-size: 38px;
    inline-size: 38px;
    justify-content: center;
}

.template-nav-links a,
.template-login-link {
    color: var(--template-muted);
    font-weight: 700;
    text-decoration: none;
}

.template-nav-links a:hover,
.template-login-link:hover {
    color: var(--template-primary);
}

.template-nav-cta,
.template-primary-action,
.template-secondary-action {
    align-items: center;
    border-radius: var(--erp-radius-md);
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 42px;
    padding: .65rem 1.05rem;
    text-decoration: none;
}

.template-nav-cta,
.template-primary-action {
    background: var(--template-primary);
    border: 1px solid var(--template-primary);
    color: var(--erp-primary-contrast);
}

.template-secondary-action {
    background: transparent;
    border: 1px solid var(--template-border);
    color: var(--template-text);
}

.template-hero {
    overflow: hidden;
    padding-block: calc(var(--home-template-nav-offset) + clamp(3rem, 7vw, 6rem)) clamp(3rem, 7vw, 6rem);
}

.template-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
}

.template-hero-copy {
    display: grid;
    gap: var(--erp-space-4);
    min-inline-size: 0;
}

.template-eyebrow {
    color: var(--template-primary);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.template-hero h1 {
    color: var(--template-text);
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
    max-inline-size: 780px;
}

.template-hero p,
.template-section-heading p,
.template-feature-card p,
.template-cta-card p,
.template-footer p {
    color: var(--template-muted);
    line-height: 1.75;
    margin: 0;
}

.template-hero p {
    font-size: 1.08rem;
    max-inline-size: 640px;
}

.template-hero-visual {
    position: relative;
}

.template-visual-frame {
    background: var(--template-surface);
    border: 1px solid var(--template-border);
    border-radius: var(--erp-radius-xl);
    box-shadow: var(--erp-shadow-lg);
    overflow: hidden;
    padding: var(--erp-space-3);
}

.template-visual-frame img {
    aspect-ratio: 4 / 3;
    border-radius: var(--erp-radius-lg);
    display: block;
    inline-size: 100%;
    object-fit: cover;
}

.template-floating-card {
    align-items: center;
    background: var(--template-surface);
    border: 1px solid var(--template-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-md);
    display: grid;
    gap: var(--erp-space-1);
    inset-block-end: -24px;
    inset-inline-start: 24px;
    max-inline-size: 280px;
    padding: var(--erp-space-4);
    position: absolute;
}

.template-floating-card i {
    color: var(--template-primary);
}

.template-floating-card span {
    color: var(--template-muted);
    font-size: .78rem;
    font-weight: 700;
}

.template-features,
.template-stats,
.template-cta-section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.template-section-heading {
    display: grid;
    gap: var(--erp-space-2);
    margin-block-end: var(--erp-space-5);
    max-inline-size: 720px;
}

.template-section-heading h2,
.template-cta-card h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
}

.template-feature-grid {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-feature-card {
    background: var(--template-surface);
    border: 1px solid var(--template-border);
    border-radius: var(--erp-radius-lg);
    display: grid;
    gap: var(--erp-space-3);
    min-block-size: 180px;
    padding: var(--erp-space-5);
}

.template-feature-card i {
    color: var(--template-primary);
    font-size: 1.6rem;
}

.template-feature-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.template-stat-grid {
    display: grid;
    gap: var(--erp-space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.template-stat {
    border: 1px solid var(--template-border);
    border-radius: var(--erp-radius-lg);
    padding: var(--erp-space-4);
    text-align: center;
}

.template-stat strong {
    color: var(--template-primary);
    display: block;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.template-stat span {
    color: var(--template-muted);
    font-weight: 800;
}

.template-cta-card {
    background: var(--template-primary);
    border-radius: var(--erp-radius-xl);
    color: var(--erp-primary-contrast);
    display: grid;
    gap: var(--erp-space-4);
    padding: clamp(2rem, 6vw, 5rem);
    text-align: center;
}

.template-cta-card p {
    color: color-mix(in srgb, var(--erp-primary-contrast) 78%, transparent);
    margin-inline: auto;
    max-inline-size: 680px;
}

.template-cta-card .template-primary-action {
    background: var(--template-surface);
    border-color: var(--template-surface);
    color: var(--template-primary);
    justify-self: center;
}

.template-footer {
    background: color-mix(in srgb, var(--template-surface) 86%, var(--template-bg));
    border-block-start: 1px solid var(--template-border);
    padding-block: var(--erp-space-6);
}

.template-footer .template-container {
    display: grid;
    gap: var(--erp-space-2);
}

.template-page-currentstorefront {
    --template-primary: var(--erp-primary);
    --template-accent: var(--erp-warning);
}

.template-page-minimalistlanding {
    --template-bg: #ffffff;
    --template-surface: #ffffff;
    --template-text: #050505;
    --template-muted: #45464d;
    --template-primary: #0f172a;
    --template-accent: #0058be;
}

.template-page-minimalistlanding .template-visual-frame,
.template-page-minimalistlanding .template-feature-card,
.template-page-minimalistlanding .template-stat {
    border: 2px solid var(--template-primary);
    border-radius: 0;
    box-shadow: 18px 18px 0 color-mix(in srgb, var(--template-accent) 80%, transparent);
}

.template-page-softsaaslanding {
    --template-bg: #f8f9ff;
    --template-surface: #ffffff;
    --template-text: #0b1c30;
    --template-muted: #596579;
    --template-primary: #3b82f6;
    --template-border: color-mix(in srgb, #3b82f6 14%, var(--erp-border));
}

.template-page-softsaaslanding .template-feature-card,
.template-page-softsaaslanding .template-visual-frame,
.template-page-softsaaslanding .template-cta-card {
    border-radius: 2rem;
}

.template-page-boldenergeticlanding {
    --template-bg: #f8f9ff;
    --template-surface: #ffffff;
    --template-text: #0b1c30;
    --template-muted: #45464d;
    --template-primary: #0058be;
    --template-accent: #10b981;
}

.template-page-boldenergeticlanding .template-hero {
    background:
        radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--template-accent) 18%, transparent), transparent 30%),
        radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--template-primary) 20%, transparent), transparent 32%);
}

.template-page-corporatetrustlanding {
    --template-bg: #f8f9ff;
    --template-surface: #ffffff;
    --template-text: #0b1c30;
    --template-muted: #45464d;
    --template-primary: #0f172a;
    --template-accent: #0058be;
}

.template-page-corporatetrustlanding .template-feature-card,
.template-page-corporatetrustlanding .template-stat {
    border-radius: var(--erp-radius-sm);
}

.template-page-moderndarkmodelanding {
    --template-bg: #06111f;
    --template-surface: color-mix(in srgb, #ffffff 9%, #06111f);
    --template-text: #eaf1ff;
    --template-muted: #9fb0c7;
    --template-primary: #3b82f6;
    --template-border: color-mix(in srgb, #ffffff 14%, transparent);
    background:
        radial-gradient(circle at 74% 18%, color-mix(in srgb, #3b82f6 28%, transparent), transparent 32%),
        radial-gradient(circle at 12% 34%, color-mix(in srgb, #10b981 16%, transparent), transparent 30%),
        var(--template-bg);
}

.template-page-moderndarkmodelanding .template-nav,
.template-page-moderndarkmodelanding .template-feature-card,
.template-page-moderndarkmodelanding .template-visual-frame,
.template-page-moderndarkmodelanding .template-floating-card,
.template-page-moderndarkmodelanding .template-stat {
    backdrop-filter: blur(20px);
    box-shadow: 0 0 28px color-mix(in srgb, var(--template-primary) 18%, transparent);
}

@media (max-width: 991.98px) {
    .template-hero-grid,
    .template-feature-grid,
    .template-stat-grid {
        grid-template-columns: 1fr;
    }

    .template-nav-links {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .template-container {
        inline-size: min(100% - 32px, 1280px);
    }

    .template-nav {
        min-height: 64px;
        padding-inline: var(--erp-space-3);
    }

    .template-nav-actions {
        gap: var(--erp-space-2);
    }

    .template-nav-cta {
        display: none;
    }

    .template-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .template-floating-card {
        inset-block-end: var(--erp-space-3);
        inset-inline: var(--erp-space-3);
        position: relative;
        max-inline-size: none;
    }
}

/* Homepage template polish pass */
.template-page,
.template-page * {
    box-sizing: border-box;
}

.template-page a,
.template-page button {
    min-inline-size: 0;
}

.template-brand,
.template-nav-links,
.template-nav-actions,
.template-hero-copy,
.template-hero-visual,
.template-feature-card,
.template-stat,
.template-cta-card,
.template-footer .template-container {
    min-inline-size: 0;
}

.template-nav {
    align-items: center;
    column-gap: var(--erp-space-4);
    row-gap: var(--erp-space-2);
}

.template-brand {
    flex: 1 1 180px;
    gap: var(--erp-space-2);
    max-inline-size: 320px;
}

.template-brand span,
.template-nav-links a,
.template-login-link,
.template-nav-cta,
.template-primary-action,
.template-secondary-action {
    overflow-wrap: anywhere;
    text-align: center;
}

.template-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-nav-links {
    flex: 1 1 auto;
    justify-content: center;
}

.template-nav-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.template-nav-cta,
.template-primary-action,
.template-secondary-action {
    line-height: 1.25;
    max-inline-size: 100%;
    white-space: normal;
}

.template-hero {
    padding-block: calc(var(--home-template-nav-offset) + 4.75rem) 4.75rem;
}

.template-hero-grid {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
}

.template-hero-copy {
    gap: var(--erp-space-4);
}

.template-eyebrow {
    line-height: 1.45;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.template-hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    max-inline-size: 780px;
    overflow-wrap: anywhere;
}

.template-hero p {
    font-size: 1.05rem;
    line-height: 1.8;
    max-inline-size: 660px;
    overflow-wrap: anywhere;
}

.template-hero-actions {
    align-items: stretch;
    flex-wrap: wrap;
}

.template-hero-actions > a {
    flex: 0 1 auto;
}

.template-hero-visual {
    display: grid;
    gap: var(--erp-space-3);
}

.template-visual-frame {
    box-shadow: var(--erp-shadow-md);
}

.template-visual-frame img {
    max-block-size: 520px;
}

.template-floating-card {
    align-items: start;
    inline-size: min(100%, 360px);
    inset: auto;
    line-height: 1.45;
    max-inline-size: 100%;
    position: relative;
}

.template-floating-card strong,
.template-floating-card span,
.template-feature-card h3,
.template-feature-card p,
.template-stat strong,
.template-stat span,
.template-cta-card h2,
.template-cta-card p,
.template-footer strong,
.template-footer p,
.template-footer span {
    overflow-wrap: anywhere;
}

.template-section-heading {
    gap: var(--erp-space-3);
}

.template-section-heading h2,
.template-cta-card h2 {
    font-size: 2.75rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.template-section-heading p,
.template-feature-card p,
.template-cta-card p,
.template-footer p,
.template-footer span {
    line-height: 1.75;
}

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

.template-feature-card {
    align-content: start;
    min-block-size: 0;
}

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

.template-stat {
    display: grid;
    gap: var(--erp-space-1);
}

.template-stat strong {
    font-size: 2.35rem;
    line-height: 1.1;
}

.template-cta-card {
    inline-size: 100%;
    justify-items: center;
}

.template-cta-card .template-primary-action {
    inline-size: fit-content;
}

.template-footer .template-container {
    line-height: 1.7;
}

.template-page-minimalistlanding .template-visual-frame,
.template-page-minimalistlanding .template-feature-card,
.template-page-minimalistlanding .template-stat {
    box-shadow: 10px 10px 0 color-mix(in srgb, var(--template-accent) 58%, transparent);
}

.template-page-softsaaslanding .template-feature-card,
.template-page-softsaaslanding .template-visual-frame,
.template-page-softsaaslanding .template-cta-card {
    box-shadow: var(--erp-shadow-sm);
}

.template-page-boldenergeticlanding .template-feature-card {
    box-shadow: var(--erp-shadow-sm);
}

.template-page-corporatetrustlanding .template-section-heading,
.template-page-corporatetrustlanding .template-footer .template-container {
    max-inline-size: 860px;
}

.template-page-moderndarkmodelanding .template-nav,
.template-page-moderndarkmodelanding .template-feature-card,
.template-page-moderndarkmodelanding .template-visual-frame,
.template-page-moderndarkmodelanding .template-floating-card,
.template-page-moderndarkmodelanding .template-stat {
    box-shadow: 0 0 18px color-mix(in srgb, var(--template-primary) 12%, transparent);
}

@media (max-width: 1199.98px) {
    .template-hero h1 {
        font-size: 3.25rem;
    }

    .template-section-heading h2,
    .template-cta-card h2 {
        font-size: 2.35rem;
    }

    .template-nav-links {
        display: none;
    }

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

@media (max-width: 991.98px) {
    .template-hero {
        padding-block: calc(var(--home-template-nav-offset) + 3.5rem) 3.5rem;
    }

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

    .template-hero-visual {
        inline-size: min(100%, 680px);
    }

    .template-feature-card {
        padding: var(--erp-space-4);
    }
}

@media (max-width: 767.98px) {
    .template-page {
        --home-template-nav-offset: 148px;
    }

    .template-container {
        inline-size: min(100% - 28px, 1280px);
    }

    .template-nav {
        align-items: stretch;
        flex-wrap: wrap;
        min-height: 0;
        padding-block: var(--erp-space-3);
        position: fixed;
    }

    .template-brand,
    .template-nav-actions {
        inline-size: 100%;
        max-inline-size: none;
    }

    .template-nav-actions {
        justify-content: flex-start;
    }

    [dir="rtl"] .template-nav-actions {
        justify-content: flex-end;
    }

    .template-hero h1 {
        font-size: 2.35rem;
        line-height: 1.16;
    }

    .template-hero p {
        font-size: 1rem;
    }

    .template-hero-actions > a,
    .template-nav-actions > a {
        flex: 1 1 160px;
    }

    .template-section-heading h2,
    .template-cta-card h2 {
        font-size: 2rem;
    }

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

    .template-cta-card {
        padding: var(--erp-space-5);
    }
}

@media (max-width: 575.98px) {
    .template-page {
        --home-template-nav-offset: 172px;
    }

    .template-brand span {
        white-space: normal;
    }

    .template-nav-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .template-nav-cta {
        display: inline-flex;
    }

    .template-hero {
        padding-block: calc(var(--home-template-nav-offset) + 2.75rem) 2.75rem;
    }

    .template-hero h1 {
        font-size: 2rem;
    }

    .template-visual-frame {
        border-radius: var(--erp-radius-lg);
        padding: var(--erp-space-2);
    }

    .template-floating-card {
        inline-size: 100%;
        padding: var(--erp-space-3);
    }

    .template-page-minimalistlanding .template-visual-frame,
    .template-page-minimalistlanding .template-feature-card,
    .template-page-minimalistlanding .template-stat {
        box-shadow: 5px 5px 0 color-mix(in srgb, var(--template-accent) 45%, transparent);
    }
}

/* Uploaded landing page designs */
.uploaded-landing {
    --home-template-nav-offset: 80px;
    --u-bg: #f8f9ff;
    --u-surface: #ffffff;
    --u-soft: #e5eeff;
    --u-text: #0b1c30;
    --u-muted: #45464d;
    --u-primary: #0f172a;
    --u-secondary: #0058be;
    --u-tertiary: #10b981;
    --u-border: #c6c6cd;
    background: var(--u-bg);
    color: var(--u-text);
    font-family: var(--erp-font-family);
    min-block-size: 100vh;
    overflow-x: hidden;
}

.uploaded-landing,
.uploaded-landing * {
    box-sizing: border-box;
}

.u-container {
    inline-size: min(1280px, calc(100% - 48px));
    margin-inline: auto;
}

.u-nav {
    background: color-mix(in srgb, var(--u-surface) 84%, transparent);
    backdrop-filter: blur(20px);
    border-block-end: 1px solid color-mix(in srgb, var(--u-border) 28%, transparent);
    inset-block-start: 0;
    inset-inline: 0;
    position: fixed;
    z-index: 90;
}

.u-nav .inner {
    align-items: center;
    display: flex;
    gap: var(--erp-space-4);
    justify-content: space-between;
    min-block-size: 80px;
}

.u-nav a {
    color: inherit;
    min-inline-size: 0;
    text-decoration: none;
}

.u-nav .brand,
.u-nav .links,
.u-nav .actions {
    align-items: center;
    display: flex;
    gap: var(--erp-space-3);
    min-inline-size: 0;
}

.u-nav .brand {
    flex: 1 1 180px;
    font-size: 1.45rem;
    font-weight: 800;
}

.u-nav .brand i {
    align-items: center;
    background: var(--u-secondary);
    border-radius: .75rem;
    color: #ffffff;
    display: inline-flex;
    block-size: 40px;
    inline-size: 40px;
    justify-content: center;
}

.u-nav .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-nav .links {
    color: var(--u-muted);
    flex: 1 1 auto;
    font-weight: 600;
    justify-content: center;
}

.u-nav .links a:first-child {
    color: var(--u-secondary);
}

.u-nav .actions {
    color: var(--u-muted);
    flex: 1 1 180px;
    font-weight: 700;
    justify-content: flex-end;
}

.u-nav .actions .primary,
.u-actions .primary,
.u-actions .secondary,
.u-cta a,
.u-pricing a {
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    line-height: 1.25;
    min-block-size: 48px;
    overflow-wrap: anywhere;
    padding: .85rem 1.35rem;
    text-align: center;
    text-decoration: none;
}

.u-nav .actions .primary,
.u-actions .primary,
.u-cta a,
.u-pricing a {
    background: var(--u-secondary);
    color: #ffffff;
}

.u-actions .secondary {
    border: 2px solid var(--u-primary);
    color: var(--u-primary);
}

.u-hero {
    padding-block: calc(var(--home-template-nav-offset) + clamp(4rem, 9vw, 7.5rem)) clamp(4rem, 9vw, 7.5rem);
}

.u-split {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
}

.u-copy {
    display: grid;
    gap: var(--erp-space-4);
    min-inline-size: 0;
}

.u-copy.soft {
    text-align: start;
}

.u-eyebrow {
    align-items: center;
    color: var(--u-secondary);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: .5rem;
    letter-spacing: .05em;
    line-height: 1.4;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    width: fit-content;
}

.u-eyebrow.boxed {
    border: 1px solid currentColor;
    padding: .35rem .7rem;
}

.u-eyebrow.pill,
.u-eyebrow.glass {
    background: color-mix(in srgb, var(--u-secondary) 10%, var(--u-surface));
    border: 1px solid color-mix(in srgb, var(--u-secondary) 22%, transparent);
    border-radius: 999px;
    padding: .45rem .8rem;
}

.u-copy h1 {
    color: var(--u-text);
    font-size: clamp(2.6rem, 6vw, 4.5rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
    max-inline-size: 820px;
    overflow-wrap: anywhere;
}

.u-copy p,
.u-heading p,
.u-card p,
.u-soft-card p,
.u-energy-card p,
.u-corporate-card p,
.u-dark-card p,
.u-cta p,
.u-footer p,
.u-footer a {
    color: var(--u-muted);
    line-height: 1.75;
    margin: 0;
    overflow-wrap: anywhere;
}

.u-copy p {
    font-size: 1.08rem;
    max-inline-size: 620px;
}

.u-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-3);
}

.u-logo-row,
.u-avatar-row,
.u-dark-icons {
    align-items: center;
    color: var(--u-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-3);
}

.u-logo-row {
    filter: grayscale(1);
    opacity: .68;
}

.u-avatar-row span {
    background: var(--u-soft);
    border: 2px solid var(--u-surface);
    border-radius: 999px;
    block-size: 40px;
    inline-size: 40px;
    margin-inline-end: -18px;
}

.u-section {
    padding-block: clamp(4rem, 9vw, 7.5rem);
}

.u-section.white {
    background: #ffffff;
}

.u-heading {
    display: grid;
    gap: var(--erp-space-3);
    margin-block-end: clamp(2rem, 5vw, 4rem);
    margin-inline: auto;
    max-inline-size: 780px;
    text-align: center;
}

.u-heading h2,
.u-cta h2 {
    color: var(--u-text);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
}

.u-card,
.u-soft-card,
.u-energy-card,
.u-corporate-card,
.u-dark-card {
    min-inline-size: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.u-card i,
.u-soft-card i,
.u-energy-card i,
.u-corporate-card i,
.u-dark-card i {
    color: var(--u-secondary);
    font-size: 2rem;
}

.u-card h3,
.u-soft-card h3,
.u-energy-card h3,
.u-corporate-card h3,
.u-dark-card h3 {
    color: var(--u-text);
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.u-stats {
    background: var(--u-primary);
    color: #ffffff;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.u-stats .grid {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center;
}

.u-stats strong {
    color: color-mix(in srgb, var(--u-secondary) 75%, #ffffff);
    display: block;
    font-size: clamp(2.2rem, 5vw, 4.25rem);
    font-weight: 850;
    line-height: 1;
}

.u-stats span {
    color: color-mix(in srgb, #ffffff 62%, transparent);
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.5;
    margin-block-start: .65rem;
    text-transform: uppercase;
}

.u-footer {
    background: color-mix(in srgb, var(--u-soft) 70%, var(--u-bg));
    border-block-start: 1px solid color-mix(in srgb, var(--u-border) 28%, transparent);
    padding-block: clamp(3rem, 7vw, 5rem) 2rem;
}

.u-footer .grid {
    display: grid;
    gap: var(--erp-space-5);
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
}

.u-footer strong,
.u-footer h4 {
    color: var(--u-text);
    display: block;
    font-weight: 800;
    margin-block-end: var(--erp-space-2);
}

.u-footer a {
    display: block;
    margin-block: .35rem;
}

.u-footer .bottom {
    border-block-start: 1px solid color-mix(in srgb, var(--u-border) 30%, transparent);
    color: var(--u-muted);
    margin-block-start: var(--erp-space-5);
    padding-block-start: var(--erp-space-4);
}

/* Minimalist high-contrast */
.uploaded-landing-minimalistlanding {
    --u-bg: #f8f9ff;
    --u-surface: #ffffff;
    --u-soft: #f3f6fc;
    --u-text: #050505;
    --u-muted: #45464d;
    --u-primary: #000000;
    --u-secondary: #0058be;
    --u-border: #000000;
}

.uploaded-landing-minimalistlanding .u-nav .brand i {
    border-radius: 0;
}

.u-minimal-visual {
    background: #ffffff;
    border: 2px solid #000000;
    box-shadow: 24px 24px 0 var(--u-secondary);
    padding: 1rem;
}

.u-minimal-visual img,
.u-card.media img {
    aspect-ratio: 1 / 1;
    display: block;
    inline-size: 100%;
    object-fit: cover;
}

.u-minimal-heading {
    display: grid;
    gap: var(--erp-space-3);
    margin-block-end: var(--erp-space-6);
}

.u-minimal-heading h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 850;
    margin: 0;
}

.u-minimal-heading span {
    background: var(--u-secondary);
    block-size: 8px;
    inline-size: 80px;
}

.u-minimal-bento {
    display: grid;
    gap: var(--erp-space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-card {
    border: 2px solid var(--u-primary);
    display: grid;
    gap: var(--erp-space-3);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.u-card.wide {
    grid-column: span 2;
}

.u-card.media {
    align-items: center;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
}

.u-quote {
    text-align: center;
}

.u-quote i {
    color: var(--u-secondary);
    font-size: 3rem;
}

.u-quote blockquote {
    color: var(--u-primary);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-style: italic;
    font-weight: 800;
    line-height: 1.25;
    margin: var(--erp-space-4) auto;
    max-inline-size: 860px;
}

.u-pricing .grid {
    border-inline-start: 2px solid var(--u-primary);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-pricing article {
    border-block-end: 2px solid var(--u-primary);
    border-inline-end: 2px solid var(--u-primary);
    display: grid;
    gap: var(--erp-space-3);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.u-pricing article.featured {
    background: var(--u-primary);
    color: #ffffff;
}

.u-pricing article strong {
    font-size: 2.5rem;
}

/* Soft SaaS */
.uploaded-landing-softsaaslanding {
    --u-bg: #f8f9ff;
    --u-surface: #ffffff;
    --u-soft: #e5eeff;
    --u-text: #0b1c30;
    --u-muted: #596579;
    --u-primary: #131b2e;
    --u-secondary: #2170e4;
    --u-border: #d3e4fe;
}

.u-soft-hero {
    background: radial-gradient(circle at top right, #d3e4fe 0%, #f8f9ff 100%);
}

.u-soft-visual {
    position: relative;
}

.u-soft-visual .shell {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 3rem;
    box-shadow: 0 28px 70px rgba(80, 120, 190, .22);
    padding: 1rem;
    transform: rotate(3deg);
}

.u-soft-visual img {
    aspect-ratio: 1 / 1;
    border-radius: 2rem;
    display: block;
    inline-size: 100%;
    object-fit: cover;
}

.u-soft-visual .bubble {
    align-items: center;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1.25rem;
    box-shadow: var(--erp-shadow-lg);
    display: flex;
    gap: .5rem;
    padding: 1rem;
    position: absolute;
}

.u-soft-visual .top {
    inset-block-start: -1rem;
    inset-inline-end: -1rem;
}

.u-soft-visual .bottom {
    inset-block-end: -1.25rem;
    inset-inline-start: -1.25rem;
}

.u-soft-bento {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.u-soft-card {
    background: var(--u-soft);
    border-radius: 2rem;
    display: grid;
    gap: var(--erp-space-3);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.u-soft-card.large {
    grid-column: span 8;
    min-block-size: 360px;
}

.u-soft-card.tall {
    grid-column: span 4;
}

.u-soft-card.blue {
    background: var(--u-secondary);
    color: #ffffff;
    grid-column: span 4;
}

.u-soft-card.blue h3,
.u-soft-card.blue p,
.u-soft-card.blue i {
    color: #ffffff;
}

.u-soft-card.wide {
    grid-column: span 8;
}

.u-testimonials .grid {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-testimonials article {
    background: var(--u-surface);
    border-radius: 2rem;
    box-shadow: 0 22px 60px rgba(90, 120, 160, .12);
    display: grid;
    gap: var(--erp-space-3);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.u-cta {
    background: var(--u-primary);
    border-radius: 2.5rem;
    color: #ffffff;
    display: grid;
    gap: var(--erp-space-4);
    overflow: hidden;
    padding: clamp(2rem, 6vw, 5rem);
    position: relative;
    text-align: center;
}

.u-cta h2,
.u-cta p {
    color: #ffffff;
}

.u-cta a {
    border-radius: 999px;
    justify-self: center;
}

/* Energetic */
.uploaded-landing-boldenergeticlanding {
    --u-bg: #f8f9ff;
    --u-surface: #ffffff;
    --u-soft: #e5eeff;
    --u-text: #0b1c30;
    --u-muted: #45464d;
    --u-primary: #000000;
    --u-secondary: #0058be;
    --u-tertiary: #10b981;
}

.u-energy-hero {
    background:
        radial-gradient(at 0% 0%, rgba(173, 202, 255, .82) 0, transparent 50%),
        radial-gradient(at 100% 100%, rgba(111, 251, 190, .55) 0, transparent 50%),
        var(--u-bg);
}

.u-eyebrow.lively {
    animation: none;
}

.u-energy-visual {
    position: relative;
}

.u-energy-visual img {
    aspect-ratio: 1 / 1;
    border-radius: 2.5rem;
    box-shadow: 0 20px 40px -15px rgba(0, 88, 190, .38);
    display: block;
    inline-size: 100%;
    object-fit: cover;
    transform: rotate(3deg);
}

.u-energy-visual .growth {
    align-items: center;
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1rem;
    box-shadow: var(--erp-shadow-lg);
    display: flex;
    gap: .75rem;
    inset-block-end: -1.25rem;
    inset-inline-start: -1rem;
    padding: 1rem;
    position: absolute;
}

.u-energy-grid {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.u-energy-card {
    background: color-mix(in srgb, var(--u-secondary) 8%, var(--u-surface));
    border-radius: 2rem;
    box-shadow: 0 20px 40px -15px rgba(0, 88, 190, .2);
    display: grid;
    gap: var(--erp-space-3);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.u-energy-card.large {
    grid-column: span 2;
    min-block-size: 420px;
}

.u-energy-card.full {
    background: var(--u-primary);
    color: #ffffff;
    grid-column: span 3;
}

.u-energy-card.full h3,
.u-energy-card.full p {
    color: #ffffff;
}

.u-pricing.energy .grid {
    border: 0;
    gap: var(--erp-space-5);
}

.u-pricing.energy article {
    border: 0;
    border-block-end: 8px solid var(--u-secondary);
    border-radius: 2rem;
    box-shadow: 0 20px 40px -15px rgba(0, 88, 190, .2);
}

/* Corporate */
.uploaded-landing-corporatetrustlanding {
    --u-bg: #f8f9ff;
    --u-surface: #ffffff;
    --u-soft: #eff4ff;
    --u-text: #0b1c30;
    --u-muted: #45464d;
    --u-primary: #131b2e;
    --u-secondary: #0058be;
}

.u-corporate-hero,
.corporate-bg {
    background: var(--u-soft);
}

.u-corporate-visual {
    min-block-size: 500px;
    position: relative;
}

.u-corporate-visual img {
    block-size: 100%;
    border: 1px solid color-mix(in srgb, var(--u-border) 45%, transparent);
    border-radius: .75rem;
    display: block;
    inline-size: 100%;
    object-fit: cover;
}

.u-corporate-visual .sla {
    align-items: center;
    background: #ffffff;
    border-inline-start: 4px solid var(--u-secondary);
    box-shadow: var(--erp-shadow-lg);
    display: grid;
    gap: .15rem;
    inset-block-end: 2rem;
    inset-inline-start: -2rem;
    min-inline-size: 220px;
    padding: 1.25rem;
    position: absolute;
}

.u-stats.corporate {
    background: var(--u-primary);
}

.u-corporate-grid {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.u-corporate-card {
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--u-border) 40%, transparent);
    display: grid;
    gap: var(--erp-space-3);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.u-corporate-card.wide {
    grid-column: span 8;
}

.u-corporate-card.dark {
    background: var(--u-primary);
    color: #ffffff;
    grid-column: span 4;
}

.u-corporate-card.dark h3,
.u-corporate-card.dark p {
    color: #ffffff;
}

.u-corporate-card:not(.wide):not(.dark) {
    grid-column: span 12;
}

/* Modern dark */
.uploaded-landing-moderndarkmodelanding {
    --u-bg: #0f172a;
    --u-surface: #0f172a;
    --u-soft: rgba(255, 255, 255, .08);
    --u-text: #f8f9ff;
    --u-muted: rgba(234, 241, 255, .72);
    --u-primary: #0f172a;
    --u-secondary: #3b82f6;
    --u-tertiary: #4edea3;
    --u-border: rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 88, 190, .16) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(78, 222, 163, .1) 0%, transparent 50%),
        var(--u-bg);
}

.uploaded-landing-moderndarkmodelanding .u-nav {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(255, 255, 255, .08);
}

.u-dark-hero,
.u-dark-section {
    background: transparent;
}

.u-eyebrow.glass {
    background: rgba(59, 130, 246, .12);
    color: var(--u-secondary);
}

.u-eyebrow.glass span {
    background: var(--u-tertiary);
    border-radius: 999px;
    block-size: 8px;
    inline-size: 8px;
}

.u-dark-icons i {
    font-size: 2rem;
    opacity: .62;
}

.u-dark-visual {
    position: relative;
}

.u-dark-visual .glow {
    background: linear-gradient(90deg, var(--u-secondary), var(--u-tertiary));
    border-radius: 999px;
    filter: blur(42px);
    inset: -1rem;
    opacity: .22;
    position: absolute;
}

.u-dark-visual .frame,
.u-dark-card {
    background: rgba(30, 41, 59, .42);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .12);
}

.u-dark-visual .frame {
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}

.u-dark-visual img {
    aspect-ratio: 4 / 3;
    border-radius: .85rem;
    display: block;
    inline-size: 100%;
    object-fit: cover;
}

.u-dark-visual .dots {
    display: flex;
    gap: .4rem;
    inset-block-start: 2rem;
    inset-inline-start: 2rem;
    position: absolute;
}

.u-dark-visual .dots span {
    background: #ef4444;
    border-radius: 999px;
    block-size: 10px;
    inline-size: 10px;
}

.u-dark-visual .dots span:nth-child(2) {
    background: #f59e0b;
}

.u-dark-visual .dots span:nth-child(3) {
    background: #10b981;
}

.u-dark-bento {
    display: grid;
    gap: var(--erp-space-4);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.u-dark-card {
    border-radius: 1.5rem;
    display: grid;
    gap: var(--erp-space-3);
    grid-column: span 4;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.u-dark-card.large {
    grid-column: span 8;
    min-block-size: 360px;
}

.u-dark-card.stat {
    align-content: center;
    text-align: center;
}

.u-dark-card.stat strong {
    color: var(--u-secondary);
    font-size: 3rem;
}

.uploaded-landing-moderndarkmodelanding .u-stats,
.uploaded-landing-moderndarkmodelanding .u-footer {
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 1199.98px) {
    .u-nav .links {
        display: none;
    }

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

@media (max-width: 991.98px) {
    .u-split,
    .u-minimal-bento,
    .u-energy-grid,
    .u-pricing .grid,
    .u-testimonials .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .u-card.wide,
    .u-card.media,
    .u-soft-card.large,
    .u-soft-card.tall,
    .u-soft-card.blue,
    .u-soft-card.wide,
    .u-energy-card.large,
    .u-energy-card.full,
    .u-corporate-card.wide,
    .u-corporate-card.dark,
    .u-dark-card,
    .u-dark-card.large {
        grid-column: auto;
    }

    .u-card.media {
        grid-template-columns: minmax(0, 1fr);
    }

    .u-soft-bento,
    .u-corporate-grid,
    .u-dark-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .u-corporate-visual {
        min-block-size: 360px;
    }

    .u-corporate-visual .sla,
    .u-energy-visual .growth,
    .u-soft-visual .bubble {
        inset: auto;
        margin-block-start: var(--erp-space-3);
        position: relative;
    }
}

@media (max-width: 767.98px) {
    .uploaded-landing {
        --home-template-nav-offset: 144px;
    }

    .u-container {
        inline-size: min(100% - 32px, 1280px);
    }

    .u-nav .inner {
        align-items: stretch;
        flex-wrap: wrap;
        gap: var(--erp-space-2);
        padding-block: var(--erp-space-3);
    }

    .u-nav .brand,
    .u-nav .actions {
        flex: 1 1 100%;
    }

    .u-nav .actions {
        justify-content: flex-start;
    }

    [dir="rtl"] .u-nav .actions {
        justify-content: flex-end;
    }

    .u-actions,
    .u-nav .actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .u-copy h1 {
        font-size: clamp(2.1rem, 12vw, 3rem);
    }

    .u-stats .grid,
    .u-footer .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .u-minimal-visual {
        box-shadow: 10px 10px 0 var(--u-secondary);
    }

    .u-soft-visual .shell,
    .u-energy-visual img {
        transform: none;
    }
}