/* How it works, why it's different, dark band, final sign-up, footer. Tokens only. */

.section { padding-block: var(--section-space); }
.section__eyebrow { color: var(--brand-500); text-transform: uppercase; }

/* ------------------------------------------------------------------
   How it works: sticky index on the left, one step per scroll stop
   ------------------------------------------------------------------ */
.how__grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.how__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-height) + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-5); }
.how__aside h2 { text-wrap: balance; }
.how__steps { grid-column: 6 / span 7; display: flex; flex-direction: column; }

/* The index mirrors the hero card's rail */
.how__index { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.how__index li { position: relative; display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.how__index li + li::before { content: ""; position: absolute; left: calc(var(--space-3) / 2 - var(--rail-width) / 2); bottom: calc(50% + var(--space-3) / 2); height: calc(100% - var(--space-3)); width: var(--rail-width); background: var(--line-100); transition: background var(--duration-panel) var(--ease-out); }
.how__index a { display: flex; align-items: center; gap: var(--space-4); color: var(--ink-500); text-decoration: none; transition: color var(--duration-panel) var(--ease-out); }
.how__index a:hover { color: var(--ink-900); }
.how__dot { flex: none; width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--surface-100); border: var(--rail-width) solid var(--line-200); transition: background var(--duration-panel) var(--ease-out), border-color var(--duration-panel) var(--ease-out); }
.how__index .eyebrow { text-transform: uppercase; }
.how__index li.is-done a, .how__index li.is-current a { color: var(--ink-900); }
.how__index li.is-done .how__dot, .how__index li.is-current .how__dot { background: var(--brand-500); border-color: var(--brand-500); }
.how__index li.is-done + li::before, .how__index li.is-current + li::before { background: var(--line-100); }
.how__index li.is-done + li.is-done::before, .how__index li.is-done + li.is-current::before { background: var(--brand-500); }

.step { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-8); border-top: var(--hairline) solid var(--line-100); scroll-margin-top: calc(var(--nav-height) + var(--space-5)); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__label { display: flex; align-items: baseline; gap: var(--space-3); }
.step__label .eyebrow { color: var(--brand-500); text-transform: uppercase; }
.step__label .step__n { color: var(--ink-500); }
.step h3 { text-wrap: balance; }
.step__body { color: var(--ink-600); max-width: var(--container-text); }

.step__visual { background: var(--surface-000); border: var(--hairline) solid var(--line-100); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.step__visual .ref.ref--c { background: var(--brand-500); color: var(--on-brand); }
.step__visual .story { border-width: var(--rail-width); }

/* Scroll reveal: starts visible but quiet, settles in when the step reaches the middle of the screen */
.js .step[data-reveal] { opacity: .35; transform: translateY(var(--space-3)); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.js .step[data-reveal].is-in { opacity: 1; transform: none; }

/* Each step then builds its visual the way the hero card does: pieces arrive in order after the step settles */
.js .step[data-reveal] .bld { opacity: 0; }
.js .step[data-reveal].is-in .bld { animation: hf-reveal var(--duration-reveal) var(--ease-out) both; animation-delay: calc(var(--duration-panel) + var(--i, 0) * var(--stagger)); }

@media (max-width: 1023px) {
  .how__aside, .how__steps { grid-column: 1 / -1; }
  .how__aside { position: static; margin-bottom: var(--space-7); }
  .how__index { display: none; }
}
@media (max-width: 767px) {
  .step { padding-block: var(--space-7); }
  .step__visual { padding: var(--space-4); }
}

/* ------------------------------------------------------------------
   Why it's different
   ------------------------------------------------------------------ */
.why { background: var(--surface-000); border-top: var(--hairline) solid var(--line-100); }
.why__head { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-3); margin-bottom: var(--space-7); align-items: end; }
.why__head .section__eyebrow { grid-column: 1 / -1; }
.why__head h2 { grid-column: 1 / span 7; }
/* Three claims set as columns on a rule, not boxed cards: each one opens with the tag it earns */
.why__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gutter); border-top: var(--rail-width) solid var(--ink-900); }
.why__item { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0 0; }
.why__item + .why__item { border-left: var(--hairline) solid var(--line-100); padding-left: var(--space-5); }
.why__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust { border-top: var(--hairline) solid var(--line-100); }
.why__tag { align-self: flex-start; margin-bottom: var(--space-2); }
.why__body { color: var(--ink-600); max-width: 36ch; }
@media (max-width: 1023px) {
  .why__list { grid-template-columns: minmax(0, 1fr); }
  .why__item { padding: var(--space-5) 0; }
  .why__item + .why__item { border-left: 0; border-top: var(--hairline) solid var(--line-100); padding-left: 0; }
  .why__head h2 { grid-column: 1 / -1; }
}

/* Evidence ladder: strongest to weakest */
.tiers { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }
.tiers__head { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--ink-500); }
.tiers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.tier { display: flex; flex-direction: column; gap: var(--space-3); }
.tier__bar { height: var(--space-2); border-radius: var(--radius-pill); background: var(--brand-500); opacity: var(--o); }
.tier__name { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900); }
@media (max-width: 767px) {
  .tiers__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .tier { display: grid; grid-template-columns: var(--space-9) minmax(0, 1fr); align-items: center; gap: var(--space-4); }
  .tier__bar { width: calc(100% * var(--o)); }
}

/* ------------------------------------------------------------------
   Dark band: the rule, set as a cited sentence
   ------------------------------------------------------------------ */
.rule { position: relative; overflow: clip; padding-block: var(--space-10); background: var(--surface-000); border-block: var(--hairline) solid var(--line-100); color: var(--ink-900); }
.rule::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--dot-grid); background-size: var(--dot-gap) var(--dot-gap);
  mask-image: radial-gradient(ellipse at 80% 50%, var(--ink-900), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, var(--ink-900), transparent 70%);
}
.rule .container { position: relative; display: flex; flex-direction: column; gap: var(--space-6); }
.rule .eyebrow { color: var(--ink-500); text-transform: uppercase; }
.rule__line { text-wrap: balance; max-width: 14ch; }
.rule__cite { display: inline-flex; vertical-align: super; margin-left: var(--space-2); transform: translateY(calc(-1 * var(--space-3))); }
.rule__cite .hf-chip { height: var(--space-7); padding: 0 var(--space-5) 0 var(--space-2); gap: var(--space-3); font: 500 18px/1 var(--font-sans); letter-spacing: 0; }
.rule__cite .hf-chip__tag { height: var(--space-6); padding: 0 var(--space-3); font-size: 14px; letter-spacing: 0.06em; }
.rule__sub { color: var(--ink-600); max-width: var(--container-text); }
@media (max-width: 767px) {
  .rule { padding-block: var(--space-9); }
  .rule__cite { display: flex; vertical-align: baseline; margin: var(--space-4) 0 0; transform: none; }
}

/* ------------------------------------------------------------------
   Final sign-up
   ------------------------------------------------------------------ */
.join { text-align: center; }
.join .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.join h2 { text-wrap: balance; }
.join__body { color: var(--ink-600); }
.join .signup { width: 100%; max-width: 520px; align-items: stretch; text-align: left; margin-top: var(--space-3); }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer { padding-block: var(--space-7); border-top: var(--hairline) solid var(--line-100); background: var(--surface-100); }
.site-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.site-footer__logo { height: var(--space-6); width: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { color: var(--ink-500); text-decoration: none; }
.site-footer__links a:hover { color: var(--ink-900); }
.site-footer__legal { color: var(--ink-500); }

/* Scroll reveals for the two other key moments: the claims settle in order, and the band's citation pins itself to the sentence */
.js .why__item[data-reveal] { opacity: 0; transform: translateY(var(--space-3)); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   Rule band showpiece, plays once: a pile of sources and guesses fills the band,
   every sourced fragment flies into the one citation, every guess is struck out and drops,
   then the sentence lights up and its citation pins with a single Volt ring.
   JS builds the pile; without JS or with reduced motion the band shows its finished state.
   ------------------------------------------------------------------ */
.rule__swarm { position: absolute; inset: 0; pointer-events: none; }
.frag { position: absolute; left: var(--x); top: var(--y); opacity: 0; }
.frag--guess { display: inline-flex; align-items: center; height: var(--chip-height); padding: 0 var(--space-3); border: var(--hairline) dashed var(--line-200); border-radius: var(--radius-pill); color: var(--ink-500); font: 400 13px/1 var(--font-sans); white-space: nowrap; }
.frag--guess::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); top: 50%; height: var(--rail-width); background: var(--ember-500); transform: scaleX(0); transform-origin: left; }

.rule.is-in .frag--src { animation: frag-gather calc(var(--swarm-hold) + var(--swarm-fly)) var(--ease-out) both; animation-delay: calc(var(--i) * var(--swarm-step)); }
.rule.is-in .frag--guess { animation: frag-drop calc(var(--swarm-hold) + var(--swarm-fly)) var(--ease-out) both; animation-delay: calc(var(--i) * var(--swarm-step)); }
.rule.is-in .frag--guess::after { animation: frag-strike var(--duration-panel) var(--ease-out) both; animation-delay: calc(var(--i) * var(--swarm-step) + var(--swarm-hold) * .6); }
@keyframes frag-gather {
  0% { opacity: 0; transform: translateY(var(--space-3)) scale(.9); }
  20%, 55% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.35); }
}
@keyframes frag-drop {
  0% { opacity: 0; transform: translateY(var(--space-3)); }
  20%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(var(--space-8)) rotate(var(--r)); }
}
@keyframes frag-strike { to { transform: scaleX(1); } }

/* The sentence waits quietly under the pile, then lights up; the citation pins last */
.js .rule[data-reveal] .rule__line { opacity: .2; transition: opacity var(--duration-reveal) var(--ease-out); transition-delay: var(--swarm-land); }
.js .rule[data-reveal] .rule__sub { opacity: 0; transition: opacity var(--duration-reveal) var(--ease-out); transition-delay: calc(var(--swarm-land) + var(--duration-reveal)); }
.js .rule[data-reveal] .rule__cite .hf-chip { opacity: 0; transform: scale(1.4); transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-reveal) var(--ease-out); transition-delay: calc(var(--swarm-land) - var(--duration-panel)); }
.js .rule[data-reveal].is-in .rule__line, .js .rule[data-reveal].is-in .rule__sub { opacity: 1; }
.js .rule[data-reveal].is-in .rule__cite .hf-chip { opacity: 1; transform: none; animation: cite-ring var(--duration-reveal) var(--ease-out) both; animation-delay: var(--swarm-land); }
@keyframes cite-ring {
  from { box-shadow: 0 0 0 0 var(--brand-500); }
  to { box-shadow: 0 0 0 var(--space-5) transparent; }
}
@media (prefers-reduced-motion: reduce) { .rule__swarm { display: none; } }
@media (max-width: 767px) { .rule__swarm .frag:nth-child(n+13) { display: none; } }