/* KidUniversity website: one stylesheet for every page (copied to dist by website/build.mjs).
   The "Learning Hub" look: white header with subject tabs, Figtree type, calm tinted sections,
   a coloured accent per subject, stroke icons, and a dark footer. Light and dark palettes below. */
:root {
  --ink: #1c1b2e; --muted: #3c3a57; --faint: #5a5878;
  --bg: #ffffff; --soft: #f7f6fc; --util: #f4f3fa; --card: #ffffff; --line: #e3e1ef; --line-2: #ecebf4; --field: #c9c6dd;
  --brand: #5b3fd6; --brand-hover: #4a2fc4; --on-brand: #ffffff; --link: #3f2bb0; --brand-soft: #f0edff;
  /* Subject colours (text-safe on white and on --soft). */
  --c-math: #1f63c6; --c-ela: #1e7d52; --c-sci: #b04a0b; --c-soc: #8a3cb5; --c-prep: #b42f63;
  --prep-soft: #fdf3f7; --ok: #047857; --ok-soft: #e7f8f1; --soon: #7a4a00; --soon-soft: #fff1d6;
  --foot-bg: #1c1b2e; --foot-ink: #c9c6dd; --foot-head: #ffffff; --foot-line: #34324d;
  --shadow: 0 24px 60px rgba(28, 27, 46, .08); --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ecebf7; --muted: #c3c0db; --faint: #a9a6c4;
    --bg: #14131f; --soft: #1b1a2b; --util: #181727; --card: #1f1e31; --line: #312f4a; --line-2: #2a2840; --field: #46436a;
    --brand: #a594ff; --brand-hover: #b9abff; --on-brand: #14122a; --link: #b8acff; --brand-soft: #2a2550;
    --c-math: #86b4ff; --c-ela: #62d19c; --c-sci: #ff9d61; --c-soc: #d59df3; --c-prep: #ff8fb9;
    --prep-soft: #2a1b2a; --ok: #86e0b8; --ok-soft: #173a2c; --soon: #ffd59a; --soon-soft: #3a2a10;
    --foot-bg: #0d0c17; --foot-ink: #c3c0db; --foot-head: #ffffff; --foot-line: #2a2840;
    --shadow: 0 24px 60px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font: 16px/1.55 Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); overflow-x: hidden; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; }
img { height: auto; }
svg.i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
.muted { color: var(--muted); }
.center { text-align: center; }
.nw { white-space: nowrap; }
.eyebrow { display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--link); margin-bottom: 8px; }
.lead { font-size: clamp(17px, 1.8vw, 19px); color: var(--muted); max-width: 640px; }
.center .lead { margin-left: auto; margin-right: auto; }
section.band { padding: 56px 0; }
section.band.alt { background: var(--soft); }
.section-head { max-width: 760px; margin: 0 0 24px; }
.section-head.center, .center .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead { margin-bottom: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: center; transition: background-color .15s, border-color .15s; }
.btn.primary, .btn.sun { background: var(--brand); color: var(--on-brand); }
.btn.primary:hover, .btn.sun:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--field); }
.btn.secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn.small { padding: 9px 16px; font-size: 15px; }
.btn.big { padding: 15px 26px; font-size: 17px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btns { justify-content: center; }

/* Header: utility bar, brand row, subject tabs */
.nav { position: relative; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.util { background: var(--util); border-bottom: 1px solid var(--line); font-size: 14px; }
.util .wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 20px; padding-top: 7px; padding-bottom: 7px; }
.util a, .util span { color: var(--muted); font-weight: 600; text-decoration: none; }
.util a:hover { color: var(--ink); text-decoration: underline; }
.util .lang-switch [aria-current] { color: var(--ink); }
.bar .wrap { display: flex; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 31px; height: 40px; }
.brand .word { font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1; }
.brand .word b { color: var(--brand); font-weight: 800; }
.bar .grow { flex: 1 1 auto; }
.menu-btn { display: none; align-items: center; gap: 6px; background: var(--card); color: var(--ink); border: 1px solid var(--field); border-radius: 8px; padding: 9px 12px; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; }
.tabs .tab-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tab-list > li { --tab: var(--line); }
.tabs .t-math { --tab: var(--c-math); } .tabs .t-ela { --tab: var(--c-ela); } .tabs .t-sci { --tab: var(--c-sci); } .tabs .t-soc { --tab: var(--c-soc); } .tabs .t-prep { --tab: var(--c-prep); }
.tabs .tab-list > li > a, .dd > summary { display: block; padding: 12px 16px 10px; border-bottom: 4px solid var(--tab); font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.tabs .tab-list > li > a:hover, .dd > summary:hover, .dd[open] > summary { background: var(--soft); }
.tabs a[aria-current="page"] { background: var(--soft); }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.dd[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.dd { position: relative; }
.dd-menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 280px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--tab); border-radius: 0 0 12px 12px; box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; }
.dd-menu.cols { grid-template-columns: 1fr 1fr; min-width: 460px; }
.dd-menu a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.25; }
.dd-menu a:hover { background: var(--soft); color: var(--ink); }
.dd-menu small { display: block; font-weight: 500; color: var(--faint); font-size: 13px; }
.dd-menu .ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--soft); color: var(--tab); font-weight: 800; }
.dd-menu .ic.num { color: var(--ink); }
.dd-menu .soon-line { grid-column: 1 / -1; margin: 4px 10px 6px; font-size: 13px; color: var(--faint); }
.tabs .mobile-only { display: none; }
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; }
  .tabs { display: none; border-top: 1px solid var(--line); }
  .nav.open .tabs { display: block; }
  .tabs .tab-list { flex-direction: column; padding: 4px 0 12px; }
  .tabs .tab-list > li > a, .dd > summary { border-bottom: 0; border-left: 4px solid var(--tab); padding: 11px 14px; }
  .dd-menu, .dd-menu.cols { position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0; grid-template-columns: 1fr; padding: 4px 0 8px 12px; background: transparent; }
}
@media (max-width: 560px) {
  .bar .member { display: none; }
  .tabs .mobile-only { display: block; padding: 0 0 16px; }
  .tabs .mobile-only .btn { width: 100%; }
  .brand .word { font-size: 21px; }
  .util .wrap { justify-content: flex-start; gap: 4px 12px; }
  .util { font-size: 13px; }
}

/* Hero */
.hero { background: var(--soft); padding: 56px 0; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero .copy { flex: 1 1 520px; min-width: 0; }
.hero .lead { margin-bottom: 26px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--link); background: var(--brand-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hero .fine { margin: 16px 0 0; color: var(--faint); font-size: 14px; font-weight: 500; }
@media (max-width: 600px) { .hero { padding: 36px 0 40px; } .hero .wrap { gap: 28px; } .hero .btns .btn { flex: 1 1 100%; } }

/* App preview card (hero, right side) */
.preview { flex: 1 1 420px; min-width: 0; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.preview .who { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.preview .who b { font-weight: 700; }
.preview .streak { font-size: 13px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 4px 10px; border-radius: 999px; }
.preview .today { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; }
.preview .today .ph { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--link); }
.preview .today ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.preview .today li { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.preview .today li span:last-child { color: var(--faint); font-weight: 600; text-align: right; flex: none; }
.preview .today li .done { color: var(--ok) !important; font-weight: 700 !important; }
.preview .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.preview .chips li { background: var(--soft); border-radius: 12px; padding: 12px; border-top: 3px solid var(--tab, var(--line)); }
.preview .chips small { display: block; font-size: 12px; color: var(--faint); font-weight: 600; }
.preview .chips b { font-weight: 800; font-size: 20px; }
.preview figcaption { font-size: 12px; color: var(--faint); }
.s-math { --tab: var(--c-math); } .s-ela { --tab: var(--c-ela); } .s-sci { --tab: var(--c-sci); } .s-soc { --tab: var(--c-soc); } .s-prep { --tab: var(--c-prep); }
@media (max-width: 420px) { .preview { padding: 16px; } .preview .chips b { font-size: 17px; } .preview .today li { flex-direction: column; gap: 0; } .preview .today li span:last-child { text-align: left; } }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.center .stores { justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 10px; min-width: 168px; padding: 7px 16px 7px 12px; background: #000; color: #fff; border: 1px solid #000; border-radius: 10px; text-decoration: none; text-align: left; line-height: 1.1; }
.store:hover { color: #fff; }
.store svg { width: 24px; height: 24px; flex: none; }
.store small { display: block; font-size: 11px; letter-spacing: .02em; }
.store b { display: block; font-size: 18px; font-weight: 700; }
.store.soon { cursor: default; }
@media (prefers-color-scheme: dark) { .store { border-color: #5a5878; } }

/* Learning by grade table (homepage) */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); -webkit-overflow-scrolling: touch; }
table.by-grade { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; }
.by-grade th, .by-grade td { padding: 12px 16px; text-align: left; vertical-align: top; }
.by-grade thead tr { background: var(--soft); }
.by-grade thead th { font-weight: 800; }
.by-grade thead .s-math, .by-grade thead .s-ela, .by-grade thead .s-sci, .by-grade thead .s-soc { color: var(--tab); }
.by-grade tbody tr { border-top: 1px solid var(--line-2); }
.by-grade tbody th { font-weight: 700; white-space: nowrap; }
.by-grade tbody th a { color: var(--ink); }
.by-grade td a { font-weight: 600; }
.by-grade td small { display: block; color: var(--faint); font-size: 13px; }
.by-grade .prep-row { background: var(--prep-soft); }
.by-grade .prep-row th, .by-grade .prep-row th a { color: var(--c-prep); }
.tag-soon { display: inline-block; background: var(--soon-soft); color: var(--soon); font-weight: 700; padding: 2px 9px; border-radius: 6px; font-size: 13px; }
.coming-next small { display: block; margin-top: 6px; font-size: 12px; }
.coming-next, .table-note { margin: 14px 0 0; color: var(--faint); font-size: 14px; }

/* Cards and feature grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.band.alt .card { border-color: transparent; }
.card h3 { margin: 0 0 6px; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card.feature { border-top: 5px solid var(--tab, var(--brand)); }
.card .ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 12px; background: var(--soft); color: var(--tab, var(--brand)); }
.band.alt .card .ic { background: var(--soft); }
.card .ic svg.i, .card > svg.i { width: 26px; height: 26px; }
.card.feature > svg.i { width: 36px; height: 36px; color: var(--tab, var(--brand)); margin-bottom: 12px; display: block; }
.card .tag { display: inline-block; font-size: 14px; font-weight: 700; margin-top: 10px; }
.card ol, .card ul { padding-left: 22px; }
/* The smaller "also included" grid */
.mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 8px 32px; list-style: none; margin: 0; padding: 0; }
.mini li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.mini .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--link); }
.mini h3 { font-size: 18px; margin: 0 0 4px; }
.mini p { margin: 0; color: var(--muted); }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.steps > li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; }
.steps > li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--brand-soft); color: var(--link); font-weight: 800; margin-bottom: 10px; }
.steps h3 { font-size: 18px; }
.steps p { margin: 0; color: var(--muted); }

/* Family membership box */
.member-box { border: 2px solid var(--brand); border-radius: 16px; padding: 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: var(--card); }
.member-box .about { flex: 1 1 420px; min-width: 0; }
.member-box h2 { font-size: clamp(24px, 2.8vw, 34px); margin: 0 0 6px; }
.member-box .about p { margin: 0; color: var(--muted); }
.member-box .prices { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.member-box .prices p { margin: 0; font-size: 17px; color: var(--muted); }
.member-box .prices strong { font-size: 30px; font-weight: 800; color: var(--ink); }
.member-box .prices strong small { font-size: 17px; font-weight: 500; color: var(--muted); }
.member-box .apps { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.member-box .apps p { margin: 0; color: var(--muted); max-width: 640px; }
.member-box .apps .stores { margin: 0; }
@media (max-width: 600px) { .member-box { padding: 22px 18px; } }

/* Per-family price row (pricing page) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare .card.us { border: 2px solid var(--brand); }
.compare ul, .checks { list-style: none; padding: 0; margin: 12px 0 0; }
.compare li, .checks li { padding: 6px 0 6px 30px; position: relative; font-weight: 600; }
.compare li::before, .checks li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 12px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.compare .them li::before { width: 12px; height: 0; top: 16px; border-left: 0; border-bottom-color: var(--faint); transform: none; }
.family-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.family-row div { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 4px; }
.family-row .kids { display: flex; justify-content: center; gap: 1px; min-height: 26px; color: var(--link); }
.family-row .kids svg.i { width: 20px; height: 20px; }
.family-row b { display: block; font-size: 20px; font-weight: 800; }
.family-row small { color: var(--faint); font-weight: 600; }
@media (max-width: 420px) { .family-row { grid-template-columns: repeat(2, 1fr); } }

/* Promise */
.promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.promise .checks { columns: 2; column-gap: 28px; margin: 0; }
.promise .checks li { break-inside: avoid; }
@media (max-width: 860px) { .promise { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) { .promise .checks { columns: 1; } }

/* FAQ */
.faq { max-width: 860px; }
.center .faq, .faq.center { margin: 0 auto; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 52px 16px 20px; font-weight: 700; font-size: 17px; line-height: 1.35; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details[open] { border-color: var(--field); }
.faq .a { padding: 0 20px 14px; color: var(--muted); }
.faq .a ol, .faq .a ul { padding-left: 22px; }
.faq h2 { margin: 36px 0 14px; font-size: 26px; }
.faq h2:first-child { margin-top: 0; }

/* Call to action box (inner pages) */
.cta { border: 2px solid var(--brand); border-radius: 16px; padding: 36px 24px; text-align: center; background: var(--card); }
.cta p { max-width: 620px; margin: 0 auto 1em; color: var(--muted); font-size: 17px; }
.cta .btns { justify-content: center; }
.cta .fine { font-size: 14px; color: var(--faint); margin: 14px 0 0; }
.cta img { display: none; } /* Professor Hoot only appears as the small logo */

/* Page header (inner pages) */
.page-head { padding: 44px 0 36px; background: var(--soft); border-bottom: 1px solid var(--line); }
.page-head .wrap { display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.page-head .wrap > div { min-width: 0; }
.page-head img.hoot { display: none; } /* Professor Hoot only appears as the small logo */
.crumbs { font-size: 14px; font-weight: 600; color: var(--faint); margin-bottom: 10px; }
.crumbs a { color: var(--faint); }
.page-head .lead { margin-bottom: 0; }

/* Grade pages */
.grade-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.grade-switch a { display: block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--field); background: var(--card); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); }
.grade-switch a:hover { border-color: var(--ink); }
.grade-switch a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none; }
.facts li { font-weight: 700; font-size: 17px; }
.facts li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); margin: 0 24px 0 -14px; vertical-align: middle; }
.subject-tabs { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.subject-tabs ul { display: flex; gap: 0; overflow-x: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; }
.subject-tabs a { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 4px solid var(--tab, var(--line)); text-decoration: none; color: var(--ink); font-weight: 700; white-space: nowrap; }
.subject-tabs a svg.i { color: var(--tab, var(--brand)); }
.subject-tabs a:hover { background: var(--soft); }
.subject { padding: 44px 0 8px; }
.subject-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding-top: 18px; border-top: 4px solid var(--s, var(--line)); }
.subject-head .ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--s, var(--brand)); }
.subject-head .ic svg.i { width: 28px; height: 28px; }
.subject-head > div { flex: 1 1 260px; min-width: 0; }
.subject-head h2 { margin: 0; }
.subject-head p { margin: 0; color: var(--faint); font-weight: 600; }
.subject-head .btn { margin-left: auto; }
@media (max-width: 640px) { .subject-head .btn { margin-left: 0; } }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 12px; align-items: start; }
.unit { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.unit summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; }
.unit summary::-webkit-details-marker { display: none; }
.unit summary::after { content: ""; position: absolute; right: 18px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.unit[open] summary::after { transform: rotate(-135deg); top: 26px; }
.unit[open] { border-color: var(--field); }
.unit .u-n { font-size: 13px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.unit h3 { font-size: 18px; margin: 2px 0 4px; }
.unit .u-meta { font-size: 14px; font-weight: 600; color: var(--faint); }
.unit .bq { font-style: italic; color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); vertical-align: middle; margin-left: 8px; letter-spacing: .03em; }
.unit ol { margin: 0; padding: 8px 16px 14px 44px; border-top: 1px solid var(--line-2); }
.unit li { padding: 3px 0; font-size: 15px; }
.unit li.test { font-weight: 700; color: var(--link); }
.unit li.project { font-weight: 700; }
.unit li svg.i { width: 1em; height: 1em; margin-right: 4px; vertical-align: -.12em; }
.unit li .k { font-size: 12px; font-weight: 700; color: var(--faint); margin-left: 4px; }
.note { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 12px 16px; font-weight: 500; color: var(--muted); margin-top: 18px; }
.note svg.i { color: var(--link); margin-right: 6px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.plan { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; position: relative; }
.plan.best { border: 2px solid var(--brand); box-shadow: var(--shadow); }
.plan .flag { position: absolute; top: -13px; left: 22px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 13px; padding: 3px 12px; border-radius: 6px; white-space: nowrap; }
.plan h2 { font-size: 24px; margin-bottom: 4px; }
.plan .price { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin: 12px 0 6px; }
.plan .price small { font-size: 17px; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.plan .price.word { font-size: 28px; line-height: 1.15; }
.plan .per { font-weight: 600; color: var(--faint); margin-bottom: 14px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.plan li { padding: 6px 0 6px 28px; position: relative; color: var(--muted); }
.plan li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 11px; height: 6px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.plan .btn { width: 100%; }
.include { columns: 2; column-gap: 32px; padding: 0; list-style: none; }
.include li { break-inside: avoid; padding: 8px 0 8px 36px; position: relative; }
.include li span { position: absolute; left: 0; top: 7px; color: var(--link); }
@media (max-width: 700px) { .include { columns: 1; } }
table.matrix { width: 100%; border-collapse: collapse; min-width: 480px; }
.matrix th, .matrix td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2); }
.matrix thead th { font-weight: 800; background: var(--soft); }
.matrix tbody th { font-weight: 600; }
.matrix td + td, .matrix th + th { text-align: center; }
.matrix tr:last-child td, .matrix tr:last-child th { border-bottom: 0; }
.yes { color: var(--ok); font-weight: 700; } .no { color: var(--faint); }

/* Long-form pages */
.prose { max-width: 820px; }
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose ol, .prose ul { padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose > p, .prose > ul li { color: var(--muted); }
.big-steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.big-steps > li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.big-steps > li::before { counter-increment: s; content: counter(s); width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--link); font-weight: 800; font-size: 20px; }
.big-steps h3 { margin-top: 8px; }
.big-steps p { margin: 0; color: var(--muted); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.toc a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--field); background: var(--card); font-weight: 600; text-decoration: none; color: var(--ink); }
.toc a svg.i { color: var(--link); }
.toc a:hover { border-color: var(--ink); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.contact { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
h2 > svg.i, h3 > svg.i { color: var(--link); margin-right: 8px; }

/* Numbers strip (kept for any page that still uses it) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.stat b { display: block; font-size: 30px; font-weight: 800; }
.stat span { color: var(--muted); font-weight: 600; font-size: 14px; }
.stats-note { color: var(--faint); font-size: 14px; margin-top: 12px; }

/* Footer */
.footer { margin-top: 0; background: var(--foot-bg); color: var(--foot-ink); padding: 44px 0 28px; font-size: 15px; }
.footer a { color: var(--foot-ink); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer .cols { grid-template-columns: 1fr; } }
.footer h2 { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--foot-head); margin: 0 0 10px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 4px 0; }
.footer .brand, .footer .brand:hover { color: #fff; text-decoration: none; }
.footer .brand .word b { color: #c4b8ff; }
.footer .about p { margin-top: 12px; max-width: 360px; }
.footer .grades-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--foot-line); list-style: none; }
.footer .grades-row a { display: inline-block; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--foot-line); font-weight: 600; font-size: 14px; }
.footer .soon-line { margin: 10px 0 0; font-size: 13px; }
.footer .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--foot-line); font-size: 13px; }
.footer .legal p { margin: 0; }
.footer .tm { max-width: 720px; }

/* Long URLs wrap instead of widening the page on small phones. */
.faq .a, .prose, .card, .member-box, .footer { overflow-wrap: anywhere; }
/* On narrow screens the table scrolls inside its box; the grade column stays put. */
.by-grade tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.by-grade thead tr > :first-child { background: var(--soft); }
.by-grade .prep-row > :first-child { background: var(--prep-soft); }
/* Stroke icons inside text and buttons */
li > b > svg.i, .btn svg.i { margin-right: 6px; }
li > b > svg.i { color: var(--link); }