/* Hero layout B — split headline around a centre stage (same height as before).
   "Your software." on the left, "Reimagined with AI." on the right, the animation in the middle.
   To revert: remove the hero-layout.css <link> in index.html. */
.hero.hero{display:grid;align-items:center;column-gap:48px;row-gap:0;
  grid-template-columns:minmax(0,1fr) minmax(0,440px) minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"eye . ." "h1a art h1b" "desc art act";
  padding-top:44px;padding-bottom:40px;
  background:radial-gradient(ellipse 520px 560px at 50% 55%,rgba(203,208,255,.18),rgba(203,208,255,0) 70%),#2a2d9f}
.hero.hero .hero-copy,.hero.hero h1{display:contents}
.hero.hero h1 br{display:none}
.hero.hero .h1a,.hero.hero .h1b{font-size:clamp(44px,4.5vw,76px);font-weight:400;line-height:1.02;letter-spacing:-.06em;align-self:end;margin:0 0 30px}
.hero.hero .h1a{grid-area:h1a;justify-self:start;max-width:6.2em}
.hero.hero .h1b{grid-area:h1b;justify-self:end;text-align:right;max-width:6.2em}
.hero.hero .h1b .serif{display:block}
.hero.hero .hero-copy .eyebrow{grid-area:eye;align-self:end;margin-bottom:24px}
.hero.hero .hero-art.hm{grid-area:art;width:100%;height:551px;align-self:start}
.hero.hero .hero-description{grid-area:desc;align-self:start;max-width:340px;margin:0;padding-left:22px;border-left:1px solid rgba(203,208,255,.4)}
.hero.hero .hero-actions{grid-area:act;align-self:start;justify-self:end;flex-direction:column;align-items:flex-end;gap:16px;
  padding-right:22px;border-right:1px solid rgba(203,208,255,.4)}
.hero.hero .hero-footnote{display:none}
/* tablet: classic two columns (text left, stage right) */
@media(min-width:761px) and (max-width:1100px){
  .hero.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"eye art" "h1a art" "h1b art" "desc art" "act art";column-gap:30px}
  .hero.hero .h1a,.hero.hero .h1b{justify-self:start;text-align:left;margin:0;align-self:auto}
  .hero.hero .h1b{margin-bottom:24px}
  .hero.hero .hero-description{border:0;padding:0;margin-bottom:24px}
  .hero.hero .hero-actions{justify-self:start;align-items:flex-start;flex-direction:row;border:0;padding:0}
  .hero.hero .hero-art.hm{height:460px}
}
/* phones: stack */
@media(max-width:760px){
  .hero.hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"eye" "h1a" "h1b" "desc" "act" "art";column-gap:0}
  .hero.hero .h1a,.hero.hero .h1b{justify-self:start;text-align:left;margin:0;font-size:clamp(46px,12vw,72px);max-width:none}
  .hero.hero .h1b{margin-bottom:22px}
  .hero.hero .hero-description{border:0;padding:0;margin-bottom:22px}
  .hero.hero .hero-actions{justify-self:start;align-items:center;flex-direction:row;border:0;padding:0;margin-bottom:32px}
  .hero.hero .hero-footnote{display:none}
}
/* hero edges match every other section (same 1440 grid, scrollbar-safe) */
@media(min-width:1101px){.hero.hero{padding-left:max(56px,calc((100% - 1440px) / 2));padding-right:max(56px,calc((100% - 1440px) / 2))}}