.shell { width: min(100% - 3rem, 72rem); margin-inline: auto; }

.site-header { border-bottom: 1px solid var(--line); }

.navigation, .footer-content, .actions { display: flex; align-items: center; gap: 1rem; }

.navigation, .footer-content { justify-content: space-between; }

.navigation { min-height: 4.75rem; }

.brand { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.brand span { color: var(--terracotta); }
.brand small { font: 500 .7rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }

nav { display: flex; gap: 1rem; }
nav a { text-decoration: none; }
.navigation nav a:not(.button), .footer-content nav a { color: var(--muted); font-size: .875rem; }
.navigation nav a:not(.button):hover, .footer-content nav a:hover, .text-link:hover { color: var(--terracotta); }

.hero { padding-block: clamp(4.5rem, 12vw, 8rem); }
.eyebrow, .section-label { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .65rem; }
.eyebrow span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--olive); }

h1, h2, h3, dt { font-family: var(--display); }
h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 8vw, 6rem); line-height: .98; letter-spacing: -.055em; }
h2 { max-width: 20ch; margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
h3 { margin: .8rem 0 .5rem; font-size: 1.25rem; line-height: 1.2; }
.hero-copy { max-width: 50ch; margin: 1.8rem 0 0; color: var(--muted); font-size: 1.1rem; }
.actions { flex-wrap: wrap; margin-top: 2rem; }
.session-message { max-width: 52ch; margin: 1.5rem 0 0; padding: .9rem 1rem; border-left: .35rem solid var(--terracotta); background: var(--alert-soft); }

.section { padding-block: clamp(4rem, 10vw, 7rem); }
.section-label { margin: 0 0 1rem; }
.section-tint, .closing { border-block: 1px solid var(--line); background: var(--olive-soft); }

.steps, .capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 3rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li, .capabilities li { min-width: 0; padding: 1.6rem 1.4rem 1.2rem 0; border-bottom: 1px solid var(--line); }
.steps li + li, .capabilities li + li { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.steps span { color: var(--terracotta); font: 700 1rem/1 var(--display); }
.steps p, .capabilities p, .boundaries dd { margin: 0; color: var(--muted); }

.capabilities { grid-template-columns: repeat(4, 1fr); }
.boundaries { display: grid; grid-template-columns: repeat(2, 1fr); margin: 3rem 0 0; border-top: 1px solid var(--line); }
.boundaries div { padding: 1.4rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.boundaries div:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.boundaries div:last-child { grid-column: span 2; }
.boundaries dt { font-size: 1.25rem; font-weight: 700; }
.boundaries dd { margin: .35rem 0 0; }

.closing h2 { max-width: 18ch; }
.text-link { color: var(--espresso); font-weight: 700; text-underline-offset: .2em; }
.site-footer { padding-block: 2rem; color: var(--muted); font-size: .8rem; }

@media (prefers-reduced-motion: no-preference) {
  .has-reveal [data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity .45s ease, transform .45s ease; }
  .has-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 2rem, 72rem); }
  .navigation { align-items: flex-start; padding-block: 1rem; }
  .navigation nav { align-items: flex-end; flex-direction: column; gap: .5rem; }
  .steps, .capabilities, .boundaries { grid-template-columns: 1fr; }
  .steps li + li, .capabilities li + li, .boundaries div:nth-child(even) { padding-left: 0; border-left: 0; }
  .boundaries div:last-child { grid-column: auto; }
  .footer-content { align-items: flex-start; flex-direction: column; }
}