/* Styles for /faq (the Q&A card list) and /indique (the referral-code card,
   the 4-step flow, the fineprint). These lived inside site-pricing-page.css
   and vanished when the pricing page was rewritten for the single plan — the
   pages that USE them were not in that diff, so nothing red. They live in
   their own file now precisely so a pricing-page rewrite can never take the
   FAQ's styles with it again. */
@layer features {

  /* ── /indique: the referral-code card ─────────────────────────── */

  .landing-page .lp-code-card {
    background: var(--lp-paper-warm);
    border-radius: var(--lp-radius-lg);
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 48px;
  }
  .landing-page .lp-code-card .lp-ex {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 48px;
    padding: 32px;
    background: var(--lp-paper);
    border: 2px dashed var(--lp-terracotta);
    border-radius: 12px;
    color: var(--lp-terracotta-d);
    letter-spacing: 0.04em;
  }
  .landing-page .lp-code-card .lp-ex small {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--lp-ink-mute);
    margin-top: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .landing-page .lp-code-card h3 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 460;
    margin-bottom: 16px;
  }
  .landing-page .lp-code-card p + p {
    color: var(--lp-ink-mute);
    font-size: 14px;
  }

  /* Small disclaimer paragraph (referral 30-day note, footnotes). */
  .landing-page .lp-fineprint {
    font-size: 13px;
    max-width: 60ch;
  }

  /* ── /indique: the numbered 4-step flow ───────────────────────── */

  .landing-page .lp-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  .landing-page .lp-flow .lp-step-card {
    padding: 24px;
    border: 1px solid var(--lp-rule);
    border-radius: var(--lp-radius);
    background: var(--lp-paper);
  }
  .landing-page .lp-flow .lp-step-card .lp-n {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--lp-terracotta-d);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .landing-page .lp-flow .lp-step-card h4 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .landing-page .lp-flow .lp-step-card p {
    font-size: 14px;
    color: var(--lp-ink-soft);
    margin: 0;
  }

  /* ── /faq: the Q&A list ───────────────────────────────────────── */

  .landing-page .lp-faq-section {
    margin-top: 48px;
  }
  .landing-page .lp-faq-section h2 {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lp-terracotta-d);
    font-weight: 600;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lp-rule);
  }
  .landing-page .lp-faq {
    padding: 24px 0;
    border-bottom: 1px solid var(--lp-rule);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
  }
  .landing-page .lp-faq h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 460;
    letter-spacing: -0.01em;
    line-height: 1.3;
    max-width: 20ch;
  }
  .landing-page .lp-faq .lp-a {
    color: var(--lp-ink-soft);
    font-size: 16px;
    line-height: 1.65;
    max-width: 62ch;
  }
  .landing-page .lp-faq .lp-a p {
    margin: 0 0 0.8em;
    font-size: 16px;
    color: var(--lp-ink-soft);
  }
  .landing-page .lp-faq .lp-a strong {
    color: var(--lp-ink);
    font-weight: 600;
  }
  /* In-answer links must read as links (the global a:not(.btn) reset strips them) */
  .landing-page .lp-faq .lp-a a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--lp-ink-faint);
  }
  .landing-page .lp-faq .lp-a a:hover {
    color: var(--lp-terracotta);
    text-decoration-color: var(--lp-terracotta);
  }

  @media (max-width: 900px) {
    .landing-page .lp-code-card {
      grid-template-columns: 1fr;
    }
    .landing-page .lp-flow {
      grid-template-columns: 1fr 1fr;
    }
    .landing-page .lp-faq {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  @media (max-width: 700px) {
    .landing-page .lp-flow {
      grid-template-columns: 1fr;
    }
  }
}