/* QA60: the hero consumes the Handoff LLM component and its base styles. */
.hero.hero-night-glass-preview .hero-demo-v2 .single-stage-viewport,
.hero.hero-night-glass-preview .hero-demo-v2 .final-demo-poster{display:none!important}
.hero.hero-night-glass-preview .hero-demo-v2-stage{container-type:inline-size;background:radial-gradient(ellipse at 48% 30%,#fff 0,transparent 66%),linear-gradient(145deg,#f1f3f6,#e9edf2)}
.hero.hero-night-glass-preview .hero-demo-v2-stage *{box-sizing:border-box}
.hero.hero-night-glass-preview .hero-demo-source,
.hero.hero-night-glass-preview .hero-demo-fresh{background:transparent!important}
.hero.hero-night-glass-preview .hero-llm-content{position:absolute;inset:0;display:flex;width:100%;height:100%;min-height:0;background:#fffefd;color:#23334f;font-family:Inter,system-ui,sans-serif}
.hero.hero-night-glass-preview .hero-llm-content .hp-chat-thread{width:min(100%,680px);margin:auto;padding:24px 28px 30px}
.hero.hero-night-glass-preview .hero-llm-content .hp-chat-thread h4{max-width:none;font-size:23px}
.hero.hero-night-glass-preview .hero-llm-content .hp-composer{width:calc(100% - 40px);max-width:660px;align-self:center}
.hero.hero-night-glass-preview .hero-demo-source .hp-chat-viewport{margin-bottom:36px}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hero-demo-source .hp-chat-thread{animation:hero-shared-chat-scroll 6.15s cubic-bezier(.45,0,.55,1) .35s both}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hp-scroll-rail i{animation:hero-shared-scroll-thumb 6.15s cubic-bezier(.45,0,.55,1) .35s both}
@keyframes hero-shared-chat-scroll{0%,8%{transform:translateY(0)}82%,100%{transform:translateY(calc(-1 * var(--hero-chat-travel,0px)))}}
@keyframes hero-shared-scroll-thumb{0%,8%{top:0}82%,100%{top:80%}}
.hero.hero-night-glass-preview .hero-demo-source .demo-doneness{left:auto;right:max(28px,calc((100% - 700px)/2));bottom:100px;width:min(350px,calc(100% - 108px));height:32px;grid-template-columns:auto minmax(35px,1fr) auto}
.hero.hero-night-glass-preview .hero-demo-source .demo-doneness>span{font-size:8px}
.hero.hero-night-glass-preview .hero-demo-source .demo-doneness>b{font-size:9px!important}
/* Fresh-start content uses the same user bubble and assistant text, without a second shell. */
.hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste{width:auto;max-width:87%;padding:13px 16px;border:0;border-radius:16px 16px 4px 16px;background:#edf2fb;box-shadow:none;opacity:0;transform:translateY(16px)}
.hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste b{display:inline;margin:0;color:#172e54;font:600 14px/1.65 Inter,system-ui,sans-serif}
.hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste>span{margin:0 0 7px;color:#31598c;font:600 10px/1.3 Inter,system-ui,sans-serif}
.hero.hero-night-glass-preview .hero-llm-content .demo-fresh-reply{display:block;width:auto;max-width:93%;margin:0 0 24px;opacity:0;transform:translateY(15px)}
.hero.hero-night-glass-preview .hero-llm-content .demo-fresh-reply p{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#344862;font:400 14px/1.65 Inter,system-ui,sans-serif}
.hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish{left:auto;right:48px;top:auto;bottom:119px;transform:translateY(12px) scale(.95);min-width:180px;border-color:#b7d9c6;background:#eaf7f0;box-shadow:0 14px 30px -15px #1b594a35}
.hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish>strong{color:#176044}
.hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish>span{color:#357457}
.hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish>i{background:#21734c;box-shadow:0 0 0 4px #21734c10}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="fresh"] .demo-fresh-finish{animation-name:hero-shared-finish}
@keyframes hero-shared-finish{to{opacity:1;transform:translateY(0) scale(1)}}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-paused="true"] *,
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-paused="true"] *::before,
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-paused="true"] *::after{animation-play-state:paused!important}
@container(max-width:520px){
 .hero.hero-night-glass-preview .hero-llm-content .hp-chat-thread{padding:18px 16px 24px}
 .hero.hero-night-glass-preview .hero-llm-content .hp-chat-thread h4{font-size:20px;margin-bottom:20px}
 .hero.hero-night-glass-preview .hero-llm-content .hp-composer{width:calc(100% - 28px);margin-bottom:14px}
 .hero.hero-night-glass-preview .hero-demo-source .demo-doneness{right:16px;bottom:98px;width:calc(100% - 32px)}
 .hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste{max-width:96%;padding:11px 13px}
 .hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste p,
 .hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste b,
 .hero.hero-night-glass-preview .hero-llm-content .demo-fresh-reply p{font-size:12px;line-height:1.55}
 .hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish{right:26px;bottom:112px;min-width:156px;padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){
 .hero.hero-night-glass-preview .hero-llm-content .demo-fresh-paste,
 .hero.hero-night-glass-preview .hero-llm-content .demo-fresh-reply,
 .hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish{animation:none!important;opacity:1;transform:none}
 .hero.hero-night-glass-preview .hero-demo-v2 .demo-confetti{display:none}
}

.hero.hero-night-glass-preview .hero-demo-v2 .seq-pause[hidden]{display:none!important}

/* Thirteen links in canonical reading order: seven left, six right. */
footer.ft-footer .ft-footer-top{grid-template-columns:1.1fr 1.2fr repeat(3,.7fr)!important;gap:32px!important}
footer.ft-footer .ft-nav-col.ft-tools-two-columns{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(7,auto);grid-auto-flow:column;align-content:start;column-gap:22px}
footer.ft-footer .ft-nav-col.ft-tools-two-columns h3{grid-column:1/-1}
footer.ft-footer .ft-nav-col.ft-tools-two-columns a{white-space:nowrap}
@media(min-width:681px) and (max-width:1040px){
 footer.ft-footer .ft-footer-top{grid-template-columns:1.15fr repeat(2,1fr)!important;gap:36px!important}
 footer.ft-footer .ft-nav-col.ft-tools-two-columns{grid-column:2/-1}
}
@media(max-width:680px){
 footer.ft-footer .ft-footer-top{grid-template-columns:1fr 1fr!important;gap:32px 26px!important}
 footer.ft-footer .ft-nav-col.ft-tools-two-columns{grid-column:1/-1;column-gap:26px}
}

/* QA61: explicit viewport sizing; source/fresh are scenes, not page sections. */
.hero.hero-night-glass-preview .hero-demo-v2 .product-body{display:block!important;flex:0 0 auto!important;height:620px!important;min-height:620px!important;block-size:620px!important}
.hero.hero-night-glass-preview .hero-demo-source,
.hero.hero-night-glass-preview .hero-demo-fresh{margin:0;padding:0;min-block-size:0}
.hero.hero-night-glass-preview .hero-demo-v2 .seq-pause:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center;inline-size:auto!important;block-size:32px!important;min-inline-size:88px;clip-path:none!important;overflow:visible!important;white-space:nowrap}
.hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish{bottom:44px}
@media(max-width:767px){
 .hero.hero-night-glass-preview .hero-demo-v2 .product-body{height:560px!important;min-height:560px!important;block-size:560px!important}
 .hero.hero-night-glass-preview .hero-demo-fresh .demo-fresh-finish{bottom:34px}
}

/* QA62: one app frame and one header, with playback controls in that header. */
.hero.hero-night-glass-preview .hero-demo-v2 .hero-browser-chrome.hero-app-header{
 display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center;gap:20px!important;
 height:60px!important;block-size:60px!important;flex:0 0 60px;padding:0 24px!important;
 background:#f7f8fc!important;border-bottom:1px solid #e4e7ee!important;box-shadow:none!important;color:#253451!important;
}
.hero.hero-night-glass-preview .hero-demo-v2 .hero-app-header::after{display:none!important}
.hero.hero-night-glass-preview .hero-app-identity{display:flex;align-items:center;gap:10px;min-width:0}
.hero.hero-night-glass-preview .hero-app-identity svg{width:20px;height:20px;fill:none;stroke:#31598c;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero.hero-night-glass-preview .hero-app-identity b{font:600 14px/1.3 Inter,system-ui,sans-serif;color:#253451}
.hero.hero-night-glass-preview .hero-app-step{display:flex;align-items:center;gap:10px;color:#67778e;font:500 11px/1.3 Inter,system-ui,sans-serif}
.hero.hero-night-glass-preview .hero-app-step small{font:500 10px/1.3 Inter,system-ui,sans-serif;color:#8390a8;font-variant-numeric:tabular-nums}
.hero.hero-night-glass-preview .hero-demo-v2 .hero-app-header .seq-pause:not([hidden]){position:static!important;inset:auto!important;margin:0!important;min-inline-size:86px;min-block-size:32px;block-size:32px!important;font:500 11px/1.3 Inter,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;background:#fff!important;color:#405574!important;box-shadow:none!important}
.hero.hero-night-glass-preview .hero-demo-v2 .hero-app-header .seq-pause:focus-visible{outline:2px solid #3e6dc1;outline-offset:3px}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="fresh"] .hero-app-step{color:#21734c}
@media(max-width:767px){
 .hero.hero-night-glass-preview .hero-demo-v2 .hero-browser-chrome.hero-app-header{gap:12px!important;padding:0 16px!important;height:54px!important;block-size:54px!important;flex-basis:54px}
 .hero.hero-night-glass-preview .hero-app-step>span{display:none}
 .hero.hero-night-glass-preview .hero-app-identity{gap:8px}
 .hero.hero-night-glass-preview .hero-app-identity b{font-size:13px}
}

/* QA63: restore the window dots; the hero remains an automatic demonstration. */
.hero.hero-night-glass-preview .hero-demo-v2 .hero-browser-chrome.hero-app-header{grid-template-columns:minmax(0,1fr) auto!important}
.hero.hero-night-glass-preview .hero-window-controls{display:flex;gap:6px;margin-right:12px}
.hero.hero-night-glass-preview .hero-window-controls i{width:8px;height:8px;flex:none;border-radius:50%;background:#eea0a8}
.hero.hero-night-glass-preview .hero-window-controls i:nth-child(2){background:#e3ca83}
.hero.hero-night-glass-preview .hero-window-controls i:nth-child(3){background:#9bc9b1}
/* Same Doneness card proportions, colors and hierarchy as the approved Handoff pilot. */
.hero.hero-night-glass-preview .hero-doneness-card{position:absolute;z-index:7;right:38px;bottom:108px;width:278px;padding:18px;border:1px solid #efccd4;border-radius:15px;background:linear-gradient(140deg,#fff9f7,#ffedef);box-shadow:0 18px 48px -14px #5a342d45;opacity:0;transform:translateY(18px)}
.hero.hero-night-glass-preview .hero-doneness-card .hp-gauge-head{color:#68645b;font:600 10px/1.2 Inter,system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase}
.hero.hero-night-glass-preview .hero-doneness-card>strong{display:block;margin:9px 0 14px;font:500 30px/1.2 Georgia,serif;letter-spacing:-.6px;color:#c9153a}
.hero.hero-night-glass-preview .hero-doneness-card .hp-gauge-track{height:7px;background:linear-gradient(90deg,#7d9fce 0%,#dfcf78 43%,#e98b82 65%,#ff315b);border-radius:8px;position:relative;margin-bottom:16px}
.hero.hero-night-glass-preview .hero-doneness-card .hp-gauge-track i{position:absolute;left:92%;top:-4px;width:4px;height:15px;border:1px solid #fff;background:#48342e;border-radius:3px;box-shadow:0 2px 4px #0002}
.hero.hero-night-glass-preview .hero-handoff-go{position:relative;width:100%;height:40px;border:1px solid #183c78;border-radius:8px;background:#183c78;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:600 13px/1 Inter,system-ui,sans-serif!important}
.hero.hero-night-glass-preview .hero-handoff-go>span:not(.hero-demo-pointer){font-size:18px}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hero-doneness-card{animation:hero-doneness-arrive .55s cubic-bezier(.22,.8,.22,1) 4.6s both}
@keyframes hero-doneness-arrive{to{opacity:1;transform:none}}
/* Centered primary action; the pointer is attached to its actual click target. */
.hero.hero-night-glass-preview .demo-result-action{position:relative;display:flex;flex-direction:column;justify-content:center;gap:13px;padding-top:24px}
.hero.hero-night-glass-preview .hero-demo-result .demo-result-action>button{order:-1;display:flex;align-items:center;justify-content:center;position:relative;width:min(280px,100%);min-height:60px!important;padding:0 28px!important;border:1px solid #183c78!important;border-radius:12px!important;background:#183c78!important;box-shadow:0 12px 28px -12px #183c7855,inset 0 1px #ffffff1a!important;color:#fff;font:600 16px/1 Inter,system-ui,sans-serif!important}
.hero.hero-night-glass-preview .hero-demo-result .demo-result-action>button::after{display:none}
.hero.hero-night-glass-preview .hero-demo-pointer{position:absolute;left:66%;top:44%;z-index:8;width:34px;height:43px;opacity:0;pointer-events:none;filter:drop-shadow(1px 3px 3px #0003)}
.hero.hero-night-glass-preview .hero-demo-pointer svg{display:block;width:34px;height:43px;fill:none}
.hero.hero-night-glass-preview .hero-demo-pointer>i{position:absolute;top:2px;left:4px;width:25px;height:25px;border:2px solid #3e6dc1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.2)}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hero-demo-pointer{animation:hero-pointer-click 1.6s cubic-bezier(.25,.65,.2,1) 5.7s both}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="result"] .hero-demo-pointer{animation:hero-pointer-click 1.9s cubic-bezier(.25,.65,.2,1) 1.7s both}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hero-demo-pointer>i{animation:hero-pointer-ring .45s ease-out 6.7s both}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="result"] .hero-demo-pointer>i{animation:hero-pointer-ring .45s ease-out 2.9s both}
@keyframes hero-pointer-click{0%{opacity:0;transform:translate(50px,40px)}20%{opacity:1}62%{opacity:1;transform:translate(0,0)}72%{opacity:1;transform:scale(.93)}85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes hero-pointer-ring{0%{opacity:.8;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
/* Confirmation and burst share one center, so the confetti belong to the message. */
.hero.hero-night-glass-preview .hero-finish-cluster{position:absolute;left:50%;top:52%;z-index:9;width:min(290px,calc(100% - 48px));transform:translate(-50%,-50%);pointer-events:none}
.hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;width:100%;padding:19px 22px;border:1px solid #a8d2bb;border-radius:17px;background:#eaf7f0;box-shadow:0 24px 65px -20px #185b4550;transform:scale(.94)}
.hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish>i{width:10px;height:10px;margin:0;background:#21734c}
.hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish>span{margin:0;color:#357457;font:600 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.08em}
.hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish>strong{margin:0;color:#176044;font:500 30px/1.15 Georgia,serif;letter-spacing:-1px}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="fresh"] .hero-finish-cluster .demo-fresh-finish{animation:hero-centered-finish .65s cubic-bezier(.2,.8,.2,1) 3.05s both}
@keyframes hero-centered-finish{to{opacity:1;transform:scale(1)}}
.hero.hero-night-glass-preview .hero-finish-confetti{position:absolute;inset:0;pointer-events:none}
.hero.hero-night-glass-preview .hero-finish-confetti i{position:absolute;left:50%;top:50%;width:5px;height:9px;border-radius:2px;background:#4d91ce;opacity:0}
.hero.hero-night-glass-preview .hero-finish-confetti i:nth-child(3n+2){background:#72b394}
.hero.hero-night-glass-preview .hero-finish-confetti i:nth-child(3n){background:#e36e8b}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="fresh"] .hero-finish-confetti i{animation:hero-centered-burst 1.25s cubic-bezier(.15,.8,.3,1) calc(3.45s + var(--i)*12ms) both}
@keyframes hero-centered-burst{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(20px)}10%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(140px) rotate(120deg)}}
@media(max-width:767px){
 .hero.hero-night-glass-preview .hero-doneness-card{right:18px;bottom:104px;width:min(278px,calc(100% - 36px))}
 .hero.hero-night-glass-preview .hero-demo-result .demo-result-action>button{min-height:56px!important;font-size:15px!important}
 .hero.hero-night-glass-preview .hero-window-controls{margin-right:6px;gap:5px}
 .hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish{padding:18px 20px}
 .hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish>strong{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
 .hero.hero-night-glass-preview .hero-demo-pointer,.hero.hero-night-glass-preview .hero-finish-confetti{display:none!important}
 .hero.hero-night-glass-preview .hero-finish-cluster .demo-fresh-finish{animation:none!important;opacity:1!important;transform:none!important}
}

/* QA64: the blue source bubbles visibly become cooked before the Doneness card. */
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hero-demo-source .hp-message-user{animation:hero-message-cooked 1.1s ease 2.7s both}
.hero.hero-night-glass-preview .hero-demo-v2[data-demo-scene="source"] .hero-demo-source .hp-message-user>span{animation:hero-message-label-cooked 1.1s ease 2.7s both}
@keyframes hero-message-cooked{from{background:#edf2fb;box-shadow:inset 2px 0 transparent}to{background:#fff0f3;box-shadow:inset 2px 0 #ec8298}}
@keyframes hero-message-label-cooked{from{color:#31598c}to{color:#a3354d}}