:root {
  --navy: #12294E;
  --navy-dark: #0C1D36;
  --navy-light: #2A3F66;
  --orange: #E07B26;
  --orange-dark: #B8621B;
  --orange-light: #e8f0f7;
  --gray-50: #f7f8fa;
  --gray-100: #eef1f5;
  --gray-200: #dde3ea;
  --gray-400: #97a2b0;
  --gray-600: #5b6675;
  --gray-800: #2b3340;
  --white: #ffffff;
  --danger: #b3261e;
  --success: #1e7a3a;
  --warning: #9a6a00;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 43, 92, 0.08), 0 1px 2px rgba(0, 43, 92, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 43, 92, 0.10);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gray-50);
  color: var(--gray-800);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange-dark); }

img, svg { max-width: 100%; }

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.site-header {
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Secondary case nav — case tabs below the primary header (E2E 2026-10-09). */
.header-subnav {
  background: #f4f6f9;
  border-bottom: 1px solid #e2e6ec;
  padding: 8px 20px;
  display: flex;
  gap: 4px;
}
.header-subnav a {
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--navy);
  font-size: 0.9rem;
}
.header-subnav a.active {
  background: var(--navy);
  color: white;
}
.header-subnav a:hover:not(.active) {
  background: #e8ecf1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.2px;
  text-decoration: none;
  color: var(--white);
}

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--white);
  flex-shrink: 0;
}

/* The dQ Rings (DisburseIQ logo of record, adopted 2026-10-18) in platform
   chrome. Tenant brand slots keep the letter tile above; only product
   fallback and platform slots carry this mark. Variant rule from the
   production sheet: the full mark at rendered widths of 33px and up, the
   simplified small variant at 32px and below (the phone header swaps to
   the small variant through its <picture> source and renders at 30px). */
.brand picture { display: flex; flex: none; }
img.brand-mark { display: block; flex: none; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.header-nav a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.header-nav a:hover { color: var(--white); }
.header-nav a.active { color: var(--white); font-weight: 700; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }

.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.row-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-left: 8px;
  vertical-align: middle;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.role-badge {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover:not(:disabled) { background: var(--orange-dark); }

.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--gray-200); }
.btn-secondary:hover:not(:disabled) { background: var(--gray-100); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.1); }

/* .btn-ghost is white-on-transparent, meant for dark surfaces (like the header) --
   invisible on a plain white card, which is what made the User Management
   Deactivate button look like empty clickable space. This is the light-surface
   equivalent for a button that should still read as a caution/destructive action. */
.btn-outline-danger { background: var(--white); color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover:not(:disabled) { background: #fbeceb; }

.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 0.85rem; }

/* Layout containers */
.page-main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.narrow { max-width: 460px; }

.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.card + .card { margin-top: 18px; }

h1, h2, h3, h4 { color: var(--navy); margin: 0 0 8px; line-height: 1.25; }
h1, h2, h3 {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { line-height: 1.55; margin: 0 0 12px; color: var(--gray-800); }
.muted { color: var(--gray-600); }
.small { font-size: 0.85rem; }

/* Auth page */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 220px, var(--gray-50) 220px);
}

.auth-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-anchored, not centered: the auth card overlaps the band's lower
     area, and a centered brand stack slid behind the card's top edge
     whenever the card was tall (short viewports, phone and desktop).
     Anchored to the top, the whole stack ends above the card's minimum
     top edge (24px wrap padding + 100px card margin) at every height. */
  justify-content: flex-start;
  gap: 6px;
  padding: 14px 20px 20px;
  text-align: center;
  pointer-events: none;
}
.auth-band .mark-auth {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
}
.auth-band-name {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.auth-band-tag {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
}
.auth-wrap { position: relative; }

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 32px 28px;
  margin-top: 100px;
  position: relative;
  z-index: 1;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}

.tab-switch {
  display: flex;
  background: var(--gray-100);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 20px;
}
.tab-switch button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gray-600);
  cursor: pointer;
}
.tab-switch button.active {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow);
}

/* Signup subdomain row: the input must be allowed to shrink (flex items
   default to min-width:auto, which squeezed it against the nowrap domain
   suffix at phone width). */
.subdomain-row { display: flex; align-items: center; gap: 6px; }
.subdomain-row input { flex: 1 1 auto; min-width: 0; }
.subdomain-suffix { white-space: nowrap; }
@media (max-width: 600px) {
  .subdomain-suffix { font-size: 0.8rem; }
  /* Phone: the suffix takes its own line under the field, so the input
     itself gets the full card width instead of sharing a row with a
     27-character domain suffix. */
  .subdomain-row { flex-wrap: wrap; row-gap: 2px; }
  .subdomain-suffix { flex-basis: 100%; }
}

/* Forms */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 6px;
}
.field .hint { font-size: 0.78rem; color: var(--gray-600); margin-top: 4px; }
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--gray-800);
  background: var(--white);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 43, 92, 0.12);
}
textarea { min-height: 110px; resize: vertical; }
.error-text { color: var(--danger); font-size: 0.85rem; margin-top: 10px; }
.req { color: var(--danger); font-weight: 700; }
.success-text { color: var(--success); font-size: 0.85rem; margin-top: 10px; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 12px;
}
.checkbox-row input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.checkbox-row label { font-size: 0.88rem; color: var(--gray-800); font-weight: 400; margin: 0; }

.banner {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.banner-error { background: #fbeceb; color: var(--danger); border: 1px solid #f2c9c6; }
.banner-success { background: #e9f6ed; color: var(--success); border: 1px solid #bfe3c9; }
.banner-info { background: var(--orange-light); color: var(--navy); border: 1px solid #cddaea; }

/* Grid / stat cards */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.stat-card .stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-600);
  font-weight: 600;
}
.stat-card .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 6px;
}
.stat-card .stat-sub { font-size: 0.8rem; color: var(--gray-600); margin-top: 4px; }

.nav-link-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.nav-link-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.nav-link-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nav-link-card h3 { color: var(--navy); margin-bottom: 4px; }
.nav-link-card p { margin: 0; color: var(--gray-600); font-size: 0.88rem; }

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.status-received { background: #eef1f5; color: var(--gray-600); }
.status-under_review { background: #fdf3e0; color: var(--warning); }
.status-approved { background: #e9f6ed; color: var(--success); }
.status-declined { background: #fbeceb; color: var(--danger); }
.status-funded { background: var(--orange-light); color: var(--navy); }
.status-withdrawn { background: #eceff3; color: var(--gray-600); }

/* Table */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.9rem;
}
th { color: var(--gray-600); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; }

/* Apply form stepper */
.stepper {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.step-dot {
  flex: 1;
  min-width: 40px;
  text-align: center;
}
.step-dot .circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 auto 6px;
}
.step-dot.active .circle { background: var(--navy); color: var(--white); }
.step-dot.done .circle { background: var(--success); color: var(--white); }
.step-dot .label { font-size: 0.7rem; color: var(--gray-600); }
.step-dot.active .label { color: var(--navy); font-weight: 600; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

.step-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 10px;
}

.review-section {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}
.review-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.review-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.review-row .k { color: var(--gray-600); }
.review-row .v { color: var(--gray-800); font-weight: 500; text-align: right; }

.file-drop {
  border: 2px dashed var(--gray-200);
  border-radius: 10px;
  padding: 26px;
  text-align: center;
  background: var(--gray-50);
}
.file-drop.has-file { border-color: var(--success); background: #f2faf4; }

.footer-note {
  text-align: center;
  color: var(--gray-600);
  font-size: 0.8rem;
  padding: 20px;
}

.center-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60vh;
  color: var(--gray-600);
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Case detail: notes + decision panel */
.case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-600);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.back-link:hover { color: var(--navy); }

.note-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.note-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 12px;
}
.note-item .note-meta { font-size: 0.75rem; color: var(--gray-600); margin-bottom: 4px; }
.note-item .note-body { font-size: 0.9rem; white-space: pre-wrap; }
.empty-note { color: var(--gray-600); font-size: 0.88rem; }

.decision-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover:not(:disabled) { background: #8f1f19; }
.btn-success { background: var(--success); color: var(--white); }
.btn-success:hover:not(:disabled) { background: #155e2c; }

.decision-summary { display: flex; flex-direction: column; gap: 4px; }

/* Funding agreement */
.agreement-doc {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 20px;
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--gray-800);
  max-height: 480px;
  overflow-y: auto;
}
.signature-block {
  border: 2px dashed var(--gray-200);
  border-radius: 10px;
  padding: 18px;
  margin-top: 18px;
  background: var(--gray-50);
}

[hidden] { display: none !important; }

/* ===== Public landing page ===== */

.btn-lg { padding: 14px 28px; font-size: 1.02rem; }

.landing { min-height: 100vh; background: var(--white); }

.landing-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand-dark { color: var(--navy); }
.brand-light { color: var(--white); }

.landing-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.landing-nav a {
  color: var(--gray-600);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.landing-nav a:hover { color: var(--navy); }

.landing-header-actions { display: flex; align-items: center; gap: 10px; }

/* Phone menu toggle: rendered only at ≤600px (see the breakpoint below),
   where the section nav is otherwise hidden with no replacement. */
.nav-toggle { display: none; }

.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
  padding: 64px 24px;
  text-align: center;
}
.hero-inner { max-width: 760px; margin: 0 auto; }
.hero h1 {
  color: var(--white);
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 18px;
}
.hero h1 span { color: #ffb27a; }
.hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  max-width: 620px;
  margin: 0 auto 28px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-note {
  margin: 20px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.demo-disclosure {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 24px;
}
.demo-disclosure p {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.92rem;
  color: var(--gray-600);
}
.demo-disclosure a {
  color: var(--navy);
  font-weight: 600;
}

.trust-bar {
  background: var(--orange-light);
  border-bottom: 1px solid var(--gray-200);
  padding: 22px 24px;
}
.trust-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}
.trust-item { display: flex; flex-direction: column; gap: 4px; }
.trust-item strong { color: var(--navy); font-size: 0.95rem; }
.trust-item span { color: var(--gray-600); font-size: 0.82rem; }

.landing-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px;
}
.landing-section.alt {
  max-width: none;
  background: var(--gray-50);
}
.landing-section.alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.section-title { text-align: center; font-size: 1.6rem; }
.section-sub {
  text-align: center;
  color: var(--gray-600);
  max-width: 560px;
  margin: 0 auto 36px;
}
.section-footnote {
  text-align: center;
  color: var(--gray-600);
  font-size: 0.88rem;
  margin: 28px auto 0;
  max-width: 560px;
}

/* Product visuals (funder visual pass): real demo-tenant captures in a
   framed figure with the standing demo-data caption. */
.product-figure { margin: 28px auto 0; max-width: 1048px; }
.product-figure .frame {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--white);
}
.product-figure img { display: block; width: 100%; height: auto; }
.product-figure figcaption {
  text-align: center;
  color: var(--gray-600);
  font-size: 0.82rem;
  margin-top: 10px;
}
.product-figure.on-dark figcaption { color: rgba(255, 255, 255, 0.75); }
.demo-path-line {
  text-align: center;
  margin: 14px auto 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}
.demo-path-line a { color: var(--white); text-decoration: underline; }
.feature-block { margin-top: 56px; }
.feature-claim { text-align: center; font-size: 1.3rem; color: var(--navy); margin: 0 0 6px; }
.feature-line { text-align: center; color: var(--gray-600); max-width: 640px; margin: 0 auto; }
.cross-sell-figure { max-width: 460px; margin-top: 12px; }
.cross-sell-figure a { display: block; }

/* The Ledger (for-funders character treatment, Direction 1): sections are
   numbered docket entries separated by rules, claims carry their numbers,
   and the company signs the page as filing authority in the colophon. */
.eyebrow.docket { color: #B8621B; }
.eyebrow.docket.on-dark { color: #FFB27A; }
.section-title.ledger-title { text-align: left; }
.section-sub.ledger-sub { text-align: left; margin-left: 0; margin-right: 0; max-width: 640px; }

.ledger-row {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  margin-top: 28px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
}
.ledger-fact strong { display: block; color: #fff; font-size: 1.45rem; line-height: 1.1; }
.ledger-fact span { color: rgba(255, 255, 255, 0.8); font-size: 0.92rem; }

.ledger-entries { border-top: 2px solid var(--navy); margin-top: 8px; }
.ledger-entry {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 14px 2px;
  border-bottom: 1px solid #E3DDD2;
}
.ledger-sec { color: #B8621B; font-weight: 700; width: 44px; flex: none; }
.ledger-entry h3 { width: 210px; flex: none; margin: 0; color: var(--navy); font-size: 1.02rem; }
.ledger-entry p { margin: 0; }

.feature-block.ledger-block { border-top: 1px solid #E3DDD2; padding-top: 30px; }
.feature-block.ledger-block .feature-claim { text-align: left; }
.feature-block.ledger-block .feature-line { text-align: left; margin: 0; }
.ledger-sec-inline { color: #B8621B; font-weight: 700; margin-right: 14px; }

.landing-section.peak {
  max-width: none;
  background: var(--navy);
  color: #fff;
  padding-top: 72px;
  padding-bottom: 72px;
}
.landing-section.peak > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

.pricing-ledger { border-top: 2px solid var(--navy); margin-top: 8px; }
.price-row {
  display: grid;
  grid-template-columns: 160px 180px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 2px;
  border-bottom: 1px solid #E3DDD2;
}
.price-row h3 { margin: 0; color: var(--navy); font-size: 1.15rem; }
.price-main { font-size: 1.6rem; font-weight: 700; color: var(--navy); margin: 0; }
.price-main span { font-size: 1rem; font-weight: 500; }
.price-main.price-custom { font-size: 1.25rem; }
.price-alt { margin: 2px 0 0; }
.price-desc { margin: 0; }

.colophon {
  text-align: center;
  padding: 26px 24px;
  border-top: 1px solid #E3DDD2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--gray-600);
}
.colophon strong { color: var(--navy); }

@media (max-width: 900px) {
  .ledger-row { grid-template-columns: repeat(2, 1fr); }
  .price-row { grid-template-columns: 140px 160px 1fr; }
  .price-row .btn { grid-column: 3; justify-self: start; }
}
@media (max-width: 600px) {
  .ledger-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ledger-entry { flex-wrap: wrap; gap: 4px 14px; }
  .ledger-entry h3 { width: auto; flex: 1; }
  .ledger-entry p { flex-basis: 100%; }
  .price-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 2px; }
  .price-row .btn { grid-column: auto; }
  .landing-section.peak { padding-top: 52px; padding-bottom: 52px; }
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Three-card rows: a 3-item row in the 4-column grid leaves the fourth
   column empty and shifts the row's visual mass left of center. The
   media queries below still collapse this variant (equal specificity,
   later in the file). */
.steps-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.step-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.step-card p { font-size: 0.9rem; margin-bottom: 0; }

.qualify-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.qualify-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
  text-align: center;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.why-item h3 { margin-bottom: 6px; }
.why-item p { font-size: 0.92rem; margin-bottom: 0; }

.attorney-block {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.attorney-block p { margin-bottom: 0; max-width: 560px; }

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 18px 20px;
}
.faq-item h3 { margin-bottom: 6px; font-size: 1rem; }
.faq-item p { font-size: 0.9rem; margin-bottom: 0; color: var(--gray-600); }

.cta-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 56px 24px;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; }

.landing-footer {
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: 40px 24px;
}
.landing-footer-inner { max-width: 1080px; margin: 0 auto; }
.footer-nav { display: flex; gap: 20px; margin: 16px 0 4px; flex-wrap: wrap; }
.footer-nav a { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { font-size: 0.8rem; margin: 16px 0; max-width: 760px; color: rgba(255, 255, 255, 0.92); }
.footer-copy { font-size: 0.8rem; margin: 0; }
.footer-powered { font-size: 0.85rem; margin: 10px 0 0; color: rgba(255,255,255,0.92); display: flex; align-items: center; gap: 8px; }
.footer-powered .mark-sm { width: 22px; height: 22px; font-size: 0.75rem; border-radius: 6px; background: var(--orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
/* Footer brand row: self-contained (the tile styling previously existed
   only as .brand .mark, so a footer not wrapped in .brand rendered its
   mark unstyled — a dim letter on the navy footer). Mirrors the header
   brand metrics so every tenant footer renders the same tile. */
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.2px; color: var(--white); }
.footer-brand .mark { width: 34px; height: 34px; border-radius: 8px; background: var(--orange); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; color: var(--white); flex-shrink: 0; }
.hero-signin { margin-top: 16px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.75); }
.hero-signin a { color: #ffb27a; text-decoration: underline; }

/* Contact band (public landing page) */
.contact-band {
  background: var(--gray-50, #f7f8fa);
  text-align: center;
  padding: 56px 24px;
}
.contact-band h2 { margin-bottom: 8px; }
.contact-lines { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 16px 0; font-weight: 600; }
.contact-band .small { font-size: 0.85rem; color: var(--gray-600, #5b6675); max-width: 720px; margin: 0 auto; }

/* Legal document pages (Terms, Privacy) */
.legal-doc {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.legal-doc h1 { margin-bottom: 8px; }
.legal-updated { color: var(--gray-600, #5b6675); font-size: 0.85rem; margin-bottom: 24px; }
.legal-doc h2 { margin-top: 32px; font-size: 1.15rem; }
.legal-doc p, .legal-doc li { line-height: 1.65; }
.legal-doc ul { padding-left: 24px; }
.legal-doc ul li { margin-bottom: 6px; }

/* Auth page footer */
.auth-footer {
  text-align: center;
  padding: 24px;
  font-size: 0.85rem;
  color: var(--gray-600, #5b6675);
}
.auth-footer a { color: inherit; text-decoration: none; margin: 0 6px; }
.auth-footer a:hover { text-decoration: underline; }


/* Funding timeline — signature component for How It Works */
.funding-timeline {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
  padding-left: 48px;
}
.funding-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  border-radius: 2px;
}
.tl-item {
  position: relative;
  margin-bottom: 28px;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-marker {
  position: absolute;
  left: -48px;
  top: 0;
  width: 32px;
  height: 32px;
}
.tl-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.tl-card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--navy);
}
.tl-card p {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .funding-timeline { padding-left: 40px; }
  .funding-timeline::before { left: 11px; }
  .tl-marker { left: -40px; }
}


/* Status color language — backgrounds for pipeline viz */
.status-bg-received { background: var(--gray-200); }
.status-bg-under_review { background: #f5c542; }
.status-bg-approved { background: var(--success); }
.status-bg-funded { background: var(--orange); }
.status-bg-declined { background: var(--danger); }
.status-bg-withdrawn { background: var(--gray-400); }

/* Funding pipeline visualization */
.pipeline-bar {
  display: flex;
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gray-100);
  margin-top: 12px;
}
.pipe-seg { height: 100%; min-width: 2px; transition: width 0.3s ease; }
.pipeline-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--gray-600);
  flex-wrap: wrap;
}
.pipeline-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}


/* Jurisdiction compliance tracking */
.juris-notice {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.juris-notice.juris-restricted { border-color: #f5c542; background: #fef9e7; }
.juris-notice.juris-banned { border-color: var(--danger); background: #fbeceb; }
.juris-notice.juris-pending { border-color: var(--gray-300); background: var(--gray-100); }
.juris-notice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.juris-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
}
.juris-badge.juris-open { background: #e9f6ed; color: var(--success); }
.juris-badge.juris-restricted { background: #fdf3e0; color: var(--warning); }
.juris-badge.juris-banned { background: #fbeceb; color: var(--danger); }
.juris-badge.juris-pending { background: var(--gray-200); color: var(--gray-600); }
.juris-state { font-weight: 700; color: var(--navy); }
.juris-notice p { margin: 8px 0; font-size: 0.9rem; }
.juris-rules { margin: 8px 0; padding-left: 20px; font-size: 0.88rem; }
.juris-rules li { margin-bottom: 6px; }
.juris-disclaimer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gray-200); }
.juris-flag {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.juris-flag.juris-restricted { background: #fdf3e0; color: var(--warning); }
.juris-flag.juris-banned { background: #fbeceb; color: var(--danger); }
.juris-flag.juris-pending { background: var(--gray-200); color: var(--gray-600); }
.juris-admin-row {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.juris-admin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.juris-stale {
  font-size: 0.8rem;
  color: var(--warning);
  font-weight: 700;
}
.juris-toggle {
  margin-left: auto;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.juris-rules-list { margin-top: 10px; }
.juris-rule-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--gray-100);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.juris-rule-item .btn { margin-left: auto; }

@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .qualify-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .landing-nav { display: none; }
  /* Phone menu: the toggle appears and the nav becomes a dropdown panel
     under the sticky header while open. Desktop layout is untouched. */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 8px 9px;
    margin-left: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--navy); }
  .landing-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    padding: 10px 16px 14px;
    z-index: 30;
  }
  .landing-nav.open a { padding: 10px 6px; font-size: 1rem; border-radius: 6px; }
  .landing-header { padding: 10px 16px; gap: 10px; }
  .landing-header .brand { font-size: 1.15rem; }
  .landing-header .brand .mark { width: 32px; height: 32px; font-size: 1rem; }
  .landing-header .brand img.brand-mark { width: 30px; height: 30px; }
  /* Mobile: keep both CTAs visible but compact */
  .landing-header-actions { gap: 8px; }
  .landing-header-actions .btn { padding: 8px 16px; font-size: 0.9rem; }
  .hero h1 { font-size: 1.7rem; }
  .steps-grid { grid-template-columns: 1fr; }
  .qualify-grid { grid-template-columns: 1fr; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .attorney-block { flex-direction: column; align-items: flex-start; }
}

/* Honeypot field: invisible to real visitors, left unset. Automated form
   fillers that populate every input tend to fill it anyway, which is how
   we tell them apart from a person. Kept off-screen (not display:none) so
   it still occupies a real, fillable input in the DOM. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}