.mode-card:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 35%,
    color-mix(in srgb, var(--accent) 22%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mode-card:hover:after,
.mode-card:focus-visible:after {
  transform: translateX(120%);
}
.mode-card:hover,
.mode-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.wiz-in {
  animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--k, 0) * 40ms);
}
.motion-reduced .wiz-in,
.motion-reduced .dial-ticks,
.motion-reduced .dial-orbit {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .wiz-in,
  .dial-ticks,
  .dial-orbit {
    animation: none;
  }
}
@media (max-width: 800px) {
  .diagnostic-page .diagnostic-v2 {
    display: block;
    padding: 24px 0 40px;
  }
  .sim-dial {
    width: min(230px, 62vw);
    margin: 22px auto 18px;
  }
  .diagnostic-sidebar h1 {
    font-size: 30px;
  }
  .diagnostic-page .diagnostic-panel {
    margin-top: 26px;
    padding: 24px 18px;
  }
}


/* v5 — design critique fixes. */
:root {
  --p1: #f2eaff;
  --p2: #a57bff;
  --p3: #d36bff;
}
[data-theme="light"] {
  --p1: #3a1d6e;
  --p2: #6a2fd0;
  --p3: #a63bd4;
}
.node-prism {
  position: absolute;
  top: 12px;
  width: 40px;
  height: 40px;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--p2) 35%, transparent));
}
.node-prism svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: var(--rot);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.minimal-home .n-l1 .node-prism,
.minimal-home .n-l2 .node-prism,
.minimal-home .n-l3 .node-prism {
  right: 16px;
}
.minimal-home .n-r1 .node-prism,
.minimal-home .n-r2 .node-prism,
.minimal-home .n-r3 .node-prism {
  left: 16px;
}
.minimal-home .n-r1 .node-index,
.minimal-home .n-r2 .node-index,
.minimal-home .n-r3 .node-index {
  left: auto !important;
  right: 20px !important;
}
.minimal-home .orbit-node:hover .node-prism svg,
.minimal-home .orbit-node:focus-visible .node-prism svg {
  transform: var(--rot) translate(3px, 3px) scale(1.08);
}
.minimal-home .orbit-node small {
  min-height: 2.9em;
}
@media (max-width: 700px) {
  .node-prism {
    --rot: none !important;
    width: 26px;
    height: 26px;
    top: 10px;
  }
  .minimal-home .n-l1 .node-prism,
  .minimal-home .n-l2 .node-prism,
  .minimal-home .n-l3 .node-prism,
  .minimal-home .n-r1 .node-prism,
  .minimal-home .n-r2 .node-prism,
  .minimal-home .n-r3 .node-prism {
    left: auto;
    right: 12px;
  }
  .minimal-home .n-r1 .node-index,
  .minimal-home .n-r2 .node-index,
  .minimal-home .n-r3 .node-index {
    right: auto !important;
    left: 14px !important;
  }
  .minimal-home .orbit-node small {
    min-height: 0;
  }
}
/* The background mark stays behind the text: softer, no dark heart. */
body:not(.home-page) #main:before {
  opacity: 0.24 !important;
}
[data-theme="light"] body:not(.home-page) #main:before {
  opacity: 0.2 !important;
}
.page-heading h1 {
  max-width: 920px;
}
.page-heading > p:last-child,
.page-heading .eyebrow {
  position: relative;
  text-shadow:
    0 0 18px var(--bg),
    0 0 6px var(--bg);
}


/* v6 — four destinations with the logo's four prisms, calm page arrivals, click-only tabs. */
.kx-stage {
  width: min(1100px, 100%, calc((100vh - 230px) * 1.96));
  margin: 6px auto 0;
}
.kx-map {
  position: relative;
  aspect-ratio: 1100/560;
}
.kx-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.kx-lines .energy-ring {
  transform-origin: 550px 280px !important;
}
.kx-lines .pr {
  transition:
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--p2) 30%, transparent));
}
.kx-lines .pr-tl {
  animation: pr-tl 5s ease-in-out infinite;
}
.kx-lines .pr-tr {
  animation: pr-tr 5s ease-in-out infinite 0.6s;
}
.kx-lines .pr-bl {
  animation: pr-bl 5s ease-in-out infinite 1.2s;
}
.kx-lines .pr-br {
  animation: pr-br 5s ease-in-out infinite 1.8s;
}
@keyframes pr-tl {
  50% {
    transform: translate(-4px, -4px);
  }
}
@keyframes pr-tr {
  50% {
    transform: translate(4px, -4px);
  }
}
@keyframes pr-bl {
  50% {
    transform: translate(-4px, 4px);
  }
}
@keyframes pr-br {
  50% {
    transform: translate(4px, 4px);
  }
}
.kx-map:has(.c-tl:hover) .pr-tl,
.kx-map:has(.c-tr:hover) .pr-tr,
.kx-map:has(.c-bl:hover) .pr-bl,
.kx-map:has(.c-br:hover) .pr-br {
  filter: brightness(1.2) drop-shadow(0 0 22px color-mix(in srgb, var(--p3) 55%, transparent));
}
.minimal-home .kx-map .nav-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13.6%;
  min-width: 112px;
  height: auto;
  aspect-ratio: 1;
}
.kx-card {
  position: absolute;
  width: 28%;
  height: 25%;
  text-align: left;
  box-sizing: border-box;
  padding: clamp(14px, 1.7vw, 22px) clamp(16px, 1.9vw, 24px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  corner-shape: var(--kx-shape);
  background: linear-gradient(130deg, var(--panel2), var(--panel));
  color: var(--ink);
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s;
  animation: soft-arrival 0.9s ease backwards;
}
[data-theme="light"] .kx-card {
  background: linear-gradient(135deg, #fff, #ece0fd);
  border-color: #baa0db;
}
.kx-card .node-index {
  position: static;
  grid-row: 1;
  font: 12px Manrope,'IBM Plex Sans',sans-serif;
  letter-spacing: 0.1em;
  color: var(--warm);
}
.kx-card strong {
  grid-row: 3;
  font-size: clamp(15px, 1.55vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kx-card small {
  grid-row: 4;
  margin-top: 5px;
  font-size: clamp(12px, 1.02vw, 13px);
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-tl {
  left: 1%;
  top: 2%;
}
.c-tr {
  right: 1%;
  top: 2%;
  text-align: right;
}
.c-bl {
  left: 1%;
  bottom: 2%;
}
.c-br {
  right: 1%;
  bottom: 2%;
  text-align: right;
}
.c-tr {
  animation-delay: 0.08s;
}
.c-bl {
  animation-delay: 0.16s;
}
.c-br {
  animation-delay: 0.24s;
}
.kx-card:hover,
.kx-card:focus-visible {
  border-color: var(--gold-soft);
  box-shadow: 0 10px 40px var(--glow-soft);
}
.c-tl:hover {
  transform: translate(-3px, -3px);
}
.c-tr:hover {
  transform: translate(3px, -3px);
}
.c-bl:hover {
  transform: translate(-3px, 3px);
}
.c-br:hover {
  transform: translate(3px, 3px);
}
.home-page .living-halo {
  display: none;
}
@media (max-width: 900px) {
  .kx-stage {
    width: min(560px, 100%);
  }
  .kx-map {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .kx-lines {
    display: none;
  }
  .minimal-home .kx-map .nav-core {
    position: relative;
    grid-column: 1/-1;
    justify-self: center;
    left: auto;
    top: auto;
    transform: none !important;
    width: 112px;
    margin: 0 0 16px;
  }
  .kx-card {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 108px;
    text-align: left !important;
  }
  .kx-card:hover {
    transform: translateY(-2px) !important;
  }
}
@media (max-width: 900px) {
  .kx-card strong,
  .kx-card small {
    white-space: normal;
  }
}
@media (max-width: 380px) {
  .kx-card strong {
    font-size: 14px;
  }
}
.motion-reduced .kx-lines .pr,
.motion-reduced .kx-card {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .kx-lines .pr,
  .kx-card {
    animation: none;
  }
}
/* Halo without a dark hole. */
.living-halo {
  background: radial-gradient(circle, #b27cff1c 0, #c4934122 14%, #9b51ef24 34%, transparent 68%);
}
[data-theme="light"] .living-halo {
  background: radial-gradient(circle, #b579ee22 0, #c7923720 16%, #b579ee26 34%, transparent 68%);
}
/* Calm arrival of every page. */
@keyframes page-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
body:not(.home-page) #main > section {
  animation: page-in 1.1s cubic-bezier(0.22, 0.7, 0.2, 1) backwards;
}
.arrive {
  animation-delay: calc(var(--k, 0) * 80ms + 380ms);
}
.motion-reduced #main > section {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #main > section {
    animation: none !important;
  }
}
/* Contact: violet on dark, rosy on light. */
body[data-page="contact"] {
  --accent: #a57bff;
}
[data-theme="light"] body[data-page="contact"] {
  --accent: #c2459f;
}
.meeting-card a.text-link,
.meeting-prep a.text-link {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 20%, transparent),
      color-mix(in srgb, var(--accent) 5%, transparent)
    ),
    color-mix(in srgb, var(--panel) 55%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
/* Simulation: title reveal, logo reminded beside the form. */
.sim-title .w {
  display: inline-block;
  animation: word-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--w) * 95ms + 420ms);
}
@keyframes word-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(10px);
    text-shadow: 0 0 30px var(--accent);
  }
  60% {
    text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
    text-shadow: none;
  }
}
.motion-reduced .sim-title .w {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .sim-title .w {
    animation: none;
  }
}
body.diagnostic-page #main:before {
  display: block;
  left: calc(74% + var(--halo-x, 0px) * 0.15);
  top: 0;
  width: min(640px, 50vw);
  height: 640px;
}
@media (max-width: 800px) {
  body.diagnostic-page #main:before {
    display: none;
  }
}


/* v7 — no giant prisms, connected lines, outline crystals, single-colour accents, faster list pages. */
.kx-card,
.c-tr,
.c-br {
  text-align: left !important;
}
.kx-card .card-top {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}
.kx-card .node-index {
  font: 12px Manrope,'IBM Plex Sans',sans-serif;
  letter-spacing: 0.1em;
  color: var(--warm);
}
.crystal {
  width: 13px;
  height: 13px;
  flex: none;
  overflow: visible;
  opacity: 0.45;
  transition: opacity 0.3s;
}
.crystal path {
  fill: none;
  stroke: var(--warm);
  stroke-width: 4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.crystal path {
  stroke-width: 1;
}
.kx-card:hover .crystal,
.kx-card:focus-visible .crystal {
  animation: crystal-blink 1.1s ease-in-out 2;
}
@keyframes crystal-blink {
  0%,
  100% {
    opacity: 0.45;
  }
  25% {
    opacity: 1;
    filter: drop-shadow(0 0 5px var(--warm));
  }
  50% {
    opacity: 0.35;
  }
  75% {
    opacity: 1;
    filter: drop-shadow(0 0 5px var(--warm));
  }
}
.motion-reduced .crystal {
  animation: none !important;
}
/* Single theme colour instead of the rainbow, except in the task demonstration and the dial. */
.minimal-header .main-nav a:after {
  background: color-mix(in srgb, var(--purple) 55%, transparent) !important;
}
.journey-track button[aria-pressed="true"] {
  border-bottom-color: color-mix(in srgb, var(--purple) 60%, transparent) !important;
}
.journey-deliverable {
  border-left-color: color-mix(in srgb, var(--purple) 55%, transparent) !important;
}
.identity-principles details p:before {
  background: color-mix(in srgb, var(--purple) 60%, transparent);
}
.inline-link {
  background: linear-gradient(var(--accent), var(--accent)) bottom/100% 1px no-repeat;
}
.wizard-progress span {
  background: var(--purple) !important;
}
.share-now {
  background: var(--purple) !important;
}
.share-maybe {
  background: repeating-linear-gradient(135deg, var(--purple) 0 4px, transparent 4px 8px) !important;
}
.diagnostic-panel .result-sub strong {
  color: var(--ink);
}
/* Faster arrival on list pages (FAQ, simulation). */
body[data-page="aide"] #main > section,
body[data-page="diagnostic"] #main > section {
  animation-duration: 0.55s;
}
body[data-page="aide"] .arrive,
body[data-page="diagnostic"] .arrive {
  animation-duration: 0.45s;
  animation-delay: calc(var(--k, 0) * 35ms + 90ms);
}
.sim-title .w {
  animation-duration: 0.6s;
  animation-delay: calc(var(--w) * 50ms + 120ms);
}
.wiz-in {
  animation-duration: 0.4s;
  animation-delay: calc(var(--k, 0) * 25ms);
}
body.diagnostic-page #main:before {
  display: none !important;
}
/* Contact: softer rose in light mode, pills centred. */
[data-theme="light"] body[data-page="contact"] {
  --accent: #a4609a;
}
[data-theme="light"] .meeting-card a.text-link,
[data-theme="light"] .meeting-prep a.text-link {
  background: linear-gradient(135deg, #f6e6f3, #fbf4fa);
  border-color: #d9b3d2;
  color: var(--ink);
}
.meeting-prep .text-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 38px;
  padding: 0 16px;
}