/* Header and homepage only. Device previews use existing, real template captures. */
#oal-root .h40-menu-toggle,#oal-root .h40-mobile-menu{display:none}
#oal-root .h40-login-icon{display:none}
#oal-root .lb-header a:focus-visible,#oal-root .lb-header button:focus-visible,#oal-root .h40-hero a:focus-visible,#oal-root .h40-hero button:focus-visible{outline:3px solid #76a7ff;outline-offset:4px}
#oal-root #product .h40-hero{padding:42px 0 48px;background:radial-gradient(ellipse at 85% 55%,#e7f0ff 0,transparent 55%),linear-gradient(115deg,#fff,#f6f9ff);overflow:hidden;position:relative}
#oal-root .h40-hero .hero-grid{width:min(1320px,calc(100% - 80px));max-width:1320px;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:40px;min-height:460px;position:relative;z-index:1;align-items:center}
#oal-root .h40-hero .hero-copy{min-width:0;position:relative;z-index:2}
#oal-root #product .h40-hero h1{font-size:clamp(44px,3.8vw,60px);font-weight:750;line-height:1.08;letter-spacing:-.05em;max-width:620px;margin:20px 0 0;color:#0c1535;text-wrap:balance}
#oal-root .h40-title-first{display:block;white-space:nowrap;font-size:.96em}
#oal-root .h40-title-second{display:block}
#oal-root .h40-mobile-break{display:none}
#oal-root #product .h40-hero .eyebrow{font-size:12px;line-height:1.6;letter-spacing:.11em;color:#075bff;font-weight:650;margin:0}
#oal-root #product .h40-hero .intro{font-size:19px;line-height:1.6;color:#536683;max-width:540px;margin:28px 0 32px}
#oal-root .h40-hero .lb-hero-cta{margin:0}
#oal-root .h40-hero .lb-hero-cta>p{display:none}
#oal-root .h40-hero .lb-hero-actions{gap:14px;display:flex;flex-wrap:nowrap}
#oal-root .h40-hero .lb-hero-actions>a,#oal-root .h40-hero .lb-hero-actions>button{height:56px;min-height:56px;padding:0 24px;border-radius:11px;font-size:15px;gap:18px;white-space:nowrap;font-weight:600;box-shadow:none}
#oal-root .h40-hero .lb-hero-actions>.primary{background:#075bff;color:#fff}
#oal-root .h40-hero .lb-view-templates{border:1px solid #d4e1f6;background:#fff;color:#122450}
#oal-root #product .h40-hero .benefits{display:flex;flex-wrap:wrap;gap:16px 22px;margin:32px 0 0;font-size:12px;color:#53617b}
#oal-root .h40-hero .benefits>span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
#oal-root .h40-hero .benefits i{display:flex;color:#075bff}
#oal-root .h40-hero .benefits svg{width:22px;height:22px}
#oal-root .h40-visual{position:relative;min-width:0;height:460px;isolation:isolate}
#oal-root .h40-visual:before{content:'';position:absolute;inset:-30px -120px -30px -40px;z-index:-1;background:linear-gradient(30deg,transparent 49.7%,#1764ef0b 50%,transparent 50.3%),linear-gradient(150deg,transparent 49.7%,#1764ef0b 50%,transparent 50.3%);background-size:70px 110px;mask-image:linear-gradient(to left,#000,transparent 85%)}
#oal-root .h40-browser{position:absolute;top:70px;left:0;width:94%;border:1px solid #d8e3f2;border-radius:17px;background:#fff;box-shadow:0 25px 60px #1a4c921c,0 4px 12px #1a4c920a;overflow:hidden}
#oal-root .h40-browser-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#fff;border-bottom:1px solid #edf1f7}
#oal-root .h40-browser-bar i{width:7px;height:7px;background:#ff6b75;border-radius:50%}
#oal-root .h40-browser-bar i:nth-child(2){background:#ffc451}
#oal-root .h40-browser-bar i:nth-child(3){background:#42c995}
#oal-root .h40-browser-bar span{margin:auto;color:#74819a;font-size:9px;letter-spacing:.05em}
#oal-root .h40-browser img{width:100%;height:auto;aspect-ratio:1000/579;display:block;object-fit:cover;object-position:top}
#oal-root .h40-phone{position:absolute;right:0;top:125px;width:clamp(145px,12vw,174px);border:6px solid #19232d;border-radius:28px;overflow:hidden;box-shadow:0 22px 40px #1a31552a,0 0 0 1px #85909a;background:#fff;z-index:3}
#oal-root .h40-phone img{display:block;width:100%;height:auto;aspect-ratio:240/519;object-fit:cover}
#oal-root .h40-card{position:absolute;display:flex;align-items:center;gap:12px;padding:16px 19px;border:1px solid #e5edfa;border-radius:16px;background:#fff;box-shadow:0 12px 34px #2058a713;color:#102046;z-index:4}
#oal-root .h40-card svg{width:26px;height:26px;color:#075bff;flex:none}
#oal-root .h40-card strong{display:block;font-size:13px;font-weight:650;line-height:1.5}
#oal-root .h40-card small{display:block;font-size:11px;color:#63779b;line-height:1.6;margin-top:2px}
#oal-root .h40-publish{top:0;left:20%}
#oal-root .h40-project{top:24px;right:0}
#oal-root .h40-lead{left:-25px;bottom:5px;max-width:335px;gap:13px;padding:17px 20px}
#oal-root .h40-lead .h40-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#ecf3ff;flex:none}
#oal-root .h40-lead small:last-child{color:#168565}
#oal-root .h40-lead-label{font-size:10px;color:#8190a8;margin-left:8px;font-weight:400}
@media(min-width:769px) and (max-width:1150px){
 #oal-root .h40-hero .hero-grid{width:calc(100% - 56px);gap:26px;grid-template-columns:1fr 1fr;min-height:440px}
 #oal-root #product .h40-hero h1{font-size:clamp(40px,4.4vw,51px)}
 #oal-root .h40-hero .lb-hero-actions{flex-wrap:wrap}
 #oal-root .h40-hero .lb-hero-actions>a,#oal-root .h40-hero .lb-hero-actions>button{padding:0 18px;font-size:14px;gap:12px}
 #oal-root .h40-visual{height:440px}
 #oal-root .h40-phone{width:145px;top:125px;right:0;border-width:6px;border-radius:28px}
 #oal-root .h40-project{right:-8px;top:60px}
 #oal-root .h40-publish{left:5%;top:0}
 #oal-root .h40-lead{left:-8px;bottom:0;padding:12px 15px;max-width:280px}
}
@media(max-width:768px){
 #oal-root .lb-header .lb-header-inner{height:63px;min-height:63px;width:100%;max-width:none;padding:0 18px;display:flex;flex-wrap:nowrap;gap:8px}
 #oal-root .lb-header .lb-logo{font-size:18px;letter-spacing:-.8px;gap:6px;margin-right:auto;flex:none}
 #oal-root .lb-header .lb-logo img{width:31px;height:31px}
 #oal-root .lb-header .lb-header-inner>nav{display:none!important}
 #oal-root .lb-header .lb-account{margin:0;gap:0;flex:none}
 #oal-root .lb-header .lb-account>.lb-start{display:none!important}
 #oal-root .lb-header .p09-short-name,#oal-root .lb-header .p10-chevron{display:none!important}
 #oal-root .lb-header .p09-account-menu>summary{padding:2px;min-width:40px;width:40px;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:0;background:transparent;border:0;list-style:none}
 #oal-root .lb-header summary::-webkit-details-marker{display:none}
 #oal-root .lb-header .p09-avatar{width:36px;height:36px;min-width:36px;border-radius:50%;font-size:14px}
 #oal-root .lb-header .p09-menu-panel{right:-48px;top:48px;width:min(300px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
 #oal-root .lb-header .lb-account>[data-login]{width:40px;height:40px;padding:0;font-size:0;display:grid;place-items:center;border:0;border-radius:50%;background:#edf3ff;color:#075bff}
 #oal-root .lb-header .lb-account>[data-login] svg{display:none}
 #oal-root .lb-header .lb-account>[data-login]:before{content:'';width:22px;height:22px;background:currentColor;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 22v-3a8 8 0 0 1 16 0v3'/%3E%3C/svg%3E")}
 #oal-root .h40-menu-toggle{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:8px;border:0;background:transparent;color:#132344;border-radius:9px}
 #oal-root .h40-menu-toggle svg{width:24px;height:24px}
 #oal-root .h40-menu-toggle[aria-expanded=true]{background:#edf3ff;color:#075bff}
 #oal-root .lb-header .h40-mobile-menu:not([hidden]){position:absolute;left:14px;right:14px;width:auto;justify-content:stretch;top:calc(100% + 8px);z-index:30;display:grid;gap:2px;padding:10px;background:#fff;border:1px solid #e1e8f3;border-radius:16px;box-shadow:0 10px 28px #14234012;animation:h40-menu-in 170ms ease-out}
 #oal-root .h40-mobile-menu a,#oal-root .h40-mobile-menu button{display:flex;align-items:center;min-height:46px;padding:11px 14px;font-size:15px;color:#172747;text-decoration:none;border-radius:8px;background:#fff;border:0;text-align:left;font-weight:550}
 #oal-root .h40-mobile-menu a:hover{background:#f5f8ff}
 #oal-root .h40-mobile-menu button{margin-top:6px;border-top:1px solid #e7edf7;border-radius:0;color:#075bff;padding-top:16px}
 #oal-root #product .h40-hero{padding:44px 0 48px}
 #oal-root .h40-hero .hero-grid{width:100%;max-width:620px;padding:0 18px;grid-template-columns:1fr;gap:36px;min-height:0}
 #oal-root #product .h40-hero .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.085em;max-width:100%;margin:0 0 19px}
 #oal-root #product .h40-hero h1{font-size:clamp(36px,10.1vw,48px);line-height:1.04;letter-spacing:-.06em;margin:0;max-width:none;text-wrap:initial}
 #oal-root .h40-title-first{white-space:nowrap;font-size:.88em;letter-spacing:-.065em;line-height:1.18}
 #oal-root .h40-mobile-break{display:block}
 #oal-root #product .h40-hero .intro{font-size:16px;line-height:1.55;margin:22px 0 26px;max-width:520px}
 #oal-root .h40-hero .lb-hero-actions{display:grid;grid-template-columns:1fr;gap:11px}
 #oal-root .h40-hero .lb-hero-actions>a,#oal-root .h40-hero .lb-hero-actions>button{height:54px;min-height:54px;width:100%;padding:0 20px;gap:24px;font-size:15px}
 #oal-root #product .h40-hero .benefits{display:grid;grid-template-columns:1fr;gap:12px;margin:26px 0 0;font-size:13px}
 #oal-root .h40-hero .benefits>span{gap:11px}
 #oal-root .h40-hero .benefits svg{width:21px;height:21px}
 #oal-root .h40-visual{width:100%;height:365px;margin:0;max-width:530px;justify-self:center}
 #oal-root .h40-browser{top:17px;left:0;width:100%;border-radius:13px}
 #oal-root .h40-browser-bar{height:24px;gap:5px;padding:0 9px}
 #oal-root .h40-browser-bar i{width:5px;height:5px}
 #oal-root .h40-browser-bar span{font-size:7px}
 #oal-root .h40-phone{width:128px;top:90px;right:0;border-width:5px;border-radius:23px}
 #oal-root .h40-card{padding:12px 14px;border-radius:13px;gap:9px}
 #oal-root .h40-card strong{font-size:12px}
 #oal-root .h40-card small{font-size:10px}
 #oal-root .h40-card svg{width:22px;height:22px}
 #oal-root .h40-publish{top:266px;left:1px;transform:none}
 #oal-root .h40-project,#oal-root .h40-lead{display:none}
}
@keyframes h40-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#oal-root .h40-mobile-menu{animation:none!important}}

/* Desktop footage safe area: the whole visual fits its grid column. */
@media(min-width:769px){
 #oal-root #product .h40-hero{padding:48px clamp(24px,4vw,64px) 64px;overflow:visible}
 #oal-root .h40-hero:after{inset:0 0 0 55%;transform:none;clip-path:inset(0)}
 #oal-root #product .h40-hero .hero-grid{width:100%;max-width:1320px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,3vw,48px);padding:0;min-height:500px}
 #oal-root .h40-visual{height:500px}
 #oal-root .h40-visual:before{inset:0;background-size:70px 110px}
 #oal-root .h53-demo .h40-browser{left:80px;width:calc(100% - 96px);margin-left:0;top:80px}
 #oal-root .h53-demo-chat{left:0;top:115px;width:180px}
 #oal-root .h40-phone{right:16px;top:155px;width:clamp(140px,10vw,164px)}
 #oal-root .h40-publish{left:22%;top:12px}
 #oal-root .h40-project{right:16px;top:30px}
 #oal-root .h40-lead{left:0;bottom:8px}
 #oal-root .h40-title-first{white-space:normal}
}

/* Mobile mockup: reserve room for chat without moving a full-width browser offscreen. */
@media(max-width:768px){
 #oal-root .h53-demo .h40-browser{left:40px;width:calc(100% - 40px);margin-left:0}
 #oal-root .h40-visual:before{inset:0}
}