/* ===========================================================================
   ABOUT
   ---------------------------------------------------------------------------
   About had no layout of its own. It borrowed classes built for other pages,
   and each one brought a rule that did not belong:

     .questions   only ever styled a numbered <ol>, never the section, so three
                  sections rendered with zero padding and butted together.
     .questions li stamped a counter and a 52px indent onto ANY <li> inside the
                  section, which is what turned the four chips into a diagonal
                  staircase of "01 02 03 04".
     .chip-list   styles pills on `span`, but About used `li`, so the pills had
                  no pill styling to inherit in the first place.
     .evidence-panel is a grid COLUMN, complete with a border-right, used here
                  as a full-width block.
     .demo-note   is a .78rem !important footnote for the demos page, which is
                  why a paragraph of real copy rendered smaller than its
                  neighbours.

   So About gets its own rhythm here instead. Nothing in this file is used by
   another page, and it overrides nothing that another page relies on.
   =========================================================================== */

/* One vertical rhythm for the whole page. Every band is separated by a hairline
   rather than by guesswork, so the sections read as a sequence. */
.ab {
  padding-block: 96px;
  border-top: 1px solid var(--line);
}
.ab > .ab-head { max-width: 780px; }
.ab p { max-width: 62ch; color: var(--body, var(--ink)); }
.ab h2 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); }
.ab-head p { margin-top: 20px; font-size: 1.05rem; }

/* Copy on the left, a short supporting column on the right. The right column is
   deliberately narrow: it holds facts, not more prose. */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr);
  gap: 64px;
  align-items: start;
}
.ab-split .ab-aside { padding-top: 8px; }

/* Plain facts. Not chips, not a counter list: a line each, with a rule between,
   so they read as terms rather than decoration. */
.ab-facts { margin: 0; padding: 0; list-style: none; }
.ab-facts li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.ab-facts li:first-child { border-top: 1px solid var(--line); }
.ab-facts small {
  display: block;
  margin-top: 5px;
  font-weight: 500;
  font-size: .82rem;
  color: var(--muted);
}

/* The paragraph that carries the argument, set larger than the rest so the eye
   lands on it first. */
.ab-lead { font-size: 1.18rem !important; line-height: 1.5; }

/* What gets built. Two columns so the range reads as capability at a glance,
   rather than a long single list that reads as a menu to pick one item from. */
.ab-panel {
  margin-top: 34px;
  padding: 38px 40px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .6);
}
.ab-panel ul { margin: 0; padding: 0; list-style: none; }
.ab-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.ab-panel li { padding: 17px 0; border-bottom: 1px solid var(--line); }
/* The last row is the bottom of BOTH columns, so clear the rule on each. */
.ab-panel-grid > li:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.ab-panel strong { display: block; font-size: 1.02rem; }
.ab-panel span { display: block; margin-top: 4px; color: var(--muted); font-size: .93rem; }

/* Ownership, without the price cards. The terms are the point, not the number. */
.ab-terms { margin: 0; padding: 0; list-style: none; }
.ab-terms li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
.ab-terms li:first-child { border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .ab { padding-block: 64px; }
  .ab-split { grid-template-columns: 1fr; gap: 34px; }
  .ab-panel { padding: 26px 22px; }
  .ab-panel-grid { grid-template-columns: 1fr; gap: 0; }
  /* Single column: only the true last item loses its rule. */
  .ab-panel-grid > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 17px; }
  .ab-panel-grid > li:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Who is actually building it. These are the only hard credentials the company
   has, so they get their own treatment rather than being folded into the prose:
   a tag you can scan, then the claim. The tag is the proof, the line is what it
   buys the reader. */
.creds { margin: 0; padding: 0; list-style: none; }
.creds li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.creds li:first-child { border-top: 1px solid var(--line); }
.creds li:last-child { border-bottom: 0; }
.creds-tag {
  display: inline-block;
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet);
}
.creds p { margin: 8px 0 0; font-size: .96rem; line-height: 1.5; color: var(--ink); max-width: none; }