/* V6: one light uniform overlay, with the original V3 cooler composition. */
.stock-site .stock-hero>.site-header{position:relative;grid-row:1;z-index:5;background:transparent;color:#fff}

.stock-site .stock-hero>.site-header .wordmark img{background:none;border-radius:0;padding:0;object-fit:contain}
.stock-site .stock-hero>.site-header a:focus-visible{outline-color:#ddff57}
.stock-hero{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr;min-height:100vh;min-height:100svh;overflow:hidden;background:#16111d;color:#fff;--hero-shade:.28}
.stock-hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2}
.stock-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(0,0,0,var(--hero-shade))}
.stock-hero .hero-overlay{grid-row:2;position:relative;z-index:1;display:grid;grid-template-columns:1.23fr 1fr;grid-template-rows:auto auto;gap:32px 20px;align-content:center;min-height:0;padding-top:24px;padding-bottom:48px}
.stock-hero h1{grid-column:1;grid-row:1;align-self:end;font-size:clamp(88px,9.3vw,144px);font-weight:800;line-height:.96;letter-spacing:-.075em;max-width:8ch;overflow-wrap:anywhere;text-wrap:balance}
.stock-hero h1 span{display:block}
.stock-hero .hero-actions{grid-column:1;grid-row:2;align-self:start;max-width:520px;width:100%;margin:0}
.stock-hero .hero-art{grid-column:2;grid-row:1/3;align-self:center;width:100%;max-width:580px;margin:0}
.stock-hero .hero-cooler{display:block;width:100%;max-width:min(557px,calc(100svh - 245px));height:auto;margin-inline:auto}
.stock-hero .motion-control{color:#fff;margin:16px auto 0;min-height:40px}
.stock-hero .hero-description{font-size:21px;line-height:1.5;letter-spacing:-.02em;max-width:38ch;white-space:normal}
.stock-hero .button.primary:disabled{margin-top:26px;min-width:150px;width:auto;justify-content:center;min-height:52px;border-color:#fff;background:#fff;color:#121212;font-size:16px}
.stock-hero .availability-note{font-size:13px;line-height:1.6;max-width:43ch;margin-top:16px;color:#fff}
.stock-hero .demo-link{font-size:15px;min-height:44px;margin-top:8px;color:#fff;text-underline-offset:5px}
.stock-hero .hero-price{font-size:12px;line-height:1.65;margin-top:18px;color:#fff}
.stock-hero .hero-video-toggle{position:absolute;right:24px;bottom:24px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#121212cc;color:#fff;opacity:.8}
.stock-hero .hero-video-toggle[hidden]{display:none}
.hero-video-toggle svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hero-video-toggle .play-icon{display:none}
.hero-video-toggle[data-paused="true"] .play-icon{display:block}
.hero-video-toggle[data-paused="true"] .pause-icon{display:none}
.stock-hero .hero-video-toggle:hover,.stock-hero .hero-video-toggle:focus-visible{opacity:1}
.stock-hero .hero-video-toggle:focus-visible,.stock-hero a:focus-visible,.stock-hero .motion-control:focus-visible{outline:3px solid #ddff57;outline-offset:5px}
.stock-hero-browser .hero-overlay{grid-template-columns:1fr 1.04fr}
.stock-hero-browser h1{font-size:clamp(86px,8.6vw,132px);max-width:8ch}
@media(max-width:1000px){.stock-hero h1,.stock-hero-browser h1{font-size:clamp(76px,10.3vw,104px)}.stock-hero .hero-description{font-size:19px;max-width:32ch}.stock-hero .hero-actions{max-width:430px}}
@media(max-width:700px){.stock-hero .hero-overlay{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding-top:28px;padding-bottom:60px}.stock-hero h1,.stock-hero-browser h1{font-size:clamp(60px,15.4vw,86px);line-height:.98;letter-spacing:-.065em;max-width:none;align-self:start}.stock-hero .hero-art{width:min(100%,22svh);min-width:140px;max-width:220px;align-self:center;margin:14px 0 18px}.stock-hero .hero-cooler{max-width:100%;width:100%}.stock-hero .motion-control{margin:8px auto 0;min-height:36px;font-size:12px}.stock-hero .hero-actions{margin:0;max-width:none}.stock-hero .hero-description{font-size:17px;line-height:1.45;max-width:35ch}.stock-hero .button.primary:disabled{width:auto;min-width:150px;margin-top:16px;min-height:48px}.stock-hero .availability-note{font-size:12px;line-height:1.5;margin-top:12px;max-width:42ch}.stock-hero .hero-price{font-size:12px;line-height:1.5;margin-top:10px;max-width:42ch}.stock-hero .demo-link{margin-top:4px;min-height:40px}.stock-hero .hero-video{object-position:52% 50%}.stock-hero-browser .hero-video{object-position:65% 50%}.stock-hero .hero-video-toggle{right:16px;bottom:16px}}
@media(max-width:350px){.stock-hero h1,.stock-hero-browser h1{font-size:58px}}

/* Crisp text-edge contrast keeps the single uniform video shade light. */
.stock-site .stock-hero>.site-header .wordmark-label,.stock-site .stock-hero>.site-header nav a,.stock-hero h1,.stock-hero .hero-description,.stock-hero .availability-note,.stock-hero .demo-link,.stock-hero .hero-price,.stock-hero .motion-control span{text-shadow:none}

/* One bounded, transparent decorative accent; original cooler stays above it. */
.stock-hero .hero-art{isolation:isolate}
.metaballs-layer{position:absolute;inset:-24px -24px 56px;z-index:-1;pointer-events:none;overflow:hidden}
.metaballs-layer canvas,.metaballs-still{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.metaballs-still{opacity:.28}
.metaballs-layer canvas[hidden]{display:none}
.metaballs-layer[data-mode="animated"] .metaballs-still{display:none}
@media(max-width:700px){.metaballs-layer{inset:0 0 44px}}

/* Small copy uses a narrower edge with a soft one-pixel falloff. */
.stock-hero .availability-note,.stock-hero .hero-price,.stock-hero .motion-control span{font-weight:600;text-shadow:none}
.stock-hero .art-tm{stroke:none;paint-order:normal}
/* Disabled Specular Button, Tabs only: a quiet idle rim, never an active action. */
.stock-hero-tabs .button.primary.specular-button:disabled{position:relative;isolation:isolate;overflow:visible;border:1px solid #ffffffbd;border-radius:18px;background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 1px 0 #ffffff4d,inset 0 -1px 0 #ffffff26,0 8px 20px -12px #0009;cursor:not-allowed;opacity:1;text-shadow:none}
.specular-button__light{position:absolute;inset:-24px;z-index:1;width:calc(100% + 48px);height:calc(100% + 48px);pointer-events:none}
.specular-button__light[hidden]{display:none}
.specular-button__label{position:relative;z-index:2;display:inline-flex;align-items:center;pointer-events:none}
#hero-content:focus-visible{outline:3px solid #ddff57;outline-offset:-3px}

/* V7: original geometry, one2.5s shared palette clock, no independent CSS cycles. */
.stock-hero{--hero-color:#168bff}
.stock-hero .header-cooler{display:block;width:42px;height:42px;flex:none;background:none;padding:0}
.stock-hero .header-cooler .cooler-content,.stock-hero .hero-cooler .cooler-content{animation:none!important;fill:var(--hero-color)!important}
.stock-hero>.metaballs-layer{inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stock-hero>.metaballs-layer .metaballs-still{inset:auto;left:55%;top:16%;width:43%;height:70%}
.metaballs-still g{fill:var(--hero-color,#168bff)}
.stock-hero .motion-control[hidden]{display:none}
@media(max-width:700px){.stock-hero>.metaballs-layer{inset:0}.stock-hero>.metaballs-layer .metaballs-still{left:25%;top:28%;width:50%;height:25%}}
/* Browser text is clean white: contrast comes from this one uniform shade. */
.stock-hero-browser{--hero-shade:.58}
.stock-hero-browser .site-header *,.stock-hero-browser h1,.stock-hero-browser h1 *,.stock-hero-browser .hero-description,.stock-hero-browser .availability-note,.stock-hero-browser .hero-price,.stock-hero-browser .demo-link,.stock-hero-browser .hero-actions *,.stock-hero-browser .motion-control *,.stock-hero-browser .hero-video-toggle{ text-shadow:none!important;-webkit-text-stroke:0 transparent!important;filter:none!important }
.stock-hero-browser .availability-note,.stock-hero-browser .hero-price,.stock-hero-browser .motion-control span{font-weight:600}

/* Both decorative media layers sit below the one uniform film shade. */
.stock-hero .hero-video{z-index:-3}
.stock-hero>.metaballs-layer{z-index:-2}

/* V8: clean ink on one bright uniform wash, without text backing or outlines. */
.stock-site .stock-hero{isolation:auto;background:transparent;--hero-wash:.5;color:#071014}
.stock-site .stock-hero::after{z-index:1;background:rgba(255,255,255,var(--hero-wash))}
.stock-site .stock-hero .hero-video{z-index:0}
.stock-site .stock-hero .hero-overlay{z-index:3}
.stock-site .stock-hero>.site-header{color:#071014}
.stock-site .stock-hero .wordmark-label,.stock-site .stock-hero nav a,.stock-site .stock-hero h1,.stock-site .stock-hero .hero-description,.stock-site .stock-hero .availability-note,.stock-site .stock-hero .hero-price,.stock-site .stock-hero .demo-link,.stock-site .stock-hero .motion-control,.stock-site .stock-hero .motion-control span{color:#071014}
.stock-site .stock-hero h1,.stock-site .stock-hero h1 *,.stock-site .stock-hero p,.stock-site .stock-hero a,.stock-site .stock-hero a *,.stock-site .stock-hero button,.stock-site .stock-hero button *,.stock-site .stock-hero sup{ text-shadow:none!important;-webkit-text-stroke:0 transparent!important;filter:none!important }
.stock-site .stock-hero .art-tm{stroke:none;paint-order:normal}
.stock-site .stock-hero .hero-video-toggle{z-index:6;background:#fffef8e6;color:#071014;border-color:#07101455}
.stock-site .stock-hero-tabs .button.primary.specular-button:disabled{background:#ffffff70;color:#071014;border-color:#07101470;box-shadow:inset 0 1px 0 #fff9,inset 0 -1px 0 #07101418;opacity:1;text-shadow:none!important}
/* One viewport canvas crosses section backgrounds; foreground text/controls stay above. */
.stock-site>.metaballs-layer{position:fixed;inset:0;width:100%;height:100%;z-index:2;overflow:hidden;pointer-events:none}
.stock-site>.metaballs-layer canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stock-site>.metaballs-layer .metaballs-still{position:absolute;left:55%;top:16%;width:45%;height:70%;opacity:.10}
.stock-site>.metaballs-layer[data-region="light"] .metaballs-still,.stock-site>.metaballs-layer[data-region="dark"] .metaballs-still{opacity:.10}
.stock-site .demo-section :is(h2,h3,p,li,a,button,figcaption),.stock-site .homepage-pricing :is(h2,h3,p,a,button),.stock-site .offer-section :is(h2,h3,p,a,button,strong),.stock-site .questions-section :is(summary,p,a,button),.stock-site .site-footer>*{position:relative;z-index:3}
.stock-site .app-recording img,.stock-site .app-recording video{position:relative;z-index:3}
.stock-site .video-frame .video-toggle{z-index:4}
.stock-site .site-footer{padding-bottom:108px}
.site-effects-toggle{position:fixed;z-index:10;left:14px;bottom:14px;max-width:calc(100% - 28px);min-height:44px;padding:10px 16px;border:1px solid #07101455;border-radius:24px;background:#fffef8f2;color:#071014;font:700 12px/1.4 Manrope,Arial,sans-serif;box-shadow:0 3px 18px #07101414;cursor:pointer}
.site-effects-toggle[hidden]{display:none!important}
.site-effects-toggle:focus-visible{outline:3px solid #7441c3;outline-offset:4px}
@media(max-width:700px){.stock-site>.metaballs-layer .metaballs-still{left:15%;top:27%;width:70%;height:34%}}

.stock-site .stock-hero :is(a,button):focus-visible{outline:3px solid #071014;outline-offset:5px}
.stock-site #hero-content:focus-visible{outline-color:#071014}
/* Inline lower labels and small print share the foreground plane too. */
.stock-site .demo-section :is(span,small,strong),.stock-site .homepage-pricing :is(span,small,strong),.stock-site .offer-section :is(span,small),.stock-site .questions-section :is(span,small,strong){position:relative;z-index:3}

/* Tabs swaps genuine app footage into the hero and original cooler into the story. */
.stock-site .hero-cooler .cooler-content{animation:none!important;fill:var(--hero-color,#168bff)!important}
.stock-site .hero-cooler .art-tm{stroke:none;paint-order:normal}
.stock-hero-tabs .hero-app-demo{max-width:650px}
.stock-hero-tabs .hero-app-demo .app-recording{width:100%;margin:0}
.stock-hero-tabs .hero-app-demo .video-frame{aspect-ratio:16/9;background:#fff;overflow:hidden;border:1px solid #07101440;border-radius:7px}
.stock-hero-tabs .hero-app-demo video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}
.stock-hero-tabs .hero-app-demo .video-toggle{z-index:4;position:absolute;left:10px;bottom:10px}
.working-tabs .mid-cooler-art{position:relative;max-width:620px;width:100%;margin:0 auto;z-index:3}
.working-tabs .mid-cooler-art .hero-cooler{display:block;width:100%;height:auto;max-width:620px}
.working-tabs .mid-cooler-art .motion-control{color:#071014;margin:12px auto 0}
@media(max-width:700px){.stock-hero-tabs .hero-app-demo{width:100%;min-width:0;max-width:none;margin:24px 0}.working-tabs .mid-cooler-art{max-width:430px}}

.stock-hero-browser .button.primary:disabled{border:1px solid #07101470}

.stock-site>.metaballs-layer[data-full-hero="true"] .metaballs-still{opacity:.32}

.stock-hero-tabs .hero-app-demo .video-frame{box-sizing:content-box;width:calc(100% - 2px)}
.stock-hero-tabs .hero-app-demo video{height:auto;max-height:none}

/* Shared motion controls occupy ordinary section flow, never covering content. */
.stock-site .site-effects-toggle{position:relative;inset:auto;display:block;width:max-content;max-width:100%;min-height:44px;margin:12px 0 28px;padding:9px 14px;z-index:3;border:1px solid currentColor;border-radius:24px;background:transparent;color:inherit;font:700 12px/1.4 Manrope,Arial,sans-serif;box-shadow:none}
.stock-site .site-footer{padding-bottom:40px}
.stock-site .site-footer>.site-effects-toggle{flex-basis:auto;flex-shrink:0;margin:0 0 12px}

.stock-site .stock-hero .site-effects-toggle{margin:12px 0 0;padding:8px 12px}

/* V9: Tabs-only wide genuine demo, white type and one uniform dark film shade. */
.stock-site .stock-hero-tabs::after{background:rgba(0,0,0,.68)}
.stock-site .stock-hero-tabs,.stock-site .stock-hero-tabs>.site-header,.stock-site .stock-hero-tabs .wordmark-label,.stock-site .stock-hero-tabs nav a,.stock-site .stock-hero-tabs h1,.stock-site .stock-hero-tabs .hero-description,.stock-site .stock-hero-tabs .availability-note,.stock-site .stock-hero-tabs .demo-link,.stock-site .stock-hero-tabs .site-effects-toggle{color:#fff}
.stock-site .stock-hero-tabs .hero-overlay{grid-template-columns:1.05fr 1fr;grid-template-rows:auto auto;gap:32px 48px;align-content:center;padding-top:32px;padding-bottom:72px}
.stock-site .stock-hero-tabs h1{grid-column:1;grid-row:1;align-self:center;font-size:clamp(70px,6.4vw,96px);max-width:none}
.stock-site .stock-hero-tabs .hero-actions{grid-column:2;grid-row:1;align-self:center;max-width:none}
.stock-site .stock-hero-tabs .hero-art.hero-app-demo{grid-column:1/-1;grid-row:2;max-width:1200px;width:100%;justify-self:center;margin:0}
.stock-site .stock-hero-tabs .hero-app-demo video{max-width:none;width:100%;height:auto;object-fit:contain}
.stock-site .stock-hero-tabs .hero-description{font-size:19px;max-width:36ch}
.stock-site .stock-hero-tabs .hero-actions .button.primary:disabled{margin-top:18px}
.stock-site .stock-hero-tabs .hero-video-toggle{background:#121212dc;color:#fff;border-color:#ffffffb3}
.stock-site .stock-hero-tabs :is(a,button):focus-visible{outline-color:#fff}
.stock-site .stock-hero-tabs #hero-content:focus-visible{outline-color:#fff}
.stock-site .stock-hero-tabs .button.primary.specular-button:disabled{background:rgba(255,255,255,.13);color:#fff;border-color:#ffffffb3;box-shadow:inset 0 1px 0 #ffffff4d,inset 0 -1px 0 #ffffff26}
@media(max-width:700px){
 .stock-site .stock-hero-tabs .hero-overlay{display:flex;gap:0;padding-top:28px;padding-bottom:72px}
 .stock-site .stock-hero-tabs h1{font-size:clamp(58px,15.4vw,86px);align-self:start}
 .stock-site .stock-hero-tabs .hero-art.hero-app-demo{max-width:none;margin:24px 0}
 .stock-site .stock-hero-tabs .hero-description{font-size:17px}
}

/* V10: balanced Tabs desktop hero, generous whole-browser demo beside the copy. */
.stock-site .stock-hero-tabs .hero-overlay{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);grid-template-rows:auto auto;gap:24px 32px;align-content:center;padding-top:32px;padding-bottom:64px}
.stock-site .stock-hero-tabs h1{grid-column:1;grid-row:1;align-self:end;font-size:clamp(70px,6.4vw,96px)}
.stock-site .stock-hero-tabs .hero-actions{grid-column:1;grid-row:2;align-self:start}
.stock-site .stock-hero-tabs .hero-art.hero-app-demo{grid-column:2;grid-row:1/3;align-self:center;justify-self:stretch;max-width:820px;width:100%;margin:0}
@media(max-width:900px){
 .stock-site .stock-hero-tabs .hero-overlay{display:flex;flex-direction:column;gap:0;padding-top:28px;padding-bottom:72px}
 .stock-site .stock-hero-tabs h1{font-size:clamp(58px,12vw,86px);align-self:start}
 .stock-site .stock-hero-tabs .hero-art.hero-app-demo{max-width:none;margin:24px 0}
 .stock-site .stock-hero-tabs .hero-description{font-size:17px}
}