* { box-sizing: border-box; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--primary)); }
[hidden] { display: none !important; }

.top { max-width: 760px; margin: 0 auto; padding: 28px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-logo { height: 28px; width: auto; display: block; }

main, #offer { display: grid; gap: 16px; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 8px; }
.foot { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; font-size: .8125rem; color: hsl(var(--muted-foreground)); }

h1 { font-family: var(--font-heading); font-weight: 400; font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 8px; }
.muted, .hint { color: hsl(var(--muted-foreground)); }
.hint { font-size: .8125rem; margin-top: 8px; }

.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px;
}
.center { text-align: center; padding: 48px 24px; }

.draft {
  border: 1px solid hsl(var(--attention) / .45);
  background: hsl(var(--attention) / .1);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: .875rem;
  font-weight: 500;
}

.intro { padding: 8px 0; }
.view { display: grid; gap: 16px; }
.eyebrow { font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 10px; }
.lead { font-size: 1rem; margin-top: 12px; max-width: 56ch; }

.stepper ol { list-style: none; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; font-size: .875rem; }
.stepper li { display: flex; align-items: center; gap: 12px; color: hsl(var(--muted-foreground)); }
.stepper li + li::before { content: ""; width: 24px; height: 1px; background: hsl(var(--border)); flex: none; }
.stepper .step { display: flex; align-items: center; gap: 8px; }
.stepper .dot {
  width: 24px; height: 24px; border-radius: 9999px; display: inline-grid; place-items: center; flex: none;
  border: 1px solid hsl(var(--border)); font-size: .75rem; font-weight: 600; background: hsl(var(--card));
}
.stepper li.current { color: hsl(var(--foreground)); font-weight: 500; }
.stepper li.current .dot { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.stepper li.complete { color: hsl(var(--foreground)); }
.stepper li.complete .dot { position: relative; color: transparent; background: hsl(var(--success)); border-color: hsl(var(--success)); font-size: 0; }
.stepper li.complete .dot::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: hsl(var(--success-foreground));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.amount { font-family: var(--font-heading); font-size: 2.25rem; line-height: 1.2; margin: 4px 0 8px; }
.per { font-family: var(--font-sans); font-size: .9375rem; color: hsl(var(--muted-foreground)); }
.note { font-size: .875rem; font-weight: 500; margin: 12px 0 0; }

.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid hsl(var(--ring)); outline-offset: 2px;
}

form { margin-top: 16px; display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field span { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 6px; }
input[type="email"], input[type="number"], input:not([type]) {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .9375rem;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  background: hsl(var(--background)); color: hsl(var(--foreground));
}
.terms { margin-top: 8px; font-size: .9375rem; }
.terms-section { padding: 14px 0; border-top: 1px solid hsl(var(--border)); }
.terms-section:first-child { border-top: 0; padding-top: 4px; }
.terms-section h3 { font-size: .9375rem; font-weight: 600; margin: 0 0 6px; }
.terms-clause { margin: 0 0 6px; }
.terms-clause:last-child { margin-bottom: 0; }
.terms-clause strong { font-weight: 600; }
.terms-version { font-size: .75rem; color: hsl(var(--muted-foreground)); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid hsl(var(--border)); }
#accept-form { padding-top: 16px; border-top: 1px solid hsl(var(--border)); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.check input { margin-top: 5px; width: 16px; height: 16px; accent-color: hsl(var(--primary)); flex: none; }


.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 9999px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; text-decoration: none;
  justify-self: start; margin-top: 4px;
}
.btn:hover:not(:disabled) { background: hsl(var(--primary) / .9); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-secondary {
  background: hsl(var(--card)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border)); min-height: 40px; font-size: .875rem; margin-top: 8px;
}
.btn-secondary:hover:not(:disabled) { background: hsl(var(--muted) / .6); }

.error {
  font-size: .875rem; border-radius: var(--radius); padding: 10px 12px; margin: 0;
  border: 1px solid hsl(var(--destructive) / .35); background: hsl(var(--destructive) / .08); color: hsl(var(--destructive));
}
.done {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid hsl(var(--success) / .4); background: hsl(var(--success) / .08);
}
.done p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  h1 { font-size: 1.625rem; }
  .prices, .row { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions .btn { margin-top: 0; }
.btn.is-disabled { opacity: .5; }
.btn-small { min-height: 34px; padding: 0 14px; font-size: .8125rem; margin-top: 0; }
.locked p { margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.section-head h2 { margin: 0; }
.section-head .btn { margin-top: 0; }
textarea, select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .9375rem;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  background: hsl(var(--background)); color: hsl(var(--foreground));
}
textarea { resize: vertical; }
input[type="tel"] {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .9375rem;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  background: hsl(var(--background)); color: hsl(var(--foreground));
}
.card > .field, .card > .row { margin-top: 14px; }
.lender {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 18px; margin: 16px 0 0;
  display: grid; gap: 14px; background: hsl(var(--background));
}
.lender-head { display: flex; gap: 12px; align-items: flex-end; }
.grow { flex: 1; }
.link-btn { background: none; border: 0; padding: 10px 0; font: inherit; font-size: .875rem; color: hsl(var(--muted-foreground)); cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: hsl(var(--destructive)); }
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.lender .uploads { margin-top: 0; }
.upload { border: 1px dashed hsl(var(--border)); border-radius: var(--radius); padding: 14px; background: hsl(var(--card)); display: grid; gap: 8px; align-content: start; }
.upload-label { margin: 0; display: grid; gap: 2px; font-size: .875rem; }
.upload-label span { color: hsl(var(--muted-foreground)); font-size: .8125rem; }
.upload-files { list-style: none; margin: 0; padding: 0; font-size: .8125rem; display: grid; gap: 2px; }
.upload-files:empty { display: none; }
.upload-files li::before { content: "\2713  "; color: hsl(var(--success)); font-weight: 600; }
.upload .btn { justify-self: start; }
.upload-status { margin: 0; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.upload-status:empty { display: none; }
.upload-status.is-error { color: hsl(var(--destructive)); }
#materials-status:empty { display: none; }
@media (max-width: 640px) {
  .stepper ol { gap: 8px; }
  .stepper li { gap: 8px; }
  .stepper li + li::before { width: 12px; }
  .stepper li:not(.current) .step span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .uploads { grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
}
.section-title { font-size: 1.125rem; font-weight: 600; margin: 16px 0 -4px; }
#card-saved .btn { margin-top: 16px; }
.kickoff-embed { margin-top: 12px; border-radius: var(--radius); overflow: hidden; }
.kickoff-embed iframe { display: block; width: 100%; height: 700px; border: 0; }
.dropzone {
  margin-top: 16px; display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 28px 20px; border: 2px dashed hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card));
}
.lender .dropzone { margin-top: 0; }
.dropzone:hover { background: hsl(var(--accent) / .4); }
.dropzone.is-over { border-color: hsl(var(--primary)); background: hsl(var(--accent) / .6); }
.dropzone:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.dropzone-icon { color: hsl(var(--muted-foreground)); display: inline-grid; }
.dropzone-title { margin: 0; font-weight: 500; }
.dropzone-browse { color: hsl(var(--primary)); text-decoration: underline; }
.dropzone-note { margin: 0; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.dropzone + .upload-files { margin-top: 10px; }
.drop-intro { margin: 16px 0 0; font-size: .9375rem; }
.drop-intro p { margin: 0 0 6px; font-weight: 600; }
.drop-intro ul { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.lender .drop-intro { margin-top: 0; }
.drop-intro + .dropzone { margin-top: 10px; }
.loan-types { border: 0; padding: 0; margin: 14px 0 0; }
.loan-types legend { font-size: .8125rem; font-weight: 600; margin-bottom: 8px; padding: 0; }
.check-grid { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: 8px 14px; }
@media (max-width: 760px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.loan-types + .field { margin-top: 18px; }
.check-grid .check { align-items: center; }
.check-grid .check input { margin-top: 0; }
.card > label.field, .lender > label.field { display: block; }
.lender-grid { margin-top: 12px; }
.lender-grid-head, .lender-row { display: grid; grid-template-columns: 1.6fr 1.3fr 1.3fr .8fr 32px; gap: 8px; align-items: center; }
.lender-grid-head { font-size: .8125rem; font-weight: 600; padding-bottom: 6px; }
#lenders { display: grid; gap: 8px; }
.lender-row input, .lender-row select { padding: 8px 10px; }
.cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row-remove { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius); color: hsl(var(--muted-foreground)); cursor: pointer; }
.row-remove:hover { color: hsl(var(--destructive)); background: hsl(var(--muted) / .6); }
.row-remove:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.doc-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 2px; }
@media (max-width: 640px) {
  .lender-grid-head { display: none; }
  .lender-row { grid-template-columns: 1fr 1fr; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); position: relative; }
  .lender-row .cell:first-child { grid-column: 1 / -1; padding-right: 36px; }
  .cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 4px; white-space: normal; }
  .row-remove { position: absolute; top: 8px; right: 8px; }
}
.add-lender { margin-top: 12px; }