.seo-intro {
  padding: 96px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px 80px;
}

.seo-intro h2 { max-width: 650px; }
.seo-copy { color: var(--muted); font-size: 1.04rem; }
.seo-copy p { max-width: 700px; }

.semantic-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.semantic-grid article {
  min-height: 180px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.semantic-grid strong { display: block; margin-bottom: 12px; font-size: 1.08rem; }
.semantic-grid p { margin: 0; color: var(--muted); }

.faq {
  padding: 100px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
}

.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 22px 42px 22px 0; position: relative; cursor: pointer; font-weight: 720; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; color: var(--signal); font-size: 1.4rem; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: -2px 48px 24px 0; color: var(--muted); }

@media (max-width: 900px) {
  .seo-intro, .faq { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 620px) {
  .seo-intro, .faq { padding: 76px 0; }
  .semantic-grid { grid-template-columns: 1fr; border-left: 0; }
  .semantic-grid article { min-height: auto; padding: 24px 0; border-right: 0; }
  .faq details p { margin-right: 0; }
}