/* ============================================================
       FORM-SPECIFIC STYLES
       ============================================================ */

    /* Slim header override for the form */
    .form-header { background: var(--color-surface); border-bottom: var(--border-thin); }
    .form-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; min-height: 72px; }
    .form-header__logo img { height: 36px; width: auto; }
    .form-header__back {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-text-muted);
    }
    .form-header__back:hover { color: var(--color-ink); }
    .form-header__back svg { width: 14px; height: 14px; }

    /* Form shell — sunken bg, centered card */
    .form-wrap {
      background: var(--color-surface-sunken);
      padding: var(--space-8) 0 var(--space-9);
      min-height: calc(100vh - 72px);
    }
    .form-intro { max-width: 720px; margin: 0 auto var(--space-7); padding: 0 var(--space-5); }
    .form-intro h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: var(--tracking-tight);
      line-height: 1.04;
      color: var(--color-ink);
      text-wrap: balance;
    }
    .form-intro p {
      margin-top: var(--space-4);
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--color-text);
      max-width: 60ch;
    }
    .form-intro__meta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      margin-top: var(--space-5);
      padding: 4px 12px;
      background: color-mix(in oklab, var(--color-success) 12%, var(--color-surface));
      color: var(--color-success);
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
    }
    .form-intro__meta::before {
      content: "";
      width: 6px; height: 6px;
      background: var(--color-success);
      border-radius: 50%;
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-success) 25%, transparent);
    }

    .form-card {
      max-width: 720px;
      margin: 0 auto;
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    /* Progress strip */
    .progress {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-2);
      padding: var(--space-5) var(--space-6) 0;
      background: var(--color-surface-elevated);
    }
    .progress__step {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      cursor: default;
    }
    .progress__bar {
      height: 3px;
      background: var(--color-hairline);
      border-radius: var(--radius-pill);
      transition: background var(--duration-base) var(--ease-out);
    }
    .progress__step[data-state="active"] .progress__bar,
    .progress__step[data-state="done"] .progress__bar { background: var(--color-brand-orange); }
    .progress__label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: -0.005em;
      color: var(--color-text-subtle);
      transition: color var(--duration-base) var(--ease-out);
    }
    .progress__step[data-state="active"] .progress__label,
    .progress__step[data-state="done"] .progress__label { color: var(--color-ink); font-weight: var(--weight-semibold); }

    /* Step container */
    .step {
      display: none;
      padding: var(--space-7) var(--space-6) var(--space-7);
    }
    .step[data-active="true"] { display: block; }
    @media (min-width: 640px) { .step { padding: var(--space-8) var(--space-8) var(--space-7); } }

    .step__counter {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      margin-bottom: var(--space-3);
    }
    .step__title {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      color: var(--color-ink);
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: var(--space-3);
    }
    .step__lead {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.55;
      margin-bottom: var(--space-6);
      max-width: 56ch;
    }

    /* Field groups */
    .field {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin-bottom: var(--space-5);
    }
    .field > label,
    .field-group > legend {
      display: block;
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      padding: 0;
    }
    .field__hint {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      margin-top: 2px;
    }
    .field__error {
      font-size: var(--text-xs);
      color: var(--color-danger);
      margin-top: 4px;
      min-height: 16px;
    }
    .field input[type="text"],
    .field input[type="email"],
    .field input[type="tel"],
    .field select,
    .field textarea {
      width: 100%;
      padding: 12px 14px;
      background: var(--color-surface);
      border: 1px solid var(--color-hairline-strong);
      border-radius: var(--radius-sm);
      font-family: var(--font-sans);
      font-size: var(--text-base);
      color: var(--color-ink);
      transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
    }
    .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-text-muted); }
    .field input:focus, .field select:focus, .field textarea:focus {
      outline: none;
      border-color: var(--color-brand-orange);
      background: var(--color-surface-elevated);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand-orange) 18%, transparent);
    }
    .field input[data-invalid="true"], .field select[data-invalid="true"] { border-color: var(--color-danger); }
    .field input[type="tel"] { font-variant-numeric: tabular-nums; }
    .field textarea { resize: vertical; min-height: 96px; }

    .field-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

    /* Radio cards (used for step 1 situation + step 2 interest type) */
    .field-group { border: 0; padding: 0; margin: 0 0 var(--space-5); }
    .radio-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-3);
      margin-top: var(--space-3);
    }
    @media (min-width: 640px) { .radio-cards { grid-template-columns: 1fr 1fr; } }
    @media (min-width: 768px) { .radio-cards--3 { grid-template-columns: repeat(3, 1fr); } }

    .radio-card {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-5);
      background: var(--color-surface);
      border: 1px solid var(--color-hairline-strong);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
    }
    .radio-card:hover { border-color: var(--color-text-muted); background: var(--color-surface-elevated); }
    .radio-card input { position: absolute; opacity: 0; pointer-events: none; }
    .radio-card:has(input:checked) {
      border-color: var(--color-brand-orange);
      background: color-mix(in oklab, var(--color-brand-orange) 6%, var(--color-surface-elevated));
    }
    .radio-card:has(input:focus-visible) {
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand-orange) 22%, transparent);
    }
    .radio-card__icon {
      width: 32px; height: 32px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-muted);
      transition: color var(--duration-fast) var(--ease-out);
    }
    .radio-card:has(input:checked) .radio-card__icon { color: var(--color-brand-orange-deep); }
    .radio-card__icon svg { width: 22px; height: 22px; }
    .radio-card__title {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .radio-card__body {
      margin-top: 2px;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.5;
    }
    .radio-card__check {
      position: absolute;
      top: 12px; right: 12px;
      width: 20px; height: 20px;
      border: 1.5px solid var(--color-hairline-strong);
      border-radius: 50%;
      transition: all var(--duration-fast) var(--ease-out);
    }
    .radio-card:has(input:checked) .radio-card__check {
      border-color: var(--color-brand-orange);
      background: var(--color-brand-orange);
    }
    .radio-card:has(input:checked) .radio-card__check::after {
      content: "";
      position: absolute;
      inset: 4px;
      background: #fff;
      border-radius: 50%;
    }

    /* Pill radio (compact, for small lists like best-time-to-call) */
    .pill-radios {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-3);
    }
    .pill-radio {
      cursor: pointer;
      padding: 8px 14px;
      background: var(--color-surface);
      border: 1px solid var(--color-hairline-strong);
      border-radius: var(--radius-pill);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--color-text);
      transition: all var(--duration-fast) var(--ease-out);
      position: relative;
    }
    .pill-radio:hover { border-color: var(--color-text-muted); color: var(--color-ink); }
    .pill-radio input { position: absolute; opacity: 0; pointer-events: none; }
    .pill-radio:has(input:checked) {
      background: var(--color-ink);
      border-color: var(--color-ink);
      color: var(--color-surface);
    }

    /* Action bar */
    .step__actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-5) var(--space-6);
      background: var(--color-surface);
      border-top: var(--border-thin);
    }
    @media (min-width: 640px) { .step__actions { padding: var(--space-5) var(--space-8); } }
    .step__actions[data-hidden="true"] { display: none; }

    /* Step 4 — routing/success */
    .outcome {
      padding: var(--space-7) var(--space-6) var(--space-8);
    }
    @media (min-width: 640px) { .outcome { padding: var(--space-8); } }
    .outcome__badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 6px 12px;
      background: color-mix(in oklab, var(--color-success) 14%, var(--color-surface));
      color: var(--color-success);
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: -0.005em;
      margin-bottom: var(--space-5);
    }
    .outcome__badge--orange {
      background: color-mix(in oklab, var(--color-brand-orange) 14%, var(--color-surface));
      color: var(--color-brand-orange-deep);
    }
    .outcome__badge::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: currentColor;
    }
    .outcome h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      color: var(--color-ink);
      letter-spacing: -0.02em;
      line-height: 1.1;
      text-wrap: balance;
    }
    .outcome__lead {
      margin-top: var(--space-4);
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--color-text);
      max-width: 56ch;
    }
    .outcome__partners {
      margin-top: var(--space-7);
      display: grid;
      gap: var(--space-4);
    }
    @media (min-width: 640px) {
      .outcome__partners.cols-3 { grid-template-columns: repeat(3, 1fr); }
      .outcome__partners.cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
    }
    .partner-card {
      padding: var(--space-5);
      background: var(--color-surface-sunken);
      border-radius: var(--radius-md);
      border: var(--border-thin);
    }
    .partner-card__name {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
    }
    .partner-card__title {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      margin-top: 2px;
    }
    .partner-card__phone {
      display: block;
      margin-top: var(--space-3);
      font-family: var(--font-sans);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-brand-orange-deep);
    }

    /* Submission summary */
    .summary {
      margin-top: var(--space-7);
      border: var(--border-thin);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .summary__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: var(--space-4) var(--space-5);
      background: var(--color-surface);
      border-bottom: var(--border-thin);
    }
    .summary__head h3 {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
    .summary__edit { font-size: var(--text-xs); }
    .summary__body { padding: var(--space-2) var(--space-5); }
    .summary__row {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: var(--space-4);
      padding: var(--space-3) 0;
      font-size: var(--text-sm);
      border-bottom: var(--border-thin);
    }
    .summary__row:last-child { border-bottom: 0; }
    .summary__row dt { color: var(--color-text-muted); font-family: var(--font-sans); font-weight: var(--weight-medium); }
    .summary__row dd { color: var(--color-ink); margin: 0; font-weight: var(--weight-medium); }

    .outcome__next {
      margin-top: var(--space-7);
      padding-top: var(--space-7);
      border-top: var(--border-thin);
      display: grid;
      gap: var(--space-3);
    }
    .outcome__next h4 {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-text-muted);
      font-weight: var(--weight-semibold);
    }
    .outcome__next-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: 1.55;
    }
    .outcome__next-item::before {
      content: "→";
      color: var(--color-brand-orange);
      font-weight: var(--weight-semibold);
      flex-shrink: 0;
    }