/* ============================================================
   G.12 — "Was ist Agent Trust?"
   Static explainer block. Three cards, one question each.
   The palette is fixed and deliberately outside the site token
   system, so the block reads the same in light and dark mode.
   ============================================================ */

.g12 {
  --g-bg: #1c222b;
  --g-card: #232a34;
  --g-deep: #161b22;
  --g-line: #3b4555;
  --g-text: #e8edf3;
  --g-muted: #8d98a7;
  --g-blue: #3b8cff;

  background: var(--g-bg);
  color: var(--g-text);
  padding: 72px 0 80px;
  /* iOS inflates text in blocks it decides are wide; keep the scale honest */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

.g12__in { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

.g12-sans { font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; }
.g12-mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}

.g12__brand { display: block; font-size: 11px; color: var(--g-muted); }

/* ---------- header ---------- */
.g12__head { text-align: center; margin-top: 30px; }
.g12__h {
  margin: 0; font-weight: 500; font-size: 44px; line-height: 1.1;
  color: var(--g-text);
}
.g12__sub {
  max-width: 620px; margin: 14px auto 0;
  font-weight: 400; font-size: 18px; line-height: 1.45; color: var(--g-muted);
  text-wrap: balance;
}
/* a hyphenated compound never breaks across two lines */
.g12-nb { white-space: nowrap; }

/* ---------- cards ---------- */
.g12__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin-top: 44px;
}
.g12__card {
  position: relative; display: flex; flex-direction: column;
  min-height: 320px; padding: 24px 26px;
  background: var(--g-card); border: 1px solid var(--g-line);
}
.g12__card--ev { background: var(--g-bg); border-color: var(--g-blue); }

.g12__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.g12__n { font-size: 11px; color: var(--g-blue); }
.g12__cat { font-size: 11px; color: var(--g-muted); }

.g12__q { margin: 18px 0 0; font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--g-text); }
.g12__a {
  /* the bottom margin keeps the footer rule off the last line when the card
     is only as tall as its content, which is every stacked layout */
  margin: 12px 0 20px; font-weight: 400; font-size: 15px; line-height: 1.45;
  color: var(--g-muted); text-wrap: pretty;
}

/* the footer is pinned to the bottom so the three cards line up */
.g12__foot { margin-top: auto; border-top: 1px solid var(--g-line); padding-top: 14px; }
.g12__foot--gauge { padding-top: 20px; }

/* A row wraps rather than shrinks: at the narrowest widths the value drops to
   its own line instead of the mono type going below 10px. min-height, never
   height, so a wrapped row can never be cropped. */
.g12__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 2px 12px; min-height: 30px;
}
.g12__k { font-size: 10px; color: var(--g-muted); }
.g12__v { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--g-text); }
.g12__v--acc { color: var(--g-blue); }

/* ---------- gauge ---------- */
.g12__gauge {
  position: relative; height: 14px; margin-bottom: 14px;
  background: var(--g-deep); border: 1px solid var(--g-line);
}
.g12__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 46.75%; background: var(--g-blue); }
.g12__mark { position: absolute; left: 62.5%; top: -6px; bottom: -6px; width: 2px; background: var(--g-text); }

/* ---------- seal ---------- */
.g12__stamp {
  position: absolute; right: 26px; bottom: 98px;
  padding: 6px 12px; border: 2px solid var(--g-blue); color: var(--g-blue);
  font-size: 11px; font-weight: 600; transform: rotate(-6deg);
}

/* ---------- tagline ---------- */
.g12__tag {
  max-width: 62ch; margin: 36px auto 0; text-align: center;
  font-weight: 400; font-size: 20px; line-height: 1.4;
  color: var(--g-muted); text-wrap: balance;
}
.g12__tag b { font-weight: 500; color: var(--g-text); }

/* ============ tablet ============ */
@media (max-width: 1023px) {
  .g12__h { font-size: 36px; }
  .g12__sub { font-size: 17px; }
  .g12__q { font-size: 26px; }
  .g12__card { padding: 22px; }
}

/* Below ~900px three columns stop fitting. The trio reads as a sequence, so
   it becomes one column rather than two plus an orphan. */
@media (max-width: 899px) {
  .g12__cards { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .g12__card { min-height: 0; }
  /* the card is no longer tall enough to hold the seal in the gap, so it
     takes its own place at the end instead of landing on the text */
  .g12__stamp {
    position: static; align-self: flex-end;
    margin-top: 10px; transform: rotate(-6deg) translateX(-4px);
  }
}

/* ============ phone ============ */
@media (max-width: 639px) {
  .g12 { padding: 48px 0 56px; }
  .g12__in { padding-inline: 16px; }
  .g12__brand { display: none; }
  .g12__head { margin-top: 0; }
  .g12__h { font-size: 30px; }
  .g12__sub { font-size: 16px; }
  .g12__cards { gap: 16px; }
  .g12__card { padding: 20px; }
  .g12__q { font-size: 24px; }
  .g12__a { font-size: 15px; }
  .g12__row { min-height: 28px; }
  .g12__tag { font-size: 17px; line-height: 1.45; margin-top: 28px; }
}