/* ============================================================
   MasterMan — Free Education for All
   Shared design system for the static masterman.in site.
   No external CSS/JS frameworks: keeps the site fast + SEO-friendly.
   ============================================================ */

:root {
  --primary: #2563eb;
  --primary-dark: #1e3a8a;
  --primary-soft: #eef2ff;
  --accent: #f59e0b;
  --accent-soft: #fff7e6;
  --success: #16a34a;
  --ink: #0f172a;
  --slate: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  /* Exam status colours. Global because the exam engine is mounted into
     several different containers (#exam-root, #apt-exam-root, #paper-root). */
  --ok: #16a34a;
  --bad: #dc2626;
  --warn: #f59e0b;
  --pur: #7c3aed;
  --bg: #f8fafc;
  --card: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --max: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--primary);
  color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand__logo { width: 38px; height: 38px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.02em; }
.brand__tag { font-size: 0.68rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em; }

.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--slate); font-weight: 600; font-size: 0.92rem;
  padding: 8px 12px; border-radius: 999px;
}
.nav__links a:hover { background: var(--primary-soft); color: var(--primary-dark); text-decoration: none; }
.nav__links a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-dark); }

.btn-counsel {
  background: var(--accent); color: #3b2a00 !important; font-weight: 800 !important;
  padding: 9px 16px !important; border-radius: 999px !important;
  box-shadow: 0 6px 16px rgba(245, 159, 11, 0.35);
}
.btn-counsel:hover { background: #eaa000; text-decoration: none !important; }

.nav__toggle {
  display: none; background: var(--primary-soft); border: 0; border-radius: 10px;
  width: 42px; height: 42px; cursor: pointer; color: var(--primary-dark);
}
.nav__toggle svg { width: 22px; height: 22px; margin: auto; }

/* Dims the page while the mobile menu is open. Sits just under the header's
   z-index of 100 so the bar and the menu stay lit and everything below is
   clearly behind them. Created by main.js, and tapping it closes the menu. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 99; display: block;
  width: 100%; border: 0; padding: 0; cursor: pointer;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0; transition: opacity 0.18s ease;
}
.nav-scrim.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }
@media (min-width: 961px) { .nav-scrim { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 700; font-size: 0.95rem; padding: 12px 20px; border-radius: 999px;
  border: 1px solid transparent; transition: transform 0.05s ease, box-shadow 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); }
.btn--primary:hover { background: var(--primary-dark); }
.btn--ghost { background: #fff; color: var(--primary-dark); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--primary); }
.btn--accent { background: var(--accent); color: #3b2a00; box-shadow: 0 8px 20px rgba(245,159,11,.3); }
.btn--sm { padding: 9px 14px; font-size: 0.85rem; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(37,99,235,.18), transparent),
    linear-gradient(160deg, #eef2ff 0%, #f8fafc 60%);
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--line);
}
.hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.hero__eyebrow {
  display: inline-block; background: #fff; border: 1px solid var(--line);
  color: var(--primary-dark); font-weight: 700; font-size: 0.8rem;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.03em; }
.hero h1 .grad { background: linear-gradient(90deg, var(--primary), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.12rem; color: var(--slate); margin: 0 0 24px; max-width: 44ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.hero__stat strong { display: block; font-size: 1.6rem; color: var(--primary-dark); }
.hero__stat span { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.hero__art {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: 22px;
}
.hero__art h2 { margin: 0 0 4px; font-size: 1.05rem; }
.hero__art .mini-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.hero__art .mini-list li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--slate); font-size: 0.92rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex: 0 0 auto; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section--tint { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.section__head.left { margin-left: 0; text-align: left; }
.section__kicker { color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; }
.section__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 10px; letter-spacing: -0.02em; }
.section__head p { color: var(--muted); margin: 0; }

/* ---------- Section cards grid (home) ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }
.card__icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-dark); margin-bottom: 14px; font-size: 1.4rem;
}
.card h3 { margin: 0 0 6px; font-size: 1.12rem; color: var(--ink); }
.card p { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; flex: 1; }
.card__link { font-weight: 700; color: var(--primary); font-size: 0.9rem; }

/* ---------- Resource list (section pages) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--primary-dark), var(--primary));
  color: #fff; padding: 52px 0 44px;
}
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(255,255,255,.85); }
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0 8px; letter-spacing: -0.02em; }
.page-hero p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.92); font-size: 1.05rem; }
/* A link inside the hero would otherwise take --primary, which is the same
   blue as this background, so "personal plan at ₹1,199" vanished into it. */
.page-hero p a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; text-decoration-color: #fde68a; }
.page-hero p a:hover { color: #fde68a; }
.breadcrumb { font-size: 0.85rem; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

.resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.resource {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px;
}
.resource__top { display: flex; gap: 14px; align-items: flex-start; }
.resource__badge {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 0.82rem; background: var(--primary-soft); color: var(--primary-dark);
}
.resource__badge.pdf { background: #fee2e2; color: #b91c1c; }
.resource__badge.link { background: #dcfce7; color: #15803d; }
.resource__badge.test { background: #ede9fe; color: #6d28d9; }
.resource h3 { margin: 0 0 4px; font-size: 1.05rem; }
.resource p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.resource__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: #92600b;
}
.subject-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 0.85rem; color: var(--slate); }
.chip:hover { border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }

.callout {
  background: var(--accent-soft); border: 1px solid #fcd989; border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: 16px 18px; margin: 26px 0; color: #7a4f00;
}
.callout strong { color: #6b4400; }

.note { color: var(--muted); font-size: 0.85rem; }

/* ---------- Counselling banner ---------- */
.counsel-banner {
  background: linear-gradient(120deg, var(--primary-dark), #4338ca);
  color: #fff; border-radius: 22px; padding: 34px; display: grid;
  grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.counsel-banner h2 { margin: 0 0 6px; font-size: 1.5rem; }
.counsel-banner p { margin: 0; color: rgba(255,255,255,.9); max-width: 60ch; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.post-card:hover { box-shadow: var(--shadow); text-decoration: none; transform: translateY(-3px); transition: .15s; }
.post-card__cover { height: 130px; background: linear-gradient(135deg, var(--primary), #7c3aed); color: #fff; display: grid; place-items: center; font-size: 2rem; }
.post-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__cat { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); }
.post-card h3 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.post-card p { margin: 0; color: var(--muted); font-size: 0.88rem; flex: 1; }
.post-card__meta { font-size: 0.78rem; color: var(--muted); }

/* Article layout */
.article { background: #fff; }
.article__wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.article h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.15; margin: 10px 0 12px; letter-spacing: -0.02em; }
.article__meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.article h2 { margin: 32px 0 10px; font-size: 1.4rem; }
.article h3 { margin: 22px 0 8px; font-size: 1.12rem; }
.article p, .article li { color: var(--slate); font-size: 1.02rem; }
.article ul, .article ol { padding-left: 22px; }
.article blockquote { margin: 22px 0; padding: 12px 18px; border-left: 4px solid var(--primary); background: var(--primary-soft); border-radius: 0 10px 10px 0; color: var(--slate); }

/* ---------- Aptitude test engine ---------- */
.apt-cat { margin-bottom: 26px; }
.apt-cat__title { font-size: 1.15rem; margin: 0 0 12px; color: var(--ink); }
.apt-cat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.apt-topic-btn {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; text-align: left; transition: .15s;
}
.apt-topic-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.apt-topic-btn__name { font-weight: 700; color: var(--ink); }
.apt-topic-btn__meta { font-size: 0.8rem; color: var(--muted); }

.apt-quiz { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-top: 8px; }
.apt-quiz__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.apt-quiz__cat { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.apt-quiz__title { margin: 4px 0 0; font-size: 1.4rem; }
.apt-score { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; white-space: nowrap; }
.apt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }

.apt-q { border-top: 1px solid var(--line); padding: 18px 0; }
.apt-q__text { font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.apt-q__num { color: var(--primary); font-weight: 800; margin-right: 4px; }
.apt-q__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.apt-opt {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px; cursor: pointer; text-align: left; font-size: 0.95rem;
  color: var(--slate); transition: .12s;
}
.apt-opt:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.apt-opt:disabled { cursor: default; }
.apt-opt__key { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--bg); font-weight: 800; font-size: 0.8rem; color: var(--slate); }
.apt-opt.is-correct { border-color: var(--success); background: #dcfce7; color: #14532d; font-weight: 700; }
.apt-opt.is-correct .apt-opt__key { background: var(--success); color: #fff; }
.apt-opt.is-wrong { border-color: #dc2626; background: #fee2e2; color: #7f1d1d; }
.apt-opt.is-wrong .apt-opt__key { background: #dc2626; color: #fff; }
.apt-q__exp { margin-top: 12px; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 14px; color: #7a4f00; font-size: 0.92rem; }

/* ---------- Syllabus branch grid (Engineering) ---------- */
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.branch-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.branch-card h3 { margin: 0; font-size: 1rem; }
.branch-card .note { margin: 0; }

/* ---------- Textbook download rows ---------- */
.book { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 12px; }
.book__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.book__icon { width: 40px; height: 40px; border-radius: 10px; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; flex: 0 0 auto; }
.book h3 { margin: 0; font-size: 1.02rem; }
.book__parts { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 960px) {
  .apt-cat__grid { grid-template-columns: repeat(2, 1fr); }
  .branch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .apt-cat__grid, .apt-q__opts, .branch-grid { grid-template-columns: 1fr; }
}

/* ---------- Aptitude: sidebar + exercise layout ---------- */
.apt-layout { display: grid; grid-template-columns: 268px 1fr; gap: 22px; align-items: start; }
.apt-sidebar {
  position: sticky; top: 82px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px;
  max-height: calc(100vh - 104px); overflow: auto;
}
.apt-side-cat { margin-bottom: 12px; }
.apt-side-cat__name { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 8px 6px; }
.apt-side-topic {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; font-weight: 600; font-size: 0.9rem; color: var(--slate);
}
.apt-side-topic:hover { background: var(--primary-soft); color: var(--primary-dark); }
.apt-side-topic.is-active { background: var(--primary); color: #fff; }
.apt-side-topic__count { font-size: 0.72rem; font-weight: 800; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 2px 8px; }
.apt-side-topic.is-active .apt-side-topic__count { background: rgba(255,255,255,.25); color: #fff; }

.apt-main { min-width: 0; }
.apt-empty { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: 48px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.apt-empty__icon { font-size: 2.4rem; margin-bottom: 8px; }
.apt-empty h2 { margin: 0 0 6px; font-size: 1.3rem; }
.apt-empty p { color: var(--muted); max-width: 44ch; margin: 0 auto; }

/* Chapter-wise "Start Test" list (patshala-style) */
.apt-layout--list { display: block; }
.apt-tests { display: grid; gap: 20px; }
.apt-test-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.apt-test-group__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.08rem; }
.apt-test-group__title .apt-test-group__count { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 3px 10px; }
.apt-test-list { display: grid; gap: 10px; }
.apt-test-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); transition: border-color .15s ease, box-shadow .15s ease; }
.apt-test-row:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.apt-test-row__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apt-test-row__name { font-weight: 700; color: var(--slate); }
.apt-test-row__meta { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.apt-test-row__meta .apt-free { color: #059669; }
.apt-start { flex: 0 0 auto; white-space: nowrap; }
.apt-back { margin-bottom: 14px; }
@media (max-width: 560px) {
  .apt-test-row { flex-direction: column; align-items: stretch; }
  .apt-start { width: 100%; }
}

/* Worked-example flow diagram (used in blogs) */
.flow-ex { display: flex; flex-direction: column; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 20px 0; }
.flow-ex__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; text-align: center; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-sm); }
.flow-ex__box strong { font-size: 1.05rem; color: var(--slate); }
.flow-ex__box span { font-size: 0.82rem; color: var(--muted); }
.flow-ex__tag { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem !important; font-weight: 800; color: var(--primary-dark) !important; }
.flow-ex__box--head { background: var(--primary); border-color: var(--primary); }
.flow-ex__box--head strong { color: #fff; }
.flow-ex__box--cap { border-color: #2563eb; border-width: 2px; }
.flow-ex__box--ils { border-color: #7c3aed; border-width: 2px; }
.flow-ex__box--acap { border-color: #0891b2; border-width: 2px; }
.flow-ex__box--spot { background: #ecfdf5; border-color: #059669; border-width: 2px; }
.flow-ex__box--spot strong { color: #047857; font-size: 1.15rem; }
.flow-ex__arrow { text-align: center; font-size: 0.8rem; color: var(--muted); font-weight: 700; padding: 2px 0; }
.flow-ex__arrow::before { content: "\2193"; display: block; font-size: 1.15rem; color: var(--primary); line-height: 1; }
.flow-ex__split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.flow-ex__col { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 560px) { .flow-ex__split { grid-template-columns: 1fr; } }

.apt-directions { background: var(--primary-soft); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--primary-dark); font-size: 0.92rem; margin: 14px 0 12px; }
.apt-progress { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.apt-progress__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #7c3aed); transition: width .25s ease; }
.apt-progress__label { font-size: 0.8rem; color: var(--muted); margin: 6px 0 0; font-weight: 600; }

.apt-result { display: flex; gap: 16px; align-items: center; border-radius: var(--radius-sm); padding: 16px 18px; margin: 16px 0 4px; }
.apt-result--good { background: #dcfce7; border: 1px solid #86efac; }
.apt-result--ok { background: var(--accent-soft); border: 1px solid #fcd989; }
.apt-result--low { background: #fee2e2; border: 1px solid #fca5a5; }
.apt-result__score { font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.apt-result__body { color: var(--slate); font-size: 0.95rem; }
.apt-result__body .btn { margin-left: 6px; margin-top: 6px; }

/* ---------- Counselling page ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.benefit { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.benefit__check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #dcfce7; color: #15803d; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
.benefit p { margin: 0; color: var(--slate); font-size: 0.94rem; }
.benefit strong { color: var(--ink); }
.pill-free { display: inline-block; background: #dcfce7; color: #15803d; font-weight: 800; font-size: 0.8rem; padding: 6px 14px; border-radius: 999px; }
.yt-cta { background: linear-gradient(120deg, #7f1d1d, #dc2626); color: #fff; border-radius: 22px; padding: 36px; text-align: center; }
.yt-cta h2 { margin: 0 0 8px; font-size: 1.6rem; }
.yt-cta p { margin: 0 auto 18px; color: rgba(255,255,255,.94); max-width: 54ch; }
.btn--yt { background: #fff; color: #b91c1c; font-weight: 800; }
.btn--yt:hover { background: #fef2f2; }

@media (max-width: 860px) {
  .apt-layout { grid-template-columns: 1fr; }
  .apt-sidebar { position: static; max-height: none; }
  .apt-sidebar__inner { display: flex; overflow-x: auto; gap: 16px; }
  .apt-side-cat { flex: 0 0 auto; min-width: 180px; margin-bottom: 0; }
}
@media (max-width: 560px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .apt-result { flex-direction: column; align-items: flex-start; }
}

/* ---------- Footer ---------- */
.site-footer { background: #0b1220; color: #cbd5e1; padding: 48px 0 26px; margin-top: 20px; }
.ic { flex: 0 0 auto; vertical-align: middle; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.social-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: #1e293b; color: #e2e8f0 !important; border: 1px solid #334155; }
.social-btn:hover { text-decoration: none; }
.social-btn--yt:hover { background: #7f1d1d; border-color: #b91c1c; }
.social-btn--ig:hover { background: #831843; border-color: #be185d; }
.social-btn--wa:hover { background: #14532d; border-color: #16a34a; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-footer h4 { color: #fff; font-size: 0.95rem; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #cbd5e1; font-size: 0.9rem; }
.site-footer a:hover { color: #fff; }
.footer-brand p { color: #94a3b8; font-size: 0.9rem; max-width: 40ch; }
.footer-bottom { border-top: 1px solid #1e293b; margin-top: 30px; padding-top: 18px; font-size: 0.82rem; color: #94a3b8; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav__links {
    /* Anchored to the bottom of the nav rather than a fixed 64px, which was
       two pixels short of the header and shifted whenever the bar resized. */
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 10px; display: none;
    /* Above the page and above the scrim that dims it. */
    z-index: 2;
    /* The page behind is mostly white cards, so the panel needs an edge of
       its own; with only the default shadow the menu and the card below it
       read as one merged box. */
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    /* A short phone in landscape must scroll the menu, not lose the bottom. */
    max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 14px; }
  .nav__toggle { display: grid; place-items: center; }
  .counsel-banner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cards, .resource-grid, .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 32px; }
}

/* ---------- FAQ accordion (SEO + rich results) ---------- */
.faq-list { max-width: 820px; margin: 8px auto 0; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item > summary { cursor: pointer; padding: 16px 18px; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.4rem; color: var(--primary); line-height: 1; flex: 0 0 auto; }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > div { padding: 0 18px 16px; color: var(--muted); line-height: 1.65; }
.faq-item a { color: var(--primary); font-weight: 600; }

/* ---------- Comparison table (blog) ---------- */
/* Tables with 4+ columns cannot fit a 390px phone, so they scroll inside this
   wrapper instead of widening the whole page. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; scrollbar-width: thin; }
.tbl-scroll > .cmp-table { margin: 0; }
/* Keep the scrollbar drawn so it is obvious on a phone that there is more
   table to the right, rather than looking like the last column is missing. */
.tbl-scroll::-webkit-scrollbar { height: 8px; }
.tbl-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
@media (max-width: 640px) {
  .tbl-scroll > .cmp-table { font-size: .88rem; }
  .tbl-scroll > .cmp-table th, .tbl-scroll > .cmp-table td { padding: 8px 9px; }
}
.cmp-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.95rem; }
.cmp-table th, .cmp-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.cmp-table thead th { background: var(--primary-soft); color: var(--primary-dark); }
.cmp-table tbody tr:nth-child(even) { background: var(--bg); }

/* ---------- Simple content page (about / contact) ---------- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { margin-top: 28px; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; box-shadow: var(--shadow-sm); }
.contact-card a { color: var(--primary); font-weight: 700; display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }

/* ---------- Counselling: upgraded benefit cards ---------- */
.benefit { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 16px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c7d2fe; }
.benefit__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; background: var(--primary-soft); }
.benefit__t { margin: 0 0 3px; font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.benefit__d { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 6px 0 24px; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow-sm); }
.trust-chip strong { color: var(--primary); }

/* ============================================================
   Mock-exam engine (PCM full test) — NTA/collegedost style
   ============================================================ */
.btn--lg { padding: 15px 30px; font-size: 1.05rem; border-radius: 12px; }
/* Intro */
.ex-intro { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); max-width:820px; margin:0 auto; }
.ex-badge { display:inline-block; background:var(--primary-soft); color:var(--primary-dark); font-weight:800; font-size:.8rem; padding:5px 12px; border-radius:999px; }
.ex-intro h2 { margin:12px 0 6px; font-size:1.7rem; color:var(--ink); }
.ex-intro__sub { color:var(--muted); line-height:1.6; margin:0 0 20px; }
.ex-namebox { margin:0 0 18px; text-align:left; }
.ex-namebox label { display:block; font-weight:700; font-size:.92rem; margin:0 0 6px; }
.ex-namebox label span { font-weight:500; color:var(--muted); }
.ex-namebox input { width:100%; max-width:360px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; font-size:1rem; font-family:inherit; }
.ex-namebox input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.ex-greet { background:var(--primary-soft); color:var(--primary-dark); border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:1rem; }
.ex-analysis { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .ex-analysis { grid-template-columns:1fr; } }
.ex-anacard { border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.ex-anacard h4 { margin:0 0 10px; }
.ex-anacard ul { margin:0; padding-left:18px; }
.ex-anacard li { margin:4px 0; }
.ex-anacard--strong { background:#f0fdf4; border-color:#bbf7d0; }
.ex-anacard--strong h4 { color:#166534; }
.ex-anacard--weak { background:#fef2f2; border-color:#fecaca; }
.ex-anacard--weak h4 { color:#b91c1c; }
.ex-expl--meta { background:var(--bg); border-left:3px solid var(--primary); padding:8px 12px; border-radius:8px; margin-top:8px; }

/* Chapter test builder */
.ct-builder { max-width:760px; margin:0 auto; background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; }
/* minmax(0,...) and min-width:0 stop a long <option> (chapter names run to 45+
   characters) from setting the track's min-content width and overflowing. */
.ct-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin:18px 0; }
@media (max-width:640px){ .ct-grid { grid-template-columns:minmax(0,1fr); } }
.ct-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ct-field label { font-weight:700; font-size:.9rem; }
.ct-field select, .ct-field input { padding:11px 12px; border:1.5px solid var(--line); border-radius:12px; font-size:1rem; font-family:inherit; background:#fff; width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.ct-field select:focus, .ct-field input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.ct-quick { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 2px; }
.ct-quick button { border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font-weight:700; font-size:.86rem; cursor:pointer; }
.ct-quick button.is-active { background:var(--primary-soft); border-color:#c7d2fe; color:var(--primary-dark); }
.ct-note { color:var(--muted); font-size:.9rem; margin:8px 0 0; }
.ct-attempts { margin-top:26px; }
.ct-attempts table { width:100%; border-collapse:collapse; font-size:.92rem; }
.ct-attempts th, .ct-attempts td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.ct-attempts th { color:var(--muted); font-weight:700; }
.ex-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.ex-fact { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; text-align:center; }
.ex-fact strong { display:block; font-size:1.25rem; color:var(--primary); }
.ex-fact span { color:var(--muted); font-size:.82rem; }
.ex-instructions { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 20px; margin-bottom:22px; }
.ex-instructions h3 { margin:0 0 8px; font-size:1.05rem; }
.ex-instructions ul { margin:0; padding-left:20px; color:var(--muted); line-height:1.7; }
.ex-instructions strong { color:var(--ink); }

/* App shell */
.ex-app { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.ex-topbar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--ink); color:#fff; flex-wrap:wrap; }
.ex-topbar__title { font-weight:800; margin-right:auto; }
.ex-timer-wrap { font-size:.85rem; color:#cbd5e1; display:flex; align-items:center; gap:8px; }
.ex-timer { font-variant-numeric:tabular-nums; font-weight:800; font-size:1.15rem; color:#fff; background:rgba(255,255,255,.12); padding:4px 10px; border-radius:8px; }
.ex-timer--warn { background:var(--bad); animation:expulse 1s infinite; }
@keyframes expulse { 50% { opacity:.55; } }
.ex-palette-toggle { display:none; }

.ex-subtabs { display:flex; gap:6px; padding:10px 16px; border-bottom:1px solid var(--line); overflow-x:auto; }
.ex-subtab { flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--muted); font-weight:700; padding:8px 16px; border-radius:999px; cursor:pointer; }
.ex-subtab.is-active { background:var(--primary); color:#fff; border-color:var(--primary); }

.ex-body { display:grid; grid-template-columns:1fr 300px; }
.ex-qpane { padding:22px 24px; border-right:1px solid var(--line); min-height:420px; }
.ex-qhead { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.ex-qno { font-weight:800; color:var(--ink); }
.ex-qno__sub { font-weight:600; color:var(--muted); font-size:.85rem; }
.ex-diff { font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.ex-diff--easy { background:#dcfce7; color:#166534; }
.ex-diff--moderate, .ex-diff--medium { background:#fef3c7; color:#92400e; }
.ex-diff--difficult, .ex-diff--hard { background:#fee2e2; color:#991b1b; }
.ex-qtext { font-size:1.12rem; line-height:1.6; color:var(--ink); margin-bottom:18px; font-weight:600; }
/* Vector notation. The combining arrow U+20D7 is absent from the UI fonts, so
   mock-exam.js turns it into this span and the bar is drawn by the browser,
   which positions it correctly and never collides with the next character. */
.ex-vec { text-decoration:overline; text-decoration-thickness:from-font; }
/* Room for the circumflex on k̂, which the font hangs past the letter. */
.ex-hat { margin-right:.14em; }
.ex-opts { display:grid; gap:10px; }
.ex-opt { display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; cursor:pointer; transition:border-color .12s, background .12s; }
.ex-opt:hover { border-color:#c7d2fe; }
.ex-opt.is-sel { border-color:var(--primary); background:var(--primary-soft); }
.ex-opt input { accent-color:var(--primary); width:18px; height:18px; flex:0 0 auto; }
.ex-opt__key { font-weight:800; color:var(--primary); flex:0 0 auto; }
.ex-opt__txt { color:var(--ink); }
/* Scanned-paper questions: the printed block carries its own options, so the
   answer row collapses to compact A/B/C/D keys. */
.ex-qpic, .ex-rpic, .ex-solpic { margin:0 0 14px; }
.ex-qpic img, .ex-rpic img, .ex-solpic img {
  display:block; width:100%; max-width:560px; height:auto;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;
}
.ex-solpic { margin:10px 0 0; }
.ex-pickhint { margin:0 0 10px; font-size:.85rem; color:var(--muted); }
.ex-opts--keys { display:flex; flex-wrap:wrap; gap:10px; }
.ex-opt--key { flex:0 0 auto; min-width:82px; justify-content:center; padding:11px 18px; }
.ex-opt--key .ex-opt__key { font-size:1rem; }

.ex-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ex-actions #ex-next { margin-left:auto; }

/* Palette */
.ex-palette { padding:16px; background:var(--bg); }
.ex-legend { display:grid; gap:6px; margin-bottom:14px; font-size:.8rem; color:var(--muted); }
.ex-lg { display:flex; align-items:center; gap:8px; }
.ex-lg b { margin-left:auto; color:var(--ink); }
.ex-dot { width:14px; height:14px; border-radius:4px; display:inline-block; }
.ex-palette__group h4 { margin:12px 0 8px; font-size:.85rem; color:var(--ink); }
.ex-cells { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.ex-cell { aspect-ratio:1; border:1px solid var(--line); border-radius:8px; font-weight:800; font-size:.82rem; cursor:pointer; color:#fff; }
.ex-cell--answered { background:var(--ok); border-color:var(--ok); }
.ex-cell--notans { background:var(--bad); border-color:var(--bad); }
.ex-cell--notvisited { background:#fff; color:var(--muted); }
.ex-cell--mark { background:var(--pur); border-color:var(--pur); }
.ex-cell--ansmark { background:var(--pur); border-color:var(--pur); position:relative; }
.ex-cell--ansmark::after { content:"\2714"; position:absolute; top:-4px; right:-4px; background:var(--ok); color:#fff; width:15px; height:15px; border-radius:50%; font-size:.6rem; display:grid; place-items:center; }
.ex-cell.is-current { outline:3px solid var(--primary); outline-offset:1px; }

/* Overlay + modal */
.ex-overlay { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1000; }
.ex-overlay.is-modal { display:grid; place-items:center; padding:20px; }
.ex-modal { background:#fff; border-radius:var(--radius); padding:26px; max-width:440px; width:100%; box-shadow:var(--shadow); }
.ex-modal h3 { margin:0 0 6px; }
.ex-modal p { color:var(--muted); margin:0 0 16px; }
.ex-modal__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.ex-modal__stats div { background:var(--bg); border-radius:var(--radius-sm); padding:12px; text-align:center; }
.ex-modal__stats strong { display:block; font-size:1.4rem; color:var(--primary); }
.ex-modal__stats span { font-size:.78rem; color:var(--muted); }
.ex-modal__btns { display:flex; gap:10px; justify-content:flex-end; }

/* Result */
.ex-result { max-width:900px; margin:0 auto; }
.ex-scoreband { display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:var(--radius); padding:26px 30px; color:#fff; flex-wrap:wrap; }
.ex-scoreband--excellent { background:linear-gradient(135deg,#059669,#10b981); }
.ex-scoreband--verygood { background:linear-gradient(135deg,#2563eb,#3b82f6); }
.ex-scoreband--good { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
.ex-scoreband--average { background:linear-gradient(135deg,#d97706,#f59e0b); }
.ex-scoreband--low { background:linear-gradient(135deg,#b91c1c,#ef4444); }
.ex-scoreband__label { display:block; font-size:.85rem; opacity:.85; }
.ex-scoreband__score { display:block; font-size:2.6rem; font-weight:800; line-height:1.1; }
.ex-scoreband__score small { font-size:1.1rem; opacity:.8; font-weight:600; }
.ex-scoreband__pill { display:inline-block; margin-top:8px; background:rgba(255,255,255,.2); padding:5px 14px; border-radius:999px; font-weight:800; }
.ex-scoreband__ring { --p:0; width:110px; height:110px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#fff calc(var(--p)*1%), rgba(255,255,255,.25) 0); flex:0 0 auto; }
.ex-scoreband__ring span { width:82px; height:82px; border-radius:50%; background:rgba(0,0,0,.12); display:grid; place-items:center; font-weight:800; font-size:1.2rem; }
.ex-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:18px 0; }
.ex-kpi { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; text-align:center; box-shadow:var(--shadow-sm); }
.ex-kpi strong { display:block; font-size:1.5rem; color:var(--ink); }
.ex-kpi strong.ok { color:var(--ok); } .ex-kpi strong.bad { color:var(--bad); } .ex-kpi strong.mut { color:var(--muted); }
.ex-kpi span { font-size:.8rem; color:var(--muted); }
.ex-h { margin:26px 0 14px; font-size:1.3rem; }
.ex-scards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ex-scard { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; box-shadow:var(--shadow-sm); }
.ex-scard__head { display:flex; justify-content:space-between; font-weight:800; margin-bottom:10px; }
.ex-scard__head span { color:var(--primary); }
.ex-bar { height:9px; background:var(--line); border-radius:999px; overflow:hidden; }
.ex-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--primary),#60a5fa); border-radius:999px; }
.ex-scard__meta { display:flex; gap:12px; margin-top:10px; font-size:.8rem; font-weight:700; }
.ex-scard__meta .ok { color:var(--ok); } .ex-scard__meta .bad { color:var(--bad); } .ex-scard__meta .mut { color:var(--muted); }
.ex-result__cta { display:flex; gap:12px; flex-wrap:wrap; margin:26px 0; }

/* Review */
.ex-rfilter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ex-chip { border:1px solid var(--line); background:#fff; color:var(--muted); font-weight:700; padding:7px 14px; border-radius:999px; cursor:pointer; font-size:.85rem; }
.ex-chip.is-active { background:var(--primary); color:#fff; border-color:var(--primary); }
.ex-rcards { display:grid; gap:14px; }
.ex-rcard { background:#fff; border:1px solid var(--line); border-left:5px solid var(--line); border-radius:var(--radius-sm); padding:18px; box-shadow:var(--shadow-sm); }
.ex-rcard--correct { border-left-color:var(--ok); }
.ex-rcard--wrong { border-left-color:var(--bad); }
.ex-rcard--skipped { border-left-color:var(--warn); }
.ex-rcard__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ex-rtags { display:flex; gap:6px; flex-wrap:wrap; margin-right:auto; }
.ex-tag { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.72rem; font-weight:700; color:var(--muted); }
.ex-rstatus { font-size:.75rem; font-weight:800; padding:3px 12px; border-radius:999px; }
.ex-rstatus--correct { background:#dcfce7; color:#166534; }
.ex-rstatus--wrong { background:#fee2e2; color:#991b1b; }
.ex-rstatus--skipped { background:#fef3c7; color:#92400e; }
.ex-rlist { list-style:none; padding:0; margin:6px 0 12px; display:grid; gap:6px; }
.ex-rlist li { padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); }
.ex-rlist li.is-correct { background:#f0fdf4; border-color:#86efac; }
.ex-rlist li.is-wrong { background:#fef2f2; border-color:#fca5a5; }
.ex-tick { color:var(--ok); font-weight:800; font-size:.75rem; margin-left:6px; }
.ex-cross { color:var(--bad); font-weight:800; font-size:.75rem; margin-left:6px; }
.ex-ans { display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; margin-bottom:8px; color:var(--muted); }
.ex-ans b { color:var(--ink); }
.ex-expl { background:var(--primary-soft); border-radius:var(--radius-sm); padding:12px 14px; color:var(--ink); line-height:1.6; font-size:.92rem; }
.ex-expl b { color:var(--primary-dark); }

@media (max-width:860px) {
  .ex-facts { grid-template-columns:repeat(2,1fr); }
  .ex-body { grid-template-columns:1fr; }
  .ex-qpane { border-right:none; border-bottom:1px solid var(--line); }
  .ex-palette-toggle { display:inline-block; }
  .ex-palette { position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:1001; transform:translateX(105%); transition:transform .25s ease; overflow:auto; box-shadow:-10px 0 30px rgba(0,0,0,.15); }
  .ex-palette.is-open { transform:translateX(0); }
  .ex-kpis { grid-template-columns:repeat(2,1fr); }
  .ex-scards { grid-template-columns:1fr; }
  .ex-actions #ex-next { margin-left:0; }
}

/* Blogs keyword search */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.blog-search { position:relative; max-width:560px; margin:0 0 22px; }
.blog-search__ic { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); display:flex; }
.blog-search input { width:100%; padding:14px 16px 14px 46px; border:1.5px solid var(--line); border-radius:999px; font-size:1rem; font-family:inherit; background:#fff; box-shadow:var(--shadow-sm); }
.blog-search input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.blog-noresults { color:var(--muted); background:var(--bg); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:16px; text-align:center; }

/* Test flow strip: Topic-wise -> Full-Length */
.flow-strip { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.flow-step { display:inline-flex; align-items:center; background:#fff; border:1.5px solid var(--line); color:var(--muted); font-weight:800; font-size:.85rem; padding:8px 16px; border-radius:999px; }
.flow-step.is-active { background:var(--primary-soft); border-color:#c7d2fe; color:var(--primary-dark); }
.flow-arrow { color:var(--primary); font-weight:800; font-size:1.1rem; }

/* Feature banner (links to full mock test) */
.feature-banner { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); color:#fff; border-radius:var(--radius); padding:18px 22px; margin:0 0 26px; box-shadow:var(--shadow); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.feature-banner:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(37,99,235,.28); text-decoration:none; }
.feature-banner__ic { flex:0 0 auto; width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.18); display:grid; place-items:center; color:#fff; }
.feature-banner__txt { display:flex; flex-direction:column; gap:3px; }
.feature-banner__txt strong { font-size:1.05rem; }
.feature-banner__txt span { font-size:.9rem; opacity:.92; line-height:1.5; }
.feature-banner__cta { margin-left:auto; flex:0 0 auto; background:#fff; color:var(--primary-dark); font-weight:800; padding:10px 18px; border-radius:999px; white-space:nowrap; }
@media (max-width:640px) { .feature-banner { flex-wrap:wrap; } .feature-banner__cta { margin-left:0; } }

/* ============================================================
   Percentile predictor (MHT-CET)
   ============================================================ */
.pp-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); max-width:640px; }
.pp-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.pp-field { flex:1 1 200px; }
.pp-field label { display:block; font-weight:700; color:var(--ink); margin-bottom:6px; font-size:.9rem; }
.pp-field input, .pp-field select { width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:1rem; font-family:inherit; }
.pp-field input:focus, .pp-field select:focus { outline:none; border-color:var(--primary); }
.pp-out { margin-top:20px; display:none; }
.pp-out.is-on { display:block; }
.pp-result { display:flex; align-items:center; gap:22px; background:linear-gradient(135deg,var(--primary),#3b82f6); color:#fff; border-radius:var(--radius); padding:22px 26px; flex-wrap:wrap; }
.pp-result__big { font-size:2.6rem; font-weight:800; line-height:1; }
.pp-result__big small { font-size:1rem; font-weight:600; opacity:.85; }
.pp-result__lbl { font-size:.85rem; opacity:.9; }
.pp-band { display:grid; gap:8px; margin-top:16px; }
.pp-brow { display:flex; align-items:center; gap:12px; font-size:.9rem; }
.pp-brow .pp-bar { flex:1; height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
.pp-brow .pp-bar span { display:block; height:100%; background:var(--primary); border-radius:999px; }
.pp-note { margin-top:14px; font-size:.85rem; color:var(--muted); background:var(--bg); border-left:3px solid var(--warn); padding:10px 14px; border-radius:8px; line-height:1.6; }

/* ---- Student college-list PDF download form ---- */
.spf-card { max-width:640px; margin:0 auto; background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px; }
.spf-card > h2 { margin:0 0 8px; }
.spf-sub { color:var(--muted); margin:0 0 22px; line-height:1.6; }
.spf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:560px){ .spf-grid { grid-template-columns:1fr; } }
.spf-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.spf-field label { font-weight:700; font-size:.95rem; }
.spf-opt { font-weight:500; color:var(--muted); font-size:.85rem; }
.spf-field input { padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; font-size:1rem; font-family:inherit; background:#fff; }
.spf-field input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.spf-card form > .btn { width:100%; justify-content:center; padding:14px; font-size:1.05rem; }
.spf-foot { text-align:center; color:var(--muted); font-size:.85rem; margin:18px 0 0; }
.spf-msg { margin-top:18px; padding:14px 16px; border-radius:12px; font-size:.95rem; line-height:1.6; }
.spf-msg--info { background:var(--primary-soft); color:var(--primary-dark); }
.spf-msg--ok { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.spf-msg--err { background:#fef2f2; color:#b91c1b; border:1px solid #fecaca; }
.spf-result { margin-top:18px; }
.spf-ok { font-weight:700; color:#166534; margin:0 0 12px; }
.spf-viewer { border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#f1f5f9; }
.spf-viewer iframe { width:100%; height:70vh; min-height:420px; border:0; display:block; }
.spf-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.spf-note { margin-top:12px; font-size:.85rem; color:var(--muted); }

/* ===== Feedback slideshow (counselling) ===== */
.fb-slider { position: relative; max-width: 760px; margin: 8px auto 0; }
.fb-viewport { overflow: hidden; border-radius: 16px; }
.fb-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
.fb-slide { flex: 0 0 100%; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; display: flex; justify-content: center; align-items: center; }
.fb-slide img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.12); background: #e9edf3; }
.fb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(17,17,17,.6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; z-index: 2; }
.fb-arrow:hover { background: var(--accent); color: #3b2a00; transform: translateY(-50%) scale(1.06); }
.fb-arrow--prev { left: -12px; }
.fb-arrow--next { right: -12px; }
.fb-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.fb-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: #d6d6d6; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.fb-dot.is-active { background: var(--accent); transform: scale(1.3); }
@media (max-width: 560px) {
  .fb-arrow { width: 38px; height: 38px; font-size: 22px; }
  .fb-arrow--prev { left: 4px; }
  .fb-arrow--next { right: 4px; }
}

/* Feedback slider — designed posts, two per slide */
.fb-slider--posts { max-width: 920px; }
.fb-slider--posts .fb-slide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; padding: 2px; }
.fb-slider--posts .fb-slide img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.16); background: #0b1220; }
.fb-slider--posts .fb-slide--single { grid-template-columns: minmax(0, 452px); justify-content: center; }
@media (max-width: 560px) { .fb-slider--posts .fb-slide { gap: 10px; } }

/* YouTube channel membership promo */
.member-cta { margin-top: 22px; background: linear-gradient(125deg, #111827, #0b1324); color: #fff; border-radius: 22px; padding: 34px; text-align: center; border: 1px solid rgba(255,255,255,.08); }
.member-cta__badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: #dc2626; padding: 6px 12px; border-radius: 999px; }
.member-cta h2 { margin: 12px 0 8px; font-size: 1.5rem; }
.member-cta p { margin: 0 auto 16px; max-width: 62ch; color: rgba(255,255,255,.9); }
.member-cta__perks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.member-perk { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.btn--member { background: linear-gradient(120deg, #f59e0b, #f97316); color: #3b2a00; font-weight: 800; }
.btn--member:hover { filter: brightness(1.05); }

/* ===== Fixed full-length paper player (assets/js/paper-player.js) ===== */
.pp-startrow { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pp-app { overflow:visible; }
/* Keep the timer and submit button reachable through a three-hour paper,
   parked just below the sticky site header. */
.pp-app .ex-topbar { position:sticky; top:var(--mm-header-h,0px); z-index:90; }
.pp-app .ex-body { grid-template-columns:1fr 320px; }
.pp-viewer { padding:16px; border-right:1px solid var(--line); min-width:0; }
.pp-pagebar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.pp-pageno { margin-left:auto; font-size:.85rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.pp-pagewrap { background:#f1f5f9; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; overflow:auto; }
.pp-page { display:block; width:100%; height:auto; background:#fff; border-radius:4px; }
.pp-hint { margin:10px 0 0; }

.pp-sheet { padding:16px; background:var(--bg); }
.pp-sheet__head h4 { margin:0 0 2px; }
.pp-sheet__head p { margin:0 0 12px; }
.pp-sheet__group { margin-bottom:16px; }
.pp-sheet__group h5 { margin:0 0 8px; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pp-sheet__group h5 .note { text-transform:none; letter-spacing:0; font-weight:600; }
.pp-rows { display:grid; gap:4px; }
.pp-row { display:flex; align-items:center; gap:5px; padding:2px 4px; border-radius:6px; }
.pp-row.is-done { background:#eef2ff; }
.pp-row__no { width:30px; flex:0 0 auto; font-size:.8rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.pp-bub { flex:1 1 0; min-width:0; border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:800; font-size:.78rem; line-height:1; padding:6px 0; border-radius:6px; cursor:pointer; }
.pp-bub:hover { border-color:#c7d2fe; }
.pp-bub.is-sel { background:var(--primary); border-color:var(--primary); color:#fff; }

.pp-rtable-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.pp-rtable { width:100%; border-collapse:collapse; font-size:.9rem; }
.pp-rtable th, .pp-rtable td { padding:8px 12px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.pp-rtable th { background:var(--bg); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pp-rtable tbody tr:last-child td { border-bottom:none; }
.pp-rrow__mine, .pp-rrow__key { font-weight:800; font-variant-numeric:tabular-nums; }
.pp-rrow--correct .pp-rrow__mine { color:var(--ok, #16a34a); }
.pp-rrow--wrong .pp-rrow__mine { color:var(--bad, #dc2626); }
.pp-rrow--wrong { background:#fef2f2; }
.pp-rrow--blank { background:#f8fafc; }
.pp-rrow__key { color:var(--primary); }

.pp-solview { margin-top:16px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; background:#fff; }
.pp-linkbtn { border:none; background:none; padding:0; color:var(--primary); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; }
.pp-allsol { margin-top:16px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; background:#fff; }
.pp-allsol summary { font-weight:700; cursor:pointer; }
.pp-solstrip { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }

.pp-keygrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:18px 0; }
.pp-keyblock { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; background:#fff; }
.pp-keyblock h4 { margin:0 0 10px; }
.pp-keylist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:4px; font-size:.85rem; font-variant-numeric:tabular-nums; }
.pp-keylist li { padding:3px 6px; background:var(--bg); border-radius:4px; }
.pp-keylist b { color:var(--muted); font-weight:700; }

@media (max-width:860px) {
  .pp-app .ex-body { grid-template-columns:1fr; }
  .pp-viewer { border-right:none; border-bottom:1px solid var(--line); }
  .pp-sheet { position:fixed; top:0; right:0; bottom:0; width:min(340px,90vw); z-index:1001; transform:translateX(105%); transition:transform .25s ease; overflow:auto; box-shadow:-10px 0 30px rgba(0,0,0,.15); }
  .pp-sheet.is-open { transform:translateX(0); }
}

/* ---------- Counselling: free vs paid ---------- */
/* Two plan cards over a feature table. The table is the honest part: a
   student deciding whether to pay should be able to see, in one screen,
   exactly which lines they are paying for. */
/* ---------- Project kits ---------- */
.proj-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0; }
.proj-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm); }
.proj-card h3 { margin:0; font-size:1.02rem; line-height:1.35; }
.proj-card__kind { align-self:flex-start; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; padding:4px 10px; border-radius:999px; }
.proj-card__kind--web { background:#dbeafe; color:#1d4ed8; }
.proj-card__kind--app { background:#dcfce7; color:#15803d; }
.proj-card__desc { margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.proj-card__stack { display:flex; flex-wrap:wrap; gap:6px; }
.proj-card__stack span { font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px; background:var(--bg); color:var(--slate); border:1px solid var(--line); }
.proj-card .btn { margin-top:auto; justify-content:center; }
@media (max-width:860px) { .proj-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .proj-grid { grid-template-columns:minmax(0,1fr); } }

.plans { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:34px; }
.plan { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.plan--paid { border-color:var(--primary); box-shadow:0 14px 34px rgba(37,99,235,.16); }
.plan__tag { position:absolute; top:-12px; right:20px; background:var(--primary); color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.plan h3 { margin:0 0 4px; font-size:1.3rem; color:var(--ink); }
.plan__sub { margin:0 0 16px; color:var(--muted); font-size:.93rem; }
.plan__price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.plan__amt { font-size:2.3rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.plan__was { font-size:1.15rem; font-weight:700; color:var(--muted); text-decoration:line-through; }
.plan__off { background:#dcfce7; color:#15803d; font-weight:800; font-size:.78rem; padding:4px 10px; border-radius:999px; }
.plan__per { margin:0 0 18px; color:var(--muted); font-size:.86rem; }
.plan .btn { width:100%; justify-content:center; margin-top:auto; }
.plan .btn--yt { border-color:#fecaca; }
.plan .btn--yt:hover { border-color:#f87171; }
.plan__note { margin:12px 0 0; font-size:.82rem; color:var(--muted); text-align:center; }

.cmp { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.cmp table { width:100%; border-collapse:collapse; }
.cmp caption { text-align:left; padding:18px 20px 0; font-weight:800; color:var(--ink); }
.cmp th, .cmp td { padding:13px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.cmp thead th { font-size:.95rem; font-weight:700; color:var(--muted); background:#fff; position:sticky; top:0; z-index:1; }
.cmp thead th:not(:first-child), .cmp td:not(:first-child) { text-align:center; width:19%; }
.cmp tbody tr:last-child td { border-bottom:none; }
.cmp__group td { background:var(--bg); font-weight:800; color:var(--ink); font-size:.93rem; }
.cmp__feat { font-size:.95rem; color:var(--ink); }
/* The tick and cross carry the meaning, so they are not left to colour alone:
   each one also names itself to a screen reader. */
/* U+FE0E in the markup asks for the text form of the tick and cross. Without
   it the emoji font claims U+2714, paints its own black glyph and ignores the
   colour set here, so an included feature looked the same as an excluded one.
   Dropping the emoji font from the stack here keeps that true on platforms
   whose emoji font answers for these code points anyway. */
.cmp__y, .cmp__n { font-size:1.15rem; font-weight:800; line-height:1;
  font-family:-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.cmp__y { color:#16a34a; }
.cmp__n { color:#dc2626; }

/* "What does this mean?" without a tooltip that a phone cannot open: the
   detail is a real line of text, shown small and under the feature name. */
.cmp__note { display:block; margin-top:3px; font-size:.82rem; color:var(--muted); font-weight:400; }

@media (max-width: 760px) {
  .plans { grid-template-columns:1fr; }
  .cmp th, .cmp td { padding:11px 12px; }
  .cmp__feat { font-size:.9rem; }
  .cmp thead th:not(:first-child), .cmp td:not(:first-child) { width:22%; }
}