/* ============================================================
   TALZA — content & document pages
   Shared layout for the reading-first pages: security, terms,
   privacy, how-proof-first-hiring-works, why-anonymous-screening.
   These pages reuse landing/portal class names (.hero, .card,
   .hero-card, .trust-block, .value-grid) but must read as clean,
   theme-aware documents — NOT the landing's dramatic 720px dark
   hero. Loaded AFTER styles.css + theme.css so these rules win on
   shared selectors (equal specificity, later cascade position),
   and every colour comes from the shared theme tokens so light
   and dark stay uniform with the rest of the product.
   ============================================================ */

/* Comfortable reading measure — documents shouldn't run full-bleed */
main { max-width: 980px; }

/* Vertical rhythm — the root cause of the "cramped boxes": sections
   had no spacing between them, so panels stacked edge to edge. */
main > section { margin: clamp(28px, 4vw, 52px) 0; }
main > section:first-child { margin-top: clamp(16px, 3vw, 28px); }

/* — Hero — quiet, on-theme, readable. Strips the landing hero's
     720px min-height, dark-scene assumptions and skew overlay. */
.hero {
  display: block;
  min-height: 0;
  grid-template-columns: none;
  gap: 0;
  padding: clamp(24px, 4vw, 44px) 0 clamp(8px, 2vw, 16px);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.hero::after { display: none; }
.hero h1 {
  color: var(--text);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06;
  max-width: 22ch;
}
.hero .lead { color: var(--muted); margin-top: 16px; }

/* — Hero side card — reads as a normal panel under the heading — */
.hero-card {
  margin-top: 24px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--panel-bg-1, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-card h3 { color: var(--text); margin: 12px 0 8px; }
.hero-card p { color: var(--muted); margin: 0; }

/* — Cards — theme-aware surface so text is never on the wrong ground.
     (The bug: styles.css hardcoded a near-white card background but the
      text colour follows the theme, giving white-on-white in dark mode.) */
.card {
  background: var(--panel-bg-1, var(--paper));
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}
.card h2, .card h3 { color: var(--text); }
.card p, .card li { color: var(--muted); line-height: 1.65; }
.card strong { color: var(--text); }
.card.compact { padding: clamp(20px, 3vw, 26px); }

/* — Technical-controls section: label column beside a definition list — */
.trust-block { display: grid; gap: clamp(18px, 3vw, 28px); }
@media (min-width: 820px) {
  .trust-block { grid-template-columns: 260px 1fr; align-items: start; }
}
.trust-list { display: grid; gap: 16px; }
.trust-list p { margin: 0; color: var(--muted); line-height: 1.7; }
.trust-list strong { color: var(--text); }

/* — Value grid — a touch more air between the three/two-up cards — */
.value-grid { gap: clamp(16px, 2.5vw, 20px); }

/* — Pills / eyebrows already theme via tokens; just ensure contrast — */
.hero .pill,
.hero-card .pill { color: var(--periwinkle); }