:root {
  --ink: #142034;
  --muted: #506078;
  --paper: #f7f9fc;
  --primary: #f02d78;
  --cta: #f02d78;
  --cta-dark: #bb1e59;
}

html, body { overflow-x: clip; }

/* A viewport-sized animated background repaints on every scroll frame. */
body::after { animation: none; }

body {
  color: var(--ink);
  background: #f7f9fc;
}

body::before { display: none; }
[data-media-hero-logo][hidden], [data-media-logo][hidden] { display: none !important; }
.tracks::after { content: "7-14"; }

.topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #dce5f1;
  box-shadow: 0 8px 28px rgba(21, 43, 76, .06);
}

.topbar .nav a,
.topbar .brand { color: #142034; }

.hero {
  min-height: min(800px, 88vh);
  background: #45baf0;
}

.hero::after { display: none; }
.hero-image {
  opacity: 1;
  filter: none;
  object-position: 60% center;
}
.hero-shade {
  background: linear-gradient(90deg, rgba(7, 34, 82, .94) 0%, rgba(11, 67, 132, .78) 37%, rgba(12, 76, 137, .24) 63%, transparent 84%);
}
.hero-canvas { opacity: .16; }
.hero-grid {
  background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 64px 64px;
}
.scanline { opacity: .22; }
.hero-content {
  width: min(1160px, calc(100% - 48px));
  margin: 54px auto 60px;
}
.hero .eyebrow {
  color: #fff;
  text-transform: none;
  font-size: 14px;
}
.brand-signature { margin-bottom: 26px; }
.signature-word { font-size: clamp(52px, 7vw, 96px); }
.hero h1 {
  max-width: 750px;
  font-size: clamp(47px, 6vw, 86px);
  line-height: 1.02;
}
.hero h1 span { color: #fff; text-shadow: none; }
.hero-copy { max-width: 680px; color: #e8f7ff; }
.hero-facts { max-width: 820px; gap: 8px; }
.hero-facts span {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 13px;
}

.proof-strip {
  border-block: 0;
  background: #fff;
  box-shadow: 0 14px 35px rgba(21,43,76,.05);
}
.proof-strip a { min-height: 102px; border-color: #e3e9f0; }
.proof-strip a:hover { background: #f2f8ff; }
.proof-strip strong { color: #1559b6; font-size: clamp(28px, 3.4vw, 47px); }
.proof-strip span { color: #647189; }

.pain, .tracks, .program, .project-showcase, .parents, .faq, .contact {
  color: #142034;
  background: #f7f9fc;
}
.tracks { background: #edf6fb; }
.tracks .section-head.split { align-items: end; }
.tracks h2 { max-width: 750px; }
.segmented {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 780px);
  gap: 6px;
  padding: 6px;
  border: 1px solid #c9ddea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20,64,112,.06);
}
.segment {
  min-height: 70px;
  padding: 10px 12px;
  border-radius: 5px;
  color: #243e5d;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}
.segment span {
  display: block;
  margin-bottom: 4px;
  color: #2279bd;
  font-size: 11px;
  font-weight: 900;
}
.segment.active {
  color: #fff;
  background: #145db5;
  box-shadow: 0 6px 16px rgba(20,93,181,.22);
}
.segment.active span { color: #a6e5ff; }
.segment:focus-visible { outline: 3px solid #f02d78; outline-offset: 3px; }
.track-panel[hidden] { display: none !important; }
.track-panel { min-height: 290px; }
.track-copy {
  border: 1px solid #d7eaf7;
  border-radius: 8px;
  color: #142034;
  background: #d9f1ff;
  box-shadow: none;
}
.track-copy h3 { color: #142034; font-size: clamp(29px, 3.6vw, 48px); }
.track-copy p { color: #40536a; }
.track-detail { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-bottom: 3px; border-bottom: 2px solid currentColor; color: #155f9c; font-weight: 850; }
.track-detail:hover { color: #e82b70; }
.track-detail:focus-visible { outline: 3px solid #f02d78; outline-offset: 3px; }
.track-copy .label { color: #1166a8 !important; }
#creator .track-copy { background: #e8e7ff; border-color: #d9d5ff; }
#teen .track-copy { background: #e8f7ed; border-color: #c9ead5; }
.outcome-list {
  border: 1px solid #dde8f0;
  border-radius: 8px;
  box-shadow: none;
}
.outcome-list span {
  min-height: 48px;
  border-radius: 4px;
  background: #f7fafc;
  border-color: #e1eaf2;
}
.outcome-list span::before { color: #f02d78; }
.program { background: #fff; }
.program-clarifier {
  max-width: 750px;
  margin: 14px 0 0;
  color: #53647c;
  font-size: 16px;
}
.module-grid article,
.pain-grid article,
.trust-grid article { border-radius: 6px; }
.module-grid article:nth-child(1) { border-top: 4px solid #f02d78; }
.module-grid article:nth-child(2) { border-top: 4px solid #2e87d8; }
.module-grid article:nth-child(3) { border-top: 4px solid #13a888; }
.module-grid article:nth-child(4) { border-top: 4px solid #f1aa32; }
.project-showcase { background: #f7f9fc; }
.project-card { border-radius: 6px; }

.blog-preview {
  color: #142034;
  background: #e8f5f5;
}
.blog-preview .section-head { max-width: 1120px; }
.blog-preview h2 { max-width: 650px; font-size: clamp(34px, 5vw, 68px); }
.blog-preview-row {
  max-width: 1120px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}
.blog-feature {
  min-height: 215px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid #cce6e5;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(32,90,90,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-feature:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(32,90,90,.1); }
.blog-feature-tag { color: #0a8d84; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.blog-feature strong { max-width: 750px; font-size: clamp(26px, 3.3vw, 42px); line-height: 1.13; }
.blog-feature > span:last-child { color: #165f8a; font-size: 14px; font-weight: 800; }
.blog-all { padding: 14px 0; color: #155f84; font-weight: 900; white-space: nowrap; }
.blog-feature:focus-visible, .blog-all:focus-visible { outline: 3px solid #f02d78; outline-offset: 3px; }

@media (max-width: 980px) {
  .hero { min-height: 690px; }
  .hero-shade { background: linear-gradient(90deg, rgba(7,34,82,.94), rgba(11,67,132,.64) 55%, rgba(11,67,132,.1)); }
  .tracks .section-head.split { display: block; }
  .segmented { margin-top: 24px; }
}

@media (max-width: 640px) {
  .topbar { background: rgba(255,255,255,.96); }
  .hero {
    min-height: 690px;
    align-items: end;
  }
  .hero-image { object-position: 68% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,35,81,.97) 4%, rgba(7,50,112,.85) 53%, rgba(12,76,137,.12) 100%); }
  .hero-content { width: calc(100% - 32px); margin: 90px auto 28px; }
  .brand-signature { margin-bottom: 16px; }
  .signature-word { font-size: 55px; }
  .hero h1 { font-size: clamp(39px, 10vw, 54px); line-height: 1.05; }
  .hero-copy { font-size: 16px; }
  .hero-facts { gap: 6px; }
  .hero-facts span { padding: 6px 8px; font-size: 11px; }
  .proof-strip a { min-height: 76px; padding: 12px; }
  .proof-strip strong { font-size: 25px; }
  .proof-strip span { font-size: 10px; }
  .segmented {
    width: calc(100vw - 36px);
    max-width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .segment { min-width: 145px; flex: 1 0 145px; min-height: 66px; scroll-snap-align: start; }
  .track-panel { min-height: 0; }
  .track-copy, .outcome-list { padding: 22px; }
  .track-copy h3 { font-size: 29px; }
  .blog-preview-row { grid-template-columns: 1fr; gap: 6px; }
  .blog-feature { min-height: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-feature { transition: none; }
  .blog-feature:hover { transform: none; }
}

/* Online diary: navigation is an app rail, not a wall of tiles. */
#ekit .section-head.split {
  width: min(100%, 1120px);
  margin: 0 auto 30px;
  align-items: end;
  gap: 32px;
}
#ekit .section-head.split > div { flex: 1 1 0; min-width: 0; }
#ekit .section-head h2 {
  max-width: 760px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
}
#ekit .head-note { flex: 0 1 350px; margin: 0 0 2px; font-size: 15px; line-height: 1.5; }
#ekit .ekit-layout {
  display: block;
  width: min(100%, 1120px);
  margin-inline: auto;
}

#ekit .ekit-demo {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-rows: 60px minmax(0, 1fr);
  width: 100%;
  height: 590px;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  gap: 0;
  padding: 16px;
  border: 1px solid #26354b;
  border-radius: 20px;
  background: #111b2b;
  box-shadow: 0 26px 70px rgba(14, 31, 58, .22);
}

#ekit .ekit-demo::after { display: none; }

#ekit .demo-header {
  grid-column: 1 / -1;
  grid-row: 1;
  gap: 10px;
  padding: 0 10px 14px;
  border-bottom: 1px solid #2a384c;
}

#ekit .demo-logo { width: 30px; }
#ekit .demo-header strong { font-size: 19px; letter-spacing: 0; }
#ekit .demo-actions { gap: 8px; }
#ekit .sun-icon, #ekit .avatar-icon { width: 32px; height: 32px; }
#ekit .sun-icon::before { inset: 10px; border-width: 2px; }

#ekit .demo-menu {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 12px 0 0;
  border-right: 1px solid #2a384c;
}

#ekit .demo-tile {
  min-height: 48px;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #aebbd0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

#ekit .demo-tile:hover { transform: none; background: #1c2a40; }
#ekit .demo-tile.active {
  transform: none;
  border-color: #4988f8;
  color: #fff;
  background: #245edf;
  box-shadow: 0 4px 14px rgba(28, 95, 235, .22);
}
#ekit .demo-tile::after { display: none; }
#ekit .tile-icon, #ekit .demo-tile.active .tile-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 6px;
  color: currentColor;
  background: rgba(255,255,255,.08);
  transform: none;
}
#ekit .tile-icon svg { width: 17px; height: 17px; stroke-width: 2; }
#ekit .demo-tile:focus-visible { outline: 2px solid #93b9ff; outline-offset: 2px; }

#ekit .demo-screen,
#ekit .demo-screen.active,
#ekit .demo-screen.is-leaving {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  height: 100%;
  padding: 22px 10px 10px 26px;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}
#ekit .demo-screen:not(.active):not(.is-leaving) { display: none; }

#ekit .student-card-demo {
  grid-template-columns: 104px minmax(0,1fr);
  gap: 22px;
  min-height: 210px;
  padding: 22px;
  border-radius: 12px;
  background: linear-gradient(112deg, #5630b3, #275cbb 58%, #172745);
}
#ekit .pet-frame { width: 94px; height: 94px; border-width: 3px; border-radius: 12px; }
#ekit .pet-face { font-size: 43px; }
#ekit .crown { width: 54px; height: 42px; top: -31px; }
#ekit .student-card-copy h3 { font-size: 21px; }
#ekit .student-card-copy p { font-size: 13px; }
#ekit .student-card-copy p b { padding: 3px 7px; }
#ekit .student-card-copy strong { margin-top: 9px; font-size: 24px; }
#ekit .xp-track { height: 10px; margin-top: 9px; }
#ekit .coin-line { margin-top: 9px; font-size: 12px; }

#ekit .progress-demo {
  display: grid;
  grid-template-columns: 94px repeat(3, minmax(0,1fr));
  min-height: 116px;
  padding: 12px;
  gap: 10px;
  border-radius: 10px;
}
#ekit .ring-progress { width: 84px; height: 84px; }
#ekit .ring-progress strong { font-size: 20px; }
#ekit .ring-progress span { margin-top: 36px; font-size: 10px; }
#ekit .mini-stat { min-width: 0; padding: 8px; border-radius: 8px; }
#ekit .mini-stat span { font-size: 11px; }
#ekit .mini-stat strong { font-size: 22px; }
#ekit .achievement-demo { gap: 8px; }
#ekit .achievement-demo strong { font-size: 16px; }
#ekit .achievement-demo span { padding: 7px 10px; border-width: 1px; border-radius: 6px; font-size: 11px; }

#ekit .task-tabs { width: fit-content; height: 42px; padding: 3px; }
#ekit .task-tabs b, #ekit .task-tabs span { min-width: 96px; padding: 0 12px; font-size: 13px; letter-spacing: 0; }
#ekit .demo-screen[data-demo-screen="tasks"].active { gap: 16px; }
#ekit .homework-card { min-height: 180px; padding: 24px; border-width: 1px; border-radius: 10px; }
#ekit .homework-card h3 { margin-bottom: 8px; font-size: 22px; letter-spacing: 0; }
#ekit .homework-card p { margin-bottom: 20px; font-size: 13px; }
#ekit .review-status { margin: 0; padding: 8px 11px; font-size: 12px; }
#ekit .homework-card button { padding: 7px 12px; border-width: 1px; font-size: 12px; letter-spacing: 0; }

#ekit .next-lesson-card, #ekit .calendar-demo, #ekit .notice-card,
#ekit .payment-card, #ekit .chat-demo, #ekit .lesson-record { padding: 20px; border-radius: 10px; }
#ekit .next-lesson-card strong { margin: 10px 0; padding: 12px; border-radius: 8px; font-size: 25px; }
#ekit .calendar-grid { min-height: 115px; }
#ekit .academic-pill { padding: 9px 14px; font-size: 13px; }
#ekit .academic-stats { gap: 8px; }
#ekit .academic-stats article { padding: 12px; border-radius: 8px; }
#ekit .shop-grid article { border-radius: 10px; }

@media (max-width: 680px) {
  #ekit .section-head.split { display: block; margin-bottom: 20px; }
  #ekit .section-head h2 { font-size: 30px; }
  #ekit .head-note { margin-top: 12px; font-size: 13px; line-height: 1.45; }
  #ekit .ekit-demo {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 12px;
    border-radius: 14px;
  }
  #ekit .demo-header { min-height: 46px; padding: 0 4px 10px; }
  #ekit .demo-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 5px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid #2a384c;
  }
  #ekit .demo-tile {
    min-width: 0;
    min-height: 57px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    font-size: 10px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #ekit .tile-icon, #ekit .demo-tile.active .tile-icon { width: 23px; height: 23px; flex-basis: 23px; }
  #ekit .tile-icon svg { width: 15px; height: 15px; }
  #ekit .demo-screen, #ekit .demo-screen.active, #ekit .demo-screen.is-leaving {
    width: 100%;
    height: auto;
    min-height: 310px;
    max-height: none;
    padding: 15px 1px 3px;
    gap: 10px;
    overflow: visible;
  }
  #ekit .student-card-demo { grid-template-columns: 68px minmax(0,1fr); min-height: 165px; gap: 12px; padding: 13px; }
  #ekit .pet-frame { width: 62px; height: 62px; border-width: 2px; }
  #ekit .pet-face { font-size: 32px; }
  #ekit .crown { width: 36px; height: 29px; top: -19px; }
  #ekit .student-card-copy h3 { font-size: 17px; }
  #ekit .student-card-copy strong { font-size: 19px; }
  #ekit .progress-demo { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 8px; }
  #ekit .ring-progress { width: 65px; height: 65px; }
  #ekit .ring-progress strong { font-size: 15px; }
  #ekit .ring-progress span { margin-top: 28px; font-size: 8px; }
  #ekit .mini-stat { min-width: 0; padding: 4px; }
  #ekit .mini-stat span { font-size: 9px; }
  #ekit .mini-stat strong { font-size: 17px; }
  #ekit .achievement-demo span { padding: 5px 7px; }
  #ekit .homework-card { min-height: 165px; padding: 16px; }
  #ekit .academic-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 370px) {
  #ekit .demo-tile { font-size: 9px; }
  #ekit .progress-demo { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #ekit .demo-tile, #ekit .demo-screen { animation: none; transition: none; }
}