/*
 * Unified premium frontend layer for core portal pages.
 * Loaded last on templates/cases/downloads/updates/versions/help pages.
 */
:root {
    --uf-bg: #f5f7fb;
    --uf-bg-2: #eef3f9;
    --uf-ink: #172033;
    --uf-muted: #607089;
    --uf-soft: #8897ad;
    --uf-line: #dde6f1;
    --uf-line-strong: #cbd7e6;
    --uf-surface: #ffffff;
    --uf-primary: #1456c8;
    --uf-primary-dark: #0f3f93;
    --uf-teal: #0f9f9a;
    --uf-gold: #b7791f;
    --uf-navy: #101b31;
    --uf-shadow: 0 18px 44px rgba(23, 32, 51, 0.10);
    --uf-shadow-soft: 0 8px 24px rgba(23, 32, 51, 0.07);
    --uf-radius: 8px;
}

html {
    background: var(--uf-bg);
}

body.model-page,
body.cases-page,
body.downloads-page,
body.updates-page,
body.versions-page,
body.help-page {
    margin: 0;
    background:
        linear-gradient(180deg, #f9fbff 0, #f3f6fb 420px, var(--uf-bg) 100%),
        var(--uf-bg);
    color: var(--uf-ink);
    letter-spacing: 0;
}

body.model-page *,
body.cases-page *,
body.downloads-page *,
body.updates-page *,
body.versions-page *,
body.help-page * {
    box-sizing: border-box;
}

body.model-page .page-wrap,
body.cases-page .page-wrap,
body.downloads-page .page-wrap,
body.updates-page .page-wrap,
body.versions-page .page-wrap,
body.help-page .page-wrap {
    width: min(100% - 48px, 1240px);
    margin-inline: auto;
}

.model-topbar,
.cases-topbar,
.downloads-topbar,
.updates-topbar,
.versions-topbar,
.help-topbar {
    background: var(--uf-navy);
    border: 0;
    color: #c8d3e3;
}

.model-topbar-inner,
.cases-topbar-inner,
.downloads-topbar-inner,
.updates-topbar-inner,
.versions-topbar-inner,
.help-topbar-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 13px;
}

.model-topbar a,
.cases-topbar a,
.downloads-topbar a,
.updates-topbar a,
.versions-topbar a,
.help-topbar a {
    color: #dbe5f2;
    text-decoration: none;
}

.model-topbar-notice,
.cases-topbar-notice,
.downloads-topbar-notice,
.updates-topbar-notice,
.versions-topbar-notice,
.help-topbar-notice {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f4f7fb;
}

.model-topbar-actions,
.cases-topbar-actions,
.downloads-topbar-actions,
.updates-topbar-actions,
.versions-topbar-actions,
.help-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.model-topbar-actions a,
.cases-topbar-actions a,
.downloads-topbar-actions a,
.updates-topbar-actions a,
.versions-topbar-actions a,
.help-topbar-actions a {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #eef4ff;
    font-weight: 700;
}

.model-header,
.cases-header,
.downloads-header,
.updates-header,
.versions-header,
.help-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(203, 215, 230, 0.78);
    box-shadow: 0 10px 28px rgba(23, 32, 51, 0.07);
    backdrop-filter: blur(18px);
}

.model-header-inner,
.cases-header-inner,
.downloads-header-inner,
.updates-header-inner,
.versions-header-inner,
.help-header-inner {
    min-height: 72px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.model-brand,
.cases-brand,
.downloads-brand,
.updates-brand,
.versions-brand,
.help-brand {
    color: var(--uf-ink);
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.model-nav,
.cases-nav,
.downloads-nav,
.updates-nav,
.versions-nav,
.help-nav {
    justify-self: center;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid #e9eef6;
    border-radius: var(--uf-radius);
    background: #f8fafc;
    scrollbar-width: none;
}

.model-nav::-webkit-scrollbar,
.cases-nav::-webkit-scrollbar,
.downloads-nav::-webkit-scrollbar,
.updates-nav::-webkit-scrollbar,
.versions-nav::-webkit-scrollbar,
.help-nav::-webkit-scrollbar {
    display: none;
}

.model-nav a,
.cases-nav a,
.downloads-nav a,
.updates-nav a,
.versions-nav a,
.help-nav a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 6px;
    color: #4b5c73;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.model-nav a:hover,
.cases-nav a:hover,
.downloads-nav a:hover,
.updates-nav a:hover,
.versions-nav a:hover,
.help-nav a:hover,
.model-nav a.active,
.cases-nav a.active,
.downloads-nav a.active,
.updates-nav a.active,
.versions-nav a.active,
.help-nav a.active {
    background: #fff;
    color: var(--uf-primary);
    box-shadow: var(--uf-shadow-soft);
}

.model-header-actions,
.cases-header-actions,
.downloads-header-actions,
.updates-header-actions,
.versions-header-actions,
.help-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    white-space: nowrap;
}

.primary-btn,
.ghost-btn,
.small-btn,
.model-search-form button,
.template-filter-bar button,
.template-filter-bar a,
.device-switch a,
.preview-link,
.build-link,
.theme-id {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.primary-btn,
.model-search-form button,
.template-filter-bar button {
    border: 1px solid var(--uf-primary);
    background: var(--uf-primary);
    color: #fff;
    box-shadow: 0 12px 26px rgba(20, 86, 200, 0.22);
}

.primary-btn:hover,
.model-search-form button:hover,
.template-filter-bar button:hover {
    background: var(--uf-primary-dark);
    border-color: var(--uf-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.ghost-btn,
.template-filter-bar a,
.preview-link,
.build-link,
.theme-id {
    border: 1px solid var(--uf-line);
    background: #fff;
    color: var(--uf-primary);
}

.ghost-btn:hover,
.template-filter-bar a:hover,
.preview-link:hover,
.build-link:hover,
.theme-id:hover {
    border-color: rgba(20, 86, 200, 0.34);
    box-shadow: var(--uf-shadow-soft);
    transform: translateY(-1px);
}

.ghost-light {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.ghost-light:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.small-btn {
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
}

.model-hero,
.cases-hero,
.downloads-hero,
.updates-hero,
.versions-hero,
.help-hero {
    padding: 38px 0 28px;
}

.model-search-box,
.cases-hero-shell,
.downloads-hero-shell,
.updates-banner,
.versions-banner,
.help-banner {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: center;
    gap: 34px;
    padding: clamp(34px, 5vw, 58px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(16, 27, 49, 0.96), rgba(14, 45, 92, 0.95) 48%, rgba(15, 94, 116, 0.90)),
        #101b31;
    box-shadow: 0 26px 60px rgba(16, 27, 49, 0.24);
    color: #fff;
}

.model-search-box:before,
.cases-hero-shell:before,
.downloads-hero-shell:before,
.updates-banner:before,
.versions-banner:before,
.help-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.24), rgba(0,0,0,.06));
}

.model-search-copy,
.cases-hero-copy,
.downloads-hero-copy,
.updates-copy,
.versions-copy,
.help-copy,
.model-search-form,
.cases-hero-side,
.downloads-hero-side,
.hero-stats {
    position: relative;
    z-index: 1;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #dbeafe;
    font-size: 13px;
    font-weight: 900;
}

.model-search-copy h1,
.cases-hero-copy h1,
.downloads-hero-copy h1,
.updates-copy h1,
.versions-copy h1,
.help-copy h1 {
    margin: 18px 0 14px;
    color: #fff;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: pretty;
}

.model-search-copy p,
.cases-hero-copy p,
.downloads-hero-copy p,
.updates-copy p,
.versions-copy p,
.help-copy p {
    max-width: 660px;
    margin: 0;
    color: rgba(239, 246, 255, 0.82);
    font-size: 17px;
    line-height: 1.86;
    text-wrap: pretty;
}

.model-search-form,
.help-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-self: center;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
}

.model-search-form input,
.help-search-form input,
.template-filter-bar input,
.template-filter-bar select {
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--uf-line);
    border-radius: 6px;
    background: #fff;
    color: var(--uf-ink);
    outline: none;
    padding: 0 13px;
}

.model-search-form input,
.help-search-form input {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.94);
}

.hero-stat-panel,
.hero-note-card,
.release-card,
.hero-stats {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
}

.hero-stat-panel,
.release-card,
.hero-stats {
    padding: 22px;
}

.hero-note-card {
    margin-top: 14px;
    padding: 18px;
}

.hero-stat-grid,
.release-card-grid,
.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hero-stat,
.hero-stat-grid article,
.release-card-grid article {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
}

.hero-stat span,
.hero-stat-grid span,
.release-card-grid span,
.hero-note-card span {
    color: rgba(226, 232, 240, 0.78);
    font-size: 13px;
}

.hero-stat strong,
.hero-stat-grid strong,
.release-card-grid strong,
.hero-note-card strong,
.release-card-head strong,
.hero-stat-head strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 24px;
    line-height: 1.25;
}

.template-filter-bar,
.cases-filter-bar,
.downloads-actions-section,
.updates-overview,
.help-overview-section,
.audience-section {
    margin-top: 24px;
}

.template-filter-bar,
.cases-filter-bar,
.quick-action-grid,
.help-layout,
.trust-layout {
    border-radius: 8px;
}

.template-filter-bar,
.cases-filter-bar {
    display: grid;
    align-items: end;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--uf-line);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--uf-shadow-soft);
}

.template-filter-bar {
    grid-template-columns: 1.4fr repeat(3, minmax(150px, .8fr)) auto auto;
}

.template-filter-bar label {
    display: grid;
    gap: 8px;
    color: var(--uf-muted);
    font-size: 13px;
    font-weight: 800;
}

.cases-filter-bar {
    grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr);
    align-items: center;
}

.device-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.device-switch a {
    min-height: 58px;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--uf-line);
    background: #fff;
    color: var(--uf-ink);
}

.device-switch a.active {
    border-color: rgba(20, 86, 200, .38);
    background: #edf5ff;
    color: var(--uf-primary);
}

.category-cloud,
.keyword-cloud,
.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-cloud a,
.keyword-cloud a,
.quick-links a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--uf-line);
    border-radius: 999px;
    background: #fff;
    color: var(--uf-muted);
    font-weight: 800;
    text-decoration: none;
}

.category-cloud a.active,
.category-cloud a:hover,
.keyword-cloud a:hover,
.quick-links a:hover {
    border-color: rgba(20, 86, 200, .35);
    background: #edf5ff;
    color: var(--uf-primary);
}

.section-head,
.section-title {
    margin: 0 0 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.section-head h2,
.section-title h2,
.filter-copy h2 {
    margin: 0;
    color: var(--uf-ink);
    font-size: clamp(24px, 2.7vw, 34px);
    line-height: 1.18;
    letter-spacing: 0;
}

.section-head p,
.section-title p,
.filter-copy p {
    margin: 8px 0 0;
    color: var(--uf-muted);
    line-height: 1.72;
}

.template-section,
.cases-featured-section,
.cases-grid-section,
.cases-strength-section,
.downloads-resources-section,
.downloads-ops-section,
.downloads-service-section,
.package-section,
.updates-detail,
.timeline-section,
.plans-section,
.service-section,
.compare-section,
.trust-section,
.purchase-flow-section,
.related-section,
.keyword-section,
.advantage-section,
.template-decision-section {
    margin-top: 46px;
}

.template-grid,
.case-grid,
.download-grid,
.service-grid,
.strength-grid,
.audience-grid,
.plans-grid,
.timeline-grid,
.help-overview-grid,
.related-grid,
.purchase-flow-grid,
.advantage-grid,
.template-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.quick-action-grid,
.overview-grid,
.downloads-ops-grid,
.trust-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

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

.template-card,
.case-card,
.download-card,
.quick-action-card,
.service-card,
.strength-card,
.overview-card,
.timeline-card,
.plan-card,
.audience-card,
.trust-card,
.purchase-flow-card,
.help-overview-card,
.related-card,
.article-card,
.sidebar-card,
.detail-panel,
.featured-case,
.deploy-checklist-card,
.ops-summary-card,
.package-item,
.template-empty-card,
.template-decision-card,
.advantage-card,
.compare-table {
    border: 1px solid var(--uf-line);
    border-radius: 8px;
    background: var(--uf-surface);
    box-shadow: var(--uf-shadow-soft);
}

.template-card,
.case-card,
.download-card,
.quick-action-card,
.service-card,
.strength-card,
.overview-card,
.timeline-card,
.plan-card,
.audience-card,
.trust-card,
.purchase-flow-card,
.help-overview-card,
.related-card,
.package-item,
.template-decision-card,
.advantage-card {
    overflow: hidden;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.template-card:hover,
.case-card:hover,
.download-card:hover,
.quick-action-card:hover,
.service-card:hover,
.strength-card:hover,
.overview-card:hover,
.timeline-card:hover,
.plan-card:hover,
.audience-card:hover,
.trust-card:hover,
.purchase-flow-card:hover,
.help-overview-card:hover,
.related-card:hover,
.package-item:hover,
.template-decision-card:hover,
.advantage-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 86, 200, .30);
    box-shadow: var(--uf-shadow);
}

.template-thumb,
.case-card-visual,
.featured-visual,
.download-thumb,
.article-cover {
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background:
        linear-gradient(135deg, #eaf1fb, #f8fafc);
}

.template-thumb {
    aspect-ratio: 4 / 3;
}

.template-thumb img,
.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.template-card:hover .template-thumb img,
.article-card:hover .article-cover img {
    transform: scale(1.035);
}

.template-overlay {
    background: linear-gradient(180deg, transparent, rgba(16, 27, 49, .72));
}

.template-info,
.case-card-body,
.download-body,
.quick-action-card,
.service-card,
.strength-card,
.overview-card,
.timeline-card,
.audience-card,
.trust-card,
.purchase-flow-card,
.help-overview-card,
.related-card,
.template-decision-card,
.advantage-card,
.package-item {
    padding: 20px;
}

.template-info h3,
.case-card h3,
.download-body h3,
.quick-action-card h3,
.service-card h3,
.strength-card h3,
.overview-card h3,
.timeline-card h3,
.plan-card h3,
.audience-card h3,
.trust-card h3,
.purchase-flow-card h3,
.help-overview-card h3,
.related-card h3,
.template-decision-card h3,
.advantage-card h3 {
    margin-top: 0;
    color: var(--uf-ink);
    letter-spacing: 0;
}

.template-tags span,
.template-quick-meta span,
.download-meta span,
.download-points li,
.download-facts li,
.device-pill,
.card-label,
.article-tag,
.related-kicker,
.plan-badge {
    border-radius: 999px;
    background: #edf5ff;
    color: var(--uf-primary);
    font-weight: 800;
}

.template-tags,
.template-quick-meta,
.download-meta,
.download-points,
.download-facts,
.download-actions,
.featured-actions,
.case-actions,
.overview-actions,
.timeline-footer,
.plan-actions,
.bottom-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.download-grid {
    align-items: stretch;
}

.download-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
}

.download-thumb {
    height: 176px;
    min-height: 176px;
    aspect-ratio: 16 / 9;
}

.download-window,
.case-window {
    height: 100%;
    min-height: 150px;
    margin: 14px;
    border: 1px solid rgba(20, 86, 200, .15);
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.download-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-body p {
    margin: 0;
    color: var(--uf-muted);
    line-height: 1.72;
}

.download-points,
.download-facts,
.featured-points,
.plan-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-points li,
.download-facts li {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
}

.download-facts {
    display: grid;
    gap: 8px;
}

.download-facts li {
    justify-content: space-between;
    border-radius: 6px;
    background: #f8fafc;
    color: var(--uf-muted);
}

.download-facts strong {
    color: var(--uf-ink);
}

.download-actions {
    margin-top: auto;
    padding-top: 18px;
}

body.downloads-page .download-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

body.downloads-page .download-card {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.downloads-page .download-thumb {
    width: 100%;
    padding: 14px;
    height: 176px;
    min-height: 176px;
    border-right: 0;
    border-bottom: 1px solid var(--uf-line);
}

body.downloads-page .download-window {
    width: 100%;
    min-height: 146px;
    height: 146px;
    margin: 0;
    border-radius: 8px;
}

body.downloads-page .download-body {
    width: 100%;
    min-width: 0;
    padding: 20px;
    gap: 12px;
}

body.downloads-page .download-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.downloads-page .download-body h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.36;
}

body.downloads-page .download-points,
body.downloads-page .download-facts {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.downloads-page .download-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.downloads-page .download-points li,
body.downloads-page .download-facts li {
    position: static;
    padding: 0 10px;
    line-height: 1.4;
}

body.downloads-page .download-points li:before,
body.downloads-page .download-facts li:before {
    display: none;
}

body.downloads-page .download-facts {
    display: grid;
    gap: 8px;
}

body.downloads-page .download-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

body.downloads-page .download-actions .small-btn {
    width: auto;
    flex: 1 1 110px;
    min-width: 0;
    padding: 0 10px;
}

.featured-case {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 24px;
    align-items: center;
    padding: 20px;
}

.featured-content {
    padding: 10px 8px;
}

.plan-card {
    position: relative;
    padding: 24px;
}

.plan-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--uf-primary), var(--uf-teal));
}

.plan-price strong,
.plan-price em {
    color: var(--uf-primary);
}

.compare-table {
    overflow: hidden;
}

.compare-row {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--uf-line);
}

.compare-row:first-child {
    border-top: 0;
}

.compare-row > div {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-left: 1px solid var(--uf-line);
}

.compare-row > div:first-child {
    border-left: 0;
}

.compare-head {
    background: #f8fafc;
    color: var(--uf-ink);
    font-weight: 900;
}

.help-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 34px;
}

.help-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}

.sidebar-card,
.article-card,
.detail-panel {
    padding: 22px;
}

.help-doc-list {
    display: grid;
    gap: 8px;
}

.help-doc-item {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--uf-line);
    border-radius: 8px;
    background: #fff;
    color: var(--uf-ink);
    text-decoration: none;
}

.help-doc-item.active,
.help-doc-item:hover {
    border-color: rgba(20, 86, 200, .36);
    background: #edf5ff;
    color: var(--uf-primary);
}

.article-prose,
.detail-body {
    color: #334155;
    font-size: 16px;
    line-height: 1.9;
}

.article-prose img,
.detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.bottom-cta-copy,
.cases-bottom-cta,
.downloads-bottom-cta,
.trust-layout {
    border-radius: 8px;
}

.cases-bottom-cta,
.downloads-bottom-cta,
.trust-layout {
    margin-top: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 30px;
    border: 1px solid var(--uf-line);
    background:
        linear-gradient(135deg, #ffffff, #f4f8fe);
    box-shadow: var(--uf-shadow-soft);
}

.model-footer,
.cases-footer,
.downloads-footer,
.updates-footer,
.versions-footer,
.help-footer {
    margin-top: 58px;
    padding: 42px 0 0;
    background: #101b31;
    color: #d6e0ee;
}

.model-footer a,
.cases-footer a,
.downloads-footer a,
.updates-footer a,
.versions-footer a,
.help-footer a {
    color: #e7f0fb;
}

.footer-copy {
    margin-top: 22px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    color: #9fb0c7;
}

.reveal,
.reveal-card,
.reveal-delay-1 {
    animation: ufFadeUp .54s ease both;
}

.reveal-delay-1 {
    animation-delay: .06s;
}

@keyframes ufFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1180px) {
    .model-header-inner,
    .cases-header-inner,
    .downloads-header-inner,
    .updates-header-inner,
    .versions-header-inner,
    .help-header-inner {
        grid-template-columns: 1fr;
        padding: 14px 0;
    }

    .model-nav,
    .cases-nav,
    .downloads-nav,
    .updates-nav,
    .versions-nav,
    .help-nav {
        justify-self: stretch;
    }

    .model-header-actions,
    .cases-header-actions,
    .downloads-header-actions,
    .updates-header-actions,
    .versions-header-actions,
    .help-header-actions {
        justify-content: flex-start;
    }

    .model-search-box,
    .cases-hero-shell,
    .downloads-hero-shell,
    .updates-banner,
    .versions-banner,
    .help-banner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .template-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .template-grid,
    .case-grid,
    .download-grid,
    .service-grid,
    .strength-grid,
    .audience-grid,
    .plans-grid,
    .timeline-grid,
    .help-overview-grid,
    .related-grid,
    .purchase-flow-grid,
    .advantage-grid,
    .template-decision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 820px) {
    body.model-page .page-wrap,
    body.cases-page .page-wrap,
    body.downloads-page .page-wrap,
    body.updates-page .page-wrap,
    body.versions-page .page-wrap,
    body.help-page .page-wrap {
        width: min(100% - 24px, 1240px);
    }

    .model-topbar-inner,
    .cases-topbar-inner,
    .downloads-topbar-inner,
    .updates-topbar-inner,
    .versions-topbar-inner,
    .help-topbar-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 0;
    }

    .model-topbar-notice,
    .cases-topbar-notice,
    .downloads-topbar-notice,
    .updates-topbar-notice,
    .versions-topbar-notice,
    .help-topbar-notice {
        max-width: 100%;
    }

    .model-hero,
    .cases-hero,
    .downloads-hero,
    .updates-hero,
    .versions-hero,
    .help-hero {
        padding-top: 22px;
    }

    .model-search-box,
    .cases-hero-shell,
    .downloads-hero-shell,
    .updates-banner,
    .versions-banner,
    .help-banner {
        padding: 28px 18px;
    }

    .model-search-form,
    .help-search-form,
    .template-filter-bar,
    .cases-filter-bar,
    .device-switch,
    .featured-case,
    .help-layout,
    .cases-bottom-cta,
    .downloads-bottom-cta,
    .trust-layout,
    .compare-row {
        grid-template-columns: 1fr;
    }

    .template-grid,
    .case-grid,
    .download-grid,
    .service-grid,
    .strength-grid,
    .audience-grid,
    .plans-grid,
    .timeline-grid,
    .help-overview-grid,
    .related-grid,
    .purchase-flow-grid,
    .advantage-grid,
    .template-decision-grid,
    .quick-action-grid,
    .overview-grid,
    .downloads-ops-grid,
    .trust-cards,
    .hero-stat-grid,
    .release-card-grid,
    .hero-stats {
        grid-template-columns: 1fr;
    }

    .help-sidebar {
        position: static;
    }

    .section-head,
    .section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .compare-row > div {
        border-left: 0;
        border-top: 1px solid var(--uf-line);
    }

    .compare-row > div:first-child {
        border-top: 0;
    }
}