/* ============================================================
   CTA DESIGN SYSTEM — single source of truth for every call-to-
   action button/link on the site. Three tiers, one token set
   each, identical on every page (linked, not duplicated).

   Tier 1 (.cta-1): solid brand-blue. Max ONE visible per section.
     Vocabulary: "Start Free" -> /signup
                 "Go Premium — $49/mo" -> /signup?plan=founding
                   (pricing section + at most once per product page)
                 "Choose This Plan" (inside a pricing card that
                   already shows plan name + price)
   Tier 2 (.cta-2): outlined, brand-blue border/text.
     Vocabulary: "View Pricing" -> #pricing
                 "See Sharp in Action" / "See Table Scout in Action"
                   (demo sections only)
   Tier 3 (.cta-3): text link + arrow, brand-blue.
     Vocabulary: "Explore Sharp →" / "Explore Table Scout →" /
                 "Explore Ledger →" / "How it works →"

   Text color for .cta-1 uses --accent-ink (near-black), not literal
   white: #3a9eff is a light-enough blue that white text fails
   WCAG AA contrast (~2:1); --accent-ink gives ~7-8:1. This matches
   the color every other blue-background element on the site already
   used before this pass. See close-out for the flagged judgment call.
   ============================================================ */

.cta-1,
.cta-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.cta-1 {
  background: var(--accent);
  color: var(--accent-ink);
}
.cta-1:hover,
.cta-1:focus-visible {
  color: var(--accent-ink);
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 45%, transparent), 0 12px 36px color-mix(in oklch, var(--accent) 16%, transparent);
}

.cta-2 {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.cta-2:hover,
.cta-2:focus-visible {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 45%, transparent), 0 12px 36px color-mix(in oklch, var(--accent) 16%, transparent);
}

.cta-3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: gap .15s;
}
.cta-3:hover,
.cta-3:focus-visible {
  gap: 10px;
  color: var(--accent);
}

.cta-1 .arrow,
.cta-2 .arrow,
.cta-3 .arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* Responsive: nav CTA runs tighter; a full-width row (hero-actions,
   cta-row, pricing cta-area) stacks and fills width on small screens. */
nav.primary .cta-1,
nav.primary .cta-2 {
  padding: 10px 14px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .cta-row .cta-1,
  .cta-row .cta-2,
  .hero-actions .cta-1,
  .hero-actions .cta-2,
  .cta-area .cta-1,
  .cta-area .cta-2 {
    width: 100%;
    justify-content: center;
    padding: 14px;
  }
}

/* ------------------------------------------------------------
   NOT part of the CTA tier system: plain wayfinding links
   (e.g. "back to homepage", "see all products", "read this
   guide") that don't fit the closed CTA vocabulary. Deliberately
   understated — muted color, no button chrome, no bold weight —
   so they read as navigation, not a competing ask next to a real
   CTA. See close-out for the judgment call this resolves.
   ------------------------------------------------------------ */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  font-family: inherit;
  transition: color .15s;
}
.text-link:hover,
.text-link:focus-visible {
  color: var(--ink-2);
}