/* Scoped to the new hero; header rules remain untouched. */
.hero-workspace{position:relative;isolation:isolate;overflow:hidden;text-align:left;padding:72px max(40px,calc((100vw - 1480px)/2)) 80px;min-height:730px;background:#f7fffc;font-family:Inter,Arial,sans-serif}
.hero-workspace .hero-scene{position:absolute;inset:0;z-index:-2;background:url('/assets/hero-workspace.png') right center/100% 100% no-repeat}
.hero-workspace::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(249,255,253,.97) 0%,rgba(249,255,253,.91) 29%,rgba(249,255,253,.55) 42%,transparent 56%)}
.hero-copy{width:46%;max-width:670px}
.hero-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 18px;border:1px solid #88ead8;border-radius:30px;background:#f2fffbcc;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 26px}
.hero-badge svg{width:20px;height:20px}
.hero-workspace h1{font-family:Inter,Arial,sans-serif;font-size:clamp(42px,4.9vw,79px);line-height:.99;font-weight:900;letter-spacing:-.065em;text-transform:none;margin:0 0 34px;max-width:none}
.hero-workspace h1 span{position:relative;display:inline-block;color:#00a887;white-space:nowrap}
.hero-workspace h1 span::after{content:"";position:absolute;left:5%;right:7%;bottom:-13px;height:10px;border-top:3px solid #00ad90;border-bottom:2px solid #00ad90;border-radius:50%;transform:rotate(-3deg)}
.hero-description{font-size:clamp(17px,1.5vw,23px);line-height:1.45;font-weight:400;letter-spacing:-.02em;margin:0 0 28px;max-width:610px;color:#303530}
.hero-workspace .hero-actions{display:flex;justify-content:flex-start;align-items:center;gap:32px;flex-wrap:nowrap;max-width:none;margin:0;width:auto}
.hero-workspace .hero-cta{font-family:Inter,Arial,sans-serif;font-size:clamp(16px,1.5vw,23px);letter-spacing:-.04em;padding:20px 26px;gap:15px;border-radius:4px;white-space:nowrap;box-shadow:5px 5px 0 #70f7df}
.hero-workspace .hero-demo{font-family:Inter,Arial,sans-serif;font-size:clamp(14px,1.2vw,18px);gap:10px;background:none;border:0;padding:12px 0;white-space:nowrap;letter-spacing:-.04em}
.hero-workspace .hero-demo svg{width:25px;height:25px}
.hero-assurances{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 0;padding:0;list-style:none;font-size:clamp(10px,.95vw,14px);letter-spacing:-.02em}
.hero-assurances li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-assurances svg{width:30px;height:30px;padding:6px;border:1px solid #86eddd;background:#bafff1;border-radius:50%;flex:none;color:#101312}
@media(min-width:1600px){.hero-workspace{min-height:800px}}
@media(max-width:1050px) and (min-width:701px){.hero-workspace{padding:58px 24px 60px;min-height:650px}.hero-copy{width:49%}.hero-workspace h1{font-size:clamp(40px,5.1vw,54px)}.hero-workspace .hero-actions{gap:18px}.hero-workspace .hero-cta{padding:18px 16px}.hero-assurances{flex-wrap:wrap;justify-content:flex-start}.hero-badge{font-size:11px}}
@media(max-width:700px){.hero-workspace{padding:36px 20px 0;min-height:0;text-align:center;background:#f5fffc}.hero-copy{width:100%;max-width:580px;margin:auto}.hero-workspace::before{background:linear-gradient(180deg,#f9fffd 0%,#f1fffb 73%,rgba(240,255,249,0) 100%);bottom:44%;}.hero-badge{font-size:clamp(10px,2.6vw,14px);padding:9px 14px;gap:9px;margin-bottom:24px}.hero-workspace h1{font-size:clamp(32px,9.5vw,64px);line-height:1.02;letter-spacing:-.06em;margin-bottom:28px}.hero-description{font-size:clamp(15px,3.2vw,21px);line-height:1.45;max-width:550px;margin:0 auto 22px}.hero-workspace .hero-actions{display:flex;flex-direction:column;gap:14px;align-items:center}.hero-workspace .hero-cta{font-size:clamp(17px,4vw,24px);padding:18px 26px;width:min(100%,340px)}.hero-workspace .hero-demo{font-size:18px;padding:6px 0;gap:12px}.hero-workspace .hero-demo svg{width:30px;height:30px}.hero-assurances{font-size:clamp(9px,2.4vw,13px);gap:8px;margin:25px auto 10px;justify-content:center;flex-wrap:nowrap}.hero-assurances li{gap:5px}.hero-assurances svg{width:25px;height:25px;padding:5px}.hero-workspace .hero-scene{position:relative;inset:auto;z-index:0;width:calc(100% + 40px);margin:0 -20px;height:74vw;max-height:570px;background-size:auto 100%;background-position:right center}}

/* Keep the navigation itself; blend its surrounding background with the hero. */
.top-section:has(.hero-workspace){background:#f7fffc}
.hero-workspace{padding-top:34px;padding-bottom:40px;min-height:620px}
.hero-workspace h1{font-size:clamp(42px,4.6vw,74px);margin-bottom:28px}
.hero-workspace .hero-description{margin-bottom:22px}
.hero-workspace .hero-assurances{margin-top:25px}
@media(min-width:1600px){.hero-workspace{min-height:700px}}
@media(max-width:1050px) and (min-width:701px){.hero-workspace{padding-top:28px;padding-bottom:35px;min-height:580px}.hero-workspace h1{font-size:clamp(40px,5.1vw,54px)}}
@media(max-width:700px){.hero-workspace{padding-top:24px;padding-bottom:0;min-height:0}.hero-workspace h1{font-size:clamp(32px,9.5vw,64px);margin-bottom:24px}.hero-workspace .hero-description{margin-bottom:19px}.hero-workspace .hero-assurances{margin-top:20px}}
@media(min-width:701px) and (max-height:760px){.hero-workspace{padding-top:25px;padding-bottom:28px;min-height:540px}.hero-workspace h1{font-size:clamp(40px,4.3vw,65px);margin-bottom:25px}.hero-workspace .hero-description{font-size:clamp(17px,1.4vw,21px)}.hero-workspace .hero-cta{padding-block:17px}.hero-workspace .hero-assurances{margin-top:22px}}

/* Blend the image into the header's surrounding surface. */
@media(min-width:701px){.hero-workspace .hero-scene{mask-image:linear-gradient(to bottom,transparent 0,#000 105px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 105px)}}

/* Fade the lower edge into the product section on desktop. */
@media(min-width:701px){
 .hero-workspace{background:var(--paper)}
 .hero-workspace .hero-scene{mask-image:linear-gradient(to bottom,transparent 0,#000 105px,#000 calc(100% - 90px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 105px,#000 calc(100% - 90px),transparent 100%)}
}
/* Mobile demo is opened through the hero button instead of an inline preview. */
@media(max-width:700px){
 .top-section:has(.hero-workspace)+.product{display:none}
}

/* Keep fades confined to the edges so the image annotations stay readable. */
@media(min-width:701px){
 .hero-workspace .hero-scene{mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 24px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 24px),transparent 100%)}
}
@media(max-width:700px){
 .hero-workspace{background:var(--paper)}
 .hero-workspace .hero-scene{mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
}

.hero-workspace .hero-cta{font-size:clamp(15px,1.35vw,21px);gap:12px;padding-inline:22px}
@media(max-width:700px){.hero-workspace .hero-cta{font-size:clamp(14px,3.8vw,22px);width:min(100%,390px);padding-inline:16px;gap:10px}}

.hero-workspace h1 .hero-question{display:block;color:var(--ink);white-space:normal}
.hero-workspace h1 .hero-question::after{display:none}
.hero-workspace h1 .hero-answer{display:inline-block;white-space:normal}
@media(min-width:701px){
 .hero-workspace h1{font-size:clamp(30px,3.45vw,56px);line-height:1.08;letter-spacing:-.055em}
 .hero-workspace h1 .hero-question,.hero-workspace h1 .hero-answer{white-space:nowrap}
 .hero-workspace h1 .hero-answer{margin-top:6px}
 .hero-workspace .hero-assurances li:last-child{display:none}
 .hero-workspace .hero-assurances{justify-content:flex-start;gap:30px}
}
@media(max-width:700px){.hero-workspace h1 .hero-answer{max-width:100%;margin-top:8px}.hero-workspace h1 .hero-answer::after{bottom:-9px;height:6px}}

/* Balance the shorter title against the computer and align with the header. */
@media(min-width:701px){
 .hero-workspace{padding-inline:max(40px,calc((100vw - 1160px)/2))}
 .hero-workspace .hero-copy{width:48%;transform:translateY(58px)}
 .hero-workspace .hero-description{max-width:540px}
 .hero-workspace .hero-actions{gap:24px}
}
@media(min-width:701px) and (max-height:650px){.hero-workspace .hero-copy{transform:translateY(38px)}}
@media(min-width:701px) and (max-width:1050px){.hero-workspace{padding-inline:24px}.hero-workspace .hero-copy{width:51%;transform:translateY(42px)}}

/* Center the copy within the actual scene instead of offsetting it. */
@media(min-width:701px){
 .hero-workspace{display:flex;align-items:center;min-height:clamp(440px,35vw,560px);padding-block:40px}
 .hero-workspace .hero-copy{transform:none}
}
@media(min-width:701px) and (max-height:650px){.hero-workspace{min-height:440px;padding-block:30px}.hero-workspace .hero-copy{transform:none}}
@media(min-width:701px) and (max-width:1050px){.hero-workspace{min-height:460px}.hero-workspace .hero-copy{transform:none}}

/* Restore a substantial copy block, aligned with the full computer scene. */
@media(min-width:701px){
 .hero-workspace{min-height:clamp(560px,43vw,700px);padding-block:38px;align-items:center}
 .hero-workspace .hero-copy{width:48%;transform:none}
 .hero-workspace h1{font-size:clamp(50px,4.8vw,78px);line-height:1.04;letter-spacing:-.055em;margin-bottom:30px}
 .hero-workspace h1 .hero-question,.hero-workspace h1 .hero-answer{display:block;white-space:normal;max-width:100%}
 .hero-workspace h1 .hero-answer{margin-top:10px}
 .hero-workspace h1 .hero-answer::after{left:0;right:8%;bottom:-10px;height:7px}
 .hero-workspace .hero-description{font-size:clamp(19px,1.65vw,25px);line-height:1.45;margin-bottom:27px}
}
@media(min-width:701px) and (max-width:1050px){.hero-workspace{min-height:580px}.hero-workspace .hero-copy{width:51%}.hero-workspace h1{font-size:clamp(42px,5.2vw,55px)}}

/* Keep copy and photograph in the same responsive coordinate system. */
@media(min-width:701px){
 .hero-workspace{width:100%;max-width:1920px;margin-inline:auto;padding:32px clamp(28px,4vw,80px);min-height:clamp(560px,42vw,800px)}
 .hero-workspace .hero-copy{width:46%;max-width:none;flex:none}
 .hero-workspace h1{font-size:clamp(42px,4.8vw,92px);line-height:1.04}
 .hero-workspace .hero-description{max-width:100%;font-size:clamp(18px,1.5vw,26px)}
 .hero-workspace .hero-actions{flex-wrap:wrap;gap:18px 24px}
 .hero-workspace .hero-cta{font-size:clamp(15px,1.25vw,22px)}
 .hero-workspace .hero-assurances{font-size:clamp(12px,.95vw,16px);flex-wrap:wrap}
 .hero-workspace .hero-scene{background-size:100% auto;background-color:#f7fffc}
}
@media(min-width:701px) and (max-width:1050px){
 .hero-workspace{padding-inline:24px;min-height:540px}
 .hero-workspace .hero-copy{width:47%}
 .hero-workspace h1{font-size:clamp(34px,4.5vw,47px)}
 .hero-workspace .hero-actions{gap:12px}
 .hero-workspace .hero-cta{padding:16px 14px;font-size:14px}
}
@media(min-width:1051px) and (max-height:760px){
 .hero-workspace{min-height:clamp(500px,38vw,660px);padding-block:24px}
 .hero-workspace h1{font-size:clamp(48px,4.3vw,76px);margin-bottom:24px}
 .hero-workspace .hero-description{font-size:clamp(17px,1.4vw,22px);margin-bottom:22px}
}

/* Approved brand typography: uppercase matches the product demonstration title. */
.hero-workspace h1{font-family:"Dazzle Unicase",Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:1.03}