/* Shared call-to-action bands
   Canonical .cta pattern plus the intentionally larger Framework variant. */
.cta{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px;
  align-items:center;
  padding:72px 48px;
  background-image:radial-gradient(var(--grid) 1.2px,transparent 1.2px);
  background-size:24px 24px;
  border-bottom:var(--strong);
}
.cta h2{
  font-size:clamp(2rem,4vw,3.3rem);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:10px 0;
}
.cta p{color:var(--slate)}

.framework-cta{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:60px;
  align-items:center;
  padding:88px 36px;
  border-bottom:var(--strong);
  background-image:radial-gradient(var(--grid) 1.2px,transparent 1.2px);
  background-size:24px 24px;
}
.framework-cta h2{
  font-size:clamp(2.3rem,4vw,4rem);
  line-height:1.05;
  letter-spacing:-.04em;
  margin:12px 0 20px;
}
.framework-cta p{color:var(--slate);max-width:680px}
.framework-cta .actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

@media(max-width:980px){
  .cta{grid-template-columns:1fr}
}
@media(max-width:980px){
  .framework-cta{grid-template-columns:1fr}
  .framework-cta .actions{justify-content:flex-start}
}
@media(max-width:680px){
  .cta{padding:64px 20px}
}
@media(max-width:680px){
  .framework-cta{padding-left:20px;padding-right:20px}
}