/* Passport home page. Loaded only on "/", after site.css.
   Every animation shows a request, a rule, or a record. Loops pause while off
   screen (site.css .loop) and reduced motion shows each finished frame. The
   keyframe timelines were generated from one timing table per component, so
   edit them together rather than one percentage at a time. */

.hero__side .lede { margin: 0; }
.hero__side .cta-row { margin-top: 28px; }
.home-path { margin-top: 64px; }
.stack-head + .plans { margin-top: 56px; }
.home-links { margin-top: 36px; }
.final__cli { margin-top: 28px; font-size: 14.5px; }
.final .lede { margin-left: auto; margin-right: auto; }
.final .cta-row { margin-top: 30px; }
.cp__scale { position: relative; height: calc(380px * var(--cp-s, 1)); }
.cp__scale .cp__stage { position: absolute; top: 0; left: 50%; width: 1200px; margin-left: -600px; transform: scale(var(--cp-s, 1)); transform-origin: 50% 0; }
.pill--idle { color: var(--ink-3); background: var(--bg-3); border-color: var(--line); }
.cp-row .who .via { color: var(--ink-3); }

/* type */

.h1 { font-size: 84px; line-height: 0.98; letter-spacing: -0.055em; }
.h1 .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.h1 .line > span { display: inline-block; animation: homeRise 1s var(--ease) both; }
.h1 .line + .line > span { animation-delay: .09s; }
.h1 .dim { color: var(--ink-3); }
.h2 { font-size: 48px; line-height: 1.06; letter-spacing: -0.042em; }
.h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }

@keyframes homeRise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes homeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes homeFade { from { opacity: 0; transform: translateY(24px) scale(.99); } to { opacity: 1; transform: none; } }

/* hero */
.hero { padding: 88px 0 0; }
/* The headline takes the full width so each line stays one line. Beneath it,
   the lede and the one action sit left and the scan command sits right, so the
   checkpoint still starts above the fold. Narrow screens stack them in reading
   order: lede, command, action. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hero .h1 { font-size: clamp(48px, 6.9vw, 84px); }
.hero__side {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lede try" "cta try";
  column-gap: 64px; align-items: end; animation: homeUp .9s var(--ease) .28s both;
}
.hero__side .lede { grid-area: lede; max-width: 620px; }
.hero__side .cta-row { grid-area: cta; }
.hero__try { grid-area: try; max-width: 420px; padding-bottom: 2px; }
.hero__try .cmd { max-width: 100%; }
.hero__try-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 1099px) {
  .hero__side { display: block; max-width: 640px; }
  .hero__try { margin-top: 28px; max-width: none; }
}
/* Without a command beside it, the lede and the action simply stack. */
.hero__side--solo { display: block; }
.hero__side--solo .lede { max-width: 680px; }
.hero__side .cta-row .link { margin-left: 14px; }

.cp { margin-top: 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); box-shadow: var(--shadow); overflow: hidden; animation: homeFade 1.1s var(--ease) .42s both; }

/* checkpoint stage */
.cp__stage { position: relative; height: 380px; background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 22px 22px; background-position: 11px 11px; }
.cp__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--bg-2) 100%); }
.cp__wires { position: absolute; inset: 0; width: 1200px; height: 380px; overflow: visible; z-index: 0; }
.cp__wires path { fill: none; stroke-width: 1.25; }
.cp__wires .w { stroke: var(--line-2); }
.cp__wires .hi { stroke: var(--ink-3); opacity: 0; }
.cp__wires .hi-ok { stroke: var(--ok); opacity: 0; }
.cp-node { position: absolute; z-index: 2; width: 260px; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.cp-node .tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); flex-shrink: 0; }
.cp-node b { display: block; font-size: 14px; font-weight: 500; line-height: 1.2; }
.cp-node small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.3; margin-top: 2px; }
.cp-node .hi { position: absolute; inset: -1px; border-radius: 10px; border: 1px solid var(--ink-4); background: color-mix(in srgb, var(--ink) 4%, transparent); opacity: 0; pointer-events: none; }
.cp-node .hi-ok { position: absolute; inset: -1px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); background: var(--ok-wash); opacity: 0; pointer-events: none; }
.cp-agent { left: 32px; }
.cp-y0 { top: 19px; } .cp-y1 { top: 89px; } .cp-y2 { top: 159px; } .cp-y3 { top: 229px; }
.cp-app { left: 908px; }
.cp-gate { position: absolute; z-index: 3; left: 480px; top: 40px; width: 240px; height: 220px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); box-shadow: var(--shadow); padding: 16px 18px; }
.cp-gate::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.cp-gate__edge { position: absolute; inset: -1px; border-radius: 12px; border: 1px solid var(--bad); box-shadow: 0 0 0 4px var(--bad-wash); opacity: 0; pointer-events: none; }
.cp-gate__head { display: flex; align-items: center; gap: 10px; height: 30px; }
.cp-gate__head b { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.cp-gate__head .muted { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }
.cp-mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; color: var(--brand); }
.cp-ring { position: absolute; inset: 0; width: 30px; height: 30px; opacity: 0; animation: cpRing 15s linear 1s infinite both; }
.cp-ring circle { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 14 8; transform-origin: 15px 15px; animation: homeSpin 1.6s linear infinite; }
@keyframes homeSpin { to { transform: rotate(360deg); } }
.cp-gate__body { position: relative; height: 150px; margin-top: 14px; }
.cp-layer { position: absolute; inset: 0; opacity: 0; }
.cp-layer--idle { opacity: 1; }
.cp-check { display: flex; align-items: center; gap: 9px; height: 28px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.cp-check .ic { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-wash); color: var(--ok); }
.cp-check .ic--warn { background: var(--warn-wash); color: var(--warn); }
.cp-check .ic--bad { background: var(--bad-wash); color: var(--bad); }
.cp-check .ic--idle { background: var(--bg-3); color: var(--ink-4); }
.cp-check.is-dim { color: var(--ink-4); }
.cp-check .k { color: var(--ink-3); }
.cp-status { position: absolute; left: 0; bottom: 0; }

.pill--idle { color: var(--ink-3); background: var(--bg-3); border-color: var(--line); }
.cp-pill { position: absolute; left: 0; top: 0; z-index: 1; offset-rotate: 0deg; offset-anchor: 50% 50%; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink); font: 500 11.5px/1 "Geist Mono", ui-monospace, monospace; white-space: nowrap; opacity: 0; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); }
.cp-pill--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 12%, var(--bg-2)); }
.cp-approve { position: absolute; z-index: 3; left: 480px; top: 272px; width: 240px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line-2)); border-radius: 12px; background: var(--bg-2); box-shadow: var(--shadow); opacity: 0; }
.cp-approve__who { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.cp-approve b { display: block; margin-top: 4px; font-size: 13.5px; }
.cp-approve__btns { display: flex; gap: 6px; margin-top: 10px; }
.mini { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink); }
.mini--primary { background: var(--btn); color: var(--btn-ink); border-color: transparent; }

/* ledger */
.cp__ledger { position: relative; border-top: 1px solid var(--line); padding: 14px 24px 18px; background: var(--bg-2); }
.cp__ledger-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); height: 26px; }
.cp__ledger-head .ui { color: var(--ink-3); }
.cp-row { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1.1fr) minmax(0, 1.3fr) 88px 220px; align-items: center; gap: 16px; height: 38px; padding: 0 10px; margin: 0 -10px; font-size: 13px; color: var(--ink-2); border-radius: 6px; }
.cp-row + .cp-row { border-top: 1px solid var(--line); border-radius: 0; }
.cp-row .t { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-3); }
.cp-row .tool { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink); }
.cp-row .hl { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 5%, transparent); opacity: 0; border-radius: 6px; }
.res { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.res--ok { color: var(--ok); }
.res--warn { color: var(--warn); }
.res--bad { color: var(--bad); }
.res--rec { color: var(--ink-2); }
.res span { font-weight: 400; color: var(--ink-3); }

/* checkpoint animation wiring */
.cp-pill.r1 { offset-path: path("M292,45 C386,45 386,150 480,150"); animation: cpM1 15s linear 1s infinite both, cpF1 15s linear 1s infinite both; }
.cp-pill.r1o { offset-path: path("M720,150 C814,150 814,45 908,45"); animation: cpM1o 15s linear 1s infinite both, cpF1o 15s linear 1s infinite both; }
.cp-pill.r2 { offset-path: path("M292,115 C386,115 386,150 480,150"); animation: cpM2 15s linear 1s infinite both, cpF2 15s linear 1s infinite both; }
.cp-pill.r2o { offset-path: path("M720,150 C814,150 814,115 908,115"); animation: cpM2o 15s linear 1s infinite both, cpF2o 15s linear 1s infinite both; }
.cp-pill.r3 { offset-path: path("M292,185 C386,185 386,150 480,150"); animation: cpM3 15s linear 1s infinite both, cpF3 15s linear 1s infinite both; }
.cp__wires .wi1 { animation: cpWi1 15s linear 1s infinite both; }
.cp__wires .wo1 { animation: cpWo1 15s linear 1s infinite both; }
.cp__wires .wi2 { animation: cpWi2 15s linear 1s infinite both; }
.cp__wires .wo2 { animation: cpWo2 15s linear 1s infinite both; }
.cp__wires .wi3 { animation: cpWi3 15s linear 1s infinite both; }
.cp-a0 .hi { animation: cpA0 15s linear 1s infinite both; }
.cp-a1 .hi { animation: cpA1 15s linear 1s infinite both; }
.cp-a2 .hi { animation: cpA2 15s linear 1s infinite both; }
.cp-p0 .hi-ok { animation: cpP0 15s linear 1s infinite both; }
.cp-p1 .hi-ok { animation: cpP1 15s linear 1s infinite both; }
.cp-layer--idle { animation: cpG0 15s linear 1s infinite both; }
.cp-l1 { animation: cpG1 15s linear 1s infinite both; }
.cp-l2 { animation: cpG2 15s linear 1s infinite both; }
.cp-l3 { animation: cpG3 15s linear 1s infinite both; }
.cp-gate__edge { animation: cpEdge 15s linear 1s infinite both; }
.cp-c11 { animation: cpC11 15s linear 1s infinite both; }
.cp-c12 { animation: cpC12 15s linear 1s infinite both; }
.cp-c13 { animation: cpC13 15s linear 1s infinite both; }
.cp-s1 { animation: cpS1 15s linear 1s infinite both; }
.cp-c21 { animation: cpC21 15s linear 1s infinite both; }
.cp-c22 { animation: cpC22 15s linear 1s infinite both; }
.cp-c23 { animation: cpC23 15s linear 1s infinite both; }
.cp-s2a { animation: cpS2a 15s linear 1s infinite both; }
.cp-s2b { animation: cpS2b 15s linear 1s infinite both; }
.cp-c31 { animation: cpC31 15s linear 1s infinite both; }
.cp-c32 { animation: cpC32 15s linear 1s infinite both; }
.cp-c33 { animation: cpC33 15s linear 1s infinite both; }
.cp-s3 { animation: cpS3 15s linear 1s infinite both; }
.cp-approve { animation: cpAp 15s linear 1s infinite both; }
.cp-press { animation: cpPress 15s linear 1s infinite both; }
.cp-row--1 { animation: cpL1 15s linear 1s infinite both; }
.cp-row--2 { animation: cpL2 15s linear 1s infinite both; }
.cp-row--3 { animation: cpL3 15s linear 1s infinite both; }
.cp-row--1 .hl { animation: cpLh1 15s linear 1s infinite both; }
.cp-row--2 .hl { animation: cpLh2 15s linear 1s infinite both; }
.cp-row--3 .hl { animation: cpLh3 15s linear 1s infinite both; }
@keyframes cpM1 {
  0% { offset-distance: 0% }
  2.667% { offset-distance: 0%; animation-timing-function: cubic-bezier(.55,0,.25,1) }
  9.667% { offset-distance: 100% }
  100% { offset-distance: 100% }
}
@keyframes cpF1 {
  0% { opacity: 0; transform: scale(.9) }
  2.667% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  3.867% { opacity: 1; transform: scale(1) }
  8.867% { opacity: 1; transform: scale(1) }
  10.467% { opacity: 0; transform: scale(.7) }
  100% { opacity: 0; transform: scale(.7) }
}
@keyframes cpM1o {
  0% { offset-distance: 0% }
  16.333% { offset-distance: 0%; animation-timing-function: cubic-bezier(.55,0,.25,1) }
  22.667% { offset-distance: 100% }
  100% { offset-distance: 100% }
}
@keyframes cpF1o {
  0% { opacity: 0; transform: scale(.9) }
  16.333% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  17.533% { opacity: 1; transform: scale(1) }
  21.867% { opacity: 1; transform: scale(1) }
  23.467% { opacity: 0; transform: scale(.7) }
  100% { opacity: 0; transform: scale(.7) }
}
@keyframes cpM2 {
  0% { offset-distance: 0% }
  29.333% { offset-distance: 0%; animation-timing-function: cubic-bezier(.55,0,.25,1) }
  36.333% { offset-distance: 100% }
  100% { offset-distance: 100% }
}
@keyframes cpF2 {
  0% { opacity: 0; transform: scale(.9) }
  29.333% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  30.533% { opacity: 1; transform: scale(1) }
  35.533% { opacity: 1; transform: scale(1) }
  37.133% { opacity: 0; transform: scale(.7) }
  100% { opacity: 0; transform: scale(.7) }
}
@keyframes cpM2o {
  0% { offset-distance: 0% }
  55% { offset-distance: 0%; animation-timing-function: cubic-bezier(.55,0,.25,1) }
  61% { offset-distance: 100% }
  100% { offset-distance: 100% }
}
@keyframes cpF2o {
  0% { opacity: 0; transform: scale(.9) }
  55% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  56.2% { opacity: 1; transform: scale(1) }
  60.2% { opacity: 1; transform: scale(1) }
  61.8% { opacity: 0; transform: scale(.7) }
  100% { opacity: 0; transform: scale(.7) }
}
@keyframes cpM3 {
  0% { offset-distance: 0% }
  67.333% { offset-distance: 0%; animation-timing-function: cubic-bezier(.55,0,.25,1) }
  74.333% { offset-distance: 100% }
  100% { offset-distance: 100% }
}
@keyframes cpF3 {
  0% { opacity: 0; transform: scale(.9) }
  67.333% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  68.533% { opacity: 1; transform: scale(1) }
  73.533% { opacity: 1; transform: scale(1) }
  75.133% { opacity: 0; transform: scale(.7) }
  100% { opacity: 0; transform: scale(.7) }
}
@keyframes cpWi1 {
  0% { opacity: 0 }
  2.667% { opacity: 0 }
  3.667% { opacity: 1 }
  10% { opacity: 1 }
  12% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpWo1 {
  0% { opacity: 0 }
  16.333% { opacity: 0 }
  17.333% { opacity: 1 }
  23% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpWi2 {
  0% { opacity: 0 }
  29.333% { opacity: 0 }
  30.333% { opacity: 1 }
  36.667% { opacity: 1 }
  38.667% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpWo2 {
  0% { opacity: 0 }
  55% { opacity: 0 }
  56% { opacity: 1 }
  61.333% { opacity: 1 }
  63.333% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpWi3 {
  0% { opacity: 0 }
  67.333% { opacity: 0 }
  68.333% { opacity: 1 }
  74.667% { opacity: 1 }
  76.667% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpA0 {
  0% { opacity: 0 }
  2% { opacity: 0 }
  3% { opacity: 1 }
  10.333% { opacity: 1 }
  12.333% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpA1 {
  0% { opacity: 0 }
  28.667% { opacity: 0 }
  29.667% { opacity: 1 }
  37% { opacity: 1 }
  39% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpA2 {
  0% { opacity: 0 }
  66.667% { opacity: 0 }
  67.667% { opacity: 1 }
  75% { opacity: 1 }
  77% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpP0 {
  0% { opacity: 0 }
  22.333% { opacity: 0 }
  23.667% { opacity: 1 }
  28.667% { opacity: 1 }
  31.333% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpP1 {
  0% { opacity: 0 }
  60.667% { opacity: 0 }
  62% { opacity: 1 }
  66.667% { opacity: 1 }
  69.333% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpG0 {
  0% { opacity: 1 }
  9.667% { opacity: 1 }
  10.667% { opacity: 0 }
  26.667% { opacity: 0 }
  28.667% { opacity: 1 }
  36.333% { opacity: 1 }
  37.333% { opacity: 0 }
  64% { opacity: 0 }
  66% { opacity: 1 }
  74.333% { opacity: 1 }
  75.333% { opacity: 0 }
  92% { opacity: 0 }
  94% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes cpG1 {
  0% { opacity: 0 }
  9.667% { opacity: 0 }
  10.667% { opacity: 1 }
  26.667% { opacity: 1 }
  28.667% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpG2 {
  0% { opacity: 0 }
  36.333% { opacity: 0 }
  37.333% { opacity: 1 }
  64% { opacity: 1 }
  66% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpG3 {
  0% { opacity: 0 }
  74.333% { opacity: 0 }
  75.333% { opacity: 1 }
  92% { opacity: 1 }
  94% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpRing {
  0% { opacity: 0 }
  9.667% { opacity: 0 }
  10.667% { opacity: 1 }
  16% { opacity: 1 }
  18% { opacity: 0 }
  36.333% { opacity: 0 }
  37.333% { opacity: 1 }
  53.667% { opacity: 1 }
  55.667% { opacity: 0 }
  74.333% { opacity: 0 }
  75.333% { opacity: 1 }
  80.333% { opacity: 1 }
  82.333% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpEdge {
  0% { opacity: 0 }
  81% { opacity: 0 }
  82.2% { opacity: 1 }
  86% { opacity: 1 }
  88.4% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpC11 {
  0% { opacity: 0; transform: translateY(4px) }
  11% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  13% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC12 {
  0% { opacity: 0; transform: translateY(4px) }
  12.667% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  14.667% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC13 {
  0% { opacity: 0; transform: translateY(4px) }
  14.333% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  16.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpS1 {
  0% { opacity: 0; transform: translateY(4px) }
  16% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  18% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC21 {
  0% { opacity: 0; transform: translateY(4px) }
  37.667% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  39.667% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC22 {
  0% { opacity: 0; transform: translateY(4px) }
  39.333% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  41.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC23 {
  0% { opacity: 0; transform: translateY(4px) }
  41% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  43% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC31 {
  0% { opacity: 0; transform: translateY(4px) }
  75.667% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  77.667% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC32 {
  0% { opacity: 0; transform: translateY(4px) }
  77.333% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  79.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpC33 {
  0% { opacity: 0; transform: translateY(4px) }
  79% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  81% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpS2a {
  0% { opacity: 0; transform: translateY(4px) }
  42.667% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  44.667% { opacity: 1; transform: translateY(0) }
  53% { opacity: 1; transform: translateY(0) }
  54% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes cpS2b {
  0% { opacity: 0; transform: translateY(4px) }
  53.667% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  55.667% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes cpS3 {
  0% { opacity: 0; transform: translateX(0) }
  80.667% { opacity: 0; transform: translateX(0) }
  81.333% { opacity: 1; transform: translateX(0) }
  82% { opacity: 1; transform: translateX(-4px) }
  82.667% { opacity: 1; transform: translateX(4px) }
  83.333% { opacity: 1; transform: translateX(-2px) }
  84% { opacity: 1; transform: translateX(0) }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes cpAp {
  0% { opacity: 0; transform: translateY(10px) scale(.98) }
  44% { opacity: 0; transform: translateY(10px) scale(.98); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  46.667% { opacity: 1; transform: translateY(0) scale(1) }
  53.667% { opacity: 1; transform: translateY(0) scale(1) }
  56% { opacity: 0; transform: translateY(0) scale(.98) }
  100% { opacity: 0; transform: translateY(0) scale(.98) }
}
@keyframes cpPress {
  0% { transform: scale(1); background: var(--btn); color: var(--btn-ink) }
  50.667% { transform: scale(1); background: var(--btn); color: var(--btn-ink) }
  51.467% { transform: scale(.94); background: var(--btn); color: var(--btn-ink) }
  52.667% { transform: scale(1); background: var(--ok); color: var(--ok-ink) }
  100% { transform: scale(1); background: var(--ok); color: var(--ok-ink) }
}
@keyframes cpL1 {
  0% { opacity: 0; transform: translateY(6px) }
  23.333% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  25.667% { opacity: 1; transform: translateY(0) }
  92.667% { opacity: 1; transform: translateY(0) }
  95.667% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes cpL2 {
  0% { opacity: 0; transform: translateY(6px) }
  61.333% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  63.667% { opacity: 1; transform: translateY(0) }
  92.667% { opacity: 1; transform: translateY(0) }
  95.667% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes cpL3 {
  0% { opacity: 0; transform: translateY(6px) }
  82% { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  84.333% { opacity: 1; transform: translateY(0) }
  92.667% { opacity: 1; transform: translateY(0) }
  95.667% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes cpLh1 {
  0% { opacity: 0 }
  23.333% { opacity: 0 }
  25.333% { opacity: 1 }
  26% { opacity: 1 }
  30% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpLh2 {
  0% { opacity: 0 }
  61.333% { opacity: 0 }
  63.333% { opacity: 1 }
  64% { opacity: 1 }
  68% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes cpLh3 {
  0% { opacity: 0 }
  82% { opacity: 0 }
  84% { opacity: 1 }
  84.667% { opacity: 1 }
  88.667% { opacity: 0 }
  100% { opacity: 0 }
}

/* agents strip */
.agents { padding: 96px 0 0; }
.agents__cap { text-align: center; font-size: 14px; color: var(--ink-3); }
.agents__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 44px; margin-top: 26px; }
.agents__row a { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 500; color: var(--ink-3); letter-spacing: -0.01em; transition: color .2s; }
.agents__row a:hover { color: var(--ink); text-decoration: none; }
.agents__row .brand-mark, .agents__row .ui { opacity: .9; }

/* split + fan-out */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fan { position: relative; width: 572px; height: 420px; justify-self: end; }
.fan svg.fan__lines { position: absolute; inset: 0; width: 572px; height: 420px; overflow: visible; }
.fan__lines path { fill: none; stroke: var(--ok); stroke-width: 1.25; opacity: .9; }
.fan__lines path.base { stroke: var(--line-2); opacity: 1; }
.fan__app { position: absolute; left: 0; top: 168px; width: 252px; height: 84px; padding: 0 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); box-shadow: var(--shadow); }
.fan__app .tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); }
.fan__app b { display: block; font-size: 15px; }
.fan__app small { position: relative; display: block; height: 16px; width: 120px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.fan__app small .ok { position: absolute; left: 0; top: 0; color: var(--ok); animation: fnStatus 9s linear 1s infinite both; }
.fan__app small .off { position: absolute; left: 0; top: 0; opacity: 0; animation: fnStatusOff 9s linear 1s infinite both; }
.toggle { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: var(--ok); position: relative; animation: fnTrack 9s linear 1s infinite both; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transform: translateX(14px); animation: fnKnob 9s linear 1s infinite both; }
.fan__pane { position: absolute; left: 336px; width: 236px; height: 84px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.fan__pane-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
.fan__pane-head .count { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.fan__tools { display: flex; gap: 6px; margin-top: 12px; }
.fan__tool { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line); font: 500 11px/1 "Geist Mono", ui-monospace, monospace; color: var(--ink-2); white-space: nowrap; }

.fan__lines .l0 { stroke-dasharray: 178.3; animation: fnLine0 9s linear 1s infinite both; }
.fan__pane.p0 { top: 21px; }
.fan__pane.p0 .fan__tools { animation: fnPane0 9s linear 1s infinite both; }
.fan__pane.p0 .count { animation: fnDot0 9s linear 1s infinite both; }
.fan__lines .l1 { stroke-dasharray: 101.1; animation: fnLine1 9s linear 1s infinite both; }
.fan__pane.p1 { top: 119px; }
.fan__pane.p1 .fan__tools { animation: fnPane1 9s linear 1s infinite both; }
.fan__pane.p1 .count { animation: fnDot1 9s linear 1s infinite both; }
.fan__lines .l2 { stroke-dasharray: 101.1; animation: fnLine2 9s linear 1s infinite both; }
.fan__pane.p2 { top: 217px; }
.fan__pane.p2 .fan__tools { animation: fnPane2 9s linear 1s infinite both; }
.fan__pane.p2 .count { animation: fnDot2 9s linear 1s infinite both; }
.fan__lines .l3 { stroke-dasharray: 178.3; animation: fnLine3 9s linear 1s infinite both; }
.fan__pane.p3 { top: 315px; }
.fan__pane.p3 .fan__tools { animation: fnPane3 9s linear 1s infinite both; }
.fan__pane.p3 .count { animation: fnDot3 9s linear 1s infinite both; }
@keyframes fnKnob {
  0% { transform: translateX(0) }
  8.889% { transform: translateX(0); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  12.778% { transform: translateX(14px) }
  90% { transform: translateX(14px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  93.889% { transform: translateX(0) }
  100% { transform: translateX(0) }
}
@keyframes fnTrack {
  0% { background: var(--line-2) }
  8.889% { background: var(--line-2) }
  12.778% { background: var(--ok) }
  90% { background: var(--ok) }
  93.889% { background: var(--line-2) }
  100% { background: var(--line-2) }
}
@keyframes fnStatus {
  0% { opacity: 0 }
  12.222% { opacity: 0 }
  15.556% { opacity: 1 }
  87.778% { opacity: 1 }
  91.111% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes fnStatusOff {
  0% { opacity: 1 }
  10% { opacity: 1 }
  12.222% { opacity: 0 }
  91.111% { opacity: 0 }
  93.333% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes fnLine0 {
  0% { stroke-dashoffset: 178.3; opacity: 1 }
  13.333% { stroke-dashoffset: 178.3; opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1) }
  18.889% { stroke-dashoffset: 0; opacity: 1 }
  85.556% { stroke-dashoffset: 0; opacity: 1 }
  90% { stroke-dashoffset: 0; opacity: 0 }
  100% { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes fnLine1 {
  0% { stroke-dashoffset: 101.1; opacity: 1 }
  14.444% { stroke-dashoffset: 101.1; opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1) }
  20% { stroke-dashoffset: 0; opacity: 1 }
  85.556% { stroke-dashoffset: 0; opacity: 1 }
  90% { stroke-dashoffset: 0; opacity: 0 }
  100% { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes fnLine2 {
  0% { stroke-dashoffset: 101.1; opacity: 1 }
  15.556% { stroke-dashoffset: 101.1; opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1) }
  21.111% { stroke-dashoffset: 0; opacity: 1 }
  85.556% { stroke-dashoffset: 0; opacity: 1 }
  90% { stroke-dashoffset: 0; opacity: 0 }
  100% { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes fnLine3 {
  0% { stroke-dashoffset: 178.3; opacity: 1 }
  16.667% { stroke-dashoffset: 178.3; opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1) }
  22.222% { stroke-dashoffset: 0; opacity: 1 }
  85.556% { stroke-dashoffset: 0; opacity: 1 }
  90% { stroke-dashoffset: 0; opacity: 0 }
  100% { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes fnPane0 {
  0% { opacity: 0; transform: translateY(4px) }
  17.778% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  22.222% { opacity: 1; transform: translateY(0) }
  85.556% { opacity: 1; transform: translateY(0) }
  90% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes fnPane1 {
  0% { opacity: 0; transform: translateY(4px) }
  19.333% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  23.778% { opacity: 1; transform: translateY(0) }
  85.556% { opacity: 1; transform: translateY(0) }
  90% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes fnPane2 {
  0% { opacity: 0; transform: translateY(4px) }
  20.889% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  25.333% { opacity: 1; transform: translateY(0) }
  85.556% { opacity: 1; transform: translateY(0) }
  90% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes fnPane3 {
  0% { opacity: 0; transform: translateY(4px) }
  22.444% { opacity: 0; transform: translateY(4px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  26.889% { opacity: 1; transform: translateY(0) }
  85.556% { opacity: 1; transform: translateY(0) }
  90% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes fnDot0 {
  0% { opacity: .35 }
  17.778% { opacity: .35 }
  21.111% { opacity: 1 }
  85.556% { opacity: 1 }
  90% { opacity: .35 }
  100% { opacity: .35 }
}
@keyframes fnDot1 {
  0% { opacity: .35 }
  19.333% { opacity: .35 }
  22.667% { opacity: 1 }
  85.556% { opacity: 1 }
  90% { opacity: .35 }
  100% { opacity: .35 }
}
@keyframes fnDot2 {
  0% { opacity: .35 }
  20.889% { opacity: .35 }
  24.222% { opacity: 1 }
  85.556% { opacity: 1 }
  90% { opacity: .35 }
  100% { opacity: .35 }
}
@keyframes fnDot3 {
  0% { opacity: .35 }
  22.444% { opacity: .35 }
  25.778% { opacity: 1 }
  85.556% { opacity: 1 }
  90% { opacity: .35 }
  100% { opacity: .35 }
}

/* rules */

.rules { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 56px; align-items: start; }

.panel__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel__head .tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); }
.panel__head b { display: block; font-size: 15px; }
.panel__head small { display: block; font-size: 12.5px; color: var(--ink-3); }
.panel__head .tag { margin-left: auto; font-size: 12px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.rule:last-of-type { border-bottom: 0; }
.rule b { display: block; font-size: 15px; }
.rule small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.rule--live { animation: rlRow 10s linear 1s infinite both; }
.seg { position: relative; display: inline-grid; grid-template-columns: repeat(3, 76px); height: 34px; padding: 3px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); }
.seg span { position: relative; z-index: 1; display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.seg span.on { color: var(--ink); }
.seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 76px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg i.at-1 { transform: translateX(76px); }
.seg i.at-2 { transform: translateX(152px); }
.panel__foot { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--bg); font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.ask { position: relative; }
.ask__card { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); box-shadow: var(--shadow); padding: 20px 22px 22px; animation: rlCard 10s linear 1s infinite both; }
.ask__who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.ask__who b { color: var(--ink); font-weight: 500; }
.ask__title { margin-top: 12px; font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; }
.ask__meta { margin-top: 12px; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.ask__meta div { display: flex; justify-content: space-between; gap: 12px; }
.ask__meta .mono { color: var(--ink-2); font-size: 12px; }
.ask__state { position: relative; height: 40px; margin-top: 18px; }
.ask__btns { position: absolute; inset: 0; display: flex; gap: 8px; animation: rlAsking 10s linear 1s infinite both; }
.ask__btns .mini { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.ask__btns .mini--primary { animation: rlPress 10s linear 1s infinite both; }
.ask__done { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; animation: rlDone 10s linear 1s infinite both; }
.ask__cap { margin-top: 16px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
@keyframes rlRow {
  0% { background: transparent }
  89% { background: transparent }
  91% { background: var(--brand-wash) }
  98.5% { background: var(--brand-wash) }
  100% { background: transparent }
}
@keyframes rlCard {
  0% { opacity: 1; transform: translateY(0) }
  87% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in }
  89.5% { opacity: .55; transform: translateY(6px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  94% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes rlPress {
  0% { transform: scale(1) }
  31% { transform: scale(1) }
  32.2% { transform: scale(.95) }
  34% { transform: scale(1) }
  100% { transform: scale(1) }
}
@keyframes rlAsking {
  0% { opacity: 1 }
  34% { opacity: 1 }
  36% { opacity: 0 }
  90% { opacity: 0 }
  93% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes rlDone {
  0% { opacity: 0 }
  35% { opacity: 0 }
  38% { opacity: 1 }
  86% { opacity: 1 }
  88% { opacity: 0 }
  100% { opacity: 0 }
}

/* surfaces bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.tile-lg { grid-column: span 7; grid-row: span 2; }
.tile-sm { grid-column: span 5; }

.card .h3 { margin-top: 18px; }
.card p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.card .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.term { background: var(--code); border-color: var(--code-line); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.term__bar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-bottom: 1px solid var(--code-line); color: #8c8c92; font: 500 12px/1 "Geist Mono", ui-monospace, monospace; }
.term__bar .ui { color: #8c8c92; }
.term__bar .right { margin-left: auto; }
.term__body { padding: 20px 22px; font: 400 13px/1.9 "Geist Mono", ui-monospace, monospace; color: #d7d7da; flex: 1; }
.term__body .ln { display: block; white-space: pre; }
.term__body .ln--cmd::before { content: "$ "; color: #ff7a45; }
.term__body .t-ok { color: #3ecf8e; }
.term__body .t-warn { color: #f5b73b; }
.term__body .t-rec { color: #b3b3b8; }
.term__body .t-dim { color: #7a7a80; }
.term__body .gap { display: block; height: 12px; }
.term__body .sp { display: inline-block; width: 2ch; }
.term__body .ind { display: inline-block; width: 2ch; }
.term__body .cursor { display: inline-block; width: 8px; height: 15px; background: #d7d7da; vertical-align: -2px; animation: homeBlink 1.1s steps(1) infinite; }
@keyframes homeBlink { 50% { opacity: 0; } }
.term__body .tm0 { animation: tm0 14s linear 1s infinite both; }
.term__body .tm1 { animation: tm1 14s linear 1s infinite both; }
.term__body .tm2 { animation: tm2 14s linear 1s infinite both; }
.term__body .tm3 { animation: tm3 14s linear 1s infinite both; }
.term__body .tm4 { animation: tm4 14s linear 1s infinite both; }
.term__body .tm5 { animation: tm5 14s linear 1s infinite both; }
.term__body .tm6 { animation: tm6 14s linear 1s infinite both; }
.term__body .tm7 { animation: tm7 14s linear 1s infinite both; }
.term__body .tm8 { animation: tm8 14s linear 1s infinite both; }
.term__body .tm9 { animation: tm9 14s linear 1s infinite both; }
.term__body .tmPrompt { animation: tmPrompt 14s linear 1s infinite both; }
@keyframes tm0 {
  0% { clip-path: inset(0 100% 0 0) }
  2.857% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(31, end) }
  7.857% { clip-path: inset(0 0 0 0) }
  90% { clip-path: inset(0 0 0 0); opacity: 1 }
  93.571% { clip-path: inset(0 0 0 0); opacity: 0 }
  100% { clip-path: inset(0 0 0 0); opacity: 0 }
}
@keyframes tm1 {
  0% { opacity: 0; transform: translateY(3px) }
  9.643% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  11.786% { opacity: 1; transform: translateY(0) }
  90% { opacity: 1; transform: translateY(0) }
  93.571% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes tm2 {
  0% { opacity: 0; transform: translateY(3px) }
  10.714% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  12.857% { opacity: 1; transform: translateY(0) }
  90% { opacity: 1; transform: translateY(0) }
  93.571% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes tm3 {
  0% { clip-path: inset(0 100% 0 0) }
  15% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(65, end) }
  22.143% { clip-path: inset(0 0 0 0) }
  90% { clip-path: inset(0 0 0 0); opacity: 1 }
  93.571% { clip-path: inset(0 0 0 0); opacity: 0 }
  100% { clip-path: inset(0 0 0 0); opacity: 0 }
}
@keyframes tm4 {
  0% { opacity: 0; transform: translateY(3px) }
  23.929% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  26.071% { opacity: 1; transform: translateY(0) }
  90% { opacity: 1; transform: translateY(0) }
  93.571% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes tm5 {
  0% { clip-path: inset(0 100% 0 0) }
  28.571% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(68, end) }
  36.429% { clip-path: inset(0 0 0 0) }
  90% { clip-path: inset(0 0 0 0); opacity: 1 }
  93.571% { clip-path: inset(0 0 0 0); opacity: 0 }
  100% { clip-path: inset(0 0 0 0); opacity: 0 }
}
@keyframes tm6 {
  0% { opacity: 0; transform: translateY(3px) }
  38.214% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  40.357% { opacity: 1; transform: translateY(0) }
  90% { opacity: 1; transform: translateY(0) }
  93.571% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes tm7 {
  0% { opacity: 0; transform: translateY(3px) }
  47.143% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  49.286% { opacity: 1; transform: translateY(0) }
  90% { opacity: 1; transform: translateY(0) }
  93.571% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes tm8 {
  0% { clip-path: inset(0 100% 0 0) }
  52.143% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(26, end) }
  55.714% { clip-path: inset(0 0 0 0) }
  90% { clip-path: inset(0 0 0 0); opacity: 1 }
  93.571% { clip-path: inset(0 0 0 0); opacity: 0 }
  100% { clip-path: inset(0 0 0 0); opacity: 0 }
}
@keyframes tm9 {
  0% { opacity: 0; transform: translateY(3px) }
  57.857% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  60% { opacity: 1; transform: translateY(0) }
  90% { opacity: 1; transform: translateY(0) }
  93.571% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes tmPrompt {
  0% { opacity: 0 }
  60.714% { opacity: 0 }
  61.429% { opacity: 1 }
  90% { opacity: 1 }
  93.571% { opacity: 0 }
  100% { opacity: 0 }
}
.logos { display: grid; grid-template-columns: repeat(6, 40px); gap: 10px; margin-top: 22px; }
.logos span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-3); color: var(--ink); }
.spec { margin-top: 18px; display: grid; gap: 6px; }
.spec div { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 30px; padding: 0 10px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line); font: 500 12px/1 "Geist Mono", ui-monospace, monospace; color: var(--ink-2); }
.spec .m { color: var(--ink-3); }
.spec .cls { font-family: "Geist", system-ui, sans-serif; font-size: 12px; }
.cls--r { color: var(--ok); }
.cls--w { color: var(--warn); }
.cls--d { color: var(--bad); }
.coverage { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.coverage > div { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; }
.coverage > div + div { border-left: 1px solid var(--line); }
.coverage b { display: block; font-size: 14.5px; }
.coverage span { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.coverage .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.coverage .ic--ok { background: var(--ok-wash); color: var(--ok); }
.coverage .ic--rec { background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line); }

/* activity */
.act-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.act-head .links { display: flex; gap: 24px; padding-bottom: 6px; }
.log { margin-top: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); overflow: hidden; }
.log__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.log__bar .title { font-size: 15px; font-weight: 500; color: var(--ink); margin-right: 12px; }
.filter { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; color: var(--ink-2); }
.filter .ui { color: var(--ink-4); }
.log__bar .right { margin-left: auto; font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.log__cols, .log__row { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.3fr) 220px; gap: 16px; align-items: center; padding: 0 20px; }
.log__cols { height: 38px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.log__view { height: 288px; overflow: hidden; }
.log__rows { animation: acShift 10s linear 1s infinite both; }
.log__row { position: relative; height: 48px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.log__row .t { font: 400 12.5px/1 "Geist Mono", ui-monospace, monospace; color: var(--ink-3); }
.log__row .who { display: flex; align-items: center; gap: 10px; color: var(--ink); white-space: nowrap; }
.avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 600; color: #fff; flex-shrink: 0; }
.log__row .agent { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.log__row .tool { display: flex; align-items: center; gap: 8px; font: 400 12.5px/1 "Geist Mono", ui-monospace, monospace; color: var(--ink); white-space: nowrap; overflow: hidden; }
.log__row.is-new { animation: acNew 10s linear 1s infinite both; }
.log__row .tint { position: absolute; inset: 0; background: color-mix(in srgb, var(--brand) 7%, transparent); opacity: 0; }
.log__row.is-new .tint { animation: acTint 10s linear 1s infinite both; }
@keyframes acShift {
  0% { transform: translateY(-48px) }
  12% { transform: translateY(-48px); animation-timing-function: cubic-bezier(.16,1,.3,1) }
  17.5% { transform: translateY(0) }
  89% { transform: translateY(0); animation-timing-function: cubic-bezier(.4,0,.2,1) }
  95% { transform: translateY(-48px) }
  100% { transform: translateY(-48px) }
}
@keyframes acNew {
  0% { opacity: 0 }
  12% { opacity: 0 }
  16% { opacity: 1 }
  86% { opacity: 1 }
  89.5% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes acTint {
  0% { opacity: 0 }
  13% { opacity: 0 }
  16% { opacity: 1 }
  36% { opacity: 1 }
  44% { opacity: 0 }
  100% { opacity: 0 }
}

/* final */
.final { padding: 168px 0 144px; text-align: center; }
.final .seal { color: var(--brand); margin: 0 auto; }
.final .seal path { stroke-dasharray: 160; animation: homeDraw 1.6s var(--ease) 1.4s both; }
.final .seal path + path { stroke-dasharray: 80; animation-delay: 1.8s; }
@keyframes homeDraw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
.final .h2 { margin-top: 28px; font-size: 64px; }
.final .lede { margin-top: 18px; }
.final .cta-row { justify-content: center; }
.final .final__links { justify-content: center; margin-top: 28px; }

/* who it's for: one row per audience, each a link to its page */
.audiences__cap { font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--ink-3); }
.audiences { margin-top: 16px; border-top: 1px solid var(--line); }
.audience { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 20px; padding: 22px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none !important; transition: background .16s; }
.audience:hover { background: var(--bg-2); }
.audience__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); }
.audience__text b { display: block; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.audience__text span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.audience__meta { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.audience__meta code { font-size: 12.5px; overflow-wrap: anywhere; }
.audience__arrow { color: var(--ink-3); transition: transform .2s var(--ease), color .16s; }
.audience:hover .audience__arrow { transform: translateX(3px); color: var(--ink); }

/* set-up steps */
.steps { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line); }
.steps__row { display: grid; grid-template-columns: 28px minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 13px/1 var(--mono); color: var(--ink-2); }
.steps__title { padding-top: 3px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.steps__title code { font-size: 14px; overflow-wrap: anywhere; }
.steps__text { padding-top: 3px; font-size: 15px; line-height: 1.55; color: var(--ink-3); }

/* production safety and the shell guard */
.split--panel { align-items: start; }
.safety .rule { border-bottom: 1px solid var(--line); }
.safety .panel__foot { border-top: 0; }
.seg--wide { grid-template-columns: repeat(3, 84px); }
.seg--wide i { width: 84px; }
.seg--wide i.at-1 { transform: translateX(84px); }
.safety__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.safety__row .tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); }
.safety__row b { display: block; font-size: 14.5px; }
.safety__row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.term--guard .term__body .ln { white-space: pre-wrap; }
.stack-head .body code { white-space: nowrap; }

/* plan names on capabilities that need Enterprise */
.plan-tag, .capabilities span .plan-tag { display: inline-flex; align-items: center; height: 20px; margin: 0 0 0 6px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font: 500 11.5px/1 var(--sans); letter-spacing: 0; color: var(--ink-3); vertical-align: 2px; }
@media (min-width: 901px) { .plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 801px) { .promise-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ responsive */
.term__body { overflow-x: auto; }
@media (max-width: 1263px) { .cp { --cp-s: 0.86; } }
@media (max-width: 1099px) {
  .cp { --cp-s: 0.74; }
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .split { grid-template-columns: 1fr; }
  .fan { justify-self: start; }
}
@media (max-width: 959px) { .cp { --cp-s: 0.6; } }
@media (max-width: 900px) {
  .rules { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .tile-lg, .tile-sm { grid-column: auto; grid-row: auto; }
  .coverage { grid-template-columns: 1fr; }
  .coverage > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .act-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .log__cols, .log__row { grid-template-columns: 84px minmax(0, 1fr) 190px; }
  .log__row .agent, .log__row .tool, .log__cols .c-agent, .log__cols .c-tool, .log__bar .filter { display: none; }
}
@media (max-width: 783px) {
  .cp { margin-top: 48px; }
  .cp__scale { display: none; }
  .cp__ledger { border-top: 0; }
  .cp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "tool" "res"; height: auto; gap: 4px; padding: 12px 10px; }
  .cp-row .t, .cp-row .cls { display: none; }
  .cp-row .who { grid-area: who; }
  .cp-row .tool { grid-area: tool; }
  .cp-row .res { grid-area: res; }
  .cp-row, .cp-row .hl { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cp-row .hl { opacity: 0 !important; }
}
@media (max-width: 640px) {
  .hero { padding-top: 64px; }
  .h1 { font-size: 48px; }
  .h2 { font-size: 36px; }
  .fan { display: none; }
  .rule { grid-template-columns: 1fr; gap: 12px; }
  .rule .seg { justify-self: start; }
  .term__body { font-size: 11.5px; scrollbar-width: none; }
  .panel__head { flex-wrap: wrap; row-gap: 10px; }
  .panel__head > span:nth-child(2) { flex: 1 1 calc(100% - 44px); }
  .panel__head .tag { margin-left: 44px; white-space: nowrap; }
  .final { padding: 112px 0 96px; }
  .final .h2 { font-size: 40px; }
  .log__cols, .log__row { grid-template-columns: minmax(0, 1fr) 150px; }
  .log__row .t, .log__cols .c-time { display: none; }
}
@media (max-width: 760px) {
  .audience { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 6px 16px; padding: 20px 4px; }
  .audience__meta { grid-column: 2; grid-row: 2; white-space: normal; }
  .audience__arrow { grid-column: 3; grid-row: 1; }
  .steps__row { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 16px; }
  .steps__text { grid-column: 2; padding-top: 0; }
  .safety__row { padding: 14px 18px; }
}