.hero { padding-top: clamp(3rem, 6vw, 6rem); background: var(--color-mist); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero__lead { max-width: 42rem; font-size: clamp(1.125rem, 2vw, 1.375rem); }
.hero-pillars { margin-top: clamp(3rem, 6vw, 5rem); padding-top: var(--space-8); border-top: 1px solid var(--color-structure); }
.hero-pillars h2 { font-size: 1.125rem; }
.pillar-summary-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pillar-summary-list li { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--color-white); border-radius: var(--radius-small); }
.pillar-summary-list span { color: var(--color-content); }
.diagnostic-grid, .solutions-grid { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.diagnostic-card, .solution-pillar { padding: var(--space-6); border: 1px solid var(--color-structure); border-radius: var(--radius-medium); background: var(--color-white); }
.diagnostic-card__controls { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.diagnostic-card__controls button { min-height: 2.75rem; padding-inline: var(--space-4); border: 1px solid var(--color-structure); border-radius: var(--radius-small); background: var(--color-white); }
.diagnostic-card__controls button[aria-pressed="true"] { border-color: var(--color-petrol); color: var(--color-petrol-dark); font-weight: 700; }
.js .diagnostic-card__panels [data-card-panel][hidden] { display: none; }
.process-list { display: grid; gap: var(--space-4); margin-block: var(--space-8); padding: 0; counter-reset: process; list-style: none; }
.process-list li { position: relative; padding: var(--space-6); border-left: 0.25rem solid var(--color-petrol); background: var(--color-mist); }
.faq-list { border-top: 1px solid var(--color-structure); }
.faq-item { border-bottom: 1px solid var(--color-structure); }
.faq-item summary { cursor: pointer; padding-block: var(--space-4); font-weight: 700; }
.faq-item__answer { padding-bottom: var(--space-4); }
.final-cta { background: var(--color-petrol-dark); color: var(--color-white); }
.final-cta .eyebrow { color: var(--color-white); }
.final-cta__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 48rem) {
  .pillar-summary-list, .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); }
  .diagnostic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process-list li { border-left: 0; border-top: 0.25rem solid var(--color-petrol); }
  .final-cta__grid { grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); }
}
@media (min-width: 75rem) {
  .pillar-summary-list, .solutions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}