/* recommended-tools-page.css — page-owned styles for /recommended-tools/
   (the affiliate/partners page that doubles as the free-VIP funnel — the
   page that makes the business money: visitors click a partner-exchange
   link, trade volume, and unlock DeltaStrike VIP free).

   v2.1.0 — CEO rejected v2.0.0 outright ("absolute trash"): monogram tiles
   read as debug placeholders, 1-2 card sections left lopsided empty voids,
   the page was flat monotone dark-on-dark with no hierarchy, the featured
   Bitunix card didn't dominate, and the black-on-black primary CTA was
   nearly invisible. This version fixes all of it, iterated against real
   Playwright screenshots at 1440x900 and 390x844:

   1) GRID VOIDS FIXED — `.recommended-tools-cards-grid` is now a centered
      flexbox (`justify-content: center` + capped `flex-basis`/`max-width`
      per card) instead of a left-aligned CSS grid. 1 card centers alone,
      2 center as a balanced pair, 3 fill the row — no orphaned card with
      dead space to its right.
   2) PRIMARY CTA POPS — `.recommended-tools-cta-primary` is now the site's
      shadcn "primary" look (`--foreground` fill / `--background` text,
      same formula as `/shared/landing.css`'s `.lp-btn`), used ONLY on the
      Bitunix CTA. Secondary/partner CTAs stay quiet outlined ghost buttons.
   3) FEATURED CARD DOMINATES — wider (760px vs. the old 600px), a soft
      emerald-tinted elevated ring + gradient wash, a clean "FEATURED
      PARTNER" pill with NO emoji, and the $10k-volume payoff line restyled
      as its own highlighted stat strip with a green accent bar.
   4) BRAND MARKS LOOK INTENTIONAL — monogram tiles (Bitunix/MEXC/Bybit/
      BingX/Bitfinex/Ngrave — no official SVG available, see template
      header comment) are now 52-60px rounded-app-icon tiles with a
      brand-accent diagonal gradient, an inset top highlight + inset hairline
      border for depth, and a soft drop shadow — deliberate branding, not a
      flat debug square. Trezor now renders the REAL Simple Icons glyph
      (previously also a monogram) alongside the already-accurate X/
      Telegram/Discord glyphs, all on the same neutral `--muted` "social"
      tile treatment.
   5) WIDTH + RHYTHM — page container widened 1080px -> 1220px, larger
      section spacing, bigger CTAs, tasteful hover elevation on every card.

   Layers on top of /shared/landing.css (v1.2.0), reusing its canonical
   shadcn-dark tokens (--background/--foreground/--card/--card-foreground/
   --muted/--muted-foreground/--border/--border-strong/--radius/--radius-sm/
   --buy/--focus-ring) rather than redefining them. */

.recommended-tools-wrap {
  max-width: 1220px;
}

/* ---------- Eyebrow (shared pattern, reused across every section) ---------- */
.recommended-tools-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 12px;
}

/* ---------- Hero ---------- */
.recommended-tools-hero {
  text-align: center;
  padding: 56px 0 48px;
}

.recommended-tools-hero h1 {
  font-size: clamp(2rem, 4.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--foreground);
}

.recommended-tools-hero p {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Shared button system ----------
   Primary = the site's canonical shadcn "primary" look (solid --foreground
   fill / --background text — same formula as /shared/landing.css's
   .lp-btn), used ONLY for the Bitunix featured CTA so it visually dominates
   the page. Secondary = outlined ghost button, used for every partner/
   alternate CTA so it stays quiet and Bitunix stays the highest-emphasis
   element. Both share sizing/radius/focus-ring rules with the rest of the
   site's button components. */
.recommended-tools-cta-primary,
.recommended-tools-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.recommended-tools-cta-primary {
  width: 100%;
  height: 56px;
  padding: 0 28px;
  background: var(--foreground);
  color: var(--background);
  border: none;
  font-size: 1.0625rem;
  font-weight: 700;
  box-shadow: 0 12px 28px -10px rgba(34, 197, 94, 0.35);
}

.recommended-tools-cta-primary:hover {
  background: #e4e4e7;
  box-shadow: 0 16px 32px -10px rgba(34, 197, 94, 0.45);
}

.recommended-tools-cta-primary:active {
  transform: translateY(1px);
}

.recommended-tools-cta-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--focus-ring);
}

.recommended-tools-cta-secondary {
  width: 100%;
  height: 44px;
  padding: 0 20px;
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border-strong);
  font-size: 0.875rem;
}

.recommended-tools-cta-secondary:hover {
  background: rgba(250, 250, 250, 0.06);
  border-color: #71717a;
}

.recommended-tools-cta-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--focus-ring);
}

/* ---------- Brand mark — reusable component for every card ----------
   Two variants: `-monogram` (premium brand-accent gradient tile with an
   uppercase two-letter initial — used where no official mark is available)
   and `-social` (accurate inline-SVG glyph on a neutral muted tile — used
   for X/Telegram/Discord/Trezor, all pixel-accurate Simple Icons paths). */
.recommended-tools-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  user-select: none;
}

.recommended-tools-brand-mark-large {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

.recommended-tools-brand-mark-monogram {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background-image: linear-gradient(135deg, var(--recommended-tools-brand-tile-from), var(--recommended-tools-brand-tile-to));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 22px -8px rgba(0, 0, 0, 0.6);
}

.recommended-tools-brand-mark-large.recommended-tools-brand-mark-monogram {
  font-size: 1rem;
}

.recommended-tools-brand-mark-social {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.recommended-tools-brand-mark-social svg {
  width: 22px;
  height: 22px;
}

.recommended-tools-brand-mark-large.recommended-tools-brand-mark-social svg {
  width: 26px;
  height: 26px;
}

/* Per-brand accent gradients — tasteful, distinct, tuned for contrast with
   the white monogram text. Not official brand assets (see template
   comment): a uniform premium-tile system stands in for logos we won't
   fabricate inaccurately. */
.recommended-tools-brand-mark-bitunix {
  --recommended-tools-brand-tile-from: #22d3a8;
  --recommended-tools-brand-tile-to: #056a4a;
}
.recommended-tools-brand-mark-mexc {
  --recommended-tools-brand-tile-from: #38d9e8;
  --recommended-tools-brand-tile-to: #0b6a7d;
}
.recommended-tools-brand-mark-bybit {
  --recommended-tools-brand-tile-from: #ffc94d;
  --recommended-tools-brand-tile-to: #b3720a;
  color: #241900;
}
.recommended-tools-brand-mark-bingx {
  --recommended-tools-brand-tile-from: #5b93ff;
  --recommended-tools-brand-tile-to: #1a3fc4;
}
.recommended-tools-brand-mark-bitfinex {
  --recommended-tools-brand-tile-from: #a3e635;
  --recommended-tools-brand-tile-to: #3f6212;
  color: #0f1a03;
}
.recommended-tools-brand-mark-ngrave {
  --recommended-tools-brand-tile-from: #52525b;
  --recommended-tools-brand-tile-to: #131316;
}

/* ---------- Featured partner (Bitunix) — visually dominant, THE money path ---------- */
.recommended-tools-featured-section {
  margin-bottom: 64px;
}

.recommended-tools-featured-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 52px 56px 48px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(34, 197, 94, 0.1), transparent 60%),
    var(--card);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) + 6px);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.16),
    0 32px 64px -16px rgba(0, 0, 0, 0.6);
}

.recommended-tools-featured-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--buy);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 24px;
}

.recommended-tools-featured-eyebrow-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--buy);
  flex-shrink: 0;
}

.recommended-tools-featured-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 10px;
}

.recommended-tools-featured-name {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.recommended-tools-featured-tagline {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin: 0 0 32px;
}

.recommended-tools-featured-payoff {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--foreground);
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-left: 3px solid var(--buy);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  margin: 0 0 24px;
  line-height: 1.45;
}

.recommended-tools-featured-payoff svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--buy);
}

.recommended-tools-featured-benefits {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.recommended-tools-featured-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--foreground);
  line-height: 1.5;
}

.recommended-tools-featured-benefits svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--buy);
}

.recommended-tools-featured-privacy-note {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 20px 0 0;
}

/* ---------- Section headings ---------- */
.recommended-tools-section {
  margin-bottom: 64px;
}

.recommended-tools-section-heading-wrap {
  text-align: center;
  margin-bottom: 28px;
}

.recommended-tools-section h2 {
  font-size: 1.4375rem;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.recommended-tools-section-note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 24px 0 0;
}

/* ---------- Partner card grid ----------
   Centered flexbox (NOT a left-aligned grid): every card gets a capped
   flex-basis/max-width so 1 card centers alone, 2 center as a balanced
   pair, and 3 fill the row evenly. This is the fix for the old layout's
   worst offense — a lone left-aligned card with a lopsided blank void
   next to it. */
.recommended-tools-cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.recommended-tools-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  max-width: 350px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.recommended-tools-partner-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.55);
}

.recommended-tools-partner-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}

.recommended-tools-partner-name {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
}

.recommended-tools-partner-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 0 0 14px;
}

.recommended-tools-partner-tagline {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  margin: 0 0 22px;
  line-height: 1.5;
  flex-grow: 1;
}

/* ---------- Disclosure + final CTA ---------- */
.recommended-tools-disclosure {
  padding: 36px;
  margin-top: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.recommended-tools-disclosure-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 12px;
}

.recommended-tools-disclosure p.recommended-tools-disclosure-text {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0 0 22px;
  line-height: 1.6;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.recommended-tools-final-cta-line {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.recommended-tools-final-cta-line span {
  font-size: 0.9375rem;
  color: var(--foreground);
}

.recommended-tools-final-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.recommended-tools-final-cta-link:hover {
  background: rgba(250, 250, 250, 0.06);
  border-color: #71717a;
}

.recommended-tools-final-cta-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--focus-ring);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .recommended-tools-featured-card {
    padding: 36px 24px 32px;
  }

  .recommended-tools-featured-identity {
    flex-direction: column;
    gap: 12px;
  }

  .recommended-tools-featured-name {
    font-size: 1.625rem;
  }

  .recommended-tools-featured-payoff {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .recommended-tools-partner-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}