/* ============================================================
   LUNCHBOX.KIDS — RESEARCH PAGE
   Loads AFTER styles.css + home.css + privacy.css.
   Inherits .pv-section / .pv-wrap / .pv-h1 / .num-label so the
   research page reads as the same brand family as privacy.
   ============================================================ */

/* HERO — mirrors .pv-section spacing, keeps cream background */
.rs-hero {
  background: var(--cream);
  padding: 88px 0 8px;
}
.rs-hero .pv-wrap { text-align: left; }

/* h1 uses .pv-h1 (serif, italic em in peri-dark). Nothing to override. */

.rs-hero .rs-lede {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(18, 52, 88, .88);
  margin: 8px 0 0;
}

/* FRAMING BLOCK — matches .pv-toc treatment */
.rs-frame {
  background: rgba(18, 52, 88, .04);
  border: 1px solid rgba(18, 52, 88, .08);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 20px 0 40px;
}
.rs-frame-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(18, 52, 88, .6);
  margin: 0 0 12px;
  font-weight: 700;
}
.rs-frame p {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(18, 52, 88, .88);
  margin: 0 0 10px;
}
.rs-frame p:last-child { margin-bottom: 0; }

/* SECTION HEADS — align with privacy's h2/h3 rhythm */
.rs-section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(18, 52, 88, .6);
  margin: 56px 0 8px;
  font-weight: 700;
}
.rs-section-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.rs-section-intro {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(18, 52, 88, .88);
  margin: 0 0 20px;
}
.rs-pillar-claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  border-left: 2px solid var(--peri-dark, #5654bf);
  padding: 4px 0 4px 16px;
  margin: 0 0 24px;
}

/* CITATION — no white card. Uses a subtle rule/indent so it lives
   inside the cream section like the rest of the site. */
.rs-cite {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(18, 52, 88, .14);
  border-radius: 0;
  padding: 4px 0 8px 20px;
  margin: 0 0 28px;
}
.rs-cite-ref {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 10px;
}
.rs-cite-ref .rs-doi {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--peri-dark, #5654bf);
  margin-left: 4px;
  letter-spacing: 0.02em;
}
.rs-cite-summary {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(18, 52, 88, .88);
  margin: 0 0 10px;
}
.rs-cite-note {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(18, 52, 88, .78);
  margin: 8px 0 0;
}
.rs-cite-note strong {
  color: var(--peri-dark, #5654bf);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* CLOSING — brand navy panel */
.rs-closing {
  margin: 64px 0 0;
  padding: 32px 34px;
  background: var(--navy);
  color: var(--cream);
  border-radius: 14px;
}
.rs-closing h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--cream);
  margin: 0 0 16px;
}
.rs-closing p {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  color: rgba(248, 244, 236, .88);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.rs-closing p:last-child { margin-bottom: 0; }
.rs-closing .rs-reviewed {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(248, 244, 236, .18);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(248, 244, 236, .7);
  text-transform: none;
}

/* SOFT CTA */
.rs-cta {
  margin: 48px 0 0;
  padding: 40px 34px;
  background: rgba(18, 52, 88, .04);
  border: 1px solid rgba(18, 52, 88, .08);
  border-radius: 14px;
  text-align: center;
}
.rs-cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 32px);
  color: var(--navy);
  margin: 0 0 12px;
}
.rs-cta h2 em { font-style: italic; color: var(--peri-dark, #5654bf); }
.rs-cta p {
  font-family: var(--sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(18, 52, 88, .82);
  max-width: 520px;
  margin: 0 auto 22px;
}
.rs-cta .cta-form-wrap { max-width: 460px; margin: 0 auto; }

/* Mobile */
@media (max-width: 760px) {
  .rs-hero { padding: 40px 0 24px; }
  .rs-frame { padding: 18px 20px; margin: 24px 0 32px; }
  .rs-section-eyebrow { margin-top: 40px; }
  .rs-cite { padding-left: 16px; margin-bottom: 24px; }
  .rs-closing { padding: 28px 24px; }
  .rs-cta { padding: 28px 22px; }
}