/* ============================================================
   Next Focus AI — Marketing site design system (light mode)
   Shared across: homepage, whitepaper gate, whitepaper reading page.
   Class-based, responsive, mobile-first breakpoints.
   ============================================================ */

:root {
  /* ── Surfaces ── */
  --c-soft-white: #fafafa;
  --c-white: #ffffff;
  --c-cool-gray: #e8eaed;

  /* ── Ink / text ── */
  --c-dark-gray: #1f2937;
  --c-slate: #4a5568;
  --c-mid-gray: #718096;
  --c-dark-slate: #040506;
  --c-label-ink: #3a4249;

  /* ── Lines & accent ── */
  --c-border: #d1d5db;
  --c-border-dash: #c3c7cc;
  --c-orange: #ff8201;
  --c-orange-dark: #cc6800;
  --c-orange-tint: #fff7ef;
  --c-orange-tint2: #ffeedb;

  /* ── Semantic aliases ── */
  --bg-page: var(--c-soft-white);
  --bg-card: var(--c-white);
  --bg-section: var(--c-cool-gray);
  --fg1: var(--c-dark-gray);
  --fg2: var(--c-slate);
  --fg3: var(--c-mid-gray);
  --fg-strong: var(--c-dark-slate);
  --border: var(--c-border);
  --accent: var(--c-orange);

  /* ── Type ── */
  --font-display: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Calibri", "Carlito", "Helvetica Neue", Arial, sans-serif;

  /* ── Spacing (8px base) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── Radius ── */
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 2px 8px rgba(31, 41, 55, 0.08);
  --shadow-lg: 0 8px 24px rgba(31, 41, 55, 0.10);

  /* ── Layout ── */
  --container: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-text);
  background: var(--bg-page);
  color: var(--fg1);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
}

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding-left: 48px; padding-right: 48px; }

.band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band--gray { background: var(--bg-section); }

.eyebrow {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-label-ink);
}

.banner { border-left: 4px solid var(--accent); padding-left: 32px; }
.banner--sm { padding-left: 26px; }

/* ============================================================
   Buttons / links
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-strong);
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--c-orange-tint); color: var(--fg-strong); }
.btn:active { background: var(--c-orange-tint2); }
.btn--sm { padding: 9px 18px; font-size: 13.5px; }

.link-muted { font-size: 14px; color: var(--fg2); transition: color 0.15s ease; }
.link-muted:hover { color: var(--fg-strong); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: 32px;
  padding-top: 18px; padding-bottom: 18px;
}

/* Brand lockup: NF mark + "NEXT FOCUS" wordmark */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { display: block; width: auto; height: 34px; }
.brand__word {
  font-family: "Plus Jakarta Sans", var(--font-text);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-strong);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}
.brand--footer .brand__mark { height: 38px; }
.brand--footer .brand__word { font-size: 21px; }
.brand--gate .brand__mark { height: 40px; }
.brand--gate .brand__word { font-size: 23px; }
@media (max-width: 640px) {
  .brand__word { font-size: 17px; letter-spacing: 0.1em; }
  .brand__mark { height: 30px; }
}
.site-nav {
  flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 28px;
}
.site-nav a.link-muted { font-size: 14px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--fg-strong); margin: 4px 0; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: 104px; padding-bottom: 88px; }
.hero__title {
  font-size: 60px; line-height: 1.02; color: var(--fg-strong);
  margin: 0; max-width: 760px; text-wrap: pretty;
}
.hero__lede {
  font-size: 19px; line-height: 1.55; color: var(--fg1);
  margin: 32px 0 0; max-width: 52ch;
}
.hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ============================================================
   Evidence / stats
   ============================================================ */
.section { padding-top: 88px; padding-bottom: 88px; }
.section--tight { padding-top: 56px; padding-bottom: 56px; }

.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.stat__num {
  font-family: var(--font-display); font-weight: 900; font-size: 34px;
  line-height: 1; letter-spacing: 0.01em; color: var(--fg-strong);
}
.stat__copy { font-size: 14.5px; line-height: 1.5; color: var(--fg1); margin: 12px 0 0; }
.source-note { font-size: 12.5px; line-height: 1.5; color: var(--fg2); margin: 26px 0 0; }
.section-summary { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 24px 0 0; max-width: 62ch; }

/* ============================================================
   Thesis quote
   ============================================================ */
.thesis__quote {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  line-height: 1.35; letter-spacing: 0.01em; color: var(--fg-strong);
  margin: 0; text-wrap: pretty;
}
.thesis__cite { font-size: 13px; color: var(--fg2); margin: 14px 0 0; }

/* ============================================================
   Platform
   ============================================================ */
.h2-display {
  font-family: var(--font-display); font-weight: 900; font-size: 34px;
  line-height: 1.15; letter-spacing: 0.01em; color: var(--fg-strong); margin: 0;
}
.lede { font-size: 19px; line-height: 1.55; color: var(--fg1); max-width: 52ch; text-wrap: pretty; }

.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.mini-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--c-label-ink); margin-bottom: 12px;
}

/* Nested GQC architecture diagram */
.gqc { padding: 32px; }
.gqc__chip {
  font-size: 14px; font-weight: 700; color: var(--fg2);
  border: 1px dashed var(--c-border-dash); border-radius: var(--radius-sm);
  padding: 10px 18px; background: var(--bg-page);
}
.gqc__arrow { color: var(--fg2); font-size: 13px; }
.gqc__outer { border: 3px solid var(--accent); border-radius: var(--radius-md); padding: 24px; }
.gqc__title {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  letter-spacing: 0.01em; color: var(--fg-strong); text-align: center;
  margin-bottom: 20px;
}
.gqc__layer {
  border: 1px solid var(--border); border-radius: 5px; padding: 18px 20px;
}
.gqc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.gqc__name {
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  letter-spacing: 0.01em; color: var(--fg-strong);
}
.gqc__meta { font-size: 13px; color: var(--fg2); }

/* ============================================================
   Three questions
   ============================================================ */
.qa-row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px;
  padding: 26px 0; border-top: 1px solid var(--border);
}
.qa-row:last-child { border-bottom: 1px solid var(--border); }
.qa-row__q {
  font-family: var(--font-display); font-weight: 900; font-size: 19px;
  line-height: 1.25; letter-spacing: 0.01em; color: var(--fg-strong); margin: 0;
}
.qa-row__a { font-size: 15.5px; line-height: 1.6; color: var(--fg1); margin: 0; }

/* ============================================================
   Partner cards
   ============================================================ */
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.partner-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 30px 28px; transition: border-color 0.15s ease;
}
.partner-card:hover { border-color: var(--accent); }
.partner-card__title {
  font-family: var(--font-display); font-weight: 900; font-size: 21px;
  letter-spacing: 0.01em; color: var(--fg-strong); margin: 0;
}
.partner-card__copy { font-size: 15.5px; line-height: 1.6; color: var(--fg1); margin: 12px 0 18px; max-width: 36ch; }
.partner-card__cta { font-size: 13.5px; font-weight: 700; color: var(--fg-strong); }

/* ============================================================
   Whitepaper teaser
   ============================================================ */
.paper-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.paper-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.paper-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--fg1); }
.tick { width: 7px; height: 7px; background: var(--c-orange); border-radius: 1px; flex: none; margin-top: 8px; }

/* ============================================================
   Contact
   ============================================================ */
.contact__title {
  font-family: var(--font-display); font-weight: 900; font-size: 30px;
  line-height: 1.15; letter-spacing: 0.01em; color: var(--fg-strong); margin: 0; max-width: 26ch;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-page); }
.site-footer__inner {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  padding-top: 44px; padding-bottom: 44px;
}
.site-footer__links { display: flex; gap: 32px; font-size: 13px; color: var(--fg2); flex-wrap: wrap; }

/* ============================================================
   Share bar (gate + reading page)
   ============================================================ */
.share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.share__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg2); margin-right: 4px;
}
.share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-card); color: var(--fg2);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.share__btn:hover { border-color: var(--accent); color: var(--fg-strong); }
.share__btn.is-copied { border-color: var(--accent); color: var(--accent); }
.share__btn svg { width: 17px; height: 17px; }
.share__copied { font-size: 12.5px; color: var(--accent); font-weight: 700; opacity: 0; transition: opacity 0.15s ease; }
.share__copied.is-visible { opacity: 1; }

/* ============================================================
   Gate page
   ============================================================ */
.gate {
  min-height: 100vh; box-sizing: border-box; padding: 64px 40px;
  display: flex; justify-content: center; align-items: flex-start;
  background: var(--bg-section);
}
.gate__inner {
  width: 100%; max-width: 1080px; display: grid;
  grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start;
}
.gate__title {
  font-family: var(--font-display); font-weight: 900; font-size: 44px;
  line-height: 1.06; letter-spacing: 0.01em; color: var(--fg-strong); margin: 0;
}
.gate__form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 36px 34px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg2); }
.field input, .field textarea {
  font-family: var(--font-text); font-size: 15px; color: var(--fg1);
  background: var(--bg-page); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 12px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.form-grid { display: grid; gap: 18px; }
.legal { font-size: 12px; line-height: 1.5; color: var(--fg2); margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.form-error { font-size: 13px; color: #b42318; margin: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Metered gate — free intro stays open, the gated remainder is clipped to a
   teaser (fade-out mask) until the visitor unlocks with name + email. Content
   stays in the DOM; only JS applies the clip, so no-JS/crawlers see it all. */
.gated.is-clipped {
  max-height: 260px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.gate-inline { margin-top: 12px; }
.gate-inline[hidden] { display: none; }
.gate-inline__card { max-width: 480px; margin: 0 auto; }
.gate-inline__title {
  font-family: var(--font-display); font-weight: 900; font-size: 24px;
  line-height: 1.12; letter-spacing: -0.01em; color: var(--fg-strong); margin: 0 0 10px;
}
.gate-inline__lede { font-size: 14px; line-height: 1.5; color: var(--fg2); margin: 0 0 24px; }
.gate-inline .legal { margin-top: 32px; }

/* Smooth-scroll offset (sticky header) + attention flash on the walkthrough form */
#contact { scroll-margin-top: 84px; }
@keyframes formFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 130, 1, 0); }
  18% { box-shadow: 0 0 0 5px rgba(255, 130, 1, 0.28); }
}
.form-flash { border-radius: 8px; animation: formFlash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .form-flash { animation: none; } }

/* ============================================================
   Reading page (whitepaper document)
   ============================================================ */
/* Reader shell: document sits on a white "sheet" over a light-gray page */
.doc-page { background: #f0f1f3; }
.doc {
  max-width: 860px; margin: 32px auto 64px; padding: 72px 72px 96px;
  background: var(--bg-card); border-radius: 8px; box-shadow: var(--shadow-lg);
}
.doc-actions {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px 40px;
  background: rgba(240, 241, 243, 0.88); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.doc-actions__label {
  grid-column: 2; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--c-label-ink);
}
.doc-actions .btn { grid-column: 3; justify-self: end; }
.doc-actions__group { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 16px; }
.share--compact { gap: 6px; }
.share--compact .share__btn { width: 32px; height: 32px; }
.share--compact .share__btn svg { width: 15px; height: 15px; }
.share--compact .share__copied { display: none; }
.doc__cover-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--font-text); font-size: 13px; color: var(--fg3);
}
.doc h1 { font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 1.05; letter-spacing: 0.01em; color: var(--fg-strong); margin: 0; }
.doc h2 {
  font-family: var(--font-text); font-size: 13px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg2);
  border-left: 4px solid var(--accent); padding-left: 16px; margin: 48px 0 20px;
}
.doc h3 { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 0.01em; color: var(--fg-strong); margin: 36px 0 12px; }
.doc p { font-size: 17px; line-height: 1.62; color: var(--fg1); margin: 0 0 20px; }
.doc p a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--c-orange); }
.doc strong { color: var(--fg-strong); }
.doc__cover { margin-bottom: 64px; padding-bottom: 40px; border-bottom: 1px solid var(--border); }
.doc__cover-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: 40px; }
.doc__sub { font-family: var(--font-text); font-size: 22px; line-height: 1.35; color: var(--fg2); margin: 16px 0 0; max-width: 22em; }
.doc__byline { font-family: var(--font-text); font-size: 15px; color: var(--fg1); margin: 32px 0 0; padding-left: 32px; }

.callout {
  background: var(--bg-page); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  padding: 22px 26px; margin: 28px 0;
}
.callout p { margin: 0; font-size: 16px; }

.figure {
  margin: 32px 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 26px 28px 22px;
}
.figure figcaption {
  font-family: var(--font-text); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg2);
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border);
}

.doc table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.doc th {
  text-align: left; font-family: var(--font-text); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg2);
  border-bottom: 1px solid var(--border); padding: 0 16px 8px 0;
}
.doc th:last-child { padding-right: 0; }
.doc td { font-size: 14px; line-height: 1.5; color: var(--fg1); border-bottom: 1px solid var(--border); padding: 11px 16px 11px 0; vertical-align: top; }
.doc td:last-child { padding-right: 0; }
.doc td:first-child { font-weight: 700; color: var(--fg-strong); width: 32%; }
.doc .table-wrap { overflow-x: auto; margin: 0 0 8px; }

.flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.flow__node {
  font-family: var(--font-display); font-weight: 900; font-size: 14px;
  letter-spacing: 0.01em; color: var(--fg-strong); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 20px; background: var(--bg-page);
}
.flow__arrow { color: var(--accent); font-size: 13px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .hero { padding-top: 64px; padding-bottom: 56px; }
  .hero__title { font-size: 40px; }
  .hero__lede { font-size: 17px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .stat-grid { grid-template-columns: 1fr; gap: 28px; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .qa-row { grid-template-columns: 1fr; gap: 12px; }
  .partner-grid { grid-template-columns: 1fr; }
  .paper-grid { grid-template-columns: 1fr; gap: 36px; }
  .h2-display { font-size: 28px; }
  .gate__inner { grid-template-columns: 1fr; gap: 36px; }
  .gate__title { font-size: 36px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* Mobile nav */
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; background: var(--bg-page); border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; }
  .site-nav .btn { margin-top: 8px; text-align: center; }
  .nav-toggle { display: block; margin-left: auto; }
}

@media (max-width: 640px) {
  .hero__title { font-size: 32px; }
  .doc { margin: 0 auto; border-radius: 0; box-shadow: none; padding: 28px 22px 72px; }
  .doc-actions { padding: 12px 20px; }
  .doc-actions__label { letter-spacing: 0.16em; }
  .share--compact { display: none; }
  .doc h1 { font-size: 36px; }
  .doc__sub { font-size: 18px; }
  .doc__cover-head { flex-direction: column; gap: 16px; }
  .gate { padding: 40px 22px; }
  .gqc__row { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* ============================================================
   Motion — scroll reveals + entrance (progressive enhancement)
   Gated on html.js so no-JS visitors always see content, and
   fully disabled under prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
      transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  html.js .reveal.reveal--scale { transform: translateY(20px) scale(0.94); }
  html.js .reveal.is-visible { opacity: 1; transform: none; }

  /* Hero + header entrance on first paint */
  html.js .hero-anim {
    opacity: 0;
    transform: translateY(24px);
    animation: heroIn 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: var(--hero-delay, 0s);
  }
  @keyframes heroIn { to { opacity: 1; transform: none; } }
  html.js .site-header { animation: headerIn 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
  @keyframes headerIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
}

/* ============================================================
   Print (used for the generated whitepaper PDF)
   ============================================================ */
@page { size: Letter; margin: 0.8in; }

@media print {
  html, body, .doc-page { background: #ffffff; }
  .doc-actions, .doc > footer, .share { display: none !important; }
  .doc { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .doc h1 { font-size: 44px; }
  .doc__sub { font-size: 20px; }
  .doc p { font-size: 12pt; line-height: 1.5; }
  .doc td, .doc th { font-size: 10.5pt; }
  .doc__cover { break-after: page; border-bottom: 0; }
  .doc h2 { break-after: avoid; }
  .doc h3 { break-after: avoid; }
  .figure, .callout, .table-wrap { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  a { color: var(--fg-strong) !important; text-decoration: none !important; }
}