/* Shared screen typography for the public site and B2B area. */
:root {
  --type-body: clamp(1rem, .9375rem + .125vw, 1.0625rem);
  --type-lead: clamp(1rem, .925rem + .3vw, 1.125rem);
  --type-small: clamp(.875rem, .8375rem + .125vw, .9375rem);
  --type-meta: .75rem;
  --type-label: .875rem;
  --type-hero: clamp(2.25rem, 1.45rem + 3.25vw, 4.25rem);
  --type-page: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --type-section: clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem);
  --type-card: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);
  --type-subheading: clamp(1.25rem, 1.125rem + .5vw, 1.625rem);
}

@media screen {
  body, body.portal { font-size: var(--type-body); line-height: 1.7; }
  body:not(.portal) .display, body.portal .welcome h1 {
    font-size: var(--type-hero); line-height: 1.12; letter-spacing: -.045em;
    overflow-wrap: break-word;
  }
  body.inner-page .display, body.portal h1, body.portal .panel.narrow h1 {
    font-size: var(--type-page); line-height: 1.16; letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }
  body:not(.portal) .h2, body:not(.portal) .editorial-article .h2 {
    font-size: var(--type-section); line-height: 1.2; letter-spacing: -.03em;
  }
  body:not(.portal) .brand-card h3, body:not(.portal) .detail-block h2,
  body.portal h2, body.portal legend {
    font-size: var(--type-subheading); line-height: 1.35; letter-spacing: -.02em;
  }
  body:not(.portal) .feature h3, body:not(.portal) .sample-card h3,
  body:not(.portal) .pcard-body h3, body:not(.portal) .guide-card h3,
  body:not(.portal) .video-card h3, body:not(.portal) .product-row h3,
  body.portal .trade-product h2, body.portal .steps h2 {
    font-size: var(--type-card); line-height: 1.4; letter-spacing: -.015em;
  }
  body.portal h3 { font-size: 1rem; line-height: 1.45; }
  body:not(.portal) .lead, body:not(.portal) .hero .lead, body.portal .lead {
    font-size: var(--type-lead); line-height: 1.75;
  }
  body:not(.portal) .brand-card p, body:not(.portal) .feature p,
  body:not(.portal) .story-section p, body:not(.portal) .checklist li,
  body:not(.portal) .collection-heading p, body:not(.portal) .editorial-article p,
  body:not(.portal) .detail-block p, body:not(.portal) .faq-item p,
  body:not(.portal) .faq-item summary, body:not(.portal) .guide-card p,
  body:not(.portal) .video-card p, body:not(.portal) .pcard-body p,
  body:not(.portal) .product-row p, body.portal .steps p {
    font-size: var(--type-body); line-height: 1.7;
  }
  body:not(.portal) .eyebrow, body:not(.portal) .hero .eyebrow,
  body:not(.portal) .brand-number, body:not(.portal) .catalog-cover .edition,
  body:not(.portal) .catalog-index span, body:not(.portal) .footer h4,
  body.portal .eyebrow, body.portal .trade-product .eyebrow,
  body.portal .portal-label {
    font-size: var(--type-meta); line-height: 1.55; letter-spacing: .08em;
  }
  body:not(.portal) .chip, body:not(.portal) .hero .chip,
  body:not(.portal) .tree-caption, body:not(.portal) .story-caption,
  body:not(.portal) .brand-strip-label, body:not(.portal) .catalog-cover .cover-bottom,
  body:not(.portal) .catalog-note, body:not(.portal) .form-note,
  body:not(.portal) .footer-bottom,
  body.portal small, body.portal .badge, body.portal .warning {
    font-size: var(--type-meta); line-height: 1.6;
  }
  body:not(.portal) .stat span, body:not(.portal) .pcard-link,
  body:not(.portal) .brand-card .pcard-link, body:not(.portal) .sample-card .pcard-link,
  body:not(.portal) .catalog-index div, body:not(.portal) .collection-nav a,
  body:not(.portal) .footer a, body:not(.portal) .footer-brand p,
  body:not(.portal) .form-msg[role=status], body.portal .notice,
  body.portal .check, body.portal .trade-product p, body.portal .portal-footer,
  body.portal dd, body.portal table {
    font-size: var(--type-small); line-height: 1.65;
  }
  body:not(.portal) .btn, body:not(.portal) .hero-actions .btn,
  body.portal .button, body.portal .sticky-actions .button {
    font-size: var(--type-label); line-height: 1.45;
  }
  body:not(.portal) .nav-menu a, body:not(.portal) .nav-cta,
  body:not(.portal) .lang-btn, body:not(.portal) .quick-contact a,
  body.portal .header-row nav a, body.portal .text-button {
    font-size: var(--type-label); line-height: 1.45;
  }
  body:not(.portal) .lang-menu a { font-size: var(--type-small); }
  body:not(.portal) .field label, body.portal .field > span,
  body.portal th, body.portal dt { font-size: var(--type-label); line-height: 1.5; }
  body:not(.portal) .field input, body:not(.portal) .field select,
  body:not(.portal) .field textarea, body:not(.portal) .newsletter-fields input,
  body.portal input, body.portal select, body.portal textarea {
    font-size: 1rem; line-height: 1.5;
  }
  body:not(.portal) .stat b, body.portal .steps b {
    font-size: clamp(1.875rem, 1.5rem + 1vw, 2.5rem); line-height: 1.2;
  }
  body:not(.portal) .catalog-cover strong { font-size: var(--type-section); }
  body.portal .trade-price, body.portal .totals .grand { font-size: var(--type-card); }
  body:not(.portal) .hero-grid > div, body:not(.portal) .inner-hero-grid > div,
  body:not(.portal) .feature, body:not(.portal) .sample-card,
  body.portal .welcome > div, body.portal .steps article, body.portal .trade-product > div {
    min-width: 0; overflow-wrap: break-word;
  }
  /* Cards grow with translated text rather than clipping larger type. */
  body:not(.portal) .brand-card:first-child { height: auto; min-height: 510px; }
  body:not(.portal) .brand-card:first-child .brand-card-photo { position: relative; height: auto; min-height: 0; }
  body:not(.portal) .brand-card:first-child .brand-card-photo img { position: absolute; inset: 0; }
  body:not(.portal) .brand-card-body { overflow-wrap: break-word; }
  body.portal .page-head { max-width: 980px; }
  body.portal .header-row nav { row-gap: 12px; }
  html:lang(zh) .display, html:lang(ja) .display, html:lang(hi) .display {
    line-height: 1.25; letter-spacing: 0;
  }
}

@media screen and (min-width: 721px) and (max-width: 1320px) {
  body:not(.portal) .nav-menu {
    position: fixed; inset: 88px 0 auto; display: none; flex-direction: column;
    align-items: flex-start; background: var(--cream); padding: 28px;
    border-bottom: 1px solid var(--line);
  }
  body:not(.portal) .nav-menu.open { display: flex; }
  body:not(.portal) .hamburger { display: flex; }
}
@media screen and (min-width: 1321px) {
  body:not(.portal) .nav-menu { gap: 16px; }
  body:not(.portal) .nav-inner { gap: 18px; }
}
@media screen and (max-width: 960px) {
  body:not(.portal) .brand-card:first-child { min-height: 420px; }
}
@media screen and (max-width: 720px) {
  body:not(.portal) .nav-menu a { font-size: 1rem; }
  body:not(.portal) .tree-caption { gap: 12px; flex-wrap: wrap; }
  body:not(.portal) .hero .eyebrow { max-width: 100%; }
  body.portal .header-row nav { column-gap: 12px; }
  body.portal .logo img { width: 120px; }
}
@media screen and (max-width: 480px) {
  body:not(.portal) .brand-card:first-child { min-height: 0; }
  body:not(.portal) .brand-card:first-child .brand-card-photo { height: 285px; min-height: 285px; }
  body:not(.portal) .hero-actions .btn { padding: 1em 1.1em; }
  body:not(.portal) .quick-contact a { font-size: var(--type-meta); }
  body.portal .steps { grid-template-columns: 1fr; }
  body.portal .steps article + article { border-left: 0; border-top: 1px solid var(--line); }
}