/* AgentKit home page. The blue/white palette itself lives in te.css, shared by the whole site. */
.home .gnav-links { justify-content: flex-end; gap: 30px; }
.home .gnav-links .agent-kit-nav { color: var(--accent-ink); font-weight: 650; }
.agent-kit-hero { position: relative; min-height: min(900px, 100svh); overflow: hidden; padding: calc(var(--nav-h) + 66px) var(--gutter) 64px; display: grid; place-items: center; background: var(--bg); }
.agent-kit-opening { width: min(1160px, 100%); display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 30px; }
.agent-kit-copy { position: relative; z-index: 2; }
.agent-kit-copy .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.agent-kit-copy .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.agent-kit-name { font-size: clamp(78px, 8.2vw, 116px); line-height: .94; letter-spacing: -.07em; font-weight: 650; margin-left: -.055em; }
.agent-kit-tagline { font-size: clamp(30px, 3.7vw, 48px); font-weight: 550; line-height: 1.1; letter-spacing: -.04em; margin-top: 27px; text-wrap: balance; }
.agent-kit-copy .lead { max-width: 475px; margin-top: 23px; font-size: clamp(18px, 1.7vw, 22px); }
.agent-kit-copy .cta-row { justify-content: flex-start; margin-top: 30px; gap: 20px; }
.agent-kit-note { font-size: 13px; color: var(--ink-2); margin-top: 17px; }
.agent-kit-scene { position: relative; height: 610px; isolation: isolate; }
.agent-kit-canvas { position: absolute; inset: -22% -16% -10%; width: 132%; max-width: none; height: 132%; z-index: -1; pointer-events: none; }
.agent-kit-orbit-label { position: absolute; z-index: 2; padding: 10px 15px; border: 1px solid #ffffffb3; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px #0a163014, 0 1px 0 #ffffff inset; backdrop-filter: blur(6px); font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.agent-kit-orbit-label strong { color: var(--ink); display: block; font-size: 15px; font-weight: 600; }
.agent-kit-fleet-label { right: -2%; top: -3%; }
.agent-kit-engine-label { left: -4%; bottom: -8%; }
.agent-kit-knowledge-label { left: 0; top: -3%; }
.agent-kit-motion { position: absolute; z-index: 2; bottom: -24px; right: 7%; border: 0; padding: 10px 0; color: var(--ink-2); background: transparent; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.agent-kit-motion[hidden] { display: none; }
.agent-kit-scene.is-playing .agent-kit-orbit-label { animation: none; }

/* Package offers */
.agent-kit-offers { padding: 0 var(--gutter) clamp(72px, 8vw, 104px); }
.agent-kit-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.agent-kit-offer { min-width: 0; padding: clamp(28px, 3.4vw, 42px); border-radius: var(--radius); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.agent-kit-offer-primary { background: linear-gradient(145deg, var(--bg-tint), var(--bg) 72%); box-shadow: inset 0 0 0 1px var(--line-blue); }
.agent-kit-offer .eyebrow { margin-bottom: 15px; }
.agent-kit-offer h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; letter-spacing: -.04em; margin-bottom: 12px; }
.agent-kit-offer > p:not(.eyebrow) { max-width: 48ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.agent-kit-offer .agent-kit-ticks { margin: 22px 0 26px; }
.agent-kit-offer .btn { display: inline-flex; text-decoration: none; }
.agent-kit-offer .link-more { display: inline-block; margin: 8px 0; font-size: 16px; }

/* Sections */
.agent-kit-section-lead { max-width: 640px; margin: 20px auto 0; }
.agent-kit-why { padding-block: clamp(84px, 9vw, 124px); }
.agent-kit-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(44px, 5vw, 64px); }
.agent-kit-benefits article { padding: 28px 26px 30px; border-radius: var(--radius-m); background: var(--bg-tint); }
.agent-kit-benefits img { display: block; width: 48px; height: 48px; margin-bottom: 22px; }
.agent-kit-benefits h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.026em; margin-bottom: 10px; text-wrap: balance; }
.agent-kit-benefits p { font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.agent-kit-asks { margin-top: clamp(64px, 7vw, 92px); text-align: center; }
.agent-kit-asks h3 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.035em; line-height: 1.1; }
.agent-kit-prompts { list-style: none; padding: 0; margin: 26px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; text-align: left; }
.agent-kit-prompts li { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 20px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 18px #0a16300a; font-size: 17px; line-height: 1.4; color: var(--ink); }
.agent-kit-prompts q { quotes: '\201C' '\201D'; text-wrap: pretty; }
.agent-kit-prompts span { flex: none; margin-top: 3px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.agent-kit-asks-note { margin-top: 18px; font-size: 14px; color: var(--ink-2); }

.agent-kit-tools { padding-block: clamp(84px, 9vw, 120px); }
.agent-kit-pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
.agent-kit-pair article { padding: clamp(28px, 3.4vw, 40px); border-radius: var(--radius); background: var(--bg); }
.agent-kit-pair img { width: 48px; height: 48px; margin-bottom: 22px; }
.agent-kit-pair-version { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.agent-kit-pair h3 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.034em; line-height: 1.1; margin-bottom: 18px; }
.agent-kit-ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.agent-kit-ticks li { position: relative; padding-left: 28px; font-size: 17px; line-height: 1.4; color: var(--ink); }
.agent-kit-ticks li::before { content: ''; position: absolute; left: 3px; top: .38em; width: 11px; height: 6px; border-left: 2.2px solid var(--accent); border-bottom: 2.2px solid var(--accent); transform: rotate(-45deg); }
.agent-kit-pair .link-more { font-size: 16px; }
.agent-kit-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 72px); text-align: center; }
.agent-kit-stats div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.agent-kit-stats dd { order: -1; }
.agent-kit-stats dd { margin: 0; max-width: 100%; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.3; font-weight: 650; letter-spacing: -.02em; color: var(--accent); overflow-wrap: anywhere; }
.agent-kit-stats dt { font-size: 15px; line-height: 1.35; color: var(--ink-2); max-width: 19ch; }
.agent-kit-fn { color: inherit; text-decoration: none; margin-left: 1px; }
.agent-kit-footnote { margin-top: 26px; text-align: center; font-size: 13px; color: var(--ink-2); }

.agent-kit-connect { padding-block: clamp(84px, 9vw, 120px); }
.agent-kit-download { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; margin-top: clamp(40px, 5vw, 56px); padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radius); background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg) 70%); box-shadow: inset 0 0 0 1px var(--line-blue); }
.agent-kit-download-title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 650; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-kit-download-title span { font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.agent-kit-download-meta { margin: 8px 0 22px; font-size: 15px; color: var(--ink-2); }
.agent-kit-download-side { font-size: 15px; color: var(--ink-2); display: grid; gap: 10px; }
.agent-kit-download-side a { color: var(--accent-ink); }
.agent-kit-download-side a:hover { text-decoration: underline; text-underline-offset: 3px; }
.agent-kit-sha code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.agent-kit-platforms { font-size: 14px; }
.agent-kit-steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.agent-kit-step { min-width: 0; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-2); }
.agent-kit-step-wide { grid-column: 1 / -1; }
.agent-kit-step h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: -.026em; margin-bottom: 18px; }
.agent-kit-step-n { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 650; letter-spacing: 0; }
.agent-kit-step > p, .agent-kit-step .agent-kit-host > p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.agent-kit-step .term { padding: 18px 20px; }
.agent-kit-step .term pre { font-size: 13.5px; }
.inline { font-family: var(--mono); font-size: .88em; color: var(--ink); background: var(--bg-tint); padding: .1em .38em; border-radius: 6px; }
/* The commands here are short: keep each one whole instead of the site-wide word wrapping. */
.agent-kit-step code.inline.words, .agent-kit-faq code.inline.words { white-space: nowrap; }
.agent-kit-hosts .agent-kit-host + .agent-kit-host { margin-top: 18px; }
.agent-kit-host h4 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.agent-kit-host > p:first-of-type { margin-top: 0; }
/* With scripts on, the four hosts become a segmented control. */
.agent-kit-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 16px; border-radius: 999px; background: var(--bg-tint); }
.agent-kit-tabs button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.agent-kit-tabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px #0a16301f, inset 0 0 0 1px var(--line-2); }
.agent-kit-hosts.is-tabs .agent-kit-host + .agent-kit-host { margin-top: 0; }
.agent-kit-hosts.is-tabs .agent-kit-host h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.agent-kit-hosts.is-tabs .agent-kit-host[hidden] { display: none; }

.agent-kit-trust { padding-block: clamp(84px, 9vw, 120px); }
.agent-kit-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 56px); }
.agent-kit-trust-grid article { padding: clamp(26px, 3vw, 34px); border-radius: var(--radius-m); background: var(--bg); }
.agent-kit-trust-grid img { width: 48px; height: 48px; margin-bottom: 20px; }
.agent-kit-trust-grid h3 { font-size: 21px; letter-spacing: -.026em; margin-bottom: 8px; }
.agent-kit-trust-grid p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.agent-kit-trust-more { max-width: 720px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.agent-kit-trust-more a { color: var(--accent-ink); white-space: nowrap; }
.agent-kit-trust-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

.agent-kit-specs { padding-block: clamp(84px, 9vw, 120px); }
.agent-kit-specs-title { font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 28px; }
.agent-kit-spec-list { margin: 0; border-bottom: 1px solid var(--line-2); }
.agent-kit-spec-list div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 17px 0; border-top: 1px solid var(--line-2); }
.agent-kit-spec-list dt { font-size: 16px; font-weight: 600; color: var(--ink); }
.agent-kit-spec-list dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.agent-kit-faq { padding-block: clamp(84px, 9vw, 120px); }
.agent-kit-faq-list { max-width: 820px; margin: clamp(36px, 4vw, 48px) auto 0; border-top: 1px solid var(--line); }
.agent-kit-faq details { border-bottom: 1px solid var(--line); }
.agent-kit-faq summary { position: relative; list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-size: clamp(18px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.agent-kit-faq summary::-webkit-details-marker { display: none; }
.agent-kit-faq summary::before, .agent-kit-faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--accent); transition: transform .25s var(--ease); }
.agent-kit-faq summary::after { transform: rotate(90deg); }
.agent-kit-faq details[open] summary::after { transform: rotate(0deg); }
.agent-kit-faq summary:hover { color: var(--accent-ink); }
.agent-kit-faq details p { padding: 0 48px 24px 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.agent-kit-faq details a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.agent-kit-products { padding-block: 52px; border-top: 1px solid var(--line-2); }
.agent-kit-products .wrap { display: flex; justify-content: space-between; gap: 38px; align-items: baseline; }
.agent-kit-products h2 { font-size: 19px; font-weight: 600; flex-shrink: 0; }
.agent-kit-product-links { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.agent-kit-product-links a { font-size: 14px; color: var(--ink-2); }
.agent-kit-product-links a:hover { color: var(--accent-ink); text-decoration: underline; }
.home .foot { margin-top: 0; }

@media (min-width: 1101px) { .home .gnav-links { margin-left: auto; } }
@media (max-width: 1080px) { .agent-kit-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .agent-kit-scene { height: 530px; } .agent-kit-fleet-label { right: -5%; } .agent-kit-engine-label { left: -8%; } }
@media (max-width: 860px) {
  .agent-kit-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-kit-download { grid-template-columns: 1fr; gap: 20px; }
  .agent-kit-steps, .agent-kit-trust-grid { grid-template-columns: 1fr; }
  .agent-kit-prompts { grid-template-columns: 1fr; }
  .agent-kit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 760px) {
  .agent-kit-hero { min-height: auto; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 40px; }
  .agent-kit-opening { grid-template-columns: 1fr; gap: 18px; }
  .agent-kit-copy { text-align: center; }
  .agent-kit-copy .eyebrow, .agent-kit-copy .cta-row { justify-content: center; }
  .agent-kit-copy .eyebrow { font-size: 15px; margin-bottom: 19px; }
  .agent-kit-name { font-size: clamp(78px, 20vw, 106px); }
  .agent-kit-tagline { font-size: 33px; margin-top: 21px; }
  .agent-kit-copy .lead { margin: 20px auto 0; max-width: 420px; }
  .agent-kit-copy .cta-row { margin-top: 25px; }
  .agent-kit-scene { height: 440px; width: min(420px, 100%); margin: 30px auto 25px; }
  .agent-kit-canvas { inset: -6% -16% -8%; height: 114%; }
  .agent-kit-orbit-label { padding: 8px 10px; font-size: 11px; }
  .agent-kit-orbit-label strong { font-size: 13px; }
  .agent-kit-fleet-label { right: 0; top: -5%; }
  .agent-kit-engine-label { left: 0; bottom: -8%; }
  .agent-kit-knowledge-label { top: -5%; }
  .agent-kit-benefits { grid-template-columns: 1fr; }
  .agent-kit-offer-grid, .agent-kit-pair { grid-template-columns: 1fr; }
  .agent-kit-pair { gap: 16px; }
  .agent-kit-prompts li { font-size: 16px; }
  .agent-kit-spec-list div { grid-template-columns: 1fr; gap: 4px; }
  .agent-kit-faq summary { padding-right: 40px; }
  .agent-kit-faq details p { padding-right: 0; }
  .agent-kit-tabs { display: flex; flex-wrap: nowrap; }
  .agent-kit-tabs button { padding: 0 9px; font-size: 13.5px; white-space: nowrap; }
  .agent-kit-products .wrap { display: block; }
  .agent-kit-product-links { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-kit-scene.is-playing .agent-kit-orbit-label { animation: none; }
  .agent-kit-faq summary::before, .agent-kit-faq summary::after { transition: none; }
}

/* FRA + Hub stays distinct through heavier type and a blue-tinted card, within the site palette.
   The dark brand blue keeps small text above WCAG AA contrast on white and the tint. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root { --plus-1: #ea580c; --plus-2: #d91f2a; --plus-ink: #c2310a; --plus-soft: #fff4ec; --plus-line: #f6d2bf; }
.agent-kit-plus-eyebrow { color: var(--plus-ink); }
.agent-kit-plus-eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--plus-1), var(--plus-2)); vertical-align: middle; }
.agent-kit-plus-mark { display: inline-block; margin-left: .26em; font-weight: 800; color: var(--plus-2); background: linear-gradient(135deg, var(--plus-1), var(--plus-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(234, 88, 12, .28)); }
.agent-kit-plus-word { font-weight: 700; color: var(--plus-ink); letter-spacing: -.005em; }
.agent-kit-offer-plus { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--plus-soft), var(--bg) 70%); box-shadow: inset 0 0 0 1px var(--plus-line); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.agent-kit-offer-plus::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--plus-1), var(--plus-2)); }
.agent-kit-offer-plus:hover { box-shadow: inset 0 0 0 1px var(--plus-1), 0 14px 38px -18px rgba(234, 88, 12, .45); transform: translateY(-2px); }
.agent-kit-offer-plus .agent-kit-ticks li::before { border-color: var(--plus-2); }
.agent-kit-offer-plus .agent-kit-plus-link { color: var(--plus-ink); font-weight: 600; }
.agent-kit-plus-block { border-radius: var(--radius-m, 22px); background: linear-gradient(145deg, var(--plus-soft), var(--bg) 75%); box-shadow: inset 0 0 0 1px var(--plus-line); }
.agent-kit-plus-block h3 .agent-kit-plus-mark { font-size: 1.15em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .agent-kit-offer-plus, .agent-kit-offer-plus:hover { transition: none; transform: none; } }
@media (forced-colors: active) { .agent-kit-plus-mark { -webkit-text-fill-color: CanvasText; background: none; color: CanvasText; filter: none; } .agent-kit-offer-plus::before { background: Highlight; } }
.agent-kit-plus-block { max-width: 860px; margin-left: auto; margin-right: auto; padding: clamp(26px, 4vw, 46px) clamp(22px, 4vw, 52px); }
.agent-kit-plus-block p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.agent-kit-offer h2 .agent-kit-plus-mark { font-size: 1.22em; line-height: .7; vertical-align: -.04em; }

/* Refine the package pair as one set, retaining the blue-tinted FRA + Hub distinction. */
.agent-kit-offer { display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 28px -20px #17203326; }
.agent-kit-offer-primary { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-blue), 0 8px 28px -20px #245eb526; }
.agent-kit-offer-primary::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); }
.agent-kit-offer .btn, .agent-kit-offer .link-more { align-self: flex-start; margin-top: auto; }
.agent-kit-offer .link-more { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 0; }
.agent-kit-offer-plus { box-shadow: inset 0 0 0 1px var(--plus-line), 0 8px 28px -20px rgba(234, 88, 12, .16); }
.agent-kit-offer-primary:hover, .agent-kit-offer-primary:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 14px 38px -24px #245eb559; }
.agent-kit-offer-plus:focus-within { box-shadow: inset 0 0 0 1px var(--plus-1), 0 14px 38px -18px rgba(234, 88, 12, .45); }

/* Give explanatory callouts the same readable paragraph rhythm. */
.agent-kit-plus-block p, .agent-kit-connect .agent-kit-asks p { max-width: 62ch; margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.agent-kit-connect .agent-kit-asks p + p { margin-top: 12px; }

/* Keep the product name together when the callout heading wraps. */
.agent-kit-plus-name { white-space: nowrap; }
.agent-kit-plus-block h3 { text-wrap: balance; }

/* Avoid stacking two full section gaps across the white offers-to-features transition. */
.agent-kit-offers { padding-bottom: clamp(28px, 4vw, 48px); }

/* Keep the expanded stack in the existing warm, small-text AgentKit+ ink. */
.agent-kit-stats .agent-kit-stats-plus dt, .agent-kit-stats .agent-kit-stats-plus dd { color: var(--plus-ink); }

/* Separate the release status from its supporting package details. */
.agent-kit-download { align-items: start; gap: clamp(28px, 4vw, 48px); }
.agent-kit-download-meta { max-width: 45ch; line-height: 1.6; }
.agent-kit-download-side { border-left: 1px solid var(--line-blue); padding-left: clamp(28px, 3vw, 40px); line-height: 1.6; gap: 14px; }
.agent-kit-download .btn:disabled { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--line-blue); cursor: default; }
@media (max-width: 860px) {
  .agent-kit-download-side { border-left: 0; border-top: 1px solid var(--line-blue); padding-left: 0; padding-top: 24px; }
  .agent-kit-download-meta { max-width: none; }
}

/* Keep trust icons beside their explanations in the stacked card layout. */
@media (max-width: 860px) {
  .agent-kit-trust-grid article { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; align-content: start; }
  .agent-kit-trust-grid img { grid-row: 1 / 3; width: 44px; height: 44px; margin-bottom: 0; }
  .agent-kit-trust-grid h3 { margin-bottom: 0; }
  .agent-kit-trust-grid p { grid-column: 2; }
}
@media (max-width: 480px) {
  .agent-kit-trust-grid article { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .agent-kit-trust-grid img { width: 36px; height: 36px; }
  .agent-kit-trust-grid h3 { font-size: 20px; }
}

/* Give the closing navigation evenly aligned columns and generous targets. */
.agent-kit-products .wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 32px; }
.agent-kit-products h2 { padding-top: 10px; }
.agent-kit-product-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; }
.agent-kit-product-links a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 8px; line-height: 1.4; }
.agent-kit-product-links a:hover, .agent-kit-product-links a:focus-visible { background: var(--accent-soft); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.home .foot-cols { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
@media (max-width: 1020px) {
  .agent-kit-products .wrap { grid-template-columns: 1fr; gap: 20px; }
  .agent-kit-products h2 { padding-top: 0; }
  .home .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .agent-kit-products .wrap { display: grid; }
  .agent-kit-product-links { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
}

/* Align the two stack descriptions row by row when the cards sit together. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .agent-kit-offer-grid { row-gap: 0; }
    .agent-kit-offer { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
    .agent-kit-offer .btn, .agent-kit-offer .link-more { justify-self: start; }
  }
}

/* Give component cards shared header/list rows and a deliberate tablet final row. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .agent-kit-pair { row-gap: 0; }
    .agent-kit-pair article { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
    .agent-kit-pair .agent-kit-ticks { align-self: start; }
    .agent-kit-pair .link-more { align-self: end; justify-self: start; }
  }
}
@media (min-width: 761px) and (max-width: 860px) {
  .agent-kit-pair article:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-content: start; }
  .agent-kit-pair article:last-child img, .agent-kit-pair article:last-child .agent-kit-pair-version, .agent-kit-pair article:last-child h3 { grid-column: 1; }
  .agent-kit-pair article:last-child .agent-kit-ticks { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; }
}

/* Give mobile examples a full reading line, followed by their component badge. */
@media (max-width: 480px) {
  .agent-kit-prompts li { flex-direction: column; gap: 12px; }
  .agent-kit-prompts q { align-self: stretch; }
  .agent-kit-prompts span { margin-top: 0; }
}

/* Keep benefit paragraphs on a shared reading line in the four-card layout. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .agent-kit-benefits { row-gap: 0; }
    .agent-kit-benefits article { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
    .agent-kit-benefits p { align-self: start; }
  }
}

/* Separate mobile release facts into quiet rows with a clear pending status. */
@media (max-width: 480px) {
  .agent-kit-download-side { gap: 0; }
  .agent-kit-download-side > p { padding: 12px 0; }
  .agent-kit-download-side > p:first-child { padding-top: 0; }
  .agent-kit-download-side > p + p { border-top: 1px solid var(--line-blue); }
  .agent-kit-download-side > p:last-child { padding-bottom: 0; }
  .agent-kit-download-side .agent-kit-sha code { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }
}

/* Fit the renamed Extended label in the existing package cards. */
.agent-kit-offer h2 .agent-kit-plus-mark { font-size: inherit; line-height: inherit; vertical-align: baseline; }
.agent-kit-plus-name { white-space: normal; }

/* The same product diagram is available before scripts load and without WebGL. */
.agent-kit-canvas { inset: 0; width: 100%; height: 100%; }
.agent-kit-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.agent-kit-scene[data-animation="live"] .agent-kit-visual,
.agent-kit-scene[data-animation="paused"] .agent-kit-visual,
.agent-kit-scene[data-animation="still"] .agent-kit-visual { opacity: 0; }

/* Hillclimb step 1 (2026-10-27): each label sits under its own module.
   The scene keeps the artwork's 8:9 shape, so the captions line up with the tiles at every width. */
.agent-kit-scene { height: auto; aspect-ratio: 800 / 710; width: min(100%, 560px); justify-self: center; }
.agent-kit-orbit-label { top: 90.6%; bottom: auto; left: auto; right: auto; width: 31%; transform: translateX(-50%);
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none;
  text-align: center; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.agent-kit-orbit-label strong { margin-bottom: 1px; font-size: 15px; color: var(--ink); }
.agent-kit-knowledge-label { left: 20.6%; top: 93%; }
.agent-kit-fleet-label { left: 50%; top: 93%; }
.agent-kit-engine-label { left: 79.4%; top: 93%; }
.agent-kit-motion { bottom: -34px; right: 50%; transform: translateX(50%); }
@media (max-width: 1000px) {
  .agent-kit-scene { height: auto; }
  .agent-kit-knowledge-label { left: 20.6%; } .agent-kit-fleet-label { left: 50%; } .agent-kit-engine-label { left: 79.4%; }
}
@media (max-width: 760px) {
  .agent-kit-scene { height: auto; width: min(420px, 100%); margin: 24px auto 46px; }
  .agent-kit-orbit-label { padding: 0; font-size: 12px; }
  .agent-kit-orbit-label strong { font-size: 13.5px; }
  .agent-kit-knowledge-label, .agent-kit-fleet-label, .agent-kit-engine-label { top: 93%; }
  .agent-kit-scene { margin-bottom: 62px; }
}

/* Hillclimb step 2: the three routes read as one local connection into the agent. */
.agent-kit-mcp-label { position: absolute; z-index: 2; left: calc(50% + 14px); top: 42.3%; transform: translateY(-50%); padding: 3px 11px;
  border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-blue), 0 6px 14px -8px rgba(16, 34, 74, .35);
  white-space: nowrap; font-size: 12.5px; line-height: 1.45; font-weight: 600; letter-spacing: -.008em; color: var(--accent-ink); }
@media (max-width: 760px) { .agent-kit-mcp-label { left: calc(50% + 10px); padding: 2px 8px; font-size: 11px; } }

/* Hillclimb step 7 (2026-10-27): the agent is a terminal window. It sits on the dock's connection,
   joined by the connector at its bottom edge, and shows the three tool calls the diagram carries. */
.agent-kit-visual-col { position: relative; width: min(100%, 560px); justify-self: center; container-type: inline-size; }
.agent-kit-visual-col .agent-kit-scene { width: 100%; aspect-ratio: 800 / 444; justify-self: auto; }
.agent-kit-term { position: relative; z-index: 1; width: 87%; margin: 0 auto; border-radius: 16px; text-align: left;
  color: #c9d3e6; background: linear-gradient(180deg, #141e35, #0c1426);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .07),
    0 44px 80px -36px rgba(16, 34, 74, .62), 0 18px 34px -20px rgba(16, 34, 74, .45);
  font: 400 clamp(11.5px, 2.4cqw, 13.5px)/1.5 var(--mono); letter-spacing: 0; }
.agent-kit-term::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(141, 183, 255, 0), #8db7ff, rgba(141, 183, 255, 0)); opacity: .55; }
.agent-kit-term-bar { position: relative; display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.agent-kit-term-lights { display: flex; gap: 7px; }
.agent-kit-term-lights i { width: 10px; height: 10px; border-radius: 50%; background: #2b3652; }
.agent-kit-term-title { position: absolute; left: 50%; transform: translateX(-50%); font: 550 12.5px/1 var(--font); color: #95a1b8; white-space: nowrap; }
.agent-kit-term-body { padding: 15px 18px 17px; }
.agent-kit-term-ask { display: flex; gap: 10px; color: #eef2f9; text-wrap: pretty; }
.agent-kit-term-gt { flex: none; color: #8db7ff; font-weight: 600; }
.agent-kit-term-calls { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.agent-kit-term-call { --c: #8db7ff; display: grid; grid-template-columns: 11.5ch minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  padding: 5px 10px 5px 12px; border-radius: 9px; background: rgba(255, 255, 255, .04); box-shadow: inset 2px 0 0 var(--c); }
.agent-kit-term-engine { --c: #6fd3e6; }
.agent-kit-term-knowledge { --c: #b9adff; }
.agent-kit-term-tool { color: var(--c); font-weight: 600; }
.agent-kit-term-what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-kit-term-ok { position: relative; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.agent-kit-term-ok::before { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 4.5px;
  border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.agent-kit-term-done { margin-top: 11px; color: #eef2f9; }
.agent-kit-term-done::before { content: '\2713'; margin-right: 9px; color: #7ee2a8; font-weight: 700; }
.agent-kit-term-cursor { display: inline-block; width: .55em; height: 1.1em; margin-left: 5px; vertical-align: -.2em; border-radius: 1px; background: #8db7ff; }
/* The connector where the terminal meets the connection: part of the window, so the whole dot shows on its edge. */
.agent-kit-port { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 15px; height: 15px; transform: translate(-50%, 50%); border-radius: 50%;
  background: #245eb5; box-shadow: 0 0 0 3.5px #fff, 0 3px 10px 3px rgba(16, 34, 74, .18); }
/* The drawing now starts at the connector, so the pill and captions move up with it. */
.agent-kit-visual-col .agent-kit-mcp-label { top: 7.73%; }
.agent-kit-visual-col .agent-kit-knowledge-label, .agent-kit-visual-col .agent-kit-fleet-label, .agent-kit-visual-col .agent-kit-engine-label { top: 88.74%; }
/* Pause/play lives in the terminal's title bar. */
.agent-kit-visual-col .agent-kit-motion { position: absolute; z-index: 3; top: 6px; right: calc(6.5% + 8px); bottom: auto; left: auto; transform: none;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #7f8ba3; font-size: 0; text-decoration: none; cursor: pointer; }
.agent-kit-visual-col .agent-kit-motion::before, .agent-kit-visual-col .agent-kit-motion::after { content: ''; position: absolute; top: 6px; width: 3px; height: 10px; border-radius: 1px; background: currentColor; }
.agent-kit-visual-col .agent-kit-motion::before { left: 7px; }
.agent-kit-visual-col .agent-kit-motion::after { left: 12px; }
.agent-kit-visual-col .agent-kit-motion[data-state="paused"]::before { left: 8px; top: 5.5px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.agent-kit-visual-col .agent-kit-motion[data-state="paused"]::after { display: none; }
.agent-kit-visual-col .agent-kit-motion:hover { color: #c9d3e6; background: rgba(255, 255, 255, .07); }
.agent-kit-visual-col .agent-kit-motion:focus-visible { outline: 2px solid #8db7ff; outline-offset: 1px; }
/* Entrance: the request is there at once; the three calls run, each is checked, then the result. */
@keyframes agent-kit-term-rise { from { opacity: 0; transform: translateY(7px); } }
@keyframes agent-kit-term-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes agent-kit-term-edge { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .55; } }
@keyframes agent-kit-term-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.agent-kit-term::after { animation: agent-kit-term-edge .9s var(--ease) .35s both; }
.agent-kit-term-call { animation: agent-kit-term-rise .38s var(--ease-out) both; }
.agent-kit-term-fleet { animation-delay: .55s; }
.agent-kit-term-engine { animation-delay: .9s; }
.agent-kit-term-knowledge { animation-delay: 1.25s; }
/* Each tick lands with its bead: the scene starts its first cycle when the fleet call appears (0.55s),
   and the beads take 0.56s to Fleet and 1.19s to ToolsEngine and Knowledge. */
@keyframes agent-kit-term-tick { 0% { opacity: 0; transform: rotate(-45deg) scale(.3); } 70% { opacity: 1; transform: rotate(-45deg) scale(1.2); } 100% { opacity: 1; transform: rotate(-45deg); } }
.agent-kit-term-ok::before { animation: agent-kit-term-tick .32s var(--spring) both; }
.agent-kit-term-fleet .agent-kit-term-ok::before { animation-delay: 1.11s; }
.agent-kit-term-engine .agent-kit-term-ok::before { animation-delay: 2.09s; }
.agent-kit-term-knowledge .agent-kit-term-ok::before { animation-delay: 2.44s; }
.agent-kit-term-done { animation: agent-kit-term-rise .38s var(--ease-out) 2.65s both; }
.agent-kit-term-cursor { animation: agent-kit-term-blink 1s steps(1) 3.05s 3 both; }
@media (max-width: 760px) {
  .agent-kit-visual-col { width: min(420px, 100%); margin: 24px auto 62px; }
  .agent-kit-visual-col .agent-kit-scene { width: 100%; margin: 0; }
  .agent-kit-term { width: 92%; border-radius: 14px; }
  .agent-kit-term-bar { border-radius: 14px 14px 0 0; }
  .agent-kit-term-body { padding: 13px 14px 15px; }
  .agent-kit-term-call { gap: 9px; padding: 5px 8px 5px 10px; }
  .agent-kit-visual-col .agent-kit-motion { right: calc(4% + 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-kit-term *, .agent-kit-term *::before, .agent-kit-term::after { animation: none !important; }
}

/* Hillclimb step 16 (2026-10-27): the label sits where the one connection splits, so it reads as that
   connection; the tools are single icons in their call colours, with captions closer and evenly wrapped. */
.agent-kit-visual-col .agent-kit-mcp-label { left: 50%; top: 17.79%; transform: translate(-50%, -50%); }
.agent-kit-visual-col .agent-kit-knowledge-label, .agent-kit-visual-col .agent-kit-fleet-label, .agent-kit-visual-col .agent-kit-engine-label { top: 81.6%; }
.agent-kit-orbit-label { text-wrap: balance; }
@media (max-width: 760px) { .agent-kit-visual-col .agent-kit-mcp-label { padding: 2px 9px; font-size: 10.5px; } }
/* Hillclimb step 17: "TE" in the logo's blue, so the name reads as TE + ToolSet at the title's tight spacing. */
.agent-kit-te { color: var(--accent); margin-right: .03em; }

/* Hillclimb step 18 (2026-10-27): the lower part. The dock is a tray that holds the tiles and their captions,
   and the reassurance line under the buttons becomes three checked facts. */
.agent-kit-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.agent-kit-note li { display: inline-flex; align-items: center; gap: 7px; }
.agent-kit-note li::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23245eb5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* Captions sit inside the tray, 12 px under their tiles (drawing y 800). */
.agent-kit-visual-col .agent-kit-knowledge-label, .agent-kit-visual-col .agent-kit-fleet-label, .agent-kit-visual-col .agent-kit-engine-label { top: 77.48%; }
/* The hero ends sooner on desktop, so the two plan cards show above the fold instead of an empty band. */
@media (min-width: 761px) { .agent-kit-hero { min-height: min(840px, 100svh); } }
/* Where the tray is too narrow for the descriptions it shows names only; on phones the checked facts centre like the rest of the hero. */
@media (max-width: 760px) { .agent-kit-note { justify-content: center; } }
/* A description fits under its tile on one line only while the picture column is at least ~525 px wide. */
@container (max-width: 530px) { .agent-kit-orbit-desc { display: none; } }
/* Hillclimb step 19: the pill takes its size from the picture's width, so both branches show beside it wherever the column is narrow. */
@container (max-width: 400px) { .agent-kit-visual-col .agent-kit-mcp-label { padding: 2px 9px; font-size: 10.5px; } }
/* Hillclimb step 21: where the copy column is too narrow for the three checked facts on one line (they need ~540 px),
   they stack as a short list instead of leaving one fact alone on a second line. */
@media (min-width: 761px) and (max-width: 1200px) { .agent-kit-note { flex-direction: column; align-items: flex-start; gap: 7px; } }
/* Hillclimb step 22: on tablets and small laptops the hero takes its content's height with even space above and below,
   instead of a fixed 840 px with ~130 px empty bands, so the plan cards follow sooner. */
@media (min-width: 761px) and (max-width: 1100px) { .agent-kit-hero { min-height: 0; padding-top: calc(var(--nav-h) + 84px); padding-bottom: 84px; } }
/* Hillclimb step 23: the pill sits in the picture column, above the terminal's shadow (inside the scene the shadow greyed it).
   Same place: the scene is the column's full width at 800:444, so the junction (17.79% down the scene) is 45.63cqw above the column's foot. */
.agent-kit-visual-col > .agent-kit-mcp-label { top: auto; bottom: 45.63cqw; transform: translate(-50%, 50%); }
/* Hillclimb step 24: the tool descriptions sit on the tray's floor, the hero's lowest text contrast (5.06:1); one step darker reads clearly. */
.agent-kit-orbit-desc { color: #525b6b; }
/* Hillclimb step 25: on phones the picture's 62 px foot was room for a pause control that now lives in the terminal's title bar;
   24 px keeps the plan cards close to the tray. */
@media (max-width: 760px) { .agent-kit-visual-col { margin-bottom: 24px; } }
/* Hillclimb step 27: the terminal's type grows with the column where it has room (12 px at 1024 instead of the 11.5 px floor). */
.agent-kit-term { font-size: clamp(11.5px, 2.75cqw, 13.5px); }
/* Hillclimb step 28: the checked facts are the smallest text beside the title (13 px); they take the descriptions' darker ink. */
.agent-kit-note { color: #525b6b; }
/* Hillclimb step 29: the terminal's drop shadow reaches less far, so the connection under it is not in a grey haze; the window still lifts. */
.agent-kit-term { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .07),
  0 30px 56px -30px rgba(16, 34, 74, .55), 0 14px 26px -16px rgba(16, 34, 74, .42); }
/* Hillclimb step 30: where the tray shows names only, each name is centred between its tile (drawing y 782) and the tray's floor edge (y 878):
   the midpoint y 830 is 84.23% down the scene, less half the name's line (15 px names: 20.25 px; phones, 13.5 px: 18.2 px). */
@container (max-width: 530px) { .agent-kit-visual-col .agent-kit-orbit-label { top: calc(84.23% - 10.1px); } }
@media (max-width: 760px) { @container (max-width: 530px) { .agent-kit-visual-col .agent-kit-orbit-label { top: calc(84.23% - 9.1px); } } }
/* Keep the launch film responsive within its TEAA + FRA + Hub introduction. */
.agent-kit-launch-film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 28px auto 0; border-radius: var(--radius-s); background: var(--bg); }

/* 2026-10-30: TEAA + FRA + Hub keeps its warm identity on its own download button. */
.btn-plus { background: var(--plus-soft); color: var(--plus-ink); box-shadow: inset 0 0 0 1px var(--plus-line); }
.btn-plus:hover { background: #ffe8d9; color: #a52a08; }
@media (forced-colors: active) { .btn-plus { box-shadow: none; border: 1px solid ButtonText; } }