/* ============================================================================
   The reading pages: How it works and Security. The section rows, headings
   and body text come from public/css/site.css (the one pattern on every inner
   page); this file adds what only these pages show: the score card, the
   programme thread, the audience lists, the list of the page's sections and
   the security page's tables.
   ========================================================================== */

.ledger code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--gray-100); border-radius: 4px; padding: 1px 5px; }

/* The scorecard: the product's own artifact, shown instead of described. */
.match-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 44px; align-items: start; }
.match-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px 22px 18px; box-shadow: 0 10px 30px rgba(66, 31, 51, 0.07); }
.match-card .demo-tag { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.match-card .pair { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.match-card .who { font-size: 13.5px; line-height: 1.45; }
.match-card .who b { display: block; font-size: 14px; }
.match-card .who span { color: var(--text-muted); font-size: 12.5px; }
.match-card .who .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.mc-ring { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
.mc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-ring .num b { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1; }
.mc-ring .num span { font-size: 10px; color: var(--text-muted); }
.mc-part { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 16px 0 9px; }
.mc-part:first-of-type { margin-top: 0; }
.match-card .factor { grid-template-columns: 140px 1fr 30px; gap: 10px; }
.mc-uplift { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-secondary); border-top: 1px dashed var(--border-color); margin-top: 16px; padding-top: 12px; }
.mc-uplift b { color: var(--primary-500); font-weight: 700; }
.mc-why { font-size: 13px; line-height: 1.65; color: var(--text-secondary); background: var(--gray-50); border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; }
.mc-why b { color: var(--text-primary); }
.mc-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }

/* The programme: one connected thread, top to bottom. */
.thread { list-style: none; margin: 6px 0 0; padding: 0; position: relative; counter-reset: step; }
.thread::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--primary-200), var(--primary-500)); border-radius: 2px; }
.thread li { position: relative; padding: 0 0 26px 54px; counter-increment: step; }
.thread li:last-child { padding-bottom: 0; }
.thread li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-700); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--bg-primary); }
.thread b { display: block; font-size: 16px; margin-bottom: 3px; }
.thread span { display: block; font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 62ch; }

.aud-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; max-width: 66ch; }
.aud-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.aud-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-500); }
.aud-list b { color: var(--text-primary); }
.ledger .body .aud-list + p { margin-top: 18px; } /* beats .ledger .body p's margin */

/* A page's list of its own sections, right under the hero. */
.toc-row { padding: 40px 0; }
.toc-row + .ledger { border-top: 1px solid var(--border-color); }
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; max-width: 760px; }
.toc a { font-size: 15px; line-height: 1.5; }

/* Plain tables on the security page. */
.info-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 18px; max-width: 760px; }
.info-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.info-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--gray-500); padding: 0 16px 10px 0; border-bottom: 1px solid var(--border-color); }
.info-table td { vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--gray-100); color: var(--text-secondary); }
.info-table td:first-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.policy { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; max-width: 760px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 880px) {
  .match-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-row { padding: 32px 0; }
}
@media (max-width: 640px) {
  .info-table td:first-child { white-space: normal; }
  /* A wide table becomes one block per row on phones. */
  .info-table.stack thead { display: none; }
  .info-table.stack tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
  .info-table.stack td { display: block; border: 0; padding: 2px 0; }
  .info-table.stack td:first-child { margin-bottom: 4px; }
  .info-table.stack td[data-label]::before { content: attr(data-label) ": "; color: var(--text-primary); font-weight: 600; }
  .match-card .factor { grid-template-columns: 132px 1fr 28px; gap: 8px; }
}