/* source_agent=codex / machine=mac-mini; isolated, opt-in responsive compositions */
html[data-hero-layout] .hero--bots{display:flex;flex-direction:column;align-items:stretch;min-height:0;max-height:none;padding:76px 0 0}
html[data-hero-layout] .hero--bots .hero-scene{position:relative;inset:auto;order:0;width:100%;height:clamp(260px,49vw,410px);margin:0;z-index:0}
html[data-hero-layout] .hero--bots .hero-art-background,html[data-hero-layout] .hero--bots .hero-art-back,html[data-hero-layout] .hero--bots .hero-art-middle{inset:auto auto 0 -65%;width:170%;height:112%;object-fit:cover;object-position:50% 50%}
html[data-hero-layout] .hero--bots .hero-art-codex{width:47%;left:8%;bottom:12%;height:auto}
html[data-hero-layout] .hero--bots .hero-art-claude{width:43%;left:52%;bottom:15%;height:auto}
html[data-hero-layout] .hero--bots .hero-scene::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(transparent,#071a38);z-index:5;pointer-events:none}
html[data-hero-layout] .hero--bots .hero-copy{order:1;position:relative;z-index:2;width:100%;max-width:none;margin:0;padding:24px clamp(20px,4vw,64px) 44px}
html[data-hero-layout] .hero--bots .hero-copy h1{width:100%;max-width:none;font-size:clamp(30px,5.2vw,48px);line-height:1.35;letter-spacing:-.035em}
html[data-hero-layout] .hero--bots .hero-phrase{display:inline-block}
html[data-hero-layout] .hero--bots .hero-description{width:100%;max-width:none;margin-top:20px;font-size:16px;line-height:1.85}
html[data-hero-layout] .hero--bots .hero-link{margin-top:22px;font-size:16px}
html[data-hero-lab] .hero--bots .hero-layer,html[data-hero-lab] .hero--bots .hero-copy{animation:none!important;opacity:1!important;transform:none!important}
/* A: mobile visual first; selected PC overlay is defined below. */
/* B: visual above a white editorial message, at every width. */
html[data-hero-layout=b] .hero--bots .hero-scene{height:clamp(260px,46vw,590px)}
html[data-hero-layout=b] .hero--bots .hero-copy{background:#fff;color:#172b3a;padding:30px max(24px,calc((100vw - 1280px)/2)) 40px}
html[data-hero-layout=b] .hero--bots .hero-copy h1,html[data-hero-layout=b] .hero--bots .hero-description,html[data-hero-layout=b] .hero--bots .hero-link{color:#172b3a}
@media(min-width:1100px){
html[data-hero-layout=b] .hero--bots .hero-copy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:0 6%;padding-block:32px 40px}
html[data-hero-layout=b] .hero--bots .hero-copy h1{grid-column:1;grid-row:1/3;font-size:clamp(42px,3.8vw,62px)}
html[data-hero-layout=b] .hero--bots .hero-description{grid-column:2;margin-top:4px}
html[data-hero-layout=b] .hero--bots .hero-link{grid-column:2;align-self:start;margin-top:18px}
}
/* C: a larger visual, with the copy touching the empty lower part of the scene. */
html[data-hero-layout=c] .hero--bots .hero-scene{height:clamp(310px,87vw,390px)}
html[data-hero-layout=c] .hero--bots .hero-art-codex{bottom:20%}
html[data-hero-layout=c] .hero--bots .hero-art-claude{bottom:23%}
html[data-hero-layout=c] .hero--bots .hero-copy{margin-top:-28px;padding-top:0}
@media(min-width:640px) and (max-width:1199px){
html[data-hero-layout=c] .hero--bots{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);padding-top:80px;align-items:center}
html[data-hero-layout=c] .hero--bots .hero-scene{grid-column:2;grid-row:1;height:clamp(510px,58vw,650px)}
html[data-hero-layout=c] .hero--bots .hero-copy{grid-column:1;grid-row:1;margin:0;padding:24px 0 40px 4vw}
html[data-hero-layout=c] .hero--bots .hero-copy h1{font-size:clamp(29px,3.3vw,42px)}
html[data-hero-layout=c] .hero--bots .hero-description{font-size:15px}
}
@media(min-width:1200px){
html[data-hero-layout=c] .hero--bots{display:flex;flex-direction:row;align-items:center;min-height:max(680px,56.25vw);padding:120px 0 100px}
html[data-hero-layout=c] .hero--bots .hero-scene{position:absolute;inset:0;z-index:-1;height:100%}
html[data-hero-layout=c] .hero--bots .hero-art-background,html[data-hero-layout=c] .hero--bots .hero-art-back,html[data-hero-layout=c] .hero--bots .hero-art-middle{inset:0;width:100%;height:100%;object-position:50% 50%}
html[data-hero-layout=c] .hero--bots .hero-art-codex{left:43%;bottom:12%;width:29%}
html[data-hero-layout=c] .hero--bots .hero-art-claude{left:69%;bottom:15%;width:26%}
html[data-hero-layout=c] .hero--bots .hero-scene::after{display:none}
html[data-hero-layout=c] .hero--bots .hero-copy{width:calc(100% - 8vw);max-width:1560px;margin:0 auto;padding:0}
html[data-hero-layout=c] .hero--bots .hero-copy h1{width:53%;max-width:820px;font-size:clamp(46px,4.45vw,76px)}
html[data-hero-layout=c] .hero--bots .hero-description{width:46%;max-width:690px;font-size:clamp(16px,1.35vw,21px)}
}
@media(max-width:359px){
html[data-hero-layout] .hero--bots .hero-copy h1{font-size:27px}
html[data-hero-layout] .hero--bots .hero-description{font-size:15px}
}

@media(min-width:640px){html[data-hero-layout=b] .hero--bots .hero-art-codex{width:min(33%,480px);left:27%;bottom:9%}html[data-hero-layout=b] .hero--bots .hero-art-claude{width:min(30%,440px);left:58%;bottom:12%}}

@media(max-width:359px){html[data-hero-layout=b] .hero--bots .hero-copy{padding-inline:20px}}

@media(min-width:640px){html[data-hero-layout=b] .hero--bots .hero-art-back,html[data-hero-layout=b] .hero--bots .hero-art-middle{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}}

/* source_agent=codex / machine=mac-mini; selected visual-first A with a long alpha fade */
@media(max-width:899.98px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots{--hero-tail:72px;--hero-blend-ink:#071a38;display:flex;flex-direction:column;align-items:stretch;min-height:0;max-height:none;padding:76px 0 0;background:var(--hero-blend-ink);color:#fff}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene{position:relative;inset:auto;order:0;width:100%;height:calc(clamp(260px,49vw,410px) + var(--hero-tail));margin:0;z-index:0;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.98)60%,rgba(0,0,0,.8)72%,rgba(0,0,0,.42)84%,rgba(0,0,0,.12)94%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.98)60%,rgba(0,0,0,.8)72%,rgba(0,0,0,.42)84%,rgba(0,0,0,.12)94%,transparent 100%)}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene::after{display:none}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-background,:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-back,:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-middle{inset:auto auto 0 -65%;width:170%;height:112%;object-fit:cover;object-position:50% 50%}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-codex{width:min(47%,220px);left:8%;bottom:calc(var(--hero-tail) + 12%);height:auto}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-claude{width:min(43%,205px);left:52%;bottom:calc(var(--hero-tail) + 15%);height:auto}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy{position:relative;order:1;z-index:2;width:100%;max-width:none;margin:0;padding:24px clamp(20px,4vw,64px) 44px}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy h1{width:100%;max-width:none;font-size:clamp(30px,5.2vw,48px);line-height:1.35;letter-spacing:-.035em;color:#fff}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-phrase{display:inline-block}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-description{width:100%;max-width:none;margin-top:20px;font-size:16px;line-height:1.85;color:#fff}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-link{margin-top:22px;font-size:16px;color:#fff}
}
@media(max-width:359px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy h1{font-size:27px}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-description{font-size:15px}
}

/* source_agent=codex / machine=mac-mini; selected A on small and wide PCs */
@media(min-width:900px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots{display:flex;flex-direction:row;align-items:center;min-height:max(680px,56.25vw);max-height:none;padding:120px 0 100px}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene{position:absolute;inset:0;order:0;width:100%;height:100%;margin:0;z-index:0;mask-image:none;-webkit-mask-image:none}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-background,:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-back,:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-middle{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-codex{left:43%;bottom:12%;width:29%;height:auto}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-claude{left:69%;bottom:15%;width:26%;height:auto}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene::after{display:none}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy{position:relative;order:1;z-index:2;width:calc(100% - 8vw);max-width:1560px;margin:0 auto;padding:0}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy h1{width:53%;max-width:820px;font-size:clamp(46px,4.45vw,76px);line-height:1.4;letter-spacing:-.045em}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-description{width:46%;max-width:690px;margin:28px 0 0;font-size:clamp(16px,1.35vw,21px);line-height:1.8}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-link{margin-top:30px;font-size:clamp(16px,1.25vw,20px)}
}
@media(min-width:900px) and (max-width:1199.98px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-codex{left:51%;width:27%}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-claude{left:76%;width:23%}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy h1{width:51%;font-size:clamp(34px,4.45vw,54px)}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-description{width:41%;text-wrap:initial}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene::after{content:"";display:block;position:absolute;inset:0;height:auto;z-index:5;background:linear-gradient(90deg,rgba(7,26,56,.62),rgba(7,26,56,.38) 34%,transparent 57%);pointer-events:none}
}

@media(min-width:1800px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots{min-height:1012px}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-copy{width:calc(100% - 120px);max-width:1680px}
}

/* Tablet A: lowered artwork with transparent upper and lower edges. */
@media(min-width:600.01px) and (max-width:899.98px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots{--hero-tail:96px;padding-top:100px}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene{height:calc(clamp(360px,49vw,440px) + var(--hero-tail));-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 5%,#000 14%,#000 52%,rgba(0,0,0,.95) 66%,rgba(0,0,0,.52) 80%,rgba(0,0,0,.12) 92%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 5%,#000 14%,#000 52%,rgba(0,0,0,.95) 66%,rgba(0,0,0,.52) 80%,rgba(0,0,0,.12) 92%,transparent 100%)}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-codex{width:min(40%,340px);left:14%;bottom:calc(var(--hero-tail)*.45 + 12%)}
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-claude{width:min(37%,320px);left:54%;bottom:calc(var(--hero-tail)*.45 + 15%)}
}

/* Keep background crowd heads inside the visual-first scene at every narrow width. */
@media(max-width:899.98px){
:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-back,:is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-art-middle{height:100%;object-position:50% 0%}
}

/* source_agent=codex / machine=mac-mini: centered human and both bots share one crop. */
@media(max-width:899.98px){
  .hero--bots .hero-art-human-scene{object-position:85% 50%}
  :is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) .hero--bots .hero-scene{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 90%,rgba(0,0,0,.8)94%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 90%,rgba(0,0,0,.8)94%,transparent 100%)}
}

@media(min-width:900px){
  :is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) #top .hero-scene::after{content:"";display:block;position:absolute;inset:0;height:auto;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,26,56,.9)0%,rgba(7,26,56,.85)28%,rgba(7,26,56,.65)42%,rgba(7,26,56,.15)54%,transparent 62%)}
}
@media(max-width:359px){
  .hero--bots .hero-art-human-scene{object-position:83% 50%}
  :is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) #top .hero-scene{height:320px}
}

@media(min-width:900px) and (max-width:1199.98px){
  :is(html[data-hero-layout=a],html:not([data-hero-layout]) .mobile-hero-a) #top .hero-art-human-scene{inset:auto 0 0;width:100%;height:auto;object-fit:contain;object-position:50% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 100%)}
}