/* ============================================================
   homepage-templates.css — client-specific homepage designs
   ------------------------------------------------------------
   Loaded after homepage-new.css by Views/Layouts/homepageNew.php.

   Three things live here:

   1. The brand-token bridge. Every client sets a primary and an
      accent colour at /homepageSetup/; the layout writes them as
      --hn-brand-primary / --hn-brand-accent on .hn-body and this
      file re-derives the semantic tokens homepage-new.css uses,
      so one pair of hex values re-skins the whole page.

   2. Components shared by every template but not present in the
      base sheet: banner slides, notice, steps, support, carousel.

   3. The two non-default designs, scoped by the body attribute
      [data-hn-template="institution"] and ="academy".

   Source order matters: this file must stay after homepage-new.css
   or the base sheet's hard-coded navy wins on equal specificity.
   ============================================================ */

/* ── 1. Brand tokens ───────────────────────────────────────── */

.hn-body {
  /* Defaults; the layout overrides these two per client. */
  --hn-brand-primary: #2563b0;
  --hn-brand-accent:  #ea580c;
}

.hn-body {
  --hn-primary:      var(--hn-brand-primary);
  --hn-primary-dark: var(--hn-brand-primary);
  --hn-accent:       var(--hn-brand-accent);

  /* Flat fallback first; browsers with color-mix() take the richer
     gradient on the following line. */
  --hn-grad-navy: var(--hn-brand-primary);
  --hn-grad-navy: linear-gradient(135deg,
                    color-mix(in srgb, var(--hn-brand-primary) 72%, #000) 0%,
                    var(--hn-brand-primary) 100%);

  --hn-grad-orange: var(--hn-brand-accent);
  --hn-grad-orange: linear-gradient(135deg,
                      color-mix(in srgb, var(--hn-brand-accent) 80%, #000) 0%,
                      var(--hn-brand-accent) 100%);

  --hn-grad-card-navy: var(--hn-grad-navy);
  --hn-grad-card-orange: var(--hn-grad-orange);

  --hn-grad-footer: var(--hn-brand-primary);
  --hn-grad-footer: linear-gradient(160deg,
                      color-mix(in srgb, var(--hn-brand-primary) 55%, #05080f) 0%,
                      color-mix(in srgb, var(--hn-brand-primary) 88%, #05080f) 100%);

  --hn-shadow-navy:  0 8px 24px color-mix(in srgb, var(--hn-brand-primary) 38%, transparent);
  --hn-shadow-orange:0 8px 24px color-mix(in srgb, var(--hn-brand-accent) 34%, transparent);
}

/* Elements the base sheet paints with literal navy/orange. */
.hn-body .hn-section-title i,
.hn-body .hn-hero-eyebrow-dot { color: var(--hn-brand-primary); }
.hn-body .hn-section-eyebrow {
  color: var(--hn-brand-accent);
  background: color-mix(in srgb, var(--hn-brand-accent) 10%, #fff);
  border-color: color-mix(in srgb, var(--hn-brand-accent) 24%, #fff);
}
.hn-body .hn-stat-icon { color: color-mix(in srgb, var(--hn-brand-accent) 70%, #fff); }
.hn-body .hn-hero-headline-accent { color: color-mix(in srgb, var(--hn-brand-accent) 78%, #fff); }

/* ── 2. Shared additions ───────────────────────────────────── */

/* Hero background driven by the client's banners / slider images.
   One layer per slide; homepage-new.js rotates .is-active / .is-leaving.

   The drift is a paused keyframe animation, not a transform transition. A
   transition reverses the instant .is-active comes off, so every changeover
   used to drag the outgoing photo back towards its start frame while it faded
   — two photographs sliding opposite ways at once, which is what read as the
   background racing. Pausing an animation instead leaves the photo exactly
   where it stopped and resumes from there on its next turn, so the pan is one
   continuous crawl that never restarts and never snaps back. Same mechanism as
   .hn-hero-bg-layer in homepage-new.css. */
.hn-hero-slides {
  /* Offset below the fixed navbar for the same reason as .hn-hero-bg — the bar
     is opaque, so anything drawn behind it is simply lost. */
  position: absolute; inset: var(--hn-navbar-h) 0 0 0;
  overflow: hidden; pointer-events: none;
  /* Own stacking context, so the layering below cannot compete with
     .hn-hero-grid (z-index: 1) and put a photo on top of the hero copy. */
  isolation: isolate;
}
.hn-hero-slide {
  position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  /* ~8% of travel spread over 44s, and only while the slide is on screen:
     roughly a fifth of that per turn at the 9s cadence homepage-new.js uses. */
  animation: hn-hero-slide-drift 44s ease-in-out infinite alternate;
  animation-play-state: paused;
  transition: opacity 2000ms linear;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.hn-hero-slide.is-active { opacity: 1; z-index: 2; }

/* The outgoing photo stays fully opaque underneath the incoming one and only
   drops away once that is all but solid. Fading both at once would let the
   hero's navy through the middle of every cross-fade as a dark pulse. */
.hn-hero-slide.is-leaving {
  z-index: 1;
  transition: opacity 400ms linear 1600ms;
}

/* Keep the drift running through the fade-out so the photo on its way out
   never freezes half-way. */
.hn-hero-slide.is-active,
.hn-hero-slide.is-leaving { animation-play-state: running; }

@keyframes hn-hero-slide-drift {
  from { transform: scale(1.06) translate3d(-1.1%, -.7%, 0); }
  to   { transform: scale(1.14) translate3d( 1.1%,  .7%, 0); }
}

.hn-hero-slide-scrim {
  /* Above the photo layers, which now carry z-indexes of their own. */
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(100deg,
      rgba(4,10,24,.90) 0%,
      rgba(6,15,35,.82) 34%,
      rgba(8,22,52,.68) 66%,
      rgba(11,34,76,.56) 100%),
    linear-gradient(to bottom,
      rgba(6,13,31,.55) 0%,
      rgba(6,13,31,0) 28%,
      rgba(6,13,31,0) 68%,
      rgba(6,13,31,.68) 100%);
}

.hn-hero-slide-dots {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.hn-hero-slide-dot {
  width: 26px; height: 4px; padding: 0;
  border: none; border-radius: var(--hn-r-full);
  background: rgba(255,255,255,.32); cursor: pointer;
  transition: background var(--hn-fast) var(--hn-ease), width var(--hn-fast) var(--hn-ease);
}
.hn-hero-slide-dot.is-active { background: #fff; width: 40px; }

/* Hero bullet list — used by every template above the fold. */
.hn-hero-highlights {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.hn-hero-highlights li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.86);
}
.hn-hero-highlights li i { color: var(--hn-brand-accent); margin-top: 3px; flex-shrink: 0; }

/* Feature card tag pill. */
.hn-feature-tag {
  display: inline-block; margin: 0 0 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hn-brand-primary);
  background: color-mix(in srgb, var(--hn-brand-primary) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--hn-brand-primary) 18%, #fff);
  padding: 3px 10px; border-radius: var(--hn-r-full);
}

.hn-btn-lg { font-size: 15px; padding: 13px 26px; min-height: 52px; border-radius: var(--hn-r-md); }

/* Stats strip on a light background (academy). */
.hn-stats-strip--light {
  background: #fff;
  border: 1px solid var(--hn-gray-200);
  box-shadow: var(--hn-shadow-sm);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hn-stats-strip--light .hn-stat-num { color: var(--hn-gray-800); }
.hn-stats-strip--light .hn-stat-label { color: var(--hn-gray-500); }
.hn-stats-strip--light .hn-stat-divider { background: var(--hn-gray-200); }
.hn-stats-strip--light .hn-stat-icon {
  background: color-mix(in srgb, var(--hn-brand-primary) 8%, #fff);
  color: var(--hn-brand-primary);
}

/* ── Notice callout ────────────────────────────────────────── */
.hn-notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--hn-gray-200);
  border-left: 4px solid var(--hn-brand-accent);
  border-radius: var(--hn-r-md);
  padding: 18px 20px;
  box-shadow: var(--hn-shadow-sm);
}
.hn-notice-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--hn-r-sm);
  background: color-mix(in srgb, var(--hn-brand-accent) 12%, #fff);
  color: var(--hn-brand-accent); font-size: 15px;
}
.hn-notice-title {
  font-family: var(--hn-font-head);
  font-size: 15px; font-weight: 700; color: var(--hn-gray-800);
  margin: 0 0 4px;
}
.hn-notice-text { font-size: 13.5px; line-height: 1.65; color: var(--hn-gray-600); margin: 0; }
.hn-notice-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--hn-brand-primary); text-decoration: none;
}
.hn-notice-cta:hover { text-decoration: underline; color: var(--hn-brand-primary); }

/* Full-width band under a hero (classic). */
.hn-notice--band {
  max-width: 1200px; margin: -28px auto 0;
  position: relative; z-index: 5;
  box-shadow: var(--hn-shadow-lg);
}

/* Inside the dark institution panel. */
.hn-notice--portal {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--hn-brand-accent);
  box-shadow: none;
  margin-top: 22px;
}
.hn-notice--portal .hn-notice-icon { background: rgba(255,255,255,.10); color: #fff; }
.hn-notice--portal .hn-notice-title { color: #fff; }
.hn-notice--portal .hn-notice-text { color: rgba(255,255,255,.78); }
.hn-notice--portal .hn-notice-cta { color: color-mix(in srgb, var(--hn-brand-accent) 70%, #fff); }

.hn-notice--academy { margin-top: 18px; width: 100%; max-width: 420px; }

/* ── Banner carousel (captioned) ───────────────────────────── */
.hn-banner-section { padding: 40px 0; background: var(--hn-bg); }
.hn-carousel {
  position: relative;
  border-radius: var(--hn-r-xl);
  overflow: hidden;
  box-shadow: var(--hn-shadow-lg);
  background: var(--hn-gray-100);
}
.hn-carousel:focus-visible { outline: 3px solid var(--hn-brand-primary); outline-offset: 3px; }
.hn-carousel-track { position: relative; aspect-ratio: 1200 / 380; min-height: 220px; }
.hn-carousel-slide {
  position: absolute; inset: 0;
  display: block; opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--hn-ease);
  text-decoration: none;
}
.hn-carousel-slide.active { opacity: 1; visibility: visible; }
.hn-carousel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-carousel-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 32px;
  background: linear-gradient(to top, rgba(5,10,22,.88) 0%, rgba(5,10,22,.55) 55%, rgba(5,10,22,0) 100%);
  color: #fff;
}
.hn-carousel-caption-title {
  font-family: var(--hn-font-head);
  font-size: 22px; font-weight: 700; margin: 0 0 6px; color: #fff;
}
.hn-carousel-caption-sub { font-size: 14px; margin: 0; color: rgba(255,255,255,.82); max-width: 60ch; }
.hn-carousel-caption-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--hn-grad-orange); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--hn-r-full);
}
.hn-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.86); color: var(--hn-gray-800);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--hn-shadow-md);
  transition: background var(--hn-fast) var(--hn-ease);
}
.hn-carousel-nav:hover { background: #fff; }
.hn-carousel-nav-prev { left: 16px; }
.hn-carousel-nav-next { right: 16px; }
.hn-carousel-dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.hn-carousel-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: background var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease);
}
.hn-carousel-dot.active { background: #fff; transform: scale(1.3); }

/* ── Steps ─────────────────────────────────────────────────── */
.hn-steps-section { background: var(--hn-white); }
.hn-steps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.hn-step-item {
  position: relative;
  background: var(--hn-bg-alt);
  border: 1px solid var(--hn-gray-200);
  border-radius: var(--hn-r-lg);
  padding: 30px 24px 26px;
}
.hn-step-number {
  position: absolute; top: -14px; left: 24px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--hn-grad-navy); color: #fff;
  font-family: var(--hn-font-head); font-size: 15px; font-weight: 700;
  box-shadow: var(--hn-shadow-navy);
}
.hn-step-icon {
  width: 46px; height: 46px; border-radius: var(--hn-r-md);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hn-brand-primary) 9%, #fff);
  color: var(--hn-brand-primary); font-size: 19px;
  margin: 6px 0 14px;
}
.hn-step-title { font-size: 16px; font-weight: 700; color: var(--hn-gray-800); margin: 0 0 8px; }
.hn-step-desc { font-size: 13.5px; line-height: 1.65; color: var(--hn-gray-600); margin: 0; }

/* ── Support / help desk ───────────────────────────────────── */
.hn-support-section { background: var(--hn-bg-alt); }
.hn-support-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: var(--hn-grad-navy);
  border-radius: var(--hn-r-xl);
  padding: 34px 38px;
  box-shadow: var(--hn-shadow-lg);
}
.hn-support-copy { display: flex; gap: 18px; align-items: flex-start; flex: 1 1 380px; }
.hn-support-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--hn-r-md);
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.hn-support-title {
  font-family: var(--hn-font-head);
  font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 6px;
}
.hn-support-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.80); margin: 0; max-width: 62ch; }
.hn-support-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hn-support-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  padding: 11px 18px; border-radius: var(--hn-r-md);
}
.hn-support-link:hover { background: rgba(255,255,255,.20); color: #fff; text-decoration: none; }
.hn-support-actions .hn-btn-primary {
  background: var(--hn-grad-orange); box-shadow: var(--hn-shadow-orange);
}

/* ============================================================
   3a. Template: INSTITUTION  (examination-authority portal)
   ============================================================ */

[data-hn-template="institution"] .hn-portal-hero {
  position: relative;
  padding: calc(var(--hn-navbar-h) + 56px) 0 64px;
  background: var(--hn-grad-navy);
  overflow: hidden;
  color: #fff;
}
[data-hn-template="institution"] .hn-portal-hero .hn-container { position: relative; z-index: 2; }

/* A masthead reads as a printed notice, not a marketing headline:
   centred, ruled, and set in the heading face. */
[data-hn-template="institution"] .hn-portal-masthead {
  text-align: center;
  max-width: 860px; margin: 0 auto 40px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
[data-hn-template="institution"] .hn-portal-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hn-brand-accent) 76%, #fff);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 7px 16px; border-radius: var(--hn-r-full);
  margin-bottom: 18px;
}
[data-hn-template="institution"] .hn-portal-headline {
  font-family: var(--hn-font-head);
  font-size: clamp(28px, 4vw, 42px); font-weight: 800;
  line-height: 1.15; letter-spacing: -.02em;
  color: #fff; margin: 0 0 14px;
}
[data-hn-template="institution"] .hn-portal-headline-accent {
  display: block;
  color: color-mix(in srgb, var(--hn-brand-accent) 82%, #fff);
}
[data-hn-template="institution"] .hn-portal-sub {
  font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.80);
  margin: 0 auto; max-width: 68ch;
}

[data-hn-template="institution"] .hn-portal-panel {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start;
}
[data-hn-template="institution"] .hn-portal-checklist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
[data-hn-template="institution"] .hn-portal-checklist li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.88);
}
[data-hn-template="institution"] .hn-portal-check {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hn-brand-accent) 88%, #000);
  color: #fff; font-size: 11px;
}
[data-hn-template="institution"] .hn-portal-cta { margin-top: 22px; }
[data-hn-template="institution"] .hn-stats-strip { margin-top: 22px; }
[data-hn-template="institution"] .hn-portal-login { display: flex; justify-content: center; }
[data-hn-template="institution"] .hn-portal-login .hn-login-card { max-width: 440px; }

/* The portal has no marketing sections, so the remaining bands sit
   directly on white and stay quiet. */
[data-hn-template="institution"] .hn-steps-section { background: var(--hn-white); }
[data-hn-template="institution"] .hn-features { background: var(--hn-bg-alt); }
[data-hn-template="institution"] .hn-feature-item { text-align: left; }
[data-hn-template="institution"] .hn-feature-icon { margin: 0 0 16px; }

/* ============================================================
   3b. Template: ACADEMY  (practice platform, child + parent)
   ============================================================ */

[data-hn-template="academy"] { --hn-bg: #f4f9f2; }
[data-hn-template="academy"] .hn-academy-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--hn-navbar-h) + 48px) 0 60px;
  background:
    radial-gradient(ellipse 60% 70% at 12% 0%, color-mix(in srgb, var(--hn-brand-accent) 14%, #fff) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f4f9f2 100%);
}
[data-hn-template="academy"] .hn-academy-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
[data-hn-template="academy"] .hn-academy-blob-1 {
  width: 420px; height: 420px; top: -120px; right: -80px;
  background: color-mix(in srgb, var(--hn-brand-accent) 26%, transparent);
}
[data-hn-template="academy"] .hn-academy-blob-2 {
  width: 360px; height: 360px; bottom: -160px; left: -100px;
  background: color-mix(in srgb, var(--hn-brand-primary) 18%, transparent);
}
[data-hn-template="academy"] .hn-academy-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start;
}

[data-hn-template="academy"] .hn-academy-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700;
  color: color-mix(in srgb, var(--hn-brand-accent) 70%, #000);
  background: color-mix(in srgb, var(--hn-brand-accent) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--hn-brand-accent) 30%, #fff);
  padding: 8px 16px; border-radius: var(--hn-r-full);
  margin-bottom: 20px;
}
[data-hn-template="academy"] .hn-academy-headline {
  font-family: var(--hn-font-head);
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 800;
  line-height: 1.14; letter-spacing: -.025em;
  color: var(--hn-gray-800); margin: 0 0 16px;
}
[data-hn-template="academy"] .hn-academy-headline-accent { color: var(--hn-brand-accent); }
[data-hn-template="academy"] .hn-academy-sub {
  font-size: 16px; line-height: 1.72; color: var(--hn-gray-600);
  margin: 0 0 22px; max-width: 60ch;
}

/* Chips, not bullets — easier for a child to scan than a paragraph. */
[data-hn-template="academy"] .hn-academy-chips {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
[data-hn-template="academy"] .hn-academy-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--hn-gray-200);
  border-radius: var(--hn-r-full);
  padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--hn-gray-700);
  box-shadow: var(--hn-shadow-sm);
}
[data-hn-template="academy"] .hn-academy-chip i { color: var(--hn-brand-accent); }

[data-hn-template="academy"] .hn-academy-ctas {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px;
}

/* Framed artwork keeps the page bright; a dark full-bleed hero reads
   as an exam hall, which is the wrong signal for practice. */
[data-hn-template="academy"] .hn-academy-media {
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: var(--hn-r-xl);
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--hn-shadow-lg);
  margin-bottom: 26px;
}
[data-hn-template="academy"] .hn-academy-media-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms var(--hn-ease);
}
[data-hn-template="academy"] .hn-academy-media-slide.is-active { opacity: 1; visibility: visible; }
/* visibility is not interpolated, so without this the outgoing figure is cut
   dead the moment .is-active comes off and the 900ms fade above never plays.
   homepage-new.js holds .is-leaving on it for the length of that fade. */
[data-hn-template="academy"] .hn-academy-media-slide.is-leaving { visibility: visible; }
[data-hn-template="academy"] .hn-academy-media-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-hn-template="academy"] .hn-academy-media-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 24px 16px;
  background: linear-gradient(to top, rgba(5,10,22,.80), rgba(5,10,22,0));
  color: #fff; font-size: 14px; font-weight: 600;
}

[data-hn-template="academy"] .hn-academy-right {
  display: flex; flex-direction: column; align-items: center;
  position: sticky; top: calc(var(--hn-navbar-h) + 24px);
}
[data-hn-template="academy"] .hn-login-card--academy { box-shadow: var(--hn-shadow-xl); }

/* Larger tap targets: the primary device here is a shared tablet.
   The size stays at 16px: this selector outranks the phone-tier `.hn-input`
   rule in homepage-new.css, so anything smaller made iOS Safari zoom the whole
   page the moment a child tapped the username field, with no way back out. */
[data-hn-template="academy"] .hn-input { min-height: 48px; font-size: 16px; }
[data-hn-template="academy"] .hn-btn-card { min-height: 46px; font-size: 14px; }
[data-hn-template="academy"] .hn-step-item { padding: 32px 26px 28px; }
[data-hn-template="academy"] .hn-feature-item { padding: 30px 22px; }

/* ── Responsive ────────────────────────────────────────────── */

/* Breakpoints match homepage-new.css exactly. They used to be 1024/768 against
   its 1023/767, so at a 767.5px viewport — real on Android at fractional device
   pixel ratios — the phone tier here fired while --hn-navbar-h was still the
   68px desktop value, and the two hero paddings disagreed. */
@media (max-width: 1023.98px) {
  [data-hn-template="institution"] .hn-portal-panel,
  [data-hn-template="academy"] .hn-academy-grid {
    grid-template-columns: 1fr; gap: 32px;
  }
  [data-hn-template="academy"] .hn-academy-right { position: static; }
  .hn-steps-grid { grid-template-columns: repeat(2, 1fr); }
  /* This page has one job — sign an enrolled candidate in — so once the panel
     stacks, the card comes before the instructions rather than a screen below
     them. Matches what the classic hero already does at this width. */
  [data-hn-template="institution"] .hn-portal-login { order: -1; }
}

@media (max-width: 767.98px) {
  .hn-steps-grid { grid-template-columns: 1fr; gap: 26px; }
  .hn-step-item { padding: 26px 18px 22px; }
  .hn-notice { padding: 15px 16px; gap: 12px; }
  .hn-notice--band { margin: -20px 16px 0; }
  .hn-hero-highlights li { font-size: 13.5px; }

  /* Support: the email and phone links are the actions here just as much as the
     button beside them, so they get the same full-width row — and a break, or a
     long support address runs past the card edge. */
  .hn-support-card { padding: 24px 18px; gap: 20px; }
  .hn-support-title { font-size: 18px; }
  .hn-support-desc { font-size: 13.5px; }
  .hn-support-actions { width: 100%; gap: 10px; }
  .hn-support-actions .hn-btn,
  .hn-support-link { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  .hn-support-link { overflow-wrap: anywhere; }

  /* Banner carousel. Uploaded banners are ~1200x380; forcing them into 4/3 threw
     away more than half the width of every one. 3/2 keeps most of the artwork,
     and the sub-line is clamped so the caption stops swallowing the image. */
  .hn-banner-section { padding: 28px 0; }
  .hn-carousel-track { aspect-ratio: 3 / 2; min-height: 200px; }
  .hn-carousel-caption { padding: 14px 16px; }
  .hn-carousel-caption-title { font-size: 16px; }
  .hn-carousel-caption-sub {
    font-size: 12.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hn-carousel-caption-cta { margin-top: 10px; }
  .hn-carousel-nav { width: 44px; height: 44px; top: calc((100% - 46px) / 2); }
  .hn-carousel-nav-prev { left: 8px; }
  .hn-carousel-nav-next { right: 8px; }
  /* Dots move out from over the caption into a row of their own under the
     image, where a 44px target fits without covering anything. */
  .hn-carousel-dots {
    position: static; transform: none;
    height: 46px; align-items: center; justify-content: center; gap: 0;
  }
  .hn-carousel-dot {
    width: 32px; height: 44px; padding: 0; background: none; transform: none;
    display: flex; align-items: center; justify-content: center;
  }
  .hn-carousel-dot.active { background: none; transform: none; }
  .hn-carousel-dot::after {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--hn-gray-300);
    transition: background var(--hn-fast) var(--hn-ease), transform var(--hn-fast) var(--hn-ease);
  }
  .hn-carousel-dot.active::after { background: var(--hn-brand-primary); transform: scale(1.3); }

  /* Hero slide dots: same treatment, kept inside the hero's bottom padding.
     The slide count is however many banners the tenant uploaded, so the row
     wraps rather than running off the edge. */
  .hn-hero-slide-dots {
    bottom: 2px; gap: 0;
    flex-wrap: wrap; justify-content: center;
    max-width: calc(100vw - 24px);
  }
  .hn-hero-slide-dot {
    width: 44px; height: 44px; background: none;
    display: flex; align-items: center; justify-content: center;
  }
  .hn-hero-slide-dot.is-active { width: 56px; background: none; }
  .hn-hero-slide-dot::after {
    content: ''; width: 26px; height: 4px; border-radius: var(--hn-r-full);
    background: rgba(255,255,255,.32);
    transition: background var(--hn-fast) var(--hn-ease), width var(--hn-fast) var(--hn-ease);
  }
  .hn-hero-slide-dot.is-active::after { width: 40px; background: #fff; }

  /* ── INSTITUTION ─────────────────────────────────────────── */
  [data-hn-template="institution"] .hn-portal-hero { padding: calc(var(--hn-navbar-h) + 28px) 0 50px; }
  [data-hn-template="institution"] .hn-portal-masthead { margin-bottom: 26px; padding-bottom: 20px; }
  [data-hn-template="institution"] .hn-portal-sub { font-size: 14.5px; }
  [data-hn-template="institution"] .hn-portal-panel { gap: 26px; }
  [data-hn-template="institution"] .hn-portal-checklist { gap: 11px; }
  [data-hn-template="institution"] .hn-portal-checklist li { font-size: 14px; }
  /* Was inheriting full width from the navbar button rule in homepage-new.css,
     which is now scoped to the menu. */
  [data-hn-template="institution"] .hn-portal-cta { width: 100%; justify-content: center; }

  /* ── ACADEMY ─────────────────────────────────────────────── */
  [data-hn-template="academy"] .hn-academy-hero { padding: calc(var(--hn-navbar-h) + 24px) 0 40px; }
  [data-hn-template="academy"] .hn-academy-grid { gap: 28px; }
  [data-hn-template="academy"] .hn-academy-blob { display: none; }
  [data-hn-template="academy"] .hn-academy-sub { font-size: 15px; margin-bottom: 18px; }
  [data-hn-template="academy"] .hn-academy-chips { gap: 8px; margin-bottom: 20px; }
  [data-hn-template="academy"] .hn-academy-chip { padding: 8px 13px; font-size: 13px; }
  [data-hn-template="academy"] .hn-academy-ctas { gap: 10px; margin-bottom: 22px; }
  [data-hn-template="academy"] .hn-academy-ctas .hn-btn { flex: 1 1 100%; }
  [data-hn-template="academy"] .hn-academy-media { border-width: 4px; margin-bottom: 20px; }
  [data-hn-template="academy"] .hn-academy-media-slide figcaption { padding: 16px 16px 12px; font-size: 13px; }
  .hn-notice--academy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-hero-slide { animation: none; transform: none; transition: opacity 200ms linear; }
  .hn-hero-slide.is-active { transform: none; }
  /* Outranks the delayed fade-out above on specificity, media query or not. */
  .hn-hero-slide.is-leaving { transition: opacity 200ms linear; }
  .hn-carousel-slide,
  [data-hn-template="academy"] .hn-academy-media-slide { transition: none; }
}