/* ============================================================
   10 - THE CLOSE  (section id="download")
   The page's last object: one head, one ask. The getting-started
   row was folded in here (09-faq.css went with it). The support
   rail that also lived here has moved back out to its own section,
   css/09-support.css, because the nav's "Contact" points at it.

   Instrument language, unchanged: one flat bounded panel, one soft
   shadow, no glass, no glow. The trust facts read as a quiet
   metrics strip (values only, middot dividers, no icon tiles).
   Tokens and the shared .btn / .eyebrow-pill components only.
   Custom classes are .cta-
   ============================================================ */

/* Inner scroll target. site.css grants scroll-margin-top to
   .section[id] only, and #start sits INSIDE the section, so
   without this the floating nav island would cover whatever the
   footer's "How to start" lands on. (#support is a real section
   now and gets this from site.css.) */
#start { scroll-margin-top: calc(var(--nav-h) + 14px); }

/* one genuinely bounded panel: the final call to action. A solid, slightly-lifted cool
   near-black ink (--bg-2) so it reads as a clean deliberate card against the darker
   section behind it, not the muddy grey a translucent white overlay turns on near-black.
   It sits in the same 900px reading column as every other section, and the padding is
   tight enough that the content feels intentional instead of floating in an empty box. */
.cta-panel {
  position: relative;
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: clamp(30px, 3.6vw, 44px) clamp(24px, 4vw, 48px);
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;          /* keeps the lit top edge inside the 30px radius */
}

/* The one flourish on the page's last object: a 1px accent rule laid along the panel's
   top edge, fading to nothing at both ends. A hairline, not a glow. It reads as a lit
   edge on a solid slab, costs zero height, and is the same gradient device the shared
   .eyebrow-pill rules already use, so it is the system's own signature rather than a
   new effect. Everything else here stays flat. */
.cta-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 62%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
  pointer-events: none;
}

/* same h2 step as every other section title, so the page closes on the beat it kept */
.cta-title {
  margin-top: 14px;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.07;
  color: var(--text);
}
.cta-acc { color: var(--accent); }   /* single scarce accent word */

/* .cta-sub is gone: the supporting line under the title was removed on request,
   and both halves of what it said are stated elsewhere on the page. The panel is
   head and ask now, so the gap below has to carry what the sub used to. */

.cta-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* quiet metrics strip (values only, no icon+label chips) */
.cta-marks {
  margin-top: 16px;
  font-family: var(--font-price);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  letter-spacing: normal;
  color: var(--text-mute);
}
.cta-marks b { color: var(--text-dim); font-weight: 600; }
.cta-marks .cta-dot { color: var(--text-faint); margin: 0 10px; }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .cta-title { font-size: clamp(25px, 6.6vw, 34px); }
}
@media (max-width: 480px) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  /* stack the strip: each fact on its own line, dividers become the breaks */
  .cta-marks .cta-dot { display: block; height: 0; overflow: hidden; margin: 7px 0; }
}