/* Shared, readable tracking for landing-page titles and supporting lines. */
body main :is(.hero h1, .section h2, .end h2, .placeholder-section h2, .story-prompts-heading h2, .closing-copy h2, .artifacts-intro h1, .foam-how h2, .claude-comparison-heading h2, .artifact-faq-list h3, .artifact-faq h2) {
  letter-spacing: .005em;
  line-height: 1.15;
}
body main :is(.hero-copy, .hero-lede, .examples-head > p, .section-head > p, .story-prompts-heading > p, .closing-copy > p, .end .wrap > p, .artifacts-intro .artifact-wrap > p, .artifact-faq-intro, .claude-comparison-heading p) {
  letter-spacing: .012em;
  line-height: 1.5;
}
body main .faq h2.faq-title,
body main .artifact-faq h2.faq-title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.25;
}

/* Shorten the opening so the next section appears beneath the logo strip. */
body #main > .hero {
  height: auto;
  min-height: calc(78svh - 69px);
}
body #main > .hero .hero-body {
  padding-block: clamp(32px, 5svh, 64px);
}

/* Center the examples chapter and keep the FAQ title in its section. */
body #main .examples-head { margin-inline: auto; text-align: center; }
body #main .examples-head > p { margin-inline: auto; }
body #main .role-tabs { justify-content: center; }
body #main .example-side { text-align: center; }
body #main .faq-intro { position: static; top: auto; }

/* Give the five examples chapters space at both section boundaries. */
@media (min-width:951px) {
  body #main .examples { height:calc(520svh + 176px); padding-block:88px; }
  body #main .examples-sticky { padding-block:36px; }
}
@media (max-width:950px) {
  body #main .section.examples { padding-block:96px; }
}
body #main .end h2 { max-width:900px; font-size:clamp(26px,3vw,40px); line-height:1.3; }

/* Center each conversation with its short, left-aligned explanation above it. */
body #main .example-grid {
  width:min(100%,960px);
  margin-inline:auto;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
body #main .example-side {
  order:-1;
  width:100%;
  max-width:none;
  padding:0;
  text-align:left;
}
body #main .example-side #role-label { margin:0 0 6px; }
body #main .example-side #role-context { margin:0; }
body #main .chat-stage { width:100%; margin-inline:auto; }
@media (min-width:951px) {
  body #main .chat-stage { height:clamp(240px,calc(100svh - 530px),500px); }
}

body #main .end { min-height:760px; padding-block:112px; }
@media (max-width:950px) { body #main .examples-sticky { position:relative; } }

/* A little more breathing room before the team examples. */
body #main .examples-head > p:last-child{margin-top:18px;}
body #main .examples-head{margin-bottom:32px;}
@media(max-width:950px){body #main .examples-head{margin-bottom:42px;}}