/* IVYN typography scale: DM Sans for reading, Manrope for hierarchy. */
:root {
  --type-body: 16px;
  --type-small: 12px;
  --type-caption: 11px;
  --type-leading: 1.6;
}
body { font-size: var(--type-body); line-height: var(--type-leading); }
:is(p, li) { text-wrap: pretty; }
.main-nav a, .text-button, .language-button { font-size: 14px; }
.button { font-size: 14px; }
.eyebrow, .section-kicker { font-size: 11px; }
.hero-description, .section-lead, .courses-heading p, .feature-copy>p { font-size: 16px; line-height: 1.7; }
.trust-inner>span:first-child { font-size: 10px; }
.trust-inner b { font-size: 14px; }
.trust-note { font-size: 12px; }
.step-number, .course-tag { font-size: 11px; }
.step-card h3 { font-size: 17px; }
.step-card p, .course-card p { font-size: 14px; line-height: 1.65; }
.step-card>a, .course-footer>span, .course-footer button { font-size: 12px; }
.course-card h3 { font-size: clamp(22px, 2vw, 26px); }
.demo-top { font-size: 11px; }
.demo-question, .demo-reply p { font-size: 13px; line-height: 1.65; }
.reply-name { font-size: 11px; }
.hint-chip { font-size: 10px; }
.demo-input { font-size: 12px; }
.sat-insights-heading>p { font-size: 15px; }
.sat-insights-kicker { font-size: 10px; }
.sat-total-badge { font-size: 11px; }
.sat-section-stat>div:first-child>b { font-size: 12px; }
.sat-section-stat strong small { font-size: 11px; }
.sat-section-stat>span, .sat-domain-group h4 small { font-size: 11px; }
.sat-domain-group h4 { font-size: 13px; }
.sat-domain-row { font-size: 11px; line-height: 1.45; }
.sat-domain-row b { font-size: 12px; }
.sat-stat-note, .daily-question-date, .daily-question-footnote { font-size: 11px; }
.daily-question-meta span { font-size: 10px; }
.daily-question-prompt { font-size: 17px; }
.daily-choice { font-size: 14px; line-height: 1.55; }
.daily-question-feedback { font-size: 13px; }
.daily-save-button, .daily-review-list, .daily-review-item small { font-size: 12px; }
.daily-review-item p { font-size: 13px; }
.faq-intro .section-kicker { font-size: 11px; }
.faq-intro p, .faq-item p { font-size: 15px; line-height: 1.7; }
.faq-item summary { font-size: 16px; }
.university-marquee-heading>span, .university-marquee>small { font-size: 10px; }
.university-mark b { font-size: 14px; }
.sat-road-kicker { font-size: 10px; }
.sat-date-control, .sat-road-card>p, .sat-road-footer>span { font-size: 11px; }
.sat-date-control input, .sat-date-actions button { font-size: 12px; }
.road-start { font-size: 9px; }
.home-question-count-copy>span { font-size: 12px; }
.home-question-count-live { font-size: 10px; }
.site-footer>p { font-size: 12px; }
.copyright { font-size: 11px; }

/* Dashboard and course screens */
.dashboard-body { font-size: 16px; }
.dashboard-body .app-sidebar :is(.sidebar-caption, .plan-top, .sidebar-plan>a, .user-meta b, .user-meta small, .user-menu-dots) { font-size: 12px; }
.dashboard-body .dashboard-topbar :is(a, button, input, select, .breadcrumb, .topbar-label) { font-size: 14px; }
.dashboard-body .dashboard-content :is(.welcome-row p, .dash-course-card>p, .settings-card-heading p, .settings-note, .university-intro, .university-results-head p, .essay-heading p, .essay-guide-card>p, .activity-card p, .focus-copy p) { font-size: 15px; line-height: 1.65; }
.dashboard-body .dashboard-content :is(.stat-label, .stat-note, .date-chip, .period-select, .catalog-course-top, .catalog-progress-meta, .course-topic-button small, .lesson-meta, .lesson-key-point span, .lesson-quiz-label, .course-practice-kicker, .course-practice-progress, .course-practice-question>span, .course-practice-session-actions>span, .course-practice-note, .catalog-count, .section-kicker, .block-heading>span, .today-label, .block-kicker) { font-size: 12px; line-height: 1.45; }
.dashboard-body .dashboard-content :is(.side-link, .course-topic-button, .catalog-filter, .catalog-open, .course-page-actions a, .course-mode-nav a, .lesson-answer, .lesson-complete, .lesson-next, .course-practice-controls button, .course-practice-session-actions button, .course-practice-answer) { font-size: 14px; }
.dashboard-body .dashboard-content :is(.welcome-row h1, .focus-copy h2) { line-height: 1.2; }
.dashboard-body .dashboard-content .welcome-row h1 { font-size: clamp(27px, 3vw, 36px); }
.dashboard-body .dashboard-content .focus-copy h2 { font-size: clamp(24px, 2.5vw, 32px); }
.dashboard-body .dashboard-content .stat-value { font-size: 30px; }
.dashboard-body .dashboard-content .block-heading h2 { font-size: 21px; }
.dashboard-body .dashboard-content .dash-course-card h3 { font-size: 19px; }
.dashboard-body .dashboard-content .dashboard-footer { font-size: 12px; }
.dashboard-body .dashboard-content :is(.essay-field, .essay-field label, .essay-field small, .essay-meter-row, .essay-guide-kicker, .essay-guide-list li, .essay-checklist>span, .essay-checklist label, .essay-privacy) { font-size: 12px; line-height: 1.5; }
.dashboard-body .dashboard-content :is(.course-calculator-note, .course-calculator-toggle, .course-mode-nav a, .course-page-actions a) { font-size: 14px; }
.dashboard-body .dashboard-content :is(.sat-practice-label, .sat-practice-meta, .sat-practice-note, .sat-test-card small) { font-size: 12px; }

@media (max-width: 650px) {
  body { font-size: 15px; }
  .main-nav a, .text-button, .language-button, .button { font-size: 13px; }
  .hero-description, .section-lead, .courses-heading p, .feature-copy>p { font-size: 15px; }
  .step-card p, .course-card p, .demo-question, .demo-reply p { font-size: 13px; }
  .faq-intro p, .faq-item p { font-size: 14px; }
  .faq-item summary { font-size: 15px; }
  .daily-question-prompt { font-size: 16px; }
  .dashboard-body { font-size: 15px; }
  .dashboard-body .dashboard-content :is(p, li, label, input, select, textarea, button) { font-size: 14px; }
  .dashboard-body .dashboard-content :is(.welcome-row p, .dash-course-card>p, .settings-card-heading p, .settings-note, .university-intro, .essay-heading p, .course-practice-heading p, .course-practice-question h5, .lesson-text, .lesson-key-point p) { font-size: 14px; }
  .dashboard-body .dashboard-content :is(.stat-label, .stat-note, .today-label, .block-kicker, .course-status, .dashboard-footer) { font-size: 11px; }
  .dashboard-body .dashboard-content .welcome-row h1 { font-size: 26px; }
  .dashboard-body .dashboard-content .focus-copy h2 { font-size: 23px; }
  .dashboard-body .dashboard-content .stat-value { font-size: 25px; }
  .dashboard-body .dashboard-content .block-heading h2 { font-size: 19px; }
  .dashboard-body .dashboard-content .dash-course-card h3 { font-size: 17px; }
}
/* Balance the home hero text block and Newton artwork across wide layouts. */
.hero {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  column-gap: clamp(22px, 3vw, 42px);
  align-items: start;
}
.hero-copy { align-self: start; }
.hero h1 {
  font-size: clamp(46px, 4.65vw, 64px);
  line-height: 1.04;
  letter-spacing: -.065em;
  margin-bottom: 18px;
}
.hero-art {
  align-self: start;
  margin: 0 !important;
  padding-top: 4px;
  transform: none !important;
}
.hero-scene-frame { width: min(100%, 590px); }

@media (min-width: 651px) and (max-width: 900px) {
  .hero { column-gap: 20px; }
  .hero h1 { font-size: clamp(40px, 5vw, 54px); }
  .hero-art { padding-top: 20px; }
}
@media (max-width: 650px) {
  .hero { column-gap: 0; }
  .hero h1 { font-size: clamp(40px, 10.8vw, 58px); line-height: 1.04; }
  .hero-art { padding-top: 0; }
}
.hero-art { flex-direction: column; }
.hero-art .sat-road-card { width: min(590px, 100%); margin-top: 18px; }
@media (max-width: 650px) {
  .hero-art .sat-road-card { width: 100%; margin-top: 14px; }
}

/* Keep section headings clear of the sticky navigation when opened from a link. */
html { scroll-padding-top: 112px; }
#how, #courses, #features, #faq { scroll-margin-top: 112px; }
.intro-section { padding-top: 94px; }

/* Refined “How it works” section */
.intro-section {
  padding-top: clamp(82px, 8vw, 104px);
  padding-bottom: clamp(86px, 9vw, 116px);
}
.intro-section > .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 18px;
  padding: 0 12px;
  border: 1px solid #dce9dc;
  border-radius: 999px;
  background: #f1f7ef;
  color: #477659;
  letter-spacing: .14em;
}
.intro-section h2 {
  max-width: 800px;
  margin: 0 auto 16px;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -.055em;
}
.intro-section h2 span { color: #4c8762; }
.intro-section .section-lead {
  max-width: 650px;
  font-size: 16px;
  line-height: 1.75;
}
.steps-grid {
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(36px, 4vw, 48px);
}
.step-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  padding: 25px 26px 24px;
  border-color: #dfe8df;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(35, 64, 43, .045);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  border-color: #b9d2bb;
  box-shadow: 0 16px 34px rgba(35, 64, 43, .10);
}
.step-number {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f0f5ef;
  color: #66816b;
  font-weight: 700;
  letter-spacing: .08em;
}
.step-illustration {
  height: 108px;
  flex: 0 0 108px;
  margin: 9px 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f3f8f1, #f8faf6);
}
.target-illustration span, .growth-illustration span { color: #4d8965; }
.path-illustration span { color: #477c5d; background: #fff; }
.path-illustration span:nth-child(2) { background: #477c5d; color: #fff; }
.step-card h3 { margin-bottom: 9px; font-size: 18px; letter-spacing: -.035em; }
.step-card p { flex: 1; max-width: 320px; margin-bottom: 17px; color: #667568; font-size: 14px; line-height: 1.65; }
.step-card > a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  color: #347451;
  font-size: 13px;
  font-weight: 700;
}
.step-card > a span { transition: transform .2s ease; }
.step-card > a:hover span { transform: translate(2px, -2px); }
.step-featured {
  border-color: #c9ddc8;
  background: linear-gradient(155deg, #f2f8ef 0%, #fff 78%);
}
.step-featured .step-illustration { background: linear-gradient(135deg, #e9f3e7, #f3f8f0); }
.step-card :focus-visible { outline: 3px solid #70a77a; outline-offset: 3px; }
html[data-theme="dark"] .intro-section > .section-kicker { background: #202f22; border-color: #3a513b; color: #b8d8b0; }
html[data-theme="dark"] .intro-section h2 span { color: #a8d49f; }
html[data-theme="dark"] .step-card { background: #19231c; border-color: #344637; box-shadow: 0 10px 30px #0002; }
html[data-theme="dark"] .step-card:hover { border-color: #628265; box-shadow: 0 16px 34px #0004; }
html[data-theme="dark"] .step-number { background: #26372a; color: #b9d6b2; }
html[data-theme="dark"] .step-illustration { background: linear-gradient(135deg, #202e23, #24352a); }
html[data-theme="dark"] .step-featured { background: linear-gradient(155deg, #24372a 0%, #1b261e 78%); border-color: #48634a; }
html[data-theme="dark"] .step-featured .step-illustration { background: linear-gradient(135deg, #2a4030, #26382b); }
html[data-theme="dark"] .step-card p { color: #b4c2b2; }
html[data-theme="dark"] .step-card > a { color: #b3d9a8; }
@media (max-width: 900px) {
  .steps-grid { gap: 14px; }
  .step-card { min-height: 340px; padding: 21px 20px; }
}
@media (max-width: 650px) {
  .intro-section { padding-top: 76px; padding-bottom: 78px; }
  .intro-section > .section-kicker { margin-bottom: 14px; }
  .intro-section h2 { font-size: clamp(34px, 9vw, 42px); }
  .intro-section .section-lead { font-size: 15px; }
  .steps-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
  .step-card { min-height: 0; padding: 19px 20px; }
  .step-illustration { height: 78px; flex-basis: 78px; margin: 8px 0 12px; }
  .step-card p { max-width: none; }
}

/* Alternative editorial layout for the learning steps */
.intro-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(270px, .72fr);
  column-gap: clamp(32px, 6vw, 86px);
  align-items: end;
  text-align: left;
  padding-top: clamp(76px, 8vw, 104px);
  padding-bottom: clamp(82px, 8vw, 108px);
}
.intro-section > .section-kicker { grid-column: 1 / -1; justify-self: start; }
.intro-section h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 620px;
  margin: 0;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.06em;
}
.intro-section .section-lead {
  grid-column: 2;
  grid-row: 2;
  max-width: 400px;
  margin: 0 0 5px;
  padding-left: 22px;
  border-left: 2px solid #b7d2b8;
  color: #657568;
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}
.steps-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  gap: 18px;
  margin-top: clamp(34px, 4vw, 48px);
}
.step-card {
  min-height: 302px;
  padding: 22px 22px 20px;
  border: 1px solid #dce6dc;
  border-top: 3px solid #b6d1b7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(34, 57, 39, .035);
}
.step-card:hover { transform: translateY(-3px); border-color: #b8cfb8; border-top-color: #4d8059; box-shadow: 0 12px 24px rgba(34, 57, 39, .08); }
.step-number {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #4e7a59;
  font-size: 13px;
  letter-spacing: .12em;
}
.step-illustration {
  height: 86px;
  flex-basis: 86px;
  margin: 8px 0 14px;
  border-radius: 0;
  background: transparent;
}
.step-card h3 { font-size: 18px; }
.step-card p { max-width: 300px; color: #68766a; font-size: 14px; line-height: 1.7; }
.step-card > a { color: #39734f; font-size: 13px; }
.step-featured {
  border: 1px solid #cfdece;
  border-top: 3px solid #4d8059;
  background: #f3f7f1;
}
.step-featured .step-illustration { background: transparent; }
html[data-theme="dark"] .intro-section .section-lead { color: #b5c2b3; border-color: #638364; }
html[data-theme="dark"] .step-card { background: #19231c; border-color: #354536; border-top-color: #526f53; box-shadow: 0 8px 24px #0002; }
html[data-theme="dark"] .step-card:hover { border-color: #628265; border-top-color: #a8d49f; box-shadow: 0 14px 26px #0004; }
html[data-theme="dark"] .step-number { background: none; color: #b8d6b0; }
html[data-theme="dark"] .step-illustration, html[data-theme="dark"] .step-featured .step-illustration { background: transparent; }
html[data-theme="dark"] .step-featured { background: #223126; border-color: #425b43; border-top-color: #a2cb97; }
html[data-theme="dark"] .step-card p { color: #b6c3b4; }
html[data-theme="dark"] .step-card > a { color: #b3d9a8; }
@media (max-width: 800px) {
  .intro-section { grid-template-columns: 1fr; column-gap: 0; }
  .intro-section > .section-kicker, .intro-section h2, .intro-section .section-lead, .steps-grid { grid-column: 1; }
  .intro-section > .section-kicker { grid-row: auto; }
  .intro-section h2 { grid-row: auto; }
  .intro-section .section-lead { grid-row: auto; margin-top: 16px; padding-left: 15px; }
  .steps-grid { grid-row: auto; margin-top: 30px; }
}
@media (max-width: 650px) {
  .intro-section { padding-top: 68px; padding-bottom: 72px; }
  .intro-section h2 { font-size: clamp(35px, 9vw, 43px); }
  .steps-grid { gap: 12px; margin-top: 26px; }
  .step-card { min-height: 0; padding: 18px 19px; }
  .step-illustration { height: 66px; flex-basis: 66px; margin: 6px 0 10px; }
  .step-card p { max-width: none; }
}