/*
 * Shared vertical page rhythm. Change the spacing token here only.
 * Important declarations in this named layer take precedence over page CSS,
 * including unlayered !important rules. Components own their internal padding;
 * they must not add space outside a top-level section.
 */
@layer page-rhythm {
  main > [hidden] { display: none !important; }
  :root { --section-gap: calc(2 * var(--page-gutter)) !important; }
  main {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--section-gap) !important;
    padding-block: 0 !important;
    margin-block: 0 !important;
  }
  main > * {
    flex-shrink: 0 !important;
    margin-block: 0 !important;
  }
  main > section,
  main > nav {
    padding-block: 0 !important;
  }
  /* These wrappers are the visible panel edges, not extra section spacing. */
  main > section > :is(.vacation-wrapper, .carousel-wrapper, .marquee) {
    margin-block: 0 !important;
  }
  body > .footer {
    margin-top: calc(var(--section-gap) / 2) !important;
    padding-top: calc(var(--section-gap) / 2) !important;
  }
}

/* Padding inside filled panels stays separate from the shared outside gap. */
main > :is(#pricing, #about, #karate-achievements, #contact-us, #studio) > .wrap {
  padding-block: var(--section-padding);
}
main > .book-bar > .book-container { padding-block: .875rem; }

/* The athlete panel uses the same content inset as the other filled panels. */
#karate-achievements > .wrap {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-rail-width));
}

/* Shared price hierarchy: amount, unit, then monthly commitment. */
.pricing-card .pricing-lead { gap: .5rem; padding-top: 0; }
.pricing-card .pricing-lead > span,
.pricing-card .pricing-lead > small { line-height: 1.45; }
.pricing-card .pricing-lead .pricing-prefix {
  font-family: var(--font-body);
  font-size: var(--type-body-note-size);
  font-weight: var(--type-body-weight);
  vertical-align: baseline;
}
.pricing-card .pricing-lead .pricing-monthly {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: .5rem;
  padding: .48rem .72rem;
  border: .0625rem solid var(--color-ink);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  line-height: 1.4;
  text-transform: uppercase;
}