/* ============================================================
   Privacy Scanner Website — Final CTA (§7.10) styles

   Token substitutions (spec → actual):
     --sp-12          → --sp-11           (both = 160px)
     --fs-display-lg  → --fs-display
     --fs-display-md  → --fs-h1           (mobile)
     --fs-mono-xs     → --fs-mono-sm      (mobile meta-row)
     --teal-wash-soft → --teal-wash       (existing 8%-alpha variant)
     --font-display   → --font-sans
   ============================================================ */

.cta-final {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--teal-wash) 100%);
  padding-block: var(--sp-11);
  border-block-start: 1px solid var(--border-soft);
}
.cta-final-inner {
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  text-align: left;
}
@media (min-width: 600px)  { .cta-final-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .cta-final-inner { padding-inline: var(--gutter-desktop); } }


/* ============================================================
   H2 — display-sized, semibold (NOT bold), 14ch cap so the
   line break lands at "in / your files."
   ============================================================ */
.cta-final-h {
  margin: 0 0 var(--sp-5);
  max-width: 14ch;
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--text);
  text-wrap: balance;
}
:lang(ja) .cta-final-h,
:lang(zh-Hans) .cta-final-h,
:lang(ko) .cta-final-h {
  line-height: 1.3; letter-spacing: 0; text-wrap: auto; max-width: 18ch;
}


/* ============================================================
   Meta row — table-stakes details demoted to mono caps
   ============================================================ */
.cta-final-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}
.cta-final-sep { color: var(--border); }


/* ============================================================
   App Store badge styles are shared across hero, pricing, and
   final CTA — see src/components/app-store-badge.css. The wider
   6px focus-offset for the final-CTA position lives there too,
   scoped via .cta-final .app-store-badge-link:focus-visible.
   ============================================================ */


/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 599px) {
  .cta-final { padding-block: var(--sp-10); }
  .cta-final-h { font-size: var(--fs-h1); }
  .cta-final-meta { font-size: var(--fs-mono-sm); }
}