/* Financing components. Namespaced apw-fin-*, reusable site-wide (blog first,
   /financing later). Visual DNA: white/mint surfaces, green accent, navy ink,
   the wallet+card+green-check "finance mark". */

:root {
  --fin-ink: #16263a;
  --fin-green: #0fa847;
  --fin-green-dk: #0c8c3c;
  --fin-mint: #e8f6ef;
  --fin-line: #e4efe8;
  --fin-muted: #76808c;
  --fin-surface: #ffffff;
  --fin-radius: 8px;
}

.post-content .apw-fin, .apw-fin { box-sizing: border-box; }
.apw-fin *, .apw-fin *::before, .apw-fin *::after { box-sizing: border-box; }

/* ── shared: mark, accent, buttons, citation, footnote ── */
.apw-fin-mark { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--fin-mint); display: inline-flex; align-items: center; justify-content: center; }
.apw-fin-mark svg { width: 24px; height: 24px; display: block; }
.apw-fin-mark--sm { width: 26px; height: 26px; }
.apw-fin-mark--sm svg { width: 18px; height: 18px; }
.apw-fin-accent { color: var(--fin-green); }

/* the blog theme underlines .post-content a — keep finance links/buttons clean */
.apw-fin a, .post-content .apw-fin a { text-decoration: none; }
.apw-fin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: .9rem; line-height: 1; border-radius: 6px; padding: 12px 18px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.apw-fin-btn i { font-size: .82rem; }
.apw-fin-btn--primary { background: var(--fin-green); color: #fff; }
.apw-fin-btn--primary:hover { background: var(--fin-green-dk); color: #fff; box-shadow: 0 4px 14px rgba(15, 157, 77, .28); }
.apw-fin-btn--block { width: 100%; }

.apw-fin-cite { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; color: var(--fin-muted); }
.apw-fin-cite-logo { height: 18px; width: auto; display: block; }
.apw-fin-cite--dark { color: #c5d0dc; }
.apw-fin-cite--dark .apw-fin-cite-logo { height: 20px; }

.apw-fin .apw-fin-foot { font-size: .7rem; color: var(--fin-muted); line-height: 1.45; margin: 2px 0 0; } /* beat .post-content p */

.apw-fin-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.apw-fin-facts li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--fin-ink); line-height: 1.35; }
.apw-fin-facts li i { color: var(--fin-green); margin-top: 3px; font-size: .8rem; }

/* ── F1 — ribbon ── */
.apw-fin-ribbon { display: flex; align-items: center; gap: 13px; background: var(--fin-surface); border: 1px solid var(--fin-line); border-radius: var(--fin-radius); padding: 12px 16px; margin: 1.5rem 0; }
.apw-fin-ribbon-text { display: flex; flex-direction: column; gap: 1px; padding-left: 15px; border-left: 1px solid var(--fin-line); }
.apw-fin-ribbon-head { font-size: 1rem; font-weight: 800; color: var(--fin-ink); line-height: 1.15; letter-spacing: -.01em; }
.apw-fin-ribbon-sub { display: flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--fin-muted); font-weight: 500; line-height: 1.4; }
.apw-fin-ribbon-sub svg { width: 15px; height: 15px; flex: 0 0 15px; }
.apw-fin-ribbon-cta { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--fin-green-dk); text-decoration: none; white-space: nowrap; }
.apw-fin-ribbon-cta:hover { color: var(--fin-green-dk); }
.apw-fin-ribbon-cta i { font-size: .72rem; }

/* ── F2 — floated payment card ── */
.apw-fin-card { display: flex; flex-direction: column; gap: 11px; background: #f7faf8; border: 1px solid var(--fin-line); border-radius: var(--fin-radius); padding: 18px 18px 15px; margin: 1.5rem 0; }
.apw-fin-card.apw-fin-float { float: right; width: min(20rem, 46%); margin: .35rem 0 1rem 1.4rem; }
.apw-fin-card-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fin-ink); }
.apw-fin-card-pay { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1px; }
.apw-fin-card-amt { font-size: 1.6rem; font-weight: 800; color: var(--fin-ink); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.apw-fin-card-from { font-size: .9rem; font-weight: 700; color: var(--fin-muted); margin-right: 4px; letter-spacing: 0; }
.apw-fin-card-mo { font-size: .85rem; font-weight: 700; color: var(--fin-muted); margin-left: 3px; }
.apw-fin-card-terms { font-size: .76rem; color: var(--fin-muted); }
.apw-fin-card .apw-fin-btn--block { margin-top: 3px; padding: 11px 16px; font-size: .88rem; }
.apw-fin-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--fin-ink); text-decoration: none; }
.apw-fin-readmore:hover { color: var(--fin-green-dk); }
.apw-fin-readmore i { font-size: .72rem; color: var(--fin-muted); }
.apw-fin-readmore:hover i { color: var(--fin-green-dk); }

/* ── F3 — full-width band (photo showcased in the centre, copy/CTA over navy ends) ──
   The scrim is opaque at both ends and clears in the middle, so the photo reads in
   the centre gap while the headline (left) and CTA (right) sit over solid navy. The
   copy is white with a soft shadow so it stays crisp where it grazes the photo. */
.apw-fin-band {
  position: relative; overflow: hidden; border-radius: 14px; margin: 1.75rem 0;
  padding: 26px 28px;
  background-color: #0b1522;
  isolation: isolate;
}
.apw-fin-band::before { /* the photo (filtered to harmonise with the navy) */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url(/img/coastal-palm-beach-house-windows-cost-1920c600.webp) center 46% / cover no-repeat;
  filter: saturate(.82) brightness(.74) contrast(1.03);
}
.apw-fin-band::after { /* scrim: opaque at both ends, clears mid → photo shows in the gap */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 150% at 6% -20%, rgba(46,76,112, .45), transparent 55%),
    linear-gradient(100deg,
      rgba(11,21,34, .96) 0%,
      rgba(11,21,34, .84) 27%,
      rgba(11,21,34, .34) 50%,
      rgba(11,21,34, .46) 73%,
      rgba(11,21,34, .94) 100%);
}
.apw-fin-band-row { display: flex; align-items: center; gap: 26px; }
.apw-fin-band-main { flex: 0 1 auto; min-width: 0; max-width: 47%; }
/* scoped under .apw-fin-band so they beat the theme's .post-content p/h3 (0-1-1) */
.apw-fin-band .apw-fin-band-head { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1.2; margin: 0; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.apw-fin-band .apw-fin-band-sub { font-size: .92rem; color: #fff; line-height: 1.5; margin: 6px 0 0; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.5); }
.apw-fin-band .apw-fin-band-foot { font-size: .7rem; color: #cdd6e1; line-height: 1.45; margin: 12px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.apw-fin-band-action { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.apw-fin-band .apw-fin-btn--primary { background: linear-gradient(180deg, #2b86ff 0%, #0a5fe6 100%); box-shadow: 0 6px 20px rgba(10,80,220,.45), inset 0 1px 0 rgba(255,255,255,.22); padding: 13px 24px; font-size: .92rem; }
.apw-fin-band .apw-fin-btn--primary:hover { background: linear-gradient(180deg, #1c79ff 0%, #0954d4 100%); box-shadow: 0 8px 26px rgba(10,80,220,.55); }

/* ── shared: eyebrow + footer row (F4 + F5) ── */
.apw-fin-steps-eyebrow { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .01em; color: var(--fin-green-dk); margin-bottom: 13px; }
.apw-fin-steps-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fin-line); }
.apw-fin-steps-foot .apw-fin-cite { margin-left: auto; }
/* table already has its own bordered wrapper — no divider before its CTAs */
.apw-fin-table-wrap .apw-fin-steps-foot { border-top: 0; padding-top: 0; }

/* ── F4 — how-it-works steps ── */
.apw-fin-steps { background: var(--fin-surface); border: 1px solid var(--fin-line); border-radius: var(--fin-radius); padding: 18px 20px; margin: 1.5rem 0; }
.apw-fin-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.apw-fin-step { display: flex; gap: 12px; align-items: flex-start; }
.apw-fin-step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--fin-mint); color: var(--fin-green-dk); font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.apw-fin-step-text { display: flex; flex-direction: column; gap: 3px; }
.apw-fin-steps .apw-fin-step-title { display: block; font-size: .92rem; font-weight: 800; color: var(--fin-ink); line-height: 1.25; }
.apw-fin-steps .apw-fin-step-sub { display: block; font-size: .82rem; color: var(--fin-muted); line-height: 1.4; }

/* ── F5 — financing-options compare table (matches the blog-product specs table) ── */
.apw-fin-table-wrap { margin: 1.75rem 0; }
.apw-fin-table-scroll { overflow-x: auto; border: 1px solid #e3e8ee; border-radius: 8px; }
.apw-fin-table-wrap .apw-fin-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-size: .86rem; background: #fff; border: 0; }
/* td bg paints over the theme's tr:nth-child zebra; hover (higher specificity) still wins */
.apw-fin-table-wrap th, .apw-fin-table-wrap td { padding: 13px 16px; text-align: left; border: 0; border-bottom: 1px solid #e3e8ee; vertical-align: middle; color: #16263a; background: #fff; }
.apw-fin-table-wrap thead th { background: #f6f8fb; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6b7b; white-space: nowrap; }
.apw-fin-table-wrap tbody tr:last-child td { border-bottom: 0; }
.apw-fin-table-wrap tbody tr:hover td { background: rgba(0, 87, 254, .025); }
.apw-fin-table-wrap .apw-fin-table-opt { font-weight: 700; white-space: nowrap; }
.apw-fin-table-via { display: block; font-weight: 500; font-size: .72rem; color: #5b6b7b; margin-top: 3px; white-space: nowrap; }
.apw-fin-table-logo { height: 13px; width: auto; vertical-align: middle; margin-left: 2px; }

/* ── responsive ── */
@media (max-width: 760px) {
  .apw-fin-card.apw-fin-float { float: none; width: auto; margin: 1.5rem 0; }
  .apw-fin-band-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .apw-fin-band-main { max-width: none; }
  .apw-fin-band::after { background: rgba(11,21,34,.88); } /* uniform dark so stacked text stays legible */
  .apw-fin-band-action { margin-left: 0; align-items: stretch; align-self: stretch; }
  .apw-fin-band-action .apw-fin-btn { width: 100%; }
  .apw-fin-band-action .apw-fin-cite { justify-content: center; }
  .apw-fin-steps-grid { grid-template-columns: 1fr; gap: 14px; }
  .apw-fin-steps-foot .apw-fin-cite { margin-left: 0; }
}
@media (max-width: 460px) {
  .apw-fin-ribbon { flex-wrap: wrap; }
  .apw-fin-ribbon-cta { margin-left: 0; }
}