/* hugo — static pages (articles, landing pages, comparisons).
   Same brand as the app-rendered site: gray is the resting state, a surface
   earns its blue, radius 0, no shadows, klein rationed for links and CTAs.

   One deliberate departure from the homepage: article prose stays in
   sentence case. The lowercase rule is a brand-voice rule for statements we
   author; body copy that people read at length, and that search engines
   index, is not the place for it. Chrome — nav, labels, eyebrows, the
   wordmark, footers — is lowercase and mono, like everywhere else. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --canvas: #EAEDF0;
  --stone: #D4D9DE;
  --ink: #211F1D;
  --ink-soft: #565D64;
  --ink-faint: #868D94;
  --ink-line: rgba(33, 31, 29, 0.15);
  --ink-rule: #211F1D;
  --night: #0E1F30;
  --slate: #1D3A57;
  --observed: #26619C;
  --cobalt: #2A4A9E;
  --klein: #002FA7;
  --bone: #EDE8DA;
  --mist: #DCE9F5;

  --display: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 720px) { body { font-size: 17px; } }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: var(--ink);
}

a { color: var(--klein); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--klein); color: var(--bone); }

img, svg, video { max-width: 100%; height: auto; }

/* ---------- header ---------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(234, 237, 240, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-line);
}
header.site-header .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* The wordmark is typed and lowercase, closed by the heart. The markup carries
   a legacy dot span from an older mark: rather than edit 55 static files, the
   span IS the heart, re-ordered to sit after the word. Baseline alignment puts
   its bottom edge on the baseline of "hugo" instead of under the g. */
header.site-header .brand {
  display: flex;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  flex-shrink: 0;
}
header.site-header .brand .dot {
  display: block;
  order: 1;
  width: 0.26em;
  height: 0.26em;
  margin-left: 0.09em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

header.site-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  /* Left, next to the wordmark. The auto margin is what pushes the cta right,
     so the bar reads brand-nav ... cta instead of brand ... nav ... cta. */
  margin-right: auto;
  margin-left: 20px;
}
header.site-header nav a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--ink-soft);
  white-space: nowrap;
}
header.site-header nav a:hover { color: var(--klein); }

header.site-header .nav-dd { position: relative; }
header.site-header .nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  width: 340px;
  background: var(--canvas);
  border: 1px solid var(--ink);
  display: none;
  flex-direction: column;
}
header.site-header .nav-dd:hover .nav-dd-menu,
header.site-header .nav-dd:focus-within .nav-dd-menu { display: flex; }
/* The research menu is a reading list, not a list of links: each row carries
   what the piece is about, when it landed, and its title. */
header.site-header .nav-dd-menu a {
  padding: 14px;
  font-size: 11px;
  border-bottom: 1px solid rgba(33, 31, 29, 0.15);
}
header.site-header .nav-dd-menu a:hover { background: var(--stone); color: var(--klein); }
header.site-header .nav-dd-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label, #868d94);
}
header.site-header .nav-dd-title {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
header.site-header .nav-dd-menu a:hover .nav-dd-title { color: var(--klein); }
header.site-header .nav-dd-all { color: var(--label, #868d94); border-bottom: 0; }

/* The only CTA treatment: text plus a 2px klein underline. No pills. */
header.site-header .cta {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--klein);
  background: none;
  color: var(--ink) !important;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  flex-shrink: 0;
}
header.site-header .cta:hover { color: var(--klein) !important; }

@media (max-width: 720px) {
  header.site-header .wrap { padding: 0 16px; height: 56px; gap: 10px; }
  header.site-header .brand { font-size: 17px; }
  header.site-header nav {
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 4px;
    /* The nav scrolls horizontally on small screens because the flattened
       dropdown puts every section inline. Fade the right edge so a clipped
       label reads as "there is more, swipe" rather than as broken layout. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  }
  header.site-header nav::-webkit-scrollbar { display: none; }
  header.site-header nav a { font-size: 10.5px; }
  /* hover dropdowns don't work on touch, so flatten the submenu inline */
  header.site-header .nav-dd { display: contents; }
  header.site-header .nav-dd-menu { display: contents; }
  header.site-header .nav-dd-menu a { padding: 0; font-size: 10.5px; border-bottom: 0; }
  /* flattened inline on touch: the title alone, the meta line would crowd the bar */
  header.site-header .nav-dd-meta { display: none; }
  header.site-header .nav-dd-title { margin-top: 0; font-size: 10.5px; letter-spacing: 0; }
  header.site-header .nav-dd-all { display: none; }
  header.site-header .cta { font-size: 10.5px; }
}

/* ---------- article ---------- */

main.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 40px;
}
@media (min-width: 720px) { main.article { padding: 64px 24px 40px; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-rule);
}
.eyebrow a { color: inherit; }
.eyebrow a:hover { color: var(--klein); }

h1.title {
  font-size: 34px;
  letter-spacing: -0.05em;
  line-height: 1.06;
  margin: 0 0 20px;
}
@media (min-width: 640px) { h1.title { font-size: 48px; } }
@media (min-width: 1024px) { h1.title { font-size: 56px; } }

.dek {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 60ch;
}
@media (min-width: 720px) { .dek { font-size: 20px; } }

.meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--ink-line);
}

article.body h2 {
  font-size: 26px;
  margin: 52px 0 16px;
}
@media (min-width: 720px) { article.body h2 { font-size: 32px; } }
article.body h3 {
  font-size: 19px;
  margin: 34px 0 12px;
}
@media (min-width: 720px) { article.body h3 { font-size: 21px; } }
article.body p { margin: 0 0 20px; color: var(--ink); }
article.body ul, article.body ol { margin: 0 0 20px; padding-left: 22px; color: var(--ink); }
article.body li { margin-bottom: 8px; }
article.body strong { color: var(--ink); font-weight: 500; }

article.body blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--klein);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.35;
  color: var(--ink);
}
@media (min-width: 720px) { article.body blockquote { font-size: 22px; } }

article.body .callout {
  margin: 32px 0;
  padding: 22px 24px;
  background: var(--stone);
  border: none;
  border-left: 2px solid var(--klein);
}
article.body .callout p:last-child { margin-bottom: 0; }

/* Tables scroll inside their own box rather than pushing the page wide. */
article.body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 28px;
  font-size: 15px;
}
article.body th, article.body td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-line);
}
article.body th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--ink-rule);
}

.toc {
  margin: 0 0 40px;
  padding: 20px 22px;
  background: var(--stone);
  border: none;
  font-size: 14px;
}
.toc p.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin-bottom: 6px; }

section.faq {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--ink-rule);
}
section.faq h2 { font-size: 26px; margin: 0 0 24px; }
@media (min-width: 720px) { section.faq h2 { font-size: 32px; } }
.faq-item { padding: 20px 0; border-bottom: 1px solid var(--ink-line); }
.faq-item h3 {
  font-size: 17px;
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.faq-item p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- cta block ---------- */

.cta-block {
  margin-top: 64px;
  padding: 40px 24px;
  background: var(--night);
  border-radius: 0;
  text-align: left;
}
@media (min-width: 720px) { .cta-block { padding: 48px 44px; } }
.cta-block h2 {
  color: var(--mist);
  font-size: 26px;
  margin: 0 0 12px;
  max-width: 20ch;
}
@media (min-width: 720px) { .cta-block h2 { font-size: 32px; } }
.cta-block p { color: rgba(220, 233, 245, 0.6); margin: 0 0 28px; max-width: 52ch; font-size: 16px; }
.cta-block .buttons { display: flex; gap: 28px; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.cta-block .btn-primary,
.cta-block .btn-secondary {
  display: inline-block;
  height: auto;
  padding: 0 0 2px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--bone);
  border-radius: 0;
  color: var(--bone) !important;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.cta-block .btn-secondary {
  border-bottom-color: rgba(237, 232, 218, 0.35);
  color: rgba(237, 232, 218, 0.7) !important;
}
.cta-block .btn-primary:hover,
.cta-block .btn-secondary:hover { opacity: 0.7; color: var(--bone) !important; }

/* ---------- related ---------- */

.related { margin-top: 56px; }
.related p.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-rule);
}
.related a.card {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--ink-line);
  border-radius: 0;
  color: var(--ink) !important;
  transition: border-color 0.15s, background 0.15s;
}
.related a.card:hover { border-color: var(--ink); background: var(--stone); }
.related a.card .k { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.related a.card .d { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- footer ---------- */

footer.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 20px 40px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: lowercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
@media (min-width: 720px) { footer.site-footer { padding: 60px 24px 40px; } }
footer.site-footer a { color: var(--ink-faint); }
footer.site-footer a:hover { color: var(--klein); }

/* ---------- blog index ---------- */

.index-hero { max-width: 1120px; margin: 0 auto; padding: 48px 20px 24px; }
@media (min-width: 720px) { .index-hero { padding: 64px 24px 24px; } }
.index-hero .eyebrow { margin-bottom: 20px; }
.index-hero h1 { font-size: 38px; letter-spacing: -0.05em; line-height: 1.02; }
@media (min-width: 640px) { .index-hero h1 { font-size: 56px; } }
@media (min-width: 1024px) { .index-hero h1 { font-size: 68px; } }
.index-hero p.lede { font-size: 17px; color: var(--ink-soft); max-width: 60ch; margin-top: 18px; }

.post-grid {
  max-width: 1120px;
  margin: 36px auto 0;
  padding: 0 20px 72px;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-rule);
}
@media (min-width: 720px) {
  .post-grid { grid-template-columns: 1fr 1fr; padding: 0 24px 80px; }
}
.post-card {
  display: block;
  padding: 28px 24px 28px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
  color: var(--ink) !important;
  transition: background 0.15s;
}
@media (min-width: 720px) {
  .post-card { padding: 32px 32px 32px 0; }
  .post-card:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--ink-line); }
}
.post-card:hover { background: var(--stone); }
.post-card .tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.post-card h2 { font-size: 23px; margin: 0 0 10px; }
.post-card p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ---------- landing + comparison pages ---------- */

main.landing { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; }
@media (min-width: 720px) { main.landing { padding: 0 24px 40px; } }

.lp-hero { padding: 56px 0 48px; max-width: 900px; }
@media (min-width: 720px) { .lp-hero { padding: 72px 0 56px; } }
.lp-hero h1 { font-size: 38px; letter-spacing: -0.05em; line-height: 1.02; margin: 0 0 22px; }
@media (min-width: 640px) { .lp-hero h1 { font-size: 58px; } }
@media (min-width: 1024px) { .lp-hero h1 { font-size: 72px; } }
.lp-hero .lede { font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; margin: 0 0 32px; }
@media (min-width: 720px) { .lp-hero .lede { font-size: 20px; } }

.lp-actions { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.btn-dark, .btn-line {
  display: inline-block;
  height: auto;
  padding: 0 0 2px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--klein);
  border-radius: 0;
  color: var(--ink) !important;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.btn-line { border-bottom-color: var(--ink-line); color: var(--ink-soft) !important; }
.btn-dark:hover { color: var(--klein) !important; }
.btn-line:hover { color: var(--ink) !important; border-bottom-color: var(--ink); }
.lp-note { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 22px; }

.lp-band { border-top: 1px solid var(--ink-rule); border-bottom: 1px solid var(--ink-line); }
.lp-band-inner { display: grid; gap: 28px; padding: 36px 0; }
@media (min-width: 720px) { .lp-band-inner { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.stat .n {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--klein);
}
.stat .l { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: 12px; max-width: 28ch; }

.lp-section { padding: 56px 0; border-bottom: 1px solid var(--ink-line); }
@media (min-width: 720px) { .lp-section { padding: 72px 0; } }
.lp-section h2 { font-size: 28px; margin: 0 0 20px; max-width: 22ch; }
@media (min-width: 720px) { .lp-section h2 { font-size: 40px; } }
.lp-intro { font-size: 17px; color: var(--ink-soft); max-width: 62ch; margin: 0 0 8px; }
.lp-alt { background: var(--stone); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
@media (min-width: 720px) { .lp-alt { margin: 0 -24px; padding-left: 24px; padding-right: 24px; } }

.q-grid { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--ink-rule); }
@media (min-width: 720px) { .q-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .q-grid { grid-template-columns: repeat(3, 1fr); } }
.q-card {
  padding: 26px 24px 26px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
}
@media (min-width: 720px) { .q-card { padding-right: 32px; } }
.q-num {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.q-card h3 { font-size: 20px; margin: 0 0 12px; }
.q-card p { font-size: 15px; color: var(--ink-soft); margin: 0 0 12px; }
.q-ask {
  display: block;
  font-style: normal;
  color: var(--ink) !important;
  border-left: 2px solid var(--klein);
  padding-left: 14px;
  font-size: 15px;
}
.q-card-cta { background: var(--night); padding: 26px 24px; border-bottom: none; }
.q-card-cta h3 { color: var(--mist); }
.q-card-cta p { color: rgba(220, 233, 245, 0.6); }
.q-link {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--bone) !important;
  border-bottom: 2px solid var(--bone);
  padding-bottom: 2px;
}
.q-link:hover { opacity: 0.7; }

.lp-two { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 860px) { .lp-two { grid-template-columns: 1fr 1fr; gap: 56px; } }
.lp-two p { color: var(--ink); margin: 0 0 18px; }

.lp-table table, .cmp-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lp-table th, .lp-table td, .cmp-table th, .cmp-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ink-line); vertical-align: top;
}
.lp-table th, .cmp-table th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--ink-rule);
}
/* Wide tables scroll in their own box; the page body never scrolls sideways. */
.cmp-table, .lp-table { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table table, .lp-table table { min-width: 560px; }
.cmp-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; font-family: var(--mono); font-size: 12px; }

.use-grid { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--ink-rule); }
@media (min-width: 720px) { .use-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .use-grid { grid-template-columns: repeat(3, 1fr); } }
.use {
  padding: 24px 24px 24px 0;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
}
.use h3 { font-size: 18px; margin: 0 0 10px; }
.use p { font-size: 15px; color: var(--ink-soft); margin: 0; }

.read-grid { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--ink-rule); }
@media (min-width: 720px) { .read-grid { grid-template-columns: 1fr 1fr; } }
.read {
  display: block;
  padding: 22px 24px 22px 0;
  border: none;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
  color: var(--ink) !important;
  background: none;
  transition: background 0.15s;
}
@media (min-width: 720px) {
  .read:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--ink-line); }
}
.read:hover { background: var(--stone); }
.read .k { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.read .d { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

.lp-faq { max-width: 760px; border-top: none; margin-top: 0; padding-top: 56px; }
@media (min-width: 720px) { .lp-faq { padding-top: 72px; } }
main.landing .cta-block { max-width: 900px; margin-left: 0; margin-right: 0; }

.verdict {
  margin: 0 0 36px;
  padding: 22px 24px;
  background: var(--stone);
  border: none;
  border-left: 2px solid var(--klein);
  border-radius: 0;
}
.verdict p.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.verdict p { margin: 0 0 12px; }
.verdict p:last-child { margin-bottom: 0; }

/* ---------- the studies on static pages ---------- */
/* Shared SVGs in /studies/, exported from the same components the React
   pages render, so the two never drift. */

/* Hero: the sentence on the left, a portrait on its cobalt field to the right. */
.lp-hero-split { display: grid; gap: 32px; align-items: end; }
@media (min-width: 860px) {
  .lp-hero-split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; }
}
.lp-hero-split .lp-hero { padding-bottom: 0; max-width: none; }
.lp-study { margin: 0 0 8px; }
.lp-study img { display: block; width: 100%; max-width: 300px; height: auto; }
@media (min-width: 860px) { .lp-study img { margin-left: auto; } }
.lp-study .cap {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
@media (min-width: 860px) { .lp-study .cap { text-align: right; } }

/* One icon per question card, sitting above the number. */
.q-card .q-figure { display: block; width: 46px; height: auto; margin: 0 0 16px; }
.q-card-cta .q-figure { display: none; }

/* A crowd band, used once per page at most. */
.lp-crowd { margin: 36px 0 0; }
.lp-crowd img { display: block; width: 100%; height: auto; }

/* archive category filter (blog index) */
.cat-bar { max-width: 1120px; margin: 0 auto; padding: 8px 20px 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 720px) { .cat-bar { padding: 8px 24px 0; } }
.cat-bar button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: lowercase;
  color: var(--ink-soft); background: none; border: 1px solid var(--ink-line);
  padding: 7px 13px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.cat-bar button:hover { color: var(--klein); border-color: var(--klein); }
.cat-bar button[aria-pressed="true"] { color: var(--bone); background: var(--ink); border-color: var(--ink); }
.cat-bar button:focus-visible { outline: 1px solid var(--klein); outline-offset: 3px; }
.post-card[hidden] { display: none; }

/* The footer nav carries the pages the header no longer does. The footer is a
   space-between flex row, so a third span would spread the copyright into the
   middle. This takes a row of its own above it. */
.site-footer .footer-nav {
  flex-basis: 100%;
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}
.site-footer .footer-nav a {
  color: inherit;
}