/* Home "What it is" rotating scenes (2026.10.20). See assets/js/de-hk-scenes.js
   --sc is each brand's accent colour, set by the script. It drives the
   headline, logo mark and every UI accent on the laptop and phone
   (avatar, question bubble, next step button, send and search buttons).
   Accents are light, so text on them uses the dark ink --sc-ink. */
.dx-hk .dx-hk-devices { --sc-ink: #1A1416; }
.dx-hk .dx-hk-site > *:not(.dx-hk-browser),
.dx-hk .dx-hk-ph-bar,
.dx-hk .dx-hk-ph-body,
.dx-hk .dx-hk-scene-ind,
.dx-hk .dx-hk-scene-feat { transition: opacity .32s ease, transform .32s ease; }
.dx-hk .dx-hk-devices.is-swapping .dx-hk-site > *:not(.dx-hk-browser),
.dx-hk .dx-hk-devices.is-swapping .dx-hk-ph-bar,
.dx-hk .dx-hk-devices.is-swapping .dx-hk-ph-body,
.dx-hk .dx-hk-scene-cap.is-swapping .dx-hk-scene-ind,
.dx-hk .dx-hk-scene-cap.is-swapping .dx-hk-scene-feat { opacity: 0; }
.dx-hk .dx-hk-devices.is-swapping .dx-hk-ph-body { transform: translateY(6px); }

/* Accent colour per brand: laptop */
html body .dx-hk .dx-hk-devices .dx-hk-sitecopy strong.nw-yellow { color: var(--sc, #E3C860); }
html body .dx-hk .dx-hk-devices .dx-hk-sitehead .nw-logo svg { fill: var(--sc, #E3C860); }
html body .dx-hk .dx-hk-devices .dx-hk-siteask b { background: var(--sc, #E3C860); color: var(--sc-ink); }

/* Accent colour per brand: phone */
html body .dx-hk .dx-hk-devices .dx-hk-ph-bar i { background: var(--sc, #E3C860); color: var(--sc-ink); }
html body .dx-hk .dx-hk-devices .dx-hk-ph-me { background: var(--sc, #E3C860); color: var(--sc-ink); }
html body .dx-hk .dx-hk-devices .dx-hk-ph-next { background: var(--sc, #E3C860); border-color: var(--sc, #E3C860); color: var(--sc-ink); }
html body .dx-hk .dx-hk-devices .dx-hk-ph-input b { background: var(--sc, #E3C860); }
.dx-hk .dx-hk-siteask b, .dx-hk .dx-hk-ph-bar i, .dx-hk .dx-hk-ph-me, .dx-hk .dx-hk-ph-next, .dx-hk .dx-hk-ph-input b {
  transition: background-color .32s ease, color .32s ease, border-color .32s ease;
}

.dx-hk .dx-hk-scene-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  margin: 28px 0 18px;
}
.dx-hk .dx-hk-scene-text { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 26px; }
.dx-hk .dx-hk-scene-ind {
  font-family: var(--dx-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc, var(--dx-mustard));
}
.dx-hk .dx-hk-scene-feat { font-family: var(--dx-sans); font-size: clamp(16px, 1.3vw, 19px); color: var(--dx-cream); }
.dx-hk .dx-hk-scene-dots { display: flex; gap: 8px; }
.dx-hk .dx-hk-scene-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(237, 228, 211, 0.3); transition: width .3s ease, background .3s ease;
}
.dx-hk .dx-hk-scene-dots button.is-on { width: 26px; background: var(--sc, var(--dx-mustard)); }
.dx-hk .dx-hk-scene-dots button:focus-visible { outline: 2px solid var(--dx-cream); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .dx-hk .dx-hk-site > *, .dx-hk .dx-hk-ph-bar, .dx-hk .dx-hk-ph-body { transition: none; }
}