/* ==========================================================================
   How it works (how-it-works.html) — page styles. All classes prefixed .how-
   ========================================================================== */

/* ---------- Hero: four steps + example screen ---------- */
.how-hero { padding-bottom: clamp(64px, 7.5vw, 108px); }
.how-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36% 44% at 80% 58%, rgba(242, 161, 91, 0.1), transparent 70%),
    radial-gradient(26% 30% at 92% 12%, rgba(125, 180, 255, 0.045), transparent 70%);
}
.how-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(520px, 0.96fr);
  gap: clamp(40px, 5.5vw, 80px); align-items: start;
}
/* Shared --fs-h1, capped so "One operating layer." (9.5em) holds one line in the intro column: about 63px at
   1440, the shared size from 1000 to 1199px (the intro is display: contents there, so no container applies)
   and on phones from 390px, a little smaller at 360-375px. */
.how-hero__intro { container-type: inline-size; }
.how-hero .how-hero__title { font-size: min(var(--fs-h1), calc(100cqi / 9.6)); line-height: 1.04; letter-spacing: -0.035em; max-width: none; }
.how-hero__title span { display: block; }
.how-hero__intro .lede { max-width: 30em; }

/* Step tabs (vertical, numbered: this is a sequence) */
.how-steps { display: grid; gap: 4px; margin-top: clamp(36px, 4vw, 52px); margin-left: -19px; }
.how-step {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start;
  width: 100%; margin: 0; padding: 18px 20px 18px 18px; text-align: left; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 14px;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.how-step:hover { background: rgba(255, 255, 255, 0.022); }
.how-step[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border-color: var(--line);
}
.how-step:focus-visible { outline-offset: 2px; border-radius: 14px; }
.how-step__num {
  position: relative; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg);
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; color: var(--text-2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  transition: border-color 0.3s, color 0.3s, box-shadow 0.4s var(--ease);
}
.how-step[aria-selected="true"] .how-step__num {
  border-color: var(--ember); color: var(--text);
  box-shadow: 0 0 0 4px rgba(242, 161, 91, 0.1), 0 0 28px -6px rgba(242, 161, 91, 0.7);
}
.how-step:has(~ [aria-selected="true"]) .how-step__num { border-color: rgba(242, 161, 91, 0.42); color: var(--ember-hot); }
.how-step__body { display: block; min-width: 0; }
.how-step__title {
  display: block; margin-top: 11px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
  line-height: 1.3; letter-spacing: -0.012em; color: var(--text-2); transition: color 0.3s;
}
.how-step:hover .how-step__title, .how-step[aria-selected="true"] .how-step__title { color: var(--text); }
.how-step__desc { display: block; margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); max-width: 34em; }

/* Connector thread between number boxes; lights ember up to the selected step */
.how-step:not(:last-child)::before,
.how-step:not(:last-child)::after {
  content: ""; position: absolute; left: 42px; top: 72px; bottom: -18px; width: 1px; pointer-events: none;
}
.how-step:not(:last-child)::after { background: var(--line-strong); }
.how-step:not(:last-child)::before {
  z-index: 1; background: linear-gradient(180deg, var(--ember-hot), var(--ember) 60%, var(--ember-deep));
  box-shadow: 0 0 10px rgba(242, 161, 91, 0.55);
  transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease);
}
.how-step:not(:last-child):has(~ [aria-selected="true"])::before { transform: scaleY(1); }

/* Screen column */
.how-hero__screen { position: relative; container-type: inline-size; isolation: isolate; }
.how-hero__screen::before {
  content: ""; position: absolute; inset: 14% -6% -4% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 161, 91, 0.2), rgba(199, 102, 44, 0.06) 60%, transparent);
  filter: blur(34px);
}
.how-screen:focus-visible { outline-offset: 8px; border-radius: 16px; }
/* Two-column layouts (1000px and up): all four screens share one grid cell and the hidden ones keep their space
   (invisible, unfocusable), so the column is as tall as the tallest screen and switching steps
   never moves the rest of the page. Stacked layouts show only the selected screen. */
@media (min-width: 1000px) {
  .js .how-hero__screen { display: grid; }
  .js .how-hero__screen > .how-screen { grid-area: 1 / 1; }
  .js .how-hero__screen > .how-screen[hidden] { display: block; visibility: hidden; }
  /* replay the chart's grow-in when its screen is shown */
  .js .how-hero__screen > .how-screen[hidden] .bars span { animation: none; }
}
/* Decorative "Export" / "Add system" pills in the example screens are not controls: no hover state. */
.how-screen .panel-head .btn { pointer-events: none; }
/* Keep the collections chart in the page palette (the shared default is sky blue). */
.how-screen .bars span { background: linear-gradient(180deg, var(--ember-hot), var(--ember-deep)); }
.how-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; min-height: 28px; }
.how-cap__title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  color: var(--text-2);
}
.how-cap__title::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(242, 161, 91, 0.18); }
.how-cap__v { color: var(--text); }
.how-cap__sep { color: var(--text-3); }
.how-cap__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.how-cap__proto { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; }
.how-marks { display: inline-flex; align-items: center; gap: 6px; }
.how-marks .pmark { width: 18px; height: 18px; }

.how-stack { display: grid; gap: 16px; }
.how-pair { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 500px) { .how-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.how-pair .panel { padding: 22px 22px 20px; }
.how-pair .panel > .flex.between { flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.how-pair .kv { font-size: 0.8125rem; padding-block: 10px; gap: 12px; }
.how-pair .kv dd { white-space: nowrap; }
.how-pair .stat-value { font-size: clamp(2.2rem, 1.7rem + 1.4vw, 2.9rem); }
.how-mini-h { font-size: 1rem; }

/* 02 · Work queue */
.how-queue__list { list-style: none; margin: 0; padding: 0; }
.how-q {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.how-q:last-child { border-bottom: 0; }
.how-q .pmark { width: 30px; height: 30px; }
.how-q__main { min-width: 0; }
.how-q__title { color: var(--text); font-size: 0.9rem; font-weight: 500; line-height: 1.35; }
.how-q__meta { margin-top: 3px; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.45; color: var(--text-2); }
.how-q__meta span { color: color-mix(in srgb, var(--p) 55%, var(--text)); }
.how-q--flag { background: linear-gradient(90deg, rgba(242, 161, 91, 0.1), rgba(242, 161, 91, 0.02) 55%, transparent); }
.how-q--flag::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--ember); box-shadow: 0 0 12px var(--ember-glow); }
.how-q--flag .how-q__meta { color: var(--ember-hot); }
.how-q__flag, .how-q__status { justify-self: end; }
@container (max-width: 440px) {
  .how-q { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; align-items: start; }
  .how-q .pmark { margin-top: 2px; }
  .how-q__flag, .how-q__status { grid-column: 2; justify-self: start; }
}

/* 02 · One item, end to end */
.how-trail__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.how-trail__head h3 { font-size: 1rem; }
.how-trail__steps { --n: 5; list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.how-trail__steps::before, .how-trail__steps::after {
  content: ""; position: absolute; top: 6px; height: 1px; left: calc(50% / var(--n));
}
.how-trail__steps::before { right: calc(50% / var(--n)); background: var(--line-strong); }
.how-trail__steps::after { width: calc(100% * 3 / var(--n)); background: linear-gradient(90deg, var(--ember-deep), var(--ember) 70%, var(--ember-hot)); box-shadow: 0 0 8px rgba(242, 161, 91, 0.5); }
.how-trail__steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-inline: 4px; }
.how-trail__dot { width: 13px; height: 13px; border-radius: 50%; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line-strong); }
.is-done .how-trail__dot { background: var(--ember); border-color: var(--ember-hot); box-shadow: 0 0 0 3px rgba(242, 161, 91, 0.16); }
.is-wait .how-trail__dot { border-color: var(--text-2); border-style: dashed; }
.how-trail__label { font-size: 0.8125rem; line-height: 1.3; color: var(--text); }
.how-trail__time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
.is-wait .how-trail__time { color: var(--warn); }
.how-trail__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
@container (max-width: 520px) {
  .how-trail__steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .how-trail__steps::before, .how-trail__steps::after { top: 8px; left: 6px; width: 1px; right: auto; }
  .how-trail__steps::before { bottom: 8px; height: auto; }
  .how-trail__steps::after { height: 75%; bottom: auto; background: linear-gradient(180deg, var(--ember-deep), var(--ember) 70%, var(--ember-hot)); }
  .how-trail__steps li { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 0; }
  .how-trail__dot { margin: 0; flex: none; }
  .how-trail__label { flex: 1; }
}

/* 04 · Audit trail */
.how-audit__list { list-style: none; margin: 0; padding: 0; }
.how-a {
  display: grid; grid-template-columns: 64px 32px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.how-a:last-child { border-bottom: 0; }
.how-a__time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.how-a__avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text);
}
.how-a__avatar--sys { background: radial-gradient(circle at 50% 70%, rgba(242, 161, 91, 0.22), var(--surface) 70%); border-color: rgba(242, 161, 91, 0.35); }
.how-a__avatar--sys img { width: auto; height: 20px; }
.how-a__main { min-width: 0; }
.how-a__what { font-size: 0.875rem; line-height: 1.4; color: var(--text); }
.how-a__meta { margin-top: 3px; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.45; color: var(--text-2); }
.how-a__meta b { font-weight: 500; color: var(--text); }
.how-a__where { white-space: nowrap; }
/* "actor · where": each part carries its own " · " in a slot that sits in clipped space at the start of
   a line, so when "where" wraps the dot is hidden instead of stranded at the end of the first line. */
.how-a__meta { overflow: hidden; }
.how-a__mi { display: flex; flex-wrap: wrap; margin-left: -3ch; }
.how-a__mi > b::before, .how-a__where::before { content: "·"; display: inline-block; width: 3ch; text-align: center; font-weight: 400; color: var(--text-2); }
.how-a__tag {
  justify-self: end; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.how-a__tag--approve { color: var(--ember); border-color: rgba(242, 161, 91, 0.4); background: rgba(242, 161, 91, 0.07); }
.how-pair .kv dd.how-kv-off { color: var(--text-2); font-weight: 400; }
@container (max-width: 480px) {
  .how-a { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "av time tag" "av main main"; column-gap: 12px; row-gap: 4px; align-items: center; padding-block: 14px; }
  .how-a__avatar { grid-area: av; align-self: start; }
  .how-a__time { grid-area: time; }
  .how-a__main { grid-area: main; }
  .how-a__tag { grid-area: tag; justify-self: end; }
  .how-a__where { flex-basis: 100%; white-space: normal; }
}

/* ---------- Integrations: systems → layer → platforms ---------- */
.how-int__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
.how-int__head h2 { max-width: 14em; }
.how-int__head .lede { max-width: 26em; padding-bottom: 6px; }

.how-map { --cols: 8; --drop: 56px; margin-top: clamp(56px, 7vw, 88px); }
.how-map__label {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.how-map__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.how-map__label--bottom { margin: 18px 0 0; }

.how-sys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; }
.how-sys__item {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 15px; min-height: 124px;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--surface);
}
.how-sys__icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); }
.how-sys__icon svg { width: 16px; height: 16px; }
.how-sys__name { font-size: 0.9rem; font-weight: 500; line-height: 1.3; color: var(--text); }
.how-sys__kind { margin-top: auto; padding-top: 4px; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.4; color: var(--text-2); }

/* Vertical drops into the layer and out to each platform: static hairlines. One spark runs down
   each line twice when the diagram is revealed (under 5s in total), then everything is still. */
.how-sys__item::after,
.how-plat li::before {
  content: ""; position: absolute; left: 50%; width: 1px; height: var(--drop); pointer-events: none;
  background: linear-gradient(180deg, var(--line-strong), rgba(242, 161, 91, 0.3));
}
.how-sys__item::after { top: 100%; margin-top: 1px; }
.how-plat li::before { bottom: 100%; margin-bottom: 1px; background: linear-gradient(180deg, rgba(242, 161, 91, 0.3), var(--line-strong)); }
.how-sys__item::before,
.how-plat li::after {
  --spark: 16px;
  content: ""; position: absolute; left: 50%; width: 1px; height: var(--spark); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 211, 161, 0), var(--ember-hot));
  box-shadow: 0 0 6px rgba(242, 161, 91, 0.8);
}
.how-sys__item::before { top: calc(100% + 1px); }
.how-plat li::after { top: calc(-1 * var(--drop) - 1px); }
.how-map.is-in .how-sys__item::before { animation: how-spark 1.5s var(--ease) calc(0.3s + var(--i, 0) * 0.07s) 2 both; }
.how-map.is-in .how-plat li::after { animation: how-spark 1.5s var(--ease) calc(0.95s + var(--i, 0) * 0.07s) 2 both; }
@keyframes how-spark {
  0% { opacity: 0; transform: translateY(0); }
  20%, 70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--drop) - var(--spark))); }
}

.how-layer {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  margin-block: var(--drop); padding: 18px 26px;
  border: 1px solid rgba(242, 161, 91, 0.32); border-radius: 16px;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(242, 161, 91, 0.16), transparent 70%),
    linear-gradient(180deg, #1a1817, #0c0e12);
  box-shadow: 0 30px 80px -36px rgba(242, 161, 91, 0.55), inset 0 1px 0 rgba(255, 211, 161, 0.14);
}
.how-layer::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 161, 0.9), transparent);
}
.how-layer__mark { width: auto; height: 52px; filter: drop-shadow(0 0 18px rgba(242, 161, 91, 0.45)); }
.how-layer__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); }
.how-layer__sub { margin-top: 6px; font-size: 0.9375rem; color: var(--text-2); }
.how-layer__meta { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); text-align: right; }
.how-layer__meta span { display: block; white-space: nowrap; }

.how-plat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; }
.how-plat li { position: relative; }
.how-plat__link {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px 16px; border-radius: 12px;
  border: 1px solid transparent; text-align: center; font-size: 0.875rem; color: var(--text-2);
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.how-plat__link .pmark { transition: transform 0.35s var(--ease), filter 0.35s; }
.how-plat__link:hover { color: var(--text); border-color: color-mix(in srgb, var(--p) 40%, transparent); background: color-mix(in srgb, var(--p) 6%, transparent); }
.how-plat__link:hover .pmark { transform: translateY(-2px); filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--p) 55%, transparent)); }

@media (max-width: 1240px) {
  .how-map { --cols: 4; --drop: 0px; }
  .how-sys__item::after, .how-plat li::before, .how-sys__item::before, .how-plat li::after { display: none; }
  .how-sys__item { min-height: 0; }
  .how-layer { margin-block: 48px; }
  .how-layer::after {
    content: ""; position: absolute; left: 50%; top: -49px; height: calc(100% + 98px); width: 1px; z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(242, 161, 91, 0.55) 22%, rgba(242, 161, 91, 0.55) 78%, transparent);
  }
}
@media (max-width: 860px) {
  .how-int__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .how-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .how-sys__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-content: start; padding: 12px 12px 12px 10px; }
  .how-sys__icon { grid-row: span 2; width: 28px; height: 28px; margin: 0; }
  .how-sys__icon svg { width: 14px; height: 14px; }
  .how-sys__name { font-size: 0.84rem; }
  .how-sys__kind { margin-top: 0; padding-top: 0; font-size: 0.75rem; }
  .how-layer { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px 18px; }
  .how-layer__mark { height: 44px; }
  .how-layer__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; text-align: left; padding-top: 12px; border-top: 1px solid rgba(242, 161, 91, 0.2); letter-spacing: 0.06em; }
  .how-layer__meta span + span::before { content: "· "; }
  .how-layer__title { letter-spacing: 0.16em; }
  .how-plat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .how-plat__link { padding: 12px 2px; gap: 8px; font-size: 0.75rem; }
  .how-plat__link .pmark { width: 34px; height: 34px; }
}

/* ---------- Implementation timeline ---------- */
.how-impl__head { max-width: 760px; }
.how-tl {
  --node: 15px; --node-y: 44px;
  position: relative; list-style: none; margin: clamp(52px, 6vw, 80px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px);
}
/* track + ember thread, drawn behind the nodes */
.how-tl::before, .how-tl::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--node-y) + var(--node) / 2); height: 1px; pointer-events: none;
}
.how-tl::before { background: linear-gradient(90deg, var(--line-strong) 0 88%, transparent); }
.how-tl::after {
  background: linear-gradient(90deg, var(--ember-deep), var(--ember) 45%, var(--ember-hot) 78%, rgba(255, 211, 161, 0) 100%);
  box-shadow: 0 0 12px rgba(242, 161, 91, 0.55);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) 0.2s;
}
.how-tl.is-in::after, .no-js .how-tl::after { transform: scaleX(1); }
.how-tl__phase { position: relative; min-width: 0; }
/* Subgrid keeps titles, copy and deliverable lists aligned across the four phases */
@supports (grid-template-rows: subgrid) {
  .how-tl { row-gap: 0; }
  .how-tl__phase { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .how-tl__list { align-self: start; }
}
.how-tl__when { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); height: 20px; line-height: 20px; margin: 0; }
.how-tl__node {
  position: absolute; top: var(--node-y); left: 0; width: var(--node); height: var(--node); border-radius: 50%; z-index: 1;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  transition: background-color 0.5s, border-color 0.5s, box-shadow 0.6s var(--ease);
  transition-delay: calc(0.35s + var(--i) * 0.38s);
}
.how-tl.is-in .how-tl__node, .no-js .how-tl__node {
  background: var(--ember); border-color: var(--ember-hot);
  box-shadow: 0 0 0 5px rgba(242, 161, 91, 0.12), 0 0 22px rgba(242, 161, 91, 0.65);
}
.how-tl__phase:last-child .how-tl__node { background: var(--bg-2); }
.how-tl.is-in .how-tl__phase:last-child .how-tl__node, .no-js .how-tl__phase:last-child .how-tl__node { background: var(--bg-2); border-color: var(--ember); box-shadow: 0 0 0 5px rgba(242, 161, 91, 0.08), 0 0 16px rgba(242, 161, 91, 0.4); }
.how-tl__title { margin-top: calc(var(--node-y) - 20px + var(--node) + 30px); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 400; letter-spacing: -0.02em; }
.how-tl__text { margin-top: 12px; font-size: 0.975rem; line-height: 1.6; color: var(--text-2); }
.how-tl__list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.how-tl__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9rem; line-height: 1.45; color: var(--text); }
.how-tl__list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--text-2); }
@media (max-width: 960px) {
  .how-tl { grid-template-columns: minmax(0, 1fr); gap: 44px; row-gap: 44px; padding-left: 40px; }
  .how-tl__phase { display: block; grid-row: auto; }
  .how-tl::before, .how-tl::after { left: 7px; right: auto; top: 6px; bottom: 0; width: 1px; height: auto; }
  .how-tl::before { background: linear-gradient(180deg, var(--line-strong) 0 90%, transparent); }
  .how-tl::after { background: linear-gradient(180deg, var(--ember-deep), var(--ember) 45%, var(--ember-hot) 80%, rgba(255, 211, 161, 0)); transform: scaleY(0); transform-origin: top; }
  .how-tl.is-in::after, .no-js .how-tl::after { transform: scaleY(1); }
  .how-tl__node { top: 2px; left: -40px; }
  .how-tl__title { margin-top: 10px; }
  .how-tl__text { max-width: 34em; }
}

/* ---------- Trust ---------- */
.how-trust__head { max-width: 780px; }
.how-trust__head .lede { margin-top: 20px; }
.how-trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(44px, 5vw, 64px); }
.how-trust__panel {
  position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), var(--surface);
}
.how-trust__top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.how-trust__top h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 400; letter-spacing: -0.015em; }
.how-trust__status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.how-trust__scope { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.how-trust__intro { margin-top: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.how-trust__list { list-style: none; margin: 0; padding: 0; }
.how-trust__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.how-trust__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.how-trust__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.how-trust__ic svg { width: 17px; height: 17px; }
.how-trust__list p { padding-top: 6px; font-size: 0.95rem; line-height: 1.5; color: var(--text-2); }
.how-trust__list strong { font-weight: 500; }

.how-badges { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.015); }
.how-badges li { display: flex; align-items: center; gap: 12px; padding: 18px 20px; font-size: 0.875rem; line-height: 1.35; color: var(--text); }
.how-badges li + li { border-left: 1px solid var(--line); }
.how-badges svg { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.how-badges em { display: block; margin-top: 3px; font-style: normal; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
@media (max-width: 1180px) {
  .how-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-badges li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .how-badges li:nth-child(4) { border-left: 0; }
}
/* Side by side, the two panels share row tracks so their intros and first list rows line up even when
   "Open API · Early access" wraps under its heading (861-1180px). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .how-trust__grid { grid-template-rows: repeat(3, auto); row-gap: 0; }
    .how-trust__panel { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
    .how-trust__top { align-self: start; }
  }
}
@media (max-width: 860px) { .how-trust__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .how-trust__top { gap: 8px 14px; }
  .how-trust__top .icon-ring { width: 40px; height: 40px; }
  .how-trust__top .icon-ring svg { width: 18px; height: 18px; }
  .how-trust__top h3 { flex: 1 1 0; min-width: 0; }
  .how-trust__status { flex-basis: 100%; margin-left: 0; padding-left: 54px; }
  .how-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-badges li { padding: 14px; gap: 10px; font-size: 0.8125rem; }
  .how-badges li:nth-child(n) { border-left: 0; border-top: 0; }
  .how-badges li:nth-child(even) { border-left: 1px solid var(--line); }
  .how-badges li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- FAQ ---------- */
.how-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 7vw, 112px); align-items: start; }
.how-faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
.how-faq__more { margin: 22px 0 26px; max-width: 22em; color: var(--text-2); }
.how-faq__list summary { padding-block: 26px; }
.how-faq__list summary:focus-visible { outline-offset: 4px; }
.how-faq__list .answer p { max-width: 40em; }
@media (max-width: 860px) {
  .how-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .how-faq__head { position: static; }
  .how-faq__list summary { font-size: 1.05rem; padding-block: 22px; }
}

/* ---------- Hero responsive ---------- */
/* 1000-1199px: the heading and lede span the width; the steps and the screen sit side by side, so the
   screen a step selects is in view next to it (stacked, it fell below the fold at 1024x768). */
@media (min-width: 1000px) and (max-width: 1199px) {
  .how-hero__grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); column-gap: clamp(32px, 4vw, 56px); row-gap: 0; }
  .how-hero__intro { display: contents; }
  .how-hero__intro > * { grid-column: 1 / -1; }
  .how-hero__intro > .how-steps { grid-column: 1; grid-row: 4; }
  .how-hero__screen { grid-column: 2; grid-row: 4; margin-top: clamp(36px, 4vw, 52px); }
}
@media (max-width: 999px) {
  .how-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .how-hero__screen { max-width: 720px; }
  .how-steps { max-width: 720px; }
  /* Stacked layout: only the selected step shows its description, so its screen stays close. */
  .js .how-step:not([aria-selected="true"]) .how-step__desc { display: none; }
}
@media (max-width: 860px) {
  .how-steps { margin-left: -9px; margin-right: -9px; }
  .how-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 14px 14px 14px 8px; }
  .how-step__num { width: 44px; height: 44px; font-size: 0.875rem; }
  .how-step__title { margin-top: 10px; font-size: 1.08rem; }
  .how-step:not(:last-child)::before, .how-step:not(:last-child)::after { left: 30px; top: 64px; bottom: -14px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .how-map .how-sys__item::before, .how-map .how-plat li::after { animation: none; opacity: 0; }
  .how-step:not(:last-child)::before, .how-tl::after, .how-tl .how-tl__node { transition: none; }
  .how-hero .how-screen { animation: none; }
}