/* Public-site reading refinements. Loaded last; existing font families remain. */
:root { --reading-text: #50564f; }

/* Preserve the two headline families while giving multi-line headings room. */
.en-page .hero h1 { line-height: 1.08; }
body[data-product] .product-summary h1 { line-height: 1.2; }

/* Product information should be comfortable to read before sending an inquiry. */
body[data-product] .detail-copy,
body[data-product] .detail-block p,
body[data-product] .detail-list,
body[data-product] .process-list,
body[data-product] .detail-feature-grid p {
  font-size: 16px;
  line-height: 1.75;
}
body[data-product] .detail-copy,
body[data-product] .detail-block p,
body[data-product] .detail-feature-grid p { color: var(--reading-text); }
body[data-product] .product-meta strong { font-size: 14px; line-height: 1.4; font-weight: 600; }
body[data-product] .product-meta span,
body[data-product] .spec-definition-list dd { font-size: 14px; line-height: 1.55; }
body[data-product] .spec-note { font-size: 14px; line-height: 1.65; }
body[data-product] .trust-points span { font-size: 13px; line-height: 1.4; }
body[data-product] .summary-actions .button { font-size: 14px; line-height: 1.4; font-weight: 600; }

/* Input content must not inherit the small, heavy label font. */
body[data-product] .product-form { row-gap: 18px; }
body[data-product] .product-form label:not(.form-consent) { font-size: 14px; font-weight: 600; line-height: 1.5; }
body[data-product] .product-form input:not([type="checkbox"]):not([type="hidden"]),
body[data-product] .product-form select,
body[data-product] .product-form textarea {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
body[data-product] .product-form input::placeholder,
body[data-product] .product-form textarea::placeholder { color: #6f716b; opacity: 1; font-weight: 400; }
body[data-product] .product-form .product-form-help { font-size: 14px; line-height: 1.65; }
body[data-product] .product-form .product-form-options > summary { font-size: 14px; font-weight: 600; line-height: 1.5; }
body[data-product] .product-form .form-consent { font-size: 14px; font-weight: 400; line-height: 1.65; }

/* Keep navigation hierarchy clear without changing the menu structure. */
.site-nav { font-weight: 600; }
@media (max-width: 980px) {
  .site-nav {
    font-size: 16px;
    line-height: 1.45;
    justify-content: flex-start;
    background: #fff;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav > a { flex: 0 0 auto; padding: 12px 14px; }
  .site-nav .nav-cta { line-height: 1.45; }
}

/* Limit long lines when the article sidebar stacks above its reading column. */
html:lang(en) .practical-article .article-content p,
html:lang(en) .practical-article .article-content li { font-size: 16px; line-height: 1.75; }
html:lang(zh) .practical-article .article-content p,
html:lang(zh) .practical-article .article-content li { font-size: 16px; line-height: 1.85; }
.practical-article .article-content h2 { line-height: 1.35; }
.practical-article .article-toc a { font-size: 14px; line-height: 1.55; }
.practical-article .article-meta { font-size: 12px; }
@media (max-width: 980px) {
  .compact-blog-grid { grid-template-columns: 1fr; }
  .practical-article .article-body { width: 100%; max-width: 44rem; margin-inline: auto; }
}

/* Match mobile headline size to the actual hero selector, not only generic h1. */
@media (max-width: 760px) {
  html[lang|="zh"] .hero h1 { font-size: 38px; line-height: 1.2; }
  .en-page .hero h1 { line-height: 1.12; }
}
@media (max-width: 640px) {
  .collection-hero h1 { line-height: 1.2; }
  .collection-hero p:not(.eyebrow) { font-size: 16px; line-height: 1.65; }
}

/* Give long desktop navigation its own row before brand and links collide. */
@media (min-width: 981px) and (max-width: 1279px) {
  .site-header:has(> .site-nav) { flex-wrap: wrap; gap: 8px; border-radius: 20px; }
  .site-header:has(> .site-nav) > .brand { flex: 1 1 auto; }
  .site-header:has(> .site-nav) > .header-actions { order: 2; }
  .site-header > .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    font-size: 13px;
    line-height: 1.45;
  }
  .site-header > .site-nav > a { padding: 8px 6px; white-space: nowrap; }
  .practical-article .article-content section,
  body[data-product] #product-contact { scroll-margin-top: 170px; }
}