/* ============================================================
   SYSTEM · one layout for every page (loaded last, after each page's own styles)

   One edge.    Hero text, section headings, paragraphs, cards, quotes and closing
                bands all start at the same left edge: the page gutter, or the edge
                of a 1210 px content column on wide screens.
   One measure. Running text stops at 68 characters. Cards and grids use the full column.
   One hero.    Every page opens on the dark mountain photo, text bottom-left. Main pages
                use the full hero; Learn, articles and Privacy use the compact one.
   One scale.   One H1 size per hero type, one H2 size, one lead size.
   Left aligned. Nothing is centred except text inside buttons. Photos go on the right,
                so headings never jump.
   The Diagnostic's question screens stay a centred card: they are a tool, not a page.
   ============================================================ */
:root {
    --container: 1210px;
    --measure: 68ch;
    --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
    --hero-title: clamp(2.6rem, 1.55rem + 3.4vw, 4.75rem);
    --hero-title-compact: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
    --hero-pad-top: calc(var(--nav-h) + var(--space-7));
    --hero-pad-bottom: clamp(var(--space-7), 6vw, 6rem);
}

/* ── Sections: the same edge everywhere ── */
.pg, .f-section, .f-testimonials, .f-cta-banner, .priv-wrap, .f-dx-band,
.f-collapse, .f-ways, .f-cred { padding-left: var(--edge) !important; padding-right: var(--edge) !important; }
.pg-in, .pg-narrow { max-width: none; margin-left: 0; margin-right: 0; }
.pg-narrow > *, .prose > p, .pg-narrow > .prose > * { max-width: var(--measure); }
.pg-head { max-width: var(--measure); }
.pg-head > .eyebrow + .h2, .pg-narrow > .eyebrow + .h2 { margin-top: var(--space-3); }
.pg .h2, .f-h2 { font-size: var(--text-2xl); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
.pg-narrow > .h2 + *, .prose > .h2 + * { margin-top: var(--space-5); }
.prose > * + * { margin-top: var(--space-4); }

/* ── Heroes ── */
.f-hero, .f-hero.f-hero-short, .f-hero.f-hero-split, .hero.photo-top { height: auto; min-height: clamp(600px, 86vh, 860px); }
.hero.photo-top { display: flex; flex-direction: column; justify-content: flex-end; }
.hero.photo-top > .hero-grid { width: 100%; }
.f-hero.f-hero-compact { min-height: clamp(420px, 56vh, 600px); }
.f-hero-content, .learn-hero .f-hero-content {
    padding: var(--hero-pad-top) var(--edge) var(--hero-pad-bottom);
    justify-content: flex-end;
}
.f-hero-compact .f-hero-content { padding-top: calc(var(--nav-h) + var(--space-8)); padding-bottom: var(--space-7); }
.f-hero:has(.f-hero-bar) .f-hero-content { padding-bottom: var(--space-6); }
.f-hero .f-hero-title, .f-hero.f-hero-short .f-hero-title, .f-hero.f-hero-split .f-hero-title, .f-f48-hero .f-hero-title {
    font-size: var(--hero-title) !important; font-weight: 300; line-height: 1.02; letter-spacing: -0.02em;
    max-width: 18ch; margin: 0 0 var(--space-5);
}
.f-hero.f-hero-compact .f-hero-title, .learn-hero .learn-h1, .f-hero .learn-hero-title { font-size: var(--hero-title-compact) !important; max-width: 24ch; line-height: 1.06; margin-bottom: var(--space-4); }
.f-hero-body, .f-f48-hero .f-hero-body, .learn-hero .lead {
    max-width: 60ch; margin: 0 0 var(--space-6); font-size: var(--text-lg); font-weight: 300; line-height: 1.6; color: var(--on-dark-muted);
}
.f-hero-compact .f-hero-body, .f-hero-compact .lead { margin-bottom: 0; }
.f-hero-eyebrow { margin-bottom: var(--space-5); }
/* The button row sits under the lead on every page (it used to be a blurred bar on some) */
.f-hero-bar {
    padding: 0 var(--edge) var(--hero-pad-bottom); background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-start; gap: var(--space-3) var(--space-5);
}
.f-hero-bar .hero-bar-note, .f-hero-note { max-width: 46ch; font-size: var(--text-sm); color: var(--on-dark-muted); }
/* Heroes with a video: the text column keeps the same edge and width as every other hero */
.f-hero-split-in { max-width: none; }
@media (min-width: 1024px) { .f-hero-split-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Homepage hero: the same edge and title size; the Reading card sits where the other heroes put their video */
.hero.photo-top { padding: var(--hero-pad-top) var(--edge) var(--hero-pad-bottom); }
.hero.photo-top .hero-grid { max-width: none; }
.hero.photo-top .hero-title { font-family: var(--font-display); font-size: var(--hero-title); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; }
.hero.photo-top .hero-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--space-5); font-size: 0.7rem; letter-spacing: 0.28em; color: var(--accent-text); }
.hero.photo-top .hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--accent); }
.hero.photo-top .hero-sub { max-width: 60ch; font-size: var(--text-lg); font-weight: 300; line-height: 1.6; }

/* Learn and articles: the column starts at the edge, like everything else */
.learn-hero-in, .learn-hero .learn-article, .learn-after .learn-article, .learn-article { margin-left: 0; margin-right: 0; }
.learn-hero-in { max-width: none; }
.learn-end .learn-end-lead { margin-left: 0; text-align: left; }

/* ── Photos beside text go on the right, so the heading keeps the edge ── */
.behind > .behind-img { order: 2; }
@media (min-width: 860px) {
    .behind { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-8); }
    .behind > .behind-img { justify-self: end; }
}

/* ── Quotes on dark ── */
.f-testimonials { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.f-tgrid { max-width: none; margin: var(--space-7) 0 0; }

/* ── The compact Reading block: at the edge, at a comfortable width ── */
[data-reading="compact"] .reading, [data-reading="compact"] > .reading { max-width: 640px; margin-left: 0; }

/* ── Closing band: left aligned like the rest of the page ── */
.f-cta-banner { text-align: left; padding-top: var(--section-y); padding-bottom: var(--section-y); }
.f-cta-banner-title, .f-cta-banner.is-long .f-cta-banner-title { margin: 0 0 var(--space-6); max-width: 22ch; font-size: var(--text-2xl); line-height: 1.08; }
.f-cta-banner.is-long .f-cta-banner-title { max-width: 28ch; }
.f-cta-banner-sub, .f-cta-banner p { margin-left: 0; margin-right: 0; text-align: left; }

/* ── Footer: the same edge ── */
.footer { padding-left: var(--edge); padding-right: var(--edge); }
.footer-inner { max-width: none; margin: 0; }
.footer-line { text-align: left; justify-content: flex-start; }

/* ── Privacy: the policy at the edge, at the reading width ── */
.priv-wrap { max-width: none !important; margin: 0 !important; padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }
.priv-wrap > * { max-width: var(--measure); }

/* ── Forge48 (its own page styles): the same edge, nothing centred ── */
.f-f48-video, .f-f48-video-caption, .f-f48-heavy, .heavy, .f-dx-band-card, .f-dx-band-title, .f-dx-band-body, .f-dx-band-note { text-align: left !important; }
.f-f48-video { padding-left: var(--edge) !important; padding-right: var(--edge) !important; }
.f-f48-video-frame, .f-f48-6-weeks-wrap, .f-f48-what-spec, .f-f48-what-wrap, .f-f48-story, .f-f48-logistics-box,
.f-dx-band-card, .f-dx-band-body, .f-dx-nudge, .f-f48-split, .heavy, .f-f48-video-caption { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Phones ── */
@media (max-width: 640px) {
    .f-hero-content, .learn-hero .f-hero-content { padding: calc(var(--nav-h) + var(--space-8)) var(--edge) var(--space-7); }
    .f-hero:has(.f-hero-bar) .f-hero-content { padding-bottom: var(--space-5); }
    .f-hero-bar { padding-bottom: var(--space-7); }
    .hero.photo-top { padding-top: calc(var(--nav-h) + var(--space-6)); padding-bottom: var(--space-7); }
}
@media (min-width: 861px) { .f-f48-split-grid > .f-f48-split-img { order: 2; } }

/* Dark phase cards (Forge Team): their small labels use the orange made for dark backgrounds */
.f-phase { --accent-text: var(--accent); }
/* Forge Team's small note: the site's muted text colour, which passes AA on the light band */
.f-ft-note { color: var(--ink-muted) !important; }