/* Integrated homepage treatment: a light directory and one product composition.
   Only index.html opts in; the supplied airy and product references stay intact. */
#ai.ai-integrated{background:radial-gradient(ellipse at 12% 20%,#d5e6fc85,transparent 52%),radial-gradient(ellipse at 88% 65%,#e6e0fa80,transparent 55%),#f5f7fc}
#ai.ai-integrated .ai-entrance-head{margin-bottom:26px}
#ai.ai-integrated #ai-title{font-size:38px;line-height:1.35;letter-spacing:-.025em}
#ai.ai-integrated #ai-title br{display:block}
.ai-integrated .ai-role-layout{grid-template-columns:340px minmax(0,1fr);gap:64px}
.ai-integrated .ai-roles{padding:0;margin-bottom:10px;border:0;border-bottom:1px solid #d4deee;border-radius:0;background:none}
.ai-integrated .ai-roles::before{inset:auto auto -1px 0;height:2px;width:calc(100%/3);border-radius:0;background:linear-gradient(90deg,#3c8be4,#9385d2);box-shadow:none}
.ai-integrated .ai-roles button{padding:9px 0 16px;border-radius:0;background:none;font-size:17px;color:#536782}
.ai-integrated .ai-roles button[aria-selected=true]{color:#176dcc;font-weight:700}
.ai-integrated .ai-scene-intro{padding:20px 0 18px;min-height:180px}
.ai-integrated .ai-scene-intro h3{font-size:25px;line-height:1.45;letter-spacing:-.03em;color:#1e3453;margin:0 0 10px}
.ai-integrated .ai-scene-description{font-size:14px;line-height:1.9;color:#62738c}
.ai-integrated .ai-scenarios{grid-template-columns:1fr;gap:8px}
.ai-integrated .ai-scenario{padding:10px 12px;gap:10px;grid-template-columns:32px 1fr;min-height:54px;border:1px solid transparent;border-radius:12px;background:#ffffff66;box-shadow:none}
.ai-integrated .ai-scenario strong{font-weight:600;font-size:15px;color:#405777;line-height:1.5}
.ai-integrated .ai-scenario .ai-no{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#e8effa;color:#6682ab}
.ai-integrated .ai-scenario .ai-no .ri{width:21px;height:21px}
.ai-integrated .ai-scenario[aria-selected=true]{background:#edf4ff;box-shadow:none;border-color:#a9c3eb}
.ai-integrated .ai-scenario[aria-selected=true] .ai-no{background:#347fe0;color:#fff}
.ai-integrated .ai-scenario[aria-selected=true] strong{font-weight:600;color:#185ba7}
.ai-integrated .ai-scenario small{display:block;overflow:hidden;max-height:0;margin-top:0;opacity:0;font-size:13px;line-height:1.9;color:#7b8ba3;transition:max-height .5s ease-in-out,margin .5s ease-in-out,opacity .4s ease-in-out}
.ai-integrated .ai-scenario[aria-selected=true] small{max-height:140px;margin-top:10px;opacity:1}
.ai-integrated .ai-scenario-progress{height:2px;bottom:0;opacity:.6}
.ai-integrated .ai-role-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.ai-integrated .ai-role-actions>.btn{width:100%;height:46px;min-height:46px;min-width:0;padding:0 8px;font-size:13px;gap:5px;white-space:nowrap}
.ai-integrated .ai-role-actions>.btn{background:#fff;border:1px solid #8eafe0;color:#245ba1;box-shadow:0 3px 10px #527dcf0c}
.ai-integrated .ai-role-actions .ri{width:15px;height:15px;flex:none}
.ai-integrated #aiRoleVideo small{font-size:10px;font-weight:500}
.ai-integrated .ai-role-actions>.btn:hover{background:#e9f2ff;border-color:#4e8cdb;box-shadow:0 5px 14px #527dcf1c}
.ai-integrated #aiRoleVideo{background:#2878dc;border-color:#2878dc;color:#fff;box-shadow:0 5px 14px #2878dc20}
.ai-integrated #aiRoleVideo:hover{background:#1766c5;border-color:#1766c5;box-shadow:0 7px 18px #2878dc30}
.ai-integrated .ai-player{position:relative;width:100%;max-width:620px;margin:0 auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;--phone-width:284px;--rail-width:240px}
.ai-integrated .ai-flow-steps{position:absolute;z-index:3;right:0;top:24px;display:flex;flex-direction:column;align-items:stretch;gap:0;width:var(--rail-width);max-width:none;margin:0}
.ai-integrated .ai-flow-steps li{flex:none;gap:16px;font-size:16px;padding:0 0 34px;color:#657792;min-height:76px;align-items:flex-start}
.ai-integrated .ai-flow-steps li:last-child{flex:none}
.ai-integrated .ai-flow-steps li::before{display:none}
.ai-integrated .ai-flow-steps li:not(:last-child)::after{position:absolute;left:15px;right:auto;top:38px;width:2px;min-width:0;height:31px;margin:0;background:linear-gradient(to bottom,#6097e3 50%,#d9e1ef 50%);background-size:100% 200%;background-position:0 100%;transition:background-position .65s ease-in-out}
.ai-integrated .ai-flow-steps li.is-complete::after{background-position:0 0}
.ai-integrated .ai-flow-steps i{width:32px;height:32px;border-radius:50%;font-size:11px;background:#e5ecf7;color:#687f9f;box-shadow:none}
.ai-integrated .ai-flow-steps span{font-weight:500;white-space:nowrap;line-height:1.8}
.ai-integrated .ai-flow-steps small{display:block;font-size:13px;line-height:1.6;color:#60728c;margin-top:2px}
.ai-integrated .ai-flow-steps .is-active{color:#176dcc}
.ai-integrated .ai-flow-steps .is-active span{font-weight:700}
.ai-integrated .ai-flow-steps .is-active i{background:#347fe0;color:white;box-shadow:0 0 0 5px #347fe010}
.ai-integrated .ai-flow-steps .is-complete i{background:#dfebfb;color:#3374c5}
.ai-integrated .ai-flow-stage{display:block;isolation:isolate;height:610px;min-height:610px;max-width:none;padding:0;margin:0}
.ai-integrated .ai-flow-stage::before{content:"";position:absolute;z-index:-1;inset:50px 0 20px 5%;border-radius:48% 48% 42% 40%;background:radial-gradient(ellipse at 45% 50%,#d9e7fcba,#e5dff68a 45%,transparent 70%);pointer-events:none}
.ai-integrated .ai-flow-device{position:absolute;left:0;top:0;width:var(--phone-width);height:590px;max-width:none;border:5px solid #fdfefe;border-radius:40px;box-shadow:0 0 0 1px #bac8dd,0 26px 50px -18px #526a9b40;background:#f8faff}
.ai-integrated .ai-phone-viewport{height:467px}
.ai-integrated .ai-phone-screen{padding:13px 12px 24px}
.ai-integrated .ai-ui-header h4{font-size:17px}
.ai-integrated .ai-ui-block{border-color:#edf1f7;border-radius:13px}
.ai-integrated .ai-ui-block.is-focused{border-color:#a3bfeb;box-shadow:0 0 0 3px #d8e7fb88}
.ai-integrated .ai-insight{position:absolute;z-index:2;right:0;top:282px;width:var(--rail-width);min-height:0;padding:18px 20px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s ease-in-out,transform .55s ease-in-out,visibility .45s}
.ai-integrated.has-key-result .ai-insight{opacity:1;visibility:visible;transform:translateY(0)}
.ai-integrated .ai-insight:has(.ai-detail-preview:not([hidden])){background:#fffffff5;border:1px solid #e8edf7;border-radius:18px;box-shadow:0 25px 45px -20px #526a9b40}
.ai-integrated .ai-assistant-label{margin:0 0 8px;font-size:10px;color:#6b819f;gap:4px}
.ai-integrated .ai-assistant-label .companion-live{width:36px;height:36px;margin-left:-5px}
.ai-integrated .ai-insight-copy{min-height:0}
.ai-integrated .ai-insight h3{font-size:17px;line-height:1.55;margin:0 0 8px;color:#253e60;letter-spacing:-.02em}
.ai-integrated .ai-insight-text{font-size:12px;line-height:1.9;max-width:none}
.ai-integrated[data-beat="ask"] .ai-insight-text,.ai-integrated[data-beat="f"] .ai-insight-text,.ai-integrated .ai-insight-text:empty{display:none}
.ai-integrated .ai-detail-preview{max-height:170px;margin:12px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:12px}
.ai-integrated .ai-detail-preview .ai-ui-stats{gap:16px;margin:0}
.ai-integrated .ai-detail-preview .ai-ui-stats>div{min-width:0;padding:4px 0 12px;background:none;border-radius:0;text-align:left}
.ai-integrated .ai-detail-preview .ai-ui-stats b{font-size:28px;white-space:nowrap;color:#317ad3}
.ai-integrated .ai-detail-preview .ai-ui-stats:has(>div:nth-child(3)){gap:8px}
.ai-integrated .ai-detail-preview .ai-ui-stats:has(>div:nth-child(3)) b{font-size:23px}
.ai-integrated .ai-detail-preview .ai-ui-stats small{font-size:10px;margin-top:7px}
.ai-integrated .ai-detail-preview .ai-ui-callout,.ai-integrated .ai-detail-preview .ai-ui-warning,.ai-integrated .ai-detail-preview .ai-ui-success{background:none;border-radius:0;padding:0;line-height:1.9}
.ai-integrated .ai-detail-preview .ai-ui-table{font-size:12px}
.ai-integrated .ai-detail-preview .ai-ui-table th{background:none}
.ai-integrated .ai-detail-preview .ai-ui-table td,.ai-integrated .ai-detail-preview .ai-ui-table th{padding:7px 0;font-size:11px}
.ai-integrated .ai-detail-preview .ai-ui-rows>div{grid-template-columns:66px 1fr}
.ai-integrated .ai-player-controls{width:var(--phone-width);max-width:none;margin:0;justify-content:center;gap:4px;padding:0;border:0}
.ai-integrated .ai-player-controls button{font-size:11px;min-height:34px;padding:5px 8px}
.ai-integrated .ai-step-navigation{gap:2px}
@media(hover:hover){.ai-integrated .ai-scenario:hover{background:#edf4ff;border-color:#bfd0e9}.ai-integrated .ai-scenario:hover strong{color:#185ba7}}
@media(min-width:1101px){
 .ai-integrated .ai-role-sidebar{display:grid;grid-template-rows:auto auto auto 1fr;min-height:560px}
 .ai-integrated .ai-role-actions{align-self:end}
}
@media(min-width:1101px) and (max-width:1200px){
 .ai-integrated .ai-role-layout{grid-template-columns:300px minmax(0,1fr);gap:40px}
 .ai-integrated .ai-player{--phone-width:274px;--rail-width:210px}
 .ai-integrated .ai-detail-preview .ai-ui-stats:not(:has(>div:nth-child(3))) b{font-size:24px}
 .ai-integrated .ai-insight{padding:16px}
}
@media(min-width:768px) and (max-width:1100px){
 .ai-integrated .ai-entrance-head{grid-template-columns:1fr;gap:20px}
 .ai-integrated .ai-role-layout{grid-template-columns:1fr;gap:40px}
 .ai-integrated .ai-role-sidebar{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
 .ai-integrated .ai-roles{width:300px}
 .ai-integrated .ai-scene-intro{grid-column:1;grid-row:2 / 4;min-height:0;padding:16px 0}
 .ai-integrated .ai-scenarios{grid-column:2;grid-row:1 / 3}
 .ai-integrated .ai-role-actions{grid-column:2;margin-top:20px}
}
@media(max-width:767px){
 #ai.ai-integrated .ai-entrance-head{margin-bottom:22px}
 #ai.ai-integrated #ai-title{font-size:clamp(24px,7vw,28px)}
 .ai-integrated .ai-role-layout{gap:32px}
 .ai-integrated .ai-scene-intro{padding:14px 0 16px;min-height:0}
 .ai-integrated .ai-scene-intro h3{font-size:23px}
 .ai-integrated .ai-scenario{grid-template-columns:36px 1fr;padding:10px 12px}
 .ai-integrated .ai-scenario strong{font-size:15px}
 .ai-integrated .ai-scenario small{font-size:12px}
 .ai-integrated .ai-role-actions{margin-top:22px}
 .ai-integrated .ai-player{--phone-width:280px}
 .ai-integrated .ai-flow-steps{position:relative;top:auto;right:auto;flex-direction:row;max-width:340px;width:100%;margin:0 auto 24px;justify-content:space-between}
 .ai-integrated .ai-flow-steps li{font-size:12px;gap:7px;padding:0;min-height:0;align-items:center}
 .ai-integrated .ai-flow-steps i{width:26px;height:26px;font-size:10px}
 .ai-integrated .ai-flow-steps li:not(:last-child)::after{display:none}
 .ai-integrated .ai-flow-steps small{display:none}
 .ai-integrated .ai-flow-stage{display:flex;flex-direction:column;align-items:center;gap:20px;height:auto;min-height:0}
 .ai-integrated .ai-flow-device{position:relative;left:auto;top:auto;order:1;max-width:100%;flex:none}
 .ai-integrated .ai-insight{display:none}
 .ai-integrated .ai-insight:has(.ai-detail-preview:not([hidden])){border:0;background:none;border-radius:0;box-shadow:none}
 .ai-integrated .ai-assistant-label{margin-bottom:5px}
 .ai-integrated .ai-insight h3{font-size:18px;margin-bottom:6px}
 .ai-integrated .ai-detail-preview{display:none!important}
 .ai-integrated .ai-player-controls{margin:20px auto 0;gap:4px}
 .ai-integrated .ai-flow-stage::before{inset:100px -10px 0}
}
@media(prefers-reduced-motion:reduce){.ai-integrated .ai-scenario small,.ai-integrated .ai-insight,.ai-integrated .ai-flow-steps li::after{transition:none}}
/* Give the hero composition room at wide and short desktop viewports. */
#aiFlowResume[hidden]{display:none}
#aiFlowResume{min-height:38px;padding:7px 12px;border:1px solid #bdd5f5;border-radius:10px;background:#e8f2ff;color:#1768bf;font-size:13px}
#aiFlowResume:focus-visible{outline:2px solid #1768bf;outline-offset:3px}
@media(min-width:768px){
 .hero-expanded .hero-scene{max-width:1360px;width:100%;padding-inline:24px;margin-top:0}
 .hero-expanded .hero-proof{margin-top:14px}
 .hero-expanded .hero-proof+.hero-cta{margin-top:16px}
 .hero-expanded .hero-sub.scene-subhead{margin-top:12px}
}

/* Match the section heading scale used by the product pages. */
#videos #film-title{font-size:38px;line-height:1.3;max-width:none}
@media(max-width:767px){#videos #film-title,#ai.ai-integrated #ai-title{font-size:28px;line-height:1.35}}