/* Four product stories. Their styles are scoped so existing chapters stay intact. */
.devices { overflow:clip; }
.device-stories { width:min(1440px,94%); margin:80px auto 0; }
.device-story { margin:0; }
.device-photo-window { overflow:hidden; border-radius:38px; background:#1c1f23; }
.device-photo-composite { position:relative; aspect-ratio:3/2; transform:scale(calc(1 + var(--photo-scene,0)*.12)); transform-origin:69% 43%; will-change:transform; }
.device-photo-composite>img { width:100%;height:100%;object-fit:fill; }
.projected-screen { position:absolute;top:0;left:0;transform-origin:0 0;background:#fff;color:#232831;overflow:hidden;opacity:0; }
.projected-screen.is-fitted { opacity:1; }
.desktop-site { width:1024px;height:656px; }
.sample-browser { height:30px;display:flex;align-items:center;gap:120px;background:#eff0f2;padding:0 20px;font-size:12px;color:#707780; }
.sample-browser>span { background:#fff;padding:3px 140px;border-radius:5px; }
.sample-site-body { display:grid;grid-template-columns:62% 38%;height:calc(100% - 30px); }
.sample-stay-page { padding:22px 22px 30px; }
.sample-stay-page>header { display:flex;justify-content:space-between;align-items:center;font-size:17px;letter-spacing:.1em;margin-bottom:25px; }
.sample-stay-page>header span { font-size:11px;letter-spacing:0; }
.sample-stay-image { position:relative;height:330px;overflow:hidden; }
.sample-stay-image img { filter:brightness(.8); }
.sample-stay-image strong { position:absolute;left:30px;bottom:25px;font-size:37px;font-weight:500;line-height:1.5;letter-spacing:.06em;color:#fff; }
.sample-stay-page>h3 { font-size:25px;margin:26px 0 10px; }
.sample-stay-page>p { font-size:15px;color:#71747a; }
.sample-link { display:inline-block;font-size:14px;color:#436b64;margin-top:18px;border-bottom:1px solid #b4c7c1;padding-bottom:5px; }
.sample-site-chat { border-left:1px solid #dbe0e5;background:#fcfdfd;padding:26px 22px; }
.sample-site-chat>b { display:block;font-size:23px;margin-bottom:25px; }
.sample-site-chat>p { font-size:17px;line-height:1.85;margin-bottom:21px; }
.sample-user { padding:12px 16px;background:#e8f1ef;border-radius:14px 14px 3px 14px;margin-left:15px; }
.sample-input { margin-top:25px;background:#edf0f1;border:1px solid #e1e4e5;color:#78838d;border-radius:9px;padding:13px 12px;font-size:14px;display:flex;justify-content:space-between; }
.device-story>figcaption { position:static;padding:35px 2% 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;color:#f5f5f7; }
.device-story>figcaption>span { grid-column:1/-1;font-size:12px;letter-spacing:.15em;color:#8196b1; }
.device-story>figcaption>strong { font-size:clamp(29px,3vw,43px);font-weight:550;line-height:1.4; }
.device-story>figcaption>p { font-size:19px;align-self:center;color:#98a6b9; }
.mobile-story { width:83%;margin:120px 0 0 auto; }
.mobile-story .device-photo-window { aspect-ratio:1.35; }
.mobile-story .device-photo-composite { width:100%;height:100%;aspect-ratio:auto;transform:scale(calc(1.22 + var(--photo-scene,0)*.2));transform-origin:50% 48%; }
.mobile-story .device-photo-composite>img { object-fit:fill; }
.mobile-site { width:390px;height:820px;border-radius:45px; }
.mobile-sample-safe { height:38px;background:#fff;clip-path:polygon(0 0,23% 0,23% 70%,77% 70%,77% 0,100% 0,100% 100%,0 100%); }
.mobile-site>.sample-browser { justify-content:center;height:31px;font-size:12px; }
.mobile-site>header { padding:15px 23px;display:flex;justify-content:space-between;font-size:16px;letter-spacing:.1em; }
.mobile-site-photo { position:relative;height:125px; }
.mobile-site-photo>img { filter:brightness(.73); }
.mobile-site-photo>span { position:absolute;bottom:17px;left:20px;font-size:17px;color:#fff; }
.mobile-sample-chat { padding:22px 21px 10px; }
.mobile-sample-chat>b { display:flex;justify-content:space-between;font-size:23px;margin-bottom:18px; }
.mobile-sample-chat>b>span { color:#98a2ac;font-weight:400; }
.mobile-sample-chat>p { font-size:17px;line-height:1.8;margin-bottom:16px; }
.mobile-sample-chat .sample-link { margin-top:0;font-size:15px; }
.mobile-sample-chat .sample-input { margin-top:17px; }
.device-scene-note { font-size:12px;color:#6e7d91;margin-top:45px; }
/* Real hardware carries the language examples, not separate floating chat boxes. */
.language-section { background:#000; }
.language-section .language-controls { margin:48px 0 100px; }
.language-section .language-stage { grid-template-columns:minmax(0,1.18fr) 50px minmax(0,.9fr);gap:16px;align-items:center;perspective:none; }
.language-phone-fan { height:790px;position:relative; }
.language-phone-fan .language-visitor { position:absolute;width:510px;height:765px;left:50%;top:0;transform:translateX(-50%) translateY(calc((1 - var(--fan,0))*24px));z-index:4;display:block; }
.language-phone-hardware { position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:inset(2.6% 15% 3.4% 15% round 48px);pointer-events:none; }
.language-phone-fan .language-surface-label { position:absolute;left:21%;right:21%;bottom:-8px;justify-content:center;gap:14px;font-size:13px;white-space:nowrap; }
.language-phone-fan .language-visitor-window { position:absolute;left:19.3%;top:8.5%;width:61.4%;height:85.5%;min-height:0;transform:none;border-radius:0 0 32px 32px;background:#fff;border:0;box-shadow:none;overflow:auto;scrollbar-width:thin; }
.language-phone-fan .language-window-header { min-height:74px;padding:17px 20px;gap:6px;display:block; }
.language-phone-fan .language-window-header>b { font-size:22px;display:block;margin-bottom:6px; }
.language-phone-fan .language-window-header>span { font-size:12px; }
.language-phone-fan .language-chat-content { padding:22px 19px;gap:20px;min-height:0; }
.language-phone-fan .language-chat-content p { font-size:16px;line-height:1.7; }
.language-phone-fan .language-ai { padding-right:0; }
.language-phone-fan .language-greeting { max-width:none; }
.language-phone-fan .language-user { margin-left:8%;padding:13px 15px; }
.language-phone-fan .language-input-hint { font-size:13px;margin:auto 16px 19px; }
.language-section .language-operator { position:relative;z-index:5;transform:translateY(calc((1 - var(--fan,0))*30px)); }
.language-section .language-operator-window { min-height:0;transform:none;border-radius:22px;box-shadow:0 40px 90px #0008;background:linear-gradient(140deg,#202c40,#111925); }
.language-section .language-review-message>p { font-size:17px; }
.language-section .language-scenario-note { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
.language-section .language-features { margin-top:48px; }
/* A physical monitor surrounds the existing interactive management interface. */
.management-stage { width:min(1500px,100%);margin-top:65px;perspective:none; }
.management-product { position:relative;aspect-ratio:3/2;transform:scale(calc(.92 + var(--monitor-progress,0)*.16));transform-origin:60% 25%; }
.management-hardware { width:100%;height:100%;object-fit:fill;mix-blend-mode:multiply; }
.management-product .management-app { position:absolute;left:10.74%;top:8.79%;width:78.52%;height:58.55%;border:0;border-radius:0;box-shadow:none;transform:none;display:flex;flex-direction:column; }
.management-product .management-topbar { min-height:57px;padding:12px 22px; }
.management-product .management-topbar>small { font-size:12px; }
.management-product .management-workspace { min-height:0;flex:1;overflow:hidden;grid-template-columns:170px minmax(0,1fr); }
.management-product .management-sidebar { padding:20px 12px; }
.management-product .workspace-label { margin-bottom:16px; }
.management-product .management-tabs button { padding:12px 9px;font-size:14px; }
.management-product .workspace-footer { padding-top:16px; }
.management-product .management-panels { padding:22px 27px;overflow-y:auto;overscroll-behavior:contain; }
.management-product .management-panels>section { min-height:0; }
.management-product .panel-heading h3 { font-size:27px; }
.management-product .style-workspace { margin-top:20px;gap:35px; }
.management-product .style-settings fieldset { margin-top:17px; }
.management-product .style-settings legend { margin-bottom:9px;font-size:14px; }
.management-product .style-settings>label { font-size:14px; }
.management-product .custom-chat { max-width:340px; }
.management-product .custom-chat-head { padding:16px; }
.management-product .custom-chat-body { min-height:0;padding:17px; }
.management-product .custom-chat-body>p { margin-top:15px; }
.management-product .custom-chat-head small { font-size:12px; }
.management-product .custom-chat-head strong,.management-product .custom-visitor { font-size:14px; }
.management-product .custom-suggestions { margin-top:15px; }
.management-product .custom-suggestions>span { font-size:12px; }
.management-product .custom-chat-input { font-size:12px;margin-bottom:12px;padding:10px; }
.management-section .management-caption { margin:-25px auto 0;max-width:900px;width:88%; }
.management-section .management-outro { margin-top:95px; }
.management-miniature { display:none; }
/* Conversation sheets align into a concise handoff as the page advances. */
.handoff-summary-track { height:145vh;min-height:1060px;margin-top:25px;--summary-progress:0; }
.handoff-summary-scene { position:sticky;top:80px;height:calc(100svh - 100px);min-height:730px;max-height:920px;display:flex;align-items:center;justify-content:center;flex-direction:column; }
.summary-source { text-align:center;transform:translateY(calc(var(--summary-progress)*-25px));opacity:1; }
.summary-source>span { font-size:13px;color:#8b929b; }
.summary-source>p { font-size:18px;padding:14px 28px;border-radius:18px;background:#e2e9ed;color:#60747c;margin-top:10px; }
.summary-source>p:last-child { width:max-content;margin-left:auto; }
.summary-bridge { height:94px;display:grid;place-items:center;color:#6b9c9c;font-size:46px; }
.summary-bridge>span { transform:rotate(calc(var(--summary-progress)*90deg)); }
.summary-sheets { position:relative;width:100%;height:285px; }
.summary-sheet { position:absolute;left:50%;top:0;width:31%;height:280px;background:#fff;border:1px solid #e3e7ea;border-radius:24px;padding:29px 27px;box-shadow:0 28px 65px #263d4520;transform-origin:50% 85%; }
.summary-sheet:nth-child(1) { transform:translateX(calc(-78% - var(--summary-progress)*76%)) rotate(calc(-12deg + var(--summary-progress)*12deg));z-index:3; }
.summary-sheet:nth-child(2) { transform:translateX(-50%) translateY(calc(26px - var(--summary-progress)*26px));z-index:2; }
.summary-sheet:nth-child(3) { transform:translateX(calc(-22% + var(--summary-progress)*76%)) rotate(calc(12deg - var(--summary-progress)*12deg));z-index:1; }
.summary-sheet>span { display:block;font-size:13px;color:#61777b; }
.summary-sheet>h3 { font-size:clamp(28px,3vw,43px);line-height:1.45;font-weight:550;margin:20px 0 17px;color:#2c3d42; }
.summary-sheet>p { font-size:16px;line-height:1.8;color:#66777b; }
.summary-sheet:nth-child(2) { background:#f8fbfc; }
.summary-sheet:nth-child(3) { background:#edf5f3; }
.summary-scene-caption { text-align:center;font-size:27px;line-height:1.6;font-weight:550;margin-top:50px;color:#728185; }
.summary-scene-caption>span { color:#277b77; }
.handoff-inbox .inbox-app { margin-top:30px; }
@media(max-width:1100px) and (min-width:761px) {
 .language-section .language-stage { grid-template-columns:minmax(0,1fr) 35px minmax(0,1fr);gap:0; }
 .language-phone-fan { transform:scale(.85);margin:-55px -60px;height:780px; }
 .management-product .management-workspace { grid-template-columns:135px minmax(0,1fr); }
 .management-product .management-tabs button { font-size:12px; }
 .management-product .management-panels { padding:18px; }
 .management-product .style-workspace { gap:20px; }
 .management-product .panel-heading h3 { font-size:23px; }
 .management-product .workspace-footer { display:none; }
}
@media(max-width:760px) {
 .device-stories { width:100%;margin-top:45px; }
 .device-photo-window { border-radius:0;aspect-ratio:1; }
 .desktop-story .device-photo-composite { height:100%;width:150%;aspect-ratio:auto;max-width:none;margin-left:-45%;transform:scale(calc(1 + var(--photo-scene,0)*.1)); }
 .mobile-story { width:100%;margin-top:70px; }
 .mobile-story .device-photo-window { aspect-ratio:.64; }
 .mobile-story .device-photo-composite { width:240%;height:100%;margin-left:-70%;transform:scale(calc(1 + var(--photo-scene,0)*.12)); }
 .device-story>figcaption { display:block;padding:25px 6% 0; }
 .device-story>figcaption>strong { display:block;font-size:27px;margin-top:12px; }
 .device-story>figcaption>p { font-size:16px;margin-top:10px; }
 .device-scene-note { font-size:11px; }
 .language-section .language-controls { margin:36px 0 70px;gap:8px; }
 .language-section .language-stage { display:block; }
 .language-phone-fan { height:690px; }
 .language-phone-fan .language-visitor { width:440px;height:660px; }
 .language-phone-fan .language-visitor-window { border-radius:0 0 28px 28px; }
 .language-phone-fan .language-chat-content { padding:17px 16px;gap:15px; }
 .language-phone-fan .language-chat-content p { font-size:15px; }
 .language-phone-fan .language-window-header { padding:15px 16px;min-height:69px; }
 .language-phone-fan .language-input-hint { font-size:12px; }
 .language-phone-hardware { clip-path:inset(2.6% 15% 3.4% 15% round 38px); }
 .language-section .language-translation { margin:4px 0 24px; }
 .language-section .language-operator { transform:none; }
 .language-section .language-review-message>p { font-size:16px; }
 .language-section .language-features { margin-top:34px; }
 .management-stage { width:100%;margin-top:35px; }
 .management-product { aspect-ratio:auto;transform:none; }
 .management-hardware { display:none; }
 .management-product .management-app { position:relative;inset:auto;width:90%;height:auto;max-height:none;margin:5px auto 0;display:block;border:1px solid #e1e2e7;border-radius:23px;box-shadow:0 25px 60px #25253210; }
 .management-product .management-topbar { min-height:65px;padding:15px 18px; }
 .management-product .management-topbar>small { display:none; }
 .management-product .management-workspace { display:block; }
 .management-product .management-sidebar { padding:9px; }
 .management-product .management-tabs button { font-size:12px;padding:9px 2px; }
 .management-product .management-panels { padding:25px 20px;overflow:visible; }
 .management-product .panel-heading h3 { font-size:24px; }
 .management-product .style-workspace { gap:25px; }
 .management-product .style-settings { gap:18px 12px; }
 .management-product .style-settings fieldset { margin:0; }
 .management-product .custom-chat { max-width:100%; }
 .management-product .custom-chat-body { padding:22px 18px; }
 .management-product .custom-chat-body>p { font-size:16px; }
 .management-product .custom-visitor { font-size:15px; }
 .management-section .management-caption { margin:23px auto 0; }
 .management-miniature { display:none; }
 .monitor-mini-frame { position:absolute;top:8.79%;left:10.74%;width:78.52%;height:58.55%;overflow:hidden; }
 .monitor-mini-ui { position:absolute;top:0;left:0;width:1206px;height:600px;transform-origin:0 0;display:grid;grid-template-columns:300px 1fr;background:#fbfbfd; }
 .monitor-mini-ui>div:first-child { padding:34px 30px;background:#edf0f5;color:#5b6372;font-size:29px; }
 .monitor-mini-ui>div:first-child b { display:block;font-size:39px;line-height:1.25;margin-bottom:42px; }
 .monitor-mini-ui>div:first-child span { display:block;margin-top:34px; }
 .monitor-mini-chat { min-width:0;min-height:0;margin:28px 65px;background:#fff;border:2px solid #e4e8ee;border-radius:22px;font-size:28px;line-height:1.65;padding:30px 34px;color:#526372;display:flex;flex-direction:column; }
 .monitor-mini-chat>b { display:block;color:var(--mini-brand,#238aca);font-size:36px;line-height:1.35;margin-bottom:22px;overflow-wrap:anywhere; }
 .monitor-mini-chat>span { display:block;background:var(--mini-tint,#e9f5fb);padding:16px 23px;border-radius:16px;margin-bottom:22px; }
 .monitor-mini-chat>p { font-size:28px;line-height:1.65; }
 .monitor-mini-chat>small { display:flex;justify-content:space-between;border:1px solid #e2e7ed;border-radius:13px;padding:11px 18px;font-size:22px;color:#9ca7b4;margin-top:auto; }
 .monitor-mini-chat>small>i { font-style:normal; }
 .summary-source>p { font-size:15px;padding:13px 18px; }
 .handoff-summary-track { height:auto;min-height:0;margin-top:45px; }
 .handoff-summary-scene { position:relative;top:auto;height:auto;min-height:0;max-height:none; }
 .summary-source { opacity:1;transform:none; }
 .summary-bridge { height:85px;font-size:40px; }
 .summary-sheets { display:grid;gap:15px;height:auto;width:100%; }
 .summary-sheet { position:relative;left:auto;top:auto;width:100%;height:auto;min-height:180px;padding:25px;border-radius:22px;box-shadow:0 15px 35px #263d4510; }
 .summary-sheet:nth-child(n) { transform:translateY(calc((1 - var(--summary-progress,0))*var(--sheet-shift,0px))) rotate(calc((1 - var(--summary-progress,0))*var(--sheet-angle,0deg))); }
 .summary-sheet:nth-child(1) { --sheet-shift:0px;--sheet-angle:-3deg; }
 .summary-sheet:nth-child(2) { --sheet-shift:-40px;--sheet-angle:3deg; }
 .summary-sheet:nth-child(3) { --sheet-shift:-80px;--sheet-angle:-2deg; }
 .summary-sheet h3 { font-size:28px;margin:13px 0; }
 .summary-sheet h3 br { display:none; }
 .summary-sheet p { font-size:16px; }
 .summary-scene-caption { font-size:22px;margin:30px 0 20px; }
 .handoff-inbox .inbox-app { margin-top:30px; }
}
.reduce-motion .device-photo-composite,.reduce-motion .management-product,.reduce-motion .language-operator,.reduce-motion .summary-source,.reduce-motion .summary-bridge>span { transform:none!important; }
.reduce-motion .handoff-summary-track { height:auto;min-height:0; }
.reduce-motion .handoff-summary-scene { position:relative;top:auto; }
@media(prefers-reduced-motion:reduce) {
 .device-photo-composite,.management-product,.language-operator,.summary-source,.summary-bridge>span { transform:none!important; }
 .handoff-summary-track { height:auto;min-height:0; }
 .handoff-summary-scene { position:relative;top:auto; }
}
/* Retain the photographed camera notch. */
.mobile-site { clip-path:polygon(0 0,22% 0,22% 3.6%,77% 3.6%,77% 0,100% 0,100% 100%,0 100%); }

/* Restore the original photographs inside the unchanged story frames. */
.device-story.uses-original-photo .device-photo-composite { width:100%;margin-left:0;transform-origin:50% 50%;transform:scale(calc(1 + var(--photo-scene,0)*.12)); }
.device-story.uses-original-photo .device-photo-composite>img { object-fit:cover;object-position:50% 25%; }
.mobile-story.uses-original-photo .device-photo-composite>img { object-position:50% 52%; }

/* Persistent phones exchange places along a shallow 3D arc. */
.has-language-carousel { isolation:isolate; }
.has-language-carousel .language-visitor { transform-origin:50% 50%; }
.has-language-carousel .language-visitor[data-position="front"] { opacity:1;z-index:4; }
.has-language-carousel .language-visitor[data-position="0"] {
 transform:translateX(calc(-78% - var(--fan,0)*6%)) translateY(-10px) rotate(calc(-13deg - var(--fan,0)*6deg)) scale(.686);opacity:.64;z-index:2;
}
.has-language-carousel .language-visitor[data-position="1"] {
 transform:translateX(calc(-22% + var(--fan,0)*6%)) translateY(-10px) rotate(calc(13deg + var(--fan,0)*6deg)) scale(.686);opacity:.64;z-index:2;
}
.has-language-carousel .language-visitor[data-position="2"] {
 transform:translateX(-50%) translateY(-201px) scale(.59);opacity:.55;z-index:1;
}
.has-language-carousel .language-visitor:not([data-position="front"]) { pointer-events:none; }
.has-language-carousel .language-visitor:not([data-position="front"]) .language-surface-label,
.has-language-carousel.is-turning .language-surface-label { visibility:hidden; }
.has-language-carousel.is-turning .language-visitor { will-change:transform,opacity; }
@media(max-width:760px) {
 .has-language-carousel .language-visitor[data-position="0"] { transform:translateX(calc(-80% - var(--fan,0)*6%)) translateY(6px) rotate(calc(-13deg - var(--fan,0)*6deg)) scale(.761); }
 .has-language-carousel .language-visitor[data-position="1"] { transform:translateX(calc(-20% + var(--fan,0)*6%)) translateY(6px) rotate(calc(13deg + var(--fan,0)*6deg)) scale(.761); }
 .has-language-carousel .language-visitor[data-position="2"] { transform:translateX(-50%) translateY(-160px) scale(.654); }
}