/* Product family extension. No TV hero, screen, scene or motion selectors. */
.desktop-nav { gap: 20px; }
.cp-navigation { gap: 20px; }
.desktop-nav > a, .cp-navigation > a { white-space: nowrap; }
.nav-links { flex-wrap: wrap; row-gap: 4px; }
.product-family { padding-block: 70px 82px; }
.product-family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.product-family-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 34px; border: 1px solid #344760; border-radius: 16px; background: radial-gradient(ellipse at 100% 0,#184d602e,transparent 72%),#0d1725; }
.product-family-mobile { background: radial-gradient(ellipse at 100% 0,#6950903b,transparent 75%),#0d1725; }
.product-family-label { font-size: 10px; letter-spacing: .15em; color: #a6c9dc; }
.product-family-card h3 { margin: 20px 0 10px; font-size: clamp(24px,2.4vw,32px); line-height: 1.2; letter-spacing: -.03em; }
.product-family-card p { max-width: 430px; margin-block: 18px 24px; color: #b9c8da; font-size: 15px; line-height: 1.8; }
.product-family-card .cp-text-link { margin-top: auto; }
.product-development { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; border: 1px solid #8068a1; border-radius: 20px; background: #251d3a; color: #dfd0ff; font-size: 12px; font-weight: 600; line-height: 1.4; }
.mobile-product { --mobile-line: #34475e; }
.mobile-product .mobile-introduction { padding-block: 64px 44px; max-width: 900px; }
.mobile-introduction h1 { margin-bottom: 22px; font-size: clamp(38px,4.6vw,64px); }
.mobile-introduction .cp-lead { max-width: 700px; }
.mobile-device-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 27px 22px; }
.mobile-device-nav a { display: inline-flex; align-items: center; gap: 22px; min-height: 48px; padding: 10px 20px; border: 1px solid #617591; border-radius: 8px; color: #dce9f8; background: #101c2b; font-size: 14px; }
.mobile-device-nav a:hover { color: #6ce5ef; border-color: #6ce5ef; }
.mobile-capture-note { max-width: 740px; font-size: 13px; line-height: 1.8; color: #aabdd1; }
.mobile-phone-section { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 76px; padding-block: 54px 75px; border-top: 1px solid var(--mobile-line); }
.mobile-product h2 { font-size: clamp(29px,3.1vw,43px); line-height: 1.16; letter-spacing: -.035em; }
.mobile-device-copy > p:not(.cp-eyebrow), .mobile-tablet-heading > p { margin-top: 22px; color: #bdcbdc; line-height: 1.85; font-size: 16px; max-width: 520px; }
.mobile-device-copy > .mobile-device-detail { color: #a8b9cd; font-size: 13px; }
.mobile-device-copy .cp-text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 14px; margin-top: 24px; }
.mobile-capture-frame { padding: 10px; border: 1px solid #47576f; border-radius: 20px; background: #070d18; box-shadow: 0 20px 65px #0004; }
.mobile-capture-frame img { display: block; width: 100%; height: auto; }
.mobile-product figure { margin: 0; min-width: 0; }
.mobile-product figcaption { margin-top: 15px; font-size: 12px; color: #aabdd1; line-height: 1.7; }
.mobile-phone-capture { width: min(100%,300px); justify-self: center; }
.mobile-tablet-section { padding-block: 62px 72px; border-top: 1px solid var(--mobile-line); }
.mobile-tablet-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 34px; }
.mobile-tablet-heading > p { margin: 0; }
.mobile-tablet-wide .mobile-capture-frame { padding: 9px; border-radius: 14px; }
.mobile-capture-zoom { display: block; color: #d5e6fa; }
.mobile-image-zoom-label { display: flex; justify-content: space-between; gap: 16px; padding: 13px 5px 4px; font-size: 13px; line-height: 1.6; }
.mobile-capture-zoom:hover .mobile-image-zoom-label { color: #6ce5ef; }
.mobile-capture-zoom:focus-visible { outline: 2px solid #6ce5ef; outline-offset: 5px; }
.mobile-zoom-help { margin: 0 0 24px; max-width: 740px; color: #aabdd1; font-size: 13px; line-height: 1.8; }
.mobile-tablet-portrait { display: grid; grid-template-columns: 1fr 280px; gap: 85px; align-items: center; padding: 44px; margin-top: 36px; background: radial-gradient(ellipse at 0 100%,#24345350,transparent 70%),#0c1421; border: 1px solid var(--mobile-line); border-radius: 16px; }
.mobile-tablet-portrait h3 { margin: 0; font-size: 30px; line-height: 1.2; }
.mobile-tablet-portrait figure { width: 100%; }
.mobile-family-return { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding-block: 44px 64px; border-top: 1px solid var(--mobile-line); }
.mobile-family-return h2 { font-size: 29px; }
.mobile-family-return p:not(.cp-eyebrow) { margin-top: 14px; font-size: 14px; }
.mobile-family-return > a { flex-shrink: 0; }
@media (min-width:1051px) {
  .mobile-phone-section { grid-template-columns: 1fr 1fr; gap: 64px; }
  .mobile-phone-capture { width: min(100%,360px); }
}
@media (min-width:1051px) and (max-width:1250px) {
  .desktop-nav, .cp-navigation { gap: 12px; font-size: 12px; }
  .site-header .header-actions { gap: 10px; }
  .site-header .header-actions .button.small { padding-inline: 10px; }
}
@media (max-width:1050px) {
  .product-family { padding-block: 48px 58px; }
  .mobile-phone-section { gap: 32px; }
  .mobile-tablet-heading { gap: 30px; }
  .mobile-tablet-portrait { gap: 36px; grid-template-columns: 1fr 230px; padding: 28px; }
}
@media (max-width:680px) {
  .product-family-grid { grid-template-columns: 1fr; gap: 18px; }
  .product-family { padding-block: 35px 44px; }
  .product-family-card { padding: 25px; }
  .mobile-product .mobile-introduction { padding-block: 40px 34px; }
  .mobile-introduction h1 { font-size: clamp(35px,9.8vw,48px); }
  .mobile-capture-note { font-size: 12px; }
  .mobile-phone-section { grid-template-columns: 1fr; gap: 34px; padding-block: 37px 48px; }
  .mobile-phone-capture { width: min(100%,276px); }
  .mobile-tablet-section { padding-block: 42px 48px; }
  .mobile-tablet-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 27px; }
  .mobile-device-copy > p:not(.cp-eyebrow), .mobile-tablet-heading > p { font-size: 14px; }
  .mobile-tablet-portrait { grid-template-columns: 1fr; padding: 24px; gap: 28px; }
  .mobile-tablet-portrait figure { width: min(100%,260px); justify-self: center; }
  .mobile-family-return { flex-direction: column; align-items: flex-start; padding-block: 34px 48px; gap: 24px; }
}