/* ============================================================================
   PROCESS + FAQ — a race track with five nodes, then the questions.
   The line is the section: it fills once, left to right, and the nodes arm
   behind it. Nothing here loops.
   ========================================================================= */

.process__track {
  --glyph: 58px;      /* node size — also the mobile rail offset */
  --n-h: 46px;        /* number row: fixed, so the line's y is deterministic */
  --gap: clamp(20px, 2.4vw, 34px);
  --line-y: calc(var(--n-h) + var(--glyph) / 2);
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
}

/* the groove and the fill share one geometry: from node 01's centre to node 05's */
.process__track::before,
.process__track::after {
  content: "";
  position: absolute;
  left: calc(var(--glyph) / 2);
  right: calc((100% - 4 * var(--gap)) / 5 - var(--glyph) / 2);
  pointer-events: none;
}
.process__track::before {
  top: var(--line-y);
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--line));
}
.process__track::after {
  top: calc(var(--line-y) - 1px);
  height: 2px;
  background: var(--holo);
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--cy) 35%, transparent));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.5s var(--ease-out) 180ms;
}
.process__track.is-in::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------------- step */
.pstep {
  position: relative;
  z-index: 1; /* nodes sit ON the track, the line runs behind them */
  display: grid;
  grid-template-rows: var(--n-h) var(--glyph) auto;
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i) * 90ms + 120ms);
}
.process__track.is-in .pstep {
  opacity: 1;
  translate: none;
}

.pstep__n {
  align-self: end;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 2.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* bevelled node — same hairline sandwich as .panel, at 58px */
.pstep__glyph {
  --cut: 10px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: start;
  width: var(--glyph);
  height: var(--glyph);
  padding: 1px;
  clip-path: var(--clip-bevel);
  background: var(--line-strong);
  /* the arm delay rides on background only — hover glow must stay instant */
  transition: background var(--t) var(--ease-out) calc(var(--i) * 230ms + 260ms),
    filter var(--t) var(--ease-out);
}
.pstep__glyph::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--clip-bevel);
  background: linear-gradient(160deg, var(--ink-750), var(--ink-900));
}
.pstep__glyph svg {
  width: 24px;
  height: 24px;
  color: var(--text-faint);
  transition: color var(--t) var(--ease-out);
  transition-delay: calc(var(--i) * 230ms + 260ms);
}

/* armed — the node lights as the fill sweeps past it */
.process__track.is-in .pstep__glyph {
  background: linear-gradient(
    150deg,
    color-mix(in oklab, var(--cy) 50%, transparent),
    color-mix(in oklab, var(--vi) 28%, transparent)
  );
}
.process__track.is-in .pstep__glyph svg {
  color: var(--cy);
}

/* hover is the only glow at rest */
.pstep:hover .pstep__glyph,
.pstep:focus-within .pstep__glyph {
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--cy) 55%, transparent));
}

.pstep__body {
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}
.pstep__title {
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.pstep__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-dim);
}
.pstep__dur {
  margin-top: var(--sp-1);
}

/* ================================================================ FAQ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.faq__aside {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-5));
  align-self: start;
  display: grid;
  gap: var(--sp-5);
}
.faq__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.faq__title {
  font-size: var(--fs-h3);
}
.faq__media {
  --cut: 16px;
  aspect-ratio: 4 / 3;
  clip-path: var(--clip-bevel-alt);
}

.faq__list {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.faq__item {
  --cut: 10px;
}
.faq__item[open] {
  /* open is a state: the panel's own hairline carries it */
  --panel-line: linear-gradient(
    150deg,
    color-mix(in oklab, var(--cy) 55%, transparent),
    color-mix(in oklab, var(--vi) 30%, transparent)
  );
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  transition: background var(--t-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q:hover {
  background: var(--glass-hi);
}
/* the panel's clip-path would eat an outline — draw the ring inside instead */
.faq__q:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cy);
}

/* +/− : the vertical bar rotates flat, so the plus becomes a minus */
.faq__sign {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--text-faint);
  transition: color var(--t-fast) var(--ease-out);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
}
.faq__sign::before {
  width: 13px;
  height: 2px;
  translate: -50% -50%;
}
.faq__sign::after {
  width: 2px;
  height: 13px;
  translate: -50% -50%;
  transition: rotate var(--t) var(--ease-out);
}
.faq__q:hover .faq__sign,
.faq__item[open] .faq__sign {
  color: var(--cy);
}
.faq__item[open] .faq__sign::after {
  rotate: 90deg;
}

.faq__a {
  padding: 0 var(--sp-5) var(--sp-5);
}
.faq__a p {
  max-width: 68ch;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
/* <details> cannot transition its height without JS — so we move the content in */
.faq__item[open] .faq__a {
  animation: faq-open 320ms var(--ease-out) both;
}
@keyframes faq-open {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
}

/* ============================================================== responsive
   <=1100px the track stands up: line down the left, one node per row. The
   rail becomes a per-step segment so it always terminates on the next node. */
@media (max-width: 1100px) {
  .process__track {
    --gap: var(--sp-7);
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
  }
  .process__track::before,
  .process__track::after {
    display: none;
  }

  .pstep {
    grid-template-columns: var(--glyph) minmax(0, 1fr);
    grid-template-rows: var(--glyph) auto;
    column-gap: var(--sp-4);
  }
  .pstep__n {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1.7rem;
  }
  .pstep__glyph {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .pstep__body {
    grid-column: 2;
    grid-row: 2;
    padding-top: var(--sp-3);
  }

  .pstep::before,
  .pstep::after {
    content: "";
    position: absolute;
    top: var(--glyph);
    left: calc(var(--glyph) / 2 - 1px);
    width: 2px;
    /* reach past the row gap into the next node's centre */
    bottom: calc((var(--gap) + var(--glyph) / 2) * -1);
  }
  .pstep::before {
    background: linear-gradient(180deg, var(--line-strong), var(--line));
  }
  /* --holo runs at 100deg — on a 2px rail it smears to one hue. So the shift is
     rebuilt vertically, one slice of the arc per segment, and the four segments
     read as a single continuous colour-shift down the rail. */
  .pstep::after {
    background: linear-gradient(180deg, var(--rail-a), var(--rail-b));
    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--rail-a) 35%, transparent));
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--t-slow) var(--ease-out);
    transition-delay: calc(var(--i) * 180ms + 220ms);
  }
  .pstep:nth-child(1) {
    --rail-a: var(--cy);
    --rail-b: var(--vi);
  }
  .pstep:nth-child(2) {
    --rail-a: var(--vi);
    --rail-b: var(--mg);
  }
  .pstep:nth-child(3) {
    --rail-a: var(--mg);
    --rail-b: var(--go);
  }
  .pstep:nth-child(4) {
    --rail-a: var(--go);
    --rail-b: var(--li);
  }
  .process__track.is-in .pstep::after {
    transform: scaleY(1);
  }
  .pstep:last-child::before,
  .pstep:last-child::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq__aside {
    position: static;
  }
  .faq__media {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .process__track {
    --glyph: 48px;
    --gap: var(--sp-6);
  }
  .pstep__glyph svg {
    width: 20px;
    height: 20px;
  }
  .pstep__n {
    font-size: 1.5rem;
  }
  .faq__q {
    padding: var(--sp-4);
  }
  .faq__a {
    padding: 0 var(--sp-4) var(--sp-4);
  }
}

/* ============================================================== motion off */
@media (prefers-reduced-motion: reduce) {
  .process__track::after {
    transform: scaleX(1);
  }
  .pstep::after {
    transform: scaleY(1);
  }
  .pstep {
    opacity: 1;
    translate: none;
  }
  .pstep__glyph {
    background: linear-gradient(
      150deg,
      color-mix(in oklab, var(--cy) 50%, transparent),
      color-mix(in oklab, var(--vi) 28%, transparent)
    );
  }
  .pstep__glyph svg {
    color: var(--cy);
  }
}