/* =============================================================
   Typiq — Audience landings CSS (Professionals / Schools / Kids)
   Loaded alongside redesign.css; defines per-audience accent colors
   + section primitives for landing pages.
   ============================================================= */

:root {
  --pros-accent: #0E4A6B;       /* deep slate-blue — professionals */
  --pros-accent-bg: rgba(14,74,107,.08);
  --pros-accent-border: rgba(14,74,107,.2);
  --schools-accent: #1F6B3F;    /* green — schools */
  --schools-accent-bg: rgba(40,140,80,.08);
  --schools-accent-border: rgba(40,140,80,.2);
  --schools-accent-deep: #0F4D2A;
  --kids-accent: #E07A1F;       /* warm orange — kids */
  --kids-accent-bg: rgba(224,122,31,.1);
  --kids-accent-border: rgba(224,122,31,.2);
  --kids-peach: #FFEFD8;
}

/* Breadcrumb bar (same across all landings) */
body.rd .rd-breadcrumb {
  padding: 16px 64px;
  font-size: 12px;
  color: var(--body-gray);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
body.rd .rd-breadcrumb .sep { margin: 0 8px; color: var(--line); }
body.rd .rd-breadcrumb strong { color: var(--ink); font-weight: 600; }

/* Light nav variant for landings (white bg, dark text) */
body.rd .rd-nav-light {
  display: flex; align-items: center;
  padding: 18px 64px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: relative;
}
/* Exclude .rd-btn so button text color rules win (was breaking .rd-btn-dark contrast) */
body.rd .rd-nav-light a:not(.rd-btn) { color: var(--body-dark); }
body.rd .rd-nav-light .rd-nav-links a { font-size: 14px; font-weight: 500; }
body.rd .rd-nav-light .rd-nav-links a.active-pro { color: var(--pros-accent); font-weight: 600; }
body.rd .rd-nav-light .rd-nav-links a.active-schools { color: var(--schools-accent); font-weight: 600; }
body.rd .rd-nav-light .rd-nav-links a.active-kids { color: var(--kids-accent); font-weight: 600; }

/* H2 used on landings (smaller than homepage) */
body.rd .rd-land-h2 {
  font-family: var(--font-display);
  font-size: 52px; line-height: 1.03;
  letter-spacing: -1.4px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 820px;
}

/* Accent pill used at the top of landing hero */
body.rd .rd-accent-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
body.rd .rd-accent-pill .dot { width: 6px; height: 6px; border-radius: 3px; }
body.rd .rd-accent-pill.pro { background: var(--pros-accent-bg); border-color: var(--pros-accent-border); color: var(--pros-accent); }
body.rd .rd-accent-pill.pro .dot { background: var(--pros-accent); }
body.rd .rd-accent-pill.schools { background: var(--schools-accent-bg); border-color: var(--schools-accent-border); color: var(--schools-accent); }
body.rd .rd-accent-pill.schools .dot { background: var(--schools-accent); }
body.rd .rd-accent-pill.kids { background: var(--kids-accent-bg); border-color: var(--kids-accent-border); color: var(--kids-accent); }
body.rd .rd-accent-pill.kids .dot { background: var(--kids-accent); }

/* Landing hero shell */
body.rd .rd-land-hero {
  padding: 72px 64px 96px;
}
body.rd .rd-land-hero.pro    { background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
body.rd .rd-land-hero.schools { background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
body.rd .rd-land-hero.kids   { background: linear-gradient(180deg, #fff 0%, var(--kids-peach) 100%); position: relative; overflow: hidden; }
body.rd .rd-land-hero-inner.schools-hero-grid { grid-template-columns: 1.1fr .9fr; }
body.rd .rd-land-hero-inner {
  max-width: 1312px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
body.rd .rd-land-hero h1 {
  font-family: var(--font-display);
  font-size: 72px; line-height: 0.98;
  letter-spacing: -1.8px;
  margin: 0;
  color: var(--ink);
  font-weight: 400;
}
body.rd .rd-land-hero.pro h1 em    { color: var(--pros-accent); font-style: italic; }
body.rd .rd-land-hero.schools h1 em { color: var(--schools-accent); font-style: italic; }
body.rd .rd-land-hero.kids h1 em   { color: var(--kids-accent); font-style: italic; }
body.rd .rd-land-hero-lead {
  font-size: 18px; line-height: 1.55;
  color: var(--body-dark);
  margin-top: 26px;
  max-width: 540px;
}
body.rd .rd-land-hero-lead strong { color: var(--ink); }
body.rd .rd-land-hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
body.rd .rd-land-hero-sub {
  display: flex; gap: 28px; margin-top: 28px;
  font-size: 13px; color: var(--body-gray);
  flex-wrap: wrap;
}
body.rd .rd-land-hero-sub span { display: inline-flex; align-items: center; gap: 6px; }

/* Kids hero decorative floating letters */
body.rd .rd-kids-float {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  pointer-events: none;
  z-index: 0;
}
/* Hide decorative letters at small viewports — they overlap content when columns collapse */
@media (max-width: 1199px) { body.rd .rd-kids-float { display: none; } }
body.rd .rd-land-hero.kids .rd-land-hero-inner { position: relative; z-index: 1; }

/* Landing generic eyebrow (matches main rd-eyebrow color per accent) */
body.rd .rd-land-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
  margin-bottom: 14px;
}
body.rd .rd-land-eyebrow.pro    { color: var(--pros-accent); }
body.rd .rd-land-eyebrow.schools { color: var(--schools-accent); }
body.rd .rd-land-eyebrow.kids   { color: var(--kids-accent); }

/* Generic landing section */
body.rd .rd-land-section { padding: 96px 64px; }
body.rd .rd-land-section-inner { max-width: 1312px; margin: 0 auto; }
body.rd .rd-land-section.surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.rd .rd-land-section.peach { background: var(--kids-peach); }
body.rd .rd-land-section.white { background: #fff; }
body.rd .rd-land-section.dark { background: var(--ink); color: #fff; }
body.rd .rd-land-section.green { background: linear-gradient(135deg, var(--schools-accent) 0%, var(--schools-accent-deep) 100%); color: #fff; }
body.rd .rd-land-section.dark h2, body.rd .rd-land-section.green h2 { color: #fff; }

/* Generic 3-column feature grid used across landings */
body.rd .rd-land-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
body.rd .rd-land-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
body.rd .rd-land-feature {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  border: 1px solid var(--line);
}
body.rd .rd-land-feature.surface-bg { background: var(--surface); }
body.rd .rd-land-feature .tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.4px; font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.rd .rd-land-feature.pro .tag    { color: var(--pros-accent); }
body.rd .rd-land-feature.schools .tag { color: var(--schools-accent); }
body.rd .rd-land-feature.kids .tag   { color: var(--kids-accent); }
body.rd .rd-land-feature h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin: 0 0 10px;
}
body.rd .rd-land-feature p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--body-dark);
  margin: 0;
}

/* =========================================================
   TYPING TEST DEMO (Professionals)
   ========================================================= */
body.rd .rd-typing-test {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
  color: var(--ink);
}
body.rd .rd-typing-test-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--body-gray); font-weight: 600;
}
body.rd .rd-typing-test-timer { font-variant-numeric: tabular-nums; }
body.rd .rd-typing-test-timer.urgent { color: #B0413E; }
body.rd .rd-typing-test-text {
  font-family: var(--font-mono);
  font-size: 22px; line-height: 1.6;
  letter-spacing: 0.2px;
  min-height: 140px;
  word-break: break-word;
}
body.rd .rd-typing-test-text .typed {
  background: var(--success-bg); color: var(--success);
}
body.rd .rd-typing-test-text .current {
  color: var(--ink); background: var(--yellow);
  border-left: 2px solid var(--ink);
  padding-left: 1px;
  animation: caretBlink 1s step-end infinite;
}
body.rd .rd-typing-test-text .rest { color: #B8B0A8; }
body.rd .rd-typing-test-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
body.rd .rd-typing-test-stat-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--body-gray);
}
body.rd .rd-typing-test-stat-val {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 400;
  color: var(--ink);
  line-height: 1.05;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
body.rd .rd-typing-test-stat-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 2px;
}
body.rd .rd-typing-test-bigrams {
  margin-top: 20px;
  padding: 14px;
  background: var(--surface);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--body-dark);
}
body.rd .rd-typing-test-bigrams .label {
  color: var(--pros-accent);
  font-weight: 700;
}

/* =========================================================
   WPM BENCHMARKS table (Professionals)
   ========================================================= */
body.rd .rd-wpm-table {
  margin-top: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
body.rd .rd-wpm-row {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 24px;
  padding: 18px 24px;
  align-items: center;
}
body.rd .rd-wpm-row + .rd-wpm-row { border-top: 1px solid var(--line); }
body.rd .rd-wpm-row:nth-child(even) { background: var(--surface); }
body.rd .rd-wpm-role { font-size: 15px; font-weight: 600; color: var(--ink); }
body.rd .rd-wpm-bar-wrap {
  position: relative;
  height: 28px;
}
body.rd .rd-wpm-bar-track {
  position: absolute;
  top: 12px; bottom: 12px;
  left: 0; right: 0;
  background: var(--line);
  border-radius: 2px;
}
body.rd .rd-wpm-bar-fill {
  position: absolute;
  top: 6px; bottom: 6px;
  background: var(--pros-accent);
  border-radius: 3px;
}
body.rd .rd-wpm-bar-label {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}
body.rd .rd-wpm-note { font-size: 13px; color: var(--body-gray); }
body.rd .rd-wpm-source {
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.5px;
  color: var(--body-gray);
}

/* =========================================================
   SCHOOLS — Dashboard mock + Curriculum table
   ========================================================= */
body.rd .rd-school-dash {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
}
body.rd .rd-school-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 16px;
  border-bottom: 1px solid var(--line);
}
body.rd .rd-school-dash-head-title { font-size: 14px; font-weight: 700; color: var(--ink); }
body.rd .rd-school-dash-head-sub { font-family: var(--font-mono); font-size: 11px; color: var(--body-gray); }
body.rd .rd-school-dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 0;
}
body.rd .rd-school-dash-kpi {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
}
body.rd .rd-school-dash-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-gray); }
body.rd .rd-school-dash-kpi-val { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--ink); line-height: 1.1; margin-top: 4px; }
body.rd .rd-school-dash-kpi-sub { font-family: var(--font-mono); font-size: 10px; margin-top: 2px; }
body.rd .rd-school-dash-students-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--body-gray);
  padding: 12px 4px 8px;
}
body.rd .rd-school-dash-student-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px; align-items: center;
  padding: 10px 4px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
body.rd .rd-school-dash-student-row .name { color: var(--ink); font-weight: 500; }
body.rd .rd-school-dash-student-row .wpm { font-family: var(--font-mono); color: var(--body-dark); }
body.rd .rd-school-dash-student-row .acc { font-family: var(--font-mono); font-weight: 600; }
body.rd .rd-school-dash-student-row .bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }

body.rd .rd-curriculum-table {
  margin-top: 48px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}
body.rd .rd-curriculum-head,
body.rd .rd-curriculum-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  padding: 18px 28px;
}
body.rd .rd-curriculum-head {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 600;
}
body.rd .rd-curriculum-row {
  border-top: 1px solid var(--line);
  font-size: 14px;
}
body.rd .rd-curriculum-row .grade { font-weight: 600; color: var(--ink); }
body.rd .rd-curriculum-row .skill { color: var(--body-dark); }
body.rd .rd-curriculum-row .wpm { font-family: var(--font-mono); color: var(--schools-accent); font-weight: 600; }
body.rd .rd-curriculum-row .lessons { font-family: var(--font-mono); color: var(--body-gray); }

body.rd .rd-schools-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1312px; margin: 0 auto;
}
body.rd .rd-schools-quote {
  background: var(--ink);
  color: #fff;
  padding: 48px;
  border-radius: 16px;
}
body.rd .rd-schools-quote-text {
  font-family: var(--font-display);
  font-size: 28px; font-style: italic;
  line-height: 1.3; letter-spacing: -0.4px;
  font-weight: 400;
  margin: 20px 0 32px;
}
body.rd .rd-schools-proof-stats { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
body.rd .rd-schools-stat-card {
  background: var(--surface);
  padding: 36px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
body.rd .rd-schools-stat-num { font-family: var(--font-display); font-size: 48px; font-weight: 400; line-height: 1; }
body.rd .rd-schools-stat-num.green { color: var(--schools-accent); }
body.rd .rd-schools-stat-num.violet { color: var(--violet600); }
body.rd .rd-schools-stat-desc { font-size: 15px; color: var(--body-dark); margin-top: 6px; }

/* Final CTA box on schools (green gradient) */
body.rd .rd-land-section.green h2 em { color: var(--yellow); font-style: italic; }
body.rd .rd-land-section.green .rd-land-lead {
  font-size: 18px; color: rgba(255,255,255,.85);
  margin: 24px auto 36px;
  max-width: 640px; line-height: 1.5;
}

/* =========================================================
   KIDS — Age cards + Trust cards + Parent dashboard
   ========================================================= */
body.rd .rd-kids-age-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
body.rd .rd-kids-age-card .blob {
  position: absolute; top: -20px; right: -20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  opacity: 0.4;
}
body.rd .rd-kids-age-card .content { position: relative; }
body.rd .rd-kids-age-card .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--body-gray); font-weight: 700; }
body.rd .rd-kids-age-card .age { font-family: var(--font-display); font-size: 72px; font-weight: 400; color: var(--ink); letter-spacing: -2px; line-height: 1; }
body.rd .rd-kids-age-card .goal { font-size: 13px; color: var(--body-dark); margin-top: 8px; font-weight: 600; }
body.rd .rd-kids-age-card .dur { font-size: 13px; color: var(--body-gray); margin-top: 4px; }
body.rd .rd-kids-age-card .games-label { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-gray); margin-bottom: 8px; }
body.rd .rd-kids-age-card .game { font-size: 14px; color: var(--body-dark); padding: 4px 0; }

body.rd .rd-kids-parent {
  max-width: 1312px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
body.rd .rd-kids-parent-feature {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  margin-top: 12px;
}
body.rd .rd-kids-parent-feature .ic {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--kids-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  margin-top: 2px;
}
body.rd .rd-kids-parent-feature h4 { font-size: 15px; font-weight: 700; color: var(--ink); font-family: var(--font-sans); margin: 0; }
body.rd .rd-kids-parent-feature p { font-size: 14px; color: var(--body-dark); line-height: 1.5; margin: 2px 0 0; }

body.rd .rd-parent-dash {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
}
body.rd .rd-parent-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
body.rd .rd-parent-dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
body.rd .rd-parent-dash-chart {
  padding: 16px 0;
}
body.rd .rd-parent-dash-chart-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-gray); margin-bottom: 10px; }
body.rd .rd-parent-dash-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
  height: 100px;
}
body.rd .rd-parent-dash-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
body.rd .rd-parent-dash-bar-wrap .day { font-family: var(--font-mono); font-size: 10px; color: var(--body-gray); }
body.rd .rd-parent-dash-bar-wrap .bar {
  width: 100%;
  background: rgba(224,122,31,.27);
  border-radius: 4px;
  align-self: flex-end;
}
body.rd .rd-parent-dash-bar-wrap .bar.highlight { background: var(--kids-accent); }
body.rd .rd-parent-dash-tip {
  padding: 14px;
  background: var(--surface);
  border-radius: 8px;
  margin-top: 8px;
}
body.rd .rd-parent-dash-tip-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-gray); margin-bottom: 6px; }
body.rd .rd-parent-dash-tip p { font-size: 13px; color: var(--body-dark); line-height: 1.5; margin: 0; }
body.rd .rd-parent-dash-tip code { font-family: var(--font-mono); background: #fff; padding: 1px 5px; border-radius: 3px; }

body.rd .rd-kids-no-card {
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
body.rd .rd-kids-no-card .ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--kids-peach);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 24px; color: var(--kids-accent);
  margin-bottom: 16px;
}
body.rd .rd-kids-no-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.5px; margin: 0; }
body.rd .rd-kids-no-card p { font-size: 14px; color: var(--body-dark); margin: 8px 0 0; line-height: 1.5; }

/* =========================================================
   BALLOON POP DEMO (Kids)
   ========================================================= */
body.rd .rd-balloon-demo {
  background: var(--ink);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
  border: 3px solid var(--ink);
}
body.rd .rd-balloon-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
body.rd .rd-balloon-head-title {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 700;
}
body.rd .rd-balloon-hearts {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 2px;
  color: #fff;
}
body.rd .rd-balloon-hearts .h { color: #FF6B8B; }
body.rd .rd-balloon-hearts .h.off { opacity: 0.2; color: #fff; }
body.rd .rd-balloon-sky {
  position: relative;
  height: 320px;
  background: linear-gradient(180deg, #87CEEB 0%, #B8E0D2 100%);
  border-radius: 12px;
  overflow: hidden;
}
body.rd .rd-balloon-cloud {
  position: absolute;
  background: rgba(255,255,255,.7);
  border-radius: 20px;
}
body.rd .rd-balloon-cloud.c1 { top: 30px; right: 40px; width: 60px; height: 20px; }
body.rd .rd-balloon-cloud.c2 { top: 80px; left: 30px; width: 40px; height: 14px; background: rgba(255,255,255,.5); }
body.rd .rd-balloon {
  position: absolute;
  width: 56px; height: 76px;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(.4,0,.9,1), opacity 280ms;
}
body.rd .rd-balloon.popping { transform: scale(1.8); opacity: 0; }
body.rd .rd-balloon .b {
  width: 56px; height: 64px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  border: 2px solid rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 32px; color: #fff; font-weight: 700;
  box-shadow: inset -6px -8px 0 rgba(0,0,0,.15), inset 4px 6px 0 rgba(255,255,255,.3);
}
body.rd .rd-balloon .s {
  width: 1px; height: 14px;
  background: rgba(0,0,0,.3);
  margin: 0 auto;
}
body.rd .rd-balloon-ground {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40px;
  background: #8FBC8F;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,0,0,.4);
  letter-spacing: 1px;
}
body.rd .rd-balloon-flash {
  position: absolute;
  bottom: 48px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 -3px 0 rgba(0,0,0,.1);
  animation: keypress .28s ease-out;
  pointer-events: none;
}
@keyframes keypress {
  0% { transform: translateX(-50%) translateY(10px) scale(.6); opacity: 0; }
  30% { transform: translateX(-50%) translateY(0) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-8px) scale(1); opacity: 0; }
}
body.rd .rd-balloon-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px;
  color: #fff;
}
body.rd .rd-balloon-footer .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--yellow); }
body.rd .rd-balloon-footer .val { font-family: var(--font-display); font-size: 28px; font-weight: 400; font-variant-numeric: tabular-nums; }
body.rd .rd-balloon-badges { display: flex; gap: 6px; }
body.rd .rd-balloon-badges .b {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
body.rd .rd-balloon-badges .b.earned { background: var(--yellow); }
body.rd .rd-balloon-badges .b.locked { background: rgba(255,255,255,.1); }

/* Generic accordion on landing FAQs */
body.rd .rd-land-faq { max-width: 880px; margin: 0 auto; }
body.rd .rd-land-faq-item {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
body.rd .rd-land-faq-item summary {
  display: flex; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
body.rd .rd-land-faq-item summary::-webkit-details-marker { display: none; }
body.rd .rd-land-faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 18px; }
body.rd .rd-land-faq-item[open] summary::after { content: "−"; }
body.rd .rd-land-faq-item.pro    summary::after { color: var(--pros-accent); }
body.rd .rd-land-faq-item.schools summary::after { color: var(--schools-accent); }
body.rd .rd-land-faq-item.kids   summary::after { color: var(--kids-accent); }
body.rd .rd-land-faq-item p {
  font-size: 16px; line-height: 1.6;
  color: var(--body-dark);
  margin: 14px 0 0;
  max-width: 720px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
  body.rd .rd-land-hero { padding: 60px 40px 80px; }
  body.rd .rd-land-hero h1 { font-size: 56px; }
  body.rd .rd-land-section { padding: 80px 40px; }
  body.rd .rd-nav-light, body.rd .rd-breadcrumb { padding-left: 40px; padding-right: 40px; }
  body.rd .rd-land-h2 { font-size: 44px; }
}

@media (max-width: 899px) {
  body.rd .rd-land-hero-inner,
  body.rd .rd-land-hero-inner.schools-hero-grid,
  body.rd .rd-schools-proof,
  body.rd .rd-kids-parent { grid-template-columns: 1fr; }
  /* nav-light hide rules now handled by global @media (max-width:1199px) in redesign.css */
}

@media (max-width: 767px) {
  body.rd .rd-land-hero h1 { font-size: 40px; letter-spacing: -1.2px; }
  body.rd .rd-land-h2 { font-size: 32px; letter-spacing: -0.8px; }
  body.rd .rd-land-grid-3, body.rd .rd-land-grid-4 { grid-template-columns: 1fr; }
  body.rd .rd-land-section, body.rd .rd-land-hero { padding-left: 20px; padding-right: 20px; }
  body.rd .rd-breadcrumb, body.rd .rd-nav-light { padding-left: 20px; padding-right: 20px; }
  body.rd .rd-wpm-row { grid-template-columns: 1fr; gap: 8px; }
  body.rd .rd-wpm-bar-wrap { max-width: 100%; }
  body.rd .rd-typing-test-text { font-size: 17px; }
  body.rd .rd-curriculum-head,
  body.rd .rd-curriculum-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  body.rd .rd-curriculum-head { font-size: 10px; }
  body.rd .rd-curriculum-row { font-size: 13px; }
  body.rd .rd-school-dash-student-row { grid-template-columns: 1fr 60px 60px 40px; font-size: 12px; }
  body.rd .rd-schools-proof { grid-template-columns: 1fr; gap: 24px; }
}