/* Shared layout contract for Wagtail marketing blocks.
   Keep structural behavior here so blocks render consistently across
   whichever site-wide base template CSS is active. */

.page-section {
  position: relative;
  padding: 3rem 0;
}

.hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 32rem;
  padding: 5rem 0;
  background: var(--color-background, #ffffff);
  color: var(--color-text, #212529);
}

/* Neutralize vendor pseudo-element treatments so the hero behaves the same
   regardless of which base stylesheet is loaded underneath. */
.hero-section::after {
  content: none !important;
}

.hero-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Subtle overlay keeps foreground content readable over image backgrounds. */
.hero-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28));
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}

.hero-section__eyebrow,
.hero-section__heading,
.hero-section__subheading,
.hero-section__ctas {
  position: relative;
  z-index: 1;
}

.hero-section__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
  color: inherit;
}
h1.hero-section__heading { font-size: calc(1.475rem + 2.7vw); } /* display-4 */
h2.hero-section__heading { font-size: calc(1.425rem + 2.1vw); } /* display-5 */
h3.hero-section__heading { font-size: calc(1.375rem + 1.5vw); } /* display-6 */
h4.hero-section__heading { font-size: 2rem; }

.hero-section__subheading {
  font-family: var(--font-body, Roboto, sans-serif);
  color: inherit;
  max-width: 44rem;
}

/* Shared marketing button component (theme-token-driven).
   Used by any page-builder block button: hero, cta, feature grid, image + text, faq. */
.marketing-btn--primary,
.marketing-btn--outline {
  border-radius: 8px;
  padding: 12px 32px;
  letter-spacing: 0.04em;
}

.marketing-btn--primary {
  background-color: var(--color-primary, #0d6efd);
  border-color: var(--color-primary, #0d6efd);
  color: #ffffff;
}

.marketing-btn--primary:hover,
.marketing-btn--primary:focus {
  color: #ffffff;
}

.marketing-btn--outline {
  background-color: transparent;
  color: var(--color-text, #212529);
  border-color: currentColor;
}

.marketing-btn--outline.marketing-btn--on-dark {
  color: #ffffff;
  border-color: #ffffff;
}

/* Inverted primary button so it still stands out against a colored or dark
   section background instead of blending into it. */
.marketing-btn--primary.marketing-btn--on-dark {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--color-primary, #0d6efd);
}

.marketing-btn--primary.marketing-btn--on-dark:hover,
.marketing-btn--primary.marketing-btn--on-dark:focus {
  color: var(--color-primary, #0d6efd);
}

.hero-section--tone-dark {
  color: #ffffff;
}

.hero-section--tone-dark .hero-section__heading {
  color: var(--color-heading-inverse, #ffffff);
}

.hero-section--layout-center .hero-section__subheading {
  margin-left: auto;
  margin-right: auto;
}

.hero-section--height-md {
  min-height: 28rem;
}

.hero-section--height-lg {
  min-height: 36rem;
}

.hero-section--height-xl {
  min-height: 42rem;
}

@media (max-width: 991.98px) {
  .hero-section {
    min-height: 24rem;
    padding: 4rem 0;
  }

  .hero-section--height-lg,
  .hero-section--height-xl {
    min-height: 30rem;
  }
}

/* CTA section: background/text treatment per Appearance → tone.
   tone-default is intentionally untouched, blending into the page background. */
.cta-section--tone-brand {
  background: var(--color-primary, #0d6efd);
  color: var(--color-text-inverse, #ffffff);
}

.cta-section--tone-dark {
  background: var(--color-text, #212529);
  color: var(--color-text-inverse, #ffffff);
}

.cta-section--tone-brand .cta-section__heading,
.cta-section--tone-dark .cta-section__heading {
  color: var(--color-heading-inverse, #ffffff);
}

/* ============================================================
   Glide.js core CSS
   Extracted from material-kit-pro.css so both base templates
   get carousel support regardless of which kit CSS is loaded.
   ============================================================ */
.glide {
    position: relative;
    width: 100%;
    box-sizing: border-box
}

.glide * {
    box-sizing: inherit
}

.glide__slides,
.glide__track {
    overflow: hidden
}

.glide__slides {
    position: relative;
    width: 100%;
    list-style: none;
    backface-visibility: hidden;
    touch-action: pan-Y;
    padding: 0;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    padding: 40px 0
}

.glide__slide,
.glide__slides--dragging {
    user-select: none
}

.glide__slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    white-space: normal;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.glide__slide a {
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.glide__arrows,
.glide__bullets {
    -webkit-touch-callout: none;
    user-select: none
}

.glide--rtl {
    direction: rtl
}

.glide__arrow {
    position: absolute;
    display: block;
    top: 50%;
    z-index: 2;
    color: #fff;
    text-transform: uppercase;
    padding: 9px 12px;
    background-color: transparent;
    border: 2px solid hsla(0, 0%, 100%, .5);
    border-radius: 4px;
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
    text-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
    opacity: 1;
    cursor: pointer;
    transition: opacity .15s ease, border .3s ease-in-out;
    transform: translateY(-50%);
    line-height: 1
}

.glide__arrow:focus {
    outline: none
}

.glide__arrow:hover {
    border-color: #fff
}

.glide__arrow--left {
    left: 2em
}

.glide__arrow--right {
    right: 2em
}

.glide__arrow--disabled {
    opacity: .33
}

.glide__bullets {
    position: absolute;
    z-index: 2;
    bottom: 2em;
    left: 50%;
    display: inline-flex;
    list-style: none;
    transform: translateX(-50%)
}

.glide__bullet {
    background-color: hsla(0, 0%, 100%, .5);
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all .3s ease-in-out;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .1);
    margin: 0 .25em
}

.glide__bullet:focus {
    outline: none
}

.glide__bullet:focus,
.glide__bullet:hover {
    border: 2px solid #fff;
    background-color: hsla(0, 0%, 100%, .5)
}

.glide__bullet--active {
    background-color: #fff
}

.glide--swipeable {
    cursor: grab;
    cursor: -webkit-grab
}

.glide--dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.glide__slides {
    overflow: visible;
    transform-style: preserve-3d
}

.glide__slide {
    transform: perspective(2000px)
}

.glide__container {
    border: 1px solid #f0f2f5;
    border-radius: .75rem;
    transition: all .5s ease;
    will-change: transform;
    transform-style: preserve-3d;
    position: relative
}

/* FAQ is intentionally tighter than the shared page-section rhythm. */
.faq-section {
  padding: 1.5rem 0;
}

/* FAQ accordion (StreamField faq). Bootstrap collapse drives open/close; the look is theme-token driven
   and overrides the vendor .accordion-* colors and the Material Kit plus/minus icon swap. */
.faq-section__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
}

.faq-accordion--1col {
  max-width: 52rem;
  margin-inline: auto;
}

/* Two classes so this beats the base CSS's .accordion-item box (Aero's app-saas draws a full border, radius and
   white background; Material Kit draws none), leaving one divider under each item on every shell. */
.faq-accordion .faq-item {
  border: 0;
  border-bottom: 1px solid var(--color-border, #dee2e6);
  border-radius: 0;
  background-color: transparent;
}

.faq-item__header {
  margin: 0;
  font-size: 1.05rem;
}

.faq-accordion .faq-item__question {
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--font-body, Roboto, sans-serif);
  font-size: inherit !important;
  font-weight: 700;
  color: var(--color-heading, #212529);
  text-align: start;
}

.faq-accordion .faq-item__question:not(.collapsed) {
  color: var(--color-primary, #0d6efd);
}

.faq-accordion .faq-item__question:focus-visible {
  outline: 2px solid var(--color-focus, #0d6efd);
  outline-offset: 2px;
}

/* Hide the vendor chevron; the toggle span draws a plus that becomes a minus. */
.faq-accordion .faq-item__question::after {
  content: none;
}

.faq-item__question-text {
  flex: 1 1 auto;
}

.faq-item__toggle {
  position: relative;
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 0.2s ease-in-out;
}

.faq-item__toggle::after {
  transform: rotate(90deg);
}

.faq-item__question:not(.collapsed) .faq-item__toggle::after {
  transform: rotate(0deg);
}

.faq-item__answer {
  padding: 0 0 1.25rem;
  color: var(--color-text-muted, #6c757d);
}

.faq-item__answer > :last-child {
  margin-bottom: 0;
}

/* A section text color replaces the brand open-state color, which may not read on a custom background. */
.page-section--custom-text .faq-item__question:not(.collapsed) {
  color: var(--color-heading);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__toggle::before,
  .faq-item__toggle::after {
    transition: none;
  }
}

/* Logo / text carousel block (StreamField logo_carousel) */
.marketing-carousel__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
  font-weight: 600;
}

.marketing-glide-wrapper {
  position: relative;
  padding: 0 2.75rem;
}

.marketing-glide .glide__slides {
  padding: 1.25rem 0;
}

.marketing-carousel__slide-inner {
  padding: 0.75rem 0.5rem;
}

.marketing-carousel__slide-img {
  max-height: 4rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.marketing-carousel__slide-label {
  font-size: 0.95rem;
  color: var(--color-text, #212529);
}

.marketing-carousel__arrows {
  margin: 0;
}

.marketing-carousel-section .marketing-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: var(--color-text, #212529);
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.marketing-carousel-section .marketing-carousel__arrow:hover,
.marketing-carousel-section .marketing-carousel__arrow:focus-visible {
  opacity: 0.4;
  border: 0;
  color: var(--color-text, #212529);
}

.marketing-carousel-section .marketing-carousel__arrow:focus-visible {
  outline: 2px solid var(--color-primary, #0d6efd);
  outline-offset: 2px;
}

.marketing-carousel-section .glide__arrow--left {
  left: -2.5rem;
}

.marketing-carousel-section .glide__arrow--right {
  right: -2.5rem;
}

.marketing-carousel__arrow-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* Optional clickable logo link (CarouselSlideBlock.link) */
.marketing-carousel__slide-link {
  display: inline-block;
}

.marketing-carousel__slide-link:hover .marketing-carousel__slide-img,
.marketing-carousel__slide-link:focus-visible .marketing-carousel__slide-img {
  opacity: 0.85;
}

/* Feature grid: optional whole-card link (FeatureItemBlock.card_link) stretches over the
   card via Bootstrap's .stretched-link; the real button, if present, stays above it. */
.feature-item-card {
  position: relative;
}

.feature-item-card .btn {
  position: relative;
  z-index: 2;
}

/* Feature icons follow the theme text tokens, not the vendor .text-primary color. */
.feature-item__icon {
  color: var(--color-text, #212529);
}

.text-white .feature-item__icon,
.bg-dark .feature-item__icon,
.bg-primary .feature-item__icon {
  color: var(--color-text-inverse, #ffffff);
}

/* Inline contact form block (StreamField inline_contact) */
.marketing-contact__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
}

/* Theme-token form fields; Aero sites use .aero-form from cinco_aero.css instead. */
.marketing-form .form-label {
  font-family: var(--font-body, Roboto, sans-serif);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text, #212529);
  margin-bottom: 6px;
}

.marketing-form .form-control {
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--border-radius, 0.375rem);
  font-family: var(--font-body, Roboto, sans-serif);
  font-size: 0.9rem;
  padding: 12px 16px;
  background-color: var(--color-surface, #ffffff);
  color: var(--color-text, #212529);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.marketing-form .form-control::placeholder {
  color: var(--color-text-muted, #6c757d);
}

.marketing-form .form-control:focus {
  border-color: var(--color-focus, #0d6efd);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus, #0d6efd) 15%, transparent);
  background-color: var(--color-surface, #ffffff);
  color: var(--color-text, #212529);
  outline: none;
}

/* ============================================================
   Feature comparison block (StreamField feature_comparison).
   Theme-token driven; the banner header is optional and only then do
   the cards pull up over it.
   ============================================================ */
.feature-compare__header {
  max-width: 48rem;
  margin: 0 auto 2.5rem;
}

.feature-compare__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
}

.feature-compare__eyebrow {
  color: var(--color-primary, #0d6efd);
  letter-spacing: 0.06em;
}

.feature-compare__intro {
  color: var(--color-text-muted, #6c757d);
}

.feature-compare__banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 1rem;
  padding: 4rem 0 8rem;
  border-radius: calc(var(--border-radius, 0.375rem) * 2);
  color: var(--color-text-inverse, #ffffff);
}

.feature-compare__banner--tone-dark {
  background-color: var(--color-heading, #212529);
}

.feature-compare__banner--tone-brand {
  background-color: var(--color-primary, #0d6efd);
}

.feature-compare__banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Tone overlay over the image keeps the header readable. */
.feature-compare__banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.7;
}

.feature-compare__banner--tone-dark .feature-compare__banner-bg::after {
  background-color: var(--color-heading, #212529);
}

.feature-compare__banner--tone-brand .feature-compare__banner-bg::after {
  background-color: var(--color-primary, #0d6efd);
}

.feature-compare__banner .feature-compare__header {
  margin-bottom: 0;
}

.feature-compare__banner .feature-compare__heading {
  color: var(--color-heading-inverse, #ffffff);
}

.feature-compare__banner .feature-compare__eyebrow,
.feature-compare__banner .feature-compare__intro {
  color: var(--color-text-inverse, #ffffff);
}

.feature-compare__banner .feature-compare__intro {
  opacity: 0.85;
}

.feature-compare__cards--overlap {
  position: relative;
  z-index: 1;
  margin-top: -6rem;
}

@media (max-width: 767.98px) {
  .feature-compare__banner {
    margin: 0 0.5rem;
    padding: 3rem 0 6rem;
  }

  .feature-compare__cards--overlap {
    margin-top: -4rem;
  }
}

.feature-compare-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem 1.75rem;
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: calc(var(--border-radius, 0.375rem) * 2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  color: var(--color-text, #212529);
  font-family: var(--font-body, Roboto, sans-serif);
  text-align: center;
}

.feature-compare-card__badge {
  align-self: center;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background-color: var(--color-surface-muted, #f8f9fa);
  color: var(--color-text, #212529);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feature-compare-card__headline {
  margin: 1rem 0 0;
  font-family: var(--font-heading, "Roboto Slab", serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading, #212529);
}

.feature-compare-card__description {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted, #6c757d);
}

.feature-compare-card__features {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.feature-compare-card__feature {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border, #dee2e6);
}

.feature-compare-card__feature:first-child {
  border-top: 0;
}

.feature-compare-card__icon {
  flex: 0 0 1rem;
  color: var(--color-primary, #0d6efd);
  font-size: 0.85rem;
}

.feature-compare-card__feature--excluded {
  color: var(--color-text-muted, #6c757d);
  opacity: 0.7;
}

.feature-compare-card__feature--excluded .feature-compare-card__icon {
  color: inherit;
}

.feature-compare-card__action {
  margin-top: auto;
  padding-top: 1.5rem;
}

.feature-compare-card--highlight {
  background-color: var(--color-primary, #0d6efd);
  border-color: var(--color-primary, #0d6efd);
  color: var(--color-text-inverse, #ffffff);
}

.feature-compare-card--highlight .feature-compare-card__badge {
  background-color: var(--color-text-inverse, #ffffff);
  color: var(--color-primary, #0d6efd);
}

.feature-compare-card--highlight .feature-compare-card__headline {
  color: var(--color-heading-inverse, #ffffff);
}

.feature-compare-card--highlight .feature-compare-card__description,
.feature-compare-card--highlight .feature-compare-card__feature--excluded,
.feature-compare-card--highlight .feature-compare-card__icon {
  color: var(--color-text-inverse, #ffffff);
}

.feature-compare-card--highlight .feature-compare-card__feature {
  border-top-color: color-mix(in srgb, var(--color-text-inverse, #ffffff) 25%, transparent);
}

/* ============================================================
   Content table (StreamField `table`; shared by marketing, product and
   Docs pages). Theme-token driven; the wrapper scrolls sideways so a
   wide table never widens the page.
   ============================================================ */
.table-section--narrow .table-section__inner {
  max-width: 52rem;
  margin: 0 auto;
}

.table-section__header {
  margin-bottom: 1.5rem;
}

.table-section__heading {
  font-family: var(--font-heading, "Roboto Slab", serif);
}

.table-section__eyebrow {
  color: var(--color-primary, #0d6efd);
  letter-spacing: 0.06em;
}

.table-section__intro {
  color: var(--color-text-muted, #6c757d);
}

.content-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body, Roboto, sans-serif);
  font-size: 0.95rem;
  color: var(--color-text, #212529);
}

.content-table caption {
  caption-side: top;
  padding: 0 0 0.5rem;
  font-weight: 600;
  color: var(--color-heading, #212529);
}

.content-table th,
.content-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border, #dee2e6);
  background-color: var(--color-surface, #ffffff);
}

.content-table thead th {
  background-color: var(--color-surface-muted, #f8f9fa);
  border-bottom: 2px solid var(--color-border, #dee2e6);
  font-family: var(--font-heading, "Roboto Slab", serif);
  font-weight: 700;
  color: var(--color-heading, #212529);
  white-space: nowrap;
}

.content-table tbody th {
  font-weight: 700;
  color: var(--color-heading, #212529);
}

.content-table td > :last-child,
.content-table th > :last-child {
  margin-bottom: 0;
}

.content-table code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--color-surface-muted, #f8f9fa);
  font-size: 0.875em;
}

.content-table__cell--numeric {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.content-table__cell--checkmark {
  text-align: center !important;
}

.content-table__check {
  color: var(--color-primary, #0d6efd);
}

.content-table__dash {
  color: var(--color-text-muted, #6c757d);
  opacity: 0.6;
}

.content-table--striped tbody tr:nth-child(even) > * {
  background-color: var(--color-surface-muted, #f8f9fa);
}

.content-table--bordered {
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--border-radius, 0.375rem);
}

.content-table--bordered th,
.content-table--bordered td {
  border-right: 1px solid var(--color-border, #dee2e6);
}

.content-table--bordered tr > :last-child {
  border-right: 0;
}

.content-table--bordered tbody tr:last-child > * {
  border-bottom: 0;
}

.content-table--compact th,
.content-table--compact td {
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}

/* On a phone, cells keep a readable width (the table scrolls instead of squeezing), and row headings stay in view. */
@media (max-width: 767.98px) {
  .content-table th,
  .content-table td {
    min-width: 7.5rem;
  }

  .content-table--row-headings tbody th,
  .content-table--row-headings thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--color-border, #dee2e6);
  }
}

/* ============================================================
   Section style overrides (SectionOptionsBlock font / text_color /
   background_color). section_wrapper.html adds the modifier classes and
   --section-* properties; re-pointing the theme tokens inside the section
   makes every token-driven rule (headings, buttons, icons, hero/CTA tones)
   follow. Cards restore the theme values so their text stays readable.
   ============================================================ */
:root {
  --theme-color-text: var(--color-text, #212529);
  --theme-color-text-muted: var(--color-text-muted, #6c757d);
  --theme-color-text-inverse: var(--color-text-inverse, #ffffff);
  --theme-color-heading: var(--color-heading, #212529);
  --theme-color-heading-inverse: var(--color-heading-inverse, #ffffff);
  --theme-font-body: var(--font-body, Roboto, sans-serif);
  --theme-font-heading: var(--font-heading, "Roboto Slab", serif);
}

/* Two classes so the override beats single-class tone rules such as .hero-section--tone-dark. */
.page-section.page-section--custom-text {
  --color-text: var(--section-text);
  --color-text-muted: color-mix(in srgb, var(--section-text) 70%, transparent);
  --color-text-inverse: var(--section-text);
  --color-heading: var(--section-text);
  --color-heading-inverse: var(--section-text);
  color: var(--section-text);
}

.page-section--custom-text :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: var(--color-heading);
}

/* Bootstrap's .text-muted is !important, so the faded section color has to be too. */
.page-section--custom-text .text-muted {
  color: var(--color-text-muted) !important;
}

.page-section.page-section--custom-bg {
  --color-background: var(--section-bg);
  background-color: var(--section-bg);
}

.page-section.page-section--custom-font {
  --font-body: var(--section-font);
  --font-heading: var(--section-font);
  font-family: var(--section-font);
}

.page-section--custom-font :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-heading);
}

.page-section--custom-text .card,
.page-section--custom-font .card,
.page-section--custom-text .feature-compare-card,
.page-section--custom-font .feature-compare-card,
.page-section--custom-text .content-table-wrap,
.page-section--custom-font .content-table-wrap {
  --color-text: var(--theme-color-text);
  --color-text-muted: var(--theme-color-text-muted);
  --color-text-inverse: var(--theme-color-text-inverse);
  --color-heading: var(--theme-color-heading);
  --color-heading-inverse: var(--theme-color-heading-inverse);
  --font-body: var(--theme-font-body);
  --font-heading: var(--theme-font-heading);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Per-card overrides on the feature comparison block (Card style). They come after the
   section restore above so a card's own choice wins over both the theme and the section. */
.feature-compare-card.feature-compare-card--custom-text {
  --color-text: var(--section-text);
  --color-text-muted: color-mix(in srgb, var(--section-text) 70%, transparent);
  --color-text-inverse: var(--section-text);
  --color-heading: var(--section-text);
  --color-heading-inverse: var(--section-text);
  color: var(--section-text);
}

.feature-compare-card.feature-compare-card--custom-bg {
  background-color: var(--section-bg);
  border-color: var(--section-bg);
}

.feature-compare-card.feature-compare-card--custom-font {
  --font-body: var(--section-font);
  --font-heading: var(--section-font);
  font-family: var(--section-font);
}

/* The badge's light fill would hide a custom (often light) text color; tint it from that color instead. */
.feature-compare-card--custom-text:not(.feature-compare-card--highlight) .feature-compare-card__badge {
  background-color: color-mix(in srgb, var(--section-text) 15%, transparent);
}