/*
 * Yongjian Website Typography System v1.0
 * Selected family: IBM Plex Sans + IBM Plex Sans SC
 * This file intentionally loads last and normalizes typography/vertical rhythm
 * without changing the existing structural layout or component behavior.
 */

:root{
  --font-sans:"IBM Plex Sans","IBM Plex Sans SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif;
  --type-display:clamp(38px,4.2vw,56px);
  --type-h1:clamp(34px,3.6vw,48px);
  --type-h2:clamp(28px,2.8vw,36px);
  --type-h3:clamp(20px,2vw,24px);
  --type-h4:18px;
  --type-lead:18px;
  --type-body-lg:16px;
  --type-body:15px;
  --type-small:13px;
  --type-caption:12px;
  --type-eyebrow:12px;
  --leading-display:1.08;
  --leading-h1:1.12;
  --leading-heading:1.2;
  --leading-card:1.35;
  --leading-body:1.7;
  --leading-reading:1.75;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --section-space:clamp(64px,7vw,96px);
}

html{font-size:16px}
body,
button,
input,
select,
textarea{
  font-family:var(--font-sans)!important;
  font-kerning:normal;
  font-synthesis:none;
}
body{
  font-size:var(--type-body)!important;
  font-weight:400;
  line-height:var(--leading-body)!important;
  letter-spacing:0;
}
strong,b{font-weight:600}
.quote-mark{font-family:var(--font-sans)!important}

/* Standard weights */
h1,h2,h3,h4,h5,h6,
.section-title,.about-heading,
.btn,.nav-link,.nav-trigger,
.mobile-menu>a,.mobile-menu button,
.text-link,.simple-product-link,
.filter-chip,.category-filter-link,
.faq-question,.faq-button,
.footer-col h3,
.language-popup-trigger,
.language-choice strong{
  font-weight:600!important;
}
.stat strong,.strength-number,.market-data-item strong,.error-number,.error-code{font-weight:700!important;font-variant-numeric:tabular-nums lining-nums}

/* Major display titles */
.hero h1{
  font-size:var(--type-display)!important;
  font-weight:600!important;
  line-height:var(--leading-display)!important;
  letter-spacing:-.035em!important;
}
.subpage-hero h1,
.about-hero-copy h1,
.contact-hero-copy h1,
.product-hero h1,
.detail-hero h1,
.category-hero h1,
.error-copy h1,
.error-panel h1{
  font-size:var(--type-h1)!important;
  font-weight:600!important;
  line-height:var(--leading-h1)!important;
  letter-spacing:-.025em!important;
  text-wrap:balance;
}

/* Section headings */
.section-title,
.about-heading,
.category-head h2,
.subpage-section h2,
.subpage-cta h2,
.featured-story h2,
.contact-steps-head h2,
.contact-map-copy h2,
.detail-summary h2,
.detail-overview h2,
.detail-faq h2,
.article-content h2,
.error-route-heading h2,
.about-cta h2,
.category-cta-box h2,
.catalog-main>h2,
.directory-main>h2{
  font-size:var(--type-h2)!important;
  font-weight:600!important;
  line-height:var(--leading-heading)!important;
  letter-spacing:-.018em!important;
}

/* Component headings */
.cap-card h3,.challenge-card h3,.case-body h3,
.category-card h3,.simple-product-body h3,
.subpage-card-body h2,.subpage-card-body h3,
.feature-item h3,.step-item h3,
.reliability-item h3,.aside-box h3,
.article-content h3,.contact-step h3,
.error-route-card strong,
.detail-faq h3,
.product-info h2,.product-info h3{
  font-weight:600!important;
  line-height:var(--leading-card)!important;
  letter-spacing:-.01em!important;
}
.cap-card h3,.challenge-card h3,.case-body h3,.simple-product-body h3,.subpage-card-body h2,.featured-story h2{
  font-size:clamp(19px,1.6vw,22px)!important;
}
.article-content h3,.aside-box h3,.feature-item h3,.step-item h3,.reliability-item h3,.contact-step h3{
  font-size:var(--type-h4)!important;
}

/* Lead / hero copy */
.hero-copy,
.about-hero-copy>p:not(.section-kicker),
.contact-hero-copy>p:not(.section-kicker),
.product-hero-copy,
.detail-lead,
.category-hero-grid>div>p:not(.section-kicker),
.subpage-hero>div>p:not(.subpage-breadcrumb),
.error-intro{
  font-size:clamp(16px,1.35vw,18px)!important;
  line-height:var(--leading-body)!important;
  letter-spacing:0!important;
}
.section-copy,.about-lead,.faq-intro,.catalog-intro{
  font-size:var(--type-body-lg)!important;
  line-height:var(--leading-reading)!important;
}

/* Body copy */
.article-content p,.article-content li{
  font-size:var(--type-body-lg)!important;
  line-height:1.82!important;
}
.overview-copy p,.market-copy p,
.subpage-card-body p,.feature-item p,.step-item p,
.case-body p,.cap-card p,.challenge-card p,
.simple-product-desc,.category-card p,
.detail-overview p,.detail-summary p,
.contact-map-copy p,.contact-step p,
.faq-answer p,.faq-panel p,
.error-route-heading p,
.category-cta-box p,.subpage-cta p,.about-cta p{
  font-size:var(--type-body)!important;
  line-height:var(--leading-body)!important;
}

/* Labels, navigation and utility text */
.nav-link,.nav-trigger{font-size:14px!important;font-weight:500!important;line-height:1.2!important;letter-spacing:0!important}
.dropdown a,.mobile-sub a{font-size:13px!important;font-weight:400!important;line-height:1.45!important}
.mobile-menu>a,.mobile-menu button{font-size:15px!important;font-weight:500!important;line-height:1.35!important}
.btn{font-size:14px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:0!important}
.text-link,.simple-product-link{font-size:13px!important;font-weight:600!important;line-height:1.35!important}
.section-kicker,.subpage-eyebrow,.about-hero-label,.contact-quick-label,.form-eyebrow,
.language-popup-eyebrow,.case-filter-drawer-head span,.error-eyebrow,
.faq-group-title,.simple-product-category,.category-label{
  font-size:var(--type-eyebrow)!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:.12em!important;
}
.subpage-breadcrumb,.about-breadcrumb,.contact-breadcrumb,.product-breadcrumb,.detail-breadcrumb,.category-breadcrumb,.error-breadcrumb{
  font-size:var(--type-caption)!important;
  font-weight:500!important;
  line-height:1.4!important;
  letter-spacing:0!important;
}

/* Cards and compact text */
.simple-product-category,.case-tag,.visual-label,.article-caption,
.form-note,.detail-form-note,.language-popup-note,.language-choice small,
.footer-bottom,.contact-line,.aside-row,.strength-label,.market-data-item span{
  font-size:var(--type-caption)!important;
  line-height:1.55!important;
}
.simple-product-body h3{font-size:20px!important}
.simple-product-desc{font-size:14px!important;line-height:1.65!important}
.category-filter-link,.sidebar-panel a,.sidebar-panel button{font-size:13px!important;line-height:1.45!important}
.filter-chip,.case-filter-toggle,.mobile-category-toggle{font-size:14px!important;font-weight:600!important;line-height:1.3!important}

/* FAQ */
.faq-question,.faq-button{
  font-size:16px!important;
  font-weight:600!important;
  line-height:1.45!important;
  padding-top:20px!important;
  padding-bottom:20px!important;
}
.faq-answer p,.faq-panel p{font-size:15px!important;line-height:1.75!important;padding-bottom:24px!important}

/* Forms */
.form-field>span,.contact-form-field>span,.detail-form-field>span,.field-label,label{
  font-size:13px;
  font-weight:500;
  line-height:1.4;
}
.field,.contact-field,.detail-form input,.detail-form select,.detail-form textarea,
.contact-form-card input,.contact-form-card select,.contact-form-card textarea{
  font-size:14px!important;
  line-height:1.45!important;
}

/* Footer */
.footer-col h3{font-size:16px!important;font-weight:600!important;line-height:1.3!important}
.footer-about p{font-size:13px!important;line-height:1.7!important}
.footer-links a,.contact-line{font-size:13px!important;line-height:1.55!important}
.footer-stat{font-size:14px!important;font-weight:600!important;line-height:1.35!important}

/* Language popup typography */
.language-popup-trigger{font-size:13px!important;font-weight:600!important}
.language-popup-head h2{font-size:26px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:-.015em!important}
.language-choice strong{font-size:14px!important;font-weight:600!important;line-height:1.3!important}
.language-choice small{font-size:12px!important;line-height:1.45!important}
.language-popup-note{font-size:12px!important;line-height:1.6!important}

/* Vertical rhythm: main sections */
.section,.subpage-section,.about-section{
  padding-top:var(--section-space)!important;
  padding-bottom:var(--section-space)!important;
}
.subpage-section.compact{padding-top:clamp(52px,5.5vw,72px)!important;padding-bottom:clamp(52px,5.5vw,72px)!important}
.category-section,.catalog-section,.contact-main,.contact-map-section,.applications-section,.feature-section{
  padding-top:clamp(64px,7vw,88px)!important;
  padding-bottom:clamp(64px,7vw,88px)!important;
}

/* Heading and paragraph spacing */
.section-kicker,.subpage-eyebrow{margin-bottom:var(--space-3)!important}
.section-title,.about-heading{margin-bottom:0!important}
.section-title + .section-copy,
.about-heading + .about-lead,
.subpage-section h2 + p,
.category-head h2 + p,
.article-content h2 + p,
.article-content h3 + p{
  margin-top:var(--space-4)!important;
}
.hero-copy,.about-hero-copy>p:not(.section-kicker),.contact-hero-copy>p:not(.section-kicker),.product-hero-copy,.detail-lead{
  margin-top:var(--space-5)!important;
  margin-bottom:var(--space-7)!important;
}
.hero-actions,.about-hero-actions,.contact-hero-actions,.detail-actions{gap:var(--space-3)!important}

/* Card rhythm */
.cap-card h3,.challenge-card h3,.case-body h3,.simple-product-body h3,.category-card h3,
.subpage-card-body h2,.subpage-card-body h3{margin-top:var(--space-4)!important;margin-bottom:var(--space-2)!important}
.cap-card p,.challenge-card p,.case-body p,.simple-product-desc,.category-card p,.subpage-card-body p{margin-top:0!important;margin-bottom:var(--space-4)!important}
.case-body,.subpage-card-body,.simple-product-body{padding:var(--space-6)!important}

/* Article rhythm */
.article-content h2{margin-top:var(--space-12)!important;margin-bottom:var(--space-4)!important}
.article-content h3{margin-top:var(--space-8)!important;margin-bottom:var(--space-3)!important}
.article-content p{margin-bottom:var(--space-5)!important}
.article-content ul,.article-content ol{margin-top:var(--space-4)!important;margin-bottom:var(--space-6)!important;gap:var(--space-2)!important}

/* Numeric alignment */
.stat strong,.strength-number,.market-data-item strong,.category-summary strong,.value-item strong,
.product-specs td,.product-specs th,.detail-facts strong{
  font-variant-numeric:tabular-nums lining-nums;
}

/* CJK tuning for TranslatePress-generated language pages */
html:lang(zh) body,html:lang(ja) body,html:lang(ko) body{line-height:1.75!important}
html:lang(zh) .hero h1,html:lang(ja) .hero h1,html:lang(ko) .hero h1{font-size:clamp(36px,4vw,53px)!important;letter-spacing:-.02em!important}
html:lang(zh) .subpage-hero h1,html:lang(ja) .subpage-hero h1,html:lang(ko) .subpage-hero h1,
html:lang(zh) .about-hero-copy h1,html:lang(ja) .about-hero-copy h1,html:lang(ko) .about-hero-copy h1{font-size:clamp(32px,3.4vw,46px)!important;letter-spacing:-.015em!important}
html:lang(zh) .section-kicker,html:lang(ja) .section-kicker,html:lang(ko) .section-kicker,
html:lang(zh) .subpage-eyebrow,html:lang(ja) .subpage-eyebrow,html:lang(ko) .subpage-eyebrow{text-transform:none!important;letter-spacing:.05em!important}

@media(max-width:900px){
  :root{
    --type-display:48px;
    --type-h1:42px;
    --type-h2:32px;
    --type-h3:22px;
    --section-space:80px;
  }
  .hero h1{font-size:clamp(40px,7vw,48px)!important}
  .subpage-hero h1,.about-hero-copy h1,.contact-hero-copy h1,.product-hero h1,.detail-hero h1,.category-hero h1,.error-copy h1{font-size:clamp(36px,6vw,42px)!important}
  .section-title,.about-heading,.category-head h2,.subpage-section h2,.subpage-cta h2,.article-content h2{font-size:clamp(28px,4vw,32px)!important}
  .case-body,.subpage-card-body,.simple-product-body{padding:20px!important}
}

@media(max-width:680px){
  :root{
    --type-display:38px;
    --type-h1:34px;
    --type-h2:28px;
    --type-h3:20px;
    --type-h4:17px;
    --type-lead:16px;
    --type-body-lg:15px;
    --type-body:14px;
    --type-small:12px;
    --type-caption:11px;
    --type-eyebrow:11px;
    --section-space:64px;
  }
  body{font-size:14px!important}
  .hero h1{font-size:clamp(36px,10vw,40px)!important;line-height:1.08!important;letter-spacing:-.025em!important}
  .subpage-hero h1,.about-hero-copy h1,.contact-hero-copy h1,.product-hero h1,.detail-hero h1,.category-hero h1,.error-copy h1{font-size:clamp(31px,8.5vw,36px)!important;line-height:1.12!important;letter-spacing:-.018em!important}
  .section-title,.about-heading,.category-head h2,.subpage-section h2,.subpage-cta h2,.article-content h2,.error-route-heading h2{font-size:clamp(26px,7.2vw,29px)!important;line-height:1.22!important}
  .hero-copy,.about-hero-copy>p:not(.section-kicker),.contact-hero-copy>p:not(.section-kicker),.product-hero-copy,.detail-lead,.subpage-hero>div>p:not(.subpage-breadcrumb),.error-intro{font-size:16px!important;line-height:1.7!important}
  .section-copy,.about-lead,.faq-intro,.catalog-intro,.article-content p,.article-content li{font-size:15px!important}
  .nav-link,.nav-trigger{font-size:13px!important}
  .btn{font-size:14px!important}
  .case-body,.subpage-card-body,.simple-product-body{padding:18px!important}
  .faq-question,.faq-button{font-size:15px!important;padding-top:18px!important;padding-bottom:18px!important}
  .faq-answer p,.faq-panel p{font-size:14px!important;padding-bottom:20px!important}
  .article-content h2{margin-top:40px!important}.article-content h3{margin-top:28px!important}
}

@media(max-width:420px){
  .hero h1{font-size:36px!important}
  .subpage-hero h1,.about-hero-copy h1,.contact-hero-copy h1,.product-hero h1,.detail-hero h1,.category-hero h1,.error-copy h1{font-size:31px!important}
}

/* Final minimum-size normalization for compact UI labels */
.subpage-label,
.sidebar-label,
.error-route-heading>span,
.contact-detail small,
.contact-step>span,
.process-item>span,
.related-card p,
.market-core span,
.category-filter-link small,
.sidebar-panel small,
.category-sidebar small,
.case-filter-toggle small{
  font-size:12px!important;
  line-height:1.45!important;
}
.subpage-label,.sidebar-label,.contact-step>span,.process-item>span,.related-card p,.error-route-heading>span{
  font-weight:600!important;
  letter-spacing:.08em!important;
}
.market-core span{font-size:11px!important}
@media(max-width:680px){
  .subpage-label,.sidebar-label,.error-route-heading>span,.contact-detail small,.contact-step>span,.process-item>span,.related-card p,.category-filter-link small,.sidebar-panel small,.category-sidebar small,.case-filter-toggle small{font-size:11px!important}
}
.process-item>span:first-child,
.directory-nav small{
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:600!important;
}
@media(max-width:680px){.process-item>span:first-child,.directory-nav small{font-size:11px!important}}
.application-list li>span{
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:600!important;
}
@media(max-width:680px){.application-list li>span{font-size:11px!important}}