/* TruMath visual refresh. Original layout and course interactions remain in style.css. */
:root {
  --ink: #16263f;
  --ink-70: #54647b;
  --paper: #f7f9fc;
  --paper-dim: #edf2f8;
  --white: #fff;
  --cobalt: #2857b8;
  --cobalt-dark: #173f91;
  --amber: #ffbd79;
  --coral: #c94c27;
  --mint: #228269;
  --line: #dbe3ed;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;
  --max: 1200px;
  --radius: 16px;
  --radius-sm: 10px;
}

body { background: #fff; line-height: 1.58; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.14; letter-spacing: -0.035em; }
h2 { text-wrap: balance; }
p.lead { font-size: 18px; line-height: 1.65; }
.eyebrow { color: #b34d28; font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .10em; }
.eyebrow::before { width: 20px; background: var(--coral); }
.stat-num { font-family: var(--font-body); }

/* Quiet controls and navigation */
.site-nav { background: rgba(255,255,255,.97); border-bottom: 1px solid #e5eaf1; backdrop-filter: blur(12px); }
.site-nav .wrap { gap: 28px; padding-top: 12px; padding-bottom: 12px; }
.brand { font-family: var(--font-body); font-size: 23px; letter-spacing: -.045em; font-weight: 800; }
.brand .mark { width: 37px; height: 37px; }
.nav-links { gap: 22px; font-size: 13.5px; font-weight: 650; }
.nav-links .dd-btn { font-size: 13.5px; font-weight: 650; }
.nav-links a:hover, .nav-links .dd-btn:hover { color: var(--cobalt); }
.btn { border-width: 1px; border-radius: 9px; font-size: 14px; font-weight: 700; padding: 14px 22px; min-height: 48px; box-shadow: none; transition: background-color .16s, border-color .16s, transform .16s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: white; box-shadow: none; }
.btn-primary:hover { background: #ad3c1b; box-shadow: none; }
.btn-primary:active, .btn-dark:active { transform: translateY(0); box-shadow: none; }
.btn-ghost { background: white; border-color: #cbd5e1; color: var(--ink); }
.btn-ghost:hover { background: #f2f5f9; color: var(--ink); }
.btn-dark { box-shadow: none; }
.btn-sm { min-height: 42px; padding: 10px 15px; font-size: 13.5px; }
.dd-menu, .enroll-menu { border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(22,38,63,.12); }
.dd-menu .nd-all { border-top: 1px solid var(--line); color: var(--coral); }
.nd-code { color: var(--cobalt); }

/* A real teacher and a direct promise carry the first screen. */
.hero { padding: 64px 0 72px; background: linear-gradient(118deg,#f5f8fc 0%,#fff 56%,#fff4eb 100%); }
.hero-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(42px,6vw,88px); align-items: center; }
.hero-copy { max-width: 610px; }
.hero h1 { margin-top: 18px; font-size: clamp(42px,5vw,68px); max-width: 12.5ch; letter-spacing: -.057em; line-height: 1.055; text-wrap: balance; }
.hero h1 span { color: var(--coral); }
.hero-sub { margin: 24px 0 0; max-width: 53ch; color: #4f6076; }
.hero-actions { margin-top: 30px; gap: 12px; }
.hero-actions .btn { min-height: 54px; padding-inline: 23px; }
.hero-assurance { margin: 14px 0 0; color: #5a6980; font-size: 13px; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 34px; padding-top: 22px; border-top: 1px solid #dce4ed; font-size: 13px; color: #53657c; }
.hero-proof strong { color: var(--ink); }
.hero-proof a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.hero-visual { position: relative; height: clamp(430px,43vw,550px); overflow: hidden; border-radius: 22px; background: #d7e0ea; box-shadow: 0 22px 60px rgba(28,46,77,.16); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 29%; }
.hero-visual::after { content: ''; pointer-events: none; position: absolute; inset: 54% 0 0; background: linear-gradient(transparent,rgba(10,23,43,.76)); }
.hero-visual-caption { position: absolute; z-index: 1; left: 30px; bottom: 29px; color: white; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 6px rgba(0,0,0,.24); }
.hero-visual-caption span { font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.hero-visual-caption strong { font-size: 26px; letter-spacing: -.04em; }
.hero-visual-caption small { font-size: 13px; }

/* Editorial spacing and restrained proof */
section { padding: 84px 0; }
.notch { border-top: 1px solid var(--line); }
.section-head { max-width: 720px; }
.section-head h2 { font-size: clamp(32px,3.4vw,46px); margin-top: 14px; }
.start-journey { padding: 42px 0 52px; background: white; }
.journey-card { border: 0; box-shadow: none; border-radius: 0; padding: 12px 0; background: transparent; gap: 35px; }
.journey-heading { font-size: 23px; margin-bottom: 24px; }
.journey-steps { gap: 22px; }
.journey-step { gap: 12px; align-items: start; }
.journey-step .step-n { width: 32px; min-width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: #e9effa; color: var(--cobalt); font-family: var(--font-body); font-size: 13px; }
.journey-step strong { font-size: 14px; }
.journey-step small { font-size: 12.5px; line-height: 1.4; }
.journey-action small { font-size: 12px; }
.press-strip { padding: 30px 0 42px; background: #f7f9fc; }
.press-label { font-family: var(--font-body); font-size: 11px; color: #718095; margin-bottom: 22px; }
.press-logos { gap: 24px 60px; }
.press-logos a { font-family: var(--font-body); font-size: 18px; font-weight: 800; letter-spacing: -.045em; opacity: .68; }
.press-logos a:hover { opacity: 1; }
.press-cards { display: none; }

/* Content blocks retain the information while losing the novelty-card look. */
.hl { background: linear-gradient(transparent 73%,rgba(255,189,121,.55) 73%); font-weight: 700; }
.feature-grid { grid-template-columns: repeat(3,1fr); gap: 16px; }
.feature-card { border: 1px solid var(--line); padding: 27px; border-radius: 15px; }
.feature-card .icon { width: 37px; height: 37px; }
.feature-card h3 { font-size: 18px; letter-spacing: -.025em; }
.feature-card p { font-size: 14px; line-height: 1.6; }
.old-vs-new { gap: 16px; }
.compare-card { border: 1px solid var(--line); padding: 32px; }
.compare-card.old { background: #f6f8fb; }
.compare-card.new { background: #1b3154; border-color: #1b3154; color: white; }
.compare-card h3,.compare-card h4,.spec dt { font-family: var(--font-body); }
.compare-card.new .spec dt { color: #b9c9de; }
.compare-bottom { font-family: var(--font-body); font-size: 16px; }
.try-card { transform: none; border: 1px solid var(--line); box-shadow: 0 16px 45px rgba(22,38,63,.08); padding: 28px; }
.try-card .stamp { transform: none; background: #e8eff9; color: var(--cobalt); font-family: var(--font-body); }
.try-opt { border: 1px solid #cfd9e5; background: #f8fafc; font-family: var(--font-body); font-size: 15px; }
.try-why { border-top: 1px solid var(--line); }
.try-status { font-family: var(--font-body); }
#courses { background: #f7f9fc; }
.pathway { margin-bottom: 25px; }
.pw-node,.pw-pair { border: 1px solid #d7e0eb; background: white; }
.pw-node { box-shadow: none; }
.pw-node:hover { box-shadow: 0 8px 25px rgba(28,46,77,.10); }
.pw-g,.pw-c,.pw-pair-label { font-family: var(--font-body); }
.pw-c { font-size: 17px; }
.pw-pair { border-style: solid; background: transparent; }
.pathway-note { font-size: 14px; }
.course-grid { grid-template-columns: repeat(6,1fr); gap: 16px; }
.course-card { grid-column: span 2; border: 1px solid #dce4ee; border-radius: 15px; box-shadow: none; background: white; }
.course-card:nth-child(n+4) { grid-column: span 3; }
.course-card:hover { box-shadow: 0 15px 38px rgba(22,38,63,.10); transform: translateY(-2px); }
.course-card .top { background: transparent; color: var(--ink); padding: 25px 25px 0; }
.course-card .top .grade { font-family: var(--font-body); color: #586b83; font-size: 13px; min-height: auto; opacity: 1; }
.course-card .top .code { font-family: var(--font-body); color: var(--cobalt); font-size: 28px; letter-spacing: -.04em; }
.course-card .body { padding: 5px 25px 26px; min-height: 165px; }
.course-card .body p { font-size: 14px; line-height: 1.6; flex: none; min-height: 0; margin: 0 0 16px; }
.course-card .body a { font-size: 14px; margin-top: auto; }
.video-card { border: 1px solid var(--line); box-shadow: none; color: var(--ink); background: white; }
.video-card:hover { border-color: #b7c8dd; box-shadow: 0 12px 30px rgba(22,38,63,.10); transform: translateY(-2px); }
.video-card .meta .tag { font-family: var(--font-body); color: #5d7088; font-size: 13px; }
.video-card .meta .badge { font-family: var(--font-body); background: #f2f5f9; }
.yt-facade .yt-play { border: 0; background: rgba(22,38,63,.90); }
.outcome { border: 1px solid var(--line); box-shadow: none; }
.oc-n,.outcome-note { font-family: var(--font-body); }
#pricing { background: #f7f9fc; }
.price-card { border: 1px solid var(--line); padding: 38px; }
.price-card.featured { background: #1b3154; border-color: #1b3154; color: white; }
.price-card .old-price,.price-card .new-price,.price-card .badge-best { font-family: var(--font-body); }
.price-card .badge-best { top: 18px; right: 20px; transform: none; border-radius: 6px; padding: 6px 10px; }
.price-card .new-price { font-size: 46px; letter-spacing: -.05em; }
.price-card li { font-size: 14.5px; }
.trial-banner { border: 1px solid #f4d3bd; background: #fff1e4; padding: 20px 26px; }
.teacher-photo { border: 0; box-shadow: none; border-radius: 18px; }
.teacher-quote { font-style: normal; font-size: clamp(23px,3vw,34px); letter-spacing: -.035em; }
.paper-card { transform: none !important; border: 1px solid var(--line); background: white; box-shadow: none; }
.paper-card .stamp { transform: none; background: #e8eff9; color: var(--cobalt); }
.mini-stats .n { font-family: var(--font-body); }
.topic-list.spine { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 36px; }
.topic-list.spine .spine-road { display: none; }
.topic-list.spine .topic-item,
.topic-list.spine .topic-item:nth-of-type(even),
.topic-list.spine .topic-item:last-child { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 17px; padding: 19px 21px; min-height: 84px; background: white; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; }
.topic-list.spine .idx { width: 37px; height: 37px; border: 0; border-radius: 9px; background: #eaf0fa; color: var(--cobalt); font-family: var(--font-body); font-size: 12px; }
.topic-list:not(.spine) .topic-item { border: 1px solid var(--line); border-radius: 12px; background: white; }
.topic-list:not(.spine) .idx { border: 0; background: #eaf0fa; color: var(--cobalt); font-family: var(--font-body); border-radius: 9px; }
.page-header { border-bottom: 1px solid var(--line); background: #f7f9fc; }
.breadcrumb,.tag-pill { font-family: var(--font-body); }
.tag-pill { font-size: 12px; }
footer { background: #14243d; color: #fff; }
.footer-grid .footer-h { font-family: var(--font-body); color: #ffb782; }
.footer-grid a,.footer-grid p { color: #d9e2ed; }
.footer-bottom { border-color: #3b4a61; color: #b4c2d3; }
.chooser-shell { border: 1px solid var(--line); box-shadow: 0 22px 80px rgba(0,0,0,.28); background: white; }
.chooser-close { border: 1px solid var(--line); }
.chooser-option { border: 1px solid var(--line); }
.chooser-option:hover,.chooser-option:focus-visible { box-shadow: 0 8px 22px rgba(22,38,63,.10); }
.chooser-grade,.chooser-option strong { font-family: var(--font-body); }
.chooser-grade { border-right: 1px solid var(--line); }
.mobile-cta { border: 0; box-shadow: 0 8px 24px rgba(22,38,63,.20); }
.mobile-cta strong { font-family: var(--font-body); }

/* The free practice library uses the same visual language as the main site. */
.assign-hero { background: #f7f9fc; border-bottom: 1px solid var(--line); }
.assign-badge { transform: none; box-shadow: none; border: 0; border-radius: 6px; padding: 7px 11px; background: #e8eff9; color: var(--cobalt); font-family: var(--font-body); font-size: 12px; letter-spacing: .06em; }
.chip { border: 1px solid var(--line); border-radius: 7px; font-family: var(--font-body); font-weight: 600; }
.qcard,.unit-card,.faq-item { border: 1px solid var(--line); box-shadow: none; }
.qcard:hover,.unit-card:hover { box-shadow: 0 11px 28px rgba(22,38,63,.08); }
.qnum { border-radius: 9px; font-family: var(--font-body); }
.qlevel,.finalans span.lbl,.unit-card .top,.unit-card .top .t,.grade-tab .g { font-family: var(--font-body); }
.qfig { border: 1px solid var(--line); box-shadow: none; background: #f8fafc; }
details.sol { border-top: 1px solid var(--line); }
.solbody { background: #f6f8fb; }
.finalans { border: 1px solid #f2d2a9; background: #fff4e5; }
.unit-card .top { background: #f2f6fb !important; color: var(--ink); border-bottom: 1px solid var(--line); }
.unit-card .top .n { color: var(--cobalt); opacity: 1; font-weight: 800; letter-spacing: .06em; }
.unit-card .top .t { font-size: 18px; letter-spacing: -.025em; }
.unit-card .body { min-height: 206px; }
.unit-card .body p { flex: none; margin: 0 0 18px; }
.unit-card .body .go { margin-top: auto; }
.grade-tab,.related-links a { border: 1px solid var(--line); }
.grade-tab:hover { box-shadow: 0 7px 18px rgba(22,38,63,.10); }
.grade-tab.active { background: var(--ink); border-color: var(--ink); color: white; }
.howto { background: #1b3154; }
.kw-intro { background: #f2f6fb; border-left: 3px solid var(--cobalt); }
.related { border-top: 1px solid var(--line); }

@media (max-width: 1100px) {
  .site-nav .wrap { gap: 18px; }
  .nav-links { gap: 13px; font-size: 12.5px; }
  .nav-links .dd-btn { font-size: 12.5px; }
}
@media (max-width: 880px) {
  .site-nav .wrap { padding: 10px 20px; }
  .nav-links { background: white; gap: 22px; font-size: 17px; }
  .nav-links .dd-btn { font-size: 17px; }
  .nav-toggle { border: 1px solid var(--line); font-size: 21px; }
  .hero { padding: 48px 0 58px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero h1 { max-width: 15ch; }
  .hero-visual { height: 500px; max-width: 650px; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .topic-list.spine { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: repeat(2,1fr); }
  .course-card,.course-card:nth-child(n+4) { grid-column: auto; }
  .try-card { transform: none; }
  .mobile-cta { border-radius: 12px; }
}
@media (max-width: 620px) {
  .hero { padding: 39px 0 48px; }
  .hero h1 { font-size: clamp(39px,10vw,53px); max-width: 12.5ch; }
  .hero-sub { margin-top: 19px; font-size: 16px; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .btn { min-height: 52px; }
  .hero-proof { margin-top: 26px; flex-wrap: wrap; }
  .hero-visual { height: min(108vw,440px); border-radius: 16px; }
  .hero-visual-caption { left: 21px; bottom: 20px; }
  .hero-visual-caption strong { font-size: 23px; }
  .journey-card { padding: 0; box-shadow: none; }
  .journey-heading { font-size: 22px; }
  .journey-steps { gap: 18px; }
  .press-logos { gap: 18px 30px; }
  .feature-grid,.course-grid { grid-template-columns: 1fr; }
  .topic-list.spine .topic-item,
  .topic-list.spine .topic-item:nth-of-type(even),
  .topic-list.spine .topic-item:last-child { min-height: 72px; padding: 15px; }
  .compare-card { padding: 24px; }
  .try-card { padding: 22px; }
  .price-card { padding: 27px; }
  .chooser-shell { padding: 28px 20px; }
  .mobile-cta small { font-size: 11px; }
  .btn { white-space: normal; text-align: center; }
}