/* The live workspace is the opening visual. No second hero or duplicate product story. */
#homepage-hero > div:first-child { padding-bottom: 54px; }
.seer-opening-title { height: 0; padding: 0 !important; }
#homepage-hero > div:first-child > .container:not([class*="mockupContainer"]) { height: 0; padding: 0 !important; }
#homepage-hero > div:first-child > .container:not([class*="mockupContainer"]) > div { display: none !important; }
#homepage-hero [class*="mockupEdgeFade"], #homepage-hero [data-light-border] { display: none; }
.seer-opening-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#homepage-hero [class*="mockupContainer"] { padding: 64px 72px 24px; max-width: 1440px !important; }
.seer-demo-host { isolation: isolate; width: 100% !important; max-width: 1160px; }
.seer-opening-surround { position: absolute; inset: -44px -44px -18px; z-index: -1; pointer-events: none; border-radius: 28px; }
.seer-opening-wash { position: absolute; inset: -20px -12px -10px; overflow: hidden; border-radius: 28px; background: radial-gradient(ellipse at 4% 20%, #d1dfdb 0%, transparent 50%), radial-gradient(ellipse at 100% 75%, #c6d5e5 0%, transparent 58%), linear-gradient(130deg, #e4e9e8, #f1f0ed 52%, #dde4eb); box-shadow: inset 0 0 0 1px #ffffffb3; }
.seer-opening-wash::before { content: ''; position: absolute; width: 120%; height: 110%; left: -15%; top: -55%; border-radius: 50%; background: linear-gradient(140deg, #ffffff00 30%, #ffffffb8 70%); box-shadow: 0 1px 0 #ffffffb3, 0 24px 65px #71898a0c; transform: rotate(-16deg); }
.seer-opening-wash::after { content: ''; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236a777e' filter='url(%23n)' opacity='.35' d='M0 0h200v200H0z'/%3E%3C/svg%3E"); }
.seer-opening-plane { position: absolute; inset: 10px 64px 74px; border: 1px solid #ffffffd9; border-radius: 20px; background: #ffffff52; box-shadow: 0 6px 20px #61707809; }
.seer-opening-plane-back { transform: rotate(-1.25deg); }
.seer-opening-plane-front { inset: 24px 28px 70px; transform: rotate(.7deg); background: linear-gradient(125deg, #ffffff9c, #f3f5f77a); }
.seer-demo { position: relative; height: clamp(560px, calc(100svh - 240px), 720px) !important; border: 1px solid #ffffff; border-radius: 16px; box-shadow: 0 28px 60px -25px #2a3d5052, 0 8px 18px -8px #2a3d5033, 0 0 0 1px #80909f30; }
.seer-window-bar { height: 38px; background: linear-gradient(#fffffff5, #f3f4f5f5); }
.seer-window-dots i:nth-child(1) { background: #e7aaa1; }
.seer-window-dots i:nth-child(2) { background: #e3cf95; }
.seer-window-dots i:nth-child(3) { background: #adc7ac; }
.seer-demo-note { position: relative; margin-top: 20px; color: #66727b; }
@media (max-width: 1100px) { #homepage-hero [class*="mockupContainer"] { padding: 58px 52px 20px; } .seer-opening-surround { inset: -36px -26px -14px; } .seer-opening-wash { inset: -16px -12px -8px; } .seer-sidebar { gap: 6px; padding-inline: 12px; } .seer-sidebar button { padding-inline: 8px !important; } }
@media (max-width: 760px) { #homepage-hero [class*="mockupContainer"] { padding: 37px 20px 13px; } #homepage-hero > div:first-child { padding-bottom: 32px; } .seer-opening-surround { inset: -24px -10px -10px; border-radius: 19px; } .seer-opening-wash { inset: -5px -4px 0; border-radius: 19px; } .seer-opening-plane { inset: 8px 20px 62px; border-radius: 14px; } .seer-opening-plane-front { inset: 15px 8px 58px; } .seer-demo { height: clamp(620px, calc(100svh - 175px), 720px) !important; border-radius: 12px; } .seer-window-bar { height: 34px; } .seer-window-bar small { display: none; } .seer-window-bar > span:nth-child(2) { margin-right: auto; margin-left: auto; transform: translateX(-15px); } .seer-demo-note { font-size: 8px; line-height: 1.6; margin-top: 15px; } }