/* Architecture concept page: reuse the site's Light palette. */
.concept-page { --reading-width: 760px; }
.concept-page .page-header { padding-bottom: 36px; }
.concept-page .page-header .wrap,
.concept-page .concept-body { max-width: var(--reading-width); }
.concept-page h1 { text-wrap: balance; font-size: clamp(30px, 4vw, 44px); line-height: 1.35; letter-spacing: -.025em; margin: 16px 0 24px; }
.concept-page .eyebrow { color: var(--ocean); font-size: 13px; letter-spacing: .12em; font-weight: 700; }
.concept-page .concept-body { margin: 0 auto; padding: 0 24px 72px; }
.concept-page .concept-body > p:first-child { font-size: 20px; line-height: 1.8; }
.concept-page .concept-body h2 { font-size: 27px; line-height: 1.5; margin: 60px 0 20px; padding-top: 24px; border-top: 1px solid var(--border); }
.concept-page .concept-body h3 { font-size: 20px; line-height: 1.6; margin: 30px 0 12px; }
.concept-page .concept-body p { margin: 16px 0; }
.concept-page .concept-body ul,
.concept-page .concept-body ol { padding-left: 1.5em; }
.concept-page .concept-body li { margin: 10px 0; }
.concept-page .concept-body a:not(.btn) { text-decoration: underline; text-underline-offset: .2em; }
.concept-page .concept-body blockquote { margin: 28px 0; padding: 20px 24px; background: var(--section-bg); border-radius: var(--radius); }
.concept-page .concept-body blockquote p { margin: 0; }
.concept-page .blueprint { margin: 28px 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.concept-page .blueprint ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.concept-page .blueprint li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; }
.concept-page .blueprint li:not(:last-child)::after { content: '→'; color: var(--text-muted); }
.concept-page .blueprint li span { padding: 6px 10px; border-radius: 6px; background: var(--section-bg); }
.concept-page .cta-row { margin-top: 28px; }
.concept-page a:focus-visible { outline: 3px solid var(--ocean); outline-offset: 5px; border-radius: 3px; }
@media (max-width: 600px) {
  .concept-page .page-header { padding-top: 36px; }
  .concept-page .concept-body h2 { font-size: 24px; margin-top: 42px; }
  .concept-page .blueprint ol { flex-direction: column; align-items: stretch; }
  .concept-page .blueprint li { flex-direction: column; gap: 6px; }
  .concept-page .blueprint li:not(:last-child)::after { content: '↓'; }
  .concept-page .blueprint li span { width: 100%; text-align: center; }
  .concept-page .btn { width: 100%; text-align: center; }
}

.concept-page h1 span { display: block; }