/* MisterBest — answer-capsule pages (C4.19).
   Layout only: every colour comes from tokens.css, so these pages follow the site's
   light/dark exactly like the landing. Loaded after tokens.css + site.css. */

.capsule-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) 1.25rem 4rem;
}

.capsule-page .eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.capsule-page h1 {
  margin: .35rem 0 1.25rem;
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* The block answer engines quote. Visually first, and first in the DOM after the H1. */
.answer {
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.6;
}

.video-frame {
  max-width: 22rem;
  margin: 0 auto 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--muted);
  aspect-ratio: 9 / 16;
}
.video-frame.wide { max-width: 100%; aspect-ratio: 16 / 9; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.capsule-page h2 {
  margin: 2.25rem 0 .85rem;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  letter-spacing: -.01em;
}

.steps { margin: 0; padding-left: 1.35rem; display: grid; gap: 1rem; }
.steps li { line-height: 1.6; }
.steps b { display: block; }
.steps span { color: var(--muted-foreground); }

.faq { display: grid; gap: 1.25rem; }
.faq h3 { margin: 0 0 .3rem; font-size: 1.0625rem; }
.faq p { margin: 0; color: var(--muted-foreground); line-height: 1.6; }

.transcript { margin: 2.25rem 0 0; border-top: 1px solid var(--border); padding-top: 1rem; }
.transcript summary { cursor: pointer; font-weight: 600; }
.transcript p { margin: 1rem 0 0; color: var(--muted-foreground); line-height: 1.75; white-space: pre-wrap; }

.related { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.related a { color: var(--link); }

.page-meta { margin-top: 2rem; font-size: var(--text-sm); color: var(--muted-foreground); }

/* Pillar hub */
.hub-list { display: grid; gap: 1rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }
.hub-list li {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
}
.hub-list a { display: block; padding: 1rem 1.15rem; text-decoration: none; color: inherit; }
.hub-list a:hover, .hub-list a:focus-visible { border-color: var(--ring); background: var(--accent); color: var(--accent-foreground); }
.hub-list strong { display: block; font-size: 1.0625rem; line-height: 1.3; }
.hub-list span { display: block; margin-top: .35rem; font-size: var(--text-sm); color: var(--muted-foreground); }

.page-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; max-width: 44rem; margin: 0 auto; }
.page-head img { height: 1.9rem; width: auto; }
.page-head .spacer { margin-left: auto; }
.page-head button {
  border: 1px solid var(--border); background: var(--card); color: var(--card-foreground);
  border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.page-head button:hover { border-color: var(--ring); }

/* The lockup ships in ink only, so the header carries both and the theme picks one.
   :root has no [data-theme] when the visitor never chose — then the media query decides. */
.page-head .logo-dark { display: none; }
:root[data-theme="dark"] .page-head .logo-light { display: none; }
:root[data-theme="dark"] .page-head .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-head .logo-light { display: none; }
  :root:not([data-theme="light"]) .page-head .logo-dark { display: block; }
}