/* Page-wide calibration. Keep section artwork and interaction layouts intact. */
:root {
  --ink: #112e63;
  --body: #344b70;
  --blue: #1261df;
  --product-blue: var(--blue);
  --text-secondary: #4e6485;
  --pale: #edf4ff;
  --muted: #edf4ff;
  --line: #cadcf1;
  --orange: #c94b0a;
  --orange-hover: #af3e06;
  --page-width: 1200px;
  --page-gutter: 48px;
  --section-title: clamp(44px, 4.5vw, 64px);
  --column-title: clamp(36px, 3vw, 42px);
}

/* One reading edge from the first headline through to the directory. */
.wrap, .learning.wrap, .hero-blue-inner {
  width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
  max-width: var(--page-width);
}
.family-stage {
  width: min(var(--page-width), calc(100% - var(--page-gutter) * 2));
  max-width: var(--page-width);
  padding-inline: 0;
}
.learning .story-row { max-width: none; gap: 56px; }
.learning .story-copy { justify-self: start; }
.learning .continuous-stroke { stroke: var(--blue); }
.is-scroll-story .family-stage { overflow-clip-margin: 48px; }
.sst-footer-content { max-width: var(--page-width); }
.sst-full-footer { padding-inline: var(--page-gutter); }

/* Poppins is the hero voice; Inter carries the rest of the page. */
.hero.hero-blue { --hero-navy: var(--ink); --hero-blue: var(--blue); }
.hero.hero-blue h1 { letter-spacing: -.035em; line-height: 1.04; }
.hero.hero-blue .hero-description {
  color: var(--ink); font-size: 20px; font-weight: 600;
  line-height: 1.5; letter-spacing: -.015em;
}
.hero.hero-blue .hero-detail {
  color: var(--body); font-size: 18px; font-weight: 400;
  line-height: 1.65; letter-spacing: 0; max-width: 56ch;
}
.hero-blue .hero-proof-item dd { color: var(--blue); letter-spacing: -.025em; }
.hero-blue .hero-proof-item dt { color: var(--text-secondary); }
.hero-blue .hero-proof-item svg { stroke: var(--blue); }

.family-heading h2, .is-scroll-story .family-heading h2,
.feedback-journey .fwb-process .fwb-title,
.parent-perspective .parent-copy h2 {
  font-family: Inter, Arial, sans-serif;
  font-size: var(--section-title); font-weight: 700;
  line-height: 1.12; letter-spacing: -.035em;
}
.family-heading h2 { margin-top: 0; }
.family-heading h2, .feedback-journey .fwb-process .fwb-title { color: var(--ink); }
.journey-next h2, .is-scroll-story .journey-next h2 {
  font-size: clamp(48px, 6.1vw, 88px); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.1;
}
.family-heading h2 em, .journey-next h2 em { color: var(--blue); }
.family-eyebrow, .fj-eyebrow, .sst-blog-kicker { display: none; }
.journey-next { padding-block: 104px 72px; }
.is-scroll-story .journey-next { padding-inline: 0; }
.journey-next-bottom p { font-size: 18px; line-height: 1.65; color: var(--body); }
.learning .story-copy h3 {
  font-size: clamp(28px, 2.5vw, 36px); letter-spacing: -.025em; line-height: 1.2;
}
.learning .story-copy p { font-size: 18px; line-height: 1.65; color: var(--body); }

.family-cards { gap: 24px; }
.family-card { border-radius: 16px; background: var(--pale); }
.family-card-two { background: var(--blue); }
.family-card-three { background: #fff0e3; }
.family-card blockquote { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -.025em; }
.family-context { font-size: 14px; line-height: 1.65; opacity: 1; color: var(--body); }
.family-card-two .family-context { color: #edf4ff; }
.family-card-top { font-size: 11px; }
.family-card-top span:last-child, .family-card footer div>span { opacity: 1; }
.family-card footer div>span { font-size: 12px; color: var(--text-secondary); }
.family-card-two footer div>span { color: #edf4ff; }
.family-footnote { font-size: 12px; color: var(--text-secondary); }

.chapter-feedback.feedback-journey::before { background: var(--pale); }
.chapter-courses { background: #fff; }
.chapter-courses::before, .chapter-courses::after { content: none; }
.pp-surface { background: #fff; }
.parent-perspective { background: transparent; }
.feedback-journey .fwb-heading-row,
.parent-perspective .parent-copy { grid-template-columns: 1.6fr 1fr; gap: 56px; margin-bottom: 48px; }
.feedback-journey .fwb-process .fwb-intro,
.parent-perspective .parent-copy>p { font-size: 18px; line-height: 1.65; max-width: 36ch; }
.feedback-journey .fwb-process .fwb-intro { color: var(--body); }
.parent-perspective .parent-copy>p { color: var(--body); }
.pp-handoff { height: 160px; }
.feedback-journey .fwb-display,
.parent-perspective .pv-visual { max-width: 1100px; }
.feedback-journey .fwb-choice-title { font-size: 24px; letter-spacing: -.025em; }
.feedback-journey .fwb-choice-description { color: var(--text-secondary); }
.parent-perspective .pv-folder { border-radius: 16px; }
.parent-perspective .pv-report-heading h3 { font-size: 28px; line-height: 1.25; }
.parent-perspective .pv-folder-tabs button { min-height: 88px; }
.parent-perspective .pv-visual-caption { color: #536988; }

.chapter-courses .courses h2, .faq .faq-intro h2, .sst-blog-copy h2 {
  font-size: var(--column-title); font-weight: 700;
  line-height: 1.16; letter-spacing: -.035em;
}
.courses-heading h2 span, .courses .subject-switch button[aria-pressed=true] { color: var(--blue); }
.courses-heading p, .faq-intro p { color: var(--body); font-size: 18px; line-height: 1.65; }
.faculty-carousel { --teacher-blue: var(--blue); }
.school-switch button[aria-pressed=true],
.subject-switch button[aria-pressed=true]::after { background: var(--blue); }
.sst-faq { min-height: 0; padding-block: 96px; }
.sst-faq-toggle { font-size: 21px; line-height: 1.4; letter-spacing: -.015em; min-height: 88px; }
.sst-faq .faq-answers .sst-faq-body p { color: var(--body); }
.sst-ending { --ending-blue: var(--blue); }
.sst-ending-copy h2 { font-size: clamp(36px, 3.8vw, 56px); letter-spacing: -.035em; }
.sst-blog-description { font-size: 18px; line-height: 1.65; color: #edf4ff; }
[data-footer-entry="rise"] .sst-full-footer { background: #d9e7fa; color: var(--ink); }
[data-footer-entry="rise"] .sst-footer-col h3,
[data-footer-entry="rise"] .sst-footer-col a,
[data-footer-entry="rise"] .sst-footer-home { color: var(--ink); }
.sst-footer-col h3 { font-size: 13px; letter-spacing: .025em; }
.sst-footer-col li { font-size: 14px; line-height: 1.7; }

/* White labels use a warm orange with sufficient contrast, across every CTA. */
.header-inner .top-cta, .hero.hero-blue .hero-cta,
.sample-lesson, .sst-ending-cta, .sst-blog-cta {
  background: var(--orange); color: #fff; border-radius: 12px;
  font-family: Inter, Arial, sans-serif; font-size: 16px; font-weight: 700;
  line-height: 1.4; letter-spacing: 0; min-height: 54px; padding: 15px 28px;
}
.header-inner .top-cta { min-height: 40px; font-size: 14px; padding: 10px 20px; border-radius: 10px; }
.hero.hero-blue .hero-cta { min-width: 220px; }
.header-inner .top-cta:hover, .hero.hero-blue .hero-cta:hover,
.sample-lesson:hover, .sst-ending-cta:hover, .sst-blog-cta:hover { background: var(--orange-hover); color: #fff; }
.sst-footer-home-icon { background: var(--orange); color: #fff; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.parent-perspective ::selection, .sst-ending-visual ::selection { background: #fff0e3; color: var(--ink); }

@media (min-width: 901px) and (max-height: 780px) {
  .hero.hero-blue .hero-description { font-size: 18px; }
  .hero.hero-blue .hero-detail { font-size: 16px; line-height: 1.5; }
  .hero.hero-blue .hero-cta { min-height: 48px; padding-block: 12px; }
  .is-scroll-story .family-heading h2 { font-size: 40px; }
  .is-scroll-story .family-card blockquote { font-size: 26px; }
}
@media (max-width: 1000px) {
  :root { --page-gutter: 32px; }
  .feedback-journey .fwb-heading-row, .parent-perspective .parent-copy { gap: 32px; }
  .family-cards { gap: 16px; }
  .family-card { padding: 24px; }
  .family-card-top { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 20px; --section-title: 36px; --column-title: 34px; }
  .hero.hero-blue .hero-description { font-size: 18px; }
  .hero.hero-blue .hero-detail { font-size: 16px; }
  .hero.hero-blue .hero-cta { min-width: 0; }
  .hero-blue-inner { padding-top: 116px; }
  .family-stage { padding-top: 64px; }
  .family-card-two, .family-card-three { margin-inline: 0; }
  .family-card { min-height: 340px; }
  .family-context { margin-bottom: 24px; }
  .family-card blockquote { font-size: 28px; }
  .journey-next { padding-block: 72px 56px; }
  .journey-next h2 { font-size: clamp(40px, 10.8vw, 64px); }
  .journey-next-bottom p, .learning .story-copy p { font-size: 17px; }
  .learning .story-row { gap: 24px; }
  .feedback-journey .fwb-heading-row { display: block; margin-bottom: 32px; }
  .parent-perspective .parent-copy { display: block; margin-bottom: 36px; }
  .feedback-journey .fwb-process .fwb-intro, .parent-perspective .parent-copy>p { font-size: 17px; }
  .feedback-journey .fwb-menu { gap: 12px; }
  .feedback-journey .fwb-choice-title { font-size: 16px; line-height: 1.35; }
  .pp-handoff { height: 120px; font-size: 11px; }
  .parent-perspective .pv-folder-tabs button { min-height: 70px; }
  .parent-perspective .pv-report-heading h3 { font-size: 23px; }
  .courses-heading p, .faq-intro p, .sst-blog-description { font-size: 17px; }
  .sst-faq { padding-block: 64px; }
  .sst-faq-toggle { font-size: 18px; min-height: 80px; gap: 20px; }
  .sst-ending-copy h2 { font-size: 34px; }
  .sst-footer-col h3 { font-size: 12px; }
  .sst-footer-col li { font-size: 13px; }
}