.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto; align-items: center; height: 1.05rem; padding-inline: .55rem; background: #fff; }
.site-header > a { width: 1.8rem; line-height: 0; }
.site-header img { width: 100%; height: auto; }
.site-header nav { display: flex; gap: clamp(28px,3vw,54px); padding-right: clamp(8px,2.2vw,34px); }
.site-header nav a { min-width: 92px; padding: 12px 8px; color: #283042; font: 650 18px/1.35 "Avenir Next","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing: .075em; text-align: center; }
.hero { display: grid; grid-template-columns: calc(50% + 1.8rem) calc(50% - 1.8rem); align-items: center; width: calc(100% + 1.1rem); padding: .4rem .55rem; background: url('../media/hero-background.svg') no-repeat; }
.hero-copy { padding-inline: 1.8rem; box-sizing: content-box; min-width: 0; }
.hero-copy h1 { width: 8em; color: var(--brand); font: 700 .64rem/.92rem "Songti SC",serif; letter-spacing: .06em; }
.hero-copy p { width: auto; font: 700 .48rem/1.2 "Songti SC",serif; margin: .1rem 0 1rem; }
.hero figure { min-width: 0; }
.hero figure img { display: block; width: 100%; height: auto; }
.mobile-break { display: none; }
.reasons > h2 { padding: 1.33rem 0 .7rem; text-align: center; color: var(--brand); font: 700 .64rem/.92rem "Songti SC",serif; letter-spacing: .06em; }
.reason-grid { display: grid; grid-template-columns: repeat(3,4.32rem); justify-content: center; gap: 46px; }
.reason-grid article { padding: .46rem .36rem; border-radius: .48rem; background: #fff; box-shadow: .07rem .04rem .166rem #00000014; display: grid; grid-template-rows: auto auto 1fr; gap: .36rem; }
.reason-grid img { width: .79rem; height: .71rem; }
.reason-grid h3 { color: #000; font: 600 .24rem/1.2 "PingFang SC",sans-serif; }
.reason-grid p { color: #000; font: 300 .18rem/1.2 "PingFang SC",sans-serif; }
.customer-metrics { height: 5.11rem; padding-top: .96rem; background: var(--quiet); text-align: center; }
.customer-metrics h2 { font: 700 .48rem/1.2 Quantico,serif; }
.customer-metrics > p { font: 400 .2rem/1.2 Quantico,serif; margin-top: .12rem; }
.customer-metrics dl { margin-top: .8rem; display: grid; grid-template-columns: repeat(3,1fr); width: 70%; margin-inline: auto; gap: 10%; }
.customer-metrics dl > div { display: flex; flex-direction: column-reverse; }
.customer-metrics dt { font: 400 .24rem/1.2 Quantico,serif; }
.customer-metrics dd { color: var(--mint); font: 800 .72rem/1.2 "Arial Black","DIN Alternate","Microsoft YaHei",sans-serif; letter-spacing: .015em; }
.capabilities { margin-top: 1.6rem; }
.capabilities article { padding: 2.1rem 13% 0; height: 9.32rem; background-repeat: no-repeat; }
.language-feature { background-image: url('../media/languages.svg'); }
.response-feature { background-image: url('../media/shortcuts.svg'); background-position-x: 100%; text-align: right; }
.automatic-feature { background-image: url('../media/translation.svg'); }
.capabilities h2 { color: var(--ink); font: 700 .64rem/1.2 Quantico,serif; }
.capabilities h2 br { display: none; }
.capabilities p { width: 7rem; margin-top: .25rem; font: 400 .32rem/1.65 "PingFang HK",serif; }
.response-feature p { margin-left: auto; }
.capabilities .primary-action { margin-top: .8rem; }
.brand-footer { line-height: 0; }
.brand-footer img { width: 100%; height: auto; }
.page-section { padding-top: 72px; scroll-margin-top: 88px; }
.page-section > h2 { margin-bottom: 24px; color: #161c2d; font: 800 42px/1.25 serif; text-align: center; }
.download-experience, .pricing-experience { font: 16px/1.6 Arial,sans-serif; color: #333; }
.download-banner { text-align: center; padding-top: 32px; background: url('../media/download-background.png') center/cover; }
.download-banner h2 { font-size: 30px; color: #263642; }
.download-banner > p { color: #888; font-size: 14px; font-weight: 600; margin: 20px 0 16px; }
.product-tabs { display: flex; justify-content: center; }
.product-tabs button { background: transparent; border: 0; padding: 12px 40px 4px; border-radius: 12px 12px 0 0; font: 600 18px/1.5 Arial,sans-serif; }
.product-tabs button span { display: block; font-weight: 400; font-size: 16px; }
.product-tabs button[aria-selected='true'] { color: var(--brand); background: #fff; }
.installer-grid { display: flex; justify-content: center; gap: 94px; padding: 137px 24px 62px; }
.installation-help { max-width: 1200px; margin: 0 auto; padding-bottom: 72px; }
.installation-help > h2 { text-align: center; font-size: 30px; margin-bottom: 78px; }
.installation-help article { display: grid; grid-template-columns: 43% 1fr; border: 4px solid var(--outline); border-radius: 12px; margin-top: 72px; min-height: 344px; }
.installation-help article img { height: 100%; width: 100%; object-fit: contain; background: #f1f6ff; border-radius: 20px; }
.installation-help article > div { padding: 18px 36px; }
.installation-help h3 { font-size: 24px; }
.installation-help article p { margin-block: 10px; line-height: 1.9; }
.installation-help details { margin-top: 32px; padding: 20px; border: 1px solid var(--outline); border-radius: 12px; }
.installation-help summary { cursor: pointer; font-size: 18px; font-weight: 600; }
.installation-help details p { margin-top: 12px; }
.pricing-experience { padding: 108px max(24px,calc((100% - 1200px)/2)) 60px; background: linear-gradient(105deg,#d7e9ff,#f0fcfd); }
.pricing-heading { text-align: center; }
.pricing-heading h2 { font-size: 40px; line-height: 1.25; }
.pricing-heading p { font-size: 40px; line-height: 1.25; font-weight: 700; color: #263642; }
.plan-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top: 96px; }
.feature-comparison > h2 { text-align: center; font-size: 30px; margin: 72px 0 32px; }
.table-scroll { overflow: auto; border: 1px solid #eaf5fd; }
.feature-comparison table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14px; }
.feature-comparison th, .feature-comparison td { padding: 16px 20px; border-bottom: 1px solid #eaf5fd; text-align: center; }
.feature-comparison th:first-child { text-align: left; width: 28%; font-weight: 400; }
.feature-comparison thead { background: #f6f9fd; }
.feature-comparison .feature-group th { background: #f5f8fd; font-size: 16px; font-weight: 700; }
.feature-comparison td:nth-child(3) { background: #f4fff8; }
.feature-comparison td span { display: inline-grid; place-items: center; border-radius: 50%; width: 16px; height: 16px; color: white; background: var(--brand); font-size: 12px; }
body:not([data-page='home']) .site-header { position: relative; height: 62px; max-width: 960px; margin: auto; padding: 0; }
body:not([data-page='home']) .site-header > a { width: 160px; }
body:not([data-page='home']) .site-header nav { display: none; }
body:not([data-page='home']) .support-widget { display: none; }
@media (max-width: 768px) {
    .site-header { height: auto; min-height: 64px; padding: 8px 10px; gap: 8px; }
    .site-header > a { width: 76px; }
    .site-header nav { gap: 6px; padding-right: 0; }
    .site-header nav a { min-width: 0; padding: 8px 5px; font-size: 13px; letter-spacing: .025em; white-space: nowrap; }
    .hero { display: grid; grid-template-columns: 1fr; width: 100%; padding: 44px 20px 34px; background-size: cover; }
    .hero-copy { padding: 0; }
    .hero-copy h1 { width: auto; font-size: 34px; line-height: 1.25; }
    .hero-copy p { width: auto; font-size: 24px; margin: 12px 0 26px; }
    .mobile-break { display: initial; }
    .hero figure { margin-top: 30px; }
    .reasons { padding: 0 16px 44px; }
    .reasons > h2 { padding: 54px 0 28px; font-size: 31px; line-height: 1.25; letter-spacing: 0; }
    .reason-grid { grid-template-columns: min(330px,100%); gap: 16px; }
    .reason-grid article { padding: 25px 24px; gap: 14px; border-radius: 22px; }
    .reason-grid h3 { font-size: 20px; }
    .reason-grid p { font-size: 15px; line-height: 1.55; }
    .customer-metrics { height: auto; padding: 46px 12px 52px; }
    .customer-metrics h2 { font-size: 30px; }
    .customer-metrics > p { font-size: 15px; line-height: 1.5; }
    .customer-metrics dl { margin-top: 34px; width: 100%; gap: 0; }
    .customer-metrics dd { font: 400 34px/1.2 Quantico,serif; }
    .customer-metrics dt { font-size: 14px; }
    .capabilities { margin-top: 0; }
    .capabilities article { height: auto; min-height: 520px; padding: 64px 20px 34px; background-size: min(72vw,320px) auto; background-position-y: bottom; }
    .capabilities h2 { font-size: 32px; line-height: 1.3; }
    .capabilities p { width: auto; font-size: 17px; line-height: 1.65; }
    .capabilities .primary-action { margin-top: 26px; }
    .page-section { padding-top: 46px; }
    .page-section > h2 { font-size: 30px; }
    .download-banner { padding-top: 28px; }
    .download-banner h2 { font-size: 26px; padding-inline: 12px; }
    .download-banner > p { padding-inline: 20px; }
    .product-tabs button { padding-inline: 20px; font-size: 16px; }
    .product-tabs button span { font-size: 13px; }
    .installer-grid { padding: 48px 24px 36px; display: grid; grid-template-columns: 1fr; gap: 28px; justify-items: center; }
    .installation-help { padding: 0 16px 40px; }
    .installation-help > h2 { margin-bottom: 28px; font-size: 26px; }
    .installation-help article { grid-template-columns: 1fr; margin-top: 28px; }
    .installation-help article img { max-height: 250px; }
    .installation-help article > div { padding: 20px; }
    .installation-help h3 { font-size: 21px; }
    .pricing-experience { padding: 32px 16px 40px; }
    .pricing-heading h2 { font-size: 26px; }
    .pricing-heading p { font-size: 20px; margin-top: 12px; }
    .plan-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
    .feature-comparison > h2 { font-size: 26px; margin-top: 40px; }
    .feature-comparison th, .feature-comparison td { padding: 14px 16px; }
    body:not([data-page='home']) .site-header { padding-inline: 20px; }
}
@media (max-width: 359px) {
    .site-header { grid-template-columns: 1fr; justify-items: center; }
    .site-header nav a { font-size: 12px; }
}