/* ============================================================
   fun-run.co.uk — Pricing page
   Scoped to body.fr-public-pricing. Reuses the home section
   chrome from public-home.css and the .fr-pricing-card,
   .fr-faq atoms from components.css.
   ============================================================ */

/* ------------------------------------------------------------
   Mobile layout — sections use the full viewport with small
   gutters, matching the calculator and homepage.
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  body.fr-public-pricing > main {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  body.fr-public-pricing .fr-home-section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.fr-public-pricing .fr-final-cta {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* ------------------------------------------------------------
   Hero — tight, same proportions as the calculator hero.
   ------------------------------------------------------------ */
body.fr-public-pricing .fr-pricing-hero {
  text-align: center;
  padding-top: var(--fr-space-6);
  padding-bottom: var(--fr-space-7);
}
@media (max-width: 640px) {
  body.fr-public-pricing .fr-pricing-hero {
    padding-top: var(--fr-space-4);
    padding-bottom: var(--fr-space-6);
  }
}
body.fr-public-pricing .fr-pricing-hero .fr-home-section__title {
  max-width: none;
  margin-inline: auto;
}
body.fr-public-pricing .fr-pricing-hero .fr-home-section__lede {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Section headings — eyebrow and title centred on the pricing
   card section to match the card's centred layout.
   ------------------------------------------------------------ */
body.fr-public-pricing .fr-pricing-card-section {
  text-align: center;
}
body.fr-public-pricing .fr-pricing-card-section .fr-pricing-card {
  text-align: left;
}

/* Footnotes below the pricing card — small, muted, centred. */
body.fr-public-pricing .fr-pricing-card-footnotes {
  max-width: 44rem;
  margin: var(--fr-space-6) auto 0;
  text-align: center;
}
body.fr-public-pricing .fr-pricing-card-footnotes p {
  font-size: var(--fr-text-sm);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink-muted);
  margin: 0;
}
body.fr-public-pricing .fr-pricing-card-footnotes p + p {
  margin-top: var(--fr-space-3);
}
body.fr-public-pricing .fr-pricing-card-footnotes a {
  color: var(--fr-color-primary);
  font-weight: var(--fr-weight-semibold);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Editorial prose under the pricing card.
   ------------------------------------------------------------ */
body.fr-public-pricing .fr-pricing-prose {
  max-width: none;
  margin: 0;
}
body.fr-public-pricing .fr-pricing-prose p {
  font-size: var(--fr-text-md);
  line-height: var(--fr-leading-relaxed);
  color: var(--fr-color-ink);
  margin: 0 0 var(--fr-space-5);
}
body.fr-public-pricing .fr-pricing-prose p:last-of-type {
  margin-bottom: 0;
}
body.fr-public-pricing .fr-pricing-prose strong {
  color: var(--fr-color-ink);
}

/* ------------------------------------------------------------
   FAQ — left-align, full section width, tighter heading.
   ------------------------------------------------------------ */
body.fr-public-pricing .fr-home-section--cream .fr-home-section__title {
  margin-bottom: var(--fr-space-2);
}
body.fr-public-pricing .fr-faq {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
body.fr-public-pricing .fr-faq__answer p {
  max-width: none;
}

/* ------------------------------------------------------------
   Secondary link under the primary CTA in the final navy panel.
   ------------------------------------------------------------ */
body.fr-public-pricing .fr-pricing-final-cta__secondary {
  margin: var(--fr-space-5) 0 0;
  text-align: center;
}
body.fr-public-pricing .fr-pricing-final-cta__secondary a {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fr-text-base);
  font-weight: var(--fr-weight-semibold);
  text-decoration: none;
}
body.fr-public-pricing .fr-pricing-final-cta__secondary a:hover {
  color: #fff;
  text-decoration: underline;
}