/* Om-side — about page. Matches variations/about.jsx (AboutV1) in the design canvas. */
.om { background: oklch(0.99 0.003 80); color: oklch(0.2 0.01 260); font-family: 'Inter', system-ui, sans-serif; font-weight: 300; line-height: 1.6; }
.om__eye, .om__arc-eye, .om__mw-eye { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; color: oklch(0.5 0.01 250); text-transform: uppercase; }

.om__hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; padding: 120px 56px 72px; max-width: 1280px; margin: 0 auto; }
.om__hero-right { padding-bottom: 12px; }
.om__hero .om__eye { margin-bottom: 32px; display: block; }
.om__h1 { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 80px; line-height: 0.97; letter-spacing: -0.035em; margin: 0; }
.om__lede { font-size: 17px; color: oklch(0.32 0.01 250); line-height: 1.6; margin: 0; max-width: 420px; }

.om__arc { padding: 32px 56px 96px; max-width: 1280px; margin: 0 auto; }
.om__arc-eye { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid oklch(0.88 0.005 250); }
.om__arc-prose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.om__arc-prose p { font-size: 16px; color: oklch(0.28 0.01 260); line-height: 1.65; margin: 0; text-wrap: pretty; }

.om__story { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; padding: 32px 56px 96px; max-width: 1280px; margin: 0 auto; }
.om__story .om__eye { margin-bottom: 16px; display: block; }
.om__h2 { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.om__story-body p { font-size: 16px; color: oklch(0.28 0.01 260); margin: 0 0 18px 0; line-height: 1.65; text-wrap: pretty; }

.om__values { background: oklch(0.96 0.005 250); padding: 72px 56px; border-top: 1px solid oklch(0.92 0.005 250); border-bottom: 1px solid oklch(0.92 0.005 250); }
.om__value { display: grid; grid-template-columns: 80px 1fr; gap: 32px; max-width: 880px; margin: 0 auto; padding: 28px 0; border-top: 1px solid oklch(0.88 0.005 250); }
.om__value-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: oklch(0.5 0.01 250); letter-spacing: 0.08em; padding-top: 6px; }
.om__value-h { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.01em; }
.om__value-p { font-size: 15px; color: oklch(0.35 0.01 250); line-height: 1.6; max-width: 580px; }

.om__process { padding: 96px 56px; max-width: 1100px; margin: 0 auto; }
.om__process .om__eye { margin-bottom: 24px; display: block; }
.om__process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.om__step { padding: 20px 0; border-top: 1px solid oklch(0.85 0.005 250); }
.om__step-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #2F80ED; letter-spacing: 0.08em; margin-bottom: 16px; }
.om__step-t { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.om__step-d { font-size: 13px; color: oklch(0.4 0.01 250); line-height: 1.55; }

.om__mw { background: oklch(0.18 0.01 260); color: oklch(0.95 0.005 80); padding: 80px 56px; text-align: center; }
.om__mw-eye { color: #7AB4F5; margin-bottom: 24px; }
.om__mw-h { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px 0; }
.om__mw-p { font-size: 16px; color: oklch(0.75 0.01 250); max-width: 520px; margin: 0 auto 32px; line-height: 1.55; }
.om__mw-btn { display: inline-block; background: oklch(0.99 0.003 80); color: oklch(0.18 0.01 260); padding: 16px 32px; font-size: 14px; font-weight: 500; border-radius: 999px; text-decoration: none; }

.om__cta { padding: 96px 56px; max-width: 1100px; margin: 0 auto; text-align: center; }
.om__cta-h { font-family: 'Geist', 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 36px; letter-spacing: -0.02em; margin: 0 0 32px 0; }
.om__cta-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.om__cta-pri { background: oklch(0.18 0.01 260); color: white; padding: 16px 28px; font-size: 14px; font-weight: 500; border-radius: 999px; text-decoration: none; }
.om__cta-sec { padding: 16px 28px; font-size: 14px; color: oklch(0.25 0.01 260); text-decoration: none; border: 1px solid oklch(0.85 0.005 250); border-radius: 999px; }

@media (max-width: 840px) {
	.om__hero { grid-template-columns: 1fr; gap: 24px; padding: 64px 20px 40px; }
	.om__h1 { font-size: 44px; }
	.om__arc, .om__story, .om__process, .om__cta { padding-left: 20px; padding-right: 20px; }
	.om__arc-prose, .om__process-grid { grid-template-columns: 1fr; gap: 24px; }
	.om__story { grid-template-columns: 1fr; gap: 24px; }
	.om__values { padding: 48px 20px; }
	.om__h2, .om__mw-h, .om__cta-h { font-size: 28px; }
	.om__mw { padding: 56px 20px; }
}