/* =========================================================================
   content.css  helpers for article, pillar, white paper and legal pages.
   Derived from the provided homepage design. Uses only the existing color
   tokens and font families. No new font, accent color, or dark background.
   Loaded after styles.css and pages.css.
   ========================================================================= */

/* ---- Mobile nav (burger) -------------------------------------------- */
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--line);
  border-radius: 2px; width: 42px; height: 38px; align-items: center;
  justify-content: center; flex-direction: column; gap: 4px; padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--fg); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav .nav-links { display: none; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 24px 32px;
  }
}

/* ---- Breadcrumb ----------------------------------------------------- */
.crumbs { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); padding-top: 26px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 0.5em; opacity: 0.6; }

/* ---- Article layout ------------------------------------------------- */
.article-wrap { max-width: 760px; }
.article-hero { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(20px, 3vw, 34px); }
.article-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.0; max-width: 20ch; }
.article-meta { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.05em; color: var(--muted); margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; }
.article-summary { font-size: clamp(1.12rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--fg-soft); margin-top: 24px; max-width: 56ch; }

.prose { font-size: 1.08rem; line-height: 1.68; color: var(--fg-soft); }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: -0.028em; line-height: 1.08; margin-top: 2em; color: var(--fg); }
.prose h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-top: 1.5em; color: var(--fg); }
.prose p { margin-top: 1em; max-width: 68ch; }
.prose ul, .prose ol { margin-top: 1em; padding-left: 1.3em; max-width: 66ch; }
.prose li { margin-top: 0.5em; }
.prose strong { color: var(--fg); font-weight: 680; }
.prose a { color: var(--accent); font-weight: 560; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--fg); }

/* ---- Key takeaways box ---------------------------------------------- */
.takeaways { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 4px; padding: 26px 28px; margin: 30px 0; }
.takeaways h2 { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: 500; }
.takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.takeaways li { position: relative; padding-left: 22px; font-size: 0.98rem; color: var(--fg-soft); line-height: 1.5; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--accent); border-radius: 1px; transform: rotate(45deg); }

/* ---- Data table (mechanics) ----------------------------------------- */
.data-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th, .data-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table thead th { background: var(--surface-2); font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.data-table td:first-child { color: var(--fg); font-weight: 560; }

/* ---- Inline CTA card ------------------------------------------------ */
.inline-cta { border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); padding: 30px 30px; margin: 36px 0; }
.inline-cta h3 { font-size: 1.35rem; letter-spacing: -0.025em; }
.inline-cta p { color: var(--muted); margin-top: 10px; max-width: 54ch; font-size: 0.98rem; }
.inline-cta .btn { margin-top: 18px; }

/* ---- Newsletter strip ----------------------------------------------- */
.brief-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; margin-top: 50px; }
.brief-strip .eyebrow { margin-bottom: 14px; }
.brief-strip h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.03em; max-width: 22ch; }
.brief-strip p { color: var(--muted); margin-top: 12px; max-width: 50ch; }
.brief-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; max-width: 520px; }
.brief-form input[type="email"] { flex: 1 1 240px; background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; font: inherit; color: var(--fg); }
.brief-form input[type="email"]:focus { outline: none; border-color: var(--accent); }

/* ---- Glossary ------------------------------------------------------- */
.glossary { border-top: 1px solid var(--fg); margin-top: 10px; }
.glossary dt { font-weight: 680; color: var(--fg); margin-top: 22px; font-size: 1.02rem; }
.glossary dd { color: var(--muted); margin: 6px 0 0; max-width: 64ch; line-height: 1.55; }

/* ---- Pillar download hero ------------------------------------------- */
.pillar-hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(28px, 4vw, 48px); }
.pillar-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -0.04em; line-height: 0.95; max-width: 18ch; }
.pillar-hero .lede { margin-top: 24px; max-width: 54ch; }
.pillar-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .pillar-grid { grid-template-columns: 1fr; } }
.download-card { border: 1px solid var(--accent); border-radius: 4px; background: var(--surface); padding: 30px 28px; }
.download-card h3 { font-size: 1.3rem; letter-spacing: -0.025em; }
.download-card p { color: var(--muted); margin-top: 10px; font-size: 0.95rem; }
.download-card form { display: grid; gap: 12px; margin-top: 18px; }
.download-card input { background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 11px 13px; font: inherit; color: var(--fg); width: 100%; }
.download-card input:focus { outline: none; border-color: var(--accent); }

/* ---- Cluster link list ---------------------------------------------- */
.cluster-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.cluster-list li { border-bottom: 1px solid var(--line); }
.cluster-list a { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; color: var(--fg-soft); font-weight: 520; }
.cluster-list a:hover { color: var(--accent); }
.cluster-list .arrow { color: var(--accent); }

/* ---- Focus visibility for accessibility ----------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- Legal / long-form simple ---------------------------------------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.4rem; letter-spacing: -0.02em; margin-top: 1.8em; color: var(--fg); }
.legal p, .legal li { color: var(--fg-soft); line-height: 1.65; margin-top: 0.9em; }
.legal ul { padding-left: 1.3em; }