/* Give the explanation and the interactive workspace their own stages. */
.hero-experience{padding-bottom:0}
.hero-experience .hero-copy{padding-bottom:76px}
.control-surface-section{position:relative;padding:76px 0 58px;background:#f8fbfc;border-top:1px solid #dce9ed;border-bottom:1px solid #d3e3e9}
.control-surface-section .hero-project-layer{margin-top:0}
.control-surface-next{width:min(1040px,calc(100% - 88px));margin:27px auto 0;padding-top:19px;border-top:1px solid #d9e7ec;display:flex;align-items:center;justify-content:space-between;gap:18px}
.control-surface-next>span{color:#7a95a2;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.control-surface-next a{color:#315c71;font-size:12px;font-weight:730}
.control-surface-next a:hover{text-decoration:underline;text-underline-offset:4px}
.control-surface-next a span{margin-left:8px}
.tour-section{padding:91px 0 72px;background:linear-gradient(180deg,#e7f2f6 0%,#edf5f7 55%,#f5f9fa 100%);scroll-margin-top:72px}
.tour-intro{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:33px}
.tour-intro>div{max-width:690px}
.tour-intro .eyebrow{margin-bottom:11px}
.tour-intro h2{margin:0 0 11px;color:#1e3c4d;font-family:Georgia,"Times New Roman",serif;font-size:clamp(35px,4vw,55px);font-weight:400;letter-spacing:-.048em;line-height:1.1}
.tour-intro h2 em{color:#47798c;font-weight:400}
.tour-intro p:last-child{max-width:630px;margin:0;color:#5b7989;font-size:15px;line-height:1.6}
.tour-play-button{flex:none;border:1px solid #245165;background:#245165;color:#fff;cursor:pointer}
.tour-play-button:hover{background:#356b80}
.tour-section .hero-disclaimer{margin:18px 20px 0;color:#647f8b}
html[data-theme="dark"] .control-surface-section{background:#102b3b;border-color:#315064}
html[data-theme="dark"] .control-surface-next{border-color:#355568}
html[data-theme="dark"] .control-surface-next>span{color:#89aaba}
html[data-theme="dark"] .control-surface-next a{color:#c1e1ea}
html[data-theme="dark"] .tour-section{background:linear-gradient(180deg,#0c2030 0%,#142c3d 64%,#102333 100%)}
html[data-theme="dark"] .tour-intro h2{color:#eef6f8}
html[data-theme="dark"] .tour-intro h2 em{color:#a4ccda}
html[data-theme="dark"] .tour-intro p:last-child{color:#aac3ce}
html[data-theme="dark"] .tour-play-button{background:#e7f3f6;border-color:#e7f3f6;color:#17394b}
html[data-theme="dark"] .tour-play-button:hover{background:#fff}
html[data-theme="dark"] .tour-section .hero-disclaimer{color:#a2bbc7}
@media(max-width:700px){.hero-experience .hero-copy{padding-bottom:59px}.control-surface-section{padding:64px 0 50px}.control-surface-next{width:calc(100% - 30px);margin-top:18px;align-items:flex-start}.tour-section{padding:70px 0 57px}.tour-intro{display:block;margin-bottom:26px}.tour-intro h2{font-size:38px}.tour-intro p:last-child{font-size:14px}.tour-play-button{margin-top:21px}.tour-section .live-demo{width:calc(100% - 30px)}}
@media(max-width:430px){.control-surface-next{display:block}.control-surface-next a{display:block;margin-top:8px}.tour-intro h2{font-size:35px}.tour-play-button{width:100%}}