/* Site layer: tokens and a few glue rules only. Everything else is the vendored JSTOV design system (noir theme). */
:root {
  --nqf-amethyst: #7b3fe4;
  --nqf-glow: #cfb2ff;
}
::selection { background: color-mix(in srgb, var(--nqf-amethyst) 55%, transparent); color: #fff; }
:focus-visible { outline-color: var(--nqf-glow); }
.nqf-trace { fill: var(--nqf-glow); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nqf-amethyst) 80%, transparent)); }
.ds-marketing-nav__mark.nqf-trace, .ds-footer__mark.nqf-trace { block-size: 1.6em; inline-size: auto; aspect-ratio: 190 / 240; }
.nqf-photo { object-position: 50% 72%; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.nqf-trace-stage { display: grid; place-items: center; min-block-size: 22rem; padding: var(--ds-space-8); background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--nqf-amethyst) 28%, transparent), transparent 70%); }
.nqf-trace-big { block-size: 18rem; inline-size: auto; aspect-ratio: 190 / 240; filter: drop-shadow(0 0 14px var(--nqf-amethyst)); }
.nqf-open { padding-block: var(--ds-space-16, 5rem); }
.nqf-rules { list-style: none; margin: var(--ds-space-8) 0 0; padding: 0; display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
#products .ds-feature-showcase-group[data-layout] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { #products .ds-feature-showcase-group[data-layout] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #products .ds-feature-showcase-group[data-layout] { grid-template-columns: minmax(0, 1fr); } }
#personas, #about, #products { margin-block-start: var(--ds-space-12, 3rem); }
.ds-marketing-nav__mark.nqf-trace, .ds-footer__mark.nqf-trace { block-size: 2rem; }

/* home persona card: the square portrait fills the whole frame, face kept in view at any frame height */
.ds-feature-showcase__frame > .nqf-photo--fill { flex: 1 1 0; block-size: 0; aspect-ratio: auto; min-block-size: 0; object-position: 50% 55%; }
