/* ══════════════════════════════════════════════════════════════
   About pages — one design language for all three counters
   ══════════════════════════════════════════════════════════════

   The distributor About page was built with an .ab-* system and is the
   one everybody liked, so it is the source of this file rather than a
   new invention. It now lives here, shared, and the shop, the used
   counter and the distributor portal all link it. Change it once.

   Two things were fixed on the way out of the portal's inline block:

   1. It used var(--text-muted), which no stylesheet on this site
      defines. Every rule that set it silently inherited the parent
      colour instead. The tokens here are the real shop tokens, so
      dark theme flips correctly with everything else.
   2. Type and spacing are stated once, not per element, so the three
      pages cannot drift apart again.

   Everything is token-driven: no literal colours, so [data-theme=dark]
   needs no separate block here.
   ═════════════════════════════════════════════════════════════ */

.ab-wrap { max-width: 1100px; margin: 0 auto; padding: 0 26px; }

/* ── hero ─────────────────────────────────────────────────────
   Light ground, not a dark band. The page is a piece of writing about
   the business, and it reads better on the same paper as the shop. */
.ab-hero { padding: 66px 0 30px; }
.ab-eyebrow {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 14px;
}
.ab-hero h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.95rem, 4.2vw, 3rem); line-height: 1.06;
  letter-spacing: -.03em; margin: 0; max-width: 20ch; color: var(--text);
}
.ab-hero h1 .accent { color: var(--accent); }
.ab-lead {
  color: var(--text2); font-size: 1.06rem; max-width: 62ch;
  margin: 18px 0 0; line-height: 1.7;
}

/* ── figure band ──────────────────────────────────────────────
   Hairline grid: the 1px gap IS the divider, so there is no border to
   keep in sync with the cell count. */
.ab-figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border2); border: 1px solid var(--border2);
  border-radius: 14px; overflow: hidden; margin: 38px 0 8px;
}
.ab-figures.three { grid-template-columns: repeat(3, 1fr); }
.ab-fig { background: var(--white); padding: 22px 18px; }
.ab-fig .n {
  font-family: var(--font-serif); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ab-fig .l {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px;
}

/* ── sections ─────────────────────────────────────────────────
   A rule above each one instead of alternating background bands. It
   keeps a long page quiet and lets the cards do the separating. */
.ab-sec { padding: 46px 0; border-top: 1px solid var(--border2); }
.ab-sec h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem); letter-spacing: -.024em;
  margin: 0 0 16px; color: var(--text);
}
.ab-sec h2 .accent { color: var(--accent); }
/* Direct children AND the body column of a split section. The child combinator
   alone missed every paragraph beside a picture, which left them at browser
   defaults: full-bleed measure, tight leading, wrong colour. */
.ab-sec > p, .ab-sec-body p, .ab-prose p {
  color: var(--text2); max-width: 66ch; line-height: 1.78; margin: 0 0 14px;
}
.ab-sec p strong, .ab-prose p strong { color: var(--text); font-weight: 650; }
.ab-sec h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem;
  letter-spacing: -.015em; color: var(--text); margin: 26px 0 10px;
}

/* Body copy beside a picture. Collapses to one column early: a 60ch
   measure and a photo cannot both have the room on a laptop. */
.ab-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.ab-split .ab-sec-body p:last-child { margin-bottom: 0; }

/* ── media panel ──────────────────────────────────────────────
   Replaces the flat gradient rectangle that used to sit here. The
   caption card is anchored to the photo, not floating over nothing. */
.ab-media {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--sand);
  border: 1px solid var(--border2); box-shadow: var(--shadow-md);
}
.ab-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-media-card {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  padding: 16px 18px; border-radius: 13px;
  background: var(--glass-heavy); border: 1px solid var(--border2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ab-media-card .k {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.ab-media-card .t {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.06rem;
  color: var(--text); margin-bottom: 3px; line-height: 1.25;
}
.ab-media-card .s { font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* ── point cards ──────────────────────────────────────────────
   Icon, claim, evidence. No numerals: these are six parallel reasons,
   not six ordered ones, and numbering them said otherwise. */
.ab-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.ab-points.three { grid-template-columns: repeat(3, 1fr); }
.ab-point {
  background: var(--white); border: 1px solid var(--border2);
  border-radius: 14px; padding: 22px 20px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ab-point h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -.015em; margin: 0 0 8px; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.ab-point h3 svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.ab-point p { font-size: .93rem; color: var(--text2); margin: 0; line-height: 1.68; }
.ab-point .reg {
  display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: -2px 0 9px;
}
@media (hover: hover) {
  .ab-point:hover {
    border-color: var(--accent-border);
    box-shadow: var(--shadow-md); transform: translateY(-2px);
  }
}

/* ── steps ────────────────────────────────────────────────────
   The one place a number earns its keep: this really is a sequence, so
   the figure is information. Small serif numeral over a hairline, not a
   filled circle, which is what dated the old page. */
.ab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 30px; }
.ab-step { padding-top: 16px; border-top: 2px solid var(--accent-border); }
.ab-step .n {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1;
}
.ab-step h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem;
  color: var(--text); margin: 10px 0 8px; letter-spacing: -.015em;
}
.ab-step p { font-size: .88rem; color: var(--text2); line-height: 1.7; margin: 0; }

/* ── closing card ─────────────────────────────────────────────── */
.ab-cta {
  margin: 46px 0 70px; background: var(--white); border: 1px solid var(--border2);
  border-radius: 18px; padding: 34px 30px;
  display: grid; grid-template-columns: 1.3fr auto; gap: 26px; align-items: center;
}
.ab-cta h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.022em;
  margin: 0 0 8px; color: var(--text);
}
.ab-cta p { color: var(--text2); margin: 0; max-width: 52ch; line-height: 1.7; }
.ab-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .88rem;
  padding: 12px 22px; border-radius: 12px; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.ab-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(196,114,58,.6); color: #fff; }
.ab-btn.ghost { background: transparent; color: var(--text); border-color: var(--border2); }
.ab-btn.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.ab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .ab-split { grid-template-columns: 1fr; gap: 34px; }
  .ab-steps { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 860px) {
  .ab-figures, .ab-figures.three { grid-template-columns: 1fr 1fr; }
  .ab-points, .ab-points.three { grid-template-columns: 1fr; }
  .ab-cta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ab-wrap { padding: 0 18px; }
  .ab-hero { padding: 38px 0 22px; }
  .ab-sec { padding: 34px 0; }
  .ab-steps { grid-template-columns: 1fr; }
  .ab-lead { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-point, .ab-btn { transition: none; }
  .ab-point:hover, .ab-btn:hover { transform: none; }
}