/* ============================================================
   Finance Partner - public landing page

   Palette and treatment follow the finance home page
   (components/finance/FinanceHomeRedesign.tsx, the .fhr sheet), so
   /finance-partner and / read as one product.

   Tokens are read out of the shipping stylesheets, not invented:
     public/css/finance-pages.css  --fp-green #83ffc0, --fp-green-pale #edfff5,
                                   --fp-dark #143A21, --fp-text #434343,
                                   --fp-border #e8e8e8, hover #aaffce
     public/css/styles.css         --bs-primary #E3FDEE

   This sheet previously used Tailwind's emerald ramp (#10b981 / #059669 /
   #047857 / #6ee7b7 / #34d399 / #a7f3d0) plus a non-brand dark green
   (#0f3d2c, #0e1b16, #064e3b). None of those are EasyAsset colours - they
   came from the design comp. Same class of stray the finance home page
   called out and removed for #0f7a47.

   The rule carried over from .fhr: greens reduce to ONE accent. Mint
   (#83ffc0) does every fill - buttons, icon tiles, progress, banner. Copy is
   ink (#434343), never a second and third green. Pure mint as *text* on white
   is ~1.4:1, so text and glyphs that need contrast use --fpl-mint-deeper.
   ============================================================ */
:root {
    --fpl-ink: #434343;          /* --fp-text / --bs-dark - headings and copy */
    --fpl-body: #434343;         /* one ink for all copy, as .fhr does */
    --fpl-muted: #6b7280;        /* labels + captions. The old #8a93a3 measured
                                    3.1:1 on white and failed WCAG AA; this is
                                    the same 4.62:1 grey .fhr moved to. */
    --fpl-mint: #83ffc0;         /* --fp-green - every fill */
    --fpl-mint-hover: #aaffce;   /* finance-pages hover */
    --fpl-mint-soft: #E3FDEE;    /* --bs-primary */
    --fpl-mint-pale: #edfff5;    /* --fp-green-pale - chips, pills, row tint */
    --fpl-mint-deep: #1a9960;    /* figures on white */
    --fpl-mint-deeper: #1a7a4a;  /* small text, links, glyphs - AA on white */
    --fpl-forest: #143A21;       /* --fp-dark */
    --fpl-forest-3: #0d2716;
    --fpl-bg-alt: #fafafa;
    --fpl-border: #e8e8e8;       /* --fp-border */
    --fpl-card-shadow: 0 1px 2px rgba(20,58,33,.04), 0 8px 24px rgba(20,58,33,.05);
    /* Display face for headings and buttons. The whole partner portal is
       proxima-nova — the finance home page's Sora is deliberately NOT carried
       over here, so /finance-partner matches the rest of the portal rather
       than the marketing site. Kept as a token so the display face is set in
       one place if that ever changes. */
    --fpl-display: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.fpl { color: var(--fpl-body); font-size: 16px; line-height: 1.6; overflow-x: hidden;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.fpl * { box-sizing: border-box; }
/* Match the EasyAsset nav container (1240px, centred, flush with the logo) */
.fpl-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1280px) { .fpl-container { padding: 0; } }
.fpl-section { padding: 84px 0; }
.fpl-section.alt { background: var(--fpl-bg-alt); }
.fpl :focus-visible { outline: 2px solid var(--fpl-mint-deeper); outline-offset: 2px; border-radius: 4px; }

/* Headings */
.fpl h1, .fpl h2, .fpl h3 { color: var(--fpl-ink); margin: 0; font-family: var(--fpl-display);
    font-weight: 800; letter-spacing: -.035em; }
.fpl-h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.fpl-lead { font-size: 18px; color: var(--fpl-muted); max-width: 760px; margin: 18px auto 0; }
.fpl-center { text-align: center; }

/* Buttons - pills, flat fills, no gradients or glow (matches .fhr-btn) */
.fpl-btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    font-family: var(--fpl-display);
    font-size: 15px; font-weight: 700; border-radius: 999px; padding: 13px 24px;
    text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.fpl-btn-primary { background: var(--fpl-mint); color: var(--fpl-ink); }
.fpl-btn-primary:hover { background: var(--fpl-mint-hover); color: var(--fpl-ink); }
.fpl-btn-primary:disabled { background: #e6ece9; color: #9aa8a0; cursor: not-allowed; }
.fpl-btn-outline { background: #fff; border-color: var(--fpl-border); color: var(--fpl-ink); }
.fpl-btn-outline:hover { border-color: var(--fpl-mint); color: var(--fpl-ink); }
.fpl-btn-dark { background: var(--fpl-forest); color: #fff; }
.fpl-btn-dark:hover { background: var(--fpl-forest-3); color: #fff; }
.fpl-link-arrow { color: var(--fpl-forest); font-weight: 700; text-decoration: none; font-size: 15px; }
.fpl-link-arrow:hover { color: var(--fpl-forest-3); }

/* ---------- Hero ---------- */
.fpl-hero { padding: 34px 0 46px; position: relative; }
.fpl-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* 1.3, not 1.05: the mint highlight block below paints the text's em box
   (~1.16em tall), so at 1.05 the block was taller than its own line and
   collided with the line above it. */
.fpl-hero h1 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.38; letter-spacing: -.04em; }
/* Solid mint block behind the accent phrase, as .fhr-accent does. The old
   gradient-clipped emerald text rendered the phrase at roughly 1.6:1 on white.
   box-decoration-break keeps the block following the text across a wrap
   instead of drawing one rectangle around both lines. */
.fpl-hero h1 .grn {
    background: var(--fpl-mint); color: var(--fpl-ink);
    padding: 0 10px; border-radius: 4px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fpl-hero-sub { font-size: 16.5px; color: var(--fpl-muted); margin: 16px 0 16px; max-width: 520px; }
.fpl-checklist { list-style: none; padding: 0; margin: 0 0 20px; }
.fpl-checklist li { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--fpl-ink); font-weight: 500; font-size: 15px; }

/* Ticks are a mint disc with an ink glyph - the same icon-badge gesture as
   .fpl-itile, so they read as the brand accent. They were solid dark-green
   circles (#1a7a4a), which is a text colour from the palette, not a fill, and
   sat outside the theme next to everything else on the page. */
.fpl-checklist li i,
.fpl-tier-feats li i {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--fpl-mint);
    color: var(--fpl-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}
.fpl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Portal mockup card (hero right) */
.fpl-mock {
    background: #fff; border: 1px solid var(--fpl-border); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20,58,33,.12); overflow: hidden;
}
.fpl-mock-bar { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--fpl-border); }
.fpl-mock-dots { display: flex; gap: 6px; }
.fpl-mock-dots span { width: 10px; height: 10px; border-radius: 50%; }
.fpl-mock-title { font-size: 12.5px; color: var(--fpl-muted); font-weight: 600; }
.fpl-mock-body { padding: 16px; }
.fpl-mock-tier { background: var(--fpl-forest); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.fpl-mock-tier .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--fpl-mint); display: grid; place-items: center; color: var(--fpl-ink); font-size: 18px; }
.fpl-mock-tier .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(131,255,192,.75); }
.fpl-mock-tier .val { font-size: 14px; color: #fff; font-weight: 700; }
.fpl-mock-tier .chip { margin-left: auto; background: rgba(131,255,192,.16); color: var(--fpl-mint); font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 999px; }
.fpl-mock-prog { background: var(--fpl-bg-alt); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.fpl-mock-prog .top { display: flex; justify-content: space-between; font-size: 12px; color: var(--fpl-body); margin-bottom: 8px; }
.fpl-mock-prog .track { height: 7px; background: var(--fpl-border); border-radius: 99px; overflow: hidden; }
.fpl-mock-prog .fill { height: 100%; width: 80%; background: var(--fpl-mint); border-radius: 99px; }
.fpl-mock-prog .note { font-size: 11.5px; color: var(--fpl-muted); margin-top: 8px; }
.fpl-mock-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 12px; }
.fpl-mock-stat { border: 1px solid var(--fpl-border); border-radius: 10px; padding: 10px; }
.fpl-mock-stat .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--fpl-muted); }
.fpl-mock-stat .v { font-family: var(--fpl-display); font-size: 16px; font-weight: 800; color: var(--fpl-ink); margin-top: 3px; }
.fpl-mock-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fpl-mock-chips span { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--fpl-mint-pale); color: var(--fpl-ink); display: inline-flex; align-items: center; gap: 5px; }
.fpl-mock-deal { display: flex; align-items: center; gap: 12px; margin-top: 12px; border: 1px solid var(--fpl-border); border-radius: 12px; padding: 12px 14px; }
.fpl-mock-deal .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--fpl-mint); color: var(--fpl-ink); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.fpl-mock-deal .k { font-size: 11px; color: var(--fpl-muted); }
.fpl-mock-deal .v { font-size: 13.5px; font-weight: 700; color: var(--fpl-ink); }
.fpl-mock-deal .track-pill { margin-left: auto; background: var(--fpl-forest); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.fpl-mock-cap { text-align: center; font-size: 12px; color: var(--fpl-muted); margin-top: 12px; }

/* ---------- Google rating (hero) ----------
   Replaces the old full reviews section. Mirrors .fhr-hero-rating on the
   finance home page: no border or fill, the mark + score + stars on one line
   inside a single link out to the real reviews. ea-style.min.css fades every
   <a> on hover, so opacity is pinned - nothing moves or recolours. */
.fpl-hero-rating { margin-top: 26px; display: inline-flex; align-items: center; gap: 9px; width: max-content; text-decoration: none; }
.fpl-hero-rating:hover, .fpl-hero-rating:focus { opacity: 1; text-decoration: none; }
.fpl-hero-rating:focus-visible { outline: 2px solid var(--fpl-mint-deep); outline-offset: 4px; border-radius: 6px; }
.fpl-g { display: block; width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.fpl-hero-rating b { font-weight: 800; font-size: 18px; color: var(--fpl-ink); font-variant-numeric: tabular-nums; line-height: 1; }
/* Brand mint rather than the conventional amber, matching .fhr-hero-rating on
   the finance home page. */
.fpl-stars { color: var(--fpl-mint); letter-spacing: 1px; }
.fpl-hero-rating .fpl-stars { font-size: 16px; letter-spacing: 2px; }

/* ---------- Icon cards (About / Flow / Widget) ---------- */
.fpl-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 46px; }
.fpl-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.fpl-icard { background: #fff; border: 1px solid var(--fpl-border); border-radius: 16px; padding: 24px; box-shadow: var(--fpl-card-shadow); }
/* Mint tile, ink glyph - the .fhr-badge treatment. */
.fpl-itile { width: 46px; height: 46px; border-radius: 12px; background: var(--fpl-mint); color: var(--fpl-ink); display: grid; place-items: center; font-size: 20px; margin-bottom: 16px; }
.fpl-icard h3 { font-size: 17px; margin-bottom: 8px; }
.fpl-icard p { font-size: 14px; color: var(--fpl-body); margin: 0; }

/* numbered flow - a pale ghost figure, not a second green */
.fpl-flow-card { position: relative; }
.fpl-flow-num { position: absolute; top: 20px; right: 22px; font-family: var(--fpl-display); font-size: 38px; font-weight: 800; color: var(--fpl-mint-soft); line-height: 1; }

/* ---------- Feature cards (Portal features) ----------
   Line-art wells instead of photography. The finance home page draws mint on
   forest; this draws forest on pale mint, so the two read as one family without
   looking like the same section. A fixed 88px well (was a 16/10 photo, ~200px
   at this column width) is what takes the height out of the card. */
.fpl-fcard { background: #fff; border: 1px solid var(--fpl-border); border-radius: 14px; overflow: hidden; box-shadow: var(--fpl-card-shadow); }
.fpl-well {
    position: relative; height: 72px; overflow: hidden;
    background: linear-gradient(160deg, var(--fpl-mint-pale) 0%, var(--fpl-mint-soft) 100%);
    border-bottom: 1px solid var(--fpl-border);
}
/* The art is inset rather than bled to the edges - it stops the badge sitting
   on top of the drawing and gives the well some quiet space. */
.fpl-well-art { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px 14px 6px 52px; opacity: .7; }
.fpl-well-badge {
    position: absolute; top: 9px; left: 11px; z-index: 2;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--fpl-mint); color: var(--fpl-ink);
    display: grid; place-items: center; font-size: 13px;
}
.fpl-fcard-body { padding: 13px 15px 15px; }
.fpl-fcard-body h3 { font-size: 14.5px; margin-bottom: 4px; }
.fpl-fcard-body p { font-size: 12.5px; color: var(--fpl-body); margin: 0; line-height: 1.5; }
/* Slightly tighter grid than the icon cards - six small cards in two rows. */
.fpl-grid-3.fpl-grid-feats { gap: 18px; margin-top: 36px; }

/* ---------- Commission tiers ---------- */
.fpl-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; align-items: stretch; }
/* No "most popular" flag or emphasised card - the three tiers are presented
   evenly and the rate itself does the differentiating. */
.fpl-tier { position: relative; background: #fff; border: 1px solid var(--fpl-border); border-radius: 18px; padding: 26px; box-shadow: var(--fpl-card-shadow); display: flex; flex-direction: column; }
.fpl-tier-top { display: flex; align-items: flex-start; justify-content: space-between; }
/* "Mint means a figure" - the rate is the card's headline number. */
.fpl-tier-pct { font-family: var(--fpl-display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; color: var(--fpl-forest); font-variant-numeric: tabular-nums; }
.fpl-tier h3 { font-size: 20px; margin-top: 14px; }
.fpl-tier-sub { font-family: var(--fpl-display); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fpl-forest); margin-top: 4px; }
.fpl-tier-desc { font-size: 13.5px; color: var(--fpl-body); margin: 12px 0 14px; }
.fpl-tier-feats { list-style: none; padding: 0; margin: 0 0 4px; }
.fpl-tier-feats li { display: flex; gap: 9px; align-items: center; font-size: 13.5px; color: var(--fpl-ink); padding: 6px 0; }

/* comparison table */
.fpl-table-wrap { margin-top: 40px; border: 1px solid var(--fpl-border); border-radius: 16px; overflow: hidden; box-shadow: var(--fpl-card-shadow); background: #fff; }
.fpl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fpl-table thead th { background: var(--fpl-forest); color: #fff; text-align: left; padding: 15px 18px; font-family: var(--fpl-display); font-weight: 700; font-size: 13.5px; }
.fpl-table tbody td { padding: 16px 18px; border-top: 1px solid var(--fpl-border); color: var(--fpl-body); vertical-align: top; }
.fpl-table .tier-name { font-weight: 800; color: var(--fpl-ink); }
.fpl-table .tier-rate { font-weight: 800; color: var(--fpl-forest); }
.fpl-disclaimer { font-size: 12.5px; color: var(--fpl-muted); margin-top: 18px; max-width: 760px; }

/* ---------- Widget section ----------
   The preview is a picture of a PARTNER'S website, not a form on ours: browser
   chrome, the partner's own nav and product page, and the EasyAsset block
   embedded inside it. Everything is inert markup - no inputs, no links - so it
   never reads as something to fill in here. */
.fpl-browser {
    margin: 40px auto 0; max-width: 880px;
    background: #fff; border: 1px solid var(--fpl-border); border-radius: 14px;
    overflow: hidden; box-shadow: 0 22px 60px rgba(20,58,33,.13);
}
.fpl-browser-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: #f4f6f5; border-bottom: 1px solid var(--fpl-border); }
.fpl-browser-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.fpl-browser-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d7ded9; display: block; }
.fpl-browser-url { flex: 1; background: #fff; border: 1px solid var(--fpl-border); border-radius: 999px; padding: 5px 14px; font-size: 12px; color: var(--fpl-muted); }
.fpl-browser-url i { font-size: 9px; margin-right: 5px; opacity: .6; }
.fpl-browser-page { padding: 0 0 24px; }

/* the partner's own page furniture - deliberately plain and grey so the
   EasyAsset block below is obviously the embedded part */
.fpl-site-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid #f1f3f2; }
.fpl-site-logo { font-weight: 800; font-size: 14px; color: #9aa8a0; letter-spacing: -.01em; }
.fpl-site-links { display: flex; gap: 10px; }
.fpl-site-links i { width: 34px; height: 7px; border-radius: 99px; background: #eef1ef; display: block; }

.fpl-prod { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding: 24px 24px 0; align-items: start; }
.fpl-prod-img { background: #f6f8f7; border: 1px solid #f1f3f2; border-radius: 10px; aspect-ratio: 4/3; display: grid; place-items: center; }
.fpl-prod-img svg { width: 78%; height: 78%; }
.fpl-prod-crumb { font-size: 11.5px; color: #9aa8a0; margin-bottom: 7px; }
.fpl-prod-title { font-size: 18px; font-weight: 800; color: var(--fpl-ink); letter-spacing: -.02em; }
.fpl-prod-price { font-size: 24px; font-weight: 800; color: var(--fpl-ink); margin-top: 8px; letter-spacing: -.03em; }
.fpl-prod-price span { font-size: 12.5px; font-weight: 600; color: #9aa8a0; margin-left: 4px; }
.fpl-prod-btns { display: flex; gap: 9px; margin-top: 14px; }
.fpl-prod-btn { font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 7px; background: #434343; color: #fff; }
.fpl-prod-btn.ghost { background: #fff; color: #9aa8a0; border: 1px solid var(--fpl-border); }

/* the embedded EasyAsset widget */
.fpl-embed {
    display: flex; align-items: center; gap: 12px; margin-top: 18px;
    background: var(--fpl-mint-pale); border: 1px solid var(--fpl-mint);
    border-radius: 10px; padding: 12px 14px;
}
.fpl-embed-badge { flex: 0 0 auto; background: var(--fpl-mint); color: var(--fpl-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 5px 9px; border-radius: 5px; }
.fpl-embed-t1 { font-size: 13.5px; color: var(--fpl-ink); font-weight: 600; }
.fpl-embed-t1 b { font-weight: 800; }
.fpl-embed-t2 { font-size: 12.5px; font-weight: 700; color: var(--fpl-forest); margin-top: 2px; }
.fpl-browser-cap { text-align: center; font-size: 12px; color: var(--fpl-muted); margin: 12px 0 0; }

/* three points, full width under the preview - they read as a cramped column
   when stacked beside it */
.fpl-widget-points { margin-top: 42px; }
.fpl-mini { background: #fff; border: 1px solid var(--fpl-border); border-radius: 14px; padding: 18px; box-shadow: var(--fpl-card-shadow); }
.fpl-mini .fpl-itile { width: 38px; height: 38px; font-size: 17px; margin-bottom: 12px; }
.fpl-mini h3 { font-size: 15px; margin-bottom: 6px; }
.fpl-mini p { font-size: 13px; margin: 0; color: var(--fpl-body); }

.fpl-field label { display: block; font-size: 12px; color: var(--fpl-muted); margin-bottom: 5px; }
.fpl-field input, .fpl-field select, .fpl-field textarea {
    width: 100%; border: 1px solid var(--fpl-border); border-radius: 9px; padding: 10px 12px;
    font-size: 13.5px; color: var(--fpl-ink); background: #fff; font-family: inherit;
}
.fpl-field input:focus, .fpl-field select:focus, .fpl-field textarea:focus {
    outline: none; border-color: var(--fpl-mint-deep); box-shadow: 0 0 0 3px var(--fpl-mint-pale);
}
/* mint CTA banner - one flat fill, ink copy */
.fpl-cta-banner {
    margin-top: 40px; border-radius: 18px; padding: 30px 34px;
    background: var(--fpl-mint);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.fpl-cta-banner h3 { color: var(--fpl-ink); font-size: 22px; }
.fpl-cta-banner p { color: var(--fpl-ink); margin: 6px 0 0; font-size: 14.5px; max-width: 560px; }

/* ---------- Apply ---------- */
.fpl-apply-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; margin-top: 30px; }
.fpl-form-card { background: #fff; border: 1px solid var(--fpl-border); border-radius: 18px; padding: 28px; box-shadow: var(--fpl-card-shadow); }
.fpl-form-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fpl-form-card .fpl-field.full { grid-column: 1 / -1; }

/* ---------- FAQ ---------- */
.fpl-faq { max-width: 820px; margin: 44px auto 0; background: #fff; border: 1px solid var(--fpl-border); border-radius: 16px; box-shadow: var(--fpl-card-shadow); overflow: hidden; }
.fpl-faq-item { border-bottom: 1px solid var(--fpl-border); }
.fpl-faq-item:last-child { border-bottom: none; }
.fpl-faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 22px; font-size: 15.5px; font-weight: 600; color: var(--fpl-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fpl-faq-q i { color: var(--fpl-muted); transition: transform .2s ease; flex-shrink: 0; }
.fpl-faq-item.open .fpl-faq-q i { transform: rotate(180deg); }
.fpl-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.fpl-faq-a-inner { padding: 0 22px 20px; font-size: 14.5px; color: var(--fpl-body); line-height: 1.65; }
.fpl-faq-item.open .fpl-faq-a { max-height: 320px; }

/* ---------- Book-a-call overlay ----------
   Mirrors .fhr-bk-* on the finance home page. Inset from the top by the fixed
   marketing nav's height so the nav stays visible and the overlay never looks
   like it has swallowed the page. The landing page reserves 80px for that nav
   (see the inline body padding in page.tsx). */
.fpl-bk-overlay {
    position: fixed; inset: 80px 0 0 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    /* Blur only, no tint. A colour here reads as a green wash over the page;
       the modal's own shadow is what separates it from the background. */
    background: transparent;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fplBkIn .18s ease;
}
@keyframes fplBkIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .fpl-bk-overlay { animation: none } }

.fpl-bk-modal {
    position: relative; width: min(760px, 100%); height: min(760px, 100%);
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.55);
}
.fpl-bk-frame { display: block; width: 100%; height: 100%; border: 0; transition: opacity .2s ease; }

/* Sits behind the frame rather than beside it, so nothing reflows when the
   frame fades in over the top. */
.fpl-bk-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; background: #fff;
}
.fpl-bk-loading p { margin: 0; font-size: 13.5px; color: var(--fpl-muted); }
.fpl-bk-spin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--fpl-mint-pale); border-top-color: var(--fpl-mint-deep);
    animation: fplBkSpin .7s linear infinite;
}
@keyframes fplBkSpin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .fpl-bk-spin { animation-duration: 2s } }

.fpl-bk-close {
    position: absolute; top: 10px; right: 12px; z-index: 1; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid var(--fpl-border); background: #fff;
    color: var(--fpl-ink); font-size: 21px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.fpl-bk-close:hover { background: var(--fpl-bg-alt); }
.fpl-bk-close:focus-visible { outline: 2px solid var(--fpl-mint-deep); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .fpl-hero-grid, .fpl-apply-grid { grid-template-columns: 1fr; gap: 36px; }
    .fpl-grid-4 { grid-template-columns: 1fr 1fr; }
    .fpl-tiers, .fpl-grid-3 { grid-template-columns: 1fr; }
    /* Feature cards stay two-up on tablet - they're small enough now. */
    .fpl-grid-3.fpl-grid-feats { grid-template-columns: 1fr 1fr; }
    .fpl-hero { padding: 40px 0 60px; }
    .fpl-section { padding: 60px 0; }
    /* The marketing nav shrinks to 70px below this width. */
    .fpl-bk-overlay { inset: 70px 0 0 0; padding: 14px; }
}
@media (max-width: 767px) {
    /* Product shot above the details once the two columns get too narrow. */
    .fpl-prod { grid-template-columns: 1fr; gap: 18px; }
    .fpl-prod-img { max-width: 260px; }
}
@media (max-width: 575px) {
    .fpl-grid-4, .fpl-grid-3.fpl-grid-feats, .fpl-form-card .row2 { grid-template-columns: 1fr; }
    .fpl-table-wrap { overflow-x: auto; }
    .fpl-table { min-width: 640px; }
}