/* ============================================================
   auth-pages.css — Login, Signup, Forgot Password, Reset, Verify
   Palette: Navy Blue · Warm Orange · Fresh Green · White
   Shared header + footer components. Education-first design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

/* ── AdminLTE / style.css neutraliser ─────────────────────────
   header-base.php loads AdminLTE.css and style.css globally.
   These rules reset anything that bleeds into hn-body pages.
   ──────────────────────────────────────────────────────────── */
.hn-body {
  /* AdminLTE sets padding-top on body for its fixed navbar */
  padding-top: 0 !important;
  /* AdminLTE sets min-height: 100% which can collapse flex */
  min-height: 100vh !important;
}
/* AdminLTE wraps everything in .wrapper — not used here */
.hn-body .wrapper { display: contents; }
/* style.css sets .login-screen { margin-top: 80px } — not used in new design */
.hn-body .login-screen { margin-top: 0 !important; }
/* AdminLTE .content-wrapper has background and padding */
.hn-body .content-wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
}
/* Prevent AdminLTE sidebar from appearing */
.hn-body .main-sidebar,
.hn-body .left-side { display: none !important; }
/* AdminLTE sets .container max-width differently — let Bootstrap 5 handle it */
.hn-body .container { max-width: 1200px; }
/* Ensure au-main has no extra padding from AdminLTE */
.hn-body #auMain,
.hn-body .au-main {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --au-navy-900: #0a1628;
  --au-navy-800: #0d2045;
  --au-navy-700: #1a3a6b;
  --au-navy-600: #1e4d8c;
  --au-navy-500: #2563b0;
  --au-navy-400: #3b82d4;
  --au-navy-200: #bfdbfe;
  --au-navy-100: #dbeafe;
  --au-navy-50:  #eff6ff;

  --au-orange-600: #c2410c;
  --au-orange-500: #ea580c;
  --au-orange-400: #f97316;
  --au-orange-100: #ffedd5;
  --au-orange-50:  #fff7ed;

  --au-green-700: #15803d;
  --au-green-600: #16a34a;
  --au-green-500: #22c55e;
  --au-green-100: #dcfce7;
  --au-green-50:  #f0fdf4;

  --au-white:    #ffffff;
  --au-gray-50:  #f8fafc;
  --au-gray-100: #f1f5f9;
  --au-gray-200: #e2e8f0;
  --au-gray-300: #cbd5e1;
  --au-gray-400: #94a3b8;
  --au-gray-500: #64748b;
  --au-gray-600: #475569;
  --au-gray-700: #334155;
  --au-gray-800: #1e293b;

  --au-grad-navy:   linear-gradient(135deg, #1a3a6b 0%, #2563b0 100%);
  --au-grad-orange: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  --au-grad-green:  linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  --au-grad-hero:   linear-gradient(150deg, #0d2045 0%, #1a3a6b 45%, #2563b0 100%);
  --au-grad-footer: linear-gradient(160deg, #0d2045 0%, #1a3a6b 100%);

  --au-shadow-sm:    0 1px 4px rgba(37,99,176,.08);
  --au-shadow-md:    0 4px 16px rgba(37,99,176,.10), 0 1px 4px rgba(0,0,0,.04);
  --au-shadow-lg:    0 10px 32px rgba(37,99,176,.12), 0 4px 8px rgba(0,0,0,.05);
  --au-shadow-xl:    0 20px 48px rgba(37,99,176,.14), 0 8px 16px rgba(0,0,0,.06);
  --au-shadow-navy:  0 8px 24px rgba(37,99,176,.32);
  --au-shadow-orange:0 8px 24px rgba(234,88,12,.28);
  --au-shadow-green: 0 8px 24px rgba(22,163,74,.26);

  --au-r-sm:   6px;
  --au-r-md:   12px;
  --au-r-lg:   18px;
  --au-r-xl:   24px;
  --au-r-full: 9999px;

  --au-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --au-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --au-fast:   150ms;
  --au-normal: 250ms;
  --au-slow:   400ms;

  --au-header-h: 66px;
  --au-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --au-font-head: 'Poppins', 'Inter', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────── */
.au-body {
  font-family: var(--au-font);
  font-size: 15px;
  color: var(--au-gray-800);
  background: #f0f5ff;
  line-height: 1.6;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.au-body *, .au-body *::before, .au-body *::after { box-sizing: border-box; }
.au-main { flex: 1; display: flex; flex-direction: column; width: 100%; }
.hidden { display: none !important; }

/* ── Header ────────────────────────────────────────────────── */
.au-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--au-header-h);
  background: var(--au-white);
  border-bottom: 2px solid var(--au-navy-100);
  box-shadow: 0 2px 16px rgba(37,99,176,.09);
  transition: box-shadow var(--au-normal) var(--au-ease);
}
.au-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
}

/* Brand */
.au-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.au-brand-logo { height: 40px; width: auto; }
.au-brand-text-wrap { display: flex; flex-direction: column; }
.au-brand-name {
  font-family: var(--au-font-head);
  font-size: 20px; font-weight: 800; color: var(--au-navy-700);
  letter-spacing: -0.03em; line-height: 1.1;
}
/* Match the larger, consistent brand-name size used across all headers on mobile. */
@media (max-width: 767px) {
  .au-brand-name { font-size: 22px; }
}
.au-brand-sub {
  font-size: 10px; font-weight: 600; color: var(--au-orange-500);
  letter-spacing: 0.07em; text-transform: uppercase;
}

/* Nav */
.au-header-nav { display: flex; align-items: center; gap: 4px; }
.au-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--au-gray-600); text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 8px 12px;
  border-radius: var(--au-r-sm);
  transition: color var(--au-fast) var(--au-ease), background var(--au-fast) var(--au-ease);
}
.au-nav-link:hover { color: var(--au-navy-600); background: var(--au-navy-50); }
.au-nav-link i { font-size: 12px; }

/* Buttons */
.au-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--au-font); font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em; border: none; border-radius: var(--au-r-md);
  cursor: pointer; text-decoration: none; padding: 10px 20px; min-height: 44px;
  transition: transform var(--au-fast) var(--au-ease-bounce),
              box-shadow var(--au-fast) var(--au-ease),
              background var(--au-fast) var(--au-ease);
  white-space: nowrap;
}
.au-btn:focus-visible { outline: 2px solid var(--au-navy-500); outline-offset: 3px; }
.au-btn-primary { background: var(--au-grad-navy); color: #fff; box-shadow: var(--au-shadow-navy); }
.au-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,99,176,.38); color: #fff; text-decoration: none; }
.au-btn-outline {
  background: transparent; color: var(--au-navy-600);
  border: 1.5px solid var(--au-navy-300);
}
.au-btn-outline:hover { background: var(--au-navy-50); border-color: var(--au-navy-500); color: var(--au-navy-700); text-decoration: none; transform: translateY(-1px); }
.au-btn-orange { background: var(--au-grad-orange); color: #fff; box-shadow: var(--au-shadow-orange); }
.au-btn-orange:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(234,88,12,.38); color: #fff; text-decoration: none; }
.au-btn-green { background: var(--au-grad-green); color: #fff; box-shadow: var(--au-shadow-green); }
.au-btn-green:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,163,74,.38); color: #fff; text-decoration: none; }
.au-btn-submit {
  width: 100%; height: 50px; font-size: 15px; font-weight: 700;
  background: var(--au-grad-navy); color: #fff;
  border-radius: var(--au-r-md); box-shadow: var(--au-shadow-navy);
  margin-top: 4px;
}
.au-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,99,176,.42); color: #fff; }
.au-btn-submit.au-btn-green { background: var(--au-grad-green); box-shadow: var(--au-shadow-green); }
.au-btn-submit.au-btn-green:hover { box-shadow: 0 14px 32px rgba(22,163,74,.42); }
.au-btn-submit.au-btn-orange { background: var(--au-grad-orange); box-shadow: var(--au-shadow-orange); }
.au-btn-row { display: flex; gap: 12px; }
.au-btn-row .au-btn-submit { flex: 1; }

/* Hamburger */
.au-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; background: var(--au-navy-50);
  border: 1.5px solid var(--au-navy-200); border-radius: var(--au-r-sm);
  cursor: pointer; padding: 0;
  transition: background var(--au-fast) var(--au-ease);
}
.au-hamburger:hover { background: var(--au-navy-100); }
.au-hamburger span {
  display: block; width: 20px; height: 2px; background: var(--au-navy-700);
  border-radius: 2px;
  transition: transform var(--au-normal) var(--au-ease), opacity var(--au-normal) var(--au-ease);
}
.au-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.au-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.au-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.au-mobile-nav {
  display: none; flex-direction: column;
  background: var(--au-white);
  border-top: 1px solid var(--au-navy-100);
  border-bottom: 2px solid var(--au-navy-100);
  box-shadow: 0 8px 24px rgba(37,99,176,.10);
  padding: 10px 16px 14px;
  position: absolute; top: var(--au-header-h); left: 0; right: 0; z-index: 999;
}
.au-mobile-nav.open { display: flex; }
.au-mobile-nav-link {
  display: flex; align-items: center; gap: 8px;
  color: var(--au-gray-700); text-decoration: none;
  font-size: 15px; font-weight: 500; padding: 11px 12px;
  border-radius: var(--au-r-sm);
  transition: background var(--au-fast) var(--au-ease), color var(--au-fast) var(--au-ease);
}
.au-mobile-nav-link:hover { background: var(--au-navy-50); color: var(--au-navy-700); }
.au-mobile-nav-cta {
  background: var(--au-grad-orange); color: #fff !important;
  margin-top: 6px; justify-content: center; border-radius: var(--au-r-md);
}
.au-mobile-nav-cta:hover { opacity: .92; background: var(--au-grad-orange); }

/* ── Page layouts ──────────────────────────────────────────── */
.au-page {
  display: flex;
  width: 100%;
  /* padding-top and min-height set in homepage-new.css via .au-body .au-page */
  justify-content: center;
}

/* Split layout (login, signup) */
.au-page-login,
.au-page-signup {
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Left panel */
.au-split-left {
  flex: 1 1 0;          /* grow to fill all remaining space */
  min-width: 0;         /* allow shrinking below content size */
  background: var(--au-grad-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
}
/* Subtle pattern */
.au-split-left::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(249,115,22,.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(34,197,94,.08) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0%, transparent 60%);
}
/* Decorative ring */
.au-split-left::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 50%;
  top: -100px; right: -100px;
  pointer-events: none;
}
.au-split-left-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: 28px;
}

/* Right panel */
.au-split-right {
  flex: 0 0 42%;        /* fixed proportion — 42% of full width */
  max-width: 520px;     /* cap on very wide screens */
  min-width: 360px;     /* never collapse below usable width */
  background: var(--au-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 48px;
  overflow-y: auto;
}
.au-form-wrap {
  width: 100%;
  max-width: 420px;
}

/* Centered layout (forgot, reset, verify) */
.au-page-centered {
  align-items: center;
  justify-content: center;
  background: #f0f5ff;
  /* padding-top and min-height set in homepage-new.css */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.au-card-page {
  background: var(--au-white);
  border-radius: var(--au-r-xl);
  box-shadow: var(--au-shadow-xl);
  padding: 40px 40px 36px;
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--au-navy-100);
}

/* ── Form header ───────────────────────────────────────────── */
.au-form-header { text-align: center; margin-bottom: 28px; }
.au-form-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; margin: 0 auto 16px;
  background: var(--au-grad-navy); box-shadow: var(--au-shadow-navy);
}
.au-form-icon-green  { background: var(--au-grad-green);  box-shadow: var(--au-shadow-green); }
.au-form-icon-orange { background: var(--au-grad-orange); box-shadow: var(--au-shadow-orange); }
.au-form-icon-navy   { background: var(--au-grad-navy);   box-shadow: var(--au-shadow-navy); }
.au-form-title {
  font-family: var(--au-font-head);
  font-size: 24px; font-weight: 800; color: var(--au-navy-800);
  margin: 0 0 6px; letter-spacing: -0.02em;
}
.au-form-subtitle { font-size: 14px; color: var(--au-gray-500); margin: 0; }
.au-highlight { color: var(--au-navy-600); }

/* ── Form fields ───────────────────────────────────────────── */
.au-field { margin-bottom: 18px; }
.au-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--au-gray-600);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 7px;
}
.au-label i { font-size: 10px; color: var(--au-navy-500); }
.au-label-hint { font-size: 10px; font-weight: 400; color: var(--au-gray-400); letter-spacing: 0; text-transform: none; margin-left: 4px; }

.au-input {
  width: 100%; height: 48px; padding: 0 14px;
  font-family: var(--au-font); font-size: 15px; color: var(--au-gray-800);
  background: var(--au-gray-50); border: 1.5px solid var(--au-gray-200);
  border-radius: var(--au-r-md); outline: none;
  transition: border-color var(--au-fast) var(--au-ease),
              box-shadow var(--au-fast) var(--au-ease),
              background var(--au-fast) var(--au-ease);
  -webkit-appearance: none; appearance: none;
}
.au-input:hover:not(:focus) { border-color: var(--au-gray-300); }
.au-input:focus { background: #fff; border-color: var(--au-navy-500); box-shadow: 0 0 0 3px rgba(37,99,176,.13); }
.au-input.au-input-error   { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.au-input.au-input-success { border-color: var(--au-green-500); box-shadow: 0 0 0 3px rgba(34,197,94,.12); }

.au-input-group { position: relative; }
.au-input-group .au-input { padding-right: 48px; }
.au-input-action {
  position: absolute; right: 0; top: 0; width: 48px; height: 48px;
  background: none; border: none; cursor: pointer; color: var(--au-gray-400);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: color var(--au-fast) var(--au-ease);
}
.au-input-action:hover { color: var(--au-navy-500); }

.au-field-hint { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; }
.au-field-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 8px;
}

/* Checkbox */
.au-check-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--au-gray-600); cursor: pointer; user-select: none;
  line-height: 1.5;
}
.au-check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.au-check-box {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--au-gray-300); border-radius: 4px;
  background: var(--au-gray-50);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--au-fast) var(--au-ease), background var(--au-fast) var(--au-ease);
}
.au-check-input:checked + .au-check-box { background: var(--au-navy-500); border-color: var(--au-navy-500); }
.au-check-input:checked + .au-check-box::after {
  content: ''; display: block; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.au-check-input:focus-visible + .au-check-box { outline: 2px solid var(--au-navy-500); outline-offset: 2px; }

/* Links */
.au-link-primary { color: var(--au-navy-600); font-weight: 600; text-decoration: none; transition: color var(--au-fast) var(--au-ease); }
.au-link-primary:hover { color: var(--au-navy-800); }
.au-link-muted { font-size: 13px; color: var(--au-gray-400); text-decoration: none; transition: color var(--au-fast) var(--au-ease); }
.au-link-muted:hover { color: var(--au-navy-500); }
.au-link-info { color: var(--au-navy-500); font-size: 13px; text-decoration: none; transition: color var(--au-fast) var(--au-ease); }
.au-link-info:hover { color: var(--au-navy-700); }
.au-link-sep { color: var(--au-gray-300); margin: 0 4px; }

.au-form-alt-link { text-align: center; font-size: 13px; color: var(--au-gray-500); margin: 16px 0 0; }
.au-card-page-links { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }

/* Alert */
.au-alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 14px; border-radius: var(--au-r-sm);
  font-size: 13px; font-weight: 500; margin-bottom: 16px;
  border-left: 3px solid transparent;
}
.au-alert-warning { background: var(--au-orange-50); border-left-color: var(--au-orange-500); color: #9a3412; }
.au-alert i { flex-shrink: 0; margin-top: 1px; }

/* Countdown */
.au-countdown {
  padding: 12px 14px; border-radius: var(--au-r-sm);
  font-size: 13px; font-weight: 600; margin-bottom: 14px;
  background: var(--au-navy-50); color: var(--au-navy-700);
  border-left: 3px solid var(--au-navy-400);
}
.au-countdown-warn { background: var(--au-orange-50); color: var(--au-orange-600); border-left-color: var(--au-orange-500); }

/* ── Left panel content ────────────────────────────────────── */
/* Illustration */
.au-illus { text-align: center; }
.au-illus-icon {
  font-size: 72px; color: rgba(255,255,255,.85);
  margin-bottom: 20px;
  animation: au-float 4s ease-in-out infinite;
}
@keyframes au-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.au-illus-title {
  font-family: var(--au-font-head);
  font-size: clamp(22px, 3vw, 32px); font-weight: 800;
  color: #fff; line-height: 1.2; margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.au-illus-title span { color: #fed7aa; }
.au-illus-sub { font-size: 15px; color: rgba(255,255,255,.70); line-height: 1.6; margin: 0; }
.au-illus-signup .au-illus-icon { font-size: 60px; }

/* Benefits list */
.au-benefits { display: flex; flex-direction: column; gap: 12px; }
.au-benefit-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.80); font-weight: 500;
}
.au-benefit-icon { color: var(--au-green-400); font-size: 16px; flex-shrink: 0; }

/* Stats row */
.au-stats-row {
  display: flex; align-items: center;
  background: rgba(255,255,255,.10); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--au-r-lg); padding: 16px 24px;
}
.au-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.au-stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.18); }
.au-stat-num { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.au-stat-label { font-size: 11px; color: rgba(255,255,255,.60); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; }

/* Carousel on login left panel */
.au-carousel {
  position: relative; border-radius: var(--au-r-xl);
  overflow: hidden; box-shadow: var(--au-shadow-xl);
  aspect-ratio: 16/9;
  border: 2px solid rgba(255,255,255,.12);
}
.au-carousel-track { position: relative; width: 100%; height: 100%; }
.au-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--au-slow) var(--au-ease); pointer-events: none; }
.au-carousel-slide.active { opacity: 1; pointer-events: auto; }
.au-carousel-slide a { display: block; width: 100%; height: 100%; }
.au-carousel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-carousel-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 20px 16px;
  background: linear-gradient(to top, rgba(10,22,40,.75), transparent);
  color: #fff; font-size: 15px; font-weight: 600;
}
.au-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%; color: #fff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--au-fast) var(--au-ease), transform var(--au-fast) var(--au-ease-bounce);
  z-index: 2;
}
.au-carousel-btn:hover { background: rgba(255,255,255,.32); transform: translateY(-50%) scale(1.1); }
.au-carousel-prev { left: 10px; }
.au-carousel-next { right: 10px; }
.au-carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.au-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.40); border: none; cursor: pointer; padding: 0;
  transition: background var(--au-fast) var(--au-ease), width var(--au-normal) var(--au-ease);
}
.au-carousel-dot.active { background: #fff; width: 22px; border-radius: 4px; }

/* ============================================================
   Signup
   ------------------------------------------------------------
   The form is one POST shown as two steps (auth-pages.js). Same
   tokens as the rest of the auth pages — this is the existing
   vocabulary executed harder, not a second design language.
   ============================================================ */

/* ── Left panel ────────────────────────────────────────────── */
.au-signup-brief { display: flex; flex-direction: column; align-items: flex-start; }
.au-signup-kicker {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fed7aa;
  background: rgba(249,115,22,.16); border: 1px solid rgba(249,115,22,.32);
  padding: 6px 14px; border-radius: var(--au-r-full); margin-bottom: 20px;
}
.au-signup-lede {
  font-family: var(--au-font-head);
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 800;
  color: #fff; line-height: 1.14; letter-spacing: -.025em; margin: 0 0 14px;
}
.au-signup-lede span { display: block; color: #fed7aa; }
.au-signup-lede-sub {
  font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.72);
  margin: 0; max-width: 42ch;
}

/* Benefits — a chip per row rather than a column of identical ticks. */
.au-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.au-benefit-item {
  display: flex; align-items: center; gap: 13px;
  font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.86); font-weight: 500;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--au-r-md);
  padding: 12px 14px;
}
.au-benefit-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--au-r-sm);
  background: rgba(255,255,255,.10);
  color: var(--au-green-400); font-size: 14px;
}

/* ── Step rail ─────────────────────────────────────────────── */
.au-steps {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; align-items: center; gap: 10px;
}
.au-step-pip { display: flex; align-items: center; gap: 9px; }
.au-step-pip-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  border: 1.5px solid var(--au-gray-300);
  background: var(--au-white);
  color: var(--au-gray-400);
  font-size: 12px; font-weight: 700;
  transition: background var(--au-normal) var(--au-ease),
              border-color var(--au-normal) var(--au-ease),
              color var(--au-normal) var(--au-ease);
}
.au-step-pip-label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--au-gray-400);
  transition: color var(--au-normal) var(--au-ease);
}
.au-step-pip.is-active .au-step-pip-mark {
  background: var(--au-grad-green); border-color: transparent; color: #fff;
}
.au-step-pip.is-active .au-step-pip-label { color: var(--au-gray-700); }
.au-step-pip.is-done .au-step-pip-mark {
  background: var(--au-green-50); border-color: var(--au-green-500); color: var(--au-green-700);
}
.au-step-pip.is-done .au-step-pip-label { color: var(--au-gray-600); }

.au-step-rail {
  flex: 1; height: 3px; min-width: 16px;
  border-radius: var(--au-r-full); background: var(--au-gray-200); overflow: hidden;
}
.au-step-rail-fill {
  display: block; height: 100%; width: 0;
  border-radius: var(--au-r-full); background: var(--au-grad-green);
  transition: width var(--au-slow) var(--au-ease);
}
.au-steps.is-step2 .au-step-rail-fill { width: 100%; }

/* ── Step panels ───────────────────────────────────────────── */
.au-step[hidden] { display: none; }
.au-step { animation: au-step-in var(--au-normal) var(--au-ease) both; }
@keyframes au-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.au-step-actions { display: flex; flex-direction: column; gap: 10px; }
.au-btn-ghost {
  background: transparent; color: var(--au-gray-500);
  border: 1.5px solid var(--au-gray-200);
  width: 100%; justify-content: center; min-height: 46px;
}
.au-btn-ghost:hover { background: var(--au-gray-50); color: var(--au-gray-700); text-decoration: none; }

/* ── Fields with a leading icon ────────────────────────────── */
.au-input-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--au-gray-400); font-size: 14px; pointer-events: none; z-index: 1;
  transition: color var(--au-fast) var(--au-ease);
}
.au-input-lead { padding-left: 42px; }
.au-input-group:focus-within .au-input-icon { color: var(--au-navy-500); }

.au-field-hint[hidden] { display: none; }

/* ── Password strength ─────────────────────────────────────
   Four segments read at a glance where one sliding bar did not.
   passStrength.js still drives the level; auth-pages.js mirrors the
   class it writes onto #idPasswordStrength into data-level here. */
.au-pass-strength { margin-top: 9px; display: flex; align-items: center; gap: 10px; }
.au-pass-strength-bar { flex: 1; display: flex; gap: 4px; }
.au-pass-seg {
  flex: 1; height: 5px; border-radius: var(--au-r-full);
  background: var(--au-gray-200);
  transition: background var(--au-normal) var(--au-ease);
}
.au-pass-strength-bar[data-level="1"] .au-pass-seg:nth-child(-n+1) { background: #ef4444; }
.au-pass-strength-bar[data-level="2"] .au-pass-seg:nth-child(-n+2) { background: var(--au-orange-400); }
.au-pass-strength-bar[data-level="3"] .au-pass-seg:nth-child(-n+3) { background: #f59e0b; }
.au-pass-strength-bar[data-level="4"] .au-pass-seg                 { background: var(--au-green-500); }
.au-pass-strength-text {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--au-gray-400); white-space: nowrap;
}
.au-pass-strength-bar[data-level="1"] ~ .au-pass-strength-text { color: #ef4444; }
.au-pass-strength-bar[data-level="2"] ~ .au-pass-strength-text { color: var(--au-orange-500); }
.au-pass-strength-bar[data-level="3"] ~ .au-pass-strength-text { color: #b45309; }
.au-pass-strength-bar[data-level="4"] ~ .au-pass-strength-text { color: var(--au-green-700); }

/* ── Confirm-password match ────────────────────────────────
   Replaces the pink/green background fill sign_up.js used to paint
   straight onto the input, which said nothing to a screen reader and
   read as an error state either way. */
.au-match-hint {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; font-size: 12px; font-weight: 600;
}
.au-match-hint[hidden] { display: none; }
.au-match-hint.is-ok  { color: var(--au-green-700); }
.au-match-hint.is-bad { color: #ef4444; }

/* ── Role selector ─────────────────────────────────────────── */
.au-role-selector { display: flex; gap: 10px; }
.au-role-option {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 10px; border-radius: var(--au-r-md);
  border: 1.5px solid var(--au-gray-200); background: var(--au-white);
  cursor: pointer;
  transition: border-color var(--au-fast) var(--au-ease),
              background var(--au-fast) var(--au-ease),
              box-shadow var(--au-fast) var(--au-ease);
}
.au-role-option:hover { border-color: var(--au-navy-300, #7eb3e8); }
.au-role-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.au-role-option.selected,
.au-role-option:has(input:checked) {
  border-color: var(--au-navy-500); background: var(--au-navy-50);
  box-shadow: 0 0 0 3px rgba(37,99,176,.12);
}
.au-role-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--au-r-md);
  background: var(--au-navy-50); color: var(--au-navy-500); font-size: 18px;
  transition: background var(--au-fast) var(--au-ease), color var(--au-fast) var(--au-ease);
}
.au-role-option.selected .au-role-icon,
.au-role-option:has(input:checked) .au-role-icon { background: var(--au-grad-navy); color: #fff; }
.au-role-label { font-size: 13px; font-weight: 700; color: var(--au-gray-700); text-align: center; }
.au-role-tick {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--au-navy-500); color: #fff; font-size: 9px;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--au-fast) var(--au-ease), transform var(--au-fast) var(--au-ease-bounce);
}
.au-role-option.selected .au-role-tick,
.au-role-option:has(input:checked) .au-role-tick { opacity: 1; transform: scale(1); }

/* ── Captcha ───────────────────────────────────────────────────
   One panel: the code, the way to get another one, and the box to type it
   into. They used to be three loose elements down the form — a small image,
   a bare icon button, and an input that looked like the next question rather
   than the answer to this one.

   The image is 320x96 (Classes/class.Captcha.php) and is drawn here at half
   that, so a phone has two device pixels per image pixel instead of enlarging
   70px of JPEG to 48px tall. */
.au-captcha {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin-bottom: 2px;
  border: 1.5px solid var(--au-gray-200); border-radius: var(--au-r-md);
  background: var(--au-gray-50);
}
.au-captcha-plate { display: flex; align-items: center; gap: 10px; }
.au-captcha-img {
  display: block; height: 56px; width: auto; max-width: 58%;
  border-radius: var(--au-r-sm);
  border: 1px solid var(--au-gray-200); background: var(--au-white);
  /* It is a puzzle, not a picture: nothing here should invite a drag or a
     long-press "copy image". */
  user-select: none; -webkit-user-drag: none;
}
.au-captcha-refresh {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 14px;
  background: var(--au-white);
  border: 1.5px solid var(--au-navy-200); border-radius: var(--au-r-sm);
  color: var(--au-navy-600);
  font-family: var(--au-font); font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background var(--au-fast) var(--au-ease),
              border-color var(--au-fast) var(--au-ease);
}
.au-captcha-refresh:hover { background: var(--au-navy-50); border-color: var(--au-navy-400); }
.au-captcha-refresh:focus-visible { outline: 2px solid var(--au-navy-500); outline-offset: 2px; }
/* One turn of the icon on press, so a new code that happens to look like the
   old one still reads as "that did something". */
.au-captcha-refresh.is-spinning i { animation: au-captcha-spin 500ms var(--au-ease); }
@keyframes au-captcha-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Six characters, spaced out, in the shape of the thing being copied. */
.au-captcha-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px; font-weight: 700;
  letter-spacing: .32em; text-indent: .32em;   /* the indent re-centres what the tracking pushes right */
  text-align: center; text-transform: uppercase;
  background: var(--au-white);
}
.au-captcha-input::placeholder {
  font-family: var(--au-font); font-size: 14px; font-weight: 500;
  letter-spacing: normal; text-transform: none; color: var(--au-gray-400);
}

/* Announced, not shown: the live region that tells a screen reader the picture
   changed under it. */
.au-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Target-exam picker (signup step 2) ────────────────────────
   Its own component rather than a borrowed .au-role-selector. That control is
   a two-up choice — one flex row, flex:1 per child, no wrap — so eight exams
   became eight eighths of a card and the last three left the page sideways.

   auto-fill + minmax means the column count follows the card's width instead
   of the number of exams: two up on a phone, three or four on a desktop card,
   and a ninth exam added to the catalogue changes nothing but the row count. */
.au-exam-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px; margin-top: 8px;
}
.au-exam-chip {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 9px 12px; margin: 0;
  border: 1.5px solid var(--au-gray-200); border-radius: var(--au-r-md);
  background: var(--au-white); cursor: pointer;
  transition: border-color var(--au-fast) var(--au-ease),
              background var(--au-fast) var(--au-ease),
              box-shadow var(--au-fast) var(--au-ease);
}
.au-exam-chip input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.au-exam-chip:hover { border-color: var(--au-gray-300); background: var(--au-gray-50); }
.au-exam-chip-mark {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--au-gray-300); background: var(--au-white);
  position: relative;
  transition: border-color var(--au-fast) var(--au-ease),
              background var(--au-fast) var(--au-ease);
}
.au-exam-chip-mark::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--au-white); opacity: 0; transform: scale(.4);
  transition: opacity var(--au-fast) var(--au-ease),
              transform var(--au-fast) var(--au-ease-bounce);
}
.au-exam-chip-name {
  font-family: var(--au-font); font-size: 13.5px; font-weight: 600;
  line-height: 1.25; color: var(--au-gray-700);
  /* A long name wraps inside its own tile; it never widens the grid. */
  overflow-wrap: anywhere;
}

/* Selected. .is-selected is what auth-pages.js sets; :has() keeps the state
   right if the stylesheet arrives before the script does. Both are listed
   because neither alone covers every browser this page still meets. */
.au-exam-chip.is-selected,
.au-exam-chip:has(input:checked) {
  border-color: var(--au-green-500);
  background: var(--au-green-50);
  box-shadow: inset 0 0 0 1px var(--au-green-500);
}
.au-exam-chip.is-selected .au-exam-chip-mark,
.au-exam-chip:has(input:checked) .au-exam-chip-mark {
  border-color: var(--au-green-500); background: var(--au-green-500);
}
.au-exam-chip.is-selected .au-exam-chip-mark::after,
.au-exam-chip:has(input:checked) .au-exam-chip-mark::after { opacity: 1; transform: scale(1); }
.au-exam-chip.is-selected .au-exam-chip-name,
.au-exam-chip:has(input:checked) .au-exam-chip-name { color: var(--au-green-700); }

/* Keyboard: the radio is invisible, so the ring has to be drawn on the tile. */
.au-exam-chip:focus-within { outline: 2px solid var(--au-navy-500); outline-offset: 2px; }

/* "Not sure yet" is the default, and it is not an answer — so when it is the
   one selected the tile goes grey rather than wearing the brand colour, which
   would claim a choice nobody made. */
.au-exam-chip-skip.is-selected,
.au-exam-chip-skip:has(input:checked) {
  border-color: var(--au-gray-300); background: var(--au-gray-100);
  box-shadow: none;
}
.au-exam-chip-skip.is-selected .au-exam-chip-mark,
.au-exam-chip-skip:has(input:checked) .au-exam-chip-mark {
  border-color: var(--au-gray-400); background: var(--au-gray-400);
}
.au-exam-chip-skip.is-selected .au-exam-chip-name,
.au-exam-chip-skip:has(input:checked) .au-exam-chip-name { color: var(--au-gray-600); }

/* "Not sure yet" answers the whole question rather than being one more exam, so
   it takes the full row instead of sitting in the grid as a ninth tile — which
   also spares the last row its ragged single-tile gap. */
.au-exam-chip-skip { grid-column: 1 / -1; }

/* The note explains the question, so it sits under the label and above the
   choices rather than after them. */
.au-field-note-lead { margin: 2px 0 0; }

/* Under about 380px the button's label and the picture start fighting for the
   same row. The icon and its aria-label say the same thing in less space. */
@media (max-width: 400px) {
  .au-captcha-img { max-width: 52%; height: 50px; }
  .au-captcha-refresh { padding: 0 12px; }
  .au-captcha-refresh-text { display: none; }
  /* Two tiles still fit here; what stops fitting is the longest exam name inside
     one, and a name broken mid-word ("Agniveervay / u") reads worse than a name
     set a point smaller. */
  .au-exam-picker { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 7px; }
  .au-exam-chip { padding: 8px 10px; gap: 8px; }
  .au-exam-chip-name { font-size: 12.5px; }
}

/* ── Consent ───────────────────────────────────────────────── */
.au-consent {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 15px; margin-bottom: 20px;
  border: 1px solid var(--au-gray-200); border-radius: var(--au-r-md);
  background: var(--au-gray-50);
}

/* ── Success ───────────────────────────────────────────────── */
.au-success { text-align: center; padding: 8px 0 4px; }
.au-success-mark {
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--au-grad-green); color: #fff; font-size: 25px;
  box-shadow: var(--au-shadow-green);
}
.au-success-title {
  font-family: var(--au-font-head);
  font-size: 22px; font-weight: 800; color: var(--au-navy-800);
  margin: 0 0 6px; letter-spacing: -.02em;
}
.au-success-sub { font-size: 14px; color: var(--au-gray-500); margin: 0 0 18px; }
.au-success-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Footer ────────────────────────────────────────────────── */
.au-footer {
  background: var(--au-grad-footer);
  color: rgba(255,255,255,.65);
  flex-shrink: 0;
}
.au-footer-inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px 20px; }
.au-footer-links-row {
  display: flex; gap: 40px; flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 16px;
}
.au-footer-links-group { display: flex; flex-direction: column; gap: 6px; }
.au-footer-links-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--au-orange-300); margin-bottom: 4px;
}
.au-footer-link {
  font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none;
  transition: color var(--au-fast) var(--au-ease);
}
.au-footer-link:hover { color: #fff; }
.au-footer-lang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.au-footer-lang-label { font-size: 12px; color: rgba(255,255,255,.45); }
.au-footer-lang-link {
  font-size: 12px; color: rgba(255,255,255,.55); text-decoration: none;
  padding: 2px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--au-r-full);
  transition: background var(--au-fast) var(--au-ease), color var(--au-fast) var(--au-ease);
}
.au-footer-lang-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.au-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.au-footer-copy { font-size: 12px; color: rgba(255,255,255,.40); margin: 0; }
.au-footer-copy a { color: rgba(255,255,255,.55); text-decoration: none; transition: color var(--au-fast) var(--au-ease); }
.au-footer-copy a:hover { color: #fff; }
.au-footer-powered { font-size: 12px; color: rgba(255,255,255,.40); margin: 0; }
.au-footer-powered a { color: var(--au-orange-300); text-decoration: none; font-weight: 600; transition: color var(--au-fast) var(--au-ease); }
.au-footer-powered a:hover { color: var(--au-orange-400); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .au-split-right { flex: 0 0 46%; max-width: 460px; padding: 32px 32px; }
}

@media (max-width: 767px) {
  :root { --au-header-h: 60px; }
  .au-header-inner { padding: 0 16px; }
  .au-header-nav { display: none; }
  .au-hamburger { display: flex; }

  /* Stack split layout */
  .au-page-login,
  .au-page-signup { 
    flex-direction: column;
    padding: 0 16px;
  }

  /* `flex: 1 1 0` is a width rule while the panels sit side by side; once the
     layout stacks it becomes a *height* rule, and the panel collapsed to
     whatever vertical space the form left over — with overflow:hidden cutting
     the benefits off mid-item. Size to content instead. */
  .au-split-left { padding: 32px 20px; order: 2; flex: 0 0 auto; }
  .au-split-left-inner { max-width: 100%; gap: 22px; }
  .au-split-right { flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; order: 1; padding: 28px 20px; }
  .au-form-wrap { max-width: 100%; }

  /* Signup left panel */
  .au-signup-lede { font-size: clamp(23px, 6.4vw, 30px); }
  .au-signup-lede-sub { font-size: 14.5px; }
  .au-benefit-item { font-size: 13.5px; padding: 11px 12px; gap: 11px; }
  .au-benefit-icon { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; }

  /* Step rail: the labels are what make it a rail rather than two dots. */
  .au-steps { margin-bottom: 20px; gap: 8px; }
  .au-step-pip-label { font-size: 11.5px; }
  .au-step-pip-mark { width: 26px; height: 26px; flex-basis: 26px; }

  /* Centered pages */
  .au-page-centered { padding: 24px 16px 32px; }
  .au-card-page { padding: 28px 20px 24px; }

  /* Inputs larger for touch */
  .au-input { height: 50px; font-size: 16px; }
  .au-btn-submit { height: 52px; font-size: 16px; }
  .au-input-action { height: 50px; }

  /* Stats */
  .au-stats-row { padding: 14px 16px; }
  .au-stat-num { font-size: 18px; }

  /* Role selector */
  .au-role-selector { gap: 8px; }
  .au-role-option { padding: 12px 8px; }
  .au-role-icon { font-size: 20px; }

  /* Footer */
  .au-footer-links-row { gap: 24px; }
  .au-footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Btn row */
  .au-btn-row { flex-direction: column; }
}

/* ── Auth form header on a phone ───────────────────────────────
   Mark beside the heading instead of a centred stack over left-aligned fields.
   Grid, so every auth view keeps its markup as it is — all of them are icon,
   title, subtitle, in that order, with no other children.

   Placed after the block above on purpose: it ties with it on specificity and
   has to win on order.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .au-form-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon sub";
    align-items: center;
    column-gap: 12px;
    text-align: left;
    margin-bottom: 22px;
  }
  .au-form-icon {
    grid-area: icon;
    width: 44px; height: 44px; font-size: 18px; margin: 0;
  }
  .au-form-title { grid-area: title; font-size: 20px; margin: 0; line-height: 1.25; }
  .au-form-subtitle { grid-area: sub; font-size: 13px; margin: 3px 0 0; line-height: 1.45; }
}

@media (max-width: 400px) {
  .au-card-page { padding: 22px 16px 20px; }
  .au-form-title { font-size: 20px; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .au-illus-icon { animation: none; }
  .au-btn:hover { transform: none; }
}

/* ── Auth layout uses hn-navbar — padding handled in homepage-new.css ── */
/* All .au-body layout fixes are consolidated in homepage-new.css
   (loaded before auth-pages.css) to avoid duplication. */

/* ============================================================
   OUTER PAGES — /contactUs, /ongoingExams/, /examPackages/
   Follows the homepage-new design system (hn-* tokens)
   ============================================================ */

/* ── Page Hero ─────────────────────────────────────────────── */
.hn-outer-hero {
  position: relative;
  background: linear-gradient(135deg, #060d1f 0%, #0d1f45 40%, #0f2d5e 70%, #0a1a3a 100%);
  padding-top: calc(var(--hn-navbar-h, 68px) + 48px);
  padding-bottom: 56px;
  overflow: hidden;
}
.hn-outer-hero--compact {
  padding-top: calc(var(--hn-navbar-h, 68px) + 36px);
  padding-bottom: 44px;
}

/* Orbs */
.hn-outer-hero-orb {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(70px);
}
.hn-outer-hero-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,176,.40) 0%, transparent 70%);
  top: -120px; left: -80px;
}
.hn-outer-hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(234,88,12,.25) 0%, transparent 70%);
  bottom: -80px; right: -60px;
}

.hn-outer-hero-inner {
  position: relative; z-index: 1;
  max-width: 640px;
}
.hn-outer-hero-inner--center {
  margin: 0 auto; text-align: center;
}

/* Badge */
.hn-outer-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(249,115,22,.15);
  border: 1px solid rgba(249,115,22,.30);
  color: #fed7aa;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--hn-r-full, 9999px);
  margin-bottom: 18px;
}
.hn-outer-hero-badge--purple {
  background: rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.30);
  color: #ddd6fe;
}
.hn-outer-hero-badge--green {
  background: rgba(22,163,74,.15);
  border-color: rgba(22,163,74,.30);
  color: #bbf7d0;
}
.hn-outer-hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hn-orange-400, #f97316);
  box-shadow: 0 0 8px rgba(249,115,22,.8);
  animation: hn-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Title */
.hn-outer-hero-title {
  font-family: var(--hn-font-head, 'Poppins', sans-serif);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800; color: #fff;
  line-height: 1.12; letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.hn-outer-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.65);
  line-height: 1.7; margin: 0 0 28px; max-width: 520px;
}
.hn-outer-hero-inner--center .hn-outer-hero-sub { margin-left: auto; margin-right: auto; }

/* CTA row */
.hn-outer-hero-cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* Ghost button (white outline) */
.hn-btn-ghost {
  background: transparent; color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.30);
  border-radius: var(--hn-r-md, 12px);
  padding: 10px 20px; min-height: 44px;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.hn-btn-ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.55);
  color: #fff; text-decoration: none; transform: translateY(-1px);
}

/* ── Content area ──────────────────────────────────────────── */
.hn-outer-content {
  background: var(--hn-bg, #f0f5ff);
  padding: 52px 0 72px;
}

/* ── The floor this band does not own ─────────────────────────────────────────
   A SIGNED-OUT READER IN THE ANDROID APP GETS THIS LAYOUT, and Views/Layouts/auth.php
   draws no footer inside the app — so whatever the view ends on is the last thing in
   the document. On /kids/ that is the sign-up bar, and the app's floating tab bar sat
   on top of it with nothing left to scroll: the page's only route to an account was
   behind the navigation.

   Nothing here is position: fixed, so the pinning scan in qa_app_floor_clearance.php
   never saw it. It is the other shape that file knows about — a page that simply ENDS
   at the floor — and the same one the public homepage had.

   ON THE BAND, NOT ON #auMain. Padding the layout's <main> would reserve the strip
   OUTSIDE this band, so the page would finish with a strip of --hn-bg below its own
   tinted ground: sand on /kids/, a seam anywhere the two differ. Inside the band, the
   band's background runs under the bar, which is what the homepage's ::after spacer is
   doing for the same reason.

   Ten views share this band, so all ten are fixed at once — the four info pages and the
   whole public catalogue had it too.

   The CHECKOUT is excluded because it already reserves the floor a different way
   ( body.co-layout.hn-body #auMain, further down this file ), and two reserves would
   leave a bar's worth of blank paper under a payment page.

   --oe-floor is declared on <body> by Include/inc_app_shell_head.php and only inside the
   app; in every browser this computes to the 72px it has always been. */
.hn-app-shell:not(.co-layout) .hn-outer-content {
  padding-bottom: calc(72px + var(--oe-floor, 0px));
}

.hn-outer-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px; gap: 16px;
}

/* ── Tile wrapper — override old Bootstrap box styles ──────── */
.hn-outer-tiles-wrap .box {
  background: var(--hn-white, #fff);
  border-radius: var(--hn-r-lg, 18px) !important;
  box-shadow: 0 4px 16px rgba(37,99,176,.10), 0 1px 4px rgba(0,0,0,.04);
  border: 1px solid var(--hn-gray-100, #f1f5f9) !important;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  margin-bottom: 22px;
}
.hn-outer-tiles-wrap .box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(37,99,176,.14), 0 4px 12px rgba(0,0,0,.06);
  border-color: var(--hn-navy-100, #dbeafe) !important;
}
.hn-outer-tiles-wrap .box-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hn-gray-100, #f1f5f9) !important;
  padding: 14px 18px 12px !important;
  position: relative;
}
/* Accent bar on top of each card */
.hn-outer-tiles-wrap .box-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1a3a6b, #2563b0);
}
.hn-outer-tiles-wrap .box-info .box-header::before {
  background: linear-gradient(90deg, #2563b0, #3b82d4);
}
.hn-outer-tiles-wrap .box-success .box-header::before {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.hn-outer-tiles-wrap .box-title {
  font-family: var(--hn-font-head, 'Poppins', sans-serif) !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--hn-navy-800, #0d2045) !important;
  line-height: 1.4 !important;
}
.hn-outer-tiles-wrap .box-body {
  padding: 14px 18px !important;
  font-size: 13px; color: var(--hn-gray-600, #475569);
  line-height: 1.6;
}
.hn-outer-tiles-wrap .box-body p,
.hn-outer-tiles-wrap .box-body div {
  margin-bottom: 6px; color: var(--hn-gray-600, #475569); font-size: 13px;
}
.hn-outer-tiles-wrap .box-body b { color: var(--hn-navy-700, #1a3a6b); }
.hn-outer-tiles-wrap .box-footer {
  background: var(--hn-gray-50, #f8fafc) !important;
  border-top: 1px solid var(--hn-gray-100, #f1f5f9) !important;
  padding: 12px 18px !important;
}
/* Override old btn-warning with new design */
.hn-outer-tiles-wrap .btn.btn-warning,
.hn-outer-tiles-wrap .btn.header-c-btn {
  background: linear-gradient(135deg, #ea580c, #f97316) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--hn-r-sm, 6px) !important;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: 0 4px 12px rgba(234,88,12,.25) !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
.hn-outer-tiles-wrap .btn.btn-warning:hover,
.hn-outer-tiles-wrap .btn.header-c-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(234,88,12,.35) !important;
}
/* Package image */
.hn-outer-tiles-wrap .img-responsive {
  width: 100%; height: 160px; object-fit: cover; display: block;
}

/* ── CTA bar at bottom of listing pages ────────────────────── */
.hn-outer-cta-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--hn-white, #fff);
  border-radius: var(--hn-r-lg, 18px);
  border: 1px solid var(--hn-gray-100, #f1f5f9);
  box-shadow: 0 4px 16px rgba(37,99,176,.08);
}
.hn-outer-cta-note {
  font-size: 14px; color: var(--hn-gray-600, #475569);
  margin: 0; line-height: 1.6;
}
.hn-outer-cta-note i { color: var(--hn-navy-400, #3b82d4); margin-right: 4px; }

/* ── Contact Us card ───────────────────────────────────────── */
.hn-outer-content-card {
  background: var(--hn-white, #fff);
  border-radius: var(--hn-r-xl, 24px);
  box-shadow: 0 8px 32px rgba(37,99,176,.10), 0 2px 8px rgba(0,0,0,.04);
  border: 1px solid var(--hn-gray-100, #f1f5f9);
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
}
.hn-outer-card-header {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--hn-gray-100, #f1f5f9);
  background: linear-gradient(135deg, var(--hn-navy-50, #eff6ff), #fff);
}
.hn-outer-card-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: linear-gradient(135deg, #1a3a6b, #2563b0);
  border-radius: var(--hn-r-md, 12px);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,176,.30);
}
.hn-outer-card-title {
  font-family: var(--hn-font-head, 'Poppins', sans-serif);
  font-size: 20px; font-weight: 800; color: var(--hn-navy-800, #0d2045);
  margin: 0 0 3px; letter-spacing: -0.02em;
}
.hn-outer-card-subtitle {
  font-size: 13px; color: var(--hn-gray-500, #64748b); margin: 0;
}
.hn-outer-card-body {
  padding: 28px 32px;
}
.hn-outer-card-footer {
  padding: 16px 32px 24px;
  border-top: 1px solid var(--hn-gray-100, #f1f5f9);
  background: var(--hn-gray-50, #f8fafc);
}

/* Prose styles for policy/contact content */
.hn-prose { font-size: 15px; color: var(--hn-gray-700, #334155); line-height: 1.75; }
.hn-prose h1, .hn-prose h2, .hn-prose h3, .hn-prose h4 {
  font-family: var(--hn-font-head, 'Poppins', sans-serif);
  color: var(--hn-navy-800, #0d2045); font-weight: 700;
  margin: 24px 0 10px; letter-spacing: -0.01em;
}
.hn-prose h2 { font-size: 18px; }
.hn-prose h3 { font-size: 16px; }
.hn-prose p { margin: 0 0 14px; }
.hn-prose a { color: var(--hn-navy-600, #1e4d8c); font-weight: 500; }
.hn-prose a:hover { color: var(--hn-navy-800, #0d2045); }
.hn-prose ul, .hn-prose ol { padding-left: 20px; margin: 0 0 14px; }
.hn-prose li { margin-bottom: 6px; }
.hn-prose strong, .hn-prose b { color: var(--hn-navy-700, #1a3a6b); }
.hn-prose table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
.hn-prose th { background: var(--hn-navy-50, #eff6ff); color: var(--hn-navy-700, #1a3a6b); font-weight: 700; padding: 10px 14px; text-align: left; border: 1px solid var(--hn-gray-200, #e2e8f0); }
.hn-prose td { padding: 9px 14px; border: 1px solid var(--hn-gray-200, #e2e8f0); }
.hn-prose tr:nth-child(even) td { background: var(--hn-gray-50, #f8fafc); }

/* ── Contact channel grid ──────────────────────────────────────
   Rendered by Views/Outer/contactUs.php for tenants with
   CONTACT_PAGE_CHANNELS while the page is unsaved: each ORG_* fact
   as a tappable card — mailto:, tel:, maps, site. Icon tiles take
   the same gradient tokens as the homepage feature cards, so a
   tenant stylesheet that re-brands --hn-grad-* re-brands these too. */
.hn-contact-channels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.hn-contact-channel {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; min-height: 76px;
  background: var(--hn-white, #fff);
  border: 1px solid var(--hn-gray-100, #f1f5f9);
  border-radius: var(--hn-r-lg, 18px);
  box-shadow: var(--hn-shadow-sm, 0 1px 4px rgba(37,99,176,.08));
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.hn-contact-channel:hover {
  transform: translateY(-2px);
  box-shadow: var(--hn-shadow-md, 0 4px 16px rgba(37,99,176,.10));
  border-color: var(--hn-navy-100, #dbeafe);
  text-decoration: none;
}
.hn-contact-channel:focus-visible { outline: 2px solid var(--hn-navy-500, #2563b0); outline-offset: 2px; }
.hn-contact-channel-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; color: #fff; font-size: 17px;
}
.hn-contact-channel--navy   .hn-contact-channel-icon { background: var(--hn-grad-navy, #1a3a6b); }
.hn-contact-channel--green  .hn-contact-channel-icon { background: var(--hn-grad-green, #16a34a); }
.hn-contact-channel--violet .hn-contact-channel-icon { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.hn-contact-channel--orange .hn-contact-channel-icon { background: var(--hn-grad-orange, #ea580c); }
.hn-contact-channel-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hn-contact-channel-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hn-gray-400, #94a3b8);
}
.hn-contact-channel-value {
  font-size: 14.5px; font-weight: 600; color: var(--hn-navy-800, #0d2045);
  line-height: 1.45; overflow-wrap: anywhere;
}
.hn-contact-channel-chev { margin-left: auto; color: var(--hn-gray-300, #cbd5e1); font-size: 13px; flex: none; }
.hn-contact-channel:hover .hn-contact-channel-chev { color: var(--hn-navy-500, #2563b0); }
.hn-contact-credit { margin: 18px 2px 0; font-size: 13px; color: var(--hn-gray-500, #64748b); }
.hn-contact-credit a { color: var(--hn-navy-600, #1e4d8c); font-weight: 600; text-decoration: none; }
.hn-contact-credit a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .hn-contact-channels { grid-template-columns: 1fr; gap: 12px; }
}

.hn-outer-empty {
  text-align: center; color: var(--hn-gray-400, #94a3b8);
  font-size: 15px; padding: 32px 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* var(), not a literal: homepage-new.css already sets --hn-navbar-h to 60px at this
     breakpoint, and duplicating the number here meant the app — which collapses that
     variable because it suppresses the navbar and draws its own — still reserved a
     navbar's worth of empty space. Identical in a browser. */
  .hn-outer-hero { padding-top: calc(var(--hn-navbar-h, 60px) + 32px); padding-bottom: 40px; }
  .hn-outer-hero--compact { padding-top: calc(var(--hn-navbar-h, 60px) + 24px); padding-bottom: 32px; }
  .hn-outer-hero-title { font-size: clamp(24px, 7vw, 32px); }
  .hn-outer-hero-cta { flex-direction: column; align-items: stretch; }
  .hn-outer-hero-cta .hn-btn,
  .hn-outer-hero-cta .hn-btn-ghost { justify-content: center; }
  .hn-outer-content { padding: 36px 0 52px; }
  .hn-outer-section-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .hn-outer-cta-bar { flex-direction: column; align-items: flex-start; }
  .hn-outer-card-header { padding: 20px 20px 16px; gap: 12px; }
  .hn-outer-card-body { padding: 20px 20px; }
  .hn-outer-card-footer { padding: 14px 20px 20px; }
  .hn-outer-card-icon { width: 44px; height: 44px; font-size: 17px; }
  .hn-outer-card-title { font-size: 17px; }
}

@media (max-width: 400px) {
  .hn-outer-hero { padding-top: calc(var(--hn-navbar-h, 60px) + 20px); padding-bottom: 28px; }
  .hn-outer-card-header { flex-direction: column; align-items: flex-start; }
}


/* ══════════════════════════════════════════════════════════════════
   Guest checkout (/checkout/) — Views/Checkout/*
   Buy first, account after. Lives here rather than in its own file
   because the page is built on the au-* fields and the hn-outer-*
   shell that are already defined above; a separate stylesheet would
   only duplicate their tokens.
   ══════════════════════════════════════════════════════════════════ */

.co-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 24px; padding: 0; list-style: none;
  font-size: 14px; color: var(--au-gray-500, #64748b);
}
.co-steps li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.co-steps li + li::before {
  content: ""; width: 26px; height: 1px; margin-right: 4px;
  background: var(--au-gray-200, #e2e8f0);
}
.co-steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--au-r-full, 999px);
  background: var(--au-gray-200, #e2e8f0); color: #475569;
  font-size: 13px; font-weight: 700;
}
.co-steps li.is-active { color: #0f172a; }
.co-steps li.is-active span { background: #16a34a; color: #fff; }

.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 24px;
  align-items: start;
}

.co-panel,
.co-summary-card,
.co-switch-plan,
.co-result-card {
  background: #fff;
  border: 1px solid var(--au-gray-200, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.co-panel { padding: 26px 26px 22px; }
.co-panel-head { margin-bottom: 20px; }
.co-panel-head h2 { margin: 0 0 6px; font-size: 20px; color: #0f172a; font-weight: 800; }
.co-panel-head p { margin: 0; font-size: 14px; color: var(--au-gray-500, #64748b); }

.co-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.au-field-note {
  display: block; margin-top: 6px;
  font-size: 12.5px; line-height: 18px; color: var(--au-gray-500, #64748b);
}

.co-message {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
  font-size: 14px; line-height: 20px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
.co-message.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.co-message[hidden] { display: none; }
.co-field-error { display: block; margin-top: 5px; color: #b91c1c; font-size: 12.5px; }
.au-input[aria-invalid="true"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }

.co-terms { margin: 18px 0 20px; }
.co-terms a { color: #1d4ed8; text-decoration: underline; }

.co-pay-btn { width: 100%; justify-content: center; }
.co-pay-btn.is-loading { opacity: 0.7; cursor: progress; }
.co-checkout-page { --co-primary: #16a34a; padding-top: 36px; }

/* The package checkout has no au-page/hero wrapper, so the outer layout itself owns
   the fixed-navbar offset. The ID selector is intentional: the reset at the top of this
   file uses .hn-body #auMain with !important, and a weaker page rule was ignored. Keep
   main/footer in normal document flow so a tall checkout scrolls to the real footer. */
body.co-layout.hn-body { height: auto !important; min-height: 100vh !important; overflow-x: hidden; overflow-y: auto !important; }
body.co-layout.hn-body #auMain {
  flex: 1 0 auto;
  display: block;
  min-height: calc(100vh - var(--hn-navbar-h, 68px));
  padding-top: var(--hn-navbar-h, 68px) !important;
  /* The Android shell draws its navigation bar OVER the WebView rather than beside it,
     and --oe-floor ( declared on <body> by Include/inc_app_shell_head.php, and only
     inside the app ) is how much of the viewport floor that covers. Nothing in this
     sheet read it: the study-material checkout ended 52px above the bottom of its own
     document, so "Back to study material" — the page's only way out — sat under the bar
     and no amount of scrolling brought it clear. 0px in every browser, where there is no
     bar to clear. !important for the same reason padding-top carries it — the reset at
     the top of this file zeroes #auMain's padding outright. */
  padding-bottom: var(--oe-floor, 0px) !important;
  overflow: visible !important;
}
body.co-layout .co-exam-package-checkout { padding-top: 36px; padding-bottom: 72px; }
body.co-layout .hn-footer { display: block !important; position: relative; flex: 0 0 auto; width: 100%; }
.co-checkout-page .co-pay-btn { background: var(--co-primary); border-color: var(--co-primary); color: #fff; }
.co-checkout-page .co-steps li.is-active span,
.co-checkout-page .co-summary-eyebrow { background: transparent; color: var(--co-primary); }
.co-checkout-page .co-steps li.is-active span { background: var(--co-primary); color: #fff; }
.co-checkout-page .co-lines-total dd,
.co-checkout-page .co-package-metrics i { color: var(--co-primary); }

/* Localhost-only reminder that the gateway keys are test keys. The brand header
   that used to carry it was dropped — the site header already names the client. */
.co-test-flag { display: inline-block; margin: 0 0 16px; padding: 5px 9px; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: 12px; font-weight: 800; }
.co-panel-head h1 { margin: 7px 0 5px; font-size: 26px; line-height: 1.2; color: #0f172a; }
.co-product-description { margin: 0 0 18px; color: #475569; font-size: 14.5px; line-height: 22px; }
.co-package-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.co-package-metrics > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: center; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.co-package-metrics span { color: #64748b; font-size: 13px; }
.co-package-metrics strong { color: #0f172a; }
.co-exam-list { margin-bottom: 18px; border: 1px solid #e2e8f0; border-radius: 11px; overflow: hidden; }
.co-exam-list summary { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; color: #0f172a; font-weight: 750; }
.co-exam-list summary span { min-width: 24px; padding: 2px 7px; text-align: center; border-radius: 999px; background: #e2e8f0; font-size: 12px; }
.co-exam-list ul { margin: 0; padding: 0 14px 12px; list-style: none; display: grid; gap: 8px; }
.co-exam-list li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; color: #334155; font-size: 13.5px; }
.co-exam-list li i { color: #16a34a; }
.co-exam-list li small { color: #64748b; }
.co-buying-as { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px; border-radius: 11px; background: #eff6ff; border: 1px solid #bfdbfe; }
.co-buying-as > i { color: #2563eb; font-size: 22px; margin-top: 2px; }
.co-buying-as div { display: grid; }
.co-buying-as span,.co-buying-as small { color: #475569; font-size: 12.5px; }
.co-buying-as strong { color: #0f172a; font-size: 14.5px; }
.co-support-link { display: flex; gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #e2e8f0; color: #1d4ed8; font-size: 13px; text-decoration: none; }
.co-back-link { display: inline-flex; gap: 8px; align-items: center; color: #475569; font-size: 13.5px; text-decoration: none; }
.co-mobile-total { display: none; }

.co-gateway-note {
  margin: 14px 0 0; display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 18px; color: var(--au-gray-500, #64748b);
}
.co-gateway-note i { color: #16a34a; margin-top: 2px; }

.co-alt-path {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--au-gray-200, #e2e8f0);
  font-size: 14px; color: var(--au-gray-600, #475569);
}
.co-alt-path a { color: #1d4ed8; font-weight: 700; }

/* ── Order summary ─────────────────────────────────────── */
.co-summary { position: sticky; top: 88px; display: grid; gap: 16px; }
.co-summary-card { padding: 24px; }

.co-summary-eyebrow {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #16a34a;
}
.co-summary-plan { margin: 8px 0 4px; font-size: 22px; font-weight: 850; color: #0f172a; }
.co-summary-tagline { margin: 0 0 16px; font-size: 14px; color: var(--au-gray-500, #64748b); }

.co-lines { margin: 0 0 18px; }
.co-lines > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--au-gray-200, #e2e8f0);
  font-size: 14.5px;
}
.co-lines dt { margin: 0; color: var(--au-gray-600, #475569); }
.co-lines dd { margin: 0; color: #0f172a; font-weight: 700; }
.co-lines-total { border-bottom: none !important; padding-top: 14px !important; }
.co-lines-total dt { font-weight: 800; color: #0f172a; font-size: 16px; }
.co-lines-total dd { font-size: 22px; font-weight: 850; color: #16a34a; }

.co-summary-metrics { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.co-summary-metrics li {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; background: var(--au-gray-50, #f8fafc);
  font-size: 14px; color: var(--au-gray-600, #475569);
}
.co-summary-metrics i { color: #16a34a; }
.co-summary-metrics strong { color: #0f172a; font-weight: 800; }

.co-summary-features h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: #0f172a; }
.co-summary-features ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 7px; }
.co-summary-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: #334155; }
.co-summary-features li.is-on i { color: #16a34a; }
.co-summary-features li.is-off { color: var(--au-gray-400, #94a3b8); }
.co-summary-features li.is-off i { color: var(--au-gray-300, #cbd5e1); }

.co-trust { margin: 0; padding: 16px 0 0; list-style: none; display: grid; gap: 8px;
  border-top: 1px solid var(--au-gray-200, #e2e8f0); }
.co-trust li { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--au-gray-500, #64748b); }
.co-trust i { color: #16a34a; width: 16px; }

.co-switch-plan { padding: 18px 20px; }
.co-switch-plan h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: #0f172a; }
.co-switch-plan a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 13px; margin-bottom: 8px; border-radius: 9px;
  border: 1px solid var(--au-gray-200, #e2e8f0);
  font-size: 14px; color: #334155; text-decoration: none;
  transition: border-color var(--au-normal, .2s) var(--au-ease, ease), background var(--au-normal, .2s) var(--au-ease, ease);
}
.co-switch-plan a:last-child { margin-bottom: 0; }
.co-switch-plan a:hover { border-color: #16a34a; background: #f0fdf4; }
.co-switch-plan strong { color: #0f172a; font-weight: 800; }

/* ── Result page ───────────────────────────────────────── */
.co-result { max-width: 640px; }
.co-result-card { padding: 28px; text-align: center; }
.co-result-card .co-lines { text-align: left; }
.co-result-lede { margin: 18px 0 20px; font-size: 15.5px; line-height: 24px; color: #334155; }
.co-result-card .au-btn { display: inline-flex; width: auto; padding-inline: 26px; }
.co-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.co-result-note { margin: 18px 0 0; font-size: 13px; line-height: 20px; color: var(--au-gray-500, #64748b); }
.co-result-card.is-failed .co-result-lede { color: #7f1d1d; }

/* ── Paid-plan banner on /newUser/ ──────────────────────── */
.au-paid-plan-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 20px; padding: 14px 16px; border-radius: 11px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
}
.au-paid-plan-icon { color: #16a34a; font-size: 20px; line-height: 1; margin-top: 1px; }
.au-paid-plan-note strong { display: block; font-size: 14.5px; color: #14532d; font-weight: 800; }
.au-paid-plan-note p { margin: 3px 0 0; font-size: 13.5px; line-height: 20px; color: #166534; }

/* ── Study-material checkout ───────────────────────────
   Views/Checkout/studyMaterial.php reuses every co-* component above; only the cover
   and the protection note are its own. The plate itself is drawn by exam-plate.css,
   which the outer layout already loads for the public catalogue. */
.co-sm-head { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 20px; }
.co-sm-head .co-panel-head { margin-bottom: 0; }
.co-sm-cover { min-width: 0; }

/* .xp-plate sizes its own type in vw ( clamp(20px, 2.7vw, 34px) ), which is written for
   a full card cover — at 108px wide the code overruns its own plate. Everything below
   restates that one decision at thumbnail scale; the art, the colours and the spine come
   from exam-plate.css unchanged, so a family added there needs no edit here. */
.co-sm-plate { aspect-ratio: 3 / 4; border-radius: 10px; --xp-pad: 10px; }
.co-sm-plate .xp-plate-code { font-size: 19px; }
.co-sm-plate .xp-plate-code.is-long { font-size: 15px; }
.co-sm-plate .xp-plate-code.is-xlong { font-size: 12px; letter-spacing: -.01em; }
.co-sm-plate .xp-plate-full { font-size: 8.5px; }
.co-sm-plate .xp-plate-wafer { font-size: 7.5px; letter-spacing: .08em; padding: 3px 6px; }
.co-sm-plate .xp-plate-wafer .material-symbols-outlined { font-size: 10px; }
.co-sm-plate .xp-plate-rule { width: 18px; height: 2px; }
/* 9px of page edges beside a 108px cover is a stripe, not an edge. */
.co-sm-plate .xp-plate-leaves { display: none; }
.co-sm-plate .xp-plate-spine { width: 12px; }
.co-sm-plate.xp-plate--book .xp-plate-inner { padding-left: calc(var(--xp-pad) + 9px); }

.co-sm-shield {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 18px; padding: 13px 14px; border-radius: 11px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  font-size: 13px; line-height: 19px; color: #166534;
}
.co-sm-shield i { color: #16a34a; margin-top: 2px; }
.co-study-material-checkout .co-summary + * { margin-top: 0; }
.co-study-material-checkout .co-back-link { display: flex; }

@media (max-width: 900px) {
  /* minmax(0, 1fr), never a bare 1fr. `1fr` is `minmax(auto, 1fr)`, so the track can
     never be narrower than the panel's MIN-CONTENT width — and the panel holds a buyer
     line, a metrics grid and the cross-sell rail, whose combined minimum came to 419px.
     On a 393px phone that pushed both columns 42px past the screen and body's
     overflow-x: hidden clipped the difference: the heading, the description and every
     metric value were cut off mid-word with nothing to scroll to. The two-column rule
     above has always said minmax(0, …) for this reason; the phone override dropped it. */
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-summary { position: static; }
  .co-exam-package-checkout .co-summary { display: none; }
  /* The aside repeats the panel on one column, so it is dropped and .co-mobile-total
     carries the price instead. The back links are not in it — they move under the form. */
  .co-study-material-checkout .co-summary { display: grid; }
  .co-study-material-checkout .co-summary-card { display: none; }
  .co-sm-head { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .co-mobile-total { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 16px; padding: 13px 15px; border: 1px solid #bbf7d0; border-radius: 11px; background: #f0fdf4; }
  .co-mobile-total div { display: grid; gap: 2px; min-width: 0; }
  .co-mobile-total strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #14532d; font-size: 14px; }
  .co-mobile-total span { color: #166534; font-size: 12px; }
  .co-mobile-total b { flex: 0 0 auto; color: #14532d; font-size: 17px; }
}

@media (max-width: 520px) {
  .co-field-row { grid-template-columns: 1fr; }
  .co-panel, .co-summary-card, .co-result-card { padding: 20px; }
  .co-steps { font-size: 13px; gap: 8px; }
  /* No connectors on a phone. They are 18px apiece of the 361px a 393px screen has to
     spend, and the three steps need 389px with them — so the last one, "Unlock", was
     pushed off the end of a scroller with no visible scrollbar and the payment read as
     a two-step flow that stopped mid-sentence. Without them all three fit on one line,
     and the numbered discs already carry the sequence. */
  .co-steps li + li::before { display: none; }
  .co-checkout-page { padding-top: 22px; }
  body.co-layout.hn-body #auMain {
    min-height: calc(100vh - var(--hn-navbar-h, 60px));
    padding-top: var(--hn-navbar-h, 60px) !important;
  }
  body.co-layout .co-exam-package-checkout { padding-top: 22px; padding-bottom: 52px; }
  /* Wrap, do not scroll. A sideways scroller hides whatever does not fit, and what did
     not fit was the step the buyer has not reached yet. Wrapping keeps every step on the
     page in whatever language it is written in — hi/mr set longer labels than en. */
  .co-checkout-page .co-steps { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; padding-bottom: 0; }
  .co-checkout-page .co-steps li { white-space: nowrap; }
  /* 26px of heading in the ~220px column left beside the cover broke the title over four
     lines and pushed the price below the fold. */
  .co-panel-head h1 { font-size: 20px; }
  .co-package-metrics { grid-template-columns: 1fr; }
  .co-exam-list li { grid-template-columns: 18px 1fr; }
  .co-exam-list li small { grid-column: 2; }
}

/* ── Restore account ───────────────────────────────────────────
   Views/Outer/restoreAccount.php — the screen a correct sign-in reaches
   while an account is pending deletion.

   Its two explanatory lines cannot use .au-benefit-item: that component
   belongs to the dark split-panel and is white text at 86% opacity, which
   is invisible on this white card. */
.au-restore-points {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 15px; margin-bottom: 20px;
  border: 1px solid var(--au-gray-200); border-radius: var(--au-r-md);
  background: var(--au-gray-50);
}
.au-restore-point {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13px; line-height: 19px; color: var(--au-gray-600, #4b5563);
}
.au-restore-point i {
  flex: 0 0 auto; margin-top: 2px; font-size: 13px; color: var(--au-navy-500, #3b5bdb);
}


/* ==========================================================================
   Exam catalogue — /examInfo/ and one exam's own page
   --------------------------------------------------------------------------
   Only what the existing vocabulary does not already cover. The hero, the
   container, the panels, the prose, the syllabus block, the FAQ and the buy
   rail are all reused from the package pages above and in homepage-new.css —
   a second set of them would be a second thing to keep in step.
   ========================================================================== */

/* A category on the listing. The listing groups by category and the package
   listing does not group at all, so this spacing has no existing owner. */
.hn-outer-section { margin-bottom: 44px; }
.hn-outer-section:last-of-type { margin-bottom: 24px; }

/* Denser grid for the strips INSIDE a record page ( packages for this exam,
   other exams in this category ), where the cards sit in a narrower column
   than the full listing grid was measured for. */
.hn-cards-grid--tight { gap: 14px; }
@media ( min-width: 900px ) {
  .hn-cards-grid--tight { grid-template-columns: repeat(2, 1fr); }
}

.hn-exam-pack-group { margin: 22px 0 12px; }

.hn-detail-official { margin: 14px 0 0; font-size: 14px; }
.hn-detail-official i { margin-right: 7px; color: var(--hn-navy-500, #3b5bdb); }

/* ---- One exam card ------------------------------------------------------
   The WHOLE card is the link. A card whose only link is its title leaves the
   other 95% of a comfortable tap target inert, which on a phone is most of
   the card. */
.hn-exam-name-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--au-gray-200, #e5e7eb);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hn-exam-name-card:hover,
.hn-exam-name-card:focus-visible {
  border-color: var(--hn-navy-500, #3b5bdb);
  box-shadow: 0 10px 30px -18px rgba(16, 24, 40, .35);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.hn-exam-name-card:focus-visible { outline: 2px solid var(--hn-navy-500, #3b5bdb); outline-offset: 2px; }

/* The abbreviation, whole. It runs from two to nine characters, so this wraps
   and shrinks rather than clipping a word in half. */
.hn-exam-name-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--hn-navy-600, #2f4bc7);
  background: var(--au-gray-50, #f9fafb);
  border-radius: 12px;
}

.hn-exam-name-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hn-exam-name-title { font-size: 16px; font-weight: 700; line-height: 22px; color: var(--au-gray-900, #111827); }
.hn-exam-name-body-line { font-size: 12px; font-weight: 600; color: var(--hn-navy-500, #3b5bdb); }
.hn-exam-name-summary { font-size: 13px; line-height: 19px; color: var(--au-gray-600, #4b5563); }

.hn-exam-name-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--au-gray-500, #6b7280);
}
.hn-exam-name-meta i { margin-right: 5px; }

.hn-exam-name-go { color: var(--au-gray-400, #9ca3af); font-size: 14px; }
.hn-exam-name-card:hover .hn-exam-name-go { color: var(--hn-navy-500, #3b5bdb); }

/* ---- Key dates ----------------------------------------------------------
   A definition list because that is what it is: a label and its value. Two
   columns where there is room, stacked where there is not. */
.hn-keydates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.hn-keydate {
  padding: 12px 14px;
  border: 1px solid var(--au-gray-200, #e5e7eb);
  border-radius: 12px;
  background: var(--au-gray-50, #f9fafb);
}
.hn-keydate dt { margin: 0 0 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--au-gray-500, #6b7280); }
.hn-keydate dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--au-gray-900, #111827); }

@media ( max-width: 600px ) {
  .hn-exam-name-card { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; }
  .hn-exam-name-go { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   KIDS ZONE — /kids/  ("The Play Mat")

   The one page on this site addressed to a parent about a child, and the only
   one that may not look like the rest. Everything else here — the exam shelf,
   the package page, the exam feed — is drawn in the tenant's indigo on a cool
   ground, which is right for a candidate comparing test series and wrong for
   somebody choosing a jigsaw for a five year old.

   THE RULE THIS SECTION FOLLOWS is the tone decision: playful above, sober at
   the money. The hero, the bunting and the puzzle are bright and rounded; the
   safety line, the pack cards and every price are ordinary, quiet type. A
   parent is charmed on the way in and reassured at the point they pay, which
   is the order they need it in.

   The palette is taken from the artwork rather than from the brand: these are
   the colours already in the pictures — sky, sand, grass, and the orange of
   the bunting. Two of them ( --kz-sky, --kz-sand ) are literally sampled from
   the elephant scene the hero is cut from, so the hero and its puzzle sit on
   one ground rather than two.

   SCOPED TO .kz-* and to this page only. It is loaded by auth-pages.css, which
   also dresses /examPackages/ and the auth pages, so nothing here may key off
   a bare element or a shared class. See Views/Outer/kids.php.
   ══════════════════════════════════════════════════════════════════════════ */

.kz-hero,
.kz-body {
  --kz-sky:     #9BD9F5;
  --kz-sky-2:   #C9EDF9;
  --kz-sand:    #FFFBF0;
  --kz-ink:     #17456B;
  --kz-ink-2:   #2E5A7D;
  --kz-orange:  #FF7A45;
  --kz-orange-d:#D95A28;
  --kz-grass:   #6BCB77;
}

/* ── The hero ─────────────────────────────────────────────────────────────
   Its own band rather than .hn-outer-hero: that one is a dark navy slab with
   two blurred orbs, built for a catalogue page, and every rule here would have
   been an override of it. */
.kz-hero {
  position: relative;
  background: linear-gradient(176deg, var(--kz-sky) 0%, var(--kz-sky-2) 58%, var(--kz-sand) 100%);
  padding-bottom: 42px;
  /* The public layout's navbar is fixed; the app shell's is not. */
  padding-top: var(--hn-navbar-h, 68px);
}
.kz-hero--in-app { padding-top: 0; border-radius: 16px; }

/* ── Bunting ──────────────────────────────────────────────────────────────
   Not decoration for its own sake: every scene in this product carries a band
   of beads or flags across its top, and it is there for a reason — two tiles
   of empty sky would otherwise be identical and the jigsaw would have two
   correct answers. The page wears the product's own fix as its trim. */
.kz-bunting {
  position: absolute; top: var(--hn-navbar-h, 68px); left: 0; right: 0;
  display: flex; height: 22px; overflow: hidden;
  /* Above the cut-out layer, which is absolutely positioned and comes later in the
     source. Without this a drifting shape passes over the flags. */
  z-index: 2;
}
.kz-hero--in-app .kz-bunting { top: 0; }
.kz-bunting i {
  flex: 1 1 0; height: 18px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.kz-bunting i:nth-child(6n+1) { background: #FF7A45; }
.kz-bunting i:nth-child(6n+2) { background: #FFD166; }
.kz-bunting i:nth-child(6n+3) { background: #6BCB77; }
.kz-bunting i:nth-child(6n+4) { background: #4D96FF; }
.kz-bunting i:nth-child(6n+5) { background: #C77DFF; }
.kz-bunting i:nth-child(6n+6) { background: #FF8FA3; }

/* ── The play card ────────────────────────────────────────────────────────
   Three children now — copy, board, caption — laid out by AREA rather than by
   source order, which is what lets one set of markup be a landing hero on a
   desktop and a compact card on a phone with no second hero and no UA test.

   The caption came out of .kz-play to get here: inside the board's column it
   was 132px wide on a phone and broke "Tap two pieces to swap them" over three
   lines. As a row of its own it runs the width of the card. */
.kz-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "copy play" "go cap";
  gap: 0 34px; align-items: center; padding-top: 40px;
}
.kz-hero-copy  { grid-area: copy; }
.kz-play       { grid-area: play; }
.kz-hero-go    { grid-area: go; }
.kz-puzzle-cap { grid-area: cap; }

/* The hero's own ground is the only wide expanse of flat colour on this page —
   everything below it is cards — so the cut-outs need it, and the container has
   to be lifted over them. */
.kz-hero > .hn-container { position: relative; z-index: 1; }

.kz-age {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; background: rgba(23,69,107,.68);
  padding: 4px 13px; border-radius: 99px; margin-bottom: 14px;
}

/* The one place on this site with a rounded display face. It is the page's
   whole signal, so it is spent here and nowhere below. */
.kz-title {
  font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(27px, 4.6vw, 42px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.012em; color: var(--kz-ink); margin: 0 0 12px;
  text-wrap: balance;
}
.kz-sub {
  font-size: 15.5px; line-height: 1.6; color: var(--kz-ink-2);
  margin: 0 0 20px; max-width: 38ch;
}

.kz-cta {
  display: inline-block; font-size: 16.5px; font-weight: 700;
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  background: var(--kz-orange); color: #fff; text-decoration: none;
  padding: 12px 28px; border-radius: 99px;
  box-shadow: 0 4px 0 var(--kz-orange-d);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kz-cta:hover, .kz-cta:focus-visible {
  color: #fff; text-decoration: none;
  transform: translateY(2px); box-shadow: 0 2px 0 var(--kz-orange-d);
}
.kz-cta-note { font-size: 12.5px; color: var(--kz-ink-2); margin: 11px 0 0; }
/* The short label is the phone's; see $strStartBrief in the view. */
.kz-cta-brief { display: none; }

/* ── The puzzle ───────────────────────────────────────────────────────────
   Square, capped, and centred in its column. The board keeps its size whether
   the script runs or not — with no JavaScript it is simply a picture of an
   elephant in four pieces, which is a perfectly good hero. */
.kz-play { display: flex; flex-direction: column; align-items: center; }
.kz-puzzle {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px;
  width: 100%; max-width: 268px; aspect-ratio: 1; padding: 8px;
  background: #fff; border-radius: 18px; box-shadow: 0 6px 0 rgba(23,69,107,.14);
}
.kz-tile {
  border: 0; padding: 0; border-radius: 10px; background-color: var(--kz-sand);
  background-size: 200% 200%; background-repeat: no-repeat;
  /* Not a control until the script says so — see .is-live. */
  cursor: default;
  transition: transform .16s ease, box-shadow .16s ease;
}
.kz-puzzle.is-live .kz-tile { cursor: pointer; }
.kz-puzzle.is-live .kz-tile:hover { transform: scale(1.04); }
.kz-tile:focus-visible { outline: 3px solid var(--kz-orange); outline-offset: 3px; }
.kz-tile[aria-pressed="true"] {
  transform: scale(.92);
  box-shadow: 0 0 0 3px var(--kz-orange);
}
.kz-puzzle.is-done .kz-tile { transform: none; box-shadow: none; cursor: default; }
.kz-puzzle.is-done { box-shadow: 0 6px 0 rgba(15,123,78,.22); }

.kz-puzzle-cap {
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600; color: var(--kz-ink);
  /* Was the flex gap in .kz-play; the caption is a grid row of its own now. */
  margin: 12px 0 0; min-height: 22px; text-align: center;
}
.kz-puzzle-cap.is-win { color: #0F7B4E; }

/* ── Below the fold, everything quietens down ─────────────────────────────── */
.kz-body { background: var(--kz-sand); }

/* The safety line. One row of plain sentences, deliberately the least
   decorated thing on the page: this is the part a cautious parent reads
   closely, and more colour here would read as salesmanship. */
.kz-safety {
  list-style: none; margin: 0 0 34px; padding: 13px 0;
  border-block: 1px solid #E8E2D2;
  display: flex; flex-wrap: wrap; gap: 9px 30px;
}
.kz-safety li {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13px; color: #6A6152;
}
.kz-safety b { font-weight: 600; color: #2B2619; font-size: 13.5px; }
.kz-safety-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #16794A;
  flex: none; align-self: center;
}

.kz-lede {
  margin: -14px 0 24px; max-width: 68ch;
  font-size: 15px; line-height: 1.65; color: #6A6152;
}
.kz-section-gap { margin-top: 46px; }

/* Section headings on this page take the sand ground, not the shared navy. */
.kz-body .hn-section-title { color: #2B2619; }
.kz-body .hn-section-eyebrow { color: var(--kz-orange); }

/* ── Pack cards ───────────────────────────────────────────────────────────
   The pictures are the card. Everything else on it — the tier, the spec, the
   price — is set in the body face at ordinary sizes, because this is the half
   of the page where a parent is deciding what to spend. */
/* TWO grids, because two different numbers of cards have to fill them. The shelf
   holds six paid packs, so three across is two full rows; at the 232px track it had
   been using, a 1150px container fitted four and left the second row half empty. The
   free pair gets its own two-up grid, capped so two cards do not stretch to the width
   of six. */
/* ── The play mat ────────────────────────────────────────────────────────────
   The layer fills the whole coloured section and everything else stacks over it.
   `position: static` on .kz-body would let it escape, so the section is the
   containing block; .hn-container already sits later in source order, and giving it
   position + z-index is what keeps it above a layer that is absolutely positioned
   rather than relying on paint order alone.

   IT WAS A CANVAS, AND ON A PHONE IT WAS THREE PROBLEMS AT ONCE. Thirty jigsaw
   pieces spread over a 4,749px page came to five per screen at 7–15% opacity
   behind a 1.4px stroke — under half a device pixel on a 3x screen — repainted
   every frame on a 3.4-million-pixel buffer, and it started below the hero, so the
   one screen everybody sees had no motion in it at all.

   Seven flat shapes now, drawn once by the server and moved by SCROLL POSITION
   alone: nothing paints while the finger is still. Include/inc_kids_cutouts.php
   carries the rest, including why they are placed rather than scattered. */
.kz-body { position: relative; }
.kz-body > .hn-container { position: relative; z-index: 1; }

.kz-cutouts {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  /* A shape placed near an edge is meant to be a sliver, and one pushed past it by
     the parallax must not lengthen the page it is decorating. */
  overflow: hidden;
}

/* The hero's layer stops where the bunting does: above that line is the fixed
   public navbar, and a shape drifting behind an opaque bar is work for nothing. */
.kz-cutouts--hero { top: var(--hn-navbar-h, 68px); }
.kz-hero--in-app .kz-cutouts--hero { top: 0; }

/* Two opacities, because the two layers sit on different grounds and have different
   things over them. The hero's shapes are on sky with one translucent card in front of
   them and can afford to be seen; the body's pass behind running text — the safety line,
   the section eyebrow — where anything stronger than this starts costing contrast on the
   soberest half of the page. */
.kz-cut { position: absolute; display: block; line-height: 0; opacity: .34; }
.kz-cutouts--hero .kz-cut { opacity: .55; }

/* TWO ELEMENTS FOR TWO TRANSFORMS. The outer span is written by the script on
   scroll; the inner one runs the float. One element cannot hold both — a running
   CSS animation wins the transform property every frame, and the parallax then
   silently does nothing at all. */
.kz-cut > i {
  display: block; line-height: 0;
  transform: rotate(var(--kz-cut-spin, 0deg));
  animation: kzFloat 9s ease-in-out infinite;
}
.kz-cut svg { display: block; width: 100%; height: auto; }

@keyframes kzFloat {
  0%, 100% { transform: translate3d(0, 0, 0)    rotate(var(--kz-cut-spin, 0deg)); }
  50%      { transform: translate3d(0, -9px, 0) rotate(calc(var(--kz-cut-spin, 0deg) + 5deg)); }
}

/* ── The shelf, as four ladders ──────────────────────────────────────────────
   Sixteen cards in one auto-fill grid was right when there was one family and it
   was a ladder. With four it was sixteen things to compare, and the only mark
   telling a Counting pack from a jigsaw pack was a 12px grey line. Each family
   is a row now: a coloured band that names it once, then its four rungs. */
.kz-shelf { display: flex; flex-direction: column; gap: 26px; }

.kz-fam {
  border: 1px solid #EBE4D3; border-radius: 18px; overflow: hidden;
  background: #FFFDF7;
}

.kz-fam-band {
  padding: 16px 20px 15px; color: #fff;
  /* the gradient is set inline, from the family's own plate ramp */
}
.kz-fam-name {
  margin: 0; font-size: 22px; line-height: 1.15; font-weight: 700; color: #fff;
  font-family: 'Baloo 2', var(--kz-face, inherit), system-ui, sans-serif;
}
.kz-fam-what {
  margin: 5px 0 0; max-width: 78ch;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.93);
}
.kz-fam-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 11px 0 0; padding: 0; list-style: none;
}
.kz-fam-chips li {
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 99px;
  background: rgba(255,255,255,.2); color: #fff;
}

/* ── The three parts a tile has and a row does not ────────────────────────────
   A desktop shows four rungs as a row of four cards and there is nothing to fold,
   so the pictures, the price line and the chevron are all phone-only — they are
   what a CLOSED tile needs to stand for the four packs behind it. Declared off
   here and switched on in the phone block, so a width this page has never been
   designed at gets the row it has always had. */
.kz-fam-pics,
.kz-fam-short,
.kz-fam-foot,
.kz-fam-from,
.kz-fam-toggle { display: none; }

/* Folded by the script, which only ever folds on a phone — see kids-zone.js for
   why the server renders every rung open. The attribute selector is what beats
   .kz-rungs's own `display: grid`; `hidden` alone loses the tie to it. */
.kz-rungs[hidden] { display: none; }

/* Four rungs, and four is the point: the ladder has four rungs in every family, so
   this does not auto-fill. It drops to two and then one, never to three, because
   three would put one pack on a line of its own at the bottom of every row. */
.kz-rungs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; padding: 14px;
}

/* A family that sells as one pack gets a card, not a quarter of a row with three
   empty columns beside it. Wide enough to read as the family's one offer and narrow
   enough that its four pictures stay pictures. */
.kz-rungs--single { grid-template-columns: minmax(0, 340px); }

.kz-packs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.kz-packs--lead {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}
.kz-pack-age {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  padding: 4px 9px; border-radius: 99px;
  background: #DFF1FA; color: #17456B;
}

.kz-pack {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #EBE4D3; border-radius: 16px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.kz-pack:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(43,38,25,.10);
}
/* THE RATIO IS ON THE PICTURES, NOT ON THE BAND, and it took three goes to get there.
   `aspect-ratio: 16/11` on the grid container does not survive contact with four 360px
   square images: the row height resolves from the content, the images' height:100%
   resolves against a row that is not yet definite, and the browser settles the circle
   by using the intrinsic 360 — so the band came out as tall as the card is wide and
   swamped the name and price beneath it. minmax(0, 1fr) rows did not break the circle
   either, because the images still had nothing definite to be 100% of.

   Giving each picture its own ratio removes the circularity entirely: the images decide
   the height, the grid follows, and nothing has to resolve against anything. Each cell
   is 16/11 because the band is 16/11 and it is cut in two on both axes. */
.kz-pack-art {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--kz-sand);
}
.kz-pack-art img {
  width: 100%; height: auto; aspect-ratio: 16 / 11;
  object-fit: cover; display: block;
}
.kz-pack-free {
  position: absolute; top: 9px; left: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #0F5132; background: #C7F0D8; padding: 3px 9px; border-radius: 99px;
}

.kz-pack-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.kz-pack-tier { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.kz-pack-tier a { color: #2B2619; text-decoration: none; }
.kz-pack-tier a:hover { color: var(--kz-orange-d); text-decoration: none; }
.kz-pack-full {
  display: block; font-size: 12.5px; font-weight: 400; color: #8A8071; margin-top: 2px;
}
.kz-pack-spec { margin: 7px 0 0; font-size: 12.5px; color: #6A6152; }

.kz-pack-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 13px;
}
.kz-pack-price { font-size: 16px; font-weight: 700; color: #2B2619; font-variant-numeric: tabular-nums; }
.kz-pack-price.is-free { color: #0F7B4E; }
.kz-pack-go {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: #fff; background: #27237F; padding: 7px 15px; border-radius: 9px;
}
.kz-pack-go:hover { color: #fff; text-decoration: none; background: #1B1860; }

/* ── The cross-sell band ──────────────────────────────────────────────────
   The one block on the page that addresses the OTHER audience, so it reads as
   an aside: violet, away from both the hero's sky and the shelf's sand.
   Flat colour under the gradient for an older WebView, which drops the whole
   declaration otherwise and would leave white type on nothing. */
.kz-band {
  margin: 46px 0 0; padding: 30px 32px; border-radius: 20px;
  background: #4c1d95;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
  color: #fff;
}
.kz-band-inner { max-width: 72ch; }
.kz-band-title {
  margin: 0 0 10px; font-size: clamp(19px, 3vw, 23px); font-weight: 700;
  line-height: 1.3; color: #fff;
}
.kz-band-text { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.88); }
.kz-band-cta { margin-top: 18px; }
.kz-band-cta .hn-btn-ghost {
  border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08);
}
.kz-band-cta .hn-btn-ghost:hover {
  border-color: #fff; background: rgba(255,255,255,.18); color: #fff;
}

/* ══ Phone ═══════════════════════════════════════════════════════════════
   THE PAGE WAS 5,453px HERE, and the jigsaw — the only thing on it that answers
   "can my four year old actually do this?" — began 380px down and finished
   underneath the app's floating tab bar.

   It had stacked copy over puzzle, on the reasoning that a jigsaw a thumb cannot
   hit is not a demo. That is still true, and 132px of board is still 56px a tile,
   which clears Android's 48dp target. What stacking cost was everything above the
   board: a badge, a two-line headline, four lines of copy, a full-width button and
   a note, all read before the demo was reached.

   So the phone gets the desktop's own arrangement, shrunk into a card: board
   beside copy, the whole hero inside half a screen. Below it the shelf folds — see
   the tiles further down. */
@media ( max-width: 767.98px ) {
  .kz-hero { padding-bottom: 26px; }

  /* The card itself. Translucent rather than solid, so the sky and the cut-outs
     drifting through it are still the hero's ground rather than something going on
     behind a white box.

     Two columns that flow independently: board over caption on the left, copy over
     button on the right. 132px of board is a 56px tile, well clear of Android's
     48dp target, and leaves 190px — enough for "Start with the free pack" on one
     line beside it at 13px, which is what the button is sized for. */
  .kz-hero-in {
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-areas: "play copy" "cap go";
    gap: 0 13px; padding: 12px; margin-top: 24px;
    align-items: start;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(23,69,107,.10);
    border-radius: 20px;
  }
  /* Both of these are desktop's. The age is in the headline here and the note says
     of a button labelled "free" that it is free; on a card this size each is a line
     spent twice. They stay in the document for the width that has room for them. */
  .kz-age { display: none; }
  .kz-cta-note { display: none; }
  .kz-title { font-size: 19px; line-height: 1.14; margin-bottom: 7px; }
  .kz-sub { font-size: 11.5px; line-height: 1.45; max-width: none; margin-bottom: 0; }
  .kz-hero-go { margin-top: 10px; }
  .kz-cta { font-size: 13px; padding: 9px 16px; }
  .kz-cta-full { display: none; }
  .kz-cta-brief { display: inline; }
  .kz-puzzle { padding: 6px; gap: 5px; border-radius: 14px; }
  .kz-puzzle-cap { font-size: 11px; line-height: 1.3; margin-top: 8px; min-height: 15px; }

  /* Four facts as chips. They wrapped as one paragraph before, breaking a sentence
     wherever the line happened to end — "Nothing is marked wrong" on one line and
     "no negative marking, no pass mark" 22px away on the next. The explanatory half
     of each is desktop's; here the four titles are the four facts, and they fit in
     two rows instead of six. */
  .kz-safety {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0; margin: 16px 0 20px; border: 0;
  }
  .kz-safety li {
    display: block; font-size: 10.5px; line-height: 1;
    background: #E8F3DF; border-radius: 99px; padding: 6px 11px;
  }
  .kz-safety b { font-size: 10.5px; font-weight: 600; color: #4B5B45; }
  .kz-safety-dot,
  .kz-safety-note { display: none; }

  .kz-band { padding: 24px 20px; margin-top: 34px; }
  .kz-section-gap { margin-top: 36px; }
  /* The eyebrow says "Pick an activity" directly above a heading that asks which
     activity. One of the two is enough at this width, and the heading is the half
     that is a question. */
  .kz-body .hn-section-eyebrow { display: none; }
  .kz-body .hn-section-title { font-size: 19px; }
  .kz-lede { margin-top: 6px; font-size: 12px; line-height: 1.5; }
  .kz-packs,
  .kz-packs--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; }

  /* ── The family, as a tile ──────────────────────────────────────────────
     Four bands one after another, each with a four-card ladder under it, was
     sixteen cards down a single column: seven screens to see what is on offer.

     A tile is a 104px row — pictures beside the name — so four of them are one
     screen and the whole shelf is legible without a scroll. The ladder opens
     BELOW it rather than inside it, which is why .kz-fam gives up its border and
     .kz-fam-tile takes the card. */
  .kz-shelf { gap: 11px; }
  .kz-fam {
    display: block; border: 0; background: none; border-radius: 0; overflow: visible;
  }
  .kz-fam-tile {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 5px 16px -10px rgba(40,30,20,.6);
  }

  .kz-fam-pics { display: grid; grid-template-columns: 1fr 1fr; background: var(--kz-sand); }
  .kz-fam-pics img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

  /* The band is the control, not the button inside it: a <button> may not contain
     a heading, and a ::after stretched out of an absolutely-positioned button is
     measured against the button, not the band. kids-zone.js listens on the band. */
  .kz-fam-band {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 104px; padding: 11px 12px;
  }
  /* Only a band with something to fold looks like something to press. The modifier
     is put on by PHP rather than found with :has(): that selector is Chrome 105, and
     the WebView on a phone three years old would drop the whole rule. */
  .kz-fam-band--opens { cursor: pointer; }
  .kz-fam-name { font-size: 16.5px; line-height: 1.14; }
  /* The long sentence and the format chips are desktop's — see .kz-fam-short in the
     view for why the tile says the same thing in five words instead of clamping this
     one in half. */
  .kz-fam-what,
  .kz-fam-chips,
  .kz-fam-tail { display: none; }
  .kz-fam-short {
    display: block; margin: 4px 0 0;
    font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.9);
  }

  .kz-fam-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 9px;
  }
  .kz-fam-from {
    display: block; margin: 0;
    font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.95);
  }
  .kz-fam-from .fa { margin-right: 1px; font-size: 10px; }

  .kz-fam-toggle {
    display: grid; place-items: center; flex: none;
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 99px;
    background: rgba(255,255,255,.22); color: #fff; font-size: 10px; cursor: pointer;
    transition: transform .2s ease;
  }
  .kz-fam-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .kz-fam-toggle[aria-expanded="true"] { transform: rotate(180deg); }

  /* Outside the tile, not inside it: a 22px chevron is a small target, so the tile
     itself is the control, and the ladder is a plain grid on the page's own ground. */
  .kz-rungs { padding: 11px 0 0; gap: 10px; }

  /* A rung is 171px wide in a two-up ladder, and the card was built for 232.
     "See inside" broke over two lines inside its own button and took the price
     row with it, so every card carried a 13px stripe of nothing. Nowrap on the
     button, and the padding it needs taken off the card body rather than off
     the picture. */
  .kz-pack-body { padding: 10px 11px 12px; }
  .kz-pack-age { font-size: 10px; padding: 3px 7px; }
  .kz-pack-tier { font-size: 14.5px; }
  .kz-pack-spec { font-size: 11.5px; }
  .kz-pack-foot { gap: 8px; padding-top: 10px; }
  .kz-pack-price { font-size: 14px; }
  .kz-pack-go { font-size: 11.5px; padding: 6px 10px; white-space: nowrap; }
}

/* Two up before one up, and never three: four rungs on three columns leaves one
   pack alone on the second line of every family, which reads as a fifth thing that
   did not fit rather than as the top of a ladder. */
@media ( max-width: 1023.98px ) {
  .kz-rungs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* IT USED TO DROP TO ONE COLUMN HERE, which is what made the shelf seven screens
   long. Inside a tile that opens, the ladder is meant to be read as four rungs at
   once, so it stays two up: a 171px card is small, but the four scenes a parent
   chooses a FAMILY by are on the tile above it now, at four across. */

@media ( prefers-reduced-motion: reduce ) {
  .kz-cta, .kz-tile, .kz-pack, .kz-fam-toggle { transition: none; }
  .kz-cut > i { animation: none; }
}