/* ShipOverpay design tokens — single source of truth for colors.
   Green is strictly reserved for recovered/recoverable money. */
:root {
  --sop-bg: #F7F9FC;
  --sop-card: #FFFFFF;
  --sop-text: #0F172A;
  --sop-text-secondary: #475569;
  --sop-text-muted: #64748B;
  --sop-accent: #1D4ED8;
  --sop-accent-soft: #EFF6FF;
  --sop-accent-border: #BFDBFE;
  --sop-money: #16A34A;
  --sop-money-deep: #15803D;
  --sop-money-soft: #F0FDF4;
  --sop-warning: #F59E0B;
  --sop-warning-deep: #B45309;
  --sop-warning-soft: #FFFBEB;
  --sop-danger: #DC2626;
  --sop-danger-soft: #FEF2F2;
  --sop-border: #E2E8F0;
  --sop-radius: 8px;
  --sop-radius-lg: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sop-bg);
  color: var(--sop-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--sop-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout rule (approved): full-width backgrounds, inner content capped.
   Marketing 1280px · hero text 760px · scanner 640px · app dashboard 1440px. */
.topbar {
  background: var(--sop-card);
  border-bottom: 1px solid var(--sop-border);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 600; font-size: 16px; color: var(--sop-text); }
.brand span { color: var(--sop-accent); }

.container { max-width: 1280px; margin: 0 auto; padding: 32px; }
.container-app { max-width: 1440px; }
.container-narrow { max-width: 420px; margin: 48px auto; padding: 0 20px; }

.card {
  background: var(--sop-card);
  border: 1px solid var(--sop-border);
  border-radius: var(--sop-radius-lg);
  padding: 28px;
}

h1 { font-size: 24px; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }

label { display: block; font-size: 13px; font-weight: 500; margin: 14px 0 4px; color: var(--sop-text); }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--sop-border);
  border-radius: var(--sop-radius);
  font-size: 14px;
  background: var(--sop-card);
  color: var(--sop-text);
}
input:focus { outline: 2px solid var(--sop-accent-border); border-color: var(--sop-accent); }

/* Multi-field forms outside the auth column (Founding 100 application). */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.field { min-width: 0; }
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sop-border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: var(--sop-card);
  color: var(--sop-text);
}
select.input:focus, textarea.input:focus {
  outline: 2px solid var(--sop-accent-border); border-color: var(--sop-accent);
}
textarea.input { resize: vertical; line-height: 1.5; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }

.btn {
  display: inline-block;
  border: none;
  border-radius: var(--sop-radius);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary { background: var(--sop-accent); color: #FFFFFF; }
.btn-primary:hover { background: #1E40AF; }
.btn-secondary { background: var(--sop-card); color: var(--sop-text); border: 1px solid var(--sop-border); }
.btn-block { width: 100%; margin-top: 18px; }

.flash { border-radius: var(--sop-radius); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.flash-success { background: var(--sop-accent-soft); color: var(--sop-accent); }
.flash-error { background: var(--sop-danger-soft); color: var(--sop-danger); }

.field-error { color: var(--sop-danger); font-size: 12px; margin-top: 3px; }
.muted { color: var(--sop-text-muted); font-size: 13px; }
.banner {
  background: var(--sop-warning-soft);
  color: var(--sop-warning-deep);
  border-radius: var(--sop-radius);
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 14px;
}

/* ===== Design system components (docs/DESIGN_SYSTEM.md) ===== */

:root {
  --sop-accent-hover: #1E40AF;
  --sop-money-border: #BBF7D0;
  --sop-border-strong: #CBD5E1;
}

.money { font-variant-numeric: tabular-nums; }

.btn-recover { background: var(--sop-money-deep); color: #FFFFFF; }
.btn-recover:hover { background: #166534; }
.btn-ghost { background: transparent; color: var(--sop-accent); border: none; }
.btn-danger-outline { background: #FFFFFF; color: var(--sop-danger); border: 1px solid var(--sop-danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled, .btn.is-loading { opacity: .55; pointer-events: none; }

/* Alerts */
.alert { border-radius: var(--sop-radius); padding: 12px 16px; font-size: 14px; margin: 12px 0; }
.alert-info { background: var(--sop-accent-soft); color: var(--sop-accent); }
.alert-success { background: var(--sop-money-soft); color: var(--sop-money-deep); }
.alert-warning { background: var(--sop-warning-soft); color: var(--sop-warning-deep); }
.alert-error { background: var(--sop-danger-soft); color: var(--sop-danger); }
.alert a { color: inherit; text-decoration: underline; }

/* Badges */
.badge { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 999px; }
.badge-neutral { background: #F1F5F9; color: #475569; }
.badge-review { background: var(--sop-warning-soft); color: var(--sop-warning-deep); }
.badge-recoverable { background: var(--sop-accent-soft); color: var(--sop-accent); }
.badge-recovered { background: var(--sop-money-soft); color: var(--sop-money-deep); }
.badge-error { background: var(--sop-danger-soft); color: var(--sop-danger); }

/* Dropzone */
.dropzone { background: var(--sop-card); border: 2px dashed var(--sop-accent-border);
  border-radius: var(--sop-radius-lg); padding: 36px 24px; text-align: center;
  transition: border-color .12s ease, background .12s ease; }
.dropzone.is-dragover { border-color: var(--sop-accent); border-style: solid; background: var(--sop-accent-soft); }
.dropzone .dz-icon { font-size: 28px; color: var(--sop-accent); line-height: 1; }
.dropzone .dz-title { font-size: 15px; font-weight: 500; margin-top: 10px; }
.dropzone .dz-caption { font-size: 12px; color: var(--sop-text-muted); margin-top: 4px; }
.dropzone .dz-action { margin-top: 16px; }
.dropzone input[type="file"] { display: none; }

.progress { height: 6px; background: #EEF2F7; border-radius: 999px; overflow: hidden; margin-top: 18px; }
.progress-bar { height: 100%; width: 0; background: var(--sop-accent); border-radius: 999px;
  transition: width .15s ease; }
.progress-bar.indeterminate { width: 30%; animation: sop-indet 1.1s ease-in-out infinite; }
@keyframes sop-indet { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* Tables */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--sop-text-muted);
  padding: 8px 16px; border-bottom: 1px solid var(--sop-border); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--sop-border); }
.table tbody tr:hover { background: #FAFBFD; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .meta { font-size: 13px; color: var(--sop-text-muted); }

/* Empty state */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-state .es-icon { font-size: 24px; color: var(--sop-text-muted); }
.empty-state h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
.empty-state p { font-size: 14px; color: var(--sop-text-secondary); margin: 0 0 18px; }

/* Skeleton loading */
.skeleton { border-radius: 6px; background: #EEF2F7; animation: sop-pulse 1.2s ease-in-out infinite; }
@keyframes sop-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #FFFFFF; border-radius: var(--sop-radius-lg); max-width: 480px;
  width: calc(100% - 40px); padding: 28px; box-shadow: 0 10px 40px rgba(15, 23, 42, .18); }
.modal h2 { margin-top: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
[hidden] { display: none !important; }

/* ============================================================
   Landing page v2 — bold scale for the US B2B market.
   Containers stay capped (1280px); component scale grows so large
   screens read as deliberate, not empty.
   ============================================================ */

.lp { --lp-max: 1280px; }
.lp-container { max-width: var(--lp-max); margin: 0 auto; padding: 0 32px; }

/* Header */
.lp-header { background: var(--sop-card); border-bottom: 1px solid var(--sop-border);
  position: sticky; top: 0; z-index: 20; }
.lp-header-inner { max-width: var(--lp-max); margin: 0 auto; padding: 0 32px; height: 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; }
/* Brand. The wordmark is served at 494x96 (3x) and displayed at 34px tall, so it
   stays sharp on retina without shipping the 2389px original. Below 560px the
   header has no room for it and the box mark alone is used. */
.lp-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.lp-brand img { height: 34px; width: auto; display: block; }
.lp-brand-sm img { height: 28px; }
.lp-brand:hover { text-decoration: none; }
/* The full wordmark stays at every width: the brand is not established enough
   for an icon-only mark to be recognised. Room is made elsewhere instead —
   the sign-in link becomes an icon below 560px. */
.signin-icon { display: none; }
.lp-nav a.lp-signin { display: flex; align-items: center; }
@media (max-width: 560px) {
  .lp-brand img { height: 26px; }
  .signin-text { display: none; }
  .signin-icon { display: block; width: 22px; height: 22px; }
  .lp-nav a.lp-signin { padding: 8px; margin-right: -2px; color: var(--sop-text); }
  .lp-nav .btn-md { padding: 9px 12px; font-size: 13px; }
}

/* Back to top — the landing page and long tables are a long way back up. */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sop-border);
  background: var(--sop-card); color: var(--sop-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--sop-border-strong); color: var(--sop-accent); }
.to-top:focus-visible { outline: 2px solid var(--sop-accent-border); outline-offset: 2px; }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}
.lp-nav { display: flex; align-items: center; gap: 28px; }
.lp-nav a, .lp-nav-label { font-size: 15px; color: var(--sop-text-secondary);
  text-decoration: none; font-weight: 500; }
.lp-nav a:hover { color: var(--sop-text); text-decoration: none; }
.lp-nav .lp-signin { color: var(--sop-text); }
.lp-nav a.btn-primary { color: #FFFFFF; }
.lp-nav a.btn-primary:hover { color: #FFFFFF; }

/* Buttons at landing scale */
.btn-lg { font-size: 17px; font-weight: 600; padding: 17px 34px; border-radius: 10px; }
.btn-md { font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: 9px; }

/* Hero */
.lp-hero { background: var(--sop-card); border-bottom: 1px solid var(--sop-border);
  padding: 96px 0 88px; text-align: center; }
.lp-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sop-accent); margin: 0 0 22px; }
.lp-h1 { font-size: 72px; line-height: 1.04; font-weight: 700; letter-spacing: -2px;
  color: var(--sop-text); margin: 0 auto; max-width: 980px; }
.lp-sub { font-size: 23px; line-height: 1.5; color: var(--sop-text-secondary);
  max-width: 820px; margin: 28px auto 0; }
.lp-carriers { font-size: 16px; font-weight: 600; color: var(--sop-text); letter-spacing: 1px;
  margin: 20px 0 0; }

/* Dropzone as hero centerpiece */
.dropzone-hero { max-width: 780px; margin: 44px auto 0; padding: 56px 48px;
  border: 2px dashed #93B4F5; border-radius: 18px;
  box-shadow: 0 6px 28px rgba(15, 23, 42, .08); }
.dropzone-hero .dz-icon { font-size: 0; color: var(--sop-accent); }
.dropzone-hero .dz-icon svg { width: 56px; height: 56px; }
.dropzone-hero .dz-title { font-size: 27px; font-weight: 600; margin-top: 20px; letter-spacing: -0.4px; }
.dropzone-hero .dz-carriers { font-size: 15px; font-weight: 600; color: var(--sop-text-secondary);
  margin-top: 10px; letter-spacing: .6px; }
.dropzone-hero .dz-caption { font-size: 14px; margin-top: 8px; }
.dropzone-hero .dz-action { margin-top: 28px; }
.dropzone-hero .progress { height: 8px; margin-top: 26px; }

.lp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin: 30px 0 0; }
.lp-trust span { font-size: 15px; color: var(--sop-text-secondary); font-weight: 500; }
.lp-trust svg { width: 17px; height: 17px; color: var(--sop-money); vertical-align: -3px;
  margin-right: 7px; }

/* Sections */
.lp-section { padding: 88px 0; }
.lp-section-alt { background: var(--sop-card); border-top: 1px solid var(--sop-border);
  border-bottom: 1px solid var(--sop-border); }
.lp-h2 { font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -1.1px;
  color: var(--sop-text); margin: 0 0 18px; text-align: center; }
.lp-lead { font-size: 19px; line-height: 1.6; color: var(--sop-text-secondary); max-width: 760px;
  margin: 0 auto 52px; text-align: center; }
.lp-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px; }

.lp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; }
.lp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 32px; }

.lp-card { background: var(--sop-card); border: 1px solid var(--sop-border); border-radius: 14px;
  padding: 32px 28px; }
.lp-section-alt .lp-card { background: var(--sop-bg); }
.lp-card-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--sop-accent-soft);
  color: var(--sop-accent); display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; }
.lp-card-icon svg { width: 25px; height: 25px; }
.lp-card h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.3px; }
.lp-card p { font-size: 16px; line-height: 1.6; color: var(--sop-text-secondary); margin: 0; }

/* How it works */
.lp-step-num { font-size: 15px; font-weight: 700; color: var(--sop-accent); letter-spacing: 1.4px;
  margin-bottom: 14px; }
.lp-step h3 { font-size: 25px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.4px; }
.lp-step p { font-size: 17px; line-height: 1.6; color: var(--sop-text-secondary); margin: 0; }
.lp-step-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--sop-accent-soft);
  color: var(--sop-accent); display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; }
.lp-step-icon svg { width: 30px; height: 30px; }

/* Checked-items grid */
.lp-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.lp-check { background: var(--sop-card); border: 1px solid var(--sop-border); border-radius: 12px;
  padding: 20px 22px; font-size: 17px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.lp-section-alt .lp-check { background: var(--sop-bg); }
.lp-check svg { width: 20px; height: 20px; color: var(--sop-accent); flex-shrink: 0; }
/* Vertical qualification lists (Founding 100): one row per point, icon aligned
   with the first line of text whatever the wrap. */
.lp-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.lp-list li { display: flex; gap: 12px; align-items: flex-start; margin-top: 15px;
  font-size: 16px; line-height: 1.55; color: var(--sop-text-secondary); }
.lp-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.lp-list .yes { color: var(--sop-money); }
.lp-list .no { color: var(--sop-text-muted); }
/* Inside a card the note belongs to the text above it, not to the page. */
.lp-card .lp-note { text-align: left; margin: 22px 0 0; }

.lp-note { font-size: 15px; color: var(--sop-text-muted); text-align: center; margin: 32px auto 0;
  max-width: 760px; line-height: 1.6; }
.lp-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .lp-security-grid { grid-template-columns: minmax(0, 1fr); } }

/* Illustrative money example */
.lp-example { background: var(--sop-card); border: 1px solid var(--sop-border); border-radius: 18px;
  padding: 44px; max-width: 620px; }
.lp-example-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; background: #F1F5F9; color: #475569; padding: 5px 12px;
  border-radius: 999px; margin-bottom: 26px; }
.lp-example-row { display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--sop-border); }
.lp-example-row:last-child { border-bottom: none; }
.lp-example-row .k { font-size: 16px; color: var(--sop-text-secondary); }
.lp-example-row .v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-example-row .v.money { color: var(--sop-money); }

/* Recovery pipeline */
.lp-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.lp-pipe-step { background: var(--sop-card); border: 1px solid var(--sop-border); border-radius: 999px;
  padding: 11px 20px; font-size: 15px; font-weight: 500; }
.lp-pipe-step.is-fee { background: var(--sop-money-soft); border-color: var(--sop-money-border);
  color: var(--sop-money-deep); }
.lp-pipe-arrow { color: var(--sop-text-muted); font-size: 18px; }

/* Pricing preview */
.lp-price { background: var(--sop-card); border: 1px solid var(--sop-border); border-radius: 16px;
  padding: 36px 32px; text-align: center; }
.lp-price.is-featured { border: 2px solid var(--sop-accent); }
.lp-price .amount-note { font-size: 15px; color: var(--sop-text-muted); margin: 0 0 18px; }
.lp-price .lp-list { margin-bottom: 22px; }
.lp-price .btn { width: 100%; text-align: center; }
.lp-price h3 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.lp-price .amount { font-size: 42px; font-weight: 700; letter-spacing: -1px; margin-bottom: 12px;
  font-variant-numeric: tabular-nums; }
.lp-price p { font-size: 16px; color: var(--sop-text-secondary); margin: 0; line-height: 1.6; }

/* Final CTA */
.lp-final { background: var(--sop-text); color: #FFFFFF; padding: 96px 0; text-align: center; }
.lp-final h2 { font-size: 48px; line-height: 1.15; font-weight: 700; letter-spacing: -1.2px;
  margin: 0 auto 20px; max-width: 900px; color: #FFFFFF; }
.lp-final p { font-size: 20px; color: #CBD5E1; margin: 0 0 36px; }
.lp-final .btn-primary { background: #FFFFFF; color: var(--sop-text); }
.lp-final .btn-primary:hover { background: #E2E8F0; }
.lp-final small { display: block; margin-top: 20px; font-size: 15px; color: #94A3B8; }

/* Footer */
.lp-footer { background: var(--sop-card); border-top: 1px solid var(--sop-border); padding: 64px 0 40px; }
/* minmax(0, …) everywhere: a bare 1fr track is min-content wide, and long
   labels then push the grid past the viewport. */
.lp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 40px; }
.lp-footer h4 { font-size: 14px; font-weight: 600; margin: 0 0 18px; color: var(--sop-text); }
.lp-footer ul { list-style: none; margin: 0; padding: 0; }
.lp-footer li { margin-bottom: 12px; }
.lp-footer a, .lp-footer li { font-size: 15px; color: var(--sop-text-secondary); text-decoration: none; }
.lp-footer a:hover { color: var(--sop-accent); }
.lp-footer-bottom { border-top: 1px solid var(--sop-border); margin-top: 48px; padding-top: 28px;
  font-size: 14px; color: var(--sop-text-muted); }

@media (max-width: 1100px) {
  .lp-h1 { font-size: 58px; letter-spacing: -1.4px; }
  .lp-sub { font-size: 21px; }
  .lp-h2 { font-size: 38px; }
  .lp-hero { padding: 76px 0 68px; }
  .lp-section { padding: 72px 0; }
  .lp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lp-container, .lp-header-inner { padding: 0 18px; }
  /* The header row cannot wrap, so its min-content width sets the page's
     minimum width — keep brand, sign-in and CTA small enough to fit 375px. */
  .lp-header-inner { height: 64px; gap: 10px; }
  .lp-brand { font-size: 17px; gap: 7px; }
  .lp-brand svg { width: 21px; height: 21px; }
  .lp-nav { gap: 12px; }
  .lp-nav a:not(.lp-signin):not(.btn) { display: none; }
  .lp-nav a { font-size: 14px; }
  .lp-nav .btn-md { padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .lp-hero { padding: 52px 0 48px; }
  .lp-h1 { font-size: 40px; letter-spacing: -0.8px; overflow-wrap: break-word; }
  .lp-eyebrow { font-size: 12px; letter-spacing: 1px; }
  .lp-carriers { font-size: 14px; letter-spacing: .4px; }
  .lp-sub { font-size: 18px; margin-top: 20px; }
  .lp-h2 { font-size: 30px; }
  .lp-lead { font-size: 17px; margin-bottom: 36px; }
  .lp-section, .lp-final { padding: 56px 0; }
  .lp-final h2 { font-size: 32px; }
  .dropzone-hero { padding: 36px 22px; border-radius: 14px; }
  .dropzone-hero .dz-title { font-size: 21px; }
  .dropzone-hero .dz-icon svg { width: 44px; height: 44px; }
  .lp-example { padding: 28px 22px; }
  .lp-example-row .v { font-size: 22px; }
  .lp-trust { gap: 16px 24px; }
  .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .lp-example-row { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 400px) {
  .lp-h1 { font-size: 36px; }
  .lp-brand { font-size: 16px; }
}

/* ============================================================
   Application shell (v2) — same language as the landing page,
   denser. Dashboard content is capped at 1440px.
   ============================================================ */

.app-header { background: var(--sop-card); border-bottom: 1px solid var(--sop-border);
  position: sticky; top: 0; z-index: 20; }
.app-header-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: 68px;
  display: flex; align-items: center; gap: 32px; }
.app-nav { display: flex; align-items: center; gap: 26px; flex: 1; }
.app-nav a { font-size: 15px; font-weight: 500; color: var(--sop-text-secondary);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.app-nav a:hover { color: var(--sop-text); text-decoration: none; }
.app-nav a.is-active { color: var(--sop-accent); border-bottom-color: var(--sop-accent); }
.app-user { display: flex; align-items: center; gap: 14px; font-size: 14px;
  color: var(--sop-text-secondary); }

.app-main { max-width: 1440px; margin: 0 auto; padding: 32px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.page-title { font-size: 32px; font-weight: 700; letter-spacing: -0.8px; margin: 0; }
.page-sub { font-size: 15px; color: var(--sop-text-secondary); margin: 8px 0 0; }
.section-title { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 16px; }

/* Headline metrics */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px; margin-bottom: 32px; }
.metric-card { background: var(--sop-card); border: 1px solid var(--sop-border);
  border-radius: 14px; padding: 24px 26px; }
.metric-card .m-label { font-size: 13px; font-weight: 500; color: var(--sop-text-muted);
  letter-spacing: .2px; }
.metric-card .m-value { font-size: 34px; font-weight: 700; letter-spacing: -1px;
  margin-top: 10px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.metric-card .m-value.is-money { color: var(--sop-money); }
.metric-card .m-value.is-empty { font-size: 19px; font-weight: 500; letter-spacing: 0;
  color: var(--sop-text-secondary); }
.metric-card .m-note { font-size: 12px; color: var(--sop-text-muted); margin-top: 8px;
  line-height: 1.5; }
.metric-card.is-primary { border-color: var(--sop-money-border); background: var(--sop-money-soft); }
.metric-card.is-primary .m-label { color: var(--sop-money-deep); }

/* Panels and tables inside the app */
.panel { background: var(--sop-card); border: 1px solid var(--sop-border);
  border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--sop-border); flex-wrap: wrap; }
.panel-head h2 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }
.panel-body { padding: 24px; }
.panel .table th { padding: 12px 24px; background: #FBFCFE; }
.panel .table td { padding: 15px 24px; font-size: 15px; }

/* Auth — premium split layout, inside the same 1280px frame as the header and
   footer so the three never look offset from one another. */
.auth-wrap { max-width: 1280px; margin: 0 auto; min-height: calc(100vh - 260px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-form-side { display: flex; align-items: center; justify-content: center;
  padding: 56px 32px; }
.auth-form { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: 34px; font-weight: 700; letter-spacing: -1px; margin: 0 0 10px; }
.auth-form .auth-sub { font-size: 16px; color: var(--sop-text-secondary); margin: 0 0 28px; }
.auth-form label { font-size: 14px; margin-top: 18px; }
.auth-form input[type="text"], .auth-form input[type="email"],
.auth-form input[type="password"] { padding: 12px 14px; font-size: 15px; border-radius: 10px; }
.auth-form .btn { width: 100%; margin-top: 26px; padding: 15px 24px; font-size: 16px;
  font-weight: 600; border-radius: 10px; }
.auth-alt { font-size: 15px; color: var(--sop-text-secondary); margin-top: 22px; text-align: center; }
.auth-aside { border-left: 1px solid var(--sop-border);
  padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }

/* Slim footer for the auth pages */
.auth-footer { border-top: 1px solid var(--sop-border); background: var(--sop-card); }
.auth-footer-inner { max-width: 1280px; margin: 0 auto; padding: 24px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; font-size: 14px; color: var(--sop-text-muted); }
.auth-footer-inner nav { display: flex; gap: 22px; flex-wrap: wrap; }
.auth-footer-inner a { color: var(--sop-text-secondary); text-decoration: none; }
.auth-footer-inner a:hover { color: var(--sop-accent); }
.auth-aside h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; margin: 0 0 28px;
  max-width: 420px; line-height: 1.25; }
.auth-points { list-style: none; margin: 0; padding: 0; max-width: 440px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.auth-points svg { width: 20px; height: 20px; color: var(--sop-money); flex-shrink: 0;
  margin-top: 3px; }
.auth-points strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.auth-points span { font-size: 15px; color: var(--sop-text-secondary); line-height: 1.55; }

/* Finding cards (admin + future customer report) */
.finding { border: 1px solid var(--sop-border); border-radius: 12px; padding: 18px 20px;
  margin-bottom: 12px; background: var(--sop-card); }
.finding-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.finding-title { font-size: 16px; font-weight: 600; margin: 8px 0 0; }
.finding-amount { text-align: right; white-space: nowrap; }
.finding-amount .fa-money { color: var(--sop-money); font-weight: 700; font-size: 19px;
  font-variant-numeric: tabular-nums; }
.finding p { font-size: 15px; line-height: 1.6; color: var(--sop-text-secondary); margin: 10px 0 8px; }
.finding pre { font-size: 12px; background: #F8FAFC; padding: 14px; border-radius: 8px;
  overflow-x: auto; margin-top: 10px; border: 1px solid var(--sop-border); }
.finding summary { cursor: pointer; font-size: 13px; color: var(--sop-text-muted); }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filters label { margin: 0 0 6px; font-size: 12px; color: var(--sop-text-muted); }
.filters select, .filters input[type="text"] { padding: 10px 12px; border: 1px solid var(--sop-border);
  border-radius: 9px; font-size: 14px; background: var(--sop-card); color: var(--sop-text); }
.filters .grow { flex: 1; min-width: 220px; }

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-aside { border-left: none; border-top: 1px solid var(--sop-border); padding: 40px 24px; }
}
/* The header row cannot wrap, so its content sets the page's minimum width.
   Below ~1100px the signed-in email is the first thing to go. */
@media (max-width: 1100px) {
  .app-user .meta { display: none; }
}
@media (max-width: 1023px) {
  .app-header-inner { overflow-x: auto; gap: 20px; }
  .app-nav { flex-shrink: 0; }
  .app-nav a { white-space: nowrap; }
}

@media (max-width: 767px) {
  .app-header-inner { height: 60px; padding: 0 16px; gap: 16px; overflow-x: auto; }
  .app-nav { gap: 16px; }
  .app-nav a { font-size: 14px; white-space: nowrap; }
  .app-main { padding: 20px 16px; }
  .page-title { font-size: 25px; }
  .metric-card { padding: 18px 20px; }
  .metric-card .m-value { font-size: 28px; }
  .panel .table th, .panel .table td { padding: 12px 16px; }
  .auth-form h1 { font-size: 27px; }
  .auth-form-side { padding: 36px 20px; }
}

/* Recovery timeline — horizontal on desktop, vertical on mobile.
   It must never wrap into several rows: a wrapped stepper makes the reading
   order ambiguous and the connectors read as separate progress bars. */
.timeline { display: flex; flex-wrap: nowrap; gap: 0; align-items: flex-start; margin-bottom: 8px; }
.tl-step { flex: 1; min-width: 120px; text-align: center; position: relative; padding: 0 6px; }
.tl-step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%;
  height: 2px; background: var(--sop-border); z-index: 0; }
.tl-step:first-child::before { display: none; }
.tl-step.is-done::before { background: var(--sop-money); }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--sop-card);
  border: 2px solid var(--sop-border); margin: 0 auto 10px; display: flex;
  align-items: center; justify-content: center; position: relative; z-index: 1;
  color: #FFFFFF; }
.tl-dot svg { width: 16px; height: 16px; }
.tl-step.is-done .tl-dot { background: var(--sop-money); border-color: var(--sop-money); }
.tl-label { font-size: 14px; font-weight: 500; color: var(--sop-text-muted); }
.tl-step.is-done .tl-label { color: var(--sop-text); }
.tl-step.is-current .tl-label { color: var(--sop-money-deep); font-weight: 600; }

/* Mobile summary above the vertical timeline */
.tl-summary { display: none; margin-bottom: 24px; }
.tl-summary-title { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.tl-summary-count { font-size: 14px; color: var(--sop-text-muted); margin-top: 4px; }
.tl-bar { height: 6px; background: #EEF2F7; border-radius: 999px; overflow: hidden;
  margin-top: 12px; }
.tl-bar-fill { height: 100%; background: var(--sop-money); border-radius: 999px; }

/* Tablet: still horizontal, but the six columns must shrink rather than
   overflow the container. */
@media (min-width: 768px) and (max-width: 1000px) {
  .tl-step { min-width: 0; padding: 0 4px; }
  .tl-label { font-size: 13px; }
}

@media (max-width: 767px) {
  .tl-summary { display: block; }
  /* Vertical stepper: one connector, unambiguous chronological order. */
  .timeline { flex-direction: column; align-items: stretch; }
  .tl-step { min-width: 0; text-align: left; padding: 13px 0; display: flex;
    align-items: center; gap: 16px; }
  .tl-step::before { top: -50%; left: 15px; width: 2px; height: 100%; }
  .tl-dot { margin: 0; flex-shrink: 0; }
  .tl-label { font-size: 16px; }
}

/* Result metrics — green is reserved for real money outcomes */
.metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px; margin: 24px 0 28px; }
.metric { background: var(--sop-card); border: 1px solid var(--sop-border);
  border-radius: var(--sop-radius-lg); padding: 20px 22px; }
.metric-label { font-size: 13px; color: var(--sop-text-muted); }
.metric-value { font-size: 28px; font-weight: 600; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.metric-value.is-money { color: var(--sop-money); }
.metric-value.metric-none { font-size: 17px; font-weight: 500; color: var(--sop-text-secondary);
  letter-spacing: 0; }
.metric-note { font-size: 12px; color: var(--sop-text-muted); margin-top: 6px; line-height: 1.5; }

/* Legacy dashboard bits kept from v1 */
.how { background: var(--sop-card); border-top: 1px solid var(--sop-border); padding: 40px 20px 48px; }
.how-step .hs-title { font-size: 14px; font-weight: 500; }
.how-step .hs-text { font-size: 12px; color: var(--sop-text-muted); margin-top: 4px; }

/* Responsive */
@media (max-width: 767px) {
  .hero { padding: 40px 16px 20px; }
  .hero h1 { font-size: 26px; }
  .container { padding: 20px 14px; }
  .topbar-inner { padding: 12px 16px; }
  .btn { min-height: 44px; }
}

/* Legal documents: rendered from markdown, so the typography is set here once
   rather than in each document. Readability beats density — these are read by
   people deciding whether to trust us with money. */
.legal-body { font-size: 16px; line-height: 1.75; color: var(--sop-text-secondary); }
.legal-body h1 { font-size: 26px; letter-spacing: -0.5px; color: var(--sop-text); margin: 40px 0 14px; }
.legal-body h2 { font-size: 20px; color: var(--sop-text); margin: 36px 0 12px; }
.legal-body h3 { font-size: 17px; color: var(--sop-text); margin: 28px 0 10px; }
.legal-body p { margin: 0 0 16px; }
.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--sop-text); }
.legal-body hr { border: none; border-top: 1px solid var(--sop-border); margin: 36px 0; }
.legal-body code { background: #F1F5F9; padding: 2px 6px; border-radius: 4px; font-size: 14px; }
.legal-body blockquote { margin: 0 0 18px; padding: 12px 18px; border-left: 3px solid var(--sop-accent-border);
  background: var(--sop-accent-soft); border-radius: 0 8px 8px 0; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 20px; display: block; overflow-x: auto; }
.legal-body th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--sop-border);
  color: var(--sop-text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.legal-body td { padding: 10px 14px; border-bottom: 1px solid var(--sop-border); vertical-align: top; }