.content-page { background: var(--color-surface); color: var(--color-on-surface); }
.content-hero { padding: var(--spacing-4xl) var(--spacing-2xl); background: var(--color-primary); color: var(--color-on-primary); }
.content-hero .hero-title { color: var(--color-on-primary); max-width: 15ch; }
.content-hero-inner, .content-section-inner { width: 100%; max-width: var(--content-max-width); margin-inline: auto; }
.content-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--spacing-3xl); }
.content-hero-copy { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.content-eyebrow { color: var(--color-accent); font-size: var(--font-size-xs); letter-spacing: .14em; text-transform: uppercase; }
.content-lede { max-width: 60ch; opacity: .85; }
.content-hero-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--border-radius-xl); box-shadow: var(--shadow-level-3); }
.content-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.content-section { padding: var(--spacing-4xl) var(--spacing-2xl); }
.content-section.alt { background: var(--color-surface-tint); }
.content-intro { max-width: 65ch; margin-top: var(--spacing-md); color: var(--color-on-surface-secondary); }
.content-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-2xl); }
.content-card { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-outline); border-radius: var(--border-radius-card); box-shadow: var(--shadow-level-1); }
.content-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.content-card-media img { width: 100%; height: 100%; object-fit: cover; }
.content-card-body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); }
.content-card-title { font-family: var(--font-family-heading); font-size: var(--font-size-xl); }
.content-kicker { color: var(--color-accent); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .12em; }
.content-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-2xl); }
.content-feature { padding: var(--spacing-lg); border-left: 2px solid var(--color-accent); background: var(--color-surface-elevated); border-radius: var(--border-radius-md); }
.content-feature h3 { font-family: var(--font-family-heading); font-size: var(--font-size-lg); margin-bottom: var(--spacing-xs); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--spacing-2xl); margin-top: var(--spacing-2xl); }
.contact-card { padding: var(--spacing-xl); border: 1px solid var(--color-outline); background: var(--color-surface-elevated); border-radius: var(--border-radius-card); }
.contact-form { display: grid; gap: var(--spacing-md); }
.contact-form label { display: grid; gap: .4rem; font-weight: 500; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--color-outline); padding: .8rem 1rem; border-radius: var(--border-radius-md); background: var(--color-surface); color: var(--color-on-surface); }
.contact-form textarea { min-height: 9rem; resize: vertical; }
.contact-form button { justify-self: start; }
.form-status { min-height: 1.4em; color: var(--color-on-surface-secondary); font-size: var(--font-size-sm); }
.demo-note { padding: var(--spacing-md); background: color-mix(in oklab, var(--color-accent) 12%, var(--color-surface)); border-radius: var(--border-radius-md); font-size: var(--font-size-sm); }
.not-found-main { min-height: 65vh; display: grid; place-items: center; padding: var(--spacing-4xl) var(--spacing-lg); text-align: center; }
.not-found-card { max-width: 42rem; display: grid; gap: var(--spacing-lg); }
.not-found-code { font-family: var(--font-family-heading); font-size: clamp(4rem, 18vw, 9rem); line-height: .9; color: var(--color-accent); }

@media (max-width: 991px) {
  .content-hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .content-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .content-hero, .content-section { padding: var(--spacing-2xl) var(--spacing-lg); }
  .content-card-grid, .content-feature-grid { grid-template-columns: 1fr; }
}

.content-section .content-eyebrow, .content-card .content-kicker, .not-found-code { color: var(--color-accent-on-light); }