/* Product directory: shared product imagery, with page-owned layout. */
.overview-page {
    --product-accent-rgb: 98, 216, 189;
    --product-surface: #151e2c;
    --product-shadow: 0 24px 58px -28px rgba(0, 0, 0, .6);
    --overview-violet: #c0a4ff;
}
.ps-light .overview-page {
    --product-surface: #fff;
    --product-shadow: 0 20px 46px -30px rgba(35, 53, 76, .35);
    --overview-violet: #6d3ab5;
}
.overview-page .story-container, .overview-page .story-section { width: min(1240px, calc(100% - 80px)); }
.overview-page .overview-hero { position: relative; padding-block: 140px 56px; }
.overview-page .overview-hero::before {
    content: ''; position: absolute; z-index: -1; inset: 40px -100px -100px;
    background: radial-gradient(ellipse at 85% 35%, rgba(98, 216, 189, .045), transparent 62%);
    pointer-events: none;
}
.overview-page .overview-hero h1 { max-width: 23ch; font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.overview-page .overview-hero .story-lead { max-width: 70ch; }
.overview-page .overview-actions { margin-top: 28px; gap: 16px 28px; }
.overview-page .overview-actions a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.overview-page .overview-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.overview-page .overview-card {
    min-width: 0; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--story-line);
    border-radius: 24px; background: var(--product-surface); box-shadow: var(--product-shadow);
}
.overview-page .overview-copy { min-width: 0; }
.overview-page .overview-copy h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 0 0 16px; }
.overview-page .overview-copy h2 a { color: var(--color-text-primary); }
.overview-page .overview-copy h2 a::after { content: '\2197'; color: var(--story-accent); font-size: .65em; margin-left: 12px; }
.overview-page .overview-copy .story-kicker { margin-bottom: 18px; font-size: .8125rem; }
.overview-page .overview-copy p:last-child { margin-bottom: 0; }
.overview-page .overview-protect {
    grid-column: 1 / -1; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 40px;
    background: linear-gradient(125deg, rgba(98, 216, 189, .045), transparent 65%), var(--product-surface);
    border-top: 3px solid var(--story-accent);
}
.overview-page .overview-protect h2 { font-size: clamp(2rem, 3vw, 2.9rem); }
.overview-page .overview-media { margin: 28px 0 0; }
.overview-page .overview-protect .overview-media { margin: 0; }
.overview-page .product-image-link { padding: 10px; border-radius: 16px; box-shadow: none; }
.overview-page .product-image-link img { border-radius: 9px; }
.overview-page .overview-companions { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; }
.overview-page .overview-watch, .overview-page .overview-agent { min-width: 0; }
.overview-page .overview-agent {
    padding-left: 40px; border-left: 1px solid var(--story-line);
    display: grid; grid-template-columns: 1fr 170px; align-items: center; gap: 24px;
}
.overview-page .overview-media--portrait { width: 100%; max-width: 230px; margin: 0; }
.overview-page .overview-media--portrait .product-zoom-label { font-size: .75rem; }
.overview-page .overview-vault { --story-accent: var(--overview-violet); }
.overview-page .overview-guardian, .overview-page .overview-vault { display: flex; flex-direction: column; }
.overview-page .overview-guardian .overview-media, .overview-page .overview-vault .overview-media { margin-top: auto; padding-top: 28px; }
.overview-page .overview-wipe { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 40px; background: transparent; box-shadow: none; }
.overview-page .overview-wipe .overview-copy { max-width: 76ch; }
.overview-page .overview-concept { color: var(--overview-violet); border-radius: 20px; background: rgba(192, 164, 255, .06); }
.overview-page .overview-concept svg { display: block; width: 100%; height: auto; }
.overview-page .story-signup { border-top: 0; padding-block: 80px 90px; }
.overview-page .story-signup .story-split { gap: 64px; align-items: center; }
.overview-page .story-signup .newsletter-form { padding: 28px; border: 1px solid var(--story-line); border-radius: 20px; background: var(--product-surface); }
.overview-page .story-signup .newsletter-form-row { flex-direction: column; align-items: stretch; gap: 14px; }
.overview-page .story-signup .newsletter-field, .overview-page .story-signup .newsletter-submit { flex: none; }
.overview-page :focus-visible { outline: 2px solid var(--story-accent); outline-offset: 5px; }
@media (max-width: 1100px) {
    .overview-page .overview-agent { grid-template-columns: 1fr; align-content: start; }
    .overview-page .overview-media--portrait { max-width: 190px; }
}
@media (max-width: 800px) {
    .overview-page .story-container, .overview-page .story-section { width: calc(100% - 40px); }
    .overview-page .overview-hero { padding-block: 112px 40px; }
    .overview-page .overview-directory, .overview-page .overview-protect, .overview-page .overview-companions { grid-template-columns: 1fr; }
    .overview-page .overview-protect, .overview-page .overview-companions { gap: 28px; }
    .overview-page .overview-agent { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--story-line); grid-template-columns: 1fr 170px; }
    .overview-page .story-signup .story-split { grid-template-columns: 1fr; gap: 28px; }
    .overview-page .story-signup { padding-block: 52px 64px; }
}
@media (max-width: 480px) {
    .overview-page .overview-hero h1 { font-size: 2.4rem; }
    .overview-page .overview-hero .story-lead { font-size: 1.0625rem; }
    .overview-page .overview-card { padding: 24px; border-radius: 20px; }
    .overview-page .overview-agent { grid-template-columns: 1fr; }
    .overview-page .overview-media--portrait { max-width: 210px; margin-inline: auto; }
    .overview-page .overview-wipe { grid-template-columns: 1fr; gap: 24px; }
    .overview-page .overview-concept { width: 112px; }
    .overview-page .story-signup .newsletter-form { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .overview-page *, .overview-page *::before, .overview-page *::after { scroll-behavior: auto; transition: none; animation: none; }
}