/* ==========================================================================
   SIGMA SCANNER — trust.css
   §3 Trust strip · one sentence, four real numbers.

   No bespoke JS file for this section — the counters are the shared
   [data-count] system already built into animation.js at foundation time
   (see that file's initCounters()); this is simply its first user. Nothing
   here needs GSAP directly at all.

   Layer discipline: base rules and the one responsive override live
   together in @layer components — an override left in @layer layout has
   silently lost to a components-layer base rule twice already in this
   project, regardless of specificity or matching media query.
   ========================================================================== */

@layer components {

  /* ---------- DIRECT-ANSWER SUMMARY (AEO) --------------------------------
     The definitional paragraph that opens this section. Deliberately styled
     as body copy rather than a second headline — its job is to be
     extractable by answer engines, not to compete with .trust__statement
     below it. Sits outside .trust__board because that board is a two-item
     space-between row from 640px up. */
  .trust__summary {
    max-inline-size: var(--measure);
    margin-block-end: var(--sp-8);
    padding-block-end: var(--sp-7);
    border-block-end: 1px solid var(--ink-200);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-500);
  }
  .trust__summary b { color: var(--ink-900); font-weight: var(--fw-semibold); }

  .trust__board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    align-items: center;
    text-align: center;
  }

  /* Wraps the statement + its compliance note so the pair stays ONE flex
     item. .trust__board is space-between at >=640px; a third direct child
     would be pushed to the middle and break the two-column composition. */
  .trust__lede { display: flex; flex-direction: column; gap: var(--sp-4); }

  .trust__compliance {
    max-inline-size: 46ch;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-400);
  }

  /* A <h2> now (was a <p>) so §3 has a heading in the document outline at
     all — every other section on the page opens with one, this was the
     one silent exception. letter-spacing is pinned explicitly because
     base.css's element-selector h2 rule would otherwise now apply (it
     never matched a <p>) and introduce a small negative tracking with no
     visible reason behind it; font-weight/size/line-height were already
     overridden here regardless of tag, so only this one property needed
     the same defensive treatment. */
  .trust__statement {
    max-inline-size: 46ch;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    letter-spacing: normal;
    color: var(--ink-800);
  }

  .trust__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--sp-6);
    inline-size: 100%;
    max-inline-size: 640px;
  }

  .trust__stat { display: flex; flex-direction: column; gap: var(--sp-1); }

  .trust__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-bold);
    font-size: var(--fs-metric);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--signal-700);
  }

  .trust__label {
    font-size: var(--fs-xs);
    color: var(--ink-400);
    letter-spacing: .01em;
  }

  @media (min-width: 640px) {
    .trust__board { flex-direction: row; justify-content: space-between; text-align: start; gap: var(--sp-9); }
    .trust__statement { max-inline-size: 32ch; }
    .trust__compliance { max-inline-size: 40ch; }
    .trust__stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
  }
}