/* ---------------------------------------------------------------------------
   Closing CTA — a centered, bordered card (not a full-width band): black
   title on short lines, green button. Per the design system's approved rule
   this is the one place the primary action is green rather than red.
   --------------------------------------------------------------------------- */

.cta { padding-block: var(--space-9); }

/* Measured on the live site: wider (861px, not 640px), an 8px radius (not
   the shared 12px --radius-card), and a much more visible shadow than the
   shared --shadow-card — that's what actually reads as the card's outline
   in the screenshot, since there's no real border or distinct fill color
   behind it (confirmed via computed style up the whole ancestor chain). */
.cta__card {
  max-width: 861px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--surface-page);
  border-radius: 8px;
  box-shadow: 0 11px 21px 1px rgba(140, 140, 140, 0.5);
}

/* Briefly left-aligned on tablet/mobile along with the rest of the site's
   titles, then reverted specifically for this card per direct follow-up
   request — its title stays centered at every breakpoint. */

/* Measured on the live site: Regular, not the shared --type-display scale's
   Bold, and 43px below 768px, flat 72px from 768px up — not the shared
   scale's fixed 48px throughout. */
.cta__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--type-display-family);
  font-weight: var(--fw-regular);
  font-size: 43px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .cta__title { font-size: 72px; }
}

/* Mobile only. The shared card padding (64/32px) is a desktop measurement
   that never held at mobile: on the live site this card sits with only a
   ~10px inner padding at 375px. Direct measurement: ~40px block padding
   holds, tighter than the shared --space-8. */
@media (max-width: 767px) {
  .cta__card { padding-block: 40px; padding-inline: 10px; }
}

/* On the live site this button's own --lg treatment (32px font, 3px
   radius) makes "CANDIDATI ORA" wrap onto two lines and balloon to 88px
   tall at 375px — out of step with every other button on the site (the
   hero's "CANDIDATI ORA" among them), which all share the plain .ils-btn
   proportions: 40px height, 16px/bold/1.6px-tracking text that always
   stays on one line, and a 4px radius. Per direct request to match those
   "other existing buttons," this resets the --lg overrides back to that
   shared baseline on mobile — the two buttons should read as the same
   control, not two different scales of the same design. Scoped to
   <768px; tablet/desktop keep the approved --lg treatment. */
@media (max-width: 767px) {
  .cta__card .ils-btn {
    height: 40px;
    padding-inline: var(--control-pad-x);
    font-size: 16px;
    letter-spacing: 1.6px;
    border-radius: var(--radius-sm);
  }
}

/* Scaled up +20% from that shared baseline per direct request — every
   dimension (height, padding, font-size, tracking, radius) scaled by the
   same 1.2 factor so the button grows as one proportional unit instead of
   just the text or just the box changing size. */
@media (max-width: 767px) {
  .cta__card .ils-btn {
    height: 48px;
    padding-inline: 28.8px;
    font-size: 19.2px;
    letter-spacing: 1.92px;
    border-radius: 4.8px;
  }
}