/* ============================================================================
 * Ledger brand — its own identity, layered over the shared design tokens.
 * A calm but RICH sage/forest world: warm green-cream neutrals, a deep-forest
 * ink, coherent green-tinted shadows, and quiet depth on the surfaces that carry
 * the eye (brand mark, cards, primary action). Built on Kinlend's system but with
 * its own warmth so it reads as crafted, not templated. Loaded LAST so it wins.
 * ========================================================================== */
:root {
  /* --- Neutrals: warm green-cream, not cold clinical grey-green --- */
  --color-bg:           #F2F6EE;   /* page — soft warm sage cream */
  --color-surface:      #E6EFE4;   /* secondary surfaces */
  --color-card:         #FFFFFF;   /* cards */
  --color-text:         #14271C;   /* deep forest ink (warmer + richer than cold near-black) */
  --color-text-muted:   #54675B;   /* secondary text — AA on the cream */
  --color-border:       #D8E5DC;
  --color-line:         #D8E5DC;

  /* --- Green ramp: deeper + more dimensional than a single flat accent --- */
  --color-primary:      #2E7D5B;   /* matches the logo tile mid */
  --color-primary-deep: #1E5A41;   /* hover / pressed / deep accents */
  --color-accent:       #43A079;   /* the logo's light green — highlights, meters */
  --color-peach:        #DBEDE2;   /* mint tint: active nav, tracks, avatars */

  /* --- Status (kept legible on the cream) --- */
  --color-success:      #1F7A4D;
  --color-success-tint: #DCEFE3;

  /* --- Shadows: re-tinted GREEN so depth is coherent with the palette
         (the base tokens are warm-brown, which clashed on the green world) --- */
  --shadow-soft: 0 1px 2px rgba(20, 60, 42, 0.07);
  --shadow-card: 0 1px 2px rgba(20, 60, 42, 0.06), 0 6px 18px -6px rgba(20, 60, 42, 0.13);
  --shadow-lift: 0 2px 6px rgba(20, 60, 42, 0.08), 0 18px 40px -12px rgba(20, 60, 42, 0.22);
}

/* --- A soft green wash behind the top of the page, so the hero sits in light
       instead of on a flat field (kills the "empty white" feeling up top). --- */
body {
  background:
    radial-gradient(125% 72% at 50% -10%, #E5F1E6 0%, rgba(229, 241, 230, 0) 52%),
    var(--color-bg);
  background-repeat: no-repeat;
}

/* --- Brand mark: the logo tile gets real depth (gradient + inner highlight). --- */
.brand-mark {
  background: linear-gradient(145deg, #43A079, #1F5C42);
  box-shadow: 0 1px 2px rgba(20, 60, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* --- Header: clean, with a hairline and a faint frosted lift off the page. --- */
.app-header {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.15) blur(10px);
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  border-bottom: 1px solid var(--color-line);
}

/* --- Cards: a whisper of gradient + a layered shadow = crafted, not flat. --- */
.card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFEFB 100%);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

/* --- Primary action: the brand gradient, with a top highlight for dimension. --- */
.btn-primary {
  background: linear-gradient(145deg, #45A57E, #267356);
  border-color: #226B50;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 60, 42, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
  background: linear-gradient(145deg, #3D9774, #1F6347);
  border-color: #1F6347;
  box-shadow: var(--shadow-lift);
}

/* ============================ landing polish ============================ */

/* Hero: confident, deep-ink headline; a touch less dead space up top. */
.le-hero { padding-top: var(--space-6, 32px); }
.le-hero-title { color: var(--color-text); }
.le-hero-lead { color: var(--color-text-muted); }

/* The numbered "how it works" steps get the brand gradient chip. */
.le-step-num {
  background: linear-gradient(145deg, #43A079, #1F5C42);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 60, 42, 0.25);
}

/* Feature + demo cards lift gently on hover so the page feels alive. */
.le-feature, .le-demo {
  transition: transform var(--dur-base, 200ms) var(--ease-out, ease),
              box-shadow var(--dur-base, 200ms) var(--ease-out, ease);
}
.le-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Closing CTA: a soft green gradient panel instead of a flat tint. */
.le-cta-card {
  background: linear-gradient(160deg, #E8F3EB 0%, #D6EADE 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

/* The live-demo "owed / owes" pills, richer and more legible. */
.badge-verified { background: var(--color-success-tint); color: var(--color-success); }
.badge-owe { background: #F6E3DE; color: #A8442E; }

/* ===================== Bold hero: copy + live-demo device ===================== */
.le-home { max-width: 1040px; }            /* widen for the two-column hero */

.le-hero {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: var(--space-7, 48px) 0;
}

/* The brand's exchange arrows, oversized + barely-there, behind the hero. */
.le-hero-motif {
  position: absolute;
  top: -10%;
  right: -5%;
  width: min(480px, 56%);
  color: var(--color-primary);
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}
.le-hero-motif svg { width: 100%; height: auto; display: block; }

.le-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--space-7, 48px);
  align-items: center;
}

.le-hero-copy { text-align: left; }
.le-hero-copy .overline { color: var(--color-primary); }
.le-hero-title {
  text-align: left;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  margin: var(--space-2) 0 var(--space-4);
}
.le-hero-accent { color: var(--color-primary); }   /* identity color on the payoff phrase */
.le-hero-lead {
  text-align: left;
  margin: 0 0 var(--space-5);
  max-width: 32rem;
}
.le-hero-cta { justify-content: flex-start; }

/* The demo card, presented as an elevated "device" with a soft green glow. */
.le-hero-device { position: relative; }
.le-hero-device::before {
  content: "";
  position: absolute;
  inset: -12% -8% -8% -8%;
  background: radial-gradient(58% 50% at 62% 28%, rgba(67, 160, 121, 0.22), rgba(67, 160, 121, 0) 72%);
  z-index: 0;
  pointer-events: none;
}
.le-hero-device .le-demo {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: none;
  box-shadow: var(--shadow-lift);
}

/* Stack the hero on tablet/phone; recenter the copy. */
@media (max-width: 860px) {
  .le-hero { text-align: center; }
  .le-hero-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .le-hero-copy { text-align: center; }
  .le-hero-title { text-align: center; }
  .le-hero-lead { text-align: center; margin-left: auto; margin-right: auto; }
  .le-hero-cta { justify-content: center; }
  .le-hero-device .le-demo { margin: 0 auto; max-width: 560px; }
  .le-hero-motif { width: 72%; top: -4%; opacity: 0.045; }
}

/* ===================== in-app polish ===================== */

/* Group cards in the list lift on hover, like the landing feature cards. */
.loancard-link {
  transition: transform var(--dur-base, 200ms) var(--ease-out, ease),
              box-shadow var(--dur-base, 200ms) var(--ease-out, ease);
}
.loancard-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* Sign-in: a clean brand lockup with the new mark, on the soft green field. */
.signin-wordmark { font-weight: 600; letter-spacing: -0.01em; }