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

  .quiz-nav { display:flex; align-items:center; justify-content:space-between; padding:var(--s-5) var(--s-7); border-bottom:1px solid var(--rule); }
  .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(--forest); border-radius:var(--r-pill); transition: width 400ms ease; }
  .progress-label { font-family:var(--mono); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); }

  .quiz { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:80px 96px; align-items:start; }
  .quiz-left { display:flex; flex-direction:column; justify-content:flex-start; position: sticky; top: 80px; }
  .quiz-num { font-family:var(--mono); font-size:12px; color:var(--forest); letter-spacing:0.14em; margin-bottom:24px; display:flex; align-items:center; gap:var(--s-2); }
  .quiz-num .arrow { color:var(--forest); }
  .quiz-question { font-family:var(--display); font-size:56px; line-height:1.05; color:var(--ink); letter-spacing:-0.025em; font-weight:600; margin-bottom:20px; }
  .quiz-question .terra { color:var(--forest); }
  .quiz-help { font-size:17px; line-height:1.5; color:var(--muted); max-width:480px; }
  .quiz-foot { margin-top:48px; display:flex; gap:var(--s-4); align-items:center; }
  .kbd-hint { font-family:var(--mono); font-size:var(--t-micro); color:var(--muted); margin-inline-start:12px; }
  kbd { display:inline-block; padding:2px 6px; border:1px solid var(--rule); border-radius:var(--r-xs); background:var(--paper); font-family:var(--mono); font-size:10px; color:var(--ink); }

  /* Preference cards */
  .pref-group { display:flex; flex-direction:column; gap:var(--s-5); }
  .pref {
    padding:var(--s-5);
    background:var(--paper);
    border:1px solid var(--rule);
    border-radius:var(--r-md);
    transition: background 200ms ease, border-color 200ms ease, border-style 0ms;
  }
  .pref-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:var(--s-3); }
  .pref-label { font-family:var(--display); font-size:var(--t-body); color:var(--ink); font-weight:600; transition: color 200ms ease; }
  .pref-value { font-family:var(--mono); font-size:var(--t-micro); color:var(--forest); letter-spacing:0.08em; text-transform:uppercase; }

  /* Per-card skip control — small, mono, terra on hover. Sits in the
     top-right of each .pref-head. Clicking toggles the card into a
     faded "no preference noted" state; clicking again undoes. */
  .pref-skip {
    font-family:var(--mono);
    font-size: var(--t-micro);
    font-weight:500;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:var(--text-faint);
    background:transparent;
    border:1px solid transparent;
    padding:5px 12px;
    border-radius:var(--r-pill);
    cursor:pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
    flex-shrink:0;
    white-space:nowrap;
  }
  .pref:hover .pref-skip { color:var(--muted); }
  .pref-skip:hover, .pref-skip:focus-visible {
    color:var(--forest-deep);
    background:var(--g10);
    border-color:var(--g16);
    outline:none;
  }
  .pref-skip[aria-pressed="true"] {
    color:var(--forest-deep);
    background:var(--g10);
    border-color:var(--g16);
  }

  /* Skipped state — dashed border + cream surface, inner controls
     greyed and made non-interactive. The skip button stays clickable
     so the user can undo. */
  .pref.is-skipped {
    background:var(--cream-deep);
    border-style:dashed;
    border-color:var(--g16);
  }
  .pref.is-skipped .pref-label { color:var(--muted); }
  .pref.is-skipped .pill-row,
  .pref.is-skipped .gender-segment,
  .pref.is-skipped .pref-track,
  .pref.is-skipped .pref-axis {
    opacity:0.45;
    filter:grayscale(0.4);
    pointer-events:none;
    transition: opacity 200ms ease, filter 200ms ease;
  }
  .pref-skipped-note {
    display:none;
    margin-top:14px;
    align-items:center;
    gap:var(--s-2);
    font-family:var(--mono);
    font-size:var(--t-micro);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--forest-deep);
  }
  .pref-skipped-note::before {
    content:"–";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--g10);
    border:1px solid var(--g16);
    font-weight:700;
    font-size:14px;
    line-height:1;
  }
  .pref.is-skipped .pref-skipped-note { display:inline-flex; }
  .pref-axis { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:10px; }
  .pref-track { position:relative; height:36px; background:var(--cream-deep); border-radius:var(--r-pill); cursor:pointer; touch-action:none; }
  .pref-track .marks { position:absolute; inset:0; display:flex; align-items:center; padding:0 18px; justify-content:space-between; }
  .pref-track .marks span { width:2px; height:8px; background:var(--faint); border-radius:1px; }
  .pref-thumb { position:absolute; top:50%; transform:translate(-50%, -50%); width:28px; height:28px; border-radius:50%; background:var(--forest); border:3px solid var(--cream); box-shadow:var(--shadow-md); pointer-events:none; }
  .pref-thumb::after { content:""; position:absolute; inset:6px; background:var(--forest); border-radius:50%; }

  /* Pill row */
  .pill-row { display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:12px; }
  .pill { padding:10px 16px; border:1.5px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:var(--r-pill); font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; transition:all 140ms ease; }
  .pill:hover { border-color:var(--forest); }
  .pill.selected { background:var(--ink); color:var(--cream); border-color:var(--ink); }

  /* Gender 3-segment picker — gives the feel of a slider snapping to 3 stops */
  .gender-segment { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:var(--s-2); }
  .gender-segment .pill { text-align:center; justify-content:center; padding:14px 8px; }

  /* Faith follow-up — slides in below religion slider */
  .faith-followup {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--rule);
    animation: slideDown 200ms ease;
  }
  .faith-followup .pref-label { font-size: var(--t-small); color: var(--muted); margin-bottom: 6px; }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  a.btn.primary.is-disabled,
  a.btn.primary.is-disabled:hover { cursor:not-allowed; transform:none; }

  /* Responsive */
  @media (max-width: 1100px) {
    .quiz { grid-template-columns:1fr; gap:var(--s-7); padding:56px 56px; }
    .quiz-left { position:static; }
    .quiz-question { font-size:44px; }
  }
  @media (max-width: 720px) {
    .quiz-nav { padding:16px 20px; }
    .quiz-nav .progress { margin:0 var(--s-4); }
    .quiz { padding:32px 20px; gap:var(--s-6); }
    .quiz-question { font-size:32px; }
    .quiz-help { font-size:var(--t-body); }
    .quiz-foot { flex-wrap:wrap; }
    .quiz-foot .kbd-hint { display:none; }
    .pref { padding:18px; }
  }