/* Where to Start: the four-question treatment finder
   ============================================================
   One surface on pearl, 12px, --e-md: a deep-teal rail on the left
   that keeps score (a completion ring, the question counter, and the
   answers so far, each a way back), and a white panel on the right
   that shows one question at a time as a column of answer tiles.
   The dark rail is the one committed-colour moment on the page: it
   is what makes the quiz read as an instrument rather than a list,
   so it is not something to scroll past. The result is the same
   panel: one "start here", up to three "also worth asking about",
   and a summary to carry into the consultation.

   Motion, in order of how often it is seen:
     - option press: scale 0.985 at --d-press, the indicator fills
     - ring: the arcs move at --d-hero on --ease-in-out (an on-screen
       move, not an entrance), once per answered question
     - question swap: out 140ms, in 220ms with a 10px rise, tiles
       staggered 35ms apart on the way in
     - result rows: the same entrance, 60ms apart
   All of it is opacity + transform (+ stroke-dashoffset on the ring).
   All of it is off under prefers-reduced-motion.
   ============================================================ */

/* ---------- Hero ---------- */
.wts-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-32);
  margin-top: var(--s-32);
}
.wts-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-sea-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-seafoam);
  padding-bottom: 2px;
  transition: border-color var(--d-hover) var(--ease-out);
}
.wts-jump svg { transition: transform var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wts-jump:hover { border-color: var(--c-sea); }
  .wts-jump:hover svg { transform: translateY(2px); }
}

/* ---------- Layout ---------- */
.wts-section { scroll-margin-top: var(--s-64); }
.wts-quiz {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: stretch;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: var(--e-md);
}
@media (max-width: 899px) {
  .wts-quiz { grid-template-columns: 1fr; }
}

/* ---------- Rail ---------- */
.wts-rail {
  background: var(--c-deep);
  color: var(--c-ivory);
  border-radius: 12px 0 0 12px;
  padding: var(--s-48) var(--s-32);
}
.wts-rail-in { position: sticky; top: 112px; }
@media (max-width: 899px) {
  .wts-rail { border-radius: 12px 12px 0 0; padding: var(--s-24); }
  .wts-rail-in { position: static; }
}
.wts-rail .eyebrow { color: var(--c-gold); font-weight: 700; }

.wts-rail-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-24);
  align-items: center;
  margin-top: var(--s-24);
}
@media (max-width: 899px) {
  .wts-rail-top { margin-top: var(--s-16); gap: var(--s-16); }
}
.wts-rail-count p { margin: 0; }
.wts-rail-step {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--c-ivory);
}
.wts-rail-count .wts-rail-pace {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-aqua);
  margin-top: var(--s-4);
}

/* The ring. Track in a hairline of ivory, done arc in gold, the live
   question in aqua. Gold is safe here: the ground is dark. */
.wts-ring {
  position: relative;
  width: 104px;
  height: 104px;
  flex: none;
}
.wts-ring svg { display: block; width: 100%; height: 100%; }
.wts-ring circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  transform-box: view-box;
}
.wts-ring-track { stroke: color-mix(in srgb, var(--c-ivory) 14%, transparent); }
.wts-ring-fill {
  stroke: var(--c-gold);
  transform: rotate(-90deg);
  transition: stroke-dashoffset var(--d-hero) var(--ease-in-out);
}
.wts-ring-now {
  stroke: var(--c-aqua);
  opacity: 0.7;
  transition:
    transform var(--d-hero) var(--ease-in-out),
    stroke-dashoffset var(--d-hero) var(--ease-in-out),
    opacity var(--d-enter) var(--ease-out);
}
.wts-ring.is-done .wts-ring-now { opacity: 0; }
.wts-ring-n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 32px;
  font-family: var(--font-display);
  color: var(--c-ivory);
  line-height: 1;
}
.wts-ring-n b { font-weight: 400; font-size: 36px; letter-spacing: -0.01em; }
.wts-ring-n small { font-size: 15px; color: var(--c-aqua); margin-left: 2px; }
.wts-ring.is-done .wts-ring-n { align-items: center; padding-top: 0; color: var(--c-gold); }
.wts-ring.is-done .wts-ring-n svg { width: 30px; height: 30px; stroke-width: 2; }
@media (max-width: 899px) {
  .wts-ring { width: 72px; height: 72px; }
  .wts-ring-n { padding-top: 22px; }
  .wts-ring-n b { font-size: 26px; }
  .wts-ring-n small { font-size: 12px; }
  .wts-ring.is-done .wts-ring-n svg { width: 22px; height: 22px; }
}

/* Four labelled segments for small screens, where the trail is hidden.
   Done = gold, now = aqua, ahead = a hairline. */
.wts-ticks {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-12);
  list-style: none;
  margin: var(--s-24) 0 0;
  padding: 0;
}
@media (max-width: 899px) { .wts-ticks { display: grid; } }
.wts-ticks li {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ivory) 45%, transparent);
  padding-top: var(--s-8);
  border-top: 2px solid color-mix(in srgb, var(--c-ivory) 14%, transparent);
  transition: border-color var(--d-enter) var(--ease-out), color var(--d-enter) var(--ease-out);
}
.wts-ticks li.is-now  { border-color: var(--c-aqua); color: var(--c-aqua); }
.wts-ticks li.is-done { border-color: var(--c-gold); color: var(--c-ivory); }

.wts-trail {
  list-style: none;
  margin: var(--s-32) 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-ivory) 14%, transparent);
}
@media (max-width: 899px) { .wts-trail { display: none; } }
.wts-trail li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--s-16);
  align-items: baseline;
  padding: var(--s-12) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ivory) 14%, transparent);
}
.wts-trail-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ivory) 55%, transparent);
  transition: color var(--d-enter) var(--ease-out);
}
.wts-trail li.is-now .wts-trail-k { color: var(--c-aqua); }
.wts-trail li.is-done .wts-trail-k { color: var(--c-gold); }
.wts-trail-v {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ivory);
  text-align: left;
}
.wts-trail-v.is-empty { color: color-mix(in srgb, var(--c-ivory) 55%, transparent); font-style: italic; }
button.wts-trail-v {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ivory);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-aqua) 50%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--d-hover) var(--ease-out);
}
button.wts-trail-v:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  button.wts-trail-v:hover { text-decoration-color: var(--c-aqua); }
}

.wts-restart,
.wts-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-sea-text);
  transition: color var(--d-hover) var(--ease-out);
}
.wts-restart { margin-top: var(--s-24); color: var(--c-aqua); }
.wts-restart:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; }
.wts-restart svg,
.wts-back svg { transition: transform var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wts-restart:hover { color: var(--c-ivory); }
  .wts-back:hover { color: var(--c-deep); }
  .wts-restart:hover svg, .wts-back:hover svg { transform: translateX(-3px); }
}

/* ---------- Panel ---------- */
.wts-panel {
  min-height: 520px;
  padding: var(--s-48);
}
@media (max-width: 899px) { .wts-panel { min-height: 0; padding: var(--s-32) var(--s-24); } }
@media (max-width: 767px) { .wts-panel { padding: var(--s-24) var(--s-16) var(--s-32); } }

.wts-q {
  opacity: 1;
  transform: none;
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* Leaving is quicker than arriving. */
.wts-panel.is-leaving .wts-q {
  opacity: 0;
  transform: translateY(-6px);
  transition-duration: 140ms;
  pointer-events: none;
}

.wts-question {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--c-deep);
  margin: 0;
  max-width: 22ch;
  outline: none;
}
.wts-question:focus-visible { outline: 3px solid var(--c-deep); outline-offset: 6px; border-radius: 2px; }
@media (max-width: 767px) { .wts-question { font-size: 27px; } }
.wts-hint {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-slate);
  margin: var(--s-12) 0 0;
  max-width: 54ch;
}

/* ---------- Options ----------
   Tiles, not rows: a 1px stone border at 6px (interactive, by the
   corner rule) so each answer reads as something to press. Selected
   fills mint with a sea border; the indicator fills at the same time. */
.wts-opts {
  list-style: none;
  margin: var(--s-32) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-12);
}
.wts-opt-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 260ms var(--ease-out) calc(var(--i, 0) * 35ms),
    transform 260ms var(--ease-out) calc(var(--i, 0) * 35ms);
  @starting-style {
    opacity: 0;
    transform: translateY(8px);
  }
}
.wts-opt {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: var(--s-24);
  align-items: center;
  width: 100%;
  padding: var(--s-16) var(--s-24);
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-stone);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-ink);
  touch-action: manipulation;
  transition:
    transform var(--d-press) var(--ease-out),
    border-color var(--d-hover) var(--ease-out),
    background-color var(--d-hover) var(--ease-out),
    box-shadow var(--d-hover) var(--ease-out),
    color var(--d-hover) var(--ease-out);
}
@media (max-width: 767px) { .wts-opt { font-size: 16px; padding: var(--s-12) var(--s-16); gap: var(--s-16); } }
.wts-opt:active { transform: scale(0.985); }
.wts-opt.is-selected {
  color: var(--c-deep);
  background: var(--c-mint);
  border-color: var(--c-sea);
}
.wts-opt.is-selected .wts-opt-label { font-weight: 600; }
.wts-opt:focus-visible { outline: 3px solid var(--c-deep); outline-offset: 2px; }

/* The indicator: a ring that fills. Circles for one answer, a rounded
   square for several, the same way radios and checkboxes differ. */
.wts-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-slate);
  color: var(--c-white);
  background: transparent;
  transition:
    background-color var(--d-press) var(--ease-out),
    border-color var(--d-press) var(--ease-out),
    transform var(--d-press) var(--ease-out);
}
.wts-dot--square { border-radius: 6px; }
.wts-dot svg {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--d-press) var(--ease-out),
    transform var(--d-press) var(--ease-out);
}
.wts-opt.is-selected .wts-dot { background: var(--c-sea); border-color: var(--c-sea); }
.wts-opt.is-selected .wts-dot svg { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .wts-opt:hover { color: var(--c-deep); border-color: var(--c-sea); box-shadow: var(--e-sm); }
  .wts-opt:hover .wts-dot { border-color: var(--c-sea); }
  .wts-opt:active .wts-dot { transform: scale(0.9); }
}

.wts-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  margin-top: var(--s-32);
}
.wts-foot .btn:disabled { cursor: not-allowed; }

/* ---------- Result ---------- */
.wts-picks {
  list-style: none;
  margin: var(--s-32) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-stone);
}
.wts-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-24) 0;
  border-bottom: 1px solid var(--c-stone);
  opacity: 1;
  transform: none;
  transition:
    opacity 280ms var(--ease-out) calc(var(--i, 0) * 60ms),
    transform 280ms var(--ease-out) calc(var(--i, 0) * 60ms);
  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}
.wts-pick.is-first { padding: var(--s-32) 0 var(--s-32); }
/* The summary below draws its own top hairline; one line, not two. */
.wts-pick:last-child { border-bottom: 0; }
.wts-pick-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--s-4);
}
.wts-pick.is-first .wts-pick-k { color: var(--c-gold-text); }
.wts-pick-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--c-deep);
  text-decoration: none;
  width: fit-content;
}
.wts-pick.is-first .wts-pick-name { font-size: 32px; }
@media (max-width: 767px) {
  .wts-pick-name { font-size: 21px; }
  .wts-pick.is-first .wts-pick-name { font-size: 26px; }
}
.wts-pick-name .arrow { transition: transform var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wts-pick-name:hover { color: var(--c-sea); }
  .wts-pick-name:hover .arrow { transform: translateX(4px); }
}
.wts-pick-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sea-text);
}
.wts-pick-line { font-size: 16px; line-height: 1.6; color: var(--c-ink); margin: var(--s-8) 0 0; max-width: 60ch; }
.wts-pick-why  { font-size: 14px; line-height: 1.55; color: var(--c-slate); margin: var(--s-4) 0 0; max-width: 60ch; }
.wts-pick-why::before { content: "Why it's here: "; font-weight: 600; color: var(--c-slate); }

.wts-none { font-size: 17px; line-height: 1.65; color: var(--c-ink); margin: var(--s-32) 0 0; max-width: 56ch; }
.wts-none a { color: var(--c-sea-text); font-weight: 600; text-underline-offset: 3px; }

/* The summary. The panel is already the surface, so this is a
   hairlined block inside it, not a card inside a card. */
.wts-bring {
  margin-top: var(--s-48);
  padding-top: var(--s-32);
  border-top: 1px solid var(--c-stone);
}
.wts-bring h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--c-deep);
  margin: 0 0 var(--s-16);
}
.wts-bring-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12) var(--s-32);
  margin: 0;
  padding: var(--s-16) 0;
  border-top: 1px solid var(--c-stone);
  border-bottom: 1px solid var(--c-stone);
}
@media (max-width: 599px) { .wts-bring-list { grid-template-columns: 1fr; } }
.wts-bring-list div { display: grid; gap: 2px; }
.wts-bring-list dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
}
.wts-bring-list dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.wts-bring-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-24);
}
/* Three actions: book leads, the two "send us your answers" share a row
   and drop under it on narrow screens. */
.wts-bring-actions .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .wts-bring-actions .btn-primary { flex: 0 0 auto; } }
@media (max-width: 599px) { .wts-bring-actions .btn-primary { flex-basis: 100%; } }
.wts-fine { font-size: 13px; line-height: 1.55; color: var(--c-slate); margin: var(--s-16) 0 0; max-width: 60ch; }

/* ---------- In person ---------- */
.wts-how-head { max-width: 640px; margin-bottom: var(--s-48); }
.wts-how-head .eyebrow { margin-bottom: var(--s-16); }
.wts-how-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--c-deep);
  margin: 0;
}
@media (max-width: 767px) { .wts-how-head h2 { font-size: 28px; } }
.wts-how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-48);
}
@media (max-width: 899px) { .wts-how { grid-template-columns: 1fr; gap: var(--s-32); } }
.wts-how li { display: grid; gap: var(--s-8); align-content: start; }
.wts-how-n {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--c-sea);
  margin-bottom: var(--s-8);
}
.wts-how h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--c-ink);
  margin: 0;
}
.wts-how p { font-size: 15px; line-height: 1.65; color: var(--c-slate); margin: 0; max-width: 40ch; }

/* ---------- The full map ---------- */
.wts-index-head { max-width: 640px; margin-bottom: var(--s-48); }
.wts-index-head .eyebrow { margin-bottom: var(--s-16); }
.wts-index-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--c-deep);
  margin: 0 0 var(--s-12);
}
@media (max-width: 767px) { .wts-index-head h2 { font-size: 28px; } }
.wts-index-head p { font-size: 17px; line-height: 1.65; color: var(--c-slate); margin: 0; }

.wts-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s-24) var(--s-64);
  padding: var(--s-32) 0;
  border-top: 1px solid var(--c-stone);
}
.wts-lane:last-child { border-bottom: 1px solid var(--c-stone); }
@media (max-width: 899px) { .wts-lane { grid-template-columns: 1fr; gap: var(--s-16); } }
.wts-lane-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--c-deep);
  margin: 0 0 var(--s-8);
}
.wts-lane-head p { font-size: 15px; line-height: 1.6; color: var(--c-slate); margin: 0; max-width: 36ch; }
.wts-lane-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16) var(--s-32);
}
@media (max-width: 599px) { .wts-lane-list { grid-template-columns: 1fr; } }
.wts-lane-list li { display: grid; gap: 2px; }
.wts-lane-list a {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-deep);
  text-decoration: underline;
  text-decoration-color: var(--c-seafoam);
  text-underline-offset: 3px;
  width: fit-content;
  transition: text-decoration-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .wts-lane-list a:hover { color: var(--c-sea); text-decoration-color: var(--c-sea); }
}
.wts-lane-list span { font-size: 14px; line-height: 1.55; color: var(--c-slate); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wts-q, .wts-opt-item, .wts-pick, .wts-opt, .wts-dot, .wts-dot svg,
  .wts-jump svg, .wts-restart svg, .wts-back svg, .wts-pick-name .arrow,
  .wts-ticks li, .wts-trail-k, .wts-ring-fill, .wts-ring-now {
    transition: none;
  }
  .wts-panel.is-leaving .wts-q { opacity: 1; transform: none; }
  .wts-opt:active, .wts-opt:active .wts-dot { transform: none; }
  .wts-jump:hover svg, .wts-restart:hover svg, .wts-back:hover svg, .wts-pick-name:hover .arrow { transform: none; }
}