/* ==========================================================================
   Kash Examination System Professional+ — Frontend / LMS Portal Theme
   ========================================================================== */

:root {
  /* Brand */
  --k-primary: #137b7c;
  --k-primary-dark: #0f6263;
  --k-primary-light: #17a2a3;
  --k-secondary: #17a2a3;
  --k-accent: #2563eb;        /* active nav / links / focus accents */
  --k-accent-dark: #1d4ed8;
  --k-support: #dc2626;       /* 24x7 support red */

  /* Status */
  --k-success: #16a34a;
  --k-success-dark: #15803d;
  --k-warning: #f59e0b;
  --k-danger: #ef4444;

  /* Text + surface */
  --k-ink: #10242b;           /* deep navy/charcoal */
  --k-gray-800: #1f2f36;
  --k-gray-700: #374151;
  --k-gray-600: #4b5f66;
  --k-gray-500: #64798a;
  --k-gray-400: #94a3ab;
  --k-gray-300: #cbd8db;
  --k-gray-200: #e2ebec;
  --k-gray-100: #eef5f5;
  --k-gray-50: #f5faf9;
  --k-teal-50: #eef8f8;
  --k-white: #ffffff;

  --k-radius: 16px;
  --k-radius-sm: 10px;
  --k-shadow: 0 4px 20px rgba(16,36,43,.08);
  --k-shadow-lg: 0 20px 50px rgba(16,36,43,.16);
  --k-shadow-xl: 0 26px 60px rgba(16,36,43,.20);
  --k-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --k-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --k-max: 1180px;
  --k-space: 8px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: var(--k-font); color: var(--k-ink); background: var(--k-white); font-size: 15.5px; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; margin:0; padding:0; }
img { max-width:100%; display:block; }
.k-container { max-width: var(--k-max); margin:0 auto; padding:0 24px; }

/* ---------- Top bar (row 1) ---------- */
/* ---------- Contact utility bar (restored above the compact header) ---------- */
.k-topbar {
  background: #137b7c; color: rgba(255,255,255,.9); font-size: 12px;
}
.k-topbar .k-container { display:flex; justify-content:space-between; align-items:center; padding:11px 24px; flex-wrap: wrap; gap: 14px; }
.k-topbar-meta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.k-topbar-item { display: inline-flex; align-items: center; gap: 10px; }
/* Small colored icon "chip" per contact item — matches the icon-chip
   language used everywhere else on the site (nav, mega-menus, admin cards)
   instead of a bare glyph, the "fully premium" top-bar treatment. A rotating
   palette (same family as the main nav's icon chips) instead of one flat
   translucent circle, so the top bar reads as colorful as the rest of the
   header rather than a single muted exception. */
.k-topbar-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; transition: transform .15s ease, filter .15s ease; box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.k-topbar-item:nth-child(3n+1) .k-topbar-icon { background: #2563eb; }
.k-topbar-item:nth-child(3n+2) .k-topbar-icon { background: #f59e0b; }
.k-topbar-item:nth-child(3n+3) .k-topbar-icon { background: #16a34a; }
.k-topbar-item:hover .k-topbar-icon { filter: brightness(1.14); transform: translateY(-1px); }
.k-topbar-item span { display: flex; flex-direction: column; line-height: 1.25; }
.k-topbar-item strong { font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.k-topbar-item em { font-size: 10px; font-style: normal; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.k-topbar-social { display: flex; align-items: center; gap: 8px; }
.k-topbar-followlabel { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.6); margin-right: 4px; text-transform: uppercase; letter-spacing: .06em; }
/* Each network gets its own real brand color on hover (via :has() on the
   icon glyph already inside the link, no markup change needed) instead of a
   flat monochrome row of glyphs. */
.k-topbar-social a {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-size: 12.5px; background: rgba(255,255,255,.1) !important; transition: all .18s ease;
}
.k-topbar-social a:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(0,0,0,.4); }
.k-topbar-social a:has(.fa-facebook):hover  { background: #1877f2 !important; }
.k-topbar-social a:has(.fa-x-twitter):hover,
.k-topbar-social a:has(.fa-twitter):hover    { background: #000 !important; }
.k-topbar-social a:has(.fa-instagram):hover  { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4) !important; }
.k-topbar-social a:has(.fa-youtube):hover    { background: #ff0000 !important; }
.k-topbar-social a:has(.fa-linkedin):hover,
.k-topbar-social a:has(.fa-linkedin-in):hover { background: #0a66c2 !important; }
.k-topbar-divider { width: 1px; height: 18px; background: rgba(255,255,255,.2); }
.k-topbar-right { display: flex; align-items: center; gap: 18px; }
.k-topbar-support {
  display: flex; align-items: center; gap: 8px; background: var(--k-support); color: #fff !important;
  padding: 7px 16px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 12px -2px rgba(220,38,38,.5);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.k-topbar-support i { color: #fff; }
.k-topbar-support:hover { background: #b91c1c; border-color: rgba(255,255,255,.6); transform: translateY(-1px); box-shadow: 0 6px 16px -2px rgba(220,38,38,.6); }
@media (max-width: 1000px) {
  .k-topbar-meta .k-topbar-item:nth-child(n+2) { display: none; }
}
@media (max-width: 700px) {
  .k-topbar-support span { display: none; }
  .k-topbar-followlabel { display: none; }
}

/* ---------- Shared brand/logo styles — used in both the header and footer ---------- */
.k-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.01em; flex-shrink: 0; }
.k-brand .logo-mark {
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow: 0 6px 16px rgba(19,123,124,.35);
}
.k-brand-logo-img { max-height: 40px; max-width: 160px; width: auto; object-fit: contain; }

/* ---------- Info bar (row 2): logo, tagline, email, auth buttons ---------- */
.k-infobar { background: #fff; border-bottom: 1px solid var(--k-gray-100); }
.k-infobar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 24px; flex-wrap: wrap; }
.k-brand-text { display: flex; flex-direction: column; }
.k-brand-name { font-family: var(--k-font-serif); font-weight: 700; font-size: 20px; letter-spacing: -.005em; color: var(--k-ink); }
.k-brand-tagline { font-size: 10.5px; font-weight: 600; color: var(--k-gray-400); letter-spacing: .09em; text-transform: uppercase; }
.k-infobar-contact { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.k-infobar-item { display: flex; align-items: center; gap: 12px; }
.k-infobar-item i {
  width: 46px; height: 46px; border-radius: 50%; background: var(--k-gray-50); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #137b7c;
}
.k-infobar-item span { display: block; font-size: 11.5px; color: var(--k-gray-500); }
.k-infobar-item strong { display: block; font-size: 14px; color: var(--k-ink); font-weight: 700; }
.k-nav-actions { display:flex; align-items:center; gap:10px; flex-shrink: 0; }
.k-infobar .k-nav-actions .k-btn { border-radius: 10px; padding: 11px 22px; }
.k-infobar .k-brand .logo-mark { width: 54px; height: 54px; border-radius: 16px; font-size: 22px; }

/* Account dropdown (reused in the info bar for logged-in students) */
.k-topheader-account { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px 6px 6px; border-radius: 999px; }
.k-topheader-account:hover { background: var(--k-gray-50); }
.k-topheader-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.k-topheader-name { font-size: 13.5px; font-weight: 700; color: var(--k-ink); }
.k-topheader-account-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; min-width: 190px; background: #fff;
  border-radius: 12px; box-shadow: var(--k-shadow-lg); border: 1px solid var(--k-gray-100); padding: 6px; z-index: 200;
}
.k-topheader-account.open .k-topheader-account-menu { display: block; }
.k-topheader-account-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--k-gray-700); }
.k-topheader-account-menu a:hover { background: var(--k-gray-50); color: var(--k-primary); }
.k-topheader-account-menu a i { width: 14px; color: var(--k-gray-400); }

@media (max-width: 1000px) {
  .k-infobar-contact { display: none; }
}
@media (max-width: 900px) {
  .k-infobar-inner { justify-content: center; }
}


/* ---------- Nav (row 3): institutional bar — uppercase tracked labels,
   underline hover/active indicator instead of a filled pill (deliberately
   more restrained than a typical SaaS nav, closer to a university global-nav
   convention). Shadow-on-scroll toggled by frontend.js (.k-nav-scrolled). ---------- */
.k-nav {
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(180deg, #158788 0%, #0f6263 100%);
  border-bottom: 2px solid rgba(37,99,235,.55);
  padding: 7px 0;
  transition: box-shadow .25s ease;
}
.k-nav.k-nav-scrolled { box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.k-nav-main { display:flex; align-items:center; justify-content: space-between; gap: 16px; height: auto; }

.k-menu { display:flex; align-items:stretch; gap: 0; flex-wrap: nowrap; flex: 1; overflow-x: auto; scrollbar-width: none; }
.k-menu::-webkit-scrollbar { display: none; }
.k-menu li { position: relative; display: flex; align-items: center; }
/* A thin vertical divider between each top-level item (not after the last) —
   inset top/bottom rather than full-height, the small premium-enterprise-nav
   touch this was asked for. Lives on the li itself so it's unaffected by the
   dropdown-toggle button's own absolute positioning inside it. */
.k-menu > li:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px;
  background: rgba(255,255,255,.16);
}
/* Icon-top, label-below nav items — a calmer, more "portal/university" nav
   read than an inline icon+label row, and naturally fills the taller
   2026.2.0 premium nav bar. */
.k-menu > li > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-weight: 700; font-size: 12.5px; color: rgba(255,255,255,.88); padding: 9px 18px;
  border-radius: 12px; margin: 2px 2px; transition: color .15s ease, background .18s ease; white-space: nowrap; position: relative;
}
/* Colored icon "chip" per item — a vivid rotating palette (Udemy/Coursera-
   style category-icon treatment) rather than a plain glyph, which reads as a
   livelier, friendlier e-learning portal than a flat academic text-only nav.
   Sized for the icon-top/label-below layout above, and paired with
   un-tracked, normal-case labels so 8 real top-level items still fit the
   1180px container. */
.k-menu > li > a i {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px;
  font-size: 12.5px; color: #fff; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.k-menu > li:nth-child(6n+1) > a i { background: #2563eb; }
.k-menu > li:nth-child(6n+2) > a i { background: #16a34a; }
.k-menu > li:nth-child(6n+3) > a i { background: #f59e0b; }
.k-menu > li:nth-child(6n+4) > a i { background: #db2777; }
.k-menu > li:nth-child(6n+5) > a i { background: #7c3aed; }
.k-menu > li:nth-child(6n+6) > a i { background: #dc2626; }
.k-menu > li > a:hover i, .k-menu > li > a.active i {
  filter: brightness(1.14); transform: translateY(-2px); box-shadow: 0 6px 14px -2px rgba(0,0,0,.32);
}
.k-menu > li > a::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 5px; height: 3px; border-radius: 2px;
  background: var(--k-warning); transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
/* Hover: soft rounded grey highlight + brightened label — a calmer, more
   neutral "you're pointing at this" state, kept distinct from the gold
   active state below. */
.k-menu > li > a:hover { color: #fff; background: rgba(148,163,184,.24); }
.k-menu > li > a:hover::after { transform: scaleX(1); }
/* Active (current page): a stronger highlight pill + gold underline + gold
   label, so "where you are" reads unmistakably against "what you're
   hovering", and ties to the same gold accent used on Explore/Apply CTAs. */
.k-menu > li > a.active { color: var(--k-warning); font-weight: 800; background: rgba(255,255,255,.14); }
.k-menu > li > a.active::after { transform: scaleX(1); }

/* Dropdown submenu (e.g. Exams > Single Exam / Exam Series) */
.k-dropdown-toggle {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,.6); font-size: 9px;
  position: absolute; bottom: 10px; right: 6px; transition: color .15s ease, transform .15s ease;
}
.has-dropdown.open .k-dropdown-toggle { color: #fff; transform: translateY(-50%) rotate(180deg); }
.k-dropdown-panel {
  display: none; position: fixed; min-width: 210px;
  background: #fff; box-shadow: 0 16px 32px rgba(17,24,39,.18); border: 1px solid var(--k-gray-100);
  padding: 8px; z-index: 500; border-radius: 12px;
}
.has-dropdown.open .k-dropdown-panel { display: block; }
.k-dropdown-panel-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--k-gray-400); padding: 8px 12px 4px;
}
.k-dropdown-panel a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; height: auto;
  font-size: 13px; font-weight: 600; color: var(--k-gray-700); white-space: nowrap; background: none !important;
}
.k-dropdown-panel a i { font-size: 12px; color: var(--k-gray-400); width: 14px; }
.k-dropdown-panel a:hover { background: var(--k-gray-50) !important; color: #2563eb; }
.k-dropdown-panel a:hover i { color: #2563eb; }
.k-dropdown-panel-divider { border-top: 1px solid var(--k-gray-100); margin: 6px 4px; list-style: none; }
.k-dropdown-panel-spacer { height: 8px; list-style: none; }
.k-dropdown-panel-subhead {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-gray-400); padding: 8px 12px 2px; list-style: none;
}
.k-dropdown-panel li .k-mm-desc { display: block; padding: 0 12px 6px 34px; margin-top: -6px; }
/* preview158 round 2, generalized in preview161: a simple-dropdown item's
   real-category rows — same colorful gradient icon chip + live count badge
   as the mega-menu version (.k-mm-cat-ico/b), just laid out inside a plain
   .k-dropdown-panel single-column list instead of a multi-column panel.
   Was Courses-only (".k-...-course-cat"); renamed generic since preview161
   reuses the exact same pattern for Exams too. */
.k-dropdown-panel.k-dropdown-panel-courses { min-width: 260px; }
.k-dropdown-panel-cat a { gap: 12px; }
.k-dropdown-panel-cat a b {
  margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--k-gray-400);
  background: var(--k-gray-100); border-radius: 20px; padding: 2px 8px; flex-shrink: 0;
}
.k-dropdown-panel-cat a:hover b { color: #2563eb; background: #fff; }
.k-dropdown-panel-cat-all { border-bottom: 1px solid var(--k-gray-100); margin-bottom: 4px; padding-bottom: 4px; }
.k-dropdown-panel-cat-all a { font-weight: 800; }

.k-nav-tools { display: flex; align-items: stretch; gap: 0; flex-shrink: 0; }
.k-nav-toggle {
  display:none; background: rgba(255,255,255,.12); border:none; font-size:16px; cursor:pointer;
  width: 38px; height: 38px; border-radius: 8px; align-items: center; justify-content: center; color: #fff;
}
/* Navigation Bar Tagline (Admin → Website Options → Header & Footer → Top
   Bar Settings → Navigation Bar Tagline) — icon + 2-line slogan at the far
   right of the main nav bar itself, set off from the scrolling menu list by
   a left hairline + its own subtle pill background, with a trailing chevron
   as a purely decorative "look ahead" flourish (not a link — nothing real to
   navigate to, so it stays a plain arrow glyph rather than an <a>). */
.k-nav-tagline {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 7px 16px 7px 18px; margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.k-nav-tagline-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--k-warning); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 3px 8px rgba(0,0,0,.22);
}
.k-nav-tagline-text { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.k-nav-tagline-text strong { font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.k-nav-tagline-text em { font-size: 11px; font-style: normal; color: rgba(255,255,255,.65); }
.k-nav-tagline-chevron { font-size: 11px; color: rgba(255,255,255,.4); margin-left: 2px; }

@media (max-width: 1100px) {
  .k-nav-tagline { display: none; }
}
@media (max-width: 900px) {
  .k-nav { position: fixed; bottom: 0; top: auto; left: 0; right: 0; z-index: 100; box-shadow: 0 -6px 20px rgba(17,24,39,.2); padding: 8px 0; }
  .k-nav.k-nav-scrolled { box-shadow: 0 -6px 20px rgba(17,24,39,.2); }
  .k-nav-main { height: auto; }
  .k-nav-tools { display: none; }
  /* Bottom app-tab-bar layout on mobile: icon above label, no tracking —
     the desktop underline nav's uppercase/letter-spacing treatment doesn't
     fit this cramped, icon-led touch context. */
  .k-menu > li > a { flex-direction: column; gap: 3px; padding: 7px 13px; font-size: 10px; text-transform: none; letter-spacing: normal; }
  .k-menu > li > a::after { display: none; }
  /* Bottom tab bar: plain glyph, no colored chip background — the desktop
     icon "chip" treatment is too heavy for this compact, icon-above-label
     touch context. */
  .k-menu > li > a i { width: auto; height: auto; border-radius: 0; background: none !important; font-size: 16px; }
  .k-menu > li > a:hover i, .k-menu > li > a.active i { transform: none; filter: none; }
  /* Dropdowns open upward on the bottom bar so they don't run off-screen. */
  .k-dropdown-panel { top: auto; bottom: 100%; border-radius: 12px 12px 0 0; }

  body { padding-bottom: 66px; }
  .k-nav-search { display: none !important; }
}

/* ---------- Buttons ---------- */
.k-btn {
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:11px 24px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, filter .18s ease, border-color .18s ease;
  letter-spacing: -.01em;
}
/* Round-7 fix ("Primary Colors as Gradient — Header color+Yellow, colorful
   icons"): was a flat teal-to-teal gradient — now reads the site's real
   header color (--k-header-color, set in header.php from the exact same
   $authPrimary value the login/register split panel already uses, so it's
   admin-editable through the header color controls that already exist, no
   new field) fading through a warm amber into --k-warning gold. A straight
   2-stop navy->gold gradient reads muddy at the midpoint, so this adds one
   fixed amber waypoint (the same #d97706 already used as this app's Banking
   category accent) to keep the transition looking intentional rather than
   flat brown. Icons inside the button get their own warm gold tint instead
   of inheriting the button's white text color, so they read as "colorful"
   against the gradient rather than blending into it. */
.k-btn-primary {
  background: linear-gradient(135deg, var(--k-header-color, var(--k-primary)) 0%, #d97706 60%, var(--k-warning) 100%); color:#fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.k-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.38); filter:brightness(1.06); }
.k-btn-primary i, .k-btn-primary .fa-solid, .k-btn-primary .fa-regular { color: #ffe28a; }
/* Blue "conversion" CTA (Register, hero + Practice-panel "Start Practicing
   Now") — kept distinct from the teal .k-btn-primary used elsewhere (Send
   Message, Start Live Chat, form submits) to match the reference design's
   two-tone button system rather than recoloring every primary button. */
.k-btn-accent {
  background: linear-gradient(135deg, var(--k-accent), var(--k-accent-dark)); color:#fff;
  box-shadow: 0 8px 20px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.15);
}
.k-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,99,235,.38); filter:brightness(1.05); }
.k-btn-outline {
  background: #fff; border: 1.5px solid var(--k-gray-200); color: var(--k-gray-800);
  box-shadow: 0 2px 6px rgba(17,24,39,.05);
}
.k-btn-outline:hover { border-color: var(--k-primary); color: var(--k-primary); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(19,123,124,.15); }
.k-btn-ghost { background:transparent; color: var(--k-gray-700); }
.k-btn-block { width:100%; justify-content:center; }
.k-btn-sm { padding:8px 16px; font-size:13px; border-radius:10px; }

/* ---------- Hero ---------- */
.k-hero {
  background: radial-gradient(circle at 15% 20%, var(--k-hero-accent, #0b3d3e) 0%, #111827 55%);
  color:#fff; padding: 90px 0 110px; position:relative; overflow:hidden;
}
.k-hero::after {
  content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(19,123,124,.45), transparent 70%);
}
.k-hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; position:relative; z-index:1; }
.k-hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:#c7d2fe; margin-bottom:20px; }
.k-hero h1 { font-size: 42px; line-height:1.15; margin:0 0 18px; font-weight:800; }
.k-hero h1 span { background: linear-gradient(135deg,#818cf8,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.k-hero p.lead { font-size:16px; color:#cbd5e1; margin:0 0 30px; max-width: 520px; line-height:1.6; }
.k-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.k-hero-stats { display:flex; gap:34px; margin-top:44px; }
.k-hero-stats div strong { display:block; font-size:24px; font-weight:800; }
.k-hero-stats div span { font-size:12px; color:#9ca3af; }
.k-hero-visual {
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 26px;
  box-shadow: var(--k-shadow-lg);
}
.k-hero-visual .mock-card { background:#fff; border-radius:14px; padding:18px; color:var(--k-ink); margin-bottom:14px; }
.k-hero-visual .mock-card:last-child{ margin-bottom:0; }
.k-hero-visual .mock-card h4 { margin:0 0 6px; font-size:13.5px; }
.k-hero-visual .mock-bar { height:8px; border-radius:6px; background: var(--k-gray-100); overflow:hidden; margin-top:8px; }
.k-hero-visual .mock-bar span { display:block; height:100%; background: linear-gradient(135deg,var(--k-primary),var(--k-secondary)); }

/* ---------- Section ---------- */
.k-section { padding: 80px 0; }
.k-section-alt { background: var(--k-gray-50); }
.k-section-head { text-align:center; max-width:620px; margin: 0 auto 46px; }
.k-eyebrow { color: var(--k-primary); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block; }
.k-section-head h2 { font-size:30px; margin:0 0 12px; font-weight:800; }
.k-section-head p { color: var(--k-gray-500); font-size:15px; line-height:1.6; margin:0; }

/* ---------- Cards / grids ---------- */
.k-grid { display:grid; gap: 22px; }
.k-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.k-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- News cards ---------- */
.k-news-section { background: var(--k-gray-50); }
.k-news-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--k-radius);
  overflow: hidden; box-shadow: var(--k-shadow); transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid var(--k-gray-100);
}
.k-news-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-lg); }
.k-news-card-image {
  height: 180px; background-color: var(--k-gray-100); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; color: var(--k-gray-300); font-size: 32px; flex-shrink: 0;
}
.k-news-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.k-news-card-date {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--k-primary); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px;
}
.k-news-card h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 10px; line-height: 1.35; color: var(--k-ink); }
.k-news-card p { font-size: 13.5px; color: var(--k-gray-500); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.k-news-card-link { font-size: 13px; font-weight: 700; color: var(--k-primary); margin-top: auto; }

/* ---------- Premium exam/series cards ---------- */
.k-exam-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--k-radius);
  overflow: hidden; box-shadow: var(--k-shadow); border: 1px solid var(--k-gray-100);
  transition: transform .18s ease, box-shadow .18s ease;
}
.k-exam-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-lg); }
.k-exam-card-image {
  position: relative; height: 160px; background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: 34px; flex-shrink: 0;
}
.k-exam-card-badge {
  position: absolute; top: 12px; right: 12px; padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.k-badge-premium { background: #f59e0b; color: #fff; }
.k-badge-free { background: #10b981; color: #fff; }
.k-exam-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.k-exam-card-category { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--k-gray-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.k-exam-card-category i { font-size: 10px; }
.k-exam-card-tag { font-size: 11px; font-weight: 800; color: var(--k-primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.k-exam-card h3 { font-size: 15.5px; font-weight: 800; margin: 0 0 8px; line-height: 1.35; color: var(--k-ink); }
.k-exam-card p { font-size: 13px; color: var(--k-gray-500); line-height: 1.55; margin: 0 0 12px; }
.k-exam-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.k-exam-card-tags span {
  font-size: 11px; font-weight: 700; color: var(--k-gray-600); background: var(--k-gray-50);
  border: 1px solid var(--k-gray-100); padding: 4px 9px; border-radius: 999px;
}
.k-exam-card-stats {
  display: flex; align-items: center; gap: 16px; font-size: 12.5px; font-weight: 700; color: var(--k-gray-600);
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--k-gray-100);
}
.k-exam-card-stats i { color: var(--k-gray-400); margin-right: 4px; }
.k-exam-card-difficulty.k-difficulty-easy { color: #059669; }
.k-exam-card-difficulty.k-difficulty-medium { color: #b45309; }
.k-exam-card-difficulty.k-difficulty-hard { color: #dc2626; }
.k-exam-card-difficulty.k-series-type-timed { color: #1d4ed8; }
.k-exam-card-difficulty.k-series-type-practice { color: #0f766e; }
.k-exam-card-difficulty i { color: inherit; }
.k-exam-card-availability {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--k-gray-500); margin: -6px 0 12px;
}
.k-exam-card-availability i { color: var(--k-gray-400); }
.k-exam-card-foot {
  display: flex; align-items: center; justify-content: flex-end; margin-top: auto; font-size: 13px;
}
.k-exam-card-price { font-weight: 800; color: var(--k-ink); font-size: 17px; }
.k-exam-card-price s { color: var(--k-gray-400); font-weight: 500; font-size: 12.5px; margin-right: 4px; }
.k-exam-card-price-free { color: #059669; }
/* Wraps the Buy/Enroll + optional "Try Free Test" button pair. display:contents
   by default so it has zero layout effect — the two buttons keep stacking
   full-width exactly as before on every page that reuses this card. */
.k-exam-card-cta-row { display: contents; }

/* ---------- Exam Hub: category sidebar + main content ---------- */
.k-examhub-layout { display: flex; align-items: flex-start; gap: 28px; }
.k-examhub-sidebar {
  width: 260px; flex-shrink: 0; background: #0f172a; border-radius: var(--k-radius);
  padding: 14px; position: sticky; top: 90px; box-shadow: var(--k-shadow-lg);
}
.k-examhub-sidebar-close { display: none; }
.k-examhub-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.75);
  margin-bottom: 2px; transition: background .15s ease, color .15s ease;
}
.k-examhub-cat i { width: 18px; text-align: center; color: rgba(255,255,255,.4); margin-right: 4px; }
.k-examhub-cat:hover { background: rgba(255,255,255,.06); color: #fff; }
.k-examhub-cat.active { background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color: #fff; box-shadow: 0 6px 16px rgba(19,123,124,.4); }
.k-examhub-cat.active i { color: #fff; }
.k-examhub-count {
  font-size: 11px; font-weight: 800; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.k-examhub-cat.active .k-examhub-count { background: rgba(255,255,255,.25); color: #fff; }

.k-examhub-main { flex: 1; min-width: 0; }
.k-examhub-sidebar-toggle {
  display: none; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--k-gray-200);
  border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 13.5px; color: var(--k-ink);
  margin-bottom: 20px; cursor: pointer;
}
.k-examhub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.k-examhub-head h2 { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.k-examhub-head p { margin: 0; color: var(--k-gray-500); font-size: 14px; }
.k-examhub-search { display: flex; align-items: center; background: #fff; border: 1px solid var(--k-gray-200); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.k-examhub-search input { border: none; outline: none; padding: 10px 14px; font-size: 13.5px; width: 240px; font-family: var(--k-font); }
.k-examhub-search button { border: none; background: var(--k-primary); color: #fff; width: 42px; height: 40px; cursor: pointer; }

.k-examhub-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.k-examhub-filter {
  border: 1px solid var(--k-gray-200); background: #fff; border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 700; color: var(--k-ink); cursor: pointer; font-family: var(--k-font);
}
.k-examhub-reset { font-size: 13px; font-weight: 700; color: var(--k-gray-500); }
.k-examhub-reset:hover { color: var(--k-primary); }
.k-examhub-viewtoggle { display: flex; border: 1px solid var(--k-gray-200); border-radius: 10px; overflow: hidden; margin-left: auto; }
.k-examhub-viewtoggle button {
  border: none; background: #fff; padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--k-gray-500);
  cursor: pointer; font-family: var(--k-font); display: flex; align-items: center; gap: 6px;
}
.k-examhub-viewtoggle button.active { background: var(--k-gray-50); color: var(--k-primary); }

.k-examhub-featurestrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--k-gray-100);
}
.k-examhub-featurestrip > div { display: flex; align-items: flex-start; gap: 12px; padding: 0 20px; border-left: 1px solid var(--k-gray-100); }
.k-examhub-featurestrip > div:first-child { border-left: none; padding-left: 0; }
.k-examhub-featurestrip i { font-size: 20px; color: var(--k-primary); margin-top: 2px; }
.k-examhub-featurestrip strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.k-examhub-featurestrip span { font-size: 12px; color: var(--k-gray-500); line-height: 1.4; }

/* List view: reflow cards horizontally instead of grid columns */
.k-view-list .k-examhub-grid { display: block; }
.k-view-list .k-exam-card { flex-direction: row; margin-bottom: 16px; }
.k-view-list .k-exam-card-image { width: 220px; height: auto; flex-shrink: 0; }
.k-view-list .k-exam-card-body { flex: 1; }

@media (max-width: 960px) {
  .k-examhub-sidebar-toggle { display: flex; }
  .k-examhub-sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 300;
    border-radius: 0; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.25);
  }
  .k-examhub-sidebar.open { display: block; }
  .k-examhub-sidebar-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; border: none; margin: 4px 4px 10px auto; cursor: pointer; }
  .k-examhub-head { flex-direction: column; }
  .k-examhub-search { width: 100%; }
  .k-examhub-search input { flex: 1; width: auto; }
  .k-examhub-featurestrip { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .k-examhub-featurestrip > div:nth-child(3) { border-left: none; }
  .k-view-list .k-exam-card { flex-direction: column; }
  .k-view-list .k-exam-card-image { width: 100%; height: 160px; }
}
.k-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.k-card {
  background:#fff; border:1px solid var(--k-gray-200); border-radius: var(--k-radius); padding: 26px;
  box-shadow: var(--k-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.k-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-card .icon-badge {
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff; margin-bottom:18px;
}
.k-card h3 { margin:0 0 8px; font-size:17px; }
.k-card p { margin:0 0 14px; color: var(--k-gray-500); font-size:13.5px; line-height:1.55; }
.k-card .k-card-meta { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color: var(--k-gray-500); border-top:1px solid var(--k-gray-100); padding-top:14px; margin-top:6px; }

.grad-1 { background: linear-gradient(135deg,#17a2a3,#0f5f60); }
.grad-2 { background: linear-gradient(135deg,#38bdf8,#0369a1); }
.grad-3 { background: linear-gradient(135deg,#34d399,#047857); }
.grad-4 { background: linear-gradient(135deg,#fbbf24,#b45309); }
.grad-5 { background: linear-gradient(135deg,#fb7185,#be123c); }
.grad-6 { background: linear-gradient(135deg,#a78bfa,#6d28d9); }

/* ---------- Steps ---------- */
.k-steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:26px; }
.k-step { text-align:center; }
.k-step .num {
  width:44px; height:44px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color:#fff; font-weight:800;
}
.k-step h4 { margin:0 0 6px; font-size:15px; }
.k-step p { margin:0; color:var(--k-gray-500); font-size:13.5px; }

/* ---------- CTA band ---------- */
.k-cta {
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
  border-radius: 24px; padding: 54px; color:#fff; text-align:center;
  margin: 0 24px;
}
.k-cta h2 { font-size:26px; margin:0 0 10px; }
.k-cta p { margin:0 0 26px; opacity:.92; }

/* ---------- Footer ---------- */
.k-footer {
  background-color: #0a1c33;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(37,99,235,.10), transparent 45%),
    linear-gradient(160deg, #102a4c 0%, #0a1c33 55%, #071427 100%);
  color: rgba(255,255,255,.72); padding: 56px 0 24px; margin-top: 0; position: relative; overflow: hidden;
}
.k-footer::before {
  /* Original abstract texture — not a stock photo. */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cdefs%3E%3Cpattern id='fg' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1.2' cy='1.2' r='1.2' fill='white' fill-opacity='0.12'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='500' height='500' fill='url(%23fg)'/%3E%3C/svg%3E");
  background-size: 300px;
}
.k-footer > .k-container { position: relative; z-index: 1; }

.k-footer-social-icon {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.k-footer-social-icon:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }

.k-footer-newsletter-form { display: flex; gap: 0; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.k-footer-newsletter-form input { flex: 1; border: none; background: transparent; outline: none; padding: 0 14px; height: 44px; color: #fff; font-size: 13px; font-family: var(--k-font); }
.k-footer-newsletter-form input::placeholder { color: rgba(255,255,255,.6); }
.k-footer-newsletter-form button { border: none; background: #fff; color: #137b7c; width: 46px; height: 44px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.k-footer-newsletter-form button:hover { background: #f0fdfa; }

/* Round 201 ("vistors background color should be red with icon"): was plain
   blue text with no background — now a solid red pill badge so it reads as
   a distinct live counter rather than blending into the surrounding text. */
.k-visitor-count {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap;
  color: #fff; font-weight: 700; font-size: 11px; line-height: 1;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(185,28,28,.55);
}
.k-visitor-count i { font-size: 10px; }

.k-powered-badge {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: #4b5563;
  background: #e5e7eb; border: 1px solid rgba(255,255,255,.4);
  padding: 4px 10px; border-radius: 999px;
}

/* ---------- Floating support widget ---------- */
.k-support-widget { position: fixed; right: 24px; bottom: 24px; z-index: 950; }
/* preview162 fix: stacks the launcher above .k-whatsapp-float (below) when
   a WhatsApp number is configured — previously both sat at ~the same fixed
   bottom-right spot and WhatsApp's higher z-index fully covered this one,
   which is why "Live chat option is not seen" even though it was real and
   working the whole time. Also bumped this widget's own z-index above
   WhatsApp's (940) so it's never the one left hidden if spacing ever drifts. */
.k-support-widget--stacked { bottom: 92px; }
@media (max-width: 900px) {
  /* Sit above the fixed bottom nav bar introduced at this same breakpoint. */
  .k-support-widget { bottom: 90px; }
  .k-support-widget--stacked { bottom: 90px; }
}
.k-support-widget-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color: #fff; font-size: 20px;
  box-shadow: 0 10px 24px rgba(19,123,124,.4); transition: transform .15s ease;
}
.k-support-widget-btn:hover { transform: scale(1.05); }
.k-support-widget-panel {
  display: none; position: absolute; right: 0; bottom: 70px; width: 320px; max-height: 480px;
  background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(17,24,39,.2); overflow: hidden;
  border: 1px solid var(--k-gray-100); flex-direction: column;
}
/* preview162: flex column (head, then either .k-support-widget-body for the
   logged-out prompt, or the chat thread/composer for a logged-in student)
   so the panel behaves as a real fixed-height chat window, not a plain
   dropdown card. */
.k-support-widget-panel.open { display: flex; }
.k-support-widget-head {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color: #fff; flex-shrink: 0;
}
.k-support-widget-head strong { display: inline-flex; align-items: center; gap: 8px; }
.k-support-widget-head button { background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; opacity: .85; }
.k-support-widget-head button:hover { opacity: 1; }
.k-support-widget-body { padding: 16px 18px; max-height: 320px; overflow-y: auto; }

/* preview162 ("real DB-backed live chat", backlog item #6) — the chat
   thread/composer that replaces the old "recent tickets" list for a
   logged-in student. Message bubbles mirror support.php's own inline-style
   convention (student right-aligned/primary, admin left-aligned/gray) but
   as real, reusable classes since this thread is appended to live via JS. */
.k-livechat-thread { flex: 1; min-height: 220px; max-height: 320px; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.k-livechat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--k-gray-400); font-size: 12.5px; padding: 20px 10px; }
.k-livechat-empty i { font-size: 26px; opacity: .5; }
.k-livechat-msg { display: flex; flex-direction: column; max-width: 82%; }
.k-livechat-msg .bubble { padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.k-livechat-msg .time { font-size: 10px; color: var(--k-gray-400); margin-top: 3px; }
.k-livechat-msg-student { align-self: flex-end; align-items: flex-end; }
.k-livechat-msg-student .bubble { background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color: #fff; border-bottom-right-radius: 4px; }
.k-livechat-msg-admin { align-self: flex-start; align-items: flex-start; }
.k-livechat-msg-admin .bubble { background: var(--k-gray-100); color: var(--k-ink); border-bottom-left-radius: 4px; }
.k-livechat-resolved-note { flex-shrink: 0; padding: 8px 16px; background: #f0fdf4; color: #16a34a; font-size: 11px; font-weight: 700; border-top: 1px solid var(--k-gray-100); display: flex; align-items: center; gap: 6px; }
.k-livechat-composer { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--k-gray-100); }
.k-livechat-composer input { flex: 1; border: 1px solid var(--k-gray-200); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-family: inherit; outline: none; }
.k-livechat-composer input:focus { border-color: var(--k-primary); }
.k-livechat-composer button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--k-primary); color: #fff; flex-shrink: 0; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.k-livechat-viewall { flex-shrink: 0; display: block; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--k-primary); text-decoration: none; padding: 9px; border-top: 1px solid var(--k-gray-100); }
.k-livechat-viewall:hover { background: var(--k-gray-50); }

@media (max-width: 500px) {
  .k-support-widget { right: 14px; bottom: 90px; }
  .k-support-widget-panel { width: calc(100vw - 28px); right: -8px; max-height: 70vh; }
}

.k-newsletter-banner {
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
  border-radius: 20px; padding: 40px 44px; margin-bottom: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  color: #fff;
}
.k-newsletter-copy { flex: 1; min-width: 260px; }
.k-newsletter-copy h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.k-newsletter-copy p { font-size: 13.5px; opacity: .92; margin: 0; max-width: 420px; }
.k-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.k-newsletter-input {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 0 14px; height: 46px; min-width: 240px;
}
.k-newsletter-input i { color: rgba(255,255,255,.8); font-size: 13px; }
.k-newsletter-input input {
  border: none; background: transparent; outline: none; color: #fff; font-size: 13.5px; width: 100%;
}
.k-newsletter-input input::placeholder { color: rgba(255,255,255,.75); }
.k-newsletter-form .k-btn { padding: 0 24px; height: 46px; }

.k-footer-grid { display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; margin-bottom:40px; }
/* The 5-column footer (brand + Quick Links + Exams + Support + Newsletter)
   needs its own column template — used as a second class alongside
   .k-footer-grid (not an inline style) specifically so the max-width:900px
   override below can actually win; an inline style would beat any
   class-based media-query rule regardless of viewport width. */
.k-footer-grid-5col { grid-template-columns: 1.3fr repeat(3, 1fr) 1.2fr; }
.k-footer h5 { color:#fff; font-size:13.5px; margin:0 0 16px; }
.k-footer ul li { margin-bottom:10px; font-size:13px; }
.k-footer ul li a:hover { color:#fff; }
.k-footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:20px; text-align:center; font-size:12px; }
/* Round 201 ("footer bootom Make it single line"): this row previously used
   flex-wrap:wrap with ~18px gaps across copyright + legal links + secure
   payment icons + visitor badge + powered badge, which was too much content
   to fit one line at normal desktop widths and wrapped to two. Now forced
   to a single row (flex-wrap:nowrap) with tighter gaps and smaller type; if
   a narrow viewport still can't fit everything, the row scrolls horizontally
   instead of wrapping, so it always stays one line rather than reflowing. */
.k-footer-bottom-split {
  display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 14px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.k-footer-bottom-split::-webkit-scrollbar { display: none; }
.k-footer-bottom-split > span:first-child { flex-shrink: 0; white-space: nowrap; }
.k-footer-legal {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; flex-shrink: 0;
  font-size: 11.5px; white-space: nowrap;
}
.k-footer-legal a:hover { color: #fff; }

@media (max-width: 700px) {
  .k-newsletter-banner { flex-direction: column; align-items: flex-start; }
  .k-newsletter-form { width: 100%; }
  .k-newsletter-input { flex: 1; }
}

/* ---------- Auth screens ---------- */
.k-auth-screen { min-height: 78vh; display:flex; align-items:center; justify-content:center; padding: 50px 20px; background: var(--k-gray-50); }
.k-auth-card { width:100%; max-width: 440px; background:#fff; border-radius: 20px; padding: 40px 36px; box-shadow: var(--k-shadow-lg); border:1px solid var(--k-gray-200); }
.k-auth-card .logo-mark { width:52px; height:52px; border-radius:14px; margin:0 auto 18px;
  background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px; }
.k-auth-card h1 { text-align:center; font-size:20px; margin:0 0 6px; }
.k-auth-card p.sub { text-align:center; color: var(--k-gray-500); font-size:13px; margin:0 0 26px; }
.k-auth-switch { text-align:center; font-size:13px; color: var(--k-gray-500); margin-top:18px; }
.k-auth-switch a { color: var(--k-primary); font-weight:700; }
.k-trust-note {
  display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center;
  background: var(--k-gray-50); border: 1px solid var(--k-gray-100); border-radius: 10px;
  padding: 10px 14px; font-size: 12px; color: var(--k-gray-500); margin-top: 18px;
}
.k-trust-note i { color: #16a34a; flex-shrink: 0; }

/* ---------- Forms ---------- */
.k-form-group { margin-bottom:18px; }
.k-form-label { display:block; font-size:13px; font-weight:700; margin-bottom:7px; color: var(--k-gray-700); }
.k-form-control {
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--k-gray-300); font-size:14px; font-family: var(--k-font);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.k-form-control:focus { outline:none; border-color: var(--k-primary); box-shadow: 0 0 0 3px rgba(19,123,124,.14); }
.k-form-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:16px; }

/* ---------- Alerts ---------- */
.k-alert { padding:13px 16px; border-radius:12px; font-size:13.5px; margin-bottom:18px; display:flex; gap:10px; align-items:center; border:1px solid transparent; }
.k-alert-success { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.k-alert-error { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.k-alert-info { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }

/* ---------- Student dashboard layout ---------- */
.k-dash { display:grid; grid-template-columns: 264px 1fr; gap: 26px; padding: 34px 0 70px; align-items: start; }
.k-dash-sidebar { background:#fff; border:1px solid var(--k-gray-200); border-radius: var(--k-radius); padding: 22px; height:fit-content; box-shadow: var(--k-shadow); position: sticky; top: 88px; }
.k-dash-profile { text-align:center; padding-bottom:18px; border-bottom:1px solid var(--k-gray-100); margin-bottom:14px; }
.k-dash-profile .avatar {
  width:68px; height:68px; border-radius:50%; margin:0 auto 12px; background: linear-gradient(135deg, var(--k-primary), var(--k-secondary));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:23px;
  box-shadow: 0 0 0 4px var(--k-teal-50), 0 8px 20px rgba(19,123,124,.28);
}
.k-dash-profile strong { display:block; font-size:14.5px; }
.k-dash-profile span { font-size:12px; color: var(--k-gray-500); word-break: break-word; }
.k-dash-profile-badge {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:4px 11px; border-radius:999px;
  background: var(--k-teal-50); color: var(--k-primary-dark); font-size:10.5px; font-weight:700;
}
.k-dash-nav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color: var(--k-gray-700); margin-bottom:2px; transition: background .15s ease, color .15s ease; }
.k-dash-nav a i { width:16px; text-align:center; color: var(--k-gray-400); transition: color .15s ease; }
.k-dash-nav a:hover { background: var(--k-gray-50); }
.k-dash-nav a.active { background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color:#fff; box-shadow: 0 6px 16px rgba(19,123,124,.28); }
.k-dash-nav a.active i { color:#fff; }
.k-dash-nav-logout { margin-top:10px; padding-top:12px !important; border-top:1px solid var(--k-gray-100); color:#b91c1c !important; }
.k-dash-nav-logout i { color:#dc2626 !important; }
.k-dash-nav-logout:hover { background:#fef2f2 !important; }
.k-dash-main .k-card { margin-bottom: 20px; }
@media (max-width: 900px) { .k-dash-sidebar { position: static; } }

.k-dash-welcome {
  background: linear-gradient(120deg, var(--k-primary), var(--k-secondary)); border-radius: var(--k-radius);
  padding: 26px 28px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:20px; box-shadow: 0 14px 32px rgba(19,123,124,.24); position:relative; overflow:hidden;
}
.k-dash-welcome::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 88% 20%, rgba(255,255,255,.14), transparent 45%),
                     radial-gradient(circle at 6% 90%, rgba(37,99,235,.18), transparent 40%);
}
.k-dash-welcome > * { position:relative; z-index:1; }
.k-dash-welcome h3 { margin:0 0 6px; font-size:19px; font-weight:800; }
.k-dash-welcome p { margin:0; font-size:13.5px; opacity:.92; max-width:520px; }
.k-dash-welcome i { font-size:44px; opacity:.3; flex-shrink:0; }

/* preview157: "My Learning" real progress-stats header row (my-courses.php) —
   reuses the sitewide .k-pbi-* colorful icon-chip palette already used on
   Courses/Practice Tests hero bullets, just in a 4-up stat-card strip. */
.k-mylearning-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.k-mylearning-stats > div { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--k-gray-100); border-radius:14px; padding:16px; box-shadow: 0 10px 26px -20px rgba(16,36,43,.2); }
.k-mylearning-stats .ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.k-mylearning-stats strong { display:block; font-size:20px; font-weight:800; color:var(--k-ink); line-height:1.2; }
.k-mylearning-stats span { font-size:11.5px; color:var(--k-gray-500); font-weight:700; }
@media (max-width: 720px) { .k-mylearning-stats { grid-template-columns: repeat(2, 1fr); } }
/* preview158 round 2: course-lesson.php's ("My Learning" player) real
   progress-stats header row — reuses the exact same .ico/strong/span stat-
   chip shape as .k-mylearning-stats above for visual consistency, just in a
   single wide card with a "% Complete" title on the left instead of a grid. */
.k-cl-progress-header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: 16px; padding: 18px 22px;
  margin-bottom: 18px; box-shadow: 0 10px 26px -20px rgba(16,36,43,.2);
}
.k-cl-progress-title { display: flex; flex-direction: column; gap: 3px; }
.k-cl-progress-title strong { font-size: 22px; font-weight: 800; color: var(--k-primary); }
.k-cl-progress-title span { font-size: 12.5px; color: var(--k-gray-500); font-weight: 600; }
.k-cl-progress-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.k-cl-progress-stats > div { display: flex; align-items: center; gap: 10px; }
.k-cl-progress-stats .ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.k-cl-progress-stats strong { display: block; font-size: 16px; font-weight: 800; color: var(--k-ink); line-height: 1.2; }
.k-cl-progress-stats span { font-size: 11px; color: var(--k-gray-500); font-weight: 700; }
@media (max-width: 640px) { .k-cl-progress-header { flex-direction: column; align-items: flex-start; } }

.k-dash-tile { display:flex; gap:14px; border:1px solid var(--k-gray-100); border-radius:14px; padding:16px; transition: box-shadow .15s ease, transform .15s ease; }
.k-dash-tile:hover { box-shadow: var(--k-shadow); transform: translateY(-2px); }
.k-dash-tile-icon {
  width:44px; height:44px; border-radius:12px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.k-dash-tile-body { flex:1; min-width:0; }
.k-dash-tile-body strong { font-size:13.5px; display:block; margin-bottom:8px; }
.k-dash-tile-progress { background:var(--k-gray-100); border-radius:8px; height:8px; overflow:hidden; margin-bottom:10px; }
.k-dash-tile-progress div { height:100%; background:linear-gradient(135deg,var(--k-primary),var(--k-secondary)); }
.k-dash-tile-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.k-dash-tile-foot span { font-size:12px; color:var(--k-gray-500); flex-shrink:0; }

.k-dash-row { display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--k-gray-100); }
.k-dash-row:first-child { border-top:none; }
.k-dash-row-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.k-dash-row-body { flex:1; min-width:0; }
.k-dash-row-body strong { display:block; font-size:13.5px; }
.k-dash-row-body span { font-size:12px; color:var(--k-gray-500); }
.k-dash-row-end { text-align:right; flex-shrink:0; }
.k-dash-row-end strong { display:block; font-size:13.5px; }
.k-dash-row-end a { font-size:12px; color:var(--k-primary); font-weight:700; }

.k-empty { text-align:center; padding: 48px 28px; color: var(--k-gray-500); background: var(--k-gray-50); border: 1px dashed var(--k-gray-200); border-radius: 18px; font-size: 14px; line-height: 1.7; }
.k-empty i { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border-radius: 50%; background: var(--k-teal-50); color: var(--k-primary); font-size: 24px; }

.k-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.k-badge-soon { background:#fef3c7; color:#b45309; }
.k-badge-live { background:#d1fae5; color:#047857; }

@media (max-width: 900px) {
  .k-hero-grid { grid-template-columns: 1fr; }
  .k-dash { grid-template-columns: 1fr; }
  .k-footer-grid, .k-footer-grid-5col { grid-template-columns: 1fr 1fr; }
}

/* ---------- Page banner (inner-page hero) ---------- */
.k-page-banner {
  background: radial-gradient(circle at 15% 20%, var(--k-hero-accent, #0b3d3e) 0%, #111827 60%);
  color: #fff; padding: 64px 0 40px; text-align: center; position: relative; overflow: hidden;
}
.k-page-banner::after {
  content: ''; position: absolute; right: -100px; top: -100px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(19,123,124,.35), transparent 70%);
}
.k-page-banner h1 { font-family: var(--k-font-serif); font-size: 40px; font-weight: 700; margin: 0 0 14px; position: relative; z-index: 1; }
.k-breadcrumb { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #9ca3af; position: relative; z-index: 1; }
.k-breadcrumb a { color: #cbd5e1; }
.k-breadcrumb a:hover { color: #fff; }
.k-breadcrumb .sep { margin: 0 8px; opacity: .5; }
.k-breadcrumb .current { color: var(--k-primary-light, #818cf8); }

/* Collapsed-by-default, icon-triggered search (checkbox hack — works with no
   JS at all; frontend.js only adds an autofocus nicety on top). Frees up the
   width a permanently-open search box was costing the nav row, closer to how
   university sites present search: a small icon, not a standing input. */
.k-search-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.k-search-toggle {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 14px; cursor: pointer; flex-shrink: 0; transition: background .15s ease;
}
.k-search-toggle:hover { background: rgba(255,255,255,.22); }
.k-search-check:checked ~ .k-search-toggle { background: rgba(255,255,255,.24); }
.k-nav-search {
  display: flex; align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  overflow: hidden; height: 40px; width: 0; flex-shrink: 0; flex-grow: 0; max-width: 0; opacity: 0; margin-left: 0;
  pointer-events: none; transition: width .25s ease, max-width .25s ease, opacity .2s ease, margin-left .25s ease, background .2s ease;
}
.k-search-check:checked ~ .k-nav-search { width: 220px; max-width: 220px; opacity: 1; margin-left: 8px; pointer-events: auto; }
.k-nav-search:focus-within { background: #fff; }
.k-nav-search input { flex: 1; border: none; background: transparent; outline: none; padding: 0 0 0 18px; font-size: 13.5px; font-family: var(--k-font); color: #fff; }
.k-nav-search:focus-within input { color: var(--k-ink); }
.k-nav-search input::placeholder { color: rgba(255,255,255,.75); }
.k-nav-search:focus-within input::placeholder { color: var(--k-gray-400); }
.k-nav-search button {
  border: none; background: transparent; color: #fff; width: 46px; height: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
}
.k-nav-search:focus-within button { color: var(--k-primary); }
@media (max-width: 700px) { .k-nav-search { display: none; } }
.k-announcement { padding: 10px 0; font-size: 13px; font-weight: 600; }
.k-announcement .k-container { display: flex; align-items: center; gap: 10px; }
.k-announcement-info { background: #eff6ff; color: #1d4ed8; }
.k-announcement-success { background: #ecfdf5; color: #047857; }
.k-announcement-warning { background: #fffbeb; color: #b45309; }

/* ---------- MCQ/PYQ tabs ---------- */
.k-pyq-tabs { display: flex; border-bottom: 2px solid var(--k-gray-200); }
.k-pyq-tab-btn {
  flex: 1; padding: 14px 10px; background: var(--k-gray-50); border: none; cursor: pointer;
  font-weight: 700; font-size: 13.5px; color: var(--k-gray-500); border-bottom: 3px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.k-pyq-tab-btn:hover { background: #fff; color: var(--k-gray-800); }
.k-pyq-tab-btn.active { background: #fff; color: var(--k-primary); border-bottom-color: var(--k-primary); }

/* ---------- Split-screen auth (login/register) — PREMIUM ENTERPRISE /
   world-class-university admissions-portal styling. Form is the RIGHT
   column, brand/illustration panel LEFT — explicit `order` (not just DOM
   position) so this can never silently flip, matching admin/login.php's
   own kesp-split-form-side/kesp-split-illustration (order:2 form / order:1
   illustration) pattern exactly. */
/* Round 201d ("Not Green color, same color as in images" — Login/Register/
   Admin should all match the indigo/purple reference mockups): --k-primary
   defaults to this SITE's configurable header/brand color, which for this
   install is teal (#137b7c, frontend.css's own :root fallback) — every
   element on these two pages that reads var(--k-primary)/--k-header-color
   (the kicker label, "Login"/"Create Account" links, the Sign In/Create
   Account button's gradient, the step-dot/section-head accents, the hero
   headline's gradient span) was inheriting that site-wide teal instead of
   the fixed indigo the reference images use. Re-declaring the SAME custom
   property names here — the established pattern this project already uses
   for independently-colorable regions — overrides them for every
   descendant of .k-split-auth ONLY (this page's own illustration+form
   split layout), without touching --k-primary anywhere else on the site
   (every other button/accent on the public site keeps following the real
   configured header color, unchanged). Admin login never had this problem —
   admin.css's --kesp-primary is already a fixed indigo, unrelated to the
   frontend's site color setting. */
.k-split-auth {
  --k-primary: #4f46e5;
  --k-primary-dark: #4338ca;
  --k-header-color: #4f46e5;
}
/* .k-btn-primary's SITE-WIDE recipe (teal → orange → gold) is deliberate
   everywhere else, so it's overridden outright here rather than rescoped
   via the custom property above — a clean indigo-to-purple gradient,
   matching the reference "Sign In"/"Create Account" button exactly, with
   the icon tint switched from gold (meant for a warm gradient) to white. */
.k-split-auth .k-btn-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.k-split-auth .k-btn-primary i, .k-split-auth .k-btn-primary .fa-solid, .k-split-auth .k-btn-primary .fa-regular { color: #fff; }
.k-split-auth { min-height: calc(100vh - 220px); display: flex; }
.k-split-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 50px 24px; order: 2; background: #fbfbfd; }
.k-split-form-card {
  width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--k-gray-100);
  border-radius: 22px; padding: 42px 38px; box-shadow: 0 30px 70px -32px rgba(15,23,42,.2);
  /* Round 201d: shared floor height so Login/Register/Admin cards read as
     "same form width and height" even though each step/page has a
     different field count — a step with more fields still grows past this
     floor rather than being clipped. */
  box-sizing: border-box; min-height: 500px;
}
.k-split-auth-kicker {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--k-primary); margin-bottom: 16px;
}
.k-split-auth-kicker i { font-size: 12px; }
.k-split-form-card h1 { font-family: var(--k-font-serif); font-size: 27px; margin: 0 0 8px; font-weight: 700; letter-spacing: -.01em; color: var(--k-ink); }
.k-split-form-card p.sub { color: var(--k-gray-500); font-size: 13.5px; margin: 0 0 28px; line-height: 1.6; }
/* Round 200 ("100% Match" to a light, friendly admissions-portal reference —
   handwritten tagline, pastel sky, study illustration): replaced the earlier
   dark cosmic-gradient panel with the SAME light "white + soft blobs" visual
   language already established for the homepage hero (.k-hp1-hero-band,
   preview163's "light background" brief) so the whole site stays one
   consistent system instead of the auth pages being the one dark corner. */
.k-split-illustration-side {
  flex: 1; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 42px; order: 1;
  background-color: #eef2ff;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(129,140,248,.38), transparent 48%),
    radial-gradient(circle at 90% 10%, rgba(251,191,36,.3), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(56,189,248,.32), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(52,211,153,.24), transparent 40%),
    linear-gradient(160deg, #eef2ff 0%, #f5f3ff 55%, #eff6ff 100%);
  color: var(--k-ink); position: relative; overflow: hidden;
}
.k-split-illustration-side::before { content: none; }
.k-split-illustration-side::after {
  content: ''; position: absolute; right: -80px; bottom: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.22), transparent 70%); pointer-events: none; filter: blur(2px);
}
/* Fine dot-grid overlay, faded toward the edges — kept from the earlier dark
   version but re-tinted dark-on-light so the "institutional report" texture
   still reads against the new pastel backdrop. */
.k-split-illustration-pattern {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(79,70,229,.09) 1px, transparent 1px);
  background-size: 25px 25px;
  -webkit-mask-image: radial-gradient(circle at 28% 32%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 28% 32%, #000 0%, transparent 70%);
}
.k-split-illustration-content { max-width: 480px; width: 100%; position: relative; z-index: 1; }
.k-split-illustration-content .k-hero-eyebrow { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.16); color: var(--k-primary); }
.k-split-illustration-content h2 { font-family: var(--k-font-serif); font-size: 30px; font-weight: 700; line-height: 1.26; letter-spacing: -.01em; margin: 14px 0 12px; color: var(--k-ink); }
.k-split-illustration-content h2 .k-split-accent { background: linear-gradient(135deg, var(--k-primary), #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-split-illustration-content p { font-size: 13.5px; color: var(--k-gray-600); line-height: 1.6; margin: 0; }
.k-split-hero-art { margin: 14px 0 2px; filter: drop-shadow(0 18px 30px rgba(79,70,229,.14)); display: flex; justify-content: center; }
.k-split-hero-art svg { max-width: 100% !important; width: 440px !important; }
/* Round 201b: now holds 4 stat columns (was 2-3) to match the reference's
   stat row — tightened padding/font so 4 columns fit the same panel width
   without wrapping. */
.k-split-stats { display: flex; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(79,70,229,.14); }
.k-split-stats > div { flex: 1; padding-right: 10px; border-right: 1px solid rgba(79,70,229,.12); min-width: 0; }
.k-split-stats > div:last-child { border-right: none; padding-right: 0; }
.k-split-stats strong { display: block; font-family: var(--k-font-serif); font-size: 19px; font-weight: 700; color: var(--k-ink); white-space: nowrap; }
.k-split-stats span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--k-gray-500); white-space: nowrap; }
@media (max-width: 900px) { .k-split-illustration-side { display: none; } .k-split-auth { min-height: auto; } .k-split-form-side { background: #fff; } }

/* ==================================================================
   REGISTER PAGE — premium split-screen redesign (frontend/register.php).
   Reuses the .k-split-* structure/CSS above (already shared with login.php)
   so the two pages stay visually consistent; the illustration side's colors
   are computed per-request from the live header color instead of the fixed
   indigo login.php uses, matching the "primary = header color" convention
   used across Homepage 3 (see frontend/includes/homepage-v3.php).
   ================================================================== */
/* Single-column field layout (one field per row, not 2-up) reads cleaner for
   an 8-field form — a narrower card suits that better than the old 2-column
   card's wider 480px, and spacing is tightened below so 8 stacked rows don't
   feel taller than the form needs to be. Scoped to .k-reg-form-card only —
   Login/Admin Login keep the roomier default .k-split-form-card spacing set
   above, since they only ever have 2-3 fields. */
/* Round 201d: user asked for "Same form width and height" across all 3
   auth cards — dropped the 540px widen-for-2-columns override from 201b so
   .k-reg-form-card falls back to the SAME shared .k-split-form-card
   max-width (400px) as Login/Admin instead of a separate number that only
   happened to differ. The 2-column field rows are kept (now that the form
   is a 3-step wizard, only 2-3 fields show per step, so the narrower card
   still has room) with tightened inner spacing/padding so two inputs per
   row still fit comfortably at 400px. */
.k-reg-form-card .k-form-group { margin-bottom: 13px; }
.k-reg-form-card .k-form-label { margin-bottom: 5px; }
.k-reg-form-card .k-form-control { padding: 10px 12px; font-size: 13px; }
.k-reg-form-card .k-form-row { gap: 10px; }

/* Round 201d — user asked for the real 3-tab stepper back ("Make three
   tabs ,(1,2,3)First active,then open 2nd,then 3rd"), reversing Round 201b's
   always-visible section map. .k-reg-steps is the clickable-looking dot
   trail (now with is-active/is-done state), and each .k-reg-section is also
   a .k-reg-step-panel that's hidden unless it carries .is-active — JS in
   register.php toggles both in lockstep. The 2-column field layout and
   icon section headers introduced in 201b are kept as-is inside each panel. */
.k-reg-steps { display: flex; align-items: center; margin: 2px 0 20px; }
.k-reg-step-dot { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.k-reg-step-dot span {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: rgba(79,70,229,.1); color: var(--k-primary);
  border: 1.5px solid rgba(79,70,229,.18); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.k-reg-step-dot em { font-size: 9px; font-weight: 700; color: var(--k-gray-400); font-style: normal; white-space: nowrap; transition: color .15s ease; }
.k-reg-step-dot.is-active span { background: var(--k-primary); color: #fff; border-color: var(--k-primary); }
.k-reg-step-dot.is-active em { color: var(--k-primary); }
.k-reg-step-dot.is-done span { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.k-reg-step-dot.is-done em { color: #059669; }
.k-reg-step-line { flex: 1; height: 2px; background: rgba(79,70,229,.14); margin: 0 6px 15px; }
@media (max-width: 480px) { .k-reg-step-dot em { display: none; } }

.k-reg-step-panel { display: none; }
.k-reg-step-panel.is-active { display: block; animation: k-reg-step-in .2s ease; }
@keyframes k-reg-step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.k-reg-step-nav { display: flex; gap: 10px; margin-top: 4px; }
.k-reg-step-nav .k-reg-step-back { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
.k-reg-step-nav .k-reg-step-next,
.k-reg-step-nav button[type="submit"] { flex: 1; justify-content: center; }

.k-reg-section { padding: 16px 0; border-top: 1px solid var(--k-gray-100); }
.k-reg-section:first-of-type { border-top: none; padding-top: 0; }
.k-reg-section-head {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800;
  color: var(--k-primary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px;
}
.k-reg-section-head i {
  width: 24px; height: 24px; border-radius: 7px; background: rgba(79,70,229,.1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.k-auth-topline { display: flex; justify-content: flex-end; margin-bottom: 18px; font-size: 12.5px; color: var(--k-gray-500); }
.k-auth-topline a { color: var(--k-primary); font-weight: 700; }

.k-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: #fff; border: 1.5px solid var(--k-gray-200); border-radius: 12px; padding: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--k-gray-700); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box;
}
.k-google-btn i { color: #ea4335; font-size: 15px; }
.k-google-btn:hover { border-color: var(--k-gray-300); box-shadow: var(--k-shadow); }
.k-auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12px; color: var(--k-gray-400); }
.k-auth-or::before, .k-auth-or::after { content: ''; flex: 1; height: 1px; background: var(--k-gray-200); }

/* Not currently rendered by register.php (public self-registration is
   Student-only) — kept in case a future round reintroduces an in-form role
   picker somewhere. */
.k-role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.k-role-tab { position: relative; }
.k-role-tab input { position: absolute; opacity: 0; width: 0; height: 0; }
.k-role-tab span {
  display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 1.5px solid var(--k-gray-200); border-radius: 10px; padding: 9px 4px; font-size: 12.5px; font-weight: 700;
  color: var(--k-gray-500); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.k-role-tab:has(input:checked) span { border-color: var(--k-primary); color: var(--k-primary); background: rgba(19,123,124,.06); }

.k-form-optional { font-weight: 500; color: var(--k-gray-400); font-size: 12px; }
.k-terms-check { align-items: flex-start !important; font-size: 12.5px; margin: 4px 0 18px; line-height: 1.5; }
.k-terms-check input { margin-top: 2px; flex-shrink: 0; }
.k-terms-check a { color: var(--k-primary); font-weight: 700; }

/* Superseded by .k-split-float-list below (kept in case old markup lingers
   on a cached page during rollout). */
.k-reg-feature-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.k-reg-feature-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #dbe4ff; }
.k-reg-feature-list i { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; flex-shrink: 0; }

/* Round 201 FIX: these cards were left with their OLD dark-theme colors
   (white text, near-0%-opacity glass background) when Round 200 flipped the
   illustration panel from dark to light — on the new light background that
   made them read as nearly-invisible "ghost" cards (confirmed by the user's
   own screenshot of the live page). Rebuilt as solid white cards with real
   shadow + dark text, and a 2-column grid (was a single vertical column,
   which also left large empty gaps on tall viewports — a 2-up grid uses the
   panel's width instead of just its height, closer to the reference image's
   2x2 card layout and far less "empty"). */
.k-split-float-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0 0; }
/* Spans the final card full-width only when the list holds an odd count
   (register.php's 3 cards) — login.php's own 2-card list has an even last
   child (nth-child(2)) so it keeps its normal 2-column slot untouched. */
.k-split-float-list .k-split-float-card:nth-child(odd):last-child { grid-column: 1 / -1; }
.k-split-float-card {
  background: #fff; border: 1px solid rgba(79,70,229,.1); border-radius: 14px;
  padding: 13px 14px; display: flex; align-items: center; gap: 11px;
  box-shadow: 0 10px 22px -14px rgba(30,27,75,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.k-split-float-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -14px rgba(30,27,75,.3); }
.k-split-float-card .icon {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; color: #fff;
}
.k-split-float-card .icon.amber { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.k-split-float-card .icon.sky { background: linear-gradient(135deg,#38bdf8,#0284c7); }
.k-split-float-card .icon.emerald { background: linear-gradient(135deg,#34d399,#059669); }
.k-split-float-card .icon.violet { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.k-split-float-card .icon.rose { background: linear-gradient(135deg,#fb7185,#e11d48); }
.k-split-float-card strong { display: block; font-size: 12.5px; color: var(--k-ink); line-height: 1.3; }
.k-split-float-card span { font-size: 10.5px; color: var(--k-gray-500); font-weight: 600; }
@media (max-width: 1100px) { .k-split-float-list { grid-template-columns: 1fr; } }
/* Round 201d: removed the old 460px tablet override for .k-reg-form-card —
   it now matches Login/Admin's shared 400px at every width, per "Same form
   width and height". */

.k-input-icon { position: relative; }
.k-input-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--k-gray-300); font-size: 14px; }
.k-input-icon input {
  width: 100%; padding: 12px 14px 12px 40px; border-radius: 10px; border: 1px solid var(--k-gray-300);
  font-size: 14px; font-family: var(--k-font); transition: border-color .15s ease, box-shadow .15s ease;
}
.k-input-icon input:focus { outline: none; border-color: var(--k-primary); box-shadow: 0 0 0 3px rgba(19,123,124,.14); }

/* Password show/hide toggle — wraps either a plain .k-form-control (register.php)
   or an .k-input-icon field that already has a left-side lock icon (login.php);
   the eye button sits on the right in both cases, so the two combine cleanly. */
.k-pw-field { position: relative; }
.k-pw-field input { padding-right: 42px; }
.k-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 8px; cursor: pointer; color: var(--k-gray-400); font-size: 14px;
  transition: color .15s ease, background .15s ease;
}
.k-pw-toggle:hover { color: var(--k-gray-600); background: var(--k-gray-50); }

/* Mobile Number field with a fixed +91 country-code chip (register.php) — a
   plain visual prefix, not a real country picker, since this build only ever
   collects one phone format; the underlying `phone` column/validation is
   unchanged. */
.k-phone-field { display: flex; align-items: stretch; border: 1.5px solid var(--k-gray-200); border-radius: 10px; overflow: hidden; transition: border-color .15s ease; }
.k-phone-field:focus-within { border-color: var(--k-primary); }
.k-phone-prefix { flex-shrink: 0; display: flex; align-items: center; padding: 0 12px; background: var(--k-gray-50); color: var(--k-gray-600); font-size: 13.5px; font-weight: 700; border-right: 1.5px solid var(--k-gray-200); }
.k-phone-field .k-form-control { border: none; border-radius: 0; }
.k-phone-field .k-form-control:focus { box-shadow: none; }

/* Scoped-to-auth-pages input refinement — deliberately NOT edited on the
   shared global .k-form-label/.k-form-control themselves (used by many other
   forms across the site: Contact, Dashboard, etc.), same scoping approach as
   Homepage 3's .k-hp3-page overrides. Slightly larger, more generously
   spaced fields and a tracked micro-label read as more "admissions portal"
   than the default compact site-wide form styling. */
.k-split-form-side .k-form-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k-gray-500);
}
.k-split-form-side .k-form-control,
.k-split-form-side .k-input-icon input,
.k-split-form-side .k-phone-field { border-radius: 11px; }
.k-split-form-side .k-form-control:focus,
.k-split-form-side .k-input-icon input:focus,
.k-split-form-side .k-phone-field:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.12); }

.k-form-row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 13px; }
.k-form-row-between a { color: var(--k-primary); font-weight: 600; }
.k-checkbox-label { display: flex; align-items: center; gap: 7px; color: var(--k-gray-700); cursor: pointer; }
.k-checkbox-label input { width: 15px; height: 15px; accent-color: var(--k-primary); }

/* ==========================================================================
   Enterprise Design System v2 (2026.2.0) — Mega Menu, Homepage 3,
   Exam Series hub, badges, and shared "revisit" components.
   ========================================================================== */

/* ---------- Mega menu (Exams nav item) ---------- */
.k-megamenu-panel {
  display: none; position: fixed; left: 0; right: 0; z-index: 500;
  background: #fff; border-top: 3px solid var(--k-accent);
  box-shadow: 0 24px 48px rgba(16,36,43,.22);
}
.has-megamenu.open .k-megamenu-panel { display: block; }
/* preview161 fix ("little bit space between menu item and arrow"): this
   inline/static arrow treatment was scoped to `.has-megamenu` only, which
   before preview139's "Dropdown Style" option existed was every dropdown
   item — so it accidentally never applied to a `dropdown_style='simple'`
   item (`has-dropdown` alone, no `has-megamenu`), which stayed on the
   older `.k-dropdown-toggle`'s default `position:absolute; right:6px`
   pinned-to-corner placement instead, showing a bigger, label-length-
   independent gap. Broadened to `.has-dropdown` (present on BOTH simple
   and mega items) so every dropdown arrow sits snug next to its item
   consistently, regardless of style. */
.has-dropdown .k-dropdown-toggle { position: static; margin-left: 2px; }
.k-megamenu-inner {
  max-width: var(--k-max); margin: 0 auto; padding: 18px 20px 20px;
  display: grid; grid-template-columns: repeat(5, 1fr) 250px; gap: 0 14px;
}
.k-megamenu-col {
  background: var(--k-gray-50); border: 1px solid var(--k-gray-100); border-top: 3px solid var(--k-gray-200); border-radius: 14px;
  padding: 13px 12px 4px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.k-megamenu-col:hover { box-shadow: 0 12px 26px rgba(17,24,39,.09); transform: translateY(-2px); }
/* Each column's dominant accent — read straight off its own header icon's
   .k-mm-* class via :has(), so a column always tints to match the same
   color already chosen for it (Admin → Navigation Menu's Icon Color picker
   for custom items, or the built-in panel's own palette) instead of a second,
   separately-maintained color assignment. Turns every column into its own
   softly-tinted, top-accented card — the "colorful enterprise card grid"
   look — from data that already exists, no markup duplication. */
.k-megamenu-col:has(> h6 .k-mm-blue)   { background: color-mix(in srgb, #2563eb 6%, var(--k-gray-50)); border-top-color: #2563eb; }
.k-megamenu-col:has(> h6 .k-mm-red)    { background: color-mix(in srgb, #dc2626 6%, var(--k-gray-50)); border-top-color: #dc2626; }
.k-megamenu-col:has(> h6 .k-mm-green)  { background: color-mix(in srgb, #16a34a 6%, var(--k-gray-50)); border-top-color: #16a34a; }
.k-megamenu-col:has(> h6 .k-mm-amber)  { background: color-mix(in srgb, #d97706 6%, var(--k-gray-50)); border-top-color: #d97706; }
.k-megamenu-col:has(> h6 .k-mm-purple) { background: color-mix(in srgb, #7c3aed 6%, var(--k-gray-50)); border-top-color: #7c3aed; }
.k-megamenu-col:has(> h6 .k-mm-teal)   { background: color-mix(in srgb, #0d9488 6%, var(--k-gray-50)); border-top-color: #0d9488; }
.k-megamenu-col:has(> h6 .k-mm-rose)   { background: color-mix(in srgb, #db2777 6%, var(--k-gray-50)); border-top-color: #db2777; }
.k-megamenu-col h6 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--k-gray-600); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(17,24,39,.07);
}
/* Big colorful icon badge, stacked above the column title — the "premium
   enterprise mega-menu" card treatment (icon-led card, not a plain list with
   a small inline glyph). Every link/thumb/stat icon below still picks up the
   same accent via one of the .k-mm-* modifier classes (same palette as the
   Courses/Practice feature-card chips elsewhere on the site), rotated per
   column so the whole panel reads as a modern, color-coded card grid rather
   than a flat monochrome link list. Falls back to the site's teal/gray
   defaults when no accent class is present. */
.k-megamenu-col h6 i {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--mm-bg, var(--k-teal-50)); color: var(--mm-fg, var(--k-primary));
  box-shadow: 0 6px 14px -6px rgba(17,24,39,.28);
}
.k-megamenu-col a {
  display: flex; align-items: center; gap: 10px; padding: 4px 4px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--k-gray-700);
}
.k-megamenu-col a:hover { color: var(--k-ink); background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,.06); }
.k-megamenu-col a i {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
  background: var(--mm-bg, var(--k-gray-100)); color: var(--mm-fg, var(--k-gray-400));
  transition: transform .15s ease;
}
.k-megamenu-col a:hover i { transform: scale(1.12); }
/* Optional per-item badge (Admin → Mega Menu Builder), real admin-typed
   text like "NEW"/"POPULAR"/"FREE" — never auto-generated. */
.k-mm-badge {
  margin-left: auto; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; background: var(--k-warning); color: #3d2c00;
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
/* Wraps a link's label (+ optional badge) and optional description
   (Admin → Mega Menu Builder → Menu Item Settings → Description) into a
   two-line block, replacing the plain single text node the badge used to
   sit flush next to. */
.k-mm-link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.k-mm-link-row { display: flex; align-items: center; gap: 6px; }
.k-mm-desc { font-size: 10.5px; font-weight: 500; color: var(--k-gray-400); white-space: normal; line-height: 1.3; }
/* preview158: real, admin-editable category rows inside a nav mega-menu
   (Popular Categories / More Categories columns) — a colorful gradient icon
   chip (same kesp_category_accent() palette courses.php's own pill row
   uses) + a real live count badge, replacing the old plain k-megamenu-col
   a + i row for this one panel only. Generalized from Courses-only naming
   in preview161, when Exams started reusing the identical pattern. */
.k-mm-cat { gap: 11px; padding: 6px 4px; }
.k-mm-cat-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  box-shadow: 0 4px 10px -4px rgba(17,24,39,.35);
}
/* preview161 fix ("icon missing" on the user's real deploy): the two former
   `.k-megamenu-col a.k-mm-course-cat i { all: unset; }` /
   `.k-dropdown-panel-course-cat a i { all: unset; }` resets worked in this
   project's own test harness but are fragile in the general case — `all:
   unset` resets font-family too, and font-family is inherited, so if the
   site's real FontAwesome CSS build doesn't mark its own font-family
   `!important` (ours apparently doesn't on the user's host), this rule's
   higher specificity wins the cascade and the icon glyph silently loses its
   icon font, rendering blank. Fixed with a narrow override (double-class
   specificity hack, so source order never matters) that undoes only the
   conflicting chip-box properties from `.k-megamenu-col a i` /
   `.k-dropdown-panel a i` below, and never touches font-family/font-weight/
   content — FontAwesome's own .fa-solid rule for those is left completely
   alone, so this can't fight it regardless of how FA is loaded. Covers both
   the mega-menu and simple-dropdown category rows for both Courses and
   Exams (all share the same .k-mm-cat-ico wrapper). */
.k-mm-cat-ico.k-mm-cat-ico i,
.k-mm-cat-ico.k-mm-cat-ico i:hover {
  width: auto; height: auto; display: inline; background: none; border-radius: 0;
  font-size: 15px; line-height: 1; color: #fff; transform: none; box-shadow: none;
}
.k-mm-cat b {
  margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--k-gray-400);
  background: var(--k-gray-100); border-radius: 20px; padding: 2px 8px; flex-shrink: 0;
}
.k-mm-cat:hover b { color: var(--k-ink); background: #fff; }
.k-mm-cat-all { border-bottom: 1px solid rgba(17,24,39,.06); margin-bottom: 4px; padding-bottom: 8px; }
.k-mm-cat-all .k-mm-link-row { font-weight: 800; }
/* The 3 structural "Add Element" rows (Admin → Mega Menu Builder — Heading /
   Divider / Spacer) a column can contain alongside real links. */
.k-mm-subhead {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--k-gray-400); margin: 10px 0 2px; padding: 0 4px;
}
.k-mm-divider { border: none; border-top: 1px solid rgba(17,24,39,.08); margin: 8px 4px; }
.k-mm-spacer { height: 10px; }
/* preview110: Text/Image/Icon/Button — the 4 remaining real element types
   from Admin → Mega Menu Builder's palette, rendered by
   kesp_mm_render_child() (header-v2.php, all mega-menu panels) and the
   matching header-v1.php simple-dropdown branches below. */
.k-mm-text {
  font-size: 12px; font-weight: 500; color: var(--k-gray-400); line-height: 1.5;
  margin: 4px 4px 10px; white-space: normal;
}
.k-mm-icon-block { display: flex; align-items: center; gap: 9px; padding: 5px 4px; }
.k-mm-icon-block i {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--mm-bg, var(--k-gray-100)); color: var(--mm-fg, var(--k-primary));
}
.k-mm-icon-caption { font-size: 11.5px; font-weight: 600; color: var(--k-gray-600); }
.k-mm-image-block { padding: 4px; margin-bottom: 4px; }
.k-mm-image-block img { width: 100%; border-radius: 10px; display: block; object-fit: cover; max-height: 130px; }
.k-mm-image-caption { display: block; font-size: 10.5px; font-weight: 600; color: var(--k-gray-400); margin-top: 6px; text-align: center; }
.k-mm-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin: 4px 0; padding: 9px 14px; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; color: #fff; text-align: center;
  box-shadow: 0 4px 10px -4px rgba(17,24,39,.3); transition: transform .15s ease, box-shadow .15s ease;
}
.k-mm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -6px rgba(17,24,39,.35); color: #fff; }
.k-mm-blue-bg   { background: #2563eb; }
.k-mm-red-bg    { background: #dc2626; }
.k-mm-green-bg  { background: #16a34a; }
.k-mm-amber-bg  { background: #d97706; }
.k-mm-purple-bg { background: #7c3aed; }
.k-mm-teal-bg   { background: #0d9488; }
.k-mm-rose-bg   { background: #db2777; }
/* header-v1.php's simpler non-mega-menu dropdown variant of the same 4
   element types (its own .k-dropdown-panel <li> rows, not the mega-menu
   column grid above). */
.k-dropdown-panel-text { padding: 4px 14px 8px; font-size: 12px; color: var(--k-gray-400); line-height: 1.5; list-style: none; white-space: normal; }
.k-dropdown-panel-icon { display: flex; align-items: center; gap: 9px; padding: 6px 14px; list-style: none; }
.k-dropdown-panel-icon i {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
  background: var(--mm-bg, var(--k-gray-100)); color: var(--mm-fg, var(--k-primary));
}
.k-dropdown-panel-icon span { font-size: 12px; font-weight: 600; color: var(--k-gray-600); }
.k-dropdown-panel-image { padding: 6px 14px; list-style: none; }
.k-dropdown-panel-image img { width: 100%; border-radius: 8px; display: block; max-height: 110px; object-fit: cover; }
.k-dropdown-panel-image span { display: block; font-size: 10.5px; font-weight: 600; color: var(--k-gray-400); margin-top: 4px; }
.k-dropdown-panel-button { padding: 6px 14px; list-style: none; }
.k-megamenu-popular a {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; font-weight: 700;
}
.k-megamenu-popular .thumb {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--mm-bg, var(--k-teal-50));
}
.k-megamenu-popular .thumb i { color: var(--mm-fg, var(--k-primary)); font-size: 12px; }
/* Reusable colorful accent tokens for mega-menu icon chips — apply directly
   alongside an icon's existing classes (e.g. class="fa-solid fa-phone k-mm-blue"). */
.k-mm-blue   { --mm-bg:#dbeafe; --mm-fg:#2563eb; }
.k-mm-red    { --mm-bg:#fee2e2; --mm-fg:#dc2626; }
.k-mm-green  { --mm-bg:#dcfce7; --mm-fg:#16a34a; }
.k-mm-amber  { --mm-bg:#fef3c7; --mm-fg:#d97706; }
.k-mm-purple { --mm-bg:#ede9fe; --mm-fg:#7c3aed; }
.k-mm-teal   { --mm-bg:#ccfbf1; --mm-fg:#0d9488; }
.k-mm-rose   { --mm-bg:#fce7f3; --mm-fg:#db2777; }
.k-megamenu-promo {
  background: linear-gradient(150deg, var(--k-primary) 0%, #0a3f40 100%); border-radius: 16px; padding: 22px;
  color: #fff; position: relative; overflow: hidden;
}
.k-megamenu-promo::after {
  content:''; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.k-megamenu-promo h4 { font-size: 15.5px; margin: 0 0 8px; font-weight: 800; line-height: 1.35; position: relative; z-index: 1; }
.k-megamenu-promo p { font-size: 12px; color: rgba(255,255,255,.85); margin: 0 0 16px; line-height: 1.5; position: relative; z-index: 1; }
.k-megamenu-promo .k-btn { position: relative; z-index: 1; }

/* Column-count modifiers for the non-Exams mega menus (Home/About Us/Courses/
   Practice Tests/Resources/Contact) — same .k-megamenu-inner/-col/-promo
   building blocks as the Exams mega menu above, just fewer equal-width link
   columns before the fixed-width promo card. The <1150px/<900px collapse
   rules above already target the base .k-megamenu-inner class, so they cover
   every modifier here too without extra rules. */
.k-megamenu-inner-3 { grid-template-columns: repeat(3, 1fr) 240px; }
.k-megamenu-inner-2 { grid-template-columns: repeat(2, 1fr) 260px; }
.k-megamenu-inner-4 { grid-template-columns: repeat(4, 1fr) 220px; }
/* "Column Width: Equal Columns" (Admin → Mega Menu Builder → Menu Item
   Settings, admin-added top-level items only) — folds the promo card's own
   fixed-width track into the same repeat() so every column, promo included,
   shares one equal width instead of the promo card staying a fixed 220-260px. */
.k-megamenu-inner-equal.k-megamenu-inner-2 { grid-template-columns: repeat(3, 1fr); }
.k-megamenu-inner-equal.k-megamenu-inner-3 { grid-template-columns: repeat(4, 1fr); }
.k-megamenu-inner-equal.k-megamenu-inner-4 { grid-template-columns: repeat(5, 1fr); }

/* About Us "By The Numbers" column — real, live-queried counts (never
   fabricated), styled as a compact stat list rather than a link list. */
.k-megamenu-stat-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.k-megamenu-stat-row i {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: var(--mm-bg, var(--k-teal-50)); color: var(--mm-fg, var(--k-primary));
}
.k-megamenu-stat-row strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--k-ink); line-height: 1.25; }
.k-megamenu-stat-row span { font-size: 11px; color: var(--k-gray-500); font-weight: 600; }

/* Courses "coming soon" info column — Courses is a placeholder section
   (Admin can build it out later), so instead of a link list this column
   is honest about that instead of pretending there's more behind it. */
.k-megamenu-info-note {
  font-size: 12px; line-height: 1.65; color: var(--k-gray-500); padding: 2px 4px 10px;
}
.k-megamenu-info-note strong { color: var(--k-gray-700); }

/* Contact "Get in Touch" column — static info rows (not links), same visual
   rhythm as .k-megamenu-col a so the column reads consistently either way. */
.k-megamenu-info-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; }
.k-megamenu-info-row i {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 0; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mm-bg, var(--k-teal-50)); color: var(--mm-fg, var(--k-primary));
}
.k-megamenu-info-row strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--k-ink); }
.k-megamenu-info-row span { font-size: 12px; color: var(--k-gray-500); }

@media (max-width: 1150px) {
  .k-megamenu-inner { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .k-megamenu-promo { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* Stays position:fixed (the base rule above), NOT static — the nav's
     <li> elements are display:flex (see .k-menu li), so a statically
     positioned panel would lay out as a horizontal flex sibling of the
     link/toggle inside that <li> instead of a full-width sheet below it,
     pushing all its content off-screen to the right. Fixed + the existing
     JS-computed top/bottom (positionDropdown() in frontend.js, which
     already anchors it above the fixed bottom tab bar on mobile) keeps it
     a proper full-width sheet; capped height + scroll so a tall panel
     never runs off the top of the screen. */
  .k-megamenu-panel { box-shadow: 0 -10px 30px rgba(17,24,39,.18); border-top: none; max-height: calc(100vh - 90px); overflow-y: auto; }
  .k-megamenu-inner { grid-template-columns: 1fr; padding: 10px 4px; }
  .k-megamenu-col { border-bottom: 1px solid var(--k-gray-100); padding-bottom: 10px; margin-bottom: 6px; }
  .k-megamenu-col:not(:first-child) { border-left: none; padding-left: 4px; }
}

/* ---------- Badges (exam/series cards) ---------- */
.k-tile-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #fff;
  display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.k-tile-badge-bestseller { background: #16a34a; }
.k-tile-badge-trending { background: #ea580c; }
.k-tile-badge-new { background: var(--k-accent); }
.k-tile-badge-popular { background: #7c3aed; }
/* preview158 round 2: course-detail.php hero polish pass — real badge_label
   moved onto the course image itself (top-right ribbon) instead of the
   buy-box, matching the reference mockup; a real free-preview lesson (if
   one exists) gets a genuine centered play-button overlay that opens that
   real lesson, never a decorative/fake control. */
.k-cd-hero-ribbon { left: auto; right: 14px; top: 14px; }
.k-cd-preview-play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; color: #fff; text-decoration: none; border-radius: 14px;
  background: rgba(15,23,42,0); transition: background .18s ease;
}
.k-cd-preview-play:hover { background: rgba(15,23,42,.28); }
.k-cd-preview-play span {
  width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--k-primary);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.3); transition: transform .18s ease;
}
.k-cd-preview-play:hover span { transform: scale(1.08); }
.k-cd-preview-play em {
  font-style: normal; font-weight: 800; font-size: 13px; padding: 5px 14px; border-radius: 999px;
  background: rgba(15,23,42,.75);
}
.k-cd-buybox-actions { display: flex; gap: 8px; margin-top: 10px; }
.k-cd-buybox-actions .k-wishlist-btn-inline { flex: 1; justify-content: center; margin-top: 0 !important; }
.k-cd-share-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--k-gray-200); background: #fff; color: var(--k-gray-600);
  font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 9px 12px; cursor: pointer;
}
.k-cd-share-btn:hover { border-color: var(--k-primary); color: var(--k-primary); }

/* ---------- Stat strip (used in hero + throughout) ---------- */
.k-stat-strip { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.k-stat-strip .stat { display: flex; align-items: center; gap: 12px; }
.k-stat-strip .stat i {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
}
.k-stat-strip .stat strong { display: block; font-size: 18px; font-weight: 800; color: var(--k-ink); line-height: 1.2; }
.k-stat-strip .stat span { font-size: 11.5px; color: var(--k-gray-500); font-weight: 600; }
.k-stat-strip-card {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius);
  box-shadow: var(--k-shadow); padding: 20px 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 30px;
}

/* ---------- Right-rail cards (Contact / Live Support / Why Choose) ---------- */
.k-rail-form .k-form-group { margin-bottom: 12px; }
.k-rail-form .k-form-control { padding: 10px 12px; font-size: 13px; }
.k-rail-live {
  display: flex; align-items: center; gap: 14px; text-align: left;
}
.k-rail-live .live-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--k-teal-50); color: var(--k-primary);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.k-rail-live strong { display: block; font-size: 13.5px; margin-bottom: 4px; }
.k-rail-live p { margin: 0 0 12px; font-size: 12px; color: var(--k-gray-500); }
.k-online-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--k-success-dark); background: #ecfdf5; padding: 3px 10px; border-radius: 999px; float: right; }
.k-online-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.k-rail-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--k-gray-700); padding: 8px 0; border-top: 1px solid var(--k-gray-100); }
.k-rail-list li:first-child { border-top: none; }
.k-rail-list li i { color: var(--k-success); font-size: 13px; }

@media (max-width: 1050px) {
  .k-home2-grid { grid-template-columns: 1fr; }
  .k-home2-aside { position: static; }
  .k-hero2-grid { grid-template-columns: 1fr; }
}

/* ---------- Section heads (left aligned, homepage 2 style) ---------- */
.k-section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.k-section-head-row h2 { font-size: 22px; margin: 0; font-weight: 800; color: var(--k-ink); }
.k-section-head-row .view-all { font-size: 13px; font-weight: 700; color: var(--k-accent); flex-shrink: 0; }
.k-section-head-row .view-all:hover { text-decoration: underline; }

/* ---------- Feature strip (Why choose bullets, icon+label grid) ---------- */
/* Round 200: "Trusted by Thousands bar... polish 100% premium" — wrapped in
   a real card band (soft shadow, rounded, faint gradient wash) instead of
   sitting bare on the page background, with a divider between each item and
   a hover lift per item, same premium-card language used elsewhere on this
   page (Study Material tiles, Exam Series cards). */
.k-feature-strip-band {
  background: linear-gradient(180deg, #fff, #fbfbff); border: 1px solid rgba(15,23,42,.05);
  border-radius: 20px; box-shadow: var(--k-shadow); padding: 26px 10px;
}
.k-feature-strip { display: grid; grid-template-columns: repeat(5, 1fr); }
.k-feature-strip > div {
  display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-right: 1px solid var(--k-gray-100);
  transition: transform .18s ease;
}
.k-feature-strip > div:last-child { border-right: none; }
.k-feature-strip > div:hover { transform: translateY(-3px); }
.k-feature-strip i {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; box-shadow: 0 8px 16px -8px rgba(15,23,42,.35);
}
.k-feature-strip strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--k-ink); }
.k-feature-strip span { font-size: 11px; color: var(--k-gray-500); font-weight: 600; }
@media (max-width: 900px) {
  .k-feature-strip { grid-template-columns: repeat(2, 1fr); }
  .k-feature-strip > div { border-right: none; border-bottom: 1px solid var(--k-gray-100); padding: 14px 10px; }
}

/* ---------- Exam-series hub v2 (light sidebar + tabs) ---------- */
.k-hub2-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
/* Exam-domain page's 3-column variant (left exam-nav sidebar + main tabs +
   right enroll aside) — .k-hub2-layout's plain 2-column track left a 3rd
   grid child (the .k-single-aside enroll box) with nowhere to go but to
   auto-flow into a new row under the 260px sidebar column, squeezing the
   pricing card into a narrow, broken-looking strip. Fixes that by giving
   the layout an explicit 3rd 300px track. */
.k-hub2-layout-3col { grid-template-columns: 260px 1fr 300px; }
@media (max-width: 1180px) {
  .k-hub2-layout-3col { grid-template-columns: 260px 1fr; }
  .k-hub2-layout-3col > .k-single-aside { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .k-hub2-layout-3col { grid-template-columns: 1fr; } }
/* Round 6 fix ("layout outside page"): a CSS Grid track sized "1fr" is only
   flexible DOWNWARD to its content's min-content width, never below it —
   by default a grid item's automatic minimum size is the natural
   (unwrapped) width its subtree would need. The 8-button tab strip
   (.k-single-tabs) inside this middle column doesn't wrap (it's a flex
   row), so its unwrapped width (~800px) was winning over the 1fr track's
   actual available space (~560-600px) at most desktop widths, forcing the
   whole 3-column grid — and the enroll aside after it — to overflow past
   the centered .k-container's right edge. .k-single-tabs already has
   overflow-x:auto for exactly this case, but that only helps once the grid
   item hosting it is allowed to actually shrink to the track's size.
   min-width:0 overrides the auto floor so the track's real width wins, and
   the tab strip then scrolls horizontally inside itself instead of
   pushing the page wider than the viewport. Only visible at ~1024-1600px
   widths (in a range wider than the 900px 1-col collapse but narrower than
   the ~600px middle column truly needs) — a normal 1920px-wide screenshot
   won't show it, which is why this was easy to miss earlier. */
.k-single-main { min-width: 0; }
.k-hub2-sidebar { background: #fff; border: 1px solid var(--k-gray-100); border-radius: 18px; box-shadow: 0 16px 40px -22px rgba(16,36,43,.18); padding: 20px; position: sticky; top: 108px; }
.k-hub2-sidebar-group { border-bottom: 1px solid var(--k-gray-100); padding-bottom: 14px; margin-bottom: 14px; }
.k-hub2-sidebar-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.k-hub2-sidebar-group h6 { font-size: 11.5px; font-weight: 800; color: var(--k-gray-500); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.k-hub2-sidebar-group h6 i { font-size: 11px; color: var(--k-gray-400); }
.k-hub2-check { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px; color: var(--k-gray-700); cursor: pointer; transition: background .15s ease; }
.k-hub2-check label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.k-hub2-check input { width: 15px; height: 15px; accent-color: var(--k-accent); }
.k-hub2-check .count { font-size: 11px; color: var(--k-gray-400); font-weight: 700; }
.k-hub2-check.active-all label { font-weight: 700; color: var(--k-accent); }
.k-hub2-check.is-checked { background: linear-gradient(90deg, var(--k-teal-50), transparent); }
.k-hub2-domain-link { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--k-gray-300); font-size: 12px; transition: color .15s ease, background .15s ease; }
.k-hub2-domain-link:hover { color: var(--k-accent); background: var(--k-teal-50); }
.k-hub2-popular-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: 8px; transition: background .15s ease; }
.k-hub2-popular-row:hover { background: var(--k-teal-50); }
.k-hub2-popular-row .rank { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--k-gray-50); color: var(--k-gray-500); font-size: 10.5px; font-weight: 800; }
.k-hub2-popular-row:first-child .rank { background: #fef3c7; color: #b45309; }
.k-hub2-popular-row .info { display: flex; flex-direction: column; min-width: 0; }
.k-hub2-popular-row .info strong { font-size: 12.5px; font-weight: 700; color: var(--k-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-hub2-popular-row .info span { font-size: 11px; color: var(--k-gray-400); }

/* ============ frontend/exams.php — Exams Directory ============ */
.k-examdir-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.k-examdir-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--k-gray-600); background: #fff; border: 1px solid var(--k-gray-200); text-decoration: none; transition: all .15s ease;
}
.k-examdir-pill:hover { border-color: var(--k-accent); color: var(--k-accent); }
.k-examdir-pill.active { background: var(--k-accent); border-color: var(--k-accent); color: #fff; }
.k-examdir-pill span { font-size: 10.5px; font-weight: 700; opacity: .65; text-transform: uppercase; letter-spacing: .02em; }
.k-examdir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .k-examdir-grid { grid-template-columns: 1fr; } }
.k-examdir-card {
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--k-shadow); border: 1px solid var(--k-gray-100);
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.k-examdir-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-examdir-card-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.k-examdir-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-examdir-card-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; }
.k-examdir-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.k-examdir-card-body h3 { font-size: 16px; font-weight: 800; color: var(--k-ink); margin: 0; }
.k-examdir-card-sub { font-size: 11.5px; font-weight: 700; color: var(--k-gray-400); text-transform: uppercase; letter-spacing: .03em; }
.k-examdir-card-meta { display: flex; gap: 14px; margin: 6px 0 2px; flex-wrap: wrap; }
.k-examdir-card-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--k-gray-500); font-weight: 600; }
.k-examdir-card-meta i { color: var(--k-accent); }
.k-examdir-card-body p { font-size: 12.5px; line-height: 1.6; color: var(--k-gray-500); margin: 4px 0 14px; flex: 1; }
.k-examdir-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--k-gray-100); }
.k-examdir-why > div { display: flex; align-items: center; gap: 12px; }
.k-examdir-why .ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.k-examdir-why strong { display: block; font-size: 13px; font-weight: 800; color: var(--k-ink); }
.k-examdir-why span { font-size: 11.5px; color: var(--k-gray-500); }
/* .k-hub2-layout already collapses to 1 column at 900px (shared rule above,
   frontend/mock-tests.php's own sidebar) — no page-specific override needed. */
@media (max-width: 900px) { .k-examdir-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k-examdir-why { grid-template-columns: 1fr; } }

.k-hub2-filters-label {
  display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800;
  color: var(--k-gray-500); text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 14px;
}
.k-hub2-filters-label a { color: var(--k-danger); text-transform: none; font-weight: 700; letter-spacing: 0; font-size: 12px; }
.k-hub2-sidebar-actions { display: flex; gap: 8px; margin-top: 6px; }
.k-hub2-sidebar-actions .k-btn { flex: 1; justify-content: center; }

/* Round 6 fix ("Categories sidebar background still same / not changed"):
   exams.php's own category-directory sidebar (.k-hub2-sidebar) now takes the
   same dark, header-matching background exam-domain.php's own sidebar
   already got last round (kesp_examnav_dark_palette(), applied inline via
   this .k-examnav-dark modifier + the --examnav-* custom properties it
   sets) — so both of the app's "exam sidebar" surfaces read as one
   consistent component instead of one dark and one still white. Every rule
   below only re-colors text/borders that assumed a white background;
   layout, spacing and the colored category icon chips (already fixed last
   round) are untouched. */
.k-hub2-sidebar.k-examnav-dark { border: none; box-shadow: 0 16px 40px -22px rgba(16,36,43,.4); }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-all,
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-row { color: var(--examnav-text, #fff); }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-all { background: var(--examnav-hover, rgba(255,255,255,.08)); }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-all.active,
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-row.active { background: var(--k-accent, #2563eb); color: #fff; }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-row:hover { background: var(--examnav-hover, rgba(255,255,255,.08)); }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-row small { color: var(--examnav-text, #fff); opacity: .55; }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-row .fa-chevron-right { color: var(--examnav-text, #fff); opacity: .35; }
.k-hub2-sidebar.k-examnav-dark .k-examdir-catlist-all .count { background: rgba(255,255,255,.18); color: var(--examnav-text, #fff); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-filters-label { color: var(--examnav-text, #fff); opacity: .55; }
.k-hub2-sidebar.k-examnav-dark .k-hub2-sidebar-group { border-bottom-color: var(--examnav-border, rgba(255,255,255,.1)); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-sidebar-group h6 { color: var(--examnav-text, #fff); opacity: .7; }
.k-hub2-sidebar.k-examnav-dark .k-hub2-sidebar-group h6 i { color: var(--examnav-text, #fff); opacity: .5; }
.k-hub2-sidebar.k-examnav-dark .k-hub2-check { color: var(--examnav-text, #fff); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-check:hover { background: var(--examnav-hover, rgba(255,255,255,.08)); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-check .count { color: var(--examnav-text, #fff); opacity: .5; }
.k-hub2-sidebar.k-examnav-dark .k-hub2-check.is-checked { background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-check.is-checked label { color: #fbbf24; }
.k-hub2-sidebar.k-examnav-dark .k-hub2-check-link .fake-box { border-color: var(--examnav-border, rgba(255,255,255,.35)); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-sidebar-actions .k-btn-outline { border-color: var(--examnav-border, rgba(255,255,255,.35)); color: var(--examnav-text, #fff); }
.k-hub2-sidebar.k-examnav-dark .k-hub2-sidebar-actions .k-btn-outline:hover { background: var(--examnav-hover, rgba(255,255,255,.08)); color: var(--examnav-text, #fff); }

.k-hub2-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--k-gray-200); margin-bottom: 24px; flex-wrap: wrap; }
.k-hub2-tab {
  padding: 11px 18px; font-size: 13.5px; font-weight: 700; color: var(--k-gray-500); border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0; transition: color .15s ease, background .15s ease;
}
.k-hub2-tab:hover { color: var(--k-ink); background: var(--k-gray-50); }
.k-hub2-tab.active { color: var(--k-accent); border-bottom-color: var(--k-accent); background: linear-gradient(180deg, var(--k-teal-50), #eef2ff); }
.k-hub2-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: 14px; padding: 12px 16px; box-shadow: var(--k-shadow);
}
.k-hub2-search { display: flex; align-items: center; background: var(--k-gray-50); border: 1px solid var(--k-gray-200); border-radius: 999px; overflow: hidden; flex: 1; min-width: 220px; max-width: 420px; }
.k-hub2-search input { border: none; outline: none; background: none; padding: 10px 6px 10px 16px; font-size: 13.5px; width: 100%; font-family: var(--k-font); }
.k-hub2-search button { border: none; background: var(--k-primary); color: #fff; width: 40px; height: 40px; margin: 3px; border-radius: 50%; flex-shrink: 0; cursor: pointer; }
.k-hub2-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--k-gray-500); font-weight: 600; }
.k-hub2-sort select { border: 1px solid var(--k-gray-200); border-radius: 8px; padding: 8px 12px; font-family: var(--k-font); font-size: 13px; color: var(--k-ink); font-weight: 700; }
.k-examhub-viewtoggle { border-radius: 999px; overflow: hidden; }

.k-series-price { display: flex; align-items: baseline; gap: 8px; }
.k-series-price strong { font-size: 18px; font-weight: 800; color: var(--k-ink); }
.k-series-price s { font-size: 12.5px; color: var(--k-gray-400); font-weight: 500; }
.k-series-price-bundled { align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--k-gray-500); }
.k-series-price-bundled i { color: var(--k-accent); }
.k-series-discount { font-size: 11px; font-weight: 800; color: var(--k-success-dark); background: #ecfdf5; padding: 2px 7px; border-radius: 6px; }
.k-series-free-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--k-success-dark); background: #ecfdf5; padding: 6px 10px; border-radius: 8px; margin-top: 10px; }
.k-series-free-note i { color: var(--k-success); }
.k-series-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.k-series-card-actions .k-btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 12.5px; }

@media (max-width: 960px) {
  .k-hub2-layout { grid-template-columns: 1fr; }
  .k-hub2-sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 300px; z-index: 300;
    border-radius: 0; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.25);
  }
  .k-hub2-sidebar.open { display: block; }
  .k-hub2-sidebar .k-examhub-sidebar-close {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
    background: var(--k-gray-50); color: var(--k-ink); border: none; margin: 0 0 12px auto; cursor: pointer;
  }
}

/* ---------- Pagination ---------- */
.k-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; }
.k-pagination a, .k-pagination span {
  min-width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; border: 1px solid var(--k-gray-200); color: var(--k-gray-700);
}
.k-pagination a:hover { border-color: var(--k-accent); color: var(--k-accent); }
.k-pagination .current { background: var(--k-accent); color: #fff; border-color: var(--k-accent); }

/* ---------- Back to top ---------- */
.k-back-to-top {
  position: fixed; right: 24px; bottom: 90px; width: 42px; height: 42px; border-radius: 50%; z-index: 190;
  background: var(--k-primary); color: #fff; border: none; cursor: pointer; box-shadow: var(--k-shadow-lg);
  display: flex; align-items: center; justify-content: center; font-size: 15px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.k-back-to-top.visible { opacity: 1; pointer-events: auto; }
.k-back-to-top:hover { transform: translateY(-3px); }
@media (max-width: 900px) { .k-back-to-top { bottom: 156px; } }

/* ---------- Skeleton loaders / toasts ---------- */
.k-skeleton { background: linear-gradient(90deg, var(--k-gray-100) 25%, var(--k-gray-200) 37%, var(--k-gray-100) 63%); background-size: 400% 100%; animation: k-skeleton 1.4s ease infinite; border-radius: 8px; }
@keyframes k-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.k-toast-stack { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.k-toast { background: #fff; border: 1px solid var(--k-gray-200); box-shadow: var(--k-shadow-lg); border-radius: 12px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; min-width: 260px; }
.k-toast-success { border-left: 4px solid var(--k-success); }
.k-toast-error { border-left: 4px solid var(--k-danger); }
.k-toast-info { border-left: 4px solid var(--k-accent); }

/* ---------- Exam-hub banner: full-bleed dark navy enterprise hero + real stat pills ----------
   .k-hub-banner and its children are exclusive to frontend/mock-tests.php
   (confirmed — not reused by Homepage 1/2), so these are restyled directly
   rather than needing a .k-examhub-page scope wrapper.
   Full-bleed: .k-hub-banner is a direct child of <section>, outside any
   .k-container, so it naturally spans the full viewport width edge-to-edge,
   flush under the sticky nav (zero top margin). .k-hub-banner-inner carries
   BOTH .k-hub-banner-inner and .k-container in the markup, so it inherits
   .k-container's max-width/centering and only needs its own vertical padding
   here — the readable content stays aligned to the site's normal 1180px
   column while the colored band behind it runs full width. */
.k-hub-banner {
  position: relative; overflow: hidden; margin: 0; padding: 0; border-radius: 0;
  background: linear-gradient(120deg, #0b1734 0%, #10203f 45%, #0f2a4a 100%);
  box-shadow: 0 18px 40px -22px rgba(8,15,35,.5);
}
.k-hub-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 82% 20%, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle at 82% 20%, #000 0%, transparent 62%);
}
.k-hub-banner::after {
  content: ''; position: absolute; right: 8%; top: -80px; width: 280px; height: 280px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(37,99,235,.28), transparent 70%);
}
.k-hub-banner-inner {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; padding-top: 46px; padding-bottom: 46px;
}
.k-hub-banner-text { max-width: 520px; }
.k-hub-banner-text h1 { font-family: var(--k-font-serif); font-size: 34px; font-weight: 700; margin: 0 0 12px; color: #fff; letter-spacing: -.01em; line-height: 1.2; }
.k-hub-banner-text p { margin: 6px 0 0; color: #c7d2fe; font-size: 14.5px; max-width: 480px; line-height: 1.7; }
.k-hub-breadcrumb2 { font-size: 12.5px; font-weight: 700; color: var(--k-gray-400); }
.k-hub-breadcrumb2 a { color: var(--k-gray-500); }
.k-hub-breadcrumb2 a:hover { color: var(--k-accent); }
.k-hub-breadcrumb2 .sep { margin: 0 6px; }
.k-hub-breadcrumb2 .current { color: var(--k-primary); }
.k-hub-banner .k-hub-breadcrumb2 { color: rgba(199,210,254,.75); margin-bottom: 14px; }
.k-hub-banner .k-hub-breadcrumb2 a { color: #93c5fd; }
.k-hub-banner .k-hub-breadcrumb2 a:hover { color: #fff; }
.k-hub-banner .k-hub-breadcrumb2 .current { color: #fff; }
.k-hub-banner-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.k-hub-banner-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 108px; }
.k-hub-banner-stat .icon {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.k-hub-banner-stat .icon.stat-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.k-hub-banner-stat .icon.stat-gold { background: linear-gradient(135deg, #f59e0b, #b45309); }
.k-hub-banner-stat .icon.stat-purple { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.k-hub-banner-stat .icon.stat-green { background: linear-gradient(135deg, #22c55e, #15803d); }
.k-hub-banner-stat strong { font-family: var(--k-font-serif); font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; }
.k-hub-banner-stat span:last-child { font-size: 11.5px; font-weight: 700; color: #a5b4d9; text-transform: uppercase; letter-spacing: .04em; }
/* Vertical rhythm for the contained content below each full-bleed hero —
   page-exclusive, so this doesn't touch the shared .k-container padding
   used site-wide. */
.k-examhub-content { padding-top: 34px; }
@media (max-width: 900px) { .k-hub-banner-inner { padding: 32px 0; } .k-hub-banner-stats { width: 100%; gap: 22px; } }
@media (max-width: 640px) { .k-hub-banner-stats { justify-content: space-between; gap: 16px; } .k-hub-banner-text h1 { font-size: 27px; } }

/* Multi-select checkbox group that auto-submits, used in the exam-hub sidebar */
.k-hub2-check-link { display: flex; align-items: center; gap: 9px; }
.k-hub2-check-link .fake-box {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--k-gray-300); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff;
}
.k-hub2-check.is-checked .fake-box { background: var(--k-accent); border-color: var(--k-accent); }
.k-hub2-check.is-checked label { color: var(--k-accent); font-weight: 700; }

/* ============================================================
   EXAM SINGLE PAGE (series detail) — hero, facts, tabs, sidebar
   ============================================================ */
/* Full-bleed, same technique as .k-hub-banner above: .k-single-hero is a
   direct child of <section> (outside any .k-container) so the dark band
   spans the full viewport edge-to-edge, flush under the sticky nav.
   .k-single-hero-inner carries both .k-single-hero-inner and .k-container
   in the markup, so its content stays aligned to the site's normal column. */
.k-single-hero {
  position: relative; overflow: hidden; margin: 0;
  min-height: 240px; display: flex; align-items: flex-end; background: linear-gradient(135deg, var(--k-primary-dark), var(--k-primary));
  background-size: cover; background-position: center;
}
.k-single-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,43,44,.92) 0%, rgba(11,43,44,.72) 45%, rgba(11,43,44,.4) 100%); }
.k-single-hero-inner { position: relative; z-index: 1; padding: 40px 24px; color: #fff; }
.k-single-hero .k-hub-breadcrumb2 { color: rgba(255,255,255,.75); margin-bottom: 10px; }
.k-single-hero .k-hub-breadcrumb2 a { color: rgba(255,255,255,.75); }
.k-single-hero .k-hub-breadcrumb2 .current { color: #fff; }
.k-single-hero-badge {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #1e1b4b; background: #fbbf24; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.k-single-hero h1 { font-size: 30px; font-weight: 800; margin: 0 0 10px; }
.k-single-hero-sub { margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: 14px; max-width: 640px; line-height: 1.65; }
.k-single-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.k-single-hero-stats > div {
  display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); padding: 7px 14px; border-radius: 999px;
}
.k-single-hero-stats i { color: var(--k-accent-light, #93c5fd); align-self: center; font-size: 12px; }
.k-single-hero-stats .stars i { color: #f59e0b; }
.k-single-hero-stats > div span { font-weight: 600; color: rgba(255,255,255,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 640px) { .k-single-hero h1 { font-size: 24px; } }

.k-single-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 900px) { .k-single-layout { grid-template-columns: 1fr; } }

.k-single-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--k-gray-200); margin-bottom: 24px; overflow-x: auto; }
.k-single-tab {
  padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--k-gray-500); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; font-family: var(--k-font);
}
.k-single-tab:hover { color: var(--k-ink); background: var(--k-gray-50); }
.k-single-tab.active { color: var(--k-accent); border-bottom-color: var(--k-accent); background: linear-gradient(180deg, var(--k-teal-50), #eef2ff); }
.k-single-tab .count { opacity: .6; font-weight: 600; }
.k-single-tabpanel { display: none; }
.k-single-tabpanel.active { display: block; }

/* ---- Tests tab: "Try before you buy" strip + full-width test rows ---- */
.k-single-trybuy {
  display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, var(--k-teal-50), #eef2ff);
  border: 1px solid var(--k-gray-100); border-radius: 14px; padding: 14px 18px; margin-bottom: 20px;
}
.k-single-trybuy i { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--k-primary); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; box-shadow: var(--k-shadow); }
.k-single-trybuy strong { display: block; font-size: 13.5px; color: var(--k-ink); margin-bottom: 2px; }
.k-single-trybuy span { font-size: 12.5px; color: var(--k-gray-500); }
.k-single-testlist { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.k-single-testrow {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--k-gray-100);
  border-radius: 12px; padding: 14px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.k-single-testrow:hover { border-color: var(--k-gray-200); box-shadow: var(--k-shadow); }
.k-single-testrow .num {
  width: 30px; height: 30px; border-radius: 9px; background: var(--k-teal-50); color: var(--k-primary);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; flex-shrink: 0;
}
.k-single-testrow .meta { flex: 1; min-width: 0; }
.k-single-testrow .meta h5 { font-size: 13.5px; font-weight: 700; color: var(--k-ink); margin: 0 0 4px; }
.k-single-testrow .sub { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--k-gray-500); font-weight: 600; }
.k-single-testrow .sub i { color: var(--k-gray-400); margin-right: 3px; }
.k-single-testrow-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 10px;
  border-radius: 999px; flex-shrink: 0;
}
.k-single-testrow-badge.is-free { background: #ecfdf5; color: #15803d; }
.k-single-testrow-badge.is-premium { background: #fef3e2; color: #b45309; }
.k-single-testrow .k-btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .k-single-testrow { flex-wrap: wrap; }
  .k-single-testrow .meta { flex-basis: 100%; order: 1; }
  .k-single-testrow .k-btn { margin-left: auto; }
}

/* Exam Series "Tests & Schedule" table (mock-tests.php single-series view) —
   replaces the old .k-single-testrow card list with a real, filterable
   table matching the reference layout. */
.k-testtable-stats { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-bottom: 16px; padding: 14px 18px; background: var(--k-teal-50); border-radius: 12px; }
.k-testtable-stats > div { display: flex; flex-direction: column; }
.k-testtable-stats strong { font-size: 17px; font-weight: 800; color: var(--k-ink); }
.k-testtable-stats span { font-size: 11px; color: var(--k-gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.k-testtable-stats .feature { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--k-primary); }
.k-testtable-stats .feature i { font-size: 15px; }
.k-testtable-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.k-testtable-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.k-testtable-wrap { overflow-x: auto; border: 1px solid var(--k-gray-100); border-radius: 12px; }
.k-testtable { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.k-testtable th { text-align: left; padding: 12px 16px; background: var(--k-gray-50); color: var(--k-gray-500); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.k-testtable td { padding: 12px 16px; border-top: 1px solid var(--k-gray-100); color: var(--k-gray-600); }
.k-testtable td.name { color: var(--k-ink); font-weight: 700; white-space: normal; min-width: 180px; }
.k-testtable tbody tr:hover { background: var(--k-teal-50); }
.k-testtable-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.k-testtable-badge.is-free { background: #ecfdf5; color: #15803d; }
.k-testtable-badge.is-premium { background: #fef3e2; color: #b45309; }
@media (max-width: 640px) { .k-testtable-stats .feature { margin-left: 0; flex-basis: 100%; } }
/* preview170 ("adjust layout fit for window"): with the Tests tab now open by
   default (see mock-tests.php), this 8-column table is the very first thing
   a visitor sees — at common laptop widths the fixed 300px sidebar
   (.k-single-aside) leaves the main column too narrow for all 8 nowrap
   columns at once, forcing a horizontal scrollbar just to reach the Action
   button. Rather than touch the real data, the two least essential columns
   (Marks, then Duration too on tighter widths) progressively step aside —
   same real figures are still one click away on the exam's own detail page —
   so the table, its Status badge and its Start/Unlock action stay in view
   without scrolling on ordinary windows. Below the 900px breakpoint where
   the sidebar already stacks under the content (full-width table), both stay
   visible since the table has the whole viewport to itself. */
@media (min-width: 901px) and (max-width: 1360px) {
  .k-testtable th:nth-child(5), .k-testtable td:nth-child(5) { display: none; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  .k-testtable th:nth-child(6), .k-testtable td:nth-child(6) { display: none; }
}

/* Single-Test detail page (exam-detail.php) — the row of real, already-
   established platform capabilities shown under a test's Section-wise
   Details table. Same card language as .k-single-fact, laid out as a
   wrapping strip rather than a 2-col grid since these are short labels. */
.k-test-features { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.k-test-features > div { display: flex; align-items: center; gap: 10px; background: var(--k-teal-50); border-radius: 10px; padding: 12px 16px; font-size: 12.5px; font-weight: 700; color: var(--k-ink); flex: 1 1 200px; }
.k-test-features > div i { color: var(--k-primary); font-size: 15px; flex-shrink: 0; }

.k-single-tab-link { color: var(--k-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.k-single-tab-link:hover { text-decoration: underline; }

.k-single-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 26px; }
.k-single-fact { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 12px; padding: 14px 16px; }
.k-single-fact i { width: 36px; height: 36px; border-radius: 10px; background: var(--k-teal-50); color: var(--k-primary); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.k-single-fact strong { display: block; font-size: 13.5px; color: var(--k-ink); }
.k-single-fact span { font-size: 11.5px; color: var(--k-gray-400); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.k-single-prose { font-size: 14px; line-height: 1.8; color: var(--k-gray-600); }
.k-single-prose h4 { font-size: 15px; font-weight: 800; color: var(--k-ink); margin: 22px 0 10px; }
.k-single-prose h4:first-child { margin-top: 0; }

/* Round-7 addition: quick-action row at the bottom of the Overview tabpanel
   (mock-tests.php's exam-series detail page) — "View Test Details" jumps to
   the real Test Details tab in place (data-jump-tab, see frontend.js), and
   the purchase/start button reuses the exact copy+href logic of the aside's
   own checkout button. flex-wrap so it stacks cleanly under the narrower
   single-column layout below 900px. */
.k-single-overview-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.k-single-faq { border: 1px solid var(--k-gray-100); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.k-single-faq summary { padding: 14px 16px; font-size: 13.5px; font-weight: 700; color: var(--k-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.k-single-faq summary::-webkit-details-marker { display: none; }
.k-single-faq summary::after { content: '\002B'; font-size: 16px; color: var(--k-gray-400); font-weight: 400; }
.k-single-faq[open] summary::after { content: '\2212'; }
.k-single-faq[open] summary { border-bottom: 1px solid var(--k-gray-100); }
.k-single-faq p { padding: 14px 16px; margin: 0; font-size: 13.5px; color: var(--k-gray-600); line-height: 1.7; }

.k-single-aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.k-single-aside-card { background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow); padding: 20px; }
.k-single-aside-card h4 { font-size: 14px; font-weight: 800; margin: 0 0 16px; }
.k-single-aside-list { list-style: none; margin: 0 0 16px; padding: 0; }
.k-single-aside-list li { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--k-gray-600); padding: 9px 0; border-bottom: 1px dashed var(--k-gray-100); }
.k-single-aside-list li:last-child { border-bottom: none; }
.k-single-aside-list strong { color: var(--k-primary); font-weight: 800; }
.k-single-aside-free-note { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--k-success-dark); background: #ecfdf5; padding: 8px 11px; border-radius: 9px; margin-top: 12px; }
.k-single-aside-free-note i { color: var(--k-success); }

/* Exam Domain page — colored pill Quick Action links (own color set via
   inline style per link, same convention as .k-examdir-why's icon colors)
   and the "Important Dates" timeline shown when admin content parses into
   real event/date pairs. */
.k-domain-qa-list { display: flex; flex-direction: column; gap: 10px; }
.k-domain-qa-link { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 11px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .15s ease; }
.k-domain-qa-link:hover { transform: translateX(2px); }
.k-domain-qa-link .ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex-shrink: 0; }
.k-domain-qa-link .arrow { margin-left: auto; font-size: 11px; opacity: .7; }

.k-domain-timeline { display: flex; flex-wrap: wrap; gap: 0; margin: 6px 0; }
.k-domain-timeline-item { flex: 1 1 150px; min-width: 140px; padding: 0 16px 16px 0; position: relative; }
.k-domain-timeline-item .dot { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--k-primary); color: #fff; font-size: 11.5px; font-weight: 800; margin-bottom: 10px; }
.k-domain-timeline-item strong { display: block; font-size: 13px; color: var(--k-ink); margin-bottom: 3px; }
.k-domain-timeline-item .date { font-size: 12px; color: var(--k-gray-400); font-weight: 600; }
@media (max-width: 560px) { .k-domain-timeline-item { flex: 1 1 100%; } }

/* ---- Premium "checkout" style aside card (series price/checklist/CTA) ---- */
.k-single-checkout-card { border-top: 3px solid var(--k-warning); }
.k-single-checkout-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #b45309; background: #fef3e2; padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.k-single-checkout-card h4 { font-size: 15px; margin-bottom: 10px; line-height: 1.35; }
.k-single-checkout-price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 16px; }
.k-single-checkout-price strong { font-size: 24px; font-weight: 800; color: var(--k-ink); }
.k-single-checkout-price s { font-size: 13.5px; color: var(--k-gray-400); font-weight: 500; }
.k-single-checklist { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.k-single-checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--k-gray-700); font-weight: 600; line-height: 1.4; }
.k-single-checklist i { color: var(--k-success); font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.k-single-aside-promo {
  display: flex; align-items: center; gap: 14px; border-radius: var(--k-radius); padding: 18px 20px;
  background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%); color: #fff; box-shadow: var(--k-shadow-lg);
}
.k-single-aside-promo i { font-size: 26px; color: #fbbf24; flex-shrink: 0; }
.k-single-aside-promo strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.k-single-aside-promo span { font-size: 11.5px; color: rgba(255,255,255,.7); line-height: 1.4; }

/* ============================================================
   HOMEPAGE (final, matches reference) — hero collage, carousel,
   colored exam-series blocks, 4-col dashboard-preview row.
   ============================================================ */
.k-home3 { padding: 32px 0 0; }
.k-home3 > .k-container > * + * { margin-top: 56px; }

.k-hero3 {
  background: linear-gradient(115deg, #eef1fb 0%, #e4ebf1 100%); border-radius: var(--k-radius);
  padding: 44px 40px; overflow: hidden;
}
.k-hero3-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.k-hero3-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: var(--k-teal-50); border: none;
  color: var(--k-primary-dark); font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
}
.k-hero3 h1 { font-size: 40px; line-height: 1.14; margin: 0 0 16px; font-weight: 800; color: var(--k-ink); letter-spacing: -.01em; }
.k-hero3 h1 span { color: var(--k-primary); }
.k-hero3 p.lead { font-size: 15px; color: var(--k-gray-600); margin: 0 0 26px; max-width: 460px; line-height: 1.65; }
.k-hero3-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Visual: a soft teal blob sits BEHIND a naturally-shaped (rounded-rect, not
   circle-clipped) photo, matching the reference composition — the photo
   itself keeps its own proportions instead of being forced into a circle. */
.k-hero3-visual { position: relative; padding: 10px; }
.k-hero3-blob {
  position: absolute; top: 6%; left: 50%; width: 78%; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(23,162,163,.30), rgba(23,162,163,.12) 65%, transparent 78%);
  transform: translateX(-50%); z-index: 0;
}
.k-hero3-visual-img {
  border-radius: 26px; overflow: hidden; box-shadow: var(--k-shadow-lg);
  aspect-ratio: 4 / 5; max-width: 360px; margin: 0 auto; position: relative; z-index: 1;
}
.k-hero3-visual-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-hero3-float {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--k-ink); white-space: nowrap; z-index: 2; text-align: center;
}
.k-hero3-float i {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; flex-shrink: 0; box-shadow: 0 8px 18px rgba(16,36,43,.16);
}
.k-hero3-float.f1 { top: 4%; left: 6%; }
.k-hero3-float.f2 { top: 34%; left: -8%; flex-direction: row; text-align: left; }
.k-hero3-float.f3 { top: 22%; right: -6%; }
.k-hero3-float.f4 { top: 54%; right: -4%; }
@media (max-width: 900px) {
  .k-hero3-grid { grid-template-columns: 1fr; }
  .k-hero3-visual { order: -1; }
  .k-hero3-float { display: none; }
}
@media (max-width: 640px) { .k-hero3 h1 { font-size: 30px; } }

/* Featured Exams carousel */
.k-carousel-wrap { position: relative; }
.k-carousel-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px;
  scrollbar-width: none;
}
.k-carousel-track::-webkit-scrollbar { display: none; }
.k-carousel-track > * { flex: 0 0 250px; }
.k-carousel-nav {
  position: absolute; top: 40%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--k-gray-200); box-shadow: var(--k-shadow); display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 2; color: var(--k-ink); font-size: 13px;
}
.k-carousel-nav.prev { left: -18px; }
.k-carousel-nav.next { right: -18px; }
@media (max-width: 640px) { .k-carousel-nav { display: none; } }

/* Exam Series colored blocks */
.k-series-block {
  border-radius: var(--k-radius); padding: 22px; color: #fff; position: relative; overflow: hidden;
  min-height: 190px; display: flex; flex-direction: column; text-decoration: none;
}
.k-series-block::after {
  content: ''; position: absolute; right: -30px; bottom: -30px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.k-series-block .badge-count {
  align-self: flex-start; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 800; padding: 4px 10px;
  border-radius: 999px; margin-bottom: auto;
}
.k-series-block i.icon { font-size: 26px; opacity: .9; margin-bottom: 10px; position: relative; z-index: 1; }
.k-series-block h4 { font-size: 15.5px; font-weight: 800; margin: 0 0 6px; position: relative; z-index: 1; }
.k-series-block p { font-size: 12px; margin: 0 0 14px; opacity: .85; line-height: 1.5; position: relative; z-index: 1; }
.k-series-block .view-link { font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
.k-series-block-purple { background: linear-gradient(150deg, #6d47c9, #38236d); }
.k-series-block-green { background: linear-gradient(150deg, #17a2a3, #013c3b); }
.k-series-block-blue { background: linear-gradient(150deg, #2563eb, #002d74); }
.k-series-block-orange { background: linear-gradient(150deg, #f59e0b, #b45309); }
.k-series-block-pink { background: linear-gradient(150deg, #db2777, #7b143c); }

/* 4-column dashboard-preview row: Practice / Performance / Contact / Support.
   Named k-quickpanel-row (not k-dash-row) because .k-dash-row is already a
   different component — a flex list-row inside dashboard.php's account cards
   ("My Purchases" / "Recent Practice Sessions"). Reusing that class name here
   silently broke those rows (later rule in the cascade wins on equal
   specificity), so this section gets its own name. */
.k-quickpanel-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.k-dash-card {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow);
  padding: 22px; display: flex; flex-direction: column;
}
.k-dash-card h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 16px; }
.k-practice-list { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.k-practice-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--k-gray-100); }
.k-practice-list li:last-child { border-bottom: none; }
.k-practice-list a { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--k-ink); flex: 1; }
.k-practice-list .sub { display: block; font-size: 11px; font-weight: 500; color: var(--k-gray-400); }
.k-practice-list i.icon-box {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; color: #fff;
}
.k-practice-list .chev { color: var(--k-gray-300); font-size: 12px; }
.k-perf-donut-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.k-perf-donut { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
.k-perf-donut svg { transform: rotate(-90deg); }
.k-perf-donut-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--k-ink); }
.k-perf-status strong { display: block; font-size: 14px; font-weight: 800; color: var(--k-success-dark); margin-bottom: 4px; }
.k-perf-status span { font-size: 11.5px; color: var(--k-gray-500); line-height: 1.4; display: block; }
.k-perf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.k-perf-stats div { text-align: center; padding: 10px 4px; background: var(--k-gray-50); border-radius: 10px; }
.k-perf-stats strong { display: block; font-size: 14px; font-weight: 800; color: var(--k-ink); }
.k-perf-stats span { font-size: 10px; color: var(--k-gray-500); font-weight: 600; }
@media (max-width: 1100px) { .k-quickpanel-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .k-quickpanel-row { grid-template-columns: 1fr; } }

/* ---------- Hero trust-line (avatar stack + real rating/student count) ---------- */
.k-hero3-trust { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.k-hero3-avatars { display: flex; flex-shrink: 0; }
.k-hero3-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(16,36,43,.14); margin-left: -10px;
}
.k-hero3-avatar:first-child { margin-left: 0; }
.k-hero3-avatar.av1 { background: linear-gradient(135deg,#2563eb,#1d4ed8); z-index: 5; }
.k-hero3-avatar.av2 { background: linear-gradient(135deg,#17a2a3,#0f6263); z-index: 4; }
.k-hero3-avatar.av3 { background: linear-gradient(135deg,#f59e0b,#d97706); z-index: 3; }
.k-hero3-avatar.av4 { background: linear-gradient(135deg,#7c3aed,#5b21b6); z-index: 2; }
.k-hero3-avatar.av5 { background: linear-gradient(135deg,#dc2626,#b91c1c); z-index: 1; }
.k-hero3-trust-text { font-size: 12.5px; color: var(--k-gray-600); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.k-hero3-trust-text strong { color: var(--k-ink); }
.k-hero3-trust-stars { color: #f59e0b; letter-spacing: 1px; font-size: 12px; }
.k-hero3-trust-stars strong { color: var(--k-ink); margin-left: 4px; letter-spacing: normal; }
@media (max-width: 640px) { .k-hero3-trust { margin-top: 20px; } }

/* ---------- Section eyebrow / subhead (premium editorial heading style) ---------- */
.k-section-eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--k-primary); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 4px;
}
.k-section-sub { font-size: 13.5px; color: var(--k-gray-500); margin: 4px 0 0; }
.k-rating-stars { color: #f59e0b; letter-spacing: 1px; }

/* ---------- How It Works ---------- */
.k-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.k-how-step {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow);
  padding: 34px 24px 26px; text-align: center; position: relative; transition: transform .25s ease, box-shadow .25s ease;
}
.k-how-step:hover { transform: translateY(-6px); box-shadow: var(--k-shadow-xl); }
/* preview165: redesigned again — pastel per-step card background instead of
   plain white, and the number badge sits INLINE beside the icon (not
   overlapping its corner, the round-164 treatment) as bold colored text,
   matching the user's dedicated reference mockup. */
.k-how-step-blue   { background: #eff6ff; border-color: #dbeafe; }
.k-how-step-purple { background: #f5f3ff; border-color: #ede9fe; }
.k-how-step-green  { background: #f0fdf4; border-color: #dcfce7; }
.k-how-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.k-how-num { font-size: 22px; font-weight: 800; line-height: 1; }
.k-how-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; box-shadow: 0 10px 22px rgba(16,36,43,.14); flex-shrink: 0;
}
.k-how-step h4 { font-size: 15.5px; font-weight: 800; margin: 0 0 8px; color: var(--k-ink); }
.k-how-step p { font-size: 13px; color: var(--k-gray-500); line-height: 1.6; margin: 0; }
.k-how-step:not(:last-child)::after {
  content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; right: -33px;
  transform: translateY(-50%); color: var(--k-gray-300); font-size: 16px; z-index: 1;
}
@media (max-width: 900px) {
  .k-how-grid { grid-template-columns: 1fr; }
  .k-how-step:not(:last-child)::after { display: none; }
}

/* ---------- Testimonials (real admin-authored quotes only — see Admin → Testimonials) ---------- */
.k-testimonial-card {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow);
  padding: 26px 24px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease;
}
.k-testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-xl); }
.k-testimonial-quote-mark { color: var(--k-gray-200); font-size: 22px; margin-bottom: 10px; }
.k-testimonial-stars { color: #f59e0b; font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; }
.k-testimonial-text { font-size: 13.5px; color: var(--k-gray-600); line-height: 1.65; margin: 0 0 20px; flex: 1; }
.k-testimonial-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--k-gray-100); }
.k-testimonial-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--k-primary),var(--k-primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.k-testimonial-who strong { display: block; font-size: 13px; color: var(--k-ink); }
.k-testimonial-who span { font-size: 11.5px; color: var(--k-gray-500); }
.k-carousel-track > .k-testimonial-card { flex: 0 0 320px; }

/* ---------- Scroll-reveal (progressive enhancement — see frontend.js) ---------- */
.k-reveal { transition: opacity .6s ease, transform .6s ease; }
.k-reveal.k-reveal-init { opacity: 0; transform: translateY(24px); }
.k-reveal.k-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .k-reveal, .k-reveal.k-reveal-init { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Hover polish (premium depth on existing components) ---------- */
.k-series-block { transition: transform .25s ease, box-shadow .25s ease; }
.k-series-block:hover { transform: translateY(-6px); box-shadow: var(--k-shadow-xl); }
.k-dash-card { transition: transform .25s ease, box-shadow .25s ease; }
.k-dash-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-xl); }
.k-stat-strip-card { transition: box-shadow .25s ease; }
.k-stat-strip-card:hover { box-shadow: var(--k-shadow-xl); }

/* ==================================================================
   HEADER 2 — "Premium Enterprise" template (Admin → Header Settings →
   Header Template). Deep-navy top/middle/menu bar matched to the
   footer's own palette — background colors are injected dynamically
   via an inline <style> block in frontend/includes/header-v2.php
   (reads the same $color_footer/$footer_light/$footer_dark used by
   the footer, so a custom footer color is picked up automatically).
   Reuses Header 1's .k-topbar/.k-infobar/.k-nav/.k-menu/.k-megamenu-*
   markup, structure and JS hooks unchanged — only chrome typography/
   accents are scoped under .k-hdr2 below.
   ================================================================== */
.k-hdr2 .k-topbar .k-container { padding: 8px 24px; }
.k-hdr2-support {
  display: flex; align-items: center; gap: 8px; background: transparent; color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em; border: 1px solid rgba(240,180,41,.5);
  transition: background .15s ease, border-color .15s ease; text-decoration: none;
}
.k-hdr2-support i { color: var(--k-warning); }
.k-hdr2-support:hover { background: rgba(255,255,255,.08); border-color: var(--k-warning); }
@media (max-width: 700px) { .k-hdr2-support span { display: none; } }

.k-hdr2-infobar-inner { padding: 30px 24px; gap: 24px; }
.k-hdr2 .k-brand-name { color: #fff; }
.k-hdr2 .k-brand-tagline { color: rgba(255,255,255,.6); }

.k-hdr2-search {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px;
  flex: 1; max-width: 420px; padding: 4px 4px 4px 18px; box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.k-hdr2-search i { color: var(--k-gray-400); font-size: 13px; flex-shrink: 0; }
.k-hdr2-search input {
  flex: 1; border: none; outline: none; font-size: 13.5px; font-family: var(--k-font); color: var(--k-ink);
  background: transparent; min-width: 0;
}
.k-hdr2-search input::placeholder { color: var(--k-gray-400); }
.k-hdr2-search button {
  border: none; background: var(--k-warning); color: #3d2c00; font-weight: 800; font-size: 12.5px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: filter .15s ease; flex-shrink: 0;
}
.k-hdr2-search button:hover { filter: brightness(1.06); }

.k-hdr2-btn-outline { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.k-hdr2-btn-outline:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; transform: translateY(-1px); }
.k-hdr2-btn-gold { background: var(--k-warning); border: 1.5px solid var(--k-warning); color: #3d2c00; font-weight: 800; }
.k-hdr2-btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }

.k-hdr2 .k-topheader-account, .k-hdr2 .k-topheader-account i { color: #fff; }
.k-hdr2 .k-topheader-name { color: #fff; }
.k-hdr2 .k-topheader-account:hover { background: rgba(255,255,255,.1); }

/* Nav bar (Header 2): keeps the same colorful rotating icon-chip palette as
   Header 1 (asked for repeatedly — "icons but colorful") rather than a flat
   monochrome badge, with the gold accent reserved for the active-page state
   and the megamenu's top border, so it still reads as one coordinated
   premium system rather than two competing looks. */
.k-hdr2 .k-menu > li > a.active { color: var(--k-warning); }
.k-hdr2 .has-megamenu .k-megamenu-panel { border-top-color: var(--k-warning); }

@media (max-width: 900px) {
  .k-hdr2-infobar-inner { flex-wrap: wrap; }
  .k-hdr2-search { order: 3; width: 100%; max-width: none; }
}
@media (max-width: 900px) {
  /* Mobile: nav becomes the fixed bottom tab bar (shared Header 1/2 rule) —
     a filled chip is too heavy for that compact, icon-above-label touch
     context, so drop back to a plain colored glyph there (matches Header
     1's own mobile rule just above). */
  .k-hdr2 .k-menu > li > a i { background: none !important; }
}

/* ==================================================================
   FOOTER 2 — "Premium Enterprise" template (Admin → Footer Settings →
   Footer Template). Same k-footer-grid layout/content as Footer 1,
   restyled with gold (var(--k-warning)) accents to match Header 2, and
   a distinctly separated bottom bar rendered as its own element after
   </footer> rather than a bordered subsection of it (background color
   is injected dynamically in footer-v2.php using the same
   $footer_dark the footer's own default gradient already ends on).
   ================================================================== */
.k-ftr2-h5 {
  padding-bottom: 10px; border-bottom: 2px solid rgba(240,180,41,.35); display: inline-block;
}
.k-ftr2-list li a { display: flex; align-items: center; gap: 9px; }
.k-ftr2-list li a i { color: var(--k-warning); font-size: 12px; width: 14px; flex-shrink: 0; text-align: center; }
.k-ftr2-social-icon:hover { background: var(--k-warning) !important; color: #3d2c00; }
.k-ftr2-newsletter-form button { color: #3d2c00 !important; background: var(--k-warning) !important; }
.k-ftr2-newsletter-form button:hover { filter: brightness(1.06); }

.k-ftr2-bottom { border-top: 1px solid rgba(240,180,41,.4); }
.k-ftr2-bottom-split { padding: 15px 24px; font-size: 11.5px; color: rgba(255,255,255,.85); }
/* Round 200: copyright-bar icon + the Secure Payments icon row (now on a
   green bar, see footer-v2.php's own <style> block for the background).
   Round 201 ("make width and height normal, remove extra gaps... single
   line"): tightened gaps/sizes and dropped the one visually-redundant icon
   (a plain credit-card glyph sitting right next to the Visa/Mastercard
   marks it already duplicates) so the whole bar has a real shot at fitting
   one line instead of forcing a horizontal scroll on most screens. */
.k-ftr2-secure-payments { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.k-ftr2-pay-icons { display: inline-flex; align-items: center; gap: 6px; }
.k-ftr2-pay-icons i { font-size: 14px; color: rgba(255,255,255,.9); }
.k-ftr2-pay-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .02em; color: #065f46; background: #fff;
  padding: 2px 6px; border-radius: 5px; line-height: 1.5; white-space: nowrap;
}

/* ==================================================================
   HOMEPAGE 3 — "Premium Enterprise" template (Admin → Homepage Builder
   → Homepage Template). Full-width editable banner slider + an
   auto-scrolling News/Updates marquee, on top of the same proven
   sections as Homepage 1/2 (Popular Courses, How It Works, Testimonials,
   Quick Panels, Feature Strip). See frontend/includes/homepage-v3.php.

   Color system: --k-hp3-primary/-light/-dark are set inline per-request
   by homepage-v3.php from whichever header is currently active (Header 1's
   teal menu color, or Header 2's navy) — "primary color = header color".
   The five k-hp3-badge-*/k-hp3-icon-* accents (grey/red/green/yellow/gold)
   are a fixed secondary palette used only for rotation/decoration, never
   tied to meaning.

   NOTE: the page wrapper is named "k-hp3-page", NOT "k-home3" — a class
   called "k-home3" already exists above (Homepage 1 Classic's own wrapper,
   see homepage-v1.php) with its own `padding: 32px 0 0` and identical
   `> .k-container > * + *` rhythm rule. Reusing that name here silently
   inherited Homepage 1's top padding (the "gap between menu and banner"
   bug) and would have kept leaking any future k-home3-scoped CSS into this
   unrelated template. Never reuse "k-home3" for anything Homepage-3-related.
   ================================================================== */
.k-hp3-page > .k-container > * + * { margin-top: 56px; }

/* ---- Full-width banner slider ---- */
.k-hp3-banner {
  position: relative; width: 100%; height: 560px; overflow: hidden; background: #0b1220;
}
.k-hp3-banner-track { position: relative; width: 100%; height: 100%; }
.k-hp3-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity 1s ease; display: flex; align-items: center;
}
.k-hp3-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.k-hp3-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,14,26,.92) 0%, rgba(6,14,26,.72) 42%, rgba(6,14,26,.32) 100%);
}
.k-hp3-slide-content { position: relative; z-index: 2; max-width: 620px; padding: 40px 24px; color: #fff; }
.k-hp3-slide-content h1 { font-size: 42px; line-height: 1.16; font-weight: 800; margin: 14px 0 16px; letter-spacing: -.01em; }
.k-hp3-slide-content p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.88); margin: 0 0 26px; max-width: 520px; }
.k-hp3-banner-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; display: flex;
  align-items: center; justify-content: center; cursor: pointer; z-index: 3; backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.k-hp3-banner-arrow:hover { background: rgba(255,255,255,.28); }
.k-hp3-banner-arrow.prev { left: 20px; }
.k-hp3-banner-arrow.next { right: 20px; }
.k-hp3-banner-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 9px; }
.k-hp3-banner-dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer;
  padding: 0; transition: background .2s ease, transform .2s ease;
}
.k-hp3-banner-dot.is-active { background: var(--k-warning); transform: scale(1.25); }
@media (max-width: 900px) {
  .k-hp3-banner { height: 440px; }
  .k-hp3-slide-content h1 { font-size: 30px; }
  .k-hp3-banner-arrow { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
  .k-hp3-banner { height: 380px; }
  .k-hp3-slide-content { padding: 28px 20px; }
  .k-hp3-slide-content h1 { font-size: 24px; margin: 10px 0 10px; }
  .k-hp3-slide-content p { font-size: 13.5px; margin-bottom: 18px; }
  .k-hp3-banner-arrow { display: none; }
}

/* ---- News/Updates marquee — full-bleed band (edge to edge like the
   banner above it), auto-scrolls, pauses on hover. The outer wrap carries
   the full-width background; .k-container inside just centers/pads the
   label + track the same way every other full-bleed band on the site
   (topbar/infobar/nav/footer) keeps its content off the screen edges. ---- */
.k-hp3-newsbar-wrap {
  background: #fff; border-top: 1px solid var(--k-gray-100); border-bottom: 1px solid var(--k-gray-100);
  box-shadow: var(--k-shadow); margin: 0 0 56px;
}
.k-hp3-newsbar { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.k-hp3-newsbar-label {
  flex-shrink: 0; background: linear-gradient(135deg, var(--k-hp3-primary), var(--k-hp3-primary-dark)); color: #fff;
  font-size: 12.5px; font-weight: 800; padding: 8px 16px; border-radius: 999px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.k-hp3-marquee { flex: 1; overflow: hidden; position: relative; cursor: default; }
.k-hp3-marquee-track { display: flex; gap: 40px; width: max-content; animation: kHp3Marquee 28s linear infinite; }
.k-hp3-marquee-item { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--k-ink); white-space: nowrap; }
.k-hp3-marquee-item:hover { color: var(--k-hp3-primary); }
@keyframes kHp3Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .k-hp3-marquee-track { animation: none; } }
@media (max-width: 640px) {
  .k-hp3-newsbar { flex-direction: column; gap: 0; }
  .k-hp3-newsbar-label { margin: 0; padding: 8px 0; }
  .k-hp3-marquee { padding: 10px 0; }
}

/* ---- Secondary accent palette: grey / red / green / yellow / gold ---- */
.k-hp3-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; flex-shrink: 0; }
.k-hp3-badge-grey   { background: rgba(100,116,139,.14); color: #475569; }
.k-hp3-badge-red    { background: rgba(220,38,38,.13);   color: #dc2626; }
.k-hp3-badge-green  { background: rgba(22,163,74,.13);   color: #15803d; }
.k-hp3-badge-yellow { background: rgba(234,179,8,.15);   color: #a16207; }
.k-hp3-badge-gold   { background: rgba(245,158,11,.15);  color: #b45309; }

.k-hp3-icon-grey   { background: linear-gradient(135deg,#64748b,#475569) !important; }
.k-hp3-icon-red    { background: linear-gradient(135deg,#ef4444,#b91c1c) !important; }
.k-hp3-icon-green  { background: linear-gradient(135deg,#22c55e,#15803d) !important; }
.k-hp3-icon-yellow { background: linear-gradient(135deg,#eab308,#a16207) !important; }
.k-hp3-icon-gold   { background: linear-gradient(135deg,#f59e0b,#b45309) !important; }

/* ---- Buttons matched to the dynamic primary / gold accent ---- */
.k-hp3-btn-primary { background: linear-gradient(135deg, var(--k-hp3-primary), var(--k-hp3-primary-dark)); color: #fff; box-shadow: 0 8px 20px rgba(16,36,43,.22), inset 0 1px 0 rgba(255,255,255,.15); }
.k-hp3-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.k-hp3-btn-gold { background: linear-gradient(135deg, var(--k-warning), #b45309); color: #3d2c00; box-shadow: 0 8px 20px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.k-hp3-btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ---- Section eyebrow follows the dynamic primary too ---- */
.k-hp3-eyebrow { color: var(--k-hp3-primary); }

/* ---- Trust / stat band ---- */
.k-hp3-statband { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow); overflow: hidden; }
.k-hp3-statband-item { text-align: center; padding: 26px 14px; border-right: 1px solid var(--k-gray-100); transition: background .2s ease; }
.k-hp3-statband-item:last-child { border-right: none; }
.k-hp3-statband-item:hover { background: var(--k-gray-50); }
.k-hp3-statband-item strong { display: block; font-size: 24px; font-weight: 800; color: var(--k-hp3-primary); line-height: 1.2; margin-bottom: 6px; }
.k-hp3-statband-item span { font-size: 12px; color: var(--k-gray-500); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.k-hp3-statband-item span i { color: var(--k-hp3-primary); }
@media (max-width: 900px) { .k-hp3-statband { grid-template-columns: repeat(2, 1fr); } .k-hp3-statband-item:nth-child(2n) { border-right: none; } }
@media (max-width: 640px) { .k-hp3-statband { grid-template-columns: 1fr; } .k-hp3-statband-item { border-right: none !important; border-bottom: 1px solid var(--k-gray-100); } .k-hp3-statband-item:last-child { border-bottom: none; } }

/* ---- Category browse grid ---- */
.k-hp3-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.k-hp3-cat-card {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow);
  padding: 24px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.k-hp3-cat-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-hp3-cat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 4px; box-shadow: 0 8px 18px rgba(16,36,43,.14); }
.k-hp3-cat-card strong { font-size: 14px; font-weight: 800; color: var(--k-ink); line-height: 1.3; }
.k-hp3-cat-card span { font-size: 12px; color: var(--k-gray-500); font-weight: 600; }

/* ---- How It Works / Testimonials / Quick Panels / Feature Strip:
   reuse the shared k-how-*/k-testimonial-*/k-dash-card/k-feature-strip
   base rules, with only the primary-color accents overridden here. ---- */
.k-hp3-dash-card { border-top: 3px solid var(--k-hp3-primary); }
.k-hp3-avatar { background: linear-gradient(135deg, var(--k-hp3-primary), var(--k-hp3-primary-dark)); }
.k-hp3-feature-strip { background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow); padding: 22px 26px; }

/* ---- Premium color system, "in every aspect": the shared exam/series card
   component (.k-exam-card, reused site-wide from Homepage 1/2/Mock Tests) and
   a few generic site-wide accents (outline-button hover, carousel arrows,
   "View All" links) still draw from the site's global teal/rainbow palette by
   default. Scoped under .k-hp3-page only, so Homepage 1/2 and Mock Tests keep
   their existing look untouched, these retarget every such accent Homepage 3
   actually uses to the dynamic primary color or the fixed secondary palette. ---- */
.k-hp3-page .k-exam-card-tag { color: var(--k-hp3-primary); }
.k-hp3-page .k-exam-card:hover { box-shadow: 0 20px 45px rgba(10,20,35,.18); }
.k-hp3-page .k-exam-card-badge.k-badge-premium { background: linear-gradient(135deg, var(--k-warning), #b45309); }
.k-hp3-page .k-exam-card-badge.k-badge-free { background: linear-gradient(135deg, #22c55e, #15803d); }
.k-hp3-page .k-tile-badge-bestseller { background: linear-gradient(135deg, var(--k-warning), #b45309); }
.k-hp3-page .k-tile-badge-trending   { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.k-hp3-page .k-tile-badge-new        { background: linear-gradient(135deg, #22c55e, #15803d); }
.k-hp3-page .k-tile-badge-popular    { background: linear-gradient(135deg, #eab308, #a16207); }
.k-hp3-page .k-series-discount { background: #dc262617; color: #dc2626; }
.k-hp3-page .k-exam-card-price-free { color: #15803d; }
.k-hp3-page .k-btn-outline:hover { border-color: var(--k-hp3-primary); color: var(--k-hp3-primary); box-shadow: 0 6px 14px rgba(10,20,35,.14); }
.k-hp3-page .k-carousel-nav:hover { background: var(--k-hp3-primary); color: #fff; border-color: var(--k-hp3-primary); }
.k-hp3-page .view-all { color: var(--k-hp3-primary); }
.k-hp3-page .k-rating-stars, .k-hp3-page .k-testimonial-stars, .k-hp3-page .k-hp3-hero-stars { color: var(--k-warning); }

/* Round 201: the red visitor badge (.k-visitor-count above) applies as-is
   here too — a red pill reads clearly against this bar's green background,
   so no gold-text override on this template anymore. */
.k-ftr2-visitor-count { box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 10px -4px rgba(185,28,28,.55); }

/* ============================================================
   EXAM SERIES HUB — premium enterprise/e-learning redesign
   (frontend/mock-tests.php). Same technique as .k-hp3-page above:
   the shared .k-exam-card component (reused by Homepage 1/2) is
   only retargeted here, scoped under .k-examhub-page, so Homepage
   1/2 keep their existing colorful look untouched.
   ============================================================ */

/* Rotating premium gradient per card, driven by --card-a/--card-b custom
   properties so the image header, badge accents and both CTA buttons on a
   given card always match. */
.k-examhub-page .k-grid > .k-exam-card:nth-child(6n+1) { --card-a: #0d9488; --card-b: #115e59; }
.k-examhub-page .k-grid > .k-exam-card:nth-child(6n+2) { --card-a: #7c3aed; --card-b: #4c1d95; }
.k-examhub-page .k-grid > .k-exam-card:nth-child(6n+3) { --card-a: #d97706; --card-b: #7c2d12; }
.k-examhub-page .k-grid > .k-exam-card:nth-child(6n+4) { --card-a: #2563eb; --card-b: #1e3a8a; }
.k-examhub-page .k-grid > .k-exam-card:nth-child(6n+5) { --card-a: #db2777; --card-b: #831843; }
.k-examhub-page .k-grid > .k-exam-card:nth-child(6n+6) { --card-a: #4f46e5; --card-b: #312e81; }

.k-examhub-page .k-exam-card { border-radius: 18px; border-color: var(--k-gray-100); }
.k-examhub-page .k-exam-card:hover { transform: translateY(-6px); box-shadow: 0 26px 55px -22px rgba(10,20,40,.28); }
.k-examhub-page .k-exam-card-image {
  height: 172px; background: linear-gradient(140deg, var(--card-a, var(--k-primary)) 0%, var(--card-b, var(--k-secondary)) 100%);
  color: rgba(255,255,255,.92); font-size: 48px;
}
.k-examhub-page .k-exam-card-image::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 16px 16px; opacity: .5;
}
.k-examhub-page .k-exam-card-image i { position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
.k-examhub-page .k-exam-card-badge { z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.k-examhub-page .k-exam-card-category { color: var(--card-a, var(--k-primary)); }
.k-examhub-page .k-exam-card h3 { font-size: 16px; }
.k-examhub-page .k-tile-badge-bestseller { background: linear-gradient(135deg, var(--k-warning), #b45309); }
.k-examhub-page .k-tile-badge-trending   { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.k-examhub-page .k-tile-badge-new        { background: linear-gradient(135deg, #22c55e, #15803d); }
.k-examhub-page .k-tile-badge-popular    { background: linear-gradient(135deg, #eab308, #a16207); }
.k-examhub-page .k-exam-card-badge.k-badge-premium { background: linear-gradient(135deg, var(--k-warning), #b45309); }
.k-examhub-page .k-exam-card-badge.k-badge-free { background: linear-gradient(135deg, #22c55e, #15803d); }
.k-examhub-page .k-exam-card-price-free { color: #15803d; }
.k-examhub-page .k-series-discount { background: #dc262617; color: #dc2626; }
.k-examhub-page .k-exam-card .k-btn-outline { border-color: var(--card-a, var(--k-primary)); color: var(--card-a, var(--k-primary)); }
.k-examhub-page .k-exam-card .k-btn-outline:hover { background: var(--card-a, var(--k-primary)); color: #fff; }
.k-examhub-page .k-exam-card .k-btn-primary {
  background: linear-gradient(135deg, var(--card-a, var(--k-primary)), var(--card-b, var(--k-secondary))); border-color: transparent;
  box-shadow: 0 10px 22px -8px var(--card-a, var(--k-primary));
}
/* Buy/Enroll + Try Free Test side-by-side, premium-catalogue style — only here */
.k-examhub-page .k-exam-card-cta-row { display: flex; gap: 10px; margin-top: 14px; }
.k-examhub-page .k-exam-card-cta-row .k-btn { margin-top: 0 !important; }

/* Series-detail ("Exam Single") hero — same serif headline language as the hub banner */
.k-examhub-page .k-single-hero h1 { font-family: var(--k-font-serif); }
.k-examhub-page .k-examhub-featurestrip { border-top-color: var(--k-gray-100); }

/* ==========================================================================
   PREMIUM PAGE HERO (2026.2.0, Header 2 default) — shared kicker/headline/
   description/icon-bullets/illustration hero used at the top of About Us,
   Practice Tests, Contact, Courses and Resources (each nav item now has a
   mega menu on Header 2 — this is the matching page-content treatment).
   Deliberately scoped under .k-pagehero only, so it never touches the
   existing .k-page-banner (still used by every OTHER inner page) or any
   other shared class. Exams (mock-tests.php) keeps its own already-shipped
   dark-navy hub hero from preview34-36 — not touched here.
   ========================================================================== */
/* Premium banner background — a soft two-tone wash built from the site's own
   header/brand color (var(--k-primary), which Admin → Branding & Colors
   overrides) layered over a neutral grey, plus a faint enterprise-style grid
   texture that fades out toward the bottom. Colors alone, no images, so it
   always matches whatever brand color is set — never hardcoded. */
.k-pagehero {
  position: relative;
  background:
    radial-gradient(1000px circle at 4% -20%, color-mix(in srgb, var(--k-primary) 20%, transparent) 0%, transparent 62%),
    radial-gradient(650px circle at 100% 115%, color-mix(in srgb, var(--k-primary) 10%, transparent) 0%, transparent 58%),
    linear-gradient(155deg, var(--k-gray-50) 0%, var(--k-gray-100) 55%, var(--k-gray-50) 100%);
  padding: 52px 0 60px;
  overflow: hidden;
  border-bottom: 1px solid var(--k-gray-100);
}
.k-pagehero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--k-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--k-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 78%);
  pointer-events: none;
}
.k-pagehero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: center; }
.k-pagehero-kicker {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-primary-dark, var(--k-primary)); margin: 0 0 16px; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--k-primary) 12%, #fff); border: 1px solid color-mix(in srgb, var(--k-primary) 22%, transparent);
}
.k-pagehero-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--k-primary); flex-shrink: 0; }
.k-pagehero-title { font-size: 40px; line-height: 1.16; font-weight: 800; color: var(--k-ink); margin: 0 0 16px; letter-spacing: -.01em; }
.k-pagehero-title .accent { color: var(--k-accent); }
.k-pagehero-desc { font-size: 15.5px; line-height: 1.7; color: var(--k-gray-600); max-width: 520px; margin: 0 0 30px; }
.k-pagehero-bullets { display: flex; gap: 26px; flex-wrap: wrap; }
.k-pagehero-bullet { display: flex; align-items: center; gap: 12px; }
.k-pagehero-bullet .ico {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.k-pagehero-bullet strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--k-ink); }
.k-pagehero-bullet span { font-size: 12px; color: var(--k-gray-500); }
.k-pagehero-art { position: relative; }
.k-pagehero-art svg { width: 100%; height: auto; display: block; }
.k-pagehero-tag {
  position: absolute; top: -4px; right: 0; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 700;
  color: var(--k-accent); line-height: 1.3; transform: rotate(-4deg); text-align: right; max-width: 150px;
}
/* Cursive tag + small plain-text caption underneath it — About page only
   (matches the reference About mockup). Both sit in a single absolutely-
   positioned block so the plain-text line always flows directly under the
   cursive tag regardless of how many words the cursive tag wraps to, instead
   of two independently-guessed absolute offsets colliding. */
.k-pagehero-tagblock { position: absolute; top: -4px; right: 0; text-align: right; max-width: 160px; }
.k-pagehero-tagblock .k-pagehero-tag { position: static; max-width: none; }
.k-pagehero-tag-sub {
  margin-top: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--k-ink); line-height: 1.4;
}
@media (max-width: 960px) {
  .k-pagehero-grid { grid-template-columns: 1fr; text-align: center; }
  .k-pagehero-desc { margin-left: auto; margin-right: auto; }
  .k-pagehero-bullets { justify-content: center; }
  .k-pagehero-art { order: -1; max-width: 320px; margin: 0 auto; }
  .k-pagehero-tag { display: none; }
  .k-pagehero-tagblock { display: none; }
}
@media (max-width: 560px) { .k-pagehero-title { font-size: 30px; } }

/* Home page — optional "illustration-style" hero (Admin → Hero Banner →
   Hero Style). Reuses .k-pagehero-grid/-title/-desc/-art/-tag (above) but
   stays inside the homepage's own rounded-card hero wrapper (.k-hero3) so it
   keeps this page's boxed-card rhythm instead of going full-bleed like the
   other 6 pages' pageheroes. */
.k-hero-illus.k-hero3 {
  background:
    radial-gradient(900px circle at 4% -20%, color-mix(in srgb, var(--k-primary) 20%, transparent) 0%, transparent 62%),
    radial-gradient(550px circle at 100% 115%, color-mix(in srgb, var(--k-primary) 10%, transparent) 0%, transparent 58%),
    linear-gradient(155deg, var(--k-gray-50) 0%, var(--k-gray-100) 55%, var(--k-gray-50) 100%);
}
.k-home-hero-kicker { display: block; font-size: 14px; font-weight: 600; color: var(--k-gray-500); margin: 0 0 14px; }
.k-home-hero-kicker .dot { color: var(--k-gray-300); font-style: normal; margin: 0 6px; }

/* Bullet icon color variants (rotating, same pastel-chip palette used
   throughout the site's colorful default pages). */
.k-pbi-red    { background: #fee2e2; color: #dc2626; }
.k-pbi-green  { background: #dcfce7; color: #16a34a; }
.k-pbi-amber  { background: #fef3c7; color: #d97706; }
.k-pbi-blue   { background: #dbeafe; color: #2563eb; }
.k-pbi-purple { background: #ede9fe; color: #7c3aed; }
.k-pbi-teal   { background: #ccfbf1; color: #0d9488; }
.k-pbi-rose   { background: #fce7f3; color: #db2777; }

/* ---------- Feature card grid (Home quick-nav row + each hero page's own
   "Explore ___" card grid) — pastel icon chip + colored arrow button. ---- */
.k-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.k-feature-card {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); padding: 26px 22px;
  box-shadow: var(--k-shadow); transition: transform .15s ease, box-shadow .15s ease; display: block;
}
.k-feature-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-feature-card .icon {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px; background: var(--fc-bg); color: var(--fc-fg);
}
.k-feature-card h3 { font-size: 16px; font-weight: 800; color: var(--k-ink); margin: 0 0 8px; }
.k-feature-card p { font-size: 12.5px; line-height: 1.6; color: var(--k-gray-500); margin: 0 0 18px; min-height: 38px; }
.k-feature-card .go {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: 13px; text-decoration: none; background: var(--fc-bg); color: var(--fc-fg); transition: filter .15s ease;
}
.k-feature-card .go:hover { filter: brightness(.92); }
.k-fc-blue   { --fc-bg: #dbeafe; --fc-fg: #2563eb; }
.k-fc-red    { --fc-bg: #fee2e2; --fc-fg: #dc2626; }
.k-fc-green  { --fc-bg: #dcfce7; --fc-fg: #16a34a; }
.k-fc-amber  { --fc-bg: #fef3c7; --fc-fg: #d97706; }
.k-fc-purple { --fc-bg: #ede9fe; --fc-fg: #7c3aed; }
.k-fc-teal   { --fc-bg: #ccfbf1; --fc-fg: #0d9488; }
.k-fc-rose   { --fc-bg: #fce7f3; --fc-fg: #db2777; }

.k-explore-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 14px; }
.k-explore-head h2 { margin: 0 0 6px; }
.k-explore-head p { margin: 0; font-size: 13px; color: var(--k-gray-500); }
.k-explore-head .view-all { font-size: 13px; font-weight: 700; color: var(--k-accent); white-space: nowrap; }

.k-explore-cta {
  background: var(--k-teal-50); border-radius: var(--k-radius); padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px;
}
.k-explore-cta .txt { display: flex; align-items: center; gap: 16px; }
.k-explore-cta .txt .ico {
  width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--k-accent); box-shadow: var(--k-shadow); flex-shrink: 0;
}
.k-explore-cta h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--k-ink); }
.k-explore-cta p { margin: 0; font-size: 12.5px; color: var(--k-gray-500); }

/* Contact page's two-column form + "How Can We Help?" layout */
.k-contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .k-contact-grid { grid-template-columns: 1fr; } }

/* ---------- Rich-text content (Admin → Website Pages / News & Updates —
   premium TinyMCE editor output) ----------
   Base typography/spacing for admin-authored HTML so headings, lists,
   tables, blockquotes and the editor's "accordion" (<details>/<summary>)
   blocks all read correctly wherever this content is echoed unescaped
   (frontend/page.php, frontend/news-detail.php). */
.k-richtext h1, .k-richtext h2, .k-richtext h3, .k-richtext h4 { color: var(--k-ink); font-weight: 800; line-height: 1.3; margin: 26px 0 12px; }
.k-richtext h1 { font-size: 26px; } .k-richtext h2 { font-size: 22px; } .k-richtext h3 { font-size: 18px; } .k-richtext h4 { font-size: 15.5px; }
.k-richtext p { margin: 0 0 16px; }
.k-richtext ul, .k-richtext ol { margin: 0 0 16px; padding-left: 22px; }
.k-richtext li { margin-bottom: 6px; }
.k-richtext a { color: var(--k-primary); font-weight: 600; text-decoration: underline; }
.k-richtext img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.k-richtext blockquote {
  margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--k-primary);
  background: var(--k-teal-50); border-radius: 0 10px 10px 0; font-style: italic; color: var(--k-gray-700);
}
.k-richtext table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.k-richtext table th, .k-richtext table td { border: 1px solid var(--k-gray-200); padding: 8px 12px; text-align: left; }
.k-richtext table th { background: var(--k-gray-50); font-weight: 700; }
.k-richtext details {
  margin: 0 0 12px; border: 1px solid var(--k-gray-200); border-radius: 10px; padding: 4px 14px; background: var(--k-gray-50);
}
.k-richtext details summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--k-ink); }
.k-richtext details[open] summary { border-bottom: 1px solid var(--k-gray-200); margin-bottom: 8px; }
.k-richtext hr { border: none; border-top: 1px solid var(--k-gray-200); margin: 22px 0; }

/* ---------------------------------------------------------------------
   Website Options → Advanced → Integrations / Website Preferences.
   WhatsApp float button, Cookie Consent banner — both off unless the
   admin has actually turned them on (kesp_whatsapp_number() /
   kesp_cookie_consent_enabled() in frontend/includes/footer.php).
   --------------------------------------------------------------------- */
.k-whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 940;
  width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  box-shadow: 0 10px 24px -6px rgba(37,211,102,.55); transition: transform .18s ease, box-shadow .18s ease;
}
.k-whatsapp-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px -6px rgba(37,211,102,.65); color: #fff; }
@media (max-width: 640px) { .k-whatsapp-float { right: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 22px; } }

.k-cookie-consent {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 960; max-width: 560px; margin: 0 auto;
  background: var(--k-ink, #0b172b); color: #fff; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.5); display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.k-cookie-consent p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); flex: 1 1 260px; }
.k-cookie-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.k-cookie-consent .k-btn-outline { border-color: rgba(255,255,255,.35); color: #fff; }
.k-cookie-consent .k-btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Round 203 — Floating Social Widget: a premium vertically-centered rail
   hugging the right edge (Website Options → Social Links → "Floating Social
   Widget", on by default). Sits at top:50% rather than a bottom corner, so
   it doesn't collide with the WhatsApp float / Live Chat launcher above —
   z-index kept below those (940/950) and Cookie Consent (960) deliberately,
   so a corner overlay always wins if screen space ever gets tight. */
.k-social-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900;
  display: flex; align-items: center;
}
.k-social-rail-toggle {
  width: 26px; height: 46px; border: none; cursor: pointer;
  background: linear-gradient(160deg, #1e3a8a, #2563eb 55%, #3b82f6); color: #fff;
  border-radius: 10px 0 0 10px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; box-shadow: -4px 0 16px -6px rgba(30,58,138,.5);
  transition: background .15s ease;
}
.k-social-rail-toggle i { transition: transform .25s ease; }
.k-social-rail.is-collapsed .k-social-rail-toggle i { transform: rotate(180deg); }
.k-social-rail-toggle:hover { background: linear-gradient(160deg, #1e40af, #2563eb 55%, #60a5fa); }
.k-social-rail-icons {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(165deg, #1e3a8a 0%, #2563eb 55%, #60a5fa 100%);
  border-radius: 18px 0 0 18px; padding: 16px 10px; box-shadow: -6px 0 24px -8px rgba(30,58,138,.45);
  max-width: 54px; max-height: 320px; opacity: 1;
  transition: max-width .25s ease, max-height .25s ease, padding .25s ease, opacity .2s ease;
  overflow: hidden;
}
.k-social-rail.is-collapsed .k-social-rail-icons {
  max-width: 0; max-height: 0; padding: 0; opacity: 0; pointer-events: none;
}
.k-social-rail-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14.5px; flex-shrink: 0; box-shadow: 0 4px 10px -2px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.k-social-rail-icon:hover { transform: scale(1.12); box-shadow: 0 6px 14px -2px rgba(0,0,0,.4); color: #fff; }
@media (max-width: 640px) {
  .k-social-rail-icon { width: 30px; height: 30px; font-size: 13px; }
  .k-social-rail-icons { max-width: 46px; gap: 8px; padding: 12px 8px; }
  .k-social-rail-toggle { width: 22px; height: 40px; }
}


/* ============================================================
   HOMEPAGE 1 — "Premium" (default template). 4th rebuild: a soft
   purple/blue/pink "online university + exam prep + modern LMS" palette,
   deliberately its OWN fixed brand system (not derived from the header/
   menu color like earlier rounds) so the page reads as one cohesive,
   designed product. Full-bleed sections (Exam Series + Practice Tests,
   closing CTA) sit outside .k-container with their own edge-to-edge
   background, same technique used elsewhere on the site. Caveat (the
   hand-lettered accent font) is already loaded site-wide via
   kesp_google_fonts_url() — nothing new to request.
   ============================================================ */
.k-hp1-page {
  /* preview163 ("Homepage Premium - By KI&S"): palette swapped from the old
     soft purple/blue/pink LMS look to the brief's enterprise navy / royal
     blue + electric blue + gold spec. Variable NAMES were deliberately kept
     (purple/blue/pink) rather than renamed, since ~20 rules below already
     reference them — only the VALUES changed, so every one of those rules
     repaints automatically. Read purple as "navy", blue as "royal/electric
     blue" and pink as "gold" from here on. Two new tokens (--k-hp1-gold /
     -gold-dark) were added for sections that want gold explicitly rather
     than via the repurposed --k-hp1-pink. */
  --k-hp1-purple: #14306b;
  --k-hp1-purple-dark: #0a1c42;
  --k-hp1-blue: #2563eb;
  --k-hp1-pink: #f59e0b;
  --k-hp1-grad: linear-gradient(135deg, var(--k-hp1-purple), var(--k-hp1-blue));
  --k-hp1-primary: var(--k-hp1-purple);
  --k-hp1-primary-dark: var(--k-hp1-purple-dark);
  --k-hp1-gold: #f59e0b;
  --k-hp1-gold-dark: #b45309;
}
/* preview164: user feedback across 4 screenshots + a written note said the
   page's icon chips/cards "still not colorful" — every .k-fc-* icon chip on
   this page (hero stats, hero illustration, Explore by Category, About/Why
   Choose Us features, Study Material tiles, Stat Strip) was rendering in a
   soft PALE tint (the global .k-fc-* utility classes, defined earlier in
   this file and reused site-wide on other pages exactly as designed there).
   Rather than touching those global classes — which would repaint every
   OTHER page that reuses them (course cards, badges, admin, etc.) — the
   custom properties they set (--fc-bg/--fc-fg) are overridden here, scoped
   under .k-hp1-page only, to bold saturated colors with a white icon. Every
   element on this page that already reads var(--fc-bg)/var(--fc-fg) — some
   via a CSS rule, some via an inline style attribute pointing at the same
   two custom properties — repaints automatically; nothing outside this page
   is affected since the override never applies without the .k-hp1-page
   ancestor. */
.k-hp1-page .k-fc-blue   { --fc-bg: #2563eb; --fc-fg: #fff; }
.k-hp1-page .k-fc-red    { --fc-bg: #dc2626; --fc-fg: #fff; }
.k-hp1-page .k-fc-green  { --fc-bg: #16a34a; --fc-fg: #fff; }
.k-hp1-page .k-fc-amber  { --fc-bg: #d97706; --fc-fg: #fff; }
.k-hp1-page .k-fc-purple { --fc-bg: #7c3aed; --fc-fg: #fff; }
.k-hp1-page .k-fc-teal   { --fc-bg: #0d9488; --fc-fg: #fff; }
.k-hp1-page .k-fc-rose   { --fc-bg: #db2777; --fc-fg: #fff; }
.k-hp1-page .k-fc-navy   { --fc-bg: #14306b; --fc-fg: #fff; }
.k-hp1-page .ico, .k-hp1-page .k-hp1-hero-stats2 i, .k-hp1-page .k-hp1-statstrip .ico,
.k-hp1-page .k-hp1-about-features .ico, .k-hp1-page .k-hp1-study-tile .ico,
.k-hp1-page .k-hp1-quickstrip .ico, .k-hp1-page .k-hp1-hero-illus-checklist span {
  box-shadow: 0 8px 16px -6px var(--fc-bg);
}
/* preview165: "Practice Tests" section polish — kesp_render_practice_test_card()
   is a SHARED global component (also used verbatim on practice-tests.php
   itself), so it's deliberately left untouched; this scoped rule (only
   applies inside .k-hp1-page) gives each card here a colored top edge
   matching its OWN icon color (the card's own local $palette, in the exact
   order it already rotates: green/rose/purple/blue) plus a hover lift —
   zero risk to practice-tests.php's copy of the same card. */
.k-hp1-page #practice-showcase .k-practice-card { border-top: 5px solid transparent; transition: transform .18s ease, box-shadow .18s ease; }
.k-hp1-page #practice-showcase .k-grid-4 > .k-practice-card:nth-child(4n+1) { border-top-color: #16a34a; }
.k-hp1-page #practice-showcase .k-grid-4 > .k-practice-card:nth-child(4n+2) { border-top-color: #db2777; }
.k-hp1-page #practice-showcase .k-grid-4 > .k-practice-card:nth-child(4n+3) { border-top-color: #7c3aed; }
.k-hp1-page #practice-showcase .k-grid-4 > .k-practice-card:nth-child(4n+4) { border-top-color: #2563eb; }
.k-hp1-page #practice-showcase .k-practice-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-lg); }

.k-hp1-page > .k-container > * + * { margin-top: 40px; }
/* Vertical rhythm BETWEEN top-level homepage sections — the rule above
   only spaces siblings living inside a single block's own .k-container, so
   with each section wrapping its own separate container, adjacent
   sections used to butt together with zero space (relying only on their
   own internal padding, which most plain-white sections don't have) —
   e.g. a "How It Works" card's bottom edge sitting a few px above "Why
   Choose Us?"'s eyebrow label. This gives every top-level section
   consistent breathing room from its neighbor, in whatever order/visibility
   Admin → Homepage Builder has them in. */
.k-hp1-page > * + * { margin-top: 46px; }
/* preview163: Explore by Category (was "Quick Feature Strip") used to be a
   deliberate exception here — its floating card overlapped UP into the
   hero band via a negative margin, so it had to stay flush against
   whatever preceded it. It's now an 8-tile section positioned AFTER
   Popular Exams (doc SECTION 3, no longer adjacent to the hero), so that
   overlap trick and its exception were removed — it gets the same normal
   top spacing as every other section now. */

.k-hp1-btn-grad {
  background: var(--k-hp1-grad); color: #fff; font-weight: 700; border: none; text-decoration: none;
  padding: 14px 26px; border-radius: 999px; box-shadow: 0 14px 30px rgba(20,48,107,.3);
  transition: transform .18s ease, box-shadow .18s ease; display: inline-flex; align-items: center; gap: 8px;
}
.k-hp1-btn-grad:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(20,48,107,.38); color: #fff; }
.k-hp1-btn-outline2 {
  background: #fff; color: var(--k-hp1-purple-dark); font-weight: 700; border: 1.5px solid var(--k-hp1-purple);
  padding: 13px 26px; border-radius: 999px; text-decoration: none; transition: background .18s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.k-hp1-btn-outline2:hover { background: #f5f3ff; color: var(--k-hp1-purple-dark); }

/* ---------- Hero ---------- */
.k-hp1-hero-band {
  /* preview163: "Light background: white + very light grey" per the brief
     — the old lavender-tinted gradient is gone; colour now comes only from
     the blobs below and the gold/navy accents in the content itself. */
  position: relative; width: 100%; padding: 52px 0 36px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
}
.k-hp1-hero-blob-a, .k-hp1-hero-blob-b, .k-hp1-hero-blob-c {
  position: absolute; border-radius: 50%; opacity: .6; z-index: 0; pointer-events: none;
}
.k-hp1-hero-blob-a { width: 340px; height: 340px; top: -130px; left: -110px; background: radial-gradient(circle, #c7d2fe, transparent 70%); }
.k-hp1-hero-blob-b { width: 260px; height: 260px; bottom: -90px; right: 6%; background: radial-gradient(circle, #fde68a, transparent 70%); }
.k-hp1-hero-blob-c { width: 200px; height: 200px; top: 32%; right: -70px; background: radial-gradient(circle, #bfdbfe, transparent 70%); }

.k-hp1-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.k-hp1-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--k-hp1-purple-dark); margin-bottom: 14px;
}
.k-hp1-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--k-hp1-pink); border-radius: 2px; }
.k-hp1-hero-text h1 { font-size: 42px; line-height: 1.18; font-weight: 800; margin: 0 0 16px; letter-spacing: -.01em; color: var(--k-ink); }
.k-hp1-hero-text h1 .accent { background: var(--k-hp1-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-hp1-hero-text > p { font-size: 15px; line-height: 1.75; color: var(--k-gray-600); margin: 0 0 28px; max-width: 480px; }
.k-hp1-hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.k-hp1-hero-stats2 { display: flex; flex-wrap: wrap; gap: 26px 32px; }
.k-hp1-hero-stats2 > div { display: flex; align-items: center; gap: 10px; }
.k-hp1-hero-stats2 i {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; background: var(--fc-bg); color: var(--fc-fg);
}
.k-hp1-hero-stats2 strong { display: block; font-size: 18px; font-weight: 800; color: var(--k-ink); line-height: 1.2; }
.k-hp1-hero-stats2 span { font-size: 11px; color: var(--k-gray-500); font-weight: 600; }

.k-hp1-hero-visual { position: relative; z-index: 1; }
.k-hp1-hero-photo-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.k-hp1-hero-photo { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--k-shadow-xl); aspect-ratio: 4 / 4.3; }
.k-hp1-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* preview166: floating "Start Your Preparation" card over a real hero
   photo — same real content as the no-photo .k-hp1-hero-illus-card below,
   restyled compact so it can overlap the photo like the reference mockup
   instead of disappearing once a photo is uploaded. */
.k-hp1-hero-float-card {
  position: absolute; right: -18px; bottom: -30px; width: 206px; z-index: 2;
  background: #fff; border-radius: 18px; box-shadow: var(--k-shadow-xl); padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.k-hp1-hero-float-card-top { display: flex; align-items: center; gap: 10px; }
.k-hp1-hero-float-cap {
  width: 36px; height: 36px; border-radius: 50%; background: var(--k-hp1-grad); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 20px rgba(20,48,107,.3);
}
.k-hp1-hero-float-cap i { color: #fff; font-size: 14px; }
.k-hp1-hero-float-card-top h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--k-ink); line-height: 1.25; }
.k-hp1-hero-float-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.k-hp1-hero-float-checklist li { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--k-ink); }
.k-hp1-hero-float-checklist span {
  width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 8px; background: var(--fc-bg); color: var(--fc-fg); flex-shrink: 0;
}
.k-hp1-hero-float-cta { justify-content: center; width: 100%; padding: 10px 14px; font-size: 11.5px; }
.k-hp1-hero-float-learners {
  position: absolute; left: -14px; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 8px;
  background: #fff; color: var(--k-ink); padding: 10px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  box-shadow: var(--k-shadow-lg); white-space: nowrap;
}
.k-hp1-hero-float-learners i { color: var(--k-hp1-purple); }

/* Illustration fallback when no hero_image has been uploaded — a full,
   self-contained "Start Your Preparation" panel (graduation-cap medallion +
   success-rate ring + a real feature checklist + a working CTA), never a
   stock/placeholder photo. preview164: expanded from a sparse icon trio
   (flagged by the user as the hero "not full") into this richer panel so
   the visual column carries real weight matching its text-column sibling. */
.k-hp1-hero-illus {
  position: relative; border-radius: 26px; min-height: 420px; max-width: 420px; margin: 0 auto;
  background: linear-gradient(150deg, #e0e7ff 0%, #fef3c7 100%); box-shadow: var(--k-shadow-xl);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.k-hp1-hero-illus-card {
  width: 100%; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); border-radius: 20px;
  padding: 26px 24px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; backdrop-filter: blur(2px);
}
.k-hp1-hero-illus-top { display: flex; align-items: center; justify-content: space-between; }
.k-hp1-hero-illus-cap { width: 58px; height: 58px; border-radius: 50%; background: var(--k-hp1-grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 26px rgba(20,48,107,.35); flex-shrink: 0; }
.k-hp1-hero-illus-cap i { font-size: 23px; color: #fff; }
.k-hp1-hero-illus-ring { position: relative; width: 86px; height: 86px; flex-shrink: 0; }
.k-hp1-hero-illus-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.k-hp1-hero-illus-ring-label strong { font-size: 15px; font-weight: 800; color: var(--k-hp1-purple-dark); line-height: 1.1; }
.k-hp1-hero-illus-ring-label span { font-size: 8px; color: var(--k-gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }
.k-hp1-hero-illus-title { font-size: 17px; font-weight: 800; color: var(--k-ink); margin: 4px 0 0; }
.k-hp1-hero-illus-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.k-hp1-hero-illus-checklist li { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 700; color: var(--k-ink); }
.k-hp1-hero-illus-checklist span {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: var(--fc-bg); color: var(--fc-fg); flex-shrink: 0;
}
.k-hp1-hero-illus-cta { justify-content: center; width: 100%; margin-top: 4px; padding: 13px 20px; }
.k-hp1-hero-illus-learners {
  display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; font-weight: 700;
  color: var(--k-gray-500); text-align: center; padding-top: 12px; border-top: 1px dashed var(--k-gray-200);
}
.k-hp1-hero-illus-learners i { color: var(--k-hp1-purple); }
@media (max-width: 420px) { .k-hp1-hero-illus { min-height: 0; } }
/* preview163: hero search bar (doc SECTION Hero — "Search Exams/Courses/
   Tests"). A real, working form, not decoration: the type <select> swaps
   the form's own action between exams.php/courses.php/practice-tests.php
   (both already support a real ?q= search — see kesp_e($search) handling
   in each), so submitting always lands on a genuine filtered results page. */
.k-hp1-hero-search {
  display: flex; align-items: center; gap: 0; background: #fff; border-radius: 999px;
  box-shadow: var(--k-shadow-lg); border: 1px solid var(--k-gray-100); padding: 6px 6px 6px 20px;
  margin-bottom: 22px; max-width: 480px;
}
.k-hp1-hero-search i.fa-magnifying-glass { color: var(--k-gray-400); font-size: 13px; flex-shrink: 0; }
.k-hp1-hero-search select {
  border: none; background: transparent; font-size: 12.5px; font-weight: 700; color: var(--k-hp1-purple-dark);
  padding: 8px 6px; border-right: 1px solid var(--k-gray-100); margin-left: 10px; flex-shrink: 0; cursor: pointer;
}
.k-hp1-hero-search input {
  flex: 1; border: none; background: transparent; padding: 8px 10px; font-size: 13px; color: var(--k-ink); min-width: 0;
}
.k-hp1-hero-search input:focus, .k-hp1-hero-search select:focus { outline: none; }
.k-hp1-hero-search button {
  background: var(--k-hp1-grad); color: #fff; border: none; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  padding: 10px 20px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
}
@media (max-width: 480px) { .k-hp1-hero-search select { display: none; } }

@media (max-width: 900px) {
  .k-hp1-hero-grid { grid-template-columns: 1fr; }
  .k-hp1-hero-visual { order: -1; margin-bottom: 24px; }
  /* preview166: the floating card/pill stay on screen at narrower widths
     (real content, not decoration) but drop out of absolute overlap —
     which would otherwise clip or overflow — into normal static flow
     right below the photo. */
  .k-hp1-hero-photo-wrap { text-align: center; }
  .k-hp1-hero-float-card { position: static; width: auto; margin: 18px auto 0; max-width: 300px; text-align: left; }
  .k-hp1-hero-float-learners { position: static; margin: 12px 0 0; display: inline-flex; }
}
@media (max-width: 640px) { .k-hp1-hero-text h1 { font-size: 30px; } }

/* ---------- Explore by Category (was "Quick feature strip") ----------
   preview163: expanded from a 4-item strip that floated over the hero into
   an 8-tile premium grid, now a normal headed section (doc SECTION 3) —
   see the homepage-v1.php comment on this section and the removed
   "stay flush against the hero" CSS exception above for why. Class names
   were kept even though the layout changed, since nothing else needed
   renaming. */
.k-hp1-quickstrip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.k-hp1-quickstrip > a {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px;
  text-decoration: none; border-radius: 16px; background: #fff; border: 1px solid var(--k-gray-100);
  border-top: 4px solid var(--fc-bg); box-shadow: var(--k-shadow);
  transition: background .15s ease, transform .18s ease, box-shadow .18s ease;
}
.k-hp1-quickstrip > a:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-hp1-quickstrip .ico {
  width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0; background: var(--fc-bg); color: var(--fc-fg);
}
.k-hp1-quickstrip strong { display: block; font-size: 12.5px; font-weight: 800; color: var(--k-ink); }
.k-hp1-quickstrip span { font-size: 10.5px; color: var(--k-gray-500); font-weight: 600; }
@media (max-width: 900px) { .k-hp1-quickstrip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .k-hp1-quickstrip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Popular Exams (compact colorful icon tiles) ----------
   preview165: rebuilt from the round-163/164 horizontal-scroll photo cards
   into a compact pastel icon-tile grid — see the homepage-v1.php comment on
   $hp1FeaturedCats for why (a dedicated reference mockup, sent twice, shows
   this exact tile shape). */
.k-hp1-examtile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.k-hp1-examtile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; text-decoration: none;
  border: 1px solid rgba(15,23,42,.05); box-shadow: var(--k-shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.k-hp1-examtile:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-hp1-examtile .ico {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; background: var(--fc-bg); color: var(--fc-fg);
}
.k-hp1-examtile .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.k-hp1-examtile .txt strong { font-size: 13px; font-weight: 800; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-hp1-examtile .txt span { font-size: 10.5px; color: var(--k-gray-500); font-weight: 700; }
.k-hp1-examtile .arrow {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--k-gray-400); background: rgba(255,255,255,.7); transition: background .15s ease, color .15s ease;
}
.k-hp1-examtile:hover .arrow { background: var(--fc-bg); color: var(--fc-fg); }
@media (max-width: 900px) { .k-hp1-examtile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .k-hp1-examtile-grid { grid-template-columns: 1fr; } }

/* ---------- Reusable pastel tint background utilities ----------
   preview165: a light tinted-card background per accent name, kept SEPARATE
   from the bold .k-fc-* icon-chip override above (that one repaints icon
   chips solid+saturated; this one is for a whole CARD's soft background) —
   used by Popular Exams tiles, Study Material tiles and anywhere else on
   this page that wants a colorful card without a solid, hard-to-read fill.
   Covers every accent name used anywhere on this page (both the 8-color
   Popular Exams set and the 6-color Study Material set overlap here). */
.k-hp1-tint-navy     { background: #eef1f8; }
.k-hp1-tint-royal     { background: #eff6ff; }
.k-hp1-tint-blue     { background: #eff6ff; }
.k-hp1-tint-gold     { background: #fffbeb; }
.k-hp1-tint-amber     { background: #fffbeb; }
.k-hp1-tint-electric { background: #ecfeff; }
.k-hp1-tint-teal     { background: #f0fdfa; }
.k-hp1-tint-rose     { background: #fdf2f8; }
.k-hp1-tint-purple     { background: #f5f3ff; }
.k-hp1-tint-green     { background: #f0fdf4; }
.k-hp1-tint-red     { background: #fef2f2; }

/* A navy chip, to sit alongside the existing global k-fc-* utility classes
   (k-fc-blue/-amber/-purple/-rose/-teal etc., defined earlier in this file
   and used site-wide) — those already cover "electric blue" and "gold"
   fairly closely, so only the missing deep-navy tone needed adding, scoped
   here rather than to the global set since nothing outside this homepage
   asked for it. */
.k-fc-navy { --fc-bg: #e0e7ff; --fc-fg: #1e3a8a; }

/* ---- Latest News (doc SECTION 4) — ONE horizontal row, never a grid ---- */
.k-hp1-news-band {
  display: flex; align-items: center; gap: 26px; background: #fff; border-radius: 20px; box-shadow: var(--k-shadow-lg);
  border: 1px solid var(--k-gray-100); padding: 22px 26px;
}
.k-hp1-news-head { display: flex; align-items: center; gap: 14px; flex-shrink: 0; padding-right: 22px; border-right: 1px solid var(--k-gray-100); }
.k-hp1-news-head .ico {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--k-hp1-grad); color: #fff;
}
.k-hp1-news-head strong { display: block; font-size: 15px; font-weight: 800; color: var(--k-ink); }
.k-hp1-news-head span { font-size: 11px; color: var(--k-gray-500); font-weight: 600; }
.k-hp1-news-items { flex: 1; display: flex; gap: 22px; min-width: 0; }
.k-hp1-news-item { flex: 1; min-width: 0; text-decoration: none; display: flex; align-items: flex-start; gap: 12px; }
/* preview164: was a small flat text pill ("12 Jan"); the user's feedback
   ("news cards still not colorful") is addressed with a real colored date
   block (day number + month) using the news item's own category color —
   same source color the old pill used, just given real visual weight. */
.k-hp1-news-date {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 13px; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; box-shadow: 0 8px 16px -6px rgba(0,0,0,.3);
}
.k-hp1-news-date strong { font-size: 17px; font-weight: 800; line-height: 1; }
.k-hp1-news-date em { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-style: normal; margin-top: 2px; }
.k-hp1-news-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.k-hp1-news-body .tag {
  align-self: flex-start; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
}
.k-hp1-news-body .title { font-size: 12.5px; font-weight: 700; color: var(--k-ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-hp1-news-item .meta { font-size: 10.5px; color: var(--k-gray-500); font-weight: 600; display: flex; align-items: center; gap: 5px; }
/* Round 200: "View News button bg color Blue with icon" — a solid blue
   gradient pill (was a pale neutral outline) with a leading newspaper icon
   as well as the existing trailing arrow. */
.k-hp1-news-band .view-all-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  color: #fff; text-decoration: none; background: linear-gradient(135deg, #2563eb, #1d4ed8); border: 1px solid transparent;
  padding: 10px 20px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(29,78,216,.55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.k-hp1-news-band .view-all-btn i:first-child { font-size: 12.5px; }
.k-hp1-news-band .view-all-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(29,78,216,.6); }
@media (max-width: 900px) {
  .k-hp1-news-band { flex-wrap: wrap; }
  .k-hp1-news-head { border-right: none; padding-right: 0; width: 100%; justify-content: space-between; }
  .k-hp1-news-items { flex-basis: 100%; flex-direction: column; gap: 14px; }
}

/* ---- Live Classes (doc SECTION 7) ---- */
.k-hp1-live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k-hp1-live-card {
  background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--k-shadow); border: 1px solid var(--k-gray-100);
  border-top: 5px solid transparent; text-decoration: none; display: block; transition: transform .18s ease, box-shadow .18s ease;
}
.k-hp1-live-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-lg); }
/* preview165: a rotating colored top edge + fallback gradient (see
   homepage-v1.php's inline style using the same 8-color $hp1CatAccentHex
   map Popular Exams uses) — "same with live classes" (polish premium). */
.k-hp1-live-acc-navy     { border-top-color: #14306b; }
.k-hp1-live-acc-royal    { border-top-color: #2563eb; }
.k-hp1-live-acc-gold     { border-top-color: #f59e0b; }
.k-hp1-live-acc-electric { border-top-color: #0ea5e9; }
.k-hp1-live-acc-teal     { border-top-color: #0d9488; }
.k-hp1-live-acc-rose     { border-top-color: #db2777; }
.k-hp1-live-acc-purple   { border-top-color: #7c3aed; }
.k-hp1-live-acc-green    { border-top-color: #16a34a; }
.k-hp1-live-card-top { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--k-hp1-grad); display: flex; align-items: center; justify-content: center; }
.k-hp1-live-card-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-hp1-live-card-top i { font-size: 30px; color: rgba(255,255,255,.85); }
.k-hp1-live-badge {
  position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 5px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
}
.k-hp1-live-badge.is-live { background: #fee2e2; color: #dc2626; }
.k-hp1-live-badge.is-live i { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; animation: k-hp1-live-pulse 1.4s infinite; }
.k-hp1-live-badge.is-upcoming { background: #fef3c7; color: #b45309; }
@keyframes k-hp1-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.k-hp1-live-card-body { padding: 16px 18px 20px; }
.k-hp1-live-card-body h4 { font-size: 14px; font-weight: 800; color: var(--k-ink); margin: 0 0 4px; }
.k-hp1-live-card-body .subj { font-size: 11.5px; color: var(--k-gray-500); font-weight: 600; margin-bottom: 12px; }
.k-hp1-live-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--k-gray-500); font-weight: 700; padding-top: 12px; border-top: 1px dashed var(--k-gray-100); margin-bottom: 14px; }
.k-hp1-live-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.k-hp1-live-card .go-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--k-hp1-grad); padding: 10px; border-radius: 999px;
}
@media (max-width: 900px) { .k-hp1-live-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k-hp1-live-grid { grid-template-columns: 1fr; } }

/* ---- Study Material (doc SECTION 8) — horizontal strip ---- */
.k-hp1-study-strip { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; }
/* preview165: pastel tint background per tile (.k-hp1-tint-*, see above) —
   was plain white, user feedback: "Study material still simple, polish it
   100% premium with colorful ui/ux icons and cards". */
.k-hp1-study-tile {
  flex: 0 0 196px; scroll-snap-align: start; border-radius: 16px; box-shadow: var(--k-shadow);
  border: 1px solid rgba(15,23,42,.05); border-top: 3px solid var(--fc-bg); padding: 22px 18px 20px;
  text-decoration: none; display: block; transition: transform .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
}
.k-hp1-study-tile:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--k-shadow-lg); }
.k-hp1-study-tile .ico {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 15px; background: var(--fc-bg); color: var(--fc-fg);
  transition: transform .18s ease;
}
.k-hp1-study-tile:hover .ico { transform: scale(1.08) rotate(-3deg); }
.k-hp1-study-tile strong { display: block; font-size: 13.5px; font-weight: 800; color: var(--k-ink); margin-bottom: 5px; }
.k-hp1-study-tile span {
  display: inline-flex; align-items: center; font-size: 10.5px; color: var(--fc-fg); font-weight: 800;
  background: rgba(255,255,255,.75); padding: 3px 9px; border-radius: 999px;
}

/* ---------- Exam Series band (pastel, full-bleed) ---------- */
.k-hp1-series-band { width: 100%; padding: 44px 0; background: linear-gradient(180deg, #f8fafc, #eef2ff); }
.k-hp1-pastel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Exam Series only — real installs often have just 1-3 series published, and
   stretching that across the fixed 4-column grid above leaves an orphan
   card floating beside a large empty gap. Practice Tests is always exactly
   4 fixed tiles, so it never gets this modifier and is unaffected. */
.k-hp1-pastel-grid-sparse { grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; }
.k-hp1-pastel-card {
  border-radius: 18px; padding: 26px 22px; text-decoration: none; display: block;
  transition: transform .18s ease, box-shadow .18s ease; box-shadow: var(--k-shadow);
}
.k-hp1-pastel-card:hover { transform: translateY(-5px); box-shadow: var(--k-shadow-lg); }
.k-hp1-pastel-card .icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; }
.k-hp1-pastel-card h4 { font-size: 14.5px; font-weight: 800; color: var(--k-ink); margin: 0 0 6px; }
.k-hp1-pastel-card p { font-size: 12px; color: var(--k-gray-600); margin: 0 0 14px; line-height: 1.5; }
.k-hp1-pastel-card .go { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
/* preview163: recolored to the navy/royal-blue/gold family — 'pink' is now
   a gold variant and 'purple'/'green' are navy/teal variants (class names
   kept as-is; only the palette changed, see the .k-hp1-page var comment
   above for why). */
.k-hp1-pastel-pink { background: #fffbeb; } .k-hp1-pastel-pink .icon { background: #fde68a; color: #b45309; } .k-hp1-pastel-pink .go { color: #b45309; }
.k-hp1-pastel-blue { background: #eff6ff; } .k-hp1-pastel-blue .icon { background: #bfdbfe; color: #1d4ed8; } .k-hp1-pastel-blue .go { color: #1d4ed8; }
.k-hp1-pastel-purple { background: #eef2ff; } .k-hp1-pastel-purple .icon { background: #c7d2fe; color: #1e3a8a; } .k-hp1-pastel-purple .go { color: #1e3a8a; }
.k-hp1-pastel-green { background: #ecfeff; } .k-hp1-pastel-green .icon { background: #a5f3fc; color: #0e7490; } .k-hp1-pastel-green .go { color: #0e7490; }
@media (max-width: 900px) { .k-hp1-pastel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k-hp1-pastel-grid { grid-template-columns: 1fr; } }

/* ---------- About Us / Why Choose Us ---------- */
/* preview164: full-bleed soft navy→gold tinted band — see the homepage-v1.php
   comment on $hp1Blocks['about_contact'] for why (user-reported "background
   color/image missing"). */
/* preview168: "remove gap between columns, equal height" — the About panel
   and Get In Touch card now sit flush (no gap) and stretch to match each
   other's height, reading as one continuous two-tone unit rather than two
   separate floating cards. The touching inner corners are squared off
   below so the seam looks intentional, not like two cards colliding. */
.k-hp1-about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: stretch; }
.k-hp1-about-grid .k-hp1-about-panel { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.k-hp1-about-grid .k-hp1-connect-form { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; height: 100%; }
.k-hp1-about-grid h2 { font-size: 28px; font-weight: 800; margin: 10px 0 16px; line-height: 1.25; color: var(--k-ink); }
.k-hp1-about-grid > div:first-child > p { font-size: 14.5px; color: var(--k-gray-600); line-height: 1.75; margin: 0 0 26px; }
.k-hp1-about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin-bottom: 30px; }
.k-hp1-about-features > div { display: flex; align-items: flex-start; gap: 10px; }
.k-hp1-about-features .ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; background: var(--fc-bg); color: var(--fc-fg); }
.k-hp1-about-features strong { display: block; font-size: 13px; font-weight: 800; color: var(--k-ink); }
.k-hp1-about-features span { font-size: 11px; color: var(--k-gray-500); }
@media (max-width: 900px) {
  /* Stacked layout: the flush/squared-seam treatment only makes sense
     side-by-side — restore a normal gap and full corners on both cards. */
  .k-hp1-about-grid { grid-template-columns: 1fr; gap: 24px; }
  .k-hp1-about-grid .k-hp1-about-panel { border-radius: 22px; }
  .k-hp1-about-grid .k-hp1-connect-form { border-radius: 18px; border-left: 1px solid var(--k-gray-100); }
}

/* preview165: "Why Choose Us" gets its OWN separate colorful background —
   a dedicated navy panel, not the whole section — see the homepage-v1.php
   comment on $hp1Blocks['about_contact'] for why. Get In Touch (below,
   .k-hp1-connect-form) is deliberately untouched — still a plain white
   card, matching the two-tone contrast in the user's reference mockup. */
/* preview166: was a single block with the photo buried under a 92%-opacity
   navy wash as a full-bleed backdrop — effectively invisible, reported as
   "why choose us has no hero image". Restructured into a real two-zone
   flex split (.k-hp1-about-panel-media + .k-hp1-about-panel-body), same
   spirit as the reference mockup, so an uploaded photo is genuinely seen
   at full brightness with only a soft seam blend into the text zone. */
.k-hp1-about-panel {
  display: flex; overflow: hidden; border-radius: 22px; box-shadow: var(--k-shadow-xl); color: #fff;
}
.k-hp1-about-panel-media { position: relative; flex: 0 0 40%; min-height: 340px; background: #0f2a5e; }
.k-hp1-about-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A soft one-directional fade only along the seam (not the whole photo) so
   the image reads clearly while still blending into the navy text zone. */
.k-hp1-about-panel-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 55%, rgba(10,28,66,.55) 82%, #0a1c42 100%);
}
.k-hp1-about-panel-art { position: absolute; inset: 0; }
.k-hp1-about-panel-body {
  position: relative; flex: 1; min-width: 0; padding: 38px 34px;
  background: linear-gradient(150deg, #14306b 0%, #0a1c42 100%);
}
.k-hp1-about-panel-body .k-eyebrow { color: #93c5fd; }
.k-hp1-about-panel-body h2 { color: #fff; }
.k-hp1-about-panel-body > p { color: rgba(255,255,255,.82) !important; }
.k-hp1-about-panel-body .k-hp1-about-features strong { color: #fff; }
.k-hp1-about-panel-body .k-hp1-about-features span { color: rgba(255,255,255,.68); }
@media (max-width: 700px) {
  .k-hp1-about-panel { flex-direction: column; }
  .k-hp1-about-panel-media { flex-basis: auto; min-height: 200px; }
  .k-hp1-about-panel-media::after { background: linear-gradient(180deg, transparent 45%, rgba(10,28,66,.6) 82%, #0a1c42 100%); }
}
.k-hp1-about-panel-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--k-hp1-purple-dark);
  font-weight: 800; padding: 13px 24px; border-radius: 999px; text-decoration: none; box-shadow: var(--k-shadow-lg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.k-hp1-about-panel-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.28); color: var(--k-hp1-purple-dark); }

/* ---------- Stat strip (after About) ---------- */
.k-hp1-statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #fff; border-radius: 20px; box-shadow: var(--k-shadow-lg); padding: 22px 18px; text-align: center; }
.k-hp1-statstrip > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.k-hp1-statstrip .ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--fc-bg); color: var(--fc-fg); }
.k-hp1-statstrip strong { font-size: 22px; font-weight: 800; color: var(--k-ink); }
.k-hp1-statstrip span { font-size: 11.5px; color: var(--k-gray-500); font-weight: 600; }
@media (max-width: 700px) { .k-hp1-statstrip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Get In Touch (embedded as About Us's right column) ---------- */
.k-hp1-connect-form h2 { font-size: 22px; font-weight: 800; margin: 8px 0 18px; color: var(--k-ink); }
.k-hp1-connect-form {
  position: relative; overflow: hidden; background: #fff; border-radius: 18px; padding: 28px;
  box-shadow: var(--k-shadow-lg); border: 1px solid var(--k-gray-100);
}
/* preview164: a colored gradient top bar so the card itself carries the
   page's palette even before any icon/button inside it is read. */
.k-hp1-connect-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--k-hp1-grad); }
/* preview168: "make like single row, not editable" — was one line per
   detail (phone/email/address stacked); now a single flowing row of plain
   read-only text (never form-input styling), wrapping only if the card
   gets too narrow to fit all three. */
.k-hp1-contact-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--k-gray-100); }
.k-hp1-contact-info div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--k-gray-600); font-weight: 600; white-space: nowrap; }
.k-hp1-contact-info i { color: var(--k-hp1-purple); width: 16px; text-align: center; flex-shrink: 0; }
/* preview163: "Need Help?" quick links (doc SECTION 10) above the form.
   preview164: given a colored icon chip per button (was a flat grey pill) —
   user feedback: "contact form also no colorful/cards and icons". */
.k-hp1-needhelp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.k-hp1-needhelp-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700;
  color: var(--k-ink); background: #fff; border: 1px solid var(--k-gray-100); border-radius: 999px;
  padding: 7px 16px 7px 7px; text-decoration: none; white-space: nowrap; box-shadow: var(--k-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.k-hp1-needhelp-btn:hover { transform: translateY(-2px); box-shadow: var(--k-shadow-lg); }
.k-hp1-needhelp-btn .ico {
  width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; flex-shrink: 0;
}
.k-hp1-needhelp-btn.c-blue .ico   { background: #2563eb; }
.k-hp1-needhelp-btn.c-purple .ico { background: #7c3aed; }
.k-hp1-needhelp-btn.c-rose .ico   { background: #db2777; }
.k-hp1-needhelp-btn.c-amber .ico  { background: #d97706; }

/* ---------- Student Stories — 3-column grid ----------
   preview165: "Add in three columns view" (was a single stacked column). */
.k-hp1-testi-single { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.k-hp1-testi-card {
  background: #fff; border-radius: 16px; padding: 22px 24px; box-shadow: var(--k-shadow); border: 1px solid var(--k-gray-100);
  border-top: 4px solid transparent; display: flex; flex-direction: column;
}
.k-hp1-testi-acc-blue   { border-top-color: #2563eb; }
.k-hp1-testi-acc-purple { border-top-color: #7c3aed; }
.k-hp1-testi-acc-green  { border-top-color: #16a34a; }
.k-hp1-testi-card .stars { color: var(--k-warning); font-size: 13px; margin-bottom: 10px; }
.k-hp1-testi-card p { font-size: 13px; line-height: 1.65; color: var(--k-gray-600); margin: 0 0 16px; font-style: italic; flex: 1; }
.k-hp1-testi-who { display: flex; align-items: center; gap: 10px; }
.k-hp1-testi-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.k-hp1-testi-avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%; background: var(--k-hp1-grad); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
/* Rotating solid color (bold via the .k-hp1-page .k-fc-* override above)
   instead of the fixed navy gradient, matching each card's own top border. */
.k-hp1-testi-avatar-fallback.k-fc-blue, .k-hp1-testi-avatar-fallback.k-fc-purple, .k-hp1-testi-avatar-fallback.k-fc-green {
  background: var(--fc-bg); color: var(--fc-fg);
}
.k-hp1-testi-who strong { display: block; font-size: 12.5px; color: var(--k-ink); }
.k-hp1-testi-who span { font-size: 10.5px; color: var(--k-gray-500); }
@media (max-width: 900px) { .k-hp1-testi-single { grid-template-columns: 1fr; max-width: 480px; } }

/* ---------- Closing CTA band (honest — no fabricated mobile-app links) ---------- */
.k-hp1-cta-band {
  width: 100%; padding: 44px 0; margin-top: 44px; background: var(--k-hp1-grad); text-align: center; color: #fff;
}
.k-hp1-cta-band h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.k-hp1-cta-band p { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 26px; }
.k-hp1-cta-band .k-hp1-btn-outline2 { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); color: #fff; }
.k-hp1-cta-band .k-hp1-btn-outline2:hover { background: rgba(255,255,255,.22); color: #fff; }
.k-hp1-cta-band .k-hp1-btn-grad { background: #fff; color: var(--k-hp1-purple-dark); box-shadow: var(--k-shadow-lg); }
.k-hp1-cta-band .k-hp1-btn-grad:hover { color: var(--k-hp1-purple-dark); }

/* ---------- Premium empty-state card (reused across sections) ---------- */
.k-hp1-empty-premium {
  text-align: center; padding: 52px 30px; border-radius: 18px; background: #fff;
  border: 1px dashed var(--k-gray-200); box-shadow: var(--k-shadow);
}
.k-hp1-empty-on-band { background: #fff; box-shadow: var(--k-shadow-lg); border: 1px solid var(--k-gray-100); }
.k-hp1-empty-icon {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 18px; font-size: 24px;
  display: flex; align-items: center; justify-content: center; background: var(--k-hp1-grad); color: #fff;
}
.k-hp1-empty-premium h3 { font-size: 17px; font-weight: 800; color: var(--k-ink); margin: 0 0 8px; }
.k-hp1-empty-premium p { font-size: 13px; color: var(--k-gray-500); margin: 0 auto; max-width: 420px; line-height: 1.6; }
.k-hp1-empty-premium strong { color: var(--k-hp1-purple-dark); }

/* ============ Study Material module (frontend) ============ */
.k-btn-lg { padding: 14px 26px; font-size: 14.5px; }

.k-sm-hero { background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); padding: 64px 0 90px; color: #fff; position: relative; overflow: hidden; background-size: cover; background-position: center; }

/* Round 200 — Student Registration Form's new admin-editable banner. Default
   (no admin photo/gradient/color set) matches the auth pages' indigo/gold
   palette; an admin override replaces the whole background via an inline
   style on the section tag (see student-registration-form.php). */
.k-regform-banner {
  background: linear-gradient(135deg, #312e81, #4338ca 60%, #4f46e5); background-size: cover; background-position: center;
  padding: 46px 0; color: #fff; text-align: center;
}
.k-regform-banner .k-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.k-regform-banner h1 { font-size: 28px; font-weight: 800; margin: 0 0 8px; color: #fff; }
.k-regform-banner p { font-size: 14px; color: #e0e7ff; margin: 0; }
.k-sm-hero-inner { max-width: 720px; }
.k-sm-hero-inner h1 { font-size: 36px; margin: 10px 0 14px; color: #fff; }
.k-sm-hero-inner h1 span { color: #d1fae5; }
.k-sm-hero-inner p { font-size: 15px; opacity: .92; margin: 0 0 26px; max-width: 600px; }
.k-sm-searchbar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 6px 8px 6px 18px; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.k-sm-searchbar i { color: var(--k-gray-400); }
.k-sm-searchbar input { flex: 1; border: none; outline: none; padding: 12px 4px; font-size: 14px; color: var(--k-ink); }
.k-sm-searchbar button { border: none; background: var(--k-ink); color: #fff; padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.k-sm-searchbar button:hover { background: #000; }
.k-sm-hero-pills { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.k-sm-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s ease; }
.k-sm-pill:hover { background: rgba(255,255,255,.28); }

.k-sm-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: -60px; position: relative; z-index: 2; }
@media (max-width: 1100px) { .k-sm-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .k-sm-cat-grid { grid-template-columns: 1fr; } }
.k-sm-cat-card { background: #fff; border-radius: var(--k-radius); padding: 22px; text-decoration: none; color: inherit; box-shadow: 0 10px 30px rgba(16,36,43,.08); border: 1px solid var(--k-gray-100); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
/* preview170: each card now carries its own real accent (inline background/
   border-color from kesp_category_accent()) — the hover lift just needs to
   get a touch stronger so the colored wash reads as premium, not flat. */
.k-sm-cat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(16,36,43,.16); }
.k-sm-cat-card-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; margin-bottom: 14px; box-shadow: 0 8px 18px rgba(16,36,43,.18); }
.k-sm-cat-card-media { width: 100%; height: 90px; border-radius: 12px; background-size: cover; background-position: center; margin-bottom: 14px; }
.k-sm-cat-card h3 { margin: 0 0 6px; font-size: 16.5px; }
.k-sm-cat-card p { margin: 0 0 12px; font-size: 12.5px; color: var(--k-gray-500); flex: 1; }
.k-sm-cat-card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--k-gray-600); font-weight: 600; margin-bottom: 8px; }
.k-sm-cat-card-counts { display: flex; gap: 10px; font-size: 11px; font-weight: 700; margin-bottom: 14px; }
.k-sm-cat-card-counts .free { color: #16a34a; } .k-sm-cat-card-counts .paid { color: #7c3aed; }
.k-sm-cat-card-go { font-size: 12.5px; font-weight: 700; color: var(--k-primary); display: flex; align-items: center; gap: 6px; }

.k-sm-subhero { background: var(--k-gray-50); padding: 34px 0; border-bottom: 1px solid var(--k-gray-100); }
.k-sm-crumb { font-size: 12px; color: var(--k-gray-500); margin-bottom: 10px; }
.k-sm-crumb a { color: var(--k-gray-500); text-decoration: none; }
.k-sm-crumb a:hover { color: var(--k-primary); }
.k-sm-subhero h1 { margin: 0 0 6px; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.k-sm-subhero h1 i { color: var(--k-primary); }
.k-sm-subhero p { margin: 0; color: var(--k-gray-500); font-size: 13.5px; }

.k-sm-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .k-sm-sub-grid { grid-template-columns: 1fr; } }
.k-sm-sub-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius-sm); padding: 16px; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; }
.k-sm-sub-card:hover { box-shadow: 0 8px 22px rgba(16,36,43,.1); transform: translateY(-2px); }
.k-sm-sub-card .icon { width: 44px; height: 44px; border-radius: 11px; background: var(--k-gray-50); color: var(--k-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; }
.k-sm-sub-card h3 { margin: 0 0 3px; font-size: 14.5px; }
.k-sm-sub-card .count { font-size: 11.5px; color: var(--k-gray-500); }
.k-sm-sub-card .go { margin-left: auto; color: var(--k-gray-300); }

.k-sm-topic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.k-sm-topic-chip { background: #fff; border: 1px solid var(--k-gray-200); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: var(--k-gray-600); text-decoration: none; }
.k-sm-topic-chip span { color: var(--k-gray-400); margin-left: 4px; }
.k-sm-topic-chip.active { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.k-sm-topic-chip.active span { color: rgba(255,255,255,.8); }

.k-sm-filter-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--k-gray-100); }
.k-sm-filter-tabs { display: flex; gap: 6px; background: var(--k-gray-50); border-radius: 10px; padding: 4px; }
.k-sm-filter-tabs a { padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--k-gray-600); text-decoration: none; }
.k-sm-filter-tabs a.active { background: #fff; color: var(--k-primary); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

.k-sm-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .k-sm-mat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .k-sm-mat-grid { grid-template-columns: 1fr; } }
.k-sm-mat-card { background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.k-sm-mat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,36,43,.12); }
.k-sm-mat-thumb { position: relative; height: 120px; background: linear-gradient(135deg, var(--k-gray-50), var(--k-gray-100)); display: flex; align-items: center; justify-content: center; }
.k-sm-mat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.k-sm-mat-thumb i { font-size: 32px; color: var(--k-gray-300); }
.k-sm-badge { position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.k-sm-badge.free { background: #dcfce7; color: #15803d; }
.k-sm-badge.paid { background: #ede9fe; color: #6d28d9; }
.k-sm-type-badge { position: absolute; top: 10px; right: 10px; background: rgba(16,36,43,.75); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.k-sm-mat-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.k-sm-mat-body h4 { margin: 0 0 6px; font-size: 14.5px; line-height: 1.35; }
.k-sm-mat-body p { margin: 0 0 12px; font-size: 12px; color: var(--k-gray-500); flex: 1; }
.k-sm-mat-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--k-gray-100); }
.k-sm-price { font-weight: 800; color: var(--k-primary); font-size: 14px; }
.k-sm-price.free { color: #16a34a; font-size: 12.5px; }
.k-sm-price s { color: var(--k-gray-400); font-weight: 500; margin-right: 4px; }
.k-sm-mat-date { font-size: 11px; color: var(--k-gray-400); }

.k-sm-view-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .k-sm-view-grid { grid-template-columns: 1fr; } }
.k-sm-viewer { margin-top: 18px; }
.k-sm-locked { text-align: center; padding: 60px 30px; background: var(--k-gray-50); border-radius: var(--k-radius); }
.k-sm-locked i { font-size: 40px; color: var(--k-gray-300); margin-bottom: 16px; }
.k-sm-locked h3 { margin: 0 0 8px; }
.k-sm-locked p { color: var(--k-gray-500); font-size: 13.5px; margin: 0 0 20px; }
.k-sm-pdf-frame { border-radius: var(--k-radius); overflow: hidden; border: 1px solid var(--k-gray-100); height: 720px; }
.k-sm-pdf-frame iframe { width: 100%; height: 100%; border: none; }
.k-sm-video-frame { position: relative; padding-top: 56.25%; border-radius: var(--k-radius); overflow: hidden; background: #000; }
.k-sm-video-frame iframe, .k-sm-video-frame video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Round 208 ("a rotating flashing watermark... admin editable") — a floating,
   fading, slowly rotating text overlay on top of the PDF/video area.
   pointer-events:none so it never blocks scrolling/video controls. This is a
   deterrent (makes a casual screenshot/recording carry the site's name), not
   real DRM — nothing client-side can stop a determined screen recording. */
.k-sm-watermarked { position: relative; }
.k-sm-watermark {
  position: absolute; top: 50%; left: 50%; pointer-events: none; z-index: 5;
  color: rgba(255,255,255,.4); font-weight: 800; font-size: 15px; letter-spacing: .04em;
  white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.5);
  animation: kSmWatermarkDrift 16s ease-in-out infinite, kSmWatermarkFlash 3.2s ease-in-out infinite;
}
.k-sm-pdf-frame .k-sm-watermark { color: rgba(19,123,124,.28); text-shadow: 0 1px 2px rgba(255,255,255,.6); }
@keyframes kSmWatermarkDrift {
  0%   { transform: translate(-50%,-50%) rotate(-18deg); top: 20%; left: 22%; }
  25%  { transform: translate(-50%,-50%) rotate(-18deg); top: 25%; left: 75%; }
  50%  { transform: translate(-50%,-50%) rotate(-18deg); top: 78%; left: 68%; }
  75%  { transform: translate(-50%,-50%) rotate(-18deg); top: 72%; left: 20%; }
  100% { transform: translate(-50%,-50%) rotate(-18deg); top: 20%; left: 22%; }
}
@keyframes kSmWatermarkFlash {
  0%, 100% { opacity: .18; }
  50% { opacity: .55; }
}
.k-sm-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--k-gray-100); font-size: 12.5px; }
.k-sm-meta-row span { color: var(--k-gray-500); display: flex; align-items: center; gap: 6px; }
.k-sm-meta-row i { width: 14px; color: var(--k-primary); }

/* ---- Page Builder (Round 1: site-wide expansion of Homepage Builder) ----
   Applied by admin/includes/page-builder-schema.php::kesp_pb_wrap() around
   any generic page's block whose admin picked a background style — a real,
   rendered effect, not a saved-but-ignored setting. */
.kesp-pb-wrap { border-radius: var(--k-radius); }
.kesp-pb-bg-tint { background: var(--k-gray-50, #f8f9fc); padding: 28px; }
.kesp-pb-bg-brand { background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(236,72,153,0.08)); padding: 28px; }

/* ---- Page Builder Round 2 ("Elements") ----
   Advanced tab's real "Show on Desktop/Tablet/Mobile" toggles, applied by
   kesp_pb_wrap() as hide_* classes on the same wrapper. Breakpoints match
   this site's own real ones (900px is already the site-wide tablet-and-
   below cutoff, e.g. the mobile bottom nav in .k-nav). */
@media (min-width: 901px) { .kesp-pb-hide-desktop { display: none !important; } }
@media (min-width: 561px) and (max-width: 900px) { .kesp-pb-hide-tablet { display: none !important; } }
@media (max-width: 560px) { .kesp-pb-hide-mobile { display: none !important; } }

/* ---- Page Builder preview177 ("full, Elementor-Pro-style freeform
   freedom" — real nested Container > Column layouts on Courses/About/
   Contact/every Custom Page AND Homepage) ----
   Rendered by admin/includes/page-builder-schema.php::kesp_pb_render_tree(),
   shared by every page this builder supports. A Container is a real CSS
   Grid (12 columns); each real Column spans col_span/12 of it via an inline
   style (admin-set width, see kesp_pb_add_column()); a leaf's own HTML
   (already kesp_pb_wrap()'d / kesp_pb_render_element()'d by the page before
   this renders) sits inside .k-pb-leaf with no extra wrapper. */
.k-pb-container { display: grid; grid-template-columns: repeat(12, 1fr); max-width: 1180px; margin: 0 auto; }
.k-pb-container-full { max-width: none; }
.k-pb-gap-small { gap: 12px; }
.k-pb-gap-medium { gap: 24px; }
.k-pb-gap-large { gap: 40px; }
.k-pb-column { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.k-pb-leaf { min-width: 0; }
@media (max-width: 760px) {
  /* Every column stacks full-width on mobile, regardless of its admin-set
     span — the same honest "don't pretend a 12-unit grid works at phone
     width" rule the rest of this site's responsive grids already follow. */
  .k-pb-column { grid-column: 1 / -1 !important; }
}

/* Admin-added "Heading/Text/Image/Button/Divider/Spacer" elements, rendered
   by kesp_pb_render_element() — plain, on-brand element styling, matching
   the same type/spacing/color tokens the rest of the site already uses. */
.kesp-pb-el-heading { margin: 0 0 10px; font-size: 26px; font-weight: 800; color: var(--k-gray-800); }
.kesp-pb-el-text { margin: 0 0 10px; font-size: 14.5px; line-height: 1.8; color: var(--k-gray-700); }
.kesp-pb-el-image { display: block; max-width: 100%; height: auto; border-radius: var(--k-radius); margin: 0 auto; }
.kesp-pb-el-image-empty { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 30px; border: 1.5px dashed var(--k-gray-300); border-radius: var(--k-radius); color: var(--k-gray-400); font-size: 13px; }
.kesp-pb-el-button { display: inline-flex; }
.kesp-pb-el-divider { border: none; border-top: 1px solid var(--k-gray-200); margin: 20px 0; }
.kesp-pb-el-spacer-small { height: 16px; }
.kesp-pb-el-spacer-medium { height: 40px; }
.kesp-pb-el-spacer-large { height: 80px; }

/* Round 4 — Basic: Icon / Video / HTML */
.kesp-pb-el-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0 0 10px; }
.kesp-pb-el-icon-badge { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--fc-bg); color: var(--fc-fg); }
.kesp-pb-el-icon-small .kesp-pb-el-icon-badge { width: 40px; height: 40px; font-size: 16px; }
.kesp-pb-el-icon-large .kesp-pb-el-icon-badge { width: 72px; height: 72px; font-size: 28px; }
.kesp-pb-el-icon-caption { font-size: 13px; font-weight: 700; color: var(--k-gray-700); }
.kesp-pb-el-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--k-radius); overflow: hidden; box-shadow: var(--k-shadow); margin: 0 0 8px; background: var(--k-gray-100); }
.kesp-pb-el-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kesp-pb-el-video-caption { font-size: 12.5px; color: var(--k-gray-500); text-align: center; margin: 0 0 10px; }
.kesp-pb-el-html { margin: 0 0 10px; font-size: 14.5px; line-height: 1.8; color: var(--k-gray-700); }

/* Round 4 — Content: real data grids */
.kesp-pb-el-grid { margin: 4px 0 10px; }
.kesp-pb-el-testimonial { background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); box-shadow: var(--k-shadow); padding: 24px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kesp-pb-el-testimonial-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.kesp-pb-el-testimonial-initial { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 12px; }
.kesp-pb-el-testimonial-stars { color: #f59e0b; font-size: 12px; margin-bottom: 10px; }
.kesp-pb-el-testimonial p { font-size: 13.5px; color: var(--k-gray-600); line-height: 1.7; margin: 0 0 12px; font-style: italic; }
.kesp-pb-el-testimonial strong { font-size: 13.5px; color: var(--k-ink); }
.kesp-pb-el-testimonial span { font-size: 11.5px; color: var(--k-gray-400); }

/* Round 4 — Content: Countdown */
.kesp-pb-el-countdown { background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); border-radius: var(--k-radius); padding: 24px 22px; text-align: center; color: #fff; margin: 0 0 10px; box-shadow: var(--k-shadow-lg); }
.kesp-pb-el-countdown-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .9; margin-bottom: 14px; }
.kesp-pb-el-countdown-units { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.kesp-pb-el-countdown-units div { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.kesp-pb-el-countdown-units strong { font-size: 28px; font-weight: 800; line-height: 1; }
.kesp-pb-el-countdown-units span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-top: 4px; }
.kesp-pb-el-countdown-expired { margin: 10px 0 0; font-size: 14px; font-weight: 700; }

/* Round 4 — Layout: Tabs / Accordion / Content Slider */
.kesp-pb-el-tabs { margin: 0 0 10px; }
.kesp-pb-el-tab-nav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1.5px solid var(--k-gray-100); margin-bottom: 16px; }
.kesp-pb-el-tab-btn { border: none; background: transparent; padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--k-gray-500); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: color .15s ease, border-color .15s ease; }
.kesp-pb-el-tab-btn:hover { color: var(--k-primary); }
.kesp-pb-el-tab-btn.is-active { color: var(--k-primary); border-bottom-color: var(--k-primary); }
.kesp-pb-el-tab-panel { display: none; font-size: 14px; line-height: 1.8; color: var(--k-gray-700); }
.kesp-pb-el-tab-panel.is-active { display: block; }
.kesp-pb-el-accordion { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; }
.kesp-pb-el-accordion-item { background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); padding: 4px 18px; box-shadow: var(--k-shadow); }
.kesp-pb-el-accordion-item summary { padding: 14px 0; font-size: 14px; font-weight: 700; color: var(--k-ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.kesp-pb-el-accordion-item summary::-webkit-details-marker { display: none; }
.kesp-pb-el-accordion-item summary i { font-size: 12px; color: var(--k-gray-400); transition: transform .18s ease; }
.kesp-pb-el-accordion-item[open] summary i { transform: rotate(180deg); }
.kesp-pb-el-accordion-item div { padding: 0 0 16px; font-size: 13.5px; line-height: 1.75; color: var(--k-gray-600); }
.kesp-pb-el-slider { position: relative; overflow: hidden; border-radius: var(--k-radius); margin: 0 0 10px; }
.kesp-pb-el-slider-track { display: flex; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.kesp-pb-el-slide { flex: 0 0 100%; background: linear-gradient(135deg, var(--k-gray-50), #fff); border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); padding: 40px 30px; text-align: center; }
.kesp-pb-el-slide i { font-size: 30px; color: var(--k-primary); margin-bottom: 14px; }
.kesp-pb-el-slide h4 { font-size: 18px; font-weight: 800; color: var(--k-ink); margin: 0 0 8px; }
.kesp-pb-el-slide p { font-size: 14px; color: var(--k-gray-600); line-height: 1.7; margin: 0; max-width: 520px; margin-left: auto; margin-right: auto; }
.kesp-pb-el-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--k-gray-200); background: #fff; color: var(--k-gray-600); box-shadow: var(--k-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kesp-pb-el-slider-btn:hover { color: var(--k-primary); border-color: var(--k-primary); }
.kesp-pb-el-slider-prev { left: 10px; }
.kesp-pb-el-slider-next { right: 10px; }

/* Round 4 — Advanced: Contact Form / Map / Social Icons / Newsletter */
.kesp-pb-el-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 0 10px; }
.kesp-pb-el-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kesp-pb-el-form-row input { flex: 1; min-width: 180px; }
.kesp-pb-el-form input, .kesp-pb-el-form textarea { padding: 12px 14px; border: 1.5px solid var(--k-gray-200); border-radius: 10px; font-size: 13.5px; font-family: inherit; }
.kesp-pb-el-form input:focus, .kesp-pb-el-form textarea:focus { outline: none; border-color: var(--k-primary); }
.kesp-pb-el-map { border-radius: var(--k-radius); overflow: hidden; box-shadow: var(--k-shadow); margin: 0 0 10px; }
.kesp-pb-el-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.kesp-pb-el-map-small { height: 220px; }
.kesp-pb-el-map-medium { height: 340px; }
.kesp-pb-el-map-large { height: 480px; }
.kesp-pb-el-social { display: flex; gap: 10px; margin: 0 0 10px; }
.kesp-pb-el-social-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--k-gray-50); border: 1px solid var(--k-gray-100); color: var(--k-gray-600); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform .15s ease, color .15s ease, border-color .15s ease; }
.kesp-pb-el-social-btn:hover { transform: translateY(-3px); color: var(--k-primary); border-color: var(--k-primary); }
.kesp-pb-el-newsletter { background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); border-radius: var(--k-radius); padding: 30px 28px; color: #fff; margin: 0 0 10px; }
.kesp-pb-el-newsletter h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.kesp-pb-el-newsletter p { margin: 0 0 16px; font-size: 13.5px; opacity: .92; }
.kesp-pb-el-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.kesp-pb-el-newsletter-form input { flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 10px; border: none; font-size: 13.5px; }
.kesp-pb-el-newsletter-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.4); }

/* ==========================================================================
   Mission, Vision & Values page (frontend/mission-vision-values.php,
   Admin → Frontend → "Mission, Vision & Values"). Reuses .k-pagehero (hero),
   .k-hub-breadcrumb2 (breadcrumb), .k-pbi-{color} (icon chip colors) and
   .k-stat-strip/.k-stat-strip-card (Commitment stats) verbatim from
   elsewhere on the site — only the split Mission/Vision blocks and the
   Values card grid are genuinely new components.
   ========================================================================== */
.k-mvv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 56px 0; }
.k-mvv-split-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 20px;
}
.k-mvv-split h2 { font-size: 30px; font-weight: 800; color: var(--k-ink); margin: 0 0 10px; }
.k-mvv-split .k-mvv-subhead { font-size: 15.5px; font-weight: 700; color: var(--k-accent); margin: 0 0 14px; }
.k-mvv-split p { font-size: 14.5px; line-height: 1.75; color: var(--k-gray-600); margin: 0; }
.k-mvv-quote {
  background: #fff; border-radius: var(--k-radius); padding: 30px 32px; box-shadow: var(--k-shadow);
  border-left: 4px solid var(--k-accent); position: relative; font-size: 15px; line-height: 1.7; color: var(--k-gray-700);
}
.k-mvv-quote i { font-size: 24px; color: color-mix(in srgb, var(--k-accent) 35%, transparent); margin-bottom: 10px; display: block; }
.k-mvv-band-amber { background: linear-gradient(155deg, #fffbeb 0%, #fef3c7 100%); }
.k-mvv-band-amber .k-mvv-quote { border-left-color: var(--k-warning); }
.k-mvv-band-amber .k-mvv-quote i { color: color-mix(in srgb, var(--k-warning) 45%, transparent); }
@media (max-width: 860px) {
  .k-mvv-split { grid-template-columns: 1fr; padding: 36px 0; }
  .k-mvv-split .k-mvv-quote { order: -1; }
}

.k-mvv-values-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
.k-mvv-values-head h2 { font-size: 28px; font-weight: 800; color: var(--k-ink); margin: 0 0 6px; }
.k-mvv-values-head .k-mvv-subhead { font-size: 14px; font-weight: 700; color: var(--k-accent); margin: 0; }
.k-mvv-values-head p { font-size: 13.5px; line-height: 1.7; color: var(--k-gray-600); max-width: 440px; margin: 0; }
.k-mvv-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.k-mvv-value-card {
  background: #fff; border: 1px solid var(--k-gray-100); border-radius: var(--k-radius); padding: 28px 20px;
  text-align: center; box-shadow: var(--k-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.k-mvv-value-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.k-mvv-value-card .ico {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin: 0 auto 16px;
}
.k-mvv-value-card h3 { font-size: 15px; font-weight: 800; color: var(--k-ink); margin: 0 0 8px; }
.k-mvv-value-card p { font-size: 12.5px; line-height: 1.6; color: var(--k-gray-500); margin: 0; }

.k-mvv-commit {
  position: relative; overflow: hidden; border-radius: var(--k-radius); padding: 46px 40px;
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
  background:
    radial-gradient(700px circle at 100% -10%, color-mix(in srgb, var(--k-primary) 14%, transparent) 0%, transparent 60%),
    linear-gradient(155deg, var(--k-gray-50) 0%, var(--k-gray-100) 100%);
  border: 1px solid var(--k-gray-100);
}
.k-mvv-commit-art {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--k-radius-sm); overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--k-primary) 0%, var(--k-ink) 100%); box-shadow: var(--k-shadow-lg);
}
.k-mvv-commit-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-mvv-commit-art i { font-size: 46px; color: rgba(255,255,255,.9); }
.k-mvv-commit-inner { position: relative; z-index: 1; }
.k-mvv-commit h2 { font-size: 26px; font-weight: 800; color: var(--k-ink); margin: 0 0 8px; }
.k-mvv-commit p { font-size: 14px; color: var(--k-gray-600); margin: 0 0 26px; }
.k-mvv-commit-tag {
  position: absolute; top: -6px; right: 0; font-family: 'Caveat', cursive; font-size: 19px; font-weight: 700;
  color: var(--k-accent); line-height: 1.3; transform: rotate(-3deg); text-align: right; max-width: 170px; z-index: 1;
}
@media (max-width: 760px) {
  .k-mvv-commit { grid-template-columns: 1fr; padding: 30px 24px; text-align: center; }
  .k-mvv-commit-art { max-width: 160px; margin: 0 auto; }
  .k-mvv-commit .k-stat-strip { justify-content: center; }
  .k-mvv-commit-tag { display: none; }
}

/* ===================================================================
   EXAM MENU REDESIGN — frontend/exams.php ("Exams by Category" hub),
   frontend/exam-domain.php (single exam page), frontend/exam-series.php
   (Exam Series listing for one exam) and the shared exam-tree sidebar
   (kesp_render_exam_nav_sidebar() in frontend/includes/exam-helpers.php).
   =================================================================== */

/* -- Exams Directory hero (search bar + quick tags + floating badges) -- */
.k-examdir-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--k-gray-200); border-radius: 999px; padding: 6px 6px 6px 20px; max-width: 560px; margin: 22px 0 16px; box-shadow: var(--k-shadow-md); }
.k-examdir-search i { color: var(--k-gray-400); }
.k-examdir-search input { flex: 1; border: none; outline: none; font-size: 14px; font-family: var(--k-font); background: none; }
.k-examdir-search .k-btn { border-radius: 999px; padding: 11px 24px; }
.k-examdir-quicktags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; }
.k-examdir-quicktags > span { color: var(--k-gray-400); font-weight: 700; }
.k-examdir-quicktags a { background: #fff; border: 1px solid var(--k-gray-200); border-radius: 999px; padding: 6px 14px; color: var(--k-gray-700); font-weight: 700; text-decoration: none; transition: all .15s ease; }
.k-examdir-quicktags a:hover { border-color: var(--k-accent); color: var(--k-accent); }
.k-examdir-hero-badges { display: flex; flex-direction: column; gap: 10px; position: absolute; left: -30px; bottom: 30px; z-index: 2; }
.k-examdir-hero-badges .badge { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--k-shadow-lg); font-size: 11.5px; }
.k-examdir-hero-badges .badge .ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex-shrink: 0; }
.k-examdir-hero-badges .badge strong { display: block; font-size: 12.5px; color: var(--k-ink); }
.k-examdir-hero-badges .badge span { color: var(--k-gray-400); font-weight: 600; }
.k-pagehero-art { position: relative; }
@media (max-width: 960px) { .k-examdir-hero-badges { display: none; } }

/* -- Exams Directory sidebar category list ("All Exams" + chevron rows) -- */
.k-examdir-catlist { display: flex; flex-direction: column; gap: 4px; }
.k-examdir-catlist-all, .k-examdir-catlist-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--k-gray-700); font-size: 13.5px; font-weight: 700; transition: background .15s ease; }
.k-examdir-catlist-all { background: var(--k-gray-50); }
.k-examdir-catlist-all.active, .k-examdir-catlist-row.active { background: var(--k-teal-50); color: var(--k-primary); }
.k-examdir-catlist-row:hover { background: var(--k-gray-50); }
.k-examdir-catlist-row span { display: inline-flex; align-items: center; gap: 10px; }
.k-examdir-catlist-row i:first-child { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #fff; font-size: 11.5px; }
.k-examdir-catlist-row small { display: block; font-size: 10.5px; color: var(--k-gray-400); font-weight: 600; text-transform: none; }
.k-examdir-catlist-row .fa-chevron-right { font-size: 10px; color: var(--k-gray-300); }
.k-examdir-catlist-all .count { font-size: 11.5px; background: var(--k-primary); color: #fff; border-radius: 999px; padding: 2px 9px; }

/* -- Popular Categories grid (card2 = the richer chip/link-row card) -- */
.k-examdir-card2 { background: #fff; border: 1px solid var(--k-gray-100); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -20px rgba(16,36,43,.15); transition: transform .18s ease, box-shadow .18s ease; }
.k-examdir-card2:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-lg); }
.k-examdir-card2-body { padding: 20px 22px; }
.k-examdir-card2-head { display: flex; align-items: flex-start; gap: 14px; }
.k-examdir-card2-icon {
  width: 50px; height: 50px; flex: 0 0 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 21px; box-shadow: 0 8px 16px -8px rgba(17,24,39,.4);
}
.k-examdir-card2-icon img { width: 100%; height: 100%; border-radius: 13px; object-fit: cover; }
.k-examdir-card2-titles { flex: 1; min-width: 0; }
.k-examdir-card2-head h3 { font-size: 16px; font-weight: 800; color: var(--k-ink); margin: 0 0 3px; }
.k-examdir-card2-head p { font-size: 12px; color: var(--k-gray-500); margin: 0; line-height: 1.5; }
.k-examdir-card2-count { flex-shrink: 0; font-size: 16px; font-weight: 800; text-align: center; border-radius: 10px; padding: 5px 11px; }
.k-examdir-card2-count small { display: block; font-size: 8.5px; color: inherit; opacity: .75; font-weight: 700; text-transform: uppercase; }
.k-examdir-card2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.k-examdir-card2-chips a { background: var(--k-gray-50); border: 1px solid var(--k-gray-100); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; color: var(--k-gray-700); text-decoration: none; }
.k-examdir-card2-chips a:hover { border-color: var(--k-accent); color: var(--k-accent); }
.k-examdir-card2-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--k-gray-100); }
.k-examdir-card2-links { display: flex; flex-wrap: wrap; gap: 14px; }
.k-examdir-card2-links a { font-size: 11.5px; font-weight: 700; color: var(--k-gray-500); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.k-examdir-card2-links a:hover { color: var(--k-accent); }
.k-examdir-card2-arrow { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; text-decoration: none; }
.k-examdir-card2-trending { grid-column: span 1; background: linear-gradient(155deg, #fff7ed, #fff); border-color: #fed7aa; }
.k-examdir-card2-trending h3 { font-size: 16.5px; }

/* -- Explore by Goal -- */
.k-examdir-goals { margin-top: 32px; }
.k-examdir-goals h3 { font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.k-examdir-goals > p { font-size: 12.5px; color: var(--k-gray-500); margin: 0 0 16px; }
.k-goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.k-goal-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 14px; padding: 16px; text-decoration: none; transition: all .15s ease; }
.k-goal-card:hover { border-color: var(--k-accent); box-shadow: var(--k-shadow-md); }
.k-goal-card .ico { width: 42px; height: 42px; border-radius: 11px; background: var(--k-teal-50); color: var(--k-primary); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.k-goal-card strong { display: block; font-size: 13.5px; color: var(--k-ink); }
.k-goal-card > span > span { font-size: 11px; color: var(--k-gray-400); font-weight: 600; }
.k-goal-card .go { margin-left: auto; color: var(--k-gray-300); font-size: 12px; }

/* -- Exam-tree sidebar (shared: exam-domain.php + exam-series.php) -- */
/* Exam-domain / exam-series left sidebar — round-3 rebuild back to a real
   sitewide category tree (every top-level category listed, colored icon
   chip each, only the current family expanded) matching the reference
   image exactly, plus the Premium Exam Series promo + Need Guidance contact
   prompt stacked below it in the same unified left column. */
.k-examnav-sidebar { border-radius: 18px; padding: 12px; position: sticky; top: 108px; align-self: flex-start; overflow: visible; box-shadow: 0 16px 40px -22px rgba(16,36,43,.4); display: flex; flex-direction: column; gap: 14px; }
.k-examnav-tree { display: flex; flex-direction: column; gap: 2px; }
.k-examnav-group { border-radius: 10px; overflow: hidden; }
.k-examnav-top { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; text-decoration: none; color: var(--examnav-text, #fff); font-size: 13.5px; font-weight: 700; transition: background .15s ease; }
.k-examnav-top:hover { background: var(--examnav-hover, rgba(255,255,255,.08)); }
.k-examnav-top.active { background: var(--examnav-hover, rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1px var(--examnav-border, rgba(255,255,255,.1)); }
.k-examnav-ico {
  width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 13px; color: #fff; box-shadow: 0 4px 10px -4px rgba(0,0,0,.5);
}
.k-examnav-top-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-examnav-chev { font-size: 10.5px; color: var(--examnav-text, #fff); opacity: .4; flex-shrink: 0; }
.k-examnav-group.open .k-examnav-top { font-weight: 800; }
.k-examnav-group.open .k-examnav-chev { opacity: .9; }
.k-examnav-children { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin: 2px 0 6px 38px; border-radius: 10px; }
.k-examnav-child { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--examnav-text, #fff); opacity: .72; font-size: 12.5px; font-weight: 600; border-left: 2px solid transparent; }
.k-examnav-child:hover { background: var(--examnav-hover, rgba(255,255,255,.08)); opacity: 1; }
.k-examnav-child.active { background: var(--k-accent, #2563eb); color: #fff; opacity: 1; font-weight: 700; border-left-color: var(--k-warning, #fbbf24); }

.k-examnav-promo { border-radius: 14px; padding: 16px; background: linear-gradient(150deg, #6d28d9, #db2777); color: #fff; }
.k-examnav-promo-head { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.k-examnav-promo-head i { color: #fbbf24; }
.k-examnav-promo ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.k-examnav-promo li { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.92); }
.k-examnav-promo li i { color: #4ade80; font-size: 11px; }
.k-examnav-promo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #6d28d9; font-size: 12.5px; font-weight: 800; padding: 10px; border-radius: 10px; text-decoration: none; }
.k-examnav-promo-btn:hover { background: #f5f3ff; }

.k-examnav-guidance { border-radius: 14px; padding: 14px; background: #fff; }
.k-examnav-guidance-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.k-examnav-guidance-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--k-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.k-examnav-guidance-head strong { display: block; font-size: 13px; color: var(--k-ink); }
.k-examnav-guidance-head span { display: block; font-size: 11.5px; color: var(--k-gray-500); font-weight: 600; }

/* -- Exam domain page: badges / stat row / "why choose" / lists / faculty / quicklinks -- */
.k-examdomain-badges { display: flex; gap: 8px; margin-bottom: 12px; }
.k-examdomain-badge { background: var(--k-gray-100); color: var(--k-gray-700); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px; }
.k-examdomain-badge-accent { background: #fee2e2; color: #dc2626; }
.k-examdomain-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; }
.k-examdomain-stats > div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--k-gray-600); font-weight: 700; }
.k-examdomain-stats strong { color: var(--k-primary); font-size: 15px; }
.k-examdomain-stats strong .fa-check { background: var(--k-success); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.k-examdomain-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.k-examdomain-why > div { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; font-weight: 700; color: var(--k-gray-700); }
.k-examdomain-why .ico { width: 32px; height: 32px; border-radius: 9px; background: var(--k-teal-50); color: var(--k-primary); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.k-examdomain-list { display: flex; flex-direction: column; gap: 10px; }
.k-examdomain-list-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 12px; padding: 14px 16px; }
.k-examdomain-list-row .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--k-teal-50); color: var(--k-primary); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.k-examdomain-list-row strong { display: block; font-size: 13.5px; color: var(--k-ink); }
.k-examdomain-list-row span { font-size: 11.5px; color: var(--k-gray-400); font-weight: 600; }
.k-examdomain-faculty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.k-examdomain-faculty-card { text-align: center; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 14px; padding: 20px 12px; }
.k-examdomain-faculty-card .avatar { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--k-primary), var(--k-accent)); color: #fff; font-size: 20px; font-weight: 800; margin: 0 auto 10px; }
.k-examdomain-faculty-card strong { display: block; font-size: 13px; color: var(--k-ink); }
.k-examdomain-faculty-card span { font-size: 11px; color: var(--k-gray-400); font-weight: 600; }
.k-examdomain-quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 32px; }
.k-examdomain-quicklinks a { display: flex; align-items: center; gap: 12px; background: var(--k-gray-50); border-radius: 14px; padding: 14px 16px; text-decoration: none; transition: background .15s ease; }
.k-examdomain-quicklinks a:hover { background: var(--k-teal-50); }
.k-examdomain-quicklinks .ico { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--k-primary); display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: var(--k-shadow-sm); flex-shrink: 0; }
.k-examdomain-quicklinks strong { display: block; font-size: 13px; color: var(--k-ink); }
.k-examdomain-quicklinks span { font-size: 11px; color: var(--k-gray-400); font-weight: 600; }

/* preview162: category-grouped section header, shared by
   exam-series-directory.php and single-exams.php (each real category with
   at least one real published item gets one of these + its own
   .k-examseries-grid directly below it). */
.k-groupdir-section { margin-bottom: 36px; }
.k-groupdir-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--k-gray-100); }
.k-groupdir-section-head .ico { width: 40px; height: 40px; border-radius: 11px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; box-shadow: 0 6px 16px -8px rgba(17,24,39,.35); }
.k-groupdir-section-head h2 { font-size: 18px; font-weight: 800; color: var(--k-ink); margin: 0; flex: 1; }
.k-groupdir-section-head h2 small { font-weight: 600; color: var(--k-gray-400); font-size: 14px; margin-left: 4px; }

/* -- Exam Series listing cards (frontend/exam-series.php, exam-series-directory.php, single-exams.php) -- */
.k-examseries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
/* Follow-up round ("no Premium Polish... Make it Now 100%"): a real premium
   baseline look — stronger shadow and a thin top accent strip even at rest,
   not only revealed on hover — plus a colored glow ring behind every card's
   icon badge (kesp_card_accent() now gives every card its own inline
   gradient, see that function's docblock for the exam-series.php bug this
   also fixes) and a highlighted price "pill" instead of plain text. */
.k-examseries-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 16px; padding: 20px; box-shadow: 0 14px 34px -22px rgba(16,36,43,.28); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; }
.k-examseries-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--k-primary), var(--k-accent, var(--k-primary))); opacity: .85; }
.k-examseries-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -18px rgba(16,36,43,.32); border-color: transparent; }
.k-examseries-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* Round 208: per-category gradient + shadow set inline (style="background:...; box-shadow:...")
   replaces the single flat --k-teal-50 every card previously shared; follow-up
   round made this a PER-CARD gradient (kesp_card_accent()) for real color
   variety instead of one hue repeated across a whole category's cards. */
.k-examseries-card-head .ico { position: relative; width: 46px; height: 46px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; transition: transform .2s ease; }
.k-examseries-card-head .ico::after { content: ''; position: absolute; inset: -5px; z-index: -1; border-radius: 16px; background: inherit; opacity: .22; filter: blur(7px); }
.k-examseries-card:hover .k-examseries-card-head .ico { transform: scale(1.08) rotate(-4deg); }
.k-examseries-card-head .go { width: 32px; height: 32px; border-radius: 50%; background: var(--k-gray-50); color: var(--k-gray-400); display: flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none; }
.k-examseries-card h3 { font-size: 15.5px; font-weight: 800; margin: 0 0 6px; }
.k-examseries-card h3 a { color: var(--k-ink); text-decoration: none; }
.k-examseries-card > p { font-size: 12px; color: var(--k-gray-500); line-height: 1.55; margin: 0 0 12px; }
.k-examseries-checklist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.k-examseries-checklist li { font-size: 12px; font-weight: 600; color: var(--k-gray-700); display: flex; align-items: center; gap: 8px; }
.k-examseries-checklist i { color: #fff; background: var(--k-success); border-radius: 50%; width: 15px; height: 15px; font-size: 8.5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.k-examseries-meta { display: flex; gap: 16px; padding-top: 12px; border-top: 1px dashed var(--k-gray-100); margin-bottom: 12px; }
.k-examseries-meta span { font-size: 11.5px; color: var(--k-gray-500); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.k-examseries-price-row { margin-bottom: 4px; background: linear-gradient(135deg, var(--k-gray-50), #fff); border: 1px solid var(--k-gray-100); border-radius: 10px; padding: 10px 14px; }
.k-examseries-price-row s { color: var(--k-gray-400); font-size: 12.5px; margin-right: 6px; }
.k-examseries-price-row strong { font-size: 20px; color: var(--k-ink); }
.k-examseries-cta-row { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }

/* ================= Practice Tests page (backlog item #3 —
   frontend/practice-tests.php): dark gradient hero + floating stat card,
   filter-pill strip, filter/sort bar, colorful test-card grid, and the new
   light kesp_render_practice_sidebar() column (a separate, deliberately
   distinct component from the dark .k-examnav-sidebar exam-domain.php /
   exam-series.php already use — see the function's own doc comment in
   frontend/includes/exam-helpers.php for why). ================= */
.k-practicehero { background: linear-gradient(120deg, #0a1c33 0%, #1e3a6f 55%, #3949ab 100%); border-radius: 0 0 28px 28px; padding-bottom: 40px; }
.k-practicehero .k-pagehero-title, .k-practicehero .k-pagehero-desc { color: #fff; }
.k-practicehero .k-pagehero-title .accent { color: #60a5fa; }
.k-practicehero .k-pagehero-desc { color: rgba(255,255,255,.8); }
.k-practicehero-kicker { display: inline-flex; align-items: center; gap: 8px; background: rgba(124,58,237,.35); border: 1px solid rgba(196,181,253,.4); color: #ede9fe; font-size: 11.5px; font-weight: 800; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.k-practicehero .k-hub-breadcrumb2 a, .k-practicehero .k-hub-breadcrumb2 .current { color: rgba(255,255,255,.7); }
.k-practicehero .k-hub-breadcrumb2 .current { color: #fff; }
.k-practicehero-features { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }
.k-practicehero-features > div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: #fff; }
.k-practicehero-features .ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex-shrink: 0; }
.k-practicehero .k-pagehero-art { position: relative; padding-top: 30px; }
.k-practicehero .k-pagehero-tag { color: #7dd3fc; top: -6px; right: 14px; text-shadow: 0 2px 10px rgba(10,20,50,.4); }
.k-practicehero-art-panel { background: rgba(255,255,255,.08); border-radius: 20px; padding: 14px; }
.k-practicehero-statcard { position: absolute; right: 6px; bottom: -20px; background: #fff; border-radius: 16px; box-shadow: 0 20px 45px -18px rgba(10,20,50,.5); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 168px; }
.k-practicehero-statcard > div { display: flex; align-items: center; gap: 10px; }
.k-practicehero-statcard .ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.k-practicehero-statcard strong { display: block; font-size: 14px; color: var(--k-ink); line-height: 1.2; }
.k-practicehero-statcard span { font-size: 10.5px; color: var(--k-gray-500); font-weight: 700; }
@media (max-width: 900px) { .k-practicehero-statcard { position: static; margin-top: 14px; } }

.k-practice-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.k-practice-pill { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--k-gray-200); color: var(--k-gray-600); font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; text-decoration: none; transition: all .15s ease; }
.k-practice-pill span { opacity: .7; font-weight: 600; }
.k-practice-pill:hover { border-color: var(--k-primary); color: var(--k-primary); }
.k-practice-pill.active { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.k-practice-pill.active span { opacity: .85; color: #fff; }

.k-practice-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 14px; padding: 14px 16px; margin-bottom: 22px; }
.k-practice-filters-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--k-gray-600); }
.k-practice-filters select { padding: 8px 12px; border-radius: 9px; border: 1px solid var(--k-gray-200); font-size: 12.5px; font-weight: 600; color: var(--k-gray-700); background: #fff; }
.k-practice-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--k-gray-200); border-radius: 9px; padding: 8px 12px; flex: 1; min-width: 180px; }
.k-practice-search i { color: var(--k-gray-400); font-size: 12px; }
.k-practice-search input { border: none; outline: none; font-size: 12.5px; width: 100%; }
.k-practice-viewtoggle { display: flex; gap: 4px; background: var(--k-gray-50); border-radius: 9px; padding: 3px; }
.k-practice-viewtoggle a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--k-gray-500); text-decoration: none; }
.k-practice-viewtoggle a.active { background: #fff; color: var(--k-primary); box-shadow: var(--k-shadow-sm); }

.k-practice-heading-row { margin-bottom: 16px; }
.k-practice-heading-row h2 { font-size: 18px; font-weight: 800; color: var(--k-ink); margin: 0; }
.k-practice-heading-row h2 span { font-weight: 600; color: var(--k-gray-400); font-size: 14px; }

.k-practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.k-practice-grid-list { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .k-practice-grid:not(.k-practice-grid-list) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .k-practice-grid:not(.k-practice-grid-list) { grid-template-columns: 1fr; } }

.k-practice-card { position: relative; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 10px 30px -22px rgba(16,36,43,.18); transition: transform .18s ease, box-shadow .18s ease; }
.k-practice-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
/* Same-session-only visual "save for later" toggle (see frontend.js) — not
   backed by any wishlist table, so it's deliberately understated (a plain
   gray outline icon) rather than looking like a persisted account feature. */
.k-practice-card-bookmark { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--k-gray-100); background: #fff; color: var(--k-gray-400); display: flex; align-items: center; justify-content: center; font-size: 12.5px; cursor: pointer; padding: 0; transition: color .15s ease, border-color .15s ease; }
.k-practice-card-bookmark:hover { color: var(--k-gray-500); }
.k-practice-card-bookmark.active { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.k-practice-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; padding-right: 34px; }
.k-practice-card-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.k-practice-card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.k-practice-badge-free { background: #dcfce7; color: #16a34a; }
.k-practice-badge-premium { background: #fce7f3; color: #db2777; }
.k-practice-card h3 { font-size: 15px; font-weight: 800; color: var(--k-ink); margin: 0 0 6px; }
.k-practice-card > p { font-size: 12px; color: var(--k-gray-500); line-height: 1.55; margin: 0 0 14px; flex: 1; }
.k-practice-card-meta { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 12px; border-top: 1px dashed var(--k-gray-100); margin-bottom: 16px; }
.k-practice-card-meta span { font-size: 11.5px; color: var(--k-gray-500); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.k-practice-btn-locked { background: #fff; border: 1.5px solid #fecdd3; color: #db2777; }
.k-practice-btn-locked:hover { background: #fff1f2; color: #db2777; }

.k-practice-grid-list .k-practice-card { flex-direction: row; align-items: center; gap: 18px; }
.k-practice-grid-list .k-practice-card-top { flex-direction: column; align-items: center; margin: 0; gap: 8px; }
.k-practice-grid-list .k-practice-card-meta { border-top: none; padding-top: 0; margin-bottom: 0; }
.k-practice-grid-list .k-practice-card > p { margin-bottom: 0; }
.k-practice-grid-list .k-practice-card > a { width: auto; flex-shrink: 0; }
@media (max-width: 720px) { .k-practice-grid-list .k-practice-card { flex-direction: column; align-items: stretch; } }

.k-practice-featurestrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--k-gray-50); border-radius: 18px; padding: 22px; margin-top: 36px; }
.k-practice-featurestrip > div { display: flex; align-items: center; gap: 12px; }
.k-practice-featurestrip .ico { width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--k-primary); box-shadow: var(--k-shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.k-practice-featurestrip strong { display: block; font-size: 13px; color: var(--k-ink); }
.k-practice-featurestrip span { font-size: 11px; color: var(--k-gray-500); font-weight: 600; }
@media (max-width: 900px) { .k-practice-featurestrip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k-practice-featurestrip { grid-template-columns: 1fr; } }

/* ---- Courses hub (backlog item #5, front-end-first round) — colorful card
   grid, mirrors the Practice Tests card grid's overall shape (badges, free/
   premium pill, feature strip) with its own image-forward card layout. ---- */
.k-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .k-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .k-course-grid { grid-template-columns: 1fr; } }

/* preview162: --k-cc-a/--k-cc-b are set inline per card by
   kesp_render_course_card() from the course's real category accent — the
   top strip, hover glow and icon chip/CTA gradients all key off these two
   vars so the whole card reads as "this course's real category color"
   rather than a random rotation. Falls back to the site primary color when
   a card somehow renders the vars unset. */
.k-course-card { position: relative; background: #fff; border: 1px solid var(--k-gray-100); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: 0 10px 30px -22px rgba(16,36,43,.18); transition: transform .2s ease, box-shadow .2s ease; }
.k-course-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--k-cc-a, var(--k-primary)), var(--k-cc-b, var(--k-primary))); z-index: 2; }
.k-course-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -20px var(--k-cc-a, rgba(16,36,43,.35)); }
.k-course-card:hover .k-course-card-icochip { transform: scale(1.06); }
.k-course-card-top { position: relative; height: 160px; display: flex; align-items: center; justify-content: center; }
.k-course-card-top img { width: 100%; height: 100%; object-fit: cover; }
/* Solid gradient circular icon "chip" replacing the old bare floating
   glyph — sits on the tinted wash for image-less courses. */
.k-course-card-icochip { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; box-shadow: 0 12px 22px -8px rgba(16,36,43,.35); transition: transform .2s ease; }
.k-course-card-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.k-course-card-level { position: absolute; bottom: 12px; left: 12px; background: rgba(15,23,42,.72); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: capitalize; }
/* Real, persisted "save for later" heart (preview156) — bottom-right of the
   card image, mirroring .k-course-card-level's bottom-left placement.
   Distinct from .k-practice-card-bookmark: that one is a same-session-only
   visual toggle with no backing table; this one is a genuine AJAX-persisted
   course_wishlist row (see frontend.js's delegated .k-wishlist-btn handler). */
.k-wishlist-btn { position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--k-gray-400); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.12); transition: color .15s ease, transform .12s ease; }
.k-wishlist-btn:hover { color: #db2777; transform: scale(1.08); }
.k-wishlist-btn.active { color: #db2777; }
.k-wishlist-btn.active i { font-weight: 900; }
/* The course-detail buy-box's inline variant — a full-width outlined button
   with a text label, instead of the round overlay used on cards. */
.k-wishlist-btn-inline { position: static; width: 100%; height: auto; border-radius: 12px; border: 1.5px solid var(--k-gray-200); background: #fff; box-shadow: none; gap: 8px; font-size: 13px; font-weight: 700; padding: 11px; }
.k-wishlist-btn-inline:hover { transform: none; border-color: #fbcfe8; }
.k-wishlist-btn-inline.active { border-color: #fbcfe8; background: #fdf2f8; }
.k-course-card-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
/* preview162: promoted from plain uppercase text to a small tinted chip
   (background/color set inline per-card from the real category accent) so
   the category reads as a colorful tag, not a caption. */
.k-course-card-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 10px 4px 8px; border-radius: 999px; margin-bottom: 10px; width: fit-content; }
.k-course-card-body h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px; color: var(--k-ink); line-height: 1.35; }
.k-course-card-body p { font-size: 12.5px; color: var(--k-gray-500); line-height: 1.6; margin: 0 0 14px; flex: 1; }
.k-course-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--k-gray-500); font-weight: 600; margin-bottom: 14px; }
.k-course-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.k-course-card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--k-gray-100); padding-top: 14px; }
.k-course-card-price { font-weight: 800; color: var(--k-ink); font-size: 15px; }
.k-course-card-price small { font-weight: 600; color: var(--k-gray-400); text-decoration: line-through; margin-right: 6px; font-size: 12px; }
.k-course-card-price.free { color: #16a34a; }
/* preview162: a real filled pill button (gradient set inline per-card from
   the course's category accent) instead of plain colored link text — a
   clearer, more premium clickable affordance to match the rest of the
   card's "colorful" treatment. */
.k-course-card-cta { color: #fff; font-weight: 800; font-size: 11.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 8px 16px -8px rgba(16,36,43,.4); transition: transform .15s ease, box-shadow .15s ease; }
.k-course-card:hover .k-course-card-cta { transform: translateX(2px); box-shadow: 0 10px 20px -8px var(--k-cc-a, rgba(16,36,43,.5)); }

/* preview157 ("premium LMS visual overhaul"): colorful per-category icon
   pills for the Courses hub — each icon/gradient comes from the real,
   admin-editable exam_categories.icon/.color columns (see courses.php),
   same honesty-first convention as every other count pill in the app.
   preview162: roomier spacing + a colorful (not flat-ink) active state —
   --k-pill-a/--k-pill-b are set inline per pill by courses.php from the
   same real category accent driving the icon, so the active pill keeps
   that category's color instead of going generic dark. */
.k-course-catpills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.k-course-catpill { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--k-gray-200); color: var(--k-gray-700); font-size: 13px; font-weight: 700; padding: 8px 18px 8px 8px; border-radius: 999px; text-decoration: none; transition: all .18s ease; }
.k-course-catpill:hover { border-color: transparent; box-shadow: 0 8px 18px -8px var(--k-pill-a, rgba(16,36,43,.28)); transform: translateY(-2px); }
.k-course-catpill.active { background: linear-gradient(135deg, var(--k-pill-a, var(--k-ink, #0f172a)), var(--k-pill-b, var(--k-ink, #0f172a))); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -8px var(--k-pill-a, rgba(15,23,42,.45)); }
.k-course-catpill.active b { color: #fff; opacity: .85; }
.k-course-catpill-ico { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0; }
.k-course-catpill b { font-weight: 800; opacity: .6; margin-left: 1px; }

/* preview162 ("Filter bar & category pill spacing"): a courses-page-only
   modifier layered on top of the shared .k-practice-filters base (also used
   by practice-tests.php, which keeps its existing look) — roomier gap,
   softer rounded selects/search, and a touch more breathing room so the
   bar reads as its own polished panel rather than a cramped strip. */
.k-course-filters-v2.k-practice-filters { gap: 12px; padding: 16px 18px; border-radius: 16px; box-shadow: 0 8px 24px -18px rgba(16,36,43,.25); margin-bottom: 24px; }
.k-course-filters-v2.k-practice-filters select { padding: 9px 14px; border-radius: 999px; font-size: 13px; }
.k-course-filters-v2.k-practice-filters select:hover { border-color: var(--k-gray-300); }
.k-course-filters-v2 .k-practice-search { border-radius: 999px; }

/* Grid/list view toggle for the course card grid — same real cards either
   way, just a layout preference (remembered per-browser via localStorage,
   nothing server-side). */
.k-course-viewtoggle { display: inline-flex; gap: 4px; background: var(--k-gray-100); border-radius: 10px; padding: 4px; }
.k-course-viewtoggle button { width: 32px; height: 32px; border: none; background: transparent; border-radius: 7px; color: var(--k-gray-500); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.k-course-viewtoggle button.active { background: #fff; color: var(--k-primary); box-shadow: 0 2px 8px rgba(16,36,43,.12); }
.k-course-grid.k-course-grid--list { grid-template-columns: 1fr; }
.k-course-grid--list .k-course-card { flex-direction: row; }
.k-course-grid--list .k-course-card-top { width: 220px; height: auto; flex-shrink: 0; }
.k-course-grid--list .k-course-card-body { padding: 16px 20px; }
.k-course-grid--list .k-course-card-body p { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) {
  .k-course-grid--list .k-course-card { flex-direction: column; }
  .k-course-grid--list .k-course-card-top { width: 100%; height: 150px; }
}

/* Course detail page — main content + sticky buy-box aside, collapsing to a
   single column on tablet/mobile (a fixed 340px aside column never shrinks
   on its own, which overflowed the viewport below ~900px). */
.k-coursedetail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.k-coursedetail-learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
@media (max-width: 900px) {
  .k-coursedetail-layout { grid-template-columns: 1fr; }
  .k-coursedetail-layout aside .k-card { position: static !important; }
}
@media (max-width: 560px) { .k-coursedetail-learn-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .k-examdir-catlist-row small, .k-examdomain-stats { flex-wrap: wrap; }
  .k-examdomain-why, .k-examdomain-faculty-grid { grid-template-columns: 1fr; }
  .k-examdomain-quicklinks { grid-template-columns: 1fr; }
}

/* =====================================================================
   Round 215 — premium polish pass (Homepage / Exams / Exam Series).
   Every rule below fixes something visible on the live pages, measured
   from a full-resolution render of kcsa.in itself:
   - centered section heads ("How It Works", "Success Stories") were
     rendering RIGHT-aligned (column flex + the row's align-items:flex-end)
   - hero stats wrapped "95% Success Rate" onto its own line
   - 3 Popular Exams tiles (royal/gold/electric) had no icon badge at all
   - course card ribbons ("FREE" + "BESTSELLER") were drawn on top of
     each other
   - cards with different text lengths had their buttons at different
     heights (practice tests, exam series, exam categories)
   - Exams hero badges were cut off at the top of the banner
   - long category names in the Exams sidebar broke onto 3 lines
   - an empty "Quick Filters" heading with nothing under it
   - single-series categories stretched one card across the full page
   - the exam series hero text floated in the middle of the page
   ===================================================================== */

/* Section headings — one consistent, slightly larger premium scale */
.k-section-head-row.k-section-head-center { align-items: center; }
.k-section-head-row h2 { font-size: 26px; letter-spacing: -.02em; line-height: 1.2; }
.k-section-eyebrow { letter-spacing: .14em; }
.k-section-head-row .view-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(37,99,235,.07); transition: background .15s ease, gap .15s ease; }
.k-section-head-row .view-all:hover { text-decoration: none; background: rgba(37,99,235,.13); gap: 9px; }

/* Homepage hero — all four stats on one line on desktop */
@media (min-width: 1101px) {
  .k-hp1-hero-stats2 { flex-wrap: nowrap; gap: 18px 24px; }
  .k-hp1-hero-stats2 > div { flex-shrink: 0; }
}

/* Popular Exams tiles — the accents that had no badge colour */
.k-hp1-page .k-fc-royal    { --fc-bg: #2563eb; --fc-fg: #fff; }
.k-hp1-page .k-fc-gold     { --fc-bg: #d97706; --fc-fg: #fff; }
.k-hp1-page .k-fc-electric { --fc-bg: #0891b2; --fc-fg: #fff; }
.k-hp1-page .k-hp1-examtile .ico { background: linear-gradient(135deg, var(--fc-bg), color-mix(in srgb, var(--fc-bg) 70%, #000)); }

/* Course cards — ribbons side by side, never stacked on each other */
.k-course-card-badges { right: 12px; }
.k-course-card-badges .k-tile-badge { position: static; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* Equal-height cards — buttons/links always line up along the bottom */
.k-practice-card > .k-btn:last-child, .k-practice-card > a.k-btn-block { margin-top: auto; }
.k-practice-card > h3 { min-height: 2.7em; }
.k-hp1-pastel-card { display: flex; flex-direction: column; }
.k-hp1-pastel-card > .go, .k-hp1-pastel-card > a:last-child { margin-top: auto; }
.k-examseries-card .k-examseries-cta-row { margin-top: auto; }
.k-examdir-card2 { display: flex; flex-direction: column; }
.k-examdir-card2-body { flex: 1; display: flex; flex-direction: column; }
.k-examdir-card2-foot { margin-top: auto; }
.k-examdir-card2:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(16,36,43,.32); }

/* "We're Here to Help" — four contact buttons in a tidy 2 x 2 */
.k-hp1-needhelp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.k-hp1-needhelp-row .k-hp1-needhelp-btn { justify-content: flex-start; }

/* Exams hero — keep the floating feature badges fully inside the banner */
.k-examdir-hero .k-pagehero-art { min-height: 250px; }
.k-examdir-hero-badges { bottom: auto; top: 50%; transform: translateY(-50%); }

/* Exams sidebar — long names wrap neatly, count sits under the name */
.k-examdir-catlist-row > span:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 0; line-height: 1.25; }
.k-examdir-catlist-row > span:first-child > i { grid-row: span 2; }
.k-examdir-catlist-row > span:first-child > small { grid-column: 2; display: block; white-space: nowrap; font-size: 10.5px; margin-top: 1px; }
.k-hub2-filters-label:last-child { display: none; }

/* Explore by Goal — four across on desktop instead of 3 + 1 orphan */
@media (min-width: 1100px) { .k-goal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1099px) { .k-goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Exam Series directory — a lone series no longer stretches full width */
.k-examseries-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.k-examseries-card > .k-tile-badge { margin-bottom: 10px; }

/* Exam series detail hero — content aligned to the page column */
.k-single-hero-inner { width: 100%; }

/* Footer brand — logo above the name instead of a 4-line squeezed name */
.k-ftr2 .k-footer-grid > div:first-child > .k-brand { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.3; }
.k-ftr2 .k-footer-grid > div:first-child > .k-brand .k-brand-logo-img { background: #fff; padding: 6px 10px; border-radius: 10px; max-height: 52px; }

/* Exam Series directory — when a category has just one series, show it as
   a wide horizontal card (details | checklist | price + actions) instead
   of a narrow card next to a large empty gap. */
@media (min-width: 900px) {
  .k-examseries-grid > .k-examseries-card:only-child {
    grid-column: 1 / -1; display: grid; align-items: center; column-gap: 28px; row-gap: 4px; padding: 22px 26px;
    grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1fr) 300px;
    grid-template-areas: "ico title list price" "ico desc list price" "ico meta list cta";
  }
  .k-examseries-card:only-child > .k-examseries-card-head { grid-area: ico; align-self: start; margin: 0; }
  .k-examseries-card:only-child > .k-examseries-card-head .go { display: none; }
  .k-examseries-card:only-child > h3 { grid-area: title; margin: 0; }
  .k-examseries-card:only-child > p { grid-area: desc; margin: 0; }
  .k-examseries-card:only-child > .k-examseries-checklist { grid-area: list; margin: 0; padding-left: 24px; border-left: 1px dashed var(--k-gray-200); }
  .k-examseries-card:only-child > .k-examseries-meta { grid-area: meta; margin: 6px 0 0; border: 0; padding: 0; }
  .k-examseries-card:only-child > .k-examseries-price-row { grid-area: price; margin: 0; }
  .k-examseries-card:only-child > .k-examseries-cta-row { grid-area: cta; margin: 8px 0 0; }
  .k-examseries-card:only-child > .k-tile-badge { position: absolute !important; top: 12px; left: auto; right: 22px; width: max-content; margin: 0; z-index: 2; }
}