/* ============================================================
   KIBO AI page preview (src/pages/kibo-ai-new.astro), loaded only on that
   page, after public/home/tokens.css and public/home/home.css (which give it
   the buttons, the hero backdrop, --kh-blue and --kh-sky).
   Brand colors: src/styles/tokens.css. Sections in page order; each group
   names its component in src/components/sections/kibo-ai-new/.
   Breakpoints: 1120, 980, 920, 880, 760, 640, 560.
   ============================================================ */

.kai-page {
  --kai-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kai-glow:
    radial-gradient(58% 68% at 14% 16%, rgba(17,85,204,.52) 0%, rgba(17,85,204,0) 62%),
    radial-gradient(46% 60% at 88% 10%, rgba(74,134,232,.38) 0%, rgba(74,134,232,0) 66%),
    radial-gradient(70% 78% at 70% 98%, rgba(17,85,204,.44) 0%, rgba(17,85,204,0) 60%);
  width: 100%;
  overflow-x: clip;
  color: var(--kibo-dark-grey);
}
.kai-page [hidden] { display: none !important; }
.kai-page img { max-width: 100%; }
.kai-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.kai-sec { padding: 104px 0; position: relative; }
.kai-sec--dark { background: var(--kibo-dark-grey); color: var(--kibo-white); }
.kai-sec--soft { background: var(--kibo-light-grey); }
@media (max-width: 880px) {
  .kai-wrap { padding: 0 20px; }
  .kai-sec { padding: 64px 0; }
}

/* Scroll reveal: transform only, so content shows even if the script fails
   (kai-reveal-on is removed after 4s unless the page script took over). */
.kai-reveal-on .kai-reveal { transform: translateY(20px); transition: transform .65s var(--kai-ease); }
.kai-reveal-on .kai-reveal.is-in { transform: none; }
.kai-reveal--d1 { transition-delay: .08s !important; }
.kai-reveal--d2 { transition-delay: .16s !important; }
.kai-reveal--d3 { transition-delay: .26s !important; }
.kai-reveal--d4 { transition-delay: .36s !important; }
@media (prefers-reduced-motion: reduce) { .kai-reveal-on .kai-reveal { transform: none; transition: none; } }

/* Type */
.kai-h1 { margin: 0; font-family: var(--font-base); font-weight: 600; font-size: clamp(38px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.02em; color: var(--kibo-white); }
.kai-h2 { margin: 0; color: inherit; font-family: var(--font-base); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.kai-h2 strong { font-weight: 600; }
.kai-h2--light { font-weight: 400; }
.kai-lede { margin: 0; font-size: 18px; line-height: 1.42; color: var(--kibo-black); text-wrap: balance; }
.kai-lede strong { font-weight: 600; }
.kai-sec--dark .kai-lede { color: var(--kibo-white); }
.kai-page em { font-style: normal; color: var(--kibo-link); }
.kai-hero em, .kai-sec--dark em { color: var(--kibo-yellow); }
.kai-head { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.kai-head--center { margin: 0 auto; text-align: center; align-items: center; }

/* Buttons: the homepage's .kh-psec-btn (home.css), at the design's 48px */
.kai-page .kh-psec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 26px; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; }
.kai-page .kh-psec-btn svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kai-page .kh-psec-btn .kai-btn__play { fill: currentColor; stroke: none; }
.kai-page .kh-psec-btn:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: 3px; }

/* ==== Hero (KaiHero.astro); its animated backdrop is styled in home.css ==== */
.kai-hero { color: var(--kibo-white); }
.kai-hero__in { position: relative; z-index: 2; padding-top: 92px; }
.kai-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 56px; align-items: center; }
.kai-hero__copy { display: flex; flex-direction: column; gap: 26px; }
.kai-hero__sub { margin: 0; font-size: 19px; line-height: 1.35; max-width: 660px; color: var(--kibo-white); text-wrap: balance; }
.kai-video { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.kai-video__play { width: 72px; height: 72px; border-radius: 50%; background: var(--kibo-yellow); display: flex; align-items: center; justify-content: center; }
.kai-video__play svg { fill: var(--kibo-dark-grey); margin-left: 3px; }
.kai-video__label { font-size: 14px; font-weight: 500; }
.kai-stats { position: relative; margin: 36px 0 0; padding: 0 0 80px; list-style: none; display: flex; flex-wrap: wrap; gap: 56px; }
.kai-stat { display: flex; align-items: center; gap: 12px; }
.kai-stat__arrow { display: block; }
.kai-stat__arrow--down { transform: rotate(180deg); }
.kai-stat__arrow stop { stop-color: var(--kibo-link); }
.kai-stat__body { display: flex; flex-direction: column; gap: 2px; }
.kai-stat__v { font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.kai-stat__l { font-size: 17px; line-height: 1.4; white-space: nowrap; }
@media (max-width: 880px) {
  .kai-hero__grid { gap: 32px; }
  .kai-stats { gap: 32px; padding-bottom: 64px; }
}

/* ==== Five functions (KaiFunctions.astro) ==== */
.kai-fx { background: var(--kibo-light-grey); padding-top: 72px; padding-bottom: 40px; z-index: 2; }
.kai-fx .kai-head { max-width: 900px; }
.kai-fx__flank { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "left graphic right"; align-items: center; column-gap: 8px; margin-top: 8px; }
.kai-fx__graphic { grid-area: graphic; justify-self: center; position: relative; }
.kai-fx__note { grid-area: left; justify-self: end; align-self: start; max-width: 175px; margin: 44px 0 0; position: relative; transform: translateX(56px); font-size: 14px; line-height: 1.35; text-align: center; color: var(--kibo-black); text-wrap: pretty; }
.kai-fx__note--right { grid-area: right; justify-self: start; transform: translateX(-56px); }
.kai-fx__note-t { display: block; font-weight: 600; font-size: 20px; }
.kai-hxc { position: relative; width: min(660px, 64vw); margin: 0 auto; padding: 10px 0; }
.kai-hxc__stage { position: relative; width: 100%; aspect-ratio: 622 / 682; }
.kai-hxc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.kai-hxc__hex { stroke: var(--kibo-link); stroke-width: 1.5; fill: transparent; cursor: pointer; transition: fill .2s var(--kai-ease); }
.kai-hxc__hex:hover, .kai-hxc__hex.is-hot { fill: var(--kibo-yellow); }
.kai-hxc__uni-g { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: transform .28s var(--kai-ease), filter .28s var(--kai-ease); }
.kai-hxc__uni-g:hover, .kai-hxc__uni-g:focus-visible { transform: scale(1.045); filter: drop-shadow(0 10px 20px rgba(12,102,228,.38)); }
.kai-hxc__uni-g:focus-visible .kai-hxc__uni { stroke: var(--kibo-yellow); stroke-width: 3; }
.kai-hxc__uni-g:active { transform: scale(1.01); }
.kai-hxc__uni { stroke: var(--kibo-link); stroke-width: 1.5; stroke-linejoin: round; fill: var(--kibo-link); transition: filter .2s var(--kai-ease); }
.kai-hxc__uni-g:hover .kai-hxc__uni { filter: brightness(1.1); }
.kai-hxc__uni-icon { pointer-events: none; }
.kai-hxc__uni-t { font-family: var(--font-base); font-weight: 400; font-size: 12px; fill: var(--kibo-white); }
.kai-hxc__cell { display: contents; }
.kai-hxc__txt { position: absolute; width: 29%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 3; }
.kai-hxc__title { margin: 0 0 5px; font-family: var(--font-base); font-weight: 600; font-size: clamp(16px, 1.9vw, 23px); line-height: 1; color: var(--kibo-dark-grey); }
.kai-hxc__desc { margin: 0; font-weight: 400; font-size: clamp(10px, 1.1vw, 13px); line-height: 1.3; color: var(--kibo-dark-grey); text-wrap: pretty; }
.kai-plus { position: absolute; transform: translate(-50%, -50%); z-index: 4; width: 26px; height: 26px; padding: 0; cursor: pointer; border: 0; border-radius: 50%; background: var(--kibo-yellow); color: var(--kibo-link); font-family: var(--font-base); font-size: 17px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s var(--kai-ease), box-shadow .2s var(--kai-ease); }
.kai-plus:hover { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 5px rgba(255,206,1,.28); }
.kai-plus:focus-visible { outline: 2px solid var(--kibo-link); outline-offset: 2px; }
.kai-hxc__cell.is-hot .kai-plus { background: var(--kibo-link); color: var(--kibo-yellow); }
.kai-hxc__fig { position: absolute; z-index: 2; height: auto; cursor: pointer; filter: drop-shadow(0 10px 16px rgba(46,52,62,.18)); }
.kai-hxc__cell--engage .kai-hxc__txt { left: 20.1%; top: 34.6%; }
.kai-hxc__cell--engage .kai-plus { left: 19.9%; top: 46%; }
.kai-hxc__cell--engage .kai-hxc__fig { left: 11.1%; top: 0%; width: 18%; }
.kai-hxc__cell--configure .kai-hxc__txt { left: 79.9%; top: 34.6%; }
.kai-hxc__cell--configure .kai-plus { left: 80.1%; top: 46%; }
.kai-hxc__cell--configure .kai-hxc__fig { left: 70.3%; top: .9%; width: 15.4%; }
.kai-hxc__cell--optimize .kai-hxc__txt { left: 50%; top: 50.4%; }
.kai-hxc__cell--optimize .kai-plus { left: 49.5%; top: 61.8%; }
.kai-hxc__cell--optimize .kai-hxc__fig { left: 42.3%; top: 15.4%; width: 15.8%; }
.kai-hxc__cell--analyze .kai-plus { left: 19.9%; top: 54.5%; }
.kai-hxc__cell--analyze .kai-hxc__txt { left: 20.1%; top: 66.1%; }
.kai-hxc__cell--analyze .kai-hxc__fig { left: 14.1%; top: 74.5%; width: 14.3%; }
.kai-hxc__cell--explain .kai-plus { left: 80.1%; top: 54.5%; }
.kai-hxc__cell--explain .kai-hxc__txt { left: 79.9%; top: 66.1%; }
.kai-hxc__cell--explain .kai-hxc__fig { left: 74.3%; top: 73.6%; width: 14.6%; }
.kai-byom { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; text-align: center; pointer-events: none; }
.kai-byom__title { margin: 0; font-weight: 600; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.1; color: var(--kibo-dark-grey); }
.kai-byom__logos { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kai-byom__logos img { display: block; width: auto; height: 17px; max-width: 150px; object-fit: contain; filter: brightness(0); }
.kai-byom__logos .kai-byom__logo--0 { height: 15px; }
.kai-byom__logos .kai-byom__logo--1 { height: 10px; max-width: 88px; }
.kai-beam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; animation: kai-beam-fade 2.9s ease forwards; }
.kai-beam .c0 { fill: var(--kibo-yellow); stroke: var(--kibo-yellow); }
.kai-beam .c1 { fill: var(--kh-blue); stroke: var(--kh-blue); }
.kai-beam .c2 { fill: var(--kh-sky); stroke: var(--kh-sky); }
.kai-beam .c3 { fill: var(--kibo-white); stroke: var(--kibo-white); }
@keyframes kai-beam-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Phones: the honeycomb becomes a list */
.kai-fxm { display: none; margin: 32px 0 0; padding: 0; list-style: none; flex-direction: column; gap: 12px; }
.kai-fxm__byom { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.kai-fxm__byom .kai-byom__logos img { height: 20px; }
.kai-fxm__byom .kai-byom__logos .kai-byom__logo--0 { height: 18px; }
.kai-fxm__byom .kai-byom__logos .kai-byom__logo--1 { height: 12px; }
.kai-fxm__item { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--kibo-link); border-radius: 12px; background: var(--kibo-white); }
.kai-fxm__item img { width: 64px; height: 84px; object-fit: contain; }
.kai-fxm__item .kai-hxc__title { font-size: 19px; }
.kai-fxm__item .kai-hxc__desc { font-size: 14px; }
.kai-fxm__item .kai-plus { position: static; transform: none; }
.kai-fxm__item .kai-plus:hover { transform: scale(1.12); }
@media (max-width: 1120px) {
  .kai-fx__flank { grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "graphic graphic"; column-gap: 56px; }
  .kai-fx__note, .kai-fx__note--right { justify-self: center; align-self: auto; margin-top: 0; transform: none; max-width: 240px; }
}
@media (max-width: 640px) {
  .kai-fx__flank { grid-template-columns: 1fr; grid-template-areas: "left" "right"; row-gap: 16px; margin-top: 24px; }
  .kai-fx__graphic { display: none; }
  .kai-fxm { display: flex; }
}

/* Function pop-up (a <dialog>) */
.kai-modal { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100% - 48px); overflow: auto; width: calc(100% - 48px); max-width: 520px; padding: 28px; border: 0; border-radius: 24px; background: var(--kibo-dark-grey); color: var(--kibo-white); box-shadow: 0 40px 90px rgba(0,0,0,.35); }
.kai-modal[open] { animation: kai-modal-in .28s var(--kai-ease); }
.kai-modal::backdrop { background: rgba(46,52,62,.55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.kai-modal__close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 10px; border: 2px solid rgba(255,255,255,.5); background: transparent; color: var(--kibo-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s; }
.kai-modal__close:hover, .kai-modal__close:focus-visible { background: var(--kibo-white); color: var(--kibo-dark-grey); }
.kai-modal__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kai-modal__title { margin: 0 0 22px; font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--kibo-white); }
.kai-modal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kai-modal__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; line-height: 1.25; text-wrap: balance; }
.kai-modal__list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--kibo-yellow); }
@keyframes kai-modal-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .kai-modal { padding: 26px 18px; } .kai-modal__title { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .kai-modal[open] { animation: none; } }

/* ==== Agent rows (KaiAgents.astro, KaiAgentArt.astro) ==== */
.kai-agx { background-color: var(--kibo-dark-grey); background-image: var(--kai-glow); color: var(--kibo-white); overflow: hidden; }
.kai-agx__rows { display: flex; flex-direction: column; gap: 88px; }
.kai-agx__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.kai-agx__row--flip .kai-agx__art { order: 2; }
.kai-agx__art { min-width: 0; border: 1.5px solid var(--kh-blue); border-radius: 5px; padding: 32px 28px; }
.kai-agx__copy { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kai-agx__h { margin: 0; font-weight: 600; font-size: 27px; line-height: 1.14; letter-spacing: -.02em; color: var(--kibo-white); }
.kai-agx__p { margin: 0; font-weight: 500; font-size: 18px; line-height: 1.55; text-wrap: balance; }
.kai-agx__list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.kai-agx__list li { position: relative; padding-left: 22px; font-weight: 500; font-size: 18px; line-height: 1.5; text-wrap: balance; }
.kai-agx__list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1.5px; background: var(--kibo-yellow); }
.kai-agx__list strong { font-weight: 600; }
@media (max-width: 880px) {
  .kai-agx__rows { gap: 64px; }
  .kai-agx__row { grid-template-columns: 1fr; gap: 28px; }
  .kai-agx__row--flip .kai-agx__art { order: 0; }
  .kai-agx__art { padding: 20px 16px; }
  .kai-agx__h { font-size: 24px; }
  .kai-agx__p, .kai-agx__list li { font-size: 16px; }
}
/* diagram */
.kai-art { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; font-family: var(--font-base); }
.kai-art__g { fill: none; stroke: var(--kibo-white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kai-art__dim { stroke: rgba(255,255,255,.35); stroke-dasharray: 4 4; }
.kai-art__s50 { stroke: rgba(255,255,255,.5); }
.kai-art__sy { stroke: var(--kibo-yellow); }
.kai-art__fy { fill: var(--kibo-yellow); stroke: var(--kibo-yellow); }
.kai-art__fy08 { fill: rgba(255,206,1,.08); stroke: none; }
.kai-art__fw12 { fill: rgba(255,255,255,.12); }
.kai-art__fw05 { fill: rgba(255,255,255,.05); }
.kai-art__dash { stroke-dasharray: 5 4; }
.kai-art__tick { stroke: var(--kibo-dark-grey); stroke-width: 1.6; }
.kai-art text { fill: var(--kibo-white); stroke: none; font-weight: 500; }
.kai-art .kai-art__ty { fill: var(--kibo-yellow); }
.kai-art .kai-art__td { fill: var(--kibo-dark-grey); }
.kai-art .kai-art__tb { font-weight: 600; }
.kai-art .kai-art__tr { font-weight: 400; }
.kai-art .kai-art__tm { opacity: .8; }
.kai-art__cube { stroke-width: .7; stroke-opacity: .9; stroke-linejoin: round; }
.kai-art__cube--y { fill: var(--kibo-yellow); stroke: var(--kibo-yellow); }
.kai-art__cube--w { fill: var(--kibo-white); stroke: var(--kibo-white); }
.kai-art__cube--b { fill: var(--kh-sky); stroke: var(--kh-sky); }
.kai-art__mv { offset-distance: 50%; offset-rotate: 0deg; }
.kai-art__mv--full { offset-distance: 4%; }
.kai-agx__art:hover .kai-art__mv { animation: kai-mv 3.2s linear infinite; }
.kai-agx__art:hover .kai-art__mv--full { animation: kai-mv-full 4.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes kai-mv { 0% { offset-distance: 50%; opacity: 1; } 46% { offset-distance: 96%; opacity: 1; } 50% { offset-distance: 100%; opacity: 0; } 50.01% { offset-distance: 0%; opacity: 0; } 54% { offset-distance: 4%; opacity: 1; } 100% { offset-distance: 50%; opacity: 1; } }
@keyframes kai-mv-full { 0% { offset-distance: 4%; opacity: 1; } 88% { offset-distance: 100%; opacity: 1; } 94% { offset-distance: 100%; opacity: 0; } 95% { offset-distance: 4%; opacity: 0; } 100% { offset-distance: 4%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kai-agx__art:hover .kai-art__mv, .kai-agx__art:hover .kai-art__mv--full { animation: none; } }

/* ==== Agent Explorer (KaiExplorer.astro). Its greys are the dark grey
   darkened with black at a set strength. ==== */
.kai-ax { background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), var(--kibo-dark-grey); overflow: hidden; z-index: 1; }
.kai-ax::before { content: ""; position: absolute; top: -25%; left: 50%; width: 1000px; height: 1000px; transform: translateX(-50%); background: radial-gradient(circle, rgba(12,102,228,.22), transparent 62%); pointer-events: none; }
.kai-ax__head { position: relative; text-align: center; margin-bottom: 42px; }
.kai-ax__title { margin: 0; font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.015em; color: var(--kibo-white); }
.kai-ax__title em { color: var(--kh-sky); }
.kai-ax__dot { display: inline-block; vertical-align: middle; width: 8px; height: 8px; margin: 0 12px; border-radius: 50%; background: var(--kibo-yellow); animation: kai-pulse 1.9s infinite; }
@keyframes kai-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,206,1,.5); } 70% { box-shadow: 0 0 0 11px rgba(255,206,1,0); } 100% { box-shadow: 0 0 0 0 rgba(255,206,1,0); } }
.kai-ax__console { position: relative; display: grid; grid-template-columns: 214px 1fr; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: var(--kibo-dark-grey); overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.42); color: var(--kibo-white); }
.kai-ax__rail { display: flex; flex-direction: column; justify-content: center; padding: 18px 14px; gap: 4px; background: rgba(0,0,0,.17); border-right: 1px solid rgba(255,255,255,.08); }
.kai-ax__fn { display: flex; align-items: center; gap: 11px; padding: 14px; border: 0; background: none; color: rgba(255,255,255,.6); font-family: var(--font-base); font-weight: 500; font-size: 16px; text-align: left; cursor: pointer; border-radius: 11px; transition: color .2s var(--kai-ease), background .2s var(--kai-ease); }
.kai-ax__fn:hover { color: var(--kibo-white); background: rgba(255,255,255,.05); }
.kai-ax__bar { width: 2px; height: 17px; border-radius: 2px; background: transparent; flex: none; transition: background .22s var(--kai-ease); }
.kai-ax__fn[aria-pressed="true"] { color: var(--kibo-white); background: var(--kibo-link); }
.kai-ax__fn[aria-pressed="true"] .kai-ax__bar { background: var(--kibo-yellow); }
.kai-ax button:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: 2px; }
.kai-ax__stage { padding: 24px 28px 28px; min-width: 0; }
.kai-ax__personas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.kai-ax__persona { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 13px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.17); text-align: left; cursor: pointer; font-family: var(--font-base); transition: border-color .2s var(--kai-ease), background .2s var(--kai-ease), transform .2s var(--kai-ease); }
.kai-ax__persona:hover { border-color: rgba(74,134,232,.6); transform: translateY(-3px); }
.kai-ax__persona[aria-pressed="true"] { border-color: transparent; background: var(--kibo-link); box-shadow: 0 14px 34px rgba(12,102,228,.3); }
.kai-ax__pname { font-weight: 600; font-size: 16px; line-height: 1.1; color: var(--kibo-white); }
.kai-ax__plead { font-size: 13px; line-height: 1.25; color: rgba(255,255,255,.7); text-wrap: balance; }
.kai-ax__persona[aria-pressed="true"] .kai-ax__plead { color: var(--kibo-white); }
.kai-ax__line { display: block; }
.kai-ax__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; }
.kai-ax__cmds { min-width: 0; }
.kai-ax__cmd-list { display: flex; flex-direction: column; gap: 9px; }
.kai-ax__cmd { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.17); color: rgba(255,255,255,.82); font-family: var(--font-base); font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .18s var(--kai-ease), background .18s var(--kai-ease), transform .18s var(--kai-ease); }
.kai-ax__cmd:hover { border-color: rgba(74,134,232,.6); transform: translateX(3px); }
.kai-ax__cmd[aria-pressed="true"] { border-color: var(--kibo-yellow); background: rgba(255,206,1,.08); color: var(--kibo-white); }
.kai-ax__cmd-t { text-wrap: balance; }
.kai-ax__arrow { flex: none; margin-left: auto; align-self: center; color: var(--kibo-yellow); opacity: .55; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s var(--kai-ease), transform .18s var(--kai-ease); }
.kai-ax__cmd:hover .kai-ax__arrow, .kai-ax__cmd[aria-pressed="true"] .kai-ax__arrow { opacity: 1; }
.kai-ax__cmd:hover .kai-ax__arrow { transform: translateX(2px); }
.kai-ax__bw { display: inline-block; white-space: pre; opacity: 0; transform: translateY(6px); animation: kai-bw-in .42s var(--kai-ease) both; }
@keyframes kai-bw-in { to { opacity: 1; transform: none; } }
.kai-ax__steps { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.kai-ax__step { display: flex; align-items: center; gap: 8px; margin-right: 22px; color: rgba(255,255,255,.4); font-size: 12.5px; font-weight: 500; transition: color .25s var(--kai-ease); animation: kai-build .42s var(--kai-ease) var(--kai-delay, 0s) both; }
.kai-ax__node { width: 9px; height: 9px; border-radius: 50%; background: var(--kh-sky); flex: none; transition: background .25s var(--kai-ease), box-shadow .25s var(--kai-ease); }
.kai-ax__step.is-on { color: var(--kibo-white); }
.kai-ax__step.is-on .kai-ax__node { background: var(--kibo-yellow); box-shadow: 0 0 0 4px rgba(255,206,1,.2); }
@keyframes kai-build { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kai-ax__out { min-width: 0; }
.kai-ax__screen { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px; min-height: 320px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.kai-ax__idle { display: flex; align-items: center; gap: 3px; margin: 0; color: rgba(255,255,255,.5); font-size: 15px; }
.kai-ax__cursor { display: inline-block; width: 2px; height: 17px; background: var(--kibo-yellow); animation: kai-blink 1s steps(1) infinite; }
@keyframes kai-blink { 50% { opacity: 0; } }
.kai-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.kai-msg--user { justify-content: flex-end; }
.kai-msg__icon { flex-shrink: 0; width: 26px; height: 26px; margin-top: 2px; object-fit: contain; }
.kai-msg__b { max-width: 82%; padding: 11px 15px; border-radius: 14px; font-size: 15px; line-height: 1.45; background: rgba(255,255,255,.08); color: var(--kibo-white); animation: kai-fade .26s var(--kai-ease); }
.kai-msg--user .kai-msg__b { background: var(--kibo-yellow); color: var(--kibo-dark-grey); font-weight: 500; border-bottom-right-radius: 4px; }
.kai-msg--agent .kai-msg__b { border-bottom-left-radius: 4px; }
.kai-msg.is-done .kai-msg__b { background: rgba(255,206,1,.16); box-shadow: inset 0 0 0 1px rgba(255,206,1,.55); }
.kai-msg__act { display: block; margin-bottom: 5px; font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--kibo-yellow); }
.kai-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.kai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--kibo-yellow); animation: kai-bounce 1.2s infinite var(--ease-in-out); }
.kai-typing span:nth-child(2) { animation-delay: .15s; }
.kai-typing span:nth-child(3) { animation-delay: .3s; }
.kai-placed { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 11px 15px; border-radius: 12px; background: rgba(255,206,1,.12); color: var(--kibo-yellow); font-weight: 600; font-size: 14px; animation: kai-fade .3s var(--kai-ease); }
.kai-placed svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@keyframes kai-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 920px) {
  .kai-ax__console { grid-template-columns: 1fr; }
  .kai-ax__rail { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .kai-ax__personas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kai-ax__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kai-ax__stage { padding: 16px 14px 18px; }
  .kai-ax__rail { gap: 4px; padding: 10px 8px; }
  .kai-ax__fn { gap: 7px; padding: 8px 11px; font-size: 14px; border-radius: 9px; }
  .kai-ax__console { border-radius: 18px; }
  /* Phones: roles are compact one-line buttons (name only) in a 2-column grid, so the console stays short */
  .kai-ax__personas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .kai-ax__persona { padding: 8px 13px; border-radius: 12px; }
  .kai-ax__persona:hover { transform: none; }
  .kai-ax__pname { font-size: 14px; line-height: 1.2; }
  .kai-ax__pname .kai-ax__line { display: inline; }
  .kai-ax__pname .kai-ax__line + .kai-ax__line::before { content: " "; }
  .kai-ax__plead { display: none; }
  .kai-ax__grid { gap: 16px; }
  .kai-ax__cmd-list { gap: 8px; }
  .kai-ax__cmd { padding: 11px 13px; }
  .kai-ax__steps { margin-top: 14px; }
  .kai-ax__screen { min-height: 240px; max-height: 340px; padding: 14px; gap: 12px; }
  .kai-msg { gap: 8px; }
  .kai-msg__icon { width: 22px; height: 22px; }
  .kai-msg__b { max-width: 90%; padding: 10px 13px; font-size: 14px; line-height: 1.42; }
}
@media (prefers-reduced-motion: reduce) {
  .kai-ax__dot, .kai-ax__cursor, .kai-typing span { animation: none; }
  .kai-ax__bw, .kai-ax__step, .kai-msg__b, .kai-placed { animation: none; opacity: 1; transform: none; }
}

/* ==== KIBO MCP Server (KaiMcp.astro) ==== */
.kai-mcp { background: var(--kibo-link); overflow: hidden; padding: 120px 0; color: var(--kibo-white); }
.kai-mcp .kai-wrap { position: relative; z-index: 1; }
.kai-mcp__bg { position: absolute; inset: -60px 0; z-index: 0; pointer-events: none; }
.kai-mcp__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kai-mcp__head { max-width: 760px; margin: 0 auto; text-align: center; }
.kai-mcp__head .kai-lede { margin-top: 18px; color: var(--kibo-white); }
.kai-mcp__head, .kai-mcp__point { text-shadow: 0 3px 14px rgba(0,0,0,.28); }
.kai-mcp__figure { display: flex; justify-content: center; margin: 16px 0 8px; }
.kai-mcp__art { display: block; width: min(360px, 70vw); height: auto; filter: drop-shadow(0 18px 50px rgba(0,0,0,.28)); }
.kai-mcp__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; max-width: 1040px; margin: 28px auto 0; padding: 0; list-style: none; }
.kai-mcp__point { padding-left: 22px; border-left: 1px solid var(--kibo-yellow); }
.kai-mcp__point h3 { margin: 0 0 7px; font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--kibo-white); }
.kai-mcp__point p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.78); text-wrap: pretty; }
@media (max-width: 880px) {
  .kai-mcp { padding: 80px 0; }
  .kai-mcp__points { grid-template-columns: 1fr; gap: 26px; max-width: 480px; }
}

/* ==== Foundation (KaiFoundation.astro) ==== */
.kai-found__head { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.kai-found__head .kai-lede strong { color: var(--kibo-white); }
.kai-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; }
.kai-card { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px 32px; border-radius: 16px; background: rgba(255,255,255,.065); transition: transform .25s var(--kai-ease), box-shadow .25s var(--kai-ease); }
.kai-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.kai-card__glyph { height: 100px; display: flex; align-items: center; justify-content: center; color: var(--kibo-yellow); transform-origin: center; }
.kai-card__glyph svg { display: block; width: auto; fill: none; stroke: currentColor; stroke-miterlimit: 10; }
.kai-card__glyph svg * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.kai-card__glyph--agents svg { height: 88px; }
.kai-card__glyph--composable svg { height: 92px; }
.kai-card__glyph--intelligence svg { height: 78px; }
.kai-card__glyph--mcp svg { height: 62px; }
.kai-card__h { margin: 0; font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--kibo-white); }
.kai-card__t { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.72); }
.kai-reveal-on .kai-card .kai-card__glyph { opacity: 0; transform: translateY(10px) scale(.86); }
.kai-reveal-on .kai-card.is-in .kai-card__glyph { animation: kai-glyph-pop .6s var(--kai-ease) var(--kai-delay, 0s) both; }
.kai-cards4 > :nth-child(2) { --kai-delay: .1s; }
.kai-cards4 > :nth-child(3) { --kai-delay: .2s; }
.kai-cards4 > :nth-child(4) { --kai-delay: .3s; }
@keyframes kai-glyph-pop { 0% { opacity: 0; transform: translateY(10px) scale(.86); } 60% { transform: translateY(0) scale(1.06); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kai-reveal-on .kai-card .kai-card__glyph { opacity: 1; transform: none; animation: none; } }
@media (max-width: 980px) { .kai-cards4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kai-cards4 { grid-template-columns: 1fr; } }

/* ==== Guardrails (KaiGuardrails.astro) ==== */
.kai-guard { background: var(--kibo-link); color: var(--kibo-white); }
.kai-guard .kai-h2, .kai-guard em { color: var(--kibo-white); }
.kai-guard__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.kai-guard__head { max-width: 760px; }
.kai-guard__head .kai-lede { margin-top: 18px; color: var(--kibo-white); }
.kai-guard__head .kh-psec-btn { margin-top: 28px; }
.kai-guard__rail { display: flex; gap: 8px; height: 400px; margin: 0; padding: 0; list-style: none; }
.kai-panel { flex: 1 1 0; min-width: 0; position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); transition: flex .42s var(--kai-ease), background .32s var(--kai-ease); }
.kai-panel:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: 2px; }
.kai-panel.is-active { flex: 5 1 0; background: var(--kibo-yellow); border-color: transparent; }
.kai-panel__open { position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; color: var(--kibo-dark-grey); overflow: hidden; }
.kai-panel:not(.is-active) .kai-panel__open, .kai-panel.is-active .kai-panel__closed { display: none; }
.kai-panel__cubes { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right top; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, var(--kibo-black) 0%, var(--kibo-black) 22%, transparent 58%); mask-image: linear-gradient(to bottom, var(--kibo-black) 0%, var(--kibo-black) 22%, transparent 58%); }
.kai-panel__ico { position: relative; display: block; }
.kai-panel__ico svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kai-panel__ico svg * { vector-effect: non-scaling-stroke; }
.kai-panel__ico .kai-dot { fill: currentColor; stroke: none; }
.kai-panel__body { position: relative; margin-top: auto; }
.kai-panel__body h3 { margin: 0; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; color: var(--kibo-dark-grey); }
.kai-panel__body p { margin: 10px 0 0; max-width: 400px; font-size: 15px; line-height: 1.38; color: var(--kibo-dark-grey); text-wrap: balance; }
.kai-panel__closed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 0; color: var(--kibo-white); }
.kai-panel__vtitle { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: auto; font-weight: 600; font-size: 15px; white-space: nowrap; }
@media (max-width: 880px) { .kai-guard__grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 760px) {
  .kai-guard__rail { flex-direction: column; height: auto; }
  .kai-panel { flex: none; height: 76px; transition: height .42s var(--kai-ease), background .32s var(--kai-ease); }
  .kai-panel.is-active { flex: none; height: 230px; }
  .kai-panel__closed { flex-direction: row; padding: 0 22px; gap: 16px; }
  .kai-panel__vtitle { writing-mode: horizontal-tb; transform: none; margin-top: 0; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .kai-panel { transition: none; } }

/* ==== FAQ (KaiFaq.astro) ==== */
.kai-faq__list { max-width: 820px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 12px; }
.kai-faq__item { border: 1.5px solid var(--border-card); border-radius: 14px; background: var(--kibo-white); overflow: hidden; transition: border-color .2s var(--kai-ease), box-shadow .2s var(--kai-ease); }
.kai-faq__item.is-open { border-color: transparent; box-shadow: 0 0 16px rgba(0,0,0,.1); }
.kai-faq__h { margin: 0; }
.kai-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-base); color: var(--kibo-dark-grey); }
.kai-faq__q:focus-visible { outline: 2px solid var(--kibo-link); outline-offset: -2px; border-radius: 14px; }
.kai-faq__q-txt { font-weight: 600; font-size: 18px; line-height: 1.35; }
.kai-faq__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kibo-light-grey); transition: transform .28s var(--kai-ease), background .2s var(--kai-ease); }
.kai-faq__icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kai-faq__item.is-open .kai-faq__icon { transform: rotate(180deg); background: var(--kibo-yellow); }
.kai-faq__a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .34s var(--kai-ease), visibility 0s .34s; }
.kai-faq__item.is-open .kai-faq__a { max-height: 420px; visibility: visible; transition: max-height .34s var(--kai-ease); }
.kai-faq__a p { margin: 0; padding: 0 64px 24px 24px; font-size: 15px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
@media (max-width: 560px) {
  .kai-faq__q { padding: 18px; gap: 12px; }
  .kai-faq__q-txt { font-size: 16px; }
  .kai-faq__a p { padding: 0 18px 18px; }
}
@media (max-width: 560px) { .kai-h1 { font-size: 34px; } }