/*
 * About template — /about/, 1 page.
 *
 * Shared.css / p-shared.css carry most of the page. What stays here is the
 * figures band (homepage figures live in home.css and assume the count-up
 * markup), the 2×2 principles grid, and the limits pair layout.
 *
 * Load order is shared.css -> fx.css -> p-shared.css -> p-about.css.
 * Same constraint as the rest: no literal colour, radius or font size.
 */

/* Dark figures band — same beat as the homepage ink strip, static rather than
   animated. Term precedes value in the markup so a screen reader gets
   "Sellers, 27,000+" even though the value paints above the label. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin: 0;
}
.figures__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) 0;
  border-top: 2px solid rgba(255, 255, 255, .14);
}
.figures dt {
  order: 2;
  font-size: var(--t-sm);
  color: var(--on-dark-dim);
}
.figures dd {
  order: 1;
  margin: 0;
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .figures { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}

/* Four principles want two-by-two, not three-plus-orphan. */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  counter-reset: principle;
}
.principles .card {
  position: relative;
  margin: 0;
  padding: var(--s-6) 0 0;
  border: 0;
  border-top: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.principles .card::before {
  counter-increment: principle;
  content: counter(principle, decimal-leading-zero);
  position: absolute;
  top: var(--s-3);
  left: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--accent);
}
.principles .card h3 { margin-top: var(--s-4); }
@media (max-width: 720px) {
  .principles { grid-template-columns: 1fr; }
}

.section--ink a { color: var(--accent-on-dark); }
.section--ink a:hover { text-decoration: underline; }

/* Honest limits as a pair grid so the page does not read as one long stack of
   the same note chrome. */
.limit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.limit-grid .note { height: 100%; }
@media (max-width: 720px) {
  .limit-grid { grid-template-columns: 1fr; }
}

/* Side callout in the "why" split — slightly elevated so it reads as the
   product summary, not another paragraph. */
.about-do {
  border-color: var(--line);
  box-shadow: var(--shadow-md);
  background: var(--white);
}

.about-hero-panel .checklist li { font-size: var(--t-sm); padding: var(--s-1) 0; }