/* 58Hunter Web — public shell + public-only compositions
 * Tokens / primitives / invite-shell / section-header: design-system.css
 * Content type + account patterns: portal-surface.css (body.portal-surface)
 */

html {
  scroll-behavior: smooth;
  /* Sticky header offset so focus/scroll never tucks first lines under the nav */
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--colour-surface);
  background-image:
    radial-gradient(ellipse 90% 55% at 0% -10%, var(--colour-glow), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, var(--colour-ink-alpha-04), transparent 50%);
  background-attachment: fixed;
}

img {
  max-width: 100%;
  display: block;
}

/* —— Grid —— */
/* Single measure for main column, header, and footer inners */
.container,
.site-header__inner,
.site-footer__inner {
  width: min(100% - (var(--grid-gutter) * 2), var(--grid-max));
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* —— Shell —— */
.site-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}

.site-main {
  flex: 1;
  /* Extra top air so first-line copy (eyebrow) is never tight under sticky header */
  padding-block: var(--space-5) var(--space-8);
}

@media (max-width: 899px) {
  .site-main {
    /* Leave room above iOS Safari bottom chrome so CTAs are never flush with the address bar */
    padding-block: var(--space-4) max(var(--space-9), calc(var(--safe-bottom) + var(--space-8)));
  }
}

/* —— Header —— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-height);
  display: flex;
  align-items: center;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  background: var(--colour-header-bg);
  border-bottom: 1px solid var(--colour-line);
  box-shadow: 0 1px 0 var(--colour-white-alpha-55) inset;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-brand-gap);
  color: var(--colour-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-brand);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.brand:hover {
  color: var(--colour-ink);
}

.brand__num {
  color: var(--colour-accent);
  font-weight: 700;
}

.nav {
  display: none;
  align-items: center;
  gap: var(--space-nav-gap);
}

.nav a {
  text-decoration: none;
  color: var(--colour-muted);
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-pill);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.nav a:hover,
.nav a.active {
  background: var(--colour-ink-alpha-05);
  color: var(--colour-ink);
}

.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-sm);
  background: var(--colour-surface-elevated);
  color: var(--colour-ink);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--colour-ink-alpha-25);
}

.nav-toggle__close {
  display: none;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__open {
  display: none;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__close {
  display: inline;
}

.nav-toggle-input:checked ~ .nav {
  display: flex;
  position: absolute;
  z-index: 50;
  top: var(--header-height);
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-4) var(--grid-gutter) var(--space-5);
  /* Opaque elevated surface so the overlay reads clearly over page content */
  background: var(--colour-surface-elevated);
  border-bottom: 1px solid var(--colour-line-strong);
  box-shadow: var(--shadow-nav-overlay);
  animation: fade-slide-down var(--duration-med) var(--ease-out);
}

.nav-toggle-input:checked ~ .nav a {
  background: var(--colour-ink-alpha-03);
  color: var(--colour-ink);
  border: 1px solid var(--colour-line);
}

@media (min-width: 800px) {
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    animation: none;
  }

  .nav-toggle,
  .nav-toggle-input {
    display: none;
  }

  .nav-toggle-input:checked ~ .nav {
    position: static;
    flex-direction: row;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    animation: none;
  }
}

/* —— Footer —— */
.site-footer {
  background: var(--colour-ink);
  color: var(--colour-on-ink);
  padding-block: var(--space-6);
}

.site-footer p {
  color: var(--colour-on-ink-muted);
  margin: 0;
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}

.site-footer a {
  color: var(--colour-accent-soft);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

.site-footer a:hover {
  color: var(--colour-white);
}

/*
 * marketing-hero composition (canonical) — public-only
 * Markup: section.hero
 *           > .hero__stage  → HeroStage (media; not BO)
 *           > .hero__copy
 *               eyebrow · h1 · .lead · .actions
 * Layout: mobile stage→copy; desktop ≥900px copy | stage (equal columns, full content well).
 * Not section-header (no band measure). Not path opener (those use .surface-hero / .candidates-hero + --measure-opener).
 * Placement path is a separate section below — not part of this composition.
 */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "stage"
    "copy";
  gap: var(--space-5);
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  padding-block: var(--space-2) var(--space-6);
}

.hero__stage {
  grid-area: stage;
  width: 100%;
  min-width: 0;
  animation: cinematic-in var(--duration-cinematic) var(--ease-out) both;
  animation-delay: 0.06s;
}

.hero__copy {
  grid-area: copy;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
  padding-top: var(--space-1);
}

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: var(--tracking-hero);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-4);
  animation: cinematic-in var(--duration-cinematic-med) var(--ease-out) both;
  animation-delay: 0.28s;
}

.hero__copy .eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  margin: 0 0 var(--space-4);
  line-height: 1.4;
  overflow: visible;
  animation: cinematic-in var(--duration-cinematic-fast) var(--ease-out) both;
  animation-delay: 0.14s;
}

.hero__copy .lead {
  max-width: none;
  animation: cinematic-in var(--duration-cinematic-fast) var(--ease-out) both;
  animation-delay: 0.4s;
}

.hero__copy .actions {
  animation: cinematic-in var(--duration-cinematic-fast) var(--ease-out) both;
  animation-delay: 0.52s;
}

/* Primary visual stage */
.hero-stage {
  margin: 0;
  width: 100%;
}

.hero-stage__frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-frame);
  overflow: hidden;
  border: 1px solid var(--colour-accent-alpha-35);
  box-shadow: var(--shadow-stage);
  background: var(--colour-stage-void);
  aspect-ratio: 16 / 10;
  min-height: var(--hero-stage-min-h);
  isolation: isolate;
}

.hero-stage__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-stage__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 42%;
  transform: scale(1.06);
  animation: hero-kenburns 18s var(--ease-out) infinite alternate;
  will-change: transform;
}

.hero-stage__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero-stage__rays {
  transform-origin: 542px 188px;
}

.hero-stage__rays-spin {
  transform-origin: 0 0;
  animation: hero-rays-spin 28s linear infinite;
  opacity: 0.85;
}

.hero-stage__star {
  animation: hero-twinkle 3.6s ease-in-out infinite;
}

.hero-stage__star--1 { animation-delay: 0s; }
.hero-stage__star--2 { animation-delay: 0.4s; }
.hero-stage__star--3 { animation-delay: 0.9s; }
.hero-stage__star--4 { animation-delay: 1.3s; }
.hero-stage__star--5 { animation-delay: 0.2s; }
.hero-stage__star--6 { animation-delay: 1.1s; }
.hero-stage__star--7 { animation-delay: 0.7s; }
.hero-stage__star--8 { animation-delay: 1.6s; }
.hero-stage__star--9 { animation-delay: 0.5s; }
.hero-stage__star--10 { animation-delay: 1.4s; }
.hero-stage__star--11 { animation-delay: 0.8s; }
.hero-stage__star--12 { animation-delay: 1.9s; }

.hero-stage__arc {
  stroke-dasharray: 18 14;
  animation: hero-arc-shimmer 2.8s linear infinite;
  filter: drop-shadow(0 0 7px var(--colour-accent-soft-alpha-50));
}

.hero-stage__node {
  opacity: 1;
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-node-breathe 3.2s ease-in-out infinite;
}

.hero-stage__node--a { animation-delay: 0s; }
.hero-stage__node--b { animation-delay: 0.45s; }
.hero-stage__node--c { animation-delay: 0.9s; }

.hero-stage__pulse {
  opacity: 0.7;
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-pulse 2.8s var(--ease-out) infinite;
}

.hero-stage__particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-stage__dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--colour-highlight-alpha-75);
  box-shadow: 0 0 10px var(--colour-accent-soft-alpha-55);
  animation: hero-float 6.5s var(--ease-out) infinite;
}

.hero-stage__dot--1 { left: 14%; top: 28%; animation-duration: 7.2s; animation-delay: 0s; }
.hero-stage__dot--2 { left: 38%; top: 18%; width: var(--dot-size-sm); height: var(--dot-size-sm); animation-duration: 5.8s; animation-delay: 0.6s; }
.hero-stage__dot--3 { left: 62%; top: 30%; animation-duration: 6.8s; animation-delay: 1.1s; }
.hero-stage__dot--4 { left: 78%; top: 48%; width: var(--dot-size-xs); height: var(--dot-size-xs); animation-duration: 7.6s; animation-delay: 0.3s; }
.hero-stage__dot--5 { left: 24%; top: 62%; width: var(--dot-size-sm); height: var(--dot-size-sm); animation-duration: 6.2s; animation-delay: 1.4s; }

.hero-stage__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 65% at 58% 42%, transparent 20%, var(--colour-stage-void-alpha-28) 70%, var(--colour-stage-void-alpha-55) 100%),
    linear-gradient(180deg, var(--colour-stage-void-alpha-15) 0%, transparent 35%, var(--colour-stage-void-alpha-45) 100%);
}

/* Rotating taglines — lower-right corner, single-row pills, snappy enter/exit.
   Stack lines in one grid cell so the track sizes to the longest pill (absolute-only kids collapsed width to 0). */
.hero-stage__ticker {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  top: auto;
  z-index: 4;
  max-width: calc(100% - (var(--space-3) * 2));
  overflow: hidden;
  pointer-events: none;
  text-align: right;
}

.hero-stage__ticker-track {
  display: grid;
  justify-items: end;
  align-items: center;
  /* Clip enter/exit travel while keeping pill fully visible at rest */
  height: 2.5rem;
  overflow: hidden;
}

.hero-stage__ticker-line {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  /* Symmetric horizontal padding */
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--colour-surface-elevated-alpha-12);
  border: 1px solid var(--colour-accent-soft-alpha-40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--colour-on-ink);
  font-size: var(--text-ticker);
  font-weight: 600;
  letter-spacing: var(--tracking-ticker);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 110%, 0);
  animation: hero-ticker 15s var(--ease-out) infinite;
}

.hero-stage__ticker-line--1 { animation-delay: 0s; }
.hero-stage__ticker-line--2 { animation-delay: 3s; }
.hero-stage__ticker-line--3 { animation-delay: 6s; }
.hero-stage__ticker-line--4 { animation-delay: 9s; }
.hero-stage__ticker-line--5 { animation-delay: 12s; }

.hero-stage__caption {
  margin: var(--space-3) 0 0;
  color: var(--colour-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: calc(var(--tracking-label) * 2);
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * placement-path composition (canonical) — public-only
 * Markup: section.section.placement-path
 *           > PlacementPath → aside.placement-path-panel
 *               panel eyebrow · rows (name · value · meta · icon) · total
 * Layout: own section below marketing-hero (not in the hero grid). Content-sized
 * centred panel (--measure-placement / --measure-placement-mobile), not full-well.
 * Mobile: stacked rows, icon trailing; desktop ≥900px: three equal columns, icon above.
 * Not section-header; not marketing-hero. Do not port into BO.
 */
.section.placement-path {
  /* Tighter than default .section so it still reads with the landing band */
  margin-top: var(--space-5);
}

.placement-path .placement-path-panel {
  animation: cinematic-in var(--duration-cinematic-panel) var(--ease-out) both;
  animation-delay: 0.2s;
}

/* Compact tier strip — content-sized, not full-bleed sparse board */
.placement-path-panel {
  position: relative;
  width: 100%;
  max-width: var(--measure-placement);
  margin-inline: auto;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(165deg, var(--colour-surface-elevated-alpha-98) 0%, var(--colour-surface-warm-alpha-98) 100%);
  border: 1px solid var(--colour-line-strong);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  overflow: hidden;
}

.placement-path-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--accent-bar);
  background: linear-gradient(180deg, var(--colour-accent-soft), var(--colour-accent) 55%, transparent);
}

.placement-path-panel__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--colour-accent);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

.placement-path-panel__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/*
 * 1-col: text stack start-aligned, icon on the trailing edge.
 * Desktop: icon above the stack (see min-width 900px).
 */
.placement-path-panel__rows li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--colour-line);
  animation: cinematic-in var(--duration-cinematic-row) var(--ease-out) both;
}

.placement-path-panel__rows li:nth-child(1) { animation-delay: 0.48s; }
.placement-path-panel__rows li:nth-child(2) { animation-delay: 0.58s; }
.placement-path-panel__rows li:nth-child(3) { animation-delay: 0.68s; }

.placement-path-panel__rows li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.placement-path-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.placement-path-panel__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--colour-ink);
  min-width: 0;
}

.placement-path-panel__value {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: var(--text-tier-value);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--colour-ink);
  white-space: nowrap;
}

.placement-path-panel__meta {
  color: var(--colour-muted);
  font-size: var(--text-xs);
  min-width: 0;
}

.placement-path-panel__icon {
  flex: 0 0 auto;
  width: var(--placement-icon-size);
  height: var(--placement-icon-size);
  border-radius: var(--radius-icon);
  display: grid;
  place-items: center;
  color: var(--colour-ink);
  background:
    linear-gradient(160deg, var(--colour-surface-elevated) 0%, var(--colour-surface-warm-alpha-95) 45%, var(--colour-accent-alpha-14) 100%);
  border: 1px solid var(--colour-accent-alpha-36);
  box-shadow: var(--shadow-icon-sm);
}

.placement-path-panel__svg {
  width: var(--placement-svg-size);
  height: var(--placement-svg-size);
  display: block;
  color: var(--colour-accent);
}

.placement-path-panel__total {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-line);
  color: var(--colour-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.45;
}

@keyframes hero-kenburns {
  from {
    transform: scale(1.06) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes hero-arc-shimmer {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -64;
  }
}

@keyframes hero-rays-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes hero-twinkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

@keyframes hero-node-breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes hero-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.3);
  }
}

@keyframes hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(0, -10px, 0);
    opacity: 0.9;
  }
}

/* 5 lines × 3s = 15s cycle; snappy bottom → centre hold → exit top */
@keyframes hero-ticker {
  0% {
    opacity: 0;
    transform: translate3d(0, 115%, 0);
  }
  4% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  16% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  20% {
    opacity: 0;
    transform: translate3d(0, -115%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -115%, 0);
  }
}

@media (min-width: 900px) {
  /* marketing-hero: two balanced columns copy | stage */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy stage";
    gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3.25rem);
    align-items: center;
    padding-block: var(--space-5) var(--space-6);
  }

  .hero__copy {
    max-width: none;
    align-self: center;
    padding-top: 0;
  }

  .hero__stage {
    align-self: center;
  }

  .hero-stage__frame {
    min-height: 0;
    aspect-ratio: 16 / 10.5;
  }

  /* Placement path: three tighter columns inside a content-sized panel */
  .section.placement-path {
    margin-top: var(--space-6);
  }

  .placement-path .placement-path-panel {
    padding: clamp(1.25rem, 2.2vw, 1.6rem) clamp(1.35rem, 2.5vw, 1.85rem);
  }

  .placement-path .placement-path-panel__rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
  }

  .placement-path .placement-path-panel__rows li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border-bottom: 0;
    border-right: 1px solid var(--colour-line);
    animation: none;
  }

  .placement-path .placement-path-panel__rows li:first-child {
    padding-left: 0;
  }

  .placement-path .placement-path-panel__rows li:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .placement-path .placement-path-panel__icon {
    order: -1;
  }

  .placement-path .placement-path-panel__value {
    margin: 0.2rem 0 0.1rem;
    font-size: var(--text-tier-value-lg);
  }

  .placement-path .placement-path-panel__total {
    margin-top: var(--space-4);
  }
}

/* Stacked layout (mobile → mid): full-width CTAs, shared column alignment */
@media (max-width: 899px) {
  /* placement-path: narrower panel so trailing-icon rows have less middle gap */
  .placement-path-panel {
    max-width: var(--measure-placement-mobile);
  }

  /*
   * iPhone Safari: lift CTAs enough that air under the invitation button sits above
   * the toolbar (margin alone only extends below the fold). Tuned mid-way: not flush,
   * not overly tall empty band.
   */
  .hero {
    gap: var(--space-3);
    padding-bottom: max(var(--space-6), calc(var(--safe-bottom) + var(--space-4)));
  }

  .hero-stage__frame {
    min-height: var(--hero-stage-min-h-mobile);
    aspect-ratio: 16 / 10;
  }

  .hero-stage__caption {
    margin-top: var(--space-2);
  }

  .hero h1 {
    margin-bottom: var(--space-3);
  }

  .hero__copy .eyebrow {
    margin-bottom: var(--space-3);
  }

  .hero__copy .lead {
    margin-bottom: var(--space-2);
  }

  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-4);
    margin-bottom: max(var(--space-6), calc(var(--safe-bottom) + var(--space-5)));
  }

  .hero .actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage__photo,
  .hero-stage__arc,
  .hero-stage__node,
  .hero-stage__pulse,
  .hero-stage__dot,
  .hero-stage__rays-spin,
  .hero-stage__star,
  .hero-stage__ticker-line,
  .hero__stage,
  .placement-path .placement-path-panel,
  .hero h1,
  .hero__copy .eyebrow,
  .hero__copy .lead,
  .hero__copy .actions,
  .placement-path-panel__rows li {
    animation: none !important;
  }

  .hero-stage__photo {
    transform: scale(1.04);
  }

  .hero-stage__node,
  .hero-stage__pulse,
  .hero-stage__star {
    opacity: 0.9;
  }

  /* Static first tagline when motion is reduced */
  .hero-stage__ticker-line {
    opacity: 0 !important;
    transform: none !important;
  }

  .hero-stage__ticker-line--1 {
    opacity: 1 !important;
  }
}

/* —— Public components (shared primitives live in design-system.css) —— */

.placeholder-note {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--colour-accent-alpha-10);
  color: var(--colour-ink-soft);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.feature-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.feature-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--colour-muted);
}

.feature-list li::before {
  content: "";
  flex: 0 0 auto;
  width: var(--feature-dot);
  height: var(--feature-dot);
  margin-top: var(--space-2);
  border-radius: 50%;
  background: var(--colour-accent);
}

/* —— Motion —— */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--rise-fade-up));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Calm cinematic entrance — 58Citi-style fade + rise */
@keyframes cinematic-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise-cinematic));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-slide-down {
  from {
    opacity: 0;
    transform: translateY(var(--rise-nav-menu));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll / section reveals (driven by js/reveal.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise-reveal));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/*
 * signup-form composition (canonical) — public Employers enquiry
 * Markup: form.signup-form
 *           > fieldset.signup-form__section (form-step)×N
 *               legend (step badge + title) · .signup-form__hint · body
 *                 (tier-picker | field-grid | …)
 *           > .signup-form__footer (note · .actions)
 * Layout: same centred column as path-opener — --measure-opener /
 * --measure-opener-lg (≥900px). Not path-opener (not intro stack).
 * Not section-header. Steps are siblings under the form shell.
 */
.signup-form {
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--measure-opener);
  margin-inline: auto;
}

.signup-form__section {
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-lg);
  background: var(--colour-surface-elevated);
  box-shadow: var(--shadow-sm);
}

/* Keep legend inside the card (not straddling the border — default fieldset quirk). */
.signup-form__section::after {
  content: "";
  display: table;
  clear: both;
}

.signup-form__legend {
  float: left;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--colour-ink);
  line-height: 1.2;
}

.signup-form__step {
  display: inline-grid;
  place-items: center;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: 50%;
  background: var(--colour-accent-alpha-12);
  color: var(--colour-accent);
  font-family: var(--font-sans);
  font-size: var(--text-step);
  font-weight: 700;
}

.signup-form__hint {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--colour-muted);
  font-size: var(--text-sm);
}

.signup-form__footer {
  display: grid;
  gap: var(--space-4);
}

.signup-form__note {
  margin: 0;
  color: var(--colour-muted);
  font-size: var(--text-sm);
}

.tier-picker {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .tier-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tier-card {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.tier-card__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.tier-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-md);
  background: var(--colour-surface-elevated-alpha-65);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-med) var(--ease-out),
    box-shadow var(--duration-med) var(--ease-out),
    transform var(--duration-med) var(--ease-out),
    background var(--duration-med) var(--ease-out);
}

.tier-card:hover .tier-card__body {
  border-color: var(--colour-accent-alpha-35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tier-card__input:focus-visible + .tier-card__body {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

.tier-card__input:checked + .tier-card__body {
  border-color: var(--colour-accent-alpha-55);
  background:
    linear-gradient(165deg, var(--colour-surface-elevated-alpha-98) 0%, var(--colour-surface-warm-alpha-98) 100%);
  box-shadow: var(--shadow-md);
}

.tier-card__input:checked + .tier-card__body .tier-card__check {
  opacity: 1;
  transform: translateY(0);
}

.tier-card__price {
  font-family: var(--font-display);
  font-size: var(--text-tier-price);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--colour-ink);
}

.tier-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--colour-ink);
}

.tier-card__desc {
  color: var(--colour-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  flex: 1;
}

.tier-card__check {
  align-self: flex-start;
  margin-top: var(--space-3);
  padding: var(--check-pad-y) var(--check-pad-x);
  border-radius: var(--radius-pill);
  background: var(--colour-success-alpha-12);
  color: var(--colour-success);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(var(--space-1));
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.field-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* .field / .field__input / validation → design-system.css */

/*
 * path-opener composition (canonical) — public path / utility pages
 * Markup: section.surface-hero | section.candidates-hero
 *           > .*-__copy
 *               eyebrow · h1 · .lead
 *               [optional .feature-list | meta] [optional .actions]
 * Layout: single centred column, start-aligned type; measure --measure-opener
 * ( --measure-opener-lg from 900px). Not marketing-hero (no stage / split).
 * Not section-header. Instances: Employers, Candidates, Error.
 */
.surface-hero,
.candidates-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  justify-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
}

.surface-hero__copy,
.candidates-hero__copy {
  width: 100%;
  max-width: var(--measure-opener);
}

/* Match the copy column (not the site-wide 34rem lead measure). */
.surface-hero__copy .lead,
.candidates-hero__copy .lead {
  max-width: none;
}

.candidates-hero__points {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.surface-hero__copy .actions,
.candidates-hero__copy .actions {
  margin-top: var(--space-5);
}

/* Optional meta under lead (e.g. Error request ID) */
.surface-hero__meta {
  margin: 0 0 var(--space-5);
  color: var(--colour-muted);
  font-size: var(--text-sm);
}

.surface-hero__meta code {
  font-size: 0.9em;
}

/*
 * channel-band composition (canonical) — public callout (Candidates)
 * Markup: section.section.channel-band
 *           > .channel-band__inner
 *               eyebrow · h2 · body-p
 * Layout: centred framed panel; --measure-opener / --measure-opener-lg (≥900px).
 * Same column measure as path-opener, not the same composition (callout chrome;
 * mid-page; no h1 / lead / actions). Not section-header (no .section__header /
 * band sibling body). Not path-opener.
 */
.channel-band {
  display: flex;
  justify-content: center;
}

.channel-band__inner {
  width: 100%;
  max-width: var(--measure-opener);
  margin-inline: auto;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--colour-accent-alpha-22);
  background:
    linear-gradient(135deg, var(--colour-accent-alpha-08) 0%, var(--colour-surface-elevated-alpha-95) 55%, var(--colour-surface-elevated) 100%);
  box-shadow: var(--shadow-sm);
}

.channel-band__inner h2 {
  margin-bottom: var(--space-3);
}

.channel-band__inner p:last-child {
  margin-bottom: 0;
  color: var(--colour-muted);
}

.journey-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.journey-rail__step {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--colour-line);
  background: var(--colour-surface-elevated);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-med) var(--ease-out),
    transform var(--duration-med) var(--ease-out);
}

.journey-rail__step:hover {
  border-color: var(--colour-accent-alpha-30);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.journey-rail__icon {
  width: var(--journey-icon-size);
  height: var(--journey-icon-size);
  border-radius: var(--radius-journey-icon);
  display: grid;
  place-items: center;
  color: var(--colour-ink);
  background:
    linear-gradient(160deg, var(--colour-surface-elevated) 0%, var(--colour-surface-warm-alpha-95) 45%, var(--colour-accent-alpha-14) 100%);
  border: 1px solid var(--colour-accent-alpha-36);
  box-shadow: var(--shadow-icon-md);
}

.journey-rail__svg {
  width: var(--journey-svg-size);
  height: var(--journey-svg-size);
  display: block;
  color: var(--colour-accent);
}

.journey-rail__label {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--colour-accent);
}

.journey-rail__index {
  font-family: var(--font-display);
  font-size: var(--text-journey-index);
  font-weight: 600;
  letter-spacing: calc(var(--tracking-label) * 2);
  color: var(--colour-ink-soft);
}

.journey-rail__step h3 {
  margin: 0;
}

.journey-rail__step p:last-child {
  margin: 0;
  color: var(--colour-muted);
}

@media (prefers-reduced-motion: reduce) {
  .journey-rail__step:hover {
    transform: none;
  }
}

/* invite-shell: design-system.css · account patterns: portal-surface.css */

.account-pillars .card p {
  margin-bottom: 0;
}




/*
 * Global: AccountLayout also hosts #blazor-error-ui but does not use MainLayout.razor.css.
 * Without display:none here, account pages always show the error banner.
 */
#blazor-error-ui {
  color-scheme: light only;
  background: var(--colour-surface-elevated, #fff);
  color: var(--colour-ink, #1a1a1a);
  border-top: 1px solid var(--colour-line-strong, #ccc);
  bottom: 0;
  box-shadow: var(--shadow-md, 0 -4px 16px rgba(0, 0, 0, 0.08));
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: var(--space-3, 0.75rem);
  top: var(--space-2, 0.5rem);
}

#blazor-error-ui a {
  color: var(--colour-accent, #0b3d91);
}


/* Candidate account chrome — no marketing nav/footer paths */
.site-header--account .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header--account .brand {
  cursor: default;
}

.account-chrome-signout {
  margin: 0;
}

.site-footer--account .site-footer__inner {
  justify-content: center;
}


@media (min-width: 720px) {
  .journey-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  /* Block-centred column; start-aligned type (not poster text-centre). */
  .surface-hero,
  .candidates-hero {
    padding-block: var(--space-5) var(--space-6);
  }

  .surface-hero__copy,
  .candidates-hero__copy,
  .channel-band__inner,
  .signup-form,
  .signup-success {
    max-width: var(--measure-opener-lg);
  }

  .surface-hero__copy h1,
  .candidates-hero__copy h1 {
    animation: cinematic-in var(--duration-cinematic-med) var(--ease-out) both;
    animation-delay: 0.16s;
  }

  .surface-hero__copy .eyebrow,
  .candidates-hero__copy .eyebrow {
    animation: cinematic-in var(--duration-cinematic-fast) var(--ease-out) both;
    animation-delay: 0.08s;
  }

  .surface-hero__copy .lead,
  .candidates-hero__copy .lead {
    animation: cinematic-in var(--duration-cinematic-fast) var(--ease-out) both;
    animation-delay: 0.24s;
  }

  .surface-hero__copy .actions,
  .candidates-hero__copy .actions {
    animation: cinematic-in var(--duration-cinematic-fast) var(--ease-out) both;
    animation-delay: 0.32s;
  }
}

@media (max-width: 899px) {
  .surface-hero .actions,
  .candidates-hero .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .surface-hero .actions .btn,
  .candidates-hero .actions .btn {
    width: 100%;
  }

  /* invite-shell .actions stack: design-system.css (shared portal + BO preview) */
}

@media (prefers-reduced-motion: reduce) {
  .surface-hero__copy h1,
  .surface-hero__copy .eyebrow,
  .surface-hero__copy .lead,
  .surface-hero__copy .actions,
  .candidates-hero__copy h1,
  .candidates-hero__copy .eyebrow,
  .candidates-hero__copy .lead,
  .candidates-hero__copy .actions {
    animation: none !important;
  }
}

/*
 * signup-success composition (canonical) — public Employers post-submit
 * Markup: section.signup-success
 *           eyebrow · h1 · .lead
 *           > .signup-success__card (h2 · feature-list · .signup-summary · close)
 * Layout: same centred column as path-opener / signup-form — --measure-opener /
 * --measure-opener-lg (≥900px). Replaces the form after submit (not path-opener;
 * not signup-form). Confirmation stack uses .lead (like openers), not .section__support.
 */
.signup-success {
  width: 100%;
  max-width: var(--measure-opener);
  margin-inline: auto;
  animation: fade-up var(--duration-slow) var(--ease-out) both;
}

/* Match the success column (not the site-wide 34rem lead measure). */
.signup-success .lead {
  max-width: none;
}

/* Keep "Essentials (£12,000)" as one unit so the price is not orphaned. */
.signup-success .lead strong[data-selected-tier] {
  white-space: nowrap;
}

.signup-success__card {
  margin-top: var(--space-6);
}

.signup-success__close {
  margin: var(--space-5) 0 0;
  color: var(--colour-ink);
  font-size: var(--text-base);
  font-weight: 600;
}

.signup-summary {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--colour-ink-alpha-03);
  border: 1px solid var(--colour-line);
}

.signup-summary div {
  display: grid;
  grid-template-columns: var(--summary-label-col) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}

.signup-summary dt {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: calc(var(--tracking-label) * 2);
  text-transform: uppercase;
  color: var(--colour-muted);
}

.signup-summary dd {
  margin: 0;
  color: var(--colour-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* —— Form / Blazor defaults —— */
h1:focus {
  outline: none;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--colour-success);
}

.invalid {
  outline: 1px solid var(--colour-danger);
}

.validation-message {
  color: var(--colour-danger);
}

.blazor-error-boundary {
  background: var(--colour-danger);
  padding: var(--space-4);
  color: var(--colour-white);
  border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}