/* ================================================================
   FOUR PILLARS — WIDTH CONSISTENCY PATCH (wider, v2)
   Replaces the prior 1040px width patch.

   Solution: one outer container width applies to every major
   results zone. Inside that zone, prose-dense blocks (like the
   Day Master deep dive) get a narrower inner constraint so they
   stay readable.

   Two widths instead of one:
     --content-width:  1240px (the "stage" — pillars, timeline,
                                charts, balance bars, sticky nav)
     --reading-width:  780px  (prose-heavy inner blocks)
   This is the convention used by modern editorial sites: the
   page frame is wide, but body text inside it stays within
   readable line length (~70 characters).
   ================================================================ */


:root {
    --content-width: 1240px;
    --reading-width: 780px;
    --content-pad: 1.75rem;
}


/* ── Outer width applied to every major zone ── */
.fp-hero,
.fp-hero .fp-hero-inner,
.fp-education-section,
.fp-education-section .fp-education-inner,
.fp-calculator-section,
.fp-results-header,
.fp-pillar-cards,
.fp-pillar-cards-grid,
.fp-pillars-grid,
.fp-element-balance,
.fp-luck-pillars,
.fp-shen-sha,
.fp-advanced,
.fp-growth-path,
.fp-deep-dive,
.fp-cta-section,
.fp-reference-section,
section.fp-section {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
    box-sizing: border-box;
}


/* ── Hero: full container width, but text stays narrow for readability ── */
.fp-hero {
    max-width: var(--content-width);
}

.fp-hero-title,
.fp-hero-subtitle {
    max-width: var(--reading-width);
    margin-left: auto;
    margin-right: auto;
}


/* ── Wheel SVG: matches outer container ── */
.fpw,
.fpw-root {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
    box-sizing: border-box;
}


/* ── Results outer: edge-to-edge so background bands work ── */
.fp-results {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}


/* ── Sticky nav: full-width band, pill row centered ── */
.fp-results-nav {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.fp-results-nav-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0.75rem var(--content-pad);
}


/* ── Prose-dense inner blocks get the narrower reading width.
   Inside the wider page stage, paragraph-heavy content stays at
   ~70-character line length. ── */
.fp-reading-zone,
.fp-pillar-meaning,
.fp-element-insight,
.fp-luck-now-decade-reading,
.fp-luck-now-year-reading,
.fp-adv-block-intro,
.fp-edu-block p,
.fp-faq-item p,
.fp-pillar-card-en {
    max-width: var(--reading-width);
}

.fp-pillar-meaning,
.fp-element-insight,
.fp-luck-now-decade-reading,
.fp-luck-now-year-reading,
.fp-adv-block-intro {
    margin-left: auto;
    margin-right: auto;
}


/* ── Pillar grid: use the wider stage to give each pillar more room ── */
.fp-pillars-grid,
.fp-pillar-cards-grid {
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .fp-pillars-grid,
    .fp-pillar-cards-grid {
        gap: 1.5rem;
    }
}


/* ── Luck timeline: benefits most from the wider container ── */
.fp-luck-timeline-wrapper {
    max-width: var(--content-width);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    :root {
        --content-pad: 1.4rem;
    }

    .fp-reading-zone,
    .fp-pillar-meaning,
    .fp-element-insight,
    .fp-luck-now-decade-reading,
    .fp-luck-now-year-reading,
    .fp-adv-block-intro,
    .fp-edu-block p,
    .fp-faq-item p {
        max-width: 100%;
    }

    .fp-hero-title,
    .fp-hero-subtitle {
        max-width: 100%;
    }
}


@media (max-width: 600px) {
    :root {
        --content-pad: 1rem;
    }
}