/* ==========================================================================
   LLM Integrations — page visuals
   gateway (hero), system bar (intro), capability terminal, routing board,
   failover chain, quality/latency/cost triangle
   ========================================================================== */

/* ==========================================================================
   Hero gateway: application → gateway → providers
   ========================================================================== */
.d-glow--llm {
  inset: -4% 6% 40%;
  background:
    radial-gradient(40% 58% at 50% 32%, rgb(107 63 212 / 0.5), transparent 70%),
    radial-gradient(30% 45% at 16% 72%, rgb(58 126 246 / 0.38), transparent 70%),
    radial-gradient(30% 45% at 84% 72%, rgb(214 51 132 / 0.3), transparent 70%);
}
.gw {
  --px: 0; --py: 0;
  position: relative;
  max-width: 64rem; margin-inline: auto;
  border: 1px solid rgb(255 255 255 / 0.12); border-radius: clamp(1rem, 1.6vw, 1.75rem);
  background: #07070a; color: var(--white);
  overflow: hidden;
}
.gw__bar { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.gw__run { flex: 1; }
.gw__live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--green); font-variant-numeric: tabular-nums; }
.gw__live i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.gw__body {
  display: grid; justify-items: center;
  padding: clamp(1.75rem, 3.5vw, 3.25rem) clamp(1rem, 3vw, 3rem);
  background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.gw__tier { display: grid; justify-items: center; gap: 0.7rem; translate: calc(var(--px) * 10px) calc(var(--py) * 5px); }
.gw__tier--gate { translate: calc(var(--px) * 16px) calc(var(--py) * 8px); }
.gw__k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.gw__app { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.2rem 0.8rem 0.8rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 0.9rem; background: rgb(255 255 255 / 0.04); text-align: left; }
.gw__glyph { flex: none; display: grid; align-content: center; gap: 3px; width: 2.3rem; aspect-ratio: 1; padding: 0.5rem; border-radius: 0.55rem; background: var(--blue); }
.gw__glyph i { height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.9); }
.gw__glyph i:nth-child(2) { width: 70%; }
.gw__glyph i:nth-child(3) { width: 45%; }
.gw__app b { display: block; font-size: 1rem; font-weight: 600; }
.gw__app code { font: 500 clamp(0.68rem, 0.62rem + 0.2vw, 0.8rem)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(255 255 255 / 0.55); }

.gw__wire { position: relative; width: 6px; height: clamp(1.75rem, 3.5vw, 2.75rem); overflow: hidden; }
.gw__wire::after { content: ""; position: absolute; left: 2.5px; top: 0; bottom: 0; width: 1px; background: rgb(255 255 255 / 0.25); }
.gw__wire i { position: absolute; inset: 0; background: linear-gradient(transparent 36%, var(--blue-bright) 36% 64%, transparent 64%); border-radius: 3px; transform: translateY(-70%); }

.gw__gate { display: flex; flex-wrap: wrap; justify-content: center; padding: 0.35rem; border: 1px solid rgb(91 150 255 / 0.45); border-radius: 99em; background: linear-gradient(90deg, rgb(107 63 212 / 0.25), rgb(58 126 246 / 0.2)); }
.gw__gate span { padding: 0.5rem clamp(0.6rem, 1.4vw, 1rem); border-radius: 99em; font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.88rem); font-weight: 500; color: rgb(255 255 255 / 0.75); }
.gw__gate .is-hot { background: var(--white); color: var(--black); font-weight: 600; }

.gw__fan { display: block; width: 100%; height: auto; overflow: visible; }
.gw__path { fill: none; stroke: rgb(255 255 255 / 0.2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gw__pulse { fill: none; stroke: var(--blue-bright); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.14 1.2; stroke-dashoffset: 0.14; opacity: 0; }

/* no column gap: exact thirds keep card centres on the fan's end points (1/6, 1/2, 5/6) */
.gw__providers { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); translate: calc(var(--px) * 6px) calc(var(--py) * 3px); }
.gw__prov { position: relative; display: grid; justify-items: center; gap: 0.35rem; margin-inline: clamp(0.2rem, 0.75vw, 0.65rem); padding: 1rem 0.6rem 1.1rem; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 0.9rem; background: rgb(255 255 255 / 0.03); text-align: center; }
.gw__prov::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--blue-bright); border-radius: inherit; box-shadow: 0 0 0 4px rgb(58 126 246 / 0.12); opacity: 0; pointer-events: none; }
.gw__mono { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 0.25); border-radius: 50%; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.gw__prov b { font-size: clamp(0.85rem, 0.75rem + 0.35vw, 1.1rem); font-weight: 600; }
.gw__meta { font: 500 0.74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(255 255 255 / 0.5); }
.gw__share { width: 70%; height: 3px; margin-top: 0.3rem; border-radius: 2px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.gw__share i { display: block; height: 100%; background: var(--blue-bright); transform: scaleX(var(--w)); transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  .js .gw__prov { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  .is-loaded .gw__prov { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-soft), transform 1s var(--ease-out); transition-delay: calc(1.1s + var(--k) * 140ms); }

  .gw__wire i { animation: gw-drop 1.8s var(--ease-in-out) infinite; }
  .gw__pulse { animation: gw-pulse 3.6s var(--ease-in-out) infinite; animation-delay: calc(var(--k) * 1.2s + 0.6s); }
  .gw__prov::after { animation: gw-hit 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * 1.2s + 0.6s); }
  .gw__live i { animation: gw-blink 1.6s ease-in-out infinite; }
  .d-hero.is-paused .gw *, .d-hero.is-paused .gw *::before, .d-hero.is-paused .gw *::after { animation-play-state: paused; }

  @keyframes gw-drop { from { transform: translateY(-70%); } to { transform: translateY(70%); } }
  @keyframes gw-pulse { 0% { stroke-dashoffset: 0.14; opacity: 1; } 42% { stroke-dashoffset: -1; opacity: 1; } 43%, 100% { stroke-dashoffset: -1; opacity: 0; } }
  @keyframes gw-hit { 0%, 30% { opacity: 0; } 40%, 58% { opacity: 1; } 72%, 100% { opacity: 0; } }
  @keyframes gw-blink { 50% { opacity: 0.25; } }
}

/* ==========================================================================
   Intro — the model is one slice of the system
   ========================================================================== */
.sysbar { display: flex; gap: 0.4rem; margin-top: clamp(3rem, 6vw, 6rem); text-align: left; }
.sysbar__seg {
  flex: var(--g) 1 0; min-width: 0;
  display: flex; align-items: flex-end;
  min-height: clamp(5rem, 8vw, 7.5rem);
  padding: 0.8rem 0.9rem;
  border: 1px solid rgb(0 0 0 / 0.18); border-radius: 0.75rem;
  background: var(--white);
  font-size: clamp(0.78rem, 0.68rem + 0.3vw, 1rem); font-weight: 600; letter-spacing: -0.01em;
}
.sysbar__seg--model { border-color: var(--blue); background: var(--blue); color: var(--white); }
.sysbar__note { margin-top: 1.25rem; font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.1rem); color: #5e5e5e; }
@media (prefers-reduced-motion: no-preference) {
  .js .sysbar__seg { opacity: 0; transform: scaleY(0.25); transform-origin: 50% 100%; }
  .sysbar.is-in .sysbar__seg { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-soft), transform 0.9s var(--ease-out); transition-delay: calc(var(--i) * 80ms + 0.2s); }
}

/* ==========================================================================
   Capabilities — rows + code terminal
   ========================================================================== */
.caprows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 2.5rem clamp(2rem, 5vw, 6rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.caprows__list { border-top: 1px solid var(--black); }
.caprow {
  position: relative;
  width: 100%;
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.25rem 1rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.3rem);
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}
.caprow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out); }
.caprow__num { grid-row: 1 / span 2; padding-top: 0.5em; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; color: #8a8a8a; transition: color 0.3s; }
.caprow__title { font-size: clamp(1.3rem, 0.8rem + 1.3vw, 2.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.04em; transition: transform 0.6s var(--ease-out), color 0.3s; }
.caprow__desc { max-width: 30em; font-size: 0.95rem; line-height: 1.45; color: #5e5e5e; }
.caprow:hover .caprow__title { transform: translateX(0.3rem); }
.caprow[aria-selected="true"]::after { transform: none; }
.caprow[aria-selected="true"] .caprow__num,
.caprow[aria-selected="true"] .caprow__title { color: var(--blue); }
.caprow[aria-selected="true"] .caprow__title { transform: translateX(0.6rem); }
.caprow:focus-visible { outline-offset: -2px; }

.term { position: sticky; top: calc(var(--header-h) + 1rem); border: 1px solid rgb(0 0 0 / 0.1); border-radius: clamp(1rem, 1.5vw, 1.5rem); background: #0b0b0f; color: #e6e6ea; overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 500 var(--fs-micro)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: rgb(255 255 255 / 0.45); }
.term__panels { padding: clamp(1.25rem, 2.5vw, 2rem); }
.term__file { margin-bottom: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 500 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(255 255 255 / 0.45); }
.term pre { margin: 0; overflow-x: auto; font: 400 clamp(0.76rem, 0.68rem + 0.26vw, 0.95rem)/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; tab-size: 2; }
.term code { font: inherit; }
.term .k { color: #b79cff; }
.term .s { color: #8fd694; }
.term .n { color: #7fb2ff; }
.term .c { color: #6b6b78; }
.term .p { color: #e8c07a; }
.term .f { color: #6fd3f0; }

/* ==========================================================================
   Model routing board
   ========================================================================== */
.routing { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); }
.routing__tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.routing__tab {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1.15rem;
  border: 1px solid rgb(255 255 255 / 0.16); border-radius: 99em;
  font-size: clamp(0.9rem, 0.8rem + 0.25vw, 1.05rem); font-weight: 500;
  color: rgb(255 255 255 / 0.72);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.routing__tab span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.4); }
.routing__tab:hover { border-color: rgb(255 255 255 / 0.45); color: var(--white); }
.routing__tab[aria-selected="true"] { border-color: var(--white); background: var(--white); color: var(--black); }
.routing__tab[aria-selected="true"] span { color: var(--blue); }

.route {
  --wire: clamp(1.25rem, 2.6vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wire) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) var(--wire) minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgb(255 255 255 / 0.1); border-radius: clamp(1rem, 1.5vw, 1.5rem);
  background: #07070a radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1.5px) 0 0 / 22px 22px;
}
.route__node, .route__model {
  position: relative; min-width: 0;
  display: grid; gap: 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: 0.8rem;
  background: #0e0e12;
}
.route__k { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.route__node b, .route__model b { font-size: clamp(0.82rem, 0.72rem + 0.28vw, 1rem); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.route__node em, .route__model em { font: 500 0.74rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; color: rgb(255 255 255 / 0.5); }
.route__node--req b, .route__node--resp b, .route__node--eval b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; font-size: clamp(0.76rem, 0.68rem + 0.25vw, 0.92rem); }
.route__node--router { border-color: rgb(91 150 255 / 0.5); background: linear-gradient(135deg, rgb(107 63 212 / 0.28), rgb(58 126 246 / 0.18)); }
.route__node--eval b { color: var(--green); }

.route__wire { position: relative; height: 6px; overflow: hidden; }
.route__wire::after { content: ""; position: absolute; left: 0; right: 0; top: 2.5px; height: 1px; background: rgb(255 255 255 / 0.3); }
.route__wire i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, transparent 36%, var(--blue-bright) 36% 64%, transparent 64%); transform: translateX(-70%); }

.route__branch { position: relative; display: grid; gap: 0.6rem; padding-inline: var(--wire); }
.route__branch::before, .route__branch::after { content: ""; position: absolute; top: 2.3rem; bottom: 2.3rem; width: 1px; background: rgb(255 255 255 / 0.25); }
.route__branch::before { left: 0; }
.route__branch::after { right: 0; }
.route__model { min-height: 4.6rem; opacity: 0.45; transition: opacity 0.45s var(--ease-soft), border-color 0.45s, background-color 0.45s, transform 0.6s var(--ease-out); }
.route__model::before, .route__model::after { content: ""; position: absolute; top: 50%; width: var(--wire); height: 1px; background: rgb(255 255 255 / 0.22); transition: background-color 0.45s; }
.route__model::before { right: 100%; }
.route__model::after { left: 100%; }
.route__model:hover { opacity: 0.8; }

.routing:not([data-active]) .route__model[data-model="0"],
.routing[data-active="0"] .route__model[data-model="0"],
.routing[data-active="1"] .route__model[data-model="1"],
.routing[data-active="2"] .route__model[data-model="2"] { opacity: 1; transform: scale(1.04); border-color: var(--blue-bright); background: rgb(58 126 246 / 0.14); }
.routing:not([data-active]) .route__model[data-model="0"]::before, .routing:not([data-active]) .route__model[data-model="0"]::after,
.routing[data-active="0"] .route__model[data-model="0"]::before, .routing[data-active="0"] .route__model[data-model="0"]::after,
.routing[data-active="1"] .route__model[data-model="1"]::before, .routing[data-active="1"] .route__model[data-model="1"]::after,
.routing[data-active="2"] .route__model[data-model="2"]::before, .routing[data-active="2"] .route__model[data-model="2"]::after { background: var(--blue-bright); }

/* values that change with the selected request */
.route [data-when] { display: none; }
.routing:not([data-active]) [data-when="0"],
.routing[data-active="0"] [data-when="0"],
.routing[data-active="1"] [data-when="1"],
.routing[data-active="2"] [data-when="2"] { display: inline-block; }

.routing__readout { max-width: 46rem; margin-top: 1.75rem; }
.routing__readout p { font-size: clamp(1rem, 0.88rem + 0.35vw, 1.2rem); line-height: 1.5; color: rgb(255 255 255 / 0.7); }
.routing__readout b { color: var(--white); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .route [data-when] { animation: when-in 0.5s var(--ease-out); }
  .route__wire i { animation: pk-x 1.7s var(--ease-in-out) infinite; }
  .route__node--resp + .route__wire i { animation-delay: 0.85s; }
  .routing.is-paused .route__wire i { animation-play-state: paused; }
  @keyframes when-in { from { opacity: 0; transform: translateY(0.35em); } }
  @keyframes pk-x { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
}

/* ==========================================================================
   Reliability — failover chain (primary times out → fallback serves)
   ========================================================================== */
.rely { background: var(--black); color: var(--white); padding-block: clamp(5rem, 9vw, 10rem); border-top: 1px solid rgb(255 255 255 / 0.08); }
.rely__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 3rem clamp(2rem, 6vw, 7rem); }
.rely__title { margin-top: 1rem; font-size: clamp(2.4rem, 1rem + 4vw, 6rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.rely__title .mask { display: block; width: fit-content; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.rely__lead { max-width: 30em; margin-top: 1.5rem; font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.4rem); line-height: 1.45; color: rgb(255 255 255 / 0.72); }
.rely__reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: 2.25rem; }
.rely__reasons li { padding-block: 1rem; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: 0.95rem; line-height: 1.45; color: rgb(255 255 255 / 0.6); }
.rely__reasons b { display: block; margin-bottom: 0.3rem; font-size: 1.1rem; font-weight: 600; color: var(--white); }
.rely__note { max-width: 34em; margin-top: 1.75rem; font-size: 0.95rem; line-height: 1.5; color: rgb(255 255 255 / 0.55); }

.chain { --row: 6.5rem; position: relative; display: grid; grid-template-rows: 4rem repeat(3, var(--row)); gap: 1rem; padding-left: 3.25rem; }
.chain__rail { position: absolute; left: 1.1rem; top: 0; bottom: 0; width: 12px; margin-left: -6px; }
.chain__rail::before { content: ""; position: absolute; left: 5.5px; top: 2rem; bottom: calc(var(--row) / 2); width: 1px; background: linear-gradient(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.12)); }
.chain__packet, .chain__reply { position: absolute; left: 0; top: 0; width: 12px; height: 100%; }
.chain__packet::before, .chain__reply::before { content: ""; position: absolute; left: 1px; top: -5px; width: 10px; height: 10px; border-radius: 50%; }
.chain__packet::before { background: var(--blue-bright); box-shadow: 0 0 12px var(--blue); }
.chain__reply::before { background: var(--green); box-shadow: 0 0 12px rgb(116 214 90 / 0.8); }
.chain__packet, .chain__reply { opacity: 0; }

.chain__row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 1rem; row-gap: 0.25rem;
  padding: 0 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.14); border-radius: 1rem;
  background: #0b0b0f;
}
.chain__row::before { content: ""; position: absolute; right: 100%; top: 50%; width: 2.15rem; height: 1px; background: rgb(255 255 255 / 0.22); }
.chain__row::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit; opacity: 0; pointer-events: none; }
.chain__row--req { border-style: dashed; background: transparent; }
.chain__row--primary::after { border-color: #ff6b6b; box-shadow: 0 0 0 4px rgb(255 107 107 / 0.12); opacity: 1; }
.chain__row--fallback::after { border-color: var(--green); box-shadow: 0 0 0 4px rgb(116 214 90 / 0.12); opacity: 1; }
.chain__k { grid-column: 1; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
.chain__row b { grid-column: 1; font-size: clamp(1rem, 0.85rem + 0.45vw, 1.3rem); font-weight: 600; }
.chain__row--req b { font: 500 0.95rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.chain__status { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; }
.chain__s { grid-area: 1 / 1; padding: 0.4rem 0.65rem; border-radius: 99em; font: 600 0.76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; white-space: nowrap; }
.chain__s--ok, .chain__s--serve, .chain__s--done { color: var(--green); background: rgb(116 214 90 / 0.12); }
.chain__s--bad { color: #ff8080; background: rgb(255 107 107 / 0.12); }
.chain__s--idle, .chain__s--wait { color: rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.06); }
/* static (reduced-motion) state shows the failover outcome */
.chain__s--ok, .chain__s--wait, .chain__row--fallback .chain__s--idle { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .chain__packet { animation: ch-packet 10s var(--ease-in-out) infinite; }
  .chain__reply { animation: ch-reply 10s var(--ease-in-out) infinite; }
  .chain__row--primary .chain__s--ok { animation: ch-a-out 10s infinite; }
  .chain__row--primary .chain__s--bad, .chain__row--primary::after { animation: ch-a-in 10s infinite; }
  .chain__row--fallback .chain__s--idle { animation: ch-b-out 10s infinite; }
  .chain__row--fallback .chain__s--serve, .chain__row--fallback::after { animation: ch-b-in 10s infinite; }
  .chain__row--req .chain__s--wait { animation: ch-c-out 10s infinite; }
  .chain__row--req .chain__s--done { animation: ch-c-in 10s infinite; }
  .rely.is-paused .chain *, .rely.is-paused .chain *::after { animation-play-state: paused; }

  /* rail positions: request 7.5%, primary 31%, fallback 59.5% (grid rows above) */
  @keyframes ch-packet {
    0% { transform: translateY(7.5%); opacity: 0; }
    4% { opacity: 1; }
    14%, 38% { transform: translateY(31%); opacity: 1; }
    48% { transform: translateY(59.5%); opacity: 1; }
    52%, 100% { transform: translateY(59.5%); opacity: 0; }
  }
  @keyframes ch-reply {
    0%, 52% { transform: translateY(59.5%); opacity: 0; }
    55% { opacity: 1; }
    68% { transform: translateY(7.5%); opacity: 1; }
    72%, 100% { transform: translateY(7.5%); opacity: 0; }
  }
  @keyframes ch-a-out { 0%, 16% { opacity: 1; } 18%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }
  @keyframes ch-a-in { 0%, 16% { opacity: 0; } 18%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
  @keyframes ch-b-out { 0%, 46% { opacity: 1; } 48%, 74% { opacity: 0; } 76%, 100% { opacity: 1; } }
  @keyframes ch-b-in { 0%, 46% { opacity: 0; } 48%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
  @keyframes ch-c-out { 0%, 66% { opacity: 1; } 68%, 92% { opacity: 0; } 94%, 100% { opacity: 1; } }
  @keyframes ch-c-in { 0%, 66% { opacity: 0; } 68%, 92% { opacity: 1; } 94%, 100% { opacity: 0; } }
}

/* ==========================================================================
   Cost control — quality / speed / cost triangle
   ========================================================================== */
.cost { background: var(--off-white); color: var(--black); padding-block: clamp(5rem, 9vw, 10rem); }
.cost:not([data-active]), .cost[data-active="0"] { --q: 0.95; --s: 0.3; --c: 0.2; --tx: 46.9%; --ty: 31.5%; }
.cost[data-active="1"] { --q: 0.85; --s: 0.72; --c: 0.7; --tx: 50%; --ty: 60.8%; }
.cost[data-active="2"] { --q: 0.6; --s: 0.95; --c: 0.9; --tx: 40.5%; --ty: 81.5%; }
.cost[data-active="3"] { --q: 0.72; --s: 0.75; --c: 0.82; --tx: 63.4%; --ty: 76.4%; }

.cost__grid { display: grid; grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1fr) minmax(16rem, 0.9fr); align-items: center; gap: 2.5rem clamp(2rem, 4vw, 4.5rem); margin-top: clamp(3rem, 5.5vw, 6rem); }
.cost__tabs { border-top: 1px solid var(--black); }
.cost__tab {
  position: relative;
  width: 100%;
  display: flex; align-items: baseline; gap: 0.9rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border-light);
  font-size: clamp(1.05rem, 0.85rem + 0.55vw, 1.45rem); font-weight: 600; letter-spacing: -0.03em;
  text-align: left;
  transition: color 0.3s;
}
.cost__tab span { font-size: var(--fs-small); letter-spacing: 0.08em; color: #8a8a8a; }
.cost__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--ease-out); }
.cost__tab[aria-selected="true"], .cost__tab[aria-selected="true"] span { color: var(--blue); }
.cost__tab[aria-selected="true"]::after { transform: none; }

/* clip: the point is a full-size overlay moved by % of its own size, which would otherwise widen the page */
.tri { position: relative; width: min(100%, 26rem); margin-inline: auto; overflow: clip; }
.tri svg { display: block; width: 100%; height: auto; overflow: visible; }
.tri__edge { fill: rgb(255 255 255 / 0.65); stroke: var(--black); stroke-width: 1.5; stroke-linejoin: round; }
.tri__guide { fill: none; stroke: rgb(0 0 0 / 0.16); stroke-dasharray: 3 5; }
.tri__label { font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; fill: #5e5e5e; }
.tri__point { position: absolute; inset: 0; translate: var(--tx) var(--ty); transition: translate 0.9s var(--ease-out); pointer-events: none; }
.tri__point::before, .tri__point::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; }
.tri__point::before { z-index: 1; background: var(--blue); box-shadow: 0 0 0 6px rgb(58 126 246 / 0.2); }
.tri__point::after { border: 1.5px solid var(--blue); }

.cost__readout { display: grid; gap: 0.2rem; }
.meter { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding-block: 0.6rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5e5e5e; }
.meter i { height: 6px; border-radius: 99em; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.meter__bar { display: block; height: 100%; background: var(--black); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out); }
.meter__bar--q { transform: scaleX(var(--q)); background: linear-gradient(90deg, var(--purple), var(--blue)); }
.meter__bar--s { transform: scaleX(var(--s)); }
.meter__bar--c { transform: scaleX(var(--c)); }
.cost__panels { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); }
.cost__nums { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: var(--fs-small); color: #5e5e5e; }
.cost__nums b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: var(--black); }
.cost__panels p:not(.cost__nums) { margin-top: 0.9rem; line-height: 1.5; color: #4d4d4d; }

@media (prefers-reduced-motion: no-preference) {
  .tri__point::after { animation: tri-ping 2.4s ease-out infinite; }
  .cost.is-paused .tri__point::after { animation-play-state: paused; }
  @keyframes tri-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) {
  .caprows, .rely__inner { grid-template-columns: 1fr; }
  .term { top: calc(var(--header-h) - 0.25rem); z-index: 2; order: -1; }
  .term pre { font-size: 0.74rem; line-height: 1.6; }
  .term__panels { padding: 1rem 1.1rem; }

  .route { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .route__wire { justify-self: center; width: 6px; height: 1.75rem; }
  .route__wire::after { left: 2.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .route__wire i { background: linear-gradient(transparent 36%, var(--blue-bright) 36% 64%, transparent 64%); animation-name: pk-y; }
  .route__branch { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 0; padding-block: 1.75rem; }
  .route__branch::before, .route__branch::after { left: 16.66%; right: 16.66%; width: auto; height: 1px; }
  .route__branch::before { top: 0; bottom: auto; }
  .route__branch::after { top: auto; bottom: 0; }
  .route__model { min-height: 0; }
  .route__model::before, .route__model::after { left: 50%; right: auto; width: 1px; height: 1.75rem; }
  .route__model::before { top: auto; bottom: 100%; }
  .route__model::after { top: 100%; }
  @keyframes pk-y { from { transform: translateY(-70%); } to { transform: translateY(70%); } }

  .cost__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost__tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

@media (max-width: 48em) {
  .gw__prov { padding: 0.8rem 0.3rem; }
  .gw__mono { width: 2rem; }
  .gw__meta, .gw__app code { display: none; }

  .sysbar { flex-direction: column; }
  .sysbar__seg { flex: none; min-height: 3.1rem; align-items: center; }

  .route__model em { display: none; }
  .route__model { padding: 0.7rem 0.6rem; }

  .rely__reasons { grid-template-columns: 1fr; }
  .chain { --row: 5.75rem; padding-left: 2.5rem; }
  .chain__rail { left: 0.8rem; }
  .chain__row { padding: 0 0.9rem; }
  .chain__row::before { width: 1.7rem; }

  .cost__grid, .cost__tabs { grid-template-columns: 1fr; }
  .tri { width: min(100%, 20rem); }
}