body { background: var(--cream); }
  .page { max-width: 1440px; min-height: 100vh; width: 100%; margin: 0 auto; }

  .quiz-nav { display:flex; align-items:center; justify-content:space-between; padding:var(--s-5) var(--s-7); border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--cream); z-index:10; }
  .progress { flex:1; max-width:480px; margin:0 var(--s-7); display:flex; align-items:center; gap:var(--s-3); }
  .progress-bar { flex:1; height:4px; background:var(--rule); border-radius:var(--r-pill); overflow:hidden; }
  .progress-bar .fill { height:100%; background:var(--grow); border-radius:var(--r-pill); }
  .progress-label { font-family:var(--mono); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); }
  /* Right-side actions on the quiz nav. Two pill-style CTAs with
     distinct intents: Adjust = ghost (secondary, "redo"), Browse =
     terra-primary (forward, "explore more"). Gap + different fills
     make them clearly separate actions, not a single button group. */
  .nav-actions { display:flex; align-items:center; gap:14px; }
  .nav-pill {
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--sans); font-size:var(--t-small); font-weight:500;
    padding:9px 16px; border-radius:var(--r-pill);
    text-decoration:none; cursor:pointer;
    border:1px solid transparent; line-height:1;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
    white-space:nowrap;
  }
  .nav-pill svg { display:block; flex-shrink:0; }
  .nav-pill-ghost {
    background:var(--paper);
    color:var(--ink);
    border-color:var(--rule);
  }
  .nav-pill-ghost:hover {
    background:var(--cream-deep);
    border-color:var(--ink-soft);
    transform:translateY(-1px);
  }
  .nav-pill-primary {
    background:var(--forest);
    color:var(--cream);
    border-color:var(--forest);
    box-shadow: 0 1px 0 rgba(1,66,73,0.25);
  }
  .nav-pill-primary:hover {
    background:var(--forest-deep);
    border-color:var(--forest-deep);
    transform:translateY(-1px);
  }
  .nav-pill .arrow { font-weight:500; transition: transform 160ms ease; }
  .nav-pill-primary:hover .arrow { transform: translateX(2px); }

  /* Compact stack on small screens so the two pills don't push the
     progress bar off the row. */
  @media (max-width: 720px) {
    .nav-actions { gap:var(--s-2); }
    .nav-pill { padding:7px 12px; font-size:12px; }
    .nav-pill .label-long { display:none; }
  }

  .results-head {
    padding: 80px 96px 48px;
    text-align: start;
    max-width: 1100px;
  }
  .results-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--olive-deep);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }
  .results-eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--grow);
    box-shadow: 0 0 0 4px var(--grow-tint);
  }
  .results-title {
    font-family: var(--display);
    font-size: 64px;
    line-height: 1.02;
    color: var(--ink);
    letter-spacing: -0.025em;
    font-weight: 600;
    margin-bottom: 18px;
  }
  .results-title .terra { color: var(--forest); }
  .results-sub {
    font-size: var(--t-lead);
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 640px;
  }

  /* Match cards */
  .matches {
    padding: 0 96px 80px;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }
  .match {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    display: grid;
    grid-template-columns: 200px 1fr 280px;
    gap: var(--s-6);
    align-items: start;
  }
  .match.top {
    border: 2px solid var(--forest);
    background: var(--paper);
    box-shadow: var(--shadow-md);
  }
  .match-photo {
    width: 200px;
    height: 240px;
    border-radius: var(--r-md);
    background: var(--cream-deep);
  }
  .match-body h3 {
    font-family: var(--display);
    font-size: var(--t-h2);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .match-creds {
    font-size: var(--t-small);
    color: var(--muted);
    margin-bottom: 14px;
  }
  .match-quote {
    font-family: var(--display);
    font-size: var(--t-lead);
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 14px 0 18px;
    border-inline-start: 2px solid var(--forest);
    padding-inline-start: 14px;
  }
  .match-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .match-attrs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    padding-top: 16px;
    border-top: 1px solid var(--rule);
  }
  .attr-label {
    font-family: var(--mono);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .attr-value {
    font-family: var(--display);
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
  }

  .match-side {
    text-align: end;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .match-pct-wrap {
    text-align: start;
    background: var(--g10);
    border: 1px solid var(--g16);
    border-radius: var(--r-md);
    padding: 16px 18px;
    margin-bottom: 16px;
  }
  .match-pct {
    font-family: var(--display);
    font-size: var(--t-display);
    line-height: 1;
    font-weight: 700;
    color: var(--forest-deep);
    letter-spacing: -0.03em;
  }
  .match-pct-label {
    font-size: 12px;
    color: var(--forest-deep);
    margin-top: 4px;
  }
  .why-match {
    text-align: start;
    margin-bottom: 16px;
  }
  .why-match h5 {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 500;
  }
  .why-match ul { list-style: none; padding: 0; margin: 0; }
  .why-match li {
    font-size: var(--t-small);
    color: var(--ink);
    padding: var(--s-1) 0;
    display: flex;
    gap: 6px;
    align-items: flex-start;
  }
  .why-match li::before {
    content: "•";
    color: var(--grow);
    font-weight: 700;
  }
  .match-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: auto; }
  .match-price {
    text-align: start;
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--muted);
    margin-bottom: 12px;
  }
  .match-price strong { color: var(--ink); font-family: var(--display); font-size: var(--t-small); }

  /* ---- Loading state ------------------------------------------------
     The three .match articles ship as blank templates that quiz-06.js
     rewrites from /api/quiz/sessions/:id/matches. A blank template is
     visually identical to a skeleton that never resolved, which is
     exactly what a visitor saw whenever the API came back with zero
     matches. Shimmering only while data-state="loading" makes the
     three states legible: loading shimmers, ready shows real cards,
     empty removes the templates entirely (see .results-empty).

     Keyed on :empty so a slot stops shimmering the moment JS writes
     into it — no second pass needed to clear the placeholders. */
  .matches[data-state="loading"] .match-photo,
  .matches[data-state="loading"] :is(
    .match-body h3, .match-creds, .match-quote, .match-chips,
    .attr-value, .match-pct, .match-pct-label, .match-price,
    .why-match ul
  ):empty {
    background-color: var(--cream-deep);
    background-image: linear-gradient(90deg,
      transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
    animation: q06-shimmer 1.3s ease-in-out infinite;
  }
  /* Give the empty slots the height their real content would take, so
     nothing jumps when the cards resolve. */
  .matches[data-state="loading"] .match-body h3:empty      { height: 28px; width: 58%; }
  .matches[data-state="loading"] .match-creds:empty        { height: 13px; width: 42%; }
  .matches[data-state="loading"] .match-quote:empty        { height: 48px; border-inline-start-color: transparent; }
  .matches[data-state="loading"] .match-chips:empty        { height: 24px; width: 70%; border-radius: var(--r-pill); }
  .matches[data-state="loading"] .attr-value:empty         { height: 14px; }
  .matches[data-state="loading"] .match-pct:empty          { height: 42px; width: 54%; }
  .matches[data-state="loading"] .match-pct-label:empty    { height: 12px; width: 76%; margin-top: 6px; }
  .matches[data-state="loading"] .match-price:empty        { height: 12px; width: 48%; }
  .matches[data-state="loading"] .why-match ul:empty       { height: 68px; }
  /* The CTAs can't act on a therapist we haven't loaded yet. */
  .matches[data-state="loading"] .match-actions { opacity: 0.45; pointer-events: none; }

  @keyframes q06-shimmer {
    0%   { background-position: 130% 0; }
    100% { background-position: -130% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .matches[data-state="loading"] :is(.match-photo, .match-body h3, .match-creds,
      .match-quote, .match-chips, .attr-value, .match-pct, .match-pct-label,
      .match-price, .why-match ul) { animation: none; background-image: none; }
  }

  /* ---- Zero-match state ---------------------------------------------
     With every template removed the list is an empty box that still
     reserves its 80px bottom padding — collapse it so the empty panel
     sits under the headline rather than a dead band. */
  .matches[data-state="empty"] { display: none; }
  .results-empty {
    margin: 0 96px 80px;
    padding: 56px 40px 48px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    text-align: center;
  }
  .results-empty[hidden] { display: none; }
  .results-empty .empty-mark { color: var(--muted); margin-bottom: 18px; }
  .results-empty h2 {
    font-family: var(--display);
    font-size: var(--t-h2);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 10px;
  }
  .results-empty p {
    font-size: var(--t-small);
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto 26px;
  }
  .results-empty .empty-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 720px) {
    .results-empty { margin: 0 16px 60px; padding: 40px 20px 36px; }
  }