/* AIA-HERO-V1-EXPORT 2026-08-22 — Cresta AI Agent page, hero section
   Upload to: https://website-assets.cresta.com/ai-agent/hero/aia-hero.css
   Cache-Control: public, max-age=31536000, immutable — publish as aia-hero.v2.css etc when you change it.
   Class convention: bare aia- names (hero owns this per the export spec). JS-only hooks are
   data-aia-hero-* attributes, never used as style selectors here. */

.aia-hero-root { position: relative; font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; }
.aia-hero-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(56px,7vw,96px) clamp(20px,5.6vw,80px) clamp(64px,10vw,140px); box-sizing: border-box; }

.aia-hero-intro-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,568px); gap: 80px; align-items: start; }
.aia-hero-eyebrow { margin: 0 0 32px; font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 500; line-height: 100%; letter-spacing: 0.1em; text-transform: uppercase; color: #24242A; }
.aia-hero-title { margin: 0; font-size: 56px; font-weight: 500; line-height: 112%; letter-spacing: -0.03em; color: #24242A; text-wrap: pretty; }
.aia-hero-lead { margin: 0; padding-top: 64px; font-size: 17px; font-weight: 400; line-height: 150%; letter-spacing: -0.01em; color: #24242A; }

.aia-hero-cta { display: inline-flex; align-items: center; margin-top: 64px; height: 40px; padding: 8px 12px; box-sizing: border-box; border-radius: 8px; background-color: #205AE3; border: 1px solid transparent; color: #FFFFFF; font-size: 14px; font-weight: 600; line-height: 150%; letter-spacing: -0.01em; text-decoration: none; transition: background 200ms cubic-bezier(.2,.7,.2,1); }
.aia-hero-cta:hover { background: #3D78F5; }
.aia-hero-cta:active { background: #0D43C2; }
.aia-arrow-wrap { display: block; width: 18px; height: 18px; overflow: hidden; flex: none; margin-left: 4px; }
.aia-arrow-col { display: flex; flex-direction: column; transform: translateY(-18px); transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.aia-hero-cta:hover .aia-arrow-col { transform: translateY(0); }

/* ---- pin / sticky / stage: transform+opacity morph only, per the AA perf fix ---- */
.aia-pin { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 96px; margin-bottom: 96px; height: 120vh; }
.aia-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-start; overflow: hidden; }
.aia-stage {
  position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; overflow: hidden;
  border-radius: 22px; background: #0B0D14;
  transition: border-radius .22s ease; /* radius is a discrete toggle, not a per-frame write */
  will-change: transform;
  transform-origin: top left;
}
.aia-stage[data-open="1"] { border-radius: 0; }
.aia-stage-bg { position: absolute; inset: 0; background: #050A1F url('dark-gradient.svg') center / cover no-repeat; }
.aia-track { position: relative; width: 100%; box-sizing: border-box; padding: clamp(30px,7vw,108px) clamp(16px,4vw,72px); max-width: 1600px; margin: 0 auto; transform-origin: center; }
.aia-row { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 48px clamp(40px,5.5vw,104px); transition: transform .55s cubic-bezier(.22,.72,.16,1); }

/* ---- industry nav rail (wide) ---- */
.aia-nav-rail { flex: 0 1 auto; width: clamp(206px,16vw,258px); min-width: 206px; display: flex; flex-direction: column; }
.aia-nav-list { position: relative; }
.aia-nav-pill { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: transform .5s cubic-bezier(.22,.72,.16,1), height .5s cubic-bezier(.22,.72,.16,1), opacity .3s ease; pointer-events: none; }
.aia-nav-item { position: relative; display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; margin-bottom: 10px; padding: 14px 20px 14px 30px; cursor: pointer; font-family: inherit; color: rgba(255,255,255,.52); transition: color .3s ease; }
.aia-nav-item:hover { color: #FFFFFF; }
.aia-nav-item[aria-current="true"] { color: #FFFFFF; }
.aia-nav-item span { font-size: clamp(17px,1.35vw,21px); font-weight: 500; letter-spacing: -0.02em; text-wrap: pretty; }

/* ---- industry dropdown (compact / stack) ---- */
.aia-dropdown { position: relative; z-index: 9; display: none; width: 100%; max-width: 404px; }
.aia-dropdown-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; padding: 15px 22px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; text-align: left; cursor: pointer; }
.aia-dropdown-btn:hover { background: rgba(255,255,255,.18); }
.aia-dropdown-btn svg { flex: 0 0 auto; transition: transform .32s cubic-bezier(.22,.72,.16,1); }
.aia-dropdown-list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: none; flex-direction: column; gap: 2px; box-sizing: border-box; padding: 8px; border-radius: 22px; background: rgba(10,14,26,.94); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 24px 60px rgba(3,6,18,.45); animation: aia-fade-up .26s cubic-bezier(.22,.72,.16,1) both; }
.aia-dropdown[data-open="1"] .aia-dropdown-list { display: flex; }
.aia-dropdown-item { display: flex; align-items: center; width: 100%; box-sizing: border-box; text-align: left; border: 0; border-radius: 999px; background: transparent; padding: 13px 18px; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,.52); }
.aia-dropdown-item[aria-current="true"] { background: rgba(255,255,255,.12); color: #FFFFFF; }
.aia-dropdown-item:hover { color: #FFFFFF; }

/* ---- card pair ---- */
.aia-pair { position: relative; flex: 0 0 auto; display: flex; align-items: stretch; gap: 20px; flex-wrap: nowrap; will-change: transform; }
.aia-card-a { position: relative; z-index: 3; overflow: hidden; box-sizing: border-box; width: 404px; transition: height .55s cubic-bezier(.6,.04,.28,1); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 26px 30px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 24px 60px rgba(3,6,18,.34); }
.aia-media-slot { position: relative; z-index: 3; align-self: stretch; height: 262px; margin: -16px -16px 0; flex: 0 0 auto; overflow: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; transition: height .62s cubic-bezier(.6,.04,.28,1), margin .62s cubic-bezier(.6,.04,.28,1); }
.aia-media-fade { position: absolute; left: -26px; right: -26px; top: -26px; bottom: -34px; z-index: 0; pointer-events: none; background: linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 68%,rgba(255,255,255,0) 100%); transition: opacity .34s ease; }
.aia-orb-holder { position: relative; z-index: 1; flex: 0 0 auto; width: 384px; height: 262px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; transition: width .62s cubic-bezier(.6,.04,.28,1), height .62s cubic-bezier(.6,.04,.28,1), border-radius .62s cubic-bezier(.6,.04,.28,1); }
.aia-orb-clip { position: relative; flex: 0 0 auto; width: 440px; height: 300px; overflow: hidden; isolation: isolate; }
/* object-fit cover drops the 1080x1080 loop's top/bottom crop into the 440x300 clip; the poster
   and the mp4 share the crop so the poster-to-video handoff is frame-identical */
.aia-orb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aia-orb-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(120% 120% at 30% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 48%), radial-gradient(150% 150% at 68% 78%, rgba(0,0,0,0) 68%, rgba(28,22,16,.16) 100%); }
.aia-agent-name { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; font-size: 19px; font-weight: 600; letter-spacing: -0.018em; color: #16161B; transition: opacity .34s ease; }
.aia-card-title { align-self: stretch; margin-top: 10px; text-align: left; font-size: 22px; font-weight: 600; letter-spacing: -0.018em; color: #16161B; text-wrap: pretty; transition: margin-top .55s cubic-bezier(.6,.04,.28,1); }
.aia-card-body { margin: -7px 0 0; font-size: 15px; line-height: 1.55; letter-spacing: -0.005em; color: #5A616C; text-wrap: pretty; }

.aia-try-asking-label { font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A9099; }
.aia-try-asking-list { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.aia-phrase { font-size: 15px; line-height: 20px; letter-spacing: -0.005em; color: #24242A; text-wrap: pretty; }

.aia-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 9px; margin-top: -30px; padding: 30px 2px 2px 0; }
.aia-thread::-webkit-scrollbar { display: none; }
.aia-thread-inner { margin-top: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; }
.aia-msg-row { display: flex; flex: 0 0 auto; }
.aia-msg-row--user { justify-content: flex-end; }
.aia-msg-row--agent { justify-content: flex-start; }
.aia-msg { max-width: 84%; padding: 10px 14px; font-size: 14.5px; line-height: 1.46; letter-spacing: -0.005em; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: break-word; animation: aia-bubble-in .34s cubic-bezier(.22,.72,.16,1) both; }
.aia-msg--user { border-radius: 16px 16px 6px 16px; background: #25252A; color: #FFFFFF; }
.aia-msg--agent { border-radius: 16px 16px 16px 6px; background: #F2F3F4; color: #24242A; }
.aia-typing { display: flex; align-items: center; gap: 5px; padding: 14px 16px; border-radius: 16px 16px 16px 6px; background: #F2F3F4; width: fit-content; }
.aia-typing span { width: 6px; height: 6px; border-radius: 999px; background: #6B7280; animation: aia-dot-pulse 1.15s ease-in-out infinite; }
.aia-typing span:nth-child(2) { animation-delay: .16s; }
.aia-typing span:nth-child(3) { animation-delay: .32s; }

.aia-controls { position: relative; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding: 4px 0 0; }
.aia-input-pill { position: absolute; left: 0; top: 4px; bottom: 0; box-sizing: border-box; display: flex; align-items: center; gap: 6px; overflow: hidden; padding: 0 6px 0 17px; border-radius: 999px; background: #F2F3F4; opacity: 0; pointer-events: none; transition: right .46s cubic-bezier(.22,.72,.16,1), opacity .3s ease; }
.aia-input-pill[data-open="1"] { opacity: 1; pointer-events: auto; }
.aia-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 14.5px; letter-spacing: -0.005em; color: #16161B; }
.aia-send-btn { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; border-radius: 999px; background: #25252A; color: #FFFFFF; cursor: pointer; opacity: .32; transition: opacity .22s ease, filter .2s ease; }
.aia-send-btn:hover { filter: brightness(1.35); }
.aia-send-btn[data-active="1"] { opacity: 1; }
.aia-controls-right { display: flex; align-items: flex-end; justify-content: space-between; flex: 1 1 auto; min-width: 0; gap: 8px; }
.aia-controls-left { display: flex; align-items: flex-end; gap: 8px; }
.aia-round-btn { flex: 0 0 auto; box-sizing: border-box; overflow: hidden; height: 48px; width: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; padding: 0; border-radius: 999px; background: #25252A; color: #FFFFFF; font-family: inherit; cursor: pointer; transition: width .45s cubic-bezier(.22,.72,.16,1), padding .45s cubic-bezier(.22,.72,.16,1), transform .5s cubic-bezier(.4,0,.2,1), opacity .34s ease, filter .2s ease; }
.aia-round-btn:hover { filter: brightness(1.35); }
.aia-round-btn--chat { position: relative; z-index: 2; }
.aia-round-btn--call[data-incall="1"] { width: 132px; padding: 0 22px; gap: 16px; justify-content: flex-start; }
.aia-call-time { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aia-phone-ico { display: grid; place-items: center; transition: transform .5s cubic-bezier(.34,1.36,.5,1); }
.aia-round-btn--call[data-incall="1"] .aia-phone-ico { transform: rotate(135deg); }
.aia-chat-ico-swap { display: grid; width: 20px; height: 20px; place-items: center; }
.aia-chat-ico-swap > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .24s ease, transform .44s cubic-bezier(.34,1.36,.5,1); }
.aia-round-btn--chat[data-chat-open="0"] [data-part="x"] { transform: rotate(90deg); }
.aia-round-btn--chat[data-chat-open="1"] [data-part="chat"] { transform: rotate(-90deg); }
.aia-arrow-out { flex: 0 0 auto; box-sizing: border-box; overflow: hidden; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E1E6EC; padding: 0; border-radius: 999px; background: transparent; color: #25252A; cursor: pointer; transition: opacity .34s ease, border-color .2s ease, width .42s cubic-bezier(.22,.72,.16,1), padding .38s cubic-bezier(.22,.72,.16,1); text-decoration: none; }
.aia-arrow-out:hover { border-color: #CBD3DE; }
.aia-arrow-out[data-hover="1"] { width: 148px; padding: 0 6px 0 2px; }
.aia-arrow-out-label { display: inline-block; overflow: hidden; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: #25252A; max-width: 0; opacity: 0; transition: max-width .38s cubic-bezier(.22,.72,.16,1), opacity .26s ease, margin-right .38s cubic-bezier(.22,.72,.16,1); }
.aia-arrow-out[data-hover="1"] .aia-arrow-out-label { max-width: 88px; opacity: 1; margin-right: 8px; }

/* ---- card B (persona) ---- */
.aia-card-b-wrap { position: relative; flex: 0 0 auto; width: 404px; display: flex; flex-direction: column; align-items: center; will-change: transform; }
.aia-card-b { position: relative; z-index: 1; flex: 0 0 auto; box-sizing: border-box; width: 100%; transition: height .55s cubic-bezier(.6,.04,.28,1); display: flex; flex-direction: column; padding: 28px 28px 30px; border-radius: 22px; background: rgba(255,255,255,.10); backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25); box-shadow: 0 24px 60px rgba(3,6,18,.30); }
.aia-b-head { display: flex; align-items: center; gap: 13px; }
.aia-b-avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; color: #FFFFFF; background-size: cover; background-position: center; }
.aia-b-who { font-size: 20px; font-weight: 600; letter-spacing: -0.022em; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aia-b-sub { display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 14.5px; letter-spacing: 0.01em; color: rgba(255,255,255,.88); }
.aia-b-sub-key { flex: 0 0 auto; }
.aia-b-sub-val { min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aia-b-about-label { font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.aia-b-about-body { font-size: 14.5px; line-height: 1.34; letter-spacing: -0.005em; color: rgba(255,255,255,.88); text-wrap: pretty; margin-top: 6px; }
.aia-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-content: start; margin-top: 14px; }
.aia-field-k { font-family: 'DM Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.aia-field-v { font-size: 14.5px; line-height: 1.34; color: #FFFFFF; overflow-wrap: break-word; margin-top: 3px; }
.aia-b-rule { height: 1px; background: rgba(255,255,255,.14); margin-top: 14px; }

.aia-b-content { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* the media block is a transparent spacer that only reserves layout; the video itself is the
   absolutely positioned .aia-b-vid below, so it can morph across states independently of flow */
.aia-b-media { flex: 0 0 auto; width: calc(100% + 36px); height: 262px; margin: -18px auto 0; border-radius: 12px; background: transparent; transition: width .62s cubic-bezier(.6,.04,.28,1), height .62s cubic-bezier(.6,.04,.28,1), margin .62s cubic-bezier(.6,.04,.28,1), border-radius .62s cubic-bezier(.6,.04,.28,1); }
.aia-b-vid { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; background-repeat: no-repeat; left: 10px; top: 10px; width: calc(100% - 20px); height: 262px; border-radius: 12px; background: rgba(255,255,255,.14); transition: left .62s cubic-bezier(.6,.04,.28,1), top .62s cubic-bezier(.6,.04,.28,1), width .62s cubic-bezier(.6,.04,.28,1), height .62s cubic-bezier(.6,.04,.28,1), border-radius .62s cubic-bezier(.6,.04,.28,1); }
.aia-b-vid video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; background: #0B0D14; transition: transform .62s cubic-bezier(.6,.04,.28,1), object-position .62s cubic-bezier(.6,.04,.28,1), opacity .3s ease; }
.aia-b-media-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(180deg, rgba(6,10,24,0) 0%, rgba(6,10,24,.5) 100%); transition: opacity .4s ease; }
.aia-b-name-float { position: absolute; z-index: 2; left: 2px; top: 176px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; transition: left .62s cubic-bezier(.6,.04,.28,1), top .62s cubic-bezier(.6,.04,.28,1), transform .62s cubic-bezier(.6,.04,.28,1); }
.aia-b-name-float .aia-b-who { font-size: 24px; line-height: 28px; }
.aia-b-name-sub { font-size: 15px; line-height: 20px; letter-spacing: 0.01em; color: rgba(255,255,255,.82); white-space: nowrap; }
.aia-b-body { width: 100%; flex: 0 0 auto; margin-top: 18px; transition: margin-top .55s cubic-bezier(.6,.04,.28,1); }
.aia-b-tryasking { margin-top: auto; padding-top: 14px; display: none; }

/* the three card-B states the JS toggles with [data-state] on .aia-card-b: idle bed,
   call circle (mirrors the orb's 188px call geometry), chat 42px header avatar */
.aia-b-head { display: none; }
.aia-card-b[data-state="call"] .aia-b-media { width: 188px; height: 188px; margin: 19px auto 0; border-radius: 94px; }
.aia-card-b[data-state="call"] .aia-b-vid { left: calc(50% - 94px); top: 47px; width: 188px; height: 188px; border-radius: 94px; }
.aia-card-b[data-state="call"] .aia-b-name-float { left: 50%; top: 227px; transform: translateX(-50%); align-items: center; text-align: center; }
.aia-card-b[data-state="call"] .aia-b-body { margin-top: 102px; }
.aia-card-b[data-state="chat"] .aia-b-head { display: flex; }
.aia-card-b[data-state="chat"] .aia-b-media, .aia-card-b[data-state="chat"] .aia-b-name-float { display: none; }
/* in chat the video IS the header avatar, so it paints above the initials placeholder it
   replaces (idle/call keep the content — name float — above the video instead) */
.aia-card-b[data-state="chat"] .aia-b-vid { left: 28px; top: 28px; width: 42px; height: 42px; border-radius: 21px; z-index: 3; }
/* the video is the whole avatar in chat; drop only the box's own tint - the JS-painted poster
   still stays behind the clip so first open has a face to show before the video has frames */
.aia-card-b[data-state="chat"] .aia-b-vid { background-color: transparent !important; }
/* the JS paints the poster with background-position 50% 12% for the wide idle frame; that anchor
   crops the face out of the square call/chat circles, so recentre for those */
.aia-card-b[data-state="call"] .aia-b-vid, .aia-card-b[data-state="chat"] .aia-b-vid { background-position: 50% 50% !important; }
/* in chat the video paints over the .aia-b-avatar photo at the same spot; the photo is dead weight
   behind it (and shows through with its own framing whenever the video layer is briefly absent),
   so drop it — the video is the only avatar */
.aia-card-b[data-state="chat"] .aia-b-avatar { background-image: none !important; }
/* the sub line must not stretch the header: the video avatar is pinned to the 42px photo slot,
   so pull the sub out of flow (header keeps its 42px height) and reserve the 18px it needs on
   the body margin instead. max-content stops the value ellipsising inside the narrow text column */
.aia-card-b[data-state="chat"] .aia-b-head > div { position: relative; }
.aia-card-b[data-state="chat"] .aia-b-sub { position: absolute; top: 100%; left: 0; width: max-content; }
.aia-card-b[data-state="chat"] .aia-b-body { margin-top: 34px; }
/* with a sub line under it, lift the name (and its sub) so the two-line block centres on the
   avatar circle instead of the name alone */
.aia-card-b[data-state="chat"] .aia-b-head.aia-b-head-has-sub > div:not(.aia-b-avatar) { transform: translateY(-9px); }
.aia-card-b[data-state="chat"] .aia-b-tryasking { display: block; }
.aia-card-b[data-state="call"] .aia-b-vid video, .aia-card-b[data-state="chat"] .aia-b-vid video { object-position: 50% 50%; transform: scale(1.06); }
/* the scaled video paints a 1.06x box inside the 42px clip and Chrome lets composited video
   escape the parent's border-radius, so its dark backdrop peeked out as a ring around the
   chat avatar; render it 1:1 and let object-fit cover do the framing instead */
.aia-card-b[data-state="chat"] .aia-b-vid video { transform: none; background: transparent; }
.aia-card-b[data-state="call"] .aia-b-media-scrim, .aia-card-b[data-state="chat"] .aia-b-media-scrim { opacity: 0; }

/* ---- persona chip switcher ---- */
.aia-persona-chips { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 12px; }
.aia-hero-root:not([data-aia-hero-mode="stack"]) .aia-persona-chips { opacity: 0; transition: opacity .3s ease; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-persona-chips { opacity: 1; pointer-events: auto; }
.aia-persona-chip { flex: 0 0 auto; box-sizing: border-box; width: 44px; height: 44px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; animation: aia-chip-in .5s cubic-bezier(.2,.86,.24,1) both; }
.aia-persona-face { display: block; flex: 0 0 auto; overflow: hidden; width: 36px; height: 36px; border-radius: 999px; background-size: cover; background-position: 50% 24%; opacity: .5; box-shadow: 0 0 0 1px rgba(255,255,255,.28); transition: opacity .26s ease, box-shadow .26s ease; }
.aia-persona-face video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; pointer-events: none; }
.aia-persona-chip[aria-selected="true"] .aia-persona-face { opacity: 1; box-shadow: 0 0 0 2px #FFFFFF; }
.aia-persona-chip-label { display: none; font-size: 12px; font-weight: 500; letter-spacing: -0.005em; color: rgba(255,255,255,.6); white-space: nowrap; transition: color .26s ease; }
.aia-persona-chip[aria-selected="true"] .aia-persona-chip-label { color: #FFFFFF; }

.aia-pick-hint { position: absolute; left: 100%; top: 50%; z-index: 4; width: 176px; height: 140px; margin-left: 64px; transform: translateY(-170px); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.aia-pick-hint-text { position: absolute; left: 26px; top: 0; transform: rotate(-11deg); font-size: 16px; font-weight: 500; line-height: 1.24; letter-spacing: -0.01em; color: #FFFFFF; text-shadow: 0 1px 10px rgba(3,6,18,.45); }
.aia-pick-hint svg { position: absolute; left: 6px; top: 52px; opacity: .92; filter: drop-shadow(0 1px 8px rgba(3,6,18,.45)); }

.aia-ghost { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; overflow: hidden; box-sizing: border-box; width: 404px; opacity: 0; display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 26px 30px; background: #FFFFFF; border-radius: 22px; box-shadow: 0 24px 60px rgba(3,6,18,.34); }
/* mirrors .aia-media-slot exactly (including the centring flex) so the ghost's holder/clip/icon
   land where card A has them */
.aia-ghost-media { position: relative; align-self: stretch; height: 262px; margin: -16px -16px 0; flex: 0 0 auto; overflow: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.aia-ghost-media .aia-icon-badge { opacity: 1; display: block; animation: none; }
.aia-ghost-media .aia-orb-clip { transition: none; transform: none; }
/* the ghost's poster still is static art — it must never inherit motion or transitions */
.aia-ghost-media .aia-orb-video { transition: none; animation: none; }
.aia-ghost-title { font-size: 22px; font-weight: 600; letter-spacing: -0.018em; color: #16161B; }
.aia-ghost-body { font-size: 15px; line-height: 1.55; color: #5A616C; }
.aia-ghost-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; }
.aia-ghost-controls-left { display: flex; gap: 8px; }
.aia-ghost-controls .aia-round-btn, .aia-ghost-controls .aia-arrow-out { cursor: default; }

@keyframes aia-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aia-bubble-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes aia-dot-pulse { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }
@keyframes aia-chip-in { from { opacity: 0; transform: scale(.62) translateY(6px); } 60% { opacity: 1; } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .aia-arrow-col, .aia-round-btn, .aia-thread-close, .aia-stage { transition: none !important; }
  .aia-typing span, .aia-persona-chip { animation: none !important; }
  .aia-b-vid, .aia-b-vid video, .aia-b-media, .aia-b-name-float, .aia-b-body, .aia-ghost { transition: none !important; }
  .aia-card-title, .aia-card-body, .aia-b-content, .aia-icon-badge, .aia-msg, .aia-dropdown-list { animation: none !important; }
}

@media (max-width: 1180px) {
  .aia-hero-intro-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .aia-hero-lead { padding-top: 0; max-width: 640px; }
  .aia-hero-title { font-size: 44px; }
  .aia-row { gap: 32px; }
}
@media (max-width: 480px) { .aia-hero-title { font-size: 36px; } }
@media (max-width: 720px) { .aia-hero-cta { margin-top: 32px; } .aia-pin { margin-top: 48px; margin-bottom: 48px; } }

/* ---- binary state toggles the JS sets as data attributes (kept off the continuous
   scroll path — these transition on their own short CSS timers, not written per scroll frame) ---- */
.aia-media-fade, .aia-agent-name { opacity: 0; }
.aia-media-fade[data-chat-open="1"], .aia-agent-name[data-chat-open="1"] { opacity: 1; }
.aia-media-slot[data-chat-open="1"] { height: 44px; margin: 0; }
.aia-orb-holder[data-chat-open="1"] { width: 44px; height: 44px; border-radius: 22px; }
.aia-orb-clip { transition: transform .62s cubic-bezier(.6,.04,.28,1); }
.aia-orb-clip[data-chat-open="1"] { transform: scale(0.23404255); }
/* header close (X) — sits at the right edge of the 44px chat header row, after the agent name,
   so the destructive control is far from Send at the input row's right end. Rides the same
   data-chat-open toggle as the rest of the header row. position/z-index keep it above the
   .aia-media-fade white gradient (same as .aia-agent-name) — without them the fade paints
   over the button: invisible but still clickable (fade is pointer-events:none). */
.aia-thread-close { flex: 0 0 auto; box-sizing: border-box; position: relative; z-index: 1; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: #25252A; color: #FFFFFF; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .34s ease, filter .2s ease; }
.aia-thread-close:hover { filter: brightness(1.35); }
.aia-thread-close[data-chat-open="1"] { opacity: 1; pointer-events: auto; }
.aia-card-title[data-voice="1"] { margin-top: -31px; text-align: center; }
.aia-icon-badge { position: absolute; left: 48px; bottom: 39px; z-index: 2; pointer-events: none; color: #FFFFFF; opacity: 0; display: none; }
.aia-icon-badge[data-show="1"] { display: block; animation: aia-ico-in 1.05s cubic-bezier(.19,.85,.24,1) .5s both; }
@keyframes aia-ico-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

/* stack mode (JS sets [data-aia-hero-mode="stack"] on the root once the pinned width can't
   fit the nav rail beside the card pair) — the pin drops out, section flows statically */
.aia-hero-root[data-aia-hero-mode="stack"] .aia-pin { height: auto !important; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-sticky { position: static !important; height: auto !important; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-stage { position: relative !important; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-nav-rail { display: none !important; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-dropdown { display: block !important; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-row { flex-wrap: wrap; gap: 30px; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-nav-rail-col { width: 100%; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-pair { flex-direction: column; width: 100%; align-items: center; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-card-a, .aia-hero-root[data-aia-hero-mode="stack"] .aia-card-b-wrap, .aia-hero-root[data-aia-hero-mode="stack"] .aia-ghost { width: 100%; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-persona-chips { position: static; transform: none; flex-direction: row; padding: 14px 20px 0; }
/* stacked, card A is full page width and the orb bed spans it — the 384px holder is the wide/
   compact value only (source: orbHolderW = chatOpen ? 44 : stack ? '100%' : '384px'). Chat still
   wins, since it collapses the holder to the 44px header sphere. */
.aia-hero-root[data-aia-hero-mode="stack"] .aia-orb-holder:not([data-chat-open="1"]) { width: 100%; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-persona-chip { width: 76px; height: 68px; flex-direction: column; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-persona-face { width: 44px; height: 44px; }
.aia-hero-root[data-aia-hero-mode="stack"] .aia-persona-chip-label { display: block; }
.aia-hero-root[data-aia-hero-mode="wide"] .aia-nav-rail { display: flex; }
.aia-hero-root[data-aia-hero-mode="compact"] .aia-nav-rail { display: none; }
.aia-hero-root[data-aia-hero-mode="compact"] .aia-dropdown { display: block; }
.aia-hero-root[data-aia-hero-mode="compact"] .aia-row { flex-wrap: wrap; }
.aia-hero-root[data-aia-hero-mode="compact"] .aia-nav-rail-col,
.aia-hero-root[data-aia-hero-mode="stack"] .aia-nav-rail-col { width: 100%; display: flex; justify-content: center; }

.aia-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; }

/* Keyboard focus was invisible everywhere: the nav rail, the dropdown, the persona rail and every
   card control had no focus style at all, so a keyboard user had no idea where they were. Rings
   are per-surface — dark on the white page, white inside the cards and on the stage. */
.aia-nav-item:focus-visible, .aia-dropdown-btn:focus-visible, .aia-dropdown-item:focus-visible, .aia-hero-cta:focus-visible { outline: 2px solid #24242A; outline-offset: 3px; }
.aia-round-btn:focus-visible, .aia-arrow-out:focus-visible, .aia-persona-chip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.aia-send-btn:focus-visible, .aia-thread-close:focus-visible { outline: 2px solid #24242A; outline-offset: 2px; }
.aia-input:focus-visible { outline: 2px solid #24242A; outline-offset: 1px; border-radius: 999px; }

/* Windows high-contrast: the whole hero is white text over a painted canvas, which forced-colors
   does not repaint — the text would sit on an OS-forced background and vanish. Drop the decorative
   layers and rebuild the cards from system colours. */
@media (forced-colors: active) {
  .aia-orb-video, .aia-b-media-scrim, .aia-media-fade, .aia-ghost { display: none !important; }
  .aia-card-a, .aia-card-b, .aia-stage, .aia-b-vid { forced-color-adjust: none; background: Canvas !important; color: CanvasText !important; border: 1px solid CanvasText; }
  .aia-card-title, .aia-card-body, .aia-b-who, .aia-b-name-sub, .aia-b-about-body, .aia-field-v, .aia-phrase, .aia-agent-name { color: CanvasText !important; }
  .aia-b-about-label, .aia-try-asking-label, .aia-field-k { color: CanvasText !important; opacity: 1; }
  .aia-round-btn, .aia-send-btn, .aia-thread-close { border: 1px solid CanvasText; background: Canvas !important; color: CanvasText !important; }
  .aia-persona-chip[aria-selected="true"] { outline: 2px solid Highlight; }
  .aia-pick-hint { display: none !important; }
}