/* Shared type scale for the public site. */
@media (min-width: 681px) {
  h1,
  main h1,
  .hero h1,
  .page-hero h1,
  .article-hero h1,
  .news-hero h1 {
    font-size: clamp(2rem, 3.15vw, 3.35rem) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  main h2,
  .section-head h2 {
    font-size: clamp(1.65rem, 2.5vw, 2.55rem) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 680px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body > *,
  nav,
  header,
  main,
  section,
  article,
  footer,
  .nav,
  .site-nav,
  .hero,
  .section,
  .inner,
  .container,
  .wrap,
  .grid,
  .cards,
  .card,
  .news-card,
  .article-card,
  .story-card,
  .media-card,
  .award-card,
  .feature-card,
  .panel,
  .hero-copy,
  .section-head,
  .nav-links,
  .article-body,
  .post-body,
  .content,
  .content-grid,
  .news-grid,
  .article-grid,
  .updates-grid,
  .media-grid,
  .story-grid,
  .feature-grid,
  .split,
  .two-column {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero,
  .section,
  main > section,
  article,
  .article-body,
  .post-body,
  .content {
    overflow: hidden;
  }

  .hero,
  .section {
    padding-left: clamp(16px, 5vw, 22px);
    padding-right: clamp(16px, 5vw, 22px);
  }

  .grid,
  .cards,
  .content-grid,
  .story-grid,
  .media-grid,
  .news-grid,
  .article-grid,
  .updates-grid,
  .split,
  .two-column,
  .feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card,
  .news-card,
  .article-card,
  .story-card,
  .media-card,
  .award-card,
  .feature-card,
  .panel,
  .update-card,
  .plan-card,
  .case-card,
  .blog-card,
  .message-card {
    overflow: hidden;
    padding-left: clamp(18px, 5vw, 24px) !important;
    padding-right: clamp(18px, 5vw, 24px) !important;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  button,
  .btn,
  .button,
  .pill,
  .tag,
  .badge,
  .eyebrow,
  .lead,
  .card-title,
  .section-head p,
  .card p,
  .article-body p,
  .post-body p {
    max-width: 100%;
    min-width: 0;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: auto;
    text-wrap: auto;
  }

  h1,
  .hero h1,
  .article-title {
    font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .section-head h2 {
    font-size: clamp(1.42rem, 5.8vw, 1.95rem) !important;
    line-height: 1.32 !important;
    letter-spacing: 0 !important;
  }

  h3,
  .card h3,
  .news-card h3,
  .article-card h3,
  .update-card h3,
  .plan-card h3,
  .media-card h3,
  .case-card h3 {
    font-size: clamp(1.12rem, 4.9vw, 1.45rem) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }

  p,
  li,
  .lead,
  .section-head p,
  .card p,
  .article-body p,
  .post-body p {
    font-size: clamp(0.95rem, 4vw, 1.06rem) !important;
    line-height: 1.75 !important;
  }

  .hero-title-line,
  .story-title-line,
  .award-title-line,
  .title-line,
  .peili-title-line {
    display: inline !important;
  }

  .nav,
  .site-nav,
  .nav-links {
    overflow-x: hidden;
  }

  .nav-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch;
    gap: 8px;
  }

  .nav-links a,
  .nav-links .button {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 7px 8px;
    text-align: center;
  }

  .btn,
  .button,
  .back-link,
  .card-link,
  .hero-actions a,
  .actions a,
  .link-button {
    max-width: 100%;
    min-width: 0;
    white-space: normal !important;
    text-align: center;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .carousel,
  .carousel-track,
  .slider,
  .slides {
    max-width: 100%;
    overflow: hidden;
  }

  .carousel-slide,
  .slide {
    min-width: 0;
    max-width: 100%;
  }

  .peili-formula,
  .formula,
  .quote,
  .callout {
    max-width: 100%;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  h1,
  .hero h1,
  .article-title {
    font-size: clamp(1.6rem, 7.2vw, 2.1rem) !important;
    line-height: 1.28 !important;
  }

  h2,
  .section-head h2 {
    font-size: clamp(1.3rem, 6vw, 1.72rem) !important;
    line-height: 1.35 !important;
  }

  h3,
  .card h3,
  .news-card h3,
  .article-card h3,
  .update-card h3,
  .plan-card h3,
  .media-card h3,
  .case-card h3 {
    font-size: clamp(1.05rem, 5vw, 1.28rem) !important;
    line-height: 1.45 !important;
  }

  .card,
  .news-card,
  .article-card,
  .story-card,
  .media-card,
  .award-card,
  .feature-card,
  .panel,
  .update-card,
  .plan-card,
  .case-card,
  .blog-card,
  .message-card {
    padding: 18px !important;
  }

  .hero-actions,
  .actions,
  .button-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Extra guard for narrow in-app browsers. */
@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  main,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  .site-shell,
  .section-inner,
  .container,
  .wrap,
  .section,
  .hero,
  .hero-grid,
  .hero-copy,
  .hero-card,
  .hero-media,
  .visual-grid,
  .visual-card,
  .award-panel,
  .award-copy,
  .award-map,
  .peili-panel,
  .peili-intro,
  .peili-photo,
  .peili-links,
  .peili-formula,
  .plans-grid,
  .impact-grid,
  .contact,
  .story-band,
  .story-panel,
  .activity-feature,
  .activity-copy,
  .home-impact .section-inner,
  .legacy-list,
  .news-actions,
  .section-actions,
  .home-updates,
  .home-peili,
  .home-award,
  .updates-grid,
  .media-grid,
  .news-grid,
  .latest-grid,
  .cards-grid,
  .card-grid,
  .blog-grid,
  .post-grid,
  .article-hero,
  .article-header,
  .article-content,
  .article-layout,
  .update-card,
  .case-card,
  .plan-card,
  .media-card,
  .article-card,
  .news-card,
  .blog-card,
  .message-card,
  .contact-card,
  .plan-section,
  .quote-section,
  .event-section,
  .card,
  .panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-grid,
  .visual-grid,
  .award-panel,
  .peili-panel,
  .content-grid,
  .article-layout,
  .post-grid,
  .blog-grid,
  .contact,
  .story-band,
  .activity-feature,
  .home-impact .section-inner,
  .plans-grid,
  .impact-grid,
  .media-grid,
  .updates-grid,
  .news-grid,
  .latest-grid,
  .cards-grid,
  .card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-actions,
  .section-actions,
  .news-actions,
  .actions,
  .link-row,
  .meta-row,
  .filters,
  .pill-row,
  .tag-row,
  .cta-row,
  .peili-formula {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .hero-actions,
  .section-actions,
  .news-actions,
  .actions {
    align-items: stretch !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .hero-actions > *,
  .section-actions > *,
  .news-actions > *,
  .actions > * {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .btn,
  button,
  .card-link,
  .pill,
  .tag,
  .chip {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  button,
  .btn,
  .pill,
  .eyebrow,
  .section-kicker,
  .card-title,
  .article-title,
  .news-title,
  .hero-title-line,
  .story-title-line,
  .award-title-line,
  .title-line {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-break: strict !important;
  }

  .hero h1,
  .hero-card h1,
  .article-hero h1,
  .article-title,
  .news-hero h1,
  .page-hero h1 {
    font-size: clamp(1.52rem, 6.2vw, 2.05rem) !important;
    line-height: 1.34 !important;
  }

  .update-card h3,
  .media-card h3,
  .article-card h3,
  .case-card h3,
  .award-copy h2,
  .peili-intro h2,
  .visual-card h2,
  .story-panel h2,
  .activity-copy h2,
  .plan-card h3,
  .news-card h3 {
    font-size: clamp(1.08rem, 4.9vw, 1.42rem) !important;
    line-height: 1.46 !important;
  }

  .update-card p,
  .media-card p,
  .article-card p,
  .case-card p,
  .hero p,
  .peili-intro p,
  .visual-card p,
  .story-panel p,
  .activity-copy p,
  .plan-card p,
  .news-card p {
    font-size: clamp(0.94rem, 3.7vw, 1.02rem) !important;
    line-height: 1.78 !important;
  }

  img,
  video,
  iframe,
  picture {
    max-width: 100% !important;
  }

  .brand,
  .brand-logo {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-fab,
  a.home-fab {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 430px) {
  .hero h1,
  .hero-card h1,
  .article-hero h1,
  .article-title,
  .news-hero h1,
  .page-hero h1,
  h1 {
    font-size: clamp(1.42rem, 7vw, 1.88rem) !important;
    line-height: 1.38 !important;
  }

  .update-card h3,
  .media-card h3,
  .article-card h3,
  .case-card h3,
  .award-copy h2,
  .peili-intro h2,
  .visual-card h2,
  .story-panel h2,
  .activity-copy h2,
  .plan-card h3,
  .news-card h3 {
    font-size: clamp(1.02rem, 5.4vw, 1.34rem) !important;
    line-height: 1.48 !important;
  }

  .home-peili .peili-intro h2,
  #peili-system h2 {
    font-size: clamp(1.18rem, 5.6vw, 1.45rem) !important;
  }

  .home-peili .peili-intro {
    overflow: hidden !important;
  }

  .home-peili .peili-title,
  #peili-system .peili-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.42 !important;
  }

  .home-peili .peili-title-line,
  #peili-system .peili-title-line {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .hero-title-line,
  .story-title-line,
  .award-title-line {
    display: block !important;
  }

  .nav {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-links {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links a {
    flex: 0 0 auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .card,
  .news-card,
  .article-card,
  .story-card,
  .media-card,
  .award-card,
  .feature-card,
  .panel,
  .update-card,
  .plan-card,
  .case-card,
  .blog-card,
  .message-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 390px) {
  .peili-intro h2,
  .award-copy h2,
  .visual-card h2,
  .story-panel h2,
  .activity-copy h2 {
    font-size: 1.25rem !important;
  }

  .update-card h3,
  .media-card h3,
  .article-card h3,
  .case-card h3,
  .plan-card h3,
  .news-card h3 {
    font-size: 1.06rem !important;
  }

  .hero-actions > *,
  .section-actions > *,
  .news-actions > *,
  .actions > * {
    flex: 1 1 100% !important;
  }

  .home-peili .peili-title,
  #peili-system .peili-title {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 380px) {
  h2 {
    font-size: 20.5px !important;
  }
}