body.elx-aryx-keyboard { background: #fff; }
.ak-page [hidden] { display: none !important; }
.ak-page { --ak-purple: #8e69ff; --ak-dark: #141417; --ak-key: #303035; }
.ak-page :where(button, select, textarea) { font: inherit; }
.ak-page button { cursor: pointer; }
.ak-page button:disabled { cursor: default; opacity: .4; }
.ak-page button:focus-visible, .ak-page textarea:focus-visible, .ak-page select:focus-visible { outline: 3px solid #9f7aff; outline-offset: 3px; }
.ak-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ak-hero { padding: 58px 0 48px; background: radial-gradient(ellipse at 90% 20%,#ecf9ff,transparent 60%),radial-gradient(ellipse at 85% 100%,#ecd9ff,transparent 65%),#fcfaff; }
.ak-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 38px; align-items: center; }
.ak-hero h1 { font-size: clamp(42px,4.7vw,64px); line-height: 1.03; margin: 24px 0; }
.ak-hero h1 span { color: transparent; background: var(--elx-gradient); background-clip: text; -webkit-background-clip: text; }
.ak-hero-copy > p { font-size: 17px; line-height: 1.65; max-width: 490px; }
.ak-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 15px; }
.ak-hero-actions .elx-btn { font-size: 13px; padding: 14px 18px; min-height: 48px; }
.ak-coming { display: inline-flex; align-items: center; gap: 8px; color: #5631b4; background: #eee7ff; border: 1px solid #d9caff; padding: 13px 15px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.ak-play-badge { display: inline-block; padding: 15px; background: #fff; border-radius: 12px; }
.ak-play-badge img { width: 200px; height: auto; display: block; }
.ak-hero-copy > .ak-subtle { font-size: 12px; }
.ak-app-strip { display: flex; justify-content: space-between; gap: 12px; max-width: 450px; margin: 30px 0 24px; }
.ak-app-strip > span { text-align: center; }
.ak-app-strip i { display: block; font-size: 28px; }
.ak-app-strip small { display: block; color: var(--elx-muted); font-size: 10px; margin-top: 5px; }
.ak-brand-linkedin { color: #0a66c2; }.ak-brand-whatsapp { color: #078738; }.ak-brand-instagram { color: #b329a5; }.ak-brand-teams { color: #5953bc; }.ak-brand-youtube { color: #e01a25; }.ak-brand-email { color: #2964b4; }
.ak-text-link { color: #6232c2; font-size: 13px; font-weight: 600; }
.ak-demo { min-width: 0; scroll-margin-top: 100px; }
.ak-demo-steps { display: flex; gap: 6px; margin: 0 0 18px; }
.ak-demo-steps button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #e2d9f7; color: #5c5870; background: #ffffffbd; border-radius: 11px; padding: 9px 5px; min-height: 45px; font-size: 11px; }
.ak-demo-steps button[aria-selected=true] { color: #5b2abf; background: #ede6ff; border-color: #ac8af9; box-shadow: inset 0 -2px #7c3cff; }
.ak-demo-steps b { font-size: 12px; }
.ak-demo-stage { display: grid; grid-template-columns: minmax(0,350px) minmax(130px,1fr); align-items: center; gap: 18px; }
.ak-phone { width: 100%; max-width: 350px; height: 684px; border: 7px solid #19191c; border-radius: 37px; background: #fff; overflow: hidden; box-shadow: 0 10px 28px #11133326,0 0 0 2px #a9a7b4; display: grid; grid-template-rows: 24px 53px minmax(0,1fr) 69px 316px 14px; }
.ak-phone-status { display: flex; justify-content: space-between; align-items: center; padding: 5px 17px; font-size: 9px; color: #26242e; }
.ak-camera { width: 11px; height: 11px; background: #17171b; border-radius: 100%; }
.ak-chat-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e9edf2; font-size: 13px; }
.ak-chat-header > .bi-linkedin { color: #0a66c2; margin-left: auto; }
.ak-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e6e0f7; color: #553698; font-size: 10px; font-weight: 800; flex-shrink: 0; }
.ak-chat-header strong { display: block; font-size: 11px; }.ak-chat-header small { display: block; font-size: 9px; color: #697386; }
.ak-conversation { overflow-y: auto; padding: 9px 13px; background: linear-gradient(#fff,#f8fafc); overscroll-behavior-y: auto; scrollbar-width: thin; }
.ak-chat-day { display: block; text-align: center; color: #7d8597; font-size: 9px; margin-bottom: 9px; }
.ak-message { border-radius: 10px; padding: 10px 11px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; margin-bottom: 8px; }
.ak-incoming { background: #edf2f7; max-width: 92%; }.ak-message small { display: block; text-align: right; font-size: 8px; margin-top: 6px; color: #788294; }.ak-outgoing { background: #e5ddff; margin-left: 18px; }
.ak-composer { display: flex; gap: 6px; align-items: center; padding: 7px 10px; border-top: 1px solid #e8edf2; }
.ak-composer textarea { width: 100%; height: 52px; min-width: 0; border: 1px solid #dbe1e8; border-radius: 10px; padding: 7px; resize: none; font-size: 11px; line-height: 1.45; color: #182137; background: #fff; }
.ak-composer button { background: #7550dd; color: #fff; border: 0; width: 32px; height: 36px; border-radius: 9px; flex-shrink: 0; }
.ak-keyboard { background: var(--ak-dark); color: #f8f7fc; padding: 9px 7px; height: 316px; overflow: hidden; }
.ak-mode { height: 100%; display: flex; flex-direction: column; gap: 7px; }
.ak-keyboard button { color: #efedf5; background: #303035; border: 1px solid #44414c; border-radius: 7px; }
.ak-toolbar { display: flex; align-items: center; gap: 4px; padding: 1px 0 9px; }.ak-toolbar button { padding: 5px; min-height: 34px; font-size: 10px; }.ak-toolbar .ak-aryx { color: #c2abff; font-weight: 800; font-size: 14px; background: transparent; border: 0; margin-right: auto; }.ak-toolbar .ak-aryx i { color: #a783ff; }
.ak-keys { display: grid; gap: 7px; margin-top: 5px; }.ak-key-row { display: flex; justify-content: center; gap: 4px; }.ak-key { padding: 0; flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 42px; max-width: 35px; border-radius: 6px; font-size: 17px; background: var(--ak-key); color: #fff; border: 1px solid #44414c; box-shadow: 0 2px #060607; }.ak-key-row:nth-child(2) { padding-inline: 10px; }.ak-key-row .ak-wide { flex: 1.5; max-width: 47px; background: #242429; }.ak-key-bottom .ak-key { font-size: 12px; height: 39px; }.ak-key-bottom .ak-space { flex: 4; max-width: none; }.ak-key-bottom .ak-enter { color: #fff; background: #7952e5; }.ak-keyboard-foot { color: #bdb7cb; font-size: 9px; text-align: center; margin-top: auto; }
.ak-ai-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; }.ak-ai-heading strong { display: block; font-size: 12px; }.ak-ai-heading small { display: block; font-size: 9px; color: #bcb4cf; margin-top: 2px; }.ak-ai-heading button { width: 32px; height: 32px; font-size: 16px; }
.ak-tools { display: flex; gap: 7px; }.ak-tools button { height: 26px; width: 29px; color: #b99cff; font-size: 12px; }
.ak-context { display: flex; gap: 5px; align-items: center; color: #cbc5d7; font-size: 9px; line-height: 1.4; }.ak-context span { flex: 1; }.ak-context button { padding: 4px; font-size: 9px; }
.ak-intent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
[data-initial-intents] { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
[data-initial-intents] .ak-intent-grid, .ak-intent-extras { display: contents; }
.ak-intent-tile { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 7px 2px; min-height: 62px; background: #2c2b31; border: 1px solid #45404d; border-radius: 9px; font-size: 11px; color: #f0edf6; text-align: center; line-height: 1.3; }
.ak-intent-tile i { color: #ae8bff; font-size: 20px; }.ak-keyboard button[aria-pressed=true] { background: #493568; border-color: #c5aaff; box-shadow: inset 0 -2px #a77aff; }
.ak-more-label { display: flex; align-items: center; justify-content: space-between; font-size: 9px; margin: 0 0 7px; color: #c8b8e4; }.ak-more-label button { padding: 3px 8px; font-size: 9px; }
.ak-custom-form { display: flex; flex-direction: column; gap: 6px; }.ak-custom-form label { font-size: 10px; }.ak-custom-form textarea { width: 100%; height: 86px; padding: 7px; resize: none; border-radius: 7px; border: 1px solid #6d5c89; background: #2e2b36; color: #fff; font-size: 11px; }.ak-custom-form small { color: #c2b5d9; font-size: 9px; }.ak-custom-form button { padding: 7px; background: #774bde; }
.ak-suggestion-status { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: #c8b8e4; }.ak-suggestion-status button { padding: 3px 6px; font-size: 9px; }
.ak-suggestion { flex: 1; min-height: 75px; width: 100%; padding: 10px; border: 1px solid #514260; border-radius: 11px; color: #f7f3ff; background: #25212e; resize: none; font-size: 12px !important; line-height: 1.5; scrollbar-width: thin; }
.ak-reply-meta { display: flex; justify-content: space-between; gap: 3px; font-size: 8px; color: #b9afcd; }.ak-reply-actions { display: flex; gap: 4px; }.ak-reply-actions button { min-height: 32px; padding: 5px; font-size: 9px; }.ak-reply-actions button:first-child { margin-right: auto; }.ak-keyboard .ak-insert { display: flex; justify-content: center; gap: 8px; align-items: center; min-height: 38px; background: #8153e8; border-color: #9872ec; font-size: 12px; font-weight: 700; }
.ak-android-bar { background: #141417; display: flex; justify-content: center; align-items: center; }.ak-android-bar::after { content: ''; width: 85px; height: 3px; border-radius: 9px; background: #aaa4b2; }
.ak-demo-explanation h2 { font-size: 20px; line-height: 1.15; margin: 12px 0; }.ak-demo-explanation p { font-size: 12px; line-height: 1.6; }.ak-demo-label { color: #6a3bc9; font-size: 9px; font-weight: 800; letter-spacing: .05em; }.ak-demo-arrows { display: flex; align-items: center; gap: 12px; }.ak-demo-arrows button { width: 35px; height: 35px; color: #6b3ac7; background: #fff; border: 1px solid #ded0f5; border-radius: 50%; }.ak-demo-arrows span { font-size: 11px; color: #695d7c; }.ak-demo-explanation .ak-demo-notice { font-size: 10px; margin: 14px 0 0; }.ak-live-status { font-size: 11px; color: #68527c !important; margin: 16px 0 0; min-height: 34px; }
.ak-three-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }.ak-three-grid .bn-step { margin-right: 12px; }.ak-flow-label { color: #7652c1; font-size: 10px; font-weight: 800; }.ak-example-bubble { padding: 13px; background: #eef3f8; border-radius: 10px; font-size: 13px !important; margin: 14px 0 !important; }.ak-feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.ak-static-keyboard { background: var(--ak-dark); color: #f5efff; border-radius: 12px; padding: 15px; margin: 16px 0; }.ak-static-keyboard strong { font-size: 12px; color: #d4baff; }.ak-static-keyboard p { color: #e0d8eb; font-size: 12px; margin-top: 10px; }.ak-static-keyboard small { display: block; color: #bfb4d0; font-size: 10px; }.ak-static-keyboard .ak-intent-grid { margin-top: 12px; }.ak-static-keyboard .ak-intent-tile { min-height: 68px; }.ak-inserted-example { margin-top: 14px; padding: 12px; border: 1px solid #d9cbf0; border-radius: 10px; }.ak-inserted-example small { color: #7c669e; font-size: 10px; }.ak-inserted-example p { font-size: 12px; margin: 8px 0; }.ak-inserted-example > span { color: #673cbb; font-size: 11px; }
.ak-explorer { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; align-items: start; }.ak-explorer-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.ak-explorer-options button { display: flex; align-items: center; gap: 9px; border: 1px solid #dfd7ee; background: #fff; color: #37304a; padding: 12px; border-radius: 10px; min-height: 48px; font-size: 12px; text-align: left; }.ak-explorer-options i { color: #7c3cff; }.ak-explorer-options button[aria-pressed=true], .ak-anatomy-tabs button[aria-pressed=true] { background: #eee5ff; border-color: #9568df; box-shadow: inset 0 -2px #8c5cd3; }.ak-explorer-result h3 { color: #6a34bb; }.ak-explorer-result blockquote, .ak-settings-example blockquote { border-left: 3px solid #9b7ad6; padding: 12px 16px; margin: 20px 0; color: #3d3156; font-size: 16px; line-height: 1.7; }.ak-explorer-result small { color: var(--elx-muted); font-size: 11px; }
.ak-anatomy { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }.ak-anatomy-tabs { display: flex; gap: 9px; }.ak-anatomy-tabs button { background: #fff; border: 1px solid #d5c5eb; border-radius: 9px; color: #52377c; padding: 10px 15px; font-size: 12px; }.ak-anatomy-viewport { height: 302px; max-width: 480px; padding: 20px; overflow: hidden; }.ak-static-toolbar { display: flex; justify-content: space-between; font-size: 12px; color: #c3a7ff; margin-bottom: 15px; }.ak-anatomy .ak-key { max-width: none; }.ak-anatomy-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 25px; padding-left: 22px; margin: 0; }.ak-anatomy-legend li { padding-left: 3px; color: #7748c7; font-size: 12px; }.ak-anatomy-legend strong { display: block; color: var(--elx-text); }.ak-anatomy-legend span { display: block; color: var(--elx-muted); font-size: 12px; margin-top: 3px; }.ak-static-note { color: #c7b9da; font-size: 10px; display: block; margin-top: 15px; }.ak-static-insert { display: block; text-align: center; background: #7d4dde; border-radius: 8px; padding: 8px; margin-top: 16px; }
.ak-app-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.ak-app-title { display: flex; align-items: center; gap: 9px; }.ak-app-title > i { font-size: 25px; }.ak-app-title h3 { margin: 0; font-size: 15px; }.ak-preview-label { margin-left: auto; background: #f0ebfa; color: #6f55a3; padding: 3px 6px; border-radius: 5px; font-size: 9px; }
.ak-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }.ak-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: center; }.ak-settings label { font-size: 13px; color: #4f465f; }.ak-settings select, .ak-settings output { min-height: 42px; width: 100%; min-width: 0; padding: 8px; font-size: 12px; border: 1px solid #d9cdea; border-radius: 8px; background: #fff; color: #332844; }.ak-settings label:has(input), .ak-settings small { grid-column: 1 / -1; }.ak-settings input { accent-color: #7c3cff; margin-right: 7px; }.ak-settings small { font-size: 11px; color: #6c637a; }.ak-settings-example h3 { font-size: 20px; }
.ak-policy-note { max-width: 830px; margin: 28px auto 0; text-align: center; font-size: 13px; line-height: 1.7; }.ak-policy-note a { color: #6333b5; text-decoration: underline; }.ak-page .bn-final .ak-coming { background: #ffffffed; }.ak-page .bn-final .bn-actions { flex-wrap: wrap; max-width: 480px; flex-shrink: 1; }.ak-page .bn-final h2 { max-width: 480px; }
@media(max-width:1199px) { .ak-hero-grid { grid-template-columns: 1fr 1fr; gap: 30px; }.ak-demo-stage { grid-template-columns: 1fr; }.ak-phone { margin: auto; }.ak-demo-explanation { margin: 18px auto 0; max-width: 350px; }.ak-demo-explanation h2 { font-size: 18px; }.ak-demo-explanation .ak-demo-notice { margin-top: 8px; }.ak-demo-arrows { float: right; margin: 0 0 5px 10px; }.ak-hero h1 { font-size: 52px; }.ak-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:991px) { .ak-hero-grid { grid-template-columns: 1fr; max-width: 700px; gap: 35px; }.ak-hero-copy { max-width: 550px; }.ak-demo { max-width: 580px; width: 100%; margin: auto; }.ak-demo-stage { grid-template-columns: minmax(0,350px) minmax(130px,1fr); gap: 18px; }.ak-demo-explanation { margin: 0; }.ak-demo-arrows { float: none; margin: 0; }.ak-three-grid { grid-template-columns: 1fr; }.ak-conversation-flow { max-width: 600px; margin: auto; }.ak-explorer, .ak-anatomy { grid-template-columns: 1fr; gap: 28px; }.ak-anatomy > div { max-width: 500px; width: 100%; margin: auto; }.ak-app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ak-settings-grid { grid-template-columns: 1fr; } }
@media(max-width:575px) { .ak-hero { padding: 38px 0 35px; }.ak-hero-grid { gap: 26px; }.ak-hero h1 { font-size: clamp(38px,11vw,52px); }.ak-hero-copy > p { font-size: 15px; }.ak-hero-actions { align-items: stretch; flex-direction: column; }.ak-coming { justify-content: center; min-height: 48px; }.ak-play-badge { align-self: flex-start; }.ak-app-strip { gap: 8px; }.ak-app-strip i { font-size: 24px; }.ak-app-strip small { font-size: 8px; }.ak-demo-stage { grid-template-columns: 1fr; }.ak-demo-explanation { margin: 20px auto 0; max-width: 350px; }.ak-demo-arrows { float: right; }.ak-phone { max-width: 350px; }.ak-feature-grid, .ak-app-grid { grid-template-columns: 1fr; }.ak-explorer-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }.ak-explorer-options button { padding: 9px 5px; font-size: 11px; gap: 5px; }.ak-explorer-options i { font-size: 12px; }.ak-demo-steps { gap: 4px; }.ak-demo-steps button { flex-direction: column; padding: 5px 2px; gap: 1px; font-size: 9px; }.ak-demo-steps b { font-size: 10px; }.ak-keys { gap: 6px; }.ak-key-row { gap: 3px; }.ak-anatomy-viewport { padding: 14px 8px; }.ak-anatomy-legend { gap: 14px 20px; }.ak-anatomy-tabs button { padding: 9px 12px; }.ak-static-keyboard .ak-intent-tile { min-height: 58px; }.ak-page .bn-final .bn-actions { width: 100%; max-width: none; }.ak-demo-explanation .ak-demo-notice { clear: both; padding-top: 10px; } }
@media(prefers-reduced-motion:reduce) { .ak-page *, .ak-page *::before, .ak-page *::after { transition: none !important; animation: none !important; } }