/* Product previews and supporting pages */
.hero-layout{grid-template-columns:.84fr 1.16fr;gap:28px;min-height:660px}.hero-visual{padding:32px 0 15px;perspective:1300px;--tilt-x:0deg;--tilt-y:0deg}.panel-stage{position:relative;height:425px;transform-style:preserve-3d}.preview-window{position:absolute;width:78%;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s;will-change:transform}.preview-window .app-content{min-height:292px}.preview-window .app-sidebar{width:112px;padding:15px 7px}.preview-window .app-main{padding:18px}.preview-window .app-brand{padding-bottom:17px}.preview-window .app-menu{font-size:9px;padding:8px 7px}.preview-window .app-greeting{font-size:19px;line-height:1.15}.preview-window .app-main-head{margin-bottom:14px}.preview-window .app-table{padding:0 9px}.preview-window .table-row{padding:8px 0}.preview-label{font-size:8px;font-weight:800;letter-spacing:.12em;color:#009685;margin-bottom:8px}.notifications-window{left:0;top:5px;z-index:3;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-2deg)}.attention-window{right:-3%;top:112px;z-index:2;transform:rotateX(calc(var(--tilt-x) * .6)) rotateY(calc(var(--tilt-y) * .6)) rotate(2deg)}.hero-visual[data-active="attention"] .notifications-window{z-index:2;transform:translate(-12px,-7px) rotateX(calc(var(--tilt-x) * .6)) rotateY(calc(var(--tilt-y) * .6)) rotate(-3deg)}.hero-visual[data-active="attention"] .attention-window{z-index:3;transform:translate(-12px,-8px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(1deg)}.avatar-dot{width:27px;height:27px;display:grid;place-items:center;flex:none;border-radius:50%;background:#d7f4eb;color:#087f70;font-weight:800;font-size:10px}.avatar-dot.alt{background:#e2e9fa;color:#465d95}.avatar-dot.third{background:#fff0d3;color:#ae6b06}.preview-controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:6px;margin:5px 0 0}.preview-controls>span{font-size:11px;color:#61728b;margin-right:7px}.preview-switch{border:1px solid #d7e5ec;border-radius:99px;background:#fff;color:#52657d;font:700 11px var(--body);padding:8px 12px;cursor:pointer;transition:background .2s,color .2s,border .2s}.preview-switch[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}.preview-switch:focus-visible{outline:3px solid #ffb948;outline-offset:3px}.product-link{display:inline-flex;align-items:center;gap:8px;color:#008b7b;font-size:14px;font-weight:800;margin-top:20px}.product-link svg{width:17px;height:17px}.product-link:hover{color:#005c53}.context-section{padding-top:20px}.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.context-intro{max-width:480px;color:var(--muted);line-height:1.75;font-size:17px;margin:25px 0 0}.context-list article{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--border)}.context-list article:first-child{padding-top:0}.context-number{font:800 12px var(--heading);color:#00a992;padding-top:5px}.context-list h3{font:800 17px var(--heading);letter-spacing:-.035em;margin:0 0 7px}.context-list p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.product-hero{background:#eff7fb;padding:75px 0 90px;overflow:hidden}.product-hero-grid{display:grid;grid-template-columns:1fr .92fr;align-items:center;gap:80px}.back-link{display:inline-block;font-size:13px;font-weight:700;color:#527087;margin-bottom:44px}.back-link:hover{color:#008b7b}.product-hero h1{font:800 clamp(43px,5vw,68px)/1.08 var(--heading);letter-spacing:-.055em;margin:0}.product-hero h1 span,.detail-heading h2 span,.detail-cta h2 span{color:var(--teal)}.product-lead{max-width:570px;font-size:20px;line-height:1.6;color:#43516a;margin:24px 0 29px}.product-disclaimer{font-size:12px;color:#64758b;margin:22px 0 0}.detail-preview{background:#fff;border:1px solid #d2e0eb;border-radius:14px;box-shadow:0 22px 55px #24476322;overflow:hidden;transform:rotate(1.5deg)}.detail-preview-bar{height:38px;background:#f7f9fb;border-bottom:1px solid #e0e9ef;display:flex;align-items:center;gap:5px;padding:0 15px}.detail-preview-bar span{width:7px;height:7px;border-radius:50%;background:#cedbe4}.detail-preview-bar b{font-size:10px;font-weight:500;color:#8b99aa;margin:auto}.detail-preview-body{padding:30px}.detail-icon{display:grid;place-items:center;width:48px;height:48px;background:#ddf6ef;color:#008c7d;border-radius:12px;float:right}.detail-icon svg{width:25px;height:25px}.detail-kicker{font-size:10px;letter-spacing:.12em;font-weight:800;color:#008b7b;margin:5px 0 12px}.detail-preview h2{font:800 26px var(--heading);letter-spacing:-.05em;margin:0}.detail-subtitle{font-size:13px;color:#74849a;margin:8px 0 24px}.detail-row{display:flex;align-items:center;gap:12px;border-top:1px solid #e8eef2;padding:15px 0}.detail-row-icon{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:8px;color:#008f82;background:#e5f5f1}.detail-row-icon svg{width:18px;height:18px}.detail-row p{flex:1;margin:0}.detail-row b,.detail-row small{display:block}.detail-row b{font-size:13px}.detail-row small{font-size:11px;color:#7c8ba0;margin-top:4px}.detail-row em{font-size:10px;font-style:normal;font-weight:700;color:#97600d;background:#fff0d2;border-radius:5px;padding:7px 8px}.detail-footnote{text-align:right;font-size:10px;color:#8a98a8;margin:18px 0 0}.detail-heading{max-width:720px}.detail-heading>p:last-child{color:var(--muted);font-size:17px;line-height:1.7}.detail-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:50px}.detail-steps article{border-top:1px solid #cadae4;padding-top:22px}.detail-steps article>span{font:800 12px var(--heading);color:#00a992}.detail-steps h3{font:800 19px var(--heading);letter-spacing:-.035em;margin:18px 0 10px}.detail-steps p{font-size:15px;line-height:1.7;color:var(--muted)}.detail-note{display:flex;align-items:flex-start;gap:14px;background:#f0f9f7;border:1px solid #d8eee8;border-radius:10px;padding:20px 23px;margin-top:40px;color:#315f5b}.detail-note svg{color:#008d7c}.detail-note p{font-size:14px;line-height:1.65;margin:0}.detail-cta{background:#eff7fb;padding:65px 0}.detail-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.detail-cta h2{font:800 clamp(30px,3vw,42px) var(--heading);letter-spacing:-.05em;margin:0}.detail-cta p:last-child{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:0}@media(max-width:1100px){.hero-layout{grid-template-columns:.9fr 1.1fr}.preview-window{width:81%}.preview-window .app-sidebar{width:90px}.preview-window .app-main{padding:14px}.preview-window .app-greeting{font-size:16px}.preview-window .app-menu{font-size:8px}.context-grid{gap:50px}.product-hero-grid{gap:40px}}@media(max-width:780px){.hero-layout{grid-template-columns:1fr;min-height:0;gap:0}.hero-visual{padding:18px 0 0;max-width:610px;margin:auto;width:100%}.panel-stage{height:400px}.preview-window{width:76%}.attention-window{right:0;top:105px}.preview-window .app-sidebar{width:105px}.context-grid{grid-template-columns:1fr;gap:40px}.context-section{padding-top:0}.product-hero-grid{grid-template-columns:1fr;gap:45px}.product-hero{padding:55px 0 75px}.back-link{margin-bottom:35px}.detail-preview{max-width:540px;width:100%;margin:auto}.detail-steps{gap:20px}.detail-cta-inner{align-items:flex-start;flex-direction:column}}@media(max-width:480px){.hero-visual{padding-top:20px}.panel-stage{height:294px}.preview-window{width:86%}.preview-window .app-content{min-height:0}.preview-window .app-sidebar{width:71px;padding:10px 4px}.preview-window .app-brand{font-size:10px;padding:0 3px 12px}.preview-window .app-menu{font-size:7px;gap:4px;padding:7px 3px}.preview-window .app-menu svg{width:11px;height:11px}.preview-window .app-main{padding:11px 8px}.preview-window .app-greeting{font-size:13px}.preview-window .app-main-head{margin-bottom:8px}.preview-window .app-main-head p{font-size:8px}.preview-window .app-avatar{width:22px;height:22px;font-size:8px}.preview-label{font-size:7px;margin-bottom:5px}.preview-window .table-title{font-size:9px;padding:8px 0}.preview-window .table-title span{font-size:7px}.preview-window .table-row{padding:6px 0}.preview-window .table-row b,.preview-window .table-row small{font-size:7px}.preview-window .table-row em{font-size:7px;padding:4px}.preview-window .avatar-dot{width:22px;height:22px;font-size:8px}.attention-window{top:95px;right:-1%}.preview-controls{flex-wrap:wrap;gap:6px;margin-top:6px}.preview-controls>span{width:100%;text-align:center;margin:0 0 3px}.preview-switch{font-size:11px}.context-intro{font-size:15px}.detail-steps{grid-template-columns:1fr;gap:16px;margin-top:35px}.detail-steps h3{margin-top:10px}.detail-preview-body{padding:22px}.detail-row small{font-size:10px}.product-lead{font-size:17px}.product-hero h1{font-size:42px}.detail-cta .button{width:100%}}@media(prefers-reduced-motion:reduce){.preview-window,.preview-switch{transition:none}.preview-window,.hero-visual[data-active="attention"] .preview-window{transform:none}}
.hero h1{font-size:clamp(45px,4.55vw,68px)}
@media(max-width:480px){.hero h1{font-size:clamp(35px,10vw,43px)}}

/* Flatten the windows into separate layers so their 3D transforms cannot intersect. */
.panel-stage{height:500px;transform-style:flat;isolation:isolate}
.preview-window{backface-visibility:hidden}
.preview-controls{margin-top:14px;flex-wrap:wrap;row-gap:8px}
.preview-controls>span{color:#425671;font-weight:600}
.floating-detail{position:absolute;z-index:5;left:4%;bottom:18px;display:flex;align-items:center;gap:10px;padding:11px 15px;background:#fff;border:1px solid #dce9ed;border-radius:10px;box-shadow:0 12px 30px #183d5b20;transform:rotate(-1deg);pointer-events:none}
.floating-detail-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#ddf6ef;color:#008b7b}
.floating-detail-icon svg{width:17px;height:17px;stroke-width:2.2}
.floating-detail b,.floating-detail small{display:block;white-space:nowrap}
.floating-detail b{font-size:11px;color:var(--navy)}
.floating-detail small{font-size:10px;color:#718199;margin-top:3px}
@media(max-width:780px){.panel-stage{height:480px}.floating-detail{bottom:20px}}
@media(max-width:480px){.panel-stage{height:380px}.floating-detail{left:3%;bottom:18px;padding:9px 12px}.floating-detail-icon{width:28px;height:28px}.floating-detail b{font-size:10px}.floating-detail small{font-size:9px}.preview-controls{margin-top:12px}.preview-controls>span{margin-bottom:2px}}
@media(max-width:360px){.panel-stage{height:425px}}
@media(prefers-reduced-motion:reduce){.floating-detail{transform:none}}

/* Keep both previews on flat planes; fade the group while their stacking order changes. */
.hero-visual{perspective:none;--pan-x:0px;--pan-y:0px}
.panel-stage{transition:opacity 180ms ease,transform 180ms ease}
.hero-visual.is-switching .panel-stage{opacity:.08;transform:translateY(4px) scale(.99)}
.preview-window{transition:transform 280ms ease,box-shadow 280ms ease}
.notifications-window{transform:translate(var(--pan-x),var(--pan-y)) rotate(-2deg)}
.attention-window{transform:translate(calc(var(--pan-x) * .6),calc(var(--pan-y) * .6)) rotate(2deg)}
.hero-visual[data-active="attention"] .notifications-window{transform:translate(calc(var(--pan-x) * .6 - 12px),calc(var(--pan-y) * .6 - 7px)) rotate(-3deg)}
.hero-visual[data-active="attention"] .attention-window{transform:translate(calc(var(--pan-x) - 12px),calc(var(--pan-y) - 8px)) rotate(1deg)}
@media(prefers-reduced-motion:reduce){.panel-stage,.preview-window{transition:none}.hero-visual.is-switching .panel-stage{opacity:1;transform:none}.preview-window,.hero-visual[data-active="attention"] .preview-window{transform:none}}

/* Each preview owns its depth, while the parent keeps the two applications in separate layers. */
.hero-visual{--rock-x:0deg;--rock-y:0deg}
.preview-window{overflow:visible;transform-style:preserve-3d}
.preview-window .app-content,.preview-window .app-sidebar,.preview-window .app-main{transform-style:preserve-3d}
.preview-window .app-top{border-radius:13px 13px 0 0}
.preview-window .app-sidebar{border-radius:0 0 0 13px}
.preview-window .app-main{border-radius:0 0 13px 0}
.preview-window .app-menu.active{position:relative;transform:translateZ(28px);box-shadow:0 8px 16px #00152d38}
.preview-window .app-table{position:relative;transform:translateZ(48px);box-shadow:0 12px 26px #173b5620}
.notifications-window{transform:translate(var(--pan-x),var(--pan-y)) perspective(1200px) rotateY(calc(15deg + var(--rock-y))) rotateX(calc(5deg + var(--rock-x))) rotate(1deg)}
.attention-window{transform:translate(calc(var(--pan-x) * .6),calc(var(--pan-y) * .6)) perspective(1200px) rotateY(calc(15deg + var(--rock-y))) rotateX(calc(5deg + var(--rock-x))) rotate(1deg)}
.hero-visual[data-active="attention"] .notifications-window{transform:translate(calc(var(--pan-x) * .6 - 12px),calc(var(--pan-y) * .6 - 7px)) perspective(1200px) rotateY(calc(15deg + var(--rock-y))) rotateX(calc(5deg + var(--rock-x))) rotate(1deg)}
.hero-visual[data-active="attention"] .attention-window{transform:translate(calc(var(--pan-x) - 12px),calc(var(--pan-y) - 8px)) perspective(1200px) rotateY(calc(15deg + var(--rock-y))) rotateX(calc(5deg + var(--rock-x))) rotate(1deg)}
@media(max-width:480px){.preview-window .app-menu.active{transform:translateZ(12px)}.preview-window .app-table{transform:translateZ(16px)}}
@media(prefers-reduced-motion:reduce){.preview-window,.hero-visual[data-active="attention"] .preview-window{transform:none}.preview-window .app-menu.active,.preview-window .app-table{transform:none}}