/* ============================================================================
   FINNECT CAPITAL — PRODUCT DETAIL PAGES

   These pages are built from the components the rest of the site already uses
   (.sec-head, .frow, .fcard, .pcard, .flist, .faq). This file only adds the
   few pieces that did not exist yet, so the detail pages sit inside the
   existing design language rather than beside it.

   Deliberately NOT used here:
     • dark `.section navy` heroes — no other inner page opens dark
     • inline style overrides on .pcard / .prod-grid
   ========================================================================== */

/* ---- at-a-glance figures, light band under the intro -------------------- */
.pd-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 38px;
}
.pd-fact {
  background: #fff;
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--sh-xs);
}
.pd-fact .v {
  font-family: var(--ff-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.pd-fact .l {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.5;
}

/* ---- two-column "fit" panels -------------------------------------------- */
.pd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 940px;
  margin: 38px auto 0;
}
.pd-panel {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--sh-xs);
  border-left: 3px solid var(--line-dk);
}
.pd-panel.yes { border-left-color: var(--gold); }
.pd-panel.no  { border-left-color: var(--navy); }
.pd-panel h3 {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.pd-panel .flist li { font-size: 14px; }

/* ---- document checklist -------------------------------------------------- */
.pd-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 38px;
}
.pd-doc {
  background: var(--cream-dk);
  border-radius: 14px;
  padding: 24px;
}
.pd-doc h3 {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.pd-doc .flist li { font-size: 13.5px; }

/* ---- "where we add value" ------------------------------------------------ */
.pd-value { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.pd-value .pcard { text-align: left; }
.pd-value .pcard h3 { font-size: 17px; margin-top: 10px; }
.pd-value .pcard p { font-size: 13.5px; color: var(--slate); margin-top: 6px; line-height: 1.65 }

/* ---- closing call to action --------------------------------------------- */
.pd-cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.pd-cta h2 { font-size: clamp(23px, 2.8vw, 31px); color: var(--navy); }
.pd-cta p { color: var(--slate); margin-top: 12px; font-size: 15.5px; line-height: 1.7 }
.pd-cta .btn { margin-top: 24px }

@media (max-width: 900px) {
  .pd-facts { grid-template-columns: repeat(2, 1fr); }
  .pd-split, .pd-docs, .pd-value { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pd-facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pd-fact { padding: 16px 12px; }
  .pd-fact .v { font-size: 21px; }
  .pd-panel, .pd-doc { padding: 20px; }
}