/* Public type palette, v8.9.1. Keep this last, after the layout stylesheets.
 * Page titles use the homepage hero scale. Each smaller role has one shared
 * size across routes; CMS copy and rich article blocks cannot introduce a
 * different heading face or oversized paragraph. Layout and colours stay in
 * public-v2.css. Scoped rules leave business-dashboard typography unchanged.
 */
:root {
  --site-font-heading: Georgia, "Times New Roman", serif;
  --site-font-body: Inter, "Segoe UI", Arial, sans-serif;
  --site-title-size: clamp(2.25rem, 4.2vw, 4rem);
  --site-section-size: clamp(1.75rem, 3vw, 2.75rem);
  --site-card-size: clamp(1.25rem, 1.6vw, 1.5rem);
  --site-body-size: 1rem;
  --site-lead-size: 1.0625rem;
  --site-label-size: .875rem;
  --site-caption-size: .75rem;
  --site-heading-leading: 1.15;
  --site-body-leading: 1.65;
}

.site-body,
.login-body {
  --serif: var(--site-font-heading);
  --sans: var(--site-font-body);
  font-family: var(--site-font-body) !important;
  font-size: var(--site-body-size);
  line-height: var(--site-body-leading);
}

.site-body :is(h1, h2, h3, h4, h5, h6),
.login-body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--site-font-heading) !important;
  font-weight: 500;
  line-height: var(--site-heading-leading) !important;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.site-body h1,
.login-body h1 {
  font-size: var(--site-title-size) !important;
}

.site-body h2,
.login-body h2 {
  font-size: var(--site-section-size) !important;
}

.site-body :is(h3, h4, h5, h6),
.login-body :is(h3, h4, h5, h6) {
  font-size: var(--site-card-size) !important;
}

/* Carousel slides 2/3 are h2 elements for a single page h1, but all slide
 * titles, inner banners, article titles and product names share one scale. */
.site-body :is(.rice-slide-content, .inner-hero, .blog-article-header, .product-detail-grid, .hero-copy) :is(h1, h2) {
  font-family: var(--site-font-heading) !important;
  font-size: var(--site-title-size) !important;
  line-height: 1.08 !important;
  font-weight: 500;
  letter-spacing: -.035em;
}

/* Card, form and navigation headings have the same smaller role everywhere. */
.site-body :is(.blog-card, .article-grid, .contact-form-panel, dialog) h2,
.login-body .login-card h2 {
  font-size: var(--site-card-size) !important;
}
.site-body .footer-grid h3 {
  font-size: var(--site-card-size) !important;
  letter-spacing: -.025em;
  text-transform: none;
}

.site-body :is(main, .site-footer, dialog) p,
.login-body p {
  font-family: var(--site-font-body) !important;
  font-size: var(--site-body-size) !important;
  line-height: var(--site-body-leading) !important;
}
.site-body :is(.rice-slide-content, .inner-hero, .blog-article-header, .product-detail-copy) p {
  font-size: var(--site-lead-size) !important;
}
/* About-product panels and every article paragraph retain the normal role. */
.site-body .product-about-inline p,
.site-body .blog-prose p {
  font-size: var(--site-body-size) !important;
  line-height: var(--site-body-leading) !important;
}

.site-body :is(li, dt, dd, blockquote),
.site-body .blog-prose :is(ul.blog-block, blockquote.blog-block),
.site-body .blog-callout {
  font-family: var(--site-font-body) !important;
  font-size: var(--site-body-size) !important;
  line-height: var(--site-body-leading) !important;
}
.site-body .blog-prose h2 {
  font-family: var(--site-font-heading) !important;
  font-size: var(--site-section-size) !important;
}
.site-body .blog-prose :is(h3, h4, h5, h6) {
  font-family: var(--site-font-heading) !important;
  font-size: var(--site-card-size) !important;
}
.site-body :is(label, input, select, textarea),
.login-body :is(label, input, select, textarea) {
  font-family: var(--site-font-body) !important;
  font-size: var(--site-label-size) !important;
  line-height: 1.5;
}
.site-body :is(figcaption, .kicker, .product-detail-category, .blog-card-meta, .blog-byline, .footer-bottom),
.site-body .footer-bottom span {
  font-family: var(--site-font-body) !important;
  font-size: var(--site-caption-size) !important;
  line-height: 1.5;
}
.site-body .footer-grid :is(a:not(.site-brand), p),
.site-body .footer-grid > div > span {
  font-family: var(--site-font-body) !important;
  font-size: var(--site-body-size) !important;
  line-height: var(--site-body-leading);
  overflow-wrap: anywhere;
}
.site-body :is(.text-link, .blog-read-link, .back-link, .explore-band a) {
  font-family: var(--site-font-body) !important;
  font-size: var(--site-label-size);
}

@media (max-width: 620px) {
  :root {
    --site-title-size: 2.25rem;
    --site-section-size: 1.75rem;
    --site-card-size: 1.25rem;
    --site-body-size: .9375rem;
    --site-lead-size: .9375rem;
  }
}