.hero:has(.hero-showcase){grid-template-columns:1fr 1.1fr;gap:4vw}.hero-showcase{position:relative;isolation:isolate;margin:0;width:100%;aspect-ratio:1.4;min-height:490px;border-radius:34px;background:radial-gradient(ellipse at 65% 40%,#eaf3ff 0%,#f8fafc 50%,#fffaf0 100%);border:1px solid #e6edf5;box-shadow:inset 0 0 80px #fff;overflow:visible}.hero-showcase:before{content:"";position:absolute;left:8%;right:8%;bottom:17%;height:8%;border-radius:50%;background:#18396018;filter:blur(17px);z-index:-1}.showcase-tag{position:absolute;top:5%;left:5%;display:flex;align-items:center;gap:12px;font-size:11px;line-height:1.5;color:#526078}.showcase-tag>span{display:grid;place-items:center;background:#1a3d8d;color:white;font:24px Georgia,serif;border:4px solid white;outline:1px solid #d7e4f4;width:46px;height:46px;border-radius:50%}.showcase-tag strong{display:block;color:#14264b;font-size:16px;font-weight:600}.showcase-desktop{position:absolute;top:20%;left:4%;width:79%;padding:16px 8px 23px;border:1px solid #46556e;background:linear-gradient(135deg,#23344d,#0e1729);border-radius:13px;box-shadow:0 22px 40px #14264b26;transform:rotate(-2deg)}.showcase-desktop>img{display:block;width:100%;height:auto;aspect-ratio:1.82;object-fit:cover;object-position:top;border-radius:3px}.showcase-camera{position:absolute;top:5px;left:50%;width:5px;height:5px;background:#73849d;border-radius:50%;box-shadow:0 0 0 2px #0c1628}.showcase-stand{position:absolute;top:100%;left:39%;width:22%;height:32px;background:linear-gradient(#aebacc,#e6ecf4);clip-path:polygon(23% 0,77% 0,85% 85%,100% 90%,100% 100%,0 100%,0 90%,15% 85%)}.showcase-mobile{position:absolute;z-index:3;right:2.5%;top:26%;width:20%;padding:7px 5px 8px;background:#172439;border:1px solid #5a6a80;border-radius:21px;box-shadow:0 20px 30px #14264b33;transform:rotate(4deg)}.showcase-mobile>img{display:block;width:100%;height:auto;border-radius:14px;aspect-ratio:390/844;object-fit:cover;object-position:top}.showcase-mobile>span{position:absolute;top:8px;right:36%;left:36%;height:5px;background:#172439;border-radius:0 0 5px 5px}.showcase-feature{position:absolute;z-index:4;left:7%;bottom:17%;display:flex;align-items:center;gap:11px;padding:13px 17px;background:#fff;border:1px solid #e0e8f2;border-radius:12px;box-shadow:0 9px 22px #14264b14;font-size:12px;line-height:1.6;color:#526078}.showcase-feature strong{display:block;color:#14264b;font-size:14px}.showcase-check{display:grid;place-items:center;width:30px;height:30px;background:#e8f4ec;color:#2e6448;border-radius:50%;font-size:17px}.hero-showcase figcaption{position:absolute;bottom:2%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #dbe4ef;padding-top:17px;font-size:11px;line-height:1.5;color:#526078}.hero-showcase figcaption a{font-size:12px;font-weight:700;color:#1a3d8d;text-underline-offset:4px}.hero-showcase figcaption a:hover{color:#14264b}@media(min-width:1600px){.hero-showcase{min-height:540px}.showcase-desktop{top:20%}.showcase-feature{bottom:17%}.showcase-tag strong{font-size:19px}.showcase-tag{font-size:13px}.hero-showcase figcaption{font-size:13px}.hero-showcase figcaption a{font-size:14px}}@media(max-width:950px){.hero:has(.hero-showcase){grid-template-columns:1fr;gap:40px}.hero-showcase{max-width:740px;margin:auto;min-height:500px}.showcase-desktop{top:21%}.hero-showcase figcaption{bottom:4%}}@media(max-width:520px){.hero-showcase{aspect-ratio:343/390;height:auto;min-height:0;border-radius:22px}.showcase-tag{top:6%;gap:9px}.showcase-tag strong{font-size:14px}.showcase-tag>span{width:37px;height:37px;font-size:21px}.showcase-tag{font-size:10px}.showcase-desktop{top:26%;left:3%;width:85%;padding:11px 5px 16px;border-radius:9px}.showcase-camera{width:3px;height:3px;top:4px}.showcase-stand{height:30px}.showcase-mobile{top:39%;width:25%;padding:5px 3px;border-radius:13px}.showcase-mobile>img{border-radius:9px}.showcase-mobile>span{top:5px;height:4px}.showcase-feature{left:5%;bottom:19%;gap:7px;padding:9px 10px;font-size:9px;border-radius:9px}.showcase-feature strong{font-size:11px}.showcase-check{width:23px;height:23px;font-size:14px}.hero-showcase figcaption{left:5%;right:5%;bottom:5%;padding-top:12px;font-size:10px;gap:12px}.hero-showcase figcaption a{font-size:10px}}@media(max-width:360px){.hero-showcase{aspect-ratio:281/355;height:auto}.showcase-feature{bottom:18%}.hero-showcase figcaption{font-size:9px}.hero-showcase figcaption a{font-size:9px}}

@media(min-width:951px){.hero:has(.hero-showcase){padding-top:50px;padding-bottom:50px;min-height:0}.hero:has(.hero-showcase) h1{font-size:clamp(48px,5vw,88px)}}

/* Responsive device showcase: let the image shrink without squeezing the copy. */
.hero:has(.hero-showcase){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero:has(.hero-showcase)>*{min-width:0}
.hero .hero-showcase{min-width:0;min-height:0;max-width:740px;aspect-ratio:1.3;justify-self:center}
@media(min-width:951px) and (max-width:1250px){
 .hero .hero-showcase{aspect-ratio:1.15}
 .hero:has(.hero-showcase) h1{font-size:clamp(44px,4.5vw,56px)}
 .showcase-tag{gap:8px;font-size:10px}.showcase-tag strong{font-size:14px}
 .showcase-feature{padding:10px 12px;font-size:10px}.showcase-feature strong{font-size:12px}
 .hero-showcase figcaption{font-size:10px;padding-top:10px}.hero-showcase figcaption a{font-size:10px}
}
@media(max-width:950px){
 .hero:has(.hero-showcase){grid-template-columns:minmax(0,1fr);gap:32px}
 .hero .hero-showcase{max-width:560px;aspect-ratio:1.3;margin:0 auto}
}
@media(max-width:520px){.hero .hero-showcase{aspect-ratio:343/390}}
@media(max-width:360px){.hero .hero-showcase{aspect-ratio:281/355}}