/*
 * public-pages.css: brings the footer-linked document pages (about, legal,
 * features, use cases, supported programmes, pricing, developers, compare)
 * in line with the light masthead the homepage and /free-tools/ use.
 *
 * Loaded by lib/public_head.php after marketing.css and design-v2/shell.css,
 * together with design-v2/tokens.css, so the Pure Stone tokens (--ink,
 * --navy, --hairline, --v2-font-*) resolve on these pages the same way they
 * do on the tool pages (assets/css/free-tools.css).
 *
 * Scope: only the main wrappers named below. Articles, the articles index,
 * category hubs, auth pages, 404 and the app shell keep their own chrome.
 * Navy CTA panels inside the page body stay navy on purpose: the homepage
 * uses the same navy panel for its product tour and closing call to action.
 */

/* ---------- Masthead: navy card -> flat, left-aligned masthead ---------- */
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am,
.mkt-root .mm-compare-page > .dash-page-header {
  background: none;
  border-radius: 0;
  overflow: visible;
  padding: 8px 0 0;
  margin: 0 0 28px;
  color: var(--ink);
}
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am::before,
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am::after,
.mkt-root .mm-compare-page > .dash-page-header::before,
.mkt-root .mm-compare-page > .dash-page-header::after { content: none; }

/* Align the masthead with the 760px reading column the body copy uses. */
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am .mkt-am__inner {
  max-width: 760px;
  margin: 0 auto;
}
/* Wide pages (pricing cards, compare tables) keep the masthead full width. */
.mkt-root .mm-pricing-v2 .mkt-am .mkt-am__inner { max-width: none; }

.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__eyebrow,
.mkt-root .mm-compare-page .dash-page-header__eyebrow {
  display: block;
  font: 500 .6875rem/1.5 var(--v2-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 8px;
}
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__title,
.mkt-root .mm-compare-page .dash-page-header__title {
  font: 500 2.25rem/1.15 var(--v2-font-display);
  letter-spacing: -.025em;
  color: var(--navy);
  margin: 0 0 12px;
  text-wrap: balance;
}
/* The italic orange accent word belonged to the navy card; the new masthead
   is one colour, as on /free-tools/ (.ft-mast__title i). */
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__title i {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__lede,
.mkt-root .mm-compare-page .dash-page-header__sub {
  font: 400 1rem/1.55 var(--v2-font-sans);
  color: var(--ink-muted);
  max-width: 65ch;
  margin: 0;
}
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__lede a,
.mkt-root .mm-compare-page .dash-page-header__sub a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__bc,
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__bc a,
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__byline { color: var(--ink-muted); }
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__bc a:hover { color: var(--navy); }
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__bc span[aria-current="page"] { color: var(--ink); }
.mkt-root .mm-compare-page .mm-compare-page__verified { font-family: var(--v2-font-mono); color: var(--ink-muted); margin: 0 0 12px; }
.mkt-root .mm-compare-page .mm-compare-page__verified time { color: var(--ink); }
.mkt-root .mm-compare-page .dash-page-header__inner { display: block; }

/* ---------- Body copy: the calm type stack, not the app shell's Geist ---------- */
.mkt-root .v2-policy-article,
.mkt-root .v2-policy-article > h3 { font-family: var(--v2-font-sans); }
.mkt-root .v2-policy-article > h2 {
  font-family: var(--v2-font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.75rem);
  letter-spacing: -.02em;
  color: var(--navy);
}
.mkt-root .v2-policy-stamp { font-family: var(--v2-font-mono); }
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) :is(h2, h3) { color: var(--navy); }
.mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page):not(.ft-page) h2:not(.v2-policy-article > h2) {
  font-family: var(--v2-font-display);
  font-weight: 500;
  letter-spacing: -.02em;
}

@media (max-width: 720px) {
  .mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am,
  .mkt-root .mm-compare-page > .dash-page-header { padding: 4px 0 0; margin-bottom: 20px; }
  .mkt-root :is(.mm-doc-page, .mm-ad-page, .mm-corr-page, .mm-ep-page) .mkt-am__title,
  .mkt-root .mm-compare-page .dash-page-header__title { font-size: 1.875rem; }
}