/* ==========================================================================
   SOALAN LAZIM — FAQ page
   Ported verbatim from the scoped <style> block of src/pages/faq.astro.

   Enqueued ONLY on this page. That is load-bearing, not an optimisation:
   several class names here (.project, .explain, .benefit, .step, .cta,
   .prose, .faq-aside) are reused across pages with conflicting rules, and
   Astro's per-file scoping is what kept them apart. Keeping each page's
   rules in a file that loads on that page alone reproduces that isolation.
   Do not merge these into one stylesheet.
   ========================================================================== */

  .faq-layout {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
  }

  @media (min-width: 64rem) {
    .faq-layout {
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
      gap: var(--space-2xl);
    }

    .faq-aside {
      position: sticky;
      top: calc(var(--header-h) + var(--space-m));
    }
  }

  .faq-aside {
    display: grid;
    gap: var(--space-m);
  }

  .aside-card {
    padding: var(--space-m);
    background: var(--stone-000);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
  }

  .aside-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-s);
    background: var(--action-100);
    color: var(--action-700);
    margin-bottom: var(--space-s);
  }

  .aside-card h2,
  .aside-note h2 {
    font-size: var(--step-1);
    text-transform: none;
    font-stretch: 100%;
    letter-spacing: 0;
  }

  .aside-card p {
    margin: 0.5rem 0 var(--space-m);
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--graphite-600);
  }

  .aside-note {
    padding: var(--space-m);
    background: var(--stone-100);
    border-radius: var(--radius-m);
  }

  .aside-note p {
    margin-top: 0.5rem;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--graphite-700);
  }