/* k-hole site, the overview page: stages of real screenshots you can use.
   Motion is opacity and transforms on one curve: quick out of the way, settled at the end. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-swap: cubic-bezier(0.2, 0.7, 0.1, 1);
  --swap: 360ms;
  --bezel: hsl(var(--q-hue) 10% 9%);
}

/* ---- hero ----------------------------------------------------------------------------------- */
.lead {
  position: relative;
  text-align: center;
  padding-top: clamp(36px, 5vw, 72px);
}
.lead__title {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: var(--q-weight-semibold);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.lead__title span {
  display: block;
  color: var(--q-ink-muted);
  font-weight: var(--q-weight-medium);
}
.lead__sub {
  margin: var(--q-space-4) auto 0;
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--q-ink-2);
  text-wrap: pretty;
}
.lead__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-3);
  justify-content: center;
  margin-top: var(--q-space-5);
}

/* ---- a stage: a screen of real screenshots ------------------------------------------------ */
.stage {
  position: relative;
}
.stage__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: clamp(10px, 1.4vw, 18px);
  overflow: hidden;
  background: var(--bezel);
  box-shadow:
    0 0 0 1px hsl(var(--q-hue) 20% 90% / 0.09),
    0 1px 0 0 hsl(var(--q-hue) 30% 96% / 0.08) inset,
    0 40px 80px -30px rgb(0 0 0 / 0.75),
    0 18px 36px -18px rgb(0 0 0 / 0.6);
  isolation: isolate;
}
.stage__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.stage__img {
  opacity: 0;
  transition: opacity var(--swap) var(--ease-swap), transform var(--swap) var(--ease-out);
}
.stage__img.is-on {
  opacity: 1;
  z-index: 1;
}
.stage__img.is-overlay:not(.is-on) {
  transform: scale(1.006);
}
.stage__img.is-on.is-overlay {
  animation: settle var(--swap) var(--ease-out);
}
@keyframes settle {
  from { transform: scale(0.994); }
  to { transform: none; }
}
.stage__hot,
.phone__hot {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.stage__hot .hot,
.phone__hot .hot {
  pointer-events: auto;
}
.hot {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: background var(--q-dur-fast), box-shadow var(--q-dur-fast);
}
.hot:hover {
  background: hsl(var(--q-hue) 30% 96% / 0.06);
  box-shadow: 0 0 0 1px hsl(var(--q-hue) 30% 96% / 0.18);
}
.hot:focus-visible {
  box-shadow: 0 0 0 2px var(--q-accent), 0 0 0 5px hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.25);
}
/* the hint ring: a slow breath on a few hotspots until the first click */
.desk:not(.was-used) .hot.is-hint::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.7);
  animation: breathe 2.6s var(--ease-swap) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0; transform: scale(0.96); }
  45% { opacity: 1; transform: none; }
}

/* ---- the desk: the hero's playable desktop ------------------------------------------------ */
/* flat and whole: as wide as the column allows, never taller than the window under the bar
   (16:10 plus the keys row), so the screen and its keys fit in one view */
.desk-wrap {
  width: min(100% - 2 * var(--site-gutter), 1400px, (100svh - 190px) * 1.6);
  margin: clamp(36px, 5vw, 64px) auto 0;
}
.desk .stage__screen::after {   /* a faint glow under the glass, from the accent */
  content: "";
  position: absolute;
  inset: auto 10% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--q-accent-h) var(--q-accent-s) 80% / 0.4), transparent);
  z-index: 4;
}
.desk__esc {
  position: absolute;
  top: 12px;
  left: 50%;
  translate: -50% -8px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--q-dur-base) var(--ease-swap), translate var(--q-dur-base) var(--ease-out);
}
.desk.is-open .desk__esc {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}
.desk__keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  margin-top: var(--q-space-5);
  color: var(--q-ink-muted);
  font-size: var(--q-text-sm);
}
.desk__keys > span,
.desk__keys > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.desk__keys button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--q-dur-fast), background var(--q-dur-fast);
}
.desk__keys button:hover {
  color: var(--q-ink);
  background: hsl(var(--q-hue) 20% 90% / 0.06);
}
.desk__keys button:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}
kbd.k {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  font: var(--q-weight-medium) 12px/1 var(--q-font-ui);
  color: var(--q-ink);
  background: linear-gradient(hsl(var(--q-hue) 14% 22%), hsl(var(--q-hue) 14% 16%));
  box-shadow: 0 0 0 1px hsl(var(--q-hue) 20% 90% / 0.12), 0 2px 0 hsl(var(--q-hue) 10% 6%), 0 1px 0 hsl(var(--q-hue) 30% 96% / 0.08) inset;
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}
button:active kbd.k,
.desk.is-holding kbd.k.is-hold {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px hsl(var(--q-hue) 20% 90% / 0.12), 0 0 0 hsl(var(--q-hue) 10% 6%);
}
.desk__live {
  min-height: 1.5em;
  margin-top: var(--q-space-3);
  text-align: center;
  color: var(--q-ink-2);
  font-size: var(--q-text-md);
}

/* the tour: a scrim with a lit hole, words straight on the scrim (as the desktop's tour) */
.coach {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--q-dur-base) var(--ease-swap);
}
.coach.is-on {
  opacity: 1;
}
.coach__scrim {
  position: absolute;
  inset: 0;
  background: rgb(4 6 8 / 0.62);
  transition: opacity var(--q-dur-base);
}
.coach.has-hole .coach__scrim {
  opacity: 0;
}
.coach__hole {
  position: absolute;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgb(4 6 8 / 0.62), 0 0 0 1.5px hsl(var(--q-accent-h) var(--q-accent-s) 78% / 0.9), 0 0 24px 2px hsl(var(--q-accent-h) var(--q-accent-s) 70% / 0.35);
  opacity: 0;
  transition: left 420ms var(--ease-out), top 420ms var(--ease-out), width 420ms var(--ease-out), height 420ms var(--ease-out), opacity var(--q-dur-base);
}
.coach.has-hole .coach__hole {
  opacity: 1;
}
.coach__card {
  position: absolute;
  width: min(400px, 80%);
  pointer-events: auto;
  color: var(--q-ink);
  transition: top 420ms var(--ease-out), bottom 420ms var(--ease-out), left 420ms var(--ease-out);
}
.coach__count {
  font-size: var(--q-text-xs);
  color: var(--q-ink-muted);
  font-variant-numeric: tabular-nums;
}
.coach__text {
  margin-top: 6px;
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  line-height: 1.45;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.coach__row {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  align-items: center;
}
.coach__row button {
  font: var(--q-weight-medium) var(--q-text-sm) var(--q-font-ui);
  color: var(--q-ink-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.coach__row button:hover,
.coach__row button:focus-visible {
  color: var(--q-accent);
  outline: none;
}
.coach__row button.is-primary {
  color: var(--q-on-accent);
  background: var(--q-accent);
  padding: 7px 14px;
  border-radius: 999px;
}
.coach.is-nice .coach__text::after {
  content: "  Nice.";
  color: var(--q-ok);
}

/* ---- section heads and chapters ---------------------------------------------------------- */
.part {
  padding-top: clamp(96px, 13vw, 176px);
}
.part__head {
  display: grid;
  gap: var(--q-space-4);
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.part__head .qg-eyebrow {
  color: var(--q-accent);
}
.part__title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: var(--q-weight-semibold);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.part__title span {
  color: var(--q-ink-muted);
}
.part__lede {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  line-height: 1.55;
  color: var(--q-ink-2);
  text-wrap: pretty;
}
.part__body {
  margin-top: clamp(32px, 5vw, 56px);
}

/* ---- pickers: options under a stage ------------------------------------------------------- */
.picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--q-space-5);
}
.pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--q-line);
  background: hsl(var(--q-hue) 14% 14% / 0.6);
  color: var(--q-ink-2);
  font: var(--q-weight-medium) var(--q-text-sm) var(--q-font-ui);
  cursor: pointer;
  transition: border-color var(--q-dur-fast), color var(--q-dur-fast), background var(--q-dur-fast), transform 120ms var(--ease-out);
}
.pick:hover {
  color: var(--q-ink);
  border-color: var(--q-line-strong);
}
.pick:active {
  transform: scale(0.97);
}
.pick[aria-pressed="true"] {
  color: var(--q-ink);
  border-color: hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.8);
  background: hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.12);
}
.pick:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}
.pick__swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px hsl(var(--q-hue) 20% 90% / 0.16) inset;
}
.pick__dot {
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2) inset;
}
.pick--plain {
  padding: 8px 14px;
}
.say {
  min-height: 1.5em;
  margin-top: var(--q-space-3);
  text-align: center;
  color: var(--q-ink-muted);
  font-size: var(--q-text-sm);
}

/* ---- a hold button (voice, Super) --------------------------------------------------------- */
.holdrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--q-space-4);
  margin-top: var(--q-space-5);
}
.holdbtn {
  --p: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  border: 1px solid var(--q-line-strong);
  background: linear-gradient(hsl(var(--q-hue) 14% 18%), hsl(var(--q-hue) 14% 13%));
  color: var(--q-ink);
  font: var(--q-weight-medium) var(--q-text-md) var(--q-font-ui);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 140ms var(--ease-out), border-color var(--q-dur-fast), box-shadow var(--q-dur-base);
}
.holdbtn:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 3px;
}
.holdbtn__orb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, hsl(var(--q-accent-h) var(--q-accent-s) 80% / 0.9), hsl(var(--q-accent-h) var(--q-accent-s) 40% / 0.5) 60%, transparent 72%);
  box-shadow: 0 0 0 1px hsl(var(--q-accent-h) var(--q-accent-s) 80% / 0.35) inset;
}
.holdbtn__orb svg {
  width: 18px;
  height: 18px;
  color: hsl(var(--q-hue) 30% 8%);
}
.is-held .holdbtn {
  transform: scale(0.97);
  border-color: hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.8);
  box-shadow: 0 0 0 6px hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.14), 0 0 40px hsl(var(--q-accent-h) var(--q-accent-s) var(--q-accent-l) / 0.25);
}
.is-held .holdbtn__orb {
  animation: listen 1.1s var(--ease-swap) infinite alternate;
}
@keyframes listen {
  from { transform: scale(0.92); }
  to { transform: scale(1.08); }
}
.words {
  min-height: 1.5em;
  color: var(--q-ink-2);
  font-size: var(--q-text-md);
  text-align: center;
}

/* ---- split: words beside a stage ---------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  }
  .split.is-flip {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr);
  }
  .split.is-flip > :first-child {
    order: 2;
  }
}
.split__words {
  display: grid;
  gap: var(--q-space-4);
  align-content: center;
}
.split__words h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--q-weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.split__words p {
  color: var(--q-ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.facts {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts li {
  display: flex;
  gap: 10px;
  color: var(--q-ink-2);
  font-size: var(--q-text-md);
  line-height: 1.5;
}
.facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--q-accent);
}

/* ---- the phone ---------------------------------------------------------------------------- */
.agents {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .agents {
    grid-template-columns: minmax(0, 2.3fr) minmax(280px, 1fr);
  }
}
.phone {
  justify-self: center;
  width: min(340px, 84vw);
  display: grid;
  gap: var(--q-space-3);
  justify-items: center;
}
.phone .stage {
  width: 100%;
}
.phone .stage__screen {
  aspect-ratio: 393 / 852;
  width: 100%;
  border-radius: 46px;
  box-shadow:
    0 0 0 10px hsl(var(--q-hue) 8% 7%),
    0 0 0 11px hsl(var(--q-hue) 20% 90% / 0.14),
    0 50px 90px -30px rgb(0 0 0 / 0.8);
}
.phone .stage__screen::before {   /* the island */
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 30%;
  height: 26px;
  translate: -50% 0;
  border-radius: 20px;
  background: #000;
  z-index: 4;
}
.phone__ring {   /* the hold: the button fills from the left in 600 ms, as the app's own */
  position: absolute;
  z-index: 4;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(hsl(var(--q-accent-h) var(--q-accent-s) 92% / 0.55), hsl(var(--q-accent-h) var(--q-accent-s) 92% / 0.55)) no-repeat;
  background-size: 0% 100%;
}
.phone.is-holding .phone__ring {
  opacity: 1;
  animation: fillup 600ms linear forwards;
}
@keyframes fillup {
  to { background-size: 100% 100%; }
}
.phone__note {
  min-height: 3em;
  text-align: center;
  color: var(--q-ink-2);
  font-size: var(--q-text-sm);
  max-width: 34ch;
}

/* ---- k-chain: the companion ------------------------------------------------------------- */
/* the device: the 410 x 502 panel (48 px corners at 1x) in a graphite body, BOOT and PWR on its side */
.kc-stage {
  display: grid;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .kc-stage { grid-template-columns: auto minmax(0, 1fr); }
}
.kc-device {
  --w: clamp(260px, 30vw, 380px);
  position: relative;
  justify-self: center;
  width: var(--w);
  padding: calc(var(--w) * 0.045);
  border-radius: calc(var(--w) * 0.155);
  background:
    radial-gradient(120% 80% at 30% 0%, hsl(var(--q-hue) 6% 26%), transparent 60%),
    linear-gradient(160deg, hsl(var(--q-hue) 6% 20%), hsl(var(--q-hue) 8% 8%) 55%, hsl(var(--q-hue) 6% 13%));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.18),
    inset 0 -2px 0 rgb(0 0 0 / 0.55),
    0 0 0 1px hsl(0 0% 100% / 0.07),
    0 70px 120px -40px rgb(0 0 0 / 0.9),
    0 0 120px -30px hsl(190 60% 50% / 0.18);
}
.kc-device__screen {
  position: relative;
  aspect-ratio: 410 / 502;
  border-radius: calc(var(--w) * 0.91 * 48 / 410);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.9);
}
.kc-device__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 420ms var(--ease-swap);
}
.kc-device__img.is-on {
  opacity: 1;
  z-index: 1;
}
.kc-device__key {
  position: absolute;
  right: -3px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, hsl(var(--q-hue) 6% 30%), hsl(var(--q-hue) 6% 16%));
  box-shadow: inset -1px 0 0 hsl(0 0% 100% / 0.12);
}
.kc-device__key--boot { top: 26%; height: 12%; }
.kc-device__key--pwr { top: 42%; height: 7%; }
.kc-stage.is-talking .kc-device__key--boot { background: hsl(var(--q-accent-h) var(--q-accent-s) 72%); }

.kc-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--q-space-5);
  align-content: center;
  min-width: 0;
}
.kc-modes, .kc-tone {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--q-line);
  background: hsl(var(--q-hue) 14% 10% / 0.7);
  justify-self: start;
}
.kc-tone { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 560px) {
  .kc-modes { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .kc-modes button { padding: 8px 9px; font-size: var(--q-text-sm); flex: none; }
}
.kc-modes button, .kc-tone button {
  font: inherit;
  font-size: var(--q-text-md);
  color: var(--q-ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
  transition: background-color 200ms var(--q-ease), color 200ms var(--q-ease);
}
.kc-modes button:hover, .kc-tone button:hover { color: var(--q-ink); }
.kc-modes button[aria-selected="true"], .kc-tone button[aria-checked="true"] {
  background: hsl(var(--q-hue) 14% 22%);
  color: var(--q-ink);
  box-shadow: inset 0 0 0 1px var(--q-line-2, hsl(0 0% 100% / 0.12));
}
.kc-modes button:focus-visible, .kc-tone button:focus-visible, .kc-states button:focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}
.kc-panel {
  display: grid;
  gap: var(--q-space-4);
}
.kc-panel__title {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: var(--q-weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.kc-panel__lede {
  color: var(--q-ink-2);
  font-size: var(--q-text-lg, 1.125rem);
  line-height: 1.6;
  max-width: 56ch;
  text-wrap: pretty;
}
.kc-states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kc-states button {
  font: inherit;
  font-size: var(--q-text-sm);
  color: var(--q-ink-2);
  background: hsl(var(--q-hue) 14% 12% / 0.8);
  border: 1px solid var(--q-line);
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 200ms var(--q-ease), color 200ms var(--q-ease);
}
.kc-states button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}
.kc-states button[aria-pressed="true"] {
  color: var(--q-ink);
  border-color: var(--q-accent-line);
}
.kc-states button[aria-pressed="true"]::before { background: var(--q-accent); opacity: 1; }
.kc-states button.is-warm[aria-pressed="true"]::before { background: hsl(34 80% 62%); }
.kc-say {
  min-height: 4.8em;
  color: var(--q-ink-2);
  font-size: var(--q-text-md);
  line-height: 1.6;
  max-width: 56ch;
  text-wrap: pretty;
}
.kc-say b { color: var(--q-ink); font-weight: var(--q-weight-semibold); }
.kc-progress {
  height: 2px;
  max-width: 220px;
  border-radius: 2px;
  background: var(--q-line);
  overflow: hidden;
}
.kc-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--q-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.kc-stage.is-auto .kc-progress span { animation: kcstep var(--kc-step, 3600ms) linear forwards; }
@keyframes kcstep { to { transform: scaleX(1); } }

.kc-block {
  margin-top: clamp(72px, 9vw, 128px);
  display: grid;
  gap: var(--q-space-4);
}
.kc-block__title {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: var(--q-weight-semibold);
  letter-spacing: -0.02em;
}
.kc-block__lede {
  color: var(--q-ink-2);
  line-height: 1.6;
  max-width: 64ch;
  text-wrap: pretty;
}
.kc-strip, .kc-row {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--q-space-3);
}
@media (min-width: 640px) { .kc-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .kc-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kc-row--lite, .kc-row--faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .kc-row--lite, .kc-row--faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .kc-row--lite, .kc-row--faces { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kc-fig {
  margin: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.kc-fig figcaption {
  color: var(--q-ink-muted);
  font-size: var(--q-text-sm);
  line-height: 1.5;
  padding-inline: 4px;
}
.kc-fig figcaption b { color: var(--q-ink); font-weight: var(--q-weight-semibold); display: block; }
.kc-two[data-kc-tone="paper"] .kc-mini--lite { box-shadow: 0 0 0 5px #b9bcb5, 0 0 0 6px hsl(0 0% 100% / 0.25), 0 24px 50px -26px rgb(0 0 0 / 0.9); }
.kc-two__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-4);
  align-items: end;
  justify-content: space-between;
}
.kc-two__head > div:first-child { display: grid; gap: var(--q-space-3); }
.kc-faces__title { margin-top: var(--q-space-6); }
.kc-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.kc-grid article {
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-lg);
  padding: var(--q-space-5);
  background: linear-gradient(hsl(var(--q-hue) 14% 13% / 0.85), hsl(var(--q-hue) 14% 10% / 0.85));
}
.kc-grid h4 {
  font-size: var(--q-text-lg, 1.125rem);
  font-weight: var(--q-weight-semibold);
  margin-bottom: var(--q-space-3);
}
.kc-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.kc-grid li { color: var(--q-ink-2); font-size: var(--q-text-sm); line-height: 1.55; }
.kc-grid li b { color: var(--q-ink); font-weight: var(--q-weight-semibold); }
.kc-talk__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
@media (min-width: 900px) { .kc-talk__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kc-talk__list div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--q-radius-md);
  border: 1px solid var(--q-line);
  background: hsl(var(--q-hue) 14% 11% / 0.7);
}
.kc-talk__list dt { font-family: var(--q-font-mono, "IBM Plex Mono", monospace); font-size: var(--q-text-sm); color: var(--q-accent); }
.kc-talk__list dd { margin: 0; color: var(--q-ink-2); font-size: var(--q-text-sm); }
.kc-note {
  margin-top: clamp(40px, 5vw, 64px);
  color: var(--q-ink-muted);
  font-size: var(--q-text-sm);
  line-height: 1.6;
  max-width: 80ch;
}

/* ---- settings: a grid of whole screens, the first one large ------------------------------ */
.sgrid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .sgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sgrid > :first-child {
    grid-column: 1 / -1;
  }
}
.sgrid figure {
  margin: 0;
  display: grid;
  gap: var(--q-space-3);
}
.sgrid .stage__screen {
  border-radius: 14px;
}
.sgrid figcaption {
  color: var(--q-ink-2);
  font-size: var(--q-text-md);
  line-height: 1.5;
}
.sgrid figcaption b {
  color: var(--q-ink);
  font-weight: var(--q-weight-semibold);
}

/* ---- cards, each with a whole real screen (click opens it full size) ---------------------- */
.tiles {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.tile {
  border-radius: var(--q-radius-lg);
  border: 1px solid var(--q-line);
  background: linear-gradient(hsl(var(--q-hue) 14% 13% / 0.9), hsl(var(--q-hue) 14% 10% / 0.9));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: border-color 220ms var(--q-ease), transform 500ms var(--ease-out);
}
.tile:hover {
  border-color: var(--q-accent-line);
}
.tile__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 12px 12px 0;
  border-radius: calc(var(--q-radius-lg) - 8px);
  overflow: hidden;
  background: var(--bezel);
  box-shadow: 0 0 0 1px hsl(0 0% 100% / 0.07), 0 18px 40px -22px rgb(0 0 0 / 0.8);
}
.tile__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tile__body {
  padding: var(--q-space-5);
  display: grid;
  gap: 8px;
  align-content: start;
}
.tile__body h3 {
  font-size: var(--q-text-xl);
  font-weight: var(--q-weight-semibold);
  letter-spacing: -0.015em;
}
.tile__body p {
  color: var(--q-ink-2);
  font-size: var(--q-text-md);
  line-height: 1.55;
}

/* ---- numbers ------------------------------------------------------------------------------ */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--q-space-5);
  margin-top: clamp(56px, 8vw, 96px);
  text-align: center;
}
.numbers b {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--q-weight-semibold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.numbers span {
  color: var(--q-ink-muted);
  font-size: var(--q-text-sm);
}

/* ---- reveal ------------------------------------------------------------------------------- */
.has-motion .rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-swap), transform 900ms var(--ease-out);
}
.has-motion .rise.is-in {
  opacity: 1;
  transform: none;
}
.has-motion .rise.d1 { transition-delay: 70ms; }
.has-motion .rise.d2 { transition-delay: 140ms; }
.has-motion .rise.d3 { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --swap: 0ms; }
  .stage__img.is-on.is-overlay,
  .is-held .holdbtn__orb,
  .desk:not(.was-used) .hot.is-hint::after { animation: none; }
  .coach__hole, .coach__card { transition: none; }
  .kc-device__img { transition: none; }
  .kc-stage.is-auto .kc-progress span { animation: none; }
}
@media (max-width: 720px) {
  .desk__keys .k-more { display: none; }
  .coach__text { font-size: 0.875rem; }
}