/* Product media: a horizontal contact sheet for local panes, a playable remote demo. */
.main-nav { gap: 1.5rem; }
.main-nav > a { flex-shrink: 0; }
.section-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 1.5rem; font-size: .9rem; font-weight: 600; }
.section-links a:hover { color: #047857; }
.feature-section { padding: 4.5rem 0; border-top: 1px solid #e2e8f0; scroll-margin-top: 5rem; }
.feature-wrap { max-width: 1200px; padding: 0 24px; margin: auto; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.section-heading p { margin-top: .85rem; max-width: 58ch; color: #475569; font-size: 1.1rem; line-height: 1.6; }
.gallery-controls { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.gallery-controls[hidden] { display: none; }
.gallery-controls span { color: #475569; font-size: .875rem; margin-right: .6rem; }
.gallery-controls button { width: 44px; height: 44px; border: 1px solid #cbd5e1; border-radius: 50%; font-size: 1.8rem; line-height: 1; background: #fff; }
.gallery-controls button:hover:enabled { border-color: #047857; color: #047857; }
.gallery-controls button:disabled { opacity: .3; cursor: default; }
.agent-gallery { position: relative; display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 1.25rem; scrollbar-color: #94a3b8 transparent; scrollbar-width: thin; }
.agent-slide { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }
.agent-slide:last-child { margin-right: 14%; }
.agent-slide img { width: 100%; aspect-ratio: 1089 / 821; object-fit: contain; object-position: left center; border-radius: 10px; background: #171717; }
.agent-slide figcaption { padding-top: 1.2rem; max-width: 62ch; }
.agent-slide h3, .remote-copy h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
.agent-slide p { margin-top: .4rem; color: #475569; line-height: 1.65; }
.gallery-hint { font-size: .85rem; color: #64748b; margin-top: .6rem; }
.remote-section { background: #f8fafc; }
.remote-demo video { display: block; width: 100%; height: auto; border-radius: 12px; background: #171717; }
.remote-demo figcaption { font-size: 1.1rem; margin-top: 1.25rem; max-width: 65ch; line-height: 1.6; }
.remote-details { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 5rem; align-items: start; margin-top: 3rem; }
.remote-copy { max-width: 62ch; padding-top: 1rem; }
.remote-copy p { color: #475569; line-height: 1.75; margin-top: .7rem; }
.remote-copy h3:not(:first-child) { margin-top: 2.5rem; }
.remote-copy a { color: #047857; text-decoration: underline; text-underline-offset: 3px; }
.herd-connection img { display: block; width: 100%; height: auto; border-radius: 15px; }
.herd-connection figcaption { color: #64748b; font-size: .8rem; line-height: 1.5; margin-top: .75rem; }
.gallery-controls button:focus-visible, .agent-gallery:focus-visible, .section-links a:focus-visible { outline: 3px solid #10b981; outline-offset: 4px; }
@media (max-width: 640px) {
  .section-links { gap: .75rem; font-size: .75rem; }
  .feature-section { padding: 3rem 0; }
  .feature-wrap { padding: 0 16px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .section-heading p { font-size: 1rem; }
  .agent-gallery { gap: 16px; }
  .agent-slide { flex-basis: 92%; }
  .agent-slide:last-child { margin-right: 8%; }
  .remote-details { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  .herd-connection { max-width: 280px; }
}
@media (prefers-color-scheme: dark) {
  .feature-section { border-color: #334155; }
  .section-heading p, .agent-slide p, .remote-copy p, .gallery-controls span { color: #cbd5e1; }
  .remote-section { background: #0f172a; }
  .gallery-controls button { background: #1e293b; border-color: #64748b; }
  .gallery-hint, .herd-connection figcaption { color: #94a3b8; }
  .remote-copy a, .section-links a:hover { color: #6ee7b7; }
}