/* The wizard (W3): Navigator's conversation beside "Your plan, taking shape". Kit tokens only; the clinic's own
   colors appear only inside the site frame and the swatches, marked [data-brand-colour]. */

.wz-body { background: var(--color-ground); }
.wz { --wz-past: 156px; display: flex; min-height: 100dvh; flex-direction: column; }
.wz-top { position: sticky; top: 0; z-index: var(--z-topbar); background: var(--color-ground); display: flex; width: 100%; max-width: calc(1320px + 2 * var(--gutter)); align-items: center; gap: var(--space-4); margin: 0 auto; padding: var(--space-4) var(--gutter); }
.wz-brand { display: inline-flex; height: 40px; flex-shrink: 0; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-full); font-weight: var(--weight-medium); color: var(--color-ink); white-space: nowrap; }
.wz-brand:hover { background: var(--color-wash); }
.wz-brand__rest { white-space: pre; }
.wz-back[hidden] { display: inline-flex; visibility: hidden; }
.wz-stages { min-width: 0; flex: 1; max-width: 640px; margin-left: auto; }
.wz-ask { width: 44px; height: 44px; flex-shrink: 0; padding: 0; justify-content: center; }
.wz-grid { display: grid; width: 100%; max-width: calc(1320px + 2 * var(--gutter)); flex: 1; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; align-content: start; margin: 0 auto; padding: 0 var(--gutter) var(--space-12); }
@media (min-width: 1024px) {
  .wz-grid { grid-template-columns: minmax(0, var(--convo)) minmax(0, 1fr); gap: var(--space-12); }
  .wz-canvas { clip-path: inset(0 round var(--radius-xl)); position: sticky; top: 80px; max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .wz-canvas .k-canvas__head { position: sticky; top: 0; z-index: 1; background: var(--color-surface); }
  .wz-canvas .k-canvas__count { display: none; }
}
@media (min-width: 1280px) { .wz-grid { gap: var(--space-16); } }
@media (max-width: 1023px) { .wz-canvas { order: -1; } }
.wz-after:empty { display: none; }
.wz-after { padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }

/* ── The conversation: earlier answers (a fixed box), the turn in focus, the composer ─────────────────── */
.wz-convo { gap: var(--space-5); position: relative; padding-top: var(--space-2); }
.wz-mini { display: none; }
@media (max-width: 767px) {
  .wz-past .k-answer__a { overflow: visible; white-space: normal; text-overflow: clip; }
  .wz-past .k-answer { align-items: flex-start; }
  /* The read on a phone: a small frame over the answers band, while it runs and until the clinic is confirmed. */
  .wz[data-mini] .wz-mini { position: absolute; z-index: 2; left: 0; right: 0; top: var(--space-2); display: flex; height: var(--wz-past); align-items: stretch; gap: var(--space-4); background: var(--color-ground); animation: k-rise var(--duration-slow) var(--ease-out) both; }
  .wz-mini__frame { width: 156px; flex-shrink: 0; }
  .wz-mini__frame .wz-site__chrome { height: 22px; gap: var(--space-2); padding: 0 var(--space-2); }
  .wz-mini__frame .wz-site__url { overflow: hidden; padding: 0 var(--space-2); white-space: nowrap; text-overflow: ellipsis; line-height: 16px; }
  .wz-mini__frame .wz-site__scan { top: 22px; }
  .wz-mini__page { display: flex; height: calc(100% - 22px); flex-direction: column; gap: var(--space-2); padding: var(--space-2); background: var(--color-surface-2); }
  .wz-mini__nav { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
  .wz-mini__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ink); }
  .wz-mini__photo { position: relative; flex: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-ground-2); transition: background-color var(--duration-slow) var(--ease-standard); }
  .wz-mini__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .wz-mini__text { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: var(--space-1); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
  .wz-mini__text b { font-weight: var(--weight-medium); color: var(--color-ink); }
}
/* The chat (P18.12): earlier turns scroll above the question as Navigator's line and the owner's reply, right-aligned.
   The transcript and the question share one fixed stage (start.js sizes the transcript to what the question leaves),
   so the answers start at the same place every turn (P9.5). */
.wz-past { display: flex; height: var(--wz-past); flex-direction: column; gap: var(--space-3); overflow-y: auto; scrollbar-width: thin; mask-image: linear-gradient(to bottom, transparent 0, var(--color-ink) 32px); }
.wz-past:empty { mask-image: none; }
.wz-past > :first-child { margin-top: auto; }
.wz-pastturn { display: flex; flex-direction: column; gap: var(--space-1); }
.wz-said { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.wz-said .k-face { width: 24px; height: 24px; box-shadow: 0 0 0 1px var(--color-brand-tint-2); }
.wz-reply { position: relative; display: inline-flex; max-width: 80%; min-height: 36px; align-self: flex-end; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); background: var(--color-ground-2); color: var(--color-ink); transition: background-color var(--duration-ui) var(--ease-standard); }
.wz-reply:hover, .wz-reply:focus-within { background: var(--color-brand-tint); }
.wz-reply__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body); line-height: var(--leading-body); }
.wz-reply__edit { display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-ink-3); }
.wz-reply__edit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wz-reply:hover .wz-reply__edit, .wz-reply__edit:focus-visible { color: var(--color-brand); }
.wz-now .k-turn { display: grid; grid-template-rows: auto auto; gap: var(--space-5); }
.wz-now .k-msg { align-self: end; }
/* A new question arrives as a message: three dots for a beat (start.js, ≤ 600 ms), then the words and the answers. */
.wz-now .k-msg__text { position: relative; }
.wz-typing { position: absolute; left: 0; top: 28px; }
.wz-now .k-turn[data-arriving] .k-msg__line, .wz-now .k-turn[data-arriving] .k-msg__sub, .wz-now .k-turn[data-arriving] .wz-area { visibility: hidden; }
.wz-now .k-turn.wz-arrive .k-msg__line, .wz-now .k-turn.wz-arrive .k-msg__sub { animation: k-rise var(--duration-slow) var(--ease-out) both; }
.wz-now .k-turn.wz-arrive .wz-area { animation: k-rise var(--duration-slow) var(--ease-out) both; }
.wz-now .k-msg__line { font-size: var(--display-m); line-height: var(--display-m-leading); }
.wz-area { display: flex; flex-direction: column; gap: var(--space-5); }
.wz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.wz-row--field { align-items: flex-end; }
.wz-row--field .k-field { min-width: 0; flex: 1; }
.wz-zip { max-width: 200px; }
.wz-fields { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.wz-dock { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); }
.wz-side:not(:has(.k-says, .k-asked)) { display: none; }
.wz-note, .wz-side { display: flex; flex-direction: column; gap: var(--space-3); }
.wz-note:empty { display: none; }
.wz-side .nv-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.wz-side .k-says { font-size: var(--text-body); line-height: var(--leading-body); }
@media (max-width: 767px) {
  .wz { --wz-past: 120px; }
  .wz-top { gap: var(--space-2); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .wz-brand__rest { display: none; }   /* the short wordmark, where the stages need the room */
  .wz-now .k-msg__line { font-size: 28px; line-height: 34px; }
  .wz-fields { grid-template-columns: minmax(0, 1fr); }
  .wz-row .wz-go { width: 100%; }
}

/* The summary: what I heard → the likely cause → what the plan does */
.wz-heard { display: flex; flex-direction: column; gap: var(--space-3); }
.wz-core { position: relative; display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-20) var(--space-4) 0; border-top: 1px solid var(--color-hairline); }
.wz-core:first-child { border-top: 0; padding-top: 0; }
.wz-core__heard { font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-core__cause { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.wz-core__action { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-brand); }
.wz-core__action .k-icon { flex-shrink: 0; margin-top: 4px; }
.wz-core__fix { position: absolute; top: var(--space-3); right: 0; }
.wz-core:first-child .wz-core__fix { top: -6px; }

/* Sign-up: the providers, the generic account chooser */
.wz-providers { max-width: 400px; }
.wz-chooser { display: flex; max-width: 440px; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-2); }
.wz-chooser__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); box-shadow: 0 1px 0 var(--color-hairline); }
.wz-account { display: flex; width: 100%; min-height: 64px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); text-align: left; transition: background-color var(--duration-ui) var(--ease-standard); }
.wz-account:hover { background: var(--color-surface-2); }
.wz-account + .wz-account { box-shadow: 0 -1px 0 var(--color-hairline); }
.wz-account__who { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.wz-account__who b { font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-account__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.wz-account--other { min-height: 52px; font-size: var(--text-meta); color: var(--color-ink-2); }

/* ── The canvas: the site frame, the brand card, the issues, the plan ─────────────────────────────────── */
.wz-read { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-site { --site-primary: var(--color-ink-4); --site-accent: var(--color-hairline-strong); --site-ink: var(--color-ink-3); --site-paper: var(--color-surface-2); --site-head: var(--font-display); --site-body: var(--font-sans);
  position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-1); transform-origin: top center; transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-out); }
.wz-read:has(.wz-site[data-done]) { display: none; }
.wz-site__chrome { display: flex; height: 28px; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); background: var(--color-ground-2); }
.wz-site__dots { display: inline-flex; gap: var(--space-1); }
.wz-site__dots i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-hairline-strong); }
.wz-site__url { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-caption); line-height: 20px; color: var(--color-ink-3); }
[data-explain] .wz-site__page { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--site-paper); color: var(--site-ink); transition: background-color var(--duration-explain) var(--ease-standard); }
.wz-site__nav { display: flex; align-items: center; gap: var(--space-2); }
.wz-site__logo { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--site-primary); color: var(--site-paper); font-family: var(--site-head); font-size: var(--text-caption); }
.wz-site__logo:has(img) { background: transparent; }
.wz-site__logo img { width: 100%; height: 100%; object-fit: contain; }
.wz-site__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--site-head); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--site-ink); }
.wz-site__name[data-found] { width: 120px; height: 10px; border-radius: var(--radius-sm); background: var(--site-ink); opacity: 0.7; }
.wz-site__name[data-empty] { width: 96px; height: 10px; border-radius: var(--radius-sm); background: var(--color-hairline); }
.wz-site__links { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.wz-site__links i { width: 28px; height: 6px; border-radius: var(--radius-full); background: var(--site-ink); opacity: 0.25; }
.wz-site__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.wz-site__text { display: flex; flex-direction: column; gap: var(--space-3); }
.wz-site__hero { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--site-head); font-size: var(--text-meta); line-height: 18px; color: var(--site-ink); }
.wz-site__hero i { display: block; height: 10px; border-radius: var(--radius-sm); background: var(--site-ink); opacity: 0.2; }
.wz-site__hero i + i { width: 70%; }
[data-explain] .wz-site__hero span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; animation: k-fade var(--duration-explain) var(--ease-out) both; }
[data-explain] .wz-site__cta { width: 72px; height: 16px; border-radius: var(--radius-full); background: var(--site-primary); transition: background-color var(--duration-explain) var(--ease-standard); }
[data-explain] .wz-site__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--site-accent); opacity: 0.85; transition: background-color var(--duration-explain) var(--ease-standard); }
.wz-site__photo:has(img) { opacity: 1; }
[data-explain] .wz-site__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: k-fade var(--duration-explain) var(--ease-out) both; }
.wz-site__scan { position: absolute; left: 0; right: 0; top: 28px; height: 32px; height: 3px; background: var(--color-brand-mark); opacity: 0.6; pointer-events: none; animation: wz-scan var(--duration-explain-max) var(--ease-in-out) infinite alternate; }
.wz-site[data-done] .wz-site__scan { display: none; }
@keyframes wz-scan { from { transform: translateY(0); } to { transform: translateY(120px); } }
.wz-site__note { padding-left: var(--space-1); }
[data-explain] .wz-lift { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-2); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ink); pointer-events: none; animation: wz-lift var(--duration-explain-max) var(--ease-out) both; }
@keyframes wz-lift { 0% { opacity: 0; transform: translate(-50%, 8px); } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56px); } }
@media (max-width: 767px) { .wz-site__body { grid-template-columns: minmax(0, 1fr) 96px; } }

.wz-canvas .k-brandcard__top > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.wz-canvas .k-brandcard__top > div:has(.wz-editbtn) { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.wz-canvas .k-brandcard__top .k-brandcard__url { flex-basis: 100%; }
.wz-canvas .k-brandcard__name { min-width: 0; }
.wz-canvas .k-brandcard__name:empty { width: 60%; height: 28px; border-radius: var(--radius-sm); background: var(--color-ground-2); animation: k-shimmer 600ms var(--ease-in-out) infinite alternate; }
.wz-canvas .k-brandcard__row { align-items: center; }
.wz-canvas .k-brandcard__val { min-width: 0; flex: 1; }
.wz-count { padding: 0; font: inherit; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-hairline-strong); text-underline-offset: 3px; }
.wz-count:hover { color: var(--color-brand); }
.wz-editbtn { opacity: 0.6; transition: opacity var(--duration-ui) var(--ease-standard); }
.k-brandcard__row:hover .wz-editbtn, .k-brandcard__top:hover .wz-editbtn, .wz-editbtn:focus-visible { opacity: 1; }
.wz-inline { width: 100%; }
.wz-brandline { display: flex; align-items: center; gap: var(--space-4); }
.wz-brandline .k-brandcard__logo { width: 44px; height: 44px; font-size: var(--text-title); }
.wz-brandline__text { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.wz-brandline__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-brandline__text span { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }

.wz-issues { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-issues li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.wz-issues li .k-icon { flex-shrink: 0; margin-top: 4px; }
.wz-issues b { font-weight: var(--weight-medium); color: var(--color-ink); }

/* The plan */
.wz-plan { display: flex; flex-direction: column; gap: var(--space-6); }
.wz-goal__label { margin-bottom: var(--space-1); }
.wz-goal { font-family: var(--font-display); font-size: var(--display-s); line-height: var(--display-s-leading); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }
.wz-focus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wz-focus__btn { display: inline-flex; min-height: 32px; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline-strong); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); transition: background-color var(--duration-ui) var(--ease-standard), box-shadow var(--duration-ui) var(--ease-standard); }
.wz-focus__btn:hover, .wz-focus__btn[aria-checked="true"] { background: var(--color-brand-tint); box-shadow: inset 0 0 0 1px var(--color-brand-mark); color: var(--color-brand); }
.wz-plan__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.wz-plan__side { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.wz-plan__side .k-media { display: none; }
.wz-plan__info { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1280px) { .wz-plan__side { grid-template-columns: 240px minmax(0, 1fr); } .wz-plan__side .k-media { display: flex; max-width: 220px; } }
.wz-phases { display: flex; flex-direction: column; gap: var(--space-5); }
.wz-phase { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-phase__name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-phase__n { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-ground-2); font-family: var(--font-display); font-size: var(--text-body); font-weight: var(--weight-regular); color: var(--color-ink-2); }
.wz-steps { display: flex; flex-direction: column; margin-left: 11px; padding-left: var(--space-4); box-shadow: inset 2px 0 0 var(--color-hairline); }
.wz-step { position: relative; display: flex; min-height: 44px; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); transition: background-color var(--duration-ui) var(--ease-standard), opacity var(--duration-ui) var(--ease-standard); }
.wz-step .k-icon { flex-shrink: 0; }
.wz-step__title { min-width: 0; flex: 1; }
.wz-step__week { flex-shrink: 0; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-brand); }
.wz-step__we { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-1); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-brand); }
.wz-step .k-pill { flex-shrink: 0; }
.wz-step[data-week="1"] .wz-step__title::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--space-2); vertical-align: middle; border-radius: var(--radius-full); background: var(--color-warning); }
.wz-legend { display: flex; align-items: center; gap: var(--space-2); }
.wz-legend__dot { width: 6px; height: 6px; margin-left: var(--space-3); border-radius: var(--radius-full); background: var(--color-warning); }
.wz-step[data-highlight]::before { content: ""; position: absolute; left: -19px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: var(--radius-full); background: var(--color-brand-mark); }
.wz-step[data-focus] { background: var(--color-brand-tint); color: var(--color-ink); }
.wz-first { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-desk { display: flex; justify-content: center; padding: var(--space-5) var(--space-6) var(--space-6) var(--space-4); border-radius: var(--radius-lg); }
.wz-firstcap { display: flex; flex-direction: column; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.wz-firstcap b { font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-found { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); }
.wz-found b { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-regular); color: var(--color-ink); }
.wz-sub { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); box-shadow: 0 -1px 0 var(--color-hairline); }
.wz-h { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-mode { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) { .wz-mode { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wz-badge > p { max-width: 60ch; color: var(--color-ink-2); }
.wz-chain { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wz-chain li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-brand-tint); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink); }
.wz-value { padding-top: var(--space-2); }

/* Home's first viewport, waiting at its place for the hand-off (home-hero.js) */
.wz-hero { visibility: hidden; pointer-events: none; }

/* The pieces that travel to Home in the hand-off */
.wz-fly { position: fixed; z-index: var(--z-dialog); pointer-events: none; transform-origin: 0 0; }
.wz-fly > * { width: 100%; }

/* ── The hand-off: the conversation fades, the canvas moves to the middle, "Setting up your dashboard" ── */
.wz[data-leaving] .wz-top { opacity: 0; transition: opacity var(--duration-slow) var(--ease-in); pointer-events: none; }
/* The conversation steps back as Home comes up over it (Home's ground covers it as it lands). */
.wz[data-leaving] .wz-convo { opacity: 0.2; transition: opacity var(--duration-slow) var(--ease-in); pointer-events: none; }

/* On the sign-up turn the canvas keeps the goal and the first packet; the steps wait on Home. */
.wz[data-turn-now="signup"] .wz-plan > :not(.wz-goal):not(.wz-plan__grid):not(.wz-promise), .wz[data-turn-now="signup"] .wz-phases, .wz[data-turn-now="signup"] .wz-plan__side .k-media { display: none; }

/* "A few things your site didn't say": name and address full width, phone and fax side by side. */
.wz-fields.wz-fields--few { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wz-fields--few > .wz-wide { grid-column: 1 / -1; }
.wz-made { margin-left: var(--space-3); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.k-brandcard__val:has(.wz-made) { display: flex; align-items: center; }

/* Kinds on the brand card (P11.2): found rows read plainly; what was made for you and what is to add look different. */
.wz-canvas .k-brandcard__row[data-kind="made"] .k-brandcard__val { color: var(--color-ink-2); }
.wz-canvas .k-brandcard__row[data-kind="made"] > .k-icon { color: var(--color-brand-mark); }
.wz-canvas .k-brandcard__row[data-kind="missing"] .k-brandcard__val { color: var(--color-ink-3); }
.wz-canvas .k-brandcard__row[data-kind="missing"] > .k-icon { color: var(--color-ink-4); }
.wz-canvas .k-brandcard__logo[data-kind="made"] { box-shadow: inset 0 0 0 1px var(--color-hairline-strong); background: var(--color-surface-2); }
.wz-lift[data-kind="made"], .wz-lift[data-kind="missing"] { color: var(--color-ink-3); }
.wz-lift::after { content: attr(data-label); }

/* The canvas only grows: the plan's outline appears at the summary, then the plan builds in beneath it
   (no fade of the whole section, so it is never blank). */
.wz-preview { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.wz-preview li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); }
.wz-canvas [data-section="plan"][data-state="filled"] .k-canvas__fill { animation: none; }
.wz-plan > :not(:first-child) { animation: k-rise var(--duration-slow) var(--ease-out) both; }
.wz-plan > :nth-child(3) { animation-delay: 60ms; } .wz-plan > :nth-child(4) { animation-delay: 120ms; } .wz-plan > :nth-child(n+5) { animation-delay: 180ms; }

/* ── Phase 4 (W4): the new turns, the website check, the front desk ───────────────────────────────────── */
/* "Here for an organization?" and the track's Other topics: quiet links, their chips beneath. */
.wz-other { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-left: var(--space-5); }
.wz-other .k-link { min-height: 32px; }
.wz-other summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.wz-other summary::-webkit-details-marker { display: none; }
.wz-other[open] summary { margin-bottom: var(--space-3); }
@media (max-width: 479px) { .wz-other { padding-left: 0; } }
.wz-more { min-height: 44px; }
.wz-others { display: flex; flex-direction: column; gap: var(--space-4); }
.wz-others[hidden] { display: none; }
.wz-others__group { display: flex; flex-direction: column; gap: var(--space-2); }
/* What physicians expect: the five as toggles, each with its practice in plain words */
.wz-practices .k-chip { min-height: 48px; padding-top: var(--space-2); padding-bottom: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); }
.wz-practices { gap: var(--space-2); }
.wz-all { min-height: 52px; font-size: var(--text-body); line-height: var(--leading-body); }
/* The summary's triage line */
.wz-triage { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) var(--space-20) 0 0; border-top: 1px solid var(--color-hairline); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink-2); }
.wz-triage > .k-icon { flex-shrink: 0; margin-top: 4px; }
.wz-triage > div { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-triage .wz-core__fix { top: var(--space-3); }
/* The reading frame says what the moving line is (Brian, L654). */
.wz-site__label { position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-1); font-size: var(--text-caption); line-height: 24px; color: var(--color-ink-2); }
.wz-site[data-done] .wz-site__label, .wz-site[data-read] .wz-site__label, .wz-site[data-read] .wz-site__scan { display: none; }
/* A quick look at your site (on the brand card, after the read) */
.wz-check { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); box-shadow: 0 -1px 0 var(--color-hairline); }
.wz-check__h { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-check__cols { display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 479px) { .wz-check__cols { grid-template-columns: minmax(0, 1fr); } }
.wz-check__col ul { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.wz-check__col li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); }
.wz-check__col li .k-icon { flex-shrink: 0; margin-top: 2px; }
.wz-check__talk .k-link { min-height: 24px; color: var(--color-brand); }
.wz-card--checked .k-brandcard__row[data-field="hours"], .wz-card--checked .k-brandcard__row[data-field="services"], .wz-card--checked .k-brandcard__row[data-field="team"], .wz-card--checked .k-brandcard__url { display: none; }
/* The canvas: the chosen track above the issues, the practices to learn first under them */
.wz-issues__track b, .wz-issues__learn b { font-weight: var(--weight-medium); }
/* The plan turn's front-desk row */
.wz-staff { display: flex; max-width: 440px; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); box-shadow: 0 -1px 0 var(--color-hairline); }
.wz-staff--suggest { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-brand-tint); box-shadow: none; }
.wz-staff__title, .wz-staff__done { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink); }
.wz-staff__title .k-icon, .wz-staff__done .k-icon { flex-shrink: 0; }
.wz-staff .wz-row { flex-wrap: nowrap; gap: var(--space-3); }
.wz-staff .k-field { min-width: 0; flex: 1; }
.wz-staff > .k-btn { align-self: flex-start; }
/* The organization's plan: the team's first course beside the first-for-everyone line */
.wz-plan__side--org { align-items: start; }

/* ── Phase 4b (W4b): who hears from you first, and the promise carried through ─────────────────────────── */
.wz-promise { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-brand); }
.wz-doctors { display: flex; flex-direction: column; gap: var(--space-2); }
/* The search: four steps, each with its check as it arrives, then the count; folded away once found */
.wz-search { display: grid; grid-template-rows: 1fr; gap: var(--space-1); transition: grid-template-rows var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-standard), margin var(--duration-slow) var(--ease-out); }
.wz-search > li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); opacity: 0; transform: translateY(4px); transition: opacity var(--duration-ui) var(--ease-standard), transform var(--duration-ui) var(--ease-out); }
.wz-search > li[data-done] { opacity: 1; transform: none; }
.wz-search > li .k-icon { flex-shrink: 0; }
.wz-search__count { font-size: var(--text-body) !important; line-height: var(--leading-body) !important; font-weight: var(--weight-medium); color: var(--color-ink) !important; font-variant-numeric: tabular-nums; }
.wz-search[data-folded] { display: none; }
.wz-found1 { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-2); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-found1 .k-icon { flex-shrink: 0; }
.wz-doctors[data-searching] .wz-found1 { display: none; }
/* Quick picks and Show all */
.wz-dtools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.wz-dtools .wz-dall { margin-left: auto; }
.wz-dchips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wz-dchip { display: inline-flex; min-height: 36px; align-items: center; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-hairline-strong); font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); transition: background-color var(--duration-ui) var(--ease-standard), box-shadow var(--duration-ui) var(--ease-standard), color var(--duration-ui) var(--ease-standard); }
.wz-dchip[aria-pressed="true"] { background: var(--color-brand-tint); box-shadow: inset 0 0 0 1px var(--color-brand-mark); color: var(--color-brand); }
.wz-dall { min-height: 36px; }
/* The list, nearest first: it scrolls inside the answer area; the tally stays pinned beneath it */
.wz-dlist { display: flex; min-height: 92px; flex: 1 1 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
/* the tally and the source line are the search's result: their room is kept, and they show once it is done */
.wz-tally[data-pending], .wz-source[data-pending] { visibility: hidden; }
@media (hover: hover) { .wz-dchip:hover { background: var(--color-brand-tint); color: var(--color-brand); } }
.wz-mapslot:empty { display: none; }
.wz-mapslot .wz-map__svg { max-width: 240px; }
.wz-subswap { display: grid; }
.wz-subswap > span { grid-area: 1 / 1; }
.wz-subswap > [data-off] { visibility: hidden; }
.wz-doc { display: grid; width: 100%; min-height: 44px; flex-shrink: 0; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-1) var(--space-3); padding: 0 var(--space-4); text-align: left; box-shadow: 0 -1px 0 var(--color-hairline); transition: background-color var(--duration-ui) var(--ease-standard); animation: k-rise var(--duration-ui) var(--ease-out) both; }
.wz-doc:first-child { box-shadow: none; }
.wz-doc[hidden] { display: none; }
.wz-doc:hover, .wz-doc:focus-visible { background: var(--color-surface-2); }
.wz-doc:focus-visible { outline: 2px solid var(--color-brand-mark); outline-offset: -2px; }
.wz-doc__box { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--color-ink-4); background: var(--color-surface); color: var(--color-on-brand); transition: background-color var(--duration-ui) var(--ease-standard), box-shadow var(--duration-ui) var(--ease-standard); }
.wz-doc__box .k-icon { opacity: 0; transform: scale(0.6); transition: opacity var(--duration-ui) var(--ease-standard), transform var(--duration-ui) var(--ease-out); }
.wz-doc[aria-checked="true"] .wz-doc__box { background: var(--color-brand); box-shadow: none; }
.wz-doc[aria-checked="true"] .wz-doc__box .k-icon { opacity: 1; transform: none; }
.wz-doc__who { display: flex; min-width: 0; flex-direction: column; }
.wz-doc__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--color-ink); }
.wz-doc__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-3); }
.wz-doc__mi { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.wz-doc__ch { min-width: 92px; text-align: right; font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
/* The tally and the buttons, pinned right under the list (the list scrolls inside its box, so they stay in view) */
.wz-dfoot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); margin-top: auto; padding: var(--space-1) 0; background: var(--color-ground); }
.wz-tally { display: flex; flex-direction: column; gap: var(--space-1); }
.wz-tally__line { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink); }
.wz-tally__split { color: var(--color-ink-2); }
.wz-tally__total { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.wz-later { min-height: 44px; white-space: nowrap; }
.wz-source { color: var(--color-ink-3); }
/* The map on the canvas: the clinic's pin, rings at 1, 3 and 5 miles, the offices as dots arriving nearest first */
.wz-map { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-map__svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.wz-map__svg, .wz-map__svg g { fill: var(--color-ink-3); }
.wz-map__ring circle { fill: none; stroke: var(--color-hairline-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.wz-map__ring text { font-family: var(--font-sans); font-size: 9px; fill: var(--color-ink-3); }
.wz-map__pin path { fill: var(--color-brand); }
.wz-map__pin circle { fill: var(--color-on-brand); }
.wz-map__dot { fill: var(--color-surface); stroke: var(--color-ink-3); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity var(--duration-ui) var(--ease-standard), transform var(--duration-ui) var(--ease-out), fill var(--duration-ui) var(--ease-standard), stroke var(--duration-ui) var(--ease-standard); }
.wz-map__dot[data-in] { opacity: 1; transform: none; }
.wz-map__dot[data-chosen="true"] { fill: var(--color-brand); stroke: var(--color-brand); }
.wz-map__dot[data-lit] { transform: scale(1.8); stroke: var(--color-brand); stroke-width: 2; }
.wz-map__line { text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .wz-dlist { flex: none; max-height: 40dvh; }
  .wz-dfoot .wz-source { display: none; }
  .wz-dfoot .wz-row { flex-wrap: nowrap; gap: var(--space-3); }
  .wz-dfoot .wz-row .wz-go { width: auto; flex: 1; }
  .wz-mapslot .wz-map__svg { max-width: 200px; }
  .wz-mapslot .wz-map__line { display: none; }
  .wz-doc { grid-template-columns: 20px minmax(0, 1fr) auto; padding: var(--space-2) var(--space-3); }
  .wz-doc__mi { grid-column: 3; grid-row: 1; }
  .wz-doc__ch { grid-column: 2 / 4; grid-row: 2; min-width: 0; text-align: left; }
  .wz-search > li { font-size: var(--text-meta); line-height: var(--leading-meta); }
}
@media (prefers-reduced-motion: reduce) { .wz-doc, .wz-search, .wz-search > li, .wz-map__dot { animation: none; transition: none; } }
.wz:not([data-turn-now="doctors"]) .wz-map { flex-direction: row; align-items: center; gap: var(--space-4); }
.wz:not([data-turn-now="doctors"]) .wz-map__svg { width: 136px; flex-shrink: 0; margin: 0; }
.wz:not([data-turn-now="doctors"]) .wz-map__line { text-align: left; }
/* P2.5: a section with nothing in it yet stays off the canvas; the thumbnail map drops its ring labels */
.wz-canvas [data-section="doctors"][data-state="empty"], .wz-canvas [data-section="plan"][data-state="empty"] { display: none; }
.wz:not([data-turn-now="doctors"]) .wz-map__ring text { display: none; }
/* P12.3: each answered section on the canvas reopens its turn in one click (a quiet icon, like the summary's) */
.wz-secfix { flex-shrink: 0; margin-left: auto; opacity: 0.6; transition: opacity var(--duration-ui) var(--ease-standard); }
.wz-secfix:hover, .wz-secfix:focus-visible { opacity: 1; }
.wz-secfix[hidden] { display: none; }
.wz-issues li { align-items: center; }
.wz-issues li > span { min-width: 0; flex: 1; }
.wz-map .wz-secfix { align-self: flex-end; }
.wz:not([data-turn-now="doctors"]) .wz-map .wz-secfix { align-self: center; }
/* the summary and the plan show the owner's last reply alone, unfaded */
.wz-past[data-last] { mask-image: none; }
@media (min-width: 768px) { .wz-source--top { display: none; } }
/* The hand-off's one card: the canvas's plan box becoming Home's Your 90 days (start.js grow) */
.wz-grow { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--color-surface); pointer-events: none; }
.wz-grow__in { position: absolute; }