/* AI Connect extends the site's existing tokens, buttons and two-column grid. */
.ai-home { position:relative; isolation:isolate; background:#eff8ff; overflow:hidden; }
.ai-home > .container { position:relative; z-index:1; }
.ai-home-heading { margin-bottom:var(--space-3xl); }
.ai-home-heading h2 { color:var(--black); }
.ai-home-heading .text-gradient { white-space:nowrap; }
.ai-network { position:absolute; inset:-3%; width:106%; height:106%; max-width:none; color:#5e9bc7; opacity:.12; pointer-events:none; animation:ai-network-drift 18s ease-in-out infinite alternate; animation-play-state:paused; }
.ai-home.is-network-playing .ai-network { animation-play-state:running; }
@keyframes ai-network-drift { from { transform:translate3d(-8px,-6px,0); } to { transform:translate3d(8px,6px,0); } }
.ai-home .module-showcase { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.ai-copy { max-width:520px; }
.ai-home .ai-copy h3 { font-size:clamp(1.8rem,3vw,2.25rem); line-height:1.2; letter-spacing:-.025em; }
.ai-copy .ai-own { color:var(--gray-900); font-weight:600; margin-bottom:var(--space-md); }
.ai-copy .module-tag svg { width:16px; height:16px; }
.ai-ecosystems { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm); margin:var(--space-lg) 0; }
.ai-ecosystems > span { border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--white); color:var(--gray-700); padding:8px 14px; font-size:.875rem; font-weight:600; }
.ai-demo-wrap { min-width:0; width:100%; }
.ai-demo { border:1px solid var(--gray-200); border-radius:18px; background:var(--white); box-shadow:0 24px 64px -24px rgba(35,24,105,.24); overflow:hidden; font-size:13px; color:var(--gray-800); text-align:left; }
.ai-demo p { margin:0; }
.ai-demo-top { min-height:58px; display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--gray-200); }
.ai-assistant-mark { width:28px; height:28px; display:grid; place-items:center; color:var(--primary-dark); background:#eeebff; border-radius:8px; }
.ai-assistant-mark svg { width:18px; height:18px; }
.ai-demo-label { margin-left:auto; color:var(--gray-500); font-size:10px; }
.ai-demo-columns { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(180px,1fr); }
.ai-chat { padding:18px; display:flex; flex-direction:column; gap:14px; }
.ai-file { display:flex; gap:8px; align-items:center; color:var(--gray-600); font-size:12px; }
.ai-file svg { width:18px; height:18px; color:var(--success); flex-shrink:0; }
.ai-file span:last-child:not(:nth-child(2)) { margin-left:auto; font-size:10px; }
.ai-user-message { border-radius:12px 12px 2px 12px; background:var(--gray-100); padding:12px 14px; }
.ai-user-message small,.ai-example-answer small { display:block; color:var(--gray-500); font-size:11px; font-weight:600; margin-bottom:4px; }
.ai-user-message p { line-height:1.55; min-height:6.2em; }
.ai-demo-steps { padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-size:12px; }
.ai-demo-steps li { display:flex; align-items:center; gap:8px; min-height:20px; }
.ai-step-mark { display:grid; place-items:center; color:var(--success); width:17px; height:17px; flex-shrink:0; border-radius:50%; background:#e3f5ec; font-size:11px; font-weight:700; }
.ai-demo.is-ready .ai-demo-steps li { opacity:.28; transition:opacity .25s; }
.ai-demo.is-ready .ai-demo-steps li.is-complete,.ai-demo.is-ready .ai-demo-steps li.is-active { opacity:1; }
.ai-demo.is-ready .ai-demo-steps li:not(.is-complete) .ai-step-mark { color:transparent; background:var(--gray-100); border:1px solid var(--gray-300); }
.ai-demo.is-ready .ai-demo-steps li.is-active .ai-step-mark { border-color:var(--primary-dark); background:#eeebff; }
.ai-answer { min-height:8.3em; opacity:1; transition:opacity .3s; }
.ai-answer p { min-height:6.2em; line-height:1.55; }
.ai-demo[data-stage="0"] .ai-answer,.ai-demo[data-stage="1"] .ai-answer,.ai-demo[data-stage="2"] .ai-answer,.ai-demo[data-stage="3"] .ai-answer,.ai-demo[data-stage="4"] .ai-answer { opacity:0; visibility:hidden; }
.ai-open-draft { color:var(--primary-dark); background:#eeebff; border:1px solid #dcd6ff; border-radius:8px; font:inherit; font-weight:600; padding:7px 12px; margin-top:10px; cursor:pointer; }
.ai-open-draft:hover { background:#e1dbff; }
.ai-preview { padding:18px 12px; background:var(--gray-50); border-left:1px solid var(--gray-200); }
.ai-preview > img { display:block; width:92px; height:auto; margin-bottom:20px; }
.ai-preview-caption { display:block; font-size:10px; color:var(--gray-500); margin-bottom:8px; }
.ai-draft { background:var(--white); border:1px solid var(--gray-200); border-radius:12px; padding:16px; text-align:left; }
.ai-preview .ai-draft { padding:12px; }
.ai-draft-heading { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.ai-draft-heading svg { width:20px; height:20px; color:var(--primary-dark); flex-shrink:0; }
.ai-preview .ai-draft-heading { font-size:11px; gap:6px; }
.ai-preview .ai-draft-heading svg { width:16px; height:16px; }
.ai-status { margin-left:auto; font-size:10px; background:#eeebff; color:var(--primary-dark); padding:3px 7px; border-radius:99px; }
.ai-draft-counts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.ai-draft-counts > div { font-size:26px; font-weight:700; color:var(--primary-dark); }
.ai-draft-counts small { display:block; font-size:11px; color:var(--gray-500); font-weight:500; }
.ai-draft dl { margin:0; display:grid; gap:14px; }
.ai-draft dt { color:var(--gray-500); font-size:11px; margin-bottom:4px; }
.ai-draft dd { margin:0; font-size:12px; font-weight:600; }
.ai-draft dl > div { padding:10px 12px; border:1px solid var(--gray-200); border-radius:8px; background:var(--gray-50); }
.ai-draft dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ai-preview .ai-draft dl { grid-template-columns:1fr; }
.ai-preview .ai-draft dl > div { padding:8px; }
.ai-preview .ai-draft dd { font-size:11px; }
.ai-item-list,.ai-supplier-list { margin-top:18px; }
.ai-item-list > small,.ai-supplier-list > small { display:block; font-size:11px; color:var(--gray-500); margin-bottom:8px; }
.ai-item-list table { width:100%; border-collapse:collapse; font-size:11px; }
.ai-item-list th,.ai-item-list td { padding:9px 10px; border-bottom:1px solid var(--gray-200); text-align:left; }
.ai-item-list th { color:var(--gray-600); background:var(--gray-50); font-weight:600; }
.ai-item-list th:last-child,.ai-item-list td:last-child { text-align:right; white-space:nowrap; }
.ai-more-items { display:block; padding-top:8px; font-size:10px; color:var(--gray-500); }
.ai-supplier-list ul { padding:0; margin:0; display:grid; gap:6px; }
.ai-supplier-list li { display:flex; align-items:center; gap:8px; border:1px solid var(--gray-200); border-radius:8px; padding:8px 10px; font-size:12px; background:var(--white); }
.ai-company-mark { display:grid; place-items:center; width:22px; height:22px; flex-shrink:0; border-radius:6px; background:#eef4ff; color:var(--primary-dark); font-size:10px; }
.ai-preview .ai-supplier-list li { font-size:10px; padding:7px; gap:5px; line-height:1.4; }
.ai-preview .ai-company-mark { width:17px; height:20px; font-size:9px; }
/* Compact homepage preview without shrinking its text or changing field order. */
.ai-home .ai-demo-top { min-height:50px; padding:10px 18px; }
.ai-home .ai-preview { padding:14px 12px; }
.ai-home .ai-preview > img { margin-bottom:12px; }
.ai-home .ai-preview .ai-draft { padding:10px; }
.ai-home .ai-preview .ai-draft-counts { margin:12px 0; }
.ai-home .ai-preview .ai-draft dl > div { padding:6px 8px; }
.ai-home .ai-preview .ai-draft dt { margin-bottom:2px; }
.ai-home .ai-preview .ai-supplier-list { margin-top:10px; }
.ai-home .ai-preview .ai-supplier-list li { padding:5px 7px; }
.ai-home .ai-preview .ai-draft-foot { padding-top:10px; }
.ai-home .ai-demo-bottom { min-height:36px; padding:4px 16px; }
.ai-home .ai-chat { padding:14px 18px; gap:10px; }
.ai-home .ai-demo-steps { gap:5px; }
.ai-draft-lists { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; }
.ai-example .ai-draft-counts { margin:12px 0; }
.ai-example .ai-item-list th,.ai-example .ai-item-list td { padding:8px 6px; }
.ai-example .ai-supplier-list li { padding:9px 8px; }
.ai-draft-foot { font-size:10px; color:var(--gray-500); padding-top:16px; }
.ai-demo [data-fill] { transition:opacity .35s,transform .35s; }
.ai-demo .is-empty { opacity:0; transform:translateY(5px); }
.ai-demo-bottom { min-height:42px; display:flex; align-items:center; gap:8px; justify-content:space-between; border-top:1px solid var(--gray-200); padding:8px 16px; color:var(--gray-500); font-size:10px; }
.ai-demo-toggle { display:grid; place-items:center; width:28px; height:28px; padding:0; flex-shrink:0; border:0; border-radius:50%; background:var(--gray-800); color:var(--white); cursor:pointer; }
.ai-demo-toggle[hidden] { display:none; }
.ai-draft-dialog { max-width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; width:100%; padding:40px 24px 24px; margin:auto; border:1px solid var(--gray-200); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); color:var(--gray-800); }
.ai-draft-dialog::backdrop { background:rgba(17,24,39,.45); }
.ai-draft-dialog > p { margin:24px 0; color:var(--gray-600); font-size:14px; }
.ai-dialog-close { position:absolute; right:12px; top:6px; font-size:28px; color:var(--gray-500); border:0; background:none; cursor:pointer; }
.ai-demo-wrap button:focus-visible,.ai-page a:focus-visible { outline:3px solid var(--primary-light); outline-offset:3px; }
.ai-page-hero { padding-bottom:var(--space-4xl); text-align:left; }
.ai-page .breadcrumb { justify-content:flex-start; flex-wrap:wrap; }
.ai-hero-grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:var(--space-3xl); margin-top:var(--space-2xl); }
.ai-page-hero h1 { font-size:clamp(2rem,3.5vw,2.5rem); line-height:1.2; margin-bottom:var(--space-lg); max-width:650px; }
.ai-page-hero .lead { margin:0 0 var(--space-xl); max-width:650px; font-size:1rem; line-height:1.6; color:var(--gray-600); }
.ai-bridge { padding:var(--space-xl); border:1px solid var(--gray-200); border-radius:18px; background:var(--white); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; }
.ai-bridge-top { text-align:center; }
.ai-bridge-top > small { color:var(--gray-500); }
.ai-bridge .ai-ecosystems { justify-content:center; margin:12px 0 0; }
.ai-wire { color:var(--gray-400); font-size:24px; line-height:1; height:40px; display:grid; place-items:center; }
.ai-bridge-connect { display:flex; align-items:center; gap:12px; border:1px solid #dcd6ff; background:#f5f3ff; padding:18px 20px; border-radius:12px; color:var(--primary-dark); }
.ai-bridge-connect svg { width:24px; height:24px; }
.ai-bridge-connect small { border-left:1px solid #dcd6ff; padding-left:10px; font-size:10px; }
.ai-bridge-tenflex { display:grid; justify-items:center; gap:10px; padding:16px; }
.ai-bridge-tenflex img { width:140px; height:auto; }
.ai-bridge-tenflex span { font-size:12px; color:var(--gray-500); }
.ai-statement { background:var(--gray-50); text-align:center; padding:var(--space-3xl) 0; }
.ai-statement p { color:var(--gray-500); font-size:clamp(1rem,2vw,1.25rem); margin-bottom:var(--space-md); }
.ai-statement h2 { max-width:900px; margin:0 auto; font-size:clamp(1.6rem,3vw,2.25rem); color:var(--primary-dark); }
.ai-flow { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3xl); padding:0; margin:0; }
.ai-flow li { position:relative; }
.ai-flow li:not(:last-child)::after { content:'→'; position:absolute; right:-42px; top:12px; color:var(--gray-400); font-size:24px; }
.ai-flow-label { display:flex; align-items:center; gap:12px; color:var(--primary-dark); font-size:13px; font-weight:600; margin-bottom:24px; }
.ai-flow-label svg { width:46px; height:46px; padding:12px; background:#eeebff; border-radius:12px; }
.ai-flow h3 { font-size:1.25rem; margin-bottom:var(--space-md); }
.ai-flow p { color:var(--gray-600); }
.ai-example-section,.ai-security { background:var(--gray-50); }
.ai-example-section h2 { font-size:clamp(1.8rem,3vw,2.25rem); line-height:1.2; margin-bottom:var(--space-lg); }
.ai-example-tag svg { width:16px; height:16px; flex-shrink:0; }
.ai-example { padding:var(--space-lg); background:var(--white); border:1px solid var(--gray-200); border-radius:18px; box-shadow:var(--shadow-lg); }
.ai-example-chat { display:grid; gap:16px; font-size:14px; }
.ai-example .ai-user-message p { min-height:0; }
.ai-example p { margin:0; }
.ai-example-answer { padding:0 14px 16px; }
.ai-example-note { margin-top:16px!important; color:var(--gray-500); font-size:11px; }
.ai-models .section-header { max-width:850px; }
.ai-heading-line { display:block; }
.ai-models .ai-ecosystems { justify-content:center; }
.ai-compat { text-align:center; font-size:12px; color:var(--gray-500); margin-top:var(--space-lg); }
.ai-security-intro { max-width:820px; margin-bottom:var(--space-2xl); }
.ai-security-intro h2 { margin:var(--space-lg) 0; }
.ai-security-intro p { color:var(--gray-600); }
.ai-control-icon { display:inline-grid; place-items:center; width:46px; height:46px; flex-shrink:0; background:#eeebff; color:var(--primary-dark); border-radius:12px; }
.ai-control-icon svg { width:24px; height:24px; }
.ai-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xl); }
.ai-controls article { display:flex; align-items:flex-start; gap:var(--space-lg); padding:var(--space-lg); border-radius:var(--radius-lg); border:1px solid var(--gray-200); background:var(--white); }
.ai-controls h3 { font-size:1.125rem; margin-bottom:var(--space-sm); }
.ai-controls p { color:var(--gray-600); font-size:.9375rem; margin:0; }
.ai-policy { margin-top:var(--space-xl); max-width:850px; font-size:.8125rem; color:var(--gray-500); }
.ai-related { text-align:center; padding:var(--space-3xl) 0; }
.ai-related h2 { font-size:1.5rem; margin-bottom:var(--space-lg); }
.ai-related .container > div { display:flex; gap:var(--space-md); flex-wrap:wrap; justify-content:center; }
.ai-page .cta h2 { max-width:900px; margin-inline:auto; }
.ai-page [id] { scroll-margin-top:100px; }
@media (max-width:1024px) {
 .ai-home .module-showcase,.ai-hero-grid { grid-template-columns:1fr; }
 .ai-copy { max-width:760px; }
 .ai-demo-wrap,.ai-bridge { max-width:700px; margin-inline:auto; }
 .ai-hero-grid { gap:var(--space-2xl); }
}
@media (max-width:640px) {
 .ai-home-heading { margin-bottom:var(--space-2xl); }
 .ai-demo-columns { grid-template-columns:1fr; }
 .ai-preview { display:none; }
 .ai-chat { padding:16px; gap:12px; }
 .ai-user-message p { min-height:4.65em; }
 .ai-answer p { min-height:4.65em; }
 .ai-answer { min-height:7.3em; }
 .ai-demo-label { max-width:80px; text-align:right; line-height:1.3; }
 .ai-demo-bottom { padding-inline:12px; }
 .ai-flow,.ai-controls { grid-template-columns:1fr; }
 .ai-flow { gap:48px; }
 .ai-flow li:not(:last-child)::after { content:'↓'; top:auto; right:auto; bottom:-35px; left:12px; }
 .ai-bridge { padding:var(--space-lg); width:100%; }
 .ai-bridge-connect { padding:16px 12px; gap:8px; font-size:14px; }
 .ai-bridge-connect small { display:none; }
 .ai-controls article { padding:20px; gap:16px; }
 .ai-page-hero { padding-bottom:var(--space-3xl); }
 .ai-example { padding:16px; }
 .ai-draft dl { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
 .ai-demo * { animation:none!important; transition:none!important; }
 .ai-network { animation:none!important; }
}
@media (max-width:520px) { .ai-draft-lists { grid-template-columns:1fr; gap:0; } }