.lan-ssr-page {
    --lan-red: #c30d23;
    --lan-wine: #8a0a18;
    --lan-ink: #171b24;
    --lan-gray-900: #252a34;
    --lan-gray-700: #626a78;
    --lan-gray: #7f8590;
    --lan-line: #e7e9ed;
    --lan-line-strong: #dde0e5;
    --lan-bg: #f6f7f9;
    --lan-white: #fff;
    --lan-pale-red: #fff1f3;
    --lan-shadow: 0 18px 55px rgba(26, 31, 43, .08);
    background: var(--lan-white);
    color: var(--lan-ink);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    position: relative;
}

.lan-ssr-page *,
.lan-ssr-page *::before,
.lan-ssr-page *::after {
    box-sizing: border-box;
}

.lan-ssr-page [hidden] {
    display: none !important;
}

.lan-ssr-page img {
    display: block;
    max-width: 100%;
}

.lan-ssr-page a {
    color: inherit;
    text-decoration: none;
}

.lan-ssr-page button,
.lan-ssr-page input,
.lan-ssr-page select,
.lan-ssr-page textarea {
    color: inherit;
    font: inherit;
}

.lan-ssr-page button,
.lan-ssr-page summary {
    cursor: pointer;
}

.lan-ssr-page h1,
.lan-ssr-page h2,
.lan-ssr-page h3,
.lan-ssr-page p {
    margin-top: 0;
}

.lan-ssr-page h1,
.lan-ssr-page h2,
.lan-ssr-page h3 {
    color: var(--lan-ink);
    line-height: 1.2;
}

.lan-ssr-page h1 {
    font-size: clamp(38px, 3.7vw, 52px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.08;
    margin-bottom: 16px;
}

.lan-ssr-page h2 {
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.2;
    margin-bottom: 0;
}

.lan-ssr-page h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.lan-ssr-page :focus-visible {
    outline: none;
}

.lan-container {
    margin: 0 auto;
    width: min(1200px, calc(100% - 48px));
}

.lan-breadcrumb {
    align-items: center;
    background: var(--lan-white);
    color: var(--lan-gray-700);
    display: flex;
    font-size: 12px;
    gap: 9px;
    min-height: 46px;
}

.lan-breadcrumb a:hover {
    color: var(--lan-red);
}

.lan-hero {
    background: #eceeef;
    min-height: clamp(420px, 29vw, 525px);
    overflow: hidden;
    position: relative;
}

.lan-hero-banner {
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: 58% center;
    position: absolute;
    width: 100%;
}

.lan-hero-grid {
    align-items: center;
    display: flex;
    min-height: inherit;
    position: relative;
    z-index: 2;
}

.lan-hero-panel {
    align-items: stretch;
    backdrop-filter: blur(16px) saturate(.9);
    background: rgba(247, 249, 250, .68);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 2px;
    box-shadow: 12px 12px 28px rgba(17, 24, 39, .16), -8px -8px 22px rgba(255, 255, 255, .52), inset 1px 1px rgba(255, 255, 255, .88);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
    padding: 28px 34px 30px;
    width: min(600px, 100%);
}

.lan-eyebrow {
    align-items: center;
    color: var(--lan-red);
    display: flex;
    font-size: 12px;
    font-weight: 750;
    gap: 10px;
    letter-spacing: .14em;
    line-height: 1.4;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.lan-eyebrow::before {
    background: currentColor;
    content: "";
    flex: 0 0 24px;
    height: 2px;
    width: 24px;
}

.lan-hero-lead {
    color: var(--lan-gray-700);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 22px;
    max-width: 100%;
    width: 100%;
    text-align: justify;
    text-align-last: left;
}

.lan-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lan-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 2px;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 44px;
    padding: 10px 20px;
    transition: transform .16s, background-color .16s, border-color .16s;
}

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

.lan-button-primary {
    background: var(--lan-red);
    border-color: var(--lan-red);
    color: var(--lan-white) !important;
}

.lan-button-primary:hover {
    background: var(--lan-wine);
    border-color: var(--lan-wine);
}

.lan-button-secondary {
    background: rgba(255, 255, 255, .78);
    border-color: transparent;
    box-shadow: 4px 4px 10px rgba(17, 24, 39, .12), -3px -3px 9px rgba(255, 255, 255, .76);
    color: var(--lan-ink) !important;
}

.lan-hero-video {
    align-items: center;
    background: rgba(23, 27, 36, .94);
    border: 1px solid rgba(255, 255, 255, .16);
    bottom: 28px;
    color: var(--lan-white);
    display: flex;
    gap: 12px;
    min-width: 248px;
    padding: 10px 14px 10px 10px;
    position: absolute;
    right: max(24px, calc((100% - 1200px) / 2));
    text-align: left;
    z-index: 3;
}

.lan-hero-video-play {
    align-items: center;
    background: var(--lan-red);
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.lan-hero-video strong,
.lan-hero-video small {
    display: block;
}

.lan-hero-video strong {
    font-size: 12px;
}

.lan-hero-video small {
    color: #aeb3bd;
    font-size: 10px;
    margin-top: 2px;
}

.lan-anchor-strip {
    background: var(--lan-white);
    border-bottom: 1px solid var(--lan-line);
}

.lan-anchor-inner {
    display: flex;
    min-height: 52px;
    overflow-x: auto;
}

.lan-anchor-inner a {
    align-items: center;
    border-right: 1px solid var(--lan-line);
    color: var(--lan-gray-700);
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: 8px;
    min-width: max-content;
    padding: 0 24px;
}

.lan-anchor-inner a:first-child {
    border-left: 1px solid var(--lan-line);
}

.lan-anchor-inner a:hover {
    background: var(--lan-bg);
    color: var(--lan-red);
}

.lan-anchor-inner a span,
.lan-page-rail a span {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 10px;
}

.lan-page-rail,
.lan-page-rail-open {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    box-shadow: var(--lan-shadow);
    left: 16px;
    position: fixed;
    top: 35%;
    z-index: 380;
}

.lan-page-rail {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 210px;
}

.lan-page-rail a {
    align-items: center;
    color: var(--lan-gray-700);
    display: grid;
    font-size: 16px;
    grid-template-columns: 32px 1fr;
    min-height: 52.48px;
    padding: 9px 10px;
}

.lan-page-rail a:hover {
    background: var(--lan-bg);
    color: var(--lan-red);
}

.lan-page-rail button,
.lan-page-rail-open {
    background: var(--lan-white);
    border: 0;
    color: var(--lan-gray-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    min-height: 44px;
    padding: 0 10px;
}

.lan-page-rail button {
    text-align: left;
}

.lan-page-rail-open {
    writing-mode: vertical-rl;
}

.lan-section {
    padding: 80px 0;
}

.lan-section-heading {
    align-items: flex-end;
    display: flex;
    gap: 56px;
    justify-content: space-between;
    margin-bottom: 36px;
}

.lan-section-heading > div {
    max-width: 700px;
}

.lan-section-heading > p {
    color: var(--lan-gray-700);
    line-height: 1.8;
    margin: 16px 0 0;
    max-width: 470px;
}

.lan-compact-heading {
    margin-bottom: 24px;
}

.lan-selector-section,
.lan-comparison-section,
.lan-download-section,
.lan-faq-section {
    background: var(--lan-bg);
}

.cn-selector-shell {
    background: transparent;
}

.cn-selector-topbar {
    align-items: flex-end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding-bottom: 20px;
}

.cn-part-search {
    flex: 1;
    max-width: 430px;
}

.cn-part-search > label,
.lan-download-search > label,
.lan-support-form > label,
.lan-form-row label {
    color: var(--lan-gray-700);
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 5px;
}

.lan-search-control {
    position: relative;
}

.lan-search-control input,
.lan-support-form input,
.lan-support-form textarea {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    border-left: 4px solid var(--lan-red);
    border-radius: 2px;
    min-height: 44px;
    padding: 9px 12px;
    width: 100%;
}

.lan-search-control input {
    font-size: 13px;
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    height: 42px;
    min-height: 42px;
    padding-right: 72px;
}

.lan-search-control button {
    background: transparent;
    border: 0;
    color: var(--lan-red);
    font-size: 11px;
    font-weight: 700;
    min-height: 36px;
    padding: 0 8px;
    position: absolute;
    right: 8px;
    top: 7px;
}

.cn-selector-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.cn-page-size {
    align-items: center;
    color: var(--lan-gray-700);
    display: flex;
    font-size: 12px;
    gap: 7px;
}

.cn-page-size select,
.cn-export {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    border-radius: 2px;
    height: 42px;
    min-height: 42px;
}

.lan-ssr-page .cn-page-size select {
    font-size: 12px;
    padding: 0 28px 0 9px;
}

.lan-ssr-page .cn-export {
    color: var(--lan-ink);
    font-size: 12px;
    font-weight: 650;
    padding: 0 14px;
}

.cn-export[aria-busy="true"] {
    cursor: wait;
    opacity: .6;
}

.cn-active-row {
    align-items: center;
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
    min-height: 48px;
    padding: 8px 12px;
}

.cn-active-row > span {
    color: var(--lan-gray-700);
    font-size: 12px;
    font-weight: 700;
}

.cn-active-row button {
    background: var(--lan-bg);
    border: 1px solid var(--lan-line-strong);
    border-radius: 2px;
    font-size: 11px;
    min-height: 32px;
    padding: 4px 9px;
}

.cn-active-row button:hover {
    border-color: var(--lan-red);
    color: var(--lan-red);
}

.cn-scroll-hint {
    border-left: 3px solid var(--lan-red);
    color: var(--lan-gray-700);
    font-size: 11px;
    margin: 0 0 10px;
    padding-left: 10px;
}

.cn-selector-table-wrap {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    max-height: none;
    overflow-x: auto;
    position: relative;
}

.cn-selector-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    min-width: var(--lan-selector-width, 1900px);
    table-layout: fixed;
    width: var(--lan-selector-width, 1900px);
}

.cn-selector-table th,
.cn-selector-table td {
    border-bottom: 1px solid var(--lan-line);
    border-right: 1px solid var(--lan-line);
    height: 58.8px;
    padding: 7px 12px;
    text-align: left;
    vertical-align: middle;
}

.cn-selector-table thead th {
    background: var(--lan-red);
    border-right-color: rgba(255, 255, 255, .24);
    color: var(--lan-white);
    font-size: 13px;
    font-weight: 750;
    height: 56px;
    padding: 5px 12px;
    position: sticky;
    top: 0;
    z-index: 8;
}

/* ── 选型表表头的断词与箭头间距（仅英文站）─────────────────────────────
 *
 * 两个现象同一个根因：
 *   ① 单词被从中间截断 —— Image 显示成 "Imag/e"、Compare 显示成 "Compar/e"。
 *   ② 文字与排序箭头的间距不一致 —— 短表头（Ports）12px，换行的表头 44/57/75/48px。
 *
 * 成因：表头是 .cn-sort-button{display:flex;gap:12px} 里放 .cn-sort-label + .cn-sort-icon。
 * flex 把 label 压缩到比它单行文字宽度还窄一点（实测 Data Rate 只差 1px、
 * Mounting Method 差 8px、Operating Temperature 差 6px），于是被迫换行；
 * 换行后 label 盒子仍比它最长那行宽，而 12px 的 gap 是从**盒子边缘**量的，
 * 空白就留在了盒子里面，看起来间距特别大。
 *
 * 修法：overflow-wrap:normal 保住整词；width:min-content 把盒子收到最长行，
 * 于是 gap 从文字边缘起算，各表头一致。
 *
 * ⚠⚠ 为什么必须限定 html[lang="en"]，绝对不能全局套用（2026-09-21 五语言实测）：
 *   中文 / 日文：min-content 对 CJK 等于**单个字符宽度**，表头会变成一行一个字 ——
 *     实测「数据速率」变 4 行、「データレート」变 6 行、「Vt（V RMS）」变 8 行。灾难。
 *     而且这两个语言**本来就是好的**：日文 0 换行、间距全 12px；
 *     中文仅 Vt (V RMS) 一处 48px。不该为一处冒这个风险。
 *   德文：Vergleichen 是长单词，现在正是靠断词才塞进列里；
 *     禁止断词后会**溢出**单元格。收窄 padding/gap 到 6px 仍然溢出 —— 德文列宽真的不够。
 *   法文：Température de fonctionnement 同类问题。
 *   德/法的正解是缩短本地化文案（列宽放不下就换词），不是 CSS 收缩盒子，故本次不动。
 *
 * 作用域为何这样写：
 *   - 正向用 html[lang="en"]，不用「排除法」。data-selector-locale 只在受管语言
 *     （fr/de/ja）才输出（selector_lan_ssr.html:151），用 :not([data-selector-locale])
 *     框英文的话，将来新增一个未纳管语言会误落进来 —— 若它是 CJK 就是上面那个灾难。
 *     正向限定则失败即保持现状。
 *   - 再叠一道 :not(.lan-ssr-page-cn) 作为冗余护栏（该类由
 *     selector_lan_ssr.html:148 的 $lanIsChinese 输出）。
 *   实测命中：英文页 28 个 th / 9 个 label；德文页 0；中文页 0（两道护栏均生效）。
 *
 * 英文站实测效果：断词 2 处 → 0；9 个间距全部精确 12px；th 无溢出；
 *   表格滚动宽度 2049px 不变；表头高度 56px 不变；375px 窄屏无整页横向溢出。
 *   代价：Part number 新增换行为两行 —— 是在空格处换行，与其余多词表头一致。
 * ──────────────────────────────────────────────────────────────── */
html[lang="en"] .lan-ssr-page:not(.lan-ssr-page-cn) .cn-selector-table thead th,
html[lang="en"] .lan-ssr-page:not(.lan-ssr-page-cn) .cn-selector-table thead th .cn-sort-label {
    overflow-wrap: normal;
}

/* ⚠ 只作用于 .cn-header-filter 内的**分组规格列**，不要放宽到所有 .cn-sort-label。
 *   模板结构（selector_lan_ssr.html）：
 *     :264-268  Part number —— .cn-sort-button 直接放在 th.cn-sticky-part 里，无 .cn-header-filter
 *     :272-296  分组规格列 —— .cn-sort-button 包在 .cn-header-filter 里（旁边还有筛选按钮）
 *   间距过大只发生在分组列：.cn-header-filter 是 grid minmax(0,1fr) 20px，
 *   筛选按钮占掉 20px 后 label 被压到单行宽度以下才换行。
 *   Part number 那列有 70px 富余（内容区 184px，按钮 max-content 约 114px），
 *   对它加 min-content 会把一个本来好好的单行表头逼成两行 —— 实测确认，故排除。
 *
 *   另：Image / Datasheet / Compare / Downloads 是纯 th（:263、:269-271），
 *   根本没有 .cn-sort-label，本规则对它们无效；它们的断词由上面那条
 *   overflow-wrap:normal 解决。但实测它们的文字仍超出内容区
 *   （Image 42px vs 40px、Compare 62px vs 56px），只是被 12px padding 吸收了。
 *   根因是 ProductSelectorTableLayout.php:13 把前五列宽度写死为
 *   [66,210,104,82,142] 且不看语言（第 21 行的分组列反而是按标签自动算宽的）。
 *   那是独立的一处 PHP 改动，不在本次范围内。 */
html[lang="en"] .lan-ssr-page:not(.lan-ssr-page-cn) .cn-selector-table thead th .cn-header-filter .cn-sort-label {
    width: min-content;
}

.cn-selector-table tbody tr:nth-child(even) td {
    background: #f2f3f5;
}

.cn-selector-table tbody tr:hover td {
    background: var(--lan-pale-red);
}

.cn-selector-table th:nth-child(3),
.cn-selector-table td:nth-child(3) {
    text-align: center;
}

.cn-selector-table th:nth-child(4),
.cn-selector-table td:nth-child(4) {
    text-align: center;
}

.cn-sticky-image,
.cn-sticky-part {
    position: sticky !important;
}

.cn-sticky-image {
    left: 0;
    z-index: 10 !important;
}

.cn-sticky-part {
    left: 66px;
    z-index: 9 !important;
}

.cn-selector-table tbody .cn-sticky-image,
.cn-selector-table tbody .cn-sticky-part {
    background: var(--lan-white);
}

.cn-selector-table tbody tr:nth-child(even) .cn-sticky-image,
.cn-selector-table tbody tr:nth-child(even) .cn-sticky-part {
    background: #f2f3f5;
}

.cn-selector-table tbody tr:hover .cn-sticky-image,
.cn-selector-table tbody tr:hover .cn-sticky-part {
    background: var(--lan-pale-red);
}

.cn-selector-table td img {
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.cn-image-empty,
.cn-resource-empty {
    color: var(--lan-gray);
}

.lan-sku-link {
    color: var(--lan-red) !important;
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 12px;
    font-weight: 750;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cn-spec-link {
    align-items: center;
    border: 1px solid var(--lan-red);
    box-sizing: border-box;
    color: var(--lan-red) !important;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    min-width: 66px;
    padding: 0 9px;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cn-compare-toggle {
    align-items: center;
    border: 1px solid var(--lan-line-strong);
    box-sizing: border-box;
    color: var(--lan-red);
    cursor: pointer;
    display: inline-grid;
    height: 36px;
    justify-content: center;
    position: relative;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    width: 44px;
}

.cn-compare-toggle input {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
}

.cn-compare-toggle:has(input:checked) {
    background: var(--lan-red);
    border-color: var(--lan-red);
    color: var(--lan-white);
}

.lan-sr-only {
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.cn-file-links {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.cn-file-links a {
    align-items: center;
    border: 1px solid var(--lan-line-strong);
    box-sizing: border-box;
    color: var(--lan-red) !important;
    display: flex;
    font-size: 10px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    padding: 4px 7px;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cn-spec-link:hover,
.cn-spec-link:focus-visible,
.cn-compare-toggle:hover,
.cn-file-links a:hover,
.cn-file-links a:focus-visible {
    background-color: var(--lan-red);
    border-color: var(--lan-red);
    color: var(--lan-white) !important;
}

.cn-sort-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    font-size: inherit;
    font-weight: inherit;
    gap: 8px;
    justify-content: flex-start;
    min-height: 38px;
    padding: 0;
    text-align: left;
}

.cn-sort-mark {
    font-size: 14px;
    opacity: .75;
}

.cn-sort-button[data-sort-state="asc"] .cn-sort-mark,
.cn-sort-button[data-sort-state="desc"] .cn-sort-mark {
    opacity: 1;
}

.cn-header-filter {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.cn-filter-menu {
    position: relative;
}

.cn-filter-trigger {
    align-items: center;
    display: flex;
    height: 34px;
    justify-content: center;
    list-style: none;
    width: 34px;
}

.cn-filter-trigger::-webkit-details-marker {
    display: none;
}

.cn-filter-trigger img {
    filter: brightness(0) invert(1);
}

.cn-filter-menu[open] .cn-filter-trigger,
.cn-filter-trigger:hover {
    background: rgba(255, 255, 255, .14);
}

.cn-filter-panel {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    box-shadow: 0 14px 34px rgba(23, 27, 36, .22);
    color: var(--lan-ink);
    left: 0;
    max-height: min(340px, 60vh);
    min-width: 250px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 14px;
    position: absolute;
    top: calc(100% + 10px);
    z-index: var(--lan-layer-filter-menu, 200);
}

.cn-filter-panel.is-floating {
    position: fixed;
    top: var(--filter-top);
    left: var(--filter-left);
    z-index: var(--lan-layer-filter-menu, 200);
}

.cn-filter-panel > strong {
    border-bottom: 1px solid var(--lan-line);
    display: block;
    margin-bottom: 9px;
    padding-bottom: 9px;
}

.cn-filter-panel label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 9px;
    min-height: 36px;
}

.cn-filter-panel input {
    accent-color: var(--lan-red);
    flex: 0 0 17px;
    height: 17px;
    width: 17px;
}

.cn-sample-cell {
    align-items: center;
    display: flex;
    gap: 5px;
}

.cn-sample-cell input {
    border: 1px solid var(--lan-line-strong);
    height: 32px;
    text-align: center;
    width: 42px;
}

.cn-sample-cell button {
    background: var(--lan-red);
    border: 1px solid var(--lan-red);
    color: var(--lan-white);
    font-size: 10px;
    font-weight: 700;
    height: 32px;
    padding: 0 8px;
}

.cn-selector-footer {
    align-items: center;
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    border-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    min-height: 66px;
    padding: 12px 16px;
}

.cn-result-count {
    color: var(--lan-gray-700);
    flex-shrink: 0;
    font-size: 12px;
}

.cn-result-count strong {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 18px;
}

.cn-pager,
.cn-pager label,
.cn-pager nav {
    align-items: center;
    display: flex;
    gap: 6px;
}

.cn-pager {
    color: var(--lan-gray-700);
    flex-wrap: wrap;
    font-size: 11px;
    justify-content: flex-end;
    min-width: 0;
}

.cn-pager nav {
    flex-wrap: wrap;
    max-width: 100%;
}

.cn-pager input {
    border: 1px solid var(--lan-line-strong);
    height: 34px;
    text-align: center;
    width: 46px;
}

.cn-pager nav a,
.cn-pager nav span {
    align-items: center;
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    display: inline-flex;
    flex-shrink: 0;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
}

.cn-pager nav a:hover,
.cn-pager nav a[aria-current="page"] {
    background: var(--lan-red);
    border-color: var(--lan-red);
    color: var(--lan-white);
}

.cn-pager nav span[aria-disabled="true"] {
    color: #b9bdc5;
}

.cn-pager nav .cn-page-ellipsis {
    background: transparent;
    border-color: transparent;
}

.lan-data-note {
    border-left: 3px solid var(--lan-red);
    color: var(--lan-gray-700);
    font-size: 11px;
    margin: 18px 0 0;
    padding-left: 12px;
}

.lan-no-results {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    margin-top: 16px;
    padding: 54px 24px;
    text-align: center;
}

.lan-no-results strong {
    display: block;
    font-size: 20px;
}

.lan-no-results p {
    color: var(--lan-gray-700);
}

.lan-no-results button {
    background: var(--lan-red);
    border: 0;
    color: var(--lan-white);
    min-height: 42px;
    padding: 8px 16px;
}

.lan-family-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, 1fr);
}

.lan-family-card {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    display: flex;
    flex-direction: column;
    min-height: 156px;
    padding: 22px 48px 22px 20px;
    position: relative;
    transition: background-color .16s, color .16s;
}

.lan-family-card:hover,
.lan-family-card.is-active {
    background: var(--lan-red);
    color: var(--lan-white);
}

.lan-family-card:hover > span,
.lan-family-card.is-active > span {
    color: var(--lan-white) !important;
}

.lan-family-index {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 12px;
    margin-bottom: 28px;
}

.lan-family-card strong {
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 4px;
}

.lan-family-card > span:nth-of-type(2) {
    color: var(--lan-gray);
    font-size: 12px;
}

.lan-family-arrow {
    bottom: 20px;
    color: var(--lan-red) !important;
    font-size: 22px !important;
    position: absolute;
    right: 20px;
}

.lan-selection-steps {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.lan-selection-steps li {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    display: flex;
    flex-direction: column;
    min-height: 247px;
    padding: 24px;
}

.lan-selection-steps li > span,
.lan-parameter-grid article > span {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 11px;
    margin-bottom: auto;
}

.lan-selection-steps li > span {
    font-size: 14px;
    line-height: 1.4;
}

.lan-selection-steps p,
.lan-parameter-grid p {
    color: var(--lan-gray-700);
    font-size: 13px;
    margin-bottom: 0;
}

.lan-selection-steps li > div {
    margin-bottom: auto;
}

.lan-parameter-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}

.lan-parameter-grid article {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    min-height: 194px;
    padding: 22px;
}

.lan-parameter-grid article > span {
    display: block;
    margin-bottom: 30px;
}

.lan-split-layout {
    align-items: start;
    display: grid;
    gap: 80px;
    grid-template-columns: minmax(240px, .5625fr) minmax(0, 1fr);
}

.lan-split-copy h2 {
    font-size: 24px;
    font-weight: 720;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin-bottom: 16px;
}

.lan-split-copy p {
    color: var(--lan-gray-700);
}

.lan-text-link,
.lan-family-table a,
.lan-engineering-grid article > a,
.lan-resource-actions a,
.lan-support-links a {
    color: var(--lan-red) !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.lan-family-table a {
    text-decoration: none !important;
}

.lan-comparison-section .lan-text-link,
.lan-engineering-grid article > a,
.lan-support-replacement-all {
    text-decoration: none !important;
    text-underline-offset: 3px;
}

.lan-comparison-section .lan-text-link:hover,
.lan-engineering-grid article > a:hover,
.lan-support-replacement-all:hover {
    text-decoration: underline !important;
}

.lan-family-table-wrap {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    overflow-x: auto;
}

.lan-family-table {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 920px;
    width: 100%;
}

.lan-family-table th,
.lan-family-table td {
    border-bottom: 1px solid var(--lan-line);
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
}

.lan-family-table thead th {
    background: var(--lan-bg);
    color: var(--lan-gray-900);
    font-size: 11px;
    text-transform: uppercase;
}

.lan-family-table tbody th {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
}

.lan-engineering-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
}

.lan-engineering-grid article {
    background: var(--lan-bg);
    border: 1px solid var(--lan-line-strong);
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 28px;
}

.lan-engineering-grid article > span {
    color: var(--lan-red);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
    margin-bottom: 46px;
    text-transform: uppercase;
}

.lan-engineering-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lan-engineering-grid li {
    background: #eceef1;
    margin-bottom: 6px;
    min-height: 44px;
    padding: 9px 12px 9px 28px;
    position: relative;
}

.lan-engineering-grid li::before {
    background: var(--lan-red);
    content: "";
    height: 6px;
    left: 11px;
    position: absolute;
    top: 17px;
    width: 6px;
}

.lan-engineering-grid article > p {
    color: var(--lan-gray-700);
}

.lan-engineering-grid article > a {
    margin-top: auto;
}

.lan-download-finder {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(300px, .515fr) minmax(0, 1fr);
}

.lan-download-search {
    background: var(--lan-bg);
    border-right: 1px solid var(--lan-line);
    padding: 28px;
}

.lan-download-search p {
    color: var(--lan-gray-700);
    font-size: 11px;
    margin-top: 14px;
}

.lan-ssr-page .lan-download-review-note {
    margin: 14px 0 0;
    text-align: center;
}

.lan-download-results {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.lan-download-results article {
    align-items: center;
    border: 1px solid var(--lan-line);
    display: grid;
    gap: 20px;
    grid-template-columns: .4fr .6fr;
    justify-content: space-between;
    min-height: 76px;
    padding: 14px 20px;
}

.lan-download-results .lan-sku-link {
    font-size: 13px;
}

.lan-download-results article > div:first-child > span {
    color: var(--lan-gray-700);
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.lan-resource-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lan-resource-actions a {
    font-size: 12px;
    transition: color .18s ease, text-decoration-color .18s ease;
}

.lan-resource-actions a:hover,
.lan-resource-actions a:focus-visible {
    color: var(--lan-wine) !important;
    text-decoration-color: var(--lan-wine) !important;
}

.lan-file-availability {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: 8px 0 0;
}

.lan-file-availability > div {
    align-items: baseline;
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    display: flex;
    gap: 14px;
    padding: 16px 20px;
}

.lan-file-availability dt {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.lan-file-availability dd {
    color: var(--lan-gray-700);
    font-size: 11px;
    margin: 0;
}

.lan-trust-grid {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: .9fr 1.1fr;
}

.lan-trust-grid > div:first-child > p:last-child {
    color: var(--lan-gray-700);
}

.lan-evidence-list {
    border: 1px solid var(--lan-line-strong);
}

.lan-evidence-list > div {
    align-items: center;
    border-bottom: 1px solid var(--lan-line);
    display: grid;
    gap: 12px;
    grid-template-columns: 38px 150px 1fr;
    min-height: 62px;
    padding: 10px 16px;
}

.lan-evidence-list > div:last-child {
    border-bottom: 0;
}

.lan-evidence-list span {
    color: var(--lan-red);
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 11px;
}

.lan-evidence-list p {
    color: var(--lan-gray-700);
    font-size: 11px;
    margin: 0;
}

.lan-faq-layout {
    display: grid;
    gap: 64px;
    grid-template-columns: .72fr 1.28fr;
}

.lan-faq-layout > div:first-child > p:not(.lan-eyebrow) {
    color: var(--lan-gray-700);
}

.lan-guide-links {
    display: grid;
    gap: 8px;
    margin-top: 30px;
}

.lan-guide-links a {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    font-weight: 650;
    padding: 14px 16px;
}

.lan-guide-links span {
    color: var(--lan-red);
    display: block;
    font-family: "Poppins", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 9px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.lan-faq-list {
    display: grid;
    gap: 8px;
}

.lan-faq-list details {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    padding: 0 18px;
}

.lan-faq-list summary {
    font-weight: 700;
    list-style: none;
    min-height: 58px;
    padding: 18px 28px 14px 0;
    position: relative;
}

.lan-faq-list summary::after {
    color: var(--lan-red);
    content: "+";
    position: absolute;
    right: 0;
}

.lan-faq-list details[open] summary::after {
    content: "−";
}

.lan-faq-list details p,
.lan-faq-list details > div {
    color: var(--lan-gray-700);
    padding: 0 0 18px;
}

.lan-support-section {
    background: var(--lan-white);
    padding: 86px 0;
}

.lan-support-grid {
    display: grid;
    gap: 72px;
    grid-template-columns: .82fr 1.18fr;
}

.lan-support-grid > div:first-child > p:not(.lan-eyebrow) {
    color: var(--lan-gray-700);
}

.lan-support-grid ol {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}

.lan-support-grid li {
    align-items: center;
    color: var(--lan-gray-700);
    display: flex;
    gap: 12px;
}

.lan-support-grid li span {
    align-items: center;
    border: 1px solid var(--lan-line-strong);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.lan-support-grid li.is-current {
    color: var(--lan-ink);
    font-weight: 700;
}

.lan-support-grid li.is-current span {
    background: var(--lan-red);
    border-color: var(--lan-red);
    color: var(--lan-white);
}

.lan-support-form {
    border: 1px solid var(--lan-line-strong);
    border-top: 4px solid var(--lan-red);
    box-shadow: var(--lan-shadow);
    padding: 26px;
}

.lan-form-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.lan-support-form input,
.lan-support-form textarea {
    border-left-width: 1px;
    margin-bottom: 14px;
}

#support-part {
    border-radius: 0;
}

.lan-support-form textarea {
    min-height: 116px;
    resize: vertical;
}

.lan-sample-check {
    align-items: center;
    display: flex !important;
    gap: 9px;
    margin: 0 0 14px !important;
}

.lan-sample-check input {
    accent-color: var(--lan-red);
    height: 18px;
    margin: 0;
    min-height: 0;
    width: 18px;
}

.lan-privacy-check a {
    color: var(--lan-red);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lan-support-honeypot {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.lan-support-form .lan-button[disabled] {
    cursor: wait;
    opacity: .68;
}

.lan-support-form > .lan-button {
    width: 100%;
}

.lan-form-note {
    color: var(--lan-gray-700);
    font-size: 10px;
    margin: 10px 0 0;
}

.lan-form-note.is-success {
    color: #16733f;
}

.lan-form-note.is-error {
    color: #b00020;
}

.lan-support-links {
    display: flex;
    font-size: 11px;
    gap: 14px;
    margin-top: 10px;
}

.lan-compare-bar {
    background: var(--lan-ink);
    border-top: 4px solid var(--lan-red);
    bottom: 0;
    box-shadow: 0 -16px 42px rgba(0, 0, 0, .2);
    color: var(--lan-white);
    left: 0;
    min-height: 78px;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 2147483010;
}

.lan-compare-bar-inner {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin: 0 auto;
    min-height: 74px;
    width: min(1240px, calc(100% - 64px));
}

.lan-compare-summary {
    min-width: 0;
}

.lan-compare-summary-line {
    align-items: baseline;
    display: flex;
    gap: 16px;
}

.lan-compare-kicker {
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#lan-compare-count {
    color: var(--lan-white);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.lan-compare-parts {
    align-items: center;
    color: rgba(255, 255, 255, .45);
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    gap: 7px;
    line-height: 1.4;
    margin-top: 5px;
}

.lan-compare-part {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
}

.lan-compare-part + .lan-compare-part::before {
    content: "·";
    margin-right: 7px;
}

.lan-compare-part:hover,
.lan-compare-part:focus-visible {
    color: var(--lan-white);
}

.lan-compare-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 22px;
}

.lan-compare-clear {
    background: transparent;
    border: 0;
    color: var(--lan-white);
    font-size: 16px;
    min-height: 44px;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lan-compare-open {
    background: var(--lan-red);
    border: 1px solid var(--lan-red);
    color: var(--lan-white);
    font-size: 16px;
    font-weight: 700;
    min-height: 44px;
    padding: 0 22px;
    transition: background-color .18s ease, border-color .18s ease;
}

.lan-compare-open:hover,
.lan-compare-open:focus-visible {
    background: var(--lan-wine);
    border-color: var(--lan-wine);
}

html:has(.lan-compare-dialog[open]) {
    overflow: hidden;
}

.lan-compare-dialog {
    background: var(--lan-white);
    border: 0;
    border-top: 5px solid var(--lan-red);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
    color: var(--lan-ink);
    max-height: 86vh;
    max-width: 1100px;
    overflow: hidden;
    padding: 0;
    width: calc(100% - 32px);
}

.lan-compare-dialog[open] {
    display: flex;
    flex-direction: column;
}

.lan-compare-dialog::backdrop {
    background: rgba(12, 14, 18, .64);
}

.lan-dialog-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--lan-line);
    display: flex;
    justify-content: space-between;
    padding: 27px 28px 22px;
}

.lan-dialog-title .lan-eyebrow {
    margin-bottom: 10px;
}

.lan-dialog-title .lan-eyebrow::before {
    width: 42px;
}

.lan-dialog-title h2 {
    font-size: 26px;
    letter-spacing: -.03em;
    margin: 0;
}

.lan-dialog-close {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    color: var(--lan-ink);
    font-size: 16px;
    font-weight: 600;
    min-height: 44px;
    padding: 0 14px;
}

.lan-dialog-close:hover {
    border-color: var(--lan-red);
    color: var(--lan-red);
}

.lan-dialog-body {
    overflow: auto;
    padding: 28px;
}

#lan-compare-table {
    overflow: auto;
}

#lan-compare-table table {
    border-collapse: collapse;
    min-width: 700px;
    table-layout: fixed;
    width: 100%;
}

#lan-compare-table th,
#lan-compare-table td {
    border: 1px solid var(--lan-line-strong);
    font-size: 12px;
    height: 52px;
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
}

#lan-compare-table thead th {
    background: var(--lan-bg);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

#lan-compare-table thead th:first-child,
#lan-compare-table tbody th {
    width: 160px;
}

#lan-compare-table tbody th {
    background: var(--lan-bg);
    font-weight: 700;
}

.lan-compare-sku {
    color: var(--lan-ink) !important;
    font-weight: 700;
    text-decoration: none !important;
}

.lan-compare-sku:hover,
.lan-compare-sku:focus-visible {
    color: var(--lan-red) !important;
}

.lan-compare-note {
    border-left: 2px solid var(--lan-red);
    color: var(--lan-gray-700);
    font-size: 11px;
    line-height: 1.5;
    margin: 20px 0 0;
    padding-left: 14px;
}

.lan-toast {
    background: var(--lan-ink);
    bottom: 88px;
    color: var(--lan-white);
    left: 50%;
    max-width: calc(100% - 30px);
    padding: 10px 16px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 600;
}

@media (max-width: 1100px) {
    .lan-page-rail {
        display: none;
    }

    .lan-page-rail.is-open {
        display: flex;
    }

    .lan-page-rail-open[hidden] {
        display: block !important;
    }
}

@media (max-width: 1100px) {
    .lan-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .lan-hero-grid {
        min-height: 0;
        order: 1;
    }

    .lan-hero-banner {
        flex: 0 0 230px;
        height: 230px;
        object-position: 70% center;
        order: 2;
        position: relative;
    }

    .lan-hero-panel {
        backdrop-filter: blur(10px);
        background: rgba(247, 249, 250, .94);
        margin: 24px 0;
    }

    .lan-hero-video {
        bottom: 24px;
        right: 24px;
    }

    .lan-family-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .lan-section,
    .lan-support-section {
        padding: 64px 0;
    }

    .lan-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .lan-selection-steps,
    .lan-parameter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lan-split-layout,
    .lan-trust-grid,
    .lan-faq-layout,
    .lan-support-grid {
        grid-template-columns: 1fr;
    }

    .lan-engineering-grid {
        grid-template-columns: 1fr;
    }

    .lan-engineering-grid article {
        min-height: 0;
    }

    .lan-engineering-grid article > span {
        margin-bottom: 24px;
    }

    .lan-download-finder {
        grid-template-columns: 1fr;
    }

    .lan-download-search {
        border-bottom: 1px solid var(--lan-line);
        border-right: 0;
    }

    .cn-selector-topbar,
    .cn-selector-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .cn-pager {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .lan-container {
        width: calc(100% - 30px);
    }

    .lan-ssr-page h1 {
        font-size: clamp(32px, 9.5vw, 38px);
    }

    .lan-ssr-page h2 {
        font-size: 25px;
    }

    .lan-hero-banner {
        flex-basis: 180px;
        height: 180px;
        object-position: 74% center;
    }

    .lan-hero-panel {
        margin: 18px 0 20px;
        padding: 26px 18px;
    }

    .lan-hero-actions {
        display: grid;
        width: 100%;
    }

    .lan-hero-video {
        bottom: 12px;
        min-width: 215px;
        right: 15px;
    }

    .lan-section,
    .lan-support-section {
        padding: 54px 0;
    }

    .lan-family-grid,
    .lan-selection-steps,
    .lan-parameter-grid,
    .lan-file-availability {
        grid-template-columns: 1fr;
    }

    .lan-family-card {
        min-height: 132px;
    }

    .lan-selection-steps li {
        min-height: 190px;
    }

    .cn-selector-actions {
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .cn-selector-actions .cn-export {
        width: 100%;
    }

    .lan-download-results article,
    .lan-evidence-list > div {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }

    .lan-form-row {
        grid-template-columns: 1fr;
    }

    .lan-support-links {
        align-items: stretch;
        flex-direction: column;
    }

    .lan-compare-bar-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px 0;
        width: calc(100% - 30px);
    }

    .lan-compare-actions {
        justify-content: space-between;
        width: 100%;
    }

    .lan-compare-open {
        flex: 1;
    }

    .lan-compare-dialog {
        max-height: 92vh;
        width: calc(100% - 20px);
    }

    .lan-dialog-head {
        gap: 16px;
        padding: 20px 18px 18px;
    }

    .lan-dialog-title h2 {
        font-size: 22px;
    }

    .lan-dialog-body {
        padding: 18px;
    }
}

/*
 * Reference-page parity layer.
 * The public VOOHU header remains unchanged; every selector-page surface uses
 * the exact Poppins font asset and geometry from the approved review page.
 */
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

html body:has(.lan-ssr-page),
html body:has(.lan-ssr-page) #page,
html body:has(.lan-ssr-page) #header,
html body:has(.lan-ssr-page) #menu {
    font-family: "Poppins", "Noto Sans SC", sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

html body:has(.lan-ssr-page) {
    --lan-layer-navigation: 400;
    --lan-layer-selector-header: 300;
    --lan-layer-filter-menu: 200;
    --lan-layer-result-footer: 100;
}

html body:has(.lan-ssr-page) #header {
    z-index: var(--lan-layer-navigation);
}

html body:has(.lan-ssr-page) :where(a, button, input, select, textarea, option, h1, h2, h3, h4, h5, h6, p, div, span, strong, small, dt, dd, th, td, label, summary, li):not(.iconfont):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not([class*="layui-icon"]):not([class*="material-icons"]),
html body:has(.lan-ssr-page) #menu .mm-listitem__text,
.lan-ssr-page,
.lan-ssr-page *:not(.iconfont):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not([class*="layui-icon"]):not([class*="material-icons"]) {
    font-family: "Poppins", "Noto Sans SC", sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.lan-container {
    width: min(1240px, calc(100% - 64px));
}

.lan-breadcrumb {
    border-bottom: 1px solid var(--lan-line);
    min-height: 46px;
}

.lan-breadcrumb ol {
    align-items: center;
    display: flex;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lan-breadcrumb li:not(:last-child)::after {
    color: var(--lan-gray);
    content: "/";
    margin-left: 9px;
}

.lan-hero-video {
    background: rgba(17, 20, 27, .88);
    border-color: rgba(255, 255, 255, .28);
    bottom: 28px;
    gap: 14px;
    min-height: 64px;
    min-width: 276px;
    padding: 10px 16px 10px 10px;
    right: max(32px, calc((100% - 1240px) / 2));
}

.lan-hero-video-play {
    flex: 0 0 44px;
    height: 44px;
    width: 44px;
}

.lan-hero-video strong {
    font-size: 13px;
}

.lan-hero-video small {
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
}

.lan-page-rail,
.lan-page-rail-open {
    z-index: 310;
}

.lan-page-rail {
    box-sizing: border-box;
    display: block;
    height: 344px;
    max-height: 344px;
    max-width: 210px;
    min-height: 344px;
    min-width: 210px;
    overflow: visible;
    top: 50%;
    transform: translateY(-50%);
    width: 210px;
}

#main-content.lan-ssr-page-cn .lan-page-rail {
    left: 0;
}

.lan-page-rail-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    overflow: hidden;
}

.lan-page-rail nav {
    display: grid;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
}

.lan-page-rail a {
    border-radius: 0;
    color: var(--lan-gray-700);
    grid-template-columns: 34px 1fr;
    min-height: 46px;
    padding: 9px 10px;
    position: relative;
}

.lan-page-rail a::before {
    background: var(--lan-red);
    content: "";
    height: 24px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
}

.lan-page-rail a > span {
    color: var(--lan-gray);
    font-size: 12px;
}

.lan-page-rail a > strong {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.lan-page-rail a:hover,
.lan-page-rail a[aria-current="location"] {
    background: var(--lan-bg);
    color: var(--lan-ink);
}

.lan-page-rail a[aria-current="location"]::before {
    opacity: 1;
}

.lan-page-rail a[aria-current="location"] > span {
    color: var(--lan-red);
    font-weight: 750;
}

.lan-page-rail-close {
    align-items: center;
    border-top: 1px solid var(--lan-line) !important;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    letter-spacing: .08em !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    text-transform: uppercase;
    width: 100%;
}

.lan-page-rail-close-icon,
.lan-page-rail-open-icon {
    display: block;
    height: 14px;
    position: relative;
    width: 12px;
}

.lan-page-rail-close-icon::before,
.lan-page-rail-open-icon::before {
    border-right: 2px solid;
    border-top: 2px solid;
    content: "";
    height: 8px;
    left: 2px;
    position: absolute;
    top: 2px;
    transform: rotate(-135deg);
    width: 8px;
}

.lan-page-rail-open {
    align-content: center;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    display: grid;
    gap: 15px;
    grid-template-rows: 14px 34px;
    height: 124px;
    justify-items: center;
    left: 0;
    min-height: 124px;
    min-width: 44px;
    padding: 12px 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    writing-mode: initial;
}

/* Allow the full English label to fit inside the shared collapsed tab size. */
.lan-ssr-page:not(.lan-ssr-page-cn) .lan-page-rail-open {
    gap: 10px;
    grid-template-rows: 14px auto;
}

.lan-page-rail-open-icon::before {
    left: 0;
    transform: rotate(45deg);
}

.lan-page-rail-open-text {
    color: var(--lan-gray-700);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
    line-height: 12px;
    text-indent: .12em;
    text-orientation: mixed;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

/* Chinese collapsed tabs share the same shadow, icon, type scale and hover color. */
#main-content.lan-ssr-page-cn .lan-page-rail-open {
    box-shadow: 0 4px 14px rgba(26,26,26,0.10);
    color: #626A78;
    font-family: "Noto Sans SC", sans-serif !important;
    gap: 8px;
    grid-template-rows: 16px 80px;
    padding: 8px 0;
    transition: color .18s;
}

#main-content.lan-ssr-page-cn .lan-page-rail-open:hover {
    color: #C30D23;
}

#main-content.lan-ssr-page-cn .lan-page-rail-open-icon {
    color: inherit;
    height: 16px;
    width: 20px;
}

#main-content.lan-ssr-page-cn .lan-page-rail-open-icon::before {
    content: none;
}

#main-content.lan-ssr-page-cn .lan-page-rail-open-icon svg {
    display: block;
}

#main-content.lan-ssr-page-cn .lan-page-rail-open-text {
    color: inherit;
    font-family: "Noto Sans SC", sans-serif !important;
    font-size: 10px;
    font-weight: 600;
    height: 80px;
    letter-spacing: 2px;
    line-height: 20px;
    text-align: center;
    text-indent: 0;
    text-orientation: upright;
    text-transform: none;
    width: 20px;
}

.lan-content-stack {
    background: var(--lan-white);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.lan-content-stack > .lan-section,
.lan-content-stack > .lan-support-section {
    border: 0;
    padding: 0;
    position: relative;
    scroll-margin-top: 16px;
    width: 100%;
}

.lan-content-stack > .lan-section > .lan-container,
.lan-content-stack > .lan-support-section > .lan-container {
    background: transparent;
    margin: 0 auto;
    max-width: 1240px;
    min-width: 0;
    padding: 80px 0;
    width: min(1240px, calc(100% - 64px));
}

.lan-content-stack > .lan-family-section,
.lan-content-stack > .lan-guide-section,
.lan-content-stack > .lan-comparison-section,
.lan-content-stack > .lan-download-section,
.lan-content-stack > .lan-faq-section {
    background: linear-gradient(#f8f9fb 0%, #f4f6f8 100%);
}

.lan-content-stack > .lan-selector-section,
.lan-content-stack > .lan-parameter-section,
.lan-content-stack > .lan-engineering-section,
.lan-content-stack > .lan-trust-section,
.lan-content-stack > .lan-support-section {
    background: var(--lan-white);
}

.lan-content-stack .lan-section-heading {
    display: block;
    margin-bottom: 36px;
}

.lan-content-stack .lan-section-heading > div,
.lan-content-stack .lan-section-heading > p {
    max-width: 1080px;
}

.lan-content-stack .lan-section-heading h2,
.lan-support-grid h2 {
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.2;
    margin-bottom: 0;
}

.lan-content-stack .lan-section-heading > p {
    color: var(--lan-gray-700);
    font-size: 16px;
    line-height: 1.8;
    margin: 16px 0 0;
}

.lan-compact-heading {
    margin-bottom: 36px;
}

.cn-selector-shell {
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    width: 100%;
}

.cn-selector-topbar {
    background: transparent;
    border: 0;
    min-height: 64px;
    padding: 0 0 20px;
}

.cn-selector-sticky-boundary {
    position: relative;
}

/*
 * The China desktop site keeps a fixed 66px customer-service rail on the
 * right edge. At intermediate desktop widths the rail otherwise sits over
 * the selector's last Sample column. Reserve space only on the China SSR
 * preview while that rail is visible; the overseas reference stays exact.
 */
@media (min-width: 1024px) and (max-width: 1380px) {
    .lan-ssr-page-cn .cn-selector-sticky-boundary {
        margin-right: 74px;
    }
}

.cn-selector-sticky-dock {
    background: var(--lan-white);
    position: sticky;
    top: var(--lan-header-height, 130px);
    z-index: var(--lan-layer-selector-header, 300);
}

.cn-selector-header-viewport {
    overflow: hidden;
    width: 100%;
}

.cn-selector-header-table thead th {
    border-right: 2px solid rgba(255, 255, 255, .24);
    overflow: visible;
    position: static;
}

.cn-selector-header-table thead th:last-child {
    border-right: 0;
}

.cn-selector-xbar {
    background: var(--lan-bg);
    height: 14px;
    margin: 0;
    overflow: scroll hidden;
    position: relative;
    scrollbar-color: var(--lan-red) var(--lan-bg);
    scrollbar-width: thin;
    top: auto;
    width: 100%;
    z-index: auto;
}

.cn-selector-xbar::-webkit-scrollbar {
    height: 5px;
}

.cn-selector-xbar::-webkit-scrollbar-track {
    background: var(--lan-bg);
}

.cn-selector-xbar::-webkit-scrollbar-thumb {
    background: var(--lan-red);
    border-radius: 2px;
}

.cn-selector-xbar-track {
    min-width: var(--lan-selector-width, 1900px);
    width: var(--lan-selector-width, 1900px);
}

.cn-selector-body-clip {
    overflow: clip;
    width: 100%;
}

.cn-selector-scroll {
    background: var(--lan-white);
    box-sizing: content-box;
    margin-bottom: -16px;
    overflow: auto;
    padding-bottom: 16px;
    scrollbar-width: auto;
    width: 100%;
}

.cn-selector-scroll::-webkit-scrollbar {
    height: 15.2px;
    width: 8px;
}

.lan-family-table-wrap::-webkit-scrollbar {
    height: 15.2px;
}

.cn-selector-semantic-head,
.cn-selector-semantic-head tr,
.cn-selector-semantic-head th,
.cn-selector-body-table > thead.cn-selector-semantic-head,
.cn-selector-body-table > thead.cn-selector-semantic-head > tr,
.cn-selector-body-table > thead.cn-selector-semantic-head > tr > th {
    border: 0;
    color: transparent;
    font-size: 0;
    height: 0;
    line-height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    position: static;
}

.cn-selector-table tbody tr:nth-child(even) td,
.cn-selector-table tbody tr:nth-child(even) .cn-sticky-image,
.cn-selector-table tbody tr:nth-child(even) .cn-sticky-part {
    background: var(--lan-bg);
}

.cn-selector-table td img {
    height: 42px;
    width: 46px;
}

.cn-header-filter {
    align-items: center;
    column-gap: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    padding-right: 6px;
}

.cn-sort-button {
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
}

.cn-sort-label {
    flex: 0 1 auto;
    inline-size: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cn-sort-icon {
    flex: 0 0 10px;
    height: 20px;
    position: relative;
    width: 10px;
}

.cn-sort-icon-crop {
    display: block;
    height: 20px;
    position: relative;
    transform: scale(.7);
    transform-origin: 0 center;
    width: 10px;
}

.cn-sort-icon img {
    height: 20px !important;
    left: 0;
    max-width: none !important;
    object-fit: fill !important;
    position: absolute;
    top: 0;
    width: 10px !important;
}

.cn-sort-icon[data-sort-state="ascending"] .cn-sort-icon-crop,
.cn-sort-icon[data-sort-state="descending"] .cn-sort-icon-crop {
    height: 9px;
    overflow: hidden;
}

.cn-sort-icon[data-sort-state="descending"] img {
    transform: translateY(-10.5px);
}

.cn-filter-menu {
    display: grid;
    height: 44px;
    overflow: visible;
    place-items: center end;
    position: relative;
    width: 20px;
}

.cn-filter-trigger,
.cn-filter-menu[open] .cn-filter-trigger,
.cn-filter-trigger:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--lan-white);
    display: grid;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
    padding: 0;
    place-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
}

.cn-filter-icon,
.cn-filter-icon img {
    display: block;
    height: 16px !important;
    width: 16px !important;
}

.cn-filter-panel-head {
    border-bottom: 1px solid var(--lan-line);
    margin-bottom: 9px;
    padding-bottom: 9px;
}

.cn-filter-panel > strong {
    border: 0;
    margin: 0;
    padding: 0;
}

.cn-selector-footer {
    position: relative;
    z-index: var(--lan-layer-result-footer, 100);
}

@media (max-width: 1100px) {
    .lan-page-rail {
        display: block;
    }

    .lan-page-rail.is-open {
        display: block;
    }

    .lan-hero-video {
        bottom: 20px;
        right: 20px;
    }
}

@media (max-width: 960px) {
    .lan-container,
    .lan-breadcrumb,
    .lan-content-stack > .lan-section > .lan-container,
    .lan-content-stack > .lan-support-section > .lan-container {
        width: calc(100% - 40px);
    }

    .lan-content-stack > .lan-section > .lan-container,
    .lan-content-stack > .lan-support-section > .lan-container {
        padding: 68px 0;
    }
}

@media (max-width: 900px) {
    .cn-selector-sticky-dock {
        top: var(--lan-header-height, 70px);
    }
}

@media (max-width: 700px) {
    .lan-container,
    .lan-breadcrumb,
    .lan-content-stack > .lan-section > .lan-container,
    .lan-content-stack > .lan-support-section > .lan-container {
        width: calc(100% - 30px);
    }

    .lan-content-stack > .lan-section > .lan-container,
    .lan-content-stack > .lan-support-section > .lan-container {
        padding: 56px 0;
    }

    .lan-content-stack .lan-section-heading {
        margin-bottom: 28px;
    }

    .lan-content-stack .lan-section-heading h2,
    .lan-support-grid h2 {
        font-size: 34px;
    }

    .lan-content-stack .lan-section-heading > p {
        font-size: 15px;
    }

    .lan-hero-video {
        background: var(--lan-ink);
        border: 0;
        bottom: auto;
        min-height: 64px;
        order: 3;
        position: relative;
        right: auto;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .lan-content-stack .lan-section-heading h2,
    .lan-support-grid h2 {
        font-size: 30px;
    }
}

/* Final geometry corrections against the approved review-page render. */
html body:has(.lan-ssr-page) {
    background: var(--lan-white);
    color: var(--lan-ink);
    line-height: 1.6;
}

@media (min-width: 1101px) {
    .lan-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    /* Share the level-3 panel geometry across English preview categories. */
    .lan-ssr-page:not(.lan-ssr-page-cn):is([data-catalog-level="3"], [data-catalog-level="4"]) .lan-hero-panel {
        max-width: 600px;
        width: min(600px, 100%);
    }

    /* Keep two-line titles and full descriptions inside the same panel. */
    .lan-ssr-page-lan:not(.lan-ssr-page-cn)[data-catalog-level="4"] .lan-hero-panel {
        padding-top: 20px;
        padding-bottom: 22px;
    }

    .lan-ssr-page-lan:not(.lan-ssr-page-cn)[data-catalog-level="4"] .lan-hero-panel h1 {
        font-size: 44px;
        margin-bottom: 12px;
    }

    .lan-ssr-page-lan:not(.lan-ssr-page-cn)[data-catalog-level="4"] .lan-eyebrow {
        margin-bottom: 8px;
    }

    .lan-ssr-page-lan:not(.lan-ssr-page-cn)[data-catalog-level="4"] .lan-hero-panel .lan-hero-lead {
        line-height: 1.65;
        margin-bottom: 14px;
    }
}

.lan-hero-panel {
    position: relative;
}

.lan-hero-lead {
    line-height: 1.78;
}

.lan-hero-actions .lan-button {
    font-size: 14px;
    line-height: 1.2;
    min-height: 51px;
    max-width: 100%;
    padding: 12px 24px;
}

@media (min-width: 701px) {
    .lan-ssr-page[data-selector-locale="fr"]:is([data-catalog-level="3"], [data-catalog-level="4"]) .lan-hero-actions {
        flex-wrap: nowrap;
    }

    .lan-ssr-page[data-selector-locale="fr"]:is([data-catalog-level="3"], [data-catalog-level="4"]) .lan-hero-actions .lan-button {
        padding-inline: 14px;
        white-space: nowrap;
    }
}

.lan-hero-video {
    color: var(--lan-white) !important;
}

.cn-scroll-hint {
    background: var(--lan-white);
    border: 0;
    border-top: 1px solid var(--lan-line);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 !important;
    padding: 8px 12px !important;
}

.lan-data-note {
    line-height: 1.6;
    margin: 12px 0 0 !important;
    padding-left: 13px;
}

.lan-split-copy {
    position: sticky;
    top: 132px;
}

.lan-split-copy > p:not(.lan-eyebrow) {
    margin-bottom: 24px;
}

.lan-family-table th,
.lan-family-table td {
    padding: 16px;
}

.lan-family-table thead th {
    white-space: nowrap;
}

/* Automatic parameter columns expand horizontally instead of squeezing values. */
.lan-family-table th:nth-child(n+3):not(:last-child),
.lan-family-table td:nth-child(n+3):not(:last-child) {
    min-width: 160px;
}

.lan-family-table th:first-child {
    min-width: 150px;
}

.lan-family-table th:nth-child(2),
.lan-family-table td:nth-child(2) {
    min-width: 72px;
}

.lan-family-table th:last-child,
.lan-family-table td:last-child {
    min-width: 80px;
}

.lan-family-table tbody td:nth-child(2) {
    text-align: right;
}

.lan-engineering-grid > article {
    min-height: 0;
}

.lan-engineering-grid article > span {
    display: block;
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 37px;
    min-height: 16px;
}

.lan-engineering-grid article h3 {
    font-size: 19px;
    line-height: 1.25;
    margin-bottom: 21px;
    min-height: 0;
}

.lan-engineering-grid article ul {
    display: grid;
    gap: 6px;
}

.lan-engineering-grid article li {
    display: flex;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    min-height: 44px;
    padding: 8px 12px 8px 28px;
}

.lan-engineering-grid article > p {
    font-size: 14px;
    line-height: 1.6;
}

.lan-engineering-grid article > a {
    display: block;
    padding-top: 18px;
}

.lan-trust-grid {
    gap: 80px;
}

.lan-trust-grid > div:first-child h2 {
    font-size: 24px;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin-bottom: 16px;
}

.lan-evidence-list {
    border: 0;
    display: grid;
    gap: 10px;
}

.lan-evidence-list > div,
.lan-evidence-list > div:last-child {
    border: 1px solid var(--lan-line-strong);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    gap: 16px;
    grid-template-columns: 52px 180px 1fr;
    min-height: 0;
    padding: 18px;
}

.lan-file-availability {
    margin-top: 16px;
}

.lan-file-availability > div {
    display: grid;
    grid-template-columns: auto 1fr;
}

.lan-file-availability dt {
    font-size: 21px;
    line-height: 1.6;
}

.lan-file-availability dd {
    font-size: 12px;
    line-height: 1.6;
}

.lan-faq-layout {
    gap: 80px;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
}

@media (max-width: 900px) {
    .lan-faq-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lan-faq-layout > div:first-child h2 {
    font-size: 24px;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin-bottom: 16px;
}

.lan-guide-links {
    gap: 10px;
    margin-top: 32px;
}

.lan-guide-links span {
    font-size: 11px;
}

.lan-faq-list {
    gap: 10px;
}

.lan-faq-list details {
    padding: 0;
}

.lan-faq-list summary {
    min-height: 0;
    padding: 19px 48px 19px 18px;
}

.lan-faq-list summary::after {
    right: 18px;
}

.lan-faq-list details p,
.lan-faq-list details > div {
    padding: 0 48px 19px 18px;
}

.lan-support-grid {
    align-items: start;
    gap: 88px;
}

.lan-support-form {
    padding: 30px;
}

.lan-form-row {
    gap: 16px;
}

.lan-support-form label:not(.lan-sample-check) {
    color: var(--lan-gray-700);
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.lan-support-form input:not([type="checkbox"]),
.lan-support-form textarea {
    color: var(--lan-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 7px 0 16px;
    min-height: 44px;
}

.lan-support-form input:-webkit-autofill,
.lan-support-form input:-webkit-autofill:hover,
.lan-support-form input:-webkit-autofill:focus,
.lan-support-form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--lan-white) inset !important;
    -webkit-text-fill-color: var(--lan-ink) !important;
    background-color: var(--lan-white) !important;
    box-shadow: 0 0 0 1000px var(--lan-white) inset !important;
    caret-color: var(--lan-ink);
}

.lan-support-form textarea {
    min-height: 44px;
}

.lan-sample-check {
    align-items: flex-start;
    font-size: 13px;
    gap: 11px;
    line-height: 1.6;
    margin: 4px 0 20px !important;
}

.lan-sample-check input {
    margin: 2px 0 0;
}

.lan-support-form > .lan-button {
    line-height: 1.2 !important;
}

.lan-form-note {
    font-size: 11px;
    line-height: 1.6;
    margin: 12px 0 0 !important;
}

/*
 * Shared CN/EN preview typography. Keep content roles together here so a split
 * layout or a later geometry correction cannot give peer sections different
 * type scales. These rules do not target the site header, legacy selectors,
 * product-data tables, dialogs or state-dependent button/link colours.
 */
.lan-ssr-page {
    --lan-type-section: 36px;
    --lan-type-card-title: 18px;
    --lan-type-body: 16px;
    --lan-type-card-body: 14px;
    --lan-type-small: 12px;
}

.lan-ssr-page .lan-content-stack :is(
    .lan-section-heading h2,
    .lan-split-copy > h2,
    .lan-trust-grid > div:first-child > h2,
    .lan-faq-layout > div:first-child > h2,
    .lan-support-grid > div:first-child > h2
) {
    color: var(--lan-ink);
    font-size: var(--lan-type-section);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.2;
    text-wrap: balance;
}

.lan-ssr-page :is(
    .lan-hero .lan-eyebrow,
    .lan-content-stack .lan-eyebrow,
    .lan-engineering-grid article > span,
    .lan-guide-links a > span
) {
    color: var(--lan-red);
    font-size: var(--lan-type-small);
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
}

.lan-ssr-page :is(
    .lan-selection-steps h3,
    .lan-parameter-grid h3,
    .lan-engineering-grid h3,
    .lan-evidence-list > div > strong,
    .lan-guide-links > a,
    .lan-faq-list summary
) {
    color: var(--lan-ink);
    font-size: var(--lan-type-card-title);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-wrap: balance;
}

/* Inherit the card's white foreground on hover/selection. */
.lan-ssr-page .lan-family-card > strong {
    color: inherit;
    font-size: var(--lan-type-card-title);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-wrap: balance;
}

.lan-ssr-page :is(
    .lan-hero-lead,
    .lan-section-heading > p,
    .lan-split-copy > p:not(.lan-eyebrow),
    .lan-trust-grid > div:first-child > p:not(.lan-eyebrow),
    .lan-faq-layout > div:first-child > p:not(.lan-eyebrow),
    .lan-support-grid > div:first-child > p:not(.lan-eyebrow),
    .lan-faq-list details > div
) {
    color: var(--lan-gray-700);
    font-size: var(--lan-type-body);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.8;
}

.lan-ssr-page :is(
    .lan-selection-steps p,
    .lan-parameter-grid p,
    .lan-engineering-grid article > p,
    .lan-engineering-grid article li,
    .lan-evidence-list > div > p
) {
    color: var(--lan-gray-700);
    font-size: var(--lan-type-card-body);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
}

.lan-ssr-page :is(
    .lan-family-index,
    .lan-selection-steps li > span,
    .lan-parameter-grid article > span,
    .lan-evidence-list > div > span
) {
    color: var(--lan-red);
    font-size: var(--lan-type-small);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
}

.lan-ssr-page :is(
    .lan-family-card > span:nth-of-type(2),
    .lan-download-search > p,
    .lan-download-review-note,
    .lan-download-results article > div:first-child > span,
    .lan-file-availability dd
) {
    color: var(--lan-gray-700);
    font-size: var(--lan-type-small);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
}

/* Status colours and actionable link colours still come from their own rules. */
.lan-ssr-page :is(.lan-form-note, .lan-data-note, .cn-scroll-hint) {
    font-size: var(--lan-type-small);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
}

.lan-ssr-page :is(.lan-text-link, .lan-engineering-grid article > a) {
    font-size: var(--lan-type-body);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.6;
}

/* Normalize editor/paste-in text sizes without removing strong/em emphasis. */
.lan-ssr-page .lan-faq-list details > div :is(p, div, ul, ol, li, span, font, strong, b, em, i, a) {
    font-size: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
}

.lan-ssr-page .lan-faq-list details > div :is(p, div, ul, ol, li, span, font) {
    color: inherit !important;
}

.lan-ssr-page .lan-faq-list details > div a {
    color: var(--lan-red) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .lan-ssr-page {
        --lan-type-section: 34px;
        --lan-type-body: 15px;
    }
}

@media (max-width: 420px) {
    .lan-ssr-page {
        --lan-type-section: 30px;
    }
}

.lan-support-grid ol {
    gap: 7px;
    margin-top: 40px;
}

.lan-support-grid li {
    background: rgba(255, 255, 255, .06);
    gap: 13px;
    min-height: 50px;
    padding: 11px 12px;
}

/* Category overview is shared by each level-three category and its children. */
#category-overview,
#category-overview * {
    font-family: "Poppins", sans-serif !important;
}

#main-content.lan-ssr-page-cn #category-overview,
#main-content.lan-ssr-page-cn #category-overview * {
    font-family: "Noto Sans SC", sans-serif !important;
}

.lan-category-overview {
    background: var(--lan-white);
}

.lan-content-stack > .lan-category-overview {
    scroll-margin-top: 132px;
}

.lan-category-overview-layout {
    align-items: start;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.lan-category-overview-intro,
.lan-category-overview-rows {
    min-width: 0;
}

.lan-category-overview .lan-eyebrow {
    margin: 0 0 16px;
}

.lan-category-overview #category-overview-title {
    margin: 0 0 14px;
}

.lan-category-overview-description {
    margin-bottom: 20px;
}

.lan-category-overview .lan-text-link {
    color: var(--lan-red);
    text-decoration: none !important;
}

.lan-category-overview .lan-text-link:hover,
.lan-category-overview .lan-text-link:focus-visible {
    text-decoration: underline !important;
}

.lan-category-overview-actions {
    color: var(--lan-ink);
    font-size: var(--lan-type-body);
    font-weight: 700;
    line-height: 1.6;
}

.lan-category-overview-actions p {
    margin: 0;
}

.lan-category-overview-actions p + p {
    margin-top: 28px;
}

.lan-category-overview-rows {
    padding-top: 34px;
}

.lan-category-overview-row + .lan-category-overview-row {
    border-top: 1px solid var(--lan-line-strong);
    margin-top: 30px;
    padding-top: 26px;
}

.lan-category-overview-index {
    color: var(--lan-red);
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 10px;
}

.lan-category-overview-row h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 12px;
}

.lan-category-overview-body {
    color: var(--lan-ink);
    font-size: var(--lan-type-body);
    line-height: 1.8;
    min-height: 4.8em;
}

.lan-category-overview-body > :first-child {
    margin-top: 0;
}

.lan-category-overview-body > :last-child {
    margin-bottom: 0;
}

.lan-category-overview-body p {
    margin-bottom: 14px;
}

.lan-category-overview-body :is(ul, ol) {
    margin: 0 0 14px;
    padding-left: 20px;
}

.lan-category-overview-body li + li {
    margin-top: 10px;
}

.lan-category-overview-body li::marker {
    color: var(--lan-red);
}

/* Preserve authored Chinese title lines; desktop adds bounded wrapping below. */
#main-content.lan-ssr-page-cn #category-overview-title {
    white-space: pre;
    text-wrap: nowrap;
}

@media (min-width: 901px) {
    #main-content.lan-ssr-page-cn .lan-category-overview-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    #main-content.lan-ssr-page-cn #category-overview-title {
        overflow-wrap: anywhere;
        white-space: pre-line;
        text-wrap: wrap;
    }
}

@media (max-width: 900px) {
    #main-content.lan-ssr-page-cn .lan-category-overview-heading {
        container-type: inline-size;
    }

    #main-content.lan-ssr-page-cn #category-overview-title {
        font-size: min(var(--lan-type-section), calc(100cqw / var(--lan-overview-line-units)));
    }
}

/* English overview headings span the section before the two-column content. */
#main-content.lan-ssr-page:not(.lan-ssr-page-cn) .lan-category-overview-layout {
    row-gap: 24px;
}

#main-content.lan-ssr-page:not(.lan-ssr-page-cn) .lan-category-overview-intro {
    display: contents;
}

#main-content.lan-ssr-page:not(.lan-ssr-page-cn) .lan-category-overview-heading {
    grid-column: 1 / -1;
    min-width: 0;
}

#main-content.lan-ssr-page:not(.lan-ssr-page-cn) #category-overview-title {
    margin-bottom: 0;
    white-space: pre-line;
    text-wrap: wrap;
}

#main-content.lan-ssr-page:not(.lan-ssr-page-cn) .lan-category-overview-copy {
    min-width: 0;
}

#main-content.lan-ssr-page:not(.lan-ssr-page-cn) .lan-category-overview-rows {
    padding-top: 0;
}

@media (min-width: 901px) {
    /* Use the FAQ column gap without moving its text, guides or answer column. */
    #main-content.lan-ssr-page:not(.lan-ssr-page-cn) #faq-title {
        width: calc(100% + 64px);
        text-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .lan-category-overview-layout {
        gap: 32px;
        grid-template-columns: minmax(0, 1fr);
    }

    .lan-category-overview-rows {
        padding-top: 0;
    }

}

/* Reference support layout; the shared section container keeps the same edges
 * as the sections above. Only the exact-query SSR preview loads this sheet. */
#engineer-support,
#engineer-support * {
    font-family: "Poppins", sans-serif !important;
}

#main-content.lan-ssr-page-cn #engineer-support,
#main-content.lan-ssr-page-cn #engineer-support * {
    font-family: "Noto Sans SC", sans-serif !important;
}

#engineer-support .lan-support-grid {
    align-items: stretch;
    column-gap: clamp(32px, 3.6vw, 60px);
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

#engineer-support .lan-support-overview {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#engineer-support .lan-eyebrow {
    margin: 0 0 22px;
    padding: 0;
}

#engineer-support #support-title {
    margin: 0 0 18px;
}

#engineer-support .lan-support-intro {
    margin: 0;
    max-width: none;
}

#engineer-support .lan-support-steps {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 32px 0 36px;
    padding: 0;
}

#engineer-support .lan-support-steps li {
    align-items: center;
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    color: var(--lan-ink);
    display: flex;
    gap: 8px;
    min-height: 60px;
    min-width: 0;
    padding: 12px 10px;
}

#engineer-support .lan-support-steps span {
    background: var(--lan-white);
    border: 1px solid var(--lan-red);
    color: var(--lan-red);
    flex: 0 0 28px;
    font-size: 15px;
    font-weight: 600;
    height: 28px;
    line-height: 1;
    width: 28px;
}

#engineer-support .lan-support-steps strong {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

#engineer-support .lan-support-checklists {
    display: grid;
    flex: 1;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#engineer-support .lan-support-checklist {
    border: 1px solid var(--lan-line-strong);
    min-width: 0;
    padding: 26px;
}

#engineer-support .lan-support-checklist h3 {
    align-items: center;
    color: var(--lan-ink);
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    font-weight: 700;
    gap: 8px 12px;
    letter-spacing: 0;
    line-height: 1.6;
    margin: 0 0 18px;
}

#engineer-support .lan-support-new {
    background: var(--lan-red);
    color: var(--lan-white);
    display: inline-block;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    padding: 0 6px;
}

#engineer-support .lan-support-checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#engineer-support .lan-support-checklist li {
    border-bottom: 1px solid var(--lan-line);
    display: block;
    min-height: 0;
    padding: 10px 0 11px 26px;
    position: relative;
}

#engineer-support .lan-support-checklist li::before {
    background: var(--lan-red);
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 23px;
    width: 11px;
}

#engineer-support .lan-support-checklist li strong {
    color: var(--lan-ink);
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

#engineer-support .lan-support-checklist li p,
#engineer-support .lan-support-checklist-note {
    color: var(--lan-gray-700);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    margin: 0;
}

#engineer-support .lan-support-checklist-note {
    margin-top: 14px;
}

#engineer-support .lan-support-form {
    align-self: stretch;
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    box-shadow: 0 18px 54px rgba(25, 36, 55, .07);
    min-width: 0;
    padding: 34px;
}

#engineer-support .lan-support-form > label:not(.lan-sample-check) {
    color: var(--lan-ink);
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

#engineer-support .lan-support-form input:not([type="checkbox"]):not([type="hidden"]),
#engineer-support .lan-support-form textarea {
    background: var(--lan-white);
    border: 1px solid var(--lan-line-strong);
    border-radius: 1px;
    box-shadow: none;
    color: var(--lan-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 8px 0 18px;
    min-height: 46px;
    padding: 9px 14px;
    width: 100%;
}

#engineer-support .lan-support-form input::placeholder,
#engineer-support .lan-support-form textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

#engineer-support .lan-support-form textarea {
    height: 114px;
    min-height: 114px;
}

#engineer-support .lan-sample-check {
    color: var(--lan-ink);
    font-size: 14px;
    font-weight: 400;
    gap: 10px;
    line-height: 1.65;
    margin: 0 0 18px !important;
}

#engineer-support .lan-sample-check input {
    flex: 0 0 18px;
    margin: 3px 0 0;
}

#engineer-support .lan-privacy-check a {
    font-weight: 700;
    text-decoration: none;
}

#engineer-support .lan-support-form > .lan-button {
    border-radius: 2px;
    font-size: 17px;
    font-weight: 700;
    min-height: 56px;
    padding: 15px;
    white-space: normal;
}

#engineer-support .lan-form-note {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    margin: 16px 0 0 !important;
    text-align: center;
}

#engineer-support .lan-support-replacements {
    align-items: center;
    border: 1px solid var(--lan-line-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 20px;
    min-height: 72px;
    padding: 18px 26px;
}

#engineer-support .lan-support-replacements-heading,
#engineer-support .lan-support-replacement-article {
    color: var(--lan-ink);
    font-size: 16px;
    line-height: 1.6;
}

#engineer-support .lan-support-replacement-article {
    font-weight: 500;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#engineer-support .lan-support-replacements time,
#engineer-support .lan-support-replacements p {
    color: var(--lan-gray-700);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

#engineer-support .lan-support-replacements p {
    flex: 1 1 260px;
}

#engineer-support .lan-support-replacement-all {
    color: var(--lan-red);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    margin-left: auto;
}

@media (max-width: 1100px) {
    #engineer-support .lan-support-grid {
        column-gap: 28px;
    }

    #engineer-support .lan-support-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #engineer-support .lan-support-form,
    #engineer-support .lan-support-checklist {
        padding: 22px;
    }
}

@media (max-width: 900px) {
    #engineer-support .lan-support-grid {
        gap: 28px;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    #engineer-support .lan-support-checklists {
        grid-template-columns: minmax(0, 1fr);
    }

    #engineer-support .lan-support-steps {
        gap: 10px;
        margin: 24px 0;
    }

    #engineer-support .lan-support-steps li {
        gap: 8px;
        padding: 10px;
    }

    #engineer-support .lan-support-replacements {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    #engineer-support .lan-support-replacements p {
        flex: none;
    }

    #engineer-support .lan-support-replacement-article {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    #engineer-support .lan-support-replacement-all {
        margin-left: 0;
    }
}

/* All ten content sections use the same three text roles in both catalog levels.
 * The ID scope wins over the older page-wide font rules without changing cards,
 * tables, form fields, the hero or the FAQ answer typography. */
#main-content.lan-ssr-page .lan-content-stack {
    --lan-section-font: "Poppins", sans-serif;
}

#main-content.lan-ssr-page-cn .lan-content-stack {
    --lan-section-font: "Noto Sans SC", sans-serif;
}

#main-content.lan-ssr-page .lan-content-stack :is(
    .lan-section-kicker,
    .lan-section-title,
    .lan-section-description
) {
    font-family: var(--lan-section-font) !important;
    font-style: normal;
}

#main-content.lan-ssr-page .lan-content-stack .lan-section-kicker {
    align-items: center;
    color: var(--lan-red);
    display: flex;
    font-size: var(--lan-type-small);
    font-weight: 700;
    gap: 10px;
    letter-spacing: .14em;
    line-height: 1.4;
}

#main-content.lan-ssr-page .lan-content-stack .lan-section-kicker::before {
    background: var(--lan-red);
    border: 0;
    content: "";
    display: block;
    flex: 0 0 24px;
    height: 2px;
    width: 24px;
}

#main-content.lan-ssr-page .lan-content-stack .lan-section-title {
    color: var(--lan-ink);
    font-size: var(--lan-type-section);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.2;
    text-wrap: balance;
}

#main-content.lan-ssr-page .lan-content-stack .lan-section-description {
    color: var(--lan-gray-700);
    font-size: var(--lan-type-body);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.8;
}