/* Separate visual study. Header, hero, copy and section order stay unchanged. */
:is(.product-overview, .how-it-works, .directions, .audience, .faq, .site-footer) {
  --text-heading: 2.25rem;
  --text-card-heading: 1.25rem;
  --text-body: 1.125rem;
  --section-rule: #25303e;
}

/* One heading hierarchy, no new ornaments. */
.section-title { line-height: 1.2; letter-spacing: -.035em; font-weight: 400; }
.overview-description, .directions-description, .audience-scope { line-height: 1.6; }
.overview-description { max-width: none; }
.directions-description { margin-top: 20px; }

/* Keep the approved 55 / 55 / 55 spacing and the existing two-column grid. */
.topic, .signal-card { border-radius: 12px; }
.topic { padding: 20px; gap: 14px; }
.topic-title { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.topic-description { margin-top: 8px; line-height: 1.5; }
.topic-icon, .topic-arrow { color: var(--signal-muted); }
.topic-arrow { opacity: .4; }
.topic:hover .topic-arrow, .topic:focus-visible .topic-arrow { opacity: 1; }
.topic[aria-selected="true"] .topic-icon,
.topic[aria-selected="true"] .topic-arrow { color: var(--accent); opacity: 1; }
.signal-header { padding: 24px; }
.signal-card h3 { margin-top: 16px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.signal-meta { font-size: .875rem; }
.example-label { font-size: .875rem; }
.signal-details { padding: 20px 24px; gap: 18px; }
.signal-details dt { font-weight: 400; }
.signal-details dd { margin-top: 6px; line-height: 1.5; }
.signal-value { margin-inline: -12px; padding: 12px 10px; }
.signal-details .signal-value dt { font-weight: 500; }
.signal-footer { padding: 16px 24px; }

/* Repeated three-column layouts now share the same tracks. */
.process-inner, .directions-inner, .faq-inner { padding-block: 72px; }
.directions-inner, .audience-inner, .faq-inner { border-color: var(--section-rule); }
.process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.step-number { color: var(--muted); font-variant-numeric: tabular-nums; }
.process-step h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin: 16px 0; }
.process-step p { line-height: 1.6; }
.source-tiles { gap: 8px 6px; }
.source-tile { border-color: #25303e; background: transparent; color: #b7c2d0; font-weight: 400; }
.source-icon { opacity: .8; }

/* These are information cards, not three simultaneous selected states. */
.directions-list { margin-top: 32px; }
.direction-card { background: #0d131d; border: 1px solid #2b3645; box-shadow: none; border-radius: 12px; padding: 24px; }
.direction-card h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; min-height: 2.6em; letter-spacing: -.02em; }
.direction-card p { margin-top: 16px; line-height: 1.6; }
.directions-action { margin-top: 24px; }
.directions-action .button { font-weight: 500; }
.direction-request p { font-size: .875rem; line-height: 1.6; margin-top: 12px; }

/* A short audience section reads as a short section. */
.audience-inner { padding-block: 56px; }
.audience-heading { gap: 16px; }
.audience-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.audience-list li { font-size: 1.125rem; line-height: 1.5; gap: 12px; }
.audience-list svg { width: 18px; height: 18px; flex-basis: 18px; margin-top: 4px; color: var(--muted); stroke: currentColor; }

.faq-list { margin-top: 28px; }
.faq-trigger { font-size: 1.125rem; font-weight: 400; padding-block: 22px; }
.faq-trigger svg { width: 16px; height: 16px; flex-basis: 16px; margin-top: 4px; }
.faq-item { border-color: var(--section-rule); }
.faq-answer { line-height: 1.6; }

/* Footer typography follows the same roles as the page. */
.footer-inner { padding-top: 56px; }
.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.footer-grid h2 { font-size: 1rem; font-weight: 500; line-height: 1.5; }
.footer-brand p, .footer-contact p { font-size: .875rem; }

@media (max-width: 800px) {
  .process-steps { grid-template-columns: 1fr; gap: 28px; }
  .direction-card h3 { min-height: 0; }
  .audience-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-contact { grid-column: 1 / -1; }
  .topic { padding: 16px; }
}
@media (max-width: 600px) {
  :is(.product-overview, .how-it-works, .directions, .audience, .faq) { --text-heading: 1.875rem; }
  .process-inner, .directions-inner, .faq-inner { padding-block: 44px; }
  .audience-inner { padding-block: 40px; }
  .process-steps { margin-top: 28px; }
  .topic { padding: 14px 12px; gap: 8px; }
  .topic-title { font-size: 1rem; font-weight: 500; }
  .signal-header, .signal-details { padding: 20px; }
  .signal-card h3 { font-size: 1.25rem; }
  .signal-footer { padding: 16px 20px; }
  .direction-card { padding: 20px; }
  .audience-list { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .footer-inner { padding-top: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-nav a, .footer-contact-open { padding-block: 9px; }
}