/* Small alignment and wrapping corrections for content and legal pages. */

/* Section headings sit on the same center line as their cards. */
body.education-performance-page .products-group__header {
  width:min(100%,800px);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
body.education-performance-page .products-group__header h2 {
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  text-wrap:balance;
}

/* Legal headings are document titles, with a quieter scale and safe wrapping. */
.legal-page .legal-hero h1.display {
  max-width:850px;
  font-size:clamp(2.35rem,4.5vw,3.8rem);
  line-height:1.12;
  letter-spacing:-.04em !important;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:balance;
}
.legal-page .legal-container,
.legal-page .legal-card {min-width:0}
.legal-page .legal-card p,
.legal-page .legal-card li,
.legal-page .legal-card a {overflow-wrap:anywhere}

@media(max-width:699px){
  /* Marko's longer education headline needs a little air at both sides. */
  body.education-performance-page .education-hero .products-hero-minimal__inner {
    width:min(calc(100% - 48px),520px);
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  body.education-performance-page .education-hero h1 {
    max-width:100%;
    font-size:clamp(1.72rem,7vw,2.15rem);
    line-height:1.14;
    margin:12px auto 14px;
    overflow-wrap:normal;
    word-break:normal;
  }
  body.education-performance-page .education-hero .lead {
    max-width:440px;
    margin-left:auto;
    margin-right:auto;
  }
  body.education-performance-page .products-group__header,
  body.product-category-lifestyle .products-group__header,
  body.product-category-sport .products-group__header {
    text-align:center;
  }
  body.product-category-lifestyle .products-group__header h2,
  body.product-category-sport .products-group__header h2 {
    margin-left:auto;
    margin-right:auto;
    text-wrap:balance;
  }

  .legal-page .legal-hero {padding-top:94px;padding-bottom:28px}
  .legal-page .legal-hero .legal-container {
    width:min(calc(100% - 36px),900px);
    text-align:center;
  }
  .legal-page .legal-hero h1.display {
    max-width:100%;
    margin:10px auto 16px;
    font-size:clamp(1.72rem,7.5vw,2.4rem);
    line-height:1.13;
  }
  .legal-page .legal-hero .legal-intro {margin-left:auto;margin-right:auto}
  .legal-page .legal-switch {overflow-wrap:anywhere}
}