/* TerraFab OS marketing site — For Lenders (/for-lenders).
   Source: HANDOVER-marketing-site.md §6.2 (structure/behaviour) +
   Lenders.dc.html (verbatim guarantee/flow/certRows data — the doc doesn't
   inline it for this page). No utility bar on this page, per doc §3.1's
   explicit exception list.

   The hero's coral-rule lead quote comes from the doc's hero spec rather
   than the prototype, which has no lead quote at all. Its wording is now
   set by the marketing claims ruling of 2026-08-23, not by the doc: the
   site does not describe TerraFab as releasing progress payments. */

.tf-lenders-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center;
  padding: 96px 0 72px;
}
.tf-lenders-hero__note { font-size: 15px; line-height: 1.6; color: var(--tf-body-faint); max-width: 54ch; margin: 0 0 36px; }
.tf-lenders-hero__panel {
  background: var(--tf-deep); border-radius: var(--tf-r-lg); padding: 40px; color: var(--tf-on-dark);
}
.tf-lenders-hero__panel-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
  color: var(--tf-coral); margin-bottom: 24px; text-transform: uppercase;
}
.tf-lenders-hero__guarantee {
  display: flex; gap: 16px; align-items: baseline; padding: 14px 0;
  border-top: 1px solid rgba(245,238,227,0.12);
}
.tf-lenders-hero__guarantee:first-of-type { border-top: none; }
.tf-lenders-hero__guarantee-check { color: var(--tf-coral); font-weight: 700; flex-shrink: 0; }
.tf-lenders-hero__guarantee-text { font-size: 15px; line-height: 1.5; color: rgba(245,238,227,0.85); }

/* ---- The drawdown model ------------------------------------------------- */
.tf-drawdown__intro { text-align: center; margin-bottom: 56px; }
.tf-drawdown__intro .tf-h2 { max-width: 26ch; margin: 0 auto; }
.tf-drawdown__flow { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.tf-drawdown__connector {
  position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: rgba(10,41,48,0.15);
}
.tf-drawdown__step { text-align: center; padding: 0 20px; position: relative; }
.tf-drawdown__disc {
  width: 54px; height: 54px; border-radius: 50%; background: var(--tf-ocean); color: var(--tf-sand);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px;
  position: relative; z-index: 1; border: 6px solid var(--tf-shell);
}
.tf-drawdown__step-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.tf-drawdown__step-body { font-size: 14px; line-height: 1.55; color: var(--tf-body-muted); margin: 0; }

.tf-escrow-callout {
  margin: 56px auto 0; max-width: 860px; background: rgba(46,83,57,0.08); border-radius: 10px;
  padding: 22px 28px; display: flex; gap: 18px; align-items: baseline;
}
.tf-escrow-callout__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--tf-palm); white-space: nowrap;
}
.tf-escrow-callout__text { font-size: 15px; line-height: 1.6; color: var(--tf-body); }

/* ---- Sample documentation ------------------------------------------------ */
.tf-sample-docs { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.tf-sample-docs__bullets { display: grid; gap: 14px; margin-bottom: 36px; }
.tf-sample-docs__bullet { display: flex; gap: 14px; align-items: baseline; }
.tf-sample-docs__bullet-arrow { color: var(--tf-coral); font-weight: 700; flex-shrink: 0; }
.tf-sample-docs__bullet-text { font-size: 15px; line-height: 1.55; color: rgba(22,33,31,0.8); }

.tf-cert-card { background: var(--tf-shell); border-radius: var(--tf-r-lg); box-shadow: var(--tf-shadow-lg); overflow: hidden; }
.tf-cert-card__header {
  background: var(--tf-deep); padding: 16px 28px; display: flex; justify-content: space-between; align-items: center;
}
.tf-cert-card__number { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: rgba(245,238,227,0.7); }
.tf-cert-card__sample { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--tf-coral); }
.tf-cert-card__body { padding: 32px 36px; }
.tf-cert-card__title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.tf-cert-card__meta {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--tf-body-faint);
  margin-bottom: 24px;
}
.tf-cert-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.tf-cert-card__stat { background: var(--tf-sand); border-radius: 10px; padding: 16px 18px; }
.tf-cert-card__stat-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--tf-body-faint);
  margin-bottom: 6px; text-transform: uppercase;
}
.tf-cert-card__stat-value { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; }
.tf-cert-card__stat-value--palm { color: var(--tf-palm); }
.tf-cert-card__rows { display: grid; gap: 10px; margin-bottom: 24px; }
.tf-cert-card__row {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-top: 1px solid var(--tf-line); font-size: 14px;
}
.tf-cert-card__row-item { color: rgba(22,33,31,0.8); }
.tf-cert-card__row-ref { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--tf-palm); white-space: nowrap; }
.tf-cert-card__signoff {
  display: flex; justify-content: space-between; align-items: center; background: rgba(46,83,57,0.08);
  border-radius: 10px; padding: 16px 20px;
}
.tf-cert-card__signoff-name { font-size: 14px; font-weight: 600; }
.tf-cert-card__signoff-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--tf-body-faint); margin-top: 3px; }
.tf-cert-card__avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--tf-ocean); color: var(--tf-sand);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; flex-shrink: 0;
}

/* Dedicated size for the closing-CTA heading -- smaller than the shared
   .tf-h2/.tf-cta-panel__title default (used as-is by Home/Contact's own
   CTA headings), scoped to this page only. */
.tf-lenders-cta-heading {
  font-size: 2.4rem;
  line-height: 1.15;
}

@media (max-width: 1099px) {
  .tf-lenders-hero, .tf-sample-docs { grid-template-columns: 1fr; }
  .tf-drawdown__flow { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .tf-drawdown__connector { display: none; }
  .tf-cert-card__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .tf-lenders-hero { padding: 56px 0 40px; }
  .tf-drawdown__flow { grid-template-columns: 1fr; }
  .tf-cert-card__body { padding: 24px; }
  .tf-cert-card__stats { grid-template-columns: 1fr; }
  .tf-cert-card__signoff { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* The label can't wrap, so as a flex row it starves the body text of width
     at phone sizes. Stack it instead — label above body, same order. */
  .tf-escrow-callout { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; }
}

@media (max-width: 768px) {
  .tf-lenders-cta-heading {
    font-size: 1.9rem;
    line-height: 1.2;
  }
}