
.overview-page{--primary:oklch(.43 .1 195);--secondary:oklch(.96 .025 195);--accent:oklch(.52 .1 195)}
.overview-page.product-opd{--primary:oklch(.46 .18 270);--secondary:oklch(.96 .025 270);--accent:oklch(.55 .15 270)}
.overview-page .hero-section{padding-block:4rem 3rem}
.overview-page .hero-title{font-size:clamp(2.35rem,4.4vw,3.8rem);max-width:15ch}
.overview-page .hero-copy{font-size:1.1rem;max-width:48ch}
.overview-page .eyebrow{white-space:normal}
.overview-page .hero-art{position:relative;background:var(--secondary);border-radius:32px;padding:1.5rem;box-shadow:inset 0 0 0 1px oklch(0 0 0 / .035)}
.hero-art img{display:block;width:100%;height:auto;aspect-ratio:1.25;object-fit:contain}
.art-caption{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.8rem 1rem;background:white;border-radius:16px;font-size:.85rem;color:var(--text-muted);box-shadow:var(--shadow-card)}
.art-caption strong{color:var(--primary)}
.overview-page .feature-card{padding:1.75rem;height:100%}
.overview-page .feature-card h3{font-size:1.2rem}
.overview-page .feature-card p{margin-bottom:0}
.feature-icon{width:52px;height:52px;display:grid;place-items:center;background:var(--secondary);color:var(--primary);border-radius:16px;margin-bottom:1.25rem}
.feature-icon svg{width:26px;height:26px}
.journey-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.5rem;border-radius:24px;background:var(--secondary);margin-block:1.5rem 4rem}
.journey-step{display:flex;align-items:center;gap:.75rem;font-size:.9rem;font-weight:700}
.journey-step span{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:white;color:var(--primary);font-variant-numeric:tabular-nums}
.overview-body{display:grid;grid-template-columns:235px minmax(0,1fr);gap:3.5rem;margin-block:4rem}
.chapter-nav{position:sticky;top:1.5rem;align-self:start;padding:1.25rem 0}
.chapter-nav p{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--text-muted);padding-inline:.75rem}
.chapter-nav a{display:flex;align-items:baseline;gap:.65rem;min-height:44px;padding:.6rem .75rem;text-decoration:none;font-size:.85rem;color:var(--text-muted);border-radius:10px;transition:background-color .18s,color .18s}
.chapter-nav a:hover{background:var(--secondary);color:var(--primary)}
.chapter-nav a span{font-size:.75rem;color:var(--primary);font-variant-numeric:tabular-nums}
.content-chapter{scroll-margin-top:2rem;padding-block:2.5rem;border-top:1px solid var(--divider)}
.content-chapter:first-child{padding-top:0;border-top:0}
.chapter-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--primary);text-transform:uppercase;margin-bottom:.75rem}
.content-chapter h2{font-size:clamp(1.5rem,2.2vw,2rem);max-width:27ch;margin-bottom:1.5rem}
.chapter-copy{max-width:65ch;font-size:1rem;line-height:1.8}
.chapter-copy p+p{margin-top:1.25rem}
.chapter-visual{display:flex;gap:1.5rem;align-items:center;background:var(--secondary);border-radius:24px;padding:1.5rem;margin-block:1.5rem 2rem;max-width:65ch}
.chapter-visual img{width:125px;height:100px;object-fit:contain;flex-shrink:0}
.chapter-visual p{margin:0;font-size:.95rem;font-weight:600;color:var(--primary)}
.overview-page a:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.overview-page .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.overview-page .site-header{gap:1rem;padding-block:1rem}
.overview-page .nav-link{font-size:.85rem}
@media(max-width:991px){.overview-body{grid-template-columns:1fr;gap:1.5rem}.chapter-nav{position:static;display:flex;flex-wrap:wrap;gap:.25rem;padding:1rem;background:var(--secondary);border-radius:20px}.chapter-nav p{width:100%;margin-bottom:.3rem}.chapter-nav a{font-size:.8rem}.overview-page .hero-section{padding-top:2rem}.journey-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.overview-page .hero-title{max-width:100%;font-size:2.3rem}.overview-page .site-header nav{width:100%}.overview-page .site-header .nav{gap:0!important}.overview-page .site-header .btn-cta{padding-inline:.75rem}.hero-art{padding:1rem!important}.art-caption{font-size:.75rem}.journey-strip{padding:1rem;gap:1rem .5rem}.journey-step{font-size:.8rem}.chapter-visual{gap:1rem;padding:1rem}.chapter-visual img{width:80px;height:80px}.chapter-visual p{font-size:.85rem}.overview-body{margin-top:2rem}}

.overview-page .hero-art{padding:0;overflow:hidden;background:white;box-shadow:var(--shadow-card)}
.hero-art img{border-radius:32px 32px 0 0}
.hero-art .art-caption{border-radius:0;box-shadow:none;padding:1rem 1.25rem}
@media(max-width:575px){.overview-page .hero-art{padding:0!important}}

/* Reuse the existing solution illustration treatment. */
.overview-page .hero-art{padding:1.5rem;background:var(--secondary);box-shadow:inset 0 0 0 1px oklch(0 0 0 / .035)}
.hero-art img{border-radius:0;height:400px;aspect-ratio:auto;object-fit:contain}
.hero-art .art-caption{border-radius:16px;box-shadow:var(--shadow-card)}
@media(max-width:575px){.overview-page .hero-art{padding:1rem!important}.hero-art img{height:280px}}

