/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * theme: studied-DNA (source: https://www.spread.ai/) grafted onto ZStrike brand tokens (--zs-*)
 * paper #ffffff · surface #f5f5f6 · accent #0b66b2 ≤5% · display Familjen Grotesk 500 · body IBM Plex Sans · labels IBM Plex Mono
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */

/* Semantic classes for repeated page patterns, values from tokens/ custom properties.
   One-off layout styles remain inline (in CSSOM-serialized form; see CLAUDE.md).
   Interactive elements (a/button/inputs) intentionally keep inline styles. */
@import url("/tokens/colors.css");
@import url("/tokens/typography.css");
@import url("/tokens/effects.css");

html, body { overflow-x: clip; }

/* ---- Shell (full-white airy system) ---- */
.zs-wrap { max-width: var(--zs-page-max); margin: 0 auto; padding: 0 var(--zs-page-pad); }

/* ---- Display type ---- */
.zs-display { font-family: var(--zs-font-display); font-weight: 500; font-size: var(--zs-text-display); letter-spacing: var(--zs-track-display); line-height: 1.02; margin: 0 0 24px; text-wrap: balance; min-width: 0; overflow-wrap: anywhere; }
.zs-lede { font-size: 18px; line-height: 1.65; color: var(--zs-text-secondary); margin: 0; max-width: 58ch; }
.zs-h2 { font-family: var(--zs-font-display); font-weight: 500; font-size: clamp(30px, 2.2vw + 18px, 42px); letter-spacing: -0.8px; line-height: 1.1; margin: 0 0 16px; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.zs-h3 { font-family: var(--zs-font-display); font-weight: 500; font-size: var(--zs-text-h3); margin: 0 0 10px; }
.zs-p { font-size: 16px; line-height: 1.7; color: var(--zs-text-secondary); margin: 0 0 18px; max-width: 640px; }
.zs-em { font-style: normal; color: var(--zs-blue); }
.zs-eyebrow { font-family: var(--zs-font-mono); font-size: var(--zs-text-eyebrow); letter-spacing: var(--zs-track-eyebrow); color: var(--zs-blue); margin-bottom: 10px; }

/* ---- Grey mat: real screenshots + CSS mockups sit on this ---- */
.zs-mat { background: var(--zs-surface); border: 1px solid var(--zs-border-hair); padding: clamp(18px, 4vw, 48px); margin: 0; min-width: 0; }
.zs-figcap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; font-family: var(--zs-font-mono); font-size: 10px; letter-spacing: 1.3px; color: var(--zs-text-muted-dark); }
.zs-panel { background: var(--zs-paper); border: 1px solid var(--zs-border-soft); box-shadow: var(--zs-shadow-soft); min-width: 0; }

/* ---- Sections ---- */
.zs-section { padding: var(--zs-section-pad) 8px; border-bottom: 1px solid var(--zs-border-soft); }
.zs-split { display: flex; gap: 52px; align-items: center; padding: var(--zs-section-pad) 8px; border-bottom: 1px solid var(--zs-border-soft); }

/* ---- Small parts ---- */
.zs-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--zs-border-chip); color: var(--zs-text-secondary); padding: 5px 10px; }
.zs-chips { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--zs-font-mono); font-size: 9.5px; letter-spacing: 1.5px; }
.zs-prose { max-width: 680px; font-size: 15.5px; line-height: 1.7; color: var(--zs-ink-2); }
.zs-m0 { margin: 0; }
.zs-mb14 { margin: 0 0 14px; }
.zs-label-num { font-family: var(--zs-font-mono); font-size: var(--zs-text-label); letter-spacing: 1.5px; color: var(--zs-blue); }
.zs-legal-row { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 48px 8px; border-top: 1px solid var(--zs-border-soft); }
.zs-tick-row { display: flex; gap: 9px; }
.zs-tick { color: var(--zs-green); font-weight: 700; }
.zs-code-kw { color: var(--zs-code-keyword); }
.zs-code-type { color: var(--zs-code-type); }
.zs-code-str { color: var(--zs-code-string); }

/* ---- Comparison cells ---- */
.zs-cell-cap { padding: 12px 14px 12px 2px; border-bottom: 1px solid rgba(20, 20, 20, 0.1); font-size: var(--zs-text-card); color: var(--zs-ink-2); }
.zs-cell-zs { padding: 12px 14px; border-bottom: 1px solid rgba(20, 20, 20, 0.1); text-align: center; background: var(--zs-tint-blue); font-family: var(--zs-font-mono); font-weight: 700; color: var(--zs-green); }
.zs-cell-yes { padding: 12px 14px; border-bottom: 1px solid rgba(20, 20, 20, 0.1); text-align: center; font-family: var(--zs-font-mono); color: var(--zs-green); }
.zs-cell-no { padding: 12px 14px; border-bottom: 1px solid rgba(20, 20, 20, 0.1); text-align: center; font-family: var(--zs-font-mono); color: rgba(192, 61, 33, 0.55); }

/* ---- FAQ ---- */
.zs-faq-q { font-family: var(--zs-font-display); font-size: 20px; padding: 18px 0; cursor: pointer; }
.zs-faq-a { font-size: var(--zs-text-body); line-height: var(--zs-line-body); color: var(--zs-text-secondary); margin: 0; padding: 0 0 20px; max-width: 560px; }

/* ---- Stats ---- */
.zs-stat { font-family: var(--zs-font-display); font-weight: 500; font-size: clamp(64px, 6vw + 20px, 96px); line-height: 1; letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.zs-stat-caption { font-family: var(--zs-font-mono); font-size: var(--zs-text-micro); letter-spacing: var(--zs-track-micro); color: var(--zs-text-muted); margin-top: 10px; }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  :root { --zs-section-pad: 64px; }
  .zs-wrap { padding: 0 18px; }
  .zs-legal-row { grid-template-columns: 1fr; gap: 16px; padding: 36px 8px; }
  .zs-split { flex-direction: column; align-items: stretch; }
}