/* Petronic: Sora over the theme's font settings, light display headings, rounded white tiles on warm grey. */
:root {
  --font-heading-family: "Sora", "Poppins", system-ui, sans-serif;
  --font-body-family: "Sora", "Poppins", system-ui, sans-serif;
  --font-heading-weight: 600;
  --petronic-ink: #1c1f22;
  --petronic-stone: #eeece8;
  --petronic-muted: #5b6168;
  --petronic-teal: #1f8a86;
}

body {
  letter-spacing: 0.01em;
}

h1, h2, h3, .h0, .h1, .h2, .hxl, .hxxl {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Display headings are set light, with any bold run in semibold, as on the hero. */
.banner__heading,
.image-with-text__heading,
.rich-text__heading {
  font-weight: 300;
  line-height: 1.08;
}
.banner__heading strong,
.image-with-text__heading strong,
.rich-text__heading strong {
  font-weight: 600;
}
.banner__heading {
  max-width: 15ch;
}
.banner__box .banner__text {
  max-width: 30ch;
}
.banner__text .subtitle,
.banner__text p {
  color: var(--petronic-muted);
}

.caption-with-letter-spacing {
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--petronic-teal);
}

.header__heading-logo {
  height: auto;
}
.header__menu-item {
  font-size: 1.4rem;
}

/* Benefit tiles: each column a white rounded card. */
.multicolumn .multicolumn-card {
  background: #fff;
  border-radius: 18px;
  padding: 2.4rem 2rem;
  height: 100%;
}
.multicolumn .multicolumn-card__info {
  padding: 0;
}
.multicolumn .multicolumn-card__info h3 {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.multicolumn .multicolumn-card__info .rte {
  color: var(--petronic-muted);
}

.card__heading {
  font-weight: 600;
  letter-spacing: 0;
}
.price {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.image-with-text__media {
  border-radius: 22px;
  overflow: hidden;
}

/* The dark closing band reads as an object, not a full-bleed stripe. */
.rich-text.color-scheme-3 .rich-text__wrapper {
  padding-block: 1rem;
}

.footer {
  border-top: 1px solid rgba(28, 31, 34, 0.08);
}

@media screen and (max-width: 749px) {
  .banner__heading {
    max-width: none;
  }
  .multicolumn .multicolumn-card {
    padding: 2rem 1.6rem;
  }
}