.product-page { --product-blue-gradient: radial-gradient(ellipse at 50% 38%, #23578e 0%, #14487f 48%, #013d7c 100%); --product-icon-color: #9fc7ea; }
/* 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) 3.5rem; 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; }
.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: 1rem; padding: clamp(1.25rem, 2vw, 1.5rem); border: 0; border-radius: 12px; background: rgba(255,255,255,.035); transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease; }
.product-function-icon, .product-connection__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--product-icon-color); }
.product-function-icon svg, .product-connection__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); }
/* Compact OR Integration: content sets the height, with no media column. */
.product-setup {
  container: product-setup / inline-size;
  padding: calc(clamp(2.5rem, 4vw, 3.5rem) + .5rem) var(--page-gutter);
  color: white;
  background: linear-gradient(125deg, #013d7c 0%, #124f88 100%);
}
.product-setup__layout { width: 100%; max-width: var(--content-max); }
.product-setup__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  min-width: 0;
}
.product-setup__copy > .eyebrow { grid-column: 1 / -1; }
.product-setup .product-heading { grid-column: 1; }
.product-setup .product-heading h2 {
  max-width: 22ch;
  margin: 0;
  color: white;
  font-size: clamp(2rem, 2.6vw, 2.625rem);
  line-height: 1.14;
}
.product-setup .eyebrow { color: var(--highlight-yellow); }
.product-setup .eyebrow::after { background: currentColor; }
.product-connections { display: grid; grid-column: 2; gap: 1.75rem; }
.product-connection { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 1rem; align-items: start; }
.product-connection h3 { color: white; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }
.product-connection p { margin-top: .5rem; color: #e2edf7; font-size: 1rem; line-height: 1.6; max-width: 30rem; }
.product-setup .product-heading > .product-setup__note { margin-top: 1.1rem; color: #d9e5f2; font-weight: var(--weight-body); font-size: var(--type-body-small); line-height: var(--leading-body); }
@container product-setup (max-width: 52rem) {
  .product-setup__copy { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .product-connections { grid-column: 1; }
}
@container product-setup (min-width: 36rem) and (max-width: 52rem) {
  .product-connections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}
@container product-setup (max-width: 16rem) {
  .product-connection { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
.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-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-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); }
}
/* September review: a thinner functions banner. */
.product-functions { padding-block: 2.25rem; }
.product-functions__layout { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; }
.product-functions .product-heading { margin: 0; }
.product-functions .product-heading h2 { font-size: 1.7rem; }
.product-functions .product-heading > p:not(.eyebrow) { font-size: .875rem; }
.product-function-list { gap: 1.25rem 1.5rem; }
.product-function-list p { font-size: .875rem; }
.product-page #device-animation { padding-block: 2.5rem; }
@media (max-width: 900px) { .product-functions__layout { grid-template-columns: 1fr; } }

/* The approved slide supplies the unchanged device image. Live captions stay
   readable, and close-ups replace the full layout as available space shrinks. */
.device-diagram { container: device-diagram / inline-size; margin-top: 2rem; color: #61676d; font-family: var(--font-sans); }
.diagram-source { position: absolute; width: 0; height: 0; overflow: hidden; }
.diagram-wide { display: none; position: relative; aspect-ratio: 1280 / 480; }
.diagram-wide-photo { display: block; width: 100%; height: 100%; }
.diagram-annotation { position: absolute; margin: 0; font-size: clamp(1.0625rem, 1.6cqi, 1.25rem); line-height: 1.3; color: #61676d; }
.diagram-annotation strong, .diagram-feature strong { display: block; font-weight: 700; color: inherit; }
.diagram-annotation strong { font-size: 1.14em; line-height: 1.16; }
/* Keep callout lines clear of wrapped desktop captions. */
.diagram-annotation:nth-of-type(-n + 4) { background: var(--paper); padding-bottom: .5rem; }
.diagram-annotation span, .diagram-feature p > span { display: block; margin-top: .3em; }
.diagram-a1 { left: 5.625%; top: 4%; width: 25.5%; }
.diagram-a2 { left: 33.5156%; top: 4%; width: 14%; }
.diagram-a3 { left: 48.0469%; top: 4%; width: 23.35%; }
.diagram-a4 { left: 73.9844%; top: 4%; width: 21.8%; }
.diagram-a5 { left: 5.625%; top: 76%; width: 51%; }
.diagram-a6 { left: 60.1563%; top: 76%; width: 35.625%; }
.diagram-details { display: grid; gap: 1.5rem; }
.diagram-detail { min-width: 0; padding: clamp(16px, 2.5cqi, 1.75rem); border-radius: 16px; background: #f5f7fa; }
.diagram-detail h3 { margin: 0 0 1.25rem; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--primary-blue); }
.diagram-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.diagram-detail-media { min-width: 0; background: white; border-radius: 10px; overflow: hidden; }
.diagram-detail-photo { display: block; width: 100%; max-width: 25rem; height: auto; max-height: 18rem; margin: 0 auto; }
.diagram-marker circle { fill: white; stroke: #818896; stroke-width: 1.5; }
.diagram-marker text { font-family: var(--font-sans); font-size: 24px; fill: var(--primary-blue); text-anchor: middle; font-weight: 600; }
.diagram-detail-copy { display: grid; gap: 1.5rem; min-width: 0; }
.diagram-feature { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); gap: .625rem; align-items: start; }
.diagram-number { display: grid; place-items: center; width: 1.625rem; height: 1.625rem; border: 1px solid #818896; border-radius: 50%; background: white; color: var(--primary-blue); font-size: .875rem; font-weight: 600; line-height: 1; margin-top: .05rem; }
.diagram-feature p { margin: 0; font-size: 1rem; line-height: 1.5; color: #61676d; }
.diagram-feature strong { font-size: 1.0625rem; line-height: 1.3; }
@media (max-width: 640px) {
 .product-controls { padding-inline: 20px; }
}
@container device-diagram (max-width: 15rem) {
 .diagram-feature { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
@container device-diagram (min-width: 40rem) {
 .diagram-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
}
@container device-diagram (min-width: 60rem) {
 .diagram-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
 .diagram-detail { padding: 1.25rem; }
 .diagram-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
 .diagram-detail-photo { height: 15rem; }
}
/* Keep the full annotated device on desktop; use close-ups at tablet widths. */
@media (min-width: 1025px) {
 /* Text enlargement needs the same reflowing cards as a narrow screen. */
 @container device-diagram (min-width: 57rem) {
  .diagram-wide { display: block; }
  .diagram-narrow { display: none; }
 }
}
@media print {
 .diagram-wide { display: none; }
 .diagram-narrow { display: block; }
 .diagram-details, .diagram-detail-grid { grid-template-columns: minmax(0, 1fr); }
 .diagram-detail { break-inside: avoid; }
}

/* Keep this page reflowing when readers enlarge text, including the shared
   navigation and long words in the sections surrounding the diagram. */
.product-page .site-nav { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.product-page main :is(h2, h3, p),
.product-page .product-facts :is(th, td),
.product-page .site-footer { overflow-wrap: anywhere; }
.product-page .explainer-section__copy h2 { min-width: 0; max-width: 100%; }
.product-functions__layout > *, .product-function-list article > div { min-width: 0; }
.product-function-list article { grid-template-columns: 32px minmax(0, 1fr); }
.product-page .site-footer__nav,
.product-page .site-footer__nav :is(h2, a),
.product-page .site-footer__bottom > * { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
 .product-page .site-footer__nav[aria-label="Legal links"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Localize the lighter gray edit to the hero suction button; preserve the original device elsewhere. */
.product-hero__media .hero-button-color { clip-path: polygon(71.76% 29.13%, 72.18% 28.02%, 73.14% 27.02%, 74.15% 26.69%, 75.04% 27.24%, 75.66% 28.33%, 75.53% 29.54%, 74.59% 30.75%, 73.23% 31.85%, 72.43% 31.55%, 71.96% 30.44%); filter: brightness(1.18); }

/* Product reverses the shared photo panel: copy left, framed image right. */
.product-page #demo .demo-layout { grid-column: 1; grid-row: 1; }
.product-page #demo .demo-media { grid-column: 2; grid-row: 1; }
@media (max-width: 56rem) {
  .product-page #demo .demo-layout { grid-column: 1; grid-row: 1; }
  .product-page #demo .demo-media { grid-column: 1; grid-row: 2; }
}