/* Production adaptations only: the supplied design owns the layout and palette. */
sc-if, sc-for { display: contents; }
[hidden] { display: none !important; }
#demo { scroll-margin-top: 90px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-on-deep); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 420px) { #demo sc-for > div, #catch sc-for > div { gap: 8px !important; padding: 12px 10px !important; } #demo sc-for > div > span:last-child, #catch sc-for > div > span:last-child { min-width: 0; overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) {
  [style*="animation:dbhit"], [style*="animation:dbcapture"] { display: none !important; }
}

/* Software logos scroll as one continuous, seamless loop. */
.logo-carousel { overflow: hidden; min-width: 0; mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.logo-track { display: flex; width: max-content; animation: logo-scroll 30s linear infinite; }
.logo-group { display: flex; align-items: center; gap: 28px; padding: 10px 28px 10px 0; flex-shrink: 0; }
.logo-group img { display: block; width: 124px; height: 34px; object-fit: contain; }
.logo-carousel:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.context-input, .context-output { min-width: 0 !important; }
@media (max-width: 820px) {
  .context-flow { flex-direction: column; }
  .context-input, .context-output { flex-basis: auto !important; }
  .context-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-carousel { mask-image: none; }
  .logo-track { width: 100%; }
  .logo-group { flex-wrap: wrap; justify-content: center; padding: 10px 0; width: 100%; gap: 20px; }
  .logo-group[aria-hidden="true"] { display: none; }
}
@media (max-width: 820px) {
  .context-flow { flex-wrap: nowrap !important; }
  .context-input, .context-output { width: 100%; max-width: 100%; }
}

.yc-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; font: 600 13px/1.4 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--on-deep-dim); }
.yc-eyebrow:hover { color: var(--on-deep); }
.yc-mark { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; background: #f60; color: #fff; font: 500 17px/1 Archivo, sans-serif; letter-spacing: 0; }

/* September 19 design: bidirectional work flow and dedicated integration cards. */
.integration-logo { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; height: 70px; display: flex; align-items: center; justify-content: center; padding: 12px; min-width: 0; }
.integration-logo img { width: 100%; max-width: 150px; height: 40px; object-fit: contain; }
@supports (animation-timeline: view()) {
  .dbrv { animation: dbreveal linear both; animation-timeline: view(); animation-range: entry 4% entry 40%; }
}
@media (max-width: 540px) {
  .context-exchange > div > div:nth-child(2) { gap: 8px !important; }
  .context-exchange sc-for > div { padding: 9px 7px !important; overflow-wrap: anywhere; }
  .context-exchange sc-for > div > span { font-size: 12px !important; }
  .context-exchange sc-for > div > div { font-size: 12px !important; }
  .context-exchange sc-for > div { gap: 5px !important; }
  .context-exchange > div > div:nth-child(2) > div:nth-child(2) { width: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dbrv { opacity: 1 !important; transform: none !important; }
  [style*="animation:dbmark-bar"], [style*="animation:dbmark-ring"] { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="animation:dbrailpulse"] { visibility: hidden; }
}

/* Closing waveform resolves to a check on a six-second loop. */
@media (prefers-reduced-motion: reduce) {
  [style*="animation:dbmark-check"] { opacity: 1 !important; transform: none !important; }
}

/* Draw the imperfect annotation over .85s, then hold it for the 8s cycle. */
@keyframes dbunder-loop {
  0% { stroke-dashoffset: 320; }
  10.625%, 100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="animation:dbunder-loop"] { stroke-dashoffset: 0 !important; }
}