/* SEO landing pages — PREVIEW. Layers on cinematic.css + proof.css. */

.seo { max-width: 58rem; margin: 0 auto; padding: 3.4rem var(--gutter) 4rem; }

/* The direct answer. Sits immediately under the H1 because the reader arrived
   with a question and every paragraph before the answer costs a percentage of
   them. Also the block most likely to be lifted as a featured snippet. */
.answer {
  margin: 1.4rem 0 0; padding: 1.2rem 1.4rem;
  background: var(--ink-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--caution);
  font-family: var(--f-body); font-size: 1.1rem; line-height: 1.55;
  color: var(--bone-0);
}

.seo h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2;
  color: var(--bone-0); margin: 2.6rem 0 0; letter-spacing: -0.005em;
}
.seo h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  color: var(--caution); margin: 1.6rem 0 0;
}
.seo p {
  font-family: var(--f-body); font-size: 1.04rem; line-height: 1.62;
  color: var(--bone-1); margin: 0.85rem 0 0;
}
.seo p strong, .seo li strong { color: var(--bone-0); font-weight: 600; }
.seo ul { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.seo ul li {
  font-family: var(--f-body); font-size: 1.04rem; line-height: 1.55;
  color: var(--bone-1); padding: 0.5rem 0 0.5rem 1.6rem; position: relative;
  border-bottom: 1px solid rgba(61,53,40,0.5);
}
.seo ul li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 0.7rem; height: 3px; background: var(--caution);
}
.seo a { color: var(--caution); }

.faq { margin-top: 2.6rem; border-top: 1px solid var(--edge); padding-top: 0.4rem; }
.faq details {
  border-bottom: 1px solid rgba(61,53,40,0.6); padding: 0.9rem 0;
}
.faq summary {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  color: var(--bone-0); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--caution); }
.faq details[open] summary::before { content: "\2212 "; }
.faq details p { margin-top: 0.7rem; }

.seo__cta {
  margin-top: 3rem; padding: 1.5rem 1.6rem;
  border: 1px solid var(--edge); border-top: 3px solid var(--caution);
  background: var(--ink-2);
}
.seo__cta p { margin-top: 0; }
.seo__cta .btn { margin-top: 1rem; margin-right: 0.6rem; }

/* `.seo p` (0,1,1) outranks `.proof__no` (0,1,0), so the eyebrow was inheriting
   body serif at 1.04rem instead of the mono caution label every other page
   uses. Restore it explicitly. */
.seo .proof__no {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--caution); margin: 0;
}