/* Self-hosted fonts (vendored from Google Fonts, OFL license) — zero runtime third-party calls. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url(fonts/Archivo-normal-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url(fonts/Archivo-normal-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Pipeline by Ameris — shared design system.
   Tokens per docs/ameris-design-spec.md (handoff bundle) (§1 colors, §2 type).
   Page-specific styles live in each page's own <style>. */

:root{
  --ameris-navy:#152548; --ameris-navy-hover:#132141; --ameris-navy-deep:#0C203F;
  --ameris-red:#CD3135; --ameris-red-hover:#B82C30; --ameris-red-active:#A32629;
  --text-heading:#152548; --text-body:#4A4A4A; --text-muted:#6B7080;
  --text-on-navy-muted:rgba(255,255,255,0.72);
  --bg-page:#FFFFFF; --bg-section:#F6F8F8; --bg-field:#FFFFFF;
  --border-strong:#82889B; --border-light:#D6D9E0;
  --success:#1E7B4D; --success-tint:#E7F5EE; --success-mint:#7ED4A8;
  --error:#BA0C2F; --error-tint:#FBEBEE;
  --focus-ring:#337AB7; --link:#CD3135;
  --radius-chrome:0px; --radius-card:4px;
  --shadow-card:0 1px 3px rgba(21,37,72,.10);
  --font-display:"Archivo","Archivo Black","Arial Black","Helvetica Neue",sans-serif;
  --font-body:"Archivo","Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-page);color:var(--text-body);font:400 15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{color:var(--text-heading)}
a{color:var(--link)}
.display{font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:.005em}
.mono{font-family:var(--font-mono);font-weight:500}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media(max-width:767px){.wrap{padding:0 16px}}

/* ============ demo badge + header (injected by shell.js) ============ */
#demoBadge{position:fixed;top:0;left:0;right:0;min-height:32px;line-height:1.3;background:var(--ameris-navy-deep);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:400;text-align:center;padding:4px 8px}
#demoBadge b{font-weight:700;margin-right:6px}
@media(max-width:560px){#demoBadge{font-size:10.5px}}
@media(max-width:400px){#demoBadge{font-size:9.5px}}
/* top/margin were 32px to clear the fixed #demoBadge. The badge was removed in
   the de-demo sweep and nothing injects it any more, so both were dead space:
   32px of blank above every page, and a 32px gap the sticky header parked
   below — through which page content visibly slid ABOVE the nav while
   scrolling. The #demoBadge rules stay in the stylesheet, unused and inert. */
header#hdr{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border-light);z-index:100}
#hdr .bar{display:flex;align-items:center;gap:16px;height:76px}
#hdr .logo img{height:38px;display:block}
#hdr .prod{display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border-light);padding-left:16px;margin-left:4px}
#hdr .prod .t{font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:17px;line-height:1;color:var(--ameris-navy)}
#hdr .prod .s{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ameris-red);margin-top:3px}
#hdr nav{margin-left:auto;display:flex;gap:28px;align-items:center}
#hdr nav a{font:700 13.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.03em;color:var(--ameris-navy);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
#hdr nav a:hover{border-bottom-color:var(--border-light)}
#hdr nav a.on{border-bottom-color:var(--ameris-red)}
#hdr .out{background:none;border:none;font-size:12.5px;font-weight:500;color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
#hdr .out:hover{color:var(--ameris-red)}
@media(max-width:900px){#hdr .bar{height:auto;flex-wrap:wrap;padding:10px 0}#hdr .logo img{height:30px}#hdr nav{margin-left:0;width:100%;gap:18px;overflow-x:auto;padding-bottom:2px}}

/* ============ page head band ============ */
.band{background:var(--ameris-navy);color:#fff;padding:36px 0 40px}
.band .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-navy-muted)}
.band h1{color:#fff;font-size:36px;line-height:1.05;margin-top:8px}
.band .sub{margin-top:10px;font-size:15px;color:var(--text-on-navy-muted);max-width:680px}
@media(max-width:767px){.band{padding:24px 0 28px}.band h1{font-size:28px}}

/* ============ buttons ============ */
.btn-red{height:46px;padding:0 22px;background:var(--ameris-red);color:#fff;border:0;border-radius:var(--radius-chrome);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-red:hover{background:var(--ameris-red-hover)}
.btn-red:disabled{opacity:.45;cursor:not-allowed}
.btn-navy-o{height:46px;padding:0 22px;background:transparent;border:2px solid var(--ameris-navy);color:var(--ameris-navy);border-radius:var(--radius-chrome);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-navy-o:hover{background:var(--ameris-navy);color:#fff}
.rowbtn{height:32px;padding:0 14px;border:1px solid var(--border-light);border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:var(--text-body);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.rowbtn:hover{border-color:var(--ameris-navy);color:var(--ameris-navy)}
.rowbtn.solid{background:var(--ameris-navy);border-color:var(--ameris-navy);color:#fff;font-weight:700}
.rowbtn.solid:hover{background:var(--ameris-navy-hover)}
.rowbtn.danger:hover{border-color:var(--error);color:var(--error)}
.chip{height:36px;padding:0 16px;border:1px solid var(--border-light);border-radius:999px;background:#fff;font-size:13px;font-weight:500;color:var(--text-body)}
.chip:hover{border-color:var(--ameris-navy)}
.chip.on{background:var(--ameris-navy);border-color:var(--ameris-navy);color:#fff;font-weight:700}

/* ============ forms ============ */
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ameris-navy);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-card);padding:0 12px;font:400 15px var(--font-body);color:var(--ameris-navy);background:var(--bg-field)}
.field textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23152548'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.field .hint{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.field.err input,.field.err select{border-color:var(--error);background:var(--error-tint)}
.field .errmsg{font-size:12px;color:var(--error);margin-top:4px;font-weight:500}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

/* ============ sections, cards, tables ============ */
.sect{margin-top:36px}
.sect-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:12px}
.sect-h .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ameris-red)}
.sect-h h2{font-size:22px;margin-top:2px}
.sect-h .note{font-size:11.5px;color:var(--text-muted);max-width:380px;text-align:right}
.card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px}
.tablecard{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
.tablecard table{min-width:760px}
thead th{background:var(--bg-section);text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:12px 16px;border-bottom:1px solid var(--border-light);white-space:nowrap;user-select:none}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--ameris-navy)}
tbody td{padding:14px 16px;border-bottom:1px solid var(--border-light);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.row{cursor:pointer}
tbody tr.row:hover{background:var(--bg-section)}
td.id{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);white-space:nowrap}
td.bor{font-weight:700;color:var(--ameris-navy);white-space:nowrap}
td.num{font-family:var(--font-mono);font-size:13px;color:var(--text-body);text-align:right;white-space:nowrap}
td.dt{color:var(--text-muted);white-space:nowrap}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pill.pre_qual{background:#EEF1F7;color:var(--ameris-navy)}
.pill.pre_approval{background:#E8EBF2;color:var(--ameris-navy)}
.pill.loan_app{background:var(--ameris-navy);color:#fff}
/* The PO's four real stages (session 2). app_taken/in_process_* had labels but
   no rule, so they rendered as unstyled bare pills. */
.pill.app_taken{background:#E8EBF2;color:var(--ameris-navy)}
.pill.in_process_floating{background:#FDF3E7;color:#8A5A12}
.pill.in_process_locked{background:var(--ameris-navy);color:#fff}
.pill.ok{background:var(--success-tint);color:var(--success)}
.pill.warn{background:var(--error-tint);color:var(--ameris-red)}
.empty{padding:56px 24px;text-align:center}
.empty .big{font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:20px;color:var(--ameris-navy)}
.empty p{color:var(--text-muted);font-size:13.5px;max-width:440px;margin:8px auto 20px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-light);border:1px solid var(--border-light);border-radius:var(--radius-card);overflow:hidden}
.fact{background:#fff;padding:12px 14px}
.fact .fl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.fact .fv{font-size:15px;font-weight:500;color:var(--ameris-navy);margin-top:2px}
.fact .fv.mono{font-family:var(--font-mono);font-size:14px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ameris-navy);color:#fff;padding:12px 22px;border-radius:var(--radius-card);font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:600}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--success)}

/* ============ footer ============ */
footer{background:var(--ameris-navy-deep);color:var(--text-on-navy-muted);margin-top:64px;padding:32px 0;font-size:12px;line-height:1.7}
footer b{color:#fff}

/* ============ print ============ */
.print-only{display:none}
@media print{
  #demoBadge,#hdr,footer,.no-print{display:none !important}
  header#hdr{position:static}
  body{font-size:12px}
  .print-only{display:block}
  .tablecard,.card{box-shadow:none;border-color:#999}
}

/* ---- dropdowns never cover their field ----
 * Chrome 135+ customizable select: the picker renders as an anchored popover
 * BELOW the control instead of macOS's overlay-on-top behavior. Safari/Firefox
 * ignore this and keep their native picker (unchanged). */
select, ::picker(select) { appearance: base-select; }
::picker(select) {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(21, 37, 72, .18);
  margin-top: 4px;
  padding: 4px;
}
select option {
  padding: 7px 12px;
  border-radius: 5px;
  font: 500 13px var(--font-body);
  color: var(--ameris-navy);
}
select option:hover, select option:focus { background: var(--bg-section); }
select option:checked { background: var(--bg-section); font-weight: 700; }

/* base-select strips native sizing — pin every control to one exact box so
 * tops/bottoms align across all fields (review 7/27 — pixel pass #2). */
select { box-sizing: border-box; align-content: center; min-height: 0; }
.deal-grid .field input, .deal-grid .field select { height: 44px; line-height: normal; }
.deal-grid .field > div { align-items: stretch; }
.colctl select, .colctl input { box-sizing: border-box; }

/* base-select: center the selected text vertically in every select box
 * (review 7/27 — options rendered top-pinned in Chrome 150) */
@supports (appearance: base-select) {
  select { display: flex; align-items: center; }
  select selectedcontent { display: flex; align-items: center; }
  select::picker-icon { display: none; } /* we draw our own chevron below — never two arrows */
}

/* Every dropdown ADVERTISES itself (review 7/28 — "users can't tell these are
 * drop down selectors") — explicit chevron on every select, every engine. */
select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23152548'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* MI mode picker in the comparison table: right-aligned mono so the selected
 * word sits on the same visual rail as the column's numbers. */
.mimsel{flex:0 0 auto;width:170px;height:30px;box-sizing:border-box;border:1px solid var(--border-strong);border-radius:4px;background-color:var(--bg-field);font:500 12.5px var(--font-mono);color:var(--ameris-navy);text-align:right;padding:0 26px 0 8px}
@supports (appearance: base-select) {
  .mimsel selectedcontent { justify-content: flex-end; }
}

/* $/% unit pickers next to money fields (were inline-styled, which hid the
 * chevron by overriding background). Sized so "$" + arrow both breathe. */
.unitsel {
  width: 64px; height: 44px; flex: 0 0 64px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  background-color: var(--bg-field);
  font: 500 13px var(--font-body); color: var(--ameris-navy);
  padding-left: 12px;
}


/* ---- site footer (review 7/27 — "top 0.00001% of all footers") ---- */
footer{background:var(--ameris-navy);color:#fff;margin-top:64px;padding:52px 0 0}
.sf-grid{display:grid;grid-template-columns:1.2fr 1.1fr .9fr;gap:40px;padding-bottom:40px}
@media(max-width:900px){.sf-grid{grid-template-columns:1fr;gap:28px}}
.sf-lock .sf-t{font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:24px;letter-spacing:.01em;display:block;line-height:1}
.sf-lock .sf-s{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#F4A6A9;display:block;margin-top:5px}
.sf-tag{margin-top:14px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:300px}
.sf-h{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#F4A6A9;margin-bottom:12px}
.sf-copy{font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.6)}
.sf-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
.sf-links.sf-stack{flex-direction:column;gap:8px;margin-top:0}
.sf-links a{color:rgba(255,255,255,.85);font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;width:fit-content}
.sf-links a:hover{color:#fff;border-bottom-color:var(--ameris-red)}
.sf-marks{display:flex;gap:18px;align-items:center;margin-top:20px;flex-wrap:wrap}
.sf-mark{display:inline-flex;gap:7px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.75)}
.sf-mark svg{width:15px;height:15px;fill:rgba(255,255,255,.75)}
.sf-fdic{font-family:var(--font-display);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:12px}
.sf-rule{display:flex;height:3px}
.sf-rule i{display:block;height:100%;width:64px;background:var(--ameris-red)}
.sf-rule::after{content:"";flex:1;background:rgba(255,255,255,.14)}
.sf-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:22px;padding-right:230px;font-size:11.5px;color:rgba(255,255,255,.5)}
@media(max-width:767px){.sf-base{padding-right:20px;padding-bottom:76px}}
.sf-fine{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em}