/* homepage-new.css — placeholder */

/* ============================================================
   homepage-new.css  —  Education Platform Homepage
   Palette: Navy Blue · Warm Orange · Fresh Green · White
   No dark backgrounds — bright, energetic, education-first.
   ============================================================ */

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

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Navy Blue family */
  --hn-navy-900: #0a1628;
  --hn-navy-800: #0d2045;
  --hn-navy-700: #1a3a6b;
  --hn-navy-600: #1e4d8c;
  --hn-navy-500: #2563b0;   /* primary navy */
  --hn-navy-400: #3b82d4;
  --hn-navy-300: #7eb3e8;
  --hn-navy-100: #dbeafe;
  --hn-navy-50:  #eff6ff;

  /* Orange family */
  --hn-orange-600: #c2410c;
  --hn-orange-500: #ea580c;  /* primary orange */
  --hn-orange-400: #f97316;
  --hn-orange-300: #fb923c;
  --hn-orange-100: #ffedd5;
  --hn-orange-50:  #fff7ed;

  /* Green family */
  --hn-green-700: #15803d;
  --hn-green-600: #16a34a;
  --hn-green-500: #22c55e;   /* primary green */
  --hn-green-400: #4ade80;
  --hn-green-100: #dcfce7;
  --hn-green-50:  #f0fdf4;

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

  /* Semantic */
  --hn-primary:       var(--hn-navy-500);
  --hn-primary-dark:  var(--hn-navy-700);
  --hn-primary-light: var(--hn-navy-50);
  --hn-accent:        var(--hn-orange-500);
  --hn-accent-light:  var(--hn-orange-50);
  --hn-success:       var(--hn-green-600);
  --hn-success-light: var(--hn-green-50);
  --hn-text:          var(--hn-gray-800);
  --hn-text-secondary:var(--hn-gray-600);
  --hn-text-muted:    var(--hn-gray-400);
  --hn-border:        var(--hn-gray-200);
  --hn-bg:            #f0f5ff;
  --hn-bg-alt:        #f8faff;
  --hn-card-bg:       var(--hn-white);

  /* Gradients */
  --hn-grad-navy:    linear-gradient(135deg, #1a3a6b 0%, #2563b0 100%);
  --hn-grad-orange:  linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  --hn-grad-green:   linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  --hn-grad-hero:    linear-gradient(150deg, #1a3a6b 0%, #2563b0 55%, #1e6fa8 100%);
  --hn-grad-hero-warm: linear-gradient(150deg, #0d2045 0%, #1a3a6b 40%, #2563b0 100%);
  --hn-grad-footer:  linear-gradient(160deg, #0d2045 0%, #1a3a6b 100%);
  --hn-grad-card-navy: linear-gradient(135deg, #1e4d8c 0%, #2563b0 100%);
  --hn-grad-card-orange: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
  --hn-grad-card-green: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);

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

  /* Radii */
  --hn-r-sm:   6px;
  --hn-r-md:   12px;
  --hn-r-lg:   18px;
  --hn-r-xl:   24px;
  --hn-r-2xl:  32px;
  --hn-r-full: 9999px;

  /* Motion */
  --hn-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --hn-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hn-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --hn-fast:   150ms;
  --hn-normal: 250ms;
  --hn-slow:   400ms;

  --hn-navbar-h: 68px;
  --hn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hn-font-head: 'Poppins', 'Inter', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────── */
.hn-body {
  font-family: var(--hn-font-body);
  font-size: 15px;
  color: var(--hn-text);
  background: var(--hn-bg);
  line-height: 1.6;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
}
.hn-body *, .hn-body *::before, .hn-body *::after { box-sizing: border-box; }
.hn-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hn-container { width:100%;max-width:1200px;margin:0 auto;padding:0 24px; }

/* ── Navbar ────────────────────────────────────────────────── */
.hn-navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--hn-navbar-h);
  background: var(--hn-white);
  border-bottom: 2px solid var(--hn-navy-100);
  box-shadow: 0 2px 16px rgba(37,99,176,.10);
  transition: box-shadow var(--hn-normal) var(--hn-ease);
}
.hn-navbar.hn-navbar-scrolled {
  box-shadow: 0 4px 24px rgba(37,99,176,.18);
}
.hn-navbar-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; max-width:1200px; margin:0 auto; padding:0 24px;
}
.hn-brand { display:flex; align-items:center; text-decoration:none; flex-shrink:0; gap:10px; }
.hn-brand-logo { height:40px; width:auto; }
.hn-brand-text {
  font-family: var(--hn-font-head);
  font-size: 22px; font-weight:800;
  color: var(--hn-navy-700);
  letter-spacing: -0.03em;
}
.hn-brand-tagline {
  font-size: 10px; font-weight:600; color: var(--hn-orange-500);
  letter-spacing: 0.08em; text-transform:uppercase;
  display:block; margin-top:-2px;
}
.hn-nav-links { display:flex; align-items:center; gap:4px; }
.hn-nav-link {
  color: var(--hn-gray-600); text-decoration:none;
  font-size:14px; font-weight:500; padding:8px 14px;
  border-radius: var(--hn-r-sm);
  transition: color var(--hn-fast) var(--hn-ease), background var(--hn-fast) var(--hn-ease);
}
.hn-nav-link:hover { color: var(--hn-navy-600); background: var(--hn-navy-50); }

/* Buttons */
.hn-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family: var(--hn-font-body); font-size:14px; font-weight:600;
  letter-spacing:0.02em; border:none; border-radius: var(--hn-r-md);
  cursor:pointer; text-decoration:none; padding:10px 20px; min-height:44px;
  transition: transform var(--hn-fast) var(--hn-ease-bounce),
              box-shadow var(--hn-fast) var(--hn-ease),
              background var(--hn-fast) var(--hn-ease);
  white-space:nowrap;
}
.hn-btn:focus-visible { outline:2px solid var(--hn-navy-500); outline-offset:3px; }

.hn-btn-outline {
  background:transparent; color: var(--hn-navy-600);
  border:1.5px solid var(--hn-navy-300);
}
.hn-btn-outline:hover {
  background: var(--hn-navy-50); border-color: var(--hn-navy-500);
  color: var(--hn-navy-700); text-decoration:none; transform:translateY(-1px);
}
.hn-btn-primary {
  background: var(--hn-grad-navy); color:#fff;
  box-shadow: var(--hn-shadow-navy);
}
.hn-btn-primary:hover {
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,99,176,.40);
  color:#fff; text-decoration:none;
}
.hn-btn-orange {
  background: var(--hn-grad-orange); color:#fff;
  box-shadow: var(--hn-shadow-orange);
}
.hn-btn-orange:hover {
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(234,88,12,.40);
  color:#fff; text-decoration:none;
}
.hn-btn-login {
  background: var(--hn-grad-orange); color:#fff; width:100%;
  height:50px; font-size:15px; font-weight:700;
  border-radius: var(--hn-r-md); box-shadow: var(--hn-shadow-orange); margin-top:8px;
}
.hn-btn-login:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(234,88,12,.45); color:#fff; }
.hn-btn-card {
  background: var(--hn-grad-navy); color:#fff; font-size:13px;
  padding:9px 18px; min-height:38px; border-radius: var(--hn-r-sm);
  box-shadow:0 4px 12px rgba(37,99,176,.22);
}
.hn-btn-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,99,176,.35); color:#fff; }

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

/* ── Hero Section — Redesigned ─────────────────────────────── */
.hn-hero {
  position: relative;
  background: linear-gradient(135deg, #060d1f 0%, #0d1f45 35%, #0f2d5e 65%, #0a1a3a 100%);
  padding-top: var(--hn-navbar-h);
  overflow: hidden;
  min-height: calc(100vh - var(--hn-navbar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Slide-linked hero background photography ──────────────────
   One photo layer per feature-slider card, sitting behind the
   navy gradient. homepage-new.js toggles .is-active / .is-leaving
   so the backdrop cross-fades with the card while the slow drift
   keeps running (play-state only — never restarts, never jumps).
   Photos: Unsplash License — see Webroot/images/hero/CREDITS.txt
   ──────────────────────────────────────────────────────────── */
.hn-hero-bg {
  /* Starts below the fixed navbar, not at the top of the section. The navbar is
     opaque, so a photo that began at 0 lost its top --hn-navbar-h behind it —
     wasted pixels, and background-position:center framed the photo against a
     box taller than the one actually on screen. */
  position: absolute; inset: var(--hn-navbar-h) 0 0 0;
  overflow: hidden;
  pointer-events: none;
}

.hn-hero-bg-layer {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1400ms var(--hn-ease);
  animation: hn-bg-drift 28s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: opacity, transform;
}
.hn-hero-bg-layer.is-active { opacity: 1; }
/* Keep the drift running through the fade-out so the outgoing
   photo never snaps back to its start frame. */
.hn-hero-bg-layer.is-active,
.hn-hero-bg-layer.is-leaving { animation-play-state: running; }

@keyframes hn-bg-drift {
  from { transform: scale(1.12) translate3d(-1.6%, -1.1%, 0); }
  to   { transform: scale(1.21) translate3d( 1.6%,  1.1%, 0); }
}

/* Per-card accent wash — echoes the slider icon colour so the
   backdrop reads as "this card's" background. */
.hn-hero-bg-layer::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 95% at 72% 32%,
              var(--hn-bg-accent, transparent) 0%, transparent 68%);
  mix-blend-mode: screen;
}

/* Per-photo exposure trim keeps all four frames at a similar
   brightness so the cross-fade never flashes light or dark. */
.hn-hero-bg-layer[data-bg="secure"] {
  --hn-bg-accent: rgba(59,130,212,.40);
  filter: brightness(.95) saturate(1.05);
  background-image: url("../images/hero/hero-secure.jpg");
  background-image: image-set("../images/hero/hero-secure.webp" type("image/webp"),
                              "../images/hero/hero-secure.jpg"  type("image/jpeg"));
}
.hn-hero-bg-layer[data-bg="analytics"] {
  --hn-bg-accent: rgba(249,115,22,.32);
  filter: brightness(.58) saturate(1.15);
  background-image: url("../images/hero/hero-analytics.jpg");
  background-image: image-set("../images/hero/hero-analytics.webp" type("image/webp"),
                              "../images/hero/hero-analytics.jpg"  type("image/jpeg"));
}
.hn-hero-bg-layer[data-bg="devices"] {
  --hn-bg-accent: rgba(74,222,128,.28);
  filter: brightness(.55) saturate(1.10);
  background-image: url("../images/hero/hero-devices.jpg");
  background-image: image-set("../images/hero/hero-devices.webp" type("image/webp"),
                              "../images/hero/hero-devices.jpg"  type("image/jpeg"));
}
.hn-hero-bg-layer[data-bg="packages"] {
  --hn-bg-accent: rgba(167,139,250,.32);
  filter: brightness(.82) saturate(1.05);
  background-image: url("../images/hero/hero-packages.jpg");
  background-image: image-set("../images/hero/hero-packages.webp" type("image/webp"),
                              "../images/hero/hero-packages.jpg"  type("image/jpeg"));
}

/* Navy scrim: darkest under the headline column, lifting towards
   the right so the photograph stays visible around the login card. */
.hn-hero-bg-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 20% 48%, rgba(3,8,20,.62) 0%, rgba(3,8,20,0) 72%),
    linear-gradient(100deg,
      rgba(4,10,24,.92) 0%,
      rgba(6,15,35,.86) 30%,
      rgba(8,22,52,.74) 60%,
      rgba(11,34,76,.62) 100%),
    linear-gradient(to bottom,
      rgba(6,13,31,.62) 0%,
      rgba(6,13,31,0) 26%,
      rgba(6,13,31,0) 70%,
      rgba(6,13,31,.72) 100%);
}

/* Mesh gradient orbs */
.hn-hero-orb {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(80px);
}
.hn-hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,176,.45) 0%, transparent 70%);
  top: -150px; left: -100px;
  animation: hn-orb-drift 18s ease-in-out infinite;
}
.hn-hero-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(234,88,12,.30) 0%, transparent 70%);
  bottom: -100px; right: -80px;
  animation: hn-orb-drift 22s ease-in-out infinite reverse;
}
.hn-hero-orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(34,197,94,.18) 0%, transparent 70%);
  top: 40%; left: 40%;
  animation: hn-orb-drift 28s ease-in-out infinite 4s;
}
@keyframes hn-orb-drift {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.05); }
  66%      { transform: translate(-20px, 30px) scale(0.97); }
}

/* Subtle dot-grid overlay */
.hn-hero-grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

@keyframes hn-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Hero grid layout */
.hn-hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 56px;
  position: relative; z-index: 1;
}

/* ── Hero Left ─────────────────────────────────────────────── */
.hn-hero-left {
  display: flex; flex-direction: column;
}

/* Eyebrow */
.hn-hero-eyebrow {
  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);
  margin-bottom: 18px; width: fit-content;
}
.hn-hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hn-orange-400);
  box-shadow: 0 0 8px rgba(249,115,22,.8);
  animation: hn-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Headline */
.hn-hero-headline {
  font-family: var(--hn-font-head);
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 800; color: #fff;
  line-height: 1.12; letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.hn-hero-headline-accent {
  background: linear-gradient(90deg, #fb923c 0%, #f97316 50%, #fbbf24 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sub */
.hn-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.65);
  line-height: 1.7; margin: 0 0 28px; max-width: 500px;
}

/* ── Feature Slider ────────────────────────────────────────── */
.hn-fslider {
  position: relative;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--hn-r-xl);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Slide track */
.hn-fslider-track { position: relative; min-height: 160px; }

/* Individual slides */
.hn-fslider-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 24px 20px;
  opacity: 0; pointer-events: none;
  transform: translateX(20px);
  transition:
    opacity 450ms var(--hn-ease),
    transform 450ms var(--hn-ease);
}
.hn-fslider-slide.active {
  opacity: 1; pointer-events: auto;
  transform: translateX(0);
  position: relative;
}
.hn-fslider-slide.exit {
  opacity: 0;
  transform: translateX(-20px);
}

/* Icon */
.hn-fslider-icon-wrap { flex-shrink: 0; }
.hn-fslider-icon {
  width: 52px; height: 52px; border-radius: var(--hn-r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.hn-fslider-icon--navy  { background: linear-gradient(135deg, #1a3a6b, #3b82d4); }
.hn-fslider-icon--orange{ background: linear-gradient(135deg, #c2410c, #f97316); }
.hn-fslider-icon--green { background: linear-gradient(135deg, #15803d, #4ade80); }
.hn-fslider-icon--purple{ background: linear-gradient(135deg, #6d28d9, #a78bfa); }

/* Content */
.hn-fslider-content { flex: 1; min-width: 0; }
.hn-fslider-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,.50);
  margin-bottom: 5px;
}
.hn-fslider-title {
  font-family: var(--hn-font-head);
  font-size: 17px; font-weight: 700; color: #fff;
  margin: 0 0 7px; line-height: 1.3;
}
.hn-fslider-desc {
  font-size: 13px; color: rgba(255,255,255,.62);
  line-height: 1.65; margin: 0 0 14px;
}
.hn-fslider-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--hn-orange-300);
  text-decoration: none;
  transition: gap var(--hn-fast) var(--hn-ease), color var(--hn-fast) var(--hn-ease);
}
.hn-fslider-cta:hover { color: var(--hn-orange-400); gap: 10px; text-decoration: none; }
.hn-fslider-cta i { font-size: 11px; }

/* Slider footer: dots + nav */
.hn-fslider-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}
.hn-fslider-dots { display: flex; align-items: center; gap: 6px; }
.hn-fslider-dot {
  height: 6px; border-radius: var(--hn-r-full);
  background: rgba(255,255,255,.25); border: none; cursor: pointer; padding: 0;
  transition: background var(--hn-fast) var(--hn-ease), width var(--hn-normal) var(--hn-ease);
  width: 6px;
}
.hn-fslider-dot.active { background: var(--hn-orange-400); width: 24px; }
.hn-fslider-dot:hover:not(.active) { background: rgba(255,255,255,.50); }

.hn-fslider-nav { display: flex; gap: 6px; }
.hn-fslider-btn {
  width: 32px; height: 32px; border-radius: var(--hn-r-sm);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.70); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--hn-fast) var(--hn-ease), color var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease-bounce);
}
.hn-fslider-btn:hover { background: rgba(255,255,255,.20); color: #fff; transform: scale(1.08); }

/* Progress bar */
.hn-fslider-progress {
  height: 2px; background: rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}
.hn-fslider-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--hn-orange-500), var(--hn-orange-300));
  width: 0%;
  transition: width 100ms linear;
}

/* Stats strip */
.hn-stats-strip {
  display: flex; align-items: center;
  background: rgba(255,255,255,.07); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--hn-r-lg); padding: 14px 20px;
}
.hn-stat { display: flex; align-items: center; gap: 10px; flex: 1; }
.hn-stat-divider { width: 1px; height: 32px; background: rgba(255,255,255,.14); margin: 0 4px; }
.hn-stat-icon {
  width: 38px; height: 38px; background: rgba(255,255,255,.10);
  border-radius: var(--hn-r-sm); display: flex; align-items: center; justify-content: center;
  color: var(--hn-orange-300); font-size: 15px; flex-shrink: 0;
}
.hn-stat-num { display: block; font-size: 19px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.hn-stat-label { display: block; font-size: 10px; color: rgba(255,255,255,.50); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }

/* ── Login Card (Right) ────────────────────────────────────── */
.hn-hero-right {
  display: flex; align-items: center; justify-content: center;
}

.hn-login-card {
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--hn-r-2xl);
  box-shadow:
    0 32px 80px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.30);
  animation: hn-slide-up var(--hn-slow) var(--hn-ease-spring) both;
  animation-delay: 100ms;
}
@keyframes hn-slide-up {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Top accent bar */
.hn-login-card-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, #1a3a6b 0%, #2563b0 40%, #ea580c 70%, #f97316 100%);
}

/* Card header — mark, heading, dismiss on one row.

   Stacked and centred this block ran 164px tall before a single field, and its
   centre axis disagreed with the left-aligned labels underneath. On the phone
   sheet that was 138px of 623px spent on a graduation-cap icon the navbar was
   already showing. The row keeps the mark, loses the height, and lines the
   heading up with the form. */
.hn-login-card-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 26px 16px;
  border-bottom: 1px solid var(--hn-gray-100);
}
.hn-login-brand-mark {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, #1a3a6b, #2563b0);
  border-radius: var(--hn-r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,176,.30);
}
/* min-width:0 so a long subtitle wraps instead of stretching the row. The
   institution template's subtitle is real instruction — "use the credentials
   issued by your examination centre" — not decoration, so it has to survive
   the narrowest sheet rather than being clipped or hidden. */
.hn-login-heading { min-width: 0; flex: 1 1 auto; }
.hn-login-title {
  font-family: var(--hn-font-head);
  font-size: 19px; font-weight: 800; color: var(--hn-navy-800);
  margin: 0; letter-spacing: -0.02em; line-height: 1.25;
}
.hn-login-subtitle {
  font-size: 12.5px; color: var(--hn-gray-500); margin: 3px 0 0; line-height: 1.4;
}

/* Card body */
.hn-login-card-body { padding: 22px 26px 18px; }

/* Input with leading icon */
.hn-input-icon-wrap { position: relative; }
.hn-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--hn-gray-400); font-size: 13px; pointer-events: none;
  z-index: 1;
}
.hn-input-with-icon { padding-left: 38px !important; }

/* Divider */
.hn-login-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px;
  color: var(--hn-gray-400); font-size: 12px;
}
.hn-login-divider::before,
.hn-login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--hn-gray-200);
}

/* Sign-up outline button */
.hn-btn-signup-outline {
  width: 100%; justify-content: center;
  background: transparent; color: var(--hn-navy-600);
  border: 1.5px solid var(--hn-navy-200);
  font-size: 14px; font-weight: 600;
  padding: 11px 20px; min-height: 44px;
  border-radius: var(--hn-r-md);
  transition: background var(--hn-fast) var(--hn-ease), border-color var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease-bounce);
}
.hn-btn-signup-outline:hover {
  background: var(--hn-navy-50); border-color: var(--hn-navy-400);
  color: var(--hn-navy-700); text-decoration: none; transform: translateY(-1px);
}

/* Trust badges */
.hn-login-trust {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 12px;
  padding: 9px 22px 10px;
  border-top: 1px solid var(--hn-gray-100);
  background: var(--hn-gray-50);
}
.hn-trust-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--hn-gray-400); font-weight: 500;
}
.hn-trust-item i { color: var(--hn-green-600); font-size: 10px; }
.hn-trust-sep { color: var(--hn-gray-300); font-size: 12px; }

/* Form */
.hn-form-group { margin-bottom:16px; }
.hn-label {
  display:flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; color: var(--hn-gray-600);
  letter-spacing:0.07em; text-transform:uppercase; margin-bottom:6px;
}
.hn-label i { font-size:10px; color: var(--hn-navy-500); }
.hn-input-wrapper { position:relative; }
.hn-input {
  width:100%; height:46px; padding:0 14px;
  font-family: var(--hn-font-body); font-size:15px; color: var(--hn-text);
  background: var(--hn-gray-50); border:1.5px solid var(--hn-border);
  border-radius: var(--hn-r-md); outline:none;
  transition: border-color var(--hn-fast) var(--hn-ease), box-shadow var(--hn-fast) var(--hn-ease), background var(--hn-fast) var(--hn-ease);
  -webkit-appearance:none; appearance:none;
}
.hn-input:hover:not(:focus) { border-color: var(--hn-gray-300); }
.hn-input:focus { background:#fff; border-color: var(--hn-navy-500); box-shadow:0 0 0 3px rgba(37,99,176,.14); }
/* Empty-field state from the sign-in button's own check. A class rather than
   the inline border-color/box-shadow it used to write, so :focus can still win
   when the visitor goes back to fix the field. */
.hn-input.hn-input-error { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.hn-input.hn-input-error:focus { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.28); }
.hn-input-wrapper .hn-input { padding-right:46px; }
.hn-toggle-pass {
  position:absolute; right:0; top:0; width:46px; height:46px;
  background:none; border:none; cursor:pointer; color: var(--hn-gray-400);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:color var(--hn-fast) var(--hn-ease);
}
.hn-toggle-pass:hover { color: var(--hn-navy-500); }

.hn-form-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; gap:8px;
}
.hn-checkbox-label {
  display:flex; align-items:center; gap:7px;
  font-size:13px; color: var(--hn-gray-600); cursor:pointer; user-select:none;
}
.hn-checkbox { position:absolute; opacity:0; width:0; height:0; }
.hn-checkbox-custom {
  width:17px; height:17px; border:1.5px solid var(--hn-border);
  border-radius:4px; background: var(--hn-gray-50);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: border-color var(--hn-fast) var(--hn-ease), background var(--hn-fast) var(--hn-ease);
}
.hn-checkbox:checked + .hn-checkbox-custom { background: var(--hn-navy-500); border-color: var(--hn-navy-500); }
.hn-checkbox:checked + .hn-checkbox-custom::after {
  content:''; display:block; width:5px; height:9px;
  border:2px solid #fff; border-top:none; border-left:none;
  transform:rotate(45deg) translateY(-1px);
}
.hn-checkbox:focus-visible + .hn-checkbox-custom { outline:2px solid var(--hn-navy-500); outline-offset:2px; }

.hn-link-muted { font-size:13px; color: var(--hn-gray-400); text-decoration:none; transition:color var(--hn-fast) var(--hn-ease); }
.hn-link-muted:hover { color: var(--hn-navy-500); }
.hn-link-primary { color: var(--hn-navy-600); font-weight:600; text-decoration:none; transition:color var(--hn-fast) var(--hn-ease); }
.hn-link-primary:hover { color: var(--hn-navy-800); }
.hn-link-info { color: var(--hn-navy-500); font-size:13px; text-decoration:none; transition:color var(--hn-fast) var(--hn-ease); }
.hn-link-info:hover { color: var(--hn-navy-700); }

.hn-signup-prompt { text-align:center; font-size:13px; color: var(--hn-gray-500); margin:14px 0 0; }

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

/* ── Sign-in sheet (phones) ────────────────────────────────────
   Above 767.98px none of this is visible: the shell is `display: contents`, so
   the card stays exactly the direct child of .hn-hero-right / .hn-portal-login
   / .hn-academy-right that it has always been, and the trigger row, grip, close
   button, scrim and navbar button are all display:none.

   Below it the shell becomes a bottom sheet parked off-screen. That is what
   gets the hero back: the card was ~660px of a 844px screen, so a phone opened
   on a login form instead of on the page.
   ──────────────────────────────────────────────────────────── */
.hn-login-shell { display: contents; }
.hn-login-sheet-grip,
.hn-login-sheet-close,
.hn-login-scrim,
.hn-login-trigger-row,
.hn-navbar-signin { display: none; }

/* ── Sections ──────────────────────────────────────────────── */
.hn-section { padding:72px 0; background: var(--hn-bg); }
.hn-section-alt { background: var(--hn-white); }
.hn-section-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:36px; gap:16px;
}
.hn-section-eyebrow {
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color: var(--hn-orange-500); background: var(--hn-orange-50);
  padding:4px 12px; border-radius: var(--hn-r-full); margin-bottom:8px;
  border:1px solid var(--hn-orange-100);
}
.hn-section-title {
  font-family: var(--hn-font-head);
  font-size:26px; font-weight:800; color: var(--hn-navy-800);
  letter-spacing:-0.02em; margin:0;
  display:flex; align-items:center; gap:10px;
}
.hn-section-title i { color: var(--hn-navy-500); font-size:22px; }
.hn-view-all {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color: var(--hn-navy-600);
  text-decoration:none; padding:8px 16px;
  border:1.5px solid var(--hn-navy-200, #bfdbfe);
  border-radius: var(--hn-r-full); white-space:nowrap;
  transition: background var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease-bounce);
}
.hn-view-all:hover { background: var(--hn-navy-50); transform:translateX(2px); text-decoration:none; color: var(--hn-navy-800); }

/* Cards grid */
.hn-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* Badges */
.hn-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:4px 10px; border-radius: var(--hn-r-full);
}
.hn-badge-live { background:rgba(234,88,12,.10); color: var(--hn-orange-600); border:1px solid rgba(234,88,12,.2); }
.hn-badge-dot {
  width:6px; height:6px; background: var(--hn-orange-500); border-radius:50%;
  animation: hn-pulse 1.5s ease-in-out infinite;
}
@keyframes hn-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.8);} }
.hn-badge-free { background: var(--hn-green-50); color: var(--hn-green-700); border:1px solid var(--hn-green-100); }
.hn-badge-paid { background: var(--hn-orange-50); color: var(--hn-orange-600); border:1px solid var(--hn-orange-100); }

/* Exam Cards */
.hn-exam-card {
  background: var(--hn-white); border-radius: var(--hn-r-lg);
  box-shadow: var(--hn-shadow-md); overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--hn-gray-100);
  transition: transform var(--hn-normal) var(--hn-ease), box-shadow var(--hn-normal) var(--hn-ease), border-color var(--hn-normal) var(--hn-ease);
  animation: hn-fade-in var(--hn-slow) var(--hn-ease) both;
}
.hn-exam-card:hover { transform:translateY(-5px); box-shadow: var(--hn-shadow-card); border-color: var(--hn-navy-100); }
.hn-exam-card-accent { height:4px; background: var(--hn-grad-navy); }
.hn-exam-card-body { padding:18px 18px 14px; flex:1; }
.hn-exam-card-badge { margin-bottom:10px; }
.hn-exam-card-title {
  font-size:15px; font-weight:700; color: var(--hn-navy-800);
  margin:0 0 12px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  /* Exam names are free text; an unbroken one is wider than a phone. */
  overflow-wrap:anywhere;
}
.hn-exam-card-meta { display:flex; flex-wrap:wrap; gap:7px; }
.hn-card-meta-item {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color: var(--hn-gray-600);
  background: var(--hn-navy-50); padding:4px 10px;
  border-radius: var(--hn-r-full); font-weight:500;
}
.hn-card-meta-item i { color: var(--hn-navy-500); font-size:11px; }
.hn-exam-card-footer { padding:12px 18px 18px; border-top:1px solid var(--hn-gray-100); }

/* Package Cards */
.hn-pkg-card {
  background: var(--hn-white); border-radius: var(--hn-r-lg);
  box-shadow: var(--hn-shadow-md); overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--hn-gray-100);
  transition: transform var(--hn-normal) var(--hn-ease), box-shadow var(--hn-normal) var(--hn-ease), border-color var(--hn-normal) var(--hn-ease);
  animation: hn-fade-in var(--hn-slow) var(--hn-ease) both;
}
.hn-pkg-card:hover { transform:translateY(-5px); box-shadow: var(--hn-shadow-card); border-color: var(--hn-navy-100); }
.hn-pkg-card-img-wrap { width:100%; aspect-ratio:16/9; overflow:hidden; background: var(--hn-bg); }
.hn-pkg-card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--hn-slow) var(--hn-ease); }
.hn-pkg-card:hover .hn-pkg-card-img { transform:scale(1.04); }
.hn-pkg-card-img-placeholder {
  width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg, var(--hn-navy-50), var(--hn-navy-100));
  display:flex; align-items:center; justify-content:center;
  font-size:44px; color: var(--hn-navy-400);
}
.hn-pkg-card-body { padding:18px 18px 14px; flex:1; display:flex; flex-direction:column; gap:9px; }
.hn-pkg-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hn-pkg-price { font-size:16px; font-weight:800; color: var(--hn-orange-500); letter-spacing:-0.01em; }
.hn-pkg-card-title {
  font-size:15px; font-weight:700; color: var(--hn-navy-800); margin:0; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.hn-pkg-card-desc {
  font-size:13px; color: var(--hn-gray-500); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hn-pkg-card-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.hn-pkg-card-footer { padding:12px 18px 18px; border-top:1px solid var(--hn-gray-100); }

/* Guest exam/package details modal. */
.hn-guest-detail-modal .modal-dialog { width:min(620px, calc(100vw - 32px)); max-width:620px; margin:24px auto; }
.hn-guest-detail-modal .modal-content { overflow:hidden; border:0; border-radius:20px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.24); }
.hn-guest-detail-head { position:relative; align-items:flex-start; padding:22px 64px 22px 24px; border-bottom:1px solid var(--hn-gray-100); background:linear-gradient(135deg, var(--hn-navy-50), #fff 70%); }
.hn-guest-detail-heading { display:flex; min-width:0; align-items:flex-start; gap:13px; }
.hn-guest-detail-icon { display:inline-flex; width:44px; height:44px; flex:0 0 44px; align-items:center; justify-content:center; border-radius:13px; background:var(--hn-grad-navy); color:#fff; font-size:18px; box-shadow:0 8px 18px rgba(37,99,176,.2); }
.hn-guest-detail-heading > div { min-width:0; }
.hn-guest-detail-kicker { display:block; margin:1px 0 3px; color:var(--hn-orange-500); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.hn-guest-detail-title { color:var(--hn-navy-800); font-family:var(--hn-font-head); font-size:21px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.hn-guest-detail-head .btn-close { position:absolute; top:18px; right:18px; flex:0 0 auto; margin:0; border-radius:8px; }
.hn-guest-detail-body { padding:22px 24px; }
.hn-guest-detail-description { margin:0 0 16px; padding:13px 14px; border:1px solid var(--hn-gray-100); border-radius:11px; background:var(--hn-gray-50); color:var(--hn-gray-600); font-size:13px; line-height:1.6; }
.hn-guest-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hn-guest-detail-item { display:flex; min-width:0; min-height:50px; align-items:center; gap:9px; padding:11px 12px; border:1px solid var(--hn-gray-100); border-radius:11px; background:#fff; color:var(--hn-gray-700); font-size:13px; font-weight:650; }
.hn-guest-detail-item i { display:inline-flex; width:28px; height:28px; flex:0 0 28px; align-items:center; justify-content:center; border-radius:8px; background:var(--hn-navy-50); color:var(--hn-navy-500); font-size:12px; }
.hn-guest-detail-item span { min-width:0; overflow-wrap:anywhere; }
.hn-guest-login-callout { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:15px; border:1px solid var(--hn-orange-100); border-radius:13px; background:linear-gradient(135deg,var(--hn-orange-50),#fff); }
.hn-guest-login-callout > span { display:inline-flex; width:36px; height:36px; flex:0 0 36px; align-items:center; justify-content:center; border-radius:10px; background:var(--hn-orange-500); color:#fff; }
.hn-guest-login-callout strong { display:block; margin-bottom:3px; color:#9a3412; font-size:14px; }
.hn-guest-login-callout p { margin:0; color:#7c4a2d; font-size:12.5px; line-height:1.5; }
.hn-guest-detail-actions { display:flex; flex-wrap:wrap; gap:9px; padding:16px 24px 20px; border-top:1px solid var(--hn-gray-100); background:var(--hn-gray-50); }
.hn-guest-detail-actions .hn-btn { min-height:44px; justify-content:center; padding:10px 15px; border-radius:10px; font-size:13px; font-weight:700; text-decoration:none; }
.hn-guest-btn-secondary { border:1px solid var(--hn-border); background:#fff; color:var(--hn-gray-600); }
.hn-guest-btn-outline { border:1px solid var(--hn-navy-200,#bfdbfe); background:#fff; color:var(--hn-navy-600); }
.hn-guest-btn-primary { margin-left:auto; border:1px solid var(--hn-navy-600); background:var(--hn-grad-navy); color:#fff; box-shadow:0 7px 16px rgba(37,99,176,.18); }
.hn-guest-btn-primary:hover { color:#fff; }

@media (max-width:575.98px) {
  .hn-guest-detail-modal .modal-dialog { width:calc(100vw - 20px); margin:10px auto; }
  .hn-guest-detail-modal .modal-content { max-height:calc(100vh - 20px); border-radius:16px; }
  .hn-guest-detail-head { padding:17px 54px 17px 16px; }
  .hn-guest-detail-head .btn-close { top:14px; right:13px; }
  .hn-guest-detail-icon { width:39px; height:39px; flex-basis:39px; border-radius:11px; font-size:16px; }
  .hn-guest-detail-title { font-size:17px; }
  .hn-guest-detail-body { padding:16px; }
  .hn-guest-detail-grid { grid-template-columns:1fr; gap:8px; }
  .hn-guest-detail-item { min-height:46px; padding:9px 10px; }
  .hn-guest-login-callout { margin-top:14px; padding:12px; }
  .hn-guest-detail-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:13px 16px 16px; }
  .hn-guest-detail-actions .hn-btn { width:100%; padding-inline:8px; }
  .hn-guest-btn-primary { grid-column:1 / -1; grid-row:1; margin-left:0; }
}

/* Staggered animation */
.hn-cards-grid > *:nth-child(1){animation-delay:0ms}
.hn-cards-grid > *:nth-child(2){animation-delay:60ms}
.hn-cards-grid > *:nth-child(3){animation-delay:120ms}
.hn-cards-grid > *:nth-child(4){animation-delay:180ms}
.hn-cards-grid > *:nth-child(5){animation-delay:240ms}
.hn-cards-grid > *:nth-child(6){animation-delay:300ms}
.hn-cards-grid > *:nth-child(7){animation-delay:360ms}
.hn-cards-grid > *:nth-child(8){animation-delay:420ms}
.hn-cards-grid > *:nth-child(9){animation-delay:480ms}
@keyframes hn-fade-in { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }

/* ── Features Section ──────────────────────────────────────── */
.hn-features {
  padding:72px 0;
  background: var(--hn-bg);
  position:relative; overflow:hidden;
}
.hn-features-heading { text-align:center; margin-bottom:48px; }
.hn-features-heading .hn-section-eyebrow { display:inline-block; }
.hn-features-heading .hn-section-title { justify-content:center; margin-top:8px; }
.hn-features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.hn-feature-item {
  text-align:center; padding:28px 20px;
  border-radius: var(--hn-r-lg); background: var(--hn-white);
  border:1px solid var(--hn-gray-100);
  box-shadow: var(--hn-shadow-sm);
  transition: transform var(--hn-normal) var(--hn-ease), box-shadow var(--hn-normal) var(--hn-ease), border-color var(--hn-normal) var(--hn-ease);
}
.hn-feature-item:hover { transform:translateY(-4px); box-shadow: var(--hn-shadow-lg); border-color: var(--hn-navy-100); }
.hn-feature-icon {
  width:58px; height:58px; border-radius: var(--hn-r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; margin:0 auto 16px;
}
.hn-feature-item:nth-child(1) .hn-feature-icon { background: var(--hn-grad-navy); box-shadow: var(--hn-shadow-navy); }
.hn-feature-item:nth-child(2) .hn-feature-icon { background: var(--hn-grad-orange); box-shadow: var(--hn-shadow-orange); }
.hn-feature-item:nth-child(3) .hn-feature-icon { background: var(--hn-grad-green); box-shadow: var(--hn-shadow-green); }
.hn-feature-item:nth-child(4) .hn-feature-icon { background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow:0 8px 20px rgba(124,58,237,.28); }
.hn-feature-title { font-size:15px; font-weight:700; color: var(--hn-navy-800); margin:0 0 8px; }
.hn-feature-desc { font-size:13px; color: var(--hn-gray-500); line-height:1.6; margin:0; }

/* ── Footer ────────────────────────────────────────────────── */
.hn-footer {
  background: var(--hn-grad-footer);
  color:rgba(255,255,255,.75);
  position:relative; overflow:hidden;
}
/* Subtle pattern */
.hn-footer::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(249,115,22,.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(34,197,94,.06) 0%, transparent 35%);
}
.hn-footer-main {
  padding:56px 0 40px; position:relative; z-index:1;
}
.hn-footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:40px;
}
/* Brand column */
.hn-footer .app-brand--footer { margin-bottom:14px; max-width:100%; }
.hn-footer .app-brand--footer.app-brand--logo-only .app-brand-logo {
  width:auto; height:60px; max-width:min(280px, 100%); object-fit:contain;
}
.hn-footer-brand-desc { font-size:13px; line-height:1.65; color:rgba(255,255,255,.60); margin:0 0 20px; max-width:260px; }
.hn-footer-social { display:flex; gap:10px; }
.hn-footer-social-link {
  width:36px; height:36px; border-radius: var(--hn-r-sm);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.70); font-size:14px; text-decoration:none;
  transition: background var(--hn-fast) var(--hn-ease), color var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease-bounce);
}
.hn-footer-social-link:hover { background: var(--hn-orange-500); color:#fff; transform:translateY(-2px); border-color: var(--hn-orange-500); }

/* Google Play badge, under the social row in the brand column. Google's own artwork,
   served unmodified as their guidelines require — a hand-drawn Play triangle is not an
   approved substitute. The 41px of transparent clear space baked into all four sides is
   11px once scaled to 180px, so the badge is pulled back by that much to sit on the same
   left edge as the social icons above it instead of 11px inside them. */
.hn-footer-app { margin-top:20px; }
.hn-footer-app-label { font-size:12px; font-weight:600; color:rgba(255,255,255,.60); margin:0 0 6px; }
.hn-footer-app-badge { display:inline-block; line-height:0; border-radius: var(--hn-r-sm); margin-left:-11px; }
.hn-footer-app-badge img { display:block; width:180px; height:auto; transition: transform var(--hn-fast) var(--hn-ease-bounce), opacity var(--hn-fast) var(--hn-ease); }
.hn-footer-app-badge:hover img { transform:translateY(-2px); opacity:.92; }
.hn-footer-app-badge:focus-visible { outline:2px solid var(--hn-orange-500); outline-offset:2px; }

/* Footer columns */
.hn-footer-col-title {
  font-size:12px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
  color: var(--hn-orange-300); margin:0 0 16px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.10);
}
.hn-footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.hn-footer-links a {
  color:rgba(255,255,255,.62); text-decoration:none; font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:7px;
  transition: color var(--hn-fast) var(--hn-ease), padding-left var(--hn-fast) var(--hn-ease);
}
.hn-footer-links a:hover { color:#fff; padding-left:4px; }
.hn-footer-links a i { font-size:11px; color: var(--hn-navy-300); flex-shrink:0; }

/* Contact column */
.hn-footer-contact-item {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:rgba(255,255,255,.62); margin-bottom:12px;
}
.hn-footer-contact-item i {
  width:28px; height:28px; background:rgba(255,255,255,.10);
  border-radius: var(--hn-r-sm); display:flex; align-items:center; justify-content:center;
  color: var(--hn-orange-300); font-size:12px; flex-shrink:0; margin-top:1px;
}
.hn-footer-contact-item a { color:rgba(255,255,255,.62); text-decoration:none; transition:color var(--hn-fast) var(--hn-ease); }
.hn-footer-contact-item a:hover { color:#fff; }

/* Language selector */
.hn-footer-lang { margin-top:16px; }
.hn-footer-lang-label { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:8px; }
.hn-footer-lang-links { display:flex; flex-wrap:wrap; gap:6px; }
.hn-footer-lang-links a {
  font-size:12px; color:rgba(255,255,255,.55); text-decoration:none;
  padding:3px 10px; border:1px solid rgba(255,255,255,.15); border-radius: var(--hn-r-full);
  transition: background var(--hn-fast) var(--hn-ease), color var(--hn-fast) var(--hn-ease);
}
.hn-footer-lang-links a:hover { background:rgba(255,255,255,.12); color:#fff; }

/* ── Footer bottom bar ──────────────────────────────────────
   Three items on one line: copyright left, legal links centred, credit right.
   A grid rather than space-between, because space-between only balances the
   GAPS — with three items of different widths (264 / 269 / 326px here) the
   middle one lands wherever the maths puts it, ~30px left of centre at 1440.
   `1fr auto 1fr` centres the links against the bar itself.
   ──────────────────────────────────────────────────────────── */
.hn-footer-bottom {
  border-top:1px solid rgba(255,255,255,.10);
  padding:20px 0; position:relative; z-index:1;
}
.hn-footer-bottom-inner {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px 24px;
}
/* Bootstrap's reboot puts margin-bottom:1rem on every <p>. Two of these three
   are <p> and the link row is a <div>, so align-items:center was centring two
   37px margin boxes against one 19px box — dropping the links 9px below the
   copyright and leaving the bar visibly bottom-heavy. */
.hn-footer-copy { font-size:13px; color:rgba(255,255,255,.45); margin:0; min-width:0; }
.hn-footer-copy a { color:rgba(255,255,255,.60); text-decoration:none; transition:color var(--hn-fast) var(--hn-ease); }
.hn-footer-copy a:hover { color:#fff; }
.hn-footer-legal { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.hn-footer-legal a {
  font-size:12px; color:rgba(255,255,255,.45); text-decoration:none;
  transition:color var(--hn-fast) var(--hn-ease);
}
.hn-footer-legal a:hover { color:rgba(255,255,255,.80); }
.hn-footer-legal-sep { color:rgba(255,255,255,.20); font-size:12px; }
.hn-footer-powered {
  font-size:12px; color:rgba(255,255,255,.40);
  margin:0; min-width:0; justify-self:end; text-align:right;
}
.hn-footer-powered a { color: var(--hn-orange-300); text-decoration:none; font-weight:600; transition:color var(--hn-fast) var(--hn-ease); }
.hn-footer-powered a:hover { color: var(--hn-orange-400); }

/* The three measure ~860px plus gaps, so below roughly 960px they stop fitting
   on one line. Stack them at a real breakpoint instead of letting the row wrap
   into a ragged two-and-a-half lines. */
@media (max-width:991.98px) {
  .hn-footer-bottom-inner { grid-template-columns:1fr; justify-items:start; gap:8px; }
  .hn-footer-legal { justify-content:flex-start; }
  .hn-footer-powered { justify-self:start; text-align:left; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1023.98px) {
  .hn-hero-grid { grid-template-columns:1fr; gap:32px; padding-top:32px; padding-bottom:40px; }
  .hn-hero { min-height: auto; }
  .hn-hero-right { order:-1; }
  .hn-login-card { max-width:480px; margin:0 auto; }
  .hn-hero-headline { font-size:clamp(24px,4vw,36px); }
  .hn-hero-sub { max-width:100%; }
  .hn-cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .hn-features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .hn-footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .hn-stat-num { font-size:18px; }
}

/* Phones. Two rules of thumb below: one column only where two would crush the
   copy — short content keeps a grid rather than becoming another full-width
   stack — and nothing you tap is smaller than 44px. */
@media (max-width:767.98px) {
  :root { --hn-navbar-h:60px; }
  .hn-navbar-inner { padding:0 16px; }
  .hn-container { padding:0 16px; }

  /* Mobile nav */
  .hn-hamburger { display:flex; }
  /* The brand is the shared app-brand component, sized for a desktop bar and
     set not to shrink; without this a long tenant name pushes the hamburger
     off the right edge. */
  .hn-navbar-inner .hn-brand { min-width:0; flex-shrink:1; }
  .hn-nav-links {
    display:none; position:fixed;
    top:var(--hn-navbar-h); left:0; right:0;
    background: var(--hn-white);
    border-bottom:2px solid var(--hn-navy-100);
    box-shadow:0 8px 24px rgba(37,99,176,.12);
    flex-direction:column; align-items:stretch;
    padding:12px; gap:4px; z-index:999;
    /* A phone held sideways is ~375px tall: the panel has to scroll rather
       than run off the bottom with Login unreachable. */
    max-height:calc(100dvh - var(--hn-navbar-h));
    overflow-y:auto; overscroll-behavior:contain;
    animation: hn-nav-drop 200ms var(--hn-ease) both;
  }
  @keyframes hn-nav-drop { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
  .hn-nav-links.open { display:flex; }
  .hn-nav-link { color: var(--hn-navy-700); padding:12px 16px; font-size:15px; }
  /* Scoped to the menu. Unscoped, this stretched every outline/primary button
     on the page — hero, support band, modal footer — and added a stray 4px of
     top margin to each. */
  .hn-nav-links .hn-btn-outline,
  .hn-nav-links .hn-btn-primary { width:100%; justify-content:center; padding:12px 20px; margin-top:4px; }

  /* Hero */
  .hn-hero-grid { grid-template-columns:1fr; gap:24px; padding-top:20px; padding-bottom:48px; }
  .hn-hero { min-height: auto; }

  /* ── Sign-in sheet ─────────────────────────────────────────
     The wrappers go to `display: contents` so the fixed shell leaves no
     phantom grid row behind it. On academy that also lifts the notice up
     into the hero grid, which is where it should sit once the card leaves. */
  .hn-hero-right,
  [data-hn-template="institution"] .hn-portal-login,
  [data-hn-template="academy"] .hn-academy-right { display: contents; }

  .hn-login-shell {
    display: block;
    position: fixed; left:0; right:0; bottom:0; z-index:1200;
    max-height: 92dvh;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--hn-white);
    border-radius: var(--hn-r-2xl) var(--hn-r-2xl) 0 0;
    box-shadow: 0 -18px 50px rgba(4,10,24,.42);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* 101% clears the shadow as well as the sheet. */
    transform: translateY(101%);
    visibility: hidden;
    transition: transform 320ms var(--hn-ease), visibility 320ms var(--hn-ease);
  }
  body.hn-login-open .hn-login-shell { transform: translateY(0); visibility: visible; }

  .hn-login-scrim {
    display: block; position: fixed; inset:0; z-index:1150;
    background: rgba(4,10,24,.55);
    opacity: 0; pointer-events: none;
    transition: opacity 320ms var(--hn-ease);
  }
  body.hn-login-open .hn-login-scrim { opacity: 1; pointer-events: auto; }
  body.hn-login-open { overflow: hidden; }

  .hn-login-sheet-grip {
    display: block; width:42px; height:4px; margin:9px auto 0;
    border-radius: var(--hn-r-full); background: var(--hn-gray-300);
  }
  /* A flex item in the header row, not an overlay on top of it. Absolutely
     positioned it landed in the same 10px band as the grip — two dismiss
     affordances in one strip — and forced the header to carry 56px of empty
     right padding so the heading would clear it. */
  .hn-login-sheet-close {
    display: flex; align-items:center; justify-content:center;
    position: relative; flex-shrink:0; align-self:flex-start;
    width:40px; height:40px; padding:0;
    border:1px solid var(--hn-gray-200); border-radius: var(--hn-r-full);
    background: var(--hn-white); color: var(--hn-gray-500);
    font-size:15px; cursor:pointer;
  }
  /* The 40px button is short of the 44px tap minimum on its own; the pad takes
     it there without spending layout height on the row. */
  .hn-login-sheet-close::after {
    content:''; position:absolute; inset:-5px; border-radius:inherit;
  }

  /* Inside the sheet the card is the sheet — it drops its own frame. */
  .hn-login-shell .hn-login-card {
    max-width:100%; border:0; border-radius:0;
    background:transparent; box-shadow:none; animation:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .hn-login-shell .hn-login-card-accent-bar { display:none; }
  .hn-login-card-header { padding:12px 14px 13px 18px; gap:12px; }
  .hn-login-brand-mark { width:38px; height:38px; font-size:15px; border-radius: var(--hn-r-sm); }
  .hn-login-title { font-size:18px; }
  .hn-login-subtitle { font-size:12px; }
  /* Below the fold on a phone the moment the keyboard is up, and three badges
     that a padlock in the address bar already covers. The sheet's own bottom
     edge closes the card. */
  .hn-login-trust { display:none; }

  /* ── Sheet triggers ────────────────────────────────────────── */
  .hn-login-trigger-row { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 4px; }
  .hn-login-trigger-row .hn-btn { flex:1 1 100%; justify-content:center; min-height:50px; font-size:15px; }
  /* Outline on the dark classic/institution hero; the academy hero is light. */
  .hn-login-trigger-alt {
    border:1.5px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.08);
    color:#fff;
  }
  .hn-login-trigger-alt:hover { color:#fff; }
  .hn-login-trigger-row--light .hn-login-trigger-alt {
    border-color: var(--hn-navy-200,#bfdbfe);
    background: var(--hn-white);
    color: var(--hn-navy-600);
  }
  .hn-login-trigger-row--light .hn-login-trigger-alt:hover { color: var(--hn-navy-700); }

  .hn-navbar-signin {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex-shrink:0; margin-left:auto; margin-right:8px;
    border:1.5px solid var(--hn-navy-200,#bfdbfe); border-radius: var(--hn-r-sm);
    background: var(--hn-grad-navy); color:#fff; font-size:15px; cursor:pointer;
  }

  .hn-login-card { max-width:100%; }
  /* Bottom padding carries the sheet's closing edge now that the trust strip
     above is out; it lines up left with the header row. */
  .hn-login-card-body { padding:18px 18px 22px; }
  .hn-input { height:50px; font-size:16px; }
  .hn-btn-login { height:52px; font-size:16px; }
  .hn-hero-headline { font-size:clamp(26px,7.2vw,34px); }
  .hn-hero-sub { font-size:14.5px; margin-bottom:20px; }
  /* Three blurred 350-600px orbs animating behind an already-animating hero
     photograph: invisible under the scrim at this size, and the most expensive
     thing on the page to composite. */
  .hn-hero-orb { display:none; }

  /* Sign-in form. Marathi and Hindi run longer than the English source, so the
     remember/forgot row has to wrap instead of overflowing the card. */
  .hn-form-row { flex-wrap:wrap; gap:10px 8px; }
  .hn-checkbox-label { min-height:44px; }
  .hn-form-row .hn-link-muted { display:inline-flex; align-items:center; min-height:44px; }
  .hn-login-trust { gap:4px 10px; }
  .hn-signup-prompt { margin-top:6px; }
  .hn-signup-prompt a { display:inline-flex; align-items:center; min-height:44px; }

  /* Feature slider */
  .hn-fslider { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .hn-fslider-track { min-height:0; }
  .hn-fslider-slide { padding:18px 18px 14px; gap:14px; }
  .hn-fslider-icon { width:44px; height:44px; font-size:17px; }
  .hn-fslider-title { font-size:15px; }
  .hn-fslider-cta { min-height:44px; }
  /* Wrap is a safety net: four 44px dots plus two 44px arrows is 322px, which
     fits from ~360px up but not on a 320px phone. */
  .hn-fslider-footer { padding:0 18px 14px; padding-top:10px; flex-wrap:wrap; gap:4px; }
  .hn-fslider-nav { gap:4px; }
  .hn-fslider-btn { width:44px; height:44px; font-size:13px; }
  /* A 6px dot is not a tap target: the button grows to 44px and the dot moves
     into a pseudo-element so it keeps its size and its pill animation. */
  .hn-fslider-dots { gap:2px; }
  .hn-fslider-dot {
    width:44px; height:44px; background:none;
    display:flex; align-items:center; justify-content:center;
  }
  .hn-fslider-dot.active,
  .hn-fslider-dot:hover:not(.active) { background:none; }
  .hn-fslider-dot.active { width:56px; }
  .hn-fslider-dot::after {
    content:''; display:block; width:6px; height:6px;
    border-radius: var(--hn-r-full); background:rgba(255,255,255,.25);
    transition: background var(--hn-fast) var(--hn-ease), width var(--hn-normal) var(--hn-ease);
  }
  .hn-fslider-dot.active::after { width:24px; background: var(--hn-orange-400); }

  /* Stats: three short numbers. A row of three reads the same and costs ~90px
     of scroll instead of the ~230px three full-width rows were taking. */
  .hn-stats-strip {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px; padding:12px 10px;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .hn-stat { flex-direction:column; align-items:center; gap:7px; text-align:center; }
  .hn-stat-divider { display:none; }
  .hn-stat-icon { width:34px; height:34px; font-size:14px; }
  .hn-stat-num { font-size:17px; }
  .hn-stat-label { font-size:9.5px; letter-spacing:.05em; }

  /* Sections */
  .hn-section { padding:44px 0; }
  .hn-features { padding:44px 0; }
  .hn-section-header { flex-direction:column; align-items:stretch; gap:12px; margin-bottom:20px; }
  .hn-section-title { font-size:20px; }
  .hn-features-heading { margin-bottom:24px; }
  /* Stretched into a row of its own rather than a 39px pill stranded under the
     heading — same space, and now actually tappable. */
  .hn-view-all { justify-content:space-between; min-height:46px; border-radius: var(--hn-r-md); }

  /* Cards */
  .hn-cards-grid { grid-template-columns:1fr; gap:12px; }
  .hn-exam-card-body, .hn-pkg-card-body { padding:15px 15px 12px; }
  .hn-exam-card-footer, .hn-pkg-card-footer { padding:11px 15px 15px; }
  .hn-btn-card { width:100%; min-height:46px; font-size:14px; }
  /* At full width a 16/9 package image is 200px of a 448px card, and the page
     shows nine of them. 2/1 still reads as artwork and costs a fifth less. */
  .hn-pkg-card-img-wrap, .hn-pkg-card-img-placeholder { aspect-ratio:2/1; }
  .hn-pkg-card-img-placeholder { font-size:34px; }
  .hn-pkg-card-body { gap:7px; }

  /* Features: four short cards. Two per row instead of four ~270px stacks;
     auto-fit falls back to one column below ~312px of usable width. */
  .hn-features-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
  .hn-feature-item { padding:20px 14px; }
  .hn-feature-icon { width:46px; height:46px; font-size:18px; margin-bottom:12px; }
  .hn-feature-title { font-size:14px; }
  .hn-feature-desc { font-size:12.5px; line-height:1.55; }

  /* Footer: brand and contact span the width, the two short link lists sit
     side by side rather than stacking into ~260px of half-empty column. */
  .hn-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; }
  .hn-footer-grid > *:first-child,
  .hn-footer-grid > *:last-child { grid-column:1 / -1; }
  .hn-footer-brand-desc { max-width:none; }
  .hn-footer-main { padding:36px 0 24px; }
  .hn-footer-social-link { width:44px; height:44px; font-size:15px; }
  .hn-footer-links { gap:0; }
  .hn-footer-links a { min-height:44px; }
  .hn-footer-contact-item a { display:inline-flex; align-items:center; min-height:44px; }
  .hn-footer-lang-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; }
  /* Single column and left-aligned already, from the 991.98px tier. */
  .hn-footer-bottom-inner { gap:2px; }
  .hn-footer-legal { gap:0 14px; }
  .hn-footer-legal a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
}

@media (max-width:400px) {
  .hn-login-card-header { padding:11px 12px 12px 16px; gap:10px; }
  .hn-login-card-body { padding:16px 16px 20px; }
  .hn-fslider-slide { padding:14px 14px 10px; gap:12px; }
  .hn-fslider-footer { padding:10px 14px 12px; }
}

/* Small phones only — an iPhone 15 is 393px wide, so none of this fires there.
   Below ~360px the stat labels need a third line and the slider controls stop
   fitting on one row. */
@media (max-width:359.98px) {
  .hn-container { padding:0 14px; }
  .hn-stat-icon { width:30px; height:30px; font-size:12px; }
  .hn-stat-num { font-size:15px; }
  .hn-login-trust .hn-trust-sep { display:none; }
  .hn-fslider-dot { width:34px; }
  .hn-fslider-dot.active { width:46px; }
  .hn-fslider-btn { width:40px; height:40px; }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .hn-hero-orb-1, .hn-hero-orb-2, .hn-hero-orb-3 { animation:none; }
  .hn-hero-eyebrow-dot { animation:none; }
  .hn-badge-dot { animation:none; }
  .hn-exam-card:hover, .hn-pkg-card:hover, .hn-feature-item:hover, .hn-btn:hover { transform:none; }
  .hn-fslider-slide { transition:none; }
  .hn-hero-bg-layer { animation:none; transform:scale(1.04); }
}

/* ============================================================
   LAYOUT FIXES
   ============================================================ */

/* ── Fix 1: Hero full-width background ────────────────────────
   .hn-hero must stretch edge-to-edge (full viewport width).
   The inner .hn-container constrains the content, not the bg.
   ──────────────────────────────────────────────────────────── */
.hn-hero {
  width: 100%;
  /* Ensure it's a block that fills its parent fully */
  display: block;
}

/* The layout wraps content in <main id="hnMain"> — make sure
   it doesn't add any horizontal constraints */
#hnMain {
  width: 100%;
  overflow-x: hidden;
}

/* ── Fix 2: Auth pages — remove double top padding ────────────
   .au-body .au-main adds padding-top for the fixed navbar.
   .au-page also had its own padding-top — zero it out so
   the split layout starts immediately below the navbar.
   ──────────────────────────────────────────────────────────── */
.au-body .au-main {
  padding-top: 0;          /* navbar offset handled by au-page */
}

.au-body .au-page {
  padding-top: var(--hn-navbar-h, 68px);  /* offset for fixed hn-navbar */
  min-height: calc(100vh - var(--hn-navbar-h, 68px));
}

/* Split pages: fill remaining height after navbar */
.au-body .au-page-login,
.au-body .au-page-signup {
  min-height: calc(100vh - var(--hn-navbar-h, 68px));
}

/* Left panel: fill full height of the split */
.au-body .au-split-left {
  min-height: calc(100vh - var(--hn-navbar-h, 68px));
}

/* Right panel: fill full height, scroll internally if needed */
.au-body .au-split-right {
  min-height: calc(100vh - var(--hn-navbar-h, 68px));
  overflow-y: auto;
}

/* Centered pages (forgot, reset, verify) */
.au-body .au-page-centered {
  padding-top: 40px;
  padding-bottom: 48px;
  min-height: calc(100vh - var(--hn-navbar-h, 68px));
}

/* Mobile: navbar is 60px — read from the variable rather than repeated, so the app,
   which collapses it because it suppresses this navbar and draws its own, does not keep
   reserving a navbar's worth of blank space above every auth page. */
@media (max-width: 767.98px) {
  .au-body .au-page {
    padding-top: var(--hn-navbar-h, 60px);
    min-height: calc(100vh - var(--hn-navbar-h, 60px));
  }
  .au-body .au-page-login,
  .au-body .au-page-signup {
    min-height: calc(100vh - var(--hn-navbar-h, 60px));
  }
  .au-body .au-split-left,
  .au-body .au-split-right {
    min-height: auto;   /* stacked on mobile — no forced height */
  }
  .au-body .au-page-centered {
    padding-top: 24px;
    min-height: calc(100vh - var(--hn-navbar-h, 60px));
  }
}

/* ── Hero background photography: small-screen artwork ────────
   Portrait-friendly 4:3 crops at half the pixel width. Scoped in
   a media query so phones never download the desktop files.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .hn-hero-bg-layer[data-bg="secure"] {
    background-image: url("../images/hero/hero-secure-sm.jpg");
    background-image: image-set("../images/hero/hero-secure-sm.webp" type("image/webp"),
                                "../images/hero/hero-secure-sm.jpg"  type("image/jpeg"));
  }
  .hn-hero-bg-layer[data-bg="analytics"] {
    background-image: url("../images/hero/hero-analytics-sm.jpg");
    background-image: image-set("../images/hero/hero-analytics-sm.webp" type("image/webp"),
                                "../images/hero/hero-analytics-sm.jpg"  type("image/jpeg"));
  }
  .hn-hero-bg-layer[data-bg="devices"] {
    background-image: url("../images/hero/hero-devices-sm.jpg");
    background-image: image-set("../images/hero/hero-devices-sm.webp" type("image/webp"),
                                "../images/hero/hero-devices-sm.jpg"  type("image/jpeg"));
  }
  .hn-hero-bg-layer[data-bg="packages"] {
    background-image: url("../images/hero/hero-packages-sm.jpg");
    background-image: image-set("../images/hero/hero-packages-sm.webp" type("image/webp"),
                                "../images/hero/hero-packages-sm.jpg"  type("image/jpeg"));
  }

  /* Stacked layout puts copy over the whole frame — flatten the
     side-to-side scrim into a straight top-to-bottom darkening. */
  .hn-hero-bg-scrim {
    background:
      linear-gradient(180deg,
        rgba(4,10,24,.88) 0%,
        rgba(6,15,35,.70) 45%,
        rgba(8,22,52,.84) 100%);
  }
  .hn-hero-bg-layer { animation-duration: 34s; }
}

/* Company address in the footer carries authored <br/> line breaks, so the row
   has to align to the top rather than centre a two-line value against its icon. */
.hn-footer-contact-item { align-items: flex-start; }
.hn-footer-contact-item i { margin-top: 3px; }