@import url("/theme.css");

/* Homepage hierarchy for every other page. Loaded last by sync_site_layout.py
   and both generators. Semantic headings provide the default; compact cards
   and long-form content use the same subordinate scale as homepage features. */
main.site-page {
  --ink: var(--color-ink);
  --ink-soft: rgba(var(--color-ink-rgb), .8);
  --muted: rgba(var(--color-ink-rgb), .68);
  --muted-soft: var(--muted);
  --accent: var(--color-brand);
  --section-py: var(--section-space);
  color: var(--ink);
  font-size: var(--type-body);
  line-height: var(--body-leading);
}
/* Explicitly neutralize older cached page styles as well as inherited casing. */
main.site-page :is(h1, h2, h3, h4, h5, h6, p, span, a, button, label, summary, nav) { text-transform: none; }
main.site-page .container {
  max-width: calc(var(--content-width) + 2 * var(--page-gutter));
  padding-inline: var(--page-gutter);
}
main.site-page :is(h1, h2, h3, h4, h5, h6):not(.sr-only) {
  font-family: var(--font-family);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
main.site-page h1:not(.sr-only) {
  font-size: var(--type-hero);
  letter-spacing: var(--hero-tracking);
  line-height: 1.05;
  color: var(--ink);
  max-width: var(--headline-width);
  margin: 18px auto 0;
}
main.site-page h2:not(.sr-only) {
  font-size: var(--type-section);
  line-height: .98;
  max-width: var(--headline-width);
}
main.site-page h3:not(.sr-only) { font-size: var(--type-subsection); }
main.site-page :is(h4, h5, h6):not(.sr-only) { font-size: var(--type-card); }
/* Page titles and section headings (h1, h2) share the homepage's Gambetta face; h3-h6 stay Inter.
   Gambetta ships Regular only, so component rules asking for 500 must not get a faux bold. */
main.site-page :is(h1, h2):not(.sr-only) {
  font-family: var(--font-heading);
  font-weight: var(--heading-font-weight);
  font-synthesis: none;
  line-height: var(--heading-font-leading);
  letter-spacing: var(--heading-font-tracking);
}

/* Intro: eyebrow, title, supporting copy, actions, then the product visual. */
main.site-page :is(.about-hero, .adx-hero, .prd-hero, .ind-hero, .pch-hero,
  .ut-masthead, .lrn-masthead, .inv-hero, .pd-hero, .ebk-hero, .fq-hero, .cr-head, .cs-hero) {
  padding-block: var(--hero-space);
  text-align: center;
}
main.site-page :is(.prd-hero-grid, .ind-hero-grid, .pch-hero-grid) {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--heading-space);
}
main.site-page :is(.prd-hero-copy, .ind-hero-copy, .pch-hero-copy) {
  width: 100%; max-width: var(--headline-width); margin-inline: auto;
}
main.site-page :is(.prd-bench, .ind-stack, .pch-hero-stage) {
  width: 100%; max-width: 880px; margin-inline: auto;
}
main.site-page :is(.lede, .adx-sub, .prd-sub, .ind-sub, .pch-sub, .ut-standfirst, .ut-sub, .ut-lede,
  .lrn-standfirst, .inv-sub, .pd-sub, .ebk-sub, .tg-sub, .cr-sub, .fq-sub, .cs-sub,
  .about-hero > p, .fq-hero > p) {
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: var(--body-leading);
  letter-spacing: normal;
  color: var(--muted);
  max-width: 640px;
  margin: 14px auto 0;
}
main.site-page :is(.prd-ctas, .ind-ctas, .pch-ctas, .adx-ctas, .pd-ctas,
  .prd-checks, .ind-checks, .pch-checks) {
  justify-content: center;
  margin-top: 26px;
}
main.site-page .lrn-mrule { display: none; } /* Duplicate masthead label. */
main.site-page .tg-head { max-width: var(--headline-width); padding-block: var(--hero-space); margin-bottom: 0; text-align: center; }
main.site-page :is(.tg-wrap, .cr-wrap, .ebk-wrap) { padding-top: 0; }

/* Section rhythm and supporting text match the homepage's feature sections. */
main.site-page .section { padding-block: var(--section-space); }
main.site-page .about-hero + .section { padding-top: 0; }
main.site-page .section-head {
  display: block;
  text-align: center;
  max-width: var(--headline-width);
  margin: 0 auto var(--heading-space);
}
main.site-page .section-head h2 { margin: 14px auto 0; }
main.site-page :is(.prd-prose, .pch-prose, .adx-note) { max-width: var(--reading-width); margin-inline: auto; }
main.site-page :is(.prd-prose, .pch-prose, .adx-note, .prd-spec-card, .adx-card, .pch-railcard,
  .pch-step-body, .ind-dx, .cn-card, .lrn-card-body, .founder-meta, .network-card) p {
  font-size: var(--type-body);
  line-height: var(--body-leading);
}

/* Card titles are subordinate to section headings, even when semantically h2.
   A card title left out of this list inherits the generic h2 rule above, which is
   --type-section (up to 54px) inside a ~400px card - the failure looks like a broken
   page, not a styling nit, so new card containers belong here. */
main.site-page :is(.adx-card, .prd-spec-card, .pch-railcard, .ind-dx, .cn-card,
  .e404-col, .ebk-mod,
  .cs-card, .mr-card, .authority-card, .cs-detail-item, .pd-tr-row) :is(h2, h3),
main.site-page :is(.lrn-card-h, .pr-name, .tg-hub-t, .tg-sib-t, .cr-job-t, .inv-name, .ut-name,
  .founder-meta .name, .team-card .name, .network-card .name):not(.sr-only) {
  font-size: var(--type-card);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.2;
  margin-bottom: 10px;
}
main.site-page :is(.lrn-feat-h, .eb-h, .post-cta h3, .tg-h2, .fq-group-title, .ebk-all-copy h2, .e404-md h2):not(.sr-only) {
  font-size: var(--type-subsection);
  line-height: 1.2;
}
main.site-page :is(.label, .kicker, .adx-kicker, .prd-kicker, .ind-kicker,
  .pch-kicker, .ut-kicker, .lrn-kicker, .inv-kicker, .pd-kicker, .ebk-kicker,
  .tg-kicker, .cr-kicker, .eb-tag, .lrn-tag, .tg-sib-k, .ebk-mod-n) {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .15em;
  line-height: var(--body-leading);
  color: var(--accent);
}
main.site-page :is(.breadcrumb, .cr-crumb, .tg-crumb, .cn-crumb, .lrn-meta, .lrn-byline-txt, .eb-label,
  .eb-fine, .cta-reassure, .prd-chip, .cr-job-m, .founder-meta .role, .team-card .role) {
  font-size: var(--type-meta);
  letter-spacing: normal;
  line-height: var(--body-leading);
}
main.site-page :is(.faq-item, .prd-q, .ind-q, .pch-q) > summary {
  font-size: var(--type-card); font-weight: var(--heading-weight); line-height: 1.4;
}

/* Reading pages keep a narrower column and a distinct h2 / h3 hierarchy. */
main.site-page :is(.blog-post, .legal-page) {
  max-width: calc(var(--reading-width) + 2 * var(--page-gutter));
  padding-block: var(--hero-space);
}
main.site-page :is(.blog-post, .legal-page) h1 { margin-inline: 0; }
main.site-page .blog-post > .lede { max-width: none; margin-top: 26px; }
main.site-page :is(.blog-content, .legal-content, .cr-body, .dev-sec) h2 {
  font-size: var(--type-subsection);
  line-height: 1.2;
  margin: 40px 0 16px;
}
main.site-page :is(.blog-content, .legal-content, .cr-body, .dev-sec) h3 {
  font-size: var(--type-card);
  line-height: 1.2;
  margin: 28px 0 12px;
}
main.site-page :is(.blog-content, .legal-content, .cr-body) :is(p, li) {
  font-size: var(--type-body); line-height: var(--body-leading);
}
main.site-page :is(.blog-content, .legal-content) { margin-top: var(--heading-space); }
main.site-page :is(.prd-cta, .ind-cta, .pch-cta, .adx-cta, .cta-banner, .lrn-cta, .ut-cta) {
  padding: var(--hero-space) var(--page-gutter);
  text-align: center;
}
main.site-page :is(.prd-cta, .ind-cta, .pch-cta, .adx-cta, .cta-banner, .lrn-cta, .ut-cta) :is(h2, p) {
  margin-inline: auto;
}
main.site-page .cta-banner .ctas { justify-content: center; }
main.site-page .eb-box { margin-block: var(--heading-space); }

/* Tool groups are full sections; forms and results are subsections within them. */
main.site-page .tg-group { margin-top: 0; padding-block: 0 var(--section-space); }
main.site-page .tg-group-h { margin: 0 auto; text-align: center; }
main.site-page .tg-group-d { font-size: var(--type-lead); line-height: var(--body-leading); max-width: 640px; margin: 14px auto var(--heading-space); text-align: center; }
main.site-page :is(.tg-hub-d, .tg-sib-d, .inv-desc, .ebk-mod p) { font-size: var(--type-body); line-height: var(--body-leading); }
main.site-page :is(.tg-crumb, .cr-crumb, .cn-crumb) { padding-block: 20px; margin-bottom: 0; }

main.site-page .post-cta h3 { margin-top: 0; }
main.site-page h3.cr-dept { font-size: var(--type-card); }
main.site-page .empty-state h2 { font-size: var(--type-subsection); line-height: 1.2; }
main.site-page :is(.about-hero, .adx-hero, .prd-hero-copy, .ind-hero-copy, .pch-hero-copy,
  .ut-masthead, .lrn-masthead, .inv-hero, .pd-hero, .ebk-hero, .fq-hero, .cr-head, .tg-head)
  > :is(.kicker, .ind-tag, [class$="-kicker"]) {
  font-size: var(--type-hero-eyebrow);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  padding: 0; background: none; border: 0; margin-bottom: 0;
}

/* The generic h1 rule centres with `margin: 18px auto 0`, which is right for a hero
   band and wrong for a document whose body is left-aligned - the heading floats to the
   middle of a left-aligned page. These keep the h1 on the text's own left edge. */
main.site-page :is(.cr-detail, .cs-detail, .mr-post, .blog-post, .legal-page) > h1:not(.sr-only),
main.site-page h1.cr-title { margin-inline: 0; }
main.site-page h1.cr-title { margin-bottom: var(--heading-space); }

main.site-page .about-hero > h2 { margin-inline: auto; }

/* FAQ controls, topic headings and answers share one readable column. */
main.site-page .fq-content { max-width: calc(880px + 2 * var(--page-gutter)); }
main.site-page .fq-hero { padding-bottom: var(--heading-space); }

/* Legacy margin shorthands must not pull the backer strip off-center. */
main.site-page :is(.adx-trust, .prd-trust, .pch-ledger, .ind-backers) { margin-inline: auto; }

main.site-page .blog-content .post-cta p { font-size: var(--type-body); }