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

/* ============================================================
   3c. Template: MARKETPLACE  (test-series catalogue)
   ------------------------------------------------------------
   Colour comes entirely from --hn-brand-primary / --hn-brand-accent via the
   bridge in section 1, so this design re-skins with the client's two hex values
   like the others. The only literals are neutrals and alpha.

   Contrast note: the hero CTA does NOT reuse --hn-brand-accent. The accent is
   whatever hue the tenant picked and can be anything from a pale amber to a deep
   violet, so no single ink is readable on it — PracticeNexa's violet accent with
   the dark ink this first shipped with measured 2.89:1, a fail.

   The CTA therefore has its own pair, and the DEFAULT is white-on-primary, which
   is high contrast on any dark hero a tenant can produce. A tenant that has a
   third brand colour overrides the pair in its client stylesheet and takes
   responsibility for the ratio there, where the actual hex is known.
   ============================================================ */

[data-hn-template="marketplace"] {
  --hn-bg: #f6f5fc;
  --hn-mkt-cta-bg:  #ffffff;
  --hn-mkt-cta-ink: var(--hn-brand-primary);
}

/* ── Hero ──────────────────────────────────────────────────── */
[data-hn-template="marketplace"] .hn-mkt-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--hn-navbar-h) + 56px) 0 44px;
  background: var(--hn-grad-hero);
  color: #fff;
}
/* The client's banners sit behind the brand ground rather than replacing it:
   at 22% they read as texture, and the headline keeps its contrast whatever
   the photograph happens to be. */
[data-hn-template="marketplace"] .hn-hero-slides { opacity: .22; }
[data-hn-template="marketplace"] .hn-hero-slide-scrim {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hn-brand-primary) 62%, #05040f) 0%,
    color-mix(in srgb, var(--hn-brand-primary) 30%, transparent) 100%);
}

[data-hn-template="marketplace"] .hn-mkt-glow {
  position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0;
}
[data-hn-template="marketplace"] .hn-mkt-glow-1 {
  width: 520px; height: 520px; top: -220px; right: -140px;
  background: color-mix(in srgb, var(--hn-brand-accent) 46%, transparent);
}
[data-hn-template="marketplace"] .hn-mkt-glow-2 {
  width: 420px; height: 420px; bottom: -240px; left: -120px;
  background: color-mix(in srgb, var(--hn-brand-primary) 60%, transparent);
}

[data-hn-template="marketplace"] .hn-mkt-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center;
}

[data-hn-template="marketplace"] .hn-mkt-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(4px);
}
[data-hn-template="marketplace"] .hn-mkt-eyebrow i { color: var(--hn-brand-accent); }

[data-hn-template="marketplace"] .hn-mkt-headline {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.02em; margin: 18px 0 0; color: #fff;
}
[data-hn-template="marketplace"] .hn-mkt-headline-accent {
  display: block;
  /* Mixed toward white so the accent stays a highlight on a dark ground rather
     than a second, competing dark. */
  color: color-mix(in srgb, var(--hn-brand-accent) 55%, #fff);
}

[data-hn-template="marketplace"] .hn-mkt-sub {
  font-size: 16.5px; line-height: 1.65; margin: 18px 0 0;
  color: rgba(255,255,255,.80); max-width: 54ch;
}

[data-hn-template="marketplace"] .hn-mkt-chips {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
[data-hn-template="marketplace"] .hn-mkt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
}
[data-hn-template="marketplace"] .hn-mkt-chip i {
  font-size: 11px; color: color-mix(in srgb, var(--hn-brand-accent) 60%, #fff);
}

[data-hn-template="marketplace"] .hn-mkt-ctas {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;
}
[data-hn-template="marketplace"] .hn-mkt-btn-primary {
  background: var(--hn-mkt-cta-bg);
  color: var(--hn-mkt-cta-ink);
  border: 1px solid transparent;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
[data-hn-template="marketplace"] .hn-mkt-btn-primary:hover {
  background: color-mix(in srgb, var(--hn-mkt-cta-bg) 90%, #000);
  color: var(--hn-mkt-cta-ink); transform: translateY(-2px);
}
[data-hn-template="marketplace"] .hn-mkt-btn-ghost {
  background: rgba(255,255,255,.10);
  color: #fff; border: 1px solid rgba(255,255,255,.34); font-weight: 600;
}
[data-hn-template="marketplace"] .hn-mkt-btn-ghost:hover {
  background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px);
}

[data-hn-template="marketplace"] .hn-login-card--marketplace { box-shadow: var(--hn-shadow-xl); }

/* ── Browse-by-exam rail ───────────────────────────────────── */
[data-hn-template="marketplace"] .hn-mkt-rail {
  position: relative; z-index: 2;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
[data-hn-template="marketplace"] .hn-mkt-rail-label {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
/* Wraps rather than scrolling. A nowrap rail cut the last chip in half at the
   container edge, which reads as a broken layout rather than as an invitation to
   scroll — and there is no affordance here to say otherwise. The list is bounded
   by the packages on the page (eight cards, so eight families at the very most),
   so wrapping costs one extra row in the worst case. */
[data-hn-template="marketplace"] .hn-mkt-rail-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: #fff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  transition: background var(--hn-fast, .18s) ease, transform var(--hn-fast, .18s) ease;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip:hover {
  background: rgba(255,255,255,.20); color: #fff; transform: translateY(-1px);
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip:focus-visible {
  outline: 2px solid var(--hn-brand-accent); outline-offset: 2px;
}
/* The two-or-three letter family code, so the rail is scannable by shape as
   well as by word. */
[data-hn-template="marketplace"] .hn-mkt-rail-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  background: rgba(255,255,255,.20); color: #fff;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip--all {
  background: var(--hn-mkt-cta-bg); color: var(--hn-mkt-cta-ink); border-color: transparent;
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip--all:hover {
  background: color-mix(in srgb, var(--hn-mkt-cta-bg) 90%, #000); color: var(--hn-mkt-cta-ink);
}
[data-hn-template="marketplace"] .hn-mkt-rail-chip--all i { font-size: 11px; }

/* Stats sit on the hero's dark ground here, so the base (dark) styling is
   already right — it only needs separating from the rail above it. */
[data-hn-template="marketplace"] .hn-stats-strip { margin-top: 28px; }

/* ── The shelf leads ───────────────────────────────────────── */
/* packages-section.php ships with .hn-section-alt, which is the tinted band used
   to separate a section sitting between two others. Here it is the FIRST thing
   under the hero, so the band would read as a stripe rather than a separation. */
[data-hn-template="marketplace"] #hn-packages-section.hn-section-alt {
  background: transparent;
  padding-top: 54px;
}
[data-hn-template="marketplace"] #hn-packages-section .hn-section-title {
  font-size: clamp(24px, 2.6vw, 32px);
}
/* The exam feed self-hides while empty, so the steps band can end up directly
   under the shelf; a tint keeps the two from running together. */
[data-hn-template="marketplace"] .hn-steps-section { background: #fff; }

/* ── 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,
  [data-hn-template="marketplace"] .hn-mkt-grid {
    grid-template-columns: 1fr; gap: 32px;
  }
  /* Same reasoning as the institution panel below: once the hero stacks, the
     sign-in card belongs above the fold, not a screen under the copy. */
  [data-hn-template="marketplace"] .hn-mkt-right { order: -1; }
  [data-hn-template="marketplace"] .hn-mkt-rail { flex-direction: column; align-items: flex-start; gap: 10px; }
  [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; }

  [data-hn-template="marketplace"] .hn-mkt-hero { padding: calc(var(--hn-navbar-h) + 32px) 0 32px; }
  [data-hn-template="marketplace"] .hn-mkt-sub { font-size: 15px; }
  /* Full-width taps, and the rail keeps its horizontal scroll rather than
     wrapping into a block of chips that pushes the shelf off the screen. */
  [data-hn-template="marketplace"] .hn-mkt-ctas { flex-direction: column; align-items: stretch; }
  [data-hn-template="marketplace"] .hn-mkt-ctas .hn-btn { justify-content: center; min-height: 48px; }
  [data-hn-template="marketplace"] .hn-mkt-rail { margin-top: 28px; padding-top: 18px; }
  [data-hn-template="marketplace"] #hn-packages-section.hn-section-alt { padding-top: 34px; }
  .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; }
}

/* ============================================================
   3d. MARKETPLACE inside the Android app shell — card stack
   ------------------------------------------------------------
   The WebView hides the site navbar and footer (.hn-app-shell on
   <body>), which until now meant the app showed the desktop page
   squeezed into a phone: 68px of hero padding reserved for a navbar
   that is not there, and the package cards flattened into side-on
   list rows by the shared phone CSS in homepage-new.css.

   Everything here is scoped .hn-app-shell[data-hn-template="marketplace"],
   so it renders on exactly one surface: the marketplace template opened
   inside the Android app. Phone BROWSERS keep the responsive website
   layout — never key this on MOBILE_UI (see
   tests/qa_mobile_app_shell_regression.php for why the app flag must
   not leak into browser sessions), and the other templates
   (classic / institution / academy) never match the attribute.

   Colour comes from the same --hn-brand-* pair as the rest of the
   template, so a theme change at /homepageSetup/ carries through.
   ============================================================ */

/* No in-page bar: the Android app draws its own native toolbar and
   bottom navigation (with a Login tab), so the page adds no chrome of
   its own — it opens straight on the hero card below.

   Every color-mix() below is preceded by a flat fallback, the same
   discipline as section 1: an older WebView that cannot parse
   color-mix drops the whole declaration, and without the fallback the
   hero card shipped with white text on no background. */

@media (max-width: 767.98px) {

  .hn-app-shell[data-hn-template="marketplace"] .hn-container { padding: 0 16px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-section { padding: 30px 0; }
  /* The stack reads as one screen; per-section eyebrows and title icons
     are desktop rhythm it does not need. */
  .hn-app-shell[data-hn-template="marketplace"] .hn-section-eyebrow,
  .hn-app-shell[data-hn-template="marketplace"] .hn-section-title i { display: none; }

  /* ── Hero: dark band → brand card on the light ground ────── */
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-hero {
    background: var(--hn-bg);
    padding: 0 0 4px;
    color: var(--hn-text);
    overflow: visible;   /* the band clipped its own card's shadow */
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-glow,
  .hn-app-shell[data-hn-template="marketplace"] .hn-hero-slides,
  .hn-app-shell[data-hn-template="marketplace"] .hn-hero-slide-dots,
  .hn-app-shell[data-hn-template="marketplace"] .hn-login-trigger-row { display: none; }
  /* The right grid cell only hosts the fixed bottom sheet on phones, so the
     stacked grid's gap was pure dead space above the copy. Never hide the
     cell itself — the sheet lives inside it. */
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-grid { gap: 0; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-left {
    position: relative; overflow: hidden;
    margin-top: 16px;
    border-radius: var(--hn-r-xl);
    padding: 24px 20px;
    background: var(--hn-brand-primary);
    background: linear-gradient(140deg,
      color-mix(in srgb, var(--hn-brand-primary) 62%, #05040f) 0%,
      var(--hn-brand-primary) 48%,
      color-mix(in srgb, var(--hn-brand-primary) 45%, var(--hn-brand-accent)) 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--hn-brand-primary) 26%, transparent),
                0 4px 12px rgba(0,0,0,.06);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-headline { font-size: 27px; margin-top: 14px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-sub { font-size: 13.5px; margin-top: 12px; }
  /* Highlight chips → bare check rows inside the card. */
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-chips { margin-top: 14px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-chip {
    padding: 0; border: 0; border-radius: 0; background: transparent;
    font-size: 13px;
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-ctas { margin-top: 18px; gap: 10px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-ctas .hn-btn { border-radius: 14px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-btn-primary { min-height: 50px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-btn-ghost { min-height: 46px; }

  /* ── Browse-by-exam: dark wrap → light swipe rail ────────── */
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail {
    border-top: 0; margin-top: 22px; padding-top: 0;
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-label { color: var(--hn-gray-500); }
  /* One swipeable row. The wrap-don't-scroll comment in §3c is about the
     DARK rail sitting inside the hero band, where a cut chip read as
     broken; here the row sits on the page ground and bleeds through the
     16px gutter, which is its scroll affordance. */
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-list {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: 0 -16px; padding: 2px 16px 6px;
    scrollbar-width: none;
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-list::-webkit-scrollbar { display: none; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-chip {
    min-height: 44px;
    background: var(--hn-white);
    color: var(--hn-brand-primary);
    border: 1px solid var(--hn-gray-200);
    box-shadow: var(--hn-shadow-sm);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-code {
    background: var(--hn-navy-50);
    background: color-mix(in srgb, var(--hn-brand-primary) 10%, #fff);
    color: var(--hn-brand-primary);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-mkt-rail-chip--all {
    background: var(--hn-brand-primary); color: #fff; border-color: transparent;
  }

  /* ── Stats: glass strip → white tiles ────────────────────── */
  .hn-app-shell[data-hn-template="marketplace"] .hn-stats-strip {
    margin-top: 20px; padding: 0;
    background: transparent; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-stat-divider { display: none; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-stat {
    background: var(--hn-white);
    border: 1px solid var(--hn-gray-100);
    border-radius: var(--hn-r-lg);
    padding: 14px 16px;
    box-shadow: var(--hn-shadow-sm);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-stat-icon {
    border-radius: 10px;
    background: var(--hn-gray-100);
    background: color-mix(in srgb, var(--hn-brand-accent) 10%, #fff);
    color: var(--hn-brand-accent);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-stat-num { color: var(--hn-navy-800); }
  .hn-app-shell[data-hn-template="marketplace"] .hn-stat-label { color: var(--hn-text-muted); }

  /* ── Shelf: side-on rows → proper cards ──────────────────── */
  .hn-app-shell[data-hn-template="marketplace"] #hn-packages-section.hn-section-alt { padding-top: 24px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-cards-grid { gap: 16px; }
  /* Undo the shared phone layout from homepage-new.css: back to the
     desktop card anatomy — cover on top, body, footer under a rule. */
  .hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card {
    display: flex; flex-direction: column;
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-body { padding: 16px 16px 12px; gap: 9px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--hn-gray-100);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-top .hn-chip-subject { display: inline-flex; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-pkg-card-footer .hn-btn-card {
    min-height: 44px; border-radius: 10px; padding: 0 18px;
  }

  /* ── Steps: floating-number panels → compact numbered rows ─ */
  .hn-app-shell[data-hn-template="marketplace"] .hn-steps-section { background: transparent; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-features-heading { text-align: left; margin-bottom: 16px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-features-heading .hn-section-title { justify-content: flex-start; margin-top: 0; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-steps-grid { gap: 12px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-step-item {
    display: grid; grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px; align-items: start;
    background: var(--hn-white);
    border: 1px solid var(--hn-gray-100);
    border-radius: var(--hn-r-lg);
    padding: 16px;
    box-shadow: var(--hn-shadow-sm);
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-step-number {
    position: static; grid-row: 1 / span 2;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--hn-brand-primary), var(--hn-brand-accent));
    box-shadow: none;
  }
  .hn-app-shell[data-hn-template="marketplace"] .hn-step-icon { display: none; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-step-title { grid-column: 2; align-self: center; font-size: 14.5px; margin: 0; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-step-desc { grid-column: 2; font-size: 12.5px; line-height: 1.55; margin: 4px 0 0; }

  /* ── Features + support: fold into the same stack ────────── */
  .hn-app-shell[data-hn-template="marketplace"] .hn-features { padding: 30px 0; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-feature-item { border-radius: var(--hn-r-lg); }
  .hn-app-shell[data-hn-template="marketplace"] .hn-support-section { background: transparent; padding-bottom: 44px; }
  .hn-app-shell[data-hn-template="marketplace"] .hn-support-card { border-radius: var(--hn-r-xl); }
}