/* Product pages share the site's prose, navigation and signup foundations. */
.product-page {
    --product-accent-rgb: 98, 216, 189;
    --product-surface: #151e2c;
    --product-shadow: 0 24px 58px -24px rgba(0, 0, 0, .65);
}
.product--vault { --story-accent: #c0a4ff; --product-accent-rgb: 192, 164, 255; }
.product--watch { --story-accent: #80c9fa; --product-accent-rgb: 128, 201, 250; }
.product--guardian { --story-accent: #d7b3ff; --product-accent-rgb: 215, 179, 255; }
.product--agent { --story-accent: #8ccfe0; --product-accent-rgb: 140, 207, 224; }
.product--wipe { --story-accent: #f9b684; --product-accent-rgb: 249, 182, 132; }
.ps-light .product-page {
    --product-surface: #fff;
    --product-shadow: 0 22px 50px -28px rgba(35, 53, 76, .38);
}
.ps-light .product--vault { --story-accent: #6d3ab5; }
.ps-light .product--watch { --story-accent: #216596; }
.ps-light .product--guardian { --story-accent: #7b399a; }
.ps-light .product--agent { --story-accent: #216779; }
.ps-light .product--wipe { --story-accent: #99501d; }
.product-page .story-container, .product-page .story-section { width: min(1280px, calc(100% - 80px)); }
.product-hero { padding-block: 142px 64px; }
.product-hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.product-hero-grid > *, .product-section--split > * { min-width: 0; }
.product-page h1 { font-size: clamp(2.6rem, 4.1vw, 4rem); max-width: 17ch; margin-block: 20px 24px; }
.product-page .product-hero .story-lead { font-size: 1.125rem; line-height: 1.75; }
.product-page .story-actions { margin-top: 28px; gap: 16px 24px; }
.product-page .story-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.product-media { margin: 0; min-width: 0; }
.product-image-link {
    position: relative; display: block; padding: 14px; border: 1px solid var(--story-line);
    border-radius: 22px; background: rgba(var(--product-accent-rgb), .065);
    box-shadow: var(--product-shadow); cursor: zoom-in;
}
.product-image-link img { width: 100%; height: auto; display: block; border-radius: 12px; }
.product-image-link .screenshot-light { display: none; }
.ps-light .product-image-link .screenshot-dark { display: none; }
.ps-light .product-image-link .screenshot-light { display: block; }
.product-image-link:hover { border-color: var(--story-accent); }
.product-zoom-label {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    color: var(--story-accent); font-size: .8125rem; font-weight: 600; padding: 12px 2px 0;
}
.product-zoom-label::after { content: '\2197'; font-size: 1.1rem; line-height: 1; }
.product-media figcaption { font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.65; padding: 15px 3px 0; }
.product-media--portrait { width: min(100%, 350px); justify-self: center; }
.product-media--portrait .product-image-link { padding: 10px; }
.product--agent .product-hero-grid { grid-template-columns: 1.12fr .88fr; }
.product--agent .product-hero { padding-top: 120px; }
.product-page .product-jump-links {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 36px; padding-block: 18px;
    border-block: 1px solid var(--story-line); font-size: .875rem;
}
.product-jump-links a { display: inline-flex; align-items: center; min-height: 44px; }
.product-jump-links a::after { content: '\2193'; margin-left: 12px; opacity: .7; }
.product-section { padding-block: 76px; border-bottom: 1px solid var(--story-line); }
.product-section--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.product-section--reverse > .product-copy { order: 2; }
.product-section--reverse > :not(.product-copy) { order: 1; }
.product-copy { max-width: 68ch; }
.product-section:not(.product-section--split) > .product-copy { max-width: 760px; margin-inline: auto; }
.product-copy h2 { max-width: 23ch; }
.product-page .product-copy p:last-child { margin-bottom: 0; }
.product-page main .product-eyebrow { color: var(--story-accent); font-size: .8125rem; font-weight: 600; letter-spacing: .025em; margin-bottom: 18px; }
.product-aside {
    align-self: stretch; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(24px, 3.5vw, 44px); border: 1px solid var(--story-line); border-radius: 20px;
    background: rgba(var(--product-accent-rgb), .045);
}
.product-aside h2 { font-size: 1.7rem; }
.product-aside h3 { margin-block: 0 16px; }
.product-page main .product-aside p { font-size: 1rem; }
.product-aside p:last-child { margin-bottom: 0; }
.product-facts { margin: 0; }
.product-facts dt { color: var(--color-text-primary); font-size: 1.125rem; font-weight: 600; }
.product-facts dd { color: var(--color-text-secondary); line-height: 1.75; margin: 8px 0 24px; }
.product-facts dd:last-child { margin-bottom: 0; }
.product-facts > div + div { padding-top: 22px; border-top: 1px solid var(--story-line); margin-top: 22px; }
.product-page .product-section--tinted {
    margin-block: 30px; padding: clamp(28px, 5vw, 60px); border: 1px solid var(--story-line);
    border-radius: 24px; background: rgba(var(--product-accent-rgb), .045);
}
.product-page .product-signup { border-top: 0; padding-block: 76px 90px; }
.product-signup .story-split { gap: 64px; align-items: center; }
.product-signup .newsletter-form {
    background: var(--product-surface); padding: 28px; border: 1px solid var(--story-line); border-radius: 20px;
}
.product-signup .newsletter-form-row { flex-direction: column; align-items: stretch; gap: 14px; }
.product-signup .newsletter-field { flex: none; }
.product-signup .newsletter-submit { flex: none; }
.product-concept { padding: clamp(24px, 3vw, 42px); background: var(--product-surface); border: 1px solid var(--story-line); border-radius: 24px; box-shadow: var(--product-shadow); }
.product-process { list-style: none; margin: 0; padding: 0; }
.product-process-step { display: flex; align-items: flex-start; gap: 20px; position: relative; padding-bottom: 34px; }
.product-process-step:last-child { padding-bottom: 0; }
.product-process-step:not(:last-child)::after {
    content: ''; position: absolute; top: 46px; bottom: 8px; left: 22px; width: 1px; background: var(--story-line);
}
.product-process-number { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--story-line); background: rgba(var(--product-accent-rgb), .08); color: var(--story-accent); font-size: .875rem; flex: none; }
.product-process-copy { padding-top: 6px; }
.product-process-copy h2, .product-process-copy h3 { margin: 0 0 8px; font-size: 1.125rem; line-height: 1.45; }
.product-page main .product-process-copy p { margin: 0; font-size: .9375rem; line-height: 1.7; }
.product-concept figcaption { margin-top: 28px; border-top: 1px solid var(--story-line); padding-top: 18px; }

/* Native dialog contains keyboard focus and leaves a direct image link available. */
html.product-image-open { overflow: hidden; }
.product-lightbox {
    margin: auto; width: min(1440px, calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 40px);
    padding: 22px; border: 1px solid var(--story-line); border-radius: 18px;
    background: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: var(--product-shadow);
}
.product-lightbox::backdrop { background: rgba(4, 9, 17, .86); }
.product-lightbox-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.product-lightbox .product-lightbox-title { font-size: 1rem; line-height: 1.5; margin: 0; max-width: 64ch; }
.product-lightbox-actions { display: flex; align-items: center; gap: 22px; }
.product-lightbox a { font-size: .875rem; color: var(--story-accent); text-decoration: underline; text-underline-offset: 4px; }
.product-lightbox-close { min-height: 44px; padding: 8px 16px; border: 1px solid var(--story-line); border-radius: 8px; background: var(--product-surface); color: var(--color-text-primary); cursor: pointer; font: inherit; font-size: .875rem; }
.product-lightbox-image { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 180px); height: auto; margin: auto; border-radius: 8px; object-fit: contain; }
.product-lightbox-caption { font-size: .8125rem; color: var(--color-text-secondary); line-height: 1.6; margin-top: 16px; }

@media (max-width: 1050px) {
    .product-page .story-container, .product-page .story-section { width: calc(100% - 56px); }
    .product-hero { padding-top: 122px; }
    .product-hero-grid { gap: 28px; }
    .product-page h1 { font-size: 2.75rem; }
    .product-section--split { gap: 36px; }
    .product-signup .story-split { gap: 32px; }
}
@media (max-width: 800px) {
    .product-hero-grid, .product--agent .product-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .product-hero-copy { max-width: 640px; }
    .product-page h1 { max-width: 21ch; font-size: clamp(2.5rem, 6.5vw, 3.3rem); }
    .product-section--split { grid-template-columns: 1fr; gap: 32px; }
    .product-section--reverse > .product-copy,
    .product-section--reverse > :not(.product-copy) { order: initial; }
    .product-media--portrait { justify-self: start; width: min(100%, 340px); }
    .product-section { padding-block: 52px; }
    .product-copy { max-width: none; }
    .product-page .product-signup { padding-block: 52px 64px; }
    .product-signup .story-split { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .product-page .story-container, .product-page .story-section { width: calc(100% - 40px); }
    .product-hero, .product--agent .product-hero { padding-block: 100px 38px; }
    .product-page h1 { font-size: 2.125rem; letter-spacing: -.04em; }
    .product-page .product-hero .story-lead { font-size: 1rem; }
    .product-page .story-actions { margin-top: 20px; gap: 12px; }
    .product-page .story-actions a { font-size: .9375rem; }
    .product-page .story-actions .btn { padding-inline: 18px; }
    .product-page main .story-kicker { font-size: .8125rem; }
    .product-image-link { padding: 8px; border-radius: 16px; }
    .product-image-link img { border-radius: 9px; }
    .product-zoom-label { padding-top: 8px; }
    .product-page .product-jump-links { gap: 2px 24px; padding-block: 12px; }
    .product-page .product-section--tinted { padding: 24px; }
    .product-page h2 { font-size: 2rem; }
    .product-signup .newsletter-form { padding: 22px; }
    .product-process-step { gap: 14px; }
    .product-process-copy h3 { font-size: 1.125rem; }
    .product-lightbox { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
    .product-lightbox-image { max-height: calc(100dvh - 220px); }
    .product-lightbox-actions { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .product-page *, .product-page *::before, .product-page *::after { scroll-behavior: auto; }
}