/* Latuvo shared UI components for the marketing site.
   The page is text + the felt CTA + the QR card — no screenshots — so this
   layer is just the CTA button. All measurements come from tokens.css.
   Load order: tokens.css → app.css → home.css. */

/* ── Felt CTA ───────────────────────────────────────────────────────────
   The dominant action — ports AMPrimaryButton (felt fill, pill). Inter caps
   at 600 brand-wide (no 700), matching Theme.Font. */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    background: var(--felt);
    color: var(--felt-text);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 0 32px;
    min-height: var(--btn-primary);
    border-radius: var(--r-chip);
    transition: filter 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }