/* Nav + hero. Tokens only. */

/* Nav */
.site-nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  height: var(--nav-height); display: flex; align-items: center;
  background: var(--surface-100); border-bottom: var(--hairline) solid var(--line-100);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.site-nav__logo { display: block; height: var(--space-6); width: auto; }
.site-nav__links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
/* Hover draws a Cobalt rail under the link, the same rail the card fills */
.site-nav__links a, .site-footer__links a { position: relative; color: var(--ink-600); text-decoration: none; transition: color var(--duration-hover) var(--ease-out); }
.cta-volt { box-shadow: inset 0 0 0 1px var(--volt-edge); }
/* Volt sign-up buttons glow on hover and keyboard focus */
.cta-volt:hover, .cta-volt:focus-visible { box-shadow: inset 0 0 0 1px var(--volt-edge), var(--glow-volt); }
.site-nav__links a::after, .site-footer__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--space-1)); height: var(--rail-width); background: var(--brand-500); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-panel) var(--ease-out); }
.site-nav__links a:hover, .site-footer__links a:hover { color: var(--ink-900); }
.site-nav__links a:hover::after, .site-footer__links a:hover::after, .site-nav__links a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 767px) { .site-nav__links { display: none; } }

/* Hero layout: headline across the top, copy + form left, card right and pulled up */
.hero { position: relative; padding-block: var(--space-10) var(--space-9); background-image: var(--grain); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.hero__title { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-7); }
.hero__title h1 { text-wrap: balance; }
/* Long headline: display-xl on desktop, stepping down so it stays at three or four lines on phones */
.hero__h1 { max-width: 16ch; }
@media (min-width: 1200px) { .hero__h1 { max-width: none; } }
.hero__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-6); }
.hero__sub { color: var(--ink-600); max-width: var(--hero-copy-max); }
.hero__stage { grid-column: 7 / span 6; position: relative; margin-top: calc(-1 * var(--space-9)); padding: var(--space-7) 0 0 var(--space-7); }
.hero__stage::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--space-9)) calc(-1 * var(--space-7)) 0;
  background-image: var(--dot-grid); background-size: var(--dot-gap) var(--dot-gap);
  mask-image: linear-gradient(to right, transparent, var(--ink-900) 30%);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--ink-900) 30%);
}
.hero__br { display: inline; }

@media (max-width: 1023px) {
  .hero__copy, .hero__stage { grid-column: 1 / -1; }
  .hero__stage { margin-top: var(--space-8); padding: var(--space-5) 0 0; }
  .hero__stage::before { inset: 0 calc(-1 * var(--space-5)); }
}
@media (max-width: 767px) {
  .hero { padding-block: var(--space-8); }
  .hero__title { margin-bottom: var(--space-5); }
  .hero__br { display: none; }
  .hero__h1 .hero__br { display: inline; }
  .hero__title .hero__h1 { max-width: none; text-wrap: pretty; font-size: 38px; line-height: 1.08; letter-spacing: -0.03em; }
  .hero__stage::before { inset: 0 calc(-1 * var(--space-4)); }
}

/* Sign-up */
.signup { display: flex; flex-direction: column; gap: var(--space-3); }
.signup__row { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; }
.signup__row .hf-input { flex: 1 1 220px; min-width: 0; }
.signup__row .hf-btn { flex: 0 0 auto; }
.signup__help { color: var(--ink-500); }
.signup__help--error { color: var(--danger-600); }
.signup__help--ok { color: var(--success-600); }
.signup__more { align-self: flex-start; }
@media (max-width: 479px) { .signup__row .hf-btn { flex: 1 1 100%; } }

/* Hero entrance: copy settles in a quick stagger */
.hero-in { animation: hf-reveal var(--duration-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* ------------------------------------------------------------------
   Account Point of View card: four stages on a rail
   ------------------------------------------------------------------ */
.apv { position: relative; background: var(--surface-000); border: var(--hairline) solid var(--line-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); padding: var(--space-6); }
.apv__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--hairline) solid var(--line-100); }
.apv__meta { color: var(--ink-500); margin-top: var(--space-1); }
.apv__for { color: var(--ink-500); text-align: right; }

.apv__stages { list-style: none; margin: 0; padding: var(--space-5) 0 0; display: flex; flex-direction: column; }
.stage { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr); column-gap: var(--space-4); --t: calc(var(--stage-start) + var(--s) * var(--stage-gap)); }

/* Rail: a dot per stage and a line that fills to the next one */
.stage__rail { position: relative; display: flex; justify-content: center; }
.stage__rail::before {
  content: ""; position: absolute; top: var(--space-5); bottom: 0; left: 50%;
  width: var(--rail-width); margin-left: calc(var(--rail-width) / -2); background: var(--line-100);
}
.stage__rail::after {
  content: ""; position: absolute; top: var(--space-5); bottom: 0; left: 50%;
  width: var(--rail-width); margin-left: calc(var(--rail-width) / -2); background: var(--brand-500);
  transform-origin: top; animation: rail-fill var(--stage-gap) linear both; animation-delay: var(--t);
}
.stage:last-child .stage__rail::before, .stage:last-child .stage__rail::after { display: none; }
.stage__dot {
  position: relative; z-index: 1; margin-top: var(--space-1);
  width: var(--space-3); height: var(--space-3); border-radius: 50%;
  background: var(--surface-000); border: var(--rail-width) solid var(--line-200);
  animation: dot-on var(--duration-panel) var(--ease-out) both; animation-delay: var(--t);
}
@keyframes rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dot-on { to { background: var(--brand-500); border-color: var(--brand-500); } }

.stage__body { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); min-width: 0; }
.stage:last-child .stage__body { padding-bottom: 0; }
.stage__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.stage__label .eyebrow { color: var(--brand-500); text-transform: uppercase; }
.stage__title { font: 600 16px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.stage__note { color: var(--ink-500); }

/* Everything in a stage arrives after its dot lights */
.st { animation: hf-reveal var(--duration-reveal) var(--ease-out) both; animation-delay: calc(var(--t) + var(--i, 0) * var(--stagger)); }

/* Stage 1: source chips */
.stage__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stage__chips .hf-chip { padding-inline: var(--space-1) var(--space-3); }

/* Stage 2: fact rows with their proof */
.facts { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fact { display: grid; grid-template-columns: var(--fact-id-size) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-100); border-radius: var(--radius-sm); }
/* Hovering a fact pins it: its id turns Cobalt */
.fact { transition: background var(--duration-hover) var(--ease-out); }
.fact:hover, .fact.is-lit { background: var(--brand-100); }
.fact:hover .fact__id, .fact.is-lit .fact__id { background: var(--brand-500); color: var(--on-brand); }
.fact:hover .hf-chip__tag, .fact.is-lit .hf-chip__tag { background: var(--surface-000); }

/* Refs point at their sources: hovering or focusing one lights the facts (or the insight) it cites */
.ref[data-ref] { cursor: default; }
.ref.ref[data-ref]:hover, .ref.ref[data-ref]:focus-visible, .ref.ref.is-lit { background: var(--brand-500); color: var(--on-brand); }
.link { border-radius: var(--radius-xs); transition: background var(--duration-hover) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out); }
.link.is-lit { background: var(--brand-100); box-shadow: 0 0 0 var(--space-1) var(--brand-100); }
.fact__id, .ref { transition: background var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out); display: inline-grid; place-items: center; min-width: var(--fact-id-size); height: var(--fact-id-size); padding-inline: var(--space-1); border-radius: var(--radius-xs); background: var(--ink-900); color: var(--surface-000); font: 500 11px/1 var(--font-mono); }
.fact__text { font: 500 14px/1.35 var(--font-sans); color: var(--ink-900); }
.fact__proof { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.fact__tier { font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--success-600); display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.fact__tier svg { width: 12px; height: 12px; stroke-width: 2; }
/* Stack a fact's proof under it wherever the card is narrow: phones, and beside the copy on small laptops */
@media (max-width: 479px), (min-width: 1024px) and (max-width: 1279px) {
  .fact { grid-template-columns: var(--fact-id-size) minmax(0, 1fr); }
  .fact__proof { grid-column: 2; justify-content: flex-start; }
}

/* Stage 3: connected insights reference the facts they join */
.links { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.link__refs { display: inline-flex; align-items: center; gap: var(--space-1); }
.link__refs .ref { background: var(--brand-100); color: var(--brand-500); }
.link__join { width: var(--space-2); height: var(--hairline); background: var(--brand-500); }
.link__text { font: 400 14px/1.45 var(--font-sans); color: var(--ink-900); padding-top: var(--space-1); }


/* Stage 4: the story panel */
.story { border: var(--rail-width) solid var(--brand-500); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface-000); }
.story__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.story__for { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-500); }
.story__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.story__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: start; }
.story__row dt { font: 600 16px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.story__row dd { grid-column: 1; font: 400 14px/1.45 var(--font-sans); color: var(--ink-600); }
.story__refs { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; gap: var(--space-1); }
.story__refs .ref { background: var(--brand-100); color: var(--brand-500); }

/* Replay (the sequence never loops on its own) */
.apv__replay { position: absolute; right: var(--space-5); bottom: calc(-1 * var(--space-7)); color: var(--ink-600); }
.apv__replay svg { width: 16px; height: 16px; stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .apv__replay { display: none; }
}
.stage__rail.is-replay::after { animation: none; }
.signup .hf-field--error .hf-input, .signup__row:has(.hf-input[aria-invalid="true"]) .hf-input { border-color: var(--danger-600); }

.apv .ref.ref--c { background: var(--brand-500); color: var(--on-brand); }

/* Keep the copy and form beside the card while it builds */
@media (min-width: 1024px) {
  .hero__copy { position: sticky; top: calc(var(--nav-height) + var(--space-7)); }
}
@media (max-width: 767px) {
  .apv { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .stage { column-gap: var(--space-3); }
  .link { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .link__text { padding-top: 0; }
  .story { padding: var(--space-4); }
  .story__row { grid-template-columns: minmax(0, 1fr); }
  .story__refs { grid-column: 1; grid-row: auto; }
}