// brenda-body.jsx — Brenda's editorial body sections.
// B: Offerings · C: The Legacy Library (the public-ground feature, unique to Brenda)
// D: Level I bridge · E: Matriarch context · F: Storylines.
// All sections on cream ground with navy structure and a single aqua
// accent per section. No pillow buttons; editorial small caps only.

// ─────────────────────────────────────────────────────────────
// B · Offerings — three editorial entries, framed as "what's
// available, when you're ready." Not a sales grid. Hairline rules,
// volume numerals, "Read on →" link in place of CTAs.
// ─────────────────────────────────────────────────────────────
const BRENDA_OFFERINGS = [
  {
    num: 'I',
    title: 'The 30 Day Digital Reset.',
    body: 'Thirty days of guided reflection on the relationship between you and the digital tools in your life. A practice, not a course. Quiet enough to fit between commitments.',
    anchor: 'Yours from Level I · The Foundation',
  },
  {
    num: 'II',
    title: 'The 7 Days Living Digitally™ Mindset Prompts.',
    body: 'Seven short prompts that settle the room before the work begins. Read with morning coffee, considered alongside the rest of an already-built life.',
    anchor: 'Yours from Level I',
  },
  {
    num: 'III',
    title: 'The ACCESS™ Journal.',
    body: 'Lacey\u2019s Substack. Letters on cultural commentary, fashion, faith, art, and the lived experience of digital life.',
    anchor: 'Free to subscribe · see the current edition below',
  },
];

const BrendaOfferings = () => (
  <section data-screen-label="Brenda · 02 Offerings" style={{
    background: 'var(--ld-pearl-50)',
    padding: '64px 24px 56px',
  }}>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700)',
    }}>§ II · Offerings</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.012em',
      color: 'var(--ld-navy)', margin: '12px 0 10px',
    }}>
      What's available,<br />
      <em style={{ fontStyle: 'italic' }}>when you're ready.</em>
    </h2>
    <p style={{
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontWeight: 400, fontSize: 17, lineHeight: 1.5,
      color: 'var(--ld-ink-2)', margin: '0 0 28px', maxWidth: 380,
    }}>
      Contemplative work, considered design, the editorial archive.
    </p>

    <div style={{
      borderTop: '1px solid var(--ld-line)',
    }}>
      {BRENDA_OFFERINGS.map((o, i) => (
        <article key={i} style={{
          padding: '26px 0',
          borderBottom: '1px solid var(--ld-line)',
          display: 'grid', gridTemplateColumns: '52px 1fr',
          gap: 16, alignItems: 'baseline',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 300,
            fontSize: 34, lineHeight: 0.95, letterSpacing: '-0.02em',
            color: 'var(--ld-aqua-700)',
          }}>{o.num}</div>
          <div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 22, lineHeight: 1.18, letterSpacing: '-0.005em',
              color: 'var(--ld-navy)', margin: 0,
            }}>{o.title}</h3>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.65,
              color: 'var(--ld-ink-2)', margin: '10px 0 0',
            }}>{o.body}</p>
            <div style={{
              marginTop: 16,
              display: 'flex', justifyContent: 'space-between',
              alignItems: 'center', gap: 12, flexWrap: 'wrap',
            }}>
              <span style={{
                fontFamily: 'var(--font-body)', fontWeight: 600,
                fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'var(--ld-ink-3)',
              }}>{o.anchor}</span>
              <a href="#" style={{
                fontFamily: 'var(--font-body)', fontWeight: 700,
                fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'var(--ld-navy)',
                borderBottom: '1px solid var(--ld-gold)', paddingBottom: 2,
              }}>Read on →</a>
            </div>
          </div>
        </article>
      ))}
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// C · The Legacy Library — the public-ground argument. Mirrors the
// Builder's Lab editorial pattern from the system (full-bleed photo
// with title settling at the bottom, body copy on the dark ground,
// bordered destination box). Set on navy so it gives the page its
// editorial pivot — the surrounding sections sit on pearl/cream.
// ─────────────────────────────────────────────────────────────
const BrendaLegacyLibrary = () => (
  <section id="legacy-library"
    data-screen-label="Brenda · 03 The Legacy Library"
    style={{
      background: 'var(--ld-navy)',
      color: 'var(--ld-pearl-100)',
      position: 'relative', overflow: 'hidden',
    }}>
    {/* ── 1. Photograph — full-bleed, with the section title set in
        display serif at its lower edge. The image carries the public-
        ground argument visually (the wood, the books, the matriarch's
        wing chair, the DOROTHY'S HOUSE™ neon naming the place); the
        title settles into the image like a chapter heading. */}
    <div style={{ position: 'relative' }}>
      <img
        src="assets/space-brenda-legacy-library-memphis.png"
        alt="The Memphis Legacy Library — a walnut-paneled study with green velvet drapes, leather wing chair, matriarch's desk with a navy ledger, and a teal neon sign reading DOROTHY'S HOUSE™ Memphis Legacy Library."
        style={{
          display: 'block', width: '100%', height: 'auto',
          aspectRatio: '4 / 3', objectFit: 'cover',
        }} />

      {/* Bottom-of-image scrim so the display title stays legible no
          matter where the photo is cropped on small screens. Tuned
          dark enough to read against the wood-and-window highlights
          but soft enough to keep the photograph dominant. */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '52%',
        background: 'linear-gradient(180deg, rgba(11,22,52,0) 0%, rgba(11,22,52,0.55) 55%, rgba(11,22,52,0.92) 100%)',
        pointerEvents: 'none',
      }} />

      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '0 24px 22px',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 42, lineHeight: 1.0, letterSpacing: '-0.018em',
          color: 'var(--ld-pearl-100)', margin: 0,
          textShadow: '0 2px 18px rgba(0,0,0,0.45)',
        }}>The Legacy Library.</h2>
      </div>
    </div>

    {/* ── 2. Body copy — pearl on navy. The featured paragraph is
        broken into two stanzas at the natural pivot ("You are the
        matriarch now.") so the line lands rather than being buried
        mid-paragraph. Same editorial rhythm as the Builder's Lab
        excerpt, just longer because Lacey's copy is longer. */}
    <div style={{ padding: '36px 24px 36px' }}>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.72,
        color: 'rgba(244,235,217,0.86)', margin: '0 0 18px',
      }}>
        A library has always been more than a room of books. For women,
        especially in the South, it is the public ground our grandmothers
        won. Its' doors opened to women, while other doors remained closed.
        It was the command center where matriarchs researched for family,
        tutored after school, and poured into community.
      </p>

      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.72,
        color: 'rgba(244,235,217,0.86)', margin: '0 0 22px',
      }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400, fontSize: 17, color: 'var(--ld-pearl-100)',
        }}>You are the matriarch now.</span>{' '}
        You already carry the wisdom. A matriarch need not apologize for
        needing a tech foundation. Legacy Library opens its' doors.
      </p>

      {/* Tag line — set as the section's signature, aqua hairline above
          to give it the weight of a chapter close. */}
      <div style={{
        height: 1, background: 'var(--ld-aqua)', width: 48,
        margin: '4px 0 14px', opacity: 0.7,
      }} />
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400, fontSize: 18, lineHeight: 1.45,
        color: 'var(--ld-pearl-100)', margin: '0 0 32px',
      }}>
        Skills + Lifestyle = Culture <span style={{ color: 'var(--ld-aqua)' }}>—</span> on digital ground.
      </p>

      {/* ── 3. Destination box — hairline aqua frame, aqua serif title,
          small-caps subtitle in pearl. Mirrors the Builder's Lab CTA
          card almost beat-for-beat (the pattern is the system's). The
          box is a callout, not a button — the click target is implicit;
          the BAND app is where you actually walk in. */}
      <a href="/legacy-library" style={{
        display: 'block', textDecoration: 'none',
        border: '1px solid rgba(95,224,230,0.55)',
        borderRadius: 2,
        padding: '24px 22px 22px',
        background: 'rgba(95,224,230,0.04)',
        transition: 'background 180ms ease, border-color 180ms ease',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(95,224,230,0.08)'; e.currentTarget.style.borderColor = 'var(--ld-aqua)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(95,224,230,0.04)'; e.currentTarget.style.borderColor = 'rgba(95,224,230,0.55)'; }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 26, lineHeight: 1.15, letterSpacing: '-0.008em',
          color: 'var(--ld-aqua)', margin: 0,
        }}>
          Living Digitally<sup style={{ fontSize: 12, marginLeft: 1 }}>™</sup> Legacy Library
        </div>
        <div style={{
          marginTop: 10,
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase',
          color: 'rgba(244,235,217,0.78)', lineHeight: 1.55,
        }}>
          Core Curriculum <span style={{ color: 'var(--ld-aqua)' }}>+</span> Open Hours in the BAND app
        </div>
      </a>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// D · Level I bridge — redesigned to mirror Jasmine's Level III
// "Access" snippet beat for beat (intro with aqua-keyed phrases →
// small-caps section tag → giant numeral → italic display headline
// → aqua left-rule pull-quote → body paragraph → italic finale with
// "One Culture." picked out in aqua → aqua pillow CTA → italic
// underline tertiary). Same pattern, opposite direction (entry,
// not summit), and tuned to Brenda's palette: navy ground, pearl
// type, aqua as the single structural accent. No gold here — gold
// belongs to the hero/welcome register; this is the threshold
// chamber, kept disciplined.
// ─────────────────────────────────────────────────────────────
const BrendaLevelIBridge = () => (
  <section id="three-doorways"
    data-screen-label="Brenda · 04 Level I bridge"
    style={{
      // Antique-gold museum-room ground — same recipe as the Brenda
      // hero (two warm radial washes over a deep gold→sienna linear).
      // Pearl type, aqua single accent. No straight navy here; the
      // page reads as one continuous antique room instead of a
      // navy chamber dropped into the middle of a gold portrait.
      background:
        'radial-gradient(ellipse at 22% 14%, rgba(232,180,90,0.38) 0%, rgba(232,180,90,0) 55%),' +
        'radial-gradient(ellipse at 80% 88%, rgba(201,162,74,0.26) 0%, rgba(201,162,74,0) 60%),' +
        'linear-gradient(165deg, #2A1B05 0%, #4A2F08 38%, #6B4810 68%, #4A2F08 100%)',
      color: 'var(--ld-pearl-100)',
      padding: '72px 24px 80px',
      position: 'relative',
      overflow: 'hidden',
    }}>
    {/* Bokeh flecks — same warm pin-pricks as the hero, lower density
        so the section reads as the quieter chamber of the same room. */}
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage:
        'radial-gradient(circle at 14% 12%, rgba(255,210,140,0.22) 0, transparent 5px),' +
        'radial-gradient(circle at 82% 22%, rgba(255,210,140,0.18) 0, transparent 4px),' +
        'radial-gradient(circle at 8% 72%, rgba(255,210,140,0.20) 0, transparent 5px),' +
        'radial-gradient(circle at 76% 88%, rgba(255,210,140,0.16) 0, transparent 4px)',
    }} />
    <div style={{ position: 'relative', zIndex: 1 }}>
    {/* 1 · Intro paragraph. Pearl body type with three keyed phrases
        rendered in aqua — same rhythm as the Jasmine snippet, where
        the cool accent picks out the program nouns inside otherwise
        quiet prose. */}
    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65,
      color: 'rgba(244,235,217,0.88)', margin: '0 0 56px', maxWidth: 460,
    }}>
      To experience{' '}
      <span style={{ color: 'var(--ld-aqua)' }}>The Tech Lifestyle</span>{' '}
      at its core and{' '}
      <span style={{ color: 'var(--ld-aqua)' }}>Learn</span>{' '}
      within a community that will be a resource for the next chapter
      {' '}— walk in on the{' '}
      <span style={{ color: 'var(--ld-aqua)' }}>Foundation level.</span>
    </p>

    {/* 2 · Section tag — small caps in aqua, exactly mirroring the
        Jasmine "LEVEL III · ACCESS" tag. */}
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--ld-aqua)',
      marginBottom: 18,
    }}>Level I · Learn</div>

    {/* 3 · Giant numeral. Aqua serif, set as the section's anchor —
        same weight in the layout as Jasmine's "III". */}
    <div style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 132, lineHeight: 0.88, letterSpacing: '-0.04em',
      color: 'var(--ld-aqua)',
      margin: '0 0 8px',
    }}>I</div>

    {/* 4 · Italic display headline — "Residents / of the Foundation."
        Pearl over aqua, line-broken the same way as "The Seven / of
        Access." in the source snippet. */}
    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 44, lineHeight: 1.02, letterSpacing: '-0.014em',
      color: 'var(--ld-pearl-100)',
      margin: '0 0 38px',
    }}>
      Residents<br />
      <em style={{
        fontStyle: 'italic',
        color: 'var(--ld-aqua)',
      }}>of the Foundation.</em>
    </h2>

    {/* 5 · Pull-quote — italic, aqua left rule. The "only doorway"
        line. Hairline rule is the structural quote-mark; no
        decorative typography is needed. */}
    <div style={{
      borderLeft: '1.5px solid var(--ld-aqua)',
      paddingLeft: 18,
      margin: '0 0 28px',
      maxWidth: 460,
    }}>
      <p style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontWeight: 400, fontSize: 19, lineHeight: 1.45,
        color: 'var(--ld-pearl-100)', margin: 0,
      }}>
        Foundation is the only doorway every Resident walks through —
        where we all begin to{' '}
        <span style={{ color: 'var(--ld-aqua)' }}>Learn the Core</span>
        {' '}the rest of the program builds on.
      </p>
    </div>

    {/* 6 · Body paragraph — the Core Curriculum + seven-day cohort
        promise. Pearl on navy. Two beats separated by a line break
        rather than two <p>s so the rhythm stays one breath. */}
    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.72,
      color: 'rgba(244,235,217,0.86)', margin: '0 0 44px', maxWidth: 460,
    }}>
      The Core Curriculum lands in your hands from day one — five titles
      including the <em style={{ fontStyle: 'italic' }}>30 Day Digital
      Reset</em> and the daily <em style={{ fontStyle: 'italic' }}>Mindset
      Prompts.</em> Seven days inside The Tech Lifestyle: foundational
      tools, the cohort, the community, and skills you Learn to use the
      same day.
    </p>

    {/* 7 · Italic finale — "Thirty-five seats. Three doorways. / One
        Culture." with the closing line in aqua. Same line treatment
        as the source. */}
    <p style={{
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontWeight: 400, fontSize: 22, lineHeight: 1.35,
      color: 'var(--ld-pearl-100)', margin: '0 0 32px',
    }}>
      Thirty-five seats. Three doorways.<br />
      <span style={{ color: 'var(--ld-aqua)' }}>One Culture.</span>
    </p>

    {/* 8 · Primary CTA — aqua pillow. The one pillow button allowed
        on this page; reserved for the moment of decision. */}
    <a href="/signature-program" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: 'var(--font-body)', fontWeight: 700,
      fontSize: 12, letterSpacing: '0.26em', textTransform: 'uppercase',
      background: 'var(--ld-aqua)', color: 'var(--ld-navy)',
      padding: '17px 26px', borderRadius: 2, borderBottom: 'none',
      boxShadow: '0 0 32px rgba(95,224,230,0.18)',
    }}>
      <span>Walk on The Foundation</span>
      <span>→</span>
    </a>

    {/* 9 · Tertiary — italic underline. The escape hatch for the
        Resident who isn't ready to commit and wants to compare. */}
    <div style={{ marginTop: 22 }}>
      <a href="/foyer-faq" style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 14.5, color: 'rgba(244,235,217,0.78)',
        borderBottom: '1px solid rgba(244,235,217,0.35)', paddingBottom: 2,
      }}>Compare all three doorways</a>
    </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// E · Matriarch context — city names + framing paragraph only.
// Per Lacey's direction (v1), no vignettes; just the geography and
// the recognition line.
// ─────────────────────────────────────────────────────────────
const BrendaMatriarchContext = () => (
  <section data-screen-label="Brenda · 05 Where matriarchs are upgrading"
    style={{
      background: 'var(--ld-pearl-100)',
      padding: '72px 24px 72px',
      borderTop: '1px solid var(--ld-line)',
    }}>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700)',
    }}>§ V · Context</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 32, lineHeight: 1.06, letterSpacing: '-0.012em',
      color: 'var(--ld-navy)', margin: '14px 0 28px',
    }}>
      Where matriarchs<br />
      <em style={{ fontStyle: 'italic' }}>are upgrading.</em>
    </h2>

    {/* The four cities — display italic, one per line, generous leading.
        A single ivy-leaf glyph at the head as the only ornament. */}
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 12,
      paddingBottom: 18, borderBottom: '1px solid var(--ld-line)',
    }}>
      <span aria-hidden="true" style={{
        fontSize: 16, color: 'var(--ld-forest)', lineHeight: 1,
      }}>❦</span>
      <span style={{
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
        color: 'var(--ld-ink-3)',
      }}>The Map · Editorial</span>
    </div>
    <div style={{
      paddingTop: 18,
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      {['Memphis.', 'Birmingham.', 'Charleston.', 'Atlanta.'].map((city, i) => (
        <div key={i} style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400, fontSize: 30, lineHeight: 1.15,
          letterSpacing: '-0.008em', color: 'var(--ld-navy)',
        }}>{city}</div>
      ))}
    </div>

    {/* Framing — the recognition paragraph */}
    <p style={{
      marginTop: 28,
      fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.75,
      color: 'var(--ld-ink-2)', maxWidth: 380,
    }}>
      The school counselor adding the digital chapter. The faith leader
      building her post-retirement counseling practice. The educator whose
      expertise outlasted the curriculum. The mother of adults learning to
      be visible online for the first time.
    </p>
    <p style={{
      marginTop: 16,
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontWeight: 400, fontSize: 19, lineHeight: 1.5,
      color: 'var(--ld-navy)', maxWidth: 380,
    }}>
      Living Digitally™ is not a course for beginners. It is an editorial
      room for women who already know — and are adding the infrastructure
      that carries the next chapter.
    </p>
  </section>
);

// ─────────────────────────────────────────────────────────────
// F · Storylines — four dignity-preserving vignettes. Italic question +
// body answer woven inline. Never Q&A. Never bulleted.
// ─────────────────────────────────────────────────────────────
const BRENDA_STORYLINES = [
  {
    q: 'I shouldn\u2019t need help with this. But I do.',
    a: 'And we don\u2019t treat the need as a deficit. The need is a doorway, not a diagnosis. Every Resident inside Living Digitally™ arrived because she recognized a chapter she wanted to add. None of them arrived because she was missing one.',
  },
  {
    q: 'Will I look incompetent?',
    a: 'When the language is editorial instead of instructional, the question doesn\u2019t arise. Authority is recognized, not tested. You won\u2019t be quizzed. You\u2019ll be read to, the way one peer reads to another.',
  },
  {
    q: 'Can I learn without being treated like a student?',
    a: 'Yes. The voice here is peer to peer, never teacher to pupil. The ACCESS™ Journal is your prologue — read it before you ever pay for anything.',
  },
  {
    q: 'Is this designed for younger people?',
    a: 'No. It\u2019s designed for accomplished women adding a digital chapter to an already-built life. The infrastructure underneath is new; the woman it carries is not.',
  },
];

const BrendaStorylines = () => (
  <section data-screen-label="Brenda · 06 Storylines · What we hear"
    style={{
      background: 'var(--ld-pearl-50)',
      padding: '72px 24px 80px',
    }}>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700)',
    }}>§ VI · Storylines</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.012em',
      color: 'var(--ld-navy)', margin: '14px 0 8px',
    }}>
      What we hear,<br />
      <em style={{ fontStyle: 'italic' }}>in the rooms where women like you actually are.</em>
    </h2>
    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.65,
      color: 'var(--ld-ink-3)', margin: '0 0 22px',
    }}>
      Four whispers we\u2019ve heard. Four answers, in plain editorial voice.
    </p>

    <div style={{ borderTop: '1px solid var(--ld-line)' }}>
      {BRENDA_STORYLINES.map((s, i) => (
        <div key={i} style={{
          padding: '28px 0',
          borderBottom: '1px solid var(--ld-line)',
        }}>
          {/* The question — set as italic Cormorant pullquote, the kind
              of line that would appear in editorial body type. Aqua
              opening mark is the section's single brand accent. */}
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span aria-hidden="true" style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontWeight: 400, fontSize: 28, lineHeight: 0.9,
              color: 'var(--ld-aqua)', flex: '0 0 auto', paddingTop: 4,
            }}>&ldquo;</span>
            <p style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontWeight: 400, fontSize: 22, lineHeight: 1.3,
              color: 'var(--ld-navy)', margin: 0,
            }}>{s.q}</p>
          </div>

          {/* The answer — body type, woven directly under the question
              with a small em-dash bridge for editorial cadence. */}
          <p style={{
            marginTop: 14,
            fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.7,
            color: 'var(--ld-ink-2)',
            paddingLeft: 20,
            borderLeft: '1px solid var(--ld-line)',
          }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              color: 'var(--ld-aqua-700)', marginRight: 6,
            }}>—</span>
            {s.a}
          </p>
        </div>
      ))}
    </div>
  </section>
);

Object.assign(window, {
  BrendaOfferings, BrendaLegacyLibrary, BrendaLevelIBridge,
  BrendaMatriarchContext, BrendaStorylines,
});
