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); }