/**
 * page.css — restyles the content pages (FAQ, setup guide, terms, privacy notice, blog) to match the refreshed site.
 * Loaded AFTER each page's own <style>, and scoped to body.content-page so it wins on specificity. Excludes body.inapp,
 * which is the plain document view used inside the app (?inapp=true) and must keep its own typography.
 * Tokens come from chrome.css. Navy ink is set here for these pages, as home.css does for body.home.
 */

body.content-page:not(.inapp) { --light-text-primary: #142343; --light-text-secondary: #46506B; background: var(--bg-warm); }

/* ---- Hero band (faq, terms, privacy, blog) ---- */
body.content-page:not(.inapp) .page-hero {
    margin-top: 5.75rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) max(var(--gutter), calc((100% - 760px) / 2 + 2rem)) clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, var(--bg-warm) 0%, #FCF0F5 100%);
    text-align: left;
    border-bottom: 1px solid rgba(20, 35, 67, 0.06);
}
body.content-page:not(.inapp) .page-hero h1 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--light-text-primary);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}
body.content-page:not(.inapp) .page-hero p { font-size: var(--fs-lead); line-height: 1.5; color: var(--light-text-secondary); }
body.content-page:not(.inapp) .page-hero .post-meta { font-size: 0.95rem; color: var(--light-text-secondary); }
@media (max-width: 768px) { body.content-page:not(.inapp) .page-hero { margin-top: 4.5rem; } }

/* ---- Section headings: DM Sans, no gradient text ---- */
body.content-page:not(.inapp) .faq-section-title,
body.content-page:not(.inapp) .policy-section h2,
body.content-page:not(.inapp) .setup-section h2,
body.content-page:not(.inapp) .post-body h2,
body.content-page:not(.inapp) .post-card h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--light-text-primary);
}
body.content-page:not(.inapp) .faq-section-title { font-size: 1.5rem; color: var(--accent); -webkit-text-fill-color: var(--accent); }
body.content-page:not(.inapp) .policy-section h2 { font-size: 1.3rem; }
body.content-page:not(.inapp) .setup-section h2 { font-size: 1.6rem; }
body.content-page:not(.inapp) .post-body h2 { font-size: 1.65rem; line-height: 1.2; }
body.content-page:not(.inapp) .post-card h2 { font-size: 1.5rem; line-height: 1.2; }
body.content-page:not(.inapp) .post-card h2 a { color: var(--light-text-primary); }
body.content-page:not(.inapp) .post-card h2 a:hover { color: var(--purple-ink); }

/* ---- Setup guide title (no hero band on that page) ---- */
body.content-page:not(.inapp) .page-content { padding-top: 9rem; }
body.content-page:not(.inapp) .page-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--light-text-primary);
}
body.content-page:not(.inapp) .page-subtitle { font-size: var(--fs-lead); line-height: 1.5; }
@media (max-width: 768px) { body.content-page:not(.inapp) .page-content { padding-top: 7rem; } }

/* ---- Links, bullets, accents: rose and purple-ink, never coral ---- */
body.content-page:not(.inapp) .faq-answer a,
body.content-page:not(.inapp) .policy-section a,
body.content-page:not(.inapp) .setup-section a,
body.content-page:not(.inapp) .post-body a,
body.content-page:not(.inapp) .back-link,
body.content-page:not(.inapp) .post-card-read-more { color: var(--purple-ink); }
body.content-page:not(.inapp) .policy-section a { text-decoration: underline; text-underline-offset: 0.2em; }
body.content-page:not(.inapp) .faq-answer a:hover,
body.content-page:not(.inapp) .policy-section a:hover,
body.content-page:not(.inapp) .back-link:hover,
body.content-page:not(.inapp) .post-card-read-more:hover { text-decoration: underline; }
body.content-page:not(.inapp) .policy-section ul li::before,
body.content-page:not(.inapp) .setup-section ul li::before,
body.content-page:not(.inapp) .setup-section ol li::before { color: var(--cta-bg); }
body.content-page:not(.inapp) .faq-chevron { color: var(--cta-bg); }
body.content-page:not(.inapp) .faq-question:hover { color: var(--purple-ink); }
body.content-page:not(.inapp) .step-badge { background: var(--cta-bg); }
body.content-page:not(.inapp) .callout--warning { border-left-color: var(--cta-bg); background: rgba(184, 72, 127, 0.07); }
body.content-page:not(.inapp) .post-body blockquote { border-left-color: var(--cta-bg); background: #fff; }
body.content-page:not(.inapp) .post-body code,
body.content-page:not(.inapp) .post-body pre { background: #fff; border: 1px solid rgba(20, 35, 67, 0.1); }
body.content-page:not(.inapp) .post-card { border-bottom-color: rgba(20, 35, 67, 0.1); }
body.content-page:not(.inapp) .faq-item { border-bottom-color: rgba(20, 35, 67, 0.1); }
body.content-page:not(.inapp) .effective-date { border-bottom-color: rgba(20, 35, 67, 0.1); }
body.content-page:not(.inapp) .section-divider { border-top-color: rgba(20, 35, 67, 0.1); }
body.content-page:not(.inapp) .parts-table,
body.content-page:not(.inapp) .file-tree { background: #fff; }

/* ---- Body copy a touch larger and easier to read ---- */
body.content-page:not(.inapp) .policy-section p, body.content-page:not(.inapp) .policy-section li,
body.content-page:not(.inapp) .setup-section p, body.content-page:not(.inapp) .setup-section li,
body.content-page:not(.inapp) .post-body p { font-size: 1.0625rem; }
body.content-page:not(.inapp) .faq-answer { font-size: 1rem; }

/* ---- Focus ---- */
body.content-page:not(.inapp) .faq-question:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) { body.content-page:not(.inapp) .faq-chevron { transition: none; } }

/* ---- Fixes ---- */
/* Only a step's title is block-level; bold words inside its nested lists stay inline (they were breaking onto their own lines). */
body.content-page:not(.inapp) .step-content li strong { display: inline; margin: 0; font-weight: 600; }
body.content-page:not(.inapp) .effective-date { text-align: left; }

/* The parts table is wider than a phone column; let it scroll inside the column instead of widening the page. */
@media (max-width: 600px) {
    body.content-page:not(.inapp) .parts-table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Blog masthead: publication name, proposition, and a quieter byline. */
body.content-page:not(.inapp) .page-hero .hero-byline { margin-top: 0.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-ink); }