/* ============================================================================
   The information pages: /about and /security.
   A plum hero with no button, then ledger rows (a quiet label rail on the
   left, the substance on the right), and one call to action at the end.
   ========================================================================== */

body { background: var(--bg-primary); color: var(--text-primary); }

.info-nav {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 28px; background: rgba(250, 247, 248, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
}
.info-nav .brand-logo { height: 30px; }
.info-nav .brand-link { display: flex; align-items: center; }
.info-nav nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.info-nav nav a { padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius); }
.info-nav nav a:hover { background: var(--primary-50); color: var(--primary-700); }
.info-nav nav a.signin { color: var(--primary-700); }
.info-nav nav a.signin:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }

.info-wrap { max-width: 1040px; margin: 0 auto; padding: 0 28px; }

/* Hero: type on plum, one faint thread rising behind it. No button up here. */
.info-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--primary-900), var(--primary-700)); color: #fff; padding: 96px 0 88px; }
.info-hero .info-wrap { position: relative; }
.info-hero h1 { font-family: var(--font-display); font-size: clamp(34px, 5.4vw, 54px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; max-width: 640px; margin: 0 0 22px; }
.info-hero h1 .accent { color: var(--primary-200); }
.info-hero p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0; }
.info-hero p + p { margin-top: 14px; }
.info-hero .checked { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); margin-top: 22px; }
.info-hero.compact { padding: 76px 0 68px; }
.hero-arc { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); height: 130%; width: auto; pointer-events: none; }

/* Every section is a ledger row: a quiet label rail on the left, substance on the right. */
.ledger { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px 48px; padding: 66px 0; border-top: 1px solid var(--border-color); }
.ledger:first-of-type { border-top: none; }
.ledger .lab { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-500); padding-top: 7px; }
.ledger h2 { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }
.ledger h2::before { content: ""; display: block; width: 1.13em; height: 0.226em; margin-bottom: 0.34em; background: var(--primary-500); } /* the brand overline */
.ledger h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.005em; margin: 30px 0 12px; }
.ledger .body { min-width: 0; }
.ledger .body p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); max-width: 60ch; margin: 0 0 16px; }
.ledger .body p b { color: var(--text-primary); font-weight: 600; }
.ledger .body a:not(.btn):not(.org-logo) { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--primary-300); }
.ledger .body a:not(.btn):not(.org-logo):hover { color: var(--primary-500); text-decoration-color: currentColor; }
.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: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; 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: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.mc-part { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); 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: 15px; margin-bottom: 3px; }
.thread span { display: block; font-size: 13.5px; 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: 14px; line-height: 1.65; color: var(--text-secondary); }
.aud-list li::before { content: ""; position: absolute; left: 0; top: 8px; 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 partner logo on white, linked to its own site. */
.logo-chip { display: inline-flex; align-items: center; gap: 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 20px; margin: 4px 0 22px; }
.logo-chip .org-logo { margin: 0; }
.logo-chip .org-logo { height: 76px; }
.logo-chip .org-logo .logo-ises { height: 76px; }
.logo-chip .org-logo .logo-dms { height: 40px; }
.logo-chip .chip-text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.logo-chip .chip-text b { display: block; color: var(--text-primary); font-weight: 600; }
.logo-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 22px; }
.logo-row .logo-chip { margin: 0; flex: 1 1 260px; max-width: 420px; } /* the pair even side by side, each full width on a phone */

/* The security 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: 14px; line-height: 1.5; }

/* Publications and other reference lists. */
.pub-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; max-width: 68ch; }
.pub-list li { font-size: 14px; line-height: 1.6; color: var(--text-secondary); padding-left: 16px; border-left: 2px solid var(--primary-200); }
.pub-list b { color: var(--text-primary); font-weight: 600; }

/* Two short lists side by side: what someone can see, and what they cannot. */
.two-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 40px; max-width: 820px; }
.two-lists h3 { margin-top: 14px; }
.ledger .body .two-lists + p { margin-top: 24px; }

/* 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: 14px; line-height: 1.55; }
.info-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; 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; }

/* The one CTA on the page, bookending the hero. */
.info-cta { background: linear-gradient(160deg, var(--primary-700), var(--primary-900)); color: #fff; padding: 64px 0; margin-top: 66px; }
.info-cta h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.info-cta p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); max-width: 54ch; margin: 0 0 26px; }
/* A light button, so it stands out from the plum band it sits on. */
.info-cta .btn-primary { background: #fff; color: var(--primary-700); padding: 13px 30px; }
.info-cta .btn-primary:hover { background: var(--primary-50); color: var(--primary-700); }

.info-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; max-width: 1040px; margin: 0 auto; padding: 26px 28px 34px; }
.info-footer .foot-links { display: flex; gap: 4px; }
.info-footer .foot-links a { padding: 6px 10px; font-size: 13px; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius); }
.info-footer .foot-links a:hover { background: var(--primary-50); color: var(--primary-700); }

@media (max-width: 880px) {
  .match-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero-arc { opacity: 0.5; }
}
@media (max-width: 760px) {
  .ledger { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 46px 0; }
  .ledger .lab { padding-top: 0; }
  .two-lists { grid-template-columns: minmax(0, 1fr); }
  .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-row { padding: 32px 0; }
}
@media (max-width: 640px) {
  .info-nav { padding: 12px 16px; }
  .info-nav nav a:not(.signin) { display: none; } /* one scrollable page; anchors add noise on phones */
  .info-wrap { padding: 0 20px; }
  .info-hero { padding: 60px 0 54px; }
  .info-hero.compact { padding: 52px 0 46px; }
  .hero-arc { display: none; }
  .info-cta { padding: 48px 0; margin-top: 46px; }
  .logo-chip { padding: 12px 16px; gap: 14px; }
  .logo-chip .org-logo, .logo-chip .org-logo .logo-ises { height: 64px; }
  .logo-chip .org-logo .logo-dms { height: 35px; }
  .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; }
  .info-footer { padding: 22px 20px 30px; flex-direction: column; align-items: flex-start; }
}