/* ==========================================================================
   Lendumine — Marketplace page ("A Marketplace Built Around Trust")
   The plain-language explanation of the model: what we do, what we don't,
   how money moves, what may and may not be shared, and how both sides are
   protected. Loaded only by marketplace.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — copy on the left, the end-to-end borrow flow on the right
   -------------------------------------------------------------------------- */
.mkt-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background:
    radial-gradient(55% 70% at 88% -10%, var(--color-accent) 0%, transparent 62%),
    radial-gradient(45% 55% at 0% 10%, #EAF1FA 0%, transparent 58%),
    var(--color-bg);
}
.mkt-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  /* Top-aligned, not centred: the flow card is much taller than the copy, and
     centring left the headline floating in the middle of the column. */
  align-items: start;
}
.mkt-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.mkt-hero__copy h1 { font-size: var(--text-h1); }
.mkt-hero__copy .t-lead { max-width: 44ch; }
.mkt-hero__tagline {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-teal-ink);
}

.flow {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
}
.flow__step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.flow__step + .flow__step { border-top: 1px solid var(--color-border); }
.flow__icon {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-teal-ink);
}
.flow__icon svg { width: 1.25rem; height: 1.25rem; }
.flow__label { font-weight: var(--weight-medium); color: var(--color-ink); }

@media (max-width: 900px) {
  .mkt-hero__inner { grid-template-columns: 1fr; }
  .mkt-hero__copy { max-width: none; }
}

/* --------------------------------------------------------------------------
   SCOPE — "What Lendumine Does" / "What Lendumine Does Not Do"
   -------------------------------------------------------------------------- */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .scope { grid-template-columns: 1fr; } }

.scope__panel {
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.scope__panel--do   { background: linear-gradient(180deg, var(--color-bg-elevated), #F3FBF8); }
.scope__panel--dont { background: linear-gradient(180deg, var(--color-bg-elevated), #FDF6F6); }

.scope__head { display: flex; align-items: center; gap: var(--space-3); }
.scope__head h2 { font-size: var(--text-h4); }
.scope__head svg { width: 1.5rem; height: 1.5rem; flex: none; }
.scope__panel--do   .scope__head svg { color: var(--color-success); }
.scope__panel--dont .scope__head svg { color: var(--color-danger); }

.scope__lede { font-weight: var(--weight-semibold); color: var(--color-ink); }
.scope__sub  { font-size: var(--text-sm); color: var(--color-ink-secondary); }

.scope__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.scope__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-ink-secondary); font-size: var(--text-sm); }
.scope__list svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 3px; color: var(--color-success); }
.scope__list--dont svg { color: var(--color-danger); }

/* Two-up lists inside the "does not" panel */
.scope__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); }
@media (max-width: 460px) { .scope__cols { grid-template-columns: 1fr; } }
.scope__cols .scope__list { gap: var(--space-2); }

.scope__rule { height: 1px; background: var(--color-border); border: 0; }
.scope__note { font-size: var(--text-sm); color: var(--color-ink-secondary); }

/* --------------------------------------------------------------------------
   PAYMENTS — borrower → Stripe → distribute → lender / Lendumine
   -------------------------------------------------------------------------- */
.pay {
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: center;
  gap: var(--space-4);
}
.pay__node {
  flex: 1 1 150px; max-width: 200px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2);
}
.pay__disc {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-teal-ink);
  box-shadow: var(--shadow-xs);
}
.pay__disc svg { width: 32px; height: 32px; }
.pay__disc--stripe { background: #E4EFF9; }
.pay__stripe {
  font-size: 1.05rem; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: #635BFF;                     /* Stripe brand purple */
}
.pay__name { font-weight: var(--weight-semibold); color: var(--color-secondary); }
.pay__text { font-size: var(--text-sm); color: var(--color-ink-secondary); }
.pay__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 12px;
  color: var(--color-neutral-400);
}
.pay__arrow svg { width: 1.5rem; height: 1.5rem; }
@media (max-width: 900px) { .pay__arrow { display: none; } .pay__node { flex-basis: 40%; } }

.pay__note {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-info-bg);
  color: var(--color-ink-secondary);
  font-size: var(--text-sm);
  text-align: center;
}
.pay__note svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-primary); }
.pay__processor { margin-top: var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--color-ink-muted); }

/* --------------------------------------------------------------------------
   SHARING RULES — what can / cannot be listed
   -------------------------------------------------------------------------- */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .rules { grid-template-columns: 1fr; } }
.rules__col { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.rules__col h2 { font-size: var(--text-h3); text-align: center; }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  min-height: 118px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-ink-secondary);
  line-height: 1.35;
}
.cat svg { width: 26px; height: 26px; flex: none; color: var(--color-teal-ink); }

.cat--no { border-color: #F3D9D9; background: #FEFAFA; color: var(--color-ink-secondary); }
.cat--no svg { color: var(--color-danger); }

/* Pinned to the bottom of its column so it lines up with the taller "cannot
   be shared" banner opposite instead of leaving a ragged hole beneath it. */
.rules__more { margin-top: auto; text-align: center; font-size: var(--text-sm); color: var(--color-ink-muted); }

.rules__banner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-danger-bg);
  border: 1px solid #F3D9D9;
  text-align: center;
}
.rules__banner strong { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-danger); font-size: var(--text-sm); }
.rules__banner strong svg { width: 1.05rem; height: 1.05rem; }
.rules__banner p { font-size: var(--text-sm); color: var(--color-ink-secondary); }

/* --------------------------------------------------------------------------
   TRUST STRIP — the safeguards behind every borrow
   -------------------------------------------------------------------------- */
.safeguards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-5) var(--space-4);
}
.safeguard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.safeguard__ring {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-accent-strong);
  background: var(--color-bg-elevated);
  color: var(--color-teal-ink);
  box-shadow: var(--shadow-xs);
}
.safeguard__ring svg { width: 26px; height: 26px; }
.safeguard span { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-ink-secondary); max-width: 14ch; }

/* --------------------------------------------------------------------------
   PROTECTION — borrowers / lenders / disputes
   -------------------------------------------------------------------------- */
.protect { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
@media (max-width: 980px) { .protect { grid-template-columns: 1fr; } }

.protect__card {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}
.protect__icon {
  grid-row: span 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-teal-ink);
}
.protect__icon svg { width: 22px; height: 22px; }
.protect__card h3 { font-size: var(--text-base); color: var(--color-primary); align-self: center; }
.protect__card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.protect__card li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-secondary); }
.protect__card li svg { width: 1rem; height: 1rem; flex: none; margin-top: 3px; color: var(--color-success); }

.protect__steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: step; }
.protect__steps li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-ink-secondary); }
.protect__steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-teal-ink);
  font-size: 0.7rem; font-weight: var(--weight-bold);
}
.protect__intro { font-size: var(--text-sm); color: var(--color-ink-secondary); margin-bottom: var(--space-1); }

/* --------------------------------------------------------------------------
   MISSION + CTA
   -------------------------------------------------------------------------- */
.mission {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(140deg, var(--color-bg-elevated), var(--color-accent));
}
@media (max-width: 860px) { .mission { grid-template-columns: 1fr; } }
.mission__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.mission__copy h2 { font-size: var(--text-h2); }
.mission__aside {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
}
.mission__aside h3 { font-size: var(--text-h3); }
.mission__aside p { color: var(--color-ink-secondary); }
.mission__quiet { color: var(--color-ink-secondary); line-height: var(--leading-relaxed); }
.mission__quiet b { color: var(--color-secondary); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   PLATFORM DISCLAIMER
   -------------------------------------------------------------------------- */
.disclaimer {
  display: flex; gap: var(--space-4); align-items: flex-start;
  max-width: 900px; margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border);
}
.disclaimer svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--color-primary); margin-top: 2px; }
.disclaimer p { font-size: var(--text-sm); color: var(--color-ink-secondary); line-height: var(--leading-relaxed); }