/* Hero previews use the site's existing colors, fonts and example screenshots. */
.hero-showcase{padding-top:64px}
.hero-showcase .hero-inner{position:relative}
.hero-showcase .hero-browser{display:block;background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--color-body)}
.hero-showcase .hero-browser:focus-visible{z-index:4;outline:3px solid var(--color-primary-deep);outline-offset:4px}
.hero-browser-bar{display:flex;align-items:center;gap:10px;padding:9px 11px;min-height:32px;background:var(--color-surface-soft);font-size:12px;line-height:1.3}
.hero-browser-dots{display:flex;gap:4px;flex-shrink:0}
.hero-browser-dots i{display:block;width:5px;height:5px;border-radius:50%;background:var(--color-body);opacity:.4}
.hero-example-label{margin-left:auto;font-size:12px;color:var(--color-muted)}
.hero-browser img{display:block;width:100%;height:auto;aspect-ratio:8 / 5;object-fit:cover}
.hero-example-caption{font-size:12px;line-height:1.5;color:var(--color-muted);text-align:center;margin:14px auto 0;max-width:400px;text-wrap:balance}
.hero-split .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:44px}
.hero-split .hero-copy{text-align:left;min-width:0}
.hero-split h1{font-size:clamp(36px,4.2vw,52px);margin-left:0;margin-right:0}
.hero-split h1 em{margin-left:0;margin-right:0}
.hero-split .hero-lede{font-size:17px;line-height:1.6;margin-left:0;margin-right:0;margin-bottom:22px}
.hero-split .hero-cta-row{justify-content:flex-start;margin-bottom:18px}
.hero-split .hero-video-btn{margin-left:0}
.hero-split .hero-trust{text-wrap:balance}
.hero-collage{max-width:540px;margin:0 auto}

.hero-collage .hero-browser{position:relative}
.hero-collage .hero-front{width:100%}
.hero-example-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.hero-example-controls button{font:500 14px/1.3 var(--font-sans);color:var(--color-body);background:var(--color-canvas);border:1px solid var(--color-hairline);border-radius:var(--radius-pill);padding:9px 15px;min-height:44px;cursor:pointer}
.hero-example-controls button[aria-pressed=true]{color:var(--color-canvas);background:var(--color-ink);border-color:var(--color-ink)}
.hero-example-controls button:hover{border-color:var(--color-primary-deep)}
.hero-showcase .pain-strip{margin-top:40px}
.hero-centered .hero-showcase-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.16fr) minmax(0,.92fr);align-items:center;gap:20px;max-width:1000px;margin:32px auto 20px}
.hero-centered .hero-showcase-row .hero-browser:first-child{transform:rotate(-3deg)}
.hero-centered .hero-showcase-row .hero-browser:last-child{transform:rotate(3deg)}
.hero-centered .hero-example-caption{max-width:600px;margin:0 auto 24px}
.hero-centered .hero-detail{font-size:17px;line-height:1.6;max-width:760px;margin:26px auto 0;text-wrap:pretty}
@media(max-width:900px){
 .hero-showcase{padding-top:44px}
 .hero-split .hero-inner{grid-template-columns:1fr;gap:28px}
 .hero-split .hero-copy{text-align:center}
 .hero-split h1,.hero-split h1 em,.hero-split .hero-lede{margin-left:auto;margin-right:auto}
 .hero-split h1{max-width:700px;font-size:clamp(36px,5vw,48px)}
 .hero-split .hero-lede{max-width:650px}
 .hero-split .hero-cta-row{justify-content:center}
 .hero-split .hero-video-btn{margin-left:auto}
 .hero-split .hero-media{width:100%;max-width:500px;margin:0 auto}
}
@media(max-width:640px){
 .hero-showcase{padding-top:36px}
 .hero-showcase .container{padding-left:20px;padding-right:20px}
 .hero-showcase h1{font-size:clamp(32px,8.2vw,42px)}
 .hero-showcase .hero-lede,.hero-centered .hero-detail{font-size:16px}
 .hero-showcase .hero-trust{font-size:12px}
 .hero-centered .hero-showcase-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:430px;margin-top:24px}
 .hero-centered .hero-showcase-row .hero-browser:nth-child(2){grid-column:1 / -1;grid-row:1;max-width:340px;width:100%;justify-self:center}
 .hero-centered .hero-showcase-row .hero-browser:first-child,.hero-centered .hero-showcase-row .hero-browser:last-child{transform:none}
 .hero-browser-bar{font-size:12px;gap:6px;padding:8px}
 .hero-centered .hero-showcase-row .hero-browser:not(:nth-child(2)) .hero-browser-dots{display:none}
 .hero-centered .hero-showcase-row .hero-browser:not(:nth-child(2)) .hero-example-label{display:none}
 .hero-example-caption{font-size:13px;padding:0 4px}
}