.ui-template {
    --ui-canvas: #f4f6f5;
    --ui-surface: #ffffff;
    --ui-surface-muted: #edf0ee;
    --ui-surface-strong: #171b19;
    --ui-text: #161a18;
    --ui-text-muted: #606864;
    --ui-text-subtle: #7b837f;
    --ui-border: #d5dad7;
    --ui-border-strong: #aeb6b1;
    --ui-accent: #e54824;
    --ui-accent-strong: #bd3418;
    --ui-accent-soft: #fff0eb;
    --ui-focus: #176b58;
    --ui-radius-small: 4px;
    --ui-radius: 8px;
    --ui-control-height: 3.25rem;
    --ui-content-width: 90rem;
    --ui-gutter: clamp(1.25rem, 5vw, 5rem);
    --ui-shadow-small: 0 1px 2px rgba(19, 25, 22, 0.05), 0 8px 24px rgba(19, 25, 22, 0.05);
    --ui-shadow-raised: 0 18px 48px rgba(19, 25, 22, 0.1);
    background: var(--ui-canvas);
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-synthesis: none;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.ui-template--product {
    color-scheme: light;
}

.ui-template .ui-container {
    margin-inline: auto;
    max-width: var(--ui-content-width);
    padding-inline: var(--ui-gutter);
    width: 100%;
}

.ui-template .ui-kicker {
    color: var(--ui-accent-strong);
    display: block;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.35;
}

.ui-template .ui-title {
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: clamp(2.75rem, 6vw, 5.75rem);
    font-weight: 650;
    letter-spacing: 0;
    line-height: 0.98;
}

.ui-template .ui-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ui-template .ui-field__label {
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

.ui-template .ui-control {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-small);
    box-shadow: 0 1px 1px rgba(19, 25, 22, 0.03);
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    min-height: var(--ui-control-height);
    padding: 0.75rem 0.875rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
    width: 100%;
}

.ui-template .ui-control::placeholder {
    color: var(--ui-text-subtle);
    opacity: 1;
}

.ui-template .ui-control:hover {
    border-color: var(--ui-border-strong);
}

.ui-template .ui-control:focus {
    border-color: var(--ui-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 16%, transparent);
    outline: 0;
}

.ui-template .ui-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-small);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 650;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0;
    min-height: var(--ui-control-height);
    padding: 0.75rem 1.125rem;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.ui-template .ui-button:hover {
    transform: translateY(-1px);
}

.ui-template .ui-button--primary {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(229, 72, 36, 0.18);
}

.ui-template .ui-button--primary:hover {
    background: var(--ui-accent-strong);
    border-color: var(--ui-accent-strong);
}

.ui-template .ui-button--secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.ui-template .ui-button--secondary:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-small);
}

.ui-template .ui-button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ui-text-muted);
    min-height: 2.75rem;
    padding-inline: 0.75rem;
}

.ui-template .ui-button--quiet:hover {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

.site-shell:has(.ui-template--product) .site-header {
    background: rgba(17, 21, 19, 0.94);
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.site-shell:has(.ui-template--product) .desktop-nav a,
.site-shell:has(.ui-template--product) .header-access,
.site-shell:has(.ui-template--product) .header-account,
.site-shell:has(.ui-template--product) .header-agent,
.site-shell:has(.ui-template--product) .footer-links a,
.site-shell:has(.ui-template--product) .footer-meta {
    font-family: var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
}

.site-shell:has(.ui-template--product) .desktop-nav a,
.site-shell:has(.ui-template--product) .header-access,
.site-shell:has(.ui-template--product) .header-account,
.site-shell:has(.ui-template--product) .header-agent {
    font-size: 0.8125rem;
}

.site-shell:has(.ui-template--product) .header-agent {
    border-radius: var(--ui-radius-small);
}

.site-shell:has(.ui-template--product) .footer-main p {
    font-family: var(--font-ui);
    font-size: clamp(2rem, 4.5vw, 4.25rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.04;
    text-transform: none;
}

@media (max-width: 720px) {
    .ui-template {
        --ui-gutter: 1rem;
    }

    .ui-template .ui-title {
        font-size: clamp(2.5rem, 13vw, 4.25rem);
    }
}