/* The consultation intake: three questions, a small balance, and the route it lands on. */
.tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro scale" "steps scale" "steps route";
  gap: 28px clamp(28px, 5vw, 80px);
  align-items: start;
}
.tool__intro { grid-area: intro; }
.tool__intro .eyebrow { margin-bottom: 16px; }
.tool__intro p:last-child { margin-top: 16px; max-width: 46ch; }
.tool__steps { grid-area: steps; display: grid; gap: 26px; }
.step legend { display: flex; align-items: center; gap: 10px; font: 600 0.82rem/1.2 var(--sans); color: var(--ivory-ink); margin-bottom: 12px; }
.step legend b {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #1d3b33; color: var(--ivory); font-size: 0.72rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px;
  border: 1px solid rgba(18, 32, 28, 0.22); background: #fbf8f0; font-size: 0.9rem; color: var(--ivory-ink);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.chips label:hover span { border-color: #1d3b33; }
.chips input:checked + span { background: #1d3b33; border-color: #1d3b33; color: var(--ivory); }
.chips input:focus-visible + span { outline: 2px solid #1d5547; outline-offset: 3px; }

.scale { grid-area: scale; align-self: center; }
.scale__svg { width: 100%; max-width: 460px; margin-inline: auto; overflow: visible; }
.scale__beam {
  transform-box: view-box; transform-origin: 200px 69px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 1.3s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.scale__pan { transform-box: view-box; transition: transform 1.3s cubic-bezier(0.34, 1.4, 0.5, 1); }
.scale__pan--l { transform-origin: 80px 74px; transform: rotate(calc(var(--tilt, 0deg) * -1)); }
.scale__pan--r { transform-origin: 320px 74px; transform: rotate(calc(var(--tilt, 0deg) * -1)); }
.scale__block { animation: drop 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes drop { from { transform: translateY(-120px); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }

.route {
  grid-area: route;
  display: grid; gap: 16px;
  padding: 26px; border-radius: 20px; background: #fbf8f0; border: 1px solid rgba(18, 32, 28, 0.1);
  animation: rise 0.8s var(--ease) both;
}
.route[hidden] { display: none; }
.route__row { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(18, 32, 28, 0.1); }
.route__row p:not(.eyebrow) { color: var(--ivory-ink); font-size: 0.94rem; }
.route__desk { font: 400 1.5rem/1.15 var(--serif) !important; }
.route__row--price span { font: 300 1.7rem/1 var(--serif); color: #1d3b33; }
.route__row--price small { display: block; margin-top: 6px; color: var(--ivory-ink-2); font-size: 0.84rem; }
.route .btn { justify-self: start; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .tool { grid-template-columns: 1fr; grid-template-areas: "intro" "steps" "scale" "route"; }
  .scale__svg { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .scale__beam, .scale__pan { transition: none; }
  .scale__block, .route { animation: none; }
}