/* ==========================================================================
   KuduDoc — Trust page (page-specific rules)
   This page links tokens.css / base.css / components.css only — NOT
   home.css. A couple of small generic utilities that live in home.css
   (.section-head) are redefined here at equal cost, since they aren't
   available to import from a page-specific stylesheet we're told not to
   touch. Everything else composes existing components (.section, .grid,
   .card, .chip, .btn, .doc-window, .fact-tile-style tiles, .icon).
   ========================================================================== */

/* ---- Section head (same convention as home.css uses, redefined locally) ---- */
.section-head{ max-width: 640px; margin-bottom: var(--space-8); }

/* ---- Generic row / text utilities reused across sections below ---- */
.btn-row{ display: flex; gap: var(--space-4); flex-wrap: wrap; }
.btn-row--center{ justify-content: center; }
.chip-row{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.chip-row--center{ justify-content: center; }
.note-line{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.8); }

.text-link{ color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover{ color: var(--blue-700); }
[data-surface="dark"] .text-link,
[data-surface="gradient"] .text-link{ color: var(--white); }

/* Body copy on the dark accordion band — NOT .lede (that override is only
   verified safe on the gradient surface; on solid blue-600 it measures under
   AA for normal-weight text, so this page avoids that pairing entirely and
   uses the same rgba(255,255,255,.85) already proven on .fact-tile__desc). */
.text-on-dark-body{ color: rgba(255,255,255,0.85); max-width: 640px; font-size: var(--text-body-lg); }

/* ---- Hero ---- */
.trust-hero{ position: relative; overflow: hidden; text-align: center; }
.trust-hero__glow{
  position: absolute; inset: -30% -10% -40% -10%;
  background: radial-gradient(55% 55% at 50% 0%, rgba(255,255,255,0.28), transparent 70%);
  z-index: 0; pointer-events: none;
}
.trust-hero__inner{ position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.trust-hero .eyebrow{ justify-content: center; }
.trust-hero h1{ margin-top: var(--space-5); }
.trust-hero .lede{ margin-top: var(--space-5); max-width: 600px; margin-inline: auto; }
.trust-hero .btn-row{ margin-top: var(--space-7); }
.trust-hero .chip-row{ margin-top: var(--space-7); }

/* ---- Proof tabs (the three proofs, deep-dive section) ---- */
.proof-tabs__list{
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  border-bottom: var(--border-hairline); margin-bottom: var(--space-8);
}
.proof-tab{
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-small);
  color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.proof-tab:hover{ color: var(--blue-700); }
.proof-tab[aria-selected="true"]{ color: var(--blue-600); border-bottom-color: var(--blue-600); }
.proof-tab__num{
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-100); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--font-sans);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.proof-tab[aria-selected="true"] .proof-tab__num{ background: var(--blue-600); color: var(--white); }

.proof-panel__grid{ align-items: start; }
.proof-panel__text h3{ margin-top: var(--space-4); }
.proof-panel__text .lede{ margin-top: var(--space-3); }
.proof-panel__text p{ color: var(--text-secondary); }
.proof-panel__text p + p{ margin-top: var(--space-4); }
.proof-panel__text strong{ color: var(--ink-900); }

.proof-readout{
  background: var(--surface-sunken); border: var(--border-hairline);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.proof-readout__head{ display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-5); }
.proof-readout__icon{
  width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--blue-100); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.proof-readout__title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); }
.proof-readout__list{ display: flex; flex-direction: column; margin: 0; }
.proof-readout__row{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding-block: var(--space-3); border-top: var(--border-hairline);
}
.proof-readout__row:first-child{ border-top: none; padding-top: 0; }
.proof-readout__row dt{ font-size: var(--text-small); font-weight: 600; color: var(--text-tertiary); flex-shrink: 0; }
.proof-readout__row dd{ margin: 0; font-size: var(--text-small); color: var(--ink-900); text-align: right; font-weight: 500; }
.proof-readout__hash{ font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; word-break: break-all; text-align: right; }

@media (max-width: 640px){
  .proof-tabs__list{ flex-direction: column; border-bottom: none; gap: var(--space-2); }
  .proof-tab{ border: var(--border-hairline); border-radius: var(--radius-md); margin-bottom: 0; }
  .proof-tab[aria-selected="true"]{ background: var(--blue-50); border-color: var(--blue-600); }
}
@media (max-width: 480px){
  .proof-readout__row{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .proof-readout__row dd, .proof-readout__hash{ text-align: left; }
}

/* ---- Compare grid (self-signed certificate honesty section) ---- */
.compare-grid{ margin-top: var(--space-8); }
.compare-card{ display: flex; flex-direction: column; }
.compare-card__eyebrow{
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: var(--space-4);
}
.compare-window .doc-window__body > .chip{ margin-bottom: var(--space-4); }
.compare-window__desc{ font-size: var(--text-small); color: var(--text-secondary); line-height: var(--leading-normal); }
.compare-card__note{ margin-top: var(--space-4); font-size: var(--text-micro); color: var(--text-tertiary); }

.compare-callout{
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-top: var(--space-7); max-width: 820px;
}
.compare-callout p{ font-size: var(--text-small); color: var(--ink-900); line-height: var(--leading-normal); }
.compare-callout p + p{ margin-top: var(--space-3); }

/* ---- Trust tiles (hosting & POPIA section, light tint-blue surface) ---- */
.trust-tile{ display: flex; flex-direction: column; gap: var(--space-3); }
.trust-tile__icon{
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--white); color: var(--blue-600); border: var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
}
.trust-tile__title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); }
.trust-tile__desc{ font-size: var(--text-small); color: var(--text-secondary); }
.trust-caveat{
  max-width: 760px; margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: var(--border-hairline-strong); font-size: var(--text-small); color: var(--text-secondary);
}

/* ---- Disclosure accordion (what we don't claim yet, dark band) ---- */
.disclosure-list{ margin-top: var(--space-8); border-top: var(--border-hairline-on-dark); max-width: 780px; }
.disclosure{ border-bottom: var(--border-hairline-on-dark); }
.disclosure > summary{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); color: var(--white);
}
.disclosure > summary::-webkit-details-marker{ display: none; }
.disclosure__icon{ flex-shrink: 0; color: rgba(255,255,255,0.7); transition: transform var(--dur-base) var(--ease-out); }
.disclosure[open] .disclosure__icon{ transform: rotate(180deg); }
.disclosure__panel{ padding-bottom: var(--space-6); margin-top: -8px; max-width: 640px; }
.disclosure__panel p{ color: rgba(255,255,255,0.85); font-size: var(--text-body); line-height: var(--leading-normal); }

/* ---- Closing CTA ---- */
.closing-cta .btn-row{ margin-top: var(--space-7); }
.closing-cta .lede{ margin-top: var(--space-4); }