/* Dovetail client portal — visual language per Layer 2 (02-visual-language.md) + voice per Layer 4.
   Stand-in faces: Fraunces ≈ GT Alpina (serif display), Inter ≈ ABC Diatype (sans). Swap for the
   licensed faces (self-hosted) when available. No pure white, no pure black, no gradients. */
:root {
  /* neutrals — the ground */
  --paper: #F5F2EC; --paper-deep: #EEE9E0; --linen: #E4DED3; --stone: #B4AFA5;
  --graphite: #5A5751; --ink: #1C1B19; --inkwell: #2A2826;
  /* accents — seasoning, used sparingly */
  --clay: #B76E4A; --ochre: #C89E58; --moss: #6A7A5A; --sage: #9AAE94;
  /* type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  /* spacing (8px base) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px;
  --radius:4px; --hair:1px solid var(--stone);
  --shadow-active:0 8px 24px rgba(28,27,25,.06);
  --shadow-overlay:0 20px 40px rgba(28,27,25,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.625; color: var(--ink);
  background: var(--paper); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.hidden { display: none !important; }
.muted { color: var(--graphite); }
.center { text-align: center; }
.req { color: var(--clay); margin-left: 2px; }
.wrap { width: min(720px, 100% - var(--s5)); margin: 0 auto; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--stone); }
a:hover { text-decoration-color: var(--clay); }

/* header */
.topbar { border-bottom: var(--hair); background: var(--paper); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) 0; }
.brand { display: flex; align-items: center; gap: var(--s3); }
.brand img { height: 30px; width: auto; display: block; }
.brand .name { font-family: var(--serif); font-size: 21px; letter-spacing: -0.01em; color: var(--ink); }
.chip { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; text-transform: lowercase; color: var(--graphite);
  background: var(--linen); border-radius: 999px; padding: 4px 12px; }

.screen { padding: var(--s6) 0 var(--s7); }
.hero { margin: 0 0 var(--s5); }
.hero h1 { font-size: 40px; line-height: 1.1; margin: 0 0 var(--s2); }
@media (min-width: 720px) { .hero h1 { font-size: 52px; } }
.hero .intro { color: var(--graphite); white-space: pre-line; max-width: 60ch; }

/* cards / surfaces — depth by hairline + paper weight, not heavy shadow */
.card { background: var(--paper-deep); border: var(--hair); border-radius: var(--radius);
  padding: var(--s5) var(--s5); margin: 0 0 var(--s4); }
.card h2 { font-size: 24px; line-height: 1.25; margin: 0 0 var(--s3); color: var(--ink); }

/* fields */
.field { margin: 0 0 var(--s4); }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-weight: 500; font-size: 15px; margin: 0 0 var(--s2); color: var(--ink); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], textarea, select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--linen); border: var(--hair); border-radius: var(--radius);
  padding: 12px 14px; outline: none; transition: border-color .18s, box-shadow .18s;
}
input:focus, textarea:focus, select:focus { border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(183,110,74,.18); }
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.opts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.opts label { font-weight: 400; display: flex; align-items: center; gap: var(--s2); }
.field-err { color: var(--clay); font-size: 14px; margin-top: var(--s1); }

/* requested files + uploads */
.frow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px 0; border-top: var(--hair); }
.frow:first-child { border-top: none; }
.up-head { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); margin-top: var(--s3); }
.upload-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 var(--s2); flex-wrap: wrap; }
.upload-row input[type=file] { flex: 1; min-width: 220px; font-size: 14px; color: var(--graphite); }
#upload-state, #save-state, #sign-state { font-size: 14px; color: var(--graphite); min-height: 1.2em; }

/* buttons — consumer CTAs are ink text + arrow; filled ink only for commitment (signing) */
.btn { font-family: var(--sans); font-size: 16px; font-weight: 500; cursor: pointer; border-radius: var(--radius);
  border: var(--hair); background: var(--paper); color: var(--ink); padding: 11px 18px; transition: background .18s, border-color .18s; }
.btn:hover { border-color: var(--graphite); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.commit { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.commit:hover { background: var(--inkwell); }
.cta { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 6px 0;
  font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--ink); cursor: pointer; }
.cta .arrow { transition: transform .18s; }
.cta:hover .arrow { transform: translateX(4px); }
.cta:disabled { color: var(--graphite); cursor: default; }
.actions { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); flex-wrap: wrap; }

/* proposal + signature */
#proposal-frame { width: 100%; height: 600px; border: var(--hair); border-radius: var(--radius); background: var(--paper); display: block; }
.signrow { display: flex; gap: var(--s3); flex-wrap: wrap; }
.signrow .grow { flex: 1; min-width: 200px; }
input.initials { max-width: 120px; text-transform: uppercase; letter-spacing: 0.08em; }
#sign-pad { width: 100%; max-width: 560px; height: 150px; background: var(--linen); border: 1px dashed var(--stone);
  border-radius: var(--radius); touch-action: none; display: block; }
.consent { display: flex; gap: var(--s2); align-items: flex-start; font-size: 15px; color: var(--graphite); margin: var(--s3) 0; }
.consent input { margin-top: 4px; }
.signed-note { color: var(--moss); font-weight: 500; }

/* stepper */
.stepper { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s6); }
.stepper .step { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; color: var(--graphite); padding: 4px 2px; }
.stepper .step .num { width: 26px; height: 26px; border-radius: 999px; border: var(--hair); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; color: var(--graphite); background: var(--paper); }
.stepper .step.active .num { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stepper .step.active .lbl { color: var(--ink); font-weight: 500; }
.stepper .step.done .num { background: var(--moss); color: var(--paper); border-color: var(--moss); }
.stepper .step-rule { flex: 1; height: 1px; background: var(--stone); }
@media (max-width: 560px) { .stepper .lbl { display: none; } .stepper .step-rule { min-width: 16px; } }

.help { font-size: 14px; margin: 0 0 var(--s2); line-height: 1.4; }
.ghostnav { color: var(--graphite); }

.survey-progress { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite);
  border-bottom: var(--hair); padding-bottom: var(--s2); margin: 0 0 var(--s4); }
.survey-nav { justify-content: space-between; }
.survey-nav #save-state { flex-basis: 100%; }

/* review-your-answers summary (read-only, mirrors the intake PDF) */
.rev-sec { margin-top: var(--s4); }
.rev-sec:first-child { margin-top: 0; }
.rev-sech { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay);
  border-bottom: var(--hair); padding-bottom: var(--s2); margin: 0 0 var(--s3); }
.rev-qa { margin: 0 0 var(--s3); }
.rev-q { font-weight: 500; font-size: 15px; color: var(--ink); }
.rev-a { color: var(--graphite); white-space: pre-line; }
#review-state { font-size: 14px; color: var(--graphite); min-height: 1.2em; }

/* how-we-work phases */
.phases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.phases li { padding: var(--s4) 0; border-top: var(--hair); }
.phases li:first-child { padding-top: 0; border-top: none; }
.phases .ph { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.phases h3 { font-family: var(--serif); font-size: 22px; margin: 4px 0 var(--s2); color: var(--ink); }
.phases p { margin: 0; color: var(--graphite); }

.foot { padding: var(--s5) 0 var(--s7); font-size: 13px; color: var(--graphite); }