/* Home Seller Decision Assessment — design system ported from the original.
   Palette uses oklch (as the source did). Two typefaces: Source Serif 4 for
   headings, Source Sans 3 for body. */

:root {

  /* Spacing — 4px/8pt grid, single source of truth for padding. */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-96: 96px;
  --sp-104: 104px;
    /* Fonts — Source system, centralised. Sizes = shared 10-step app scale. */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans: 'Source Sans 3', system-ui, sans-serif;
  --fs-2xs: 11px;  --fs-xs: 12px;  --fs-sm: 13px;  --fs-base: 14px;  --fs-md: 15px;
  --fs-lg: 16px;  --fs-xl: 18px;  --fs-2xl: 20px;  --fs-3xl: 22px;  --fs-4xl: 28px;
--bg: oklch(0.985 0.004 90);
  --surface: oklch(0.99 0.002 90);
  --ink: oklch(0.24 0.006 90);
  --heading: oklch(0.22 0.01 90);
  --muted: oklch(0.4 0.01 90);
  --muted-2: oklch(0.55 0.01 90);
  --line: oklch(0.88 0.006 90);
  --border: oklch(0.86 0.006 90);
  --accent: oklch(0.4 0.06 220);
  --accent-hover: oklch(0.32 0.07 220);
  --accent-tint: oklch(0.95 0.008 220);
  --link: oklch(0.42 0.06 220);
  --dark: oklch(0.24 0.02 220);
  --error: oklch(0.5 0.14 30);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: oklch(0.88 0.03 220); }

.serif { font-family: var(--font-serif); }

/* Layout helpers */
.brand-bar { max-width: 1040px; margin: 0 auto; padding: var(--sp-32) var(--sp-24) 0; display: flex; justify-content: center; }
.brand { font-family: var(--font-serif); font-size: var(--fs-xl); letter-spacing: 0.02em; color: oklch(0.4 0.02 90); }
.brand .dot { color: oklch(0.65 0.01 90); font-weight: 400; }
.rule { max-width: 640px; margin: 0 auto; height: 1px; background: var(--line); }

section { }
.hero { max-width: 780px; margin: 0 auto; padding: var(--sp-72) var(--sp-24) var(--sp-96); text-align: center; display: flex; flex-direction: column; align-items: center; }
.narrow { max-width: 680px; margin: 0 auto; padding: var(--sp-96) var(--sp-24); }
.center-narrow { max-width: 620px; margin: 0 auto; min-height: 70vh; padding: var(--sp-96) var(--sp-24) var(--sp-96); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.form-wrap { max-width: 560px; margin: 0 auto; padding: var(--sp-72) var(--sp-24) var(--sp-96); }
.q-wrap { max-width: 660px; margin: 0 auto; padding: var(--sp-64) var(--sp-24) var(--sp-96); }

h1.title { font-family: var(--font-serif); font-weight: 500; line-height: 1.22; letter-spacing: -0.01em; color: var(--heading); margin: 0 0 28px; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); }
h2.title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.3; margin: 0 0 32px; color: var(--heading); }
p.lead { font-size: var(--fs-xl); line-height: 1.7; color: var(--muted); max-width: 580px; margin: 0 0 8px; }
p.body { font-size: var(--fs-lg); line-height: 1.8; color: oklch(0.38 0.01 90); margin: 0 0 22px; }
.muted-note { font-size: var(--fs-base); color: var(--muted-2); margin-top: 18px; }

/* Buttons */
.btn { display: inline-block; background: var(--accent); color: oklch(0.99 0.002 90); font-size: var(--fs-lg); font-weight: 500; padding: var(--sp-20) var(--sp-40); border-radius: 4px; letter-spacing: 0.01em; box-shadow: 0 8px 24px oklch(0.4 0.06 220 / 0.18); cursor: pointer; border: 0; font-family: inherit; text-align: center; transition: background .15s ease, opacity .15s ease; }
.btn:hover { background: var(--accent-hover); color: oklch(0.99 0.002 90); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-light { background: oklch(0.97 0.004 220); color: var(--dark); box-shadow: none; }
.btn-light:hover { background: #fff; color: var(--dark); }
.link-back { display: inline-block; font-size: var(--fs-base); color: var(--muted-2); margin-top: 28px; cursor: pointer; }

/* Contact / final CTA blocks */
.cta-dark { background: var(--dark); padding: var(--sp-104) var(--sp-24); text-align: center; }
.cta-dark .inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta-dark h2 { color: oklch(0.97 0.004 220); font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.3; margin: 0 0 28px; }
.cta-dark p { font-size: var(--fs-lg); line-height: 1.75; color: oklch(0.82 0.01 220); margin: 0 0 12px; }
.cta-dark .fineprint { font-size: var(--fs-sm); color: oklch(0.68 0.01 220); margin-top: 22px; max-width: 420px; }
.tinted { background: oklch(0.95 0.008 220); padding: var(--sp-96) var(--sp-24); }
.tinted .inner { max-width: 680px; margin: 0 auto; }
.tinted p { color: oklch(0.36 0.015 220); }

/* Forms */
form.stack { display: flex; flex-direction: column; gap: 20px; }
.field label { display: block; font-size: var(--fs-base); color: var(--muted); margin-bottom: 8px; }
.field input, textarea.answer {
  width: 100%; box-sizing: border-box; padding: var(--sp-16) var(--sp-20); border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-sans); font-size: var(--fs-lg); color: var(--ink);
}
.field input:focus, textarea.answer:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.4 0.06 220 / 0.12); }
.field-error { font-size: var(--fs-sm); color: var(--error); margin-top: 6px; }
.privacy-note { font-size: var(--fs-sm); color: var(--muted-2); margin-top: 24px; text-align: center; }
textarea.answer { min-height: 180px; line-height: 1.6; resize: vertical; }

/* Questions */
.q-counter { font-size: var(--fs-sm); letter-spacing: 0.03em; color: var(--muted-2); text-align: center; margin-bottom: 36px; }
.q-prompt { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 3.6vw, 30px); line-height: 1.4; letter-spacing: -0.005em; margin: 0 0 40px; color: var(--heading); text-align: center; }
.options { display: flex; flex-direction: column; gap: 14px; }
.option {
  display: flex; align-items: center; gap: 16px; padding: var(--sp-20) var(--sp-24); border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-lg); line-height: 1.55; color: oklch(0.3 0.01 90); cursor: pointer;
  text-align: left; width: 100%; font-family: inherit; transition: border-color .12s ease, background .12s ease;
}
.option:hover { border-color: oklch(0.7 0.02 220); }
.option.selected { border: 1.5px solid var(--accent); background: var(--accent-tint); }
.option .tick { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--border); position: relative; }
.option.selected .tick { border-color: var(--accent); background: var(--accent); }
.option.selected .tick::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.q-actions { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }

.progress { max-width: 660px; margin: 0 auto; padding: 0 var(--sp-24); }
.progress .track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 28px; }
.progress .fill { height: 100%; background: var(--accent); transition: width .3s ease; }

/* Photo placeholder (image-slot replacement) */
.photo { background: linear-gradient(135deg, oklch(0.92 0.01 220), oklch(0.88 0.02 220)); display: flex; align-items: center; justify-content: center; color: oklch(0.5 0.02 220); font-size: var(--fs-sm); text-align: center; }
.photo.rounded { border-radius: 8px; aspect-ratio: 4/5; width: 100%; }
.photo.circle { border-radius: 50%; width: 96px; height: 96px; }

.footer { padding: var(--sp-32) var(--sp-24); text-align: center; font-size: var(--fs-sm); color: var(--muted-2); }

/* Toast / connection banner */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--dark); color: #fff; padding: var(--sp-12) var(--sp-20); border-radius: 8px; font-size: var(--fs-base); box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 50; max-width: 90vw; text-align: center; }
.toast.err { background: var(--error); }

.split { max-width: 900px; margin: 0 auto; padding: var(--sp-104) var(--sp-24); display: flex; gap: 56px; align-items: center; flex-wrap: wrap; }
.split .photo-col { flex: 1 1 220px; max-width: 260px; margin: 0 auto; }
.split .text-col { flex: 2 1 380px; min-width: 280px; }