/* Desktop concept layer. The approved phone/tablet presentation is unchanged. */
.desktop-detail { display: none; }
.nav .desktop-detail { display: none; }

@media (min-width: 1101px) {
  :root {
    --content: 1280px;
    --gutter: 48px;
    --signature-midnight: #0a1321;
    --signature-frame: #17253a;
    --signature-blue: #299cf0;
    --signature-action: #0066b1;
    --signature-steel: #b8c8da;
    --signature-rule: #b8c8da24;
    --blue: var(--signature-action);
  }

  /* Navigation aligns with the composition; no added floating controls. */
  .header { background: #101b2df7; border-bottom-color: #b8c8da19; }
  .header .wrap { min-height: 80px; gap: 34px; }
  .header .wordmark { font-size: 25px; }
  .header .wordmark small { font-size: 10px; letter-spacing: 5.5px; color: var(--signature-blue); }
  .nav { margin-left: auto; gap: 30px; font-size: 14px; }
  .nav a { color: #c5d2e0; }
  .nav .desktop-detail { display: inline-flex; }
  .nav a:hover, .nav a[aria-current=page] { color: white; }
  .nav [aria-current=page] { border-bottom-color: var(--signature-blue); }
  .nav-cta { font-size: 14px; padding: 13px 19px; border-radius: 3px; border-color: #b8c8da40; background: #ffffff02; }
  .nav-cta:hover { border-color: var(--signature-blue); }

  /* The same quiet blue illumination and hairline rhythm as the preferred
     Design reference: a detailed setting, not a competing graphic. */
  .product-hero {
    position: relative;
    isolation: isolate;
    padding: 72px 0 0;
    background: radial-gradient(ellipse at 72% 37%, #173858 0%, #0a132100 50%), var(--signature-midnight);
  }
  .product-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, #b8c8da0a 1px, transparent 1px);
    background-size: 160px 100%;
    background-position: center;
    mask-image: linear-gradient(90deg, transparent 8%, black 48%, transparent 94%);
  }
  .product-layout {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    grid-template-areas: 'heading picture' 'offer picture';
    column-gap: 74px;
    row-gap: 29px;
    align-items: start;
  }
  .product-heading { align-self: start; }
  .desktop-detail { display: block; }
  .mobile-headline, .mobile-intro { display: none; }
  .signature-label, .fleet-hero .audience-label {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 13px;
    font-weight: 500;
    color: #bdd0e4;
    letter-spacing: .4px;
    margin: 0 0 26px;
  }
  .signature-label > span { width: 30px; height: 2px; background: var(--signature-blue); box-shadow: 8px 5px 0 #299cf055; }
  .product-heading h1 {
    font-size: clamp(66px, 5.8vw, 84px);
    line-height: .99;
    letter-spacing: -4.2px;
    font-weight: 800;
  }
  .signature-headline > span, .host-connection { color: var(--signature-blue); }
  .signature-intro, .fleet-hero .product-intro { font-size: 21px; line-height: 1.5; color: white; margin: 27px 0 0; max-width: 500px; }
  .signature-description { font-size: 16px; line-height: 1.8; color: var(--signature-steel); margin-top: 16px; }
  .product-offer { display: flex; flex-direction: column; }
  .brand-promise { display: none; }
  .product-actions { order: -1; margin: 0 0 30px; gap: 24px; flex-wrap: nowrap; }
  .product-actions .btn { min-width: 198px; min-height: 55px; font-size: 15px; padding-inline: 22px; border-radius: 3px; }
  .product-actions .text-link { font-size: 13px; gap: 12px; white-space: nowrap; text-decoration: none; }
  .product-actions .text-link:hover { text-decoration: underline; }
  .starting-prices { gap: 24px; padding: 21px 0 4px; border-bottom: 0; border-color: var(--signature-rule); }
  .starting-prices > div + div { padding-left: 24px; border-color: var(--signature-rule); }
  .starting-prices dt { font-size: 14px; color: #cbd8e6; margin-bottom: 9px; }
  .starting-prices dd { gap: 10px; }
  .starting-prices dd span { font-size: 12px; color: var(--signature-steel); }
  .starting-prices strong { font-size: 36px; font-weight: 700; letter-spacing: -1.3px; color: white; }
  .price-note { font-size: 11px; color: #9eb3c8; margin-top: 15px; }

  /* A fitted frame around the real photograph. Image pixels stay unaltered. */
  .product-image {
    position: relative;
    overflow: visible;
    border: 1px solid #90abc431;
    border-radius: 0;
    background: var(--signature-frame);
    box-shadow: 0 28px 70px #00000026;
  }
  .product-image::before, .product-image::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 38px;
    height: 19px;
    border: solid #53a0d6;
  }
  .product-image::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
  .product-image::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
  .photo-masthead { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; color: #b7cada; font-size: 12px; letter-spacing: .35px; }
  .photo-masthead svg, .caption-icon, .photo-caption-link svg, .hero-services svg { width: 22px; height: 22px; fill: none; stroke: #53a0d6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .product-image img { height: auto; aspect-ratio: 1348 / 889; object-fit: cover; object-position: 50% 0; }
  .fleet-hero .product-image img { aspect-ratio: 3 / 2; }
  .product-image figcaption { display: flex; align-items: center; gap: 16px; padding: 23px 22px; color: #e3ebf4; }
  .photo-caption-title { display: block; font-size: 15px; font-weight: 500; }
  .photo-caption-support { margin-top: 5px; color: #9fb4ca; font-size: 12px; }
  .photo-caption-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid #9eb3c833; border-radius: 2px; }
  .photo-caption-link:hover { border-color: #53a0d6; background: #ffffff04; }
  .hero-services { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 61px; padding-block: 25px 27px; border-top: 1px solid var(--signature-rule); }
  .hero-services > span { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #bfccdc; }
  .hero-services svg { width: 19px; height: 19px; }

  /* A measured continuation below the hero: larger type, matching alignment,
     and product details separated from the price/action row. */
  .brands { padding-block: 27px 29px; background: #f5f7fa; }
  .brand-strip-label { font-size: 13px; margin-bottom: 20px; }
  .brand-logo { height: 55px; }
  .section { padding-block: 96px; }
  h2 { font-size: 50px; line-height: 1.08; letter-spacing: -2px; }
  .section-head { gap: 70px; margin-bottom: 42px; }
  .section-head > p { max-width: 380px; font-size: 16px; line-height: 1.8; }
  .upgrade-options { gap: 32px; }
  .upgrade-option { border-radius: 3px; background: white; border: 1px solid #dce3eb; }
  .upgrade-option > img { height: auto; }
  .option-copy { padding: 29px 30px 24px; }
  .option-copy h3 { font-size: 26px; }
  .option-copy > p { font-size: 16px; line-height: 1.7; margin-top: 13px; }
  .option-bottom { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; }
  .option-price { font-size: 14px; }
  .option-price strong { font-size: 29px; }
  .included-strip { padding-block: 28px; }
  .included-strip p { font-size: 15px; }
  .fleet-invitation { padding-block: 45px; }
  .fleet-invitation h2 { font-size: 32px; }
  .installation-heading h3 { font-size: 26px; }
  .form-title { font-size: 25px; }
}

@media (min-width: 1101px) and (max-width: 1279px) {
  .product-layout { column-gap: 42px; }
  .product-hero { padding-top: 56px; }
  .product-actions { gap: 16px; flex-wrap: wrap; }
  .signature-intro, .fleet-hero .product-intro { font-size: 19px; }
  .product-heading h1 { letter-spacing: -3.2px; }
  .hero-services { gap: 16px; }
  .hero-services > span { font-size: 12px; gap: 8px; }
  .starting-prices strong { font-size: 32px; }
  .photo-masthead { padding-inline: 17px; }
  .product-image figcaption { padding: 19px 17px; }
  .caption-icon { display: none; }
}

@media (min-width: 1600px) {
  .product-hero { padding-top: 88px; }
  .hero-services { margin-top: 70px; }
}

@media (min-width: 1101px) and (max-height: 800px) {
  .product-hero { padding-top: 42px; }
  .product-layout { row-gap: 23px; }
  .product-heading h1 { font-size: 74px; }
  .signature-label, .fleet-hero .audience-label { margin-bottom: 20px; }
  .signature-intro, .fleet-hero .product-intro { margin-top: 20px; }
  .signature-description { margin-top: 10px; }
  .product-actions { margin-bottom: 22px; }
  .hero-services { margin-top: 35px; padding-block: 22px; }
}