/* Borrowsignal landing — below-fold styles.
   Critical above-fold CSS stays inline in index.html for instant hero render.
   This sheet loads async via media="print" + onload swap. */

/* Pain section — 3 cards with big gradient stats */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
@media (max-width:900px){.pain-grid{grid-template-columns:1fr;gap:18px}}
.pain-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg,16px);padding:36px 32px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column;gap:14px}
@media (prefers-reduced-motion: no-preference){
  .pain-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,23,42,.08);border-color:var(--accent-border)}
}
.pain-stat{font-size:clamp(40px,4vw,56px);font-weight:800;letter-spacing:-.03em;color:var(--accent);background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;font-variant-numeric:tabular-nums}
@supports not (background-clip:text){.pain-stat{color:var(--accent);background:none}}
.pain-h{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin:0}
.pain-p{font-size:15px;color:var(--ink-soft);line-height:1.55;margin:0}

/* === Trust band — glass cards on soft gradient backdrop === */
.trust-band{
  position:relative;
  background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);
  padding:48px 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.trust-band::before{
  content:"";position:absolute;inset:-30% -10% 0;z-index:-1;filter:blur(60px);pointer-events:none;
  background:
    radial-gradient(40% 60% at 20% 50%,rgba(99,102,241,.08),transparent 70%),
    radial-gradient(35% 50% at 80% 50%,rgba(168,85,247,.06),transparent 70%);
}
.trust-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
@media (max-width:900px){.trust-band-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:520px){.trust-band-grid{grid-template-columns:1fr;gap:12px}}
.trust-band .trust-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 18px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:16px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
@media (prefers-reduced-motion: no-preference){
  .trust-band .trust-item:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(15,23,42,.08);border-color:var(--accent-border)}
}
.trust-band .trust-item::before{display:none}
.trust-band .trust-item svg{width:24px;height:24px;flex-shrink:0;color:var(--accent);margin-top:2px}
.trust-band .trust-item strong{color:var(--ink);font-weight:700;font-size:14px;display:block;letter-spacing:-.01em;margin-bottom:2px}
.trust-band .trust-item span{color:var(--ink-soft);font-size:12.5px;line-height:1.4;display:block}

/* Section headings + sub — bigger, tighter typography (2026 fintech standard) */
h2{font-size:clamp(32px,3.6vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin-bottom:18px}
.section-sub{font-size:clamp(16px,1.2vw,19px);color:var(--ink-soft);max-width:680px;margin-bottom:56px;line-height:1.55}

/* Section eyebrow — small uppercase chip above H2 */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:14px;padding:5px 11px;background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:999px}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* How it works — symmetric 3-stage flow: Source → Engine → Delivery */
.flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:20px;
  align-items:stretch;
  margin-top:8px;
}
@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:14px}
  .flow-arrow{transform:rotate(90deg);justify-self:center;padding:4px 0}
}

.flow-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg, 16px);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
@media (prefers-reduced-motion: no-preference){
  .flow-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,23,42,.08);border-color:rgba(99,102,241,.25)}
}

/* Engine card — featured (gradient border, glow shadow) */
.flow-card-featured{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--gradient-cta) border-box;
  box-shadow:0 18px 44px rgba(99,102,241,.18);
}
@media (prefers-reduced-motion: no-preference){
  .flow-card-featured:hover{box-shadow:0 24px 56px rgba(99,102,241,.28);transform:translateY(-5px)}
}

.flow-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}

.flow-icon{
  width:42px;height:42px;border-radius:11px;
  background:var(--accent-soft);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);
  flex-shrink:0;
}
.flow-icon-glow{
  background:var(--gradient-cta);
  color:#fff;
  box-shadow:0 8px 22px rgba(99,102,241,.4);
}

.flow-badge{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
}
.flow-badge-gradient{
  background:var(--gradient-cta);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.flow-title{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--ink);
  line-height:1.2;
  margin:0;
}

.flow-desc{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.55;
  flex:1;
  margin:0;
}

.flow-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding-top:14px;
  margin-top:auto;
  border-top:1px solid var(--line);
}
.flow-stat{
  font-size:11.5px;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.3;
}
.flow-stat b{
  font-size:15px;
  color:var(--ink);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.flow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  opacity:.45;
}

/* === Anatomy section — bento layout with depth === */
section.reveal:has(.anatomy){position:relative;overflow:hidden;isolation:isolate}
section.reveal:has(.anatomy)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 30% at 15% 25%,rgba(99,102,241,.07),transparent 70%),
    radial-gradient(35% 30% at 85% 75%,rgba(168,85,247,.05),transparent 70%);
  filter:blur(40px);
}

.anatomy{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;margin-top:8px;align-items:start}
@media (max-width:900px){.anatomy{grid-template-columns:1fr;gap:32px}}

/* Bento grid: 10 field cards in 2-col */
.anatomy-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none;border:none;padding:0;box-shadow:none}
@media (max-width:540px){.anatomy-fields{grid-template-columns:1fr}}
.field-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
@media (prefers-reduced-motion: no-preference){
  .field-item:hover{transform:translateY(-2px);border-color:var(--accent-border);box-shadow:0 10px 24px rgba(15,23,42,.06)}
}
.field-item:last-child{border-bottom:1px solid var(--line)} /* override old rule */
.field-icon{
  width:36px;height:36px;
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.field-icon svg{width:18px;height:18px}
.field-item strong{color:var(--ink);font-weight:700;display:block;font-size:13.5px;margin-bottom:3px;letter-spacing:-.01em}
.field-item span{color:var(--ink-soft);font-size:12.5px;line-height:1.45;display:block}

.anatomy-preview{position:sticky;top:88px;align-self:start}
@media (max-width:900px){.anatomy-preview{position:relative;top:0}}

/* Visual lead card preview */
.lead-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg,16px);overflow:hidden;box-shadow:var(--shadow-lg)}
.lead-card-head{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 24px 18px;gap:16px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#fff,var(--bg-soft))}
.lead-card-name{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin-bottom:4px}
.lead-card-sub{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.lead-card-score{position:relative;overflow:hidden;text-align:center;background:var(--gradient-brand);color:#fff;border-radius:12px;padding:10px 14px;flex-shrink:0;box-shadow:0 6px 18px rgba(99,102,241,.3)}
.lead-card-score-num{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lead-card-score-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;margin-top:2px;opacity:.85}
.lead-card-stats{padding:18px 24px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;border-bottom:1px solid var(--line-soft)}
.lead-card-stats > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lead-card-stats span{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.lead-card-stats strong{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-fresh{display:inline-block;padding:1px 6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(135deg,#10b981,#34d399);color:#fff;border-radius:4px;margin-left:4px;vertical-align:middle}
.lead-card-hook{padding:18px 24px;border-bottom:1px solid var(--line-soft);background:var(--accent-soft)}
.lead-card-hook-label{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.lead-card-hook-text{font-size:14px;color:var(--ink-2);line-height:1.5;font-style:italic}
.lead-card-foot{padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.lead-card-foot a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.lead-card-foot a:hover{text-decoration:underline}

/* Lead card animations — stagger reveal, score pulse, hover lift */
@media (prefers-reduced-motion: no-preference){
  .lead-card{transition:transform .3s ease,box-shadow .3s ease}
  .lead-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(15,23,42,.12),0 0 60px rgba(99,102,241,.15)}

  /* Stats stagger reveal */
  .lead-card-stats > div{opacity:0;transform:translateY(8px);transition:opacity .45s ease-out,transform .45s ease-out}
  .lead-card.in-view .lead-card-stats > div{opacity:1;transform:translateY(0)}
  .lead-card.in-view .lead-card-stats > div:nth-child(1){transition-delay:.10s}
  .lead-card.in-view .lead-card-stats > div:nth-child(2){transition-delay:.18s}
  .lead-card.in-view .lead-card-stats > div:nth-child(3){transition-delay:.26s}
  .lead-card.in-view .lead-card-stats > div:nth-child(4){transition-delay:.34s}
  .lead-card.in-view .lead-card-stats > div:nth-child(5){transition-delay:.42s}

  /* AI hook fades in last */
  .lead-card-hook{opacity:0;transition:opacity .55s ease-out .55s}
  .lead-card.in-view .lead-card-hook{opacity:1}

  /* Score badge pulse glow — soft attention */
  .lead-card-score::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(closest-side at 50% 100%,rgba(255,255,255,.35),transparent 70%);
    animation:lc-score-pulse 3s ease-in-out infinite;
  }
  @keyframes lc-score-pulse{0%,100%{opacity:.3}50%{opacity:.9}}
}

/* === Interactive demo section (live AI scoring widget) === */
.demo-section{position:relative;background:#fff;overflow:hidden;isolation:isolate}
.demo-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 40% at 20% 50%,rgba(99,102,241,.07),transparent 70%),
    radial-gradient(40% 35% at 80% 50%,rgba(168,85,247,.05),transparent 70%);
  filter:blur(50px);
}

.demo-widget{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:8px}
@media (max-width:900px){.demo-widget{grid-template-columns:1fr;gap:18px}}

/* Input form */
.demo-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--shadow-sm);
}
.demo-field{display:flex;flex-direction:column;gap:8px}
.demo-field label{
  font-size:12px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;
}
.demo-field label strong{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.demo-field select{
  font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;
  background:#fff;color:var(--ink);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
  padding-right:38px;cursor:pointer;
}
.demo-field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.demo-field input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;
  background:var(--bg-soft);
  border-radius:999px;border:1px solid var(--line);
  outline:none;cursor:pointer;
}
.demo-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--gradient-brand);cursor:pointer;
  box-shadow:0 4px 12px rgba(99,102,241,.45);
  border:2px solid #fff;
}
.demo-field input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--gradient-brand);cursor:pointer;border:2px solid #fff;
  box-shadow:0 4px 12px rgba(99,102,241,.45);
}
.demo-range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-mute);margin-top:2px}
.demo-submit{width:100%;justify-content:center;margin-top:8px;cursor:pointer}
.demo-submit:disabled{opacity:.6;cursor:not-allowed;transform:none !important}
.demo-meta{font-size:12px;color:var(--ink-soft);text-align:center;margin:0}

/* Output card */
.demo-output{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px;
  display:flex;align-items:center;justify-content:center;
  min-height:360px;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}

/* Placeholder state */
.demo-placeholder{
  text-align:center;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.demo-placeholder-icon{
  width:72px;height:72px;
  background:var(--accent-soft);color:var(--accent);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.demo-placeholder p{margin:0;font-size:15px;color:var(--ink)}
.demo-placeholder p.demo-placeholder-sub{color:var(--ink-soft);font-size:13px}

/* Loading state */
.demo-loading{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink-soft)}
.demo-loading-spinner{
  width:36px;height:36px;
  border:3px solid var(--accent-soft);border-top-color:var(--accent);
  border-radius:50%;
  animation:demo-spin 1s linear infinite;
}
@keyframes demo-spin{to{transform:rotate(360deg)}}
.demo-loading p{margin:0;font-size:14px}

/* Result state */
.demo-result{width:100%;display:flex;flex-direction:column;gap:14px;animation:demo-fade-in .35s ease-out}
@keyframes demo-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo-result-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.demo-result-name{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.demo-result-meta{font-size:12px;color:var(--ink-soft);margin-top:4px}
.demo-result-score{
  text-align:center;
  background:var(--gradient-brand);color:#fff;
  border-radius:12px;padding:10px 14px;flex-shrink:0;
  box-shadow:0 6px 18px rgba(99,102,241,.3);
}
.demo-result-score-num{font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.demo-result-score-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;margin-top:2px;opacity:.85}
.demo-result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-result-stats > div{background:var(--bg-soft);padding:10px 14px;border-radius:10px;border:1px solid var(--line-soft)}
.demo-result-stats span{font-size:10.5px;font-weight:700;color:var(--ink-soft);display:block;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.demo-result-stats strong{color:var(--ink);font-weight:700;font-size:14px}
.demo-result-hook{
  background:var(--accent-soft);
  padding:14px 16px;border-radius:10px;
  font-size:14px;color:var(--ink-2);line-height:1.55;font-style:italic;
  border-left:3px solid var(--accent);
}
.demo-result-hook-label{
  font-size:10px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:6px;font-style:normal;display:block;
}

/* Error state */
.demo-error{
  background:#fef2f2;color:#991b1b;
  padding:14px 16px;border-radius:10px;
  font-size:14px;text-align:center;
  border:1px solid #fecaca;
}
.demo-retry{margin-top:10px;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline}

/* Audience cards */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
@media (max-width:900px){.audience{grid-template-columns:1fr;gap:18px}}
.who{
  padding:32px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-lg,16px);
  background:#fff;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
@media (prefers-reduced-motion: no-preference){
  .who:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,23,42,.08);border-color:var(--accent-border)}
}
.who-tag{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  font-size:11px;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;
  padding:5px 11px;background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:999px;
  margin-bottom:4px;
}
.who-h{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.25;margin:0}
.who-p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0}

/* Trust band */
.trust{padding:48px 0;background:#fff;border-top:1px solid var(--line)}
.trust-h{text-align:center;font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;font-weight:600}
.trust-row{display:flex;justify-content:center;gap:48px;align-items:center;flex-wrap:wrap}
.trust-item{font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.trust-item::before{content:"●";color:var(--accent);font-size:8px}

/* Comparison table */
.compare{padding:64px 0;background:#fff}
@media (max-width:768px){.compare{padding:48px 0}}
.compare-wrap{margin-top:32px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.compare-tbl{width:100%;min-width:760px;border-collapse:collapse;font-size:14px}
.compare-tbl th,.compare-tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.compare-tbl thead th{background:#fafbfc;font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--line)}
.compare-tbl thead th.us{background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(124,58,237,.08));color:var(--indigo-700)}
.compare-tbl tbody td:first-child{font-weight:600;color:var(--ink);width:30%}
.compare-tbl tbody td.us{background:rgba(79,70,229,.04);font-weight:500;color:var(--ink)}
.compare-tbl tr:last-child td{border-bottom:0}
.compare-yes{color:#059669;font-weight:700}
.compare-no{color:#94a3b8;font-weight:700}
.compare-meta{margin-top:16px;font-size:12px;color:var(--ink-soft);max-width:900px}
.compare-meta a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Compare table — row stagger reveal + hover + Borrowsignal column glow */
@media (prefers-reduced-motion: no-preference){
  .compare-tbl tbody tr{opacity:0;transform:translateX(-10px);transition:opacity .45s ease-out,transform .45s ease-out;transition-delay:0ms}
  .compare-tbl.in-view tbody tr{opacity:1;transform:translateX(0)}
  .compare-tbl.in-view tbody tr:nth-child(1){transition-delay:.05s}
  .compare-tbl.in-view tbody tr:nth-child(2){transition-delay:.10s}
  .compare-tbl.in-view tbody tr:nth-child(3){transition-delay:.15s}
  .compare-tbl.in-view tbody tr:nth-child(4){transition-delay:.20s}
  .compare-tbl.in-view tbody tr:nth-child(5){transition-delay:.25s}
  .compare-tbl.in-view tbody tr:nth-child(6){transition-delay:.30s}
  .compare-tbl.in-view tbody tr:nth-child(7){transition-delay:.35s}
  .compare-tbl.in-view tbody tr:nth-child(8){transition-delay:.40s}
  .compare-tbl.in-view tbody tr:nth-child(9){transition-delay:.45s}
  .compare-tbl.in-view tbody tr:nth-child(10){transition-delay:.50s}
  .compare-tbl.in-view tbody tr:nth-child(11){transition-delay:.55s}
  .compare-tbl.in-view tbody tr:nth-child(12){transition-delay:.60s}

  /* Row hover — subtle bg lift */
  .compare-tbl tbody tr{transition:background .2s ease,opacity .45s ease-out,transform .45s ease-out}
  .compare-tbl tbody tr:hover td{background:rgba(99,102,241,.03)}
  .compare-tbl tbody tr:hover td.us{background:rgba(99,102,241,.10)}

  /* Borrowsignal column header — soft pulse glow to draw eye */
  .compare-tbl thead th.us{position:relative;overflow:hidden}
  .compare-tbl thead th.us::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(closest-side at 50% 100%,rgba(99,102,241,.25),transparent 70%);
    animation:us-glow 3.4s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes us-glow{
    0%,100%{opacity:.5}
    50%{opacity:1}
  }
}

/* Pricing — clean white cards on soft bg, featured tier gradient border */
.pricing{background:var(--bg-soft)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
@media (max-width:900px){.price-grid{grid-template-columns:1fr;gap:18px}}
.plan{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg,16px);
  padding:36px 32px;
  display:flex;flex-direction:column;position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
@media (prefers-reduced-motion: no-preference){
  .plan:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,23,42,.08);border-color:var(--accent-border)}
}
/* Featured (middle) tier — gradient border via padding-box + border-box trick */
.plan.featured{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--gradient-brand) border-box;
  box-shadow:0 18px 44px rgba(99,102,241,.18);
}
@media (prefers-reduced-motion: no-preference){
  .plan.featured:hover{box-shadow:0 24px 56px rgba(99,102,241,.28);transform:translateY(-5px)}
}
.badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600}
.plan-name{font-size:14px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.plan-price{margin:16px 0;display:flex;align-items:baseline;gap:4px}
.plan-price .num{font-size:42px;font-weight:700;color:var(--ink)}
.plan-price .per{font-size:14px;color:var(--ink-soft)}
.plan-desc{font-size:14px;color:var(--ink-soft);margin-bottom:24px;min-height:60px;line-height:1.5}
.plan ul{list-style:none;flex:1;margin-bottom:24px}
.plan li{padding:8px 0;font-size:14px;color:var(--ink);display:flex;gap:8px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--emerald-500);font-weight:700;flex-shrink:0}
.plan .btn-cta,.plan .btn-ghost{justify-content:center;text-align:center;display:block;width:100%}
/* Ghost variant inside pricing cards (light bg) — borderlight inkonly */
.plan .btn-ghost{color:var(--ink);background:transparent;border:1px solid var(--line)}
.plan .btn-ghost:hover{background:var(--bg-soft);border-color:var(--ink-soft)}

/* FAQ — smooth expand/collapse + hover */
.faq{max-width:760px;margin:0 auto}
details{border-bottom:1px solid var(--line);transition:background .2s ease}
details summary{list-style:none;cursor:pointer;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);gap:16px;padding:20px 16px;margin:0 -16px;border-radius:10px;transition:background .2s ease,color .2s ease}
@media (prefers-reduced-motion: no-preference){
  details summary:hover{background:var(--accent-soft);color:var(--accent-dark,var(--indigo-700))}
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:24px;color:var(--ink-soft);transition:transform .25s ease,color .2s ease;flex-shrink:0;line-height:1;font-weight:300}
details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
details summary:hover::after{color:var(--accent)}
.details-body{overflow:hidden;will-change:height}
.details-body p{margin:0 16px 20px;color:var(--ink-soft);font-size:15px;line-height:1.65;padding-top:4px}

/* Final CTA — premium dark moment with radial gradient mesh */
.final-cta{position:relative;background:var(--ink);color:#fff;padding:96px 0;text-align:center;overflow:hidden;isolation:isolate}
.final-cta::before{
  content:"";position:absolute;inset:-20%;z-index:-1;filter:blur(60px);pointer-events:none;
  background:
    radial-gradient(50% 50% at 30% 50%,rgba(99,102,241,.35),transparent 70%),
    radial-gradient(40% 40% at 70% 50%,rgba(168,85,247,.28),transparent 70%);
}
.final-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent);
}
.final-cta h2{color:#fff;font-size:clamp(32px,4vw,52px);font-weight:700;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;max-width:780px;margin:0 auto 18px}
.final-cta p{color:rgba(255,255,255,.7);font-size:clamp(16px,1.4vw,19px);max-width:560px;margin:0 auto 32px;line-height:1.55}
.final-cta .btn-cta{background:var(--gradient-brand);color:#fff;box-shadow:0 16px 40px rgba(99,102,241,.5)}
.final-cta .btn-cta:hover{transform:translateY(-1px);box-shadow:0 22px 56px rgba(99,102,241,.6)}

/* Footer */
/* Footer — rich, multi-column, soft bg */
footer{padding:64px 0 40px;color:var(--ink-soft);font-size:14px;background:var(--bg-soft);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;gap:24px}}
.footer-col h4{font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{color:var(--ink-soft);transition:color .15s;font-size:14px}
.footer-col a:hover{color:var(--ink)}
.footer-trust{padding:24px 0;font-size:13px;color:var(--ink-soft);line-height:1.7;border-top:1px solid var(--line)}
.footer-trust strong{color:var(--ink);font-weight:700}
.footer-trust .pending{font-style:italic;color:var(--ink-soft)}
.footer-bottom{padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);flex-wrap:wrap;gap:12px}

/* === ROI Calculator === */
.roi-section{padding:64px 0;background:var(--bg-soft)}
.roi-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;margin-top:40px;align-items:start}
.roi-inputs,.roi-output{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg,18px);padding:28px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.roi-inputs h3{margin:0 0 22px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.roi-field{display:block;margin-bottom:22px}
.roi-field:last-child{margin-bottom:0}
.roi-label{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:6px}
.roi-helper{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;line-height:1.5}
.roi-input-wrap{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease;min-height:48px}
.roi-input-wrap:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.roi-input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 4px;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield;font-family:inherit}
.roi-input-wrap input::-webkit-outer-spin-button,.roi-input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.roi-prefix,.roi-suffix{padding:0 14px;font-size:16px;color:var(--ink-soft);font-weight:500;user-select:none}
.roi-segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#f1f5f9;border-radius:14px;padding:4px}
.roi-segmented button{appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:10px 6px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;border-radius:10px;transition:background .15s ease,color .15s ease,box-shadow .15s ease;min-height:54px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-family:inherit;line-height:1.15}
.roi-seg-sub{font-size:11.5px;font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.roi-segmented button:hover{color:var(--ink)}
.roi-segmented button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 0 rgba(15,23,42,.04)}
.roi-segmented button.active .roi-seg-sub{color:var(--ink)}
.roi-output{background:linear-gradient(180deg,#fff 0%,#fafbff 100%)}
.roi-output-header{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.roi-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed rgba(15,23,42,.07);gap:12px}
.roi-row-label{font-size:14px;color:var(--ink-soft);flex:1}
.roi-row-value{font-size:18px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.roi-row-cost .roi-row-value{color:#b91c1c}
.roi-row-revenue .roi-row-value{color:#047857}
.roi-divider{border:0;border-top:1px solid var(--line);margin:14px 0 6px}
.roi-row-net{border-bottom:0}
.roi-row-net .roi-row-label{font-weight:600;color:var(--ink);font-size:15px}
.roi-row-net .roi-row-value{font-size:24px;color:#047857;font-weight:700}
.roi-multiplier{margin:20px 0 14px;padding:18px 22px;border-radius:14px;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);color:#fff;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.roi-mult-num{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.roi-mult-text{font-size:13px;color:rgba(255,255,255,.92);letter-spacing:.01em;flex:1;min-width:140px}
.roi-breakeven{font-size:14px;color:var(--ink-soft);margin:0 0 22px;line-height:1.55}
.roi-breakeven b{color:var(--ink);font-weight:600}
.roi-cta{display:flex;width:100%;justify-content:center;text-align:center;margin-bottom:14px}
.roi-fine{font-size:12px;color:var(--ink-soft);margin:0;line-height:1.55}
@media (max-width:860px){
  .roi-grid{grid-template-columns:1fr;gap:20px}
  .roi-section{padding:48px 0}
  .roi-inputs,.roi-output{padding:22px 20px}
  .roi-mult-num{font-size:32px}
}
@media (max-width:480px){
  .roi-segmented button{font-size:12px}
  .roi-seg-sub{font-size:11px}
}

/* === Founder === */
.founder-section{padding:72px 0;background:#fff}
.founder-grid{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center;max-width:980px;margin:0 auto}
.founder-photo{border-radius:20px;overflow:hidden;box-shadow:0 12px 32px rgba(15,23,42,.1),0 2px 8px rgba(15,23,42,.05);background:#f1f5f9;aspect-ratio:4/5.85;position:relative}
.founder-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);pointer-events:none}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder-text .eyebrow{margin-bottom:10px}
.founder-text h2{font-size:clamp(24px,2.6vw,34px);line-height:1.22;margin:0 0 18px;letter-spacing:-.015em;text-wrap:balance}
.founder-text p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 14px;max-width:540px}
.founder-text p b{color:var(--ink);font-weight:600}
.founder-sign{font-size:14px !important;color:var(--ink) !important;font-weight:600;margin-top:18px !important}
@media (max-width:760px){
  .founder-section{padding:56px 0}
  .founder-grid{grid-template-columns:1fr;gap:32px;max-width:460px}
  .founder-photo{max-width:260px;margin:0 auto}
  .founder-text{text-align:center}
  .founder-text .eyebrow{margin-left:auto;margin-right:auto}
  .founder-text p{margin-left:auto;margin-right:auto}
}

/* Scroll-reveal — sections fade in + slide up as they enter viewport.
   Initial state hides via opacity+translate; IntersectionObserver script
   adds .in-view to trigger transition. Reduced-motion users skip the
   animation entirely. NoJS fallback: if `.no-js` is on <html>, opacity:1
   forced via separate rule below so sections are visible even if JS fails. */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease-out,transform .55s ease-out}
  .reveal.in-view{opacity:1;transform:translateY(0)}
}
/* NoJS / IntersectionObserver-fail fallback: render everything visible */
html.no-js .reveal,html.no-js .compare-tbl tbody tr,html.no-js .lead-card-stats > div,html.no-js .lead-card-hook{opacity:1 !important;transform:none !important}