/* Native product illustrations, modeled on DeviBot widget and Prompt & Websites. */
.bot-hero .hero-grid{grid-template-columns:1fr 1.12fr;gap:48px;align-items:center}
.hero-benefits{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;isolation:isolate}
.hero-benefit{margin:0;min-width:0;overflow:hidden;border:1px solid #01c1f738;border-radius:22px;background:#0a3554;box-shadow:0 16px 40px #04224026;transition:transform .3s ease}
.hero-benefit:hover{transform:translateY(-4px)}
.benefit-languages{grid-column:1/-1;display:grid;grid-template-columns:1.12fr 1fr;align-items:center}
.benefit-caption{padding:20px}
.benefit-number{font-size:10px;letter-spacing:.12em;font-weight:700;color:#bcefff;display:block;margin-bottom:9px}
html body #start.family-chapter .hero-benefit h2{font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:1.15;letter-spacing:-.035em;color:#e5f6fe;margin:0 0 9px;font-weight:700}
html body #start.family-chapter .hero-benefit p{font-size:15px;line-height:1.5;color:#c9dce9;margin:0;max-width:none}
.language-demo{height:210px;position:relative;background:radial-gradient(ellipse at center,#037cad4a,transparent 70%)}
.language-orbit{position:absolute;inset:12px 0;width:100%;height:185px;fill:none;stroke:#01c1f740;stroke-dasharray:3 6}
.language-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(140deg,#01c1f7,#007ac1);color:#042240;box-shadow:0 0 35px #01c1f733}
.language-core>span{font-size:24px;font-weight:700}.language-core small{font-size:11px;margin-top:3px}
.language-chip{position:absolute;display:grid;place-items:center;width:39px;height:33px;border-radius:10px;background:#e5f6fe;color:#07537e;font-size:13px;font-weight:700;box-shadow:0 5px 15px #04224028;border:1px solid #01c1f74d}
.lang-1{left:12%;top:25px}.lang-2{right:13%;top:28px}.lang-3{left:3%;top:93px}.lang-4{right:3%;top:94px}.lang-5{left:18%;bottom:24px}.lang-6{right:17%;bottom:22px}.lang-7{left:44%;top:9px}
.chat-demo,.training-demo{margin:14px 14px 0;border-radius:13px;overflow:hidden;background:#d5e6ee;color:#042240;height:265px;border:1px solid #94b5c4}
.demo-chat-head{background:#082a3b;color:#fff;display:flex;align-items:center;gap:8px;padding:11px;font-size:13px}
.demo-avatar{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#23627a;font-weight:700}.demo-chat-head small{display:block;font-size:10px;color:#9eeed7;margin-top:3px}.demo-chat-close{margin-left:auto;font-size:21px}
.demo-chat-body{padding:12px 10px;display:flex;flex-direction:column;gap:11px;height:169px}
.demo-bubble{padding:9px 11px;border-radius:11px;font-size:12px;line-height:1.45;max-width:92%;box-shadow:0 2px 4px #04224012}.guest{background:#fff;align-self:flex-end;border-bottom-right-radius:3px}.staff{background:#bcefff;border-bottom-left-radius:3px}.staff small{display:block;font-size:10px;font-weight:700;color:#07537e;margin-bottom:3px}
.demo-handover{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:#355e71}.demo-handover svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.demo-composer{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin:0 9px;border-radius:9px;background:white;font-size:10px;color:#617382}.demo-composer b{color:#007ac1}
.training-demo{background:#f3f9fc}
.demo-editor-head{padding:14px 12px;display:flex;align-items:center;gap:7px;background:#082a3b;color:white;font-size:12px}.demo-editor-head>span{color:#01c1f7;font-size:18px}
.demo-editor-body{padding:12px}.demo-field-label{display:block;font-size:10px;font-weight:700;margin-bottom:6px}.demo-url{padding:9px 7px;border:1px solid #9ab6c7;background:white;border-radius:7px;font-size:10px;display:flex;align-items:center;gap:5px;margin-bottom:13px;white-space:nowrap}.demo-check{margin-left:auto;color:#007ac1;font-weight:700}
.demo-prompt{background:white;border:1px solid #9ab6c7;border-radius:7px;padding:9px;font-size:11px;line-height:1.5;min-height:67px}.demo-prompt>span{display:inline-block}.demo-prompt i{display:inline-block;height:12px;border-left:2px solid #007ac1;margin-left:3px;vertical-align:middle}.demo-save{margin-top:12px;font-size:10px;font-weight:700;color:#07537e;display:flex;align-items:center;gap:5px}.demo-save>span{display:grid;place-items:center;background:#bcefff;width:18px;height:18px;border-radius:50%}
html[data-theme=light] .hero-benefit{background:#f5fbff;border-color:#007ac126}html[data-theme=light] .benefit-number{color:#007ac1}html[data-theme=light] body #start.family-chapter .hero-benefit h2{color:#042240}html[data-theme=light] body #start.family-chapter .hero-benefit p{color:#36536a}
@media(prefers-reduced-motion:no-preference){
.family-in-view .language-chip{animation:language-drift 5s ease-in-out infinite;animation-delay:calc(var(--chip,0)*-.65s)}
.lang-2{--chip:1}.lang-3{--chip:2}.lang-4{--chip:3}.lang-5{--chip:4}.lang-6{--chip:5}.lang-7{--chip:6}
.family-in-view .language-core{animation:language-glow 5s ease-in-out infinite}
.family-in-view .guest{animation:chat-guest 9s infinite}.family-in-view .demo-handover{animation:chat-handover 9s infinite}.family-in-view .staff{animation:chat-staff 9s infinite}
.family-in-view .demo-prompt span{animation:prompt-reveal 9s infinite;clip-path:inset(0 0 0 0)}.family-in-view .demo-prompt i{animation:caret-blink 1s step-end infinite}
.family-in-view .demo-check{animation:website-ready 9s infinite}.family-in-view .demo-save{animation:knowledge-ready 9s infinite}
}
@keyframes language-drift{0%,100%{transform:translateY(0);box-shadow:0 5px 15px #04224028}50%{transform:translateY(-5px);box-shadow:0 5px 20px #01c1f750}}
@keyframes language-glow{0%,100%{box-shadow:0 0 20px #01c1f733}50%{box-shadow:0 0 40px #01c1f777}}
@keyframes chat-guest{0%,4%{opacity:0;transform:translateY(6px)}12%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes chat-handover{0%,24%{opacity:0}34%,94%{opacity:1}100%{opacity:0}}
@keyframes chat-staff{0%,40%{opacity:0;transform:translateY(7px)}52%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes prompt-reveal{0%,18%{clip-path:inset(0 100% 0 0)}52%,100%{clip-path:inset(0 0 0 0)}}
@keyframes caret-blink{50%{opacity:0}}
@keyframes website-ready{0%,10%{opacity:0}20%,94%{opacity:1}100%{opacity:0}}
@keyframes knowledge-ready{0%,58%{opacity:0;transform:translateY(4px)}68%,94%{opacity:1;transform:none}100%{opacity:0}}
@media(max-width:1100px){.bot-hero .hero-grid{gap:30px;grid-template-columns:1fr 1fr}.benefit-caption{padding:16px}html body #start.family-chapter .hero-benefit h2{font-size:20px}.chat-demo,.training-demo{margin:10px 10px 0}}
@media(max-width:980px){.bot-hero .hero-grid{grid-template-columns:1fr}.bot-hero .hero-visual{width:100%;max-width:700px}}
@media(max-width:560px){.hero-benefits{grid-template-columns:1fr;gap:14px}.benefit-languages{grid-column:auto;display:block}.language-demo{max-width:360px;margin:auto}.benefit-caption{padding:20px}.chat-demo,.training-demo{max-width:360px;margin:16px auto 0;width:calc(100% - 32px)}html body #start.family-chapter .hero-benefit h2{font-size:23px}html body #start.family-chapter .hero-benefit p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.hero-benefit{transition:none}.hero-benefit:hover{transform:none}}
/* Compact hero heading, with a quieter second line on all screen sizes. */
html body #start.bot-hero .hero-copy h1{font-size:clamp(40px,4.6vw,66px);line-height:1.16;letter-spacing:-.04em}
html body #start.bot-hero .hero-copy h1 em{display:inline-block;font-size:.88em;line-height:1.22;margin-top:12px;letter-spacing:-.025em}
@media(max-width:560px){html body #start.bot-hero .hero-copy h1{font-size:clamp(36px,8.5vw,48px)}html body #start.bot-hero .hero-copy h1 em{font-size:.86em;margin-top:9px}}