/* Shared Audio over IP design system. Same self-hosted face as the brand homepage. */
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('/assets/fonts/sora-latin.woff2') format('woff2');
}
.product-audio-transport {
  --display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --bg: #0c0e12; --maxw: 1380px; --muted: #a0abba; --faint: #8995a5;
  --accent: #8faed5; --accent-bright: #b2c9e6; --card: #ffffff03;
}
.product-audio-transport::before { opacity: .018; }
.product-audio-transport .site-header { background: #0c0e12e8; border-bottom: 1px solid #ffffff12; }
.product-audio-transport .brand-wm { font-family: var(--display); letter-spacing: 0; }
.product-audio-transport h1, .product-audio-transport h2 { font-weight: 650; letter-spacing: -.035em; line-height: 1.12; }
.product-audio-transport h3 { font-weight: 600; letter-spacing: -.025em; }
.product-audio-transport .eyebrow { font-family: var(--body); font-weight: 500; letter-spacing: .11em; color: #9dacc0; }
.product-audio-transport .btn { font-family: var(--display); font-size: .8rem; font-weight: 600; border-radius: 5px; }
.product-audio-transport .btn-primary { color: #18212c; background: #e3ebf5; border-color: #e3ebf5; box-shadow: none; }
.product-audio-transport .btn-primary:hover { background: #fff; }
.product-audio-transport .btn-ghost { border-color: #ffffff28; background: transparent; }
.product-audio-transport .section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.product-audio-transport .section-head { max-width: 48rem; }
.product-audio-transport .section-head h2 { font-size: clamp(2rem, 4vw, 3.45rem); }
.product-audio-transport .section-head p { max-width: 48ch; font-size: 1.08rem; }
.transport-hero { padding-top: clamp(3rem, 6vw, 5.5rem); background: radial-gradient(ellipse at 60% 60%, #23395155, transparent 65%); }
.transport-hero-copy { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: 3.5rem; }
.transport-hero h1 { font-size: clamp(3rem, 5.5vw, 5rem); margin-top: 1rem; }
.transport-hero h1 span { display: block; color: #8faed5; font-size: .66em; margin-top: .4em; }
.transport-hero .hero-sub { margin: 0; max-width: none; color: #c9d1de; font-size: 1.12rem; }
.transport-hero .hero-sub a { color: var(--link-color); }
.transport-hero .hero-cta { justify-content: flex-start; margin-top: 1.65rem; }
.transport-hero .hero-trust { justify-content: flex-start; margin-top: 1.4rem; gap: .35rem 1.2rem; font-size: .75rem; padding: 0; }
.transport-hero .hero-trust li::before { width: 4px; height: 4px; box-shadow: none; }
.product-film { min-width: 0; margin: 0; }
.product-film-frame { position: relative; overflow: hidden; border: 1px solid #ffffff30; border-radius: 12px; background: #1f2023; box-shadow: 0 35px 75px -40px #000; }
.product-film-frame img { display: block; width: 100%; height: auto; }
.product-film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.product-film-frame video.has-frame { opacity: 1; }
.product-film-brand { position: absolute; z-index: 2; left: .77%; top: 4.38%; width: 2.6%; aspect-ratio: 1; background: #1f2023 url('/assets/brand-mark-128.png') center / 94% no-repeat; }
.product-film--receive .product-film-brand { left: .85%; width: 2.84%; }
.product-film figcaption { color: #99a7b8; margin-top: 1rem; font-size: .74rem; }
.transport-highlights { padding: 2rem 0 2.5rem; margin: 2rem 0 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; border-block: 1px solid #ffffff18; }
.transport-highlights li { display: grid; align-content: start; gap: .5rem; }
.transport-highlights span { font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; color: #8995a5; }
.transport-highlights strong { font-family: var(--display); font-size: 1rem; font-weight: 500; }
.transport-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.product-audio-transport .intro h2 { font-size: clamp(2rem, 4vw, 3.45rem); max-width: 19ch; }
.product-audio-transport .intro p { margin: 0; max-width: none; }
.transport-showcase { background: radial-gradient(ellipse at 20% 65%, #23395145, transparent 70%); }
.transport-receive-story { display: grid; grid-template-columns: 1.9fr 1fr; align-items: center; gap: 3rem; }
.transport-receive-copy h3 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.2; margin: .8rem 0 1rem; }
.transport-receive-copy p { color: var(--muted); }
.transport-text-link { display: inline-flex; gap: 1rem; color: var(--accent-bright); margin-top: 1.5rem; }
.transport-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.transport-resource-grid > * { min-width: 0; padding-block: 1.5rem; border-top: 1px solid #ffffff25; }
.transport-resource-grid h3, .transport-resource-grid strong { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: #dde6f1; }
.transport-resource-grid p, .transport-resource-grid span { display: block; margin-top: 1rem; color: #aebdce; line-height: 1.75; }
.transport-resource-grid > a:hover strong, .transport-resource-grid a.transport-text-link:hover { color: #fff; }
.transport-use-cases { border-bottom: 1px solid #ffffff12; }
@media (max-width: 800px) { .transport-resource-grid { grid-template-columns: 1fr; gap: .5rem; } }
.product-audio-transport #features, .product-audio-transport #pricing, .product-audio-transport #why { border-top: 1px solid #ffffff12; }
.product-audio-transport .feature-card { padding: 1.8rem; background: #161b23; border: 1px solid #ffffff16; border-radius: 12px; }
.product-audio-transport .feature-icon { background: transparent; border: 0; border-radius: 0; place-content: start; height: 28px; margin-bottom: 1.5rem; }
.product-audio-transport .feature-card:hover, .product-audio-transport .price-card:hover { transform: none; }
.product-audio-transport .feature-list li { font-size: .91rem; }
.product-audio-transport .feature-card { min-width: 0; }
.product-audio-transport .step { background: transparent; border: 0; border-top: 1px solid #ffffff25; border-radius: 0; padding: 1.5rem 0; }
.product-audio-transport .step .n { font-family: var(--display); color: #8faed5; font-size: 1.4rem; }
.product-audio-transport .price-card { background: #151a22; border-color: #ffffff1c; border-radius: 12px; padding: 1.5rem; }
.product-audio-transport .price-card.featured { background: #1b2635; border-color: #8faed580; box-shadow: none; }
.product-audio-transport .price-badge { background: #b2c9e6; font-family: var(--body); letter-spacing: .05em; }
.product-audio-transport .price-amount { font-weight: 600; font-size: 2.35rem; }
.product-audio-transport .why-item { background: transparent; border: 0; border-top: 1px solid #ffffff22; border-radius: 0; padding: 1.5rem 0; }
.product-audio-transport .why-grid { gap: 2rem 4rem; }
.product-audio-transport .demo-card { background: radial-gradient(ellipse at 50% 100%, #32486560, transparent 75%), #11161e; border-color: #ffffff25; border-radius: 14px; padding-block: 4rem; }
.product-audio-transport .demo-card h2, .product-audio-transport .final h2 { font-size: clamp(2rem, 4vw, 3.45rem); }
.product-audio-transport .faq-item { border-radius: 0; background: transparent; border: 0; border-top: 1px solid #ffffff22; padding: 1.5rem 0; }
.product-audio-transport .faq-list { gap: 2rem 4rem; }
.product-audio-transport .site-footer { background: #0c0e12; }
.product-audio-transport .final {
  isolation: isolate;
  background: radial-gradient(ellipse 65% 85% at 50% 60%, #5079ad26 0%, #253a5712 48%, transparent 78%);
}
.product-audio-transport .final::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, #a4c5ef24, transparent);
  pointer-events: none;
}
.product-audio-transport .live-product-card { position: relative; isolation: isolate; }
.product-audio-transport .live-product-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(ellipse at var(--card-x, 50%) var(--card-y, 25%), #b2c9e619, transparent 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .product-audio-transport .product-arriving { animation: product-arrive .85s cubic-bezier(.2,.7,.2,1) var(--arrival-delay, 0ms) both; }
  .product-audio-transport .product-copy-reveal.product-arriving { animation: none; }
  .product-audio-transport .product-copy-reveal.product-arriving > * {
    animation: product-copy-arrive .8s cubic-bezier(.2,.7,.2,1) calc(var(--copy-order, 0) * 95ms) both;
  }
  .product-audio-transport .product-motion-paused .product-arriving,
  .product-audio-transport .product-motion-paused .product-arriving > * { animation-play-state: paused; }
  @keyframes product-arrive { from { opacity: .25; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes product-copy-arrive { from { opacity: .15; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @media (hover: hover) and (pointer: fine) {
    .product-audio-transport .live-product-card {
      transition: transform .28s ease-out, border-color .3s, box-shadow .3s;
    }
    .product-audio-transport .live-product-card::after { transition: opacity .3s; }
    .product-audio-transport .live-product-card.card-tracking {
      transform: perspective(1000px) translateY(-4px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
      border-color: #b2c9e680; box-shadow: 0 22px 40px -25px #000d, 0 0 0 1px #b2c9e612;
    }
    .product-audio-transport .live-product-card.card-tracking::after { opacity: 1; }
  }
  @media (max-width: 759px) {
    .product-audio-transport .product-arriving { animation-duration: .55s; animation-delay: 0ms; }
    .product-audio-transport .product-copy-reveal.product-arriving > * { animation-duration: .55s; animation-delay: calc(var(--copy-order, 0) * 60ms); }
  }
}
@media (prefers-reduced-motion: reduce) { .product-film video { display: none; } }
@media (max-width: 1100px) {
  .product-audio-transport .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-audio-transport .feature-card:last-child { grid-column: 1 / -1; }
  .transport-hero-copy { gap: 2rem; }
  .transport-hero h1 { font-size: 3.2rem; }
  .transport-receive-story { grid-template-columns: 1.6fr 1fr; gap: 2rem; }
  .product-audio-transport .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transport-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .transport-hero-copy, .transport-editorial, .transport-receive-story { grid-template-columns: 1fr; gap: 2rem; }
  .transport-hero h1 { font-size: clamp(2.65rem, 10vw, 4rem); }
  .transport-hero .hero-sub { font-size: 1rem; }
  .transport-hero-copy { margin-bottom: 2.5rem; }
  .product-audio-transport .feature-grid, .product-audio-transport .steps { grid-template-columns: 1fr; }
  .product-audio-transport .section { padding-block: 3.2rem; }
  .product-audio-transport .feature-card { padding: 1.4rem; }
  .product-film-frame { border-radius: 6px; }
  .product-film figcaption { font-size: .65rem; }
  .transport-highlights { gap: 1.5rem 1rem; }
  .transport-highlights strong { font-size: .8rem; }
}
@media (max-width: 479px) { .product-audio-transport .price-grid { grid-template-columns: 1fr; } }