:root {
  --bg: #f9f8f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --border: #e5e7eb;
  --primary: #0b3d62;
  --primary-hover: #082f4b;
  --accent: #9b7a2f;
  --danger: #b42318;
  --ring: rgba(11, 61, 98, 0.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(155, 122, 47, 0.12), transparent 42%),
    radial-gradient(circle at bottom left, rgba(11, 61, 98, 0.1), transparent 46%),
    var(--bg);
  line-height: 1.45;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 4px;
  font-size: clamp(1.62rem, 2.5vw, 2.15rem);
}

h2 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  margin-bottom: 8px;
}

h3 {
  font-size: 1rem;
}

.app-wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 16px 44px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
}

.muted {
  color: var(--muted);
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 220px;
}

.save-status {
  font-size: 0.85rem;
  color: var(--muted);
}

.dev-tools-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: min(340px, calc(100vw - 24px));
  z-index: 80;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
  padding: 12px;
}

.dev-tools-panel h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.dev-tools-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-tools-grid .btn {
  width: 100%;
}

.dev-tools-note,
.dev-tools-status {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.dev-tools-status {
  min-height: 1.05em;
}

.wizard-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.08);
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 700px;
  overflow: hidden;
}

.sidebar {
  border-right: 1px solid var(--border);
  background: #fcfcfc;
  padding: 16px;
}

.sidebar ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sidebar button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 10px;
  font-size: 0.9rem;
  padding: 10px 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sidebar button:hover {
  border-color: #cbd5e1;
  color: var(--text);
}

.sidebar button.current {
  border-color: var(--primary);
  background: rgba(11, 61, 98, 0.06);
  color: var(--primary);
  font-weight: 600;
}

.sidebar button.complete {
  border-color: rgba(155, 122, 47, 0.55);
  background: rgba(155, 122, 47, 0.08);
  color: #6c551f;
}

.sidebar button.locked {
  opacity: 0.65;
  cursor: not-allowed;
}

.wizard-main {
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
}

.mobile-progress {
  display: none;
  margin-bottom: 12px;
}

.progress-track {
  width: 100%;
  height: 10px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 14.2857%;
  background: linear-gradient(90deg, var(--primary), #0e507f);
  transition: width 0.26s ease;
}

#progressText {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.step-panel {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.step-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.step-note {
  margin-bottom: 14px;
}

.req {
  color: var(--accent);
}

.field-grid {
  display: grid;
  gap: 12px;
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 6px;
}

label,
legend {
  font-size: 0.93rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 11px;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--ring);
  border-color: #5f84a3;
}

.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #d24b40;
}

.field-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 12px 0 0;
  padding: 10px 12px 12px;
}

.field-group legend {
  color: var(--text);
  font-weight: 500;
  padding: 0 4px;
}

.field-group label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 7px 0;
}

.checkbox-grid {
  display: grid;
  gap: 4px;
}

.conditional {
  margin-top: 12px;
  border-left: 3px solid var(--accent);
  background: rgba(155, 122, 47, 0.08);
  border-radius: 10px;
  padding: 12px;
}

.hidden {
  display: none;
}

.repeater-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.repeat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

.repeat-grid {
  display: grid;
  gap: 10px;
}

.intro-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.intro-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}

.field-hint {
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.field-group .field-hint {
  margin: 0 0 8px;
}

.disclaimer-text {
  color: var(--muted);
  font-size: 0.9rem;
}

.repeat-remove {
  display: inline-flex;
  margin-bottom: 6px;
}

.review-instructions ol {
  margin: 8px 0 8px 18px;
  padding: 0;
}

.repeat-footer {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.link-btn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}

.link-btn:hover {
  color: var(--primary-hover);
}

.field-error {
  min-height: 1.05em;
  font-size: 0.82rem;
  color: var(--danger);
  margin: 0;
}

.nav-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.btn {
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.94rem;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #c8d1dc;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn-ghost:hover {
  color: var(--text);
}

.btn-small {
  font-size: 0.84rem;
  padding: 7px 10px;
}

/*
  The "add another" control sits BELOW its list, where the decision to add one is
  actually made. A single real-estate card runs ~1,800px, so a header button ends
  up roughly four screens above the field the client just finished — and because
  new rows append, the row it creates lands four screens below the click.

  Full width and dashed so it reads as an empty slot waiting to be filled and
  visually closes the list. Deliberately unlike the solid primary button, since
  down here it sits near "Continue".
*/
.btn-add-row {
  display: block;
  width: 100%;
  margin: 2px 0 4px;
  /* Clears the 44px minimum tap target; 12px lands at 43.8px. */
  padding: 13px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-add-row:hover {
  background: #f8fafc;
  border-color: var(--accent, #9b7a2f);
  color: var(--text);
}

.btn-add-row:focus-visible {
  outline: 2px solid var(--accent, #9b7a2f);
  outline-offset: 2px;
}

.repeat-count {
  color: var(--muted);
  font-weight: 400;
}

/* With the button gone the header is just a label, so it no longer needs to
   space two items apart. */
.repeater-header {
  justify-content: flex-start;
}

.summary {
  display: grid;
  gap: 14px;
}

.summary-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.summary-header h3 {
  font-size: 0.97rem;
}

/*
  The review step now shows full questions, not short labels, so the question
  column is proportional rather than a fixed 260px — a two-line question in a
  narrow fixed column wrapped into a ribbon.
*/
.summary-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-bottom: 1px solid #eef2f6;
  align-items: start;
}

/* Names the repeater entry a run of questions belongs to — "Real Estate,
   entry 2", "You → Former Spouses, entry 1". */
.summary-subhead {
  padding: 10px 12px 6px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  background: #fcfcfc;
  border-bottom: 1px solid #eef2f6;
}

.summary-missing {
  color: var(--muted);
  font-style: italic;
}

.summary-row:last-child {
  border-bottom: 0;
}

.summary-label,
.summary-value {
  padding: 9px 12px;
}

.summary-label {
  color: var(--text);
  font-weight: 600;
  background: #fcfcfc;
  border-right: 1px solid #eef2f6;
}

.summary-value ul {
  margin: 0;
  padding-left: 18px;
}

.summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.summary-footnote {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--muted);
}

.print-wrap {
  font-family: var(--font);
  color: var(--text);
  padding: 28px;
}

.print-wrap h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.print-wrap .print-meta {
  color: var(--muted);
  margin-bottom: 12px;
}

.print-wrap .summary-section {
  margin-bottom: 12px;
}

.print-wrap .footer-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: #555;
  border-top: 1px solid #ddd;
  padding-top: 8px;
}

@media (max-width: 980px) {
.wizard-card {
    grid-template-columns: 1fr;
}

.sidebar {
    display: none;
}

.wizard-main {
    padding: 16px;
}

.mobile-progress {
    display: block;
}

.header-actions {
    align-items: flex-start;
}

.app-header {
    flex-direction: column;
    align-items: flex-start;
}
}

@media (max-width: 760px) {
.two-col,
.summary-row {
    grid-template-columns: 1fr;
}

.summary-label {
    border-right: 0;
    border-bottom: 0;
    padding-bottom: 2px;
}

/* Stacked, a plain second row is indistinguishable from another question, so
     the answer is indented under its question and visibly subordinate. */
.summary-value {
    background: #fff;
    padding-top: 2px;
    padding-left: 24px;
    border-left: 3px solid var(--accent);
    margin: 0 12px 8px;
}

.nav-row {
    flex-direction: column-reverse;
}

.btn {
    width: 100%;
}

.repeater-header {
    flex-direction: column;
    align-items: stretch;
}

.dev-tools-panel {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
}

.dev-tools-grid {
    grid-template-columns: 1fr;
}
}

/*
  Print output. The summary is rendered into #printRoot and the browser's own
  print engine paginates it — no canvas, so none of Safari's canvas-area limits
  apply, and the text stays real text rather than a picture of text.
*/
.print-root {
  display: none;
}

@media print {
/* Isolate the print root: everything else in the body is screen furniture. */
body > *:not(.print-root) {
    display: none !important;
}

.print-root {
    display: block !important;
}

html,
body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

@page {
    size: letter;
    margin: 0.5in;
  
}

/* Keep a label and its value together across a page break. */
.print-root .summary-row {
    break-inside: avoid;
    page-break-inside: avoid;
}

.print-root a {
    text-decoration: none;
    color: inherit;
}
}

/*
  The pre-print helper. window.print() drops older clients into a dialog that
  never says it can make a PDF, so this explains the one step first, in words
  matched to their platform.
*/
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(17, 24, 39, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.22);
  width: min(540px, 100%);
  padding: 20px 22px;
  display: grid;
  gap: 12px;
}

.modal-card h3 {
  font-size: 1.15rem;
}

.pdf-help-steps {
  font-size: 1.02rem;
  line-height: 1.6;
  border-left: 3px solid var(--accent);
  background: rgba(155, 122, 47, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

/* ------------------------------------------------------------------
   deed-intake additions to the shared questionnaire styles.

   Three things this form needs that the hand-written wizards don't:
   the logo lockup in the header, a description line under a radio
   choice, and the "why I ask" note that every sensitive question
   carries (debt, divorce, benefits, Medicaid). Everything else above
   is the shared design system, unchanged.
   ------------------------------------------------------------------ */

.app-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-logo {
  width: 260px;
  max-width: 68vw;
  height: auto;
  margin-bottom: 6px;
}

/* The reason a question is being asked, in one plain sentence. Blue rather
   than the accent gold used by .conditional, so a "why" note is never
   mistaken for a follow-up field. */
.why-note {
  margin: 2px 0 8px;
  border-left: 3px solid #93b4cc;
  background: rgba(11, 61, 98, 0.05);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #1e3a5f;
}

.field-group .why-note {
  margin: 4px 0 8px;
}

/* Plain-English trade-off under a radio choice ("Free, but it becomes public
   record"). Indented to sit under the option's own text. */
.opt-desc {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 2px;
}

.field-group label > span {
  display: block;
}

/* Standing note inside a step — a fact worth knowing before the call, or a
   "please don't sign anything yet" warning. */
.note-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  background: #f4f8fb;
  padding: 11px 13px;
  margin: 12px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #16334d;
}

.note-box.warn {
  border-left-color: #b45309;
  background: #fff8ef;
  color: #7c2d12;
}

.optional-tag {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.step-lead {
  margin-bottom: 12px;
  color: var(--muted);
}

.privacy-note {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.55;
}

.call-note {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.token-banner {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.92rem;
}

/* Stacked on a phone the header runs full width, and a left-aligned logo reads
   as though it slid off the edge. Centred, it sits as a proper letterhead over
   the title block. */
@media (max-width: 980px) {
  .brand-logo {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* Ruled subheading that splits a long step into two subjects — e.g. the
   property's tax exemptions, or how care would be paid for. */
.card-subhead {
  margin: 22px 0 2px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
}

.field-grid > .card-subhead:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.header-action-buttons {
  display: flex;
  gap: 8px;
}

@media (max-width: 760px) {
  .header-action-buttons {
    width: 100%;
  }
}

/*
  A questionnaire question is a full sentence, so legends here routinely wrap
  to two or three lines. A wrapped <legend> renders in the fieldset's border
  gap and cuts across the rule on both sides; floating it drops the whole
  question inside the box, leaving the border unbroken.
*/
.field-group legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
}

.field-group legend + * {
  clear: both;
}

/*
  /intake/ is a public marketing-funnel page, not a link a client is sent, so
  the logo doubles as the way back to the rest of the site.
*/
.brand-home {
  display: inline-block;
  line-height: 0;
}

@media (max-width: 980px) {
  .brand-home {
    display: block;
    text-align: center;
  }
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}