:root {
  --bg-canvas: #F5F7FA;
  --bg-card: #FFFFFF;
  --border: #E9EDF3;
  --primary: #2264E5;
  --primary-soft: #EDF3FE;
  --cta: #FFC400;
  --cta-dark: #E5AF00;
  --text-primary: #172B4D;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --positive: #1F9D55;
  --positive-soft: #E8F7EE;
  --negative: #E5484D;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }
/* The 680px column is right for FORM CONTENT — it keeps line length readable
   and inputs from stretching. It was never right for the header: four tool
   pills plus the brand and the Request Feature button cannot fit, so the pills
   wrapped mid-word ("Settlement / Maximizer") and the bar ran to two lines.
   Chrome gets its own width; content keeps the narrow column. */
.topbar .wrap { max-width: 1180px; }
/* Canonical tool-nav pills. These used to live ONLY inside demand.html's local
   <style>, so every other page that reused the same markup (requests, admin)
   rendered the links as bare text jammed together with no spacing — the nav
   looked broken on 2026-08-05. Shared markup needs shared styles. */
.tool-nav { display: flex; gap: 8px; align-items: center; }
.tool-nav a, .tool-nav span.cur { padding: 7px 14px; border-radius: 999px; font: 700 13px 'Inter', sans-serif; text-decoration: none; }
.tool-nav a { color: var(--text-secondary); }
.tool-nav a:hover { background: var(--primary-soft); color: var(--primary); }
.tool-nav span.cur { background: var(--primary); color: #fff; }
.tool-nav a, .tool-nav span.cur, .tool-nav button { white-space: nowrap; }
/* Actions sit hard right, separated from navigation — a button that looks like
   a fifth tool invites clicks from people looking for a fifth tool. */
.tool-nav .fr-btn { margin-left: auto; }

/* Admin is a management view, not a fifth tool, and only managers ever see it
   (revealed by /api/me/tools). Outlined rather than filled, and pushed to the
   right with the actions, so it does not read as another place to do the job.
   When it is hidden, .fr-btn takes the same auto margin and nothing shifts. */
.tool-nav a.admin { margin-left: auto; border: 1px solid var(--border); color: var(--text-secondary); }
.tool-nav a.admin:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
/* Only the FIRST admin pill takes the auto margin; the rest sit next to it.
   /demand carries two (Admin, Feature Requests) and without this each one
   would claim the free space and shove the previous pill left. */
.tool-nav a.admin ~ a.admin { margin-left: 8px; }
.tool-nav a.admin ~ .fr-btn { margin-left: 8px; }
/* `hidden` must win over the flex display the nav gives its children,
   otherwise every admin pill is visible to everyone — the exact leak this
   whole mechanism exists to prevent. */
.tool-nav a.admin[hidden] { display: none; }
.tool-nav span.cur.admin { background: var(--text-primary); }
@media (max-width: 900px) {
  /* Below the fold-out width, scroll the nav sideways rather than wrap it.
     A wrapped nav pushes the page content down on every single tool. */
  .topbar-in { gap: 10px; }
  .tool-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tool-nav::-webkit-scrollbar { display: none; }
  .tool-nav .fr-btn { margin-left: 8px; }
}

a { color: var(--primary); }

/* top bar */
.topbar { background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; }
.brand-text { line-height: 1.15; }
.brand-text strong { font-size: 17px; font-weight: 800; display: block; }
.brand-text span { font-size: 11px; color: var(--text-secondary); }
.lang-toggle { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lang-btn { border: 0; background: transparent; padding: 6px 12px; font: 600 12px 'Inter', sans-serif; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.lang-btn.active { background: var(--primary); color: #fff; }

/* cards */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 20px; margin-top: 16px; }

/* hero */
.hero { text-align: left; }
.hero-badge { display: inline-block; background: var(--positive-soft); color: var(--positive); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.hero h1 { font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; text-wrap: balance; }
.hero-sub { color: var(--text-secondary); font-size: 14px; }

.progress-block { margin-top: 16px; }
.progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.progress-label { font-size: 13px; font-weight: 700; }
.progress-pct { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.progress-bar { height: 10px; background: var(--primary-soft); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 999px; transition: width .4s ease; }

.video-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.video-details summary { font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; list-style: none; }
.video-details summary::-webkit-details-marker { display: none; }
.video-frame { margin-top: 10px; position: relative; padding-top: 56.25%; border-radius: 8px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* identity */
.identity h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.fields-grid input { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font: 400 15px 'Inter', sans-serif; color: var(--text-primary); width: 100%; }
.fields-grid input:focus { outline: 2px solid rgba(34, 100, 229, .4); border-color: var(--primary); }
.identity-known { display: flex; align-items: center; gap: 10px; font-size: 14px; }
[hidden] { display: none !important; }
.check-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--positive); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* doc cards */
.doc-card { position: relative; }
/* One document first (2026-08-23). The first card that still needs a file is
   open with its camera button; the other two collapse to a single tappable
   line so the page asks for ONE thing at a time. A collapsed card is never
   locked: one tap opens it, and a file dropped on it opens it too. */
.doc-card.collapsed { padding: 14px 16px; cursor: pointer; }
.doc-card.collapsed:hover { background: #FBFCFE; }
.doc-card.collapsed .doc-body { display: none; }
.doc-card.collapsed .doc-head { align-items: center; }
.doc-card.collapsed .doc-title { font-size: 15.5px; }
.doc-head-text { flex: 1; min-width: 0; }
.doc-tap { font-size: 12.5px; color: var(--primary); font-weight: 600; margin-top: 1px; }
.doc-chevron { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); color: var(--primary); font-weight: 700; font-size: 16px; line-height: 24px; text-align: center; }
.doc-start { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--text-primary); background: #FFF8DB; border: 1px solid #F5DE8A; border-radius: 8px; padding: 8px 12px; }
.doc-momentum { font-size: 13px; font-weight: 700; color: var(--positive); margin-bottom: 8px; }
/* Post-sign hero: same card, green accent so "you're signed" reads as a
   confirmation rather than the blue "on hold" warning it replaces. */
.hero.hero-signed { border-color: #CBEBD6; }
.hero.hero-signed h1 { color: var(--positive); }
.doc-card.done { border-color: #CBEBD6; background: #FBFEFC; }
.doc-head { display: flex; align-items: flex-start; gap: 12px; }
.doc-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.doc-card.done .doc-num, .doc-card.has-files .doc-num { background: var(--positive); color: #fff; }
.doc-title { font-size: 18px; font-weight: 700; }
.doc-why { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.doc-where { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.doc-done-note { display: block; border: 0; padding: 4px 0; background: transparent; font-family: inherit; font-size: 13px; text-align: left; color: var(--positive); font-weight: 600; margin-top: 8px; cursor: pointer; }
.doc-done-note:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.doc-done-more { color: var(--muted, #5b6472); font-weight: 500; }
.doc-card.done .doc-head { cursor: pointer; }
.doc-card.done:not(.adding) .doc-body { display: none; }
.submit-hint[role="button"] { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); }
section.hero { cursor: pointer; }

.drop-zone { margin-top: 12px; border: 2px dashed var(--primary); border-radius: 12px; background: #F7FAFF; padding: 22px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .05s; }
.drop-zone:hover, .drop-zone.drag { background: var(--primary-soft); }
.drop-zone:active { transform: scale(.995); }
.drop-zone .dz-main { display: inline-block; font-weight: 700; font-size: 14.5px; color: #fff; background: var(--primary); padding: 11px 22px; border-radius: 8px; }
.drop-zone .dz-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { position: relative; width: 72px; }
.thumb .t-img { width: 72px; height: 72px; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.thumb .t-name { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-top: 2px; }
.thumb .t-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-primary); color: #fff; border: 0; font-size: 11px; cursor: pointer; line-height: 1; }
.thumb .t-bar { height: 4px; background: var(--primary-soft); border-radius: 999px; margin-top: 3px; overflow: hidden; }
.thumb .t-bar-fill { height: 100%; width: 0%; background: var(--primary); border-radius: 999px; transition: width .2s; }
.thumb.t-done .t-bar { background: var(--positive-soft); }
.thumb.t-done .t-bar-fill { background: var(--positive); width: 100% !important; }
.thumb .t-status { display: block; font-size: 9.5px; color: var(--text-muted); margin-top: 1px; min-height: 12px; }
.thumb.t-failed .t-img { border-color: var(--negative); opacity: .55; }
.thumb.t-failed .t-bar-fill { background: var(--negative); width: 100% !important; }
.thumb.t-failed .t-status { color: var(--negative); font-weight: 600; }
.thumb .t-retry { border: 0; background: var(--negative); color: #fff; border-radius: 6px; font: 600 9.5px 'Inter', sans-serif; padding: 2px 7px; cursor: pointer; margin-left: 2px; }

/* "I do not have this document" path: a quiet text link under each card;
   tapping it swaps in one reassurance line (what the firm does instead) and
   flags the doc in the submission payload so the collector knows to chase it
   at the source rather than texting the client for a paper they never had. */
.no-have-row { margin-top: 10px; text-align: center; }
.no-have-link { font-size: 12.5px; color: var(--text-muted); text-decoration: underline; }
.no-have-note { margin-top: 8px; font-size: 13px; color: var(--text-primary); background: var(--positive-soft); border: 1px solid #CBEBD6; border-radius: 8px; padding: 8px 12px; }
.doc-card.no-have .drop-zone { border-color: var(--border); }

.mistakes { margin-top: 12px; }
.mistakes summary { font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; list-style: none; }
.mistakes summary::before { content: '+ '; }
.mistakes[open] summary::before { content: '\2212  '; }
.mistakes summary::-webkit-details-marker { display: none; }
.mistakes ul { margin: 8px 0 0 4px; padding-left: 16px; font-size: 12.5px; color: var(--text-secondary); }
.mistakes li { margin-bottom: 4px; }
.mistakes li strong { color: var(--text-primary); }

/* submit */
.submit-card { text-align: center; }
.terms-row { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 14.5px; color: var(--text-primary); margin-bottom: 14px; cursor: pointer; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #FAFBFD; }
.terms-row:hover { background: var(--primary-soft); }
.terms-row input { flex: 0 0 auto; width: 24px; height: 24px; accent-color: var(--primary); cursor: pointer; }
.btn-primary { width: 100%; border: 0; border-radius: 10px; background: var(--cta); color: var(--text-primary); font: 800 16px 'Inter', sans-serif; padding: 15px 20px; cursor: pointer; box-shadow: 0 2px 0 var(--cta-dark); transition: transform .05s; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .7; cursor: wait; }
.trust-line { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
/* JS-failure / no-JS safety net. Shown above the fold only when app.js cannot
   give the client an upload path (init threw, or #doc-cards never rendered);
   hidden otherwise, so it costs the fold nothing when uploads work. Amber so it
   reads as "here is another way", not an error. */
.js-fallback-card { border-color: #F5DE8A; background: #FFF8DB; }
.js-fallback-card p { font-size: 14px; color: var(--text-primary); margin: 0; }
.js-fallback-card a { text-decoration: none; }
/* Passive consent line under the submit button (replaces the blocking terms
   checkbox). Quiet by design - it informs, it does not gate. */
.consent-line { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.consent-line a { color: var(--text-secondary); }
/* Trust bullets live in the .reassure-card, directly BELOW #doc-cards (moved
   out of the hero 2026-08-26). They shipped under the submit button first,
   which measured at 83% down the page - and Clarity's scroll map says only 16%
   of visitors get that far, so ~84% never saw them. In the hero they still
   arrived before anyone photographed a financing contract, but they rented
   hero pixels that competed with doc-1's camera button (the page's first
   metric, and the one thing that must clear the phone fold). Below the first
   ask they still land before the contract photo, without pushing the button
   down. Compact one-per-line stack so the block stays cheap. */
.trust-bullets {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary);
}
/* One claim per line, one meaningful icon each: a padlock, a struck-through
   location pin, a shield. Three identical ticks only said "list"; these say
   something at a glance, which is the whole job of a trust mark on a page
   where someone is about to photograph their financing contract.

   BLUE, not green, and that is a correctness fix rather than taste: green
   already means "document received" on this page (the doc-card checkmarks),
   so green trust icons collided with the one signal the client most needs to
   read. Brand blue also ties the promise to the firm making it.

   One per line rather than a wrapping row: the row orphaned its third item
   into a lopsided 2-then-1 on desktop, and ~80% of this traffic is mobile
   where all three stack regardless. Claims are short enough that each holds
   one line on a phone. */
.trust-bullets li { display: flex; align-items: center; gap: 7px; }
/* Social proof leads: a real client count reassures harder than any security
   claim, so it reads first and slightly darker. The number is Sam's figure. */
.trust-bullets li.tb-proof { color: var(--text); font-weight: 600; }
.trust-bullets li.tb-proof strong { font-weight: 800; }
.trust-bullets li svg { flex: 0 0 auto; color: var(--primary, #2264E5); }
.submit-hint { font-size: 13.5px; font-weight: 600; color: var(--negative); margin-top: 10px; min-height: 1em; }
.upload-progress { margin-top: 14px; }
.upload-status { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }

/* success */
.success-card { text-align: center; border-color: #CBEBD6; }
.success-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--positive); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 4px auto 12px; }
.success-card h2 { font-size: 20px; font-weight: 800; }
.success-card p { font-size: 14px; color: var(--text-secondary); margin-top: 8px; }
.missing-list { font-weight: 600; color: var(--text-primary) !important; }
.next-steps { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px !important; }

/* alt channels */
.alt-channels { text-align: center; }
.alt-line { font-size: 13.5px; color: var(--text-secondary); margin: 0; }
.alt-line a { text-decoration: none; }

/* footer */
.site-footer { margin-top: 28px; padding: 20px 0 32px; border-top: 1px solid var(--border); background: var(--bg-card); }
.site-footer p { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }

@media (min-width: 560px) {
  .hero h1 { font-size: 28px; }
}
/* Phone-width fold budget (measured against 390x844 with browser chrome,
   ~660px of visible page). The hero was compressed 2026-08-26 to just the
   headline + progress bar; the subline, trust bullets and video moved to the
   .reassure-card below #doc-cards. DOM order above the first camera button is
   now: topbar (~55px), hero card (h1 + progress), then card 1's head, start
   hint, where-to-find text, and drop zone - which lands the button near the
   fold line, one thumb flick away. The padding/margin shaving below still
   helps on the smallest phones (iPhone SE 375x667, in-app webviews). */
@media (max-width: 480px) {
  .card { padding: 16px; margin-top: 12px; }
  .hero h1 { font-size: 22px; }
  .hero-sub { font-size: 13.5px; }
  .progress-block { margin-top: 12px; }
  .trust-bullets { margin-top: 10px; gap: 4px; font-size: 12px; }
  .video-details { margin-top: 10px; padding-top: 8px; }
  .doc-start { margin-top: 8px; padding: 7px 10px; }
  .doc-where { margin-top: 6px; }
  .drop-zone { margin-top: 10px; padding: 16px 14px; }
}
@media (max-width: 420px) {
  .fields-grid { grid-template-columns: 1fr; }
}

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(23,43,77,.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 12px; max-width: 640px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(16,24,40,.2); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; font-weight: 700; }
.modal-x { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.modal-body { padding: 16px 20px 24px; overflow-y: auto; font-size: 13.5px; color: var(--text-secondary); }
.modal-body h4 { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin: 14px 0 4px; }
.modal-body p { margin: 6px 0; }
.nudge-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn-ghost { border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 12px 16px; font: 600 14px 'Inter', sans-serif; color: var(--text-secondary); cursor: pointer; }
.btn-ghost:hover { background: var(--bg-canvas); }