/* ============================================================
   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 ───────────────────────────────────────────────── */
.au-captcha-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.au-captcha-img {
  height: 48px; border-radius: var(--au-r-sm);
  border: 1.5px solid var(--au-gray-200); background: var(--au-gray-50);
}
.au-captcha-refresh {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--au-navy-50);
  border: 1.5px solid var(--au-navy-200); border-radius: var(--au-r-sm);
  color: var(--au-navy-600); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--au-fast) var(--au-ease);
}
.au-captcha-refresh:hover { background: var(--au-navy-100); }

/* ── 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;
}

.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;
  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); }

.co-checkout-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.co-checkout-brand img { width: 44px; height: 44px; object-fit: contain; border-radius: 9px; }
.co-checkout-brand div { display: grid; gap: 1px; }
.co-checkout-brand strong { font-size: 16px; color: #0f172a; }
.co-checkout-brand span { font-size: 12.5px; color: #64748b; }
.co-checkout-brand span i { color: #16a34a; }
.co-checkout-brand em { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: 12px; font-style: normal; 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; }

@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; }
  .co-exam-package-checkout .co-summary { display: none; }
  .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; }
  .co-steps li + li::before { width: 14px; }
  .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; }
  .co-checkout-page .co-steps { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .co-checkout-page .co-steps li { white-space: nowrap; }
  .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; }
}