/* Breathing room at the logo handoff and the transition into questions. */
@media (min-width:951px) {
  body #main .section.examples { padding-top:48px; }
}
body #main .faq-section { padding-top:160px; }
html.landing-screens body.landing-dark main > .proof {
  padding-top:calc(clamp(36px, 5svh, 64px) + 48px);
}
body.artifacts-page #main .artifact-faq { padding-top:143px; }
@media (min-width:641px) and (max-width:950px) {
  body #main .section.examples { padding-top:108px; }
}
@media (max-width:640px) {
  body #main .section.examples { padding-top:80px; }
  body #main .faq-section { padding-top:108px; }
  html.landing-screens body.landing-dark main > .proof { padding-top:80px; }
  body.artifacts-page #main .artifact-faq { padding-top:102px; }
}

/* Header and FAQ share their outer edges at every viewport width. */
body { --header-content-width:min(1180px, calc(100% - 48px)); --header-height:69px; }
body .site-header .nav,
body #main .faq-section > .faq,
body.artifacts-page #main .artifact-faq-inner {
  width:var(--header-content-width);
  max-width:none;
  margin-inline:auto;
  box-sizing:border-box;
}
body.artifacts-page #main .artifact-faq { padding-inline:0; }
body #main :is(.faq-intro,.faq-list,.artifact-faq-inner,.artifact-faq-list),
body #main .artifact-faq-list article > * { min-width:0; }
body #main :is(.faq-title,.faq-list summary,.faq-list p,.artifact-faq-list h3,.artifact-faq-list p) {
  overflow-wrap:anywhere;
}
@media (max-width:620px) {
  body { --header-content-width:calc(100% - 34px); --header-height:64px; }
}

/* Match the research header dimensions without scaling its controls. */
body .site-header .nav {
  min-height:var(--header-height);
  height:var(--header-height);
  padding:0;
  gap:26px;
}
body .site-header .brand img { width:78px; height:auto; }
body .site-header .nav-links { gap:24px; font-size:14px; font-weight:500; line-height:normal; }
body .site-header .nav-links .nav-cta {
  min-height:36px;
  padding:7px 13px;
  font:700 14px/1.2 "DM Sans",Arial,sans-serif;
}
/* Let the hero fill the opening screen down to its customer logo strip. */
body #main > .hero,
html.landing-screens body.landing-dark main .opening {
  height:auto;
  min-height:calc(100svh - var(--header-height) - 1px);
}
/* Space belongs below the chat, before the FAQ surface begins. */
body #main .section.examples { padding-bottom:96px; }
html.landing-screens body.landing-dark main > .examples { padding-bottom:158px; }
body.artifacts-page #main .claude-comparison { padding-bottom:96px; }
@media (min-width:641px) and (max-width:950px) {
  body #main .section.examples { padding-bottom:108px; }
}
@media (max-width:640px) {
  html.landing-screens body.landing-dark main > .examples { padding-bottom:96px; }
  body.artifacts-page #main .claude-comparison { padding-bottom:80px; }
}

/* Equal black gutters use the smaller existing gap at each breakpoint.
   The chapter's old viewport minimum and scroll runway inflated the lower gap. */
body #main .section.examples {
  --examples-gutter:80px;
  height:auto;
  padding-block:var(--examples-gutter);
}
body #main .examples-sticky {
  position:relative;
  top:auto;
  min-height:0;
  padding-block:0;
}
@media (min-width:641px) and (max-width:950px) {
  body #main .section.examples { --examples-gutter:108px; }
}
@media (min-width:951px) {
  body #main .section.examples { --examples-gutter:calc(48px + clamp(30px,4.4svh,48px)); }
}