/* ============================================================================
   rd-application.css — the credit application in the ChatGPT draft's look
   ----------------------------------------------------------------------------
   VISUAL ONLY (Adam, 10/15). Every behaviour stays the live form's: licence
   scan and autofill, business lookup, business and co-signer paths, signed-in
   prefill, SSN handling and encryption, CRM intake. This file re-skins the
   form's own classes; the page adds an intro and a side panel around the card.
   Loaded after the page's inline styles and rd-chrome.css; scoped to the page.
   ========================================================================== */
body.rd-theme { background: var(--rd-paper); color: var(--rd-ink); font-family: var(--rd-font); --surface: #fcfcf8; --surface-alt: #f3f4ee; --line: #ddded7; --line-strong: #c8ccc2; --text: #17211f; --text-body: #2b332f; --brass-deep: #7a5a20; --radius-card: 5px; --radius-row: 4px; --radius-field: 3px; --radius-btn: 4px; --font-mono: var(--rd-font); }

/* intro */
.rd-app-intro { padding: 64px 0 34px; width: var(--rd-shell); margin: 0 auto; }
.rd-app-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; color: var(--rd-brass-text); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rd-app-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.rd-app-intro h1 { font: 500 clamp(44px, 5.4vw, 72px)/1.08 var(--rd-display); letter-spacing: -.055em; color: var(--rd-ink); margin: 0; }
.rd-app-intro p { font-size: 17px; color: var(--rd-muted); margin: 20px 0 0; }

/* the two columns */
.rd-app.form-section { padding: 10px 0 100px; }
.rd-app .container.rd-app-grid { max-width: none; width: var(--rd-shell); padding: 0; display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 70px; align-items: start; }
.rd-app-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.rd-app-main { min-width: 0; }
.rd-app-points { display: flex; flex-direction: column; gap: 0; }
.rd-app-points p { margin: 0; padding: 16px 0; border-top: 1px solid var(--rd-line); font-size: 15px; line-height: 1.6; color: var(--rd-muted); }
.rd-app-points b { display: block; color: var(--rd-ink); font-weight: 600; margin-bottom: 2px; }
.rd-app-help { font-size: 15px; color: var(--rd-muted); margin: 0; }
.rd-app-help a { color: var(--rd-ink); text-decoration: underline; text-underline-offset: 3px; }

/* the car she chose, in the side panel */
.rd-app-aside .vehicle-summary { margin: 0; padding: 22px; background: #eef0e8; border: 1px solid var(--rd-line); border-radius: 5px; }
.rd-app-aside .vehicle-summary-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.rd-app-aside .vehicle-summary-image { width: 100%; height: 150px; background: radial-gradient(ellipse at 50% 80%, #dddfd5, transparent 62%); border: 0; }
.rd-app-aside .vehicle-summary-info h3 { font: 500 24px var(--rd-display); letter-spacing: -.04em; }
.rd-app-aside .vehicle-summary-details { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rd-app-aside .summary-detail { background: #f9f9f4; padding: 10px 6px; }
.rd-app-aside .summary-detail-label { font-size: 11px; color: var(--rd-muted); }
.rd-app-aside .summary-detail-value { font-family: var(--rd-display); font-size: 17px; }

/* the card */
.rd-theme .form-card { background: #fcfcf8; border: 1px solid var(--rd-line); border-radius: 5px; padding: 40px; box-shadow: none; }
.rd-theme .form-title { font: 500 30px/1.15 var(--rd-display); letter-spacing: -.045em; }
.rd-theme .app-kind-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-ink); }
.rd-theme .form-group label, .rd-theme .cosign-branch > label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-ink); }
.rd-theme .form-group input, .rd-theme .form-group select, .rd-theme .form-group textarea { background: #f9f9f4; border: 1px solid #c9cec1; border-radius: 3px; min-height: 48px; font-size: 15px; color: var(--rd-ink); }
.rd-theme .form-group input:focus, .rd-theme .form-group select:focus, .rd-theme .form-group textarea:focus { border-color: var(--rd-ink); box-shadow: 0 0 0 3px #b6883c40; }
.rd-theme .form-group input::placeholder { color: #6b716d; }
/* the draft's segmented control */
.rd-theme .choice-segments { background: #eceee5; padding: 4px; gap: 4px; border-radius: 4px; }
.rd-theme .choice-segment span { border: 0; background: transparent; border-radius: 3px; color: var(--rd-ink); font-weight: 500; }
.rd-theme .choice-segment span:hover { background: #e2e6dc; }
.rd-theme .choice-segment input:checked + span { background: #fff; color: var(--rd-ink); box-shadow: 0 2px 5px #15231b14; font-weight: 600; }
.rd-theme .choice-segment span i { color: var(--rd-brass-text); }
/* steps */
.rd-theme .step-number { border-color: var(--rd-line-strong); background: transparent; color: var(--rd-muted); font-family: var(--rd-font); }
.rd-theme .progress-step.active .step-number { background: var(--rd-ink); border-color: var(--rd-ink); color: #fff; }
.rd-theme .progress-step.completed .step-number { background: var(--rd-green); border-color: var(--rd-green); }
.rd-theme .step-label { font-family: var(--rd-font); color: var(--rd-muted); }
.rd-theme .progress-step.active .step-label { color: var(--rd-ink); }
.rd-theme .step-divider { background: var(--rd-line); }
/* buttons: the draft's flat ink */
.rd-theme .form-card .btn { border-radius: 4px; font-family: var(--rd-font); font-weight: 600; min-height: 50px; }
.rd-theme .form-card .btn-primary { background: var(--rd-ink); color: #fff; border: 1px solid var(--rd-ink); }
.rd-theme .form-card .btn-primary:hover { background: #2e423a; }
.rd-theme .form-card .btn-outline { background: transparent; border: 1px solid var(--rd-line-strong); color: var(--rd-ink); }
.rd-theme .form-card .btn-outline:hover { background: var(--rd-sage); color: var(--rd-ink); border-color: var(--rd-line-strong); }
/* the scan card: the first thing on the application */
.rd-theme .scan-card { background: #edf0e6; border: 1px solid #dce2d2; border-radius: 4px; }
.rd-theme .scan-card-icon { border-color: #c9d1bd; color: var(--rd-ink); }
.rd-theme .scan-card h4 { font: 500 21px var(--rd-display); letter-spacing: -.03em; }
.rd-theme .scan-link { color: var(--rd-ink); }
.rd-theme .consent-block { border-radius: 4px; }

/* your next car — optional, last */
.rd-next-car { border: 1px solid var(--rd-line); border-radius: 4px; padding: 22px 22px 6px; margin: 4px 0 26px; background: #f6f7f2; min-width: 0; }
.rd-next-car[hidden] { display: none; }
.rd-next-car legend { font: 500 21px var(--rd-display); letter-spacing: -.03em; padding: 0 8px; margin-left: -8px; color: var(--rd-ink); }
.rd-next-car legend span { font: 500 14px var(--rd-font); letter-spacing: 0; color: var(--rd-muted); }
.rd-next-car-sub { font-size: 15px; color: var(--rd-muted); margin: 0 0 18px; }
.rd-next-car .form-group { margin-bottom: 16px; }

@media (max-width: 960px) {
  .rd-app .container.rd-app-grid { grid-template-columns: 1fr; gap: 26px; }
  /* a phone: the chosen car above the form, the reassurance under it */
  .rd-app-aside { display: contents; }
  .rd-app-aside .vehicle-summary { order: 0; }
  .rd-app-main { order: 1; }
  .rd-app-points { order: 2; }
  .rd-app-help { order: 3; }
}
@media (max-width: 760px) {
  .rd-app-intro { padding: 40px 0 22px; }
  .rd-theme .form-card { padding: 24px 18px; }
  .rd-theme .form-title { font-size: 26px; }
}