/* One continuous instrument: rotation, proportions and the resulting path. */
:root {
  --mix-self: #79e5f2;
  --mix-guided: #d2f1a5;
  --mix-done: #beaaff;
}

[data-mix-lane="self"], [data-mix-link="self"], .friction-self {
  --mix-color: var(--mix-self);
  --mix-rgb: 121, 229, 242;
}
[data-mix-lane="guided"], [data-mix-link="guided"], .friction-guided {
  --mix-color: var(--mix-guided);
  --mix-rgb: 210, 241, 165;
}
[data-mix-lane="done"], [data-mix-link="done"], .friction-done {
  --mix-color: var(--mix-done);
  --mix-rgb: 190, 170, 255;
}

.path-mix-triangle {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.path-mix-boundary {
  stroke: #bdd8df;
  stroke-opacity: .19;
  stroke-width: 1;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
}
.path-mix-triangle [data-mix-link] {
  stroke: var(--mix-color);
  stroke-width: calc(.7px + 2.3px * var(--mix-weight, .333333));
  stroke-opacity: calc(.12 + .58 * var(--mix-weight, .333333));
  filter: drop-shadow(0 0 5px rgba(var(--mix-rgb), .28));
  vector-effect: non-scaling-stroke;
}
.path-mix-anchor {
  fill: var(--mix-color);
  stroke: #092333;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--mix-color));
}
.path-mix-cursor {
  fill: #f0fcf7;
  stroke: #87e6ec;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px #9ae7ef);
}
.journey-orbits .journey-tether { opacity: .2; }
body[data-page] .journey-hero .sculpture-surface {
  touch-action: pan-y;
  cursor: grab;
}
body[data-page] .journey-hero .sculpture-surface:active { cursor: grabbing; }
body[data-page] .journey-hero .sculpture-surface:focus-visible {
  outline: 2px solid var(--mix-self);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Three floating endpoints leave the ribbon and its live centre in view. */
body[data-page] .business-hero .journey-friction {
  width: 47%;
  max-width: 276px;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 13px 14px;
  border-color: rgba(var(--mix-rgb), calc(.24 + .44 * var(--mix-weight, .333333)));
  border-radius: 8px;
  background: linear-gradient(125deg, rgba(var(--mix-rgb), calc(.025 + .085 * var(--mix-weight, .333333))), transparent 85%), #071e2aef;
  box-shadow: 0 12px 32px #00111a70, 0 0 25px rgba(var(--mix-rgb), calc(.015 + .07 * var(--mix-weight, .333333)));
  color: #e4f0f3;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s, transform .2s;
}
body[data-page] .business-hero .journey-friction::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: calc(var(--mix-weight, .333333) * 100%);
  height: 2px;
  background: var(--mix-color);
  box-shadow: 0 0 12px var(--mix-color);
  pointer-events: none;
}
body[data-page] .business-hero .friction-self { top: 15%; left: 0; right: auto; bottom: auto; }
body[data-page] .business-hero .friction-guided { top: 15%; right: 0; left: auto; bottom: auto; }
body[data-page] .business-hero .friction-done {
  width: 54%;
  max-width: 292px;
  top: auto;
  right: auto;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
}
body[data-page] .business-hero .journey-friction:hover {
  border-color: var(--mix-color);
  transform: translateY(-2px);
}
body[data-page] .business-hero .friction-done:hover { transform: translate(-50%, -2px); }
body[data-page] .business-hero .journey-friction:focus-visible {
  outline: 2px solid var(--mix-color);
  outline-offset: 4px;
}
body[data-page] .journey-friction .journey-friction-index { display: none; }
body[data-page] .business-hero .journey-friction strong {
  font-size: 1rem;
  line-height: 1.4;
  color: #eef8fa;
}
body[data-page] .business-hero .journey-friction small,
body[data-page] .business-hero .journey-friction[aria-pressed="true"] small {
  margin-top: 4px;
  font-size: .8125rem;
  line-height: 1.45;
  color: #b4cbd5;
}
.path-mix-preset {
  display: block;
  margin-top: 3px;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--mix-color);
  opacity: .86;
}
.path-mix-percent {
  align-self: center;
  font-size: clamp(1.375rem, 2.35vw, 1.875rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  color: var(--mix-color);
  white-space: nowrap;
}
body[data-page] .business-hero .journey-friction[data-mix-active="false"] .path-mix-percent { color: #98afbd; }

/* This is the instrument's readout, directly below the form. */
.path-mix-console {
  position: relative;
  z-index: 5;
  margin: 3px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid #73a7b333;
}
.path-mix-console-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.path-mix-console-top > div { min-width: 0; }
.path-mix-label {
  color: #91adbc;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .13em;
}
.path-mix-console [data-mix-summary] {
  margin: 5px 0 0;
  color: #e4eff0;
  font-size: .875rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.path-mix-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  max-width: 140px;
  min-height: 44px;
  padding: 6px 0 6px 8px;
  border: 0;
  background: transparent;
  color: #b7cbd5;
  text-align: left;
  font: inherit;
  font-size: .75rem;
  line-height: 1.5;
  cursor: pointer;
}
.path-mix-reset > span { font-size: 1.25rem; color: var(--mix-self); }
.path-mix-reset:hover { color: #fff; }
.path-mix-help {
  margin: 9px 0 6px;
  max-width: 60ch;
  font-size: .8125rem;
  line-height: 1.65;
  color: #9eb8c6;
}
.path-mix-fine { border-bottom: 1px solid #73a7b326; }
.path-mix-fine > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  color: #d6e8ee;
  font-size: .8125rem;
  line-height: 1.5;
}
.path-mix-fine > summary::-webkit-details-marker { display: none; }
.path-mix-fine > summary::after { content: none; }
.path-mix-fine > summary > span { font-size: 1.25rem; color: var(--mix-self); }
.path-mix-fine[open] > summary > span { transform: rotate(45deg); }
.path-mix-axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-top: 7px;
}
.path-mix-axis { display: block; min-width: 0; }
.path-mix-axis > span:first-child { color: #d7e7ed; font-size: .8125rem; line-height: 1.6; }
.path-mix-axis input[type="range"] {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  accent-color: var(--mix-self);
  cursor: ew-resize;
  touch-action: pan-y;
}
.path-mix-axis input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 8px;
  background: linear-gradient(90deg, #79e5f277, #c1cfdd55, #beaaffbb);
}
.path-mix-axis input[data-mix-axis="y"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #79e5f2aa, #c1cfdd55, #d2f1a5bb); }
.path-mix-axis input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: 4px solid #102b3b;
  border-radius: 50%;
  background: #e0f7ef;
  box-shadow: 0 0 0 1px #8bcec9, 0 0 15px #78e1e52b;
}
.path-mix-axis input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 8px;
  background: linear-gradient(90deg, #79e5f277, #c1cfdd55, #beaaffbb);
}
.path-mix-axis input[data-mix-axis="y"]::-moz-range-track { background: linear-gradient(90deg, #79e5f2aa, #c1cfdd55, #d2f1a5bb); }
.path-mix-axis input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 4px solid #102b3b;
  border-radius: 50%;
  background: #e0f7ef;
  box-shadow: 0 0 0 1px #8bcec9;
}
.path-mix-axis-ends {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #9eb8c6;
  font-size: .75rem;
  line-height: 1.5;
}
.path-mix-axis-ends > span:last-child { text-align: right; }
.path-mix-axis-note {
  margin: 14px 0 0;
  color: #9eb8c6;
  font-size: .8125rem;
  line-height: 1.65;
}
body[data-page] .path-mix-fine .journey-sculpture-footer { padding: 12px 0 16px; }
body[data-page] .path-mix-fine .journey-view-controls { flex-wrap: nowrap; width: 100%; }
body[data-page] .path-mix-fine .journey-view-button { flex: 1 1 0; min-width: 44px; padding: 9px 6px; }
.path-mix-reset:focus-visible,
.path-mix-fine > summary:focus-visible,
.path-mix-axis input[type="range"]:focus-visible {
  outline: 2px solid var(--mix-self);
  outline-offset: 4px;
  border-radius: 3px;
}
.path-mix-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The same colours continue into the plan; the choice is never asked twice. */
.path-mix-preview:empty { display: none; }
.path-mix-preview,
.path-mix-summary {
  margin: 0 0 20px;
  padding: 20px 0;
  border-top: 1px solid #6b9baf40;
  border-bottom: 1px solid #6b9baf40;
}
.path-mix-preview-heading {
  margin: 0 0 14px;
  color: #deedf1;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
}
.path-mix-bar {
  display: flex;
  width: 100%;
  height: 5px;
  overflow: hidden;
  gap: 3px;
  border-radius: 8px;
  background: #14313f;
}
.path-mix-bar > span {
  min-width: 0;
  background: var(--mix-color);
  transition: flex .18s ease-out;
}
.path-mix-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.path-mix-values > span {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  color: #b7cdd7;
  font-size: .875rem;
  line-height: 1.5;
}
.path-mix-values strong {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--mix-color);
  white-space: nowrap;
}
.path-mix-note,
.path-mix-planner-help,
.path-mix-allocation {
  color: #acc3cf;
  font-size: .875rem;
  line-height: 1.75;
}
.path-mix-note { margin: 16px 0 0; }
.path-mix-planner-help { margin: 0 0 16px; }
.path-mix-planner-help a {
  display: inline-block;
  min-height: 44px;
  padding: 9px 0;
  color: var(--mix-self);
  text-underline-offset: 4px;
}
.path-mix-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 24px 0;
}
.path-mix-lane {
  min-width: 0;
  padding: 18px 0 0;
  border-top: 2px solid var(--mix-color);
}
.path-mix-lane h5 {
  margin: 0 0 10px;
  color: #e9f1f2;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
}
.path-mix-lane > p {
  color: var(--mix-color);
  font-size: .875rem;
  line-height: 1.65;
}
.path-mix-lane ul { margin: 15px 0 0; padding-left: 20px; }
.path-mix-lane li { margin: 9px 0; color: #bacfd8; font-size: .9375rem; line-height: 1.75; }
.path-mix-allocation { margin: 16px 0 24px; }
.path-mix-next-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.path-mix-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #4c718251;
  border-left: 2px solid var(--mix-color);
  border-radius: 0 6px 6px 0;
  background: #0a223099;
  color: #e1edf1;
  font-size: .9375rem;
  line-height: 1.65;
  text-decoration: none;
}
.path-mix-next :is(strong, h5) { margin: 0; color: var(--mix-color); font-size: 1rem; line-height: 1.55; }
.path-mix-next p { margin: 0; color: #afc8d3; font-size: .875rem; line-height: 1.75; }
.path-mix-next a { min-height: 44px; display: inline-flex; align-items: center; color: var(--mix-color); text-underline-offset: 4px; }
a.path-mix-next:hover { border-color: var(--mix-color); }
.path-mix-next:focus-visible { outline: 2px solid var(--mix-color); outline-offset: 4px; }

@media (min-width: 801px) and (max-width: 1100px) {
  body[data-page] .business-hero .journey-friction { gap: 7px; padding: 11px 10px; }
  body[data-page] .business-hero .journey-friction strong { font-size: .875rem; }
  body[data-page] .business-hero .journey-friction small { font-size: .75rem; }
  .path-mix-percent { font-size: 1.4rem; }
  .path-mix-reset { max-width: 115px; }
}

@media (max-width: 800px) {
  .path-mix-console { max-width: 590px; margin-inline: auto; }
  .path-mix-values > span { flex-direction: column; gap: 5px; }
  .path-mix-work { grid-template-columns: 1fr; gap: 12px; }
  .path-mix-next-actions { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .path-mix-triangle { top: 12px; height: 315px; }
  body[data-page] .business-hero .journey-friction,
  body[data-page] .business-hero .journey-friction:hover {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    min-height: 78px;
    padding: 13px 15px;
    gap: 18px;
    transform: none;
  }
  body[data-page] .business-hero .journey-friction strong { font-size: 1rem; }
  body[data-page] .business-hero .journey-friction small { font-size: .8125rem; }
  .path-mix-preset { display: inline; margin-left: 8px; font-size: .6875rem; }
  .path-mix-percent { font-size: 2rem; }
  .path-mix-console { margin-top: 20px; }
  .path-mix-console-top { gap: 12px; }
  .path-mix-console [data-mix-summary] { font-size: .875rem; }
  .path-mix-reset { max-width: 104px; padding-left: 0; }
  .path-mix-help { font-size: .875rem; }
  .path-mix-fine > summary { font-size: .875rem; min-height: 48px; }
  .path-mix-axis-grid { grid-template-columns: 1fr; gap: 20px; }
  .path-mix-axis > span:first-child { font-size: .875rem; }
  .path-mix-axis-ends { font-size: .8125rem; }
  body[data-page] .path-mix-fine .journey-view-button { font-size: .8125rem; }
  .path-mix-values { gap: 10px; }
  .path-mix-values > span { font-size: .8125rem; line-height: 1.6; }
  .path-mix-values strong { font-size: 1.5rem; }
  .path-mix-preview, .path-mix-summary { padding: 16px 0; }
  .path-mix-work { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] .business-hero .journey-friction,
  .path-mix-bar > span { transition: none; }
  body[data-page] .business-hero .journey-friction:hover { transform: none; }
  body[data-page] .business-hero .friction-done:hover { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 540px) {
  body[data-page] .business-hero .friction-done:hover { transform: none; }
}