/* 2026-08-03 REL_104/105 — /about-us page-unique layout glue ONLY.
   Tokens only: every colour/radius/shadow is a var() from di-system's :root. No hex, no rgb()/rgba() literal,
   no new token declared (charter #16).

   🔴 SLIMMED in REL_105 (Naveen: "css ki comman cheeze ek jagah rakh do"). This file and di-howitworks.css had
   become ~75% identical under two prefixes, and had already begun to drift (.ab-head 2rem vs .hiw-head 2.25rem).
   Everything they shared now lives in di-system as ADDITIVE, opt-in primitives — .di-static (heading scale),
   .di-sec--alt, .di-sec--cta, .di-measure, .di-gs--3 — written to both di-system.css AND di-system.scss so the
   consolidation does not deepen the known drift between them.

   Earlier in REL_104 this file also re-implemented THREE shared components before the CSS reviewer caught it;
   .di-prose, .di-feat/.di-feat__c and .di-gs/.di-gs__c are now reused as-is. What is left below is genuinely
   unique to this page.

   No dark block: marketme's di-system is intentionally light-only (zero prefers-color-scheme, zero data-theme). */

/* ---------- the "mutual trust" band ----------
   Distinct from .di-sec--alt: this one is the stronger --tint wash with a rule above AND below, used once as a
   divider between the two audience blocks. */
.ab-band {
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.ab-band h2 { margin: 0 0 .5rem; }
.ab-band p {
  margin: 0 auto;
  max-width: 46rem;
  color: var(--ink2);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- audience block heading ---------- */
.ab-head {
  max-width: 46rem;
  margin: 0 0 2rem;
}
.ab-head h2 { margin: .5rem 0 .5rem; }

/* ---------- point cards ----------
   The cards are the shared .di-feat__c; only the decorative accent is page-local.
   The :hover rule is NOT redundant: di-system's `.di-feat__c:hover { border-color: transparent }` is (0,2,0)
   and beats this (0,1,0) whatever the load order, so without it every card silently lost its accent the moment
   the cursor landed. No screenshot could have shown that.
   `list-style:none` on the <li> is required — grid does NOT suppress the marker; QA found a disc painting
   outside all 8 cards when it was removed. Paired with role="list" in the markup, because Safari drops the
   implicit list role once list-style:none applies. */
.ab-page li.di-feat__c { list-style: none; }
.ab-accent { border-top: 3px solid var(--blue); }
.ab-accent:hover { border-top-color: var(--blue); }
.ab-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- roots & vision ----------
   Sits on an INNER div inside .di-wrap, never on the wrap itself: putting it on the wrap and narrowing
   max-width silently CENTRED the block (the wrap carries margin:0 auto), so the section sat on a different
   left rail from every other heading; over-correcting with margin-left:0 then pinned it flush at x=0. */
.ab-roots { max-width: 52rem; }
.ab-roots h2 { margin: 0 0 1rem; }

/* ---------- corporate information ---------- */
.ab-corp {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 2rem;
  max-width: 60rem;
  margin: 0 auto;
}
.ab-corp h2 { margin: 0 0 .75rem; }
.ab-page .ab-corp h2 { font-size: 1.375rem; }
.ab-corp > p {
  margin: 0 0 1.5rem;
  color: var(--ink2);
  line-height: 1.75;
}
.ab-corp__facts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.ab-corp__facts dt {
  color: var(--muted);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}
.ab-corp__facts dd {
  color: var(--ink);
  line-height: 1.6;
}

/* ---------- responsive ----------
   980px matches di-system's own stacking point for .di-feat and .di-gs, so the same visual objects behave
   identically here and on Home. Touch targets come from the shared .di-btn (~50px), nothing overridden. */
@media (max-width: 980px) {
  .ab-grid2 { grid-template-columns: 1fr; }
  .ab-corp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ab-corp__facts { grid-template-columns: minmax(0, 1fr); }
  .ab-corp { padding: 1.5rem 1.25rem; }
}