/* ─────────────────────────────────────────────────────────────
   penaltygrid.css — the statutory maxima, drawn. Loaded only on /faq/.

   A dark band on a white page: the FAQ is 24 accordions of black text on
   white and needs one thing that is not a paragraph. Navy rather than a
   tinted card, because the point of the section is weight.

   Figures come from website/regulatory_penalties.py and the marked half
   from Penalty.sme_binding_half. Nothing here decides a number.
   ───────────────────────────────────────────────────────────── */

.pengrid {
  background: #0a1628;
  padding: 64px 24px;
}

.pengrid-inner {
  max-width: 860px;
  margin: 0 auto;
}

.pengrid-title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
  margin: 0 0 14px;
}

.pengrid-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #cbd5e1;
  max-width: 62ch;
  margin: 0 0 36px;
}

.pengrid-sub strong {
  color: #ffffff;
  font-weight: 600;
}

.pengrid-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #1e293b;
}

.pengrid-row {
  display: grid;
  gap: 16px 28px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #1e293b;
}

.pengrid-regime {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f59e0b;
  margin: 0 0 5px;
}

.pengrid-breach {
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

/* The two halves of one maximum, and the word that separates them. Flex,
   because it is one row of three things — not a grid pretending. */
.pengrid-halves {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.pengrid-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #1e293b;
  background: #0d1c33;
}

/* The half that actually sets the ceiling for the reader. Amber fill, not an
   amber outline: an outline on one of two adjacent boxes reads as focus, and
   this is a statement about which figure is true for them. */
.pengrid-half--binds {
  background: #f59e0b;
  border-color: #f59e0b;
}

.pengrid-figure {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  white-space: nowrap;
}

.pengrid-basis {
  font-size: 12px;
  line-height: 1.35;
  color: #94a3b8;
}

/* #0a1628 on #f59e0b is 9.4:1 — the navy ink is what makes the marked box
   readable, not a white-on-amber that would sit at 2:1. */
.pengrid-half--binds .pengrid-figure { color: #0a1628; }
/* #5c3602 not #7c4a03: the lighter brown measured 3.45:1 on amber and this
   label is 12px, which needs 4.5:1. Measured, not eyeballed — a small label
   on a bright fill is the single most common contrast failure there is. */
.pengrid-half--binds .pengrid-basis  { color: #5c3602; }

.pengrid-or {
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  color: #7c8da3;   /* 5.35:1 on the navy; #64748b measured 3.81 */
  text-transform: lowercase;
}

.pengrid-foot {
  font-size: 14px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 26px 0 0;
  max-width: 70ch;
}

.pengrid-foot strong {
  color: #ffffff;
  font-weight: 600;
}

/* Two columns once there is room for the breach and both halves to sit on one
   line. Below that they stack, and the halves stay side by side — comparing
   them is the entire point, so they must never end up one above the other. */
@media (min-width: 720px) {
  .pengrid { padding: 80px 24px; }
  .pengrid-row { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}