/* Pixel for the original GenUI demos (Dunja, 31 Oct 2026: these sections
   still read as the old brand). Loaded after the demos' own stylesheets
   (the cruise concept's exp.css, the guide's demos.css), so equal
   specificity wins by order; the !important ones answer carve rules that
   carry their own. The screens inside the devices are never touched: only
   the frames, grounds and chrome around them.

   - The stage: the GenUI family's dark purple texture (<vgv-pixels>, built
     in on arrival), never a photo, gradient or glow (UI showcase rules).
   - Devices lose their hardware: no laptop base, bezels, camera, stand,
     remote or phone island; each screen keeps only its display radius.
   - Nobody picks a surface or a guest any more: the pickers are hidden or
     shown as quiet labels, and src/scripts/genui-autoplay.ts hands over on
     a clock, with a pause button (.gx-play) in the stage.
   - Square corners and flat fills everywhere else (D380, D391). */

:root {
  --gx-100: #EDDAFF;
  --gx-200: #9261FE;
  --gx-300: #341C6A;
  --gx-navy: #020F30;
  --gx-grey: #6A7182;
  --gx-tint: #F6F7FC;
  --gx-rule: #DCDFE7;
}

/* ── Shared: the texture stage and its pause button ───────────────── */
.gx-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gx-300);
}
.gx-stage > .gx-px {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gx-play {
  position: absolute;
  z-index: 6;
  right: 1rem;
  top: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--gx-100);
  color: var(--gx-300);
  cursor: pointer;
}
.gx-play svg {
  width: 1.125rem;
  height: 1.125rem;
}
.gx-play:hover {
  background: color-mix(in srgb, var(--gx-navy) 8%, var(--gx-100));
}
.gx-play:focus-visible {
  outline: 2px solid var(--gx-100);
  outline-offset: 2px;
}

/* ── "The phone is one surface" (#clShift, cruise + guide) ─────────── */
/* No surface picker: the surfaces take turns on their own. */
#clShift .cd-devtoggle-wrap,
#clShift .v3-control:has(.cd-devtoggle-wrap),
#clShift .cd-arrow,
#clShift .cd-disclaimer {
  display: none !important;
}
#clShift .cd-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: none;
  height: clamp(26rem, 56vw, 44rem);
  min-height: 0 !important;
  margin: 2.5rem 0 0 !important;
  padding: 3rem 1.5rem 0;
  box-sizing: border-box;
  place-items: start center !important;
  align-items: start !important;
  background: var(--gx-300);
  border-radius: 0;
}
@media (max-width: 47.999rem) {
  /* The screen runs the full width here, so it starts under the pause
     button, not behind it. */
  #clShift .cd-stage {
    height: 24rem;
    padding: 4.5rem 0 0;
  }
}
#clShift .cd-stage > .gx-px {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#clShift .cd-stage > :not(.gx-px):not(.gx-play) {
  position: relative;
  z-index: 1;
}
/* The hardware goes; each surface keeps its own display radius. */
#clShift .cd-base,
#clShift .cd-tab-cam,
#clShift .cd-remote,
#clShift .kit-phone-island,
#clShift .island,
#clShift .phone-side,
#clShift .phone-back {
  display: none !important;
}
#clShift .cd-tv::after,
#clShift .cd-tv-screen::before {
  display: none !important;
}
#clShift .cd-screen {
  border: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: none !important;
}
#clShift .cd-tablet {
  padding: 0 !important;
  background: none !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  overflow: hidden;
}
#clShift .cd-tv,
#clShift .cd-tv-screen {
  filter: none !important;
}
#clShift .cd-tv-screen {
  border: 0 !important;
  box-shadow: none !important;
}
#clShift .kit-phone {
  box-shadow: none !important;
}
#clShift .cd-phone .flipper {
  filter: none !important;
}
#clShift .cd-phone .phone {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
#clShift .cd-phone .flipper .phone::after {
  display: none !important;
}

/* The guest switch stays, flat and square, in the hub's purple. The
   scripts write each person's accent into the picked button inline. */
:is(#clarityHero, .gg-demo) #clShift .cl-vs-toggle {
  gap: 0.5rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg,
:is(#clarityHero, .gg-demo) #clShift .vs-guest {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--gx-tint) !important;
  box-shadow: none !important;
  color: var(--gx-navy) !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg b {
  color: var(--gx-navy) !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg s {
  color: var(--gx-grey) !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg img,
:is(#clarityHero, .gg-demo) #clShift .vs-guest img {
  border-radius: 0 !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg.on,
:is(#clarityHero, .gg-demo) #clShift .vs-guest.on {
  background: var(--gx-100) !important;
  color: var(--gx-300) !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg.on s,
:is(#clarityHero, .gg-demo) #clShift .cl-vsg.on b {
  color: var(--gx-300) !important;
}
:is(#clarityHero, .gg-demo) #clShift .cl-vsg:hover:not(.on) {
  background: color-mix(in srgb, var(--gx-navy) 8%, var(--gx-tint)) !important;
}
#clShift .cd-dev-thumb {
  display: none !important;
}

/* ── "Same data. Different screen." (cruise #clPick) ─────────────── */
/* The white runs straight into the next section, with no navy strip of
   the wrap's bottom padding between them. */
#clarityHero .cl-wrap:has(> #clPick) {
  padding-bottom: 0;
}
/* White, across the whole width (the concept's root is navy under it). */
#clarityHero #clPick {
  background: #ffffff;
  box-shadow: 0 0 0 100vmax #ffffff;
  clip-path: inset(0 -100vmax);
  color: var(--gx-navy);
}
#clarityHero #clPick .cl-sec-h2 {
  color: var(--gx-navy) !important;
}
#clarityHero #clPick .cl-concept-sub {
  color: var(--gx-grey) !important;
}
/* The particle bridge glowed between the cards and the phone. */
#clPartBg,
#clPartFg {
  display: none !important;
}
#clarityHero #clPick .cl-label {
  margin: 0 0 1rem;
  font: 600 0.875rem/1.25 var(--v3-mono, "Roboto Mono", monospace);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gx-grey);
}
#clarityHero #clPick .px-pick__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 62rem) {
  #clarityHero #clPick .px-pick__top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.5rem;
    align-items: stretch;
  }
}

/* The guests: square tiles on the close's pixel field. Nobody picks:
   they show who the screen is for while it hands over on its own. */
#clarityHero #clPick .cl-glist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}
@media (min-width: 62rem) {
  #clarityHero #clPick .cl-glist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#clarityHero #clPick .cl-tile {
  --px-field: var(--gx-rule);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--gx-tint) !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none;
  cursor: default;
}
#clarityHero #clPick .cl-tile.on {
  --px-field: var(--gx-200);
  background: var(--gx-100) !important;
}
#clarityHero #clPick .cl-tile-img,
#clarityHero #clPick .cl-tile.on .cl-tile-img {
  z-index: 1;
  height: 100%;
  border-radius: 0 !important;
  object-position: 50% 8%;
}
#clarityHero #clPick .cl-tile-img {
  transition: filter 450ms linear;
}
#clarityHero #clPick .cl-who {
  margin-top: 1.5rem;
  gap: 0.25rem 0.75rem;
}
#clarityHero #clPick .cl-who-name {
  font: 500 clamp(1.375rem, 2vw, 1.75rem)/1.2 var(--v3-sans, "Host Grotesk", sans-serif);
  letter-spacing: -0.015em;
  color: var(--gx-navy);
}
#clarityHero #clPick .cl-who-role {
  font: 600 0.875rem/1.25 var(--v3-mono, "Roboto Mono", monospace);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gx-300);
}
#clarityHero #clPick .cl-who-desc {
  max-width: 34rem;
  min-height: 0;
  margin: 0.75rem 0 0;
  font: 400 1.0625rem/1.55 var(--v3-sans, "Host Grotesk", sans-serif);
  color: var(--gx-grey);
}

/* The screen: flat on the texture, upright, cut above its tab bar. */
#clarityHero #clPick .px-pick__stage {
  min-height: 38rem;
}
@media (min-width: 62rem) {
  #clarityHero #clPick .px-pick__stage {
    min-height: 44rem;
  }
}
#clarityHero #clPick .px-pick__stage .cl-phonewrap {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -3.5rem;
  translate: -50% 0;
}
#clarityHero #clPick .flipper {
  filter: none !important;
}
#clarityHero #clPick .flipper .phone {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
#clarityHero #clPick .flipper .phone::after,
#clarityHero #clPick .island,
#clarityHero #clPick .phone-side,
#clarityHero #clPick .phone-back {
  display: none !important;
}
#clarityHero #clPick .cl-badge {
  position: absolute;
  z-index: 3;
  left: 1.25rem;
  top: 1.25rem;
  bottom: auto;
  transform: none;
  padding: 0.375rem 0.625rem;
  border-radius: 0;
  background: var(--gx-100);
  color: var(--gx-300);
  box-shadow: none;
  font: 600 0.875rem/1.25 var(--v3-mono, "Roboto Mono", monospace);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* What it composes from: three plain cards, the definition in view. */
#clarityHero #clPick .px-pick__key {
  margin-top: 4rem;
}
#clarityHero #clPick .cl-divider {
  display: none;
}
#clarityHero #clPick .cl-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  #clarityHero #clPick .cl-inputs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#clarityHero #clPick .cl-incard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0.75rem;
  padding: 1.75rem !important;
  border: 0 !important;
  background: var(--gx-tint);
  box-shadow: none !important;
  transition: background-color 200ms linear;
}
#clarityHero #clPick .cl-incard.lit {
  background: color-mix(in srgb, var(--gx-100) 55%, var(--gx-tint));
}
#clarityHero #clPick .cl-inlabel {
  font: 500 clamp(1.375rem, 2vw, 1.75rem)/1.2 var(--v3-sans, "Host Grotesk", sans-serif);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--gx-navy) !important;
}
#clarityHero #clPick .cl-inlabel i {
  display: none;
}
#clarityHero #clPick .cl-incol {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  min-height: 0;
}
#clarityHero #clPick .cl-indef,
#clarityHero #clPick .cl-incard:hover .cl-indef {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  font: 400 0.9375rem/1.5 var(--v3-sans, "Host Grotesk", sans-serif);
  color: var(--gx-grey);
}
#clarityHero #clPick .cl-indef b {
  font-weight: 500;
  color: var(--gx-navy);
}
#clarityHero #clPick .cl-chips,
#clarityHero #clPick .cl-incard:hover .cl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  opacity: 1;
  transform: none;
}
#clarityHero #clPick .cl-chip {
  display: inline-flex !important;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--gx-100) !important;
  color: var(--gx-300) !important;
  font: 600 0.875rem/1.25 var(--v3-mono, "Roboto Mono", monospace) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
}
#clarityHero #clPick .cl-chip + .cl-chip::before {
  content: none !important;
}