.product-page { --product-blue-gradient: radial-gradient(ellipse at 50% 38%, #23578e 0%, #14487f 48%, #013d7c 100%); }
/* Product page: shared homepage typography with a consistent left-aligned grid. */
html:has(.product-page) { scroll-padding-top: calc(var(--product-header-height, 88px) + var(--product-bar-height, 60px) + 20px); }
.product-page .button { border-radius: 12px; }
.product-hero { position: relative; isolation: isolate; overflow: hidden; padding: 2.25rem var(--page-gutter); min-height: 340px; background: var(--product-blue-gradient); color: white; }
.product-hero__copy { position: relative; z-index: 1; max-width: var(--content-max); width: 100%; margin: auto; padding: 0; text-align: left; }
.product-hero__copy > * { max-width: 46%; }
.product-hero .eyebrow { color: var(--highlight-yellow); }
.product-hero h1 { color: white; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: var(--leading-heading); letter-spacing: var(--track-display); margin-top: .75rem; }
.product-hero__lead { color: #e1e8f1; font-size: 1rem; line-height: 1.65; margin-top: 1rem; }
.product-hero .disclaimer { color: #d9e5f2; font-weight: 400; font-size: .6875rem; line-height: 1.5; margin-top: 1rem; max-width: 100%; white-space: nowrap; }
.product-hero__media { position: absolute; inset: 0 0 0 52%; margin: 0; pointer-events: none; }
.product-hero__image-stage { position: absolute; inset: 0; overflow: visible; }
.product-hero__media img { position: absolute; right: -2px; top: 50%; width: min(150%, 2600px); height: auto; max-width: none; transform: translateY(-50%) rotate(15deg); filter: drop-shadow(0 14px 12px rgba(0,0,0,.18)); }
.product-hero__media figcaption { display: none; }
.product-sections { position: sticky; top: var(--product-header-height, 88px); z-index: 9; background: rgba(249,250,251,.94); border-bottom: 1px solid #e5e7eb; padding: 0 var(--page-gutter); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.product-sections > div { display: flex; justify-content: flex-start; gap: clamp(1.25rem, 2.8vw, 2.5rem); max-width: var(--content-max); margin: auto; overflow-x: auto; scrollbar-width: thin; }
.product-sections a { font-size: .8125rem; font-weight: 500; padding: .85rem 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.product-sections a:hover, .product-sections a[aria-current="location"] { border-bottom-color: var(--highlight-yellow); }
.product-section { padding: clamp(3rem,5vw,4.75rem) var(--page-gutter); }
.product-heading h2, .product-demo h2 { font-family: var(--font-display); font-size: var(--type-h2); font-weight: var(--weight-heading); line-height: var(--leading-title); letter-spacing: var(--track-heading); margin-top: .9rem; }
.product-heading > p:not(.eyebrow) { color: var(--dark-neutral); margin-top: 1.1rem; max-width: 42rem; }
/* Full-width diagram: the image and all callouts share one coordinate system. */
.product-controls { overflow: hidden; }
.product-diagram { width: 100vw; margin: 1.75rem 0 0 calc(50% - 50vw); }
.product-diagram__canvas { display: block; width: 100%; height: auto; overflow: hidden; }
.control-leader { fill: none; stroke: #003d7c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.control-label { fill: #003d7c; font-family: var(--font-display); font-weight: 700; }
.control-description { fill: #36465b; font-family: var(--font-sans); }
.product-diagram figcaption { max-width: var(--content-max); margin: 0 auto; font-size: var(--type-meta); color: var(--dark-neutral); padding: .5rem 0 0; }
@media (max-width: 1324px) { .product-diagram figcaption { margin-inline: var(--page-gutter); } }
.product-functions { background: var(--product-blue-gradient); color: white; }
.product-functions .product-heading { margin-bottom: 2rem; }
.product-functions .product-heading > p:not(.eyebrow) { color: #d9e5f2; max-width: 42rem; }
.product-function-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.product-function-list article { display: grid; grid-template-columns: 32px 1fr; gap: 1.3rem; padding: 1.75rem; border: 1px solid #6387b0; border-radius: 12px; background: #ffffff09; transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.product-function-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #9fc7ea; }
.product-function-icon svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-function-list h3 { font-family: var(--font-display); font-size: 1.0625rem; line-height: var(--leading-title); }
.product-function-list p { color: #d9e5f2; font-size: 1rem; margin-top: .55rem; }
@media (hover: hover) and (pointer: fine) {
 .product-function-list article:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); background-color: rgba(255,255,255,.08); }
}
.product-function-list article:focus-within { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.product-page .action-section { padding: clamp(3rem,5vw,4.75rem) var(--page-gutter); }
.product-page .action-section__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.product-page .action-section__heading { justify-items: start; text-align: left; }
.product-page .action-showcase, .product-page .action-showcase__video { width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; }
.product-page .action-showcase__video .video-player-shell { border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px -14px rgba(1,38,76,.25); }
.product-page .action-showcase__video video { border-radius: 12px; }
.product-page .action-section .action-showcase .video-disclaimer { color: var(--dark-neutral); }
.product-setup { background: var(--soft-paper); }
.product-setup__layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(2rem,4vw,3rem); align-items: stretch; padding-bottom: 3rem; }
.product-setup .product-heading { min-width: 0; display: flex; flex-direction: column; }
.product-setup .text-link { display: inline-flex; align-self: flex-start; gap: .7rem; margin-top: 1.8rem; font-size: var(--type-body-small); }
.product-use-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: auto; padding-top: 1.5rem; }
.product-use-gallery figure { position: relative; margin: 0; min-width: 0; }
.product-use-gallery img { display: block; width: 100%; height: auto; border-radius: 12px; }
.product-use-gallery figcaption { position: absolute; top: 100%; left: 0; right: 0; font-size: .75rem; line-height: 1.4; color: var(--dark-neutral); margin-top: .55rem; }
/* Equal tracks share the column height; gallery captions sit below that baseline. */
.product-facts { display: grid; grid-template-rows: auto 1fr; width: 100%; border-collapse: collapse; border: 0; }
.product-facts tbody { display: grid; grid-template-rows: repeat(4, 1fr); }
.product-facts tr { display: grid; grid-template-columns: 34% minmax(0, 1fr); }
.product-facts caption { padding: 0 0 1.25rem; color: var(--primary-blue); font-family: var(--font-display); font-weight: 600; }
.product-facts th, .product-facts td { padding: 1.25rem 1rem; vertical-align: top; border: 0; border-bottom: 1px solid #e5e7eb; font-size: 1rem; line-height: 1.55; }
.product-facts th { font-weight: 600; }
.product-facts td { color: var(--dark-neutral); }
.product-facts tr:nth-child(odd) { background: white; }
.product-facts tr:nth-child(even) { background: #edf2f7; }
.product-demo { background: #01264c; color: white; }
.product-demo .section__inner > p:not(.eyebrow) { max-width: 40rem; margin: 1.2rem 0 0; color: #d9e5f2; }
.product-demo .button { margin-top: 1.8rem; }
.product-demo .section__inner > p.disclaimer { color: #bdcde0; font-weight: 400; margin-top: 1.3rem; }
/* Match the homepage's reading direction across every content section. */
.product-page main h1, .product-page main h2, .product-page main h3,
.product-page main p, .product-page figcaption, .product-page caption,
.product-page th, .product-page td, .product-page .site-footer h2,
.product-page .site-footer p { text-align: left; }
.product-page main .eyebrow::after { margin-left: 0; margin-right: 0; }
@media (max-width: 1050px) {
 .product-hero__copy > * { max-width: 46%; }
 .product-hero__media { left: 52%; right: 0; }
 .product-facts th, .product-facts td { padding: .9rem .8rem; font-size: .875rem; }
}
@media (max-width: 760px) {
 .product-hero { min-height: 0; padding: 1.5rem var(--page-gutter) 8rem; }
 .product-hero__copy { padding: 0; }
 .product-hero__copy > * { max-width: 100%; }
 .product-hero h1 { font-size: 1.85rem; }
 .product-hero__lead { max-width: 36rem; line-height: 1.5; margin-top: .8rem; }
 .product-hero .disclaimer { margin-top: .8rem; }
 .product-hero__media { inset: auto 0 .5rem var(--page-gutter); height: 7rem; }
 .product-hero__media img { top: 35%; width: min(140%, 1000px); transform: translateY(-50%) rotate(25deg); }
 .product-setup__layout { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 0; }
 .product-use-gallery { margin-top: 0; }
 .product-use-gallery figcaption { position: static; }
}
@media (max-width: 640px) {
 .product-function-list { grid-template-columns: 1fr; }
 .product-function-list article { padding: 1.25rem; grid-template-columns: 32px 1fr; gap: 1rem; }
 .product-diagram { margin-top: 1.5rem; }
 .product-facts th, .product-facts td { padding: 1rem .85rem; font-size: .875rem; }
 .product-facts tr { grid-template-columns: 36% minmax(0, 1fr); }
 .product-demo .button { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
 .product-function-list article { transition: none; }
 .product-function-list article:hover, .product-function-list article:focus-within { transform: none; }
 html:has(.product-page) { scroll-behavior: auto; }
}

@media (max-width: 540px) {
 .product-use-gallery { grid-template-columns: 1fr; }
 .product-hero .disclaimer { white-space: normal; font-size: .6875rem; }
}

.product-hero__disclaimer { position: absolute; left: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); bottom: 1.4rem; margin: 0; }
@media (max-width: 760px) {
 .product-hero__disclaimer { bottom: auto; position: relative; left: auto; margin-top: .8rem; }
}

@media (min-width: 1600px) {
 .product-hero__media img { top: 43%; transform: translateY(-50%) rotate(25deg); }
}