/* ============================================================
   Suppli — LP body sections (per-version content blocks)
   Sits between the trust bar and the quotes section.
   Reuses tokens + .container + .eyebrow + .h2 from styles.css
   ============================================================ */

/* ============================================================
   Problem visual — overlapping card cluster (A/R dashboard)
   Pixel-faithful recreation of the marketing hero cluster.
   ============================================================ */
.problem__visual.problem__visual--cluster {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  justify-content: center;
}
.pcl {
  position: relative;
  width: 558px;
  height: 530px;
  zoom: 0.86;
  --age-current: #27AE60;
  --age-1: #F59E0B;
  --age-2: #F97316;
  --age-3: #EF4444;
}
.pcl__card {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
}

/* --- Open A/R KPI (top-left, behind) --- */
.pcl__card--ar {
  left: 0; top: 0;
  width: 320px;
  z-index: 1;
  padding: 20px 22px 18px;
  overflow: hidden;
}
.pcl__ar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcl__ar-label { font-size: 14px; font-weight: 500; color: var(--fg-tertiary); }
.pcl__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--age-current) 15%, transparent);
  color: #1E874B;
  white-space: nowrap;
}
.pcl__chip svg { width: 10px; height: 10px; }
.pcl__ar-fig {
  font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
  color: #111827;
  margin-top: 8px; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.pcl__ar-sub { font-size: 13px; color: var(--fg-tertiary); margin-top: 8px; }
.pcl__spark { display: block; width: 100%; height: 38px; margin-top: 12px; color: var(--accent); overflow: visible; }

/* --- Aging breakdown (mid-left, behind) --- */
.pcl__card--aging {
  left: 32px; top: 200px;
  width: 312px;
  z-index: 1;
  padding: 20px 22px 22px;
}
.pcl__aging-title { font-size: 17px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; }
.pcl__aging-sub { font-size: 12.5px; color: var(--fg-tertiary); margin-top: 3px; }
.pcl__aging-bar {
  display: flex; gap: 3px;
  height: 11px; margin-top: 16px;
}
.pcl__aging-bar span { display: block; border-radius: 3px; }
.pcl__aging-legend { display: flex; gap: 26px; margin-top: 16px; }
.pcl__aging-item { display: flex; flex-direction: column; gap: 3px; }
.pcl__aging-dash { width: 22px; height: 4px; border-radius: 2px; }
.pcl__aging-pct { font-size: 17px; font-weight: 700; color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.pcl__aging-cat { font-size: 11.5px; color: var(--fg-tertiary); }

/* --- Suppli is working feed (top-right, front) --- */
.pcl__card--feed {
  left: 214px; top: 58px;
  width: 344px;
  z-index: 3;
  padding: 20px 22px;
}
.pcl__feed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pcl__feed-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--fg-primary); }
.pcl__feed-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);
}
.pcl__feed-live { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--fg-muted); }
.pcl__feed-list { list-style: none; margin: 0; padding: 0; }
.pcl__feed-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 13px; align-items: start;
  padding: 13px 0;
}
.pcl__feed-item + .pcl__feed-item { border-top: 1px solid var(--bg-muted); }
.pcl__feed-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none; margin-top: 1px;
  background: var(--accent-wash); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.pcl__feed-ico svg { width: 17px; height: 17px; }
.pcl__feed-line { font-size: 13.5px; line-height: 1.4; color: var(--fg-secondary); }
.pcl__feed-line strong { color: var(--fg-primary); font-weight: 700; }
.pcl__feed-time { font-size: 12px; color: var(--fg-muted); white-space: nowrap; padding-top: 1px; }

/* --- Posted to Eclipse (bottom, front) --- */
.pcl__card--posted {
  left: 232px; top: 352px;
  width: 296px;
  z-index: 2;
  padding: 20px 22px 22px;
}
.pcl__posted-head { display: flex; align-items: center; gap: 12px; }
.pcl__posted-check {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: color-mix(in oklab, var(--age-current) 16%, transparent);
  color: #1E874B;
  display: flex; align-items: center; justify-content: center;
}
.pcl__posted-check svg { width: 20px; height: 20px; }
.pcl__posted-eyebrow { display: block; font-size: 12px; color: var(--fg-tertiary); }
.pcl__posted-title { display: block; font-size: 15px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; margin-top: 1px; }
.pcl__posted-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.pcl__posted-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  background: var(--bg-subtle);
  border-radius: 9px;
}
.pcl__posted-inv { font-size: 13px; font-weight: 500; color: var(--fg-secondary); }
.pcl__posted-amt { font-size: 13px; font-weight: 700; color: var(--fg-primary); font-variant-numeric: tabular-nums; }

@media (max-width: 980px) { .problem__visual.problem__visual--cluster { max-width: 558px; } }
@media (max-width: 600px) { .pcl { zoom: 0.82; } }
@media (max-width: 480px) { .pcl { zoom: 0.62; } }
@media (max-width: 380px) { .pcl { zoom: 0.5; } }

/* Dark-section variants */
body[data-dark-sections="true"] .pcl__card { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: var(--shadow-lg); }
body[data-dark-sections="true"] .pcl__feed-item + .pcl__feed-item { border-top-color: var(--dark-border); }
body[data-dark-sections="true"] .pcl__aging-title,
body[data-dark-sections="true"] .pcl__feed-title,
body[data-dark-sections="true"] .pcl__feed-line strong,
body[data-dark-sections="true"] .pcl__aging-pct,
body[data-dark-sections="true"] .pcl__posted-title,
body[data-dark-sections="true"] .pcl__posted-amt,
body[data-dark-sections="true"] .pcl__ar-fig { color: #fff; }
body[data-dark-sections="true"] .pcl__feed-line,
body[data-dark-sections="true"] .pcl__posted-inv { color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .pcl__ar-sub,
body[data-dark-sections="true"] .pcl__aging-sub,
body[data-dark-sections="true"] .pcl__aging-cat,
body[data-dark-sections="true"] .pcl__posted-eyebrow { color: var(--dark-fg-tertiary); }
body[data-dark-sections="true"] .pcl__posted-row { background: rgba(255,255,255,0.04); }

/* ============================================================
   AR Aging — aging-report triage visual
   ============================================================ */
.agevis { position: relative; padding-bottom: 8px; --age-current:#27AE60; --age-1:#F59E0B; --age-2:#F97316; --age-3:#EF4444; --age-4:#991B1B; }
.agevis__win {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.agevis__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.agevis__title { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.agevis__meta { font-size: 11.5px; color: var(--fg-tertiary); }
.agevis__buckets { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 18px 4px; }
.agevis__bucket { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg-tertiary); }
.agevis__dot { width: 8px; height: 8px; border-radius: 50%; }
.agevis__rows { list-style: none; margin: 0; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.agevis__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
}
.agevis__name { font-size: 13px; font-weight: 500; color: var(--fg-primary); }
.agevis__amt { font-size: 13px; font-weight: 600; color: var(--fg-secondary); }
.agevis__status {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; justify-self: end;
  min-width: 78px; text-align: center;
  background: var(--bg-muted); color: var(--fg-tertiary);
}
.agevis__status--done { background: color-mix(in oklab, var(--success-500) 16%, transparent); color: var(--success-600); }
.agevis__status--soft { background: var(--accent-wash); color: var(--accent); }
.agevis__row--cold { opacity: 0.5; }
.agevis__row--cold .agevis__name { font-weight: 500; }
.agevis__divider { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px; }
.agevis__divider-line { flex: 1; height: 1px; background: repeating-linear-gradient(to right, var(--border-subtle) 0 6px, transparent 6px 12px); }
.agevis__divider-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.agevis__chip {
  position: absolute; right: -18px; bottom: -18px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 13px 18px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.agevis__chip-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-tertiary); }
.agevis__chip-fig { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1.05; }
.agevis__chip-sub { font-size: 11px; color: var(--fg-tertiary); }
@media (max-width: 980px) {
  .agevis { max-width: 540px; }
}

/* ============================================================
   About Suppli — industry image boxes
   ============================================================ */
.industrygrid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.industry {
  margin: 0;
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.industry::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 220px;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med, 220ms) var(--ease-standard);
}
.industry:hover::after { opacity: 0.92; }
.industry__img {
  display: block; width: 100%; height: 220px;
  filter: grayscale(1) contrast(1.03);
}
.industry__img::part(empty),
.industry__img { background: var(--bg-subtle); }
.industry__cap { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.industry__name { font-size: 16px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; }
.industry__desc { font-size: 13.5px; line-height: 1.45; color: var(--fg-tertiary); }
@media (max-width: 860px) {
  .industrygrid { grid-template-columns: 1fr; max-width: 420px; }
  .industry__img { height: 200px; }
}

/* ---- Section scaffold ---- */
.lp { padding: var(--section-y) 0; }
.lp--tight { padding: var(--section-y-sm) 0; }
.lp--subtle { background: #FAFAFB; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.lp__head { max-width: 760px; }
.lp__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lp__head .h2 { margin-top: 18px; text-wrap: balance; }
.lp__head--center .h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }

/* ---- Prose body (problem statement, math, hook, about, trust) ---- */
.prose {
  margin-top: 24px;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.62;
  color: var(--fg-secondary);
}
.prose--center { margin-left: auto; margin-right: auto; }
.prose p { margin-top: 18px; }
.prose p:first-child { margin-top: 0; }
.prose strong { color: var(--fg-primary); font-weight: 600; }
.prose em { font-style: normal; color: var(--accent); font-weight: 600; }

/* Highlighted "math" callout — quiet brand wash, no full-bleed */
.mathnote {
  margin-top: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  border-radius: var(--radius-lg);
}
.mathnote__fig {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
  flex: 0 0 auto;
}
.mathnote__body { font-size: 15px; line-height: 1.55; color: var(--fg-secondary); }
.mathnote__body strong { color: var(--fg-primary); font-weight: 600; }

/* ---- Stylized single-day DSO formula ---- */
.dsoformula {
  margin-top: 32px;
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}
.dsoformula__term {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 26px 24px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.dsoformula__fig {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.dsoformula__lbl {
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--fg-tertiary);
}
.dsoformula__op {
  flex: 0 0 auto;
  align-self: center;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: color-mix(in oklab, var(--fg-tertiary) 80%, transparent);
}
.dsoformula__term--result {
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
}
.dsoformula__term--result .dsoformula__fig { color: var(--accent); }
.dsoformula__term--result .dsoformula__lbl { color: var(--fg-secondary); }
.dsoformula__cap {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-tertiary);
}
.dsoformula__cap strong { color: var(--fg-primary); font-weight: 600; }
@media (max-width: 720px) {
  .dsoformula { flex-direction: column; align-items: stretch; }
  .dsoformula__op { align-self: center; }
}
body[data-dark-sections="true"] .dsoformula__term {
  background: var(--dark-bg-elev);
  border-color: var(--dark-border);
}
body[data-dark-sections="true"] .dsoformula__fig { color: #fff; }
body[data-dark-sections="true"] .dsoformula__term--result {
  background: color-mix(in oklab, var(--accent) 16%, var(--dark-bg-elev));
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
}
body[data-dark-sections="true"] .dsoformula__term--result .dsoformula__fig { color: var(--accent); }
body[data-dark-sections="true"] .dsoformula__cap strong { color: #fff; }

/* ---- Pillar grid (reasons to switch / value props) ---- */
.pillars {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.pillar {
  background: var(--bg-surface);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.pillar__num::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.pillar__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-primary);
  line-height: 1.3;
}
.pillar__desc { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); }
.pillar__desc strong { color: var(--fg-primary); font-weight: 600; }

/* 3-up variant (guide covers / value props that read as 3) */
.pillars--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .pillars, .pillars--3 { grid-template-columns: 1fr; }
}

/* 3-up pillar variant (briefs with three reasons) */
.pillars--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .pillars--three { grid-template-columns: 1fr; } }

/* ---- Comparison table (Suppli vs Competitor) ---- */
.cmp {
  margin-top: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.cmp__row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  border-top: 1px solid var(--border-subtle);
}
.cmp__row:first-child { border-top: none; }
.cmp__row--head { background: var(--bg-subtle); }
.cmp__cell {
  padding: 16px 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
  display: flex;
  align-items: center;
}
.cmp__cell--label {
  font-weight: 600;
  color: var(--fg-primary);
  font-size: 13px;
}
/* Suppli column — brand-tinted, the favored side */
.cmp__cell--suppli {
  background: var(--accent-wash);
  color: var(--fg-primary);
  font-weight: 600;
  border-left: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
}
.cmp__brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cmp__brand--suppli { color: var(--accent); }
.cmp__brand--other { color: var(--fg-tertiary); }
.cmp__cell--head { padding-top: 18px; padding-bottom: 18px; }

@media (max-width: 860px) {
  .cmp__row {
    grid-template-columns: 1fr 1fr;
  }
  .cmp__cell--label {
    grid-column: 1 / -1;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: 6px;
    padding-top: 14px;
  }
  .cmp__row--head .cmp__cell--label { display: none; }
  .cmp__cell--suppli { border-left: none; }
}

/* ---- Proof: stat figures + featured quote ---- */
.proof__stats {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.stat {
  background: var(--bg-surface);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat__fig {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.stat__fig em { font-style: normal; color: var(--accent); }
.stat__label { font-size: 13px; color: var(--fg-tertiary); line-height: 1.4; }

.proof__quote {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 36px 40px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.proof__quote q {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--fg-primary);
  quotes: "\201C" "\201D";
}
.proof__attr { font-size: 14px; color: var(--fg-tertiary); }
.proof__attr strong { color: var(--fg-primary); font-weight: 700; }

@media (max-width: 860px) {
  .proof__stats { grid-template-columns: repeat(2, 1fr); }
  .proof__quote { padding: 28px; }
  .proof__quote q { font-size: 19px; }
}

/* ---- Inline quote rows (proof sections with multiple short quotes) ---- */
.quoterows { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.quoterow {
  padding: 24px 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.quoterow q {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fg-primary);
  quotes: "\201C" "\201D";
}
.quoterow__attr { margin-top: 12px; font-size: 13.5px; color: var(--fg-tertiary); }
.quoterow__attr strong { color: var(--fg-primary); font-weight: 700; }

/* ============================================================
   Problem section — copy + cash-application product visual
   ============================================================ */
.problem__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.problem__copy { max-width: 540px; }
.problem__copy .h2 { margin-top: 18px; text-wrap: balance; }
.problem__copy .prose { margin-top: 22px; }

/* Cash-application product visual */
.cashvis { position: relative; padding-bottom: 8px; }
.cashvis__win {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.cashvis__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.cashvis__title { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.cashvis__live { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--success-600); }
.cashvis__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success-500) 30%, transparent);
  animation: pulse 1.8s infinite var(--ease-standard);
}
.cashvis__sources { display: flex; gap: 8px; padding: 16px 18px 2px; }
.cashvis__src {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-muted); color: var(--fg-tertiary);
}
.cashvis__src--on { background: var(--accent-wash); color: var(--accent); }

.cashvis__pay {
  margin: 14px 18px 0;
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 12px; align-items: center;
  padding: 13px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.cashvis__pay-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.cashvis__pay-icon svg { width: 20px; height: 20px; }
.cashvis__pay-title { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.cashvis__pay-meta { font-size: 11.5px; color: var(--fg-tertiary); margin-top: 2px; }
.cashvis__pay-amt { font-size: 15px; font-weight: 700; color: var(--fg-primary); }

.cashvis__flow { display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; }
.cashvis__flow-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-tertiary); white-space: nowrap;
}
.cashvis__flow-line { flex: 1; height: 1px; background: var(--border-subtle); }

.cashvis__rows { padding: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.cashvis__row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.cashvis__tick {
  width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in oklab, var(--success-500) 16%, transparent);
  color: var(--success-600);
  display: flex; align-items: center; justify-content: center;
}
.cashvis__tick svg { width: 10px; height: 10px; }
.cashvis__inv { font-family: var(--font-mono); font-size: 12px; color: var(--fg-tertiary); }
.cashvis__amt { font-size: 13px; font-weight: 600; color: var(--fg-primary); }

.cashvis__posted {
  margin: 14px 18px 18px;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--accent-wash);
  border-radius: var(--radius-md);
}
.cashvis__posted-pip {
  width: 30px; height: 30px; border-radius: 8px;
  background: #fff; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.cashvis__posted-pip svg { width: 16px; height: 16px; }
.cashvis__posted-title { font-size: 13px; font-weight: 700; color: var(--fg-primary); }
.cashvis__posted-meta { font-size: 11.5px; color: var(--fg-secondary); margin-top: 1px; }

.cashvis__chip {
  position: absolute; right: -18px; bottom: -18px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 13px;
}
.cashvis__chip-fig { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.cashvis__chip-label {
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-tertiary);
}

/* Credit-check product visual (Credit Risk page) */
.creditvis { position: relative; padding-bottom: 8px; }
.creditvis__win {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.creditvis__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.creditvis__title { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.creditvis__live { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--accent); }
.creditvis__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent);
  animation: pulse 1.8s infinite var(--ease-standard);
}
.creditvis__applicant { padding: 14px 18px 4px; }
.creditvis__applicant-meta { font-size: 11.5px; color: var(--fg-tertiary); }

.creditvis__checks { padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.creditvis__check {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.creditvis__icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center; color: var(--fg-secondary);
}
.creditvis__icon svg { width: 18px; height: 18px; }
.creditvis__check-title { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.creditvis__check-meta { font-size: 11px; color: var(--fg-tertiary); margin-top: 2px; }
.creditvis__status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--success-500) 14%, transparent);
  color: var(--success-600);
}
.creditvis__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success-500);
}

.creditvis__decision {
  margin: 14px 18px 18px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--accent-wash);
  border-radius: var(--radius-md);
}
.creditvis__decision-pip {
  width: 30px; height: 30px; border-radius: 8px;
  background: #fff; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.creditvis__decision-pip svg { width: 16px; height: 16px; }
.creditvis__decision-title { font-size: 13px; font-weight: 700; color: var(--fg-primary); }
.creditvis__decision-meta { font-size: 11.5px; color: var(--fg-secondary); margin-top: 1px; }

.creditvis__chip {
  position: absolute; right: -18px; bottom: -18px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 13px;
}
.creditvis__chip-fig { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.creditvis__chip-label {
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-tertiary);
}

/* Problem section — exact hero image from the 2.0 landing page */
.problem__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.problem__hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.problem__hero-img::part(empty),
.problem__hero-img { background: var(--bg-subtle); }

/* In-section media block (image under prose, e.g. "Who this is for") */
.lp__media {
  margin-top: 40px;
  max-width: 880px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  background: var(--bg-surface);
}
.lp__media-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--bg-subtle);
}

/* Problem section split — copy left, tilted text-to-pay phone right */
.lp--phonebleed { overflow: hidden; }
.problemsplit {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 64px;
  align-items: center;
}
.problemsplit__phone {
  margin: 0;
  align-self: end;
  display: flex;
  justify-content: center;
}
.problemsplit__phone img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-bottom: calc(-1 * var(--section-y) - 56px);
  transform: rotate(5deg);
  transform-origin: 50% 75%;
  filter: drop-shadow(0px 18px 32px rgba(0, 0, 0, 0.18));
}
@media (max-width: 860px) {
  .problemsplit { grid-template-columns: 1fr; gap: 44px; }
  .problemsplit__phone img { max-width: 280px; }
}

/* Photo variant — framed still image instead of bleeding phone */
.problemsplit--photo { grid-template-columns: 1.25fr 1fr; }
.problemsplit__photo { margin: 0; }
.problemsplit__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  filter: grayscale(1);
}

/* Diagram variant — AR lifecycle, credit as one slice */
.problemsplit--diagram { grid-template-columns: 1.25fr 1fr; }
.problemsplit__diagram { margin: 0; }
.arflow {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  overflow: hidden;
}
.arstack {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}
.arstack__back {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.arstack__ghost {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 16px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  filter: grayscale(1);
  opacity: 0.72;
}
.arstack__ghost-name { font-size: 13.5px; font-weight: 600; color: var(--fg-tertiary); }
.arstack__ghost-sub { font-size: 11.5px; color: var(--fg-muted); }
.arstack__front {
  width: 200px;
  transform: rotate(-2deg);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px 20px;
  background: var(--bg-surface);
  border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.arstack__chip {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  white-space: nowrap;
  margin-bottom: 4px;
}
.arstack__name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-primary); }
.arstack__sub { font-size: 12.5px; color: var(--fg-tertiary); line-height: 1.45; }
.arflow__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px -22px 0;
  padding: 13px 22px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--bg-muted);
  font-size: 12.5px;
  color: var(--fg-secondary);
}
.arflow__footdot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 560px) {
  .arstack { grid-template-columns: 1fr; }
  .arstack__front { transform: none; width: 100%; }
}

/* Lifecycle flow — horizontal step cards (credit app = step 1) */
.lifeflow {
  margin-top: 40px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.lifeflow__step {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lifeflow__step--active {
  background: var(--accent-wash);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  box-shadow: var(--shadow-md);
}
.lifeflow__badge {
  align-self: flex-start;
  margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  padding: 3px 8px; border-radius: 999px;
}
.lifeflow__name { font-size: 14.5px; font-weight: 700; color: var(--fg-primary); }
.lifeflow__sub { font-size: 12px; color: var(--fg-tertiary); line-height: 1.4; }
.lifeflow__arrow { align-self: center; flex: none; color: var(--fg-muted); font-size: 18px; }
@media (max-width: 860px) {
  .lifeflow { flex-direction: column; }
  .lifeflow__arrow { transform: rotate(90deg); }
}
body[data-dark-sections="true"] .lifeflow__step { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: none; }
body[data-dark-sections="true"] .lifeflow__name { color: #fff; }
body[data-dark-sections="true"] .lifeflow__sub { color: var(--dark-fg-tertiary); }
body[data-dark-sections="true"] .lifeflow__badge { background: var(--dark-bg-elev); }
body[data-dark-sections="true"] .lifeflow__step--active { background: color-mix(in oklab, var(--accent) 16%, var(--dark-bg-elev)); border-color: color-mix(in oklab, var(--accent) 38%, transparent); }

/* ============================================================
   "Where BlackLine fits" — AR pipeline feeding the close
   ============================================================ */
.blfit { margin-top: 44px; }
.blfit__diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 268px);
  gap: 22px;
  align-items: stretch;
}

/* Shared panel */
.blfit__panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.blfit__panel--ar { box-shadow: var(--shadow-sm); }
.blfit__panel--close {
  background: var(--bg-subtle);
  border-style: dashed;
  border-color: var(--border-default);
}

/* Owner band */
.blfit__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.blfit__panel--close .blfit__band { border-bottom-color: var(--bg-muted); }
.blfit__scope {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.blfit__owner {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.blfit__owner--suppli { background: var(--accent-wash); color: var(--accent); }
.blfit__owner--other { background: var(--bg-muted); color: var(--fg-secondary); }

/* AR tiles */
.blfit__tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
}
.blfit__tile {
  background: var(--bg-surface);
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.blfit__ico {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash);
  color: var(--accent);
}
.blfit__ico svg { width: 20px; height: 20px; }
.blfit__name { font-size: 14px; font-weight: 600; color: var(--fg-primary); letter-spacing: -0.01em; }
.blfit__sub { font-size: 12px; line-height: 1.45; color: var(--fg-tertiary); }

/* Foot rail inside AR panel */
.blfit__rail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--accent-wash);
  border-top: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.blfit__rail-dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 26%, transparent);
}
.blfit__rail-flow { margin-left: auto; letter-spacing: 0.04em; }

/* Connector arrow */
.blfit__arrow {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--fg-muted);
}
.blfit__arrow svg { width: 30px; height: 30px; }
.blfit__arrow-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Close node */
.blfit__close {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}
.blfit__close .blfit__ico {
  background: #fff;
  border: 1px solid var(--border-default);
  color: var(--fg-secondary);
}
.blfit__close-name { font-size: 16px; font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; }
.blfit__close-sub { font-size: 12.5px; line-height: 1.5; color: var(--fg-tertiary); }
.blfit__close-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-default);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
}

@media (max-width: 920px) {
  .blfit__diagram { grid-template-columns: 1fr; }
  .blfit__arrow { flex-direction: row; }
  .blfit__arrow svg { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .blfit__tiles { grid-template-columns: 1fr 1fr; }
}

/* Dark-section variants */
body[data-dark-sections="true"] .blfit__panel--ar { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: none; }
body[data-dark-sections="true"] .blfit__panel--close { background: rgba(255,255,255,0.02); border-color: var(--dark-border); }
body[data-dark-sections="true"] .blfit__band { border-bottom-color: var(--dark-border); }
body[data-dark-sections="true"] .blfit__tiles { background: var(--dark-border); }
body[data-dark-sections="true"] .blfit__tile { background: var(--dark-bg-elev); }
body[data-dark-sections="true"] .blfit__name,
body[data-dark-sections="true"] .blfit__close-name { color: #fff; }
body[data-dark-sections="true"] .blfit__sub,
body[data-dark-sections="true"] .blfit__close-sub { color: var(--dark-fg-tertiary); }
body[data-dark-sections="true"] .blfit__owner--other { background: var(--dark-border); color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .blfit__close .blfit__ico { background: var(--dark-bg-elev); border-color: var(--dark-border); color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .blfit__close-foot { color: var(--dark-fg-secondary); border-top-color: var(--dark-border); }

/* Centered section variant */
.lp--center .lp__head,
.lp--center .prose {
  margin-inline: auto;
  text-align: center;
}
.lp--center .lp__media { margin-inline: auto; }

/* Recreated solution visual — "Suppli is working" account table window */
.lp__media--mock {
  max-width: 1000px;
  background: var(--bg-muted);
  padding: 36px;
}
.solwin {
  min-width: 860px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
  font-size: 13.5px;
}

/* Window bar */
.solwin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bg-muted);
}
.solwin__dots { display: flex; gap: 7px; }
.solwin__dot { width: 11px; height: 11px; border-radius: 50%; }
.solwin__dot--r { background: var(--danger-500); }
.solwin__dot--y { background: var(--warning-400); }
.solwin__dot--g { background: var(--success-500); }
.solwin__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.solwin__livedot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s infinite var(--ease-standard);
}

/* Filter chips */
.solwin__filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
}
.solwin__fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-tertiary);
  white-space: nowrap;
}
.solwin__fchip b { font-weight: 600; color: var(--fg-primary); }
.solwin__fchip--active {
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
  background: color-mix(in oklab, var(--accent-wash) 55%, #fff);
  color: var(--accent);
}
.solwin__fchip--active b { color: var(--accent); }
.solwin__fchip--end { margin-left: auto; color: var(--fg-secondary); }

/* Shared column grid */
.solwin__cols {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.75fr 92px;
  gap: 16px;
  align-items: center;
  padding: 0 30px;
}
.solwin__thead {
  background: var(--bg-subtle);
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.solwin__status { text-align: right; }

/* Rows */
.solwin__row { padding-top: 13px; padding-bottom: 13px; }
.solwin__row + .solwin__row { border-top: 1px solid var(--bg-muted); }
.solwin__acct,
.solwin__action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.solwin__stack { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.solwin__stack strong {
  font-weight: 600;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solwin__stack > span { font-size: 12px; color: var(--fg-tertiary); white-space: nowrap; }
.solwin__action .solwin__stack strong { font-weight: 500; }
.solwin__out strong { font-variant-numeric: tabular-nums; }
.solwin__avatar {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.solwin__pip {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.solwin__pip--danger {
  background: color-mix(in oklab, var(--danger-500) 12%, transparent);
  color: var(--danger-500);
}

/* Status pills */
.solwin__pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.solwin__pill--p30 {
  background: color-mix(in oklab, var(--warning-400) 22%, transparent);
  color: var(--warning-600);
}
.solwin__pill--paid {
  background: color-mix(in oklab, var(--success-500) 14%, transparent);
  color: var(--success-600);
}
.solwin__pill--review {
  background: var(--accent-wash);
  color: var(--accent);
}
.solwin__pill--p60 {
  background: color-mix(in oklab, var(--danger-500) 12%, transparent);
  color: var(--dark-red-600);
}

/* Footer */
.solwin__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--bg-muted);
  font-size: 12.5px;
  color: var(--fg-secondary);
}
.solwin__footdot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 760px) {
  .lp__media--mock { padding: 20px; }
}

/* On small screens, scale the window down instead of scrolling */
@media (max-width: 1020px) { .solwin { zoom: 0.82; } }
@media (max-width: 860px)  { .solwin { zoom: 0.68; } }
@media (max-width: 680px)  { .solwin { zoom: 0.52; } }
@media (max-width: 540px)  { .solwin { zoom: 0.40; } }
@media (max-width: 420px)  { .solwin { zoom: 0.34; } }

@media (max-width: 980px) {
  .problem__inner { grid-template-columns: 1fr; gap: 44px; }
  .cashvis { max-width: 520px; }
  .creditvis { max-width: 520px; }
  .problem__visual { max-width: 560px; }
}

/* ============================================================
   Collections automation visual (Collections LP problem section)
   ============================================================ */
.collvis { position: relative; padding-bottom: 8px; }
.collvis__win {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.collvis__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.collvis__title { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.collvis__live { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--success-600); }
.collvis__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success-500) 30%, transparent);
  animation: pulse 1.8s infinite var(--ease-standard);
}
.collvis__feed { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.collvis__item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.collvis__ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-muted); color: var(--fg-tertiary);
}
.collvis__ico svg { width: 17px; height: 17px; }
.collvis__ico--read { background: color-mix(in oklab, #D97706 14%, transparent); color: #B45309; }
.collvis__ico--promise { background: color-mix(in oklab, var(--success-500) 16%, transparent); color: var(--success-600); }
.collvis__ico--remind { background: var(--accent-wash); color: var(--accent); }
.collvis__ico--escalate { background: color-mix(in oklab, #DC2626 13%, transparent); color: #DC2626; }
.collvis__line { font-size: 13px; color: var(--fg-secondary); }
.collvis__line strong { color: var(--fg-primary); font-weight: 600; }
.collvis__meta { font-size: 11.5px; color: var(--fg-tertiary); margin-top: 2px; }
.collvis__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--bg-muted); color: var(--fg-tertiary);
}
.collvis__tag--amber { background: color-mix(in oklab, #D97706 16%, transparent); color: #B45309; }
.collvis__tag--green { background: color-mix(in oklab, var(--success-500) 18%, transparent); color: var(--success-600); }
.collvis__tag--red { background: color-mix(in oklab, #DC2626 14%, transparent); color: #DC2626; }
.collvis__foot { padding: 6px 18px 18px; }
.collvis__foot-bar { height: 7px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.collvis__foot-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.collvis__foot-label {
  display: block; margin-top: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-tertiary);
}
.collvis__chip {
  position: absolute; right: -18px; bottom: -18px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 13px;
}
.collvis__chip-fig { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.collvis__chip-label {
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-tertiary);
}
@media (max-width: 980px) {
  .collvis { max-width: 520px; }
}

/* ============================================================
   Proof — featured quote + stylized stat blocks
   ============================================================ */
.proofquotes { display: flex; flex-direction: column; gap: 20px; }
.proofquotes .quoterow--logo { flex: 1; }
.proofquotes--row { margin-top: 36px; flex-direction: row; align-items: stretch; }
.proofquotes--row .quoterow--logo { flex: 1 1 0; }
@media (max-width: 860px) {
  .proofquotes--row { flex-direction: column; }
}
.proofgrid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.quoterow--logo {
  display: flex; flex-direction: column;
  padding: 34px 36px;
  border-left: 3px solid var(--accent);
}
.quoterow--logo q { font-size: 20px; line-height: 1.5; }
.quoterow__foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 18px; }
.quoterow__logo { height: 56px; width: auto; max-width: 200px; object-fit: contain; }
.quoterow--logo .quoterow__attr { margin-top: 0; display: flex; flex-direction: column; gap: 2px; }
.quoterow--logo .quoterow__attr strong { font-size: 14px; }
.quoterow--logo .quoterow__attr span { font-size: 13px; color: var(--fg-tertiary); }

.proofstats { display: flex; flex-direction: column; gap: 20px; }
.proofstat {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: none;
  padding: 24px 26px;
  display: flex; align-items: center; gap: 22px;
}
.proofstat__ring {
  width: 92px; height: 92px; border-radius: 50%; flex: 0 0 92px;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--bg-muted) 0);
  display: flex; align-items: center; justify-content: center;
}
.proofstat__ring-inner {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
}
.proofstat__fig { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; color: var(--fg-primary); line-height: 1; }
.proofstat__unit { font-size: 14px; font-weight: 700; }
.proofstat__trendtop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 0 0 auto; }
.proofstat__fig--down { font-size: 40px; color: var(--accent); }
.proofstat__spark { width: 108px; height: 34px; color: var(--accent); }
.proofstat__label { font-size: 15px; font-weight: 700; color: var(--fg-primary); }
.proofstat__sub { font-size: 13px; color: var(--fg-tertiary); margin-top: 4px; line-height: 1.45; }

@media (max-width: 860px) {
  .proofgrid { grid-template-columns: 1fr; }
}

/* Stylized stat grid (full-width row of stat cards) */
.proofstatgrid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.proofstat--card {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.proofstat--card .proofstat__caption { align-self: stretch; margin-top: auto; }
.proofstat--figure { min-height: 140px; }
.proofstat--figure .proofstat__fig--down { font-size: 44px; }
.proofstat--bigfig .proofstat__fig--down { font-size: 54px; margin-block: auto; }
.proofstat--bigfig .proofstat__caption { margin-top: 0; }
@media (max-width: 860px) {
  .proofstatgrid { grid-template-columns: 1fr 1fr; }
}

/* ---- Dark-section variants for the new blocks ---- */
body[data-dark-sections="true"] .cashvis__win,
body[data-dark-sections="true"] .collvis__win,
body[data-dark-sections="true"] .proofstat { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: none; }
body[data-dark-sections="true"] .cashvis__bar,
body[data-dark-sections="true"] .collvis__bar,
body[data-dark-sections="true"] .cashvis__flow-line { border-color: var(--dark-border); background: var(--dark-border); }
body[data-dark-sections="true"] .cashvis__bar,
body[data-dark-sections="true"] .collvis__bar { background: transparent; }
body[data-dark-sections="true"] .cashvis__title,
body[data-dark-sections="true"] .collvis__title,
body[data-dark-sections="true"] .collvis__line strong,
body[data-dark-sections="true"] .cashvis__pay-title,
body[data-dark-sections="true"] .cashvis__pay-amt,
body[data-dark-sections="true"] .cashvis__posted-title,
body[data-dark-sections="true"] .cashvis__amt,
body[data-dark-sections="true"] .proofstat__label,
body[data-dark-sections="true"] .proofstat__fig { color: #fff; }
body[data-dark-sections="true"] .cashvis__pay,
body[data-dark-sections="true"] .collvis__item,
body[data-dark-sections="true"] .cashvis__row { background: rgba(255,255,255,0.03); border-color: var(--dark-border); }
body[data-dark-sections="true"] .cashvis__pay-icon { background: var(--dark-bg-elev); border-color: var(--dark-border); }
body[data-dark-sections="true"] .proofstat__ring-inner { background: var(--dark-bg-elev); }
body[data-dark-sections="true"] .quoterow--logo .quoterow__attr span,
body[data-dark-sections="true"] .proofstat__sub { color: var(--dark-fg-tertiary); }

/* Credit-check visual — dark */
body[data-dark-sections="true"] .creditvis__win { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: none; }
body[data-dark-sections="true"] .creditvis__bar { border-color: var(--dark-border); background: transparent; }
body[data-dark-sections="true"] .creditvis__title,
body[data-dark-sections="true"] .creditvis__check-title,
body[data-dark-sections="true"] .creditvis__decision-title { color: #fff; }
body[data-dark-sections="true"] .creditvis__check { background: rgba(255,255,255,0.03); border-color: var(--dark-border); }
body[data-dark-sections="true"] .creditvis__icon { background: var(--dark-bg-elev); border-color: var(--dark-border); color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .creditvis__decision-pip { background: var(--dark-bg-elev); }
body[data-dark-sections="true"] .creditvis__applicant-meta,
body[data-dark-sections="true"] .creditvis__check-meta { color: var(--dark-fg-tertiary); }
body[data-dark-sections="true"] .creditvis__decision-meta { color: var(--dark-fg-secondary); }

/* ---- Dark-section variants for the new blocks ---- */
body[data-dark-sections="true"] .lp--subtle { background: #0F1015; border-color: var(--dark-border); }
body[data-dark-sections="true"] .lp__head .h2 { color: #fff; }
body[data-dark-sections="true"] .prose { color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .prose strong { color: #fff; }
body[data-dark-sections="true"] .mathnote { background: color-mix(in oklab, var(--accent) 14%, var(--dark-bg-elev)); }
body[data-dark-sections="true"] .mathnote__body { color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .mathnote__body strong { color: #fff; }
body[data-dark-sections="true"] .pillars,
body[data-dark-sections="true"] .pillars--3,
body[data-dark-sections="true"] .proof__stats { background: var(--dark-border); border-color: var(--dark-border); }
body[data-dark-sections="true"] .pillar,
body[data-dark-sections="true"] .stat { background: var(--dark-bg-elev); }
body[data-dark-sections="true"] .pillar__name { color: #fff; }
body[data-dark-sections="true"] .pillar__desc { color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .pillar__desc strong { color: #fff; }
body[data-dark-sections="true"] .stat__fig { color: #fff; }
body[data-dark-sections="true"] .stat__label { color: var(--dark-fg-tertiary); }
body[data-dark-sections="true"] .cmp { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: none; }
body[data-dark-sections="true"] .cmp__row { border-top-color: var(--dark-border); }
body[data-dark-sections="true"] .cmp__row--head { background: rgba(255,255,255,0.03); }
body[data-dark-sections="true"] .cmp__cell { color: var(--dark-fg-secondary); }
body[data-dark-sections="true"] .cmp__cell--label { color: #fff; }
body[data-dark-sections="true"] .cmp__cell--suppli { background: color-mix(in oklab, var(--accent) 16%, var(--dark-bg-elev)); color: #fff; }
body[data-dark-sections="true"] .proof__quote,
body[data-dark-sections="true"] .quoterow { background: var(--dark-bg-elev); border-color: var(--dark-border); box-shadow: none; }
body[data-dark-sections="true"] .proof__quote q,
body[data-dark-sections="true"] .quoterow q { color: #fff; }
body[data-dark-sections="true"] .proof__attr strong,
body[data-dark-sections="true"] .quoterow__attr strong { color: #fff; }