/* Final CTA (#get-started): centred revealed heading, then a copper vine wreath (a masked layer)
   around a dark variant-B framed box with two buttons. Nothing moves while idle. Spec 23. */
.cta {
  background: var(--page);
  padding-block: 96px;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 768px;
  margin-bottom: 64px;
  text-align: center;
}
.cta-sub {
  color: var(--text-2);
}

/* Holder: 768x240 at 1440. The wreath is the wide mask from 640, the 4:3 phone mask below. */
.cta-holder {
  position: relative;
  width: 100%;
  max-width: 768px;
  padding: 64px;
}
.cta-wreath {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--accent);
  pointer-events: none;
  -webkit-mask-image: url(../assets/95591f045fe7fca775ede49a657512eb.png);
  mask-image: url(../assets/95591f045fe7fca775ede49a657512eb.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 640px) {
  .cta-wreath {
    -webkit-mask-image: url(../assets/fe5b67cf746d7d235e84f6c49e6df8ec.png);
    mask-image: url(../assets/fe5b67cf746d7d235e84f6c49e6df8ec.png);
  }
}
.cta-box {
  position: relative;
  z-index: 10;
  padding: 12px;
}
.cta-box > .pframe {
  color: var(--surface);
}
.cta-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--surface);
}
@media (min-width: 640px) {
  .cta-panel { flex-direction: row; }
  .cta-btn { flex: 1 1 0; min-width: 0; } /* 280 each at 1440 */
}